We would love to work or collaborate with you

All posts by Manning

The difference between a WordPress Blog, a WordPress CMS and a static website.

A quick introduction to Hellosquare

Hellosquare is a website design and development company based in Durban, South Africa. We pride ourselves in offering the most up to date website development standards and website designs.

Two of our many high quality skills include wordpress blog development and wordpress cms development.

Blogging Joke

Image Credit: Link

Static Websites; Blogs? CMS’s? What is this strange lingo being used?

If you are a company or individual looking for a company to do your website, and you are either new to the market or unfamiliar with what all the latest hype about blogs and CMS’, take a quick read through this blog entry. I am going to highlight the different types of websites you can choose from.

Static websites

If you just want a normal website where the content always stays the same then you want a static website. You as a website owner have no control over the content on that website once it is up and live. You will always need to go through a website company to do changes to your website.

So what other options are there?

These days website owners would like a little more control over the information on their website. Luckily wordpress now allows us to offer that. You now have the ability to update content, or add information on a regular basis without needing to learn any website development languages.

What is wordpress?

Think of wordpress as the man behind the curtain that can take a website and make it do things that in its static form it cannot. WordPress provides you with a friendly admin area to update and change blog entries or website content depending on the type of wordpress implementation you choose. You can now choose from either a simple wordpress blog to a more complex wordpress cms.

A wordpress blog?

What you are reading now, is a blog entry. A blog, derived from the term “web log”, is a structure that allows you to add content to a website on a regular basis. The idea behind a blog is to allow the website owner to add blog entries to their website. You do not have control over all the content of the website. However it is still a friendly convenient medium by which to update the website with new information.

Blog entries are added to the website, and do not replace each other. This allows your website to become a rich environment of information that viewers of your website can read through to keep up to date with latest news from you or your company.

Bloggin Joke

Image Credit: Link

Why add a wordpress blog to your website?

As mentioned above, a blog helps you add content to your website, not just replace content. This means your website becomes a growing source of information. This helps with SEO and in turn helps you reach a wider viewer base.

What is a wordpress CMS

CMS stands for Content Management System. A wordpress CMS allows you to change your website content right down to the type of images you choose to use, the text you want added and the colours you want displayed.

You no longer have to learn website development to change your own website content. Hellosquare’s well developed wordpress CMS structures allow you to take your website in your own hands and keep it up to date at your pace.

Best of both worlds

If blogging sounds great and having a CMS sounds great, then I have great news for you; you can have both.

Your website does not have to just have a wordpress blog or a wordpress cms, it can have both. You can have control over all the content of the website as well as keep adding information to it.

Summary

So to summarise, static websites are basic websites that cannot be changed without directly changing the code.

A wordpress blog gives you the ability to add new information to your site using a friendly interface that you can log in to and add and edit entries.

A wordpress CMS also allows you to log in to a friendly backend interface that gives you the ability to add and change content to your whole website as you please.

You can have both a blog and a CMS for the best control over your entire website.

Want to master css absolute positioning?

Getting to know the absolute position

Avoiding absolute positioning

For the most part I avoid using position absolute. Floating left and right usually suffices. All content most websites generally require is a wrapper div, that usually has a set width of 960px, or 1024px. And then inside that wrapper you have divs that will foat left or right.

When to use absolute positioning

As a rule of thumb for myself, I only ever use absolute positioning if I know something should always be in a certain position, relative to a parent element. For example an “x” icon representing close on a popup lightbox always on the top right of the box no matter what the box size. Or if I need an element to overlap another.


In this entry I’ll pass on my knowledge of absolute positioning. To master anything coding related you should ideally type out the code yourself and test it. So I’ve put together a little tutorial with a few steps containing different codes to type out.

The absolute position tutorial

1. Task one, code the following:

[sourcecode language="html"]

<div>

<p>one</p>

<p>two</p>

<p>three</p>

</div>

[/sourcecode]

What just happened:

The above will appear in three lines in the order I’ve placed them above. It will go one, two, three and not three, two, one. The reason being is they have no css telling them otherwise. All elements are by default positioned “static”. So currently they appear in the order they were placed.

2. Task 2; style all your p tags to be positioned absolute:

[sourcecode language="html"]
<div>

<p style="position:absolute;">one</p>

<p style="position:absolute;">two</p>

<p style="position:absolute;">three</p>

</div>

[/sourcecode]

What just happened:

They no longer display one after the other but over each other.

Their positions are now set to no longer acknowledge each other, so to speak, but to now be absolute to the html tag.  By default all elements are relative to the html tag.

So lets say you  want your first p tag to be on the left and top of the page, your second to be at the bottom in the middle and your third to be on the right but half way down. You can do so by setting any of the following values: top, left, bottom, right.

Code the following:

[sourcecode language="html"]

<div>

<p style="position:absolute;left:0;top:0;">one</p>

