atps_-_ferramentasparasistemasweb

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


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


3/114

3

3.5 Histria da Empresa.................................................................................................13.6 Localizao..............................................................................................................1


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


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


6/114


7/114

7

3.1 Pgina Principal


8/114

8

3.2 Produtos


9/114

9

3.3 Dicas e Curiosidades


10/114

10

3.4 Localizao


11/114

11

3.5 Contato


12/114

12

3.6 Histria da Empresa


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


14/114

14

Pgina Principal

TADS Informtica

Publicidade

Buscar

Meu carrinhoCadastre-seLogin


15/114

15

Pgina PrincipalProdutosDicas e CuriosidadesContatoHistria da EmpresaLocalizao

Notebooks

SamsungLGHewlett Packard

AppleDellAmazonItautecPositivoQbex


16/114

16

Acessorios

TecladoMouseCapasWebcamHeadsetMultimdiaBolsasCases

Softwares

WindowsMacintoshLinux

Jogos

PCPS3XBOX 360WiiPS Vita


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


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



19/114

19

Qualcomm SnapdragonT S4 Pro Quad Core 1.5GHz, Memria interna de 8GB, Display de 4Polegadas, Bateria Li-Ion 2100 mAh


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


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


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



21/114

21

Fifa 13

Fifa 13 - Xbox 360 - EA GAMES



22/114

22

Publicidade

Servio de Atendimento ao Consumidor0800 765 8865

Mapa do Site

Pgina Principal

ProdutosDicas e CuriosidadesContatoHistria da EmpresaLocalizao


23/114

23

Formas de pagamento

Somos sociais!FacebookTwitterYouTubeSkype

TADS Informtica

TADS Informtica 2013 - Todos os direitos reservados


24/114

24

2. Produtos

Produtos


25/114

25

TADS Informtica

Publicidade

Buscar


Pgina Principal



26/114

26

Notebooks

SamsungLGHewlett PackardAppleDellAmazonItautecPositivoQbex

Acessorios

TecladoMouseCapasWebcamHeadsetMultimdia


27/114

27

BolsasCases

Softwares


Jogos

PCPS3XBOX 360WiiPS VitaNintendo 3DS

Celulares

AppleMotorolaLGSamsungHTC


28/114

28

Notebooks

Acessrios

Softwares

Jogos

Celulares

Relao Categoria X Quantidade


29/114

29

Confira abaixo uma relao atualizada de quantos produtos temos em cada

categoria listada acima:

CategoriaQuantidade

Notebooks28

Acessrios122

Softwares288

Jogos157


30/114

30

Celulares77

Publicidade

Servio de Atendimento ao Consumidor

0800 765 8865

Mapa do Site


31/114

31

Pgina PrincipalProdutosDicas e Curiosidades

ContatoHistria da EmpresaLocalizao

Formas de pagamento


TADS Informtica



32/114

32

3. Dicas e Curiosidades

Dicas e Curiosidades


33/114

33

TADS Informtica

Publicidade

Buscar


Pgina PrincipalProdutos


34/114

34

Dicas eCuriosidades

Contato

Histria da EmpresaLocalizao

Notebooks

SamsungLGHewlett PackardAppleDellAmazonItautecPositivo

Qbex

Acessorios


35/114

35

TecladoMouseCapas

WebcamHeadsetMultimdiaBolsasCases

Softwares


Jogos

PCPS3XBOX 360Wii

PS VitaNintendo 3DS

Celulares


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.


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


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.


39/114

39


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.


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


42/114

42

nicio da pgina

Publicidade


Mapa do Site

Pgina PrincipalProdutosDicas e CuriosidadesContatoHistria da Empresa


43/114

43

Localizao

Formas de pagamento


TADS Informtica



44/114

44

4. Contato

Contato


45/114

45


46/114

46


Notebooks


Acessorios

TecladoMouseCapas


47/114

47

WebcamHeadsetMultimdia

BolsasCases

Softwares


Jogos


Celulares

AppleMotorola


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


49/114

49

Valinhos

Estado

- Selecione um estado -So Paulo

RG

CPF

Endereo

Telefone Residencial


50/114

50

Telefone Celular

E-mail

Mensagem

*Todos os campos so obrigatrios.

Clique aqui para falar online com um de nossos atendentes!


51/114

51

Publicidade


Mapa do Site

Pgina Principal



52/114

52

Formas de pagamento


TADS Informtica



53/114

53

5. Histria da Empresa

Histria da Empresa


54/114

54

empresa e a biografia dos que fizeram parte de sua fundao." />

TADS Informtica

Publicidade

Buscar


Pgina PrincipalProdutosDicas e CuriosidadesContatoHistria da

Empresa


55/114

55

Localizao

Notebooks


Acessorios

TecladoMouseCapasWebcam


56/114

56

HeadsetMultimdiaBolsas

Cases

Softwares


Jogos


Celulares

AppleMotorolaLG


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


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.


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.


60/114

60


61/114

61

Publicidade


Mapa do Site




62/114

62

Formas de pagamento


TADS Informtica



63/114

63

6. Localizao

Localizao


64/114

64

TADS Informtica

Publicidade

Buscar


Pgina PrincipalProdutosDicas e CuriosidadesContato



65/114

65

Notebooks


Acessorios

TecladoMouseCapas

WebcamHeadsetMultimdiaBolsasCases


66/114

66

Softwares


Jogos


Celulares

AppleMotorola

LGSamsungHTC


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 18h

Loja 1


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 18h

Loja 2


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


70/114

70



Formas de pagamento


TADS Informtica



71/114

71


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/


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;


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;

}


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);


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 {


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;

}


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;

}


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;


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/


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]) {


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. */


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 {


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;


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 {


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

========================================================================== */


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. */


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,


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. */


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.


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;

}


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;


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



#content .products { list-style: none;


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 {


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



.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;

}


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



#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,


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;


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



.page-historia-da-empresa figure { width: 222px; overflow: hidden;

}

.page-historia-da-empresa figure.left { float: left; margin-right: 20px;

}


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



.stores { overflow: hidden;

}

.store { float: left; margin-left: 52px;

}


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 = '';


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';


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.


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);

} /*


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){


}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;


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; }


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){



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


108/114

108

3.1 Pgina Principal


109/114

109

3.2 Produtos


110/114

110

3.3 Dicas e Curiosidades


111/114

111


112/114

112

3.4 Contato


113/114

113

3.5 Histria da Empresa


114/114

3.6 Localizao

atps_-_ferramentasparasistemasweb

Documents