SlideShare a Scribd company logo
1 of 82
Download to read offline
Use Web Skills To
Build Mobile Apps
 with Matt Baxter & Nathan Smith
      SATURDAY — JUNE 2, 2012 — DALLAS, TX




              http://bigdesignevents.com
Put down that pen! (or not)
You can get the slides here:

http://j.mp/web-skills
Who are we?
We do mobile/web
UX & JavaScript at



@mbxtr & @nathansmith
(In case you want to talk smack on Twitter)



              http://projekt202.com
An urgent (not desperate) announcement


We’re hiring JavaScript
savvy developers to join
our team at projekt202.
(You can talk to us after the presentation)

                 http://projekt202.com
The Rise
of Mobile
State of mobile in 2007 — The year the iPhone was introduced




                   http://flickr.com/photos/djwudi/382030798
Handset design was quite
diverse “way back when.”

Industrial designers were
still (awkwardly) searching
for the best form factor…
http://zackmorriscellphone.com
Technology is cyclical. Good ideas are often “borrowed”
and make their way to products from multiple vendors.




           http://engadget.com/photos/hp-envy-15-vs-the-macbook-pro
The state of mobile in 2012 — Touch screens reign supreme
Not everyone can rock the giant cell phone forever…




 http://hulu.com/watch/76560/late-night-with-jimmy-fallon-saved-by-the-bell-reunion-update-3
<old-man-voice>

 Nowadays, it’s more about
 the software on the device.

</old-man-voice>
Each day, on planet Earth…



  317,124
  newborns begin life


1,450,000
mobile devices activated
       http://lukew.com/ff/entry.asp?1506
The one thing all these phones have
in common (besides Angry Birds) is
they all have decent web browsers.

          http://paulirish.com/2010/high-res-browser-icons
“Obama orders agencies to optimize Web content for mobile…”




                 http://flickr.com/photos/whitehouse/7161178504
http://computerworld.com/s/article/9227412/Obama_orders_agencies_to_optimize_Web_content_for_mobile
Mobile web trivia time…


— PhoneGap on Windows Phone uses
  the IE9 engine (it is pretty good)
— WebKit is the dominant rendering
  engine across most mobile devices
  — iOS, Android, Blackberry, webOS
— Blackberry has one of the best
  WebKit-based browsers available
So, what should I build?
[A] Desktop web app
[B] Mobile web app
[C] Mobile native app
[D] All of the above
 Note: We’re not saying you have to
 build all-in-one… But it is possible.
Whither Responsive Web Design?


Responsive web design using @media
queries (with one codebase for all devices)
typically works best for web “sites” (not
apps). As a general rule of thumb, if your
content can be read via RSS and still make
sense, it is a good candidate for RWD.

           http://alistapart.com/articles/responsive-web-design
Benefits of native development



— Default OS look & feel (UI conventions)
— Performance (“closer to the metal”)
— Access to device hardware (GPS, etc)
— App store/marketplace distribution
— Benefit from latest OS enhancements
Drawbacks of native development




— Tied to the particular OS you built for
— Maintaining a multi OS team/skill-set
— Dealing with app store approval process
— Keeping app in sync with OS updates
LinkedIn’s iPad app is 95% HTML5


                                                 We did users studies in-house,
                                                 and I don’t think people noticed
                                                 a big difference. Nobody said,
                                                 “Oh that’s native,” or “Oh,
                                                 that’s web.” As long as we can
                                                 make the experience fast
                                                 enough, nobody can tell the
                                                 difference. It still feels right.
                                                                      — Kiran Prasad




    http://venturebeat.com/2012/05/02/linkedin-ipad-app-engineering
Benefits of hybrid development



— Common codebase for multiple OS’s
— Access to device hardware (GPS, etc)
— App store/marketplace distribution
— Skills you already have (HTML, CSS, JS)
— Potential code reuse in web site/app
Drawbacks of hybrid development


— Build for lowest common denominator
— 3rd party SDK’s might lag behind OS
  — Want to use feature X? Wait for an
    implementation in abstraction layer.
— An abstraction layer can have bugs of
  its own. Have to determine if a bug is in
  your code, the abstraction layer, or OS.
Titanium
from Appcelerator



    http://appcelerator.com/platform
Use Web Skills To Build Mobile Apps
Areas where Titanium shines


— Native UI
  — Great for iOS, crapshoot on Android

— Build for iOS, Android, and Blackberry
  — Some code reuse across platforms

— Entirely JavaScript based
  — Uses CommonJS’s AMD approach
  — Except for WebView (HTML/CSS too)
http://j.mp/bachmann-eyezed
Abstraction layers tend to be
harder to debug than “native”
languages — Objective-C,
C#, or Java — whilst using an
IDE such as Visual Studio,
Xcode, or Eclipse.


With “the web,” you have
familiar browser-based
desktop tools in Chrome,
Firebug, or Opera Dragonfly.
PhoneGap
  from Adobe



    http://phonegap.com
Use Web Skills To Build Mobile Apps
Areas where PhoneGap shines


— It is “the web you already know”
— Debugging via desktop browser
— Access to device API’s (GPS, etc)
— Strives to implement W3C specs
  — Camera API, etc.
— Supports Windows Phone 7, too
Use Web Skills To Build Mobile Apps
http://youtu.be/nOEw9iiopwI
How PhoneGap works

— It embeds a WebView in a native app
— Native app gives access to OS API’s
— All the UI is built via HTML/CSS
— JavaScript handles everything else
— The app wrapper compiles via…
  Xcode, Eclipse, Visual Studio, or
  “the cloud” → build.phonegap.com
