Hazelong.com

Getting What You Pay for your Web Design & Development

This post is for people who hire freelancers or web design/development companies to do their web design. I can safely say that I spend a good deal of time dealing with friends who have problems with their newly done website and the bad ethics of the companies they worked with.

I am annoyed at these so-called web designers sometimes and have finally decided to blog about it. All the things you want to know.. the shit things that we do and what is good. You will find out after reading this post.

Templates, templates and templates. Resell and reuse.

Why a RM 500 web design is not a web design

Promises are easy to make. Over promise and under deliver is the motto here. Here is what you are most probably promised -

1. A blog or shopping cart system
2. A contact form
3. Banner design
4. Added feature of any of the following – Slider, Facebook page widget, menu bar

To design a website takes time. Time to research and time to design. To bring the web design to live, means we have to transfer the design to codes. That takes time. Usually a month for quality design. RM 500 a month, how to survive??

That is why.. 
A RM 500 web design that is offered is usually based on templates. Templates that they have designed and coded before. Then they recycle the same thing and reuse the design. Change the colors, put in a different logo and call that a new design.

Heck, I won’t be surprised if the template it NOT original. You might even find the template in themeforest.com, woothemes.com and some other themes provider.

So to make things fast, I just buy a theme for USD 20. Sell it for RM 500 and change the logo. Easy money. But what if I do not have enough customers? I have a company to run and staff to feed.

Easy. If you wanna add a twitter widget, pay. If you wanna change the banner image, pay. If you wanna update your ‘press’ page. Pay. 

Maintenance is steady income.

Maintenance is steady income. If you can only afford to pay RM 500 for a design, please spend less and buy an original theme from the 2 links I mentioned. They are easy to customized and easy to use. Cheaper. Better. And you don’t need to pay your web designer to change 2 sentences cuz your spelling was wrong.

Something is just not right with my new website

Did you notice that everytime you update your website and no one knows about it? When you were in blogspot, your followers were all updated each time you post something new. Now nothing appears in Facebook, Twitter or even Google. What could be wrong?

Or you did a search for your own web pages in Google, but nothing appears. You have to do tedious things manually ONE by ONE like putting up images or copy pasting links from a section to another.

Want to add a banner? There is no link to do it.

You wanted to do something, but you went into the admin backend.. clicked on EVERY single link and settings page. Can’t find the exact page to fix what you are supposed to fix. What is wrong?

When we have a AWESOME web design.. we can either code it with good semantic markups or do it poorly. And the sad thing is, you won’t be able to tell the difference. But the code is actually the most important part of a website.

To check this, get on Google Chrome or Safari and just visit your website. Right click on anywhere in the page and inspect element. Check the head section, if it has less than 20 lines then it is not a very good sign.

Bad coding in head section

Head sections is where we make sure that your website is easily accessible in Google, make sure your updates can be read via any RSS reader and website like Facebook or Twitter (they have apps to automatically read your feeds). Here we also specify all the important keywords in your website that is relevant to Google searches. Like if you have a shop selling nail polishes, ‘manicure’ is an important keyword.

Healthy head section. You can tell alot by looking at this section.

Expand the body section, if everything is in tables… it is not a good sign. Tables are old way of coding a website. And this probably means you are paying each time you wanna change something to the website.

Tables. So messy. And lots of inline styling.

Proper standards are divs wraps littered with classes and IDs. Also, if you see lots of numbers in them, it means you can easily create things on the fly in the backend like Blogger page elements or WordPress widgets.

Good body section. Friendly tags for you to know what is what.

What does it means when they say they will ‘submit your website to Google and Yahoo search engines’?

This is an old technology back when Google and Yahoo bots couldn’t crawl websites and those websites goes unnoticed. However, your website will most likely go unnoticed if your head sections are lacking certain codes and especially if it does not support RSS feeds. A proper website will already contain codes to be automatically discovered by Google and other search engines.

Google Submit your Content

There is no need to submit to them unless your website is all static pages and lacking those codes. However, you can do some advanced stuff with google Submit your Content to better refine your SEO and analytics results.

The power we hold is enormous

The most important thing now

We hold alot of power as web developers. If the client is rude to us and we just broke up… no problem. I can just log on to their website and delete everything. When we hold everything, we can demand for payment when it comes to maintenance.

So to prevent this, you need to understand the following concept first :

