• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Creating a webframe with web applications - Manual by Jasper Moelker (14 March 2009)
 

Creating a webframe with web applications - Manual by Jasper Moelker (14 March 2009)

on

  • 2,512 views

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 ...

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.

Statistics

Views

Total Views
2,512
Views on SlideShare
2,495
Embed Views
17

Actions

Likes
1
Downloads
0
Comments
0

3 Embeds 17

http://ar0051.blogspot.com 9
http://www.slideshare.net 7
http://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Creating a webframe with web applications - Manual by Jasper Moelker (14 March 2009) Creating a webframe with web applications - Manual by Jasper Moelker (14 March 2009) Presentation Transcript

    • 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
    • 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:
    • Example: Custom webframe with SlideShare slidecast embedded (source: urbandetectives.com) Example: Custom webframe with Google Calendar embedded (source: praktijkverenigingbout.nl)
    • Example: Blogger with YouTube movie embedded (source: AR0051.blogspot.com) Example: Blogger with Google Maps (personalized map) embedded (source: CSI-SaoPaulo.blogspot.com)
    • 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 –
    • 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 –
    • 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).
    • 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.
    • 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.
    • 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!
    • 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