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 0×33ffcc 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 1024×768px and if you chose to host it with them, they’ll downsize it to a max of 800×600px

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.

This is the 4th part of a six-part tutorial about photography basics. So far we’ve seen

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

We have seen how it is possible to project an image on a surface, but we haven’t seen so far how to transform the projected image, into a photography that can be seen further in time.

In this post, we will see basics of how films and digital sensors work and how to use ISO value on your own advantage.

A little bit of Film History and the Digital Sensors

Originally photography was brought to existence because some extremely brilliant people were able to use the knowledge of some chemical substances that react to light and become other substances.

When exposed to light, these substances form sliver cristals which are opaque and dark, hence enabling people to capture black and white images based on whether the light has or hasn’t hit the surface on a particular point.

One of these cases is the family of the silver halides. That is, compounds made of silver and a halogen, usually chlorine, bromine and iodine.

Many years have passed and countless improvements over this led to very high quality photography material and further, enabled people to think on electronic, not chemical, devices capable to do the same, that is, capture images and represent them as a matrix of points, instead of an array of silver cristals.

And digital photography was born.

As you see, film photography and digital photography walk hand in hand for a very long way, despite the internals are completely different, the way they behave is very similar in many aspects, that is why the basics for film photography are very much the same than the basics for digital photography.

Sensitivity and ISO values

Two pictures of the same scene, taken with ISO200 and ISO1600 respectively. The image taken with ISO 1600 has visible noise.

In film, there is something called sensitivity of film. The more grains of silver halides in the film, the more sharp the image, but also, the more light you need. That is why film sensitivity is also commonly nicknamed film speed.

Film speeds where classified by agencies like ASA and DIN in standards like ASA 100, ASA 400 or DIN 27. Then ISO took standards over and films where named ISO 100 or ISO 400.

These standards describe the amount of light needed to take a picture with a film, the lower the ISO value, the more light needed and, usually, the higher the quality.

There are many other factors that influence the speed and quality of film, but roughly speaking, the amount of silver halides is the main reason. The amount and size of grains are equivalent to what is known in digital photography as resolution.

Digital photography has adopted the ISO film standards to describe sensor speeds and the trade-offs are about the same: the higher the ISO, the less light you need, but instead the lower the quality, which means that the image definition, contours and details, is poorer.

In digital photography, the ISO doesn’t affect the amount of pixels of the final image, hence the resolution. Instead, affects the quality of each individual pixel.

The higher the ISO value set on a digital camera, the less light you need, but also, the harder it gets to detect an image through the incoming light, producing noise on the picture.

The noise produced by a high ISO digital photography is similar, but not the same than low quality of high ISO film photography, which instead of noise is called granulation.

Anyway, roughly speaking, the trade-off with digital ISO is the same as in film ISO, you need more light to get more quality.

• Some physics background related to photography
• The pinhole camera and the basics of camera building

We have seen in the previous post, that by isolating rays of light through a tiny hole, we can separate and project images of objects. The smaller the whole, the sharper and darker the image, and vice-versa.

It would be really great if we could find a way to widen the aperture of the camera and correct the rays of light and project all diverging rays of light the same point, isn’t it? That would provide a sharp image that is also very illuminated.

In this post, I’ll show you the lens basics and how to use focus and aperture to your advantage in pictures.

Magnifying glass on a sunny day

Thanks to this properties, we have the magnifying glass. If you put a sheet of paper under the sun, infinite sun rays are projected on the paper. These are images of the sun, casted on the paper and they cover all the extension of it.

By using a magnifying glass, it is possible to change direction of the sun rays and make them converge to one single point. This point is called focus. By doing this on a sunny day, the amount of energy in the focus is so great, that you can, literally, burn the paper.

Well, that is the way to go, by using these properties to build lenses we can put in the black box we can increase the size of the hole and keep the focus at the same time.