Domains are like addresses. Hazelong.com is a domain. Hazelong.my is a domain. You can’t do anything with JUST a domain. They are just like addresses. Words only.

Servers or Hosting are like houses. You can buy them at exabytes.com.my or ipserverone.com. I use Ipserverone btw. You can assign addresses to your house. A house can have many addresses.

For example. a house can have hazelong.com, hazelong.my. And also have kyspeaks.com or cheeserland.com.

Houses do alot more than domains. They keep all your files in neat little folders. And they are programmed to magically accept certain platforms. If you are using wordpress or a CMS, find out the requirement of the CMS. Make sure your house can support it.

Like for example, wordpress need the house to be able to parse PHP language.

How do the house know which address to use? Easy. We use something call a DNS manager(usually a website) to point the addresses to that house. Without the login for this manager, your domain and your hosting is a sitting duck.

So when you have your new website make sure you get the following from them :-

1. Cpanel login – This is where you login into your house(server) and can do nifty things like creating email accounts, making folders and creating logins to access your files via FTP. You can also download backups of your database(all your posts, products, settings, pages, comments.. the meat of your website).
2. FTP login – If you do not have the Cpanel login, make sure you get your FTP login at least. And download Filezilla to login to your FTP. Sometimes we can be assholes and grant you access to just one miserable folder in your house. Like a maid’s entrance. You won’t be able to do anything in this case. Make sure you can see ALL your files and folders when you navigate through them.
3. Domain management URL & login – This is where you check when your domain is expiring. And you can have the option to change domain hosting(some companies are cheaper) when you hold this information. You can also change the owner of this domain to be under YOUR name and not the web developer’s name.
4. DNS management URL & login – With this tool, you can add new domains and point them to your houses.

When you have these 4 items, you are as free as a genie. If anything goes bad between you and the web developer, all you need to do is download backups and change to another provider. You can revoke their FTP logins, change passwords to prevent them from meddling with your website.

After all, you paid for your website, you should have the keys. In this case, the 4 logins. If you found out that you have been cheated, it is best to play pretend that you do not know anything and try to acquire this 4 keys at all cost.

Another important thing to get are instructions to do little things like uploading an image for your banner or changing a slideshow.

How to choose a good web designer/developer

1. Word of mouth – This is the safest choice. Find out how much, what will be given and make sure that there is very little maintenance needed, else the initial cheap fee you pay is just a deposit to a larger payment in the future.
2. Check the portfolio – If the portfolio shows websites that look similar, go away. Bad design, look away. Look for versatile web design that are different in both look and functions. Check out the codes for the website that they have done.
3. Avoid Static pages packages – if the package that they are offering have only static pages and nothing that you can update on your own, run. It means that you have to pay them to update each time.
4. Find out what CMS are they using – Make sure that you will be able to post news, images, slideshows or products.. or anything you planned to do with their CMS. Do not accept even if there is one lacking, cuz that means you will need to pay them to do it. Also, make sure they are honest about who created the CMS. Some developers pass other themes as if they created it.
5. They must have a good looking website. Duh.
6. Response time – Fast reply is a good sign. No reply is still ok, it probably means they are swamped and too busy. Slow replies with no justification are bad. The last thing you need is your website on downtime cuz they didn’t bother to reply your emails.

Web design services offered in a bad looking website.

Common practices of a good web design are -

• Lengthy time needed to just come up with a good concept for the website. It means that its original and not based on a template.
• Attention paid to the smallest details. Little icons like facebook and twitter are beautiful and fitting the theme. There are special little extras added to your website like jQuery animations to make your website different from the rest. A pixel of gray border makes a hell lot of difference.
•  Errors and bugs are common during the coding process as the web developer clean up the codes.

It is at least a month’s worth of job and do be prepared to fork money for a proper web design and development job.  If you are looking for e-commerce design, do be careful as they are all templates modified to fit the shopping cart system. Make sure that your website do not look like their previous works.

If you have any other questions, just comment and I’ll answer.

btw, I’m not disclosing where I get the images from. This is the reason why most of the companies do not put their prices online, so that it cannot be used to their disadvantage like this. But it’s good for education no?

Maya Abstract Tutorial – 3D Modelling

Recently I have been fascinated by 3d abstract art. They look awesome and surreal. I had a notion to renew my blog design (again) and was inspired to do something along the lines of this style. I started researching for tutorials but couldn’t found any good ones for Maya. There were alot for Cinema4d in Deviantart but none for Maya so I decided to make one.

