daniele rollo » Webdesigner

Animatable: uno showcase di animazioni con CSS3

daniele — Thu, 03 Nov 2011 10:50:45 +0000

Lea Verou ha messo on line Animatable, uno showcase di animazioni applicate a elementi html. Tutto fatto con CSS. Date un’occhiata: animatable.

Animazioni CSS sulla pagina di iPhone 4s

daniele — Wed, 26 Oct 2011 16:08:30 +0000

La pagina di iPhone 4S sul sito Apple è in gran parte occupata da una presentazione animata che mostra le principali caratteristiche dello smartphone. Un bel modo di utilizzare le animazioni CSS e provare a realizzare uno slideshow decisamente più complesso e accattivante di quelli a cui siamo abituati.

John Ball ha creato una versione in miniatura della pagina, in cui sono visibili tutti gli elementi che di volta in volta vengono visualizzati e che aiuta a capire come sono stati pensate i vari movimenti e rotazioni. Date un’occhiata.

Joyride: fare il tour di una pagina web con un plugin jquery

daniele — Tue, 25 Oct 2011 10:39:38 +0000

Capita spesso, quando si apre per la prima volta una pagina web che contiene un’interfaccia più o meno complessa, di venire “accompagnati” passo dopo passo, tra le varie funzionalità dell’interfaccia. Il meccanismo è semplice: si apre un tooltip in corrispondenza dell’elemento che viene presentato, poi con un click si passa al successivo, la pagina magari scrolla e si apre un nuovo tooltip che spiega a cosa serve l’elemento che si sta visualizzando.

Joyride è un plugin jQuery che permette di aggiungere questo tipo di tour alla pagina in maniera molto semplice: si tratta di creare una lista con i contenuti da visualizzare di volta in volta ad ogni step del tour (in questa lista si identificano – tramite ID – gli elementi della pagina su cui applicare i tooltip, e quindi a livello di javascript, chiamare il metodo joyride.

Timeline html con jQuery, un plugin

daniele — Thu, 20 Oct 2011 11:24:08 +0000

La scelta di Facebook di rappresentare il profilo dell’utente con una timeline ha reso evidente il successo di uno strumento che negli ultimi mesi era diventato sempre più di utilizzato. In effetti, anche prima della timeline di facebook avevamo visto diversi esempi e utilizzi dello strumento, per lo più per fini di information design.

Inevitabile quindi che sia arrivato il plugin per jQuery che permette di creare timeline in una pagina html. Il punto di partenza, a livello di markup, sono un paio di liste UL, poi fa tutto il plugin, o quasi. Da provare: timelinr

Privacy basata sulla geolocalizzazione: le geofences di Flickr

daniele — Tue, 06 Sep 2011 14:03:12 +0000

Flickr ha presentato un nuovo modo per impostare il livello di privacy delle fotografie caricate dagli utenti. Creando una geofence, l’utente imposta un determinato livello di privacy (pubblica, solo amici, solo famiglia ecc.) per tutte le foto scattate (geolocalizzate) in quell’area.

Un esempio molto semplice: tutte le foto geolocalizzate nel raggio di 50 metri da casa mia saranno visibili solo ai miei famililiari e amici.

L’utente potrà in qualunque momento stabilire delle eccezioni alle geofence e modificare il livello di privacy sulla singola foto.
Le geofence si gesticono dalla pagina di geoprivacy di flickr.

Il Planetarium in html5

daniele — Thu, 17 Mar 2011 17:07:36 +0000

In occasione del lancio di Firefox 4, la galleria delle meraviglie open di Mozilla (web’o'wonder gallery) presenta una nuova bellissima web-app che è un esempio concreto di come si possa usare html5 per creare una brillante infografica interattiva.

Da vedere: Planetarium, An HTML5 Astronomical Adventure.

L’hanno fatta Guillaume Lecollinet e Frank Lecollinet di littleworkshop.fr

Un pizzico di gamification anche per twitter

daniele — Tue, 15 Mar 2011 16:05:14 +0000

Usare meccaniche tipiche dei giochi per spingere l’utente a un determinato comportamento: è la gamification, un approccio usato molto spesso nel webdesign.

Su thinkvitamin.com Ryan Carson fa notare che anche twitter riccore a un pizzico di gamification: per spingere l’utente ad aggiungere ai following almeno i primi dieci utenti, propone dieci piccoli slot da “riempire” allineati in una specie di progress bar con un contatore ben in evidenza.

A proposito se vuoi aggiungermi su twitter, mi trovi qua…

Perchè (e come) il futuro delle app è HTML5

daniele — Fri, 18 Feb 2011 13:08:07 +0000

Segnalo, a chi non l’avesse ancora letto, Verso un mondo di (web) apps: un post di Matteo Barbero, che parte dalla constatazione di Chris Anderson e Micheal Wolf “the web is dead” per mostrare come invece ci potrebbe attendere un futuro di webapp fatte in HTML5:

Ora siamo alle soglie di una nuova rivoluzione: le applicazioni web 2.0 sono pronte a fare un salto in avanti e diventare (quasi) del tutto simili alle applicazioni native, sia desktop che mobile. Questo principalmente grazie alle novità introdotti da HTML5, la nuova versione del linguaggio di markup web e alla lungimiranza dei principali player del settore, che stanno già investendo in questa direzione. Ci concentreremo ora su tre features introdotte da HTML5 (in realtà le novità sono molte di più), che ritengo particolarmente importanti per questa transizione verso un mondo “application-oriented”:

- Accesso all’hardware del device
- Esecuzione offline
- Local storage

Da leggere tutto: Verso un mondo di (web) apps.

Pulsanti con pattern di sfondo, tutto con CSS3

daniele — Fri, 18 Feb 2011 11:04:20 +0000

Lea Verou in questo post ha spiegato una tecnica interessante per applicare semplici pattern su elementi html sfruttando CSS3.

La tecnica si basa sull’attributo color-stop che viene specificato per il gradiente: indicando due color-stop con la stessa posizione, è possibile ottenere un cambio improvviso di colore, anziché una graduale sfumatura.
Con questa tecnica, l’autrice del post mostra come ottenere pattern più complessi, come quello in stile picnic o a scacchiera.
A parte il risultato finale, il post è interessante anche per alcune scelte della webdesigner, come l’utilizzo di un color-stop trasparente, per sfruttare il colore di sfondo come fallback per i browser che non supportano i gradienti.

In questo Cross Browser CSS gradient buttons Red Team Design mostra come sfruttare la tecnica dei gradient pattern appena vista, insieme alle altre proprietà (RGBA color mode, Box shadow, Text shadow, Rounded corners) che si usano di solito per creare pulsanti con CSS3, per ottenere un risultato abbastanza particolare (proprio per via dei pattern).

Anche in questo caso grande attenzione alla compatibilità con i browser, visto l’utilizzo massiccio di proprietà non sempre supportate.

Ecco i due link:

La censura su internet in cinque grafici

daniele — Tue, 15 Feb 2011 16:59:38 +0000

Yuxiyou.net pubblica una slideshow che racconta lo stato della censura di internet. L’ironico titolo iniziale “So you still think the Internet is free” precede cinque bellissimi grafici che uno dopo l’altro raccontano in quali paesi e a che livello la censura avviene, che tipo di siti vengono censurati (blog, forum, siti di ONG ecc.), poi in una sorta di “workflow” della censura (vedi immagine sotto) il procedimento con cui i governi riescono a bloccare gli utenti e infine i motivi principali per cui la censura viene pratica.

Link: so you still think the Internet is free