├── .gitignore ├── Makefile ├── README.md ├── about.html ├── canvas.html ├── detect.html ├── 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 ├── team.html ├── util ├── buildtoc.py ├── compiler.jar ├── htmlminimizer.py ├── lesscss.py ├── roman.py ├── validate.py └── yuicompressor-2.4.2.jar ├── video.html └── workers.html /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /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/diveintohtml5-common-${REVISION}.min.js 46 | cat build/j/legal.js build/j/gears_init.min.js build/j/geo.min.js > build/j/diveintohtml5-common-${REVISION}-maps.min.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| 52 | -------------------------------------------------------------------------------- /examples/.htaccess: -------------------------------------------------------------------------------- 1 | ExpiresActive On 2 | ExpiresDefault "access plus 1 day" 3 | -------------------------------------------------------------------------------- /examples/2000_05_mark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/examples/2000_05_mark.jpg -------------------------------------------------------------------------------- /examples/blog-html5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My Weblog 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 |
19 |

My Weblog

20 |

A lot of effort went into making this effortless.

21 |
22 | 23 | 31 | 32 |
33 | 34 |
35 |
36 | 37 |

38 | Travel day 39 |

40 |
41 | 42 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit felis accumsan turpis pretium tempor. Duis eu turpis nunc, ut euismod nisl. Aliquam erat volutpat. Proin eu eros mollis dui fringilla sodales. Curabitur venenatis tincidunt felis ac congue. Maecenas at odio dui, sit amet congue sapien. Proin placerat feugiat eros, non mollis quam pharetra at. Duis gravida eleifend ligula nec auctor. Fusce nulla diam, fringilla non ultrices in, iaculis eu tellus. Sed mollis consequat turpis sit amet facilisis. Donec pretium luctus aliquet. Curabitur placerat varius purus vel congue. Aliquam erat volutpat. Curabitur vitae eros sed turpis sollicitudin mattis. Morbi venenatis pulvinar nunc, at vulputate massa placerat a. Nam et tortor id nisi consequat tempor eget sit amet risus. Praesent bibendum, velit eu hendrerit porttitor, elit mauris posuere nisl, non pellentesque est leo a quam.

43 | 44 |
45 | 46 |
47 |
48 | 49 |

50 | I'm going to Prague! 51 |

52 |
53 | 54 |

Sed ante mi, sagittis sed euismod sit amet, convallis et nibh. Etiam sit amet odio dui, id semper turpis. Mauris risus mauris, imperdiet pulvinar vehicula et, hendrerit vitae dui. Phasellus ultrices lacus rhoncus purus posuere rutrum. Maecenas mattis eleifend scelerisque. Nulla quam sem, facilisis ac ultrices et, tincidunt eu dolor. Mauris arcu est, porttitor eu blandit nec, pulvinar sed enim. Praesent diam felis, cursus at facilisis eu, mollis ut elit. Praesent rutrum porta euismod. Nulla facilisi. Suspendisse potenti. In auctor ultricies eleifend. Proin erat dolor, malesuada non tempus nec, tincidunt in mi.

55 | 56 |
57 | 58 |

§ 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 |
October
5Vos vestros servate, meos mihi linquite mores
September
30Ut sementem feceris ita metes
August
4Risu inepto res ineptior nulla est
July
6Vitanda est improba siren desidia
April
21Mendacem oportet esse memorem
7Libenter homines id quod volunt credunt
March
27Gutta cavat lapidem
21Amoto quaeramus seria ludo
18Non est ars quae ad effectum casu venit
January
11Quid rides?...De te fabula narratur
79 | 80 |

87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /examples/blog-original.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My Weblog 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 29 | 30 |
31 |

October 22, 2009

32 |

33 | Travel day 34 |

35 | 36 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit felis accumsan turpis pretium tempor. Duis eu turpis nunc, ut euismod nisl. Aliquam erat volutpat. Proin eu eros mollis dui fringilla sodales. Curabitur venenatis tincidunt felis ac congue. Maecenas at odio dui, sit amet congue sapien. Proin placerat feugiat eros, non mollis quam pharetra at. Duis gravida eleifend ligula nec auctor. Fusce nulla diam, fringilla non ultrices in, iaculis eu tellus. Sed mollis consequat turpis sit amet facilisis. Donec pretium luctus aliquet. Curabitur placerat varius purus vel congue. Aliquam erat volutpat. Curabitur vitae eros sed turpis sollicitudin mattis. Morbi venenatis pulvinar nunc, at vulputate massa placerat a. Nam et tortor id nisi consequat tempor eget sit amet risus. Praesent bibendum, velit eu hendrerit porttitor, elit mauris posuere nisl, non pellentesque est leo a quam.

37 | 38 |
39 | 40 |
41 |

October 17, 2009

42 |

43 | I'm going to Prague! 44 |

45 | 46 |

Sed ante mi, sagittis sed euismod sit amet, convallis et nibh. Etiam sit amet odio dui, id semper turpis. Mauris risus mauris, imperdiet pulvinar vehicula et, hendrerit vitae dui. Phasellus ultrices lacus rhoncus purus posuere rutrum. Maecenas mattis eleifend scelerisque. Nulla quam sem, facilisis ac ultrices et, tincidunt eu dolor. Mauris arcu est, porttitor eu blandit nec, pulvinar sed enim. Praesent diam felis, cursus at facilisis eu, mollis ut elit. Praesent rutrum porta euismod. Nulla facilisi. Suspendisse potenti. In auctor ultricies eleifend. Proin erat dolor, malesuada non tempus nec, tincidunt in mi.

