• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

HTML 5 - A mudança da Web

  • 1,714 views
Uploaded on

Palestra proferida no V Solisc realizado em Florianópolis, SC em 23/10/2010.

Palestra proferida no V Solisc realizado em Florianópolis, SC em 23/10/2010.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,714
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
38
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML 5 a mudança da web V Solisc Florianópolis/SC 23/10/2010
  • 2. PALESTRANTE Paulino Michelazzo Consultor Web Fone: (11) 8715-2228 paulino@michelazzo.com.br Twitter: @pmichelazzo
  • 3. O QUE É HTML 5
  • 4. O QUE É O HTML 5 E PORQUE ELE É NECESSÁRIO a nova geração da HTML a atualização da XHTML 1.0 a documentação dos padrões web a unificação das linguagens de marcação da web
  • 5. ATUALIZAÇÃO DA XHTML 1.0 html Xhtml Xhtml 2 XML
  • 6. DOCUMENTAÇÃO DOC “X” DOC “Y”
  • 7. DOCUMENTAÇÃO DOCUMENTAÇÃO PADRÃO
  • 8. UNIFICAÇÃO DAS LINGUAGENS HTML XHTML HTML 5
  • 9. evolução HTML 4 HTML 5 revolução
  • 10. O QUE É O W3C uma comunidade internacional de trabalho voltada ao desenvolvimento de padrões web para levá-la a atingir o máximo de seu potencial composta de organizações e pessoas
  • 11. ESPECIFICAÇÕES CSS HTML XML SOAP PNG SVG http://www.w3.org/TR/
  • 12. HISTÓRIA DO HTML Web Standards Project HTML 2 força a adoção de padrões formalização da sintaxe força as recomendações do XHTML 2.0 dá XHTML 1.0 - W3C e as principais regras promove o uso de HTML para perto da XML implementadas a navegadores padrão levar WHATWG = HTML5 1990 1992 1994 1996 1998 2000 2002 2004 2006 2008 2010 HTML 3.2 HTML 4 Fork W3C Fim XHTML 2.0 produtores da linguagem Opera, Apple, Mozilla, Tim Bernes-Lee HTML5 ignorada pelosestabilização de browsers HTML Apple e Google adotam torna-se padrão para web que criavam suas próprias tag’s Web HypertextCresce o interesse no padrão Application Technology Working Group - WHATWG
  • 13. SUPORTE A HTML 5 novas tags 4.0* x 3.6* 10.1* 4.0* canvas 4.0* x 3.5* 9* 3.0* elemento de vídeo 4.0 x 3.0 10.5 3.2 armazenamento local 4.0 8 3.0 10.5 4.0 aplicações off-line 4.0 8* 3.6 x 4.0 formulários HTML5 4.0* x x 10.1* 5.0* drag-n’-drop 4.0 7* 3.5 x 4.0 * parcialmente
  • 14. COMPATIBILIDADE RETROATIVA HTML 5 HTML 4.01 XHTML 2 HTML 3 XHTML 1 HTML 2
  • 15. WEB SEMÂNTICA A Web semântica interliga significados de palavras e, neste âmbito, tem como finalidade conseguir atribuir um significado (sentido) aos conteúdos publicados na Internet de modo que seja perceptível tanto pelo humano como pelo computador. Fonte: Wikipedia - http://pt.wikipedia.org/wiki/Web_sem%C3%A2ntica
  • 16. <div> <div id=secao> <div> <div id=artigo> <h1>Título</h1> <h1>Título</h1> <p>Texto</p> <p>Texto</p> </div> </div> </div> </div>
  • 17. <section> <article> <h1>Título</h1> <p>Texto</p> </article> </section> isso é semântica!
  • 18. ORGANIZAÇÃO novos elementos semânticos usado para indicar uma área da página que contenha textos e outros elementos que article formam um artigo agrupa informações relacionadas ao conteúdo onde se encontra aside (um artigo ou a uma página) footer usado para indicar o rodapé de uma página e seus elementos header usado para indicar o header de uma página e seus elementos hgroup usado para agrupar títulos (H1...H6) em múltiplos níveis nav usado para a indicar áreas de navegação da página (links de menus e etc) section usado para indicar seções dentro de uma página
  • 19. OUTROS ELEMENTOS • video e audio • embed • mark • progress • meter http://www.w3.org/TR/2010/WD-html5-diff-20100624/ • time • ruby, rt e rp • wbr • canvas • command • detais • datalist • keygen • outputlist
  • 20. FORMULÁRIOS EM HTML 5
  • 21. TIPO INPUT • tel - números de telefones • email - endereços de email • url - endereços web • search - campos de busca • range - seletor numérico entre valores
  • 22. NOVOS ATRIBUTOS • autocomplete • pattern • autofocus • placeholder • datalist • required • max • step • min • maxlenght* • multiple
  • 23. NOVIDADE PSEUDO-ELEMENTOS • First-letter • First-line p::first-letter{ • Before font-size: 60px; } • After
  • 24. FONTES em CSS3 qualquer fonte vira “família” @font-face{ font-family: 'zapfino'; src: url('zapfino.ttf') format ('truetype'); } p.zap{ font-family: zapfino; }
  • 25. COLUNAS • Elementos • Número de colunas -moz-column-count: 4; (obrigatório) -moz-column-gap: 1em; -webkit-column-count: 4; • Distância entre colunas -webkit-column-gap: 1em; (obrigatório) -moz-column-rule: 1px solid #222; -webkit-column-rule: 1px solid #222; • Design da coluna (opcional)
  • 26. ROUNDED CORNERS • Elementos style=“-moz-border-radius: 10px;- • -moz-border-radius webkit- border-radius: 10px;border: 4px solid #FF0000;” • border
  • 27. MAIS NOVIDADES • Canvas • Armazenamento local • Georeferenciamento
  • 28. OBRIGADO