HTML5 - Suggestions for where to start from - html

I want to look into developing mobile applications using HTML5. I'm very new to it and do not have any idea about HTML5. I would like to take some suggestions about where to get the basic tutorials for starters and what is the best IDE to use.

If you are new to HTML5 then I would recommend Headfirst HTML5, its a very comprehensive book with each of the JavaScript APIs(geolocation, audio, video, webworkers, canvas etc.) explained very well.
If you want to go with simple overview of the language there is introductory video on HTML5 by Google's Open Web Advocacy, http://youtu.be/siOHh0uzcuY . Its dated, though you can get the feel of HTML5.
& Not to forget Divya Manian's awesome work on HTML5Please
EDIT: for IDE I would recommend SublimeText2 which is very light weight.
You can also see Big IDE's like Microsoft Expression Web, Dreamweaver or Komodo Edit, Aptana Studio
UPDATE: Sencha Touch is lightweight which doesn't depend on jQuery like its sister project(jQTouch). Sencha Touch is a framework and provides a number of functionalities the former could not develop(that is, API).
Hope it helps!

If you are still learning the basics HTML5 then HTML5 Doctor is a very good reference. It tell you about all the semantic meaning of tags and the correct use of it.
Next, look into a quick start tutorial from sitepoint which will get you started.

Take a look at http://www.html5rocks.com/en/ also..

A very good way to start would be to learn basic HTML first(if you do not know that already), then HTML5. A nice site to learn both of these would be W3Schools. There you can learn at least the basics of HTML5.

Related

HTML5, what's that all about then?

I've got plenty of experience in HTML, CSS, JavaScript, Jquery, etc. but I've yet to make the plunge into HTML5.
In trying to get my head around HTML5, I've become a bit confused. So it's a relatively new standard and my uninformed brain tells me it's not well supported. Is this true?
I've got a vague idea that there are some 3rd party scripts that improve HTML5 compatibility, again am I right?
Any good tutorials on getting to grips with the basics of HTML5 for an experienced developer?
Ok a lot of questions there but:
HTML5 is quite well supported on most modern browsers nowadays and it's generally safe enought to use as is.
Scripts to improve compatibility? you mean Javascript that detects how old your browser is and depending on the answer show you HTML 4.01 or 5? well maybe but again, it's at the point when it is not required anymore.
Yes: w3schools has a cool one.
All of that said bare in mind that HTML 5 is still in development and not a done deal. Some areas are still being implemented but at the speed things are take this is not an issue for starting to develop your pages in HTML 5.
This website - html5 doctor is a very usefull resource that you can browse looking for what's implemented where and how things are generally going.
I also found this link to be particularly useful when figuring out what's available for each browser and what's not.
Another subject that goes well with HTML5 is CSS3. Check them both out and maybe come back with specific questions ;)
the HTML5 buzzword is being used a lot, but people mostly use it to describe different things.
HTML5 is the newest (and as of yet, unfinished) iteration of the HTML standard, as presented by W3.org.
Purely, HTML5 is the markup language, but it is usually referred to as to include CSS3, and JS (in the form of the canvas element).
In the HTML area, HTML5 boasts some new element tags that should help developers add semantic meaning to their markups(e.g. header, footer, aside) , and also some useful functional elements (progress-bar, video, audio)
In the CSS area, there are some new properties that allow you to animate your elements, and orient them more easily.
In the JS area, you can read up on the Canvas element, which is a good competitor to Flash. It allows you to draw both using vectors, and bitmap data.
As for good references to HTML5, you can use http://html5doctor.com/ or http://www.html5rocks.com/en/
Hope this helps.
Please note that w3schools isn't such a good reference anymore. Although for just looking at the possibilities it's fine I guess.
I recommend the tutorial from Lynda, but there are other sites. Just search at google. It's also possible to buy a book, since there have been written a few already.
Fallback/polyfill Scripts & libraries like Modernizr,Javascript Libraries can help you take care of older browsers. (backwards compatible)
As for the browsers. Use chrome, it supports most of the functions. Look at sites like findmebyip for more information about what is supported.
HTML 5 support is not yet fully integrated in all browsers. They are still in development stage. For studying the HTML 5 the best medium would be w3schools
They have introduced new elements in HTML5 which has reduced our overhead for html. New Elements
CodePlayer
Videos for HTML 5

HTML5 framework

I know very little HTML or web dev, but I would like to write an
HTML5 app with a fairly complex UI. Is there a framework that stands
out among the rest for this type of job? Do I need a framework; or can
I just do everything in straight HTML+CSS+JS? And what about GWT?
Thanks!
As a general HTML5 starting template, Boilerplate is always a good choice.
It will optimize and chain all your scripts and CSS files, as well as your HTML code and images, it also comes with useful tools like Modernizr.
If you are looking for JavaScript libraries, YUI is a very good library when it comes to UI, though maybe a little more complicated than jQuery or jQuery UI at first. I found it better than jQuery UI, and can work together with jQuery anyway.
EDIT
You may also be interested in Ext JS. Looking at the demo it provides, seems really like a powerful library with many ready to use UI widgets. Never used it though, and looks like it only offers a commercial license.
I suggest you to use Html5-boilerplate.
Download from github
Video Tutorials from author :
http://www.youtube.com/watch?v=qyM37XKkmKQ
http://www.youtube.com/watch?v=OXpCB3U_4Ig
GWT is a good way to go for a complex web application, particularly if you're familiar with java but not javascript. GWT now provides support for HTML5 features such as offline storage, canvas, audio, and video, although it's possible to use any HTML5 features whether GWT provides specific Java classes to support them or not (I implemented the offline storage feature in one of my apps before it was part of GWT). Using GWT will mitigate many of the browser compatibility problems you will encounter with straight HTML+CSS+JS. Although you write in Java, it's still important to be familiar with HTML, CSS and JS, since the java is compiled to js.

