• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
 

Building Rich Mobile Apps with HTML5, CSS3 and JavaScript

on

  • 27,504 views

Michael Mullany presented about Sencha Touch HTML5 mobile web applications at Silicon Valley User Group in April 2011.

Michael Mullany presented about Sencha Touch HTML5 mobile web applications at Silicon Valley User Group in April 2011.

Statistics

Views

Total Views
27,504
Views on SlideShare
26,237
Embed Views
1,267

Actions

Likes
47
Downloads
1,305
Comments
3

38 Embeds 1,267

http://nundefined.tistory.com 485
http://blog.nundefined.com 222
http://maxstudiotech.com 208
http://autobodyshopg2.gnbo.com.ng 185
http://thetechnicalweb.blogspot.in 41
http://abdisusanto.blogspot.com 28
http://cursos.utmetropolitana.edu.mx 13
http://abdisusanto.blogspot.in 12
http://paper.li 9
http://pradeepmehta7.blogspot.com 8
http://thetechnicalweb.blogspot.com 7
http://webgyan4u.blogspot.in 6
http://www.blogger.com 5
http://thetechnicalweb.blogspot.de 4
http://abdisusanto.blogspot.co.uk 3
http://pradeepmehta7.blogspot.in 3
http://www.petrobras.com.br 3
http://www.hanrss.com 2
http://www.verious.com 2
http://localhost 2
http://www.onlydoo.com 2
http://abdisusanto.blogspot.ru 1
http://www.thetechnicalweb.blogspot.in 1
http://www.ensinogeo.com 1
http://aprendersociales.blogspot.com 1
http://webcache.googleusercontent.com 1
http://abdisusanto.blogspot.sg 1
http://www.mongodb.org 1
http://abdisusanto.blogspot.com.au 1
http://us-w1.rockmelt.com 1
http://news.taaza.com 1
http://www.appsgeyser.com 1
https://twitter.com 1
http://blogs.alaquas.net 1
http://www.istikbal.gr 1
http://www.massey.ac.nz 1
http://abdisusanto.blogspot.se 1
http://maxstudiotech.wordpress.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 previous next Post a comment

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

