Web Design with Partnership Erie

piegazeInternet and Web Development

Dec 7, 2013 (3 years and 7 months ago)

66 views


Page
1














Web Design with Partnership Erie


April 30, 2012


Spring 2012 Semester

MIS 495


Internship Paper


Dr. Ido Millet

Lindsey Houser

















Page
2



Table of
Contents

Preface ............................................................................................................... 3

Introduction ................................................................................................................
........
........... 4

Background Information ......................................................................................................
....... 4

Discussion...............................................................................................
.......................................... 4

Project 1

Penn State K
-
12 Engineering Outreach...................................................................... 4

Project 2

Passavant Hospital Foundation (PHF)…..........................................
............................ 9

Lessons Learned .............................................................................................................
................ 12


Page
3


Preface


Organization
:
Partnership Erie

Location
:

Burke Center,

Penn State Erie, the B
ehrend College

-

4701 College Drive,
Erie, PA 16563

Supervisor
:
Dr. Kathleen Noce, Senior Lecturer of Management Information
Systems in the Sam and Irene Black School of Business at Penn State Erie

Phone
: (
814)
898
-
6508

Dates Began
:
Jan
uary

9
, 201
2

Date Ending
:
May
1
, 201
2


Page
4


Introduction


Background Information

This
s
pring, I did my required internship with Partnership Erie
, an outreach extension of
Penn State Erie, The Behrend College
.
It is located in the Jack Burke Research and Educational
Development Center (Burke Center) at Penn State Erie, The Behrend College campus.
Partnership Erie designs

and implement
s

websites for
local and international
non
-
profit
organizations to improve the
ir accessibility
,

outreach
, and
increase awareness of the
organization
. They provide free web services, web hosting, web marketing, and content
management services. The organization has worked with over 100 nonprofit organizations.
This has allowed non
-
profit’s to strengthen their web presence with a fresh look and new ideas.
Templates are created in CSS, a style sheet language which defines the look and formatting of a
website. This separation improves accessibility, and creates a separation between t
he model
and view layers. It is the most efficient way to create websites and allows for CSS re
-
use. The
content management system currently used is Drupal. Drupal makes content updates as simple
as editing a word document.
It
requires very minimal trai
ning and no advanced knowledg
e of
website design. During the course of my internship I have worked on and completed websites
for two organizations; the Penn State K
-
12 Engineering Outreach Center and the Passavant
Hospital Foundation (PHF).


Discussion


Pr
oject 1


Penn State K
-
12 Engineering Outreach Center


Organization Information


Address: School of Engineering, REDC 154



5101 Jordan Road


Erie, PA 16563


Business: Penn State Erie, The Behrend College


Company Contact: Melanie Ford



Page
5


The
first project I worked on was for the Penn State K
-
12 Engineering Outreach Center.
The outreach center presents engineering related activities that are fun

and
educational, and
encourage kids to get involved

in engineering
. My client for this project was

Melanie F
ord
who
is the

head of the Engineering K
-
12 Outreach Center. I was honored to work with her. She is a
recipient of

the Penn State Women in the Sciences and Engineering (WISE) Institute Faculty
Recognition Award for her work in helping women and

girls excel in engineering and the
sciences.

She leads the college’s Women in Engineering Day program, an annual event that
brings 50 high school girls to campus for a day of interactive, hands
-
on activities.


I met with my
client numerous times throughou
t the semester to make sure
that
I was on the right track
with
my webpage design
and
to better understand the
Engineering K
-
12 Outreach Information.
Ms.
Ford

had a lot of information in the form of brochures and pamphlets

that we reviewed
. My
job was to
put this information on the web by creating a website that would be linked to Penn
State Erie’s School of Engineering Research & Outreach page. I met with
my client many

times
throughout the semester. I created

my own template according to World Wide Web

Consortium

guidelines.
The World Wide Web Consortium (W3C) is an international standards
organization for the World Wide Web. W3C was founded by Tim Berners
-
Lee, and its purpose
is developing protocols and guidelines that ensure long
-
term growth of the
Web.

I met with my client Melanie Ford numerous times throughout the semester

and

created my own template according to W3C guidelines. Because the site will be hosted on a
PSU domain, I
verified that
it met the criteria of the PSU marketing department.

I met with Jen
Duda
who is
the
E
-
Communications Coordinator at Penn State Erie, The Behrend College

at the
Glenhill Farmhouse

and made sure all fonts, colors, and the general layout
of the site
matched
the Behrend website
.
First
,

