• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML 5 e Open Web Platform
 

HTML 5 e Open Web Platform

on

  • 733 views

Palestra apresentada por Fábio Flatschart na VI Semana de Tecnologia da Fatec de Carapicuíba.

Palestra apresentada por Fábio Flatschart na VI Semana de Tecnologia da Fatec de Carapicuíba.

Statistics

Views

Total Views
733
Views on SlideShare
733
Embed Views
0

Actions

Likes
1
Downloads
27
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

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

    HTML 5 e Open Web Platform HTML 5 e Open Web Platform Presentation Transcript

    • flatschart.com
    • flatschart.com
    • HTML5A nova fronteira no desenvolvimento de aplicações WEB flatschart.com
    • Fábio FlatschartGerente de Marketing e Inovação da Soyuz.Sócio Diretor da Flatschart Consultoria.Professor do MBA em Marketing Digital da FGV e doMBA em Marketing, Consumo e Mídia Online da Trevisan.Autor da Editora Brasport e Colunista do Portal iMasters.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
    • 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
    • OPEN WEB PLATFORMOpen Web Platform ( Plataforma Aberta da Web ), é acoleção de tecnologias abertas (royalty-free) da web.Utilizando a Plataforma Aberta da Web , todos podemimplementar componentes de software na Web sem anecessidade de qualquer aprovação ou taxas de licença.• Semantics• Offline & Storage• Device Access• Connectivity• Multimedia• 3D, Graphics & Effects• Performance & Integration• CSS3 flatschart.com
    • OPEN WEB PLATFORMPackaged Web Apps (Widgets)Games, Anúncios, Displays Interativos, Mashups... flatschart.com
    • ePUB3EPUB 3 Structural Semantics Vocabulary flatschart.com
    • CASES flatschart.com
    • CasesMigração do fluxo de trabalho para produçãode apresentações em HTML5 para Sistema UNOInternacional do Grupo Santillana / EditoraModernaEnvolvimento e treinamento da equipeDesigners | DevelopersDo Photoshop ao CODE com semânticaCrossbrowserPermite distribuição para iOS e AndroidBase 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
    • Aplicativos HíbridosPrateleira de livros da Editora Moderna produzida pela Soyuz flatschart.com
    • GamesGame da Soyuz para o W3C flatschart.com
    • #ficaadica PUBLICAÇÕES flatschart.com
    • Publicaçõesflatschart.com
    • LINKS E REFERÊNCIAS flatschart.com
    • Links e ReferênciasLivro HTML5 – Embarque Imediatohttp://flatschart.com/html5/HTML5 Doctor, helping you implement HTML5 todayhttp://html5doctor.com/DIVE INTO HTML5http://diveintohtml5.org/HTML5: Edition for Web Authorshttp://dev.w3.org/html5/spec-author-view/W3C Brasilhttp://www.w3c.brCurso de HTML5 do W3C Brasilhttp://www.w3c.br/Cursos/CursoHTML5Stickmanhttp://www.drawastickman.com/20 Lições - Googlehttp://www.20thingsilearned.com/pt-BR flatschart.com
    • Muito obrigado ! @fabioflat fabioflat@gmail.com flatschart.com flatschart.com