Programmazione.it v6.4
Ciao, per farti riconoscere devi fare il login. Non ti sei ancora iscritto? Che aspetti, registrati adesso!
Info Pubblicit� Collabora Autori Sottoscrizioni Preferiti Bozze Scheda personale Privacy Archivio Libri Corsi per principianti Forum
Griglie conformi ai formati standard definiti dall'IAB
Scritto da Filippo Fadda il 23-12-2012 ore 20:03
CSS Grid Layout un working draft sottoposto di recente, per esattezza il 16 ottobre 2012 da Microsoft, al W3C. Si tratta, in buona sostanza, di un'estensione del linguaggio, che permetterebbe di creare layout adattivi, basati sulle griglie.

Al momento in cui scrivo, un'implementazione delle funzionalit descritte nella bozza di lavoro la si trova in IE 10. Non dato sapersi, n quando, n se verr supportato anche da Chrome, Firefox e compagnia bella, e non dunque attualmente una tecnologia utilizzabile. In ogni caso, qualora voleste saperne di pi, disponibile un'interessante introduzione a cura di Stephen Walther.

L'idea di utilizzare una griglia come base per costituire il layout di una pagina venuta a Natan Smith, che ha creato il 960 Grid System, ovverosia una griglia di 960 pixel, suddivisa in 12 o 16 colonne. In realt la griglia ha una larghezza di 940 pixel, poich quei 20 pixel in pi vanno a costituire i margini sinistro e destro della pagina. Se siete nuovi dell'argomento, troverete utile leggere "The 960 Grid System Made Easy" e dare un'occhiata all'immagine della griglia pi classica, quella a 12 colonne, giocando poi con i parametri per generare la griglia che preferite.

L'utilizzo di una una griglia per il layout di pagina, semplifica enormemente il design di un sito. Non un caso dunque, se divenuta prassi comune, per la quasi totalit dei web designer, l'uso di questa tecnica. La griglia, ed in particolare la 960.gs, ormai parte integrante dei framework HTML pi o meno noti, tra cui anche Twitter Bootstrap. Quest'ultimo presenta infatti due propriet nel file variables.less, che consentono di modificare le caratteristiche della griglia (il codice della griglia quello di 960.gs), in particolare: numero di colonne, larghezza della colonna e larghezza del gutter, ovvero dello spazio tra le colonne.

Parliamoci chiaro: oggi si pu fare web design anche senza un framework, ma un'impresa ardua pensare di realizzare un sito senza una griglia, cos come si faceva una volta. Non dico che non si possa fare, perch si pu, e si fa comunque prima di un tempo, ma il reset degli stili, magari attraverso normalize.css, coadiuvato dall'uso di una griglia, semplifica considerevolmente il lavoro.

Tutto ci premesso, la 960.gs, insieme con le sue varianti, vanno bene nella maggioranza dei casi, ma non in tutti i casi. Per esempio, nel caso vi si presentasse l'esigenza di disegnare un sito particolarmente complesso, dovreste far uso di colonne di larghezza inferiore, dunque una griglia con 24 colonne. Un altro problema che si ha con la 960.gs che non conforme alle "IAB Display Advertising Guidelines", ovverosia le linee guida che definiscono lo standard de facto per la creazione di quelli che vengono comunemente chiamati banner, pi in generale delle creativit. Purtroppo le dimensioni dei banner vengono spesso imposte agli editori: le agenzie pianificano su un grande numero di siti e producono di norma, salvo casi eccezionali, una serie di formati standard, e tra i nuovi ve ne sono alcuni che 960.gs non supporta.

I pi comuni, cosiddetti tabellari, generalmente 300x250 e 300x600, sono supportati dalla 960.gs, in quanto i 300 pixel orizzontali sono di fatto 4 colonne delle griglia, pi naturalmente il gutter che separa le colonne.
Una colonna da 300 pixel pu essere rappresentata dall'equazione 300 = (60 * n) + (20 * (n - 1)), da cui n = 4, ovverosia quattro colonne. Se n fosse stato una frazione, allora non sarebbe stato possibile creare un layout con una colonna di 300 pixel, capace di ospitare un classico Medium Rectangle (300x250).

