Con il wallpaper di Marzo la primavera arriva prima

26 Feb 2010 _ a cura di Matteo Rosin

Per questo wallpaper ho voluto regalarvi un anticipo della prossima stagione dopo un inverno piovoso di cui non ne potevamo più...

Wallpaper Marzo 2010

Una primavera timida che non sa ancora se mostrarsi sul palcoscenico delle nostre vite. La aspettiamo ogni anno, proiettando sul suo arrivo aspettative anche spropositate, magari ingenue ma genuine, nuovi amori, nuovi obiettivi da fissare ai bordi del monitor, viaggi ai confini del mondo. Accompagnati da strani compagni di avventura, come una renna che vuole venire con noi alle Hawaii...

Ridisegnare i capelli in Photoshop

Dal punto di vista tecnico, diciamo la verità: era impossibile scontornare i capelli della ragazza, il taglio sfilato e moderno che vedete non esisteva prima e sono andato di graphic tablet con un intervento di ridisegno da zero della chioma. Per il resto mi sono divertito ad assemblare elementi secondo il mio gusto equilibrato sul filo del gioco delle associazioni libere.

Vi piace di più questo o uno dei precedenti?

Ecco i links, scaricate tutti i formati oppure scegliete la vostra risoluzione:

Bookmark and Share

Gestire un sito in Flash da CMS - L'esempio di V.E.com.

13 Jan 2010 _ a cura di Andrea Collet

Circa dieci anni fa Jackob Nielsen nel suo articolo Flash: 99% Bad scriveva quanto la tecnologia di Flash usata nei siti internet non solo vada contro le regole di una buona usabilità e user experience, ma anche di come essa rappresenti un ostacolo alla creazione e gestione di contenuti dinamici. Il primo problema è tema di scambi d'opinione che si trascinano ancora oggi, perciò non lo affronteremo in questa sede poiché andrebbe oltre i propositi di questo post (lo stesso Nielsen ha poi proposto delle linee guida per lo sviluppo su questa piattaforma). Sulla staticità dei contenuti, invece, possiamo tirare un sospiro di sollievo poiché di anno in anno ActionScript si è evoluto permettendo agli sviluppatori di collegare un sito web in Flash ad un software CMS (Content Management System).

Prima della nascita di ActionScript l'aggiunta o la modifica di un testo richiedevano l'apertura dell'intero codice sorgente del sito (utilizzando Flash, dato che il formato è proprietario), quindi la digitazione del nuovo testo, la successiva ricompilazione del file SWF e l'upload del medesimo file sul server. Ad esempio, aggiornare o tradurre in un'altra lingua un intero catalogo di prodotti avrebbe richiesto oneri considerevoli di tempo e denaro da parte del cliente e portato lo sviluppatore alla disperazione; perciò per i progetti in cui si necessitasse una certa praticità nella gestione delle informazioni, si è sempre optato per una sito in classico XHTML + CSS, affiancato da un'accoppiata formata da un database e da un software CMS per la gestione delle informazioni.

Ne è passata parecchia di acqua sotto ai ponti da allora e fortunatamente oggi non è più necessario rinunciare alla dinamicità della grafica in Flash anche per progetti di questo tipo.
Il restyling del sito V.E.com, ridisegnato dall'Arch. Elisabetta Franchin, uno degli ultimi progetti ai quali abbiamo lavorato,
ad esempio, è caratterizzato da una nuova grafica animata in Flash, unita alla comoda gestione su un CMS creato ad hoc.

Schermata del sito vecom.it

Prendiamo ad esempio la galleria di immagini nella homepage: il cliente deve solo preoccuparsi di scegliere le immagini e caricarle nel server tramite l'intuitiva interfaccia del CMS. Non importa che esse siano 4 o 68: il codice si occupa del loro caricamento visualizzando una barra di progresso e della visualizzazione una per una, mantenendo sempre gli effetti di dissolvenza e generando un movimento armonioso e sempre diverso di figure. Questo si traduce in un risparmio di tempo e di risorse, sia da parte del cliente, sia da parte dello sviluppatore.

Lo stesso vale per la galleria delle realizzazioni: sempre tramite l'interfaccia del CMS il cliente può aggiungere nuovi progetti al portfolio e per ciascuno definirne le immagini, un testo descrittivo ed altre informazioni. Il testo è molto lungo? Nessun problema: il sito provvederà automaticamente a creare le frecce per lo scorrimento. Si vuole cambiare una delle immagini? Niente di più facile: basta caricare la nuova immagine nel CMS ed il problema è risolto. Tanti progetti per una sola schermata? Zero pensieri poiché il software si occupa di distribuirli automaticamente su più pagine, aggiungendo le frecce per la navigazione.

