SlideShare a Scribd company logo
MOBILE WEB APP
DEVELOPMENT
(BECOMING NATIVE)

DMD12 BSc
17th March 2011
Syd Lawrence                 SIT BACK /
                             SIT BACK
                             LISTEN UP
                             LISTEN UP

slideshare.net/sydlawrence
NO RELOAD



                                                  SIT BACK /
                                                  SIT BACK
                                                  LISTEN UP
                                                  LISTEN UP

http://www.flickr.com/photos/barjack/135263802/
A SINGLE
HTML PAGE



                                                       SIT BACK /
                                                       SIT BACK
                                                       LISTEN UP
                                                       LISTEN UP

http://www.flickr.com/photos/ewanrayment/1250049249/
HIDE UNNEEDED
ELEMENTS



                                                SIT BACK /
                                                SIT BACK
                                                LISTEN UP
                                                LISTEN UP

http://www.flickr.com/photos/rsms/1320004520/
RETREIVE THE DATA



                                                        SIT BACK /
                                                        SIT BACK
                                                        LISTEN UP
                                                        LISTEN UP

http://www.flickr.com/photos/29503348@N03/4915763648/
FROM REMOTE API



                                                        SIT BACK /
                                                        SIT BACK
                                                        LISTEN UP
                                                        LISTEN UP

http://www.flickr.com/photos/29503348@N03/4915763648/
JSONP



                                                     SIT BACK /
                                                     SIT BACK
                                                     LISTEN UP
                                                     LISTEN UP

http://www.flickr.com/photos/sabeth718/4975388271/
http://api.com/get.php?user=2
                                                       <code/>
___

callback({"id":2,"first_name":"Syd","last_name":”Lawrence”})



___

** local javascript

function callback(data) {
    // do something
}
var url = “http://api.com/get.php?user=2”; // URL of the external script

var script = document.createElement('script');
script.setAttribute('src', url);

// load the script
document.getElementsByTagName('head')[0].appendChild(script);


                                                                     SIT BACK /
                                                                     SIT BACK
                                                                     LISTEN UP
                                                                     LISTEN UP

MORE INFO: http://sydl.me/evqQVJ
CACHE THE DATA



                                                   SIT BACK /
                                                   SIT BACK
                                                   LISTEN UP
                                                   LISTEN UP

http://www.flickr.com/photos/kurtz433/242712215/
LOCAL STORAGE



                SIT BACK /
                SIT BACK
                LISTEN UP
                LISTEN UP
DISPLAY THE DATA



                                             SIT BACK /
                                             SIT BACK
                                             LISTEN UP
                                             LISTEN UP

http://www.flickr.com/photos/drp/14437926/
MODIFY THE
DISPLAYED DATA



                                                     SIT BACK /
                                                     SIT BACK
                                                     LISTEN UP
                                                     LISTEN UP

http://www.flickr.com/photos/familymwr/4930275692/
REPLACE THE
DISPLAYED DATA



                                                      SIT BACK /
                                                      SIT BACK
                                                      LISTEN UP
                                                      LISTEN UP

http://www.flickr.com/photos/zephyrance/2865451246/
JAVASCRIPT
FRAMEWORKS



                                                        SIT BACK /
                                                        SIT BACK
                                                        LISTEN UP
                                                        LISTEN UP

http://www.flickr.com/photos/29503348@N03/4915763648/
DO NOT
OVERUSE!



                                                SIT BACK /
                                                SIT BACK
                                                LISTEN UP
                                                LISTEN UP

http://www.flickr.com/photos/bayat/296445681/
THINK
BANDWIDTH



                                                SIT BACK /
                                                SIT BACK
                                                LISTEN UP
                                                LISTEN UP

http://www.flickr.com/photos/pdxdj/253103371/
THINK SPEED



                                                   SIT BACK /
                                                   SIT BACK
                                                   LISTEN UP
                                                   LISTEN UP

http://www.flickr.com/photos/johnkay/5070219963/
SENCHA TOUCH
sydl.me/fPd02C



                 SIT BACK /
                 SIT BACK
                 LISTEN UP
                 LISTEN UP
JQUERY MOBILE
sydl.me/eGzOcE



                 SIT BACK /
                 SIT BACK
                 LISTEN UP
                 LISTEN UP
IWEBKIT
sydl.me/eNt5uU



                 SIT BACK /
                 SIT BACK
                 LISTEN UP
                 LISTEN UP
