062 - Write a document describing how to add browser-specific code to a templat

[Dorf]

Hello everyone. My name is Dor, and I had my first experience with Joomla right after it broke off the Mambo team.

Today I claimed this task:

One line summary
Write a document describing how to add browser-specific code to a template.

Description
The document should describe the most commonly used techniques for adding
browser-specific code to a template. These include using conditional
comments to add browser-specific CSS and using the Joomla! 1.5
browser-detection API calls together with PHP conditionals.

The document should comply with current Joomla! Editorial Style Guidelines
and guidelines for the Template Tutorials Project.

Documentation written for this task must be made available under the
Joomla! Electronic Documentation License.

Skills Needed
Prior knowledge of browser detection methods would be useful.

Difficulty
Basic.

Work Product
Document as described above.

My first question about this task: should this document be written like a tutorial or more like a
reference?
Here is an excerpt of the document I've been writing to help you understand my question.

Thanks in advance!




Claimed: Dec 05 Due: Dec 19

Google Task

[me=AmyStephen]Changed subject slightly for sorting all threads to match against Google resource  [/me]

[Chris Davenport]

Hi Dor,

I just read your work so far and I must say it's looking pretty good.  A few points to note:-

• The Holly Hack doesn't work for IE7; you might want to note that.  See for example: http://www.positioniseverything.net/art ... r-html.php

• You might mention using conditional comments for IE browsers.  For example:

   


• You should include a description of how to detect browser versions using the Joomla! 1.5 API.  Refer to: http://api.joomla.org/svn/Joomla-Framew ... owser.html  You might need to read some of the Joomla! source files to see how these API calls are used in practice, or ask for further information on this forum, or the 1.5 development forum.

• Show how you can use the browser-detection API calls to add an internal or external stylesheet (you can use the addScript and addScriptDeclaration methods in JDocument in your examples).

• Show how you can use the browser-detection API calls to construct browser-specific CSS selectors.

I like the tutorial style of writing that you're using.  Continue in the same vein and I think you will end up with a really valuable addition to the documentation.  Good luck with the contest!

Regards,
Chris.

[Dorf]

Thanks for your help, Chris!

I knew about the first items in your list from the task description, but I didn't really understand the last one - can you please explain (I'm talking about "constructing browser-specific CSS selectors")?

Anyway, here's another update (I think it covers everything except those "browser-specific CSS selectors"):
http://code.google.com/p/google-highly- ... lates.html

[Chris Davenport]

can you please explain (I'm talking about "constructing browser-specific CSS selectors")?

Sure.  Simply that you can construct selectors on-the-fly in your PHP code.  For example, you could maybe do something like this in index.php (this won't actually work, but just to give you an idea):

Code: Select all

<?php
$browser = & JBrowser::getInstance();
switch ($browser->getVersion()) {
  case '6.0': $browser_hack = '-ie60'; break;
  case '7.0': $browser_hack = '-ie70'; break;
  default: $browser_hack = '';
}
?>

Then later on you can have tags like this:

Code: Select all

<div class="myClass<?php echo $browser_hack; ?>">

Meanwhile, in your CSS you would have something like this:

Code: Select all

#myClass { whatever-you-need-for-nice-browsers }
#myClass-ie60 { whatever-you-need-for-IE-6.0 }
#myClass-ie70 { whatever-you-need-for-IE-7.0 }

Regards,
Chris.

[Dorf]

Here it is, I hope you like it:
http://code.google.com/p/google-highly- ... lates.html

[AmyStephen]

Dorf -

What format is this .dat file? Are you able to provide an Open Office .odt file, as per the contest guidelines?

Thanks!
Amy

[Dorf]

It was actually an HTML file :P

I attached an ODT version. Sorry for the mess, but it's a lot harder to design in OpenOffice than in plain HTML files...
Just to be sure, I also uploaded an updated version of the HTML file:
http://code.google.com/p/google-highly- ... lates.html

[Dorf]

Can someone have a look at this document and tell me if it's easy enough to understand?
I'd appreciate it a lot.
Thanks!

[Dorf]

I really hate to spam like this, but the topic is already on the second page, and I don't have anyone to proofread the document...
Can you help?

[AmyStephen]

Thanks for saving that as an .odt. I didn't know what to do with the .dat file.

Wow! I learned a lot! Thanks!   

Two points:
1. Couple of minor spelling errors:
complicated

This way is a bit more comlicated,

invoke

inkove

2. Consider using a courier 10 font for your xHTML and CSS examples.

This is fabulous and ready to publish. We like to have two judges look at it -- and will try to get that done quickly.

Thank-you very much for this important contribution to the Joomla! community. Fabulous work!

Amy

[Dorf]

Can someone mark the task "Closed" on the Google project site, so I can move on to the next task?

[AmyStephen]

Dorf -

You have not responded to the feedback with your changes. So, it has not been reviewed and approved, yet, by two judges.

Please provide your latest copy and we will try to review.

Thanks!
Amy

[Dorf]

I thought your last post was just an acknowledgement... Sorry

Here is the updated HTML version. The ODT file is attached to this message.

Good night, and sorry again!

[AmyStephen]

I approve. Looks great. I'll try to get someone else to review, ASAP.

Thanks very much for this important contribution to the Joomla! community.

Amy

[Chris Davenport]

Good work Dor!  This is a useful and important piece of documentation and I will be incorporating it into the official documentation as soon as I have time. 

I'm happy to sign off on this one.  If you haven't already done so, please upload your final version to the Google issue tracker and we will mark the task as closed.  Please feel free to select another task if you wish.

Good luck with the contest! 

Regards,
Chris.

PS: What is your last name so I can make sure that you are attributed with the work?

[Dorf]

My last name is Fire.
The ODT file from Google Code: http://code.google.com/p/google-highly- ... ?id=62#c13

Thank you