HTML5

HTML5Início

#zigottolabs @edercostasexta-feira, 18 de fevereiro de 2011

Visão GeralDe 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

http://www.w3.org/TR/html401/appendix/changes.html




WHAT Working GroupEnquanto 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.


http://www.whatwg.org/

http://www.whatwg.org/

http://www.whatwg.org/mailing-list#specs

http://www.whatwg.org/mailing-list#specs

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.


SuporteHá 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 .......................... BrowserWebkit ......................... Safari, Google ChromeGecko .......................... Firefox, Mozilla, CaminoTrident ........................ Internet Explorer 4 ao 9Presto ......................... 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 atributosAlguns 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>


Novos elementos e atributosAlguns 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>


Novos elementos e atributosAlguns 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>


Novos elementos e atributosAlguns 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>


Novos elementos e atributosAlguns 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 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>


Novos elementos e atributosAlguns 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>


http://blog.example.com/

http://blog.example.com/

Novos elementos e atributosAlguns 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>


Novos elementos e atributosAlguns 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>


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 [email protected]

Obrigado!@edercosta


http://www.w3c.br/cursos/html5/conteudo/

http://www.w3c.br/cursos/html5/conteudo/

http://www.whatwg.org

http://www.whatwg.org

http://www.tableless.com.br

http://www.tableless.com.br

mailto:[email protected]

mailto:[email protected]

HTML5

Technology

Transcript of HTML5