I Am Web Dude

PHP Tutorial Posted

Andrew — Tue, 17 Mar 2009 06:16:57 +0000

I have just posted a massive tutorial which will help you begin the process of understanding Object-Oriented Programming with PHP using MVC frameworks. This is by far the largest tutorial I have written, so if you see any spelling/grammatical errors, or have suggestions, please let my know by leaving a comment. Now go check it out!

PHP – Introduction to MVC Frameworks

Andrew — Tue, 17 Mar 2009 02:22:37 +0000

Introduction

Have you ever found yourself using procedural code on projects, and when it comes to modifying different elements you spend an outrageous amount of time updating code, removing code, or digging through code that overlaps other parts of your code numerous times? Yeah… procedural can be a nightmare in large websites, so this is why Object-Oriented Programming with PHP can save you plenty of time in this process.

One use of OOPPHP is using an MVC (Model View Controller) framework to develop your applications. Of course, you can download already built MVC frameworks such as CodeIgniter, CakePHP, or the Zend Framework; but all of those can be extremely bloated if you are developing smaller applications that wont utilize everything they have to offer. Also, you may be like me, you love to reinvent the wheel to see how the wheel works; so developing your own MVC is an excellent way to help you understand the concept behind OOP.

This tutorial will walk you through all the initial steps to getting an MVC framework up and running. In the future, I will add additional tutorials that will show you how to implement session management, template management, etc, into this framework. For now, this will just show you the basic concept behind the framework using libraries, models, helpers, and views.
Lets get our hands dirty shall we?

New CSS Tutorial

Andrew — Wed, 11 Mar 2009 22:07:24 +0000

Ever wonder how websites create drop menus for navigation purposes? It’s actually a lot easier than you think it is, so how about you check out the CSS – Drop Menus tutorial.

CSS – Drop Menus

Andrew — Wed, 11 Mar 2009 22:05:20 +0000

Introduction

So we all like having tabs across the top of our websites, right? It keeps things organized and clutter free, but what happens when you want to add more navigation to those tabs without actually adding more tabs? Oh, that’s right, you can use drop menus to accomplish this task. This can be easily done using just CSS, sweet huh?

Requirements

Nothing is really required here, you just need to have a basic understanding of HTML and CSS.

The Process

Step 1
The first thing to do is create a list of elements that we would like to make into menus. For this, we will use un-ordered lists (UL). The main list element will be the tab’s name, and the child un-ordered list element will be the drop menu items.

CSS Drop Menu | I Am Web Dude Tutorials

Menu 1
- Item 1
- Item 2
- Item 3
Menu 2
- Item 1
- Item 2
- Item 3

Hover over a menu above to see it's contents.

Here we have the basic structure of our HTML page. We have one main un-order list which contains two list elements, and each of those list elements contain a child un-ordered list. That’s all you have to do for the HTML! Easy, right?

Step 2
Now we need to create the CSS to control these drop menus. The first step is to hide the child un-ordered lists, and to accomplish this we do write the following in our CSS:

1
2
3

li ul {
   display: none
}

Step 3
Now how do you get that menu to display when you hover over the parent list element? Simple, you just use the :hover pseudo-selector.

1
2
3

li:hover ul {
   display: block
}

The reason we use the property display with the value of block is to make the child un-ordered list visible, and the pseudo-selector :hover means to fire this CSS rule when hovering over the parent list element.

Conclusion

That’s it! Wasn’t that easy? Now play around with the CSS and you could create something like this. Hope you enjoy this little trick and make use of it on future and/or current CSS projects!

Expect more in the future.

Andrew — Tue, 03 Mar 2009 18:28:29 +0000

My last post to this blog was December… For this I apologize. Between work, snowboarding, and friends I’ve been swamped and have had little to no time to contribute to this site’s content. This is going to change, I promise you that. Over the next few months I plan to start releasing more tutorials that will help user’s entering the web development world to understand what they need to do. For those of you who are already seasoned enough, I plan to release a couple tutorials that may benefit you as well.

