Microformats. Big Things In Small Packages?

Don’t let the name fool you. Although “micro” may accurately describe the amount of effort it takes to add these to your Web pages, microformats will make a big impact on information sharing on the Web.

A microformat is semantic mark up that is added to an (X)HTML document to give meaning to particular data on the page. In most cases, this mark up is in the form of common class names. This gives other applications the ability to classify information that already exists on the page.

Just what kind of data can be marked up with microformats?

Currently, microformats can be used for:

• contact information (think vCards)
• events (think Google calendar, iCalendar, etc.)
• Atom feeds
• reviews (product, movie, music, etc.)
• resumes
• discouraging posted spam
• tagging
• lists
• social relationships

In the works are microformats for citations and currency among others. Imagine how online shopping could be affected if you could use the power of microformats to compare prices real time.

For most business-oriented websites, the two to focus on would be contact information and events, which would allow your tech-savvy site users to add that information to their address books and calendars without copy/paste acrobatics.

Now let’s ground this in some reality.

This is currently a fringe technology and not widely supported—yet. It’s as RSS was a few years ago. The early adopters had to find and install RSS aggregators. As it became more mainstream, browsers like Firefox and Safari began to support it, and eventually with the release of Internet Explorer 7, everyone could subscribe to RSS feeds within a click or two.

Microformats are in that early stage. For you to be able to access microformats right now, you’ll need to be proactive and find the tools to use. If you use Firefox (and you should for many reasons), and want a peek into the future you can download the Operator extension for it.

Firefox already has plans for microformat integration in Firefox 3, and you can be sure that Microsoft will follow. Once that happens, microformats will become mainstream and people will get frustrated when they are not supported, forcing them to copy and paste the information they want.

by Blake Matthews in Coding, Knowledge, Organization, PaperStreet on July 27, 2007   -    Be the First to Comment
Bookmark Now or Else:   

Fix: IE Flicker Issue / Error with CSS Background Rollover Menus

This is the final fix for a IE flicker issue with CSS rollover background graphics. Sure with regular graphics, you can use a javascript preloader. However, with IE there is still a flicker when hovering.

A working example is here.

1. Javascript to the Rescue
Add this to the header in a javascript area (or use an attached javascript file)

//fixIE6flicker
try {
document.execCommand(’BackgroundImageCache’, false, true);
} catch(e) {}

* NOTE that you must wrap this above in a standard javascript “script” tag or link it to an external javascript file.
Thanks to Dana Popa for the code fix.

2. A single Background Graphic
In the graphics for the rollovers, only make one single file for the background graphic for the button. The graphic would have both the up state and hover state.
Background Menu

3. CSS Changes
Simply change the CSS code to put in a different position value when you need to call them. For instance:

#menu ul li {
background:url(images/bg_menu.gif) no-repeat top left;

#menu ul li:hover {
background:url(images/bg_menu.gif) no-repeat left -36px;

As you can see, the background position was moved to a negative value of 36 pixels, which shifts the image to the hover state.
Note that I removed all the other code that is powering the menu, however, you can view the complete code here - http://www.paperstreet.com/wow/ieflicker/style.css

A working example is here: http://www.paperstreet.com/wow/ieflicker/

by Peter Boyd in Coding, Knowledge, PaperStreet on July 4, 2007   -    Wow, 3 Comments So Far
Bookmark Now or Else:   

Domain Name Switch: Problems with Email or Web Site Not Revolving

At PaperStreet we launch about a web site a week (or eight in the past two weeks if you are counting). One of the most common issues with a new web site launch, on a new web server, is for the client to not be able to see the new site immediately.

It takes anywhere from 5 minutes to 72 hours for a domain name DNS info to propagate across the internet. Most often it happens immediately or within a few hours. Sometimes it takes a bit longer.

If you are ever having issue with a single computer, or single network that simply wont update to the new site, or simply won’t send email to the new server, then do this command on that effected computer:

1. Click Start > Run

2. Type the following and hit enter:

c:/> ipconfig /flushdns
3. That is it. It should clear the DNS cache of the computer and the computer will then re-query the internet to see where traffic should be pointed.

Thanks!

by Peter Boyd in Coding, PaperStreet on May 19, 2007   -    Be the First to Comment
Bookmark Now or Else:   

Cool Sites

I typically hate listing cool sites, but I have been asked lately in a couple of meetings which sites do I regularly visit for news, info and inspiration.  So here is the list…

