Projects

A few representative samples

A major challenge with showing projects I have done is almost all of them are either back-end solutions you can't see, or proprietary applications that are not intended for public display. These are some samplings of my work with HTML5, CSS, EcmaScript and ColdFusion —with some Flash thrown in for good measure.

  • adobe coldfusion

    Presentation to Seattle CFUG

    Coldfusion and PDF

    This demonstration explores various applications of ColdFusion with PDF technology. To access the demo, log in to https://training.latreia.com with the user name 'cfug' and password 'Seattle'. Then click the 'View Details' button under the course Fun with PDFs ...and ColdFusion. The course content includes a download link for all the source code, as well as online demos of the technologies presented.

  • javascript ui

    siprnet analytics tool

    Javascript, bootstrap, fontawesome

    This was a prototype UI design for what was intended to be a “Classified Twitter Feed” for use on the DoD SIPR Network. To view the project, click http://portfolio.latreia.com/hsp/. Once in the UI demo, you can toggle various controls, including creating a new Topic, adding search parameters which would (in a real application) filter the stream of incoming intelligence and display items of interest to the analyst.

    For example, create a new Topic called Kandahar, add filters for entity of karzai, timeframe of last occurred within last 12 minths, location of Kandahar, and select the shape for Ahmed Wali Karzai Residence. Save the Topic. (This is merely JavaScript, CSS and HTML; no database interaction —just a functional mockup to display how it could be used.)

  • css grid

    Demo application

    coldfusion, ajax, javascript, css grid

    This is a simple demo application using css grid. An AJAX call using the Fetch API requests humor from the broser. The ‘humor’ (bloopers, bad puns and anecdotes) are retrieved from a SQL Server database using ColdFusion. The CF application then randomly re-sorts the data and returns it as a JSON array. The Fetch callback function then starts appending the humor to the framework div every five seconds.

    To view this in operation, click this link: http://joke-u-lator.latreia.com. It is responsive, so try changing the width of the screen. The CSS grid uses the dense-packing algorithm which will fit items of different sizes into the display merely by adding the keyword ‘dense’ to the CSS attribute. Amazing.

  • responsive web design

    Prototype course

    Lectures, Labs and Notes

    Having taught Web Design I and Web Design II at Pikes Peak Community College for more than a decade, and having strong feelings about what developers needed to know to be competitive in the 21st Century, I set out to develop a new course for the college on Responsive Web Design. (As you doubtless know, a Web site is ‘responsive’ if it uses HTML and CSS to automatically resize, hide, shrink, or enlarge, a website and its components to make it look good on all devices (desktops, tablets, and phones.)

    The prototype course materials are here: http://webclass.latreia.com/responsive. Feel free to download and view the PowerPoint slides, and PDF handouts. If you are interested in the complete, final version of the course (which was approved for evaluation by the Colorado Community College System), send me an email and I will be happy to send the entire course. It is rather large...

  • Teaching Aid

    html color demo

    How rgba color works on the web

    A concept students had difficulty grasphing was how numbers could translate into colors. CSS uses either hexadecimal numbers (#FFFFFF) or rgb/rgba decimal numbers (255,255,25,255) to designate colors. Explaining how this works was difficult, so I wrote this Flash application to demonstrate.

    Imagine three spotlights —red, green and blue —that you can control with sliders. Move a slider up to make the corresponding spotlight brighter, move down to make it dimmer. The combination of the three lights makes different colors. If all three are at maximum brightness, the result is white. This is because light is additive color. (Ink and paint are subtractive color, selectively reflecting back only certain frequencies, and trapping the others, due to the crystaline structure of the minerals used to make the pigment.)

    Assuming your browser can use Flash, click this link: colorDemo.html to load the Flash animation, and play with the sliders. The numbers at the top of the sliders reflect the decimal and hexadecimal values you set by moving the sldiers. The fourth slider is actually the opacity number. So as you reduce the opacity, the underlying pattern becomes visible.

    (If your browser does not support Flash —it is being blocked by many security apps —you can download a Windows executable version 17.9 MB here.)

  • multimedia

    Adobe Flash

    travelogue of 2006 visit to sicily

    Back in 1985, as a young Air Force Captain, I had an unaccompanied tour as chief of Public Affairs for a NATO cruise missile base in Sicily. I fell in love with the country, the food, the people, and vowed to bring my wife there some day. That day arrived in 2006. With the extraordinary kindness of my dear friend/carpool buddy from the Italian Air Force, we spent two glorious weeks there.

    The application is too large to serve up online, but you can download the 97.2 MB .ZIP file, which contains the Flash application and all its components (images and sound files), here: https://www.latreia.com/sicily.