Web Design ottimizzato per Contao CMS
-
Upload
samuele-schiavon -
Category
Design
-
view
713 -
download
4
description
Transcript of Web Design ottimizzato per Contao CMS
WEB DESIGN OTTIMIZZATO PER CONTAO CMS
Thecreativeway Confindential. - Do not Copy Forward or Circulate© thecreativeway 2012. All Rights Reserved.
CONTAO ITALIAN CONFERENCE 2012Milano Marittima, 26 maggio
Samuele Schiavon
giovedì 17 maggio 2012
La progettazione è l’arte di abbinare formae contenuto.
Paul Rand
giovedì 17 maggio 2012
Paul Rand
...chi era?
Paul Rand (1914 - 1996)
Svizzero, esponente del cosiddetto “International Typographic Style”
Sicuramente uno dei più importanti Visual & C.I. designer del ‘900 (IBM, UPS, NeXT...)
Thecreativeway Confindential. - Do not Copy Forward or Circulate© thecreativeway 2012. All Rights Reserved.
La progettazione dovrebbe essere ispirata da chiarezza, semplicità,oggettività
giovedì 17 maggio 2012
Web Design = Progettare per il Web.
Siamo abituati a pensare al Web Designer come ad un tizio che -se bravo- farà delle grafiche fighe per i nostri siti.
Questo è un concetto molto riduttivo.
Il Web Designer è prima di tutto un progettista, che ha il delicato e specifico compito di abbinare
FORMA (il layout, la grafica, il dispositivo/i di destinazione, la tecnologia, ecc.)
CONTENUTO (i testi, le immagini, i video, ma anche il fatto che un sito ci stia vendendo qualcosa, e deve provare a farlo nel migliore dei modi)
Per il media Web.
giovedì 17 maggio 2012
Il Web Designer è
PROGETTISTA DELL’USABILITA’: ha il compito innanzitutto di concepire e concretizzare l’ambiente nel quale l’utente si troverà a girare. E lo fa a partire da un prototipo visuale (o wireframe)
Gli “spazi ingombro” non andrebbero mai disegnati dal vostro Project Manager, che non nasce come designer nel 99,9% dei casi.
I PM NON sanno di usabilità e design. Perchè infliggere loro questa inutile tortura?
giovedì 17 maggio 2012
Il Web Designer è
UN CREATIVO: fa ricorso alle sue skill creative e artistiche, ha il compito di sintetizzare gli input dati dal cliente e di rielaborarli in un manufatto qualitativamente valido e in linea con i tempi
giovedì 17 maggio 2012
Il Web Designer è
UN CODER: ha ampie competenze di HTML, CSS, Javascript e derivati (jQuery, MooTools)
giovedì 17 maggio 2012
Dobbiamo lasciare al designer la competenza non solo su una corretta realizzazione (grafica, codice e sua sintassi) del frontend, ma più in generale
LA PROGETTAZIONE E LA GESTIONE DELLA
1. UX - User eXperienceConoscenza e visibilità sui moderni processi di apprendimento dell’utente e sull’efficacia / efficienza d’uso di un oggetto (il sito E’ un oggetto, pensiamolo come tale)
2. UI - User InterfaceCome si progetta, come si costruisce una moderna interfaccia. Possiamo associare questo concetto a quello di “Layout grafico”
giovedì 17 maggio 2012
L’interfaccia e l’esperienza utente di un oggetto (e QUINDI di un sito) sono
FONDAMENTALI per il suo successo.
giovedì 17 maggio 2012
Make it look good! That’s not what we think design is. It’s not just what it looks like and feels like.Design (anche Web) is how it works.
Steve Jobs
Thecreativeway Confindential. - Do not Copy Forward or Circulate© thecreativeway 2012. All Rights Reserved.
giovedì 17 maggio 2012
Design “è come funziona”.
Thecreativeway Confindential. - Do not Copy Forward or Circulate© thecreativeway 2012. All Rights Reserved.
giovedì 17 maggio 2012
Veniamo a noi e uniamo le cose :).
giovedì 17 maggio 2012
In base a tutto quello che abbiamo detto finora...
Ci sono 3 diversi momenti di “vita progettuale” del designer che affronta un progetto su Contao
1. Prototipazione
2. Concept / Graphic Design
3. “Templating”: realizzazione HTML, CSS, JS
giovedì 17 maggio 2012
1. Prototipazione
Thecreativeway Confindential. - Do not Copy Forward or Circulate© thecreativeway 2012. All Rights Reserved.
giovedì 17 maggio 2012
La prototipazione è importantissima
Parola chiave: DEFINIRE
Wireframe indica una bozza strutturale di un sito, applicativo web o software.
I wireframe sono estremamente utili in quanto permettono di individuare subito le dinamiche del progetto in termini di usabilità ed utilizzo pratico, i punti critici e quelli che richiedono uno sviluppo più accurato o miglioramenti.
Wikipedia
giovedì 17 maggio 2012
La prototipazione è importantissima
Cosa definiamo?
giovedì 17 maggio 2012
La prototipazione è importantissima
Cosa definiamo?
. il Design dell’interazioneOBIETTIVO: rendere macchine, servizi e sistemi usabili dagli utenti per cui sono stati pensati e realizzati.
giovedì 17 maggio 2012
La prototipazione è importantissima
Cosa definiamo?
. il Design dell’interazioneOBIETTIVO: rendere macchine, servizi e sistemi usabili dagli utenti per cui sono stati pensati e realizzati.
Come lo definiamo?
1) identificare i bisogni e stabilire i requisiti;
2) sviluppare più proposte di design alternative tra loro per coprire ogni possibile gap;
3) i prototipi devono essere facili da comprendere anche per il non addetto ai lavori, e magari un po’ interattivi
giovedì 17 maggio 2012
La prototipazione è importantissima
Cosa definiamo?
. il LayoutOBIETTIVO: creiamo il “telaio” di una moderna interfaccia di un sito Web.
Con Contao possiamo disegnare (quasi) ogni tipo di layout, ma per non sbagliare mai...
giovedì 17 maggio 2012
1. Prototipazione
Testata - #header
Contenitore - #container
Footer - #footer
Layout di tipo “Fixed” o “Centered”...insomma i canonici 960px di larghezza
giovedì 17 maggio 2012
1. Prototipazione
Testata - #header
Footer - #footer
#left #main #right
il Layout in Contao
Il #container è il loro “padre”
giovedì 17 maggio 2012
Contao ci da’ quindi delle regole di layout: è bene seguirle per una
prototipazione rapida ed efficace.
Thecreativeway Confindential. - Do not Copy Forward or Circulate© thecreativeway 2012. All Rights Reserved.
giovedì 17 maggio 2012
#header
#container con dentro solamente#main
#footer
Esempio: eiuc.org
giovedì 17 maggio 2012
2. Design
Thecreativeway Confindential. - Do not Copy Forward or Circulate© thecreativeway 2012. All Rights Reserved.
giovedì 17 maggio 2012
Ora possiamo finalmente prendere gli strumenti dell’artista...
Parola chiave: CREARE
giovedì 17 maggio 2012
2. Design
La grafica (non solo per Contao...)
1) va fatta sulle reali esigenze del target del Cliente
2) Devʼessere “fatta bene”, e precisa al pixel(allineamenti, spaziature, proporzioni, bilanciamento...)
3) Deve differenziare(no a siti fatti col fotocopiatore)
...ma per Contao...
dobbiamo disegnare sempre con lʼocchio a quello che “succederà” dopo...Ricordiamo: Web designer -> creativo + coder...
giovedì 17 maggio 2012
2. Design
Regola che vi salverà la vita
Se disegno in PS un qualsiasi elemento grafico per il progetto ...
...devo SEMPRE sapere come andrò poi a montarlo in Contao. Altrimenti...
Keep it simple!ovvero: meglio due componenti semplici ma montati bene invece delle figate montate male o, peggio ancora, “fatte di cartone” :)
giovedì 17 maggio 2012
2. Design
Facciamo un esempio.
Progettazione grafica di una componente che gestisca una lista news in homepage.
Un modulo NEWS in una homepage
giovedì 17 maggio 2012
2. Design
<div class="layout_latest block"> -- il padre<p class="info"><span class=”date”></span></p> -- il paragrafo con la data <div class="image_container" style=""> -- il contenitore dell’immagine di anteprima<a href="#" title=""><img src="" alt="" /> -- l’immagine (linkata) di anteprima</a></div><h2></h2> -- il titolo (linkato) della news <div class="teaser"></div> -- il paragrafo di intro<p class="more"></p> -- il link “Leggi tutto”</div>
template: news_latest.xhtml
1. Data
2. Immagine anteprima
3. Titolo
5. Link di approfondimento
giovedì 17 maggio 2012
2. Design
<div class="layout_latest block"> -- il padre<p class="info"><span class=”date”></span></p> -- il paragrafo con la data <div class="image_container" style=""> -- il contenitore dell’immagine di anteprima<a href="#" title=""><img src="" alt="" /> -- l’immagine (linkata) di anteprima</a></div><h2></h2> -- il titolo (linkato) della news <div class="teaser"></div> -- il paragrafo di intro<p class="more"></p> -- il link “Leggi tutto”</div>
template: news_latest.xhtml
2. Immagine
3. Titolo4. Testo introduttivo
5. Link appr.
1. Data
(“layout_latest” è una singola news)
giovedì 17 maggio 2012
3. Codice ottimizzato per il montaggio
Thecreativeway Confindential. - Do not Copy Forward or Circulate© thecreativeway 2012. All Rights Reserved.
giovedì 17 maggio 2012
3. Codice
“Templating” - la fase più delicata del progetto su Contao per un Web Designer
- significa scrivere il codice HTML, CSS, JS + eventuali comportamenti UX (jQuery ecc.)
...significa soprattutto scrivere HTML statico CONOSCENDO GIAʼ lʼoutput finale di Contao
...perchè?
- significa non dover aprire POI i .tpl (o html) del frontend di Contao per cambiare nomi a classi e Id rendendoli oltretutto “statici” (cʼè chi lo fa...)
giovedì 17 maggio 2012
3. Codice
=> Scrivo codice IN FUNZIONE DI Contao (e non codice figo ma fine a se stesso)
Per es. : un menu di navigazione (template: nav_default.xhtml)
<ul class=”level_1”> <li class=”first”> <a href=”#”>Voce 1</a> </li> <li class=”active”> <span class=”active”>Voce attiva</span> </li> <li class=”last”> <a href=”#”>Voce 3</a> </li></ul>
giovedì 17 maggio 2012
3. Codice
Questo significa ottimizzare sul CSS, sulla grafica, sui tempi di lavorazione...
Benefici:
1. Il codice HTML scritto è una versione perfettamente “statica” dellʼoutput CMS
2. Il codice CSS (teoricamente) non subirà modifiche post-integrazione sul CMS
3. Ho già una versione (statica) del sito del tutto GEMELLA -anche nel codice- a quella dinamica sviluppata successivamente, da mettere intanto online se il cliente ha fretta
4. Last but not least...tempo risparmiato!
giovedì 17 maggio 2012
3. Codice
Layout di base di Contao (fe_page.xhtml) ...ma “fe che diavolo vuol dire??? :-)
<div id=”wrapper”> <div id=”header”></div> <div id=”container”></div> <div id=”footer”></div></div>
<div id=”wrapper”> <div id=”header”></div> <div id=”container”> <div id=”left”>(se lo usiamo da backend)</div> <div id=”right”>(idem con patate)</div> <div id=”main”>(almeno questo va sempre caricato)</div> </div> <div id=”footer”></div></div>
giovedì 17 maggio 2012
3. Codice
Possiamo scrivere il nostro HTML ottimizzato Contao a vari livelli.
Ideale sarebbe arrivare sempre al livello di dettaglio più basso e comunque per tutti i moduli/funzionalità (es. menu, ricerca, catalogo, news, ecc.) usando lʼoutput del CMS
CONSIGLIO MINIMO: rispettate ALMENO il flusso HTML di base ovvero:
#wrapper
#header
#container
#footer
#left#right#main
giovedì 17 maggio 2012
Bonus:Contao + HTML5
Thecreativeway Confindential. - Do not Copy Forward or Circulate© thecreativeway 2012. All Rights Reserved.
giovedì 17 maggio 2012
Thecreativeway Confindential. - Do not Copy Forward or Circulate© thecreativeway 2012. All Rights Reserved.
giovedì 17 maggio 2012
Contao + HTML5
Dalla v. 2.10 Contao ha integrato un bundle HTML5 molto basico
Richiamabile da Layout di Pagina > Formato di Output > Impostazioni Avanzate >
HTMLXHTML StrictXHTML TransitionalHTML5
Ok, ma tutto qui?
giovedì 17 maggio 2012
Contao + HTML5
Possiamo fare moooolto di più...
giovedì 17 maggio 2012
Contao + HTML5
HTML5 Boilerplate plugin
. Nasce come framework di base per progetti “statici” (http://html5boilerplate.com/) per chi non lo conosce
. Vi installa un sacco di template scritti in html5(pagina di base, template news, eventi, form, ecc...)
. Vi installa modernizr.js(http://www.modernizr.com)
. Vi installa jQuery (ultima release)
giovedì 17 maggio 2012
Contao + HTML5
Perchè usare HTML5 (non solo in Contao!)
. Perchè è la nuova versione di HTMLNon è più possibile non conoscerla ormai
. Perchè XHTML è stato insoddisfacenteTroppo “monolitico”, poco funzionale e restrittivo (mai sentito parlare di “divite”?)
. Perchè HTML5 è semanticoFinalmente un nome appropriato per ogni tag IN BASE ALLA SUA FUNZIONE
. Perchè è il futuroFate un investimento a lungo termine sul vostro progetto web
. Viene introdotta la geolocalizzazionedovuta a una forte espansione dei device mobile Apple e Android
giovedì 17 maggio 2012
Contao + HTML5
Per saperne di più
http://www.w3schools.com/html5/Sintassi di base
http://www.w3.org/html/planet/Update continui dal W3C
http://www.html5today.it/La principale risorsa italiana, quasi una “Bibbia”
http://www.w3.org/html/logo/Un poʼ di cazzeggio e figate varie... :-)
giovedì 17 maggio 2012
Contao + HTML5
Libri
giovedì 17 maggio 2012
DOMANDE?
@samueleschiavon
facebook.com/samuele.schiavon
giovedì 17 maggio 2012
GRAZIE!
Thecreativeway Confindential. - Do not Copy Forward or Circulate© thecreativeway 2012. All Rights Reserved.
CONTAO ITALIAN CONFERENCE 2012Milano Marittima, 26 maggio
giovedì 17 maggio 2012