DESVENDANDO PADRÕES PARA
   DESENVOLVIMENTO WEB, BASE PARA
                                  O SUCESSO
                   ...
AGENDA DO TREINAMENTO

• Apresentação do facilitador

• Apresentação das ferramentas
  – NetBeans versão X

  – Navegador ...
AGENDA DO TREINAMENTO
• Treinamento “mão na massa”
  – Implementação de Códigos XHTML
  – Validação XHTML
  – Implementaçã...
HTML e XHTML
Conhecendo e começando
 Web Standards Projects
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 ...
A Bagunça
• A Web cresce comercialmente, e veem a
  necessidade de publicação de conteúdo
  diagramado, como em revistas e...
A Guerra dos Browsers
• Aproximadamente entre 1995 e 1999 houve a
  chamada “Guerra dos Browsers”, onde a Netscape (e
  se...
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...
Com tudo isso...
• Cada arquivos de um site acaba sendo um
  incompreensível emaranhado de Tags com tabelas,
  formatações...
Técnicas e Padrões de Projeto Web
                                    10
Os Padrões Web
• Padrões Web ou Web Standards são um conjunto de
  normas, diretrizes, recomendações, notas, artigos,
  tu...
O que é W3C?
• W3C (World Wide Web Consortium) é um
  consórcio de empresas de tecnologia. Fundado
  por Tim Berners-Lee e...
Web Standards Project
• O Web Standards Project (WaSP) é um grupo formado em
  1998 com o objetivo de promover os Padrões ...
Mudança de Conceito...
• Web dividida em três camadas:
  – Conteúdo (XHTML)
  – Apresentação (CSS)
  – Comportamento (Java...
Mudança de Conceito...




Técnicas e Padrões de Projeto Web
                                    15
Vantagens da adoção dos Padrões
• Carregamento mais rápido
• Menores custos com hospedagem
• Melhor Consistência Visual
• ...
Tableless x Web Standards
• Tableless é um termo que ficou muito popular no Brasil, e
  que acaba por confundir muita gent...
HTML
• HTML é a abreviação para HyperText Markup Language, que
  pode ser traduzido como Linguagem de Marcação para
  Hipe...
HTML
• O HTML sofreu várias mudanças em suas diferentes versões, com
  o objetivo de estender a linguagem para que pudesse...
XML: eXtensible Markup Language
• Criada para suprir a falta de flexibilidade do HTML.
• Separação do conteúdo da formataç...
XHTML
• O (X)HTML, ou eXtensible Hypertext Markup
  Language, é uma reformulação da linguagem de
  marcação HTML baseada e...
Um Código Semântico
• Semântica refere-se ao estudo do significado.
• Quando utilizamos cada marcação para o que ela
  rea...
Marcação Semântica
• Usar <table></table> apenas para dados tabulares

• Usar <h1></h1> até <h6></h6> para títulos

• Usar...
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 ...
DTD: Document Type Definition
• Um padrão que define as partes de um
  documento, e descrevem como eles podem ou
  não ser...
XHTML 1.0 - DOCTYPE:
Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xht...
XHTML – Elementos obrigatórios:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD...
Diferenças entre XHTML e HTML

• Documentos devem ser bem formados

• Todas as tags escritas com letras minúsculas

• Tags...
Diferenças entre XHTML e HTML
• Documentos devem ser bem formados
  • A estrutura básica do documento deve ser conforme
  ...
Diferenças entre XHTML e HTML
• Todas as tags devem ser escritas com letras
  minúsculas

Errado:
  <DIV><P>Aqui um texto!...
Diferenças entre XHTML e HTML
• Tags devem estar convenientemente aninhadas

Errado:
  <div><p>Aqui um <em>texto!</p></em>...
Diferenças entre XHTML e HTML
• Uso de tags de fechamento é obrigatório

Errado:
  <p>Um parágrafo.

Correto:
  <p>Um pará...
Diferenças entre XHTML e HTML
• Elementos vazios devem ser fechados
Errado:
<br>
 <img src=“imagem.gif” alt=“uma imagem” t...
CSS
Cascading Style Sheets
CSS: Cascading Style Sheets
• Cascading Style Sheets (ou simplesmente CSS) é uma linguagem
  de estilo utilizada para defi...
CSS: Cascading Style Sheets
• CSS 1.0 … CSS level 1
• Em setembro de 1994 surgiu a primeira proposta
• Em dezembro de 1996...
Associar CSSs a documentos HTML
• Inline
   – Através do atributo style diretamente dentro de uma marcação
       <p style...
CSS: Cascading Style Sheets


             Propriedade                Valor



 h1 {color : green }
Seletor               ...
CSS: Seletor classe
• Uma classe define a variação de um estilo.
• É referenciado através de uma ocorrência específica de ...
CSS: Seletor id
• Semelhante ao Seletor classe.
• A diferença é que utiliza o atributo id, que serve para identificar
  ex...
CSS: Comentários
• Assim como em qualquer linguagem de
  programação, em CSS é possível adicionar
  comentários para melho...
Validadores
• Validador de HTML, XHTML, XML e
  – http://validator.w3.org


• Validador de Folhas de Estilo CSS
  – http:/...
FIXE BEM...
      “XHTML PARA ESTRUTURAR
                 E
CSS PARA APRESENTAR (FORMATAÇÃO).”

        Técnicas e Padrões...
Referências
• Silva, Maurício Samy – Construindo sites com CSS
  e (X)HTML. -- São Paulo: Novatec, 2008.

  www.w3.org
  w...
Dúvidas?




Técnicas e Padrões de Projeto Web
                                    45
Próximos SlideShares
Carregando em…5
×

Desvendando padrões para desenvolvimento web, base para o sucesso

2.362 visualizações

Publicada em

Mini-curso sobre padrões web aplicado na Fatec de Jales - 14/10/2010

Publicada em: Educação
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
2.362
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
90
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Desvendando padrões para desenvolvimento web, base para o sucesso

  1. 1. DESVENDANDO PADRÕES PARA DESENVOLVIMENTO WEB, BASE PARA O SUCESSO Prof. Esp. Ubiratan Zakaib do Nascimento onucleo@onucleo.com 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.
  2. 2. AGENDA DO TREINAMENTO • Apresentação do facilitador • Apresentação das ferramentas – NetBeans versão X – Navegador X • Conhecendo WebStandards Técnicas e Padrões de Projeto Web 2
  3. 3. 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 Técnicas e Padrões de Projeto Web 3
  4. 4. HTML e XHTML Conhecendo e começando Web Standards Projects
  5. 5. 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) Técnicas e Padrões de Projeto Web 5
  6. 6. 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. Técnicas e Padrões de Projeto Web 6
  7. 7. 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. Técnicas e Padrões de Projeto Web 7
  8. 8. 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. Técnicas e Padrões de Projeto Web 8
  9. 9. 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! Técnicas e Padrões de Projeto Web 9
  10. 10. Técnicas e Padrões de Projeto Web 10
  11. 11. 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 –... Técnicas e Padrões de Projeto Web 11
  12. 12. 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 Técnicas e Padrões de Projeto Web 12
  13. 13. 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 Técnicas e Padrões de Projeto Web 13
  14. 14. 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. Técnicas e Padrões de Projeto Web 14
  15. 15. Mudança de Conceito... Técnicas e Padrões de Projeto Web 15
  16. 16. 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 Técnicas e Padrões de Projeto Web 16
  17. 17. 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. Técnicas e Padrões de Projeto Web 17
  18. 18. 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. Inicia Finaliza comando <tag> Texto </tag> comando Conteúdo formatado <tag atributo=“valor” atributo2=“valor”> TEXTO </tag> Técnicas e Padrões de Projeto Web 18
  19. 19. 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) Técnicas e Padrões de Projeto Web 19
  20. 20. 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. Técnicas e Padrões de Projeto Web 20
  21. 21. 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. Técnicas e Padrões de Projeto Web 21
  22. 22. 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”. Técnicas e Padrões de Projeto Web 22
  23. 23. 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 Técnicas e Padrões de Projeto Web 23
  24. 24. 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. Técnicas e Padrões de Projeto Web 24
  25. 25. 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. Técnicas e Padrões de Projeto Web 25
  26. 26. 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"> Técnicas e Padrões de Projeto Web 26
  27. 27. 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> Técnicas e Padrões de Projeto Web 27
  28. 28. 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 Técnicas e Padrões de Projeto Web 28
  29. 29. 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> Técnicas e Padrões de Projeto Web 29
  30. 30. 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> Técnicas e Padrões de Projeto Web 30
  31. 31. 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> Técnicas e Padrões de Projeto Web 31
  32. 32. Diferenças entre XHTML e HTML • Uso de tags de fechamento é obrigatório Errado: <p>Um parágrafo. Correto: <p>Um parágrafo.</p> Técnicas e Padrões de Projeto Web 32
  33. 33. 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” /> Técnicas e Padrões de Projeto Web 33
  34. 34. CSS Cascading Style Sheets
  35. 35. 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. Técnicas e Padrões de Projeto Web 35
  36. 36. 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 Técnicas e Padrões de Projeto Web 36
  37. 37. 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" /> Técnicas e Padrões de Projeto Web 37
  38. 38. CSS: Cascading Style Sheets Propriedade Valor h1 {color : green } Seletor Declaração Técnicas e Padrões de Projeto Web 38
  39. 39. 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> Técnicas e Padrões de Projeto Web 39
  40. 40. 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> Técnicas e Padrões de Projeto Web 40
  41. 41. 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 */ Técnicas e Padrões de Projeto Web 41
  42. 42. Validadores • Validador de HTML, XHTML, XML e – http://validator.w3.org • Validador de Folhas de Estilo CSS – http://jigsaw.w3.org/css-validator Técnicas e Padrões de Projeto Web 42
  43. 43. FIXE BEM... “XHTML PARA ESTRUTURAR E CSS PARA APRESENTAR (FORMATAÇÃO).” Técnicas e Padrões de Projeto Web 43
  44. 44. 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 Técnicas e Padrões de Projeto Web 44
  45. 45. Dúvidas? Técnicas e Padrões de Projeto Web 45

×