Portfolio :: Wilfred J Keats II

L-3 Communications: Stratis

Reston, Virginia

Client: USPTO

Alexandria, Virginia

The code samples below all relate to my last project at USPTO, the OCIO website redesign. The OCIO screenshot of the SDLC Artifacts page (page 14 in the screenshot PDF) relates to these files.

• XHTML with Spry Data Calls The sample page shows the code required to produce the SDLC Artifacts page.
• Screen CSS The main screen css file.
• Print CSS The main print css file.
• Spry SDLC JavaScript The specialized JavaScript file that implements the data calls within the SDLC Artifacts page.

infoReliance Corporation

Fairfax, Virginia

Client: National Nuclear Security Administration (NNSA) Office of Planning, Programming, Budgeting and Evaluation — eNABEX project

Washington, DC, Germantown, Maryland, and Albuquerque, New Mexico, with various additional site offices

The Enterprise NNSA Administrative Budget Execution System (eNABEX) is an Intranet web-based application developed for the National Nuclear Security Administration (NNSA) Office of Planning, Programming, Budgeting and Evaluation. At the time of my departure from infoReliance, it was not yet deployed. eNABEX was intended to replace an older, more paper based system called NABEX. It intended purpose is as an integral part of the overall Budget Execution Process of NNSA.

Its requirements were that it firstly work with reasonable elegance in both Microsoft Internet Explorer, version 7 and 8. However it was desired that it work equally well in Chrome, Firefox, and Safari, as an increasing number of people had Macbooks and iPads. It was desired also that the standard-compliant browsers make use of the newer elements allowed in CSS3, provided that doing so did not compromise the experience in IE. Nonetheless, we were informed expressly that we would not support IE6 as DOE no longer supported it.

Below are samples of the page code used in the eNABEX project, with the CSS and scripts shown tied to their respective elements (master template, page view or control view).

Site Master Template

The Site Master Template is the 'master template' and provides the frame in which all other components fall on the view side. It contains a number of placeholders where "sub-pages" or other components can add their required CSS links, scripts, etc. It also contains the DTD statement, the header and footer code and similar items. The content placeholder with the ID of MainContent is where all visual content in a given page really plugs in. Dependent on this file are the following items:

CSS

• Screen CSS The main screen CSS file. It styled main page elements like the header, breadcrumbs, general content, and footer elements, as well as overrides of certain styles within the jquery-ui class set. The file includes such CSS3 items on certain elements like rounded borders, drop shadows, and gradients for those browsers that understand them. However, this file imports the "default" stylesheet, which is Eric Meyer's CSS Reset stylesheet, v1.0. Screen builts upon it and modifieds its particulars.
  • The Default "Reset" CSS Why reinvent the wheel? I saw no reason to do so. CSS guru Eric Meyer created what he called a reset stylesheet, which he freely shared to all. Its purpose was, and I quote, "to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on".
• jQuery UI CSS The jQuery UI stylesheet was edited directly, with my edits (additions, changes, or deletions) noted therein. I had wanted to use a separate stylesheet to hold the edits related to jQuery CSS, but the other person with whom I was working at the time was concerned about additional calls to the server and the latency that might ensue, so we went with editing the jQuery UI file directly. We changed that practice when BARTT was developed and created a separate stylesheet to contain all edits related to jQuery UI and plugin modifications.
• Less than or equal to (LTE) IE8 CSS The LTE IE8 stylesheets, which was placed within an Internet Explorer Conditional Comment (IECC) set rules explicitly for the Microsoft Internet Explorer, versions 8 and below.
• IE 8 CSS The IE 8 stylesheet set rules explicitly for IE8, primarily filters and box items, again within an IECC.
• IE 7 CSS The IE 7 stylesheet set rules explicitly for IE7, primarily box items, again wihtin an IECC.
• LTE IE 6 CSS The LTE IE 6 stylesheet set rules for IE6 and below within an IECC.

JavaScript

• The Microsoft Scripts The Site Master file contains three standard Microsoft scripts related to AJAX, the MVC and debugging of the MVC. The scripts enabled certain features within Visual Studio, or so I understood from the main ASP backend developer on the project.
• The jQuery General Scripts jQuery 1.4.4 and jQuery UI 1.8.7 are the main jQuery enabling script and the jQuery user interface enabling script. Most of site script are built on these two foundational scripts.
• IE specific scripts A script is embeded within an IECC in the master template code. It appends a div called IECurveBottom to the Container div if the condition is true, i.e. the browser is IE and is less than or equal to version 8. The div will then show an image to provide the curved bottom via an image that all standards-compliant browser show via CSS.

Active Script Page View: Approved Funding Change (AFP) Change Request Listing Page

The Listing Page, shown in the project section under infoReliance Corporation, eNABEX project, figure 2, plugs into the MainContent section of the Site Master Template. The grid shown in the screenshot is produced via the jQuery jqGrid plugin. The code that produces the jqGrid is defined in this document (lines 113 to 164). Lines 170 to 174 correct some miscalculations that the jqGrid made due to some things our team needed to do which changed the default behaviour of the grid. The functions above line 113 relate to search functions and other actions that this page required to comply with the project requirements.

As noted above, per the search requirements, the page is filterable via a search on the AFP ID number or by specified criteria. The secondary criteria are accessible within the second accordion panel at page top.

CSS

