This document describes a selection of web applications for working with multi media (images, video, audio, slideshows, documents, maps and more) and how to put (embed) them into your own or an existing framework.

1. FRAMEWORK WEB APPS
with
IMAGES
picasa.com flickr.com
VIDEO
AUDIO
MAPS
DOCS
FORMS
CALENDARS
FLASH
RSS
OTHER...
1. create framework 3. embed apps 2. select web apps

2. Building a web framework with web applications
Author: Jasper Moelker (j.b.moelker@activeids.nl)
Date: March 2009
Status: Draft
ABSTRACT:
This document describes a selection of web applications for working with multi media (images,
video, audio, slideshows, documents, maps and more) and how to put (embed) them into your
own or an existing framework.
WORKFLOW:
1) Setup / Create a web framework
2) Select web applications
3) Embed web applications into the framework
1. SETUP / CREATE A WEB FRAMEWORK
Web apps can typically be viewed on the website of the host itself. For instance you can watch a
YouTube movie on YouTube.com. More interesting is the option to embed a web application into
your own website. You can either create your own webframe or use an existing one.
CUSTOM FRAMEWORK:
You can build your own HTML website
(framework) using any HTML editor (notepad;
Microsoft Frontpage; Adobe Dreamweaver
etc.).
The advantage of creating your own webframe
is that you have full freedom in designing your
layout, navigation and so on.
Creating your own website does require
certain knowlegde and skills as you will have
to build from scratch. Therefore you might
prefer using an existing framework.
EXISTING FRAMEWORKS:
As existing framework you can select from a
variety of website templates available online.
Some use an online wizard / editor, others you
can modify locally using your own HTML editor.
A special, very popular, framework are weblogs
offering a typical frame for posts, commonly
with the option to leave comments and often
with the possibility to add widgets. Besides
widgets most blogs (such as Blogger.com) allow
you to add your own web applications.
The next examples give an impression of
webframes with embedded web apps:

3. Example: Custom webframe with SlideShare slidecast embedded (source: urbandetectives.com)
Example: Custom webframe with Google Calendar embedded (source: praktijkverenigingbout.nl)

4. Example: Blogger with YouTube movie embedded (source: AR0051.blogspot.com)
Example: Blogger with Google Maps (personalized map) embedded (source: CSI-SaoPaulo.blogspot.com)

5. 2. SELECT WEB APPLICATIONS (OVERVIEW)
This is an overview of a selection of web applications describing their function and options and
how to embed them.
IMAGES:
Picasa:
Function: Picture albums (single images / collections)
–
Options: Tagging (incl. Geo-); Sharing (restricted / public)
–
Embed: Single image; Slideshows; Pictures on map (Google Maps)
–
Account: Google
–
URL: picasa.com
–
Flickr:
Function: Picture albums (single images / collections)
–
Options: Tagging (incl. Geo-); Sharing (restricted / public)(?)
–
Embed: Single image; Slideshows(?); Pictures on map (Yahoo Maps)
–
Account: Yahoo
–
URL: flickr.com
–
VIDEO:
YouTube:
Function: Video
–
Options: Tagging (incl. Geo- (manual)); Sharing (restricted / public)(?); Annotations
–
Embed: Video (in Flash player)
–
Account: YouTube / Google
–
URL: YouTube.com
–
Vimeo:
Function: Video
–
Options: Full HD; Tagging; Sharing (restricted / public)(?); Link to Facebook
–
Embed: Video (in Flash player)
–
Account: Vimeo
–
URL: Vimeo.com
–
AUDIO:
Archive.org
Function: Online storage for various filetypes incl. audio
–
Options: (?)
–
Embed: (?)
–
Account: Archive.org / Open ID
–
URL: archive.org/details/audio
–

