Development Resources

This section presents some resources useful for software development that may be relevant for (final) interactive prototypes. Moreover, it lists the software applications and libraries used during the course.

Do you need to refresh your memory about web development? Web Fundamentals is "Google's opinionated reference for building amazing web experiences".

Software In Use

• Node.js 14.17 (LTS) and npm
• Visual Studio Code
• git
• ngrok

Design Resources

• Fonts: Google Fonts is a great resource of easy-to-use fonts, while FontPair may help you pair them
• Icons: Font Awesome and Noun Project are a good free icons package
• Subtle Patterns is useful if you want to add some light patterns to any plain background color
• Sample images: Wunderstock and Unsplash are a good starting point to find Creative Commons photos
• Colors: Adobe Color is an interactive web app to help you choose nice color schemes

Web Development Resources

• Simulate a mobile device from a desktop browser (e.g., with Chrome's Device Mode)
• Geolocation:
  • HTML5 Geolocation API
  • Google Maps Javascript API
• Device orientation: you can access the device gyroscope/accelerometer through dedicate HTML5 API
  • Step-by-step tutorial
• Microphone and camera: get audio and take photos with the HTML5 Media Capture API
• Camera roll: to open the smartphone's camera roll, just use

  <input type="file" accept="image/*" capture="camera">

• Vibration: make the phone vibrate with the HTML5 Vibration API
• Touch gesture: enable advanced touch gestures (e.g., multi-touch, force touch, etc.) thanks to the HTML5 Touch events
• Notifications: HTML5 Notifications API allows the generation of notifications from the browser
  • useful read: Web Workers and PWA
• Examples of usages in the 2020 GitHub course organization: https://github.com/polito-hci-2020?q=sample