Cross-browser Absolute Positioning PNGs

With the new Web look spreading through every site new and old, there are a lot of times when you want to use absolutely positioned pngs on your site.

The 2 problems we face. The first one is that the PNG format is not fully supported on all browsers that are in use today. The way we handle that is with a simple include into the main template file of your site.

Here is where you can get the javascript file click here.

Include this file into the header of your main template file:

<!--[if lt IE 7]>
        <script type="text/javascript"
        src="/resources/unitpngfix/unitpngfix.js"></script>
<![endif]-->

This is a hack to tell the browser to include the”unitpngfix.js” file if the browser is IE 7 or below.

The next problem is that IE positions things differently. We will be using a similar hack to go around this problem. Here is how the code will look.


<!-- Floating image -->

<!--[if lt IE 7]>
  <div style="position:relative; margin-left:-800px; margin-top:0px;">
<![endif]--> 

  <div style="position:relative; margin-left:0px; ">
  <div style="position:absolute; clear:left; left: -50px; top: -59px;
  margin-left:0px;">
  <img src="yourimage.png" width="332"
  height="178" style="clear:left;" />
  </div>
    </div>

<!--[if lt IE 7]>
  </div>
<![endif]-->

All you have to do is add your image path and then change the values in the “left” and “top” to adjust the position of the image. You will have to adjust the values in the “if It IE 7” section while looking at the image in Internet Explorer 6 or 7.

I hope this helps anyone who is having trouble with absolutely placing PNG images for cross browser compatibility.

Beginner MySQL & Php tutorial

PHP Mysql Basics

This tutorial explains for you the basics of MySQL in combination with Php. This tutorial is also written for people who absolutely don’t have any experience with MySQL.

This tutorial was written by CrystalEdge.

MySQL is a kind of textual database. This database is divided in table that have rows and columns. Most of the time you store similar data of the same category into the same table. By using a query, you are able to store information into the database. For people who don’t have any Php experience I suggest you to read CrystalEdge’s Basic Php Tutorialbefore starting on this one.

Read full tutorial ->

Create Vector and Bitmap Graphics online for free

 Have you ever wanted to create vector or bitmap graphics but did’t have all of the expensive programs to work in? Well I got wind of this website/project called Aviary which allows you to do just that. 

Create graphics online for free

Aviary has created applications mimicking all of the popular graphics programs out there today. I will list the different programs, what they do and some examples of work created by people. I find it quite amazing what you can do with these programs — and they are all free.  Aviary uses names of bird species for each of their programs.

Image Editor (Similar to Photoshop, Paint Shop, Gimp, etc.) which is called Pheonix and is depicted by a very nice Peonix icon. Pheonix has all of the basic things you need to edit an image which include: clone tool, magic wand, filters, selection tools, smudge, layers and image resizing.

To Give Pheonix (image editor) a try click here.

Here are some of the popular images that I really like. These were created in Pheonix by regular users:

 

Apple Created with the Pheonix Editor
Apple Created with the Pheonix Editor

 

Flower graphic created with Pheonix
Flower graphic created with Pheonix

 

Very cool. Also created in Pheonix

 

 

Vector Editor (similar to Illustrator, CorelDraw, Signlab, etc) which is called Raven and is depicted by a Black Raven icon. Raven has some of the basic things you need to edit an image. Raven is new, so more features will be coming out. Some of the existing features include: pen tool, pencil tool, brush tool, basic vector object tool, gradient editor, layers and smart selection. They also have a simple bitmap to vector tool.

To give Raven (vector editor) a try click here.

Here are some of the popular vector drawings that I really like. These were created in Raven by regular users:

Great vector illustration created with Raven
Great vector illustration created with Raven

 

Beautiful tree with a river and coy fish created in Raven
Beautiful tree with a river and coy fish created in Raven

 

Visual laboratory (not much like it on the market) which is called Peacock and is depicted by the Peacock bird. Peacock enables you to create amazing images with the use of filters, images and other mathematical effects. This application can be daunting at first, so be sure to watch the video on how to use it first.

To give Peacock (color chooser) a try click here.

Here are some stunning images created using Peacock:

Effect created using Peacock
Effect created using Peacock

 

 

 

 

 

 

 

 

 

Created in Peacock
Created in Peacock

 

Color chooser and mixer (not much like it on the market) which is called Toucan and is depicted by the colorful Toucan bird. Toucan enables you to create correct color compositions and includes and complimentary, split, etc, color mixer/chooser. You really have to mess around with it to get what it does. It is important for any kind of graphic design when having to choose a number of colors and make them harmonic.

To give Toucan (color chooser) a try click here.

Many more. In addition to the above 4 applications they are supposed to be coming out with many more useful ones. This is a list of the ones I think are quite useful:

       Desktop Publishing (InDesign, Quark Express, etc) called Owl.

       Painting Simulator (Corel Paint, Photoshop, etc) called Pigeon — haha.

       Smart Image resizer (Genuine Fractals) called Woodpecker.

       3D Modeler (3DS Max, Maya, Blender, Sketchup) called Hummingbird.

       Font Creator (TypeTool, FontForge) called Ibis. (This one is particularly exciting to me).

There are more, see them all here.

Creating a website with WordPress

Creating a good website with wordpress is very easy once you have the right direction. In this article I will give you the basic steps to starting up a website/blog with WordPress.

First things first before we begin. WordPress is not the ony content management system for blogs/websites — there are many others. I prefer wordpress over anything else due to it’s simplicity and ease of updating and adding plug in functionality.

