SlideShare uma empresa Scribd logo
1 de 23
Baixar para ler offline
Introduzione a
Twitter Bootstrap

Comperio srl, 17/10/13
Introduzione a Twitter Bootstrap
Comperio srl, 17/10/13

Esistono molti framework per la creazione di frontend

http://usablica.github.io/front-end-frameworks/compare.html
Introduzione a Twitter Bootstrap
Comperio srl, 17/10/13

Molti di questi framework condividono alcuni punti chiave:
●

HTML5 e CSS3, ovvero supporto per browser moderni (sì IE
resta un problema)

●

SCSS o LESS, ovvero un pre-processore per i fogli di stile

●

Layout a griglia e mobile-first

●

Stile globale degli elementi HTML

●

Componenti CSS “ready-to-use” per varie situazioni

●

jQuery come libreria javascript

●

Componenti Javascript attivabili grazie al semplice uso
dell'attibuto data
Introduzione a Twitter Bootstrap
Comperio srl, 17/10/13

Molti di questi framework condividono alcuni punti chiave:
●

HTML5 e CSS3, ovvero supporto per
browser moderni (sì IE resta un problema)

●

SCSS o LESS, ovvero un pre-processore per i fogli di stile

●

Layout a griglia e mobile-first

●

Stile globale degli elementi HTML

●

Componenti CSS “ready-to-use” per varie situazioni

●

jQuery come libreria javascript

●

Componenti Javascript attivabili grazie al semplice uso dell'attibuto data
Introduzione a Twitter Bootstrap
Comperio, 17/10/13
Introduzione a Twitter Bootstrap
Comperio, 17/10/13

<!DOCTYPE html>

HTML5 shim and Respond.js = avere a che fare con Internet Explorer
-webkit, -moz, -o = vendor prefix

Ok, ma cosa vuol dire HTML5 e CSS3? Eccovi un po' di risorse utili:
●

