HTML5 TiagoKautzmann

HTML5
Apontamentos sobre a nova especificao da W3C para a quinta reviso da linguagem de marcao HTML. Apresentao de novidades do HTML5 e a relao com a nova especificao da linguagem de estilos CSS (CSS3) e com a linguagem JavaScript. Organizado por: Tiago Kautzmann www.tiagokautzmann.com.br tkautzmann@gmail.com
HTML5 - Introduo
Em 2004, o grupo WHATWG (Web Hypertext Application Technology Working Group) inicia os trabalhos sobre a especificao HTML5. O WHATWG um grupo de trabalho independente ao W3C, formada por pessoas ligadas a Mozilla Foundation, Apple e Opera. O WHATWG considerava lento o avano de alguns padres web. A W3C comea a trabalhar no HTML5 apenas em 2007 quando monta um grupo de trabalho (HTML Working Group) para trabalhar em conjunto com a WHATWG.
HTML5 - Introduo
O HTML5 um projeto (W3C Working Draft) e ainda no uma recomendao; Em 25/05/2011 a W3C reafirmou sua expectativa de que o HTML5 ser uma recomendao em 2014. A nova especificao define uma linguagem abstrata (HTML5) e duas linguagens concretas: HTML5 e XHTML5 (parseadas por um processador XML); Especificao DOM5 HTML.
HTML5 - Introduo
O HTML5 define novos elementos e APIs, realiza modificaes na especificao de elementos j existentes, inutiliza elementos deprecados (obsoletos) e define novos atributos. O HTML5 melhora a semntica dos documentos. Tambm est sendo definida uma nova recomendao do CSS (CSS3). Tambm est sendo definida uma nova recomendao do CSS (CSS3) e uma recomendao HTML+RDFa. RDFa fornece atributos HTML adicionais que permitem a legibilidade dos documentos por mquinas (Web Semntica).
Documento HTML5 bsico

<!DOCTYPE html> <html> <head> <title>Sample page</title> </head> <body> <h1>Sample page</h1> <p>This is a <a href="demo.html"> simple </a> sample. </p>  </body> </html>
Documento XHTML5 bsico

<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Example document</title> </head> <body> <p>Example paragraph</p> </body> </html> Segue regras do XML (1999). O DOCTYPE opcional para o XHTML j que os documentos XML so sempre tratados como padro.
Documento HTML5 bsico

DOCTYPE O HTML5 define um DOCTYPE para que os browsers processem o documento no modo padro: <!DOCTYPE html> O DOCTYPE opcional para o XHTML j que os documentos XML so sempre tratados como padro. Elemento Meta para codificao de caracteres. <meta charset="UTF-8">
HTML5 - Introduo
Elementos de apresentao obsoletos foram removidos do HTML5: Exemplo: <font color=""></font>
HTML5 - Introduo
Permite o uso de elementos MathML (marcadores XML para representar smbolos e frmulas matemticas) e SVG (grficos vetoriais em XML)
<!doctype html> <title>SVG in text/html</title> <p> A green circle: <svg><circle r="50" cx="50" cy="50" fill="green" /></svg> </p>
http://www.w3.org/html/logo/downloads/HTML5_Logo.svg
HTML5 - Novos elementos

Novos elementos com objetivo de melhorar a semntica dos documentos.

O seguinte documento poderia representar um post de um blog em HTML4:
<div class=post> <h2>Aprendendo HTML 5</h2> <p>5 de maio de 2011</p> <div class=entry> <p>HTML5 a nova especificao da W3C. </p> </div> <p class=postmetadata> Postado em <a href=/?cat=html5>HTML5</a> <a href=/?p=34#comments>Sem comentrios</a> </p> </div>

Utilizando novos marcadores HTML5 poderia ficar assim:
<article> <header> <h2>Aprendendo HTML 5</h2> <time datetime=2011-05-05 pubdate>05/05/2011</time> </header> <p>HTML5 a nova especificao da linguagem HTML</p> <footer> Postado em <a href=/?cat=html5>HTML5</a> <a href=/?p=34#comments>Sem comentrios</a> </footer> </article>

HTML4 HTML5

