AW1 Desenvolvimento Avanado de Interfaces Web com HTML, CSS e JavaScript

Introduo
1.1 Browsers HTTP User-Agents User-Agent String 1.1.1 1.1.2 1.2 1.3 1.4

6
8 8 10 11 12 13 14 15 16 16 17

O documento HTML O modelo de objetos HTML e XML Valor semntico de um documento Documento XML DOCTYPE em HTML Por que DOCTYPE? Quais outros DOCTYPES existem?

1.4.1 1.4.2 1.4.3 1.4.4 1.4.5

A Linguagem HTML
2.1 Introduo Estrutura do documento HTML Caractersticas das tags HTML Os atributos 2.1.1 2.1.2 2.1.3 2.2

20
21 22 23 23 24 24 25 25 26 27 28 28 29 30 30 31 33 34 36 37 40 42 45 45 48 49 50

Textos Caracteres especiais

2.2.1 2.3

Listas Ordenadas No - Ordenadas Exemplo de lista de contedo

2.3.1 2.3.2 2.3.3 2.4

Hyperlinks Tag<a> Caminhos relativos e absolutos O atributo target Uso com imagens

2.4.1 2.4.2 2.4.3 2.4.4 2.5

Tabelas A Tag <TR> A Tag <TD> A Tag <TH> Estrutura formal das tabelas

2.5.1 2.5.2 2.5.3 2.5.4 2.6 2.7 2.8

Laboratrio 1 Imagens Formulrios A tag <form> A tag input Campos de texto Campos de senha

2.8.1 2.8.2 2.8.3 2.8.4

ndice 2.8.5 2.8.6 2.8.7 2.8.8 2.8.9 2.8.10 2.8.11 2.8.12 2.9 2.10 Campos de seleo Campos de escolha Campos de lista ou menu Campos com mltiplas linhas Botes Upload de arquivo FieldSet Label 51 52 53 55 56 58 59 60 62 63

Outras tags Laboratrio 2

Cascading Style Sheet (CSS)

3.1 3.2 3.3 Introduo Como funciona o CSS ? Usando CSS com HTML Estilos no prprio elemento Estilos com escopo da pgina Estilos definidos em arquivos externos

66
67 70 71 72 73 74 75 76 77 79 81 84 90 90 91 96 97 99 100 100 102 105 106 108 110 112 114 115 120 122

3.3.1 3.3.2 3.3.3 3.4 3.5 3.6

Laboratrio 3 Declarao de estilos Seletores Seletores de classes Sintaxe utilizada para definio de seletores

3.6.1 3.6.2 3.7 3.8

Atributos de estilo CSS Configuraes essenciais Tabela de unidades Fontes Cores Bordas

3.8.1 3.8.2 3.8.3 3.8.4 3.9 3.10 3.10.1 3.10.2 3.10.3 3.10.4 3.10.5 3.10.6 3.10.7 3.10.8 3.10.9 3.11 3.12

Box Model Aplicando estilos aos principais elementos HTML Configuraes para Barra de rolagem Listas Marcadores customizados Hyperlinks Botes Campos para entrada de texto Caixas de seleo Manipulando cursores Tabelas Laboratrio 4 Componentizao

AW1 Desenvolvimento Avanado de Interfaces Web com HTML, CSS e JavaScript

JavaScript
4.1 4.2 4.3 Introduo Porque JavaScript tem sido muito utilizado com aplicaes Java? Java Script e HTML Dentro do prprio documento Em um arquivo externo

130
131 131 132 132 133 134 137 138 139 141 143 147 149 149 149 150 151 153 153 156

4.3.1 4.3.2 4.4 4.5

Tratadores de eventos Sintaxe da linguagem Declarao de variveis Palavras reservadas Tipos de dados Operadores Desvios condicionais e laos

4.5.1 4.5.2 4.5.3 4.5.4 4.5.5 4.6

