Devlounge

Design, Develop, and Grow

Speed Up Development Time With Smarty

By

This isn’t your average tutorial, actually it’s not really a tutorial at all. There’s a bigger point here that I’m trying to make: as a developer you have to be efficient. Frameworks definitely get you there: jQuery, Blueprint CSS, and Smarty are a couple of tools to increase your efficiency. You’ll make more money as a byproduct because you will be able to develop more (or better) sites in less time.

The barrier to entry is, of course, the learning curve. It takes a while to get used to any specific framework, but once you’re used to how your set of tools work you’ll notice a huge increase in productivity. One specific tool I’ve been using for a couple years is Smarty.

Smarty is a templating engine. It takes a template and applies it to some content. In effect it separates the code from the content and design. The benefits are that you don’t have to use a heavy content management system like Drupal or WordPress; it’s simple to implement; and you don’t have to copy HTML templates from page to page.

Here’s the deal. I’m not going to show you how to use this one (yet). Smarty has great documentation for that. I am going to give you some homework though. Try it. Go over to http://smarty.net, download the files, and follow the Quick Install tutorial. Next week I’ll give you some tips to make the system more useful and if you’re lucky I’ll through in some downloads to make it even quicker. Now get to work!

Getting Started With HTML5: Part 3

By

Most of HTML5 seems to be pretty self-explanatory. Unfortunately there are a few things that just aren’t. For example, the complex outlining algorithm, and the section element. It’s confusing as hell and everyone has a their own way. So we may as well dive in head first…

Here’s our working HTML one more time in case you missed it:

[html]




HTML 5 Demo


header

HTML 5 Demo

article

Terminology and Usage

section

  • The header element represents a group of introductory or navigational aids.
  • The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
  • An article element is “independent” in the sense that its contents could stand alone, for example in syndication.
  • The section element represents a generic document or application section…[it] is not a generic container element.
  • The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.
  • The footer element represents a footer for its nearest ancestor sectioning content.

footer

By Dustin Boston



[/html]

section

The section element is defined by the W3C as “a generic document or application section…[it] is not a generic container element.” I don’t think one could be any more vague and contradictory. The only saving grace is a couple examples they give, namely tabbed elements, and chapters.

In my opinion this doesn’t necessarily limit you to sticking a section element inside of an article element, or visa versa. It doesn’t have to stand alone, it just has to group elements logically (unlike a div). So while some examples put sections around sets of articles, others put them within, to denote separate portions of the same article.

Our example HTML would be better served to have another section element after the first. That would be a great place to make a snarky comment about the vague and abstract language that only the Consortium can understand.

aside

Fortunately the aside element isn’t nearly as confusing as the section element. Use it as a sidebar with meta information related to the content. Pretty straightforward. You could put quotes, navigation, resources, links etc. inside this little fella. Just keep it related. This isn’t the place for global navigation elements.

footer

The last element in the series is the footer. While typically the last item on a page, a footer could also be used in a section or article. A great example would be all that meta information at the end of a blog post, e.g. categories, dates, tags, etc.

Conclusion

It’s your turn. Mock up your next site in HTML5 and see what happens. It might break, it might not, who knows. The spec is still unstable, but it is starting to gain traction. But definitely try it out. If we all start using it maybe we can have a usable spec in less than 20 years!

Getting Started With HTML5: Part 2

By

Last week we took care of the head of our HTML5 document. If you haven’t checked it out, run over there real quick. It will only take you 5 minutes to get up to speed with a working proof of concept. Here’s the code again in case you forgot:

[html]



HTML 5 Demo


header

HTML 5 Demo

article

Terminology and Usage

section

  • The header element represents a group of introductory or navigational aids.
  • The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
  • An article element is “independent” in the sense that its contents could stand alone, for example in syndication.
  • The section element represents a generic document or application section…[it] is not a generic container element.
  • The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.
  • The footer element represents a footer for its nearest ancestor sectioning content.

footer

By Dustin Boston



[/html]

header

One of the first items developers put on the page is a header. Now we have a tag to represent that part of the page. This is the obvious place to put the title of your website, the navigation, and other header-type elements. You can also put a header in other parts of the page. It doesn’t have to go at the top but usually it will. The most common place will be in an article or section tag.

nav

The nav element is just like the header element, except it contains navigational elements, i.e. links to other pages or parts of a page.

article

This is from the HTML5 Draft Spec: An article element is “independent” in the sense that its contents could stand alone, for example in syndication. I think the best way to explain this is with a little example of content that would be good for an article:

  • Blog post
  • News article
  • Tutorials
  • Main page content

