I was just reading the guidelines and trying to get my head around the apparent contradiction in http://www.orchardproject.net/docs/UI-guidelines-for-theme-authors.ashx
On one hand, it says:
"Orchard assumes the use of HTML5... it is a strong recommendation. "
On the other hand it also says:
"Your web pages should work even if JavaScript is disabled in the browser"
How can the HTML5 tags possible work w/o JavaScript - which they have recommended as a solution? Since I'm doing a mobile application, should I totally ignore HTML5 tags then as the safest approach for browser compatibility in mobile?
Update: Anyone had a look at Twitter's new mobile site in HTML5? Is it using HTML5 tags and just focusing on modern smart phones?
I'm afraid you'll have to be a little more specific about the problems you are anticipating, in particular as compared to the same thing done without HTML 5. It's not clear to me whether this is a comment about Orchard or about HTML 5.
Another thing to keep in mind is that while we recommend HTML 5, you can perfectly well replace all the markup into whatever dialect you prefer to use.
Ended up using a different wrapper for the widgets that does have to depend on the generic wrapper for widgets which has pre-configured HTML5 tags like <header />.
Related
So I'm a self taught web developer but have only been doing it for a little over a year. Therefore, compared to other people, I'm still pretty new to the field. I had a quick question for those of you out there familiar with wordpress and html5. I was wondering why it was hard for me to find, highend, paid wordpress themes that utilized the more semantic html5 tags such as article and section instead of the typical, div class = "section", setup. Take a look at this paid theme for example, which upon inspection makes use of the header and nav tags but not article, section and aside tags:
http://demo.hb-themes.com/?theme=Highend
I've seen a bunch of others they looked the same. My main question is am I wrong to judge these sites for not using the basic html5 tags mentioned above? I thought these tags were important in giving google and other search engines more semantic code to look through. The reason I ask is I'm considering purchasing a wordpress theme for now so that I can get my site up on the internet quickly while in the meantime develop my own design for the future. I do not want to pay for a theme that is not up to standards, if those standards are relevant today. Any thoughts would be appreciated. Thank you.
You can not add css to html5 selectors without relying on html5shiv or modernizr. Too many people are still using old browsers and, in my opinion, the Internet is not ready websites that only use the html5 tags. By using "div class='section'" you increase the cross browser compatibility.
HTML5 is great for sectioning content but an html4 with Aria roles and proper use of header tags will still gets the job done. If you are concerned about search rankings, just make sure your website is fast loading, responsive, and has good content.
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
I defied all conventional knowledge, and wrote my HTML5 site first. Now I am writing the HTML4 site and adding a script which detects old browsers. The question I have is mainly regarding web safe fonts. I am aware that it is best practice to use HTML instead of images of pretty text, for the benefit of SEO. However, since the HTML5 website exists with the HTML in the headers, I wonder if it is safe to use images to represent those headers in the HTML4 version of the site. Simply put, will my web client's indexing suffer? I feel that the HTML5 version will ensure good ranking, but I wanted to put it to the community and get an opinion.
Second question, should I create the more accessible version in HTML4 or XHTML?
Finally, is there a simpler way to make a new site backwards compatible, and still be able to make use of newer technology?
After a fair amount of research, I found that it is not so unusual to create a site in HTML5, and implement items for the purpose of graceful degradation.
At this site: spacebug.com/gracefully-detect-old-browsers-and-fallback-from-html5/, the authors recommend not using PHP user agent variables to detect browser capability. It says that there are too many user agents and that headers change, etc. Check out the link for their in-depth explanation. It offers that the right way to do it is to use javascript to check for certain capabilities. Since my purpose is to either render it in HTML5 or render it in XHTML, this makes my life pretty simple.
Once I found that javascript was the way to go, a simple Google search led me to this site: diveintohtml5.info/detect.html. This offers a number of methods for detecting browser functionality as it relates to HTML5.
For those who are not as savvy with the code, or for those who are looking for a quick solution, the second website also offers a link to modernizr.com, which is an "open-source MIT licensed javascript library that detects support for many HTML5 and CSS3 features."
So, thank you all for your input. I have learned a great deal from this experience, and I am hoping it will make everything much more user friendly and efficient.
Happy developing!
Kat
I've been asked by a recruiter for how many years I'm testing HTML5/CCS3, and I never thought if our app uses any of those, and our UI developer is not online at the moment to ask. I googled it and found on yahoo answers that the source code for the HTML5 page will have
<!DOCTYPE html>
in it at the top. Is that the only thing to be sure it's HTML5?
What about css3? What should I look for in the code?
HTML5
HTML5 isn’t one big thing (see http://diveintohtml5.ep.io/introduction.html). There’s no easy way to tell if a given HTML page contains any HTML5 features other than listing all the new features in HTML5, and checking the page for them.
Differences between HTML5 and HTML4
The HTML5 doctype is a decent signal that the author intended the page as HTML5, but you can use it on HTML4 pages just as correctly, so it’s not really indicative in and of itself.
CSS3
CSS3 is even less one big thing, as CSS has been split into lots of individual modules which are expected to progress individually.
The modules are all listed on the following page. Selectors and CSS Color are considered finished; all the other modules are listed under the High Priority and Medium Priority headings. Unfortunately I don’t think each module lists which features were added after CSS 2.1, so you’d have to compare them to the 2.1 spec.
http://www.w3.org/Style/CSS/current-work
You can pretty much consider HTML and CSS as unversioned languages at this point. I’m sure that won’t stop recruiters asking for min 5 years HMTL-5 experience though.
just download the css files with wget/curl and look at the defs, as well as looking at the page source to see if you see any css3 transforms. Or use webkit/firebug to look at the css.
I have been assigned to build a mobile web application. I have found two ways to develop that (there might be hundred other ways to do that, but I am aware of these two): jQuery Mobile and HTML 5.
Which one should I use? The application will be a normal web app, like a shopping web app or a user management system.
I am looking for compatibility in different phones and great UI with fast processing.
So, the ways I know is JQuery mobile and HTML 5.
Which one should I use?
It's not a case of using one or the other - you use both to create a solution.
HTML5 provides the framework to present your content, whether it is text, images, video, audio, or any mixture of the above.
jQuery (Original or Mobile) is used for "Progressive Enhancement", that is to provide additional functionality, features or flair to the HTML5 framework.
To ensure the best compatibility across the majority of devices, you want to have a website which is usable without the jQuery enhancement. Then, once you have that, you can use jQuery (and/or standard javascript) to add the "nice-to-have"s, like animations, AJAX interactions, geolocation, etc.
Lucanos is right in the sense that HTML and jQuery aren’t alternatives. (Browsers display HTML, and then you write JavaScript — possibly using a framework like jQuery — to manipulate that HTML in custom ways where necessary.)
However, if you‘re using “HTML5” in the Apple sense of the word (i.e. to describe HTML5, CSS3, and browser-specific extensions to CSS), then there are some choices to make — e.g. some WebKit-based mobile browsers support CSS animations, which should perform faster than JavaScript animations.
I’m not familiar with jQuery Mobile — it might well use CSS animations when they’re supported, and simulate them when they’re not, meaning you get wider compatibility without much runtime performance cost.
But for mobile, personally I think you’re better off picking the most popular platforms (i.e. iOS and Android), and writing to their capabilities, without bothering with a framework like jQuery Mobile. That way you serve most of the market with less effort (and thus serve them better), rather than making everyone download jQuery Mobile just to serve a few older phones that’ll get binned in a year or two anyway.
Disclaimer: this depends entirely on your target market. If they all use old phones, write to the capabilities of those phones.