These are the “mostly used” statements:

FROM (Table to retrieve data from)

WHERE (Row-level filtering) 

GROUP BY (Group specification)

HAVING (Group-level filtering)

ORDER BY (Output sort order)

If anyone is interested, i’ll post the rest of my notes here on SQL(?). The order varies some depending upon use. Another useful item of interest is that the SQL (“mostly-regardless” of the flavor [mysql, mongo, oracle/etc...]), is that they all speak ‘SQL’. That may sound redundant, but it is actually interesting to start discovering the approaches that are implemented that all basically ‘do the same thing’ or ‘place higher priorities on certain operations’.

Once you learn what each flavor of SQL is doing, what their design goal was, it’s interesting to learn you may be using something totally overkill for a simple purpose. In most cases for a small production website, SQL Lite may be perfectly acceptable for lower traffic/connection sites (which are the vast majority of all sites on the web). Some ‘family-type- websites have even been known to use flat-text files.

The downside to using a larger-scale SQL solution is that most people do not use it correctly in the first place. That’s fine to use it, but it’s kind of like driving a NASCAR to the supermarket.  Just because you “have and use” more power, doesn’t make it faster for the end client/customer. A basic website (3-10 pages), using Apache, NGINX, Lighttpd (webservers), along with basic HTML(preferably HTML5 + CSS3), and maybe jQuery (if you need some pzazz), is more than enough for the basic website.  It’s fast, secure, presentable, and allows the author to maintain their focus (do what they were trying to do in the first place [get their message onto the web]).

If your goal is to see how much horse power you can use – see how flashy and widgetized you can get, then you’re missing the point of web development on the internet.  It’s cool to use the latest thing, but it’s cooler to get your message understood. Even if your message is to sell something, save a puppy from being put down, or getting your beliefs/blogging your experiences. If your page loads quickly, is easy to read, is obvious what you expect the reader to ‘get from your web presence’, then you and your web page reader/browser will enjoy a good relationship.

Related Posts:

• No Related Posts

Creating tags is not a magical task, but tag creation is critical if you’re doing any content publishing or blogging.  Search engines, plugins, and even crawlers look for instances of the reuse of key terms and index your page/post accordingly.  Getting ‘tagged’ can be the difference of your site coming up in search results, and leaving you in the dust.  Using some generic logic can help you discern which words to latch on to, which words can help you to get closer to the top of the search results.

One method that is common is to search for the words and phrases that you want to use [inside your search engine of choice].  Place yourself amongst those who you want to be compared against.  If you want to be a fine dining result, then find like-minded sites, and study their keyword source – see if it’s pertinent to what you can, factually, offer as a word to ‘be known by’.

Anyone who wants to come up on a page of results needs to tag their site. If you’re using templates, use the meta keywords tags in the head, if you’re using a blogging structure, then take advantage of the seo/keywords/tag features that come default on almost any blog framework.  CMS (content management systems) have even incorporated  a tagging logic, allowing each page of the system to be able to be crawled, index, and make it a contender for a pertinent search query.

Example of the Meta Keywords tag:

<META NAME=”keywords” CONTENT=”oranges, lemons, limes”>

Blogging systems like WordPress, have input boxes on the side, where you can enter keywords, one at a time, called “Post Tags”.  The use and common advice is to repeat features that may ‘best describe the point you want to get across’.  For this post we chose, “metatag”, “keyword”, “seo”, “example”, “how to”, “html” and “blog”.   Just by even stating what my keywords are will increase the ranking of the post (the frequency).

There are different guidelines for each crawler, but as a general rule, you can usually use 10 keywords safely, and up to 25 – each separated by a comma. With this in mind, place (what you feel are) the most critical keywords up in the first 10.  Likewise, make your site description short and sweet – usually one sentence.  If possible, include your region – even your address if possible.

references: Seomoz | webmarketingnow.com |

Need a “Pick-Me-Up?”

Related Posts:

• The jQuery .ajax() Cheatsheet… The Quick Reference For ajax Settings!
• Web Design For The Beginner
• Combining flash with HTML/CSS
• The Right Tool For The Job
• Structuring your HTML code

