Let’s suppose today we are having a home architecture 101 class and I’m going to ask you some questions, then think about the first word that comes to your mind.

What place is used for sleeping?

When you take a shower where do you go?

Where can we find a dinning table?

Probably you answered: bedroom, bathroom, and dinning room.

And if I answered: room, room, and room. What do you think? Is that wrong?

It’s not wrong at all, but it is too general!

And what about this answer: Alpha, Delta, and Zeta?

It can be right, if I name my bedroom as Alpha, my bathroom as Delta, and my dinning room as Zeta. And, yes I know, it lacks some standardization… If tell you “my home has three Alpha, two Delta and one beautiful Zeta” , how does it sound?

To avoid this situation we have meaningful names that give context to each room.

So, my dear reader, when we talk about HTML what kind of room or container do we use? And how do we use it?

Basically, we use a <div> element as a container and then we give a meaningful class name for it. Does it work? Sure, it does. And the funny fact is that we use to give common names to some specific <div> elements. According to a research conduct by Google (https://developers.google.com/webmasters/state-of-the-web/2005/classes) we have popular class names like: footer, header, nav, and article.

The natural question is “Why do not standardize those names?”

The new HTML5 does that using new semantic tags like:

<header>

<nav>

<article>

<section>

<aside>

<footer>

Using those new tags we can produce a simple, elegant and easy to read code that clearly describes how your content should be interpreted. That’s not only important for a human perspective, but also for using a machine to deal with that content, for example, it can improve the use of assistive technologies like a screen reader.

Let’s take a quick look at those elements.

<header>

It’s used for the top part of a web page and usually contains things like logo, name, search bar and the main site navigation.

<nav>

It’s used for the navigational content. According to the HTML5 specification only the main navigation links should be part of this element.

<article>

It’s used for independent block of content, such as a forum post, a magazine article, a blog entry, or a user comment.

<section>

It’s used for grouping things, for example a group of <article> elements. Basically the <section> element is used in the same way we use the <div> tag now, but with semantic meaning.

<aside>

It’s used to group content related to its surrounding content. For example, in a blog it can contain categories and a list of popular posts.

<footer>

It’s used typically at the bottom of the page and should contain information about the section it belongs to. For example, on a web site it can hold information about the website, author, copyright, terms and conditions. Used with an <article> it can have date, author, tags and categories.

Semantic tags bring meaning to our web page structure. Think about how meaning is part of our lives and how important it is. If I talk about an Italian restaurant should you expect me to say how many sushi I ate there? Of course, not!

Through meaning we expect some context.

And when I say “I’m hungry!”

What should you expect?

That I’m finishing my article and gonna search for food..

Vitor Nunes

Web developer, interested in e-commerce, interfaces, HTML5 and sushi bolognese , I mean, spaghetti bolognese.

I’m not a psychologist, but I do believe human behavior is made of habits. It’s one of mine go every morning to a bakery next to my home and buy fresh bread. At this bakery, I can exercise one more habit I have: To watch other people habits! And something that I’ve noticed in this place is how the owner organizes and takes care of his products everyday. Talking to him he said: I always organize my store thinking as a customer and how to create the best impression.

This statement triggered in my mind a quote from Aristotle “We are what we repeatedly do. Excellence, then, is not an act, but a habit”.

Agreed!

But on the other hand, when we talk about e-commerce, it’s common to see owners who believe that just an online store with good products and prices are enough. In a world where half of North Americans said they most frequently purchase from online-only stores , according to the “Global Trends in Online Shopping” by Nielsen (http://www.nielsen.com/us/en/insights/reports-downloads/2010/Global-Trends-in-Online-Shopping-Nielsen-Consumer-Report.html), the bakery owner’s habit is really important. Yet why do e-stores exist and still many not provide a good user impression?

I can say, for sure, because the owner doesn’t have the constant improvement habit!

And why does it happen?

Some owners say: It’s too complex! I’m not a web designer/developer and my budget doesn’t afford one.

But even with some technical limitations, there is always something that you can do!

Let’s start..

I like to keep concepts and principles in a simple manner, so my advise is: Think of your online store as a real world store and when you plan on doing something, place yourself from the customer point of view.

As the bakery owner organizes all breads in a way the consumer can find everything, we structure our product categories in the same way. While he uses colors and smells in order to make his store attractive, we have colors and animation to do the same! Who knows maybe we can use smells in a near future…

And when you evaluate something in your store, for example a menu, instead of “Is this menu easy to navigate?” ask yourself “Can I easily find what I want?” .

Do you get the idea?

Yes…So, where should I start my analysis? You may ask..

From the beginning! First ask yourself how does your e-store fits in your business model. What do you want to achieve with your e-store? Why should a customer buy from your store? How do special offers work in your store? Having a clear idea about what your e-store is, and the most important, what your e-store is not, is the cornerstone on choosing what content you should have in your website.

Then, think about how you can categorize your content in a way that is easy for the customer and is also aligned with your business model. What do you have that attracts the customers? Is message that clear in your e-store?

What about your store appearance? Is it attractive to your visitors? And when you compare with some competitors, does it still stand out from the rest?

This subject of ecommerce usability is so broad that even one book alone is not enough to cover everything. Of course my point here is not to write a Marketing 101, or discuss on how to manage a e-store. I just want to plant the continuous improvement seed and show that there is always something we can do to improve our site.

If you have any e-stores and what to share with us your story or questions, just send us an email! Or at least, try to help me feed my habit of talking to people.

Vitor Nunes

Web developer interest in e-commerce, interfaces, and someone with a lot of habits!

Ok, so you already decided which CMS platform to use for your website project, and created an account in a free web host. You are blogging, changing themes and templates, adding plugins/widgets for your website and now you are the webmaster!

Have you ever wondered what would be the next step in the web management? How does all the functionality that you use come together? What is happening behind the scenes? How does your web server work? Maybe now you want to have better control of the appearance and behavior of your pages, or want to create and test new components without having the risk of crashing your website…

It is time to start working in the backstage and make some major changes!

Your CMS application (e.g. Drupal, Joomla, WordPress) is built on top of another software: a web server. All the configuration files of these programs are stored inside the web server and it is very important to know how your server works and is organized if you want to fully customize your website. Some hosting provider companies offer their web servers for free or, if you pay a fee, you may have access to additional features and support. But it is possible for you to have your own web server! And better yet, like any other program you just have to download it! Some options of free HTTP servers (HTTP is the protocol used to deliver HTML documents, images, web resources, and any kind of file through Internet) are Apache HTTP Server, nginx, and Yaws.

However, CMS applications require more than just a web server to run. In order to make possible for us to change the design of our website, store all the posts and comments in our blogs, or translate a whole page in a single click, other programs are required to be installed in your machine. A server-side scripting language (like PHP, Perl, or Python) and a database server (such as MySQL) are almost always a prerequisite for a content management platform but other types of software may also be required for a broader functionality.

And here things start to get more complicated… Putting all this software to work together!

If you never configured a web and database server, and then added script and management modules, doing so could give you a lot of headache! You would need to configure many files (and always be careful to not change more lines than necessary), set up variables, create directories, and you may feel overwhelmed by the documentation.

Fortunately, some companies prepared solution stacks (installation packages) with all required – and other useful – software to put your own application sever up and functional in few minutes. These installers are called AMP packages (AMP stands for Apache HTTP Server, MySQL and PHP) and contain a set of open source components that deliver a complete web solution.

AMP packages usually receive an “additional letter” according to the system platform they are designed to: WAMP for Windows, LAMP for Linux, MAMP for Macintosh, SAMP for Solaris, and so on. You may also find some cross-platform packages that will not follow this nomination.

When searching for an AMP installer, you will come across many options of applications. To make your job even easier, we listed in Table 1 the most useful, up-to-date, and free WAMP packages available:

Table 1 – Free WAMP software list

Our lives are surrounded by context. The same thing can have different a meaning in different situations. What does a zombie on TV mean to you? Maybe, a moment to make popcorn and enjoy a scary movie. And what about a zombie in front of you?  YOU GOTTA RUN!!!

In a less dangerous context, while you are exploring a Javascript code in Magento and face the following “double dollar function”, what do you think?

myElement = $$(‘#myId’);

If you are used with the Javascript library included on the standard Magento installation, the Prototype Framework (http://prototypejs.org/), you could say the double dollar function returns an element, or an array of elements, specified by the CSS selector argument.

Now let’s analyze the following code:

myElement = $(“sumWord”);

Knowing that this code is inside Magento’s context, you can say for sure: This dollar function returns an element specified by the sumWord ID.

Congratulations! You’re right..

But if we didn’t define the context, that line of code could have different meanings!

The same code can be interpreted as a jQuery function that returns an element that matches the sumWord HTML tag.

Because of that similarity, if you try to use both libraries in Magento without any preparation, a zombie apocalypse can happen! I’m just being hyperbolic … But as you know, computers don’t like to grasp the meanings in context. So let’s setup everything and make it direct to the point.

First, download the most recent Jquery (http://jquery.com/) version and store it in the /js/jquery folder. Then let’s override the Jquery dollar function and put an end on the conflict.

Do this by opening this Jquery file and writing on the last line:

var $j = jQuery.noConflict();

From now on, when you want to use the Jquery dollar function in your code, use $j instead of $. For example:

Now that “code” peace reigns again, you can spread the good news through out the rest of your Magento installation.

So, let’s do it, and make jQuery available for all. Open the XML file responsible for your layout and write the following code:

That’s it!

Just for fun lets draw an analog of context from a different perspective… without using code or Magento.

While writing this article I was listening to some songs from the guitarist Andy Rehfeldt. Give him a try and see how Metallica sounds in a smooth jazz context (www.youtube.com/watch?v=OBmM79YadYM) or Green Day sounds as a Brazilian music http://www.youtube.com/watch?v=-uk8v6K2Nxk

I wish you all an excellent week!

Understanding the Joomla directory structure can be very handy if you really want to work with Joomla and develop new functionalities for it. This can be a little boring but this knowledge will benefit you when you start to do more advanced Joomla modifications, such as: create your own extensions or templates.

Before dipping into web development for Joomla, let’s take a look into Joomla directory structure.

When you extract Joomla 2.5 Pack in your server or personal computer, it will present the following files and directories.

Figure 1: Joomla root directory

Overview of each Joomla directory

Joomla directories names are very intuitive. For most of them, you can guess the folder content just seeing it name.  Basically we have these folders:

• root: this is the directory where you made your Joomla pack extraction. When you first place Joomla on your web site, the root directory contains an index.php file that will run the Joomla installer. Once installed Joomla, this index.php page will detect your settings in the configuration.php file and execute your main Joomla engine.

• administrator: In this directory you find all files for your Joomla administrator web interface (components, templates, modules, plugins, etc). The Administrator interface itself is a Joomla web site, and has a complete user interface that can be augmented by administrative extensions.

• cache: This folder holds Joomla cache files. To accelerate performance, Joomla will cache popular pages requested in this directory, so they don’t have to be re-downloaded by PHP and MySQL for each time it is requested.

• components: This directory holds all Joomla components, accept those for your administrator interface.  By default, Joomla has some components available, such as login, newsfeeds, poll, registration, search, and others. They are ready to go, and can already displayed them in your website front-end.

• images: This folder by default holds images used for your extensions. It contains all bitmaps used by the administrator interface as well as images that have been uploaded to present with article content. Within it you find the \smiles folder that contains emoticons; the \stories folder that has images; and the \banners folder that holds some sample banner files.

• includes: In this directory you find core files of Joomla. It contains PHP execution files that automate inclusion of content.

• installation: This folder contains needed files for Joomla installation. It should be deleted after installed Joomla.

• language: This folder holds all language files. Joomla stores translations in a simple INI-based file format. All languages files are contained in it own folder and have filename prefix that matches the folder name. For example, all language files for English template from the country Great Britain are stored in a folder named eng-GB and all of them has a prefix eng-GB.

• libraries:  this directory holds your entire Joomla system and third-party libraries used in your website. A Joomla website uses the core libraries contained inside the \libraries folder. Within this folder you find the \joomla folder where you will see different implementations areas (such as file system, application, database,  etc). These implementations make up the functional parts of your application.  Its library has its own subfolder in this folder to aid in organization.

• logs: Where Joomla stores its log files.

• media: Default folder to store media files. It may contains files related with user interfaces, such as: JavaScript libraries, flash files, etc.

• modules: This folder contains all installed front-end modules. It holds the modules available for display by a template. By default Joomla comes some modules, such as banners, breadcrumbs, latest news, login, newsflash, poll, random image, others. Modules are placed like panels into a Joomla template. They often encapsulate or provide the front-end display for related component. Like a component, a module is a type of add-on extension.

• plugins: It contains all your plugins files. As well as components and modules, plugins are a type of add-on extension. However, they work at a lower level than components.

• templates: This directory has all your frontend template files. You can notice that the name of each template subfolder must match the template it contains. By default Joomla brings some templates already done, and ready for use.

• tmp: This folder stores temporary files and cookies that are used by the administrator and user interface of Joomla. Most of time, extensions’ files are copied to this folder during Joomla installation process.

Usually you don’t need to access these folders. Most of time, you will do your website modifications through the administrator interface of Joomla. However, if you want to modify a template with an external text editor you may do it accessing directly the source files in the Joomla directories. Now that we already know how Joomla files are organized we can start to create our own template (in the next article). So keep it up!

Magento articles and materials are filled with some specific words that might confuse the beginners and turn a logical process into something mystical. Sometimes on the development road, I’ve found myself wondering: “What is an interface? Is that the same as a theme? And what is a design package?”. In this article I want to put a little light on the road and make your path a little bit easier.

In this series of articles, I’m talking about how to develop a Magento theme. So, what is a theme? According to the Magento official documentation, a theme is a collection of files that determines visual output and frontend functionality of your store (you can check my previous article about the placement of those files in the Magento file system). In other words, a theme is responsible for control the look and feel of your store.

Themes are grouped into design packages. Direct to the point, huh?

Yes, but this term can be a little confusing! In Magento earlier versions and documentation a design package is the same as an interface. Now you know what a theme is and how a collection of themes is named… but what about a default theme? And a non-default theme?

Each Magento design package, by convention, needs to have one default theme. This theme is the one responsible for the main appearance of your store. Variations of this theme, like seasonal themes, can be part of the same design package and are named non-default themes or theme variants.

Going deeper in our themes, what are Magento themes comprised of?

A Magento theme is not a Lego® toy, but has a lot of blocks! Blocks are a way by which Magento distinguishes the array of functionalities in the system and creates a modular way to manage it from both visual and functional standpoint.

There are two types of blocks: Structural blocks and content blocks. Structural blocks are used to define the structure of a store page, acting as a container, like a header, left column, main column and footer. Content blocks are responsible for producing content inside a structural block, like category list, mini cart, product tags and product listing, etc.

Now is time to introduce some files that bring order to the scene: Layouts!

These are files that essentially define the structural blocks of your page and map content blocks to them. Also, they tell Magento how to connect them up.

Up to this point we have discussed themes and their components. But where do we apply our themes?

Of course, to our website!

Is a website the same as a store? What is a store view?

In one phrase, a website is a collection of stores, which themselves are collections of store views. Let’s use an example to illustrate this!

First imagine that you want to sell your Lego® projects and create a website to support your endeavor. Then, you realized that a store to sell accessories to customize your projects would be cool. But there is no reason to create a different website just for that! It’s better if the customer can use and make orders on both stores at once. Now we have a scenario with two different store ideas, but with common customers, order information and shipping cart. Here we have one website with two stores.

Now suppose you want to sell worldwide and want to have language options for your stores. Each instance of your store, like one in English, Portuguese, French, is named store view.

Your store can now reach more customers!

Do you know why?

Because of the words!

The same way your international customers can navigate through your website, now we can navigate through Magento universe and documentation. Each new word opens a new reality and infinite possibilities. Let’s go together in this journey!

If you want to share some words, just drop me an email.

See you in the next Magento article.

Vitor Nunes

Web developer interest in e-commerce, interfaces, and some Lego projects.

Is there any solution to rapidly create a high quality website?  Yes, there is! I’m talking about CMS (Content Management Systems). A CMS provides an easier way to create, maintain, and publish a website. No, you do not need to have a great knowledge about HTML, CSS, or any programing language to work with a CMS. This is the great trick: with CMS such as Joomla you can create/edit web pages as easy as edit a Word document.

Among the most used CMSs nowadays are: the WordPress, Joomla, and Drupal. Although they are basically meant to do the same thing – help to create and manage a website.  Each one has its own features and advantages. Which one should you choose? Well that will depend of your goals and website structure.  Basically talking:

• WordPress is strong related with blog creation but it is also getting some website creation qualities;
• Joomla is a very complete CMS. It tends to have better looking templates and a friendlier community. It is used by individual, small, medium, large-sized business and worldwide organizations. and
• Drupal is also a very good CMS. It has more advanced user interface than Joomla.

Between those technologies, I choose Joomla.

Why Joomla?

Currently Joomla is one of the most used CMS (Content Management System) in the market. It has a huge amount of user and tutorials online. Further it has already a lot of implemented plug-ins ready for use. It provides a safe and fast way to create, maintain, and publish information online. If you thought that could not be better, Joomla has one of the most intuitive and nice interface among the existing CMSs. Even who does not have deep knowledge in web programming can use it.

Working with Joomla: Adding Content in your website

Once you installed Joomla in your webserver, you are ready to start create new pages for your website. First you need to access your Joomla website administrator’s area. There you will see a control panel, where you will be able to manage your entire website.

Articles are the main content type managed by Joomla. They are basically text elements and you can add them going to the articles manager. Joomla architecture requires that every article belong to a category, so before you start creating an article, make sure that its category is already created. Is it too complicate? So let’s think a category as a container that will keep your articles. With the Joomla 2.5 you can nest categories. In other words you can nicely organize your article within one category that is within another category.

To create a new category go to “Content>Category Manager>Add New Category” menu or click on the Category Manager Button from the control panel. In the Category Manager, click the “New”.

Figure 1: Creating a New Category

To create a new article go to “Content>Article Manager>Add New Article” menu or click on the “Add New Article” Button from the control panel.

Figure 2.1: Creating a New Article

You will be taken to a page (Figure 2.2) where you will create your text. It seems as a sort of Microsoft Word. Basically what you see is what get, you can format your text as well as you do in the Microsoft interface. Whatever you do on this page will be translated by the software into HTML which can be read by web browsers as a webpage.

Figure 2.2: Creating a New Article

You must add the article’s title and select its category. Further text you can also add images in your article’s content. You can also add a SEO (Search Engine Optimization) information click on the Meta Tags option on the right hand side. When you are happy with your article, click on the “Save” button and your article will be ready to go.

You might add some others parameters to your article such as Title Alias, Author Alias, etc. However those setting can be left blank if you desire. The one basic parameter you will want to change is the Start Publishing date. By default, that date is set to publish the new article the day after posting. You should change your article’s settings to the current that, If you want that your article be displayed now. The article will then appear on the front page.

For more information, look at http://www.joomla.org/. There you will find a lot information and be able to download Joomla. In the next articles I am going to explain some more features and how to work with Joomla. So keep it up!

If it’s your first time into the Web development or the E-Business world, you may become overwhelmed by all of the acronyms and buzz words. XHTML, Plugins, Nginx, GPL, Widgets… The list goes on and is still growing, as many products are being created, new technologies are being developed, concepts and terms are being crafted.

Knowing what all these letters mean can make the difference between a good choice for your web system or a poor one. With so many options for choosing the correct services for your project, it is vital to understand what each company or service provider offers you and how these technologies are related.

We can usually find extensive glossary lists over the internet and searching for what an acronym such as SRGS stands for is a matter of seconds using the most popular search engines. However, linking them together can quickly become an uneasy task because one term is often used in another one’s definition.

In this article we grouped some of these key terms by their role so that related terms are explained together. This way you can have the general idea of the purpose of the technology and learn what you should look for when selecting a web management company, or just what to search if you want to get deeper knowledge about these concepts.

HTML, XHTML, CSS, XML, DOM, SOAP, RDF

These are just a few examples of technical recommendations from the World Wide Web Consortium (the main international standards organization for the Web). They are Web technologies used to build web page structures and design, determine how data is encoded, represented, manipulated, transmitted and accessed.

Ajax, Flash, JavaScript, ASP, PHP, Perl, ColdFusion

These are programming and/or scripting languages used on the client-side (for instance your web browser) or the server-side (the system that hosts the website) for creating dynamic content and complex behaviors that make our experience in the web more interactive, secure, and usable.

ADS, DB2, Firebird, H2, MySQL, Microsoft SQL Server, PostgreSQL

These are databases and computer programs used to create, maintain, and access databases. A database is an integrated collection of data records, files and other objects. User information, applications configurations, and all sorts of data are usually stored in databases.

Apache, IIS, Nginx, GWS

These are examples of web servers. A web server is software that can be accessed from the Internet and uses programming languages, databases, and other types of infrastructure for hosting websites and applications. They are usually offered by web hosting providers that offer adequate hardware, bandwidth, uptime, and maintenance for a website at a monthly cost.

AGPL, BSD, CDDL, GPL, Creative Commons

These are free software licenses. Their purpose is to grant users the freedom to run, copy, distribute, study, change and improve software – which would otherwise be prohibited by copyright law. Each one of them grants different levels of legal rights to use, modify or redistribute a product.

Drupal, Joomla!, Mambo, WordPress, XOOPS

These are content management systems (CMS). A CMS is software for facilitating the publishing, editing, and maintenance of content on a website from a central page. It changes and updates content, rather than the structural or graphic design of a web site.

Plugins, Widgets, Themes, Templates

These are features used in CMS websites to easily change their graphical interface, extend their functionality, and perform a specific task in a self-contained area. These useful tools are created by web developers to facilitate the creation of websites and to enrich user experience when using them.

Do you have any glossary and web terms links you find useful? If so let us know or share them with us.

What is design? What is the difference between a web designer and a graphic designer? What does a web designer do? In this article I will be answering these questions and showing techniques of how to become a good web designer.

Many people mistakenly believe that a web designer’s role is restricted to making a beautiful web page. They tend to consider design as mere aesthetics production, disregarding completely the conception of the project. Before starting, we must be aware that design refers to a visual and functional project of a product (in our case, a website). Definition for design goes far beyond to Photoshop files. Design is an entire project and not merely illustration. A design’s function is to generate performance, quality, durability and good appearance to something. Each design project requires planning, research, creativity and techniques. The web designer’s function is to adapt a website to its users. A website’s users should be captivated through the pages’ aesthetics and practicality. Summarizing a web designer’s role is to make something functional, and transform information in communication.

Being a designer is to understand users’ needs and produce concepts, solutions and products that people use and want to use. This requires a focus on human behavior, psychology and an understanding of why people do what they do. Having a fast and functional website is a requirement, but having also a beautiful and practice layout makes a great difference. People give importance to a project’s aesthetics but also to its usability.  Designers must evaluate and make the users’ interaction with a website more enjoyable, easy and convenient.

Unlike graphic designers, web designers are tied to the Internet’s limitations. Graphic designers work with high-resolution graphics and static images. On the other hand, web designers worry with the website’s quality of navigation. A good web designer is concerned with maintaining the website’s aesthetic quality, but, above all, a web designer is concerned with the speed that a webpage will be downloaded by the user.

Good Web Designers follow and use the Web Standards. The Web Standards seek to organize and make websites production more simple and effective, giving higher attention to quality of coding from web pages. The Web standards divide and organize websites’ production in three layers (content, presentation and behavior), all related but not dependent on one another. The Advantages of using separation in content (XHTML), presentation (CSS) and behavior (JavaScript) layers are:

• With smaller files in  presentation (CSS) and behavior layers, JavaScript files will be loaded in the browser cache; webpages will be loaded faster; and their quicker user experience.
• With the formatting of all pages based on the same CSS file, we will have a better visual consistency, possible maintenance and make redesign cheaper and more efficient.
• With more semantic markup (used with its proper meaning) and the document information structured in a logical sequence, we will have better results in search engines, and better accessibility and interoperability between different devices.

Good tools help a good design elaboration. Currently, proprietary tools such as Photoshop and Dreamweaver are the most used tools and they provide easier website production and edition. But for those who do not have financial resources to acquire their licenses, open source software can be a good (or unique) option. Both, GIMP and Inkscape are great graphic editor options. These tools are relatively new and still have a small community of users. So they do not outweigh Photoshop, which has been used for a long time and has quantity and quality of resources, interface, icons, shortcuts, and automation higher than its competitors. However, we must put in our mind that in a web project, the quality of a design does not depend on the tool being used, but the designer’s talent and creativity. The utilization of software owners, as Photoshop, makes the production process easier, but does not determine the product quality.

Steps to create a good design:

1. Make a document (briefing) where will be the project’s goals, product, target audience (gender, age, culture, social class, etc.), visual identity, motivation, etc.
2. Make another document (wireframe) where you will plan the best way that the information will be displayed on the website. Organizing how the interface will be structured and how the information will be spread (categories and priorities). This document will represent the information’s distribution and hierarchy. You will find good tools to make this wireframe at the link: http://wireframes.tumblr.com/. Or if you prefer, you can use the traditional method (paper and pencil).
3. Build the website’s layout.

Some advice:

• To accomplish a good design, you need to do concepts and visual communication studies. You should be aware of why using certain colors, shapes and fonts, images and sensations and what those elements are going to make a user feel. A great tool that can assist you with the Color Palette is found at the link: http://kuler.adobe.com.
• Be aware that the font style being used is related to the project context and will also affect the user and it should be totally readable.
• Finishing: Simplify, simplify, simplify! Include only those elements that will help people to simplify their tasks. Less is more. No element should be on a web page without having a defined function. To make the “simple” is always more difficult.

It’s normal for us as developers to change the appearance of a product or application. Even if you have an excellent theme for your Magento website, maybe, you could create a seasonal design, or make some alterations in your current theme. Why not try something new?

If you have prior experience using CMS, for example Joomla, probably you’ve noticed that in Magento themes are structured in a different way. While in Joomla you could create your template using just one file, in Magento you need to use different files and follow its file structure. This idea might sound a little bit complex in the beginning, but with a little understanding you see all the advantages of Magento and how flexible it is.

Magento’s themes are developed around two main principles: structure and appearance. A theme’s structure defines blocks on the page and the content related to each block. It’s controlled by files that stores information about layout, templates and locales. On the other hand, appearance is how a theme looks and feels. The theme’s appearance is controlled by CSS, JavaScript and images.

Also, Magento requires those files in the proper directories. Files related to the theme’s structure must be in the app/design/frontend/<designPackageName>/<themeName>/ directory. Inside this directory, the following sub directories are used to organize all the files:

• Layout—Contains the basic XML files that define block structure for different pages as well as control meta information and page encoding.

• Template—Contains the PHTML files that contain xHTML markups and any necessary PHP to create logic for visual presentation. Some templates are page templates and some are block templates.

• Locale—Contains simple CSV text documents organized on a per language basis containing translation strings (as name-value pairs) for all text produced by Magento (e.g., for interface elements and messages, not    products and categories)

Files related to theme appearance must be in the skin/frontend/<designPackageName>/<themeName>/ directory. Inside this directory, the following sub directories are used to organize all the files:

• CSS—Contains the CSS files used to control visual styling of the website

• Images—Contains all images used by the theme

• JS—Contains theme-specific JavaScript routines and callable functions. (Most JavaScript libraries, which might be shared across themes) are placed in the js/ directory at the Magento root

There is a reason behind this apparent complexity. Magento stores those files in two main different directories for security reasons. Considering the client’s browser only needs to access the files in the skin/frontend/<designPackageName>/<themeName>/ directory and just your Magento application should have access to the app/design/frontend/<designPackageName>/<themeName>/ directory, you can better control  the permissions for each directory and keep your application secure.

If you plan to create your own theme, the first step is to create the new directories for it. The following articles in this series will bring information on how to change and create structure or appearance files in order to create your theme. See you next time.