Arrays Criao e inicializao de arrays Acessando os elementos do array Mtodos especiais

4.6.1 4.6.2 4.6.3 4.7 4.8

Funes Classes Utilitrias String Date

4.8.1 4.8.2

JavaScript do lado do Cliente

5.1 5.2 5.3 5.4 5.5 5.6 Introduo Overview da estrutura de objetos Acessando os elementos da rvore Window Document Formulrios Componentes de formulrio

160
161 162 163 164 166 168 169 171 172 173 174 176 177

5.6.1 5.7 5.8 5.9 5.10 5.11 5.12

Dilogos Status Navigator Location History Laboratrio 5

Controle do documento via DOM Level 1

6.1 6.2 6.3 Introduo Ns DOM API getElementsByTagName(strTagName)

180
181 182 183 184

6.3.1

ndice 6.3.2 6.3.3 6.3.4 6.3.5 6.3.6 6.3.7 6.4 childNodes createTextNode(text) appendChild(newChild) createElement(newElementName) removeChild(theChild) getAttribute(nome) e setAttribute(nome,valor) 185 186 186 186 187 187 188 188 190 193 196 198 200 202 204 205 206

Exemplos Acessando elementos de ns usando os mtodos Criando uma tabela dinamicamente Marcar ou desmarcar um conjunto de checkboxes Evitando duplo clique do usurio Validando campos obrigatrios Validando a sintaxe dos dados digitados Validando o tamanho dos campos

6.4.1 6.4.2 6.4.3 6.4.4 6.4.5 6.4.6 6.4.7 6.5 6.6

Laboratrio 6 Cookies Manipulando cookies na mquina do usurio

6.6.1

DOM Style
7.1 7.2 Introduo Exemplos Escondendo e reexibindo partes da tela Alterando componentes do formulrio baseado na seleo de um elemento na lista Tornando um campo obrigatrio baseado na seleo de um elemento da lista Menu dinmico Definindo qual tutorial ser exibido conforme o sistema operacional do usurio

212
213 217 217 221 223 226 231 234

7.2.1 7.2.2 7.2.3 7.2.4 7.2.5 7.3

Laboratrio 7

Apndices
8.1 8.2 Identificando um browser na aplicao server Introduo ao JDeveloper Estrutura de diretrios, aplicaes e projetos Criao do Workspace e do projeto (Passo a passo) Criando uma pgina HTML no JDeveloper Overview das principais janelas O Editor de HTML O Editor de CSS

236
237 238 238 239 240 243 245 246

8.2.1 8.2.2 8.2.3 8.2.4 8.2.5 8.2.6

CAPTULO

Introduo
Introduo O documento HTML O modelo de objetos HTML e XML

1 Introduo

1 Introduo

Anotaes

Copyright 2005 Globalcode The Developers Company, todos os direitos reservados.

AW1 Desenvolvimento Avanado de Interfaces Web com HTML, CSS e JavaScript

O desenvolvimento de aplicaes Web tem se tornado cada vez mais predominante no cenrio atual de Tecnologia da Informao.

Tudo est na Web! Empresas e pessoas possuem site, blogs, orkut. A diversidade de produtos ofertados/vendidos e a quantidade de pessoas que acessam internet tm crescido exponencialmente ao longo do tempo. A melhoria tambm tem sido notria em relao s conexes e no aspecto segurana.

A competitividade das empresas provedoras de tecnologia, especialmente em relao a produtos de infraestrutura, tais como sistemas operacionais, bancos de dados, servidores de aplicao e browsers, tm crescido a cada dia.

Este mesmo nvel de competitividade tambm observado na adoo das linguagens de programao. As empresas debatem, brigam e fazem benchmarks sobre a utilizao de Java, .NET, Delphi, Cobol, e muitas outras.

Em programao Web no existe uma grande disputa pelo formato das aplicaes porque a maioria delas baseada em HTML e utilizam CSS. A predominncia na utilizao do JavaScript como linguagem de script clara e muitas utilizam Flash, alm de algumas outras tecnologias.

