Embed Size (px)
DESCRIPTION
Get
Citation preview
GETTING GANGSTA WITH
Jeremy Woertink
WHA WHA WHAT?•Hyper Text Markup Language v5•W3C Working Draft 22 January 2008•Editors: Ian Hickson, Google, Inc. and David Hyatt, Apple, Inc. •A new DOCTYPE
Tell me about this type, doc!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML 1.1 Doctype
HTML 5 Doctype<!DOCTYPE html>
MOAR DOCTYPE !!!•heavy emphasis on blogs•includes xmlns•adds convenient attributes•types are inherent•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">
"heavy emphasis on blogs"?
<section id="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>
Is that it?
NOPE!
Tons of new elements•section•header•footer•nav•article•hgroup•aside•time•mark
•audio•video•canvas•command•datalist•details•figure•figcaption•keygen
•meter•output•progress•rp•rt•ruby•source•summary•wbr
Tons of new Attributes•autocomplete•autofocus•form•formaction•formmethod•formonvalidate•formtarget•registrationmark
•list•max•min•multiple•pattern•placeholder•step•contenteditable
•contextmenu•draggable•irrelevant•ref•template•data-
Tons of input "type" values•color •date •datetime •datetime-local •email
• file • month• number • range• reset
• search• tel• time • url• week
New JavaScript stuff!•document.getElementsByClassName()•document.querySelectorAll()•document.querySelector()•window.localStorage•window.openDatabase()•.transaction(), .executeSql()•window.applicationCache•navigator.onLine•Worker()•WebSocket()•drag & drop•File upload•in-line editing•navigator.geolocation•audio / video / canvas APIs
<AUDIO>
<audio src="audio/sample.mp3" controls="false"> <p>If you see this, then audio isn't supported.</p></audio>
<script async="false"> var audio = 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 var audio2 = new Audio(); // make a new audio object audio2.src = 'audio/sample2.mp3';</script>
<VIDEO>
<video controls="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"> var video = 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>
<CANVAS>
<canvas width="400" height="400"> <p>If you see this, then canvas isn't supported.</p></canvas><script async="false"> var canvas = document.querySelector('canvas'), brush = canvas.getContext('2d'), xPos = 10, yPos = 10, ruby = new Image(); 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>
Want to use HAML?
!!! 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')}
WebSocket()
Wakka Flakka Socket• WebSocket JS Object• Used for server-client communication• 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• NodeJS• other things that are
probably crap
Questions?
