You Deserve a MediaRich Website

1
You Deserve a (Media)-Rich Website

• Alejandro Cremaschi
• University of Colorado at Boulder
• http//www.alejandrocremaschi.com

2
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

3
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!

4
Two websites

• While beautiful, these two website dont yet take
  advantage of these tools
• http//www.sabrinachang.com/
• http//www.vancouverpiano.com/

5
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

6
Tools I will cover

• Sponsored ads and links that will benefit your
  students and MAY produce profits for you
• A blog (web-log)

7
Tools I will not cover

• Flash-based sites and tools
• Shopping carts and e-stores
• Nuts and bolts of blogs

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 www.nvu.com)

9
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)

10
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)

11
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
  http//alejandrocremaschi.com/clips
• OR embed file within your website
• Example see playing controls to Agitato at
  http//alejandrocremaschi.com/clips.htm

12
Audio

• Option 1 Upload to your server
• Hyperlink typically looks like
• Hello, there!
• Embedded file typically looks like
• controller"true"

13
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
  http//www.wholeoctave.com/news

14
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

15
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)

16
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)

17
Video on your website

• http//www.katzpianostudio.com/performances.asp
• http//fisherpianostudio.com/piano-video.html
• http//masterworks.wordpress.com/piano-for-everyon
  e/

18
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

19
Video

• Option 1 upload file to YOUR server and then
• Add a hyperlink to the video file in your web
  page
• http//www.katzpianostudio.com/performances.asp
• Embed video file in your web page
• http//alejandrocremaschi.com/clips.htm

20
Video

• Option 1 upload file to your server
• Typical code for hyperlinked file
• Hi, there
• Typical code for embedded file
• controller"true"

21
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)
  http//alejandrocremaschi.com/wordpress

22
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)

23
Online photo albums

• Example Photos at the bottom are part of a web
  album http//alejandrocremaschi.com/press.htm

24
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

25
Photos

• Online photo albums
• Picasa (Picasaweb.google.com)
• Flickr.com (Yahoo service)

26
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

27
Useful tools contact forms

• Contact forms
• Example http//alejandrocremaschi.com/contact.htm
  

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

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

30
Useful tools Newsletters

• Newsletters
• ConstantContact.com (15 a month)
• Write and email newsletters using online
  templates
• Maintain your subscribers list online
• Copy and paste Subscribe form to your website
• Others listbox.com , icontact.com , etc

31
Useful tools calendars

• Interactive calendar
• Example of embedded calendar
• http//alejandrocremaschi.com/presentations.htm

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

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

34
Useful tools annotated map

• Annotated interactive map
• Example http//alejandrocremaschi.com/teaching.ht
  ml
• Why?
• Allows people to find your address and directions
  quickly
• You can alert people of things directly on the
  map
• Parking
• Stores
• Road features

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)

36
Sponsored links

• Example http//alejandrocremaschi.com/wordpress

37
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

38
Sponsored links

• Others
• MusicNotes.com, Amazon.com, BarnesAndNoble.com

39
A blog

• http//garnerpiano.blogspot.com/
• http//alejandrocremaschi.com/wordpress
• http//angela-chans-piano-studio-blog.blogspot.com
  /

40
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

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

42
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

43
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