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

2.330 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.330
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
89
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

×