WebSlide

23 Sep

WebSlide è un'ottima applicazione realizzata in Javascript che permette di realizzare presentazioni di immagini e contenuti in una modalità  molto semplice e di sicuro impatto. Nel sito ufficiale è possibile visualizzare due demo: la prima, posta direttamente nella stessa home, pone la presentazione in un iframe, mentre è con la seconda che si vedono le reali potenzialità  dell'applicazione. àˆ possibile navigare all'interno delle presentazione attraverso un'apposita barra oppure tramite gli shortcut da tastiera (qui la documentazione completa). Come afferma l'autore, WebSlide può essere molto utile agli sviluppatori/designer per presentare al cliente in modo rapido i mockup di un sito web.

Continua a leggere WebSlide

Categoria: Scripting

La più recente soluzione per gli ingrandimenti di immagini nella stessa pagina si chiama semplicemente così: Galleria. Lo script è in grado di trasformare una semplice lista ordinata di immagini a dimensioni naturali in una vera e propria galleria di miniature con ingrandimenti, generando automaticamente le thumbnail e aggiungendo l'interazione mediante Javascript. Molte le caratteristiche interessanti, apprezzabili attraverso i due esempi (primo e secondo) tra cui spiccano a parer mio la possibilità  di personalizzare l'aspetto della galleria e la navigabilità  con i tasti avanti/indietro del browser. Galleria si basa su JQuery, è leggera (2.5 Kb) ed è totalmente non intrusiva: in assenza di Javascript e/o CSS verranno semplicemente mostrate le immagini a dimensione naturale. Si tratta di una soluzione molto pratica per gli sviluppatori (riduce infatti moltissimo i tempi di sviluppo e non necessita la preparazione delle miniature) non esente però da difetti: tra questi spicca a parer mio il tempo di attesa da parte dell'utente per caricare tutti gli ingrandimenti e il correlato carico del server. Inoltre, la navigazione attraverso i link prev/next avrebbe potuto essere aggiunta da Javascript stesso. Per il download dell'ultima versione, il progetto è ospitato su Google Code.

Continua a leggere Ingrandimenti nella stessa pagina con Galleria

Categoria: Scripting

L'ennesima alternativa a soluzioni in stile Lightbox è il recente Lightview. Come Lightbox, consente di ottenere ingrandimenti di immagini singole e set di immagini a centro pagina attraverso una finestra modale, ma aggiunge molte caratteristiche interessanti. Tra le più notevoli, a parer mio: Possibilità  di avere slideshow tra gli ingrandimenti Preload intelligente degli ingrandimenti Alto grado di personalizzazione attraverso le molte opzioni disponibili dallo script, senza la necessità  di modificare il CSS Cornice arrotondata senza immagini ma con le Canvas Ridimensionamento intelligente, per far sì che gli ingrandimenti restino confinati nel viewport Si tratta di un progetto decisamente notevole e molto promettente. Lightview si basa sull'ormai consolidata accoppiata Prototype e Scriptaculous, che bisognerà  scaricare a parte per poter mettere in azione il tutto.

Continua a leggere Lightview, ovvero LightBox evoluto

Categoria: Scripting

Due giorni fa i ragazzi di Particletree hanno annunciato una nuova risorsa, la Wufoo Form Gallery. Si tratta di una raccolta di oltre 40 template HTML per moduli di vario tipo, da quelli per la registrazione ai sondaggi, dalla raccolta ordini al tracking di attività . Accanto ai template HTML è disponibile una collezione di tantissimi temi CSS da applicare a questi ultimi. Tutto gratuito. E che ne dite dell'interfaccia di navigazione tra i temi CSS? Io la trovo bellissima.

Continua a leggere Una galleria di template HTML temi CSS per form

Categoria: Web Design

Nei molti articoli su HTML.it ho sempre cercato di evitare sia hack che commento condizionale, mantenendo il CSS il più pulito e semplice possibile. In certi casi però servire dichiarazioni e/o regole specifiche per determinati browser sembra necessario per ottenere una consistenza di resa cross-browser. àˆ pur vero che, sebbene si tratti di pratiche di sviluppo che ho sconsigliato più volte, si tratta di strumenti che uno sviluppatore dovrebbe conoscere per poter usare in caso di necessità . àˆ per questo che non molto tempo fa è stato pubblicato l'articolo Hack per IE7 con la relativa tabella di compatibilità . Qui sul blog ho presentato le diverse soluzioni per miniature centrate, tra cui Miniature centrate con i CSS. In questo caso non sono riuscito ad evitare la discriminazione per IE, e ho dovuto usare il commento condizionale. Vorrei proporre qui sul blog l'alternativa che usa invece gli hack. Ecco il remake. (more...)

Continua a leggere Miniature centrate: un remake

Categoria: CSS

Trovo che le miniature siano un modo molto accattivante per presentare in maniera efficace le gallerie di immagini. I problemi sorgono però nel momento in cui vogliamo sistemare miniature di dimensioni diverse o con differente orientamento.A questo punto si presentano tre soluzioni. La prima, e la meno pratica, è aprire il vostro programma di grafica preferito e procedere a ridimensionare e/o aggiungere spazio bianco per far si che tutte le miniature abbiano alla fine la stessa dimensione, per poi usare una soluzione che sia adatta per miniature delle stesse dimensioni (tipo questa presentata nella serie usare il background).La seconda: centrare sia verticalmente che orizzontalmente le miniature, così da consentire differenti misure... magari con una piccola cornice attorno, un po' com'è stato presentato nell'articolo Miniature centrate con i CSS (qui l'esempio).La terza soluzione viene presentata nel recentissimo Image gallery that doesnÂ’t fall apart di Emanuel Blagonic: si tratta semplicemente di assegnare le dimensioni ai contenitori delle immagini (tipicamente link, div o list-item) e far sì che il contenuto in eccesso venga tagliato grazie alla proprietà  overflow. Semplice ed efficace.

