Your SlideShare is downloading. ×
  • Like
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 1,491 views
Published

Difficoltà: Facie, Beginner …

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,491
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
10
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. Non Reinventare la ruota 2 / 41
  • 3. Dove cercare … 3 / 41
  • 4. http://www.flickr.com/photos/pinksherbet/3387327059/ Cosa Cerchiamo ... 4 / 41
  • 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. 1° Parte Buttiamo un po' di carne al fuoco 6 / 41
  • 7. Design User Interface Design Mockup & Draft 7 / 41
  • 8. Panoramica CSS Cascading Style Sheet Foglio di stile: *.css 8 / 41
  • 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. 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. 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. 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. 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. Drupal Theming DRUPAL THEMING 14 / 41
  • 15. Drupal Theming Componenti comuni ● TemplateName.info ● page.tpl.php ● front-page.tpl.php ● block.tpl.php ● template.php 15 / 41
  • 16. Drupal Theming Separazione … preprocess_hook + Template Engine 16 / 41
  • 17. Drupal Theming Granularità 17 / 41
  • 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. 2° Parte … facciamo un po' di ordine CSS Framework! 19 / 41
  • 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. 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. 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. 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. CSS Framework Svantaggi Non è tuo Curva di apprendimento Non tutto è necessario (?) Possibili implicazione Semantiche (Pro/Contro?) 24 / 41
  • 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. Css Framework Quale Scegliere!? 26 / 41
  • 27. Blueprint CssFramework 27 / 41
  • 28. Blueprint CssFramework 28 / 41
  • 29. Blueprint CssFramework 29 / 41
  • 30. Drupal - Design a Theme Mockup 30 / 41
  • 31. Drupal - Design a Theme c 31 / 41
  • 32. Drupal - Design a Theme 32 / 41
  • 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. 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. Drupal - Design a Theme Grid.css 35 / 41
  • 36. Drupal - Design a Theme Grid.css 36 / 41
  • 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. Drupal - Design a Theme Dimostrazione Pratica 38 / 41
  • 39. The End http://www.flickr.com/photos/kiuz/ 39 / 41
  • 40. http://www.flickr.com/photos/oberazzi/318947873/ Domande? 40 / 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