You Deserve a (Media)-Rich 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 Cremaschi - Media Rich Websites

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! Cremaschi - Media Rich Websites

4. Two websites… • While beautiful, these two website don’t yet take advantage of these tools http://www.sabrinachang.com/ http://www.vancouverpiano.com/ Cremaschi - Media Rich Websites

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 Cremaschi - Media Rich Websites

6. 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. 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 www.nvu.com) Cremaschi - Media Rich Websites

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) Cremaschi - Media Rich Websites

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) Cremaschi - Media Rich Websites

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 Cremaschi - Media Rich Websites

12. 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. 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 Cremaschi - Media Rich Websites

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 Cremaschi - Media Rich Websites

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) Cremaschi - Media Rich Websites

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) Cremaschi - Media Rich Websites

17. Video on your website http://www.katzpianostudio.com/performances.asp http://fisherpianostudio.com/piano-video.html http://masterworks.wordpress.com/piano-for-everyone/ Cremaschi - Media Rich Websites

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 Cremaschi - Media Rich Websites

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 Cremaschi - Media Rich Websites

20. 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. 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 Cremaschi - Media Rich Websites

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) Cremaschi - Media Rich Websites

23. Online photo albums • Example: Photos at the bottom are part of a web album: http://alejandrocremaschi.com/press.htm Cremaschi - Media Rich Websites

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 Cremaschi - Media Rich Websites

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

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 Cremaschi - Media Rich Websites

27. Useful tools: contact forms • Contact forms • Example: http://alejandrocremaschi.com/contact.htm 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 • Newsletters • ConstantContact.com ($15 a month) • Write and email 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: http://alejandrocremaschi.com/presentations.htm 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: http://alejandrocremaschi.com/teaching.html • 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. Sponsored links • Example: http://alejandrocremaschi.com/wordpress Cremaschi - Media Rich Websites

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 Cremaschi - Media Rich Websites

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

39. A blog http://garnerpiano.blogspot.com/ http://alejandrocremaschi.com/wordpress http://angela-chans-piano-studio-blog.blogspot.com/ Cremaschi - Media Rich Websites

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 Cremaschi - Media Rich Websites

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. Cremaschi - Media Rich Websites

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 Cremaschi - Media Rich Websites

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 Cremaschi - Media Rich Websites