Download presentation
Presentation is loading. Please wait.
Published byVirginia Mutter Modified over 10 years ago
1
HTML5, CSS3 and other fancy buzzwords Bringing sexy back to the mobile web
2
Mohammad (Mo) Jangda batmoo@gmail.com mohammad.jangda@vortexmobile.cavortexmobile.ca http://digitalhttp://digitalize.ca @mjangda Whats Up?
3
HTML5 Move over Jesse James Garret! We've found the new AJAX!
4
What exactly is an HTML5? HTML4 all grown up? xHTML's way cooler cousin? 5 Highly Trained Militant Lemurs? Steve Jobs Inventor of HTML5
5
a bit of HTML + a dash of CSS + a whole sprinkling of JavaScript
6
Semantics Forms Geolocation Offline Presentatio n StylingTransformsAni mations Rich Media Audio Video Canvas The HTML5 Family Minus some legitimate & illegitimate cousins... Web Workers Web Sockets Storage
7
So what does HTML5 give us?
8
Strong Semantics Good markup is healthy markup.
9
Richness without cost Add all the whiz, bang, and fireworks without having to rely on 3rd party libraries and plugins. Stuff that took images and extra markup and hours to perfect, now available through a CSS property or two.
10
New levels of interactivi ty APIs that help us build more powerful, feature-rich mobile webapps. Helping bridge the gap between native and web.
11
Whats it mean for the Mobile Web?
12
It's finally growing up WebApps are better, smarter, sexier WebApps can do more with less WebApps can do the same, if not more than Native Apps
14
Semantics Because s are boring.
15
CODE My website rocks! This is the greatest page ever Lorem ipsum demet... My sweet sidebar Copyright 1900 Some Company
16
CODE My website rocks! This is the greatest page ever Lorem ipsum demet... [Modules] Copyright 1900 Some Company
17
A semantically meaningful tag is way more powerful than a generic one +1 for code maintenance (no more )
18
Because I cant win free iPads without giving away my credit card numbers. Forms
19
Filling out forms on a mobile device is like having your teeth pulled. Without a local anesthetic. Ask anyone with a BlackBerry...
20
Context- Aware Keyboards are awesome.
21
Think about a mobile expense tracker. Or an app that lets you track how bad your golf game really is... Thats a lot of data entry!
22
Little bits of efficiency, add up to a lot of efficiency.
23
CODE
24
CODE
25
CODE Not ready for primetime just yet...
26
Mobile Web Form Pro- tip #1 Learn to love and use these attributes: autocapitalize & autocorrect Set them to "off" for certain fields (email, url)
27
CODE
28
Mobile Web Form Pro- tip #2 Use caution with the placeholder attribute. Shouldn't be a replacement for labels. Instead, use them to assist your user.
29
Inayaili de León http://24ways.org/2009/have-a-field-day-with-html5-forms
30
Mobile Web Form Pro- tip #3 Keep an eye out for browser-based validation.
31
&
32
CODE Simple
33
CODE Download the video Advanced
34
Desktops have all the fun! Player is customizable and programmatically accessible through javascript (i.e. play, pause, etc.) Not the case on mobile devices (iPad excluded)
35
Most devices offload audio and video playback to their native media players...which is a good thing
36
Oh, and support kinda sucks... YAUFW! (Yet Another Unnecessary Format War)
37
CSS3 Styling
38
CODE Your content goes here! /* Rounded corner for registration tab */.roundedcornr_box_812460 { background: url(../images/rounded/roundedcornr_812460_tl.png) no-repeat top left; }.roundedcornr_top_812460 { background: url(../images/rounded/roundedcornr_812460_tr.png) no-repeat top right; }.roundedcornr_bottom_812460 { background: url(../images/rounded/roundedcornr_812460_bl.png) no-repeat bottom left; }.roundedcornr_bottom_812460 div { background: url(../images/rounded/roundedcornr_812460_br.png) no-repeat bottom right; }.roundedcornr_content_812460 { background: url(../images/rounded/roundedcornr_812460_r.png) top right repeat-y; }.roundedcornr_top_812460 div,.roundedcornr_top_812460,.roundedcornr_bottom_812460 div,.roundedcornr_bottom_812460 { width: 100%; height: 15px; font-size: 1px; }.roundedcornr_content_812460,.roundedcornr_bottom_812460 { /*margin-top: -19px;*/ }.roundedcornr_content_812460 { padding: 0 15px; } Pre-CSS3: Rounded Corners
39
CODE CSS3: Rounded Corners This is content.rounded { border-radius: 5px; border: 1px solid #111; }
40
Amazing! Yes, we just went from 3 billion lines of code......to just under 10.
41
Rounded corners: border-radius Drop shadows: box-shadow & text-shadow Multiple columns: column-count & column-gap Transparent backgrounds: rgba Multiple backgrounds Background gradients Some of the fancy new properties:
42
Because CSS3 is not yet a finalized spec, base properties dont work in most browsers. Instead, you have to use the proprietary prefix for each browser.
43
border-radius -moz-border-radius (for Fennec / FF)- o-border-radius (for Opera Mobile)- webkit-border-radius (in Mobile Safari, Android, webOS, BB6)-ms- border-radius (in IE Mobile)
44
CSS3 Selectors
45
Full of sizzle-y goodness. Well, close enough.
46
Attribute pattern-matching starts with [rel^=awesome] ends with [title$=amazing] contains [name*=super]
47
Element matching nth-child nth-child(odd) nth-child(2) nth-child(2n) nth-last-child same as above, except working backwards not :not(input) and a whole bunch of others...
48
CSS3 Transforms
49
#Box1 Meet Mr. Box.
50
#Box1 Feelin Tipsy, Mr. Box? #Box1 { transform: rotate(45deg); }
51
#Box1 Feelin Out of Place, Mr. Box? #Box1 { transform: translate(10px, 10px); } #Box1
52
#Box1 Feelin (Vertically) Out of Place, Mr. Box? #Box1 { transform: translateY(10px); } #Box1
53
#Box1 Feelin (Horizontally) Out of Place, Mr. Box? #Box1 { transform: translateX(10px); } #Box1
54
Feelin a little bloated, Mr. Box? #Box1 { transform: scale(2); } #Box1
55
Feelin weak, Mr. Box? #Box1 { transform: scale(0.5); } #Box1
56
#Box1 Hows the weather up there, Mr. Box? #Box1 { transform: scaleY(2); } Ate too much, Mr. Box? #Box1 { transform: scaleX(2); } #Box1
57
View (a)skew, Mr. Box? #Box1 { transform: skew(-30deg, 30deg); }
58
What about those cool 3D transforms in Toy Story? iPhone-only at this point. (though, possibly BlackBerry 6 as well)
59
Transform in Z-space using Z properties. scaleZ rotateZ rotate3D translateZ
60
Are images dead? Unlikely.
61
CSS3 Transition & Animation
62
JavaScript animations on mobile devices are painful. Like first-crush- ditching-you-for- your-best-friend- because-he-has-a- newer-bike painful.
63
CSS animations are smoother, faster, and require far less code. And just for kicks, well throw in some hardware acceleration too.
69
As simple as adding a single property! transition: 1s;
70
Whenever a property for the transition-ready element changes, the browser auto-tweens the element for you!
71
#container { transition: 1s; } #container:hover { opacity: 0.4 }
72
Transition Properties Which properties should be animated? transition-property: color; default: all How long should the transition take? transition-duration: 1s; default: 0, which means no animation. Required! Should we wait a bit before starting? transition-delay: 0.5s; default: 0 Can be negative. Will start as if pre-animated.
73
Transition Properties (contd) Which timing curve should we use? transition-timing-function: ease-out; default: ease Other values: linear ease-in ease-out ease-in-out cubic-bezier (custom-defined)
74
CODE
75
Feeling lazy? Shorthand it. p { transition: color 1s ease-in 2s;} Might change to: p { transition: color 1s/2s ease-in;}
76
Want to make everything transition- ready? (though, probably a bad idea) * { transition: 1s;}
77
Whenever possible, use classes instead of direct CSS manipulation. Generally yields better performance.
78
What about complex animations? Combine multiple transitions!
80
Define tween checkpoints and the properties to be changed at each. #box1.animated { animation-name: goCrazy } @keyframes goCrazy { 0% { } 33% { left: 200px; } 66% { -webkit-transform: rotate(-90deg); } 100% { -webkit-transform: scale(2); opacity: 0; }}
81
Animation Properties Same as before animation-duration: 1s; animation-delay: 0.5s; animation-timing-function: ease-out; Which direction should animations run? animation-direction: alternate; default: normal; Which direction should animations run? animation-iteration-count: 4; default: 1; Use infinite for a never-ending loop.
82
Lets walk through a simple 3D animation...
86
#Box2#Box1 Remember Mr. Box? Say Hello to Mrs. Box.
87
#Box2#Box1 Lets get animating!
88
#Box2#Box1 Flip horizontally transform: rotateY(180deg);
89
#Box2#Box1 Re-position and wrap position: absolute; #Container position: relative;
90
#Container Box 2 #Box1 Enable 3D animation #container { transform-style: preserve-3d; transition: transform 1s; }
91
#Container Box 2 #Box1
92
#Container #Box1 Get flippy #container:hover { transform: rotateY(180deg); } #Box2
93
#Container Box 2 #Box1
94
#container.flipped { transform: rotateY(180deg); }... Because :hover and mobile dont always get along...
95
http://www.paulrhayes.com/experiments/cube- 3d/index.html
96
Canvas
97
Exactly what it sounds like A blank slate with which you can do (almost) anything: - create elements, shapes, lines, images, 3D things, text. - modify them - animate them - etc.
100
Geolocation
101
CODE if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(success, error); } else { alert('Your device doesn\'t support HTML5 geolocation'); }
102
CODE function success( position ) { alert( 'Latitude: ' + position.coords.latitude ); alert( 'Longitude: ' + position.coords.longitude ); // position exposes other properties as well: // timestamp, accuracy, heading, altitude, etc. }
103
CODE function error( error ) { alert( 'Sorry, we could\nt figure out your location!' ); console.error( 'Error', error.code, error.message ); // error codes: // 1: location permission denied // 2: location fetch failed // 3: timeout // 0: unknown }
104
Not quite stalker-ish enough for you?
105
CODE if(navigator.geolocation) { watch = navigator.geolocation.watchPosition( success ); // Callback triggered whenever position changes // Success callback could add a point to a map // Or refresh a list of nearby locations // Etc. } // Stop stalking clearWatch(watch);
106
Users always have to allow access to their location first.
107
Stalking Best Practices Always provide a fallback! IP location can suck. GPSes are awesome, but satellites can have bad days. Have an [edit location] button AND manual entry
108
So, what can we do with Location?
109
Lets Map It
110
CODE http://maps.google.com/maps/api/js?sensor=false function initMap(id) { var mapOptions = { center: new google.maps.LatLng(0, 0), zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP }; return new google.maps.Map(document.getElementById(id), mapOptions); } var map = initMap('map'); Initialize the map
111
CODE Add Users Location to the map function mapPosition(map, lat, lng) { var position = new google.maps.LatLng(lat, lng); markerOptions = { position: position, map: map }; var marker = new google.maps.Marker(markerOptions); map.setCenter(position); return marker; } if(navigator.geolocation) { navigator.geolocation.getCurrentPosition( function( position ) { mapPosition(map, position.coords.latitude, position.coords.longitude ); }, function( error ) { alert(error.message); } ); }
113
Lets Geocode It.
114
CODE http://maps.google.com/maps/api/geocode/jso n?latlng=40.714224,-73.961452&sensor=false Server-side (need proxy)
115
CODE Client-side new google.maps.Geocoder(); geocoder.geocode( { 'latLng': new google.maps.LatLng(lat, lng) }, function(results, status) { for( var i = 0; i < data.results.length; i++ ) { var result = results[i]; if(result.types[0] == 'locality' && result.types[1] == 'political') { alert('Your city: ' + result.formatted_address); } );
116
Connect with any of the 3 trillion Location-based APIs out there.
117
Offline
118
Manifes t Cache for storing HTML, CSS, JS required for offline usage. Storage Cache for storing data. 3 flavours: sessionStorage localStorage Web SQL (and a few other types being cooked up for the future...)
119
Pre-loading of content improves speed and prevents repeated roundtrips to server. Cache heavy or unique data loads that are unlikely to change, e.g. location information, favourites, etc. Beyond just for "I'm going underground" scenarios.
120
CODE CACHE MANIFEST index.html help.html style/main.css images/logo.png images/cupcakes.png Specify the manifest file offline-manifest file
121
sessionStorage.haveMessage = true; localStorage.messages = [ Hello World, Goodbye World ] Window 1 Window 2
122
sessionStorage.haveMessage => true localStorage.messages => [ Hello World, Goodbye World ] Window 1 Window 2 sessionStorage.haveMessage => null localStorage.messages => [ Hello World, Goodbye World ]
123
Web SQL Full-fledged SQLLite database in the browser!
124
CODE // Basic API methods db = openDatabase( name, version ); db.transaction( callback ); transaction.executeSql( sql, values, success, error );
125
CODE // Create database connection // @params: name, version, display name, size in bytes var db = openDatabase('bakery', '1.0', 'My Bakery', 1048576);
126
CODE // Create table db.transaction(function(trans) { trans.executeSql('CREATE TABLE IF NOT EXISTS Cupcakes (name TEXT, description TEXT)', []); });
127
CODE // Add entries db.transaction(function(trans) { trans.executeSql('INSERT INTO Cupcakes VALUES (?, ?)', ['Vanilla', 'Good ol vanilla!']); trans.executeSql('INSERT INTO Cupcakes VALUES (?, ?)', ['Chocolate', 'Good ol chocolate!']); });
128
CODE // Select entries db.transaction(function(trans) { trans.executeSql(SELECT * FROM Cupcakes, [], function(trans, results) { for(var i = 0; i < results.rows.length; i++) { var cupcake = results.rows.item(i); document.getElement('cupcakes').innerHTML += ' ' + cupcake.name + ': ' + cucpake.description + ' '; } alert('We\'ve got ' + results.rows.length + ' cupcake(s)'); });
129
sessionStorage vs. localStorage vs. Web SQL
130
Depends on the specificity and complexity of your use cases. sessionStorage: Cupcake localStorage: Slice of cake Web SQL: Multi-tiered wedding cake (Though, the last two can vary depending on your views on SQL / noSQL)
131
Storage in the Wild
132
Gmail Web SQL database Recent messages are pre-fetched. Certain data (labels) is pre- fetched. Requires force refresh for update.
133
YouTube localStorage Caches AJAX requests, search history, user actions, etc.
134
Sundry Cool Stuff #1 window.onhashchange / pushState Build true event-driven, dyanmic sites with solid back button support and fragement urls.
135
Sundry Cool Stuff #2 data-attributes Store data as attributes within DOM Elements.
136
CODE Cupcake! (Accessed via element.dataset.flavour => chocolate)
137
Use Case: Weather WebApp
138
Get User Location (geolocation) Store Favourite Cities (localStorage) Pre-fetch long-term forecast (Web SQL) Weather Trends Graphs (Canvas) Eye Candy (CSS3 transitions / animations) Video Weather Report ( )
139
Tools of the Trade Because only nerds build everything from scratch.
140
iUI
141
jQTouch
142
SenchaTouch
143
SproutCore
144
jQuery Mobile
145
Numerous other libraries processing.js raphael.js geolocation (with fallbacks) jQuery.animate + CSS3 Animations persistence.js (with fallback to Gears)
146
And, one more thing: Enhance Progressivel y!
147
Whats Next? Hardware access? Notifications? Mind control?
148
Thank You! Mohammad Jangda Vortex Mobile batmoo@gmail.com mohammad.jangda@vortexmobile.ca http://digitalize.ca @mjangda
Similar presentations
© 2024 SlidePlayer.com Inc.
All rights reserved.