XtractPro - Data Extraction Magazine

Printer Friendly Version

Download Source Code: AnimatedCollapsiblePanel.zip - 16.03KB

Reverse Engineer Panels from Web Sites

Chances are you already created your web site, using a free template or some other template offered by your web design IDE. But we frequently discover on the web, often on someone else's web site, some nifty and fancy presentation boxes we would like to incorporate in our own web site.

First question is how did they do this? This is not hard to find out. Almost all those boxes are crafted from small images and CSS classes applied to HTML elements. If some dynamic behavior occurs on user's action, such as panel collapsing or expanding, or shape changing on a mouse click or mouse over event, chances are some HTML elements have JavaScript functions attached to their events.

What you need to locate and separate, in order to create and design your own similar boxes, is:

• The block of HTML code that renders the presentation box. This is easy, just look at the source code from your browser and locate a certain sequence searching for some visible keywords according to the displayed text.
• Definition of CSS styles used with those HTML elements. Some elements may have inline style declarations, through style and other HTML element-specific attributes. But most web programmers use separate CSS definitions, either inline, within STYLE blocks declared in the same page, or more often in separate CSS files, linked from the header section of the page. Whenever you see a class HTML attribute name, this is about a CSS style definition, located elsewhere, you need for your design.
• Images used for the box. These can appear as both IMG tags in the HTML sequence and in the CSS style definitions.
• Definition of eventual JavaScript code used for the boxes. JavaScript functions and code appear most often within HTML element event declarations, such as onclick, onmouseover, onmouseout... As for CSS, the JavaScript code can be either declared inline, in the same web page, within SCRIPT blocks, or defined in separate JS files, linked from the header section of the page.

What makes a panel: HTML, images, CSS and possibly some JavaScript code

Locating all these possible elements with a simple look at the source file is often hard enough. There is a better way to do it: from your browser - both Internet Explorer and Firefox have this functionality - save the web page on your local computer with File - Save As command. There are several choices out there, but always pick up the "complete HTML webpage" option. This will create a local HTML page, but also a related folder with similar name, in which all CSS files, JavaScript files and images associated to the page are saved recursively as well. This means whenever you find a reference to an image, style of function in your HTML sequence, chances are they have been already downloaded offline, in your folder. You still have some work to do, in order to properly locate in which CSS file are the style classes declared, what are the images you need and in which JS file is the JavaScript code defined, but this simple trick saved you already a lot of work.

The procedure described before assumes you use that code just for inspiration, in order to later create your own images, styles and code, for your own boxes. Just copying someone else's work is usually considered stealing and may lead to copyright infringements. Just because the code to create those sequences is visible, not protected and can be extracted and reused, doesn't necessarily mean it is free to use. While most techniques to create web boxes are not protected by copyright, try at least to not use the downloaded images exactly as they are, especially if they look way too fancy and specific. Also adapt your HTML, CSS and JavaScript code to look different. Change colors and try not to make it so obvious you used the same code and presentation layout as someone else.

Subscribe and Share:

11 Comments

Leave a Reply