bavotasan.com » web

Using CSS Resets

c.bavota — Tue, 12 Oct 2010 16:26:49 +0000

Before you start building a new site, one important decision you need to make is whether or not you want certain elements of your design to rely on the default settings of your user’s browser. The problem with this is that not all browsers use the same default settings. A perfect example is with the header tags. The default font size for the h1 tag in IE is 24px, while most other browsers set it at 32px. The margins can range anywhere from about 14px to 20px. That’s a big difference that can throw your design off quite a bit.

The way to get around this is to use a CSS reset. A CSS reset does exactly what it states, it resets your CSS so that you can then style your elements exactly how you want, without having to worry about any default settings screwing things up.

If you do a quick Google search for CSS reset, the first result will be Eric Meyer’s Reset CSS Tool. This is the one that I like to use. All you need to do is add this to the top of your style sheet.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

The one thing you need to remember when using a CSS reset, is that it resets everything. So now your paragraph tags won’t have any margins, nor will your unordered lists and so on. That means you need to start setting some styles for these elements.

Here is what I like to add immediately after the reset to get things started.

h1, h2, h3, h4, h5, h6, p { margin: 12px 0; }
ul, ol { padding: 0 0 0 20px; list-style: disc; }
ol { list-style: decimal; }
h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 16px; }

That sets up most of the common tags that I use. Some things might look strange as you start to put together your site, so just remember that now you need to set all the default CSS for any element you use.

Another popular reset is YUI Reset CSS by Yahoo. It does things a little bit differently. Take a look at the YUI homepage to see some examples of how it is used and you may decide that this reset is the right one for you.

The reset I have seen used the most on other people’s sites is the Global Reset. I don’t like to use it because it pretty much just resets the margin and padding for every element but that might be all you really want.

* { margin: 0; padding: 0; }

Whichever reset you choose is totally up to you, but you should consider including a reset as your starting point when creating the stylesheet for your site to guarantee your design looks the way you intended it to across all browsers.

Developing Themes for WordPress: Part 1

c.bavota — Mon, 30 Aug 2010 21:19:36 +0000

Over the weekend, I gave a presentation on developing WordPress themes for fun and profit. It went really well and I thought it would be a good idea to go into a bit more detail on everything I mentioned so that people can have a point of reference. I began my presentation with the new guidelines that are still being set up on WordPress.org and that is what the first part of this series will focus on.

WordPress 3.0 Changes Everything

With the release of WP 3.0, the “official” theme reviewer(s) on WordPress.org thought it would be a good idea to improve the current requirements and come up with a strict guideline to let theme developers know exactly what is expected of their themes. This would make the job of reviewing themes for WordPress.org much easier, but it would also set a standard for all the themes within the WP Themes Directory, and hopefully, all WP themes in general.

As a developer, the more documentation you can get about the software you are developing for, the easier your job is. And now WordPress has three pages in the codex dedicated to theme development that all developers need to read and understand.

The Theme Unit Test

The theme unit test is an xml file that a developer should use in their testing environment. If you do not have a test install of WordPress to test your themes, that is the first step you should take. Once you have you test install up and running, download the theme unit test xml file and upload it into your WP install by going to the Tools panel in your wp-admin and clicking on the Import link. Import the xml file and all of the images associated with it. Now you have a test blog full of content that will help you make sure that your theme works with the many different features of WordPress.

The codex page lists all the different types of content that is uploaded by the xml file, and how is should be displayed by your theme. If things don’t look right on your theme, then you need to make sure to follow the guidelines and include the proper functions and/or CSS to get it looking the way it should.

Codex page: http://codex.wordpress.org/Theme_Unit_Test

Theme Development Guidelines

The title of this codex page pretty much says it all. These are the guidelines for developing a WordPress theme. There are many things that need to be in place in order for your theme to work with WP. If your theme does not conform to these requirements, it will not work with WordPress. That’s why this part of the codex is the most important piece of documentation for any theme developer.

