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
- 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.
- Map the users location and path on a map.
- 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.
- Move an HTML element around using a USB game controller.
- Build a pong that can be controlled via a gamepad.
- Build a chat app using Firebase as a backend.
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.
- Activate USB Debugging on your Android device
- Connect your device via USB
- Open your Android device in Chrome by opening the URL
chrome://inspect/
- On your iOS device turn on the
Web Inspectorin theSettings->Safari->Advanced - In Safari, activate the
Develop menuin the settings under "Advanced." - Connecting your device via USB
- In the Safari menu, go to
Develop->Your Device Name->Inspect
In order to open a local HTML file on another device, you need to host it via HTTP.
cd folder/with/source/code
python -m SimpleHTTPServer 8080
Then open the address http://localhost:8080/ in your browser.
Download and install MAMP or similar to host a folder.
- iOS simulator on Mac: Install Xcode
- Android emulator: Install the Android SDK
- Device testing in your browser: Browserstack