Elemento article
O elemento article representa uma parte independente de contedo em um documento HTML, como uma entrada de um blog, um post de um frum, um comentrio de usurio, um artigo de um jornal, e qualquer outro tem independente de contedo.
<article> <header> <h1>The Very First Rule of Life</h1> <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p> </header> <p>If there's a microphone anywhere near you.</p> <p>...</p> <section> <h1>Comments</h1> <article> <footer> <p>Posted by: George Washington</p> <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p> </footer> <p>Yeah! Especially when talking about your lobbyist friends!</p> </article> </section> </article>

Elemento header
um elemento que fornece um grupo de elementos introdutrios ou ajuda de navegao. Pode ser utilizado para conter cabealhos de seo (h1....h6) e pode ser utilizado para receber um formulrio de pesquisa ou logotipos.
<body> <header> <h1>Little Green Guys With Guns</h1> <nav> <ul> <li><a href="/games">Games</a> <li><a href="/forum">Forum</a> <li><a href="/download">Download</a> </ul> </nav> <h2>Important News</h2>   <p>To play today's games you will need to update your client.</p> <h2>Games</h2>  </header> <p>You have three active games:</p> ...

Elemento footer
Representa um rodap para uma seo de contedo ou para uma seo raz, podendo conter informaes sobre autoria da seo, informaes de copyright, links para documentos relacionados, informaes de contato. <body> <p>A dolor sit amet, consectetur adipisicing elit....</p> <footer> Desenvolvido pela W3C. </footer> </body>

Elemento nav
Define uma seo para navegao, contendo links para outras pginas ou para partes dentro da prpria pgina. O elemento destinado a blocos de navegao principal (menu principal, por exemplo). comum encontrarmos grupos de links em rodaps, porm basta colocar esses links em elementos footer, ou seja, colocar elementos nav dentro de footer para criar um grupo de links desnecessrio segundo a W3C.
<nav> <h1>Navigation</h1> <ul> <li><a href="articles.html">Index </a></li> <li><a href="today.html">Things for today</a></li> <li><a href="successes.html">Managed</a></li> </ul> </nav>

Elemento time
Representa um horrio ou data.
<article> <header> <h1>The Very First Rule of Life</h1> <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p> </header> <p>If there's a microphone anywhere near you.</p> <p>...</p> <section> <h1>Comments</h1> <article> <footer> <p>Posted by: George Washington</p> <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p> </footer> <p>Yeah! Especially when talking about your lobbyist friends!</p> </article> </section> </article>

Elemento progress
Indica o progresso de uma tarefa.
<progress id="p" max="100" value="0"></progress></p> <input type="button" value="+" onclick="atualiza();"> function atualiza() { var progressBar = document.getElementById('p'); progressBar.value += 10; }

Novos elementos e APIs para udio, vdeo e processamento grfico; Funcionalidades que dispensam o uso de plugins de terceiros.
HTML5 x FLASH
HTML5 = FLASH KILLER?

Elemento video
Elemento para rodar vdeos; sem a necessidade de instalao de plugins de terceiros; No h definio de um codec padro por parte dos navegadores; Codecs mais utilizados pelos browsers: H.264, WebM e Ogg Theora.
<video src="movie.ogg" controls="controls"> Seu browser no suporta esta tag de video </video>
Alguns atributos src - url do recurso poster - url de uma imagem prvia preload - carregar o vdeo previamente quando carregar a pgina. autoplay - tocar automaticamente loop - permite nova reproduo assim terminar a reproduo anterior controls - barra de controle fornecido pelo browser

Exemplos do elemento video
www.youtube.com.br/html5 http://sublimevideo.net/demo

Elemento audio
Elemento utilizado para rodar arquivos de udio ou stream de udio.
<audio src="horse.ogg" controls="controls"> Seu browser no suporta este elemento audio. </audio>
Alguns atributos src - url do recurso preload - carregar o udio previamente quando carregar a pgina. autoplay - tocar automaticamente loop - permite nova reproduo assim terminar a reproduo anterior controls - barra de controle fornecido pelo browser

Elemento source
Define um recurso de mdia para elementos de media, como <video> e <audio>. <audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Seu browser no suporta o elemento audio. </audio>
No exemplo, caso nenhum dos recursos seja suportado pelo navegador, o navegador exibir a mensagem Your browser does not support the audio element..

