Gli ultimi post di Edit
Ancora una galleria di immagini
Venerdì 21 Aprile 2006 - 10:50
di Cesare Lamanna
Rischia di diventare un tormentone su questo blog, ma ecco a voi, signori e signore, l’ennesima galleria di immagini DOMbased. Ad offrircela è il signor Nathan Smith di Son Spring. La demo.
Categoria: Scripting | Permalink | Commenti (5)
I bookmark del venerdì
Venerdì 14 Aprile 2006 - 12:10
di Alessandro Fulciniti
Eccoci al quasi consueto appuntamento del venerdì con i bookmark. Apriamo con una risorsa non recentissima ma senza dubbio meritevole: Design for Accessibility è un’ottima introduzione all’accessibilità e in particolare alle WCAG realizzata da Andy Budd.
Restando in tema W3C, è stato da poco pubblicato il working draft delle specifiche dell’oggetto XMLHttpRequest, che conferma ancora una volta l’impegno del W3C nel promuovere i web standards. Ecco l’introduzione del documento:
The XMLHttpRequest object is implemented today, in some form, by many popular Web browsers.
Unfortunately the implementations are not completely interoperable. The goal of this specification is to document a minimum set of interoperable features based on existing implementations, allowing Web developers to use these features without platform-specific code.
Passiamo al Javascript con JaS - Javascript Slides, un esempio di slideshow: in apperenza si presenta versatile, include uno slideshow e diversi temi… ma ci sono un paio punti critici da evidenziare. Primo: le immagini e gli ingrandimenti vengono inserite nella pagina attraverso il DOM, e restano quindi inaccessibili a visitatori con Javascript disabilitato o browser non DOM-compatibili. Secondo: le miniature vengono realizzate ridimensionando gli ingrandimenti attraverso i CSS; il caricamento della pagina è quindi lento e il suo uso è sconsigliato quando le immagini della galleria sono molte.
Per quanto riguarda i CSS: in Applied CSS vertical-align viene presentata la risposta a un problema di design comune, ovvero la centratura verticale di un’immagine
all’interno di un elemento con altezza fissa. Concludo segnalando CSS Remix, l’ennesima galleria di siti basati sui CSS. È tutto per oggi: alla prossima e…serena Pasqua a tutti.
Categoria: Bookmark | Permalink | Commenti (2)
Ecco LightBox 2!
Giovedì 30 Marzo 2006 - 13:40
di Alessandro Fulciniti
Dopo LightBox e diverse varianti, Lokesh Dhakar, autore della versione originale, ha presentato ieri Lightbox JS v2.0, una soluzione per avere ingrandimenti (e da questa seconda versione anche slideshow) di immagini nella stessa pagina.
Una tecnica notevole, che combina ora l’idea originale di LightBox con effetti di Script.aculo.us grazie anche all’uso di Prototype per ottenere transizioni e navigazione tra ingrandimenti davvero accattivanti. Due i nei della nuova soluzione: il peso (quasi 100Kb di Javascript) e la compatibilità cross-browser non dichiarata. Sto facendo un po’ di prove con la nuova beta di IE7 e sul primo ingrandimento visualizzato dal caricamento della pagina lo script ha qualche problema… non saprei se lo stesso problema si riscontra anche con IE6.
Categoria: Scripting | Permalink | Commenti (36)
Suckerfish HoverLightbox
Martedì 28 Marzo 2006 - 13:43
di Cesare Lamanna
Non è certo il primo esempio di mashup di diverse tecniche CSS/Javascript questo Suckerfish HoverLightbox, un ibrido nato dalla fusione di tecniche come Hoverbox Image Gallery, Suckerfish Dropdowns e Lightbox. Il post è lungo. La tecnica spiegata per benino. Gli esempi non mancano. Buona lettura.
Categoria: Scripting | Permalink | Commenti (2)
Miniature master-slave con Javascript
Venerdì 3 Marzo 2006 - 13:40
di Alessandro Fulciniti
Nel preparare l’indice di Layout Gala ho pensato di impiegare un layout liquido con delle miniature float, le tanto conosciute floating thumbnails che ho già usato in diverse occasioni su PRO. C’è però una cosa non credo sia molto facile ottenere con i soli CSS: avere una o più sezioni di testo la cui larghezza si accorda perfettamente con quella delle miniature, tale da sintonizzare
l’allineamento del testo con entrambi i lati della galleria. Volevo infatti dare risalto all’elemento centrale della pagina, ovvero la galleria, e mantenere un certo ordine con il testo della pagina.
Ho così pensato di utilizzare CSS e Javascript con un approccio master-slave.
In elettronica questo termine si riferisce ad un’architettura in cui un dispositivo (il master)
controlla uno o più dispositivi (slave). Nel caso della pagina indice di Layout Gala (che vi invito ad osservare con Javascript disabilitato) la galleria di thumbnails è il master, mentre le sezioni di testo precedenti e successive sono gli slave. Credo che sia una tecnica che valga la pena di spiegare.
Continua a leggere Miniature master-slave con Javascript
Categoria: Scripting | Permalink | Commenti (2)
Sull’uso degli attributi non standard
Lunedì 27 Febbraio 2006 - 13:50
di Cesare Lamanna
Su diversi blog si discute di un tutorial apparso recentemente su Webmonkey: Live Thumbnails: Watch ‘em Grow.
La tecnica, basata sull’uso di Javascript e DOM, consente la creazione di una galleria di immagini con miniature che si ingrandiscono nella stessa pagina. Ecco la demo.
A far discutere è il fatto di poggiare sull’utilizzo di attributi HTML non standard per attivare le funzioni principali dello script. Questa la parte ‘incriminata’:
<a href="large.jpeg" class="livethumbnail">
<img src=”thumbnail.jpeg” width=”120″ height=”90″ largewidth=”480″ largeheight=”360″ />
</a>
Gli attributi largewidth e largeheight non sono validi, ma servono per passare allo script le dimensioni reali dell’immagine. Chris Heilman rimprovera all’autore una certa superficialità: è vero che fa riferimento ad un articolo di Peter Paul Koch in cui la soluzione dei custom attributes viene valutata positivamente, ma dimentica che lo stesso suggerisce l’adozione, in queste situazioni, di una DTD ad hoc in grado di supportare gli elementi non standard. E già su questo potrebbe iniziare anche qui il dibattito.
C’è però un altro appunto di Heilman che vorrei evidenziare. Riguarda l’uso, in casi simili, del ridimensionamento delle immagini via HTML, una soluzione che definisce “ugly as hell and slow on a busy machine“. È davvero così? Opinioni?
Categoria: Web Standards | Permalink | Commenti (9)
Tre segnalazioni: gli aggiornamenti da non perdere
Lunedì 16 Gennaio 2006 - 14:20
di Alessandro Fulciniti
Tra le segnalazioni che ho fatto tempo fa ci sono diverse soluzioni che sono state aggiornate, espanse o migliorate. Ho pensato di racchiuderle in un post di aggiornamento. Cominciamo dallo
Star Rater, di cui ho parlato in questo post. Ecco il suo seguito: CSS Star Rating Part Deux. Interessante, anche se ho una piccola riflessione: il valore di default a tre stelle e mezzo non credo sia una buona scelta se non è possibile usarlo.
Ho segnalato qui diversi menu con grafica e CSS già pronti all’uso: da allora l’autore ne ha realizzati altri sia orizzontali sia verticali: davvero belli.
Infine, ho linkato la settimana scorsa Lightbox, accolto con entusiasmo da molti lettori. Nella stessa pagina è stato presentato un aggiornamento molto utile: la didascalia sulle immagini ingrandite. La cosa notevole è che per ottenerla vi basterà scaricare lo script aggiornato e aggiungere l’attributo title al link all’immagine ingrandita. La semplicità rimane invariata, ed è davvero questo il punto di forza della soluzione. Da seguire il sito dell’autore, che questa settimana dovrebbe presentare uno script complementare per una photo-gallery.
Categoria: Bookmark | Permalink | Commenti (2)
LightBox, ingrandimenti nella stessa pagina
Martedì 10 Gennaio 2006 - 09:00
di Alessandro Fulciniti
Tra le molteplici soluzioni di miniature e ingrandimenti di foto e immagini, quelle che usano l’ingrandimento nella stessa pagina sono forse le più efficaci e per diversi motivi: riducono i tempi di interazione con l’utente, restano accessibili con Javascript disabilitato e soprattutto non necessitano del tasto indietro della navigazione del browser.
Un po’ di tempo fa ho presentato un piccolo script per avere una galleria con
ingrandimento nella stessa pagina. Recentemente, poi, è comparso LightBox, una soluzione leggermente
differente ma altrettanto notevole. La cosa interessante è che si può applicare a qualsiasi immagine
(basta aggiungere un attributo nell’HTML), che compare un’icona di attesa durante il caricamento
e che l’ingrandimento compare a centro pagina, indipendentemente dalla larghezza dello
schermo.
A parer mio l’unico neo dell’esempio è che la pagina si oscura un po’ troppo quando viene mostrato l’ingrandimento, ma il CSS dovrebbe essere facilmente modificabile e
adattabile ai propri gusti.
Categoria: Scripting | Permalink | Commenti (20)
Una galleria fotografica con i CSS
Mercoledì 14 Settembre 2005 - 08:19
di Alessandro Fulciniti
Stu Nicholls è uno degli ultimi pionieri dei CSS e le sue sperimentazioni,
che si possono trovare sul suo sito CSSPlay, mi hanno sempre affascinato.
Il suo più recente tutorial
presentato su WebReference è incentrato su questo tema: come
costruire una galleria fotografica interamente basata sui CSS. Il risultato
è decisamente sorprendente.
Non si può mettere in dubbio un uso davvero creativo dei CSS, ma non è solo sotto
l’aspetto scenografico che bisogna valutare la bontà di una tecnica. Ci sono almeno
quattro motivi per cui non la userei mai in un progetto reale.
Continua a leggere Una galleria fotografica con i CSS
Categoria: CSS | Permalink | Commenti (3)