Happenings

PHP Challenge #3

As a result of some feedback, this challenge is going to be a bit more practical. The previous were practical in the sense that they could be used in some circumstances, but they had nothing to do with every day usage of PHP. This one does.

I want a function that takes in 3 variables:

  1. $Path: a directory path in the form “/path/to/folder”,
  2. $Filename: the name of some file (including extension, i.e. file.txt,
  3. $String: a string of characters

Now, the function must:

  • Create all directories in $Path that don’t already exist,
  • Create $Filename in the directory created by $Path,
  • Put the contents of $String into $Textfile

Please remember, I’ll be testing this on a Linux server so file permissions matter. You will almost certainly need the chmod() function.

The rules are:

  • The winner is the person who writes the most efficient script (i.e. the one whose script runs the fastest over several test runs). Size of the function is not an issue this time,
  • All functions should return a value of true if the operation is succesful, false otherwise,
  • All functions must be called FileCreator,
  • All functions submitted are considered public domain and hence can be reproduced and used with or without credit to anyone by anyone (so no bitching if someone rips off your script after the challenge finishes),
  • The winning script will be archived here for prosperity and to help others,
  • New rules may be added here at any time,
  • My decision is final,
  • All functions should be submitted to solitude@vkps.co.uk,
  • This is a slightly harder task, so the deadline is 12pm GMT on 19th March 2003

You have 11 days from now. Good luck!

PHP Challenge #2 Results

So the results are in from the second PHP challenge.

Runner-up was Plix with an entry that recursively slices a string of the numerals after comparing it to the number being thrown into the function. Quite clever, really. 236 bytes, in total.

Not clever enough, however, to beat ZeroByte who also won the last challenge. Rather than putting the numerals into a string and slicing it, he put them into an array and just pulled them out (although he admits he doesn’t know how the code works – he adapted a JavaScript version). So there you have it. Congrats to ZeroByte (again) and Plix!

The next challenge will be set within a few days.

All About The Structure

In response to my Graphic Vs. Web Design article, someone said:

So, when I begin by opening photoshop and making everything look cool, am I doing it all wrong?

Yes and no. It’s generally a good step to have a clear design in your head before starting anything (although, don’t be afraid to deviate from a preliminary design). But it should never be more than a concept.

Imagine what you want to do visually, see the words flow together in your sea of colours. Paint this picture, if you must, in Photoshop (or whatever package you want to use). Done? Now, throw it away immediately.

Let’s start again properly: take the content you want on a page and separate it into logical sections (content, navigation, header etc). We’ll do this (in mark-up) using the DIV tag. Importantly, give each of these top-level DIV’s a unique ID attribute. If each of those sections needs broken down further, then do that too (although you might be looking at giving these DIV’s generic classes, rather than ID’s). Iterate, until you’ve chopped your site into the smallest reasonable sections.

Take this site as an example. It has 3 top-level sections: Content, Navigation and Header. Now, it so happens that I only wanted a single title in the header, so DIV tags were omitted. They were unnecessary since the (unique) H1 tag takes care of anything that a DIV could. Navigation is broken into a several sections, but I’ll focus on the Content section.

First off, the Content DIV, has a header (H2). This is important since everything that follows is subordinate to this. In an outline view, you can easily determine that the content is part of “Happenings” (my own very special way of saying “News”). After this, each piece of content is broken into “BlogItem”‘s (a second-level DIV with a “BlogItem” class attribute attached to each one). These consist of 4 parts: A heading (H3), the date (a P with a date class attached), the content itself and a permanent link to that BlogItem.

The heading is self-explanatory: each part of a document should have an appropriate title which, in this case, happens to be at the H3 level since it is within elements containing H1 and H2 tags (the parent sections of our BlogItem’s). We could add further subheadings in our content, if necessary.

The date is a little more dubious. Some would make it an H4 heading. I disagree. In an outline of the document, nobody cares about the date something is posted. We would skim through the headings until we saw something that interests us, not when it was posted (“Oh yeah, this was posted on the 23rd February. I must read”). But it is useful meta-data. We can use it as frame of reference to put the content in.

The content itself is quite self-explanatory too: it’s what you wanted on the page. It’s why we’ve went to these lengths to create a well-structured document. Type it in. (There’s a lot to be said about marking-up content, but that goes way beyond the scope of this article – another time perhaps). Note that an article is logically separated into paragraphs, and these paragraphs into sentences. This is what we’re doing here, and on a larger scale.

Finally, we have a permanent link to each individual BlogItem. This is, again, meta-data. It’s useful to have an access mechanism to a given piece of content at the end (or beginning) of that content. We can then look back at it whenever we feel the need, without having to sift through the rest of the data structure.

I’m not saying this structure should be adopted for other sites, it just made sense for this site. Separate your own information into logical sections, to get a decent structure for your site.

Now I can already see the graphic designers and table fanatics at the back saying: “That’s not web design, it’s information management”. Well, yes, it is information management, and it’s also exactly what web design is based on. Now that we have a logical data structure for our information, we can make it look however we like. This is a secondary concern.

Because of our detailed structure (complete with IDs and classes), we can now generically access every similar item on every page in one clean swoop. That means that redesigning a site will now take minutes, rather than weeks. The data structure, free from style of any form, is mouldable at a higher level. For anyone who’s strived to change a site or make it look good in a brand new browser (how are those new table hacks coming along?), this will mean a lot. Actually styling the page is, again, beyond the scope of this article, but will be resolved at a later date.

To summarise, style should always come after structure. Once we have a structure, we can do what we like with it to make it look great. The same can’t be said in reverse.

The Music Industry

The whingers of the music industry are put into their places by Scott Andrew. With a million “artists” per required piece of art, we’re not in any shortage. Artists should, primarily, create art for themselves. Glad someone else sees it that way.

Graphic Vs Web design

Most web designers are terrible at web design. There, I said it. I’m not talking about the people who put up personal sites full of animated gifs that they stole from the thousand other personal sites that came before, or the small businessmen who get their wife to design a logo in their copy of Paint. I mean “professional” web designers.

Now, let me clarify slightly. The web designers who are terrible at web design are the ones who trained as graphics designers and jumped on the net bandwagon, thinking that it’s a graphical medium so the same approach always works. It’s not. Let’s say it loud and clear: graphic design and web design are very different disciplines, despite some similarities in function and possible conveyance.

Graphic and web design both share one key thing in common: they both aim to convey information in the best way possible. By this, I mean that not only is it important that the subject is understood by everyone, but is also accessible to everyone. And there lies a key difference; graphic design passed on as web design is not accessible and does not convey information well.

Imagine we have “Munky Cola”, the newest soft drink to enter the market. So new, in fact, that the manufacturers have yet to establish any real brand identity for themselves. They hire a design team to come up with a brand and marketing scheme. Being a traditional team primarily, they first create a logo for the company. This is a fine first step. A logo is a very simple way of getting immediate recognition for any brand. It can and should be permuated across all media.

Next, they create a series of graphic designs to be used as adverts. These centre on the brand and making it stick in peoples head; something funny or, perhaps, abstract. This is a fine second step. People now recognise the brand and associate it with a product or idea.

Then, they take their existing graphic design ideas and blindly transform them as closely as they can to the web environment, with some information or widgets related to the product/brand in some way. (By widgets, I mean tiny games or toys that the user can play with). This is a bad step. Using widgets is fine, they help strengthen a brand, but using the existing graphic design is bad web design.

Why? Websites are different, they serve a different purpose and must be treated as a different medium. What works for graphic design (abstract advertising) will not work on the web. Web users want information, they want to go beyond the elements of graphic design they’ve already seen, they want interaction. This is a key difference. Graphic design is a one-way medium: people can see it but they can’t do anything to it, they can’t be part of it. Web design is two-way: we can use it to convey more information about a project and, more powerfully, create a sense of community around it.

Think carefully about that last bit: a community means a constantly growing and returning audience. You can’t buy that kind of interest (whether you’re selling something or not). You also start to get a project which generates its own content. No need for a new graphic design every other week.

That takes care of the usability side of things. In terms of actual design (raw and dirty mark-up), it’s just plain wrong to treat a website as an example of graphic design. Sure, it should convey brand identity, but it shouldn’t be a graphically based. Using tables and all manors of redundant mark-up to get an image to sit just right on a site is missing the point. A web page is essentially a document (largely, just a piece of text) with special tags around parts of it to logically separate chunks of it and give certain parts meaning. This can’t be achieved through graphical means.

There’s a lot more to this, but I’ll leave that for another day. Just remember, next time you design a web site, make sure it’s a web site and not a graphic design.