SlideShare a Scribd company logo
960 Grid System CSS Framework960 Grid System CSS Framework
e compatibilità cross browsere compatibilità cross browser
Gianfranco Fedele
Analista software e sviluppatore
presso la D&D
http://www.linkedin.com/in/gianfrasoft
gianfrasoft@gmail.com
960 Grid System CSS Framework960 Grid System CSS Framework
e compatibilità cross browsere compatibilità cross browser
Il paradosso del World Wide Web
Consortium
Il problema della compatibilità cross-browser appare un
problema senza fine.
● http://www.w3.org/
● http://www.w3.org/Consortium/Member/List
gianfrasoft@gmail.com
960 Grid System CSS Framework960 Grid System CSS Framework
e compatibilità cross browsere compatibilità cross browser
Lo standard per la presentazione
dei dati sul Web è CSS
CSS introduce la separazione tra contenuto e layout delle pagine
web.
● http://www.w3.org/Style/CSS/
gianfrasoft@gmail.com
960 Grid System CSS Framework960 Grid System CSS Framework
e compatibilità cross browsere compatibilità cross browser
Provare a rimettere le cose a posto
con reset.css
● http://meyerweb.com/eric/tools/css/reset/
● http://developer.yahoo.com/yui/reset/
gianfrasoft@gmail.com
960 Grid System CSS Framework960 Grid System CSS Framework
e compatibilità cross browsere compatibilità cross browser
Utilizzare un framework CSS per la
realizzazione di un sito web
E' sempre più indispensabile stabilire le regole base per la
realizzazione dei layout grafici per il web. I framework CSS
rappresentano l'insieme delle idee di uno o più menti pensanti
alla ricerca di uno standard.
● http://speckyboy.com/2008/03/28/top-12-css-frameworks-and-how-to-understand-them/
gianfrasoft@gmail.com
960 Grid System CSS Framework960 Grid System CSS Framework
e compatibilità cross browsere compatibilità cross browser
Le regole di A List Apart per la
costruzione di un framework CSS
Un modo efficiente di gestire gli stili di un sito web è di avere più
fogli di stile, che si distinguono per il proprio ruolo:
Foglio di reset
Foglio di gestione della griglia
Foglio di rappresentazione dei widget
Foglio di stile tipografico
Foglio di stile personalizzato
● http://www.alistapart.com/articles/frameworksfordesigners/
gianfrasoft@gmail.com
960 Grid System CSS Framework960 Grid System CSS Framework
e compatibilità cross browsere compatibilità cross browser
960.gs di Nathan Smith è un
framework semplice e flessibile.
960.gs ragiona su una dimensione fissa di 960 pixel e su 3
modelli di layout a 12, 16 e 24 colonne (ma non solo).
●http://960.gs/
gianfrasoft@gmail.com
960 Grid System CSS Framework960 Grid System CSS Framework
e compatibilità cross browsere compatibilità cross browser
960.gs è un framework semplice,
flessibile ed è sempre più diffuso.
960.gs mette a disposizione 5 tipologie di classi fondamentali:
● container_*
● grid_*
● clear
● alpha
● omega
gianfrasoft@gmail.com
960 Grid System CSS Framework960 Grid System CSS Framework
e compatibilità cross browsere compatibilità cross browser
Stili di un layout 960.gs a 12 col
container_12
grid_12
grid_4 grid_8
grid_4 alpha grid_4 omega
grid_12
gianfrasoft@gmail.com
960 Grid System CSS Framework960 Grid System CSS Framework
e compatibilità cross browsere compatibilità cross browser
960.gs è un framework semplice,
flessibile e sempre più diffuso.
960.gs mette a disposizione altre 4 tipologie di classi accessorie:
● prefix_*
● suffix_*
● push_*
● pull_*
● http://960.gs/demo.html
● http://960.gs/demo_24_col.html
gianfrasoft@gmail.com
960 Grid System CSS Framework960 Grid System CSS Framework
e compatibilità cross browsere compatibilità cross browser
960.gs è un framework semplice,
flessibile e sempre più diffuso.
Per 960.gs sono disponibili alcuni servizi online per la
realizzazione delle griglie di layout:
● http://www.spry-soft.com/grids/
gianfrasoft@gmail.com
960 Grid System CSS Framework960 Grid System CSS Framework
e compatibilità cross browsere compatibilità cross browser
Grazie a tutti
Gianfranco Fedele
http://www.linkedin.com/in/gianfrasoft
gianfrasoft@gmail.com

