You can view this album here.

Collaborating with a Computer Science student, I helped to build iPhone and Android apps for Homecoming. My contributions were the UI design, home screen icon design, and I built HTML pages for displaying event schedules that are rendered in a webview in the app.

I designed the UI using graphics from our marketing department and icons from thenounproject.com to tie it in with the rest of our marketing materials.

To maintain some control over the content in the app, we decided to use HTML pages in webviews for the event schedules. This would allow us to change the content on our server, without having to edit content in the app itself and submit an update to the app stores each time.

I used jQuery Mobile as the basis for these schedules, organizing the events and event data inside of an accordion view. To keep these pages lean, I used a JSON file to hold the events, and jQuery’s $.ajax() to load this file and sort the events by class year. Finally, I utilized Handlebars.js (and pre-compiled templates for faster rendering) to build the markup that jQuery Mobile needed.

You can view this app (and download) on iTunes or Google Play.

Students can search for mentors with a myriad of criteria, and WiN provides the student with a list of alumni who match the search. Students can then send a request to a specific alumnus and make a mentoring connection. Mentors remain anonymous until they explicitly agree to the student’s request, at which point WiN will automatically swap contact information via email between the student and mentor.

Initially, I worked with Stanford’s developer to integrate his back-end (PHP) code into the main Wheaton College front-end design, which required building new functions for generating HTML elements dynamically. Since the initial setup, I have aided our team in implementing many enhancements, such as: charts for faculty that display dynamic information about the students in their department (using Highcharts.js), form element design for the sign-up and profile forms, and design changes for the user profile sections.

To install this theme, open TaskPaper preferences and use the drop-down theme menu to select “open themes folder.” Then place the file in this folder, restart TaskPaper, and choose the new theme in the preferences menu.

With JQuery, we can target an input dynamically, and add in the attribute using the attr(); method. Since the attribute doesn’t require a value, we’ll need to pass the webkit speech attribbute, and an empty value to JQuery’s attribute method like so: attr('x-webkit-speech', '');

//add speech input to a text field via JQuery
$(document).ready(function(){ 
  $('#search').attr('x-webkit-speech', ''); 
});

Big thanks to phpied.com for the inspiration.

For a bit of extra flair, I included some CSS3 transitions, box-shadow, and opacity on the drop-down menus.  The WordPress integration also included tweaking the “custom background” feature so the background on the homepage can be changed by the user via the backend.

UniqueConformity.com

However, as functional and useful as some of the features are, optimizing your site for search engines and user navigation can be a little daunting. One thing that has been bugging me for a while now is Ekk’s lack of attention for the <title> element.

Because of how the Monk CMS API works, each template (or module) type uses a different API call to spit out content. This means that each page, article, event, or sermon requires a different getContent() statement to find the page’s content.

Here’s a hack-ish solution I came up with to display a more relevant <title> element using PHP to find the template type using the page URI. After the page URI is found with $_SERVER['REQUEST_URI'], we’re using preg_split() to find the first part of the URI, which is the template type. After that’s found, we show Ekklesia which getContent() statement to use and then we get the correct title, no matter where we are in the site.

This should help those (like us) who have been victims of the dreaded “duplicate content” warnings on Google webmaster tools and similar systems.

<title>
<?php
  $hdtitle = getContent("page","find:".$_GET['nav'],"show:__title__","noecho");
  if ($hdtitle == "INDEX"){
    echo "Wheatland Salem Church | Naperville & Oswego, IL.";
    } else if ($hdtitle != "") {
      echo $hdtitle." | "."Wheatland Salem Church";
    } else if ($hdtitle == "") {			
      $uriPath = preg_split("/\//",$_SERVER['REQUEST_URI'],-1);
      $uriKey = $uriPath[1];		
      if ($uriKey == "article") {
        getContent("article","display:detail","find:".$_GET['slug'],"show:__title__ | ");
        echo "Wheatland Salem Church";
      } else if ($uriKey == "sermons") {
        echo "Sermons | Wheatland Salem Church";
      } else if ($uriKey == "events") {
        echo "Events | Wheatland Salem Church";
      } else if ($uriKey == "sermon") {
        getContent("sermon","display:detail","find:".$_GET['slug'],"show:__title__ | ");
        echo "Wheatland Salem Church";
      } else if ($uriKey == "event") {
        getContent("event","display:detail","find:".$_GET['slug'],"show:__title__ | ");
        echo "Wheatland Salem Church";
      }
    } else {
      echo "Wheatland Salem Church";
  }
?>
</title>

I designed the site, integrated wordpress, and included a ‘progress’ meter on the frontpage that we could dynamically update during our giving Sundays.  The site (as you can see) does not get updated as much as we’d like, mainly because the updates depend on missionaries who are in remote locations, much of the time without consistent internet access.

Another iteration of this site is planned for Christmas 2011 focused on testimonials of those who have received the donated funds and more updates from missionaries – though due to budgetary concerns, the status of this year’s RC campaign is not yet known.

Visit reconnectchristmas.com.

With our small team, we planned, designed, and produced “Wheatland Life” in-house. On the earlier versions, I was responsible for the design, layout, and printing, but later inherited the project manager role when our staffing situation changed.

We distribute this publication by mail, but also use issuu.com to provide our congregation with an interactive online version they can read directly on the web. This has been a very successful change in the way we communicate with the younger, more tech savvy members at the church.

I now manage the production of the publication from planning to printing, working with and coordinating a group of volunteer writers and staff members.

A list of Wheatland Life editions can be found on wheatlandsalem.org/wheatland-life.

I was responsible for communicating our needs to Fishhook, working with them on the details of the design and functionality, and content-population after the site was complete.

My ongoing job responsibilities included updates as requested by the staff and ministry teams, designing site graphics and other media, and aided in assessing current and future needs based on user input and staff requests.

After the launch of the site and a new online communication plan, we saw a 35% increase in unique visits.

wheatlandsalem.org