SlideShare uma empresa Scribd logo
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

Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
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




Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
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


Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
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
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
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.




Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
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

Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
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.




Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
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

Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
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




Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
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.




Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
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>

Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
Compatibilidade
<head>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>




Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
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
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
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>
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
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">


Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
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

Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
CSS & JavaScript
                                                       HTML5
                HTML                                        CSS                         APIs + JS

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




Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
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.




Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
Estrutura Semântica
<body>
<header>…</header>
<nav>...</nav>
<article>...</article>
<aside>...</aside>
<footer>...</footer>
</body>


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

Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
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


Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
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>




Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
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

Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
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

Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
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

Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
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


Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
Geo Location API
http://html5demos.com/geo




Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
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

Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
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



Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
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
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
Muito obrigado !


                                                              flatschart.com
                                                              quadrodosbemois.com.br
                                                              @fabioflat


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

Mais conteúdo relacionado

Mais procurados

Padrões Arquiteturais - MVC, MVP e MVVM
Padrões Arquiteturais - MVC, MVP e MVVMPadrões Arquiteturais - MVC, MVP e MVVM
Padrões Arquiteturais - MVC, MVP e MVVM
Aricelio Souza
 

Mais procurados (20)

Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
 
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptDesvendando a linguagem JavaScript
Desvendando a linguagem JavaScript
 
HTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no htmlHTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no html
 
Aula 1 - Programação Dinâmica para Web
Aula 1 - Programação Dinâmica para WebAula 1 - Programação Dinâmica para Web
Aula 1 - Programação Dinâmica para Web
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
 
Aula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHPAula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHP
 
Aula03 PHP - Estruturas Condicionais
Aula03 PHP - Estruturas CondicionaisAula03 PHP - Estruturas Condicionais
Aula03 PHP - Estruturas Condicionais
 
13 Java Script - Validação de formulário
13 Java Script  - Validação de formulário13 Java Script  - Validação de formulário
13 Java Script - Validação de formulário
 
PHP - Introdução
PHP - IntroduçãoPHP - Introdução
PHP - Introdução
 
Html
HtmlHtml
Html
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScript
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Plano de aula sobre HTML básico
Plano de aula sobre HTML básicoPlano de aula sobre HTML básico
Plano de aula sobre HTML básico
 
Python - Introdução
Python - IntroduçãoPython - Introdução
Python - Introdução
 
Aula 01 - JavaScript: Introdução
Aula 01 - JavaScript: IntroduçãoAula 01 - JavaScript: Introdução
Aula 01 - JavaScript: Introdução
 
Introdução ao SQL
Introdução ao SQLIntrodução ao SQL
Introdução ao SQL
 
Padrões Arquiteturais - MVC, MVP e MVVM
Padrões Arquiteturais - MVC, MVP e MVVMPadrões Arquiteturais - MVC, MVP e MVVM
Padrões Arquiteturais - MVC, MVP e MVVM
 
Aula 9 banco de dados
Aula 9   banco de dadosAula 9   banco de dados
Aula 9 banco de dados
 
Pseudocódigo ou Portugol (Lógica de Programação)
Pseudocódigo ou Portugol (Lógica de Programação)Pseudocódigo ou Portugol (Lógica de Programação)
Pseudocódigo ou Portugol (Lógica de Programação)
 

Destaque

80771551 linguagens-de-programacao-i-unisul-livro-completo-2010
80771551 linguagens-de-programacao-i-unisul-livro-completo-201080771551 linguagens-de-programacao-i-unisul-livro-completo-2010
80771551 linguagens-de-programacao-i-unisul-livro-completo-2010
Fernando Mendes
 
Los golpes de_un_campeón_del_mundo
Los golpes de_un_campeón_del_mundoLos golpes de_un_campeón_del_mundo
Los golpes de_un_campeón_del_mundo
Lola Arroyo
 
Consultoria em Processos de Produção
Consultoria em Processos de ProduçãoConsultoria em Processos de Produção
Consultoria em Processos de Produção
Taylor Aragão
 
Urls amigáveis - Como criar uma url perfeita
Urls amigáveis - Como criar uma url perfeitaUrls amigáveis - Como criar uma url perfeita
Urls amigáveis - Como criar uma url perfeita
Rodrigo Nogueira
 

Destaque (20)

HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
 
E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGNCSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
 
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
 
html5.ppt
html5.ppthtml5.ppt
html5.ppt
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
 
Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para 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
 