47 | 48 |
49 | 50 |

§

51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 |
October
5Vos vestros servate, meos mihi linquite mores
September
30Ut sementem feceris ita metes
August
4Risu inepto res ineptior nulla est
July
6Vitanda est improba siren desidia
April
21Mendacem oportet esse memorem
7Libenter homines id quod volunt credunt
March
27Gutta cavat lapidem
21Amoto quaeramus seria ludo
18Non est ars quae ad effectum casu venit
January
11Quid rides?...De te fabula narratur
71 | 72 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /examples/canvas-halma.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Halma 7 | 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 Day é uma chance de aprender sobre o desenvolvimento dos produtos Google pelos engenheiros que os constroem. Essa conferência de um dia inclui seminários e “workshops” em tecnologias web como Google Maps, OpenSocial, Android, APIs AJAX, Chrome, e Google Web Toolkit.

26 |

2009 November 6, 27 | 28 | – 29 |

30 |

32 | Congress Center
33 | 35 | 5th května 65
36 | 140 21 37 | Praha 4
38 | Czech Republic 39 | 40 |

41 | 42 | 43 | 44 | 45 |

46 | 50 |

51 |

§

52 |
53 |
54 |

ConFoo.ca 2010

55 | 56 | [drawing of clenched fist with 'HTML5' spelled on knuckles] 59 |

PHP Québec, Montréal-Python, Montréal on Rails, W3Qc e OWASP Montréal tem orgulho de anunciar a primeira edição da conferência Confoo.ca. Experts internacionais em Java, .Net, PHP, Python e Ruby irão apresentar soluções para desenvolvedores e gerentes de projeto.

60 |

61 | – 62 |

63 |

65 | Hilton Montreal Bonaventure
66 | 68 | 900 de La Gauchetière West,
69 | Montréal, 70 | Québec,
71 | Canada 72 | H5A 1E4 73 | 74 |

75 | 76 | 77 | 78 | 79 |

80 | 81 |

82 |
83 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /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 |

23 | Google Developer Day é uma chance de aprender sobre o desenvolvimento dos produtos Google pelos engenheiros que os constroem. Essa conferência de um dia inclui seminários e “workshops” em tecnologias web como Google Maps, OpenSocial, Android, APIs AJAX, Chrome, e Google Web Toolkit.

24 |

25 | 26 | – 27 | 28 |

29 |

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

35 |

GDD/Prague home page

36 |

§

37 |
38 |
39 |

ConFoo.ca 2010

40 | [clenched fist with 'HTML5' on knuckles] 43 |

PHP Québec, Montréal-Python, Montréal on Rails, W3Qc e OWASP Montréal tem orgulho de anunciar a primeira edição da conferência Confoo.ca. Experts internacionais em Java, .Net, PHP, Python e Ruby irão apresentar soluções para desenvolvedores e gerentes de projeto.

44 |

2010 March 10–12

45 |

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

51 |

ConFoo.ca home page

