Una timeline di stile
Oggi vi segnalo questo ottimo articolo che vi mostra come creare una timeline utilizzando semplicemente una lista non ordinata di elementi opportunamente impaginata con un foglio di stile. Questo è il risultato, una rappresentazione semplice e lineare con un utilizzo estremamente minimale di markup HTML:
Ogni elemento della lista è posizionato in modo assoluto all’interno del suo contenitore. Non esiste un sistema automatico, per cui è necessario calcolare la dimensione di ogni barra e la sua posizione (magari si potrebbe pensare ad uno script PHP che potrebbe calcolare in automatico questi dati).
Oltre alle barre degli eventi, c’è sotto l’asse orizzontale che posiziona nel giusto contesto temporale la timeline. Anche questo righello è creato via CSS impaginando un’altra lista non ordinata di elementi.
Con poche righe di codice si possono ottenere grandi risultati, senza dover impazzire con oggetti flash o plugin jQuery. Se qualche lettore ha la voglia, potrebbe implementare il wrapper PHP che genera il codice HTML con i valori di larghezza e posizionamento delle barre. E’ un’ottima idea per un buon articolo di successo!
Articoli che potrebbero interessarti...
Le API per costruire la propria TimeLine
Timeline è un widget DHTML/AJAX pensato per visualizzare la successione di eventi nel tempo. E' una vera e propria libreria javascript e l'API, ben documentata, mette a disposizione semplici e potenti metodi per creare la propria timeline personale.
eventi, json, libreria-javascript, timeline, xml
Timeline: descrivere lo scorrere del tempo nel web
Descrivere il tempo che passa non è semplice. Il metodo migliore è tracciare una linea graduata e indicare il tempo che scorre lungo tale segmento magari posizionando gli eventi che si susseguono sequenzialmente.
Nel web esistono alcuni strumenti che permettono di disegnare timeline. Ve ne mostro tre.
dipity, embed, feed rss, Flash, scorrere, sequenzialità, tempo, timeline
Timeline: descrivere lo scorrere del tempo nel web
Descrivere il tempo che passa non è semplice. Il metodo migliore è tracciare una linea graduata e indicare il tempo che scorre lungo tale segmento magari posizionando gli eventi che si susseguono sequenzialmente.
Nel web esistono alcuni strumenti che permettono di disegnare timeline. Ve ne mostro tre.
dipity, embed, feed rss, Flash, tempo, timeline, xtimeline
Come progettare web in stile “Googley”
Verso la fine del 2007, Google ha deciso di scrivere nero su bianco le caratteristiche di un'interfaccia in stile Google, Googley appunto. Questo per guidare gli sviluppatori Google sparsi in tutto il mondo.
googley, regole web design, web design google
Una sitemap di stile
Riprendendo l’articolo di ieri, oggi segnalo un ottimo tutorial per creare la mappa del proprio sito solamente utilizzando liste non ordinate e un foglio di stile.
SlickMap CSS è un foglio di stile semplice creato appositamente per creare…
albero pagine, css, foglio di stile, liste non ordinate, mappa del sito, sitemap, slickmap
CSSVista: un editor per fogli di stile
Oggi segnalo CSSVista, un applicazione gratuita per Windows pensata per gli sviluppatori web che permette di scrivere il proprio codice CSS e vedere in tempo reale il risultato sia con Internet Explorer che con Firefox, in modo simultaneo. Bello,…
css, editor-css

