diveintohtml5/HTML5.html at master · gokmax/diveintohtml5 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
<!DOCTYPE html>
<!--
    kmax: The declaration must be in the first line and should not contain any blank
          space. However, blank space will be ignored any other place except the
          first line.
-->

<html lang = "en">
    <head>
        <meta charset = "utf-8" />
        <link rel = "stylesheet" href = "css/style.css" >
        <!--kmax: Drop the type value because there is only css to decorate the page.-->
        <title>Dive Into HTML5</title>
        <!--[if lt IE 9]>
        <script  src =
            "http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <!--kmax: To create the new elements which not exist in previous IE.-->
    </head>
    <body>
        <nav>
            <ul>
                <li><a href = "#">home</a></li>
                <li><a href = "blog.html">blog</a></li>
                <li><a href = "gallery.html">gallery</a></li>
                <li><a href = "about.htlm">about</a></li>
            </ul>
        </nav>

        <link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />asd


        <!--kmax: To talk about the embedded article here.-->
        <article>
            <header>
                <time datetime = "2013-03-23T22:30:59-34:00" pubdate>
                    March 23, 2013 22:30pm EDT
                </time>
                <hgroup>
                    <h1>h1</h1>
                    <h2>h2</h2>
                </hgroup>
            </header>
<!--the header ends here.-->

<!--canvas-->
            <img id = "cat" src = "images/cat.png" alt = "sleeping cat"/>
            <canvas id = "e" width = "177" height = "113"></canvas>
            <script>
                window.onload = function() {
                    var canvas = document.getElementById("e");
                    var context = canvas.getContext("2d");
                    var cat = document.getElementById("cat");
                    context.drawImage(cat, 0, 0);
                }
            </script>
            <!--or create in JavaScript way.-->
            <script>
                var canvas = document.getElementById("e");
                var context = canvas.getContext("2d");
                var cat = new Image();
                cat.src = "images/cat.png";
                cat.onload = function() {
                    for (var x = 0, y = 0; x < 500 && y < 375; x += 50, y += 37){
                        context.drawImage(cat, x, y, 88, 56);
                        <!--88, 56 is the scale of the image.-->
                    }
                }
            </script>

<!--video-->
            <!--standard format that you should code.-->
            <video id = "movie" width = "320" height = "240" preload controls>
                <source src = "name.mp4" type = 'video/mp4; codecs = "avc1.42E01E, mp4a.40.2"' />
                <source src = "name.webm" type = 'video/webm; codecs = "vp8, vorbis"' />
                <source src = "name.ogv" type = 'video/ogg; codecs = "theora, vorbis"' />
                <object width = "320" height = "240" type =
                    "application/x-shockwave-flash" data = "flowplayer-3.2.1.swf">
                    <param name = "movie" value = "flowplayer-3.2.1.swf" />
                    <param name = "allowfullscreen" value = "true" />
                    <param nuam = "flashvars" value = 'config = {
                        "clip":{
                        "url": "http://wearehugh.com/dih5/good/bbb_480p.mp4",
                        "autoPlay": false, "autoBuffering": true
                        }
                    }' />
                    <p>Download video as <a href = "name.mp4">MP4</a>,
                        <a href = "name.webm">Webm</a>, or
                        <a href = "name.ogv">Ogv</a>.
                    </p>
                </object>
            </video>

            <form>
                <input id = "q" name = "q" placeholder = "Search the history" autofocus />
                <script>
                    if (!("autofocus" in document.createElement("input"))) {
                        document.getElementById("q").focus();
                    }
                </script>
                <!--placeholder can only contains text but by using css3 you can style the placeholder.-->
                <input type = "submit" value = "Search" />
                <input type = "email" placeholder = "mail-type" />
                <input type = "url" placeholder = "url-type" />
                <input type = "number" placeholder = "number-type" min = "0" max = "10" step = "2" value = "6" />
                <input type = "range" min = "0" max = "10" step = "2" value = "6" />
                <input type = "submit" />
                <br />
                <input type = "date" />
                <input type = "month" />
                <input type = "time" />
                <input type = "datetime" />
                <input type = "datetime-local" />
                <input type = "search" />
            </form>

            <footer>
                <nav>
                    <h1>Navigation</h1>
                    <ul>
                        <li><a href = "#">Home</a></li>
                        <li><a href = "#">Standards</a></li>
                        <li><a href = "#">Participate</a></li>
                        <li><a href = "#">Membership</a></li>
                        <li><a href = "#">About W3C</a></li>
                    </ul>
                </nav>
                <nav>
                    <h1>Contact W3C</h1>
                    <ul>
                        <li><a href = "#">Contact</a></li>
                        <li><a href = "#">Help and FAQ</a></li>
                        <li><a href = "#">Donate</a></li>
                        <li><a href = "#">Site Map</a></li>
                    </ul>
                </nav>
                <section>
                    <h1>W3C Updates</h1>
                    <ul>
                        <li><a href = "#">Twitter</a></li>
                        <li><a href = "#">Identi.ca</a></li>
                    </ul>
                </section>
                <p class = "copyright">Copyright @2013 W3C</p>
            </footer>
        </article>

    </body>
