Fancy a quick & easy, yet extensible & robust login manager to organise & store all your urls, usernames and passwords, in whatever categories your care to put them?

Simple. Just store your user / site details in an easily editable XML file like this and use XSLT to transform it (on the fly) into a really easy HTML page like this…

Intrigued? It’s not as difficult as you think.

Information overload

At the last count, I have about 15 – 20 sites that I manage for myself and my clients. This means I have to remember a

• url
• username
• password

For:

• Site login
• Site database
• Wordpress login
• Wordpress database

So for 15 – 20 sites we’re looking at anywhere between

• 45 (15 sites x 1 login x 3 url, username & password) to
• 240 (20 sites x 4 logins x 3 url, username & password) bits of information.

What a headache!

From bookmarks to JavaScript to XML

So, for the last few years or so, I’ve resorted to keeping bookmarks in each client’s folder, along with a text file with the relevant details. However, a few months ago I realised that I may be able to bypass some of the manual login palaver by storing the whole login url as one long GET string, and calling it straight through the browser:

http://www.mysite.co.uk/login.php?username=dave&password=ilikefish

This works on some sites, but for others that don’t like GET and take only a POST, it didn’t work.

So, I thought how about having an HTML / JavaScript page with a form that has it’s values (name, password, etc) set dynamically by selecting a drop down, then connects to the server and does the login like that?

Eureka! It worked very nicely thank you. So I’ve been going along with this quite happily for a while until I had to add a few more sites, and started to get a bit overwhelmed with the sheer amount of data I was having to put into all these JavaScript arrays.

Hmm… what do do now? How best to store all this data? Well, XML seems like the logical choice, but how to actually parse and search that XML from within the HTML file? Embed it as HTML and use some DOM manipulation? Regular expressions? Perhaps I should use jQuery and it’s AJAX capabilities?

Then all of a sudden it struck me. XSLT! My only real memory of XSLT (Extensible Stylesheet Language Transformation) were from the chapters in my XML book, and I knew that it was pretty dry stuff that I’d probably never use… however here it was, about to come to my rescue.

XML + XSLT = HTML

In a nutshell, XSLT allows you to take a skeleton XML document and “transform” (move it around, add stuff, repeat stuff) it into a fleshed-out HTML (or any other markup) document by applying rules and templates to individual XML tags.

In a way similar to how CSS styles HTML by using selectors to select nodes, and change the visual result…

 p {
    color:red
    }

…XSLT can apply your own rules and templates to nodes…

…to physically change their structure and markup, creating a brand new hybrid document.

You can think of XSLT as a set of “templates” with some basic logic for transforming individual tags.

For example, let’s say you want to transform a list of names, phone numbers, and addresses specified in