More Related Content

Similar to Grid System

Introduzione a Sass e Less (ITA)
Introduzione a Sass e Less (ITA)Introduzione a Sass e Less (ITA)
Introduzione a Sass e Less (ITA)
Valerio Radice
 
Blazor: are we ready for the launch?
Blazor: are we ready for the launch?Blazor: are we ready for the launch?
Blazor: are we ready for the launch?
Andrea Agnoletto
 
Errori Comuni nella SEO - Intervento Smau 2020
Errori Comuni nella SEO - Intervento Smau 2020Errori Comuni nella SEO - Intervento Smau 2020
Errori Comuni nella SEO - Intervento Smau 2020
Verdiana Amorosi - SEO Consultant
 
Html5 e css3 nuovi strumenti per un nuovo web
Html5 e css3 nuovi strumenti per un nuovo webHtml5 e css3 nuovi strumenti per un nuovo web
Html5 e css3 nuovi strumenti per un nuovo web
Massimo Bonanni
 
Smau Bologna 2016 - Codemotion
Smau Bologna 2016 - CodemotionSmau Bologna 2016 - Codemotion
Smau Bologna 2016 - Codemotion
SMAU
 
Alessandro Forte - ASP.Net 4.0
Alessandro Forte - ASP.Net 4.0Alessandro Forte - ASP.Net 4.0
Alessandro Forte - ASP.Net 4.0
Alessandro Forte
 
Studio e sviluppo di un sito web responsive attraverso Bootstrap
Studio e sviluppo di un sito web responsive attraverso BootstrapStudio e sviluppo di un sito web responsive attraverso Bootstrap
Studio e sviluppo di un sito web responsive attraverso Bootstrap
Davide Polotto
 
+ SASS = - stress
+ SASS = - stress+ SASS = - stress
+ SASS = - stress
Fabio Fabbrucci
 
Errori Comuni nella SEO - Intervento smau 2020
Errori Comuni nella SEO - Intervento smau 2020Errori Comuni nella SEO - Intervento smau 2020
Errori Comuni nella SEO - Intervento smau 2020
Verdiana Amorosi - SEO Consultant
 
Guida introduttiva al css
Guida introduttiva al cssGuida introduttiva al css
Guida introduttiva al css
Enrico Mainero
 
[IT] CMS Proprietari creati da teaminterni: le best practices da seguire!
[IT] CMS Proprietari creati da teaminterni: le best practices da seguire![IT] CMS Proprietari creati da teaminterni: le best practices da seguire!
[IT] CMS Proprietari creati da teaminterni: le best practices da seguire!
Federico Sasso
 
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
Corso WebApp iOS - Lezione 06:   Web Development for iOS DevicesCorso WebApp iOS - Lezione 06:   Web Development for iOS Devices
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
Andrea Picchi
 
Bootstrap 4 is Coming!
Bootstrap 4 is Coming!Bootstrap 4 is Coming!
Bootstrap 4 is Coming!
Carmine Alfano
 
Nicola Della Marina: Magento Frontend next level
Nicola Della Marina: Magento Frontend next levelNicola Della Marina: Magento Frontend next level
Nicola Della Marina: Magento Frontend next level
Meet Magento Italy
 
Enterprise ASP.NET Web Forms 4.0
Enterprise ASP.NET Web Forms 4.0Enterprise ASP.NET Web Forms 4.0
Enterprise ASP.NET Web Forms 4.0
Codemotion
 
Ottimizzare WordPress non solo per i motori di ricerca
Ottimizzare WordPress non solo per i motori di ricercaOttimizzare WordPress non solo per i motori di ricerca
Ottimizzare WordPress non solo per i motori di ricerca
Tiziano Fogliata
 
Blazor with .net 5 - di Gerardo Greco
Blazor with .net 5 - di Gerardo GrecoBlazor with .net 5 - di Gerardo Greco
Blazor with .net 5 - di Gerardo Greco
Giuneco S.r.l
 
HTML (+ DOM) + CSS
HTML (+ DOM) + CSSHTML (+ DOM) + CSS
HTML (+ DOM) + CSS
Giuseppe Vizzari
 
Cosa ci sarà dopo i CSS3? (reprise)
Cosa ci sarà dopo i CSS3? (reprise)Cosa ci sarà dopo i CSS3? (reprise)
Cosa ci sarà dopo i CSS3? (reprise)
Salvatore Laisa
 

Similar to Grid System (20)

