Web Biz

CSS Negation pseudo-class

brian — Fri, 01 Aug 2008 18:43:15 +0000

Here’s a CSS stylesheet tip that I learned today: the negation pseudo-class (meaning it is followed by a colon, like :focus or :visited). What exactly is it? Well, its basically the NOT part of an if statement, if you want to think of it that way. It is extremely useful when you want to apply a style to a class or group of elements, and want to exclude some element(s).

I have a form stylesheet that applies styles to all input elements when focused, but I didn’t want the styles to apply to input elements whose type equals ’submit’ or ‘button’ when focused. So lets see how it works.

First, I define the style for all input elements:

[-]View Code CSS

form input, form textarea {
  width:200px;
  padding:1px;
}

To remove these styles (width and padding properties), I can override them later in my stylesheet using:

[-]View Code CSS

form input[type='submit'], form input[type='button']{
  padding:0px;
  width:auto;
}

This worked great. I then continued to apply styles to input elements when focused:

[-]View Code CSS

form input:focus, form textarea:focus {
  color:#000;
  background-color: #EFEFEF;
}

But then, the problem came up with the color property - how do I negate it for the buttons? I didn’t want to have to specify a color, becuase otherwise it removes the browser/OS styling to the button. So, I did some research and realized there is negation pseudo-class for CSS (level 3). Here is how I modified the above style declaration to not include buttons within my form:

[-]View Code CSS

form input:focus, form textarea:focus, form input:not([type='submit']), form input:not([type='button']) {
  color:#000;
  background-color: #EFEFEF;
}

Now, the styles are only applied to input and textarea elements whose type attibute does NOT equal ’submit’ or ‘button’ - pretty cool.

Switching jobs and more [OT]

brian — Tue, 15 Jul 2008 17:04:59 +0000

Warning: Off Topic

This announcement is pretty late, as I started the new job the second week in June, but none the less: I recently left my position as the Web Integration Specialist on the Hamilton College Web Services team to join the Webucator team as the Development Manager.

The move has been extremely rewarding, exciting, and _busy_. I really enjoyed working at Hamilton College, and my colleagues there are irreplacable, but decided to venture out of the world of academics and into the private sector. Webucator specializes in customized training that is delivered Onsite, Instructor led online, and self-paced. If you are looking for training, be sure to contact us - shameless plug, I know =)

The second major announcement is that I will be serving alongside Pete Freitag as the co-manager for the ColdFusion User Group of Central New York. It was very cool of Pete to ask me to help out, and I look forward to working with Pete in the coming months and years as well as the future of the CNY CFUG. I hope to be able to expand the membership size and activeness of the group, bring in some more guest presenters, increase sponsorship, and promote Adobe products and CF in the area. If you haven’t attended a meeting before, we would love to have you join us on the 2nd Tuesday of the month.

As the change in my career and life begins to settle back down I look forward to making further enhancements and fixes to my CF Docs on AIR application, and some of the other side-projects I have started. I also look forward to posting some more blog posts in the near future as well - I have several things ready to go and hope to post these soon.

Google Gears Presentation

brian — Tue, 15 Jul 2008 00:45:47 +0000

I presented on Gears, which is a set a tools available to Web Developers to build more compelling application through expanded capabilities in the browser. I gave this presentation at the Central New York ColdFusion User Group meeting in July to provide a basic introduction to the main modules of Gears and to highlight some of the potential it provides ColdFusion developers, and all web developers.

You may be asking yourself: Gears, that’s all about offline, right?

Well — kinda.

Gears exposes new modules and capabilities that provide general purpose building blocks for web applications to unlock the capabilities of the local machine in a safe manner.

Here’s some code

For the presentation, I put together a quick sample that shows how the offline Database module works, which stores information into a local Sqlite database on the client. The sample is pretty simple and easy, which goes to show how accessible Gears is to every web developer out there.

To start off with, a simple init() function is called on window load:

[-]View Code JAVASCRIPT

function init(){
  db = google.gears.factory.create('beta.database');
  db.open('database-test');
  db.execute('create table if not exists Users' + ' (id INTEGER PRIMARY KEY AUTOINCREMENT, firstname varchar(100), lastname varchar(100), Description text, Timestamp int)');
  list();
}

The init() function creates a table Users, and specifies the table schema, then calls the init() function, which populates a div with a simple table:

[-]View Code JAVASCRIPT

function list(){
  $('tablecontainer').innerHTML = '';
  var html = '<table><tr><th>First name</th><th>Last name</th><th>Description</th><th>Actions</th></tr>'
  rs = db.execute('select * from Users order by Timestamp desc');
  while (rs.isValidRow()) {
    html += '<tr><td>'+rs.fieldByName('firstname')+'</td><td>'+rs.fieldByName('lastname')+'</td><td>'+rs.fieldByName('Description')+'</td><td><a href="javascript:del('+rs.fieldByName('id')+');">Delete</a></td></tr>';
    rs.next();
  }
  rs.close();
  html += '</table>'
  $('tablecontainer').innerHTML = html;
}

