Scribd
Upload
287 views

Presentation - Html5 and CSS3

The presentation discusses HTML5 and CSS3 for responsive design on mobile devices. It provides a crash course on new HTML5 features like semantic tags, forms, video/audio, canvas, storage and geolocation. It also covers new CSS3 features like borders, backgrounds, fonts and transformations. It defines the problem of creating separate stylesheets for different mobile widths. The current solution uses device recognition software to select the appropriate stylesheet. The proposed solution is responsive design using a flexible grid, flexible images, and CSS3 media queries to dynamically adapt the layout. Responsive design addresses defects of the current approach and provides an optimal solution.

Uploaded by

Jaydeep Jodhpura
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
287 views

Presentation - Html5 and CSS3

The presentation discusses HTML5 and CSS3 for responsive design on mobile devices. It provides a crash course on new HTML5 features like semantic tags, forms, video/audio, canvas, storage and geolocation. It also covers new CSS3 features like borders, backgrounds, fonts and transformations. It defines the problem of creating separate stylesheets for different mobile widths. The current solution uses device recognition software to select the appropriate stylesheet. The proposed solution is responsive design using a flexible grid, flexible images, and CSS3 media queries to dynamically adapt the layout. Responsive design addresses defects of the current approach and provides an optimal solution.

Uploaded by

Jaydeep Jodhpura
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 33

HTML5 and CSS3- One UI for All

Mobile Phone Form Factors


Puneet Kumar, Mobile Team, IFS

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=1139
8
Q&A, at the end
Post questions to
http://tiles.intuit.com/tiles/site/tile/HTML5#

Intuit Proprietary & Confidential

HTML5, Crash Course

Intuit Proprietary & Confidential

HTML5 Features

New Doctype
Semantic Tags
Forms, new input types
Video, Audio
Canvas
Web Storage
Offline
Web Workers
GeoLocation
Drag and drop
Many cool features to explore

Intuit Proprietary & Confidential

HTML5, New Doctype


<!DOCTYPE html>
Benefit:
Simple.

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


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

<!DOCTYPE html>

Intuit Proprietary & Confidential

HTML5, Semantic tags

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

Benefit:
Human readable
HTML pages.

Better than <div>

Intuit Proprietary & Confidential

HTML5, Semantic tags


HTML5

HTML4

CSS:

CSS:

#.header{}

header{}

#.navigator{}

nav {}

#.sidebar{}

aside{}

Semantic
8

Intuit Proprietary & Confidential

HTML5, Forms, new input types

<input
<input
<input
<input
<input
<input
<input
<input
<input
<input
<input

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

Intuit Proprietary & Confidential

>

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>

<input type=tel> will show number pad


10

Intuit Proprietary & Confidential

HTML5, <video> <audio>

Benefit:
Flash killer?

video controls preload>


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

<video>
11

<audio>

Intuit Proprietary & Confidential

HTML5, Canvas

Benefit:
2D Games!

<canvas></canvas>
Dynamic rendering of 2D
shapes and bitmap images.

<canvas>
12

Intuit Proprietary & Confidential

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

Intuit Proprietary & Confidential

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!

Better than cookies


14

Intuit Proprietary & Confidential

Benefit:
Cookies on
steroids

HTML5, Web SQL database


Web SQL Storage- SQL database

Benefit:
Database in
Browser!

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
}

SQL syntax
15

Intuit Proprietary & Confidential

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

No network, no problem
16

Intuit Proprietary & Confidential

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!);
}
}

multi threading
17

Intuit Proprietary & Confidential

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();

geolocation
18

Intuit Proprietary & Confidential

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

Intuit Proprietary & Confidential

CSS3
Borders
border-radius
box-shadow

Background
background-size
background-origin

Text Wrap
text-shadow
text-wrap

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

20

Intuit Proprietary & Confidential

CSS3
Transitions
Animations
User Interface
resize

Color
opacity

Ruby

21

Intuit Proprietary & Confidential

Responsive Design

http://www.readwriteweb.com/archives/redux_how_the_boston_gl
obe_pulled_off_html5_responsive_d.php

22

Intuit Proprietary & Confidential

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
23

Intuit Proprietary & Confidential

Current Solution,

Device Recognition Software

Https Request
DRS Server
Mobile web page

176
css

240
css

320
css

480
css

320
css
Black
berry

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

Intuit Proprietary & Confidential

Current Solution, Defects

Bigger css applied

25

Smaller css applied

Intuit Proprietary & Confidential

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

26

Intuit Proprietary & Confidential

Proposed Solution,

Responsive Design

Https Request

Mobile web page

Responsive css

Responsive Design
27

Intuit Proprietary & Confidential

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

Intuit Proprietary & Confidential

Responsive Design, What is? pg2


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

Intuit Proprietary & Confidential

Responsive Design, What is? pg3


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)


30

Intuit Proprietary & Confidential

Summary

31

Intuit Proprietary & Confidential

References
http://www.html5rocks.com/en/
http://html5boilerplate.com/
http://diveintohtml5.info/
http://caniuse.com/
http://net.tutsplus.com/tutorials/html-csstechniques/25-html5-features-tips-and-techniquesyou-must-know/
http://jsbin.com/
http://html5demos.com/

32

Intuit Proprietary & Confidential

Q&A

33

Intuit Proprietary & Confidential

You might also like