52 |
53 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /examples/freedo_Glossy_Globe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/examples/freedo_Glossy_Globe.png -------------------------------------------------------------------------------- /examples/gdd-2009-prague-pilgrim.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/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/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/examples/history/gallery/1972-fer-500.jpg -------------------------------------------------------------------------------- /examples/history/gallery/1984-brandy-500.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/examples/history/gallery/1984-brandy-500.jpg -------------------------------------------------------------------------------- /examples/history/gallery/1984-casey-500.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/examples/history/gallery/1984-casey-500.jpg -------------------------------------------------------------------------------- /examples/history/gallery/1989-willie-500.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/examples/history/gallery/1989-willie-500.jpg -------------------------------------------------------------------------------- /examples/history/gallery/1992-pepper-500.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/examples/history/gallery/1992-pepper-500.jpg -------------------------------------------------------------------------------- /examples/history/gallery/1995-adagio-500.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/examples/history/gallery/1995-adagio-500.jpg -------------------------------------------------------------------------------- /examples/history/gallery/2000-angie-500.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/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/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/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 | 
<head>
30 |   <script src="jquery.js"></script>
31 |   <script>
32 |     $(document).bind('autofocus_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 |   <script>$(document).trigger('autofocus_ready');</script>
43 |   <input type="submit" value="Go">
44 | </form>
45 | </body>
46 |
47 | 48 |

← voltar para Dive Into HTML 5 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /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 | 
<head>
29 |   <script src="jquery.js"></script>
30 |   <script>
31 |     $(document).ready(function() {
32 |       if (!("autofocus" in document.createElement("input"))) {
33 |         $("#q").focus();
34 |       }
35 |     });
36 |   </script>
37 | </head>
38 | <body>
39 |   <form name="f">
40 |   <input id="q" autofocus>
41 |   <input type="submit" value="Go">
42 | </form>
43 | </body>
44 |
45 | 46 |

jQuery executa o evento personalizado ready logo que o DOM estiver disponível — isto é, ele espera até que todo o texto da página carregue, mas não espera até todas as imagens. Não está perto do ideal — se a página for consideravelmente grande ou a conexão de internet for extremamente baixa, o usuário pode começar a interagir com a página antes do seu script de foco automático execute. Mas é muito melhor que esperar o window.onload

47 | 48 |

← voltar para Dive Into HTML 5 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /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 | 
<form name="f">
21 |   <input id="q" autofocus>
22 |   <input type="submit" value="Go">
23 | </form>
24 | …
25 | <script>
26 |   window.onload = function() {
27 |     if (!("autofocus" in document.createElement("input"))) {
28 |       document.getElementById("q").focus();
29 |     }
30 |   }
31 | </script>
32 | 33 |

Nota: window.onload dispara depois de todas as imagens terem sido carregadas. Se a sua página possui muitas imagens, o script acima poderia potencialmente mudar o foco do campo "q" depois do usuário ter iniciado a interagir com outra parte da sua página (é por isso que usuários experientes odeiam scripts de autofoco). Se o seu site já utiliza uma biblioteca JavaScript como jQuery, você pode suaviar esse atraso usando $(document).ready() ao invés de window.onload. 34 | 35 |

← voltar para Dive Into HTML 5 36 | 37 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /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 | 
<form>
21 |   <input name="q" autofocus>
22 |   <input type="submit" value="Go">
23 | </form>
24 | 25 |

← voltar para Dive Into HTML 5 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /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 | 
<form>
21 |   <input name="fn" placeholder="Your name">
22 |   <input type="submit" value="Go">
23 | </form>
24 | 25 |

← voltar para Into HTML 5 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /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 | 
<form>
21 |   <input name="q" required>
22 |   <input type="submit" value="Go">
23 | </form>
24 | 25 |

← voltar para Dive Into HTML 5 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /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 | 
<form>
21 |   <input name="bg" type="color">
22 |   <input type="submit" value="Go">
23 | </form>
24 | 25 |

← voltar para Dive Into HTML 5 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /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 | 
<form>
21 |   <input name="birthday" type="date">
22 |   <input type="submit" value="Go">
23 | </form>
24 | 25 |
26 | 27 |

← voltar para Dive Into HTML 5 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /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 | 
<form>
21 |   <input name="t" type="datetime-local">
22 |   <input type="submit" value="Go">
23 | </form>
24 | 25 |
26 | 27 |

← voltar para Dive Into HTML 5 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /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 | 
<form>
21 |   <input name="t" type="datetime">
22 |   <input type="submit" value="Go">
23 | </form>
24 | 25 |
26 | 27 |

← voltar para Dive Into HTML 5 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /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 | 
<form>
21 |   <input name="addr" type="email">
22 |   <input type="submit" value="Go">
23 | </form>
24 | 25 |

← voltar para Dive Into HTML 5 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /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 | 
<form>
21 |   <input name="m" type="month">
22 |   <input type="submit" value="Go">
23 | </form>
24 | 25 |
26 | 27 |

← voltar para Dive Into HTML 5 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /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 | 
<form>
21 |   <input name="n"
22 |          type="number"
23 |          min="0"
24 |          max="10"
25 |          step="2"
26 |          value="6">
27 |   <input type="submit" value="Go">
28 | </form>
29 | 30 |

← voltar para Dive Into HTML 5 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /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 | 
<form>
21 |   <input name="n" type="number">
22 |   <input type="submit" value="Go">
23 | </form>
24 | 25 |

← voltar para Dive Into HTML 5 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /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 | 
<form>
21 |   <input name="r" type="range" min="1" max="11" value="9">
22 |   <input type="submit" value="Go">
23 | </form>
24 | 25 |

← voltar para Dive Into HTML 5 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /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 | 
<form>
21 |   <input name="q" type="search">
22 |   <input type="submit" value="Go">
23 | </form>
24 | 25 |

← voltar para Dive Into HTML 5 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /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 | 
<form>
21 |   <input name="ph" type="tel">
22 |   <input type="submit" value="Go">
23 | </form>
24 | 25 |

← voltar para Dive Into HTML 5 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /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 | 
<form>
21 |   <input name="t" type="time">
22 |   <input type="submit" value="Go">
23 | </form>
24 | 25 |
26 | 27 |

← voltar para Dive Into HTML 5 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /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 | 
<form>
21 |   <input name="addr" type="url">
22 |   <input type="submit" value="Go">
23 | </form>
24 | 25 |

← voltar para Dive Into HTML 5 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /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 | 
<form>
21 |   <input name="w" type="week">
22 |   <input type="submit" value="Go">
23 | </form>
24 | 25 |
26 | 27 |

← voltar para Dive Into HTML 5 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /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 | 12 | 13 | -------------------------------------------------------------------------------- /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/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/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 estrelas em 5)

20 |

Nova pizza no estilo Nova York logo alí no centro histórico Apex

21 |

A comida é de primeira linha. A atmosfera está alí para a “pizzaria do bairro.” O restaurante em si é um pouco apertado; se você está acima do peso, você pode ter dificuldade de entrar e sair de sua cadeira e caminhar entre outras mesas. Costumava dar gratuitamente “garlic knots” quando você sentava; agora eles lhe dão pão simples e você tem que pagar pelas coisas boas. No geral, é um vencedor.

22 | [globe] 23 |

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

31 | 33 | 34 | 35 | 36 |

— avaliado por Mark Pilgrim, última atualização

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 estrelas em 5)

20 |

Nova pizza no estilo Nova York logo alí no centro histórico Apex

21 |

