Introdução ao HTML5

HTML5
Início

#zigottolabs @edercosta
sexta-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.


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.


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.


Suporte
Há uma grande diversidade de dispositivos que acessam a internet.
Entre eles, há uma série de tablets, smartphones, pc's 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 10


Tabela com alguns comparativos

Comparação de aceitação em alguns módulos do HTML5:


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.


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>


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>


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>


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>


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 there's a microphone anywhere near you...</p>
8   <p>...</p>
9   <footer>
10     <a href="?comments=1">Show comments...</a>
11   </footer>
12 </article>


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>


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>


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>


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!
@edercosta


Introdução ao HTML5

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Introdução ao HTML5

Semelhante a Introdução ao HTML5 (20)

Mais de Zigotto Tecnologia

Mais de Zigotto Tecnologia (14)

Introdução ao HTML5