I created the
design

on
Dreamweaver which is a proprietary web
development application. I chose to create the basic design
of the website
on Dreamweaver
because I had previous experience using

it in my Intro to Web Design class
.

My design required
two CSS files, menu_style.css a
nd style.css. The menu_style.css generates a drop down menu
on the pages using JavaScript. The syle.css is for the rest of the design. Second, I reconstructed
these CSS files on Visual Studio 2010. I made two CSS files under a folder, App_Themes. This
was simple. I was able to just copy and paste the CSS.


Page
6



Snippet of

Code for menu_style.css

.bg

{


background
:
url('../images/button4.gif')
;

}

.menu

{


padding
:
0

0

0

32px
;


margin
:
0
;


list
-
style
:
none
;


height
:
40px
;


background
:
#fff

url('../images/button1a.gif')

repeat
-
x
;


position
:
relative
;


font
-
family
:
Arial

Black,

Gadget,

sans
-
serif,

verdana,

sans
-
serif
;

}

.menu

li.top

{
display
:
block
;
float
:
left
;
position
:
relative
;}


.menu

li

a.top_link

{
display
:
block
;
float
:
left
;
height
:
40px
;
line
-
height
:
33px
;
color
:
#ffffff
;
text
-
decoration
:
none
;
font
-
size
:
11px
;
font
-
weight
:
bold
;
padding
:
0

0

0

12px
;
cursor
:
pointer
;}

.menu

li

a.top_link

span

{
float
:
left
;
font
-
weight
:
bold
;
display
:
block
;
padding
:
0

24px

0

12px
;
height
:
40px
;}

.menu

li

a.top_link

span.down

{
float
:
left
;
display
:
block
;
padding
:
0

24px

0

12px
;
height
:
40px
;
background
:
url(images/down.gif)

no
-
repeat

right

top
;}

.menu

li

a.top_link:hover

{


color
:
#000066
;


background
:
url('../images/button4.gif')

no
-
repeat
;

}

.menu

li

a.top_link:hover

span

{


background
:
url('../images/banner.jpg')

no
-
repeat

right

top
;

}

.menu

li

a.top_link:hover

span.down

{


background
:
url('../images/button4a.gif')

no
-
repeat

right

top
;

}


I built the website on Visual Studio 2010 using ASP.NET. The programming language
that I used was C#. The reason why I used ASP.NET is because it allows programmers to build
dynamic web sites, web applications, and web services. Also, I had experience
c
onnecting to a
SQL Server Database from previous MIS classes
. For the website I needed to store user data in
a database, and ASP.NET gave me this capability. I was able to create two pages, one with a
school registration form and another with a student r
egistration form which allowed user
information from the forms to be stored in a SQL Server Database.


The school registration has a drop down for School Name, text boxes for School District,
Address, County, Contact Person (Person who should receive info
rmation regarding Women In
Engineering), Contact Phone Number, Contact E
-
mail, Group Accompanied By, check boxes

Page
7


allowing the user to check Math Teacher, Science Teacher, Counselor, Parent, and Other, text
boxes for Group Contact Phone, Group Contact E
-
mai
l, and radio buttons, yes or no, for
Internet Access (so the faculty member can choose if they would like internet access for the
day). I made a submit button so the faculty member can easily submit the form. I also added a
clear button that the faculty
member can press if they make a mistake and want to reset the
form.

I made a label and named it lblError. If the school is already registered, the system
outputs a message “This school has already been registered!” in red letters or else it outputs a
me
ssage “You have registered successfully!”. I also made a label, lblNewID, which outputs a
unique ID for the school. It shows, “Your school Identification number: [school ID number]” in
green letters. I added two snippets of code from School_Registration
.aspx.cs. This contains the
C# code.


Two
Snippet
s

of Code
from the School_Registration.aspx.cs


protected

void

SqlDataSource1_Inserted(
object

sender,
SqlDataSourceStatusEventArgs

e)


{


// Response.Write("Inserted");



lblNewID.Text =
Convert
.ToString(e.Command.Parameters[
"@New_ID"
].Value);


}


try