Here is one example of 3d abstract render that I like..

In this tutorial, we will be using Autodesk Maya to model the fractal polygon. You have to have some basic knowledge of Maya and Photoshop to begin this tutorial. I will not be going into details about the lighting and rendering part. This is just a modelling tutorial.

First, start up Miss Maya and go into the 4 view. Draw a CV nurbs curve in each of the Top, Side and Front view. Make sure they are all in the center of the grid. You can be creative and start drawing curse words or obscene figures. It doesn’t really matter. Close the curves. In the perspective view, you should see the 3 curves that you have drawn intersecting each other.

Select all 3 curves, go to Nurbs > Surfaces> Loft. Mess around with the settings to get the look that you want but keep the section spans at 6 minimum. You should have a good starting model already.

Now, you can move the 3 curves you created earlier independently to further define the shape of the mass glob you are creating. Once you are satisfied, I would advise you to keep the CV curves in a layer and the nurbs surface in another.

Head to Animation, Create Deformers and we will drop in a few deformers. You can use any of them in any order you like. In this tutorial, we will be using Bend -> Twist -> Sine. If you are looking for a petal shaped model, Twist is the deformer you are looking for.

Select the Nurbs surface and click on the Bend deformer. In the right tab, mess around with the values. There are no rules for this, just go crazy.

With the Nurbs surface still selected, click on the Twist deformer this time. Again, mess around the values until you get the shape that you want. The more angle you add, the more petals its gonna create(depending on your CV curves).

Then, with the Nurbs surface selected, click on the Sine deformer. Play around with the values once again. You can add in more deformers if you want. When you are done, perhaps you would like to click on your Loft1 input and add more section spans if your model is looking abit jagged.

Create a camera, set the Focal Length to an impossibly low number like 5 or 10. Spin the camera around, move it until you get an angle that is interesting to render.

Pick a few and start adding your shaders, lights and render away!

For mine, I just drop in a transparent Anisotropic shader with a tight specular. I render out the diffuse layer and saved it as PNG.

Then, I pushed the model into a Render Layer and quickly render out the occlusion.

After that, I go back into my Master Layer, drop in a Black Anisotropic shader with full reflections and I switched to Mental Ray. I added a HDR for the reflections. This will be my reflection pass.

With the 3 passes, I composited them and added a Inner Glow in Photoshop to give it a more translucent effect. I added some colours, threw in a few brushes..patterns..textures.. some typography and there you have it. A 3d abstract art.

Some of the renders in other 3D galleries have tentacles or swirls around them, you can get them using CV curves extrudes with scaling applied to them.
What I am interested in is how they UV the damn thing and apply textured shaders to them. UV seems to be a nightmare to me at this point. But for a first try, it looks easy and promising enough to try some more complicated stuff. I am pretty sure its just a matter of extruding more surfaces out of the current build of the shape.

Migrating from Blogger to Joomla

I am writing this tutorial for frustrated peeps out there who are still looking for a way to transfer blogger posts and comments to Joomla.

I am using Jcomment and the core content component of Joomla for blogging. I still have not figured out the way to import the comments into my Jcomment database. Read this

Photoshop Advance : Digital Makeover

Yo! Was busy with the bazaar.. it is finally over!!!!
My photographer went awol but there is a photoshoot planned tomorrow/wednesday, so makeup tutorials coming back soon yea.. Read this

Photoshop Quickie Part 4 : Plastic Surgery

The last 3 lessons we learnt about correcting contrasts and colour, erasing pimples and moles, and last week we learn how to get smooth skin..This week we are going to teach you the greatest secret. If you feel that you are too fat, dream no more. No breasts? We can help you.But.ButPlease. Do not OVERDO IT. Minor changes are ok.. but if you overdo it you can turn the whole table on yourself. Read this

Photoshop Quickie Part 3 : Smooth Skin Galore!

Hey girls.. welcome to the 3rd part of our photoshop quickie series.In our first tutorial, you learnt how to transform this :

to this by adjusting the contrast and colour levels:If you missed the first tutorial, you can find it here.

In the second tutorial.. you learnt how to erase pimples and moles, wrinkles.

Today you will learn how to make your skin so much more smoother… your result will look like this : Read this