Internet:Connected media

From virtualMV2015wiki
Jump to: navigation, search
 Home   Internet and Web, Multimedia, HTML/XHTML <

Introduction

Overview

Connected media has become an important technology that web designers are including in their web pages. The ability to link to an external site and display interactive content, such as a map, or a social networking tool (like twitter), further enhances the usefulness of the site and allows users to access external sites without having to leave your site. The following image is a link to flickr, and the one below to Google's Picassa - photo sharing web sites.


to flickr


Picassa

Icon Objectives.png

Objectives : Connected media

By the end of this page you will be able to:

  • Add connected media:
    • Images (Flickr), video (YouTube), Twitter and google maps
  • Understand how Server Side scripting is required for:
    • RSS Feeds, AJAX interaction.

Adding connected media to a static web page

Images (Yahoo Flickr: http://www.flickr.com)

Flickr is an image and video hosting website, web services suite, and online community platform. In addition to being a popular website for users to share personal photographs, the service is widely used by bloggers as a photo repository (Flickr, 2009, October 4)[1].

Method

  • First you will need to upload your image to Flickr (you will need to have/create an account)
  • Once uploaded you can use the Share this panel and choose "Grab the HTML" drop selection.
Flickr share files
<a href="http://www.flickr.com/photos/43257813@N08/3978927485/"
   title="20090718HNth by mverhaart, on Flickr">
<img src="http://farm3.static.flickr.com/2547/3978927485_d8ff0ea3e6.jpg"
     width="500" height="356" alt="20090718HNth" /></a>

Video (YouTube: http://www.youtube.com)

YouTube is a video sharing website on which users can upload and share videos (YouTube, 2009, October 4)[2]

Adding a YouTube video to your web site is a fairly simple task, and indeed can be an important marketing tool. If you have a buisiness why not advertise for free on YouTube, then link your Web page to the video. This means that search engines will index the YouTube video which can link back to your web site.

Method

YouTube web page showing EIT video plus URL and text are with code to embed into a web page
  • 2011 version
    • Click on Share button below the video
    • Click on Embed button
    • Cut and paste iFrame code to the code of your web page
<iframe width="420" height="315" 
src="http://www.youtube.com/embed/I6XsEKGzvrw" frameborder="0" allowfullscreen></iframe>

This has been done by EIT on http://www.eit.ac.nz/employment_opportunities/eit_campus_and_location.aspx

This has been done by EIT Diploma in Video & Electronic Media on http://www.eit.ac.nz/study_programmes/diploma_in_video__electronic_media.aspx

YouTube resources

  • 10 Youtube URL Tricks You Should Know About (Kashyap, 2009)[3]

Twitter (http://www.twitter.com)

Twitter is a free social networking and micro-blogging service that enables its users to send and read messages known as tweets. Tweets are text-based posts of up to 140 characters displayed on the author's profile page and delivered to the author's subscribers who are known as follower (Twitter, 2009, October 4)[4].

There are many ways to incorporate twitter into your web site or Blog.

  • Twitter/Widgets (2010)[5] (http://twitter.com/widgets) contains a code generator for an HTML based widget (example code follows).
  • Apps (2009)[6] contains links to Twitter applications that can be used for various platforms including: Windows, Mac, Linux, and Mobile.
  • Stansberry (2009, Jan 23)[7] lists 10 ways to integrate Twitter into your web site.

Example code from Twitter/Widgets(2010)[5]

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'search',
  search: 'vmvwiki',
  interval: 6000,
  title: 'virtualMV wiki',
  subject: 'vmvwiki',
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#4aa7d9',
      color: '#ffffff'
    },
    tweets: {
      background: '#ffffff',
      color: '#444444',
      links: '#1985b5'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    behavior: 'default'
  }
}).render().start();
</script>

Adding a Map. ( http://maps.google.com )

Adding a map to your web page can be done easily by using the embedded html provided by google maps.

Examples

Method

  • Access google maps (http://maps.google.com/)
  • Choose the location (I have used Napier, New Zealand, but if you were developing a site for a business you can use their actual address)
  • Use Link hyperlink to display the Paste links window


Using the link code to create a google map on a web page
  • Cut and paste the HTML code as directed into your code.The following code locates Napier, Hawkes Bay.
<iframe width="425" height="350" frameborder="0" scrolling="no" 
marginheight="0" marginwidth="0" 
src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;
geocode=&amp;q=Napier+New+Zealand&amp;sll=-39.544559,176.841302&amp;sspn=0.01327,0.022659&amp;
ie=UTF8&amp;hq=&amp;hnear=Napier,+New+Zealand&amp;
ll=-39.481587,176.920481&amp;spn=0.007054,0.01133&amp;t=h&amp;
z=14&amp;output=embed">
</iframe>
<br /><small><a href="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;
geocode=&amp;q=Napier+New+Zealand&amp;sll=-39.544559,176.841302&amp;
sspn=0.01327,0.022659&amp;ie=UTF8&amp;hq=&amp;hnear=Napier,+New+Zealand&amp;
ll=-39.481587,176.920481&amp;spn=0.007054,0.01133&amp;
t=h&amp;z=14" style="color:#0000FF;text-align:left">View Larger Map</a></small>

Adding a form

Google Forms

  1. You need to have a Google account (I have an iGoogle search page - top right of standard Google page)
  2. Log into Google
  3. If you are in iGoogle, select more > Documents
  4. In Google Documents
    1. Create New > Form
    2. Add questions using the form creator
    3. Once form is created you can get the embedded iFrame code by choosing: More Actions > Embed (note this is different than the URL that Google provides to link directly to the form)
  5. Embed into your web page

The survey results are entered into a Spreadsheet.

To look at the survey results you can view the Spreadsheet. In Spreadsheet View

  • > Form > Edit Form (to make any form changes)
  • > Form > Show summary of responses

Email Me Form

Email Me Form is a free online form generator service that helps you create HTML forms for your website, with no programming required.

You can create a variety of online forms using our easy form builder. Design and build surveys, contact forms, and lead generation forms. Seamlessly integrate our HTML contact forms on your website.

Clustrmap

A clever technique is used by clustr maps. You register a clustr map on the site http://clustrmaps.com and add a link to a jpg. Each time a user views your page, they download the jpg file from the clustr server which records some user details, e.g. where they are from, and adds it to their database - which is used to create the new jpg file. All pretty clever. (see JavaScript:User_details to see how JavaScript can access the user data )

http://www2.clustrmaps.com/stats/maps-no_clusters/www.virtualmv.com-wiki-thumb.jpg
virtualmvwiki on clustrmaps

Adding connected media requiring Server side scripting

RSS feeds

Icon References.png References

  1. Flickr. (2009, October 4). In Wikipedia, The Free Encyclopedia. Retrieved 07:58, October 4, 2009, from http://en.wikipedia.org/w/index.php?title=Flickr&oldid=317756804
  2. YouTube. (2009, October 4). In Wikipedia, The Free Encyclopedia. Retrieved 07:55, October 4, 2009, from http://en.wikipedia.org/w/index.php?title=YouTube&oldid=317745645
  3. Kashyap, V. (2009) 10 Youtube URL Tricks You Should Know About. Retrieved January 12, 2009 from http://www.makeuseof.com/tag/10-youtube-url-tricks-you-should-know-about/
  4. Twitter. (2009, October 4). In Wikipedia, The Free Encyclopedia. Retrieved 07:59, October 4, 2009, from http://en.wikipedia.org/w/index.php?title=Twitter&oldid=317786208
  5. 5.0 5.1 Twitter/Widgets (2010) Retrieved March 7, 2010 from http://twitter.com/widgets
  6. Apps (2009).In Twitter Fan Wiki. Retrieved October 4, 2009, from http://twitter.pbworks.com/Apps
  7. Stansberry, G. (2009, Jan 23). 10 Awesome Ways to Integrate Twitter With Your Website. Retrieved October 3, 2009 from http://net.tutsplus.com/articles/10-awesome-ways-to-integrate-twitter-with-your-website/

Internet:Connected media. (2017). In virtualMV's ( Michael Verhaart ) wiki. Retrieved December 12, 2017, from http://www.virtualmv.com/wiki/index.php?title=Internet%3AConnected_media    (zotero)