you deserve a (media)-rich website alejandro cremaschi university of colorado at boulder

You Deserve a You Deserve a (Media)-Rich Website(Media)-Rich Website

Alejandro CremaschiAlejandro Cremaschi

University of Colorado at BoulderUniversity of Colorado at Boulder

http://www.alejandrocremaschi.comhttp://www.alejandrocremaschi.com

Cremaschi - Media Rich Websites

AssumptionsAssumptions

You already have a studio websiteYou already have a studio website You have a webmasterYou have a webmaster You maintain it yourselfYou maintain it yourself

OR…OR… You are considering starting a studio You are considering starting a studio

websitewebsite Through a company or web designerThrough a company or web designer YourselfYourself


GoalsGoals

To show you…To show you… How to add TOOLS and CONTENT that will How to add TOOLS and CONTENT that will

make your website more useful and completemake your website more useful and complete How to do this easily and inexpensively!How to do this easily and inexpensively!


Two websites…Two websites…

While beautiful, these two website don’t While beautiful, these two website don’t yet take advantage of these toolsyet take advantage of these tools

http://www.sabrinachang.com/http://www.sabrinachang.com/

http://www.vancouverpiano.com/http://www.vancouverpiano.com/


Tools I will cover…Tools I will cover…

Audio on your websiteAudio on your website Video on your websiteVideo on your website Photo albums on your websitePhoto albums on your website Useful tools such as…Useful tools such as…

Contact forms Contact forms Newsletter servicesNewsletter services Interactive calendarInteractive calendar Annotated and interactive mapAnnotated and interactive map


Tools I will cover…Tools I will cover…

Sponsored ads and links that will benefit Sponsored ads and links that will benefit your students and MAY produce profits for your students and MAY produce profits for youyou

A blog (web-log)A blog (web-log)


Tools I will not coverTools I will not cover

Flash-based sites and toolsFlash-based sites and tools Shopping carts and e-storesShopping carts and e-stores Nuts and bolts of blogsNuts and bolts of blogs


Definitions and clarificationsDefinitions and clarifications

Hosting servers: where sites are storedHosting servers: where sites are stored HTMLHTML Copy and pasting HTML codeCopy and pasting HTML code

Example with Nvu (“N-View”, free HTML Example with Nvu (“N-View”, free HTML editor, downloadable from www.nvu.com)editor, downloadable from www.nvu.com)


Audio on your websiteAudio on your website

Why?Why? Samples of your own playing Samples of your own playing ““Welcome” greeting to your websiteWelcome” greeting to your website Posting performances of your students for Posting performances of your students for

parents and familyparents and family Educational material (demonstration of Educational material (demonstration of

pieces, ear-training files, etc)pieces, ear-training files, etc)


Audio on your websiteAudio on your website

Sound file formatsSound file formats Uncompressed:Uncompressed:

.wav and .aiff.wav and .aiff Compressed (ideal for websites)Compressed (ideal for websites)

MP3 filesMP3 files Small and good qualitySmall and good quality My favorite program for converting files to MP3: My favorite program for converting files to MP3:

Audacity (free - for details see other presentation)Audacity (free - for details see other presentation)


AudioAudio

Option 1: Upload MP3 file to YOUR hosting Option 1: Upload MP3 file to YOUR hosting server. Then…server. Then… EITHER add a hyperlink to the file in your websiteEITHER 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 http://alejandrocremaschi.com/clipshttp://alejandrocremaschi.com/clips

OR embed file within your websiteOR embed file within your website Example: see playing controls to “Agitato” at Example: see playing controls to “Agitato” at

http://alejandrocremaschi.com/clips.htmhttp://alejandrocremaschi.com/clips.htm


AudioAudio

Option 1: Upload to your serverOption 1: Upload to your server Hyperlink typically looks like:Hyperlink typically looks like:

<a href="hello.mp3">Hello, there!</a><a href="hello.mp3">Hello, there!</a>

Embedded file typically looks like:Embedded file typically looks like: <embed src="hello.mp3" width="104" height="16" <embed src="hello.mp3" width="104" height="16"

controller="true"></embed>controller="true"></embed>


AudioAudio

Option 2: Upload and store file at Option 2: Upload and store file at EXTERNAL sites EXTERNAL sites

Then paste their player into your pagesThen paste their player into your pages Example: See the Hipcast.com sound Example: See the Hipcast.com sound

examples at: examples at: http://www.wholeoctave.com/newshttp://www.wholeoctave.com/news


AudioAudio

Option 2: External storageOption 2: External storage External sites offer storage for free or for a External sites offer storage for free or for a

