Novas possibilidades no desenvolvimento web com a HTML5

Organizao: Tiago Kautzmann

HTML5

VISO GERAL WORLD WIDE WEB HISTRICO W3C

HTML Viso Geral

World Wide Web

Em 1989 Tim Berners-Lee inventou a World Wide Web:
Criou o termo World Wide Web; Desenvolveu o primeiro servidor web; Desenvolveu o protocolo http; Desenvolveu o primeiro navegador; Em 1990 desenvolveu a primeira verso do HTML (HyperText Markup Language); Especificaes iniciais para URIs, HTTP e HTML foram refinadas posteriormente.

HTML Viso Geral

World Wide Web

Primeiro website criado por Tim Berners-Lee que trazia informaes sobre o projeto WWW.

HTML Viso Geral

W3C World Wide Web Consortium

Em outubro 1994 Tim Berners-Lee fundou a W3C com o objetivo de desenvolver padres, especificaes tcnicas e orientaes que permitam o crescimento a longo prazo da web.

HTML Viso Geral

W3C World Wide Web Consortium

Alguns padres definidos pela W3C: XML; HTML; DOM; CSS; SVG; MathML; Padres para Web Semntica; Padres para Browsers.

Os padres so definidos por grupos de trabalho.

HTML Viso Geral

W3C World Wide Web Consortium

Um consrcio internacional que conta com:
Organizaes filiadas (mais de 350 membros); Uma equipe em tempo integral; Participao do pblico.

HTML Viso Geral

W3C World Wide Web Consortium

A W3C administrada atravs de um contrato comum entre trs instituies que o hospedam: MIT (EUA), ERCIM (Europa), e Keio University (Japo).

HTML Viso Geral

W3C World Wide Web Consortium

Possui tambm os escritrios regionais, como a W3C Brasil. O escritrio no Brasil tem como objetivos:
Disseminar a cultura de adoo de padres para a web; Organizar atividades na regio para promover a W3C; Traduzir para o portugus textos da W3C relevantes para o Brasil; Propor polticas e procedimentos relativos regulamentao do uso da internet; Recomendar padres tcnicos para o desenvolvimento da web no pas;

HTML Viso Geral

Desenvolvimento da HTML5
De acordo com a W3C, a Web baseada em 3 pilares:
1. Um esquema de nomes para localizao de fontes de informao na Web, esse esquema chama-se URI; 2. Um protocolo de acesso para acessar estas fontes, hoje o HTTP; 3. Uma linguagem de hipertexto, para a fcil navegao entre as fontes de informao: a HTML;

HTML Viso Geral

Desenvolvimento da HTML5
1989 1990 1994 1997 1999 2000 2001 2004 Tim Berners-Lee cria a World Wide Web Tim Berners-Lee cria a 1 verso da HTML HTML 2 j incluia a tag <img> HTML 3.2 HTML 4.01 XHTML 1.0 XHTML 1.1 Apple, Mozilla e Opera criam a WHAT WG (Web Hypertext Application Technology Working Group)

HTML Viso Geral

Desenvolvimento da HTML5

2007 2009 2010 2011

W3C retoma o HTML Working Group W3C descontinua XHTML Apple, Google, Microsoft, Mozilla e Opera implementam HTML5

HTML Viso Geral

Desenvolvimento da HTML5

A expectativa da W3C que a HTML5 se torne uma recomendao em 2014.

HTML Viso Geral

Desenvolvimento da HTML5

O que a HTML5?
HTML5 a nova verso da HTML. Alm de definir regras de marcao HTML e XHTML, define APIs (DOM) que formaro a base da arquitetura web. http://www.w3.org/html/wg/

HTML Viso Geral

Desenvolvimento da HTML5

Objetivos da HTML5:
Novos elementos e modificao da funo de outros. Elemento strong, por exemplo, no aparece mais apenas como elemento de apresentao, mas semntico, como marcador de um destaque dentro de um texto; Novos atributos, modificao de outros e novos valores de atributos; Elementos e atributos descontinuados (ex: font, center, frame); Elementos que melhoram a semntica do cdigo; Mais interatividade sem a necessidade de plugins; Novo DOM (Document Object Model): nova API, eventos,... Interoperabilidade e Retrocompatibilidade.

HTML Viso Geral

Desenvolvimento da HTML5

HTML5 + CSS3 + JavaScript + outras especificaes

HTML5
SUPORTE DOS NAVEGADORES E EXTRATGIAS DE USO

Suporte dos navegadores e estratgias de uso

Compatibilidade da HTML5

