Mobile Web App Course
These are the course materials for the University of Applied Sciences Upper Austria elective course. It's all about building an app for mobile devices using the "good old" web technologies - HTML, CSS and JavaScript.
Link to the internal Elearning Forum
Classes
01 - Page Layout and Camera
- Use modern CSS, such as flexbox and the viewport unit, to create an app layout.
- Create an app with which the user can take a photo (camera or photo stream) and apply an effect on it.
02 - Mapping and Geolocation
- Map the users location and path on a map.
03 - Acceleration & Rotation Sensors and 3D
- Access the acceleration sensors to change the background colour of the page depending on how fast the device is accelerating.
- Use the rotation sensors to rotate a 3D cube.
04 - Gamepad & Pong
- Move an HTML element around using a USB game controller.
- Build a pong that can be controlled via a gamepad.
05 - Chat
- Build a chat app using Firebase as a backend.
How-Tos
Debug Websites on your Device from your Computer
It's great to open websites on your mobile phone to see what things look like on an actual device. But when the website doesn't look the way you thought it would, it's handy to be able to look at the website with developer tools to investigate what's going on.
Android
- Activate USB Debugging on your Android device
- Connect your device via USB
- Open your Android device in Chrome by opening the URL
chrome://inspect/
iOS
- On your iOS device turn on the
Web Inspector
in theSettings
->Safari
->Advanced
- In Safari, activate the
Develop menu
in the settings under "Advanced." - Connecting your device via USB
- In the Safari menu, go to
Develop
->Your Device Name
->Inspect
Host a folder via HTTP
In order to open a local HTML file on another device, you need to host it via HTTP.
Mac
cd folder/with/source/code
python -m SimpleHTTPServer 8080
Then open the address http://localhost:8080/ in your browser.
Win
Download and install MAMP or similar to host a folder.
Other tools
- iOS simulator on Mac: Install Xcode
- Android emulator: Install the Android SDK
- Device testing in your browser: Browserstack