SlideShare uma empresa Scribd logo
HTML 5
UFF - SC 2010
1
Leo Balter
Desenvolvedor
Front End
@leobalter
leo@balter.com.br
2
O que é o HTML 5?
3
XML
APIs
HTML 5
CSS 3
JavaScript
4
Breve histórico
HTML HTML 4 XHTML HTML 5
1990 1997 2000 2010+
5
Princípios básicos
Simplicidade Adaptação
Enxergar o futuro
Compreender o passado
Tradição
6
PQP PM
7
O que podemos
implementar com
HTML5?
8
Implementação
Segura
Sem muita
compatibilidade
Aproximadamente
Utilizáveis
Experimentos
9
doctype
charset
selfclose tags
atributos sem aspas
elementos semânticos
áudio e vídeo
atributos data-*
drag n drop
contenteditable
Implementação Segura
10
canvas
geolocation
web sockets
autofocus
placeholder
cache
Aproximadamente Utilizáveis
http://goo.gl/Ft8TZ
http://goo.gl/koygK
http://goo.gl/TS7I5
.focus()
.clearField()
Google Gears
11
form inputs
meter/progress
Sem muita
compatibilidade
12
web sql database
indexDB
webstorage
web workers
Experimentos
13
Shims, Fallbacks e Polyfills
@rem // Remy Sharp
http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
http://goo.gl/KQDB
14
DOCTYPE
15
<!DOCTYPE html
PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//
EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-
transitional.dtd">
16
<!DOCTYPE html>
17
<html xmlns="http://www.w3.org/1999/xhtml" lang=”pt-BR”>
<html lang=”pt-BR”>
18
charset
19
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset=utf-8 >
20
selfclose tags
<img src=”weeeee.jpg” />
<img src=”weeeee.jpg”>
21
<br /> <br>
22
atributos sem aspas
<meta charset=utf-8 >
23
Elementos Semânticos
24
header
footer
section#container
asidesection#content
article
article
article
25
article
h1 com título do artigo
header
algumas informações nesse rodapé do artigo, sobre o artigo
footer
algum texto aqui, o próprio conteúdo do artigo
26
Temos um Problema
Estrutural
27
É muito simples
resolver...
28
Desde antes do HTML
5 podemos criar
elementos “novos”
document.createElement(‘article’);
article { display: block }
29
<!--[if lt IE 9]>
  <script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup,
  menu, nav, section { display: block; }
</style>
30
Atributos data-*
<div data-meta=”address”> </div>
31
Drag n Drop
jQuery UI Draggable
http://jqueryui.com/demos/draggable/
32
contentEditable
33
34
Áudio eVídeo
http://mediaelementjs.com/
35
<video controls>
<source type="video/mp4" src="video.mp4" />
Esse browser não toca esse vídeo super legal
</video>
<video controls>
<source type="video/mp4" src="video.mp4" />
<source type="video/ogg" src="video.ogg" />
<source type="video/webm" src="video.webm" />
<object><embed>
// Muito flash no meio disso
</embed></object>
</video>
36
HTML 5 vai matar o
Flash?
37
HTML 5 vai matar o
Flash?
ainda não
37
HTML 5 vai matar o
Flash?
ainda não
mas já podem andar
lado a lado
37
38
dúvidas?
39

Mais conteúdo relacionado

Mais procurados

Php do Jeito Certo
Php do Jeito CertoPhp do Jeito Certo
Php do Jeito Certo
Cekurte Sistemas
 
Desenvolva uma app Java web em poucos passos, com o Forge
Desenvolva uma app Java web em poucos passos, com o ForgeDesenvolva uma app Java web em poucos passos, com o Forge
Desenvolva uma app Java web em poucos passos, com o Forge
Eder Magalhães
 
Visão Geral do HTML5 e do Internet Explorer 9
Visão Geral do HTML5 e do Internet Explorer 9Visão Geral do HTML5 e do Internet Explorer 9
Visão Geral do HTML5 e do Internet Explorer 9Rodrigo Kono
 
