Starting point for learning how to create HTML5 hybrid apps?

Question

I want to start creating HTML5 hybrid mobile apps; create basic functions via HTML5 and then wrap it with your own layer for iOS, Android, BB..etc

After some research: I found that I need to know a lot of technologies, namely: HTML5, JS, CSS3. Other technologies / frameworks I was advised to get acquainted with: JQuery for mobile devices, Sencha touch, Node.JS, Backbone.JS, PhoneGap..etc

So far, I just know the basics of HTML5, JS, and CSS.

My question is: Is there a “one” place (book / tutorial / screenshots) where I can find a walkthrough tutorial on some of these technologies and help me build HTML5 hybrid apps (maybe on iOS, for example).

I would like to study the mentioned technologies among them, but I am very interested in studying them in the context of creating a hybrid mobile application, and not on a separate basis. I prefer to learn by doing the real work (the app in the textbook / book / screen) rather than learning each technology on my own.

I really appreciate your answers.

Lobster

Answer 1

OK, let me expand on my initial answer:

HTML is short for hypertext markup language.

It is used to indicate how to display the contents of STATIC via the HTTP protocol, vulgo website.

HTML5 is version 5 of the HTML language specification and is a RECOMMENDATION to the standard, but not really the standard.

CSS is used to apply advanced STATIC formatting to STATIC text / images, such as alternating background colors for even / odd lines in a table, text stream, text direction, size, boldness, font, etc.

To make DYNAMIC static content, you need JavaScript. JavaScript is a scripting language that runs in the web browser of a vistor (client) on a website. Theoretically, it should behave the same in every browser, but in fact, Microsoft used unfair competition and deliberately crippled the JavaScript implementation in the browser (Internet Explorer), deviating from the ECMA standard and implementing proprietary features to stifle (Netscape) and make it impossible to develop compelling Web applications, such as online office software.

JavaScript, a client-side programming language, is complemented by PHP / ASP.NET / JSP, which are programming languages ​​and frameworks that run on the server and exist to dynamically create static pages, for example, by populating data from a database, as well as for processing and saving user data, such as orders, payment, emails, feedback, etc., as well as for processing input from HTML forms (input masks).

JQuery is a JavaScript framework.
This basically means that it is a library of JavaScript functions that were designed to provide frequently-required functions that do the same in every browser, effectively bypassing the anti-competitive practices of software vendors such as Microsoft and Apple. It also provides basic functions for handling events, graphics, and AJAX (asynchronous JavaScript and XML) and functions for serializing / deserializing JSON (designating a JavaScript object).

JQuery for Mobile is a version of jQuery optimized for mobile devices such as Android or iAnything. So Sencha touch, Node.JS, Backbone.JS, etc.

The difference between HTML 5 / and HTML4 / XHTML is mainly because HTML5 provides the so-called “unified” way to embed audio-video. This is not necessarily true because each browser supports different audio and video formats, and there is no single audio and video format that is universally supported in all browsers.

HTML 5 also provides very useful WebSockets, which basically allow you to create client-server applications on the Internet. Since this will enable attractive web and office applications that are on par with Microsoft Office, Microsoft has not implemented WebSockets in a standard browser. It is available as a separate plugin, which generally does not load, which means that you cannot use web sockets in the near future if the web application should work with Internet Explorer. In addition, HTML5 is only implemented by IE9 +, not IE8. However, IE9 is only available for operating systems newer than Windows XP (vista, 7, 8). This means that you cannot install IE9 in Windows XP (35 percent of current installations of Windows, Windows makes up 85 percent of the desktop market).

To embed web applications on mobile phones, you need to embed your applications in the embedded WebBrowser. For Android, the interface for the built-in browser is called WebView, and you need to learn the Java programming language to use it. For Apple, I have no idea if they have such a thing at all, but I would suggest that they have one, although it will probably be more difficult, since it is Objective C, not Java. Since I don’t have an iPhone or an Apple computer, I can’t tell you anything about this except that it is shit because it does not support Flash and that it costs 10 times what it costs.

Screencasts, you'll probably find on youtube, if any.
Again, a Google search will provide you with the answers you need if you have a specific question.

---

My question is: is there a “one” place (book / tutorial / screenshots) where I can find a walkthrough tutorial on some of these technologies and direct me to create HTML5 hybrid applications (maybe on iOS for example).

Yes, http://www.google.com/ncr

You know, this one has a wonderful search box for almost any problem ...

Other good pages:
http://www.w3schools.com/html5/default.asp
http://www.w3schools.com/js/
http://docs.jquery.com/Tutorials

Answer 2

Here's an update on this, as building hybrid apps has come a long way in three years. I will start by searching on Phonegap, or in a version owned by Adobe called Cordova. This is a very popular route in the fast-paced and proliferation of hybrid mobile apps. So popular is the fact that many other frames are built around the Cordova frame to give it a more natural look, like

• Ionic is by far the most popular, it is open source (free) and my favorite, as I am the fastest and easiest to work with. In addition, they have excellent documentation and excellent pre-builds. This is a command line interface that works, combines Cordova , Bower (package / plugin manager), Grunt and Angular JS into one powerful and fast CLI. If you don’t know these frameworks, they are definitely worth a look if you are looking at building web applications or hybrid applications.
• The Angular Mobile UI is an HTML 5 framework that uses bootstrap 3 and AngularJS to create interactive mobile applications.
• Titanium is a “complete” solution for creating hybrid mobile applications with everything you need in one place with the downloadable program Titanium studio.
• Telerik is a website-based program similar to Ionic and Titanium for rapid development.

These are great places to start. If you do not have a Lynda.com subscription yet, I would highly suggest. The subscription price is approximately $ 25 per month, depending on your location. They have hundreds of online video courses that can work for hours and are very good. I give you a good amount and a way to complete many projects and understand many frameworks. teamtreehouse.com is another great learning tool, it has a lot less video choices and will work with many other project frameworks.

Answer 3

You want to learn how to develop a hybrid application that works with several platforms, such as Android, iOS, Windows, etc. This means that you need to learn PhoneGap and Cordova (preferred). It is almost the same; one is truly part of the other.

Google and the phone book and cordova, install packages (requires a little knowledge of the bash command line). It is relatively quick and easy to get an example HelloWorld application in both Phonegap and Cordova. After that? well, you have to learn HTML, CSS, javascript at least for the webpage of the hybrid application. On the home side (Android, iOS, etc.) You will need to study Android Studio / java for Android, or Xcode / swift for iOS. Everything you want to know is either on youtube.com for free, or Udemy , Udacity , Lynda . Some sites you have to pay for, but their WORTH IT.