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
Using Cool New Frameworks in (Mobile) Domino AppsTeamstudio
Did you know there's an abundance of cool CSS and JS frameworks out there? Have you ever wanted to find out how you can use them in your own (mobile) Domino apps? Theo Heselmans shows real world applications from his customers using some of these powerful frameworks inside Domino. Explore with us on how they integrated Bootstrap, Ratchet.js, Knockout.js, Backbone.js, Underscore.js, jQuery.js and more!
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.
Engage - Expanding XPages with Bootstrap Plugins for ultimate usabilityJohnny Oldenburger
Develop highly user friendly responsive web (XPages) applications by making use of Bootstrap and JQuery Plugins as Select2, DateTimePickers, Multiselect, Confirmation, Modals, Popovers and Notifications for ultimate usability based on the latest versions of these plugins, including solutions for the AMD problem. Expect more of XPages Applications and go beyond the basics and create applications that nobody ever thought possible using XPages. Comprehensive demos of several plugins are shown within an XPages application.
Mobile applications development - why should you start learning it right now?Natalija Rodionova
Mobile apps development- why should you start learning it right now?
- 7 reasons why should you start learning how to develop a mobile app?
- How much do mobile apps developers earn?
- 10 main instruments of a mobile app developer
- 5 technologies you should learn to be able to develop mobile
- 7 advices to start learning mobile apps development
- 5 industries which need mobile apps developers
Using Cool New Frameworks in (Mobile) Domino AppsTeamstudio
Did you know there's an abundance of cool CSS and JS frameworks out there? Have you ever wanted to find out how you can use them in your own (mobile) Domino apps? Theo Heselmans shows real world applications from his customers using some of these powerful frameworks inside Domino. Explore with us on how they integrated Bootstrap, Ratchet.js, Knockout.js, Backbone.js, Underscore.js, jQuery.js and more!
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.
Engage - Expanding XPages with Bootstrap Plugins for ultimate usabilityJohnny Oldenburger
Develop highly user friendly responsive web (XPages) applications by making use of Bootstrap and JQuery Plugins as Select2, DateTimePickers, Multiselect, Confirmation, Modals, Popovers and Notifications for ultimate usability based on the latest versions of these plugins, including solutions for the AMD problem. Expect more of XPages Applications and go beyond the basics and create applications that nobody ever thought possible using XPages. Comprehensive demos of several plugins are shown within an XPages application.
Mobile applications development - why should you start learning it right now?Natalija Rodionova
Mobile apps development- why should you start learning it right now?
- 7 reasons why should you start learning how to develop a mobile app?
- How much do mobile apps developers earn?
- 10 main instruments of a mobile app developer
- 5 technologies you should learn to be able to develop mobile
- 7 advices to start learning mobile apps development
- 5 industries which need mobile apps developers
IBM ConnectED 2015 - AD302 - Responsive Application Development for XPagesbeglee
Bootstrap has recently been integrated into the XPages core framework, allowing the creation of sleek, polished, responsive XPages applications. Using this new feature your apps will look great, with a consistent look and feel from the web browser to the mobile experience on phones & tablets. This session will demonstrate all of the tools now at your disposal, such as the Bootstrap-ized XPages controls, icons, fonts, CSS, new controls, themes and jQuery! We'll show you why this new feature is one that you can't ignore.
Building for cross-platform has moved beyond being an option, and on to being a necessity. Studies show that developers are increasingly turning to the web to build applications that run across platforms but it seems to choose "web" is only the first of a very many decision. NativeScript, TypeScript, React.js, React native, Angular, Ionic, SPA, PWA, and the list goes on. In this light-hearted yet informative session, we'll discuss the woes of being a developer working with web technologies, and some of the solutions to reaching all your users with a single cross-platform app.
Slides of my hands-on lab at MAX 2011.
They explain how to optimize an HTML5 site running on a WEM instance, first quickly introducing HTML5 an WEM. Then, optimizing the CSS and JS inclusions, using the new Client Library feature. And finally, setting up the Dispatcher cache to deliver the right HTTP headers.
With the commercialization of the web, web development has become one of the blooming industries. Learning web development enables you to create attractive websites using HTML, CSS, JQuery and JavaScript. Web development includes developing simple and complex web-based applications, electronic businesses and social networking sites. Being a web developer you can deliver applications as web services which is only available in desktop applications.
Covering:
- What is a Content Repository and how does it work
- Comparison to relational database
- Why stable APIs are important and what to do if they are not
- Benefits of the open and transparent development
- Oh boy.. can I see it already!
- Why Sling is called Sling
- Various ways to deploy and develop code
- Deployment options and clustering
One of the key features of JavaFX 2.0 is having full-fledged embedded browser. This enables JavaFX apps to embed web contents, and also to work together with HTML5 apps.
This session focuses on JavaFX's web component, WebEngine, and show how JavaFX can work together with web technologies (HTML/CSS/JavaScript) by using demos and sample codes.
(Session JS1-13 / Apr 4th, JavaOne Tokyo 2012)
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.
The Cordova framework
Recurrent app architecture
Cordova CLI
Debugging Cordova applications
My development environment
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016.
http://www.ivanomalavolta.com
A Gentle introduction to Web Development & DjangoPRASANNAVENK
I recently delivered a talk on the topic Introduction to Web development and Django at 5 Day Industrial training programme on Free Software organized by Free Software Foundation Tamil Nadu. This is the presentation I created and used for the talk, which is created using HTML5 and reveal.js.
Covering:
- Mobile Device Capability and Device Group
- Configurable roll-out configuration for LiveCopy
- ClientLibs for web sites
- HTML5 Video Component and Transcoding Pro!les
- Work%ow-based reverse-replication
- Work%ow-based UGC moderation
- Integration with SiteCatalyst and Events Tracking JS
IBM ConnectED 2015 - AD302 - Responsive Application Development for XPagesbeglee
Bootstrap has recently been integrated into the XPages core framework, allowing the creation of sleek, polished, responsive XPages applications. Using this new feature your apps will look great, with a consistent look and feel from the web browser to the mobile experience on phones & tablets. This session will demonstrate all of the tools now at your disposal, such as the Bootstrap-ized XPages controls, icons, fonts, CSS, new controls, themes and jQuery! We'll show you why this new feature is one that you can't ignore.
Building for cross-platform has moved beyond being an option, and on to being a necessity. Studies show that developers are increasingly turning to the web to build applications that run across platforms but it seems to choose "web" is only the first of a very many decision. NativeScript, TypeScript, React.js, React native, Angular, Ionic, SPA, PWA, and the list goes on. In this light-hearted yet informative session, we'll discuss the woes of being a developer working with web technologies, and some of the solutions to reaching all your users with a single cross-platform app.
Slides of my hands-on lab at MAX 2011.
They explain how to optimize an HTML5 site running on a WEM instance, first quickly introducing HTML5 an WEM. Then, optimizing the CSS and JS inclusions, using the new Client Library feature. And finally, setting up the Dispatcher cache to deliver the right HTTP headers.
With the commercialization of the web, web development has become one of the blooming industries. Learning web development enables you to create attractive websites using HTML, CSS, JQuery and JavaScript. Web development includes developing simple and complex web-based applications, electronic businesses and social networking sites. Being a web developer you can deliver applications as web services which is only available in desktop applications.
Covering:
- What is a Content Repository and how does it work
- Comparison to relational database
- Why stable APIs are important and what to do if they are not
- Benefits of the open and transparent development
- Oh boy.. can I see it already!
- Why Sling is called Sling
- Various ways to deploy and develop code
- Deployment options and clustering
One of the key features of JavaFX 2.0 is having full-fledged embedded browser. This enables JavaFX apps to embed web contents, and also to work together with HTML5 apps.
This session focuses on JavaFX's web component, WebEngine, and show how JavaFX can work together with web technologies (HTML/CSS/JavaScript) by using demos and sample codes.
(Session JS1-13 / Apr 4th, JavaOne Tokyo 2012)
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.
The Cordova framework
Recurrent app architecture
Cordova CLI
Debugging Cordova applications
My development environment
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016.
http://www.ivanomalavolta.com
A Gentle introduction to Web Development & DjangoPRASANNAVENK
I recently delivered a talk on the topic Introduction to Web development and Django at 5 Day Industrial training programme on Free Software organized by Free Software Foundation Tamil Nadu. This is the presentation I created and used for the talk, which is created using HTML5 and reveal.js.
Covering:
- Mobile Device Capability and Device Group
- Configurable roll-out configuration for LiveCopy
- ClientLibs for web sites
- HTML5 Video Component and Transcoding Pro!les
- Work%ow-based reverse-replication
- Work%ow-based UGC moderation
- Integration with SiteCatalyst and Events Tracking JS
Incorporating Web Services in Mobile Applications - Web 2.0 San Fran 2009Aduci
Most of the APIs available to developers today have been coded for robust web server integration with little thought of incorporation into light weight mobile applications. This talk will look at the pitfalls of using these APIs directly and methods of incorporating APIs, such as Amazon, eBay, Google and other API sets into mobile and lightweight applications, while maintaining a quality user experience.
First we will review the challenges of incorporating these APIs including;
* Retrieval of large data sets
* Multiple round trip communications
* Security issues of calls
* Display of information
For each of these challenges we will show specific examples with sample functionality, API flows, and XML blocks. Some examples will include web user authentication techniques, media retrieval lists, and interface usability issues.
Once we understand the challenges of incorporating various web APIs we will then look at techniques for handling APIs properly including caching methods, large data set handling, paging, filtering, just in time techniques, information on demand and speed testing. Throughout we will look at pseudo code, and detailed examples of real life examples.
With the proper techniques mobile applications can take advantage of a wide array of third party and home grown APIs without degradation of performance, memory, and overall usability.
OnConnectionLost: The life of an offline web application - JSUnconf 2015Johannes Thönes
Can you use HTML5 technologies to build a web application which works offline? Without a reliable internet connection? Let’s say for two weeks?
That is what our client asked us to build. Their people will use the application on the road; reading documents, entering results and uploading pictures. And then they come home, connect to the internet and sync their results with their colleagues’.
AppCache, IndexedDB and File API allow us to store the application and its data in the browser. However, they require us to re-think assumptions we used to make in the web: Is the client or the server the master of the data? How can we handle updates of the application? What data do we need to download beforehand? How do you test offline automatically? And what does offline mean anyway?
We want to show you what we discussed and how we answered these questions.
A look at how HTML5 aims to plug the holes that Flash has been filling in browsers for the last decade, looking at both HTML5 and non-HTML5 JavaScript APIs.
For Flash Brighton in Feb 2010.
Updated: NW.js - Desktop Apps with JavascriptRalf Schwoebel
My updated presentation from the Javascript MeetUp in Berlin, 20th of April: status of our hybrid development world.
This expands the presentation I held last year on EnterJS and gives updates to releasing a commercial desktop app build with NW.js (formerly known as Node-Webkit).
Business with Javascript Apps on the Desktop: possible!
A simple and quick overview of the process of App development for mobile phones.
This presentation is a solid starting point for every IT department, think about App development for smartphones. It gives you a budget idea and the first skeleton to put your plan into flesh and blood!
This presentation shows you, how we on https://orga.zone/ use the AppCache manifest of HTML5 to create business apps and provide an AppStore-free solution for solid business applications. This presentation is from July 2005: the FrankfurtJS meetup and it is in english
Web development is evolving at a breakneck speed every passing year. New website technologies are being discovered regularly as developers explore new ways of innovation.
To make it easier for you, I have analyzed the shifts across industries and created an ultimate list of some of the latest web development trends in 2022.
Luc Bors,
There are many ways to bring your applications to mobile platforms. The key to success always is that you design for mobile first. Next step is to bring this design to the device. In this session you will learn the strategies and tools that are available in Oracles Fusion Middleware stack to implement a state of the art Mobile Application.
A talk I was asked to give on the various options for building mobile applications / getting content onto mobile devices.
I chose to organize it as gradient surveying the spectrum from web to native, all the stuff in between. Unfortunately for native I've only had experience with iOS so I couldn't really speak towards the other platforms.
I do think that non native solutions can take care of 95% of the use cases, and this gap will only narrow as time goes on - I'm thinking back to early 2010 when cross platform SDKs like Appcelerator Titanium came onto the scene and how much has changed.
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:
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.
Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...Ivano Malavolta
Slides of my invited talk at the 2nd workshop on Quality and Reliability Assessment of Robotic Software Architectures and Components (QRARSAC), co-located with the International Conference on Robotics and Automation (ICRA 2023).
Abstract of the talk. Today robotic systems are central to many industrial sectors, such as logistics, autonomous warehousing, and healthcare. If on one side ROS is helping roboticists by providing a standardized communication platform for robotic systems, on the other side ROSsystems are getting more and more large and complex, thus making it extremely difficult to ensure their level of quality, e.g., in terms of performance, security, energy efficiency, testability, maintainability. Improving the quality of robotic systems is not a new activity, but in this talk, we tackle it from a different perspective: we look at them from a software architecture perspective. In this talk, I will walk you through a series of experiments we conducted at the Vrije Universiteit Amsterdam targeting the architecture of ROS systems, we will discuss some architectural tactics for ROS systems, and will close with an overview of our open-source tool for automatically executing experiments on robotics software.
The slides of a short presentation I gave about my experience about working in the context of EU grants. It contains tips and tricks for the before/during/after phases of a EU project.
The Green Lab - Research cocktail @Vrije Universiteit Amsterdam (October 2020)Ivano Malavolta
The slides of my presentation about the Green Lab at the event called Research Cocktail (October 2020). The event is organized by the Computer Science Department of the Vrije Universiteit Amsterdam.
The source code of our tools and the replication package of our experiments performed in the Green Lab can be found here: https://github.com/S2-group
For further details about the Green Lab and all our activities around it, you can contact me at i.malavolta@vu.nl
Navigation-aware and Personalized Prefetching of Network Requests in Android ...Ivano Malavolta
Slides of my presentation at the NIER track of the 41th International Conference on Software Engineering (ICSE 2019).
The paper is available here: http://www.ivanomalavolta.com/files/papers/ICSE_2019_NAPPA.pdf
How Maintainability Issues of Android Apps Evolve [ICSME 2018]Ivano Malavolta
Slides of my presentation at the Research track of the 34th International Conference on Software Maintenance and Evolution (ICSME 2018).
The full paper is available here: http://www.ivanomalavolta.com/files/papers/ICSME_2018.pdf
Collaborative Model-Driven Software Engineering: a Classification Framework a...Ivano Malavolta
Slides of my presentation at the Journal first track of the 40th International Conference on Software Engineering (ICSE 2018).
The accompanying extended abstract is available here: http://www.ivanomalavolta.com/files/papers/ICSE_2018_JournalFirst.pdf
The original TSE paper is available here: http://www.ivanomalavolta.com/files/papers/TSE_2017.pdf
This presentation is about a lecture I gave within the "Software Design" course of the Computer Science bachelor program, of the Vrije Universiteit Amsterdam.
http://www.ivanomalavolta.com
Modeling behaviour via UML state machines [Software Design] [Computer Science...Ivano Malavolta
This presentation is about a lecture I gave within the "Software Design" course of the Computer Science bachelor program, of the Vrije Universiteit Amsterdam.
http://www.ivanomalavolta.com
This presentation is about a lecture I gave within the "Software Design" course of the Computer Science bachelor program, of the Vrije Universiteit Amsterdam.
http://www.ivanomalavolta.com
This presentation is about a lecture I gave within the "Software Design" course of the Computer Science bachelor program, of the Vrije Universiteit Amsterdam.
http://www.ivanomalavolta.com
Requirements engineering with UML [Software Design] [Computer Science] [Vrije...Ivano Malavolta
This presentation is about a lecture I gave within the "Software Design" course of the Computer Science bachelor program, of the Vrije Universiteit Amsterdam.
http://www.ivanomalavolta.com
Modeling and abstraction, software development process [Software Design] [Com...Ivano Malavolta
This presentation is about a lecture I gave within the "Software Design" course of the Computer Science bachelor program, of the Vrije Universiteit Amsterdam.
http://www.ivanomalavolta.com
This presentation is about a lecture I gave within the "Software systems and services" immigration course at the Gran Sasso Science Institute, L'Aquila (Italy): http://cs.gssi.infn.it/.
http://www.ivanomalavolta.com
[2017/2018] AADL - Architecture Analysis and Design LanguageIvano Malavolta
This presentation is about a lecture I gave within the "Software systems and services" immigration course at the Gran Sasso Science Institute, L'Aquila (Italy): http://cs.gssi.infn.it/.
http://www.ivanomalavolta.com
This presentation is about a lecture I gave within the "Software systems and services" immigration course at the Gran Sasso Science Institute, L'Aquila (Italy): http://cs.gssi.infn.it/.
http://www.ivanomalavolta.com
[2017/2018] Introduction to Software ArchitectureIvano Malavolta
This presentation is about a lecture I gave within the "Software systems and services" immigration course at the Gran Sasso Science Institute, L'Aquila (Italy): http://cs.gssi.infn.it/.
http://www.ivanomalavolta.com
This presentation is about a lecture I gave within the "Software systems and services" immigration course at the Gran Sasso Science Institute, L'Aquila (Italy): http://cs.gssi.it/.
http://www.ivanomalavolta.com
Introduction to AI for Nonprofits with Tapp NetworkTechSoup
Dive into the world of AI! Experts Jon Hill and Tareq Monaur will guide you through AI's role in enhancing nonprofit websites and basic marketing strategies, making it easy to understand and apply.
Palestine last event orientationfvgnh .pptxRaedMohamed3
An EFL lesson about the current events in Palestine. It is intended to be for intermediate students who wish to increase their listening skills through a short lesson in power point.
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdfTechSoup
In this webinar you will learn how your organization can access TechSoup's wide variety of product discount and donation programs. From hardware to software, we'll give you a tour of the tools available to help your nonprofit with productivity, collaboration, financial management, donor tracking, security, and more.
Macroeconomics- Movie Location
This will be used as part of your Personal Professional Portfolio once graded.
Objective:
Prepare a presentation or a paper using research, basic comparative analysis, data organization and application of economic information. You will make an informed assessment of an economic climate outside of the United States to accomplish an entertainment industry objective.
Model Attribute Check Company Auto PropertyCeline George
In Odoo, the multi-company feature allows you to manage multiple companies within a single Odoo database instance. Each company can have its own configurations while still sharing common resources such as products, customers, and suppliers.
Instructions for Submissions thorugh G- Classroom.pptxJheel Barad
This presentation provides a briefing on how to upload submissions and documents in Google Classroom. It was prepared as part of an orientation for new Sainik School in-service teacher trainees. As a training officer, my goal is to ensure that you are comfortable and proficient with this essential tool for managing assignments and fostering student engagement.
The Roman Empire A Historical Colossus.pdfkaushalkr1407
The Roman Empire, a vast and enduring power, stands as one of history's most remarkable civilizations, leaving an indelible imprint on the world. It emerged from the Roman Republic, transitioning into an imperial powerhouse under the leadership of Augustus Caesar in 27 BCE. This transformation marked the beginning of an era defined by unprecedented territorial expansion, architectural marvels, and profound cultural influence.
The empire's roots lie in the city of Rome, founded, according to legend, by Romulus in 753 BCE. Over centuries, Rome evolved from a small settlement to a formidable republic, characterized by a complex political system with elected officials and checks on power. However, internal strife, class conflicts, and military ambitions paved the way for the end of the Republic. Julius Caesar’s dictatorship and subsequent assassination in 44 BCE created a power vacuum, leading to a civil war. Octavian, later Augustus, emerged victorious, heralding the Roman Empire’s birth.
Under Augustus, the empire experienced the Pax Romana, a 200-year period of relative peace and stability. Augustus reformed the military, established efficient administrative systems, and initiated grand construction projects. The empire's borders expanded, encompassing territories from Britain to Egypt and from Spain to the Euphrates. Roman legions, renowned for their discipline and engineering prowess, secured and maintained these vast territories, building roads, fortifications, and cities that facilitated control and integration.
The Roman Empire’s society was hierarchical, with a rigid class system. At the top were the patricians, wealthy elites who held significant political power. Below them were the plebeians, free citizens with limited political influence, and the vast numbers of slaves who formed the backbone of the economy. The family unit was central, governed by the paterfamilias, the male head who held absolute authority.
Culturally, the Romans were eclectic, absorbing and adapting elements from the civilizations they encountered, particularly the Greeks. Roman art, literature, and philosophy reflected this synthesis, creating a rich cultural tapestry. Latin, the Roman language, became the lingua franca of the Western world, influencing numerous modern languages.
Roman architecture and engineering achievements were monumental. They perfected the arch, vault, and dome, constructing enduring structures like the Colosseum, Pantheon, and aqueducts. These engineering marvels not only showcased Roman ingenuity but also served practical purposes, from public entertainment to water supply.
Operation “Blue Star” is the only event in the history of Independent India where the state went into war with its own people. Even after about 40 years it is not clear if it was culmination of states anger over people of the region, a political game of power or start of dictatorial chapter in the democratic setup.
The people of Punjab felt alienated from main stream due to denial of their just demands during a long democratic struggle since independence. As it happen all over the word, it led to militant struggle with great loss of lives of military, police and civilian personnel. Killing of Indira Gandhi and massacre of innocent Sikhs in Delhi and other India cities was also associated with this movement.
Biological screening of herbal drugs: Introduction and Need for
Phyto-Pharmacological Screening, New Strategies for evaluating
Natural Products, In vitro evaluation techniques for Antioxidants, Antimicrobial and Anticancer drugs. In vivo evaluation techniques
for Anti-inflammatory, Antiulcer, Anticancer, Wound healing, Antidiabetic, Hepatoprotective, Cardio protective, Diuretics and
Antifertility, Toxicity studies as per OECD guidelines
Honest Reviews of Tim Han LMA Course Program.pptxtimhan337
Personal development courses are widely available today, with each one promising life-changing outcomes. Tim Han’s Life Mastery Achievers (LMA) Course has drawn a lot of interest. In addition to offering my frank assessment of Success Insider’s LMA Course, this piece examines the course’s effects via a variety of Tim Han LMA course reviews and Success Insider comments.
3. What is a Web App?
An application built with web technologies
that is accessible via a mobile browser and
not exclusively through an app store
The browser may be either the standard device
browser or an embedded browser (Hybrid app)
5. Anatomy of a mobile web app
This is why HTML5 Mobile Apps are hard
hard!
In many cases you will need to create every
part of this diagram
If you don’t create it, you still need to test and
debug each piece
6. Setting up the Server
As usual, it all starts with an http request
Then you need:
• Data
• A device detection mechanism [optional]
• The app itself
7. Data
Usually mobile apps do not talk directly with
the database
do not even think about JDBC, drivers, etc!
They pass through an application server and
communicate via:
– standard HTTP requests for HTML content (eg PHP)
– REST-full services (XML, JSON, etc.)
– SOAP
8. Data 2
• Data can be stored in any classical way:
– Relational
– Graph
– Key-value
– Document-based
www.parse.com
www.kinvey.com
Latest trend: backend-as-a-service
– Data storage, users management, security,
big files storage, scalability, push notifications…
9. BaaS
1. Developers build a visual
model of their DB
2. The service generates APIs
and client-side
libraries(compatible with iOS,
Android, Windows Phone 7,
etc.)
3. The data produced/consumed
in the app can be
pushed/pulled to their DB
– Communication is handled
via REST or other
protocols
10. Server-side device detection
All devices are unique
you have to know on which device your app is running
the app can adapt to the device capabilities
Many techniques, the most used are:
• Andy Moore’s browser detector
– Works for PHP pages only
• Javascript if (navigator.userAgent.match(/AppleWebKit/i) &&
navigator.userAgent.match(/Mobile/i)) {
• External APIs window.location.replace('/path/to/iphone/site/');
– (DeviceAtlas, WURFL)
@media screen and (max-width: 980px) {
• CSS3 media queries }
11. The HTML5 app
Keep code very semantic
Keep all the logic in Javascript
Keep (most of) the presentation in CSS3
Remember that the user may go offline
• Offline data storage, cache manifest
Progressive Enhancement
Write all your markup first without any CSS or
JavascriptThe resulting markup should always be
perfectly usable in its lowest form.
13. Progressive Enhancement Techniques
• Always code your markup semantically
– ensure that the page is always usable, even with no stylesheet
• Have a device plan
– Know which device classes you intend to support before you
start to code
• Have both your LCD and high-end device designs before
high-
you begin to code
– Try to visualize a way to create both versions from one code
base.
• Test on different mobile devices from the beginning
– your incremental work must display correctly in the intended
devices
• If you plan to add a desktop layer, always create the
mobile version first
15. Cache Manifest
Problem.
Problem Browsers have their own caches but they
are unreliable and heterogenous
The Application Cache allows a developer to
specify which files the browser should cache and
make available to offline users
CACHE MANIFEST
/main/features.js
/main/settings/index.css
http://files/images/scene.jpg
http://files/images/world.jpg
16. Cache Manifest
A cache manifest gives you the following benefits:
• Offline browsing
– users can navigate your full site when they're offline
• Speed
– cached resources are local, and therefore load faster
• Reduced server load
– the browser will only download resources from the server
that have changed
This solution does not cover dynamic data caching
In that case you can use javascript to get your data
18. Hybrid Scripts
These scripts bridge the gap between your
core scripts and the device SDK
– A necessary step if you plan to ship your HTML5
app in a native wrapper like a standard iOS
UIWebView or Cordova
– They may need to be distinct for each platform
you plan to support
• For example, the cordova.js file for Android is subtly
different from the iOS’s one
19. Core Scripts
The common components of your app
– they implement the internal logic that your app will
require to assemble and render your HTML5 pages
– they will be the same in every platform
– examples of duties:
• REST API access
• Domain entities representation
• …
– they include also JS libraries like JQuery and other
microframeworks
20. Device Scripts
They work to emulate native behaviors of the
device with Javascript
– these scripts may be unique to each platform you
plan to support
– examples:
• JQueryMobile (JS part)
• JQTouch (JS part)
• SenchaTouch (JS part)
• iui-js
21. A note on Mobile Web Frameworks
Frameworks like JQueryMobile, JQTouch are useful
since they give you the standard visual language
the user is accustom to out-of-the-box
However, evaluate carefully what framework you need,
you may have issues about:
– performance (the UI may get slow)
– stability, debuggability
– customization problems (you may be forced in doing
everything the framework-way)
– your app may look like many others
23. Device Themes
The presentation elements that will be
required to mimic the platform aesthetic
– it may be unique to each platform you plan to
support
– examples:
• Sencha Touch (CSS)
• JQueryMobile (CSS)
• …
24. Core Themes
The presentation elements you use
independently from the app and platform
– Keep presentation essentials as a unique stylesheet
that will serve as your core theme
– They are the elements that should always be the
same regardless of what platform you use
– Examples:
• Resets
• Toolbar colors
• Layouts
• Typography
• …
25. App Themes
The presentation elements that are specific to
your app
– Basically, they are similar to a core theme, but they
are specific to an app
– Examples:
• Logos
• Toolbar colors
• Layouts
• Typography
• …
27. Classes of Mobile Web Apps
A mobile web app will always be limited to the
capabilities of the browser and device
available
This environment cannot be assured at the time of
development
The following classes of development can help to
prioritize design and development effort
28. Class 1
It uses the latest innovations and capabilities present
only in the iPhone (3GS and higher, iPod touch 4th
Gen, iPad) and Android 4.0
Examples:
Facebook for iPhone
Flipboard for iPhone
29. Class 1
Advantages
• Best possible mobile experience
• Complex user interfaces, animations is possible
• Limited access to device features is possible
• The user experience can be very close, and in some
cases on par with native iPhone apps
• Fixed headers and footers are possible with Javascript
Disadvantages
• They do not have backward compatibility and do
not support other platforms
• Complex Javascript is required for data integration
and is difficult to debug
30. Class 2
It supports high-end WebKit browsers with devices
high-
that have at least 1Ghz processors
It supports all iOS devices,
2.2+ Android devices, WP 7.5
Example:
Instagram for Android 2.3
31. Class 2
Advantages
• Complex user interfaces are possible
• Support the majority of high-end smartphones on the
marketplace
• Has limited backward compatibility
Disadvantages
• Use of animations are processor and battery intensive
(Javascript-based animation needs to be used instead of
CSS, or animations need to be omitted altogether)
• Cannot use fixed footers and headers
• Complex javascript can be required for data integration
and is difficult to debug
32. Class 3
It has the highest degree of smartphone device
compatibility,
compatibility provides high quality user experience,
as well as supporting higher and lower classes
It supports all iOS devices, all Android devices, WP
BlackBerry Torch
33. Class 3
Advantages
• Supports the majority of devices, but not all
• Provides a quality user experience on more capable
browsers, and degrades to lessor devices
Disadvantages
• Cannot support animations or screen transitions
• Cannot support fixed header or footer
• Limited javascript support
34. Class 4
It is designed with compatibility in mind, seeking to
have the best possible user experience across the
widest number of devices
Any mobile web app looking to have the maximum
cross platform support, should look no further
support
than a Class 4 experience
It is more website than web app
35. Class 4
Advantages
• Support the largest number of handsets
• Is simple to design and develop
• Is simple to deploy
Disadvantages
• Requires significant Quality Assurance time
36. Universal App
It is an experience that is built for multiple device
contexts,
contexts but with a single source of content
Sometimes referred to as Responsive Web Design
Warning. In this case the user experience is driven
by technological constraints, not user needs
Warning. This approach is something that has
proven unsuccessful with most mobile platforms
and applications
37. Universal App
Advantages
• Support mobile devices from a single code base
• Based in web standards
• Increases accessibility and Search Engine Optimization
(SEO)
• Data integration is very simple
Disadvantages
• Must be designed for maximum device compatibility
(Lower Common Denominator or LCD-based Design)
• Does not address the users context
• Most websites are not designed to be “universal” and
need to be refactored from scratch
41. PhoneGap VS Cordova
Adobe/Nitobi donated the PhoneGap codebase to the
Apache foundation
– wider audience and contributors Phonegap is a
– Transparent governance distribution of
• Better documentation Apache Cordova
– Easier contributions for companies
• Apache Licensing
There was only one problem:
trademark ambiguity
CORDOVA
42. PhoneGap
The UI layer is a web browser view
– 100% width
– 100% height
This is a web
browser Headless web browser
instance – No URL bar
– No chrome
– No window decorations
– No zooming
– No text selection
43. PhoneGap
You develop your app using
• HTML
• CSS
• Javascript
You use the same web view of the native OS
– iOS = UIWebView
– Android = android.webkit.WebView
44. PhoneGap API
Allows you to access native OS functionality using
JavaScript
you develop your app using web technologies and
PhoneGap handles communication with the native OS
http://bit.ly/HBPPY5
45. PhoneGap API
API provider
WebView app
for Android
API provider
for iOS
PhoneGap
Javascript
API provider
for Windows
Phone
API provider
for
Blacberry
PhoneGap
47. PhoneGap API on iOS - general idea
1. the native web views have events/notifications whenever
the url/address is changed
2. cordova.js parses messages into strings and puts them
as the source URL inside a hidden IFrame element
3. This navigation action is intercepted on the native layer
and converted to a native object, and the default
navigation action is blocked
4. The string is parsed and a native code operation is
performed
5. The native layer writes back to the web view layer by
executing javascript strings
48. Recurrent App Architecture
The app acts as a client for user interaction
The app communicates with an application server to
receive data
The application server handles business logic and
communicates with a back-end data repository
back-
http://bit.ly/HBPPY5
49. The App
It generally uses the single-page application model
single-
• the application logic is inside a single HTML page
• This page is never unloaded from memory
• Data will be displayed by updating the HTML DOM
• Ex. Using JQuery
• data is retrieved from the application server using AJAX
50. The Application Server
It is a classical web server
– server-side scripting language such as Java, .NET, PHP, etc…
server-
– communication can be based on:
• standard HTTP requests for HTML content
• REST-ful services (XML, JSON, etc.)
• SOAP
– It performs business logic and generally gets or pushes
logic,
data from a separate data repository
51. The Back-end Repository
It may be:
– a standard DB (usually deployed in the same machine of
the application server)
– an external API (see www.programmableweb.com)
Both application server and back-end repository can be
provided as a service BaaS
53. PhoneGap Plugins
Sometimes PhoneGap is not enough as is for our purposes
• Unsupported feature
• heavyweight data processing is faster in native code
– ex. images manipulation
• background processing is better handled natively
– ex. Files sync
• complex business logic
You need to develop a PhoneGap plugin
http://wiki.phonegap.com/w/page/36752779/PhoneGap%20Plugins
54. PhoneGap Plugins
Purpose.
Purpose. To expose a Phone native functionality to the
browser
This is done by developing
– a Custom Native Component
Different for each platform
– a Custom Javascript API
It should be always the same
57. Project Structure
If your app gets complex, you may
prefer to use the structure
presented in the Anatomy of a
HTML5 web app part of this
lecture
58. Page Structure
• Place all CSS stylesheets at the beginning
– allows the page to render progressively
– avoids flickering
• Place all JS scripts that do not affect page layout
at the end
– every script must be parsed before it can be used
– they block parallel downloads
59. Images and Style
• First of all, avoid images when possible
– you may use CSS gradiends, effects, etc.
• Try to avoid advanced CSS properties
– for example, text-shadow and box-shadow, opacity
• Use touch events, instead of onClick
– onClick may take up to 500ms to execute!
60. Text Management
• If the input is numeric, open up only the numeric keyboard
– The same holds for email, websites, ecc.
<input type="text" pattern="[0-9]*" value="numeric" />
• Disable user selection
<style>
*{
-webkit-touch-callout: none;
-webkit-user-select: none;
}
</style>
61. CSS Hardware Acceleration
When you use
webkit-
-webkit-transform
you have to use
translate3d(x,y,z
translate3d(x,y,z)
x,y,z)
instead of using
translate(x,y)
In iOS, the last instruction is not HW-accelerated
62. Scrolling
I you want to scroll only a portion of your view, you
should use this library
http://cubiq.org/iscroll
Examples:
– fixed header and footer, with scrollable content
– scrollable sub-views with fixed description below
63. Frameworks
JQueryMobile, JQuery, Backbone, etc. are beautiful
tools…
However they may impact the performance of your app
Use a framework only when it is necessary
– Don’t use JQuery only because of the $() syntax!
Solution
• build your own micro-framework
• cut out PhoneGap plugins you do not use
• use micro-frameworks (http://microjs.com)