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.
Building Mobile Applications with IonicMorris Singer
The document provides an introduction and overview of the Ionic framework for building mobile apps. It discusses that Ionic builds on existing technologies like AngularJS, Cordova plugins, and a layout engine. It reviews Ionic's technology stack including AngularJS, UI Router for routing, and Ionic components. It demonstrates how to generate a starter app, and shows examples of lists, buttons, icons, and touch gestures in Ionic.
"Mobile themes for Wordpress, QR codes, and custom shortURLs". Delivered by Chris Traganos, Web Developer at Harvard Public Affairs & Communications, on May 18th, 2010 at Lamont Library, Forum Room.
Web access for users with disabilities is an important goal and challenging problem for web content developers and designers.
Essential open source api projects to ease the developing & testing for web accessibility.
This document discusses Lotus software on mobile devices and developing for mobile. It covers the history of Lotus mobile clients, including Lotus Traveler, Sametime and Connections. It also discusses using geolocation, forms and working offline in mobile development. Resources listed include the WURFL database for device detection, CSS media queries, and HTML5 features like geolocation, forms attributes and the cache manifest for offline work.
Making your site mobile-friendly - DevCSI Reading 21.07.2010Patrick Lauke
Extended version of my "Making your site mobile-friendly" talk, including a short look at native applications vs web apps, for the UKOLN DevCSI event "Developing for Mobile Applications in Education" in Reading http://www.ukoln.ac.uk/events/devcsi/mobile_applications/
Making your site mobile-friendly - Ignite Manchester 01.03.2010Patrick Lauke
The document discusses making websites mobile-friendly by either creating a separate mobile site with a different domain (like m.example.com) or using a single adaptive site with fluid layouts, viewport meta tags, and CSS media queries to dynamically adjust the layout for different screen sizes. It recommends minimizing requests through techniques like CSS sprites and combining files to optimize performance on mobile networks.
An overview of the Cappuccino rich client framework. Cappuccino extends the legacy of NeXTSTEP and Mac OS X desktop development to the web, creating cross-platform, cross-browser web applications that look and feel like modern Mac OS X desktop applications.
Smart Phone Development Using Web Technologies
The document discusses various options for developing smartphone applications using web technologies, including PhoneGap and Titanium. PhoneGap allows developing apps using HTML, CSS, and JavaScript that run on multiple platforms, but performance is slower than native apps and some native features are not accessible. Titanium compiles JavaScript to run natively on each platform, allowing native-like performance and access to full device APIs, but with a less familiar development model compared to web development. Overall, PhoneGap is better for prototyping and simple cross-platform apps, while Titanium enables better performance for native-like apps.
An overview of difference between Hybrid Mobile Applications, Native Applications and Mobile Web Apps. List of JavaScript frameworks that we used for Hybrid Mobile Apps.
สไลด์ประกอบการบรรยายในหัวข้อ "การพัฒนา Web Application ดวยเทคโนโลยี Open Source" สำหรับบุคคลทั่วไปของศูนย์เทคโนโลยีอิเล็กทรอนิกส์และคอมพิวเตอร์แห่งชาติ ในหลักสูตร LAMP training
This document discusses tools and frameworks for developing iPhone and iPod touch applications. It introduces the iPhone/iPod touch hardware features and describes different types of applications that can be created, including native, web, external platform, and jailbroken apps. It also outlines the steps to set up development environments on Windows and Mac systems. Finally, it provides examples of using the iUI framework to build simple web apps with iPhone interfaces.
The document discusses mobile app development from a web developer's perspective. It covers topics such as web apps vs native apps, technologies for mobile development like HTML5 and frameworks, and specific techniques for mobile like viewport scaling, geolocation APIs, and offline storage. The document provides examples of code for implementing these mobile techniques.
This document discusses how to create mobile apps that feel native using only web technologies. It covers supporting features in Mobile Safari like local storage, CSS3 features, and geolocation. It recommends using web technologies over native due to quicker iteration times. Specific techniques covered include detecting browser type, adding home screen icons, startup images, going full screen, and viewport settings. The document also discusses frameworks like jQuery Mobile but notes native DOM APIs may be sufficient. It covers input features, touch vs click, animations, locking orientation, and performance tips. It acknowledges limitations of Android and webOS and recommends testing on actual devices. Finally, it discusses hybrid mobile frameworks like PhoneGap and Titanium that allow developing for multiple platforms using one code
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.
This document provides an overview of mobile web development best practices. It discusses viewport settings and using media queries to optimize layout for different screen sizes. It also recommends techniques like inline images, caching, and local storage to improve performance on mobile. The document encourages front-end logic and feature detection over device detection. Overall, it offers guidance on designing responsive websites that provide a good user experience across diverse mobile platforms and browsers.
The document discusses the state of the smartphone market in 2008 and provides guidance on developing applications for various smartphone platforms. It notes that in 2008, Nokia, RIM, and Samsung dominated the global smartphone market, with Apple growing 245%. It then provides an overview of tools and considerations for developing apps for platforms like iPhone, Android, Blackberry, and mobile Flash, noting that HTML, CSS, and JavaScript can be used to develop for many platforms. Challenges and differences between platforms like screen sizes, SDKs, and programming languages are outlined.
The document discusses building mobile web applications using HTML5. It covers topics like HTML5 features that are well supported on mobile browsers like forms, communication, canvas, geolocation, audio and video. It provides examples of using CSS3 for styling, animation and media queries for responsive design. It also discusses utilizing HTML5 APIs for advanced interactions, graphics, offline support, performance and accessing device capabilities.
PhoneGap allows developers to build mobile apps using standard web technologies like HTML, CSS, and JavaScript. It works by embedding a webview component within a native container, and provides a bridge for JavaScript to access some device APIs. PhoneGap has grown a large community and supports many mobile platforms. While it allows cross-platform development, apps are still packaged natively and some limitations remain. The future roadmap includes improved plugin support and new features like web sockets and background services to enhance the capabilities of hybrid mobile apps.
The document discusses various techniques for developing mobile web applications, including:
1. Using viewport meta tags to control layout on different screen sizes.
2. Storing cached content in Web Storage instead of cookies for better performance on mobile.
3. Loading images lazily via Ajax to improve perceived performance.
4. Detecting device orientation changes and resizing content appropriately for portrait and landscape modes.
This document discusses HTML5 on mobile devices. It begins by explaining why mobile web is growing and why HTML5 is well-suited for mobile. It then provides an overview of what HTML5 is and examples of features like forms, multimedia, geolocation that can be used on mobile. It also discusses considerations for mobile web development like responsive design and frameworks. The document recommends tools for mobile debugging and testing performance.
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.
slides of a presentation about cross-platform mobile app development I gave at MobileTechCon 2010 in Mainz (Germany).
Links and additional information on the related blog post at http://HeikoBehrens.net/2010/10/11/cross-platform-app-development-for-iphone-android-co-—-a-comparison-i-presented-at-mobiletechcon-2010/
The document summarizes key aspects of building Firefox OS to address issues with the mobile web. Firefox OS is Mozilla's attempt to make the web a first-class citizen on phones and tablets by starting with the web stack rather than trying to add the web to an existing OS. It has launched in several countries and aims to be an affordable alternative to feature phones and closed platforms. The architecture is based on Linux, Gecko, and web technologies. It provides predictable HTML5 support and addresses performance, fragmentation, security and hardware access through its design and web APIs.
Creating mobile apps without native codeJoakim Kemeny
The document discusses creating mobile apps without using native code. It describes how mobile apps today are often created natively, but that native apps have disadvantages like being expensive to create and only working on specific platforms. The document then presents alternatives like mobile web apps and hybrid apps. It provides examples of how to build a basic mobile web app using HTML, CSS, and responsive design techniques like viewports and media queries to make the app work well on different devices.
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
HTML 5 and associated technologies like CSS3 are making the mobile web more capable. Key points include:
- HTML5 introduces tags for audio, video, offline storage and caching that allow richer mobile web applications.
- CSS3 adds features like shadows, gradients, rounded corners, transitions and 3D transforms that improve visuals on mobile.
- Gesture events in WebKit allow detection of swipes, pinches and other gestures on touchscreens.
- HTML5 APIs for local storage, databases and the application cache enable offline functionality in mobile web apps.
- While support varies, most mobile browsers now support many HTML5 and CSS3 features, allowing enhanced mobile web experiences.
This document discusses how to build iPhone apps using only web technologies like HTML5, CSS3, and JavaScript without relying on native iOS frameworks or the App Store. Key points covered include how to create offline-capable apps using the cache manifest, emulate touch events with JavaScript, make the app feel native through CSS transforms and meta tags, and detect device capabilities. The example rubiks cube app demonstrates these techniques to create an offline-capable puzzle game experience on iPhone similar to a native app.
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
7. HTML5 ?
• Even Google was not rich enough to support all of the different mobile
platforms from Apple’s AppStore to those of the BlackBerry, Windows
Mobile, Android and the many variations of the Nokia platform
- Vic Gundotra, Google Engineering VP
• 2010년 6월 24일에 공지된 행정안전부 고시 “제 2010-40호”
국민들이 다양한 모바일 기기를 사용할 수 있도록 ‘모바일 앱(App)’ 방
식보다 ‘모바일 웹(Web)‘ 방식을 표준으로 권고
모바일 웹 방식 서비스 개발을 위한 기술 표준지침 마련
3
8. HTML5 Key Elements for Mobile
• Offline : LocalStorage, Web Database,
App Cache
• : Video, Audio, Cnavas
• : Advanced Forms
• : GeoLocation
12. JS API
• Client Side Storage
- Web SQL Database
- App Cache (cache-manifest)
- Web Storage (localStorage, sessionStorage)
• Communication
- Web Sockets
- Web Workers
• Desktop experience
- Notifications
- Drag & Drop API
• Geolocation
13. HTML
• Semantics (New tags, Link Relations,
Microdata)
• Accessibility (ARIA roles)
• Web Forms 2.0 (Input Fields)
• Multimedia (Audio Tag,Video Tag)
• 2D & 3D drawing (Canvas, WebGL, SVG)
19. iPhone Web App 1
• css
<link rel=”stylesheet” type=”text/css” href=”iphone.css” media=”only
screen and (max-width: 480px)” />
<link rel=”stylesheet” type=”text/css” href=”desktop.css” media=”screen
and (min-width: 481px)” />
• User Agent
Mozilla/5.0 (iPad; U CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML,
like Gecko) Version 3.0 Mobile/4A93 Safari/419.3
Mozilla/5.0 (iPhone; U CPU like Mac OS X; en) AppleWebKit/420+
(KHTML, like Gecko) Version 3.0 Mobile/1A543 Safari/419.3
Mozilla/5.0 (iPod; U CPU OS 3_2 like Mac OS X; en) AppleWebKit/
531.21.10 (KHTML, like Gecko) Version 4.0.4 Mobile/7B334B Safari/531.21
javascript : if((navigator.userAgent.match(/iPhone/i)) {}
php : if(strpos($_SERVER[‘HTTP_USER_AGENT’], ‘iPod’) !== false) {}
20. iPhone Web App 2
• iPhone Browser & viewport
iPhone : 320 x 480px
Status Bar : 20px
URL Bar : 60px
: 320x356px
Viewport : 980px
<meta name=‘viewport‘
content=‘width=device-width;
initial-scale=1.0;
user-scalable=no’ />
Button Bar : 44px
23. iPhone Web App 5
• Orientation
function checkOrientation() {
switch (window.orientation) {
case 0: alert(‘Orientation: Portrait’); break;
case 90:
case -90: alert(‘Orientation: Landscape’); break;
}
}
• Online
function checkOnline() {
if (navigator.onLine) {
alert(‘There is a network connection’);
else {
alert(‘There is no network connection’);
}
}