Sponsor: The JavaScript Anthology
The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks (external link)
Browse Blog Archives
« March 2008 April 2008 May 2008 »
Blog Entries from April 2008
-
Content Box Using CSS and Photoshop
Today we are going to create a simple and stylish content box using CSS and Adobe Photoshop! Many people don't realise the possibilities of combining Photoshop and CSS. So today we are going to make a basic content box using CSS and then style it using Photoshop! You ready? Great, let's get this thing going!
CSS
We will start off with the HTML for our box:
XHTML
<div id="content">
<h1>Your Header</h1>
<p>
Your text goes here.
</p>
</div>Now, if you save this and look at it, it looks pretty ugly doesn't it? Well let's style it with some CSS then:
CSS
div#content {
background: #FFF;
border: 1px solid #000;
margin: 2px;
width: 400px;
}
div#content h1 {
border-bottom: 3px solid #980A0A;
font-family: Verdana;
font-size: 20px;
font-weight: normal;
margin: 3px 3px 5px 3px;
padding: 1px 1px 1px 22px;
}
div#content p {
color: #000;
font-family: Verdana;
font-size: 13px;
margin: 10px 10px 10px 10px;
padding: 5px 5px 5px 5px;
}
div#content p:first-letter {
color: #980A0A;
font-size: 20px;
font-weight: bold;
padding: 5px 3px 3px 5px;
}If we have a look, the content box looks okay - a bit plain - and the padding looks a tad much on the left side of the header (this is where we will fit the image in the next part). How do we fix this? Well, this is where Photoshop comes into the picture!
Photoshop
Open up Photoshop. Create a new file with a width of 20px and a height of 20px. Remember to make sure that your content box background is the same as the one in the image. For the header, I'm going to use Lowter's logo, but you can use whatever image you would like.
Next, create a new layer. Right click on your new layer and click "Blending Options" and then "Stroke", using these settings:
Now, I am going to use a dark green for the stroke because the arrow itself is green. I suggest that you use a darker colour than the colour of your icon; in my opinion, it gives the best result.
Next, let's make it look even better! Grab the "Gradient Tool" and make sure you use these settings:
Create a new layer. Then, right click on the thumbnail of your layer with the icon on it. You should have the old icon selected; so then go back to your newest layer and, with the "Gradient Tool", drag from the top-left corner to about the middle of your icon. Now you have a pretty nice shine on your icon. To make it look even better, lower the opacity to around 85%.
We're done with the header image, so let's see how it looks. Save your image as "header_icon.png" and then add this line to your <h1> CSS code:
CSS
background: url(header_icon.png) no-repeat;There, now have a look at your header, looks pretty nice doesn't it? You can use the same technique to style other areas of your CSS box, imposing images in the background to spice things up. I did this for the first letters of each paragraph and here is my final result:
Not too shabby and with more work it is very easy to create stylish content boxes using CSS and Photoshop!
-
Planning a Semantic Website
IBM just recently published a fantastic article about planning a semantic website (external link), covering existing ways to code semantic markup. Most useful in this article is using existing technologies to make your website semantic today, without interfering with the existing experience of your users. Most useful in my opinion are microformats, which can be easily implemented; although, granted, there is little utilisation of them yet in web browsers. Also important is the semantic URI, which is certainly an issue on many websites, with these forever confusing URIs that lend no hint towards their contents. I have always found an interest in simple, semantic markup, so this article was an interesting read; it reminded me I want to use more microformats in my coding where appropriate. There is nothing overly revolutionary in this article, but it makes a nice summary on web semantics and the available semantic technologies/standards used today.
-
8 Useful CSS Techniques
Sitepoint just recently published a new article about some cool CSS techniques: Tomorrow's CSS Today: 8 Techniques They Don't Want You To Know (external link). Overall, the article presents some documentation on various CSS selectors and goodies that you might find interesting. Not all of them have great browser support, but the article shows examples of how they degrade peacefully in non-supported browsers. Personally, I wish the attribute selectors of CSS worked across browsers as they would be extremely useful for so many things. For example, on Lowter, we place a small arrow icon next to links leaving the website, but we have to assign these links a CSS class to do so. We could do it much easier using attribute selectors, but browser support for them is extremely poor. Oh well, perhaps it will improve in the future. Until then, this article presents a lot of nice things that should eventually be more usable. It is a good read nonetheless.
-
PHP: Determining MIME Type
PHP lacks a definite way to detect the MIME type of a file across each PHP version. Older versions of PHP use the mime_content_type() (external link) function, whereas more recent versions encourage the use of the Fileinfo (external link) set of functions. These variations present a difficulty when developing an application that must work across multiple versions and installations of PHP. In order to solve this problem, I use the following code to create a function to check the MIME type of a file regardless of the development environment:
PHP
<?php
// Setup replacement functions for the deprecated mime_content_type()
if (!function_exists('mime_content_type'))
{
// If Fileinfo extension is installed
if (function_exists('finfo_file'))
{
/**
* Determine a file's MIME type
*
* @param string $file File path
* @return string
*/
function mime_content_type($file)
{
$finfo = finfo_open(FILEINFO_MIME);
$mimetype = finfo_file($finfo, $file);
finfo_close($finfo);
return $mimetype;
}
}
// Otherwise use this method, which will not work on Windows
else
{
/**
* Determine a file's MIME type
*
* @param string $file File path
* @return string
*/
function mime_content_type($file)
{
return trim(exec('file -bi '.escapeshellarg($file)));
}
}
}
?>Now, with this code placed in some universally-included file, you can determine the MIME type just by using
mime_content_type(some_file). The above code handles determining which way to determine the MIME type based on the current installation of PHP under which it is being run.Sometimes,
Fileinfowill not be installed on the server, in which case you can use a shell command to determine the MIME type as well. The only dilemma this code does not solve is a Windows installation of PHP withoutmime_content_type()andFileinfosupport. However, considering most servers running PHP are also running Linux (not Windows), this seems like an unlikely occurrence. -
4 Years of Lowter: A Look through the Past
Today marks the four year anniversary of Lowter! It certainly has been a great four years chatting with good friends on the forums and watching the site grow immensely. For some of our older members, this blog post should remind you of some of Lowter's earlier days and for others it gives a perspective into Lowter's development. It is interesting to see how the site has developed from Lowter Studios (a mere hobby site) into the Lowter we know today.
Using archive.org (external link), my own code archives, and other resources, I have drawn together some screenshots of what Lowter use to look like. However, most of the screenshots are missing a lot of images and such, but they still give you a general feel of the layout.
Pre-2004: Avidgamers and Watchzine
Lowter had its origins on Avidgamers, a community development platform, where people could easily develop their own community websites (with forums, messaging, etc.). Avidgamers was a rather big community, with thousands of community websites and website-owners. Personally, I started off with an RPG site, before I moved on to starting my first web development resource community.
In the early days, Lowter started off as the University of Scripting, a site dedicated to Avidgamer-related scripts and tutorials. The UOS (as it was called) was mildly successful, having a few thousand members from the AG community. However, the important aspect at AG was the team that developed to administer the UOS, which (for the most part) still stands behind Lowter. The development team behind the UOS was myself (Ethan), Matt, Daniel, and Tommy. Markus and Kristoffer were both only moderators at the time, if I remember correctly.
Another community worth mentioning is Watchzine (formerly the Watchtower). On Avidgamers, the Watchtower was a rather successful design and development community, quite well known amongst the older AG members. They decided to move the site off of the AG platform onto its own domain and platform, renaming the new site Watchzine. I myself was a very active member of Watchzine, even though I basically ran a competing website. In the end, Watchzine sort of ended and a few of the active members moved over to Lowter (particularly Frans and Tom). However, Watchzine, in my opinion, is an important part of Lowter's community history. I still miss Watchzine sometimes.
2004: Early Development and Lots of Dark Colours
When the UOS decided also to move off of the AG platform, we renamed the site Lowter Studios. Everything was custom developed, particularly with the help of Frans de Jonge and Matt Durnan from Watchzine, who both helped me a lot with coding. Every layout used dark colouring: black, greys, etc. I find the fact that every layout was dark funny considering everything I do now is bright and on a white background. Quite frankly, the older layouts I designed look awful now that I am looking back on them. Also, Lowter Studios had a number of internal layouts that the user could switch between, but I was not able to recover any of these sadly.
Everything was rather chaotic at Lowter Studios when it first started up, with the direction of the site being rather hazy. However, it was a blast! The first day of being open to the public I can remember being up all night talking back and forth with Matt and Tommy (who, may I remind, took a picture of himself with his underwear on his head for his avatar) on the forums. It was only a hobby site really, but that made it exceedingly enjoyable.
After awhile, we wanted to improve the image of Lowter Studios and focus more on web development and technology. In order to give a more professional feel, we changed the name to Lowter, dropping the "studios" part of our name. We also adopted the "L" arrow that we still use today. We used the red-grey layout for quite a long period of time; in my mind it is our "first" layout, as I consider Lowter before this layout as basically in beta.
2005 - 2006: Reaching Maturity
I should note that between the red-grey layout and blue-green layout below we had another design. However, I cannot obtain a copy of what this layout looked like. It was similar to the layout below, but the colouring was harsher and it had a lot of little icons (I honestly just have a huge folder of icons from this design).
Lowter further developed to focus again on a more professional feel. The newer design brightened up colours, reduced graphics, and worked better across different screen sizes and web browsers. Activity on the site started to slow down as our content requirements became more stringent (we wanted longer and better quality articles). We did a lot of experimentation, particularly with our newsletter, which we ended up discontinuing. The site was mature, selling ads, and receiving more and more traffic.
2007 - present: Professionalism and Future Developments
The layout is quite refined and organised, visually and code-wise. Everything is aimed to have a high level of professionalism. The members of the administrative team are starting to go their own separate paths in life, being occupied with school, friends, family, etc. However, this does not mean the end of Lowter any time soon; there is still much more beyond the horizon for our little web development community.
O! A toast to the four years of Lowter and a toast to the many years to come!
Browse Blog Archives
« March 2008 April 2008 May 2008 »
Sponsor: Sunbird Calendar Application
Manage your schedule easily and store it where you want to. (external link)
