Back to basics: how to code an HTML5 template

Posted on March 28, 2012 by Portsmouth Media in Blog Leave a comment

An article I was reading about photoshop

class=”size-full wp-image-31022 alignleft” title=”html5″ src=”http://netdna.webdesignerdepot.com/uploads/2012/03/html5.jpeg” alt=”" width=”200″ height=”160″ />Markup is a beautiful thing, and it certainly has changed over the years. What was effectively HTML1, has certainly progressed to an amazing semantic markup language, to which we can largely thank the W3C. And, what do ya know, the next thing to thank them for has come about – HTML5.

Unlike previous version of HTML, where the code was mostly a limited structure that was determined by how you made use of the class and ID elements, html5 really attempts to provide much more structure.

All of the layout can be created with semantic tags and elements that determine how you should structure, and, arguably more important, that help you structure each page. This produces code that is much more clean and readable than in previous versions of HTML, and really is something quite amazing. The new tags really require that you think about how you are structuring your page, which let’s be honest – in the end that is a great thing for us web designers and developers alike. id=”more-30851″>

Before understanding the structure of HTML5, and how to create and code an example template to use for your projects you should be aware of how it came about. Be aware though that the current version of HTML5 has not reached a version that the W3C could call final as of yet, but their is quite a lot to learn about and start using in your code right now. Here is what the W3C has to say on this issue:

“Implementors should be aware that this specification is not stable. Implementors who are not taking part in the discussions are likely to find the specification changing out from under them in incompatible ways. Vendors interested in implementing this specification before it eventually reaches the Candidate Recommendation stage should join the aforementioned mailing lists and take part in the href=”http://www.w3.org/html/wg/”>discussions.”

class=”spacer_” />

But, don’t let that scare you. There are always people out there constantly making sure that it doesn’t get changed out from underneath of all of us. So you will certainly be aware if such a drastic change does indeed happen. Back on topic, one of the main questions people have about HTML5 is “<header>, <nav>, <footer>, these tags seem understandable enough but where in the world did the W3C come up with these?” Well, that question is easy enough to answer. It came from you!

It actually came from all of us. In 2005 Google conducted a href=”http://code.google.com/webstats/2005-12/classes.html”>study of over 3 billion websites and found that the most common classes used in common markup were actually what you see there on that page. Footer, menu, title, small, text, content, header, and nav are all among the top of the popularity chart. And essentially that is how the W3C decided on what to use for the new semantic tags for HTML5. Now that we know about that, let’s dive right into what those tags are and the basic fundamental changes in HTML5.

class=”spacer_” />

The doctype

A doctype isn’t particularly an element of the HTML, but it is a deceleration, and one that has become more and more important as time goes on. Using one appropriately can help your browser understand what sort of HTML it is trying to parse so we always want to use the appropriate doctypes. In all honesty, at this current time, you can pretty much just use the HTML5 doctype for everything though – but let’s cover some past ones as well. Here is where we have come as far as simplicity:

HTML2:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0 Level 2//EN">

HTML3:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN">

HTML4:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML5:

<!DOCTYPE html>

Pretty great right? You don’t need to keep a document for copying and pasting in some ridiculously long doctype, or even worse yet, try to remember the ridiculously long doctypes of versions past. For HTML5 you simply have to type <!DOCTYPE html>. Ah, what a relief.

class=”spacer_” />

Other simplifications in HTML5

Before leaving this section, let’s go through some of the other elements that have gotten simpler. The root element has been simplified, to which instead of having to write something like:

<html xmlns=”http://www.w3.org/1999/xhtml”
lang=”en”
xml:lang=”en”>

We can just write:

<html lang=”en”>

The things we need to copy and paste getting smaller and smaller by the minute. For instance, also, In the head element, our character encoding went from things like:

<meta http-equiv=”Content-Type” content=”text/html;>

to the newer version in HTML5:

<meta charset=”UTF-8”>

And lastly, our links have dropped their type attribute. So for instance, this:

<link rel=”stylesheet” href=”style.css” type=”text/css”>

Becomes this:

<link rel=”stylesheet” href=”style.css”>

class=”spacer_” />

So what’s with these new tags?

The “section” tag

The section element is basically any generic section of an HTML document. Most typically though, it is a thematic grouping of content – which can have a heading but doesn’t require one.

