SlideShare uma empresa Scribd logo
1 de 31
Baixar para ler offline
Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 
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 
APIs 
HTML 
Apresentação 
CSS 
Comportamento 
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

Mais conteúdo relacionado

Mais procurados

Adobe flash platform fabricio
Adobe flash platform fabricioAdobe flash platform fabricio
Adobe flash platform fabricio
FabricioManzi
 
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
Reinaldo Ferraz
 
Desenvolvimento de sites com xhtml e css nos
Desenvolvimento de sites com xhtml e css nosDesenvolvimento de sites com xhtml e css nos
Desenvolvimento de sites com xhtml e css nos
Vinicius Rocha Olivieri
 
TDC 2010 Floripa-SC SharePoint 2010: Novidades para os desenvolvedores .net
TDC 2010 Floripa-SC SharePoint 2010: Novidades para os desenvolvedores .netTDC 2010 Floripa-SC SharePoint 2010: Novidades para os desenvolvedores .net
TDC 2010 Floripa-SC SharePoint 2010: Novidades para os desenvolvedores .net
Fabian Gehrke
 
Silverlight no MIC Summer 2011
Silverlight no MIC Summer 2011 Silverlight no MIC Summer 2011
Silverlight no MIC Summer 2011
Felipe Pimentel
 
Visual basic apostila up vb6 para vbnet
Visual basic   apostila up vb6 para vbnetVisual basic   apostila up vb6 para vbnet
Visual basic apostila up vb6 para vbnet
robinhoct
 
Exchange Online with SharePoint - Improve Your App.
Exchange Online with SharePoint - Improve Your App.Exchange Online with SharePoint - Improve Your App.
Exchange Online with SharePoint - Improve Your App.
Joao Livio
 

Mais procurados (19)

Adobe flash platform fabricio
Adobe flash platform fabricioAdobe flash platform fabricio
Adobe flash platform fabricio
 
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
 
Desenvolvimento de sites com xhtml e css nos
Desenvolvimento de sites com xhtml e css nosDesenvolvimento de sites com xhtml e css nos
Desenvolvimento de sites com xhtml e css nos
 
TDC 2010 Floripa-SC SharePoint 2010: Novidades para os desenvolvedores .net
TDC 2010 Floripa-SC SharePoint 2010: Novidades para os desenvolvedores .netTDC 2010 Floripa-SC SharePoint 2010: Novidades para os desenvolvedores .net
TDC 2010 Floripa-SC SharePoint 2010: Novidades para os desenvolvedores .net
 
ARIA - Aplicações web ricas e acessíveis
ARIA - Aplicações web ricas e acessíveisARIA - Aplicações web ricas e acessíveis
ARIA - Aplicações web ricas e acessíveis
 
Aplicações Web Ricas e Acessíveis
Aplicações Web Ricas e AcessíveisAplicações Web Ricas e Acessíveis
Aplicações Web Ricas e Acessíveis
 
Rich Internet Applications
Rich Internet ApplicationsRich Internet Applications
Rich Internet Applications
 
Curriculo para Designer leonildo wagner - 08-2016
Curriculo para Designer  leonildo wagner - 08-2016 Curriculo para Designer  leonildo wagner - 08-2016
Curriculo para Designer leonildo wagner - 08-2016
 
Silverlight no MIC Summer 2011
Silverlight no MIC Summer 2011 Silverlight no MIC Summer 2011
Silverlight no MIC Summer 2011
 
Visual basic apostila up vb6 para vbnet
Visual basic   apostila up vb6 para vbnetVisual basic   apostila up vb6 para vbnet
Visual basic apostila up vb6 para vbnet
 
SharePoint 2010, Porque Adotar?
SharePoint 2010, Porque Adotar?SharePoint 2010, Porque Adotar?
SharePoint 2010, Porque Adotar?
 
CSS Básico para Webdesign
CSS Básico para WebdesignCSS Básico para Webdesign
CSS Básico para Webdesign
 
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
 
Customizando o SharePoint 2010
Customizando o SharePoint 2010Customizando o SharePoint 2010
Customizando o SharePoint 2010
 
XHTML e CSS
XHTML e CSSXHTML e CSS
XHTML e CSS
 
TDC 2011 Goiânia - Desenvolvendo a Integração do Windows Azure e SharePoint 2010
TDC 2011 Goiânia - Desenvolvendo a Integração do Windows Azure e SharePoint 2010TDC 2011 Goiânia - Desenvolvendo a Integração do Windows Azure e SharePoint 2010
TDC 2011 Goiânia - Desenvolvendo a Integração do Windows Azure e SharePoint 2010
 
Exchange Online with SharePoint - Improve Your App.
Exchange Online with SharePoint - Improve Your App.Exchange Online with SharePoint - Improve Your App.
Exchange Online with SharePoint - Improve Your App.
 
HTML5 - (01) Visão Geral do HTML5
HTML5 - (01) Visão Geral do HTML5HTML5 - (01) Visão Geral do HTML5
HTML5 - (01) Visão Geral do HTML5
 
Profissão Front-end
Profissão Front-endProfissão Front-end
Profissão Front-end
 

Destaque (11)

Caminando juntos por la infancia
Caminando juntos por la infanciaCaminando juntos por la infancia
Caminando juntos por la infancia
 
Diploma of teaching
Diploma of teachingDiploma of teaching
Diploma of teaching
 
Tarea 1
Tarea 1Tarea 1
Tarea 1
 
Bachelors
BachelorsBachelors
Bachelors
 
Diaspositivas para entregar
Diaspositivas para entregarDiaspositivas para entregar
Diaspositivas para entregar
 
