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 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. 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. And for the most part we’ve all accepted that some of the things we learn today can be obsolete tomorrow, but that’s the nature of our industry. 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. The DOCTYPE
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?