JS limpo e testável com Segregated DOM
JS limpo e testável com Segregated DOMJS limpo e testável com Segregated DOM
JS limpo e testável com Segregated DOM
 
The Appy Hour
The Appy HourThe Appy Hour
The Appy Hour
 
Apresentação - HTML5 e CSS3 Fabrica do Design
Apresentação - HTML5 e CSS3 Fabrica do DesignApresentação - HTML5 e CSS3 Fabrica do Design
Apresentação - HTML5 e CSS3 Fabrica do Design
 
80771551 linguagens-de-programacao-i-unisul-livro-completo-2010
80771551 linguagens-de-programacao-i-unisul-livro-completo-201080771551 linguagens-de-programacao-i-unisul-livro-completo-2010
80771551 linguagens-de-programacao-i-unisul-livro-completo-2010
 
Los golpes de_un_campeón_del_mundo
Los golpes de_un_campeón_del_mundoLos golpes de_un_campeón_del_mundo
Los golpes de_un_campeón_del_mundo
 
Consultoria em Processos de Produção
Consultoria em Processos de ProduçãoConsultoria em Processos de Produção
Consultoria em Processos de Produção
 
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
 
Urls amigáveis - Como criar uma url perfeita
Urls amigáveis - Como criar uma url perfeitaUrls amigáveis - Como criar uma url perfeita
Urls amigáveis - Como criar uma url perfeita
 
CSS3 e Html5 - O que há de novo / parte 1
CSS3 e Html5 - O que há de novo / parte 1CSS3 e Html5 - O que há de novo / parte 1
CSS3 e Html5 - O que há de novo / parte 1
 
Minicurso introdução ao html5 e css3
Minicurso introdução ao html5 e css3Minicurso introdução ao html5 e css3
Minicurso introdução ao html5 e css3
 

Semelhante a Desenvolvimento Web : HTML5, CSS3 & JavaScript

HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal
Clécio Bachini
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
thiagolima
 
Adobe flash platform bem 2009
 Adobe flash platform bem 2009 Adobe flash platform bem 2009
Adobe flash platform bem 2009
FabricioManzi
 

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

Campus Party 2011 html 5
Campus Party 2011 html 5Campus Party 2011 html 5
Campus Party 2011 html 5
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
 
HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012
 
HTML 5 e Open Web Platform
HTML 5 e Open Web PlatformHTML 5 e Open Web Platform
HTML 5 e Open Web Platform
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal
 
Road Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúRoad Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - Jaú
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec Cafelândia
 
HTML5
HTML5HTML5
HTML5
 
XHTML e CSS
XHTML e CSSXHTML e CSS
XHTML e CSS
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
 
Programação web e o front-end
Programação web e o front-endProgramação web e o front-end
Programação web e o front-end
 
Firefox - Developer's Best Friend // Fisl2008
Firefox - Developer's Best Friend // Fisl2008Firefox - Developer's Best Friend // Fisl2008
Firefox - Developer's Best Friend // Fisl2008
 
Dominando o Ionic Framework
Dominando o Ionic FrameworkDominando o Ionic Framework
Dominando o Ionic Framework
 
Desenvolvendo aplicações RIA - Marcel Araujo
Desenvolvendo aplicações RIA - Marcel AraujoDesenvolvendo aplicações RIA - Marcel Araujo
Desenvolvendo aplicações RIA - Marcel Araujo
 
SpugRIA
SpugRIASpugRIA
SpugRIA
 
Adobe flash platform bem 2009
 Adobe flash platform bem 2009 Adobe flash platform bem 2009
Adobe flash platform bem 2009
 
ASP.NET - Conhecendo um pouco do framework
ASP.NET - Conhecendo um pouco do frameworkASP.NET - Conhecendo um pouco do framework
ASP.NET - Conhecendo um pouco do framework
 
Web design e Programação front-end
Web design e Programação front-endWeb design e Programação front-end
Web design e Programação front-end
 
Desenvolvimento web com Software Livre
Desenvolvimento web com Software LivreDesenvolvimento web com Software Livre
Desenvolvimento web com Software Livre
 

Mais de Fábio Flatschart

Revolucões
 Revolucões Revolucões
Revolucões
Fábio Flatschart
 
