Posts Tagged ‘Silverlight’

« Older Entries
Newer Entries »

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

5 comments »

Posted in Misc

Tags:

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

8 comments »

Posted in Misc

Tags:

MSN Silverlight Toolbar

November 24th, 2008

tmpD96

The  New MSN Toolbar Powered by Silverlight 2 should be seen as a good example in UX Widgetization and RIA Web Widgets. because it takes Web Clip Widgets beyond what you can see with IE8 Web Slices and shows how RIA Web Tech can be used to get more engaging user experiences.

This is of course relative. but there is no doubt that this Toolbar is different than any other thanks to how it is made and how it behaves when used.

tmpD9B

A Toolbar Like this could represent a glimpse on how Widgets can get more integrated to the browser without feeling them disjointed like with Opera Widgets or limited like with the Google Toolbar Gadgets.

The MSN Toolbar should be offering its flashiness to more people soon as it is now going to be distributed by Sun Java Installs instead of the Google Toolbar. a really cool “Two Birds With One Stone” strategy since it will bring Enhanced MSN Search but also will spread Silverlight 2 around more.

MSN Toolbar (IE Only)

No comments »

Posted in Misc

Tags:

Silverlight 2 is out

October 15th, 2008

image

Yes, FINALLY. Silverlight 2 is no out and while it didn`t managed to get released a month ago as originally planned. now it is out and there is tons of good stuff in it:

Cross Platform / Cross Browser .NET Development

Silverlight 2 is a cross-platform browser plugin that enables rich media experiences and .NET RIAs (Rich Internet Applications) within the browser.

Silverlight 2 is small in size (4.6MB) and takes only 4-10 seconds to install on a machine that doesn’t already have it.  It does not require the .NET Framework to be installed on a computer to run – the Silverlight setup download includes everything necessary to play video or run applications.

Developers can write Silverlight applications using any .NET language (including VB, C#, JavaScript, IronPython and IronRuby).  Silverlight provides a rich set of features for development including:

  • WPF UI Framework: Silverlight 2 includes a rich UI framework that makes building rich Web applications much easier.  In includes a powerful graphics and animation engine, as well as rich support for higher-level UI capabilities like controls, layout management, data-binding, styles, and template skinning.  The WPF UI Framework in Silverlight is a compatible subset of the WPF UI Framework features in the full .NET Framework, and enables developers to re-use skills, controls, code and content to build both rich cross browser web applications, as well as rich desktop Windows applications.
  • Rich Controls: Silverlight 2 includes a rich set of built-in controls that developers and designers can use to quickly build applications.  The Silverlight 2 release includes core form controls (TextBox, CheckBox, RadioButton, ComboBox, etc), built-in layout management panels (StackPanel, Grid, Panel, etc), common functionality controls (Slider, ScrollViewer, Calendar, DatePicker, etc), and data manipulation controls (DataGrid, ListBox, etc).  All Silverlight controls support a rich control templating model, which enables developers and designers to collaborate together to build highly polished solutions.

  • Rich Networking Support: Silverlight 2 includes rich networking support.  It includes out of the box support for calling REST, WS*/SOAP, POX, RSS, and standard HTTP services.  It supports cross domain network access (enabling Silverlight clients to directly access resources and data from resources on the web).  It also includes built-in sockets networking support.

  • Rich Base Class Library: Silverlight 2 includes a rich .NET base class library of functionality (collections, IO, generics, threading, globalization, XML, local storage, etc).  It includes rich APIs that enable HTML DOM/JavaScript integration with .NET code.  It includes LINQ and LINQ to XML library support (enabling easy transformation and querying of data), as well as local data caching and storage support.  The .NET APIs in Silverlight are a compatible subset of the full .NET Framework.
  • Rich Media Support: Silverlight 2 includes built-in video codecs for playing high definition video, as well as for streaming it over the web (including both live and on-demand support).  Silverlight includes support for adaptively switching video bitrates on the fly based on network conditions (enabling users to avoid seeing the dreaded "buffering…" message), placing and metering ads within video streams, as well as enabling content protection.

The final Silverlight 2 release delivers a tremendous amount of power and flexibility that enables you to really push the boundaries of what can be done in a browser, and enable great end user experiences.

This are the main bits of the Silverlight 2 (no longer 2.0 but just 2) as explained by Scott Guthrie. huge release for Silverlight and huge release to put the RIA Web forward. a good example of a great Silverlight 2 web app is the new Silverlight based AOL E-mail. among many others.  but don`t worry. i already got several Silverlight 2 Widgets to show you later with lots of other stuff to check out on Silverlight and given that it has reached 200 million installs already (previous to this release). maybe it is time for you check it out if you don`t have done so already.

If you are already using Silverlight and got some Silverlight 1.0 widgets or apps running. don`t worry. this will not break those. only those using beta builds will need to be updated (SL2 B1, SL2 B2 and SL2 RC0)

Silverlight

via Scott Guthrie

 

5 comments »

Posted in Web 2.0, Widget Development

Tags:

Website maintained by Happy Shoe Media LLC