I dislike the use of Flash for most business web sites. In this case I will make an exception. This Dutch site, HEMA – online winkelen, has one of the best and most amusing uses of Flash. It is worth the wait!
HEMA – online winkelen
Reply
Category Archives: CSS/WebDesign
Shadowbox.js Media Viewer
Shadowbox.js Media Viewer
I_CRE8
Fri, 25 Jan 2008 21:00:00 GMT
This looks interesting but it is considerably larger than my current jQuery lightbox plugin. Since I do not use flash or the other media the plugin supports, this plugin has limited benefits for my personal use and most of the web sites I maintain. Maybe sometime in the near future I will need it.
Silly HTML mistake – different response from FireFox and IE
Recently I found an interesting problem. A person complained to me that a link on a web page did not work. When I went to the page I was able to duplicate the problem with my default browser, Internet Explorer. Since I was pretty sure the developer who composed the page would have tested their links, I was puzzled. So I tried FireFox. The link worked! When I looked at the html code I saw the error immediately. He was using an <input> tag inside the link tags, <a>, to display a graphic. The <input> tag would have been appropriate if he wanted to display a graphic in a form but the <img> tag would have been the correct way to create a click-able graphic link. It looks like the developer had used some code from a form but he was sloppy in converting the code and had not tested the page with IE.
What was interesting was the way Internet Explorer and FireFox responded to the coding error. FireFox ignored the error, displayed the graphic, and let the link work. It was a mistake but FireFox did not care. Internet Explorer on the other hand displayed the graphic but did not let the link work. Now that is typically a surefire way to get a developer’s attention. Too bad the developer forgot to test his page with IE! I ran the page through the W3C HTML validation service and it did not flag this as an error. Hmm!
Windows Live Writer: Out of Beta
Thank you to everyone who tried out the beta releases of Writer over the last year and gave us feedback. Over 1.5 million of you downloaded our last beta release, and your input helped make Writer the product it is today.
Our goal from the start has been to help make blogging more powerful, intuitive, and fun for everyone. Today, we’re proud to announce that Windows Live Writer 2008 is now available!
Windows Live Writer 2008 (version 12.0.1366.1026)
Yea! I have been using this almost exclusively for my posts.
Windows Live Writer: Out of Beta
25 Code Snippets for Web Designers (Part7)
Every web designer finds it handy to have a collection of code snippets such as javascript effects, pieces of html and widgets that they incorporate into their designs. Lets take a look at recent examples of these …
This is an interesting collection of snippets that I need to investigate further. The creativity in web development never ceases to amaze me.
25 Code Snippets for Web Designers (Part7)
wehuberconsultingllc.com » Blog Archive » jQuery 1.1.4 works but JQuery 1.2 breaks tablesorter for me
In a previous post I said that jQuery 1.2 did not work with tablesorter. Well, Christian and the folks at jQuery have made some updates and they work together now. You need both the 2.01 version of tablesorter and the 1.2.1 version of jQuery.
jQuery 1.1.4 works but JQuery 1.2 breaks tablesorter for me
I tried jQuery 1.2 this week on my phpWebsite demo site but the zebra tables in tablesorter did not work for me. I got a dark gray table rather than a striped table. The folks know about the problem and it looks like someone has offered a fix. I will wait for those folks to work things out. Version 1.1.4 seems to work just fine!
jQuery 1.2: jQuery.extend(”Awesome”)
This is a massive new release of jQuery that’s been a long time in the making – and it’s ready for your consumption!
We’ve put the full jQuery 1.2 release notes on a page of it’s own, since there’s so much to dig through. REMEMBER, features were removed in 1.2, so please be sure to read the notes on how to upgrade before doing so.
Recently I have become a fan of jQuery. It allows me to add some neat functionality into web sites. A week ago I downloaded the 1.1.4 version which promised some pretty impressive performance improvements over 1.1.3 but I had not gotten around to testing it out. Now I see that the 1.2 version has been released! I am real confused about their version numbering scheme. The 1.1.4 version looked like a small change based on its version number but a pretty big change code wise. Version 1.2 is a big code change since it deprecates a variety of functions. I guess I will try the 1.1.4 version first. That is what the release notes recommends. Whew!
OpenDNS | Providing A Safer And Faster DNS
I finally got around to looking at OpenDNS. I have seen its name mentioned before but its name does not do justice to what it can do for you. Just looking at its name you have to wonder what can an open DNS do for me. One of the mailing lists I read recommended it as a way to block adult sites. It can block Malware sites, too. Hmm….
Last week I was talking to some folks about network monitoring and the problems I find with using pings to determine network status. Users consider a site or application is down if they cannot use it. They do not care if you can ping the site. In the case of my most obnoxious user, my son, the network problem was typically related to the server he was trying to get to, World of Warcraft. He had an important date at 700 PM and “my” Internet was the problem! Typically the problem looked like a server load issue. Sometimes his problems were related to the route being to the server being congested and occasionally it was directly related to the DNS being out to lunch. So I am going to give OpenDNS a whirl. It probably will not solve any problems for me but it may reduce the number of problems being shot in my direction.
OpenDNS | Providing A Safer And Faster DNS
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/.
- Merged Blueprint into the default phpWebSite theme.
- Fixed phpWebSite annoyances.
- Create new module templates to replace the <h1> element with the more search engine friendly <h2>.
- Sitemap
- Blog
- Create a tabbed menu for the new site. I want to keep the tabbed menu design from the old site.
- Change the calendar colors and layout.
- Fix control panel layout problem for form designer with Firefox.
- Create new module templates to replace the <h1> element with the more search engine friendly <h2>.
- Add new features to the template.
- 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.
- 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!
- 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!
- 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/
- Add CSS liquid rounded corner box to template. Thanks Mark! http://www.search-this.com/2007/02/12/css-liquid-round-corners
- Evaluate module support.
- Article 4.0 module(Remember to patch the control panel per the instructions).
- Mailto module(Not supported)
- Bugs and Redesign(?!)
- Where is Coming Soon in Calendar?
- Where is What’s Popular block for Articles
- See if I can create a list menu template of just simple <li> links.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
Updating PHPUnit on XAMPP
I have decided to do some playing around with unit tests for PHP. I saw a video on Getting Involved in WordPress and it reminded me of my interest in unit testing. Now I almost want to create some unit tests for verifying WordPress plugins or phpWebSite code. Fortunately, common sense will prevail and I will restrict my activities to playing. The instructions at Chapter 3. Installing PHPUnit looked pretty easy but since I wanted to do my testing under XAMPP I knew there would be problems. Hopefully the problems would be minor.
Confirm the PEAR configuration
The first thing I did was to open a command window in the PHP directory under xampp and ran the following command.
pear show-config
This command prompting elicited an error about improperly set environment variables. So I edited the file and inserted the full path to the XAMPP directory. I tried the command again and it showed the PEAR configuration. I checked the installed packages and it showed PHPUnit to be version 1.3.2. I would like to use the latest version so I am going to follow the instructions from the documentation.
Update the channel and install the PHPUnit
The next commands I tried were to update the channel and install PHPUnit.
pear channel-discover pear.phpunit.de
pear install phpunit/PHPUnit
The channel command worked. The install command did not work since it wanted the a dependency updated, GraphViz. After updating the dependency I ran the install command again. It installed 3.1.7 and it said I could also install pdo_sqlite and xdebug. I tried to install these extensions but they ended with a DSP error.
Test the PHPUnit
To test the installation I created a new folder under htdocs called phpunit so that I would have all of the unit test files in one spot. I quickly found out that I needed a copy of the phpunit.bat file in that directory, too. This file is in the PHP folder and it has the correct path to the php.exe file. I copied the example ArrayTest from the documentation into a file called ArrayTest.php and ran the command, “phpunit ArrayTest“. It worked. Now I can move on to more sophisticated unit tests.
Final Fixups
After a little searching I found that the xdebug and pdo_sqlite extenstions already exist in the extensions folder. XAMPP installs all of the extensions but only enables a couple of them in the default installation. All I had to do was to edit the php.ini file, remove the semi-colon in front of these extensions, and restart the web server.
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?
- 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.
- 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
- Create a new theme which merges Blueprint into the default phpWebSite theme.
- Fix phpWebSite annoyances.
- I will create new module templates to replace the <h1> element with the more search engine friendly <h2>.
- See if I can create a list menu template of <li> links.
- Create a tabbed menu for the new site. I want to keep the tabbed menu design from the old site.
- Change the calendar colors and layout.
- Add zebra tables, drop shadow, and ThickBox support.
- Redesign comment template to be more like copyblogger.
- 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.
- Default Blueprint
- Misty Look
- Copyblogger
- Copyblogger organic.
- Display grid
Phase 3
Convert the old data into the new phpWebSite format.
FavIcon from Pics — how to create a favicon.ico for your website
FavIcon from Pics — how to create a favicon.ico for your website
I just got finished creating a favicon from a picture and it looks good. This makes the process painless!
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.
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.
Adding RSS content to Outlook Today using jQuery
I decided to customize my Outlook Today page with jQuery. The change was pretty simple. My plan was to add the current weather forecast available from Yahoo via a RSS feed. The source for my inspiration was this post by Jean-François Hovine.
The only annoyance is that I get a popup window because I am accessing content in another domain. After a little bit of work this is what I ended up with.
Sortable and Selectable Zebra Table Widgets
I decided to add zebra tables to a phpwebsite recently and used the version from the link below.
Sortable and Selectable Zebra Table Widgets
It took me a little while to accomplish since I needed to convince phpwebsite to not strip out the <thead>, <tbody>, and <tfoot> tags. Not many people use these tags so phpwebsite removes them unless you modify the configuration. To get the table to work I used both the ID and CLASS elements on the table tag. I used both the<thead> and <tbody> tags in the table although I think only the <tbody> tag is required.
| Pos | Artist | Trackname | |
|
|
|||
| 1 | Lost In The Plot | The Dears | |
| 2 | Poison | The Constantines | |
| 3 | Plea From A Cat Named Virtute | The Weakerthans | |
| 4 | Can’t pick me! | No sir! | |
| 5 | Living Room | Tegan And Sara | |
| 6 | Can’t pick me either | Nope | |
| 7 | Fast Money Blessing | King Cobb Steelie | |
| 8 | Sore | Buck 65 | |
| 9 | Love Travel | Danko Jones | |
| 10 | You Never Let Me Down | Furnaceface | |
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.