- Web Technology Undergraduates

warbarnacleΑσφάλεια

5 Νοε 2013 (πριν από 4 χρόνια και 3 μέρες)

84 εμφανίσεις

Teaching a New Web User Interface
Design Course to Computer Science
-

Web Technology Undergraduates


Leong Lee, Ph.D.

Assistant Professor, Dept. of Computer Science

Austin
Peay

State University, Tennessee, USA

Introduction


Background


APSU Computer Science


Motivation


“The End in Mind”


Course Design


Outcome


Challenges

2

Background


APSU Computer Science


The Department of Computer Science & IT offers a
Bachelor of Science degree with a major in Computer
Science and Information Systems (CS&IS)


Four areas of study or concentrations:


Computer Science


Information Systems Concentration


Internet and Web Technology


Database Administration


There are currently about 400 CS&IS majors


Around 30 to 40 graduates each year

3

Background


APSU Computer Science


Four minors:


Computer Science


Computer Networking


Mobile Software Technology


Web Technology


To graduate, a CS&IS major student needs to choose/satisfy


a concentration


a minor (or second concentration)


After graduation, most CS&IS graduates would seek
employment


4

Motivation
-

Questions


Two computer science (
Internet and Web Technology
concentration
) graduate A & B, will graduate in May next year
(not 1965)


Both can write good programs, same GPA


A’s user interfaces are pleasant, professional, and follow basic
design principles; A is also experienced in the latest web
interface programming tools


B’s user interfaces are ugly, something is just not right; B has
no web interface design / programming experience


If you are an employer looking for a software developer (only
one), which one will you employ (in today’s economy with a
tight budget)? Why?

5

Motivation


CSCI 4940 Internship in Info. Technology


Database Administration and
Internet and Web Technology
concentration students are given internship opportunities


Potential employers (who have taken in our interns)
expressed interests in having students with more interface
design skills (
nicer
websites?)


Technology trend: HTML 5


HTML 5 is just the markup


Use CSS to create the visual look and feel


Separate content from presentation (keep 99% of the design in CSS)


Result? Let’s design a Web User Interface Design Course



6

Motivation


CSCI 4940 Internship in Info. Technology


Database Administration and
Internet and Web Technology
concentration students are given internship opportunities


Potential employers (who took our interns) expressed
interests in having students with more interface design skills
(
nicer
websites?)


Technology trend: HTML 5


HTML 5 is just the markup


Use CSS to create the visual look and feel


Separate content from presentation (keep 99% of the design in CSS)


Result? Let’s design a Web User Interface Design Course



7

I am not a born programmer / designer
:P

I am not good at Math (born?) :P


Basic web design principles are easy (1 course),
and they can be incorporated into programming
codes (it will be fun)


CS students can be trained in
basic

design skills,

like they can be trained in programming skills


Examples?

8

Functional site following 4 basic design principles
(AmphibAnat.org, 2007 to 2010)


NSF funded
($1,116K)


Web interface design
:

(different design templates)


Client
-
side programming:

JavaScript, CSS, html


Server
-
side programming:
C#.net


Relational database
design/admin:

Microsoft
SQL Server


Server setup/admin:
Microsoft
IIS web server
and
Microsoft
Windows server

9

“The End in Mind”

10

“The End in Mind”


Upon completion of this course students should be able to


demonstrate the understanding of
web site planning
by producing a
real
-
life web application design and development project (static site)


… others


A “good” web design


aesthetically appealing with engaging presentation layouts and
attractive graphics


It fits nicely with our existing courses


CSCI 3300 Introduction to Web Development (client side)


CSCI 3350
Web User Interface Design

(aesthetics)


CSCI 4000 Advanced Web Development (server side)


… others, database, server etc




11

Course Design
-

Teaching Methodology

12

Design Principles



web design



space design

Technical



programming



tools


Web Site Planning



project



process

Students

Course Design


Design Principles

13

Web Site Planning



project



process

Students


4 basic web design principles


alignment, proximity, contrast and
repetition


Assignment 1
-

ideation sketchbook


Visual space design principles


scale, stability, dynamics, contrast,
asymmetric


Assignment 2
-

ideation sketchbook


Textbooks (1 & 2)


The Principles of Beautiful Web Design,
2nd Edition, by Jason
Beaird


The Non
-
Designer's Web Book, 3rd
Edition, by Robin Williams & John
Tollett


Design

Principles

Course Design


Technical

14

Students


Students should have programming
background (C++ and/or Java)


CSCI 3300 Introduction to Web
Development (client side)


HTML & CSS are reviewed


Textbooks (3 & 4)


Adobe Dreamweaver CS5 Classroom in

a Book, Adobe Press


Adobe Fireworks CS5 Classroom in a Book,
Adobe Press


Assignment 4


Dreamweaver website


Assignment 5


Fireworks site mock
-
up


Design

Principles

Technical

Course Design


Website Planning

15

Students


To develop a real
-
world web user
interface mock
-
up/prototype


A individual project

1.
Content report, client requests, visual
research, 4 sketches, color scheme

2.
Fireworks (
png
) mock
-
up file

3.
Sliced Fireworks (
png
) file, working
static website (html,
css
, images) with
content

4.
Presentation, website portfolio
(screen captures)


Assignment 3


visual research


Term Test

theories

Design

Principles

Technical

Website

Planning

Outcome


through the project

16

No

Website Title

Internal Client

1

Taskforce

Doug Catellier,

GIS Analyst

2

apdatasolutions.org

Doug Catellier,

GIS Analyst

3

2
nd

Order Differential Equations

Dr. Samuel Jator,
Professor
Mathematics

4

J Computing

Dr. Samuel Jator,
Professor
Mathematics

5

Hydraulic Geometry

Dr. Gregory Ridenour,
Professor
Geography

6

Pothole Management Website

Mike Wilson,

GIS Manager

Outcome


through the project


Basic web design principles emphasizing alignment, proximity,
contrast and repetition


Web design topics incorporating layout, color, texture,
typography and imagery


User interface design principles for web pages


Client side programming


Web site planning


Process of designing and developing user interface mock
-
ups/prototypes



17

Challenges


Good design work requires time and effort


e.g. Assignment 1 takes around 15 hours for some of the students


CS students are good programmers, but they are not used to
visual design work (initially
, will need
to overcome the hurdle)


Professional web design software is expensive


The course is now compulsory for CS&IS Internet and Web
Technology concentration students


Class will become bigger for the next run of the course


Extremely good design
vs

extremely bad design => grading?




18

::: Thank You :::



Leong Lee, Ph.D.

Assistant Professor, Dept. of Computer Science

Austin
Peay

State University, Tennessee, USA