atps_-_ferramentasparasistemasweb
Post on 03-Jun-2018
214 Views
Preview:
TRANSCRIPT
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
1/114
1
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
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
2/114
2
Sumrio
Relatrio 1 Anlise e Layout..................................................................................................... 1. Como funciona a internet............................................................................................
1.1 Hardware................................................................................................................... 1.2 Protocolos.................................................................................................................. 1.2.1 Endereo IP............................................................................................................. 1.3 Como tudo isso funciona........................................................................................... 2. Sites de loja visitados.................................................................................................. 3. Modelagem do layout do site...................................................................................... 3.1 Pgina Principal........................................................................................................ 3.2 Produtos.................................................................................................................... 3.3 Dicas e Curiosidades................................................................................................ 3.4 Localizao............................................................................................................... 3.5 Contato..................................................................................................................... 3.6 Histria da Empresa.................................................................................................
Relatrio 2 Desenvolvimento....................................................................................................1 1. Pgina Principal.......................................................................................................... 2. Produtos...................................................................................................................... 3. Dicas e Curiosidades.................................................................................................. 4. Contato........................................................................................................................
Relatrio 3
CSS e Javascript....................................................................................................7
1. Folhas de estilo (CSS)................................................................................................ 1.1 style.css..................................................................................................................... 1.2 normalize.css............................................................................................................. 1.3 common.css............................................................................................................... 1.4 index.css.................................................................................................................... 1.5 common.css............................................................................................................... 1.6 contato.css................................................................................................................. 1.7 historia-da-empresa.css............................................................................................. 1.8 localizacao.css...........................................................................................................
2. Validao em Javascript (JS).....................................................................................1 2.1 script.js...................................................................................................................... 2.2 validation.js............................................................................................................... 3. Imagens das pginas..................................................................................................13.1 Pgina Principal........................................................................................................13.2 Produtos...................................................................................................................13.3 Dicas e Curiosidades................................................................................................13.4 Contato.....................................................................................................................1
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
3/114
3
3.5 Histria da Empresa.................................................................................................13.6 Localizao..............................................................................................................1
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
4/114
4
Relatrio 1 Anlise e Layout
Neste relatrio iremos abordar brevemente como funciona a grande rede mundial decomputadores, alm de alguns sites de loja de informtica pesquisados que serviram de insumdesenvolvimento da atividade prtica supervisionada (ATPS). Tambm ser apresentado abailayout do site em formatowireframe, que foi de grande utilidade para chegar arte final commenos custos relacionados a mudanas j que dessa maneira podemos facilmente manipular oelementos de forma muito rpida e fcil.
1. Como funciona a internet
A grande rede mundial de computadores, ou Internet como chamamos atualmente, faz parte dvida da gerao atual e sequer podemos nos imaginar vivendo sem ela. Antes de seu surgime busca pela informao era feita atravs de mtodos manuais, como pesquisa em enciclopdialivros e manuais, e gerava muito mais trabalho pois necessitava em sua maioria que o interesse locomovesse at a fonte de informao, muitas vezes espalhada em diversos pontosgeogrficos. Hoje em dia temos ao nosso dispor muitas ferramentas e dispositivos que facilitessa 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 fazemfuncionar e a que devemos ateno para o estudo deste assunto. Basicamente temos doiscomponentes principais que so utilizados de forma transparente pelo usurio final e que tem 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 dadostrafegados pela Internet. Podemos citar por exemplo os cabos que interligam os computadoremonitores ou telas em que estes dados so apresentados ao usurios e todos os circuitos ecomponentes eletrnicos que os compe. Os servidores, por exemplo, em geral so os locais
as informaes se originam. Estes dados passam atravs de outros artefatos como roteadores perifricos at chegarem ao seu destino final, tambm chamado de ponto final, que em geral os computadores dos usurios que os requisitam.
1.2 Protocolos
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
5/114
5
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 seintegrar 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 um conjuntos de regras e padres estabelecidos para queessa conversa acontea.
Existem vrios tipos de protocolos, cada um especfico para uma determinada informao a stransferida. Para transferir pginas web utilizados o protocolo HTTP, por outro lado paratransferir arquivos podemos utilizar o protocolo FTP. Cada um funciona de um jeito diferenteespecfico para uma necessidade. Os protocolos mais conhecidos e importantes que temosatualmente, e que fundamentam toda a Internet que conhecemos so oTCP e o IP.
1.2.1 Endereo IP
Para que seja possvel que uma mquina encontre outra em meio a uma rede gigante como aInternet necessrio que cada mquina ou dispositivo possua um endereo nico. Este enderchamado deIP 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 de protocolo: IPv4 e IPv6. A primeira, largamente utilizada atualmente, possui um problema: cocrescimento demasiadamente acelerado de dispositivos conectados Internet, a demanda porendereos IP aumentou exponencialmente, e os endereos disponveis esto chegando ao fimisso foi criado a verso 6 desse protocolo, que visa acabar com este problema uma vez que aquantidade 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 lembrado pelo ser humano a partir de uma certa quantidade. Para abistrair isso foi criado o conceito denome de domnio. Nada mais so do que nomes, fceis de serem associados e lembrados pelohomem, e relacionados a determinados endereos IP. Na Internet toda a responsabilidade porassociao feita pelo que chamamos de Servidor de Nome de Domnio, ou nas sglas em nDNS.
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, chegaao DNS, que faz a associao do nome de domnio requisitado um determinado endereo IPservidor/mquina que possuir este endereo ir responder com uma srie de pacotes que serenviados mquina do cliente. Esses pacotes trafegam pela Internet e no realizam o mesmotrajeto necessariamente. Dependendo da disponibilidade, carga e outros fatores dos dispositivque compe a Internet os pacotes iro por um ou outro caminho, sempre escolhendo o que fo
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
6/114
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
7/114
7
3.1 Pgina Principal
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
8/114
8
3.2 Produtos
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
9/114
9
3.3 Dicas e Curiosidades
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
10/114
10
3.4 Localizao
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
11/114
11
3.5 Contato
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
12/114
12
3.6 Histria da Empresa
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
13/114
13
Relatrio 2 Desenvolvimento
Nesta fase criamos transcrevemos o layout feito emwireframe para pginas escritas emlinguagem HTML. Apesar das linhas de cdigo responsveis por adicionar arquivos .css e .jsnesta fase da implementao nenhuma folha de estilos (CSS) tampouco cdigo Javascript forutilizados, portanto ainda no foi possvel atingir a diagramao esperada. Abaixo encontramos cdigos-fonte de todas as pginas. Nenhuma imagem foi anexada pois sem as folhas de esrenderizao pelo navegador no atingiu nem prximo do esperado, sendo assim no seriam 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
https://github.com/larruda/fac/tree/release/FSWhttps://github.com/larruda/fac/tree/release/FSWhttps://github.com/larruda/fac/tree/release/FSWhttps://github.com/larruda/fac/tree/release/FSWhttps://github.com/larruda/fac/tree/release/FSWhttps://github.com/larruda/fac/tree/release/FSW -
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
14/114
14
Pgina Principal
TADS Informtica
Publicidade
Buscar
Meu carrinhoCadastre-seLogin
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
15/114
15
Pgina PrincipalProdutosDicas e CuriosidadesContatoHistria da EmpresaLocalizao
Notebooks
SamsungLGHewlett Packard
AppleDellAmazonItautecPositivoQbex
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
16/114
16
Acessorios
TecladoMouseCapasWebcamHeadsetMultimdiaBolsasCases
Softwares
WindowsMacintoshLinux
Jogos
PCPS3XBOX 360WiiPS Vita
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
17/114
17
Nintendo 3DS
Celulares
AppleMotorolaLGSamsungHTC
Smartphone Samsung Galaxy S III
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 16Bluetooth 4.0 - (DESBLOQUEADO) - SAMSUNG
vista R$ 1.665,00
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
18/114
18
+ detalhes
Ultrabook Samsung
Ultrabook Samsung, Prata, 13,3 Polegadas LED HD, Processador AMDDUAL-CORE Memria de 2GB DDR3, 500GB de HD SATA, AMD RADEON GRAPHICSBLUETOOTH 4.0, GIGABIT LAN, HDMI, Windows 8 - SAMSUNG
vista R$ 1.605,57+ detalhes
Mochila HP Ribbed
Mochila HP Ribbed (LQ058LA-ABM), para Notebooks de at 16 PolegadPolister, Cor Preto e Azul, Linda! Vrios bolsos internos, e compartimentos. Aproveite! - H
vista R$ 1.600,00+ detalhes
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
19/114
19
Qualcomm SnapdragonT S4 Pro Quad Core 1.5GHz, Memria interna de 8GB, Display de 4Polegadas, Bateria Li-Ion 2100 mAh
vista R$ 1.600,00+ detalhes
OFFICE 2007 STANDARD
OFFICE 2007 STANDARD PORTUGUES FPP FULL CD - MICROSOFT vista R$ 787,76+ detalhes
Call of Duty Black Ops II
Call of Duty Black Ops II - Playstation 3 ! O game que todos querem com melhor preo do Brasil! - ACTIVISION
vista R$ 151,23
+ detalhes
Notebook Asus K45A-VX164H
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
20/114
20
Notebook Asus K45A-VX164H, Processador Core I5, 6 GB de Memria,
HD 500GB, Windows 8, Tela de LED de 14 Polegadas - ASUS
vista R$ 1.923,21+ detalhes
Mouse MICROSOFT sem fio
Mouse MICROSOFT sem fio (Wireless) ptico mobile preto. Designcompacto e confortvel juntamente com a convenincia da mobilidade. - MICROSOFT
vista R$ 47,76+ detalhes
Microsoft Windows 8 PRO
Microsoft Windows 8 PRO (UPGRADE) 3UR-00009 com O MELHORPREO DO BRASIL ! - MICROSOFT
vista R$ 171,36+ detalhes
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
21/114
21
Fifa 13
Fifa 13 - Xbox 360 - EA GAMES
vista R$ 88,13+ detalhes
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
22/114
22
Publicidade
Servio de Atendimento ao Consumidor0800 765 8865
Mapa do Site
Pgina Principal
ProdutosDicas e CuriosidadesContatoHistria da EmpresaLocalizao
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
23/114
23
Formas de pagamento
Somos sociais!FacebookTwitterYouTubeSkype
TADS Informtica
TADS Informtica 2013 - Todos os direitos reservados
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
24/114
24
2. Produtos
Produtos
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
25/114
25
TADS Informtica
Publicidade
Buscar
Meu carrinhoCadastre-seLogin
Pgina Principal
ProdutosDicas e CuriosidadesContatoHistria da EmpresaLocalizao
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
26/114
26
Notebooks
SamsungLGHewlett PackardAppleDellAmazonItautecPositivoQbex
Acessorios
TecladoMouseCapasWebcamHeadsetMultimdia
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
27/114
27
BolsasCases
Softwares
WindowsMacintoshLinux
Jogos
PCPS3XBOX 360WiiPS VitaNintendo 3DS
Celulares
AppleMotorolaLGSamsungHTC
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
28/114
28
Notebooks
Acessrios
Softwares
Jogos
Celulares
Relao Categoria X Quantidade
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
29/114
29
Confira abaixo uma relao atualizada de quantos produtos temos em cada
categoria listada acima:
CategoriaQuantidade
Notebooks28
Acessrios122
Softwares288
Jogos157
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
30/114
30
Celulares77
Publicidade
Servio de Atendimento ao Consumidor
0800 765 8865
Mapa do Site
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
31/114
31
Pgina PrincipalProdutosDicas e Curiosidades
ContatoHistria da EmpresaLocalizao
Formas de pagamento
Somos sociais!FacebookTwitterYouTubeSkype
TADS Informtica
TADS Informtica 2013 - Todos os direitos reservados
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
32/114
32
3. Dicas e Curiosidades
Dicas e Curiosidades
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
33/114
33
TADS Informtica
Publicidade
Buscar
Meu carrinhoCadastre-seLogin
Pgina PrincipalProdutos
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
34/114
34
Dicas eCuriosidades
Contato
Histria da EmpresaLocalizao
Notebooks
SamsungLGHewlett PackardAppleDellAmazonItautecPositivo
Qbex
Acessorios
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
35/114
35
TecladoMouseCapas
WebcamHeadsetMultimdiaBolsasCases
Softwares
WindowsMacintoshLinux
Jogos
PCPS3XBOX 360Wii
PS VitaNintendo 3DS
Celulares
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
36/114
36
AppleMotorola
LGSamsungHTC
Dicas e Curiosidades
Ento voc curioso?! Que timo! Esta pgina dedicada ao seu perfil e tras
algumas informaes relacionadas histria do computador e seus componentes, com algunslinks de referncia para que voc veja como foi a evoluo dos diversos dispositivos quevendemos na TADS Informtica.
Histria do Computador
Hoje em dia, os computadores esto presentes em nossa vida de uma forma nu
vista anteriormente. Sejam em casa, na escola, na faculdade, na empresa, ou em qualquer outlugar, eles esto sempre entre ns. Ao contrrio do que parece, a computao no surgiu nosltimos anos ou dcadas, mas sim h mais de 7 mil anos atrs.
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
37/114
37
Por este motivo, desenvolvemos este artigo, que conta a histria e a evoluo dcomputao e dos computadores em geral, desde a antiguidade at os dias de hoje. Destamaneira, voc poder ficar por dentro das principais formas de computao utilizadas pelahumanidade. O texto est dividido em 4 partes e ir abordar temas diversos como baco: mqde pascal, lgica de Boole, computadores mainframes, Steve Jobs, Bill Gates, entre vrios ou
Leia mais em: http://www.tecmundo.com.br/mac-os-x/1697-a-historia-dcomputadores-e-da-computacao.htm#ixzz2QSAJsbI4
O Computador e seus componentes
Se utilizar um computador de secretria, provvel que j saiba que no existe
s componente chamado "computador". Na realidade, um computador um sistema que consem vrios componentes que trabalham em conjunto. Os componentes fsicos, que pode ver etocar, so colectivamente chamados hardware. (Por outro lado, software refere-se s instruou programas, que comandam o hardware.)
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
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
38/114
38
semelhantes, mas combina-os num sistema de dimenses reduzidas.
Sistema informtico de secretria
Vamos observar cada um destes componentes.
Unidade de sistema
A unidade de sistema o ncleo de um sistema informtico. Normalmente, trat
se de uma caixa rectangular colocada em cima ou em baixo da sua secretria. No interior descaixa encontram-se vrios componentes electrnicos que processam informaes. O maisimportante destes componentes a CPU (central processing unit), ou microprocessador, quefunciona como "crebro" do computador. Outro componente a RAM (random access memoque armazena temporariamente as informaes utilizadas pela CPU enquanto o computador eligado. As informaes armazenadas na RAM so apagadas quando o computador desligad
Praticamente todos os outros componentes do computador esto ligados por ca unidade de sistema. Os cabos encontram-se ligados a portas (aberturas) especficas, que seencontram normalmente na parte posterior da unidade de sistema. O hardware que no faz pada unidade de sistema , por vezes, chamado dispositivo perifrico ou dispositivo.
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
39/114
39
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
40/114
40
Praticamente todos os computadores actual esto equipados com uma unidade d
CD ou DVD, normalmente localizada na parte frontal da unidade de sistema. As unidades de
utilizam lasers para ler (obter) dados num CD; muitas unidades de CD tambm podem escrev(gravar) dados em CDs. Se tiver uma unidade de disco gravvel, pode guardar cpias dosficheiros em CDs vazios. Tambm pode utilizar uma unidade de CD para reproduzir CDs demsica no computador.
CD
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 computadorMuitas unidades de DVD podem gravar dados em DVDs vazios.
Sugesto
Se tiver uma unidade de CD ou DVD gravvel, efectue periodicamentecpias de segurana dos ficheiros importantes em CDs ou DVDs. Deste moto, se o disco rgifalhar, no perder dados.
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
41/114
41
Unidade de disquetes
As unidades de disquetes guardam informaes em disquetes, tambm chamad
discos flexveis. Comparativamente aos CDs e DVDs, as disquetes s permitem armazenar pequenas quantidades de dados. As disquetes tambm obtm informaes mais lentamente emais susceptveis a danos. Por estes motivos, as unidades de disquetes perderam a popularidque tinham h alguns anos atrs, apesar de alguns computadores ainda as inclurem.
Disquete
Porque que as disquetes so "flexveis"? Apesar da superfcie exterior ser feit
de plstico rgido, o disco existente no interior fabricado em vinil fino e flexvel.
Leia mais em: http://windows.microsoft.com/pt-pt/windows-vista/pof-a-computer
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
42/114
42
nicio da pgina
Publicidade
Servio de Atendimento ao Consumidor0800 765 8865
Mapa do Site
Pgina PrincipalProdutosDicas e CuriosidadesContatoHistria da Empresa
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
43/114
43
Localizao
Formas de pagamento
Somos sociais!FacebookTwitterYouTubeSkype
TADS Informtica
TADS Informtica 2013 - Todos os direitos reservados
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
44/114
44
4. Contato
Contato
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
45/114
45
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
46/114
46
Histria da EmpresaLocalizao
Notebooks
SamsungLGHewlett PackardAppleDellAmazonItautecPositivoQbex
Acessorios
TecladoMouseCapas
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
47/114
47
WebcamHeadsetMultimdia
BolsasCases
Softwares
WindowsMacintoshLinux
Jogos
PCPS3XBOX 360WiiPS VitaNintendo 3DS
Celulares
AppleMotorola
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
48/114
48
LGSamsungHTC
Contato
Possui alguma dvida, sugesto ou mesmo reclamao?
Sinta-se vontade para deixar sua mensagem no formulrio abaixo que terem
o prazer em lhe responder.
Nome
Cidade
- Selecione uma cidade -CampinasSo Paulo
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
49/114
49
Valinhos
Estado
- Selecione um estado -So Paulo
RG
CPF
Endereo
Telefone Residencial
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
50/114
50
Telefone Celular
E-mail
Mensagem
*Todos os campos so obrigatrios.
Clique aqui para falar online com um de nossos atendentes!
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
51/114
51
Publicidade
Servio de Atendimento ao Consumidor0800 765 8865
Mapa do Site
Pgina Principal
ProdutosDicas e CuriosidadesContatoHistria da EmpresaLocalizao
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
52/114
52
Formas de pagamento
Somos sociais!FacebookTwitterYouTubeSkype
TADS Informtica
TADS Informtica 2013 - Todos os direitos reservados
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
53/114
53
5. Histria da Empresa
Histria da Empresa
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
54/114
54
empresa e a biografia dos que fizeram parte de sua fundao." />
TADS Informtica
Publicidade
Buscar
Meu carrinhoCadastre-seLogin
Pgina PrincipalProdutosDicas e CuriosidadesContatoHistria da
Empresa
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
55/114
55
Localizao
Notebooks
SamsungLGHewlett PackardAppleDellAmazonItautecPositivoQbex
Acessorios
TecladoMouseCapasWebcam
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
56/114
56
HeadsetMultimdiaBolsas
Cases
Softwares
WindowsMacintoshLinux
Jogos
PCPS3XBOX 360WiiPS VitaNintendo 3DS
Celulares
AppleMotorolaLG
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
57/114
57
SamsungHTC
Histria da Empresa
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 ecolaboradores engajados que fazem do nosso atendimento o melhor, preos imbatveis e rapieficiente nas entregas.
Fundadores
Lucas Arruda - Um dos fundadores da TADSInformtica
Lucas Arruda
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
58/114
58
Desenvolvedor de software por paixo e empreendedor/lder por vocao.
Entitulado Zend Certified Engineer PHP 5.3 (ZCE), desenvolve sistemas web em PHP h ma
6 anos e trabalha como especialista Drupal h 3 anos. Possui ingls fluente, lidando diariamecom clientes norte-americanos em projetos de grandes corporaes multinacionais do setor dsade e preveno.
Aficionado por msica e suas artes, Lucas possui gosto por praticamente qualq
tipo de som e toca diversos instrumentos. Recentemente firmou um projeto de msica eletrnno qual vem experimentando combinaes de estilos. Adora um bom livro e no dispensa umtima refeio.
Pedro dos Santos - Idealizador
Pedro dos Santos
Nascido no interior de So Paulo, com formao tcnica no Senai, em cursos
variados de mecnica, programao e operao de CNC, trabalhando atualmente nodesenvolvimento e criao de implantes cirurgicos na rea de usinagem como Analista deMtodos e Processos. Experincia adquirida no ramo automobilstico na empresa HondaAutomveis.
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
59/114
59
Atualmente cursando TADS na FAC 2, com planos de ingressar na rea de TI eadquirir novos conhecimentos para alcanar outros objetivos.
Investidores
Cleiton Freire - Investidor Anjo que alavancou o receita da TADS
Informtica
Cleiton Freire
Cleiton Freire um Especialista em TI trabalhando para a IBM Global Services
Brasil. Sua responsabilidade principal a migrao de sistemas SAP de plataformas defornecedores diversos para a IBM AIX . Sua responsabilidade adicional fornecer suporteterceiro nvel para clientes da IBM na Amrica do Sul, Estados Unidos e Europa.
Cleiton um consultor de tecnologia certificado para a plataforma SAP
NetWeaver e Tecnlogo em Componentes Eletrnicos graduado pela Faculdade de Tecnolode So Paulo. Atualmente Cleiton fluente em ingls, alemo, francs e italiano.
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
60/114
60
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
61/114
61
Publicidade
Servio de Atendimento ao Consumidor0800 765 8865
Mapa do Site
Pgina PrincipalProdutosDicas e Curiosidades
ContatoHistria da EmpresaLocalizao
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
62/114
62
Formas de pagamento
Somos sociais!FacebookTwitterYouTubeSkype
TADS Informtica
TADS Informtica 2013 - Todos os direitos reservados
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
63/114
63
6. Localizao
Localizao
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
64/114
64
TADS Informtica
Publicidade
Buscar
Meu carrinhoCadastre-seLogin
Pgina PrincipalProdutosDicas e CuriosidadesContato
Histria da EmpresaLocalizao
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
65/114
65
Notebooks
SamsungLGHewlett PackardAppleDellAmazonItautecPositivoQbex
Acessorios
TecladoMouseCapas
WebcamHeadsetMultimdiaBolsasCases
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
66/114
66
Softwares
WindowsMacintoshLinux
Jogos
PCPS3XBOX 360WiiPS VitaNintendo 3DS
Celulares
AppleMotorola
LGSamsungHTC
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
67/114
67
Localizao
Loja 1
Av. Joo Baldovinotti, 976
Vila Olmpia - SP
CEP 00760-133
Tel: 11 7867-0091
Horrio de atendimento: 8h30 s 18hLoja 1
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
68/114
68
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;text
align:left">Clique aqui para ampliar este mapa
Loja 2
Av. Otacy de Menezes, 120
Valinhos - SP
CEP 12760-129
Tel: 19 3308-6754
Horrio de atendimento: 8h30 s 18hLoja 2
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
69/114
69
877869" style="color:#0000FF;text-align:left">Clique aqui para ampliar este mapa
Publicidade
Servio de Atendimento ao Consumidor
0800 765 8865
Mapa do Site
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
70/114
70
Pgina PrincipalProdutosDicas e Curiosidades
ContatoHistria da EmpresaLocalizao
Formas de pagamento
Somos sociais!FacebookTwitterYouTubeSkype
TADS Informtica
TADS Informtica 2013 - Todos os direitos reservados
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
71/114
71
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
72/114
72
Relatrio 3 CSS e Javascript
Anteriormente tinhamos todo o HTML do site j escrito, porm ainda no haviam as folhas destilos (CSS) responsveis pela diagramao e aparncia do site, bem como os cdigos emJavascript (JS) que sero responsveis, dentre outras funes, por validar os campos doformulrio da pgina de Contato. Abaixo temos o cdigo de todos os arquivos CSS e JS do sialm 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 umnavegador moderno para que todas as funcionalidades sejam aproveitadas. Nossa sugesto 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 validaodisponibilizada pela W3C, comunidade internacional responsvel por padres que garantirofuturo da web de forma mais homognea.
1. Folhas de estilo (CSS)
Os estilos foram divididos em arquivos cada um responsvel por uma determinada pgina ouobjetivo. 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 algunselementos 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
http://larruda.github.io/fac/FSW/http://larruda.github.io/fac/FSW/http://larruda.github.io/fac/FSW/http://larruda.github.io/fac/FSW/ -
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
73/114
73
* * 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;
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
74/114
74
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;
}
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
75/114
75
.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);
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
76/114
76
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 {
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
77/114
77
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;
}
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
78/114
78
/* * 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;
}
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
79/114
79
#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;
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
80/114
80
}
#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 navegadoresdisponveis no mercado. Dessa forma podemos garantir uma experincia mais homognea panossos usurios, no importando qual navegador seja utilizado, alm de poupar trabalho dodesenvolvedor em escrever cdigos especficos para determinados navegadores e que acaba poluir o cdigo-fonte e atrapalhar futuras manutenes.
Cdigo:
http://necolas.github.io/normalize.css/http://necolas.github.io/normalize.css/http://necolas.github.io/normalize.css/http://necolas.github.io/normalize.css/ -
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
81/114
81
/*! 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 inline-block` display not defined in IE 8/9. */
audio, canvas, video {
display: inline-block; }
/** * Prevent modern browsers from displaying audio` without controls. * Remove excess height in iOS 5 devices. */
audio:not([controls]) {
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
82/114
82
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. */
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
83/114
83
body { margin: 0;
}
/*==========================================================================
Links
========================================================================== */
/** * Address outline` 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
`article` * contexts in Firefox 4+, Safari 5, and Chrome. */
h1 {
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
84/114
84
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;
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
85/114
85
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 {
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
86/114
86
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 `a` element in IE 8/9. */
img { border: 0;
}
/** * Correct overflow displayed oddly in IE 9. */
svg:not(:root) { overflow: hidden;
}
/*==========================================================================
Figures
========================================================================== */
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
87/114
87
/** * 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. */
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
88/114
88
button, input, select, textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 2 */ margin: 0; /* 3 */
}
/** * Address Firefox 4+ setting line-height` on input` 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
`audio` * and `video` controls. * 2. Correct inability to style clickable input` types in iOS. * 3. Improve usability and consistency of cursor style between image-
type * `input` and others. */
button,
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
89/114
89
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 appearance` 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. */
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
90/114
90
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.
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
91/114
91
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 inglspara 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;
}
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
92/114
92
.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;
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
93/114
93
background: url("../images/dicas-e-curiosidades/top.png") no-repeatscroll 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;
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
94/114
94
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 {
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
95/114
95
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;
}
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
96/114
96
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,
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
97/114
97
#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;
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
98/114
98
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;
}
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
99/114
99
.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;
}
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
100/114
100
.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 outrasfuncionalidades como olink responsvel por rolar a tela para cima, na pgina Dicas eCuriosidades, e o eventoClick no elemento do menu principal, que engatilha o evento de selemento filho, a ncora respectiva ao item de menu. O crculo branco que forma o logotipo dTADS Informtica no rodap do site tambm foi feito manipulando o elementoCanvas viaJavascript.
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 prticasupervisionada.
* Obs.: Nomes e comentrios relacionados ao cdigo esto em inglspara manter um padro com a linguagem Javascript.
*/
// Validation message to be displayed. var validationMessage = '';
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
101/114
101
// Execute the following code once the DOM has been completely loadedand 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';
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
102/114
102
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 == 'page-
contato') { 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 pgin
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.
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
103/114
103
* Obs.: Nomes e comentrios relacionados ao cdigo esto em inglspara 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);
} /*
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
104/114
104
* 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'] = name; textFields['id'] = id; textFields['ssn'] = ssn; textFields['address'] = address; textFields['phone'] = phone;
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
105/114
105
textFields['mobile'] = mobile; textFields['email'] = email; textFields['message'] = message; textFields['city'] = city;
textFields['state'] = 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; }
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
106/114
106
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]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email); }
/* * Generic implementation for a numeric mask. */
function integerMask(){ if (event.keyCode < 48 || event.keyCode > 57){
event.returnValue = false;
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
107/114
107
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
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
108/114
108
3.1 Pgina Principal
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
109/114
109
3.2 Produtos
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
110/114
110
3.3 Dicas e Curiosidades
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
111/114
111
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
112/114
112
3.4 Contato
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
113/114
113
3.5 Histria da Empresa
-
8/12/2019 ATPS_-_FerramentasparaSistemasWeb
114/114
3.6 Localizao
top related