Per un qualunque quotidiano telematico, che vive di pubblicit, supportare i formati standard essenziale, e sino ad ora la griglia 960.gs, nella sua configurazione a 12 colonne, si dimostrata adeguata. L'IAB ha di recente introdotto alcuni nuovi formati, sempre pi grandi, che hanno una dimensione orizzontale di 970 pixel. E' chiaro che se la larghezza della griglia di 940 pixel (960 meno 20, ovvero la larghezza del gutter), allora non sufficiente a contenere n il Billboard (970x250). n il Pushdown, lo Slider e neppure il Super Leaderboard, poich sono 970x90. Insomma, si passati dal Leaderboard (728x90) al Super Leaderboard (970x90) in quanto sono cambiate le dimensioni dei monitor. L'IAB sta dunque spingendo verso nuovi, grandi, formati, i quali meglio si adattano alla risoluzione dei nuovi schermi, rendendo dunque obsoleta la 960.gs.

La questione naturalmente mi tocca da vicino, perch con la pubblicit "ci campo", ed per questo motivo che ho voluto creare uno script in grado di generare a partire da una serie di impostazioni, l'elenco delle griglie in grado di supportare i formati dell'IAB.

960.gs si basa sull'equazione 940 = (60 * 12) + (20 * (12 - 1)), da cui si evince t = (c * n) + (g * (n - 1)), dove t la lunghezza della griglia utile (senza considerare i margini), c la larghezza di una singola colonna, n il numero di colonne, g la larghezza del gutter.
Se risolviamo l'equazione di cui sopra per t = 940, ovverosia 940 = (c * n) + (g * (n - 1)), otteniamo n = (g + 940) / (c + g), per cui n = (g + t) / (c + g).

In generale sappiamo che il numero di colonne n, calcolato per una griglia di larghezza t, le cui colonne devono avere larghezza c ed il gutter larghezza g, deve essere un numero intero positivo. Se n una frazione, allora la griglia non valida per i parametri inseriti. Questo naturalmente vale anche per un sottoinsieme della griglia.

Lo scopo dell'algoritmo di seguito esposto infatti quello di generare l'elenco di griglie conformi, valide, in funzione di una serie di parametri. Uno di questi parametri la larghezza di una colonna, ovvero la possibilit di creare un layout di pagina che contenga una colonna larga esattamente 300 pixel, in grado dunque di ospitare il gi menzionato Medium Rectangle. Ovviamente per una griglia che abbia dimensione superiore o uguale ai 970 pixel, che sia dunque in grado di ospitare i nuovi formati introdotti dall'IAB.