No entanto, a briga acirrada dos browsers to grande que, apesar de haver especificaes de muitas tecnologias, os fabricantes no aderem 100% ao padro, tornando a vida dos desenvolvedores Web muito mais difcil.

Ainda hoje, a incompatibilidade entre os browsers (principalmente os lderes de mercado) algo preocupante porque a todo o momento preciso realizar testes para verificar se est tudo dentro da normalidade e, no rara vezes, debugar para entender o que foi usado que no est sendo corretamente interpretado por um ou outro browser.

Anotaes

Copyright 2005 Globalcode The Developers Company, todos os direitos reservados.

1 Introduo

1.1

Browsers

Antes de abordarmos os tpicos mais tcnicos (HTML, Cascading Style Sheet e JavaScript) fundamental conhecermos um pouco mais sobre a plataforma de execuo de tudo isto: - browsers.

1.1.1

HTTP User-Agents

No contexto automobilstico, considere o Agente-Usurio como sendo um veculo automotor, possvel de ser dirigido e de obter acesso a destinos desejveis. E voc ser o arquiteto e tambm o construtor responsvel pela criao e manuteno das estradas, permitindo assim, que os usurios tenham uma tima experincia ao dirigi-lo e consigam alcanar seus destinos. Para tal, importante entender um pouco sobre o funcionamento e diferenas entre os principais veculos. No contexto da WWW, esses veculos de acesso so chamados Browsers, Navegadores ou User Agents.

A maioria dos Browsers, no s permitem que usurios possam ter acesso a contedo, mas tambm funcionam como sendo uma interface mediadora entre eles e os recursos da rede. Assim, permitem que estes possam tambm enviar informaes para sistemas externos. A tabela a seguir mostra um histrico dos mais conhecidos veculos de navegao e comentrios sobre algumas das capacidades oferecidas:

Navegador Firefox 1 e superiores

Padres suportados HTML 4.01, XHTML 1.0, CSS 1, CSS 2, CSS 3 parcial, DOM 1, 2, e 3 parcial, XML, XSLT, XUL, XBL, JavaScript (ECMAScript), SOAP 1.0 (parcial), dentre outros. Os Browsers Firefox mais recentes possuem tambm suporte para SVG (grficos, vetores, filtros).

Internet Explorer 5 e superiores Opera 8

