Posts Tagged ‘Silverlight’

Hard Rock DeepZoom Silverlight Widgets

January 20th, 2009

tmp10BC

One of the first things that were showed back in Mix08 was the Hard Rock Memorabilia site that is a big wall of Musicians Memorabilia DeepZoom enabled and powered by Silverlight. back then Silverlight 2 was just a Beta and the site was a little rough. but it appears that they had quite a update when Silverlight 2 was officially released. now the site works marvelously cross browser and cross platform. but so does the widgets.

tmp10BF

Yes. that is right. now can have a widget out of the memorabilia of the artist you like if that is your desire. for example i will embed  Buddy Holly Glasses here in order to demo how does that looks.

The Memorabilia Widgets can only contain a item at a time and there is no size customization (you would have to set that by hand in the code). that is a shame. i truly wish you could share by artist too and had more customization choices.. but at least the widgets work very well and they look nice. they are also a must if you like the DeepZoom effect.

To get the widgets. just visit the Hard Rock memorabilia site and click to zoom in to a individual object to see the share option.

Hard Rock Memorabilia

PhotoZoom: Silverlight DeepZoom Enabled Photo Albums Widgets

January 15th, 2009

tmp10CD

One of the intrinsically positioned technologies that caught notoriety thanks to the introduction of Silverlight was without a doubt Seadragon. also known as DeepZoom that its the technology Operative name. If you are in Windows you can easily create DeepZoom enabled photo albums powered by Silverlight thanks to DeepZoom Composer. but if you are in other operative system or you have a old machine. you are not going to be able to use it from your desktop. that is when PhotoZoom enters to save the day and more.

What is DeepZoom?

But if you are still wondering what exactly is DeepZoom, then let me enlighten you fast on that. it is a technology that allows you to zoom into photos as much as you want or as much as your picture resolution allows you to. that is without worrying about the size of the picture getting in the way since you only load by section. it is a lot alike Live Maps when you zoom into a map and this one starts rendering things closer. but in this case it is rendering a section of the very same photo in layers. it is also helpful because you can then have a collage of pictures put into the same frame and then just zoom in and view the pictures as you see fit. in the order you want. as close as you want without ever having to transition elsewhere. those are the main principles of DeepZoom

What is PhotoZoom?

PhotoZoom is a Microsoft Live Labs project that allows you to the same you can do with DeepZoom Composer on your desktop but online. it also lets you keep up your Photos online in a service that precedes the new Windows Live Photos service. you can upload you photos and put them in albums that can be seen as DeepZoom Enabled Silverlight powered objects or as Photo Channels where you can also select to see the photos individually if you don`t want to see them powered by Silverlight.

Interested?.here is what you have to do?

1.-Load up the PhotoZoom page at http://photozoom.mslivelabs.com

2.-Log in with your Windows Live ID

3.-Choose your Photo Zoom Name

4.-Create a Album Name

5.-Load up your photos

tmp10F0

You can import from you computer or you can even import from a RSS feed in another  Online Photo Service. you could for example use your photoblog  feed or even a AlbumPhoto feed from Windows Live Photos. once you have added a feed or uploaded the pictures you want from your PC. just click import.

6.-Check out your PhotoZoom Album

tmp110E

For the sake of a good How-To and Review. i am going to use this nice album from my online buddy YungSang with a selection of Squirrel species.

tmp111B

You should be able to note i zoomed in as it is running with Silverlight and its DeepZoom enabled. a good thing to note is the part where it reads that you can “View Individual Photos”. just as i had told you. your photos are not trapped inside a Silverlight object. you can also see them as a group or individually if you want. that means you also get to share them that way. the only warning i must make is that PhotoZoom pcitures are meant to be public. so just have that in mind.

7.-Share it, Embed it

You can share your PhotoZoom Albums by Mail or also by embedding them into your blog, website or Social Network profile (if allowed)

Here it is a active version of the PhotoZoom Album as a Widget. so you can check it out. you can have it at whatever size you want by modifying the embed code. but you don`t need to resize it from the default size, because it can easily jump to full screen without any effort. this thanks to Silverlight. since this is a Live Labs project. it should be seen and reviewed as such. so i am only concentrating on what it already is. and i must say it is really good for having simple to use photo albums and photo album widgets.

Give a try.

PhotoZoom

How to build a widget – Deploying the widget

January 13th, 2009

[Part 4 in a 5 part series titled "How to build a widget"]

The code is written.  The widget is complete.  The idea you started with is neatly contained in the world’s greatest widget.  Now you just have to figure out how to get it to everybody.

Part 4) – Deploying the widget. 

Since widgets are “portable pieces of code”  you have to find a way to give this to all of your future fans.  Easy right?  Since the widget is just normally an HTML or Javascript snippet you can just trust that would be widget users know how to grab the code and embed it on their site.  Not Exactly.

The first step in deploying your widget is creating a web site.  The web site should at the very least allow potential widget owners to know what the widget does and allow then to copy the embed code.  An example of a very simple widget site is the very first widget I developed,  www.JunkIWant.com.   JunkIWant is a Amazon wishlist widget.   No Logins.  Nothing fancy.  Just a website that gives clear instructions on how to grab the widget code.

However, you can’t be certain that just because you supply the HTML/Javascript that a blog owner will know how to grab the code and embed it into their site.   This is where widget galleries and widget dashboards help out.

Widget galleries are sites like www.widgetbox.com and www.widgipedia.com.  These sites allow you to upload your widget and gives widget users an easy interface to grab the widget code.  There is a slight learning curve on uploading your widget, but each site has FAQs and forums to help you along.  The galleries also allow you to track widget installs and some domain specific stats.  They also showcase your widget in various galleries throughout the web.  For instance, www.widgetbox.com partners with many of the larger social sites like Picazo and Bebo. 

The only drawback with  gallery sites is that they take widget users away from your web page.

Widget dashboards are sites that like www.clearspring.com and www.gigya.com.  These sites differ from the gallery sites since they give you a widget dashboard to put on your own site.  The dashboard simplifies the embedding process with a very easy to use interface to grab the widget.  They also provide widget tracking and domain specific stats.  The proccess is pretty simple to add the dashboard to your site (the dashboards are widgets in their own right).  I actually use the www.gigya.com dashboard (Wildfire) on one of my widget sites,  www.MyVGift.com.

clearspring dashboard

clearspring dashboard

Widget galleries and widget dashboard sites greatly enhance the ability to deploy and distribute widgets.  And the best part all of the distribution tools mentioned are free to use.

So knock yourself out.  You spent alot of time on your widget.  You should use every tool available to make it as easy for your potential users to get a hold of your widget.

Next – Part 5 - Promoting the widget.

Part 1 | Part 2 | Part 3 | Part 4 | Part 5

How to build a widget – Creating the widget

December 26th, 2008

[Part 3 in a 5 part series titled "How to build a widget"]

You thought of an idea.  You chose the tech.  Now it is time to get busy.

Part 3) – Creating the widget. 

Widgets are self contained mini-websites and have to be treated the same way you would go about creating a website. 

