1. You Deserve a (Media)-Rich Website
Alejandro Cremaschi
University of Colorado at Boulder

2. Cremaschi - Media Rich Websites
Assumptions
You already have a studio website
You have a webmaster
You maintain it yourself
OR…
You are considering starting a studio website
Through a company or web designer
Yourself
Cremaschi - Media Rich Websites

3. Cremaschi - Media Rich Websites
Goals
To show you…
How to add TOOLS and CONTENT that will make your website more useful and complete
How to do this easily and inexpensively!
Cremaschi - Media Rich Websites

4. Cremaschi - Media Rich Websites
Two websites…
While beautiful, these two website don’t yet take advantage of these tools
Cremaschi - Media Rich Websites

5. Cremaschi - Media Rich Websites
Tools I will cover…
Audio on your website
Video on your website
Photo albums on your website
Useful tools such as…
Contact forms
Newsletter services
Interactive calendar
Annotated and interactive map
Cremaschi - Media Rich Websites

6. Cremaschi - Media Rich Websites
Tools I will cover…
Sponsored ads and links that will benefit your students and MAY produce profits for you
A blog (web-log)
Cremaschi - Media Rich Websites

7. Cremaschi - Media Rich Websites
Tools I will not cover
Flash-based sites and tools
Shopping carts and e-stores
Nuts and bolts of blogs
Cremaschi - Media Rich Websites

