Tuesday, December 9, 2008

YUI (Yahoo User Interface)

The Yahoo! User Interface Library (YUI)

The YUI Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. YUI is available under a BSD license and is free for all uses.

  1. What is the YUI Library?

    The Yahoo User Interface (YUI) Library is a coherent collection of JavaScript and CSS resources that make it easier to build richly interactive applications in web browsers. Some pieces of YUI, like the Event Utility, operate under the hood and are simply there to make in-browser programming easier. Others, like the Calendar Control, comprise visual widgets that can be placed on your page with a default look-and-feel.

  2. Why would I choose YUI?

    The YUI Library is free, licenced under a liberal BSD license that permits both commercial and non-profit use. YUI is backed by developers at Yahoo!, where YUI code is used and refined on pages viewed billions of times each day. YUI is increasingly comprehensive, well-documented, and supported by a growing community in the YUI forum

    YUI Dependency Configurator:

    Choose the YUI components you want to use on your page; beneath the button toolbars, the text area will update with the sorted dependency list required to power your desired components. By default, we'll use aggregate (rollup) files where possible and serve the files from yui.yahooapis.com. You can allow rollups and/or set your own base URL path if you choose. The Combine All JS Files option, on by default, generates a URL for your JavaScript files that combines them all into a single file, reducing HTTP requests. If you wish to use hosted files, you can choose between Yahoo and Google Content Delivery Networks. Yahoo's network supports combo-handling; Google's supports SSL.

    Getting Started

  1. Check out the examples of YUI in action. We recommend starting with the Event UtilityDom Collection examples; Event and Dom are part of the YUI Core (along with the YAHOO Global Object) and provide an important foundation for JavaScript developers using YUI. Once you've reviewed those foundational pieces, go on to explore utilities like Drag and Drop and Animation or UI controls like Button, Calendar and TabView. If you're interested in YUI's CSS components, read through the examples for Reset, Base, Fonts, and Grids in that order.
  2. Remember that there are full user's guides for each component here on the website. If you have any questions about a component as you play with the examples, check out the component's user's guide (by following any of the links along the left side of the page) or the searchable API documentation.
  3. Articles: You may also want to check out "Writing Your First YUI Application," an article designed to help you get up and running with YUI, and "Loading YUI: Seeds, Core, and Combo-handling," an article that explores the three most common strategies for including YUI on the page.
  4. You have cheat sheets for each component available on landing pages and downloadable as a full set. These documents support the online user's guides by providing concise print documentation for YUI components.
  5. Start building. You can include YUI scripts and CSS from the YUI download (in the download's /build directory) or directly from Yahoo! servers. The YUI Loader Utility is a client-side loading package that can dynamically pull in YUI scripts as needed, whether from your servers or from ours. And the YUI Dependency Configurator is a great way to calculate an optimized list of script/css includes for your particular implementation.
  6. Become a member of the YUI community. YUI developers and implementers share thoughts and solutions and provide a helping hand in our forums. YUI developers also contribute to the YUIBlog, where you'll find in-depth articles, videos and other great content about YUI and the world of frontend engineering.
and

Integration of JQuery in Dot Net.

jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. It was released January 2006 at BarCamp NYC by John Resig.
Dual licensed under the MIT License and the GNU General Public License, jQuery is free and open source software.

Both Microsoft and Nokia have announced plans to bundle jQuery on their platforms, Microsoft adopting it initially within Visual Studio and use within Microsoft's ASP.NET AJAX framework and ASP.NET MVC Framework whilst Nokia will integrate it into their Web Run-Time platform.

1 Features

2 Use
3 See also
4 References
5 Further reading
6 External links


Features
jQuery contains the following features:
DOM element selections
DOM traversal and modification, (including support for CSS 1-3 and basic XPath)
Events
CSS manipulation
Effects and animations
Ajax
Extensibility
Utilities - such as browser version and the each function.
JavaScript Plugins

Use
jQuery exists as a single JavaScript file, containing all the common DOM, Event, Effects, and Ajax functions. It can be included within any web page by using the following markup:

jQuery has two styles of interaction:
via the $ function, which is a factory method for the jQuery object. These functions are chainable; they each return the jQuery object
via $.-prefixed functions. These are functions which do not work in the jQuery object per se.
A typical workflow for manipulation of multiple DOM nodes begins with $ function being called with a CSS selector string, with results in the jQuery object referencing zero or more elements in the HTML page. This node set can be manipulated by applying instance methods to the jQuery object, or the nodes themselves can be manipulated. For example:
$("div.test").add("p.quote").addClass("blue").slideDown("slow");
…finds the union of all div tags with class attribute test and all p tags with class attribute quote, adds the class attribute blue to each matched element, and then slides them down with an animation. The $ and add functions affect the matched set, while the addClass and slideDown affect the referenced nodes.
The methods prefixed with $. are convenience methods or affect global properties and behaviour. For example, the following is an example of the map function called each in jQuery:
$.each([1,2,3], function() {
document.write(this + 1);
});
... writes 234 to the document.
It is possible to perform Ajax routines using the $.ajax and associated methods to load and manipulate remote data.
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});