Is there any HTML 5 "Builder"

Or do you know of anyone working on one? I've been checking all the stuff you can do with HTML 5 here and some other sites and is amazing. I think such a big library should have some IDE with intellisense and easy documentation (like when you press F1 on Visual Studio while a symbol is highlighted) and all that stuff. And if there is not then I should probably start working on one :).
Most of known IDEs and their latest version, like Netbeans, Eclipse, Dreamweaver, support natively HTML5. You can find more info and pick one according to your preferences.
There are numerous HTML 5 IDEs, it's important to not necessarily separate current web technologies with HTML5 as they are really are very close to being one and the same. For example, the latest version of Adobe's tool offer support for HTML5, as well as other IDEs such as Aptana. Unfortunately, the HTML5 spec is not done yet so there will be discrepancies between browsers, which a builder could work around, but will put a lot of onus on you.
Alternatively, there are numerous client and server-side frameworks that abstract HTML5 and some of its features, each of these have varying levels of support, a builder, and intellisense. For example, I'm a co-founder of the NOLOH development platform (http://www.noloh.com), which abstracts away browser differences and supports HTML5 transparently to you the developer, allowing you to concentrate on your application and functionality without worrying about the plumbing. We also have what's known as "code stubs" that you can add to any IDE most IDEs and get intellisense/auto-complete functionality. We also have a visual builder in the works that should be out relatively soon.
Whatever you pick, just make sure you're comfortable with it, but you definitely don't want to re-invent the wheel here.
You should definitely try HTML5 Builder.
Try this, HTML5 Boilerplate
if you are looking for something that builds mobile sites or ads html5 builder, maybe you could try http://mobdis.com.

HTML 5 and its learning resources

as new to HTML 5 and willing to learn it core and form start. Can you all please share your best sites that you followed.
Love to have tutorials sites from where i can learn, and Showcases so that i get inspiration.
thanks for writing in advance.
Dive Into HTML5 by Mark Pilgrim is a well-written, humorous and very understandable online book that covers everything you need to know to get started with HTML5.
It also comes with lovely illustrations!
Table of contents:
Introduction: Five Things You Should Know About HTML5
A Quite Biased History of HTML5
Detecting HTML5 Features: It’s Elementary, My Dear Watson
What Does It All Mean?
Let’s Call It a Draw(ing Surface)
Video in a Flash (Without That Other Thing)
You Are Here (And So Is Everybody Else)
A Place To Put Your Stuff
Let’s Take This Offline
A Form of Madness
“Distributed,” “Extensibility,” And Other Fancy Words
The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything
HTML5 Peeks, Pokes and Pointers
I really like HTML5 Doctor
I guess you can learn a lot by looking into the well-organized archives.

What are the right materials for a desktop developer to become web developer?

I'm a .NET guy desktop developer, and I love that. I don't really love web development because we lost precious time to debug CSS, javascript, and compatibility stuff instead of creating value.
But I think it's because I had not taken time to learn about good web development practices, so now because I want to become the best developer that I can, I'd like to learn about my weakness.
Can you give me some advices/links/patterns/frameworks to become a good web developer ? (I am a .NET guy so I accept everything that will permit me to develop better websites in .NET).
Thanks !
Precision
I have done a lot of ASP.NET webform in the past, but this is not enough to create great web site without loosing time on compatibility/css/javascript issue.
You could take a shortcut and use ASP.NET, which provides a number of controls to make web development easier - and you'll be familiar using them.
Unfortunately, they aren't really that great (imo) and do not teach you good practices with the web.
I suggest you look into ASP MVC, which is now in beta. This will teach you how to write websites whilst allowing you to use libraries you are familiar with .NET
With general web development, look into websites like W3schools which will teach you the basics.
Remember to seperate presentation from markup with CSS and make sure you are using javascript to add value to a page, but make sure your page is still usable without it.
You will always lose time with CSS compatability issues, all I can say is with practice you learn what pitfalls to avoid so it gets a little easier.
As for javascript development, it has improved considerably in the past few years with frameworks which in theory are cross-browser. Maybe try looking into JQuery which syncs well with ASP MVC and has intellisense in visual studio
Advices:
Best advice I can give to you: Just don`t get angry when you done something correct but it wont show as you wanted. Patience! :)
Links:
www.w3schools.com
Nettuts.com
Webappers.com
Digital Point - webmasters forum
Patterns:
My advice is to get more into MVC pattern and any enterprise pattern.
Frameworks:
Just see this link :) Framework Guide
For Javascript: JQuery,Prototype,Mootools,EXTJs
For CSS: 960 grid system is pretty good
Make sure you learn about the client/browser side as well.
Current best practice with all the different browsers around is to use a javascript library to make your web-application cross platform and cross-browser. An AJAX library like jQuery or Prototype to perform the interactive actions you wouldn't be able to do with standard HTML and CSS in the pre-AJAX era.