1. Create the buttons themselves. This was achieved using the Glassy Button Generator website. I simply specified the color, the roll-over color, the text to put on the button and the size, I selected a transparent background, then downloaded the resulting ZIP file to my computer. I then extracted the contents of the ZIP file and uploaded the GIF images to the Zude File Manager, renaming each one to represent the text on the button. Remember to keep the suffix on the filename the same though, because “AboutMe-1.gif” is the mouseover version and “AboutMe-0.gif” is the plain version. Make a note of the Zude File ID number that is assigned to each image as you upload it, as this will be vital later. I found it useful to create a list in Notepad of all the filenames (there will be two for each button) then beside each one paste the File ID number.

2. Create the mouse over script. This was achieved using the Dual Mouseover Machine Generator website. Once again, I am not a great web developer, so I rely on script generators to do most of the work for me. Put the File ID, (including the full URL), into the boxes for each button. This generator is designed to change a third image depending on which of the two buttons is moused over. I didn’t use this functionality so I avoided the last set of boxes. The generator will create two scripts, one goes into the HEAD of every page that will use your button bar, the other is the Object code that you can drag and drop onto your Zudescape pages. You can now copy and paste the relevant parts of the scripts to create more entries for more buttons (no, you‘re not limited to only two menu options), and edit them with the relevant File ID numbers. But wait, there’s more…

3. Separate out the buttons. You my have noticed that in the above step I didn’t mention the URLs for the pages that the buttons will link to. This is because I am not using the URLs from within the script. As I found out when I was creating the button for  the “Enter Page” of my Zudescape, launching a link from within a script will open the Zude page within the current Zude page, resulting in two Zude Menu Bars and two lots of advertising along the bottom of the screen. Instead, we are going to use Zude’s Action-Click property for an Object to make a link to another Zude page when your new shiny button is clicked. That said, the Action-Click property applies to an Object, not to the contents of the Object. If you were to drag and drop our resulting Object script from the Dual Mouseover Machine Generator website onto your Zudescape page and edit the Action-Click property, it would apply to all the buttons in the object, meaning that no matter which button you clicked, it would link to the same page. Not exactly what we wanted from a button bar, is it?! So, instead, we carve up our Object script into individual Objects, copying and pasting each button out of the script as a new Object. Now you can align the buttons on the page as you want them, then apply the Action-Click property to each one. DON’T FORGET TO SAVE for each button, because if you accidentally click the button once you have applied the Action-Click property you will be whisked away to your target page and the changes will be lost. It is best to leave the Action-Click property to last, setting the background to transparent for each Object, removing headers, footers & borders first, adjusting exact dimensions and co-ordinates next, and then finally setting the Action-Click property. Then save! Do not forget! You have been warned!

4. Making it all work. You must ensure that the script for the HEAD that was generated by the Dual Mouseover Machine Generator website has been placed into the HEAD section of your page. You can do this by accessing “Edit – Edit Page Properties” from the Zude Menu Bar, then selecting the “Advanced” tab. Paste the script into the HEAD textbox and save it. Without this part the buttons will still work fine, but the mouseover effect won’t happen. Don’t forget that for every extra button you add to your button bar object, you need to add extra lines to the HEAD section of the script as well.

If you have any comments or questions about this process, or need specific help with getting it working, please leave me a comment on this Blog entry and I‘ll see what I can do. Remember, I’m not an expert! If I can do it, I’m sure you can do it too.

I’ve been doing the rounds of the pages of other Zuders and getting some really great ideas. There are some very creative people in Zudeland. One of the common themes that seems to run through all of the pages that I have seen so far is of individuality and personality. Every page, every Zudescape is different. Using the tools that Zude gives us to develop our Zudescapes with, they allow for unlimited creativity and Zuders can express their own style and personality easily using those tools.

So, that leaves me with the difficult decisions. How do I express my personality, my style, through the pages of my new Zudescape? First, I have to define what exactly it is that I want my Zudescape to be. This is going to be my presence on the Internet. When somebody looks up “Jed Kantos” in Google, this is what I want them to find first. Now, sure, there are techniques that I can use to manipulate the search results, that’s the easy part. The hard part is to define what exactly it is that people will find when they get here? Why would somebody look me up anyway? What would they be expecting to find? My Zudescape is going to become a “one stop shop” for anything and everything to do with Jed Kantos. Whatever it is you want to know about Jed Kantos, you will find it here.