Computação Gráfica : novos profissionais, novas ferramentas e novos mercados
Computação Gráfica : novos profissionais, novas ferramentas e novos mercadosComputação Gráfica : novos profissionais, novas ferramentas e novos mercados
Computação Gráfica : novos profissionais, novas ferramentas e novos mercados
Fábio Flatschart
 

Mais de Fábio Flatschart (20)

Empresas Virtuais
Empresas VirtuaisEmpresas Virtuais
Empresas Virtuais
 
Gestao de Midias Digitais
Gestao de Midias DigitaisGestao de Midias Digitais
Gestao de Midias Digitais
 
HTML5 e CSS3 : Por onde começar no mercado editorial ?
HTML5 e CSS3 : Por onde começar no mercado editorial ?HTML5 e CSS3 : Por onde começar no mercado editorial ?
HTML5 e CSS3 : Por onde começar no mercado editorial ?
 
Tecnologias Digitais
Tecnologias DigitaisTecnologias Digitais
Tecnologias Digitais
 
Direcao de Arte e Open Web Platform
Direcao de Arte e Open Web PlatformDirecao de Arte e Open Web Platform
Direcao de Arte e Open Web Platform
 
Empresas Digitais : Estrategias de Posicionamento
Empresas Digitais : Estrategias de PosicionamentoEmpresas Digitais : Estrategias de Posicionamento
Empresas Digitais : Estrategias de Posicionamento
 
SEO, Semantica e HTML5
SEO, Semantica e HTML5SEO, Semantica e HTML5
SEO, Semantica e HTML5
 
Mobile, Adobe & Cia
Mobile, Adobe & CiaMobile, Adobe & Cia
Mobile, Adobe & Cia
 
Mobile & Cia
Mobile & CiaMobile & Cia
Mobile & Cia
 
Fluxo de trabalho com Illustrator e Flash
Fluxo de trabalho com Illustrator e FlashFluxo de trabalho com Illustrator e Flash
Fluxo de trabalho com Illustrator e Flash
 
Grupo de estudos AS3 - Introdução ao ActionScript 3.0
Grupo de estudos AS3 - Introdução ao ActionScript 3.0Grupo de estudos AS3 - Introdução ao ActionScript 3.0
Grupo de estudos AS3 - Introdução ao ActionScript 3.0
 
Novos profissionais, novas ferramentas e novos mercados
Novos profissionais, novas ferramentas e novos mercadosNovos profissionais, novas ferramentas e novos mercados
Novos profissionais, novas ferramentas e novos mercados
 
E-consumidor
 E-consumidor E-consumidor
E-consumidor
 
Ebusiness
 Ebusiness Ebusiness
Ebusiness
 
Revolucões
 Revolucões Revolucões
Revolucões
 
Computação Gráfica : novos profissionais, novas ferramentas e novos mercados
Computação Gráfica : novos profissionais, novas ferramentas e novos mercadosComputação Gráfica : novos profissionais, novas ferramentas e novos mercados
Computação Gráfica : novos profissionais, novas ferramentas e novos mercados
 
Games e Interatividade
Games e InteratividadeGames e Interatividade
Games e Interatividade
 
Comunicação e Marketing na era da Interatividade
Comunicação e Marketing na era da InteratividadeComunicação e Marketing na era da Interatividade
Comunicação e Marketing na era da Interatividade
 
Produção Multimídia
Produção MultimídiaProdução Multimídia
Produção Multimídia
 
Trabalhando com Hipertexto
Trabalhando com HipertextoTrabalhando com Hipertexto
Trabalhando com Hipertexto
 

Desenvolvimento Web : HTML5, CSS3 & JavaScript

  • 1. 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
  • 2. 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 Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  • 3. 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 Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  • 4. 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 Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  • 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 Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  • 6. 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. Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  • 7. 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 Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  • 8. 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. Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  • 9. 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 Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  • 10. 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 Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  • 11. 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. Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  • 12. 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> Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  • 14. 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 Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  • 15. 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> Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  • 16. 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"> Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  • 17. 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 Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  • 18. CSS & JavaScript HTML5 HTML CSS APIs + JS <script src="externo.js"></script> <link rel="stylesheet" href="estilo.css"> Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  • 19. 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. Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  • 21. 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 Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  • 22. 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> Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  • 23. 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 Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  • 24. 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 Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  • 25. 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 Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  • 26. 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 Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  • 27. Geo Location API http://html5demos.com/geo Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  • 28. 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 Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  • 29. 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 Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011
  • 31. Muito obrigado ! flatschart.com quadrodosbemois.com.br @fabioflat Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011