NEXT STEP



                                                         SIT BACK /
                                                         SIT BACK
                                                         LISTEN UP
                                                         LISTEN UP

http://www.flickr.com/photos/stuckincustoms/219819675/
PHONEGAP
sydl.me/hLUJz3



                 SIT BACK /
                 SIT BACK
                 LISTEN UP
                 LISTEN UP
APPCELERATOR
sydl.me/gYXZIC



                 SIT BACK /
                 SIT BACK
                 LISTEN UP
                 LISTEN UP
APPMOBI
sydl.me/eAp2oA



                 SIT BACK /
                 SIT BACK
                 LISTEN UP
                 LISTEN UP
WHY THIS STEP?



                                                     SIT BACK /
                                                     SIT BACK
                                                     LISTEN UP
                                                     LISTEN UP

http://www.flickr.com/photos/benterrett/191625180/
APP STORES



                                                      SIT BACK /
                                                      SIT BACK
                                                      LISTEN UP
                                                      LISTEN UP

http://www.flickr.com/photos/agizienski/3778956583/
CAMERAS



                                                    SIT BACK /
                                                    SIT BACK
                                                    LISTEN UP
                                                    LISTEN UP

http://www.flickr.com/photos/captkodak/271872436/
COMPASS



                                                          SIT BACK /
                                                          SIT BACK
                                                          LISTEN UP
                                                          LISTEN UP

http://www.flickr.com/photos/curious_gregor/5062538980/
FILES



                                                      SIT BACK /
                                                      SIT BACK
                                                      LISTEN UP
                                                      LISTEN UP

http://www.flickr.com/photos/davemorris/4400953131/
NOTIFICATIONS



                                                  SIT BACK /
                                                  SIT BACK
                                                  LISTEN UP
                                                  LISTEN UP

http://www.flickr.com/photos/funtik/1175522045/
RECORD MEDIA



                                                    SIT BACK /
                                                    SIT BACK
                                                    LISTEN UP
                                                    LISTEN UP

http://www.flickr.com/photos/adambowie/544200097/
WANT TO
KNOW MORE


http://www.ibm.com/developerworks/library/wa-aj-jsonp1/
http://sixrevisions.com/web-development/html5-iphone-app/
http://ofps.oreilly.com/titles/9780596805784/
                                                            SIT BACK /
                                                            SIT BACK
http://www.easyapns.com/                                    LISTEN UP
                                                            LISTEN UP

http://js-html5.com/tagged/mobile
A LITTLE
TASK DUE
TODAY
(NOT REALLY THAT OPTIONAL, BUT UP TO YOU IF YOU WANT TO DO IT)




Create your API
Setup your database
Populate with sample data
                                                                 SIT BACK /
                                                                 SIT BACK
Create your getters and setters                                  LISTEN UP
                                                                 LISTEN UP

Test
HOW DID
YOU DO?


                                                       SIT BACK /
                                                        SIT BACK
                                                       LISTENUP
                                                        LISTEN UP



http://www.flickr.com/photos/annagaycoan/3750144703/
A LITTLE
TASK DUE
NEXT WEEK
(GROUP WORK)




In your groups
1 person sort out the HTML & CSS view
1 person play around with the web -> native apps
                                                          SIT BACK /
                                                          SIT BACK
   Get some kind of application onto a mobile device      LISTEN UP
                                                          LISTEN UP

1 person project manage and work out what is left to do
CODE SAMPLES
AND CONCEPTS


Mobile websites tips & tricks (@fakedarren)
Cache Manifest
localStorage
                                              SIT BACK /
                                              SIT BACK
Online / Offline Events                       LISTEN UP
                                              LISTEN UP

JSONP

More Related Content

What's hot

Get Unblocked
Get UnblockedGet Unblocked
Get Unblocked
Denise Jacobs
 
Get Unblocked - NDC Oslo 2015
Get Unblocked - NDC Oslo 2015Get Unblocked - NDC Oslo 2015
Get Unblocked - NDC Oslo 2015
Denise Jacobs
 
Advancing the Future of America's Heritage through Organic Social Networks
Advancing the Future of America's Heritage through Organic Social NetworksAdvancing the Future of America's Heritage through Organic Social Networks
Advancing the Future of America's Heritage through Organic Social Networks
Jeff Guin
 
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015
Denise Jacobs
 
Infinite Possibilities - Digital PM Summit 2015
Infinite Possibilities - Digital PM Summit 2015Infinite Possibilities - Digital PM Summit 2015
Infinite Possibilities - Digital PM Summit 2015
Denise Jacobs
 
