When you export graphics to be used in web pages, file size is important and for as obsolete as Gifs may seem to the eyes of some, don’t be mistaken,
the indexed color system isn’t going anywhere. Even if Gifs are a bit in decline, Png files can use the indexed color system and this is actually very useful.

Despite the predominance of Jpegs and support to millions of colours, many images are simple enough that they could benefit of using more modest color systems
like indexed color which allows for up to 256 colours but allows you to control with precision which colours these would be and exactly how many, allowing for
extremely compact image sizes.

The RGB system allows you to represent up to 16,777,216 colours. Each colour is represented by 24bits; 8 bits for each of the red, green and blue channels.

This is the cost of having a wide colour spectrum for an image, which is much welcome for that picture you took at the paradisiac island you went on your last holidays.
You need blues and greens for skies and sea, yellows, oranges and reds for the flowers and exotic birds and so on. You can’t settle for less.

Now, how about the icons on your navigation bar? Say they are 16px tall and 16pixels wide. They have only 256 pixels overall, so you can’t possibly have more
than 256 colours, even if no two pixels share the same.

Of course is very rare that an image has every single pixel of a different colour, so in practice you have significantly bigger images with no more than 256 colours.
Further, there are types of images that, for as big as they can be, they have a limited number of colours, for instance, illustrations and drawings with no gradients
or with small ones.

This is where the indexed color system comes in handy.

In this mode, you can have only up 8 bits per pixel. Compared with 24 in RGB, that is a third of the uncompressed size. Very tempting and even more so when
you discover that you can specify the image depth (the amount of bits per pixel) to any amount up to 8. So, if you can afford to have only 16 colours, you only
need 4 bits per pixel.

Photoshop, just as any other half-decent image editor, will allow you to work in RGB for flexibility and to export files in indexed colour on Gif or PNG format for
the web (and on several other formats, that I won’t cover here).

Now, it is a fact that if we remove some of the colours of a colourful image we won’t notice. In fact, this is how the Jpeg compression algorithm works; it will discard
colour information to reduce the file size.

The GIF and PNG compression algorithms are quite different and, in fact you can use that to your advantage, because while the Jpeg will always discard colour information,
the GIF and PNG compression algorithms are conservative and they will preserve your image intact. This is particularly important for drawings and illustrations that have
much less details than photographs and even little losses can be quite damaging.

But having said that, you can use photoshop to discard some of the colours in the image before you export them as GIF or PNG.

To save images for the web in Photoshop, you have to go to File → “Save for web & Devices”. A dialog will open showing you the original image and how the final image will look like.

Now, in the right pane, you’ll see several options and if you select either PNG-8 or GIF, you will have a box for the colour reduction algorithm that allows you to chose
from

• Perceptual
• Selective
• Adaptive
• Restrictive (Web)
• Custom
• Black & White
• Grayscale
• MacOS
• Windows

Let’s start for the easy ones. Black & white will make pixels either black or white. No shades of gray, no colours, only one bit for each pixel. Grayscale will use
8 bits per pixel and will approximate each pixel to a shade of gray, the resulting image will have no colour, but will have shades of gray. MacOS and Windows will
approximate the colours on the image to the closest colour of the basic palette of these systems and custom will allow you to pick the colours you want on your palette.

Custom is very powerful, but can also be very annoying. Also, very often you already selected some colours that you’ve put on your image and you want to preserve.

This is where Perceptual, Selective and Adaptive come in.

If the original image contains more colours than the output file (you can select the number of colours on the right pane, up to 256) some will have to be adapted.

The Perceptual algorithm will create a palette that prioritizes the colours that the human eye has greater sensitivity. This means that colours that appear more
frequently may not be present in the resulting image at all.

The Selective algorithm will prioritize broad regions of colours. If you want to keep your colours as faithful as possible
to the original, this one is more likely to do that.

The Adaptive algorithm on the other hand will prioritize the colours present in more pixels across the image. Predominant hues will have more tones
in the palette.

Finally, Restritive (web) is a bit out of fashion these days but in the old days when was uncommon for computer monitors to show more than 256 colours
a special palette was created for the web with colours that any monitor would be able to show. This palette is made of 6 equidistant shades of each of the three
RGB channels. The tones are 0×00, 0×33, 0×66, 0×99, 0xcc and 0xff. Meaning that you can combine these to form the 216 colours of the web palette, for instance
the colour 0x33ffcc is a web safe colour. You may never need this last one, but it won’t hurt to know either, right?

Or maybe you just want to change the structure of your URLs or you want a different URI structure in the new domain.

Let’s see how to write some htaccess rules so Apache can do the magic for you.

Redirect the whole domain

Redirecting a whole domain with .htaccess rules is easy. All you have to do is to put the rules below in an file named .htaccess
in the root directory for your old domain.

RewriteEngine on
RewriteRule ^(.∗)$ http://www.newdomain.com/$1 [R=301,L]

Let’s see how the magic happens.

The first line is merely to turn on the Rewrite engine on apache and enable the rewrite rules to be interpreted.

The second line is composed of 4 parts.

1. The RewriteRule keyword
2. A regular expression (regex) to match the original URI
3. The URI to be redirected to and
4. Parameters

The regular expression in this case is ^(.*)$. The dot, in a regular expression matches a character, any character except the newline.
That means that any letter, number or symbol container in a URL will be matched. The asterisk (∗) means that you want to repeat the regex it affects
zero or more times.

Simply put, (.∗) matches any amount of non-newline characters, including zero.