A general rule of thumb for using the section heading is only use it if it would be explicitly referenced in the document’s outline. If, in the outline, there was a ‘section’ that you referenced or feel that all the content in one area is a ‘section’ of sorts – then do indeed include the section tag. If you want to use it mainly for styling purposes though, just don’t. Instead, use a <div> tag as you normally would.

class=”spacer_” />

The “nav” tag

The “nav” element represents any section of a page that links to other parts of that page or other pages within the sitemap. Anytime you think of navigation links, you should think “nav tag”.

The nav element is particularly intended for larger navigation blocks. Any large element that links to other sections of the site’s page or other pages of the site. Keep in mind though, a navigation section doesn’t have to be in the form of a list, albeit that is pretty standard. It can be in prose, paragraph tags, or pretty much anything – as long as it was originally suited to be in such tags in the first place.

class=”spacer_” />

The article tag

The article element represents a self-contained composition in a document, page, or any site. The really important thing to keep in mind with article tags is that it is, typically, independently distributable or reusable content is what is usually placed within the tags. It could be a forum post, a magazine or newspaper article, or a blog entry, even comments – as long as it is any independent item of content.

Articles can hold “section”s inside them, “header”s inside them, even “hgroup”s inside them. But do keep in mind when and how you are using this element, as it isn’t quite as commonly used as a <div> tag. So in summation, it isn’t a one-in-all answer for everything, but it does indeed have a lot of uses.

Let’s hop into an example. For instance, let’s say you have a blog post with some comments. You can do that like this in HTML5:

<article>
<header>
<h1>The Blog Entry Title</h1>
<p>12/25/2045</p>
</header>
<p>Blog entry</p>
<p>...</p>
<section>
<h1>Comments</h1>
<article>
<footer>
<p>Posted by: <span>Name of person</span></p>
<p>Time: 15 minutes ago</p>
</footer>
<p>Comment text here
/p>
</article>
<article>
<footer>
<p>Posted by: <span>Name of person</span></p>
<p>Time: 25 minutes ago</p>
</footer>
<p>Another comment here</p>
</article>
</section>
</article>

class=”spacer_” />

The “aside” tag

The aside element represents any section of a page that consists of content that is tangentially related to the content around the aside element. The most important thing to remember with this tag is that although it is content tangentially related to the content around the aside tag, it is typically information or content that is separated in characteristic. You will most often use it in sidebars, as most sidebars are perfect to be entirely wrapped in aside tags. Other uses can include pull quotes, bits of advertising, groups of nav links, or even addresses near the address of a location in question.

To get into more detail though, it is for anytime you feel the need to quite literally take an aside and explain, reference, mention, state, or question something. You can even use an aside element for a larger section of a site, such as a side-bar for Twitter, or Facebook, or random links. You could have it be an aside, then use a header and nav section within it even to help understand what is going on there. You can use it in the footer section of blog posts to reference things about them, or pretty much anywhere it can be perfectly implemented.

class=”spacer_” />

The “hgroup” tag

The hgroup element represents the heading of a section. This element is best used to group a set of h1-h6 elements when the heading has multiple levels, or subheadings – such as exactly the article you are reading. This would be perfect for an hgroup. You can also use it for alternative titles, or tag-lines.

The W3C reminds us:

“For the purposes of document summaries, outlines, and the like, the text of hgroup elements is defined to be the text of the highest ranked h1–h6 element descendant of the hgroup element, if there are any such elements, and the first such element if there are multiple elements with that rank. If there are no such elements, then the text of the hgroup element is the empty string.

class=”spacer_” />

Other uses, for instance, include areas of a blog where you are listing the header and subtitle for your blog post. You can also use it for book titles and descriptions, for listing doctors in your area and their areas of expertise, or even use it to help replicate the functionality of a table. Let’s take a look at such an example now. On a table we’d have:

<hgroup>
<h1>Doctor Name:</h1>
<h3>Randy McDocterson</h3>
<h2>Doctor Specialty</h2>
<h3>Slapping People</h3>
</hgroup>

So there you can clearly see, in the markup, that we have a doctor named Randy McDoctoerson who’s specialty is slapping people. Now, that is a little odd, but hey – it gets the point across.

class=”spacer_” />

The “header” tag

