Navigation Menu with current page disabled

In creating my new portfolio pages, I have relied on other people’s code. I’ve already mentioned the Photobox jQuery image gallery, which drives the slideshows on the new pages. From multiple sources, I figured out a better way of using CSS to create navigation menus than what I’ve been doing before. The core idea is that the link to the current page should show up in the navigation menu but should not be active. Typically, you’ll want to either pull it out visually, to flag the page you are on, or dull it it down, to indicate that it is not available to be clicked. Ideally, the cursor should not change to the active pointing finger over the inactive link.

I relied on multiple classes before, and had to do lots of markup editing. By adding some jQuery code to the CSS, you can get the menu working with minimal fuss.

CSS:

#navmenu a {
   color: #90c7fe;
   text-decoration: none;
}
#navmenu a:hover {
   text-decoration: underline;
   color: #fe596e;
}
#navmenu {
   color: #838390;
   padding-left: 1.5em;
   padding-top: 0.5em;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 0.8em;
}
#navmenu a.current-page {
   color: #fedc7b;
   text-decoration: none;
   pointer-events: none;
   cursor: default;
}

JavaScript (jQuery)

$('a.current-page').click(function() { return false; });

The JavaScript should be included either on a page load or at the end of the page, just before the <body/> tag. To use the markup, just enter something like this:

<div id="navmenu"> 	
<a href="glitchez.html">Glitch Nation</a> | 
<a href="gifz.html">GIFs</a> | 
<a href="datascapez.html" class="current-page">Datascapes</a> | 
<a href="birdz.html">Ornithology Suite</a> | 
<a href="studiez.html">Field Studies</a> | 
<a href="treez.html">Tree Scrolls</a> | 
<a href="noiz.html">Blue Noise</a>		
</div>

The key to it all is shifting the “current-page” class to the navigation link for whatever page you are on. The CSS takes care of the appearance of the disabled link and the JavaScript disables the cursor response. The code may not work in IE (but what did you expect?). Of course, you’ll have to include jQuery, probably with something like this in the header:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

Work Journal | Feb 17 – Mar 24

Feb 17th, 7hrs | Programming: mysql, php.

Started the website.

-Prepare mysql database to interact with the website.

-Made basic queries to database to display a profile page from information pulled from a mysql database.

-Practiced echoing database  data to create html/css/javascript etc. Figured out that echos don’t work like println(java)/cout<<cplusplus  in that echo actually get incorporated into the code of your program so that you can subsequently echo chunks to write html.

Example:

echo “<img src='”;
echo $filename;
echo “‘/>”;
echo “<br><br>”;

 

Feb 21st 7hrs | Programming: domain setup, mysql, php.

-Bought a personal domain to temporary host the pyramid website.

-Set up website to use mysql database on the website. Had to actually give it instructions to connect and find it now. Also gave it a location to store sessions

This specific code was required for

session_save_path(“/home/users/web/b2289/moo.jackkoocom/cgi-bin/tmp”);
session_start();
mysql_connect(“jackkoocom.fatcowmysql.com”, “jack”, “password”);
mysql_select_db(“pyramid”);

-Set up ftp with filezilla and fatcow server

-Began working on features such as login, and upload.

 

Feb 24th 8hrs | Programming: domain setup, mysql, php.

-Lesson on advance sql queries, php troubleshooting, and some extra work afterwards.

-Fixed 90% of upload errors on filesize by editing the php settings on the server. Still sometime output errors on extra large files.

changed these values @ http://www.fatcow.com/member/cgiManagement/PHPplus.bml
php_value upload_max_filesize 10M
php_value post_max_size 10M
php_value max_input_time 300
php_value max_execution_time 300

-Finishing up features (login, upload)

-Added registration to input new users into database upon giving invitation codes matching the invitationCodes table in the database.

 

Feb 26th, 2hrs  | Programming: Java 

Lesson on java double buffering.

-Learned about double buffering to prepare for java application (the collage application).

Double buffering is basically to prevent seeing black flashes appear when the image has not finished being redrawn during. So you draw the image onto a “buffer” and switch it to the current displaylist when its done drawing. So the drawing process is behind the scene and the change of tearing is significantly reduced.

Jon Heard my tutor also showed me a useful java function to clip images to specific shapes.

Now I should have everything i need for the collage software (although the shape clipping don’t have any anti-alias, i might want to look into that issue)

 

Feb 28th,  7hrs | Printing, Programming: php

Paul had several big prints that he wanted printed. Everything he wanted printed was in an adobe bridge group so I could print them on my own. I setup the print and printed the fabulous photographs of Paul. The last print had extra space so Paul let me print one of my artworks . The output of my artwork isn’t setup for prints yet but it still came out great.

On the programming side, I was debugging an error that come upon login. Can’t recall the specifics of the error now.

 

March 2nd,  7hrs |  Programming: php, sql.

-Search feature done!

