Starting last week, we’ve implemented many changes and features to the Palmer LTER development website. Though we have not yet completed our on-growing list of items, we are comfortable enough with the site that we aim to publish it at the public domain by the end of this week.

Our list of changes and features spans many areas. While some changes are architectural and “behind-the-scenes”, others are up front and purely visual. Some of the features are mainly used as development aids, making it easier to modify the site without breaking it.

A breakdown of some of the recent changes and features:

Normalizing the CSS
This is an architectural change. Our CSS files were decentralized and fragmented, making it virtually impossible to apply trivial style changes. By restructuring and modularizing the css code into one centralized file, we have a much stronger base to modify and add new styles for html elements.

Polishing the Theme
This is a visualization change. Using Photoshop, I changed the header and background images to spice up the site. I updated the css code (which was easy after the normalization) to reflect the new theme, particularly the two columns. The left column with the yellowish background is slightly bigger, and the right column with the blue gradient is smaller. I added more style to the sub-navigation lists in the right column. Checkout the snapshots page showing the previous theme and the new theme.

Using Cookies to Test the New Theme
I added this feature as a workaround while testing and developing the new theme. Using a bit of php logic, I enabled the use of web-browser cookies to locally change the stylesheet. By setting a cookie named “newcss” with a value of “1″, the new stylesheet would only be applied to my current web browser on my computer. Everywhere else in the world would still recieve the current stylesheet. This allowed me to test any visual changes to the site without breaking it (in case there are bugs).

This feature was needed because we have been treating our development site as a working site, relying on it for presentations and demos. This extra usage makes it less of a development site, especially when users expect it to always be stable. Thus, a workaround was needed to be able to develop the site without the worry of breaking it for everyone else’s use. One option would have been to move it into another local development area. However, I felt that not only would that require too much overhead (with code versioning and merging), but that it would also be a redundant effort since this site was already in a development area. The second option of using cookies to apply local settings was easier to implement (at the cost of a few lines of php), and it prevents source code and content from getting out of sync.

Converting Absolute Paths to Relative Paths
Almost every single php page used absolute paths when including other php files. This is an extremely bad practice and would break the site when porting the code over to a new physical location on the server. I went thru every page I could find, and changed all absoulte paths to relative paths. This is a good example of an architectural change that is “behind-the-scenes”.

Cleaning the HTML Markup
Some of the html pages have sloppy or invalid code. A common example is the lack of a closing tag. For instance, <p> is never followed by </p>. When testing the new theme and css, I cleaned up sloppy html wherever I found it.

Here’s a list of some of the To-Dos:

Develop a Best Practices
We need a best practices document for site development and content placement. Having a best-practices helps achieve consistency throughout the site, and it also provides a starting point when developing new site apps or modules.
A rough best-practices:
- Use the right column for sub-navigation links.
- Use the left column for header title and main content.
- Use the bottom column for application output.

Revisit Relative Paths
We may want to create an infrastructure for relative paths, so that it is easier to move files around freely without the need to edit them to reflect their new path. There are a few ways to do this. One option is to set a local php config variable that points to a specified include path. Another option is to create a root.inc.php file inside each directory that stores that directory’s relative path to the site root in a global variable, and have all other php files in any given directory include that directory’s root.inc.php file.

Searching Capability
One future idea for the site is to add a search bar, probably at the top of the right column, for all pages.

I finally discovered how to enable color syntax in vi:

:syntax enable

Here a couple good reference sites for customing vim and your exrc file.

• my .exrc is someone’s .exrc file which contains lots of useful settings.
• Best of VIM Tips shows some highly useful stuff, most of it I didn’t know was possible!

As I use vi more and more, I am curious to find new ways to customize it so to increase productivity. One option I may like to implement in the future is the use of abbreviations and mappings. Abbreviations are useful during insert mode to auto-complete phrases (e.g. img -> ). Mappings are useful for abbreviating commands, and can be used to wrap a line of code inside html tags or comments.

Lately I’ve visited some useful sites and tools for help with generating color schemes and also for learning more about color theory. When working on the puzzle graphic (see 2 posts below) for the interoperability site, I wanted to pick three colors, one for each piece, that looked good in harmony for the graphic (and the site).

To accomplish this, I refered to this color schemer site: Color Schemer Online.
This site was useful for generating a quick color scheme, enabling me to wisely choose colors that fit well for the puzzle.

This site offers a cool utility program (for PC and Mac): Color Schemer Studio.

