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