TUTORIALS
Get flash to fully experience Pearltrees
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!
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
Quick Tip: Tooltips, Courtesy of HTML5 Data Attributes
MICRODATI
OFFLINE APPS
BASE
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).
HTML5 selectors API – It’s like a Swiss Army Knife for the DOM
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.
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.
A ciascuno la sua tastiera: input types HTML5 e mobile web
Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher. Users no longer just browse the web with desktop computers. Users now use mobile phones, small notebooks, tablet devices such as iPad or Playbook to access the web. So the traditional fixed width design doesn't work any more. Web design needs to be adaptive. The layout needs to be automatically adjusted to fit all display resolution and devices.
Adaptive & Mobile Design with CSS3 Media Queries
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.
Introduction to iScroll
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!
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
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.Download the slides for my presentation on Designing with CSS3 Effectively and Efficiently for Adobe MAX, as well as get links to related resources on CSS3 effects, benefits, and media queries. I just finished speaking at Adobe MAX on “Designing with CSS3 Effectively & Efficiently,” the latest iteration of the talk I gave at Web Directions USA , the CSS Summit , and ConvergeSE . I talked about how CSS3 is about more than making things look pretty (though it’s really good at that too).
Adobe MAX slides and resources
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.
CSS: Elastic Videos
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.
HTML5 Rocks - Case Study: Page Flip Effect from 20thingsilearned.com
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.