SlideShare a Scribd company logo
MOBILE WEB APP
DEVELOPMENT


DMD12 BSc
3rd March 2011
Syd Lawrence                 SIT BACK /
                             SIT BACK
                             LISTEN UP
                             LISTEN UP

slideshare.net/sydlawrence
WHAT TO SUPPORT?



                                                       SIT BACK /
                                                       SIT BACK
                                                       LISTEN UP
                                                       LISTEN UP

http://www.flickr.com/photos/ladamaris70/4202034430/
NATIVE OR WEB



                                                     SIT BACK /
                                                     SIT BACK
                                                     LISTEN UP
                                                     LISTEN UP

http://www.flickr.com/photos/kingofmonks/22988490/
NATIVE IS
FASTER



                                                SIT BACK /
                                                SIT BACK
                                                LISTEN UP
                                                LISTEN UP

http://www.flickr.com/photos/pdxdj/253103371/
THE WEB IS
NOT OFFLINE



                                                             SIT BACK /
                                                             SIT BACK
                                                             LISTEN UP
                                                             LISTEN UP

http://www.flickr.com/photos/gabrielfigueiredo/4333239008/
HTML5
& RELATED TECH


                 SIT BACK /
                  SIT BACK
                 LISTENUP
                  LISTEN UP
NATIVE IS
FASTER



                                                SIT BACK /
                                                SIT BACK
                                                LISTEN UP
                                                LISTEN UP

http://www.flickr.com/photos/pdxdj/253103371/
THE WEB IS
NOT OFFLINE



                                                     SIT BACK /
                                                     SIT BACK
                                                     LISTEN UP
                                                     LISTEN UP

http://www.flickr.com/photos/kingofmonks/22988490/
SERVER
DATA STORE



                                                   SIT BACK /
                                                   SIT BACK
                                                   LISTEN UP
                                                   LISTEN UP

http://www.flickr.com/photos/kurtz433/242712215/
HTML & JS
VIEW



                                                       SIT BACK /
                                                       SIT BACK
                                                       LISTEN UP
                                                       LISTEN UP

http://www.flickr.com/photos/ewanrayment/1250049249/
MAKE AN API



                                                      SIT BACK /
                                                      SIT BACK
                                                      LISTEN UP
                                                      LISTEN UP

http://www.flickr.com/photos/thomashawk/2671536366/
XML



                                                    SIT BACK /
                                                    SIT BACK
                                                    LISTEN UP
                                                    LISTEN UP

http://www.flickr.com/photos/vlashton/1116629113/
JSON



                                                     SIT BACK /
                                                     SIT BACK
                                                     LISTEN UP
                                                     LISTEN UP

http://www.flickr.com/photos/sabeth718/4975388271/
GET



                                                        SIT BACK /
                                                        SIT BACK
                                                        LISTEN UP
                                                        LISTEN UP

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



                                                         SIT BACK /
                                                         SIT BACK
                                                         LISTEN UP
                                                         LISTEN UP

http://www.flickr.com/photos/deniscollette/5454729294/
PLAN YOUR API



                                                          SIT BACK /
                                                          SIT BACK
                                                          LISTEN UP
                                                          LISTEN UP

http://www.flickr.com/photos/jingleslenobel/4326713557/
A LITTLE
TASK DUE
TODAY
(TOTALLY OPTIONAL)



Create an HTML page with an image.
Create a custom event
Create a button which when clicked dispatches the custom event
Listen out for the custom event, and 1 second after the event, manipulate the image in
some way.
                                                                                         SIT BACK /
                                                                                         SIT BACK
                                                                                         LISTEN UP
                                                                                         LISTEN UP

You may choose how the image changes
// include EventTarget (http://sydl.me/fMQbZ0)
                                                       <code/>
var target = new EventTarget();

document.body.onload = function() {
  
document.getElementById('button').addEventListener('click',function() {
  

 target.dispatch('custom_event');

 });
}

doSomething = function() {

 // wait 1 second (1000 milliseconds)

 setTimeout(switchImage,1000);
}

switchImage = function() {
    document.getElementById('hover_image').src = "http://
farm3.static.flickr.com/2181/2358714455_34201aaf45_m.jpg";
}