Sites of the Day - http://populicio.us/newlinks.html

General - http://www.alistapart.com/

Design - http://thesis.veracon.net/

Design - http://www.csstux.com/

Flash - http://thefwa.com/

Flash Award - http://www.fcukstar.com/

CSS - http://www.csszengarden.com/

Type Testing - http://typetester.maratz.com/

Color - http://www.colorschemer.com/ 

by Peter Boyd in Coding, Design, General, Knowledge, PaperStreet on November 17, 2006   -    Be the First to Comment
Bookmark Now or Else:   

Using WordPress as an Intranet & Installing on a Windows Server in 10 Minutes

We have clients of all sizes wanting intranets to store files, text and more. A quick out-of-the box solution for small businesses and law firms is using WordPress as an intranet solution.

WordPress? Isn’t that a blog? Yes, it is a blog, but as I have been stating for awhile now, a blog is just a nicely packaged content management system. You can use WordPress as an intranet, with file sharing abilities, the ability to categorize information and more. Best of all using some free software on the internet, you can install it on any type of local server, from Windows to Linux in less than 10 minutes.

Since most firms typically have a Windows server, here are the nitty gritty steps. For a trained professional, this installation can take maybe 10 minutes. For someone with basica skills, it should still take less than an hour.

INSTALLATION OF DATABASE, PHP, and WEB SERVER

You need to install a MySQL database, PHP and a web server (IIS or Apache) to get WordPress running. This article is assuming that you have none of them installed and want to install them as quickly as possible. If you want you can go through the process of installing the individually, but that takes more time, and you are free to do that.

1. Install EasyPHP
Simply download it from http://easyphp.org/ and install on the local server. This will setup an Apache server, PHP and MySQL database all in one nice step on your local server. Type in http://localhost in your internet browser. If you see a test page by EasyPHP, then its all working. Note that here are other installer programs that you can use as well. The EasyPHP system seems to function well and was well . . . easy to install.

2. Install a MySQL Admin Tool
If you known command line prompts for MySQL, then just skip this step. If you do not, then you need a GUI MYSQL tool to setup a database. I recommend the tool from MySQL itself. You can find it here:

http://dev.mysql.com/downloads/administrator/1.1.html.

I installed this into the root path of the EasyPHP, so that MySQL would auto detect the databases. It may detect them if installed into a different path, but I know it works when installed into the following directory: C:\Program Files\EasyPHP1-8\mysql\MySQL Administrator 1.1

3. Install Wordpress
Download a copy of Wordpress at http://wordpress.org/download/. Unzip it and install it to the root of the web directory of the apache server on your local computer. This is typically C:\Program Files\EasyPHP1-8\www with the EasyPHP setup. I would overwrite any files in that directory (there should be one index.php file from EasyPHP which is their testing page).

That is all for the installation of program files. That should have taken you about five minutes.

SETUP WORDPRESS

Now let’s setup the WordPress blog in less than five minutes.

1. Create a Database
Add a MySQL Database using the MySQL Admin Tool. Login to MySQL Administrator using the root account. It should be just root as the user and blank for the password. Your hostname is localhost. Click on Catalogs. Right mouse click on the lower left hand area and select CREATE NEW SCHEMA. I named my new schema wordpress. That is it. The new database schema is created. Note that if you know command line prompts for MySQL you can just use that too and not install the GUI tool. I personally hate command line prompts.

2. Create a WordPress Config file
Find your Wordpress folder in your Apache www directory, typically C:\Program Files\EasyPHP1-8\www\
Find the wp-config-sample file. Open it, change these lines to what I have below:

define(’DB_NAME’, ‘wordpress’); // The name of the database
define(’DB_USER’, ‘root’); // Your MySQL username
define(’DB_PASSWORD’, ”); // …and password
define(’DB_HOST’, ‘localhost’); // 99% chance you won’t need to change this value

Basically we have changed the define(’DB_USER’, ‘root’); to by the root user and deleted the password in DB_PASSWORD. You can make this more secure by putting in a root password, which is recommended. Do this from the MySQL GUI tool and make sure you update this file.

3. Install Wordpress
Launch the wordpress application. Follow the simple instructions to install. That is it. You are done.

ADDITIONAL OPTIONS