The list function executes a DB call to select the data from the local Sqlite table we created in the init() function. Then using the record set object that is returned from the execute() method, we call it’s isValidRow() method. This lets us know if the current record is indeed a record, and we keep going to the next record until it returns false. Lastly, we close the record set object, and write out the html to browser.

For inserting a record into the table, its pretty easy (notice, I am also using the Prototype.js library here, which seems to work just fine with Gears):

[-]View Code JAVASCRIPT

function create(){
  db.execute('insert into Users (firstname, lastname, Description, Timestamp) values (?, ?, ?, ?)', [$F('firstname'), $F('lastname'), $F('Description'), new Date().getTime()]);
  lastid = db.lastInsertRowId;
  list();
}

The create() function shows how you use bind parameters (?), which you should use whenever the user’s input is being executed against the SQL database to prevent SQL injection attacks. This function also shows how you can easily obtain the last row id, which is helpful when using a auto_increment primary key.

Creating a desktop shortcut

The second quick demo during the presentation showed how easy it is to create a custom desktop shortcut using Gears, here’s the code:

[-]View Code JAVASCRIPT

function createShortcut(){
  var desktop = google.gears.factory.create('beta.desktop');
  desktop.createShortcut("CFUG Gears Demo",
    "http://brianflove.dev/CFUGCNY/Gears/",
    {"128x128": "http://brianflove.dev/CFUGCNY/Gears/icon_128.png",
     "48x48": "http://brianflove.dev/CFUGCNY/Gears/icon_48.png",
     "32x32": "http://brianflove.dev/CFUGCNY/Gears/icon_32.png",
     "16x16": "http://brianflove.dev/CFUGCNY/Gears/icon_16.png"},
    "CFUG - Gears Demo Application http://brianflove.dev/CFUGCNY/Gears/");
}

Want to know more?

AJAX Libraries API from Google

admin — Mon, 02 Jun 2008 14:09:08 +0000

As you might have heard, Google has joined the ranks of AOL and others with their newly released AJAX Libraries API. What does this mean for you as a developer? Well, Google will now provide hosting of various JS libraries. So, you get the power of Google to serve the file to your clients, so you can depend on their reliability and incredible speed.

This was just one of the several major announcements that were released at last weeks Google I/O developer conference that I was able to attend. Here is what they say:

The AJAX Libraries API is a content distribution network and loading architecture for the most popular open source JavaScript libraries. By using the Google AJAX API Loader’s google.load() method, your application has high speed, globaly available access to a growing list of the most popular JavaScript open source libraries including:

jQuery

prototype

script.aculo.us

MooTools

dojo

Google works directly with the key stake holders for each library effort and accept the latest stable versions as they are released. Once we host a release of a given library, we are committed to hosting that release indefinitely.

Jpeg resolution via EXIF Metadata

admin — Thu, 17 Apr 2008 10:55:41 +0000

I recently worked on a project that required obtaining the resolution of photograph. The approach I used was to limit the photographs to Jpeg format images only, which I could then use the new imageGetEXIFMetada() function in ColdFusion 8 to obtain the X-Resolution and Y-Resolution tags. Here is a quick summary of some of my findings and problems.

First off, lets make sure we’re all on the same page with EXIF - because I had no idea what the EXIF metadata was when I first started the project. So, lets have our friend wikipedia explain it to us:

Exchangeable image file format (Exif) is a specification for the image file format used by digital cameras. The specification uses the existing JPEG, TIFF Rev. 6.0, and RIFF WAV file formats, with the addition of specific metadata tags. It is not supported in JPEG 2000, PNG, or GIF.

Basically, the Jpeg file format allows for a variety of custom metadata segments to be stored in the Jpeg image file including the Exif metadata and the IPTC format (usually stores information about the author). So, if you have a digital camera, your Jpeg images will contain information about the camera and the photograph, including the resolution of the image.

EXIF - a standard?

However, from what I have experienced, this “standard” isn’t really that consistent, and depends largely upon the implementation chosen by camera manufacturers and photo editing software makers. Also, keep in mind that not all Jpegs will contain EXIF or IPTC metadata or may only contain some information.

IFD - wtf?

So, after performing some tests on several images using CF 8.0.1 and the imageGetExifMetadat() function, I thought perhaps there was more there than what was being returned by CF.

The Exif format uses several Image File Directories (IFD) to store information about the main image, a link to the sub IFD (if applicable), and a link to the location of IFD1, which is the IFD for the thumbnail image. In the end, this means that there are potentially 3 directories of metadata: 0 contains information about the main image, SubIFD contains information about the digital camera (such as shutter speed, focal length, etc…), and 1 contains information about the thumbnail and the thumbnail itself.

