Portfolio :: Wilfred J Keats II

Bistro Med was a Turkish restaurant on M Street, Georgetown. The site's introductory page, which was Flash presentation, did not display entirely in Opera, but the rest of the site worked fine.

The site included the restaurant's menus, accessable via pop-up menus, on-line gift certificate via PayPal, and an e-mailing sign-up option, in addition to regular information about the restaurant.

Bistro Med closed in July 2006.

The Bizim Collection markets Turkish furnishing products -- furniture, ceramics, carpets, etc. The site includes an on-line store which employs the PayPal payment system for its back-end.

The site, which employed layers, was setup to function with Adobe Contribute.

The site has been redesigned at least once since I left Next Strategy in 2006.

Butterfield 9 was a well-regarded and rather expensive restaurant on Fourteenth Street that specialized in modern American cuisine.

The website contained their menus, promotion events, history, and similar information.

The site was intensely visual with many graphical events that required either background images or images within the page code. CSS2 was used to make the site visually appealing while cluttering the code as little as possible.

Reservations were made via a form linked to the Open Table platform. Interested people could subscribe to the Butterfield 9 mailing list which was managed by Next Strategy's mailing list software. The site was also optimized for search engines by the Next Strategy team.

Butterfield 9 closed in late 2008 after the economic downtown.

The Canella-Achilli Architects was intended to have an Italian language section, at which point a database would have been built to undergird it. Consequently, the site was planned to allow for an Italian version. Unfortunately, the client had not, as of 2006, provided content copy for the Italian version.

The projects section is organized not only by project type, but also by chronological decade. As the client did not want a database behind the site initially, but the project information repeated between the two display modes, the project section uses IFRAME construct.

The site remains basically unchanged from its initial design.

Cheray deCandia was (and I think remains) a designer of hand-made jewelry, some of which was very expensive and most of which was quite beautiful in a sort of beachy way.

Her site works in all browsers. Cheray wanted a site that was proportional, i.e., one that adjusted/resized to the browser window, rather than a fixed size. It was designed to work properly on an 800 x 600 screen. She sold her jewelry via the site using PayPal as well as some fancier, bespoke stores in the Washington area.

Originally in hot pink, as shown at right, the site underwent a base color change, so the pink changed to Tiffany blue (ahhhhh! the glory of style sheets!). However as Tiffany blue is not web-safe, it showed more more green than Tiffany blue in some browsers and platforms than one other ones.

