Your SlideShare is downloading. ×
Html5 CSS3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html5 CSS3

516
views

Published on

HTML5 CSS3 Responsive Design

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
516
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 1. HTML5 and CSS3- One UI for All Mobile Phone Form Factors Puneet Kumar, Mobile Team, IFS
    • 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. 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. Intuit Proprietary & Confidential HTML5, Crash Course 4
    • 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. 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. Intuit Proprietary & Confidential HTML5, Semantic tags • <header> • <hgroup> • <article> • <section> • <aside> • <footer> • <nav> 7 Better than <div> Benefit: Human readable HTML pages.
    • 8. Intuit Proprietary & Confidential8 HTML4 HTML5 HTML5, Semantic tags #.header{…} #.navigator{…} #.sidebar{…} CSS: CSS: header{…} nav {…} aside{…} Semantic
    • 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. 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. 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. Intuit Proprietary & Confidential HTML5, Canvas • <canvas></canvas> • Dynamic rendering of 2D shapes and bitmap images. 12 <canvas> Benefit: 2D Games!
    • 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. 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. 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. 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. 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. 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. 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. 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. Intuit Proprietary & Confidential CSS3 • Transitions • Animations • User Interface – resize • Color – opacity • Ruby 21
    • 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. 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. 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. Intuit Proprietary & Confidential Current Solution, Defects 25 Bigger css applied Smaller css applied
    • 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. Intuit Proprietary & Confidential Proposed Solution, Responsive Design 27 Https Request Responsive css One css! Mobile web page Responsive Design
    • 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. 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. 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. Intuit Proprietary & Confidential Summary 31
    • 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. Intuit Proprietary & Confidential33 Q & A

    ×