The header tag represents any group of introductory or navigational aids within a site, or sections of a site. So now that the formal definition has been stated, let’s break it down a bit. We all know what a header is, but to be specific it includes various things on the top of most site. These header areas usually include branding sections, call to action items, and perhaps some navigation. Really it can be used any place that you used to write: <div id=”header”> you can now write <header>, and get the same semantic markup structure. It is important to note, that the W3C especially remarks that a header element should contain either a set of H1’s, a sections heading individually (h1-h6), or an hgroup element. Header elements can also be used to wrap a section’s table of contents, a search form, or any relevant logos – such as what we mentioned above. Keep in mind though that the header is not sectioning, as in it isn’t a replacement for an all-in-one div either. Rather, it is just a great semantic element to use for specific situations.

To note: It can be used in any section’s beginning area, as it doesn’t have to be in the top or beginning of your HTML document. But, that is where it is most typically implemented.

class=”spacer_” />

The “footer” tag

The footer element represents a footer for its nearest nested parent section, and typically contains information about its parents section. The footer tag is very similar to the header tag, but for the opposite section of a page. Often times you will see a footer of a page that contains links again that were in the navigation, and perhaps a logo, or other such things – well all of these can now be housed in a <footer> tag. Though a footer is typically used at the end of a website, this tag can represent the end of any section of content (and it doesn’t even have to be at the end of said section to represent it). For instance let’s take a look at this example:

<body>
<footer><a href=”..”>Back to index...</a></footer>
<hgroup>
<h1>Lorem</h1>
<h2>Ipsum</h2>
</hgroup>
<p>Some text here.</p>
<footer><a href=”..”>Back to index...</a></footer>
</body>

class=”spacer_” />

The “address” tag

The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let’s dive right in.

<address>
 <a href="../People/Raggett/">Dave Raggett</a>,
 <a href="../People/Arnaud/">Arnaud Le Hors</a>,
 contact persons for the <a href="Activity">W3C HTML Activity</a>
</address>

I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so:

<footer>
 <address>
  For more details, contact
  <a href="mailto:js@example.com">John Smith</a>.
 </address>
 <p><small>© copyright 2038 Example Corp.</small></p>
</footer>

And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn’t ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today.

class=”spacer_” />

HTML5 Template

So now that we have learned about HTML5, let’s get into coding our own template. Let’s start with an average document.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
</head>
<body>
</body>
</html>

Now let’s add the stylesheet link, just for good practice, even though we may not use it.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

Now I think it’d be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let’s do:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<header>
<hgroup></hgroup>
</header>
<section>
</section>
<footer>
<hgroup>
</hgroup>
<address></address>
</footer>
</body>
</html>

Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let’s add a navigation element as well.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<header>
<hgroup>
<h1>HTML5 Template</h1>
<h3>Pretty standard template</h3>
</hgroup>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About HTML5</a></li>
</ul>
</nav>
</header>
<section>
</section>
<footer>
<hgroup></hgroup>
<address></address>
</footer>
</body>
</html>

And there we go, we have added some navigation with a nice unordered list there in the header section. But, wait a minute. What if you have a nice big footer and want those same navigator elements in the footer as well. Well, let’s add it there also. Except, this time we aren’t going to use the <nav> tag and instead are going to use a div with the class “footer_navigation”. And while we’re at it, let’s go ahead and fill out our footer section with some content.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<header>
<hgroup>
<h1>HTML5 Template</h1>
<h3>Pretty standard template</h3>
</hgroup>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About HTML5</a></li>
</ul>
</nav>
</header>
<section>
</section>
<footer>
<div class="footer_navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About HTML5</a></li>
</ul>
</div>
<hgroup>
<h3>By Dain Miller</h3>
<h4>from Madison, WI</h4>
</hgroup>
<address>
<a href="mailto:miller.dain@gmail.com">Email Me</a>
</address>
</footer>
</body>
</html>

Now let’s add in some bits for IE, and other such technicalities.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/style.css">
<!-- IE6-8 support of HTML5 elements --> <!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<hgroup>
<h1>HTML5 Template</h1>
<h3>Pretty standard template</h3>
</hgroup>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About HTML5</a></li>
</ul>
</nav>
</header>
<section>
</section>
<footer>
<div class="footer_navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About HTML5</a></li>
</ul>
</div>
<hgroup>
<h3>By Dain Miller</h3>
<h4>from Madison, WI</h4>
</hgroup>
<address>
<a href="mailto:miller.dain@gmail.com">Email Me</a>
</address>
</footer>
</body>
</html>

