Menu Close

ITGM357 Interactive Web Design

ITGM357

Key concepts of Web design are presented through a series of technical and design workshops. Students are introduced to the latest authoring and animation tools and learn how to apply their knowledge of the software to create dynamic and responsive Web designs. Prerequisite(s): ADBR 205 or GRDS 205 or ITGM 220.


Required Text(s):
The UX Sketchbook V2 (Coil Bound)
(http://www.lulu.com/spotlight/theuxsketchbook)

Recommended Text(s):
Head First HTML and CSS: A Learner's Guide to Creating

Professor David Edwin Meyers

Contact: 270-577-2715 (text)

dmeyers@scad.edu

Pre-quarter assignment

Preview the PDF Languages of The Web. Practice the techniques and code in the document and be ready to review on the first day of class.

Class 1: Thu, September 12, 2019

+ Discuss and Launch Assignment 1: Basic Mobile First Web Site
+ Introductions and class overview
+ Syllabis review
+ Assignment discussion
+ Register a domain name
+ Secure webhosting that has php and MySQL capabilities
+ Understand basic Web directory structuring (mirror server and local machine)
--- folder: img (images and graphics)
--- folder: css (css style sheets)
--- folder: js (javascript)
--- folder: inc (includes)
--- index.html (default homepage, or index.php)
+ Implement the design process of EMPATHIZE > DEFINE > IDEATE > PROTOTYPE > TEST (we are time restricted so will focus on the latter)
+ Sketching Workshop (handout)

Class 2: Tue, September 17, 2019

+ Understand file paths (links to images and other web pages... absolute versus relative)
+ Understand and implement CSS styling using existing html TAGS and custom IDs and CLASSES
+ Learn how to author basic HTML and CSS using html editor (Dreamweaver or other) Master 9 HTML tags:
- html
- head
- title
- body
- h1
- p
- br>
- img (image)
- a href (link)
+ CSS zero to sixty (styling tags, ids and classes)
** Assignment 1: In-Class coding and development

Class 3: Thu, September 19, 2019

+ Implement basic META tags for SEO (DESCRIPTION and KEY WORDS)
+ Understand basic image/graphics sizing, resolution and file preparation using Photoshop
+ Understand basic file transfering process (local machine to remote server) using FTP
+ Configure FTP using Dreamweacr or FTP program (Host, Username, password)
+ Implement a Javascript functionality
+ Implement basic dynamic PHP tags (date and simple variable)
+ Assignment 1: In-Class coding and development

Class 4: Tue, September 24, 2019

+ Assignment 1 checkpoint
+ Assignment 1: In-Class coding and development

Class 5: Thu, September 26, 2019

+ Presentation and Class Critique: Assignment 1 DUE

Class 6: Fri, September 27, 2019

+ Discuss and Launch Assignment 2: Dynamic (Mobile First) Database-Driver Web Site
+ Implement the Bootstrap framework into a project (Layouts, components, etc)
+ Set up basic mySQL database
+ Understand the creation and application of TABLES, FIELDS and basic FIELD TYPES
+ Understand how to BROWSE, INSERT and DELETE data records using MyPHP ADMIN web application

Class 7: Tue, October 01, 2019

+ Successfully CONNECT to a mySQL DATABASE using HTML and PHP
+ Successfully DISPLAY data from a mySQL DATABASE on a webpage

Class 8: Thu, October 03, 2019

+ Learn how to author intermediate and advanced PHP, HTML, CSS and JS using html editor (Dreamweaver or other)
+ Implement dymanic functionality using php (ex. day and picture title)
** Assignment 2: In-Class coding and development

Class 9: Tue, October 08, 2019

+ Create an HTML/PHP form to add database records
** Assignment 2: In-Class coding and development

Class 10: Thu, October 10, 2019

** Assignment 2: In-Class coding and development

Class 11: Tue, October 15, 2019

** Assignment 2: Checkpoint 1 (review and discuss progress and challenges)
** Assignment 2: In-Class coding and development

Class 12: Thu, October 17, 2019

+ Understand and implement a basic PHP VARIABLE
+ Pass a PHP VARIABLE value through a PHP url string, receive on target page (using GET)

Class 13: Tue, October 22, 2019

** Assignment 2: In-Class coding and development

Class 14: Thu, October 24, 2019

+ One-on-one coding sessions
+ Understand and implement a basic PHP IF/THEN STATEMENT
** Assignment 2: In-Class coding and development

Class 15: Tue, October 29, 2019

+ One-on-one coding sessions (cont)
** Assignment 2: In-Class coding and development

Class 16: Thu, October 31, 2019

** Assignment 2: Checkpoint 2 (review and discuss progress and challenges)
** Assignment 2: In-Class coding and development

Class 17: Tue, November 05, 2019

** Assignment 2: Peer feedback and user-testing
** Assignment 2: In-Class coding and development

Class 18: Thu, November 07, 2019

** Assignment 2: Final revisions (based on user-tests) ** Assignment 2: In-Class coding and development

Class 19: Tue, November 12, 2019

** Presentation and Class Critique: Assignment 2 DUE

Class 20: Thu, November 14, 2019

** Presentation and Class Critique: Assignment 2 DUE + Final review and recap


Assignment 1: Basic Mobile First Web Site

You must choose a museum or Non-Profit for your first Web assignment. It is required that you have a minimum of 5-7 pages that include all of the basics in web deveoplement:

  • Images
  • Links
  • Text content

We will cover these topics:

  • Design Thinking Process and Workflow
  • Fundamental web operations
  • Web site structure and file organization
  • The NINE TAGS that build wikipwedia (w QUIZ)
  • Styling content with CSS (and responsive design)
  • META tags for search engine optimization
  • Image compression and prep for web delivery
  • File transfer to/from a remote Web server
  • File pathing (relative vs absolute)
  • HTML vs PHP
  • How to implement a simple Javascript within your Web site
  • How to implement basic PHP withing your Web site

 


 

  • Phase 01: Secure Domain Name and Web Hosting (10%)
  • Phase 02: Concept and Sketches (20%)
  • Phase 03: Basic Research (10%)
  • Phase 04: Site Map and Wireframes (20%)
  • Phase 05: High-Fidelity Comps (10%) 
  • Phase 06: Final Coded Solution on Web Server (30%)

Phase 01: Secure Domain Name and Web Hosting (10%)

  • Use The UX Sketchbook to document everything. Thoughts, notes, sources, sketches, etc.

Phase 02: Concept and Sketches (10%)

  • Use The UX Sketchbook to document everything. Thoughts, notes, sources, sketches, etc.

Phase 03: Basic Research (10%)

  • Pick a minimum of 3 design and research methods from the UX Sketchbook list PLUS the ones posted here as part of your assignment (Sketches, Site Map, Wireframes, High-Fi Comps) and implement through the process

Phase 04: Site Map and Wireframes (20%)

  • Created in Figma, XD, ProtoIO, Principle or Sketch
  • Simple click-through prototype (no transitions)

Phase 05: High-Fidelity Comps (10%)

  • Created in Figma, XD, ProtoIO, Principle or Sketch
  • Simple click-through prototype (no transitions)

Phase 06: Final Coded Solution on Hosted Web Server (30%)

Must include:

  • HTML (hand coded, no frameworks)
  • CSS (Hand coded, include existing tags, ids and classes)
  • Basic PHP
  • Javascript implementation (minimum of 1 instance)
  • Minimum of 5 pages (no more  than 10)


Assignment 2: Dynamic (Mobile First) Database-Driver Web Site

Coding Demonstration Participation and Code Challenges

For project 2, you must choose a topic that deals with a "collection of data". This can involve any topic, but examples might be team sports, gaming reviews, an asset archive, recipes, music collection, etc, the possibilities are endless. The basic premise is that we will create a shell that will dynamically display content based on a users request. For example:

Image a team sports site that includes a roster. A user wants to see an indidual players profile page. They click the players name from a team roster list, then a "profile" page displays his (her) picture, stats, history, etc. This profile page is a shell that will work for any player. Using a database allows us to create a single page that will display an unlimited amount of players "dynamically". This is a much better solution than having thousands (if not millions, i.e. Wikipedia) of individual profile pages. This is how the vast majority of web sites are constructed today.

It is required that you create a dynamically driven site (with unlimited page possibility) that include all of the following in web deveoplement:

  • Images/links/text content
  • MySQL database
  • PHP/HTML authored pages

We will cover these topics:

  • PHP fundamentals
    • variables
    • if/then statements
  • MySQL Databases
    • Tables
    • Fields
    • Field Types (primary keys, ints, varchars)
    • Rows (records)
  • Database connections
  • Database Queries (SEARCH)
  • PhpMyAdmin (Web databae management tool)

 


 

  • Phase 01: Database Discussion and Concept Guidance (5%)
  • Phase 02: Concept and Sketches (10%)
  • Phase 03: Basic Research (5%)
  • Phase 04: Database Set-Up (30%)
  • Phase 05: Site Map and Wireframes (10%)
  • Phase 06: High-Fidelity Comps (10%) 
  • Phase 07: Final Coded Solution on Web Server (30%)

 


 

Phase 01: Database Discussion and Concept Guidance

  • I will work with each student individually to assist in their database application

Phase 02: Concept and Sketches (10%)

  • Use The UX Sketchbook to document everything. Thoughts, notes, sources, sketches, etc.
  • Outline database, number of tables needed, fields and field types

Phase 03: Basic Research (10%)

  • Pick a minimum of 3 design and research methods from the UX Sketchbook list PLUS the ones posted here as part of your assignment (Sketches, Site Map, Wireframes, High-Fi Comps) and implement through the process

Phase 04: Database Set-Up (20%)

  • Set up tables, fields and field types
  • Set-Up successful connection scripts
  • Insert data to populate the database vis PhpMyAdmin

Phase 05: Site Map and Wireframes (20%)

  • Created in Figma, XD, ProtoIO, Principle or Sketch
  • Simple click-through prototype (no transitions)

Phase 06: High-Fidelity Comps (10%)

  • Created in Figma, XD, ProtoIO, Principle or Sketch
  • Simple click-through prototype (no transitions)

Phase 07: Final Coded Solution on Hosted Web Server (30%)

Must include:

  • HTML & PHP  (using Bootstrap framework)
  • Google Font (minimum of 1)
  • FontAwesome (Optional)
  • CSS (include existing tags, ids and classes)
  • Intermediate PHP
  • MySQL Database implementation
  • Minimum of 5 pages (with capabilty for unlimited pages based on dynamic shell)