Framework di sviluppo web: introduzione a bootstrap e boostack

1. Bootstrap
Framework di sviluppo web:
Introduzione a
Bootstrap e Boostack
di Spagnolo Stefano
Università degli Studi di Torino
Facoltà di Scienze Matematiche Fisiche Naturali
Dipartimento di Informatica
Boostack

2. Bootstrap
Cos’è Bootstrap ?
Il più popolare Framework frontend per lo sviluppo di
progetti web responsive.

3. Bootstrap
La parte grafica di un sito veniva sviluppata caricandolo di tutti i
contenuti e gli elementi grafici senza considerare le dimensioni degli
schermi (Sviluppo desktop-first), contando sulle prestazioni e sulla
velocità di connessione proprie dei dispositivi desktop.
Lo sviluppo client-side prevedeva la definizione di:
• una serie di regole CSS custom per ogni singolo elemento grafico
• una serie di metodi Javascript custom per associare un
comportamento di ogni elemento grafico
Per garantire una visualizzazione omogenea nei i diversi browser era
necessario adattare i layout, le regole CSS e Javascript per eliminare le
incongruenze tra i diversi browser generando elevati oneri di
manutenzione.
Prima di Bootstrap ?

4. Bootstrap
L’avvento delle seguenti tecnologie hanno creato i presupposti per la
nascita di Bootstrap:
Presupposti tecnologici
• jQuery: libreria Javascript che semplifica la
selezione, la manipolazione, la gestione degli
eventi e l'animazione di elementi DOM in pagine
HTML.
• HTML 5: struttura più rigorosa e completa, nuovi
tag semantici, attributi personalizzati, ecc.
• CSS 3: media queries, nuovi selettori, bordi
arrotondati, ombreggiature, trasparenze,
animazioni, ecc.

5. Bootstrap
Bootstrap è stato sviluppato da Mark Otto e Jacob Thornton in Twitter
come un framework in grado di uniformare i vari componenti che
realizzavano l'interfaccia web.
Nell'agosto 2011 Twitter ha rilasciato la prima versione di Bootstrap
come open source. La versione attuale stabile (e più popolare) è la
3.3.7, ma il rilascio della versione 4 è alle porte (attualmente in fase
beta).
• Progetto più popolare su GitHub
• Notevole supporto della community di sviluppatori
• Molteplici template gratuiti e a pagamento
• Considerato come uno standard per template html responsive
Nel 2011 nasce Bootstrap

6. Bootstrap
• Accelera lo sviluppo delle applicazioni web
• Mobile-first e Native Responsive web design
• Compatibilità cross browser
• Grid System
• Media queries
• Componenti Css
• Plugin Javascript
• Font iconico vettoriale integrato
• Estensibilità
• Documentazione ufficiale molto chiara
Perché Bootstrap ?

7. Bootstrap
Mobile-first e Responsive Design
Si parte dalla strutturazione dei contenuti per gli schermi dei dispositivi
mobili (con dimensione limitata) per concentrarsi al meglio sui contenuti
essenziali e imprescindibili per il sito in questione. Successivamente si
arricchisce il tutto per i dispositivi con display via via più grande.

8. Bootstrap
Compatibilità browser

9. Bootstrap
Grid System
xs meno di 768px
sm tra 768px e 992px
md tra 992px e 1200px
lg maggiore di1200px
La griglia di Bootstrap è predisposta per la creazione di layout fluidi e
si basa su 12 colonne. La larghezza delle colonne è espressa in
percentuale. Il meccanismo di calcolo è intuitivo: se 12 colonne
equivalgono al 100% dello spazio disponibile nella riga, 6
corrispondono al 50%, 3 al 25%, 1 all’8.333% e così via.
.col-sm-1 { width: 8.333333333333332%; }
.col-sm-2 { width: 16.666666666666664%; }
.col-sm-3 { width: 25%; }
.col-sm-4 { width: 33.33333333333333%; }
.col-sm-5 { width: 41.66666666666667%; }
.col-sm-6 { width: 50%; }
.col-sm-7 { width: 58.333333333333336%; }
.col-sm-8 { width: 66.66666666666666%; }
.col-sm-9 { width: 75%; }
.col-sm-10 { width: 83.33333333333334%; }
.col-sm-11 { width: 91.66666666666666%; }
.col-sm-12 { width: 100%; }

10. Bootstrap
Grid System

