1. Introduzione a Twitter BootstrapComperio srl, 17/10/13

2. Introduzione a Twitter Bootstrap Comperio srl, 17/10/13Esistono molti framework per la creazione di frontendhttp://usablica.github.io/front-end-frameworks/compare.html 3. Introduzione a Twitter Bootstrap Comperio srl, 17/10/13Molti 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 stileLayout a griglia e mobile-firstStile globale degli elementi HTMLComponenti CSS ready-to-use per varie situazionijQuery come libreria javascriptComponenti Javascript attivabili grazie al semplice uso dell'attibuto data 4. Introduzione a Twitter Bootstrap Comperio srl, 17/10/13Molti 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 stileLayout a griglia e mobile-firstStile globale degli elementi HTMLComponenti CSS ready-to-use per varie situazionijQuery come libreria javascriptComponenti 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/13HTML5 shim and Respond.js = avere a che fare con Internet Explorer -webkit, -moz, -o = vendor prefixOk, 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 doctorCSS-Tricks E per qualsiasi dubbio: http://caniuse.com/ 7. Introduzione a Twitter Bootstrap Comperio, 17/10/13Detto tra noi....HTML5 pi elementi = migliore semanticaattributi personalizzatiNiente chiusura per gli elementi vuoti: NO S 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/13Molti 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 stileLayout a griglia e mobile-firstStile globale degli elementi HTMLComponenti CSS ready-to-use per varie situazionijQuery come libreria javascriptComponenti Javascript attivabili grazie al semplice uso dell'attibuto data 9. Introduzione a Twitter Bootstrap Comperio, 17/10/13Pre-processare il foglio di stile significa poter usare: VariabiliNestingMixinsOperatoriFunzioniComunque, 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/13Molti 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 stileLayout a griglia e mobile-firstStile globale degli elementi HTMLComponenti CSS ready-to-use per varie situazionijQuery come libreria javascriptComponenti 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/13La 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/13Responsive Webdesign Cos' http://alistapart.com/article/responsive-web-designEsempi http://zurb.com/responsiveMobile-first = Content-first Il contenuto la parte della pagina che ha pi valoreOrdinare il codice sorgente in base al contenutoProgressive enhancement vs graceful degradation 15. Introduzione a Twitter Bootstrap Comperio srl, 17/10/13Molti 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 stileLayout a griglia e mobile-firstStile globale degli elementi HTMLComponenti CSS ready-to-use per varie situazionijQuery come libreria javascriptComponenti Javascript attivabili grazie al semplice uso dell'attibuto data 16. Introduzione a Twitter Bootstrap Comperio, 17/10/13Bootstrap stila in maniera predefinita molti elementi di base: TypographyTablesFormsButtonsUtility classes 17. Introduzione a Twitter Bootstrap Comperio srl, 17/10/13Molti 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 stileLayout a griglia e mobile-firstStile globale degli elementi HTMLComponenti 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/13Sono tantissimi: http://getbootstrap.com/components/ Ad esempio: Icone: un'occhiata a Font AwesomePulsanti di navigazioneGruppi di bottoni e dropdownMedia object, list group e panels 19. Introduzione a Twitter Bootstrap Comperio, 17/10/13Attenzione 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_BootstrapEcc. ecc. ecc. http://www.bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources 20. Introduzione a Twitter Bootstrap Comperio srl, 17/10/13Molti 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 stileLayout a griglia e mobile-firstStile globale degli elementi HTMLComponenti CSS ready-to-use per varie situazionijQuery come libreria javascriptComponenti Javascript attivabili grazie al semplice uso dell'attibuto data 21. Introduzione a Twitter Bootstrap Comperio, 17/10/13Significa avere una API che osserva l'uso degli attributi data- e permette di attivare i componenti senza scrivere una sola riga di javascriptDropdownModaliTooltips e popoverCollapseCarouselEcc. ecc. ecc.Posso solo farveli vedere in azione http://getbootstrap.com/javascript/ 22. Introduzione a Twitter Bootstrap Comperio, 17/10/13Raccomandazioni: 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/13E ora 'ndemo casa...