Your SlideShare is downloading. ×
0
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
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.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,523

Published on

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,523
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
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

×