8. Definitions and clarifications
Hosting servers: where sites are stored
HTML
Copy and pasting HTML code
Example with Nvu (“N-View”, free HTML editor, downloadable from
Cremaschi - Media Rich Websites

9. Cremaschi - Media Rich Websites
Audio on your website
Why?
Samples of your own playing
“Welcome” greeting to your website
Posting performances of your students for parents and family
Educational material (demonstration of pieces, ear-training files, etc)
Cremaschi - Media Rich Websites

10. Cremaschi - Media Rich Websites
Audio on your website
Sound file formats
Uncompressed:
.wav and .aiff
Compressed (ideal for websites)
MP3 files
Small and good quality
My favorite program for converting files to MP3: Audacity (free - for details see other presentation)
Cremaschi - Media Rich Websites

11. Cremaschi - Media Rich Websites
Audio
Option 1: Upload MP3 file to YOUR hosting server. Then…
EITHER add a hyperlink to the file in your website
Example: see the link to Sonatina in G at
OR embed file within your website
Example: see playing controls to “Agitato” at
Cremaschi - Media Rich Websites

12. Cremaschi - Media Rich Websites
Audio
Option 1: Upload to your server
Hyperlink typically looks like:
<a href="hello.mp3">Hello, there!</a>
Embedded file typically looks like:
<embed src="hello.mp3" width="104" height="16" controller="true"></embed>
Cremaschi - Media Rich Websites

13. Cremaschi - Media Rich Websites
Audio
Option 2: Upload and store file at EXTERNAL sites
Then paste their player into your pages
Example: See the Hipcast.com sound examples at:
Cremaschi - Media Rich Websites

14. Cremaschi - Media Rich Websites
Audio
Option 2: External storage
External sites offer storage for free or for a monthly fee
Very easy to upload files
Convenient, easy-to-use players you can paste in your page
Cremaschi - Media Rich Websites

15. Cremaschi - Media Rich Websites
Audio
Option 2: External storage
Some audio storage providers:
Hipcast.com ($) allows you to even do the recording online through a microphone connected to your computer
BooMP3.com (free and $)
Odeo.com (free)
Cremaschi - Media Rich Websites

16. Cremaschi - Media Rich Websites
Video on your website
Why?
Samples of your own playing
Posting performances of your students for parents and family
Educational material (tutorials on how to practice, demonstration of pieces, etc)
Cremaschi - Media Rich Websites

17. Cremaschi - Media Rich Websites
Video on your website
Cremaschi - Media Rich Websites

18. Cremaschi - Media Rich Websites
Video on your website
Video files are much larger than audio files!
Many possible compressed format:
Mpeg-4 (mp4)
.mov (Quicktime)
.avi
.flv (Flash video, used by YouTube). Becoming most popular
Most will work just fine
Cremaschi - Media Rich Websites

19. Cremaschi - Media Rich Websites
Video
Option 1: upload file to YOUR server and then
Add a hyperlink to the video file in your web page
Embed video file in your web page
Cremaschi - Media Rich Websites

20. Cremaschi - Media Rich Websites
Video
Option 1: upload file to your server
Typical code for hyperlinked file:
<a href="hello.mov">Hi, there</a>
Typical code for embedded file
<embed src="hello.mov" width="400" height="300" controller="true"></embed>
Cremaschi - Media Rich Websites

21. Cremaschi - Media Rich Websites
Video
Option 2: Store file at EXTERNAL storage. Then paste their player in your pages
Example: Videos posted in my blog are stored in YouTube (by a third party in some cases)
Cremaschi - Media Rich Websites

22. Cremaschi - Media Rich Websites
Video
Option 2: External storage
Hipcast.com ($)
YouTube.com (free)
Public videos. Can be embedded in pages
Unlisted videos. Only members you invite can watch by logging into YouTube
Blip.tv (free)
Cremaschi - Media Rich Websites

23. Cremaschi - Media Rich Websites
Online photo albums
Example: Photos at the bottom are part of a web album:
Cremaschi - Media Rich Websites

24. Cremaschi - Media Rich Websites
Online photo albums
Why use online photo album sites?
Provide photos of your recital to your students
Your own professional shots (press kit)
Why album instead of just posting photos?
Stored externally
Easy to add or delete photos, edit and update albums
Users can download or even print photos
Cremaschi - Media Rich Websites

25. Cremaschi - Media Rich Websites
Photos
Online photo albums:
Picasa (Picasaweb.google.com)
Flickr.com (Yahoo service)
Cremaschi - Media Rich Websites

26. Cremaschi - Media Rich Websites
Photos
Picasa perks:
PC: Free downloadable Picasa application for editing your photos and uploading them to your Picasa easily from your PC
Mac: Free plug in application for iPhoto for uploading photos to your Picasa account
Cremaschi - Media Rich Websites

27. Useful tools: contact forms
Example:
Cremaschi - Media Rich Websites

28. Useful tools: contact forms
Contact forms. Why?
People can contact you or send you feedback easily
Allows people to sign up for newsletters, etc
Helps you build a database of customers
Cremaschi - Media Rich Websites

29. Useful tools: contact forms
Contact forms. Free and paid form services
Create form online and copy-paste the code
JotForm.com (free and $)
Bravenet.com (free [lots of ads] and $)
Example with JotForm.com…
Cremaschi - Media Rich Websites

30. Useful tools: Newsletters
ConstantContact.com ($15 a month)
Write and newsletters using online templates
Maintain your subscriber’s list online
Copy and paste “Subscribe” form to your website
Others: listbox.com , icontact.com , etc
Cremaschi - Media Rich Websites

31. Useful tools: calendars
Interactive calendar
Example of embedded calendar:
Cremaschi - Media Rich Websites

32. Useful tools: calendars
Interactive online calendar features
People can subscribe to your calendar, or add some of your events to their calendar
People can map the location of your event
Cremaschi - Media Rich Websites

33. Useful tools: calendars
Interactive calendar
Google Calendar or Yahoo Calendar (free with account)
Google calendar:
Many great features (sync with mobile, import, export, reminders, etc)
Allows you to embed your calendar into your website
Cremaschi - Media Rich Websites

34. Useful tools: annotated map
Annotated interactive map
Example:
Why?
Allows people to find your address and directions quickly
You can alert people of things directly on the map:
Parking
Stores
Road features
Cremaschi - Media Rich Websites

35. Useful tools: annotated map
Google “My maps”
Allows you to create your OWN version of the map
Add icons, messages, landmarks, etc
Maps can be unlisted or public
Copy and paste the link into your site
(Demo…)
Cremaschi - Media Rich Websites

36. Cremaschi - Media Rich Websites
Sponsored links
Example:
Cremaschi - Media Rich Websites

37. Cremaschi - Media Rich Websites
Sponsored links
Become an affiliate of SheetMusicPlus.com
Click on the “affiliate program” link (bottom of page)
Create an account
Choose link or search box style
Copy the code and paste on your website
8% to 12% sales commissions
You can check sales online
They mail you a check when $20 have accrued
Cremaschi - Media Rich Websites

38. Cremaschi - Media Rich Websites
Sponsored links
Others:
MusicNotes.com, Amazon.com, BarnesAndNoble.com
Cremaschi - Media Rich Websites

39. Cremaschi - Media Rich Websites
A blog
Cremaschi - Media Rich Websites

40. Cremaschi - Media Rich Websites
A blog
A blog = a web log
Your public online journal or magazine
A web page “on steroids” where you can easily publish articles, photos, videos, sound…
People can “subscribe” to it
Cremaschi - Media Rich Websites

41. Cremaschi - Media Rich Websites
A blog
Why a blog?
Studio news and announcements
Educational blogs for your students
History blog (e.g. articles on composers for your students to read)
Publishing the “best performance of the week”
“Rewarding” good practice, best scales, etc with a short article and photo
Etc.
Cremaschi - Media Rich Websites

42. Cremaschi - Media Rich Websites
A blog
A blog is a web page with capabilities such as:
Administrator login: allows you (the administrator) to add, edit or delete your articles
Your profile
Links to all past articles
External links (e.g. to your website)
Search capability
Comment capabilities, that allow readers to leave comments
A link for users to subscribe to the blog
Cremaschi - Media Rich Websites

43. Cremaschi - Media Rich Websites
A blog
You can get a FREE blog at many places such as:
Blogger.com (aka blogspot)
Wordpress.com
Sign up and start writing
You can add a link to your blog in your regular web site. Usually: username.blogspot.com
Cremaschi - Media Rich Websites