Elemento canvas
O elemento canvas fornece scripts que podem ser usados para processamento grfico. Com o elemento HTML canvas e a API de canvas, manipuladas por script (JavaScript), possvel criar grficos, composies de fotos e vdeos e desenvolver animaes. Contexto 2D; WebGL - Contexto do HTML5 que fornece uma API para grficos 3D que utiliza o elemento canvas e acessado por meio de interfaces DOM. <canvas id="teste"></canvas> <script> var canvas = document.getElementById("teste"); //a varivel canvas uma referncia ao elemento <canvas> var context = canvas.getContext('2d'); context.fillRect(50,0,50,50); </script>

Exemplos de jogos com o elemento canvas https://mozillademos.org/demos/runfield/demo.html http://www.tidbits.com.br/snake-jogo-em-html5-usando-canvas http://www.sinuousgame.com/ Exemplos WebGL http://www.c3dl.org/ https://mozillademos.org/demos/remixingreality/demo.html Jogos 3D rodando em navegadores sem a necessidade de plugins. A Google divulgou um vdeo com o jogo Quake 2 rodando a partir de um navegador. Os desenvolvedores da Google utilizaram WebGL, a API do Canvas, o elemento de udio do HTML5 e uma API de armazenamento local. http://www.youtube.com/watch?v=XhMN0wlITLk
HTML5 - Novos atributos

O HTML5 introduz vrios novos atributos para vrios elementos que j faziam parte do HTML4. Aqui so apresentados alguns novos atributos:
O novo atributo form para elementos como input, select e textarea permitem que os controles sejam associados a um formulrio. Com isso, estes elementos podem ser colocados em qualquer lugar de uma pgina, e no precisam mais ser descendentes do elemento form. <label> Email: <input type=email form=foo name=email> </label> <form id=foo></form>

O novo atributo required para elementos como input, select e textarea indica que o usurio precisa preencher o controle com algum valor para submeter o formulrio.
<input type="text" name="nome" required>
O novo atributo pattern do elemento input permite aplicar uma expresso regular para validar a entrada do usurio.
<input type="text" name="part" placeholder="55555-555" pattern="\d{5}-\d{3}" title="CEP" />

O atributo type do elemento input possui agora novos valores:
search url email datetime date month week time number range color
<input type="email" name="email" />

Voltando a fazer referncia a novos elementos, o HTML5 define um novo elemento para formulrios chamado datalist. O elemento datalist especifica uma lista de opes para um campo input. A lista criada com elementos de opo dentro do datalist.
<datalist id="url_list"> <option label="W3Schools" value="http://www.w3schools.com" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist> Webpage: <input type="url" list="url_list" name="link" />
HTML5 - Drag-and-Drop
O HTML5 define um mecanismo do tipo arrastar e soltar (drag-and-drop). Exemplo Drag-and-Drop: http://html5demos.com/drag# Drag-In: http://slides.html5rocks.com/#drag-in Drag-out: http://slides.html5rocks.com/#drag-out
HTML5 - Offline Web applications

Com o objetivo de possibilitar que os usurios possam continuar interagindo com as aplicaes web quando uma conexo com a web no estiver disponvel, os autores podem declarar quais arquivos da aplicao so necessrios para funcionar offline.
 <!DOCTYPE HTML> <html manifest="clock.appcache"> <head> <title>Clock</title> <script src="clock.js"></script> <link rel="stylesheet" href="clock.css"> </head> <body> </body> </html>
Web SQL Database

Grupo de trabalho W3C Web SQL Database; Define uma API para armazenamento de dados em bases de dados client-side que podem ser consultadas utilizando uma variao de SQL. Trabalho de especificao atualmente parado por questes de impasse.Todos os implementadores utilizam o mesmo SGBD (Sqlite) mas a W3C necessita de vrios implementaes diferentes para continuar com a padronizao.
Web SQL Database

