Wireless Application Protocol (WAP), WAP Key Points, WAP Push, Fragmentation, Features, Browsers and Web Platforms, Web View, Native Web, Packaged and Hybrids Apps, Tools for Mobile Web Development, Emulator and Simulator.
The document discusses various strategies for developing mobile applications, including:
- Creating browser-based, full-screen, or native mobile web apps.
- Considering the user's context when accessing the mobile site.
- Using server-side adaptation to reduce the number of required versions to two: one for low-end devices and one for high-end devices and smartphones.
- Employing progressive enhancement and responsive web design techniques.
It also covers HTML5 form elements, attributes, and validation methods for mobile applications.
The document discusses different techniques for determining a mobile device's location, including GPS, A-GPS, cellular network triangulation, and WiFi positioning. It also describes the W3C Geolocation API standard for querying location from JavaScript and launching the Google Maps app from Android with URL parameters like coordinates and zoom level. Indoor location techniques aim to pinpoint what floor or department within a building a user is located.
The document discusses various topics related to mobile applications such as mobile myths, third-party frameworks, mobile web presence, mobile browsers, native vs HTML5 device features, creating consumable web services, SOAP vs RESTful web services, debugging web services, and types of mobile websites. It provides information on frameworks like Appcelerator Titanium, PhoneGap, MonoDroid, and MonoTouch. It also compares features of native and HTML5 applications and different types of mobile websites.
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.
Native mobile apps are best for performance-intensive or offline apps that require access to device hardware and APIs. They provide the best user experience but must be developed for each platform. Hybrid apps offer cross-platform support but have varying performance and limited hardware access. Mobile web apps have low-friction updates and no app store approval needed but lack offline support and native-level performance. Developers must choose between performance, cross-platform support, and development/maintenance costs for each mobile architecture option.
Designing the foundations of an iOS application is important to reduce the cost of maintenance and evolution. In this session we will see some best practices on how to organize iOS apps both from the point of view of the Xcode project and the source code. Based on the typical iOS client/server application, we will see how to structure the layers ranging from the user interface to the netwrok layer.
Slides presented at #Pragma Conference 2013
http://pragmamark.org/eventi/pragma-conference-2013/
http://pragmamark.org/sessioni/pragma-conference-2013-building-ios-app-project-and-architecture/
Wireless Application Protocol (WAP), WAP Key Points, WAP Push, Fragmentation, Features, Browsers and Web Platforms, Web View, Native Web, Packaged and Hybrids Apps, Tools for Mobile Web Development, Emulator and Simulator.
The document discusses various strategies for developing mobile applications, including:
- Creating browser-based, full-screen, or native mobile web apps.
- Considering the user's context when accessing the mobile site.
- Using server-side adaptation to reduce the number of required versions to two: one for low-end devices and one for high-end devices and smartphones.
- Employing progressive enhancement and responsive web design techniques.
It also covers HTML5 form elements, attributes, and validation methods for mobile applications.
The document discusses different techniques for determining a mobile device's location, including GPS, A-GPS, cellular network triangulation, and WiFi positioning. It also describes the W3C Geolocation API standard for querying location from JavaScript and launching the Google Maps app from Android with URL parameters like coordinates and zoom level. Indoor location techniques aim to pinpoint what floor or department within a building a user is located.
The document discusses various topics related to mobile applications such as mobile myths, third-party frameworks, mobile web presence, mobile browsers, native vs HTML5 device features, creating consumable web services, SOAP vs RESTful web services, debugging web services, and types of mobile websites. It provides information on frameworks like Appcelerator Titanium, PhoneGap, MonoDroid, and MonoTouch. It also compares features of native and HTML5 applications and different types of mobile websites.
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.
Native mobile apps are best for performance-intensive or offline apps that require access to device hardware and APIs. They provide the best user experience but must be developed for each platform. Hybrid apps offer cross-platform support but have varying performance and limited hardware access. Mobile web apps have low-friction updates and no app store approval needed but lack offline support and native-level performance. Developers must choose between performance, cross-platform support, and development/maintenance costs for each mobile architecture option.
Designing the foundations of an iOS application is important to reduce the cost of maintenance and evolution. In this session we will see some best practices on how to organize iOS apps both from the point of view of the Xcode project and the source code. Based on the typical iOS client/server application, we will see how to structure the layers ranging from the user interface to the netwrok layer.
Slides presented at #Pragma Conference 2013
http://pragmamark.org/eventi/pragma-conference-2013/
http://pragmamark.org/sessioni/pragma-conference-2013-building-ios-app-project-and-architecture/
Mobile Applications Development - Lecture 1
Brief History of Mobile
The Mobile Ecosystem
Mobile as the 7th mass medium
This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L'Aquila (Italy).
http://www.di.univaq.it/malavolta
The document discusses tech stacks for startups. It defines tech stacks as including both front-end and back-end components. The back-end contains the business logic and databases that drive an application but are not directly visible to users. Popular back-end frameworks include Laravel, Django, and Ruby on Rails. The front-end includes markup, styling, and client-side programming seen and interacted with by users, such as HTML, CSS, and JavaScript frameworks like AngularJS and ReactJS. The document also discusses considerations for mobile vs web applications and popular mobile development approaches like native, hybrid, and React Native.
iOS Basics
The document provides an overview of iOS, including its architecture, frameworks, design patterns, and application life cycle. It discusses the core OS, core services, media, and Cocoa Touch layers. It describes the UIKit and Foundation frameworks, as well as design patterns like MVC, delegation, and managed memory. It also outlines the application objects, MVC roles, and the stages an app goes through from launch to termination.
Lublin Startup Festival - Mobile Architecture Design PatternsKarol Szmaj
This document discusses mobile app development architecture and design patterns. It covers the out-of-the-box approach using code behind, the model-view-viewmodel (MVVM) pattern, inversion of control (IOC), and command query responsibility segregation (CQRS). It also discusses tools like Fody, Polly, and Cimbalino Toolkit. Tips are provided on using universal apps, Windows 10 XAML, and developing cross-platform with Xamarin. The presentation ends with an invitation for questions.
Firefox OS allows web applications to access device capabilities through standardized web APIs. This bridges the gap between native and web applications. Mozilla is proposing and approving APIs that give web apps access to features like vibration, geolocation, and more. Web apps can also work offline through caching. Developers can create hosted or packaged apps and debug them on the Firefox OS emulator or devices.
Cross Platform Mobile Application ArchitectureDerrick Bowen
Our consulting strategy is built around developing our people into “Trusted Advisors”. Pariveda is different from other consulting firms in the talent that we provide. We grow smart people who can combine knowledge across functional boundaries. Our people choose Pariveda because of the rewarding lifestyle.
This document discusses using HTML5 to build mobile web applications for the iPhone. It introduces HTML5, JavaScript, and frameworks like PhoneGap that allow wrapping web apps as native apps. Key elements of HTML5 for mobile discussed include offline support, canvas, video, geolocation, and advanced forms. UI libraries like JQTouch are presented for building touch-optimized interfaces. The document also covers PhoneGap APIs for native device access from a web app.
The document provides an overview of iOS app development and marketing. It discusses the iOS vs Android market, how to become an iOS developer, iOS app development tools and process, and strategies for marketing iOS apps, including pricing apps effectively, implementing a marketing plan, using in-app purchases, and integrating mobile ads. The document aims to educate people on developing and promoting apps for the lucrative iOS market.
This document discusses HTML5, mobile web, native, and hybrid mobile app development platforms. It provides an overview of each approach and compares them. Key frameworks for HTML5 development are also reviewed, including jQuery Mobile, Sencha Touch, and Trigger.io. Considerations for choosing a platform like supporting multiple devices and iteration speed are examined. The document aims to help make sense of the different mobile development options.
Building Cross-Platform Mobile Apps with PhoneGap and Sencha TouchAxel Buerkle
When it comes to developing cross-platform mobile applications you can choose from a myriad of frameworks. In this presentation we will take a look at two of the most popular mobile frameworks: Sencha Touch and PhoneGap. This combination of tools allows you to write native looking apps that work on iOS, Android, BlackBerry, and Windows Phone.
Xamarin allows developers to write mobile apps using C# and share code across platforms like iOS, Android and Windows. It uses 100% native user interfaces and APIs while allowing extensive code reuse. Developers can use Xamarin.Forms to share common UI code or write native UIs and share business logic. Xamarin apps provide a native user experience along with faster development and lower maintenance costs compared to other cross-platform options.
The document discusses mobile web architecture and hybrid mobile applications. It begins with an introduction to hybrid apps and PhoneGap. It then covers various HTML5 features that are useful for building hybrid apps like users and sessions, location services, cameras, videos, audio and push notifications. It explains the hybrid architecture of combining web views with native wrappers. It also provides examples of implementing location services, cameras, audio/video and push notifications in a hybrid mobile app.
This document provides an overview of the topics that will be covered in a lecture on mobile development for Android. The lecture will discuss mobile devices, operating systems like Android, how mobile apps differ from mobile web apps, cross-platform development, using XML for layouts and Java for programming, device sensors like the camera and GPS, considerations for user experience and interaction design, and the requirements for a group project to build an Android application.
The document discusses the history and current state of mobile application development. It begins with definitions and a brief history starting from the early 1990s. It then covers major platforms and operating systems that have emerged over time like Palm OS, Java ME, Symbian, Android, iOS, BlackBerry, and Windows Phone. Current development approaches including native frameworks and non-native alternatives like PhoneGap and Titanium are also summarized. The document concludes with a discussion of emerging areas like wearable technology and devices like Google Glass and Samsung Galaxy Gear.
The document provides advice for new developers on how to get started building mobile apps. It recommends starting small by building a mobile web app prototype instead of a fully native app, as mobile web apps are easier to develop, can access many native features, and allow developers to test ideas and tweak the app more easily. Once the prototype is complete, it can be expanded into a larger project, turned into a full native or hybrid mobile app, or used as a sample for testing. The document stresses answering questions about the app's purpose and users before designing, and offers tips for user interface and experience design.
The document discusses and compares several mobile application development platforms and frameworks. It describes their technical architectures, supported platforms, strengths, and weaknesses. The platforms covered include native platform-specific development, web apps, hybrid apps, PhoneGap, RhoMobile, Titanium, and MoSync. Each option has advantages and disadvantages depending on the development requirements. For example, native apps have full access to device features but low code reuse, while cross-platform frameworks enable cross-device deployment but lack native performance.
Human: You are an expert at summarizing documents. You provide concise summaries in 3 sentences or less that provide the high level and essential information from the document. Summarize the following document. Begin your response with "[
IBM Web Experience Factory is a tool that automates the creation of mobile web applications using standard technologies like HTML, CSS, and JavaScript. It generates native-looking UIs for smartphones and tablets. The tool's dynamic profiling feature allows building multi-channel applications from a single code base that can be tailored for different device types. Web Experience Factory also supports creating hybrid applications that combine web and native features through tools like PhoneGap.
The document discusses different types of mobile apps including native apps, web apps, and hybrid apps. Native apps are developed specifically for one platform and take full advantage of device features. Web apps run in a browser and have lower performance than native apps due to latency. Hybrid apps install like native apps but are built with web technologies and access device capabilities through plugins. The document also compares factors between mobile and desktop testing like different devices, networks, and operating systems. It provides statistics on mobile operating system market shares and version distributions.
The document provides an introduction to mobile web development. It discusses current trends in mobile computing and differences between desktop and mobile applications. It introduces various mobile web frameworks like jQuery Mobile and describes HTML5, CSS3, and PHP5 for mobile web development. It covers topics like mobile operating systems, browsers, and device categories. It also discusses jQuery Mobile features, compatibility, and limitations.
Development Workshop on ET1, Android and Motorola RhoElementsRomin Irani
This presentation is part of my 2-hour Development Workshop that I conducted at a Motorola Channel Power event. The workshop covered various development options on the ET1 and covered Native Android Development, HTML5 basics and a step by step breakdown of a RhoElements application that integrated device capabilities like barcode scanning.
Mobile Applications Development - Lecture 1
Brief History of Mobile
The Mobile Ecosystem
Mobile as the 7th mass medium
This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L'Aquila (Italy).
http://www.di.univaq.it/malavolta
The document discusses tech stacks for startups. It defines tech stacks as including both front-end and back-end components. The back-end contains the business logic and databases that drive an application but are not directly visible to users. Popular back-end frameworks include Laravel, Django, and Ruby on Rails. The front-end includes markup, styling, and client-side programming seen and interacted with by users, such as HTML, CSS, and JavaScript frameworks like AngularJS and ReactJS. The document also discusses considerations for mobile vs web applications and popular mobile development approaches like native, hybrid, and React Native.
iOS Basics
The document provides an overview of iOS, including its architecture, frameworks, design patterns, and application life cycle. It discusses the core OS, core services, media, and Cocoa Touch layers. It describes the UIKit and Foundation frameworks, as well as design patterns like MVC, delegation, and managed memory. It also outlines the application objects, MVC roles, and the stages an app goes through from launch to termination.
Lublin Startup Festival - Mobile Architecture Design PatternsKarol Szmaj
This document discusses mobile app development architecture and design patterns. It covers the out-of-the-box approach using code behind, the model-view-viewmodel (MVVM) pattern, inversion of control (IOC), and command query responsibility segregation (CQRS). It also discusses tools like Fody, Polly, and Cimbalino Toolkit. Tips are provided on using universal apps, Windows 10 XAML, and developing cross-platform with Xamarin. The presentation ends with an invitation for questions.
Firefox OS allows web applications to access device capabilities through standardized web APIs. This bridges the gap between native and web applications. Mozilla is proposing and approving APIs that give web apps access to features like vibration, geolocation, and more. Web apps can also work offline through caching. Developers can create hosted or packaged apps and debug them on the Firefox OS emulator or devices.
Cross Platform Mobile Application ArchitectureDerrick Bowen
Our consulting strategy is built around developing our people into “Trusted Advisors”. Pariveda is different from other consulting firms in the talent that we provide. We grow smart people who can combine knowledge across functional boundaries. Our people choose Pariveda because of the rewarding lifestyle.
This document discusses using HTML5 to build mobile web applications for the iPhone. It introduces HTML5, JavaScript, and frameworks like PhoneGap that allow wrapping web apps as native apps. Key elements of HTML5 for mobile discussed include offline support, canvas, video, geolocation, and advanced forms. UI libraries like JQTouch are presented for building touch-optimized interfaces. The document also covers PhoneGap APIs for native device access from a web app.
The document provides an overview of iOS app development and marketing. It discusses the iOS vs Android market, how to become an iOS developer, iOS app development tools and process, and strategies for marketing iOS apps, including pricing apps effectively, implementing a marketing plan, using in-app purchases, and integrating mobile ads. The document aims to educate people on developing and promoting apps for the lucrative iOS market.
This document discusses HTML5, mobile web, native, and hybrid mobile app development platforms. It provides an overview of each approach and compares them. Key frameworks for HTML5 development are also reviewed, including jQuery Mobile, Sencha Touch, and Trigger.io. Considerations for choosing a platform like supporting multiple devices and iteration speed are examined. The document aims to help make sense of the different mobile development options.
Building Cross-Platform Mobile Apps with PhoneGap and Sencha TouchAxel Buerkle
When it comes to developing cross-platform mobile applications you can choose from a myriad of frameworks. In this presentation we will take a look at two of the most popular mobile frameworks: Sencha Touch and PhoneGap. This combination of tools allows you to write native looking apps that work on iOS, Android, BlackBerry, and Windows Phone.
Xamarin allows developers to write mobile apps using C# and share code across platforms like iOS, Android and Windows. It uses 100% native user interfaces and APIs while allowing extensive code reuse. Developers can use Xamarin.Forms to share common UI code or write native UIs and share business logic. Xamarin apps provide a native user experience along with faster development and lower maintenance costs compared to other cross-platform options.
The document discusses mobile web architecture and hybrid mobile applications. It begins with an introduction to hybrid apps and PhoneGap. It then covers various HTML5 features that are useful for building hybrid apps like users and sessions, location services, cameras, videos, audio and push notifications. It explains the hybrid architecture of combining web views with native wrappers. It also provides examples of implementing location services, cameras, audio/video and push notifications in a hybrid mobile app.
This document provides an overview of the topics that will be covered in a lecture on mobile development for Android. The lecture will discuss mobile devices, operating systems like Android, how mobile apps differ from mobile web apps, cross-platform development, using XML for layouts and Java for programming, device sensors like the camera and GPS, considerations for user experience and interaction design, and the requirements for a group project to build an Android application.
The document discusses the history and current state of mobile application development. It begins with definitions and a brief history starting from the early 1990s. It then covers major platforms and operating systems that have emerged over time like Palm OS, Java ME, Symbian, Android, iOS, BlackBerry, and Windows Phone. Current development approaches including native frameworks and non-native alternatives like PhoneGap and Titanium are also summarized. The document concludes with a discussion of emerging areas like wearable technology and devices like Google Glass and Samsung Galaxy Gear.
The document provides advice for new developers on how to get started building mobile apps. It recommends starting small by building a mobile web app prototype instead of a fully native app, as mobile web apps are easier to develop, can access many native features, and allow developers to test ideas and tweak the app more easily. Once the prototype is complete, it can be expanded into a larger project, turned into a full native or hybrid mobile app, or used as a sample for testing. The document stresses answering questions about the app's purpose and users before designing, and offers tips for user interface and experience design.
The document discusses and compares several mobile application development platforms and frameworks. It describes their technical architectures, supported platforms, strengths, and weaknesses. The platforms covered include native platform-specific development, web apps, hybrid apps, PhoneGap, RhoMobile, Titanium, and MoSync. Each option has advantages and disadvantages depending on the development requirements. For example, native apps have full access to device features but low code reuse, while cross-platform frameworks enable cross-device deployment but lack native performance.
Human: You are an expert at summarizing documents. You provide concise summaries in 3 sentences or less that provide the high level and essential information from the document. Summarize the following document. Begin your response with "[
IBM Web Experience Factory is a tool that automates the creation of mobile web applications using standard technologies like HTML, CSS, and JavaScript. It generates native-looking UIs for smartphones and tablets. The tool's dynamic profiling feature allows building multi-channel applications from a single code base that can be tailored for different device types. Web Experience Factory also supports creating hybrid applications that combine web and native features through tools like PhoneGap.
The document discusses different types of mobile apps including native apps, web apps, and hybrid apps. Native apps are developed specifically for one platform and take full advantage of device features. Web apps run in a browser and have lower performance than native apps due to latency. Hybrid apps install like native apps but are built with web technologies and access device capabilities through plugins. The document also compares factors between mobile and desktop testing like different devices, networks, and operating systems. It provides statistics on mobile operating system market shares and version distributions.
The document provides an introduction to mobile web development. It discusses current trends in mobile computing and differences between desktop and mobile applications. It introduces various mobile web frameworks like jQuery Mobile and describes HTML5, CSS3, and PHP5 for mobile web development. It covers topics like mobile operating systems, browsers, and device categories. It also discusses jQuery Mobile features, compatibility, and limitations.
Development Workshop on ET1, Android and Motorola RhoElementsRomin Irani
This presentation is part of my 2-hour Development Workshop that I conducted at a Motorola Channel Power event. The workshop covered various development options on the ET1 and covered Native Android Development, HTML5 basics and a step by step breakdown of a RhoElements application that integrated device capabilities like barcode scanning.
Mobile applications Development - Lecture 8
Anatomy of an HTML 5 mobile web app
PhoneGap
This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).
http://www.di.univaq.it/malavolta
Best Practices in Mobile Development: Building Your First jQuery Mobile AppSt. Petersburg College
By the end of 2012, it is expected that more than 80% of the world’s population will have access to a smartphone. Your library users will assume that your library can be accessible from anywhere, at any time, and on any device. Now is the time to be ready! During this hands-on webinar, you will:
- learn the differences between native and web apps.
- understand the various technologies (HTML, CSS, JavaScript) and how they work together to build mobile web apps.
- gain hands-on experience using jQuery Mobile to develop a fully functional mobile-optimized web app.
- have access to a free Web server so you can continue to work/test your project live on the Web.
- continue to work with Jason and Chad so you can have a mentor during and after your project.
HTML5 or Android for Mobile Development?Reto Meier
Android apps or the mobile web? It's often a hard choice when deciding where to invest your mobile development resources. While the mobile web continues to grow, apps and app stores are incredibly popular. We will present both perspectives and offer some suggestions for making the most of each platform.
The document provides an overview of Andrew Christiansen's technical skills and experience as a software developer, including over 12 years of experience developing Windows and web applications using .NET, 11 years of experience in database programming, and 9 years of experience developing iOS and Mac applications. It summarizes his proficiency with languages like C#, C++, Swift, and frameworks like .NET, iOS, and lists relevant personal and professional projects.
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.
This document discusses cross-platform mobile app development using HTML frameworks like jQuery Mobile and Sencha Touch, and PhoneGap. It describes the problem of developing for multiple mobile platforms and devices. The solution presented is to use these HTML frameworks to build apps once that scale across devices, and to use PhoneGap to package them as native apps for distribution. Benefits include access to many platforms without native coding, and leveraging HTML and JavaScript skills. Examples are provided of each framework.
Top 4 Cross Platform tools for Mobile App Developmenttechugo
Scope of Cross Platform App Development is bright as developers and engineers find it easy and interesting to use a single code base to compile and deploy their app on all major mobile platforms. Top 4 Cross Platform Development tools are discussed here in the presentation, with few of their major pros and cons:
The document discusses cross-platform mobile application development. It provides information on mobile operating systems like Android, iOS, Windows Phone OS, Symbian OS, and others. It then discusses cross-platform applications which can be built using a single codebase that runs on multiple platforms. There are two main types: native cross-platform apps which are coded for each platform, and hybrid apps which are built using HTML, CSS, and JavaScript and then wrapped in a native container. Popular frameworks for developing hybrid apps include PhoneGap, React Native, and Flutter. The document also provides details on how hybrid mobile apps work, comparing characteristics of native and hybrid apps, and discussing the PhoneGap framework in more depth.
This document summarizes an experience report on developing mobile apps to access content from an Enterprise Content Management system using different technologies. It discusses using native iOS development with Objective-C, mobile web apps with jQuery Mobile, hybrid apps with PhoneGap, and cross-platform apps with Appcelerator Titanium. It finds that Titanium provides the best balance of native look and feel with multi-platform support and productivity. Future work includes generic browsing apps and business-specific mobile apps.
Introduction to hybrid application developmentKunjan Thakkar
The presentation I prepared for in-house skill building. Introduction to Hybrid development. Understanding different frameworks and choosing the right one.
Here are the top responsible & cross-platform compatible HTML5 frameworks 2016 that may help developers to develop responsive web applications in all possible categories.
GeneralMobile Hybrid Development with WordPressGGDBologna
This document discusses the development of a hybrid mobile app for WordPress.com's reader feature. It was developed using Apache Cordova to access native device features from JavaScript. Performance was improved through caching, local storage, and optimized images. Issues arose from slower browsers and platforms like BlackBerry 7 and iPhone 4. Future plans include using the WordPress REST API and developing native apps.
This document discusses different approaches to mobile web development, including native apps, mobile web apps, and hybrid apps. It describes native apps as using device APIs and being optimized for performance but costly to maintain across platforms. Mobile web apps use HTML, CSS, and JavaScript and are low-cost with broad compatibility but lack access to device features. Hybrid apps combine web technologies with native wrappers to access device APIs and offer "write once, run everywhere" capabilities. The document also covers mobile development strategies, frameworks, and tools like Cordova that can help build hybrid mobile apps.
The document discusses strategies for architecting mobile solutions for enterprises. It covers pillars of a mobile strategy including defining a strategy, development costs, and focusing on audiences. It also discusses mobile sites versus native applications, highlighting tradeoffs between the two approaches. Mobile sites can be built using HTML5 and jQuery Mobile to work across platforms with progressive enhancement. Native applications require developing for specific platforms like iOS and Android. Cross-platform frameworks like PhoneGap can help develop native apps using HTML5.
European SharePoint Conference: Mobile Applications for SharePoint using HTML5Christian Heindel
The document discusses using HTML5 to create mobile applications for SharePoint. It provides an overview of different mobile platforms and browsers, HTML5 features and frameworks for mobile development. It also addresses limitations of using HTML5 with SharePoint, such as validation issues. Additionally, it covers approaches for redirecting to mobile versions of SharePoint sites from iOS devices and demonstrates a mobile HTML5 SharePoint site.
European SharePoint Conference: Mobile Applications for SharePoint using HTML5
Mobile applications chapter 4
1. Mobile Applications
Chapter 4
BY
MR. A. B. MOMIN
ASSISTANT PROFESSOR
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING
ATS’S, SANJAY BHOKARE GROUP OF INSTITUTES, MIRAJ
2. Client Side Detection
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• Client side (in the browser), detect features, provide fallbacks.
• HTML, from its origins, has included a beautiful fallback
mechanism that has helped the Web to grow without big
incompatibilities.
3. Assumptions
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• If an element is known but one or more of its attributes are unknown, the element will
be rendered properly and the unknown attributes will just be ignored.
• If a CSS selector or CSS at-rule is unknown, the whole declaration will be ignored.
• If a CSS selector is valid but a style is unknown, only that definition will be ignored.
• If a CSS selector and a style are valid, but the value for the style is unknown, only that
definition will be ignored.
• If the same CSS style on the same element is declared more than once, the last valid
declaration will be used.
4. Fallbacks
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• HTML Fallbacks
• CSS Fallbacks
• Javascript Fallbacks
5. Server Side Detection
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• Server side detection is based on web server.
Fig. 4.1: When the user is accessing our website via a cloud-based browser or a transcoder, we will not
receive the request directly from the user’s mobile device.
6. Mobile User Agent
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• Mozilla/5.0 (SymbianOS/9.2; U; Series60/3.1 NokiaN95/20.0.015 Pro file/MIDP-2.0
Configuration/CLDC-1.1) AppleWebKit/413 (KHTML, like Gecko) Safari/413
• Nokia3510i/1.0 (05.30) Profile/MIDP-1.0 Configuration/CLDC-1.0
• Mozilla/5.0 (Linux; U; Android 4.0.4; en-gb; GT-I9300 Build/IMM76D) AppleWebKit/534.30
(KHTML, like Gecko) Version/4.0 Mobile Safari/ 534.30
• BlackBerry8100/4.2.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 Vendor ID/125
• Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like
Gecko) Version/6.0 Mobile/10A405 Safari/8536.25
• Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM;
Touch; NOKIA; Lumia 920)
• Mozilla/5.0 (Linux; Android 4.1.1; Nexus 7 Build/JRO03D) AppleWebKit/535.19 (KHTML, like
Gecko) Chrome/18.0.1025.166 Safari/535.19
• UP.Browser/3.04-TS14 UP.Link/3.4.4
7. How to read header
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
In Java Servlets or JSP, we read a header using:
request.getHeader("header_key")
And in PHP:
$_SERVER["header_key_large"]
In ASP.NET with C# or Visual Basic, we have a Headers collection and public members
for most of the common headers:
// This is the C# version
Request.Headers["header_key"]
' This is the VB version
Request.Headers("header_key")
8. Header Key or Field
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
User-Agent: The name of the browser or platform that originated the request
Accept: A comma-separated values (CSV) list of MIME types accepted
by the browser
Accept-Charset: A CSV list of charsets accepted by the browser (e.g., ISO-8859-1,
UTF-8)
Accept-Language: A CSV list of preferred languages in the browser
Accept-Charset: A CSV list of compression methods available for the response
(e.g., gzip, deflate)
9. Images
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• Insert image using <img> tag in html.
• Use SVG(Scalable Vector Graphics), canvas element and CSS for handle images.
• Standard format for image: .jpeg, .gif, .png
• Support animation format, 3D format, animation png.
Using the img Element:
• Buttons
• Icons for links or menus
• Backgrounds
• Visual separators
• Titles
10. Image format compatibility table
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
11. Video
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• Serving video content to mobile devices is very important for many portals and content
providers.
• We can provide multimedia content in three formats:
• Downloadable content
• On-demand streaming content
• Live streaming content
• Containers and Codecs
• Video and audio files come with two technologies: a container format and one or more codecs
inside.
• The container is what you usually see more frequently: the file extension, such as .mov or .mpeg.
• The HTML5 video Element:
<video width="300" height="200" src="video.mp4"></video>
12. Video Layout in browser
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
13. HTML5 Video Compatibility Table
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
14. Audio
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
Audio is another media element that we can use in our mobile websites. HTML5 includes
a new audio element that is almost the same as the video element in terms of attributes and
compatibility.
While some mobile browsers support WAV and Vorbis audio files, they all work well with the MP3 audio
format. Therefore, we can usually use only one source definition with the MP3 audio file, such as:
<audio width="300" height="50" controls src="audio.mp3">
Audio playing not available.
<a href="audio.mp3">Download the file</a>
</audio>
15. HTML5 Audio Compatibility Table
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
16. UI Frameworks
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• Sencha Touch
• jQuery Mobile
• Enyo
• Montage
• iUI
• jQTouch
17. Sencha Touch
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• Sencha Touch is a JavaScript-based framework for mobile app development.
• It has a free commercial license and it is compatible with iOS, Android, BlackBerry 7/10, and
Windows Phone 8.
• Sencha provide sencha sdk platform for make app.
• It supports 50 components and built in MVC with javascript.
• A basic “Hello World” application in Sencha Touch will look like this:
Ext.application({
name: 'Sencha Touch Demo’,
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [
{
title: 'Hello World’,
iconCls: 'home’,
html: 'Welcome to Sencha Touch’
}]});}});
18. jQuery Mobile
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• jQuery Mobile is a cross-platform UI framework optimized for touch smartphones.
• jQuery Mobile works over jQuery and it manages only the user interface of our web apps.
• jQuery Mobile is compatible with more than 10 different platforms, including all the modern smartphone
and tablet browsers.
• jQuery Mobile manages a series of rich controls, as well as page navigation and transitions using CSS3
animations.
• It is compatible with Apache Cordova/PhoneGap apps.
• Example:
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Hello World</h1>
<a href="#">Action</a>
</div>
<div data-role="content">
<ul data-role="listview" data-filter="true">
<li>Option 1
<li>Option 2
<li>Option 3
<li>Option 4
</ul>
</div>
<div data-role="footer" data-position="fixed" data-theme="e">
<h4>O'Reilly Media</h4>
</div>
</div>
19. Enyo
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• Enyo is a cross-device (desktop, tablet, and phone), cross-platform web app UI framework.
• The framework originated with the HP Palm team from webOS, but after the open sourcing of
that platform the Enyo effort was converted to a multiplatform solution, including support for
iOS, Android, Firefox, Chrome, Windows Phone, BlackBerry, and more.
• Enyo is modular and component-based and the basic core is only 25 KB zipped, making it a
mobile-optimized framework.
• It has a range of useful widgets, including image carousels and date pickers, and we can
encapsulate our own controls really easily.
20. Montage
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• Montage is a complete web app development framework, including a client-side Java‐Script
library and a server-side Node.js library.
• One of the big advantages of Montage is the usage of a two-way data binding mechanism
using custom HTML5 data.
• It also includes components and templates, data persistence, and event management.
• Montage is an open source project created by Motorola Mobility, now owned by Google.
• One of the key targets of Montage is Apache Flex (formerly Adobe Flex) developers trying to
move into the HTML5 world.
21. iUI
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• iUI was one of the first libraries developed for iPhone-style application development.
• iUI is a very simple-to-use, nonintrusive JavaScript library, including CSS and assets (generally
backgrounds) that emulate the native iPhone application controls, animations, and application
workflow.
• The main features are:
• No JavaScript coding required
• Extends the behavior of standard HTML markup
• Overrides links and forms with Ajax requests
• Updates the page with smooth iPhone transitions with no code
• Other advanced features that iUI supports include:
• Modal dialog pop-ups
• Form designs
• Emulation of native form controls
• Stripped tables
• Right (>) toolbar button
22. jQTouch
Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
• jQTouch is a jQuery plug-in for iPhone web development that produces similar results to iUI,
but with more powerful graphics and animations.
• It does require some JavaScript code to initialize the page.
• The supported features include:
• Native WebKit animations using jQuery methods
• Callback events
• Flexible themes
• Swipe detection
• Extensions: floaty bar, geolocation, offline capability
• Visual controls
• Animations