Tag: CSS/WebDesign

Javascript Code Highlighter: Chili vs SyntaxHighlighter :: PseudoCoder.com

Today I tried to get Chili to work on this blog. I post code occasionally and Chili was appealing to me since it uses jQuery for most of the heavy lifting. I was hopeful that Chili would be quick and incrementally increase the amount of JavaScript downloaded. Chili didn’t work for me. It had syntax errors in the JavaScript. My debugging skills were not finding any quick answers so I decided to give plan SyntaxHighlighter a try.

From the post it looked like SyntaxHighlighter was going to be a bear to install so I decided to check the WordPress plugins web site for possible alternatives. Guess what I found, SyntaxHighlighter-Plus! This recently updated plugin uses the SyntaxHighlighter JavaScript package by Alex Gorbatchev and makes installing a syntax highlighter a snap. The instructions are a little sparse on how to use it but I converted several existing code snippets to use the plugin. They looked good after I figured out how to get around the automatic encoding of HTML entities. The first time the editor encodes those special characters it was nice. The less than character becomes <. The second time it encodes the characters, it created a mess. The less than character becomes <. I guess I should turn off the visual editor again. I also had to hand tune the CSS to get around some alignment issues.

Overall I give the plugin a thumbs up based on ease of installation and the light load it added, ~25K bytes. Editing a post is still a problem but I can work around that problem.

Javascript Code Highlighter: Chili vs SyntaxHighlighter :: PseudoCoder.com

Updated phpWebSite Bleuprint theme

In a previous post I started creating a phpWebSite theme based on Blueprint. My plan is to convert an existing phpWebSite to the latest version but a theme for the latest phpWebSite(1.3.0) is not ready yet. Since my idea of humor is frequently referred to as cheesy I am calling this new theme, Bleuprint.The theme has a lot of neat stuff since I incorporated a lot of toys into the theme. However, it is not ready yet. It is still a work in progress. At this time I have both the web page and article module pages on my front page. I am leaning to using the Article module for most of my content but I am still working through various annoyances. Make me a believer, Eloi!