11. Bootstrap
Le media query sono delle regole applicabili agli stili CSS che
definiscono il comportamento del sito e il rendering dei contenuti in
base alle caratteristiche e al tipo di dispositivo: desktop, smartphone,
tablet, monitor.
Media Queries
/* Primo breakpoint: Schermi fino a 767px */
/* Nessuna media query */
/* Secondo breakpoint: Schermi larghi da 768px in su */
@media (min-width: 768px) { ... }
/* Terzo breakpoint: Schermi larghi da 992px in su */
@media (min-width: 992px) { ... }
/* Quarto brekpoint: Schermi larghi da 1200px in su */
@media (min-width: 1200px) { ... }

12. Bootstrap
Media Queries

13. Bootstrap
Bootstrap mette a disposizione una serie di componenti e librerie
“Ready to use”.
• Css: icone, menu, dropdown, barre di navigazione, bottoni, tab, box,
forms, tabelle, immagini, ecc.
• Testi: titoli, paragrafi, liste, gestione delle dimensioni, formattazione,
etichette badge, ecc.
• Javascript: tooltip, modal, carousel, popover, dropdown, ecc.
Componenti Html, Css e Javascript

14. Bootstrap
Componenti Html, Css e Javascript

15. Bootstrap
Come si usa Bootstrap ?
Usare un framework come Bootstrap comporta essenzialmente la definizione
di specifici componenti nel codice HTML attraverso
• la corretta strutturazione del markup
• l’associazione di classi e stili CSS agli elementi HTML
Scaricare il pacchetto, includerlo nel progetto e utilizzare la
documentazione ufficiale:
http://getbootstrap.com
Il pacchetto comprende le versioni compilate (anche compresse) dei file CSS e
Javascript del framework, oltre ai diversi formati di font delle icone Glyphicons.

16. Bootstrap
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Un template di base

17. Bootstrap
Altre Risorse
Esistono molti marketplace di riferimento per il download di template
Bootstrap gratuiti o a pagamento. I più importanti sono:
• http://themeforest.net
• http://startbootstrap.com
• https://wrapbootstrap.com

18. Bootstrap
Cos’è Boostack ?
E’ un Framework di sviluppo backend
per la creazione di soluzioni web-based.
Boostack

19. Bootstrap
• Fast and Productive: built for developers
• Freedom: No naming conventions, use your own coding and naming
• Extensible: Extend all php classes and build quickly simple or complex
web-based apps
• Simplicity: lightweight and flexible with a robust set of features for web
and mobile applications
• Secure: it runs on secure and fast-loading code for optimal performance.
• SEO Ready: meta data, rich snippets, openGraph, internal linking,
schema markup, social media and more.
Perché Boostack ?
Boostack

20. Bootstrap
Object-Relational Mapping (ORM):
tecnica di programmazione che
favorisce l'integrazione di sistemi
software aderenti al paradigma della
programmazione orientata agli oggetti
con sistemi RDBMS.
• BaseClass.Class.php
• BaseList.Class.php
ORM
Boostack

21. Bootstrap
MVC
Boostack
Il Model-View-Controller (MVC) un pattern architetturale in grado di separare la
logica di presentazione dei dati dalla logica di business.
• Model -> BaseClass e BaseList
• View -> Template Render (viste componibili)
• Controller -> logica applicativa e coordinamento tra Model e View
• Organizzazione coerente di file e cartelle

22. Bootstrap
Componenti
Boostack
• Database
• Log
• Utenti
• Sessioni e cookie
• Api REST
• Upload di file e immagini
• Gestione di GET e POST
• Csv reader/writer
• Multilingua
• Validator
• SFTP
• Templating

23. BootstrapBoostack
Filesystem
• Model
• View
• Controller

24. BootstrapBoostack
Filesystem

25. BootstrapBoostack
Filesystem

26. BootstrapBoostack
Filesystem

27. Bootstrap
Come si usa Boostack ?
Usare un framework come Boostack comporta essenzialmente l’integrazione
del pacchetto base e la personalizzazione ed estensione dello stesso per la
creazione di tutte le funzionalità desiderate.
Scaricare il pacchetto o clonarlo da GitHub, integrarlo nel
progetto e utilizzare la documentazione ufficiale:
https://www.boostack.com
Il pacchetto comprende le versioni stabili di JQuery, Animate.css e Bootstrap.
Boostack

28. Bootstrap
Grazie
Boostack