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

Google's Highly Open Participation Program tries to get young students into Open Source and Joomla! specifically. Everyone is welcome, there are not limits. You can be a coder, documenter, tester, translator to help out. Jump in and start helping!
Dorf
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Wed Dec 05, 2007 2:46 pm

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

Postby Dorf » Wed Dec 05, 2007 4:30 pm

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! :D




Claimed: Dec 05 Due: Dec 19

Google Task

[me=AmyStephen]Changed subject slightly for sorting all threads to match against Google resource  :)[/me]
Last edited by AmyStephen on Sat Dec 15, 2007 3:20 am, edited 1 time in total.

User avatar
Chris Davenport
Joomla! Ace
Joomla! Ace
Posts: 1383
Joined: Thu Aug 18, 2005 8:57 am
Location: Shrewsbury, Shropshire, United Kingdom

Re: 062 - Write a document describing how to add browser-specific code to a tem

Postby Chris Davenport » Thu Dec 06, 2007 12:35 am

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/articles/poll/star-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-Framework/Environment/JBrowser.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.
Chris Davenport - Joomla Production Leadership Team

Lion Coppice http://www.lioncoppice.org/
Davenport Technology Services http://www.davenporttechnology.com/

Dorf
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Wed Dec 05, 2007 2:46 pm

Re: 062 - Write a document describing how to add browser-specific code to a tem

Postby Dorf » Thu Dec 06, 2007 12:18 pm

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

User avatar
Chris Davenport
Joomla! Ace
Joomla! Ace
Posts: 1383
Joined: Thu Aug 18, 2005 8:57 am
Location: Shrewsbury, Shropshire, United Kingdom

Re: 062 - Write a document describing how to add browser-specific code to a tem

Postby Chris Davenport » Fri Dec 07, 2007 9:54 am

Dorf wrote: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.
Chris Davenport - Joomla Production Leadership Team

Lion Coppice http://www.lioncoppice.org/
Davenport Technology Services http://www.davenporttechnology.com/

Dorf
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Wed Dec 05, 2007 2:46 pm

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

Postby Dorf » Fri Dec 07, 2007 1:05 pm


AmyStephen
Joomla! Champion
Joomla! Champion
Posts: 7056
Joined: Wed Nov 22, 2006 3:35 pm
Location: Nebraska
Contact:

Re: 062 - Write a document describing how to add browser-specific code to a tem

Postby AmyStephen » Fri Dec 07, 2007 2:47 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Wed Dec 05, 2007 2:46 pm

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

Postby Dorf » Fri Dec 07, 2007 4:52 pm

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... :D
Just to be sure, I also uploaded an updated version of the HTML file:
http://code.google.com/p/google-highly- ... lates.html
You do not have the required permissions to view the files attached to this post.

Dorf
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Wed Dec 05, 2007 2:46 pm

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

Postby Dorf » Sat Dec 08, 2007 2:37 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Wed Dec 05, 2007 2:46 pm

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

Postby Dorf » Sun Dec 09, 2007 3:43 pm

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
Joomla! Champion
Joomla! Champion
Posts: 7056
Joined: Wed Nov 22, 2006 3:35 pm
Location: Nebraska
Contact:

Re: 062 - Write a document describing how to add browser-specific code to a tem

Postby AmyStephen » Mon Dec 10, 2007 3:02 am

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

Wow! I learned a lot! Thanks!  8) 

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Wed Dec 05, 2007 2:46 pm

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

Postby Dorf » Fri Dec 14, 2007 3:17 pm

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

AmyStephen
Joomla! Champion
Joomla! Champion
Posts: 7056
Joined: Wed Nov 22, 2006 3:35 pm
Location: Nebraska
Contact:

Re: 062 - Write a document describing how to add browser-specific code to a tem

Postby AmyStephen » Fri Dec 14, 2007 4:02 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Wed Dec 05, 2007 2:46 pm

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

Postby Dorf » Fri Dec 14, 2007 4:55 pm

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!
You do not have the required permissions to view the files attached to this post.

AmyStephen
Joomla! Champion
Joomla! Champion
Posts: 7056
Joined: Wed Nov 22, 2006 3:35 pm
Location: Nebraska
Contact:

Re: 062 - Write a document describing how to add browser-specific code to a tem

Postby AmyStephen » Fri Dec 14, 2007 5:01 pm

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 :)

User avatar
Chris Davenport
Joomla! Ace
Joomla! Ace
Posts: 1383
Joined: Thu Aug 18, 2005 8:57 am
Location: Shrewsbury, Shropshire, United Kingdom

Re: 062 - Write a document describing how to add browser-specific code to a tem

Postby Chris Davenport » Sat Dec 15, 2007 12:51 am

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?
Chris Davenport - Joomla Production Leadership Team

Lion Coppice http://www.lioncoppice.org/
Davenport Technology Services http://www.davenporttechnology.com/

Dorf
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Wed Dec 05, 2007 2:46 pm

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

Postby Dorf » Sat Dec 15, 2007 1:07 pm

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

Thank you :)


Return to “Google's Highly Open Participation Contest”

Who is online

Users browsing this forum: No registered users and 1 guest