Oggi voglio presentarvi il mio ultimo lavoro per la rubrica website inspiration. Progetto responsive html5/css3 con un design particolarmente elegante e minimale.
01. Concept
Il sito, come vi ho accennato, è uno dei miei primi progetti full responsive, ovvero adattabile a tutti i dispositivi mobili (su questo aspetto devo ancora ultimarlo per bene =D). Ho deciso di tenere la grafica quanto più pulita ed essenziale possibile concentrandomi su un design dalla resa abbastanza elegante. Purtroppo le foto in evidenza (per ora) sono state caricate dall’utente in pessima qualità, ma con la promessa da parte del cliente di rifarle con calma in seguito =)
Per i colori ho ripreso il logo dell’azienda (non di mia ideazione ma già presente), pertanto ho deciso di creare elementi grafici (vedi il titolo dello slide/vetrina) ricorrendo al rosso vivo.
Integrazione con Facebook sia negli articoli che nel sito. Nuovo form 2.0 by Targetweb =D
02. Sotto il cofano
Il vero lavoro è stato rendere il sito dinamico, ho sviluppato pertanto un cms per la gestione del sito completamente rimodernato e di nuova generazione. tra le feature:
– Caricamento (upload) fotografico multiplo HTMl5 con storage delle immagi nel database
– Durante l’upload delle immagini ho realizzato uno script che comprime la foto alla dimensione standard di 1024×768 mantenendo la proporzionalità della foto originale (le foto verticali sarebbero venute uno schifo senza questa feature). Durante la fase di rip della foto effettuo uno scale di qualità portando l’immagine jpeg a 80% per evitare caricamenti lunghi e dannosi.
– Uso di timthumb per il cropping delle foto/thumb lato frontend e gestione cache delle stesse.
– Le foto vengono archiviate come WordPress (ogni mese ha la sua cartella es: 02/2012 etc). In questo modo si evita spiacevoli inconvenienti dovuti a foto duplicate.
03. Interfaccia
Per quanto riguarda l’interfaccia ho adottato la mia 3 versione del mio cms, facile, e molto intuitivo per tutti. Possibilità di creare autonomamente le categorie/paesi/tipologie di immobile.
Largo uso di ajax e JQuery per animazioni e caricamenti vari per tutta la UI.
Integrazione delle api di Google analitics per statistiche direttamente nel pannello.
Motore di ricerca sia front-end che backend innovativo che sfrutta un algoritmo che mi sono azzardato di creare, per ora tiene (devo fare beta test), se dovesse risultare davvero utile ed efficente rispetto a quelli già presenti nel web lo posterò anche qui sul blog.
04. Motore SEO
Tutto il cms ha una cura particolare per il seo, ho rivsto la struttura dei permalink rispetto alla precedente versione, e usato l’id per velocizzare la query e rendere il sito ancora più veloce. D’altro canto il link : /luogo/permalink non ha avuto (per esperienza) grossi benefici.
Pertanto i permalink appaiono proprio come wordpress:
es: http://www.beniimmobiliari.it/14/appartamento-casa-vacanza-con-terrazzo-angolare-ceriale.html
Struttura particolare (rivisitata), anche per i permalink relativi ai singoli luoghi, in cui ho implementato un banale algoritmo di assegnazione SEO al fine di rendere unico sia il description sia il tag title. L’uso dell’algoritmo risulta essenziale data la possibilità di auto inserire luoghi e tipologie da parte dell’utente.
05. Conclusioni
Un progetto abbastanza rilevante in cui ho avuto l’occasione di approfondire parecchio il mio “modulo” di upload per i miei cms, che sicuramente risulterà molto utile anche per progetti futuri! Oltre a questo nuova infrastruttura seo e l’implementazione della mia nuova UI per cms rendono questo mio progetto uno di quelli a cui sono più affezzionato (fino ad ora), soprattutto per quanto concerne il backend.
Ovviamente voglio sapere anche le vostre opinioni/consigli mi raccomando!
Vuoi un cms/gestionale personalizzato per i tuoi progetti? contattami ora.
Ciao Riccardo
bellissimo lavoro, complimenti…
ma quindi timtumb gestisce anche la cache delle foto? nel senso che se le modifico non ho problemi di visualizzare la cache della precedente sul browser?…
Bella notizia… mi sono appena scontrato con un problema del genere…
Sì che timthumb funziona alla grande 😉 oltretutto ti risolve anche alcuni problemi dovuti al cropping (lo puoi impostare in automatico ;))