</html>


<!--

    HERE are valuable notes for my presentation:

#HTML development:
    ->1997 W3C published HTML4.0 and promptly shutdown the HTML Working Group.
    ->Less than 2 months later, a seperate W3C Working Group published XML1.0.
    ->Three months after that, the W3C held a workshop called "Shaping the Future
      of HTML" to answer the question, "Has W3C given up on HTML?" This was the
      answer:
          In discussion, it was agreed that further extending HTML4.0 would be
          difficult, as would converting 4.0 to be an XML application. The
          proposed way to break free of these restrictions is to make a fresh
          start with the next generation of HTML based upon a suite of XML tag-sets.
    -> XHTML1.0 + Appendix C
    -> XHTML1.1 eliminate the Appendix C
    -> Appendix C - down to html, loophole to escape the "draconian error handling"
    -> Actually, web pages claim to be XHTML are not using XHTML, still HTML.
    ->
    ...
    ->
    -> June 2004, the W3C held the Workshop on Web Applications and Compound Documents.
       They proposed a competing vision.
          Backward compatibility, clear migration path.
          Well-defined error handling.
          Users should not be exposed to authoring errors.
          Practical use.
          Scripting is here to say.
          Device-specific profiling should be avoided.
          Open process.
    -> A question was asked, "Should the W3C develop declarative extensions to
       HTML and CSS and imperative extensions to DOM, to address medium level
       Web Applications requirements, as opposed to sophisticated, fully-fledged
       OS-level APIs?" The vote was 11 to 8 against.
    -> And WHAT Working Group was born.
         The Web Hypertext Applications Technology Working Group is a loose, unofficial
         and open collaboration of Web browser manufacturers and interested parties.
    -> The create Web Forms 2.0, Web Application 1.0.
    -> W3C - Never-finalized XHTML2.0 continued the tradition of requiring DEH.
    -> In October 2006, W3C work together with the WHAT Working Group to evolve HTML.
       Rename "Web Application 1.0" to "HTML5". And here we are, diving into HTML5.


Clear some concepts:

#W3C
The World Wide Web Consortium (W3C) is an international community where Member
organizations, a full-time staff, and the public work together to develop Web
standards. Led by Web inventor Tim Berners-Lee and CEO Jeffrey Jaffe, W3C's
mission is to lead the Web to its full potential.

#MIME
Multipurpose Internet Mail Extensions (MIME) is an Internet standard that
extends the format of email to support:
    •Text in character sets other than ASCII
    •Non-text attachments
    •Message bodies with multiple parts
    •Header information in non-ASCII character sets
// MIME类型就是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文
件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的
文件名，以及一些媒体文件打开方式。
-----------------------------------------------------------------------------