A comida é de primeira linha. A atmosfera está alí para a “pizzaria do bairro.” O restaurante em si é um pouco apertado; se você está acima do peso, você pode ter dificuldade de entrar e sair de sua cadeira e caminhar entre outras mesas. Costumava dar gratuitamente “garlic knots” quando você sentava; agora eles lhe dão pão simples e você tem que pagar pelas coisas boas. No geral, é um vencedor.

22 | [globe] 23 |

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

28 |

— avaliado por Mark Pilgrim, última atualização 31 de Março, 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/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/chunk-webfont.eot -------------------------------------------------------------------------------- /f/chunk-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/chunk-webfont.ttf -------------------------------------------------------------------------------- /f/chunk-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/chunk-webfont.woff -------------------------------------------------------------------------------- /f/essays1743-italic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/essays1743-italic-webfont.eot -------------------------------------------------------------------------------- /f/essays1743-italic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/essays1743-italic-webfont.ttf -------------------------------------------------------------------------------- /f/essays1743-italic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/essays1743-italic-webfont.woff -------------------------------------------------------------------------------- /f/essays1743-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/essays1743-webfont.eot -------------------------------------------------------------------------------- /f/essays1743-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/essays1743-webfont.ttf -------------------------------------------------------------------------------- /f/essays1743-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/essays1743-webfont.woff -------------------------------------------------------------------------------- /f/linlibertine_bd-4.1.5-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/linlibertine_bd-4.1.5-webfont.eot -------------------------------------------------------------------------------- /f/linlibertine_bd-4.1.5-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/linlibertine_bd-4.1.5-webfont.ttf -------------------------------------------------------------------------------- /f/linlibertine_bd-4.1.5-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/linlibertine_bd-4.1.5-webfont.woff -------------------------------------------------------------------------------- /f/linlibertine_it-4.2.6-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/linlibertine_it-4.2.6-webfont.eot -------------------------------------------------------------------------------- /f/linlibertine_it-4.2.6-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/linlibertine_it-4.2.6-webfont.ttf -------------------------------------------------------------------------------- /f/linlibertine_it-4.2.6-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/linlibertine_it-4.2.6-webfont.woff -------------------------------------------------------------------------------- /f/linlibertine_re-4.7.5-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/linlibertine_re-4.7.5-webfont.eot -------------------------------------------------------------------------------- /f/linlibertine_re-4.7.5-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/linlibertine_re-4.7.5-webfont.ttf -------------------------------------------------------------------------------- /f/linlibertine_re-4.7.5-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/linlibertine_re-4.7.5-webfont.woff -------------------------------------------------------------------------------- /f/lmmono10-regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/lmmono10-regular-webfont.eot -------------------------------------------------------------------------------- /f/lmmono10-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/lmmono10-regular-webfont.ttf -------------------------------------------------------------------------------- /f/lmmono10-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/lmmono10-regular-webfont.woff -------------------------------------------------------------------------------- /f/lmmonoslant10-regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/lmmonoslant10-regular-webfont.eot -------------------------------------------------------------------------------- /f/lmmonoslant10-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/lmmonoslant10-regular-webfont.ttf -------------------------------------------------------------------------------- /f/lmmonoslant10-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/lmmonoslant10-regular-webfont.woff -------------------------------------------------------------------------------- /f/lmroman10-bold-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/lmroman10-bold-webfont.eot -------------------------------------------------------------------------------- /f/lmroman10-bold-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/lmroman10-bold-webfont.ttf -------------------------------------------------------------------------------- /f/lmroman10-bold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/lmroman10-bold-webfont.woff -------------------------------------------------------------------------------- /f/lmroman10-bolditalic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/lmroman10-bolditalic-webfont.eot -------------------------------------------------------------------------------- /f/lmroman10-bolditalic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/lmroman10-bolditalic-webfont.ttf -------------------------------------------------------------------------------- /f/lmroman10-bolditalic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/lmroman10-bolditalic-webfont.woff -------------------------------------------------------------------------------- /f/lmroman10-regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/lmroman10-regular-webfont.eot -------------------------------------------------------------------------------- /f/lmroman10-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/lmroman10-regular-webfont.ttf -------------------------------------------------------------------------------- /f/lmroman10-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/lmroman10-regular-webfont.woff -------------------------------------------------------------------------------- /f/lmromanslant10-bold-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/lmromanslant10-bold-webfont.eot -------------------------------------------------------------------------------- /f/lmromanslant10-bold-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/lmromanslant10-bold-webfont.ttf -------------------------------------------------------------------------------- /f/lmromanslant10-bold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/lmromanslant10-bold-webfont.woff -------------------------------------------------------------------------------- /f/lmromanslant10-regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/lmromanslant10-regular-webfont.eot -------------------------------------------------------------------------------- /f/lmromanslant10-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/lmromanslant10-regular-webfont.ttf -------------------------------------------------------------------------------- /f/lmromanslant10-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/f/lmromanslant10-regular-webfont.woff -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/favicon.ico -------------------------------------------------------------------------------- /fonts-original/LinLibertineFont-4.7.5-2.tgz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/fonts-original/LinLibertineFont-4.7.5-2.tgz -------------------------------------------------------------------------------- /fonts-original/chars: -------------------------------------------------------------------------------- 1 | 1234567890-=!@#$%^&*()_+[]\{}|;':",./<>? ABCDEFGHIJKLMNOPQSRTUVWXYZabcdefghijklmnopqrstuvwxyz’“”…—•№ü↜↶↷⇜⇝ -------------------------------------------------------------------------------- /fonts-original/chunk.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/fonts-original/chunk.zip -------------------------------------------------------------------------------- /fonts-original/essays1743-1.203-1-ttf.tar.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/fonts-original/essays1743-1.203-1-ttf.tar.gz -------------------------------------------------------------------------------- /fonts-original/lm1.106otf.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/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/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/aoc-a.png -------------------------------------------------------------------------------- /i/aoc-b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/aoc-b.png -------------------------------------------------------------------------------- /i/aoc-c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/aoc-c.png -------------------------------------------------------------------------------- /i/aoc-d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/aoc-d.png -------------------------------------------------------------------------------- /i/aoc-e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/aoc-e.png -------------------------------------------------------------------------------- /i/aoc-f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/aoc-f.png -------------------------------------------------------------------------------- /i/aoc-g.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/aoc-g.png -------------------------------------------------------------------------------- /i/aoc-h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/aoc-h.png -------------------------------------------------------------------------------- /i/aoc-i.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/aoc-i.png -------------------------------------------------------------------------------- /i/aoc-k.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/aoc-k.png -------------------------------------------------------------------------------- /i/aoc-l.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/aoc-l.png -------------------------------------------------------------------------------- /i/aoc-m.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/aoc-m.png -------------------------------------------------------------------------------- /i/aoc-n.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/aoc-n.png -------------------------------------------------------------------------------- /i/aoc-o.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/aoc-o.png -------------------------------------------------------------------------------- /i/aoc-p.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/aoc-p.png -------------------------------------------------------------------------------- /i/aoc-q.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/aoc-q.png -------------------------------------------------------------------------------- /i/aoc-r.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/aoc-r.png -------------------------------------------------------------------------------- /i/aoc-s.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/aoc-s.png -------------------------------------------------------------------------------- /i/aoc-t.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/aoc-t.png -------------------------------------------------------------------------------- /i/aoc-v.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/aoc-v.png -------------------------------------------------------------------------------- /i/aoc-w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/aoc-w.png -------------------------------------------------------------------------------- /i/aoc-x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/aoc-x.png -------------------------------------------------------------------------------- /i/aoc-y.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/aoc-y.png -------------------------------------------------------------------------------- /i/aoc-z.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/aoc-z.png -------------------------------------------------------------------------------- /i/baselines.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/baselines.png -------------------------------------------------------------------------------- /i/canvas-half-pixels-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/canvas-half-pixels-1.jpg -------------------------------------------------------------------------------- /i/canvas-half-pixels-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/canvas-half-pixels-2.jpg -------------------------------------------------------------------------------- /i/dot-tan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/dot-tan.png -------------------------------------------------------------------------------- /i/dot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/dot.png -------------------------------------------------------------------------------- /i/drawImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/drawImage.png -------------------------------------------------------------------------------- /i/firefogg-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/firefogg-01.png -------------------------------------------------------------------------------- /i/firefogg-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/firefogg-02.png -------------------------------------------------------------------------------- /i/firefogg-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/firefogg-03.png -------------------------------------------------------------------------------- /i/firefogg-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/firefogg-04.png -------------------------------------------------------------------------------- /i/firefogg-05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/firefogg-05.png -------------------------------------------------------------------------------- /i/firefogg-06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/firefogg-06.png -------------------------------------------------------------------------------- /i/firefogg-07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/firefogg-07.png -------------------------------------------------------------------------------- /i/firefogg-08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/firefogg-08.png -------------------------------------------------------------------------------- /i/firefogg-09.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/firefogg-09.png -------------------------------------------------------------------------------- /i/firefogg-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/firefogg-10.png -------------------------------------------------------------------------------- /i/firefogg-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/firefogg-11.png -------------------------------------------------------------------------------- /i/firefogg-12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/firefogg-12.png -------------------------------------------------------------------------------- /i/firefogg-13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/firefogg-13.png -------------------------------------------------------------------------------- /i/forms.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/forms.png -------------------------------------------------------------------------------- /i/gears.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/gears.png -------------------------------------------------------------------------------- /i/geolocation-opt-in.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/geolocation-opt-in.png -------------------------------------------------------------------------------- /i/handbrake-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/handbrake-01.png -------------------------------------------------------------------------------- /i/handbrake-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/handbrake-02.png -------------------------------------------------------------------------------- /i/handbrake-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/handbrake-03.png -------------------------------------------------------------------------------- /i/handbrake-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/handbrake-04.png -------------------------------------------------------------------------------- /i/handbrake-05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/handbrake-05.png -------------------------------------------------------------------------------- /i/handbrake-06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/handbrake-06.png -------------------------------------------------------------------------------- /i/handbrake-07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/handbrake-07.png -------------------------------------------------------------------------------- /i/handbrake-08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/handbrake-08.png -------------------------------------------------------------------------------- /i/handbrake-09.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/handbrake-09.png -------------------------------------------------------------------------------- /i/handbrake-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/handbrake-10.png -------------------------------------------------------------------------------- /i/handbrake-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/handbrake-11.png -------------------------------------------------------------------------------- /i/input-required.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/input-required.png -------------------------------------------------------------------------------- /i/input-type-color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/input-type-color.png -------------------------------------------------------------------------------- /i/input-type-date.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/input-type-date.png -------------------------------------------------------------------------------- /i/input-type-datetime.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/input-type-datetime.png -------------------------------------------------------------------------------- /i/input-type-email-validation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/input-type-email-validation.png -------------------------------------------------------------------------------- /i/input-type-email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/input-type-email.png -------------------------------------------------------------------------------- /i/input-type-month.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/input-type-month.png -------------------------------------------------------------------------------- /i/input-type-number-at-max-opera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/input-type-number-at-max-opera.png -------------------------------------------------------------------------------- /i/input-type-number-opera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/input-type-number-opera.png -------------------------------------------------------------------------------- /i/input-type-number-validation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/input-type-number-validation.png -------------------------------------------------------------------------------- /i/input-type-number.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/input-type-number.png -------------------------------------------------------------------------------- /i/input-type-range.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/input-type-range.png -------------------------------------------------------------------------------- /i/input-type-search-safari-typing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/input-type-search-safari-typing.png -------------------------------------------------------------------------------- /i/input-type-search-safari.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/input-type-search-safari.png -------------------------------------------------------------------------------- /i/input-type-search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/input-type-search.png -------------------------------------------------------------------------------- /i/input-type-tel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/input-type-tel.png -------------------------------------------------------------------------------- /i/input-type-time.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/input-type-time.png -------------------------------------------------------------------------------- /i/input-type-url-validation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/input-type-url-validation.png -------------------------------------------------------------------------------- /i/input-type-url.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/input-type-url.png -------------------------------------------------------------------------------- /i/input-type-week.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/input-type-week.png -------------------------------------------------------------------------------- /i/johnny_automatic_gerbil_in_a_chair.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/johnny_automatic_gerbil_in_a_chair.png -------------------------------------------------------------------------------- /i/johnny_automatic_man_using_binoculars_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/johnny_automatic_man_using_binoculars_2.png -------------------------------------------------------------------------------- /i/johnny_automatic_planet_with_spyglass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/johnny_automatic_planet_with_spyglass.png -------------------------------------------------------------------------------- /i/location-bar-empty-focused.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/location-bar-empty-focused.png -------------------------------------------------------------------------------- /i/location-bar-empty-unfocused.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/location-bar-empty-unfocused.png -------------------------------------------------------------------------------- /i/markup-with-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/markup-with-arrow.png -------------------------------------------------------------------------------- /i/miro-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/miro-01.png -------------------------------------------------------------------------------- /i/miro-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/miro-02.png -------------------------------------------------------------------------------- /i/miro-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/miro-03.png -------------------------------------------------------------------------------- /i/miro-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/miro-04.png -------------------------------------------------------------------------------- /i/miro-05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/miro-05.png -------------------------------------------------------------------------------- /i/miro-06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/miro-06.png -------------------------------------------------------------------------------- /i/miro-07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/miro-07.png -------------------------------------------------------------------------------- /i/miro-08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/miro-08.png -------------------------------------------------------------------------------- /i/miro-09.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/miro-09.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_3_birds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_3_birds.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_8_from_behind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_8_from_behind.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_Corsican_Pine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/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/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/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/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_a_pink.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_angry_guy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_angry_guy.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_animals_on_see_saw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_animals_on_see_saw.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_at_the_theater.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_at_the_theater.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_bag_of_money.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_bag_of_money.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_baseball_at_bat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_baseball_at_bat.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_big_sandwich.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_big_sandwich.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_blowfish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_blowfish.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_cabin_along_stream.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_cabin_along_stream.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_card_trick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_card_trick.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_clock_tower.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_clock_tower.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_demon_reading_Stewart_Orr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_demon_reading_Stewart_Orr.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_divider_cards.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_divider_cards.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_dog_on_chair.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_dog_on_chair.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_fishing_boat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_fishing_boat.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_girl_feeding_birds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_girl_feeding_birds.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_globe_man.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_globe_man.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_half_stack_of_horizontal_sections.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_half_stack_of_horizontal_sections.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_little_professor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_little_professor.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_man_reading_newspaper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_man_reading_newspaper.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_monkey_reading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_monkey_reading.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_newsboy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_newsboy.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_peeking_out_the_window.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_peeking_out_the_window.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_riding_a_bike.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_riding_a_bike.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_tree_on_top_of_hill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_tree_on_top_of_hill.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_typewriter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_typewriter.png -------------------------------------------------------------------------------- /i/openclipart.org_johnny_automatic_young_girl_pointing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_johnny_automatic_young_girl_pointing.png -------------------------------------------------------------------------------- /i/openclipart.org_maven_Galileo_Galilei.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_maven_Galileo_Galilei.png -------------------------------------------------------------------------------- /i/openclipart.org_media_files_Selanit_8331.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_media_files_Selanit_8331.png -------------------------------------------------------------------------------- /i/openclipart.org_media_files_johnny_automatic_1360.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_media_files_johnny_automatic_1360.png -------------------------------------------------------------------------------- /i/openclipart.org_media_files_johnny_automatic_4145.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_media_files_johnny_automatic_4145.png -------------------------------------------------------------------------------- /i/openclipart.org_media_files_johnny_automatic_4794.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_media_files_johnny_automatic_4794.png -------------------------------------------------------------------------------- /i/openclipart.org_media_files_johnny_automatic_7563.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/openclipart.org_media_files_johnny_automatic_7563.png -------------------------------------------------------------------------------- /i/pr6.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/pr6.mp4 -------------------------------------------------------------------------------- /i/pr6.ogv: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/pr6.ogv -------------------------------------------------------------------------------- /i/pr6.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/pr6.webm -------------------------------------------------------------------------------- /i/rel-email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/rel-email.png -------------------------------------------------------------------------------- /i/video.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/i/video.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Dive Into HTML5 5 | 6 | 7 | 8 | 9 | 22 | 23 | 24 | 25 | Fork me on GitHub 26 | 27 |
28 |

