RSS Feed

HTML5 + CSS3 = BFF

Posted on

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: