XHTML e  CSS com Dreamweaver CS3
Fábio Flatschart <ul><li>Consultor das áreas de Internet e Computação Gráfica da Gerência de Desenvolvimento(GD2) do SENAC...
Conceituando
HTML <ul><li>HTML :  HyperText Markup Language, / Linguagem de Marcação de Hipertexto)   </li></ul><ul><li>Tim Berners-Lee...
XHTML <ul><li>O  XHTML , ou eXtensible Hypertext Markup Language, é uma reformulação da linguagem de marcação HTML baseada...
XHTML <ul><li>Todas as tags devem ser escritas em letras minúsculas ( case sensitive ) </li></ul><ul><li>Os elementos (tag...
CSS <ul><li>Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação d...
Forma e conteúdo ( 1996 )
Forma + conteúdo ( 2008 )
 
Forma + conteúdo
Web Standards
Web Standards  O W3C (World Wide Web Consortium), juntamente com outros grupos e organismos reguladores, estabeleceu tecno...
Web Standards  <ul><li>Linguagens Estruturais  </li></ul><ul><ul><li>•  Extensible Hypertext Markup Language (XHTML) 1.0  ...
Web Standards  <ul><li>Melhor experiência do usuário. Sites mais funcionais. Carregamento mais rápido do conteúdo e menore...
Web Standards  <ul><li>Redução dos custos de desenvolvimento (simplificar código, separação entre apresentação e conteúdo)...
DTD Document Type Definition  <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN“ &quot;http://www.w3.org/TR/xht...
Na prática : File > New
Na prática : Modify > Page properties
Na prática : File > Convert
Na prática : Validar o XHTML  -  http://validator.w3.org
Na prática : Validar o XHTML  ( Dreamweaver ) Window > Results ( F7)
Na prática : Validar o XHTML  ( Dreamweaver ) Window > Results ( F7)
Na prática : Text > CSS Styles > New externo, interno, inline
Na prática : Text > CSS Styles > Attach <ul><li>all </li></ul><ul><li>braille  / embossed </li></ul><ul><li>handheld </li>...
Na prática : Text > CSS Styles > Attach <ul><li>all </li></ul><ul><li>braille  / embossed </li></ul><ul><li>handheld </li>...
Na prática : Move to external style sheet
Na prática : Validar o CSS  -  http://jigsaw.w3.org/css-validator/
Na prática : Validar o CSS  -  http://jigsaw.w3.org/css-validator/
<ul><li>A sintaxe do CSS é composta de três elementos: </li></ul><ul><ul><li>•  Seletor. </li></ul></ul><ul><ul><li>•  Pro...
<ul><li>TAG </li></ul><ul><li>h1{ font-family: arial;} </li></ul><ul><li>.CLASS </li></ul><ul><li>.center {text-align: cen...
Na prática : CSS Styles ( Shift + F11)
<ul><li>www.w3c.br </li></ul><ul><li>www.csszengarden.com </li></ul><ul><li>www.maujor.com </li></ul><ul><li>www.tableless...
Muito obrigado ! Fábio Flatschart [email_address] www.quadrodosbemois.com.br
Upcoming SlideShare
Loading in …5
×

XHTML e CSS

2,429
-1

Published on

Palestra realizada no Senac Jundiaí em 11/11 durante o Circuito de TI - 2008.

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,429
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
132
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

XHTML e CSS

  1. 1. XHTML e CSS com Dreamweaver CS3
  2. 2. Fábio Flatschart <ul><li>Consultor das áreas de Internet e Computação Gráfica da Gerência de Desenvolvimento(GD2) do SENAC -SP na produção de eventos e palestras, novas parcerias, desenvolvimento de treinamentos e pesquisa de novos produtos destas áreas. </li></ul><ul><li>Palestrante e consultor da Adobe Systems Incorporated . Professor do curso de Design Gráfico da UNIFMU e da FAENAC. </li></ul><ul><li>Formado pela Escola de Comunicações e Artes da Universidade de São Paulo ( ECA -USP ) possui especialização em Criação Visual e Multimídia e cursa MBA em Marketing pela Fundação Getúlio Vargas. </li></ul><ul><li>Dirige a Quadro dos Bemóis - Comunicação Digital, empresa que presta serviços na área de internet e na área educacional. </li></ul>
  3. 3. Conceituando
  4. 4. HTML <ul><li>HTML : HyperText Markup Language, / Linguagem de Marcação de Hipertexto)  </li></ul><ul><li>Tim Berners-Lee  criou o HTML original e outros protocolos associados como o HTTP) por volta de 1990 </li></ul><ul><li>A última versão, datada de dezembro de 1999 é o HTML 4.01 </li></ul><ul><li>O World Wide Web Consortium (WC3) publicou a primeira especificação (ainda não é a final) do HTML 5.0 , a nova versão da linguagem para Web. </li></ul>
  5. 5. XHTML <ul><li>O  XHTML , ou eXtensible Hypertext Markup Language, é uma reformulação da linguagem de marcação HTML baseada em XML. Combina as tags de marcação HTML com regras da XML; este processo de padronização tem em vista a exibição de páginas Web em diversos dispositivos (televisão, palm, celular, etc). A intenção é melhorar a acessibilidade. </li></ul><ul><li>O XHTML deverá ser o sucessor do HTML. Assim, muitos consideram que XHTML é a atual ou mais nova versão do HTML . Porém, XHTML é uma recomendação separada. </li></ul>
  6. 6. XHTML <ul><li>Todas as tags devem ser escritas em letras minúsculas ( case sensitive ) </li></ul><ul><li>Os elementos (tags) devem estar convenientemente aninhados </li></ul><ul><li>Os documentos devem ser bem formados ( prontos para XML , usar ID) </li></ul><ul><li>O uso de tags de fechamento é obrigatório </li></ul><ul><li>Elementos vazios devem ser fechados </li></ul><ul><li>Diferenças para os atributos. (noshade=&quot;noshade&quot; ) </li></ul>
  7. 7. CSS <ul><li>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. </li></ul><ul><li>Seu principal benefício é possibilitar a separação entre o formato e o conteúdo de um documento. </li></ul><ul><li>XHTML Basic : Uma versão especial &quot;light&quot; do XHTML </li></ul><ul><li>XHTML Mobile Profile: Baseado em XHTML Basic, essa OMA (Open Mobile ) tem como alvo os celulares, devido ao fato de conter algumas ferramentas exclusivas para eles </li></ul><ul><li>XHTML+Voice : XHTML combinado com Voice XML </li></ul>
  8. 8. Forma e conteúdo ( 1996 )
  9. 9. Forma + conteúdo ( 2008 )
  10. 11. Forma + conteúdo
  11. 12. Web Standards
  12. 13. Web Standards O W3C (World Wide Web Consortium), juntamente com outros grupos e organismos reguladores, estabeleceu tecnologias para criação e interpretação de conteúdo para a Web. Estas tecnologias, a que chamamos Web Standards, têm como objetivo principal fazer com que o conteúdo desenvolvido dentro destes padrões possa ser visualizado independente do equipamento (computador, PDA, celular), do tipo do navegador (IE, Mozilla, Opera, Netscape, etc) e da forma (banda de conexão) com que o usuário estiver acessando a Internet.
  13. 14. Web Standards <ul><li>Linguagens Estruturais </li></ul><ul><ul><li>• Extensible Hypertext Markup Language (XHTML) 1.0 </li></ul></ul><ul><ul><li>• XHTML 1.1 </li></ul></ul><ul><ul><li>• Extensible Markup Language (XML) 1.0 </li></ul></ul><ul><li>Linguagens de Apresentação </li></ul><ul><ul><li>• Cascading Style Sheets (CSS) Level 1 </li></ul></ul><ul><ul><li>• CSS Level 2 </li></ul></ul><ul><ul><li>• CSS Level 3 </li></ul></ul>
  14. 15. Web Standards <ul><li>Melhor experiência do usuário. Sites mais funcionais. Carregamento mais rápido do conteúdo e menores problemas com incompatibilidades com navegadores. </li></ul><ul><li>Melhor posicionamento em ferramentas de buscas. </li></ul><ul><li>Garantir a viabilidade ao longo do tempo de qualquer documento web, à medida que os navegadores evoluem, e novos produtos surgem no mercado. </li></ul><ul><li>Aumento na percepção de qualidade do trabalho produzido. Confere vantagem competitiva em relação aos desenvolvedores e empresas que não adotaram ainda desenvolvimento baseado nos Web Standards. </li></ul><ul><li>Acessibilidade. Estar em conformidade com as leis e diretrizes (sites de instituições públicas) possibilitando o acesso a pessoas portadoras de necessidades especiais através de browser especiais. </li></ul>
  15. 16. Web Standards <ul><li>Redução dos custos de desenvolvimento (simplificar código, separação entre apresentação e conteúdo). </li></ul><ul><li>Redução dos custos de manutenção (menos código, código modular). O conteúdo pode ser facilmente re-estilizado sem alteração de código. </li></ul><ul><li>Redução dos custos de hosting (utilização de banda - redução do tamanho e tráfego de arquivos). </li></ul><ul><li>Facilidade em manter a consistência visual entre os documentos do mesmo site. </li></ul><ul><li>Ampliação da audiência. Proporcionar web sites acessíveis a uma gama maior de pessoas e um número maior de devices/aparelhos/ferramentas para Internet. Suporte a usuários de equipamentos wireless e PDA sem necessidade de despender tempo e dinheiro no desenvolvimento de diferentes versões da aplicação/website. </li></ul>
  16. 17. DTD Document Type Definition <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN“ &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Frameset//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd&quot;> <ul><li>Strict </li></ul><ul><li>Transitional </li></ul><ul><li>Frameset </li></ul>
  17. 18. Na prática : File > New
  18. 19. Na prática : Modify > Page properties
  19. 20. Na prática : File > Convert
  20. 21. Na prática : Validar o XHTML - http://validator.w3.org
  21. 22. Na prática : Validar o XHTML ( Dreamweaver ) Window > Results ( F7)
  22. 23. Na prática : Validar o XHTML ( Dreamweaver ) Window > Results ( F7)
  23. 24. Na prática : Text > CSS Styles > New externo, interno, inline
  24. 25. Na prática : Text > CSS Styles > Attach <ul><li>all </li></ul><ul><li>braille / embossed </li></ul><ul><li>handheld </li></ul><ul><li>print </li></ul><ul><li>projection </li></ul><ul><li>screen </li></ul><ul><li>speech </li></ul><ul><li>tty </li></ul><ul><li>tv </li></ul>link / import
  25. 26. Na prática : Text > CSS Styles > Attach <ul><li>all </li></ul><ul><li>braille / embossed </li></ul><ul><li>handheld </li></ul><ul><li>print </li></ul><ul><li>projection </li></ul><ul><li>screen </li></ul><ul><li>speech </li></ul><ul><li>tty </li></ul><ul><li>tv </li></ul>link / import
  26. 27. Na prática : Move to external style sheet
  27. 28. Na prática : Validar o CSS - http://jigsaw.w3.org/css-validator/
  28. 29. Na prática : Validar o CSS - http://jigsaw.w3.org/css-validator/
  29. 30. <ul><li>A sintaxe do CSS é composta de três elementos: </li></ul><ul><ul><li>• Seletor. </li></ul></ul><ul><ul><li>• Propriedade. </li></ul></ul><ul><ul><li>• Valor. </li></ul></ul><ul><li>seletor {propriedade: valor} </li></ul><ul><li>O seletor é geralmente o elemento/tag HTML a ser formatada, a propriedade é o atributo a ser alterado/definido, sendo que cada propriedade tem seu valor definido. </li></ul>Na prática : Sintaxe : body, p, td{ font-size: 80%; font-family: verdana; }
  30. 31. <ul><li>TAG </li></ul><ul><li>h1{ font-family: arial;} </li></ul><ul><li>.CLASS </li></ul><ul><li>.center {text-align: center} - qualquer elemento </li></ul><ul><li>ID </li></ul><ul><li>p#destaque {color: #0000FF} - elemento específico ( ID ) </li></ul>Na prática : Sintaxe :
  31. 32. Na prática : CSS Styles ( Shift + F11)
  32. 33. <ul><li>www.w3c.br </li></ul><ul><li>www.csszengarden.com </li></ul><ul><li>www.maujor.com </li></ul><ul><li>www.tableless.com.br </li></ul><ul><li>www.slideshare.net/fabioflat </li></ul><ul><li>www.quadrodosbemois.com.br/ti/arquivos/estudos.zip </li></ul><ul><li>http://www.plasmadesign.com.br/stupidtables/index.html </li></ul>Na prática :
  33. 34. Muito obrigado ! Fábio Flatschart [email_address] www.quadrodosbemois.com.br
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×