HTML, XHTML, CSS 1 e 2 (parcial), DOM 1, 2 (parcial) , XML, XSLT (parcial), HTC, JavaScript, dentre outros. Internet Explorer mais recentes oferecem tambm suporte para VML, tratando-se de um padro proprietrio da Microsoft para vetores e efeitos visuais. HTML 4.01, XHTML 1.0, XHTML 1.1 (com excees), XHTML Basic, XHTML + Voice support (uma vez instalados mdulos IBM de speech), WML 1.0 e 2.0, XML, XSLT, XSL, SVG (para grficos de vetores), CSS 1, CSS 2, CSS 2.1 (com algumas excees), CSS Mobile Profile, WAP CSS, parcial CSS 3, ECMAScript, DOM 2 Core, DOM 1 HTML, DOM 2 Events, DOM 2 Style, dentre outros. Para uma lista mais fiel ao estado do Browser, visite o site da Opera Software (http://www.opera.com/docs/specs/).

Netscape 4.x

HTML, CSS 1 e 2 (parcial), DOM 1 parcial, JavaScript (parcial) e muitos bugs.

Anotaes

Copyright 2005 Globalcode The Developers Company, todos os direitos reservados.

AW1 Desenvolvimento Avanado de Interfaces Web com HTML, CSS e JavaScript

Navegador GoogleBot

Padres suportados Parsing de HTML, indexao. O GoogleBot encontra-se aqui como um exemplo de um UserAgent que no utilizado diretamente por humanos, como o Firefox. No caso, o GoogleBot fica acessando sites na Web e assim atualizando o ndice para o Search engine da Google. Na viso do servidor de Web, o GoogleBot funciona praticamente como um Browser, pois ele acessa o site por completo, navega pelos links, obtendo assim documentos HTML, imagens, arquivos CSS e mais.

Como visto na tabela, o Internet Explorer 6.0 e Mozilla Firefox, so exemplos de Browsers modernos que suportam muitos dos padres W3C. Nesta apostila, o foco principal dado a esses Navegadores e aos principais padres.

Anotaes

Copyright 2005 Globalcode The Developers Company, todos os direitos reservados.

1 Introduo

1.1.2

User-Agent String

HTTP User-Agent um termo mais formal, tambm utilizado para se referir a um Browser. Cada tipo de Browser identificado pelo fabricante atravs de uma String chamada User-Agent String. A lista abaixo enumera exemplos de alguns dos Browsers mais populares e suas User-Agent String:

Termo popular Firefox para NT 1.0.2 Windows

Fabricante Mozilla Foundation e contribuidores. Hoje desenvolvido por contribuidores do projeto Mozilla, e anteriormente com cdigofonte baseado no Netscape Communicator; originalmente criado por Netscape Communications.

User-Agent String Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.6) Gecko/20050317 Firefox/1.0.2 Mozilla/4.0 (compatible;

Internet Explorer 6.0

Microsoft Corporation. O primeiro Internet Explorer surgiu no mercado em 1995, em sua verso 1.0. Note que esta User Agent String representa o Internet Explorer verso 6.0. Para cada verso do Browser existe uma outra User Agent String.

MSIE 6.0; Windows NT 5.2; Win64; AMD64)

HotJava

Sun Microsystems e desenvolvido completamente em Java.

Mozilla/3.0

(x86

[en]

Windows NT 5.1; Sun)

Como visto acima, o Internet Explorer 6.0 e Mozilla Firefox so exemplos de Browsers modernos que suportam muitos dos padres W3C. Nesta apostila, o foco principal dado a esses Navegadores e aos principais padres. Curiosidade: note que a User-Agent do Internet Explorer tem o termo Mozilla includo. Isso ocorreu porque em 1994, o Mozilla era o nico Browser popular na Internet e quando o Internet Explorer chegou ao mercado em 1995, ele no funcionaria corretamente tendo em vista que muitos servidores Web verificavam o nome da UserAgent antes de enviar a pgina ao Browser. Por exemplo, nos sites de bancos, se a User-Agent string no bate com os tipos de Browser cadastrados, o banco envia uma pgina orientando o usurio a utilizar um Browser homologado. Assim, a User-Agent String do Internet Explorer contm a palavra Mozilla.

Atualmente, a prtica de analisar a User-Agent pode trazer muito trabalho e acabar prejudicando o futuro de um site. Se for um caso crtico, como problemas de segurana em bancos, ainda se recomenda bloquear Browsers pela anlise da User-Agent string. Mas, em geral, a recomendao que se utilize de deteco de Objetos e evitar detectar o browser por User Agent. No captulo 3 sero apresentados casos de deteco de Objetos e funcionalidade no Browser.

Anotaes

10

Copyright 2005 Globalcode The Developers Company, todos os direitos reservados.

AW1 Desenvolvimento Avanado de Interfaces Web com HTML, CSS e JavaScript

1.2

O documento HTML

Documento ou pgina - the document. Esta outra maneira de se referir a uma determinada pgina. O termo HTML comumente usado quando desenvolvedores se referem s pginas da Internet. Neste curso, a preferncia para o termo documento. A razo dessa preferncia porque existem muitos outros padres e tecnologias associados a uma pgina HTML como, por exemplo: CSS, DOM, JavaScript. A idia que o termo documento englobe o contexto completo, portanto, um termo mais abrangente. A figura abaixo ilustra um caso de um documento (pgina na Internet):

