TeachMeJoomla
c2- Installing Joomla doctype and the blank joomla template |
Tutorial 2: Installing Joomla, doctype and the blank joomla templateReprinted with permission from Compass Design: Valid W3C joomla template designs for your website In this article we will look quickly at installing joomla and then spend most of our time discussing the joomla doctype and how it relates to a valid joomla site. We'll also briefly look at how to construct a basic or blank joomla template with the index.php file. Installing JoomlaThere are several ways to do this, fantastico, manually, and there is a handy tool to do it http://joomla.astang.com/autoinstall. Please note I have never used this, so you are on your own! My preferred method is to do it manually, its really pretty easy, especially if you have cpanel on your host server:
Now, we have only uploaded the files, we haven't "installed" it yet. I am not going to go into details of how to install Joomla. Here is the 'official' guide http://help.joomla.org/content/view/39/132/ The Blank Joomla TemplateNow, one of the points here is to start with a blank joomla template. So, let's set that up. You will need this file: livesitedesign.zip. In this file are the various files and folders that make up a blank Joomla template:
To add the template (again, copious tutorials exist) you go to the admin portion of your site and install the template by uploading the zip file. Note you can actually add the files individually (not in a zip) too. You have to put them in yoursite.com/templates. The index.php: joomla doctypeSo here we are getting to the first significant part of this project. What actually is in an index.php file? The part we are going to talk about is the "doctype". This bit of code that code goes at the very top of a web page. Here things start getting messy, and to be honest, I only have a vague grip on it myself! If you don't want to be bothered by all the technical details, just be aware that at the top of our page we have this in our template: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo _LANGUAGE; ?>"> Got it? OK, you can skip the next part then... Browser WarsThe nitty gritty of doctypes starts getting messy. I especially like this observation from alistapart.com, [information on W3C's site about doctypes is] "written by geeks for geeks. And when I say geeks, I don’t mean ordinary web professionals like you and me. I mean geeks who make the rest of us look like Grandma on the first day She’s Got Mail.™". Anyway, there are several doctypes you can use. Basically, the doctype tells the browser how to interpret the page. Here the words "strict" and "transitional" start getting floated around (float:left and float:right usually). Essentially, ever since it started, different browsers have had different levels of support for CSS. This means for example, that Internet Explorer won't understand the "min-width" command to set a minimum page width. Shame really, because then you have to use "hacks" in CSS to duplicate the effect. Strict means the html (or xhtml) will be interpreted exactly as dictated by standards. A transitional doctype means that the page will be allowed a few agreed upon differences to the standards. Now to complicate things, there is something called "quirks" mode. If the doctype is wrong, outdated, or not there, then the browser goes into quirks mode. This is an attempt to be backwards compatible, so Internet Explorer for example, will render the page pretending as if it was IE4. Scary eh? Now, unfortunately, people sometimes end up in quirks mode accidentally. It usually happens two ways:
Standards Compliant JoomlaSo, here is the good bit, making a page standards compliant, where you see "valid xhtml" at the bottom of the page. Having your page be standards compliant does not mean really difficult coding, or hard to understand tags. It merely means that the code you use matches the doctype you said it would. That's it! Nothing else. Sometimes I get the feeling that people think of standards as some higher level of coding, but really its just saying what you do, and then doing what you say. Some useful links:
What else is in index.php?Let's look at the structure of the header first. A great outline is at http://help.joomla.org/content/view/44/60/. Unfortunately it does have a layout based on tables, but we will change that. We want to be as minimal as possible, but still have enough for a production site. The header information we will use is: <?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo _LANGUAGE; ?>"> <head> <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" /> <?php mosShowHead(); ?> <script type="text/javascript"> </script> <!--http://www.bluerobot.com/web/css/fouc.asp--> <style type="text/css" media="screen">@import "<?php echo $mosConfig_live_site; ?>/templates/<?php echo $cur_template; ?> /css/template_css.css";</style> </head> OK, so what's all that?
<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?> Makes sure that the file isn't being accessed directly.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo _LANGUAGE; ?>"> We talked about this above. The "<?php echo _LANGUAGE; ?>" is just pulling the language from the site global configuration.
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" /> What character set we are using (don't ask).
<?php mosShowHead(); ?> Header stuff that is set in the global configuration again. It includes the following tags (for example):
We'll come back to this later.
<script type="text/javascript"> </script> To stop a bug, that being a flash of un styled content. Details courtesy of Blue Robot. Note this can be any script file and we'll be adding one in here later.
<style type="text/css" media="screen">@import "<?php echo $mosConfig_live_site; ?>/templates/<?php echo $cur_template; ?> /css/template_css.css";</style> I am using import as a way to stop the site breaking with Netscape 4. Users of ancient browsers won't be able to get the CSS sheet so will see our neat un styled content. If you wanted to cater to these older browsers, we would have too many CSS hacks, so we do this. Somewhat of a brutal one, but hey, what are you doing with Netscape 4 anyway? A blank joomla template bodyThis will be very very easy! Ready? <body> <?php echo $mosConfig_sitename; ?> <?php mospathway() ?> <?php mosLoadModules('top');?> <?php mosLoadModules('left');?> <?php mosMainBody(); ?> <?php mosLoadModules('right');?> <?php mosLoadModules('bottom');?> <?php include_once('includes/footer.php'); ?> </body> </html> Now that's what I call lean code! I have a reasonably logical order:
This order is called semantic markup. Or at least by the time we add our titles and sub-titles it is. Basically, it means the term paper like you used to write at college, you know, the one with neat logical titles, headers and organization. From a web point of view, it means a page can be read by anyone, a browser, a spider or a screen reader. Semantic layout is the cornerstone of accessibility. For the wiki amongst you you can read more about semantic layout here. Now its worth noting that what we have here really is only the potential for semantic layout. If one were to go ahead and put random modules in random locations, then you would have a mess. An important consideration for CMS sites, a template is only as good as the population of the content. It is this that often trips desingers up when trying to make their valid joomla template. Now at this point, the only CSS I have applied is set all text to Verdana and 76% size. Related articles(beta): Add as favourites (0)
Powered by AkoComment Tweaked Special Edition v.1.4.2 |
Login Form
Top SE queries for this URL
None yet
Joomla books
Are you secure?
Satisfied?Click below to buy world's best anti virus