iBlog

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.org/slm/language/category/grade/title/

• www.astronomyinspanish.org is the main URI for the site. It is also available at www.astronomiaenespanol.org.
• slm is the PHP file that processes the URI and delivers the correct page. It is symbolically linked to the index of the site.
• language is either eng or esp and 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.
• category is 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.
• grade sets differentiates between Elementary (pre-5th grade), Secondary (Middle and Sr. High) and College/Advanced.
• title is 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.

If the 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: www.astronomyinspanish.org/slm/eng/book/.

If the 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: www.astronomyinspanish.org/slm/eng/book/elem/.

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 _desc or _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!