|Internet and Web, Multimedia, HTML/XHTML <|
|Table of contents|
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.
Error in widget FlickrShow
Objectives : Connected media
By the end of this page you will be able to:
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).
- 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.
- In the text area is the code to cut and paste into your html code. For example: A photo I have uploaded at http://www.flickr.com/photos/43257813@N08/3978927485/
Video (YouTube: http://www.youtube.com)
YouTube is a video sharing website on which users can upload and share videos (YouTube, 2009, October 4)
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.
- First you will need to upload your video to YouTube (you will need to create a userid)
- Example: EIT Hawkes Bay ( http://www.youtube.com/watch?v=I6XsEKGzvrw )
- 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
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
- 10 Youtube URL Tricks You Should Know About (Kashyap, 2009)
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).
There are many ways to incorporate twitter into your web site or Blog.
- Twitter/Widgets (2010) (http://twitter.com/widgets) contains a code generator for an HTML based widget (example code follows).
- Apps (2009) contains links to Twitter applications that can be used for various platforms including: Windows, Mac, Linux, and Mobile.
- Stansberry (2009, Jan 23) lists 10 ways to integrate Twitter into your web site.
Example code from Twitter/Widgets(2010)
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.
- WSPAI (2006).Western Southland - Home. Retrieved May 25, 2010 from http://www.westernsouthland.co.nz/cpages/
- 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
- Cut and paste the HTML code as directed into your code.The following code locates Napier, Hawkes Bay.
Adding a form
- You need to have a Google account (I have an iGoogle search page - top right of standard Google page)
- Log into Google
- If you are in iGoogle, select more > Documents
- In Google Documents
- Create New > Form
- Add questions using the form creator
- 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)
- 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.
Adding connected media requiring Server side scripting
- 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
- 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
- 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/
- 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
- Twitter/Widgets (2010) Retrieved March 7, 2010 from http://twitter.com/widgets
- Apps (2009).In Twitter Fan Wiki. Retrieved October 4, 2009, from http://twitter.pbworks.com/Apps
- 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/