monthly feemonthly fee Very easy to upload filesVery easy to upload files Convenient, easy-to-use players you can Convenient, easy-to-use players you can

paste in your pagepaste in your page


AudioAudio

Option 2: External storageOption 2: External storage Some audio storage providers:Some audio storage providers:

Hipcast.com Hipcast.com ($) allows you to even do the ($) allows you to even do the recording online through a microphone connected recording online through a microphone connected to your computerto your computer

BooMP3.com (free and $)BooMP3.com (free and $) Odeo.com Odeo.com (free)(free)


Video on your websiteVideo on your website

Why?Why? Samples of your own playing Samples of your own playing Posting performances of your students for Posting performances of your students for

parents and familyparents and family Educational material (tutorials on how to Educational material (tutorials on how to

practice, demonstration of pieces, etc)practice, demonstration of pieces, etc)



http://www.katzpianostudio.com/performances.asphttp://www.katzpianostudio.com/performances.asp

http://fisherpianostudio.com/piano-video.htmlhttp://fisherpianostudio.com/piano-video.html

http://masterworks.wordpress.com/piano-for-everyone/http://masterworks.wordpress.com/piano-for-everyone/



Video files are much larger than audio Video files are much larger than audio files!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). .flv (Flash video, used by YouTube).

Becoming most popularBecoming most popular Most will work just fineMost will work just fine


VideoVideo

Option 1: upload file to YOUR server and Option 1: upload file to YOUR server and thenthen Add a hyperlink to the video file in your web Add a hyperlink to the video file in your web

pagepage http://www.katzpianostudio.com/performances.asphttp://www.katzpianostudio.com/performances.asp

Embed video file in your web pageEmbed video file in your web page http://alejandrocremaschi.com/clips.htmhttp://alejandrocremaschi.com/clips.htm


VideoVideo

Option 1: upload file to your serverOption 1: upload file to your server Typical code for hyperlinked file:Typical code for hyperlinked file:

<a href="hello.mov">Hi, there</a><a href="hello.mov">Hi, there</a> Typical code for embedded fileTypical code for embedded file

<embed src="hello.mov" width="400" height="300" <embed src="hello.mov" width="400" height="300" controller="true"></embed>controller="true"></embed>


VideoVideo

Option 2: Store file at EXTERNAL storage. Option 2: Store file at EXTERNAL storage. Then paste their player in your pagesThen paste their player in your pages Example: Videos posted in my blog are stored Example: Videos posted in my blog are stored

in YouTube (by a third party in some cases) in YouTube (by a third party in some cases) http://alejandrocremaschi.com/wordpresshttp://alejandrocremaschi.com/wordpress


VideoVideo

Option 2: External storageOption 2: External storage Hipcast.com ($)Hipcast.com ($) YouTube.com (free)YouTube.com (free)

Public videos. Can be embedded in pagesPublic videos. Can be embedded in pages Unlisted videos. Only members you invite can Unlisted videos. Only members you invite can

watch by logging into YouTubewatch by logging into YouTube Blip.tv (free)Blip.tv (free)


Online photo albumsOnline photo albums

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


Online photo albumsOnline photo albums

Why use online photo album sites?Why use online photo album sites? Provide photos of your recital to your studentsProvide 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 externallyStored externally Easy to add or delete photos, edit and update Easy to add or delete photos, edit and update

albumsalbums Users can download or even print photosUsers can download or even print photos


PhotosPhotos

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


PhotosPhotos

Picasa perks:Picasa perks: PC: Free downloadable Picasa application for PC: Free downloadable Picasa application for

editing your photos and uploading them to editing your photos and uploading them to your Picasa easily from your PCyour Picasa easily from your PC

Mac: Free plug in application for iPhoto for Mac: Free plug in application for iPhoto for uploading photos to your Picasa accountuploading photos to your Picasa account


Useful tools: contact formsUseful tools: contact forms

Contact formsContact forms Example: Example:

http://alejandrocremaschi.com/contact.htmhttp://alejandrocremaschi.com/contact.htm



Contact forms. Why?Contact forms. Why? People can contact you or send you feedback People can contact you or send you feedback

easilyeasily Allows people to sign up for newsletters, etcAllows people to sign up for newsletters, etc Helps you build a database of customers Helps you build a database of customers



Contact forms. Free and paid form Contact forms. Free and paid form servicesservices Create form online and copy-paste the codeCreate form online and copy-paste the code

JotForm.com JotForm.com (free and $)(free and $) Bravenet.com (free [lots of ads] and $)Bravenet.com (free [lots of ads] and $)

Example with JotForm.com…Example with JotForm.com…


Useful tools: NewslettersUseful tools: Newsletters