-Used sql  queries to return all matching searches and sort them into alphabetical order (wasted a lot of time writing a complex php code that did the same thing). I wrapped the echoed results in hrefs and put the matching id in the url. So then the profile page was editted to check for ids in the url first  and generate a page  based on that.

$IDsMatchingSearchText = mysql_query(”
SELECT ID, firstName, lastName FROM users WHERE firstName=’$searchText’ UNION
SELECT ID, firstName, lastName FROM users WHERE lastName=’$searchText’ ORDER BY lastName ASC
“);

-Slight tweaks everywhere. (homepage redirect, added about to registration, tested div capabilities etc)

-Was wondering why saic.edu seems to log me off when i close the tab even though everyone on the forums says that it’s impossible to know that you closed the tab. Actually the saic.edu log off is a illusion. If you copy the url, close the browser and paste it in. the session remains. So what it actually does is log you off when you enter the homepage, and is missing a specific element in the url. Paul wanted this feature for security so i know know how to add it.

Emigre Type Foundry: Historia

I have in my hands the most recent specimen book from Emigre Type Foundry and I am delighted. Emigre’s type books become collector’s items, and its not hard to see why–in small format, they extend to the printed document the quirky, fun and righteously well-defined aesthetic that permeates their typeface design.

This current offering, Historia, is something else. It’s not just a “greeked” specimen book, but a photographer Rudy VanderLan‘s journal of battlefield locations in the Mexican-American war of 1846–1848, with a recounting of that history, panoramic photos, and stylized, typeset “labels” for each location.

You can order the next specimen book free from Emigre, or buy a small collection for the modest price of $3. I did not see the current one online, though I expect it’s still available. Just don’t ask to borrow mine ;^}.

Fonts and the Visual Design of Web Pages

HTML was not made for visual designers–certainly not in the beginning. It was built on markup languages that were intended to capture the organization and functionality of documents and document elements, not their appearance. It was intended to be flexible in its presentation, independent of visual layout and style. Database designers understood this. Visual designers hated it. They have been striving ever since to twist it to their purposes.

In many ways they have succeeded. Netscape’s introduction of the now-deprecated <font> tag in 1995 was the first crack in the facade. Tables were used early on to create layout, though HTML advocates objected: “Tables are for tabular data!” Invisible GIF “shims” provided indents and line spacing that markup balked at. It was a mess, though it provided a nice market for the the specialized knowledge that HTML tweakers and twisters acquired. Mercifully, the WWW Consortium introduced new markup standards and eventually CSS. Using tables and shims today is a not just anachronistic, it’s counter-productive. It will frustrate good design, because always was just a workaround.

Font display is the one element that is still not under the designer’s control. Designers tend to rely a handful of “web-safe” fonts that “most” computers will have installed. To circumvent the quirks of different browser in displaying these common fonts, markup libraries like YUI can level the ground with CSS that zaps the quirks and then lets you build up CSS specifications that will provide uniform font display on all browsers. Cascades (font-family: “Lucida Grande”, “Verdana”, sans-serif) provide a measure of fallback safety, but you still have no way of really assuring uniform appearance of fonts on web pages. PDFs or Flash are poor substitutes for standards. Creating font graphics is fine for a smattering of display type, but it won’t do for body text.

There have been a number of font embedding schemes. The W3C is working on a standard for Embedded Open Type, but there are quite few legal and technical problems to overcome.  At the moment, embedded fonts (via the @font-face CSS declaration) are mostly supported through font servers that operate on a fee-for-service basis. Not all type foundries permit their fonts to be embedded. Meanwhile, the Google Font API provides some 16 open source fonts that are designed to work on all current browsers. It’s a step in the right direction, and supported by a company many of have come to rely on (with varying enthusiasm).

Bitmap to Surface to Model

Bitmaps can be used as height fields for a 3D terrain. Typically, the brighter the pixel value, the higher the terrain at the location mapped to the pixel. A 3D grid such as a terrain model can be output as cross-sections and created in any convenient material. The Processing app included with this post will do the whole process for you: open a bitmap, display it as a terrain model, and output cross-section profiles to a PDF file. The profiles include slot marks. Once you cut out the profiles and the slots, you can fit everything together into a model. The model can be used to construct a mold for the surface.

Let me explain this with pictures. First, here’s what the assembled model looks like:

The assembled model

The assembled model

Continue reading ‘Bitmap to Surface to Model’

IgnoFactory Arrives

IgnoFactory, a blog at paulhertz.net, covers technical topics in digital art, including printing and image processing techniques, code, design, etc. It includes pages on Ignotus Editions, a fine art printing service, and on the artists of the ignoStudio.

For the curious, there are other blogs at ignotus.com. Mnemonic Spumoni deals with the lives, times, memories, work and opinions of the four artists represented at paulhertz.net (Paul Hertz, J.T. Pescador, Alma de la Serra and Darrell Luce). It\’s our social blog. Intermedia Patterns is a scholarly research project Paul Hertz and Jack Ox have been working on, pooling their ideas about intermedia art. There a various projects linked to our home page, too.