Bookmark Us

Web Design

Web design in the 21st century takes advantage of the truly global and real time nature of the internet. The real breakthrough to the mass market of community sites and social networking has changed the way that users expect to interact with web sites - Want to know how to start your own Facebook... Read on
Upgrading Joomla - Performing a Fresh Install
Joomla
Sunday, 14 June 2009 12:50
From time to time Joomla undergoes changes, bugs are fixed, functionality is added and security is enhanced to that end it makes sense to keep on top of the most current stable release, at the time of writing that is 1.5.11. 
 
Before attempting any of this ensure that you have a back up of your database, not only is it just good practice, but you will need it later.

Visit http://www.joomla.org/download.html  and download the latest release zip file to your harddrive, do not unzip it (unless you like to waste time and bandwidth).

Using your prefered FTP client create a new folder on your server name it what you like ('joomla1.5.11' would make sense) this will become your new joomla root. Create a sub-domain name it what you like and point it at the new folder.

Upload the zip file to this location and unzip it then copy your templates folder to this new joomla root folder.

Next navigate to your subdomain in your browser and install joomla via the web interface.

Step 1: Choose your Language

joomla installation
 
Step 2: Ensure you meet the system requirements (you will as you already have Joomla installed else where on your server) 
 
joomla installation check 
 
Step 3: Accept the GNU license.  
 
joomla installation licence 
 
Step 4. Enter your database details
 
joomla database configuartion 
 
Note: The safest way to do this is to create a completely new database for the install this avoids having to muck around migrating tables, although if you are lazy you can just install over your existing database.
Be warned this will put your site down until you go into PHPMyAdmin drop the new database and import the database.sql that you made earlier.
 
Step 5: FTP Configuration. Ignore this step, all your FTP details are contained in the database.sql that you have backed up. 
 
joomla installation ftp config
 
 Step 6: Main Config Site name and Admin e-mail.
 
joomla fresh installation main config 
 
Don't bother with any sample data you're only going to drop it all in the next step.
Click on next, and thats it, you've installed Joomla.

Using your FTP client delete the 'installation' folder in the Joomla root.

Now you need to open up PHPMyAdmin navigate to the new joomla database and drop all of the tables.
 
Once this is done you are ready to import your old backed-up database.
 
Select your database and click on the 'SQL' icon. 
 
phpmyadmin

Once in the SQL Query manager click 'import files' 
 
phpmyadmin import files
 
Navigate to the location of your database.sql and click go. 
 
phpmyadmin import files 
 
Once the database is imported you are done, navigate to the subdomain and you will see a clone of your site, only it will be running the latest Joomla release.
 
The last step is to point your real domain to the new Joomla folder wait for the change to take effect, and then point your subdomain elsewhere (this avoids dupe content issues)
 
Hey presto you've upgraded your site.

 
NB If you are running lots of plugins, modules and components these will need to be reinstalled, the best idea is to download the latest releases for these as well - there is no need to reconfigure all these plugins, modules and components as this info is all contained within your database import.

 
Last Updated on Sunday, 14 June 2009 13:31
 
Creating an Article in Joomla
Joomla
Friday, 29 May 2009 16:03

I will take you through a step by step process of creating a website using the open source content management system, Joomla. A Content Management System (CMS) is basically a software package which gives you a way separating the content from the view giving you more flexibility and ease of operation and maintenance. It also provides an easy to use framework to add and publish content to your site. In some ways it is similar to Wordpress but is more advanced and gives a lot more options both for view and content management.

If you need more information on what a CMS is, you check out the Wikipedia.

You can find a lot of information at the Joomla home page for the more advanced settings and features but I'll do my best to give you as much information as possible.

Here's what you will need to get started:

For now lets start with a basic local installation of Joomla on your PC. To fully implement Joomla, you will need a file system, a database and a web server. Instead of installing and configuring each of them separately, we will a package which includes all of them.

You can find these packages at Joomla Extension directory which by the way is where all the extensions for Joomla are published. Extensions are a way of customizing you site with Joomla. We will go extensions a bit later in this tutorial.

Basics of Joomla

There a few major components that Joomla uses to accomplish the task and lets go through each of them one by one. As with any CMS, any Joomla site has 2 faces, first one is what the world sees'. Its all fancy and beautiful and all your work behind the scenes is paid off here. We will refer to this part of the site as the frontend from now on. The other side of the web-site is the administration site where you spend a major chunk of your time adding content to you site and setting up how its displayed on the frontend. This is the back end of the site. The backend for Joomla is a very important part of your website. Everything you see on the front end is added and configured in the backend. To get to the administration page of your Joomla site, just add "/administrator" to the end of your page url.

