Sunday, February 22, 2015

Lab 4 - Part I & II - FishCreek Web Development

Part I – Coding the Fish Creek Website website

HTML/CSS Validation tests: 
I tested my updated code with the HTML and CSS validators with good results. HTML validated with 1 error. I had a stray tag in the head, which was easily fixed because the validator indicates exactly where the trouble is. CSS validated with no errors on the first run.

Browser compatibility: 
I tested the code in Chrome, Firefox and Internet Explorer. I don't own a mac, so I wasn't able to test it in Safari. The page displayed the same on all browsers and I wasn't able to find any functional problems. Even the iframe I embedded was displaying the same place and functional! I suspect that this type of testing would turn up some snags if a page were using more complicated features. I noticed in the W3Schools site there are always tables showing what browsers support which features.

Part II – Web Development Tools 

After some research, I have selected a few browser extensions that would be essential helps for web development. 

For Firefox: 
Firebug is the most comprehensive developer tools add-on I found, and it is recommended in many articles as a must-have. It allows you to examine the HTML and toggle CSS elements of a page in real time on the same screen. There are many additional plug-ins you can add to get additional functionalities
ColorZilla is a colour tool with a number of handy features. You can use the eyedropper to get the colour reading of any image or text by simply hovering over it. The code is automtaically copied ot the clipboard, and you ahve the option to save colours as favourites as well. It also have a pallette tool and gradient generator which might come in handy when designing a colour scheme. 

For Chrome: 
DevTools is not technically an extension since it exists natively in Chrome, but it must be mentioned here because it is so essential. The functions in DevTools are essentially the same as those in Firebug for Firefox. This page outlines the features of the Elements panel and introduces keyboard shortcuts as well. 
Web Developer Checklist is an extension that quickly scans your site for violations of best practice and outlines them for you. 
Check My Links is another quick one that has the capacity to save lots of time. This extension scans over your page and tests all the links. Working links are highlighted in green, and broken links in red. 

For both: 
WebAIM has a nice introduction to the key features of the Web Developer Extension by Chris Pederick. When I first added this extension and tried it out, I wasn't impressed because the features were not intuitively easy to find or activate. After finding this tutorial, I can see there are quite a few handy features available. I think the extension might deserve a second look for these advanced features. 

No comments:

Post a Comment