Your SlideShare is downloading. ×

Html5 Overview

1,363
views

Published on

An quick Overview of HTML5 changes.

An quick Overview of HTML5 changes.

Published in: Education

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,363
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5
    Overview
  • 2. Agentes
    Timeline
    Simplificações
    Novidades
    Tags Mantidas
    Estrutura
    Estrutura Antiga
    Nova Estrutura
    Tópicos da Apresentação
  • 3. Tecnologias
    Class: Semantics
    Class: Offline & Storage
    Class: Device Access
    Class: Connectivity
    Class: Multimedia
    Class: 3D, Graphics& Effects
    Class: Performance & Integration
    Class: CSS 3
    Tópicos da Apresentação
  • 4. Compatibilidade
    Opiniões
    Referências
    Imagens
    Tópicos da Apresentação
  • 5. Web HipertextApplication Technology WorkingGroup (WHATWG) - http://www.whatwg.org/
    Criado em 2004 – Contribuidores individuais: Apple, Mozilla, Google e Opera
    Aberto para Contribuições
    Demos, APIS, Contribuições ligadas ao HTML
    World Wide Web Consortion (W3C) - http://www.w3.org/
    Draft do HTML5 em 2008
    Agentes
  • 6. 1991 – Tags (HTML) mencionadas
    1993 – Draft HTML
    1995 – HTML 2
    1997 – W3C
    HTML 3.2 (Janeiro)
    HTML 4 (Dezembro)
    1999 – HTML 4.1 – recomendação W3C
    2000 – XHTML 1.0
    Timeline
  • 7. 2001 – XHTML 1.1
    2001/2007 – W3C “Sleeps”
    2004 – WATWG inicia Project Web Applications (HTML5)
    2008 – Draft HTML5 pela W3C
    2009 – W3C anuncia fim do grupo XHTML
    Timeline
  • 8. Doctype
    <!DOCTYPE html>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    Type não necessário
    <scriptsrc="myscript.js"></script>
    <linkhref="myapp.js"></link>
    Simplificações
  • 9. Novidades
    article
    aside
    audio
    canvas
    command
    datagrid
    datalist
    datatemplate
    event-source
    figure
    footer
    header
    mark
    meter
    nav
    output
    progress
    source
    time
    video
  • 10. Tags Mantidas
    acronym
    applet
    basefont
    dir
    font
    s
    strike
    u
    big
    center
    frame
    frameset
    noframes
    tt
  • 11. Estrutura
  • 12. Estrutura antiga
  • 13. Estrutura Nova
  • 14. Givingmeaningtostructure, semantics are front and center with HTML5. A richer set oftags, alongwithRDFa, microdata, andmicroformats, are enabling a more useful, data driven web for bothprogramsandyourusers.
    Class: Semantics
  • 15. HTML5 appscan start faster, andworkevenifthereis no internet connection, thankstotheApp Cache, Local Storage, Indexed DB, andthe File APIs.
    Class: Offline & Storage
  • 16. Withgeo-locationjustthebeginning, HTML5 will help appstoaccessdevicesoutsideofyour browser andconnectedtoyourcomputer.
    Class: Device Access
  • 17. Class: Device Access
  • 18. More efficientconnectivitymeans more real-time chats, faster games, andbetter communication. Web Sockets and Server-SentEvents are pushing (punintended) data betweenclientand server more efficientlythaneverbefore.
    Class: Connectivity
  • 19. Audioandvideo are firstclasscitizens in the HTML5 web, living in harmonywithyourappsand sites. Lights, camera, action!
    Class: Multimedia
  • 20. Audioelement (OGG): SRC, AUTOBUFFER, CONTROLS, LOOP, AUTOPLAY
    <audiosrc="music.ogg"autoplaycontrols></audio>
    Videoelement (OGV, MP4): SRC, CONTROLS, LOOP, AUTOPLAY
    <videosrc="video.ogv" loop autoplay />
    Áudio e Vídeo
  • 21. <objectclassid="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">
    <paramname="allowFullScreen"value="true" />
    <paramname="allowscriptaccess"value="always" />
    <paramname="src"value="http://www.youtube.com/v/7r1_ePcl3aM&amp;hl=en&amp;fs=1&amp;" />
    <paramname="allowfullscreen"value="true" />
    <embedtype="application/x-shockwave-flash"width="425"height="344"src="http://www.youtube.com/v/7r1_ePcl3aM&amp;hl=en&amp;fs=1&amp;"allowscriptaccess="always"allowfullscreen="true”></embed>
    </object>
    Áudio e Vídeo
  • 22. <objectclassid="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">
    <paramname="allowFullScreen"value="true" />
    <paramname="allowscriptaccess"value="always" />
    <paramname="src"value="http://www.youtube.com/v/7r1_ePcl3aM&amp;hl=en&amp;fs=1&amp;" />
    <paramname="allowfullscreen"value="true" />
    <embedtype="application/x-shockwave-flash"width="425"height="344"src="http://www.youtube.com/v/7r1_ePcl3aM&amp;hl=en&amp;fs=1&amp;"allowscriptaccess="always"allowfullscreen="true”></embed>
    </object>
    Áudio e Vídeo
  • 23. <videowidth="640"height="360"src="http://www.youtube.com/demo/google_main.mp4"controlsautobuffer>
    <p>Trythispage in Safari 4! Oryoucan<ahref="http://www.youtube.com/demo/google_main.mp4">download thevideo</a>instead.</p>
    </video>
    Class: Multimedia
  • 24. OggTheora/Vorbis
    Firefox 3.5+
    Chrome
    Opera
    MPEG-4 H.264/ACC
    Safari
    Chrome
    Opera
    Formatos de Vídeo
  • 25. Controles Nativos
  • 26. Player HTML5
    http://sublimevideo.net/
  • 27. Between SVG, Canvas, WebGL, and CSS3 3D features, you'resuretoamazeyouruserswithstunningvisualsnativelyrendered in the browser.
    Class: 3D, Graphics & Effects
  • 28. Canvas
    <canvas id="myCanvas"width="300"height="150">Your browser does nothavesupportfor Canvas.</canvas>
    <scripttype="text/javascript"><!--
    window.addEventListener('load', function () {
    // Getthecanvaselement.
    varelem = document.getElementById('myCanvas');
    if (!elem || !elem.getContext) {
    return;
    }
    // Get the canvas 2d context.
    var context = elem.getContext('2d');
    if (!context) {
    return;
    }
    http://dev.opera.com/articles/view/html-5-canvas-the-basics/
  • 29. Canvas
    context.fillStyle= '#00f'; // blue
    context.strokeStyle = '#f00'; // red
    context.lineWidth = 4;
    // Draw some rectangles.
    // Arguments: x, y, width, height
    context.fillRect (0, 0, 150, 50);
    context.strokeRect(0, 60, 150, 50);
    context.clearRect (30, 25, 90, 60);
    context.strokeRect(30, 25, 90, 60);
    }, false);
    // --></script>
    http://dev.opera.com/articles/view/html-5-canvas-the-basics/
  • 30. Canvas
    Aplicações - Exemplo
    Newton Polinomial - http://www.benjoffe.com/code/demos/interpolate/
    BlobSallad - http://www.blobsallad.se/
    Star-Field flight - http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html
    3D Walker - http://www.benjoffe.com/code/demos/canvascape/
    paintWeb- http://code.google.com/p/paintweb/
  • 31. Makeyour web app, andthe web, fasterwith a varietyoftechniquesandtechnologiessuch as Web WorkersandXMLHttpRequest 2. No usershalleverwaitonyourwatch.
    Class: Performance & Integration
  • 32. CSS3 delivers a wide range ofstylizationandeffects, enhancingthe web appwithoutsacrificingyoursemanticstructureor performance. Additionally Web Open FontFormat (WOFF) providestypographicflexibilityandcontrolfarbeyondanythingthe web hasofferedbefore.
    Class: CSS 3
  • 33. Em desenvolvimento
    Está sendo desenvolvido em sub-especificações
    transformation
    animation
    transition
    Exemplo do que pode ser feito com CSS 3:
    http://www.zurb.com/playground
    Class: CSS 3
  • 34. Class: CSS 3
  • 35. Class: CSS 3
  • 36. Class: CSS 3
  • 37. Form Demo
    <formaction="formdemo.php"method="post">
    <label for="name">Name:</label>
    <inputtype="text"name="name"requiredplaceholder="Name" />
    <label for="email">Email:</label>
    <inputtype="email"name="email"requiredplaceholder="email@example.com" />
    <label for="website">Website:</label>
    <inputtype="url"name="website"requiredplaceholder="http://www.example.com" />
    <label for="number">Number:</label>
    <inputtype="number"name="number" min="0"max="10"step="2"requiredplaceholder="Even num < 10">
    <label for="range">Range:</label>
    <inputtype="range"name="range" min="0"max="10"step="2" />
    <label for="message">Message:</label>
    <textareaname="message"required></textarea>
    <inputtype="submit"value="SendMessage" />
    </form>
    http://www.bradshawenterprises.com/tests/formdemo.php
  • 38. Form Demo (CSS)
    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;
    }
    http://www.bradshawenterprises.com/tests/formdemo.php
  • 39. Form –Tipos
    search
    tel
    url
    email
    datetime
    date
    month
    week
    time
    datetime-local
    number
    range
    color
  • 40. Form –Tipos
  • 41. Form –Tipos
  • 42. Tabela de Compatibilidade do HTML5 com os principais browsers:
    http://caniuse.com/
    Compatibilidade
  • 43. “The world ismovingto HTML5”
    Steve Jobs
    Opiniões
  • 44. “Ihad no ideatherewassomuch HTML5 already in play”
    Tim O’Reilly
    Opiniões
  • 45. “The Web hasnotseenthisleveloftransformation, thislevelofaceleration, in thepast 10 years... we’re betting big on HTML5”
    VicGundotra, Google
    Opiniões
  • 46.
  • 47.
  • 48. WHATWG - HTML 5 - http://www.whatwg.org/specs/
    IETF - WebSockethttp://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/
    Referências
  • 49. 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/
    Referências
  • 50. http://www.w3.org/html/logo/downloads/HTML5_Logo.svg
    http://www.w3.org/html/logo/downloads/HTML5_Tech_Classes_SVG.zip
    http://dclips.fundraw.com/zobo500dir/elkbuntu_FBI_Dude_3.jpg
    http://igs.indiana.edu/geology/ancient/ribbontimeline/timeline01.gif
    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/
    Imagens

×