ATPS - FerramentasparaSistemasWeb

FACULDADE ANHANGUERA DE CAMPINAS - UNIDADE 2 TECNOLOGIA EM ANLISE DE DESENVOLVIMENTO DE SISTEMAS
FERRAMENTAS PARA SISTEMAS WEB
TUTOR A DISTNCIA JOO ALEXANDRE BALDOVINOTTI LUCAS NASCIMENTO ARRUDA - RA 6791377515 PEDRO HENRIQUE DOS SANTOS - RA 6579326827 WILLIAN SILVA DE BARROS - RA 6946444729 CLEITON S FREIRE - RA 7125530845
CAMPINAS/SP 2013
Sumrio Relatrio 1 Anlise e Layout.....................................................................................................04 1. Como funciona a internet..............................................................................................04 1.1 Hardware......................................................................................................................04 1.2 Protocolos.....................................................................................................................05 1.2.1 Endereo IP................................................................................................................05 1.3 Como tudo isso funciona..............................................................................................05 2. Sites de loja visitados....................................................................................................06 3. Modelagem do layout do site.........................................................................................06 3.1 Pgina Principal...........................................................................................................07 3.2 Produtos.......................................................................................................................08 3.3 Dicas e Curiosidades...................................................................................................09 3.4 Localizao..................................................................................................................10 3.5 Contato.........................................................................................................................11 3.6 Histria da Empresa.....................................................................................................12 Relatrio 2 Desenvolvimento....................................................................................................13 1. Pgina Principal.............................................................................................................13 2. Produtos........................................................................................................................24 3. Dicas e Curiosidades.....................................................................................................32 4. Contato..........................................................................................................................44 Relatrio 3 CSS e Javascript....................................................................................................72 1. Folhas de estilo (CSS)...................................................................................................72 1.1 style.css.......................................................................................................................72 1.2 normalize.css...............................................................................................................80 1.3 common.css.................................................................................................................90 1.4 index.css......................................................................................................................93 1.5 common.css.................................................................................................................95 1.6 contato.css...................................................................................................................96 1.7 historia-da-empresa.css...............................................................................................98 1.8 localizacao.css.............................................................................................................99 2. Validao em Javascript (JS).....................................................................................100 2.1 script.js......................................................................................................................100 2.2 validation.js...............................................................................................................102 3. Imagens das pginas..................................................................................................107 3.1 Pgina Principal........................................................................................................108 3.2 Produtos...................................................................................................................109 3.3 Dicas e Curiosidades................................................................................................110 3.4 Contato.....................................................................................................................112
2
3.5 Histria da Empresa.................................................................................................113 3.6 Localizao..............................................................................................................114
Relatrio 1 Anlise e Layout Neste relatrio iremos abordar brevemente como funciona a grande rede mundial de computadores, alm de alguns sites de loja de informtica pesquisados que serviram de insumo ao desenvolvimento da atividade prtica supervisionada (ATPS). Tambm ser apresentado abaixo o layout do site em formato wireframe, que foi de grande utilidade para chegar arte final com menos custos relacionados a mudanas j que dessa maneira podemos facilmente manipular os elementos de forma muito rpida e fcil.
1. Como funciona a internet A grande rede mundial de computadores, ou Internet como chamamos atualmente, faz parte da vida da gerao atual e sequer podemos nos imaginar vivendo sem ela. Antes de seu surgimento a busca pela informao era feita atravs de mtodos manuais, como pesquisa em enciclopdias, livros e manuais, e gerava muito mais trabalho pois necessitava em sua maioria que o interessado se locomovesse at a fonte de informao, muitas vezes espalhada em diversos pontos geogrficos. Hoje em dia temos ao nosso dispor muitas ferramentas e dispositivos que facilitam essa busca por informao de maneira rpida e fcil, no conforto de sua casa. Porm, atrs de toda essa nuvem de informao existem alguns componentes que a fazem funcionar e a que devemos ateno para o estudo deste assunto. Basicamente temos dois componentes principais que so utilizados de forma transparente pelo usurio final e que tem um papel importantssimo neste processo. So eles: Hardware e Protocolos. 1.1 Hardware composto por basicamente toda a parte fsica, ou seja que podemos tocar, em que os dados so trafegados pela Internet. Podemos citar por exemplo os cabos que interligam os computadores, os monitores ou telas em que estes dados so apresentados ao usurios e todos os circuitos e componentes eletrnicos que os compe. Os servidores, por exemplo, em geral so os locais onde as informaes se originam. Estes dados passam atravs de outros artefatos como roteadores e perifricos at chegarem ao seu destino final, tambm chamado de ponto final, que em geral so os computadores dos usurios que os requisitam.
1.2 Protocolos
a maneira com que esses componentes eletrnicos se utilizam para comunicar entre si. Os protocolos so definidos para que componentes que atuam de maneiras diferentes possam se integrar e trocar dados e informaes de maneira consistente. Sem os protocolos no seria possvel que essa comunicao acontecesse e a troca de dados no existiria. Resumindo eles so um conjuntos de regras e padres estabelecidos para que essa conversa acontea. Existem vrios tipos de protocolos, cada um especfico para uma determinada informao a ser transferida. Para transferir pginas web utilizados o protocolo HTTP, por outro lado para transferir arquivos podemos utilizar o protocolo FTP. Cada um funciona de um jeito diferente, especfico para uma necessidade. Os protocolos mais conhecidos e importantes que temos atualmente, e que fundamentam toda a Internet que conhecemos so o TCP e o IP. 1.2.1 Endereo IP Para que seja possvel que uma mquina encontre outra em meio a uma rede gigante como a Internet necessrio que cada mquina ou dispositivo possua um endereo nico. Este endereo chamado de IP e no se repete em meio Internet, ou seja, cada mquina possui o seu, permitindo que todas sejam encontradas sem que ocorram conflitos. Existem duas verses desse protocolo: IPv4 e IPv6. A primeira, largamente utilizada atualmente, possui um problema: com o crescimento demasiadamente acelerado de dispositivos conectados Internet, a demanda por endereos IP aumentou exponencialmente, e os endereos disponveis esto chegando ao fim. Por isso foi criado a verso 6 desse protocolo, que visa acabar com este problema uma vez que a quantidade prevista nessa nova implementao conseguir acomodar uma quantidade muito maior durante bastante tempo. Porm os endereos IP so compostos por nmeros, os quais so difceis de serem lembrados pelo ser humano a partir de uma certa quantidade. Para abistrair isso foi criado o conceito de nome de domnio. Nada mais so do que nomes, fceis de serem associados e lembrados pelo homem, e relacionados a determinados endereos IP. Na Internet toda a responsabilidade por essa associao feita pelo que chamamos de Servidor de Nome de Domnio, ou nas sglas em ngles, DNS. 1.3 Como tudo isso funciona Para acessar uma pgina web primeiramente o navegador do usurio faz uma requisio tal pgina. Essa solicitao passa por diversos dispositivos como roteadores e servidores, chegando ao DNS, que faz a associao do nome de domnio requisitado um determinado endereo IP. O servidor/mquina que possuir este endereo ir responder com uma srie de pacotes que sero enviados mquina do cliente. Esses pacotes trafegam pela Internet e no realizam o mesmo trajeto necessariamente. Dependendo da disponibilidade, carga e outros fatores dos dispositivos que compe a Internet os pacotes iro por um ou outro caminho, sempre escolhendo o que for
5
menos custoso e mais rpido. Ao chegar no cliente os pacotes so remontados e ao final formaro a pgina web que ser renderizado pelo navegador do usurio. 2. Sites de loja visitados Os seguintes sites foram visitados e serviram como material de base para produzir o site fictcio da loja de informtica online. http://www.kabum.com.br/ http://www.lojamegabrasil.com.br/ http://www.balaodainformatica.com.br/ http://www.americanas.com.br/
3. Modelagem do layout do site Abaixo temos o wireframe do layout do site que foi desenvolvido. importante destacar a flexibilidade em relao mudanas e adaptaes que essa etapa prope pois o custo de se alterar algo nessa fase do projeto bem menor que se o layout j estivesse sido produzido.
3.1 Pgina Principal
3.2 Produtos
3.3 Dicas e Curiosidades
3.4 Localizao
10
3.5 Contato
11
3.6 Histria da Empresa
12
Relatrio 2 Desenvolvimento Nesta fase criamos transcrevemos o layout feito em wireframe para pginas escritas em linguagem HTML. Apesar das linhas de cdigo responsveis por adicionar arquivos .css e .js, nesta fase da implementao nenhuma folha de estilos (CSS) tampouco cdigo Javascript foram utilizados, portanto ainda no foi possvel atingir a diagramao esperada. Abaixo encontram-se os cdigos-fonte de todas as pginas. Nenhuma imagem foi anexada pois sem as folhas de estilo a renderizao pelo navegador no atingiu nem prximo do esperado, sendo assim no seriam de nenhuma utilidade. Para melhor visualizao do cdigo-fonte de todas as pginas, por favor visite: https://github.com/larruda/fac/tree/release/FSW
1. Pgina Principal <!DOCTYPE html> <!-Instituto Educacional Anhanguera de Campinas - Unidade II ATPS - Ferramentas de Sistemas Web Sala 09 - Turma A - 1o. Semestre EAD
6791377515 - Lucas Nascimento Arruda 6946444729 - Willian Silva de Barros 6579326827 - Pedro Henrique dos Santos 7125530845 - Cleiton Freire
Site de loja de informtica desenvolvido como atividade prtica supervisionada. Obs.: Nomes e comentrios relacionados ao cdigo esto em ingls para manter um padro com a linguagem HTML. --> <html> <head>
13
<title>Pgina Principal</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="css/common.css" /> <link rel="stylesheet" type="text/css" href="css/index.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="TADS Informtica. Bastante variedade em produtos de informtica. Notebooks, jogos, softwares, celulares, acessrios e muito mais. Confira!" /> </head>
<body class="page-pagina-principal"> <div id="container">
 <header> <a href="index.html" class="logo">TADS Informtica</a>
<div class="advertisement skyscrapper"> <span>Publicidade</span> </div>
<div class="right-links"> <input type="search" placeholder="Pesquise um produto" id="search" /> <button id="search-button">Buscar</button>
<ul> <li><a href="#">Meu carrinho</a></li> <li><a href="#">Cadastre-se</a></li> <li><a href="#">Login</a></li>

14
</ul> </div>
<ul id="main-menu"> <li class="active"><a href="index.html">Pgina Principal</a></li> <li><a href="produtos.html">Produtos</a></li> <li><a href="dicas-e-curiosidades.html">Dicas e Curiosidades</a></li> <li><a href="contato.html">Contato</a></li> <li><a href="historia-da-empresa.html">Histria da Empresa</a></li> <li><a href="localizacao.html">Localizao</a></li> </ul> </header> 
<div id="content-wrapper">
 <div id="left-sidebar"> <ul class="menu"> <li>Notebooks</li> <li> <ul> <li><a href="#">Samsung</a></li> <li><a href="#">LG</a></li> <li><a href="#">Hewlett Packard</a></li> <li><a href="#">Apple</a></li> <li><a href="#">Dell</a></li> <li><a href="#">Amazon</a></li> <li><a href="#">Itautec</a></li> <li><a href="#">Positivo</a></li> <li><a href="#">Qbex</a></li>