And here is an example of content that would NOT be good for an article:

  • Navigational elements
  • Main header content
  • Sidebars
  • Footer content

Get the difference? One is actual content that can be swiped as-is and does not require any context. The other elements do not necessarily add or detract from the article, but would require context to be understood in a different context.

Part 2 conclusion

One of the great things about HTML5 is that the new elements are simple, few, and needed. The header, nav, and article tags are perfect examples. Next week we’ll hit up a few other elements including the aside and footer tags.

Getting Started With HTML5: Part 1

By

It’s time to get to work on our HTML5 chops. We’ve had plenty of theory. Now let’s get to it.

Here is the code that we are going to work with. Take a minute to copy and paste it into a text editor and give it an html extension. Once you’ve done that, go ahead and give it a spin… Looks nice doesn’t it. That’s your proof of concept. It works. Now let’s go through it section by section.

[html]



HTML 5 Demo


header

HTML 5 Demo

article

Terminology and Usage

section

  • The header element represents a group of introductory or navigational aids.
  • The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
  • An article element is “independent” in the sense that its contents could stand alone, for example in syndication.
  • The section element represents a generic document or application section…[it] is not a generic container element.
  • The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.
  • The footer element represents a footer for its nearest ancestor sectioning content.

footer

By Dustin Boston



[/html]

DOCTYPE

The doctype is easy now. Just specify the technology that should be used to render the page. For now all you need to use is html. It’s still a pain in the ass to serve a page as xml so forget that.

Script

We don’t need a full script tag anymore either. The default type is Javascript, yay. So what is that big block of Javascript then? It’s for the IE’s go figure. Unfortunately IE won’t recognize those as CSS elements unless we do that. Stupid, I know, but relatively painless.

Style

Did you notice anything different about the style tag? Right. No type. Guess why. Right. The type defaults to CSS. Thank the W3C for making our jobs at least a little more efficient. That first line of CSS is important. You have to set the HTML5 elements to display:block or they will render as inline (at least for now). All that other stuff is just there for your benefit but it isn’t required, so we’ll skip it.

Part 1 Conclusion

The W3C has done a great job of simplifying syntax in HTML5. Apart from the various IE fixes it’s quicker to write than ever before. Now go, go and look at your HTML5 page and be in awe.

WordPress Snippet: Display Posts by Tag Frequency

By

Blogs just aren’t the same as they used to be. In the old days a blog was characterized by time and personality—chronology was important, and you read the blog because of the author, not the information he could give you.

Nowadays blogs are used more for short bursts of information about a single topic—typically a blogger’s expertise. The personality behind a site barely matters. “Content is king!” as you may recall.

So if chronology is no longer important, why post by date? I think part of the answer is that WordPress displays dates by default in most themes. Let me propose an alternative way of displaying content in WordPress. By tag frequency.

Making tags useful

Tags provide wonderful meta information about a post, but sadly this information is typically relegated to an ugly list in the sidebar. I say, if you’re going to go to the work of tagging all those posts, you had better use those tags for something useful!

By adding a couple snippets outside “The Loop” in WordPress you can display N number of posts by X tag. Here is an example to help make it a little more clear:

Imagine you have 20 posts tagged Home and Garden, 10 tagged Clearance, and 13 tagged Hardware. With a bit of PHP we can get WordPress to display posts from each tag in order of most popular to least popular. We can even take it a step further and limit the number of tags to display. The end result might look something like this:

HOME AND GARDEN
* Tag 1 Post 1 Title
* Tag 1 Post 2 Title
* Tag 1 Post 3 Title
* Tag 1 Post 4 Title

HARDWARE
* Tag 2 Post 1 Title
* Tag 2 Post 2 Title
* Tag 2 Post 3 Title
* Tag 2 Post 4 Title

CLEARANCE
* Tag 3 Post 1 Title
* Tag 3 Post 2 Title
* Tag 3 Post 3 Title
* Tag 3 Post 4 Title

Now that is a usable list of tags that makes the content readily available. A great side effect of displaying posts by tag frequency is that your site become much more dynamic. For example, maybe you go to a plumbing conference and blog 30 posts about it, all tagged Plumbing. The content on the site will automatically start displaying the posts tagged with Plumbing at the top of the list. I call it the “bubbling” homepage.

Enough rambling, here’s the code:

[php]

query(“tag={$tagRight->slug}&showposts=$noOfPosts”);
?>
have_posts() ) :?>

name ?>

have_posts() ) : $postsRight->the_post(); ?>

Next Page »

About Devlounge

Want to read more about Devlounge, or maybe you want to contact us, or even advertise? Oh, and don't forget to subscribe to updates!

The Best of Devlounge