Saturday, April 3, 2010

Want to create a W3C valid JOOMLA template……………. Have a look at this.

This tutorial has a small information as how we can build a valid joomla template. Joomla is an open source Content Management System (CMS) that is freely (literally) available and supported by a large on-line community. The site will actually be live on-line at from the very beginning, you’ll be able to see the different stages as the design develops. As this is a CSS designed site, you’ll be able to slowly see the raw joomla design get styled step by step.

Web standards for JOOMLA Design

You may have seen words such as “web standards” or “CSS” or even “accessibility“. They are often all used together in some sort of commentary about a “design for the future rather than the past”.

What do we mean by that?

Many web pages are designed for older browsers. How so or why so?

Browsers have continually evolved since the www started. New ones have appeared and old ones have disappeared (You all might be having a idea about remember Netscape?). Another complicating factor is that different browser makers (like Microsoft) tend to have their browsers interpret html/xhtml in slightly different ways. This has lead to web designers having to design their websites to support older browsers rather than new ones. It’s often decided that the web page needs to appear properly to these “legacy” browsers.

Web standards put into place a common set of “rules” for all web browsers to use, to show a web page. The main organization pushing these standards is the World Wide Web Consortium (WC3), whose Director, Tim Berners-Lee has the distinction of actually inventing the world wide web in 1989 (how’s that on a resume!).

CSS

Cascading style sheets or CSS was developed a few years ago that made styling easier for web designers. You have all styles in a separate file and they are applied to the whole site. Recently is has been part of a movement to separate content from presentation. Everyone should make a note that CSS is key to building a valid Joomla website that meets WC3 standards.

Accessibility

Accessibility, sometimes mistakenly called usability, is an attempt for a page to be accessible to all possible viewers. Usually this is chosen to mean such examples as someone that is blind (uses a screen reader) or old (struggles with small fonts/delicate mouse based navigation). I use these two as examples as they are the ones quoted most often (don’t shoot the messenger!). I take a much broader view and include viewers with or without disabilities, young or old, or even non-human, such as search engine spiders!

Trying to get your joomla website to meet these standards can be hectic job. Any sort of CMS generates its content dynamically, which can mean code gets put in that invalidates your site, the joomla design is never constant.

Have a look what exactly Joomla content is All about

There is no “right way” to create a website, it depends on the designer’s own background. Those more graphical make an “image” of a page in a graphics program like Photoshop and then break up the images to use (known as slice and dice). More technologically inclined designers will often just jump straight into the CSS and start coding. As a goal of this project is to have the process be as transparent as possible for people to see, we’ll use a process with lots of small steps. We’ll have two other twists in the joomla design process:

* We will put up a site a raw content very early in the process, normally this would come as one of the last stages.
* We will design a basic 3 column CSS joomla template first and then adapt to our desired design. We are doing this so that it’s possible to see a “universal layout” and see how it can be adapted to different needs.

So, with those two points in mind, here is our modified design process.

1. Outline and discuss website criteria.
2. Install Joomla with no CSS, a raw joomla design with no styling, publish onto web.
3. Create basic position 3 column CSS layout.
4. Adapt 3 column CSS joomla template and complete any further styling.
5. Adapt this Joomla design to achieve desired site functionality.
6. Take comments generated by community and create detailed guide to building a valid Joomla website.

We’ll start with a fresh Joomla website install. We’ll use this section of this website to place the articles discussing the process. We’ll also use a comment tool so that anyone can make comments. Hopefully this will be a learning experience for us all.

Summary:

* Joomla is a free, powerful content management system, we’ll be using it to build a valid Joomla template that meets WC3 standards.
* Web Standards describe a set of rules for all web browsers to use to interpret web pages. CSS is a design protocol that is closely tied to web standards.
* Getting a joomla design to meet W3C standards and validate can be difficult.
* Microsoft needs to be taken out back and shot.

Monday, March 29, 2010

WANT TO START WITH HTML + CSS THEN SHOULD HAVE A LOOK AT THIS…………

There are 7 steps as of how you can start working with HTML + CSS. It can be useful for people who have never used css style sheets before & would definitely want to learn about it……………
Step1. It can be suggested to use only the very simplest of tools. E.g., Notepad (under Windows), Text Edit (on the Mac) or KEdit (under KDE) will do fine. Once you understand the principles, you may want to switch to more advanced tools, or even to commercial programs, such as Style Master, Dreamweaver or Go Live. But for your very first CSS style sheet, it is good not to be distracted by too many advanced features.
Don't use a word processor, such as Microsoft Word or Open Office. They typically make files that a Web browser cannot read. For HTML and CSS, we want simple, plain text files.
In fact, you don't have to type it: you can copy and paste it from this Web page into the editor.
Note** (If you are using Text Edit on the Mac, don't forget to tell Text Edit that the text is really plain text, by going to the Format menu and selecting “Make plain text”.)


Step 2. Let’s add some colors to the template
You probably see some black text on a white background, but it depends on how the browser is configured. So one easy thing we can do to make the page more stylish is to add some colors. (Leave the browser open, we will use it again later.)
We will start with a style sheet embedded inside the HTML file. Later, we will put the HTML and the CSS in separate files. Separate files are good, since it makes it easier to use the same style sheet for multiple HTML files: you only have to write the style sheet once. But for this step, we just keep everything in one file.
We need to add a themselves. They belong to HTML, not to CSS. In the new editor window, you should now have the complete style sheet: