Devit!

If your a developer at heart and trying to make your own website without the help of your talented designer(s) then sometimes just getting some inspiration is all you need to get started.

Now that you have an idea - you need the right resources to get the picture in your head expressed by utilizing HTML and CSS.

It’s very important when creating a website that you start out with a visual idea, then a plain HTML page that uses CSS to express your idea.   Once you have a your HTML page with valid CSS you can use your programming knowledge to create tools and features that drive your site.

Working with CSS can be a difficult task if you don’t have a vast amount of experience.  For some inspiration and great CSS help checkout this collection of useful websites:

Some of the best CSS resources on the web

Whenever your browsing the web I’m sure you’ve run into many websites that have horrible loading times. If your sites are slow this can impact your customers and your business.

Here’s some helpful hints to get you headed in the right direction:

1) Host any dynamic website on apache whenever possible - it will run fast and handle heavy loads with ease
2) Use tools like YSlow from Yahoo! to get suggested speed fixes on all your sites.
3) Build caching into your custom web sites and utilize caching in any existing frameworks when provided.
4) Take the time and energy to go through both your apache httpd.conf and your php.ini (if applicable) and verify you only have necessary features enabled. Adding extra bloat to your server will slow it down - and make handling heavy amounts of traffic more difficult.
5) Monitor your log files for software bugs and when you’re content with a running site - disable all non-critical logging as the server error logging can cause some delays.
6) Use the built in apache benchmarking tool called ab - you can’t go wrong with this tool.
7) Get in touch with a Professional for some additional tweaks, testing and benchmarking. Typically a small investment can leverage large gains in performance.

Starting with the suggestions above you should be well on your way to reducing your page response times by at least 50%.

Converting data from one format to another is no easy job. Character sets, data types, collations and proprietary commands complicate things to no end.

But what I wanted to do was simple. I had a simple 2 column list of IDs with a text value. Seemed simple enough, export as CSV and import into MySQL. My first choice was to try and use phpMyAdmin for the import. phpMyAdmin provides a fairly simple import procedure which allows the import of a CSV file into an existing table. You can select the delimiter, record separator, escape character and field enclosure character. Excel exports with no field enclosure character (usually double quotes) so I figured I would just blank it out and the import would be flawless. But phpMyAdmin didn’t like having no field enclosure character and threw an error. Seemed like a simple problem to fix, just modify the Excel CSV output and we’re good.

And that is when I arrived in hell. Excel gives no (not 2, not 1, none!) options for CSV export. What they give you is all you get. I guess they figure you will only output number based spreadsheets to CSV but the lack of field enclosure wreaks havoc on anyone trying to output data with a comma in it. How are you supposed to know if the comma is part of the field or the field separator? My simple export from Excel to MySQL suddenly became something that was virtually impossible.

I’m not sure if Microsoft is trying to dissuade use of the CSV file format but it sure seems that they are not making it easy. I know we live in a world of XML but CSV is still used as a workhorse for those simple import and export tasks. It seems far more baffling when Excel’s CSV import features are actually quite robust.

In searching high and low, I found a truck load of small utilities that claimed to convert every format under the sun to MySQL. Each one costing at least $30 with no real track record or history. I’m not balking at the $30 but if I’m going to pay some money I want to be sure the tool is going to do what I need it to.

Being a PHP developer I knew how easy CSV files were to manipulate in PHP so I decided to see if anyone had come upon the same problem. At last some answers! I found PHP CSV Importer 3 on HotScripts. This small php script makes the process of importing a CSV file into MySQL simple as ever. It steps you through selecting the CSV file, entering the MySQL database information, select the table to import to, seeing a preview of the data before import. It even allows you to map the various CSV columns to MySQL table columns.

I’m relieved to finally find a worthy solution to the simple task of importing a CSV file into MySQL.

There are many ways to do rollover menus. Some people would fight to the death over their favourite way to do things. I’m not going to argue this is the best way but the simplest when using the CMS package Joomla.

This tutorial requires the Extended Menu module (which I recommend by itself as essential for any Joomla install).

Menu Images as sprites