And there we have it: a basic but complete HTML5 template!

class=”spacer_” />

Dain Miller is a freelance web designer and developer based out of Madison Wisconsin. He is mainly focused on building products in the online education space, and he has a passion for responsive design. You can follow him on twitter at href=”http://twitter.com/_dain”>@_dain.

What are your favorite new CSS3 techniques? Or little-used/little-known CSS techniques? Let us know in the comments!

/>
width=”100%” style=”border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7;” height=”20″>
valign=”center”> href=”http://www.mightydeals.com/deal/parallels.html?ref=inwidget”> face=”Arial” size=”3″ color=”#e64f32″>Run Multiple Versions of Windows or Linux on your Mac or PC width=”90″> href=”http://www.mightydeals.com/?ref=inwidget”> /> src=”http://mightydeals.com/web/images/widget-logo.png” height=”40″ width=”90″ border=”0″ /> />

href=”http://www.webdesignerdepot.com/2012/03/back-to-basics-how-to-code-an-html5-template/”>Source

Webdesigner Depot

The Basics Of Creating A Magento Module

Posted on March 3, 2012 by Portsmouth Media in Blog Leave a comment

An article I was reading about css3

A lot of community extensions (or modules) are available for the feature-rich open-source e-commerce solution Magento, but what if they don’t quite work as you want them to? What if you could understand the structure of a Magento module a little better, to the point that you could modify it to suit your needs or, better yet, write your own module from scratch?

The Basics Of Creating A Magento Module

In this tutorial, we will introduce the coding of Magento in the form of a “Hello World”-style module. The goal of the module will be simply to write some information to a log file every time a product is saved. This very basic module will allow us to cover a number of interesting topics, including:

The app/code directories,
The structure and creation of a Magento module,
Event observers,
Logging.

Before We Begin

This tutorial assumes that you already have an installation of Magento up and running, either locally or on a development server, that you can add new files to. The version of Magento that you use doesn’t really matter, because we will be covering fundamental aspects that exist across all versions and editions: Community, Professional and Enterprise.

Disable the Cache

This is one of the first lessons a Magento developer should learn: disable the cache! You can do this by going to Admin Panel → System → Cache Management → Select All → Actions: Disable → Submit.

While very good at boosting performance in a production environment, the cache is a developer’s enemy. Leave it enabled at your peril! Every Magento developer I have met has on more than one occasion spent an hour or so wondering why their latest update is not showing up, only to find that Magento is still displaying the version of the website that it conveniently cached earlier that day.

The app/code Directory

The brains of Magento can be found in individual modules inside the app/code directory, which is split in to three areas: core, community and local.

Core

The app/code/core directory contains all of the functionality for products, categories, customers, payments, etc. Until you know what you are doing (and even afterwards), keep app/code/core off limits because these files should not be modified.

Magento is structured in such a way that you can alter the functionality of any of these core files without modifying them directly, which ensures that your application remains upgrade-proof. By all means, look in order to better understand how Magento works, but do not touch.

Community

As the name suggests, app/code/community is where you will find modules that have been provided by third parties (i.e. not Magento’s core team). Hundreds of modules are available through Magento Connect, and when you install them through the built-in “Package Manager,” this is where they end up.

Local

Magento ships with an empty app/code/local directory, ready for you to add bespoke modules for your own Magento installation. This is where we will be working for the duration of this tutorial.

Structuring Our Directory

Open your favorite editor, and navigate to app/code/local to add some new directories and files.

Module Namespace

The first directory we will create is a “namespace.” This can be called anything you like, but the convention is some form of the name of the company or module’s author. Magento uses “Mage” as its namespace. Here at Ampersand Commerce, we use “Ampersand.” For this tutorial, we will use “SmashingMagazine” as our namespace. So, create the directory app/code/local/SmashingMagazine.

Module Name

For the next directory, we will give our module a descriptive name. The module we are creating will write log entries each time a product is saved, so a logical name would be LogProductUpdate. Create the directory app/code/local/SmashingMagazine/LogProductUpdate.

We should now have the following directory structure for our module. These directory and file names are case-sensitive, so capitalize where appropriate.

app
   -code
      --local
         ---SmashingMagazine
            ----LogProductUpdate

Configuring Our Module

