GRESB Website

Project Details:

gresb.com
GRESB was in need of a new marketing website redesign. I began the process by putting together a rough draft of a site by customizing a build of Drupal. After going through a series of edits, I also worked on adding in JavaScript functionality for carousels and collapse/expand panels. The new site was launched at the beginning of this month.

Programs Used:

  • Drupal (CMS)
  • JavaScript
  • Photoshop
  • Illustrator

GRESB Website

William Coyle Portfolio Website

Project Details:

wtcoyle.com
I created the logo and manipulated William Coyle’s photographs for different sections of the website. After completing the website with Dreamweaver, I later reworked the entire site with WordPress so the client could make updates.

Programs & Technology Used:

  • jQuery
  • JavaScript
  • CSS & HTML
  • PHP
  • Photoshop
  • Illustrator
  • WordPress (CMS)

wtcoyle_1-website

wtcoyle_2-website

USGBC STUDIO Website

Project Details:

studio.usgbc.org
This was a collaboration with one of the designers on my team. I worked on developing the user experience and framework. The other designer worked on fine-tuning and editing the overall look.  I also worked on customizing a WordPress theme so that our non-coder team members would be able to make updates to the website.

Programs & Technology Used:

  • jQuery
  • JavaScript
  • CSS & HTML
  • PHP
  • Photoshop
  • WordPress

Studio USGBC

Studio USGBC

Center for Green Schools Website

Project Details:

centerforgreenschools.org
The Center for Green Schools website underwent an complete redesign. After the content was finalized, I worked on creating the overall new design and layout for the website. I created icons for navigation and to break up text-heavy pages. I manipulated photos and compiled the new site CSS.

Programs Used:

  • Photoshop
  • Illustrator
  • Drupal (CMS)

Center for Green Schools Website

Marketo Landing Pages

Project Details:

USGBC uses Marketo to collect user submitted information for targeted marketing. Although Marketo makes digital marketing easier, the platform isn’t mobile-friendly. The drag-and-drop designer makes it easier for non-coders to create landing pages, however it makes it difficult to create responsive and easily adjusted pages.

I worked on editing the CSS and found a workaround for targeting the long and obscure classes that Marketo’s designer automatically generates. I then created templates that our creative team could use to make responsive and mobile-friendly landing pages.

Programs Used:

  • Marketo

Marketo Landing Page

Marketo Landing Page

marketo-landing-page-1-mobile

Marketo Landing Page

Megan Coyle: Collage Artist Portfolio

Project Details:

mcoyle.com
I created this website for my studio collage work. I designed the logo myself and took pictures of the artwork. Aside from designing the site, I have managed and maintained it since 2007.

Programs & Technology Used:

  • jQuery
  • JavaScript
  • CSS & HTML
  • PHP
  • Photoshop
  • Illustrator
  • InDesign
  • WordPress (CMS)

Megan Coyle Collage Artist Website

JavaScript: What’s the point of looping?

In JavaScript, looping is a handy way to do something repeatedly. For example, if you wanted to print out a list of results in a consistent way, or add styles to objects that fit certain parameters.

Here are a few of the ways to do looping:

for statement

A for statement is usually used when you need to increment a value within an expression.

for (var i = 0; i > 10; i++) {
console.log(i);
}

do…while statement

A do…while statement repeats until a specific condition evaluates to false.

var i = 10;
do {
i++;
console.log(i);
} while (i < 40);

while statement

A while statement executes as long as a specified condition evaluates to true.

var i = 2;
while (i < 5) {
i++;
console.log(i);
}

break statement

The break statement is used to terminate a loop.

for (var i = 0; i < a.length; i++) {
if (a[i] == 5) {
break;
}
}

Note: This post is written in conjunction with the coding cheat sheets I’m developing.

JavaScript: What are Closures?

So maybe you’ve heard of JavaScript closures before but you’re wondering, what exactly are they? Well, when it comes to JavaScript, you can have variables that belong to a local (a variable declared within a specific function) or global scope (variables that are accessible from anywhere in the code). You can make variables private by using closures.

Take a look at the following example:

var countUp = (function () {
var count = 0;
return function () {return count += 1;}
})();

countUp();

Now, let’s break it down:

  • The variable countUp is assigned the value of a self-invoking function.
  • It sets the count to 0 and returns a value that adds 1 to the current count.
  • It has access to the count in the parent scope.
  • The variable count is protected by the scope of the anonymous function, and can only be changed using the countUp function.

Software Design Styles and the Cycle of Software Design

Recently I did some document diving to find out more about different styles of software design. When it comes to building software, I’m someone who is more familiar with getting things to work, and I haven’t focused too much attention on discussing my approaches. So in an effort to become more eloquent about the way I describe my work, I thought I’d share an overview on software design styles and the cycle of software design:

Service-oriented architecture (SOA): a style of software design where services are provided with application components through a communication protocol over a network. The elements of SOA include:

  1. Application frontend, service, service repository, service bus
  2. Contract, implementation, interface
  3. Business logic, data

A web service is an example of an SOA with a well-defined set of implementation choices.

Representational state transfer (RESTful): RESTful web services allow systems to access and manipulate web resources by using a predefined set of operations. RESTful includes the HTTP methods get, put, post, and delete. More information on what these mean include the following:

  • Get: retrieves a representation of the collection
  • Put: replaces the addressed item of a collection, or if it doesn’t exist, it creates it
  • Post: create a new entry in the collection
  • Delete: delete the item in a collection

Model-view-controller (MVC): a pattern for implementing user interfaces. It’s broken down into three components:

  • Model: directly manages the data and logic of the application
  • View: the output of the information, how the information is presented to the user
  • Controller: uses input from the user to make changes to the model or view

Software development life cycle (SDLC): a structured sequence of stages in developing a software product. These steps include: communication, requirement gathering, feasibility study, system analysis, software design, coding, testing, integration, implementation, operations & maintenance, and disposition.

EDGE Website

Project Details:

edge.gbci.org
EDGE started out as a simple site created on Drupal. I worked on styling the overall website as well as selecting banner images for different pages and creating icons to add more interest to text-heavy pages. I also added JavaScript functionality to make different sections more interactive.

Programs Used:

  • Photoshop
  • Illustrator
  • Drupal (CMS)

EDGE Website