jqGrid 3.8.2 CSS This file, which amended by me as noted within it, was modified to reflect changes required to make the grid conform with the eNABEX site design. Most modification appear at the bottom of the file, beginning at line 169.

JavaScript

• The grid.locale-en-3.8.2.js and jquery.jqGrid-3.8.2.min.js are the enabling scripts for the jqGrid plugin.
• Common JS This script provides a series of functions used primarily to provide hints to users and other aides.

Active Script Page View: Approved Funding Change (AFP) Change Request Form

The Change Request page had two modes, Create New and Edit Record. The mode of use was determined by which button the user clicked on the listing page.

infoReliance Corporation

Client: National Nuclear Security Administration (NNSA) Office of Planning, Programming, Budgeting and Evaluation — eNABEX project

The Enterprise NNSA Administrative Budget Execution System (eNABEX) is an Intranet web-based application developed for the National Nuclear Security Administration (NNSA) Office of Planning, Programming, Budgeting and Evaluation. At the time of my departure from infoReliance, it was not yet deployed. eNABEX was intended to replace an older, more paper based system called NABEX. It intended purpose is as an integral part of the overall Budget Execution Process of NNSA.

Mock-up

These mock-ups were prepared using Adobe Fireworks, which is geared toward web graphics, whereas Adobe Photoshop is geared toward print and photographs. The Reports and Work Authorization designs where not dictated by the client, whereas the AFP section layout was, mostly. Consequently, I designed things based on discussions with my team members and input from the client.

• Views of Different Report Types Mock-ups of the different option screens that would produce reports for the eNABEX system.
• Work Authorizations page Mock-ups for the Search Existing and Create New Work Authorizations.
• Work Authorizations, View Detail screens Mock-ups for the view details.
• Work Authorizations, Edit page Mock-ups Work Authorization Edit page.

The writing samples below were written for various purposes and clients. These are strictly samples, intended to show what I have written in the past. The descriptive information explains the content for which the item was written. Copyrights are held by Wilfred Keats and/or the respective client or organization and may not be copied. All are PDFs except the NIH EA style guide, which is a collection of HTML pages.

Business Writing

• Corporate Marketing Brochure Created to market the services of Next Strategy, a web development start-up based in Georgetown, DC that I helped to launch in 2003. The brochure was laid out in Abode InDesign.

Creative Writing

• Theatre Review - Romeo and Juliet Written for the November 2008 issue of the News of the OCIO newsletter, the article covered the Shakespeare Theatre's then running production. The newsletter was laid out using Adobe InDesign. Full newsletter (for context only).
• Theatre Review - Twelfth Night Written for the February-March 2009 issue of the News of the OCIO newsletter, the article covered the Shakespeare Theatre's just closed production. The newsletter was laid out using Adobe InDesign. Full newsletter(for context only).
• Web Biography - Alfonso Carusone Created for the website of Sette Osteria restaurant, a Next Strategy client located near Dupont Circle, the biography was written to showcase the restaurant's master pizza maker. The biography was created originally in Dreamweaver.

Technical Writing

The samples below are from a range of projects.

Administrative Office of the US Courts (AOUSC)

• Software Requirements Specification This specification was one of fifteen specifications created to define requirements for the Early Retirement and Buyout application of the AOUSC's InfoWeb Intranet Portal during a reverse-engineering project. I was primarily responsible for the overview sections, some of the diagrammes, and editing the document.

US Patent and Trademark Office -- Office of the Chief Information Officer (USPTO/OCIO)

• Office Powerpoint 2003 User's Guide The forty page guide provided an overview of Powerpoint functions to users at the US Patent and Trademark Office. Its purpose was to cover basic functions of the application without going into great depth on its more hidden functions. The guide was originally written in PageMaker, but was recently transitioned to InDesign.
• CSM Website Operations Documentation Draft documentation. The task information, while still rough, provided guidance to site maintainers on how to modify tabs and panels, tables, created programmed links, etc. on particularly important page, the CPN on the Customer Service Manual website. Documentation created in Dreamweaver.
• OCIO Website Operations Documentation Draft documentation. The task information, while still in early-stage draft, provided guidance to the site maintainers on how to apply classes, select appropriate templates, create anchors, etc. for the OCIO website. Documentation created in Dreamweaver.
• orgSub Template Documentation Draft documentation. The orgSub template is a Dreamweaver template that controls the layout of the sub-organizational org chart pages of the OCIO website. It is a data-driven template in that very little may be directly edited in the a page spawned from the template without editing the template. Most page content is loaded via JavaScript which pulls the data from XML files. This documentation covers how process by which the back-end data is created. I was responsible for the information related to the spreadsheet itself, a colleague was responsible for the information related to OrgChart Pro, the software that generated the org chart images and Flash, and a third colleague was merging our initial documents together. This document remains in early-stage draft. Documenation created in Microsoft Word.

US Patent and Trademark Office -- Office of Human Resources

• Form PTO 516e This form was created in Adobe LifeCycle Designer as an interactive PDF. It is used for the Senior Executive Service ratings. Once complete, the user of print it for signatures and email the original to OHR.

Sapient/National Institutes of Health -- Enterprise Architect website

• NIH Enterprise Architecture Website Front-end Design Style Guide This guide was created as a reference tool for understanding how pages under the NIH enterprise architecture website should look and behave. The guide was created in Dreamweaver as a mini-website that could be placed on a CD and distributed, should NIH so wish. I created as a deliverable of a project on which I worked with Sapient. I created all the related templates that the guide references as well.