Dive Into HTML5

29 |

por
Mark Pilgrim

30 |

100% traduzido
pela comunidade

31 | 33 |
34 | 35 |

❧ 36 | 37 |

Dive Into HTML5 procura elaborar uma seleção de funcionalidades da especificação da HTML5 e outras especificações interessantes escolhidas a dedo. O manuscrito final foi publicado no formato em papel pela editora O’Reilly, sobre a marca da Google Press. Compre a obra impressa — entitulada como “HTML5: Up & Running”. Esse trabalho permanece online sob os termos da licença CC-BY-3.0. Seu feedback será sempre bem-vindo. 38 | 39 |

Nota: Com o súbito abandono de Mark Pilgrim da internet, surgiu a iniciativa de dar continuidade ao seu trabalho; levando-o para ainda mais pessoas através da tradução para língua portuguesa. Nossa ideia é manter ativamente esse projeto; atualizando e refletindo o relevante e atual estado da HTML5, assim como tinha sido feito enquanto estava em posse de Mark. Para mais informações sobre como contribuir nesse processo de tradução ou reportar erros encontrados, acesse nosso Github. 40 | 41 |

Sumário

42 | 43 | 44 |
    45 |
  1. Introdução: Cinco Coisas Que Você Deveria Saber Sobre HTML5 46 |
  2. A Tendenciosa História Da HTML5 47 |
  3. Detectando Funcionalidades Da HTML5: É Elementar, Meu Caro Watson 48 |
  4. O Que Significa Tudo Isso? 49 |
  5. Vamos Chamar De Superfície de Desenho 50 |
  6. Vídeo Em Um Flash (Sem Aquela Outra Coisa) 51 |
  7. Você Está Aqui (Assim Como Todo Mundo Está) 52 |
  8. Um Lugar Para Colocar Suas Coisas 53 |
  9. Vamos Tornar Isso Offline 54 |
  10. Uma Forma De Loucura 55 |
  11. “Distribuído”, “Extensível” e Outras Palavras Bonitas 56 |
  12. Manipulando Histórico Para Diversão & Lucro 57 |
  13. O Único Quase-Alfabético Sem-Besteiras Guia Para Detectar Tudo 58 |
  14. HTML5 Espiadas, Cutucadas e Apontadores 59 |