Sprites are becoming a preferred method for storing small graphics to be displayed on a web page. It is basically taking several graphics and merging them into the same file, then extracting them by referring to specific pixel co-ordinates. In terms of the web it can help to reduce image file sizes and more importantly http requests. For more info check out this article about CSS Sprites.

I’ve decided to use this technique to store the different states of a menu image. In-active, rollover and active. As you can see I’ve put each menu state in the same file as exactly the same size, one on top of the other. The measurement that will be important later will be our height which is 44 pixels.

Once you have created your images, upload them into the /images/stories directory of your Joomla install. This is where you can select images for you menu items.

Setup menu

In the Joomla administrator, go to the menu you have created for this effect. Open up the first menu item. On the right hand side you have the option of selecting a menu image. From the drop down list, select the menu image you saved previously and then click save.

Repeat for each menu item you want to be represented by an image.

Extended Menu Module

Next is to configure your Extended Menu module in Joomla. The settings we need to take note of are the following:

1. Change “Menu Name” to the name of the menu you have setup.
2. Menu style should be “Flat List“.
3. Set “Show Menu Icons” to “Image Only (Linked)“.

Click save to save your changes.

At this point if you view the page with your menu, you will see all 3 button states of each menu item. In order to only see the current menu state we need to apply some CSS styles.

CSS Menu Styles

Open up the CSS file for the specific Joomla template you are using and add the following (because my menu is in the header I’m preceding styles with the header ID):

#header ul li {
overflow: hidden;
height: 44px;
float: left;
}


First style here is setting the height of our button. This is essential so that we’re only seeing one state at a time. Then we set the overflow to be hidden. This ensures the non active button states are hidden from view. Floating each item allows us to create a horizontal menu.


#header ul li a {
display: block;
}


Setting the anchor to block ensures that the entire surface area of the link will be clickable. It also makes sure our button fills up the entire space we’re allotted it in the previous declaration.


#header ul li a:hover {
margin-top: -44px;
}


This is the magic part. We’re setting our anchor hover state to slide the image up revealing our next portion of the sprite. We have to do this on the anchor tag as IE6 only works when the hover state is on the anchor tag.


#active_menu {
margin-top: -88px;
}


The Extended Menu module adds an id tag to whichever menu item is active. This allows us to specify a different offset to show the active image state.

And that’s it! With a few simple lines of CSS and our Extended Menu module we’re able to create effective rollover menus with ease.

We seem to find this though process to those who are just realizing how influential Google and other search engines can be to their business. “The higher we rank in Google the more hits we will get meaning more sales.” And then, “How can we rank higher in Google?”. After giving a brief insight into how a search engine works, through algorithms, we come to the final question. “Is there a software package than will optimize my site for the search engines to get me a higher ranking?”

The answer of course is a big NO. To answer why we have to delve a little deeper into how a search engine works. Search engines use specific algorithms (mathematical formulas basically) to determine which sites rank higher than others. Keyword frequency and incoming links are examples of criteria that might have an impact on ranking.

With this in mind think of the manipulating power you would have if you could reverse engineer those algorithms. In fact that is what many found they could do in the early days of search engines. But this very fact completely undermines the usefulness of a search engine. Instead of getting results that are most relevant, you are getting search results of the sites who had reverse engineered the search engine and manipulated their content to show up first. This is where you had sites with white text on a white background just to rank higher (just to make it clear, white text on white background will get you blacklisted as an SEO spammer so please don’t do it!).

In fact I believe that the downfall of many of the biggest search engines of that era was because of this very fact. Their users were not able to find what they were looking for because the results were so manipulated.

And now we come to the crux of a successful search engine - absolutely no one can know the algorithm being used to find search results. It is rumored that even at Google, their is no one person who really knows the full extent of how their search algorithm works.

Therefore if someone is advertising a program that can rank your site higher on Google, don’t buy it. If someone guarantees that they can rank your site #1, don’t believe them. All that can be done is a best guess. For advice and help when looking into SEO, find someone with experience. Only after working with many different sites can you even begin to have an idea of what affects search engine ranking.

Here’s a great article on just this from Highrankings.com

I’m not sure we’ll ever get there but HTML 5 promises to add a few extras that web developers have been craving for a while.

