Desenvolvimento Web : HTML5, CSS3 & JavaScript

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

Fbio Flatschart Consultor Educacional da Adobe Systems do Brasil. Consultor das reas de Internet e Computao Grfica da Gerncia de Desenvolvimento (GD2) do SENAC/SP na produo de eventos, novas parcerias e desenvolvimento de cursos livres, de nvel mdio, superior e de ps-graduao. Autor e escritor tcnico (Editora Brasport e Editora SENAC/SP). Professor da UNIFMU

WEB Arquitetura cliente < > servidor Modelo de localizao universal - URL (Uniform Resource Locator) Protocolo de comunicao - HTTP (Hypertext Transfer Protocol) Linguagem de marcao - HTML (HyperText Markup Language) Documento estruturado na forma de hipertexto Browser (navegador) como recurso de visualizao 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 colaborao entre o W3C e WHATWG e sua especificao, ainda no concluda, deve ser candidata a uma recomendao do W3C em 2012. Pelas caractersticas modulares do seu desenvolvimento, as empresas, fabricantes dos navegadores, desenvolvedores, designers e usurios no necessitam aguardar a especificao final da linguagem para coloc-la em uso. W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology Working Group

HTML5 Esta especificao introduz novas tags orientadas para auxiliar no desenvolvimento web baseado em padres compatveis com todos dispositivos, na marcao semntica do cdigo, na manipulao de elementos do CSS e do JavaScript atravs da definio de APIs da arquitetura Web e na alternativa ao uso de aplicativos externos.

Client Side A organizao do desenvolvimento de projetos web em camadas independentes confere flexibilidade e modularidade ao fluxo de trabalho para web integrando equipes multidisciplinares de planejamento, produo, arquitetura da informao, design e programao.
Marcao HTML
Apresentao CSS
Comportamento JavaScript

APIs Uma API (Application Programming Interface) uma interface que permite a interao entre os softwares facilitando sua integrao de maneira semelhante uma interface que auxilia na comunicao entre ns, usurios, 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 usurio (client side) atravs de aplicaes que permitem geolocalizao, controle de udio e vdeo, arrastar componentes (drag & drop), desenhar bitmaps (canvas) e criar aplicaes offline entre outras.
Marcao
APIs HTML
Apresentao CSS
Comportamento JavaScript

Compatibilidade Renderizao 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 verso mais recursos so suportados e a concorrncia entre os fabricantes grande de maneira que quando um fabricante implementa uma funcionalidade quase sempre seguido de perto pelos demais.

Compatibilidade article, footer, header, hgroup, nav {display: block;} document.createElement("article"); document.createElement("footer"); document.createElement("header"); document.createElement("hgroup"); document.createElement("nav");

Compatibilidade

Compatiblidade
http://html5test.com Testa e avalia a compatibilidade do seu browser com os elementos especficos 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 XHTML 1.0 HTML5

HTML5 - Charset HTML 4.01 XHTML 1.0 HTML5

Estrutura bsica HTML5 - Estrutura bsica http://flatschart.com/html5/basico.html
http://flatschart.com/html5/basico.html

CSS & JavaScript
HTML5 HTML CSS APIs + JS

Estrutura Semntica Umas das maiores novidades do HTML5 a possibilidade de atribuir s diversas sees estuturais do documento um elemento prprio, nativo da linguagem. Os designers e desenvolvedores podem agora utilizar estes novos elementos do HTML5 para identificar o cabealho, o rodap, a barra de navegao e outras sees que antes eram marcadas como um elemento genrico sem valor semntico especfico atravs da utilizao do elemento div.

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

Formulrios No quesito formulrio, o HTML5 trouxe grandes avanos, entre eles tipos especficos de entrada de dados, controle de datas, validao e formatao de campos. Nesta rea, o OPERA quem lidera o ranking de compatibilidade. autofocus | placeholder http://flatschart.com/html5/formulario_estados2.html

Vdeo A compatibilidade dos browsers ainda problemtica, mas existem vrias maneiras de contornar esta questo 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 reproduo do vdeo.

Vdeo
Container Vdeo 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
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 http://flatschart.com/html5/svg.html
http://flatschart.com/html5/svg.html

CSS3 radius shadow opacidade(RGBA) media queries criao de mltiplas colunas de texto fontes
http://flatschart.com/html5/teste_css3.html http://flatschart.com/html5/citrus
http://flatschart.com/html5/teste_css3.htmlhttp://flatschart.com/html5/citrus/

Canvas API canvas bitmap svg vetor http://html5demos.com/canvas-grad http://flatschart.com/html5/canvas_simples.html
http://html5demos.com/canvas-gradhttp://flatschart.com/html5/canvas_simples.html

Geo Location API
http://html5demos.com/geo
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 implement

Desenvolvimento Web : HTML5, CSS3 & JavaScript

Documents

Transcript of Desenvolvimento Web : HTML5, CSS3 & JavaScript

Web Development with HTML5, CSS3 & JavaScript

El gran-libro-de-html5-css3-y-javascript

Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript

Html5 css3 javascript

Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript

El Gran Libro de HTML5, CSS3 y Javascript

Building Web Applications with HTML5, CSS3, and Javascript:

El gran libro de HTML5,CSS3,Javascript

Curso de Html5 CSS3 Javascript

HTML5 + CSS3 + JAVASCRIPT

Great experiences with standard technologies HTML5, CSS3, JavaScript,

Storytelling using Javascript HTML5 CSS3

HTML5 and CSS3 More JavaScript Page 1 - Prof. and CSS3 More HTML5 and CSS3¢â‚¬â€‌More JavaScript

HTML5 CSS3 Javascript the Future of Web Technology

Curso de HTML5, JavaScript y CSS3 Modulo1 Transparencias

Building Web Applications with HTML5, CSS3, and Javascript jason/talks/lita-html5-javascript.pdf · PDF file HTML5, CSS3, and Javascript: An Introduction to HTML5 Jason Clark Head

Website creation with html5 css3 and javascript

FELIPE MASSONE EL GRAN LIBRO HTML5 CSS3 JAVASCRIPT

6. HTML5 CSS3 JavaScript-libre

HTML5, CSS3 und JavaScript f¼r alle