Continua a leggere Gallerie di miniature non omogenee

Categoria: CSS

Slimbox

9 Feb

Dalla comparsa della prima versione di LightBox e di LightBox 2, sono state rilasciate numerose implementazioni alternative di cui abbiamo parlato in diverse occasioni qui sul blog. Tra le più recenti si annovera SlimBox, che si presenta palesemente come un clone più leggero.Nessuna pretesa di originalità  quindi, la stessa compatibilità  e l'identica modalità  d'utilizzo della versione originale in circa un quinto del peso della versione originale fanno di SlimBox un'appetibile alternativa con i suoi 20Kb di peso. Al contrario di LightBox 2, che usa Prototype e Scriptaculous, SlimBox si appoggia a Mootools.In realtà , anche se SlimBox è nato inizialmente come puro e semplice clone di LightBox2, ha introdotto con le varie release (la prima risale a fine Ottobre 2006) diverse caratteristiche e miglioramenti notevoli: tra questi vale la pena di citare il fatto che è lo script è operativo al caricamento dell'albero DOM, c'è la possibilita di navigare tra le diapositive da tastiera e si possono applicare i moltissimi effetti di transizione di mootools nelle transizioni tra immagini.L'ultima versione di SlimBox è la 1.3, è stata rilasciata da pochissimo (il 5 febbraio) ed è aggiornata alla recente versione 1.0 di Mootools.

Continua a leggere Slimbox

Categoria: Web Design

C'è un ritorno di interesse a gallerie di ispirazione e showcase, forse in parte è dovuto a Top Ten CSS Gallery/Showcase Websites. In 50 CSS showcase websites ce ne sono ben 50... ma a parer mio il numero di siti di questa tipologia potrebbero essere di più. Originale invece FullSingle, una galleria di ispirazione dedicata solo ai siti a pagina singola, che si aggiunge a One page folios segnalato tempo fa qui sul blog.A proposito di showcase: oltre ad essere una vera fonte di ispirazione, magari è utile a chi si fa il blog con Wordpress questo 80 Wordpress Themes che presenta una selezione di template davvero bella.

Continua a leggere Showcase, ispirazione e templates WordPress

Categoria: Grafica

Qualche segnalazione veloce per chiudere la settimana e anche per iniziare il 2007 (a proposito: auguri a tutti!). Cominciamo con il PHP: se vorrete mettere online le foto delle feste, magari potrà  tornarvi utile questo Phormer, uno script per gestire con PHP una galleria di immagini senza database. Sempre a proposito di script PHP, Evil Warlus è un repositorio per script e tutorial con tag e categorie decisamente utile. Tornando alle fotografie: sempre di più le soluzioni per incorporare le foto di Flickr con Javascript: l'ultima che ho trovato è Javascript Flickr slideshow: devo dire però che la rotazione delle immagini nella demo per un attimo mi ha fatto venire il mal di mare. Il fenomeno webtop è in costante aumento, ma devo ammettere che la creazione di newsletter ed email grafiche in salsa Web 2.0 mi mancava... ecco quindi LetterPop, un servizio che consente di creare gratuitamente newsletter ed email con un'interfaccia molto semplice principalmente WYSIWYG e basata sul drag'n'drop. L'inizio anno è tradizionalmente periodo di classifiche e liste, ecco quindi i vincitori degli ArtyPapers 2006 awards: davvero un'ottima selezione di siti con design notevole. Ora due liste per concludere: in 10 Useful Firefox Extensions That DonÂ’t Get Glamorised vengono presentate alcune curiose e utili estensioni per Firefox. E se il 2006 è stato l'anno del Web 2.0, ecco la Top 100 Web2.0 sites che contiene 100 siti e servizi Web2.0 suddivisi per categoria. Alla prossima!

Continua a leggere Segnalazioni di fine settimana

Categoria: Web Design

Appuntamento dedicato ai bookmark Javascript. Cominciamo con alcuni tools decisamente utili. Certo non ha le funzionalità  di Firebug, ma devo dire che sono rimasto sorpreso dall'implementazione del metodo dump(), preso in prestito da ColdFusion, che si presta benissimo al debug. Rimanendo in tema di codice, CodePress è un syntax highliter per PHP, JavaScript, Java, Perl, HTML e CSS.Giunta da poco alla versione 1.0, ecco SmoothGallery una galleria/slideshow davvero potente e versatile basata su mootools.Forse un rant, oppure un altro spunto interessante contro framework e librerie che continua il filo logico del post Il peso e la necessità  di Javascript... in ogni caso una lettura interessante questo Prototype.js != $(). Ho trovato utilissima e molto completa la libreria presentata in Table Sorting, Filtering, Etc. La pagina di esempio mostra benissimo le caratteristiche: ordinamento, righe alterne, filtri e altre funzionalità  per la manipolazione delle tabelle.Parlando di ottimizzazione: in Make your pages load faster by combining and compressing javascript and css files viene presentato un metodo per concatenare e comprimere file CSS e Javascript con il PHP. Rimanendo in tema di PHP, concludo con ClickHeat una soluzione Javascript/PHP che costituisce un mini-sistema di analisi per visualizzare i click su un sito. Non si tratta di vere e proprie heatmap ma magari può valer la pena provarlo.

Continua a leggere Bookmark Javascript

Categoria: Web Design