.NET Core 2.0, .NET Standard 2.0 e ASP.NET Core 2.0: uma visão geral
.NET Core 2.0, .NET Standard 2.0 e ASP.NET Core 2.0: uma visão geral.NET Core 2.0, .NET Standard 2.0 e ASP.NET Core 2.0: uma visão geral
.NET Core 2.0, .NET Standard 2.0 e ASP.NET Core 2.0: uma visão geral
Renato Groff
 
O front-end moderno e sua lib mais popular: React
O front-end moderno e sua lib mais popular: ReactO front-end moderno e sua lib mais popular: React
O front-end moderno e sua lib mais popular: React
Fernando Henriques
 
Clean Code: Por um mundo com códigos melhores - SETI 2017
Clean Code: Por um mundo com códigos melhores - SETI 2017Clean Code: Por um mundo com códigos melhores - SETI 2017
Clean Code: Por um mundo com códigos melhores - SETI 2017
Thiago Barradas
 
Docker + Bancos de Dados - DBA Brasil 3.0 - Abril-2018
Docker + Bancos de Dados - DBA Brasil 3.0 - Abril-2018Docker + Bancos de Dados - DBA Brasil 3.0 - Abril-2018
Docker + Bancos de Dados - DBA Brasil 3.0 - Abril-2018
Renato Groff
 
Frameworks Web e Python
Frameworks Web e PythonFrameworks Web e Python
Frameworks Web e Python
Álvaro Justen
 
Desenvolvimento Web com Django
Desenvolvimento Web com DjangoDesenvolvimento Web com Django
Desenvolvimento Web com Django
Allisson Azevedo
 

Mais procurados (9)

Php do Jeito Certo
Php do Jeito CertoPhp do Jeito Certo
Php do Jeito Certo
 
Desenvolva uma app Java web em poucos passos, com o Forge
Desenvolva uma app Java web em poucos passos, com o ForgeDesenvolva uma app Java web em poucos passos, com o Forge
Desenvolva uma app Java web em poucos passos, com o Forge
 
Visão Geral do HTML5 e do Internet Explorer 9
Visão Geral do HTML5 e do Internet Explorer 9Visão Geral do HTML5 e do Internet Explorer 9
Visão Geral do HTML5 e do Internet Explorer 9
 
.NET Core 2.0, .NET Standard 2.0 e ASP.NET Core 2.0: uma visão geral
.NET Core 2.0, .NET Standard 2.0 e ASP.NET Core 2.0: uma visão geral.NET Core 2.0, .NET Standard 2.0 e ASP.NET Core 2.0: uma visão geral
.NET Core 2.0, .NET Standard 2.0 e ASP.NET Core 2.0: uma visão geral
 
O front-end moderno e sua lib mais popular: React
O front-end moderno e sua lib mais popular: ReactO front-end moderno e sua lib mais popular: React
O front-end moderno e sua lib mais popular: React
 
Clean Code: Por um mundo com códigos melhores - SETI 2017
Clean Code: Por um mundo com códigos melhores - SETI 2017Clean Code: Por um mundo com códigos melhores - SETI 2017
Clean Code: Por um mundo com códigos melhores - SETI 2017
 
Docker + Bancos de Dados - DBA Brasil 3.0 - Abril-2018
Docker + Bancos de Dados - DBA Brasil 3.0 - Abril-2018Docker + Bancos de Dados - DBA Brasil 3.0 - Abril-2018
Docker + Bancos de Dados - DBA Brasil 3.0 - Abril-2018
 
Frameworks Web e Python
Frameworks Web e PythonFrameworks Web e Python
Frameworks Web e Python
 
Desenvolvimento Web com Django
Desenvolvimento Web com DjangoDesenvolvimento Web com Django
Desenvolvimento Web com Django
 

Semelhante a HTML 5 - Semana da Computação - UFF

Workshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
Workshop: WebSockets com HTML 5 & PHP - Gustavo CielloWorkshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
Workshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
Tchelinux
 
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
Rio Info
 
Como funciona a internet
Como funciona a internetComo funciona a internet
Como funciona a internet
Gustavo Zadrozny Leyendecker
 
O drupal sem sua cabeça
O drupal sem sua cabeçaO drupal sem sua cabeça
O drupal sem sua cabeça
Lucas Chain Gonçalves
 
