One topic that confuses many is search engine optimization: SEO. So fuzzy is this term that many people have a difficult time explaining it. A simple definition of SEO is that it is the process of creating a website in a way that will show it high on the search lists for sites like google or bing. A more practical definition is that it is a method of writing a website so that it will show higher on the list then your rivals for the search terms you wish to target.

To a programmer, it means writing clean code and including the correct tags with the proper parameters. To a site owner, it means having a fundamental understanding of what people search for in regards to to you services. You can have the best bakery in all if Oxnard, but if you don’t mention ‘cakes’ on your site and in your keywords, then you will may be overlooked by someone searching for ‘birthday cakes in Oxnard’!

Meta tags: the basics of SEO

The first step in SEO is usually to male sure you have meta tags. But what is a tag? A tag in html is similar to a sentence: it is a complete idea that the computer understands. Unlike English that ends a sentence with punctuation like a comma or a period, a tag has punctuation at both ends. In html, this punctuation us the less than < and greater-than > signs. These are also referred to as brackets.

So basic meta tag would look like this:

That’s a good start! Now its also good practice to add a description meta tag. Its similar to the keyword tag, but in the form of a sentence. Google sometimes uses this as the small black sentence underneath the blue title link in its search lists. Its also used as a reference to the content to your site. A for our bakery, a decent example would be:

Dating content is also important when it comes to SEO: older websites with constant fresh content are ranked higher then younger sites. For this reason you may want to use the two following meta tags below:

The first ones instructs sites like Google to revisit your site after 30 days. It helps if you have new content by that time for the machine to consider your site fresh. Dating your page also helps keep it relevant. News articles with a more current date are more pertinent to a user then an old story, which is why they are ranked higher.

Be Descriptive but Don’t go Overboard

Do not fill up your site with the word ‘Bakery’ 300 times. Google will see that as you trying to cheat the system and will knock you down a page or two actually. Just write normal content, and try to use your key words to make them relevant. Do not repeat your meta description, but feel free to paraphrase or elaborate on it.

Also, make sure you use alternate text and titles to your images. Robots don’t have human eyeballs and can’t see that its a pretty cake on your website. This is probably one of the most helpful things that you can do to aid in your SEO, and its also part of being WC3 complaint.

A General SEO Rule of Thumb to Live By

Three things will help you win the SEO game: a constant stream of content, clean compliant html code, and patience. There is a lot of SEO ‘snake oil’ out there–link farms, paid commenters, ‘optimized’ html code with hidden ‘tricks’ to fool Google–but they are only temporary fixes to hide an underlying issue. That issue is the quality and helpfulness of your site. Just like with any other project in life–if you put in the time and effort into it, people will notice.

This isn’t completely thief fault however. The rules to creating a great looking design and implementing that design are two different sets of things. Also the goals are not the same. Most cases the designer is primarily concerned with designing to please the client, while the programmer is focused on developing a fully functioning website.

Both programmer and designer are after the same goal: to create atheistically pleasing and seamlessly functioning website that surpasses the clients expectations. With that in mind, here are some tips designers to help assist with that goal.

Do:

Provide all font files. This should be a given for any project regardless if it is a website or not.

Consider all screens large and small. Many times I have had designers create an elaborate background only to have it cut off at the edges to their design file. What if the viewer has a larger screen then your design file? Conversely, what if the designer creates for a larger screen then the sites audience?

Label and organize your design files. When we “cut up” the site, generally we cut it into a header, footer, and content sections. Try to at least put your layers into that.

Note what the links should look like when the mouse hovers over it. The site is not static and shouldn’t feel like it. Also give examples of other fancy effects such as dropdowns, lightboxes, etc.

Provide the stock images or a link to where to purchase them. Its not necessarily the designer’s job to provide stock photos, but when the photos are to be “replaced later” it is good to have a link to buy them if plans change.

Do Not:

Randomly position photos outside of a grid format. There are many exceptions to this, but ideally any designer should be following an invible grid for the placement of text and images. Besides the fact that it makes your designs neat and orderly, the world of programmers is a world of rules and its faster to work inside those rules. The more exceptions there are to the rules, the more difficult programming becomes.

Neglect or leave out design elements. Like with the gripe about not having hover colors, some designers forget to show examples of form elements and heven things like header titles or footer text. Having a programer wing it on these elements can cause for some ugly blemishes on what is a good design.

