Drupal Theming & CSS Framework

Velocizzare ed ottimizzare i tempi di sviluppo
 di un tema. Panoramica, caratteristiche de...
Non Reinventare la ruota



2 / 41
Dove cercare …


3 / 41
http://www.flickr.com/photos/pinksherbet/3387327059/




         Cosa Cerchiamo ...


4 / 41
http://www.flickr.com/photos/67499195@N00/2571056264


          Codice Banale o ripetitivo?
Sempre i soliti problemi e le...
1° Parte
         Buttiamo un po' di carne al fuoco

6 / 41
Design User Interface
         Design Mockup & Draft




7 / 41
Panoramica CSS



     Cascading Style Sheet
          Foglio di stile: *.css




8 / 41
Panoramica CSS
Cos'è & Cosa fà?
 ●   É un linguaggio
 ●   Descrive la presentazione del contenuto
 ●   Separa contenuto e ...
Panoramica CSS
Sintassi
●
    Alcuni termini “Anglofoni” → “Property”
●   Style Sheet: Uno o più Blocchi di Dichiarazioni
...
Panoramica CSS




                            http://www.flickr.com/photos/britbohlinger/4223755982/


Uso & Possibilità
...
Panoramica CSS
Sorgenti
● Codice Inline: <tag style=”property:'value';”></tag>
● Codice embeded:

     <html><head>
     <...
Panoramica CSS




            ●   Inline negli elementi di markup (usando Style)
            ●   Embeded Style Block nel ...
Drupal Theming




          DRUPAL THEMING

14 / 41
Drupal Theming
               Componenti comuni


●   TemplateName.info
●   page.tpl.php
●   front-page.tpl.php
●   block....
Drupal Theming
          Separazione …




                     preprocess_hook
                             +
           ...
Drupal Theming
          Granularità




17 / 41
Drupal Theming
                 Eredità & Gerarchia

• Tema di base
• Sub-Theme eredita tutti gli stili
• Sub-Theme eredit...
2° Parte
          … facciamo un po' di ordine

          CSS Framework!



19 / 41
CSS Framework




              Cos'è un Css Framework
● jQuery, Symfony, Dojo ... Drupal! … sono Framework!
● Insieme di ...
CSS Framework
                         Qual'è lo scopo?
[…] The goal here is to allow the designer or developer to focus o...
CSS Framework
          Componenti/separazione

Componenti comuni:      Modularizzazione:
● RESET.css
                    ...
CSS Framework
                      Vantaggi
● Non si è ripetitivi
● Concetti di base condivisi


● Uso implicito di nomen...
CSS Framework
                 Svantaggi

                  Non è tuo

           Curva di apprendimento

          Non tu...
CSS Framework
   Perdite di Tempo / Risparmio di tempo
É assodato:
   Non c'è dubbio, fa risparmiare tempo
   Crea una bas...
Css Framework
Quale Scegliere!?




 26 / 41
Blueprint CssFramework




27 / 41
Blueprint CssFramework




28 / 41
Blueprint CssFramework




29 / 41
Drupal - Design a Theme
             Mockup




30 / 41
Drupal - Design a Theme




                c




31 / 41
Drupal - Design a Theme




32 / 41
Drupal - Design a Theme
                      Blueprint/css:
Blueprint/                blueprint.css
 LICENSE.txt         ...
Drupal - Design a Theme
           http://www.blueprintcss.org/
Root/
  Blueprint                  SRC/
      Plugin      ...
Drupal - Design a Theme
             Grid.css




35 / 41
Drupal - Design a Theme
             Grid.css




36 / 41
Drupal - Design a Theme

                30pixel x 24colonne = 720px

           720px + (10px (gutter) x 24px) = 960px

S...
Drupal - Design a Theme




          Dimostrazione Pratica




38 / 41
The End

http://www.flickr.com/photos/kiuz/
       39 / 41
http://www.flickr.com/photos/oberazzi/318947873/




          Domande?
40 / 41
Un Grazie a tutti voi

Domenico Monaco - Web Developer & Designer -

domenico.monaco@kiuz.it
                             ...
Upcoming SlideShare
Loading in …5
×

Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

1,772 views

Published on

Difficoltà: Facie, Beginner
Argomenti: Drupal Theming & Css Framework