target.addListener('custom_event',doSomething);


                                                                     SIT BACK /
                                                                     SIT BACK
                                                                     LISTEN UP
                                                                     LISTEN UP

MORE INFO: http://sydl.me/gcI2iQ
HOW DID
YOU DO?


                                                       SIT BACK /
                                                        SIT BACK
                                                       LISTENUP
                                                        LISTEN UP



http://www.flickr.com/photos/annagaycoan/3750144703/
A LITTLE
TASK DUE
NEXT WEEK
(OPTIONAL BUT PRETTY MUCH ESSENTIAL)




With regards to your project.
                                                            SIT BACK /
                                                            SIT BACK
Plan what API methods you need.                             LISTEN UP
                                                            LISTEN UP

Plan your database for the server side of the application
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

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
 
The Creativity (R)Evolution - UX Week 2014
The Creativity (R)Evolution -  UX Week 2014The Creativity (R)Evolution -  UX Week 2014
The Creativity (R)Evolution - UX Week 2014
Denise Jacobs
 
Presentationcreativityrevolutionuxweek 140912120824-phpapp02
Presentationcreativityrevolutionuxweek 140912120824-phpapp02Presentationcreativityrevolutionuxweek 140912120824-phpapp02
Presentationcreativityrevolutionuxweek 140912120824-phpapp02
Paula Marques
 
Banish Your Inner Critic - Design & Content 2015
Banish Your Inner Critic - Design & Content 2015Banish Your Inner Critic - Design & Content 2015
Banish Your Inner Critic - Design & Content 2015
Denise Jacobs
 
Get Unblocked
Get UnblockedGet Unblocked
Get Unblocked
Denise Jacobs
 
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
 
Banish Your Inner Critic - Web Design Day 2015
Banish Your Inner Critic -  Web Design Day 2015Banish Your Inner Critic -  Web Design Day 2015
Banish Your Inner Critic - Web Design Day 2015
Denise Jacobs
 
Hyperlocal or Hype (and Local)?
Hyperlocal or Hype (and Local)?Hyperlocal or Hype (and Local)?
Hyperlocal or Hype (and Local)?
Gary Gale
 
Creativity (R)Evolution - Oredev 2013
Creativity (R)Evolution - Oredev 2013Creativity (R)Evolution - Oredev 2013
Creativity (R)Evolution - Oredev 2013
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
 
Coordinadors TIC TAC
Coordinadors TIC TACCoordinadors TIC TAC
Coordinadors TIC TAC
Samuel Soriano
 
A (Mostly) Complete & (Mostly) Accurate History Of Location (Abridged)
A (Mostly) Complete & (Mostly) Accurate History Of Location (Abridged)A (Mostly) Complete & (Mostly) Accurate History Of Location (Abridged)
A (Mostly) Complete & (Mostly) Accurate History Of Location (Abridged)
Gary Gale
 
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
 
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 - FrontEnd Conf CH 2016
Infinite Possibilities - FrontEnd Conf CH 2016Infinite Possibilities - FrontEnd Conf CH 2016
Infinite Possibilities - FrontEnd Conf CH 2016
Denise Jacobs
 
Thoughts on the use of Analogies in Understanding and Solving Complex Problem...
Thoughts on the use of Analogies in Understanding and Solving Complex Problem...Thoughts on the use of Analogies in Understanding and Solving Complex Problem...
Thoughts on the use of Analogies in Understanding and Solving Complex Problem...
Lucas Rizoli
 
The (Geo) (Mobile) (Smart) Web
The (Geo) (Mobile) (Smart) WebThe (Geo) (Mobile) (Smart) Web
The (Geo) (Mobile) (Smart) Web
Gary Gale
 
Banish Your Inner Critic - MinneWebCon 2016
Banish Your Inner Critic - MinneWebCon 2016Banish Your Inner Critic - MinneWebCon 2016
Banish Your Inner Critic - MinneWebCon 2016
Denise Jacobs
 

What's hot (18)

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
 
The Creativity (R)Evolution - UX Week 2014
The Creativity (R)Evolution -  UX Week 2014The Creativity (R)Evolution -  UX Week 2014
The Creativity (R)Evolution - UX Week 2014
 