The on-line store section (Shop Cheray's Designs) was organized by collection.

Since my departure from Next Strategy, her site has been closed.

Equinox BodyWorks was a fitness development firm in Alexandria. Their site was mostly a brochureware. I built it using XHTML 1.0 transitional, CSS, and JavaScript. Its home page contained a Flash presentation created by another member of the Next Strategy team, which I integrated into the site. Due to the Flash presentation and some design constrains imposed by the client, the home page was not fully functional across all browsers, but all other pages functioned properly at site launch.

All pages except the home page worked properly in IE, Firefox, and Opera on Windows and generally worked properly in Safari on the Mac.

The site disappeared in 2009.

Filomena Ristorante is an Italian restaurant in Georgetown on lower Wisconsin Avenue.

Their site only worked properly in Internet Explorer 6 on Windows, because that is the only browser they wanted supported against our advice. They also did not want any notice on the site that it worked only in IE.

Filomena's site, like Bistro Med, included a small Flash presentation, in this case contained within the store front window space on the home page itself.

After my departure, the site was redone entirely in Adobe Flash.

Government Executive Network (Goven) was a management training organization that targeted government executives. It provides a range of management training services.

The Goven site was built using the open-source MODx content management framework. Its utilized AJAX in various functions on the site. Site layout was controlled via CSS.

MCN Corp. was a turnkey design and build and general contracting company located on N Street in Georgetown, just east of its junction with Wisconsin Avenue. Most of their projects are within Metropolitan Washington.

Their website has changed substantially in the last six years and is now much more extensive than the brochure-ware site that I built for them in 2006. Based on the current site, they have grown into a full-service construction firm now.

Café Milano, the flagship of Franco Nuschese's Georgetown Entertainment Group empire, is a well-known watering hole on Prospect Street, NW, in Georgetown that caters to the glitterati, the politicos, and just about anyone else that likes a good time (or as the Romans said, "wine, women and song").

While the site is now entirely built in Flash, it was originally built in HTML with some Flash elements. It used a form of a content management system to allow the daily update of its menus and posting of information related to the ever-changing schedule of events at Milano.

Formerly an editor at the Wall Street Journal, Richard Miniter is a New York Times best-selling author who has also won first prize from the International Consortium of Investigative Journalists. He is a prolific writer who has written more than 130 articles covering the War on Terror and other topics that have appeared in papers world-wide. Next Strategy provided web services specifically tailored to his needs. This included a "Writer's Notebook" XHTML site archiving his numerous articles from the past 14 uears, a blog to get out the word on his writings, and a shopping cart to buy autographed books from his site.

Richard Miniter's site looked and functioned identically in both Firefox and Internet Explorer. XHTML 1.0 transitional, CSS 2.1 and JavaScript 1.3, plus some PHP, allowed modern functionality. The site also contained a blog, built using the MovableType blogging system.

Richard, who is an old friend of mine, moved his blog and site to Pajamas Media after my departure from Next Strategy. The site assumed the template pattern of this new site. He has relocated it at least once since then and the currect site is built in WordPress and looks nothing like the one I built for him while at Next Strategy, although he has retained a variant of the map motif that I originally created for him.

Richard Williams Architects (RWA) specializes in the design of exceptional projects within a variety of settings — urban context, garden suburbs and rural outposts — that all share a common sense of belonging and purpose. The firm's work has received numerous awards and is celebrated for "making place", whether through entirely new construction on open land, or through the integration of additions/alterations into existing fabric. The firm's keen appreciation of site allows for the design of buildings that are defined not by their style, but by their appropriateness of scale and materials and their attention to detail.

RWA wanted a site that resembled the functionality of Flash without its cost. Consequently, RWA made heavy use of JavaScript for many site functions. While those who had scripting disabled may have difficulties, RWA required flare. In addition to JavaScript (which controled the site slide shows and internal page scrolling), the site was built using XHTML 1.0 transitional and CSS 2.1.

The site was converted to Adobe Flash after my departure from Next Strategy.

Stte Osteria, which is part of Franco Nuschese's restaurant empire (The Georgetown Entertainment Group), is a rather elegant pizzaria just north of DuPont Circle at R Street and Connecticut Avenue, NW. The site, which has been substantially redone recently, included information about its chef, Alfonso Carusone, and some other staff members and made a bit point of how authenic its pizzas were.

From a technical perspective, the site was not particularly complicated. It was built with HTML 4.1 (against my recommendations -- however the current site remains in 4.1), CSS, and scripting. It used PagePublisher to populate its menus weekly and its reservation system was linked to Open Table.

The purpose of the Widow's Mite site was to sell vinegar made by Daniela Franciscus from a special, secret New Orleans Creole recipe. Some of the proceeds from the sale of the vinegar was donated to various charities via the Franciscus Family Foundation.

The site was built in XHTML. It used CSS for placement of content and fonts. It employed JavaScript for rollover buttons and similar functions. The store was integrated with PayPal. whereby clicking on a Buy Now button transferred the user to PayPal for completion of the purchase.

The site went off-line sometime between 18 February 2007 and 6 October 2008. The domain is now held by a firm that markets Biblical era coins.

Yoga Tales is a yoga school in Bethesda, Maryland, specializing in programs for children.

Their site initially worked as designed in Internet Explorer 6 on Windows per their insistance, although most pages displayed in Opera (frequently with oddities). It did not work as designed in Mozilla Firefox or Apple Safari as the client did not want the time expended to make them work equally well in all browsers. The site included a small slideshow.

At the redesign in 2005, they finally allowed multiple browser testing — IE6, Firefox, Opera, and Safari. At the time of relaunch, the site worked across all browsers. As of several months ago, the site design was still that of the 2005 redesign, although I do not know if Next Strategy still hosted it.

The Customer Service Manual (CSM) website was (and probably still is) an internal site used by the OCIO IT Help Desk as an on-line tool to assist in their everyday functions. It was not linked to any other site within the Intranet, nor was it linked to any external site on either the Extranet or Internet. It was, at launch, comprised of 500 to 1000 documents.

The redesigned site made limited use of AJAX to assist, in particular, with keyword aids for the search function on the site. It also had a CSS-controlled navigation system. The site was both standards and Section 508 compliant, utilizing XHTML 1.0, CSS 2.1, and JavaScript. It was designed to work in all standards-compliant browsers, and IE 6.

The Intranet site of the Office of the Chief Information Officer (OCIO) is a both a high traffic and high visibility site. It had between 8,000 and 10,000 documents within it at launch. Much of the site is data-driven in one way or another.

The site made extensive use of AJAX and its layout was completely CSS controlled. As use of a true database was denied, but dynamic loading of content was required, I created a system of Excel spreadsheets to hold the regular content. I created XML schema files (XSD) that were attached to each Excel file to control how the data was exported. Then I created scripting via Spry to insert that data into the pages as needed.

The screenshots at the above right (scrolling of which can be halted be pausing the mouse over a screenshot) show pages utilizing the various templates created for the site.

Templates

Figure 1: The Primary Page

The home page was controlled by the primary page template. In layout, it was quite complex with two columns below a full span. The elements included an accordion, collapsible panels, and tab interface. The intention was to provide much information as possible in an intelligentially organized interface.

Figure 2: Primary Nav System

The second screenshot shows the site's primary navigation system with it expanded to its third level. The navigation system was completely controlled by CSS. The screenshot also shows the secondary navigation system on the right at top, which is labelled In the Section. A third mode also existed, which was a collapsible tree, and it was used on topical index pages.

Figure 3: Secondary Level Main

The secondary level main page was a two column layout with a box for Quick Aides to the left of the main column. The box's content changed depending on section.

Figure 4: Tertiary Level Simple Main

The tertiary level simple main template was intended as a landing page with links to documents.

Figure 5: Tertiary Level Complex main

The tertiary level complex main template was a landing page for a major subsection.

Figure 6: Simple general content

The simple general content template was a single column layout meant for regular pages.

Figure 7: Complex general content

The complex general content template allowed inclusion of tabular data generated from XML files in an otherwise normal, single column content page.

Figure 8: Simple tab

The simple tab template allowed a single level of tabbed panels.

Figure 9: Complex tab

The complex tab template had a dual level of tabbed panels.

Figure 10: Simple FAQ

The simple FAQ template was meant for FAQ documents that had single levels of questions, rather than subjects that had sub-topics.

Figure 11: Complex FAQ

The complex FAQ template was meant for FAQs that had several levels of organization.

Figure 12: Organizational main

The organization main template was a regular secondary level landing page, except that its content area was an organiation chart.

Figure 13: Organizational child

The organization child template was used for all sub-offices, divisions, etc. It showed the individual organization charts, provided more detailed information below the chart, and had a link to a Flash application that allowed movement between offices for exploration purposes. Pages tied to this template were entirely XML data driven.

Figure 14: Content datatable

The content datatable template was used for tabular content generated from XML files.

Figure 15: Form

The form template allow creation of forms that generated emails on the backend to whomever was listed as the recipient in the page code. The submitted content of the form in the screenshot came to our office.

Figure 16: Topic index

The topic index template had a tree navigation system that was generated by JavaScript. It was used for both topics (subjects) and site map purposes.

Figure 17: Reference

The reference template was meant for listings of supporting documentation for each site sub-section.

The US Army website, which is the second most visited US Government website with more than 1.5 million visits per month. The Army site integrates with various social media including Facebook, Flickr, Twitter, and YouTube. In fact, social media content and connections are so important to the Army that links to it occupy the very center of the home page.

While working on the Army site, our team was in process of upgrading the underlying content management system, CORE, from version 1 to version 2. CORE, which was built using the CodeIgniter PHP Framework, has a lot of parts and is used by several thousand people daily to create and upload content into the system from bases all over the world (and the Pentagon). I also built a number of sub-sites (discussed separately), which were losely tied into CORE.

Although I worked on the site for a relatively short time, I greatly enjoyed it. Unfortunately, my tenure there was cut short because the Army decided to recompete the contract and changed the requirements so that everyone working on the site had to have clearance in hand when the bid was submitted. My clearance was in process, but had not yet come through.

The US Army Community Relations Division (COMREL) subsite had not transitioned from CORE1 to CORE2 by the time of my departure, and based on the look of the live site as I write this (on 9 July 2012) it may not have done so yet. COMREL is headquartered at the Pentagon.

COMREL, to quote the blurb on the site, "serves as the Army's senior outreach effort. Through events and relationships with a wide spectrum of businesses, organizations, and local community and education leader... Its intent is to bring the nation closer to the soldiers who serve it.

The site employs a range of social media, in particular, tweets (Twitter comments) from soldiers in the field, photos via Flickr, and videos via YouTube, to get their message out to the world.

I built the current look/feel for the COMREL site while at the Army, including the rotating series of photographs on the front page, and integrated the social features into the home page. Clicking on the social media tracker icons reveals information on how to connect to the various media services. The site looks best when using a standards-compliant browser (Chrome, Firefox, Opera, or Safari), because the various elements have round corners, etc., which is produced using CSS3. Unfortunately, Internet Explorer below version 9 does not understand CSS3.

The Drill Sergeant of the Year is an annual competition of the Army's best non-commissioned officers from across the nation. The winning active duty Army Drill Sergeant receives the Stephen Ailes Award, which was initiated in 1969 and named for the Secretary of the Army between 1964 and 1965. Ailes was instrumental in establishing the first Drill Sergeant School at Fort Leonard Wood, Missouri. The winning Army Reserve Drill Sergeant receives the Ralph Haines, Jr. Award. Haines was commander of the Continental Army Command from 1970 to 1972.

The site was fun to build. The site incorporates the standard Army.mil Features banner that appears on almost all Army subsites. The navigation bar indicator ( the little upward pointing arrow) changes to indicate on which page the visitor currently is. The photo that spans across the middle top of the page changes every few seconds, rotating through photos from prior years.

Each time the page loads, a different candidate is highlighted via a randomly generated choice. Clicking on the photograph of the current candidate with take the visitor to featured drill sergeant's tab on the competitors page. Within each tab is a biography of the candidate, which contains a scroller element if the full biography does not fit within the browser window.

I was very proud of this site because it conveyed a good deal of information in a relatively concise manner, and did so elegantly -- even if I do say so myself.

The Korean War 60^th Anniversary subsite was built to commemorate the war, the anniversary of which is still on-going as the war lasted three years, from 1950 - 1953. Technically, the Allied Powers are still at war with North Korea as no peace treaty was ever signed, only a cease-fire. The Commemoration Committee, authorized in the 2011 Defense Authorization Bill and for whom the site was built, is dedicated to thanking and honoring all the Veterans of the Korean War, their families, and especially the loved ones of those who paid the ultimate sacrifice for their country. I was particularly proud to have built this site because several of my father's cousins, one of whom passed on in 2011, served their country faithfully in this war.

Design-wise, the site was relatively straight-forward. Like most subsites, it incorporates the standard Army.mil Features banner at the top. The more challenging elements in it were the integration of the various social media resources (Facebook, Twitter, Delicious, MySpace, Yahoo Buzz, etc.), the Flash presentation, and the videos. On the home page, the Flash presentation and the insignia of the US components (the Eighth Army, the various Corps, the cavalry and infantry divisions) proved the big challenges. Flash can cause z-index stacking issues, i.e. it does not know its place and sometimes attempts to seize the entire page. Wrestling it into its proper role consumes a lot of time on occasion. The Components posed a challenge in Internet Explorer (IE) because does not fully understand CSS.

On an accessibility front, this site posed challenges of a different nature to WCAG/Section 508 requirements because of the Flash and video elements. The accessibility issues were dealt with via use of text versions of the content and captions within the video. I was happy with this site because while it gave me some headaches during its construction, it has held up well.

The Post World War II Japan subsite had special meaning to me for family reasons. Firstly, my father is a World War II veteran who served in the US Army Air Corps and ended the war on the Japanese island of Okinawa. As he has said, if Harry Truman had not dropped two particular bombs on Japan, I would probably not be alive as the expected return ratios from an invasion of the main island were not good. Secondly in early September 1945, the Japanese Empire surrendered on the USS Missouri, which was the flagship of my great-grandmother's cousin, "Bull" Halsey. Thirdly my brother Halsey, a naval officer, was stationed in Japan for four year in the 1990s.

The subsite makes heavy use of Abode Flash, but provides transcripts of all Flash and video components therein. It also makes heavy use of social media integration, in particular Facebook, Twitter, Delicious, and LinkedIn. Like most subsites, it incorporates the standard Army.mil Features banner at the top. The site also has a page listing multiple resouces for those visitors who wish to learn more about the US Army's activities during the occupation in Japan between 1945 and 1962. Also included is a photographic slideshow with a caption drop-down that becomes visible via photo mouse-over.

CORE2 is the internal, in-house content management system, which built atop the CodeIgniter PHP Framework, that undergirds the entire Army.mil website. The screenshots should how various editing function pages looked to users while in BETA development. During my time working for the Army site, we were preparing to take CORE2 live. It went live officially shortly after my departure. While the original CORE had provided some nice features, its second version added in new functionality, including allowing increased levels of approval, finer control of messaging between users, increased security, and a much nicer visual presentation with much improved Web 2.0 stuff (like transparencies, overlays, etc.).

Figure 1: Create Content

Users create a new page within CORE2, assign a name, author, etc.

Figure 2: Place Content

The Place Content functions allow users to pull images, video, etc. from the respository and place them within designated areas on pages, depending on which template the page uses.

Figure 3: Release Content

Allows the release/approval of content. Users with the correct authorizations/permissions can a page and will go live immediately via this view.

Figure 4: Internal Messaging

Private instant messaging for the users of CORE2. Its purpose was to allow content creators, editors, and other interested parties to communicate quickly and securely.

The Baseline Analysis, Reporting and Tracking Tool (BARTT) was (and still is) being developed to replace an older ASP.NET-based system. BARTT is and will remain an Intranet web-based centralized project management tool to manage program data at the National Nuclear Security Administration (NNSA) headquarters level and provide a communication tool between Site Offices, e.g. Los Alamos, and the Management and Operating Contractors at eight NNSA facilities. The site used the Microsoft .NET 4.0 framework with Web Forms. I was responsible for the look/feel, although it tweaked the more front-end C# code when necessary.

While screenshots were snapped using Internet Explorer and hence do not truly display CSS3 features, if the site is accessed using a standards-compliant browser (Chrome, Firefox, Safari, etc.), then most corners will be rounded, some text will be shadowed, and deeper gradients will be seen.

Figure 1: Overview Listing

The Project listing page is designed to filter shown information depending on project status. The page title changes depending on which status is chosen from the drop-down menu on the left side in the header area. If all stati are shown, then the title simply reads as Project List. The 'tabular' list is produced the using jqGrid plugin with the data loaded via a JSON call from the backend database.

Figure 2: Detail — Basic Info

The detail page of each project is comprised of a series of tabbed panels. The first panel, shown at right, is the Basic Information view. It details overarching information related to the project. It is laid out in two panes, arranged side by side by CSS.

Figure 3: Detail — Small Business

The Small Business tab shows a condensed version of basic project information on the left. In the right pane, the pane's content is conditional. The If yes is selected per the question of whether or not the project ties to a federal small business. The default state is no. If affirmative, the following questions are shown as in the screenshot.

Figure 4: Detail — Funding

The Funding tab again uses the jqGrid plugin. The icon on the right allow the editing or deletion of the funding records related to the project. Each project must have at least one funding record.

Figure 5: Detail — Costs and Schedule

The Costs and Schedule tab is laid out somewhat differently than other tabs. The upper pane provides costing overview information. The lower pane again employs the jqGrid plugin to display financial information related to the 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. In fact, it had been put on hold in early 2012 because the client office was undergoing reorganization and rethinking how it wanted to use applications. 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. The eNABEX system functionality was grouped as follows:

• Approved Funding Program (AFP) Change Requests,
• Work Authorizations (WA),
• Reports, and
• System Administration

Figure 1: The Home Page

Content

Figure 2: AFP Change Request (AFPCR) Listing

Content

Figure 3: AFPCR View Detail

Content

Figure 4: AFPCR Edit, Tab 1 — Basic AFP Info

Content

Figure 5: AFPCR Edit, Tab 2 — Funding Change Info

Content

Figure 6: AFPCR Edit, Tab 2 Modal Overlay — Funding Change Detail

Content

Figure 7: AFPCR Edit, Tab 3 — Guidance Info

Content

Figure 8: AFPCR Edit, Tab 5 — Approval

Content

Figure 9: Search Work Authorizations, Search Existing tab

Content

Figure 10: Edit Work Authorizations page

Content

The

The

The

The

The

The Huguenot Society of Maryland is an hereditary society, which was organized on 31 March 1968. Its objectives are patriotic, religious, historical, and educational. The intention is to perpetuate the memory, spirit, and deeds of the men and women in France known as Huguenots who were persecuted in the 16th and 17th centuries because of their adherence to the tenets of the Protestant faith (and in particular the Calvinistic part thereof) and their devotion to liberty, and who emigrated either directly or through other countries to North America and contributed by their character and ability to the development of the United States.

I am the society's volunteer webmaster. The site went live in 2000. Originally it was not in a content management system. About eight years ago, the society's executive council decided that they wanted one behind the site, at which time it was decided to use the MODx CMS Framework. Some months ago, the council decided that the site should move to a WordPress platform.

The site currently has the default look of MODx and is not been updated. It was decided to revert to the default design while the conversion to WordPress is being prepared so that any required updates will not be dependent of modifying template files, etc. The new site in WordPress is being built and will have an entirely new design. The WordPress incarnation is hidden until it is ready.

National Institutes of Health (NIH) Enterprise Architecture (EA) is a part of the NIH's Center for Information Technology, located in Bethesda, Maryland. NIH itself is part of the Department of Health and Human Services. As a code consultant to Sapient, I created the templates for the MCMS that Sapient was building for their client, the National Institutes of Health's Enterprise Architecture site, controlled by the NIH's CIO.

In total, I created ten (10) different templates for the project. The project requirements were a cross-platform and cross-browser site that adhered to the strict XHTML 1.0 DTD. It was also required to be Section 508 compliant. It uses XHTML, CSS, and JavaScript with a backend built on a Microsoft Content Management System and SQL Server.

The site today still has the same look and feel, although it has seen some changes. It is still, also, ASP-based, although the original CMS has probably been replaced as I do not think the Microsoft CMS exists any longer.

The Arts Club of Washington is the oldest arts-related organization within the District of Columbia, established in 1916. Its club house was the home of President James Madison and served as the Executive Mansion for the first six months of his presidency while the then Executive Mansion (now the "White House") was restored after the fire set by British Admiral Cockburn during the War of 1812. The house was built in 1802. Other occupants of the house prior to the club was the British Legation and Cleveland Abbe, who founded the National Weather Service.

While I have been a club member for nearly twenty years, I only became the club webmaster in 2008. At that time, the club website was built in Microsoft FrontPage and represent the image the club wished to show the world. After several false starts at revamping the site, the club's web committee realized that what we had was not worth salvaging (although some of the content was worth it). We also realized that we were a little to close to the project. Consequently the club brought in an outside designer to assist with the site revamp.

The assessment of the club's needs took longer than desired, but in the end the time spent in the assessment produced a beautiful new site. I worked with the designer, Brandon Schmittling, to get the new site up and running. It is in WordPress and relaunched in May, 2011. Since launch I have slowly brought on-line various new elements and site options as they are readied.

The revamped site now allows:

• Integration Twitter, Facebook, and YouTube with club content,
• A mobile variant for both iOS and Android operating systems,
• A calendar of events that is searchable,
• Forms for various functions, and
• Online galleries of art in the club.

Site usage has increased 500% since launch, now averaging more than 10,000 page views per month, of whom 45% are returning visitors.