15
</ul> </li> <li>Acessorios</li> <li> <ul> <li><a href="#">Teclado</a></li> <li><a href="#">Mouse</a></li> <li><a href="#">Capas</a></li> <li><a href="#">Webcam</a></li> <li><a href="#">Headset</a></li> <li><a href="#">Multimdia</a></li> <li><a href="#">Bolsas</a></li> <li><a href="#">Cases</a></li> </ul> </li> <li>Softwares</li> <li> <ul> <li><a href="#">Windows</a></li> <li><a href="#">Macintosh</a></li> <li><a href="#">Linux</a></li> </ul> </li> <li>Jogos</li> <li> <ul> <li><a href="#">PC</a></li> <li><a href="#">PS3</a></li> <li><a href="#">XBOX 360</a></li> <li><a href="#">Wii</a></li> <li><a href="#">PS Vita</a></li>
16
<li><a href="#">Nintendo 3DS</a></li> </ul> </li> <li>Celulares</li> <li> <ul> <li><a href="#">Apple</a></li> <li><a href="#">Motorola</a></li> <li><a href="#">LG</a></li> <li><a href="#">Samsung</a></li> <li><a href="#">HTC</a></li> </ul> </li> </ul> </div> 
 <div id="content">
<ul class="products"> <li> <a href="#"><img src="images/produtos/s3.jpg" alt="Smartphone Samsung Galaxy S III" /></a> <h3>Smartphone Samsung Galaxy S III</h3> <h4 class="description"> Smartphone Samsung Galaxy S III Branco (I9300), Tela Gorilla Glass 2 Super AMOLED Plus 4.8 , Android 4.0, Quad-Core 1.4GHz, 3G, Wi-Fi, GPS, Memria 16GB, Bluetooth 4.0 - (DESBLOQUEADO) - SAMSUNG </h4> <span class="price"> vista R$ 1.665,00</span>
17
<button class="details">+ detalhes</button> </li> <li> <a href="#"><img src="images/produtos/ultrabook.jpg" alt="Ultrabook Samsung" /></a> <h3>Ultrabook Samsung</h3> <h4 class="description"> Ultrabook Samsung, Prata, 13,3 Polegadas LED HD, Processador AMD DUAL-CORE Memria de 2GB DDR3, 500GB de HD SATA, AMD RADEON GRAPHICS, BLUETOOTH 4.0, GIGABIT LAN, HDMI, Windows 8 - SAMSUNG </h4> <span class="price"> vista R$ 1.605,57</span> <button class="details">+ detalhes</button> </li> <li class="last"> <a href="#"><img src="images/produtos/mochila.jpg" alt="Mochila HP Ribbed" /></a> <h3>Mochila HP Ribbed</h3> <h4 class="description"> Mochila HP Ribbed (LQ058LA-ABM), para Notebooks de at 16 Polegadas, Polister, Cor Preto e Azul, Linda! Vrios bolsos internos, e compartimentos. Aproveite! - HP </h4> <span class="price"> vista R$ 1.600,00</span> <button class="details">+ detalhes</button> </li> <li> <a href="#"><img src="images/produtos/nexus.jpg" alt="Celular LG Nexus 4" /></a> <h3>Celular LG Nexus 4</h3> <h4 class="description"> Celular LG Nexus 4 (E960) Preto, Android Jelly Bean 4.2, Processador
18
Qualcomm SnapdragonT S4 Pro Quad Core 1.5GHz, Memria interna de 8GB, Display de 4,7 Polegadas, Bateria Li-Ion 2100 mAh </h4> <span class="price"> vista R$ 1.600,00</span> <button class="details">+ detalhes</button> </li> <li> <a href="#"><img src="images/produtos/office.jpg" alt="OFFICE 2007 STANDARD" /></a> <h3>OFFICE 2007 STANDARD</h3> <h4 class="description"> OFFICE 2007 STANDARD PORTUGUES FPP FULL CD - MICROSOFT </h4> <span class="price"> vista R$ 787,76</span> <button class="details">+ detalhes</button> </li> <li class="last"> <a href="#"><img src="images/produtos/CoD.jpg" alt="Call of Duty Black Ops II" /></a> <h3>Call of Duty Black Ops II</h3> <h4 class="description"> Call of Duty Black Ops II - Playstation 3 ! O game que todos querem com o melhor preo do Brasil! - ACTIVISION </h4> <span class="price"> vista R$ 151,23</span> <button class="details">+ detalhes</button> </li> <li> <a href="#"><img src="images/produtos/notebook.jpg" alt="Notebook Asus K45A-VX164H" /></a> <h3>Notebook Asus K45A-VX164H</h3>
19
<h4 class="description"> Notebook Asus K45A-VX164H, Processador Core I5, 6 GB de Memria, HD 500GB, Windows 8, Tela de LED de 14 Polegadas - ASUS </h4> <span class="price"> vista R$ 1.923,21</span> <button class="details">+ detalhes</button> </li> <li> <a href="#"><img src="images/produtos/mouse-microsoft.jpg" alt="Mouse MICROSOFT sem fio" /></a> <h3>Mouse MICROSOFT sem fio</h3> <h4 class="description"> Mouse MICROSOFT sem fio (Wireless) ptico mobile preto. Design compacto e confortvel juntamente com a convenincia da mobilidade. - MICROSOFT </h4> <span class="price"> vista R$ 47,76</span> <button class="details">+ detalhes</button> </li> <li class="last"> <a href="#"><img src="images/produtos/win8.jpg" alt="Microsoft Windows 8 PRO" /></a> <h3>Microsoft Windows 8 PRO</h3> <h4 class="description"> Microsoft Windows 8 PRO (UPGRADE) 3UR-00009 com O MELHOR PREO DO BRASIL ! - MICROSOFT </h4> <span class="price"> vista R$ 171,36</span> <button class="details">+ detalhes</button> </li> <li> <a href="#"><img src="images/produtos/fifa.jpg" alt="Fifa 13" /></a>
20
<h3>Fifa 13</h3> <h4 class="description"> Fifa 13 - Xbox 360 - EA GAMES </h4> <span class="price"> vista R$ 88,13</span> <button class="details">+ detalhes</button> </li> <li> <a href="#"><img src="images/produtos/hd.jpg" alt="HD Externo Samsung" /></a> <h3>HD Externo Samsung</h3> <h4 class="description"> HD Externo Samsung HX-M101TCB/G M3 Portable 3.0, Capacidade de 1TB, USB 3.0, Cor Preto - SAMSUNG </h4> <span class="price"> vista R$ 287,73</span> <button class="details">+ detalhes</button> </li> <li class="last"> <a href="#"><img src="images/produtos/headset.jpg" alt="Headset Bright Sol Negro" /></a> <h3>Headset Bright Sol Negro</h3> <h4 class="description"> Headset Bright Sol Negro (0171), Com Microfone, Haste Ajustvel BRIGHT </h4> <span class="price"> vista R$ 46,56</span> <button class="details">+ detalhes</button> </li> </ul> </div>
21

 <div id="right-sidebar"> <div class="advertisement fullbanner"> <span>Publicidade</span> </div> </div>  </div> </div>
 <div id="footer-wrapper"> <div id="footer">
<div class="sac"> <h5>Servio de Atendimento ao Consumidor</h5> <a class="phone" href="tel:08007658865">0800 765 8865</a> </div>
<div class="links"> <h5>Mapa do Site</h5> <ul> <li><a href="index.html">Pgina Principal</a></li> <li><a href="produtos.html">Produtos</a></li> <li><a href="dicas-e-curiosidades.html">Dicas e Curiosidades</a></li> <li><a href="contato.html">Contato</a></li> <li><a href="historia-da-empresa.html">Histria da Empresa</a></li> <li><a href="localizacao.html">Localizao</a></li> </ul>
22
</div>
<div class="payments"> <h5>Formas de pagamento</h5> <img width="326" height="51" alt="Formas de pagamento" src="images/payments.png" /> </div>
<div class="social"> <h5>Somos sociais!</h5> <a class="facebook" title="Facebook" href="#">Facebook</a> <a class="twitter" title="Twitter" href="#">Twitter</a> <a class="youtube" title="YouTube" href="#">YouTube</a> <a class="skype" title="Skype" href="#">Skype</a> </div>
<canvas id="logo-background" width="200" height="200"></canvas> <a href="index.html" class="logo">TADS Informtica</a>
<br class="break" /> <span class="copyright"> TADS Informtica © 2013 - Todos os direitos reservados </span> </div> </div> 
 <script type="text/javascript" src="js/script.js"></script> 
23
</body> </html> 2. Produtos <!DOCTYPE html> <!-Instituto Educacional Anhanguera de Campinas - Unidade II ATPS - Ferramentas de Sistemas Web Sala 09 - Turma A - 1o. Semestre EAD
6791377515 - Lucas Nascimento Arruda 6946444729 - Wiliian Silva de Barros 6579326827 - Pedro Henrique dos Santos 7125530845 - Cleiton Freire
Site de loja de informtica desenvolvido como atividade prtica supervisionada. Obs.: Nomes e comentrios relacionados ao cdigo esto em ingls para manter um padro com a linguagem HTML. --> <html> <head> <title>Produtos</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="css/common.css" /> <link rel="stylesheet" type="text/css" href="css/produtos.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="Categorias de produtos da TADS Informtica. Verifique tambm quantos itens possuimos em cada seo." />
24
</head>
<body class="page-produtos"> <div id="container">  <header> <a href="index.html" class="logo">TADS Informtica</a>
<ul> <li><a href="#">Meu carrinho</a></li> <li><a href="#">Cadastre-se</a></li> <li><a href="#">Login</a></li> </ul> </div>
<ul id="main-menu"> <li><a href="index.html">Pgina Principal</a></li> <li class="active"><a href="produtos.html">Produtos</a></li> <li><a href="dicas-e-curiosidades.html">Dicas e Curiosidades</a></li> <li><a href="contato.html">Contato</a></li> <li><a href="historia-da-empresa.html">Histria da Empresa</a></li> <li><a href="localizacao.html">Localizao</a></li> </ul>
25
</header> 
 <div id="left-sidebar"> <ul class="menu"> <li>Notebooks</li> <li> <ul> <li><a href="#">Samsung</a></li> <li><a href="#">LG</a></li> <li><a href="#">Hewlett Packard</a></li> <li><a href="#">Apple</a></li> <li><a href="#">Dell</a></li> <li><a href="#">Amazon</a></li> <li><a href="#">Itautec</a></li> <li><a href="#">Positivo</a></li> <li><a href="#">Qbex</a></li> </ul> </li> <li>Acessorios</li> <li> <ul> <li><a href="#">Teclado</a></li> <li><a href="#">Mouse</a></li> <li><a href="#">Capas</a></li> <li><a href="#">Webcam</a></li> <li><a href="#">Headset</a></li> <li><a href="#">Multimdia</a></li>