The first thing I did was download the Firefox plugin called Exif Viewer. This tool allows you to view all of the EXIF and IPTC metadata embedded into a local or remote Jpeg file. First thing I noticed with this is that it appears that CF (which in turn uses the metadata-extractor Java library) is pulling the resolution from the thumbnail properties.

Note: the reason why my thumbnail and main image have different resolutions is because I used PS to adjust the image’s resolution and size. I think it is safe to assume that many people will crop/alter photos prior to uploading them into a web application. However, for those that do not, the resolution of both the main image and the thumbnail should be the same - so you may not experience this issue when that is the case.

Testing it out

Using a sample image, lets look at the difference between the structure returned by CF (remember, its just a Java metadata-extractor library). Here is what is returned from the Exif Viewer Firefox plugin:

Exif IFD0
* Camera Make = Apple
* Camera Model = iPhone
* Picture Orientation = normal (1)
* X-Resolution = 3000000/10000 = 300
* Y-Resolution = 3000000/10000 = 300
* X/Y-Resolution Unit = inch (2)
* Software/Firmware Version = Adobe Photoshop CS3 Windows
* Last Modified Date/Time = 2008:04:15 09:15:42

Exif Sub IFD
* Lens F-Number/F-Stop = 14/5 = F2.8
* Original Date/Time = 2007:11:08 12:26:54
* Digitization Date/Time = 2007:11:08 12:26:54
* Colour Space = sRGB (1)
* Image Width = 1200 pixels
* Image Height = 900 pixels
* Unknown tag: Tagnum = 0xa500 ===> data = 11/5

Exif IFD1
* Compression = JPEG compression (6)
* X-Resolution = 72/1 = 72
* Y-Resolution = 72/1 = 72
* X/Y-Resolution Unit = inch (2)

And, here is what is returned from ColdFusion:

Wait a second? CF is telling me that the image has a resolution of 72 DPI, when Exif viewer is telling me that in fact the resolution of the image is 300 dpi and the resolution of the embedded thumbnail is 72 dpi. My inclinations tell me that CF is pulling the wrong information, but we know that CF is just putting a nice wrapper on the metadata-extractor Java lib. So, my thinking is that either CF’s implementation is flawed, the Java lib is flawed, or this whole concept of Exif metadata is flawed (which some have argued).

Using Metadata-extractor

Based on my previous test (and other tests that I performed), I wanted to determine if I could pull the resolution from the correct IFD using the metadata-extractor Java lib. For some reason I thought I could do better than the engineers at Adobe (hah! riggghhhttt) who are Java programmers (and I haven’t touched much Java code since college). Well, just to prove myself wrong, I tried (and didn’t get anywhere, if its worth noting) and here is what I came up with.

First, there are several approaches that can be used to get at the Exif metadata using this library. I decided to try 3 different methods:

ExifReader class implementation,
JpegSegmentReader class implementation, and
JpegMetadataReader class implementation.

For each implementation I used some common variables that I param out at the beginning:

[-]View Code COLDFUSION
1
 

The following is code to read the Exif meta data and loop over each directory and output all the tag information for each implementation above:

ExifReader implementation

Code:

[-]View Code COLDFUSION

extractor = createObject("java","com.drew.metadata.exif.ExifReader").init(createObject("java","java.io.File").init(expandPath('./')&photoname));
md = extractor.extract();
directories = md.getDirectoryIterator();
while (directories.hasNext()){
    directory = directories.next();
    tags = directory.getTagIterator();
    while (tags.hasNext()) {
         tag = tags.next();
         WriteOutput(tag.getTagName()&': '&tag.getDescription()&'');
    }
}

JpegSegmentReader class implementation

Code:

[-]View Code COLDFUSION

segmentReaderObj = createObject("java","com.drew.imaging.jpeg.JpegSegmentReader");
segmentReader = segmentReaderObj.init(createObject("java","java.io.File").init(expandPath("./")&photoname));
exifSegment = segmentReader.readSegment(segmentReaderObj.SEGMENT_APP1);
iptcSegment = segmentReader.readSegment(segmentReaderObj.SEGMENT_APPD);
metadataObj = createObject("java","com.drew.metadata.Metadata");
exifReaderObj = createObject("java","com.drew.metadata.exif.ExifReader");
iptcReaderObj = createObject("java","com.drew.metadata.iptc.IptcReader");
metadata = metadataObj.init();
exifreader = exifReaderObj.init(exifSegment);
exifdata = exifreader.extract(metadata);
if (structKeyExists(variables,'iptcsegment')){
    iptcdata = iptcReaderObj.init(iptcSegment).extract(metadata);
}
 
