Showing posts with label Yahoo Inc.. Show all posts
Showing posts with label Yahoo Inc.. Show all posts

Thursday, November 15, 2007

Add meaning to Web pages with microformats

One thing that makes the Web so interesting is that it’s constantly changing, as new technologies and techniques are introduced on an almost daily basis. A technology that has gathered steam the past couple years is microformats. Microformats allow you to add context to existing information contained within a Web page.

The semantic Web

The semantic Web is an evolving extension of the Web. It says that Web content can be expressed not only in natural language, but also in a format that can be read and used by software agents. This allows the software agents to more easily find, share, and integrate information.

While the semantic Web is designed for machines first, microformats are designed for humans first. The goal of microformats is to create a web of data that anyone can publish, consume, and so forth. There is a low barrier to entry for the microformats concept, so anyone with an understanding of XHTML can easily publish their own microformats.

What are microformats?

Microformats provide a more formalized technology for adding commonly used semantics to today’s Web. Microformats are a set of open data formats that use existing technology and standards, most notably XHTML. The microformats site makes the following assertions about the technology:

  • Microformats are a way of thinking about data.
  • Microformats are design principles for formats.
  • Microformats are adapted to current behaviors and usage patterns.
  • Microformats are highly correlated with semantic XHTML.
  • Microformats are a set of simple data formats that many are actively developing and implementing.

A key concept is the usage of existing technologies (such as XHTML) that have been well tested. This allows developers to focus on the data as opposed to the technology.

Microformats in practice

A common application of microformats is providing contact or event data. The hCard microformats specification provides a guideline for including contact data within a Web page.

The hCard standard is a simple, open, and distributed format for representing people, companies, organizations, and places. It closely follows the vCard standard. The hCard standard defines specific elements for defining pieces of data.

The different data elements are specified using the class attribute (all class names are lowercase). The complete contact card is comprised by the vCard class, so this class is applied to a DIV element that contains the complete contact information. Individual data elements on the card are designated with the appropriate class name. For example, a person’s state is designated by the region class.

The following listing provides a look at a possible hCard for myself. It lists my name, organization (TechRepublic.com), city (Louisville), state (Kentucky), and country (USA).


Tony Patton
TechRepublic.com


Louisville,
KY
USA

I could easily include this data in a Web page since it is standard XHTML. The data could be easily read by other applications that understand the hCard format. Also, the data could easily be formatted for presentation using standard CSS since the data is contained within basic XHTML.

The hCard Creator tool provides an easy way to assemble the appropriate hCard for a contact. Another common use of microformats is for providing information about events. This is accomplished with the hCalendar format.

The hCalendar specification is an open standard based on the iCalendar standard. The hCalendar format follows the approach used by the hCard standard; that is, class names are used to tag data elements.

The complete event is contained within a DIV element and assigned the vevent class name. Individual aspects of the calendar entry are contained within this DIV element. The start and end dates are marked by the dtstart and dtend class names with the title attribute containing the full date. The following illustrates a sample event for last week’s Web Development column.



November 6th,
2007
Web Development

Weekly Web Development column.

The hCalendar Creator is available for marking up your own calendar entries. (Note: I could not get it to work in Internet Explorer 7, but it worked fine in Firefox.) Like hCard data, you can easily present the data on a Web page and style it with CSS — while the data is still available in the hCalendar format for use by other applications.

Industry support

I’m happy to say that the IT industry is finally starting to embrace microformats. Yahoo! has been a big proponent of microformats from its inception. In addition, the Eventful site uses them, as does the photo-sharing site Flickr. Even Microsoft recognizes the technology, as proven in this blog post about using microformats with SharePoint. The Twitter site also embraces the hCard standard. Firefox offers the Operator add-on to provide microformats support within the browser.

There are various tools for working with microformats in numerous development languages. A good example is Sumo, which offers a microformats parser for the JavaScript language. A Perl module is available with the Text::Microformat, which offers a microformat parser for Perl.

Adding context

A key concept of the microformats technology is that they are designed for humans first and machines second. The sole purpose of microformats is to create larger, more reliable webs of data, published by more people. The microformats approach is the low-cost, efficient way to build a web of data. Learn more about the various microformats currently available on the microformats site as well as those covered in this article.