jQuery and Microsoft

jQuery is a lightweight open source JavaScript library (only 15kb in size) that in a relatively short span of time has become one of the most popular libraries on the web.
A big part of the appeal of jQuery is that it allows you to elegantly (and efficiently) find and manipulate HTML elements with minimum lines of code. jQuery supports this via a nice "selector" API that allows developers to query for HTML elements, and then apply "commands" to them. One of the characteristics of jQuery commands is that they can be "chained" together - so that the result of one command can feed into another. jQuery also includes a built-in set of animation APIs that can be used as commands. The combination allows you to do some really cool things with only a few keystrokes.
For example, the below JavaScript uses jQuery to find all
elements within a page that have a CSS class of "product", and then animate them to slowly disappear:


As another example, the JavaScript below uses jQuery to find a specific
on the page with an id of "datagrid1", then retrieves every other row within the datagrid, and sets those elements to have a CSS class of "even" - which could be used to alternate the background color of each row:


Providing the ability to perform selection and animation operations like above is something that a lot of developers have asked us to add to ASP.NET AJAX, and this support was something we listed as a proposed feature in the ASP.NET AJAX Roadmap we published a few months ago. As the team started to investigate building it, though, they quickly realized that the jQuery support for these scenarios is already excellent, and that there is a huge ecosystem and community built up around it already. The jQuery library also works well on the same page with ASP.NET AJAX and the ASP.NET AJAX Control Toolkit.

Rather than duplicate functionality, we thought, wouldn't it be great to just use jQuery as-is, and add it as a standard, supported, library in VS/ASP.NET, and then focus our energy building new features that took advantage of it? We sent mail the jQuery team to gauge their interest in this, and quickly heard back that they thought that it sounded like an interesting idea too.

Supporting jQuery

I'm excited today to announce that Microsoft will be shipping jQuery with Visual Studio going forward. We will distribute the jQuery JavaScript library as-is, and will not be forking or changing the source from the main jQuery branch. The files will continue to use and ship under the existing jQuery MIT license.

We will also distribute intellisense-annotated versions that provide great Visual Studio intellisense and help-integration at design-time. For example:


and with a chained command:


The jQuery intellisense annotation support will be available as a free web-download in a few weeks (and will work great with VS 2008 SP1 and the free Visual Web Developer 2008 Express SP1). The new ASP.NET MVC download will also distribute it, and add the jQuery library by default to all new projects.

We will also extend Microsoft product support to jQuery beginning later this year, which will enable developers and enterprises to call and open jQuery support cases 24x7 with Microsoft PSS.

Going forward we'll use jQuery as one of the libraries used to implement higher-level controls in the ASP.NET AJAX Control Toolkit, as well as to implement new Ajax server-side helper methods for ASP.NET MVC. New features we add to ASP.NET AJAX (like the new client template support) will be designed to integrate nicely with jQuery as well.

We also plan to contribute tests, bug fixes, and patches back to the jQuery open source project. These will all go through the standard jQuery patch review process.

Summary

We are really excited to be able to partner with the jQuery team on this. jQuery is a fantastic library, and something we think can really benefit ASP.NET and ASP.NET AJAX developers. We are looking forward to having it work great with Visual Studio and ASP.NET, and to help bring it to an even larger set of developers.

