Starting point for learning how to build hybrid HTML5 apps?
I want to start building hybrid HTML5 mobile apps; build the core functionalities via HTML5, then wrap this with a native layer for iOs, Android, BB..etc
After some research: I found I need to be familiar with plenty of technologies, namely: HTML5, JS, CSS3. Other technologies/frameworks I was advised to be familiar with: JQuery for Mobile, Sencha touch, Node.JS, Backbone.JS, PhoneGap..etc
Till now I just know the basics of HTML5, JS & CSS.
My question is: Is there a "single" place (Book/Tutorial/Screen casts) where I can find a walkthrough Tutorial that deals with some of these technologies and guide me to building hybrid HTML5 apps (Maybe on iOs for example)..
I would want to learn the mentioned technologies among these, yet I am pretty keen on learning them in the context of building a hybrid mobile app and not on separate basis. I much prefer learning by doing real work (The app in the Tutorial/Book/Screen cast here) rather than learning each technology on its own.
Much appreciate your answers.
Omar
Answer
OK, let me expand my original answer:
HTML is short for hypertext markup language.
It is used to specify how to display STATIC content via the HTTP protocol, vulgo web.
HTML5 is version 5 of the HTML language specification, and is a RECOMMENDATION to a standard, but not really a standard by itsself.
CSS is used to apply advanced STATIC formatting to STATIC text/images, such as alternating background colors for even/odd rows in a table, text-flow, text-direction, size, boldness, font etc..
To make static content DYNAMIC, you need JavaScript. JavaScript is a scripting language, that runs in the webbrowser of a vistor (client) to the website. Theoretically, it is meant to behave the same on each browser, but in reality, Microsoft used unfair competition and intentionally crippled the JavaScript implementation in it's browser (Internet Explorer), by diverging from the ECMA standard, and by implementing proprietary features, to stifle competition (Netscape) and make it impossible to develop compelling web applications, for example online office software.
JavaScript, the client-side programming language, is complemented by PHP/ASP.NET/JSP, which are programming languages & frameworks that run on the server, and are there to dynamically create static pages, for example by filling in data from a database, and to process and save user input, such as orders, payment, emails, feedback, etc, and to process input from HTML forms (input masks).
JQuery is a JavaScript framework.
That mainly means, it's a library of JavaScript functions that were designed to provide often-needed functions that do the same on each browser, effectively bypassing the anticompetitive practises of software vendors such as Microsoft and Apple.
It also provides basic functionality for event handling, graphics and AJAX (asynchronous JavaScript and XML), and functions for serializing/deserializing JSON (JavaScript object notation).
JQuery for Mobile is a version of JQuery optimized for mobile devices, such as Android or the iAnything. So are Sencha touch, Node.JS, Backbone.JS, etc.
The difference between HTML 5 / and HTML4/XHTML is mainly that HTML5 provides a so-called "unified" way to embed audio video. Which is not necessarely true, because each browser supports different audio and video formats, and there is NOT ONE audio & video format that is universally supported across all browsers.
HTML 5 also provides the very useful WebSockets, which basically allow you to make client-server applications on the web. Since this would enable compelling web applications and office applications that would be on par with Microsoft Office, Microsoft hasn't implemented WebSockets in the standard browser. It's available as separate plugin, which basically nobody bothers to download, which means one cannot use web sockets anytime soon if the web application should work with internet explorer. Additionally, HTML5 is only implemented by IE9+, and not by IE8. IE9 however is only available for operating systems newer than windows XP (vista, 7, 8). Which means one cannot install IE9 on Windows XP (35 percent of current windows installations, Windows makes up 85 percent of the desktop market).
To embed web applications on mobile phones, you need to embed your applications in a embedded WebBrowser. For Android, the interface to the embedded browser is called WebView, and you need to learn the Java programming language to use it. For Apple, I have no idea whether they have such a thing at all, but I'd suppose they have, though it's probably going to be more complicated, since that's Objective C, and not Java. Since I have neither a iPhone nor an Apple computer, I cannot tell you anything about it, except that it's crap because it doesn't support Flash, and that it costs 10 times more than what it's worth..
Screencasts, you'll probably find on youtube, if there are any.
Again, google search will provide you with the necessary answers if you have a specific question.
My question is: Is there a "single" place (Book/Tutorial/Screen casts) where I can find a walkthrough Tutorial that deals with some of these technologies and guide me to building hybrid HTML5 apps (Maybe on iOs for example)..
Yes, http://www.google.com/ncr
You know, it has a wonderful search box for just about any problem...
Other good pages:
http://www.w3schools.com/html5/default.asp
http://www.w3schools.com/js/
http://docs.jquery.com/Tutorials