Power point de las tic en las esc arg
Power point de las tic en las esc argPower point de las tic en las esc arg
Power point de las tic en las esc arg
 
How to set a custom sound for an android notification
How to set a custom sound for an android notificationHow to set a custom sound for an android notification
How to set a custom sound for an android notification
 
As Melhores Hidratações do Blog
As Melhores Hidratações do BlogAs Melhores Hidratações do Blog
As Melhores Hidratações do Blog
 
Lograr el éxito
Lograr el éxitoLograr el éxito
Lograr el éxito
 
Brochure proxanil 2016
Brochure proxanil 2016Brochure proxanil 2016
Brochure proxanil 2016
 
Modelos administrativos 13991558
Modelos administrativos 13991558Modelos administrativos 13991558
Modelos administrativos 13991558
 

Semelhante a Campus Party 2011 html 5

Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
thiagolima
 
Palestra urutai-mobile
Palestra urutai-mobilePalestra urutai-mobile
Palestra urutai-mobile
Rogerio Fontes
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
Rodrigo Rodrigues
 

Semelhante a Campus Party 2011 html 5 (20)

Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScript
 
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
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Firefox - Developer's Best Friend // Fisl2008
Firefox - Developer's Best Friend // Fisl2008Firefox - Developer's Best Friend // Fisl2008
Firefox - Developer's Best Friend // Fisl2008
 
E-Book de estudos
E-Book de estudosE-Book de estudos
E-Book de estudos
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
 
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...
 
HTML5 - O Futuro da web
HTML5 - O Futuro da webHTML5 - O Futuro da web
HTML5 - O Futuro da web
 
HTML5
HTML5HTML5
HTML5
 
Html5 ass
Html5 assHtml5 ass
Html5 ass
 
Dominando o Ionic Framework
Dominando o Ionic FrameworkDominando o Ionic Framework
Dominando o Ionic Framework
 
HTML 5, CSS 3 e o futuro da Web
HTML 5, CSS 3 e o futuro da WebHTML 5, CSS 3 e o futuro da Web
HTML 5, CSS 3 e o futuro da Web
 
Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aula
 
Palestra urutai-mobile
Palestra urutai-mobilePalestra urutai-mobile
Palestra urutai-mobile
 
Drupal 8: desenvolvendo fora da ilha
Drupal 8: desenvolvendo fora da ilhaDrupal 8: desenvolvendo fora da ilha
Drupal 8: desenvolvendo fora da ilha
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
 
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
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
Palestra html5 e CSS3
Palestra html5 e CSS3Palestra html5 e CSS3
Palestra html5 e CSS3
 

Mais de Danilo Sousa (11)

Sass - Tutorial
Sass - TutorialSass - Tutorial
Sass - Tutorial
 
Templates js-
Templates js-Templates js-
Templates js-
 
jquery examples
jquery examplesjquery examples
jquery examples
 
VISUAL CHEAT SHEET
VISUAL CHEAT SHEETVISUAL CHEAT SHEET
VISUAL CHEAT SHEET
 
Iniciando com jquery
Iniciando com jqueryIniciando com jquery
Iniciando com jquery
 
Iniciando com Jquery
Iniciando com JqueryIniciando com Jquery
Iniciando com Jquery
 
JQUERY CONF 2011Gwt kenjiyamamoto-111220113950-phpapp01
JQUERY CONF 2011Gwt kenjiyamamoto-111220113950-phpapp01JQUERY CONF 2011Gwt kenjiyamamoto-111220113950-phpapp01
JQUERY CONF 2011Gwt kenjiyamamoto-111220113950-phpapp01
 
Ninja html 5 css javascript
Ninja html 5 css javascriptNinja html 5 css javascript
Ninja html 5 css javascript
 
Alta produtividade com front end com sass e compass
Alta produtividade com front end com sass e compassAlta produtividade com front end com sass e compass
Alta produtividade com front end com sass e compass
 
CSS 3 Overview
CSS 3 OverviewCSS 3 Overview
CSS 3 Overview
 
Ux para agencias de publicidade
Ux para agencias de publicidade Ux para agencias de publicidade
Ux para agencias de publicidade
 

Último

Último (8)

Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPalestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
 
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINASCOI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
 
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docxATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
 
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdfAula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
 
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docxATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
 
Entrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiEntrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo Pagliusi
 
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docxATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
 
Convergência TO e TI nas Usinas - Setor Sucroenergético
Convergência TO e TI nas Usinas - Setor SucroenergéticoConvergência TO e TI nas Usinas - Setor Sucroenergético
Convergência TO e TI nas Usinas - Setor Sucroenergético
 

Campus Party 2011 html 5

  • 1. Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 Campus Party 2011 Desenvolvimento Web : HTML5, CSS3 & JavaScript Fábio Flatschart Estande do Senac – Zona Expo 13 | Campus Party 2011 | Janeiro 2011
  • 2. 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
  • 3. 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
  • 4. 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
  • 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
  • 6. 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.
  • 7. 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
  • 8. 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.
  • 9. 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 APIs HTML Apresentação CSS Comportamento JavaScript
  • 10. 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
  • 11. 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.
  • 12. 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>
  • 13. 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>
  • 14. 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
  • 15. 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>
  • 16. 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">
  • 17. 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
  • 18. 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">
  • 19. 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.
  • 20. 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
  • 21. 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
  • 22. 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>
  • 23. 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
  • 24. 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
  • 25. 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
  • 26. 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
  • 27. Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 Geo Location API http://html5demos.com/geo
  • 28. 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
  • 29. 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
  • 30. 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
  • 31. Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fábio Flatschart - Campus Party 2011 Muito obrigado ! flatschart.com quadrodosbemois.com.br @fabioflat