HTML 5 e Open Web Platform

HTML5
A nova fronteira no desenvolvimento de
aplicações WEB

flatschart.com

Fábio Flatschart
Gerente de Marketing e Inovação da Soyuz.
Sócio Diretor da Flatschart Consultoria.
Professor do MBA em Marketing Digital da FGV e do
MBA em Marketing, Consumo e Mídia Online da Trevisan.
Autor da Editora Brasport e Colunista do Portal iMasters.

FGV MBA Marketing
USJT Criação Visual e Multimídia
USP Escola de Comunicação e Artes

flatschart.com

Conexões

@fabioflat

slideshare.net/fabioflat

delicio.us/fabioflat

linkedin.com/in/fabioflat
flatschart.com

O HTML5 não é uma ruptura, é a continuidade e evolução do modelo
concebido por Tim Berners-Lee nos anos 1990

INTRO

flatschart.com

WEB
Arquitetura cliente < > servidor

Modelo de localização universal
URL - Uniform Resource Locator

Protocolo de comunicação
HTTP - Hypertext Transfer Protocol

Linguagem de marcação
HTML - HyperText Markup Language

Documento estruturado na forma de hipertexto

Browser (navegador) como recurso de visualização do documento pelo cliente

flatschart.com

Client Side
A organização do desenvolvimento de projetos web em camadas independentes
confere flexibilidade e modularidade ao fluxo de trabalho para web integrando
equipes multidisciplinares de planejamento, produção, arquitetura da informação,
design e programação.

Marcação HTML
Apresentação CSS
Comportamento JavaScript

flatschart.com

HTML
1991 HTML

1994 HTML 2

1996 CSS 1 + JavaScript

1997 HTML 4

1998 CSS 2

2000 XHTML 1

2002 Tableless

2005 AJAX

2009 HTML 5

flatschart.com

HTML5
O HTML 5 é especificação do W3C, ainda não concluída, que deve ser candidata a uma
recomendação em 2012.

Pelas características modulares do seu desenvolvimento, as empresas, fabricantes dos
navegadores, desenvolvedores, designers e usuários não necessitam aguardar a
especificação final da linguagem para colocá-la em uso.

Esta nova especificação introduz novos elementos (tags) orientados para auxiliar no
desenvolvimento web baseado em padrões compatíveis com todos dispositivos, na
marcação semântica do código, na manipulação de elementos do CSS e do JavaScript
através da definição de APIs da arquitetura Web.

World Wide Web Consortium - Escritório Brasil
http://www.w3c.br

flatschart.com

APIs
O HTML 5 aceita um conjunto de APIs que fortalece, integra e valoriza a camada de
desenvolvimento do lado do usuário (client side) através de aplicações que permitem
geolocalização, controle de áudio e vídeo, arrastar componentes (drag & drop),
desenhar bitmaps (canvas), criar aplicações offline e outras.

Marcação HTML
Apresentação
Comportamento
APIs CSS
JavaScript

flatschart.com

APIs
O HTML5 não é uma ruptura, é a continuidade e evolução do modelo concebido por
Tim Berners-Lee nos anos 1990

HTML5
HTML CSS APIs + JS

flatschart.com

Compatibilidade
Renderização dos browsers

Motor Browsers
Gecko Firefox, SeaMonkey, Camino, K-Meleon
Presto Opera, Opera Mobile, Nintendo Wii, Nintendo DS e DSi
Trident Internet Explorer
WebKit Chrome, Safari (incluindo iPhones e iPads), Adobe AIR,
Android, Palm webOS, Symbian

A cada nova versão mais recursos são suportados e a concorrência entre os
fabricantes é grande de maneira que quando um fabricante implementa uma
funcionalidade é quase sempre seguido de perto pelos demais.

flatschart.com

Compatibilidade
http://html5test.com
Testa e avalia a compatibilidade do seu browser com os elementos específicos do
HTML5

http://html5readiness.com
Mostra como o suporte ao HTML5 evoluiu de 2008 até hoje

http://caniuse.com
Exibe tabelas de compatibilidade para recursos de HTML5, CSS3, SVG e outras
tecnologias web

flatschart.com

Compatibilidade
<head>



</head>

O script acima é de Remy Sharp e está hospedado no Google Project Hosting .Você pode usá-lo livremente em seus projetos.