Turning on Microsoft Word’s outlining feature, I start by typing out a list of headings and subheadings that I think are appropriate, including: About me, How to contact me, My interests, My friends, My family, My CV, and Where I live. I’ll add to and change the list later, but that’s a rough guide. Next I created a new simple website using Microsoft FrontPage. This is only a tool that I am using to help me to visualize the layout and navigation of the pages of my Zudescape, and the resulting files will not be used in the final design. I create pages in FrontPage and link them together in the Navigation View to form a rough layout for my Zudescape pages.

One of the targets of my Zudescape is to make the “Pages” button on the Zude toolbar redundant. I want people who visit my Zudescape to be able to navigate smoothly to every page within it, without having to resort to the “Pages” button. This is one thing that I have seen done with varying degrees of success on the pages of other Zuders, with Uber Zude’s arrows being one of the better navigation solutions that I have seen so far. I think that the most cliched look on Zude for navigation is the built-in rectangular gray buttons being used as a button bar. They seem to be everywhere! I want to have a navigation panel on the left of all my pages, which uses a JavaScript-based cascading tree menu to give access to every page in my Zudescape. There will also be a row of buttons along the top of each page to provide quick access to common tasks, such as for signing my guestbook. But, believe me, those buttons won’t be the rectangular gray type!

Okay, now I have a bunch of titles that I want to use for my pages, so let’s collect them all together and put them into Zude! Not being a particularly good web designer, and an even worse programmer, the JavaScript tree menu will have to wait for a while, as I need to figure out how it works first. I already have a template stored that will give me the background that I designed earlier. The first page that I add to my Zudescape is the “Welcome” page, which is the page that the “Enter My Zudescape” button will eventually link to. This is the first true page of my new Zudescape, while the “Enter Page” that I made earlier is really a separate entity entirely. The Welcome page is the first page that will have the familiar look and feel that I want to spread across my whole Zudescape.

Next I carve up the page into distinct areas, with the main content space in the middle, between two narrower blocks, one on either side. These will be used for the JavaScript tree menu navigation area on the left, and for my blog and other links on the right. Across the top of the page is a banner displaying the page title, the common logo, and above all the quick link button bar. To finish, I add a clearly defined bottom of my page, which is an idea that I got from another Zuder, Raven J. Wolfe, who uses a text object with the words “End Of Page” at the bottom of all her pages. I found this very helpful when viewing her Zudescape. I have used this idea with a twist, adding a copyright notice to the bottom of all of my pages. Zude is about freedom, and shared content, focusing heavily on the drag-and-drop functionality. Towards that end I have licensed all of the content that I create on my Zudescape under the Creative Commons Attribution-Noncommercial 2.5 Australia License, allowing people to share and make derivative works for non-commercial use as long as I am attributed as the source. At the bottom right of all my new Zudescape pages I will display the License image and a brief copyright statement. The bottom left corner of each page will have a hit counter, using a Flash widget that I found on The Jack’s Zudescape.

This completes the setting of the boundaries for my pages. Now I start filling in some of the areas with my common content that will appear on every page. My “Jed Kantos on Zude” logo goes on first, up beside the page banner. Then I added my blog, the one that you are reading now, to the right hand side panel. I added this as a SpringWidgets widget, as it was the most configurable option available. I needed something that I could stretch to fill a long column, 250 pixels wide by 1,283 pixels long! The best that I could do was 999 pixels in length, but that was better than what competing products were offering. Sure, I could have used the built-in object from Zude for my blog and madde it as long as I like, but I was put off by the fixed white background color, and the fact that it only seems to display the headlines, not the content, of the entries. The quick-link button bar at the top of the page will come later, as I can’t realistically create the buttons without having the rest of the pages already existing in order to link to them properly. And, of course, my tree menu still looks like a semitransparent text object too. Satisfied with the page layout so far, and the common content objects on it, I exported it out as a template, using Zude’s *.zpg format. This feature alone is a huge timesaver and has already gotten me out of a situation with lost content. I can’t stress enough how important it is to make a backup when developing a new Zudescape.