26
<li><a href="#">Bolsas</a></li> <li><a href="#">Cases</a></li> </ul> </li> <li>Softwares</li> <li> <ul> <li><a href="#">Windows</a></li> <li><a href="#">Macintosh</a></li> <li><a href="#">Linux</a></li> </ul> </li> <li>Jogos</li> <li> <ul> <li><a href="#">PC</a></li> <li><a href="#">PS3</a></li> <li><a href="#">XBOX 360</a></li> <li><a href="#">Wii</a></li> <li><a href="#">PS Vita</a></li> <li><a href="#">Nintendo 3DS</a></li> </ul> </li> <li>Celulares</li> <li> <ul> <li><a href="#">Apple</a></li> <li><a href="#">Motorola</a></li> <li><a href="#">LG</a></li> <li><a href="#">Samsung</a></li> <li><a href="#">HTC</a></li>
27
</ul> </li> </ul> </div> 
<a href="#" class="large-button notebooks"> <i>Notebooks</i> <img src="images/produtos/notebooks.png" alt="Notebooks" /> </a> <a href="#" class="large-button accessories"> <i>Acessrios</i> <img src="images/produtos/mouse.png" alt="Acessrios" /> </a> <a href="#" class="large-button softwares"> <i>Softwares</i> <img src="images/produtos/cd.png" alt="Softwares" /> </a> <a href="#" class="large-button games"> <i>Jogos</i> <img src="images/produtos/game.png" alt="Jogos" /> </a> <a href="#" class="large-button mobile"> <i>Celulares</i> <img src="images/produtos/mobile.png" alt="Celulares" /> </a>
<h3>Relao Categoria X Quantidade</h3>

28
<p> Confira abaixo uma relao atualizada de quantos produtos temos em cada categoria listada acima: </p>
<table> <thead> <tr> <th>Categoria</th> <th>Quantidade</th> </tr> </thead> <tbody> <tr class="odd"> <td>Notebooks</td> <td>28</td> </tr> <tr class="even"> <td>Acessrios</td> <td>122</td> </tr> <tr class="odd"> <td>Softwares</td> <td>288</td> </tr> <tr class="even"> <td>Jogos</td> <td>157</td> </tr> <tr class="odd">
29
<td>Celulares</td> <td>77</td> </tr> </tbody> </table>
</div> 
<div class="links"> <h5>Mapa do Site</h5> <ul>

30
<li><a href="index.html">Pgina Principal</a></li> <li><a href="produtos.html">Produtos</a></li> <li><a href="dicas-e-curiosidades.html">Dicas e Curiosidades</a></li> <li><a href="contato.html">Contato</a></li> <li><a href="historia-da-empresa.html">Histria da Empresa</a></li> <li><a href="localizacao.html">Localizao</a></li> </ul> </div>
<br class="break" /> <span class="copyright"> TADS Informtica © 2013 - Todos os direitos reservados </span> </div>
31
</div> 
 <script type="text/javascript" src="js/script.js"></script>  </body> </html> 3. Dicas e Curiosidades <!DOCTYPE html> <!-Instituto Educacional Anhanguera de Campinas - Unidade II ATPS - Ferramentas de Sistemas Web Sala 09 - Turma A - 1o. Semestre EAD
Site de loja de informtica desenvolvido como atividade prtica supervisionada. Obs.: Nomes e comentrios relacionados ao cdigo esto em ingls para manter um padro com a linguagem HTML. --> <html> <head> <title>Dicas e Curiosidades</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" />
32
<link rel="stylesheet" type="text/css" href="css/common.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="Curioso? Veja dicas e curiosidades sobre a histria do computador e seus componentes mais comuns." /> </head>
<body class="page-dicas-e-curiosidades"> <div id="container">  <header> <a href="index.html" class="logo">TADS Informtica</a>
<ul id="main-menu"> <li><a href="index.html">Pgina Principal</a></li> <li><a href="produtos.html">Produtos</a></li>

33
<li class="active"><a href="dicas-e-curiosidades.html">Dicas e Curiosidades</a></li> <li><a href="contato.html">Contato</a></li> <li><a href="historia-da-empresa.html">Histria da Empresa</a></li> <li><a href="localizacao.html">Localizao</a></li> </ul> </header> 
 <div id="left-sidebar"> <ul class="menu"> <li>Notebooks</li> <li> <ul> <li><a href="#">Samsung</a></li> <li><a href="#">LG</a></li> <li><a href="#">Hewlett Packard</a></li> <li><a href="#">Apple</a></li> <li><a href="#">Dell</a></li> <li><a href="#">Amazon</a></li> <li><a href="#">Itautec</a></li> <li><a href="#">Positivo</a></li> <li><a href="#">Qbex</a></li> </ul> </li> <li>Acessorios</li> <li> <ul>
34
<li><a href="#">Teclado</a></li> <li><a href="#">Mouse</a></li> <li><a href="#">Capas</a></li> <li><a href="#">Webcam</a></li> <li><a href="#">Headset</a></li> <li><a href="#">Multimdia</a></li> <li><a href="#">Bolsas</a></li> <li><a href="#">Cases</a></li> </ul> </li> <li>Softwares</li> <li> <ul> <li><a href="#">Windows</a></li> <li><a href="#">Macintosh</a></li> <li><a href="#">Linux</a></li> </ul> </li> <li>Jogos</li> <li> <ul> <li><a href="#">PC</a></li> <li><a href="#">PS3</a></li> <li><a href="#">XBOX 360</a></li> <li><a href="#">Wii</a></li> <li><a href="#">PS Vita</a></li> <li><a href="#">Nintendo 3DS</a></li> </ul> </li> <li>Celulares</li> <li>
35
<ul> <li><a href="#">Apple</a></li> <li><a href="#">Motorola</a></li> <li><a href="#">LG</a></li> <li><a href="#">Samsung</a></li> <li><a href="#">HTC</a></li> </ul> </li> </ul> </div> 
<h1>Dicas e Curiosidades</h1>
<p> Ento voc curioso?! Que timo! Esta pgina dedicada ao seu perfil e tras algumas informaes relacionadas histria do computador e seus componentes, com alguns links de referncia para que voc veja como foi a evoluo dos diversos dispositivos que vendemos na TADS Informtica. </p>
<h2>Histria do Computador</h2>
<p> Hoje em dia, os computadores esto presentes em nossa vida de uma forma nunca vista anteriormente. Sejam em casa, na escola, na faculdade, na empresa, ou em qualquer outro lugar, eles esto sempre entre ns. Ao contrrio do que parece, a computao no surgiu nos ltimos anos ou dcadas, mas sim h mais de 7 mil anos atrs.
36
</p>
<p> Por este motivo, desenvolvemos este artigo, que conta a histria e a evoluo da computao e dos computadores em geral, desde a antiguidade at os dias de hoje. Desta maneira, voc poder ficar por dentro das principais formas de computao utilizadas pela humanidade. O texto est dividido em 4 partes e ir abordar temas diversos como baco: mquina de pascal, lgica de Boole, computadores mainframes, Steve Jobs, Bill Gates, entre vrios outros. </p>
<p> Leia mais em: <a target="_blank" href="http://www.tecmundo.com.br/mac-osx/1697-a-historia-dos-computadores-e-dacomputacao.htm#ixzz2QSAJsbI4">http://www.tecmundo.com.br/mac-os-x/1697-a-historia-doscomputadores-e-da-computacao.htm#ixzz2QSAJsbI4</a> </p>
<h2>O Computador e seus componentes</h2>
<p> Se utilizar um computador de secretria, provvel que j saiba que no existe um s componente chamado "computador". Na realidade, um computador um sistema que consiste em vrios componentes que trabalham em conjunto. Os componentes fsicos, que pode ver e tocar, so colectivamente chamados hardware. (Por outro lado, software refere-se s instrues, ou programas, que comandam o hardware.) </p>
<p> A ilustrao abaixo mostra o hardware mais comum presente num sistema informtico de secretria. O seu sistema pode ter um aspecto ligeiramente diferente, mas ter provavelmente a maior parte destes componentes. Um computador porttil tem componentes
37
semelhantes, mas combina-os num sistema de dimenses reduzidas. </p>
<figure> <img src="images/dicas-e-curiosidades/componentes.png" title="Sistema informtico de secretria" /> <figcaption>Sistema informtico de secretria</figcaption> </figure>
<p>Vamos observar cada um destes componentes.</p>
<h3>Unidade de sistema</h3>
<p> A unidade de sistema o ncleo de um sistema informtico. Normalmente, tratase de uma caixa rectangular colocada em cima ou em baixo da sua secretria. No interior desta caixa encontram-se vrios componentes electrnicos que processam informaes. O mais importante destes componentes a CPU (central processing unit), ou microprocessador, que funciona como "crebro" do computador. Outro componente a RAM (random access memory), que armazena temporariamente as informaes utilizadas pela CPU enquanto o computador est ligado. As informaes armazenadas na RAM so apagadas quando o computador desligado. </p>
<p> Praticamente todos os outros componentes do computador esto ligados por cabos unidade de sistema. Os cabos encontram-se ligados a portas (aberturas) especficas, que se encontram normalmente na parte posterior da unidade de sistema. O hardware que no faz parte da unidade de sistema , por vezes, chamado dispositivo perifrico ou dispositivo. </p>
38
<figure> <img src="images/dicas-e-curiosidades/torre.png" title="Unidade de sistema" /> <figcaption>Unidade de sistema</figcaption> </figure>
<h3>Armazenamento</h3>
<p> O computador tem uma ou mais unidades de disco (dispositivos que armazenam informaes num disco de metal ou plstico). O disco preserva as informaes mesmo quando o computador est desligado. </p>
<h4>Unidade de disco rgido</h4>
<p> A unidade de disco rgido do computador armazena informaes num disco rgido, um disco ou uma pilha de discos rgidos com uma superfcie magntica. Visto que os discos rgidos podem conter grandes quantidades de informaes, estes servem normalmente suporte de armazenamento principal do computador, contendo praticamente todos os programas e ficheiros. A unidade de disco rgido encontra-se normalmente no interior da unidade de sistema. </p>
<figure> <img src="images/dicas-e-curiosidades/hdd.png" title="Unidade de disco rgido" /> <figcaption>Unidade de disco rgido</figcaption> </figure>
<h4>Unidades de CD e DVD</h4>
39
<p> Praticamente todos os computadores actual esto equipados com uma unidade de CD ou DVD, normalmente localizada na parte frontal da unidade de sistema. As unidades de CD utilizam lasers para ler (obter) dados num CD; muitas unidades de CD tambm podem escrever (gravar) dados em CDs. Se tiver uma unidade de disco gravvel, pode guardar cpias dos ficheiros em CDs vazios. Tambm pode utilizar uma unidade de CD para reproduzir CDs de msica no computador.
</p>
<figure> <img src="images/dicas-e-curiosidades/cd.png" title="CD" /> <figcaption>CD</figcaption> </figure>
<p> As unidades de DVD podem fazer tudo o que as unidades de CD fazem e, para alm disso, podem ler DVDs. Se tiver uma unidade de DVD, pode ver filmes no computador. Muitas unidades de DVD podem gravar dados em DVDs vazios. </p>
<hr />
<aside> <h5>Sugesto</h5> <ul> <li> Se tiver uma unidade de CD ou DVD gravvel, efectue periodicamente cpias de segurana dos ficheiros importantes em CDs ou DVDs. Deste moto, se o disco rgido falhar, no perder dados. </li>
40
</ul> </aside>
<hr />
<h4>Unidade de disquetes</h4>
<p> As unidades de disquetes guardam informaes em disquetes, tambm chamadas discos flexveis. Comparativamente aos CDs e DVDs, as disquetes s permitem armazenar pequenas quantidades de dados. As disquetes tambm obtm informaes mais lentamente e so mais susceptveis a danos. Por estes motivos, as unidades de disquetes perderam a popularidade que tinham h alguns anos atrs, apesar de alguns computadores ainda as inclurem. </p>
<figure> <img src="images/dicas-e-curiosidades/floppy.png" title="Disquete" /> <figcaption>Disquete</figcaption> </figure>
<p> Porque que as disquetes so "flexveis"? Apesar da superfcie exterior ser feita de plstico rgido, o disco existente no interior fabricado em vinil fino e flexvel. </p>
<p> Leia mais em: <a target="_blank" href="http://windows.microsoft.com/ptpt/windows-vista/parts-of-a-computer">http://windows.microsoft.com/pt-pt/windows-vista/partsof-a-computer</a> </p>
41
<a class="goto-top" href="javascript:goToPageTop();">nicio da pgina</a> </div> 
<div class="links"> <h5>Mapa do Site</h5> <ul> <li><a href="index.html">Pgina Principal</a></li> <li><a href="produtos.html">Produtos</a></li> <li><a href="dicas-e-curiosidades.html">Dicas e Curiosidades</a></li> <li><a href="contato.html">Contato</a></li> <li><a href="historia-da-empresa.html">Histria da Empresa</a></li>
42
<li><a href="localizacao.html">Localizao</a></li> </ul> </div>
 <script type="text/javascript" src="js/script.js"></script>