Introduzione a Sass e Less (ITA)
Introduzione a Sass e Less (ITA)Introduzione a Sass e Less (ITA)
Introduzione a Sass e Less (ITA)
 
Blazor: are we ready for the launch?
Blazor: are we ready for the launch?Blazor: are we ready for the launch?
Blazor: are we ready for the launch?
 
Errori Comuni nella SEO - Intervento Smau 2020
Errori Comuni nella SEO - Intervento Smau 2020Errori Comuni nella SEO - Intervento Smau 2020
Errori Comuni nella SEO - Intervento Smau 2020
 
Html5 e css3 nuovi strumenti per un nuovo web
Html5 e css3 nuovi strumenti per un nuovo webHtml5 e css3 nuovi strumenti per un nuovo web
Html5 e css3 nuovi strumenti per un nuovo web
 
Smau Bologna 2016 - Codemotion
Smau Bologna 2016 - CodemotionSmau Bologna 2016 - Codemotion
Smau Bologna 2016 - Codemotion
 
Alessandro Forte - ASP.Net 4.0
Alessandro Forte - ASP.Net 4.0Alessandro Forte - ASP.Net 4.0
Alessandro Forte - ASP.Net 4.0
 
Studio e sviluppo di un sito web responsive attraverso Bootstrap
Studio e sviluppo di un sito web responsive attraverso BootstrapStudio e sviluppo di un sito web responsive attraverso Bootstrap
Studio e sviluppo di un sito web responsive attraverso Bootstrap
 
+ SASS = - stress
+ SASS = - stress+ SASS = - stress
+ SASS = - stress
 
Errori Comuni nella SEO - Intervento smau 2020
Errori Comuni nella SEO - Intervento smau 2020Errori Comuni nella SEO - Intervento smau 2020
Errori Comuni nella SEO - Intervento smau 2020
 
Guida introduttiva al css
Guida introduttiva al cssGuida introduttiva al css
Guida introduttiva al css
 
[IT] CMS Proprietari creati da teaminterni: le best practices da seguire!
[IT] CMS Proprietari creati da teaminterni: le best practices da seguire![IT] CMS Proprietari creati da teaminterni: le best practices da seguire!
[IT] CMS Proprietari creati da teaminterni: le best practices da seguire!
 
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
Corso WebApp iOS - Lezione 06:   Web Development for iOS DevicesCorso WebApp iOS - Lezione 06:   Web Development for iOS Devices
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
 
Html5
Html5Html5
Html5
 
Bootstrap 4 is Coming!
Bootstrap 4 is Coming!Bootstrap 4 is Coming!
Bootstrap 4 is Coming!
 
Nicola Della Marina: Magento Frontend next level
Nicola Della Marina: Magento Frontend next levelNicola Della Marina: Magento Frontend next level
Nicola Della Marina: Magento Frontend next level
 
Enterprise ASP.NET Web Forms 4.0
Enterprise ASP.NET Web Forms 4.0Enterprise ASP.NET Web Forms 4.0
Enterprise ASP.NET Web Forms 4.0
 
Ottimizzare WordPress non solo per i motori di ricerca
Ottimizzare WordPress non solo per i motori di ricercaOttimizzare WordPress non solo per i motori di ricerca
Ottimizzare WordPress non solo per i motori di ricerca
 
Blazor with .net 5 - di Gerardo Greco
Blazor with .net 5 - di Gerardo GrecoBlazor with .net 5 - di Gerardo Greco
Blazor with .net 5 - di Gerardo Greco
 
HTML (+ DOM) + CSS
HTML (+ DOM) + CSSHTML (+ DOM) + CSS
HTML (+ DOM) + CSS
 
Cosa ci sarà dopo i CSS3? (reprise)
Cosa ci sarà dopo i CSS3? (reprise)Cosa ci sarà dopo i CSS3? (reprise)
Cosa ci sarà dopo i CSS3? (reprise)
 

More from NaLUG

Cyber Forensic
Cyber ForensicCyber Forensic
Cyber Forensic
NaLUG
 
Digital Divide
Digital DivideDigital Divide
Digital Divide
NaLUG
 
Drupal
DrupalDrupal
Drupal
NaLUG
 
Digital Forensic
Digital ForensicDigital Forensic
Digital Forensic
NaLUG
 
Open Source: strumento per l'e-democracy
Open Source: strumento per l'e-democracyOpen Source: strumento per l'e-democracy
Open Source: strumento per l'e-democracy
NaLUG
 