Palestra html5 e CSS3
Palestra html5 e CSS3Palestra html5 e CSS3
Palestra html5 e CSS3
Emiliano Barreto
 
Minicurso Web. Front-end e HTML5 (parte 1)
Minicurso Web. Front-end e HTML5 (parte 1)Minicurso Web. Front-end e HTML5 (parte 1)
Minicurso Web. Front-end e HTML5 (parte 1)
Luiz Felipe Fernandes Machado Costa
 
Desenvolvimento de Sistemas Web - HTML5 - Introdução
Desenvolvimento de Sistemas Web - HTML5 - IntroduçãoDesenvolvimento de Sistemas Web - HTML5 - Introdução
Desenvolvimento de Sistemas Web - HTML5 - Introdução
Fabio Moura Pereira
 
Escalando uma plataforma poliglota - QConSP 17
Escalando uma plataforma poliglota - QConSP 17Escalando uma plataforma poliglota - QConSP 17
Escalando uma plataforma poliglota - QConSP 17
Leandro Moreira
 
Apresentação Flash Camp Rio 2010 by Raphael Vinicius
Apresentação Flash Camp Rio 2010 by Raphael ViniciusApresentação Flash Camp Rio 2010 by Raphael Vinicius
Apresentação Flash Camp Rio 2010 by Raphael Vinicius
Raphael Vinicius Pinheiro de Melo
 
Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aula
clodiney cruz
 
HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5
ondazul
 
Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)
Gustavo Zimmermann
 
Descomplicando o Mobile com Ionic Framework
Descomplicando o Mobile com Ionic FrameworkDescomplicando o Mobile com Ionic Framework
Descomplicando o Mobile com Ionic Framework
Yan Borowski Machado
 

Semelhante a HTML 5 - Semana da Computação - UFF (20)

Workshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
Workshop: WebSockets com HTML 5 & PHP - Gustavo CielloWorkshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
Workshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
 
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
 
Como funciona a internet
Como funciona a internetComo funciona a internet
Como funciona a internet
 
O drupal sem sua cabeça
O drupal sem sua cabeçaO drupal sem sua cabeça
O drupal sem sua cabeça
 
Palestra html5 e CSS3
Palestra html5 e CSS3Palestra html5 e CSS3
Palestra html5 e CSS3
 
Minicurso Web. Front-end e HTML5 (parte 1)
Minicurso Web. Front-end e HTML5 (parte 1)Minicurso Web. Front-end e HTML5 (parte 1)
Minicurso Web. Front-end e HTML5 (parte 1)
 
Python na Nuvem
Python na NuvemPython na Nuvem
Python na Nuvem
 
Html slide
Html slideHtml slide
Html slide
 
Html slide
Html slideHtml slide
Html slide
 
Html slide
Html slideHtml slide
Html slide
 
Html slide
Html slideHtml slide
Html slide
 
Html 5
Html 5Html 5
Html 5
 
Desenvolvimento de Sistemas Web - HTML5 - Introdução
Desenvolvimento de Sistemas Web - HTML5 - IntroduçãoDesenvolvimento de Sistemas Web - HTML5 - Introdução
Desenvolvimento de Sistemas Web - HTML5 - Introdução
 
Escalando uma plataforma poliglota - QConSP 17
Escalando uma plataforma poliglota - QConSP 17Escalando uma plataforma poliglota - QConSP 17
Escalando uma plataforma poliglota - QConSP 17
 
Apresentação Flash Camp Rio 2010 by Raphael Vinicius
Apresentação Flash Camp Rio 2010 by Raphael ViniciusApresentação Flash Camp Rio 2010 by Raphael Vinicius
Apresentação Flash Camp Rio 2010 by Raphael Vinicius
 
Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aula
 
Html5
Html5Html5
Html5
 
HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5
 
Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)
 
Descomplicando o Mobile com Ionic Framework
Descomplicando o Mobile com Ionic FrameworkDescomplicando o Mobile com Ionic Framework
Descomplicando o Mobile com Ionic Framework
 

Mais de Leonardo Balter

Unit testing
Unit testingUnit testing
Unit testing
Leonardo Balter
 
GruntJS + Wordpress
GruntJS + WordpressGruntJS + Wordpress
GruntJS + Wordpress
Leonardo Balter
 
