background preloader

HTML5 and The Future of the Web - Smashing Coding

HTML5 and The Future of the Web - Smashing Coding
Advertisement Some have embraced it1, some have discarded it2 as too far in the future, and some have abandoned a misused friend3 in favor of an old flame in preparation. Whatever side of the debate you’re on, you’ve most likely heard all the blogging chatter surrounding the “new hotness” that is HTML5. It’s everywhere, it’s coming, and you want to know everything you can before it’s old news. Things like jQuery plugins, formatting techniques, and design trends change very quickly throughout the Web community. When looking for some stability, we can usually turn to the code itself as it tends to stay unchanged for a long time (relatively speaking). In this article, I’m hoping to give you some tips and insight into HTML5 to help ease the inevitable pain that comes with transitioning to a slightly different syntax. Welcome to HTML5. What are the basics? The DOCTYPE When I first started researching HTML5 a few months ago, one of the main things I struggled to find was the doctype. Conclusion Related:  yahan973

HTML5 enabling script 7 Jan Since HTML5 is getting more attention by way of marking up our new pages, and the only way to get IE to acknowledge the new elements, such as <article>, is to use the HTML5 shiv, I’ve quickly put together a mini script that enables all the new elements. Download html5shiv.js and must be inserted in the head element (this is because IE needs to know about the element before it comes to render them – so it can’t sit in the footer of the page, i.e. below the elements in question). I’ve updated this post to link to Alexander Farkas’s version of the shiv – it’s the very latest and my simple one line script. The one I originally released was (I thought) beautifully small, but didn’t support print styles nor dynamic injection of HTML5 elements. Good thing there are smarter folk than I!

The header element Recently, we have seen a growing interest in HTML5 and its adoption by web professionals. Within the HTML5 specification we can see that there have been a significant number of new elements added, one of these the <header> element is what we’ll be covering in this post. We’ll talk about when to use it, when not to use it, its must haves and must not haves. Ready? Updated 15/12/2105 by Doctor Steve So you’re used to seeing on a large majority of sites that you visit, well now with HTML5 that isn’t required anymore we can add some more semantic value with the <header> element. What does the element represent? According to the HTML spec the header element represents …introductory content for its nearest ancestor sectioning content or sectioning root element. It is important to note that the <header> element doesn’t introduce a new section but is the head of a section. Where would I use the <header> element Well the obvious place to start would be at the beginning of your page. Conclusion

Understanding aside Please note aside has been redefined since this post was written, please read the updated article. HTML 5 offers a new element to mark additional information that can enhance an article but isn’t necessarily key to understanding it. However, in the interpretation of <aside> there lies confusion as to how it can be used, and with that there is demand for the Doctor to step up and clear the air. In this article I will look at what <aside> was created for, including sample uses and how not to use this useful, misunderstood element. First, a look at how the HTML 5 specification defines <aside>: The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. What can often trip-up someone reading the specification is the use of the word “sidebar”. How strict should this relationship be? Example Uses Incorrect use of <aside> Closing Thoughts

Downloads | Kaazing Kaazing University is the training arm of Kaazing and is the first & most respected HTML5 and WebSocket training organization in the world. We were the first organization to deliver formal, instructor led HTML5 and WebSocket training worldwide. In the past three years we have trained thousands of Web developers and engineers globally with standing weekly courses for small teams and leading Fortune 500 companies such as Google, Verizon, Wells Fargo, Intel, Cisco, and Oracle. Globally Kaazing University has trained professionals in HTML5 and WebSocket technologies including Semantic Markup, Graphics and 3D, Connectivity and Real-Time, Device Access, Offline and Storage, and Performance to name but a few. Kaazing is the leading authority in global training of HTML5 and WebSocket technology, and our trainers are respected industry experts and published authors. Key benefits of taking your HTML5 training from Kaazing University include:

