web

My Left Hand - Dino OlivieriIl web design è certamente un’arte, un’arte difficile, in continua mutazione e perennemente in evoluzione per stili, gusto, colori, layout, navigazione, facilità d’uso, tecnologie e messaggi.

Ho iniziato a disegnare in digitale molto prima che comparisse il web.
Infatti già dall’età di 15 anni (parliamo del lontano 1984) disegnavo sprite, character set, fondi e layout pseudo-grafici per giochi su Commodore 64 e IBM PC.
Quella preziosa scuola mi ha insegnato a rispettare e amare ogni singolo pixel di un’immagine digitale, a gestire i miei layout con precisione certosina e, dulcis in fundo, a programmare.

Col tempo gli strumenti sono cambiati, ma in fondo l’arte di rendere appetibile, facile, appagante l’uso di un programma (in questo caso di un sito web) non è poi mutata significativamente.

Nella categoria Web Design Tutorials potrete trovare i miei articoli su Layouting, Usability, User Centered Design, Linee guida CSS, W3C Accessibility, e molto altro ancora.

Per quanto riguarda il web-design ecco alcuni miei esempi completi (cioè in cui ho completamente progettato, disegnato , programmato e testato l’intero sito) che ho avuto il tempo di “documentare”:


Finsoft.it - Corporate Restyle 2009Finsoft.it – Corporate Restyle 2009

Sono un po’ di anni che lavoro in Finsoft e devo dire che mi trovo molto bene, mi faccio un discreto mazzo ma godo anche di stima e autonomia per me fondamentali per fare un lavoro in cui ci metti tanta tanta passione.
Arriva il 2009 e la crisi che porta: quale migliore occasione per rinnovare un po’ l’immagine di una azienda che va benissimo ma che sicuramente negli anni ha pensato più al business che “all’immagine”.
Ecco dunque che grazie alla collaborazione di tutti i colleghi del 5° piano, e soprattutto grazie all’efficace contributo dell’agenzia grafica e pubblicitaria Adfarmandchicas di Torino (che stimo davvero molto, grazie Cocchi, grazie Daniele, grazie tutti!), viene fuori nuovo pay-off, logo lucidato (non è stato cambiato ma appena appena lucidato), nuovo layout web, carta tutta nuova, etc.. una presentazione video in Flash.. ah già ma questa è un’altra storia…


Ermanno Daelli - Store and BoutiquesErmanno Daelli – Store and Boutiques

Ermanno Daelli è un progetto grafico e web di una certa complessità perchè mischia diversi fattori in un unica interfaccia dall’apparenza molto semplice.
La parte principale infatti è sviluppata in Adobe Flash CS3 mediante l’uso di grafica 2D e fotografie di impatto sapientemente miscelate attraverso componenti di gallery appositamente sviluppate da me in Actionscript3.
Ermanno Daelli - Store and BoutiquesUno degli elementi di spicco e che la maggior parte del sito, nonostante sia stato sviluppato in Flash appunto, è dinamico, ovvero testi, fotografie, gallerie, news ed eventi e configurazioni testuali e grafiche sono quasi tutte esterne al file swf e caricate dinamicamente.
Ermanno Daelli - Store and BoutiquesLa componente di cui vado certamente più fiero è quella della gallery delle boutique e delle collezioni e quella delle news.
Il sito è in 3 lingue, tutto in utf-8 (il cirillico per il russo in flash ha creato qualche problema con gli embed delle fonti).
Ermanno Daelli - Store and BoutiquesDulcis in fundo lo Store, tutto sviluppato in php, mysql, apache2 e linux (rigorosamente LAMP). La cosa che più mi piace dello store è l’uso semplice ma efficace di AJAX, di librerie di gestione della grafica e delle gallerie di immagini (come Mojomagnify, MojoZoom, ImageSlideshow5, etc..) tutti “sapientemente” modificati da me per piegarsi alle esigenze del cliente.
Insomma un mini e-commerce d’impatto e decisamente potente realizzato anche grazie ai buoni consigli e alla pazienza di Fabio Tempestini con cui ho collaborato proficuamente e che ringrazio molto per la gentilezza, la precisione e velocità con cui ha saputo sempre rispondermi.


ZENTAO.org - La Via del Benessere ZenZENTAO – La Via del Benessere Zen

