Introduction to general web development

You see the same questions being bandied about in every developer forum you vist. I figured it might be a decent idea to try and get a collection of answers to the more common queries in one place and combine it with a general introduction to web development.
If you’re just starting out in Web Development the first place you should be looking is the Opera Web Standards Curriculum at http://www.opera.com/company/education/curriculum/

Read every link they provide. If you don’t understand something they are talking about then go and research the topic until you do understand what they’re talking about. What Opera have provided is a fantastic resource that represents the minimum standards you should have to try and be a web developer.

I’ll say this again so there’s no misunderstanding:
These are the baseline by which developers should be measuring their knowledge.
If you do not understand the principles and ideas presented in the Opera Web Standards Curriculum then you are at a serious disadvantage in the world of web development and you should make the appropriate decisions regarding that deficiency. This means:

  • Being aware you will more likely fail to match client requirements
  • Being aware you will be less likely to budget project appropriately
  • That you will need to spend a great deal of time educating yourself
  • That you should be pushing for appropriate level projects (don’t accept clients with higher expectations than you know you can deliver)
  • That you should be charging an appropriate market rate for your knowledge (if you don’t know a lot you shouldn’t be charging a lot)

Building yourself a development environment.
Your development environment is a local/controlled environment in which you can develop and tinker with your clients projects without impacting on live, production environments. It is also a place you can develop your own personal projects or just tinker with ideas that intrigue you at this particular time. Your environment should consist of a server (such as Apache or IIS), a backend language (such as PHP or python) and a database (such a mysql or sql server). For the rest of this post, where technology is specified, I will be discussing PHP, Mysql and Apache.

If you’re just starting out and you have a broad range of clients you can generally use whatever development environment you feel most comfortable with, for example XAMPP, EasyPHP or anything else that’s lets you run a controlled server that can host your development files. Some people feel comfortable installing apache, a scripting language and a database themselves, some people prefer to utilise a pre-packaged version such as XAMPP.

Once you start getting regular clients however the role of your development environment starts to change. You can still have your own environment for your projects, however you should also take the time required to set up a development environment as close to your main clients live environment as is possible. This means making sure that you use the same technologies, same versions and same add-ons/plugins that are part of the client environment. You do this so you can minimise the nasty surprises that occur when you move a project from development to their live server. This will mean you will likely have multiple build/test environments for different clients.

Starting a new project
When you start a new project you should determine the appropriate level of technology to use. When you’re first starting out, for example, it’s unlikely you’ll be dealing with projects that require utilizing the complexity and added educational overhead of a framework. However, due to the fact that using frameworks helps promote good code styles, you should be endeavouring to reach the point of being able to use a framework in your projects as quickly as possible.

For minor projects though, as I said, a framework may simply be unnecessary, in which case you should have a series of template files that allow you to start each new project as quickly and consistently as possible. I keep my template package on googlecode which means that at any time, on any internet ready computer, I can use SVN to download a fresh, new project ready for work.

My template package consists of the following files and folders (my css structure is taken from the ‘Boilerplate CSS’ framework):

  • css/
    • print.css (My ‘print page’ css styles)
    • screen.css (Site specific css rules – also imports the lib/ css files)
    • ie.css (Css rules specific for IE)
    • lib/
      • forms.css (Css rules specific for forms)
      • plugins.css (Imports any currently required plugin css files)
      • reset.css (Browser reset file to give a consistent baseline)
      • typography.css (Css rules specific for typography)
      • plugins/
  • js/ (Empty initially but likely to be needed).
  • index.html (Blank page with basic semantic markup and doctype information, mine also includes the required code to import the css files as well as includes the jquery framework and UI from googlecode API)
  • standard_content.html (A page that contains examples of every single available html element, from <a> and <ABBR> down to <ul> and <var>. This is the page that lets you know your design hasn’t missed something when you open it up and see how the CSS affects it).

You may find it useful to have templates done up with barebones markup and css for representing the more common layouts you use. What I’ve presented is just an example – you should add to yours whatever you feel makes your projects get started faster.

Your browser
For the most part you’ll do your development in Firefox as it provides the greatest add-on support for developers. You should test in all major browsers and you should mention in client contracts what they can expect from you in terms of browser support. I cannot stress enough how important it is to have this information in your client contracts. Try including Yahoo’s graded browser support table (http://developer.yahoo.com/yui/articles/gbs/) in your development process.

Testing in browsers
You should have few problems getting older versions of most browsers as required. The obvious a major exception is Internet Explorer 6. For most browser testing this site http://www.xenocode.com/browsers/ may be of use.

Add-ons for Firefox
The reason Firefox is the developers browser of choice is due to the extraordinary add-on that are available for it. As a developer here are a few that you may find useful and represent my first few minutes of downloading whenever I’m given a fresh computer.

  • Firebug – You should know this one
  • Web developer toolbar – Ditto
  • Selenium – Allows recording of browser macros that make testing of web applications much easier
  • Colourzilla – In browser colour picker
  • Measureit – In browser measuring tool
  • Diigo bookmarks – I find Diigo to be by far the best social bookmarking tool – use your own if you want
  • Accessibility Extension – Hints and tips and useful extensions to make sure your web pages meet basic accessibility guidelines
  • HTML validator – Shows you just how crappy your markup is
  • Pencil – In browser wireframing
  • Fangs – Screen reader emulator, again for help with accessibility
  • Inline Code Finder – Highlights ugly inline code such as styles and javascript that should not be hidden within the markup but rather handled through progressive enhancement.

Other useful debugging tools

  • Fiddler – Sniffs information sent to and from the browser, useful because it can be made to work with all browsers.
  • IE Developer toolbar – IE8’s version is actually useful, but even adding it to 6 makes life just that little bit easier

Your Editor
Is a personal decision. Use what you feel comfortable with.

Resources
This section could easily grow out of control very quickly, I’ll include a few of the more practical links I’ve found that present the bare minimum you should be keeping track of.

Category: Web Development | Tags: Comment »


Leave a Reply



↑ Back to top