Bored But Never Boring - Media Evolution: The Conference 2013
Bored But Never Boring - Media Evolution: The Conference 2013Bored But Never Boring - Media Evolution: The Conference 2013
Bored But Never Boring - Media Evolution: The Conference 2013
Denise Jacobs
 
Immediate Inspiration
Immediate Inspiration Immediate Inspiration
Immediate Inspiration
Denise Jacobs
 
TLTF12 Building Innovative Learning Spaces
TLTF12 Building Innovative Learning SpacesTLTF12 Building Innovative Learning Spaces
TLTF12 Building Innovative Learning Spaces
Jeff Piontek
 
Hacking the Creative Brain - Devoxx Belgium, 2014
Hacking the Creative Brain -  Devoxx Belgium, 2014Hacking the Creative Brain -  Devoxx Belgium, 2014
Hacking the Creative Brain - Devoxx Belgium, 2014
Denise Jacobs
 
White Space Creativity - Frontend Conference CH 2014
White Space Creativity - Frontend Conference CH 2014White Space Creativity - Frontend Conference CH 2014
White Space Creativity - Frontend Conference CH 2014
Denise Jacobs
 
The Creativity Imperative - NDC London 2014
The Creativity Imperative - NDC London 2014The Creativity Imperative - NDC London 2014
The Creativity Imperative - NDC London 2014
Denise Jacobs
 
Get Unblocked - 33rd Degree Conference
Get Unblocked - 33rd Degree ConferenceGet Unblocked - 33rd Degree Conference
Get Unblocked - 33rd Degree Conference
Denise Jacobs
 
Find Your Shameless Spark - Inspiring Women Live 2014
Find Your Shameless Spark - Inspiring Women Live 2014Find Your Shameless Spark - Inspiring Women Live 2014
Find Your Shameless Spark - Inspiring Women Live 2014
Denise Jacobs
 
Infinite Possibilities - FrontEnd Conf CH 2016
Infinite Possibilities - FrontEnd Conf CH 2016Infinite Possibilities - FrontEnd Conf CH 2016
Infinite Possibilities - FrontEnd Conf CH 2016
Denise Jacobs
 
Infinite Possibilities - Groupon's GEEKon 2015
Infinite Possibilities - Groupon's GEEKon 2015Infinite Possibilities - Groupon's GEEKon 2015
Infinite Possibilities - Groupon's GEEKon 2015
Denise Jacobs
 
Infinite Possibilities - Devoxx Belgium, 2014
Infinite Possibilities - Devoxx Belgium, 2014Infinite Possibilities - Devoxx Belgium, 2014
Infinite Possibilities - Devoxx Belgium, 2014
Denise Jacobs
 
Hacking the Creative Brain
Hacking the Creative BrainHacking the Creative Brain
Hacking the Creative Brain
Denise Jacobs
 
Of Data Silos, Geo-Babel & Other Geo Malaises
Of Data Silos, Geo-Babel & Other Geo MalaisesOf Data Silos, Geo-Babel & Other Geo Malaises
Of Data Silos, Geo-Babel & Other Geo Malaises
Gary Gale
 

What's hot (18)

Get Unblocked
Get UnblockedGet Unblocked
Get Unblocked
 
Get Unblocked - NDC Oslo 2015
Get Unblocked - NDC Oslo 2015Get Unblocked - NDC Oslo 2015
Get Unblocked - NDC Oslo 2015
 
Advancing the Future of America's Heritage through Organic Social Networks
Advancing the Future of America's Heritage through Organic Social NetworksAdvancing the Future of America's Heritage through Organic Social Networks
Advancing the Future of America's Heritage through Organic Social Networks
 
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015
 
Infinite Possibilities - Digital PM Summit 2015
Infinite Possibilities - Digital PM Summit 2015Infinite Possibilities - Digital PM Summit 2015
Infinite Possibilities - Digital PM Summit 2015
 
Bored But Never Boring - Media Evolution: The Conference 2013
Bored But Never Boring - Media Evolution: The Conference 2013Bored But Never Boring - Media Evolution: The Conference 2013
Bored But Never Boring - Media Evolution: The Conference 2013
 
Immediate Inspiration
Immediate Inspiration Immediate Inspiration
Immediate Inspiration
 
TLTF12 Building Innovative Learning Spaces
TLTF12 Building Innovative Learning SpacesTLTF12 Building Innovative Learning Spaces
TLTF12 Building Innovative Learning Spaces
 
