|
SYS-CON.TV Webcasts
Comments
Did you read today's front page stories & breaking news?
SYS-CON.TV
|
Top Links You Must Click On
ASP.NET "Skinning" – When Design and Development First Met
Love the skin you're in
By: Nina Meiers
Jan. 28, 2006 10:15 AM
Did you know that the terminology known as skinning has been around for quite some time, but never in the hands of mainstream designers and Web developers in the content management space? Simple skinning or skin themes, which are more familiar, started back in the days of Windows when you could change the color/background of your desktop.
Since then we've seen applications (such as WinAmp, ICQ, and others that have a global-reaching user base) create the start of changing the look and feel of your application. WinAmp began its life in May 1997 (http://en.wikipedia.org/wiki/Winamp) with their Web site's existence (based on a WhoIs check showing that back in December 1999) helping drive its popularity by providing skinning capabilities to let all users choose their own look and feel of the interface while listening to mp3s. We almost accepted that it was purely for desktop-based applications, until the evolution of DIY Portals in the early years of the new millennium provided a range of preconfigured themes you could choose to display on a Web site. However, most of these were preconfigured, rather crude, and rigid representations of templates that were designed in-house by a team of developers probably working with designers. In the past there were also limitations bound by technology and that were most likely the lack of involvement with graphic designers. It seems that the designer's perceived value in the eye of the developer has been one of very little importance, even of nuisance until recent times. Until just a few short years ago we had seen elements of themes and skinning, but only in piecemeal and small segments, and never as a holistic approach to a solution being offered to the public as we have today. Visual Appeal Helps Sell a Great Developer's Code Whether we like it or not, sizzle-and-wow factor helps sell an idea or product to the decision makers, and something that looks great helps acceptance and adoption of a product. This causes frustration among developers who may be purists, and who are often left behind with less sophisticated but visually appealing applications getting the first look from the end user. This has changed in the last few years. So focused are we on reaching our audience that many companies are investing as much time in overhauling the look and feel UI as they are in developing their application to gain acceptance from a broad audience of often inexperienced but visually spoiled users. This trend is simply part of the cycle of technology development, where cutting edge becomes mainstream and the bar of expectations of Web-savvy users is raised another notch. With the success of DotNetNuke, a Web Application Framework, the genuine effort to involve designers has seen a powerful portal solution that a development company can encompass in their mix of business solutions. A company's provision of both development and design work can marry their skills and produce a Web site that is visually fantastic and that can perform to their expectations - but we now have another dimension: the excited end user who feels empowered by his or her ability to manage the Web site, which in turn brings about more business opportunities. Smart Developers Setting the New Standards The skinning engine architecture of the DotNetNuke Web Application Framework has been helping to push DotNetNuke to areas most other CM Systems would only dream of. With its unique open source but tightly knit community of thousands of contributors, over the last two years it has evolved to be one of the most advanced online solutions available. When looking for total flexibility and ease of management, DotNetNuke provides a taste of success for all parties involved. That's not saying that you can simply pick up and understand it in one day. Sure there's a learning curve, but overall, once you understand the methodology, it's almost intuitive as to how things are done. Why the Excitement About the Word Skinning, Themes, and Designing? Developers who work with designers during a project can often pick up simple techniques, usually using CSS, which can be adapted to the next project. A designer who spends some time learning this DotNetNuke will certainly appreciate the flexibility provided, and wil be able to contribute valuable information to a developer to produce a seamlessly integrated Web site. Having said that, it is important for designers to stretch themselves somewhat and learn a few basic principles. Although DotNetNuke provides free-form designing, it is in fact a rigid framework that must be adhered to when looking at providing a complete workable solution. If a designer can truly embrace a few developer concepts, he or she can master the depth of skinning possibilities that DotNetNuke provides. DotNetNuke Skinning: Simply Powerful Designers can work in either HTML or ASCX (control) mode to create their skins. Skins are packaged together using the images, CSS file, and XML file, and they are zipped ready for installation. When logged in with appropriate permissions, the administrator can then map to their local skin folder, add the skin zip file to the window, and upload the skin. The skinning engine takes over and parses the information, and if the HTML method of skinning is in use, it integrates information in the XML file and creates the ASCX control file, which is then responsible for outputting the data to the ASPX page. That's the simple explanation, and the skinning engine is truly one of the most remarkable aspects of DotNetNuke. Some designers who understand the programming side of DotNetNuke may prefer to use the ASCX method of skinning, which eliminates the use of the XML file and allows you to define all functions of the skin within the ASCX file itself. Some of the key words a DotNetNuke designer/developer will hear are skinobjects, tokens, containers, panes, CSS, Solpart Menu, XML, ASCX, HTML, and third-party controls, just to name a few. These make up the everyday language of the world of skinning. Skinobjects are programmed elements of code that interact with skin in the form of code-behind controls that allow a designer to provide further enhancements/customizations without the requirement of coding it into the HTML. Two examples are the [CURRENTDATE] and [SEARCH] tokens. An example using the [CURRENTDATE] skinobject/token allows us to put the current date into the page and from the server, will display the date in a standard format. However as a designer, I can choose to modify several elements of it. I can change the font type using classes, or I can change the text displayed to show different date formats such as dd/mm/yyyy, mm/yyyy, etc. An example using the [SEARCH] skinobject/token allows me to display text, which is customizable and overrides the default formats, so that I can use words that work within the requirements from the client. Furthermore, I can use an image instead of a word when displaying the search function. All is controlled and managed by the designer, without interruptions to the functionality of the code. Skinobjects and tokens are still very new in understanding and adoption, and as more designers and developers work together, more complex skinobjects will play an important role in managing the look and feel of site. Containers are the elements that hold the module function. For example, Print, Syndicate, and Minimize options are held with another element called a container, and when logged in to edit the site, module functions known as actions are then selected from a drop-down menu. Containers are both functional and decorative if required, and while always visible when logged in as administrator, they can be completely hidden when logged out. Panes must be included in every skin. They are the locations that the modules are applied to when you are adding content to your site. They sit as either <div> tags or as part of the <td> tag. At the very least you need one element called the ContentPane to make any skin work. Solpart Menu is the default menu that is packaged with every DotNetNuke installation, and much time is spent customizing the menu. It is perhaps the most challenging aspect of DotNetNuke to learn when integrating Web sites with a design. CSS is used thoroughly throughout the DotNetNuke Web Application Framework, and when developers and designers collaborate, particularly with custom modules, it's perhaps one of the most important elements to work with when designing your DotNetNuke Web site. XML is the conduit that the skinning engine reads when uploading an HTML skin, and information in the XML file is then parsed to the ASCX file. ASCX skinning requires some programming knowledge to implement successfully, and it is often the preferred choice of experienced designers. You don't need the HTML or XML files to skin using the ASCX method. HTML skinning is where all newcomers to DotNetNuke should start until they are familiar with how it works. The skinning engine is more forgiving of errors within the HTML file, and for those who require more backward compatibility, HTML is the way to go. Reader Feedback: Page 1 of 1
Your Feedback
Enterprise Open Source Magazine Latest Stories . . .
Subscribe to the World's Most Powerful Newsletters
Subscribe to Our Rss Feeds & Get Your SYS-CON News Live!
|
SYS-CON Featured Whitepapers
Most Read This Week |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||