Website Design
& Implementation

All students in this class are expected to have familiarity with basic HTML and CSS. I will not be reviewing basic concepts in this class, so if it’s been a while since you’ve taken a class that covers it (IGME-110 for NMID students, NMDE-103 for NMD students), you may need to get yourself up to speed before we begin. I recommend either of these tutorials:

• Mozilla Developers Network (MDN) Getting Started With the Web (specifically the Installing Basic Software, Dealing with files, HTML Basics, and CSS Basics sections)
• Lynda.com HTML Essential Training, sections 1-7 (requires RIT login

On the Saturday after classes begin (September 1), I will offer an optional HTML/CSS “bootcamp” that you are welcome to attend if you’d like some extra help getting back up to speed on the concepts. Details will be provided in the class Slack.

On Tuesday, I will review the syllabus, goals, and requirements for class and discuss the tools and technologies we’ll be using for communication, collaboration, and content creation. On Thursday, we’ll talk about how web servers process the requests they receive from browsers, and how you can use .htaccess files to modify that behavior.

Tuesday Readings

• Course Syllabus
• Slack Guides: Getting Started for New Users
• Firefox Developer Tools
• Chrome DevTools Overview
• Emmet Documentation

Tuesday Exercise: Tools Setup

In this exercise, you’ll set up your GitHub account, set up an account on the class Slack, configure either Visual Studio Code or Brackets for use in class, and post a basic page to the RIT web server.

Thursday Readings

• MDN: What is a web server?
• .htaccess-Guide
• Comprehensive guide to .htaccess

Thursday Exercise: .htaccess

In today’s exercise, you’ll create an .htaccess file for your igme230 directory on either people.rit.edu or cad.rit.edu, and use it to redirect to a custom 404 error page.

This week we’ll talk about version control using Git, the web service GitHub, and publishing websites on GitHub using the GitHub Pages functionality. You will need to have set up your GitHub account, sent us your username, and accepted our invitation to the 230-students team to be able to complete the in-class exercise.

Tuesday Readings

• Git for Designers (Daniel Fosco)
• Practical Series: Using Git and GitHub and Using Brackets to Manage Them - Chapters 1-4

Tuesday Exercise: Git and GitHub

In this exercise, you’ll work with two different GitHub repositories to learn how to submit a pull request to a repository controlled by someone else, and how to collaboratively edit a file with other users. You'll also create a repository to use for this semester's coursework.

Thursday Exercise: GitHub Pages

In this exercise you'll publish a personal page to GitHub, and set up a repository to use for your class materials.

This week we’ll take a deeper dive into aspects of HTML and CSS that aren’t covered in the prereq classes, including semantic HTML, complex CSS selectors, and CSS positioning and layout.

Tuesday Readings

• Semantic HTML (No. 12 of HTML & CSS is Hard)
• Separate Content and Presentation (Universal Usability)

Tuesday Exercise: Advanced HTML Markup

In Tuesday's exercise, you'll be marking up a text document to turn it into a semantically meaningful HTML 5 document.

Thursday Readings

• MDN: Introduction to CSS (read Selectors, CSS values and units, Cascade and inheritance, and The box model)
• CSS Layout (read Introduction, Floats, Positioning, and Practical Positioning examples)

Resources Referenced in Lecture

• CSS Font-Size: em vs. px vs. pt vs. percent (Kyle Schaeffer)
• CSS Box Sizing (W3 Schools)
• Child and Sibling Selectors (CSS Tricks)
• A Whole Bunch of Amazing Stuff Pseudo Elements Can Do (CSS Tricks) (an example of how you can hack webpage layout with complex CSS if you know what you're doing!)

Thursday Exercise: Advanced CSS

During class, I'll work through how I used CSS to mark up the example page from Tuesday. You'll follow along, and then post your own version.

Project 1 (Landing Page): Due Friday, 9/14

When we talk about “web design,” we’re actually talking about a much wider range of concepts than graphic design–we’re also talking about interaction design, usability, and accessibility. This week we’ll talk about the range of design issues related to the web. On Tuesday we’ll focus on the design process as a whole, and on Thursday we'll talk more specifically about applying design systems and patterns in the context of your next project.

Tuesday Readings

• The Elements of User Experience
• Making Material Design (6 min video)
• Designing Systems (chapter 1 of Atomic Design)

Tuesday Homework: Design Document (Strategy & Scope)

In this week's exercise, you’ll begin the design document for your personal portfolio site.

Thursday Readings

• Design Jargon Explained: Web Design Patterns (Creative Bloq)

Thursday Homework: Design Document (Structure, Skeleton, and Surface)

In this week's exercise, you’ll continue working on the design document for your personal portfolio site.

Resource Links

• Flow Chart Tools
  • Draw.io - Free, web-based flowcharting tool
  • Google Drawings and Microsoft Word and PowerPoint have flowcharting symbols available
  • Microsoft Visio is available on lab computers
  • Many of the wireframing tools linked below also have flowcharting stencils & tools
• Wireframing Tools
  • Downloadable paper templates: Sneakpeekit, Smashing Magazine List
  • UI Stencils (Analog) (Amazon has other options)
  • Yahoo UI Stencil Kit - Available in multiple formats
  • Cacoo - Web-based. Free for ≤6 diagrams, I’ve requested an edu license for the class
  • Balsamiq - Desktop for Mac and Windows. Free for 30 days.
• Prototyping and Comp/Mockup Tools
  • Style Tiles Approach - Alternative to graphics-heavy comps
  • UXPin Design Platform
  • Axure - Available on IGM lab computers, free license for students
  • Invision - Free web-based tool
  • Design the Web: Layer Comps - Lynda.com tutorial on using Photoshop for comps
• Visual Design Tools
  • A Simple Web Developer’s Color Guide
  • Adobe Color CC - Tool for creating harmonious color palettes
  • Font Squirrel
  • TypeWolf Font Suggestions

Mobile devices now make up more than half of the traffic to major websites. And it’s also still the case that people regularly print out web pages for a variety of reasons. That means web designers need to make sure their pages work on a variety of screens, and even in print format--not just on high-resolution large-screen computer monitors. The process of creating HTML and CSS that will adapt to a variety of devices is called responsive design. We'll look at techniques for responsive design, as well as using CSS for navigation that works in multiple contexts.

Tuesday Readings

• A Hands-On Guide to Mobile-First Responsive Design
• MDN: Using Media Queries
• Responsive Design Examples

Tuesday Exercise: Responsive Design

In this exercise, you'll use CSS media queries to create two layouts for the same site; one optimized for a small screen, and one optimized for a larger screen.

Thursday Readings

• Solved with CSS! Dropdown Menus
• W3Schools: CSS Navigation Bar

Resources Related to Thursday's Lecture

• CSS Pseudo-Classes and Pseudo-Elements (MDN)
• MDN: CSS Values and Units
• Fluid Typography (CSS Tricks)
• Get the Balance Right: Responsive Display Text
• Reboots, Resets, and Reasoning

Thursday Exercise: Portfolio Design Review

In today's class, you'll break into small groups to review each other's portfolio designs. Take notes during this process. No later than Saturday noon, you should upload your notes (either the original notes or an edited version, your choice) to the Week 5 Portfolio Design Critique Notes dropbox on myCourses.

Web layout technologies have changed significantly over the past several years, with new tools like Flexbox and Grid replacing older methods of CSS layout. We'll look at both technologies this week, and how they work together.

Tuesday Readings

• MDN: Using CSS Flexible Boxes
• CSS Tricks: A Complete Guide to Flexbox

Tuesday Exercise: Flexbox Basics

For today’s exercise, you’ll be using Flexbox to create a page using the 3-column “Holy Grail” layout model.

Thursday Readings

• MDN CSS Grid Layout Guide
  • Basic Concepts of Grid Layout
  • Relationship of grid layout to other layout methods
• Jen Simmons' Layout Land Channel
  • Basics of CSS Grid: The Big Picture
  • Flexbox vs CSS Grid: Which is Better?
  • Incredibly Easy Layouts with CSS Grid
  • Flexibility & the Fold - New Possibilities with CSS Grid

Thursday Exercise: Grid Basics

You'll be revisiting the Holy Grail layout, but this time using CSS grid to implement it. You'll also create a responsive image gallery without media queries.

Tuesday is a reading day, so we will not have class that day. I will be available for one-on-one meetings to provide feedback on your portfolio projects.

Tuesday Readings

No class, but it is a reading day! :)

• MDN HTML Forms (Your first HTML form, How to structure an HTML form, The native form widgets, Styling HTML forms)

Thursday Exercise: Forms

On Tuesday, we’ll look at how CSS can be used to create transitions and animations. On Thursday, we’ll talk about Scalable Vector Graphics on the web.

Tuesday Readings

• Lynda.com CSS:Animation

Tuesday Exercise: CSS Animation

You’ll be applying what you learned in the CSS Animation tutorial to an HTML page that I'll provide.

Thursday Readings

Complete before class:

• Lynda.com: Learning SVG - Watch only Sections 1 and 2 (Core Principles, and Anatomy of an SVG).

Optional But Useful Resources

• How to Create (Animated) Text Fills with SVG and CSS
• CSS Tricks: Animating SVG With CSS

Thursday Exercise: SVG Graphics

Some basic practice with SVG graphics implemented in HTML pages.

This week we’ll start using JavaScript to implement interactivity in websites.

Tuesday Readings

• MDN: Introduction to the DOM
• MDN: JavaScript Basics

Tuesday Exercise: Basic Javascript, The Document Object Model, & More About the DOM

Thursday Exercises: Javascript Functions & Javascript Events

We'll continue looking at how to use JavaScript to implement interactivity on web pages. On Tuesday you'll have an opportunity to work on exercises you haven't completed (for partial credit), and I'll talk briefly about the Web Storage Exercise (which is due on Thursday).

Optional Review (Objects & Arrays)

I will not be reviewing complex JavaScript data types (object literals and arrays) in class, but understanding them is important as we start dealing with more complex JavaScript applications. If you are not familiar with those data types from your prior programming classes, you should review the following:

• JavaScript Objects
• Javascript Arrays

Web Storage Exercise

You should complete this exercise before class on Thursday, 11/1. I will be discussing it briefly in class on Tuesday.

Web Services Exercise

We will work through this exercise in class on Thursday. It is due by noon on Saturday (but you'll probably have it done by the time class is over).

Reminder: Project 2 is Due at 8am on Monday, 11/5!

On Tuesday we'll review CSS Grid & Flexbox, since most of you weren't able to use these effectively in your portfolio project.

Tuesday Resources

• CSS Tricks Complete Guide to Grid
• CSS Tricks: Complete Guide to Flexbox
• MDN: CSS Grid
• MDN: CSS Flexbox
• CodePen of In-Class Example

On Thursday we'll start talking about JQuery.

Thursday Readings

• jQuery Tutorial (HOME, Intro, Get Started, Syntax, Selectors, Events)
• jQuery Effects (Hide/Show, Fade, Slide, Animate, stop(), Callback, Chaining)

Thursday In-Class Examples

• Simple jQuery Example
• jQuery slideToggle Over Text Example

This week we'll look at a variety of ways that jQuery can be used to enhance interaction and usability of a website

Tuesday Exercise: Pixel ArTeur

On Tuesday, I'll walk you through creation of an interactive graphic that uses grid, native JavaScript, and jQuery. The finished version must be submitted by the start of Thursday's class.

Thursday Readings

• The Effects of Parallax Scrolling on User Experience in Web Design
• How Website Usability Affects Conversion: Seven Real-Life Examples

Thursday Exercise: JavaScript and jQuery for Web UX

On Thursday, I'll demonstrate a variety of ways that JavaScript and jQuery can be used to improve the user experience on a website. You must upload a page using at least two of the techniques demonstrated no later than Saturday at noon. It should be labeled: Week 12 Interactivity Exercise. (If the code is simply a cut and paste of my code, you will not receive full credit; you must adapt it to some content of your own).

On Tuesday we’ll talk about accessibility for the web, and I’ll have you do some accessibility assessments of web pages.

Tuesday Readings

• MDN: What is Accessibility?
• Web Content Accessiblity Guidelines (WCAG) At-A-Glance
• Tuesday Lecture Slides (please review if you don't attend class)

Tuesday Exercise: Accessibility Assessments

If you are unable to attend class on Tuesday due to travel plans, you will still need to complete this exercise.

On Tuesday, we'll talk about ways to make your pages more dynamic, using server-side technologies like PHP, and browser-based JavaScript approaches like AJAX.

On Thursday, we'll talk about frameworks and what they are, and look at some of the more popular front-end frameworks, including those focused on site layout and interaction like Bootstrap, Foundation, and Materialize, those that focus more on application development like React and Angular. We'll also briefly discuss node.js, which is server-side JavaScript.

Tuesday Readings

• MDN: Introduction to the Server Side
• MDN: Client-Server Overview
• Sending and Retrieving Form Data
• MDN: Fetching Data From the Server (with JavaScript)

Tuesday In-Class Exercise: Retrieving Data From the Server with AJAX

During class I'll walk you through using browser-based JavaScript to load files from the server without needing to refresh the entire page. The jQuery version of the exercise, which we'll cover in class, is due at the start of class this Thursday, November 29.

Tuesday Homework Options

You have two options for your homework assignment, which is due on Tuesday of next week--one that continues the AJAX in-class exercise, and one that involves creating a PHP contact form. Whichever you choose, it is due at the start of class on Tuesday, December 4.

Homework Option 1: PHP Contact Form

In this exercise you'll modify a PHP script that collects data from a form and sends you an email with its contents. You'll need to upload the files to either the RIT web server (banjo/people), or the CAD web server, since GitHub Pages doesn't support server-side code.

Homework Option 2: Using AJAX to Select Components of a Source Document

In this exercise you'll modify a PHP script that collects data from a form and sends you an email with its contents. You'll need to upload the files to either the RIT web server (banjo/people), or the CAD web server, since GitHub Pages doesn't support server-side code.

https://github.com/LawleyFall2018/230-fall2018/blob/master/weekly_materials/week13/accessibilityExercise.md#checking-an-rit-page-for-accessibility

Thursday Readings

• MDN: Server-Side Web Frameworks
• MDN: Introducing Node
• Front-End Frameworks in Web Development
• How to Choose a Front-End Framework

Thursday Exercise: Sample Practical

This sample practical will give you a good sense of what to expect on the final practical exam. You are welcome to ask for help from me or the TAs when working on this. It does not need to be turned in.

On Tuesday we’ll talk about hosting options for your web projects--at RIT, on GitHub, and on other hosting sites. We'll discuss how you register domain names, as well, since that's often part of the process of publishing a website.

If you fail the final practical exam in week 15 (with a score lower than 7/10), you will need to take the makeup version during our final exam time slot.

Your final individual project will be due this week.