• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
 

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

on

  • 1,714 views

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

Statistics

Views

Total Views
1,714
Views on SlideShare
1,491
Embed Views
223

Actions

Likes
0
Downloads
10
Comments
0

4 Embeds 223

http://www.pillsofbits.com 113
http://pillsofbits.com 108
http://feeds.feedburner.com 1
https://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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.
    • 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 solite soluzioni? Spesso si usa un tema base ... 5 / 41
    • 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 presentazione ● Possiede priorità definite → prevedere risultato → Cascading ● Produce: Migliore accessibilità Maggiore Flessibilità / Controllo Minore complessità / Ripetizioni 9 / 41
    • 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
    • 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
    • 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
    • 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
    • Drupal Theming DRUPAL THEMING 14 / 41
    • Drupal Theming Componenti comuni ● TemplateName.info ● page.tpl.php ● front-page.tpl.php ● block.tpl.php ● template.php 15 / 41
    • Drupal Theming Separazione … preprocess_hook + Template Engine 16 / 41
    • Drupal Theming Granularità 17 / 41
    • 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
    • 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 “tools” ● Libreria, insieme di Hacks … (?) ● Estraendo e rendendo disponibile per altri progetti ● Hai creato il tuo CSS Framework 20 / 41
    • 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
    • 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
    • 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
    • CSS Framework Svantaggi Non è tuo Curva di apprendimento Non tutto è necessario (?) Possibili implicazione Semantiche (Pro/Contro?) 24 / 41
    • 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
    • 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 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
    • 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
    • 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 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
    • 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 twitter@kiuzhack Links: http://www.kiuz.it → Home http://www.pillsofbits.com → Blog CoFounder @ http://www.slice2theme.com 41 / 41