Danilo Souza Samara Kavamoto

Fabiano Favarão

TECNOLOGIA

<History>

<About HTML5>

<What is new?>

HISTORIA

HMTL 1 - HyperText HTML 2 - 1994

HISTORIA

1995 - HMTL 3

Word Wide WEB Consortium

HISTORIA

1997 - HTML 4

2000

20052004 Web Hypertext Application Technology Working Group

HISTORIA

2006 2008

HISTORIA

O QUE É HTML5?

HTML5

Elementos Atributos

Connectivity

Device Access

Offline e Storage

Suporte CSS3

Perfomace e Intergração

Graficos 2D/3D

Video e Audio Nativo

SEMANTICS

Novos elementos semanticos

Novas entradas

Novos atributos

EXEMPLOS

Antes

EXEMPLOS

<header> <nav> <section> <article> <aside> <figure> <figcaption> <footer> <details> <summary> <mark> <time>

Device Access

APIs para acesso ao dispositivo, como camera, touch screen, gps e sensores

Device Access

OFFLINE & STORAGE

Web Apps

App Cache

Local Storage

EXEMPLOS

CONNECTIVITY

Web Sockets

Server-Sent Events

MULTIMEDIA

Objetos de primeira classe

<audio>

<video>

EXEMPLOS <video controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

!<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>

EXEMPLOS

GRAFICOS

Elementos Gráficos

<canvas>

<svg>

Técnologias

WebGL

CSS3

EXEMPLOS <svg width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg>

Bakemono (Canvas)

EXEMPLOS

http://hakim.se/experiments/html5/bakemono/01/

http://www.ro.me/

ROME "3 Dreams of Black" (WebGL)

EXEMPLOS

PERFORMANCE & INTEGRATION

Tecnicas e Tecnologias

Web Workers

XMLHttpRequest

CSS3

Suporte á CSS3

<style>

<link>

Novos Modulos

EXEMPLOS

http://www.clicktorelease.com/code/css3dclouds/

CSS3D Clouds (HTML5 + CSS3)

EXEMPLOS

http://www.onehourpersecond.com/

| Uma hora por segundo (HTML5 + CSS3)

Por

HTML5 EM AÇÃO

Portifolio

WEB/SITE

APLICAÇÃO WEB/MOBILE

DESENVOLVIMENTO DE JOGOS

FERRAMENTAS

BLUE GRIFFON

DREAMWEAVER

Google Web Designer

Create engaging, interactive HTML5-based designs and motion graphics that can run on any device.

Aplicações +

ricas em QUALIDADE e INTERAÇÃO

Maior igualdade e LIBERDADE na web

CONCLUSÃO

I agree!

Desenvolvimento +

PRATICO e RAPIDO

Questions?

Referencias

Creditos Imagem http://www.w3.org/html/logo/ Acessado em 23 de Agosto 2014

Ferramenta BlueGriffon bluegriffon.org Acessado em 23 de Agosto de 2014

Base oficial http://www.w3.org/TR/html5/ Acessado em 23 de Agosto de 2014

Fonte de informações http://www.w3schools.com/html/html5_intro.asp

Referencias

Fonte de informações http://www.html5rocks.com/en/features/

Exemplo Manifest http://www.webkit.org/demos/sticky-notes/