Use non web-safe fonts for copy text. With html5 and javascript fonts like cufon, designers may be thinking that the websafe font debate us no longer an issue. However, not all people run html5 compatible browsers just yet and rending an entire page with javascript is a hog on computer resources. The happy medium is to dislay titles and headers in any font available, but still keep the main chunk of text in a browser safe font.

Think that the programmer will figure how to make it work. As a designer you are partly the architect of the site. Architects keep in mind the constraints of materials used in the construction of the their designs. Likewise, webdesigners should take note of what contraints are caused by programming–as well as the time and money restraints of the project itself.

So, in short…

As a designer, you are a member of a team, and often the first to pass the baton in relay that is website development. If you heed these dos and don’ts, you are guaranteed to be off to a good start!

Below are some definitions to help the non-programmers understand what part of the program developer or a programmer is talking about when they reference their code.  For example, when a web coder says, “I can make changes to the theme, but that part is in the framework and we shouldn’t touch that!”  you could possibly understand why.

A Code Library

When referring to websites, a library means a collection of instructions for a specific computer language. The collection of commands helps the programmer by simplifying a repeatable task.

For example, let’s say you want a JavaScript sideshow  of photos on your site. Although the developer could write a sideshow program entirely out of JavaScript by himself, chances are he will simply the process by using a JavaScript library such as jQuery.  Let’s look at a  an instruction the programmer might write in JavaScript:

When someone clicks this button labeled next, take the photo we’re on and make it turn invisible slowly in the course of two seconds.  While you’re doing that, take the next picture and make it invisible, then slowly change the visibility of it so that its fully visible in the course of 2 seconds.

However, jQuery already has that instruction as one of its set of commands.  If the developer is using jQuery, he would write something different:

Fade in and fade out those two photos when I click next. Thanks!

Well, you wouldn’t write thank you to the computer, but you get the idea.

Another reason for the use for libraries is because coding can be hard and takes a lot of thought. Thinking takes time. Instead of spending someone’s money trying to think of how to word an instruction, its much easier and cost effective to use a library of previously made instructions.

What is a framework?

Again, in website programming terms, a framework is in infrastructure to build the rest of the website off of.  If a library is a pile of bones, think of a framework as a skeleton.

Frameworks are used for different reasons.  Like libraries, a framework could be used to save time by having a solid foundation to work off off instead of having to make your own. Another reason would be consistency with a project among other projects.  In the future, if you need to replace a section of the website or web application among many different projects, you know that one size will fit all since they are were made from the same mold.

Content Management Systems

Content management systems are a web interface to change the site text, navigation, images, or other aspects of the website or project.  It is a complete project in itself that is designed to allow a non- computer savvy person to easily make changes to the site without writing their own code. Its kind of like the muscle of the site that does all the heavy lifting.

Plugins,  Addons, Components

An addon, plugin, or component are moderately interchangeable terms. All three represent a collection of code that is almost a program in itself that can attached to your project. Depending on the context.  For example,  maybe you want an easily update-able event calendar on your site. Instead of spending hours writing a calendar program, a developer could look for a calendar plugin and add it to your site.

Typically a developer would leave most of this program in tact, as the programmer who created the part of code may make changes and updates at a later date.

Templates and Themes

A template or a theme is the skin of your site.  Although the words are somewhat interchangeable, typically the word template refers to the layout,  size, and positions of elements of the site, where a theme refers to the colors, typography, and graphics on the site. However those definitions are sometimes swapped depending on the coder of the project.

As the template and themes are mostly cosmetic, they are often the easiest parts of the site to change.

If all this code is out there, why am I paying a Programmer/Developer?

You’re paying for the blood and the guts!  It takes a developer to sew all the pieces together, and fill the insides of your site with the organs vital to what you want your project to do. Also, the programmer might create their own distinct framework, theme, or addon specific to your project. He or she may also forgo any of these parts if  they feel they are unnecessary. Libraries, frameworks, plugins, and themes are simply tools in the developer’s arsenal to help get the project done on time.

I think this covers the basics. I hope this helps someone out there understand what their programmer or developer is talking about!

First we have to look at how a user gets to a website. Let me explain it as if there different parties involved were people:

Your Internet Service Provider