The next step is to create the quick-link button bar. As I mentioned, I can’t do this without having destination pages to link the buttons to, so I now mass-produced a whole heap of pages, as per my navigation structure from FrontPage. However, I am not importing my standard background onto these pages just yet, nor my new template that I just created above. Instead I left the page with a blank white background and added some images to show that the page is still under construction. This simple layout was then exported as a template, and imported into all of the new pages I am creating. In one sitting I made thirty new pages for my new Zudescape! They are all now ready, with their individual Page ID numbers, to be linked into the navigation system of my new Zudescape, including both the JavaScript tree menu and the quick-link button bar. More on those objects to come in the next posting.

I have been looking at the Zudescapes of some of the other Zuders, and have picked up some great ideas. I found a really cool Flash-based hit counter widget on The Jack’s Zudescape which I will use on all of my new Zudescape pages. Also, I saw a very cool idea on 5Alive’s Zudescape which I am swiping as well. Their Main page has a door on it that you click on to enter their Zudescape proper. This got me to thinking… what if I did that with a Flash splashpage? How wicked would that be?! Of course, I don’t have Macromedia Flash and probably wouldn’t know how to use it if I did, but I know that there are websites that can generate a Flash splashpage for you. So that’s on the plans for my new Zudescape now too.

In keeping with the Barsoom theme for my new Zudescape, I have chosen the colors red, orange, yellow, brown, tan, and white, to reflect the colors of Mars, the Red Planet. I haven’t defined specifically which shades and hues of these colors I will use yet. I wanted a suitable background image and spent some time doing a Google Image search. Finding a whole heap of images from the Mars Rover, I soon found out that the reality of the surface of Mars is a lot more bland and boring than the colorful planetscape of Barsoom, as portrayed in the books by Edgar Rice Burroughs. So, instead, I went for the artistic, stylized look. I am currently waiting on a reply from one artist for permission to use one of his works as my Zudescape background, and have also found a very nice website called Solar Voyager that is a collective of artists that focus on space and planetscape artwork. If I don’t get permission from the first artist I approached, I now have a whole forum of great artists to pester for permission to use their artwork on my Zudescape.

In the meantime, some of the artworks I saw on my trip through Google Image Search inspired me with one idea that I could implement immediately for a nice background. I like playing computer games occasionally, and have recently been really getting into Empire Earth. The Map Editor in this game, like many others, is nothing more than a 3D modelling tool with fairly simple controls that even someone as artistically challenged as myself can use. So, after playing a few hours of the game, I finally got back into productive mode and started designing a background for my Zudescape using the Map Editor. It wasn’t as easy as I thought it would be though. Even a 1024 x 768 screenshot looked diminutive as my Zudescape background without tiling it. And, of course, I had to work a lot harder to get an image that would tile nicely.

Eventually I made a background that I am reasonably happy with. It could do with more tweaking, and will no doubt be scrapped altogether when someone with more artistic talent than me allows me to use one of their pictures. But for now I have a background. Rather than inserting it into every new page I create of my new Zudescape, I have created a new page called _template and added the background to it, then I exported the page as a *.zpg file. Now, whenever I start building a new page of my Zudescape, I just import the *.zpg file into a blank page, and I have my background. I will continue using this technique as I build my Zudescape, adding common elements such as a navigation menu, logo, etc and then saving the page as a template. Eventually I will have a collection of templates for my Zudescape, following the evolution of the standard layout for my site, step-by-step.

So, next I created the page which would be used as my new Enter page, (a-la 5Alive’s idea). This is the first page that the public will be able to see of the new development, and will also be the first page that users view when they nagivate to my Zudescape. Creating a blank page and importing my template, I then started dragging and dropping objects. A quick trip to my Tools page, and the 3D Text Maker website which is embedded and rolled up like a scroll waiting on my desk, resulted in a scrolling marquee welcoming visitors. Then I unrolled the Glassy Buttons Generator website and made a couple of buttons to sit at either end of the marquee. Its not great web design, but as I have already admitted, I’m not an artist! Satisfied with my efforts so far, I then dropped a copy of the hit counter widget that I found on The Jack’s Zudescape. I can’t add this object to my template as each instance of it will require a new globally unique identifier (unless I want all of the pages to show the same number of hits).

