Today we’re using the web app template (html | css | manifest for offline caching) to begin our Place Portrait. We’re challenged to design a single page web-app with images, text, video and google maps about a place (near or far) using HTML5 and CSS3.
We took a look at the HTML5 Generator, HTML5 Rocks (by Google) and CSS3 Generator, as well as the CSS3 Tool. Man, the web sure has changed since I first became smitten with its little markup tags.
We made an HTML5 page that would display on a mobile phone as a web app, as opposed to a native app, which runs on the iOS. I chose Legionowo, Poland, as my place (my cousins live there!), and created a web page. In order to get my bearings, I made all of my containers and images 320 pixels wide.
We downloaded video from YouTube using the Easy YouTube Downloader extension of Chrome; the reasons for this were that if we embedded a YouTube video, it would open in YouTube and take you away from the app. I then pasted a smattering of code, made load images and app icons, and lookie here!
One thing that is happening is that once I store it on my home screen, the map and video stop working. Doh!
Update: The Google Maps JavasScript API is very easy to use – it purportedly will work better on mobile devices. It works like a dream on my HTML5 page, I implemented it this morning instead of the <iframe> code that the “embed” function of Google Maps offers me. I haven’t decided if I should download the Xcode program or not… something to ponder today.
AppCamp 