NewslettersNewsletters ConstantContact.com ($15 a month)ConstantContact.com ($15 a month)

Write and email newsletters using online templatesWrite and email newsletters using online templates Maintain your subscriber’s list onlineMaintain your subscriber’s list online Copy and paste “Subscribe” form to your websiteCopy and paste “Subscribe” form to your website

Others: listbox.com , icontact.com , etcOthers: listbox.com , icontact.com , etc


Useful tools: calendarsUseful tools: calendars

Interactive calendarInteractive calendar Example of embedded calendar:Example of embedded calendar:

http://alejandrocremaschi.com/presentations.htmhttp://alejandrocremaschi.com/presentations.htm



Interactive online calendar featuresInteractive online calendar features People can subscribe to your calendar, or add People can subscribe to your calendar, or add

some of your events to their calendarsome of your events to their calendar People can map the location of your eventPeople can map the location of your event



Interactive calendarInteractive calendar Google Calendar or Yahoo Calendar (free Google Calendar or Yahoo Calendar (free

with account)with account) Google calendar:Google calendar:

Many great features (sync with mobile, import, Many great features (sync with mobile, import, export, reminders, etc)export, reminders, etc)

Allows you to embed your calendar into your Allows you to embed your calendar into your websitewebsite


Useful tools: annotated mapUseful tools: annotated map

Annotated interactive mapAnnotated interactive map Example: Example:

http://alejandrocremaschi.com/teaching.htmlhttp://alejandrocremaschi.com/teaching.html Why?Why?

Allows people to find your address and directions Allows people to find your address and directions quicklyquickly

You can alert people of things directly on the map:You can alert people of things directly on the map: ParkingParking StoresStores Road featuresRoad features


Useful tools: annotated mapUseful tools: annotated map

Google “My maps”Google “My maps” Allows you to create your OWN version of the Allows you to create your OWN version of the

mapmap Add icons, messages, landmarks, etcAdd icons, messages, landmarks, etc

Maps can be unlisted or publicMaps can be unlisted or public Copy and paste the link into your siteCopy and paste the link into your site (Demo…)(Demo…)


Sponsored linksSponsored links

Example: Example: http://http://alejandrocremaschialejandrocremaschi.com/.com/wordpresswordpress



Become an affiliate of SheetMusicPlus.comBecome 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 accountCreate an account Choose link or search box styleChoose link or search box style Copy the code and paste on your websiteCopy the code and paste on your website

8% to 12% sales commissions8% to 12% sales commissions You can check sales onlineYou can check sales online They mail you a check when $20 have accruedThey mail you a check when $20 have accrued



Others: Others: MusicNotes.com, Amazon.com, MusicNotes.com, Amazon.com,

BarnesAndNoble.comBarnesAndNoble.com


A blogA blog

http://garnerpiano.blogspot.com/http://garnerpiano.blogspot.com/

http://alejandrocremaschi.com/wordpresshttp://alejandrocremaschi.com/wordpress

http://angela-chans-piano-studio-blog.blogspot.com/http://angela-chans-piano-studio-blog.blogspot.com/


A blogA blog

A blog = a web logA blog = a web log Your public online journal or magazineYour public online journal or magazine A web page “on steroids” where you can A web page “on steroids” where you can

easily publish articles, photos, videos, easily publish articles, photos, videos, sound…sound…

People can “subscribe” to itPeople can “subscribe” to it


A blogA blog

Why a blog?Why a blog? Studio news and announcementsStudio news and announcements Educational blogs for your studentsEducational blogs for your students History blog (e.g. articles on composers for your History blog (e.g. articles on composers for your

students to read)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 Rewarding” good practice, best scales, etc with a

short article and photoshort article and photo Etc.Etc.


A blogA 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 Administrator login: allows you (the administrator) to

add, edit or delete your articlesadd, edit or delete your articles Your profileYour profile Links to all past articlesLinks to all past articles External links (e.g. to your website)External links (e.g. to your website) Search capabilitySearch capability Comment capabilities, that allow readers to leave Comment capabilities, that allow readers to leave

commentscomments A link for users to subscribe to the blogA link for users to subscribe to the blog


A blogA blog

You can get a FREE blog at many places You can get a FREE blog at many places such as:such as: Blogger.com (aka blogspot)Blogger.com (aka blogspot) Wordpress.comWordpress.com

Sign up and start writingSign up and start writing You can add a link to your blog in your You can add a link to your blog in your

regular web site. Usually: regular web site. Usually: username.blogspot.com username.blogspot.com

you deserve a (media)-rich website alejandro cremaschi university of colorado at boulder

Documents