OpenHardware : Arduino
OpenHardware : ArduinoOpenHardware : Arduino
OpenHardware : Arduino
NaLUG
 
Understanding Linux
Understanding LinuxUnderstanding Linux
Understanding Linux
NaLUG
 
Net Neutrality: HoBBIT
Net Neutrality: HoBBITNet Neutrality: HoBBIT
Net Neutrality: HoBBIT
NaLUG
 
Opensource per un Sistema Informativo Territoriale
Opensource per un Sistema Informativo TerritorialeOpensource per un Sistema Informativo Territoriale
Opensource per un Sistema Informativo Territoriale
NaLUG
 
Knomos
Knomos Knomos
Knomos
NaLUG
 
App comunicazione comune di Napoli
App comunicazione comune di NapoliApp comunicazione comune di Napoli
App comunicazione comune di Napoli
NaLUG
 
BISmark : the broadband internet service benchmark
BISmark : the broadband internet service benchmarkBISmark : the broadband internet service benchmark
BISmark : the broadband internet service benchmark
NaLUG
 
ClearOS
ClearOSClearOS
ClearOS
NaLUG
 
Security and hacking Engineering
Security and hacking EngineeringSecurity and hacking Engineering
Security and hacking Engineering
NaLUG
 
Software libero at ENEA
Software libero at ENEASoftware libero at ENEA
Software libero at ENEA
NaLUG
 
Una nuova crittografia frattale: Crypt fna
Una nuova crittografia frattale: Crypt fnaUna nuova crittografia frattale: Crypt fna
Una nuova crittografia frattale: Crypt fna
NaLUG
 
ROS@Unina
ROS@Unina   ROS@Unina
ROS@Unina
NaLUG
 
Python@Unina - Exercises
Python@Unina - ExercisesPython@Unina - Exercises
Python@Unina - Exercises
NaLUG
 
Python@Unina - Theory
Python@Unina - TheoryPython@Unina - Theory
Python@Unina - Theory
NaLUG
 
Linux@Unina
Linux@UninaLinux@Unina
Linux@Unina
NaLUG
 

More from NaLUG (20)

Cyber Forensic
Cyber ForensicCyber Forensic
Cyber Forensic
 
Digital Divide
Digital DivideDigital Divide
Digital Divide
 
Drupal
DrupalDrupal
Drupal
 
Digital Forensic
Digital ForensicDigital Forensic
Digital Forensic
 
Open Source: strumento per l'e-democracy
Open Source: strumento per l'e-democracyOpen Source: strumento per l'e-democracy
Open Source: strumento per l'e-democracy
 
OpenHardware : Arduino
OpenHardware : ArduinoOpenHardware : Arduino
OpenHardware : Arduino
 
Understanding Linux
Understanding LinuxUnderstanding Linux
Understanding Linux
 
Net Neutrality: HoBBIT
Net Neutrality: HoBBITNet Neutrality: HoBBIT
Net Neutrality: HoBBIT
 
Opensource per un Sistema Informativo Territoriale
Opensource per un Sistema Informativo TerritorialeOpensource per un Sistema Informativo Territoriale
Opensource per un Sistema Informativo Territoriale
 
Knomos
Knomos Knomos
Knomos
 
App comunicazione comune di Napoli
App comunicazione comune di NapoliApp comunicazione comune di Napoli
App comunicazione comune di Napoli
 
BISmark : the broadband internet service benchmark
BISmark : the broadband internet service benchmarkBISmark : the broadband internet service benchmark
BISmark : the broadband internet service benchmark
 
ClearOS
ClearOSClearOS
ClearOS
 
Security and hacking Engineering
Security and hacking EngineeringSecurity and hacking Engineering
Security and hacking Engineering
 
Software libero at ENEA
Software libero at ENEASoftware libero at ENEA
Software libero at ENEA
 
Una nuova crittografia frattale: Crypt fna
Una nuova crittografia frattale: Crypt fnaUna nuova crittografia frattale: Crypt fna
Una nuova crittografia frattale: Crypt fna
 
ROS@Unina
ROS@Unina   ROS@Unina
ROS@Unina
 
Python@Unina - Exercises
Python@Unina - ExercisesPython@Unina - Exercises
Python@Unina - Exercises
 
Python@Unina - Theory
Python@Unina - TheoryPython@Unina - Theory
Python@Unina - Theory
 
Linux@Unina
Linux@UninaLinux@Unina
Linux@Unina
 

