presentation - html5 and css3

8/10/2019 Presentation - Html5 and CSS3

1/33

HTML5 and CSS3- One UI for All

Mobile Phone Form Factors

Puneet Kumar, Mobile Team, IFS


2/33

Intuit Proprietary & Confidential2

Agenda

HTML5 Crash course(20min)

CSS3 Crash course(10min)

Responsive Design(10 min)

Problem definition Current Solution

Proposed Solution

How can Responsive Design help!


3/33

Intuit Proprietary & Confidential

Logistics

This presentation is Part 1 of HTML/CSS Workshop atTechForum, Intuit, Feb 21, 2012

This presentation at Brainstorm:https://intuit.intuitbrainstorm.com/Idea.aspx?id=11398

Q&A, at the end

Post questions tohttp://tiles.intuit.com/tiles/site/tile/HTML5#

3


4/33


HTML5, Crash Course

4


5/33


HTML5 Features

New Doctype

Semantic Tags

Forms, new input types

Video, Audio

Canvas

Web Storage Offline

Web Workers

GeoLocation

Drag and drop

5

Many cool features to explore


6/33


HTML5, New Doctype

6

Benefit:Simple.


7/33Intuit Proprietary & Confidential

HTML5, Semantic tags

7

Better than

Benefit:Human readable

HTML pages.


8/33Intuit Proprietary & Confidential8

HTML4 HTML5

HTML5, Semantic tags

#.header{}

#.navigator{}

#.sidebar{}

CSS: CSS:

header{}

nav {}

aside{}

Semantic



HTML5, Forms, new input types

9

Benefit:Built in

validation.



HTML5, Forms, new input types

Submit Form

First

10

will show number pad



HTML5,

videocontrols preload>

Your browser is old. Download this video instead.

11

Benefit:Flash killer?



HTML5, Canvas

Dynamic rendering of 2Dshapes and bitmap images.

12

Benefit:2D Games!



HTML5, Canvas

var ctx = document.getElementById(ex).getContext(2d);

ctx.fillRect(10,20,50,50); //Paints rectangle (x,y,w,h)

ctx.strokeStyle=rgb(0,255,0);

ctx.lineWidth= 5;

ctx.strokeRect(9,19,52,52);

gradient = ctx.createLinearGradient(0,0,0,canvas.height);

gradient.addColorStop(0,#fff);

gradient.addColorStop(1,000);

ctx.fillStyle = gradient;

https://developer.mozilla.org/en/Canvas_tutorial/Basic_usage

13



HTML5, Web Storage

Web Storage- key value

localStorage

sessionStorage

.setItem(data, 12);

.getItem(data);

.removeItem(data) .clear()

sessionStorage.length

sessionStorage.key(i)

Trap: Stored as Strings!

14

Better than cookies

Benefit:Cookies on

steroids



HTML5, Web SQL database

Web SQL Storage- SQL database

var db;

if(window.openDatabase){

db = openDatabase(myDB, 1.0, test db, 2 *1024 *1024);

db.transaction(function (tx) {

tx.executeSql(CREATE TABLE IF NOT EXISTS test(id, date,testdata),[], function(){

)};//executeSql

)};//db.transaction}

15

SQL syntax

Benefit:Database in

Browser!


16/33


HTML5, Offline

Offline Application works even after network connectivity islost.

Manifest file needs to know what to cache.

Apache mimes.types:

text/cache-manifest manifest

16

No network, no problem


17/33


HTML5, Web Workers

Web workers

var worker=new Worker(myworker.js);

worker.postMessage(hello);

worker.onMessage = function(event){

alert(The worker sent + event.data);

};

//In myworker.js:

onmessage = function(event){

if(event.data == hello){

postMessage(hello main)

}else{

postMessage(Busy right now!);

}

}

17

multi threading

Benefit:Responsive

pages


18/33


HTML5, Geolocation

.Found You!

if(navigator.geolocation){

navigator.geolocation.getCurrentPosition(function(position){

var coord = position.coords;

showMap(coords.latitude, coords.longitude, coords.accuracy);

});}

.watchPosition();

.clearPosition();

18

geolocation


19/33


CSS3

CSS3 offers a huge variety of new ways to create animpact with your designs.

CSS 3 too has made its mark with its many features notonly augment the aesthetic appeal but also improvefunctionality.

Style your HTML markup using drop shadows, roundedcorners, multiple backgrounds, animation,transparency.

http://css3test.com/

http://www.css3.info/preview/

19
http://css3test.com/http://www.css3.info/preview/http://www.css3.info/preview/http://css3test.com/


20/33


CSS3

Borders border-radius

box-shadow

Background

background-size

background-origin

Text Wrap

text-shadow

text-wrap

@Font-face Transforms

transform

rotateX() rotateY()

20


21/33


CSS3

Transitions Animations

User Interface

resize

Color

opacity

Ruby

21


22/33


Responsive Design

http://www.readwriteweb.com/archives/redux_how_the_boston_globe_pulled_off_html5_responsive_d.php

22


23/33


Problem Definition

Mobile phones have different widths

Use Case

Mobile Browsers with different form factor request mobilepage

On Mobile Web server, User Agent is found

DRS finds width of phone based on User Agent One of many style sheets is chosen(different widths,

Blackberry)

Mobile page is styled

Mobile Page presented to end user.

Optimal?

Multiple style sheets, more processing, multiple images,

Should we create multiple css files for different

mobile sizes


24/33


Current Solution, Device Recognition Software

24

Https Request

176css

240css

320css

480css

320css

Blackberry

DRS Server

Mobile web page

DRS(http://tiles.intuit.com/tiles/site/tile/DRS)


25/33


Current Solution, Defects

25

Bigger css applied Smaller css applied


26/33


Proposed Solution

Use Case

Mobile Browsers, with different widths, request mobilepage

Flexible Mobile Page presented to end user.

How?

HTML5

CSS3

Responsive Design

JQuery Mobile


27/33


Proposed Solution, Responsive Design

27

Https Request

Responsive css

Mobile web page

Responsive Design


28/33


Responsive Design, What is? pg1

Flexible Grid Flexible Typesetting, font-size in em

Flexible Grid, width in percentage

Flexible margins and padding, in percentage

Flexible Images

Media Queries (CSS3)

font-size=1.25em; width=80%,margin=5%,;padding 5%;


29/33



Flexible Grid Flexible Images

Fluid Images, max-width=100%;

For IE, width=100%;

For IE, use AlphaImageLoader

Use overflow:hidden;

Media Queries (CSS3)

max-width=100%; overflow:hidden;


30/33



Flexible Grid Flexible Images

Media Queries (CSS3 feature)

media=screen and (min-width:1024px)

CSS3 is not supported?

Try css-mediaqueries.js

Try respond.js

media=screen and (min-width:1024px)


31/33


Summary

31


32/33


References

http://www.html5rocks.com/en/ http://html5boilerplate.com/

http://diveintohtml5.info/

http://caniuse.com/

http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/

http://jsbin.com/

http://html5demos.com/

32
http://www.html5rocks.com/en/http://html5boilerplate.com/http://diveintohtml5.info/http://caniuse.com/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://jsbin.com/http://html5demos.com/video-canvashttp://html5demos.com/video-canvashttp://jsbin.com/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://caniuse.com/http://diveintohtml5.info/http://html5boilerplate.com/http://www.html5rocks.com/en/


33/33

Q & A

presentation - html5 and css3

Documents