13 Styles offers cross browser/lightweight menu’s that offer a variety of styles ranging from simple to elegant to fun.  Most of the menu’s are generic, and can be easily implemented into an exisiting design.  The most you would need to do is to adjust some of the colors in the CSS.  The stylesheets are using standard property componenets (CSS1/2), and appear to work in backward versions of browsers also.  Which is good considering the bulk of corporate America is using ie6 still.  If you’re interested, these menu’s offer the PSD’s to totally customize the menu (for a price) if the free version doesn’t work for you.

CSS Menumaker offers more menu’s that are utilizing a more graphic flair, and most seem that they make work well with more conservative color palets (considering the vibrance of the menu’s).   These CSS menu’s offer solutions for creating dropdown menus (unique – most CSS sites do not even approach this topic).  This generator  has a pretty extensive customization feature – allowing you to build more than just the look on the webpage – this generator actually builds the menu items.   If you’re creating the menu’s dynamically, then this feature will not matter a whole lot.

CSS Play is the perverbial “Mother-Load” of every configuration imaginable… literally.  I was able to look through about half this site, and it’s literally overwhelming as to how many resources are actually offered.  The multi-level dropdown menus are new, and the menu’s appear to be consistent.  Sometimes CSS/js menu’s will have gaps depending upon the layout or browser used.  All of the menu’s appear to “look correct” regardless of how they’re used, and how they’re viewed.   If you are concerned about page size, they have some pure text CSS menu’s that are actually appealing.

enjoy.

Related Posts:

• No Related Posts

I am in the field of children’s health and fitness, but I just love web design and photography. With no experience, many ask me how I have created some of my web designs, which to me, are still beginner level, but attractive and usable.

The first thing I tell someone is to go visit opendesigns.org and download a few templates. Once you download the templates, unzip them to your desktop. Look for the file called index and open it up in a web editor. I like to use Notebook++ as my HTML editor, which is a free download.

In the Notebook++ program, you can change all the text you’d like to personalize your new web site. I personally like to see what I am doing, so I also open up the index file in my Firefox browser, and click the reload button to see the changes I have made as I go along.

Now, for the newbie, you may want to experiment with the .css file that is enclosed in your download. The .css file controls many things on the site such as the font, headings, colors, forms etc.

Many of the open source designers will tell you in the .css what each part of the .css controls, so you know what you are changing. The key thing is to always backup what you are doing before you make the changes, so in case you mess up, you have the original .css.

I must have done this a least 100 times before I started to try and create my own web template. Once I felt comfortable with this, I found a site by another Open Designs member called, Tinderbox.

On this site, you can find various plain and basic web layouts for you to start to personalize. If I am brave, I may visit css play to try and place in a cool navigation system.

Once I complete the design, I have a couple of my web friends check it out, then submit it to Open Designs for others to download.

If you are interested in learning about web design, this is a great way to start. You can see some of my work at: web.lensaunders.com

Related Posts:

• Combining flash with HTML/CSS
• #1 CSS Online Handbook
• Tableless Web Designs: Why I Switched
• CSS Editors & Design Tools
• How To Fix Your Sucky Website With Minimal Effort

Maybe you like to grab and customize free HTML templates, maybe it’s the fact that you need your content easily to be probably indexed by search engines or maybe you just don’t like flash because it has become tantamount to an inferno of noise and crappy animations.

As a fact there could be various reasons which could make you abstain from designing sites completely in flash. It’s not my intention to convert you to a group of flash lovers.

I’m here to tell you how to combine the best of both worlds. Stick to your HTML layout and then apply the finishing touch by replacing the header with a flash animation.

Well, it could be anything but I think the header as a natural choice so that’s what we are going to focus on for now.

What do we need to get started?

PREPARING OUR HTML TEMPLATE:

1. Grab a free template. For this tutorial lets use this one designed by Rambling Soul. Unpack the files.
2. Open index.html and style.css in your favorite text editor. Notepad is suitable for the basic operations we are going to perform.
3. You need a piece of JavaScript now. Get it from here and unpack it to the same folder the html files and the .css file are stored.
4. In index.html add this line in the header right before:[CODE1]
5. Delete everything inside [CODE2], that would be this: [CODE3]
6. Now let’s add the code that calls our flash animation. Copy the following code and paste it to the very same location from which we just deleted a couple of lines:
   [CODE4]
7. In style.css find this line: #wrap #header { background:url(images/header.jpg) no-repeat; height:229px; margin-top:10px;}
   Delete background:url(images/header.jpg) no-repeat;
