In moving this thread away from email and into the blogging realm, I have a couple announcements regarding updates to the OI powerpoint figure.

I added 4 semi-transparent white circles, one in each quadrant, for the text the lay on. This should help the text stand out as it is added in powerpoint. The new files are available under oceaninformatics/figs_ppt/06OI_OVKarinKnorr/

Photoshop file: oi_ov_bg2.psd
Corresponding jpg: oi_ov_bg2.jpg
The latest ppt version: BakerOI_OV6.ppt

Note:
Karen, if you wish to added the content from our previous emails to the blog for archival purposes, we can do so in this post… all we need to do is edit this.

in working with trasect figures in Matlab7.1 (R14) on my mac over the past few days, i have discovered a few secrets:

- Matlab has a canned feature for plotting with two Y-axis vairables (plotyy.m), but leaves double X-axis plotting up to the user. the way to do this is to create one figure, and then overlay a second set of axes on top of the original by ‘get’ting the axes ‘Position’ from the original set and using that to set the ‘Position’ for the second. when creating dual x-axis figures, there are a few things to consider:
1. overlapping tickmarks - if you create two sets of axes, it is likely because you are trying to plot two seperate sets of variables with different scales. This means dual tick-marks which may make your figure overly confusing. Possible solutions:
- use set(gca,’TickDir’,'out’) on one axes set to differentiate from the inward tick marks.
- do not use tick marks (see the next ’secret’ for more info)
- turn the bounding box off to remove ticks from secondary x and y axes, while leaving the primary tickmarks. set(gca,’Box’,'off’)
2. overlapping axes - only certain visualization fuctions seem to be compatible with xx figures. for example, adding a bar or plot is not possible as far as i can tell, nor are multiple levels to one of the axes (ie. no ‘hold on’ allowed!). much trial and error seems necessary! note: put more complicated figure (ie. contour, pcolor) on the bottom layer.
3. remember to turn off the background color in the overlapped axes, the default is white which will obscure the original figure. set(gca,’Color’,'none’)
4. set the second x-axis to the top by using the ‘XAxisLocation’ setting ‘top’.

- tick marks are fun! there are a few things the books don’t tell you:
1. while you CAN have tickmarks without labels, you CANNOT label intervals without tickmarks! you can get around this by hint #2.
2. you can change the tick mark length! this hidden value is not in any book or help menu that i have found, but it is invaluable for removing tick marks but leaving the labels. i found it using the ‘inspector’ feature under the plot tools. the command is set(gca,’TickLength’,[a b]) where a and b are mystery values. my experimentation shows that a must be a positive value greater than zero (ie. 0.001), or the tick marks will not appear at all, and that b seems linked to the actual length, with 0.4 being a common starting value, 5 being very very long! using [0 0.01] will remove the ticks from the figure. using this command in combination with ‘Box’,'off’ will leave the tick marks on your screen-display figure looking seperated from the axis, but when you export this problem disappears in the .tif version.
3. another way to include labels without the tick marks is to use the text function which still works well in double axes.

- the matlab defaults for image quality are very poor. suggestions are as follows:
1. when exporting, create a .tif with the openGL renderer and 150dpi. this will give a full-page figure of around 2Mb that looks nice. 300dpi is nicer, but the file size starts to get out of hand.
2. printing from the screen figure works well, but for some reason the pageSetup options are greyed out on the printMenu. remember to set your pageSetup Lines and Axes to ‘Color’ before printing!

- i have not yet found a way to make the colorbar logrithmic. i belive this is possible by changing the axes defaults for the colorbar (set bar=colorbar to get the handle for the axes!) but i do not know if it will translate the axes change to the color values. another possibility is to create a new colormap with log intervals for color. i will post more when i have it figured out!

I created a Page to store snapshots of the CCE LTER site. You may visit it periodically to observe the ev0lution of the CCE LTER site.

CCE LTER Site Snapshots

This is a new blog theme, a modified version of Connections. I changed the header image, and pretty much every other image and stylesheet (changed the hue from greenish to blue-ish).

In addition, the blog root now rests at http://oceaninformatics.ucsd.edu. The main blog link remains the same.

Check out the Live Archives plugin on the Archives page (the top nav bar). It’s pretty sweet and uses AJAX and stuff….

More to come about the new blog/appearance/migration/etc. This post is acting as a quick FYI.

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.

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.

A quick post to note the changes made to the interoperability site, changes still left to do, and to keep this blog fresh! The interoperability site is located at http://interoperability.ucsd.edu.

Changes Made

1. Tabs
   1. Reshuffled nav tabs: Home, Project, People, Publications, Activities, Links, Tools
   2. Nixed Resources tab. The former sub-pages under Resources were Publications and Links. Those now have their own tabs.
   3. Moved Blog and Files under newly created Tools tab.
2. Sidebar
   1. Removed block from sidebar (e.g. Stuff, Menu, etc.).
   2. Added green background color: #618c65
3. Breadcrumbs
   1. Added bottom padding, gives more space to ease viewing.
   2. Adder underlines to hyperlinks, underlines removed when hovering.
4. Images
   1. New background images behind main content: silver->green with drop shadow, colors used to distinguish columns
   2. Moved logos to directly under main content in left column. Overlayed white background on silver in Photoshop to give transparent effect.
   3. To finish drop shadow effect, added background images in footer and used a “corner” element so that shadow wouldn’t stretch entire width of the wrapper
5. Borders
   1. Changed border color of block from green to silver: #ccc
   2. Added silver border underneath breadcrumbs.

Changes To Do

• Add photo gallery/random photo viewer on sidebar for all pages.
• Integrated authentication for private and tools pages.
• Email-by-post and email notifications for blog.

As always, I created before and after snapshots of the interoperability site, shown here. The Before shot shows the site how it looked under the Xoops CMS. The After shot shows how it looks today.

Subversion Notes

I had issues with subversion when updating the working site. Somewhere or somehow, I changed/added/deleted a file from the dev site, and failed to mimic the action with the proper svn add, svn delete, svn move, svn copy commands. The file in question is 05LTER_NetworkNews_spring.pdf. Subversion stopped updating the working site when it reached this file, complaining that this file was already added in the repository? (I don’t have the exact error msg at this point. I will post it as soon as I re-see the problem). Regardless, I ended up abandoning Subversion temporarily and used a cp -r dir1 dir2 to copy the code from the dev site to the working site. I will go back when I have time to address the issue with Subversion. It’s probably something really simple, so I’m not too worried about it.

This issue made me think about how we should use Subversion. It is designed mainly versioning code. Yet, if we throw an entire website into a repository, we end up versioning all sorts of files, including images and binaries (docs, pdfs, etc.). Must all these be versioned?
Perhaps we should recognize what files should be stored in Subversion for certain projects.
For web sites, it is good practice to store html, php, css, javascript, sql, perl, and any other related web-scripting or programming files. I would also store basic image files used for presentation purposes (background images, bullets, etc.), as these are seen as part of the project. However, docs do not really need to be stored in Subversion. They should be managed by separately, particularly since they are peripheral items to me, the developer, and are not part of a web-programming project from my point of view.

It may be a poor practice to segragate code files from doc files, as this creates a parallel workflow to consider when updating a site. However, the doc files typically remain dormant, and are only editted and tracked by other users. Their only relation to the code are the anchors that link back to them. Keeping these files outside of Subversion frees me from issuing the svn * commands each and every time a file is added or removed to the project. An added benefit is the prevention of wasted space in the repository that is otherwise eaten by very large files. If having a parallel workflow is the consequence of preventing complications elsewhere in the workflow, I’ll take it. I am figuratively picking the less deadly poison… at least I’d like to think so anyway!

One more note about storing config files in Subversion. Particularly with web applications, the config file is specific to the web app path, and other factors (dev vs. working databases). Thus, a config file is the only code file that should “not” be included in the repository, as any update could potentially overwrite the local config file. One workaround (something I see with many open-source projects) is to create a distribution config file, something like: config_dist.php. When checking out code for the first time, you would then copy this file to config.php and add the appropiate settings as dictated by your file path and database. Using this method, config.php is safe from being overridden by Subversion, yet you can still recieve up-to-date changes to config_dist.php, should there be any.

WordPress Note

I wrote this post in Firefox, which uses Javascript to provide an HTML Quicktags bar on top the text area window. This helps with some html generation. From my experience here, it’s not as much a time-saver as I thought it would be, because it’s just as cumbersome to click the tags on top as it is to type them in manually. Most entries won’t contain html anyway, and those that do use only simple html tags (lists, bold, italic, etc.). Thus, Safari is fine to write/edit posts, even though it lacks some extra editting quirks seen in other browsers.