Intro to HTML 5
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Intro to HTML 5

on

  • 668 views

Get

Get

Statistics

Views

Total Views
668
Views on SlideShare
666
Embed Views
2

Actions

Likes
0
Downloads
8
Comments
0

1 Embed 2

http://localhost 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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

Intro to HTML 5 Presentation Transcript

  • 1. GETTING GANGSTA WITH
    Jeremy Woertink
  • 2. WHA WHA WHAT?
    • Hyper Text Markup Language v5
    • 3. W3C Working Draft 22 January 2008
    • 4. Editors: Ian Hickson, Google, Inc. and David Hyatt, Apple, Inc.
    • 5. A new DOCTYPE
  • Tell me about this type, doc!
    XHTML 1.1 Doctype
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    HTML 5 Doctype
    <!DOCTYPE html>
  • 6. MOAR DOCTYPE !!!
    • heavy emphasis on blogs
    • 7. includes xmlns
    • 8. adds convenient attributes
    • 9. types are inherent
    • 10. makes shit shorter
    <html xmlns="http://www.w3.org/1999/xhtml"lang="en"xml:lang="en">
    <html lang="en">
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8">
    <meta charset="utf-8">
    <link rel="stylesheet"href="application.css"type="text/css">
    <link rel="stylesheet"href="application.css">
  • 11. "heavy emphasis on blogs"?
  • 12. <sectionid="archive">
    <article class="article">
    <header>
    <h1>HTML 5 stuffs</h1>
    </header>
    <div class="content">
    Here we can talk about our <mark>HTML 5</mark> stuff!
    </div>
    <footer>
    <p>Posted <time pubdate=""datetime="2011-4-6T19:30">Wednesday</time>.</p>
    </footer>
    </article>
    </section>
  • 13. Is that it?
  • 14. NOPE!
  • 15. Tons of new elements
    • section
    • 16. header
    • 17. footer
    • 18. nav
    • 19. article
    • 20. hgroup
    • 21. aside
    • 22. time
    • 23. mark
    • 24. audio
    • 25. video
    • 26. canvas
    • 27. command
    • 28. datalist
    • 29. details
    • 30. figure
    • 31. figcaption
    • 32. keygen
    • 33. meter
    • 34. output
    • 35. progress
    • 36. rp
    • 37. rt
    • 38. ruby
    • 39. source
    • 40. summary
    • 41. wbr
  • Tons of new Attributes
    • contextmenu
    • 42. draggable
    • 43. irrelevant
    • 44. ref
    • 45. template
    • 46. data-
    • 47. list
    • 48. max
    • 49. min
    • 50. multiple
    • 51. pattern
    • 52. placeholder
    • 53. step
    • 54. contenteditable
    • 55. autocomplete
    • 56. autofocus
    • 57. form
    • 58. formaction
    • 59. formmethod
    • 60. formonvalidate
    • 61. formtarget
    • 62. registrationmark
  • Tons of input "type" values
    • search
    • 63. tel
    • 64. time
    • 65. url
    • 66. week
    • 67. color
    • 68. date
    • 69. datetime
    • 70. datetime-local
    • 71. email
    • 72. file
    • 73. month
    • 74. number
    • 75. range
    • 76. reset
  • New JavaScript stuff!
    • document.getElementsByClassName()
    • 77. document.querySelectorAll()
    • 78. document.querySelector()
    • 79. window.localStorage
    • 80. window.openDatabase()
    • 81. .transaction(), .executeSql()
    • 82. window.applicationCache
    • 83. navigator.onLine
    • 84. Worker()
    • 85. WebSocket()
    • 86. drag & drop
    • 87. File upload
    • 88. in-line editing
    • 89. navigator.geolocation
    • 90. audio / video / canvas APIs
  • <AUDIO>
  • 91. <audiosrc="audio/sample.mp3"controls="false">
    <p>If you see this, then audio isn't supported.</p>
    </audio>
    <script async="false">
    varaudio= document.querySelector('audio');
    audio.play(); // plays the audio
    audio.pause(); // pauses the audio
    audio.volume=100; // increase to 100% volume
    audio.duration; // length of audio in seconds
    audio.currentTime=10; // start playing at 10 seconds
    varaudio2=newAudio(); // make a new audio object
    audio2.src='audio/sample2.mp3';
    </script>
  • 92. <VIDEO>
  • 93. <videocontrols="false">
    <source src="video/sample.mp4"type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="video/sample.webm"type='video/webm; codecs="vp8, vorbis"'>
    <p>If you see this, then video isn't supported.</p>
    </video>
    <script async="false">
    varvideo= document.querySelector('video');
    video.play(); // plays the video
    video.pause(); // pauses the video
    video.volume=100; // increase to 100% volume
    video.autoplay =false; // no autoplay
    video.currentTime=10; // start playing at 10 seconds
    // new Video() doesn't exist :(
    </script>
  • 94. <CANVAS>
  • 95. <canvaswidth="400" height="400">
    <p>If you see this, then canvas isn't supported.</p>
    </canvas>
    <script async="false">
    varcanvas= document.querySelector('canvas'),
    brush=canvas.getContext('2d'),
    xPos=10,
    yPos=10,
    ruby=newImage();
    ruby.src='images/ruby.png';
    ruby.onload=function() {
    brush.drawImage(ruby, xPos, yPos);
    }
    var x1 = 0, y1 = 0, x2 = 0, y2 = 400;
    brush.fillStyle('#ff0000');
    brush.fillRect(x1, y1, x2, y2);
    brush.save();
    </script>
  • 96. Want to use HAML?
  • 97. !!! 5
    %html{:lang => 'en'}
    %head
    %title HTML 5 using HAML
    %body
    %section#container
    %video{:controls => true,:width=> 450,:height=> 200}
    %source{:src => media_path('sample.mp4')}
    %source{:src => media_path('sample.webm')}
    #song
    %audio{:autoplay=>false, :src=> media_path('sample.mp3')}
  • 98. WebSocket()
  • 99. Wakka Flakka Socket
    • WebSocket JS Object
    • 100. Used for server-client communication
    • 101. Not fully supported
    websocket = new WebSocket('ws://localhost:3000/server');
    websocket.onopen = function(evt) { onOpen(evt) }; websocket.onclose = function(evt) { onClose(evt) }; websocket.onmessage = function(evt) { onMessage(evt) }; websocket.onerror = function(evt) { onError(evt) };
    • EventMachine
    • 102. NodeJS
    • 103. other things that are probably crap
  • Questions?