8. Now we have removed the original image from the header. The script that we linked to in step 4 and made use of in step 6 will embed the flash movie as seamless as possible in all major browsers. You can just as well get used this way of embedding your flash files as it’s better than any other way.

THE FLASH HEADER, REUSING THE CONCEPT €“ PART 1

1. We have prepared our template for our flash header now. Let’s create the flash header. Open header.jpg located in the images folder. You can perform the following steps in almost any image editor, for this tutorial I’ll use Photoshop.
2. Because Ramblingsoul has created such a beautiful frame, let’s reuse it. Select “Rectangular Marquee Tool” (Hotkey is “M”) and select the whole blue area (the actual image inside the frame. Select it all including the cute strawberry-guy. Don’t select the bright frame).
3. When this area is selected go to “Select” >> “Inverse” (Hotkey is CTRL + SHIFT + i). Press CTRL + C to copy the selected area.
4. Go to “File” >> “New”. Say “OK” and press CTRL + V to paste our frame.
5. Go to “File” >> “Save as” (hotkey is CTRL + SHIFT + S). Name it “frame” Choose GIF as format and save it to the images folder. (The template you downloaded contained this folder)

THE FLASH HEADER, NOW IT’S GETTING FLASHY €“ PART 2

1. Now open Flash CS3 (or any previous version you might have).
2. Create a new document. (“File” >> “New”) Select ActionScript 3.0 or 2.0, it doesn’t really matter.
3. Press CTRL + J to open “Document Properties”. Dimensions should be 882px * 229px. Framerate 35 FPS. Press “OK”.
4. On the very left of the timeline double click “Layer 1″ and rename it to “pic1″. Create a new layer (see image) a double click it to rename it “pic2″. Create a third layer a rename it “pic3″. Create a fourth and last layer and rename it “frame”.
5. Download these three slightly modified royality free pictures from here. Put them in the images folder. Import them by clicking “File” >> “Import” >> “Import to library”. Select them all or import them one at a time. Also import our self-created frame namely “frame.gif”.
6. You screen should look something like this.
7. Select layer “frame”. Drag our “frame” image from Library to the scene. If not align-box is visible press CTRL + K. Press the icon below the text “To stage:” so that it’s active. Now select the image “frame” we just dragged to the stage and press “Align horizontal center” and “Align vertical center”. Now our “frame” is in place. Lock the layer by pressing the dot below the lock once. Also lock the layers “pic2″ and “pic3″.
8. Select the layer “pic1″ and drag it to the stage. Align it like we just did with our “frame” image. Because our frame image hasn’t got quite even sides you have to move the image to pixels to the left by pressing the left key twice.
9. Convert our “pic1″ to a movie-clip symbol by selecting it once and pressing F8. Name it mc_pic1
10. Insert new key frames (still on the “pic1″ layer) by clicking on the 15 frame (don’t confuse this frame with our image “frame”) and pressing F6. Click the 85 frame and press F6. Click the 100 frame and press F6.
11. While still on the 100th frame click the image once and properties select color >> tint >> 100%.
12. Right-click somewhere between the 85th and the 100th frame and select “Create Motion Tween”. Now go to the first frame and click the image once again. From properties select color >> color >> advanced >> settings >> Replace the first three “0″ values with “255″. Don’t increase the value next to Alpha. Press “ok”.
13. Right-click somewhere between the first and the 15th frame and select “Create Motion Tween”. Now lock this layer, hide it by clicking the dot below the eye and unlock layer “pic2″.
14. Select the unlocked layer “pic2″ and repeat step 8 to 13.
15. When you have repeated those steps lock the layer “pic2″ and hide it.
16. For the third image and the layer “pic3″ redo the steps. When you’re done lock layer “pic3″ and hide it.
17. Unlock layer “pic2″ and unhide it. Select all of its 100 frames. Drag all the frames so that it starts in frame 100 instead of frame 1.
18. Lock the layer “pic2″ and hide it.
19. Unlock layer “pic3″ and unhide it. Select all of its 100 frames. Drag all the frames so that it starts in frame 199 instead of frame 1.
20. Unlock our layer “frame” and go to the 283th frame and press F5 to insert frame.
21. Unlock and unhide all layers. We are done! Now press CTRL + SHIFT + ALT + S and navigate to our images folder we have been using so far. Name the file header and save it.
22. It’s nice to have the source file so also save that by pressing CTRL + SHIFT + S.