Schermata del sito vecom.it (realizzazioni)

Tutto questo è possibile grazie alla generazione di un file XML, che traduce la struttura delle informazioni del CMS in un formato interpretabile da parte del codice ActionScript. Ogni volta che il file viene modificato, ActionScript lo rilegge e si occupa di ridisporre graficamente i contenuti.

Allora, siete ancora sicuri che non sia possibile gestire contenuti dinamici in Flash? ;)

Bookmark and Share

Come incorporare i font in HTML

19 Nov 2009 _ a cura di Andrea Collet

Questa volta parliamo di uno dei maggiori trend nel web design del momento: l'incorporazione di font personalizzati nei siti web (font replacement).
Ogni web designer sa come la scelta tipografica per la grande rete sia praticamente limitata ad una manciata di caratteri a causa degli standard per garantire l'accessibilità. Se questo poteva essere valido nel periodo post-browser-war, a fine 2009, in una internet in cui la forma riveste tanta importanza quanto i contenuti, queste limitazioni diventano soffocanti. In questo senso, Flash è stato una manna per i designer, grazie alla possibilità di incorporare i font, ha permesso di creare pagine visibili a tutti coloro dotati di Flash Player (il 99% dei computer del mondo), ma si è sempre trattato di una soluzione posticcia.

Da qualche tempo non è più necessario rivolgersi a Flash per ottenere semplici animazioni dinamiche (si pensi a jQuery o mooTools); ora anche incorporare font personalizzati diventa alla portata di chiunque mastichi un po' di CSS e HTML. Basta leggere questo articolo (in inglese) che spiega tutti (e dico: tutti) i trucchi per incorporare font non standard pur mantenendo la completa accessbilità. È un po' lungo, ma molto approfondito.

Per chi volesse passare subito all'azione consigliamo di andare su FontSquirrel, che fornisce degli ottimi font freeware e dei kit già pronti con HTML dimostrativo e CSS. Ovviamente è tutto legale.
http://www.fontsquirrel.com/fontface

Scaricando uno dei kit si ricevono:
- la famiglia di font in OTF/TTF (per Firefox 3.5 e Safari), EOT (Internet Explorer), SVG (Chrome, Opera, iPhone) e WOFF (Firefox 3.6+)
- il css con @font-face già preimpostato (@font-face è la tag css che permette di usare font personalizzati nella pagina)
- una pagina html dimostrativa con il font inserito (demo.html)
- il file readme.txt con la licenza del font

Se si volesse utilizzare un font non presente nella lista (e si è verificato di avere il diritto per poterlo convertire e usare nel web), sempre su FontSquirrel esiste il generatore di kit @font-face:
http://www.fontsquirrel.com/fontface/generator
Funziona così: si carica il font, lo si converte in quanti formati si vuole e si scarica il kit con css e pagina html dimostrativa già pronti.

In questo post in italiano viene spiegata l'utilità della tag @font-face:
http://css.flepstudio.org/css3/font-face.html

Nel caso si preferisse una soluzione più professionale indichiamo anche TypeKit, che pagando una quota annua, permette di usare una vasta gamma di font anche non-freeware.

Contenti web designer di tutto il mondo? Adesso non avete più limiti!

Bookmark and Share

Oltre i CSS cosa c'è?

02 Nov 2009 _ a cura di Andrea Collet

Nel suo libro, Andy Clarke affronta un aspetto trasversale rispetto alla progettazione e lo sviluppo di un sito web, spingendosi oltre le tematiche didattiche trattate nell'ampia bibliografia di settore.

Oltre l'estetica, oltre l'organizzazione dei contenuti, si trova l'esperienza utente (quella che, per usare un inglesismo tanto in voga, i designer dell'interazione chiamano User Experience - UX), che non va confusa con l'usabilità di un sito.
Il principio in cui questa viene messa in gioco lo si legge dopo un centinaio di pagine: In realtà richiedere la stessa esperienza per tutti gli utenti crea barriere di partecipazione. Disponibilità e accessibilità dovrebbero essere le priorità chiave.

Viene analizzato in profondità quale sia il metodo migliore per organizzare la veste di un sito web, l'equilibrio tra grafica e contenuti è l'optimum.

Ad aggiungere ricchezza a questo libro, inoltre, ci sono moltissimi esempi pratici sugli utilizzi corretti di codice CSS 2 e dettagliate immagini esplicative. Interessante, infine, la parte dedicata all'uso dei CSS 3 (il libro è stato scritto nel 2007 e tradotto in italiano a febbraio 2008).

Oltre i CSS

