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

here is what i need to take note today, select multiple rows into array, by using bulk collect into...

the code is here:

DECLARE
TYPE varray_type IS VARRAY(5) OF VARCHAR2(360 BYTE);
v2 varray_type;
BEGIN

select ..... BULK COLLECT INTO ..... from .....
WHERE .....
END;
/

a nice article on OOP in javascript...we do need time to go over those from time to time...

http://phrogz.net/js/classes/OOPinJS2.html

Here is the tutorial of how to set up EXTJS in Eclipse.

http://www.scribd.com/doc/43810349/Tutorial-Spket-Setting-Up-Eclipse-IDE-for-Ext-JS-and-JQuery-Development

Deploy Orbeon Forms in Glassfish

There is no documentation of how to deploy Orbeon to Sun's App Server of Glassfish. I played with glassfish for couple day and here is what I did to deploy Orbeon XForms to GlassFish.

1. Unzip ops.war
2. Open WEB-INF\sun-web.xml, comment out the line with jdbc/db
3. Open WEB-INF\weblogic.xml, comment out the line with jdbc/db
4. Open WEB-INF\resources\apps\doc\pages\intro-install.xml, comment out the line with jdbc/db
5. Update ops.war
6. You need to login as admin of GlassFish, launch the admin console of glassfish, http://localhost:4848
7. Deploy the ops.war file as admin.

Then you are done. You could launch http://localhost:8080/ops. Be patient and wait for a minute for the first time Orbeon launch.

Object Oriented Programming In Javascript

1. Object Oriented Programming Goal:
a. Encapsulation
b. Polymorphism
c. Inheritance

2. Objects in Javascript
Object in javascript is collection of names properties, javascript allows for the creation of any number of properties in an object at any time. For example:
obj = new Object; // constructor -> Object
obj.x = 1; // ad-hoc property x
obj.y = 2; // ad-hoc property y

3. Define a Class - Object Constructor
A new Javascript class is defined by creating a simple function using operator "new". For example:
function Foo()
{
this.x = 1;
this.y = 2;
}
obj = new Foo;

4. What is Prototype
Used in inheritance. In javascript, object can inherit properties from another object (prototype). We could say, Prototype = parent class. Prototype means that if a class is inherited from another class, then it can borrow all of its methods, so we don't need to redefine them. (look at http://webdevelopersjournal.com/articles/jsintro3/js_begin3.html)

5. Define and call methods in a class
a. Assign functions to a constructor's protoype
function Foo()
{
this.x = 1;
}
Foo.prototype.AddX = function (y)
{
this.x += y;
}
obj = new Foo;
obj.Add(5);

6. Define a sub-class
Standard paradigm is to use the prototype chain to implement the inheritance of methods from a super class.
function A() // define super class
{
this.x = 1;
}
A.prototype.Doit = function ()
{
thisx += 1;
}
B.prototype = new A; // define sub-class
B.prototype.constructor = B;
function B()
{
A.call(this); // call super-class constructor
this.y = 2;
}
B.prototype.DoIt = function ()
{
A.prototype.DoIt.call(this);
this.y + = 1;
}
b = new B();
b.DoIt();

7. Private memebers in Javascript
Variables defined in the constructor will persist beyond the lifetime of the construction function itself. To access these variables, you need to create local functions within the scope of constructor.
function A()
{
var x = 7;
this.GetX = function () {return x;}
}

obj = new A;
obj.getX();


--------------------------------------
References:
1. http://mckoss.com/jscript/object.htm
2.http://webdevelopersjournal.com/articles/jsintro3/js_begin3.html