HTML 5

--------section 1 ----------------------

1. avoid switch

2. scope: block scope v function scope

3. for (var i…) {}, variable i is not scoped to the loop… it is scoped to the whole function.

4. if (a) b(); c();

always put curly bracelet in

5. ++: increment pointer x+=1…

-----section 2, ECMA script next -----------------

1. var Point2D = new StructType ({

x: uint32,

y: uint32})

{)

var Pixel = new SructType ({

point: point2D,

..

new Triangle ([….

2. Private names

function Container() {

var secret -3;

this service = function() {

if (scret--) {

}

}

can not put into prototype, so

introduce key

var key - Name.create("secret");

function Container () {this[key] = 3}

Container.protype

3. WeakMap(), already ship in firefox, key is identical to object

var title = new Title();

var result = [..]

titles.set(title, result)

association, as soon as the key disappear, the value disappear

4. lower level feature

Proxy.create( {

get:

set:

delete:

}, proto)

DOM to be implement as pure JS object

re implement DOM

5. Callback: the new goto? well, no..but…still……

function* g() {

yield 1:

yield 2;

}

var obj = g();

obj.next(); //1

obj.next(); //2

6. Task.js ----> check it out

7. Modules pattern

8. … remaining param

…: extra argument

array.push(thing1, thing2, … more args)

9. default value for arguments

10. let : new var

let is same as var and is better

11. var {r, g, b} = thing.color;

var [x,y] = circle.center;

[a,b] = [b,a]

easy to unwrap

12. var obj = {

foo: "foo",

bar () {return this.foo},

[getName()':17

};

13: for …in

for (x in [3,4,5]) // 0, 1, 2

for (x of [3.4.5]) // 3, 4, 5

14. interate object

15. [x*y for (x of obj1) for (y of obj2)]

16. '

ohai, ${firstName} ${lastName}

'

----------HTML5------------------

1. SF HTML5 User Group

www.sfhtml5.org

2. What is HTML 5

- The new jamjor milestone for HTML

- Focused on Web Applications

- Web aps are rapidly becoming first class apps, on par with desktop

- Different definitions

3. NEWT:

4. http://html5test.com

5. WHY HTML5

- email type

- simpler

- Simplified DocType

- Simplified Character Type

- Simplified Markup

- Less Plugins

- Secure by Defult

. HTML5 users orgin-based secuity

. DEfines secure cross-origin sharing

. HTML5 is not with flaows, but issues will be fixed

6. HTML Feature Areas

Semantics

CSS3

Device Access

Performance

Offline/Storage: Use web apps on/off line

Connectivity:

7. Valid HTML vs Valid XHTML

• If you are so proud of your XHTML
• Why do not you serve it with the right mime type?
• Use HTML5 and create valid html

8. New HTML 5 Elements

9. Removed Elements

.......

10. Semantic Markup Benefits

• Based on research
• Cleaner, less verbose markup
• Machine readable, search engine, Syndication
• Linking and sharing

11. Anatomy of an HTML5 Page

12. HTML5 page in IE<9, not so great

13. HTML5 Microdata

<...

14. HTML5 Forms

• New form functionality:

-No JS required

-Native date and color pickers

-Search, email, webaddress

-Client side validation

15. CSSS Level 3

. Modularized for easier browser uptake

. Almost 50 modules

. Use browser-specific prefixes until finalized

. Dramatically improves performance

. Examples;

- Border raduis

- Gradients

- Multi-cloumn layout

- reflection

- Etc

16. Multimedia

New HTML5 media elements,

Native audio and video, no plugins required

. Programmable with JS

.Style with CSS

Add vidoes and audio as image

17. Flash Video fallback

18. WebVTT:

19. HTML5 Canvas and SVG support

• Provide native drawing functionality
• complietely integrated into HTML5 documents
• Use for animation, charts, images, pixel manipulation and so on
• Canvas supports 2D and 3D
• Full access of mouse movement

20. Interactive: www.canvasdemo.com

21. Device Access Features

• Geolocation
• Drag and Drop
• Filesystem API
• Speech input
• Device Orientation

22. Speech Input

23. Performance , Web Workers

• JS is single threaded
• HTML5 Web Workers provide background processing capabilities to web applications

24. Offline and Storage

• Use complete web sites in offline mode
• Cache pages that have not been visited yet
• Browsers cache data in a Application Cache
• HTML5 allows online and offline detection
• Allows prefetch
• CACHE MANIFEST
• <html manifest="offline.appcache">

25. Web and DB Storage

• Many Powerful new client-side storage options
• Web and Web database storage
• Web Storage
• Web Database Storage

Cookie -> Session -> Local -> database

26. WebSockets

• New W3c API and IETF Protocol for low-latency, real-time bi-directional connections
• Easily add social

27. The best way to start: Boilerplate

28. Polyfills and Emulations

www.modernizr.com

use Modernizr.load to test for feature support

Chrome Frame,, embed chrome in IE

LinedIn: Peter Lubbers

www.prohtml5.com

----------------------HTML 5 form ------------------

1. align is not used anymore

2. new input attributes

3. Labels

4. Attributes Soup

5. placeholder attribute and pattern attribute

placeholder="placerholder text"

pattern="\w{6,9}"

...

/>

6. reqired attribute

7. Targeting in CSS without Touching HTML

:default

:valid

:invalid

input[type=checkbox]

8. autofocus attribute

autofocus

/>

can only give one focus, if you give more, the last will focus

9. type attribute, default is text

type="text"/>

10 form attribute

form="formID"

/>

new Input types

1. color: color picker

2. url

3. type="tel": telephone, give me the number not, A-Z

4.type="email"

5.type="number"

type="number"

min="0"

max="1000"

step="5"

note: zip code is not number

6. type="range"

type="range"

min=""

max=""

step=""

pattern="[0-9]|10"

7. type="search"

type="search"

placeholder="search term"

8. date and time

type="date"

min="1900-1-1"

type="date"

min="09:00"

max="17:00"

step="900" // 900 sec is, 15 mins

placeholder = "12:00"

9. validation

document.getElementByID['form_control'].

function validate() {

var input = document.getElementById('b");

}

styling:

::-webkit-validation-bubble {}

::-webkit-validation-bubble {}

10. List attribute and

web address:

11. Meter

12. progress

13. output

14. speech input

-------------------------------Last section--------------------

1. HTML5 Semantics

semantic document structure

- HTML5 introduces a new semantic structure

replacing the use of div, spaln and other elements with class and ID

2. CSS9

IE 9:

2D transform

Border Radius

Box Shadow

WOFF font

Media Queries

Multiple Background

Namespace

Opacity

rgba[], hls()

Selectors

IE 10:

Grid

Flexbox

2. Demo Time

Use MediaPro

3. Media Queries is fun!

4. HTML5 Cross Platforms: Best Practices and Tips

. Focus on creating semantic markup

Use CSS and JS for appearance and behavior

.Avoud embedding inline and JS in same page

Use external style and scripts

.Create media queries to apply styles on the device display

.Use CSS properties such as display to create layouts

.Avoud embedding images directly in the page

Use css speficy background images