Web-hacks for people who aren't programmers

I’m in the midst of redesigning our school’s website and I’ll be upfront, I’m not a web-designer.  Specifically, I can’t do much of anything beyond basic HTML.  There aren’t a lot of resources in a small private school so I sort of volunteered to take it on.  My goal is to make it user friendly and easy to update by multiple users. Lastly, everything (beyond hosting) had to be free .  Here is what I discovered (the coolest stuff is at the end of the post).

Ruled out without investigation

I thought a wordpress installation might work well, particularly for having multiple users, but ruled it out because there some design limits.  While you can do a lot with the sidebars and even create static pages, it is difficult for average users to make static pages with specific design elements or take out all the sidebar paraphernalia.  Since I don’t really know much about css, this also ruled out using a wiki and then creating my own style sheet.  Lastly, I ruled out dotnetnuke and joomla (both open source web-management systems) because it seemed like a lot for me to manage.

Approach 1: iWeb

I like iWeb and use it for the front page of my own website, but it has limitations – namely, no drop down menus.  After crossing some complicated hacks off my list, I found this option AllAboutiWeb.com.  The site has a number of other neat hacks that can be applied to iweb or non-iweb pages. It allows you to create a simple drop down menu like this:

Select a page. Mr. Mansour’s Classroom Most recent Ed Tech class I taught Favorite site created by students

I didn’t really want have to “open” the menu pages like the example above – just float over them with the mouse pointer to reveal the subpages. I found the solution at Milonic.com.  This site provides free, downloadable dhtml and javascript nested menus that are pretty easy to work with if you can play with some html.  You can embed the menu into an iWeb site and it will work, but for some odd reason iweb opens up the nested links within a frame on the same page.  It works fine on regular pages, but iWeb won’t display things correctly.

Beyond iWeb

I scratched iWeb off the list pretty early in my search.  While I would have been able to put in widgets that allowed others to update the site without using my personal computer, I didn’t want a site full of embedded widgets for simple text or pictures.  Besides, most widgets have some sort of advertising or logo on them that we didn’t want on our site.

My next stop was Yola, which allows you to download the sites you create (for free).  It’s really easy to use and easy to download, but not easy to install on your own hosting service.  After uploading the folder for a sample yolasite, I had to work with tech support to get it to work.  The next day I uploaded another sample site and the process started over again  (trying to make it work actually crashed our whole site temporarily).  I then noticed that our hosting provider allows you to use the weebly site builder for your site.  After I was assured that using this wouldn’t overwrite other files hosted on our site, I decided that this would definitely be the easiest way to go.  Since it publishes the files for the site you create directly into your hosting account, you can actually embed certain content that you wouldn’t be able to use with a regular weebly site (see next section).  After you choose a theme you can do whatever you like – drop down menus are a cinch and everything looks very clean.  Weebly is super easy to use and requires no programming knowledge at all.  To modify the site, anyone can log into the account, type any changes or add widgets, then hit publish – done.  If someone deletes something they shouldn’t, I’ve got the files and embed codes backed up.

The hacks

Though I can’t really write code from scratch,  I can embed with the best of them.  The challenge is finding services or codes that don’t have a huge logo or fee associated with them.  A quick search got me to DynamicDrive.com, which has free code for pretty much anything you can imagine.  Unfortunately, most of these things wouldn’t work with weebly pages, unless I personally modified the html each time someone republished the page in Weebly – not an option.  If you’re doing something on a straight html page, Dynamic Drive has a lot of options.

More than anything, I just wanted a nice slide to use on the site.  Gickr allows you to make simple animated gifs, which have an easy embed code and are perfect for tiny slideshows – but not for larger ones.  Advancing Hearts and Minds Flickr and Picasa also have nice, easy slideshows, but I wanted something a little flashier.  This meant flash, for which I have neither the software or know-how.  In lieu of flash I looked at some javascript based options and took a stab at HTML 5. I wasn’t able to get either of them to really work, though you can make some nice javascript ones and embed fairly easily with http://www.visualslideshow.com.  Unfortunately, you’ve got to pay to get ride of the logo.  See example.

After a little more fishing, I found some good flash slide shows that I figured out how to edit (and get on the web) after a little trial and error.  All I had to do was change the file path (example: /images/012.jpg —> /mypics/school.jpg) on an xml file to the pictures I wanted in the slideshow.  The first slideshows I made are from simpleviewer.net.  It has some very cool slideshows that you can grab.  Using a tutorial from Sevario I managed to embed it.  The embed below is a sample set to a Flickr gallery.  You can see the one I created here (lower right side of page).

The very best ones I found though came from Sevario on flshow.net. These are completely free with a barely noticeable logo. To make it do what you want just copy or download the xml code from the site and put in the correct path to your pictures. To embed your own, follow the directions here. For the slideshow below, I just created some slides on a PowerPoint, saved them as pictures, and placed them in the correct folder on our web server (per the directions on the site above). I used some of the extra xml code he has posted on the site to make the pictures rotate slower than the default. There are some other cool slideshows he has built that are also on the site.

Though most of these codes seem a little daunting to an unseasoned programmer (me), making them work usually meant changing the file path to the pictures you want in the slideshow – nothing more. You will need access to your own web host, but beyond that it’s mostly copying and pasting text. I didn’t write any of my own code for any of these embeds.  I’m still searching and fiddling with some new tools, but I’ll post the site when it’s finished.