Your SlideShare is downloading. ×
0
Mobile Web Development
Mobile Web Development
Mobile Web Development
Mobile Web Development
Mobile Web Development
Mobile Web Development
Mobile Web Development
Mobile Web Development
Mobile Web Development
Mobile Web Development
Mobile Web Development
Mobile Web Development
Mobile Web Development
Mobile Web Development
Mobile Web Development
Mobile Web Development
Mobile Web Development
Mobile Web Development
Mobile Web Development
Mobile Web Development
Mobile Web Development
Mobile Web Development
Mobile Web Development
Mobile Web Development
Mobile Web Development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile Web Development

3,575

Published on

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.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,575
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Narrowing the Context Rocking iPhone and Android development
  • 2. What I won’t be talking about
  • 3. What I will be talking about
  • 4. 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)
  • 5. Media Queries <link  href="mobile.css"  rel="stylesheet"      media="only  screen  and  (max-­‐device-­‐width:   480px)"> @media  screen  and  (max-­‐device-­‐width:  480px)   {   }
  • 6. 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">
  • 7. 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">
  • 8. Input Features <input  autocorrect="on">  <!-­‐-­‐  or  “off”  -­‐-­‐> <input  placeholder="Example  Text"> <input  type="email"> <input  type="url"> <input  type="number"> <input  type="search">
  • 9. ConvertBot
  • 10. 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?
  • 11. Going Native
  • 12. Why go Native? Access to native hardware and other applications Camera, Address Book, Filesystem Streamlined Revenue Process
  • 13. 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/
  • 14. Other Experiences
  • 15. Other Experiences The world isn’t made of smart phones How can we streamline the process for less- capable phones?
  • 16. MobifyMe
  • 17. MobifyMe Allows for selective content Compresses Code Resizes and compresses images
  • 18. 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
  • 19. 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]
  • 20. Questions? Hit me with your best shot. Fire away.

×