You may know him, as AOL, Comcast, ATT, Verizon, Earthlink, or  several other names. When you can to go someplace on the information super highway, this is the guy that takes you there.  Think of him as your personal chauffeur, which is exactly what he does.  You tell him, “hey, I’d love to go see our Friend Youtube to see if there are any new silly cat vidoes around,” and he’ll take you on your merry way.

The Registrar

No matter how fast of a driver you have,  your ISP (internet service provider) still needs directions.  That’s when he talks to the registrar.  He’s best imagined as a tour guide for your journey on the web.  Your driver will let him know what street Facebook lives on, or how to get to that Netflix site.

In terms of web hosting, the domain your purchase goes through the hands of the registrar. Not only is he the tour guide, but also the keeper of the address book!  If it seems like a lofty job for one person, don’t worry–there are over 500 registrars in the world working to tell your ISP where to go.

The Webhost

If you host a website, somewhere the files themselves live on a computer. This computer is managed by the webhost.  I like to think of the webhost as your concierge once you arrive at your destination. You talk with them to check in you and your web files,  forward any incoming calls to your hotel room, and call for a menu when you’re hungry for more bandwidth.

A webhost comes in many shapes and sizes. They also maintain the computer your website lives on–think of it possibly as a hotel.  Sometimes you may stay at a four star resort, sometimes an economy suite. Please note that like with any service, you get what you pay for.

The Domain Name Server

The DNS (Domain Name Server) is another person you should be aware of. He is best personified as a bus boy.  Sure, the registrar may know where your hotel is, but the busboy know what room when you get there and check in.

A confusing aspect to the DNS is that sometimes this busboy is working with our concierge web host, and sometimes he’s working with our tour guide registrar. It really depends on what service you get, but often times but the registrar and the webhost provide their own DNS.

Same Person, many hats!

Although all these people represent different jobs people have to get you to your destination,  there is nothing stopping one person to do every job!  Sometimes, your ISP will offer web hosting with Registrar and DNS included.  The largest registrar at the time of writing this, Godaddy, offers  webhosting as well. Furthermore, it is common practice for web host of offer registration of domain names through a offered registrar.

Just know that to host a site  all you need to pay web hosting and a registrar.  To view a site, all you need is an ISP.

JOB RECRUITERS
Job recruiters are the necessary hurdle you have to deal with. The benefit of a job recruiter is that they get paid by getting you a job, and its in their best interested to get you more money. I find that Job recruiters tend to ask for more money on my behalf then I would ever ask for. Keep in mind that they tend to take a percentage of the money for themselves and you are never aware of how much–all you are told is how much they have worked out to get for you.

NEVER TELL A JOB RECRUITER WHERE YOU HAVE INTERVIEWED RECENTLY. They will ask to “know where you are on the field”, or something to that degree, but its some times a lie. As told to me by one recruiter, some recruiting firms make it a policy for their people to ask this simply to find out where there is a position available that they don’t know of, and then try to steal that job away from you by sending someone else for cheaper.

Having said that, not all job recruiters are bad people.  Its best to find a handful that you feel you can trust and work closely with them from there.

CREATIVE FIRMS
Similar to a job recruiter firm, a creative firm will actually “hire” you and have you work as a temp for them. Again, they get a cut and you’re never told how much. Some people prefer to work for creative firms, but keep in mind that sometimes its hard to get a foot in the door with them.

One experience I had was with a firm that I had previously applied for positions several times. They eventually contacted me on their own from finding my resume online and had me come in for a meeting. They had asked me if I had any experience with them before and I had mentioning applying online for their listed positions. They replied with, “oh don’t bother with that, frankly all those e-mails go to a black hole somewhere.”

Again, creative temp firms are fine for some people, but make sure to find one that fits into your own work needs. Each one has their own style, some are more corporate and others are a bit flexible. Some only to part time hiring, some temp to hire, etc. If you do get an interview with these, make sure to ask questions. Also, after a few weeks and a good job doesn’t come your way, make sure to e-mail them to keep you on their radar.

EMPLOYMENT WEBSITE LISTINGS
By far, the best job employment site that I know of is Indeed.com. I do check a long laundry list of sites for work, but what I find is that a good chunk of posting on other sites are posted by job recruiters and temp firms. To avoid this, indeed.com works as a search engine for job listings that you may not find via other online job sites. You can also search by location and salary range, which is excellent.