Hacking the Creative Brain - Devoxx Belgium, 2014
Hacking the Creative Brain -  Devoxx Belgium, 2014Hacking the Creative Brain -  Devoxx Belgium, 2014
Hacking the Creative Brain - Devoxx Belgium, 2014
 
White Space Creativity - Frontend Conference CH 2014
White Space Creativity - Frontend Conference CH 2014White Space Creativity - Frontend Conference CH 2014
White Space Creativity - Frontend Conference CH 2014
 
The Creativity Imperative - NDC London 2014
The Creativity Imperative - NDC London 2014The Creativity Imperative - NDC London 2014
The Creativity Imperative - NDC London 2014
 
Get Unblocked - 33rd Degree Conference
Get Unblocked - 33rd Degree ConferenceGet Unblocked - 33rd Degree Conference
Get Unblocked - 33rd Degree Conference
 
Find Your Shameless Spark - Inspiring Women Live 2014
Find Your Shameless Spark - Inspiring Women Live 2014Find Your Shameless Spark - Inspiring Women Live 2014
Find Your Shameless Spark - Inspiring Women Live 2014
 
Infinite Possibilities - FrontEnd Conf CH 2016
Infinite Possibilities - FrontEnd Conf CH 2016Infinite Possibilities - FrontEnd Conf CH 2016
Infinite Possibilities - FrontEnd Conf CH 2016
 
Infinite Possibilities - Groupon's GEEKon 2015
Infinite Possibilities - Groupon's GEEKon 2015Infinite Possibilities - Groupon's GEEKon 2015
Infinite Possibilities - Groupon's GEEKon 2015
 
Infinite Possibilities - Devoxx Belgium, 2014
Infinite Possibilities - Devoxx Belgium, 2014Infinite Possibilities - Devoxx Belgium, 2014
Infinite Possibilities - Devoxx Belgium, 2014
 
Hacking the Creative Brain
Hacking the Creative BrainHacking the Creative Brain
Hacking the Creative Brain
 
Of Data Silos, Geo-Babel & Other Geo Malaises
Of Data Silos, Geo-Babel & Other Geo MalaisesOf Data Silos, Geo-Babel & Other Geo Malaises
Of Data Silos, Geo-Babel & Other Geo Malaises
 

Similar to Mobile Web App Development (Becoming native)

Frilansverktøykasse (praktiske tips for budsjettering og prosjektstyring)
Frilansverktøykasse (praktiske tips for budsjettering og prosjektstyring)Frilansverktøykasse (praktiske tips for budsjettering og prosjektstyring)
Frilansverktøykasse (praktiske tips for budsjettering og prosjektstyring)
Andreas Beining
 
Javascript Development
Javascript DevelopmentJavascript Development
Javascript Development
Syd Lawrence
 
Introduction to javascript
Introduction to javascriptIntroduction to javascript
Introduction to javascript
Syd Lawrence
 
Jasmine Perry Visual Resume
Jasmine Perry Visual ResumeJasmine Perry Visual Resume
Jasmine Perry Visual Resume
Jasmine Perry
 
Oow 2008 Final
Oow 2008 FinalOow 2008 Final
Oow 2008 Final
Jake Kuramoto
 
Varrati Zack slideshare_presentation
Varrati Zack slideshare_presentationVarrati Zack slideshare_presentation
Varrati Zack slideshare_presentation
Zack James
 
Douville_Tiffany_visualresume
Douville_Tiffany_visualresumeDouville_Tiffany_visualresume
Douville_Tiffany_visualresume
tiffanydouville
 
Sector changes and career development in libraries: Every flavour career bean...
Sector changes and career development in libraries: Every flavour career bean...Sector changes and career development in libraries: Every flavour career bean...
Sector changes and career development in libraries: Every flavour career bean...
Career Development Group
 
Passion Driven Leadership
Passion Driven LeadershipPassion Driven Leadership
Passion Driven Leadership
Jeff Piontek
 
Pushing, pulling or leaving the door open
Pushing, pulling or leaving the door openPushing, pulling or leaving the door open
Pushing, pulling or leaving the door open
Dale Lane
 
PyConFI - dostuff()
PyConFI - dostuff()PyConFI - dostuff()
PyConFI - dostuff()
Mike Bradshaw
 
Becoming a connected leader
Becoming a connected leaderBecoming a connected leader
Becoming a connected leader
Chris Wejr
 
