├── .hgignore ├── .htaccess ├── Makefile ├── about.html ├── canvas.html ├── detect.html ├── diveintohtml5.org ├── everything.html ├── examples ├── .htaccess ├── 2000_05_mark.jpg ├── blog-html5.html ├── blog-original.html ├── canvas-halma.html ├── disable_video_autoplay.user.js ├── event-plus-microdata.html ├── event.html ├── freedo_Glossy_Globe.png ├── gdd-2009-prague-pilgrim.jpg ├── halma-localstorage.js ├── halma.js ├── history │ ├── adagio.html │ ├── angie.html │ ├── brandy.html │ ├── casey.html │ ├── fer.html │ ├── gallery.js │ ├── gallery │ │ ├── 1972-fer-500.jpg │ │ ├── 1984-brandy-500.jpg │ │ ├── 1984-casey-500.jpg │ │ ├── 1989-willie-500.jpg │ │ ├── 1992-pepper-500.jpg │ │ ├── 1995-adagio-500.jpg │ │ ├── 2000-angie-500.jpg │ │ ├── adagio.html │ │ ├── angie.html │ │ ├── brandy.html │ │ ├── casey.html │ │ ├── fer.html │ │ ├── pepper.html │ │ └── willie.html │ ├── history.css │ ├── pepper.html │ └── willie.html ├── html5-fist.png ├── input-autofocus-with-fallback-custom-event.html ├── input-autofocus-with-fallback-document-ready.html ├── input-autofocus-with-fallback.html ├── input-autofocus.html ├── input-placeholder.html ├── input-required.html ├── input-type-color.html ├── input-type-date.html ├── input-type-datetime-local.html ├── input-type-datetime.html ├── input-type-email.html ├── input-type-month.html ├── input-type-number-min-max-step.html ├── input-type-number.html ├── input-type-range.html ├── input-type-search.html ├── input-type-tel.html ├── input-type-time.html ├── input-type-url.html ├── input-type-week.html ├── localstorage-halma.html ├── offline │ ├── .htaccess │ ├── clock.css │ ├── clock.html │ ├── clock.js │ ├── clock.manifest │ ├── halma.html │ └── halma.manifest ├── organization-plus-microdata.html ├── organization.html ├── person-plus-microdata.html ├── person.html ├── placeholder ├── review-plus-microdata.html ├── review.html ├── style-html5.css └── style-original.css ├── extensibility.html ├── f ├── .htaccess ├── chunk-webfont.eot ├── chunk-webfont.svg ├── chunk-webfont.ttf ├── chunk-webfont.woff ├── essays1743-italic-webfont.eot ├── essays1743-italic-webfont.svg ├── essays1743-italic-webfont.ttf ├── essays1743-italic-webfont.woff ├── essays1743-webfont.eot ├── essays1743-webfont.svg ├── essays1743-webfont.ttf ├── essays1743-webfont.woff ├── linlibertine_bd-4.1.5-webfont.eot ├── linlibertine_bd-4.1.5-webfont.svg ├── linlibertine_bd-4.1.5-webfont.ttf ├── linlibertine_bd-4.1.5-webfont.woff ├── linlibertine_it-4.2.6-webfont.eot ├── linlibertine_it-4.2.6-webfont.svg ├── linlibertine_it-4.2.6-webfont.ttf ├── linlibertine_it-4.2.6-webfont.woff ├── linlibertine_re-4.7.5-webfont.eot ├── linlibertine_re-4.7.5-webfont.svg ├── linlibertine_re-4.7.5-webfont.ttf ├── linlibertine_re-4.7.5-webfont.woff ├── lmmono10-regular-webfont.eot ├── lmmono10-regular-webfont.svg ├── lmmono10-regular-webfont.ttf ├── lmmono10-regular-webfont.woff ├── lmmonoslant10-regular-webfont.eot ├── lmmonoslant10-regular-webfont.svg ├── lmmonoslant10-regular-webfont.ttf ├── lmmonoslant10-regular-webfont.woff ├── lmroman10-bold-webfont.eot ├── lmroman10-bold-webfont.svg ├── lmroman10-bold-webfont.ttf ├── lmroman10-bold-webfont.woff ├── lmroman10-bolditalic-webfont.eot ├── lmroman10-bolditalic-webfont.svg ├── lmroman10-bolditalic-webfont.ttf ├── lmroman10-bolditalic-webfont.woff ├── lmroman10-regular-webfont.eot ├── lmroman10-regular-webfont.svg ├── lmroman10-regular-webfont.ttf ├── lmroman10-regular-webfont.woff ├── lmromanslant10-bold-webfont.eot ├── lmromanslant10-bold-webfont.svg ├── lmromanslant10-bold-webfont.ttf ├── lmromanslant10-bold-webfont.woff ├── lmromanslant10-regular-webfont.eot ├── lmromanslant10-regular-webfont.svg ├── lmromanslant10-regular-webfont.ttf └── lmromanslant10-regular-webfont.woff ├── favicon.ico ├── fonts-original ├── LinLibertineFont-4.7.5-2.tgz ├── chars ├── chunk.zip ├── essays1743-1.203-1-ttf.tar.gz └── lm1.106otf.zip ├── forms.html ├── geolocation.html ├── history.html ├── i ├── .htaccess ├── aoc-a.png ├── aoc-b.png ├── aoc-c.png ├── aoc-d.png ├── aoc-e.png ├── aoc-f.png ├── aoc-g.png ├── aoc-h.png ├── aoc-i.png ├── aoc-k.png ├── aoc-l.png ├── aoc-m.png ├── aoc-n.png ├── aoc-o.png ├── aoc-p.png ├── aoc-q.png ├── aoc-r.png ├── aoc-s.png ├── aoc-t.png ├── aoc-v.png ├── aoc-w.png ├── aoc-x.png ├── aoc-y.png ├── aoc-z.png ├── baselines.png ├── canvas-half-pixels-1.jpg ├── canvas-half-pixels-2.jpg ├── dot-tan.png ├── dot.png ├── drawImage.png ├── firefogg-01.png ├── firefogg-02.png ├── firefogg-03.png ├── firefogg-04.png ├── firefogg-05.png ├── firefogg-06.png ├── firefogg-07.png ├── firefogg-08.png ├── firefogg-09.png ├── firefogg-10.png ├── firefogg-11.png ├── firefogg-12.png ├── firefogg-13.png ├── forms.png ├── gears.png ├── geolocation-opt-in.png ├── handbrake-01.png ├── handbrake-02.png ├── handbrake-03.png ├── handbrake-04.png ├── handbrake-05.png ├── handbrake-06.png ├── handbrake-07.png ├── handbrake-08.png ├── handbrake-09.png ├── handbrake-10.png ├── handbrake-11.png ├── input-required.png ├── input-type-color.png ├── input-type-date.png ├── input-type-datetime.png ├── input-type-email-validation.png ├── input-type-email.png ├── input-type-month.png ├── input-type-number-at-max-opera.png ├── input-type-number-opera.png ├── input-type-number-validation.png ├── input-type-number.png ├── input-type-range.png ├── input-type-search-safari-typing.png ├── input-type-search-safari.png ├── input-type-search.png ├── input-type-tel.png ├── input-type-time.png ├── input-type-url-validation.png ├── input-type-url.png ├── input-type-week.png ├── johnny_automatic_gerbil_in_a_chair.png ├── johnny_automatic_man_using_binoculars_2.png ├── johnny_automatic_planet_with_spyglass.png ├── location-bar-empty-focused.png ├── location-bar-empty-unfocused.png ├── markup-with-arrow.png ├── miro-01.png ├── miro-02.png ├── miro-03.png ├── miro-04.png ├── miro-05.png ├── miro-06.png ├── miro-07.png ├── miro-08.png ├── miro-09.png ├── openclipart.org_johnny_automatic_3_birds.png ├── openclipart.org_johnny_automatic_8_from_behind.png ├── openclipart.org_johnny_automatic_Corsican_Pine.png ├── openclipart.org_johnny_automatic_a_dog_and_a_cat_with_an_umbrella.png ├── openclipart.org_johnny_automatic_a_pink.png ├── openclipart.org_johnny_automatic_angry_guy.png ├── openclipart.org_johnny_automatic_animals_on_see_saw.png ├── openclipart.org_johnny_automatic_at_the_theater.png ├── openclipart.org_johnny_automatic_bag_of_money.png ├── openclipart.org_johnny_automatic_baseball_at_bat.png ├── openclipart.org_johnny_automatic_big_sandwich.png ├── openclipart.org_johnny_automatic_blowfish.png ├── openclipart.org_johnny_automatic_cabin_along_stream.png ├── openclipart.org_johnny_automatic_card_trick.png ├── openclipart.org_johnny_automatic_clock_tower.png ├── openclipart.org_johnny_automatic_demon_reading_Stewart_Orr.png ├── openclipart.org_johnny_automatic_divider_cards.png ├── openclipart.org_johnny_automatic_dog_on_chair.png ├── openclipart.org_johnny_automatic_fishing_boat.png ├── openclipart.org_johnny_automatic_girl_feeding_birds.png ├── openclipart.org_johnny_automatic_globe_man.png ├── openclipart.org_johnny_automatic_half_stack_of_horizontal_sections.png ├── openclipart.org_johnny_automatic_little_professor.png ├── openclipart.org_johnny_automatic_man_reading_newspaper.png ├── openclipart.org_johnny_automatic_monkey_reading.png ├── openclipart.org_johnny_automatic_newsboy.png ├── openclipart.org_johnny_automatic_peeking_out_the_window.png ├── openclipart.org_johnny_automatic_riding_a_bike.png ├── openclipart.org_johnny_automatic_tree_on_top_of_hill.png ├── openclipart.org_johnny_automatic_typewriter.png ├── openclipart.org_johnny_automatic_young_girl_pointing.png ├── openclipart.org_maven_Galileo_Galilei.png ├── openclipart.org_media_files_Selanit_8331.png ├── openclipart.org_media_files_johnny_automatic_1360.png ├── openclipart.org_media_files_johnny_automatic_4145.png ├── openclipart.org_media_files_johnny_automatic_4794.png ├── openclipart.org_media_files_johnny_automatic_7563.png ├── pr6.mp4 ├── pr6.ogv ├── pr6.webm ├── rel-email.png └── video.png ├── index.html ├── introduction.html ├── j ├── .htaccess ├── canvastext-fx3.js ├── dih5.js ├── excanvas.js ├── excanvas.min.js ├── ga.js ├── gears_init.js ├── gears_init.min.js ├── geo.js ├── geo.min.js ├── html5-video.js ├── html5.js ├── jquery.js ├── jquery.min.js ├── legal.js ├── modernizr.js └── modernizr.min.js ├── legal.html ├── mobile.css ├── mockups ├── forms.bmml ├── gears.bmml ├── markup-with-arrow.bmml ├── rel-email.bmml └── video.bmml ├── offline.html ├── past.html ├── peeks-pokes-and-pointers.html ├── robots.txt ├── s ├── click.mp3 └── click.ogg ├── screen.css ├── semantics.html ├── sounds-original └── click.wav ├── storage.html ├── table-of-contents.html ├── util ├── buildtoc.py ├── compiler.jar ├── htmlminimizer.py ├── lesscss.py ├── roman.py ├── validate.py └── yuicompressor-2.4.2.jar ├── video.html └── workers.html /.hgignore: -------------------------------------------------------------------------------- 1 | syntax: glob 2 | *.pyc 3 | build 4 | private 5 | -------------------------------------------------------------------------------- /.htaccess: -------------------------------------------------------------------------------- 1 | FileETag MTime Size 2 | 3 | SetEnv dont-vary 4 | 5 | AddType text/cache-manifest .manifest 6 | AddType application/x-font-ttf .ttf 7 | AddType application/vnd.ms-fontobject .eot 8 | AddType application/x-woff .woff 9 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | PYTHON3 = python3 2 | PYTHON2 = python2.6 3 | JAVA = java 4 | 5 | REVISION := $(shell git rev-parse --short HEAD) 6 | 7 | all: validate-html buildtoc clean init minimize-html minimize-js minimize-css combine-js build-sitemap substitute-minimized-scripts-and-css remove-unused-css-selectors add-revision-number-to-manifests set-file-permissions 8 | 9 | validate-html: 10 | { for f in *.html; do python3 util/validate.py "$$f" > /dev/null || exit 1; done } 11 | 12 | buildtoc: 13 | ${PYTHON3} util/buildtoc.py 14 | 15 | clean: 16 | rm -rf build 17 | 18 | init: clean 19 | mkdir build 20 | mkdir build/fonts-original 21 | cp robots.txt .htaccess *.css *.ico build/ 22 | cp -R j build/ 23 | cp -R i build/ 24 | cp -R f build/ 25 | cp -R s build/ 26 | cp -R examples build/ 27 | cp fonts-original/*.tar.gz build/fonts-original/ 28 | 29 | minimize-html: init 30 | { for f in *.html; do python3 util/htmlminimizer.py "$$f" build/"$$f" || exit 1; done } 31 | sed -i -e "s|;||g" build/*.html 32 | 33 | minimize-js: init 34 | ${JAVA} -jar util/compiler.jar -js build/j/dih5.js > build/j/dih5.min.js 35 | ${JAVA} -jar util/compiler.jar -js build/j/canvastext-fx3.js > build/j/canvastext-fx3.min.js 36 | 37 | minimize-css: init 38 | sed -i -e "s|url(i/|url(//d.wearehugh.com/dih5/|g" build/screen.css 39 | java -jar util/yuicompressor-2.4.2.jar build/screen.css > build/${REVISION}.css 40 | java -jar util/yuicompressor-2.4.2.jar build/mobile.css > build/m-${REVISION}.css 41 | sed -i -e "s|;}|}|g" -e "s|\"|'|g" build/${REVISION}.css 42 | sed -i -e "s|;}|}|g" -e "s|\"|'|g" build/m-${REVISION}.css 43 | 44 | combine-js: minimize-js 45 | cat build/j/legal.js build/j/jquery.min.js build/j/modernizr.min.js build/j/canvastext-fx3.min.js build/j/dih5.min.js > build/j/${REVISION}.js 46 | cat build/j/legal.js build/j/gears_init.min.js build/j/geo.min.js > build/j/${REVISION}-maps.js 47 | 48 | build-sitemap: minimize-html 49 | ls build/*.html | sed -e "s|build/|http://diveintohtml5.org/|g" -e "s|/index.html|/|g" > build/sitemap.txt 50 | 51 | substitute-minimized-scripts-and-css: minimize-html minimize-js minimize-css combine-js 52 | sed -i -e "s|||g" \ 53 | -e "s|||g" \ 54 | -e "s|||g" \ 55 | -e "s|||g" \ 57 | -e "s| 8 | 9 | 10 | 11 |

Canvas Halma

12 |

(Rules of play)

13 |

Moves: 0

14 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /examples/disable_video_autoplay.user.js: -------------------------------------------------------------------------------- 1 | // ==UserScript== 2 | // @name Disable video autoplay 3 | // @namespace http://diveintomark.org/projects/greasemonkey/ 4 | // @description Ensures that HTML5 video elements do not autoplay 5 | // @include * 6 | // ==/UserScript== 7 | 8 | var arVideos = document.getElementsByTagName('video'); 9 | for (var i = arVideos.length - 1; i >= 0; i--) { 10 | var elmVideo = arVideos[i]; 11 | elmVideo.autoplay = false; 12 | } -------------------------------------------------------------------------------- /examples/event-plus-microdata.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Mark Pilgrim’s event calendar 7 | 8 | 9 | 12 | 13 | 14 |
15 |
16 |

Mark’s Event Calendar

17 |

Hear Mark speak. Speak, Mark, speak.

18 |
19 |
20 |
21 |

Google Developer Day 2009

22 | [Mark Pilgrim at podium] 25 |

Google Developer Days are a chance to 26 | learn about Google developer products from the engineers who built 27 | them. This one-day conference includes seminars and “office 28 | hours” on web technologies like Google Maps, OpenSocial, 29 | Android, AJAX APIs, Chrome, and Google Web Toolkit.

30 |

2009 November 6, 31 | 32 | – 33 |

34 |

36 | Congress Center
37 | 39 | 5th května 65
40 | 140 21 41 | Praha 4
42 | Czech Republic 43 | 44 |

45 | 46 | 47 | 48 | 49 |

50 | 54 |

55 |

§

56 |
57 |
58 |

ConFoo.ca 2010

59 | 60 | [drawing of clenched fist with 'HTML5' spelled on knuckles] 63 |

PHP Québec, Montréal-Python, Montréal 64 | on Rails, W3Qc and OWASP Montréal are proud to announce the first 65 | edition of the Confoo.ca conference. International experts in Java, 66 | .Net, PHP, Python and Ruby will present solutions for developers 67 | and project managers.

68 |

69 | – 70 |

71 |

73 | Hilton Montreal Bonaventure
74 | 76 | 900 de La Gauchetière West,
77 | Montréal, 78 | Québec,
79 | Canada 80 | H5A 1E4 81 | 82 |

83 | 84 | 85 | 86 | 87 |

88 | 89 |

90 |
91 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /examples/event.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Mark Pilgrim’s event calendar 7 | 8 | 9 | 10 | 11 |
12 |
13 |

Mark’s Event Calendar

14 |

Hear Mark speak. Speak, Mark, speak.

15 |
16 |
17 |
18 |

Google Developer Day 2009

19 | [Mark Pilgrim at podium] 22 |

Google Developer Days are a chance to learn about Google developer products from the engineers who built them. This one-day conference includes seminars and “office hours” on web technologies like Google Maps, OpenSocial, Android, AJAX APIs, Chrome, and Google Web Toolkit.

23 |

24 | 25 | – 26 | 27 |

28 |

29 | Congress Center
30 | 5th května 65
31 | 140 21 Praha 4
32 | Czech Republic 33 |

34 |

GDD/Prague home page

35 |

§

36 |
37 |
38 |

ConFoo.ca 2010

39 | [clenched fist with 'HTML5' on knuckles] 42 |

PHP Québec, Montréal-Python, Montréal on Rails, W3Qc and OWASP Montréal are proud to announce the first edition of the Confoo.ca conference. International experts in Java, .Net, PHP, Python and Ruby will present solutions for developers and project managers.

43 |

2010 March 10–12

44 |

45 | Hilton Montreal Bonaventure
46 | 900 de La Gauchetière West,
47 | Montréal, Québec,
48 | Canada H5A 1E4 49 |

50 |

ConFoo.ca home page

51 |
52 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /examples/freedo_Glossy_Globe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/examples/freedo_Glossy_Globe.png -------------------------------------------------------------------------------- /examples/gdd-2009-prague-pilgrim.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/examples/gdd-2009-prague-pilgrim.jpg -------------------------------------------------------------------------------- /examples/halma-localstorage.js: -------------------------------------------------------------------------------- 1 | var kBoardWidth = 9; 2 | var kBoardHeight= 9; 3 | var kNumPieces = 9; 4 | var kPieceWidth = 50; 5 | var kPieceHeight= 50; 6 | var kPixelWidth = 1 + (kBoardWidth * kPieceWidth); 7 | var kPixelHeight= 1 + (kBoardHeight * kPieceHeight); 8 | 9 | var gCanvasElement; 10 | var gDrawingContext; 11 | var gPattern; 12 | 13 | var gPieces; 14 | var gNumPieces; 15 | var gSelectedPieceIndex; 16 | var gSelectedPieceHasMoved; 17 | var gMoveCount; 18 | var gMoveCountElem; 19 | var gGameInProgress; 20 | 21 | function Cell(row, column) { 22 | this.row = row; 23 | this.column = column; 24 | } 25 | 26 | function getCursorPosition(e) { 27 | /* returns Cell with .row and .column properties */ 28 | var x; 29 | var y; 30 | if (e.pageX != undefined && e.pageY != undefined) { 31 | x = e.pageX; 32 | y = e.pageY; 33 | } 34 | else { 35 | x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 36 | y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 37 | } 38 | x -= gCanvasElement.offsetLeft; 39 | y -= gCanvasElement.offsetTop; 40 | x = Math.min(x, kBoardWidth * kPieceWidth); 41 | y = Math.min(y, kBoardHeight * kPieceHeight); 42 | var cell = new Cell(Math.floor(y/kPieceHeight), Math.floor(x/kPieceWidth)); 43 | return cell; 44 | } 45 | 46 | function halmaOnClick(e) { 47 | var cell = getCursorPosition(e); 48 | for (var i = 0; i < gNumPieces; i++) { 49 | if ((gPieces[i].row == cell.row) && 50 | (gPieces[i].column == cell.column)) { 51 | clickOnPiece(i); 52 | return; 53 | } 54 | } 55 | clickOnEmptyCell(cell); 56 | } 57 | 58 | function clickOnEmptyCell(cell) { 59 | if (gSelectedPieceIndex == -1) { return; } 60 | var rowDiff = Math.abs(cell.row - gPieces[gSelectedPieceIndex].row); 61 | var columnDiff = Math.abs(cell.column - gPieces[gSelectedPieceIndex].column); 62 | if ((rowDiff <= 1) && 63 | (columnDiff <= 1)) { 64 | /* we already know that this click was on an empty square, 65 | so that must mean this was a valid single-square move */ 66 | gPieces[gSelectedPieceIndex].row = cell.row; 67 | gPieces[gSelectedPieceIndex].column = cell.column; 68 | gMoveCount += 1; 69 | gSelectedPieceIndex = -1; 70 | gSelectedPieceHasMoved = false; 71 | drawBoard(); 72 | return; 73 | } 74 | if ((((rowDiff == 2) && (columnDiff == 0)) || 75 | ((rowDiff == 0) && (columnDiff == 2)) || 76 | ((rowDiff == 2) && (columnDiff == 2))) && 77 | isThereAPieceBetween(gPieces[gSelectedPieceIndex], cell)) { 78 | /* this was a valid jump */ 79 | if (!gSelectedPieceHasMoved) { 80 | gMoveCount += 1; 81 | } 82 | gSelectedPieceHasMoved = true; 83 | gPieces[gSelectedPieceIndex].row = cell.row; 84 | gPieces[gSelectedPieceIndex].column = cell.column; 85 | drawBoard(); 86 | return; 87 | } 88 | gSelectedPieceIndex = -1; 89 | gSelectedPieceHasMoved = false; 90 | drawBoard(); 91 | } 92 | 93 | function clickOnPiece(pieceIndex) { 94 | if (gSelectedPieceIndex == pieceIndex) { return; } 95 | gSelectedPieceIndex = pieceIndex; 96 | gSelectedPieceHasMoved = false; 97 | drawBoard(); 98 | } 99 | 100 | function isThereAPieceBetween(cell1, cell2) { 101 | /* note: assumes cell1 and cell2 are 2 squares away 102 | either vertically, horizontally, or diagonally */ 103 | var rowBetween = (cell1.row + cell2.row) / 2; 104 | var columnBetween = (cell1.column + cell2.column) / 2; 105 | for (var i = 0; i < gNumPieces; i++) { 106 | if ((gPieces[i].row == rowBetween) && 107 | (gPieces[i].column == columnBetween)) { 108 | return true; 109 | } 110 | } 111 | return false; 112 | } 113 | 114 | function isTheGameOver() { 115 | for (var i = 0; i < gNumPieces; i++) { 116 | if (gPieces[i].row > 2) { 117 | return false; 118 | } 119 | if (gPieces[i].column < (kBoardWidth - 3)) { 120 | return false; 121 | } 122 | } 123 | return true; 124 | } 125 | 126 | function drawBoard() { 127 | if (gGameInProgress && isTheGameOver()) { 128 | endGame(); 129 | } 130 | 131 | gDrawingContext.clearRect(0, 0, kPixelWidth, kPixelHeight); 132 | 133 | gDrawingContext.beginPath(); 134 | 135 | /* vertical lines */ 136 | for (var x = 0; x <= kPixelWidth; x += kPieceWidth) { 137 | gDrawingContext.moveTo(0.5 + x, 0); 138 | gDrawingContext.lineTo(0.5 + x, kPixelHeight); 139 | } 140 | 141 | /* horizontal lines */ 142 | for (var y = 0; y <= kPixelHeight; y += kPieceHeight) { 143 | gDrawingContext.moveTo(0, 0.5 + y); 144 | gDrawingContext.lineTo(kPixelWidth, 0.5 + y); 145 | } 146 | 147 | /* draw it! */ 148 | gDrawingContext.strokeStyle = "#ccc"; 149 | gDrawingContext.stroke(); 150 | 151 | for (var i = 0; i < 9; i++) { 152 | drawPiece(gPieces[i], i == gSelectedPieceIndex); 153 | } 154 | 155 | gMoveCountElem.innerHTML = gMoveCount; 156 | 157 | saveGameState(); 158 | } 159 | 160 | function drawPiece(p, selected) { 161 | var column = p.column; 162 | var row = p.row; 163 | var x = (column * kPieceWidth) + (kPieceWidth/2); 164 | var y = (row * kPieceHeight) + (kPieceHeight/2); 165 | var radius = (kPieceWidth/2) - (kPieceWidth/10); 166 | gDrawingContext.beginPath(); 167 | gDrawingContext.arc(x, y, radius, 0, Math.PI*2, false); 168 | gDrawingContext.closePath(); 169 | gDrawingContext.strokeStyle = "#000"; 170 | gDrawingContext.stroke(); 171 | if (selected) { 172 | gDrawingContext.fillStyle = "#000"; 173 | gDrawingContext.fill(); 174 | } 175 | } 176 | 177 | function supportsLocalStorage() { 178 | return ('localStorage' in window) && window['localStorage'] !== null; 179 | } 180 | 181 | function saveGameState() { 182 | if (!supportsLocalStorage()) { return false; } 183 | localStorage["halma.game.in.progress"] = gGameInProgress; 184 | for (var i = 0; i < kNumPieces; i++) { 185 | localStorage["halma.piece." + i + ".row"] = gPieces[i].row; 186 | localStorage["halma.piece." + i + ".column"] = gPieces[i].column; 187 | } 188 | localStorage["halma.selectedpiece"] = gSelectedPieceIndex; 189 | localStorage["halma.selectedpiecehasmoved"] = gSelectedPieceHasMoved; 190 | localStorage["halma.movecount"] = gMoveCount; 191 | return true; 192 | } 193 | 194 | function resumeGame() { 195 | if (!supportsLocalStorage()) { return false; } 196 | gGameInProgress = (localStorage["halma.game.in.progress"] == "true"); 197 | if (!gGameInProgress) { return false; } 198 | gPieces = new Array(kNumPieces); 199 | for (var i = 0; i < kNumPieces; i++) { 200 | var row = parseInt(localStorage["halma.piece." + i + ".row"]); 201 | var column = parseInt(localStorage["halma.piece." + i + ".column"]); 202 | gPieces[i] = new Cell(row, column); 203 | } 204 | gNumPieces = kNumPieces; 205 | gSelectedPieceIndex = parseInt(localStorage["halma.selectedpiece"]); 206 | gSelectedPieceHasMoved = localStorage["halma.selectedpiecehasmoved"] == "true"; 207 | gMoveCount = parseInt(localStorage["halma.movecount"]); 208 | drawBoard(); 209 | return true; 210 | } 211 | 212 | function newGame() { 213 | gPieces = [new Cell(kBoardHeight - 3, 0), 214 | new Cell(kBoardHeight - 2, 0), 215 | new Cell(kBoardHeight - 1, 0), 216 | new Cell(kBoardHeight - 3, 1), 217 | new Cell(kBoardHeight - 2, 1), 218 | new Cell(kBoardHeight - 1, 1), 219 | new Cell(kBoardHeight - 3, 2), 220 | new Cell(kBoardHeight - 2, 2), 221 | new Cell(kBoardHeight - 1, 2)]; 222 | 223 | gNumPieces = gPieces.length; 224 | gSelectedPieceIndex = -1; 225 | gSelectedPieceHasMoved = false; 226 | gMoveCount = 0; 227 | gGameInProgress = true; 228 | drawBoard(); 229 | } 230 | 231 | function endGame() { 232 | gSelectedPieceIndex = -1; 233 | gGameInProgress = false; 234 | } 235 | 236 | function initGame(canvasElement, moveCountElement) { 237 | if (!canvasElement) { 238 | canvasElement = document.createElement("canvas"); 239 | canvasElement.id = "halma_canvas"; 240 | document.body.appendChild(canvasElement); 241 | } 242 | if (!moveCountElement) { 243 | moveCountElement = document.createElement("p"); 244 | document.body.appendChild(moveCountElement); 245 | } 246 | gCanvasElement = canvasElement; 247 | gCanvasElement.width = kPixelWidth; 248 | gCanvasElement.height = kPixelHeight; 249 | gCanvasElement.addEventListener("click", halmaOnClick, false); 250 | gMoveCountElem = moveCountElement; 251 | gDrawingContext = gCanvasElement.getContext("2d"); 252 | if (!resumeGame()) { 253 | newGame(); 254 | } 255 | } 256 | -------------------------------------------------------------------------------- /examples/halma.js: -------------------------------------------------------------------------------- 1 | var kBoardWidth = 9; 2 | var kBoardHeight= 9; 3 | var kPieceWidth = 50; 4 | var kPieceHeight= 50; 5 | var kPixelWidth = 1 + (kBoardWidth * kPieceWidth); 6 | var kPixelHeight= 1 + (kBoardHeight * kPieceHeight); 7 | 8 | var gCanvasElement; 9 | var gDrawingContext; 10 | var gPattern; 11 | 12 | var gPieces; 13 | var gNumPieces; 14 | var gSelectedPieceIndex; 15 | var gSelectedPieceHasMoved; 16 | var gMoveCount; 17 | var gMoveCountElem; 18 | var gGameInProgress; 19 | 20 | function Cell(row, column) { 21 | this.row = row; 22 | this.column = column; 23 | } 24 | 25 | function getCursorPosition(e) { 26 | /* returns Cell with .row and .column properties */ 27 | var x; 28 | var y; 29 | if (e.pageX != undefined && e.pageY != undefined) { 30 | x = e.pageX; 31 | y = e.pageY; 32 | } 33 | else { 34 | x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 35 | y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 36 | } 37 | x -= gCanvasElement.offsetLeft; 38 | y -= gCanvasElement.offsetTop; 39 | x = Math.min(x, kBoardWidth * kPieceWidth); 40 | y = Math.min(y, kBoardHeight * kPieceHeight); 41 | var cell = new Cell(Math.floor(y/kPieceHeight), Math.floor(x/kPieceWidth)); 42 | return cell; 43 | } 44 | 45 | function halmaOnClick(e) { 46 | var cell = getCursorPosition(e); 47 | for (var i = 0; i < gNumPieces; i++) { 48 | if ((gPieces[i].row == cell.row) && 49 | (gPieces[i].column == cell.column)) { 50 | clickOnPiece(i); 51 | return; 52 | } 53 | } 54 | clickOnEmptyCell(cell); 55 | } 56 | 57 | function clickOnEmptyCell(cell) { 58 | if (gSelectedPieceIndex == -1) { return; } 59 | var rowDiff = Math.abs(cell.row - gPieces[gSelectedPieceIndex].row); 60 | var columnDiff = Math.abs(cell.column - gPieces[gSelectedPieceIndex].column); 61 | if ((rowDiff <= 1) && 62 | (columnDiff <= 1)) { 63 | /* we already know that this click was on an empty square, 64 | so that must mean this was a valid single-square move */ 65 | gPieces[gSelectedPieceIndex].row = cell.row; 66 | gPieces[gSelectedPieceIndex].column = cell.column; 67 | gMoveCount += 1; 68 | gSelectedPieceIndex = -1; 69 | gSelectedPieceHasMoved = false; 70 | drawBoard(); 71 | return; 72 | } 73 | if ((((rowDiff == 2) && (columnDiff == 0)) || 74 | ((rowDiff == 0) && (columnDiff == 2)) || 75 | ((rowDiff == 2) && (columnDiff == 2))) && 76 | isThereAPieceBetween(gPieces[gSelectedPieceIndex], cell)) { 77 | /* this was a valid jump */ 78 | if (!gSelectedPieceHasMoved) { 79 | gMoveCount += 1; 80 | } 81 | gSelectedPieceHasMoved = true; 82 | gPieces[gSelectedPieceIndex].row = cell.row; 83 | gPieces[gSelectedPieceIndex].column = cell.column; 84 | drawBoard(); 85 | return; 86 | } 87 | gSelectedPieceIndex = -1; 88 | gSelectedPieceHasMoved = false; 89 | drawBoard(); 90 | } 91 | 92 | function clickOnPiece(pieceIndex) { 93 | if (gSelectedPieceIndex == pieceIndex) { return; } 94 | gSelectedPieceIndex = pieceIndex; 95 | gSelectedPieceHasMoved = false; 96 | drawBoard(); 97 | } 98 | 99 | function isThereAPieceBetween(cell1, cell2) { 100 | /* note: assumes cell1 and cell2 are 2 squares away 101 | either vertically, horizontally, or diagonally */ 102 | var rowBetween = (cell1.row + cell2.row) / 2; 103 | var columnBetween = (cell1.column + cell2.column) / 2; 104 | for (var i = 0; i < gNumPieces; i++) { 105 | if ((gPieces[i].row == rowBetween) && 106 | (gPieces[i].column == columnBetween)) { 107 | return true; 108 | } 109 | } 110 | return false; 111 | } 112 | 113 | function isTheGameOver() { 114 | for (var i = 0; i < gNumPieces; i++) { 115 | if (gPieces[i].row > 2) { 116 | return false; 117 | } 118 | if (gPieces[i].column < (kBoardWidth - 3)) { 119 | return false; 120 | } 121 | } 122 | return true; 123 | } 124 | 125 | function drawBoard() { 126 | if (gGameInProgress && isTheGameOver()) { 127 | endGame(); 128 | } 129 | 130 | gDrawingContext.clearRect(0, 0, kPixelWidth, kPixelHeight); 131 | 132 | gDrawingContext.beginPath(); 133 | 134 | /* vertical lines */ 135 | for (var x = 0; x <= kPixelWidth; x += kPieceWidth) { 136 | gDrawingContext.moveTo(0.5 + x, 0); 137 | gDrawingContext.lineTo(0.5 + x, kPixelHeight); 138 | } 139 | 140 | /* horizontal lines */ 141 | for (var y = 0; y <= kPixelHeight; y += kPieceHeight) { 142 | gDrawingContext.moveTo(0, 0.5 + y); 143 | gDrawingContext.lineTo(kPixelWidth, 0.5 + y); 144 | } 145 | 146 | /* draw it! */ 147 | gDrawingContext.strokeStyle = "#ccc"; 148 | gDrawingContext.stroke(); 149 | 150 | for (var i = 0; i < 9; i++) { 151 | drawPiece(gPieces[i], i == gSelectedPieceIndex); 152 | } 153 | 154 | gMoveCountElem.innerHTML = gMoveCount; 155 | 156 | saveGameState(); 157 | } 158 | 159 | function drawPiece(p, selected) { 160 | var column = p.column; 161 | var row = p.row; 162 | var x = (column * kPieceWidth) + (kPieceWidth/2); 163 | var y = (row * kPieceHeight) + (kPieceHeight/2); 164 | var radius = (kPieceWidth/2) - (kPieceWidth/10); 165 | gDrawingContext.beginPath(); 166 | gDrawingContext.arc(x, y, radius, 0, Math.PI*2, false); 167 | gDrawingContext.closePath(); 168 | gDrawingContext.strokeStyle = "#000"; 169 | gDrawingContext.stroke(); 170 | if (selected) { 171 | gDrawingContext.fillStyle = "#000"; 172 | gDrawingContext.fill(); 173 | } 174 | } 175 | 176 | if (typeof resumeGame != "function") { 177 | saveGameState = function() { 178 | return false; 179 | } 180 | resumeGame = function() { 181 | return false; 182 | } 183 | } 184 | 185 | function newGame() { 186 | gPieces = [new Cell(kBoardHeight - 3, 0), 187 | new Cell(kBoardHeight - 2, 0), 188 | new Cell(kBoardHeight - 1, 0), 189 | new Cell(kBoardHeight - 3, 1), 190 | new Cell(kBoardHeight - 2, 1), 191 | new Cell(kBoardHeight - 1, 1), 192 | new Cell(kBoardHeight - 3, 2), 193 | new Cell(kBoardHeight - 2, 2), 194 | new Cell(kBoardHeight - 1, 2)]; 195 | gNumPieces = gPieces.length; 196 | gSelectedPieceIndex = -1; 197 | gSelectedPieceHasMoved = false; 198 | gMoveCount = 0; 199 | gGameInProgress = true; 200 | drawBoard(); 201 | } 202 | 203 | function endGame() { 204 | gSelectedPieceIndex = -1; 205 | gGameInProgress = false; 206 | } 207 | 208 | function initGame(canvasElement, moveCountElement) { 209 | if (!canvasElement) { 210 | canvasElement = document.createElement("canvas"); 211 | canvasElement.id = "halma_canvas"; 212 | document.body.appendChild(canvasElement); 213 | } 214 | if (!moveCountElement) { 215 | moveCountElement = document.createElement("p"); 216 | document.body.appendChild(moveCountElement); 217 | } 218 | gCanvasElement = canvasElement; 219 | gCanvasElement.width = kPixelWidth; 220 | gCanvasElement.height = kPixelHeight; 221 | gCanvasElement.addEventListener("click", halmaOnClick, false); 222 | gMoveCountElem = moveCountElement; 223 | gDrawingContext = gCanvasElement.getContext("2d"); 224 | if (!resumeGame()) { 225 | newGame(); 226 | } 227 | } 228 | -------------------------------------------------------------------------------- /examples/history/gallery.js: -------------------------------------------------------------------------------- 1 | function supports_history_api() { 2 | return !!(window.history && history.pushState); 3 | } 4 | 5 | function swapPhoto(href) { 6 | var req = new XMLHttpRequest(); 7 | req.open("GET", 8 | "http://diveintohtml5.org/examples/history/gallery/" + 9 | href.split("/").pop(), 10 | false); 11 | req.send(null); 12 | if (req.status == 200) { 13 | document.getElementById("gallery").innerHTML = req.responseText; 14 | setupHistoryClicks(); 15 | return true; 16 | } 17 | return false; 18 | } 19 | 20 | function addClicker(link) { 21 | link.addEventListener("click", function(e) { 22 | if (swapPhoto(link.href)) { 23 | history.pushState(null, null, link.href); 24 | e.preventDefault(); 25 | } 26 | }, true); 27 | } 28 | 29 | function setupHistoryClicks() { 30 | addClicker(document.getElementById("photonext")); 31 | addClicker(document.getElementById("photoprev")); 32 | } 33 | 34 | window.onload = function() { 35 | if (!supports_history_api()) { return; } 36 | setupHistoryClicks(); 37 | window.setTimeout(function() { 38 | window.addEventListener("popstate", function(e) { 39 | swapPhoto(location.pathname); 40 | }, false); 41 | }, 1); 42 | } 43 | -------------------------------------------------------------------------------- /examples/history/gallery/1972-fer-500.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/examples/history/gallery/1972-fer-500.jpg -------------------------------------------------------------------------------- /examples/history/gallery/1984-brandy-500.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/examples/history/gallery/1984-brandy-500.jpg -------------------------------------------------------------------------------- /examples/history/gallery/1984-casey-500.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/examples/history/gallery/1984-casey-500.jpg -------------------------------------------------------------------------------- /examples/history/gallery/1989-willie-500.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/examples/history/gallery/1989-willie-500.jpg -------------------------------------------------------------------------------- /examples/history/gallery/1992-pepper-500.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/examples/history/gallery/1992-pepper-500.jpg -------------------------------------------------------------------------------- /examples/history/gallery/1995-adagio-500.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/examples/history/gallery/1995-adagio-500.jpg -------------------------------------------------------------------------------- /examples/history/gallery/2000-angie-500.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/examples/history/gallery/2000-angie-500.jpg -------------------------------------------------------------------------------- /examples/history/gallery/adagio.html: -------------------------------------------------------------------------------- 1 |

