4. 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
5. 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
6. 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
7. Il Web Designer è
UN CODER: ha ampie competenze di HTML, CSS,
Javascript e derivati (jQuery, MooTools)
giovedì 17 maggio 2012
8. 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 eXperience
Conoscenza 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 Interface
Come si progetta, come si costruisce una moderna interfaccia. Possiamo
associare questo concetto a quello di “Layout grafico”
giovedì 17 maggio 2012
9. L’interfaccia e l’esperienza utente di un
oggetto (e QUINDI di un sito) sono
FONDAMENTALI per il suo successo.
giovedì 17 maggio 2012
12. Veniamo a noi e uniamo le cose :).
giovedì 17 maggio 2012
13. 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
15. 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
17. La prototipazione è importantissima
Cosa definiamo?
. il Design dell’interazione
OBIETTIVO: rendere macchine, servizi e sistemi usabili dagli utenti per cui
sono stati pensati e realizzati.
giovedì 17 maggio 2012
18. La prototipazione è importantissima
Cosa definiamo?
. il Design dell’interazione
OBIETTIVO: 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
19. La prototipazione è importantissima
Cosa definiamo?
. il Layout
OBIETTIVO: 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
20. 1. Prototipazione Layout di tipo “Fixed” o “Centered”...insomma i canonici 960px di larghezza
Testata - #header
Contenitore - #container
Footer - #footer
giovedì 17 maggio 2012
21. 1. Prototipazione il Layout in Contao
Testata - #header
#left
#main
#right
Il #container è il loro “padre”
Footer - #footer
giovedì 17 maggio 2012
25. Parola chiave: CREARE
Ora possiamo finalmente prendere gli strumenti dell’artista...
giovedì 17 maggio 2012
26. 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
27. 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
28. 2. Design
Facciamo un esempio.
Un modulo NEWS in una homepage
Progettazione grafica di una componente che gestisca
una lista news in homepage.
giovedì 17 maggio 2012
29. 2. Design
template: news_latest.xhtml
<div class="layout_latest block"> -- il padre
<p class="info"><span class=”date”></span></p>
1. Data
-- il paragrafo con la data
<div class="image_container" style="">
-- il contenitore dell’immagine di anteprima
<a href="#" title="">
<imgImmagine anteprima
2. src="" alt="" /> -- l’immagine (linkata) di anteprima
</a>
</div>
<h2></h2> -- il titolo (linkato) della news
3. Titolo
<div class="teaser"></div> -- il paragrafo di intro
<p class="more"></p> -- il link “Leggi tutto”
5. Link di approfondimento
</div>
giovedì 17 maggio 2012
30. 2. Design
template: news_latest.xhtml
<div class="layout_latest block"> -- il padre
<p class="info"><span class=”date”></span></p>
1. Data
-- il paragrafo con la data
<div class="image_container" style="">
2. Immagine
-- il contenitore dell’immagine di anteprima
<a href="#" title="">
<img src="" alt="" /> -- l’immagine (linkata) di anteprima
</a>
</div>
3. Titolo
<h2></h2> -- il titolo (linkato) della news
<divTesto introduttivo
4. class="teaser"></div> -- il paragrafo di intro
<p class="more"></p> -- il link “Leggi tutto”
</div>
5. Link appr.
(“layout_latest” è una singola news)
giovedì 17 maggio 2012
32. 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 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...)
...significa soprattutto scrivere HTML statico
CONOSCENDO GIAʼ lʼoutput finale di Contao
...perchè?
giovedì 17 maggio 2012
33. 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
34. 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 codicea quella dinamica sviluppata successivamente, da mettere intanto online
se il cliente ha fretta
4. Last but not least...tempo risparmiato!
giovedì 17 maggio 2012
35. 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
36. 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:
#header
#wrapper
#container
#footer
giovedì 17 maggio 2012
#left
#right
#main
39. Contao + HTML5
Dalla v. 2.10 Contao ha integrato un bundle HTML5 molto basico
Richiamabile da
Layout di Pagina > Formato di Output > Impostazioni Avanzate >
HTML
XHTML Strict
XHTML Transitional
HTML5
Ok, ma tutto qui?
giovedì 17 maggio 2012
41. 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
42. Contao + HTML5
Perchè usare HTML5 (non solo in Contao!)
. Perchè è la nuova versione di HTML
Non è più possibile non conoscerla ormai
. Perchè XHTML è stato insoddisfacente
Troppo “monolitico”, poco funzionale e restrittivo (mai sentito parlare di “divite”?)
. Perchè HTML5 è semantico
Finalmente un nome appropriato per ogni tag IN BASE ALLA SUA FUNZIONE
. Viene introdotta la geolocalizzazione
dovuta a una forte espansione dei device mobile Apple e Android
. Perchè è il futuro
Fate un investimento a lungo termine sul vostro progetto web
giovedì 17 maggio 2012
43. 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