As you might have guessed already, the focus of the lens must be exactly over the projection surface (translucent paper, photographic paper, film, CCD). So the longer the box is, the greater the focal length should be, and vice-versa.

A correction lens in the aperture of the camera to correct divergent rays of light.

A single lens like this would only be able to focus objects at a certain distance, just like a magnifying glass. By combining multiple lenses you can have a focusing ring that allows you to chose the range in which objects will be focused. Objects positioned closer or farther that this value will be blurred.

How much the objects off-distance will be blurred largely depends on the size of the opening in the lens, the smaller the diameter the less blurred, but the darker the whole scene becomes. The greater the diameter the lighter the picture, but the more blurred the off-distance images become.

The range that will be focused at a certain aperture is called Depth-of-Field.

Deep depth of field at aperture f/32

Shallow depth of field at aperture f/4.8

This is obviously a trade-off and that is why almost all lenses for professional cameras and even a lot of the amateur cameras as well come with an aperture device that, roughly speaking, allows you to control the diameter of the inner hole of the lens.

The aperture of a lens is measured in f/ stops like f/2.8, f/4.6 or f/32. What these numbers represent is too technical and is outside the scope of this tutorial, but you should keep in mind that the smaller the number, more luminous the lens and better… and more expensive.

On the inner side of the camera, using a similar idea, we can also lengthen the focal distance of the lens and keep the focus over the projecting film or CCD while putting the lenses closer or farther to it, changing the approximation and perspective accentuation of the image. This is called a zoom lens.

Another trade-off, of course, is that all this technology is more expensive and requires more knowledge to handle, so you end up having a huge range of cameras to buy, from cheap to obscenely expensive and from very simple to very complex ones.

The more you understand about this and the more the camera lets you explore your knowledge, the more you are able to take gorgeous, fantastic photos and hopefully, this is why you are reading this text.

Visual properties of objects

Every material, has some visual properties like color, brightness and opacity. Visual properties are directly related to what happen to incident rays of light.

Say you are on a room with white walls, illuminated by an light bulb. We see the walls because the light that is emitted by the bulb is made of light rays that, as they hit the walls, are reflected. The ability of reflecting the rays is a property of these walls.

But the wall is a rough surface, even a wall that is smooth to the touch has enough ups and downs to be rough to light dimensions. So, any point of it will reflect light like if there was a mirror, tangent to the wall in the very point of the incident ray.

The light ray will be reflected with a reflection angle that is equal to the incident angle, but because the wall is rough, every light ray will arrive in a different angle and each one will have a different reflection angle, as a result, any ray of light will go to a different direction, in a very unordered way.

That is why, when we look at a wall we don’t see an image reflected on it, like we do when we look at a mirror. Nevertheless, what we see on the wall is an image of everything on the room that is emitting or reflecting light.

At the same time, any point of the wall receives rays of light that come from many (we could say infinite) other points of the room. So, any point of the wall is reflecting light from infinite other points that come in many colors. The red one from a shirt, the blue from the flower vase, the green from the leaves, the yellow from the flower, and so on.

A red object is red, because, it absorbs all rays of light except the red ones that are reflected. The light that reflects in a red object and the reflects to our eyes is darker than the original, because two thirds of the incident light will be absorbed by it. It will also be red, because those the third reflected is made of only one frequency range: the red range.

Still on the subject, blacks are black because they absorb every single ray of light and none is reflected, that is why we say that black is the absence of color.

What makes a wall white? Well, is just that it has the ability (or property) to reflect all kinds of colors and absorb none. When all these rays of light hit your eyes, the light is “added up” and you don’t see all the individual rays, but the sum of them.

The structure of the human eye

Human eyes have photoreceptor structures called cones that can detect red, green and blue rays of light. No other color is perceived by the human eye, what happens is that the brain mixes amounts of these three seamlessly and we feel like seeing other colors.

People use to say that red, green and blue are primary colors because they are the primary components of white light. This is not untrue, but we must realize that this is only true when associated with human perception of light, not with light itself.

