Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5 and CSS3: Exploring   Mobile Possibilities
Roby on Rails
Mozilla is a global non-profitdedicated to putting you in controlof your online experience andshaping the future of the Web...
CSS Media Queries
width                 colorheight                color-indexdevice-width          monochromedevice-height         resoluti...
min-widthmax-widthorientation
<link rel="stylesheet"  href="pretty.css"  media="screen and (min-width: 500px)">
.nav {    width: 150px;}@media screen and (min-width: 500px) {    .nav {        width: 300px;    }}
@media screen and (min-width: 500px) and (max-width: 1024px) {    .nav {        width: 200px;    }}
@media screen and (min-width: 100px),@media handheld {    .nav {        width: 350px;    }}
@media only screen and (min-width: 100px) {    .nav {        width: 350px;    }}
@media not screen and (min-width: 100px) {    .nav {        width: 100%;    }}
@media screen and (orientation: landscape) {    .nav {        float: left;        width: 20%;    }    .main {        float...
@media screen and (orientation: portrait) {    .nav {        width: 100%;    }    .main {        width: 100%;    }}
<meta name="viewport"    content="width=device-width, initial-scale=1.0"><meta name="viewport"    content="width=device-wi...
http://mediaqueri.es/
CSS Flex Box
<div class="flex-container">    <section class="col-1">I am column 1</section>    <section class="col-2">I am column 2</se...
.flex-container {    display: -moz-box;    display: -ms-box;    display: -webkit-box;    display: box;    -moz-box-orient:...
.col-1 {    -moz-box-flex: 1;    -ms-box-flex: 1;    -webkit-box-flex: 1;    box-flex: 1;}.col-2 {    -moz-box-flex: 1;   ...
.col-1 {    -moz-box-ordinal-group: 2;    -ms-box-ordinal-group: 2;    -webkit-box-ordinal-group: 2;    box-ordinal-group:...
flex- instead of box-
CSS Transitions
/* Shorthand version */#hello {    display: inline-block;    height: 20px;    opacity: 0.3;    -moz-transition: height 1s ...
/* Shorthand version */.menu-item {    position: relative;    display: inline-block;    border: 1px dashed #000;    paddin...
.love-me {    -webkit-transform: translate3d(0, 0, 0);}
CSS Animations
.animation-container {    height: 60px;    padding: 10px;    -moz-animation-name: movearound;    -moz-animation-duration: ...
@-webkit-keyframes movearound {    from {         width: 200px;         background: #f00;         opacity: 0.5;         -w...
CSS box-shadow and text-shadow
text-overflow: ellipsis
HTML5 Forms
New form types<input type="color">             <input type="range"><input type="date">              <input type="search"  ...
New form attributes<input type="text" autocomplete="off"><input type="text" autofocus><input type="submit" formaction="htt...
<input type="text" list="data-list"><input type="range" max="95"><input type="range" min="2"><input type="file" multiple><...
New form elements<input type="text" list="data-list"><datalist id="data-list">    <option value="Hugo Reyes">    <option v...
<keygen></keygen><meter min="0" max="10" value="7"></meter><input type="range" id="range"><output for="range" id="output">...
<input type="range" id="range"><output for="range" id="output"></output><script>    (function () {         var theForm = d...
http://www.quirksmode.org/html5/inputs.htmlhttp://www.quirksmode.org/html5/inputs_mobile.htmlhttp://wufoo.com/html5/
Link protocols
#b                                                   ro                                                        ws         ...
JavaScript on mobile
Web Storage
sessionStorage.setItem("Charming", "Piers Morgan");console.log(sessionStorage.getItem("Charming"));
localStorage.setItem("Job", "Show host");
var piersMorgan = {    "Transportation" : "Segway",    "Damage" : "Three broken ribs"};localStorage.setItem("piersMorgan",...
Web SQL   IndexedDB
Geolocation
if (navigator.geolocation) {    navigator.geolocation.getCurrentPosition(function (position) {        alert(position.coord...
Offline Web Applications
// Poll the navigator.onLine propertysetInterval(function () {    console.log(navigator.onLine);}, 1000);
<!DOCTYPE html><html manifest="offline.appcache"><head>...
CACHE MANIFEST# VERSION 10CACHE:offline.htmlbase.cssFALLBACK:online.css offline.cssNETWORK:/live-updates
History API
window.history.pushState(state, title, url);
var url = "http://robertnyman.com",title = "My blog",state = {    address : url};window.history.pushState(state, title, ur...
Mobile Perf
weinre
position: fixedoverflow: scroll-webkit-overflow-scrolling: touchWeb Workers
Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/    Twitter: @robertnymanrobertnyman.com/c...
Geolocation
Geolocation
Geolocation
Geolocation
Geolocation
Geolocation
Geolocation
Geolocation
Geolocation
Geolocation
Geolocation
Geolocation
Geolocation
Geolocation
Geolocation
Geolocation
Geolocation
Geolocation
Geolocation
Geolocation
Geolocation
Geolocation
Geolocation
Geolocation
Geolocation
Geolocation
Geolocation
Upcoming SlideShare
Loading in …5
×

Published on

Geolocation

Published in: Technology, Business

×