Desenvolvimento Web : HTML5, CSS3 & JavaScript

Campus Party 2011
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Fábio Flatschart

Estande do Senac – Zona Expo 13 | Campus Party 2011 | Janeiro 2011
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011

Fábio Flatschart
Consultor Educacional da Adobe Systems do Brasil.

Consultor das áreas de Internet e Computação Gráfica da Gerência de
Desenvolvimento (GD2) do SENAC/SP na produção de eventos, novas
parcerias e desenvolvimento de cursos livres, de nível médio, superior e de
pós-graduação.

Autor e escritor técnico (Editora Brasport e Editora SENAC/SP).

Professor da UNIFMU


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


HTML
1991 HTML
1994 HTML 2
1996 CSS 1 + JavaScript
1997 HTML 4
1998 CSS 2
2000 XHTML 1
2002 Tableless ( XHTML + CSS + JavaScript)
2005 AJAX
2009 HTML 5


HTML5
O HTML 5 é desenvolvido em uma colaboração entre o W3C e
WHATWG e sua especificação, ainda não concluída, deve ser
candidata a uma recomendação do W3C 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.

W3C - World Wide Web Consortium
WHATWG - Web Hypertext Application Technology Working Group

HTML5
Esta especificação introduz novas tags orientadas 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 e na alternativa ao uso de aplicativos externos.


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


APIs
Uma API (Application Programming Interface) é uma interface que
permite a interação entre os softwares facilitando sua integração de
maneira semelhante à uma interface que auxilia na comunicação
entre nós, usuários, e os diversos dispositivos com os quais
convivemos no nosso dia a dia.


Client Side HTML5
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) e criar aplicações offline entre outras.

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


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


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


Compatibilidade
<head>
<style>article, footer, header, hgroup, nav {display: block;}</style>
<script>
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
</script>
</head>


Compatibilidade
<head>

</head>

Compatiblidade
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

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

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


Estrutura básica
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<title>HTML5 - Estrutura básica</title>
</head>
<body>
</body>
</html>

http://flatschart.com/html5/basico.html


CSS & JavaScript
HTML5
HTML CSS APIs + JS

<script src="externo.js"></script>
<link rel="stylesheet" href="estilo.css">


Estrutura Semântica
Umas das maiores novidades do HTML5 é a possibilidade de atribuir
às diversas seções estuturais do documento um elemento próprio,
nativo da linguagem. Os designers e desenvolvedores podem agora
utilizar estes novos elementos do HTML5 para identificar o
cabeçalho, o rodapé, a barra de navegação e outras seções que
antes eram marcadas como um elemento genérico sem valor
semântico específico através da utilização do elemento div.


Estrutura Semântica
<body>
<header>…</header>
<nav>...</nav>
<article>...</article>
<aside>...</aside>
<footer>...</footer>
</body>

http://flatschart.com/html5/layout.html


Formulários
No quesito formulário, o HTML5 trouxe grandes avanços, entre eles tipos específicos de entrada de
dados, controle de datas, validação e formatação de campos. Nesta área, o OPERA é quem lidera o
ranking de compatibilidade.

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

autofocus | placeholder

http://flatschart.com/html5/formulario_estados2.html


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 (da mesma maneira que no caso do áudio),
indicar um link para download e oferecer a possibilidade opcional de
uso do Flash Player para a reprodução do vídeo.

<video src=" video.ogv" ></video>


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

http://flatschart.com/html5/video.html


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

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

http://flatschart.com/html5/svg.html


CSS3
radius
shadow
opacidade(RGBA)
media queries
criação de múltiplas colunas de texto
fontes

http://flatschart.com/html5/teste_css3.html
http://flatschart.com/html5/citrus


Canvas API
<canvas id="figura" width="300" height="300"></canvas>

canvas bitmap
svg vetor

http://html5demos.com/canvas-grad
http://flatschart.com/html5/canvas_simples.html


Geo Location API
http://html5demos.com/geo


ADOBE
A Adobe oferece, e continuará oferecendo cada vez mais, suporte ao HTML5

O Adobe AIR inclui suporte para HTML5

A Adobe tem o compromisso de oferecer suporte a HTML5 em suas principais ferramentas de design e
desenvolvimento na Web

As implementações de HTML5 diferenciarão e limitarão a adoção de recursos avançados, incluindo o
suporte a marcações de vídeo

A Adobe oferece a melhor linha de ferramentas da categoria usada por 3,5 milhões de designers e
desenvolvedores

O HTML5 exigirá e será beneficiado pelo investimento da Adobe na variedade de ferramentas


Adobe
Adobe Edge HTML5
http://tv.adobe.com/watch/adc-presents/preview-of-the-edge-prototype-tool-for-html5-/

Adobe Dreamweaver CS5 HTML5 Pack
http://labs.adobe.com/downloads/html5pack.html

Adobe Illustrator CS5 HTML5 Pack
http://labs.adobe.com/technologies/illustrator_html5

Dreamweaver, jQuery and jQuery Mobile
http://tv.adobe.com/watch/max-2010-develop/getting-started-with-jquery-mobile

Adobe Dreamweaver HTML5 Video Player widget
http://blogs.adobe.com/dreamweaver/2010/10/adobe-announces-the-html5-video-player-widget.htm

Para a distribuição de vídeo, soluções híbridas envolvendo Flash e HTML5 permitem atingir todos os targets
http://www.gotoandlearn.com/play.php?id=128


Referências
adobe.com/br
tv.adobe.com
labs.adobe.com
adobe.com/devnet.html
adobe.com/newsletters/edge

diveintohtml5.org
html5doctor.com
html5demos.com
dev.w3.org/html5/spec-author-view

Muito obrigado !

flatschart.com
quadrodosbemois.com.br
@fabioflat


Desenvolvimento Web : HTML5, CSS3 & JavaScript

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Desenvolvimento Web : HTML5, CSS3 & JavaScript

Semelhante a Desenvolvimento Web : HTML5, CSS3 & JavaScript (20)

Mais de Fábio Flatschart

Mais de Fábio Flatschart (20)

Desenvolvimento Web : HTML5, CSS3 & JavaScript