HTML5 Semantic Tags: In search for meaning

by Vitor Nunes on May 18, 2012

HTML5Let’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.

Making it a Habit of Improving Your E-Store

by Vitor Nunes on May 7, 2012

e-store-habitsI’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!

How to Set Up Your Own Web Server

by Leonardo Carvalho on May 3, 2012

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:

How-to-set-up-your-own-web-serverTable 1 – Free WAMP software list

Something worth noticing is that some of these WAMP packages are not designed for production or web hosting. Their purpose is to be a development and testing tool for your code before it is deployed to your host provider!

Other popular solution stack for Windows is Microsoft Web Platform Installer, which uses only Microsoft technologies and changes:

  • Apache server for Internet Information Services;
  • MySQL for SQL Server Express;
  • PHP programming language for .NET Framework.

UNIX and Mac users usually don’t even have to worry with setting things up. Because of the popularity of AMP software, the majority of latest UNIX-like and Mac OS operating systems already have these set of applications pre-installed!

Regardless the AMP package, all of them has one thing in common: making our life easier! They make the process of installing and running your own web server straightforward, and adding modules or your favorite CMS applications will not be as complicated as before.

Now you can start tweaking your favorite CMS code without breaking your official website and really be the admin!

Using jQuery in Magento

by Vitor Nunes on May 2, 2012

Jquery-magento-codeOur 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:

Using-jQuery-in-Magento1

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:

Using-jQuery-in-Magento2
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

by Pedrina Brasil on April 30, 2012

joomla-directory-structureUnderstanding 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.

Joomla-Directory-Structure

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!

← Previous Entries