New CSS site
Tooting my own horn here. A site that I have been working on for some time now is finally being launched officially today via a press release and a poster at the American Astronomical Society’s bi-annual meeting. The site is called the Spanish Language Astronomy Materials Education Center, and is a Web-based catalog of reviews of generally available Spanish-language astronomy materials for all grade levels, published in both English and Spanish.
Since there are so many materials that have been reviewed (and many more coming), I had a goal to keep things as simple as possible when adding reviews to the site. I did not want to have to update several pages when a review was added. Further, I wanted each English language page to contain a link to the same page in Spanish, and vice versa. There are categories of reviews, like Books, CDs, Videos, etc. I wanted each of these categories to have their own index page that listed all the reviews in the category. We also have integrated a search engine, and so the site needs to be readable by that engine (and web search engines, too).
I thought I might want to go with a MySQL database and PHP, but I realized that was a bit too complex for what I wanted. Especially since once the reviews are done, we'll only need to add a few each year as new resources come out. So I decided to go with PHP and a carefully thought out naming scheme. I also threw in some well placed CSS (using the techniques outlined in Environmental Style) that enables me to show and hide bits and pieces of content depending on where they show up on the page.
The entire site is generated dynamically via PHP. There are currently two PHP files (really three, but hopefully you won't ever need to encounter the third one). I hope to consolidate all three into one master file that handles everything. The first thing I did was to create an
.htaccess file that tells the server to parse the key files as PHP. This way I don't need to use the
.php extension. Then, based on an article at Evolt, I use the path of the URI to set the variables, which in turn tell the correct PHP program which articles to include on the page.
The URIs for the site currently have the following structure:
www.astronomyinspanish.orgis the main URI for the site. It is also available at
slmis the PHP file that processes the URI and delivers the correct page. It is symbolically linked to the index of the site.
espand sets the language variable for the requested page to either English or Spanish. If not present, the PHP sets the language based on the browser's default language. Anything other than Spanish gets set to English.
categoryis one of Books, Media or Periodicals. We’ll be adding Museums & Curriculum soon. This is handled with an array and can be added to at any time.
gradesets differentiates between Elementary (pre-5th grade), Secondary (Middle and Sr. High) and College/Advanced.
titleis a slug that includes one or two keywords from the title of whatever is being reviewed
At each “directory” in the pathname, there is a default presentation of data. As alluded to above, at the root level and at
www.astronomyinspanish.org/slm/, the PHP checks
HTTP_ACCEPT_LANGUAGE (a variable passed to the server by the browser) to see what the browser’s default language is. If it is anything other than Spanish (
es), the language is set to English, otherwise it gets Spanish. The content that is presented at this level is an introductory page of information about the site and a teaser link to a highlighted book review at the site. This particular layout is three columns (via CSS Enterprise).
The next step in the path is
language. For example, if you go to
www.astronomyinspanish.org/slm/eng/, you'll see the English version of the intro page for the site. If you go to
www.astronomyinspanish.org/slm/esp/, you get the Spanish version. I should point out that the navigation is another PHP file that is included, and links to the Spanish or English version of the current page by toggling the
language part of the URI. This navigation PHP file also sets up the rest of the site links based on the language that has been set.
category is included in the URI, then all of the reviews in that category are listed in a two-column layout, sorted by grade level. If the
category is misspelled or does not exist, it defaults back to the intro page. As an example, here is a list of all the book reviews that have been added to the site:
grade is included in the URI, then all of the reviews in that grade level and
category are listed in a two-column layout. If the
grade is misspelled or does not exist, it defaults back to the
category page. As an example, here is a list of all the elementary book reviews that have been added to the site:
Finally, if the
title is included in the URI, you’ll get to the review of that item. This is presented in a three column layout with the review in the center column and the bibliographic information on the right, along with an image, if available. If you were looking closely, you might have noticed that similar bibliographic information is included in the list of reviews in the category view (but no images), as well as the full index that I point the search engine to. This is where the CSS comes in. The bibliographic information is kept in a separate file from its corresponding review. Each file is named according to the title slug mentioned above, followed by either
_title, corresponding to the review (description) or the bibliographic information (title being the first entry), respectively. Further, an
_e is added to the English versions of those files. Then each file is given an extension that corresponds to it’s category (
.book, for example). The files are prepended with the grade level (
sec., for example).
Finally, I created some special PHP files to list all the reviews by grade level, and added links to those files in the navigation area. CSS and XHTML should validate on nearly every page, except the search results pages. And I'm working on those...
Hope you like it!
About this post
Tooting my own horn here. A site that I have been working on for some time now is finally being launched officially today via a press release and a poster at the American Astronomical Society’s bi-annual meeting. The site...
January 5, 2004 | CSS
More Like This
- CSS 102: Borders and Backgrounds
- Hey, I know that guy!
- New Article at Digital Web Magazine
- Safari Bug update
- Safari Bug
- digital photography
- digital video
- web standards
- Liberal Bias
- A key to success in the marketplace?
- 100 push ups, week 6, day 3
- 100 push ups, week 6, day 2
- October 2008
- July 2008
- June 2008
- April 2008
- March 2008
- January 2008
- December 2007
- August 2007
- December 2006
- November 2006
- September 2006
- July 2006
- March 2006
- February 2006
- October 2005
- September 2005
- August 2005
- July 2005
- May 2005
- April 2005
- March 2005
- February 2005
- January 2005
- October 2004
- September 2004
- August 2004
- July 2004
- June 2004
- May 2004
- April 2004
- March 2004
- February 2004
- January 2004
- December 2003
- November 2003
- March 2000-August 2003