1. Config Apache
Under EasyPHP 1.6, it is necessary to activate the mod_rewrite in Apache, because it is not installed as the default. In your system tray, right mouse click on the E logo (EasyPHP) and click on configuration->apache (that will open to you a window notepad with the file httpd.conf) Once there, removes comments (#) for the 2 following lines:

LoadModule rewrite_module modules/mod_rewrite.so
AddModule mod_rewrite.c

Now you can change the permalink structure to be something more pleasing, like
» http://localhost/2006/05/11/sample-post/

2. Plugins.
You can install any plugins as you would normally do. I recommend activating the database backup tool immediately and backing up your database every week or so.

3. Ping Service
Delete this annoying ping service under the Writing / Options tab - http://rpc.pingomatic.com/

4. Email
The default sendmail will probably not work on a Windows Server, even with Apache / PHP enabled, so you may want to try wpPHPMailer or some other email system. Install this plug and configure it:
http://www.coffee2code.com/wp-plugins/wp-phpmailer.zip

by Peter Boyd in Coding, General, PaperStreet on May 11, 2006   -    1 Comment So Far
Bookmark Now or Else:   

PHP Redirect Based on URL

Ever want to send a user to a different part of your web site, based on what domain they use? Find out how.

You can redirect a visitor to another page on your site based on the domain they are using. This is useful if a company has multiple domains and multiple page addresses. For instance for DefenseGroup.com, they have a Spanish domain called GrupoDefensor.com. For those clients that use that domain, we want to redirect them into the Spanish part of the web site automatically. Here is how we did it with five lines of code and a simple IF statement.

if (($_SERVER[’HTTP_HOST’] == “grupodefensor.com”) || ($_SERVER[’HTTP_HOST’] == “www.grupodefensor.com”))
{
header(’Location: index-sp.php?category=Abogados+de+Defensa+Criminal’);
}
?>

The code asks the PHP server to see what the HTTP_HOST header is (line 2/3). If it is groupdefensor.com or www.grupodefensor.com, then it redirects to the Spanish part of the site (line 4/5). If not, then the code is just skipped and continues to load the rest of the PHP code on the page. Simply place this code in the top of any page that you want to redirect and you can start redirecting users around your site..

by Peter Boyd in Coding on April 19, 2006   -    Be the First to Comment
Bookmark Now or Else:   

URL Encoding

Macromedia Tech Tip - URL Encoding

The key to creating database queries with user friendly URLs is URL encoding. Here is a list of characters and their corresponding values.

http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_14143.

by Peter Boyd in Coding on January 14, 2006   -    Be the First to Comment
Bookmark Now or Else:   

Why Create a Database Web Site?

HTML vs. Database Web Sites. Why and when to choose one technology over the other.

HTML vs. Database Web Sites
When deciding on what type of web site to build, ask how often they are going to be updating the site, who will be updating the site, and what is the goal of the site. If it is simply going to be a brochure style web site that is only updated once or twice a year, then realistically you can still create an html web site. If you have someone that knows their web design program really well, then html sites are fine. If your site is only going to have a few pages, then html sites are fine.

If you build an HTML site will you be behind on the times, yes. Will it be harder to update, yes. Will your site still function in years to come, of course.

If you are going to be updating the site on a monthly basis or greater, or have an in-house staff that does not know web technologies, or have a lot of content, then go with a database design. It will save you time and allow you to take full advantage of the web and its new technologies. More on all of this below.

HTML Site Reasons

Again, if you are only creating an online brochure that is hardly ever updated, then a HTML web site will save you time and money. If you only have a few pages on your site, then an HTML site is fine. Quite simply, the database and administration areas do not have to created, bought or leased. Your HTML site will look just as snazzy and can include Flash, scripting, and even RSS / XML feeds.

HTML Site Technologies
If you are going to be creating an html web site in-house, then you should use Macromedia Dreamweaver. Most likely, if you outsource, your design team will be using it too. With Dreamweaver, you can create templates that will power the entire web site and give all pages a consistent look. You can set editable regions inside of each template, where you can modify content on a per page basis (i.e. photo, headline, copy text, and side navigation).

Of course, I would still recommend saving the pages as .php, .asp, or .cfm so that you can later add in scripting technology. Don’t worry even though you do not have any scripting in the page, you can still save it in any format that can later connect to a database. If you are only going to be updating an html site, then simply use Macromedia Contribute (Dreamweaver’s little brother/sister program). It can connect to any page and allow you to update the site as needed.

Database Driven Site Reasons
With that said, I would highly recommend a database driven web site. As for why to use a database drive web site here are some reasons:

• It’s faster to update the web site, as you are only focusing on content.
• It’s easier to update the web site, as you typically do it from an online control panel.
• It will save money in the long-term, as you can focus your time on other marketing or duties.
• You can update the site from anywhere, anytime, 24/7. ‘Nuff said.
• You can build an effective search tool to search the entire database of information. Search tools are used by web site visitors a lot. Better searches mean happier visitors.
• Anyone will be able to update the site as most content systems are very easy to use, with little learning curve.
• By separating content from the design, you can later upgrade your web site easily. Simply apply a new template and you have an entire new site, without having transfer content.
• You can input data once and have it populated to multiple pages. This again saves time and that saves everyone money.
• When you add/edit/delete a page, all menus will be updated instantly. This cannot be underestimated as you want to maintain consistency in your menus / content.
• You can export your data into XML / RSS feeds for inclusion on other web sites. This is especially helpful for your news section of the web site, but you can export any info that you want to syndicate.
• You can export your data into XML / RSS feeds for inclusion into new technologies such as RSS aggregators or the upcoming Microsoft operating system, whenever that is released.
• There will not be any broken links. All menus will be created dynamically by the database and content system. It is error proof, unless you override the system, or put in a bad link yourself into the copy text.
• It will allow you to delete an attorney or any other page from the entire web site with a click of a button.
• It will allow you to add an attorney or any other page from the entire web site with a click of a button.
• You can maintain a detailed list of attorneys, offices, and practices. Meaning that an attorney can be linked quickly with any office or practice and only appear on those pages. Yes, you can do this with html pages, but it’s a pain if you have more than 10 attorneys as it’s tedious to update a ton of pages.

On the flip side, you should note that database driven web sites rank just as high in the searches as static html sites. So there is no real advantage gained. Of course, the more you post, the more information you will have for the search engines. Clients that have a database driven site usually post more information and have greater chances of ranking high in a specific search

Also, note that Database driven sites typically a bit more on the front-end to design a good content system. You can purchase existing content systems, find a good open-source content system, or have a developer build you a content system. There are also programs that you can lease too. Of course, the savings will definitely be seen over time as again it’s easier to maintain the site.

Database Driven Site Technologies
If you have chosen to go with a database site, then you need to know a little bit about how they work. In basic terms, all of your content is stored in the database. All design elements are stored in a template. Every time a page is called, the template loads and pulls in unique content for that page based on the URL. Again, this allows you to fully separate content from the design, which can make updates in the future easier.

As far as what technologies to use, the most popular scripting technologies are PHP, ASP, and CFM. When combined with a standard database such as MySQL or MS SQL, then you have a web site that is cutting edge. Of course, this is all technical mumbo-jumbo and most likely your selection will be made for you by your web designer. However, here is some quick information for those that want to know:

• PHP is one of the most popular scripting technologies on the web. It is free to install, fast, and upgraded a lot by the open-source movement. There are thousands of extensions, widgets, and programs to make your site really snazzy. Help is but a forum away. It can be installed on Windows or Linux, but runs a bit better on Linux based computers. It usually goes with the MySQL database, although you can connect to other databases as well.
• ASP / ASP.NET are Microsoft’s competing scripting technology. It is installed by default on Windows, although there are several programs that you can install on Linux to mimic ASP. ASP is also fast, and has a lot of extensions too. Microsoft has devoted a lot of resources for developers. PHP and ASP developers fight a lot over which technology is better. In any event, ASP can connect to any database, but of course likes to connect to MS SQL (Microsoft’s SQL database).
• Next up, there is Coldfusion, which is Macromedia’s scripting technology. CFM does about the same thing as PHP and ASP do, but the code is sometimes easier to learn for designers. Moreover, Coldfusion can connect to any database. However, Coldfusion is not free. You must purchase the Coldfusion server in order to be able to run the code (or use a shared host that has Coldfusion).
• Finally there are other technologies such as JSP, Perl, and various proprietary technologies that some developers build. If you want to know more about them, then ask your developer.

Again, most likely your choice will be made by your web design team. However, this was a good overview for those that are not bored by now.

I hope this quick overview helps.

Thanks.

Peter Boyd, Esq.
President & General Guru
PaperStreet Web Design
500 SW Ninth Street
Fort Lauderdale, FL 33315
954.523.2181 (tel)
954.337.6169 (fax)

.

by Peter Boyd in Coding on December 14, 2005   -    Be the First to Comment
Bookmark Now or Else: