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.
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
Hybrid apps provide the best of both worlds by combining aspects of native apps and mobile web apps. They allow developers to create an app-like experience for users while reusing web technologies and avoiding platform-specific SDKs. However, hybrid apps also have drawbacks like less seamless interactions between web and native aspects, as well as lacking certain native features and capabilities. The recommendation is to first consider a mobile web app using web technologies, and only create a hybrid or native app if specific professional features are needed that cannot be delivered through the mobile web.
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?
This document discusses developing mobile web applications using Ajax push technology. It begins with an overview of constraints of mobile devices and how Ajax push can help address them. It then demonstrates a mobile collaboration application called WebMC that uses Ajax push to synchronize chat messages between users in real-time. The document provides code examples for implementing Ajax push using ICEfaces to update user interfaces incrementally and keep content synchronized across multiple clients.
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.
This document discusses web apps versus native apps for iPhone and other mobile platforms. It covers key differences like programming languages used, app distribution methods, and costs. It also explores using HTML5 to build web apps that work across different mobile platforms without needing separate native apps. Finally, it provides tips for optimizing web apps for iPhone, including viewport settings, touch icons, and using libraries like jQTouch to create an iPhone-like user interface.
This document compares web apps and native apps for mobile devices. It discusses that web apps are developed with HTML, CSS and JavaScript and can be accessed through any web browser, while native apps are developed through platforms like iOS and Android using languages like Objective-C and Java. It also mentions that HTML5 aims to make web apps work more like native apps by adding features like offline storage, multimedia playback and geolocation to web browsers. Finally, it provides examples of how to make web apps for iPhone that utilize features like touch icons, viewport settings and JavaScript libraries to mimic the look and feel of native iPhone apps.
This document discusses the history and implementation of the Android Action Bar user interface pattern. It provides examples of code samples and configurations for different Action Bar implementations, including menus, tabs, contextual bars, and split bars. It also discusses porting the Action Bar to different Android versions and platforms like tablets and Google TV.
Mobile Web Development with HTML5 provides an overview of developing mobile web applications using HTML5. It discusses using HTML5 features like semantics, offline storage, device access and multimedia that are supported across mobile browsers. It also covers concerns for mobile development like screen resolution and memory constraints. JavaScript frameworks like jQuery Mobile and Sencha Touch are presented as solutions for touch-optimized interfaces. The document recommends HTML5 features and modern web standards for building accessible mobile web sites.
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
This document discusses the Ionic framework for developing hybrid mobile apps. It begins with an overview of Ionic and its features, such as using HTML5, AngularJS, and Cordova to build apps that look and feel like native apps. It then covers various UI elements included in Ionic like lists, tabs, menus. It provides instructions on getting started with Ionic and discusses additional tools like Ionic View, Creator and Crosswalk. It emphasizes that Ionic makes mobile development easier but still requires modern web skills and lists several resources for learning more.
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.
Hybrid mobile applications combine native and web technologies. They use a native shell application containing a web view to display web-based UIs, allowing development with web standards like HTML, CSS, and JavaScript. This provides better performance than pure web apps while reducing costs compared to purely native apps. Popular hybrid frameworks include Titanium, PhoneGap, Rhodes, jQTouch, and iUI. They support building cross-platform mobile apps for devices like iPhone, Android, BlackBerry and more.
This document discusses Cordova, Ionic, and IBM MobileFirst for developing hybrid mobile apps. It begins with an introduction to Cordova for creating apps with HTML, CSS, and JavaScript. Ionic is presented as a framework that improves upon Cordova apps. MobileFirst is then introduced as a platform from IBM that further enhances hybrid apps with features like push notifications, security, and integration with backend systems and services.
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
The document provides an overview of Android including:
1) Android is an open source software stack that includes an operating system, middleware and key apps for mobile devices.
2) It was developed by Google and the Open Handset Alliance and the first Android phone was the HTC Dream released in 2008.
3) Android applications are developed using Java and run on the Dalvik virtual machine. The Android SDK provides tools for application development.
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
Flash Builder and Flex provide tools for building multi-screen applications with "Burrito" and "Hero". "Burrito" allows debugging applications on mobile devices from Flash Builder. "Hero" includes mobile-optimized UI components and patterns for touch interfaces. The document also discusses developing for platforms like Android, Blackberry Playbook, and deploying applications to devices and app stores from Flash Builder.
Este documento describe las funciones de la herramienta de temas en Microsoft Word. Permite cambiar el diseño general del documento, incluidos los colores, fuentes y efectos. También permite cambiar los colores, fuentes y efectos del tema actual, insertar texto fantasma detrás del contenido y seleccionar un color para el fondo de la página. Como ejemplo, pide realizar un documento sobre un tema libre aplicándole un tema, una marca de agua personalizada y un borde de página con figuras.
This person enjoys a variety of sweet and savory foods like pizza, cake, cookies, vanilla cupcakes, and pancakes. Their interests include the video games Plants vs. Zombies, Minecraft, and Portal 2.
El documento habla sobre la importancia de cuidar el planeta mediante acciones como no tirar basura en la calle, cuidar el agua, separar la basura, parar la tala de árboles y reforestar los bosques para dejar un futuro sostenible a las generaciones futuras. También menciona que debemos cuidar el planeta porque es nuestro hogar y si continuamos tratándolo mal podría dejar de ser habitable.
Este documento presenta la planificación de una sesión de aprendizaje sobre unidades de almacenamiento de información para estudiantes de 5o y 6o grado. La sesión se llevará a cabo durante dos horas semanales del 11 al 23 de abril en el colegio I.E. Privada Apostol Pablo. Se explicarán los usos y cómo almacenar información en un USB, y los estudiantes practicarán con el programa GraWin for Children.
How are you protecting your general anesthesia procedure patients from contam...Steve Koontz
ARC Medical was founded in 1990 to provide devices for humidification and filtration for ventilator and surgery patients. They produce high performing filtration and humidification devices based on independent testing. Their manufacturing uses state of the art engineering and automated assembly to ensure consistent product performance. ARC Medical is committed to providing innovative and cost saving products to intensive care and anesthesia departments, while protecting patients and caregivers.
La persona tuvo un comienzo molesto pero divertido para un proyecto artesanal. Comenzó un trabajo artesanal que resultó ser molesto al principio pero entretenido.
Energy is needed for all organisms to carry out essential functions like movement, transport, growth, and cell division. It is released through the chemical process of respiration, which takes place in cells. There are two types of respiration - aerobic respiration uses oxygen to break down glucose and release energy, while anaerobic respiration breaks down glucose without oxygen, releasing less energy. The rate of respiration can be measured and is affected by temperature, doubling as it rises 10 degrees Celsius up to 40 degrees, above which the rate quickly decreases. Respiration and breathing are essential life processes.
1. Este documento presenta una guía para un taller de introducción a la computación, incluyendo actividades sobre presentaciones, el uso de Word, e Internet.
2. La guía detalla dinámicas, ejercicios y materiales para cada sesión con el objetivo de enseñar conceptos básicos de computación de una manera práctica y divertida.
3. Las sesiones cubren temas como los componentes de una computadora, cómo prender y apagar, navegar por Internet, crear documentos en Word, y la importancia de organizar archivos en carpet
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.
The document contains 29 multiple choice questions about various topics related to laptops and wireless technologies. It asks about portable internet connections, Bluetooth interference reduction standards, infrared technology characteristics and uses, troubleshooting laptop keyboard and power issues, RAM upgrades, hard drive and CD/DVD drive failures, battery types, wireless standards like 802.11a/b/g/n, security methods for Bluetooth and WPA, and routine laptop maintenance procedures.
The nervous system has several key functions including controlling the respiratory center and relaying information about stimuli like pain, hunger, and full bladders. The nervous system receives information through nerve cells, interprets it, and causes the body to respond. Nerve cells are made up of dendrites that receive stimuli, an axon that carries impulses, and a nucleus. The central nervous system includes the brain and spinal cord, while the peripheral nervous system includes cranial nerves, spinal nerves, and peripheral nerves. The autonomic nervous system has sympathetic and parasympathetic divisions that control involuntary functions.
HTML5 is the Future of Mobile, PhoneGap Takes You There Todaydavyjones
PhoneGap allows developers to build mobile apps using HTML, CSS and JavaScript instead of relying on platform-specific languages like Objective-C or Java. The document discusses PhoneGap's capabilities and advantages, including writing apps once that run on multiple platforms, using web technologies that are widely known by developers, and leveraging growing browser capabilities on mobile through HTML5. It also outlines PhoneGap's APIs, tools, libraries, and community to help developers get started building cross-platform mobile apps.
1. PhoneGap is a framework that allows developers to build mobile apps using HTML, CSS, and JavaScript instead of platform-specific languages. It works by wrapping web pages in a native container so they can access native device functions and be deployed to app stores.
2. The document discusses PhoneGap features like access to device APIs, cross-platform deployment, and debugging tools. It also covers setting up the PhoneGap development environment and creating a basic "Hello World" app.
3. The document provides code examples for the app manifest, JavaScript to access device functions, and HTML/CSS pages. It also discusses PhoneGap advantages like multiple platform support and disadvantages like lack of support for all native features.
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
This document provides 14 lessons and hacks for building native and mobile web applications using JavaScript. It discusses issues like architecting for multiple platforms and environments, structuring the codebase, detecting the platform, improving performance of animations through CSS transitions, handling garbage collection of images and HTML, supporting touch events, adding sound, and leveraging tools like PhoneGap Build. The tips aim to help developers apply their web skills to build applications that run on both desktop and mobile devices using a single codebase.
Hunter Loftis discusses building mobile apps using HTML5. He recommends first considering whether the app could be built natively or as a hybrid app. If using mobile HTML5, he provides practical guidelines including using micro libraries, limiting DOM updates, storing data locally, keeping code asynchronous, and embracing features like geolocation. The key is to aim low, debug on devices, and have fun building the mobile app.
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
The document provides guidance and best practices for developing mobile apps. It discusses prioritizing platforms based on usage share, targeting the needs and behaviors of different user groups, and the advantages of native apps over HTML5 for user experience. It also covers tools for testing across browsers and devices, such as Ringmark, Modernizr, and network monitoring with ARO. Thorough testing on real networks is emphasized to ensure apps degrade gracefully on unstable connections.
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeCaridy Patino
Caridy Patiño presented on the challenges of building mobile HTML5 applications. Some key challenges include browser fragmentation across devices, network failures, and the need to optimize applications for different runtime environments and adapt them for varying screen sizes and features. Patiño advocated writing applications using a single language, JavaScript, and customizing output per runtime and context while adapting the UI per form factor and feature detection. The goal is to build flexible applications that can run on multiple platforms.
PhoneGap allows developers to build native mobile apps using web technologies like HTML, CSS, and JavaScript. It works by wrapping web content in a native container on each mobile platform, allowing developers to write code once and deploy it across iOS, Android, BlackBerry, and other platforms. PhoneGap uses a plugin architecture that enables accessing native device APIs like the camera, contacts, and geolocation from JavaScript. It supports many mobile browsers and platforms, while providing tools for compiling, debugging, and deploying apps.
The Mobile Web Revealed For The Java Developerbalunasj
This document summarizes a presentation about developing for the mobile web using Java technologies. It discusses native mobile apps, mobile web apps, and hybrid apps. It recommends using a framework like JSF 2 and RichFaces which provides standard-based mobile support today and advanced features in development, allowing the use of as much or as little of the Java EE stack as needed. It also discusses HTML5, CSS3, device detection, and orientation support to optimize mobile web experiences.
This document discusses building native mobile apps using Oracle Application Express (APEX) and web technologies. It describes using PhoneGap to wrap an APEX web app into a native mobile application, allowing it to access device APIs. The document outlines getting started with PhoneGap, integrating it with APEX, domain whitelisting requirements, and the PhoneGap API. It compares building native apps versus mobile web apps, and argues PhoneGap allows developing once for multiple platforms using HTML5, CSS, and JavaScript.
Hybrid Mobile Development with Apache Cordova and Ryan Cuprak
Apache Cordova is used to wrap HTML5 applications into native mobile applications that can access device capabilities. A demo application was shown that used Cordova for the mobile portion and Java EE 7 on the server side. Key technologies discussed included Cordova plugins, RESTful web services, Java API for JSON, and Java API for WebSockets for bidirectional communication between the mobile app and server. jQuery Mobile was also mentioned as a potential UI framework.
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