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

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

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

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

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

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

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

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

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

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

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

Cremaschi - Media Rich Websites Audio Option 1: Upload to your server Option 1: Upload to your server Hyperlink typically looks like: Hyperlink typically looks like: Hello, there! Hello, there! Embedded file typically looks like: Embedded file typically looks like:

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

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

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

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

Cremaschi - Media Rich Websites Video on your website

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

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

Cremaschi - Media Rich Websites Video Option 1: upload file to your server Option 1: upload file to your server Typical code for hyperlinked file: Typical code for hyperlinked file: Hi, there Hi, there Typical code for embedded file Typical code for embedded file

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

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

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

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

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

Cremaschi - Media Rich Websites Photos Picasa perks: Picasa perks: PC: Free downloadable Picasa application for editing your photos and uploading them to your Picasa easily from your PC 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 Mac: Free plug in application for iPhoto for uploading photos to your Picasa account

Cremaschi - Media Rich Websites Useful tools: contact forms Contact forms Contact forms Example: Example:

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

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

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

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

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

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

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

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

Cremaschi - Media Rich Websites Sponsored links Example: Example:

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

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

Cremaschi - Media Rich Websites A blog

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

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

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

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