Below is a list of site I look at in my regular routine in a job hunt. Typically I try to apply to 2-4 companies a day, with 20 e-mails being the magic number to get a response back for a in-person interview. This has lead me to an interview once every other week or so. So far I’ve had interviewed with 5 or so companies–and when I figure out what I’m doing wrong with the in person interview I’ll let you guys know!

The Usual Job Hunting Sites:
• Monster.com – Not the best site, but one of the biggest, its definitely worth a quick look.
• Careerbuilder.com – Similar to monster, its a mega Job hunting site. I prefer the way the jobs are listed when you do a search, its easy to see how much the salary will be and other additional info. I have had more luck with this site then I have monster.
• Dice.com – More of a tech job site, but I do find listings here that I don’t see elsewhere. They do have a small amount of web design jobs available.
• Cybercoders.com – I check out this site too, but its almost all job recruiters. Some are not that well associated with the site, and there has been rumors of some trying to scam job hunters, so don’t give out any personal info via e-mail when talking to these people.

God luck with the job hunt!

I wanted to make a note about the shootorials on Kongregate.com. They are a decent starting point for a shooting game. I would highly suggest following the AS3 version that a user created.

I rent through the gauntlet and made my own demo game from it, so its a workable tutorial. You can find it here.

My one complaint is that like with many tutorials I come across, they walk you through to a certain point, then say “ok! now have at it!” while not really laying the groundwork to expand upon the tutorial. At some point I want to write a tutorial that will have some meat to the skeleton–once completed, the student will have a reasonable way to create levels, introduce new game mechanics, etc.

Penguin Ocean Fun Time

(Link to “Penguin Ocean Fun Time” via Kongregate)

This little game pictured above is something I put together based off of several tutorials. Most of the work comes from the amazing Avoider Tutorial. I’ve only gotten into doing heavier scripting since AS3, most of my previous scripting was in AS2 for generic flash websites and the overly annoying flash intros. The gap between AS2 and AS3 can be a large one, so I would recommend ActionScript 3.0 Game Programming University. I feel there is something to be grained from the clarity of the material in a professionally written book. At any rate, it is a good starting point.

Hi everyone.

I wanted to start a web developer blog with an emphasis on flash and javascript. I will be posting links to resources and other projects I think that would be helpful to the community. Also, I will be posting updates to my personal projects.

I hope that by sharing my processes and thoughts, it can somehow help others in some way. I hope personally I’ve trolled through several blogs and fourms, trying to find that one ioda of knowledge that just was beyond my grasp.

With that in mind, here is a short list of some of my favorite resources:

Commerical Sites

• Mochi Ads ( http://www.mochiads.com) – if you make flash games, this site is almost a must. Not only will this site provide you with advertisements for your games as well as stat keeping for your player’s accounts, but it also will help you analyze and track the grown of your games across multiple websites.
• Kongregate (http://www.kongregate.com) – my favorite flash site. The main draw to this flash game portal is the integration of achievements and points that boost your raiting on the site. Recently that have been dabbling in usergenerated content, so it is worth a look.
• Smart Fox Servers (http://www.smartfoxserver.com) – probably not for the ususal developer, but smart fox servers host backend servers to popular multiplayer flash games such as Club Penguin.

Blogs and Porfolios

• Michael James Willaims (http://gamedev.michaeljameswilliams.com) – Michael has a very good flash tutorial that goes over the basics of an “Avioder Game” in AS3, which can be developed further into other games.
• BABARAGEO (http://babarageo.com/e) – I’m adding this to my list just as an inspirational site to a set of uniquely designed games.
• Emanuele Feronato (http://www.emanueleferonato.com) – One of the best flash developer blogs out there, Emanuele covers a wide array of topics, from monetization, to flash physics engines.
• Doogog (http://doogog.com) – A personal friend of mine, “Doogog” has a simple solution for the issue of preloaders in Actionscript 3. Also he has two neat games up on his blog.

Thanks for reading this and I hope this is helpful. Please feel free to share you comments, as any infromation you can add always helps someone out there!

THINKLIKEMIKE is a website where I post my recent projects and works.  Also I hope to put up some helpful information about web art and graphic design. My hope is that people can learn and use the knowledge to be more creative.