Color Schemer Studio is a very handy desktop application for mixing and creating color schemes. Unfortunately, it’s shareware and has a 15-day trial limit (which can probably be reset if you delete its preferences file )

Some other useful color sites:

• Return of Design shows a list of lots and lots of submitted color schemes, with titltes.
• [ws] Color Scheme Generator 2 is a nifty, javascript-based web app.
• Color Wheel Pro has some good reading about color theory and so on.

As always, a good place (besides Google) to find more related sites is del.icio.us: http://del.icio.us/tag/color

As a continuation to the last post, the interoperability site has been slightly modified. The home and project pages contain the new images. In addition, I removed the green footer at the bottom, giving the site a cleaner look. The green right column is still void, but once we get some images, we can add a random photo viewer thingy.

View the snapshots marking the changes.

I recently made a couple new graphics for the interoperability site:

Graphic #1: Puzzle

Graphic #2: Venn Diagram

Puzzle: interop.psd
Venn Diagram: project_team.psd

I made both graphics from scratch using Photoshop. Here’s (roughly) how:

Puzzle
1. New photoshop file 400×400 pixels.
2. Use guides to mark center of canvas (200, 200).
3. Draw three circles of varying size, all centered on the canvas. Small and large circles are green, middle is white, and layer them appropriately (smaller circles on top). When drawing circles, hold option and shift keys to constrain proportions (prevents ovals) and to anchor the cursor in the circle’s center.
4. Draw three lines from canvas center, separated 120 degress from each (like a Mercedes logo).
5. Use the custom shape tool to draw puzzle pieces (comes with photoshop). Crop out puzzles connectors and paste them on canvas. This creates a basic skeleton of the puzzle.
6. Merge layers together and use erase/pencil tool to better define circle puzzle pieces.
7. Use magic wand to select and create new layers. At this point, there should 5 main layers: inner circle, outer circle with hooks, and the three puzzle pieces.
8. Use the bevel/emboss blending options to shade and define each layer…. oh yeah, and color the puzzle!
9. Add text on top of each piece, and apply slight text warp (if wanted).
10. Add a slight drop shadow to the outer circle for a subtle effect.

Venn Diagram
1. New photoshop file 400×400 pixels.
2. Use guides to mark center of canvas (200, 200).
3. Draw one large centered circle.
4. Draw equaliteral triangle, mark it’s center, and center it’s center on the canvas.
5. Draw three equally sized circles, one at each point on the triangle. Once this is done, hide the triangle.
6. Apply the “Overlay” blending mode to each circle, and give them all the same color (a light grey).
7. Use a drop shadow effect on the circles if desired. Because some circles overlap the others, you need to duplicate the two overlapped circles, reduce their fill to 0%, and then give them the drop shadow effect.
8. Add text where needed.

Well, those are the very rough outlines of the procedure. It would take much longer to go into great detail about the work process. A few notes:
1. Guides are very handy. I use them frequently to help visualize and define edges.
2. The puzzle graphic required lots of layer merging in the process of defining/creating new layers. Often I would duplicate layers I needed to merge so that I retained the original layer (in case I wanted to go back and change something… puzzle hooks, for instance). I would then merge the duplicated layers together, and hide the original layers from canvas view.
3. To find the equilateral triangle’s center, I had to draw straight and even lines through the triangle at each angle and mark where they intersected. (I’m not sure if there’s an easier way to do this?)

My purpose of outlining the process here is provide me, and anyone else, a reference for using Photoshop. I am always learning new techniques, but it is virtually impossible to capture everything. Thus, a rough outline here may help invoke memories about the creation process that would otherwise fade away.

To some extent a web represents one snapshot of an entity’s identity, and a time series of the web pages serves as a reminder of change. There’s an automated service that provides a history of a web page. The Internet Archive has the Wayback Machine making available web pages archived since 1996.

This morning, iOcean was upgraded from Mac OS 10.3.9 to 10.4.2. OS 10.4.2 brings with it improved support for setting up SSL certificates, which will allow us to enable the https protocol and start developing web apps with secure logins. Of course, there are several other new and improved features in 10.4, which you can read about on Apple’s OS X Server site.