Eg. localhost/Joomla/administrator/

The default username/pswd for these standalone servers is admin/admin. If that doesn't work, you might want to check the Read Me notes that came with it. Static content in Joomla is created as Articles. These articles can be placed in different Categories which in-turn are in Sections. If the article is a stand alone page and does not belong in any of these Sections, it can be left out as a "Uncategorized" which means it's a static page by itself.

Creating an Article

To create an article simply click on the "Add new Article" icon on the dashboard or select Content à Article Manager

Click on the button New  to create a new article.

You can start adding content to the text area similar to MS Word and add formatting to it. Once done you can save by clicking the Save button on the top right.

Lets create a new article called "Hello World" and make it a static page by selecting the Section as Uncategorized.

And if you want to see how your article looks on your site, click the Preview button on your top right corner.

There you go, you have created an article in Joomla which is also a static page if you want it to be.

Stay tuned for more Joomla tutorials.

Ganesh Madireddy is an IT professional who specializes in creating small to medium scale web solutions using open source Content Management Systems and configuring them for Search Engine Optimization. He is also the webmaster for a few high profile web-sites.
You can visit his web-site at http://www.3rdrockit.com to find more tutorials on Joomla (including this one with images) as well as other open source software packages.
Last Updated on Saturday, 13 June 2009 21:40
 
Installing Joomla Using Fantastico
Joomla
Friday, 29 May 2009 16:00

You can learn how to install Joomla on your website in a number of ways. However, the simplest and by far, the quickest is through Fantastico. This usually takes about 1-2 minutes once you know how. In this article, we are going to cover just that.

So, here is the step by step process for installing Joomla on your own website.

  1. Log in to your hosting account's Control Panel. This should usually be http://www.mydomainname.com/controlpanel, where 'mydomainnane' is replaced your own website that is hosted on that hosting account.
  2. Look for the smiley icon that says "Fantastico" and click on it. This is where you will be installing the Joomla package from. Note that Sometimes, it may say "Fantastico De Luxe." Don't worry it is the same thing. Much like saying "my room" and "my bedroom" ;)
  3. Look for "Joomla" under the "Content Management" category of scripts in Fantastico and click on it. Also, note that the title 'Joomla' may sometimes have some numerical suffixes showing which version it is. For example, the title may read "Joomla 1.5" for version 1.5 of the CMS. Just click on the most recent version and go to the next step.
  4. Look for the hyperlinked blue "New Installation" link and make sure you have at least as much as the minimum disk space required for you to install Joomla on your website. This is usually about 25 MB of disk space. This is not usually a problem, with most people's disk space running into the tens of gigabytes. But it is still good to make sure you have enough to hold a new Joomla installation.
  5. Choose where on your website you want to install Joomla. Will it be on your main domain, an existing sub-domain or a new not-yet-existing sub-domain or directory? Indicate it in this part of the installation process.
  6. Fill out other required fields that are required to smoothly install Joomla on the site. This includes creating an Admin username and password. Don't choose 'Admin' and 'password' as your username and password. Many people do this and have been hacked. Also, fill out the site name or main keyword, email address and other details here. Then click the "Install Joomla" button.
  7. On the next page, make sure that all the needed information is correct. Also, note down your Admin username, password and backend page (the one that ends with /administrator). Finally, hit that "Finish Installation" of a button.

 

Voila! You have just learned how to install Joomla on your website. This should usually take only 1 or 2 minutes at most. After all, all you are doing is just hitting buttons, except for when choosing a username, etc.

If it still sounds a little like "nerd talk" (with all due respect to all the nerds out there ;) ), you can watch the video version of this article where you see the installation done live on the screen and see if you can learn how to install Joomla after that.

Muhammad Jalloh is the creator of dozens of Joomla Video Tutorials to help you learn how to create, design and manage your own Joomla website quickly and easily. You can read or view other tutorials on http://www.JoomlaSultan.com
Last Updated on Saturday, 13 June 2009 21:40
 
Web Design Basics: HTML and CSS
HTML and CSS
Friday, 29 May 2009 15:22