Presentationcreativityrevolutionuxweek 140912120824-phpapp02
Presentationcreativityrevolutionuxweek 140912120824-phpapp02Presentationcreativityrevolutionuxweek 140912120824-phpapp02
Presentationcreativityrevolutionuxweek 140912120824-phpapp02
 
Banish Your Inner Critic - Design & Content 2015
Banish Your Inner Critic - Design & Content 2015Banish Your Inner Critic - Design & Content 2015
Banish Your Inner Critic - Design & Content 2015
 
Get Unblocked
Get UnblockedGet Unblocked
Get Unblocked
 
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
 
Banish Your Inner Critic - Web Design Day 2015
Banish Your Inner Critic -  Web Design Day 2015Banish Your Inner Critic -  Web Design Day 2015
Banish Your Inner Critic - Web Design Day 2015
 
Hyperlocal or Hype (and Local)?
Hyperlocal or Hype (and Local)?Hyperlocal or Hype (and Local)?
Hyperlocal or Hype (and Local)?
 
Creativity (R)Evolution - Oredev 2013
Creativity (R)Evolution - Oredev 2013Creativity (R)Evolution - Oredev 2013
Creativity (R)Evolution - Oredev 2013
 
Infinite Possibilities - Digital PM Summit 2015
Infinite Possibilities - Digital PM Summit 2015Infinite Possibilities - Digital PM Summit 2015
Infinite Possibilities - Digital PM Summit 2015
 
Coordinadors TIC TAC
Coordinadors TIC TACCoordinadors TIC TAC
Coordinadors TIC TAC
 
A (Mostly) Complete & (Mostly) Accurate History Of Location (Abridged)
A (Mostly) Complete & (Mostly) Accurate History Of Location (Abridged)A (Mostly) Complete & (Mostly) Accurate History Of Location (Abridged)
A (Mostly) Complete & (Mostly) Accurate History Of Location (Abridged)
 
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
 
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 - FrontEnd Conf CH 2016
Infinite Possibilities - FrontEnd Conf CH 2016Infinite Possibilities - FrontEnd Conf CH 2016
Infinite Possibilities - FrontEnd Conf CH 2016
 
Thoughts on the use of Analogies in Understanding and Solving Complex Problem...
Thoughts on the use of Analogies in Understanding and Solving Complex Problem...Thoughts on the use of Analogies in Understanding and Solving Complex Problem...
Thoughts on the use of Analogies in Understanding and Solving Complex Problem...
 
The (Geo) (Mobile) (Smart) Web
The (Geo) (Mobile) (Smart) WebThe (Geo) (Mobile) (Smart) Web
The (Geo) (Mobile) (Smart) Web
 
Banish Your Inner Critic - MinneWebCon 2016
Banish Your Inner Critic - MinneWebCon 2016Banish Your Inner Critic - MinneWebCon 2016
Banish Your Inner Critic - MinneWebCon 2016
 

Similar to Mobile web app development

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
 
Introduction to javascript
Introduction to javascriptIntroduction to javascript
Introduction to javascript
Syd Lawrence
 
Javascript Development
Javascript DevelopmentJavascript Development
Javascript Development
Syd Lawrence
 
Jasmine Perry Visual Resume
Jasmine Perry Visual ResumeJasmine Perry Visual Resume
Jasmine Perry Visual Resume
Jasmine Perry
 
Varrati Zack slideshare_presentation
Varrati Zack slideshare_presentationVarrati Zack slideshare_presentation
Varrati Zack slideshare_presentation
Zack James
 
Becoming a connected leader
Becoming a connected leaderBecoming a connected leader
Becoming a connected leader
Chris Wejr
 
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
 
Wilkins, akeem visual resume
Wilkins, akeem visual resume Wilkins, akeem visual resume
Wilkins, akeem visual resume
Awilkins1920
 
Momotaro
MomotaroMomotaro
Momotaro
ikomax
 
Libraries and Transliteracy KLA
Libraries and Transliteracy KLALibraries and Transliteracy KLA
Libraries and Transliteracy KLA
Bobbi Newman
 
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
 
Alston Bryan Ignite_Presentation_Slideshow
Alston Bryan Ignite_Presentation_SlideshowAlston Bryan Ignite_Presentation_Slideshow
Alston Bryan Ignite_Presentation_Slideshow
mrflava70
 
Passion Driven Leadership
Passion Driven LeadershipPassion Driven Leadership
Passion Driven Leadership
Jeff Piontek
 
Douville_Tiffany_visualresume
Douville_Tiffany_visualresumeDouville_Tiffany_visualresume
Douville_Tiffany_visualresume
tiffanydouville
 
Keynote at Alaska Society of Technology Education
Keynote at Alaska Society of Technology EducationKeynote at Alaska Society of Technology Education
Keynote at Alaska Society of Technology Education
Jeff Piontek
 
Johnson claude 4.4
Johnson claude 4.4Johnson claude 4.4
Johnson claude 4.4
Claude CJ Johnson
 
Storytelling for social media
Storytelling for social mediaStorytelling for social media
Storytelling for social media
Gavin Heaton
 
White Space Creativity
White Space CreativityWhite Space Creativity
White Space Creativity
Denise Jacobs
 
Project zen -victoria
Project zen -victoriaProject zen -victoria
Project zen -victoria
The Unquiet Library: Student Work
 
Meeting Community Needs: 2.0 Tools & Statewide Services
Meeting Community Needs: 2.0 Tools & Statewide ServicesMeeting Community Needs: 2.0 Tools & Statewide Services
Meeting Community Needs: 2.0 Tools & Statewide Services
Polly Farrington
 

Similar to Mobile web app development (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)
 
Introduction to javascript
Introduction to javascriptIntroduction to javascript
Introduction to javascript
 
Javascript Development
Javascript DevelopmentJavascript Development
Javascript Development
 
Jasmine Perry Visual Resume
Jasmine Perry Visual ResumeJasmine Perry Visual Resume
Jasmine Perry Visual Resume
 
Varrati Zack slideshare_presentation
Varrati Zack slideshare_presentationVarrati Zack slideshare_presentation
Varrati Zack slideshare_presentation
 
Becoming a connected leader
Becoming a connected leaderBecoming a connected leader
Becoming a connected leader
 
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
 
Wilkins, akeem visual resume
Wilkins, akeem visual resume Wilkins, akeem visual resume
Wilkins, akeem visual resume
 
Momotaro
MomotaroMomotaro
Momotaro
 
Libraries and Transliteracy KLA
Libraries and Transliteracy KLALibraries and Transliteracy KLA
Libraries and Transliteracy KLA
 
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
 
Alston Bryan Ignite_Presentation_Slideshow
Alston Bryan Ignite_Presentation_SlideshowAlston Bryan Ignite_Presentation_Slideshow
Alston Bryan Ignite_Presentation_Slideshow
 
Passion Driven Leadership
Passion Driven LeadershipPassion Driven Leadership
Passion Driven Leadership
 
Douville_Tiffany_visualresume
Douville_Tiffany_visualresumeDouville_Tiffany_visualresume
Douville_Tiffany_visualresume
 
Keynote at Alaska Society of Technology Education
Keynote at Alaska Society of Technology EducationKeynote at Alaska Society of Technology Education
Keynote at Alaska Society of Technology Education
 
Johnson claude 4.4
Johnson claude 4.4Johnson claude 4.4
Johnson claude 4.4
 
Storytelling for social media
Storytelling for social mediaStorytelling for social media
Storytelling for social media
 
White Space Creativity
White Space CreativityWhite Space Creativity
White Space Creativity
 
Project zen -victoria
Project zen -victoriaProject zen -victoria
Project zen -victoria
 
Meeting Community Needs: 2.0 Tools & Statewide Services
Meeting Community Needs: 2.0 Tools & Statewide ServicesMeeting Community Needs: 2.0 Tools & Statewide Services
Meeting Community Needs: 2.0 Tools & Statewide Services
 

Recently uploaded

A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
sonjaschweigert1
 
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
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
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
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
KAMESHS29
 
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
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Neo4j
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
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
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
Kumud Singh
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
Neo4j
 
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
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
Neo4j
 
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
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
SOFTTECHHUB
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
mikeeftimakis1
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
Neo4j
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 

Recently uploaded (20)

A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
 
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
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
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
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
 
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?
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
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
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
 
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 ...
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
 
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
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 

Mobile web app development

  • 1. MOBILE WEB APP DEVELOPMENT DMD12 BSc 3rd March 2011 Syd Lawrence SIT BACK / SIT BACK LISTEN UP LISTEN UP slideshare.net/sydlawrence
  • 2. WHAT TO SUPPORT? SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/ladamaris70/4202034430/
  • 3. NATIVE OR WEB SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/kingofmonks/22988490/
  • 4. NATIVE IS FASTER SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/pdxdj/253103371/
  • 5. THE WEB IS NOT OFFLINE SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/gabrielfigueiredo/4333239008/
  • 6. HTML5 & RELATED TECH SIT BACK / SIT BACK LISTENUP LISTEN UP
  • 7. NATIVE IS FASTER SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/pdxdj/253103371/
  • 8. THE WEB IS NOT OFFLINE SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/kingofmonks/22988490/
  • 9. SERVER DATA STORE SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/kurtz433/242712215/
  • 10. HTML & JS VIEW SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/ewanrayment/1250049249/
  • 11. MAKE AN API SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/thomashawk/2671536366/
  • 12. XML SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/vlashton/1116629113/
  • 13. JSON SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/sabeth718/4975388271/
  • 14. GET SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/29503348@N03/4915763648/
  • 15. SET SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/deniscollette/5454729294/
  • 16. PLAN YOUR API SIT BACK / SIT BACK LISTEN UP LISTEN UP http://www.flickr.com/photos/jingleslenobel/4326713557/
  • 17. A LITTLE TASK DUE TODAY (TOTALLY OPTIONAL) Create an HTML page with an image. Create a custom event Create a button which when clicked dispatches the custom event Listen out for the custom event, and 1 second after the event, manipulate the image in some way. SIT BACK / SIT BACK LISTEN UP LISTEN UP You may choose how the image changes
  • 18. // include EventTarget (http://sydl.me/fMQbZ0) <code/> var target = new EventTarget(); document.body.onload = function() { document.getElementById('button').addEventListener('click',function() { target.dispatch('custom_event'); }); } doSomething = function() { // wait 1 second (1000 milliseconds) setTimeout(switchImage,1000); } switchImage = function() { document.getElementById('hover_image').src = "http:// farm3.static.flickr.com/2181/2358714455_34201aaf45_m.jpg"; } target.addListener('custom_event',doSomething); SIT BACK / SIT BACK LISTEN UP LISTEN UP MORE INFO: http://sydl.me/gcI2iQ
  • 19. HOW DID YOU DO? SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/annagaycoan/3750144703/
  • 20. A LITTLE TASK DUE NEXT WEEK (OPTIONAL BUT PRETTY MUCH ESSENTIAL) With regards to your project. SIT BACK / SIT BACK Plan what API methods you need. LISTEN UP LISTEN UP Plan your database for the server side of the application
  • 21. 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. So many mobile devices\niOS, Android, WP7, Blackberry, WebOS....\n
  3. iOS - Objective-C\nAndroid - Java\nWP7 - C#\nBlackberry - Java\nWebOS - HTML &amp; Javascript\n\nOr web based.... all platforms...\n
  4. Preload data and use ajax, so that it doesn&amp;#x2019;t need to \n
  5. HTML &amp; javascript, with server side back end. Use a native wrapper\nCovered all angles\n
  6. Web Applications API\nLocal Storage - cache data\nManifests - cache files\n
  7. Preload data and use ajax, so that it doesn&amp;#x2019;t need to. Cache data as much as possible\n
  8. localStorage\nsessionStorage\ncache manifest\n
  9. HTML &amp; javascript, with server side back end. Use a native wrapper\nCovers all angles\n
  10. HTML &amp; javascript, with server side back end. Use a native wrapper\nCovers all angles\n
  11. Make it so that you can manipulate the data on the server from another interface\n
  12. Either with XML\n
  13. Or with JSON\n
  14. Get Data\n
  15. Set Data\n
  16. 1, 2, 3\n
  17. \n
  18. \n
  19. How did you do?\n
  20. \n
  21. \n