mDomba PWS* * personal web space

Is it possible to create a one page website?

One that can provide relevant information on your chosen topic and yet still be lightweight and easy to write AND feature well in the search engines?

Well the answer is undoubtedly yes! And here’s where I will tell you how.

We’ll go through the entire site step by step.

1. Get jquery at www.jquery.com!

What is jquery?

Jquery is a super-lightweight multi-functional javascript library which allows you complete control over every aspect of your web pages (CSS and HTML).

It’s a simple include that you provide in your web page…

eg. “<script type=”text/javascript” src=”jquery.js”></script>”

Check out the jquery.com website to get more details, but for the time begin, just understand that we need this to dynamically “call in” content to our one page site.

2. Get a template for your site!

Try http://www.freecsstemplates.org/ for some great free web templates.

Pick a template you like and create the file index.html.

This will be your “one page” site and all content will be “pulled” into this page.

3. Create your content area

You must now create the DIV tag where your content will be placed.

A line of code something like…

“<div id=”content”></div>”

is required in the middle of your page.

This is where jquery will place your content.

4. Create small files to hold your content.

You’ll need to create files that will hold your content in basic HTML format.

For example, aboutus.html may contain…

About Us

WebCom Systems has been in the internet business

for over 10 years now and has vast experience in developing

every type of site from basic advertising sites to large ecommerce software applications for a variety of businesses.

5. Create a menu to call in the content

Now this is where the jquery magic begins! We now need a simple menu to drive the website.

First we need a javascript function to call from our menu, here it is…

“<script>function Call_content(url){$(“#content”).fadeOut(‘fast’).load(url).fadeIn(‘slow’);}</script>”

So, your menu that call this javascript function should look a bit like this…

About Us

So there we have it! You can now add as many content files as you like and add them to your menu!

Easy eh?

Now to complete the whole setup, remember to

-> add your site to Google webmaster tools
-> add relevant keywords and description to your page

-> add in Google Analytics for site stats
-> maybe add in a few adsense adverts!

And there you have it, a one page website!

Please feel free to visit my company website at http://www.webcomsystems.biz to see a working example of this.

jQuery 1.4.1 Tutorial – Hello World!

Months ago I found a tutorial on how to create a tsunami with flash (link below). So I decided to make a easily customizable script with jQuery and this is what I got.

In this lesson we cover getting jQuery fully installed and inserted into our html document. Also, I’ll be introducing you to the function methods that jQuery uses (the ones that you can’t get around). Once those are in place, and jQuery is ready to go, we give it a full launch by testing it on a simple div box element!

You hear the word Ajax a lot these days, particularly in technology, so; what are people talking about? A Greek hero from the Odyssey – sure. A bathroom cleanser that gets your sink sparkly – indeed. But today, more often then not, Ajax refers to a specific type of web programming that has taken the internet by storm.

This is a quick tutorial of how you can use jquery to make some cool animation effects. It just using the slideToggle and some added CSS3 rounded corners to make it look even better.

This video tutorial will show beginners exactly how to get s

What is a Website Programmer?

Someone who has taken at least two years to learn and experience the art of writing web pages by hand, in the HTML programming langauge. And even this would not qualify you as a website programmer really. A “Proper” website programmer is someone who can programme, by hand, in HTML (HyperText Markup Langauge), CSS (Cascading Style Sheets), PHP (Personal Home Page and then PHP Hypertext Preprocessor), JavaScript, MySQL and other programming/scripting languages. So what has this got to do with Web Browsers?

This is the first in a series of screencasts covering AJAX with jQuery. AJAX is briefly explained and we implement an AJAX call using the jQuery load command.

This is an introduction video to the jquery Javascript Framwork. Stay tuned for upcoming lessons on using this powerful plugin!

Learn how Dave Ward (@encosia) uses firebug, jquerify and selectorgadget to learn jquery and any other client-side technology. Hosted by Craig Shoemaker (@craigshoemaker) for the Polymorphic Podcast polymorphicpodcast.com New: Check out Dave’s series ‘Mastering jquery’ : tekpub.com

Ajax, Web 2.0, etc. are the buzz words of this century, may be more than that. Web 2.0 is the supposed second generation of internet-based services and Ajax (Asynchronous JavaScript and XML) is the platform on which it is built. These bring vast improvement to the usability, design and functionality of websites.

Pro JavaScript – IDEs

JavaScript has seen a rise in popularity in the last five years, from almost dying a death from incompatible browser versions.  Instead, modern web developers have a great arsenal of tools to help them create quality JavaScript for every web application.

Pro JavaScript – Libraries

JavaScript has seen a resurgence in popularity in the last five years.  What was once almost written off in the early 2000s is now a hot skill to have for any web developer.  The landscape has changed a lot over those years, and JavaScript developers have a number of options at their disposal to make development much much easier.