Thursday, November 18, 2010

Get hired as a web designer in 5 steps by learning the essential tools employers are looking for.


So your a print designer who was just let go due to a failing magazine and newspaper. You have plenty of print experience but lack the web knowledge of how to get started. Your wondering to yourself...what is it that top notch web firms are looking for??

  1. Learn html basics, and how web pages go together. Why tags start with brackets, and end with a trailing slash. < > Also learn how javascript and css styles are  externally embedded. 
  2. Learn CMS systems and how to install them. Start be reading up on the top three Open source CMS systems: Wordpress, Joomla, Drupal. They'll open the doors to new opportunities because most every design firm knows that building off these platforms is a key essential to quick, easy, updatable websites. 
  3. Learn jQuery, MooTools, or Scriptaculous Javascript libraries. These libraries make animation, interactive design and effects very easy for a competent web designer. They have a steep learning curve sometimes, but once you understand one, they will all start to make sense. They're goals are all the same: Create the best viewing environment using a browser and object oriented programming. Dive in and try to understand the basics. Whats the difference between an object, a variable, a string, a function and how they are combined in scripts. Think back to your math days.
  4. Learn SEO / Google Analytics combined with Webmaster tools from Google AND Yahoo/Bing. Most people are fearful of SEO. They always think there is a trick, or some special program to be an SEO person. There's not. It's all about putting tags in, and using title attributes correctly. It's a strategy, not a programming language in itself. Google supplies multiple sources to get you started. Be smart and make sure to spend plenty of research time. Still lost?
    Start here:
    http://googlewebmastercentral.blogspot.com/2008/11/googles-seo-starter-guide.html
  5. Understand the difference between php/asp, html, css, javascript, and mySQL/SQL. What are all these abbreviations?? What do they mean? Knowing what they mean, and how they are used is an essential part of web design. If you look at any of those abbreviations and shrug your shoulders, go look them up. Don't be lazy. LOOK IT UP. There are more than enough resources to get started. Understanding the integration of all these code languages will make you a strong web designer. 

Tuesday, November 2, 2010

Setting styles based on browser settings

When you are designing for the net, you always have to keep in mind that different browsers display things differently. Sometimes a slight change may be needed according to what browser you are viewing the page in. When I run across this instance, I sometimes use a browser detection script to let me know which browser I am using. Below is a link to the Browser Detection script that I usually use. It's open source and a great script for doing a number of tasks.

http://caseygovero.com/CaseysSite/Scripts/Browser_Detect.js

Let's say you wanted a simple display somewhere to let users know what browser they are using. It's not entirely useful in this respect, but this will give you an idea of what you can do with the script.
Note: The beginning and ending script tags have been removed. You will need them for this to work in your html file. If you are new to javascript, read more here: 
http://www.w3.org/TR/REC-html40/interact/scripts.html#h-18.1

First off, we embed the script in our html page using the external script. The second part is a very common "if" statement. This statement allows us to basically ask a question using script.

if(BrowserDetect.browser=="Firefox")

Are we using firefox?

if(BrowserDetect.browser=="Firefox"){document.write("Your browser is"+BrowserDetect.browser)}

The second part of the script is what actually does the action. document.write is the javascript method for displaying text strings. You could place anything here, but in this instance I've decided to display text from a string. Using the browser detect class, we can add styling dependent on what browser you are using. This applies to other browsers as well by changing the if statement. 
if(BrowserDetect.browser=="Chrome")
This example checks against Google Chrome. If you look at the script here, you will see the available browsers:
http://caseygovero.com/CaseysSite/Scripts/Browser_Detect.js
Try it out for yourself. It will display a message if your in firefox, but not in any other browser. I'm sure you guys can use your imagination and find a use for the script!