Building Rich Mobile Apps with HTML5, CSS3 and JavaScript Building Rich Mobile Apps with HTML5, CSS3 and JavaScript Presentation Transcript

  • HTML5 and the dawn of rich mobile web applicationsSENCHA: HTML5 SVUG April 2011
  • 2008
  • We must have an iPhone App!
  • 2010
  • We must have an Android App!
  • 2011
  • OMG
  • Palm Microsoft RIM RIM Android AppleApple Microsoft Palm Android Top U.S. Smartphone Platforms, 3 Month Average Ending December 2010 comScore MobiLens 2010
  • JS C# Palm J2ME Microsoft RIM RIM Android Apple Apple Air Microsoft PalmObj-C Java Android C++ Top U.S. Smartphone Platforms, 3 Month Average Ending December 2010 comScore MobiLens 2010
  • J2ME C# RIM C/C++ Microsoft Nokia Python AppleJava AndroidAndroid Nokia MicrosoftC++ RIM Lua Obj-C Apple ... Top EU5 Smartphone Platforms, 3 Month Average Ending December 2010 comScore MobiLens 2010
  • J2ME C# RIM C/C++ Microsoft Nokia Python Apple Java Android Android Nokia Microsoft C++ RIM Lua Obj-C Apple ... Top EU5 Smartphone Platforms, 3 Month Average Ending December 2010 comScore MobiLens 2010http://www.cloudfour.com/a-comprehensive-guide-to-mobile-statistics/
  • Device diversity
  • The Promise ofWeb Technologies
  • The WebCross-platformStandards-processFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood...
  • The WebCross-platformStandards-processFamiliar skills & toolsDecentralizedEasily updatedIndexed Mobile: the next era ofWell-understood the web as we know it...
  • http://www.victoriassecret.com
  • http://mobile.victoriassecret.com
  • Themobile web is not a320px web
  • (“responsive web design”)
  • Hypothesis: Web technologies are a viable alternativeto native development
  • The Web is Evolving...
  • The Web is Evolving... Documents Applications
  • The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM
  • The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM Templates APIs
  • The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM Templates APIs URLs Arguments
  • The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM Templates APIs URLs Arguments Request/Response Synchronization
  • The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM Templates APIs URLs Arguments Request/Response Synchronization Thin client Thick client
  • "If you write Web-based applications, Iwould be interested in hearing about whatyour needs are. Please let me know"Ian Hickson 2004WhatWG “Founding Post”
  • -webkit accelerometer @page localStorage CSS Text @media manifesttransform <video> WebSQL GeoLocation type=camera canvas keyframe gradient
  • A New Mobile App Stack CSS Styling & Layout Javascript Semantic HTML
  • A New Mobile App Stack WebFont Video Audio Graphics CSS Styling & Layout Javascript Semantic HTML
  • A New Mobile App Stack WebFont Video Audio Graphics CSS Styling & Layout Javascript Semantic HTML File Systems DBs App Cache
  • A New Mobile App Stack WebFont Video Audio Graphics CSS Styling & Layout Javascript Semantic HTML File Systems Worker DBs Parallel App Cache Processing
  • A New Mobile App Stack WebFont Video Audio Graphics CSS Styling & Layout Javascript Semantic HTML File Systems Worker x-App DBs Parallel Messaging App Cache Processing
  • A New Mobile App Stack WebFont Video Audio GraphicsDevice Access Camera CSS Styling & Layout Location Javascript Contacts SMS Semantic HTML Orientation File Systems Worker x-App Gyro DBs Parallel Messaging App Cache Processing
  • A New Mobile App Stack WebFont Video Audio GraphicsDevice Access Server & Services Camera CSS Styling & Layout HTTP Location AJAX Javascript Contacts Events SMS Semantic HTML Sockets Orientation SSL File Systems Worker x-App Gyro DBs Parallel More... Messaging App Cache Processing
  • Rich Media & StylingFull Resource Access Parallel Processing Inter-AppCommunication Full Offline Capability
  • Rich Media & Styling R M F O A T Full Resource Access P L A PP Parallel ProcessingRN D E Inter-App M O T E Communication Full P LE M O Offline CapabilityC
  • Demo 1http://jag.gr/tm
  • Demo 1Ihttp://www.e-resistible.co.uk/
  • Demo 1I1http://vimeo.com/awards/m
  • Web technologies are a viable alternativeto native development
  • Caveats?PerformanceBrowser supportDevice accessDiscoverabilityMonetizationApp ‘experience’
  • Caveats?PerformanceBrowser supportDevice access All less of a issue than you might thinkDiscoverabilityMonetizationApp ‘experience’
  • Progressive enhancement
  • assumptionHTML doc
  • assumptionHTML JS CSS progressive enhancement app doc
  • assumption HTML JS CSS progressive enhancement app doc assumptionHTML JS CSS app
  • assumption HTML JS CSS progressive enhancement app doc vs assumptionHTML JS CSS app
  • State of the Art: Mobile HTML5
  • Environments ?
  • Browsers WebKit Others
  • HTML5 Support: Edge IE 10 PR Chrome 10 Safari 5 Firefox 4 iOS4.31 Playbook Honeycomb@font-faceCanvasHTML5 Audio & Videorgba(), hsla()border-image:border-radius:box-shadow:text-shadow:opacity:Multiple backgroundsFlexible Box ModelCSS AnimationsCSS ColumnsCSS GradientsCSS ReflectionsCSS 2D TransformsCSS 3D TransformsCSS TransitionsGeolocation APIlocal/sessionStorageSVG/SVG ClippingSMILInline SVGDrag and DrophashchangeX-window MessagingHistory ManagementapplicationCacheWeb SocketsWeb WorkersWeb SQL DatabaseWebGLIndexedDB
  • Stay on top of diversityCan I Use?http://caniuse.comModernizrhttp://modernizr.comDeviceAtlashttp://deviceatlas.comWikipediaComparison of LayoutEngines
  • Enter The Abstractions...
  • Why use a framework?Provide user interface componentsSmooth browser inconsistenciesMimic native or server paradigmsCreate consistent applicationarchitectures...and more
  • Strokes for folks Sites & Documents Applications Declarative HTML Programmatic DOM Templates APIs URLs Arguments Request/Response Synchronization Thin client Thick client
  • Strokes for folks Sites & Documents Applications Declarative HTML Programmatic DOM Templates APIs URLs Arguments Request/Response Synchronization Thin client Thick client
  • jQTouchUI layer on top of jQueryDeclarative HTMLLibrary progressivelyenhancesBrowsers: iOS (iPhone/iPod) Android BlackBerry v6 Most WebKit-basedbrowsershttp://jQTouch.com
  • jQTouch Scripts & stylesheets CSS classes for semantics & config
  • jQuery Mobile (alpha)UI layer on top of jQueryDeclarative HTMLLibrary progressivelyenhancesBrowsers: iOS (iPhone/iPad) Android BlackBerry v5+ Symbian v5, MeeGo, webOShttp://jquerymobile.com
  • jQuery Mobile (alpha) Scripts & stylesheet data-* for semantics & config
  • Sencha TouchSelf-contained libraryProgrammatic JavascriptUI Declared via JSONStandalone MVC applicationsBrowsers: iOS (iPhone/iPad) Android BlackBerry v6 & QNX Bada, MeeGo & otherWebKit Windows Phone 7** to come
  • Sencha Touch Data model & records Programmatically create toolbar & list
  • What’s in a goodLayouts & componentsTheming & iconsOrientation & animationTouch events & scrollerData packageMVC framework
  • ComponentsLists - Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & buttonsHTML5 - Audio - Video - GeoLocation
  • ThemingUse CSS3 & SASS- Flexible themes- Highly optimized
  • Forms
  • ScrollingMomentum/bounce physicsHardware acceleratedThroughout all components: - Lists - Carousel - Pickers
  • Touch EventsBuilt on native eventsAbstracted for performanceAdditional events- Tap- Double tap- Tap and hold- Swipe- Rotate- Drag & drop
  • Data PackageModels, Stores, and Proxies- Associations- Validation- Local & server storageEasily consume web services - JSON/P - XML - YQL
  • “The Kitchen Sink” http://sencha.com/x/5e
  • Implementing Mobile Web Sites|Apps
  • Evolving sites for mobile Views HTML, CSS...Controlle Models
  • Evolving sites for mobile Deskto HTML,Switcher CSS... Mobile Controlle Models
  • Mobile detectionclass ApplicationController < ActionController::Base has_mobile_fuend*.mobile.erbis_mobile_device?in_mobile_view? https://github.com/brendanlim/mobile-fu
  • Smart detection & user choice“Switch to our desktop site”
  • www.xkcd.com
  • Thematic consistency
  • Thematic consistencyw3c-speak
  • Thematic consistencyw3c-speak http://mysite.com/posts/123
  • Thematic consistencyw3c-speak http://mysite.com/posts/123 http://mysite.mobi/posts/123
  • Mobile switchinghttp://tinyurl.com/mobswi1 http://tinyurl.com/ mobswi2
  • Then to an app... DesktoSwitchers Mobile REST JSO Controlle N Models
  • Thematic consistency http://mysite.com/posts/123 http://mysite.com/#!/posts/123
  • The stack of the present req/res User RenderingBusinessStorage
  • The stack of the future User syncSecurity BusinessStorage Storage
  • The stack of the future User syncSecurity BusinessStorage Storage The return of the thick client!
  • Brand consistency
  • Brand consistency
  • Brand consistency
  • Getting help from the cloudhttp://i.tinysrc.mobi/http://mysite.com/myimage.png http://tinysrc.net/
  • Mobile devices are different Geolocation Telephon y CameraMessaging
  • Mobile devices are different Geolocation Telephon y Camera MessagingAnd mobile usersare different too!
  • Going Hybrid
  • PhoneGap, Nimblekit, Libraries that allows you to author native applicationswith web technologies and get access to device APIs
  • +
  • Full API list:Accelerometer FileCamera GeolocationCompass MediaContacts NetworkDevice NotificationEvents Storagehttp://docs.phonegap.com
  • Full API list:Accelerometer FileCamera GeolocationCompass MediaContacts NetworkDevice NotificationEvents Storagehttp://docs.phonegap.com http://www.sencha.com/learn/ Tutorial:Sencha_Touch_PhoneGap
  • Doing mobile right
  • Doing mobile rightEveryone loves apps - but native diversity sucks
  • Doing mobile rightEveryone loves apps - but native diversity sucksThis is the year of the mobile web - but caveats apply
  • Doing mobile right Everyone loves apps - but native diversity sucks This is the year of the mobile web - but caveats applyHTML5 makes web tech a viable alternative to native apps