This is a presentation to review and summarize the mobile websites that I have involved in. It includes many practical skills and my own experiences in the development of mobile websites.
Building & Managing The Lifecycle of Mobile Apps For The EnterpriseApperian
This presentation covers the various options for creating mobile apps for iOS as well as other popular platforms including Android. The landscape is changing quickly, so we'll review everything from HTML5 web-only apps, cross-platform development tools, HTML-enabled "hybrid" apps, all the way to the full native XCode environment.
We'll cover best practices for managing the mobile app lifecycle from design, beta, rollout, update management, to retirement. We'll also see a demonstration of how to deploy and manage mobile apps in an "enterprise" or corporate environment for iOS and Android.
Originally presented at the Southland Mobile App Creators (SMAC) meeting November 9, 2011.
Intro to Continuous Integration at SoundCloudgarriguv
In the past year at SoundCloud, we've improved our CI from a single machine running our limited unit test suite to several machines running a linter, unit tests, acceptance tests and building several versions of our app including the AppStore version for every commit. This enabled us to move away from pull-requests and code reviews and use trunk based development and pairing, as well as scale the team from 3 to 7 developers.
We've stopped relying on Xcode Schemes for builds, we're using instead command line tools and compile-time parameters to automatically build internal versions of our app and distribute it internally.
In order to make our release process more reliable, the AppStore version of the app is created by re-signing an AdHoc build. This enables us to test the exact same binary that will be submitted to the AppStore.
This talk will focus on 3 areas of our continuous integration: testing, building with user defined build settings and signing apps.
Single Page Applications – Know The Ecosystem systemSynerzip
This webinar discusses technology frameworks recommended approach for building Single Page web applications.
In this Webinar, we will explore what goes into building a Single Page Application and the ecosystem around it. We will be looking at different aspects of Single Page Applications and how they fit together.
Read more at https://www.synerzip.com/webinar/building-single-page-applications-know-the-ecosystem-webinar-february-2014/
Building & Managing The Lifecycle of Mobile Apps For The EnterpriseApperian
This presentation covers the various options for creating mobile apps for iOS as well as other popular platforms including Android. The landscape is changing quickly, so we'll review everything from HTML5 web-only apps, cross-platform development tools, HTML-enabled "hybrid" apps, all the way to the full native XCode environment.
We'll cover best practices for managing the mobile app lifecycle from design, beta, rollout, update management, to retirement. We'll also see a demonstration of how to deploy and manage mobile apps in an "enterprise" or corporate environment for iOS and Android.
Originally presented at the Southland Mobile App Creators (SMAC) meeting November 9, 2011.
Intro to Continuous Integration at SoundCloudgarriguv
In the past year at SoundCloud, we've improved our CI from a single machine running our limited unit test suite to several machines running a linter, unit tests, acceptance tests and building several versions of our app including the AppStore version for every commit. This enabled us to move away from pull-requests and code reviews and use trunk based development and pairing, as well as scale the team from 3 to 7 developers.
We've stopped relying on Xcode Schemes for builds, we're using instead command line tools and compile-time parameters to automatically build internal versions of our app and distribute it internally.
In order to make our release process more reliable, the AppStore version of the app is created by re-signing an AdHoc build. This enables us to test the exact same binary that will be submitted to the AppStore.
This talk will focus on 3 areas of our continuous integration: testing, building with user defined build settings and signing apps.
Single Page Applications – Know The Ecosystem systemSynerzip
This webinar discusses technology frameworks recommended approach for building Single Page web applications.
In this Webinar, we will explore what goes into building a Single Page Application and the ecosystem around it. We will be looking at different aspects of Single Page Applications and how they fit together.
Read more at https://www.synerzip.com/webinar/building-single-page-applications-know-the-ecosystem-webinar-february-2014/
Slides for Dean Peters' May 17, 2012 Presentation entitled "Creating Android Apps with PhoneGap" for the TriDroid@SAS -- the NC Triangle Android Meetup - http://bit.ly/TriDroid17May12
Presentation for my last workshop at Velocity 2011.
Mobile web is coming in 2011 with a strong wave; mobile devices are more powerful every year; mobile browsers are evolving even faster than desktop web browser; and tablets have mobile browsers rather tan desktop browsers. That is a good mix of new problems for WPO.
How to deal with mobile browsers?
How is WPO impacting on mobile web?
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)Ryan Cuprak
Java EE 7 provides a strong foundation for developing the back end for your HTML5 mobile applications. This heavily code-driven session shows you how you can effectively utilize Java EE 7 as a back end for your Apache Cordova mobile applications. The session demonstrates Java EE 7 technologies such as JAX-RS 2.0, WebSocket, JSON-P, CDI, and Bean Validation. It provides an overview of the basics of Apache Cordova as well as the tooling support added in NetBeans 8. The session also demonstrates an integrated approach to rapidly developing HTML5 mobile applications with Java EE 7 and NetBeans and concludes with best practices and pitfalls.
PhoneGap is an open-source framework (Apache Cordova) that allows you to create cross-platform mobile apps using the web technologies you know and love: HTML, CSS, and JavaScript. Learn how PhoneGap works and how it will enable you to start building mobile apps with web standards. You will also get an introduction to PhoneGap Build which allows you to package mobile apps in the cloud.
Native - Hybrid - Web Mobile ArchitecturesPhong Le Duy
This presentation will discuss the different mobile architecture between Native, Hybrid and Web Mobile that will help Mobile and Web developers work closer together.
Ionic - Revolutionizing Hybrid Mobile Application DevelopmentJustin James
It has never been easier to build hybrid applications by using the Ionic Framework with technology that you already know and love such as AngularJS and Html 5. You will learn to love mobile development again.
When should you use HTML5 vs native apps for mobile app development? What are the pros and cons of HTML5? What are the advantages of native apps? What is the cost of HTML5 app development?
This presentation contains the facts based on 6+ years of mobile app development and more recently HTML5 experience.
We look forward to your feedback.
See how PhoneGap (Apache Cordova), an open-source framework, and the Adobe PhoneGap Build service, part of the Adobe Creative Cloud, allow you to create cross-platform mobile apps using the web technologies you know and love: HTML, CSS, and JavaScript. Learn how PhoneGap works and how it will enable you to start building mobile apps with web standards. This talk will introduce you to the PhoneGap API and walk you through how to interact with the JavaScript methods to create interactive, feature-rich mobile applications. You will also get an introduction to PhoneGap Build which allows you to package mobile apps in the cloud.
This session will cover:
Getting started with the PhoneGap API
Interacting with the native device features (camera, video)
Accessing and using the geolocation sensors
Compiling the application using PhoneGap Build
Native vs Hybrid - Options to develop your mobile applicationLoic Ortola
Developing a mobile application is always a challenge, as it usually implies multi-platform developments (android, iOS, windows phone).
The question of native vs hybrid makes sense.
This presentation lays out the differences, the concepts of existing solutions, and proposes a matrix of decisions, and elements to make up your mind.
Rapid mobile development with Ionic framework - Voxxdays Ticino 2015Alessio Delmonti
Meet Ionic, the best tool for faster go-to market strategy. Nowadays, developing mobile applications is about both technology and development time/cost. It's a hot topic for large companies and small startups who need to go to market quickly and cost-effectively. Ionic is the perfect tool for the rapid cross-platform development of high-quality mobile apps.
Flash Builder and Flex Future - Multiscreen DevelopmentRyan Stewart
Mobile development on the Flash Platform. Flex and Flash Builder have some mobile-specific technology and paradigms that make it easy to create cross-vendor, cross-os mobile applications.
Slides for Dean Peters' May 17, 2012 Presentation entitled "Creating Android Apps with PhoneGap" for the TriDroid@SAS -- the NC Triangle Android Meetup - http://bit.ly/TriDroid17May12
Presentation for my last workshop at Velocity 2011.
Mobile web is coming in 2011 with a strong wave; mobile devices are more powerful every year; mobile browsers are evolving even faster than desktop web browser; and tablets have mobile browsers rather tan desktop browsers. That is a good mix of new problems for WPO.
How to deal with mobile browsers?
How is WPO impacting on mobile web?
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)Ryan Cuprak
Java EE 7 provides a strong foundation for developing the back end for your HTML5 mobile applications. This heavily code-driven session shows you how you can effectively utilize Java EE 7 as a back end for your Apache Cordova mobile applications. The session demonstrates Java EE 7 technologies such as JAX-RS 2.0, WebSocket, JSON-P, CDI, and Bean Validation. It provides an overview of the basics of Apache Cordova as well as the tooling support added in NetBeans 8. The session also demonstrates an integrated approach to rapidly developing HTML5 mobile applications with Java EE 7 and NetBeans and concludes with best practices and pitfalls.
PhoneGap is an open-source framework (Apache Cordova) that allows you to create cross-platform mobile apps using the web technologies you know and love: HTML, CSS, and JavaScript. Learn how PhoneGap works and how it will enable you to start building mobile apps with web standards. You will also get an introduction to PhoneGap Build which allows you to package mobile apps in the cloud.
Native - Hybrid - Web Mobile ArchitecturesPhong Le Duy
This presentation will discuss the different mobile architecture between Native, Hybrid and Web Mobile that will help Mobile and Web developers work closer together.
Ionic - Revolutionizing Hybrid Mobile Application DevelopmentJustin James
It has never been easier to build hybrid applications by using the Ionic Framework with technology that you already know and love such as AngularJS and Html 5. You will learn to love mobile development again.
When should you use HTML5 vs native apps for mobile app development? What are the pros and cons of HTML5? What are the advantages of native apps? What is the cost of HTML5 app development?
This presentation contains the facts based on 6+ years of mobile app development and more recently HTML5 experience.
We look forward to your feedback.
See how PhoneGap (Apache Cordova), an open-source framework, and the Adobe PhoneGap Build service, part of the Adobe Creative Cloud, allow you to create cross-platform mobile apps using the web technologies you know and love: HTML, CSS, and JavaScript. Learn how PhoneGap works and how it will enable you to start building mobile apps with web standards. This talk will introduce you to the PhoneGap API and walk you through how to interact with the JavaScript methods to create interactive, feature-rich mobile applications. You will also get an introduction to PhoneGap Build which allows you to package mobile apps in the cloud.
This session will cover:
Getting started with the PhoneGap API
Interacting with the native device features (camera, video)
Accessing and using the geolocation sensors
Compiling the application using PhoneGap Build
Native vs Hybrid - Options to develop your mobile applicationLoic Ortola
Developing a mobile application is always a challenge, as it usually implies multi-platform developments (android, iOS, windows phone).
The question of native vs hybrid makes sense.
This presentation lays out the differences, the concepts of existing solutions, and proposes a matrix of decisions, and elements to make up your mind.
Rapid mobile development with Ionic framework - Voxxdays Ticino 2015Alessio Delmonti
Meet Ionic, the best tool for faster go-to market strategy. Nowadays, developing mobile applications is about both technology and development time/cost. It's a hot topic for large companies and small startups who need to go to market quickly and cost-effectively. Ionic is the perfect tool for the rapid cross-platform development of high-quality mobile apps.
Flash Builder and Flex Future - Multiscreen DevelopmentRyan Stewart
Mobile development on the Flash Platform. Flex and Flash Builder have some mobile-specific technology and paradigms that make it easy to create cross-vendor, cross-os mobile applications.
With the unemployment rate near 7%, why are we still in the situation where employers cannot find enough of the right candidates to fill their open positions?
The method of hiring top talent has changed-- no longer is it just about salary, benefits and location, but how a company can become an “Employer of Choice”. Top employers know the keys of attracting better talent and getting their teams to perform at the highest level. Winning the Talent War presented a clear strategy to recruiting the right people, building a high performing culture and creating an employer brand, all of which will put you in the lead to becoming a top desirable employer and on the road to winning the talent war.
Lee-Anne Scalley of OneInAMil and John Smith of BreakTheEquation teamed up to bring you a detailed presentation on how employment has drastically changed in the last three years and how to be a winner on the talent battlefield.
Immigrant Citizens Survey: Key Findings by Thomas HuddlestonTom Huddleston
www.immigrantsurvey.org
The Immigrant Citizens Survey asks immigrants to assess their aspirations and needs for integration and then evaluate how effective policies are in meeting them. The survey results cover 15 EU cities in Belgium, France, Germany, Hungary, Italy, Portugal, and Spain.
Introduction to PhoneGap
Background
Setting up the environment for Android
Handling Events
Working With The Device, The Network, And Notifications
Getting Information from the Device
Determining the Connection Type
Using Notifications
Using Alerts
Using Confirmation Dialogs
Using Beeps
Using Vibrations
Accelerometer
Using the Acceleration Object
Using Accelerometer Methods
Media
The Media Object
Using Media Methods
Camera
Using The Camera Object
Using The Getpicture Method
Using Camera Options
Geolocation
Position, PositionError, Coord
Geolocation Methods
Geolocation Options
Deployment using Phonegap (Android)
Hands-on exercises
Storage
Available options
Db object
localStorage
Files
Filessystem
File read & write
Handling errors
Contacts
Creating contacts
Finding contacts
Handling errors
Capture
Video
Audio
Handling errors
Hands-on exercises
Introduction to PhoneGap
Background
Setting up the environment for Android
Handling Events
Working With The Device, The Network, And Notifications
Getting Information from the Device
Determining the Connection Type
Using Notifications
Using Alerts
Using Confirmation Dialogs
Using Beeps
Using Vibrations
Accelerometer
Using the Acceleration Object
Using Accelerometer Methods
Media
The Media Object
Using Media Methods
Camera
Using The Camera Object
Using The Getpicture Method
Using Camera Options
Geolocation
Position, PositionError, Coord
Geolocation Methods
Geolocation Options
Deployment using Phonegap (Android)
Hands-on exercises
Storage
Available options
Db object
localStorage
Files
Filessystem
File read & write
Handling errors
Contacts
Creating contacts
Finding contacts
Handling errors
Capture
Video
Audio
Handling errors
Hands-on exercises
Dreamweaver CS6, jQuery, PhoneGap, mobile designDee Sadler
A session talk for #NAGW2012 on:
Mobile app, choices
Dreamweaver’s place
Creating Mobile Design (actual design, not code)
Other helpful Adobe tools to create HTML/CSS
jQuery Mobile in DW
PhoneGap Build in DW
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapNick Landry
The final demo for this presentation can be downloaded at:
https://www.dropbox.com/s/9j09wip6wz84b61/JSDevConMobile-JQM-PhoneGap-Demo.zip
SESSION ABSTRACT
=================
Write Once, Run Everywhere. How many times have we been promised true cross-platform development? HTML5 seems to be the closest we’ve ever been to writing applications once and running them on multiple mobile devices, such as iOS, Android, Windows Phone or Blackberry.
But native mobile apps have taken all the spotlight in recent years thanks to the introduction of hundreds of thousands of apps in various app stores from Apple, Google, Microsoft and BlackBerry. Apps offer a great native platform experience, but they can be expensive to build and require specific languages, SDKs and skill sets across multiple platforms. Mobile web sites offer a great way to engage with consumers and corporate workers alike without requiring the installation of any app, and can in turn be adapted as deployable "hybrid" apps.
This session explores the fundamentals of native vs. web apps, and how to choose the right approach for any given scenario. We begin with an exploration of the benefits of web development for smartphones using the most popular HTML5 & JavaScript framework for mobile: jQuery Mobile (JQM). We’ll go over a quick primer on HTML5, CSS3 and JavaScript, followed by everything you need to get started with JQM. We’ll cover the most common development environment options, how to build your first jQuery Mobile page, and how to debug your mobile web code with some of the available tools. We’ll also discuss how to develop a native-like experience on each mobile platform thanks to JQM’s adaptive rendering, and how to save and retrieve data with the cloud using Microsoft Azure Mobile Services.
We'll then learn how to leverage PhoneGap to wrap our mobile web UI into a native smartphone or tablet app. Discover how PhoneGap exposes native device hardware like cameras, sensors, GPS and more. We’ll also discuss the pros and cons of PhoneGap-based apps, how to deal with the UI design guidelines across platforms, and learn some do’s and don’ts of cross-platform mobile development.
Native mobile apps have their place for mass market revenue-generating models, but you also need to master cross-platform techniques when the situation calls for it such as in enterprise mobility scenarios and other niche areas. Web development is a critical skill required by every mobile developer; come learn how to get started and reach hundreds of millions of users through a smart mobile web & hybrid approach.
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...Yottaa
Building a mobile app - depending upon who you speak with it's a quick way to make a ton of cash (SnapChat), a sign of maturity for a SaaS startup that offers advantages over a desktop solution (ifttt), or the only way your company chooses to do business (WhatsApp). If you get it right...
Today's mobile app developers have to make some difficult choices in their implementations, and a lack of history to provide clear direction doesn't help. In this meetup we'll look at Responsive, Adaptive and Native app development alternatives and how your choice can impact day-to-day necessities like testing and troubleshooting. This will be slightly more technical than our last meetup as we will examine implementations and optimization techniques using mobile applications in the wild.
Building applications for mobile devices has its additional challenges: The network connection can be flaky and slow, so the application should still work when the device is offline. Users expect application icons on their home screens to start them. Depending on your use cases you want to access sensors that are not available in the browser.
This Meetup Martin Sotirov (@unclemartycodes) will talk about Vue on mobile devices and take a look at the different ways you can deploy a Vue app on mobile. We start with a PWA, go through a hybrid solution using Ionic Capacitor and then finally arrive at a NativeScript app which renders native iOS and Android views.
https://martinsotirov.com
contact@martinsotirov.com
A talk given at Appspirina workshop on March 29th, 2012 organized by http://mobiledeveloper.pl/.
Event page: https://www.facebook.com/events/296799847060237/
10. Native App
定义:Apps developed exclusively for
a specific mobile platform that can
leverage all device capabilities.
11. Web vs. Native
Web Native
Dev Cost Reasonable Expensive
Dev Time Short Long
Portability High No
Performance Fast Very Fast
Native Functionality No All
Distribution No Yes
12. Hybrid App
定义: Apps that wrap a mobile web
interface inside a native container.
14. Web vs. Hybrid vs. Native
Web Hybrid Native
Dev Cost Reasonable Reasonable Expensive
Dev Time Short Short Long
Portability High High No
Performance Fast Fast Very Fast
Native
Functionality No Yes All
Distribution No Yes Yes
15. Web vs. Hybrid vs. Native
这个世界上,从来没有最好的技术或是编程
语言,只有最恰当的选择和与之匹配的解决
方案。
16. 目录
• Web Applications?
• HTML5
• Web APP开发
• 最佳实践
• PhoneGap
17. What is HTML5
HTML5 ~= HTML + CSS3 + JS API
详细:http://slides.html5rocks.com/#landing-slide
18. HTML5 for Mobile Browsers
OS or Browser Platform Score
(*/500)
BlackBerry 10.1 » BlackBerry Q or Z series 485
Opera Mobile 15 » Android 428
Firefox Mobile 22 » Multiple platforms 422
Chrome 25 » All Android 4 devices 417
Opera Mobile 12.10 » Multiple platforms 406
iOS 6.0 » Apple iPhone, iPad and iPod Touch 386
iOS 5.0 » Apple iPhone, iPad and iPod Touch 258
Windows Phone 8 » Nokia Lumia 822, HTC 8X and
others 320
Android 4.0 » Samsung Galaxy Nexus 297
http://html5test.com/
19. HTML5 Elements for Mobile
• Offline Support: Web database,
LocalStorage, App Cache
• Canvas
• Video
• GeoLocation
• Advanced Forms
• Workers
• Camera
20. 目录
• Web Applications?
• HTML5
• Web APP开发
• 最佳实践
• PhoneGap
26. Web APP开发#1
• Small Screen CSS
o media queries
<link media=“only screen and (max-device-width: 480px)”
href=“mobile.css” type=“text/css” rel=“stylesheet”/>
<link media=“screen and (min-device-width: 481px)”
href=“standard.css” type=“text/css” rel=“stylesheet”/>
27. Web APP开发#1
• Small Screen CSS
o media query
@media only screen and (max-device –width: 480px){
#test{
color: red;
}
}
28. Web APP开发#2
• UserAgent
1. Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebkit/420.1 (KHTML,
like Gecko) Version/3.0 Mobile/4A93 Safari/419.3
2. Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebkit/420+ (KHTML,
like Gecko) Version/3.0 Mobile/1A543 Safari/419.3
3. Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebkit/
531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10
Javascript:
If((navigator.userAgent.match(/iPhone/i))){}
29. Web APP开发#2
var pixelRatio = window.devicePixelRatio || 1;
var iPhone = /iPhone/i.test(navigator.userAgent);
var iPhone4 = (iPhone && pixelRatio == 2);
var iPhone5 = /iPhone OS 5_0/i.test(navigator.userAgent);
var iPad = /iPad/i.test(navigator.userAgent);
var android = /android/i.test(navigator.userAgent);
var webos = /hpwos/i.test(navigator.userAgent);
var iOS = iPhone || iPad;
var mobile = iOS || android || webos;
30. Web APP开发#3
• iPhone Browser & Viewport meta
Status Bar: 20px
URL Bar: 60px
Viewport: 320*356px
Button Bar: 44px
iPhone
(非retina):
320*480px
31. Web APP开发#3
• Viewport Meta
<meta name=“viewport” content=”width=device-width” />
40. Web APP开发#8
• Orientation
function checkOrientation(){
switch(window.orientation){
case 0:
alert(‘Orientation: Portrait’);
break;
case 90:
case -90:
alert(‘Orientation: Landscape’);
break;
}
}
addEventListener(‘orientationchange’, checkOrientation);
46. Web APP开发#13
• Retina: background images
.repeatingPattern {
background: url(../images/bgPattern.png) repeat;
background-size: 100px 100px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.repeatingPattern {
background: url(../images/bgPattern@2x.png) repeat;
}
}
47. Web APP开发#13
• Retina: inline images
o JS for image replacement
if (window.devicePixelRatio === 2) {
//Replace your img src with the new retina image
}
49. Web APP开发#14
• CSS动画
o CSS Transitions
o CSS 2D Transformations
o CSS 3D Transformations
o CSS Animations
• 效果案例
兼容性: http://caniuse.com/
50. Web APP开发#14
• CSS 3D Transformations(开启GPU加速)
• -webkit-transform:
o translate3d(tx,ty,tz);
o scale3d(sx,sy,sz);
o rotate3d(rx,ry,rz,angle);
• Demo
51. Web APP开发#15
• 调试
o Chrome调试工具
o weinre: Web Inspector Remote, 远程实时调试
59. 目录
• Web Applications?
• HTML5
• Web APP开发
• 最佳实践
• PhoneGap
60. What is PhoneGap
PhoneGap is a free and open source framework
that allows you to create mobile apps using
standardized web APIs for the platforms you care
about.
http://phonegap.com/
63. PhoneGap APIS
Accelerometer
Tap into the device’s motion sensor
Camera
Capture a photo using the device’s camera
Compass
Obtain the direction that the device is pointing
Contacts
Work with the devices contact database
Device
Gather device specific information
Event
Hook into native events through JavaScript
File
Hook into native file system through JavaScript
Geolocation
Make your application location aware
Media
Record and play back auto files
Network
Quickly check the network state
Notification
Visual, audible, and tactile device notification
Storage
Hook into the device’s native storage options