prototyping a social networkelite.polito.it/files/courses/01qyapd/2016/social... · 4/14/2016...
TRANSCRIPT
![Page 1: Prototyping a Social Networkelite.polito.it/files/courses/01QYAPD/2016/social... · 4/14/2016 Prototyping a Social Network 3. Pizza++ Feature Set •Find top pizzas to eat near me](https://reader034.vdocuments.mx/reader034/viewer/2022050407/5f84c8658a75953df7113611/html5/thumbnails/1.jpg)
Prototyping a Social NetworkGETTING STARTED…
![Page 2: Prototyping a Social Networkelite.polito.it/files/courses/01QYAPD/2016/social... · 4/14/2016 Prototyping a Social Network 3. Pizza++ Feature Set •Find top pizzas to eat near me](https://reader034.vdocuments.mx/reader034/viewer/2022050407/5f84c8658a75953df7113611/html5/thumbnails/2.jpg)
Introducing... Pizza++
Prototyping a Social Network4/14/2016 2
![Page 3: Prototyping a Social Networkelite.polito.it/files/courses/01QYAPD/2016/social... · 4/14/2016 Prototyping a Social Network 3. Pizza++ Feature Set •Find top pizzas to eat near me](https://reader034.vdocuments.mx/reader034/viewer/2022050407/5f84c8658a75953df7113611/html5/thumbnails/3.jpg)
Pizza++
• Great but… it is fake!
• Web application that seems a “mobile app”
– HTML + CSS +JS, only
• Backend as a Service for some “social” features
Prototyping a Social Network4/14/2016 3
![Page 4: Prototyping a Social Networkelite.polito.it/files/courses/01QYAPD/2016/social... · 4/14/2016 Prototyping a Social Network 3. Pizza++ Feature Set •Find top pizzas to eat near me](https://reader034.vdocuments.mx/reader034/viewer/2022050407/5f84c8658a75953df7113611/html5/thumbnails/4.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/14/2016 4
![Page 5: Prototyping a Social Networkelite.polito.it/files/courses/01QYAPD/2016/social... · 4/14/2016 Prototyping a Social Network 3. Pizza++ Feature Set •Find top pizzas to eat near me](https://reader034.vdocuments.mx/reader034/viewer/2022050407/5f84c8658a75953df7113611/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 Network
Phase I
4/14/2016 5
![Page 6: Prototyping a Social Networkelite.polito.it/files/courses/01QYAPD/2016/social... · 4/14/2016 Prototyping a Social Network 3. Pizza++ Feature Set •Find top pizzas to eat near me](https://reader034.vdocuments.mx/reader034/viewer/2022050407/5f84c8658a75953df7113611/html5/thumbnails/6.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 (http://firebase.com)
Prototyping a Social Network4/14/2016 6
![Page 7: Prototyping a Social Networkelite.polito.it/files/courses/01QYAPD/2016/social... · 4/14/2016 Prototyping a Social Network 3. Pizza++ Feature Set •Find top pizzas to eat near me](https://reader034.vdocuments.mx/reader034/viewer/2022050407/5f84c8658a75953df7113611/html5/thumbnails/7.jpg)
THE BOOTSTRAP FRAMEWORK
Style and Layout in the Web
Prototyping a Social Network4/14/2016 7
![Page 8: Prototyping a Social Networkelite.polito.it/files/courses/01QYAPD/2016/social... · 4/14/2016 Prototyping a Social Network 3. Pizza++ Feature Set •Find top pizzas to eat near me](https://reader034.vdocuments.mx/reader034/viewer/2022050407/5f84c8658a75953df7113611/html5/thumbnails/8.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
• Developed by Twitter
– http://getbootstrap.com/
Prototyping a Social Network4/14/2016 8
![Page 9: Prototyping a Social Networkelite.polito.it/files/courses/01QYAPD/2016/social... · 4/14/2016 Prototyping a Social Network 3. Pizza++ Feature Set •Find top pizzas to eat near me](https://reader034.vdocuments.mx/reader034/viewer/2022050407/5f84c8658a75953df7113611/html5/thumbnails/9.jpg)
Bootstrap philosophy
• Based on CCS classes
• Each class applies one “effect”
• Various classes may be combined in the same element
• 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/14/2016 9
![Page 10: Prototyping a Social Networkelite.polito.it/files/courses/01QYAPD/2016/social... · 4/14/2016 Prototyping a Social Network 3. Pizza++ Feature Set •Find top pizzas to eat near me](https://reader034.vdocuments.mx/reader034/viewer/2022050407/5f84c8658a75953df7113611/html5/thumbnails/10.jpg)
Using Bootstrap
• 3 files– Bootstrap– Theme (optional)– Javascript support
• Or download locally
Prototyping a Social Network4/14/2016 10
![Page 11: Prototyping a Social Networkelite.polito.it/files/courses/01QYAPD/2016/social... · 4/14/2016 Prototyping a Social Network 3. Pizza++ Feature Set •Find top pizzas to eat near me](https://reader034.vdocuments.mx/reader034/viewer/2022050407/5f84c8658a75953df7113611/html5/thumbnails/11.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/14/2016 11
![Page 12: Prototyping a Social Networkelite.polito.it/files/courses/01QYAPD/2016/social... · 4/14/2016 Prototyping a Social Network 3. Pizza++ Feature Set •Find top pizzas to eat near me](https://reader034.vdocuments.mx/reader034/viewer/2022050407/5f84c8658a75953df7113611/html5/thumbnails/12.jpg)
Buttons & Menus
Prototyping a Social Network4/14/2016 12
![Page 13: Prototyping a Social Networkelite.polito.it/files/courses/01QYAPD/2016/social... · 4/14/2016 Prototyping a Social Network 3. Pizza++ Feature Set •Find top pizzas to eat near me](https://reader034.vdocuments.mx/reader034/viewer/2022050407/5f84c8658a75953df7113611/html5/thumbnails/13.jpg)
Tables
Prototyping a Social Network4/14/2016 13
![Page 14: Prototyping a Social Networkelite.polito.it/files/courses/01QYAPD/2016/social... · 4/14/2016 Prototyping a Social Network 3. Pizza++ Feature Set •Find top pizzas to eat near me](https://reader034.vdocuments.mx/reader034/viewer/2022050407/5f84c8658a75953df7113611/html5/thumbnails/14.jpg)
Navigation bars
Prototyping a Social Network4/14/2016 14
![Page 15: Prototyping a Social Networkelite.polito.it/files/courses/01QYAPD/2016/social... · 4/14/2016 Prototyping a Social Network 3. Pizza++ Feature Set •Find top pizzas to eat near me](https://reader034.vdocuments.mx/reader034/viewer/2022050407/5f84c8658a75953df7113611/html5/thumbnails/15.jpg)
Grids & Columns
Prototyping a Social Network4/14/2016 15
![Page 16: Prototyping a Social Networkelite.polito.it/files/courses/01QYAPD/2016/social... · 4/14/2016 Prototyping a Social Network 3. Pizza++ Feature Set •Find top pizzas to eat near me](https://reader034.vdocuments.mx/reader034/viewer/2022050407/5f84c8658a75953df7113611/html5/thumbnails/16.jpg)
More info, examples, help
• http://getbootstrap.com/css/
• http://getbootstrap.com/components/
• http://www.w3schools.com/bootstrap/default.a
sp
Prototyping a Social Network4/14/2016 16
![Page 17: Prototyping a Social Networkelite.polito.it/files/courses/01QYAPD/2016/social... · 4/14/2016 Prototyping a Social Network 3. Pizza++ Feature Set •Find top pizzas to eat near me](https://reader034.vdocuments.mx/reader034/viewer/2022050407/5f84c8658a75953df7113611/html5/thumbnails/17.jpg)
EXERCISE
Getting started with Pizza++ and Bootstrap
Prototyping a Social Network4/14/2016 17
![Page 18: Prototyping a Social Networkelite.polito.it/files/courses/01QYAPD/2016/social... · 4/14/2016 Prototyping a Social Network 3. Pizza++ Feature Set •Find top pizzas to eat near me](https://reader034.vdocuments.mx/reader034/viewer/2022050407/5f84c8658a75953df7113611/html5/thumbnails/18.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/14/2016 18
![Page 19: Prototyping a Social Networkelite.polito.it/files/courses/01QYAPD/2016/social... · 4/14/2016 Prototyping a Social Network 3. Pizza++ Feature Set •Find top pizzas to eat near me](https://reader034.vdocuments.mx/reader034/viewer/2022050407/5f84c8658a75953df7113611/html5/thumbnails/19.jpg)
Questions?
Luigi De Russis
01QYAPD SOCIAL NETWORKING: TECHNOLOGIESAND APPLICATIONS
![Page 20: Prototyping a Social Networkelite.polito.it/files/courses/01QYAPD/2016/social... · 4/14/2016 Prototyping a Social Network 3. Pizza++ Feature Set •Find top pizzas to eat near me](https://reader034.vdocuments.mx/reader034/viewer/2022050407/5f84c8658a75953df7113611/html5/thumbnails/20.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/14/2016 20