Tutti i parametri sono configurabili e qualora non vi interessi avere una colonna con dimensioni fisse, potete impostare il valore della costante DESIRED_FIXED_WIDTH alla larghezza della griglia.
  1. <?php
  2. //! @file GridGen.php
  3. //! @brief This script calculates all the grid valid combinations, based on 960.gs.
  4. //! @details
  5. //! @author Filippo F. Fadda
  6.  
  7.  
  8. //! @name Container
  9. //! @brief This is the container's width, left and right margins are not considered. The 960 grid, for example, is 940
  10. //! pixels. The value for the margins is given by the gutter width divide 2. So, in case you have a 20 pixels gutter,
  11. //! left and right margins of the container are 10 pixels.
  12. // @{
  13. const CONTAINER_MIN_WIDTH = 970; //!< Container's minimum width.
  14. const CONTAINER_MAX_WIDTH = 1200; //!< Container's maximum width.
  15. //@}
  16.  
  17. //! @name Gutter
  18. //! @brief The space between columns.
  19. // @{
  20. const GUTTER_MIN_WIDTH = 14; //!< Minimum width of the space between columns.
  21. const GUTTER_MAX_WIDTH = 20; //!< Maximum width of the space between columns.
  22. //@}
  23.  
  24. //! @name Columns
  25. //! @brief Every grid is divided in a fixed number of columns, more columns give you more flexibility, but less are easy
  26. //! to manage.
  27. // @{
  28. const COLUMNS_MIN_NUMBER = 10; //!< Minimum grid columns number.
  29. const COLUMNS_MAX_NUMBER = 24; //!< Maximum grid columns number.
  30. //@}
  31.  
  32. //! @brief Layout must allow a column large exactly as the value of this constant.
  33. //! @details If you are planning to design a structured site, like a blog or a newspaper, you must care about advertising
  34. //! formats defined by IAB. For example, you might reserve a column that fits perfectly a Medium Rectangle banner (300x250).
  35. const DESIRED_FIXED_WIDTH = 300;
  36.  
  37.  
  38. //! @brief Gets all divisors of the given number.
  39. function getDivisors($number) {
  40.   $divisors = [];
  41.  
  42.   for ($i = 1; $i <= $number; $i++) {
  43.     if($number % $i == 0)
  44.       $divisors[] = $i;
  45.   }
  46.  
  47.   return $divisors;
  48. }
  49.  
  50.  
  51. //! @brief Gets the valid grid combinations.
  52. function getGrids() {
  53.   $grids = [];
  54.  
  55.   $allowedColumnsWidths = getDivisors(DESIRED_FIXED_WIDTH);
  56.  
  57.   foreach ($allowedColumnsWidths as $columnWidth) {
  58.     for ($gutterWidth = GUTTER_MIN_WIDTH; $gutterWidth <= GUTTER_MAX_WIDTH; $gutterWidth++)  {
  59.  
  60.       if (($gutterWidth + DESIRED_FIXED_WIDTH) % ($columnWidth + $gutterWidth) != 0)
  61.         continue;
  62.  
  63.       $columnsNeededToFitDesiredWidth = ($gutterWidth + DESIRED_FIXED_WIDTH) / ($columnWidth + $gutterWidth);
  64.  
  65.       for ($gridColumns = COLUMNS_MIN_NUMBER; $gridColumns <= COLUMNS_MAX_NUMBER; $gridColumns++)
  66.         if (((DESIRED_FIXED_WIDTH * $gridColumns) % $columnsNeededToFitDesiredWidth == 0)) {
  67.           $gridWidth = ($columnWidth * $gridColumns) + ($gutterWidth * ($gridColumns -1));
  68.  
  69.           if ($gridWidth >= CONTAINER_MIN_WIDTH && $gridWidth <= CONTAINER_MAX_WIDTH && ($gridWidth % 2) == 0)
  70.             $grids[] = "GRID WIDTH: $gridWidth - COLUMNS: $gridColumns - COLUMN WIDTH: $columnWidth - GUTTER WIDTH: $gutterWidth";
  71.         }
  72.     }
  73.   }
  74.  
  75.   return $grids;
  76. }
  77.  
  78.  
  79. print_r(getGrids());

Nella configurazione di default ho scoperto che sono possibili soltanto tre griglie, come si evince dall'output del programma:
  1. GRID WIDTH: 1020 - COLUMNS: 13 - COLUMN WIDTH: 60 - GUTTER WIDTH: 20
  2. GRID WIDTH: 1100 - COLUMNS: 14 - COLUMN WIDTH: 60 - GUTTER WIDTH: 20
  3. GRID WIDTH: 1180 - COLUMNS: 15 - COLUMN WIDTH: 60 - GUTTER WIDTH: 20
Precedente: PhpStorm 5 e l'Early Access Program della versione 6
Successiva: Siamo ufficialmente su Twitter e su Facebook
Intervento di Ezio Meneghini a.k.a. santecaserio del 25-12-2012 ore 14:45, Ancona (AN)
Plebeo
Plebeo
(13 interventi)
Iscritto il 10-01-2009
Varie considerazioni:
* I grafici creano griglie da molto prima che esistesse Internet, presumo dai tempi di Gutemberg. Se ad oggi ricreano una griglia daccapo ogni volta che fanno un nuovo giornale/depliant/etc, non perch sono stupidi, ma perch hanno esigenze diverse rispetto ai programmatori. E' presumere che i grafici abbiano le stesse esigenze dei programmatori, che stupido. Il signore in questione cosa fa, indossa la conchiglia perch gliel'ha consigliato un giocatore di football? :)
* Quello che manca ai CSS, un modo per creare una griglia nel senso vero della parola, e non nel senso menomato che usa chi lavora nel web. In altre parole, non solo i box devono essere allineati uno sotto l'altro, ma le righe di testo del box a sinistra devono essere allineabili con la colonna centrale e quella di destra. Insomma, i CSS devono consentire di creare una griglia esattamente come si fa con programmi come InDesign, e dare la possibilit di specificare che il testo/immagine/filetto "incollato" alla griglia.
* Per quale motivo TUTTI i produttori di browser, pur avendo implementato solo un subset OVVIAMENTE insufficiente di CSS3, ritengono cos importante proporre nuovi standard? E' come se io costruissi una calcolatrice e, prima di aver messo il tasto PER, proponga ai produttori di tutto il mondo di inserire un tasto MEDIA QUADRATICA. Chi dirige un progetto non dovrebbe avere un briciolo di intelligenza? Non si pu cavarsela sempre dicendo "vabb, tanto sono stupidi anche i miei concorrenti"...
Intervento di Filippo Fadda a.k.a. dedalo del 26-12-2012 ore 18:40, Capriata d'orba (AL)
Duca
Duca