Finally, for now, I had to link the new Enter Page to my existing Zudescape. This proved to be a little more difficult than I first thought. Initially I wanted to use a Flash button, with pulsating green light and sound effects as you hover your mouse over it or click it. My attempts to do this met with failure, despite using the FlashButtons generator. I uploaded the *.swf file to my Zude local files and obtained the file ID for it, then edited the object script to replace the *.swf filename with the file ID for my local copy of the Flash file. I then dropped the object script onto my Zude page. Not being too good with Flash, I gave up on this idea when my resulting object gave me a blank white rectangle on my page. Oh well, you can’t win them all! So instead I went back to my Toolbox and the GlassyButtons rollup, (after carefully deleting the Flash object and its supporting *.swf file from my local files, no point having it there if it won’t be used).

After uploading the generated button images to my local files, inserting the generated GlassyButtons code into the HEAD of my page, and dropping the object part of the script onto my Zude page, I had a wonderful button on my page that changed color when I hovered my mouse over it. I had carefully copied the internal page ID for the page that I wanted to link to when the said mouseover button was clicked, and it worked quite well, taking me to the requested page. The only problem was that it loaded the requested page inside the existing Zude page, so I ended up with two Zude toolbars at the top and two lots of advertising at the bottom of the page. Gah!

My solution to this little problem was to revisit my script and completely remove the URL reference that the script was calling. Now I end up with a pretty, color changing button that does absolutely nothing. Hang on, it’s not finished yet. Then, I went to the Object Properties, using the Zude built-in properties for my button. I edited the Action – Click property, to set the click action to load the relevant page of my Zudescape when the mouseover button is clicked. Now the script that I generated does the color changing part of the job, and the Zude built-in properties does the linking to the destination part of the job. And the page loads properly: one lot of adverts and one Zude menu bar.

Having all the elements of my new Enter Page in place for now, and having tested it all, I just had to let it loose on an unsuspecting public. For this I made great use of the page Import and Export functions of Zude, exporting both my new Enter Page and my existing Main page to my local hard drive. I then imported each into the other’s page, effectively swapping them around. I did this because it is the only way that I know of setting the contents of the Main page, which acts as the index.htm file of my Zudescape. The Main page is the one that load first when someone visits my Zudescape, so naturally I want that to be my new Enter Page. The final step of getting this all working properly was renaming the pages, and tweaking the Action – Click property of my mouseover button object to point to the proper page again, because having switched the pages over, it was left linking to itself. Lastly, my old Main page ended up inside the empty shell of the developmental stage of my new Enter Page, which was set to Private access. I just had to change it to Public and everything was working.

The first one to visit my new Enter Page, quite fittingly, was one of the 5Alive girls, and she said of it “oh my gosh its AWESOME really impressed nice work love the visit thing its awesome! good zudin.” I think she was being very generous, personally. To me it is a start, a beginning. I still want to get a picture from a real artist for the background, and also put a Flash splashpage onto it. Plus, there should be some information placed on the page, and perhaps the headlines from my latest Blog. I’ll revisit the Enter Page later, but next up I need to make the Welcome Page, which is to replace the old Main page. This is going to be the destination that the mouseover button links to, and which provides a first look at the standardized layout of my new Zudescape. The Enter Page is a one-off. It will be unique on my Zudescape. Everything else will be based on a standardized template.

The Private Pages
In preparing for designing my new Zudescape, I have created a set of “private” pages in my Zude account, which I will use for collecting my tools into, for testing pieces of my Zudescape before I apply them, and also one that is my project headquarters. This last one is not just the place where the workmen sit and drink coffee. It is the central hub for my Zudescape Development project.