Anyway, ultimately, all light we see can be divided into three parts, and we can rely on understanding only these three to study all the light we see.

Subtractive colors

As you probably know since kindergarten adding paints does not bring white into the picture. The more colored paint you add, the darker it gets.

That is because the paint absorbs all the incident rays except the ones on the paint color, that are reflected. So, the more paint you add, the more rays are absorbed, eventually fading to black.

The Newton’s Color Wheel

Just because adding colored paint turns into black, it doesn’t mean that “white is the sum of all colors” is not true, fiction or just a theoretical model, but you have to make sure you are adding light, and not only paint.

We can do an experiment that shows that the sum of colors is white. Take a disc and divide it in three circular sectors, then paint each one with one of these colors: red, green and blue.

If you nail the circle by its center and spin it fast enough the circle will seem white. Looking at any point of the circle will make you eye receive a rapid succession of intermit red, green and blue, so fast that the eye will blend them together and see white.

This is called the Newton’s Color Wheel.

Conclusion

A rough object, like the wall on the example, reflects light on every possible direction and builds infinite images that are projected all around the place and mix with images of other objects.

Our eyes only see reds, greens and blues and they are sent to the brain that mixes them, based on amount of light, incapable of separate the different rays or images formed.

To take a picture we need to isolate one of these images from the others and keep it.

As a part of the course I wrote a tutorial that was quite handy for some people over the years and now, in a time when film photography is almost extinct I thought it was time to refresh the text and make a handy manual on photography in six parts.

Every three days, on August 9th, 12th, 15th, 18th, 21th and 24th I will publish each one of the six parts of the manual, see the list below.

• 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
• Compact digital cameras Vs. DSLR
Zo'C powerblogroll - A plugin to make powerful blorgrolls with favicons, descriptions, notes and RSS links]]> http://www.z-oc.com/blog/2007/08/understanding-cameras-and-photography/feed/ 2 http://www.z-oc.com/blog/2007/06/manage-all-your-email-accounts-with-gmail/ http://www.z-oc.com/blog/2007/06/manage-all-your-email-accounts-with-gmail/#comments Wed, 20 Jun 2007 18:34:18 +0000 Guilherme Zühlke O'Connor http://www.z-oc.com/blog/2007/06/manage-all-your-email-accounts-with-gmail/ Since I first met Gmail, in the very beginning of the service, I became addicted to the interface and, this days, I can hardly imagine myself using something else.

Yet using public email addresses is a big problem because if one day you change to another service you will have the headache of telling everybody about your new address. Having your own domain and your email within it is much better.

You may also want to handle old email accounts within Gmail transparently.

In this article, I will show you how to configure Gmail to manage multiple accounts in a transparent way and using your own domain email address or any other you may like.

Update: See the sequel of this article and learn How to manage all your main in Gmail: Filters, Labels multiple Id’s and even backups




Step 1 – Forward your current addresses to Gmail

The first thing to do is to put a forwarding rule on all your other email addresses.

If you own a domain, creating fordward email accounts is probably very simple, on your registrar’s site. You can create an email you@yourdomain.com that has no mailbox associated and the email will be simply be forwarded to you@gmail.com.

If you own an email from a free mail service, it is likely that you can configure a forward rule to another address. Some email systems don’t allow you to do that. If that is the case you won’t be able to manage it through Gmail.

Keep in mind that if your email system doesn’t allow you to create a forward rule this is a very good reason to get rid of it as soon as possible.

With this done, you will receive all your mail on your Gmail account.

So far, so good, but this is pretty basic, huh? We are suppose to handle all email through Gmail and not just receive forwaded mail, correct?

Read on, gentle reader, you’ll find your answers.




Step 2 – Defining an email management policy

So far you have set up all email accounts you have to forward to Gmail. But still, if you reply a message addressed to you@yourdomain.com the sender will still be you@Gmail.com. So your managing address will be shown and this may bring up two problems