Next, we will begin to configure our module. The configuration files belong inside our module in a directory named etc, so let’s create that along with a new XML file: app/code/local/SmashingMagazine/LogProductUpdate/etc/config.xml. This XML file will inform Magento of the location of the files in our module, as well as many other things, such as version number and events to observe. For now, we will create a simple config.xml file, which contains comments that explain the meaning of each section.

<?xml version="1.0" encoding="UTF-8"?>

<!-- The root node for Magento module configuration -->
<config> 

    <!-- The module's node contains basic information about each Magento module -->
    <modules>

        <!--
            This must exactly match the namespace and module’s folder names,
            with directory separators replaced by underscores
        -->
        <SmashingMagazine_LogProductUpdate>

            <!-- This is the version of our module, starting at 0.0.1 -->
            <version>0.0.1</version>

        </SmashingMagazine_LogProductUpdate>

    </modules>

</config>

Activating Our Module

The next step is to inform our Magento installation that our module exists, which we do by creating a new XML file in app/etc/modules. The name of this XML file can be anything you like, since Magento will read all XML files in this directory and will be interested only in the content. However, by convention we should give the file and module the same name. Let’s create app/etc/modules/SmashingMagazine_LogProductUpdate.xml with the following content:

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <modules>
        <SmashingMagazine_LogProductUpdate>

            <!-- Whether our module is active: true or false -->
            <active>true</active>

            <!-- Which module code pool to use: core, community or local -->
            <codePool>local</codePool>

        </SmashingMagazine_LogProductUpdate>
    </modules>
</config>

Sanity Check: Is The Module Enabled?

We now have a fully functional module that is enabled in Magento. It doesn’t do anything, but it is a valid module. This is our first opportunity to see whether we have correctly configured everything so far. If we log into the Magento admin panel and navigate to System → Configuration → Advanced → Advanced and view the “Disable Modules Output” listing, we should see our SmashingMagazine_LogProductUpdate module listed as enabled. If it is not listed, then something has gone wrong, so carefully run through the steps up to this point again. This is usually when new Magento developers discover the cache!

Our module’s structure now looks like this:

app
   -code
      --local
         ---SmashingMagazine
            ----LogProductUpdate
               -----etc
                  ------config.xml

   -etc
      --modules
         ---SmashingMagazine_LogProductUpdate.xml

Defining An Event Observer

Event observers are extremely powerful and are one of the cleanest ways to extend Magento’s functionality without having to rewrite or override any core methods or classes. We want to observe the event that Magento dispatches just after a product is saved, so the code for the event we are interested in is catalog_product_save_after. Determining which event code to use when defining a new observer requires a basic understanding of Magento’s model layer, which is beyond the scope of this tutorial. Don’t worry, though: we’ll cover it another time!

We now need to modify our config.xml to include the event observer definition:

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <modules>
        <SmashingMagazine_LogProductUpdate>
            <version>0.0.1</version>
        </SmashingMagazine_LogProductUpdate>
    </modules>

    <!-- Configure our module's behavior in the global scope -->
    <global>

        <!-- Defining an event observer -->
        <events>

            <!-- The code of the event we want to observe -->
            <catalog_product_save_after>

                <!-- Defining an observer for this event -->
                <observers>

                    <!--
                        Unique identifier in the catalog_product_save_after node.
                        By convention, we put the module's name in lowercase.
                    -->
                    <smashingmagazine_logproductupdate>

                        <!-- The model to be instantiated -->
                        <class>smashingmagazine_logproductupdate/observer</class>

                        <!-- The method of the above model to be called -->
                        <method>logUpdate</method>

                        <!-- We generally use the singleton type for observers -->
                        <type>singleton</type>

                    </smashingmagazine_logproductupdate >

                </observers>

            </catalog_product_save_after>

        </events>

    </global>

</config>

Configuring Our Model’s Directory