Additionally, the carat (^) represents the start of a line and the dollar sign ($) represents the end, so the whole expression
matches a line of zero or more non-newline characters, i.e., the whole path of your URI inside your domain.

The third part is the URI to redirect to. As you see, is pretty straightforward, the only tricky bit is the $1.

The reason for it is that you don’t want to redirect any URI in the old domain to the root of your new domain. What you want is to redirect
each page for the equivalent in the new one. For instance this URI

http://www.oldomain.com/path/to/page

Should redirect to

http://www.newomain.com/path/to/page

Now, for every regular expression inside parenthesis the text it matches is stored for use in the third part as a variable. The variables are called
$1, $2, $3 and so on. We have only one Regex matching the whole path (remember the domain name is not included)
so we have the whole path stored in $1.

Altering the URI structure

It may be the case that you don’t like the current structure of your URI’s. If your blog has URIs like this

www.olddomain.com/blog/category/2009-12-20-post-title

Say we decide dates are not that important, we only want to keep the year, and we want it separated by a slash, rather than a dash. Additionally,
we want to get rid of the ‘blog’ keyword, since the whole domain is for the blog. The following rule will do the trick.

RewriteEngine on
RewriteRule ^blog/(.∗)/([0-9][0-9][0-9][0-9])-([0-9][0-9])-([0-9][0-9])-(.∗)$ http://www.newdomain.com/$1/$2/$5 [R=301,L]

Here we have 5 matches being put into variables, one for each pair of parenthesis.

The category ($1)

Matches the first set of non-newline characteres after ‘blog/’ and the before the following slash.

The Year ($2)

Matches 4 consecutive digits after the second slash and before the first dash after that

The Month ($3)

Matches 2 consecutive digits between the first and second dashes after the second slash

The day ($4)

Matches 2 consecutive digits between the second and third dashes after the second slash

The Post Slug ($5)

Matches all the rest of the line

Before we proceed, notice a peculiarity here. Because the rule starts with the carat (^) and ends with the dollar sign ($) you are
matching the whole line in this format. If the URI doesn’t start exactly with “blog/” and has the exact amount of slashes and dashes
we specified it won’t be a match and will be ignored. Also, the category may be empty, as long as the two slashes are there, but the digits
must be present in exact amounts. That, of course, is to be expected of any previously valid URL on the domain.

Now that we have the five variables with the orginal information parsed, we can use them as we want. We decided to get rid of the blog part (which we
are matching literally, instead of via regex, because it’s too simple), month and day and reorganize category, year and post slug. We will use the
first, second and fifth variables and simply ignore the rest.

http://www.newdomain.com/$1/$2/$5/

If you don’t want to redirect to a new domain but just rearrange the URIs within it, you may simply omit the domain on the redirection and use these rules

RewriteEngine on
RewriteRule ^blog/(.∗)/([0-9][0-9][0-9][0-9])-([0-9][0-9])-([0-9][0-9])-(.∗)$ /$1/$2/$5 [R=301,L]

Reusing the domain for a different project

More often than not, after a domain redirect, the old domain will remain merely as an entry point for redirection. People do that for several reasons,
one of them is that readers can be confused to find the old URLs being redirected to a new site and the domain being used for a new site.

But deciding whether or not to reuse your domain is outside the scope of this post. You may be splitting your site in two and you’ll leave part of it in
the old domain or after a few years, links to your old domain may be minimal or, simply, you may have a better strategy that I can thing while writing this.

In any case, if you want to reuse your domain at some point, you must be aware of a few things.

All the URI’s redirected are taken and can’t be reused without disabling the redirection. You guessed that, of course, but you have to keep in mind that
when you are using regexes for your redirects you are matching a whole class of URIs, even some that have not being used but match the pattern.

If you hurried up and used the first rule (repeated below) you are matching every single URI within the old domain and it means that any content there
will be unreachable because the redirection rules will take precedence.

RewriteEngine on
RewriteRule ^(.∗)$ http://www.newdomain.com/$1 [R=301,L]

If you used the second rule (repeated below) you are targetting a much more specific set of URIs. Anything that doesn’t have the exact format described
(/blog/[characters]/[4digits]-[2digits]-[2digits]-[characters]) will be reachable.

RewriteEngine on
RewriteRule ^blog/(.∗)/([0-9][0-9][0-9][0-9])-([0-9][0-9])-([0-9][0-9])-(.∗)$ http://www.newdomain.com/$1/$2/$5 [R=301,L]

You’ll be able to even run a blog under http://www.olddomain.com/blog/ as long as you don’t use the exact same URI structure. Again
whether or not this is a good idea is up to you to decide.

301 or 302 redirects

Finally, you may have noticed that one of the parameters on the last part of the rules is the number 301. This is the type of redirection you are
performing. You can use either 301 or 302 as redirection codes, 301 stands for a permanent redirection, whereas 302 stands for a temporary redirection.

Redirection codes are informed to user agents (browsers), search bots and anyone else who may want to know. While both redirection codes will take you
to the new URI, there are important consequences of choosing either.

Because user agents and bots are informed of the redirection code, they can take actions based on them.

A temporary redirection is equivalent to an “Out For Lunch” sign. For some reason, the page is being redirected, but you are confirming the user is on
the permanent URI for the resource. Bear in mind that “temporary” doesn’t imply in any length of time, you are only saying “Yes, this is the URI. We
are operating there right now, but come back here the next time”.

Reasons for that could be:

A permanent redirection is stronger, it is equivalent to say “We moved, we are now operating there and we are not coming back. Next time
you may prefer to go there straight away”. The consequence of that
is that search bots, intelligent user agents, social bookmarking sites and whoever else may care, can update their links to the new location.

This is what is going to make possible for Search Engines to transfer the status of your site to the new structure.

Pages and subpages

In a conventional CMS, pages within a web site are classified in sections and subsections. Each section tipically contain a description of what the section is about and links to its subsections and pages.

Each CMS has its own way to do it and often its own jargon but, ultimately, it is the same philosophy.

WordPress is not different in this respect. If you want to use it to run a regular (non-blog) web-site, you can.

WordPress has a feature called pages, which are very similar to posts in many aspects, but they differ, essentially, in the fact that there is no chronology associated to it, pretty much like traditional web pages.

In order to run a non-blog website with WordPress, you’ll rely on pages, rather than posts, to publish your content, and this also means that the publish date of this content will be much less important than in a blog, if important at all.

That might be good enough for a small site with half a dozen pages, but what if you have slightly bigger ambitions and you need to categorize your content?

Time for an example

Say you run a cooking site (not blog!) and you need the following pages/sections: Recipes, Desserts, Nutritional facts and an About page.

In WordPress, the way to do it is to create a page for each one. Each page in WordPress can have a parent page and all pages can be parents as well. These will be the topmost pages, so they have no parent but some of these pages will also work as sections by being parents of other pages.

For the rest of the content, each time you publish a recipe, you will create a page for it, and you will set the main recipes page as a parent. In this way, all recipes are sub pages of the recipes page, and the recipes page immediately becomes a category, as much as a page.

The same goes for the recipes and nutritional facts, but let’s give a bit of attention to the about page.

Although the about page will be categorized as a root page and be on the same level than the main categories, the about page can merely be a plain a simple page with no children.

Because of the way pages are categorized as sub-pages of other pages, you don’t have to distinguish sections from regular pages. In addition, if one day you want to add sections the the about page (eg, about the authors, our history, etc) you can simply create the pages and set the about page as parent.

Thanks to the ability to create different page templates, you can even style each section or page differently.

Posts and categories

For a person with a background stronger in blogs than in static websites, categories might seem missing for pages on WordPress, but actually is the other way around. For someone coming from a static sites background, the problem might seem to be quite the opposite.

The only basic difference between pages in static sites and posts in a blog is that posts follow a chronological sequence, while pages just sit there and the sequence in which they were written is not quite important.

Although this is the only remarkable difference, this radically changes the way authors and readers approach to each kind of website, and consequently the features a CMS needs to implement for each one.

For instance, blogs are meant to be followed over time. The latest information is supposed to be the most important at a given time and that is why posts are presented in reverse chronological order. It shouldn’t have to be like this, but is quite convenient.

Now, having said that, this doesn’t imply that older posts aren’t useful, and they should be made available in and presented in an organized way. But because the chronological factor, a blog has a few extra challenges on the organization subject.

• Usually, much more content is created for a blog than for a static site
• With the continuous addition of new content, classifications can grow obsolete pretty quicly
• New sections may be needed and accommodate them must be made easy
• Posts might belong to more than one section as time goes by

Regarding a section of pages as a page on itself does make sense, but a post section being regarded as a post makes no sense at all. I explain:

A post is characterized as such by its chronological aspect while categories’ creation date on themselves usually have no importance at all. Hence, there is no sense in regarding a category as a post. Actually, if you come to think of it, this paragraph is almost unnecessary as this though is pretty much counter-intuitive.

Enter categories!

Categories are simply a name you can create and you can relate posts with, pretty much as parent pages.

And similarities don’t stop there. A category might have a parent category, just like pages.

Also, you might not be aware, but WordPress allow you to create different pages for displaying each category, so if you have a limited number of them or if you want to highlight some, you can actually style a template that work as parent page in most aspects. But this is out of the scope of this post and in material for a future discussion.

At the end of this post, you’ll find the complete code in a single piece.

Step 1: Create the template file and find the content area

The first thing to do is create a new template page for your theme. The easiest way to do it is by duplicating your default page template which is the file “page.php”. Login via FTP, SSH or your favorite method an copy that file to “category_archive.php” and start editing.

Edit your file so at the very beginning it has the following lines, they are responsible for telling WordPress this is a template page and its name.

<?php
/*
Template Name: CategoryArchive
*/
?>

The reason why we copied the default page instead of starting from the scratch is that any theme has is peculiarities (footer, sidebar, header, this and that) and we want to preserve them all, we just want to change the content. So, now, you must find the content.

It is probably different on your theme, but in mine, I find content starts after this

<div id="main">
<div id="container">
<?php include("menu-sec.php"); ?>
	<div id="content">

And ends just before this

	</div><!-- content -->
</div><!-- container -->

<?php get_sidebar(); ?>
<div class="clearer"></div>
</div><!-- main -->

<?php get_footer(); ?>

Step 2: Find the categories and loop through them

Once you have located the content area let’s get to the PHP code to make the magic happen.

First you have to inquiry WordPress for the categories

<?php $cats = get_categories("hierarchical=0"); ?>

Then loop through them and display them. Don’t forget to check for NULL entries: a sanity check. In case something goes wrong and no categories are returned the script will do nothing instead of crashing.