WordPress – Des champs perso dans l’admin des commentaires - Tutoriels J’en parlais déjà il y a 3 ans en arrière, en expliquant comment personnaliser les champs de formulaire de commentaire, et je reviens sur le sujet car je me rends compte après quelques commentaires de lecteurs que je n’avais pas expliqué comment afficher ces informations dans l’espace d’administration. Voyons cela ensemble. Si jamais vous n’avez pas suivi l’article de personnalisation des champs de formulaire de commentaire, je vous invite à y aller, car ce présent article est sa suite logique, même s’il peut être compris sans cette précédente lecture. Créer une metabox pour les commentaires WordPress permet de créer des petites boîtes un peu partout dans l’espace d’administration grâce à la fonction add_meta_box. Comme d’habitude ce petit bout de code se place dans le fichier functions.php de votre thème, ou dans un plugin si vous vous sentez d’attaque :p Le contenu de la metabox C’est cette fonction qui va créer le contenu de notre metabox. <? Enregistrer les données d’une metabox <?

Home - HTML5 & CSS3 for the Real World By Alexis Goldstein, Louis Lazaris & Estelle Weyl Powerful HTML5 and CSS3 techniques you can use today. Why should you learn HTML5 & CSS3? It works on just about every platform, is compatible with older browsers, and handles errors gracefully. You can create powerful, easy-to-maintain, future-proof web pages. Many common tasks are now simplified, putting more power in your hands. Additionally, you’ll have the freedom to be more expressive in the semantics of your markup. So, perhaps the question is, why would you not learn HTML5 & CSS3? What will I learn? Lose that slightly embarassing Flash habit with clean, native HTML5 videoSet type that truly supports your message with @font-faceTap into next-generation CSS sslectors and powerful new styling with CSS3Use shiny-new APIs to build applications with location sensitivity and full offline functionality Who should read this book? Some parts of the book require some basic familiarity with JavaScript, but they’re not critical. Customer reviews

some useful guidelines In this post I want to illustrate some useful guidelines about how to implement a well organized CSS code structure in view of introduction of HTML 5 markup language. They are not general rules but simple suggestions you can follow in order to improve the readability, manageability, and general organization of CSS code. These suggestions are especially useful if you have to work on complex CSS files that otherwise can be difficult to manage. I prefer to separate CSS code in three distinct sections: a first section that contains general HTML tags; a second section that contains structure tags; a last section with custom classes. Section 1: General HTML tagsIn this section I divide the code in two subsections. A first subsection that contains code to reset HTML standard tags and a second subsection that contains code to redefine HTML standard tags. border:0;margin:0;padding:0;font-size:100%;... /* Subsection 2: Standard HTML tags redefinition */body, form, input { aside {...} aside h1 {...}

Coding An HTML 5 Layout From Scratch - Smashing Coding HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project. As developers we shouldn’t get into pointless discussions of which markup is the best. They all lead to nowhere. Rather, we must get a brand new ideology and modify our coding habits to keep the web accessible. While it is true HTML5 and CSS3 are both a work in progress and is going to stay that way for some time, there’s no reason not to start using it right now. So today we’re going to experiment a little with these new technologies. It’d be a good idea to have a read at some of these articles first: I’ll also assume you know the basics of HTML and CSS. Before we begin… Link There’s a couple of things you have to bear in mind before adventuring on the new markup boat. A word on Progressive Enhancement and Graceful Degradation Link 1. 2. <! A few highlights: <!

HTML5 Boilerplate - A rock-solid default template for HTML5 awesome. Save time. Create with confidence. ★ Analytics, icons, and more A lean, mobile-friendly HTML template; optimized Google Analytics snippet; placeholder touch-device icon; and docs covering dozens of extra tips and tricks. ★ Normalize.css and helpers Includes Normalize.css v1 — a modern, HTML5-ready alternative to CSS resets — and further base styles, helpers, media queries, and print styles. ★ jQuery and Modernizr Get the latest minified versions of two best-of-breed libraries: jQuery (via Google’s CDN, with local fallback) and the Modernizr feature detection library. Who uses HTML5 Boilerplate? Google, Microsoft, NASA, Nike, Barack Obama, Mercedes-Benz, ITV News, BAE Systems, Creative Commons, Australia Post, Entertainment Weekly, Racing Green, and many more.

Related:  html5html5html