Descrizione:
Le slide sono state proiettate durante la sessione "Drupal Theming & Css Framework" al Drupal Camp 2010 di Torino da Domenico Monaco, aka Kiuz. domenico.monaco[@]kiuz.it

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,772
On SlideShare
0
From Embeds
0
Number of Embeds
225
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

  1. 1. Drupal Theming & CSS Framework Velocizzare ed ottimizzare i tempi di sviluppo di un tema. Panoramica, caratteristiche dei CSS Framework e come utilizzarli per realizzare Design per Drupal.
  2. 2. Non Reinventare la ruota 2 / 41
  3. 3. Dove cercare … 3 / 41
  4. 4. http://www.flickr.com/photos/pinksherbet/3387327059/ Cosa Cerchiamo ... 4 / 41
  5. 5. http://www.flickr.com/photos/67499195@N00/2571056264 Codice Banale o ripetitivo? Sempre i soliti problemi e le solite soluzioni? Spesso si usa un tema base ... 5 / 41
  6. 6. 1° Parte Buttiamo un po' di carne al fuoco 6 / 41
  7. 7. Design User Interface Design Mockup & Draft 7 / 41
  8. 8. Panoramica CSS Cascading Style Sheet Foglio di stile: *.css 8 / 41
  9. 9. Panoramica CSS Cos'è & Cosa fà? ● É un linguaggio ● Descrive la presentazione del contenuto ● Separa contenuto e presentazione ● Possiede priorità definite → prevedere risultato → Cascading ● Produce: Migliore accessibilità Maggiore Flessibilità / Controllo Minore complessità / Ripetizioni 9 / 41
  10. 10. Panoramica CSS Sintassi ● Alcuni termini “Anglofoni” → “Property” ● Style Sheet: Uno o più Blocchi di Dichiarazioni ● Blocchi di Dichiarazioni: lista di dichiarazioni comprese tra parentesi graffe“{ }” ● Dichiarazione: Property : Value/Values; ● Selettori / Classi / Pseudo Classisi … ● Blocchi dichiarazione → Elementi Markup 10 / 41
  11. 11. Panoramica CSS http://www.flickr.com/photos/britbohlinger/4223755982/ Uso & Possibilità ● Spostare una gran quantità di informazioni ● Presentazione e Markup più manutenibile ● Condivisione degli Stili 11 / 41
  12. 12. Panoramica CSS Sorgenti ● Codice Inline: <tag style=”property:'value';”></tag> ● Codice embeded: <html><head> <title>Esempio</title> <style type="text/css"> .Selector{ Property: value; } </style> </head> ● File separato: <html><head> <title>Esempio</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> 12 / 41
  13. 13. Panoramica CSS ● Inline negli elementi di markup (usando Style) ● Embeded Style Block nel file HTML Priorità ● File Esterno ● User Style / Local CSS ● User Agent Style 13 / 41
  14. 14. Drupal Theming DRUPAL THEMING 14 / 41
  15. 15. Drupal Theming Componenti comuni ● TemplateName.info ● page.tpl.php ● front-page.tpl.php ● block.tpl.php ● template.php 15 / 41
  16. 16. Drupal Theming Separazione … preprocess_hook + Template Engine 16 / 41
  17. 17. Drupal Theming Granularità 17 / 41
  18. 18. Drupal Theming Eredità & Gerarchia • Tema di base • Sub-Theme eredita tutti gli stili • Sub-Theme eredita tutti i *.tpl • Sub-Theme eredita tutte le funzione template.php • Sub-Theme non utilizza mai funzioni *phptemplate_ • Riuscire sempre ad ottimizzare e aggiornare il tema • Override e Gerarchia 18 / 41
  19. 19. 2° Parte … facciamo un po' di ordine CSS Framework! 19 / 41
  20. 20. CSS Framework Cos'è un Css Framework ● jQuery, Symfony, Dojo ... Drupal! … sono Framework! ● Insieme di “tools” ● Libreria, insieme di Hacks … (?) ● Estraendo e rendendo disponibile per altri progetti ● Hai creato il tuo CSS Framework 20 / 41
  21. 21. CSS Framework Qual'è lo scopo? […] The goal here is to allow the designer or developer to focus on tasks that are unique to a given project, rather than reinventing the wheel each time around. Generally speaking, this is the approach taken by the aforementioned JavaScript and web application frameworks. [...] Jeff Croft - http://www.alistapart.com/articles/frameworksfordesigners/ … renderci la vita più facile! 21 / 41
  22. 22. CSS Framework Componenti/separazione Componenti comuni: Modularizzazione: ● RESET.css ● Utilizzo più semplcie ● BASELINE.css ● Utilizzo disgiunto Add-ons / Extra ● Pensare a “mattoncini” ● Print.css ● Typography.css ● Forms.css ● Grid.css ● .... 22 / 41
  23. 23. CSS Framework Vantaggi ● Non si è ripetitivi ● Concetti di base condivisi ● Uso implicito di nomenclatura ● Perfomance (?) ● Efficenza, ottimizate, codice condensato, no-withe- space, Short-Hand – File leggeri ● Compatibilità Cross-Browser ● Minor tempo/risorse ● Layout Complessi ma veloce (?) 23 / 41
  24. 24. CSS Framework Svantaggi Non è tuo Curva di apprendimento Non tutto è necessario (?) Possibili implicazione Semantiche (Pro/Contro?) 24 / 41
  25. 25. CSS Framework Perdite di Tempo / Risparmio di tempo É assodato: Non c'è dubbio, fa risparmiare tempo Crea una base Non si inizia a sviluppare da “Zero” In contrasto: Esiste una curva di Apprendimento All'inizio potrebbe esserci confusione Se non lo si consce, i tempi si allungano Eqilibrio Buona comprensione prima di avere dei benefici Tuttavia esiste chi trova positivo utilizzare il proprio codice 25 / 41
  26. 26. Css Framework Quale Scegliere!? 26 / 41
  27. 27. Blueprint CssFramework 27 / 41
  28. 28. Blueprint CssFramework 28 / 41
  29. 29. Blueprint CssFramework 29 / 41
  30. 30. Drupal - Design a Theme Mockup 30 / 41
  31. 31. Drupal - Design a Theme c 31 / 41
  32. 32. Drupal - Design a Theme 32 / 41
  33. 33. Drupal - Design a Theme Blueprint/css: Blueprint/ blueprint.css LICENSE.txt ie6.css README.txt ie.css blueprint.info style.css Non contiene ./images: CSS FRAMEWORK! page.tpl.php icons node.tpl.php loading.gif → Blueprint lquote.png block.tpl.php ./images/icons: Bisogna effettuare il comment.tpl.php forum-closed.png forum-default.png download! forum-hot-new.png box.tpl.php forum-hot.png forum-list.tpl.php forum-new.png forum-sticky.png menu-collapsed.gif template.php menu-expanded.gif template.block-editing.inc menu-leaf.gif system.patch ./scripts: general.js 33 / 41
  34. 34. Drupal - Design a Theme http://www.blueprintcss.org/ Root/ Blueprint SRC/ Plugin forms.css Src grid.css (?) ie.css print.css ie.css screen.css print.css Lib reset.css Templates typograpy Psd fixed-width.psd Test CHANGELOGS, LICENSE, README.textile 34 / 41
  35. 35. Drupal - Design a Theme Grid.css 35 / 41
  36. 36. Drupal - Design a Theme Grid.css 36 / 41
  37. 37. Drupal - Design a Theme 30pixel x 24colonne = 720px 720px + (10px (gutter) x 24px) = 960px Span 1 = 30px + 10px = 40px Span 2 = ((30 * 2) + (2-1)*10px) + 10px = 80px Span “n” = ((30px * n) + ((n-1)*10px)) + 10px = ?? Custom? Span “n” = ((WIDTH-COL * n) + ((n-1) * GUTTER-SPACE)) + GUTTER-SPACE = ?? 37 / 41
  38. 38. Drupal - Design a Theme Dimostrazione Pratica 38 / 41
  39. 39. The End http://www.flickr.com/photos/kiuz/ 39 / 41
  40. 40. http://www.flickr.com/photos/oberazzi/318947873/ Domande? 40 / 41
  41. 41. Un Grazie a tutti voi Domenico Monaco - Web Developer & Designer - domenico.monaco@kiuz.it twitter@kiuzhack Links: http://www.kiuz.it → Home http://www.pillsofbits.com → Blog CoFounder @ http://www.slice2theme.com 41 / 41

×