Desvendando padrões para desenvolvimento web, base para o sucesso
-
Upload
ubiratan-z-do-nascimento -
Category
Education
-
view
2.512 -
download
0
description
Transcript of Desvendando padrões para desenvolvimento web, base para o sucesso
![Page 1: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/1.jpg)
DESVENDANDO PADRÕES PARA
DESENVOLVIMENTO WEB, BASE PARA
O SUCESSO Prof. Esp. Ubiratan Zakaib do Nascimento
http://www.onucleo.com Twitter: @birazn
@onucleo
This work is licensed under a Creative Commons Atribuição-Uso não-comercial-Vedada a criação de obras derivadas 3.0 Unported License.
![Page 2: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/2.jpg)
AGENDA DO TREINAMENTO
• Apresentação do facilitador
• Apresentação das ferramentas
– NetBeans versão X
– Navegador X
• Conhecendo WebStandards
2 Técnicas e Padrões de Projeto Web
![Page 3: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/3.jpg)
AGENDA DO TREINAMENTO
• Treinamento “mão na massa”
– Implementação de Códigos XHTML
– Validação XHTML
– Implementação de Códigos CSS
– Validação CSS
– Implementando com Framework AJAX
– Implementando Galeria de Fotos
3 Técnicas e Padrões de Projeto Web
![Page 4: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/4.jpg)
HTML e XHTML
Conhecendo e começando
Web Standards Projects
![Page 5: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/5.jpg)
Como tudo começou
• A Web foi criado em 1989, por Tim Berners-Lee, para ser um padrão de publicação e distribuição de textos científicos e acadêmicos.
• Localizador Uniforme de Recursos (URL)
• Linguagem de Marcação de Hipertexto (HTML)
• Protocolo de Transferência de Hipertexto (HTTP)
• Navegador Web (Browser)
5 Técnicas e Padrões de Projeto Web
![Page 6: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/6.jpg)
A Bagunça
• A Web cresce comercialmente, e veem a necessidade de publicação de conteúdo diagramado, como em revistas e jornais (algo para o qual o HTML não possuía recursos).
• Há então a adaptação da linguagem de forma equivocada, com uma preocupação unicamente visual, esquecendo da qualidade do código.
6 Técnicas e Padrões de Projeto Web
![Page 7: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/7.jpg)
A Guerra dos Browsers
• Aproximadamente entre 1995 e 1999 houve a chamada “Guerra dos Browsers”, onde a Netscape (e seu Browsers de mesmo nome) e a Microsoft (com o seu Internet Explorer) disputavam o mercado de navegadores.
• Além de não darem suporte aos padrões do recém criado World Wide Web Consortium (W3C), ainda criavam seus próprios padrões, aumentando a bagunça.
7 Técnicas e Padrões de Projeto Web
![Page 8: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/8.jpg)
Editores WYSIWYG
• "O que você vê é o que você tem", ou em inglês "What You See Is What You Get" (WYSIWYG) são programas que lhe permitem ter a visualização final de um documento, enquanto o mesmo ainda é editado.
• Editores HTML WYSIWYG como Go Live, Front Page e Dreamweaver surgiram por volta de 1996, e são conhecidos por gerar um código sujo e muito maior que o necessário.
8 Técnicas e Padrões de Projeto Web
![Page 9: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/9.jpg)
Com tudo isso...
• Cada arquivos de um site acaba sendo um incompreensível emaranhado de Tags com tabelas, formatações, scripts...
• Tudo muito maior que o necessário.
• Dessa forma, para que seja feita alguma alteração no site, é necessário alterar todos os arquivos... um a um!
9 Técnicas e Padrões de Projeto Web
![Page 10: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/10.jpg)
10 Técnicas e Padrões de Projeto Web
![Page 11: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/11.jpg)
Os Padrões Web
• Padrões Web ou Web Standards são um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, produzidos pelo W3C e destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos, independentemente dos dispositivos usados ou de suas necessidades especiais.
XHTML – HTML – CSS – DOM – XML –...
11 Técnicas e Padrões de Projeto Web
![Page 12: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/12.jpg)
O que é W3C?
• W3C (World Wide Web Consortium) é um consórcio de empresas de tecnologia. Fundado por Tim Berners-Lee em 1994 para levar a Web ao seu potencial máximo.
• Desenvolve Recomendações abertas, até agora mais de 80 padrões...
www.w3.org
12 Técnicas e Padrões de Projeto Web
![Page 13: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/13.jpg)
Web Standards Project
• O Web Standards Project (WaSP) é um grupo formado em 1998 com o objetivo de promover os Padrões Web, assegurando desse modo um acesso simples e com menos custos para todos.
• Vem encorajando e persuadindo os fabricantes de Browsers a fornecerem suporte aos padrões, como o XHTML, CSS, ECMAScript (a versão standard do JavaScript) e o DOM.
www.webstandards.org
13 Técnicas e Padrões de Projeto Web
![Page 14: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/14.jpg)
Mudança de Conceito...
• Web dividida em três camadas:
– Conteúdo (XHTML)
– Apresentação (CSS)
– Comportamento (Javascript)
Devem ser desenvolvidas de forma independente, porém uma complementa a outra.
14 Técnicas e Padrões de Projeto Web
![Page 15: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/15.jpg)
Mudança de Conceito...
15 Técnicas e Padrões de Projeto Web
![Page 16: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/16.jpg)
Vantagens da adoção dos Padrões
• Carregamento mais rápido
• Menores custos com hospedagem
• Melhor Consistência Visual
• Redesign mais barato e eficiente
• Melhores resultados nos Mecanismos de Buscas
• Maior acessibilidade e interoperabilidade
16 Técnicas e Padrões de Projeto Web
![Page 17: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/17.jpg)
Tableless x Web Standards
• Tableless é um termo que ficou muito popular no Brasil, e que acaba por confundir muita gente.
• Tableless significa (resumidamente) um site desenvolvido sem o antiquado uso das tabelas para organizar o layout, e sim usando CSS.
• Criar um site Tableless não significa que esteja seguindo os Padrões Web, que vão muito além de um código válido, e tem preocupações maiores como a Semântica e a Acessibilidade.
17 Técnicas e Padrões de Projeto Web
![Page 18: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/18.jpg)
HTML
• HTML é a abreviação para HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação para Hipertexto.
• Compõe a estrutura de uma página Web através de etiquetas (tags) e atributos.
18 Técnicas e Padrões de Projeto Web
<tag atributo=“valor” atributo2=“valor”> TEXTO </tag>
<tag> Texto </tag> Inicia comando
Finaliza comando
Conteúdo formatado
![Page 19: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/19.jpg)
HTML
• O HTML sofreu várias mudanças em suas diferentes versões, com o objetivo de estender a linguagem para que pudesse acompanhar a evolução da Web e das tecnologias nela inseridas.
• Versões do HTML:
– HTML 2.0 (Novembro de 1995)
– HTML 3.2 (Janeiro de 1997)
– HTML 4.0 (Dezembro de 1997)
– HTML 4.01 (Dezembro de 1999)
– ISO/IEC 15445:2000 "ISO HTML" (Maio de 2000)
– HTML 5 (Janeiro de 2008 em Implementação quase finalizada)
19 Técnicas e Padrões de Projeto Web
![Page 20: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/20.jpg)
XML: eXtensible Markup Language
• Criada para suprir a falta de flexibilidade do HTML.
• Separação do conteúdo da formatação.
• Simplicidade e Legibilidade, para humanos e computadores.
• Criação de arquivos para validação de estrutura.
• Interligação de bancos de dados distintos.
• Concentração na estrutura da informação.
20 Técnicas e Padrões de Projeto Web
![Page 21: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/21.jpg)
XHTML
• O (X)HTML, ou eXtensible Hypertext Markup Language, é uma reformulação da linguagem de marcação HTML baseada em XML.
• Pode ser interpretado por qualquer dispositivo, independentemente da plataforma utilizada, pois as marcações possuem sentido semântico para as máquinas.
21 Técnicas e Padrões de Projeto Web
![Page 22: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/22.jpg)
Um Código Semântico
• Semântica refere-se ao estudo do significado.
• Quando utilizamos cada marcação para o que ela realmente foi criada, estamos construindo um “Código Semântico”.
• Parar de pensar em “isso vem aqui, isso vai ali...” e pensar na “Estrutura da Informação”
• Criar uma “Marcação com Significado”.
22 Técnicas e Padrões de Projeto Web
![Page 23: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/23.jpg)
Marcação Semântica
• Usar <table></table> apenas para dados tabulares
• Usar <h1></h1> até <h6></h6> para títulos
• Usar <ol></ol> para Listas Ordenadas e <ul></ul> para Listas Não Ordenadas, seguidos do elemento <li></li>
• Usar <em></em> para Enfase, e <strong></strong> para Enfase Forte
23 Técnicas e Padrões de Projeto Web
![Page 24: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/24.jpg)
Versões do XHTML
• XHTML é uma linguagem que começou como uma reformulação do HTML 4.01
• usando XML 1.0:
– XHTML 1.0 (Janeiro de 2000)
– XHTML 1.1: (Maio de 2001)
– XHTML 2.0: Ainda é um projeto de trabalho do W3C.
– XHTML 5.0: é uma atualização para o XHTML 1.x, está sendo definido juntamente com o HTML5 no mesmo projeto.
24 Técnicas e Padrões de Projeto Web
![Page 25: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/25.jpg)
DTD: Document Type Definition
• Um padrão que define as partes de um documento, e descrevem como eles podem ou não ser usados, o que pode ser colocado em seus interiores, e se são ou não elementos obrigatórios do documento.
• Descreve com precisão a sintaxe e a gramática da linguagem de marcação XHTML.
25 Técnicas e Padrões de Projeto Web
![Page 26: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/26.jpg)
XHTML 1.0 - DOCTYPE:
Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
26 Técnicas e Padrões de Projeto Web
![Page 27: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/27.jpg)
XHTML – Elementos obrigatórios:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Base</title>
</head>
<body>
<p>Conteúdo</p>
</body>
</html>
27 Técnicas e Padrões de Projeto Web
![Page 28: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/28.jpg)
Diferenças entre XHTML e HTML
• Documentos devem ser bem formados
• Todas as tags escritas com letras minúsculas
• Tags devem estar convenientemente aninhadas
• Uso de tags de fechamento é obrigatório
• Elementos vazios devem ser fechados
28 Técnicas e Padrões de Projeto Web
![Page 29: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/29.jpg)
Diferenças entre XHTML e HTML
• Documentos devem ser bem formados
• A estrutura básica do documento deve ser conforme mostrado a seguir:
<html>
<head> ... </head>
<body>
...
</body>
</html>
29 Técnicas e Padrões de Projeto Web
![Page 30: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/30.jpg)
Diferenças entre XHTML e HTML
• Todas as tags devem ser escritas com letras minúsculas
Errado:
<DIV><P>Aqui um texto!</P></DIV>
Correto:
<div><p>Aqui um texto!</p></div>
30 Técnicas e Padrões de Projeto Web
![Page 31: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/31.jpg)
Diferenças entre XHTML e HTML
• Tags devem estar convenientemente aninhadas
Errado:
<div><p>Aqui um <em>texto!</p></em></div>
Correto:
<div> <p> Aqui um <em> texto! </em> </p> </div>
31 Técnicas e Padrões de Projeto Web
![Page 32: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/32.jpg)
Diferenças entre XHTML e HTML
• Uso de tags de fechamento é obrigatório
Errado:
<p>Um parágrafo.
Correto:
<p>Um parágrafo.</p>
32 Técnicas e Padrões de Projeto Web
![Page 33: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/33.jpg)
Diferenças entre XHTML e HTML
• Elementos vazios devem ser fechados
Errado:
<br> <img src=“imagem.gif” alt=“uma imagem” title=“uma imagem”>
Correto:
<br /> <img src=“imagem.gif” alt=“uma imagem” title=“uma imagem” />
33 Técnicas e Padrões de Projeto Web
![Page 34: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/34.jpg)
CSS
Cascading Style Sheets
![Page 35: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/35.jpg)
CSS: Cascading Style Sheets
• Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML.
• Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.
• Pode-se definir apresentações especificas para diferentes dispositivos (Tvs, Celulares e PDAs, Impressoras, etc) apenas criando folhas de estilo alternativas.
35 Técnicas e Padrões de Projeto Web
![Page 36: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/36.jpg)
CSS: Cascading Style Sheets
• CSS 1.0 … CSS level 1
• Em setembro de 1994 surgiu a primeira proposta
• Em dezembro de 1996 lançada como Recomendação oficial do W3C
• CSS 2.0 … CSS level 2
– Publicada em maio de 1998
– Ultima revisão: 12 de maio de 2008
• CSS 2.1 … CSS level 2 revision 1
• Candidata a Recomendação oficial do W3C em 23 de abril de 2009
• CSS 3.0 … CSS level 3
– Proposta em 2001
36 Técnicas e Padrões de Projeto Web
![Page 37: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/37.jpg)
Associar CSSs a documentos HTML
• Inline
– Através do atributo style diretamente dentro de uma marcação
<p style=“regras”>
• Interno
– Através da tag style entre as marcações <head></head> do documento HTML
<style type="text/css"> Regras </style>
• Externo
– Criar um link (ligação) para uma página que contém os estilos.
<link href="estilo.css" rel="stylesheet" type="text/css" />
37 Técnicas e Padrões de Projeto Web
![Page 38: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/38.jpg)
CSS: Cascading Style Sheets
38 Técnicas e Padrões de Projeto Web
{ h1 color : green }
Valor Propriedade
Seletor Declaração
![Page 39: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/39.jpg)
CSS: Seletor classe
• Uma classe define a variação de um estilo.
• É referenciado através de uma ocorrência específica de um elemento utilizando o atributo class.
• Serve para definir vários estilos diferentes para o mesmo elemento.
• Definido pelo .(ponto)
• Exemplo:
– no CSS: h4.diferente {color:red;}
– no XHTML: <h4 class=“diferente”>Titulo</h4>
39 Técnicas e Padrões de Projeto Web
![Page 40: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/40.jpg)
CSS: Seletor id
• Semelhante ao Seletor classe.
• A diferença é que utiliza o atributo id, que serve para identificar exclusivamente um determinado elemento no documento.
• Definido pelo #
• Exemplo:
– no CSS: #topo {width:900px;}
– no XHTML: <div id=“topo”>…</div>
40 Técnicas e Padrões de Projeto Web
![Page 41: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/41.jpg)
CSS: Comentários
• Assim como em qualquer linguagem de programação, em CSS é possível adicionar comentários para melhor documentar o código.
• Exemplo:
/* Comentário */
41 Técnicas e Padrões de Projeto Web
![Page 42: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/42.jpg)
Validadores
• Validador de HTML, XHTML, XML e
– http://validator.w3.org
• Validador de Folhas de Estilo CSS
– http://jigsaw.w3.org/css-validator
42 Técnicas e Padrões de Projeto Web
![Page 43: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/43.jpg)
FIXE BEM...
“XHTML PARA ESTRUTURAR
E
CSS PARA APRESENTAR (FORMATAÇÃO).”
Técnicas e Padrões de Projeto Web 43
![Page 44: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/44.jpg)
Referências
• Silva, Maurício Samy – Construindo sites com CSS e (X)HTML. -- São Paulo: Novatec, 2008.
www.w3.org
www.w3schools.com
www.maujor.com
www.tableless.com.br
www.cssnolanche.com.br
44 Técnicas e Padrões de Projeto Web
![Page 45: Desvendando padrões para desenvolvimento web, base para o sucesso](https://reader033.fdocuments.net/reader033/viewer/2022051514/548b7304b47959140d8b618a/html5/thumbnails/45.jpg)
Dúvidas?
45 Técnicas e Padrões de Projeto Web