43
 </body> </html>
4. Contato <!DOCTYPE html> <!-Instituto Educacional Anhanguera de Campinas - Unidade II ATPS - Ferramentas de Sistemas Web Sala 09 - Turma A - 1o. Semestre EAD
Site de loja de informtica desenvolvido como atividade prtica supervisionada. Obs.: Nomes e comentrios relacionados ao cdigo esto em ingls para manter um padro com a linguagem HTML. --> <html> <head> <title>Contato</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="css/common.css" /> <link rel="stylesheet" type="text/css" href="css/contato.css" />
44
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="Preencha nosso formulrio e entre em contato com nossa equipe para tirar dvidas, elogiar ou mesmo prestar uma reclamao. Fique vontade!" /> </head>
<body class="page-contato"> <div id="container">  <header> <a href="index.html" class="logo">TADS Informtica</a>
<ul id="main-menu"> <li><a href="index.html">Pgina Principal</a></li> <li><a href="produtos.html">Produtos</a></li> <li><a href="dicas-e-curiosidades.html">Dicas e Curiosidades</a></li> <li class="active"><a href="contato.html">Contato</a></li>
45
<li><a href="historia-da-empresa.html">Histria da Empresa</a></li> <li><a href="localizacao.html">Localizao</a></li> </ul> </header> 
 <div id="left-sidebar"> <ul class="menu"> <li>Notebooks</li> <li> <ul> <li><a href="#">Samsung</a></li> <li><a href="#">LG</a></li> <li><a href="#">Hewlett Packard</a></li> <li><a href="#">Apple</a></li> <li><a href="#">Dell</a></li> <li><a href="#">Amazon</a></li> <li><a href="#">Itautec</a></li> <li><a href="#">Positivo</a></li> <li><a href="#">Qbex</a></li> </ul> </li> <li>Acessorios</li> <li> <ul> <li><a href="#">Teclado</a></li> <li><a href="#">Mouse</a></li> <li><a href="#">Capas</a></li>
46
<li><a href="#">Webcam</a></li> <li><a href="#">Headset</a></li> <li><a href="#">Multimdia</a></li> <li><a href="#">Bolsas</a></li> <li><a href="#">Cases</a></li> </ul> </li> <li>Softwares</li> <li> <ul> <li><a href="#">Windows</a></li> <li><a href="#">Macintosh</a></li> <li><a href="#">Linux</a></li> </ul> </li> <li>Jogos</li> <li> <ul> <li><a href="#">PC</a></li> <li><a href="#">PS3</a></li> <li><a href="#">XBOX 360</a></li> <li><a href="#">Wii</a></li> <li><a href="#">PS Vita</a></li> <li><a href="#">Nintendo 3DS</a></li> </ul> </li> <li>Celulares</li> <li> <ul> <li><a href="#">Apple</a></li> <li><a href="#">Motorola</a></li>
47
<li><a href="#">LG</a></li> <li><a href="#">Samsung</a></li> <li><a href="#">HTC</a></li> </ul> </li> </ul> </div> 
<h1>Contato</h1>
<p>Possui alguma dvida, sugesto ou mesmo reclamao?</p> <p>Sinta-se vontade para deixar sua mensagem no formulrio abaixo que teremos o prazer em lhe responder.</p>
<form action="contato.html" method="post" id="form-contato">
<div class="name-wrapper"> <label for="name">Nome</label> <input type="text" name="name" id="name" maxlength="150" /> </div>
<div class="city-wrapper"> <label for="city">Cidade</label> <select name="city" id="city" class="styled"> <option value="0">- Selecione uma cidade -</option> <option value="Campinas">Campinas</option> <option value="So Paulo">So Paulo</option>
48
<option value="Valinhos">Valinhos</option> </select> </div>
<div class="state-wrapper"> <label for="state">Estado</label> <select name="state" id="state" class="styled"> <option value="0">- Selecione um estado -</option> <option value="So Paulo">So Paulo</option> </select> </div>
<div class="id-wrapper"> <label for="id">RG</label> <input type="text" name="id" id="id" maxlength="12" /> </div>
<div class="ssn-wrapper"> <label for="ssn">CPF</label> <input type="text" name="ssn" id="ssn" maxlength="14" /> </div>
<br class="break" />
<div class="address-wrapper"> <label for="address">Endereo</label> <input type="text" name="address" id="address" maxlength="200" /> </div>
<div class="phone-wrapper"> <label for="phone">Telefone Residencial</label>

49
<input type="tel" name="phone" id="phone" maxlength="15" /> </div>
<div class="mobile-wrapper"> <label for="mobile">Telefone Celular</label> <input type="tel" name="mobile" id="mobile" maxlength="15" /> </div>
<div class="email-wrapper"> <label for="email">E-mail</label> <input type="email" name="email" id="email" maxlength="200" /> </div>
<div class="message-wrapper"> <label for="message">Mensagem</label> <textarea name="message" id="message" placeholder="Digite aqui sua mensagem..."></textarea> </div>
<span>*Todos os campos so obrigatrios.</span> <input type="reset" value="Limpar" /> <input type="submit" value="Enviar" name="submit" id="submit" /> </form>
<a href="#" class="large-button contact-button"> <img src="images/contato/online-support.png" alt="Suporte Online" /> Clique aqui para falar online com um de nossos atendentes! </a> </div>
50

<div class="links"> <h5>Mapa do Site</h5> <ul> <li><a href="index.html">Pgina Principal</a></li> <li><a href="produtos.html">Produtos</a></li> <li><a href="dicas-e-curiosidades.html">Dicas e Curiosidades</a></li> <li><a href="contato.html">Contato</a></li> <li><a href="historia-da-empresa.html">Histria da Empresa</a></li> <li><a href="localizacao.html">Localizao</a></li> </ul>
51
</div>
 <script type="text/javascript" src="js/script.js"></script> <script type="text/javascript" src="js/validation.js"></script> 
52
</body> </html>
5. Histria da Empresa <!DOCTYPE html> <!-Instituto Educacional Anhanguera de Campinas - Unidade II ATPS - Ferramentas de Sistemas Web Sala 09 - Turma A - 1o. Semestre EAD
Site de loja de informtica desenvolvido como atividade prtica supervisionada. Obs.: Nomes e comentrios relacionados ao cdigo esto em ingls para manter um padro com a linguagem HTML. --> <html> <head> <title>Histria da Empresa</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="css/common.css" /> <link rel="stylesheet" type="text/css" href="css/historia-da-empresa.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="Saiba mais um pouco sobre a trajetria de nossa
53
empresa e a biografia dos que fizeram parte de sua fundao." /> </head>
<body class="page-historia-da-empresa"> <div id="container">  <header> <a href="index.html" class="logo">TADS Informtica</a>
<ul id="main-menu"> <li><a href="index.html">Pgina Principal</a></li> <li><a href="produtos.html">Produtos</a></li> <li><a href="dicas-e-curiosidades.html">Dicas e Curiosidades</a></li> <li><a href="contato.html">Contato</a></li> <li class="active"><a href="historia-da-empresa.html">Histria da Empresa</a></li>
54
<li><a href="localizacao.html">Localizao</a></li> </ul> </header> 
 <div id="left-sidebar"> <ul class="menu"> <li>Notebooks</li> <li> <ul> <li><a href="#">Samsung</a></li> <li><a href="#">LG</a></li> <li><a href="#">Hewlett Packard</a></li> <li><a href="#">Apple</a></li> <li><a href="#">Dell</a></li> <li><a href="#">Amazon</a></li> <li><a href="#">Itautec</a></li> <li><a href="#">Positivo</a></li> <li><a href="#">Qbex</a></li> </ul> </li> <li>Acessorios</li> <li> <ul> <li><a href="#">Teclado</a></li> <li><a href="#">Mouse</a></li> <li><a href="#">Capas</a></li> <li><a href="#">Webcam</a></li>
