Riprendiamoci il Layout!

Riprendiamoci il layout! (Matteo Leoni)

Riprendiamoci il Layout!

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

venerdì 23 settembre 2011




@signalkuppe

• plurimedia.it

• signalkuppe.com

• @signalkuppe

• drupal.org/project/marinelli

• alpi...



Creare un layoutsignifica determinare le funzionalità di un sito!



websites

Pagine htmlmodifica dei file

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





websystems

DinamiciRedazionali

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





Dopo un lungo lavoro(prima dello sviluppo...)

• bozze

• wireframes

• mockups

• template html



fatevi aiutare da 960gs

Dopo un lungo lavoro(prima dello sviluppo...)

• bozze

• wireframes

• mockups

• template html



Drupal non è sempre la soluzione migliore !

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





“Drupalese”

Blocchicontext

panels display suite

panels + panels everywhere



Blocchi• Core

• Una sola istanza per regione

• Poco flessibile

• Codice php per controllare la visibilità

• Inefficiente

• amato da pochi...



Context• layout per configurazione

• migliora il sistema dei blocchi

• usa i blocchi (meglio)

• usa le regioni del tema

• poco redazionale

• amato dagli sviluppatori



Panels• Visual drag & drop

• path-driven

• layout illimitati

• integrato con Views

• redazionale

• ricco di funzionalità

• complesso

• amato dai designers



Panels Everywhere

• elimina del tutto l’uso dei blocchi

• page.tpl.php



Display Suite

• Permette di controllare la visualizzazione di ogni singola entity

• “Build Modes”

• Integrato con Views



site template(fisso)



site template(fisso)

content template(nodi,viste,ecc)



logo, titolo, slogan




menu




menu

primary links




menu

primary links

blocco html




menu

primary links

blocco html

menu




menu

field_reference

primary links

blocco html

menu



content-type “homepage”




field_reference




field_banner

field_reference




field_banner

field_testobanner

field_reference




field_banner

field_testobanner

fieldgroups

field_titolospot

field_immaginespot

field_testospot

field_reference



Panel layout• modifica tema.info

• cartella “nomelayout”

• nomelayout.inc

• nomelayout.png

• nomelayout.tpl.php

• (nomelayout.css)



site_template_base.inc



site_template_base.tpl.php



page.tpl.php



page.tpl.php

site-template.tpl.php



content template



content templatehomepage.tpl.php



node variant“sovrascrive il rendering del nodo”

node.tpl.php

homepage.tpl.php



New panel pages

ricerca/gruppo/13/didattica

• Nuovi url creati da panel

• supportano gli argomenti

• passano gli argomenti a view



websystems...• Selection rules

• Visibility rules

• Contexts

• Relationships

• View panes

• Custom content panes

• Pane styleshttp://www.flickr.com/photos/ajc1/


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



Selection rules



Visibility rules



Contexts (!=Context)

Mettono a disposizione del layout altre variabili

acquisiti dagli argomenti



Relationships

Caricano dati di altri nodi



Relationships/2



Relationships/2

content type “gruppo”



Relationships/2

content type “gruppo”

field_progetto (node-reference)



View Panes

“Ponte tra panels e views”



Custom content panes

testi statici o dinamici (contexts)



Pane styles



Downsides

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





Downsides/2

• Complesso

• Codifica dei layout

• Sovrascrive il comportamento standard di drupal

• complesso



Qualche link

• http://drupal.org/project/panels

• http://drupal.org/project/panels_everywhere

http://edu.plurimedia.it/pannelli.zip


http://www.plurimedia.it

http://www.plurimedia.it




Grazie!


Riprendiamoci il Layout!

Design

Transcript of Riprendiamoci il Layout!