di napolux

Capita molto spesso di dover riempire i nostri layout con dati o testi "fake". Di solito si ricorre al più classico dei Lorem Ipsum, ma può non bastare: cosa fare quando i dati fake che ci servono per impaginare un layout o un'intera applicazione devono essere formattati secondo certi criteri? Pensate a date, indirizzi, testi con determinate caratteristiche... In questi casi ci viene in aiuto Mock Data Randomizer, un completissimo script che ci permette di configurare ed inserire nei nostri layout numeri, nomi, colori, date e ovviamente intere frasi (anche a partire da un set di dati predefiniti da noi). [Via ClubAJAX]

Continua a leggere Mock Data Randomizer

Categoria: Scripting

di Kiko

Quando mi siedo alla scrivania ogni mattina accendo il mio MacBook e il FlyBook. A seconda delle giornate e dal lavoro che ho da fare, soltanto uno dei due è collegato ad un monitor esterno da 19 pollici. Il MacBook mi permette di sfruttare i suoi 13 pollici, mentre il FlyBook è un tablet da 8,9 pollici. Per il principio della web usability dovremmo cercare di progettare i nostri design per le risoluzioni maggiormente utilizzate. Vista la tendenza di acquistare PC con monitor sempre più grandi, ma registrata pure la moda dei netbook con schermi piccoli, la domanda che lo sviluppatore dovrebbe porsi è: per quale risoluzione ideale lavorare? Se prima tale dubbio riguardava la doppia dimensione, cioè larghezza e lunghezza, ultimamente il problema sembra riguardare più la larghezza. Infatti, la maggior parte dei siti, e parlo dei siti di informazione includendo fra questi i blog, si sviluppano necessariamente in lunghezza e cià costringe inevitabilmente l'utente a eseguire numerosi scrolling. Per la larghezza il problema rimane. Basta dare un'occhiata alle statistiche di accesso al sito per rendersi conto che i visitatori utilizzano diversi strumenti: monitor grandi, netbook, i classici portatili da 14 o 15 pollici, etc. La mia esperienza personale mi porta a considerare come minima larghezza 1000 pixel e quindi, escludendo la barra di scrolling laterale, 970 pixel. Perfetta per realizzare ottimi layout. Riscontrate anche voi simili statistiche? E quale risoluzione tendete a privilegiare per i vostri progetti?

Continua a leggere La risoluzione ai tempi dei netbook

Categoria: Web Design

Quando si carica la pagina con un video su YouTube, abbiamo a disposizione un pulsantino che consente di modificare le dimensioni del player. La conseguenza immediata del click è un adattamento istantaneo di tutto il layout della pagina. Più facile provare che spiegare a parole. Janko Jovanovic ha replicato l'effetto usando jQuery (demo). Lo script insomma c'è. A voi immaginare in quali contesti potrebbe trovare un'utile applicazione.

Continua a leggere Layout alla YouTube con jQuery

Categoria: Scripting

Questo breve tutorial mi serve solo come spunto. Spiega come creare il layout di un form facendo a meno delle tabelle. La tecnica adottata è quella già  nota basata sull'adozione di elementi li per contenere gli input e le label. Voi quale tecnica adottate e/o preferite per impostare il layout dei moduli? Avete buttato a mare le tabelle pure per questi scopi?

Continua a leggere Come realizzate il layout dei vostri form?

Categoria: CSS

Tags: , ,

Mettendo da parte tutte le discussioni intorno all'opzione fisso vs. liquido/fluido, credo che non appena si decida di seguire la via del fisso il passo successivo consista nella scelta tra allineamento a sinistra o centrato. Repubblica o Corriere, insomma, per citare due siti tra i più popolari. Quali fattori prendete in considerazione quando vi trovate a dover scegliere tra l'una e l'altra opzione?

Continua a leggere Layout fisso: a sinistra o centrato?

Categoria: Web Design

Tags:

