Framework di sviluppo web: introduzione a bootstrap e boostack
0 likes224 views
Il documento fornisce un'introduzione a Bootstrap, il framework frontend più popolare per lo sviluppo di siti web responsive, evidenziando la sua evoluzione e importanza nel design mobile-first. Viene discussa la sua struttura, i componenti e le librerie disponibili, oltre a come utilizzarlo nel codice HTML. Infine, viene introdotto Boostack, un framework di sviluppo backend complementare, progettato per migliorare la produttività degli sviluppatori.
![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](https://image.slidesharecdn.com/frameworkdisviluppoweb-introduzioneabootstrapeboostack-171211234510/85/Framework-di-sviluppo-web-introduzione-a-bootstrap-e-boostack-16-320.jpg)
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.
- 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%; }
- 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) { ... }
- 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
- 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