The installation was relatively painless: we imaged the existing 10.3.9 system drive for safety’s sake, ran an Upgrade Install, and troubleshot a few issues that cropped up. Of our major services, file sharing and logon services transitioned without any issues. Apache and the firewall required some small reconfiguration. The subversion URL responsibilities have been moved from an instance of apache in /usr/local to an instance in /opt. The instance in /opt is part of the 10.4 install and will hopefully be supported in Apple software and security updates (as opposed to the /usr/local instance, which we had to maintain manually). MySQL and PHP both worked after the upgrade, but PHP could not connect to MySQL because the MySQL socket had moved from /tmp to /var/mysql. Changing this path in the php.ini file solved the problem.

The remaining work to be done on iOcean consists mainly of cleanup. The unused instance of apache in /usr/local should be removed. Also, during the upgrade process it came to light that there are two instances of PHP on iOcean. One is a standard install, which will be support by updates from Apple. The other is a custom install that was compiled with the domxml libraries (needed for some of our scripts) but which needs to be maintained manually. We are hoping to consolidate the two soon. We are also still considering whether or not to reinstall Fink, as it is questionable how much use it saw on iOcean under 10.3.

(wahoo, my first attempt at blogging!)

mini “dictionary” for blog:
attribute - word used to describe a measurement for the Ecological Metadata Language. ex. temperature and chlorophyll-a are attributes (disclaimer: future naming conventions may change the way ‘temperature’ and ‘chlorophyll-a’ are written/displayed)
unit - a measurement standard used by EML to describe attribute. ex. the attribute ‘depth’ might have units of ‘meters’

________ - word used to represent the attribute-unit pair

________ - word used to describe the type of measurement (SI page uses ‘quanitity’)

The SI standard (as maintained by the international BIPM) defines a limited number of units and the types of measurements they describe. In EML, these measurement quantities are called ‘unitType’s. The unitTypes are the links between the units and the attributes.

Example: Temperature is a unitType as well as an EML attribute, the three units that describe this quanitity are Celsius, Kelvin and Fahrenheit. Length is a unitType with many describing units, including meter, foot, fathom, etc. Many attributes are quantities of length, including swell height, depth, and distance. All length attributes will be measured with one of the units under the unitType length.

The parentSI is the organization-prescribed main unit for each unitType. All units of each unitType must be mathematically related to the parentSI unit, and thus indirectly related to all other units of the same type.

Example: The three units under unitType temperature are Celsius, Kelvin and Fahrenheit, the parentSI unit is Kelvin, so the other two are defined by their mathematical relation to Kelvin. The parentSI unit of length is the meter, all other units of unitType length are defined by their relationship to the meter.

The reason for the parentSI units is a fundamental one: With physical standards behind each parentSI unit, thus measurements are able to be definitively reproduced, and that reproducability is the key to the scientific method. There is a physical object that defines a meter and that single object is what is used to create instruments of measurement. Similarly, there is a weight kept in a secure place that is THE kilogram. Since these physical standards are confined to the limited set of units, all other units must inherently relate back to the physically defined, hence using the parentSI as a means of conversion rather than another more indirect method.

SO, to define a unit, we need: unitName, unitType, and a multiplier or constant to SI. Abbereviations and descriptions also come in handy on a user level though are not necessary to the definition/conversion process.

CocoaMySQL is a sexy, free app for Mac OS X. It is a client-side interface for MySQL. Once I downloaded it, all I had to do was open it and input the host, username, and password for our MySQL Database. That’s it! The application so far is amazing. It performs much quicker than PhpMyAdmin (because it is a client-side application; phpmyadmin is server-side, so network speed and bandwidth becomes a bottleneck), and with a friendly Mac interface.

You can download it from the project homepage: http://cocoamysql.sourceforge.net/.

I think PhpMyAdmin and CocoaMySQL are both great tools, so I don’t necessarily see one replacing the other. They each have their strengths. CocoaMySQL is super fast, which makes it great for database querying and construction. PhpMyAdmin seems to have more strength for db insertion, as it recognizes foreign key relations and can provide a drop-down list of legal values for a given FK column. PhpMyAdmin (and DBDesigner4) also have the power to create schema diagrams, something CocoaMySQL can’t do (yet?).

Here’s a great article for other “sexy, free” apps for Mac OS X: http://joshuaink.com/blog/400/free-os-x-apps

Here’s an interesting article that compares some CMS’s we’ve used and seen.
http://www.openadvantage.org/articles/oadocument.2005-04-19.0329097790/view

The author ultimately recognizes Drupal, Mambo, and Plone among others as worthy CMS’s, whereas PostNuke and Xoops scored lower on the list. A good read to keep this stuff in mind.