Go Back  HTML Forums - Free Webmaster Forums and Help Forums > WEBSITE DEVELOPMENT > All Around Tutorials
User Name:
Password:
 

Reply
Thread Tools   Display Modes
  View First Unread
 
Old 09-15-2009, 03:59 PM
  #1
batterj2
Soldier (Level 11)
 
batterj2's Avatar
 
Join Date: Jan 2005
Location: Sheffield
Posts: 133
iTrader: (0)
batterj2 is on a distinguished road
James Battersby Tutorial 04: Web Browsers and Plugins

Disclaimer:
A few of these tutorials feature specific products and opinions. I do not work for any of the mentioned companies and these opinions (although shared by many) are my own. Take them as you will (visit my website for more information on my background).

04: Web Browsers and Plugins

The browser war of the 90s may be over but it does not mean there is a clear winner now. There are hundreds of different browsers out there but there are a principal 5 that you need to take note of.... and install.

Internet Explorer (IE)
This browser is from Microsoft and comes built into Windows which makes it the most popular browser by default. However it is by no means the best one out there as Microsoft don't fully comply with international web standards (you'll often hear web developers complain about it, especially between versions). Versions to worry about are 6, 7 and 8.

Mozilla Firefox (FF)
In my opinion this is the best browser available not only for casual users but also for web developers. Its origins can be found in the Netscape archives as a team broke off to form Mozilla to make the Mozilla browser where another team broke off to form Firefox. Its fast, robust, reliable and conforms to the W3C standards which makes it an ideal tool for development. It is also open source which means a massive community provides additional tools, changes and fixes for it.
www.mozilla.com/firefox/

Open Source
Programs termed as open source mean that the code that makes the program is freely available. This allows the software to be free and be supported by thousands of volunteers.


Opera (O)
Opera is a web browser from the Nordic region which a small percentage of people use. It used to come with adverts that you had to pay to get rid of but it is now going from strength to strength. Its even packaged with a BitTorrent client for larger downloads. This browser also conforms to W3C standards. Its not a bad browser - its just a lot more people prefer Firefox.
http://www.opera.com/browser/

Safari (S)
Safari is to Apple Machintosh as Internet Explorer is to Microsoft Windows. Since about 20% and above of people use a Mac we need to consider their needs. Its a fast browser that conforms to most standards but Apple does like to make the display a little fuzzy for some reason.
http://www.apple.com/safari/

Google Chrome (GC)
By early 2008 the above 4 were the main browsers to worry about and then suddenly Google decided to jump into the mix. Its new browser made such an impact that web developers couldn't ignore it anymore. For a first attempt it is a fantastically good browser but I've noticed a few strange quirks during development.
http://www.google.com/chrome


Cross Browser Issues
You may be wondering why you need 5 different applications that do more or less the same thing. The answer is Cross Browser Issues. Different browsers interpret code differently which means that you are not guaranteed that while a site presents itself properly in one browser that it will in another. Since everyone is different you can expect many different web browsers to view your website. The old (and VERY wrong) solution made by lazy developers was to detect what browser the user was using and if it was the wrong kind they would be abruptly told to go and get the right one. The best practice is to build a site using one browser, keeping to W3C standards as closely as possible, and then view your work in other browsers, fixing accordingly. You'll often hear the phrase, "Build in Firefox, test in IE" and thats exactly what you should do.


Firefox Add Ons
One of the reasons Firefox is the browser of choice for web development is the amount of extra tools that can be plugged into it (called plugins or AddOns). These will help you identify errors in your code, highlight the structure of a document and much more. The AddOns below are ones I use regularly and recommend you do too.

Web Developer
This aptly named plugin is a must have. It provides a vast list of useful functions such as highlighting specific elements, providing CSS and Javascript error catchers and even allows you to validate your code against globablly recognised standards.
https://addons.mozilla.org/en-US/firefox/addon/60

HTML Validator
This is another must have as it points out to you where in your code (that it sees at least) where you are going wrong. You can set it to just look for HTML errors or also include Web Accessibility standards as well. It has two message levels: error and warning. An error means there is something that should be fixed immediately otherwise it won't display or be interpreted properly. A warning indicates that something is incomplete or in the wrong place (it will work in most browsers but its best to fix it anyway). You want to aim for zero errors and warnings.
https://addons.mozilla.org/en-US/firefox/addon/249

Firebug
firebug.pngThis is a debugging tool that allows you to look and edit the code temporarily on the fly, highlighting the appropriate areas.
https://addons.mozilla.org/en-US/firefox/addon/1843

Screengrab
screengrab.pngThis addon is useful for presentation issues as it saves a picture of your web page (in its entirety, visible portion or selection) to your computer. This is useful when trying to show people what your web page looks like.
https://addons.mozilla.org/en-US/firefox/addon/1146
__________________
James Battersby BSc. (Hons) Artificial Intelligence, www.jamesbattersby.com
Professional Member of the British Computer Society (2005 onwards), ISEB Foundation Certificate in Software Testing (2007)
XHTML, CSS, Javascript, PHP, MySQL, MSSQL, Oracle, Java (J2SE, J2EE (Struts, Spring)), C#, Jasc Paint Shop Pro, Adobe Photoshop, GIMP, Software Testing
batterj2 is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Reply
KEEP TABS
SPONSORS
 
Boxedart

 
 


 
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
  
 
 
 



 
  POSTING RULES
 
 
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Thread Tools
Display Modes

Forum Jump

 

All times are GMT -5. The time now is 04:15 PM.

   

Mascot team created by Drawshop.com | Web Hosting

Powered by vBulletin® Version 3.6.7
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.

Server Monitoring by ENIACmonitor 0.01
HTMLforums.com © Big Resources, Inc. Web Design by BoxedArt.com
vRewrite 1.5 beta SEOed URLs completed by Tech Help Forum and Chalo Na.