slide sessione drupal theming & css framework – drupal camp torino 2010

41
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.

Upload: domenico-monaco-kiuz

Post on 22-May-2015

1.522 views

Category:

Technology


3 download

DESCRIPTION

Difficoltà: Facie, BeginnerArgomenti: Drupal Theming & Css FrameworkDescrizione: 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

TRANSCRIPT

Page 1: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

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.

Page 2: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

2 / 41

Non Reinventare la ruota

Page 3: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

3 / 41

Dove cercare …

Page 4: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

4 / 41

Cosa Cerchiamo ...

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

Page 5: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

5 / 41

Codice Banale o ripetitivo?

Sempre i soliti problemi e le solite soluzioni?

Spesso si usa un tema base ...

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

Page 6: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

6 / 41

1° ParteButtiamo un po' di carne al fuoco

Page 7: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

7 / 41

Design Mockup & Draft

Design User Interface

Page 8: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

8 / 41

Cascading Style Sheet

Foglio di stile: *.css

Panoramica CSS

Page 9: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

9 / 41

Cos'è & Cosa fà?

Panoramica CSS

● É 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

Page 10: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

10 / 41

Sintassi

Panoramica CSS

● 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

Page 11: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

11 / 41

Uso & Possibilità

Panoramica CSS

● Spostare una gran quantità di informazioni● Presentazione e Markup più manutenibile● Condivisione degli Stili

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

Page 12: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

12 / 41

Sorgenti

Panoramica CSS

● 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>

Page 13: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

13 / 41

Panoramica CSS

●Inline negli elementi di markup (usando Style)

●Embeded Style Block nel file HTML

●File Esterno

●User Style / Local CSS

●User Agent Style

Priorità

Page 14: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

14 / 41

DRUPAL THEMING

Drupal Theming

Page 15: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

15 / 41

Componenti comuni

Drupal Theming

● TemplateName.info

● page.tpl.php

● front-page.tpl.php

● block.tpl.php

● template.php

Page 16: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

16 / 41

Separazione …

Drupal Theming

preprocess_hook +

Template Engine

Page 17: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

17 / 41

Granularità

Drupal Theming

Page 18: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

18 / 41

Eredità & Gerarchia

Drupal Theming

• 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

Page 19: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

19 / 41

2° Parte

… facciamo un po' di ordine

CSS Framework!

Page 20: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

20 / 41

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

Cos'è un Css Framework

Page 21: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

21 / 41

Qual'è lo scopo?

CSS Framework

[…] 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!

Page 22: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

22 / 41

Componenti/separazione

CSS Framework

Componenti comuni:● RESET.css

● BASELINE.cssAdd-ons / Extra● Print.css● Typography.css● Forms.css● Grid.css● ....

Modularizzazione:● Utilizzo più semplcie● Utilizzo disgiunto● Pensare a “mattoncini”

Page 23: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

23 / 41

Vantaggi

CSS Framework

● 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 (?)

Page 24: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

24 / 41

Svantaggi

CSS Framework

Non è tuo

Curva di apprendimento

Non tutto è necessario (?)

Possibili implicazione Semantiche (Pro/Contro?)

Page 25: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

25 / 41

Perdite di Tempo / Risparmio di tempo

CSS Framework

É assodato:Non c'è dubbio, fa risparmiare tempoCrea una baseNon si inizia a sviluppare da “Zero”

In contrasto:Esiste una curva di ApprendimentoAll'inizio potrebbe esserci confusioneSe non lo si consce, i tempi si allungano

EqilibrioBuona comprensione prima di avere dei beneficiTuttavia esiste chi trova positivo utilizzare il proprio codice

Page 26: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

26 / 41

Css Framework

Quale Scegliere!?

Page 27: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

27 / 41

Blueprint CssFramework

Page 28: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

28 / 41

Blueprint CssFramework

Page 29: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

29 / 41

Blueprint CssFramework

Page 30: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

30 / 41

Mockup

Drupal - Design a Theme

Page 31: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

31 / 41

Drupal - Design a Theme

c

Page 32: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

32 / 41

Drupal - Design a Theme

Page 33: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

33 / 41

Blueprint/ LICENSE.txt README.txt

blueprint.info

page.tpl.php node.tpl.php block.tpl.php

comment.tpl.php

box.tpl.php forum-list.tpl.php

template.php template.block-editing.inc

system.patch

Blueprint/css: blueprint.css ie6.css ie.css style.css

./images: icons loading.gif lquote.png

./images/icons: forum-closed.png forum-default.png forum-hot-new.png forum-hot.png forum-new.png forum-sticky.png menu-collapsed.gif menu-expanded.gif menu-leaf.gif

./scripts: general.js

Non contiene CSS FRAMEWORK!→ Blueprint

Bisogna effettuare il download!

Drupal - Design a Theme

Page 34: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

34 / 41

http://www.blueprintcss.org/Root/

BlueprintPluginSrcie.cssprint.cssscreen.css

LibTemplates

Psdfixed-width.psd

TestCHANGELOGS, LICENSE, README.textile

SRC/forms.cssgrid.css (?)ie.cssprint.cssreset.csstypograpy

Drupal - Design a Theme

Page 35: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

35 / 41

Drupal - Design a Theme

Grid.css

Page 36: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

36 / 41

Grid.css

Drupal - Design a Theme

Page 37: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

37 / 41

30pixel x 24colonne = 720px

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

Span 1 = 30px + 10px = 40pxSpan 2 = ((30 * 2) + (2-1)*10px) + 10px = 80pxSpan “n” = ((30px * n) + ((n-1)*10px)) + 10px = ??

Custom?Span “n” = ((WIDTH-COL * n) + ((n-1) * GUTTER-SPACE)) + GUTTER-SPACE = ??

Drupal - Design a Theme

Page 38: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

38 / 41

Dimostrazione Pratica

Drupal - Design a Theme

Page 39: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

39 / 41

The End

http://www.flickr.com/photos/kiuz/

Page 40: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

40 / 41

Domande?

http://www.flickr.com/photos/oberazzi/318947873/

Page 41: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

41 / 41

Domenico Monaco - Web Developer & Designer -

[email protected]@kiuzhack

Links:

http://www.kiuz.it → Home

http://www.pillsofbits.com → Blog

CoFounder @ http://www.slice2theme.com

Un Grazie a tutti voi