HTML 5 - A mudana da Web

  • Published on
    29-Jun-2015

  • View
    1.787

  • Download
    1

DESCRIPTION

Palestra proferida no V Solisc realizado em Florianpolis, SC em 23/10/2010.

Transcript

  • 1. HTML 5 a mudana da web V Solisc Florianpolis/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 NECESSRIO a nova gerao da HTML a atualizao da XHTML 1.0 a unicao das linguagens de marcao da web a documentao dos padres web 5. html ATUALIZAO DA XHTML 1.0 html XhtmlXhtml Xhtml 2 XML 6. DOCUMENTAO DOC X DOC Y 7. DOCUMENTAO DOCUMENTAO PADRO 8. UNIFICAO DAS LINGUAGENS HTML XHTML HTML 5 9. HTML 4 HTML 5 evoluo revoluo 10. O QUE O W3C uma comunidade internacional de trabalho voltada ao desenvolvimento de padres web para lev-la a atingir o mximo de seu potencial composta de organizaes e pessoas 11. ESPECIFICAES CSS HTML PNG XML SOAP SVG http://www.w3.org/TR/ 12. HISTRIA DO HTML 1990 1992 1994 1996 2002 2004 2006 2008 2010 HTML 2 formalizao da sintaxe e as principais regras implementadas HTML 3.2 ignorada pelos produtores de browsers que criavam suas prprias tags Web Standards Project fora a adoo de padres d fora as recomendaes do W3C promove o uso de navegadores padro HTML 4 estabilizao da linguagem HTML torna-se padro para web XHTML 1.0 - XHTML 2.0 levar a HTML para perto da XML 20001998 Fork W3C Opera,Apple, Mozilla,Tim Bernes-Lee Web Hypertext Application Technology Working Group - WHATWG WHATWG = HTML5 Fim XHTML 2.0 Apple e Google adotam HTML5 Cresce o interesse no padro 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 vdeo 4.0 x 3.0 10.5 3.2 armazenamento local 4.0 8 3.0 10.5 4.0 aplicaes off-line 4.0 8* 3.6 x 4.0 formulrios 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 HTML 3 HTML 2 XHTML 2 XHTML 1 15. WEB SEMNTICA A Web semntica interliga signicados de palavras e, neste mbito, tem como nalidade conseguir atribuir um signicado (sentido) aos contedos publicados na Internet de modo que seja perceptvel tanto pelo humano como pelo computador. Fonte:Wikipedia - http://pt.wikipedia.org/wiki/Web_sem%C3%A2ntica 16.

Ttulo

Texto

Ttulo

Texto

17. Ttulo

Texto

isso semntica! 18. ORGANIZAO novos elementos semnticos article usado para indicar uma rea da pgina que contenha textos e outros elementos que formam um artigo aside agrupa informaes relacionadas ao contedo onde se encontra (um artigo ou a uma pgina) footer usado para indicar o rodap de uma pgina e seus elementos header usado para indicar o header de uma pgina e seus elementos hgroup usado para agrupar ttulos (H1...H6) em mltiplos nveis nav usado para a indicar reas de navegao da pgina (links de menus e etc) section usado para indicar sees dentro de uma pgina 19. OUTROS ELEMENTOS video e audio embed mark progress meter time ruby, rt e rp wbr canvas command detais datalist keygen outputlist http://www.w3.org/TR/2010/WD-html5-diff-20100624/ 20. FORMULRIOS EM HTML 5 21. TIPO INPUT tel - nmeros de telefones email - endereos de email url - endereos web search - campos de busca range - seletor numrico entre valores 22. NOVOS ATRIBUTOS autocomplete autofocus datalist max min multiple pattern placeholder required step maxlenght* 23. NOVIDADE PSEUDO-ELEMENTOS First-letter First-line Before After p::first-letter{ font-size: 60px; } 24. FONTES em CSS3 qualquer fonte vira famlia @font-face{ font-family: 'zapfino'; src: url('zapfino.ttf') format ('truetype'); } p.zap{ font-family: zapfino; } 25. COLUNAS Elementos Nmero de colunas (obrigatrio) Distncia entre colunas (obrigatrio) Design da coluna (opcional) -moz-column-count: 4; -moz-column-gap: 1em; -webkit-column-count: 4; -webkit-column-gap: 1em; -moz-column-rule: 1px solid #222; -webkit-column-rule: 1px solid #222; 26. ROUNDED CORNERS Elementos -moz-border-radius border style=-moz-border-radius: 10px;- webkit- border-radius: 10px;border: 4px solid #FF0000; 27. MAIS NOVIDADES Canvas Armazenamento local Georeferenciamento 28. OBRIGADO