• You lose the authority of your domain on email you replied.
• You are disclosing an address you don’t want email to be directly sent to.

If people send email to you@yourdomain.com, they expect a reply from this account. If you send a reply from a different account that may undermine trust and authority your domain has. To say the least, you will disclose how your inner email management system works.

The second problem is even worse. If one day you want to quit Gmail and use something else to manage your mail, you will have to care about people sending email directly to your Gmail account.

Say that one day, someone manages to get access to your Gmail account and takes over it (I’ve know cases like this before), you’ll need a new one. If you don’t receive direct email to that account, you only have to redirect you@yourdomain to your_new_account@Gmail.com.

So you what we want is

• All email you want to manage should be replied from the same account it was sent to
• All email sent to obsolete accounts should arrive, but should be replied with the new address
• Set a default address attached to your identity, and not to Gmail or any other public email service




Step 3 – Setting Gmail to assume different identities

Now, we want Gmail to assume a different Identity for different email accounts you have forwarded to it.

For this, let’s assume you have these accounts forwarded to your Gmail:

you@yourdomain.com

Your account within your domain. An account you plan to keep for countless years and have full power to manage.

contact@yourdomain.com

Your contact account within your domain. You want to keep it as a separate identity because one day your little business may grow so much that you’ll need to hire someone else to handle contact email while you play CEO.

you@oldwebmail.com

An old account of yours in a web provider you don’t really like but you can’t get rid of because people still send you email to it.

grandma@GrandmaCakes.com

Your grandma’s account. She is not quite good at email, but she needed a contact address since she launched a website to sell her wonderful cakes out. She left you in charge of handling customers on her behalf (she will bake your favorite cake in return)

What we want is:

• Your default email will be you@yourdomain.com. Every email you start writing will be sent with this identity.
• Incoming mail to you@yourdomain.com will be replied as you@yourdomain.com
• Incoming mail to contact@yourdomain.com will be replied as contact@yourdomain.com
• Incoming mail to you@oldwebmail.com should be replied as the default identity, once you’d like this account to be lost forever instead of perpetuated
• Incoming mail to grandma@GrandmaCakes.com will be replied assuming the nice old lady’s identity.

Now, let’s do it.

1. The first thing to do is to set up the default reply mail policy. Go to Settings»Accounts and click in Reply from the same address the message was sent to. With this, if a message is sent to an email managed by Gmail, when it is replied, Gmail will use as sender the same identity the email was sent to.



2. Now, let’s configure your default mail. Click Add another email address and put your name and the email address you want as default, you@yourdomain.com in our example.

   Gmail will send this address a confirmation email to verify that you own it. Because is already redirected in our example, you will receive the message on your Gmail account, no problems about it.



3. Then, repeat the process to contact@yourdomain and grandma@GrandmaCakes.com, but do not include you@oldwebmail.com. Why? Just because you don’t want to manage that account, it is already redirected to you, but you don’t want that identity anymore.

   If you don’t include an email account, Gmail will not assume its identity as sender, and the default address will be used. Now you are able to read mail from this account, but you won’t send email from it.

4. The Last step is setting your default account. Right now is you@gmail.com. That means that all email you start and all email sent to unmanaged accounts that are redirected to it, will be replied with this identity. But you want to hide your Gmail account from public, so click on the make default link to the right of you@your_domain.com.



Now you are done. You can manage all your email within Gmail and nobody will even know you have one.

Zo'C powerblogroll - A plugin to make powerful blorgrolls with favicons, descriptions, notes and RSS links]]> http://www.z-oc.com/blog/2007/06/manage-all-your-email-accounts-with-gmail/feed/ 99 http://www.z-oc.com/blog/2007/06/order-by-in-sql-queries-and-random-selection-of-database-items/ http://www.z-oc.com/blog/2007/06/order-by-in-sql-queries-and-random-selection-of-database-items/#comments Thu, 14 Jun 2007 17:20:10 +0000 Guilherme Zühlke O'Connor http://www.z-oc.com/blog/2007/06/order-by-in-sql-queries-and-random-selection-of-database-items/ Simple hint, how to select a number random items from a MySQL database:

