Note: woefully out of date. My current update process is all sql-based, so I'm leaving this up because it's probably more interesting.
Rant 10 - Updating the Website
There are a lot of artists / webmasters out there with tutorials explaining how they make their art- even I have one going over how I color some of my art. But if you go looking, almost no one has an explaination of how they edit and upload their website. It's like a personal secret more precious than our art techniques.
I think this is because a lot of us are afraid that people will stop taking us seriously if they see our webmastering methods, or maybe they're afraid that it'll pose a security hazard. Both are valid concerns, but at the same time, they're kinda silly. So I'm going to take the first step and go over how I do my work, step by step. Hopefully this will encourage and guide aspiring webmasters out there, as well as help out my staffers in case they get confused.
There are a number of definate steps I follow for every update. The order below is not necessarily the one I use all the time, but it's generally the most efficient and least confusing.
Note: I use a wide variety of tools for updating my website, most prominently Notepad+, but whatever works for you is fine. I used plain old Notepad for years before switching to Notepad+ (that's why some of the example screenshots show Notepad rather than Notepad+).
The logical first step is to make the content itself. This means deciding what I want to make (be it a sketch, 3d model, rant, etc), drawing or writing it, and then putting it into a web page. The best way to get the page started is to copy the page that preceeded it and then make the appropriate edits (this rant was copied from rant 09, and then most of the text was replaced). The benefit of this method is that you don't have to rewrite your HTML over and over, and mistakes are easy to track down.
It's very important during this stage to choose the right name for the content page- poorly chosen page names can kill a site. Stuff to watch out for includes: long names (more than 16 characters is bad), names that make no sense (jk54nf), names with spaces (ALWAYS use _ or -), and inconsistent names. All the rants have the r##- prefix, so that they're easy to keep straight. I wish I had started the sketches section with such a prefix, but I did not, and I'm suffering from that mistake.
Special note regarding php- a lot of sites use the url bar as a place to store varaiables (for example, /index.php?p=1&c=512 and so on). I'm really not a big fan of this, and avoiding it is probably in your best interest- but if you really need it, look into using MOD_REWRITE to mak your pages more human.
Once the content and its page are made, I need to make sure that all the support stuff is up to date. So for example, all the rants have a sub-navigation page to the left, so the php include that powers that has to be edited so the new page is included. All the art pages are strung together by an include that relies on an array for navigation. That array has to be updated in order for the "next" and "back" buttons to work.
The hardest part about this step is remembering to update the footer include I have that mentions when the site was last updated. I've had this micro-feature in effect since the site began, but for some reason I never remember it!
This is the what the rants sub-navigation used to look like, when it was in javascript rather than php. It's pretty simple if you understand JS, and easy to update, all I had to do was add that last line. Anyhow, the point is that if you don't use php you can alternately use Javascript to act *like* includes, mostly by abusing document.write().
Now that the page is fully functional, you have to be sure that it's linked to in all the places it should be. We've already updated the navigation include, so all we need to do is add links to the section index (in this case, rants.php) and the site map. The site map lists and links to all the pages in the site, so that people who are confused by my hierarchy of pages can find what they want. Below I show the addition of this page to the rants index.
Ooh, simple animation! I hope nobody gets a headache from this, but it was simpler than doing a rollover.
The next step is to prepare an announcement letting people know what content is being added. This takes the form of the newsposts, which are posted on the index page. I try to keep about 6 newsposts on the front page, so I'll delete the last one, copy the most recent one, and then change the relevant material.
This is also the point where I copy the newspost over to the history page and update the other stuff on that page. If it's a rant or art I add them to the lists, and I used to photoshop the little calendar images that sit to the right of the history page, but I've stopped doing that (lazy).
When I copy the most recent newspost, the darker highlighted stuff will need to be replaced, as well as the following post text. In order, the data is:
- the type of the post (for example, n for newspost),
- the month, day, and then year of the post,
- who is making the post (t for tentus, n for nashaii, a for 4drn),
- the weekday of the post (the faded words on the right of each newspost),
- the complete time of when the post was made (this is what readers see under my name),
- and the media I'm listening/watching/playing at the moment (can be anything).
Finally, the post itself should have a hyperlink to the new page somewhere in it. The javascript is kinda counter-intuitive at first, but having others right below helps, and this is much more efficient than the original system (which had us edit the html itself every time).
All right, everything is ready to be uploaded! My website is accessed through FTP, which means I use a simple program to upload the files to my webhost. I prefer to use FireFTP (a plugin for Firefox), because its built into Firefox and I don't have to bother with new windows, and I inevitably already have Firefox open. For work I generally use WinSCP, but it doesn't seem quite as reliable as FireFTP.
Because I've already successfully logged into my FTP before and saved the password and everything to FireFTP, all I have to do to conect is hit the "Connect" button in the upper left.
Once connected, the files on my web host appear on the right. My files are on the left, and are organized by date modified. That means I can just highlight all the files that have been modified since the last update, drag them over to the right side, and wait for the upload to finish. Other than just going through the folders and clicking "Overwrite", that's all there is to this step.
The final step is to browse through my site in Firefox and make sure everything uploaded right and I didn't forget anything. Usually I'll find something I forgot at this point, so this step is just as important as the others.
Well, I hope some people out there find this useful- I was certainly entertained by having to examine my own technique and habits. To any aspiring webmasters, I hope this is encouraging- if you think it's too complex, be aware that I have a really odd website, most sites don't have quite so many steps involved.
-Tentus