60 | 61 | 62 |

❧ 63 | 64 |

“Se você é bom em alguma coisa, nunca faça isso de graça.” — O Coringa
(mas isso não significa que você deva mantê-la para si mesmo) 65 | 66 |

Copyright MMIX–MMXI Mark Pilgrim 67 | 68 |

 
69 | 70 | 71 | 91 | -------------------------------------------------------------------------------- /introduction.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Cinco Coisas Que Você Deveria Saber Sobre HTML5 - Dive Into HTML5 5 | 6 | 7 | 8 | 9 | 13 | 14 | 15 | 16 | Fork me on GitHub 17 | 18 |

Você está aqui: Home ‣ Dive Into HTML5 ‣ 19 |


Cinco Coisas Que Você Deveria Saber Sobre HTML5

20 |

  21 |

❧ 22 |

1. Não é uma grande coisa só

23 | 24 |

[mock video player] 25 | 26 |

Você deve estar se perguntando: “Como posso começar a usar HTML5 se os navegadores antigos não a suportam?” Mas a própria questão nos engana. HTML5 não é uma grande coisa só; é uma coleção de funcionalidades individuais. Então você não pode detectar suporte ao “HTML5,” porque isso não faz o menor sentido. Mas você pode detectar o suporte a funcionalidades individuais como canvas, vídeo e geolocalização. 27 | 28 |