Living with Laptops: Digital Citizenship for Parents
Living with Laptops: Digital Citizenship for ParentsLiving with Laptops: Digital Citizenship for Parents
Living with Laptops: Digital Citizenship for Parents
Kim Cofino
 
ALA Preconference Making it Stick
ALA Preconference Making it StickALA Preconference Making it Stick
ALA Preconference Making it Stick
Lori Reed
 
Hairston walter a1_pcp
Hairston walter a1_pcpHairston walter a1_pcp
Hairston walter a1_pcp
hairston34
 
Wilkins, akeem visual resume
Wilkins, akeem visual resume Wilkins, akeem visual resume
Wilkins, akeem visual resume
Awilkins1920
 
Momotaro
MomotaroMomotaro
Momotaro
ikomax
 
Foundations web2.0
Foundations web2.0Foundations web2.0
Foundations web2.0
Cristina Costa
 
Libraries and Transliteracy KLA
Libraries and Transliteracy KLALibraries and Transliteracy KLA
Libraries and Transliteracy KLA
Bobbi Newman
 
E-Portfolio in the NZ School Sector
E-Portfolio in the NZ School SectorE-Portfolio in the NZ School Sector
E-Portfolio in the NZ School Sector
Paul Seiler
 

Similar to Mobile Web App Development (Becoming native) (20)

Frilansverktøykasse (praktiske tips for budsjettering og prosjektstyring)
Frilansverktøykasse (praktiske tips for budsjettering og prosjektstyring)Frilansverktøykasse (praktiske tips for budsjettering og prosjektstyring)
Frilansverktøykasse (praktiske tips for budsjettering og prosjektstyring)
 
Javascript Development
Javascript DevelopmentJavascript Development
Javascript Development
 
Introduction to javascript
Introduction to javascriptIntroduction to javascript
Introduction to javascript
 
Jasmine Perry Visual Resume
Jasmine Perry Visual ResumeJasmine Perry Visual Resume
Jasmine Perry Visual Resume
 
Oow 2008 Final
Oow 2008 FinalOow 2008 Final
Oow 2008 Final
 
Varrati Zack slideshare_presentation
Varrati Zack slideshare_presentationVarrati Zack slideshare_presentation
Varrati Zack slideshare_presentation
 
Douville_Tiffany_visualresume
Douville_Tiffany_visualresumeDouville_Tiffany_visualresume
Douville_Tiffany_visualresume
 
Sector changes and career development in libraries: Every flavour career bean...
Sector changes and career development in libraries: Every flavour career bean...Sector changes and career development in libraries: Every flavour career bean...
Sector changes and career development in libraries: Every flavour career bean...
 
Passion Driven Leadership
Passion Driven LeadershipPassion Driven Leadership
Passion Driven Leadership
 
Pushing, pulling or leaving the door open
Pushing, pulling or leaving the door openPushing, pulling or leaving the door open
Pushing, pulling or leaving the door open
 
PyConFI - dostuff()
PyConFI - dostuff()PyConFI - dostuff()
PyConFI - dostuff()
 
Becoming a connected leader
Becoming a connected leaderBecoming a connected leader
Becoming a connected leader
 
Living with Laptops: Digital Citizenship for Parents
Living with Laptops: Digital Citizenship for ParentsLiving with Laptops: Digital Citizenship for Parents
Living with Laptops: Digital Citizenship for Parents
 
ALA Preconference Making it Stick
ALA Preconference Making it StickALA Preconference Making it Stick
ALA Preconference Making it Stick
 
Hairston walter a1_pcp
Hairston walter a1_pcpHairston walter a1_pcp
Hairston walter a1_pcp
 
Wilkins, akeem visual resume
Wilkins, akeem visual resume Wilkins, akeem visual resume
Wilkins, akeem visual resume
 
Momotaro
MomotaroMomotaro
Momotaro
 
Foundations web2.0
Foundations web2.0Foundations web2.0
Foundations web2.0
 
Libraries and Transliteracy KLA
Libraries and Transliteracy KLALibraries and Transliteracy KLA
Libraries and Transliteracy KLA
 
E-Portfolio in the NZ School Sector
E-Portfolio in the NZ School SectorE-Portfolio in the NZ School Sector
E-Portfolio in the NZ School Sector
 

Recently uploaded

UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
KAMESHS29
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Zilliz
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
DianaGray10
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Albert Hoitingh
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIEnchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Vladimir Iglovikov, Ph.D.
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
James Anderson
 
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
Zilliz
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
Large Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial ApplicationsLarge Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial Applications
Rohit Gautam
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
SOFTTECHHUB
 
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Zilliz
 

