2011-03 mobile web apps development

Preview:

DESCRIPTION

 

Citation preview

@theAgileMATTMobile WebApps

Matt Harasymczukmatt@harasymczuk.plwww.matt.harasymczuk.pl

2011-03-29

@theAgileMATT

Matt Harasymczuk

• http://www.matt.harasymczuk.pl

• 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!

@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

@theAgileMATTQ & A

Matt Harasymczuk matt@harasymczuk.pl www.matt.harasymczuk.pl

@theAgileMATTI rest my case That's all Folks

@theAgileMATT

Thank you.

Matt Harasymczukmatt@harasymczuk.pl

www.matt.harasymczuk.pl