Figura 2: Identificando alguns blocos dentro de um arquivo em HTML e possvel visualizao em objetos do contedo do elemento body.

Observe a sub-figura ao lado esquerdo. Trata-se de um HTML, mas que possui internamente algumas reas que se referem a outros padres diferentes de HTML. O bloco de cima refere-se a definies de estilo. No bloco do meio existe uma poro de cdigo em JavaScript. J o bloco na parte inferior, este sim traz um trecho com alguns elementos HTML.

Por outro lado, no incorreto referir-se ao documento acima como sendo um arquivo HTML porque o formato HTML permite que esses outros padres sejam encapsulados no contexto do documento. No entanto, no escopo deste estudo ser utilizado o termo documento, por ser mais genrico. Alm disso, estaremos tambm verificando casos de outros documentos como XHTML e XML.

Anotaes

Copyright 2005 Globalcode The Developers Company, todos os direitos reservados.

11

1 Introduo

1.3

O modelo de objetos

O Modelo de Objetos um dos conceitos fundamentais e seu entendimento facilitar a leitura, a escrita e a manipulao de documentos dinmicos. Note que na figura da pgina anterior, o bloco inferior contm a parte que se refere ao corpo do HTML (elemento body). Tudo o que se encontra dentro do elemento body muito provavelmente vai implicar em apresentao de contedo na janela de visualizao do Browser. A caixa no meio (1) mostra uma visualizao possvel para este elemento body, bem como, os elementos que se encontram declarados no seu corpo. No caso, existe um elemento H1, tambm chamado de header-1, dentro do qual se encontra um bloco de texto com a descrio - HelloWorld!.

Note o modelo de rvore utilizado: BODY \_____ H1 \_____ TEXTNODE

N ou elemento body que contm elemento H1 que, por sua vez, contm texto.

Uma outra representao simplificada do caso acima poderia ser: BODY \_____ H1 \_____ = Hello World!

Estas so representaes compatveis com o modelo utilizado na implementao dos Browsers mais populares. Em memria, esses elementos so armazenados como ns e cada n pode conter filhos e assim por diante.

Nota: ser observado quanto o modelo de objetos til no contexto de manipulao dinmica de elementos. Basicamente, cada elemento pode ser manipulado com auxlio da linguagem interpretada JavaScript. Quando o JavaScript altera propriedades dos elementos, o Browser se encarrega de imediatamente alterar a apresentao no documento. Por exemplo, pode-se utilizar JavaScript para retirar o elemento H1 que foi colocado acima. Este e outros casos sero abordados adiante.

Anotaes

12

Copyright 2005 Globalcode The Developers Company, todos os direitos reservados.

AW1 Desenvolvimento Avanado de Interfaces Web com HTML, CSS e JavaScript

1.4

HTML e XML

Nesta seo voc desenvolver documentos HTML, focando inicialmente nos aspectos de estrutura e contedo. Este mtodo difere de outras metodologias de ensino, onde a linguagem HTML primeiramente apresentada com foco maior nos aspectos relacionados com Layout-visual.

Tendo, portanto, uma estrutura de contedo bem definida, ento se pode trabalhar nos aspectos visuais e detalhes de Layout; por exemplo, adicionando-se elementos como Tabelas e definies de estilo via CSS.

Segue abaixo um HTML muito simples que contm uma lista de pintores famosos. Ao carregar o documento em um Browser, nota-se que o ttulo "Pintores Famosos" aparece em negrito com fonte grande e, ento, cada pargrafo subseqente vai conter o nome de um pintor.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<html> <body> <div>Pablo Picasso</div> <div>Vincent van Gogh</div> <div>Leonardo da Vinci</div> <div>Claude Monet</div> <div>Salvador Dali</div> <div>Henri Matisse</div> <div>Andy Warhol</div> </body> </html>

Figura 3: exemplo de visualizao do exemplo HTML com lista de artistas.