SELECT *
FROM your_table
ORDER BY rand()
LIMIT 2;

The code above, selects all the fields from a database table named “your_table” orders the results randomically and gets the first two. Change two for your favourite number.



Want to see an example of this working? Just look to your right! On the sidebar, there is a section named “Recommended Reading”. This is a section with books I like and recommend. I keep a list of books on a database and I pick two six at random with a query like this, each time a page is loaded.

Maybe you did knew this command already, or at least you heard about the ORDER BY command, but do you exactly know how it works and how further you can go with it?

I’ll show you some nice things in this article.

[All the code on this page works in MySQL, SQL syntax may vary in other Database Management Systems, but the same ideas apply to all]

How does ORDER BY works

The ORDER BY statement on a SQL query atributes an indexing number on each entry of the table.

When you do a

SELECT *
FROM recommendations
ORDER BY price;

An indexing value will be calculated for each entry, based on the expression after the ORDER BY statement. The price will work as variable. The value of the registry will be used as indexing value for it, then the whole list will be sorted based on it. This is how it works.

So, if you use a custom method to set the indexing value you can have your own sorting system. For instance, see this query

SELECT *
FROM recommendations
ORDER BY price - discount;

For each entry, the discount will be subtracted from the price, this number will be set as indexing value for the entry, then, the results will be sorted based on it.

In practice the indexing value will be the final value to be paid, lowest prices first. You can reverse this using descending order.

SELECT *
FROM recommendations
ORDER BY price - discount DESC;

Order By using functions

MySQL comes with a lot of predefined funcions (and you can create funcions of your own, but this will not be covered on this post).

One of theese funcions is rand(). The rand() function returns a random number every time it is called.

SELECT *
FROM recommendations
ORDER BY rand();

When used in a query like the one above, the rand() funcion will be called for each entry and a random number will be set as indexing value for them. The table will, then, be sorted based on theese numbers. The result would by, obviously, that entries will appear in random places.

If you only want to select, say, 2 random entries from the table, you can limit your search using

SELECT *
FROM recommendations
ORDER BY rand()
LIMIT 2;

Boolean searching criteria, one step beyond

