Development Resources

caution

This page contains the archived version for the 2023/2024 edition of the course.

Go to the latest version

This section presents some resources useful for software development that might be relevant for (final) high-fidelity prototypes.

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

Suggested Software

• Node.js 18.14 (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