The Rise of HTML5 in WordPress. 2011 was a big year for the advancement of HTML5 in the web development community. It became pretty widely adopted, especially for the mobile web. There have been major projects that help developers use HTML5, like Paul Irish's HTML5 Boilerplate (technically 2010, but popularized in 2011) and books galore! I would strongly recommend Jeremy Keith's HTML5 for Web Designers, published by the venerable A Book Apart (a service by Happy Cog). But what started as a movement in 2010 became the proper way to do things in 2011, from mobile websites to progressive enhancements, and that includes integrating HTML5 into WordPress themes. What is HTML5?
What exactly is HTML5? HTML5 is paving the way for faster, more interactive, more semantically correct websites (not to mention it's the best way to make mobile-friendly websites). So how did HTML5 make it's way into WordPress? Default Theme Adoption The New Default Theme We saw a brand new theme in 2011, aptly named "Twenty Eleven. " HTML5 Plugins. Tooltips, Courtesy of HTML5 Data Attributes. Tooltips are relatively simple to implement by just adding a bit of markup to your HTML and employing a bit of CSS. However, if you've never heard of HTML5 data attributes, you may want to check out this alternative (and much cleaner) approach.
Watch Screencast If you've been following the Admin Bar series, this screencast should finish things off nicely. If you haven't been following along, don't worry; this screencast will teach you something you can use in all kinds of situations. Don't like ads? If, for some crazy reason, you'd rather not watch me demonstrate things, below are a couple of snippets to take away and play with. Tooltip Snippet: Added Markup The first example uses additional markup in the form of a <span> within our anchor.
Tooltip Snippet: HTML5 Data Attribute Here's the example which cleans up our markup, uses the HTML5 data-attribute to hold the value of our tooltip, and the css ::before pseudo-element to display it. Useful Resources.
OFFLINE APPS. BASE. 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. But, cross-browser implementations very often differed, and full support for the W3C’s DOM standards have arguably been treated as far more optional than CSS or HTML support. Luckily, the standards and browser developers took notice. The Selectors API. I, b, strong, em: uso e semantica in HTML5 di vecchi e nuovi tag HTML. Uno dei principali punti di forza di HTML5 è stato basarsi sul principio che non si doveva necessariamente "rompere" con il passato per creare un prodotto vincente ma che, piuttosto, proprio partendo dagli errori e conquiste del vecchio HTML si poteva costruire qualche cosa di grandioso e magnifico.
E' proprio in quest'ottica che dei tag ormai considerati obsoleti come <b>, <i>, <strong> e <em> siano stati recuperati ed utilizzati da HTML5 per avere a disposizione degli strumenti che consentissero un più ampio spettro di sfumature semantiche senza doversi inventare complicate alchimie e nuovi tag.
Vediamo nel dettaglio, allora, a che cosa servono (di nuovo) i vecchi tag in questione <i>: il corsivo Immaginiamo di guardare un film: l'azione si svolge, i dialoghi si susseguono, ad un certo punto, osservando un paesaggio, si sente una voce (la cosiddetta "voice-over") che racconta i pensieri di un personaggio. Un altro uso del tag <i> è per indicare parole in un altra lingua, ad esempio: A ciascuno la sua tastiera: input types HTML5 e mobile web. Inserire dati e numeri con la tastiera di un iPhone o di uno smartphone Android non è sempre la cosa più facile: i tasti sono oggettivamente piccoli e la tastiera limitata.
Per mitigare questo problema e rendere più veloce ed efficace l'utilizzo di campi di input nei nostri siti web mobili HTML5 - come al solito - ci viene in soccorso: grazie ai nuovi e diversi "input type", in particolare URL e EMAIL, possiamo dire al telefonino che tipo di input stiamo richiedendo, e il telefonino obbediente mostrerà la tastiera più adeguata Vediamoli adesso uno per uno.
Testo classico Partiamo dalla base: la tastiera che appare nel momento in cui utilizziamo nella nostra pagina un input type "classico", ovvero Email Una delle richieste più frequenti che avviene su un sito web e l'immissione di un indirizzo email. Avremo una tastiera che aiuta nella compilazione del campo, proponendo già, ad esempio, il tasto con la "@" e il punto: Se chiediamo ai nostri utenti di inserire una URL, il tipo di input Numeri.
Introduction to iScroll. In this tutorial I will teach you how to use iScroll 4 to create a simple mobile web site. The site we create will have a fixed header and a fixed footer with content that can be easily scrolled in-between. As we'll see, achieving this effect on both Android and iOS isn't as easy as you might think! Web based apps are a great place for front end developers to begin their journey into the world of building mobile applications. Using your existing knowledge of HTML, CSS, and Javascript, you can build apps that look-and-feel very close to those made with a native platform SDK. Even better, your applications will be cross-platform compatible and will work on any mobile device with a modern browser. Of course, there are some caveats to developing for mobile browsers. While there are plenty of frameworks (e.g. jQuery Mobile, SenchaTouch, etc.) that can help get you started with mobile web apps, for now I'm not going to use any of them.
Step 1: Basic HTML Layout Step 2: Basic CSS. 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. WebSockets e HTML5: il tutorial introduttivo. Sin dall'origine del web uno dei suoi limiti principali (ma forse anche una delle caratteristiche che l'hanno resa semplice e dunque di successo) è l'architettura "stretta" client-server, ovvero una modalità di comunicazione in cui c'è un client ben definito che fa le "domande" e un server (web, pensiamo ad Apache) che fornisce le "risposte" (pagine web, immagini, etc.) solo quand interrogato Se questa struttura è perfetta per un web "statico" fatto di pagine collegate fra loro in cui la richiesta di nuovo contenuto è stimolata dal click su un link da parte dell'utente del browser, questa stessa architettura non è per nulla ideale per applicazioni complesse e ricche di comunicazioni bidirezionali (pensiamo ad un gioco multiplayer via web) o dove le informazioni potrebbero dover arrivare quando sono disponibili e non quando l'utente "fa" qualcosa (ad esempio in applicazioni finanziarie o in real-time) WebSockets Ma vediamo come funziona il tutto.
Avrete notato il protocollo " HTML5 Canvas Tutorials. 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. Adobe MAX slides and resources. CSS: Elastic Videos. While I was coding the Elemin Theme (a responsive WordPress theme that I recently designed), one of the challenges that I faced was to make the embedded videos elastic. Using the max-width:100% and height:auto trick works with native HTML5 video tag, but it doesn't work with embed code using iframe or object tag. After hours of experimenting and Googling, I finally found a trick on how to achieve this. If you are creating a responsive design, this simple CSS trick will come in handy.
View the final demo and resize your browser window to see it in action. View Demo Elastic Videos Elastic HTML5 Videos (demo) With HTML5 video element, you can easily make it elastic by using the max-width:100% trick (see elastic HTML5 video demo). Elastic Object & Iframe Embedded Videos (demo) The trick is very simple. How to Create Fixed Width & Elastic To restrict the width of the video, an additional <div> wrapper is required. Compatibility Credits This trick was found on tjkdesign.com. Case Study: Page Flip Effect from 20thingsilearned.com. Introduction In 2010, F-i.com and the Google Chrome team collaborated on an HTML5-based educational web app called 20 Things I Learned about Browsers and the Web (www.20thingsilearned.com). One of the key ideas behind this project was that it would best be presented in the context of a book.
Since the contents of the book is very much about open web technologies we felt it was important to stay true to that by making the container itself an example of what these technologies allow us to accomplish today. We decided that the best way to achieve the feeling of a real world book is to simulate the good parts of the analogue reading experience while still leveraging the benefits of the digital realm in areas such as navigation. A lot of effort went into the graphical and interactive treatment of the reading flow - especially how the pages of the books flip from one page to another.
Getting Started Markup <div id="book"><canvas id="pageflip-canvas"></canvas><div id="pages"><section><div><! Logic. HTML5, SEO e personal branding: tutorial su authorship markup. Nella nostra attività di lettura sul web - siano articoli, post, commenti o tutorial - capita spesso di imbatterci in un autore che ci piace particolarmente e che vorremmo "seguire" in maniera più assidua. Se questo può essere fatto quando, ad esempio, questo autore ha un profilo Twitter sarebbe utile che anche i motori di ricerca ci aiutassero in questa nostra passione, indicandoci ad esempio nei risultati gli altri articoli (magari sullo stesso tema, cioè sulla stessa keyword che stiamo ricercando) scritti da questa persona.
Google sta pensando proprio ad un meccanismo del genere, utilizzando gli strumenti e gli standard di semantic web che tecnologie come HTML5 mettono a disposizione. Già da un mesetto, infatti, Google ha annunciato il supporto del cosiddetto "authorship markup", ovvero una tecnica per identificare in maniera univoca l'autore di un pezzo o articolo a prescindere dal sito su cui questo è pubblicato. Authorship markup: che cosa è e come si usa Un esempio concreto rel="me"