#How HTML5 came to be.
    Implementations and specifications have to do a delicate dance together.
    // 标准和实现之间的矛盾
    Standards are hard to be made.
        - Eg. 17-year-old conversation == a simple HTML element <img>

#Browsers have always been "forgving" with HTML. And because of that, by some
estimates, over 99 persent of HTML pages on the Web today have at least one
error in them. - "Everything you know about xhtml is wrong."

#Every time your web browser requests a page, the web server sends a numbers of
headers before it sends the actual page markup. These headers are normally
invisible, although there are a number of web development tools that will make
them visible if you're interested. The headers are important, because they tell
your browser how to interpret the page markup that follows. The most important
header is called Content-Type, and it looks like this:
    Content-Type: text/html
text/html is called the "content type" or "MIME type" of the page. This header
is the ONLY thing that determines what a particular resource truly is, and
therefore how it should be rendered.


#HTML5 is not a big thing; it is a collection of individual features.
 You can detect support for individual features, like canvas, video and so on.

#Canvas - HTML5 defines the <canvas> element as "a resolution-dependent bitmap
canvas which can be used for rendering graphs, game graphics, or other visual
imaes on the fly." A canvas is a rectangle in your page within which you can
use JavaScript to draw anything you want. HTML5 defines a set of functions("the
canvas API") for drawing shapes, defining paths, creating gradients, and
applying transformations.
  - You can use the double-negative trick to force the result to a Boolean value
    return !!document.createElement('canvas').getContext;
  - webGL - 3d effects from openGL
    WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D
    graphics and 2D graphics[2] within any compatible web browser without the use of
    plug-ins.

#Video - HTML5 defines a new element called <video> for embedding video in your
web pages. Embedding video used to be impossible without third-party plug-ins
such as Apple QuickTime or Adobe Flash.
  - Kroc Camen has designed a solution called "Video for Everybody!" that uses
    HTML5 video where available, but falls back to QuickTime or Flash in older
    browser. This solution uses no JavaScript whatsoever, and it works in
    virtually every browser, including mobile browsers.
  - For maximum compatibility, here's what your video workflow will look like:
        1. Make one version that uses Theora video and Vorbis audio in an Ogg
           container.
        2. Make another version that uses WebM(VP8 + Vorbis).
        3. Make another version that use H.264 Baseline video and AAC
           low-complexity audio in an MP4 container.
        4. Link to all three video files from a single <video> element, and fall
           back to a Flash-based video player.


// standard of application
#LocalStorage - HTML5 Storage provides a way for websites to store information
on your computer and retrieve it later. The concept is similar to cookies, but
it's designed for larger quantities of information. Cookies are limited in size,
and your browser sends them back to the web server every time it requests a new
page (which takes extra time and precious bandwidth). HTML5 Storage stays on
your computer, and websites can access it with JavaScript after the page is loaded.

    5MB

    Within your browser, any website can read and modify its own values, but sites
    can't access values stored by other sites. == same-origin restriction.

    function supports_html5_storage() {
        return ('localStorage' in window) && window['localStorage'] !== null;
    }
    // javascript's style
    var foo = localStorage.getItem("bar");
    localStorage.setItem("bar", foo);
    var foo = localStorage["bar"];
    localStorage["bar"] = foo;

    SQLite
    // js to manage the backend database
    openDatabase('documents', '1.0', 'local document storage', 5*1024)1024,
    function (db) {
        db.changeVersion('', '1.0', function(t) {
            t.executeSql('CREATE TABLE docids (id, name)');
        }, error);
    });

#Web Workers - provide a standard way for browsers to run JavaScript in the
background. With web workers, you can spawn multiple "threads" that all run at
the same time, more or less.
    These "background threads" can do complex mathematical calculations, make
    network requests, or access local storage while the main web page responds
    to the user scrolling, clicking, or typing.