Recently uploaded (20)

UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIEnchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
 
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
Large Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial ApplicationsLarge Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial Applications
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
 
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...
 

Mobile Web App Development (Becoming native)

  • 1. MOBILE WEB APP DEVELOPMENT (BECOMING NATIVE) DMD12 BSc 17th March 2011 Syd Lawrence SIT BACK / SIT BACK LISTEN UP LISTEN UP slideshare.net/sydlawrence
  • 2. NO RELOAD SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/barjack/135263802/
  • 3. A SINGLE HTML PAGE SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/ewanrayment/1250049249/
  • 4. HIDE UNNEEDED ELEMENTS SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/rsms/1320004520/
  • 5. RETREIVE THE DATA SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/29503348@N03/4915763648/
  • 6. FROM REMOTE API SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/29503348@N03/4915763648/
  • 7. JSONP SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/sabeth718/4975388271/
  • 8. http://api.com/get.php?user=2 <code/> ___ callback({"id":2,"first_name":"Syd","last_name":”Lawrence”}) ___ ** local javascript function callback(data) { // do something } var url = “http://api.com/get.php?user=2”; // URL of the external script var script = document.createElement('script'); script.setAttribute('src', url); // load the script document.getElementsByTagName('head')[0].appendChild(script); SIT BACK / SIT BACK LISTEN UP LISTEN UP MORE INFO: http://sydl.me/evqQVJ
  • 9. CACHE THE DATA SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/kurtz433/242712215/
  • 10. LOCAL STORAGE SIT BACK / SIT BACK LISTEN UP LISTEN UP
  • 11. DISPLAY THE DATA SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/drp/14437926/
  • 12. MODIFY THE DISPLAYED DATA SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/familymwr/4930275692/
  • 13. REPLACE THE DISPLAYED DATA SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/zephyrance/2865451246/
  • 14. JAVASCRIPT FRAMEWORKS SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/29503348@N03/4915763648/
  • 15. DO NOT OVERUSE! SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/bayat/296445681/
  • 16. THINK BANDWIDTH SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/pdxdj/253103371/
  • 17. THINK SPEED SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/johnkay/5070219963/
  • 18. SENCHA TOUCH sydl.me/fPd02C SIT BACK / SIT BACK LISTEN UP LISTEN UP
  • 19. JQUERY MOBILE sydl.me/eGzOcE SIT BACK / SIT BACK LISTEN UP LISTEN UP
  • 20. IWEBKIT sydl.me/eNt5uU SIT BACK / SIT BACK LISTEN UP LISTEN UP
  • 21. NEXT STEP SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/stuckincustoms/219819675/
  • 22. PHONEGAP sydl.me/hLUJz3 SIT BACK / SIT BACK LISTEN UP LISTEN UP
  • 23. APPCELERATOR sydl.me/gYXZIC SIT BACK / SIT BACK LISTEN UP LISTEN UP
  • 24. APPMOBI sydl.me/eAp2oA SIT BACK / SIT BACK LISTEN UP LISTEN UP
  • 25. WHY THIS STEP? SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/benterrett/191625180/
  • 26. APP STORES SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/agizienski/3778956583/
  • 27. CAMERAS SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/captkodak/271872436/
  • 28. COMPASS SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/curious_gregor/5062538980/
  • 29. FILES SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/davemorris/4400953131/
  • 30. NOTIFICATIONS SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/funtik/1175522045/
  • 31. RECORD MEDIA SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/adambowie/544200097/
  • 33. A LITTLE TASK DUE TODAY (NOT REALLY THAT OPTIONAL, BUT UP TO YOU IF YOU WANT TO DO IT) Create your API Setup your database Populate with sample data SIT BACK / SIT BACK Create your getters and setters LISTEN UP LISTEN UP Test
  • 34. HOW DID YOU DO? SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/annagaycoan/3750144703/
  • 35. A LITTLE TASK DUE NEXT WEEK (GROUP WORK) In your groups 1 person sort out the HTML & CSS view 1 person play around with the web -> native apps SIT BACK / SIT BACK Get some kind of application onto a mobile device LISTEN UP LISTEN UP 1 person project manage and work out what is left to do
  • 36. CODE SAMPLES AND CONCEPTS Mobile websites tips & tricks (@fakedarren) Cache Manifest localStorage SIT BACK / SIT BACK Online / Offline Events LISTEN UP LISTEN UP JSONP

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. How did you do?\n
  35. \n
  36. \n