I was wondering that if I want to make apps for both iOS as well as Android is it worth it to get into learning the whole HTML-CSS-JavaScript route or should I learn their native SDKs?
Exactly how much will HTML5 be the future I guess Im wondering. Is it going to really replace the native mobile app?
I know noone has a crystal ball but Im just seeking input from more experienced/or more senior developers.
Much appreciated.
The reality is that HTML5 will never be a realistic replacement for native applications built in iOS and Android, as it is not powerful or robust enough to do so. Additionally, using HTML5 will only work for you if you intend to create very simple apps. Even then, you will run into problems.
Consider for example the Table view in iOS. It can be highly optimized for speed and interaction in a way that will always surpass a third-party, remote solution such as HTML5. Note that the table view is one of the simplest things you will do when creating an iOS app.
Additionally, knowing Java (Android) and Objective-C (iOS) will be beneficial to you in the long run in terms of your development career.
There is one real exception: if your app is going to be the native representation of a web app (ie. Facebook) then it does in fact make sense to go with a largely web approach (HTML5/Javascript/CSS). In fact, that is exactly what Facebook did. However, even Facebook experienced a very buggy and crash-prone existence on mobile devices for the better part of a year.
In conclusion, I know of no application developer who seriously considers HTML5 as a contender for the building of mobile applications (other than for heavily web-based apps with web-like functionality). The dream, of course, is that HTML5 will be a "silver bullet" or a "golden hammer" for developers, ushering in a brave new age in which we are able to focus on learning one set of technologies for all sorts of devices. Unfortunately, it is merely a dream. At least for now.
Where do I start to learn how to make mobile web apps? I am interested in the design and effects/animations used to make them look somehow native. There must be some difference in the css, html maybe javascript from regular web appplications with regard to screen sizes etc.
I am a Java developer so usually I use templates, but I am fairly experienced with css, html...but I don't feel very updated on mobile web apps.
If you want to develop cross platform mobile application using HTML,Javascript then you can try Phonegap. With Phonegap you can create single application which will run on Android,iOS,Blackberry,Bada,Windows,Symbian etc.
To learn android :
http://www.vogella.de/articles/Android/article.html
http://developer.android.com/resources/tutorials/hello-world.html
Phonegap can be a good choice as you are familiar with HTML,Javascript.
I think the easiest way to give a mobile web-app a very close approximation to native behavior and look is to use jQuery Mobile and even the associated ThemeRoller. It's all very well documented, and the site also had great resources for learning.
jQuery Mobile is obviously based on jQuery, but is tailored to be consistent yet configurable across mobile platforms.
I highly recommend using some kind of framework.
There are several.
Sencha Touch: Very comprehensive. You don't have to worry about writing any HTML or CSS, since the framework generates it. Sencha Touch provides a Java-like pseudo-class structure, and good documentation.
JQTouch: Rather basic.
JQuery mobile: Somewhat in the middle.
The-M-Project: Lesser known, but looks promising. Haven't tried it myself.
All of these offer widgets that come with the required CSS/JS for animation and native looks, so no need to worry about that.
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
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
Here is an update on this question, as building hybrid apps have come a long way in three years.
I would start with looking into Phonegap, or the Adobe owned version called Cordova. This is a very popular route in quickly developing and distributing hybrid cross platform mobile apps. So popular in fact many other frameworks are built around the Cordova framework to give it a more native feel, such as
Ionic - this is by far the most popular, it's open source (free) and my favorite as I find the quickest and easiest to work with. In addition they have great documentation and great pre-builds. It's command line interface framework that works combines the Cordova, Bower (a package/plugin manager), Grunt and Angular JS frameworks into one powerful and quick CLI. If you are unaware of these frameworks they're definitely worth looking up if you're looking into building web or hybrid apps.
Mobile Angular UI - is an HTML 5 framework which uses bootstrap 3 and AngularJS to create interactive mobile apps.
Titanium - is a "complete" solution for creating hybrid mobile apps with all you need in one place with there downloadable program Titanium studio
Telerik - a website based program similar to Ionic and titanium for rapid development
Those are great places to start. If you don't already have a subscription to Lynda.com I would highly suggested it. The subscription is roughly $25 a month depending on your location. They have hundreds online video courses that can run a few hours long and are very great I giving you a good scope and how-to do many projects and understanding many frameworks. teamtreehouse.com is another great tutorial tool they have a lot smaller selection of videos better more in depth and hands-on and will work with many other frameworks with in the project.
You want to learn how to develop a hybrid app that works with multiple platforms such as android, iOS, Windows, etc. This means you need to learn PhoneGap and Cordova(preferred). These are almost the same, one really is part of the other.
Google both phonegap and cordova, install the packages (requires a little bash command line knowledge). It is relatively quick and easy to get the example HelloWorld app in both Phonegap and Cordova.
After that? well, you will have to learn HTML, CSS, javascript at minimum for the web side of a hybrid application. The native side (Android, iOS, etc.) will require learning Android Studio/java for android, or Xcode/swift for iOS.
Everything you want to learn is either on youtube.com for free, or Udemy, Udacity, Lynda. Some sites you will have to pay for, but its WORTH IT.
I need to know the best suited mobile frameworks which greatly exploits the functionalities of HTML5. Some of the choices I have are:
PhoneGap
JQuery Mobile
Sencha Touch
Can you friends just guide me based on the experience you have with mobile apps development
Thanks
Some specific facts that might help you would be to compare the documentation for each of the frameworks. I've found that how a mobile framework is documented is the number 1 thing that is important to me when i get deep into it. So here are the links to each of the documentations.
PhoneGap
JQuery
Sencha Touch
Consequently, you may want to familiarize exactly WHAT constitutes a "mobile" framework. For example, i use both phonegap AND sencha touch. So take some time to read up on exactly what's what. Sometimes you can use multiple frameworks together.
Not exactly a framework, you may want to try Tiggr Mobile Apps Builder - http://gotiggr.com. It's a cloud service for building HTML5 and native apps. The builder uses jQuery Mobile, and PhoneGap (for native).
Note: I work for Exadel, the company behind Tiggr.
I'm starting a HTML5 mobile application with HTML5BoilerPlate as a template and I cannot find a lot of resources regarding the best practises for HTML5 mobile development. I am looking for stuff such as:
- navigation using tab bar controller
- navigation between view
- how to best handle content ? (is it better to use several divs within the content div and only show one div at a time ?)
In fact, I'd like to understand some of the things done in Google Latitude.
Is there any good beginners guide for those items ?
You have to implement a lot more of the logic around these 'controller' components. Some of the classes that might be present in iOS development are not in HTML5. You either need to roll your own or use an existing framework.
Navigation between views is handled programmatically. You would need to do it yourself, by implementing components that can animate to/from the screen, or use one of the readily available frameworks like Sencha Touch or jQuery Mobile.
It depends on how you want the visual flow to work. I know that Sencha Touch adds in the divs lazily so not to take up as much memory. I guess the trick here is to experiment to find the best implementation that suits your needs (and then write a blog article).
SixRevisions has a pretty good article on getting started in general HTML5 programming. Some other articles, here, some good tips here, and Apple's docs.
The best beginner guide that I found for Sencha Touch was their examples included with the source code. They have an example for just about every UI control they ship and multiple applications that will gently introduce you to the framework. Other resources include their Vimeo Channel, their forum, and their docs.
Also, you can probably pull up a mobile site and take a look at how they are implementing their code using Chrome/Safari's developer toolbar. You may have to emulate a user agent string of a mobile browser though.
We have released a Mobile Boilerplate and the documents in the associated wiki are definitely something you should look into for info about this.
While not guides, I would HIGHLY recomend looking into either the Sencha Touch or JQuery Mobile HTML5 Mobile Frameworks. They, combined with HTML5 Boilerplate, will do more to bootstrap your project then just HTML5 Boilerplate alone.