One of the main features of the new HTML 5 specification would be to add a number of tags that help to describe the content of web pages. For ages we have been using div tags with specific id tags (<div id=”header”>) to describe various elements. HTML 5 proposes adding header, footer, nav, section, article and aside tags. For design and display purposes the advantages aren’t really tangible, but for semantic data descriptions it is helpful. It becomes more obvious when mobile devices such as cell phones and blackberries are used more frequently to browse the web. Content can be broken down and displayed different in various different contexts. Yes, this is possible now through alternate style sheets but having additional tags will help make this process less painful and more efficient.

Don’t get too excited as the work is far from finished. In fact according to the referenced article, estimates suggest the standard will be finished in 10-15 years! In computer years that is several lifetimes. Who know, by that time the current state of browsers and content may be obsolete.

A Preview of HTML 5 at A List Apart

There are very few instances I can think of where re-installing you entire operating system can be a fun painless process. No matter what it seems you always miss something and lose some data. It seems like Firefox developers had the same gripe and did something about it.

In order backup/save/move all Firefox settings such as bookmarks, extensions, saved passwords - everything that makes using Firefox a good experience - you only need to pay attention to 1 folder. On windows this folder is located in “documents and settings/your username/application data/Mozilla”. For details follow this link on “How To Manage Profiles“.

If you’ve seen this error, you’ve probably already spent some time trying to resolve it. We only encountered this error on our test server and it turned out the missing piece was a web.config setting. Also the following piece of code at the top of a page seems to alleviate some AJAX refresh bugs.

1) Make sure this in is your web.config

   <httpModules>
      <add name=”ScriptModule” type=”System.Web.Handlers.ScriptModule, System.Web.Extensions,               Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″/>
   </httpModules>

2) Add this to the to the Page declaration if you’re experiencing some page refresh bugs

   enableEventValidation=”false”

If you’ve found alternatives to this problem or our suggested solution isn’t working for you, please feel free to comment below.

Lists for development tools are often posted with the top 10, 15 or 25 tools for a particular task. Cutting through those list we’ve produced a list of tools that we think will save you time. Whether you work for an organization or you’re a freelancer these tools should help you succeed. If you think we’ve missed some feel free to post comments with links to tools you’ve found save you the most time when delivering high quality code. Web Development wouldn’t be where it is today without these tools below and many others available online.

1. Firebug (Firefox Extension - Can’t live without it)

2. HTML Validator (Firefox Extension - Based on HTML Tidy , Helps catch your mistakes)

3. Google Suggest (Often one of the best tools for solving a problem or finding an alternative solution)

4. Umbrello UML Modeller (Opensource - Plan ahead, save time!)

5. ColorZilla (Firefox Extension - Grab any color on any website with the click of a mouse)

6. Pearl Crescent Page Saver (Firefox Extension - Take screenshots, various options)

7. VMware (Virtual Servers - test in any environment)

8. SEO for Firefox (Important SEO information in google and yahoo search results)

9. Notepad++ (Lightweight text editor supporting multiple programming languages)

Switching gears from strictly software development topics, we’re going to look at the benefits of working in London, Ontario. rtraction calls London home and has enjoyed growing it’s business in The Forest City (is the nickname for London). London has a lot to offer to both businesses and employees alike. The city has the infrastructure available to support Information Technology companies and there are many organizations that are designed to help businesses flourish.

Organizations such as Techalliance, London Chamber of Commerce, The London Economic Development Corporation and many more. There are many cultural events and attractions making London a very exciting, vibrant city to live in. If you’ve recently moved to our city or are considering it you may want to check out the Newcomers Club.

Some of London’s most successful companies revolve around software development:
Digital Extremes - developers of Unreal and Unreal Tournament, Dark Sector, and Epic Pinball
Big Blue Bubble - developers of Mobile and Console games
Info-Tech Research Group - is a global leader in providing IT research and advice
Activplant - a leader in enterprise manufacturing intelligence
Autodata - provides tools for the automotive industry

For more information about London, Ontario try these sites below:
The City of London
Ambassador London

For a look at our heritage and other attractions try these sites below:
Landmarks London
Tourism London
London Arts Council