Montando sites com XHTML e CSS utilizando os padrões web

14,408
-1

Published on

Apresentação do minicurso realizado na UFC-Quixadá de 20 a 24 de julho de 2009.

Published in: Design

Montando sites com XHTML e CSS utilizando os padrões web

  1. 1.
  2. 2. Programa<br />1º Dia: Um pouco de história<br />2º Dia: Mão na massa - Site do WTISC<br />3º Dia: Montando a página Programação (Tabelas)<br />4º Dia: Montando a página Inscrições (Formulário)<br />5º Dia: Um pouco de JavaScript e FTP<br />
  3. 3. 1º Dia:<br />Um pouco de história<br />
  4. 4. Como tudo começou<br /> 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.<br />Localizador Uniforme de Recursos (URL)<br />Linguagem de Marcação de Hipertexto (HTML)<br />Protocolo de Transferência de Hipertexto (HTTP)<br />Navegador Web (Browser)<br />
  5. 5. A Bagunça<br />A Web cresce comercialmente,<br />e veema necessidade de publicação de conteúdo diagramado,<br />como em revistas e jornais<br />(algo para o qual o HTML não possuiarecursos).<br />Há então a adaptação da linguagem<br />de forma equivocada,<br />com uma preocupação unicamente visual, esquecendo da qualidade do código.<br />
  6. 6. A Guerra dos Browsers<br /> 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.<br /> Além de não darem suporte aos padrões do recém criadoWorld Wide Web Consortium (W3C),aindacriavam seus próprios padrões, aumentando a bagunça.<br />
  7. 7. Editores WYSIWYG<br /> &quot;O que você vê é o que você tem&quot;, ou em inglês &quot;What You See Is What You Get&quot; (WYSIWYG) sãoprogramas que lhe permitem ter a visualização final de um documento, enquanto o mesmo ainda é editado.<br />Editores HTML WYSIWYG comoGo Live, Front Page e Dreamweaversurgiram por volta de 1996, e são conhecidos por gerar um código sujo e muito maior que o necessário.<br />
  8. 8. Cursos e Profissionais desatualizados<br />
  9. 9. Com tudo isso...<br /> Cada arquivos de um site acaba sendo um incompreensível emaranhado de Tags<br />com tabelas, formatações, scripts...<br /> Tudo muito maior que o necessário.<br /> Dessa forma, para que seja feita alguma alteração no site, é necessário alterar todos os arquivos...<br />um a um!<br />
  10. 10.
  11. 11. Os Padrões Web<br /> 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.<br />XHTML – HTML – CSS – DOM – XML – SVG – SOAP – ...<br />
  12. 12. O que é W3C?<br /> 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.<br />Desenvolve Recomendações abertas,<br />até agora mais de 80 padrões...<br />www.w3.org<br />
  13. 13. Web Standards Project<br />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.<br /> 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.<br />www.webstandards.org<br />
  14. 14. Mudança de Conceito...<br /> Web dividida em três camadas:<br /> ● Conteúdo (XHTML)<br /> ● Apresentação (CSS)<br /> ● Comportamento (Javascript)<br /> Devem ser desenvolvidas<br /> de forma independente, porém<br /> uma complementa a outra.<br />
  15. 15. Mudança de Conceito...<br />
  16. 16. Sem Padrões x Com Padrões<br />✗ Extensão da<br /> Mídia Impressa<br />✗ Layout baseado<br /> em Tabelas<br />✗ Conteúdo,<br /> Apresentação e<br /> Comportamento<br /> “aninhados”<br />✗ Código<br /> Incompreensível<br />✔ Acessível de<br /> qualquer<br /> dispositivo<br />✔ Layout baseado<br /> em CSS<br />✔ Separação entre<br /> Conteúdo,<br /> Apresentação e<br /> Comportamento<br />✔ Código Acessível<br />
  17. 17. Vantagens da adoção dos Padrões<br />Carregamento mais rápido<br />Menores custos com hospedagem<br />Melhor Consistência Visual<br />Redesign mais barato e eficiênte<br />Melhores resultados nos Mecanismos de Buscas<br />Maior acessibilidade e interoperabilidade<br />
  18. 18. Tableless x Web Standards<br />Tableless é um termo que ficou muito popular no Brasil, e que acaba por confundir muita gente.<br />Tableless significa (resumidamente) um site desenvolvido sem o antiquado uso das tabelas para organizar o layout, e sim usando CSS.<br /> 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.<br />
  19. 19. HTML<br />HTML é a abreviação para HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação para Hipertexto.<br /> Compõe a estrutura de uma página Web através de etiquetas (tags) e atributos.<br />
  20. 20. HTML<br />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.<br /> Versões do HTML:<br />HTML 2.0 (Novembro de 1995)<br />HTML 3.2 (Janeiro de 1997)<br />HTML 4.0 (Dezembro de 1997)<br />HTML 4.01 (Dezembro de 1999)<br />ISO/IEC 15445:2000 &quot;ISO HTML&quot; (Maio de 2000)<br />HTML 5 (Janeiro de 2008)<br />
  21. 21. XML: eXtensible Markup Language<br /> Criada para suprir a falta de flexibilidade do HTML.<br /> Separação do conteúdo da formatação.<br /> Simplicidade e Legibilidade, para humanos e computadores.<br /> Criação de arquivos para validação de estrutura.<br /> Interligação de bancos de dados distintos.<br /> Concentração na estrutura da informação.<br />
  22. 22. XHTML<br /> O (X)HTML, ou eXtensible Hypertext Markup Language, é uma reformulação da linguagem de marcação HTML baseada em XML.<br />Pode ser interpretado por qualquer dispositivo, independentemente da plataforma utilizada, pois as marcações possuem sentido semântico para as máquinas.<br />
  23. 23. Um Código Semântico<br /> Semântica refere-se ao estudo do significado.<br /> Quando utilizamos cada marcação para o que ela realmente foi criada, estamos construindo um “Código Semântico”.<br /> Parar de pensar em “isso vem aqui, isso vai ali...” e pensar na “Estrutura da Informação”<br /> Criar uma “Marcação com Significado”.<br />
  24. 24. Marcação Semântica<br />Usar &lt;table&gt;&lt;/table&gt; apenas para dados tabulares<br />Usar &lt;h1&gt;&lt;/h1&gt; até &lt;h6&gt;&lt;/h6&gt; para títulos<br />Usar &lt;ol&gt;&lt;/ol&gt; para Listas Ordenadas e &lt;ul&gt;&lt;/ul&gt; para<br />Listas Não Ordenadas, seguidos do elemento &lt;li&gt;&lt;/li&gt;<br />Usar &lt;em&gt;&lt;/em&gt; para Enfase,<br />e &lt;strong&gt;&lt;/strong&gt; para Enfase Forte<br />
  25. 25. Versões do XHTML<br /> XHTML é uma linguagem que começou como uma reformulação do HTML 4.01<br /> usando XML 1.0:<br />XHTML 1.0 (Janeiro de 2000)<br />XHTML 1.1: (Maio de 2001)<br />XHTML 2.0: Ainda é um projeto de trabalho do W3C. <br />XHTML 5.0: é uma atualização para o XHTML 1.x, está sendo definido juntamente com o HTML5 no mesmo projeto.<br />
  26. 26. DTD: DocumentTypeDefinition<br /> 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.<br /> Descreve com precisão a sintaxe e a gramática da linguagem de marcação XHTML.<br />
  27. 27. XHTML 1.0 - DOCTYPE:<br />Strict<br />&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;<br /> &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;<br />Transitional<br />&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;<br /> &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;<br />Frameset<br />&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Frameset//EN&quot;<br /> &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd&quot;&gt;<br />
  28. 28. XHTML – Elementos obrigatórios:<br />&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;<br /> &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;<br />&lt;htmlxmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;<br /> &lt;head&gt;<br /> &lt;title&gt;XHTML Base&lt;/title&gt;<br /> &lt;/head&gt;<br /> &lt;body&gt;<br /> &lt;p&gt;Conteúdo&lt;/p&gt; <br /> &lt;/body&gt;<br />&lt;/html&gt;<br />
  29. 29. Diferenças entre XHTML e HTML<br />Documentos devem ser bem-formados<br />Todas as tags devem ser escritas com letras minúsculas<br />Tags devem estar convenientemente aninhadas<br />Uso de tags de fechamento é obrigatório<br />Elementos vazios devem ser fechados<br />Diferença na sintaxe dos atributos<br />
  30. 30. Diferenças entre XHTML e HTML<br />Documentos devem ser bem-formados<br />A estrutura básica do documento deve ser conforme mostrado a seguir:<br />&lt;html&gt;<br /> &lt;head&gt;<br /> ...<br /> &lt;/head&gt;<br /> &lt;body&gt;<br /> ...<br /> &lt;/body&gt;<br /> &lt;/html&gt;<br />
  31. 31. Diferenças entre XHTML e HTML<br />Todas as tags devem ser escritas com letras minúsculas<br />Errado:<br /> &lt;DIV&gt;&lt;P&gt;Aqui um texto!&lt;/P&gt;&lt;/DIV&gt;<br />Correto:<br /> &lt;div&gt;&lt;p&gt;Aqui um texto!&lt;/p&gt;&lt;/div&gt;<br />
  32. 32. Diferenças entre XHTML e HTML<br />Tags devem estar convenientemente aninhadas<br />Errado:<br /> &lt;div&gt;&lt;p&gt;Aqui um &lt;em&gt;texto!&lt;/p&gt;&lt;/em&gt;&lt;/div&gt;<br />Correto:<br /> &lt;div&gt;&lt;p&gt;Aqui um &lt;em&gt;texto! &lt;/em&gt;&lt;/p&gt;&lt;/div&gt;<br />
  33. 33. Diferenças entre XHTML e HTML<br />Uso de tags de fechamento é obrigatório<br /> Errado:<br /> &lt;p&gt;Um parágrafo.<br />Correto:<br /> &lt;p&gt;Um parágrafo.&lt;/p&gt;<br />
  34. 34. Diferenças entre XHTML e HTML<br />Elementos vazios devem ser fechados<br /> Errado:<br /> &lt;br&gt;<br /> &lt;imgsrc=“imagem.gif” alt=“uma imagem”&gt;<br />Correto:<br /> &lt;br /&gt;<br /> &lt;imgsrc=“imagem.gif” alt=“uma imagem” /&gt;<br />
  35. 35. Diferenças entre XHTML e HTML<br />Diferença na sintaxe dos atributos<br />Errado:<br /> &lt;td ROWSPAN=3&gt;<br /> &lt;input checked&gt;<br />Correto:<br /> &lt;tdrowspan=“3”&gt;<br /> &lt;input checked=“checked”&gt;<br />
  36. 36. XHTML: Recomendações<br />Aplicamos “Itálico” em um texto para dar ênfase...<br />Ao invés da marcação &lt;i&gt;&lt;/i&gt;,<br />use &lt;em&gt;&lt;/em&gt;, ou então &lt;cite&gt;&lt;/cite&gt;<br />se for uma citação (de um livro, por exemplo)<br />Para uma ênfase forte,<br />ao invés de &lt;b&gt;&lt;/b&gt;,<br />use a marcação&lt;strong&gt;&lt;/strong&gt;<br />
  37. 37. XHTML: Recomendações<br />Um menu nada mais é<br />do que uma lista de opções...<br />Então, use as marcações de<br />Lista não-ordenada<br />
  38. 38. CSS: Cascading Style Sheets<br />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.<br /> Seu principal benefício é prover aseparação entre o formato e o conteúdo de um documento.<br /> Pode-se definir apresentações especificas para diferentes dispositivos (Tvs, Celulares e PDAs, Impressoras, etc) apenas criando<br /> folhas de estilo alternativas.<br />
  39. 39. CSS: Cascading Style Sheets<br />CSS 1.0 … CSS level 1<br />Em setembro de 1994 surgiu a primeira proposta<br />Emdezembro de 1996 lançadacomoRecomendaçãooficial do W3C<br />CSS 2.0 … CSS level 2<br />Publicadaemmaio de 1998<br />Ultimarevisão: 12 de maio de 2008<br />CSS 2.1 … CSS level 2 revision 1<br />Candidata a Recomendaçãooficial do W3C em 23 de abril de 2009<br />CSS 3.0 … CSS level 3<br />Propostaem 2001<br />
  40. 40. Associar CSSs a documentos HTML<br />Inline<br />Através do atributostyle diretamente dentro de uma marcação<br />Interno<br /> Através da tag style entre as marcações &lt;head&gt;&lt;/head&gt; do documento HTML<br />Externo<br /> Criar um link (ligação) para uma página que contém os estilos.<br />&lt;link href=&quot;estilo.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;<br />
  41. 41. CSS: Cascading Style Sheets<br />
  42. 42. CSS: Seletor classe<br />Uma classe define a variação de um estilo.<br />É referenciado através de uma ocorrência específica de um elemento utilizando o atributo class.<br />Serve para definirváriosestilosdiferentespara o mesmoelemento.<br />Defenidopelo .<br />Exemplo:<br /> - no CSS: h4.diferente {color:red;}<br /> - no XHTML: &lt;h4 class=“diferente”&gt;Titulo&lt;/h4&gt;<br />
  43. 43. CSS: Seletor id<br />Semelhante ao Seletor classe.<br />A diferençaé que utiliza o atributo id, que serve para identificar exclusivamente um determinado elemento no documento.<br />Defenido pelo #<br />Exemplo:<br /> - no CSS: #header {width:900px;}<br /> - no XHTML: &lt;div id=“header”&gt;…&lt;/div&gt;<br />
  44. 44. CSS: Comentários<br /> Assim como em qualquer linguagem de programação, em CSS é possível adicionar comentários para melhor documentar o código.<br />Exemplo:<br /> /* Comentário */<br />
  45. 45. display: Define como um elemento é exibido.<br /> Ex: display: none;<br />float: Faz o elemento flutuar à esquerda ou à direita do restante do conteúdo.<br /> Ex: float: left;<br />CSS: Propriedades<br />
  46. 46. margin-top, margin-right, margin-bottom e margin-left: Define a margem superior, direita, inferior e esquerda de um elemento.<br /> Ex: margin-top: 10px;<br />padding-top, padding-right, padding-bottom e padding-left: Define a área superior, direita, inferior e esquerda de espaçamento de um elemento.<br /> Ex: padding-right: 5px;<br />CSS: Propriedades<br />
  47. 47. font-family: Relação de nomes específicos de famílias de fontes ou de seus nomes genéricos.<br /> Ex: font-family: Arial, Helvetica, sans-serif;<br />font-size: Define o tamanho de uma fonte.<br /> Ex: font-size: 11px;<br />font-weight: Define o peso de uma fonte.<br /> Ex: font-weight: bold;<br />color: Define a cor do texto.<br />Ex: color: red;<br />CSS: Propriedades<br />
  48. 48. text-align: Alinha o texto em um elemento.<br /> Ex: text-align: center;<br />text-decoration: Acrescenta decoração de texto.<br /> Ex: text-decoration: underline;<br />CSS: Propriedades<br />
  49. 49. background-color: Define a cor de fundo de um elemento.<br /> Ex: background-color: blue;<br />background-image: Define uma imagem como plano de fundo.<br /> Ex: background-image: url(images/bg.jpg);<br />background-repeat: Define como uma imagem de fundo será repetida.<br /> Ex: background-repeat: no-repeat;<br />CSS: Propriedades<br />
  50. 50. border-width: Define a largura da borda de um elemento.<br /> Ex: border-width: 3px;<br />border-style: Define o estilo da borda.<br /> Ex: border-style: dotted;<br />border-color: Define a cor da borda.<br /> Ex: border-color: #000000;<br />CSS: Propriedades<br />
  51. 51. CSS e o Designer<br />CSS é a linguagem do designer.<br />Designer de web precisa saber CSS.<br />Design não é nada sem controle.<br />O CSS, dá o controle.<br />Diego Eis - tableless.com.br<br />
  52. 52. O Poder do CSS<br /> O CSS Zen Gardentem como alvo entusiasmar, inspirar e encorajar a separação do Conteúdo (HTML) da Apresentação (CSS)<br /> Mostrar as enormes possibilidades de se obter belos Layouts através do CSS<br /> Como exemplo, podemos Acessar os links e visualizar diversos Layouts diferentes. O código HTML permanece o mesmo, a única coisa que muda é o arquivo CSS externo.<br />www.csszengarden.com<br />
  53. 53.
  54. 54.
  55. 55.
  56. 56.
  57. 57.
  58. 58. Validadores<br />Validador de HTML, XHTML, XML e<br />http://validator.w3.org<br />Validador de Folhas de Estilo CSS<br />http://jigsaw.w3.org/css-validator<br />
  59. 59. Fixe bem...<br />“XHTML para estruturar<br /> e<br />CSS para apresentar (formatação).”<br />
  60. 60. Agradecimentos<br /> Grande parte dos slides utilizados aqui foram retirados da apresentação “Web Standards” de Eduardo Santos que prontamente me foram cedidos para ajudar na disseminação dos Padrões Web.<br /> Todos os créditos a ele.<br />
  61. 61. Referências<br />Silva, Maurício Samy – Construindo sites com CSS e (X)HTML. -- São Paulo: Novatec, 2008.<br />www.w3.org<br />www.w3schools.com<br />www.maujor.com<br />www.tableless.com.br<br />www.cssnolanche.com.br<br />
  62. 62. Dúvidas?<br />
  63. 63. 2º Dia:<br />Mão na massa – Site do WTISC<br />
  64. 64.
  65. 65.
  66. 66.
  67. 67.
  68. 68.
  69. 69.
  70. 70.
  71. 71.
  72. 72.
  73. 73.
  74. 74. Mão na massa - Site do WTISC<br />Passos:<br />XHTML Padrão<br />CSS Padrão<br />Página Programação<br />Trabalhando com tabelas<br />Página Inscrições<br />Trabalhando com formulários<br />
  75. 75. Mão na massa - Site do WTISC<br />Vamos aos trabalhos... Inicie o Editor.<br />OBS: O site foi todo montado durante o minicurso.<br />Link para o material final:<br />www.igorpimentel.com/minicursos/xhtmlcss.zip<br />
  76. 76. Obrigado!;)<br />

×