In the event observer defined above, we made reference to a model that we have not yet created. We need to inform Magento where to find models in our module by updating config.xml with the following:

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <modules>
        <SmashingMagazine_LogProductUpdate>
            <version>0.0.1</version>
        </SmashingMagazine_LogProductUpdate>
    </modules>

    <!-- Configure our module's behavior in the global scope -->
    <global>

        <!-- Defining models -->
        <models>

            <!--
                Unique identifier in the model’s node.
                By convention, we put the module’s name in lowercase.
            -->
            <smashingmagazine_logproductupdate>

                <!--
                    The path to our models directory, with directory
                    separators replaced by underscores
                -->
                <class>SmashingMagazine_LogProductUpdate_Model</class>

            </smashingmagazine_logproductupdate>

        </models>

        <events>
            <catalog_product_save_after>
                <observers>
                    <smashingmagazine_logproductupdate>
                        <class>smashingmagazine_logproductupdate/observer</class>
                        <method>logUpdate</method>
                        <type>singleton</type>
                    </smashingmagazine_logproductupdate >
                </observers>
            </catalog_product_save_after>
        </events>

    </global>

</config>

Creating An Observer Model

We will now create the model to be instantiated when the event is dispatched. Create a new PHP file in app/code/local/SmashingMagazine/LogProductUpdate/Model/Observer.php with the following content:

<?php
/**
 * Our class name should follow the directory structure of
 * our Observer.php model, starting from the namespace,
 * replacing directory separators with underscores.
 * i.e. app/code/local/SmashingMagazine/LogProductUpdate/Model/Observer.php
 */
class SmashingMagazine_LogProductUpdate_Model_Observer
{
    /**
     * Magento passes a Varien_Event_Observer object as
     * the first parameter of dispatched events.
     */
    public function logUpdate(Varien_Event_Observer $observer)
    {
        // Retrieve the product being updated from the event observer
        $product = $observer->getEvent()->getProduct();

        // Write a new line to var/log/product-updates.log
        $name = $product->getName();
        $sku = $product->getSku();
        Mage::log("{$name} ({$sku}) updated", null, 'product-updates.log');
    }
}

We’re done! Try it out.

The directory structure for our completed module should now look like this:

app
   -code
      --local
         ---SmashingMagazine
            ----LogProductUpdate
               -----Model
                  ------Observer.php

               -----etc
                  ------config.xml

   -etc
      --modules
         ---SmashingMagazine_LogProductUpdate.xml

Now that our module is complete, it’s time to try it out! Log into the Magento admin panel, create or update a product in your catalog, and then check the var/log folder to see your product-updates.log file populated.

If nothing appears or the directory does not exist, ensure that the correct permissions are set to allow Magento to write to this directory, and that logging is enabled in Admin Panel → System → Configuration → Developer → Log Settings → Enabled.

This basic tutorial is meant to give you an overall understanding of how Magento modules work. After completing this tutorial, spend some time exploring the Magento modules in app/code/core and see if you now have a better idea of how it all works.

We welcome any questions and would love to hear any feedback in the comments area below.

(al)

Smashing Magazine Feed

Design Basics Index (Index Series)

Posted on January 16, 2011 by Portsmouth Media in Blog Leave a comment

Design Basics Index (Index Series)

ISBN13: 9781581805017
Condition: New
Notes: BRAND NEW FROM PUBLISHER! BUY WITH CONFIDENCE, Over one million books sold! 98% Positive feedback. Compare our books, prices and service to the competition. 100% Satisfaction Guaranteed

With this latest addition to his popular Index series, Jim Krause covers all the basics–everything from typography and color to layout and business issues. Design Basics Index is packed with timeless content graphic designers will turn to again and again, including: * A wealth of samples and exercises in a fun, flippable format * Tools and techniques for creating dynamic layouts * Inspiring ideas for successful idea brainstorming and concepting * Tips and tricks for navigating the i

Rating: (out of reviews)

List Price: $ 24.99

Price: $ 14.24

Find More Creative Web Ideas Products

Back to basics: how to code an HTML5 template

The doctype

HTML2:

HTML3:

HTML4:

HTML5:

Other simplifications in HTML5

So what’s with these new tags?

The “section” tag

The “nav” tag

The article tag

The “aside” tag

The “hgroup” tag

The “header” tag

The “footer” tag

The “address” tag

HTML5 Template

The Basics Of Creating A Magento Module

Before We Begin

Disable the Cache

The app/code Directory

Core

Community

Local

Structuring Our Directory

Module Namespace

Module Name

Configuring Our Module

Activating Our Module

Sanity Check: Is The Module Enabled?

Defining An Event Observer

Configuring Our Model’s Directory

Creating An Observer Model

We’re done! Try it out.

Design Basics Index (Index Series)

Design Basics Index (Index Series)

Search