Reading through the guidelines will put you on the right track in regards to how your theme should be structured, what functions are a must, and what files need to be included in order for it to work properly. The page is quite long, but once you get trough it and start to piece together your theme, you’ll realize that it isn’t as hard as it seems. And remember, all well-built WordPress themes follow these guidelines, so just take a look behind the scenes of one of your favorite themes to see how the code has been implemented if you feel you’re stuck.

Codex page: http://codex.wordpress.org/Theme_Development

Theme Review Process

This page describes exactly how your theme will be scrutinized if you submit it to the WordPress.org Theme Directory. Knowing exactly what the theme reviewers look at and using that information to personally judge your own theme will help guarantee that you have developed a theme that is up to snuff. It also lets you know some of the dos and don’ts that you should be aware of that were not discussed on the other two codex pages.

Codex page: http://codex.wordpress.org/Theme_Review

Part 2: What goes where?

Next I will discuss what basic templates files are necessary for your theme and what code is required in order to get everything working properly.

Part 1: Guidelines for Developing a WordPress Theme
Part 2: Basic Template Files
Part 3: Understand The WordPress Loop
Part 4: Adding Theme Options
Part 5: Making Money

Moderno v1.0 Premium WordPress Theme

c.bavota — Mon, 02 Aug 2010 20:00:57 +0000

Just updated for WordPress 3.0.

Moderno has a beautifully simple, yet exquisite design with many subtle nuances that make it stand out from the crowd. An optional two or three column layout with an infinite number of color and font possibilities make it easy to create a truly original look for your Web site. Go crazy placing your favorite widgets in up to three widgetized locations. Select a standardized Web font or get a little more creative with one of ten pre-installed @font-face kits.

Go to Themes by bavotasan.com for more info.

The New Google Font API

c.bavota — Mon, 24 May 2010 15:55:04 +0000

Using the standard Web safe fonts is quickly becoming a thing of the past thanks to modern alternatives like @font-face kits and the new Google Font API. Taking a quick look through the Getting Started guide shows just how simple it is to apply the API to your Web site. All you have to do is add a link between your site’s head tags to the CSS file hosted on Google, and then you can call the chosen font throughout your stylesheet.

Here is an example of the link:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

Then you can use the font like this:

>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
>

Check out a list of available font in the font directory. They are all licensed for commercial and non-commercial use.

A Better Twitter Feed for Your Web Site

c.bavota — Mon, 23 Nov 2009 17:32:05 +0000

I have already posted a tutorial on How to Create a Twitter Feed on Your Web Site and I have been having a lot of emails in regards to people whose hosts do not allow URL file-access. Here is an alternative script that fetches and parses your Twitter RSS feed using a different function. Hopefully it will help out those who can’t use the other script.

The first thing you need to do is get your Twitter RSS feed URL. go to your Profile page and you will see a link in the bottom of your sidebar that says RSS feed. Click on this and then copy the URL. That will be your feed URL.



$feedURL = "http://twitter.com/statuses/user_timeline/68559295.rss"; // change to your feed URL
$doc = new DOMDocument();
$doc->load($feedURL);
$arrFeeds = array();
foreach ($doc->getElementsByTagName('item') as $node) {
    $itemRSS = array ( 
        'title' => $node->getElementsByTagName('title')->item(0)->nodeValue
        );
    array_push($arrFeeds, $itemRSS);
}
$limit = 5;
for($x=0;$x<$limit;$x++) {
    $title = str_replace('bavotasan: ', '', $arrFeeds[$x]['title']);
    $str = ereg_replace("[[:alpha:]]+://[^<>[:space:]]+[[:alnum:]/]","\"\\0\">\\0", $title); 
    $pattern = '/[#|@][^\s]*/';
    preg_match_all($pattern, $str, $matches);	
 
    foreach($matches[0] as $keyword) {
        $keyword = str_replace(")","",$keyword);
        $link = str_replace("#","%23",$keyword);
        $link = str_replace("@","",$keyword);
        if(strstr($keyword,"@")) {
            $search = "\"http://twitter.com/$link\">$keyword";
        } else {
            $link = urlencode($link);
            $search = "\"http://twitter.com/#search?q=$link\" class=\"grey\">$keyword";
        }
        $str = str_replace($keyword, $search, $str);
    }
    echo ''.$str.'
';
}
?>

