html5 css3
DESCRIPTION
HTML5 CSS3 Responsive DesignTRANSCRIPT
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
Intuit Proprietary & Confidential
HTML5, Crash Course
4
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
5
Many cool features to explore
Intuit Proprietary & Confidential
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">
Intuit Proprietary & Confidential
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
Intuit Proprietary & Confidential
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.
Intuit Proprietary & Confidential
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
Intuit Proprietary & Confidential
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?
Intuit Proprietary & Confidential
HTML5, Canvas
• <canvas></canvas>
• Dynamic rendering of 2D shapes and bitmap images.
12
<canvas>
Benefit:2D Games!
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!
14
Better than cookies
Benefit:Cookies on
steroids
Intuit Proprietary & Confidential
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!
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
16
No network, no problem
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!”);
}}
17
multi threading
Benefit:Responsive
pages
Intuit Proprietary & Confidential
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
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_globe_pulled_off_html5_responsive_d.php
22
Intuit Proprietary & Confidential23
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
Intuit Proprietary & Confidential
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)
Intuit Proprietary & Confidential
Current Solution, Defects
25
Bigger css applied Smaller css applied
Intuit Proprietary & Confidential26
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
Intuit Proprietary & Confidential
Proposed Solution, Responsive Design
27
Https Request
Responsive css
One css!
Mobile web page
Responsive Design
Intuit Proprietary & Confidential28
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%;
Intuit Proprietary & Confidential29
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;
Intuit Proprietary & Confidential30
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)”
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-css-techniques/25-html5-features-tips-and-techniques-you-must-know/• http://jsbin.com/• http://html5demos.com/
32
Intuit Proprietary & Confidential33
Q & A