// busca os contatos do banco db.transaction(function (tx) { tx.executeSql('SELECT * FROM contatos', [], function (tx, resultado) { for (i = 0; i < resultado.rows.length; i++) alert(resultado.rows.item(i) ['nome']); }); });
Web Storage
Grupo de trabalho W3C Web Storage; Define uma API para a persistncia no armazenamento de dados em clientes web atravs do formato de par chavevalor. Introduz dois mecanismos relacionados, similares aos cookies de sesso. Um dos mecanismos (sessionStorage) utilizado em operaes onde o usurio est realizando uma nica transao, mas para esta transao est realizando operaesem janelas diferentes.Os atuais cookies de sesso no trabalham muito bem nesses casos. Um segundo mecanismo (localStorage) utilizado para o armazenamento de dados que se estende por vrias janelas, com durao alm da sesso atual. As aplicaes web podem desejar armazenar uma grande quantidade de informaes dos usurios, como por exemplo, uma caixa postal inteira do usurio, no cliente.
Web Storage
saveButton.addEventListener('click', function () { window.localStorage.setItem('value', area.value); window.localStorage.setItem('timestamp',(new Date()).getTime()); }, false); textarea.value = window. localStorage.getItem('value');
http://slides.html5rocks.com/#web-storage
Geolocation
Grupo de trabalho Geolocation; Define uma API que fornece acesso por script de informaes sobre localizao geogrfica associada ao dispositivo que hospeda a aplicao. As fontes de informaes de localizao incluem GPS, localizao a partir de sinais de rede, como IP, Wifi. Exemplo: http://slides.html5rocks.com/#geolocation
Suporte dos navegadores

Firefox Google Chrome Internet Explorer 9 Safari Opera TESTE DE SUPORTE DOS NAVEGADORES http://html5test.com/
Demonstraes HTML5
Demonstraes da Mozilla https://demos.mozilla.org/pt/ HTML5 & FRIENDS - A FIREFOX OVERVIEW https://mozillademos.org/demos/dashboard/demo.html HTML5 Presentation http://slides.html5rocks.com/#landing-slide
Referncias
http://www.w3.org/QA/ http://www.w3.org/2011/05/html5lc-faq.html http://www.w3.org/TR/2011/WD-html5-20110525/ http://www.w3.org/TR/2011/WD-html5-diff-20110525/ http://www.w3.org/TR/2011/WD-html-markup-20110525/ http://www.w3.org/2011/05/html5lc-pr.html http://www.w3.org/TR/2011/WD-html-aapi-20110525/ http://dev.w3.org/geo/api/spec-source
Referncias
http://www.w3.org/TR/webdatabase/ http://www.w3.org/TR/webstorage/ www.youtube.com.br/html5 http://www.pinceladasdaweb.com.br/ http://101besthtml5sites.com/ http://html5gallery.com/ http://www.html5rocks.com/ http://www.criarweb.com/artigos/introducao-canvas-html5.html
Referncias
http://www.w3schools.com/html5/default.asp http://www.20thingsilearned.com/pt-BR/home http://html5demos.com/ http://diveintohtml5.org/video.html http://elemarjr.net/ http://knol.google.com/k/html-5# http://html5-showcase.com/ http://html5test.com/
HTML5
Organizado por: Tiago Kautzmann www.tiagokautzmann.com.br tkautzmann@gmail.com

HTML5 TiagoKautzmann

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML5 TiagoKautzmann

Caricato da

Copyright:

Formati disponibili

HTML5

Documento HTML5 bsico

Documento XHTML5 bsico

Documento HTML5 bsico

HTML5 - Novos elementos

HTML5 - Novos elementos

HTML5 - Novos elementos

HTML5 - Novos elementos

HTML5 - Novos elementos

HTML5 - Novos elementos

HTML5 - Novos elementos

HTML5 - Novos elementos

HTML5 - Novos elementos

HTML5 - Novos elementos

HTML5 - Novos elementos

HTML5 = FLASH KILLER?

HTML5 - Novos elementos

HTML5 - Novos elementos

HTML5 - Novos elementos

HTML5 - Novos elementos

HTML5 - Novos elementos

HTML5 - Novos elementos

HTML5 - Novos atributos

HTML5 - Novos atributos

HTML5 - Novos atributos

<input type="email" name="email" />

HTML5 - Novos elementos

HTML5 - Offline Web applications

Web SQL Database

Web SQL Database

Suporte dos navegadores

Potrebbero piacerti anche