Tuesday, November 6, 2007

Build powerful Web applications via the Yahoo Developer Network

The community aspect of the Internet has changed the way we work. Developers can quickly get answers to their questions by way of a Google search, or learn new techniques and technologies via countless Web sites, blogs, and so forth. One site I recently discovered is the Yahoo! Developer Network. While it offers lots of API's for utilizing Yahoo! features, it also includes plenty of generic Web development resources.

What is it?

An initial perusal of the site can be a bit overwhelming, but it offers a variety of cool stuff for Web developers. Yahoo! describes the purpose of the site as helping software developers integrate Web sites and applications with Yahoo! using standard technologies such as XML and RSS.

YUI Library

The Yahoo! Developer Network offers tools and sample code for working with Yahoo! applications like Yahoo! Finance, Maps, and Messenger, as well as Flickr and HotJobs. The tools include RSS feeds and API's for utilizing application services, but I want to concentrate on the Yahoo! User Interface (YUI) Library.

Yahoo! describes the YUI Library as a set of utilities and controls, written in JavaScript, for building richly interactive Web applications using techniques such as DOM scripting, DHTML, and AJAX. It provides a set of components for adding specific functionality to a Web application. The components are available as open source via a BSD license.

The components are available in one download, which is comprised of one compressed file. You can extract it to install the library; it includes documentation, sample code, and the source code for each component. Let's take a closer look at one of the components to get a feel for what is available.


Calendar

Providing a calendar is a common requirement for Web applications. The calendar component provides a powerful solution to such requirements. It is very flexible, allowing it to be configured to meet just about any scenario. The following resources of the YUI Library are necessary to use the calendar:

  • The Yahoo global object is available in the yahoo.js file in the build/yahoo directory of your YUI Library installation. It provides a single global namespace within which all YUI Library code resides. It must be included on every page that utilizes the YUI Library, and it must appear before any of the other YUI components.
  • The Event utility (event.js file) includes code to handle events. It is located in the build/event directory of your YUI Library installation.
  • The DOM Collection (dom.js file) provides code for working with the HTML DOM. It is located in the build/dom directory. It comprises a family of convenient methods that simplify common DOM-scripting tasks, including element positioning and CSS-style management, while normalizing for cross-browser inconsistencies.
  • The actual calendar code is found in the calendar.js file in the build/calendar directory.
  • The calendar.css style sheet provides visual formatting of the calendar control. It can be found in the build/calendar/assets directory.

All of these files should be included in your Web page to use the calendar control. With them included, an HTML element is created to contain the calendar. For example, the following div element is used:

Next, the calendar control is created. It accepts a minimum of two parameters. The first parameter is the id of the new element that will be created by the calendar control to hold its DOM. The second parameter is the id of the element that will contain the calendar control (our div element). The next example takes advantage of the optional third parameter that specifies a start month/year for the rendered calendar. A fourth optional parameter can be used to specify a selected date on the calendar control.

Finally, the render method of the calendar object is called to render it on the page. Listing A creates a calendar beginning with January 2007.

This is a basic example, but there are plenty of options for working with the calendar contents as well as formatting its display. Listing B extends the previous code to customize the display characteristics of the calendar including the weekdays, months, and so forth.

Using the Calendar control is better if you can work with the values within it. You can use the following line to display the date selected by the user (mouse click) via the Calendar control's getSelectedDates() method in the previous examples.

what's selected?

These examples provide a preview of the basic functionality of the Calendar control. You should refer to the documentation to dig deeper into what it offers.

Design patterns

Another interesting area of the Yahoo! Developer Network is design patterns. While design patterns have been utilized by application developers for years, they are not as common with Web developers. Design patterns provide solutions to common problems and keep developers from reinventing the wheel every time they are faced with common scenarios. The library site includes numerous Web development patterns with sample code that often utilizes YUI Library components.

New tools at your disposal

The Web is overloaded with sample code and related resources to help with your Web development projects, but some resources are better than others. I found a great resource when I stumbled upon the Yahoo! Developer Network. It provides plenty of helpful information for taking advantage of Yahoo!-related resources in Web applications, as well as a great set of Web components, sample code, and much more.


courtesy @TechRepublic


Support rich text with the Yahoo User Interface Library

During a recent project, my team’s task was to redesign a Web page that utilized an ActiveX control as a rich text editor. One goal of the project was to replace the ActiveX control with a more standardized approach. We chose to use the rich text editor available with the Yahoo! User Interface (YUI) Library. This week I examine using the YUI Library’s Rich Text Editor.

YUI! Library

The YUI Library is a set of utilities and controls in JavaScript, as well as CSS templates for building richly interactive Web applications using standard technologies such as DHTML, DOM scripting, and AJAX.

You can download the YUI Library 2.3.1 for free from SourceForge.net. The download allows you to install the libraries on a Web server. Another option is to use the library files directly from Yahoo! servers. Yahoo! provides an excellent overview of how to use its servers for applications implementing functionality via the YUI Library.

Rich Text Editor

A recent addition to the YUI Library is the Rich Text Editor. It is a user interface control that replaces the standard HTML textarea element. It allows for the rich formatting of text content, including common structural treatments like lists, formatting treatments like bold and italic text, and drag-and-drop inclusion and sizing of images.

A critical feature of the Rich Text Editor is its toolbar, which provides access to various features like text formatting, color choices, and so forth. You may choose which toolbar features to include in an implementation via scripting. In addition, the toolbar is extensible via a plug-in architecture so that advanced implementations can achieve a high degree of customization.

Putting the Rich Text Editor to work

If you want to use the Rich Text Editor, it requires a YUI Library CSS skin to properly render the control. The following YUI Library files (CSS and JavaScript source files) are necessary to use the Rich Text Editor. The following lines reference the files on the previously mentioned Yahoo! servers, but you may use a local installation as well.





Now the cols and rows attributes of the HTML texarea element will be overridden by settings specified in the Rich Text Editor’s script. The name assigned to the HTML textarea element is important, since it will be used in the JavaScript code when establishing the relationship between a textarea element and a Rich Text Editor.

Also, the class assigned to the HTML body element (yui-skin-sam) is used to visually format the Rich Text Editor control. This CSS skin is defined in the CSS file imported into the application (see previous list). The skin should be applied to the parent HTML element of the textarea element. In this case, the HTML body element is used, but it could be any element that contains the textarea.

Once the textarea has been defined along with the proper YUI Library files included in the page, the Rich Text Editor control must be rendered. The rendering is accomplished via JavaScript placed within the page. The script can be used to define various Rich Text Editor options such as the toolbar. As an example, I may use the following JavaScript to format our Rich Text Editor:





This snippet establishes the height and width of the editor while declaring an instance of the Rich Text Editor. Also, it assigns the textarea called textedtior to the Rich Text Editor. The final line in the script actually causes the Rich Text Editor to display when it calls its render method.

When you use the Rich Text Editor control without any specifics about the toolbar, it results in the default behavior of including all toolbar features like text alignment, font face, font size, color, and so forth. You may choose to limit the toolbar options available to users.

The final example uss a Rich Text Editor, but the toolbar options are defined in the JavaScript code to render it. The following options are used:

  • The toolbar options are defined in its own variable. This is later used to instantiate the editor.
  • A title is assigned to the editor via the toolbar’s titlebar property.
  • The collapse property signals whether the user may collapse/hide the toolbar.
  • The buttons property allows you to define the buttons displayed in the toolbar. In this example, buttons are displayed for text formatting as well as selecting colors.

Once the toolbar options are defined, a Rich Text Editor object is instantiated with the toolbar variable passed to it along with the HTML textarea element. The final step is to render the control. A complete list of options is available in the YUI Library API documentation.







It is worth noting that the text is formatted using standard HTML to format the text within the Rich Text Editor, so bold text uses the HTML strong element; the font element is used for font styling, and so forth.

An improved interface

I have been a big fan of the YUI Library since I first discovered it more than a year ago. It allows developers to build powerful Web interfaces using code that has been fully tested for proper functionality. The Rich Text Editor is just one example of the power controls available in the YUI Library.


courtesy @TechRepublic