[Now, before anything else, I must give credit to Benjamin Wilger for his comment on Dave's blog.]

What if you want to just sort through boolean criteria. For instance, what if you don’t want to sort by item final price, but you do want those who don’t have a discount to come before who have?

SELECT *
FROM recommendations
ORDER BY (discount > 0);

Now, this is tricky, so let’s see it carefully.

The expression (discount > 0) is a logical statement, not an arithmetic one. This means that the answer to that is either true or false instead of a number.

But in databases, everything are numbers on the lowest level. False is actually a zero and true is actually a one.

When you set the result of (discount > 0) as the indexing value, you are actually setting zeroes and ones as sorting criteria and, because zero comes first, the entries in which the expression evaluated as false come first.

If you want the items with discount to come first, you can sort in descending order

SELECT *
FROM recommendations
ORDER BY (discount > 0) DESC;

Zo'C powerblogroll - A plugin to make powerful blorgrolls with favicons, descriptions, notes and RSS links]]> http://www.z-oc.com/blog/2007/06/order-by-in-sql-queries-and-random-selection-of-database-items/feed/ 9 http://www.z-oc.com/blog/2007/05/managing-obsolete-pages-with-one-line-of-code/ http://www.z-oc.com/blog/2007/05/managing-obsolete-pages-with-one-line-of-code/#comments Mon, 07 May 2007 20:36:58 +0000 Guilherme Zühlke O'Connor http://www.z-oc.com/blog/2007/05/managing-obsolete-pages-with-one-line-of-code/ When I switched from Blogger to Wordpress I had to deal with the problem of how to deal with the old pages.

Blogger style of archiving was static. That means that for every post you created, the Blogger system created a static HTML page.

Wordpress on the other side creates pages dynamically, meaning that there is no .html file whatsoever, the page is created on the fly whenever you request it. A change in the database automatically reflects on the page.

Now, the problem is, the address of the new pages doesn’t match the address of the old ones.

While old posts where in URLs like this

http://www.z-oc.com/blog/2006/09/food-links.html

the new posts where called through PHP queries like this

http://www.z-oc.com/blog/2006/09/food-links

But, as long as the post slug is the exact name of the blogger page (without the .html extension) putting the following rule on your .htaccess file should do the trick.

RewriteRule ^(.*)\.html$ http://www.site.com/$1 [R=301,L]

This rule will simple redirect the html page to the new address that is exactly the same, but without the .html extension.

Keep in mind though, that this will redirect all pages in your site that end with and .html extension, so take care if you have some .html files around.

You can apply this rule on a per-directory basis or you can put aditiona rules to take care of those in particular.

This way of redirecting is particularly good for SEO, because search engines will be notified that the page was permanently moved, helping them to properly index you site.

Zo'C powerblogroll - A plugin to make powerful blorgrolls with favicons, descriptions, notes and RSS links]]> http://www.z-oc.com/blog/2007/05/managing-obsolete-pages-with-one-line-of-code/feed/ 9 http://www.z-oc.com/blog/2007/03/how-to-build-an-events-agenda-with-sql/ http://www.z-oc.com/blog/2007/03/how-to-build-an-events-agenda-with-sql/#comments Fri, 30 Mar 2007 16:55:00 +0000 Guilherme Zühlke O'Connor http://www.z-oc.com/blog/2007/03/how-to-build-an-events-agenda-with-sql/ In my opinion, one of the coolest things of the site I’ve built to Paulo gazela is the event agenda on the navigation bar.

Of course there are many calendar programs around to add to your site and it’s also possible to integrate google calendar or a similar tool, but all Paulo needed was a way to show the events he was going to be in for the folowing, say, 15 days, and an easy interface to add them.

The solution is very simple. We’ve built a database with the date, time and details of the events and we created a SQL query to get all the events 15 days from the current date.

A single SQL query like the one below can handle everything

SELECT *
FROM event, place
WHERE event.place=place.id
  AND CURDATE() < = event.thedate
  AND DATE_ADD(CURDATE(),INTERVAL 15 DAY) >= event.thedate
ORDER BY
  event.thedate ASC,
  event.thetime ASC;

If you want to understand better what this is, to build the database tables and get some more detail, read on.

I will assume you have the basic knowledge about connecting to the database system in your server, but I’ll try go through all steps that are common for every system.

This is an ad hoc tutorial and I won’t explain a lot o SQL syntax, but if you want to really learn SQL in a generic sense, I encourage you to start learning here

First of all, you need to create the database and the tables. The SQL command to create the event table is similar to this

CREATE TABLE event (
  id INT UNIQUE NOT NULL AUTO_INCREMENT,
  thedate DATE,
  thetime TIME,
  place INT,
  name VARCHAR(40)
);

The reason why eventplace is an INT field is because the place in itself has a lot of information and good practice on databases (normal forms) require that places have to be stored on its own table.

CREATE TABLE place (
  id INT UNIQUE NOT NULL AUTO_INCREMENT,www.
  name VARCHAR(40),
  address VARCHAR(100),
  website VARCHAR(50),
  phone VARCHAR(20)
);

Now we have the database tables set up!

First thing to do is to create a place where one or more events will happen. The SQL to do that is something like:

INSERT INTO place (name, address, website, phone)
VALUES ('A cool place', 'Cool St. 42','www.coolplace.im','555-1234');

The id field is going to fill automatically with a unique number and the value will be set up to the next free number. As this is our first insertion, “Cool Place” register will have id 1, but we are not suppose to know this by heart, stick with me and I’ll show you how to do it. For now, let’s just assume we know that.

So, let’s insert an event to happen on a couple of days on Cool Place, which has id=1.

INSERT INTO event (thedate, thetime, place, name)
VALUES ('2007-04-05', '14:30:00', 1 ,'A Cool Event');

And this event will happen again next month.

INSERT INTO event (thedate, thetime, place, name)
VALUES ('2007-05-27', '14:30:00', 1 ,'A Cool Event');

Note that the third parameter, place, does not come into quotes, because is a numerical value rather than a string.

Ok, we’re set and done with the database, by repeating this procedures, we can insert as many places as we want, and events associated with these places. What we want to do now, is to list the events that will happen in the next 15 days.

Before we do that, let’s just see how to retrieve the information. We should issue a command to select the entries we want in the database.

The simplest query is something similar to

SELECT *
FROM event;

This means, select all fields on the table ‘events’, the asterisk stands for ‘all fields’. A somehow more complex query would be like this

But now, we want to know the name and address of the place where the event will occur, instead of the event id. So we want something like this:

SELECT
  thedate as date,
  thetime as time,
  event.name as e_name,
  place.name as p_name,
  address as addr
FROM event, place
WHERE event.place=place.id;

To show the events that will happen within 15 days from now, we must select all entries where the date is greater than today and lesser than today + 15 days.

SELECT
  event.thedate as d,
  event.thetime as t,
  event.name as e_name,
  place.name as p_name,
  place.address as addr
FROM event, place
WHERE event.place=place.id
  AND CURDATE() < = event.thedate
  AND DATE_ADD(CURDATE(),INTERVAL 15 DAY) >= event.thedate;

And how about to order entries by date and time? First order the entries by the date, adn then, events that have the same date will be ordered by the time.

SELECT
  event.thedate as d,
  event.thetime as t,
  event.name as e_name,
  place.name as p_name,
  place.address as addr
FROM event, place
WHERE event.place=place.id
  AND CURDATE() < = event.thedate
  AND DATE_ADD(CURDATE(),INTERVAL 15 DAY) >= event.thedate
ORDER BY
  event.thedate ASC,
  event.thetime ASC;

Ok, that’s it! This is the SQL we need.

A PHP implementation of the query would be something like this

<?php
$con = mysql_connect("mysql.myserver.com","user","password");
if (!$con)
{
  die('Could not connect: ' . mysql_error());
}

$query = "
    SELECT
      event.thedate as d,
      event.thetime as t,
      event.name as e_name,
      place.name as p_name,
      place.address as addr
    FROM event, place
    WHERE event.place=place.id
      AND CURDATE() < = event.thedate
      AND DATE_ADD(CURDATE(),INTERVAL 15 DAY) >= event.thedate
    ORDER BY
      event.thedate ASC,
      event.thetime ASC";

echo "<table<";
$result = mysql_query($query);
while($row = mysql_fetch_array($result))
{
    echo "<tr>";
    echo "<td>" . $row['date'] . "</td>";
    echo "<td>" . $row['time'] . "</td>";
    echo "<td>" . $row['name'] . "</td>";
    echo "<td>" . $row['place'] . "</td>";
    echo "<td>" . $row['addr'] . "</td>";
    echo "<td>" . $row['website'] . "</td>";
    echo "<td>" . $row['phone'] . "</td>";
    echo "<td>" . $row['descr'] . "</td>";
    echo "</tr>";
}
echo "</table<";
?>

Zo'C powerblogroll - A plugin to make powerful blorgrolls with favicons, descriptions, notes and RSS links]]> http://www.z-oc.com/blog/2007/03/how-to-build-an-events-agenda-with-sql/feed/ 0