Neste documento voc pode notar em seu Browser que o aspecto visual bem simples e direto, quase no existindo definio de layout visual nas suas declaraes, tais como tabelas, cores ou tamanho da fonte de texto. Neste estgio, o documento tem carter mais informativo.

Anotaes

Copyright 2005 Globalcode The Developers Company, todos os direitos reservados.

13

1 Introduo

1.4.1

Valor semntico de um documento

O fato de a Web crescer rapidamente como conseqncia do amadurecimento de tecnologias, implica tambm no aumento de inmeros documentos sem controle de qualidade. No final da dcada de 90, por exemplo, muitas empresas rapidamente multiplicaram suas pginas adicionando Tags sem nenhum controle, como tentativa de enriquecer a camada de apresentao. Como resultado disso, nota-se atualmente um grande nmero de sites e sistemas on-line que se super-expressam com um exagero de informaes visuais, estruturao complicada e excesso de definies visuais na camada declarativa do documento HTML.

Regra geral, o ideal tentar estruturar o documento texto HTML, o mais prximo possvel da informao em si e ento, aperfeio-lo para que atinja as qualidades e requisitos visuais desejados, mas de maneira organizada.

Tpico relacionado SEO SEO ou Search Engine Optimization um termo utilizado como referncia ao processo de alterao de um Web site, visando melhorar a performance ou Ranking em resultados de Search Engines como Google.com, Yahoo.com e outros. Em geral, quando se coloca uma determinada palavra-chave em um Search Engine, a definio da ordem dos resultados feita com base em certo nmero de critrios. Alguns desses consideram a simplicidade e estrutura do documento HTML, assim, o contedo da pgina e os tipos de elementos definidos podem influenciar e significar um peso expressivo nos resultados. Exemplificando, se um link AB, de uma pgina A para uma pgina B, contiver palavras-chaves que existam na pgina B, esta ltima passa a ter um peso mais significativo para pesquisas que utilizem palavras-chaves definidas no link AB. Existem diversos outros elementos do HTML que so relevantes para Search Engines; exemplo, a correta utilizao do <H1></H1> em ttulos ou cabealhos de seo.

Anotaes

14

Copyright 2005 Globalcode The Developers Company, todos os direitos reservados.

AW1 Desenvolvimento Avanado de Interfaces Web com HTML, CSS e JavaScript

1.4.2

Documento XML

Note que em um documento XML permitido criar nomes para as Tags. A idia do documento XML ficar mais prximo da informao e no conter necessariamente elementos ou Tags que tenham significado de Layout.

O tratamento de Tags em um documento XML feito atravs de outras declaraes e documentos, que devem ser associados ao XML. Por exemplo: - Browsers modernos podem apresentar um documento XML, se o mesmo contiver um documento associado que declara estilo ( CSS ou XSLT).

1 2 3 4 5 6 7 8 9 10 11 12 13

<?xml version="1.0" ?> <artistlist> <artist>Pablo Picasso</artist> <artist>Vincent van Gogh</artist> <artist>Leonardo da Vinci</artist> <artist>Claude Monet</artist> <artist>Salvador Dali</artist> <artist>Henri Matisse</artist> <artist>Andy Warhol</artist> <artist>Rembrandt</artist> <artist>Paul Cezanne</artist> <artist>Georgia O'Keeffe</artist> </artistlist>

O documento XML contm apenas a informao e a respectiva descrio (Meta-informao), enquanto os elementos HTML contm, alm do impacto semntico, tambm o visual.

O aspecto semntico pode ser associado ao fator funcional e caracterstica de cada elemento HTML (e suas respectivas funcionalidades oferecidas), uma vez apresentados por um User Agent Browser. O aspecto visual tambm pode ser notado uma vez que o documento HTML apresentado em um Browser. Adiante, ser apresentada a origem das definies visuais de elementos HTML.

Anotaes

Copyright 2005 Globalcode The Developers Company, todos os direitos reservados.

15