Desenvolvimento Web : HTML5, CSS3 & JavaScript

Click here to load reader

  • date post

    18-Dec-2014
  • Category

    Documents

  • view

    14.395
  • download

    6

Embed Size (px)

description

Quais são os desafios e as oportunidades que essa tecnologia vai propiciar, qual é o impacto no desenvolvimento para internet e como a Adobe pode auxiliá-los a usufruir aos máximos dos benefícios do HTML 5 e suas linguagens parceiras (CSS e Java Script)

Transcript of 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

  • Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fbio Flatschart - Campus Party 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

  • Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fbio Flatschart - Campus Party 2011

    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

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

    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

  • Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fbio Flatschart - Campus Party 2011

    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.

  • Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fbio Flatschart - Campus Party 2011

    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

  • Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fbio Flatschart - Campus Party 2011

    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.

  • Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fbio 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 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

  • Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fbio Flatschart - Campus Party 2011

    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

  • Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fbio Flatschart - Campus Party 2011

    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.

  • Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fbio Flatschart - Campus Party 2011

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

  • Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fbio Flatschart - Campus Party 2011

    Compatibilidade

  • Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fbio Flatschart - Campus Party 2011

    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

  • Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fbio Flatschart - Campus Party 2011

    HTML5 - DOCTYPE

    HTML 4.01 XHTML 1.0 HTML5

  • Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fbio Flatschart - Campus Party 2011

    HTML5 - Charset HTML 4.01 XHTML 1.0 HTML5

  • Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fbio Flatschart - Campus Party 2011

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

    http://flatschart.com/html5/basico.html
  • Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fbio Flatschart - Campus Party 2011

    CSS & JavaScript

    HTML5 HTML CSS APIs + JS

  • Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fbio Flatschart - Campus Party 2011

    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.

  • Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fbio Flatschart - Campus Party 2011

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

    http://flatschart.com/html5/layout.html
  • Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fbio Flatschart - Campus Party 2011

    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

  • Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fbio Flatschart - Campus Party 2011

    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.

  • Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fbio Flatschart - Campus Party 2011

    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
  • Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fbio 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 http://flatschart.com/html5/svg.html

    http://flatschart.com/html5/svg.html
  • Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fbio Flatschart - Campus Party 2011

    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/
  • Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fbio Flatschart - Campus Party 2011

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

    Geo Location API

    http://html5demos.com/geo

    http://html5demos.com/geo
  • Desenvolvimento Web : HTML5, CSS3 & JavaScript - Fbio 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 implement