Learning the Yahoo! User Interface Library – Book Review

Tuesday, 10th June 2008 in Development by Simon | No comments

by Dan Wellman

Synopsis

Learning the Yahoo! User Interface Library book coverThe Yahoo! User Interface (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. The YUI Library also includes several core CSS resources. All components in the YUI Library have been released as open source under a BSD License and are free for all uses.

This book covers all released components whether utility, control, core file, or CSS tool. Methods of the YAHOO Global Object are used and discussed throughout the book. The basics of each control are presented, along with a detailed example showing its use to create complex, fully featured, cross-browser, Web 2.0 user interfaces.

Besides giving you a deep understand of the YUI library, this book aims to expand your knowledge of object-oriented JavaScript programming, as well as strengthen your understanding of the DOM and CSS.

The core aim is to teach you how to create a number of powerful JavaScript controls that can be used straight away in your own applications.

Download

Download the latest YUI version, including full API documentation and more than 250 functional examples from Sourceforge.

The library’s developers blog frequently at the YUI Blog and the YUI Library community exchanges ideas at YDN-JavaScript on Yahoo! Groups.

Book Review

The Yahoo! User Interface Library sits comfortably amongst its peers, which, along with many others, include Prototype, jQuery and Mootools. Arguably it can be said that the YUI library is the king among the JavaScript and CSS-libraries. With a vast number of well documented examples and near 100% compatibility amongst modern browsers, it would be difficult to find a comparable library.

It is one thing to be a well documented library, but it is another to know how to use the libraries to construct a user interface. This is the niche Dan Wellman fills with his book. Although not necessarily for the beginner, since you need a knowledge of CSS, JavaScript and a little AJAX, Wellman does a good job of explaining the concepts, especially AJAX, from scratch.

Wellman provides an A-to-Z of the library and assumes, rightly, that the reader has little or no knowledge of the library. To that effect, he does a long introduction of the YUI, following an overall review of its components, listing them in the first chapter. He then picks up a selection of some of the most established utilities, for example navigation, animation and AJAX utilities and in the following chapters he covers one or two examples for each of them.

Importantly, the book teaches the reader how to not only use the DOM manipulation and event handling aspects of the library, but also the CSS tools of the library.

Wellman does a good job of introducing the technical aspects at the beginning of each chapter, but not dwelling too long before moving on to real usage and methods.

What I would have liked to have seen is more interaction between different components written about in the book. Clearly building a fully-featured application that incorporates most or all of the key components would be unweildy, but individual and isolated examples doesn’t equate real-world scenarios either. For example, it is quite conceivable that autocomplete and drag-and-drop components would be utilised on the same page; it would have been good if Wellman had explained the pains or pitfalls that may be encountered with such combinations. The negativity aside, the examples are of a good quality.

The book does contain a number of errors, but since this is the first edition you can probably forgive the editors from missing them.

A major gripe I have with this book, indeed all technical books is the lack of colour throughout. It is far easier to read and understand the example code when code colouring is employed, allowing for easier understanding of the key elements in the code. Surely modern publishing techniques can mitigate against the extra cost of colour. Indeed, I would pay more for a well-written coloured technical book.

A great summary chapter on graceful degredation versus progressive enhancement would also have been welcomed, since many developers may not consider the usability and accessibility issues of using JavaScript.

This book is certainly a good read for anyone who has basic knowledge of JavaScript, HTML and CSS and who wants to learn how to apply the YUI library in their projects, making them more interactive for the user.

The Empire Strikes a Bleak Scene

Saturday, 10th May 2008 in Design by Simon | No comments

A long time ago in a galaxy far, far away…or more accurately, France, the forces of good and evil do battle once more.

It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.

During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the Death Star, an armored space station with enough power to destroy an entire planet.

Pursued by the Empire’s sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy…

No, it’s not the seventh instalment, by George Lucas, of the Star Wars series, it’s a collection of striking images, created by Cédric Delsaux, involving characters from the franchise in bleak surroundings.

They include robots C-3PO and R2-D2 checking out a smashed up Citroen, overweight crimelord Jabba the Hutt in a derelict room and bounty hunter Jango Fett holding up a car.

Urban Star WarsUrban Star WarsUrban Star WarsUrban Star Wars

(click on the images for more detail)

Darth Vader is also pictured swinging his red lightsaber against a sinister-looking building while Stormtrooper snipers prowl on the roof.

And fans of X-wing fighters and Imperial Walkers have also been catered for in the stunning images.

The Force was clearly strong with French photographer Cédric Delsaux. He also managed to give his photographs a crisp science fiction feel despite the stark urban backdrops in them.

Firstly, Delsaux captured bleak landscapes in Paris and Lille, and then photographed the models, which were between 20cm and 40cm tall. He then merged the two using a computer.

I decided to mix together the common suburbs and some fantastic characters, which I think has created something poetic.

Adam Lamping, of fans’ website jedinews.co.uk, said: “It’s such an unusual thing to see Star Wars characters from this galaxy far, far away juxtaposed with everyday suburban scenes. The pictures of the Emperor’s Royal Guard are particularly impressive with the red against the dark grey skies. It’s been captured perfectly.”

You can see the entire set on Cédric Delsaux’s website.

Why Silverlight? Microsoft Explains…

Thursday, 13th December 2007 in Development, Technology by Simon | 3 comments

Silverlight aims to compete with Adobe Flash and the presentation components of AJAX. It also competes with Sun Microsystems’ JavaFX, which was launched a few days after Silverlight.

Microsoft Silverlight is a proprietary runtime for browser-based Rich Internet Applications, providing a subset of the animation, vector graphics, and video playback capabilities of Windows Presentation Foundation. The runtime is available for Microsoft Windows and Mac OS X, with Linux support under development via the third-party Moonlight runtime.

Microsoft describes its advantages as follows:

Compelling Cross-Platform User Experiences

  • Deliver media experiences and rich interactive applications for the Web that incorporate video, animation, interactivity, and stunning user interfaces.
  • Seamless, fast installation for users, thanks to a small, on-demand, easy-to-install plug-in that is under 2 megabytes (MB) in size and works with all leading browsers.
  • Consistent experiences between Windows-based and Macintosh computers without any additional installation requirements.
  • Create richer, more compelling Web experiences that take greater advantage of the client for increased performance.
  • Stunning vector-based graphics, media, text, animation, and overlays that enable seamless integration of graphics and effects into any existing Web application.
  • Enhance existing standards/AJAX-based applications with richer graphics and media, and improve their performance and capabilities by using Silverlight.

Flexible Programming Model with Collaboration Tools

  • Based on the Microsoft .NET Framework, Silverlight enables developers and designers to easily use existing skills and tools to deliver media experiences and rich interactive applications for the Web.
  • Simple integration with existing Web technologies and assets means Silverlight works with any back-end Web environment or technology. No “rip and replace” required.
  • Silverlight integrates with your existing infrastructure and applications, including Apache, PHP, as well as JavaScript and XHTML on the client.
  • Choice of development languages including JavaScript, Ruby, Python, C#, Visual Basic .NET, and more.
  • Role-specific tools for both designers and developers that take advantage of Web standards and the breadth of the Microsoft .NET connected software features.
  • For designers: Microsoft Expression Studio for creating interactive user interfaces and media rich experiences, preparing media for encoding and distribution, and creating World Wide Web Consortium (W3C) standards-compliant sites using modern XHTML, XML, XSLT, CSS, and ASP.NET.
  • For developers: Microsoft Visual Studio for developing client and server code with full Microsoft IntelliSense, powerful cross-platform debugging, rich language support, and more.
  • Consistent presentation model by using XAML, the declarative presentation language used in Windows Vista–based applications. Controls, visual designs, media, and other elements can be presented with full design fidelity in both Silverlight and Windows-based applications.
  • Extensible control model makes it easy to add rich content and behaviors while enabling efficient code-reuse and sharing.
  • Dramatically improved performance for AJAX-enabled Web sites with the power, performance, and flexibility of Silverlight and .NET-connected software.

High Quality, Low Cost Media

  • Unified media format that scales from high definition (HD) to mobile with Windows Media Video (WMV), the Microsoft implementation of the Society of Motion Picture and Television Engineers (SMPTE) VC-1 video standard, as well as support for Windows Media Audio (WMA) and MP3 audio.
  • Add vector-based graphics and overlays to media with support for integration of graphics that scale to any size and broadcast-style overlays for tickers and closed captioning.
  • Flexible ad-insertion solutions with video and animation, including the ability to deliver fluid, broadcast-style video or animated advertisements without loss of visual fidelity or motion quality.
  • Lower-cost media streaming with Emmy Award winning Windows Media technologies that can lower the cost of streaming delivery by up to 46%, and enjoy the flexibility to work with your existing Windows Media streaming deployments. Even further cost reductions are possible with the upcoming Microsoft Internet Information Services (IIS) Media Pack for Microsoft Windows Server 2008.
  • Broad ecosystem of media tools, servers, and solutions compatible with the Windows Media operating system.
  • Microsoft PlayReady content-access technology that delivers a single solution for digital rights management support on both Windows-based and Macintosh computers for content providers (coming in Silverlight 1.1)
  • Powerful encoding tools for live and on-demand publishing of media experiences with Microsoft Expression Encoder, including hardware-accelerated encoding of WMV and VC-1 at up to 15 times the performance of software alone when paired with a Tarari Encoder Accelerator board.

Connected to Data, Servers, and Services

  • Mash-up and incorporate services and data from the Web by taking advantage of the Silverlight support for LINQ while accessing that data with common protocols like JSON, RSS, POX, and REST.
  • Increase discoverability of rich interactive application (RIA) content that can be indexed and searched due to the text-based XAML format that describes interface and content in a Silverlight-based application.
  • Rapidly scale applications with Silverlight Streaming by Windows Live to host and integrate software services and media content.

Streaming audio and video

  • Silverlight Streaming by Windows Live offers a free streaming and application hosting solution for delivering high-quality, cross-platform, cross-browser, media-enabled rich interactive applications (RIAs). With the ability to author content in Microsoft Expression Encoder and other third-party editing environments, Web designers maintain complete control of the user experience.

Web 2.0 and Beyond with Silverlight and XAML

Monday, 10th December 2007 in Development by Simon | 5 comments

Microsoft is finally making real efforts to woo the designer community who have traditionally worshipped the Adobe and Mac product ranges. One new product that addresses this previously overlooked community is Silverlight, which uses the XAML technology and is touted as Microsoft’s Flash killer. For anyone who is keen to listen, Microsoft proposes that Silverlight will achieve similar results to Flash, but it does so in an entirely different way and has different aims. So, the big question is, will Microsoft be able to break the dominance of Adobe’s Flash platform, that is available on the PC, Mac and mobile devices alike? I’m sure the jury is out on that one, but it can be said it is an uphill task.

So what is Silverlight and XAML proposition? How does it vary from Flash?

Microsoft Silverlight is a proprietary runtime for browser-based Rich Internet Applications, providing a subset of the animation, vector graphics, and video playback capabilities of Windows Presentation Foundation. The runtime is available for Microsoft Windows and Mac OS X, with Linux support under development via the third-party Moonlight runtime.

Not much difference to Flash so far…

Extensible Application Markup Language (XAML) is a declarative XML-based language used to initialize structured values and objects. XAML is used extensively in the .NET Framework 3.0 technologies, particularly in Windows Presentation Foundation (WPF), where it is used as a user interface markup language to define UI elements, data binding, eventing, and other features, and in Windows Workflow Foundation (WWF), in which workflows themselves can be defined using XAML.

Not much difference to Adobes’s MXML…

Browser support…

A frequently asked question is which browsers and operating systems will it run on? If XAML is limited in this area, its usefulness in the web world will also be significantly limited. Previous encarnations of XAML, were limited and justifiably criticised as it would only work with an ActiveX control. However, this has now been resolved with support for Firefox, Opera, Safari and Netscape, Windows and OSX alike. Support is provided by a downloadable plugin, much like Flash!

Like Flash…

Silverlight enables web developers to create visually rich user interfaces and animations, play video clips and stream media within the web page, again, much like Flash! But it is different! The comparison doesn’t end there. Animations are organised using timelines and frames within the tool…how else would you organise an animation without timelines?!

Like Flex…but not!

Where things differ from Flash are the tools used to develop the Silverlight applications. Silverlight is supposed to be a way of designing and building rich user interfaces. However, standard HTML elements are missing. The way you design a particular interface is to build a standard HTML form in your favourite editor, e.g. Dreamweaver CS3, and then open this page in Silverlight to add the visual enhancements that your design requires. This sounds complicated to say the least. In comparison, Flash has a brilliant tool and framework called Flex that does this far more gracefully and with the development of Thermo, designers can really feel comfortable in the web application development mix.

Silverlight applications will also run on mobile devices, but the plan is for the applications to only run within a mobile web browser. This is unlike Adobe who are feaverishly developing the AIR runtime to allow Flash applications to run independently of the browser environment and offline.

So, Web 2.0 and beyond with Silverlight and XAML may be somewhat jumping the gun. You may say that there is nothing new or innovative with the Silverlight offering. It does, however, serve to emphasise how important the Rich Internet arena is becoming or indeed has become.