Il tema è un sempreverde e ce ne siamo già  occupati. Dal momento che tutti i browser recenti offrono la funzionalità  di zoom dell'intera pagina, ha poco senso appoggiarsi a layout liquidi basati su unità  di misura come gli em. Roger Johansson ha segnalato qualche giorno fa questo articolo di Zoe Mickley Gillenwater in cui l'autrice espone il suo punto di vista sulla questione. Sintesi: la disponibilità  della funzionalità  di zoom non inficia la bontà  di una scelta per i layout liquidi o elastici. Sono curioso di sapere se qualcuno di voi ha rinunciato al liquido partendo dalla considerazione della sua inutilità  per la presenza dello zoom su tutti i browser.

Continua a leggere Zoom della pagina e layout liquidi

Categoria: CSS

Tags: ,

Oltre ad essere una delle più grandi, se non la più grande galleria online di illustrazioni, dipinti digitali, creazioni artigianali, fotografia e molto altro ancora, deviantART possiede anche delle categorie espressamente pensate per i web designer. Consistono principalmente in gallerie di skin e interfacce (da quelle per i siti web e i blog a quelle per applicazioni varie), CSS già  pronti per l'uso e tutorial per Photoshop e altri programmi di interesse per chi sviluppa per il web. (more...)

Continua a leggere deviantART per il web design

Categoria: Web Design

Qualcuno potrà  chiedersi cosa rappresenta l'immagine riportata qui sotto. Semplice: è il layout di una pagina web. Potete verificare dal vivo qui. Il tutto è ottenuto sfruttando le potenzialità  del Template Layout Module in corso di definizione presso il W3C nel contesto della specifica CSS3. Di fatto, tra non so quanto, potrebbe essere il modo in cui tutti noi realizzeremo layout per pagine web potendo contare (finalmente) su un sistema studiato specificatamente per questo scopo. Sì, lo so, il supporto per quel modulo è ad oggi praticamente nullo. Ma Alexis Daveria ha pensato di creare un plugin per jQuery per sfruttarne le funzionalità , oggi, nei principali browser. Il progetto è ospitato su Google Code. Ecco la pagine delle demo.

Continua a leggere Layout CSS3 via jQuery

Categoria: CSS

Tags: , , ,

Dovendo realizzare un layout a larghezza fissa, negli ultimi tempi, in quella che potremmo definire l'era del post-800x600, si è imposta quasi come uno standard la dimensione di 960px in senso orizzontale. Prendendo spunto dal recente rifacimento di Typographica.org (in cui i designer si sono spinti fino ai 1045px), Cameron Moll si chiede quale dimensione possa essere l'erede dei 960px nel caso in cui si decida di ottimizzare il layout per risoluzioni del monitor superiori ai 1024px. Le proposte: 1020, 1040, 1080. Ciascuna opzione è presentata da Moll facendo dei calcoli sulla divisibilità  (per 2, 3, 4, etc). Dai commenti emerge uno spettro di opinioni molto variegato. Se l'appoggio di molti va ai 1080px, c'è anche chi mette sul piatto un argomento da non trascurare e di cui sono certo molti di voi (me compreso) possono rappresentare un esempio: chi usa monitor con alte o altissime risoluzioni, difficilmente usa il browser massimizzato. Occhio dunque a non esagerare. Forse i 960px sono ancora l'opzione di salvaguardia da mantenere?

Continua a leggere La larghezza ideale per risoluzioni oltre i 1024px

Categoria: Web Design

Niente hack CSS, niente commenti condizionali per adattarsi a IE, compatibilità  cross-browser molto estesa, ordine delle colonne SEO-friendly con la colonna dei contenuti al primo posto nell'ordine del codice sorgente, nessun problema con il colore di sfondo delle colonne, etc. Insomma, The Perfect 3 Column Liquid Layout di Matthew James Taylor. Altre soluzioni nel post di presentazione.

Continua a leggere Ancora un layout CSS perfetto

Categoria: CSS

Tags: ,