Você pode achar que o HTML é um conjunto de tags e colchetes angulados. Essa é uma parte importante, mas não é a história toda. A especificação do HTML5 também define como esses colchetes angulados vão interagir com JavaScript, através do Document Object Model (DOM). A HTML5 não define apenas uma tag <video>; também há uma DOM API correspondente para objetos de vídeo no DOM. Você pode usar essa API para detectar o suporte a diferentes formatos de vídeo, executar um vídeo, pausar, dar mute no áudio, identificar quanto o vídeo foi baixado, e todo o resto necessário para criar uma experiência rica ao usuário com relação a própria tag <video>. 29 | 30 |

O Capítulo 2 e o Apéndice A irão te ensinar como detectar de forma adequada o suporte para cada nova funciondalide da HTML5. 31 | 32 |

2. Você não precisa jogar nada fora

33 | 34 |

[sample form controls] 35 | 36 |

Ame ou odeie, uma coisa você não pode negar é que a HTML 4 é o formato de marcação mais bem sucedido que já existiu. HTML5 é criado sobre esse sucesso. Você não precisa jogar fora sua marcação existente. Você não precisa reaprender coisas que já sabe. Se a sua aplicação web funcionou ontem em HTML 4, continuará funcionando hoje em HTML5. Ponto final.