Su Wikipedia leggiamo: “Lo Zentao è una fusione e insieme una trasformazione (tutto cambia) dell’esperienza Zen e del pensiero di origine taoista. Zentao significa Tao dello Zen, ovvero “Via della Meditazione” e rappresenta una esperienza di benessere del corpo-mente che passa attraverso pratiche sia fisiche che mentali (per fare alcuni esempi: la meditazione, la corretta alimentazione, l’educazione emozionale, trattamenti di rilassamento e tonificazione come lo shiatsu, yoga, etc..).”
Zentao.org è dunque un sito semplice e che con umiltà si prefigge di raccogliere esperienze, tecniche, metodi e qualche perla di saggezza utili a chi (come me e mia moglie Stefy) cerca una vita più serena, piena, consapevole, focalizzata sulla realtà e lontana dalle illusioni, naturale e amorevole.
E’ difficile oggi riuscire a camminare sulla Via dello Zen (Zen Tao appunto), ma vale la pena almeno provarci, impegnandosi a fondo e facendo propri le 6 Nobili Perfezioni del Bodhisattva: Generosità, Moralità, Pazienza, Perseveranza, Concentrazione e Saggezza.


New Elfin - Comandi e Controlli IndustrialiNew Elfin – Comandi e Controlli Industriali

Scopri la vasta gamma di ausiliari di comando e segnalazione che la New Elfin progetta e produce, con esperienza e professionalità. Nel suo catalogo troverai 2 serie di pulsanteria industriale sia diametro 22 che diametro 30, quali lampade spia, pulsanti a fungo, pulsanti emergenza, lettori a chiave, manipolatori, una completa serie di contenitori cassette pulsantiere in termoplastico, alluminio o acciaio inox fino ai quadri in poliestere; un’importante linea di articoli per la sicurezza del comando e del controllo, dalle pulsantiere bimanuali ai dispositivi lampeggianti presenza tensione che sono completati dalle innovative lampade elettroniche per illuminazione quadri elettrici.
Io e Stefania abbiamo realizzato questo sito web istituzionale della azienda New Elfin usando tutte le migliori tecnologie a disposizione al momento: L.A.M.P. (Linux, Apache, MySql, PHP), mod_rewrite, multilanguage auto sensitive, meta db, sitemap, rss feeds, akismet, web semantico, e molto altro ancora, maps.google API, integrazione coi motori di ricerca, interfaccia web 2.0, …
Siamo molto soddisfatti sia del risultato che del cliente New Elfin: affidabile, puntuale, preciso, chiaro e solido.
Il sito è in continua evoluzione: always in beta, come la creatività e l’innovazione del cliente stesso.


Ainur.it - The Music of the AinurAinur.it 2007

Avete mai letto qualcosa di J.R.R.Tolkien? Lo Hobbit, il Signore degli Anelli, Il Silmarilion, Albero e foglia, I Figli di Hurin, etc…? Quasi certamente sì, e se non l’avete fatto probabilmente avrete sicuramente visto o sentito parlare dei film della trilogia di Peter Jackson.In ogni caso sono sicuro che non abbiate mai ascoltato veramente il mondo di Tolkien, e gli Ainur rappresentano l’occasione felice per iniziare a farlo e per appassionarsi ancora di più ai libri del caro vecchio professore di Oxford.A proposito, la grafica del nuovo sito e l’integrazione e-commerce è opera mia su base WordPress e plugin vari. Un lavoro da certosino nello spirito di rievocazione del primo Earendil.it


Sinistra Democratica per il socialismo europeo sezione Venaria Reale (TO)SinistraDemocraticaVenaria.it 2007

Un partito si divide, da una costola nasce un nuovo movimento, un amico politicamente impegnato mi chiede se posso aiutarlo a mettere su in una notte un blog per la sezione di Venaria.
Agli amici difficilmente dico di no.
Ecco quindi una personalizzazione di dBlog CMS per http://www.sinistrademocraticavenaria.it messo su Aruba in una notte appunto e poi subito perfettamente operativo e politicamente impegnato.
Per quanto riguarda me, sono da sempre un ambientalista, un razionalista, un umanista e un laico; dunque per ovvie ragioni da sempre guardo con interesse a sinistra.Non ho tessere di partiti ma sono sempre attento ai movimenti strutturati e con buone idee da portare avanti – insomma non quelli “mainstream”.Se abitate nei pressi di Venaria Reale o proprio in questa bella città e volete dire o sentire qualcosa di sinistra non dimenticate dunque di visitare il sito.