<p style="position:absolute;bottom:0;left:50%;">two</p>

<p style="position:absolute;right:0;top:50%;">three</p>

</div>

[/sourcecode]

What just happened:

What you see now are the three “p” tags no longer in their default static order, but in defined positions on the screen.

 3. Step Three; Make them relative to something other than the html tag.

So it’s great being able to put the p tags anywhere on the screen, but what if you want them in another element? For example a navigation block?

To make absolute elements display relative to another element all you need to do is set that element to relative.

That means that when you set an element”s position as absolute it now positions relative to the nearest parent element that has its own position set to relative.

Code the following:

[sourcecode language="html"]

<div class=”parent1” style="margin:50px;padding:100px;position:relative;background:#ddd;">

<div class=”parent2” style="background:#fff;padding:100px;">

<p style="position:absolute;left:0;top:0;">one</p>

<p style="position:absolute;bottom:0;left:50%;">two</p>

<p style="position:absolute;right:0;top:50%;">three</p>

</div>

</div>

[/sourcecode]

What just happened:

In the above code there are two parent divs containing the p tags. I have given them classes to help differentiate between the two. The parent div with the class “parent2” is the div that contains the p tags, but you will notice, even though it’s the first parent tag, the p tags are poisoned relative to the first div; “parent1”.

As stated before, when you set an element’s position to absolute it positions itself according to the first parent div that has it’s position set to relative.

So even though there was a parent div within “parent1” called “parent2”, only “parent1” had it’s position set to relative. So the p tags bypassed “parent2” and positioned themselves according to “parent1”.

And that’s the trick to absolute positioning!

Conclusion:

Choose the element you want to be relative; that element will be used as the starting point for the elements that are positioned absolute. Set the element to relative using the css: “position:relative”

Set the elements you want positioned absolute as absolute in the css using “position:absolute”.

If you have more than one element set as relative; The elements will position themselves to the nearest relative positioned parent element.

Bonus Task:

4. Step Four; More than one element with absolute positioning

If you managed to follow the above and want to try something trickier; more than one absolute element, code the following.

[sourcecode language="html"]

<div class=”parent1” style="margin:50px;padding:100px;position:relative;background:#ddd;">

<div class=”parent2” style="background:#fff;padding:100px;">

<p style="position:absolute;left:0;top:0;">one</p>

<p style="position:absolute;bottom:0;left:50%;">two</p>

<p style="position:absolute;right:0;top:50%;">three</p>

<div class=”sibling” style="padding:100px;background:#333;position:relative;">

<p style="color:#fff;top:50%;left:50%;">four</p>

</div>

</div>

</div>

[/sourcecode]

What just happened:

What you see is a fourth p tag, that is positioned absolute to a new div I added within the second div. And even though the new div is closer to the other p tags they still position themselves relative to the first div.

The reason for this is that the new div is not the parent tag, because the first three p tags are outside of it, they are now sibling tags. So only the fourth p tag, which is within the new div is positioned absolute to the new div.

A final note; the default css position of elements on an html page:

With regards to css positions, all elements on a website default to a “static” position. Static is the default position of the elements you place on your html page.

This means all your elements appear on screen in the order they appear.

Contact form tutorial for developers. Easy to implement, and easy to update form source code.

The journey towards the perfect contact form

I’ve set myself a goal to code the perfect contact form. It has to be 100% cross browser compliant, it must be smooth, and it must have field restraints (required fields, email verification, image captcha box). I want to be able to copy and paste the code to different projects and do minimal changes.

The mix and match of technologies; xhtml, css, jQuery, ajax and php.

So the technologies I’ve chosen are xhtml, css, jQuery, ajax and php. All of which are very flexible and helpful.

This is not yet the perfect contact form, but it has helped me a lot. In this blog entry I would like to share the form I reuse for most of the projects I work on. It saves me a lot of time!

Just a note, this contact form is not for beginners, you will need to know at least a little about xhtml, css, jQuery and PHP. Feel free to still give it a try, but you might find it tricky to implement. The thought process behind this form is for it to be complex but adjustable, something for developers to grab and use as a template to start from, saving developers the effort of having to recode everything from scratch every time.

The Tutorial

View Demo     Download

The file structure

/ (home folder)

index.php

css/

-default.css

images/

-refresh.jpg

includes/

-contact-send.php

-get_captcha.php

includes/fonts/

…(some font files)

scripts/

send-email.js

The scope of the contact form

A lightweight simple form with the following fields:

Name (required)

Email (required)

Contact Number (required)

Company

Message (required)

Captcha box

Restrictions:

The contact form must not send unless the required fields are filled in and the captcha code is correct.

All of the above is met.

Step 1

Download the zip folder

Step 2

Unzip files. Php files have to be run off a server, so place the files either on a local server on your system or on a hosted server.

Step 3

You need to update the address that the email gets sent to.