#Offline Web Applications - Thanks to HTML5, anyone can build a web application
that works offline.
    Once your browser downloads all the necessary files, you can revisit the
    website even if you're not connected to the Internet. Your browser will
    notice that you're offline and use the file it has already downloaded. When
    you get back online, any changes you've made can be uploaded to the remote
    web server.

    A web browser that implements HTML5 offlne applications will read the list
    of URLs from the manifest file, download the resources, cache them locally,
    and automatically keep the local copies up to date as they change. When you
    try to access the web application without a network connection, your web
    browser will automatically switch over to the local copies instead.

    The Cache Manifest

    <!DOCTYPE html>
    <html manifest = "/cache.manifest">

    Apache-Server -> add:
        AddType text/cache-manifest .manifest
    in the .htaccess file.

    CACHE MANIFEST
        NETWORK:
        #Also called the online whitelist
        #Files listed in this section will not be loaded from the cache, but
         retrieved over the network(from the server) if online.
        #You can specify "*" to set the online whitelist wildcard flag to "open"
         Access to resources on other origins will not be blocked.
        /tracking.cgi - will not be downloaded.

        CACHE:
        /clock.css
        /clock.js
        /clock-face.jpg -explicit section.

        FALLBACK:
        / /offline.html

#Geolocation - is the art of figuring out where you are in the world and (optionally)
sharing that information with people you trust. There are many ways to figure
out where you are - your IP address, your wireless network connection, which
cell tower your phone is talking to, or dedicated GPS hardware that receives
latitude and logitude information from satellites in the sky.
    Geolocation is being standardized by the Geolocation Working Group, which is
    separate from the HTML5 Working Group. But it is part of the evolution of
    the Web that's happening now.
    If your browser does not support the geolocation API natively, there is
    still hope. Gears is an open source browser plug-in from Google that works
    on Windows, Mac, Linux, Windows Mobile, and Android. It provides a number of
    features for older browsers that do not support all the fancy new stuff.
    And one of the features that Gears provides is a geolocation API.

    function get_location() {
        navigator.geolocation.getCurrentPosition(show_map);
    }
    function show_map() {
        var latitude = position.coord.latitude;
        var longitude = position.coord.longitude;
        var altitude = position.coord.altitude;
        // And you can do something you want here as you have got the position.
    }
    geo.js for IE.

#Input Types - many new input types

#Placeholder Text - is displayed inside the input field as long as the field is
empty and not focused. As soon as you click on (or tab to) the input field, the
placeholder texts disappears.

#Form Autofocus - moves the focus to a particular input field. But because it's
just markup instead of a script, the behavior will be consistent across all websites.
Also, browser vendors(or extension authors) can offer users a way to disable the
autofocusing behavior.

#Microdata - is a standardized way to provide additional semantics in your web
pages. For example, you can use microdata to declare that a photograph is
available under a specific Creative Common license.
    Microdata annotates the DOM with scoped name/value pairs from custom vocabularies.
    <div itemscope itemtype = "http://schema.org/Movie">
        <h1 itemprop = "director">Ang Li</h1>
    </div>
    eg: - help the machine to understand.
    <div itemscope itemtype = "http://schema.org/Event">
        <div itemprop = "name">Spinal Tap</div>
        <span itemprop = "description">One of the loudest bands ever.</span>
        Event date.
        <time itemprop = "startDate" datetime = "2011-05-08T19:30">May 8, 7:30pm</time>
    </div>
    use meta to specify the element such as img or flash object.
    <meta itemprop = "ratingValue" content = "4"/>
    <meta itemprop = "bestRating" content = "5" />

    schema.org offers the ability to specify additional properties or sub-types to existing types.

    why - for search engine and readable or understandable pages.

#WebSockets - WebSockets is a technique for two-way communication over one (TCP)
socket, a type of PUSH technology. At the moment, it's still being standardized
by the W3C; however, the lateset versions of Chrome and Safari have support for
WebSockets.

//
#Framework

//
#Local Application: Android


W3C计划在2014年完成HTML5标准。

-->