B. ANEXO – PLATAFORMA ONLINE/WEBSITE
B.2 Criação da Pagina Inicial
Partindo agora para o processo de criação da página inicial, neste caso o “index.html”,
esse nome porque é o nome que os servidores leem como padrão para ser à página
principal. A página inicial é do tipo “One Page” de modo que tudo se encontra nessa
página, tem como exceção a página do demo da Aplicação Android. Página essa que foi desenvolvida de modo a ser o mais simples possível e com o máximo de informação sobre o produto.
No início do script de um website, primeiro são “chamados” os ficheiros que contém o Style (CSS), o fav-icon (é a imagem 16X16 que aparece no início no browser), e no caso o
website seja responsivo (adapta ao tamanho do dispositivo em que é aberto o website), e também é onde se atribui o título do website, isto tudo está contido no “<head>” dado no Script B-1, (Harris, 2011).
Script B-1: Definição do "head" do website.
Depois disso começa a trabalhar no “<body>” do website, neste caso onde está o Menu inicial Script B-2, o contato, e diferentes links para contato como por exemplo o do Facebook (https://www.facebook.com/RemoteGate) Figura B-5, foi criado uma página de Facebook para contatar os produtores e também para Marketing. Avançando agora mais no Body do websitecriei diferentes “boxes” para introduzir algum texto sobre o trabalho,
esse que está no Main Container.
Figura B-5: Página do Facebook do Gates Technology. <head>
<meta charset="utf-8">
<!-- PAGE TITLE -->
<title>Gate Technology</title>
<!-- MAKE IT RESPONSIVE -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO -->
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
<!-- FAVICON -->
<link rel="shortcut icon" href="images/favicon.ico" />
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/animate.min.css" rel="stylesheet" media="screen">
<link href="css/font-awesome.min.css" rel="stylesheet" media="screen">
<link href="style.css" rel="stylesheet" media="screen">
<link href="css/options.css" rel="stylesheet" media="screen">
<link href="css/responsive.css" rel="stylesheet" media="screen">
93 Keven Alex Oliveira Lopes
Script B-2: Criação do Menu principal.
Como referido antes criei um pequeno demo para levar as pessoas a conhecer mais da aplicação Android, de seguida apresentarei algumas imagens dessas páginas e os scripts que compõem os mesmos. Na página principal existe um botão “Conhecer” que
redireciona para uma nova página onde está o demo, a função que faz isso é
“href= "app.html" target= "_blank" onde o href é onde está o link da página e o “Target blank” faz com que seja aberto um novo separador no browser para abrir essa página.
Figura B-6: Apresentação do "body" da página.
<nav id="navigation">
<!-- DISPLAY MOBILE MENU -->
<a href="#" id="show-mobile-menu"><i class="fa fa-bars"></i></a> <a href="#" id="close-navigation-mobile"><i class="fa fa-long-arrow- left"></i></a>
<ul id="left-navigation" class="animate-me fadeInLeftBig"> <li class="menu-item menu-item-has-children">
<a href="#header" class="inside-link">Ínicio</a> </li>
<li class="menu-item menu-item-has-children">
<a href="#skillsfor" class="inside-link">Serviços</a> </li>
<li class="menu-item"><a href="#aplicacao" class="inside- link">Aplicação</a></li>
</ul>
<div class="animate-me flipInX" data-wow-duration="3s"> <a href="#header" id="logo-navigation" class="inside-link"> </a>
</div>
<ul id="right-navigation" class="animate-me fadeInRightBig">
<li class="menu-item"><a href="#team-container" class="inside-link">
Sobre</a></li>
<li class="menu-item menu-item-has-children">
<a href="#blog-container" class="inside-link"> Download</a> </li>
<li class="menu-item"><a href="#contact-container" class="inside-link"><i class="fa fa-envelope"></i> Contactos</a></li>
</ul> </nav>
Script B-3: Script do Custom Container, criação da página apresentada anteriormente.
Figura B-7: Página do demo da aplicação.
<div id="aplicacao">
<h2 class="with-breaker animate-me fadeInUp">
Conheça a Aplicação <span>Sim, desenvolvida para si totalmente grátis !</span><br><br>
</h2> </div>
<div class="appshow">
<section class="custom-section-container with-separation-bottom with- separation-top">
<div class="container">
<div class="custom-section-text">
<img src="images/logoappgt.png" id="logoapp"> <h2>Conheça a nossa app</h2>
<p>Clique no botão conhecer para ver a base da nossa app ou faça download gratuito e tornesse nosso cliente.</p>
</div>
<div class="custom-buttons-edit"> <div class="custom-section-buttons">
<a href="app.html" target="_blank" class="btn btn-app"><i class="fa fa- book"></i> Conhecer</a>
<a href="#" class="btn btn-app"><i class="fa fa-play"></i> Download</a> </div>
</div>
</div>
95 Keven Alex Oliveira Lopes
Script B-4: Criação do demo.
Foi adicionada também na página do website pequenas informações sobre a comunicação entre o carro, à garagem e a aplicação Android de seguida pode-se verificar através de diferentes imagens da página e dos respetivos scripts, mas como os textos presentes nas páginas encontram-se unicamente em uma linha não será possível apresentar os mesmo de uma forma a conseguir esses nos. Depois foi desenvolvido um script que contém um mapa de localização do criador do produto, neste caso o endereço referido é o do ISEC. Do mesmo foi criado um formulário de contato diverso, desde uma pergunta, pedido de suporte ou também para adquirir o produto. Para isso o que se precisa é o nome, um
email, um assunto e a respetiva mensagem. Em seguida através da Figura B-8 e do Script
B-5 pode-se ver como se deu a criação do mesmo.
Figura B-8: Mapa e formulário de contato.
<!doctype html>
<html lang="en" class="no-js"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="app/css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="app/css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<title>Introdução da App | Gate Technology</title> </head>
<body>
<header class="cd-header">
<div id="cd-logo"><a href="index.html"><img src="images/logo-header.png"
alt="Logo"></a></div>
<div id="cd-action"><a href="#" class="btn">Download</a></div> <div id="cd-action"><a href="index.html" class="btn salmon">Gate Technology</a></div>
</header>
<main class="cd-main-content"> <div class="cd-product-intro"> <h1>Introdução da App</h1>
<p>Clique no botão Começar para ver a apresentação que preparamos para si.</p>
<div class="cd-triggers">
<a href="#" class="btn">Download</a>
<a href="#cd-product-tour" class="btn salmon" data-type="cd- tour">Começar</a>
</div>
Script B-5: Criação do formulário de contato.