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)...
Intuit Proprietary & Confidential
Logistics
• This presentation is Part 1 of HTML/CSS Workshop at
TechForum, Intuit, Feb 2...
Intuit Proprietary & Confidential
HTML5, Crash Course
4
Intuit Proprietary & Confidential
HTML5 Features
• New Doctype
• Semantic Tags
• Forms, new input types
• Video, Audio
• C...
Intuit Proprietary & Confidential
HTML5, New Doctype
• <!DOCTYPE html>
6
<!DOCTYPE html>
Benefit:
Simple.
• <!
DOCTYPE htm...
Intuit Proprietary & Confidential
HTML5, Semantic tags
• <header>
• <hgroup>
• <article>
• <section>
• <aside>
• <footer>
...
Intuit Proprietary & Confidential8
HTML4 HTML5
HTML5, Semantic tags
#.header{…}
#.navigator{…}
#.sidebar{…}
CSS: CSS:
head...
Intuit Proprietary & Confidential
HTML5, Forms, new input types
• <input type=email>
• <input type=url>
• <input type=date...
Intuit Proprietary & Confidential
HTML5, Forms, new input types
• <form action="" method="get">
<label for=”tel">type:tel<...
Intuit Proprietary & Confidential
HTML5, <video> <audio>
•video controls preload>
<source src="cohagenPhoneCall.ogv" type=...
Intuit Proprietary & Confidential
HTML5, Canvas
• <canvas></canvas>
• Dynamic rendering of 2D
shapes and bitmap images.
12...
Intuit Proprietary & Confidential
HTML5, Canvas
• <canvas id=“ex” width=“200” height=“200”>
• var ctx = document.getElemen...
Intuit Proprietary & Confidential
HTML5, Web Storage
• Web Storage- key value
– localStorage
– sessionStorage
– .setItem(‘...
Intuit Proprietary & Confidential
HTML5, Web SQL database
• Web SQL Storage- SQL database
• var db;
if(window.openDatabase...
Intuit Proprietary & Confidential
HTML5, Offline
• Offline
• Application works even after network connectivity is
lost.
• ...
Intuit Proprietary & Confidential
HTML5, Web Workers
• Web workers
• var worker=new Worker(“myworker.js”);
worker.postMess...
Intuit Proprietary & Confidential
HTML5, Geolocation
.Found You!
•if(navigator.geolocation){
– navigator.geolocation.getCu...
Intuit Proprietary & Confidential
CSS3
• CSS3 offers a huge variety of new ways to create an
impact with your designs.
• C...
Intuit Proprietary & Confidential
CSS3
• Borders
– border-radius
– box-shadow
• Background
– background-size
– background-...
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_pul...
Intuit Proprietary & Confidential23
Problem Definition
• Mobile phones have different widths
• Use Case
– Mobile Browsers ...
Intuit Proprietary & Confidential
Current Solution, Device Recognition Software
24
User Agent String
Https Request
Device ...
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
...
Intuit Proprietary & Confidential
Proposed Solution, Responsive Design
27
Https Request
Responsive css
One
css!
Mobile web...
Intuit Proprietary & Confidential28
Responsive Design, What is? pg1
• Flexible Grid
– Flexible Typesetting, font-size in e...
Intuit Proprietary & Confidential29
Responsive Design, What is? pg2
• Flexible Grid
• Flexible Images
– Fluid Images, max-...
Intuit Proprietary & Confidential30
Responsive Design, What is? pg3
• Flexible Grid
• Flexible Images
• Media Queries (CSS...
Intuit Proprietary & Confidential
Summary
31
Intuit Proprietary & Confidential
References
• http://www.html5rocks.com/en/
• http://html5boilerplate.com/
• http://divei...
Intuit Proprietary & Confidential33
Q & A
Upcoming SlideShare
Loading in …5
×

Html5 CSS3

811 views
719 views

Published on

HTML5 CSS3 Responsive Design

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
811
On SlideShare
0
From Embeds
0
Number of Embeds
65
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • A browser extension might allow a user to jump straight to the nav with a single keystroke. It can do this because it looks for nav rather than having to employ heuristics to find a div with an id or class that would suggest it’s being used as navigation. A restaurant site with a div called “menu” might be a list of foods rather than other pages. A crawler might dynamically assemble articles on a timeline.
  • http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element
  • http://tiles.intuit.com/tiles/site/tile/DRS
  • Html5 CSS3

    1. 1. HTML5 and CSS3- One UI for All Mobile Phone Form Factors Puneet Kumar, Mobile Team, IFS
    2. 2. 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!
    3. 3. 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
    4. 4. Intuit Proprietary & Confidential HTML5, Crash Course 4
    5. 5. 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
    6. 6. Intuit Proprietary & Confidential 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">
    7. 7. Intuit Proprietary & Confidential HTML5, Semantic tags • <header> • <hgroup> • <article> • <section> • <aside> • <footer> • <nav> 7 Better than <div> Benefit: Human readable HTML pages.
    8. 8. Intuit Proprietary & Confidential8 HTML4 HTML5 HTML5, Semantic tags #.header{…} #.navigator{…} #.sidebar{…} CSS: CSS: header{…} nav {…} aside{…} Semantic
    9. 9. 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.
    10. 10. 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
    11. 11. Intuit Proprietary & Confidential 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?
    12. 12. Intuit Proprietary & Confidential HTML5, Canvas • <canvas></canvas> • Dynamic rendering of 2D shapes and bitmap images. 12 <canvas> Benefit: 2D Games!
    13. 13. 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
    14. 14. 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
    15. 15. 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!
    16. 16. 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
    17. 17. 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
    18. 18. 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
    19. 19. 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
    20. 20. 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
    21. 21. Intuit Proprietary & Confidential CSS3 • Transitions • Animations • User Interface – resize • Color – opacity • Ruby 21
    22. 22. Intuit Proprietary & Confidential Responsive Design • http://www.readwriteweb.com/archives/redux_how_the_boston_gl obe_pulled_off_html5_responsive_d.php 22
    23. 23. 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
    24. 24. 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 Black berry DRS Server W hich css? Mobile web page DRS(http://tiles.intuit.com/tiles/site/tile/DRS)
    25. 25. Intuit Proprietary & Confidential Current Solution, Defects 25 Bigger css applied Smaller css applied
    26. 26. 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
    27. 27. Intuit Proprietary & Confidential Proposed Solution, Responsive Design 27 Https Request Responsive css One css! Mobile web page Responsive Design
    28. 28. 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%;
    29. 29. 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;
    30. 30. 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)”
    31. 31. Intuit Proprietary & Confidential Summary 31
    32. 32. 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
    33. 33. Intuit Proprietary & Confidential33 Q & A

    ×