Interfacce web con UIKit, piccola libreria JavaScript
Martedì 7 Febbraio 2012 - 09:32
di Kiko
Oggi i siti web necessitano di elementi sempre più vicini a quelli delle interfacce desktop. Difatti sono state sviluppate librerie JavaScript in grado di offrire allo sviluppatore tutta una serie di strumenti in funzione della User Interface. UIKit è uno di questi e si contraddistingue per la semplicità e la leggerezza.
Continua a leggere Interfacce web con UIKit, piccola libreria JavaScript
Categoria: Scripting, Web Design | Permalink | Commenti (2)
Responsive web design su tabelle di dati
Lunedì 16 Gennaio 2012 - 09:35
di Maico Orazio
Quando si tratta di Responsive Web Design, dobbiamo considerare con attenzione gli elementi di design e adattarli al particolare contesto, a seconda delle dimensioni dello schermo o dispositivo mobile corrente.
La progettazione reattiva non riguarda solo immagini e layout, ma anche menu di navigazione, video, moduli, dimensione dei caratteri, link e anche le tabelle. Infatti, avete mai pensato a come si dovrebbe adattare una complessa tabella multi-colonna in versione desktop per una comoda visualizzazione su un dispositivo mobile?
Continua a leggere Responsive web design su tabelle di dati
Categoria: Web Design | Permalink | Commenti (2)
Lazyload.js, caricamento immagini ottimizzato
Mercoledì 21 Dicembre 2011 - 09:22
di Kiko
Se siamo soliti utilizzare molte immagini nei nostri siti, in special modo siti contenenti tutorial e documentazione, allora può essere utile utilizzare Lazyload.js.
È un plugin per jQuery che provvede a caricare le immagini solo quando necessario e cioè quando entrano nel radar dello scrolling della pagina. In pratica il plugin evita di caricare tutte le immagini presenti già al loading della pagina, ma le attiva man mano che lo scrolling li pone dentro la schermata visualizzata sulla finestra.
Continua a leggere Lazyload.js, caricamento immagini ottimizzato
Categoria: Scripting, Web Design | Permalink | Commenti (4)
Craftyslide, uno slider di immagini leggero in jQuery
Lunedì 19 Dicembre 2011 - 10:09
di Kiko
Un plugin leggerissimo per una delle funzioni più usate nei siti web: lo slider di immagini. Craftyslide è realizzato in jQuery e il pregio principale è la leggerezza.
E anche la semplicità di implementazione visto che non sporca codice HTML. Serve soltanto un elemento div contenitore di una lista non numerata e dove ogni elemento della lista è una immagine con l’attributo title opportunamente impostato. Proprio il contenuto dell’attributo title diventa l’etichetta dell’immagine mostrata nello slider.
Continua a leggere Craftyslide, uno slider di immagini leggero in jQuery
Categoria: Scripting, Web Design | Permalink | Commenti (1)
Accessibilità del testo con jFontSize
Venerdì 16 Dicembre 2011 - 09:20
di Kiko
Uno dei criteri di accessibilità e usabilità dei siti Internet riguarda la possibilità di fruire in maniera pratica e comoda di un testo. Questo è particolarmente importante se il sito in questione è un magazine o un quotidiano o un sito d’informazione in generale. È ovviamente vero anche per i blog.
Uno degli strumenti più apprezzati in tal senso riguarda la possibilità di ingrandire o rimpicciolire il testo principale della pagina. Sono i classici pulsanti che recano una lettera A con i simboli di più (+) o meno (-).
Continua a leggere Accessibilità del testo con jFontSize
Categoria: Scripting, Web Design | Permalink | Commenti (4)
Creare swatch per jQuery Mobile con ThemeRoller
Lunedì 7 Novembre 2011 - 15:22
di Kiko
Creare una versione “mobile” del sito significa non solo adattare il CSS e layout alle dimensioni dello schermo, ma prevedere meccanismi di navigazione per i touchscreen.
jQuery Mobile introduce, a livello di design, gli swatch: set di colori, bordi e sfondi che vengono applicati agli elementi di una pagina web. Basta fornire la propria versione degli swatch per modificare al volo le proprietà grafiche di liste, di bottoni, degli elementi di un form e così via. Come impostare gli swatch? Con ThemeRoller.
Continua a leggere Creare swatch per jQuery Mobile con ThemeRoller
Categoria: Scripting, Web Design | Permalink | Commenta
Disegnare pagine web per iPad con Magazine Grid
Lunedì 26 Settembre 2011 - 09:41
di Kiko
Una volta costruito il sito, visto l’enorme successo del marchio Apple, spesso il cliente chiede pure una versione ottimizzata e specifica per dispositivi quali iPhone e iPad. I CMS più conosciuti e usati mettono a disposizione dello sviluppatore diversi plugin. Questi ultimi non sono altro che template specifici per piccoli schermi e buoni in generale per dispositivi touch o mini browser
Ma se si vuole un design e funzionalità di navigazione specifiche si deve scrivere da zero un nuovo template. In tal caso può essere di grande aiuto un tool come Magazine Grid.
Continua a leggere Disegnare pagine web per iPad con Magazine Grid
Categoria: CSS, Web Design | Permalink | Commenti (6)
Due plugin per creare tooltip in jQuery
Martedì 20 Settembre 2011 - 10:44
di Kiko
Oggi è sempre più importante e decisivo offrire agli utenti un’esperienza di navigazione eccellente. Tale esperienza la si può realizzare per mezzo di diverse scelte di design e funzionali. Fra le prime includiamo pure i tooltip, uno dei più classici elementi di un’interfaccia grafica.
In questo articolo vi offriamo due spunti interessanti. Entrambi utilizzano jQuery come libreria JavaScript.
Il primo è un plugin molto leggero: si chiama TinyTips ed è alla sua versione 1.1.
Continua a leggere Due plugin per creare tooltip in jQuery
Categoria: Scripting, Web Design | Permalink | Commenti (4)
Adaptive Images: piccole immagini per piccoli dispositivi
Mercoledì 7 Settembre 2011 - 09:38
di Mariano Calandra
Qualche mese fa scrissi un post in cui parlavo di tre proprietà dei CSS per la realizzazione di siti con un layout adattativo. Con gli smartphone e i tablet che diventano sempre più strumento di navigazione scegliere di realizzare un layout “liquido” è una scelta obbligata. Non è casuale, infatti, che alcuni temi di WordPress, come Yoko, nascano già con questa capacità. Nonostante gli sforzi, però, poco ancora si può fare per le immagini (il tema precedente, ad esempio, nasconde l’immagine dell’header su dispositivi con risoluzione bassa). Ma quali strumenti abbiamo se non vogliamo fare a meno delle immagini?
Continua a leggere Adaptive Images: piccole immagini per piccoli dispositivi
Categoria: Web Design | Permalink | Commenti (3)
Scrivere email in HTML oggi
Martedì 30 Agosto 2011 - 09:58
di napolux
Il Web è cambiato molto negli ultimi anni: nuovi standard si stanno susseguendo nel tempo e grazie ad essi sviluppatori e designer riescono a fornire un’esperienza utente decisamente ricca e “cross browser compatible” seppur con molti sforzi.
Diverso è il discorso per le email: ad oggi non si è arrivati ad uno “standard” per il rendering di codice HTML all’interno delle email (anche se ci si propone di farlo) e costrutti che nei browser odierni sono ormai assodati non sono supportati dalla stragrande maggioranza dei client di posta. Questa tabella riassume il supporto HTML/CSS di diversi client di posta (desktop e web).
Continua a leggere Scrivere email in HTML oggi
Categoria: Web Standards, Web Design | Permalink | Commenti (5)