Next > < Previous

2 |
Adagio
Adagio, 1995
3 | -------------------------------------------------------------------------------- /examples/history/gallery/angie.html: -------------------------------------------------------------------------------- 1 |

Next > < Previous

2 |
Angie
Angie, 2000
3 | -------------------------------------------------------------------------------- /examples/history/gallery/brandy.html: -------------------------------------------------------------------------------- 1 |

Next > < Previous

2 |
Brandy
Brandy, 1984
3 | -------------------------------------------------------------------------------- /examples/history/gallery/casey.html: -------------------------------------------------------------------------------- 1 |

Next > < Previous

2 |
Casey
Casey, 1984
3 | -------------------------------------------------------------------------------- /examples/history/gallery/fer.html: -------------------------------------------------------------------------------- 1 |

Next > < Previous

2 |
Fer
Fer, 1972
3 | -------------------------------------------------------------------------------- /examples/history/gallery/pepper.html: -------------------------------------------------------------------------------- 1 |

Next > < Previous

2 |
Pepper
Pepper, 1992
3 | -------------------------------------------------------------------------------- /examples/history/gallery/willie.html: -------------------------------------------------------------------------------- 1 |

Next > < Previous

2 |
Willie
Willie, 1989
3 | -------------------------------------------------------------------------------- /examples/html5-fist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/examples/html5-fist.png -------------------------------------------------------------------------------- /examples/input-autofocus-with-fallback-custom-event.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <input autofocus> with custom event fallback - Dive Into HTML 5 8 | 9 | 10 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 |
29 | 30 | 
<head>
31 |   <script src="jquery.js"></script>
32 |   <script>
33 |     $(document).bind('autofocus_ready', function() {
34 |       if (!("autofocus" in document.createElement("input"))) {
35 |         $("#q").focus();
36 |       }
37 |     }
38 |   </script>
39 | </head>
40 | <body>
41 |   <form name="f">
42 |   <input id="q" autofocus>
43 |   <script>$(document).trigger('autofocus_ready');</script>
44 |   <input type="submit" value="Go">
45 | </form>
46 | </body>
47 |
48 | 49 |

← back to Dive Into HTML 5 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /examples/input-autofocus-with-fallback-document-ready.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <input autofocus> with jQuery fallback - Dive Into HTML 5 8 | 9 | 10 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |

25 | 26 | 27 |
28 | 29 | 
<head>
30 |   <script src="jquery.js"></script>
31 |   <script>
32 |     $(document).ready(function() {
33 |       if (!("autofocus" in document.createElement("input"))) {
34 |         $("#q").focus();
35 |       }
36 |     });
37 |   </script>
38 | </head>
39 | <body>
40 |   <form name="f">
41 |   <input id="q" autofocus>
42 |   <input type="submit" value="Go">
43 | </form>
44 | </body>
45 |
46 | 47 |

jQuery fires its custom ready event as soon as the page DOM is available — that is, it waits until the page text is loaded, but it doesn’t wait until all the images are loaded. This is not an optimal approach — if the page is unusually large or the network connection is unusually slow, a user could still start interacting with the page before your focus script executes. But it is still far better than waiting until the window.onload event fires. 48 | 49 |

← back to Dive Into HTML 5 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /examples/input-autofocus-with-fallback.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <input autofocus> fallback - Dive Into HTML 5 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 | 19 |
20 | 21 | 
<form name="f">
22 |   <input id="q" autofocus>
23 |   <input type="submit" value="Go">
24 | </form>
25 | …
26 | <script>
27 |   window.onload = function() {
28 |     if (!("autofocus" in document.createElement("input"))) {
29 |       document.getElementById("q").focus();
30 |     }
31 |   }
32 | </script>
33 | 34 |

Note: window.onload fires after all your images have loaded. If your page has a lot of images, the above script could potentially re-focus the "q" field after the user has started interacting with another part of your page. (This is why power users hate autofocus scripts.) If your site already uses a JavaScript library like jQuery, you can mitigate this delay by using $(document).ready() instead of window.onload. 35 | 36 |

← back to Dive Into HTML 5 37 | 38 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /examples/input-autofocus.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <input autofocus> - Dive Into HTML 5 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 | 19 |
20 | 21 | 
<form>
22 |   <input name="q" autofocus>
23 |   <input type="submit" value="Go">
24 | </form>
25 | 26 |

← back to Dive Into HTML 5 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /examples/input-placeholder.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <input placeholder> - Dive Into HTML 5 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 | 19 |
20 | 21 | 
<form>
22 |   <input name="fn" placeholder="Your name">
23 |   <input type="submit" value="Go">
24 | </form>
25 | 26 |

← back to Dive Into HTML 5 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /examples/input-required.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <input required> - Dive Into HTML 5 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 | 19 |
20 | 21 | 
<form>
22 |   <input name="q" required>
23 |   <input type="submit" value="Go">
24 | </form>
25 | 26 |

← back to Dive Into HTML 5 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /examples/input-type-color.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <input type=color> - Dive Into HTML 5 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 | 19 |
20 | 21 | 
<form>
22 |   <input name="bg" type="color">
23 |   <input type="submit" value="Go">
24 | </form>
25 | 26 |

← back to Dive Into HTML 5 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /examples/input-type-date.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <input type=date> - Dive Into HTML 5 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 | 19 |
20 | 21 | 
<form>
22 |   <input name="birthday" type="date">
23 |   <input type="submit" value="Go">
24 | </form>
25 | 26 |
27 | 28 |

← back to Dive Into HTML 5 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /examples/input-type-datetime-local.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <input type=datetime-local> - Dive Into HTML 5 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 | 19 |
20 | 21 | 
<form>
22 |   <input name="t" type="datetime-local">
23 |   <input type="submit" value="Go">
24 | </form>
25 | 26 |
27 | 28 |

← back to Dive Into HTML 5 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /examples/input-type-datetime.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <input type=datetime> - Dive Into HTML 5 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 | 19 |
20 | 21 | 
<form>
22 |   <input name="t" type="datetime">
23 |   <input type="submit" value="Go">
24 | </form>
25 | 26 |
27 | 28 |

← back to Dive Into HTML 5 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /examples/input-type-email.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <input type=email> - Dive Into HTML 5 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 | 19 |
20 | 21 | 
<form>
22 |   <input name="addr" type="email">
23 |   <input type="submit" value="Go">
24 | </form>
25 | 26 |

← back to Dive Into HTML 5 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /examples/input-type-month.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <input type=month> - Dive Into HTML 5 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 | 19 |
20 | 21 | 
<form>
22 |   <input name="m" type="month">
23 |   <input type="submit" value="Go">
24 | </form>
25 | 26 |
27 | 28 |

← back to Dive Into HTML 5 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /examples/input-type-number-min-max-step.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <input type=number> with attributes - Dive Into HTML 5 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 | 19 |
20 | 21 | 
<form>
22 |   <input name="n"
23 |          type="number"
24 |          min="0"
25 |          max="10"
26 |          step="2"
27 |          value="6">
28 |   <input type="submit" value="Go">
29 | </form>
30 | 31 |

← back to Dive Into HTML 5 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /examples/input-type-number.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <input type=number> - Dive Into HTML 5 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 | 19 |
20 | 21 | 
<form>
22 |   <input name="n" type="number">
23 |   <input type="submit" value="Go">
24 | </form>
25 | 26 |

← back to Dive Into HTML 5 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /examples/input-type-range.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <input type=range> - Dive Into HTML 5 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 | 19 |
20 | 21 | 
<form>
22 |   <input name="r" type="range" min="1" max="11" value="9">
23 |   <input type="submit" value="Go">
24 | </form>
25 | 26 |

← back to Dive Into HTML 5 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /examples/input-type-search.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <input type=search> - Dive Into HTML 5 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 | 19 |
20 | 21 | 
<form>
22 |   <input name="q" type="search">
23 |   <input type="submit" value="Go">
24 | </form>
25 | 26 |

← back to Dive Into HTML 5 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /examples/input-type-tel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <input type=tel> - Dive Into HTML 5 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 | 19 |
20 | 21 | 
<form>
22 |   <input name="ph" type="tel">
23 |   <input type="submit" value="Go">
24 | </form>
25 | 26 |

← back to Dive Into HTML 5 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /examples/input-type-time.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <input type=time> - Dive Into HTML 5 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 | 19 |
20 | 21 | 
<form>
22 |   <input name="t" type="time">
23 |   <input type="submit" value="Go">
24 | </form>
25 | 26 |
27 | 28 |

← back to Dive Into HTML 5 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /examples/input-type-url.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <input type=url> - Dive Into HTML 5 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 | 19 |
20 | 21 | 
<form>
22 |   <input name="addr" type="url">
23 |   <input type="submit" value="Go">
24 | </form>
25 | 26 |

← back to Dive Into HTML 5 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /examples/input-type-week.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <input type=week> - Dive Into HTML 5 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 | 19 |
20 | 21 | 
<form>
22 |   <input name="w" type="week">
23 |   <input type="submit" value="Go">
24 | </form>
25 | 26 |
27 | 28 |

← back to Dive Into HTML 5 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /examples/localstorage-halma.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Halma 7 | 8 | 9 | 10 |

Halma with HTML5 Storage

11 |

(Rules of play, explanation of localStorage implementation)

12 | 13 |

Moves: 0

14 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /examples/offline/.htaccess: -------------------------------------------------------------------------------- 1 | ExpiresActive On 2 | ExpiresDefault "access" 3 | -------------------------------------------------------------------------------- /examples/offline/clock.css: -------------------------------------------------------------------------------- 1 | body { color:black; background-color: white; } 2 | span { color:red; background-color:transparent; } 3 | -------------------------------------------------------------------------------- /examples/offline/clock.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Offline Clock 5 | 6 | 7 | 8 | 9 |

The time is:

10 |

window.applicationCache.status is

11 |

[alphabet]

12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/offline/clock.js: -------------------------------------------------------------------------------- 1 | var alphabet_index = 0; 2 | 3 | function status_message(status) { 4 | if (status == 0) { 5 | return "not cached"; 6 | } else if (status == 1) { 7 | return "fully cached and operational offline"; 8 | } else if (status == 2) { 9 | return "checking for changes to the cache manifest..."; 10 | } else if (status == 3) { 11 | return "downloading changed resources..."; 12 | } else if (status == 4) { 13 | return "ready to switch to updated offline version"; 14 | } 15 | return ""; 16 | } 17 | 18 | window.setInterval(function () { 19 | document.getElementById('clock').innerHTML = new Date(); 20 | var status = window.applicationCache.status; 21 | document.getElementById('status').innerHTML = status + " [" + status_message(status) + "]"; 22 | alphabet_index = alphabet_index + 1; 23 | if (alphabet_index == 9) { 24 | alphabet_index = 10; 25 | } 26 | if (alphabet_index == 20) { 27 | alphabet_index = 21; 28 | } 29 | if (alphabet_index > 25) { 30 | alphabet_index = 0; 31 | } 32 | document.getElementById("alphabet").src = "http://b.wearehugh.com/dih5/aoc-" + String.fromCharCode(97 + alphabet_index) + ".png"; 33 | }, 1000); 34 | 35 | window.applicationCache.addEventListener("updateready", function() { 36 | window.applicationCache.swapCache(); 37 | }, false); 38 | -------------------------------------------------------------------------------- /examples/offline/clock.manifest: -------------------------------------------------------------------------------- 1 | CACHE MANIFEST 2 | # revision 3 | clock.html 4 | clock.css 5 | clock.js 6 | http://b.wearehugh.com/dih5/aoc-a.png 7 | http://b.wearehugh.com/dih5/aoc-b.png 8 | http://b.wearehugh.com/dih5/aoc-c.png 9 | http://b.wearehugh.com/dih5/aoc-d.png 10 | http://b.wearehugh.com/dih5/aoc-e.png 11 | http://b.wearehugh.com/dih5/aoc-f.png 12 | http://b.wearehugh.com/dih5/aoc-g.png 13 | http://b.wearehugh.com/dih5/aoc-h.png 14 | http://b.wearehugh.com/dih5/aoc-i.png 15 | http://b.wearehugh.com/dih5/aoc-k.png 16 | http://b.wearehugh.com/dih5/aoc-l.png 17 | http://b.wearehugh.com/dih5/aoc-m.png 18 | http://b.wearehugh.com/dih5/aoc-n.png 19 | http://b.wearehugh.com/dih5/aoc-o.png 20 | http://b.wearehugh.com/dih5/aoc-p.png 21 | http://b.wearehugh.com/dih5/aoc-q.png 22 | http://b.wearehugh.com/dih5/aoc-r.png 23 | http://b.wearehugh.com/dih5/aoc-s.png 24 | http://b.wearehugh.com/dih5/aoc-t.png 25 | http://b.wearehugh.com/dih5/aoc-v.png 26 | http://b.wearehugh.com/dih5/aoc-w.png 27 | http://b.wearehugh.com/dih5/aoc-x.png 28 | http://b.wearehugh.com/dih5/aoc-y.png 29 | http://b.wearehugh.com/dih5/aoc-z.png 30 | -------------------------------------------------------------------------------- /examples/offline/halma.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Halma 6 | 7 | 8 | 9 |

Offline Halma

10 |

Moves: 0

11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/offline/halma.manifest: -------------------------------------------------------------------------------- 1 | CACHE MANIFEST 2 | # revision 3 | halma.html 4 | ../halma-localstorage.js 5 | -------------------------------------------------------------------------------- /examples/organization-plus-microdata.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Business listings 7 | 8 | 9 | 10 | 11 |
12 |
13 |

Mark’s Phone Book

14 |

HTML5-enabled business listings

15 |
16 |
17 |
18 |

Google, Inc.

19 | 20 | [globe] 21 | 22 |

24 | 1600 Amphitheatre Parkway
25 | Mountain View, 26 | CA 27 | 94043 28 | USA 29 |

30 |

650-253-0000

31 |

32 | 33 | 34 | 35 | 36 |
37 |
38 |

Yahoo! Inc.

39 | 40 | [globe] 41 | 42 |

44 | 701 First Avenue
45 | Sunnyvale, 46 | CA 47 | 94089 48 | USA 49 |

50 |

408-349-3300

51 |

52 | 53 | 54 | 55 | 56 |
57 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /examples/organization.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Business listings 7 | 8 | 9 | 10 | 11 |
12 |
13 |

Mark’s Phone Book

14 |

HTML5-enabled business listings

15 |
16 |
17 |
18 |

Google, Inc.

19 | [globe] 20 |

21 | 1600 Amphitheatre Parkway
22 | Mountain View, CA 94043
23 | USA 24 |

25 |

650-253-0000

26 |

Google.com

27 |
28 |
29 |

Yahoo! Inc.

30 | [globe] 31 |

32 | 701 First Avenue
33 | Sunnyvale, CA 94089
34 | USA 35 |

36 |

408-349-3300

37 |

Yahoo.com

38 |
39 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /examples/person-plus-microdata.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About Mark Pilgrim 7 | 8 | 9 | 10 | 11 |
12 |
13 |

My Weblog

14 |

A lot of effort went into making this effortless.

15 |
16 | 24 |
25 |
26 | [Mark Pilgrim, circa 2000] 29 | 30 |

Contact Information

31 |
32 |
Name
33 |
Mark Pilgrim
34 | 35 |
Position
36 |
Developer advocate for 37 | Google, Inc.
38 | 39 |
Mailing address
40 |
42 | 100 Main Street
43 | Anytown, 44 | PA 45 | 19999
46 | USA 47 |
48 |
49 |

My Digital Footprints

50 | 56 |
57 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /examples/person.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About Mark Pilgrim 7 | 8 | 9 | 10 | 11 |
12 |
13 |

My Weblog

14 |

A lot of effort went into making this effortless.

15 |
16 | 24 |
25 |
26 | [Mark Pilgrim, circa 2000] 29 | 30 |

Contact Information

31 |
32 |
Name
33 |
Mark Pilgrim
34 | 35 |
Position
36 |
Developer advocate for Google, Inc.
37 | 38 |
Mailing address
39 |
40 | 100 Main Street
41 | Anytown, PA 19999
42 | USA 43 |
44 |
45 |

My Digital Footprints

46 | 52 |
53 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /examples/placeholder: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/examples/placeholder -------------------------------------------------------------------------------- /examples/review-plus-microdata.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Anna’s Pizzeria: review 7 | 8 | 9 | 10 | 11 |
12 |
13 |

Mark’s Picks

14 |

HTML5-enabled business reviews

15 |
16 |
17 |
18 |

Anna’s Pizzeria

19 |

★★★★☆ (4 stars out of 5)

20 |

New York-style pizza right in historic downtown Apex

21 |

Food is top-notch. Atmosphere is just right for a “neighborhood pizza joint.” The restaurant itself is a bit cramped; if you’re overweight, you may have difficulty getting in and out of your seat and navigating between other tables. Used to give free garlic knots when you sat down; now they give you plain bread and you have to pay for the good stuff. Overall, it’s a winner.

22 | [globe] 23 |

25 | 100 North Salem Street
26 | Apex, 27 | NC 28 | 27502
29 | USA 30 |

31 | 33 | 34 | 35 | 36 |

— reviewed by Mark Pilgrim, last updated

37 |
38 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /examples/review.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Anna’s Pizzeria: review 7 | 8 | 9 | 10 | 11 |
12 |
13 |

Mark’s Picks

14 |

HTML5-enabled business reviews

15 |
16 |
17 |
18 |

Anna’s Pizzeria

19 |

★★★★☆ (4 stars out of 5)

20 |

New York-style pizza right in historic downtown Apex

21 |

Food is top-notch. Atmosphere is just right for a “neighborhood pizza joint.” The restaurant itself is a bit cramped; if you’re overweight, you may have difficulty getting in and out of your seat and navigating between other tables. Used to give free garlic knots when you sat down; now they give you plain bread and you have to pay for the good stuff. Overall, it’s a winner.

22 | [globe] 23 |

24 | 100 North Salem Street
25 | Apex, NC 27502
26 | USA 27 |

28 |

— reviewed by Mark Pilgrim, last updated March 31, 2010

29 |
30 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /examples/style-html5.css: -------------------------------------------------------------------------------- 1 | /* HTML5-specific CSS setup */ 2 | article,aside,figure,footer,header,hgroup,nav,section{display:block} 3 | 4 | html{background:white;color:black} 5 | body{font:normal medium 'Gill Sans','Gill Sans MT','Goudy Bookletter 1911','Linux Libertine O','Liberation Serif',Candara,serif;padding:0;margin:0 auto;width:40em;line-height:1.75;word-spacing:0.1em} 6 | .a{font: 100%/1 "Arial Unicode MS",FreeSerif,OpenSymbol,"DejaVu Sans",sans-serif} 7 | a{background:transparent;text-decoration:none;border-bottom:1px dotted} 8 | a:hover{border-bottom:1px solid} 9 | a:link{color:#1b67c9} 10 | a:visited{color:darkorchid} 11 | a.simple{border:0 !important;float:left;display:block;margin-right:20px} 12 | h1 a{color:inherit !important} 13 | h2,p{margin:1.75em 0;font-weight:normal} 14 | h1,h2{font-size:medium} 15 | header{background:black;color:white;margin:0;padding:1.75em 0} 16 | nav a:link{color:white} 17 | nav a:visited{color:white} 18 | h1{letter-spacing:1em;text-align:center;margin:0} 19 | h2{text-align:center;font-size:medium;line-height:2.154} 20 | article header,section header{background:white;color:black;margin:0;padding:0} 21 | article h1,section h1{letter-spacing:0;text-align:left;margin:1.75em 0} 22 | #arc th,#arc td{list-style:none;margin:0;padding:0} 23 | #arc th,.r{text-align:right} 24 | #arc th{padding:0 1.75em 0 0;vertical-align:baseline} 25 | #arc{border-collapse:collapse} 26 | footer,.c{text-align:center;clear:both} 27 | time{float:right;font-size:small;margin:2px 0 0 0} 28 | .review time{float:none;font-size:inherit;margin:inherit} 29 | nav ul{margin:0;padding:0 1em 0 0;text-align:center} 30 | nav li{display:inline;padding-left:1em} 31 | dt{clear:left;float:left;width:8em} 32 | dd{margin-left:8em} 33 | address{font-style:normal} 34 | address+p{margin-top:0} 35 | img.me{display:block;float:right;border:1px solid black;margin-left:1.75em} 36 | .phonebook article p,.phonebook article address{margin:0 0 0 120px} 37 | .review article p{margin:1.75em 0} -------------------------------------------------------------------------------- /examples/style-original.css: -------------------------------------------------------------------------------- 1 | html{background:white;color:black} 2 | body{font:normal medium 'Gill Sans','Gill Sans MT','Goudy Bookletter 1911','Linux Libertine O','Liberation Serif',Candara,serif;padding:0;margin:0 auto;width:40em;line-height:1.75;word-spacing:0.1em} 3 | a{background:transparent;text-decoration:none;border-bottom:1px dotted} 4 | a:hover{border-bottom:1px solid} 5 | a:link{color:#1b67c9} 6 | a:visited{color:darkorchid} 7 | h1 a,h2 a,h3 a{color:inherit !important} 8 | h2,h3,p{margin:1.75em 0} 9 | h1,h2,h3{font-size:medium} 10 | h1{letter-spacing:1em;text-align:center;margin:0} 11 | #header{background:black;color:white;margin:0;padding:1.75em 0} 12 | #header p{text-align:center;font-size:medium;line-height:2.154} 13 | #header a{color:white} 14 | #arc th,#arc td{list-style:none;margin:0;padding:0} 15 | #arc th{text-align:right} 16 | #footer,.c{text-align:center;clear:both} 17 | #arc th{padding:0 1.75em 0 0;vertical-align:baseline} 18 | #arc{border-collapse:collapse} 19 | .post-date{float:right;font-size:small;margin:2px 0 0 0} 20 | #nav ul{margin:0;padding:0 1em 0 0;text-align:center} 21 | #nav li{display:inline;padding-left:1em} 22 | -------------------------------------------------------------------------------- /f/.htaccess: -------------------------------------------------------------------------------- 1 | ExpiresActive On 2 | ExpiresDefault "access plus 1 year" 3 | -------------------------------------------------------------------------------- /f/chunk-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/chunk-webfont.eot -------------------------------------------------------------------------------- /f/chunk-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/chunk-webfont.ttf -------------------------------------------------------------------------------- /f/chunk-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/chunk-webfont.woff -------------------------------------------------------------------------------- /f/essays1743-italic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/essays1743-italic-webfont.eot -------------------------------------------------------------------------------- /f/essays1743-italic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/essays1743-italic-webfont.ttf -------------------------------------------------------------------------------- /f/essays1743-italic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/essays1743-italic-webfont.woff -------------------------------------------------------------------------------- /f/essays1743-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/essays1743-webfont.eot -------------------------------------------------------------------------------- /f/essays1743-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/essays1743-webfont.ttf -------------------------------------------------------------------------------- /f/essays1743-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/essays1743-webfont.woff -------------------------------------------------------------------------------- /f/linlibertine_bd-4.1.5-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/linlibertine_bd-4.1.5-webfont.eot -------------------------------------------------------------------------------- /f/linlibertine_bd-4.1.5-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/linlibertine_bd-4.1.5-webfont.ttf -------------------------------------------------------------------------------- /f/linlibertine_bd-4.1.5-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/linlibertine_bd-4.1.5-webfont.woff -------------------------------------------------------------------------------- /f/linlibertine_it-4.2.6-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/linlibertine_it-4.2.6-webfont.eot -------------------------------------------------------------------------------- /f/linlibertine_it-4.2.6-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/linlibertine_it-4.2.6-webfont.ttf -------------------------------------------------------------------------------- /f/linlibertine_it-4.2.6-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/linlibertine_it-4.2.6-webfont.woff -------------------------------------------------------------------------------- /f/linlibertine_re-4.7.5-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/linlibertine_re-4.7.5-webfont.eot -------------------------------------------------------------------------------- /f/linlibertine_re-4.7.5-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/linlibertine_re-4.7.5-webfont.ttf -------------------------------------------------------------------------------- /f/linlibertine_re-4.7.5-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/linlibertine_re-4.7.5-webfont.woff -------------------------------------------------------------------------------- /f/lmmono10-regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/lmmono10-regular-webfont.eot -------------------------------------------------------------------------------- /f/lmmono10-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/lmmono10-regular-webfont.ttf -------------------------------------------------------------------------------- /f/lmmono10-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/lmmono10-regular-webfont.woff -------------------------------------------------------------------------------- /f/lmmonoslant10-regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/lmmonoslant10-regular-webfont.eot -------------------------------------------------------------------------------- /f/lmmonoslant10-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/lmmonoslant10-regular-webfont.ttf -------------------------------------------------------------------------------- /f/lmmonoslant10-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/lmmonoslant10-regular-webfont.woff -------------------------------------------------------------------------------- /f/lmroman10-bold-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/lmroman10-bold-webfont.eot -------------------------------------------------------------------------------- /f/lmroman10-bold-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/lmroman10-bold-webfont.ttf -------------------------------------------------------------------------------- /f/lmroman10-bold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/lmroman10-bold-webfont.woff -------------------------------------------------------------------------------- /f/lmroman10-bolditalic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/lmroman10-bolditalic-webfont.eot -------------------------------------------------------------------------------- /f/lmroman10-bolditalic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/lmroman10-bolditalic-webfont.ttf -------------------------------------------------------------------------------- /f/lmroman10-bolditalic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/lmroman10-bolditalic-webfont.woff -------------------------------------------------------------------------------- /f/lmroman10-regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/lmroman10-regular-webfont.eot -------------------------------------------------------------------------------- /f/lmroman10-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/lmroman10-regular-webfont.ttf -------------------------------------------------------------------------------- /f/lmroman10-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/lmroman10-regular-webfont.woff -------------------------------------------------------------------------------- /f/lmromanslant10-bold-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/lmromanslant10-bold-webfont.eot -------------------------------------------------------------------------------- /f/lmromanslant10-bold-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/lmromanslant10-bold-webfont.ttf -------------------------------------------------------------------------------- /f/lmromanslant10-bold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/lmromanslant10-bold-webfont.woff -------------------------------------------------------------------------------- /f/lmromanslant10-regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/lmromanslant10-regular-webfont.eot -------------------------------------------------------------------------------- /f/lmromanslant10-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/lmromanslant10-regular-webfont.ttf -------------------------------------------------------------------------------- /f/lmromanslant10-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/f/lmromanslant10-regular-webfont.woff -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/favicon.ico -------------------------------------------------------------------------------- /fonts-original/LinLibertineFont-4.7.5-2.tgz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/fonts-original/LinLibertineFont-4.7.5-2.tgz -------------------------------------------------------------------------------- /fonts-original/chars: -------------------------------------------------------------------------------- 1 | 1234567890-=!@#$%^&*()_+[]\{}|;':",./<>? ABCDEFGHIJKLMNOPQSRTUVWXYZabcdefghijklmnopqrstuvwxyz’“”…—•№ü↜↶↷⇜⇝ -------------------------------------------------------------------------------- /fonts-original/chunk.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/fonts-original/chunk.zip -------------------------------------------------------------------------------- /fonts-original/essays1743-1.203-1-ttf.tar.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/fonts-original/essays1743-1.203-1-ttf.tar.gz -------------------------------------------------------------------------------- /fonts-original/lm1.106otf.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/fonts-original/lm1.106otf.zip -------------------------------------------------------------------------------- /i/.htaccess: -------------------------------------------------------------------------------- 1 | ExpiresActive On 2 | ExpiresDefault "access plus 1 year" 3 | 4 | AddType video/ogg .ogv 5 | AddType video/mp4 .mp4 6 | AddType video/webm .webm 7 | 8 | SetEnvIfNoCase Request_URI \.(og[gav]|mp4|m4a|webm)$ no-gzip dont-vary 9 | -------------------------------------------------------------------------------- /i/aoc-a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/aoc-a.png -------------------------------------------------------------------------------- /i/aoc-b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/aoc-b.png -------------------------------------------------------------------------------- /i/aoc-c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/aoc-c.png -------------------------------------------------------------------------------- /i/aoc-d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/aoc-d.png -------------------------------------------------------------------------------- /i/aoc-e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/aoc-e.png -------------------------------------------------------------------------------- /i/aoc-f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/aoc-f.png -------------------------------------------------------------------------------- /i/aoc-g.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/aoc-g.png -------------------------------------------------------------------------------- /i/aoc-h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/aoc-h.png -------------------------------------------------------------------------------- /i/aoc-i.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/aoc-i.png -------------------------------------------------------------------------------- /i/aoc-k.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/aoc-k.png -------------------------------------------------------------------------------- /i/aoc-l.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/aoc-l.png -------------------------------------------------------------------------------- /i/aoc-m.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/aoc-m.png -------------------------------------------------------------------------------- /i/aoc-n.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/aoc-n.png -------------------------------------------------------------------------------- /i/aoc-o.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/aoc-o.png -------------------------------------------------------------------------------- /i/aoc-p.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/aoc-p.png -------------------------------------------------------------------------------- /i/aoc-q.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/aoc-q.png -------------------------------------------------------------------------------- /i/aoc-r.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/aoc-r.png -------------------------------------------------------------------------------- /i/aoc-s.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/aoc-s.png -------------------------------------------------------------------------------- /i/aoc-t.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/aoc-t.png -------------------------------------------------------------------------------- /i/aoc-v.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/aoc-v.png -------------------------------------------------------------------------------- /i/aoc-w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/aoc-w.png -------------------------------------------------------------------------------- /i/aoc-x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/aoc-x.png -------------------------------------------------------------------------------- /i/aoc-y.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/aoc-y.png -------------------------------------------------------------------------------- /i/aoc-z.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/aoc-z.png -------------------------------------------------------------------------------- /i/baselines.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/baselines.png -------------------------------------------------------------------------------- /i/canvas-half-pixels-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/canvas-half-pixels-1.jpg -------------------------------------------------------------------------------- /i/canvas-half-pixels-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/canvas-half-pixels-2.jpg -------------------------------------------------------------------------------- /i/dot-tan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/dot-tan.png -------------------------------------------------------------------------------- /i/dot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/dot.png -------------------------------------------------------------------------------- /i/drawImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/drawImage.png -------------------------------------------------------------------------------- /i/firefogg-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/firefogg-01.png -------------------------------------------------------------------------------- /i/firefogg-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/firefogg-02.png -------------------------------------------------------------------------------- /i/firefogg-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/firefogg-03.png -------------------------------------------------------------------------------- /i/firefogg-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/firefogg-04.png -------------------------------------------------------------------------------- /i/firefogg-05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/firefogg-05.png -------------------------------------------------------------------------------- /i/firefogg-06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/firefogg-06.png -------------------------------------------------------------------------------- /i/firefogg-07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/firefogg-07.png -------------------------------------------------------------------------------- /i/firefogg-08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/firefogg-08.png -------------------------------------------------------------------------------- /i/firefogg-09.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/firefogg-09.png -------------------------------------------------------------------------------- /i/firefogg-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/firefogg-10.png -------------------------------------------------------------------------------- /i/firefogg-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/firefogg-11.png -------------------------------------------------------------------------------- /i/firefogg-12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/firefogg-12.png -------------------------------------------------------------------------------- /i/firefogg-13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/firefogg-13.png -------------------------------------------------------------------------------- /i/forms.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/forms.png -------------------------------------------------------------------------------- /i/gears.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/gears.png -------------------------------------------------------------------------------- /i/geolocation-opt-in.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/geolocation-opt-in.png -------------------------------------------------------------------------------- /i/handbrake-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/handbrake-01.png -------------------------------------------------------------------------------- /i/handbrake-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/handbrake-02.png -------------------------------------------------------------------------------- /i/handbrake-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/handbrake-03.png -------------------------------------------------------------------------------- /i/handbrake-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/handbrake-04.png -------------------------------------------------------------------------------- /i/handbrake-05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/handbrake-05.png -------------------------------------------------------------------------------- /i/handbrake-06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/handbrake-06.png -------------------------------------------------------------------------------- /i/handbrake-07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/handbrake-07.png -------------------------------------------------------------------------------- /i/handbrake-08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/handbrake-08.png -------------------------------------------------------------------------------- /i/handbrake-09.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/handbrake-09.png -------------------------------------------------------------------------------- /i/handbrake-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/handbrake-10.png -------------------------------------------------------------------------------- /i/handbrake-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/handbrake-11.png -------------------------------------------------------------------------------- /i/input-required.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/input-required.png -------------------------------------------------------------------------------- /i/input-type-color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/input-type-color.png -------------------------------------------------------------------------------- /i/input-type-date.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/input-type-date.png -------------------------------------------------------------------------------- /i/input-type-datetime.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/input-type-datetime.png -------------------------------------------------------------------------------- /i/input-type-email-validation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/input-type-email-validation.png -------------------------------------------------------------------------------- /i/input-type-email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/input-type-email.png -------------------------------------------------------------------------------- /i/input-type-month.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/input-type-month.png -------------------------------------------------------------------------------- /i/input-type-number-at-max-opera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/input-type-number-at-max-opera.png -------------------------------------------------------------------------------- /i/input-type-number-opera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/input-type-number-opera.png -------------------------------------------------------------------------------- /i/input-type-number-validation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/input-type-number-validation.png -------------------------------------------------------------------------------- /i/input-type-number.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/input-type-number.png -------------------------------------------------------------------------------- /i/input-type-range.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/input-type-range.png -------------------------------------------------------------------------------- /i/input-type-search-safari-typing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/input-type-search-safari-typing.png -------------------------------------------------------------------------------- /i/input-type-search-safari.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/input-type-search-safari.png -------------------------------------------------------------------------------- /i/input-type-search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/input-type-search.png -------------------------------------------------------------------------------- /i/input-type-tel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/input-type-tel.png -------------------------------------------------------------------------------- /i/input-type-time.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/input-type-time.png -------------------------------------------------------------------------------- /i/input-type-url-validation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/input-type-url-validation.png -------------------------------------------------------------------------------- /i/input-type-url.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/input-type-url.png -------------------------------------------------------------------------------- /i/input-type-week.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/input-type-week.png -------------------------------------------------------------------------------- /i/johnny_automatic_gerbil_in_a_chair.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/johnny_automatic_gerbil_in_a_chair.png -------------------------------------------------------------------------------- /i/johnny_automatic_man_using_binoculars_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/johnny_automatic_man_using_binoculars_2.png -------------------------------------------------------------------------------- /i/johnny_automatic_planet_with_spyglass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/johnny_automatic_planet_with_spyglass.png -------------------------------------------------------------------------------- /i/location-bar-empty-focused.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/location-bar-empty-focused.png -------------------------------------------------------------------------------- /i/location-bar-empty-unfocused.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/location-bar-empty-unfocused.png -------------------------------------------------------------------------------- /i/markup-with-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/markup-with-arrow.png -------------------------------------------------------------------------------- /i/miro-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/miro-01.png -------------------------------------------------------------------------------- /i/miro-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/miro-02.png -------------------------------------------------------------------------------- /i/miro-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/miro-03.png -------------------------------------------------------------------------------- /i/miro-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/miro-04.png -------------------------------------------------------------------------------- /i/miro-05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/miro-05.png -------------------------------------------------------------------------------- /i/miro-06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/miro-06.png -------------------------------------------------------------------------------- /i/miro-07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/miro-07.png -------------------------------------------------------------------------------- /i/miro-08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/miro-08.png -------------------------------------------------------------------------------- /i/miro-09.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/miro-09.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_3_birds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_3_birds.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_8_from_behind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_8_from_behind.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_Corsican_Pine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_Corsican_Pine.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_a_dog_and_a_cat_with_an_umbrella.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_a_dog_and_a_cat_with_an_umbrella.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_a_pink.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_a_pink.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_angry_guy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_angry_guy.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_animals_on_see_saw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_animals_on_see_saw.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_at_the_theater.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_at_the_theater.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_bag_of_money.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_bag_of_money.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_baseball_at_bat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_baseball_at_bat.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_big_sandwich.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_big_sandwich.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_blowfish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_blowfish.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_cabin_along_stream.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_cabin_along_stream.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_card_trick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_card_trick.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_clock_tower.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_clock_tower.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_demon_reading_Stewart_Orr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_demon_reading_Stewart_Orr.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_divider_cards.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_divider_cards.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_dog_on_chair.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_dog_on_chair.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_fishing_boat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_fishing_boat.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_girl_feeding_birds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_girl_feeding_birds.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_globe_man.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_globe_man.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_half_stack_of_horizontal_sections.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_half_stack_of_horizontal_sections.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_little_professor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_little_professor.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_man_reading_newspaper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_man_reading_newspaper.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_monkey_reading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_monkey_reading.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_newsboy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_newsboy.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_peeking_out_the_window.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_peeking_out_the_window.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_riding_a_bike.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_riding_a_bike.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_tree_on_top_of_hill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_tree_on_top_of_hill.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_typewriter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_typewriter.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_young_girl_pointing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_johnny_automatic_young_girl_pointing.png -------------------------------------------------------------------------------- /i/openclipart.org_maven_Galileo_Galilei.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_maven_Galileo_Galilei.png -------------------------------------------------------------------------------- /i/openclipart.org_media_files_Selanit_8331.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_media_files_Selanit_8331.png -------------------------------------------------------------------------------- /i/openclipart.org_media_files_johnny_automatic_1360.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_media_files_johnny_automatic_1360.png -------------------------------------------------------------------------------- /i/openclipart.org_media_files_johnny_automatic_4145.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_media_files_johnny_automatic_4145.png -------------------------------------------------------------------------------- /i/openclipart.org_media_files_johnny_automatic_4794.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_media_files_johnny_automatic_4794.png -------------------------------------------------------------------------------- /i/openclipart.org_media_files_johnny_automatic_7563.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/openclipart.org_media_files_johnny_automatic_7563.png -------------------------------------------------------------------------------- /i/pr6.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/pr6.mp4 -------------------------------------------------------------------------------- /i/pr6.ogv: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/pr6.ogv -------------------------------------------------------------------------------- /i/pr6.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/pr6.webm -------------------------------------------------------------------------------- /i/rel-email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/rel-email.png -------------------------------------------------------------------------------- /i/video.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/i/video.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Dive Into HTML5 4 | 5 | 6 | 7 | 19 | 20 | 21 |
22 |

Dive Into HTML5

23 |

by
Mark Pilgrim

24 |

with illustrations from the Public Domain

25 |
26 | 27 |

❧ 28 | 29 |

Dive Into HTML5 seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards. The final manuscript has been published on paper by O’Reilly, under the Google Press imprint. Buy the printed Work — artfully titled “HTML5: Up & Running” — and be the first in your Community to receive it. Your kind and sincere Feedback is always welcome. The Work shall remain online under the CC-BY-3.0 License. 30 | 31 |

Table of Contents

32 | 33 | 34 |
    35 |
  1. Introduction: Five Things You Should Know About HTML5 36 |
  2. A Quite Biased History of HTML5 37 |
  3. Detecting HTML5 Features: It’s Elementary, My Dear Watson 38 |
  4. What Does It All Mean? 39 |
  5. Let’s Call It a Draw(ing Surface) 40 |
  6. Video in a Flash (Without That Other Thing) 41 |
  7. You Are Here (And So Is Everybody Else) 42 |
  8. A Place To Put Your Stuff 43 |
  9. Let’s Take This Offline 44 |
  10. A Form of Madness 45 |
  11. “Distributed,” “Extensibility,” And Other Fancy Words 46 |
  12. Manipulating History for Fun & Profit 47 |
  13. The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything 48 |
  14. HTML5 Peeks, Pokes and Pointers 49 |
50 | 51 | 52 |

❧ 53 | 54 |

“If you’re good at something, never do it for free.” —The Joker
(but that doesn’t mean you should keep it to yourself) 55 | 56 |

Copyright MMIX–MMXI Mark Pilgrim 57 | 58 |

 
59 | 60 | 61 | 73 | -------------------------------------------------------------------------------- /introduction.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Five Things You Should Know About HTML5 - Dive Into HTML5 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 |

You are here: Home ‣ Dive Into HTML5 ‣ 15 |


Five Things You Should Know About HTML5

16 |

  17 |

❧ 18 |

1. It’s not one big thing

19 | 20 |

[mock video player] 21 | 22 |

You may well ask: “How can I start using HTML5 if older browsers don’t support it?” But the question itself is misleading. HTML5 is not one big thing; it is a collection of individual features. So you can’t detect “HTML5 support,” because that doesn’t make any sense. But you can detect support for individual features, like canvas, video, or geolocation. 23 | 24 |

You may think of HTML as tags and angle brackets. That’s an important part of it, but it’s not the whole story. The HTML5 specification also defines how those angle brackets interact with JavaScript, through the Document Object Model (DOM). HTML5 doesn’t just define a <video> tag; there is also a corresponding DOM API for video objects in the DOM. You can use this API to detect support for different video formats, play a video, pause, mute audio, track how much of the video has been downloaded, and everything else you need to build a rich user experience around the <video> tag itself. 25 | 26 |

Chapter 2 and Appendix A will teach you how to properly detect support for each new HTML5 feature. 27 | 28 |

2. You don’t need to throw anything away

29 | 30 |

[sample form controls] 31 | 32 |

Love it or hate it, you can’t deny that HTML 4 is the most successful markup format ever. HTML5 builds on that success. You don’t need to throw away your existing markup. You don’t need to relearn things you already know. If your web application worked yesterday in HTML 4, it will still work today in HTML5. Period. 33 | 34 |

Now, if you want to improve your web applications, you’ve come to the right place. Here’s a concrete example: HTML5 supports all the form controls from HTML 4, but it also includes new input controls. Some of these are long-overdue additions like sliders and date pickers; others are more subtle. For example, the email input type looks just like a text box, but mobile browsers will customize their onscreen keyboard to make it easier to type email addresses. Older browsers that don’t support the email input type will treat it as a regular text field, and the form still works with no markup changes or scripting hacks. This means you can start improving your web forms today, even if some of your visitors are stuck on IE 6. 35 | 36 |

Read all the gory details about HTML5 forms in Chapter 9. 37 | 38 |

3. It’s easy to get started

39 | 40 |

[sample HTML markup] 41 | 42 |

“Upgrading” to HTML5 can be as simple as changing your doctype. The doctype should already be on the first line of every HTML page. Previous versions of HTML defined a lot of doctypes, and choosing the right one could be tricky. In HTML5, there is only one doctype: 43 | 44 |

45 |

<!DOCTYPE html> 46 |

47 | 48 |

Upgrading to the HTML5 doctype won’t break your existing markup, because all the tags defined in HTML 4 are still supported in HTML5. But it will allow you to use — and validate — new semantic elements like <article>, <section>, <header>, and <footer>. You’ll learn all about these new elements in Chapter 3. 49 | 50 |

4. It already works

51 | 52 |

[form field with onscreen keyboard] 53 | 54 |

Whether you want to draw on a canvas, play video, design better forms, or build web applications that work offline, you’ll find that HTML5 is already well-supported. Firefox, Safari, Chrome, Opera, and mobile browsers already support canvas (Chapter 4), video (Chapter 5), geolocation (Chapter 6), local storage (Chapter 7), and more. Google already supports microdata annotations (Chapter 10). Even Microsoft — rarely known for blazing the trail of standards support — will be supporting most HTML5 features in the upcoming Internet Explorer 9. 55 | 56 |

[Gears saying "I can help"] 57 | 58 |

Each chapter of this book includes the all-too-familiar browser compatibility charts. But more importantly, each chapter includes a frank discussion of your options if you need to support older browsers. HTML5 features like geolocation (Chapter 6) and video (Chapter 5) were first provided by browser plugins like Gears or Flash. Other features, like canvas (Chapter 4), can be emulated entirely in JavaScript. This book will teach you how to target the native features of modern browsers, without leaving older browsers behind. 59 | 60 | 61 |

5. It’s here to stay

62 | 63 |

Tim Berners-Lee invented the world wide web in the early 1990s. He later founded the W3C to act as a steward of web standards, which the organization has done for more than 15 years. Here is what the W3C had to say about the future of web standards, in July 2009: 64 | 65 |

66 |

Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed. By doing so, and by increasing resources in the HTML Working Group, W3C hopes to accelerate the progress of HTML5 and clarify W3C’s position regarding the future of HTML. 67 |

68 | 69 |

HTML5 is here to stay. Let’s dive in. 70 | 71 |

❧ 72 | 73 |

74 |

Did You Know?

75 |
76 |

In association with Google Press, O’Reilly is distributing this book in a variety of formats, including paper, ePub, Mobi, and DRM-free PDF. The paid edition is called “HTML5: Up & Running,” and it is available now. 77 |

If you liked this introduction and want to show your appreciation, you can buy “HTML5: Up & Running” with this affiliate link or buy an electronic edition directly from O’Reilly. You’ll get a book, and I’ll get a buck. I do not currently accept direct donations. 78 |

79 |
80 |
81 | 82 |

Copyright MMIX–MMXI Mark Pilgrim 83 | 84 |

 
85 | 86 | 87 | -------------------------------------------------------------------------------- /j/.htaccess: -------------------------------------------------------------------------------- 1 | ExpiresActive On 2 | ExpiresDefault "access plus 1 year" 3 | -------------------------------------------------------------------------------- /j/canvastext-fx3.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deianvasilev/diveintohtml5/21c9303d88aa0df323074957ecb15be3605de0de/j/canvastext-fx3.js -------------------------------------------------------------------------------- /j/dih5.js: -------------------------------------------------------------------------------- 1 | /* 2 | The following three functions are taken from 3 | http://code.google.com/p/javascript-search-term-highlighter/ 4 | Copyright 2004 Dave Lemen 5 | 6 | Licensed under the Apache License, Version 2.0 (the "License"); 7 | you may not use this file except in compliance with the License. 8 | You may obtain a copy of the License at 9 | 10 | http://www.apache.org/licenses/LICENSE-2.0 11 | 12 | Unless required by applicable law or agreed to in writing, software 13 | distributed under the License is distributed on an "AS IS" BASIS, 14 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | See the License for the specific language governing permissions and 16 | limitations under the License. 17 | */ 18 | 19 | function getSearchTerms() { 20 | var highlighterParameters = 'q as_q as_epq as_oq query search'; 21 | var a = new Array(); 22 | var params = getParamValues(document.referrer/*document.location.href*/, highlighterParameters); 23 | var terms; 24 | for (i = 0; i < params.length; i++) { 25 | terms = parseTerms(params[i]); 26 | for (j = 0; j < terms.length; j++) { 27 | if (terms[j] != '') { 28 | a.push(terms[j].toLowerCase()); 29 | } 30 | } 31 | } 32 | return a; 33 | } 34 | 35 | function parseTerms(query) { 36 | var s = query + ''; 37 | s = s.replace(/(^|\s)(site|related|link|info|cache):[^\s]*(\s|$)/ig, ' '); 38 | s = s.replace(/[^a-z0-9_-]/ig, ' '); // word chars only. 39 | s = s.replace(/(^|\s)-/g, ' '); // +required -excluded ~synonyms 40 | s = s.replace(/\b(and|not|or)\b/ig, ' '); 41 | s = s.replace(/\b[a-z0-9]\b/ig, ' '); // one char terms 42 | return s.split(/\s+/); 43 | } 44 | 45 | function getParamValues(url, parameters) { 46 | var params = new Array(); 47 | var p = parameters.replace(/,/, ' ').split(/\s+/); 48 | if (url.indexOf('?') > 0) { 49 | var qs = url.substr(url.indexOf('?') + 1); 50 | var qsa = qs.split('&'); 51 | for (i = 0; i < qsa.length; i++) { 52 | nameValue = qsa[i].split('='); 53 | if (nameValue.length != 2) continue; 54 | for (j = 0; j < p.length; j++) { 55 | if (nameValue[0] == p[j]) { 56 | params.push(unescape(nameValue[1]).toLowerCase().replace(/\+/g, ' ')); 57 | } 58 | } 59 | } 60 | } 61 | return params; 62 | } 63 | 64 | /* 65 | The rest of this script is 66 | Copyright (c) 2009, Mark Pilgrim, All rights reserved. 67 | 68 | Redistribution and use in source and binary forms, with or without modification, 69 | are permitted provided that the following conditions are met: 70 | 71 | * Redistributions of source code must retain the above copyright notice, 72 | this list of conditions and the following disclaimer. 73 | * Redistributions in binary form must reproduce the above copyright notice, 74 | this list of conditions and the following disclaimer in the documentation 75 | and/or other materials provided with the distribution. 76 | 77 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 'AS IS' 78 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 79 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE 80 | ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE 81 | LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR 82 | CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF 83 | SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS 84 | INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN 85 | CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) 86 | ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE 87 | POSSIBILITY OF SUCH DAMAGE. 88 | */ 89 | 90 | $(document).ready(function() { 91 | hideTOC(); 92 | 93 | /* match terms with incoming search keywords and jump to the containing section */ 94 | var searchTerms = getSearchTerms(); 95 | $("dfn").each(function() { 96 | var dfn = $(this); 97 | var dfnTerm = dfn.text().toLowerCase(); 98 | if ($.inArray(dfnTerm, searchTerms) != -1) { 99 | var section = dfn.parents("p,table,ul,ol,blockquote").prevAll("*:header").get(0); 100 | if (section) { 101 | window.setTimeout(function() {document.location.hash = section.id;}, 0); 102 | return false; 103 | } 104 | } 105 | }); 106 | 107 | }); /* document.ready */ 108 | 109 | function hideTOC() { 110 | var toc = 'show table of contents'; 111 | $("#toc").html(toc); 112 | } 113 | 114 | function showTOC() { 115 | var toc = ''; 116 | var old_level = 1; 117 | $('h2,h3').each(function(i, h) { 118 | level = parseInt(h.tagName.substring(1)); 119 | if (level < old_level) { 120 | toc += ''; 121 | } else if (level > old_level) { 122 | toc += '
    '; 123 | } 124 | toc += '
  1. ' + h.innerHTML + ''; 125 | old_level = level; 126 | }); 127 | while (level > 1) { 128 | toc += '
'; 129 | level -= 1; 130 | } 131 | toc = 'hide table of contents
  1. ↑ Full table of contents
    2. ' + toc.substring(4); 132 | $("#toc").html(toc); 133 | } 134 | -------------------------------------------------------------------------------- /j/ga.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /j/gears_init.js: -------------------------------------------------------------------------------- 1 | // Copyright 2007, Google Inc. 2 | // 3 | // Redistribution and use in source and binary forms, with or without 4 | // modification, are permitted provided that the following conditions are met: 5 | // 6 | // 1. Redistributions of source code must retain the above copyright notice, 7 | // this list of conditions and the following disclaimer. 8 | // 2. Redistributions in binary form must reproduce the above copyright notice, 9 | // this list of conditions and the following disclaimer in the documentation 10 | // and/or other materials provided with the distribution. 11 | // 3. Neither the name of Google Inc. nor the names of its contributors may be 12 | // used to endorse or promote products derived from this software without 13 | // specific prior written permission. 14 | // 15 | // THIS SOFTWARE IS PROVIDED BY THE AUTHOR ``AS IS'' AND ANY EXPRESS OR IMPLIED 16 | // WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 17 | // MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO 18 | // EVENT SHALL THE AUTHOR BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 19 | // SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 20 | // PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; 21 | // OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 22 | // WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR 23 | // OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF 24 | // ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 25 | // 26 | // Sets up google.gears.*, which is *the only* supported way to access Gears. 27 | // 28 | // Circumvent this file at your own risk! 29 | // 30 | // In the future, Gears may automatically define google.gears.* without this 31 | // file. Gears may use these objects to transparently fix bugs and compatibility 32 | // issues. Applications that use the code below will continue to work seamlessly 33 | // when that happens. 34 | 35 | (function() { 36 | // We are already defined. Hooray! 37 | if (window.google && google.gears) { 38 | return; 39 | } 40 | 41 | var factory = null; 42 | 43 | // Firefox 44 | if (typeof GearsFactory != 'undefined') { 45 | factory = new GearsFactory(); 46 | } else { 47 | // IE 48 | try { 49 | factory = new ActiveXObject('Gears.Factory'); 50 | // privateSetGlobalObject is only required and supported on IE Mobile on 51 | // WinCE. 52 | if (factory.getBuildInfo().indexOf('ie_mobile') != -1) { 53 | factory.privateSetGlobalObject(this); 54 | } 55 | } catch (e) { 56 | // Safari 57 | if ((typeof navigator.mimeTypes != 'undefined') 58 | && navigator.mimeTypes["application/x-googlegears"]) { 59 | factory = document.createElement("object"); 60 | factory.style.display = "none"; 61 | factory.width = 0; 62 | factory.height = 0; 63 | factory.type = "application/x-googlegears"; 64 | document.documentElement.appendChild(factory); 65 | } 66 | } 67 | } 68 | 69 | // *Do not* define any objects if Gears is not installed. This mimics the 70 | // behavior of Gears defining the objects in the future. 71 | if (!factory) { 72 | return; 73 | } 74 | 75 | // Now set up the objects, being careful not to overwrite anything. 76 | // 77 | // Note: In Internet Explorer for Windows Mobile, you can't add properties to 78 | // the window object. However, global objects are automatically added as 79 | // properties of the window object in all browsers. 80 | if (!window.google) { 81 | google = {}; 82 | } 83 | 84 | if (!google.gears) { 85 | google.gears = {factory: factory}; 86 | } 87 | })(); 88 | -------------------------------------------------------------------------------- /j/gears_init.min.js: -------------------------------------------------------------------------------- 1 | (function(){if(window.google&&google.gears){return}var a=null;if(typeof GearsFactory!="undefined"){a=new GearsFactory()}else{try{a=new ActiveXObject("Gears.Factory");if(a.getBuildInfo().indexOf("ie_mobile")!=-1){a.privateSetGlobalObject(this)}}catch(b){if((typeof navigator.mimeTypes!="undefined")&&navigator.mimeTypes["application/x-googlegears"]){a=document.createElement("object");a.style.display="none";a.width=0;a.height=0;a.type="application/x-googlegears";document.documentElement.appendChild(a)}}}if(!a){return}if(!window.google){google={}}if(!google.gears){google.gears={factory:a}}})(); -------------------------------------------------------------------------------- /j/geo.js: -------------------------------------------------------------------------------- 1 | var bb_successCallback; 2 | var bb_errorCallback; 3 | 4 | function handleBlackBerryLocation() 5 | { 6 | if (bb_successCallback && bb_errorCallback) 7 | { 8 | if(blackberry.location.latitude==0 && blackberry.location.longitude==0) 9 | { 10 | //http://dev.w3.org/geo/api/spec-source.html#position_unavailable_error 11 | //POSITION_UNAVAILABLE (numeric value 2) 12 | bb_errorCallback({message:"Position unavailable", code:2}); 13 | } 14 | else 15 | { 16 | var timestamp=null; 17 | //only available with 4.6 and later 18 | //http://na.blackberry.com/eng/deliverables/8861/blackberry_location_568404_11.jsp 19 | if (blackberry.location.timestamp) 20 | { 21 | timestamp=new Date(blackberry.location.timestamp); 22 | } 23 | bb_successCallback({timestamp:timestamp, coords: {latitude:blackberry.location.latitude,longitude:blackberry.location.longitude}}); 24 | } 25 | //since blackberry.location.removeLocationUpdate(); 26 | //is not working as described http://na.blackberry.com/eng/deliverables/8861/blackberry_location_removeLocationUpdate_568409_11.jsp 27 | //the callback are set to null to indicate that the job is done 28 | 29 | bb_successCallback = null; 30 | bb_errorCallback = null; 31 | } 32 | 33 | } 34 | 35 | var geo_position_js=function() 36 | { 37 | 38 | var pub = {}; 39 | var provider=null; 40 | 41 | pub.getCurrentPosition = function(successCallback,errorCallback,options){ 42 | 43 | provider.getCurrentPosition(successCallback, errorCallback,options); 44 | } 45 | 46 | pub.init = function() 47 | { 48 | try 49 | { 50 | if (typeof(geo_position_js_simulator) != "undefined") 51 | { 52 | provider = geo_position_js_simulator; 53 | } 54 | else if (typeof(bondi) != "undefined" && typeof(bondi.geolocation) != "undefined") { 55 | provider = bondi.geolocation; 56 | } 57 | else if (typeof(navigator.geolocation) != "undefined") 58 | { 59 | provider = navigator.geolocation; 60 | pub.getCurrentPosition = function(successCallback, errorCallback, options) 61 | { 62 | function _successCallback(p){ 63 | 64 | //for mozilla geode,it returns the coordinates slightly differently 65 | if (typeof(p.latitude) != "undefined") { 66 | successCallback({ 67 | timestamp: p.timestamp, 68 | coords: { 69 | latitude: p.latitude, 70 | longitude: p.longitude 71 | } 72 | }); 73 | } 74 | else 75 | { 76 | successCallback(p); 77 | } 78 | } 79 | provider.getCurrentPosition(_successCallback, errorCallback, options); 80 | } 81 | } 82 | else if (typeof(window.google) != "undefined") 83 | { 84 | provider = google.gears.factory.create('beta.geolocation'); 85 | pub.getCurrentPosition = function(successCallback, errorCallback, options){ 86 | 87 | try 88 | { 89 | provider.getCurrentPosition(successCallback, errorCallback, options); 90 | } 91 | catch(e) 92 | { 93 | //this is thrown when the request is denied 94 | errorCallback({message:e,code:1}); 95 | } 96 | 97 | 98 | } 99 | } 100 | else if (typeof(Mojo) != "undefined" && typeof(Mojo.Service) != "undefined" && typeof(Mojo.Service.Request) != "Mojo.Service.Request") { 101 | provider = true; 102 | pub.getCurrentPosition = function(successCallback, errorCallback, options){ 103 | 104 | parameters = {}; 105 | if (options) { 106 | //http://developer.palm.com/index.php?option=com_content&view=article&id=1673#GPS-getCurrentPosition 107 | if (options.enableHighAccuracy && options.enableHighAccuracy == true) { 108 | parameters.accuracy = 1; 109 | } 110 | if (options.maximumAge) { 111 | parameters.maximumAge = options.maximumAge; 112 | } 113 | if (options.responseTime) { 114 | if (options.responseTime < 5) { 115 | parameters.responseTime = 1; 116 | } 117 | else 118 | if (options.responseTime < 20) { 119 | parameters.responseTime = 2; 120 | } 121 | else { 122 | parameters.timeout = 3; 123 | } 124 | } 125 | } 126 | 127 | 128 | r = new Mojo.Service.Request('palm://com.palm.location', { 129 | method: "getCurrentPosition", 130 | parameters: parameters, 131 | onSuccess: function(p){ 132 | successCallback({ 133 | timestamp: p.timestamp, 134 | coords: { 135 | latitude: p.latitude, 136 | longitude: p.longitude, 137 | heading: p.heading 138 | } 139 | }); 140 | }, 141 | onFailure: function(e){ 142 | if (e.errorCode == 1) { 143 | errorCallback({ 144 | code: 3, 145 | message: "Timeout" 146 | }); 147 | } 148 | else 149 | if (e.errorCode == 2) { 150 | errorCallback({ 151 | code: 2, 152 | message: "Position Unavailable" 153 | }); 154 | } 155 | else { 156 | errorCallback({ 157 | code: 0, 158 | message: "Unknown Error: webOS-code" + errorCode 159 | }); 160 | } 161 | } 162 | }); 163 | } 164 | 165 | } 166 | else if (typeof(device) != "undefined" && typeof(device.getServiceObject) != "undefined") { 167 | provider = device.getServiceObject("Service.Location", "ILocation"); 168 | 169 | //override default method implementation 170 | pub.getCurrentPosition = function(successCallback, errorCallback, options){ 171 | function callback(transId, eventCode, result){ 172 | if (eventCode == 4) { 173 | errorCallback({ 174 | message: "Position unavailable", 175 | code: 2 176 | }); 177 | } 178 | else { 179 | //no timestamp of location given? 180 | successCallback({ 181 | timestamp: null, 182 | coords: { 183 | latitude: result.ReturnValue.Latitude, 184 | longitude: result.ReturnValue.Longitude, 185 | altitude: result.ReturnValue.Altitude, 186 | heading: result.ReturnValue.Heading 187 | } 188 | }); 189 | } 190 | } 191 | //location criteria 192 | var criteria = new Object(); 193 | criteria.LocationInformationClass = "BasicLocationInformation"; 194 | //make the call 195 | provider.ILocation.GetLocation(criteria, callback); 196 | } 197 | } 198 | else if (typeof(window.blackberry) != "undefined" && blackberry.location.GPSSupported) { 199 | 200 | // set to autonomous mode 201 | blackberry.location.setAidMode(2); 202 | 203 | //override default method implementation 204 | pub.getCurrentPosition = function(successCallback, errorCallback, options){ 205 | 206 | //passing over callbacks as parameter didn't work consistently 207 | //in the onLocationUpdate method, thats why they have to be set 208 | //outside 209 | bb_successCallback = successCallback; 210 | bb_errorCallback = errorCallback; 211 | //function needs to be a string according to 212 | //http://www.tonybunce.com/2008/05/08/Blackberry-Browser-Amp-GPS.aspx 213 | blackberry.location.onLocationUpdate("handleBlackBerryLocation()"); 214 | blackberry.location.refreshLocation(); 215 | 216 | } 217 | provider = blackberry.location; 218 | 219 | } 220 | } 221 | catch (e) { 222 | if (typeof(console) != "undefined") { 223 | console.log(e); 224 | } 225 | } 226 | 227 | 228 | 229 | return provider!=null; 230 | } 231 | 232 | 233 | return pub; 234 | }(); -------------------------------------------------------------------------------- /j/geo.min.js: -------------------------------------------------------------------------------- 1 | var bb_successCallback;var bb_errorCallback;function handleBlackBerryLocation(){if(bb_successCallback&&bb_errorCallback){if(blackberry.location.latitude==0&&blackberry.location.longitude==0){bb_errorCallback({message:"Position unavailable",code:2})}else{var a=null;if(blackberry.location.timestamp){a=new Date(blackberry.location.timestamp)}bb_successCallback({timestamp:a,coords:{latitude:blackberry.location.latitude,longitude:blackberry.location.longitude}})}bb_successCallback=null;bb_errorCallback=null}}var geo_position_js=function(){var a={};var b=null;a.getCurrentPosition=function(c,d,e){b.getCurrentPosition(c,d,e)};a.init=function(){try{if(typeof(geo_position_js_simulator)!="undefined"){b=geo_position_js_simulator}else{if(typeof(bondi)!="undefined"&&typeof(bondi.geolocation)!="undefined"){b=bondi.geolocation}else{if(typeof(navigator.geolocation)!="undefined"){b=navigator.geolocation;a.getCurrentPosition=function(d,e,f){function g(h){if(typeof(h.latitude)!="undefined"){d({timestamp:h.timestamp,coords:{latitude:h.latitude,longitude:h.longitude}})}else{d(h)}}b.getCurrentPosition(g,e,f)}}else{if(typeof(window.google)!="undefined"){b=google.gears.factory.create("beta.geolocation");a.getCurrentPosition=function(d,f,g){try{b.getCurrentPosition(d,f,g)}catch(h){f({message:h,code:1})}}}else{if(typeof(Mojo)!="undefined"&&typeof(Mojo.Service)!="undefined"&&typeof(Mojo.Service.Request)!="Mojo.Service.Request"){b=true;a.getCurrentPosition=function(d,e,f){parameters={};if(f){if(f.enableHighAccuracy&&f.enableHighAccuracy==true){parameters.accuracy=1}if(f.maximumAge){parameters.maximumAge=f.maximumAge}if(f.responseTime){if(f.responseTime<5){parameters.responseTime=1}else{if(f.responseTime<20){parameters.responseTime=2}else{parameters.timeout=3}}}}r=new Mojo.Service.Request("palm://com.palm.location",{method:"getCurrentPosition",parameters:parameters,onSuccess:function(g){d({timestamp:g.timestamp,coords:{latitude:g.latitude,longitude:g.longitude,heading:g.heading}})},onFailure:function(g){if(g.errorCode==1){e({code:3,message:"Timeout"})}else{if(g.errorCode==2){e({code:2,message:"Position Unavailable"})}else{e({code:0,message:"Unknown Error: webOS-code"+errorCode})}}}})}}else{if(typeof(device)!="undefined"&&typeof(device.getServiceObject)!="undefined"){b=device.getServiceObject("Service.Location","ILocation");a.getCurrentPosition=function(d,e,f){function h(k,j,i){if(j==4){e({message:"Position unavailable",code:2})}else{d({timestamp:null,coords:{latitude:i.ReturnValue.Latitude,longitude:i.ReturnValue.Longitude,altitude:i.ReturnValue.Altitude,heading:i.ReturnValue.Heading}})}}var g=new Object();g.LocationInformationClass="BasicLocationInformation";b.ILocation.GetLocation(g,h)}}else{if(typeof(window.blackberry)!="undefined"&&blackberry.location.GPSSupported){blackberry.location.setAidMode(2);a.getCurrentPosition=function(d,e,f){bb_successCallback=d;bb_errorCallback=e;blackberry.location.onLocationUpdate("handleBlackBerryLocation()");blackberry.location.refreshLocation()};b=blackberry.location}}}}}}}}catch(c){if(typeof(console)!="undefined"){console.log(c)}}return b!=null};return a}(); -------------------------------------------------------------------------------- /j/html5-video.js: -------------------------------------------------------------------------------- 1 | /* 2 | html5-video.js 3 | Lets you pretend that