In this experiment, I created a completely customisable JavaScript-based alternative to the notoriously difficult-to-style <select> form control. It works by hiding the original select element, and when the user clicks on an option, the original control is automatically updated. This means that it also degrades nicely with JavaScript off, as the old select is simply not replaced and continues to be usable. It even works in IE6!
The default color schemes for websites on most browsers is black text on white background, a property that is taken from the system colors defined through the operating system. When designing a website, these settings are almost always overridden, through CSS or otherwise, by the design’s own colors.
Nevertheless, on some occasions, the default text, or more commonly the background, are left unstyled. In this case, most people will still see the background as white and everything will be fine. However, on some occasions clients may have high-contract schemes activated – an many of which are inverted. This means that all white colors become black, and blacks become white, on system-controlled interfaces. Most systems however give options or by default leave styling such as that done by webpages alone, so normally such a design would be unaltered. However, if the background and foreground colors aren’t properly defined, for example in a document with an unset background on explicitly set black text, then when system colors are changed the result may be black on grey or even black on black. Not very accessible.
So don’t forget to always explicitly define both foreground and background colors!
If you have visited this website before, you will have noticed that the design has now changed somewhat. We decided that the “dark” theme of our previous design was too uninviting, and that the organisation and priority of the information on the site could also do with some rethinking.
Therefore, in the new design the background is lighter, and the Blog and Portfolio sections have more prominance on the front page. The layouts of the portfolio page has also changed, with a more concise presentation.
The blog also gains a new “overview” page, allowing a quick glimpse of the current and popular posts, as well as a selection of random articles. We hope that you and other visitors will be able to discover more content in this manner.
Apart from that, not much, content-wise, has changed – you will still find all the old blog articles and lab projects available, though in the comments section of the blog you will be able to now see contributor’s Gravatars, and also websites if they entered one in the field.
If you have any comments, thoughts or suggestions on our redesign (or if you find any bugs), don’t hesitate to comment below. Otherwise, I hope you enjoy your experience on this site!
Some people like to print out websites, but with modern layouts and graphics the result isn’t always pleasant. However, using CSS to define sepearate and additional rules for print media is not difficult.
One of the primary tools the CSS specification gives us is a mechanism to specify different sets of rules for different media types, such as print, or projection (full list here). However, for this article we will just look at the print media type.
RSS is a popular format for syndicating news and other periodicals. There are many readers and aggregators for RSS available already, but sometimes you may want to display a certain feed on a website. In this article we’ll go through a simple way of parsing these feeds using PHP and the DOMDocument class.
If you haven’t used DOMDocument before, it is a really nifty tool for accessing, parsing and updating XML documents, as it allows you to traverse and manipulate the structure through standard Document Object Model methods, unlike other PHP XML readers, which had their own, well, slightly odd implementations.
In the early days of website design, pages couldn’t be more than a few kB in size, and often the only graphic elements would be a banner at the top of the page. Nowadays, however, with the advent of broadband and better tools such as CSS, a web design has become more of a wholistic excercise in which the whole page has to be considered as a single design. The days of “web banner” design are gone; while there may still be considered a portion of a page that is the banner it cannot be conceptualised or designed separately.
Sometimes object orientation is the way to go…
<?php
class Main {
function __construct() {
$this->output();
}
function output() {
echo "Hello world";
}
}
$main = new Main();
?>
… sometimes it just really really isn’t.
In this article I will walk you through making a simple but effective shoutbox, using PHP in the server-side, a MySQL database to store information and AJAX for smooth client interaction.
First, we will create the table that will hold the conversation history. Since in this shoutbox system we will not have users or any other complexities the table will be very simple, with four columns: the shout ID, the user, the time, and the actual shout.
CREATE TABLE shout (
id INT(8) NOT NULL PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(64) NOT NULL,
datetime INT(32) NOT NULL,
shout TEXT NOT NULL
);
In the beginning of typography, all fonts were created to be used in printing. In this way, they were optimised to be as easy to read as possible on paper. One of the techniques used was to serif the letters, embelishing the ends to emphasise the shape. Now, however, typography also has applications on the screen, for example in websites, and choosing fonts that are easy to read is just as important as in printing.
To this extent, there are now both many serif and sans-serif fonts available electronically. However, not all of them are suitable for the screen, and this applies in particular to the serif fonts.
The main problem with using fonts designed for print on screen media is that, not being intended for use as such, they do not scale well, and at lower point sizes can appear quite blurred. This is due to a lack of hinting, that is, additional information encoded into the font that allows better display at smaller sizes. This hinting is not needed on printed material as the resolution is very high, but on screen it can be a big problem.
To solve this problem some companies have created serif fonts with hinting, such as Microsoft’s Georgia. In these case, it is fine to use the font, but remember that the legibility advantages of serif fonts are negated on-screen.
In the end, as long as you choose a font that displays fine at the size you choose for it (don’t forget to check on all platforms (e.g. browsers or operating systems) the design is intended for, they render fonts differently), and it looks nice, there is no problem.
Since the Tutorial System 2 is now more or less defunct, or at least receiving no visitors, I thought that I should post the tutorials written on that system to the Aspektas Blog, so that people could continue to benefit from the knowledge imparted by the articles’ authors. Here is one of them.
_Customcursor\_mc__customcursor_ Mouse.hide()
startDrag(customcursor,true)