background preloader

HTML5 Boilerplate - A rock-solid default template for HTML5 awesome.

HTML5 Boilerplate - A rock-solid default template for HTML5 awesome.

An Open-Source, HTML5 Framework for iPad E-books A group of Italian developers has just released a free and open-source framework for creating e-books for the iPad. The Baker E-book Framework allows designers and developers to turn fixed-width HTML5 pages into an e-book format and publish the finished product. After that, all you need to do is follow the App Store submission guidelines, and you're on your way to e-book greatness. To design for the Baker Framework, simply build HTML5 pages with a fixed width of 768 pixels. You can test your HTML versions on an iPad using the Safari browser and iterate accordingly. Don't own an iPad? E-book files are then packaged in the HPub format. Finally, you download the Baker Framework, rename the Xcode project and include your book and icon. To see an example of a Baker-created e-book, check out this free title, 5x15 Tokyo [iTunes link]: "HTML5 is out there," co-founder Davide Casali wrote us in an e-mail.

HTML5 selectors API – It’s like a Swiss Army Knife for the DOM In the infancy of JavaScript, there was little if any concept of an HTML document object model (DOM). Even though JavaScript was invented to enable web developers to manipulate parts of a web page, and in the original implementation, in Netscape 2.0, developers could only access the form elements, links, and images in a page. Useful for form validation, and first widely used for image rollover techniques (think :hover, before CSS), but far from the general purpose tool to create modern web applications we now know (and love/​hate). Newer iterations of the DOM provided developers with access to far more than just that original limited range of elements, as well as the ability to insert, modify and delete elements in an HTML document. Luckily, the standards and browser developers took notice. In this short (by my standards) article, we’ll look at the Selectors API, how you use it, browser support, and some little things you might like to keep in mind while using it. The Selectors API

Nimblekit --Native iOS w/ Html & JS. HTML5: Edition for Web Authors This document is a strict subset of the full HTML5 specification that omits user-agent (UA) implementation details. It is targeted toward Web authors and others who are not UA implementors and who want a view of the HTML specification that focuses more precisely on details relevant to using the HTML language to create Web documents and Web applications. Because this document does not provide implementation conformance criteria, UA implementors should not rely on it, but should instead refer to the full HTML5 specification. This document is an automated redaction of the full HTML5 specification. As such, the two documents are supposed to agree on normative matters concerning Web authors. However, if the documents disagree, this is a bug in the redaction process and the unredacted full HTML specification takes precedence. This section describes the status of this document at the time of its publication. Implementors should be aware that this specification is not stable.

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. 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. Use Graceful Degradation techniques and technologies to keep things in place for legacy browsers.Use Progressive Enhancement techniques and technologies to be up to date with the latest trends.Use HTML5 alongside a rising technology: Microformats.Have a clear vision of some of the most exciting new features HTML5 and CSS3 will bring. It’d be a good idea to have a read at some of these articles first: Before we begin… Link 1. 2. <! A few highlights: <!

Responsive image gallery con HTML5, CSS3 e jQuery PhotoSwipe In questo articolo applichiamo due principi cardine per lo sviluppo di moderne interfacce web nella creazione di una gallery di immagini: si tratta del responsive design e del progressive enhancement. In parole povere, il layout della galleria, realizzato in maniera “fluida” con le dimensioni degli elementi espresse in misure percentuali, assicurerà una corretta visualizzazione della pagina su tutti i device (desktop, notebook, smarthone, tablet) adattandosi perfettamente a qualsiasi risoluzione dello schermo. Inoltre, l’impiego attento delle nuove tecnologie HTML5, CSS3 e Javascript consentirà di fornire con i browser più recenti l’esperienza di navigazione più piacevole e avanzata senza precludere la compatibilità e l’accessibilità su dispositivi e software meno aggiornati. Dulcis in fundo, mettere in pratica tutto questo e lo sviluppo dell’esempio finale sono molto semplici. Cominciamo subito! Non rimane che analizzare la parte “interattiva” dello sviluppo.

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. 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. 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? This book is aimed at Designers and front-end developers who want to learn about the latest generation of browser-based technologies. Customer reviews

Corso su WebGL - Introduzione Proprio pochi giorni fa (esattamente giorno 3 Marzo 2011) è stata finalmente rilasciata la versione 1.0 delle specifiche per la libreria grafica che a braccetto con HTML 5 dovrebbe cambiare il web…stiamo parlando di WebGL! Molti di voi si domanderanno cosa siano queste librerie dal pomposo nome, e noi siamo proprio qui a spiegarvelo! Il viaggio che stiamo per intraprendere insieme infatti ci porterà alla scoperta di questa recentissima tecnologia che dovrebbe finalmente avvicinare in maniera definitiva il mondo della grafica 3d con quello del web. Ma andiamo con ordine…faremo prima un breve accenno a cosa è esattamente WebGL, a come nasce e successivamente a quale sarà il “piano dell’opera” del corso per imparare ad utilizzare questa libreria. Cosa è WebGL? La programmazione con WebGL può essere quindi sviluppata con ogni linguaggio “DOM Compatibile” (quindi principalmente javascript), a patto che il browser sia compatibile. I vantaggi di WebGL Iniziamo il nostro viaggio… Conclusioni

html5shim - HTML5 IE enabling script Dual licensed under the MIT or GPL Version 2 licenses Full original, uncompressed source available here: Source code adds new HTML5 elements (which is simple code), but also supports printing HTML5 elements and includes the default styles for HTML5 elements, like block on article and section. Getting it to work in the browser was easy, @jon_neal and afarkas made IE actually print HTML5 elements - these guys are to take all the credit. To use this script, download the html5shiv and roll it in to your own code (ideally minified). Common question: what's the difference between the html5shim and the html5shiv?