//write out the exif data
directories = exifdata.getDirectoryIterator();
while (directories.hasNext()){
    directory = directories.next();
    tags = directory.getTagIterator();
    while (tags.hasNext()) {
         tag = tags.next();
         WriteOutput(tag.getTagName()&': '&tag.getDescription()&'');
    }
}
//write out the iptc data
if (structKeyExists(variables,'iptcsegment')){
    directories = iptcdata.getDirectoryIterator();
    while (directories.hasNext()){
        directory = directories.next();
        tags = directory.getTagIterator();
        while (tags.hasNext()) {
             tag = tags.next();
             WriteOutput(tag.getTagName()&': '&tag.getDescription()&'');
        }
    }
}

Output:
Make: Apple
Model: iPhone
Orientation: Top, left side (Horizontal / normal)
X Resolution: 72 dots per inch
Y Resolution: 72 dots per inch
Resolution Unit: Inch
Software: Adobe Photoshop CS3 Windows
Date/Time: 2008:04:15 09:15:42
F-Number: F2.8
Date/Time Original: 2007:11:08 12:26:54
Date/Time Digitized: 2007:11:08 12:26:54
Color Space: sRGB
Exif Image Width: 1200 pixels
Exif Image Height: 900 pixels
Unknown tag (0xa500): 2.2
Compression: JPEG (old-style)
Thumbnail Offset: 442 bytes
Thumbnail Length: 8874 bytes
Thumbnail Data: [8874 bytes of thumbnail data]
Directory Version: -23
Make: Apple
Model: iPhone
Orientation: Top, left side (Horizontal / normal)
X Resolution: 72 dots per inch
Y Resolution: 72 dots per inch
Resolution Unit: Inch
Software: Adobe Photoshop CS3 Windows
Date/Time: 2008:04:15 09:15:42
F-Number: F2.8
Date/Time Original: 2007:11:08 12:26:54
Date/Time Digitized: 2007:11:08 12:26:54
Color Space: sRGB
Exif Image Width: 1200 pixels
Exif Image Height: 900 pixels
Unknown tag (0xa500): 2.2
Compression: JPEG (old-style)
Thumbnail Offset: 442 bytes
Thumbnail Length: 8874 bytes
Thumbnail Data: [8874 bytes of thumbnail data]
Directory Version: -23

JpegMetadataReader class implementation

Code:

[-]View Code COLDFUSION

metadataReaderObj = createObject("java","com.drew.imaging.jpeg.JpegMetadataReader");
metadata = metadataReaderObj.readMetadata(createObject("java","java.io.File").init(expandPath("./")&photoname));
//write out the exif data
directories = metadata.getDirectoryIterator();
while (directories.hasNext()){
    directory = directories.next();
    tags = directory.getTagIterator();
    while (tags.hasNext()) {
         tag = tags.next();
         //WriteOutput(tag.getTagName()&': '&tag.getDescription()&'');
        WriteOutput(tag.toString()&'');
    }
}

Output:
[Exif] Make - Apple
[Exif] Model - iPhone
[Exif] Orientation - Top, left side (Horizontal / normal)
[Exif] X Resolution - 72 dots per inch
[Exif] Y Resolution - 72 dots per inch
[Exif] Resolution Unit - Inch
[Exif] Software - Adobe Photoshop CS3 Windows
[Exif] Date/Time - 2008:04:15 09:15:42
[Exif] F-Number - F2.8
[Exif] Date/Time Original - 2007:11:08 12:26:54
[Exif] Date/Time Digitized - 2007:11:08 12:26:54
[Exif] Color Space - sRGB
[Exif] Exif Image Width - 1200 pixels
[Exif] Exif Image Height - 900 pixels
[Exif] Unknown tag (0xa500) - 2.2
[Exif] Compression - JPEG (old-style)
[Exif] Thumbnail Offset - 442 bytes
[Exif] Thumbnail Length - 8874 bytes
[Exif] Thumbnail Data - [8874 bytes of thumbnail data]
[Iptc] Directory Version - -23
[Jpeg] Data Precision - 8 bits
[Jpeg] Image Height - 900 pixels
[Jpeg] Image Width - 1200 pixels
[Jpeg] Number of Components - 3
[Jpeg] Component 1 - Y component: Quantization table 0, Sampling factors 1 horiz/1 vert
[Jpeg] Component 2 - Cb component: Quantization table 1, Sampling factors 1 horiz/1 vert
[Jpeg] Component 3 - Cr component: Quantization table 1, Sampling factors 1 horiz/1 vert

Conclusion

In summary, it appears that there is not a consistent and reliable way to determine the resolution of an image using CF. I am aware that there are external tools and libraries outside of Java and CF that I could use to obtain this information, such as using imageMagik, however, I have not attempted any of these approaches.

Maybe I am wrong with my approaches and implementations, and would love to hear any suggestions, thoughts, and experiences you have had with EXIF metadata or determining the resolution of an image using ColdFusion.