![Page 1: Prototyping a Social Network - polito.it · 2017-04-06 · Getting started with Pizza++ and Bootstrap 4/6/2017 Prototyping a Social Network 20. Exercise •Starting from the project](https://reader034.vdocuments.mx/reader034/viewer/2022050503/5f95275d0a83e27bc8736663/html5/thumbnails/1.jpg)
Prototyping a Social NetworkGETTING STARTED…
![Page 2: Prototyping a Social Network - polito.it · 2017-04-06 · Getting started with Pizza++ and Bootstrap 4/6/2017 Prototyping a Social Network 20. Exercise •Starting from the project](https://reader034.vdocuments.mx/reader034/viewer/2022050503/5f95275d0a83e27bc8736663/html5/thumbnails/2.jpg)
Introducing an example: ... Pizza++
Prototyping a Social Network4/6/2017 2
![Page 3: Prototyping a Social Network - polito.it · 2017-04-06 · Getting started with Pizza++ and Bootstrap 4/6/2017 Prototyping a Social Network 20. Exercise •Starting from the project](https://reader034.vdocuments.mx/reader034/viewer/2022050503/5f95275d0a83e27bc8736663/html5/thumbnails/3.jpg)
Pizza++
Prototyping a Social Network4/6/2017 3
![Page 4: Prototyping a Social Network - polito.it · 2017-04-06 · Getting started with Pizza++ and Bootstrap 4/6/2017 Prototyping a Social Network 20. Exercise •Starting from the project](https://reader034.vdocuments.mx/reader034/viewer/2022050503/5f95275d0a83e27bc8736663/html5/thumbnails/4.jpg)
Pizza++
It seems an app but… it is fake!
It is a Web application that seems a “mobile app”
– HTML + CSS +JS, only
– Backend as a Service for some “social” features
Prototyping a Social Network4/6/2017 4
![Page 5: Prototyping a Social Network - polito.it · 2017-04-06 · Getting started with Pizza++ and Bootstrap 4/6/2017 Prototyping a Social Network 20. Exercise •Starting from the project](https://reader034.vdocuments.mx/reader034/viewer/2022050503/5f95275d0a83e27bc8736663/html5/thumbnails/5.jpg)
Pizza++ Feature Set
• Find top pizzas to eat near me
• Post pizzas
• Rate pizzas
• Review (comment) pizzas
• Discuss about pizzas with my friends
Prototyping a Social Network4/6/2017 5
![Page 6: Prototyping a Social Network - polito.it · 2017-04-06 · Getting started with Pizza++ and Bootstrap 4/6/2017 Prototyping a Social Network 20. Exercise •Starting from the project](https://reader034.vdocuments.mx/reader034/viewer/2022050503/5f95275d0a83e27bc8736663/html5/thumbnails/6.jpg)
Pizza++ Feature Set
• Find top pizzas to eat near me
• Post pizzas
• Rate pizzas
• Review (comment) pizzas
• Discuss about pizzas with my friends
Prototyping a Social Network
Phase I
4/6/2017 6
![Page 7: Prototyping a Social Network - polito.it · 2017-04-06 · Getting started with Pizza++ and Bootstrap 4/6/2017 Prototyping a Social Network 20. Exercise •Starting from the project](https://reader034.vdocuments.mx/reader034/viewer/2022050503/5f95275d0a83e27bc8736663/html5/thumbnails/7.jpg)
Pizza++
• We will built it together!
• Ingredients for frontend– HTML5
– CSS3, with the help of the Bootstrap framework (http://getbootstrap.com)
– JS, with the AngularJS framework (http://angularjs.org/)
• Ingredients for backend– None
– We will rely on Firebase (https://firebase.google.com/)
Prototyping a Social Network4/6/2017 7
![Page 8: Prototyping a Social Network - polito.it · 2017-04-06 · Getting started with Pizza++ and Bootstrap 4/6/2017 Prototyping a Social Network 20. Exercise •Starting from the project](https://reader034.vdocuments.mx/reader034/viewer/2022050503/5f95275d0a83e27bc8736663/html5/thumbnails/8.jpg)
THE BOOTSTRAP FRAMEWORK
Style and Layout in the Web
Prototyping a Social Network4/6/2017 8
![Page 9: Prototyping a Social Network - polito.it · 2017-04-06 · Getting started with Pizza++ and Bootstrap 4/6/2017 Prototyping a Social Network 20. Exercise •Starting from the project](https://reader034.vdocuments.mx/reader034/viewer/2022050503/5f95275d0a83e27bc8736663/html5/thumbnails/9.jpg)
Bootstrap
• Open Source CSS (and Javascript) framework
• Allows applying “modern” styles
– Sensible and nice-looking defaults
– Easy to apply custom themes
• Takes care of cross-browser issues
• Simplified layout model
Prototyping a Social Network4/6/2017 9
![Page 10: Prototyping a Social Network - polito.it · 2017-04-06 · Getting started with Pizza++ and Bootstrap 4/6/2017 Prototyping a Social Network 20. Exercise •Starting from the project](https://reader034.vdocuments.mx/reader034/viewer/2022050503/5f95275d0a83e27bc8736663/html5/thumbnails/10.jpg)
Bootstrap examples
Prototyping a Social Network4/6/2017 10
![Page 11: Prototyping a Social Network - polito.it · 2017-04-06 · Getting started with Pizza++ and Bootstrap 4/6/2017 Prototyping a Social Network 20. Exercise •Starting from the project](https://reader034.vdocuments.mx/reader034/viewer/2022050503/5f95275d0a83e27bc8736663/html5/thumbnails/11.jpg)
Bootstrap philosophy
• Based on CSS classes
• Each class applies one “effect”
• Various classes may be combined in the same
element
Prototyping a Social Network4/6/2017 11
<span class="label label-success">Success</span>
![Page 12: Prototyping a Social Network - polito.it · 2017-04-06 · Getting started with Pizza++ and Bootstrap 4/6/2017 Prototyping a Social Network 20. Exercise •Starting from the project](https://reader034.vdocuments.mx/reader034/viewer/2022050503/5f95275d0a83e27bc8736663/html5/thumbnails/12.jpg)
Bootstrap philosophy
• Wide range of “standard” classes
• Wide range of additional “components”
– Ready-to use interactive elements or groups of elements
• Mobile-first
– Responsive
Prototyping a Social Network4/6/2017 12
![Page 13: Prototyping a Social Network - polito.it · 2017-04-06 · Getting started with Pizza++ and Bootstrap 4/6/2017 Prototyping a Social Network 20. Exercise •Starting from the project](https://reader034.vdocuments.mx/reader034/viewer/2022050503/5f95275d0a83e27bc8736663/html5/thumbnails/13.jpg)
Using Bootstrap
• 3 files– Bootstrap– Theme (optional for gradient/animation)– Javascript support
• Or download locally
Prototyping a Social Network4/6/2017 13
Example
without or with theme
![Page 14: Prototyping a Social Network - polito.it · 2017-04-06 · Getting started with Pizza++ and Bootstrap 4/6/2017 Prototyping a Social Network 20. Exercise •Starting from the project](https://reader034.vdocuments.mx/reader034/viewer/2022050503/5f95275d0a83e27bc8736663/html5/thumbnails/14.jpg)
Page structure
• Start with Basic template
– http://getbootstrap.com/getting-started/#template
• Or, choose from published Examples
– http://getbootstrap.com/getting-started/#examples
• Remember to include your page content in a
<div class=“container”>
Prototyping a Social Network4/6/2017 14
![Page 15: Prototyping a Social Network - polito.it · 2017-04-06 · Getting started with Pizza++ and Bootstrap 4/6/2017 Prototyping a Social Network 20. Exercise •Starting from the project](https://reader034.vdocuments.mx/reader034/viewer/2022050503/5f95275d0a83e27bc8736663/html5/thumbnails/15.jpg)
Buttons & Menus
Prototyping a Social Network4/6/2017 15
![Page 16: Prototyping a Social Network - polito.it · 2017-04-06 · Getting started with Pizza++ and Bootstrap 4/6/2017 Prototyping a Social Network 20. Exercise •Starting from the project](https://reader034.vdocuments.mx/reader034/viewer/2022050503/5f95275d0a83e27bc8736663/html5/thumbnails/16.jpg)
Tables
Prototyping a Social Network4/6/2017 16
![Page 17: Prototyping a Social Network - polito.it · 2017-04-06 · Getting started with Pizza++ and Bootstrap 4/6/2017 Prototyping a Social Network 20. Exercise •Starting from the project](https://reader034.vdocuments.mx/reader034/viewer/2022050503/5f95275d0a83e27bc8736663/html5/thumbnails/17.jpg)
Navigation bars
Prototyping a Social Network4/6/2017 17
![Page 18: Prototyping a Social Network - polito.it · 2017-04-06 · Getting started with Pizza++ and Bootstrap 4/6/2017 Prototyping a Social Network 20. Exercise •Starting from the project](https://reader034.vdocuments.mx/reader034/viewer/2022050503/5f95275d0a83e27bc8736663/html5/thumbnails/18.jpg)
Grids & Columns
Prototyping a Social Network4/6/2017 18
![Page 19: Prototyping a Social Network - polito.it · 2017-04-06 · Getting started with Pizza++ and Bootstrap 4/6/2017 Prototyping a Social Network 20. Exercise •Starting from the project](https://reader034.vdocuments.mx/reader034/viewer/2022050503/5f95275d0a83e27bc8736663/html5/thumbnails/19.jpg)
More info, examples, help
• http://getbootstrap.com/getting-started/
• http://getbootstrap.com/css/
• http://getbootstrap.com/components/
• http://www.w3schools.com/bootstrap/default.a
sp
Prototyping a Social Network4/6/2017 19
![Page 20: Prototyping a Social Network - polito.it · 2017-04-06 · Getting started with Pizza++ and Bootstrap 4/6/2017 Prototyping a Social Network 20. Exercise •Starting from the project](https://reader034.vdocuments.mx/reader034/viewer/2022050503/5f95275d0a83e27bc8736663/html5/thumbnails/20.jpg)
EXERCISE
Getting started with Pizza++ and Bootstrap
Prototyping a Social Network4/6/2017 20
![Page 21: Prototyping a Social Network - polito.it · 2017-04-06 · Getting started with Pizza++ and Bootstrap 4/6/2017 Prototyping a Social Network 20. Exercise •Starting from the project](https://reader034.vdocuments.mx/reader034/viewer/2022050503/5f95275d0a83e27bc8736663/html5/thumbnails/21.jpg)
Exercise
• Starting from the project
available on the course website
– pizza-plain.zip
• Apply Bootstrap
– to obtain something like the image on the right
Prototyping a Social Network4/6/2017 21
Suggestion
Look at the following bootstrap classes:
– Grid system
– Media list component
– Navbar component
![Page 22: Prototyping a Social Network - polito.it · 2017-04-06 · Getting started with Pizza++ and Bootstrap 4/6/2017 Prototyping a Social Network 20. Exercise •Starting from the project](https://reader034.vdocuments.mx/reader034/viewer/2022050503/5f95275d0a83e27bc8736663/html5/thumbnails/22.jpg)
Questions?01QYAPD SOCIAL NETWORKING: TECHNOLOGIES
AND APPLICATIONS
My contact information:
Teodoro Montanaro ([email protected])
Thanks to Luigi De Russis ([email protected]), the
creator of this set of slides!
![Page 23: Prototyping a Social Network - polito.it · 2017-04-06 · Getting started with Pizza++ and Bootstrap 4/6/2017 Prototyping a Social Network 20. Exercise •Starting from the project](https://reader034.vdocuments.mx/reader034/viewer/2022050503/5f95275d0a83e27bc8736663/html5/thumbnails/23.jpg)
License
• This work is licensed under the Creative Commons “Attribution-NonCommercial-ShareAlike Unported (CC BY-NC-SA 3,0)” License.
• You are free:– to Share - to copy, distribute and transmit the work– to Remix - to adapt the work
• Under the following conditions:– Attribution - You must attribute the work in the manner specified by the
author or licensor (but not in any way that suggests that they endorse you or your use of the work).
– Noncommercial - You may not use this work for commercial purposes.– Share Alike - If you alter, transform, or build upon this work, you may
distribute the resulting work only under the same or similar license to this one.
• To view a copy of this license, visit http://creativecommons.org/license/by-nc-sa/3.0/
Prototyping a Social Network4/6/2017 23