2011-03 mobile web apps development
Aug 29, 2014
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
@theAgileMATT
Matt Harasymczuk
• http://www.matt.harasymczuk.pl
!
• MBP sp. z o.o, CRM application developer
• Poznan University of Technology, Network Engineer (intern)
• Consdata.pl, Network Administrator
• Hera sp. z o.o, CRM application developer
@theAgileMATT
Abstract
@theAgileMATT
What is mobile?!
@theAgileMATT
What’s not...
@theAgileMATT
Say what!?
@theAgileMATT
Why?!
@theAgileMATT
Money, so they say Is the root of all evil today.
But if you ask for a raise it's no surprise that they're
giving none away.Pink Floyd - Money
@theAgileMATT
Really Why?!
@theAgileMATTGreed is good! Gordon Gekko
@theAgileMATT
Why no...
@theAgileMATTBig brother is watching you! George Orwell’s 1984
@theAgileMATTI’d still gonna hit that! Duke Nukem
@theAgileMATTDifferent approach to development Cloud Computing
@theAgileMATTApplication development pattern in 21st century
@theAgileMATTCloud Computing Availbility and Scalibility
@theAgileMATTTarget tablets and smartphones
@theAgileMATTmarket share Nov 2010 - Jan 2011
@theAgileMATTTablets Android, iOS
@theAgileMATTSmartphones Android, iOS, RIM
@theAgileMATT
Windows Phone 7?!
@theAgileMATTIs it good? hmm, IMHO yes, but...
@theAgileMATT
Somethings stinks here!
@theAgileMATT
Is it?!
@theAgileMATT
YES IT IS!
@theAgileMATThalfway between IE7 and IE8 WTF?!
@theAgileMATT
srsly wtf!
@theAgileMATT
We have already 2011!
October 2006 March 2009
@theAgileMATT
IE 9 is out there...
@theAgileMATT
and it is good... finally!
@theAgileMATT
Verdana IE 9Microsoft Flight Simulator
@theAgileMATT
and XMLHttpRequest
@theAgileMATT
created by the developers of Outlook Web Access
(by Microsoft) for Microsoft Exchange Server 2000
on March 1999
@theAgileMATTDo it. Do it now! Beavis and Butthead
@theAgileMATT
Transform your current WebApp to mobile
@theAgileMATTWasted! Screen size
@theAgileMATT
Not at all!
@theAgileMATT
@media screen and (max-device-width: 480px) { !
/* ... CSS goes here ... */ !
}
<link media="only screen and (max-device-width: 480px)" href="mobile.css" type= "text/css" rel="stylesheet">
or
@theAgileMATT
Tablets?
@theAgileMATTTablet orientation
@theAgileMATT
iPad
• The first thing I do is lock the layout's resolution to a 1:1 ratio so that each pixel exactly lines up with the pixels in the iPad's screen.
!
<meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" />
then
@media only screen and (orientation:portrait) {
/* ... CSS goes here ... */
}
@theAgileMATTtraffic overload c’mon it is still mobile device!
@theAgileMATT
HTTP User Agent
@theAgileMATTAndroid Mobile
Mozilla/5.0 (Linux; U; Android 2.1; en-us; Nexus One
Build/ERD62) AppleWebKit/530.17 (KHTML, like Gecko)
Version/4.0 Mobile Safari/530.17 –Nexus
@theAgileMATTiOS Mobile
Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us)
AppleWebKit/531.21.10 (KHTML, like Gecko) Version/
4.0.4 Mobile/7B334b Safari/531.21.10
@theAgileMATTFirefox 4 Desktop
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0)
Gecko/20100101 Firefox/4.0
@theAgileMATTChrome Desktop
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_7)
AppleWebKit/534.24 (KHTML, like Gecko) Chrome/
11.0.696.16 Safari/534.24
@theAgileMATTHTML or HTML5?!
@theAgileMATT
WTF HTML5?!
@theAgileMATT
HTML standard
• new HTML tags
• CSS3
• new JS API
@theAgileMATT
JavaScript
@theAgileMATT
AJAX vs SEO
@theAgileMATT
Fear not!
@theAgileMATT
#! - hash bang
@theAgileMATT
#!/usr/bin/env python !
or !
#!/bin/sh !
or !
...
@theAgileMATT
http://twitter.com/#!mattharasymczuk !
-> !
Google will see: http://twitter.com/mattharasymczuk
@theAgileMATT
Application Cache -- index.html
<html manifest="cache.manifest">
@theAgileMATT
Application Cache -- cache.manifest
CACHE MANIFEST !# VERSION 2011-03-22 19:43 !CACHE: /css/style.css /css/mobile.css /css/print.css /css/reset.css !/img/favicon.png !/js/jQuery.js /js/google-analytics.js /js/modernizr.js
@theAgileMATT
That’s it?
@theAgileMATT
Application Cache Summary
• <!DOCTYPE html>
• MIME type: text/cache-manifest
!
• ... and that’s it :}
@theAgileMATT
Web Storage
textarea.addEventListener('keyup', function () {! window.localStorage['value'] = area.value;! window.localStorage['timestamp'] = (new Date()).getTime();!}, false);!textarea.value = window.localStorage['value'];!
@theAgileMATT
Why?
@theAgileMATT
<textarea id="draft" rows="10" cols="30"></textarea>
@theAgileMATT
function saveMessage() { var message = document.getElementById("draft"); localStorage.setItem("message", message.value) }
@theAgileMATT
// 500 ms = 0.5 sek setInterval(saveMessage, 500);
@theAgileMATT
offline vs online
@theAgileMATT
Offline? !
window.addEventListener( "offline", function() { alert(‘offline’); }, false);
@theAgileMATT
Online? !
window.addEventListener( "online", function() { alert(‘online’); }, false);
@theAgileMATT
Device Orientation
@theAgileMATT
window.addEventListener('deviceorientation', function(event) { var x = event.alpha; var y = event.beta; var z = event.gamma; }, false);
@theAgileMATTLocation JS API
@theAgileMATTDrag and Drop File API
@theAgileMATT
new HTML tags
@theAgileMATTheader, nav, article, section, aside, footer
@theAgileMATTvideo, audio, devices
@theAgileMATT
subtitles?
@theAgileMATT
WebVTT
@theAgileMATTNew input types HTML5
@theAgileMATTautocomplete? no problem!
@theAgileMATTinput type=”email” mobile
@theAgileMATTinput type=”number” mobile
@theAgileMATTinput type=”phone” and “url” mobile
@theAgileMATTinput type=”datetime” mobile
@theAgileMATTinput type=”color” mobile
@theAgileMATT
and
@theAgileMATT
Speech Input!
@theAgileMATT
<input type="text" x-webkit-speech />
@theAgileMATT
YOU GET THOSE FOR FREE!
as in beer :}
@theAgileMATTCSS 3 Cascading Style Sheet
@theAgileMATT
But first...
@theAgileMATT
Reset CSS
@theAgileMATTRounded borders after 10 years!
@theAgileMATTWeb fonts at last!
@theAgileMATTtext overflow ...
@theAgileMATTColumns! newspapers, hear me!
@theAgileMATTn-th 2011!
@theAgileMATTselectors css3
@theAgileMATTselectors css3
@theAgileMATT
button:hover a[href^=”mailto:”] { !
color: rgba (100%, 0, 100%, 0.5); !
}
@theAgileMATTDo I have to? go for html5
@theAgileMATTFrameworks
@theAgileMATT
• M-Project
• jQTouch
• joapp
• DHTMLX Touch
Frameworks
@theAgileMATTFuture beyond tomorrow
@theAgileMATTEvolution is inevitable
@theAgileMATTGood Case Scenario happy smiley
@theAgileMATTBad Case Scenario bad boy
@theAgileMATTAnd the winner is Pacman?
@theAgileMATT
What?
@theAgileMATTI dare you! I double dare you!
@theAgileMATTOpen web standards html5 and friends
@theAgileMATTI rest my case That's all Folks
Related Documents