Una simpatica introduzione a HTML5: http://diveintohtml5.info/
(ce l'ho in italiano, su carta, se volete ve lo presto)

●

HTML5 doctor

●

CSS-Tricks
E per qualsiasi dubbio: http://caniuse.com/
Introduzione a Twitter Bootstrap
Comperio, 17/10/13

Detto tra noi....

HTML5
●

più elementi = migliore semantica

●

attributi personalizzati

●

Niente chiusura per gli elementi vuoti:
NO <img src=””/>
SÌ <img src=””>

CSS3
Bordi arrotondati, sfondi multipli, ombreggiature, animazioni, e chi più ne
ha più ne metta....http://lmgtfy.com/?q=css3+examples
Ma soprattutto: Media Queries
Introduzione a Twitter Bootstrap
Comperio srl, 17/10/13

Molti di questi framework condividono alcuni punti chiave:
●

●

HTML5 e CSS3, ovvero supporto per browser moderni (sì IE resta un
problema)

SCSS o LESS, ovvero un pre-processore
per i fogli di stile

●

Layout a griglia e mobile-first

●

Stile globale degli elementi HTML

●

Componenti CSS “ready-to-use” per varie situazioni

●

jQuery come libreria javascript

●

Componenti Javascript attivabili grazie al semplice uso dell'attibuto
data
Introduzione a Twitter Bootstrap
Comperio, 17/10/13

Pre-processare il foglio di stile significa poter usare:
●

Variabili

●

Nesting

●

Mixins

●

Operatori

●

Funzioni

Comunque, mai paura....è sempre CSS...
Introduzione a Twitter Bootstrap
Comperio, 17/10/13

{Less} : http://lesscss.org/
Basato su Node.js – molto diffuso e adottato
VS
Sass : http://sass-lang.com/guide
Basato su Ruby – ecosistema Compass
Introduzione a Twitter Bootstrap
Comperio srl, 17/10/13

Molti di questi framework condividono alcuni punti chiave:
●

HTML5 e CSS3, ovvero supporto per browser moderni (sì IE
resta un problema)

●

SCSS o LESS, ovvero un pre-processore per i fogli di stile

●

Layout a griglia e mobile-first

●

Stile globale degli elementi HTML

●

Componenti CSS “ready-to-use” per varie situazioni

●

jQuery come libreria javascript

●

Componenti Javascript attivabili grazie al semplice uso
dell'attibuto data
Introduzione a Twitter Bootstrap
Comperio, 17/10/13
Introduzione a Twitter Bootstrap
Comperio, 17/10/13

La griglia di Bootstrap ha 12 colonne e diverse utility
class a seconda del viewport
http://getbootstrap.com/css/#grid
Introduzione a Twitter Bootstrap
Comperio, 17/10/13

Responsive Webdesign
●

Cos'è http://alistapart.com/article/responsive-web-design

●

Esempi http://zurb.com/responsive

Mobile-first = Content-first
●

Il contenuto è la parte della pagina che ha più valore

●

Ordinare il codice sorgente in base al contenuto

●

Progressive enhancement vs graceful degradation
Introduzione a Twitter Bootstrap
Comperio srl, 17/10/13

Molti di questi framework condividono alcuni punti chiave:
●

HTML5 e CSS3, ovvero supporto per browser moderni (sì IE
resta un problema)

●

SCSS o LESS, ovvero un pre-processore per i fogli di stile

●

Layout a griglia e mobile-first

●

Stile globale degli elementi HTML

●

Componenti CSS “ready-to-use” per varie situazioni

●

jQuery come libreria javascript

●

Componenti Javascript attivabili grazie al semplice uso
dell'attibuto data
Introduzione a Twitter Bootstrap
Comperio, 17/10/13

Bootstrap stila in maniera predefinita molti elementi di
base:
●

Typography

●

Tables

●

Forms

●

Buttons

●

Utility classes
Introduzione a Twitter Bootstrap
Comperio srl, 17/10/13

Molti di questi framework condividono alcuni punti chiave:
●

HTML5 e CSS3, ovvero supporto per browser moderni (sì IE resta un
problema)

●

SCSS o LESS, ovvero un pre-processore per i fogli di stile

●

Layout a griglia e mobile-first

●

Stile globale degli elementi HTML

●

●

●

Componenti CSS “ready-to-use” per varie
situazioni
jQuery come libreria javascript
Componenti Javascript attivabili grazie al semplice uso dell'attibuto
data
Introduzione a Twitter Bootstrap
Comperio, 17/10/13

Sono tantissimi:
http://getbootstrap.com/components/
Ad esempio:
●

Icone: un'occhiata a Font Awesome

●

Pulsanti di navigazione

●

Gruppi di bottoni e dropdown

●

Media object, list group e panels
Introduzione a Twitter Bootstrap
Comperio, 17/10/13

Attenzione all'ecosistema Bootstrap!
Esistono tantissimi plugin e componenti esterni,
indipendenti da BS ma che lo usano come tema di
base.
Es:
Select2: http://ivaynberg.github.io/select2/
DataTables: http://datatables.net/blog/Twitter_Bootstrap

Ecc. ecc. ecc.
http://www.bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources
Introduzione a Twitter Bootstrap
Comperio srl, 17/10/13

Molti di questi framework condividono alcuni punti chiave:
●

HTML5 e CSS3, ovvero supporto per browser moderni (sì IE resta un
problema)

●

SCSS o LESS, ovvero un pre-processore per i fogli di stile

●

Layout a griglia e mobile-first

●

Stile globale degli elementi HTML

●

Componenti CSS “ready-to-use” per varie situazioni

●

jQuery come libreria javascript

●

Componenti Javascript attivabili grazie al
semplice uso dell'attibuto data
Introduzione a Twitter Bootstrap
Comperio, 17/10/13

Significa avere una API che osserva l'uso degli attributi data- e permette
di attivare i componenti senza scrivere una sola riga di javascript

●

Dropdown

●

Modali

●

Tooltips e popover

●

Collapse

●

Carousel

●

Ecc. ecc. ecc.

Posso solo farveli vedere in azione
http://getbootstrap.com/javascript/
Introduzione a Twitter Bootstrap
Comperio, 17/10/13

Raccomandazioni:
●

Perchè il vostro sito non sembri fatto con Bootstrap
aggiungete il vostro stile. Customizzare BS è facile. Ci
sono anche dei temi già fatti. E se non mi credete,
guardate qui.

●

Ricordate che ci sono molti template già fatti

●

È solo un framework per il front-end
Introduzione a Twitter Bootstrap
Comperio, 17/10/13

E ora 'ndemo casa...

Mais conteúdo relacionado

Destaque

DDAY2014 - Costruire una app mobile con Ionic, AngularJS ed ovviamente Drupal
DDAY2014 - Costruire una app mobile con Ionic, AngularJS ed ovviamente DrupalDDAY2014 - Costruire una app mobile con Ionic, AngularJS ed ovviamente Drupal
DDAY2014 - Costruire una app mobile con Ionic, AngularJS ed ovviamente DrupalDrupalDay
 
Laboratorio di Web Design Base - 2014/15 - HTML/5
Laboratorio di Web Design Base - 2014/15 - HTML/5Laboratorio di Web Design Base - 2014/15 - HTML/5
Laboratorio di Web Design Base - 2014/15 - HTML/5Giovanni Buffa
 
Arduino & Smartphone
Arduino & SmartphoneArduino & Smartphone
Arduino & Smartphonedega1999
 
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 webMassimo Bonanni
 

Destaque (6)

DDAY2014 - Costruire una app mobile con Ionic, AngularJS ed ovviamente Drupal
DDAY2014 - Costruire una app mobile con Ionic, AngularJS ed ovviamente DrupalDDAY2014 - Costruire una app mobile con Ionic, AngularJS ed ovviamente Drupal
DDAY2014 - Costruire una app mobile con Ionic, AngularJS ed ovviamente Drupal
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Laboratorio di Web Design Base - 2014/15 - HTML/5
Laboratorio di Web Design Base - 2014/15 - HTML/5Laboratorio di Web Design Base - 2014/15 - HTML/5
Laboratorio di Web Design Base - 2014/15 - HTML/5
 
Arduino & Smartphone
Arduino & SmartphoneArduino & Smartphone
Arduino & Smartphone
 
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
 
Bootstrap [part 1]
Bootstrap [part 1]Bootstrap [part 1]
Bootstrap [part 1]
 

Semelhante a Introduzione a Twitter Bootstrap

Semelhante a Introduzione a Twitter Bootstrap (20)

Bootstrap
BootstrapBootstrap
Bootstrap
 
Framework di sviluppo web: introduzione a bootstrap e boostack
Framework di sviluppo web: introduzione a bootstrap e boostackFramework di sviluppo web: introduzione a bootstrap e boostack
Framework di sviluppo web: introduzione a bootstrap e boostack
 
Lamp Ld2008
Lamp Ld2008Lamp Ld2008
Lamp Ld2008
 
Introduzione a Drupal 7 - 14/03/2013
Introduzione a Drupal 7 - 14/03/2013Introduzione a Drupal 7 - 14/03/2013
Introduzione a Drupal 7 - 14/03/2013
 
Html5
Html5Html5
Html5
 
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?
 
Grasso Frameworks Ajax
Grasso Frameworks AjaxGrasso Frameworks Ajax
Grasso Frameworks Ajax
 
Initializr - come iniziare
Initializr - come iniziareInitializr - come iniziare
Initializr - come iniziare
 
Html5
Html5Html5
Html5
 
GWT vs CSS3
GWT vs CSS3GWT vs CSS3
GWT vs CSS3
 
Mobile UI Design
Mobile UI DesignMobile UI Design
Mobile UI Design
 
Novità in Visual Studio 2012
Novità in Visual Studio 2012Novità in Visual Studio 2012
Novità in Visual Studio 2012
 
Exploring VS Code
Exploring VS CodeExploring VS Code
Exploring VS Code
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Best Practices on SQL Server
Best Practices on SQL ServerBest Practices on SQL Server
Best Practices on SQL Server
 
Corso HTML per l'editoria
Corso HTML per l'editoriaCorso HTML per l'editoria
Corso HTML per l'editoria
 
Liferay - Quick Start 1° Episodio
Liferay - Quick Start 1° EpisodioLiferay - Quick Start 1° Episodio
Liferay - Quick Start 1° Episodio
 
Jquery mobile per App
Jquery mobile per AppJquery mobile per App
Jquery mobile per App
 
Struts - Overview, Installazione e Setup
Struts - Overview, Installazione e SetupStruts - Overview, Installazione e Setup
Struts - Overview, Installazione e Setup
 
Introduzione a JavaScript e jQuery (1/2)
Introduzione a JavaScript e jQuery (1/2)Introduzione a JavaScript e jQuery (1/2)
Introduzione a JavaScript e jQuery (1/2)
 

Introduzione a Twitter Bootstrap

  • 2. Introduzione a Twitter Bootstrap Comperio srl, 17/10/13 Esistono molti framework per la creazione di frontend http://usablica.github.io/front-end-frameworks/compare.html
  • 3. Introduzione a Twitter Bootstrap Comperio srl, 17/10/13 Molti di questi framework condividono alcuni punti chiave: ● HTML5 e CSS3, ovvero supporto per browser moderni (sì IE resta un problema) ● SCSS o LESS, ovvero un pre-processore per i fogli di stile ● Layout a griglia e mobile-first ● Stile globale degli elementi HTML ● Componenti CSS “ready-to-use” per varie situazioni ● jQuery come libreria javascript ● Componenti Javascript attivabili grazie al semplice uso dell'attibuto data
  • 4. Introduzione a Twitter Bootstrap Comperio srl, 17/10/13 Molti di questi framework condividono alcuni punti chiave: ● HTML5 e CSS3, ovvero supporto per browser moderni (sì IE resta un problema) ● SCSS o LESS, ovvero un pre-processore per i fogli di stile ● Layout a griglia e mobile-first ● Stile globale degli elementi HTML ● Componenti CSS “ready-to-use” per varie situazioni ● jQuery come libreria javascript ● Componenti Javascript attivabili grazie al semplice uso dell'attibuto data
  • 5. Introduzione a Twitter Bootstrap Comperio, 17/10/13
  • 6. Introduzione a Twitter Bootstrap Comperio, 17/10/13 <!DOCTYPE html> HTML5 shim and Respond.js = avere a che fare con Internet Explorer -webkit, -moz, -o = vendor prefix Ok, ma cosa vuol dire HTML5 e CSS3? Eccovi un po' di risorse utili: ● Una simpatica introduzione a HTML5: http://diveintohtml5.info/ (ce l'ho in italiano, su carta, se volete ve lo presto) ● HTML5 doctor ● CSS-Tricks E per qualsiasi dubbio: http://caniuse.com/
  • 7. Introduzione a Twitter Bootstrap Comperio, 17/10/13 Detto tra noi.... HTML5 ● più elementi = migliore semantica ● attributi personalizzati ● Niente chiusura per gli elementi vuoti: NO <img src=””/> SÌ <img src=””> CSS3 Bordi arrotondati, sfondi multipli, ombreggiature, animazioni, e chi più ne ha più ne metta....http://lmgtfy.com/?q=css3+examples Ma soprattutto: Media Queries
  • 8. Introduzione a Twitter Bootstrap Comperio srl, 17/10/13 Molti di questi framework condividono alcuni punti chiave: ● ● HTML5 e CSS3, ovvero supporto per browser moderni (sì IE resta un problema) SCSS o LESS, ovvero un pre-processore per i fogli di stile ● Layout a griglia e mobile-first ● Stile globale degli elementi HTML ● Componenti CSS “ready-to-use” per varie situazioni ● jQuery come libreria javascript ● Componenti Javascript attivabili grazie al semplice uso dell'attibuto data
  • 9. Introduzione a Twitter Bootstrap Comperio, 17/10/13 Pre-processare il foglio di stile significa poter usare: ● Variabili ● Nesting ● Mixins ● Operatori ● Funzioni Comunque, mai paura....è sempre CSS...
  • 10. Introduzione a Twitter Bootstrap Comperio, 17/10/13 {Less} : http://lesscss.org/ Basato su Node.js – molto diffuso e adottato VS Sass : http://sass-lang.com/guide Basato su Ruby – ecosistema Compass
  • 11. Introduzione a Twitter Bootstrap Comperio srl, 17/10/13 Molti di questi framework condividono alcuni punti chiave: ● HTML5 e CSS3, ovvero supporto per browser moderni (sì IE resta un problema) ● SCSS o LESS, ovvero un pre-processore per i fogli di stile ● Layout a griglia e mobile-first ● Stile globale degli elementi HTML ● Componenti CSS “ready-to-use” per varie situazioni ● jQuery come libreria javascript ● Componenti Javascript attivabili grazie al semplice uso dell'attibuto data
  • 12. Introduzione a Twitter Bootstrap Comperio, 17/10/13
  • 13. Introduzione a Twitter Bootstrap Comperio, 17/10/13 La griglia di Bootstrap ha 12 colonne e diverse utility class a seconda del viewport http://getbootstrap.com/css/#grid
  • 14. Introduzione a Twitter Bootstrap Comperio, 17/10/13 Responsive Webdesign ● Cos'è http://alistapart.com/article/responsive-web-design ● Esempi http://zurb.com/responsive Mobile-first = Content-first ● Il contenuto è la parte della pagina che ha più valore ● Ordinare il codice sorgente in base al contenuto ● Progressive enhancement vs graceful degradation
  • 15. Introduzione a Twitter Bootstrap Comperio srl, 17/10/13 Molti di questi framework condividono alcuni punti chiave: ● HTML5 e CSS3, ovvero supporto per browser moderni (sì IE resta un problema) ● SCSS o LESS, ovvero un pre-processore per i fogli di stile ● Layout a griglia e mobile-first ● Stile globale degli elementi HTML ● Componenti CSS “ready-to-use” per varie situazioni ● jQuery come libreria javascript ● Componenti Javascript attivabili grazie al semplice uso dell'attibuto data
  • 16. Introduzione a Twitter Bootstrap Comperio, 17/10/13 Bootstrap stila in maniera predefinita molti elementi di base: ● Typography ● Tables ● Forms ● Buttons ● Utility classes
  • 17. Introduzione a Twitter Bootstrap Comperio srl, 17/10/13 Molti di questi framework condividono alcuni punti chiave: ● HTML5 e CSS3, ovvero supporto per browser moderni (sì IE resta un problema) ● SCSS o LESS, ovvero un pre-processore per i fogli di stile ● Layout a griglia e mobile-first ● Stile globale degli elementi HTML ● ● ● Componenti CSS “ready-to-use” per varie situazioni jQuery come libreria javascript Componenti Javascript attivabili grazie al semplice uso dell'attibuto data
  • 18. Introduzione a Twitter Bootstrap Comperio, 17/10/13 Sono tantissimi: http://getbootstrap.com/components/ Ad esempio: ● Icone: un'occhiata a Font Awesome ● Pulsanti di navigazione ● Gruppi di bottoni e dropdown ● Media object, list group e panels
  • 19. Introduzione a Twitter Bootstrap Comperio, 17/10/13 Attenzione all'ecosistema Bootstrap! Esistono tantissimi plugin e componenti esterni, indipendenti da BS ma che lo usano come tema di base. Es: Select2: http://ivaynberg.github.io/select2/ DataTables: http://datatables.net/blog/Twitter_Bootstrap Ecc. ecc. ecc. http://www.bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources
  • 20. Introduzione a Twitter Bootstrap Comperio srl, 17/10/13 Molti di questi framework condividono alcuni punti chiave: ● HTML5 e CSS3, ovvero supporto per browser moderni (sì IE resta un problema) ● SCSS o LESS, ovvero un pre-processore per i fogli di stile ● Layout a griglia e mobile-first ● Stile globale degli elementi HTML ● Componenti CSS “ready-to-use” per varie situazioni ● jQuery come libreria javascript ● Componenti Javascript attivabili grazie al semplice uso dell'attibuto data
  • 21. Introduzione a Twitter Bootstrap Comperio, 17/10/13 Significa avere una API che osserva l'uso degli attributi data- e permette di attivare i componenti senza scrivere una sola riga di javascript ● Dropdown ● Modali ● Tooltips e popover ● Collapse ● Carousel ● Ecc. ecc. ecc. Posso solo farveli vedere in azione http://getbootstrap.com/javascript/
  • 22. Introduzione a Twitter Bootstrap Comperio, 17/10/13 Raccomandazioni: ● Perchè il vostro sito non sembri fatto con Bootstrap aggiungete il vostro stile. Customizzare BS è facile. Ci sono anche dei temi già fatti. E se non mi credete, guardate qui. ● Ricordate che ci sono molti template già fatti ● È solo un framework per il front-end
  • 23. Introduzione a Twitter Bootstrap Comperio, 17/10/13 E ora 'ndemo casa...