For more details on today's announcement, please check out John Resig's post on the jQuery team blog. Scott Hanselman is also about to post a nice tutorial that shows off integrating jQuery with ASP.NET AJAX (including the new client templating engine) as well as ADO.NET Data Services (which shipped in .NET 3.5 SP1 and was previously code-named "Astoria").



Friday, December 5, 2008

Silverlight


Multimedia

Wiktionary, the free dictionary.Multimedia is media and content that utilizes a combination of different content forms. The term can be used as a noun (a medium with multiple content forms) or as an adjective describing a medium as having multiple content forms. The term is used in contrast to media which only utilize traditional forms of printed or hand-produced material. Multimedia includes a combination of text, audio, still images, animation, video, and interactivity content forms.

Multimedia is usually recorded and played, displayed or accessed by information content processing devices, such as computerized and electronic devices, but can also be part of a live performance. Multimedia (as an adjective) also describes electronic media devices used to store and experience multimedia content. Multimedia is similar to traditional mixed media in fine art, but with a broader scope. The term "rich media" is synonymous for interactive multimedia. Hypermedia can be considered one particular multimedia application.

Categorization of multimedia
Multimedia may be broadly divided into linear and non-linear categories. Linear active content progresses without any navigation control for the viewer such as a cinema presentation. Non-linear content offers user interactivity to control progress as used with a computer game or used in self-paced computer based training. Hypermedia is an example of non-linear content.

Multimedia presentations can be live or recorded. A recorded presentation may allow interactivity via a navigation system. A live multimedia presentation may allow interactivity via an interaction with the presenter or performer.


Major characteristics of multimedia
Multimedia presentations may be viewed in person on stage, projected, transmitted, or played locally with a media player. A broadcast may be a live or recorded multimedia presentation. Broadcasts and recordings can be either analog or digital electronic media technology. Digital online multimedia may be downloaded or streamed. Streaming multimedia may be live or on-demand.

Multimedia games and simulations may be used in a physical environment with special effects, with multiple users in an online network, or locally with an offline computer, game system, or simulator.

The various formats of technological or digital multimedia may be intended to enhance the users' experience, for example to make it easier and faster to convey information. Or in entertainment or art, to transcend everyday experience.


A lasershow is a live multimedia performance.Enhanced levels of interactivity are made possible by combining multiple forms of media content. Online multimedia is increasingly becoming object-oriented and data-driven, enabling applications with collaborative end-user innovation and personalization on multiple forms of content over time. Examples of these range from multiple forms of content on Web sites like photo galleries with both images (pictures) and title (text) user-updated, to simulations whose co-efficients, events, illustrations, animations or videos are modifiable, allowing the multimedia "experience" to be altered without reprogramming. In addition to seeing and hearing, Haptic technology enables virtual objects to be felt. Emerging technology involving illusions of taste and smell may also enhance the multimedia experience.

Microsoft Silverlight

Microsoft Silverlight is a programmable web browser plugin that enables features such as animation, vector graphics and audio-video playback that characterize rich Internet applications. Version 2.0, released October 2008, brings additional interactivity features and support for .NET languages and development tools. It is compatible with multiple web browser products used on Microsoft Windows and Mac OS X operating systems. Mobile devices, starting with Windows Mobile 6 and Symbian (Series 60) phones, will also be supported. A third-party free software implementation named Moonlight is under development to bring compatible functionality to GNU/Linux.
Overview
Silverlight provides a retained mode graphics system similar to Windows Presentation Foundation, and integrates multimedia, graphics, animations and interactivity into a single runtime environment. It is being designed to work in conjunction with XAML and is scriptable with JavaScript. XAML can be used for marking up the vector graphics and animations. Textual content created with Silverlight is searchable and indexable by search engines as it is not compiled, but represented as text (XAML).Silverlight can also be used to create Windows Sidebar gadgets for Windows Vista.