UPLOADING

1. 1. What do we need to upload? Everything in the original template folder besides the old header imager, namely header.jpg. Be sure that it’s the edited index.html and style.css you are uploading.
2. Also be sure to upload our JavaScript namely swfobject.js.
3. Be sure to upload our header.swf, it should be in the images folder.
4. You don’t have to upload pic1.jpg, pic2.jpg, pic3.jpg or frame.gif. They are all contained in our .swf file.

You can download and review the final result here. I have included the images used as well as the .fla

I’ll create a Video tutorial of this later, so if your lost don’t worry too much. Until then feel free to mail me your questions here. I can’t guarantee a reply but I’ll try hard

Related Posts:

• #1 CSS Online Handbook
• Web Design For The Beginner
• Tableless Web Designs: Why I Switched
• CSS Editors & Design Tools
• How To Fix Your Sucky Website With Minimal Effort

Many people entering the internet fray on their own will soon ask the question “what software should I use to write my code?” It’s an honest question because there’s a bunch of editing programs out there just begging to be used and it can be difficult to narrow down the field.

There are some really great programs that offer a healthy bundle of features that can help reduce the amount of repetition and re-work that invariably comes along with web design. But usually these industry-leading programs come with a rather large price tag, keeping them out of reach for the “shade tree” web designer.

And then there are other editors that really, really suck. I’m sorry, but there’s no need to sugarcoat it because it’s true. Sad, but true.

My personal recommendation for choosing an editor is to stick with the most basic thing you can get like Microsoft Notepad or TextPad. No, they’re not too sexy when it comes to features, but that’s kind of the point.

The more robust WYSIWYG editors have a slew of options and they tend to think a bit too much for you when it comes to what code should go where and often produce markup that’s just not necessary.

These editors also come with a learning curve, some steeper than others and much of your time will become devoted to just learning how to use the software and not allowing you to remain focused on the actual code itself.

You want to learn and understand web design, not how a specific program functions. Why add more stuff to weed through while you’re learning? And there’s no reason why you can’t adjust to one of the WYSIWYG editors down the road once you have the basics of web design under your belt.

When you’re starting out with coding and you use a simple text editor, there’s nothing between you and what you’re producing for the web. And because what you’re doing isn’t being filtered through the program, you understand the code much better. It’s about as organic as you can get in an inorganic environment.

Keep it as simple and uncomplicated as possible, because I’ll be honest, sometimes this web design stuff can be as frustrating as hell on its own sometimes. Did someone say nested floats?

But web design can be as equally rewarding too and I feel that those rewards don’t have to come by way of a hard fight but can be gained through plain old simplicity.

In the end, the best program to use is the one that you feel the most comfortable with. And that makes sense. But do yourself a favor and at least try writing code in a simple text editor. You never know.

Related Posts:

• Avoid These Common XHTML Errors
• Tableless Web Designs: Why I Switched
• Web Design For The Beginner
• Corel’s Graphics Creation and Editing Software
• Combining flash with HTML/CSS

Is it worth spending time on structuring it probably? After all it doesn’t affect anything. Spiders don’t care and general users won’t notice as they won’t check your source code, most people don’t even know what that is.

In general, if you can say that no-one is going to look at your source code, then structuring is meaningless. But you will be surprised how often your source code could be viewed.

You really should structure your HTML code if you can answer yes to one of following questions:

1. Did I make the site for a person/company that is going to update the content themselves directly in the HTML?

2. Did I make the site to promote my skills a web designer, maybe as a part of a portfolio?

Alright, but how do I structure the HTML?

First of all, get rid of your favorite code-editor. The way they show the code tend not to match the way it is looks after it has been interpreted by the browser. Open your .html/htm in Windows Notepad, and clean it up.

Keep related code without any breaks and with the same left margin. Either use breaks to separate different groups of code, or better, descriptive comments. Related code could be the code within the HEAD tags. You could categorize your header by grouping it up with HTML comments. Separate links to .js from links to .css and separate META tags from .js and .css.

Example of good HTML structure.
Example of bad HTML structure.

Related Posts:

• Avoid These Common XHTML Errors
• Why Most Sites Don’t Bother With Web Standards
• Web Design For The Beginner
• Combining flash with HTML/CSS
• Your first website

