html 5 - overview
DESCRIPTION
Uma breve descrição sobre o HTML 5 e suas principais características como: forms, a nova estrutura, aúdio e vídeo, etc. An overview about HTML 5 and its main features such as: forms, new structure, audio and video, etc.TRANSCRIPT
HTML 5Overview
Marcelio Leal - @marcelioleal
Marcelio Leal@marcelioleal - For twitters
http://marcelioleal.com - For other things
Software Engineer Chief at @onseePHP Pai d’Égua User Group cofounder
10 anos de experiência em Webdev
“PQP, finalmente “chegou” o HTML 5 !” Eu, depois que vi a primeira vez as
coisas do HTML 5...
HTMLHipertext Markup Language
Fácil Simples
Intuitiva
RápidaExtensível
What’s HTML5 ?
A nova versão do HTML
Sinônimo de coisa #estaile na Web.
Agentes• Web Hipertext Application Technology
Working Group (WHATWG) - whatwg.com• Criado em 2004 - Contribuidores individuais, Apple, Monzilla,
Google and Opera
• Aberto para contribuições
• Demos, APIs, Contribuições ligadas ao HTML
• World Wide Web Consortium (W3C)• Draft do HTML5 em 2008
Timeline - The Origin1991 - Tags(HTML) mensionadas
1993 - Draft HTML
1995 - HTML 2
1997 - HTML 3.2 (Jan), HTML 4 (Dec) - W3C
1999 - HTML 4.1 - recomendação W3C
2000 - XHTML 1.0#gambi ?
Timeline 2000
2001 - XHTML 1.1
Dreamweaver faz a festa
2001/2007 -W3C Sleeps
2004 - WHATWG starts Project Web Applications (HTML5 +-)
2008 - Draft HTML5 by W3C
2009 - W3C anuncia fim do grupo do XHTML
Web 2.0
Dreamweaver #farelo
Mudanças
SimplificaçõesDoctype
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<script src=”jacarato.js”></script>Type não necessário
<link href=”jacapaladium.js”></link>
Novidades✓article✓aside✓audio✓canvas✓command✓datagrid✓datalist✓datatemplate✓event-source✓figure
✓footer✓header✓mark✓meter✓nav✓output✓progress✓source✓time✓video
#farelo✓acronym✓applet✓basefont✓dir✓font✓s✓strike✓u✓big✓center
✓frame✓frameset✓noframes✓tt
Separation
PresentationContent
Old structure
New structure
Áudio e Vídeo
Audio element (OGG) :SRC, AUTOBUFFER, CONTROLS, LOOP, AUTOPLAY
Video element (OGV, MP4):SRC, CONTROLS, LOOP, AUTOPLAY
<video src=”tiririca.ogv” loop autoplay />
<audio src="gugu.ogg" autoplay controls></audio>
Old way<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"></embed></object>
New way<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer>
<p> Try this page in Safari 4! Or you can <a href="http://www.youtube.com/demo/google_main.mp4">download the video</a> instead.</p>
</video>
Simple is Better
Videos Format
• Ogg Theora / Voribs
• Firefox 3.5 + / Chrome / Opera
• MPEG-4 H.264/ACC
• Safari / Chrome / Opera
Controles Nativos
Quem mais ?
CSS 3
• Em desenvolvimento
• Está sendo desenvolvido em sub-especificações
• tranformation, animation, transition
• Esse caras ficam brincando com isso:
• http://www.zurb.com/playground
<form action="formdemo.php" method="post"> <label for="name">Name:</label> <input type="text" name="name" required placeholder="Name" /> <label for="email">Email:</label> <input type="email" name="email" required placeholder="[email protected]" />
<label for="website">Website:</label> <input type="url" name="website" required placeholder="http://www.example.com" />
<label for="number">Number:</label> <input type="number" name="number" min="0" max="10" step="2" required placeholder="Even num < 10">
<label for="range">Range:</label> <input type="range" name="range" min="0" max="10" step="2" />
...
Form
http://www.bradshawenterprises.com/tests/formdemo.php
CSS /* The interesting bit */ input:not(:focus), textarea:not(:focus) { opacity:0.5;} input:required, textarea:required { background:url("/tests/formdemo/asterisk_orange.png") no-repeat 280px 7px; }
input:valid, textarea:valid { background:url("/tests/formdemo/tick.png") no-repeat 280px 5px; }
input:focus:invalid, textarea:focus:invalid { background:url("/tests/formdemo/cancel.png") no-repeat 280px 7px; }
input[type=submit] { padding:10px; background:none; opacity:1.0; }
Input - New Types
• search
• tel
• url
• datetime
• date
• month
• week
• time
• datetime-local
• number
• range
• color
Form - Types
HTML5 Apps
Geolocation
Canvas<canvas id="myCanvas" width="300" height="150">Fallback content, in case the browser does not support Canvas.</canvas>
<script type="text/javascript"><!--window.addEventListener('load', function () { // Get the canvas element. var elem = document.getElementById('myCanvas'); if (!elem || !elem.getContext) { return; }
// Get the canvas 2d context. var context = elem.getContext('2d'); if (!context) { return; }
// Now you are done! Let's draw a blue rectangle. context.fillStyle = '#00f'; context.fillRect(0, 0, 150, 100);}, false); // --></script>
http://dev.opera.com/articles/view/html-5-canvas-the-basics/
Canvas e Maluquices
“The world is moving to HTML5”Steve Jobs
“I had no idea there was so much HTML5 already in play”
Tim O’Reilly
“The Web has not seen this level of transformation,this level of aceleration, in the past 10 years... we’re
betting big on HTML5”Vic Gundotra, Google
“The Web has not seen this level of transformation,this level of aceleration, in the past 10 years... we’re
betting big on HTML5”Vic Gundotra, Google
http://ishtml5readyyet.com/
http://caniuse.com/
Referências• WHATWG - HTML 5 - http://www.whatwg.org/specs/
• IETF - WebSocket http://tools.ietf.org/html/draft-hixie-thewebsocketprotocol-76
• W3C - HTML5 - http://dev.w3.org/html5/spec/Overview.html
• Blog - Vídeo/HTML5 - http://paulrouget.com/
• http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml
• http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-Cheat-Sheet.pdf
• CSS 3 -http://www.zurb.com/playground/
• http://www.slideshare.net/nathansmith/echo-html5
• Tag de Vídeo - http://html5doctor.com/the-video-element/
Imagens• http://www.flickr.com/photos/dricker94/4286899940/sizes/m/in/photostream/
• http://www.flickr.com/photos/simax/3390895249/sizes/m/in/photostream/
• http://www.flickr.com/photos/wwworks/3196112134/sizes/m/in/photostream/
• http://c.universalscraps.com/files/en/cool/cool_003.jpg
• http://fc05.deviantart.net/fs39/f/2008/357/8/b/Fractals_Are_Cool_by_Clarence_Garside.jpg
• http://3.bp.blogspot.com/_8Zmrc2HRYvU/SatKYx3WOnI/AAAAAAAAATE/bdL8D3UYclc/s400/carneirinho.jpg
• http://1.bp.blogspot.com/_WA6vC0pgjAY/Sb9BVmeN_xI/AAAAAAAAADc/rGkB897g_TE/s320/149033.jpg
• http://baiano.files.wordpress.com/2007/10/rene_higuita.jpg
• http://www.flickr.com/photos/svenwerk/541434909/sizes/m/in/photostream/
• http://www.flickr.com/photos/12905355@N05/4301184191/
• http://www.flickr.com/photos/improbulus/311039122/sizes/m/in/photostream/
• http://www.flickr.com/photos/niallkennedy/4166725591/sizes/m/in/photostream/
• http://sleepzine.com/wp-content/uploads/2007/03/google-girl-780952.jpg
Thank YouMarcelio Leal@marcelioleal
@onsee @phppaidegua