of 44 /44
HTML 5 Overview Marcelio Leal - @marcelioleal

HTML 5 - Overview

Embed Size (px)

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.

Text of HTML 5 - Overview

Page 1: HTML 5 - Overview

HTML 5Overview

Marcelio Leal - @marcelioleal

Page 2: HTML 5 - Overview

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

Page 3: HTML 5 - Overview

“PQP, finalmente “chegou” o HTML 5 !” Eu, depois que vi a primeira vez as

coisas do HTML 5...

Page 4: HTML 5 - Overview

HTMLHipertext Markup Language

Fácil Simples

Intuitiva

RápidaExtensível

Page 5: HTML 5 - Overview

What’s HTML5 ?

A nova versão do HTML

Sinônimo de coisa #estaile na Web.

Page 6: HTML 5 - Overview

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

Page 7: HTML 5 - Overview

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 ?

Page 8: HTML 5 - Overview

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

Page 9: HTML 5 - Overview

Mudanças

Page 10: HTML 5 - Overview

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>

Page 11: HTML 5 - Overview

Novidades✓article✓aside✓audio✓canvas✓command✓datagrid✓datalist✓datatemplate✓event-source✓figure

✓footer✓header✓mark✓meter✓nav✓output✓progress✓source✓time✓video

Page 12: HTML 5 - Overview

#farelo✓acronym✓applet✓basefont✓dir✓font✓s✓strike✓u✓big✓center

✓frame✓frameset✓noframes✓tt

Page 13: HTML 5 - Overview

Separation

PresentationContent

Page 14: HTML 5 - Overview

Old structure

Page 15: HTML 5 - Overview

New structure

Page 16: HTML 5 - Overview

Á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>

Page 17: HTML 5 - Overview

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>

Page 18: HTML 5 - Overview

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>

Page 19: HTML 5 - Overview

Simple is Better

Page 20: HTML 5 - Overview

Videos Format

• Ogg Theora / Voribs

• Firefox 3.5 + / Chrome / Opera

• MPEG-4 H.264/ACC

• Safari / Chrome / Opera

Page 21: HTML 5 - Overview

Controles Nativos

Page 22: HTML 5 - Overview
Page 23: HTML 5 - Overview

Quem mais ?

Page 24: HTML 5 - Overview

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

Page 25: HTML 5 - Overview
Page 26: HTML 5 - Overview
Page 27: HTML 5 - Overview
Page 28: HTML 5 - Overview

<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

Page 29: HTML 5 - Overview

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; }

Page 30: HTML 5 - Overview

Input - New Types

• search

• tel

• url

• email

• datetime

• date

• month

• week

• time

• datetime-local

• number

• range

• color

Page 31: HTML 5 - Overview

Form - Types

Page 32: HTML 5 - Overview

HTML5 Apps

Page 33: HTML 5 - Overview

Geolocation

Page 34: HTML 5 - Overview

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/

Page 35: HTML 5 - Overview

Canvas e Maluquices

Page 36: HTML 5 - Overview

“The world is moving to HTML5”Steve Jobs

Page 37: HTML 5 - Overview

“I had no idea there was so much HTML5 already in play”

Tim O’Reilly

Page 38: HTML 5 - Overview

“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

Page 39: HTML 5 - Overview

“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

Page 40: HTML 5 - Overview

http://ishtml5readyyet.com/

http://caniuse.com/

Page 41: HTML 5 - Overview

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/

Page 42: HTML 5 - Overview
Page 43: HTML 5 - Overview

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

Page 44: HTML 5 - Overview

Thank YouMarcelio Leal@marcelioleal

[email protected]

@onsee @phppaidegua