Twitter Bird icon provided by Loon Design.

10 Great Free Mac Apps for Web Developers

c.bavota — Fri, 13 Nov 2009 21:06:15 +0000

I have been a Mac man for almost ten years now, and though many Web developers swear to working on a PC, I find my Mac has everything I need to develop, design and program Web sites. Luckily there are tons of great free apps available to help any developer work more efficiently on their Mac.

Here is a list of 10 great free Mac apps for Web developers that I use:

TextWrangler

TextWrangler is the powerful general purpose text editor with some great features. Whether you are working with HTML, CSS, PHP or any other Web programming language, TextWrangler has everything you need to easily edit your code.
http://www.barebones.com/products/textwrangler/index.html

MAMP

MAMP installs Apache, Mysql and PHP on your Mac to create a fully functioning Web environment which will allow you to test all aspects of your Web site locally. It’s smart to have an environment to test and work with offline before making your changed on your live site.
http://www.mamp.info/en/mamp/index.html

Paparazzi!

Paparazzi! is a small utility for Mac OS X that takes screen shots of Web pages. This is helpful for creating your portfolio or sending screen shots to clients.
http://derailer.org/paparazzi/

YemuZip

YemuZip is an easy-to-use application for making zip files. Just drag, drop, name your zip file and you’re done. The native Mac file compressor utility adds Mac-specific info to zip files that, when extracted on a PC, looks like garbage.
http://www.yellowmug.com/yemuzip/

VirtualBox

VirtualBox is a general-purpose full virtualizer for x86 hardware that allows Mac user to load Windows software on their desktop. Creating an IE testing environment on your Mac is pretty simple using VirtualBox.
http://www.virtualbox.org/

Skype

Everyone probably already uses this, and if you don’t, you should. Skype is great to communicate with clients from around the globe. Skype to Skype is free for instant messaging and calls.
http://www.skype.com/

GIMP

GIMP is an open source versatile graphics manipulation package similar to Adobe’s Photoshop, but it won’t put you in the poor house. It may not be as robust but GIMP has some amazing features and who can beat the price.
http://www.gimp.org/

Cyberduck

Cyberduck is an open source FTP, SFTP, WebDAV, Cloud Files and Amazon S3 browser for the Mac. It features an easy to use interface with quickly accessible bookmarks.
http://cyberduck.ch/

SvnX

SvnX is an open source GUI for most features of the svn client binary. It allows you to browse your working copies, spot changes and operate on them but also to browse logs and revisions of your repositories.
http://www.lachoseinteractive.net/en/community/subversion/svnx/features/

Sequel Pro

Sequel Pro is a fast, easy-to-use Mac database management application for working with MySQL databases.
http://www.sequelpro.com/

Digging Into WordPress Book Now Available

c.bavota — Fri, 13 Nov 2009 19:24:26 +0000

Anyone who visits my site can see that I am a huge fan of WordPress. I do my best to contribute back to the WP community and support others who are doing the same. I just got my hands on a copy of Chris Coyier and Jeff Starr’s Digging Into WordPress book and I find it an amazing resource for anyone interested in starting a Web site using WordPress.

The book is currently available as a digital download (PDF) for $27 USD. Use the coupon code DIWEARLY in the cart to save $5. That coupon is only valid until the 21st of November.

Purchasing the book now will give you a lifetime subscription to all future updates. If you want to check out a sample, the Table of Contents and part of Chapter Three is available through this link.

Check out the official site for more information.

31 Open Source Web Development Scripts

c.bavota — Wed, 14 Oct 2009 15:24:59 +0000

When it comes to Web development, there is a wealth of free information online to help you create a top-notch Web site. A lot of hard work goes in to maintaining these resources, all to help save you time and money. The Open Source community is growing stronger everyday and the scripts are getting more useful and efficient, making it almost impossible to not use a few of them in your project. Here is a list of 31 open source Web development scripts I have either used or read about that would easily help any developer with their next project.

Ad Servers

Open X Ad Server

OpenX is the world’s leading independent ad server. It provides you with the simple tools you need to make money from advertising, whether from direct ad sales, OpenX Market, or third party ad networks (like AdSense).
http://www.openx.org/ad-server