Open “contact-send.php” in your scripts/ folder, and change line 27 to your email address.

27| $email = “email address here”;

If you are using a local server and your mail smtp has been set up and can send mail from your localhost;

OR

If you are on a hosted server;

Uncomment line 34

34| //mail($email, $subject, $message, $headers);

So take away the two forward slashes “//”

If you want to test the contact form on your localhost, but don’t want to send an email, you can leave the comment tags there. That will let you test the functionality of the contact form, but will not send an email.

Step 4

Go forth and be fruitful. Tweak it to your heart’s desire. As I mentioned at the top of this blog post; this is just a template contact form to start off with. From here you can add, remove and edit the form.

View Demo     Download

After Note:

The captcha I used is a great lightweight captcha I found via google.

So these guys deserve the credit for the awesome captcha that the form uses, it’s been a breeze for me to implement and reuse, so I’ve just stuck with it.

http://www.99points.info/2010/08/ajax-stylish-captcha-and-contact-form-using-jquery-and-php/

If you run into any problems;

You might find yourself moving files around; remember to check any paths that are referenced in the files. For example if you move the fonts file, update the variable “$dir” in the get_captcha.php file on line 12. So keep an eye on your files and update links when you move them around.

Using the jQuery selector to select multiple elements using their id

Generally speaking id”s should be unique and classes should be used for multiple elements. Down the road you will run into some problems when you want to select multiple elements that have the same id. The reason; if you use an id as your selector jQuery returns the first element only.

Example:

[sourcecode language="javascript"]</p>
<p>idEl = $(&quot;#element&quot;);<br />
alert(idEl.length);</p>
<p>[/sourcecode]

The above code alerts “1″ as only the first element is returned, so even if you have 5 elements all sharing the same id, only the first element is returned

So something I”ve learnt from coding with jQuery; id”s should be kept unique, no sharing. Classes can be shared.

That said though once in a while, I slots find myself working on several projects, guzzling down too much coffee and I”ll make a mistake like giving more than one element the same id. Face palm moment.

So how to course correct?

You can either change every id element to a class…

Or: 

Be sneaky, use a parent element, and use find () to fetch all the elements with the id in that parent element.

So in coding words:

HTML:

[sourcecode language="html"]<br />
&lt;body class=&quot;body&quot;&gt;<br />
&lt;div id=&quot;parent&quot;&gt;<br />
&lt;div id=&quot;element&quot;&gt;<br />
one<br />
&lt;/div&gt;<br />
&lt;div id=&quot;element&quot;&gt;<br />
two<br />
&lt;/div&gt;<br />
&lt;div id=&quot;element&quot;&gt;<br />
three<br />
&lt;/div&gt;<br />
&lt;/div&gt;<br />
&lt;/body&gt;<br />
[/sourcecode]

jQuery:

[sourcecode language="javascript" wraplines="true"]<br />
&lt;script&gt;<br />
$(document).ready(function() {<br />
idEl = $(&quot;#element&quot;);<br />
alert(idEl.length); //returned is &quot;1&quot; as only the first element is returned, so even if you have 5 only the first element with that id is returned</p>
<p> allEls = $(&quot;.body&quot;).find(&quot;#element&quot;); //I gave the body a class and used that as the parent tag<br />
alert(allEls.length);</p>
<p> allEls = $(&quot;#parent&quot;).find(&quot;#element&quot;);//I wrapped a div around the elements I wanted to select and used that as the parent tag<br />
alert(allEls.length);<br />
});<br />
&lt;/script&gt;<br />
[/sourcecode]

Full Service Web Hosting

cloud-hosting

Hello Square are proud to add another quality service to our portfolio. Full service could hosting is now available for all our clients.

Due to the scalability of Cloud Hosting we were able to create a 1 size fits all package that will suit all of your hosting needs. In the unlikely event you need more space or additional features we will be more than happy to oblige.

More info on Full Service Web Hosting.

Frigidaire fridge restoration, before and after we met.

fridgeOne

I have always been after an old school fridge, who hasn’t? But for me it had to be a Frigidaire fridge, nothing else would do. I came across this bad boy a few months back when I was trawling Pinetown’s industrial parks looking for ideas (some may call it trash) for the new office.

Found it, paid for it, had the custom paint mixed and delivered to my restorer in matter of hours.  Check out the before and after pics, im chuffed to say the least – keeps me company here in the office now during those long development evenings.

Continue Reading →

1936 Biere, keeping it simple but effective.

imswissness

We have been working on some print ads for one of our long standing clients 1936 Biere. The idea was / is to keep the ads clean and simple ie the Swiss way.

It’s one of life’s little conundrums that simple and clean is easy to accomplish, this is generally not the case when are trying to get a point across or in this case convey the products quality & playful ideology.

The lead image is one of our posters that will be making its debut in Verbier Switzerland this winter.

Continue Reading →