Silverlight supports playback of WMV, WMA and MP3 media content across all supported browsers without requiring Windows Media Player, the Windows Media Player ActiveX control or Windows Media browser plugins. Because Windows Media Video 9 is an implementation of the SMPTE VC-1 standard, Silverlight also supports VC-1 video, though still only in an ASF container format. Furthermore, the Software license agreement says VC-1 is only licensed for the "personal and non-commercial use of a consumer". Silverlight does not support playback of H.264 video, though support in future versions has been officially announced. Silverlight makes it possible to dynamically load XML content that can be manipulated through a DOM interface, a technique that is consistent with conventional Ajax techniques. Silverlight exposes a Downloader object which can be used to download content, like scripts, media assets or other data, as may be required by the application. With version 2.0, the programming logic can be written in any .NET language, including some common dynamic programming languages like Ruby and Python.
Releases

Silverlight 1.0

A Silverlight 1.0 application hosted in Internet Explorer. Interactivity is provided by Silverlight, but user input controls are HTML controls overlaid on top of Silverlight contentSilverlight 1.0, which was developed under the codename Windows Presentation Foundation/Everywhere (WPF/E), consists of the core presentation framework, which is responsible for UI, interactivity and user input, basic UI controls, graphics and animation, media playback, Digital rights management, and DOM integration. It is made up of the following components:

Input – handling input from devices like keyboard, mouse, stylus etc.
UI core – managing rendering of bitmap images (including compressed raster images like JPEG), vector graphics, text and animations.
Media – playback of MP3, WMA Standard, WMV7, WMV8 and WMV9/VC-1 streams.
XAML – to allow the UI layout to be created using XAML markup language.
A Silverlight application starts by invoking the Silverlight control from the HTML page, which then loads up a XAML file. The XAML file contains a Canvas object, which acts as placeholder for other elements. Silverlight provides various geometrical primitives like lines, ellipses and other shapes, to elements like text, images, and media etc. The elements are properly positioned to achieve the desired layout. Any arbitrary shape can be created as well. These elements can be animated using Event triggers; some animation effects are predefined, others can be created as composite of the pre-defined effects. Events like keyboard or mouse movements can also raise Events which can be handled by custom scripts.

Programmatic manipulation of the UI is achieved by using scripting languages to modify the Document Object Model of the Silverlight Canvas object. To facilitate this, Silverlight exposes a DOM API, accessible from any scripting language supported by Silverlight, which in version 1.0 release is limited to JavaScript running in the browser. However, there are no UI widgets built in. The native widgets of the browser must be overlaid on top of the Silverlight Canvas for user input. Support for data formats is limited to XML and JSON only.


Silverlight 2

A Silverlight 2 application hosted in Internet Explorer.Version 2.0 brings improved interactivity and support for .NET languages and development tools.

Silverlight 2.0 (previously referred to as version 1.1) includes a version of the .NET Framework, implementing the same full Common Language Runtime version as .NET Framework 3.0; so it can execute programs written in any .NET language (however you can not reference assemblies compiled with the regular .NET Framework by default). Unlike the CLR included with .NET Framework, multiple instances of the CoreCLR included in Silverlight can be hosted in one process. With this, the XAML layout markup file (.xaml file) can be augmented by code-behind code, written in any .NET language, which contains the programming logic. It can be used to programmatically manipulate both the Silverlight application and the HTML page which hosts the Silverlight control. The XAML markup as well as the code, is compiled into .NET assemblies which are then compressed using ZIP and stored in a .xap file.

Silverlight ships with a lightweight class library which includes features such as extensible controls, XML Web Services, networking components and LINQ APIs. This class library is a subset of, and is considerably smaller than, .NET Framework's Base Class Library. Silverlight code runs in a sandbox, thus preventing the invocation of platform APIs.


A set of Silverlight controls rendered with different skinsThe version of .NET Framework in Silverlight adds a subset of WPF UI-programming model, including support for shapes, documents, media and animation objects of WPF. Beta 2 onwards,[15] it ships with more than 30 UI controls (including TextBox, CheckBox, Slider, ScrollViewer, and Calendar controls), for two-way databinding support, automated layout management (by means of StackPanel, Grid etc) as well as data-manipulation controls, such as DataGrid and ListBox. UI controls are skinnable using a template-based approach. Third-party libraries of expanded UI-control sets are also available.