Come classificare questo libro?
Lo si potrebbe pensare come un percorso consigliato ai web designer già collaudati, per capire come adattare il proprio metodo di lavoro di fronte alle diverse esigenze esperienziali degli utenti.
Una sorta di rinnovato manuale dello stile comunicativo per i CSS del web 2.0, o un testo con cui capire in che cosa design di prodotti stampati e web si differenzino, o ancora un compendio di ottime motivazioni per abbandonare definitivamente i layout a tabelle, ma anche un'introduzione all'etica web dell'organizzazione e rappresentazione delle informazioni.

Transcending CSS: a manifesto to transcend the web of today.

Scopri altre recensioni su Anobii.com
Il codice EAN / ISBN è: 9788871923628
Puoi comprare il libro su Amazon.co.uk oppure IBS.it

Bookmark and Share

Perché rinunciare a dieci match point in Flash?

27 Oct 2009 _ a cura di Andrea Collet

Nell'annosa e ambigua diatriba “meglio un sito in Flash o frutto della combinazione di XHTML/CSS?” non c'è una risposta unica per tutti i casi.
Questo perché ciascuna tecnologia condiziona sia positivamente, sia negativamente, non solo la qualità dell'esperienza utente o l'indicizzazione nei motori di ricerca, ma anche l'approccio con cui designer, developer e account progettano, costruiscono e mantengono il sito.

Uno dei punti più interessanti toccati alla Flash Platform Developer Jam, tenutasi sabato 24 ottobre durante l'evento del Venezia Camp, è stato proprio il definire dieci validi motivi per cui uno sviluppatore web debba preferire l'uso di Flash:

  1. Supporto 3D nativo tramite DirectX 9 e tramite motori grafici esterni; dai più elaborati quali Papervision, Alternativa, Sandy, Away3D.

  2. Maggiore portabilità di applicazioni desktop. AIR, che, come Flash Player è una tecnologia di sviluppo multi-piattaforma ha il vantaggio di poter accedere più facilmente al file system poiché bypassa la sandbox del browser.

  3. Il supporto on-line è molto dettagliato (è sempre possibile scaricare gratuitamente i manuali ufficiale in pdf) c'è una knowledge base discretamente ricca.

  4. Esistono community e forum di supporto (in Italia i ragazzi di Actionscript.it rappresentano il faro guida di molti novellini e non) in tutto il mondo, che accomunano un totale di 1 milione di sviluppatori.

  5. Supporto di codice e librerie in C++ tramite Alchemy, che equivale a dire che potenzialmente tutta la raccolta di librerie scritte per C++ può essere utilizzata in Flash Player con notevole aumento della velocità di esecuzione.

  6. ActionScript 3 è a tutti gli effetti OpenSource, in quanto è basato su standard internazionale ECMAScript.

  7. Supporto per numerosi protocolli Open source tra cui RTMP, e AMF che permette di recuperare velocemente i dati.

  8. Integrazione con altri prodotti Adobe.

  9. Può essere integrato con l'uso di di framework (come Gaia e CasaLib).

  10. Può essere affiancato da Pixelbender, un potente linguaggio finalizzato alla scrittura di algoritmi per l'elaborazione di immagini.

Sebbene questi motivi possano sembrare sufficienti a sperare in un sempre maggiore sviluppo e diffusione di Flash, non dobbiamo dimenticarci che dal 2004 le applicazioni Flash possono funzionare anche sui dispositivi portatili (cellulari, palmari, ecc.) grazie a Flash Lite. Inoltre sono disponibili numerose librerie che ne permettono l'uso di interfacciarsi con micro-controller come Arduino, promettendo bene come piattaforma di sviluppo e prototipazione per physical computing.

Bookmark and Share

La prima cosa che un web designer deve chiedere al cliente

14 Apr 2009 _ a cura di Samuel Gentile

“Vuoi che il visitatore del tuo sito ne rimanga impressionato?". Sembra una sottigliezza invece è una domanda fondamentale prima di realizzare qualsiasi sito web.

Artisti, musicisti e aziende 2.0 probabilmente risponderanno con un sì deciso.
Sì, vogliamo che il visitatore rimanga impressionato dall’interfaccia o che ci faccia i complimenti per la tecnologia e la maestria con cui il sito è stato progettato.

Per il resto delle persone, la risposta sarà no.
La missione di un sito è raccontare una storia e innescare una reazione. Se il visitatore si ricorderà semplicemente come è fatto il sito e non la storia, hai fallito.
Questo significherà che il tuo sito non solo non sarà cool e architettato in maniera davvero sapiente e curata, ma potrà essere al massimo non amatoriale e brutto.

Grazie Seth per aver sintetizzato come la pensiamo in merito.

Bookmark and Share