http://ex-ample.blogspot.com/2011/06/with-google-app-engine-there-are-no.html
http://ex-ample.blogspot.com/2011/07/all-about-online-slides-service-web.html
http://ex-ample.blogspot.com/2011/07/google-app-engine-clone-html5wow.html
Just a deployment (only 44slides) of www.htmlfivewow.com (71 slides):
http://ex-ample.appspot.com/
-------------
The structure of "Google HTML5 Slides":
- only ONE html file,
- each slide is defined by a tag 'div class="slide'.
Javascript codes (at the end of the index.html):
- config.js
7lines (disableCodeHighlights...)
- slide-presentation.js
548 lines - slide-content.js
1053 lines
http://code.google.com/p/html5wow/source/browse/src/slides/js/slide-content.js?spec=svn32a5d603367eb102bab7cad70f628eb7bc33be72&r=7e31f05b06f8daf14641657303e6794465fde23b
- prettify.js
http://ex-ample.blogspot.com/2011/07/prettifyjs-javascript-module-and-css.html
http://code.google.com/p/google-code-prettify/ - glMatrix-0.9.5.min.js
http://code.google.com/p/glmatrix/ - box2d.min.js
http://box2d.org/ - opts.js
experimental CSS (google):
http://code.google.com/p/experimental-css/source/browse/opts.js?spec=svn93bc24087610cf5db3fea50bdd6204a5ef4e4dbc&r=93bc24087610cf5db3fea50bdd6204a5ef4e4dbc - jquery-1.5.2.min.js
well-known jquery: http://jquery.com/ - modernizr-1.7.min.js
http://www.modernizr.com/ - yepnope.1.0.1-min.js
http://yepnopejs.com/
-------------
4 CSS files:
- animations.css
145lines - prettify.css
Pretty printing styles. Used with prettify.js - slide-content.less
1380lines - slide-presentation.less
232lines
--------------------------------------
List of 71 slides.
Some comments:
{lines of code: slide-content.js};
[css: slide-content.less].
---------------
1 Preflight {70}
2 "Press" space..
3 Google TM
4 HTML5 Case...TITLE
5 Who are these guys {9; init slideIn and slideOut javascript}
6 One year ago
7 Training for... (vertical scrolling)
8 Today we...
9 -I-II-III--Today's agenda (move)
10 -I)---FILE
11 Binary data (image back, flickr)
12 Binary data on the... (code)
13 HTML5 binary data
14 New data types
15 Fetch
16 FILE APIs (flikr)
17 getting file handles ("select some img files"; publish info of file) {15}
18 directory upload (button "view tree" or "view list") {"}
19 "Drag in images from desktop" (view with auto-zoom; one or more files drag) {from 133 to 189}
20 demo photo gallery (wait 2-3s)
21 Blueprint
22 USING FILES (flikr)
23 Reading file content
24 Data URLs (click "texte area" --it opens a new window)
25 Blob URLs
26 """ javascript/worker
27 Browser support File APIs
28 FILE SYSTEM API (flikr)
29 Opening
30 Fetch
31 Terminal:Duplicating user-selected files
32 DEMO: HTML5 Terminal--Lauch ; By: Eric Bidelman
33 Blueprint
34 1,2,3 ways to generate URLs to files (button new)
35 Browser Support: File System API
36 II)---GRAPHICS
37 HTML5 graphics
38 DECLARATIVE OPTIONS (flikr)
39 Inline SVG (comparison SVG quality and bitmap; clic right not allowed for SVG
40 The SVG DOM: put text on a path; int:math {8; 230-237}
41 -text borders, CSS... transition: move random : {240-262} [953-1036]
42 Movement with CSS--int: math
43 Tweens (menu pop-up and button animate and interactive 2D graph)
--int:math {265-269; 862-943(end)} [1053-1073]
44 3D
45 The power of 3D CSS
46 SCRIPTED APIs (flikr)
47 canvas {288-441}
48 test speed (2 buttons) ; see also the title of the page; {445-501}
49 2D canvas (sprites)
50 3D support (position of your computer; device orientation for input); {507-518; 785-857}
51 WebGL support; {523-756}
52 W"
53 DEMO:lauch terminal
54 Blueprint 3D filesystem browser
55 III)---AUDIO
56 HTML5 audio
57 AUDIO control (1 button save; 3 buttons open, clear log, reload page)--math
58 WEB AUDIO API (flikr)
59 button play web audio API
60 Generating sound (5buttons; 2slides; 2views)-math
61 Audio processing in 10 lines of code!
62 DEMO GAL9000
63 Blueprint
64 Real-time audio analysis (button pop-up "options"; button bottom start stop next; 1slide)--math
65 Browser support
66 IV--That was a lot
67 What you saw: file graphics audio
68 Go Deeper: Follow these guys tweeter: @ebidel, @kurrik
69 -
70 -
71 End (logo Google).
----------------------------------------
No comments:
Post a Comment