Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WEB DESIGN OTTIMIZZATOPER CONTAO CMSCONTAO ITALIAN CONFERENCE 2012 Milano Marittima, 26 maggio Samuele Schiavon           ...
La progettazione è l’arte di abbinare forma                         e contenuto.                                          ...
...chi era?    Paul Rand (1914 - 1996)    Svizzero, esponente del cosiddetto “International Typographic Style”    Sicurame...
Web Design = Progettare per il Web.    Siamo abituati a pensare al Web Designer come ad    un tizio che -se bravo- farà de...
Il Web Designer è    PROGETTISTA DELL’USABILITA’: ha il compito    innanzitutto di concepire e concretizzare l’ambiente   ...
Il Web Designer è    UN CREATIVO: fa ricorso alle sue skill creative e    artistiche, ha il compito di sintetizzare gli in...
Il Web Designer è    UN CODER: ha ampie competenze di HTML, CSS,    Javascript e derivati (jQuery, MooTools)giovedì 17 mag...
Dobbiamo lasciare al designer la competenza non    solo su una corretta realizzazione (grafica, codice e    sua sintassi) d...
L’interfaccia e l’esperienza utente di un                            oggetto (e QUINDI di un sito) sono                   ...
Make it look good! That’s not what we think design                         is.                         It’s not just what ...
Design “è come funziona”.                                        Thecreativeway Confindential. - Do not Copy Forward or Cir...
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         ...
1. Prototipazione                                     Thecreativeway Confindential. - Do not Copy Forward or Circulate     ...
La prototipazione è importantissima             Parola chiave: DEFINIRE             Wireframe indica una bozza strutturale...
La prototipazione è importantissima             Cosa definiamo?giovedì 17 maggio 2012
La prototipazione è importantissima             Cosa definiamo?             . il Design dell’interazione             OBIETT...
La prototipazione è importantissima             Cosa definiamo?             . il Design dell’interazione             OBIETT...
La prototipazione è importantissima             Cosa definiamo?             . il Layout             OBIETTIVO: creiamo il “...
1. Prototipazione Layout di tipo “Fixed” o “Centered”...insomma i canonici 960px di larghezza                             ...
1. Prototipazione il Layout in Contao                                                             Testata - #header       ...
Contao ci da’ quindi delle regole di                          layout: è bene seguirle per una                         prot...
Esempio: eiuc.org                                    #header                         #container con dentro solamente      ...
2. Design                                 Thecreativeway Confindential. - Do not Copy Forward or Circulate                 ...
Parola chiave: CREARE   Ora possiamo finalmente prendere gli strumenti dell’artista...giovedì 17 maggio 2012
2. Design             La grafica (non solo per Contao...)             1) va fatta sulle reali esigenze del target del Clien...
2. Design             Regola che vi salverà la vita             Se disegno in PS un qualsiasi elemento grafico per il      ...
2. Design             Facciamo un esempio.                                     Un modulo NEWS in una homepage            P...
2. Design             template: news_latest.xhtml             <div class="layout_latest block"> -- il padre             <p...
2. Design             template: news_latest.xhtml             <div class="layout_latest block"> -- il padre             <p...
3. Codice ottimizzato                            per il montaggio                                      Thecreativeway Confi...
3. Codice             “Templating” - la fase più delicata del progetto su Contao per un Web Designer             - signific...
3. Codice             => Scrivo codice IN FUNZIONE DI Contao             (e non codice figo ma fine a se stesso)            ...
3. Codice             Questo significa ottimizzare             sul CSS, sulla grafica, sui tempi di lavorazione...          ...
3. Codice             Layout di base di Contao             (fe_page.xhtml) ...ma “fe che diavolo vuol dire??? :-)         ...
3. Codice             Possiamo scrivere il nostro HTML ottimizzato Contao a vari livelli.             Ideale sarebbe arriv...
Bonus:                         Contao + HTML5                                  Thecreativeway Confindential. - Do not Copy ...
Thecreativeway Confindential. - Do not Copy Forward or Circulate                         © thecreativeway 2012. All Rights ...
Contao + HTML5             Dalla v. 2.10 Contao ha integrato un bundle HTML5 molto basico             Richiamabile da     ...
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://html5boilerpla...
Contao + HTML5    Perchè usare HTML5 (non solo in Contao!)   . Perchè è la nuova versione di HTML   Non è più possibile no...
Contao + HTML5    Per saperne di più   http://www.w3schools.com/html5/   Sintassi di base   http://www.w3.org/html/planet/...
Contao + HTML5    Librigiovedì 17 maggio 2012
DOMANDE?                              @samueleschiavon                         facebook.com/samuele.schiavon              ...
GRAZIE!CONTAO ITALIAN CONFERENCE 2012 Milano Marittima, 26 maggio                               Thecreativeway Confindentia...
Upcoming SlideShare
Loading in …5
×

Web Design ottimizzato per Contao CMS

780 views

Published on

Le slide del mio intervento alla Contao Italian Conference 2012 del 29 maggio 2012 a Milano Marittima (RA).