Guia de Sobrevivência JS no mundo Open Source
Guia de Sobrevivência JS no mundo Open SourceGuia de Sobrevivência JS no mundo Open Source
Guia de Sobrevivência JS no mundo Open Source
Leonardo Balter
 
Potencial de Vendas do e-Commerce no Frontend - WOB2012
Potencial de Vendas do e-Commerce no Frontend - WOB2012Potencial de Vendas do e-Commerce no Frontend - WOB2012
Potencial de Vendas do e-Commerce no Frontend - WOB2012
Leonardo Balter
 
Testing sucks
Testing sucksTesting sucks
Testing sucks
Leonardo Balter
 
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open WebNovo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open WebLeonardo Balter
 
Receita do Sucesso no Mercado Front End
Receita do Sucesso no Mercado Front EndReceita do Sucesso no Mercado Front End
Receita do Sucesso no Mercado Front EndLeonardo Balter
 
Realize mais com HTML 5 e CSS 3 - EDTED / RS
Realize mais com HTML 5 e CSS 3 - EDTED / RSRealize mais com HTML 5 e CSS 3 - EDTED / RS
Realize mais com HTML 5 e CSS 3 - EDTED / RSLeonardo Balter
 
EDTED BH - HTML 5 e CSS 3 - Julho de 2011
EDTED BH - HTML 5 e CSS 3 - Julho de 2011EDTED BH - HTML 5 e CSS 3 - Julho de 2011
EDTED BH - HTML 5 e CSS 3 - Julho de 2011
Leonardo Balter
 
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
Leonardo Balter
 
EDTED SP - HTML 5 e CSS 3 - Junho de 2011
EDTED SP - HTML 5 e CSS 3 - Junho de 2011EDTED SP - HTML 5 e CSS 3 - Junho de 2011
EDTED SP - HTML 5 e CSS 3 - Junho de 2011
Leonardo Balter
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Leonardo Balter
 

Mais de Leonardo Balter (15)

Unit testing
Unit testingUnit testing
Unit testing
 
Insustentavel js
Insustentavel jsInsustentavel js
Insustentavel js
 
GruntJS + Wordpress
GruntJS + WordpressGruntJS + Wordpress
GruntJS + Wordpress
 
Guia de Sobrevivência JS no mundo Open Source
Guia de Sobrevivência JS no mundo Open SourceGuia de Sobrevivência JS no mundo Open Source
Guia de Sobrevivência JS no mundo Open Source
 
Potencial de Vendas do e-Commerce no Frontend - WOB2012
Potencial de Vendas do e-Commerce no Frontend - WOB2012Potencial de Vendas do e-Commerce no Frontend - WOB2012
Potencial de Vendas do e-Commerce no Frontend - WOB2012
 
Testing sucks
Testing sucksTesting sucks
Testing sucks
 
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open WebNovo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
 
Extreme Web Performance
Extreme Web PerformanceExtreme Web Performance
Extreme Web Performance
 
temp EWP
temp EWPtemp EWP
temp EWP
 
Receita do Sucesso no Mercado Front End
Receita do Sucesso no Mercado Front EndReceita do Sucesso no Mercado Front End
Receita do Sucesso no Mercado Front End
 
Realize mais com HTML 5 e CSS 3 - EDTED / RS
Realize mais com HTML 5 e CSS 3 - EDTED / RSRealize mais com HTML 5 e CSS 3 - EDTED / RS
Realize mais com HTML 5 e CSS 3 - EDTED / RS
 
EDTED BH - HTML 5 e CSS 3 - Julho de 2011
EDTED BH - HTML 5 e CSS 3 - Julho de 2011EDTED BH - HTML 5 e CSS 3 - Julho de 2011
EDTED BH - HTML 5 e CSS 3 - Julho de 2011
 
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
 
EDTED SP - HTML 5 e CSS 3 - Junho de 2011
EDTED SP - HTML 5 e CSS 3 - Junho de 2011EDTED SP - HTML 5 e CSS 3 - Junho de 2011
EDTED SP - HTML 5 e CSS 3 - Junho de 2011
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
 

HTML 5 - Semana da Computação - UFF