HTML5 - Road Show TI Experience 2012
Upcoming SlideShare
Loading in...5
×
 

HTML5 - Road Show TI Experience 2012

on

  • 2,696 views

De março a maio de 2012 mais de 30 unidades do Senac São Paulo na capital e interior recebem o ciclo gratuito de palestras Road Show TI Experience 2012. ...

De março a maio de 2012 mais de 30 unidades do Senac São Paulo na capital e interior recebem o ciclo gratuito de palestras Road Show TI Experience 2012.

O evento tem a proposta de apresentar o que há de mais novo e relevante no mundo da tecnologia da informação e no mercado de trabalho na área.

Nesta apresentação mostro como o HTML5 e suas tecnologias acessórias são a nova fronteira no projeto de aplicações WEB

Statistics

Views

Total Views
2,696
Views on SlideShare
2,691
Embed Views
5

Actions

Likes
12
Downloads
138
Comments
0

3 Embeds 5

http://www.linkedin.com 3
http://a0.twimg.com 1
https://twimg0-a.akamaihd.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 - Road Show TI Experience 2012 HTML5 - Road Show TI Experience 2012 Presentation Transcript

  • HTML 5Senac Consolação | Abril de 2012
  • flatschart.com
  • HTML5A nova fronteira no projeto de aplicações WEB flatschart.com
  • Fábio FlatschartGerente de Marketing e Inovação da Soyuz SistemasNo mercado WEB desde 1997, é consultor dedesenvolvimento e implantação de soluções e ferramentasda Adobe Systems Brasil.Autor e escritor técnico da Editora Brasport e daEditora SENAC/SPNo SENAC /SP atuou no atendimento corporativo eintermediação de parcerias com grandes empresas comoAdobe, Apple, Editora ABRIL, Microsoft, UOL e W3C.Certificado em HTML5 pelo W3C escritório Brasil.FGV MBA MarketingUSJT Criação Visual e MultimídiaUSP Escola de Comunicação e Artes flatschart.com
  • Conexões@fabioflatslideshare.net/fabioflatdelicio.us/fabioflatlinkedin.com/in/fabioflat flatschart.com
  • O HTML5 não é uma ruptura, é a continuidade e evolução do modeloconcebido por Tim Berners-Lee nos anos 1990INTRO flatschart.com
  • WEBArquitetura cliente < > servidorModelo de localização universalURL - Uniform Resource LocatorProtocolo de comunicaçãoHTTP - Hypertext Transfer ProtocolLinguagem de marcaçãoHTML - HyperText Markup LanguageDocumento estruturado na forma de hipertextoBrowser (navegador) como recurso de visualização do documento pelo cliente flatschart.com
  • Client SideA organização do desenvolvimento de projetos web em camadas independentesconfere flexibilidade e modularidade ao fluxo de trabalho para web integrandoequipes multidisciplinares de planejamento, produção, arquitetura da informação,design e programação. Marcação HTML Apresentação CSS Comportamento JavaScript flatschart.com
  • HTML1991 HTML1994 HTML 21996 CSS 1 + JavaScript1997 HTML 41998 CSS 22000 XHTML 12002 Tableless2005 AJAX2009 HTML 5 flatschart.com
  • HTML5O HTML 5 é especificação do W3C, ainda não concluída, que deve ser candidata a umarecomendação em 2012.Pelas características modulares do seu desenvolvimento, as empresas, fabricantes dosnavegadores, desenvolvedores, designers e usuários não necessitam aguardar aespecificação final da linguagem para colocá-la em uso.Esta nova especificação introduz novos elementos (tags) orientados para auxiliar nodesenvolvimento web baseado em padrões compatíveis com todos dispositivos, namarcação semântica do código, na manipulação de elementos do CSS e do JavaScriptatravés da definição de APIs da arquitetura Web.World Wide Web Consortium - Escritório Brasilhttp://www.w3c.br flatschart.com
  • APIsO HTML 5 aceita um conjunto de APIs que fortalece, integra e valoriza a camada dedesenvolvimento do lado do usuário (client side) através de aplicações que permitemgeolocalização, controle de áudio e vídeo, arrastar componentes (drag & drop),desenhar bitmaps (canvas), criar aplicações offline e outras. Marcação HTML Apresentação Comportamento APIs CSS JavaScript flatschart.com
  • APIsO HTML5 não é uma ruptura, é a continuidade e evolução do modelo concebido porTim Berners-Lee nos anos 1990 HTML5 HTML CSS APIs + JS flatschart.com
  • CompatibilidadeRenderizaçã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, SymbianA cada nova versão mais recursos são suportados e a concorrência entre osfabricantes é grande de maneira que quando um fabricante implementa umafuncionalidade é quase sempre seguido de perto pelos demais. flatschart.com
  • Compatibilidadehttp://html5test.comTesta e avalia a compatibilidade do seu browser com os elementos específicos doHTML5http://html5readiness.comMostra como o suporte ao HTML5 evoluiu de 2008 até hojehttp://caniuse.comExibe tabelas de compatibilidade para recursos de HTML5, CSS3, SVG e outrastecnologias web flatschart.com
  • Compatibilidade<head><!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--></head>O script acima é de Remy Sharp e está hospedado no Google Project Hosting .Você pode usá-lo livremente em seus projetos. flatschart.com
  • front end developer flatschart.com
  • front end developer flatschart.com
  • A simplicidade é o último grau de sofisticaçãoNOVIDADES flatschart.com
  • DoctypeHTML 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> flatschart.com
  • CharsetHTML 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"> flatschart.com
  • Estrutura básica<!DOCTYPE html><html lang="pt-br"><head><meta charset="utf-8"><title>Estrutura básica</title></head><body></body></html> flatschart.com
  • Saber o significado das palavras é essencial para o entendimento!SEMÂNTICA flatschart.com
  • Elementos estruturaisUmas das maiores novidades do HTML5 é a possibilidade de atribuir às diversasseções estuturais do documento um elemento próprio, nativo da linguagem. HTML4 / XHTML HTML5 <body> <body> <div id="topo"></div> <header></header> <div id="navegacao"></div> <nav></nav> <div id="principal"></div> <article></article> <div id="lateral"></div> <aside></aside> <div id="rodape"></div> <footer></footer> </body> </body> flatschart.com
  • Formulários <input type="email"> <input type="url"><input type="number"><input type="search"> <input type="range"> <input type="date"> <input type="week"> http://bit.ly/nrGXhw flatschart.com
  • O que eu ouço, esqueço. O que eu vejo, lembro. O que eu faço, aprendo.MULTIMÍDIA flatschart.com
  • CanvasO elemento canvas,novidade do HTML 5, permite que a informação para aconstrução de imagens baseadas em pixels seja inserida diretamente no código dodocumento.O elemento canvas apenas delimita em que local da tela isto acontece. O processode desenho é controlado por uma API específica para este elemento que interage comJavaScript.<canvas id="figura" width="300" height="300"></canvas><button onClick="desenhar()">Desenhar</button><script>function desenhar(){ var desenho = document.getElementById(figura); var context = desenho.getContext(2d); context.fillStyle = #00FFFF‘; context.fillRect(50,50,200, 200); }</script> http://bit.ly/nK6JCx flatschart.com
  • SVG<svg ><rect width="90" height="60" x="10" y="100"fill="#00FFCC" stroke="#FF0000" stroke-width="3" ></svg>No HTML5 o formato SVG (Scalable Vectorial Graphics) pode ser embutidodiretamente embutido no documento com o uso do elemento img<img src="imagens/rabisco.svg" alt="Rabisco em SVG">canvas bitmapsvg vetorhttp://bit.ly/rqqZuK flatschart.com
  • Áudio<audio src="mozart_trompa.mp3" controls></audio>Opção para vários formatos e opção de download do arquivo, visível quando obrowser do usuário não oferecer suporte para nenhum dos formatos indicados oupara o elemento audio.<audio controls><source src="mozart_trompa.aac"/><source src="mozart_trompa.ogg"/><source src="mozart_trompa.mp3"/><p>Baixe o arquivo<a href="mozart_trompa.mp3">.mp3</a></p></audio> http://bit.ly/nDeClI flatschart.com
  • VídeoA compatibilidade dos browsers ainda é problemática, mas existem váriasmaneiras de contornar esta questão como, por exemplo, usar formatosalternativos, indicar um link para download e incluir o uso do Flash Player para areprodução do vídeo.<video height="272" width="360" controls preload poster=“poster_video.jpg"><source src="videos/video.m4v"/><source src="videos/video.ogv"/><source src="videos/video.webm"/><p><a href="videos/video.m4v">Baixe o vídeo</a></p></video> http://bit.ly/oKtdlTContainer Vídeo Áudio SuporteMPEG4 H.264 AAC Chrome, Safari, IE9OGG Theora Vorbis Chrome, Firefox, OperaWebM VP8 Vorbis Chrome , Firefox, IE9, Opera flatschart.com
  • O HTML não é uma linguagem de programaçãoAPIS flatschart.com
  • APIs“O HTML não é uma linguagem de programação”Apesar desta afirmação soar estranha para muitos, sempre devemos lembrar de que oHTML é uma linguagem de marcação e de que sozinho ele não consegue formatar,manipular ou criar conteúdo. APIs Demo Web Storage http://slides.html5rocks.com/#web-storage Drag & Drop http://slides.html5rocks.com/#drag-and-drop Desktop Drag-In http://slides.html5rocks.com/#drag-in Desktop Drag-Out http://slides.html5rocks.com/#drag-out Geolocation http://slides.html5rocks.com/#geolocation Device Orientation http://slides.html5rocks.com/#slide-orientation Speech Input http://slides.html5rocks.com/#speech-input
  • O estilo está sob as palavras como dentro delas. É igualmente a alma e acarne de uma obraESTILO flatschart.com
  • CSS3@font-faceEfeitos de textoColunasCor e transparênciaBordasTransiçõesAnimaçõesMedia querieshttp://bit.ly/p4vtpShttp://slides.html5rocks.com/#css3-title flatschart.com
  • Mobile não é uma tecnologia é um estilo de vidaWEB APPS flatschart.com
  • flatschart.com
  • Aplicativos Mobile HTML5PlayboyFinancial TimesLinkedinZeewe flatschart.com
  • Mudança do fluxo de traballhoCASES flatschart.com
  • HTML5 APPsSoyuz SistemasMigração do fluxo de trabalho para produçãode apresentações em HTML5 para SistemaUNO Internacional do Grupo Santillana /Editora ModernaEnvolvimento e treinamento da equipeDesigners | DevelopersDo PSD ao CODE com semânticaCrossbrowserPermite distribuição para iOS e AndroidPermite empacotamento Adobe AIR (Webkit)Base para produção de futura ferramentacolaborativa flatschart.com
  • WEB GL e Visualização de dadosDashboard em tempo realmostrando a relação entre latitude,longitude e altura dos municípiosbrasileiros.Baseado em dados abertos, esta éuma experiência de visualização dedados utilizando Ajax e Processing.jscomo mecanismo para o gráfico emWebGL.http://labs.soyuz.com.br/dash/ flatschart.com
  • Mitos• HTML5 ainda não pode ser usado comercialmente• A maior mudança do HTML5 foi Vídeo, Áudio e Canvas• Objetivo do HTML5 é matar o Flash• HTML5 não faz diferença pra SEO/SEM• HTML5 tem falhas graves de segurança flatschart.com
  • OPEN WEB PLATFORM flatschart.com
  • Você é o que você compartilha LINKS E REFERÊNCIAS flatschart.com
  • Links e ReferênciasSoyuz Sistemashttp://www.soyuz.com.br/Livro HTML5 – Embarque Imediatohttp://flatschart.com/html5/HTML5 Doctor, helping you implement HTML5 todayhttp://html5doctor.com/ Adobe HTML5 and CSS3 development http://www.adobe.com/devnet/html5.htmlDIVE INTO HTML5http://diveintohtml5.org/ HTML5 and CSS3 - Adobe - The Expressive Web - Beta http://beta.theexpressiveweb.com/HTML5: Edition for Web Authorshttp://dev.w3.org/html5/spec-author-view/ Adobe Dreamweaver CS5.5 http://www.adobe.com/br/products/dreamweaver.htmlW3C Brasilhttp://www.w3c.br Adobe Labs http://labs.adobe.com/Curso de HTML5 do W3C Brasilhttp://www.w3c.br/Cursos/CursoHTML5Stickmanhttp://www.drawastickman.com/20 Lições - Google flatschart.comhttp://www.20thingsilearned.com/pt-BR
  • Fica a dica PUBLICAÇÕES flatschart.com
  • Publicaçõesflatschart.com
  • Novidades!http://www.facebook.com/Seofish flatschart.com
  • Muito obrigado ! @fabioflat fabioflat@gmail.com flatschart.com flatschart.com