flatschart.com

front end developer
flatschart.com

A simplicidade é o último grau de sofisticação

NOVIDADES

flatschart.com

Doctype
HTML 4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5
<!DOCTYPE html>

flatschart.com

Charset
HTML 4.01
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">

XHTML 1.0
<?xml version="1.0" encoding="UTF-8"?>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />

HTML5
<meta charset="utf-8">

flatschart.com

Estrutura básica
<!DOCTYPE html>

<html lang="pt-br">

<head>

<meta charset="utf-8">

<title>Estrutura básica</title>

</head>

<body>

</body>

</html>

flatschart.com

Saber o significado das palavras é essencial para o entendimento!

SEMÂNTICA

flatschart.com

Elementos estruturais
Umas das maiores novidades do HTML5 é a possibilidade de atribuir às diversas
seções estuturais do documento um elemento próprio, nativo da linguagem.

HTML4 / XHTML HTML5
<body> <body>
<div id="topo"></div> <header></header>
<div id="navegacao"></div> <nav></nav>
<div id="principal"></div> <article></article>
<div id="lateral"></div> <aside></aside>
<div id="rodape"></div> <footer></footer>
</body> </body>

flatschart.com

Formulários

<input type="email">
<input type="url">
<input type="number">
<input type="search">
<input type="range">
<input type="date">
<input type="week">

http://bit.ly/nrGXhw

flatschart.com

O que eu ouço, esqueço. O que eu vejo, lembro. O que eu faço, aprendo.

MULTIMÍDIA

flatschart.com

Canvas
O elemento canvas,novidade do HTML 5, permite que a informação para a
construção de imagens baseadas em pixels seja inserida diretamente no código do
documento.

O elemento canvas apenas delimita em que local da tela isto acontece. O processo
de desenho é controlado por uma API específica para este elemento que interage com
JavaScript.

<canvas id="figura" width="300" height="300"></canvas>
<button onClick="desenhar()">Desenhar</button>
<script>
function desenhar()
{ var desenho = document.getElementById('figura');
var context = desenho.getContext('2d');
context.fillStyle = '#00FFFF‘;
context.fillRect(50,50,200, 200); }
</script>
http://bit.ly/nK6JCx

flatschart.com

SVG
<svg >
<rect width="90" height="60" x="10" y="100"
fill="#00FFCC" stroke="#FF0000" stroke-width="3" >
</svg>

No HTML5 o formato SVG (Scalable Vectorial Graphics) pode ser embutido
diretamente embutido no documento com o uso do elemento img

<img src="imagens/rabisco.svg" alt="Rabisco em SVG">

canvas bitmap
svg vetor

http://bit.ly/rqqZuK

flatschart.com

Áudio
<audio src="mozart_trompa.mp3" controls></audio>

Opção para vários formatos e opção de download do arquivo, visível quando o
browser do usuário não oferecer suporte para nenhum dos formatos indicados ou
para o elemento audio.

<audio controls>
<source src="mozart_trompa.aac"/>
<source src="mozart_trompa.ogg"/>
<source src="mozart_trompa.mp3"/>
<p>Baixe o arquivo<a href="mozart_trompa.mp3">.mp3</a></p>
</audio>
http://bit.ly/nDeClI

flatschart.com

Vídeo
A compatibilidade dos browsers ainda é problemática, mas existem várias
maneiras de contornar esta questão como, por exemplo, usar formatos
alternativos, indicar um link para download e incluir o uso do Flash Player para a
reprodução do vídeo.

<video height="272" width="360" controls preload poster=“poster_video.jpg">
<source src="videos/video.m4v"/>
<source src="videos/video.ogv"/>
<source src="videos/video.webm"/>
<p><a href="videos/video.m4v">Baixe o vídeo</a></p></video>
http://bit.ly/oKtdlT

Container Vídeo Áudio Suporte
MPEG4 H.264 AAC Chrome, Safari, IE9
OGG Theora Vorbis Chrome, Firefox, Opera
WebM VP8 Vorbis Chrome , Firefox, IE9, Opera
flatschart.com

O HTML não é uma linguagem de programação

APIS

flatschart.com

APIs
“O HTML não é uma linguagem de programação”