Use Web Skills To Build Mobile Apps
Handlebbbars
demo of Handlebars.js
and the Dribbble API



         http://host.sonspring.com/handlebbbars
Use Web Skills To Build Mobile Apps
http://handlebarsjs.com
http://dribbble.com/api
Dribbble API: JSON
<script type="text/x-handlebars" id="_template-list-item">
  {{#each shots}}
    <li>
      <p>
         <b class="big">
           {{title}}
         </b>
         <img alt="{{title}}" class="frame"
           style="background-image:url({{image_url}})" src="data:image/png;base64,
           iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAEklEQVQIHWP8//8/AzJgJCg
           AAB+ICPuLaDnAAAAAAElFTkSuQmCC" />
      </p>
      <table>
         <tr>
           <th>
              Designer:
           </th>
           <td>
              <b>{{player.name}}</b>
           </td>
         </tr>
         {{#if player.twitter_screen_name}}
           ...
         {{/if}}
         {{#if likes_count}}
           ...
         {{/if}}
         {{#if short_url}}
           ...
         {{/if}}
      </table>
    </li>
  {{/each}}
</script>
                                                          Handlebars template
<script type="text/x-handlebars" id="_template-list-item">
  {{#each shots}}
    <li>
      <p>
         <b class="big">
           {{title}}
         </b>
         <img alt="{{title}}" class="frame"
           style="background-image:url({{image_url}})" src="data:image/png;base64,
           iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAEklEQVQIHWP8//8/AzJgJCg
           AAB+ICPuLaDnAAAAAAElFTkSuQmCC" />
      </p>
      <table>
         <tr>
           <th>
              Designer:
           </th>
           <td>
              <b>{{player.name}}</b>
           </td>
         </tr>
         {{#if player.twitter_screen_name}}
           ...
         {{/if}}
         {{#if likes_count}}
           ...
         {{/if}}
         {{#if short_url}}
           ...
         {{/if}}
      </table>
    </li>
  {{/each}}
</script>
                                                          Handlebars template
...
{{#if player.twitter_screen_name}}
  <tr>
    <th>
       Twitter:
    </th>
    <td>
       <a href="http://twitter.com/{{player.twitter_screen_name}}">
         @{{player.twitter_screen_name}}
       </a>
    </td>
  </tr>
{{/if}}
{{#if likes_count}}
  <tr>
    <th>
       Likes:
    </th>
    <td>
       {{likes_count}} <span class="mute">&hearts;</span>
    </td>
  </tr>
{{/if}}
{{#if short_url}}
  <tr>
    <th>
       URL:
    </th>
    <td>
       <a href="{{short_url}}">{{short_url}}</a>
    </td>
  </tr>
{{/if}}
...                                               Handlebars template
...
{{#if player.twitter_screen_name}}
  <tr>
    <th>
       Twitter:
    </th>
    <td>
       <a href="http://twitter.com/{{player.twitter_screen_name}}">
         @{{player.twitter_screen_name}}
       </a>
    </td>
  </tr>
{{/if}}
{{#if likes_count}}
  <tr>
    <th>
       Likes:
    </th>
    <td>
       {{likes_count}} <span class="mute">&hearts;</span>
    </td>
  </tr>
{{/if}}
{{#if short_url}}
  <tr>
    <th>
       URL:
    </th>
    <td>
       <a href="{{short_url}}">{{short_url}}</a>
    </td>
  </tr>
{{/if}}
...                                               Handlebars template
Sweet, responsive Handlebbbars action




           http://host.sonspring.com/handlebbbars
All modern browsers support *.woff or *.ttf

@font-face {
  font-family: 'Open Sans';

         // For all good browsers, including IE9.
    src: url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),

        // For older IE, and Android default browser.
        url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype');
}

@font-face {
  font-family: 'Open Sans';
  font-weight: bold;

         // For all good browsers, including IE9.
    src: url('../fonts/OpenSans-Bold-webfont.woff') format('woff'),

        // For older IE, and Android default browser.
        url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype');
}
http://fontsquirrel.com
Neatly organized *.sass                                      CSS served to browser




 http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli
CSS                    Sass                             Compass
      http://sonspring.com/journal/sass-for-designers
http://compass-style.org
Compass makes vendor prefixes easy...
Compass brings sanity to gradients...
Text editors and IDE’s that support Sass/SCSS syntax

         Aptana                              BBEdit                             Chocolat                              Coda
       http://aptana.org            http://barebones.com/bbedit             http://chocolatapp.com              http://panic.com/coda




     E Text Editor                          Eclipse                               Emacs                            Espresso
    http://e-texteditor.com               http://eclipse.org             http://gnu.org/software/emacs      http://macrabbit.com/espresso




           GEdit                           Komodo                              Netbeans                           PhpStorm
http://projects.gnome.org/gedit   http://activestate.com/komodo-ide           http://netbeans.org           http://jetbrains.com/phpstorm




       PyCharm                            RubyMine                           SubEthaEdit                        Sublime Text




                                                                                                                      ^
 http://jetbrains.com/pycharm         http://jetbrains.com/ruby       http://codingmonkeys.de/subethaedit    http://sublimetext.com/dev




       TextMate                                Vim                           Visual Studio
                                                                                                                         nd
   http://macromates.com                    http://vim.org             http://microsoft.com/visualstudio
                                                                                                             We  recomme




                                                  http://sass-lang.com/editors.html
IE9 gets jQuery, other browsers get Zepto




<!--[if gt IE 9]><!-->
  <script src="zepto.js"></script>
<!--<![endif]-->
<!--[if lte IE 9]>
  <script src="jquery.js"></script>
<![endif]-->
Use Web Skills To Build Mobile Apps
Overview of Handlebbbars’ application.js file
// Redefine: $, window, document, undefined.
var APP = (function($, window, document, undefined) {

 // Expose contents of APP.
 return {
   // APP.go
   go: function() {
     // ...
   },
   // APP.init
   init: {
     // ...
   },
   // APP.util
   util: {
     // ...
   }
 }

// Parameters: Zepto/jQuery, window, document.
})(typeof Zepto === 'function' ? Zepto : jQuery, this, this.document);

                http://host.sonspring.com/handlebbbars/assets/js/application.js
Where the magic of Handlebars happens


 markup = $('#_template-list-item')
            .html()
            .replace(/ss+/g, '');

 template = Handlebars.compile(markup);



    Yes, this looks underwhelming.
    That’s the point. It’s code you
    don’t have to write yourself! :)

       http://host.sonspring.com/handlebbbars/assets/js/application.js
Private “constant” variables…
Use Web Skills To Build Mobile Apps
Application “skeleton” object…
Use Web Skills To Build Mobile Apps
Nav shortcuts: J/K keys, swipe left/right…
Use Web Skills To Build Mobile Apps
Handling “state” changes…
Maintaining an app’s state can drive you crazy




@MikeTownson dared us to use a “lolcat” — Challenge accepted!
Use Web Skills To Build Mobile Apps
Pop out external links (for PhoneGap)…
Use Web Skills To Build Mobile Apps
Rudimentary caching, for one hour…
Use Web Skills To Build Mobile Apps
Ajax call (JSONP) to Dribbble’s API…
Use Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile Apps
PhoneGap tip: Declare “safe” domains on iOS




       http://anujgakhar.com/2011/11/22/phonegap-gotcha-error-whitelist-rejection
Use Web Skills To Build Mobile Apps
Underscore.js is a power tool for working
with collections of objects and arrays…

— Collections
  — sortBy
  — pluck
  — uniq
  — extend
  — flatten
  — each
  — filter
  — find
— Utility functions
  — throttle
  — chain
  — times               and  much  more!
“Real artists ship” — Steve Jobs




Hopefully we have inspired you to create
more rapidly shippable software today :)
Want to reread something?
You can get the slides here:

http://j.mp/web-skills
Questions?
  We (might) have answers.

If you think of something later,
 feel free to ask us on Twitter…

     @mbxtr & @nathansmith

More Related Content

What's hot

Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standardsgleddy
 
Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Aaron Gustafson
 
Sencha Touch e PhoneGap: SouJava - IBM Maio 2013
Sencha Touch e PhoneGap: SouJava - IBM Maio 2013Sencha Touch e PhoneGap: SouJava - IBM Maio 2013
Sencha Touch e PhoneGap: SouJava - IBM Maio 2013Loiane Groner
 
Mozilla Firefox Extension Development, Course 1: Basic
Mozilla Firefox Extension Development, Course 1: BasicMozilla Firefox Extension Development, Course 1: Basic
Mozilla Firefox Extension Development, Course 1: Basiclittlebtc
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
 
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...Patrick Meenan
 
JD17NL Joomla! Overrides and alternate layouts
JD17NL Joomla! Overrides and alternate layoutsJD17NL Joomla! Overrides and alternate layouts
JD17NL Joomla! Overrides and alternate layoutsHans Kuijpers
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive WebsitesJoe Seifi
 
Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...Andreas Bovens
 
State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09jeresig
 
Wordcamp abq cf-cpt
Wordcamp abq cf-cptWordcamp abq cf-cpt
Wordcamp abq cf-cptmy easel
 
Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013Steve Souders
 
WordCamp ABQ 2013: Making the leap from Designer to Designer/Developer
WordCamp ABQ 2013: Making the leap from Designer to Designer/DeveloperWordCamp ABQ 2013: Making the leap from Designer to Designer/Developer
WordCamp ABQ 2013: Making the leap from Designer to Designer/Developermy easel
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery PluginsMarc Grabanski
 
HTML5@电子商务.com
HTML5@电子商务.comHTML5@电子商务.com
HTML5@电子商务.comkaven yan
 
WordPress 3.0 at DC PHP
WordPress 3.0 at DC PHPWordPress 3.0 at DC PHP
WordPress 3.0 at DC PHPandrewnacin
 
Bootstrap 3 in Joomla!
Bootstrap 3 in Joomla!Bootstrap 3 in Joomla!
Bootstrap 3 in Joomla!Hans Kuijpers
 
CSS in React
CSS in ReactCSS in React
CSS in ReactJoe Seifi
 

What's hot (20)

Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standards
 
Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]
 
Sencha Touch e PhoneGap: SouJava - IBM Maio 2013
Sencha Touch e PhoneGap: SouJava - IBM Maio 2013Sencha Touch e PhoneGap: SouJava - IBM Maio 2013
Sencha Touch e PhoneGap: SouJava - IBM Maio 2013
 
Mozilla Firefox Extension Development, Course 1: Basic
Mozilla Firefox Extension Development, Course 1: BasicMozilla Firefox Extension Development, Course 1: Basic
Mozilla Firefox Extension Development, Course 1: Basic
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
 
JD17NL Joomla! Overrides and alternate layouts
JD17NL Joomla! Overrides and alternate layoutsJD17NL Joomla! Overrides and alternate layouts
JD17NL Joomla! Overrides and alternate layouts
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 
Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...
 
Taking your Web App for a walk
Taking your Web App for a walkTaking your Web App for a walk
Taking your Web App for a walk
 
State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09
 
Wordcamp abq cf-cpt
Wordcamp abq cf-cptWordcamp abq cf-cpt
Wordcamp abq cf-cpt
 
Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013
 
WordCamp ABQ 2013: Making the leap from Designer to Designer/Developer
WordCamp ABQ 2013: Making the leap from Designer to Designer/DeveloperWordCamp ABQ 2013: Making the leap from Designer to Designer/Developer
WordCamp ABQ 2013: Making the leap from Designer to Designer/Developer
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
 
HTML5@电子商务.com
HTML5@电子商务.comHTML5@电子商务.com
HTML5@电子商务.com
 
WordPress 3.0 at DC PHP
WordPress 3.0 at DC PHPWordPress 3.0 at DC PHP
WordPress 3.0 at DC PHP
 
Death of a Themer
Death of a ThemerDeath of a Themer
Death of a Themer
 
Bootstrap 3 in Joomla!
Bootstrap 3 in Joomla!Bootstrap 3 in Joomla!
Bootstrap 3 in Joomla!
 
CSS in React
CSS in ReactCSS in React
CSS in React
 

Viewers also liked

Basic Creating Virtual Reality with HDR Panoramic Photography Technique - Day...
Basic Creating Virtual Reality with HDR Panoramic Photography Technique - Day...Basic Creating Virtual Reality with HDR Panoramic Photography Technique - Day...
Basic Creating Virtual Reality with HDR Panoramic Photography Technique - Day...Rachabodin Suwannakanthi
 
DB2 10 Webcast #1 - Overview And Migration Planning
DB2 10 Webcast #1 - Overview And Migration PlanningDB2 10 Webcast #1 - Overview And Migration Planning
DB2 10 Webcast #1 - Overview And Migration PlanningLaura Hood
 
Event4u company profile 2012
Event4u company profile 2012Event4u company profile 2012
Event4u company profile 2012Praveen Singh
 
Organic Farming for Bees - The Xerces Society
Organic Farming for Bees - The Xerces SocietyOrganic Farming for Bees - The Xerces Society
Organic Farming for Bees - The Xerces Societyx3G9
 
Apwg trends report_q1_2016
Apwg trends report_q1_2016Apwg trends report_q1_2016
Apwg trends report_q1_2016Andrey Apuhtin
 
xy-ar.ch cert. de travail
xy-ar.ch cert. de travailxy-ar.ch cert. de travail
xy-ar.ch cert. de travailMike Jones
 
Manual lubricantes romao istprs
Manual lubricantes romao istprsManual lubricantes romao istprs
Manual lubricantes romao istprsRomao Alleri Cruz
 
Mujeres Libres Spanish Writers Women4353
Mujeres Libres Spanish Writers Women4353Mujeres Libres Spanish Writers Women4353
Mujeres Libres Spanish Writers Women4353Gloria Osuna Velasco
 
Long Run Drivers of Current Account Imbalances: the role of trade openness
Long Run Drivers of Current Account Imbalances: the role of trade opennessLong Run Drivers of Current Account Imbalances: the role of trade openness
Long Run Drivers of Current Account Imbalances: the role of trade opennessGiuseppe Caivano
 
Research on it products
Research on it productsResearch on it products
Research on it productsKamran Arshad
 
Cómo ha evolucionado y qué obstáculos deben superar las Comunicaciones Unific...
Cómo ha evolucionado y qué obstáculos deben superar las Comunicaciones Unific...Cómo ha evolucionado y qué obstáculos deben superar las Comunicaciones Unific...
Cómo ha evolucionado y qué obstáculos deben superar las Comunicaciones Unific...Mundo Contact
 
See3 at Civi User Group at 10NTC
See3 at Civi User Group at 10NTCSee3 at Civi User Group at 10NTC
See3 at Civi User Group at 10NTCSee3 Communications
 
La estrategia PPC dentro del plan de marketing global.
La estrategia PPC dentro del plan de marketing global.La estrategia PPC dentro del plan de marketing global.
La estrategia PPC dentro del plan de marketing global.Semmantica
 
Análisis de programas infantiles
Análisis de programas infantilesAnálisis de programas infantiles
Análisis de programas infantileskaren2714
 
SEOGuardian - Ecommerce Muebles - segmento Colchones en España - Actualización
SEOGuardian - Ecommerce Muebles - segmento Colchones en España - ActualizaciónSEOGuardian - Ecommerce Muebles - segmento Colchones en España - Actualización
SEOGuardian - Ecommerce Muebles - segmento Colchones en España - ActualizaciónBint
 

Viewers also liked (20)

Basic Creating Virtual Reality with HDR Panoramic Photography Technique - Day...
Basic Creating Virtual Reality with HDR Panoramic Photography Technique - Day...Basic Creating Virtual Reality with HDR Panoramic Photography Technique - Day...
Basic Creating Virtual Reality with HDR Panoramic Photography Technique - Day...
 
Lectura de apoyo evaluación del servicio
Lectura de apoyo evaluación del servicioLectura de apoyo evaluación del servicio
Lectura de apoyo evaluación del servicio
 
AR-in-VET
AR-in-VETAR-in-VET
AR-in-VET
 
Web como estrategia online
Web como estrategia onlineWeb como estrategia online
Web como estrategia online
 
DB2 10 Webcast #1 - Overview And Migration Planning
DB2 10 Webcast #1 - Overview And Migration PlanningDB2 10 Webcast #1 - Overview And Migration Planning
DB2 10 Webcast #1 - Overview And Migration Planning
 
Diari del 13 de gener de 2013
Diari del 13 de gener de 2013Diari del 13 de gener de 2013
Diari del 13 de gener de 2013
 
Event4u company profile 2012
Event4u company profile 2012Event4u company profile 2012
Event4u company profile 2012
 
Organic Farming for Bees - The Xerces Society
Organic Farming for Bees - The Xerces SocietyOrganic Farming for Bees - The Xerces Society
Organic Farming for Bees - The Xerces Society
 
Apwg trends report_q1_2016
Apwg trends report_q1_2016Apwg trends report_q1_2016
Apwg trends report_q1_2016
 
xy-ar.ch cert. de travail
xy-ar.ch cert. de travailxy-ar.ch cert. de travail
xy-ar.ch cert. de travail
 
Manual lubricantes romao istprs
Manual lubricantes romao istprsManual lubricantes romao istprs
Manual lubricantes romao istprs
 
Mujeres Libres Spanish Writers Women4353
Mujeres Libres Spanish Writers Women4353Mujeres Libres Spanish Writers Women4353
Mujeres Libres Spanish Writers Women4353
 
Long Run Drivers of Current Account Imbalances: the role of trade openness
Long Run Drivers of Current Account Imbalances: the role of trade opennessLong Run Drivers of Current Account Imbalances: the role of trade openness
Long Run Drivers of Current Account Imbalances: the role of trade openness
 
Research on it products
Research on it productsResearch on it products
Research on it products
 
Cómo ha evolucionado y qué obstáculos deben superar las Comunicaciones Unific...
Cómo ha evolucionado y qué obstáculos deben superar las Comunicaciones Unific...Cómo ha evolucionado y qué obstáculos deben superar las Comunicaciones Unific...
Cómo ha evolucionado y qué obstáculos deben superar las Comunicaciones Unific...
 
4 s313 pvcf
4 s313 pvcf4 s313 pvcf
4 s313 pvcf
 
See3 at Civi User Group at 10NTC
See3 at Civi User Group at 10NTCSee3 at Civi User Group at 10NTC
See3 at Civi User Group at 10NTC
 
La estrategia PPC dentro del plan de marketing global.
La estrategia PPC dentro del plan de marketing global.La estrategia PPC dentro del plan de marketing global.
La estrategia PPC dentro del plan de marketing global.
 
Análisis de programas infantiles
Análisis de programas infantilesAnálisis de programas infantiles
Análisis de programas infantiles
 
SEOGuardian - Ecommerce Muebles - segmento Colchones en España - Actualización
SEOGuardian - Ecommerce Muebles - segmento Colchones en España - ActualizaciónSEOGuardian - Ecommerce Muebles - segmento Colchones en España - Actualización
SEOGuardian - Ecommerce Muebles - segmento Colchones en España - Actualización
 

Similar to Use Web Skills To Build Mobile Apps

Get Ahead with HTML5 on Moible
Get Ahead with HTML5 on MoibleGet Ahead with HTML5 on Moible
Get Ahead with HTML5 on Moiblemarkuskobler
 
Tek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJSTek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJSPablo Godel
 
phonegap with angular js for freshers
phonegap with angular js for freshers    phonegap with angular js for freshers
phonegap with angular js for freshers dssprakash
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX DesignersAshlimarie
 
Creating Yahoo Mobile Widgets
Creating Yahoo Mobile WidgetsCreating Yahoo Mobile Widgets
Creating Yahoo Mobile WidgetsRicardo Varela
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Sadaaki HIRAI
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)Bramus Van Damme
 
IBM Lotus Notes Domino XPages and XPages for Mobile
IBM Lotus Notes Domino XPages and XPages for MobileIBM Lotus Notes Domino XPages and XPages for Mobile
IBM Lotus Notes Domino XPages and XPages for MobileChris Toohey
 
Building apps for multiple devices
Building apps for multiple devicesBuilding apps for multiple devices
Building apps for multiple devicesTerry Ryan
 
State of modern web technologies: an introduction
State of modern web technologies: an introductionState of modern web technologies: an introduction
State of modern web technologies: an introductionMichael Ahearn
 
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkBuilding a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkSt. Petersburg College
 
Client Building Functional webapps.
Client   Building Functional webapps.Client   Building Functional webapps.
Client Building Functional webapps.Arun Kumar
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do ThatNathan Smith
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるSadaaki HIRAI
 
RESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignDave Olsen
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application developmentzonathen
 

Similar to Use Web Skills To Build Mobile Apps (20)

Get Ahead with HTML5 on Moible
Get Ahead with HTML5 on MoibleGet Ahead with HTML5 on Moible
Get Ahead with HTML5 on Moible
 
Responsive SharePoint
Responsive SharePointResponsive SharePoint
Responsive SharePoint
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
Tek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJSTek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJS
 
Building Web Hack Interfaces
Building Web Hack InterfacesBuilding Web Hack Interfaces
Building Web Hack Interfaces
 
phonegap with angular js for freshers
phonegap with angular js for freshers    phonegap with angular js for freshers
phonegap with angular js for freshers
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Creating Yahoo Mobile Widgets
Creating Yahoo Mobile WidgetsCreating Yahoo Mobile Widgets
Creating Yahoo Mobile Widgets
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
 
From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)
 
IBM Lotus Notes Domino XPages and XPages for Mobile
IBM Lotus Notes Domino XPages and XPages for MobileIBM Lotus Notes Domino XPages and XPages for Mobile
IBM Lotus Notes Domino XPages and XPages for Mobile
 
Building apps for multiple devices
Building apps for multiple devicesBuilding apps for multiple devices
Building apps for multiple devices
 
State of modern web technologies: an introduction
State of modern web technologies: an introductionState of modern web technologies: an introduction
State of modern web technologies: an introduction
 
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkBuilding a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
 
Client Building Functional webapps.
Client   Building Functional webapps.Client   Building Functional webapps.
Client Building Functional webapps.
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do That
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
 
RESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web Design
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
 

More from Nathan Smith

Getting Started with React
Getting Started with ReactGetting Started with React
Getting Started with ReactNathan Smith
 
Rapid Templating with Serve
Rapid Templating with ServeRapid Templating with Serve
Rapid Templating with ServeNathan Smith
 
Proactive Responsive Design
Proactive Responsive DesignProactive Responsive Design
Proactive Responsive DesignNathan Smith
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksNathan Smith
 
Accelerated Grid Theming
Accelerated Grid ThemingAccelerated Grid Theming
Accelerated Grid ThemingNathan Smith
 
Urban Leadership Slides
Urban Leadership SlidesUrban Leadership Slides
Urban Leadership SlidesNathan Smith
 
Themes from Ascent of a Leader
Themes from Ascent of a LeaderThemes from Ascent of a Leader
Themes from Ascent of a LeaderNathan Smith
 
Marketing 450 Guest Lecture
Marketing 450 Guest LectureMarketing 450 Guest Lecture
Marketing 450 Guest LectureNathan Smith
 
Fundamental Design Principles
Fundamental Design PrinciplesFundamental Design Principles
Fundamental Design PrinciplesNathan Smith
 
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End DevelopmentStriking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End DevelopmentNathan Smith
 
Echo Conference 2008
Echo Conference 2008Echo Conference 2008
Echo Conference 2008Nathan Smith
 

More from Nathan Smith (20)

Getting Started with React
Getting Started with ReactGetting Started with React
Getting Started with React
 
Rapid Templating with Serve
Rapid Templating with ServeRapid Templating with Serve
Rapid Templating with Serve
 
Proactive Responsive Design
Proactive Responsive DesignProactive Responsive Design
Proactive Responsive Design
 
Red Dirt JS
Red Dirt JSRed Dirt JS
Red Dirt JS
 
Refresh OKC
Refresh OKCRefresh OKC
Refresh OKC
 
DrupalCon jQuery
DrupalCon jQueryDrupalCon jQuery
DrupalCon jQuery
 
DSVC Design Talk
DSVC Design TalkDSVC Design Talk
DSVC Design Talk
 
Think Vitamin CSS
Think Vitamin CSSThink Vitamin CSS
Think Vitamin CSS
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
 
Meet Clumsy
Meet ClumsyMeet Clumsy
Meet Clumsy
 
Accelerated Grid Theming
Accelerated Grid ThemingAccelerated Grid Theming
Accelerated Grid Theming
 
Urban Leadership Slides
Urban Leadership SlidesUrban Leadership Slides
Urban Leadership Slides
 
Themes from Ascent of a Leader
Themes from Ascent of a LeaderThemes from Ascent of a Leader
Themes from Ascent of a Leader
 
7 Storey Mountain
7 Storey Mountain7 Storey Mountain
7 Storey Mountain
 
Marketing 450 Guest Lecture
Marketing 450 Guest LectureMarketing 450 Guest Lecture
Marketing 450 Guest Lecture
 
Fundamental Design Principles
Fundamental Design PrinciplesFundamental Design Principles
Fundamental Design Principles
 
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End DevelopmentStriking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End Development
 
Echo Conference 2008
Echo Conference 2008Echo Conference 2008
Echo Conference 2008
 
Bible Tech 2008
Bible Tech 2008Bible Tech 2008
Bible Tech 2008
 
Gospelcon 2006
Gospelcon 2006Gospelcon 2006
Gospelcon 2006
 

Recently uploaded

TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
Central-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesCentral-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesmilalabial
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Materi dasar prototype dan figma .pdf
Materi dasar prototype dan figma    .pdfMateri dasar prototype dan figma    .pdf
Materi dasar prototype dan figma .pdfardanaadam1
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Yantram Animation Studio Corporation
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfINTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfphriedaoyigada
 

Recently uploaded (20)

TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
Central-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesCentral-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposes
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Materi dasar prototype dan figma .pdf
Materi dasar prototype dan figma    .pdfMateri dasar prototype dan figma    .pdf
Materi dasar prototype dan figma .pdf
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfINTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
 

Use Web Skills To Build Mobile Apps

  • 1. Use Web Skills To Build Mobile Apps with Matt Baxter & Nathan Smith SATURDAY — JUNE 2, 2012 — DALLAS, TX http://bigdesignevents.com
  • 2. Put down that pen! (or not) You can get the slides here: http://j.mp/web-skills
  • 4. We do mobile/web UX & JavaScript at @mbxtr & @nathansmith (In case you want to talk smack on Twitter) http://projekt202.com
  • 5. An urgent (not desperate) announcement We’re hiring JavaScript savvy developers to join our team at projekt202. (You can talk to us after the presentation) http://projekt202.com
  • 7. State of mobile in 2007 — The year the iPhone was introduced http://flickr.com/photos/djwudi/382030798
  • 8. Handset design was quite diverse “way back when.” Industrial designers were still (awkwardly) searching for the best form factor…
  • 10. Technology is cyclical. Good ideas are often “borrowed” and make their way to products from multiple vendors. http://engadget.com/photos/hp-envy-15-vs-the-macbook-pro
  • 11. The state of mobile in 2012 — Touch screens reign supreme
  • 12. Not everyone can rock the giant cell phone forever… http://hulu.com/watch/76560/late-night-with-jimmy-fallon-saved-by-the-bell-reunion-update-3
  • 13. <old-man-voice> Nowadays, it’s more about the software on the device. </old-man-voice>
  • 14. Each day, on planet Earth… 317,124 newborns begin life 1,450,000 mobile devices activated http://lukew.com/ff/entry.asp?1506
  • 15. The one thing all these phones have in common (besides Angry Birds) is they all have decent web browsers. http://paulirish.com/2010/high-res-browser-icons
  • 16. “Obama orders agencies to optimize Web content for mobile…” http://flickr.com/photos/whitehouse/7161178504
  • 18. Mobile web trivia time… — PhoneGap on Windows Phone uses the IE9 engine (it is pretty good) — WebKit is the dominant rendering engine across most mobile devices — iOS, Android, Blackberry, webOS — Blackberry has one of the best WebKit-based browsers available
  • 19. So, what should I build? [A] Desktop web app [B] Mobile web app [C] Mobile native app
  • 20. [D] All of the above Note: We’re not saying you have to build all-in-one… But it is possible.
  • 21. Whither Responsive Web Design? Responsive web design using @media queries (with one codebase for all devices) typically works best for web “sites” (not apps). As a general rule of thumb, if your content can be read via RSS and still make sense, it is a good candidate for RWD. http://alistapart.com/articles/responsive-web-design
  • 22. Benefits of native development — Default OS look & feel (UI conventions) — Performance (“closer to the metal”) — Access to device hardware (GPS, etc) — App store/marketplace distribution — Benefit from latest OS enhancements
  • 23. Drawbacks of native development — Tied to the particular OS you built for — Maintaining a multi OS team/skill-set — Dealing with app store approval process — Keeping app in sync with OS updates
  • 24. LinkedIn’s iPad app is 95% HTML5 We did users studies in-house, and I don’t think people noticed a big difference. Nobody said, “Oh that’s native,” or “Oh, that’s web.” As long as we can make the experience fast enough, nobody can tell the difference. It still feels right. — Kiran Prasad http://venturebeat.com/2012/05/02/linkedin-ipad-app-engineering
  • 25. Benefits of hybrid development — Common codebase for multiple OS’s — Access to device hardware (GPS, etc) — App store/marketplace distribution — Skills you already have (HTML, CSS, JS) — Potential code reuse in web site/app
  • 26. Drawbacks of hybrid development — Build for lowest common denominator — 3rd party SDK’s might lag behind OS — Want to use feature X? Wait for an implementation in abstraction layer. — An abstraction layer can have bugs of its own. Have to determine if a bug is in your code, the abstraction layer, or OS.
  • 27. Titanium from Appcelerator http://appcelerator.com/platform
  • 29. Areas where Titanium shines — Native UI — Great for iOS, crapshoot on Android — Build for iOS, Android, and Blackberry — Some code reuse across platforms — Entirely JavaScript based — Uses CommonJS’s AMD approach — Except for WebView (HTML/CSS too)
  • 31. Abstraction layers tend to be harder to debug than “native” languages — Objective-C, C#, or Java — whilst using an IDE such as Visual Studio, Xcode, or Eclipse. With “the web,” you have familiar browser-based desktop tools in Chrome, Firebug, or Opera Dragonfly.
  • 32. PhoneGap from Adobe http://phonegap.com
  • 34. Areas where PhoneGap shines — It is “the web you already know” — Debugging via desktop browser — Access to device API’s (GPS, etc) — Strives to implement W3C specs — Camera API, etc. — Supports Windows Phone 7, too
  • 37. How PhoneGap works — It embeds a WebView in a native app — Native app gives access to OS API’s — All the UI is built via HTML/CSS — JavaScript handles everything else — The app wrapper compiles via… Xcode, Eclipse, Visual Studio, or “the cloud” → build.phonegap.com
  • 39. Handlebbbars demo of Handlebars.js and the Dribbble API http://host.sonspring.com/handlebbbars
  • 44. <script type="text/x-handlebars" id="_template-list-item"> {{#each shots}} <li> <p> <b class="big"> {{title}} </b> <img alt="{{title}}" class="frame" style="background-image:url({{image_url}})" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAEklEQVQIHWP8//8/AzJgJCg AAB+ICPuLaDnAAAAAAElFTkSuQmCC" /> </p> <table> <tr> <th> Designer: </th> <td> <b>{{player.name}}</b> </td> </tr> {{#if player.twitter_screen_name}} ... {{/if}} {{#if likes_count}} ... {{/if}} {{#if short_url}} ... {{/if}} </table> </li> {{/each}} </script> Handlebars template
  • 45. <script type="text/x-handlebars" id="_template-list-item"> {{#each shots}} <li> <p> <b class="big"> {{title}} </b> <img alt="{{title}}" class="frame" style="background-image:url({{image_url}})" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAEklEQVQIHWP8//8/AzJgJCg AAB+ICPuLaDnAAAAAAElFTkSuQmCC" /> </p> <table> <tr> <th> Designer: </th> <td> <b>{{player.name}}</b> </td> </tr> {{#if player.twitter_screen_name}} ... {{/if}} {{#if likes_count}} ... {{/if}} {{#if short_url}} ... {{/if}} </table> </li> {{/each}} </script> Handlebars template
  • 46. ... {{#if player.twitter_screen_name}} <tr> <th> Twitter: </th> <td> <a href="http://twitter.com/{{player.twitter_screen_name}}"> @{{player.twitter_screen_name}} </a> </td> </tr> {{/if}} {{#if likes_count}} <tr> <th> Likes: </th> <td> {{likes_count}} <span class="mute">&hearts;</span> </td> </tr> {{/if}} {{#if short_url}} <tr> <th> URL: </th> <td> <a href="{{short_url}}">{{short_url}}</a> </td> </tr> {{/if}} ... Handlebars template
  • 47. ... {{#if player.twitter_screen_name}} <tr> <th> Twitter: </th> <td> <a href="http://twitter.com/{{player.twitter_screen_name}}"> @{{player.twitter_screen_name}} </a> </td> </tr> {{/if}} {{#if likes_count}} <tr> <th> Likes: </th> <td> {{likes_count}} <span class="mute">&hearts;</span> </td> </tr> {{/if}} {{#if short_url}} <tr> <th> URL: </th> <td> <a href="{{short_url}}">{{short_url}}</a> </td> </tr> {{/if}} ... Handlebars template
  • 48. Sweet, responsive Handlebbbars action http://host.sonspring.com/handlebbbars
  • 49. All modern browsers support *.woff or *.ttf @font-face { font-family: 'Open Sans'; // For all good browsers, including IE9. src: url('../fonts/OpenSans-Regular-webfont.woff') format('woff'), // For older IE, and Android default browser. url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'); } @font-face { font-family: 'Open Sans'; font-weight: bold; // For all good browsers, including IE9. src: url('../fonts/OpenSans-Bold-webfont.woff') format('woff'), // For older IE, and Android default browser. url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'); }
  • 51. Neatly organized *.sass CSS served to browser http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli
  • 52. CSS Sass Compass http://sonspring.com/journal/sass-for-designers
  • 54. Compass makes vendor prefixes easy...
  • 55. Compass brings sanity to gradients...
  • 56. Text editors and IDE’s that support Sass/SCSS syntax Aptana BBEdit Chocolat Coda http://aptana.org http://barebones.com/bbedit http://chocolatapp.com http://panic.com/coda E Text Editor Eclipse Emacs Espresso http://e-texteditor.com http://eclipse.org http://gnu.org/software/emacs http://macrabbit.com/espresso GEdit Komodo Netbeans PhpStorm http://projects.gnome.org/gedit http://activestate.com/komodo-ide http://netbeans.org http://jetbrains.com/phpstorm PyCharm RubyMine SubEthaEdit Sublime Text ^ http://jetbrains.com/pycharm http://jetbrains.com/ruby http://codingmonkeys.de/subethaedit http://sublimetext.com/dev TextMate Vim Visual Studio nd http://macromates.com http://vim.org http://microsoft.com/visualstudio We  recomme http://sass-lang.com/editors.html
  • 57. IE9 gets jQuery, other browsers get Zepto <!--[if gt IE 9]><!--> <script src="zepto.js"></script> <!--<![endif]--> <!--[if lte IE 9]> <script src="jquery.js"></script> <![endif]-->
  • 59. Overview of Handlebbbars’ application.js file // Redefine: $, window, document, undefined. var APP = (function($, window, document, undefined) { // Expose contents of APP. return { // APP.go go: function() { // ... }, // APP.init init: { // ... }, // APP.util util: { // ... } } // Parameters: Zepto/jQuery, window, document. })(typeof Zepto === 'function' ? Zepto : jQuery, this, this.document); http://host.sonspring.com/handlebbbars/assets/js/application.js
  • 60. Where the magic of Handlebars happens markup = $('#_template-list-item') .html() .replace(/ss+/g, ''); template = Handlebars.compile(markup); Yes, this looks underwhelming. That’s the point. It’s code you don’t have to write yourself! :) http://host.sonspring.com/handlebbbars/assets/js/application.js
  • 65. Nav shortcuts: J/K keys, swipe left/right…
  • 68. Maintaining an app’s state can drive you crazy @MikeTownson dared us to use a “lolcat” — Challenge accepted!
  • 70. Pop out external links (for PhoneGap)…
  • 74. Ajax call (JSONP) to Dribbble’s API…
  • 77. PhoneGap tip: Declare “safe” domains on iOS http://anujgakhar.com/2011/11/22/phonegap-gotcha-error-whitelist-rejection
  • 79. Underscore.js is a power tool for working with collections of objects and arrays… — Collections — sortBy — pluck — uniq — extend — flatten — each — filter — find — Utility functions — throttle — chain — times and  much  more!
  • 80. “Real artists ship” — Steve Jobs Hopefully we have inspired you to create more rapidly shippable software today :)
  • 81. Want to reread something? You can get the slides here: http://j.mp/web-skills
  • 82. Questions? We (might) have answers. If you think of something later, feel free to ask us on Twitter… @mbxtr & @nathansmith