HTML5 nos navegadores atuais

Para o desenvolvimento da HTML5 e CSS3, a W3C dividiu o desenvolvimento de cada tecnologia em mdulos. Isso quer dizer que a comunidade de desenvolvedores e os fabricantes de browsers no precisam esperar que todo o padro seja escrito e publicado para utilizarem as novidades das linguagens.

Suporte dos navegadores e estratgias de uso

Compatibilidade da HTML5

Teste de compatibilidade dos browsers:

html5test.com

Suporte dos navegadores e estratgias de uso

Compatibilidade da HTML5

HTML5 no Internet Explorer

HTML5 apresenta vrios novos elementos; IE8 e anteriores no aplicam regras CSS a elementos desconhecidos;
CSS:
header{height:150px; background-color:#cccccc;}

<!--[if lte IE 8]> <script> document.createElement("header"); </script> <![endif]-->

Suporte dos navegadores e estratgias de uso

Compatibilidade da HTML5

HTML5 no Internet Explorer

Script desenvolvido por Remy Sharp:
<!--[if lte IE 8]> <script src=http://html5shim.googlecode.com/svn/trunk/html5.js"> </script> <![endif]-->

Suporte dos navegadores e estratgias de uso

Compatibilidade da HTML5

Biblioteca JavaScript Modernizr

Biblioteca JavaScript para detectar o suporte nativo dos navegadores; Detecta suporte ao HTML5 e CSS3; Constantemente atualizada, disponvel em www.modernizr.com; <script src="js/modernizr-2.5.3.js"></script>

if(Modernizr.video){ // script para uso do elemento video } else { // }

Suporte dos navegadores e estratgias de uso

Compatibilidade da HTML5

Biblioteca JavaScript Modernizr

Para o CSS3, a biblioteca Modernizr detecta o suporte CSS do navegador e adiciona valores ao atributo class da tag <html>.
Desenvolvedor deve acrescentar um class na tag html: <html class="no-js"> A biblioteca Modernizr vai acrescentar dinamicamente valores ao atributo .borderradius #content { class da tag html: border: 1px solid #141414; } border-radius: 12px; <html class="js borderradius no-boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections ...

.no-borderradius #content { border: 1px solid #ccc; }

HTML5
Estrutura bsica, DOCTYPE e charsets

HTML5 Estrutura bsica, DOCTYPE e charsets

O HTML5 define uma sintaxe compatvel com HTML e XHTML:
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8" /> <title>Palestra HTML5</title> </head> <body> </body> </html>

HTML5 Estrutura bsica, DOCTYPE e charsets

Sintaxe XML do HTML5, para servir o documento como XML:
<?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>

HTML5
Novos elementos e atributos

HTML5 Novos elementos e atributos

Semntica dos documentos em HTML

A funo da HTML indicar que tipo de informao a pgina est exibindo; No h um padro para nomenclatura de IDs e Classes; A HTML5 apresenta novos elementos que melhoram a semntica dos documentos web; Alguns dos novos elementos ajudam a definir setores principais nos documentos HTML; Ajuda o trabalho de agentes de usurio como os sistemas de busca que guardam informaes mais exatas sobre o site.

HTML5 Novos elementos e atributos

Semntica dos documentos em HTML

HTML4 HTML5

HTML5 Novos elementos e atributos

Elemento header
Representa um cabealho; Destina-se a marcar o cabealho de uma sesso ou da pgina como um todo. Geralmente deve conter os elementos h1-h6 (no obrigatoriamente).

header - HTML language reference

HTML5 Novos elementos e atributos

Elemento header
<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> <!-- this starts a second subsection --> <!-- this is part of the subsection entitled "Important News" --> <p>To play today's games you will need to update your client.</p> <h2>Games</h2> <!-- this starts a third subsection --> </header> <p>You have three active games:</p> ...

header - HTML language reference

HTML5 Novos elementos e atributos

Elemento footer
Representa um rodap; Destina-se a marcar o rodap de uma sesso ou da pgina como um todo; Deve conter informaes sobre o contedo da seo ou pgina, como seu autor, links para documentos relacionados, direitos autorais e similares.

footer - HTML language reference

HTML5 Novos elementos e atributos

Elemento footer

<body> <p>A dolor sit amet, consectetur adipisicing elit....</p> <footer> Desenvolvido pela W3C. </footer> </body>

footer - HTML language reference

HTML5 Novos elementos e atributos

Elemento nav
Marca uma seo da pgina que contenha links para outras pginas ou para outras partes dentro da prpria pgina. Nem todos os grupamentos de links devem ser marcados com este elemento, somente os maiores grupos de links.

nav - HTML language reference

HTML5 Novos elementos e atributos

Elemento nav

<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>

nav - HTML language reference

HTML5 Novos elementos e atributos

Elemento article
Marca uma sesso de um contedo que forma uma parte independente de um documento ou site, por exemplo, um artigo de uma revista, uma entrada de um blog, um contedo fornecido via RSS, um post em um frum, um comentrio postado por um visitante, um contedo independente.

article - HTML language reference

HTML5 Novos elementos e atributos

Elemento article
<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!</p> </article> </section> </article>

article - HTML language reference

HTML5 Novos elementos e atributos

Elemento section
Marca , genericamente, uma seo na pgina, geralmente com um ttulo ou cabealho; Entende-se seo como um grupamento de contedos tratando de um mesmo tema; No utilizar como container genrico. Quando for necessrio um container genrico a ser usado por fins de estilizao ou para ser manipulado por script, devemos empregar o elemento div.

section - HTML language reference

HTML5 Novos elementos e atributos

Elemento section
<article> <p>The apple is the pomaceous fruit of the apple tree.</p> <section> <h1>Red Delicious</h1> <p>These bright red apples are the most common ...</p> </section> <section> <h1>Granny Smith</h1> <p>These juicy, green apples make a great filling ...</p> </section> </article>

section - HTML language reference

HTML5 Novos elementos e atributos

Novos atributos para formulrios

autofocus <input name=login autofocus >
http://www.livrohtml5.com.br/codigos/cap_05/c5-autofocus.html

placeholder < input name= pesquisa placeholder=Search here > required <input name=login required> pattern <input name= CEP id= CEP required pattern=\d{5}-\d{3} /> Custom validators novalidate e formnovalidate

HTML5 Novos elementos e atributos

Novos atributos para formulrios

O novo atributo form para elementos como input, select e textarea; Permitem que os controles sejam associados a um formulrio; Os controles no precisam ser descendentes do elemento form.
<label for=email> Email: <input type=email form=foo name=email> </label>
<form id=foo></form>

HTML5 Novos elementos e atributos

Novos valores para o atributo type

tel - Telefone search Um campo de busca email Email com formatao e validao url Um endereo web, tambm com formatao e validao datetime date <input type="email" name="email" /> month week time number range color

http://www.livrohtml5.com.br/codigos/cap_06/c6-email.html

HTML5
MathML e SVG

HTML5 + MathML
HTML5 incorpora o MathML; MathML uma linguagem de marcao baseada em XML para representao de frmulas matemticas; Basta escrever o cdigo MathML no documento HTML5;

http://www.w3.org/Math/
Exemplo HTML5 com MathML

HTML5 + SVG
HTML5 incorpora o SVG; SVG uma linguagem de marcao baseada em XML para marcao de grficos vetoriais; Basta escrever o cdigo SVG no documento HTML5; A maioria dos editores grficos vetoriais exportam SVG;

http://www.w3.org/Graphics/SVG/

Exemplos HTML5 + SVG

HTML5
Novos elementos para AUDIO e VIDEO

HTML5 Novos elementos e atributos

Elemento audio
Destina-se a incorporar um audio ou stream de audio na pgina; Sem a necessidade de plugins, Flash, QuickTime, Real Audio, WMP; Som reproduzido com as funcionalidades nativas do navegador; No h um codec padro a ser implementado nativamente; Cada fabricante decide a implementao do codec; Navegadores que no do suporte renderizam o contedo do elemento:

<audio src="musica.mp3" controls autoplay loop> <!--Cdigo alternativo para insero do audio--> </audio>

audio - HTML language reference

HTML5 Novos elementos e atributos

Elemento audio
Elemento audio admite como elemento-filho o elemento source; Elemento source permite servir arquivos com formatos alternativos. Recomenda-se utilizar o atributo type;
<audio controls autoplay loop> <source src="musica.mp3" type="audio/mpeg; codecs='mp3'"> <source src="musica.ogv" type="audio/ogg"> <!--Cdigo alternativo para insero do audio--> <p>Seu navegador no suporta o elemento audio da HTML5.</p> <p>Faa o <a href="musica.mp3">download</a> do arquivo.</p> </audio> audio - HTML language reference source HTML language reference

HTML5 Novos elementos e atributos

Elemento video
Destina-se a incorporar um video na pgina; Sem a necessidade de plugins, Flash, QuickTime, Windows Media Player; Video reproduzido com as funcionalidades nativas do navegador; No h um codec padro a ser implementado nativamente; Cada fabricante decide a implementao do codec; Navegadores que no do suporte renderizam o contedo do elemento:

<video controls autoplay loop preload=auto> <source src="video1.ogg" type="video/ogg; codecs='theora, vorbis'"> <source src="video1.webm" type="video/webm"> <!--Cdigo alternativo para insero do video--> <p>Seu navegador no suporta o elemento video da HTML5.</p> </video>
video - HTML language reference

HTML5 Novos elementos e atributos

Elemento video

Elemento video no navegador Google Chrome

HTML5 Novos elementos e atributos

Elemento video
Codecs para a HTML5: Theora para ogv; MPEG4 para mp4; H.264 para MPEG; VP8 para WebM;

HTML5 Novos elementos e atributos

Elemento track
Destina-se a definir trilhas externas para os elementos audio e video: Subttulos; Legendas; Descries; Metadados;
<video controls autoplay loop> <source src="video1.ogg" type="video/ogg; codecs='theora, vorbis'"> <source src="video1.webm" type="video/webm"> <p>Seu navegador no suporta o elemento video da HTML5.</p> <track kind="subtitles" srclang="pt-br" src="legenda.srt"> </video> track - HTML language reference

HTML5 Novos elementos e atributos

Ferramenta para codificao

Codificar vdeos nos containers Ogg e WebM com os codecs Theora (vdeo), Vorbis (audio) e VP8 (vdeo-audio).

http://firefogg.org/

HTML5 Novos elementos e atributos

APIs para audio e video

A API disponvel para os elementos audio e video permite que se implemente controles personalizados. Entre os atributos e mtodos disponveis esto: Mtodo play(); Mtodo pause(); Mtodo stop(); Atributo volume; http://www.livrohtml5.com.br/codigos/cap_03/c3-video-ex7.html

HTML5 Novos elementos e atributos

APIs para audio e video

www.youtube.com.br/html5

HTML5
Elemento canvas

HTML5 Novos elementos e atributos

Elemento canvas
O elemento canvas marca uma rea para a criao de desenhos, implementar animaes e jogos atravs da linguagem JavaScript. Acessado por meio de interfaces DOM; Contexto 2D; WebGL - Contexto 3D a partir do elemento canvas;

No HTML: <canvas id=x width=300 height=300></canvas>

No JavaScript:
context=document.getElementById(x).getContext(2d); context.fillRect(10, 10, 50, 150);

HTML5 Novos elementos e atributos

Elemento canvas

Exemplo Canvas
http://www.livrohtml5.com.br/codigos/cap_04/c4-canvas-ex1.html

http://html5demos.com/gum-canvas
Entre as possibilidades de uso da API Canvas esto: Desenhar texto; Desenhar sombras e gradientes; Incluir imagens no canvas; Manipular objetos atravs de eventos; Rotacionar, animar e transformar objetos;

http://www.html5canvastutorials.com/

HTML5 Novos elementos e atributos

Elemento canvas

http://chrome.angrybirds.com/
WebGL Contexto 3D a partir do elemento canvas.

http://www.spacegoo.com/maze

HTML5
Microdata API

HTML5 Novos elementos e atributos

Microdata API
Semntica adicional; Usurio pode definir seus prprios padres de metadados; Pode utilizar metadados padronizados (http://www.datavocabulary.org/); A Microdata API fornece acesso especial aos dados;

Exemplos Microdata
http://www.w3.org/TR/html5/microdata.html

HTML5
Web Storage

HTML5

Web Storage
Dados podem ser armazenados localmente pelo browser; Anteriormente, isto era feito com cookies; Web Storage mais seguro e rpido; Armazenamento de dados para alm da sesso atual;

http://dev.w3.org/html5/webstorage/

HTML5
Aplicaes OFFLINE

HTML5

Applicaes OFFLINE
Maneira de indicar ao navegador quais elementos so necessrios e devem ser colocados em cache para que a aplicao funcione offline.
<!-- clock.html --> Arquivo clock.appcache <!DOCTYPE HTML> CACHE MANIFEST <html manifest="clock.appcache"> <head> clock.html <title>Clock</title> clock.css <script src="clock.js"></script> clock.js <link rel="stylesheet" href="clock.css"> </head> <body> <p>The time is: <output id="clock"></output></p> </body> </html>

http://www.w3.org/TR/html5/offline.html#offline

HTML5
API de Geolocalizao

HTML5

API de Geolocalizao
Define uma API que fornece acesso por script de informaes sobre localizao geogrfica; As fontes de informaes de localizao incluem GPS, redes de celulares, servios de localizao de IP.

http://www.livrohtml5.com.br/codigos/cap_07/c7-mapa-estatico-google.html

http://dev.w3.org/geo/api/spec-source.html

HTML5
Web Socket

HTML5

Web Socket
Define um protocolo e funcionalidades que permitem a comunicao de um cliente web com um servidor remoto; A conexo permanece aberta e possibilita a comunicao permanente entre cliente e servidor; Conexo pode ser fechada pelo desenvolvedor; Em uma aplicao que consulta o servidor repetidamente, o uso o protocolo http implica em repetidas requisies/resposta gerando trfego de cabealhos http; Web Socket torna a aplicao mais rpida;
http://dev.w3.org/html5/websockets/

HTML5
Web Workers

HTML5

Web Workers
JavaScript tem caracterstica single-thread (uma linha de execuo). Scripts longos congelam as pginas; Web Workers permite a execuo de mais de um script simultaneamente; Criao de threads de execuo JavaScript;

http://dev.w3.org/html5/workers/

HTML5
Outras funcionalidades

HTML5

Outras funcionalidades
API de Drag and Drop
Atributo draggable num elemento o torna arrastvel e h uma srie de eventos que possvel tratar.

Reviso ortogrfica e gramatical

Agentes de usurio podem oferecer recursos de reviso ortogrfica e gramatical. O desenvolvedor pode controlar o comportamento atravs do novo atributo spellcheck. Inserir spellcheck =true habilita a reviso.

Atributo contenteditable
Este atributo torna um elemento HTML editvel pelo usurio. Exemplo1 Exemplo2

HTML5

Outras funcionalidades
DOM e HTML5
O DOM a interface entre a linguagem JavaScript e HTML. Novas propriedades e mtodos. Exemplos: Novo mtodo getElementsByClassName; Propriedade innerHTML passa a ser um padro;

Menus e Toolbars
O elemento menu usado para definir menus e barras de ferramenta. Dentro do menu, voc pode inserir submenus ou comandos. Para inserir submenus, basta inserir outros elementos menu.

HTML5 Novos elementos e atributos

Outras funcionalidades
Elementos details, summary e progress
<details> <summary>Copiando <progress max=39248 value=14718> 37,5%</summary> <dl> <dt>Tamanho total:</dt> <dd>39.248KB</dd> <dt>Transferido:</dt> <dd>14.718</dd> <dt>Taxa de transferncia:</dt> <dd>127KB/s</dd> <dt>Nome do arquivo:</dt> <dd>HTML5.mp4</dd> </dl> </details>

HTML5 Novos elementos e atributos

Outras funcionalidades
Elemento datalist
Usar junto ao elemento input; Define uma lista de sugestes para o campo input;

<label for="fru">Fruta preferida:</label><br /> <input type="text" list="frutas" id="fru" /> <datalist id="frutas"> <option value="Abacate" /> <option value="Abacaxi" /> <option value="Banana" /> <option value="Mamo" /> <option value="Manga" /> <option value="Pera" /> </datalist>

HTML5 Novos elementos e atributos

Outras funcionalidades
Elementos figure e figcaption
Elemento figure: marcar fotos, ilustraes, diagramas (entre outros); Elemento figcaption: marcar uma legenda para uma figura;

<figure> <img src="/kookaburra.jpg" alt="Kooaburra"> <img src="/pelican.jpg" alt="Pelicano na praia"> <img src="/lorikeet.jpg" alt="Papagaio"> <figcaption> Pssaros Australianos. Da esquerda para direita, Kookburra, Pelicano e Papagaio. Originais por Richard Clark </figcaption> </figure>

Validadores W3C

http://validator.w3.org/ http://validator.w3.org/unicorn/ http://jigsaw.w3.org/css-validator/

Sites em HTML5

http://html5demos.com/ http://html5gallery.com.br/ http://html5gallery.com/ http://html5sites.com/ http://101besthtml5sites.com/

Novas possibilidades no desenvolvimento web com a HTML5

Referncias
http://www.w3.org/html/wg/ http://www.w3c.br/Home/WebHome http://www.w3.org/TR/tr-groups-all http://www.maujor.com/ http://www.livrohtml5.com.br/

Silva, Maurcio Samy. HTML5. So Paulo: Novatec Editora, 2011.

Valeu Pessoal!!! Novas possibilidades no desenvolvimento web com a HTML5

Organizao: Tiago Kautzmann
Material apresentado disponvel em

www.tiagokautzmann.com.br/html5