presentation - html5 and css3
Post on 02-Jun-2018
236 Views
Preview:
TRANSCRIPT
-
8/10/2019 Presentation - Html5 and CSS3
1/33
HTML5 and CSS3- One UI for All
Mobile Phone Form Factors
Puneet Kumar, Mobile Team, IFS
-
8/10/2019 Presentation - Html5 and CSS3
2/33
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!
-
8/10/2019 Presentation - Html5 and CSS3
3/33
Intuit Proprietary & Confidential
Logistics
This presentation is Part 1 of HTML/CSS Workshop atTechForum, Intuit, Feb 21, 2012
This presentation at Brainstorm:https://intuit.intuitbrainstorm.com/Idea.aspx?id=11398
Q&A, at the end
Post questions tohttp://tiles.intuit.com/tiles/site/tile/HTML5#
3
-
8/10/2019 Presentation - Html5 and CSS3
4/33
Intuit Proprietary & Confidential
HTML5, Crash Course
4
-
8/10/2019 Presentation - Html5 and CSS3
5/33
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
-
8/10/2019 Presentation - Html5 and CSS3
6/33
Intuit Proprietary & Confidential
HTML5, New Doctype
6
Benefit:Simple.
-
8/10/2019 Presentation - Html5 and CSS3
7/33Intuit Proprietary & Confidential
HTML5, Semantic tags
7
Better than
Benefit:Human readable
HTML pages.
-
8/10/2019 Presentation - Html5 and CSS3
8/33Intuit Proprietary & Confidential8
HTML4 HTML5
HTML5, Semantic tags
#.header{}
#.navigator{}
#.sidebar{}
CSS: CSS:
header{}
nav {}
aside{}
Semantic
-
8/10/2019 Presentation - Html5 and CSS3
9/33Intuit Proprietary & Confidential
HTML5, Forms, new input types
9
Benefit:Built in
validation.
-
8/10/2019 Presentation - Html5 and CSS3
10/33Intuit Proprietary & Confidential
HTML5, Forms, new input types
Submit Form
First
10
will show number pad
-
8/10/2019 Presentation - Html5 and CSS3
11/33Intuit Proprietary & Confidential
HTML5,
videocontrols preload>
Your browser is old. Download this video instead.
11
Benefit:Flash killer?
-
8/10/2019 Presentation - Html5 and CSS3
12/33Intuit Proprietary & Confidential
HTML5, Canvas
Dynamic rendering of 2Dshapes and bitmap images.
12
Benefit:2D Games!
-
8/10/2019 Presentation - Html5 and CSS3
13/33Intuit Proprietary & Confidential
HTML5, Canvas
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
-
8/10/2019 Presentation - Html5 and CSS3
14/33Intuit 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
-
8/10/2019 Presentation - Html5 and CSS3
15/33Intuit 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!
-
8/10/2019 Presentation - Html5 and CSS3
16/33
Intuit Proprietary & Confidential
HTML5, Offline
Offline Application works even after network connectivity islost.
Manifest file needs to know what to cache.
Apache mimes.types:
text/cache-manifest manifest
16
No network, no problem
-
8/10/2019 Presentation - Html5 and CSS3
17/33
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
-
8/10/2019 Presentation - Html5 and CSS3
18/33
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
-
8/10/2019 Presentation - Html5 and CSS3
19/33
Intuit Proprietary & Confidential
CSS3
CSS3 offers a huge variety of new ways to create animpact with your designs.
CSS 3 too has made its mark with its many features notonly augment the aesthetic appeal but also improvefunctionality.
Style your HTML markup using drop shadows, roundedcorners, multiple backgrounds, animation,transparency.
http://css3test.com/
http://www.css3.info/preview/
19
http://css3test.com/http://www.css3.info/preview/http://www.css3.info/preview/http://css3test.com/ -
8/10/2019 Presentation - Html5 and CSS3
20/33
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
-
8/10/2019 Presentation - Html5 and CSS3
21/33
Intuit Proprietary & Confidential
CSS3
Transitions Animations
User Interface
resize
Color
opacity
Ruby
21
-
8/10/2019 Presentation - Html5 and CSS3
22/33
Intuit Proprietary & Confidential
Responsive Design
http://www.readwriteweb.com/archives/redux_how_the_boston_globe_pulled_off_html5_responsive_d.php
22
-
8/10/2019 Presentation - Html5 and CSS3
23/33
Intuit Proprietary & Confidential23
Problem Definition
Mobile phones have different widths
Use Case
Mobile Browsers with different form factor request mobilepage
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
-
8/10/2019 Presentation - Html5 and CSS3
24/33
Intuit Proprietary & Confidential
Current Solution, Device Recognition Software
24
Https Request
176css
240css
320css
480css
320css
Blackberry
DRS Server
Mobile web page
DRS(http://tiles.intuit.com/tiles/site/tile/DRS)
-
8/10/2019 Presentation - Html5 and CSS3
25/33
Intuit Proprietary & Confidential
Current Solution, Defects
25
Bigger css applied Smaller css applied
-
8/10/2019 Presentation - Html5 and CSS3
26/33
Intuit Proprietary & Confidential26
Proposed Solution
Use Case
Mobile Browsers, with different widths, request mobilepage
Flexible Mobile Page presented to end user.
How?
HTML5
CSS3
Responsive Design
JQuery Mobile
-
8/10/2019 Presentation - Html5 and CSS3
27/33
Intuit Proprietary & Confidential
Proposed Solution, Responsive Design
27
Https Request
Responsive css
Mobile web page
Responsive Design
-
8/10/2019 Presentation - Html5 and CSS3
28/33
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%;
-
8/10/2019 Presentation - Html5 and CSS3
29/33
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;
-
8/10/2019 Presentation - Html5 and CSS3
30/33
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)
-
8/10/2019 Presentation - Html5 and CSS3
31/33
Intuit Proprietary & Confidential
Summary
31
-
8/10/2019 Presentation - Html5 and CSS3
32/33
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
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://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://jsbin.com/http://html5demos.com/video-canvashttp://html5demos.com/video-canvashttp://jsbin.com/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/http://caniuse.com/http://diveintohtml5.info/http://html5boilerplate.com/http://www.html5rocks.com/en/ -
8/10/2019 Presentation - Html5 and CSS3
33/33
Q & A
top related