In learning web design, HTML (HyperText Markup Language) is something you must know, WYSIWYG (What-You-See-Is-What-You-Get) HTML editor is something you must have and CSS (Cascading Style Sheet) is some big treasure to you which deserves burying yourself into it deeper and deeper. Below I’ll explain why and will also talk about some learning tips.

HTML

HTML is a common language for building and designing website. It tells the Internet browsers like Internet Explorer or Firefox how to display web content on the screen via HTML tags. In fact, everything you see on the web is under the control of HTML. What is HTML editor? It is a software like Macromedia Dreamweaver or Microsoft Frontpage which helps you to create websites even though you know nothing about HTML. WOW! Does it mean by using HTML editor, you need not learn HTML yourself?? NOT necessarily.

As I told you earlier, everything you see on the web is under the instructions written in HTML. Therefore, HTML editors also create webpages using HTML. The difference is that when you use HTML editor, you just have to click the buttons to "draw" webpages as you see on screen (What-You-See) and then HTML editor writes the HTML tags for you to display the webpages on web browser in exactly the same form (What-You-Get). However, it always happens that HTML editors write clumsy HTML tags, especially when you amend the webpage layout again and again during your website designing process, which may possibly deter search engines from reading your web page and in turn poorly affect your search engine ranking. What's worse, your website cannot even be listed in search engines at all! The clumsy HTML codings will also increase your file size and hence the loading time, encouraging visitors to leave your website soon.

Therefore, you should understand HTML to unable yourself to modify the HTML codes produced by WYSIWYG HTML editors. Besides, in the designing perspective, there are also some design limitations and restrictions using HTML editors when compared to free writing of HTML codes. If you would like some special design or custom look to your webpages, you are recommended to have some knowledge on HTML yourself. In more advanced level, if you are to do SEO (Search Engine Optimization) for your web page, you should know how to make use of meta tags like title, content, alt, header, etc. in order to attain better keyword positions in search engines. If you just happen to own a website designed by others, you should learn HTML in order to edit the context of your website without the need to depend on someone else in this simple but routine updating task. Or you have no website yet but you like to write articles to be displayed in others' websites, you also should learn HTML in order to create appropriate links in your articles for others' easy reference.

Learning Tips:
- If you have already got some basic knowledge on HTML, you may study "Getting Started With HTML" which is the most popular free HTML tutorials online provided by World Wide Web Consortium (W3C) which develops interoperable technologies including specifications, guidelines, software and tools to lead the Web to its full potential.

- If you still find the above tutorials too difficult or boring to start with or your time being too limited, “One Hour HTML” is highly recommended for you. It is a practical program to take you step by step in learning HTML from the very beginning and it offers you hands-on HTML encoding experience instead of merely teaching you theories so that you could have already experienced creating webpage using HTML as early as in the first hour of learning.

WYSIWYG HTML Editor

Indeed, despite my understanding on HTML, like many other web designers, I like to use WYSIWYG HTML editor such as Dreamweaver a lot and in fact, I can't even think of living without it once I encountered it as it saves me so much time in writing the complex HTML codes and the best advantage is that i can immediately visualize the effect in the splitted WYSIWYG designing screen whenever I change the HTML codings above in the HTML encoding screen! I am not contradicting myself. In fact, the key to make use WYSIWYG HTML editor software is that you have to learn the software well and to use its buttons for quick and easy HTML editing yet you don't let the software generated HTML codes to take the control but it is you who know how to master all HTML tags and to make any necessary changes to the HTML tags in order to bring the best visual and seo benefits to your website.

Among all HTML editors in the market, Dreamweaver and Frontpage are the most popular ones. Dreamweaver is very popular among professional web designers while Frontpage is popular for small enterprise users. Dreamweaver has more user-friendly features than Frontpage which include its seamless integration with Flash, its automatic generation of closing tags once you enter the opening tags, the fact that it would not automatically re-write your codings like Frontpage does when you save an external HTML page not created by Frontpage, etc. Despite less user-friendly features, Frontpage is a Microsoft Office's tool which many of you will be familiar with and it is fine enough for creating or editing websites for small projects.

Learning Tips:

- If you have never encountered HTML editors before, you may download the free trial provided by Macromedia.