Grid System

  • 1. 960 Grid System CSS Framework960 Grid System CSS Framework e compatibilità cross browsere compatibilità cross browser Gianfranco Fedele Analista software e sviluppatore presso la D&D http://www.linkedin.com/in/gianfrasoft gianfrasoft@gmail.com
  • 2. 960 Grid System CSS Framework960 Grid System CSS Framework e compatibilità cross browsere compatibilità cross browser Il paradosso del World Wide Web Consortium Il problema della compatibilità cross-browser appare un problema senza fine. ● http://www.w3.org/ ● http://www.w3.org/Consortium/Member/List gianfrasoft@gmail.com
  • 3. 960 Grid System CSS Framework960 Grid System CSS Framework e compatibilità cross browsere compatibilità cross browser Lo standard per la presentazione dei dati sul Web è CSS CSS introduce la separazione tra contenuto e layout delle pagine web. ● http://www.w3.org/Style/CSS/ gianfrasoft@gmail.com
  • 4. 960 Grid System CSS Framework960 Grid System CSS Framework e compatibilità cross browsere compatibilità cross browser Provare a rimettere le cose a posto con reset.css ● http://meyerweb.com/eric/tools/css/reset/ ● http://developer.yahoo.com/yui/reset/ gianfrasoft@gmail.com
  • 5. 960 Grid System CSS Framework960 Grid System CSS Framework e compatibilità cross browsere compatibilità cross browser Utilizzare un framework CSS per la realizzazione di un sito web E' sempre più indispensabile stabilire le regole base per la realizzazione dei layout grafici per il web. I framework CSS rappresentano l'insieme delle idee di uno o più menti pensanti alla ricerca di uno standard. ● http://speckyboy.com/2008/03/28/top-12-css-frameworks-and-how-to-understand-them/ gianfrasoft@gmail.com
  • 6. 960 Grid System CSS Framework960 Grid System CSS Framework e compatibilità cross browsere compatibilità cross browser Le regole di A List Apart per la costruzione di un framework CSS Un modo efficiente di gestire gli stili di un sito web è di avere più fogli di stile, che si distinguono per il proprio ruolo: Foglio di reset Foglio di gestione della griglia Foglio di rappresentazione dei widget Foglio di stile tipografico Foglio di stile personalizzato ● http://www.alistapart.com/articles/frameworksfordesigners/ gianfrasoft@gmail.com
  • 7. 960 Grid System CSS Framework960 Grid System CSS Framework e compatibilità cross browsere compatibilità cross browser 960.gs di Nathan Smith è un framework semplice e flessibile. 960.gs ragiona su una dimensione fissa di 960 pixel e su 3 modelli di layout a 12, 16 e 24 colonne (ma non solo). ●http://960.gs/ gianfrasoft@gmail.com
  • 8. 960 Grid System CSS Framework960 Grid System CSS Framework e compatibilità cross browsere compatibilità cross browser 960.gs è un framework semplice, flessibile ed è sempre più diffuso. 960.gs mette a disposizione 5 tipologie di classi fondamentali: ● container_* ● grid_* ● clear ● alpha ● omega gianfrasoft@gmail.com
  • 9. 960 Grid System CSS Framework960 Grid System CSS Framework e compatibilità cross browsere compatibilità cross browser Stili di un layout 960.gs a 12 col container_12 grid_12 grid_4 grid_8 grid_4 alpha grid_4 omega grid_12 gianfrasoft@gmail.com
  • 10. 960 Grid System CSS Framework960 Grid System CSS Framework e compatibilità cross browsere compatibilità cross browser 960.gs è un framework semplice, flessibile e sempre più diffuso. 960.gs mette a disposizione altre 4 tipologie di classi accessorie: ● prefix_* ● suffix_* ● push_* ● pull_* ● http://960.gs/demo.html ● http://960.gs/demo_24_col.html gianfrasoft@gmail.com
  • 11. 960 Grid System CSS Framework960 Grid System CSS Framework e compatibilità cross browsere compatibilità cross browser 960.gs è un framework semplice, flessibile e sempre più diffuso. Per 960.gs sono disponibili alcuni servizi online per la realizzazione delle griglie di layout: ● http://www.spry-soft.com/grids/ gianfrasoft@gmail.com
  • 12. 960 Grid System CSS Framework960 Grid System CSS Framework e compatibilità cross browsere compatibilità cross browser Grazie a tutti Gianfranco Fedele http://www.linkedin.com/in/gianfrasoft gianfrasoft@gmail.com