{


objConnection.Open();


objDataReader = objCommand.ExecuteReader();



if

(objDataReader.HasRows)


{


lblError.ForeColor = System.Drawing.
Color
.Red;


lblError.Text =
"This school has already been registered!"
;


lblRegister.Visible =
false
;


lblNewID.Visible =
false
;


}


else


{



lblError.ForeColor = System.Drawing.
Color
.Green;


lblError.Text =
"You have registered successfully!"
;


lblRegister.Visible =
true
;


lblNewID.Visible =
true
;



I created a student registration for
m that allows a faculty member to register a student
once he/she clicks the Submit Button. I also created a Reset button in case the user makes a

Page
8


mistake and wants to reset the form. After the form is completed, the faculty member should
click the Submit

button, and the system adds the newly added student into the SQL database
and outputs a message, “Your ID for this event is [student ID number].” Also, in case of a
mistake or change, the faculty member can edit who has registered and their information
b
ased on the school using a GridView located on the Admin page.
The student

registration
form has textbox fields for First Name, Last Name, Middle Initial, PSU ID (if previously assigned),
a drop down for school name, Address, City, State, Zip, E
-
mail, Birth Date, a drop down for
Grade, radio buttons for Picture Release, radio bu
ttons for Early Departure, and a textbox for
Departure Time. I made a submit button so the faculty member can easily submit the form,
and I also added a clear button so that the faculty member can press Clear if they make a
mistake and want to reset the
form. To illustrate how btnClear_Click works, below is a snippet
of code from the Student Registration form.

Snippet of Code for Student Registration Form


protected

void

btnClear_Click(
object

sender,
EventArgs

e)


{


txtAddress.Text =
""
;



txtBirth.Text =
""
;


txtCity.Text =
""
;


txtDeparture.Text =
""
;


txtEmail.Text =
""
;


txtFirst.Text =
""
;


txtID.Text =
""
;


txtLast.Text =
""
;


txtMiddle.Text =
""
;


txtState.Text =
""
;


txtZip.Text =
""
;


RadioButtonList1.SelectedIndex =
-
1;


RadioButtonList2.SelectedIndex =
-
1;


lblNewID.Visible =
false
;


}


In addition to the database, I created a web form that allows a user to send a message
to the head
of the K
-
12 Engineering Outreach Center through the website. It allows one to
contact and interact with Mrs. Ford even if they do not have an e
-
mail address. If the user
would like to request an event they can enter their name and phone number in the Fie
ld that
says Text and click Send. I also created a Clear button in case the user makes a mistake and
wants to clear the form before sending.


Page
9


For this project
, Melanie Ford explained that she has two PDF’s that students often take
home. These are the Inte
rnet Consent and Photography Release Forms. Sometimes, students
and their parents have very sloppy handwriting, and she spends a considerable amount of time
trying to decipher what is written on the forms to be input into the system. This is inefficient,

and sometimes she is unable to decipher what is written on the forms or typos are made. I
created editable PDF Internet Consent and Photography release forms so that users can type in
their information and print it before signing and returning the form.

This makes it much easier
for Mrs. Ford to read the information and saves her time. I created these on PDFescape which
is a free PDF editor & free PDF form filler. I registered for free, and it allowed me to save the
editable PDF forms and edit them in
the future, if needed. I also created a Google calendar for
the organization so that organization events can be recorded. Google Calendar is a free online
calendar that makes it easy to keep track of important events. I created a page for the calendar
o
n the site.

Overall, I learned a lot from making this site. I gained additional knowledge and
experience in creating databases, and
I improved my web design skills. I learned the
advantages of using PDF
s

(
Portable Document Format
s
)
. This was my first time making a
contact form and doing the programming for it. If I need to make a contact form in the future
with Java or C#, I will be able to do so pretty quickly.
Through this project I gained hands on
experience with CSS, HTML, Ja
vaScript, C#, Vi
sual Studio 2010, and ASP.NET.


Project
2



Passavant Hospital Foundation (PHF)


Organization Information


Address:
9100 Babcock Boulevard, Pittsburgh PA 15237


Business:
The Passavant Hospital Foundation


Company Contact:
Janine
Sidoruk, Marketing & Communications Coordinator



My second project was for the Passavant Hospital Foundation (PHF).
The PHF was
incorporated in 1981 for the sole purpose of raising funds to benefit the Passavant family,
formerly named North Hills
Passavant Hospital. The foundation was an affiliate of the

Page
10


Passavant Hospital from 1980 to 1997. In 1997, Passavant Hospital merged with the University
of Pittsburgh Medical System (UPMC) to become UPMC Passavant. The foundation has
remained a separate
corporate entity yet activities and fundraisers are devoted exclusively to
benefit UPMC Passavant and the interests of the foundation. The foundation

supports UPMC
Passavant by advancing health and wellness through education, outreach, and grantmaking.
R
ecently they have funded many

hospital projects.
They contributed $65 million towards the
construction of a seven
-
floor 188,000 square foot Pavillion Tower on Passavant’s 134
-
acre
campus in McCandless Township which is designed to advance tertiary service
s and improve
the access and flow for patients and families throughout the building. In addition, the
Foundation contributed $16.5 million for a conference center and amphitheatre attached to a
senior living village, Cumberland Woods.
My job was to work
on the PHF site. I had to
complete the initial phase of development and provide training to Janine Sidoruk, the
Marketing & Communications Coordinator.

As shown in Figure 1, I created a footer for the site which includes a Site Map and
Search Bar. The Si
te Map includes a list of pages accessible to users on the website. It is
organized in a hierarchical structure. It helps visitors and search engine bots find pages on the
site. To create the Site Map, I used a Drupal module designed specifically for th
is function. The
only difficulty I had was finding the right module to use. In the center of the page is the address
of the foundation and to the right is the Search Bar. Once again, the only trouble I had
implementing the Search Bar was finding the corr
ect Drupal module to use. After I figured out
which module to use, it was just a few simple steps.


Figure 1. Footer


I also had to add and update pages for the site. The foundation hired a professional
photographer to take pictures of the hospitals.

I made edits to the rotating carousel of pictures
on the homepage so that these pictures were visible. I resized the dimensions of each picture
from the professional photographer to be 335 x 225 in size. I used Filezilla to FTP them, and I

Page
11


modified the

home page by making changes to page.tpl.php, a PHP file, that controls the design
and content home page.

Sometimes I would receive requests from my client to make forms for events. Examples
of this would be the Autism Through the Lifespan form and the
Volunteer form. The PHF
hosted an event where speakers talked about the latest advances in autism research, and tools
to support behavior. My client needed a form that included First Name, Last Name, Mailing
Address, E
-
mail, and Phone Number. She also w
anted an option for the user to choose to
purchase a box lunch. This was important because their staff needed to know how much food
to prepare for the day. I made this form under Content > WebForm on Drupal. As shown in
Figure 2, Drupal allows you to ea
sily pick field names, types, specify whether you want the field
to be mandatory, and perform operations such as edit, clone, and delete.


Figure 2. Autism Through The Lifespan Conference Registration Form


I specified under E
-
Mails that the information

should be sent to

Alice M. Burke, the
Senior Administrative Assistant of the foundation
.
The volunteer form included textfields for
First Name, Last Name, Address, City, State, Zip, and Phone Number. I made an E
-
mail field of
email type and a Special Sk
ills field of a text area type. These
last two
fields were

not

mandatory.


Page
12


At the request of my client,
I created a step
-
by
-
step
users
guide for editing the website.
I met with my client twice in person, Penn State Behrend and Wexford, PA where I taught h
er
how to add/update pages,
and
add new PDF’s to the home page. I made multiple pages with
her so

that

I could show her how to change the formatting and make the text look appealing.

My client also wanted a YouTube channel for the foundation. I uploaded
to YouTube
many videos that were recorded from a videographer for a speaker series. Some of these
videos were greater than an hour in length, and I had to upload them from a disk. So far, they
have several hundreds of views. I also added clickable YouTu
be icons next to their Facebook
and Twitter icons on the homepage and child pages as shown in Figure 3.


Figure 3. YouTube icons.


Through this project I gained hands on experience with CSS, HTML, JavaScript, PHP,
Filezilla
, and Drupal. I also learned a lot about the importance of
establishing positive client
relationships to facilitate repeat business and referrals
. The PHF website is currently live and
can be viewed at www.passavanthospitalfoundation.com.


Lessons Learne
d


Page
13


Learning how to use Drupal is a positive skill I gleaned from this internship. Once I
discovered how to use Drupal, my job was much easier. Drupal offers modules for functionality
such as Site Maps and Search Bars so you don’t have to code them from sc
ratch. I learned that
Google calendar is easy to use for recording organizational events and PDFescape is a simple
way to create editable forms. I also learned how to communicate more effectively. For my
second project, I had many conference calls becau
se my client was located in Pittsburgh, PA. I
gained practice listening to and responding to the client on the phone. I applied concepts
learned throughout my college career to real life web design. I used skills
from all of my

business, writing, visual

arts, programming, and MIS classes. I learned additional skills such as
how to use a content management system. Overall, working with both of my clients was a very
fulfilling experience.