Silverlight 2 ArchitectureThe included Base-Class Library (BCL) provides classes for collections, reflection, regular expressions, string handling and data access. It also supports LINQ, with full support for LINQ to Objects and expression trees. Almost all of the System.LINQ and System.LINQ.Expression namespaces are exposed. It also supports serialization of objects, for data persistence. Silverlight can handle data in RSS or JSON format, in addition to XML. The BCL provides enhanced support for working with XML data, including the XMLReader and XMLWriter classes. Silverlight 2 also supports asynchronous programming via the use of the threading libraries.

Silverlight also includes classes for data access over XML-based Web services, REST, WCF Services and ADO.NET Data Services. The networking support in Silverlight can be used by Silverlight applications to communicate using HTTP, or at the lower socket level. Cross-domain communication is supported. Silverlight uses an XML-based configuration file to control the cross-domain resource-access policy, for both HTTP and socket connections. It can be used by site administrators to control which resources a Silverlight application can access, when that application did not originate in the domain of the site. In addition, Silverlight also supports the Adobe Flash cross=domain-policy file format. Silverlight sockets can only initiate a connection; they cannot listen for connections.


A Python interpreter in Silverlight 2 hosted in Mozilla FirefoxSilverlight 2 includes the Dynamic Language Runtime (DLR) which allows dynamic compilation and execution of dynamic (scripting) languages. Compilers for the languages based on the DLR (including IronPython and IronRuby) are [to be?] packaged with the DSL app in the .xap package. The DSL SDK includes a web server named Chiron, that can dynamically package all the dependencies for the DSL application and serve it to the browser. The first upcoming languages written for the DLR are Managed JScript, IronPython 2.0, and IronRuby. Microsoft also plans to build Visual Basic .NET 10.0 (VBx) on the DLR. All four languages share the same infrastructure, to allow Silverlight to compile and execute the language source. Conversely, other .NET languages must be compiled ahead-of-time and delivered to Silverlight as .NET assemblies. The implementation of Managed JScript conforms to the ECMAScript 3.0 specification, and Microsoft claims that it is 250 times faster than interpreted JScript.

With the integration of .NET Framework, Silverlight also allows HTML-managed code interaction, which enables the manipulation of HTML DOM elements from managed code, and permits JavaScript code to call managed code and use objects instantiated by managed code. Silverlight encloses JavaScript objects and DOM elements in managed wrappers to make them available from managed code.While there is no provision for calling JavaScript code directly in the 1.1 alpha release, managed-code events can fire JavaScript handlers. A Silverlight instance does not need to have a UI component in order to manipulate the HTML DOM from managed code. It is done by creating an XAML Canvas with both width and height set to zero, and using its code-behind code to modify the Document Object Model of the HTML page via the APIs in the System.Browser namespace.


A Silverlight 2 application using DeepZoom, running in Safari 3.1, on Windows XPSilverlight 2 includes Deep Zoom, a technology derived from Microsoft Live Labs Photosynth. It allows users to zoom into, or out of, an image (or a collage of images), with smooth transitions, using the mouse wheel. The images can scale from 2 or 3 megapixels in resolution into the gigapixel range, but the user need not wait for it to be downloaded entirely; rather, Silverlight downloads only the parts in view, optimized for the zoom level being viewed. Beta 2 onwards, Deep Zoom uses an XML-based file format.

New media features in Silverlight 2 include:

WMA Professional support, including new WMA 10 Pro low-bitrate modes, although multi-channel audio content is still restricted to stereo playback
Content protection powered by Microsoft PlayReady DRM client
Server-side playlists in Windows Media Services
Media Stream Source API
The Media Stream Source is a powerful API that's responsible for enabling another much-talked-about feature: adaptive streaming of media. Adaptive streaming allows the player application to choose the bit rate of the media based on available client bandwidth and CPU resources. Media Stream Source allows the developer to specify a custom method of retrieving media data, the only requirement being that the final video and audio streams be presented to Silverlight runtime in a format that Silverlight can decode (VC-1, WMA, MP3, etc). This allows extensible support for otherwise natively unsupported file formats (i.e. MP4, Matroska, Ogg), protocols (i.e. Shoutcast) and delivery methods (i.e. adaptive streaming, P2P). Microsoft first publicly showcased the power of Media Stream Source by powering the NBC Olympics website with their own implementation of adaptive streaming.