Presentation - Html5 and CSS3

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#
HTML5, Crash Course
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
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>
HTML5, Semantic tags
<header>
<hgroup>
<article>
<section>
<aside>
<footer>
<nav>
Benefit:
Human readable
HTML pages.
Better than <div>
HTML5, Semantic tags

HTML5
HTML4
CSS:
CSS:
#.header{}
header{}
#.navigator{}
nav {}
#.sidebar{}
aside{}
Semantic
8
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=
>
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
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>
HTML5, Canvas
Benefit:
2D Games!
<canvas></canvas>
Dynamic rendering of 2D
shapes and bitmap images.
<canvas>
12
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!
Better than cookies

14
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
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
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
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
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_gl
obe_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
23
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
Current Solution, Defects
Bigger css applied
25
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
26
Proposed Solution,
Responsive Design
Https Request
Mobile web page
Responsive css
Responsive Design
27
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

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

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
Summary
31
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
Q&A
33

Presentation - Html5 and CSS3

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Presentation - Html5 and CSS3

Caricato da

Copyright:

Formati disponibili

HTML5 and CSS3- One UI for All

Mobile Phone Form Factors

Intuit Proprietary & Confidential

Intuit Proprietary & Confidential

HTML5, Crash Course

Intuit Proprietary & Confidential

Intuit Proprietary & Confidential

HTML5, New Doctype

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

Intuit Proprietary & Confidential

HTML5, Semantic tags

Better than <div>

Intuit Proprietary & Confidential

HTML5, Semantic tags

Intuit Proprietary & Confidential

HTML5, Forms, new input types

Intuit Proprietary & Confidential

HTML5, Forms, new input types

<form action="" method="get">

<input type=tel> will show number pad

Intuit Proprietary & Confidential

HTML5, <video> <audio>

video controls preload>

Intuit Proprietary & Confidential

Intuit Proprietary & Confidential

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

Intuit Proprietary & Confidential

HTML5, Web Storage

Better than cookies

Intuit Proprietary & Confidential

HTML5, Web SQL database

Intuit Proprietary & Confidential

Intuit Proprietary & Confidential

HTML5, Web Workers

Intuit Proprietary & Confidential

Intuit Proprietary & Confidential

Intuit Proprietary & Confidential

Intuit Proprietary & Confidential

Intuit Proprietary & Confidential

Intuit Proprietary & Confidential

Should we create multiple css files for different

Intuit Proprietary & Confidential

Device Recognition Software

Intuit Proprietary & Confidential

Current Solution, Defects

Bigger css applied

Smaller css applied

Intuit Proprietary & Confidential

Intuit Proprietary & Confidential

Mobile web page

Intuit Proprietary & Confidential

Responsive Design, What is? pg1

Intuit Proprietary & Confidential

Responsive Design, What is? pg2

Media Queries (CSS3)

Intuit Proprietary & Confidential

Responsive Design, What is? pg3

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

Intuit Proprietary & Confidential

Intuit Proprietary & Confidential

Intuit Proprietary & Confidential

Intuit Proprietary & Confidential

Potrebbero piacerti anche