HTML5
Upcoming SlideShare
Loading in...5
×
 

HTML5

on

  • 1,563 views

#Zigottolabs em 18 de Fevereiro de 2011,

#Zigottolabs em 18 de Fevereiro de 2011,
Tema: HTML5
Por: Éder Costa @edercosta

Statistics

Views

Total Views
1,563
Slideshare-icon Views on SlideShare
1,563
Embed Views
0

Actions

Likes
0
Downloads
35
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 HTML5 Presentation Transcript

    • HTML5 Início #zigottolabs @edercostasexta-feira, 18 de fevereiro de 2011
    • Visão Geral De acordo com o W3C a Web é baseada em 3 pilares: Um esquema de nomes para localização de fontes de informação na Web, esse esquema chama-se URI. Um Protocolo de acesso para acessar estas fontes, hoje o HTTP. Uma linguagem de Hypertexto, para a fácil navegação entre as fontes de informação: o HTML. Vamos nos focar no terceiro pilar, o HTML. Entre 1993 e 1995, o HTML ganhou as versões HTML+, HTML2.0 e HTML3.0, onde foram propostas diversas mudanças para enriquecer as possibilidades da linguagem. Contudo, até aqui o HTML ainda não era tratado como um padrão. Apenas em 1997, o grupo de trabalho do W3C responsável por manter o padrão do código, trabalhou na versão 3.2 da linguagem, fazendo com que ela fosse tratada como prática comum. Você pode ver: http://www.w3.org/TR/html401/appendix/ changes.html. Desde o começo o HTML foi criado para ser uma linguagem independente de plataformas, browsers e outros meios de acesso. Interoperabilidade significa menos custo. Você cria apenas um código HTML. Por isso o HTML foi desenvolvido para que essa barreira fosse ultrapassada, fazendo com que a informação publicada por meio deste código fosse acessível por dispositivos e outros meios com características diferentes, não importando o tamanho da tela, resolução, variação de cor.sexta-feira, 18 de fevereiro de 2011
    • WHAT Working Group Enquanto o W3C focava suas atenções para a criação da segunda versão do XHTML, um grupo chamado Web Hypertext Application Technology Working Group ou WHATWG trabalhava em uma versão do HTML que trazia mais flexibilidade para a produção de websites e sistemas baseados na web. O WHATWG (http://www.whatwg.org/) foi fundado por desenvolvedores de empresas como Mozilla, Apple e Opera em 2004. Eles não estavam felizes com o caminho que a Web tomava e nem com o rumo dado ao XHTML. Por isso, estas organizações se juntaram para escrever o que seria chamado hoje de HTML5. Entre outros assuntos que o WHATWG se focava era Web Forms 2.0 que foi incluído no HTML5 e o Web Controls 1.0 que foi abandonado por enquanto. A participação no grupo é livre e você pode se inscrever na lista de email para contribuir. Por volta de 2006, o trabalho do WHATWG passou ser conhecido pelo mundo e principalmente pelo W3C - que até então trabalhavam separadamente - que reconheceu todo o trabalho do grupo. Em Outubro de 2006, Tim Berners-Lee anunciou que trabalharia juntamente com o WHATWG na produção do HTML5 em detrimento do XHTML 2. Contudo o XHTML continuaria sendo mantido paralelamente de acordo comas mudanças causadas no HTML. O grupo que estava cuidando especificamente do XHTML 2 foi descontinuado em 2009.sexta-feira, 18 de fevereiro de 2011
    • HTML5... - Modificação de elementos de forma não intrusiva - Novas tags - O HTM5 fornece ferramentas para o CSS e JavaScript funcionarem melhor - Elementos descontinuados voltam a atuar de forma eficaz - Mudança na forma que escrevemos o código, conteúdo mais organizado O HTML5 está sendo criado para que seja compatível com os browsers recentes, possibilitando a utilização de novas características imediatamente.sexta-feira, 18 de fevereiro de 2011
    • Suporte Há uma grande diversidade de dispositivos que acessam a internet. Entre eles, há uma série de tablets, smartphones, pcs e etc. Cada um destes meios de acesso utilizam um determinado browser para navegar na web. Não há como os desenvolvedores manterem um bom nível de compatibilidade com todos estes browsers levando em consideração a particularidade de cada um. Uma maneira mais segura de manter o código compatível, é nivelar o desenvolvimento pelos motores de renderização. Cada browser utiliza um motor de renderização que é responsável pelo processamento do código da página. Abaixo, segue uma lista dos principais browsers e seus motores: Motor .......................... Browser Webkit ......................... Safari, Google Chrome Gecko .......................... Firefox, Mozilla, Camino Trident ........................ Internet Explorer 4 ao 9 Presto ......................... Opera 7 ao 10sexta-feira, 18 de fevereiro de 2011
    • Tabela com alguns comparativos Comparação de aceitação em alguns módulos do HTML5:sexta-feira, 18 de fevereiro de 2011
    • DOCTYPE e charsets  1 <!DOCTYPE HTML>  2 <html lang="pt-br">  3   <head>  4     <meta charset="UTF-8">  5     <link rel="stylesheet" type="text/css" href="estilo.css">  6     <title></title>  7   </head>  8   <body>  9 10   </body> 11 </html> O <!DOCTYPE HTML> indica para o navegador e para outros meios qual a especificação de código utilizar. (Não é uma tag, é uma instrução para que o browser tenha informações sobre qual versão de código a marcação foi escrita. O <html lang="pt-br"> é necessário para que os users-agents saibam qual a linguagem principal do documento. (Seu uso não é restrito ao elemento HTML, pode ser utilizado em qualquer outro elemento para indicar o idioma do texto representado. O <meta charset="UTF-8"> determina que tabela de caracteres deve ser usada no documento em questão. <link rel="stylesheet" type="text/css" href="estilo.css"> LINK, links para fontes externas que serão usadas no documento.sexta-feira, 18 de fevereiro de 2011
    • Novos elementos e atributos Alguns novos elementos do HTML5: Header: este elemento representa um grupo de introdução ou elementos de navegação. Pode ser utilizado para agrupar índices de conteúdos, campos de busca ou até mesmo logos. 1 <header> 2  <p>Welcome to...</p> 3  <h1>Voidwars!</h1> 4 </header>sexta-feira, 18 de fevereiro de 2011
    • Novos elementos e atributos Alguns novos elementos do HTML5: Nav: representa uma seção da página que contém links para outras partes do site. Nem todos os grupos de links devem ser elementos nav, apenas aqueles grupos que contém links importantes. 1 <nav> 2 <h1>Navigation</h1> 3 <ul> 4   <li><a href="articles.html">All articles</a></li> 5   <li><a href="today.html">Things sheeple</a></li> 6   <li><a href="successes.html">Sheeple we have</a></li> 7 </ul> 8 </nav>sexta-feira, 18 de fevereiro de 2011
    • Novos elementos e atributos Alguns novos elementos do HTML5: Section: Define uma nova seção genérica do documento. Ex: A home de um site pode ser dividida em diversas seções: detaque, novidade, informação de contato e chamadas para conteúdo interno. 1 <section> 2   <h1>Red Delicious</h1> 3   <p>These bright red apples are the most common...</p> 4 </section> 5 6 <section> 7   <h1>Granny Smith</h1> 8   <p>These juicy, green apples make a great...</p> 9 </section>sexta-feira, 18 de fevereiro de 2011
    • Novos elementos e atributos Alguns novos elementos do HTML5: footer: é literalmente o rodapé de uma página. Pode também aparecer ao final de outras áreas do site. 1 <footer> 2  <nav> 3   <p><a href="/credits.html">Credits</a> 4      <a href="/tos.html">Terms of Service</a> 5      <a href="/index.html">Blog Index</a> 6    </p> 7  </nav> 8  <p>Copyright © 2009 Gordon Freeman</p> 9 </footer>sexta-feira, 18 de fevereiro de 2011
    • Novos elementos e atributos Alguns novos elementos do HTML5: Article: Parte da página que poderá ser distribuído e reutilizável em FEEDS por exemplo. Isto pode ser um post, artigo, um bloco de comentários de usuários.  1 <article>  2   <header>  3     <h1>The Very First Rule of Life</h1>  4     <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>  5   </header>  6   <p>If theres a microphone anywhere near you...</p>  8   <p>...</p>  9   <footer> 10     <a href="?comments=1">Show comments...</a> 11   </footer> 12 </article>sexta-feira, 18 de fevereiro de 2011
    • Novos elementos e atributos Alguns novos elementos do HTML5: Aside: O elemento representa um bloco que referência o conteúdo que envolta o elemento ASIDE. Entendeu? Ele agrega mais informações ao conteúdo principal... =)  1 <aside>  2   <h1>Switzerland</h1>  3   <p>Switzerland, a land-locked country...</p>  4 </aside>  5  6 <aside>  7   <nav>  8     <h1>My blogroll</h1>  9     <ul> 10       <li><a href="http://blog.example.com/">Example Blog</a></li> 11     </ul> 12   </nav> 13   <nav> 14     <h1>Archives</h1> 15     <ol reversed> 16       <li><a href="/last-post">My last post</a></li> 17       <li><a href="/first-post">My first post</a></li> 18     </ol> 19   </nav> 20 </aside>sexta-feira, 18 de fevereiro de 2011
    • Novos elementos e atributos Alguns novos elementos do HTML5: hgroup: Um grupo de títulos. Agrupa elementos de título de H1 até H6, quando eles tem múltiplos níveis como título e subtítulo. 1 <hgroup> 2   <h1>The reality dysfunction</h1> 3   <h2>Space is not the only void</h2> 4 </hgroup> 5 6 <hgroup> 7   <h1>Dr. Strangelove</h1> 8   <h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2> 9 </hgroup>sexta-feira, 18 de fevereiro de 2011
    • Novos elementos e atributos Alguns novos elementos do HTML5: time: Este elemento marca parte do texto que exibe horário ou data precisa do calendário gregoriano. 1 <p>I usually have a snack at <time>16:00</time>.</p>sexta-feira, 18 de fevereiro de 2011
    • Só! Referências, Curso W3C de HTML5: http://www.w3c.br/cursos/html5/conteudo/ WHATWG Community: http://www.whatwg.org/ Tableless: http://www.tableless.com.br/ Qualquer erro/questionamento encontrado no conteúdo desta apresentação pode ser enviado para eder@zigotto.com.br Obrigado! @edercostasexta-feira, 18 de fevereiro de 2011