- There are a few good Dreamweaver tutorials in the market. Among those, “Tutorials-4-You” and “Dreamweaver Made Simple” are two more popular ones due to the interactive nature of their video tutorials, giving Dreamweaver beginners hands on experience in using Dreamweaver from the very beginning of the tutorials. For "Tutorials-4-You", a free demo is offered for you to experience the tutorials yourself and you can choose the version of Dreamweaver in meeting your practical needs. For "Dreamweaver Made Simple", you are offered free download of a few chapters of the videos plus the ebook. Why not giving a try? It's free and for sure you'll have a lot of fun!

CSS

Aha! So it comes the time for CSS. If you are using HTML editors like Dreamweaver, indeed you are using CSS and creating styles yourself without even your noticing it! Wait, so you may ask, why do I need to learn CSS when I am able to create styles even without my own notice using an HTML editor? I can just tell you the answer is - "magics". Yes yes, CSS is indeed a magic and it also creates many magics. But are you satisfied if you are just able to perform one of the many magics of CSS? Your answer is surely NO. Let me tell you what the CSS magics are.

CSS Magic #1:

- You no longer need to rewrite the same set of presentation style attributes like font color, background style, alignment, border, size, etc. repeatedly within the HTML codings but can group the set of attributes into a single style class within the stylesheet. In your HTML document, you just have to call it out using the style name. CSS is well designed to allow the separation of presentation style from the main content and a stylesheet can either be included inline as part of the HTML document or referenced externally as a CSS file. (So you may have already tried this magic from Dreamweaver)

CSS Magic #2:

- You now have great control over how your website looks and can change the presentation of hundreds or even thousands of your web pages by altering just one file (i.e. your stylesheet!) if it is referenced externally as a single source by your different web pages instead of being contained inline in each one of your web page. Presentation information including positioning, layout, font, color, etc. for your entire website can be contained in this single CSS file.

CSS Magic #3:

- You can eliminate the use of table to be nested inside some more tables for your web design layout anymore as you may now use the CSS file to control the positioning of all elements inside your website. Spiders no longer have to crawl through each one of your tables and page loading time can be much faster as visitors only have to download the lightweight stylesheet once and it is automatically reused for every page. What’s remained to be loaded is the actual HTML content which is now much smaller in size and hence your website can be made visible in a flash! What’s more, you can now get rid of a lot of complicated codes with tables and so your site code can be cleaner and neater for prior view and amendment.

CSS Magic#4:

- You can use CSS to place your important keyword phrases at top of your web pages which search engines love before other of your source code. In such a way, you can gain search engine ranking benefits as search engines like Google gives more weight to content closer to the top of your HTML document and now search engines can pick up the main content of your website first before your header images or navigation menus.

CSS Magic#5:

- You can use CSS to simulate some beautiful javascript effects like rollover buttons in your website design. Yet, you need not have any images visible on your html codes which will slow down your page loading time and you need not worry about visitors turning off javascript in eliminating pop-ups as for now, all are done just inside your CSS file instead of your HTML documents.

Actually CSS can bring about much more than the above 5 magics. As I said in the first paragraph, learning CSS is not a "must" but you can certainly perform magics in your website when you know it more and more. Moreover, using CSS is a trend in web design and it is also conforming to future web standard in letting your website compatible with different browsers and making it much easier to be spidered by different search engines.

Learning Tips:

- I myself am learning it right a way and I find myself like a magician whenever I learn to eliminate the long HTML tags and replace them using CSS! I have done many researches on CSS tutorials and I find “How To Master CSS” of such a high quality and it meets my needs so well! It is a CSS know-it-all, teaching me all I need to master CSS in simple languages and how to use CSS to its full potential. Its step-by-step training videos and comprehensive CSS book are my favourites and it is even used by school teachers in teaching web design in class! It’s really worth a try if you are to learn CSS yourself. There is also a 100% risk-free money back guarantee, as for other professional web design related tutorials that I recommended. But I’m sure you won’t need it after your first trial on the tutorial!

- If you want a free tutorial regarding some basics of CSS instead, I would recommend “Adding A Touch Of Style” which is also provided by the reputable World Wide Web Consortium (W3C).

Conclusion

Building and designing website is not as difficult as you think. It just takes you hours to start with but of course it takes more time for your further practices. However, it will become your valuable asset for life once you've acquired the skill and got to know the crack. Don't you hesitate anymore. Start learning it today!

About the Author

By Siuchu Suga, webmaster of About Web Design.

Want to learn more about how to design a good website and obtain more information on website design tutorial
Last Updated on Saturday, 13 June 2009 22:03