and
• tags to something a little more presentational. You could specify that the first
• should be transformed to a

  , and the second

  be transformed to a

  , then the rest of the list remain as a list. Finally, wrap the whole thing in a

  , and for the fun of it, add a

  ---

  to the end.

  The end result is full HTML output viewable in the browser, and if CSS styling is applied, looks and behaves no differently from an HTML document that you’d created yourself.

  The advantage of styling XML with XSLT is that you keep data and presentation completely separate, and therefore your data is far easier to manage.

  To make the XSLT act upon your XML is as simple as specify a link to the XSL file in the head of the XML file, in the same way a CSS file is specified in the head of an HTML document.

  Requirements

  So – back to my Login Manager scenario. I wanted to process my skeleton XML of all my urls, usernames and passwords to create a new document that had:

  • Clear sections for each of my top-level categories: Misc, Personal, Business
  • In each category, a list of sites with a title and text-based link
  • For each site, a list of login types
  • For each login type, a mini login form that replicates a standard login, with
    • hidden form fields for username, password, or ANY attributes I specify
    • target url specified as the form’s action
    • a login button to send the variables and perform the login

  Basic XML structure

  Login data is not that complicated (url, username password) so there’s only need for a few basic tags, plus some extra tags to organise the data:

  • category – groups together particular sites under a common heading, e.g. “Business”, “Personal”
  • site – groups together all the different logins for a single site
  • application – group together any application-specific login data, such as Wordpress admin & database logins

  Then we have some specific login types:

  • login | database – login to an application using HTTP (form data)
  • folder – connect to a password protected folder using URL syntax (protocol//user:pass@domain/path)
  • page – just load a page without passing any variables

  And finally there’s a few basic attributes:

  • name – the name of the category, site or application
  • url – the full http: url of the site
  • username – user name
  • password – password

  If you need to pass any other attributes, just add them to the specific login or database tag and they will be included in the final login forms the XSLT will create.

  This is how the XML structure would look for one site with 4 login types, organised under a category heading. Note only the few tags listed above.

  

  And here’s the final XML as it looks in XML Notepad (click to see a dummy XML file):

  

  How I’ve leveraged XSLT in this application

  Although XSLT is markup (in fact it’s XML), it’s not just dumb text. XSLT is actually a language, and is capable of making decisions as it processes the XML. Each kind of XSLT tag is in effect a different command, with it’s attributes acting as parameters to that command.

  For example, the tag could be seen as an if/then or switch/case construct in a real programming language, so you can use it to make decisions as you process the document. In other words, when the parser is processing one of your “mini-templates” and it comes across an tag, you could change exactly how your XSLT rule will build the next bit of HTML output. I’ve used this to map the username and password attributes stored in the XML file to custom field names, depending on each login application’s form requirements.

  For example, Wordpress expects log and pwd rather than username and password, so with a tag I just instruct the XSLT parser to output these preferred field names where any login tag has a parent tag of type application, with it’s name attribute set to “Wordpress”.

  I’ve put a lot of comments in the XSL file so it should all become clear.

  Speaking of which, it’s about time to take a look at the XSLT file. Note the:

  1. XSL templates for each kind of tag, for example:
     • the root tag:
     • any site tags:
     • any folder tags:
     • any login or database tags (which are treated the same):
  2. the actual HTML inside each of the templates that get printed to the page for each tag
  3. Any logic associated with the rules, e.g. and it’s children
  4. How XSL outputs actual values from the XML, e.g.
     • a node’s name:
     • the value of a url attribute:
  5. How XSL builds HTML manually, including
     • tags and also
     • attributes
       

  End result

  Below is the end result of XSLT applying all those tag-specific mini-templates to the XML. Click the image to see the live results with a dummy XML file.
  

  Pretty comprehensive I think you’ll agree.

  And in case you still haven’t quite cottoned on - yes – this is an XML file you are looking at! If you don’t believe me, just do a “View Source” to see the actual XML, and marvel at what a stunning job the XSLT has done.

  Taking the file and using it yourself

  I’m a big fan of choosing the right tool for the job, and in this case XSLT has been absolutely perfect. I wrote a fairly basic XML file and it didn’t take long to learn the few commands I needed to turn it into a really useful HTML document.

  If you want to use this to handle your own site logins, feel free to take and update the file. As long as you stick to the category > site > (application) > login > attributes structure, the XSLT will give you a user-friendly front-end to your XML, every time.

  Just place any standard login and database settings under a login or database tag, and group any application-specific settings under an application tag, and the XSLT will create a new named sub-section for you.

  If you wish to pass any other specific variables to a login script (for example you may have a landing page specified, ala Google Analytics), just add these attributes to your login or database tags.

  Files and Links

  I’m certainly no expert on XSLT so I’m not here to provide the world with tutorial, but I am up for sharing the code I’ve written, as well as providing links to the pages on the Internet that helped me.

  • Here’s a zip of the 3 files (XML, XSL & CSS) you’ll need to build your own Login Manager

  These pages got me most of the way:

  • and Putting attributes to work

  And here’s some software you’ll find useful:

  • Microsoft XML Notepad. Lightening quick XML editing with a small footprint. Great for editing small xml files.
  • . Real-time XSLT processing so you can see your code in action without having to preview in a browser

  Hopefully someone will find this as useful as I have!

  Cheers,

  Dave

  Posted in XML | 1 Comment »

  Adding Google Analytics to your web pages dynamically

  Single-script Google Analytics inclusion

  Friday, December 7th, 2007

  I’ve just started using and it f*cking rocks. It’s simply amazing the amount of information it provides, but more amazing still is the way it shows you how people are using your site.

  Installation is as easy as copy and pasting two scripts into each web page you want tracked. What could be easier than that!? Well, how about one script?

  Here’s the code needed to run the tracking functions automatically:

  Here’s the code to load the tracking functions without running them (works in ALL browsers, not just IE!) so you can call the code yourself later (for example, tracking an AJAX call):

  Of course, there’s a few of these out there already, but here’s the specifics on my take:

  • easy: a single external script that loads the Google code dynamically
  • intelligent: calls tracking function only when remote script has fully downloaded
  • versatile: use of defer attribute to run automatically (or not)
  • customizable: provides a wrapper function to execute your own custom code
  • tidy: intermediate setup variables are created privately via a function closure

  Just be sure to add your tracking id to the initialization function!

  Download google-analytics.js

  Posted in JavaScript | No Comments »

  Network-Render all Cameras

  Automatically submit all cameras to a network render, rendering the correct frames, and save the output to the correct directories

  Friday, October 26th, 2007

  This MAXScript entry has not yet been completed…
  (more…)

  Posted in Cameras, MaxScript, Rendering | No Comments »

  ActiveX TreeView Functions

  A set of functions for manipulating ActiveX Treeviews

  Sunday, October 21st, 2007

  This MAXScript entry has not yet been completed…
  (more…)

  Posted in MaxScript, UI Design | No Comments »

  Copy Object Properties

  A quad-menu shortcut to quickly copy properties from another object

  Monday, October 1st, 2007

  A quad-menu shortcut to quickly copy properties from another object. Currently works on base-object properties, but at some point I may update it to work with modifiers.

  Works on multiple selections, and attempts all property names, so you can do things like update the radii of spheres from cones, for example.

  Interface

  

  Download and Installation

  Download and run Copy Object Properties.ms from 3dsmax.

  It will create the macroscript in the correct directory for your max version, then you can add the script to a toolbar by going to:

  • Customize > Customize User Interface…
  • and looking under the Tools category for Copy Object Properties.

  Posted in MaxScript, Widgets | No Comments »

  Render Size Presets

  A dockable toolbar providing controls to quickly render different sized images

  Tuesday, September 18th, 2007

  Adds a new toolbar, allowing you to quickly change render size presets (PAL, PAL widescreen, HDTV, etc), and sizes ranging from full to 25%. Also, optionally render when clicking the preset buttons.

  Interface

  

  Adding more presets

  To add more presets to the list, you’ll have to edit the script. Don’t worry – it’s pretty easy! Just add items to the array here.

  local presets =
          #(
                  #("PAL", 768, 576, 1),
                  #("PAL (Widescreen)", 1024, 576, 1),
                  #("HDTV", 1920, 1080, 1)
                  -- feel free to add more here
          )
  

  Download and installation

  Download renderSizePresets 0.75.ms, and place the file in your scripts/startup directory to have it start automatically each time you start 3dsmax.

  Posted in MaxScript, Rendering | No Comments »

  Multimaterial From Folder

  Create a set of multimaterials from a folder of textures

  Sunday, July 29th, 2007

  This MAXScript entry has not yet been completed…
  (more…)

  Posted in Functions, Materials, MaxScript | No Comments »

  Soft Instance

  Instance an object leaving certain properties un-instanced. Useful to create families of objects with variations upon a theme

  Thursday, July 26th, 2007

  This MAXScript entry has not yet been completed…
  (more…)

  Posted in MaxScript, Tools | No Comments »

  Random Multimaterial

  Creates families of slightly-random multimaterials

  Saturday, July 14th, 2007

  This MAXScript entry has not yet been completed…
  (more…)

  Posted in Materials, MaxScript | No Comments »

  MindManager Web Site Creator

  A powerful VB application that allows me to export a MindManager mindmap to a fully-featured, templated web site

  Monday, June 11th, 2007

  Mindjet Mind Manager is an awesome tool for mind mapping, note-taking, planning and organising. I use it often these days in place of Word to flesh-out complex hierarchical ideas quickly and easily, with the most freedom from any package I’ve ever used ever!

  If you don’t know what mind mapping is – remember those spider diagrams you used to make at school? Same thing. Only once it’s on computer with drag and drop, linking, formatting, full text-insertion, it’s like spider diagrams on acid (in a good way!)

  

  From mind map to HTML

  So, you’ve got MindManager. You’re using it to create these amazing mind maps, or web site maps, or anything you like really. But what then? It’s all very well having these wonderful maps in MindManager, but what I wanted was some way to
  get what I saw on the screen…

  

  … onto my hard disk.

  Unfortunately, the built-in MindManager site export is shit. Utter, utter, shit. It’s so bad I can’t even begin to describe how shit it is.

  However, one of the best things about MindManager is that its fully scriptable through VBA. The documentation is sadly lacking in concrete examples, but once you manage to hack your way through and get used to the MindManager DOM, it’s an incredibly powerful tool and you can do pretty much anything you want.

  VBA

  Enter the wonderful *cough* bullshit *cough-cough* world of VBA.

  Now, VBA is not my favourite language in the world for a few reasons (it’s a bit old now), however I really like Microsoft’s IDE, and the fact I can leverage Office apps or anything else that’s VBA-enabled makes the pain more than bearable. Hell I sometimes even enjoy it!

  So, the plan was to create an exporter that would recursively trawl my map, and spit out files in the same structure on my hard disk. To add to this, I wanted the script to:

  • Give me some control over which nodes became directories, folders, and page sections or headings
  • Use a templating system that would provide a flexible base HTML and CSS framework
  • Build the top and sub-navigation blocks, complete with ids, rollover and down states
  • Convert any text on nodes to body HTML copy
  • Insert the correct page titles
  • Do it all quickly and seamlessly!

  I think in the end it took about a week to get to version 1.0, and ended up at about 1000 lines of code.

  Here’s the list of procedures I ended up with:

  

  The end result…

  So… what does the final export look like!?

  Well, I built a site for a friend recently who didn’t have a massive budget, so this was the perfect choice. The site has about 20 pages, and it takes about 1.5 seconds to generate all the files and folders for the complete site.

  Here’s the base site export from MindManager		And here’s the final site after images and the final style sheets have been developed

  The key thing to notice here is that the base HTML for both pages is exactly the same! The only thing that has been added to the final site are the images, and updated CSS.

  Benefits of this approach

  Firstly, using MindManager for any organisational task is a must for me these days. I really can’t live without it.

  From a client perspective, it allows me to get all their Word-formatted text straight into an hierarchical system, which can then be dragged and dropped to create far better site maps than they originally come up with. The whole process of editing text, dragging nodes and seeing the results is so hands-on; it’s amazing.

  Secondly, by being able to export the map with literally a couple of key-presses we’re able to see within seconds exactly how the finished site will work, and then edit, re-edit, and re-re-edit as much as we like.

  For small sites (less than 20 pages) where static HTML pages are preferable to a CMS, the process is incredible. Using MindManager and custom scripting has allowed me to:

  • Collaborate with clients far more easily by quickly generating workable sites for review
  • Streamline the initial design documentation process for a site by including all copy within one file / application
  • Rely upon a tried and tested HTML/CSS layout and navigation framework
  • Minimize development (and-redevelopment) time for page-generation
  • Spend less time coding laborious CSS and HTML and more time doing interesting stuff

  Download

  This application is not available for download, but to get in contact with me for any development work, please see the link at the top of the page.

  Posted in Development, HTML, VBA | No Comments »

  Next Entries »