David Klassen

Angular - Responsive ES6 Apps

These web apps were an experiment in using AngularJS. I started with Angular1 and jumped to using Angular4 in future projects. Angular4 adds so many new things including TypeScript and ES6 related syntax. While I am just starting into Angular my experience with ES6 for ReactJS, tells me there is so much more to uncover here. I also tried to create some interesting pure Javascript code, since when I experimented with this with an AJAX Hockey App, I was amazed at what is possible. In the emailApp I creatd my own editable dropdown input field (so neat).

Health Insurance - Responsive Form Integration

This website was created to provide potential clients with a way to get a health insurance plan quote for their family. The task was to make an appealing form design that would respond to a numerous number of devices, and provide a simple experience that leads the user through the process of getting a quote or submitting an application for health insurance. The form design for the site was required to be highly customizable, and maintain usability during the application process. We chose to use NodeJS and React for this site since both frameworks allow for using the latest developments in Javascript (ES6/ES7).

Paradise Compared - Responsive Design

This website was created to provide responsive design in a layout using HTML5 and experimental CSS3 related features. The page content describes a few vacations I have been able to take over the years (and was the baseline for this site). The content expands horizonatally as the browser widens. The menu and navigation stays-on-top if the browser(view port) is significantly large, otherwise (ie. for mobile devices) it is simply a part of the page. The bottom footer is sticky and will stick firmly to the bottom section of the browser as long as the content does not exceed the browser page height.

Dance Is A Poem - Interactive Movie

This Flash Movie was created by a team of five people (Writer, Director, Artist, and Programmers), as a part of the Masters of Digital Media(MDM) Program at the Center for Digital Media. I helped create the Flash interactivity and attempted to integrate smoothly with the film, without taking away from the flow of action. It was a group effort so I can really only take credit for reading a book on Flash, however I hope you'll agree it is an interesting piece which with today's broadband access allows for significant accessibility, interaction and enjoyment.

Its Your City - Cultural Content

This Drupal website was created by a team of six people (Project Manager, Writer, Director, Artists, and Programmer), as a part of the Masters of Digital Media(MDM) Program at the Center for Digital Media. I helped create this Drupal website in order to share video information and content focused on informing people about issues of Locality within different geographic areas. We had a few user stories we wanted to communicate to viewers. The goal was to allow people to post YouTube/Vimeo videos on the site using pre-made Drupal modules. What follows are the videos and information we collected to describe Vancouver.

uContact - Address Book

This Java web application has been designed to be easy to use and simple to navigate. A user can Add, Modify, Delete, or Search for contacts already entered. It requires a user to login with credentials for role based activities. This three tier web application makes use of an Apache Webserver, a Tomcat Java Application Server, and a MYSQL database. A combination of HTML, CSS, JSP, JSTL, EL, i18n, and well placed graphics provides a visually pleasing interface.

WebUI Features - JQuery

This is a set of JQuery/Javascript features I have created to illustrate how JQuery is mandatory for any Web UI toolkit: click on a small picture to see it displayed in frame, mouse over links and pop-up window animations appear, simple to use UI for selected depature and return dates, give a user instant feed back concerning invalid input, movable tabs that allow for structured graphical page features, an example of how to offer multiple styles for viewing an interface, an AJAX example of how retrieve and process XML, and supply dynamic input hints, Javascript example describing the dangers behind unvalidated redirects, a Javascript example showing how using Cookie flags prevents Javascript access

uEmploy - WebManager - SOAP Service xsd1 xsd2

This Java web application uses the the Java displaytag library to easily display SessionBean object Lists in a configurable table. A user can Add, Delete, or Search for employees. This web app makes no database calls directly, instead it uses a JAX-WS SOAP service provided by a Java Service Endpoint Interface. This four tier web application makes use of an Apache Webserver, a Tomcat Java Application Server, a Java SEI, and a MYSQL database. A combination of HTML, CSS, JSP, JSTL, EL, displaytag.org, and JAX-WS provide a simple yet powerful interface.

uEmploy - WebManager - REST Service xsd

This Java web application uses the the Java displaytag library to easily display SessionBean object Lists in a configurable table. A user can Add, Delete, or Search for employees. This web app makes no database calls directly, instead it uses a JAX-RS REST service provided by a Java Application server. This four tier web application makes use of an Apache Webserver, a Tomcat Java Application Server, a JBoss Application server, and a MYSQL database. A combination of HTML, CSS, JSP, JSTL, EL, displaytag.org, and JAX-RS provide a simple yet powerful interface.

nCase Firewall - Practicum Project

This program was the subject of an intense practicum I completed at BCIT, in order to attempt to provide better security for enterpises engaged in operating SCADA Systems. It was designed to operate on an Intrinsyc PXA270 embedded Linux board (ie. a handheld sized board). The configuration provides a firewall that does not allow any external access. If external access is required a remote client can request to open a port by using a custom encryption channel. In this way access through the firewall to the internal network is only available to those that know the custom encryption/protocol. Access is further monitored by a configuration file that can be as restrictive as required

Micro Loans - Responsive/Mobile Form

This website was an experiment in using Responsive Web Design to allow for any device to follow through a number of screens to complete the application process for a simple small loan. Depending on the size of the device screen a different number of fields are presented, so that the user never needs to scroll through a page to see all the fields. Numerous cross/browser/platform issues were addressed, in order to ensure the user could view some help text and also enter data without having to do anything other than tap a field, enter data, and click a button to proceed to the next screen.