(1994 interventi)
Iscritto il 03-04-2001
Sinceramente Ezio non ho ben capito la prima parte del discorso.

I CSS poi non sono nati con l'intenzione di impaginare, ma con quella di cambiare stile ad una pagina. L'impaginazione, una volta, si faceva con le tabelle, non c'era altro modo. Poi sono arrivati i CSS, il reset e infine c' chi ha pensato di usare i CSS per fare layout con delle griglie, un po' come hanno sempre fatto i grafici. Microsoft ha proposto un'estensione, alla quale ho accennato nell'articolo, per fare proprio quello che tu hai menzionato.

Nel caso specifico, quello proposto da Microsoft un draft, e la sua un'implementazione proprietaria, non uno standard. Evidentemente in questi anni, i vari produttori di browser non hanno ragionato sulla questione e non stato definito uno standard per l'impaginazione, ma non detto che non lo facciano in futuro o che venga abbracciata la proposta fatta da Microsoft, magari con qualche variazione.

Per il momento non ci resta che continuare ad usare 960.gs o una delle tante varianti disponibili.
Intervento di Gianfranco Fedele a.k.a. gianfrasoft del 10-01-2013 ore 16:06, Napoli (NA)
Plebeo
Plebeo

(8 interventi)
Iscritto il 19-04-2010
santecaserio ha scritto:
Varie considerazioni:
* I grafici creano griglie da molto prima che esistesse Internet, presumo dai tempi di Gutemberg. Se ad oggi ricreano una griglia daccapo ogni volta che fanno un nuovo giornale/depliant/etc, non perch sono stupidi, ma perch hanno esigenze diverse rispetto ai programmatori. E' presumere che i grafici abbiano le stesse esigenze dei programmatori, che stupido. Il signore in questione cosa fa, indossa la conchiglia perch gliel'ha consigliato un giocatore di football? :)
* Quello che manca ai CSS, un modo per creare una griglia nel senso vero della parola, e non nel senso menomato che usa chi lavora nel web. In altre parole, non solo i box devono essere allineati uno sotto l'altro, ma le righe di testo del box a sinistra devono essere allineabili con la colonna centrale e quella di destra. Insomma, i CSS devono consentire di creare una griglia esattamente come si fa con programmi come InDesign, e dare la possibilit di specificare che il testo/immagine/filetto "incollato" alla griglia.
* Per quale motivo TUTTI i produttori di browser, pur avendo implementato solo un subset OVVIAMENTE insufficiente di CSS3, ritengono cos importante proporre nuovi standard? E' come se io costruissi una calcolatrice e, prima di aver messo il tasto PER, proponga ai produttori di tutto il mondo di inserire un tasto MEDIA QUADRATICA. Chi dirige un progetto non dovrebbe avere un briciolo di intelligenza? Non si pu cavarsela sempre dicendo "vabb, tanto sono stupidi anche i miei concorrenti"...

Ho la sensazione che tu non abbia molta esperienza nello sviluppo web frontend. I CSS sono fondamentali e le griglie essenziali se si desidera essere produttivi e garantire tempi di risposta rapidi.
Intervento di Kenley William a.k.a. kenley22 del 24-04-2014 ore 08:28
Plebeo
Plebeo
(1 intervento)
Iscritto il 24-04-2014
Transparency is a must in scrum rules as it allows important aspects of the process to be visible to all the members who are responsible for the result. Since every team member should understand it is always advisable to use a common terminology so that reviews can be shared by all.
Copyright Programmazione.it™ 1999-2017. Alcuni diritti riservati. Testata giornalistica iscritta col n. 569 presso il Tribunale di Milano in data 14/10/2002. Pagina generata in 0.212 secondi.