[Quick definitions:  The "widget user" refers to the person grabbing the widget, while the "page visitor" refers to the person viewing the widget on the widget user's page/blog] 

First, determine if the widget will be static or dynamic.

Static widgets are widgets that are exactly the same for every widget user that grabs the widget code.  An election countdown widget would be an example of a static widget.  The widget developer (you) only has to create the desired effect and code it without relying on any dynamic data. 

Dynamic widgets are widgets that change for each widget user embedding the code.   MyVGift.com is an example of a dynamic widget.  The widget user is each assigned a unique ID that is rendered to the object tag at the time of the web page is served.  The widget then uses the ID to pull data from a web service to determine the widget user’s Virtual Gift list.

Static widgets are normally less complicated and can be deployed without much complication.  Dynamic widgets require external sources supporting and possibly storing data for the widget.

Whichever widget type you choose is entirely up to you.  There have been extremely succesfull widgets that are static:  Maukie the virtual cat and dynamic:  RateItAll

Maukie the virtual cat

Maukie the virtual cat

Second,  allow customization.

Someones blog or Myspace page is an expression of themselves.  Why would they want to install your ugly neon pink widget on their green background Myspace page?  Give widget users the ability to customize the size/shape/skin/wording of your widget.  Page visitors do not want to have your widget stand out (in a bad way) on the widget users page.  Give the widget users the option to allow the widget to blend into the look and feel of their site.

Finally,  make your widget friendly to the widget’s users page/blog.  This means make it small and available. 

Nobody wants to install a widget on their blog that is 2.3 megs.  This will kill the experience for the page visitor.  Generally try to make your widget size under 100K.  Also make sure you host your widget on a respectable server.  Your widget is going to be served up every time the widget user’s page is served.  This is orders of magnitude more times then if you were just hosting a web site on your server.  If a widget user installs your widget and gets 3k hits a day on their site, then the widget has to be able to be served up 3k times without any slowdown (plus support all of the other widget users).     

Next – Part 4 - Deploying the widget.

Part 1 | Part 2 | Part 3 | Part 4 | Part 5

How to build a widget – Choose the technology

December 6th, 2008

[Part 2 in a 5 part series titled "How to build a widget"]

Widgets in reality are actually like little mini-web sites contained on a users blog/social page.  The “embedded chunk” of code is hosted by the widget owner (you) but instead of just displayed on one location (your website), the widget is displayed virally on an infinite number if websites.

This “embedded chunk” requires some specialized tech to pull this off.

2)  Choose the technology

There are basically two categories of technologies used to create widgets:  HTML/JavaScript and third-party plug-ins.

HTML/JavaScript

A widget developer could craft the entire widget using HTML/JavaScript.  With the combination of AJAX and DHTML a developer can create at least 4 of the 5 categories of widgets (I am going to leave out the “Games” category since advanced animation is tough to deliver in a JavaScript environment. Agree/disagree?)  

HTML/JavaScript only relies on the browser to render the widget, making it the purest way to craft a web widget. 

Pros:
- JavaScript can encapsulate the “embedded chunk” of code to a small snippet.
- HTML/JavaScript is a coding common paradigm known by many web developers.

Cons:
- Many social sites forbid JavaScript since it could promote cross-scripting attacks.
- Animations and other rich content are very hard or impossible to reproduce using JavaScript.
- The HTML/JavaScript code could be seen by site visitors.

Third Party plug-ins

The other common source of widget development takes place as third party plug-ins.  The most popular third party widget platform is Adobe’s Flash. Flash allows the developer to create rich environments and user interfaces using their designer and ActionScript programming language.  Flash debuted as a third party technology in 1996 and has over 90% browser saturation.

Adobe Flash

Adobe Flash

 
Another third party widget platform gaining ground is Microsoft’s Silverlight.  Silverlight allows you to create rich environments and user interfaces using MS .NET platform.  Silverlight broke onto the scene in Dec 2006.

Flash still has more popularity as a widget platform due to its tenured status, but given the sheer volume of .NET programmers it may not be long before we see Silverlight as popular in widget development as Flash.

Pros:
- Flash is accepted by almost all blogs/social pages.
- Rich content and animation is very possible in Flash/Silverlight.
- Flash/Silverlight is much more locked down in terms of code visibility.
- Widget distribution sites generally favor Flash over JavaScript/HTML

Cons:
- Flash requires you to purchase Adobe’s Flash product to develop widgets.
- Learning .NET/ActionScript.
- Flash/Silverlight widgets are generally larger then HTML/JavaScript widgets in terms of download size.

When I was developing MyVGift.com Virtual gift widget I chose to use Flash for two reasons:  One, I wanted it to be able to be deployed on as many blog/social pages as possible (This ruled out HTML/Javascript).  Two, Flash is much more available (at present) then Silverlight.

I would like to possibly write my next widget using Silverlight since I have been working with programming Microsoft software for the last 14 years.  I strongly believe that Silverlight will play a major part in having widgets grow across the web in the coming years.

So if you are just writing a widget that is targeting Blog sites, HTML/JavaScript may be a good choice.  If your widget relies heavily on animation and you want it to have a wider reach, then Flash/Silverlight may be the option.

Next – Part 3 – Creating the widget.

Part 1 | Part 2 | Part 3 | Part 4 | Part 5

Website maintained by Happy Shoe Media LLC