<?php if($cats != NULL) { ?>
		<ul>
		<?php foreach ($cats as $cat) { ?>
			<li>
			<?php if($cat != NULL) {
				$base_url = get_bloginfo('home') . "/category/" . $cat->slug; ?>
				<h3><a href="<?php echo $base_url?>"><?php echo $cat->cat_name?></a></h3>
			<?php } ?>

			<?php // Show category description
				if ($cat->category_description != NULL) ?>
					<p><?php echo $cat->category_description ?></p>

For each category, we are presenting the title and the description. Additionally, the category name is a link to the regular category listing page, so people can dig further on a category, if they want to.

Step 3: Find the posts filed under each category and display them

On each iteration of the loop above, besides presenting the category info, we need to query the posts filed under that particular category and display them. Start by querying WordPress about the posts of the category you are in.

<?php $myposts = get_posts("numberposts=-1&category=$cat->cat_ID"); ?>

(UPDATE: get_posts parameters updated to avoid the default limit of 5 posts, thanks Chuck for pointing out the problem.)

And then, loop through them displaying its name and permalink. And, once we have our hands on it, lets add it a touch of class and display the date in which it was published.

<ul>
<?php foreach($myposts as $post) : ?>
	<li><?php the_time('M d') ?>. <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>

Don’t forget to close the outer loop:

<?php } ?>

Step 4: Create a page using the layout you just made

Now that you have created a page template for your category based archive, you must create a page using it.

Go to the admin panel on your blog, to the write page interface and create your page normally, except that on the right panel, under “Page Template” you’ll chose “CategoryArchive”. Chose a nice Post Slug for it if you want and a descriptive title but you don’t need to put any content because it won’t show anyway.

The complete code to copy and paste

If you find it difficult to copy and paste all the pieces of this tutorial, here is the complete code that you can just copy and paste inside the content of your page template.

Just remember that this is NOT the complete template, as it changes from theme to theme, this is only the juicy part of it, enjoy.

<?php $cats = get_categories("hierarchical=0"); ?>

<?php if($cats != NULL) { ?>
		<ul>
		<?php foreach ($cats as $cat) { ?>
			<li>

			<?php if($cat != NULL) {
				$base_url = get_bloginfo('home') . "/category/" . $cat->slug; ?>
				<h3><a href="<?php echo $base_url?>"><?php echo $cat->cat_name?></a></h3>
			<?php } ?>

			<?php // Show category description
				if ($cat->category_description != NULL) ?>
					<p><?php echo $cat->category_description ?></p>

				<?php $myposts = get_posts("category=$cat->cat_ID"); ?>
				<ul>
				<?php foreach($myposts as $post) : ?>
					<li><?php the_time('M d') ?>. <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
				<?php endforeach; ?>
				</ul>
			</li>
	<?php } ?>
		</ul>
<?php } ?>

Who is using it

• PS Hero
• Morpho Designs

Zo’C has entered the age of video. It took me a while to get all things right, but better safe than sorry isn’t it?

I intend to periodically share some videos on web design and development things. That can be Photoshop, Illustrator, how to install a tool, CSS tricks and so on. It could just as well be about videoblogging.

For my first tutorial on this new era I’m going to teach you how to create a cool animation in Photoshop like the one on my last post about videoblogging and podcasting and I’ll show you how to export it in several video formats including Flash video, Quicktime .mov and animated Gif’s.

Have a lot of fun!

Oh, and did I mention that you can subscribe via iTunes or any other tool via media feed.

While probloggers build monetization and authority strategies for blogs and internet media sites, millions of other people just share their pictures in social sites like flickr, videos on youtube and so on.

The curious thing is that, to a certain measure, people are more interested in spontaneity than production. The fact that most people on the internet have access to rather advanced technology, makes it less interesting to see the technology by itself and more interesting to focus on each one’s perspective and enables people to use the technology to share those unique skills and ideas each one has.

Michael Martine would go as far as to say:

Over-analyzing before you begin is the best way to kill something before it even has a chance. Just go for it.

But of course you can’t do anything if you can’t handle this technology, so here is a quick guide of interesting stuff around the web, either if you want to be a web video entrepreneur or if you just want to share videos with your friends

How do I make a video easily?

The straight answer would be

1. Get a webcam
2. Configure it
3. Make test videos (and don’t bother to edit them)
4. Make a real video
5. Upload it and spread the word

It is a little rude to put things like that, but it can actually be that easy. Check Michael Martine’s post to read details on each of these points

How do I create a video show?

Well, if you want to publish a videoblog, then you have to start to concern about other things like giving your video posts a sense of sequence and identity. In other words, you need to think of it as a show.

Youtube isn’t probably the best tool. You’ll need a system that offers you more that merely hosting your videos, you’ll need a system that allows you to host your show. That means, hosting a series of videos that have a chronology, and help you build and maintain your show’s identity.

I found the Blip.tv service very good for hosting a show. They accept most video formats and they won’t resize your video, so you can actually put online a show with the resolution you need.

How do I do live broadcasting?

If you want to create a live show and keep the archives, then you can use Ustream.tv. Ustream.tv is free and allows you to create a program based on live broadcasting and all you need is a camera and a microphone connected to your computer, and your webcam counts.

How do I create a videoblog?

Is nice to have a show at Blip.tv or similar service, but you’ll like to have your own webpage for that, won’t you. Not only a static page, but you’ll like the videos to be displayed on it just like a blog and you want a feed for it so people can get your podcast directly from iTunes.

There is a very nice and easy to follow tutorial on Freevlog that helps you with most of that.

You can learn more at Blip.tv Learning Section, they will even help you monetize your show.

How do I create a screencast?

Screencast are videos of your computer screen taken just like old fashioned screenshots, but animated. You can watch these two I made, to get the idea.

Screencasts are videos just like any other, so the only question that remains unanswered is how to record one.

There are a lot of screencast options avaliable out there and some of them are free.

As a Mac user, I personally have been playing with three

Copernicus

Is distributed free, handles screencasts beautifully but doesn’t record sound. It is ideal if you want to add sound in post production or if you want (or don’t mind) to record sound separately. You can use Audacity for that either in Mac OS, Windows or Linux.

Screencast-o-Matic

Screencast-o-Matic is a java appication that runs online. No need to install anything, is platform independent and is fully featured. Works like a charm and you can use it wherever you are, even on a cyber cafe in the middle of nowhere. They will even host your video if you want, but you can also export it as a .mov to your computer. The downside is that you can only record in either 640×480, 800×600 or 1024x768px and if you chose to host it with them, they’ll downsize it to a max of 800x600px

Jing

Jing is exist in Mac OS and Windows flavors and is a cute little application that sits in your desktop and allows you to record upload and share screencasts from a simple and intuitive interface. It is made to work together with screencast.com, but you can also configure it to share files in any server (or your local computer) via FTP. It also handles snapshots and uploads them directly to flicrk, or any ftp server of your choice.

If you’d like to see a longer list of software available to other platforms, you can check this one. This is where I learned about Jing and copernicus, but I haven’t tested any of the Linux and Windows options yet.

Social Screencasting?

Ok, ok, ok. Not everyone wants to be the star of her own show. Some people just want to use the power of video to show someone distant a screencast and make her understand things as if she were there.

Jing is a tool that allows you to do just that!

By clicking on the little icon that might stand on your desktop (if you want it to) you can start recoding and immediately upload it. You don’t need a blog or any production. All you need to do is create a screencast account of configure an FTP you have. It will automatically give you embedding code and urls for agile publishing or sharing.

And, hey, why I am explaining this? There is a video that show it much better.

If you come to think of it, it is probably helping your visitors very little, unless they are looking for a specific post and have a rather good idea of when it was published. But if they do know that much, they are more likely to use the search box instead.

I consider that archives need the right amount if information to make them useful, not more, not less. And in this case, an archive needs more.

In this post I’ll show you how to create a separate WordPress page that lists all your posts in reverse chronological order and categorized by month, just like mine.

This will benefit your blog because you’ll have a permanent reference for all your posts with name and dates, so users can always refer to it, when looking for a post they seen, or digging your site for more.

Step 1: Create a new template

This part is easy, you have to duplicate a file in your theme called page.php and name the copy with a name you like. I’ll call it powerarchive.php.

Open powerarchive.php and Make sure the file starts with this

<?php
/*
Template Name: PowerArchive
*/
?>

Technically this is a PHP comment, meaning that it won’t be seen by the PHP interpreter. In practice, the wordpress applications looks for some special comments to find specific files. In this case, the comment is telling wordpress that the file is a page template and its name is Powerarchive. We are going to use this later, when we publish the archive page.

Step 2: Hollow the layout

Now, a tricky part. You must find where is the core-content part of the layout. This changes from theme to theme, but you must look for some signs. For isntance, on my theme, you’d find something like this

<div id="content" class="hfeed">

	<h1 class="entry-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php echo __('View').' "'.the_title('', '', false).'"'; ?>"><?php the_title(); ?></a></h1>

<?php /* more php code */ ?>

   <?php endwhile; endif; ?>

</div><!-- content -->

The <div> opened just before the <h1> and closed just after the end of the loop (<?php endwhile; endif; ?>) is the container we are looking for. Just hollow that div, except for the page title and maybe some other information you might want to keep.

Step 3: Change the content

So far, we have managed to have an empty page with a title. So our next step has to be change the way it behaves, and show the archives just after the title we left.

The whole idea is to get all the posts in reverse chronological order (newer first), cycle through them and, as we go, print the month name and year as a header for the set of posts on that month.

The first thing to have in mind is that, as we cycle through the posts, is that we must be able to compare a post and the previous one and see if they are on the same month, because if the month has changed, the header for the month must be displayed.

Let’s initialize a variable that will hold the date for the post being analyzed and another one for the date of the previous post.

  <?php
        $prev_date = NULL;
        $date = NULL;
    ?>

Then, get all posts in the blog

<?php query_posts("posts_per_page=-1&order=DESC"); ?>

Loop through getting the month and year of each one, as well as setting the date of the current post for the sake of comparing it with the previous one.

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <?php
        $date  = get_the_time('m.Y');
        $year  = get_the_time('Y');
        $month = get_the_time('m');
        $baseUrl = get_bloginfo('url');

If the current date (containing month and year) is different from the previous one, this is because we have started to list posts from a different month, so we should start by printing the header with a link to the listing of those posts. Don’t forget to start by opening the list tag for the post titles.

        if($date != $prev_date)
        {
            if ($prev_date) echo "</ul>\n";
            $prev_date = $date;
            echo "<h3>";
            echo "<a href='" . $baseUrl ."/". $year ."/". $month . "'>";
            echo get_the_time('F Y');
            echo "</a>";
            echo "</h3>";
            echo "<ul>";
        }
    ?>

Finally, let’s print the post date and post title into a list item, close the loop and the list tag

    <li><?php the_time('M d') ?>. <a href="<?php the_permalink() ?>"><?php the_title() ?></a></li>

    <?php endwhile; endif; ?>

    </ul>

Here is how the code should look

  <?php
        $prev_date = NULL;
        $date = NULL;
    ?>

    <?php query_posts("posts_per_page=-1&order=DESC"); ?>

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <?php
        $date  = get_the_time('m.Y');
        $year  = get_the_time('Y');
        $month = get_the_time('m');
        $baseUrl = get_bloginfo('url');

        if($date != $prev_date)
        {
            if ($prev_date) echo "</ul>\n";
            $prev_date = $date;
            echo "<h3>";
            echo "<a href='" . $baseUrl ."/". $year ."/". $month . "'>";
            echo get_the_time('F Y');
            echo "</a>";
            echo "</h3>";
            echo "<ul>";
        }
    ?>

    <li><?php the_time('M d') ?>. <a href="<?php the_permalink() ?>"><?php the_title() ?></a></li>

    <?php endwhile; endif; ?>

    </ul>

But if you do this you probably have copious amounts of email in a single archive and while sorting is not the solution, Labels and Filters can give you a hand with all this.

If you Manage all your emails accounts in Gmail then for sure you need further help by now to manage you gather-all Gmail account.

In either case, you might find useful to use Labels to organize them as or need a second Gmail account as .

This post will explain

1. Why search is better than sort
2. How to set labels
3. How to use filters
4. How to use Filters to set Labels as suggested by Peter Cruickshank (See comment)
5. How to use handle multiple Gmails accounts as suggested by Pramod (see his comment)
6. As a bonus I even tell you how to deal with server backups sent by mail to you

Search don’t sort

The first thing to keep in mind is that Gmail philosophy is “Search, don’t sort”, meaning that instead of organizing mail in folders as soon as you read it, you could search it afterwards when you need it.

Why searching is better that sorting? I would say it is for three reasons.

1. The first one is that it is just too hard to know in advance what kind of organizing system you will need in a year time, sometimes even in a month time.

   If you have a powerful search system you don’t need to think of this, you will only worry about it when you need to find that archived email.

2. The second one is that in traditional mail archives you can only sort an email in one folder. You might have a folder “Funnies” and a folder “Mom”, and you will have to decide either time where to put the funnies your mom sends you.

   Also you have to be consistent, because as your archive grows it will be hard to know where that funny your Mom sent you was archived in.

3. The third one is that periodically, as your archive grows, you need to re-sort all your mail. One thing is to have a “Funnies” folder with twenty messages, a completely different beast to tame is a “Funnies” folder with a thousand messages.

   And then when you re-organize your archive the original problem arises, how would you do it? Would you organize it by sender (Funnies-Mom, Funnies-John, Funnies-Paul,…), by theme…

Search instead of sorting allows you to refine the granularity of your classification on the very moment you need it and through the criteria just pop in your mind at the moment.

Yes, a good search system is really hard to build! But, hey, that is what Google is famous for being good at, so let’s trust them and move along.

Labels: Just like folders but with search properties

A label in Gmail is pretty much a predefined search.

You can find a Labels box in the sidebar on the left, in green, just below the “Quick Contacts” section.

Say you frequently search for email your Mom sent you, well, you can create a label Mom and tag all email from her with this label.

To do this you first create the label by clicking “Edit labels” on the bottom of the box. A management interface appears with a form in the bottom that reads “Create a new label”. Just fill in the name you want for your label and hit “Create”.

To apply label to a particular message, you can select the message(s) either with the checkbox in a list view or just opening the message for reading and select from the upper menu “More actions…” » “Apply Label: Mom”.

If later you want to search for messages labeled “Mom” just click on the appropriate name in the Labels list on the sidebar.

So far so good! Seems great, but this is not anything better that having folders and is not much different that sorting. Indeed, is not, but stick with me because now things will start to get really interesting.

Say you have another label: “Funnies”. Your mom sends you a funny, which label to put? Both!

Now you find that particular mail when you select the “Mom” label and also when you select the “Funnies” label.

Now, selecting each label for each message by hand, like this, is a terrible annoyance and it is hard to make an extense use of them. What you can do is to set up some filters to automate this all.

Gmail Filters: Automate your decisions

Once you have a clear rule of what has to be done with incoming (and outgoing) email, a filter is a handy way to let Gmail perform the actions for you.

In our example, each email you recieve from you “Mom” will be tagged with the label Mom. Moreover, all mail sent to your mother will be tagged too.

Piece of cake. Go to “Settings” on the top-right menu and then select “Filters”. On the bottom you’ll find a link “Create a new filter”.

A filter is composed of two parts. In the first one you define the select criteria. That is, which messages the filter will be applied to. In the second part you define what to do with the messages that match the criteria defined in the first part.

In this case, we want to select the messages sent from and to mom@mommail.com, so we need two filters: one for incoming and one for outgoing mail.

[The search criteria for a filter allows you to enter information for the field "from:" and field "to:", but keep in mind that you if you specify both as mom@mommail.com you will only select messages that are both from and to you mom, and not messages that either from or to her. That is why we need two filters.]

On the first filter we put mom@mommail.com on the field “from:” and click “Next step»”. On the second part select “Apply Label” and select “Mom”, then click “Create Filter”. Now all incoming mail from you Mom will be automatically tagged.

To tag also the outgoing mail create another filter. Put mom@mommail.com in the “To:” filter and then chose “Apply label: Mom” on the second step. Done! All email from and to your Mom will be tagged.

Well, this is all nice and cool, but not beyond the basic use of it. Now we mastered Labels and Filters let’s move to three uses that can really be handy.

Label mail if you Manage all your email accounts with Gmail

If you use Gmail to manage all your email accounts then you have managed to gather all your mail to a very handy and powerful interface. Now you might want to classify your incoming mail depending on where it was originally sent to.

For each account create a label with an appropriate name, something like “myoriginalmail@myserver.com” should be good enough.

Then, for each acount create two filters. One for incoming and one for outgoing mail.

For incoming mail, in the first part use your original email address (myoriginalmail@oldserver.com) on the “To:” field. On the second part, select the appropriate label.

For outgoing mail, in the first part use your original email address (myoriginalmail@oldserver.com) on the “From:” field. On the second part, select the appropriate label (remember that you can select which email identity to use when writing an email).

Now, every message received or sent is labeled accordingly depending of the specific account it was used.

Sending email to different Gmail Accounts

Some people like to have more than one Gmail account, or sometimes they need to.

In my opinion having two email accounts is a great hassle and is better to avoid when possible, that is why I manage all my email on one account in the first place, but, if you need to have more than one, it is better to organize well.

As far as I can see, with all the organizational resources we have discussed here, the only reason to have multiple Gmail accounts is lack of space. If a second (or third, or fourth…) account is needed to store your mail I would chose between two policies.

• Use a Gmail account until it fills, then move to another
• Use different Gmail accounts different uses (ie, work, personal, blog)

In my opinion, a nice solution is:

1. Send all your mail to a main Gmail account
2. Set up filters to redirect selected mail to other accounts

If you are filling one account at a time and moving to another, the solution is fairy simple, you just have to set a forward rule, that is an especial kind of filter even easier to configure.

A main account is a good idea even if you are filling one account at a time, because that is the only place you ever need to reconfigure as your needs grow. You can send all your mail to this account and give this address to friends, even if you check your mail through another account.

1. Go to Settings » “Forwarding and POP” » Forward
2. Check the option to forward email
3. Fill in the email you want your email redirected to
4. Select “Delete Gmail’s copy” From the drop down menu.
5. Save Changes

One day your secondary account will be full. Go to Go to :Settings » Forwarding and POP » Forward” and edit your filter so mail is forwarded to a third account you should have.

If instead, you are forwarding mail according to some criteria you can set a specific filter for redirecting mail to specific accounts.

To make it simple, let’s say have 3 different Gmail accounts for different purposes:

One for work

All mail that comes from domains myworkdomain.com is considered work and goes to myworkemail@gmail.com

One for your blog

Yes, you have a blog and all email the server sends to you has the string [myblog] on the subject. For instance “[myblog] Please moderate post X”. All mail from your blog should go to myblogemail@gmail.com

One for all the rest

Finally, you have an email for all the rest and in this case it is just easier to use the main account for that.

So, we need to set up two filters to handle this.

For the first one, we must filter all the email coming from work.

1. Go to Settings » Filters » “Create a new filter”
2. Put “*@myworkdomain.com” on the “From:” field and press “Next»” (The asterisk means “all”)
3. Check “Forward it to:” and put the email address on the form (myworkemail@gmail.com in the example)
4. Check also “Delete it” so it doesn’t remain on your original mailbox.
5. Create Filter

For the second one, we must filter all email coming from your blog

1. Go to Settings » Filters » “Create a new filter”
2. Put “[myblog]” on the “subject” field and press “Next»”
3. Check “Forward it to:” and put the email address on the form (myblogemail@gmail.com in the example)
4. Check also “Delete it” so it doesn’t remain on your original mailbox.
5. Create Filter

You can also set up your secondary emails to send email as your original identity

Receiving backup files from your server

As a last example here, I will describe how I manage the backup from my blog.

Once a day an hour, z-oc.com emails me a backup of the database using this plugin. I like this policy because if anything happens to the site, no matter how serious, I have a complete database backup outside the site, and no better place for this than my Gmail.

The email comes always with a very specific Subject and Text and also has an attachment, so it is easy to make a filter for it.

As I first idea I might want to apply a label “Database Backup” to all those messages. Also I never have to even look at these messages unless something happens to the site, so I can also archive then by default.

Even if something happens with the site, I only need the last one, so I can go to “All Mail” and retrieve the last one.

This filter will work well but still you would have to periodically select all messages labeled “Database backup” and delete all but the last, but there is a better solution.

All email deleted in Gmail goes to the trash bin and remains there for a month before it is automatically deleted forever. So, why not send the backup straight to the trash by applying a “Delete it” rule to the filter?

If nothing happens, gmail will receive a daily backup, keep it for you for 30 days and then discard it automatically. If something happens to your site you have 30 days to go to your Trash folder and get the last one. Just remember not to empty the Trash by hand, or at least remember not to exclude the last backup, just in case your site crashes that very day.

And you? What kind of use do make of Filters and Labels in Gmail?

• Some physics background related to photography
• The pinhole camera and the basics of camera building
• The lenses: Zoom, Focus and Aperture
• The ISO value: Films and CCD sensors
• Mastering the Shutter speed

Finally, we have seen all the necessary elements to build a camera. The black box, the lens, and the shutter.

Traditionally, there were two kinds of film cameras. Cameras with Direct Viewfinder and SLR (Sinlge Lens Reflex, or just Reflex) cameras.

Direct Viewfinder cameras have and eyepiece that allow to look at the scene to be photographed and the lens that captured the image to be projected on the film to make the picture.

This camera is very simple to make, but brings up a problem. Because the scene you see and the scene you shot are slightly displaced the picture might not be what you expect, heads sometimes are chopped off the picture, and things like that.

This problem is called Paralax Error, and becomes more of a trouble as the the object photographed is closer to the camera. For landscape photography might even be no problem at all, but for close ups is a huge deal.

SRL camera internal diagram

SLR cameras work in a very different way. The image you see on the viewfinder is the same that will be photographed. This is accomplished by reflecting the light inside the camera with a mirror and a pentaprism.

Do you remember refraction we talked about on the first post? When a light passes from a medium with higher refractive index to one with a lower one the refracted angle is wider than the incident angle.

Well, when the incident angle is wide enough the refraction angle will be 90 degrees, and what if the angle is even wider? Then an effect called Total Internal Refraction in which the surface behaves like a mirror. This is also how to Optical Fiber works.

Total Internal Refraction

A pentaprism is a pentagon extruded on the third dimension. Just like a cilinder but with a pentagonal base, instead of a circular one.

If a pentaprism is made with an adequate geometry and refractive index, it is possible to make light to enter it perpendicular to one face, reflect internally and leave it perpendicular to another face.

Then, the light enters the camera through the lens, reflects on a mirror put at 45 degrees, and enters the pentaprism perpendicularly (see the image for details).

When the shutter is pressed, the mirror is lifted, the curtain behind it is opened and the image is formed either on the film or the CCD.

Now a question, where is the image formed when the mirror is down? It can’t be directly on our eyes, mostly because the image must be formed at a certain distance that is the focal length, and would be very hard to make this to be our retina.

Actually the bottom face of the pentaprism is what is called Unpolished Glass. That means that is a rough, translucent surface, just like the translucent paper we used on the black box model. Because the surface is rough the image forms on it, but because it is translucent the light goes through, then looking from behind, through the pentaprism one can see the image formed on it.

All this is very nice, precise and sophisticated, but is not all rainbows. A camera like this is heavier, more expensive, more noisy and inherently more fragile because there are more things that can break.

Modern digital cameras are also categorized in compact cameras and Digital SLRs (known as DSLRs). While some compact digital cameras still have Direct Viewfinders, they can also use the sensor to capture the image and show it on a digital viewfinder that is not only more comfortable, but also don’t have paralax error. Because most people prefer use this digital viewfinder, more and more, digital compact cameras are coming without the direct viewfinder.

A DSLR camera works exactly like the traditional SLR film cameras, except they have a CCD instead on film. Because the sensor is exposed only at the very moment of taking the picture, there is no way for it to continuosly display the image on the LCD viewfinder, you have to use the eyepiece and.

A compact digital camera’s sensor is continuously exposed to the light that comes from the lens. When taking a picture, it just saves one of the many frames that it is continuously receiving. This is very handy, but by far is not as precise as the mechanical scheme of a SLR that can achieve speeds of 1/8000 of a second and faster.

• Some physics background related to photography
• The pinhole camera and the basics of camera building
• The lenses: Zoom, Focus and Aperture
• The ISO value: Films and CCD sensors

By now, we have seen that, by changing the ISO value we can change the amount of light needed for a picture, in exchange for quality. We have also seen that, by changing the aperture value, we can change the amount of light actually entering the camera, in exchange for bigger and smaller depth of field.

But increasing the Aperture value is not the only way to increase the amount of light in a picture.

In a film camera, you need light to make the silver halides react, hence a clear solution would be just to increase the time the film is exposed. The more time the film is exposed, the more light it gets, the more it reacts, even with few light.

Curiously, this is another similarity on digital photography. The more a sensor is exposed, the more light the photo sensors accumulate and the brighter the picture becomes.

You might want to close the aperture to get more sharp pictures and you can compensate this by increasing exposure time, if you have a tripod and a still subject you can take a very slow picture with bad lighting conditions and closed aperture and the picture might look great.

The rule is simple. Camera apertures are measured in f/ stops. Each f/ stop multiplies or divides the amount for a certain factor. To compensate, divide or multiply the exposure by the same factor.

If you half the aperture you must double your exposure time. Simple as that. Most modern cameras can handle this by themselves, and even if yours don’t you don’t have to do the math all the time, the camera photometer will do this for you and signal when light is Ok.

Pictures taken with speeds of 1/90 and 1/500 of a second. The water in the slowest picture is blurred while in the fastest is sharper. Regard that the slowest picture had a closer aperture and hence a deeper depth of field. You can see the background is sharper in the slowest.

Altering the shutter speed has a trade-off, of course.

What happens in a long exposition is that the sensor collects more light to analize and create the image, but the problem is that this light has to be the same. If the intensity or color change during the exposure the results won’t be accurate.

Typically, if either the camera shakes or the subject moves, the light reaching the sensor will change and will interfere.

If a single pixel on the sensor receive light information from different sources, then multiple images will impress the same region and the same object will be imprinted on many regions of the sensor, as a result the image will be blurred.

Now, there are at least two ways you can take blur to your advantage. One is when part of the picture is in motion and you want this part to be blurred while the rest is sharp, one common use for this is with running water.

The second one is called panning and consist in photographing a moving subject by following with the camera while it moves, by doing this, the background will have a motion blur and the main subject will be focused. This is, of course, much difficult that the first one and requires some more experimentation.

In case you wonder how would that be o film, it is the exact same, but is the silver halide instead of the sensor pixel.