I’m also asking that if anyone knows of anything they’d like to see here, please let me know your thoughts. Sometimes it’s hard to write tutorials because you are blindly writing something without any idea if it’s going to actually benefit your user-base. So you, the reader, what do you want to see in the way of tutorials? What have you been struggling with? What kind of references would you like to have? Let’s hear it!

*Update: New jQuery tutorial will be up by this evening. – March 11, 2009 @ 10:07am

Upgraded to WordPress 2.7

Andrew — Mon, 15 Dec 2008 06:23:39 +0000

Systems have been upgraded to WordPress 2.7. Everything is stable, plugins are working, all is good. Also please note that I have tweaked some visual display bugs that were being encountered when viewing category listings when a post contained AJAX elements.

*Edit: A small error was encountered with jQuery displaying on pages themeselves. This was due to the $ caller causing errors with the mix of scriptaculous. Switching $ to jQuery fixed this problem.

CSS – Rounded Corners

Andrew — Wed, 26 Nov 2008 19:40:51 +0000

Introduction

I have been asked countless times how I make my rounded corners when working with HTML and CSS. My method is actually very easy to work with and can be used everywhere. This method is extremely useful when you have content that is always different sizes. This is because this method puts each corner in elements that can expand with your content. Here is what you need to utilize this method:

Image editing utility such as Photoshop, GIMP, etc.
Text Editor to edit your HTML and CSS.

*Note: Updated on April 7, 2009. IE6 had an issue with the previous method described in the tutorial. It has been updated so IE6 will now render correctly.

How to Make Rounded Corners

Step 1
Open your image editing software, for this example I’ll be using Photoshop. Once you have your editor open create a canvas that is 5 pixel by 20 pixels. Why this size you ask? Well this is for corners that have a 5 pixel radius. You can use any size radius you want, such as a 10 pixel radius corner would have a canvas size of 10 pixels by 40 pixels. This is because the image is divided into four sections. The top section is the top-left corner, then the top-right corner, then the bottom-left corner, and finally the bottom-right corner.

In your canvas, create an image like the following. The easiest way is to take a circle that is 10 pixels by 10 pixels, fill it with the color of your choice, and then cut 1/4 of the circle off. Copy this piece three times so you have four separate parts. Next you will want to rotate each piece until it looks like the following:

Once you’re done, save this image as corners.gif for later use.

Step 2
Now you should have a slight understanding of how the image for this tutorial is supposed to be laid out. It is essential that you lay the image out in the order described in step 1 for this tutorial to properly work.

Now how do we take this image and make a nice little box out of it? It’s actually very simple, we are going to use a method known as Image Sliding, which you may be familiar with if you use CSS to make buttons that have hover and/or active states.

Remember that everything on an image is based on an X and Y axis, and point 0,0 is the top left part of your image. To move an image left 50 pixels and down 20 pixels you would do the following:

1	background-position: -50px -20px;

*Note: An easy way to remember this is to know that when you need to move an object left or down you use negative pixel values, and to move an object up or right you use positive pixel values.

Step 3
Now how do you move this image around to display rounded corners on our content box? It’s very easy, but first I need to show you the HTML of our box. Without the HTML you CSS is useless.




   
   CSS - Rounded Corners (By I Am Web Dude)
   




   
   
 
   
   Some random text for this to work.

See, doesn’t that look simple? You have yourself clean looking source code, while having a cross-browser rounded corner box.

Step 4
Now lets get into the CSS that makes this baby work. Create a file called roundcorners.css and save it in the same directory as your HTML file. Inside of this CSS file you will want to use the following code:

.box {
   background: #000;
   color: #fff
}
.box .body {
   padding: 0 5px
}
.box .t, .box .t div,
.box .b, .box .b div {
   background: url('corners.gif') no-repeat;
   display: block;
   height: 5px;
   font-size: 5px
}
.box .t div { background-position: 100% -5px }
.box .b { background-position: 0 -10px }
.box .b div { background-position: 100% -15px }

Now that may look confusing if you have no idea what the CSS background-position attribute does, but it’s quite simple. Let me explain it for you.

The first part of the CSS is defining the style elements for our box. In this example our box will have a black background, and this background needs to be the same color as the color you made your corners.

The next part defines our

