seminario html 5
Post on 29-Jun-2015
228 Views
Preview:
DESCRIPTION
TRANSCRIPT
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/
top related