37 | 38 |

Agora, se você quiser aprimorar suas aplicações web, você veio ao lugar certo. Veja esse exemplo concreto: HTML5 suporta todos os controles de formulário da HTML 4, mas também inclui novos controles de input. Algumas são adições pedidas há tempos como sliders e date pickers; outras são mais sutis. Por exemplo, o tipo de input email parece exatamente como uma caixa de texto, porém os navegadores de dispositivos móveis irão customizar sua tela no teclado para facilitar a inserção de endereços de email. Navegadores mais antigos que não suportam o tipo de input email irão tratar o tipo de input como um input de texto comum, e o formulário ainda funciona sem mudanças na marcação ou scripts corretores. Isso significa que você pode começar a melhorar seus formulários web hoje, mesmo que alguns dos seus visitantes estejam presos ao Internet Explorer 6. 39 | 40 |

Leia todos os mínimos detalhes sobre formulários em HTML5 no Capítulo 9. 41 | 42 |

3. É fácil de começar

43 | 44 |

[sample HTML markup] 45 | 46 |

“Atualizar” para HTML5 pode ser tão simples quanto atualizar o seu doctype. O doctype já deveria estar na primeira linha de toda página HTML. Versões anteriores do HTML definiram muitos doctypes, e escolher o doctype correto pode ser complicado. Em HTML5, há apenas um doctype: 47 | 48 |

49 |

<!DOCTYPE html> 50 |

51 | 52 |

Atualizar para o doctype da HTML5 não irá causar problemas a sua marcação atual, porque todas as tags definidas em HTML4 são suportadas 53 | em HTML5. Mas possibilitará você usar — e validar — novos elementos semânticos como <article>, <section>, <header>, e <footer>. Você irá aprender sobre todos esses novos elementos no Capítulo 3. 54 | 55 |

4. Já funciona

56 | 57 |

[form field with onscreen keyboard] 58 | 59 |

Caso você queira desenhar em canvas, tocar um vídeo, implementar melhores formulários ou construir aplicações web que funcionem offline, você descobrirá que a HTML5 já é bastante suportada pelos navegadores. Firefox, Safari, Chrome, Opera, e navegadores móveis já suportam canvas (Capítulo 4), vídeo (Capítulo 5), geolocalização (Capítulo 6), armazenamento local (Capítulo 7), e mais. Google já suporta microdata annotations (Capítulo 10). Até mesmo a Microsoft — raramente conhecida por suportar padrões — suporta a maioria das funcionalidades da HTML5 no Internet Explorer 9. 60 | 61 |

[Gears saying "I can help"] 62 | 63 |

Cada capítulo desse livro inclui quadros de compatibilidade com os navegadores mais familiares. Porém o mais importante é que cada capítulo inclui uma discussão franca das suas opções se você precisar suportar navegadores antigos. As funcionalidades da HTML5 como geolocalização (Capítulo 6) e vídeo (Capítulo 5) foram primeiramente providas por plugins como Gears ou Flash nos navegadores. Outras funcionalidades, como canvas (Capítulo 4), podem ser emuladas inteiramente em JavaScript. Esse livro vai ensinar você como atingir funcionalidades nativas em navegadores modernos, sem deixar os navegadores mais antigos para trás. 64 | 65 | 66 |

5. Está aqui para ficar

67 | 68 |

Tim Berners-Lee inventou a world wide web no início dos anos 1990. Mais tarde ele fundou a W3C para agir como um administrador dos padrões da web, 69 | o que a organização vem fazendo por mais de 15 anos. Isso é o que a W3C tem a dizer sobre o futuro dos padrões da web, em Julho de 2009: 70 | 71 |

72 |

Hoje o Diretor anunciou que quando a licença do grupo de trabalho sobre XHTML 2 expirar, como programado para o final de 2009, a licença não será renovada. Fazendo isso e aumentando os recursos no grupo de trabalho de HTML, a W3C espera acelerar o progresso da HTML5 e clarificar a posição 73 | da W3C acerca do futuro da HTML. 74 |

75 | 76 |

HTML5 está aqui para ficar. Vamos mergulhar. 77 | 78 |

❧ 79 | 80 |

81 |

Você sabia?

82 |
83 |

Em associação a Google Press, O’Reilly está distribuindo este livro em variados formatos, incluindo papel, ePub, Mobi, DRM-free e PDF. A edição paga é chamada “HTML5: Up & Running,” e está disponível agora. 84 |

Se você gostou dessa introdução e quer mostrar como apreciou, basta comprar o livro “HTML5: Up & Running” com esse link afiliado ou comprar a edição eletrônica diretamente da O’Reilly. Você vai ganhar um livro, e eu vou ganhar um trocado. Atualmente não aceito doações diretas. 85 |

86 |
87 |
88 | 89 |

Copyright MMIX–MMXI Mark Pilgrim 90 | 91 |

 
92 | 93 | 94 | 95 | 104 | -------------------------------------------------------------------------------- /j/.htaccess: -------------------------------------------------------------------------------- 1 | ExpiresActive On 2 | ExpiresDefault "access plus 1 year" 3 | -------------------------------------------------------------------------------- /j/canvastext-fx3.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zenorocha/diveintohtml5/008a2222dfb065b3d3aae9848a437c23e8738bc0/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 = 'exibir índice analítico'; 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 = 'esconder índice analítico
  1. ↑ Índice analítico completo
    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