Development Resources
caution
This page contains the archived version for the 2022/2023 edition of the course.
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 16.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:
- Device orientation: you can access the device gyroscope/accelerometer through dedicate HTML5 API
- 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