• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile Web Development
 

Mobile Web Development

on

  • 2,875 views

A look into developing HTML-based web sites and applications targetting mobile platforms.

A look into developing HTML-based web sites and applications targetting mobile platforms.

Statistics

Views

Total Views
2,875
Views on SlideShare
2,863
Embed Views
12

Actions

Likes
3
Downloads
31
Comments
0

1 Embed 12

http://www.techgig.com 12

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mobile Web Development Mobile Web Development Presentation Transcript

    • Narrowing the Context Rocking iPhone and Android development
    • What I won’t be talking about
    • What I will be talking about
    • Mobile Safari Local Storage CSS3 features like transforms, transitions and animations Geolocation HTML5 forms support for search, number and email field types. SVG (well, on the iPhone; not on Android)
    • Media Queries <link  href="mobile.css"  rel="stylesheet"      media="only  screen  and  (max-­‐device-­‐width:   480px)"> @media  screen  and  (max-­‐device-­‐width:  480px)   {   }
    • Viewport <meta  name="viewport"  content="width=device-­‐ width"> <meta  name="viewport"  content="width=590"> <meta  name="viewport"  content="initial-­‐scale=   1.0"> <meta  name="viewport"  content="initial-­‐scale=   2.3,  user-­‐scalable=no">
    • Creating an App-like experience <link  rel="apple-­‐touch-­‐icon"  href="icon.png"> <meta  name="apple-­‐mobile-­‐web-­‐app-­‐capable"   content="yes"> <meta  name="apple-­‐mobile-­‐web-­‐app-­‐status-­‐bar-­‐ style"  content="black"> <link  rel="apple-­‐touch-­‐icon"  href="app_icon.png"> <link  rel="apple-­‐touch-­‐startup-­‐image"   href="startup.png">
    • Input Features <input  autocorrect="on">  <!-­‐-­‐  or  “off”  -­‐-­‐> <input  placeholder="Example  Text"> <input  type="email"> <input  type="url"> <input  type="number"> <input  type="search">
    • ConvertBot
    • Sencha Touch (nee jQTouch) Designed for iPhone and Android Includes enhanced touch events Allows for rapid development http://www.sencha.com/products/touch/ jQuery Mobile?
    • Going Native
    • Why go Native? Access to native hardware and other applications Camera, Address Book, Filesystem Streamlined Revenue Process
    • PhoneGap and Titanium Titanium Mobile targets iPhone and Android PhoneGap targets iPhone, Android, Palm, Symbian and Blackberry. http://www.appcelerator.com/ http://www.phonegap.com/
    • Other Experiences
    • Other Experiences The world isn’t made of smart phones How can we streamline the process for less- capable phones?
    • MobifyMe
    • MobifyMe Allows for selective content Compresses Code Resizes and compresses images
    • Things we can learn What are users trying to do? Optimize the experience for the task Content linearization Minimize the amount of information being served
    • Rewrite Conditions RewriteCond  %{HTTP:X-­‐OperaMini-­‐Features}      !=""  [NC,OR] RewriteCond  %{HTTP:X-­‐OperaMini-­‐Phone}            !=""  [NC,OR] RewriteCond  %{HTTP:X-­‐Mobile-­‐Gateway}              !=""  [NC,OR] RewriteCond  %{HTTP_ACCEPT}                                  ^.*application/vnd.wap.xhtml+xml.*   [NC,OR] RewriteCond  %{HTTP_USER_AGENT}                          !^.*(ipad).*  [NC] RewriteCond  %{HTTP_USER_AGENT}                          ^.*(alcatel|audiovox|au-­‐mic|avantgo| bolt|blackberry|blazer|cldc-­‐|danger|dopod|epoc|ericsson|Googles+Wirelesss +Transcoder|htc|huawei|iemobile|ipaq|iphone|ipod|j2me|lg|midp|mobile|mot|moto| motorola|nec-­‐|netfront|netfront|nitro|nokia|novarra-­‐vision|operas+mini|palm| palmsource|panasonic|philips|pocketpc|portalmmm|rover|sagem|samsung|sanyo|sec| series60|sharp|sie-­‐|smartphone|sony|symbian|t-­‐mobile|untrusted|up.browser|up .link|vodafone/|wap1.|wap2.|webOS|windowss+ce).*  [NC] RewriteCond  %{REQUEST_FILENAME}            !-­‐f RewriteRule  ^(.*)$                                                  http://m.snook.ca/$1  [R,L]
    • Questions? Hit me with your best shot. Fire away.