Revsense

RevSense Ad Server makes it easy for you to sell ads on your site. Set the prices you want, and the kinds of ads to sell, then RevSense does the rest. It manages the sign up, ad entry and upload process and collects advertising revenue into your Paypal or Authorize.net account.
http://www.revsense.com/

Blogging Software

WordPress

WordPress is a state-of-the-art publishing platform with a focus on aesthetics, web standards, and usability. WordPress is both free and priceless at the same time. More simply, WordPress is what you use when you want to work with your blogging software, not fight it.
http://wordpress.org

Movable Type

Powerful enough for building blogs, websites or social networks on a single platform. It’s easier than ever to publish and share information with Movable Type. Movable Type makes it simple to start a blog, manage entire websites and build an engaged community of readers and customers.
http://www.movabletype.com

b2evolution

b2evolution is a powerful blog tool you can install on your own website. It includes all the features of traditional blog tools, and extends them with evolved features such as file & photo management, advanced skinning, multiple blogs support as well as detailed user permissions… Not to mention third party plug-ins!
http://b2evolution.net/

Nucleus

Nucleus offers you the building blocks you need to create a web presence. Whether you want to create a personal blog, a family page, or an online business site, Nucleus CMS can help you achieve your goals.
http://nucleuscms.org/

Textpattern

Textpattern is a flexible, elegant and easy-to-use content management system. It is both free and open source.
http://textpattern.com/

Content Management

Drupal

Equipped with a powerful blend of features, Drupal supports a variety of websites ranging from personal weblogs to large community-driven websites.
http://drupal.org/

Pligg

Pligg is an open source Content Management System (CMS) that you can download and use for free. Pligg CMS provides social networking software that encourages visitors to register on your website so that they can submit content and connect with other users.
http://www.pligg.com/

Joomla

Joomla is an award-winning content management system (CMS), which enables you to build Web sites and powerful online applications. Many aspects, including its ease-of-use and extensibility, have made Joomla the most popular Web site software available.
http://www.joomla.org

Mambo

Mambo is a full-featured, award-winning content management system that can be used for everything from simple websites to complex corporate applications. It is used all over the world to power government portals, corporate intranets and extranets, ecommerce sites, nonprofit outreach, schools, church, and community sites.
http://mambo-foundation.org/

Customer Service

Help Center Live

Help Center Live is an open-source, community driven live chat & support system. You may easily provide live support on your website just like large companies do with very little work. With Help Center Live, you can provide a real-time, live support or sales person experience.
http://www.helpcenterlive.com/

osTicket

osTicket is a widely-used open source support ticket system. It seamlessly integrates inquiries created via email, phone and web-based forms into a simple easy-to-use multi-user web interface.
http://www.osticket.com

Crafty Syntax

Crafty Syntax Live Help (CSLH) is an open source live support solution that helps customer support with live help functionality that can be proactively pushed to visitors to your site or requested by the consumer.
http://www.craftysyntax.com/

eCommerce

osCommerce

osCommerce Online Merchant is an Open Source online shop e-commerce solution that is available for free under the GNU General Public License. It features a rich set of out-of-the-box online shopping cart functionality that allows store owners to setup, run, and maintain online stores with minimum effort and with no costs, fees, or limitations involved.
http://www.oscommerce.com/

Magento

Magento is the eCommerce software platform for growth that promises to revolutionize the industry. Its modular architecture and unprecedented flexibility means your business is no longer constrained by your eCommerce platform. Magento is total control.
http://www.magentocommerce.com/

Zen Cart

Zen Cart™ truly is the art of e-commerce; free, user-friendly, open source shopping cart software. The ecommerce web site design program is being developed by a group of like-minded shop owners, programmers, designers, and consultants that think ecommerce web design could be and should be done differently.
http://www.zen-cart.com/

Open Cart

OpenCart is an open source PHP-based online shopping cart system. A robust e-commerce solution for Internet merchants with the ability to create their own online business and participate in e-commerce at a minimal cost.
http://www.opencart.com/

Agora Cart

AgoraCart – The powerful “Free” Open Source ecommerce shopping cart software solution offers you a very wide range of features that allow you to setup an online storefront or shop ranging from a simple template based store for novices to the integration of complex web design concepts created by your web designer.
http://www.agoracart.com/

Education

Moodle

Moodle is a Course Management System (CMS), also known as a Learning Management System (LMS) or a Virtual Learning Environment (VLE). It is a Free web application that educators can use to create effective online learning sites.
http://moodle.org/

Forums

phpBB

Since its creation in 2000, phpBB™ has become the most widely used Open Source forum solution. Like its predecessors, phpBB™ 3.0 “Olympus” has an easy to use administration panel and a user friendly installation process, which allows you to have a forum set up in minutes.
http://www.phpbb.com/

BBPress

bbPress is forum software with a twist from the creators of WordPress. bbPress is focused on web standards, ease of use, ease of integration, and speed. We’re keeping things as small and light as possible while still allowing for great add on features through our extensive plugin system.
http://bbpress.org/

PunBB

PunBB is a fast and lightweight PHP-powered discussion board. It is released under the GNU General Public License. Its primary goals are to be faster, smaller and less graphically intensive as compared to other discussion boards.
http://punbb.informer.com/

Simple Machines

Simple Machines Forum — SMF in short — is a free, professional grade software package that allows you to set up your own online community within minutes.
http://www.simplemachines.org/

Mailing Lists

phpList

phplist is an open-source newsletter manager. phplist is free to download, install and use, and is easy to integrate with any website.
http://www.phplist.com/

Dada Mail

Dada Mail is a completely contemporary, mature and intuitive web-based e-mail list management system, which runs on most any Unix-like hosting account that can run custom CGI scripts.
http://dadamailproject.com/

poMMo

poMMo is versatile mass mailing software. It can be used to add a mailing list to your Web site or to organize stand alone mailings. Unique Features such as the ability to mail subsets of your subscribers set it apart from alternatives.
http://pommo.org/

Photo Galleries

Zen Photo

Zenphoto is an answer to lots of calls for an online gallery solution that just makes sense. After years of bloated software that does everything and your dishes, zenphoto just shows your photos, simply. It’s got all the functionality and “features” you need, and nothing you don’t.
http://www.zenphoto.org/

Gallery

Gallery gives you an intuitive way to blend photo management seamlessly into your own website whether you’re running a small personal site or a large community site.
http://gallery.menalto.com/

Pixelpost

Pixelpost is an open-source, standards-compliant, multi-lingual, fully extensible photoblog application for the web.
http://www.pixelpost.org/

Piwigo

Piwigo is a photo gallery software for the web, built by an active community of users and developers. Extensions make Piwigo easily customizable. Icing on the cake, Piwigo is free and opensource.
http://piwigo.org/

Win a Copy of the Web Designer’s Idea Book

c.bavota — Sat, 12 Sep 2009 21:07:40 +0000

I have decided to start rewarding people who support bavotasan.com, and what better way than by giving away a copy of Patrick McNeil’s WEB DESIGNER’S IDEA BOOK? It contains over 700 website designs and is a great inspirational resource for anyone working in web development. I plan on giving something away every month, and each time the way to win will be different. For September, all you need to do is follow me on Twitter. If you already follow my Twitter feed you are automatically entered to win. I will announce the lucky winner on Thursday, October 1st.

Congratulations to our winner Scott Shrum!

This contest is only open to residents of Canada and the United States. The winner will be contacted through Twitter on October 1st, 2009. Contest ends September 30th at 11:59pm.

Get Familiar with HTML 5

c.bavota — Thu, 27 Aug 2009 14:19:26 +0000

If you work on the web you have probably heard about HTML 5. It is the next evolutionary step in web programming and the sooner you familiarize yourself with it the better.

There is a lot going on in HTML 5 and instead of getting into it myself, I think I should just suggest a few articles I have come across to steer you all in the right direction.

WC3 – A vocabulary and associated APIs for HTML and XHTML
Smashing Magazine – HTML 5 and the Future of the Web
A List Apart – A Preview of HTML 5

If you knew nothing about it before, checking out these articles will fill your mind with so much HTML 5 your eyes will bulge.