Archive for September, 2009
Google Translate API
Wednesday, September 30th, 2009
It sends an HTTP request to Google Translate API Web server passing the text to be translated and the original and target languages pair.
The class decode the JSON response returned by the server and returns the translated text.
classes, rss
Classes | No Comments »
FileBrowser
Wednesday, September 30th, 2009
It can generate an HTML listing of files and directories in a given directory with links to execute several operations.
Currently it can view file contents, list ZIP archive contents, download files, delete files, create new files, create directories, browse in sub-directories or parent directories, etc..
classes, rss
Classes | No Comments »
php comment
Wednesday, September 30th, 2009
php comment script is a php no database required free download scripts that can be used as a comment script or quest book script, this script is simple and can be integrated in any website, no data base needed,. your website visitors can post comments easily without the need of registration, java validation post to prevent spam comments, also it has a captcha validation image, all comments written to text files, you can redirect your visitors to the comment page itself or just include the comment page within your php page. you can modify it to suit your website look and needs, admin can add unlimited number of pages, admin can approve or delete any comments from admin control panel, you can also set the time GMT+- from configuration time, also you can set if you want to approve comments before showing them to your visitors on the comment page or showing them immediately after posting (like forums). rss
Free PHP Scripts | No Comments »
How to Wireframe in Photoshop: New Plus Tutorial
Wednesday, September 30th, 2009
Just as you wouldn’t build a house without a blue-print, the same is true for web design. This in depth PLUS video tutorial will teach you about the advantages of properly using wire-framing when designing in Photoshop. Become a member!
Join Tuts Plus
For those unfamiliar, the family of TUTS sites runs a premium membership service called “TUTSPLUS”. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies at Nettuts+, Psdtuts+, Audiotuts+ and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!
- Subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.
learn, php, rss, tutorials
PHP Tutorials | No Comments »
The Only SEO Tools You’ll Ever Need
Wednesday, September 30th, 2009
Search Engine Optimization is a rather complex and never ending process. You have to analyze a lot of things including what keywords people are searching for, the density of those keywords in your sites, how many sites link back to you, how popular your links are and so on. Doing all this manually can be a huge pain.
With that in mind, regardless of whether you’re an SEO guru or a beginner, these twenty tools are guaranteed to make your life easier.
Keyword Research
When people – like us – build web sites, they assume they know what keywords people use to get to their sites. For the basic keywords this works but there a lot of untapped keywords that you might be unaware of. Doing the proper research to find out all possible keywords is imperative in this case. The keyword research tools below let you do all that in a jiffy.
Google Search Based Keyword Tool
Google’s tool provides keyword ideas and suggestions siphoned directly from Google’s search data. This is slightly different from the Adwords Keyword tool in that it suggests keywords not already associated with your Adwords account and provides a lot more information.
Just key in your site and normal keywords and let it provide you with a plethora of new ideas.
WordTracker
An excellent tool, with a paid counterpart, which lets you find out related keywords you might have missed out on so far. It also provides rough estimations of the search volume generated by the keywords.
SEOBook Keyword Suggestions
This tool cross references the keyword you input with multiple search engines to provide suggestions.
Microsoft’s Keyword Forecast
This tool predicts search volume and impressions for the keywords you enter into the system. Useful tool when you are about to launch a SEO campaign. Also provides a ton of target demographic data you’d want to take advantage of.
Trellian’s Keyword Discovery
Another popular keyword research tool with a paid version available for those who want additional features. Just type in your basic keywords and let it generate a list of top keywords which will work well for you.
Keyword Density
The number of times a keyword occurs in your page’s content is extremely important. Be too skimpy and your site won’t be counted for that keyword. Go overboard and you’ll be penalized for keyword stuffing. The optimum numbers seems to be between 2 to 4 percent and these tools will let you make sure you make this number.
SEOBook Keyword Density Analyzer
Just enter your URL and let the tool do its thing. It shows you which keywords are present most in your content, how many times it occurs and how much place it takes up relative to the other words on the page.
iWebTool Keyword Density Checker
Another tool which looks through your page and creates a tag cloud. If you prefer raw data, it also shows you how many times each keyword occurs on your page.
Webconfs Keyword Cloud
Webconfs’ tool produces a keyword cloud for easy perusal. Just like with other tools it also produces a listing of which keyword occurs the most and its density.
Search Engine Rank Checkers
Link Vendor’s Page Rank Checker
This Page Rank checker lets you find out your Page Rank at individual Google data centers.
PageRank Tool
This tools lets you find out your page rank quickly with minimal fuss.
Self SEO Rank Checker
You can find out your PageRank and Alexa rating along with a bunch of other useful info using this tool.
Link Popularity
A major part of SEO is getting linked. The number of backlinks you are getting is a fair approximation of how well your site is doing and makes tracking this statistic an important affair. Using these tools, you can find out who links to you, which pages are linked the most and a lot of other data.
WebMaster Toolkit Link Popularity Checker
Just enter the URL in question and it’ll show you how many pages popular search engines link to through their search engine result pages.
SEOCentro Link Popularity Check Tool
Lets you know how many incoming links you have and breaks it down to individual search engines. Also provides an interesting table of sites with differing numbers of incoming links for reference.
LinkVendor’s Link Popularity Tool
An excellent tool which provides a plethora of information including how many web sites link to you, how many individual linkbacks you get, your PageRank, your Alexa rank and so much more.
Site Analytics
Monitoring your site’s traffic, page views and visitor behavior is extremely important once you’ve finished the initial SEO to make sure your plan is sound. Use these tools to track down your site’s statistics.
Google Analytics
Google Analytics provides an extremely slick summary of your data. Use it to check which pages get linked to the most, how much time people spend on your site, what percentage of visitors are new and a lot more.
Compete
Just like Google Analytics, this tool presents an extremely pleasing way to monitor your site’s well being. As a fun feature, it lets you compare the stats of up to 5 different sites.
Mint
If you don’t mind a paid solution, Mint is a top-notch analytics suite which a lot of developers swear by. It features a beautiful interface to present all the data.
Crawl tests
Understanding how your pages look to spiders (heh) is important while optimizing for them. This lets us strip out all the visual elements and see the page as a crawler would see. Such a test helps you understand how accessible a page is to a crawler and lets you weed out potential issues before full deployment. These 3 tools let you do just that.
SEOTools Spider Test
This tool not only lets you see how your page looks to spiders but also returns a lot of useful information including the number of words in the page, the keyword density and pages you link to.
iWebTool Spider View
If you are just looking to find a tool to simulate a spider without any extra frills, this is the tool for you. Crawls through your site and lets you see how it looks to a bot.
WebConfs’ Spider Simulator
WebConfs’ Spider Simulator simulates a spider crawling through your site. Shows you how a page looks to a spider and also nets you the list of sites you link to, the meta description and meta keyword.
Conclusion
I hope this list made it easier for you optimize your web applications for search engines. With the internet being a big place, I am sure I’ve missed a ton of equally useful SEO tools. Let us know about these hidden gems in the comments. Thanks for reading!
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.
learn, php, rss, tutorials
PHP Tutorials | No Comments »
Simple Profiler
Tuesday, September 29th, 2009
It can start and stop a timer several times in different place of a script.
The class stores the time it took between the timer start and stop moments and associate a description to each timed period.
Then it can display the different timed intervals in an HTML table.
classes, rss
Classes | No Comments »
MySQL Database Layer With Dynamic SQL Generators
Tuesday, September 29th, 2009
It can connect to a given MySQL database and execute SELECT, INSERT, UPDATE and DELETE queries from lists of parameters that define tables, fields, field values and condition clauses.
classes, rss
Classes | No Comments »
[Free] Microsoft Security Essentials: Free Antivirus
Tuesday, September 29th, 2009
The Microsoft Security Essentials, a free antivirus software from Microsoft, has just been released, and has been added to the Free Antivirus Software and Free Online Virus Scans. The software is reported to be lightweight and unobtrusive by many testers.
Note: even if you don't like this program, there are numerous other free antivirus programs listed on that page, including free versions from commercial antivirus vendors, so there's no reason for you not to have some sort of antivirus program protecting your system.
rss
Uncategorized | No Comments »
Object-Oriented CSS: What, How, and Why
Tuesday, September 29th, 2009
It sounds like an oxymoron, or at least an impossibility, doesn’t it? How can a static language that’s really more like markup than programming be object-oriented? In this tutorial, I’m going to introduce you to the idea of object-oriented CSS, show you how it works, and try to convince you that you should be using it too!
What is Object-Oriented CSS?
Object-oriented CSS, at its core, is simply writing cleaner, DRYer CSS. It’s not a different language: still the same old CSS we all know and love. It’s just a paradigm shift. Really, object-oriented CSS is a few simple patterns and best practices.
So why call it object-oriented? Well, according to Wikipedia,
Object-oriented programming (OOP) is a programming paradigm that uses “objects” — data structures consisting of datafields and methods — and their interactions to design applications and computer programs.
If we were to re-write that definition for object-oriented CSS, it might say something like this:
Object-oriented CSS is a coding paradigm that styles “objects” or “modules”—nestable chunks of HTML that define a section of a webpage—with robust, reusable styles.
This basically means that you have a standard “object” (an HTML structure). Then, you have CSS classes that you apply to objects, which define the design and flow of the object.
Confused? Let’s look a bit of theory.
What is the Theory Behind it?
There are two main principles [in object-oriented CSS]: the first is to separate the structure from the skin and the second is to separate the container from the content.
I quote Nicole Sullivan, whose brainchild object-oriented CSS is. So how do these two principles play themselves out?
Separating the structure from the skin means that your layout styling and your design styling are separate. One very practical way to do this is to use a grid system; there are many options, or you can create your own. If you’re not using a grid system, you’ll probably just define the structure on the primary object on your page; that’s what we’ll be doing today.
Separating the container from the content means that any object (the container) should be able to adapt itself to accept any content; for example, it shouldn’t need to have an h3 at the top, followed by an unordered list for it to look right. This allows flexibility and reusability, which is paramount.
Why Should I Code This Way?
There are a few good reasons why you would want to write your CSS in an object-oriented way. One of the biggest benefits—and we’ve already mentioned it—is that your CSS will be more reusable. But your stylesheets should also become much smaller. Object-oriented CSS should make it easier to change the design of a site.
Writing your styling this way can also give you peace of mind: it will be much easier to change parts of your site without breaking things. Object-oriented CSS also enables you to change your site consistently.
How do I Practice Object-Oriented CSS?
Well, if you’ve come this far, you’re interested in how exactly you write CSS with an object-oriented mindset. Here we go!
The first step is really prep for the CSS: you have to determine your HTML object. Generally, your object will have a header, a body, and a footer, although the header and footer are optional. Here’s a very basic object.
<div class="object">
<div class="head"></div>
<div class="body"></div>
<div class="foot"></div>
</div>
Before you scream “DIVITIS!” realize that this isn’t as bad as it looks; consider this:
<article>
<header></header>
<section></section>
<footer></footer>
</article>
Using HTML5, we now have got an object with semantic meaning and no soup-like characteristics. Actually, this is the object we’ll use today.
If we’re going to write some CSS, we’ll need something to style, so let’s whip up a very basic template: a blog home page, and a single post page. We’ll be using a few HTML5 elements and some CSS3 styling today!
index.htm
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Object Oriented CSS</title>
<!--[if IE]><script src="http://nettuts.s3.amazonaws.com/450_ooCss/http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!-- This makes IE recognize and use the HTML5 elements -->
<link type="text/css" rel="stylesheet" href="css/reset.css" />
<link type="text/css" rel="stylesheet" href="css/text.css" />
<link type="text/css" rel="stylesheet" href="css/styles.css" />
</head>
<body>
<article id="container">
<header>
<h1>Object Oriented CSS</h1>
<h2 class="subtitle">(really just a bunch of best practices and patterns; not a new language)</h2>
<nav>
<ul>
<li><a href="index.htm" class="selected">Home</a></li>
<li><a href="=post.htm">Archives</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<section>
<article class="post">
<header>
<span class="date">September 10, 2009</span>
<h2><a href="post.htm">Check out WorkAwesome!</a></h2>
</header>
<section>
<img src="http://nettuts.s3.amazonaws.com/450_ooCss/img/wa.jpg" alt="Work Awesome" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
</section>
<footer>
<ul>
<li><a href="#">Read More . . .</a></li>
<li><a href="#">Retweet!</a></li>
<li><a href="#">Comments (4)</a></li>
</ul>
</footer>
</article>
<article class="post ext">
<header>
<span class="date">September 7, 2009</span>
<h2>The Intro Post</h2>
</header>
<section>
<img src="http://nettuts.s3.amazonaws.com/450_ooCss/img/wa.jpg" alt="Work Awesome" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
</section>
<footer>
<ul>
<li><a href="#">Read More . . .</a></li>
<li><a href="#">Retweet!</a></li>
<li><a href="#">Comments (4)</a></li>
</ul>
</footer>
</article>
<article class="post">
<header>
<span class="date">September 5, 2009</span>
<h2>Welcome</h2>
</header>
<section>
<img src="http://nettuts.s3.amazonaws.com/450_ooCss/img/wa.jpg" alt="Work Awesome" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
</section>
<footer>
<ul>
<li><a href="#">Read More . . .</a></li>
<li><a href="#">Retweet!</a></li>
<li><a href="#">Comments (4)</a></li>
</ul>
</footer>
</article>
</section>
<aside>
<article class="side-box">
<header>
<h3>Archives</h3>
<p>look into the past</p>
</header>
<section>
<ul>
<li><a href="#">August 2009</a></li>
<li><a href="#">July 2009</a></li>
<li><a href="#">June 2009</a></li>
<li><a href="#">May 2009</a></li>
<li><a href="#"> . . . </a></li>
</ul>
</section>
</article>
<article class="pop-out side-box">
<header class="post-it">
<h3>Recent Comments</h3>
<p>see what folks are saying</p>
</header>
<section>
<ul>
<li>
<p>I think oocss is really cool!</p>
<p class="meta">By J. Garret on Sept 12, about "The Intro Post"</p>
</li>
<li>
<p>Are you kidding? CSS can't ever be Object Oriented.</p>
<p class="meta">By Joe Thomas on Sept 11, about "The Intro Post"</p>
</li>
<li>
<p>Envato has done it again; workAwesome is simply awesome!</p>
<p class="meta">By GV on Sept 10, about "Check out WorkAwesome"</p>
</li>
<li>
<p>I really like the site's desing; another work of art from Collis.</p>
<p class="meta">By Anonymous on Sept 10, about "Check out WorkAwesome"</p>
</li>
</ul>
</section>
</article>
</aside>
<footer>
<ul>
<li>Standard</li>
<li>Footer</li>
<li>Information</li>
<li>Yada</li>
<li>Yada</li>
<li>© 2009</li>
</ul>
</footer>
</article>
</body>
</html>
I know it’s kind of long, so here’s a diagram of our basic structure:
Look familiar? That’s our object, with an aside added for our sidebar. We’ll look at the single post page a bit later, but let’s hop into some CSS right now!
You’ll notice that we are linking to three stylesheets: reset.css, text.css, and styles.css. Reset.css is Eric Meyer’s reset. Text.css is important: the second step of object-oriented CSS is styling a few key basic elements; usually, these are text elements, like headers and lists. Styling these objects is important because it determines the consistent look and feel of the site; these elements, for the most part, won’t receive any additional direct styling.
Here’s what we’ve got in our text.css:
body { font: 13px/1.6 Helvetica, Arial, FreeSans, sans-serif;}
h1, h2, h3, h4, h5, h6 { color:#333; }
h1 { font-size: 50px; text-shadow:1px 1px 0 #fff; font-family:arial black, arial}
h2 { font-size: 23px; }
h3 { font-size: 21px; }
h4 { font-size: 19px; }
h5 { font-size: 17px; }
h6 { font-size: 15px; }
p, h1, h2, h3, h4, h5, h6, ul { margin-bottom: 20px; }
article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; }
(Hats off to the 960 Grid System, whose text.css file this is spun off.)
Now we’ll start building styles.css; this is where the object-oriented magic begins. However, I’ll first just throw in a few top-level styles, just to set a body background and some link and list styles.
body
{ background:url(../img/grad.jpg) repeat-x #c0c0c0;
}
/*Note: All the image will be in the downloadable source code. */
a
{ text-decoration:none;
color:#474747;
padding:1px;
}
a:hover
{ background:#db5500;
color:#fff;
}
.selected
{ border-bottom:1px solid #db5500;
}
li
{ padding-left:15px;
background:url(../img/bullet.png) 0 5.9px no-repeat;
}
Our first order of business is to define the structure of the page:
#container
{ margin:40px auto;
width:960px;
border:1px solid #ccc;
background:#ececec;
}
#container > header, #container > footer
{ padding:80px 80px 80px;
width:800px;
overflow:hidden;
border: 1px solid #ccc;
border-width:1px 0 1px 0;
}
#container > header
{ background:url(../img/header.jpg) repeat-x #d9d9d7;
}
#container > header li, #container > footer li
{ float:left;
padding:0 5px 0 0;
background:none;
}
#container > section
{ background:#fdfdfd;
padding:0 40px 40px 80px;
float:left;
width:493px;
border-right:1px solid #ccc;
}
#container > aside
{ padding-top:20px;
float:left;
width:346px;
}
#container > footer
{ padding:40px 80px 80px;
background:#fcfcfc;
}
#container > footer li:after
{ content:" |"
}
#container > footer li:last-child:after
{ content:""
}
Notice that we’re styling our container object by starting all our selectors with #container. However, that’s a special case: usually, you will want to use classes, because they are freely reusable.
We can use class selectors for our post styling:
.post
{ overflow:visible;
margin-top:40px;
}
.post > header
{ margin:0 0 20px 0;
position:relative;
}
.post .date
{ padding:2px 4px ;
background:#474747;
color:#ececec;
font-weight:bold;
transform:rotate(270deg);
-moz-transform:rotate(270deg);
-webkit-transform:rotate(270deg);
position:absolute;
top:60px;
left:-105.5px;
}
.post img
{ float:left;
margin-right:10px;
}
.post.ext img
{ float:right;
margin:0 0 0 10px;
}
.post footer
{ overflow:hidden;
}
.post footer li
{ float:left;
background:none;
}
Let’s look at what makes this CSS object-oriented. Firstly, we have not limited the class to a specific element; we could add it to anything. This gives us the most flexibility possible. Then, notice that we haven’t set any heights or widths; that is part of separating the structure from the skin; we already wrote the sturcture styling, so this object will fill whatever space the structure gives it.
Also, we have styled all the elements involved in an independant way: the parent elements don’t require certain children to look right; although we have styled child elements, nothing will break if they aren’t there. And the child elements are, for the most part, not dependant on their parents; I haven’t styled the h2 in a post object, because it should be consistent across the site; we already took care of that in text.css.
There’s another important bit, the part most like object-oriented programming: extended classes. You probably saw that we have styling for both .post img and .post.ext img. I’m sure you know what they will do, but here’s the proof:
Simply by adding another class to your object, you can change minor parts of the look and feel; I should mention that Nicole Sullivan would have created a class called .postExt, and then applied both to the object; I prefer to do it this way, because it allows me to use the same class name (”ext”) for all my extensions, and I think it makes the HTML look cleaner. You just have to remember not to put a space in the selector; “.post .ext” will look for an element in class ext inside an element in class post. Without the space, it will look for an element in both classes.
On to the Sidebar
Now that we have the main content area set out, let’s look at the sidebar. We’ve got two objects in the sidebar: an archives list and a recent comments list. To begin, we’ll create a .side-box class for them:
.side-box
{ padding: 20px 80px 20px 40px;
}
.side-box:not(:last-child)
{ border-bottom:1px solid #ccc;
}
.side-box > header h3
{ margin-bottom:0;
}
.side-box > header p
{ text-transform:uppercase;
font-style:italic;
font-size:90%;
}
Again, you should take note that we’re being careful to follow the two rules: we’ve separated the structure from the skin by not setting the height or width; the object flows to fill whatever space it needs to take. And we’ve separated container from content by not making child elements required for proper styling. Yes, I have adjusted the h3 styling, which makes that particular h3 look dependant on the class side-box; in most cases, that’s undesireable, but in this case, I haven’t done too much.
But let’s create an extension for this; however, since we want to do a large visual adjustment, we won’t extent the side-box class directly; we’ll create a new class.
.pop-out > section > *
{ display:block;
background:#fefefe;
border:1px solid #474747;
padding:20px;
position:relative;
width: 120%;
left:20px;
}
So what does this do? Notice the selector: we are targeting every element directly inside the body of our object; when styling an object, you always apply the class to the object itself. This CSS will “pop” the content out to the right.
“HEY, you set a width! What about separating struture from skin?” I set a width because we are targeting the elements inside the body of our object; since the object has padding, that inner element is a bit narrow by itself. That sounds like an excuse for breaking the rule, but I don’t think I really broke the rule: I set the width as a percentage, which still depends on structure styling further up the cascade.
Here’s what that looks like.
I just told you that you should always apply classes to the top-level objects, and use child selectors to mold the inner elements. But part of object-oriented CSS is being able to mix and match styles easily. It’s quite possible you’ll want to use a similar header on two objects that aren’t really related in any way. It’s ideal to have a collection of header and footer classes that you apply directly to the header or footer of an object. This way, you aren’t adding similar code to multiple non-related classes, but abstracting that away and applying it in the relevent place. Let’s create an abstracted header.
You’ll notice that we gave the header of our recent comments object a class called ‘post-it.’ Let’s create that class now.
.post-it
{ border:1px solid #db5500;
padding: 10px;
font-style:italic;
position:relative;
background:#f2965c;
color:#333;
transform:rotate(356deg);
-moz-transform:rotate(356deg);
-webkit-transform:rotate(356deg);
z-index:10;
top:10px;
box-shadow:1px 1px 0px #333;
-moz-box-shadow:1px 1px 0px #333;
-webkit-box-shadow:1px 1px 0px #333;
}
A poor semblance of a post-it note!
It’s important to stress that even though we plan to use this for a header, we haven’t specified that in the selector. If this resembles a common design aspect of our site, we may end up wanting this style for something else; for example, we could extend it with classes that adjust the colour and rotation, and use them on a wall or bulliten board or something similar.
Don’t lock down your selectors; you never know when you’ll want those styles!
Often you’ll want to take it further than just header and footer classes; a component library is a huge part of object-oriented CSS; a basic rule might be this: whenever you want to apply the same style in multiple un-related places, abstract. Of course, you might find after hard coding something into an object that it would be more useful if you could use it elsewhere; don’t be afraid to refactor. It’s always to your benefit.
You’ll see these components in the page header and the recent comments box.
.meta
{ font-size:75%;
font-style:italic;
}
.subtitle
{ text-transform:uppercase;
font-size:90%;
font-weight:bold;
letter-spacing:1px;
text-shadow:1px 1px 0 #fff;
}
Well, we’re done with our index page; let’s look at a bit more object-oriented-ness on a single post page. Just copy that index page, rename it ‘post.htm’ and swap out the page header and section for this code.
<header>
<h1>Object Oriented CSS</h1>
<p class="subtitle">(really just a bunch of best practices and patterns; not a new language)</p>
<nav>
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="#" class="selected">Archives</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<section>
<article class="post">
<header>
<span class="date">September 10, 2009</span>
<h2>Check out WorkAwesome!</h2>
</header>
<section>
<img src="http://nettuts.s3.amazonaws.com/450_ooCss/img/wa.jpg" alt="Work Awesome" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
</section>
<footer>
<ul>
<li><a href="#">Digg!</a></li>
<li><a href="#">Share!</a></li>
<li><a href="#">Like!</a></li>
</ul>
</footer>
</article>
<article class="comments">
<header><h2>Comments</h2></header>
<section>
<article class="comment">
<header><p>First-commenter</p><p class="meta">Sept 10</p></header>
<section><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,</p></section>
</article>
<article class="reply comment">
<header><p>Reply-commenter</p><p class="meta">Sept 12</p></header>
<section><p>diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar</p></section>
</article>
<article class="comment">
<header><p>Second-commenter</p><p class="meta">Sept 10</p></header>
<section><p>tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus </p></section>
</article>
<article class="author comment">
<header><p>The author</p><p class="meta">Sept 11</p></header>
<section><p>diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar</p></section>
</article>
<article class="comment">
<header><p>Fourth-commenter</p><p class="meta">Sept 12</p></header>
<section><p>imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi</p></section>
</article>
</section>
Now we can see where some reusability comes in; we can use the post class for the blog posting here; that’s the same post class we used for the home page; because we didn’t specify the structure, but let the object expand to take in whatever we give it, it can handle the whole post.
\
Comments
Now let’s turn our attention to the comments on this page; comments are a great place to use object-oriented CSS. We’ll start by adding this:
.comment
{ border:1px solid #ccc;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
padding:10px;
margin:0 0 10px 0;
}
.comment > header > p
{ font-weight:bold;
display:inline;
margin:0 10px 20px 0;
}
This alone gives us some psuedo-attractive comments; but we can do more. Our HTML has classes for replies and author comments.
.reply.comment
{ margin-left:80px;
}
.author.comment
{ color:#ececec;
background:#474747;
}
Make sure you don’t have a space between the two class names. This is a bit different from what we did earlier: instead of changing the styling of the comment class, we are actually extending it (So maybe these are the real extended classes).
And the finished comments . . .
And while we’re here, let’s add a comment form to our component library.
.comments-form p
{ padding:5px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.comments-form p:hover
{ background:#ececec;
}
.comments-form label
{ display:inline-block;
width:70px;
vertical-align:top; }
.comments-form label:after
{ content: " : ";
}
.comments-form input[type=text],
.comments-form button,
.comments-form textarea
{ width:200px;
border:1px solid #ccc;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:2px;
}
.comments-form button[type=submit]
{ margin-left:70px;
}
This gives us a nice rounded-corner form with a soft hover effect.
I’m kind of torn here; a fundamental concept of object-oriented CSS is the ability to add a class to different elements; but what about this case? This class would basically be useless on anything but a form; should we change the selectors to form.comments-form as a kind of security? What do you think?
Well, that really covers the ideas of object-oriented CSS.
Review the Main Steps
- Determine your object.
- Set your reset, base elements, and base object styles.
- Apply classes to objects and components for the desired look and feel.
I didn’t use the standard message example, but it’s really a great way to get into object-oriented CSS. Try creating an message class that you can apply to different elements, like a paragraph, a list item, or a complete object. Then, extend it with error, warning, and info classes. See how flexible and reuseable you can make it.
Is Object-Oriented CSS Always Useful?
I don’t think the answer to this question is a simple “yes” or “no”; that’s probably because object-oriented CSS isn’t a language, but a collection of patterns and best practices. You may not always want to apply the idea of the standard HTML object, but most of the CSS principles are always valid. If you think about it, you’ll see it’s really about where you want to optimize: you could code you’re HTML minimalistically, with a few ids for handles, and be able to style it easily; but the CSS won’t be reusable, and the site might break later when you come to change things. Or you could write a bit more HTML and optimze the CSS with the principles we’ve looked at in this tutorial.
I’m willing to expand my HTML a bit so that I can write CSS that is reusable, flexible, and DRY. What’s your opinion?
Other Resources
- Nicole Sullivan’s Blog Post on OOCSS
- Sullivan’s OOCSS framework on Github
- And her presentation on OOCSS
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.
learn, php, rss, tutorials
PHP Tutorials | No Comments »
Geek’s RSS
Monday, September 28th, 2009
It can parse an RSS feed either passed as a string or retrieved from a remote server.
The class can return the information about the RSS feed channel and items.
SimpleXML must be installed on the server.