In a recent article, Chris Pearson gives us the Definitive Guide to Semantic Web Markup for Blogs, where he writes:

You’d think that as a result of open-source development practices, blog architectures would be pretty close to perfection in areas like Web standards and maximum SEO impact. You’d be wrong.

The article points to several areas that can easily be optimized for search engines through the use of semantic markup; most of these pointers could be applied to any site, not just blogs.

The first, and easiest, SEO improvement is to optimize your title tags by structuring them like this: Post Title – Site Name.

The terms that appear earliest in the title tag are the ones that carry most weight with search engines, so you want them to be as keyword-rich as possible.

The name of your site probably isn’t very descriptive of the content on any one specific page, but the title of a post should be very descriptive, and so it makes the most sense to put those terms first in your title tag.

The second biggest SEO improvement you can make is to make strategic use of your heading tags (h1, h2, h3, etc.).

After the title tag, the h1 tag is the next most important in terms of telling search engines about the content of a specific page.

Ideally, each page of your site will have just one h1 tag that, like your title tag, contains keywords that are descriptive of that page’s content.

This is one area that I am willing to bet most sites fail – usually you will see the site name at the top of the page in an h1 tag, with the post title farther down in an h2 or h3 tag.

From an SEO standpoint, this is completely backwards – by doing this, you are telling search engines that your site’s name is the most important element on the page, while the title of your post is the 2nd most important.

The article suggests that your home page should contain the site’s name in an h1 tag, with the titles of your most recent posts in h2 tags, but that individual posts and pages should have the site name contained inside an h2 tag, with the post’s title inside an h1 tag.

The rest of the article contains several additional tips for improving your SEO performance, but I believe these 2 simple changes will give you the most bang for your buck.

Related Posts:

• WordPress 2.5 Shortcodes
• Migrating from wordpress.com to wordpress.org or self-hosting
• Fine-Tune Your Flash Drive
• WordPress Tip-Disable Visual Editor
• SEO for Google

Some are less-experienced coders or do not really know how XHTML differs from HTML.

Here are the most common errors I’ve come across:

1. Not closing empty elements
• Wrong: <br>
• Right: <br />
2. Not closing non-empty elements
• Wrong: <p>This is a paragraph.<p> This is another paragraph.
• Right: <p>This is a paragraph.</p> <p>This is a second paragraph.</p>
3. Improperly nesting elements
• Wrong: <em><strong>This is random text.</em></strong>
• Right: <em><strong>This is random text.</strong></em>
4. Nesting block-level elements within inline elements
• Wrong: <em> <h2>About Us</h2></em>
• Right: <h2><em>About Us</em></h2>
5. No alternate text for images (using the alt attribute, which helps make pages accessible for devices that do not load images or screen-readers for the blind)
• Wrong: <img xsrc="images/logo.jpg" />
• Right: <img xsrc="/images/logo.jpg"
  alt="Company Logo" />
6. Not putting quotation marks around attribute values
• Wrong: <td colspan=2>
• Right: <td colspan="2">
7. Using the ampersand outside of entities (use &amp; to display the ampersand character)
• Wrong: <title>Love & Marriage</title>
• Right: <title>Love &amp; Marriage</title>
8. Using uppercase tag names and/or tag attributes
• Wrong: <BODY><P>My Web Site</P></BODY>
• Correct: <body><p>My Web Site</p></body>

By making sure you don’t make the above mistakes, you are well on your way to having an XHTML website that will validate.

Related Posts:

• Structuring your HTML code
• The Right Tool For The Job
• Tableless Web Designs: Why I Switched
• Why Most Sites Don’t Bother With Web Standards
• Web Design For The Beginner

Well, it ain’t over.

Online handbooks are getting very popular these days for its quickness of linking relevant information provided on the website. And CSS is like no other. It’s constant, sleek, and attractive. More and more CSS techniques are published everyday. Don’t bookmark, just bookmark the handbook which is a bookmark itself. Confused? Don’t be.

I am talking about: http://www.alvit.de/handbook/

It’s an all in one CSS Handbook, check it out and you will thank me.

Related Posts:

• Combining flash with HTML/CSS
• Web Design For The Beginner
• Tableless Web Designs: Why I Switched
• CSS Editors & Design Tools
• How To Fix Your Sucky Website With Minimal Effort