WordPress was originally designed for the creation of blogs. A lot of websites are centered around the idea of a blog which is new articles published frequently. For most websites to do well they need to provide constant valuable information at a decent rate. If you put up a couple of pages on a website and leave it at that, most likely your website will drop from the search engines and disappear.

I love the idea of building a website around WordPress and I am working on numerous other websites using it.

WordPress Basics

A WordPress website consists of these main things:

  • Posts
  • Pages
  • Categories
  • A Template

This makes WordPress simple to understand.

Posts: posts are articles written that fit into a category. Posts have an Author, A Published Date, A Title, Content, Tags and Comments.

Pages: Pages are basic articles that are linked to directly. Examples of pages are “About Us”, “Prices”, “Contact Us”, etc. In WordPress, posts and pages are different. Pages have an author, A Published Date, A Title, Content, Tags and they can have comments. Pages are generally directly linked to and are not part of any category.

Categories: categories separate posts into understandable divisions. Examples of categories are: Blog, Photoshop, Funny, etc. Categories help people find posts that they are interested in. Categories can have any amount of sub categories. An example of this is a category of “Computers” can have a sub category of “Windows” or even “Troubleshooting”.

A Theme: every WordPress site has a theme. A theme decides how to show your posts, pages and categories. A theme can also have any number of additional content, like a sidebar or a menu, etc. These are also called templates.

Tags: tags are keywords for posts and pages. Keywords also help people find an article or page that they might be interested in. It is very important to add tags to your posts so that people can actually find them. Some blog systems don’t differentiate between tags and categories.

Comments: comments are very important to a blog. Each post can have comments on it. Comments can be a suggestion, a question regarding the post, or request for clarification. Comments constantly update the post with additional content and help create more interest in your post.

Author: and author in wordpress is the person who wrote the article. In a WordPress site, there can be numerous authors writing posts. It is good to have numerous authors for a blog so that one guy isn’t staying up all night updating the blog.

These are some of the basic things you need to know to work with WordPress and to be succesful with what you are trying to do. We will now talk about how to set up a wordpress blog with ease.

Building Steps

Step 1: Get a domain name and hosting service.

An example of a domain name is “www.techassistnow.com”. A domain name is always unique. A hosting service has many computers to hold information, you will need to set it up so that your website and all of its data has a place to live.

I will tell you how to set these up for the hosting provider that I use. The hosting provider I use is called “1&1“. Using this domain name checker, check if the domain you want is available. If it is, then purchase the hosting option you want. I recommend 1and1 beginner if this is your first website.

For any other hosting provider, read the instructions on their website. In any case, you want to make your your hosting has PHP and mysql.

Step 2: Collect the necessary info from your hosting provider

Once you have a domain name and a website host, you should now have this basic information:

FTP Host:

FTP Username:

FTP Password:

Database Host:

Database Username:

Database Password:

Having this information is neccesary to starting your wordpress site. Once you have this information, continue through these steps. If you don’t have a database, contact your hosting provider on how to create a database.

Step 3: Download & Install WordPress

To download WordPress click here.

A very simple guide to installing wordpress click here.

Step 4: Customize with themes and plugins

Plugins

Installing plugins is very simple, you just go to the “Plugins” menu and click add new. Then you can search for the name of the plugin and install it right from WordPress. You can also download the .zip file and install it that way by clicking on the “Choose File” button.

Here is a list of the fundamental plugins you should have:

  • All in one SEO Pack: This plugin sets up WordPress for Search Engine Optimization. Download it here.
  • WP-Cache: This plugin greatly increases the speed that your WordPress site loads. Download it here.
  • Askimet: This plugin detects spam comments and is very important. Download it here.
  • Contact form: Every website has a way to contact the website editors. This plugin makes it very simple to have complex contact forms for this purpose. Download it here.
  • WP-DB-Backup: Allows you easily to backup your core WordPress database tables. This is a very important plugin for protecting your website from being completely ruined. I recommend it for any WordPress installation. Download it here.

There are a lot of additional useful plugins that can be used. I will list some of them here so you get an idea of the possibilities.

  • Broken Link Checker: Checking broken links can be annoying to you and your public. This plugin makes it simple by checking images and links if they are broken. If so,  you are notfified. Download it here.
  • Google XML Sitemap: This plugin creates an updated xml sitemap for Google. Good for SEO. Download it here.
  • Sharethis: great for adding social marketing buttons to all of your posts. Download it here.
  • WP ECommerce: Turns your site into an online store. This is just an example of a plugin that adds a whole store to your wordpress site for free. Download it here.

As you can see, there are many WordPress plugins. You can pretty much get a plugin for anything you want to do with WordPress.

Themes

Installing themes is very simple with the newest version of wordpress. All you have to do is go to the “themes” menu and click “add theme” and then upload a zipped file of your theme. WordPress will automatically install the theme for you. You should also install any recommended plugins for that theme.

Here is a list of website that have  a good free themes that you might like.  There are so many options and looks available for themes — it’s hard for me to list them all — but I will point you in the right direction.

Step 5: Start adding content!!

Now you have your WordPress site set up. Start writing and adding posts with unique content. Make sure you also add the standard pages (Contact, About, Etc).

This is a simple guide to start your WordPress website. There are many advanced features and theme custumizations still possible after this point. There are hundreds of websites dedicated to these advanced features — just google what you are trying to do.