Published in: Design
  • POR FAVOR ESTA PROPUESTA DE NEGOCIO, ESCRIBA EN MI ESPALDA ID si está interesado.
    ------------------------------------

    Feliz mes nuevo abundante de noviembre,

    Hola.

    ¿Cómo estás hoy?
    Espero que estés bien y que todo está bien con usted? gracias God.My nombre es jenifer PETERSON. (estoy buscando una buena relación y además que tenga propuesta de negocios con usted) si lo desea. por favor, escríbeme mensaje a mi buzón de correo electrónico
    Thanks,>

    jeniferpeterson1 en / yh / dt / cum
    ---------------------

    PLEASE THIS BUSINESS PROPOSAL, WRITE ON MY ID BACK IF INTERESTED.
    ------------------------------------

    Happy abundant new month of November,

    Hello.

    how are you today?
    I hope you are fine and all is well with you ? thank God.My name is JENIFER PETERSON .(i am looking for a good relationship and also to have business proposal with you )if you want. please write me message to my email box
    THANKS,>

    jeniferpeterson1 at / yh / dt / cum
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Web Design ottimizzato per Contao CMS

  1. 1. WEB DESIGN OTTIMIZZATOPER CONTAO CMSCONTAO ITALIAN CONFERENCE 2012 Milano Marittima, 26 maggio Samuele Schiavon Thecreativeway Confindential. - Do not Copy Forward or Circulate © thecreativeway 2012. All Rights Reserved.giovedì 17 maggio 2012
  2. 2. La progettazione è l’arte di abbinare forma e contenuto. Paul Randgiovedì 17 maggio 2012
  3. 3. ...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...) La progettazione dovrebbe essere ispirata da chiarezza, semplicità, oggettività Paul Rand Thecreativeway Confindential. - Do not Copy Forward or Circulate © thecreativeway 2012. All Rights Reserved.giovedì 17 maggio 2012
  4. 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. 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. 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 tempigiovedì 17 maggio 2012
  7. 7. Il Web Designer è UN CODER: ha ampie competenze di HTML, CSS, Javascript e derivati (jQuery, MooTools)giovedì 17 maggio 2012
  8. 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. 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
  10. 10. 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
  11. 11. Design “è come funziona”. Thecreativeway Confindential. - Do not Copy Forward or Circulate © thecreativeway 2012. All Rights Reserved.giovedì 17 maggio 2012
  12. 12. Veniamo a noi e uniamo le cose :).giovedì 17 maggio 2012
  13. 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, JSgiovedì 17 maggio 2012
  14. 14. 1. Prototipazione Thecreativeway Confindential. - Do not Copy Forward or Circulate © thecreativeway 2012. All Rights Reserved.giovedì 17 maggio 2012
  15. 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. Wikipediagiovedì 17 maggio 2012
  16. 16. La prototipazione è importantissima Cosa definiamo?giovedì 17 maggio 2012
  17. 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. 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’ interattivigiovedì 17 maggio 2012
  19. 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. 20. 1. Prototipazione Layout di tipo “Fixed” o “Centered”...insomma i canonici 960px di larghezza Testata - #header Contenitore - #container Footer - #footergiovedì 17 maggio 2012
  21. 21. 1. Prototipazione il Layout in Contao Testata - #header #left #main #right Il #container è il loro “padre” Footer - #footergiovedì 17 maggio 2012
  22. 22. 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
  23. 23. Esempio: eiuc.org #header #container con dentro solamente #main #footergiovedì 17 maggio 2012
  24. 24. 2. Design Thecreativeway Confindential. - Do not Copy Forward or Circulate © thecreativeway 2012. All Rights Reserved.giovedì 17 maggio 2012
  25. 25. Parola chiave: CREARE Ora possiamo finalmente prendere gli strumenti dell’artista...giovedì 17 maggio 2012
  26. 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. 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. 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. 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> 3. Titolo <h2></h2> -- il titolo (linkato) della news <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. 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> 3. Titolo </div> <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
  31. 31. 3. Codice ottimizzato per il montaggio Thecreativeway Confindential. - Do not Copy Forward or Circulate © thecreativeway 2012. All Rights Reserved.giovedì 17 maggio 2012
  32. 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. 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. 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 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
  35. 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. 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 #left #wrapper #container #right #main #footergiovedì 17 maggio 2012
  37. 37. Bonus: Contao + HTML5 Thecreativeway Confindential. - Do not Copy Forward or Circulate © thecreativeway 2012. All Rights Reserved.giovedì 17 maggio 2012
  38. 38. Thecreativeway Confindential. - Do not Copy Forward or Circulate © thecreativeway 2012. All Rights Reserved.giovedì 17 maggio 2012
  39. 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
  40. 40. Contao + HTML5 Possiamo fare moooolto di più...giovedì 17 maggio 2012
  41. 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. 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 webgiovedì 17 maggio 2012
  43. 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
  44. 44. Contao + HTML5 Librigiovedì 17 maggio 2012
  45. 45. DOMANDE? @samueleschiavon facebook.com/samuele.schiavon samuele@thecreativeway.itgiovedì 17 maggio 2012
  46. 46. GRAZIE!CONTAO ITALIAN CONFERENCE 2012 Milano Marittima, 26 maggio Thecreativeway Confindential. - Do not Copy Forward or Circulate © thecreativeway 2012. All Rights Reserved.giovedì 17 maggio 2012

×