tag styles. Each tag that has a class of t or b inside of the box class, and then any

inside of those two classes will have a background image that is the corners.gif. Also, these elements will always be 5 pixels tall, which is defined by the display: block; height: 5px.

Now this is where the magic happens. We need to slide our background image around to display the corners correctly. The first element, the top left corner, will also be at position 0,0 so we don’t need to define any CSS for it.

The next element, the top right corner, needs to be told to position itself to the far right of our box. To accomplish this we add .box .t div { background-position: 100% -5px } to the CSS. The 100% tells the CSS to push the image all the way to the right, and the -5px tells the CSS to start reading the image at 0,-5px.

Next we need to define the bottom left corner, so we add .box .b { background-position: 0 -10px }. Here we need to keep the image to the far left, so we leave the X value set to 0. We need the CSS to read the image from 0,-10 so the Y value is set to -10px.

Finally we need to set the bottom right corner, so we add .box .b div { background-position: 100% -15px }. This is just like the top right corner except we need the CSS to read the image from 0,-15 so the Y value is set to -15px.

Closing

There you have it, CSS rounded corners using one image. If you want to you can get tricky and save a bunch of corners to one CSS file and use the CSS sliding method to define corner positions for elements all over your website. This would be beneficial to load times as the end-user would only be required to download one image and not twenty different images.

To view an example of this tutorial in action please click here.

jQuery AJAX Plugin Posted

Andrew — Thu, 09 Oct 2008 18:01:07 +0000

I started playing around with jQuery last week and, rather quickly, found out how powerful this framework really is. So I was inspired to write my own custom AJAX plugin for the framework to handle my AJAX calls with extremely easy implementation. After finishing the plugin, I also realized that it was time to organized the Resources layout as well.

No longer will you have to look at one extremely long post to figure out what is what. I have implemented some jQuery functionality into these pages to organize each post into tabbed sections. So finding what you want will be a matter of just looking at the tabs and clicking the right one.

So how about you go download my new fancy plugin now?

Edit: WD Category Listing has been updated to v1.0.1. Please read release notes to view the changes.

WDValidate – jQuery Plugin

Andrew — Thu, 09 Oct 2008 16:33:15 +0000

Summary
Download
Installation
Release Notes
Demo

jQuery is an excellent JavaScript framework that can be used to accomplish many different tasks. One of those tasks would be easy AJAX functionality. WDValidate is a plugin that can be added onto the jQuery framework to allow you to easily tie form elements to a back-end script for AJAX processing.

Below are two different versions of the file that you can download. One is the production version, which is a packed version of the code; this is ideal for your live website. The other version is the developer version, which is unpacked and will allow you to easily modify the code if needed.

Production: Download (735 bytes)
Development: Download (1.40 KB)

*Downloads have been disabled for the time being, sorry for any inconvenience this may have caused.

Download this plugin, as well as a jQuery version of your choice.
Upload the files to your server.
Place the following code in between the and tags.
That’s it, you’re ready to roll!

Release Notes
If there are any revisions to this plugin, here is where you will find the list of changes.

Version 1.0

Initial Release

So you want to see this plugin in action before downloading it? That wont be a problem at all, click here** to view the live demo.

*Note: Version 1.0 only supports the onBlur() and onKeyUp() methods. More methods will be implemented in the future!
**Preview link has been disabled for the time being. Sorry for any inconvenience this may have caused.

Google Chrome is Iran!?

Andrew — Wed, 08 Oct 2008 16:46:37 +0000

I was just sitting in a deviantART chat room this morning when we started discussing browsers. Out of the blue cjgraphix chimed in with the following:

officially the w3c sets ’standards’ but nobody has to follow them at all.
which is what originally caused the browser wars of the 90’s…
chrome is like the damn Iran of browsers right now…. if they get nuclear weapons everyone in the region is fucked.
lol
i think of IE as more of an Iran than Chrome
:lmao:
:slow: I’m not going to comment on that

no, IE is Isreal…

I about fell out of my chair laughing so I figured I’d post this here in the humor section for everyone to read

Disclaimer: Opinions of others do not reflect my opinions!