a winnipeg website design company.
a winnipeg website design company.
Wednesday, November 26th, 2008
A couple days ago I installed Dreamweaver CS4 and have been pleased with some of the upgrades I have seen. The following are a couple:
This is a nifty feature to keep from having to open lots of tabs for each one of your files. Dreamweaver now has the smarts to detect includes and dependent files in your HTML / PHP files. For example if you open up a PHP file that includes a header, footer and links to some CSS and JavaScript. Instead of opening these files they are automatically shown and allow you to easy switch between them.
Related files header.inc.php, and footer.inc.php are automatically shown
Ever get lost in your code and are not sure what styles you all have and what styles are actually applying. Dreamweaver now has a nice code navigator that pops up and shows you details of what styles are applying to an element. It combines all the CSS files you have included and tells you exactly what selectors and properties are applying.
This is something that really frustrated me in CS3. Creating JavaScript was not real easy as no code hinting or debugging mechanisms where really installed. CS4 fixes all those problems though. This of course is because of the huge boom related to JavaScript with the introduction of JQuery and the AJAX technology.
Dreamweaver now supports code completion for JavaScript
The problem I sometimes have with these huge IDE’s is that the window in which you have to code is small. A lot of the interface is full of clutter such as handy drag-n-drop functionality that I never use anyways. Really the only reason I consider using an IDE is for code completion and code highlighting. I’ll leave all those drag and drop features for the newbie’s.
CS4 addresses this issue nicely by letting us define what type of workspace we want. This can be a coder, web designer, or an application developer. It then adjusts are workspace so that it gives us only the functionality we need to complete our job.
So do I think Dreamweaver has fixed everything? No. One big thing I wish they would do is allow for textmate (Mac OS only) like snippet entry. Something like typing – for [TAB] to get a for loop is much handier than typing it out every time. I guess we will have to wait for that!
If you really want to try this feature out, the closed to a windows alternative I have found is the E-TextEditor.
Let me know what you think. Dreamweaver CS4 an improvement or a step backward?
Tags: dreamweaver
Posted in Software | No Comments »
Tuesday, November 25th, 2008
I have attempted something new, as this is my first screencast ever! As expected you may have to bear with me for a bit while I get used to it. Please feel free to comment on suggestions I can make. Below you can find links to the starting files, as well as the complete end product.
Starting Files
Complete Files
Below is a text version:
Today we will be coding a fully-functional, cross-browser hover menu using CSS and Javascript.
Let’s go to our index.html file and create some mark-up which we can use for our menu.
<div id="globalNavDiv">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
</ul>
</div>
These are the links that we will mouse over and thus causing the submenu of that particular link to show up. Let’s create the mark-up for those submenus right under our globalNavDiv.
<div id="submenu1">
<a href="#">Menu Item 1</a>
<a href="#">Menu Item 2</a>
<a href="#">Menu Item 3</a>
</div>
<div id="submenu2">
<a href="#">Menu Item 1</a>
</div>
Now take a look at it in the browser. As you can see it isn’t looking too pretty yet, but it’s a start. We now need to style our elements in our external css file. Open up our styles file and begin entering the following.
#globalNavDiv ul
{
border: 1px solid #a3a3a3;
}
#globalNavDiv li
{
display: inline;
padding: 0px 10px;
}
#globalNavDiv li a
{
color: #575757;
font-size: 1.2em;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
}
#globalNavDiv li a:hover
{
color: #353535;
}
#submenu1, #submenu2
{
background-color: #820024;
border: 1px solid #a3a3a3;
z-index: 1000;
}
#submenu1 a, #submenu2 a
{
border-top: 1px solid #fdd3df;
display: block;
color: #fdd3df;
text-decoration: none;
padding: 5px 15px 5px 5px;
}
#submenu1 a:hover, #submenu2 a:hover
{
color: #ffffff;
}
Now take a look in the browser once more. As you can see we have now styled our main and sub menus. The problem is that our submenus are not in the right position. Let’s change that now:
#wrapperDiv
{
position: relative;
}
#submenu1, #submenu2
{
position: absolute;
top: 0px;
}
#submenu1
{
left: 0px;
}
#submenu2
{
left: 0px;
}
Now we have absolutely positioned each of our submenus to the top left corner of our wrapperDiv. Let’s use firebug to align our submenus to the bottom of our main menu links. This ends up being 20px. Let’s change this permanently in our styles file.
#submenu1, #submenu2
{
top: 20px;
}
Continue using firebug to specify a left value to each.
#submenu1
{
left: 50px;
}
#submenu2
{
left: 120px;
}
Perfect! Now the one problem we still have is that the divs are shown by default. Lets hide these divs now:
#submenu1, #submenu2
{
visibility: hidden;
}
The only thing left to do now is create the JavaScript code and attach it to the HTML. First lets create an array with all the ids of the submenus
var menuArray = new Array(); menuArray[0] = 'submenu1'; menuArray[1] = 'submenu2';
Then initialize some variables we will use in our functions.
var globalObject = ''; var isActive = false; var ourTimer;
Now we will need to create 4 functions; one to show and hide the correct div, another to start our timer and hide the menu when it ends, another that physically hides the menu if it’s not active, and lastly one that checks if the mouse is still over the div.
function showhide(obj, onlink)
{
targetObject = document.getElementById(obj).style;
globalObject = targetObject;
if(onlink)
{
clearTimeout(ourTimer);
for (i=0; i < menuArray.length; i++)
{
var tempObject = document.getElementById(menuArray[i]).style;
tempObject.visibility = "hidden";
}
targetObject.visibility = 'visible';
isActive = true;
}
else
{
isActive = false;
layerTimer();
}
}
function layerTimer()
{
ourTimer = setTimeout("hideMenu()",0750);
}
function hideMenu()
{
if( !isActive )
{
globalObject.visibility = 'hidden';
}
}
function layerCheck(flag)
{
if(flag)
{
isActive = true;
clearTimeout(ourTimer);
}
else
{
isActive = false;
layerTimer();
}
}
Now let’s attach the above functions to our HTML file. Create a function that triggers when the page loads and assigns each submenu div to fire the layerCheck when moused over or moused out.
window.onload = function()
{
for(var i=0;i<menuArray.length;i++)
{
var id = menuArray[i];
var e = document.getElementById(id);
e.onmouseover = function(e)
{
layerCheck(true);
}
e.onmouseout = function(e)
{
layerCheck(false);
}
}
}
Now lastly we need to trigger our showhide function when each of our main links is moused over or moused out.
<li><a href="#"
onmouseover="showhide('submenu1', true); return false;"
onmouseout="showhide('submenu1', false);">Menu 1</a>
<li><a href="#"
onmouseover="showhide('submenu2', true); return false;"
onmouseout="showhide('submenu2', false);">Menu 2</a></li>
Now peak over to both Firefox and Internet Explorer 7 and see that we now have a fully functional Hover Menu.
Tags: css, html, JavaScript, screencast
Posted in Web Programming | 2 Comments »
Tuesday, November 18th, 2008
When we think of CRAP we usually use it in a negative way. Today I will put a positive spin on the acronym by breaking it down into 4 design concepts that you should keep in mind when designing anything, not just websites. They are Contrast, Repetition, Alignment, and Proximity.
Contrast is the process of making different elements stick out from the surrounding elements. If the type, size, and color are not the same – make them VERY DIFFERENT. As a previous instructor I had put it – “Don’t Be a WIMP!”
Contrast is most often classified the most important of all the following aspects, as it is what gets the reader to look at the page in the first place.
Having elements repeated across your website helps establish unity. These elements do not have to be exactly the same as they can have slight variations and different shapes and sizes.
For example, take the underline out of your logo and use it as a horizontal rule. Maybe take the hat of your comic character and use it as a bullet. There are many creative and unique ways to repeat elements to continually give the user a good feel about the layout.
Alignment is something that should always be taken into consideration. Every element you put on your page, poster, or business card should be put in the proper place. It should not be thrown onto the page to merely take up space. Aligning elements to other elements gives them a visual connection and guides the eye of the reader/visitor.
Center aligning everything is a sure sign of an amateur. Center align has its place, but the problem with it is that there is no hard edge for your eye to follow. Now if you right-align your information, the right edge stops at the same place on every line. This gives your eye an imaginary line which gives strength to the layout.
When items relate to each other they should be placed near each other. You shouldn’t have your address in the top right corner, and your zip code in the bottom left corner. They should be grouped together in order to help the visitor get the information they need quickly with a simple scan.
For example, when you create a list; elements are placed one under another. Imagine if these related items where all over the page. Would it be as easy to see what is all in the list?
Take a look at the following image and you will notice how much of a difference it makes to apply the above principles.
Tags: crap, design
Posted in Uncategorized | No Comments »
Monday, November 17th, 2008
Unobtrusive JavaScriping is a very crucial part of designing a website. As you should know there are 3 major layers of the web, and they should all be separated into external files. You have XHTML (structure), CSS (presentation), and JavaScript (behavior).
Separating these three pillars of the web will go a long way towards maintainability of the code you produce. The reason I am focusing on the external JavaScript portion is because I find it one of the more difficult. It takes a lot of discipline to stay away from putting even handlers into the code. Today I will be talking about the concept of unobtrusive JavaScript, as well as provide you with a tool that will make your life easier.
Unobtrusive JavaScript is a process by which you make your JavaScript as user-friendly, accessible, and maintainable as possible. It supports graceful degradation in older browsers, and provides separation of behavior from structure. The following are some simple rules I have come up with:
Using those inline event handlers are so handy, but really it is just as bad as using the dreaded style tags within your code. Remember that we want to keep things separated as best we can. The following is how you can add a simple event handler to a link in an accessible way:
<a href=”login.php” id=”login” title=”Login to Admin”>Login</a>
// when our document is loaded
window.onload = function()
{
// check browser support
if(!document.getElementById){ return; }
// get element
var e = document.getElementById('login');
// when our element is clicked call a function
e.onclick = clickHandler;
}
function clickHandler(e)
{
// fancy ajax code entered here
alert('JavaScript took over the link');
// cancel the default browser action
// This works in Firefox - keeping this example simple
e.preventDefault();
}
Now the JavaScript portion can be put in an external JavaScript file and we can keep our HTML nice and clean.
Beginners to web design often like the power of JavaScript and they develop using it for everything. As with any programming language you need to use the proper tool for the job, and whether or not you are using it for the “cool” factor or if it will actually help the user. Links such as the following are big no-no’s and show that the user is assuming JavaScript is enabled:
<a href="#" onclick="popup('web-development.html');return false;">Web Development</a>
<a href="javascript:popup('web-development.html')">Web Development</a>
Do you know what happens when JavaScript is disabled? You guessed it nothing. The visitor is left thinking, “Why does this link do nothing?” The following is a better way of handling the above:
<a href="web-development.html" onclick="popup(this.href);return false;">Web Development</a>
Now if JavaScript is disabled, at least the user will be redirected to the appropriate page even though it might not be in a pop up. You may be wondering why I used the onclick attribute… It is solely to cut down code in this example. You know that this should be put in an external JavaScript file.
The other day I found this nifty Firefox tool that allows you to check if there are any problems with obtrusive JavaScript within a page. It shows the number of inline events, “javascript: links”, as well as many other useful features to keep you disciplined. Please visit the Obtrusive JavaScript Checker plug-in page.
Tags: JavaScript, unobtrusive
Posted in Uncategorized | 3 Comments »
Thursday, November 13th, 2008
Creating a Google map is almost a requirement in every website I design these days. Google maps have been the showcase for AJAX ever since it was coined. Google Maps are interactive maps that you can embed within your web page using Google’s already built API.
When I began embedding Google Maps in my web pages, one of the clear limitation I found was needing to specify a latitude and longitude. This was the only way I knew how to use the maps. This worked fine for a little while as I mainly used them on contact forms with fixed places. I found sites that helped me identify a latitude / longitude and then I plunked it in the code.
Eventually this theory didn’t work as now I needed to implement this Google map to use dynamic addresses to find the right location. Remember, all I knew was to implement it using lat / long coordinates. This would force me to store these two values in a database. This of course isn’t very user friendly for the client I am setting up the administration for. They have no clue what these values are, and why should they? They want to just enter the address.
This is when I found out that Google Maps offers a simple way for which to translate an address into its corresponding lat / long coordinates. The theory is called Geo Coding. Here you can view Google’s Geo Coding Documentation. This in the end is a much more practical way of dynamically creating a Google Map. You can now pull the address from the database and insert it into the JavaScript code. Below is an example (I have assumed you have a Google map API key, as well as included the appropriate base script)
var map = null;
var geocoder = null;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(49.843774, -99.961166), 13);
geocoder = new GClientGeocoder();
address = '< ?php echo $address ?>';
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert("Google map for "+address + " could not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}
}
Now all that is needed is for you to place the container somewhere in the body of your HTML:
<div id="map_canvas" style="width: 300px; height: 300px"></div>
Now the other benefit you see is that you can reuse this Google Map code whenever you need to, and you don’t need to find out those blasted lat / long coordinates!
Tags: google maps, JavaScript
Posted in Web Programming | No Comments »
Twitter
Follow me on Twitter to keep up to date!
RSS Feed
Keep up with all of our updates by subscribing to our RSS feed!
FaceBook
Join our group on Facebook and become a fan of us!