My demo site is at http://demo1.wehuberconsultingllc.com/.

  1. Merged Blueprint into the default phpWebSite theme.
  2. Fixed phpWebSite annoyances.
    1. Create new module templates to replace the <h1> element with the more search engine friendly <h2>.
      1. Sitemap
      2. Blog
    2. Create a tabbed menu for the new site. I want to keep the tabbed menu design from the old site.
    3. Change the calendar colors and layout.
    4. Fix control panel layout problem for form designer with Firefox.
  3. Add new features to the template.
    1. Add jQuery support(http://jquery.com/) so I can use ThickBox for viewing photos(http://jquery.com/demo/thickbox/). Thanks to Cody and the folks supporting jQuery development.
    2. Add zebra table suppport via jQuery(http://tablesorter.com/). Thanks Christian! Note: You must edit the /config/core/textsettings.php file to allow <thead> tags. No thead, no worky!
    3. Add drop shadows to photos. I ported this visual toy from one of my favorite WordPress themes, Misty Look(http://wpthemes.info/misty-look/). Thanks to Sadish for creating a great theme!
    4. Add a rounded corner search box with jQuery field replacement. Thanks Brian! http://blog.reindel.com/2007/08/13/howto-spruce-up-your-search-box-with-css-and-a-background-image/
    5. Add CSS liquid rounded corner box to template. Thanks Mark! http://www.search-this.com/2007/02/12/css-liquid-round-corners
  4. Evaluate module support.
    1. Article 4.0 module(Remember to patch the control panel per the instructions).
    2. Mailto module(Not supported)
  5. Bugs and Redesign(?!)
    1. Where is Coming Soon in Calendar?
    2. Where is What’s Popular block for Articles
    3. See if I can create a list menu template of just simple <li> links.
    4. Redesign comment template to be more like copyblogger.  

Setting up PHPUnit to run the samples

In my last post I thought I had set up PHPUnit correctly. As I worked through the samples I found out that there were a few more problems.

  1. The first problem was finding the Framework folder used in the samples. This folder exists under the test tree. To make things easy I copied the Framework, Extensions, Runner, and Util folders over to my working directory. As I said in previous post my working directory, phpunit, is located under the htdocs folder.
  2. The ObserverTest sample did not work for me as shown in the documentation. It complained about the Subject object. I got the Observer object to run but I think section of the documentation should be re-written. Mock objects are important.
  3. The second problem I found was when I was trying to run the BankAccountTest. It threw a BankAccountException and it expected to find the BankAccountException class somewhere. Sebastian has a slide online with an updated BankAccount.php that referenced a BankAccountException.php. I looked all around for the file but I could not find it. So I created my own file. It does nothing except create the BankAccountException class by extending Exception. Now the BankAccountTest sample will run.
  4. Getting the code coverage feature to work was a bit trickier. If you have not enabled xdebug you will get a confusing error message. When you run PHPUnit with the code coverage parameter, “–report”, it will say that there is no report parameter. Huh!? When you run “phpunit –help” you will not see the report parameter. Hmm… I thought I had fixed this.
    1. Go back and make sure that you have enabled the extension in the php.ini file. Oops, I had enabled the extensions in the wrong file.
    2. After enabling the xdebug extension I got an error message when I ran PHPUnit.bat that complained about the version of xdebug.dll and PHP. I am running the latest version of PHP and the xdebug.dll version it is loading looks like it is pretty old. After a couple of iterations I got the configuration correct. You need to enable the xdebug extension as a ZEND extension with the full path to the most recent version of the DLL. The most recent version exists in my ext folder but it had a different name. For my version of XAMPP I added the following line, zend_extension_ts="C:\Program Files\xampp\php\ext\php_xdebug-2.0.0-5.2.2.dll". Now I get the pretty code coverage report.

So there you have it. I have gone through the examples and gotten all of them except one to work as expected.

Communication Styles and the Future of phpWebSite

I have been pondering for some time whether to convert existing web sites from phpWebSite to WordPress. It is difficult for me to think about these things since I quickly jump to the implementation details. So I decided to back off and look at the problem from the viewpoint of communication styles. For this quick analysis I am going to compare the diary, magazine, and product brochure formats to their Internet counterparts. These communication styles have existed for a long time in printed form. I think a little pondering on where these formats came from and where the web site versions of these formats are going will give me a better strategic view.

Diary Format

  • History – The diary format is the model that blogs originally copied.
  • Frequent Updates – One of its characteristics is that it generally involves short posts on a daily basis. This feature of blogs was quickly adopted by news organizations for syndicating news over the Internet.
  • Conversational tone – A key characteristic of both diaries and blogs is that they have a conversational tone.

Magazine Format

  • History – The magazine format came about as printed magazines established a presence on the Internet.
  • Monthly Updates – Originally the web sites mimicked the printed version and were updated on a monthly basis. As magazine publishers adapted to the positive and negative impacts of the Internet on their business, they eventually adopted RSS syndication for more frequent news updates(daily) and email newsletters for less frequent updates(weekly).
  • Both formal and conversational tones – The magazine format has traditionally had a mixture of both a formal tone and a conversational tone. The articles had a professional/formal tone while the editorials has a more personal tone.

Product Brochure Format

  • History – The product brochure format came about as businesses wanted a web presence to support their sales operation. Originally these sites were fairly static web sites that reproduced the sales information that already existed in brochure form.
  • Infrequent Updating – Most of these sites were static sites. It was commonly understood that if you wanted current information you need to call them on the phone. Many business site have since migrated to dynamic content. FAQs became an easy and quick way to support customers after the sale.
  • Primarily a formal tone – For the most part the tone used by these sites can be described as professional.

So how does WordPress and phpWebSite stack up in these areas?

  1. WordPress
    • The origin of WordPress is as a blog and it is one of the best blogs out there. It has a great development community out there.
    • WordPress has shown a lot of versatility and has expanded into the magazine format. Here is an example of the magazine format, Darren Hoyt Dot Com » Blog Archive » Mimbo v1.1 Released.
    • Although you can use WordPress as a simple product brochure or Internet sales site, it does not scale up as well as other packages. A few months ago I wrote a post in which I said that a nonprofit with a “product brochure” styled site might be better served by going to a more conversational format.
  2. phpWebSite
    • The blog portion of phpWebSite was originally called Announcements. phpWebSite can function as a blog but WordPress is free and a better blog.
    • The magazine format is probably the best use for phpWebSite. The “What’s Related” feature is a great feature. Similar features can be added in WordPress via plugins. I think that articles and calendars are the areas of with the greatest potential over WordPress but the phpWebSite development community is more limited.
    • Like WordPress you can use phpWebSite as a simple product brochure site but it does not scale up as well as other packages. Using the template system for product brochures is tempting because it may integrate the key data while allowing it a bit more scalability.

So there you have it. Both WordPress and phpWebSite are pursuing the magazine formats but phpWebSite is a more natural fit for the magazine format at this time. WordPress has a much larger development community but it has many diverse interests. The primary interests for WordPress is the blog format so it is hard to tell who has the better development community in the magazine format area.

Creating a new theme for phpWebSite 1.3.0

I finally bit the bullet and decided to create a new theme for the new version of phpWebSite. Part of my problem with starting this project is that I think that WordPress might be a better solution for these web sites. One of the big advantages that WordPress is an abundance of good looking, standards compliant themes. It probably would not be that hard to migrate one of the old phpWebSite sites into WordPress. The other site has a couple of features that would require a lot more research so I opted to proceed with the theme redesign project.

In a previous post I talked about the “Blueprint: A CSS framework”. I would like the new theme to most like Misty Look. In a previous post I mentioned that I have used this for a charity blog in the past. For kicks I want try out the Copyblogger theme, too. I also want to add jQuery support so that I can use ThickBox. So here is my plan.

Phase 1

  1. Create a new theme which merges Blueprint into the default phpWebSite theme.
  2. Fix phpWebSite annoyances.
    1. I will create new module templates to replace the <h1> element with the more search engine friendly <h2>.
    2. See if I can create a list menu template of <li> links.
    3. Create a tabbed menu for the new site. I want to keep the tabbed menu design from the old site.
    4. Change the calendar colors and layout.
  3. Add zebra tables, drop shadow, and ThickBox support.
  4. Redesign comment template to be more like copyblogger.
  5. Evaluate Article 4.0 module.

Status

At this point I have a workable replacement for the original site. Most of the stuff works but I am still checking it out. I have not made the changes to the comment template, the list menu template, or checked the new version of Article. I will probably be updating to the latest version(1.3.0) of phpWebSite on the demo site in the next couple of days. To view the results go to my demo site at http://demo1.wehuberconsultingllc.com/.

Phase 2

Now it is time for me to separate the specific theme data from the common theme data. I expect to create four theme variations and a theme to display a design grid.

  1. Default Blueprint
  2. Misty Look
  3. Copyblogger
  4. Copyblogger organic.
  5. Display grid

Phase 3

Convert the old data into the new phpWebSite format.

Blueprint: A CSS Framework

Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.

Blueprint: A CSS Framework

I saw this a couple of days ago and decided this may be just the trigger to get me to redesign an old phpWebsite theme. The old theme works but it is kind of quirky since it started out as a table based layout theme. It could benefit from a redesign from the ground up. I have been yearning to redesign and clean up the theme for some time. Most of my theme ideas come from WordPress Themes so I was looking at porting one or more WordPress themes I like over to phpWebsite. It is debatable whether it makes sense to port over the themes since I could recreate the site in WordPress in about the same amount of time. I will mull over this a little while longer.

RE:25 Killer Code Snippets every Good Designer Should See

I found that this collection of CSS, scripts, html, and widgets caused me to rethink some of the stuff I am doing. I haven’t changed anything but I am getting some ideas of how I could use this stuff.

Round up 25 of the Best CSS, scripts, html and widgets that you can use on on your website or blog (Part 4) More…

More Fixups on the Reworked Reset.css

This is embarrassing! I have been using a version of Eric’s Reworked Reset in conjunction with my main css for a couple of weeks now and I did not notice that the strong/bold feature was not working in the content of the blog. Putting it back in was easy but it reminded of all of the things that are turned off in the reset.css that affect its use with an existing website but do not break it. Generally speaking, I am using very few selectors that cover the whole web page. This means that I specify the area of the web page I want to affect. In my case I added the following code, #content strong {font-weight:bold;}, to override the default action for the content area of the web page. I also added #content em {font-style:italic;} to restore the default emphasis.

Fixing My Technorati Tag Cloud widget

I have been using the “My Technorati Tag Cloud” widget for several weeks now and I finally decided to fix the HTML validation errors.

  1. The first problem is the embedded CSS in the body of the page. It should be in the header or in the stylesheet. I prefer the stylesheet fix so I commented out lines 169 through 174 and inserted the stylesheet info into my stylesheet.
  2. The W3C validator expects the widget to be a list item. So I added a <li> before the <h2> on line 179 and a </li> behind the </ul> on line 206.

For those who are not familiar with this plugin here is a short description and a link to its author.

This plugin will download your most used Technorati tags and display them in a tag cloud on your blog just like they show up on your Technorati profile. As always this plugin has caching so that it will only talk to technorait’s web site one an hour.

Source: Warping On » Blog Archive » My Technorati Tag Cloud
[tags]css, webdesign, wordpress[/tags]

Eric’s Archived Thoughts: Reworked Reset

I added this css to two WordPress themes, MistyLook3 and Andreas09. It did not alter the layout for MistyLook3 besides the line-height in the sidebar. I liked the change so I left it unchanged. However I had to make several changes to the Andreas09 theme to overcome some annoying problems.

  1. I had to add the font-weight:bold; property to the h2 element on the leftside in the regular css to get the bolding back.
  2. I had to fix one margin in the regular css(.date) since the reset.css caused it to overlap a heading.
  3. I was not able to see the default list styles for ul and ol in my content even when I specified them in my regular css. I could get the li elements to indent but I was never able to get a disc or a number to appear. So I commented out the statement in the reset.css. A picture version for the ul element worked in my MistyLook3 theme so I probably am not doing something right.

Link to Eric’s Archived Thoughts: Reworked Reset

Using CSS Page Breaks in phpWebSite

I spent some time this week fixing up the print versions of some html pages. You could call the pages, product pages, and they are the most likely candidates to be printed by a customer. They looked okay in the browser but they suffered when printed. IE had the most problems. I thought a print.css would help but it didn’t. FireFox and IE disagreed how the printed page should look. I ended up tinkering with them to get them both to print acceptably. Forcing page breaks helped out considerably. Initially I created a new section in phpWebSite in put a paragraph with a css class that would force a page break. This worked but it was kind of clunky. So my final solution was to modify an existing phpWebSite section template to give me a page break after the section. This way I can select the modified template for those sections I want a page break after. I looking forward to the day when I migrate this phpWebSite system over the new version and use a regular html page. I learned to use sections in phpWebSite to get the site up but I am not a fan. I have enough experience with them now to say I would be more productive without them.

I really want a nicely formatted Acrobat version of the web page but that is a project for a different week.

Technorati tags:

Where Our Standards Went Wrong

To validate or not to validate; that is the question. A List Apart’s own Ethan Marcotte helps us to re-examine our approach to standards advocacy and how we can better educate our clients on the benefits of web standards.

 

Link to Where Our Standards Went Wrong

I still prefer that my sites validate but I do allow warnings and occasionally minor errors to get through. It is a tradeoff. I want the sites to validate but I need to limit the amount of time I spend debugging validation problems since I am the only person who cares that the problems get fixed. The biggest advantage to having a site that validates is to minimize the maintenance headaches supporting multiple browsers.

MistyLook Theme for a Charity blog

I got distracted again! The Development Dirctor for our Habitat affiliate was complaining about the stale content on the affiliate’s website. For some time I have been thinking about the appropriate format for a charity website. I have begun to believe that a blog style website is a natural fit for charity websites. The social networking advantage of blogs(e.g. comments, rss feeds) is probably a good tool at communicating with a diverse group of volunteers. Working off of this sketchy premise, I created a blog that I intend to offer to our affiliate.

Design Decisions

  1. My favorite blog software is WordPress.
  2. WordPress is generally available at most host providers and has lots of free themes to choose from.
  3. WordPress does not have licensing issues.
  4. I envision that most of the updates will be via posts. We need an easy method of posting with photos by non-Geeks. The ability to use multiple authors is a plus.
  5. We will need about six static pages(e.g. Volunteer, Donation, Family Selection, etc.). These will be updated quarterly to annually.

Implementation Decisions

The key for me was seeing the themes available at themes.wordpress.net. After browsing through a part of this immense collection I settled on MistyLook from the creators of WordPress Garden. It has a nice, clean, widget friendly, two column design with tabs across the top of the page for the static pages. Only the key pages are shown across the top. All of the static pages appear in the sidebar, too. I already have a widget template for Paypal donations. I don’t expect many PayPal donations but it will be easier and it requires almost no effort on our part to collect the money. The only drawback to the theme was that I had to tweak it a little to get it to work.
I added three WordPress plugins:

  1. Imagemanager to handle the photos. WordPress’s default features are pretty good but Imagemanager adds resizing and default sizes for thumbnails.
  2. Widgets plugin.
  3. FeedBurner plugin. RSS feeds are typically associated with a younger crowd. Since we have quite a few older volunteers who have just recently gotten comfortable with email, FeedBurner Email looks like a potential winner for us. Volunteers can get website updates via RSS feeds or Email.

So here is the fruits of my labor.

WordPress Hack: Rotating Banners

As you know I use WordPress as my blogging platform simply because I love PHP and the simplicity that comes with a beautiful syntax. This post shows you how to create a rotating banner for your WordPress blog.

Getting Your Banners Together

First of all this is just a dirty template hack that will not go away as you upgrade your WordPress distribution. The first step is to create a set of banners you want to rotate and name them sequentially. For example, mine are named vladville-bar1.jpg, vladville-bar2.jpg, vladville-bar3.jpg and so on. Here they are:

Vladville-bar1

Vladville-bar2

Vladville-bar3

Vladville-bar4

Look familiar? Great. Notice how only one number in the filename changes? Now upload all of these banners to the same directory, mine are in /images.

Hack The Template

The second step is to actually hack the template file. Because WordPress is PHP based you can embed PHP code anywhere in your template. Mine is in the header.php but you can use this trick anywhere you want to.

Remember how only the number was different? The only thing I did was instruct PHP to select a random number from a range and insert that number in HTML code. So here is the entire mastery:

<table background=”/images/vladville-bar<?php echo rand(1,23); ?>.jpg” width=”800″ height=”155″ border=”0″>

Thats the entire mastery right there. When the template is parsed by WordPress and PHP it will call a rand function which returns a random integer in the range between 1 and 23. I happen to have 23 images on the server so returning a random number between 1–23 will return a number of one of the images in that range. The <?php part tells the server to start interpreting the next block of text as code instead of just plain filler. The ?> stops it. The echo sends stuff back to be printed and 1,23 are parameters sent to the rand function. Every time the page is reloaded the rand() function should return a different random number between 1–23 giving my visitors a different random banner from my pool of 23. For example:

First time rand(1,23) executes it returns 5. As a result, you will see vladville-bar5.jpg

<table background=”/images/vladville-bar5.jpg” width=”800″ height=”155″ border=”0″>

Second time rand(1,23) executes it returns 17. As a result, you will see vladville-bar17.jpg

<table background=”/images/vladville-bar17.jpg” width=”800″ height=”155″ border=”0″>

Thats all there is to it but I figured I’d start slow and build up. Imagine the possibilities here, you can insert greetings based on the time of day, display random quotes, insult visitors by guessing their IQ with rand(5,30) and so on.

So get creative. Your blog does not have to be borg it should reflect your individuality. After all, its all yours.

Link to WordPress Hack: Rotating Banners

This is multi-purpose post. First I want to try this hack on my test WordPress blog. If I have time I want to try and configure a demo website to replace the current Habitat for Humanity affiliate website. The two most important characteristics that can lead to a successful HFH website is current news and photos. Using a blog can make the website easier to update and keep current. Rotating current photos on the front page makes the page more interesting for casual visitors but will require a little more computer knowlege.

My second objective is make this post using the GreatNews reader/Live Writer plugin. I have been using GreatNews for several weeks and I occasionally use w.bloggar via a GreatNews plugin to comment on other people’s posts. GreatNews supports several “Blog This” options including the plugin to w.bloggar. Today GreatNews released a plugin to make Live Writer a “Blog This” option. I was actually thinking about cloning the w.bloggar plugin to provide this functionality to Live Writer but someone beat me to it. Live Writer and w.bloggar are both nice front ends for blogs but Live Writer has a better user interface. For those who are unaware of these tools, they are the latest attempts to add a little extra word processing functionality to the process of creating new posts.

Since I prefer my websites to validate as xhtml, I run into occasional problems when I comment or include posts from other people. The html editors provided with most blogs are okay for new posts and most simple comment posts. I can look at the html code and fix the simple mistakes. When there are a lot of mistakes and you need a little extra help, Live Writer and w.bloggar can make editing the post easy and quick.

In looking at this post in Live Writer I have to admit I prefer this interface over the w.bloggar interface. It is not a hard decision. Wyswig is easier to use than raw html. It is nice that all of the links and images have the right addresses.