Posts Tagged Geeky

Waltree is a simple VBScript function I devised while I was teaching myself rudimentary use of Microsoft’s XML Dom. The function takes a XML DOMDocument object as an argument and will output the XML as an indented, unordered HTML list. Walktree will not only display the content of each XML tag but also the values of the various properties if they exist.

Specifically this Function illustrates the usage of:

• Microsoft’s XML DOM implementation
• Simple Recursion

Calling the function is not difficult. You start by creating a XML object like so:

Dim xmlDoc
Set xmlDoc = CreateObject("Msxml2.DOMDocument")

Then set the appropriate XML properties and load the document you wish to porcess.

xmlDoc.async = False
xmlDoc.load(Server.MapPath("books.xml"))

Finally check if there were errors and if not run the Walktree function.

If (xmlDoc.parseError.errorCode <> 0) Then
   response.Write(xmlDoc.parseError.reason & "<BR>")
Else
   Walktree(xmlDoc)
End If

Walktree Source

The source below should be fairly self-explanatory if you’re familiar with VBScript. The output of the function can be easily modified to cater to other needs.

<%
Function WalkTree(objCurrNode)
    ’====================================================================
    ’ WALKTREE 1.0
    ’ AUTHOR: Thomas Vanparys - http://www.badsoda.com
    ’
    ’ USAGE: Pass a valid XML DOMDocument object or node and it will
    ’        output the entire child tree as an HTML unordered list
    ’====================================================================
    Dim objChild
    Dim objAttributes

    ‘Check if node passed down has children
    If objCurrNode.hasChildNodes = True then
        response.Write("<ul>")

        ‘Output each child
        For Each objChild In objCurrNode.childNodes
            ‘While making sure they are elements and not something else
            If objChild.nodeTypeString = "element" then

                response.Write("<li>")
                response.Write(objChild.tagName)

                ‘Start checking for attributes
                Set objAttributes = objChild.attributes

                If Not objAttributes.length = 0 then
                    response.write("&nbsp;&nbsp;&nbsp;<i>(Attributes: ")
                    For i=0 To (objAttributes.length -1)
                        If Not i=0 then response.write("; ")
                        response.write(objAttributes.Item(i).nodeName)
                        response.write("=" & Chr(34))                        response.write(objAttributes.Item(i).nodeValue)
                        response.write(Chr(34))
                    Next
                    response.write(")</i>")
                End If

                ‘Output contents of current object
                If objChild.hasChildNodes = True Then
                 ‘and objChild.firstChild.nodeTypeString = "text" Then
                    response.Write(": " & objChild.firstChild.nodeValue)
                End If

                response.Write("</li>")
            End If

            ‘Do some recursion to walk down the entire tree
            Walktree(objChild)
        Next

        response.Write("</ul>")
    End If
End Function
%>

Safeguarding a website’s look and feel is as important as protecting the content it delivers. It is important because it defines who you are to your audience. It is analogous to protecting your brand. A site is recognised through its layout, use of graphics, fonts and colours. You wouldn’t want someone else to just rip your work and use it as their own now would you?

Standards

Often enough however, layout protection of a site is either not done or poorly implemented. The difficulty lies in implementing proper protection schemes. This is mainly driven by the fact that the overwhelming majority of sites are based on HTML. The HTML standards are designed for defining layout and have little concern for security issues.

That doesn’t mean you can’t protect your site however. There’s several schemes out there which offer various levels of protection. Some are easier to implement than others and they all have their advantages and disadvantages.

Concept

What I’d like to present here is a way of protecting the imagery of a site using only standard HTML and CSS. You will learn how to use simple tricks to stop people from ripping your graphics by either saving the page or using the save image options of the browser.

Conceptually the technique is fairly straightforward: Use the HTML to define the document structure and then use CSS to apply the graphical layout layer underneath. The trick is to put tranparent images in the HTML as placeholders and then fill these with imagery defined in CSS.

To see an example of this technique simply try to save the page your’re reading to your local hard drive and then opening it again in the brower. You will notice that the page you just loaded has correct layout structure etc. but no imagery.

How this was achieved

There’s several ways you can implement the concept. For simplicity I’ll be using the IMG tag and write the CSS directly into the tag. At then end of the article I’ll give some pointers on other ways of doing it.

To follow along you’ll need two images: the one you want to display and a transparent one. For the transparent image I typically I use a gif image of 3 by 3 pixels.

Lets start with the HTML side of things. Start by creating an IMG tag as you would normally. Make sure you have the width and height set correctly. It’s important later.

Code	Result
<IMG SRC="display.gif" BORDER=0 WIDTH="33" HEIGHT="33">

Now lets replace the image with the transparent one. For the purposes of illustration I used a semi-transparent image. Basically the image has a line through it so that you know it’s acutally being displayed.

Code	Result
<IMG SRC="transparent.gif" BORDER=0 WIDTH="33" HEIGHT="33">

If you sturcture your entire HTML document in this way you’ll have placeholders for all your imagery. This is essentially what gets saved by the browser and your potential thief.

Now lets add an image beneath using CSS. For the purposes of simplicity I’ll be using the style attribute directly in the IMG tag. In a production environment I would use a separate style sheet which you call with the appropriate tags.

Code	Result
<IMG SRC="transparent.gif" BORDER=0 WIDTH="33" HEIGHT="33" STYLE="background-image: url("display.gif");" >

You don’t have to set the width and height parameters in the CSS part (as long as the placeholder in HTML is correct).

And that’s all there is to it. Simple no?

Last words

You can achieve the same effects in other ways too. For example you put all the CSS in a Div and have the Div contain the IMG tag. This allows for more flexibility in the layout and actual placement of your imagery and is a techinque used on this site.

Besides copy protection, there is another great advantage to using this technique. If you ever want to change imagery or use mutliple skins on your site, all you have to do is change the CSS file, nothing else.

The technique would be absolutely perfect if you could set the width and height is CSS only. Then you would come full circle on flexibilty. Unfortunately I haven’t found a way of doing this properly yet. If you have, drop me a line.