Planning
The Planning page is where I keep my “To Do list”, and this Blog, and a corkboard for short notes and ideas, and also links to my toolbox and my testing areas. This is the project headquarters. Specifically, the page contains an embedded WordPress page for posting new blog entries. It also has a WidgetBox widget (or what they call a “blidget”) which I generated very quickly using the RSS feed address of my WordPress blog. This allows me to view all of my blog entries in a widget on my Zude page. The Planning page also contains an embedded Remember The Milk page. This is the site that I am using to manage my To Do list. I have also widgetised the output from Remember The Milk, this time using a widget from YourMinis, which allows me to view the RSS feed of the items on my To Do list. Then there is the corkboard. I am using a widget from RockYou for this, and it is quite awesome! I can add pictures or notes to the corkboard whenever I want to, and it automagically tracks the date and time that they were added. Finally there is a common banner at the top of the page, a page title and description, and links to the other project pages, including the “Playpens” and the toolbox. At the very bottom of the page is a copy of the default Zude object for tracking changes. This history log is going to be useful for keeping track of what I have done on my new Zudescape.

Playpens
I have two pages that I have set aside for tinkering. I call them playpens. Professional programmers would call them a “sandbox”. I’m not a professional programmer! I have a playpen! Basically they are a safe environment for me to practice with new objects, adjusting properties, and tweaking configurations of widgets and other objects before I add them to a page on my new Zudescape. The playpens are practically empty, having only the common banner, page title, description, and a link back to the Planning page. I have already started tinkering in one of the playpens. I have been experimenting with a website statistics and hit counter service called Auriq myRT. I have added the script that they provide into the HEAD block of the page. That, by the way, was one of the really cool things which I liked when I first found out about Zude. Being able to add things to the HEAD block of the page is quite rare. I am sure that you can’t do that on many of the large, popular social networking sites! The jury is still out for me on myRT, as I think it has a problem dealing with Zude’s DHTML pages, as it seems to need a physical URL to attach to, whereas Zude offers up URLs as queries from the index.htm page, using those huge long page ID numbers. I’ll keep you posted of my progress with this.

Toolbox
This page contains a whole heap of embedded websites and URL links to tools that I expect to need quick access to while I am developing my Zudescape. These tools include image editors and optimizers, color pickers, 3D text and button makers, page analysis tools, and widget catalogs. I am constantly adding to this list, but here is what I have so far…

Color Scheme Picker
Farbtastic Color Picker Widget
Glassy Button Generator
Pingdom Tools – Full page test
3D Text Maker
SiteReportCard Image Optimization
Image2HTML (slices up large images into HTML tables)
QuickThumbnail
FlashButtons
Dual Mouseover Machine Generator

As I say, I am constantly adding to this list. If anyone would like to recommend a site that I might be interested in, please leave a comment on this blog entry so that I know where to find it. I am specifically after sites that will help me to build a really awesome Zudescape, including Javascript and Flash based widgets.

So, that pretty much sums up who Jed Kantos is. What about this Zude thing? What is that? Even the creators of Zude have a tough time trying to answer that question! Zude is a website, located at http://www.zude.com which could variously be described as a home page hosting service, a social network like MySpace or Facebook, or an “enabling technology” which puts the power of the latest web technologies into the hands of anyone, even novice users. People who have a registered account on Zude are referred to as “Zuders”, and the collection of pages that they have created within Zude is called their “Zudescape”.

This blog serves the purpose of documenting my own development of my new Zudescape. I intend for my Zudescape to be a far-reaching, feature-rich, centralized hub for anything and everything to do with my web presence. Instead of being flung across the broad expanse of the World Wide Web, in a disjointed, ad-hoc fashion, my web presence is going to be unified. Everything that I do on the Internet can be brought together into one place here on Zude. I can even embed other websites into my Zudescape pages, just as I have embedded WordPress itself. Every entry that I make in this blog has been made from my Zude page.

My new Zudescape, naturally, is going to have a Barsoomian flavor. As I develop my new Zudescape, I will post blog entries of what I am doing, how I am achieving certain effects, what tools I use, etc, so that perhaps someone else might get some ideas for something that they could implement on their own Zudescape.