You Deserve a (Media)-Rich Website Alejandro Cremaschi University of Colorado at Boulder http://www.alejandrocremaschi.com

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

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

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

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

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

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

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

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

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

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

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

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: http://www.wholeoctave.com/news Cremaschi - Media Rich Websites

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

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

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

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

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

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 http://www.katzpianostudio.com/performances.asp Embed video file in your web page http://alejandrocremaschi.com/clips.htm Cremaschi - Media Rich Websites

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

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) http://alejandrocremaschi.com/wordpress Cremaschi - Media Rich Websites

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

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

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

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

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

Useful tools: contact forms Example: http://alejandrocremaschi.com/contact.htm Cremaschi - Media Rich Websites

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

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

Useful tools: 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

Useful tools: calendars Interactive calendar Example of embedded calendar: http://alejandrocremaschi.com/presentations.htm Cremaschi - Media Rich Websites

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

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

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

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

Cremaschi - Media Rich Websites Sponsored links Example: http://alejandrocremaschi.com/wordpress Cremaschi - Media Rich Websites

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

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

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

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

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

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

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