6. MAPS:
Google Maps:
Function: Maps (Road / Satellite / Terrain)
–
Options: Google API; Personal / custom maps (restricted / public); link to Picasa, YouTube
–
Embed: Map (in iframe); Customize tool
–
Account: Google (only needed for personal maps)
–
URL: maps.google.com
–
Live Maps:
Function: Maps (Road / Satellite / Bird's eye)
–
Options: Personal / custom maps (collections)(?)
–
Embed: (?)
–
Account: Live (needed for personal maps, embedding)
–
URL: maps.live.com
–
Yahoo Maps:
Function: Maps (Road / Satellite)
–
Options: Flash API; link to Flickr
–
Embed: (?)
–
Account: Yahoo (needed for embedding)
–
URL: maps.yahoo.com
–
DOCS:
Google Docs:
Function: Text documents; Spreadsheets; Presentations / Slideshows; PDFs
–
Options: Cross referencing (data in docs); Sharing (restricted / public)
–
Embed: Only as regular page (in iframe); Presentations (slideshow view in iframe);
–
Account: Google
–
URL: Docs.Google.com
–
Box.net:
Function: Text documents; Spreadsheets; Presentations / Slideshows; PDFs
–
Options: Sharing (restricted / public; shared folder structure)
–
Embed: (?)
–
Account: Box (limited free account; paid full account)
–
URL: Box.net
–
SlideShare:
Function: Text documents; Spreadsheets; Presentations / Slideshows;
–
Options: Slideshows; SlideCast (slideshow w/ audio track); YouTube video in slide;
–
Tagging; Transcript; Sharing (restricted / public)
Embed: Slideshow; SlideCast; Docs (in object)
–
Account: SlideShare
–
URL: SlideShare.org
–

7. FORMS:
Google Forms (part of Google Docs):
Function: Form connected to spreadsheet
–
Options: Form entries: text (line / paragraph); checkboxes; multiple choice;
–
Embed: Form view (in iframe)
–
Account: Google
–
URL: Docs.Google.com
–
CALENDARS:
Google Calendar:
Function: Calendar for events etc.
–
Options: Sharing (restricted / public) ; Link to Google Maps
–
Embed: Calendar / Agenda view (in iframe); Single event (html button)
–
Account: Google
–
URL: Calendar.Google.com
–
SLIDESHOWS w/ VIDEO:
VCASMO:
Function: Synchronize slideshows with videos in dual view interface
–
Options: Tagging; Sharing (restricted / public); Captions / Subtitles; Comments
–
Embed: Sildeshow / Video / Slideshow with Video (in object); Customize tool
–
Account: Vcasmo
–
URL: Vcasmo.com
–
OMNISIO:
Function: Synchronize slideshows with videos in dual view interface; Assembling video clips
–
Options: Link w/ SlideShare, YouTube, Google Video; Custom video markup structure;
–
Tagging; Sharing (restricted / public); Annotations; Captions / Subtitles; Comments
Embed: Sildeshow / Video / Slideshow with Video (in object); Customize tool
–
Account: Omnisio (currently no sign up possible; acquired by Google end 2008)
–
URL: Omnisio.com
–
RSS:
Function: Feeds (news, weblogs etc)
–
Options: Title; Date; Body (text); Image (optional)
–
Embed: indirect via rss reader or gadget / widget in eg. blog
–
OTHER:
In principle all types of content can be embedded. If no special embed format is provided you can
often use an iframe (see step 3).

8. 3. EMBED WEB APPS IN FRAMEWORK
PROCEDURE:
To embed a web application inside your framework you need to add a code snippet (a piece of
code) into the HTML of your framework. The first step is creating or obtaining the required code
snippet. The second step is placing the snippet in the right place on your page.
Step 1: Get embed code
Most web applications directly provide you with the required code. Often they also offer a wizard
or configuration tool to change the settings of how the web application will be displayed in your
webframe. You will typically find this code snippet under a tag called “embed”, “link” or “add to
blog” or something similar. In a lot of cases you will also find the option “custom”, “customize” or
“options” where you can adjust the display settings. For existing webframes like Blogger some
web applications like SlideShare directly offer the possibility to add the web app to your
webframe.
Example 1: Obtaining the code to embed slideshow from SlideShare:
Procedure to get embed code from your slideshow in SlideShare: copy embed code (top right) or use “post to” (below).
In SlideShare you can directly copy the code snippet provided in the “embed” textfield on the right
of the presentation. Alternatively you can select “custom” and copy the alternative code. Not all
the code is needed to embed the slideshow object. See “HTML code for embedding” in this
document for which code is essential.
For some webframes SlideShare offers to embed the application for you via “post to” below the
presentation. When using this option you can skip step 2 of this procedure.

9. Example 2: Obtaining the code to embed map from Google Maps:
Procedure to get the embed code from your map in Google Maps: select “Link” (image left) > copy code or select
“customize” (image middle) > customize tool allows you to modify the settings embed code (image right).
To get the Google Maps embed code click the “Link” button (on the top right). The pop up gives
you the option to copy the code directly or you can modify it using a tool by clicking on
“customize...”. In the customize tool you can still change your view (zoom, pan), the way it's
displayed (map / satellite / terrain) and you can select the size. When you are done changing the
settings copy the code created for you.
Note: When web applications don't offer a customize tool or you want to edit the code later on
when it's already in your page you can also modify the code manually. See the section “HTML code
for embedding” in this document for more information.

10. Step 2: placing the web application
The final step is pasting the code obtained in step one into your framework. When you have your
own webframe all you need to do is look for the position you want to show your web application
and paste the embed code snippet. If you are using an existing webframe you will need to look for
the option to view the HTML code and again paste it where you want it to show.
Example: Placing your web application into your weblog on Blogger:
Procedure to place your web application into your blog on Blogger: New Post > Edit HTML tab > Paste code > Publish post.
Result: your map displayed as post on your blog.
In your blog create a new post, select the “Edit HTML” tab and paste your code snippet. Publish
your post and you are done!

11. HTML CODE FOR EMBEDDING:
For embedding web applications different tags are used. It depends on the web application which
tag is supported. All tags have similar parameters that determine what and how it's being
displayed. You might typically want to change the following three parameters:
src=”SourceFileUrl” (replace SourceFileUrl by the url of the content you want embed)
width=”Value” (replace value by a value in pixels (eg. 400) or percentage (eg. 25%))
height=”Value” (replace value by a value in pixels (eg. 400) or percentage (eg. 25%))
The width and the height parameters determine the size of your embedded web application. If you
for instance want to embed an app into your blog that has posts with a maximum width of 400
pixels make sure your width value in the embed code is no more than 400.
<EMBED> TAG:
code: <embed src=”SourceFileUrl” width=”400” height=”300”/>
function: Defines embedded content, such as a plug-in.
more info: http://www.w3schools.com/tags/html5_embed.asp
<OBJECT> TAG:
code: <object src=”SourceFileUrl” width=”400” height=”300”>
alternative scripts (executed if object is not supported by browser) </object>
function: Used to include objects like images, audio, videos, Java applets, ActiveX, PDF, Flash.
more info: http://www.w3schools.com/TAGS/tag_object.asp
<IFRAME> TAG:
code: <iframe src=”SourceFileUrl” width=”400” height=”300”>
alternative text (shown if browser does not support iframes) </iframe>
function: Defines an inline frame that contains another document.
more info: http://www.w3schools.com/TAGS/tag_iframe.asp