The Earendil Fantasy Society - 2007Earendil.it 2007

Dopo quasi 3 anni di glorioso online, il buon vecchio Circolo Tolkieniano Earendil cessa di esistere per rinascere (come Araba Fenice) nella nuova Società della Fantasia di Earendil.The Earendil Fantasy Society è un club decisamente esclusivo.
In questa cerchia si riuniscono persone molto speciali che amano fare cose “fantastiche”.
Per cose “fantastiche” intendiamo: scrivere fiabe, creare mondi oltre la realtà, illustrazioni di luoghi e creature immaginari, comporre musica che rimanda il nostro spirito oltre i confini dell’universo mondo, partecipare alla stesura di progetti legati a questo genere attraverso qualsiasi mezzo artistico.Se ami il genere fantastico e desideri creare poesia, prosa, immagini, illustrazioni, cinema, musica o videogiochi insieme a persone come te, sii la benvenuta o il benvenuto in The Earendil Fantasy Society.


Jamaikabar.com - The jamaican reggae bar!JamaikaBar.com

Il Jamaika Reggae Bar è un locale di Pianezza (TO) dove si beve, si mangia e si ascolta buona musica.Siccome nello Staff del Jamaika c’è coinvolto un collega, allora “mi sono offerto” di tirargli su alla veloce un sito web… ed eccolo lì!So let’s go Jammin’ to the Jamaika Reggae Bar!


Fiat Atrium - SplashFiat Atrium – 2006

Fiat Atrium è una applicazione Web sviluppata per Fiat Auto che ha il compito di presentare su
1. mega-schermi al plasma
2. chioshi internet
3. screensavers di PC esposti al pubblico dati, schede, spot prodotto e consuntivi di produzione aggiornati in tempo reale.Fiat Atrium - Plant MonitorL’applicazione Fiat Atrium è stata da me interamente sviluppata nelle seguenti tecnologie
a. XHTML
b. Adobe/Macromedia Flash 8
c. Javascript
d. Asp.Net 2.0
e. Microsoft SqlServer 2000
f. Macromedia Flash 8 Video Encoder.Fiat Atrium - World MonitorFiat Atrium accede anche ad alcuni servizi web appositamente sviluppati per fornire dati di produzione e di consuntivo in tempo reale (in realtà rispetto al dato reale c’è una differita di circa dieci minuti).

Le scene disponibili sono:
a. presentazioni e applicazioni rich media applications in Flash
b. schede in XHTML o generate lato server in ASP.NET
c. contributi video in formato 16:9


Onyrix.com 2005 EditionOnyrix.com – 2005

La versione 2005 di Onyrix.com sfrutta il motore PHP di un blog engine abbastanza noto: SimplePHPBlog.
Partito da questo motore, che ha il pregio abbastanza interessante di essere relativamente semplice e di non richiedere alcun DB, ho customizzato una serie di moduli per ovviare alle diverse limitazioni della versione dell’epoca.Ora SimplePHPBlog è decisamente meno “simple” e offre un nutrito numero di funzioni.
Il taglio blog mi soddisfaceva abbastanza, specie per il fine che mi ero proposto, cioè di usarlo come memoria dei miei vari incontri: professionali, artistici, umani…Una cosa però non mi piaceva tanto, ed era cioè la staticità, cosa che ripropongo (per mancanza cronica di tempo) nella versione successiva (2007) sempre nell’intenzione di rivoluzionare in maniera secca il tutto in un prossimo imminente luminoso futuro.


Onyrix.com 2003 EditionOnyrix.com – 2003

La versione 2003 di Onyrix.com presentava un top menu di navigazione realizzato in Flash 6, una colonna di news e reminders sulla sinistra e un menu animato tridimensionale posto al centro con pochi contenuti e molti, molti effetti speciali.In primo piano campeggiava incontrastato il logo rotante in 3D di Onyrix, ovvero: “the 8 bytes man”, il quale era pensato per creare una sorta di effetto ipnotico anche mediante effetti rollover che cercavano in ogni modo di catalizzare l’attenzione del visitatore su particolari “vivi” a prima vista statici.Senza dubbio un sito con un front-end semplice e un back-end tutt’altro che banale…


Earendil.it 2005 EditionEarendil.it 2005

Earendil.it è un portale culturale che parte dalla letteratura fantasy per allargarsi al cinema, alla musica, alla filosofia, religione, attualità, eventi e ogni altro aspetto che può interessare i membri (diverse centinaia attualmente) di questa ormai importante web-community.Sviluppato da una spin-off personale e ormai decisamente lontana del famoso portal-engine PHP-Nuke, Earendil.it aggiunge moduli scritti da me come “DinoGallery” e personalizzazioni spinte di altri moduli base e di terze parti.La navigazione è gerarchica livello 2, il cammino di lettura è quello tipico del magazine web, mentre la grafica è volutamente fantasy con richiami al liberty e all’art nouveau.

Le visite ad Earendil.it crescono continuamente ed anche il lavoro necessario alla sua manutenzione. Ecco perchè ultimamente ho sviluppato alcuni web-bot disegnati per gestire tutte le attività più pesanti e critiche (tipo pulizia spam guestbook e forum, ottimizzazione db periodica, gestione di alcuni problemi di accounting, etc..).
Davvero comodi i Web-bot e molto, molto efficaci una volta tarati a dovere!


Finsoft.itFinsoft.it

Finsoft.it è il sito istituzionale, nonchè portale corporate, della software house per cui lavoro da qualche anno.
L’idea di Enrico Carpino, amministratore unico di Finsoft srl, era quella di un sito istituzionale chiaro, leggero, trasparente, che riuscisse a dare al cliente e al candidato consulente una immagine nitida di ciò che Finsoft è in realtà.Usando un piano colore semplice (azzurro e bianco, ovvero i colori aziendali) abbiamo cercato di dare una lettura a Z con livello di navigazione 2. A sinistra abbiamo posto spazio agli headline aziendali, mentre a destra abbiamo lasciato ampio spazio alle presentazioni dei migliori clienti Finsoft.Le icone sono state scelte con cura da archivi fotografici royalty free o realizzate da me tramite scatti digitali in condizioni suggestive (esempio la foto della sede aziendale in una giornata tersa dopo una nevicata).

La sezione corporate aziendale (dedicata ai dipendenti e accessibile mediante account) offre diverse utilities, un forum, un repository qualità e una rubrica contatti.


Studio Aglietto - Environmental EngineeringAglietto.com – 2003

Aglietto.com è il sito istituzionale dello Studio di Ingegneria Ambientale dell’Ing.Ivano Aglietto.La versione 2003 curata da me è stata realizzata completamente in Macromedia Flash e pensata come una brochure sofisticata e dinamica che desse il più possibile la sensazione della dinamicità e degli obbiettivi aziendali.Purtroppo ad oggi non è più online perchè credo avreste sicuramente apprezzato il video di presentazione diretto e montato da me (se mai un giorno riuscirò a recuperarlo tra i miei back-up lo inserirò nel portfolio).


Siticontaminati.it - Il portale italiano delle bonifiche ambientaliSiticontaminati.it – 2004

Il portale Siticontaminati.it è il tipico esempio di portale multi-purpose. Al suo interno sono infatti condensate funzionalità B2C, B2B, CMS e Document Repository, Applicative e di utilità.Ho iniziato a sviluppare Siticontaminati.it senza partire da alcun portal engine in quanto nessun sistema aperto e preesistente offriva strutture o funzionalità riusabili nello specifico.
Le principali sfide che ho affrontato nel realizzare questo portale sono state:1. Document Repository di alcuni gigabyte di documenti pdf, word, excel e powerpoint con organizzazione gerarchica, ricerca full-text, autoindicizzazione e categorizzazione (tecnologia usata: MS Index Server)
2. Gestione Bandi e automatismi di visualizzazione, archiviazione, ricerca e content-push.
3. Forum
4. Gestione offerte e richieste lavoro, nonchè archivio CV e Aziende
5. CMS articoli, newsletter e ricerca fulltext archivio
6. Gestione rivista online, sommari e preview pdf del periodico tecnico: “Siticontaminati”
7. User Centered Design, usability e grafica del sito
8. testing, forum-groups, manutenzione e affinamento navigazioneAd ora Siticontaminati.it è stato stravolto abbastanza, e dalla iniziale semplicità e pulizia è passato ad una versione (fatta e pensata da terzi) decisamente più barocca e tecnicamente scorretta.
Ma, come si dice, de gustibus…

Advertisements