The Science of Web Art, Design and Development

View posts for » Category "Tutorial"

Colour reduction algorithms in Photoshop

Colour Reduction Algorithms in Phtoshop title=

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.

read full post…

Comments (4)

Domain redirect wizardry with .htaccess rules

So you decided your domain doesn’t fit you as well as you’d like. And you are also afraid you’ll be losing all the old links and search
engine ranking if you move to a new one. Maybe you also want to use the current domain for a different project that suits it best.

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.

read full post…

Comments (23)

Categorizing Pages and Posts in Wordpress

Having authored a plugin to display sub categories on wordpress, I’m often faced with users that realize they can’t use categories on pages, and they turn to me to explain how can be done. This post is meant to help all these people that want to learn why they can’t use categories on pages and, show you that this doesn’t mean you can’t categorize pages at all.

Pages and subpages

Parent pages and layoutsIn 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.

Food Menu

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

Post Categories in WordpressFor 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.

Comments (13)

Tutorial: A category based archive on Wordpress

I followed Lorelle’s advice advice and added a category based archive on Zo’C’s archive page, and now I’m going to tell you how to create yours.

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.

read full post…

Comments (70)

Animation in Photoshop – Video Tutorial

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.

Comments (10)

Podcasting, Videoblogging and Social Screencasting: tools and ideas

Out of Syntony TVThe so called Web 2.0 is the medium where readers are also writers or, in a more general sense, consumers are also producers. Every single comment you leave on a blog is content you produce and use to expose yourself while, hopefully, contributing to the whole online community one crumb at a time.

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

read full post…

Comments (15)

A powerful Archive Page for your wordpress blog

Tired of that old Archive page that displays the months in which you have posts? Even worse, tired of that bulk on your sidebar?

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.

read full post…

Comments (33)

How to manage all your mail in Gmail: Filters, Labels, multiple Id’s and even Backups

Gmail says “Search, don’t Sort” and by all means this is a good idea and they also tell you not to ever delete a message again, which is interesting, at least for the messages that have any value.

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

read full post…

Comments (17)

Compact digital cameras Vs. DSLR

This is the 6th and final part of a tutorial about photography basics. So far we’ve seen

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.

read full post…

Comments (3)

Mastering the Shutter speed

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

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.

read full post…

Comments (0)