55
<li><a href="#">Headset</a></li> <li><a href="#">Multimdia</a></li> <li><a href="#">Bolsas</a></li> <li><a href="#">Cases</a></li> </ul> </li> <li>Softwares</li> <li> <ul> <li><a href="#">Windows</a></li> <li><a href="#">Macintosh</a></li> <li><a href="#">Linux</a></li> </ul> </li> <li>Jogos</li> <li> <ul> <li><a href="#">PC</a></li> <li><a href="#">PS3</a></li> <li><a href="#">XBOX 360</a></li> <li><a href="#">Wii</a></li> <li><a href="#">PS Vita</a></li> <li><a href="#">Nintendo 3DS</a></li> </ul> </li> <li>Celulares</li> <li> <ul> <li><a href="#">Apple</a></li> <li><a href="#">Motorola</a></li> <li><a href="#">LG</a></li>
56
<li><a href="#">Samsung</a></li> <li><a href="#">HTC</a></li> </ul> </li> </ul> </div> 
<h1>Histria da Empresa</h1>
<p> A TADS Informtica possui uma histria de tradio em seus mais de 10 anos atuando no varejo de produtos de informtica. Contamos com fundadores experts na rea e colaboradores engajados que fazem do nosso atendimento o melhor, preos imbatveis e rapidez eficiente nas entregas. </p>
<h2>Fundadores</h2>
<figure class="left"> <img src="images/historia-da-empresa/lucas.jpg" title="Lucas Arruda - Um dos fundadores da TADS Informtica" width="222" height="226" /> <figcaption>Lucas Arruda - Um dos fundadores da TADS Informtica</figcaption> </figure>
<h3>Lucas Arruda</h3>
57
<p> Desenvolvedor de software por paixo e empreendedor/lder por vocao. Entitulado Zend Certified Engineer PHP 5.3 (ZCE), desenvolve sistemas web em PHP h mais de 6 anos e trabalha como especialista Drupal h 3 anos. Possui ingls fluente, lidando diariamente com clientes norte-americanos em projetos de grandes corporaes multinacionais do setor de sade e preveno. </p>
<p> Aficionado por msica e suas artes, Lucas possui gosto por praticamente qualquer tipo de som e toca diversos instrumentos. Recentemente firmou um projeto de msica eletrnica no qual vem experimentando combinaes de estilos. Adora um bom livro e no dispensa uma tima refeio. </p>
<br class="clear" />
<figure class="right"> <img src="images/historia-da-empresa/pedro.jpg" title="Pedro dos Santos Idealizador" width="222" height="285" /> <figcaption>Pedro dos Santos - Idealizador</figcaption> </figure>
<h3>Pedro dos Santos</h3>
<p> Nascido no interior de So Paulo, com formao tcnica no Senai, em cursos variados de mecnica, programao e operao de CNC, trabalhando atualmente no desenvolvimento e criao de implantes cirurgicos na rea de usinagem como Analista de Mtodos e Processos. Experincia adquirida no ramo automobilstico na empresa Honda Automveis.
58
</p>
<p> Atualmente cursando TADS na FAC 2, com planos de ingressar na rea de TI e adquirir novos conhecimentos para alcanar outros objetivos. </p>
<h2>Investidores</h2>
<figure class="right"> <img src="images/historia-da-empresa/cleiton.jpg" title="Cleiton Freire Investidor Anjo que alavancou o receita da TADS Informtica" width="222" height="305" /> <figcaption>Cleiton Freire - Investidor Anjo que alavancou o receita da TADS Informtica</figcaption> </figure>
<h3>Cleiton Freire</h3>
<p> Cleiton Freire um Especialista em TI trabalhando para a IBM Global Services no Brasil. Sua responsabilidade principal a migrao de sistemas SAP de plataformas de fornecedores diversos para a IBM AIX . Sua responsabilidade adicional fornecer suporte de terceiro nvel para clientes da IBM na Amrica do Sul, Estados Unidos e Europa. </p>
<p> Cleiton um consultor de tecnologia certificado para a plataforma SAP NetWeaver e Tecnlogo em Componentes Eletrnicos graduado pela Faculdade de Tecnologia de So Paulo. Atualmente Cleiton fluente em ingls, alemo, francs e italiano.
59
</p>
<br class="clear" />
<figure class="left"> <img src="images/historia-da-empresa/willian.jpg" title="Willian Barros Conselheiro financeiro e mentor do setor fiscal da TADS Informtica" width="222" height="250" /> <figcaption>Willian Barros - Conselheiro financeiro e mentor do setor fiscal da TADS Informtica</figcaption> </figure>
<h3>Willian Barros</h3>
<p> Atualmente diretor da area de tecnologia de uma grande empresa,nos finais de semana como sabado, ensina informatica para crianas carentes de uma escola publica, no qual fez uma doao para a mesma de 30 computadores.Mantem tambem uma entidade carente, com doaes de cestas basicas todos os meses, e ajuda um casa de repouso, para idosos, tirando toda a ajuda do proprio bolso. </p>
<p> Futuramente pretende ficar fora do pais, para melhorar o ingls, que no um dos seus pontos fortes.E em breve abrir uma filial fora do pais, junto com seus amigos, membros e fundadores. </p>
</div> 
60
<div class="links"> <h5>Mapa do Site</h5> <ul> <li><a href="index.html">Pgina Principal</a></li> <li><a href="produtos.html">Produtos</a></li> <li><a href="dicas-e-curiosidades.html">Dicas e Curiosidades</a></li> <li><a href="contato.html">Contato</a></li> <li><a href="historia-da-empresa.html">Histria da Empresa</a></li> <li><a href="localizacao.html">Localizao</a></li> </ul> </div>
61
 <script type="text/javascript" src="js/script.js"></script>  </body> </html>
62
6. Localizao <!DOCTYPE html> <!-Instituto Educacional Anhanguera de Campinas - Unidade II ATPS - Ferramentas de Sistemas Web Sala 09 - Turma A - 1o. Semestre EAD
Site de loja de informtica desenvolvido como atividade prtica supervisionada. Obs.: Nomes e comentrios relacionados ao cdigo esto em ingls para manter um padro com a linguagem HTML. --> <html> <head> <title>Localizao</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="css/common.css" /> <link rel="stylesheet" type="text/css" href="css/localizacao.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="Confira os endereos de nossas duas lojas fsicas e seus respectivos telefones, alm do mapa de localizao." /> </head>
<body class="page-localizacao">
63
<div id="container">  <header> <a href="index.html" class="logo">TADS Informtica</a>
<ul id="main-menu"> <li><a href="index.html">Pgina Principal</a></li> <li><a href="produtos.html">Produtos</a></li> <li><a href="dicas-e-curiosidades.html">Dicas e Curiosidades</a></li> <li><a href="contato.html">Contato</a></li> <li><a href="historia-da-empresa.html">Histria da Empresa</a></li> <li class="active"><a href="localizacao.html">Localizao</a></li> </ul> </header> 
64
 <div id="left-sidebar"> <ul class="menu"> <li>Notebooks</li> <li> <ul> <li><a href="#">Samsung</a></li> <li><a href="#">LG</a></li> <li><a href="#">Hewlett Packard</a></li> <li><a href="#">Apple</a></li> <li><a href="#">Dell</a></li> <li><a href="#">Amazon</a></li> <li><a href="#">Itautec</a></li> <li><a href="#">Positivo</a></li> <li><a href="#">Qbex</a></li> </ul> </li> <li>Acessorios</li> <li> <ul> <li><a href="#">Teclado</a></li> <li><a href="#">Mouse</a></li> <li><a href="#">Capas</a></li> <li><a href="#">Webcam</a></li> <li><a href="#">Headset</a></li> <li><a href="#">Multimdia</a></li> <li><a href="#">Bolsas</a></li> <li><a href="#">Cases</a></li> </ul>
65
</li> <li>Softwares</li> <li> <ul> <li><a href="#">Windows</a></li> <li><a href="#">Macintosh</a></li> <li><a href="#">Linux</a></li> </ul> </li> <li>Jogos</li> <li> <ul> <li><a href="#">PC</a></li> <li><a href="#">PS3</a></li> <li><a href="#">XBOX 360</a></li> <li><a href="#">Wii</a></li> <li><a href="#">PS Vita</a></li> <li><a href="#">Nintendo 3DS</a></li> </ul> </li> <li>Celulares</li> <li> <ul> <li><a href="#">Apple</a></li> <li><a href="#">Motorola</a></li> <li><a href="#">LG</a></li> <li><a href="#">Samsung</a></li> <li><a href="#">HTC</a></li> </ul> </li> </ul>
66
</div> 
<h1>Localizao</h1>
<div class="stores"> <div class="store"> <h2>Loja 1</h2> <p> Av. Joo Baldovinotti, 976<br /> Vila Olmpia - SP<br /> CEP 00760-133<br /> Tel: <a href="tel:1178670091">11 7867-0091</a><br /> Horrio de atendimento: 8h30 s 18h<br /> </p>
<span>Loja 1</span> <iframe width="280" height="260" src="https://maps.google.com.br/maps?f=q&source=s_q&hl=en&q=R.+Alesso+B aldovinetti+-+S%C3%A3o+Paulo,+02555-000&aq=&sll=-22.895311,47.030198&sspn=0.325131,0.613174&ie=UTF8&geocode=FaNmf4d_eg3_Q&split=0&hq=&hnear=R.+Alesso+Baldovinetti++S%C3%A3o+Paulo,+02555-000&ll=-23.494303,46.666617&spn=0.010115,0.019162&t=m&z=15&output=embed&iwlo c=near"></iframe><br /><small><a href="https://maps.google.com.br/maps?f=q&source=embed&hl=en&q=R.+Aless o+Baldovinetti+-+S%C3%A3o+Paulo,+02555-000&aq=&sll=-22.895311,47.030198&sspn=0.325131,0.613174&ie=UTF8&geocode=Fa67
Nmf4d_eg3_Q&split=0&hq=&hnear=R.+Alesso+Baldovinetti++S%C3%A3o+Paulo,+02555-000&ll=-23.494303,46.666617&spn=0.010115,0.019162&t=m&z=14" style="color:#0000FF;textalign:left">Clique aqui para ampliar este mapa</a></small> </div>
<div class="store"> <h2>Loja 2</h2> <p> Av. Otacy de Menezes, 120<br /> Valinhos - SP<br /> CEP 12760-129<br /> Tel: <a href="tel:1933086754">19 3308-6754</a><br /> Horrio de atendimento: 8h30 s 18h<br /> </p>
<span>Loja 2</span> <iframe width="280" height="260" src="https://maps.google.com.br/maps?f=q&source=s_q&hl=en&q=menezes&am p;aq=&sll=-23.503414,46.65561&sspn=0.010114,0.019162&ie=UTF8&t=m&st=109146043351405 611748&rq=1&ev=p&split=1&radius=0.73&hq=menezes&hnear= &ll=-23.503038,46.65531&spn=0.010114,0.019162&z=15&iwloc=A&cid=16902593708661 877869&output=embed&iwloc=near"></iframe><br /><small><a href="https://maps.google.com.br/maps?f=q&source=embed&hl=en&q=menezes &aq=&sll=-23.503414,46.65561&sspn=0.010114,0.019162&ie=UTF8&t=m&st=109146043351405 611748&rq=1&ev=p&split=1&radius=0.73&hq=menezes&hnear= &ll=-23.503038,46.65531&spn=0.010114,0.019162&z=14&iwloc=A&cid=16902593708661
68
877869" style="color:#0000FF;text-align:left">Clique aqui para ampliar este mapa</a></small> </div> </div>
<a href="contato.html" class="large-button contact-button">Se preferir utilize nosso formulrio de contato. Clique aqui!</a> </div> 
<div class="links"> <h5>Mapa do Site</h5> <ul>

