Html5 CSS3

HTML5 and CSS3- One UI for All
Mobile Phone Form Factors
Puneet Kumar, Mobile Team, IFS

Intuit Proprietary & Confidential
2
Agenda
•HTML5 Crash course(20min)
•CSS3 Crash course(10min)
•Responsive Design(10 min)
– Problem definition
– Current Solution
– Proposed Solution
– How can Responsive Design help!

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 Trans
itional//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.

Intuit Proprietary & Confidential8
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; 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>
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_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

Current Solution, Device Recognition Software
24
User Agent String
Https Request
Device Width etc
176
css
240
css
320
css
480
css
320
css
Black
berry
DRS Server
W
hich
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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie Html5 CSS3

Ähnlich wie Html5 CSS3 (20)

Mehr von Puneet Kumar

Mehr von Puneet Kumar (7)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Html5 CSS3

Hinweis der Redaktion