Html5 CSS3

HTML5 and CSS3- One UI for All Mobile Phone Form Factors

Puneet Kumar, Mobile Team, IFS

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!

Intuit Proprietary & Confidential

Logistics

• This presentation is Part 1 of HTML/CSS Workshop at TechForum, Intuit, Feb 21, 2012• This presentation at Brainstorm: https://intuit.intuitbrainstorm.com/Idea.aspx?id=11398• Q&A, at the end• Post questions to http://tiles.intuit.com/tiles/site/tile/HTML5#

3


HTML5, Crash Course

4


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


HTML5, New Doctype

• <!DOCTYPE html>

6

<!DOCTYPE html>

Benefit:Simple.

• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


HTML5, Semantic tags

• <header>• <hgroup>• <article>• <section>• <aside>• <footer>• <nav>

7

Better than <div>

Benefit:Human readable

HTML pages.


HTML4 HTML5

HTML5, Semantic tags

#.header{…}

#.navigator{…}

#.sidebar{…}

CSS: CSS:

header{…}

nav {…}

aside{…}

Semantic


HTML5, Forms, new input types

• <input type=email>• <input type=url>• <input type=date>• <input type=time>• <input type=datetime>• <input type=month>• <input type=week>• <input type=number>• <input type=tel>• <input type=color>• <input pattern=“[0-9][A-Z]{3}”>

9

<input type= >

Benefit:Built in

validation.


HTML5, Forms, new input types• <form action="" method="get"> <label for=”tel">type:tel</label> <input id=”tel" name=”tel" type=”tel" /> <button type="submit"> Submit Form </button> </form>

• <ul contenteditable=“true”><li>First</li></ul>

10

<input type=“tel”> will show number pad


HTML5, <video> <audio>

•video controls preload> <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" /> <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" /> <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p> </video>

11

<video> <audio>

Benefit:Flash killer?


HTML5, Canvas

• <canvas></canvas>

• Dynamic rendering of 2D shapes and bitmap images.

12

<canvas>

Benefit:2D Games!


HTML5, Canvas• <canvas id=“ex” width=“200” height=“200”>

• 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!


HTML5, Offline

• Offline• Application works even after network connectivity is lost.• Manifest file needs to know what to cache.

• <html manifest=“/time.manifest”>• Apache mimes.types:

– text/cache-manifest manifest

16

No network, no problem


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


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


CSS3

• CSS3 offers a huge variety of new ways to create an impact with your designs.• CSS 3 too has made its mark with its many features not only augment the aesthetic appeal but also improve functionality.• Style your HTML markup using drop shadows, rounded corners, multiple backgrounds, animation, transparency.

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

19


CSS3

• Borders– border-radius– box-shadow

• Background– background-size– background-origin

• Text Wrap– text-shadow– text-wrap

• @Font-face• Transforms– transform– rotateX() rotateY()

20


CSS3

• Transitions• Animations• User Interface– resize

• Color– opacity

• Ruby

21


Responsive Design

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

22


Problem Definition• Mobile phones have different widths

• Use Case–Mobile Browsers with different form factor request mobile

page–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


Current Solution, Device Recognition Software

24

User Agent String

Https Request

Device Width etc

176 css

240 css

320 css

480 css

320 css

Blackberry

DRS Server

Which css?

Mobile web page

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


Current Solution, Defects

25

Bigger css applied Smaller css applied


Proposed Solution

• Use Case–Mobile Browsers, with different widths, request mobile

page– Flexible Mobile Page presented to end user.

• How?–HTML5– CSS3– Responsive Design– JQuery Mobile


Proposed Solution, Responsive Design

27

Https Request

Responsive css

One css!

Mobile web page

Responsive Design


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%;



• 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;



• 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)”


Summary

31


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


Q & A

Html5 CSS3

Technology

Transcript of Html5 CSS3