69
<li><a href="index.html">Pgina Principal</a></li> <li><a href="produtos.html">Produtos</a></li> <li><a href="dicas-e-curiosidades.html">Dicas e Curiosidades</a></li> <li><a href="contato.html">Contato</a></li> <li><a href="historia-da-empresa.html">Histria da Empresa</a></li> <li><a href="localizacao.html">Localizao</a></li> </ul> </div>
<br class="break" /> <span class="copyright"> TADS Informtica © 2013 - Todos os direitos reservados </span> </div>
70
</div> 
 <script type="text/javascript" src="js/script.js"></script>  </body> </html>
71
Relatrio 3 CSS e Javascript Anteriormente tinhamos todo o HTML do site j escrito, porm ainda no haviam as folhas de estilos (CSS) responsveis pela diagramao e aparncia do site, bem como os cdigos em Javascript (JS) que sero responsveis, dentre outras funes, por validar os campos do formulrio da pgina de Contato. Abaixo temos o cdigo de todos os arquivos CSS e JS do site, alm de imagens mostrando como ficou o resultado obtido. Para visualizar o site acesse o seguinte endereo: http://larruda.github.io/fac/FSW/ Como diversas tcnicas atuais de HTML5 e CSS3 foram utilizadas, recomendado utilizar um navegador moderno para que todas as funcionalidades sejam aproveitadas. Nossa sugesto o Google Chrome, que obteve 100% de reconhecimento das funcionalidades em nossos testes. Todas as pginas HTML e folhas CSS esto 100% validadas pela ferramenta de validao disponibilizada pela W3C, comunidade internacional responsvel por padres que garantiro o futuro da web de forma mais homognea. 1. Folhas de estilo (CSS) Os estilos foram divididos em arquivos cada um responsvel por uma determinada pgina ou objetivo. Fizemos dessa forma para facilitar a manuteno e o desenvolvimento. 1.1 style.css Contm estilos que definem a estrutura e diagramao do site como um todo, alm de alguns elementos comuns a todas as pginas. Cdigo:
/* * Instituto Educacional Anhanguera de Campinas - Unidade II * ATPS - Ferramentas de Sistemas Web * Sala 09 - Turma A - 1o. Semestre EAD 72
* * 6791377515 - Lucas Nascimento Arruda * 6946444729 - Wiliian Silva de Barros * 6579326827 - Pedro Henrique dos Santos * 7125530845 - Cleiton Freire * * Site de loja de informtica desenvolvido como atividade prtica supervisionada. * Obs.: Nomes e comentrios relacionados ao cdigo esto em ingls para manter um padro com a linguagem CSS. */ /* * Structure */ body { background: url("../images/background.jpg") repeat; margin: 0; } #container { box-shadow: 0px 3px 15px -5px #000; overflow: hidden; padding-bottom: 20px; } #container, #footer { width: 1100px; margin: 0 auto; background-color: #FFF; } /* * Header */ header { padding-top: 20px; display: block; overflow: hidden; } .logo { display: block; width: 100px; 73
height: 98px; text-indent: -9999px; background-image: url("../images/logo.png"); } header .logo { margin: 10px 30px 0px 40px; } header .right-links, .advertisement, .logo, #left-sidebar, #right-sidebar, #content, #search, #search-button { float: left; } #search { margin: 10px 0 25px 0; width: 200px; border-right: none; border: 1px solid #CCC; padding: 4px; } #search-button { margin: 10px 0 25px 0; } header .right-links { width: 280px; } .right-links ul { padding: 0; } .right-links li:last-child { border: none; padding-right: 0; margin-right: 0; } 74
.right-links ul li { float: left; list-style: none; margin-right: 15px; padding-right: 15px; border-right: 1px solid #CCC; font-size: 15px; } #main-menu { clear: left; width: 100%; display: table; padding: 0; background-color: #444; height: 63px; } #main-menu li { list-style: none; display: table-cell; text-align: center; padding-top: 22px; } #main-menu li:hover, #main-menu li.active { border-bottom: 6px solid rgb(0, 128, 213); cursor: pointer; } #main-menu li a { color: #FFF; } #main-menu li a:hover { text-decoration: none; } /* * Elements */ a { color: rgb(0, 83, 189); 75
text-decoration: none; } a:hover { text-decoration: underline; } button, input[type="button"], input[type="submit"], input[type="reset"] { font-size: 14px; height: 28px; border: none; color: rgb(255, 255, 255); background-color: rgb(71, 119, 180); } figure { text-align: center; } figcaption { font-size: 11px; font-family: Verdana; margin: 5px 0 15px 0; } table { border: 1px solid #CCC; margin: 0 auto; text-align: center; color: #222; font-size: 14px; } /* * Left Sidebar */ #left-sidebar, #right-sidebar { width: 170px; } #left-sidebar .menu { 76
border-right: 1px dotted #CCC; padding-left: 42px; height: 100%; font: 80%/1.2 Arial; } #left-sidebar .menu a { color: #000; } #left-sidebar .menu ul { padding-left: 0px; margin-bottom: 15px; } #left-sidebar .menu ul:last-child { border-bottom: 1px dotted #CCC; padding-bottom: 20px; margin-right: 40px; } #left-sidebar .menu ul li { padding-bottom: 5px; } #left-sidebar > ul > li { font-weight: bold; margin-bottom: 5px; } #left-sidebar ul ul { font-weight: normal; } #left-sidebar ul { list-style: none; } /* * Content */ #content { width: 712px; padding: 10px 20px; } 77
/* * Footer */ #footer-wrapper, #footer { background-color: rgb(71, 119, 180); } #footer { clear: both; height: 330px; overflow: hidden; padding: 42px 0; width: 1016px; color: rgb(48, 48, 48); position: relative; } #footer .logo { position: absolute; right: 64px; bottom: 142px; } #footer .sac .phone { font-size: 54px; font-family: Times; color: #FFF; } #footer .sac h5 { margin-bottom: 10px; } #footer .links { width: 200px !important; } #footer canvas { position: absolute; right: 17px; bottom: 100px; }
78
#footer .sac, #footer .links, #footer .payments, #footer .social { width: 400px; float: left; } #footer .payments { clear: left; } #footer .links { margin-left: 70px; } #footer .links h5 { margin-bottom: 10px; } #footer .links ul { list-style: none; line-height: 20px; padding: 0; } #footer .links a { color: #FFF; font-size: 12px; } #footer .social { width: 200px; margin-left: 70px; } #footer .social a { background-image: url("../images/social-sprite.png"); float: left; height: 32px; text-decoration: none; width: 32px; margin-right: 18px; text-indent: -9999px; display: block; 79
} #footer .social .facebook { background-position: 0 -160px; } #footer .social .twitter { background-position: 0 -64px; } #footer .social .youtube { background-position: 0 -288px; } /* * Helpers */ .break { clear: both; line-height: 0; font-size: 0; height: 0; overflow: hidden; } .float-right { float: right; } .error { border: 1px solid red; }
1.2 normalize.css nica biblioteca externa (http://necolas.github.io/normalize.css/) utilizada com o intuito de padronizar a renderizao dos diversos elementos HTML pelos diferentes navegadores disponveis no mercado. Dessa forma podemos garantir uma experincia mais homognea para nossos usurios, no importando qual navegador seja utilizado, alm de poupar trabalho do desenvolvedor em escrever cdigos especficos para determinados navegadores e que acaba por poluir o cdigo-fonte e atrapalhar futuras manutenes. Cdigo:
80
/*! normalize.css v2.1.1 | MIT License | git.io/normalize */ /* ======================================================================= === HTML5 display definitions ======================================================================= === */ /** * Correct `block` display not defined in IE 8/9. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /** * Correct ìnline-block` display not defined in IE 8/9. */ audio, canvas, video { display: inline-block; } /** * Prevent modern browsers from displaying àudio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { 81
display: none; height: 0; } /** * Address styling not present in IE 8/9. */ [hidden] { display: none; } /* ======================================================================= === Base ======================================================================= === */ /** * 1. Prevent system color scheme's background color being used in Firefox, IE, * and Opera. * 2. Prevent system color scheme's text color being used in Firefox, IE, and * Opera. * 3. Set default font family to sans-serif. * 4. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { background: #fff; /* 1 */ color: #000; /* 2 */ font-family: sans-serif; /* 3 */ -ms-text-size-adjust: 100%; /* 4 */ -webkit-text-size-adjust: 100%; /* 4 */ } /** * Remove default margin. */
82
body { margin: 0; } /* ======================================================================= === Links ======================================================================= === */ /** * Address òutline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* ======================================================================= === Typography ======================================================================= === */ /** * Address variable `h1` font-size and margin within `section` and àrticle` * contexts in Firefox 4+, Safari 5, and Chrome. */ h1 { 83
font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /** * Address differences between Firefox and other browsers. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; 84
color: #000; } /** * Correct font family set oddly in Safari 5 and Chrome. */ code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } /** * Improve readability of pre-formatted text in all browsers. */ pre { white-space: pre-wrap; } /** * Set consistent quote types. */ q { quotes: "\201C" "\201D" "\2018" "\2019"; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { 85
font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ======================================================================= === Embedded content ======================================================================= === */ /** * Remove border when inside à` element in IE 8/9. */ img { border: 0; } /** * Correct overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* ======================================================================= === Figures ======================================================================= === */ 86
/** * Address margin not present in IE 8/9 and Safari 5. */ figure { margin: 0; } /* ======================================================================= === Forms ======================================================================= === */ /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * 1. Correct font family not being inherited in all browsers. * 2. Correct font size not being inherited in all browsers. * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. */
87
button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ } /** * Address Firefox 4+ setting `line-height` on ìnput` using `!important` in * the UA stylesheet. */ button, input { line-height: normal; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. * Correct `select` style inheritance in Firefox 4+ and Opera. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native àudio` * and `video` controls. * 2. Correct inability to style clickable ìnput` types in iOS. * 3. Improve usability and consistency of cursor style between imagetype * ìnput` and others. */ button, 88
html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * 1. Address box sizing set to `content-box` in IE 8/9. * 2. Remove excess padding in IE 8/9. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * 1. Address àppearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */
89
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * 1. Remove default vertical scrollbar in IE 8/9. * 2. Improve readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ======================================================================= === Tables ======================================================================= === */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; }
1.3 common.css Elementos e estilos comuns a todas ou a maioria das pginas.

90
Cdigo:
/* * Instituto Educacional Anhanguera de Campinas - Unidade II * ATPS - Ferramentas de Sistemas Web * Sala 09 - Turma A - 1o. Semestre EAD * * 6791377515 - Lucas Nascimento Arruda * 6946444729 - Wiliian Silva de Barros * 6579326827 - Pedro Henrique dos Santos * 7125530845 - Cleiton Freire * * Site de loja de informtica desenvolvido como atividade prtica supervisionada. * Obs.: Nomes e comentrios relacionados ao cdigo esto em ingls para manter um padro com a linguagem CSS. */ .page-produtos .advertisement.skyscrapper, .page-historia-da-empresa .advertisement.skyscrapper { background-image: url("../images/ad-590x100.gif"); } .page-contato .advertisement.skyscrapper, .page-localizacao .advertisement.skyscrapper { background-image: url("../images/ad-590x100_3.gif"); } .advertisement { text-align: center; } .advertisement:hover { cursor: pointer; } .advertisement.skyscrapper { width: 590px; height: 100px; margin: 0 30px 20px 10px; background-image: url("../images/ad-590x100_2.gif"); text-indent: -9999px; }
91
.advertisement.fullbanner { width: 140px; height: 790px; background-image: url("../images/ad-140x790.jpg"); text-indent: -9999px; margin: 0 auto; float: none; } #content .large-button { border: 1px solid; display: block; height: 120px; border-radius: 15px; margin-bottom: 25px; line-height: 120px; font-size: 60px; background: rgb(71, 119, 180); background: -webkit-gradient(linear, left top, left bottom, from(rgb(71, 119, 180)), to(#0078a5)); color: #FFF; clear: both; position: relative; } #content .large-button img { position: absolute; right: 150px; } #content .large-button:hover { text-decoration: none; background: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 71, 97)), to(#00678e)); } .page-dicas-e-curiosidades #content p, .page-contato #content p, .page-historia-da-empresa #content p, .page-dicas-e-curiosidades #content ul, .page-dicas-e-curiosidades #content a { font-size: 15px; } .goto-top { padding-left: 13px;
92
background: url("../images/dicas-e-curiosidades/top.png") no-repeat scroll 0px 4px; } .contact-button { width: 600px; font-size: 22px !important; margin: 50px auto; text-align: center; padding: 0 20px; } .copyright { display: block; width: auto; text-align: center; font-size: 11px; margin-top: 35px; color: #EEE; }
1.4 index.css Elementos e estilos especficos da Pgina Principal. Cdigo:

/* * Instituto Educacional Anhanguera de Campinas - Unidade II * ATPS - Ferramentas de Sistemas Web * Sala 09 - Turma A - 1o. Semestre EAD * * 6791377515 - Lucas Nascimento Arruda * 6946444729 - Wiliian Silva de Barros * 6579326827 - Pedro Henrique dos Santos * 7125530845 - Cleiton Freire * * Site de loja de informtica desenvolvido como atividade prtica supervisionada. * Obs.: Nomes e comentrios relacionados ao cdigo esto em ingls para manter um padro com a linguagem CSS. */ #content .products { list-style: none; 93
padding: 0; } #content .products li { float: left; width: 224px; height: 280px; margin-right: 20px; text-align: center; } #content .products .last { margin-right: 0; } #content .products h3 { font-size: 13px; margin-bottom: 0; } #content .products .description { font-size: 10px; font-weight: normal; margin: 0; } #content .products .price { font-size: 12px; font-weight: bold; } #content .products .details { color: #FFF; background: rgb(71, 119, 180); background: -webkit-gradient(linear, left top, left bottom, from(rgb(71, 119, 180)), to(#0078a5)); border-radius: 15px; width: 105px; height: 20px; display: block; margin: 2px auto; font-size: 12px; } #content .products .details:hover { 94
background: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 71, 97)), to(#00678e)); }
1.5 common.css Elementos e estilos especficos da pgina Produtos. Cdigo:

/* * Instituto Educacional Anhanguera de Campinas - Unidade II * ATPS - Ferramentas de Sistemas Web * Sala 09 - Turma A - 1o. Semestre EAD * * 6791377515 - Lucas Nascimento Arruda * 6946444729 - Wiliian Silva de Barros * 6579326827 - Pedro Henrique dos Santos * 7125530845 - Cleiton Freire * * Site de loja de informtica desenvolvido como atividade prtica supervisionada. * Obs.: Nomes e comentrios relacionados ao cdigo esto em ingls para manter um padro com a linguagem CSS. */ .page-produtos table td, .page-produtos table th { padding: 5px; } .page-produtos table .odd { background-color: #EEE; } .page-produtos .large-button { padding-left: 30px; } .page-produtos table { width: 300px; }
95
1.6 contato.css Elementos e estilos especficos da pgina Contato. Cdigo:

/* * Instituto Educacional Anhanguera de Campinas - Unidade II * ATPS - Ferramentas de Sistemas Web * Sala 09 - Turma A - 1o. Semestre EAD * * 6791377515 - Lucas Nascimento Arruda * 6946444729 - Wiliian Silva de Barros * 6579326827 - Pedro Henrique dos Santos * 7125530845 - Cleiton Freire * * Site de loja de informtica desenvolvido como atividade prtica supervisionada. * Obs.: Nomes e comentrios relacionados ao cdigo esto em ingls para manter um padro com a linguagem CSS. */ #form-contato { width: 370px; margin: 30px auto; font-size: 12px; overflow: hidden; padding: 20px 30px 30px 30px; background-color: #EEE; } #form-contato label { display: block; margin: 15px 0 5px 0; font-weight: bold; } #form-contato .name-wrapper input, #form-contato .address-wrapper input, #form-contato .email-wrapper input { width: 364px; } #form-contato .city-wrapper, #form-contato .state-wrapper, #form-contato .id-wrapper, 96
#form-contato .ssn-wrapper, #form-contato .phone-wrapper, #form-contato .mobile-wrapper { float: left; } #form-contato .id-wrapper input, #form-contato .ssn-wrapper input, #form-contato .phone-wrapper input, #form-contato .mobile-wrapper input { width: 154px; } #form-contato select { width: 160px; } #form-contato select { padding: 5px; } #form-contato #city, #form-contato .id-wrapper, #form-contato .phone-wrapper { margin-right: 50px; } #form-contato .message-wrapper { clear: left; } #form-contato textarea { width: 364px; height: 200px; margin-bottom: 15px; } #form-contato input[type="submit"], #form-contato input[type="reset"] { float: right; margin-left: 10px; } #content .contact-button { padding-left: 100px; 97
width: 500px; line-height: 35px; padding-top: 25px; height: 95px; overflow: hidden; } #content .contact-button img { position: absolute; bottom: -25px; left: 10px; }
1.7 historia-da-empresa.css Elementos e estilos especficos da pgina Histria da Empresa. Cdigo:

/* * Instituto Educacional Anhanguera de Campinas - Unidade II * ATPS - Ferramentas de Sistemas Web * Sala 09 - Turma A - 1o. Semestre EAD * * 6791377515 - Lucas Nascimento Arruda * 6946444729 - Wiliian Silva de Barros * 6579326827 - Pedro Henrique dos Santos * 7125530845 - Cleiton Freire * * Site de loja de informtica desenvolvido como atividade prtica supervisionada. * Obs.: Nomes e comentrios relacionados ao cdigo esto em ingls para manter um padro com a linguagem CSS. */
.page-historia-da-empresa figure { width: 222px; overflow: hidden; } .page-historia-da-empresa figure.left { float: left; margin-right: 20px; } 98
.page-historia-da-empresa figure.right { float: right; margin-left: 20px; } .page-historia-da-empresa figcaption { float: left; clear: left; } .page-historia-da-empresa .float-right { margin: 0 0 20px 0; }
1.8 localizacao.css Elementos e estilos especficos da pgina Localizao. Cdigo:

/* * Instituto Educacional Anhanguera de Campinas - Unidade II * ATPS - Ferramentas de Sistemas Web * Sala 09 - Turma A - 1o. Semestre EAD * * 6791377515 - Lucas Nascimento Arruda * 6946444729 - Wiliian Silva de Barros * 6579326827 - Pedro Henrique dos Santos * 7125530845 - Cleiton Freire * * Site de loja de informtica desenvolvido como atividade prtica supervisionada. * Obs.: Nomes e comentrios relacionados ao cdigo esto em ingls para manter um padro com a linguagem CSS. */ .stores { overflow: hidden; } .store { float: left; margin-left: 52px; } 99
.store span { display: block; margin-bottom: 10px; } .page-localizacao p { font-size: 13px; } .page-localizacao iframe { border: 1px solid #CCC; }
2. Validao em Javascript (JS) A validao do formulrio da pgina de Contato foi feita via Javascript, bem como outras funcionalidades como o link responsvel por rolar a tela para cima, na pgina Dicas e Curiosidades, e o evento Click no elemento <li> do menu principal, que engatilha o evento de seu elemento filho, a ncora respectiva ao item de menu. O crculo branco que forma o logotipo da TADS Informtica no rodap do site tambm foi feito manipulando o elemento Canvas via Javascript. 2.1 script.js Contm cdigos necessrios a todas as pginas. Cdigo:
/* * Instituto Educacional Anhanguera de Campinas - Unidade II * ATPS - Ferramentas de Sistemas Web * Sala 09 - Turma A - 1o. Semestre EAD * * 6791377515 - Lucas Nascimento Arruda * 6946444729 - Wiliian Silva de Barros * 6579326827 - Pedro Henrique dos Santos * 7125530845 - Cleiton Freire * * Site de loja de informtica desenvolvido como atividade prtica supervisionada. * Obs.: Nomes e comentrios relacionados ao cdigo esto em ingls para manter um padro com a linguagem Javascript. */ // Validation message to be displayed. var validationMessage = ''; 100
// Execute the following code once the DOM has been completely loaded and rendered. window.addEventListener("DOMContentLoaded", function() { // Render footer menu circle. renderBackgroundCanvas(); // Bind click on whole menu item (not only on the anchor). enableMenuWholeClick(); // Bind some specific events. bindEvents(); }, false); /* * Scrolls the page to the top. */ function goToPageTop() { document.body.scrollTop = document.documentElement.scrollTop = 0; } /* * Bind click on whole menu item (not only on the anchor). */ function enableMenuWholeClick() { nodes = document.getElementById('main-menu').childNodes; for(i = 1; i < nodes.length; i += 2) { nodes[i].onclick = function() { this.firstChild.click(); }; } } /* * Render footer menu circle. */ function renderBackgroundCanvas() { var canvas = document.getElementById('logo-background'); var context = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 90; context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = '#FFF'; 101
context.shadowColor = '#000'; context.shadowBlur = 10; context.shadowOffsetX = 3; context.shadowOffsetY = 3; context.fill(); } /* * Binds some specific events. */ function bindEvents() { // Contact form fields masks and validation. if (document.getElementsByTagName('body')[0].className == 'pagecontato') { document.getElementById('submit').onclick = function() { validateContactForm(); } document.getElementById('form-contato').onsubmit = function() { return false; } document.getElementById('id').onkeypress = function() { RGMask(this); } document.getElementById('ssn').onkeypress = function() { CPFMask(this); } document.getElementById('phone').onkeypress = function() { phoneMask(this); } document.getElementById('mobile').onkeypress = function() { phoneMask(this); } } }
2.2 validation.js Contm cdigos necessrios validao do formulrio de Contato e exclusivo essa pgina. Cdigo:
/* * Instituto Educacional Anhanguera de Campinas - Unidade II * ATPS - Ferramentas de Sistemas Web * Sala 09 - Turma A - 1o. Semestre EAD * * 6791377515 - Lucas Nascimento Arruda * 6946444729 - Wiliian Silva de Barros * 6579326827 - Pedro Henrique dos Santos * 7125530845 - Cleiton Freire * Site de loja de informtica desenvolvido como atividade prtica supervisionada. 102
* Obs.: Nomes e comentrios relacionados ao cdigo esto em ingls para manter um padro com a linguagem Javascript. */ /* * Once the user submits the form this validations is triggered. */ function validateContactForm() { // All fields are mandatory, no emptiness allowed. validateEmptiness(); // Validates e-mail address. validateEmail(); // Validates brazilian CPF number. validateCPF(); // Displays any validation warning if necessary. displayMessage('', true); } /* * Displays any validation warning if necessary. */ function displayMessage(message, display) { if (message != '') { validationMessage += message + "\n"; } if (display && validationMessage) { alert(validationMessage); validationMessage = ''; } } /* * Enforce a mask on phone and mobile fields. */ function phoneMask(tel){ if(integerMask(tel)==false){ event.returnValue = false; } return formatField(tel, '(00) 0000-0000', event); } /* 103
* Enforce a mask on CPF field. */ function CPFMask(cpf){ if(integerMask(cpf)==false){ event.returnValue = false; } return formatField(cpf, '000.000.000-00', event); } /* * Enforce a mask on RG field. */ function RGMask(rg){ if((rg)==false){ event.returnValue = false; } return formatField(rg, '00.000.000-0', event); } /* * All fields are mandatory, no emptiness allowed. */ function validateEmptiness() { var name = document.getElementById('name').value.trim(); var id = document.getElementById('id').value.trim(); var ssn = document.getElementById('ssn').value.trim(); var address = document.getElementById('address').value.trim(); var phone = document.getElementById('phone').value.trim(); var mobile = document.getElementById('mobile').value.trim(); var email = document.getElementById('email').value.trim(); var message = document.getElementById('message').value.trim(); var cityField = document.getElementById('city'); var city = cityField.options[cityField.selectedIndex].value; var stateField = document.getElementById('state'); var state = stateField.options[stateField.selectedIndex].value; var textFields textFields['name'] textFields['id'] textFields['ssn'] textFields['address'] textFields['phone'] = = = = = = []; name; id; ssn; address; phone; 104
textFields['mobile'] textFields['email'] textFields['message'] textFields['city'] textFields['state']
= = = = =
mobile; email; message; city; state;
for (var i in textFields) { var currentField = document.getElementById(i); currentField.className = ''; if (!textFields[i] || textFields[i] == 0) { var label = currentField.previousElementSibling; displayMessage("Campo " + label.innerHTML + " obrigatrio."); currentField.className = "error"; } } } /* * Validates whether the brazilian CPF number is valid according to government rules. */ function isValidCPF(cpf){ exp = /\.|\-/g cpf = cpf.toString().replace(exp, ""); var inputDigit = eval(cpf.charAt(9) + cpf.charAt(10)); var sum1 = 0, sum2 = 0; var value = 11; for (i = 0; i < 9; i++){ sum1 += eval(cpf.charAt(i) * (value - 1)); sum2 += eval(cpf.charAt(i) * value); value--; } sum1 = (((sum1 * 10) % 11) == 10 ? 0 : ((sum1 * 10) % 11)); sum2 = (((sum2 + (2 * sum1)) * 10) % 11); var generatedDigit = (sum1 * 10) + sum2; if( generatedDigit != inputDigit) { return false; } 105
return true; } /* * Validates the entered CPF number. */ function validateCPF() { var cpf_field = document.getElementById('ssn'); if (cpf_field.value && !isValidCPF(cpf_field.value)) { displayMessage("O CPF digitado invlido."); cpf_field.className = 'error'; } } /* * Validates the entered E-mail address. */ function validateEmail() { var email_field = document.getElementById('email'); if (email_field.value && !isValidEmail(email_field.value)) { displayMessage("O E-mail digitado invlido."); email_field.className = 'error'; } } /* * Tests whether the input e-mail address is valid depending on many rules as described on its specific RFC. */ function isValidEmail(email) { var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0 -9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[azA-Z]{2,}))$/; return re.test(email); } /* * Generic implementation for a numeric mask. */ function integerMask(){ if (event.keyCode < 48 || event.keyCode > 57){ event.returnValue = false; 106
return false; } return true; } /* * Generic numeric field formatter. */ function formatField(field, Mask, event) { var booleanMask; var input = event.keyCode; exp = /\-|\.|\/|$|$| /g numbersOnlyField = field.value.toString().replace(exp, ""); var fieldPosition = 0; var fieldNewValue=""; var maskLength = numbersOnlyField.length;; if (input != 8) { // Backspace. for(i = 0; i <= maskLength; i++) { booleanMask = ((Mask.charAt(i) == "-") || (Mask.charAt(i) == ".") || (Mask.charAt(i) == "/")); booleanMask = booleanMask || ((Mask.charAt(i) == "(") || (Mask.charAt(i) == ")") || (Mask.charAt(i) == " ")); if (booleanMask) { fieldNewValue += Mask.charAt(i); maskLength++; } else { fieldNewValue += numbersOnlyField.charAt(fieldPosition); fieldPosition++; } } field.value = fieldNewValue; return true; } else { return true; } }
3. Imagens das pginas Abaixo podemos conferir imagens das pginas j finalizadas.
107
3.1 Pgina Principal
108
3.2 Produtos
109
3.3 Dicas e Curiosidades
110
111
3.4 Contato
112
3.5 Histria da Empresa
113
3.6 Localizao
114

ATPS - FerramentasparaSistemasWeb

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

ATPS - FerramentasparaSistemasWeb

Hochgeladen von

Copyright:

Verfügbare Formate

FACULDADE ANHANGUERA DE CAMPINAS - UNIDADE 2 TECNOLOGIA EM ANLISE DE DESENVOLVIMENTO DE SISTEMAS

FERRAMENTAS PARA SISTEMAS WEB

3.5 Histria da Empresa.................................................................................................113 3.6 Localizao..............................................................................................................114

3.1 Pgina Principal

3.3 Dicas e Curiosidades

3.6 Histria da Empresa

<body class="page-pagina-principal"> <div id="container">

<div class="advertisement skyscrapper"> <span>Publicidade</span> </div>

<ul> <li><a href="#">Meu carrinho</a></li> <li><a href="#">Cadastre-se</a></li> <li><a href="#">Login</a></li>

<div id="content">

<div id="footer-wrapper"> <div id="footer">

<canvas id="logo-background" width="200" height="200"></canvas> <a href="index.html" class="logo">TADS Informtica</a>

<div class="advertisement skyscrapper"> <span>Publicidade</span> </div>

</header>

<div id="content">

<h3>Relao Categoria X Quantidade</h3>

<td>Celulares</td> <td>77</td> </tr> </tbody> </table>

</div>

<div id="footer-wrapper"> <div id="footer">

<div class="links"> <h5>Mapa do Site</h5> <ul>

<canvas id="logo-background" width="200" height="200"></canvas> <a href="index.html" class="logo">TADS Informtica</a>

</div>

<link rel="stylesheet" type="text/css" href="css/common.css" />

<div class="advertisement skyscrapper"> <span>Publicidade</span> </div>

<ul id="main-menu"> <li><a href="index.html">Pgina Principal</a></li> <li><a href="produtos.html">Produtos</a></li>

<div id="content">

<p> Leia mais em: <a target="_blank" href="http://www.tecmundo.com.br/mac-osx/1697-a-historia-dos-computadores-e-dacomputacao.htm#ixzz2QSAJsbI4">http://www.tecmundo.com.br/mac-os-x/1697-a-historia-doscomputadores-e-da-computacao.htm#ixzz2QSAJsbI4</a> </p>

<h2>O Computador e seus componentes</h2>

semelhantes, mas combina-os num sistema de dimenses reduzidas. </p>

<p>Vamos observar cada um destes componentes.</p>

<figure> <img src="images/dicas-e-curiosidades/torre.png" title="Unidade de sistema" /> <figcaption>Unidade de sistema</figcaption> </figure>

<h4>Unidade de disco rgido</h4>

<figure> <img src="images/dicas-e-curiosidades/cd.png" title="CD" /> <figcaption>CD</figcaption> </figure>

<figure> <img src="images/dicas-e-curiosidades/floppy.png" title="Disquete" /> <figcaption>Disquete</figcaption> </figure>

<p> Leia mais em: <a target="_blank" href="http://windows.microsoft.com/ptpt/windows-vista/parts-of-a-computer">http://windows.microsoft.com/pt-pt/windows-vista/partsof-a-computer</a> </p>

<div id="footer-wrapper"> <div id="footer">

<li><a href="localizacao.html">Localizao</a></li> </ul> </div>

<canvas id="logo-background" width="200" height="200"></canvas> <a href="index.html" class="logo">TADS Informtica</a>

<script type="text/javascript" src="js/script.js"></script>

</body> </html>

<div class="advertisement skyscrapper"> <span>Publicidade</span> </div>

<div id="content">

<form action="contato.html" method="post" id="form-contato">

<option value="Valinhos">Valinhos</option> </select> </div>

<br class="break" />

<div class="phone-wrapper"> <label for="phone">Telefone Residencial</label>

<input type="tel" name="phone" id="phone" maxlength="15" /> </div>

<br class="break" />

<div id="footer-wrapper"> <div id="footer">

<canvas id="logo-background" width="200" height="200"></canvas> <a href="index.html" class="logo">TADS Informtica</a>

<div class="advertisement skyscrapper"> <span>Publicidade</span> </div>

<li><a href="localizacao.html">Localizao</a></li> </ul> </header>

<div id="content">

<br class="clear" />

<h3>Pedro dos Santos</h3>

<br class="break" />

<br class="clear" />

</div>

<div id="footer-wrapper"> <div id="footer">

<canvas id="logo-background" width="200" height="200"></canvas> <a href="index.html" class="logo">TADS Informtica</a>

<div class="advertisement skyscrapper"> <span>Publicidade</span> </div>

Nmf4d_eg3_Q&split=0&hq=&hnear=R.+Alesso+Baldovinetti++S%C3%A3o+Paulo,+02555-000&ll=-23.494303,46.666617&spn=0.010115,0.019162&t=m&z=14" style="color:#0000FF;textalign:left">Clique aqui para ampliar este mapa</a></small> </div>