Intro to HTML 5
-
Upload
lvrubygroup -
Category
Technology
-
view
564 -
download
1
description
Transcript of Intro to HTML 5
![Page 1: Intro to HTML 5](https://reader033.fdocuments.in/reader033/viewer/2022060110/555d5a18d8b42a52368b511f/html5/thumbnails/1.jpg)
GETTING GANGSTA WITH
Jeremy Woertink
![Page 2: Intro to HTML 5](https://reader033.fdocuments.in/reader033/viewer/2022060110/555d5a18d8b42a52368b511f/html5/thumbnails/2.jpg)
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
![Page 3: Intro to HTML 5](https://reader033.fdocuments.in/reader033/viewer/2022060110/555d5a18d8b42a52368b511f/html5/thumbnails/3.jpg)
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>
![Page 4: Intro to HTML 5](https://reader033.fdocuments.in/reader033/viewer/2022060110/555d5a18d8b42a52368b511f/html5/thumbnails/4.jpg)
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">
![Page 5: Intro to HTML 5](https://reader033.fdocuments.in/reader033/viewer/2022060110/555d5a18d8b42a52368b511f/html5/thumbnails/5.jpg)
"heavy emphasis on blogs"?
![Page 6: Intro to HTML 5](https://reader033.fdocuments.in/reader033/viewer/2022060110/555d5a18d8b42a52368b511f/html5/thumbnails/6.jpg)
<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>
![Page 7: Intro to HTML 5](https://reader033.fdocuments.in/reader033/viewer/2022060110/555d5a18d8b42a52368b511f/html5/thumbnails/7.jpg)
Is that it?
![Page 8: Intro to HTML 5](https://reader033.fdocuments.in/reader033/viewer/2022060110/555d5a18d8b42a52368b511f/html5/thumbnails/8.jpg)
NOPE!
![Page 9: Intro to HTML 5](https://reader033.fdocuments.in/reader033/viewer/2022060110/555d5a18d8b42a52368b511f/html5/thumbnails/9.jpg)
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
![Page 10: Intro to HTML 5](https://reader033.fdocuments.in/reader033/viewer/2022060110/555d5a18d8b42a52368b511f/html5/thumbnails/10.jpg)
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-
![Page 11: Intro to HTML 5](https://reader033.fdocuments.in/reader033/viewer/2022060110/555d5a18d8b42a52368b511f/html5/thumbnails/11.jpg)
Tons of input "type" values•color •date •datetime •datetime-local •email
• file • month• number • range• reset
• search• tel• time • url• week
![Page 12: Intro to HTML 5](https://reader033.fdocuments.in/reader033/viewer/2022060110/555d5a18d8b42a52368b511f/html5/thumbnails/12.jpg)
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
![Page 13: Intro to HTML 5](https://reader033.fdocuments.in/reader033/viewer/2022060110/555d5a18d8b42a52368b511f/html5/thumbnails/13.jpg)
<AUDIO>
![Page 14: Intro to HTML 5](https://reader033.fdocuments.in/reader033/viewer/2022060110/555d5a18d8b42a52368b511f/html5/thumbnails/14.jpg)
<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>
![Page 15: Intro to HTML 5](https://reader033.fdocuments.in/reader033/viewer/2022060110/555d5a18d8b42a52368b511f/html5/thumbnails/15.jpg)
<VIDEO>
![Page 16: Intro to HTML 5](https://reader033.fdocuments.in/reader033/viewer/2022060110/555d5a18d8b42a52368b511f/html5/thumbnails/16.jpg)
<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>
![Page 17: Intro to HTML 5](https://reader033.fdocuments.in/reader033/viewer/2022060110/555d5a18d8b42a52368b511f/html5/thumbnails/17.jpg)
<CANVAS>
![Page 18: Intro to HTML 5](https://reader033.fdocuments.in/reader033/viewer/2022060110/555d5a18d8b42a52368b511f/html5/thumbnails/18.jpg)
<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>
![Page 19: Intro to HTML 5](https://reader033.fdocuments.in/reader033/viewer/2022060110/555d5a18d8b42a52368b511f/html5/thumbnails/19.jpg)
Want to use HAML?
![Page 20: Intro to HTML 5](https://reader033.fdocuments.in/reader033/viewer/2022060110/555d5a18d8b42a52368b511f/html5/thumbnails/20.jpg)
!!! 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')}
![Page 21: Intro to HTML 5](https://reader033.fdocuments.in/reader033/viewer/2022060110/555d5a18d8b42a52368b511f/html5/thumbnails/21.jpg)
WebSocket()
![Page 22: Intro to HTML 5](https://reader033.fdocuments.in/reader033/viewer/2022060110/555d5a18d8b42a52368b511f/html5/thumbnails/22.jpg)
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
![Page 23: Intro to HTML 5](https://reader033.fdocuments.in/reader033/viewer/2022060110/555d5a18d8b42a52368b511f/html5/thumbnails/23.jpg)
Questions?