Apesar desta afirmação soar estranha para muitos, sempre devemos lembrar de que o
HTML é uma linguagem de marcação e de que sozinho ele não consegue formatar,
manipular ou criar conteúdo.

APIs Demo
Web Storage http://slides.html5rocks.com/#web-storage

Drag & Drop http://slides.html5rocks.com/#drag-and-drop

Desktop Drag-In http://slides.html5rocks.com/#drag-in

Desktop Drag-Out http://slides.html5rocks.com/#drag-out

Geolocation http://slides.html5rocks.com/#geolocation

Device Orientation http://slides.html5rocks.com/#slide-orientation

Speech Input http://slides.html5rocks.com/#speech-input

O estilo está sob as palavras como dentro delas. É igualmente a alma e a
carne de uma obra

ESTILO

flatschart.com

CSS3
@font-face
Efeitos de texto
Colunas
Cor e transparência
Bordas
Transições
Animações
Media queries

http://bit.ly/p4vtpS
http://slides.html5rocks.com/#css3-title

flatschart.com

Mobile não é uma tecnologia é um estilo de vida

WEB APPS

flatschart.com

Aplicativos Mobile HTML5

Playboy

Financial Times

Linkedin

Zeewe

flatschart.com

Mitos
• HTML5 ainda não pode ser usado comercialmente
• A maior mudança do HTML5 foi Vídeo, Áudio e Canvas
• Objetivo do HTML5 é matar o Flash
• HTML5 não faz diferença pra SEO/SEM
• HTML5 tem falhas graves de segurança

flatschart.com

OPEN WEB PLATFORM
flatschart.com

OPEN WEB PLATFORM
Open Web Platform ( Plataforma Aberta da Web ), é a
coleção de tecnologias abertas (royalty-free) da web.
Utilizando a Plataforma Aberta da Web , todos podem
implementar componentes de software na Web sem a
necessidade de qualquer aprovação ou taxas de licença.

• Semantics
• Offline & Storage
• Device Access
• Connectivity
• Multimedia
• 3D, Graphics & Effects
• Performance & Integration
• CSS3

flatschart.com

OPEN WEB PLATFORM
Packaged Web Apps (Widgets)
Games, Anúncios, Displays Interativos, Mashups...

flatschart.com

ePUB3
EPUB 3 Structural Semantics Vocabulary

flatschart.com

CASES

flatschart.com

Cases
Migração do fluxo de trabalho para produção
de apresentações em HTML5 para Sistema UNO
Internacional do Grupo Santillana / Editora
Moderna

Envolvimento e treinamento da equipe
Designers | Developers
Do Photoshop ao CODE com semântica
Crossbrowser
Permite distribuição para iOS e Android
Base para produção de futura ferramenta
colaborativa

flatschart.com

WEB GL e Visualização de dados
Dashboard em tempo real
mostrando a relação entre latitude,
longitude e altura dos municípios
brasileiros.

Baseado em dados abertos, esta é
uma experiência de visualização de
dados utilizando Ajax e Processing.js
como mecanismo para o gráfico em
WebGL.

http://labs.soyuz.com.br/dash/

flatschart.com

Aplicativos Híbridos
Prateleira de livros da Editora Moderna produzida pela Soyuz

flatschart.com

Games
Game da Soyuz para o W3C

flatschart.com

#ficaadica 

PUBLICAÇÕES

flatschart.com

Publicações

flatschart.com

LINKS E REFERÊNCIAS

flatschart.com

Links e Referências
Livro HTML5 – Embarque Imediato
http://flatschart.com/html5/

HTML5 Doctor, helping you implement HTML5 today
http://html5doctor.com/

DIVE INTO HTML5
http://diveintohtml5.org/

HTML5: Edition for Web Authors
http://dev.w3.org/html5/spec-author-view/

W3C Brasil
http://www.w3c.br

Curso de HTML5 do W3C Brasil
http://www.w3c.br/Cursos/CursoHTML5

Stickman
http://www.drawastickman.com/

20 Lições - Google
http://www.20thingsilearned.com/pt-BR

flatschart.com

Muito obrigado !

@fabioflat

fabioflat@gmail.com

flatschart.com

flatschart.com

HTML 5 e Open Web Platform

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (8)

Similaire à HTML 5 e Open Web Platform

Similaire à HTML 5 e Open Web Platform (20)

HTML 5 e Open Web Platform