Course Outline


Class 1 Description

Let's get to know each other, discuss the syllabus and the lay of the course.

Required Reading and Review

Assignment

All parts of Assignment 1 are due Jan. 16 at 7pm. Upload to E-Learning

1 of 2
Download and complete the Introduce Yourself Kit. Make the page your own: Add images, interactivity, colors and any additional elements that help introduce you to the class.

Add the following to the Introduce Yourself Kit you started in class:

  • Three (3) things you learned about the browsers and the web
  • Explain the function of the doctype.
  • Explain the new semantic elements in HTML5

Upload the Introduce Yourself Kit to eLearning. Be ready to present to the class on Jan. 16.

The web is a vast domain, with rapidly evolving jobs. It common to demarcate the web into two basic roles: coders, who write HTML, CSS, JavaScript, PHP, Ruby or some other code, and designers, who create the visual design of a website. While this distinction between coders and designers is convenient and facile, there are actually a wide range of careers available in web development.

You'll find that many jobs in web development are non-discrete: the responsibilities and roles of these careers overlap.

 

Required Reading

Additional Resources

Assignment

2 of 2
Decide upon an area that you find interesting. Research it and find: roles and responsibilities, average pay, places that offer that job. Find someone in that field and link to their blog, Github, Twitter or other space on the web. Write a paragraph about the person and describe what they do and why you find it interesting. Include the link to their social site. Write your findings in a doc file and upload to eLearning.

 

Design/Redesign a non-profit website.

Usually, non-profit organizations are in most need of assistance in communicating their goals. Redesign any non-profit organization's website. They do not have to know that you are redesigning their website.

You can find many non-profit organizations on the North Texas Giving Day website.

Specifications:

  • Change the look of the website.
  • Feel free to the revise the content.
  • Redesign at least 3 pages
  • Use a well-coordinated color/font design that compliments the theme of the organization.
  • Use CSS and JavaScript when necessary.
  • You may use a framework. You may not use Wordpress or other blogging platform.
  • Upload it to your domain.

Presentation Questions

When you present your midterm to the class, you should answer the following questions during your presentation. You should clearly illustrate not just your final design, but the thought process you followed as well.

  • What alternative design components did you consider and ultimately reject?
  • What was the the logic behind your choice of alternatives?
  • Who did you consult with to reach your decision, and what was their opinion?
  • Is the content necessary? What content would you leave out? What would you add?
  • Why did you choose your layout/theme/design?
  • Do you feel the site looks credible? Why or why not?

Project Critique

While viewing other students' projects you should critique them.

Critique - detailed evaluation; review; a serious examination and judgment of something;

Back up every comment you make with a reason; what exactly caused the reaction. This allows the designer to see both what the design is communicating and why. A critique is about giving and receiving constructive criticism; things that help the designer to improve the design, to make it communicate the intended message (or achieve the product goal etc) more successfully.

As design is fundamentally based around achieving a goal (for web design it’s communicating a specific message to a target audience), the intended message and target audience are necessary to judge if a design has succeeded.

 

Build something that works.

Douglas Adams once said: "We are stuck with technology when what we really want is just stuff that works." You will form groups to create a rich, interactive experience using jQuery. Groups may include the following team members:

  • Front-end designer (HTML, CSS)
  • Back-end designer (JavaScript, MySQL)
  • User experience, interaction designer
  • Usability analyst

 

Class 2 Description

This week we will review the basic HTML/CSS tags, examine how CSS controls the appearance and layout of a webpage and review relative vs. absolute filepaths.

Let's review the mechanics of HTML and CSS.

Resources

 HTML5 Cheat Sheet

codepen.io
CodePen is a social development environment for front-end designers and developers.

 CSS3 Cheat Sheet

Colour Lovers
A creative community where people from around the world create and share colors, palettes and patterns, discuss the latest trends and explore colorful articles.

In Class Exercise

In tonight's exercise, we will review CSS style sheets.

 Lesson Files

Assignment

Due: Jan 23rd @ 7:00pm

1 of 3

Readings

Read the following chapters from Javascript & jQuery: The Missing Manual.

  • Introduction
  • Chapter 1: Writing Your First Javascript Program

 Principles of User Interface Design - Joshua Porter's list of essential design components. Use these principles when completing your homework.

Assignment

2 of 3

Create a presidential campaign web page for someone whom you would like to run for president. The person can be real or fictional. Include the following:

Save your index.html with all the supporting images, files, etc. and upload the .zip file to me via e-learning.

Assignment

3 of 3
Homepage for your Assignment links.
Create a homepage for your assignment links with coordinating colors and fonts. Send the link to me via elearning.

Class 3 Description

This week we will look at the different CSS selectors and dive into the basics of JavaScript

Cheat Sheets

In Class Exercise

In Today's exercise, we will learn the different types of selectors, write a basic JavaScript program and learn the grammar of JavaScript.

 Lesson Files

Assignment

1 of 2

Read the following chapters from Javascript & jQuery: The Missing Manual.

  • Chapter 2: The Grammar of JavaScript
  • Chapter 3: Adding Logic & Control to Your Programs

Alligators abound in the sewers. Walt Disney is cryogenically frozen. Coke mixed with aspirin produces a drug-like high. These urban myths have a gained a remarkable amount of credibility, but are patently false.

Similarly, incorrect assumptions about the user experience (UX) have also made their way to the mainstream. Clients and bosses often make the assumptions and need to be re-educated.

Review the following debunked UX myths. You may find that these truths are debunked with just good common sense. However, what is common sense is not often common practice.

Toolbar Overload
Your grandparents toolbar.

Assignment

2 of 2

Review myths 1-3 on the User Experience (UX) Myths website and then answer the following questions in an HTML page of your creation:

  • Myth 1: Find a website that has a lengthy article, but is also scannable. Explain the techniques used that allow the article to be scanned quickly.
  • Myth 2: Find a website that uses the "scent of information" rule rather than the 3-click rule. Explain how the scent of information is used to lead visitors to the information desired.
  • Myth 3: Find a website that uses scrolling as a way to maintain visitor interest or as a way to introduce content. Here are two examples:

    How can you use scrolling to sustain interest for your audience?

Create an HTML page that answers the above questions and includes the following HTML tags:

  • <h1>, <h2>
  • <header>
  • <section>
  • <aside>
  • <footer>

Use a palette from Colour Lovers to add:

  • unique color headings
  • a unique color for p tags

Add two coordinating fonts from Google Fonts (get started with Google Fonts)

Include a JavaScript alert box with a custom message.

Save your webpage and your css styles page into a folder titled assg03, upload the folder to your website and send the link to the assignment page elearning.

Karen McGrane
“On a good day, I make the web more awesome. On a bad day, I just make it suck less.” - Karen McGrane, User Experience Expert

Class 4 Description

This week we will explore the grammar of JavaScript.

Tonight, we will look at Javascript:

  • Statements
  • Built-in Functions
  • Data Types
  • Variables
  • Arrays

In addition we use Javascript to:

  • to create a message
  • ask for information
  • write to a web page using an array.

 Lesson Files

Cheat Sheets/Resources

Assignment

1 of 3

Read the following chapter from Javascript & jQuery: The Missing Manual.

  • Chapter 3: Adding Logic & Control to Your Programs

Create a simple webpage with nice color coordination and 2 fonts from Google you haven't used before. (Helpful font pairing website fontpair.co)
Add in a JavaScript that prompts for the user's name at the beginning. When the user enters their name, display a welcome message using their name at the top of the page in <h2> tags.
Using a Javascript Array, create a list of your 5 favorite bands and display your 3rd favorite on the webpage.
Save your webpage and your css styles page into a folder titled assg04, upload the folder to your web domain, then send the link to e-learning.

 

Inconvenience Store

UX design principles are used to shape human behavior every day. The principles guide interface design to help users achieve their goals as easily and seamlessly as possible. Sometimes, however, the principles need to be violated to actually achieve a desired outcome. The following article addresses one case study of violating a user principle. Read/review the following articles and answer the questions on the sidebar.

Required Reading

Assignment

2 of 3

In the webpage you've created, answer the following questions, at least one paragraph per question:

  1. What design rule did NextDoor break?
  2. What led them to consider this change?
  3. Was it a good or bad decision? Why or why not?
  4. Was it successful? Why or why not?
  5. Find another example of a site that breaks the design rule, provide a link and a full paragraph on how and why that site breaks the design rule.

Be prepared to share your findings in class.

If you haven't already, it's time to start figuring out which site you would like to re-design. As I've said before, there are a lot of non-profits in Texas alone and most are in need of help in redesigning their website.

Assignment

3 of 3

Find 3 links to non-profit websites that you might be interested in doing a redesign. In the above webpage provide the link and a statement of why you believe the site could benefit from the redesign. Later, you will narrow down your choices.

Cookie Clicker

Class 5 Description

This week in CSS, we will build float-based, multi-column layouts and look at responsive web design. In JavaScript, we will add logic and control to our pragrams.

Today's Class

 CSS

Resources/Downloads

  JavaScript

  •  Making Programs React Intelligently
  •  Handling Repetitive Tasks with Loops
  •  Functions: Turn Useful Code into Reusable Commands

Bonus Resources

Assignment

1 of 3

Complete the Learn Javascript Functions section in Code Academy.
Upload a screenshot of the completed badge to eLearning when finished.

2 of 3

Assignment

3 of 3

If you don't have a domain or webspace already, purchase a domain name. You also may use a subfolder of your current webspace.
For purchasing a domain name, I recommend the following companies:

Review the Getting Started with Your Domain slides for assistance.

Send me your working domain URL in a comment to eLearning.

You can't unsee this.

Lings Cars

Class 5 Description

This week we will look at JavaScript loops and functions, and use Font Awesome Icons to add icons to our webpages.

In class we will look at how to automate repetitive tasks and make reusable code.

  JavaScript

  •  Handling Repetitive Tasks with Loops
  •  Functions: Turn Useful Code into Reusable Commands

Assignment

1 of 3

Read the following chapter from Javascript & jQuery: The Missing Manual.

  • Chapter 4: Introduction to jQuery

2 of 3

Using the Javascript concepts we covered today, create a webpage with a 10-question quiz over a favorite pop-culture character from a movie, TV, or a book.

The quiz answers must be in numerical form. (i.e., How many houses are in Hogwarts Academy?) This makes it easier, since we don't have to account for capitalization or spelling.

  • Style the page according to the character's universe with appropriate images.
  • Add 2 complementary Google Fonts
  • Use a background pattern. Subtle Patterns or Colourlovers.
  • Add appropriate FontAwesome icons to the page.
  • Save the index.html, styles.css, and supporting images to a folder labeled assg5, upload to your site, and provide the link to me via eLearning.

Now that you have reviewed different non-profit sites, you are now ready to begin sitemapping one of them.

A sitemap is a visual representation of the site's structure, flow and grouping of content and information. It communicates, it defines and it structures. It is a representation of the entire project, from a broad vantage point to many of the most minute of details. It is a chance to view the site structure and organization as a whole.

Web Redesign 2.0, Goto and Cotler, p. 98

 

Website Mapping Review

Assignment

3 of 3

Review one of your non-profit sites. Create a sitemap that addresses the content revision needs of your audience. Use the sitemap template as a starting point. Upload the sitemap to the Assignment 5 section of eLearning.

You can't unsee this.

Lings Cars

Class 7 Description

Announcement

Midterm presentations will be on March 20th.

This week we get to know jQuery, a JavaScript library of code in an external JavaScript file. We will also look at icons and html frameworks.

Today, we will look at the basics of jQuery and write a script that alters the webpage dynamically.

Two Main Steps for JavaScript & jQuery:

1. Select an element on a page.

  • Existing tag: <body>, <span>, <div>, <ul>, or class or ID, such as .sideBar or #mainPage

2. Do something with the element.

  • Change a property of the element.
  • Add new content.
  • Remove the element.
  • Extract information from the element.
  • Add/remove a class attribute.

Resources

Assignment

1 of 3

Read the following chapters from JavaScript & jQuery: the missing manual:

  • Chapter 5: Action/Reaction: Making Pages Come Alive With Events
  • Chapter 6: Animations & Effects

2 of 3

Download the Sample Page Starter Kit and complete the following:

  • Add jQuery to the page by either downloading the files or linking to a CDN. I recommend Google (2.x snippet).
  • Add <span> tags with the class="normal" attribute to the four paragraphs.
  • Locate every <span> tag containing the normal class.
  • Duplicate each <span> tag.
  • Remove the normal class from the duplicate <span> and add a new class danger.
  • Add the duplicate <span> tag to the page.

Add the following styles to the danger class:

  • Make the text color white.
  • Background should be red.
  • Change the font to Space Mono (from Google).
  • Size: 18px
  • Add 20px top and bottom margin.

Upload to your website, provide a link from your homepage, and send the link to me via eLearning.

Get vector icons and social logos on your website with Font Awesome, the web’s most popular icon set and toolkit.

Required Reading

Assignment

3 of 3

Add to the above webpage at least 3 appropriate icons from Font Awesome. Make one of the icons a spinner icon, just for fun.

Find the Invisible Cow

Class 8 Description

This week we will cover file uploading using FTP and the File Manager. We will also make pages come alive with jQuery events, animations, and effects.

FTP allows you to manage your website files through an FTP client such as Filezilla.

Absolute vs. Relative Pathnames (slide #38)


Presentation Notes

Action/Reaction: Making Pages Come Alive with Events

When you hear the phrase "Javascript lets you make interactive web pages," that means is that JavaScript lets your web pages react to something a visitor does: moving a mouse over a navigation button produces a menu of links; selecting a radio button reveals a new set of form options; clicking a small photo makes the page darken and a larger version of the photo pop onto the screen. All the different visitor actions that a web page can respond to are called events.

Animations and Effects

Making elements on a web page appear and disappear is a common JavaScript task. Drop-down navigation menus, pop-up tooltips, and automated slideshows all relay on the ability to show and hide elements when you want to. jQuery supplies a handful of functions that achieve the goal of hiding and showing elements.

Required Reading

Resources

Assignment

1 of 2

Download the Sample Page Starter Kit and use your own colors, fonts, and background images to make a very scary webpage.

  • Add jQuery to make one of the elements appear by fading in and moving up from the bottom of the page when you click a button.
  • Make the same element disappear when you click the same button again.
  • Float the navigation list (<ul>) left using the float: left property. Review the The Mystery of the CSS Float for assistance.
  • Use appropriately scary background images.
  • Choose among the Google WebFonts two fonts that are scary, dark & spooky.
  • Add your own colour palette to the page. You may use a palette from Colour Lovers.
  • Name the page index.html, upload to your server, link to it from your main page and upload the link to eLearning.

Resources

Usability Test Demonstration

The following video is a demonstration Usability Test performed by Steve Krug as part of a talk on Do-It-Yourself Usability Testing (demo starts at 27:00).

Assignment

2 of 2

Read Usability Testing on 10 Cents a Day and answer the following questions in paragraph form, in your own words:

  • What is the difference between usability testing and focus groups?
  • When is it best to use focus groups and usability testing?
  • What is the best-kept secret of usability testing and why?

Place the above answers in a webpage on your site and send the link to me via eLearning.

Find a partner in this class to perform usability testing. You can use the same partner that you have for your research project. I will outline the details of the testing (due date, etc.) next week. In the same word/google/text document, let me know who your partner is.

The Black Brick Road of OZ

Spring Break: No Class

After break we will get nerdy with Google Analytics.

Watterson, Bill. "Calvin and Hobbes." CalvinandHobbes.com. N.p., n.d. Web. 07 Mar. 2016.

Class 9 Description

This week we will use jQuery to explore common jQuery tasks.

Common jQuery Tasks

Adding Rollover Images
Photo Gallery With Effects
Creating New Windows

Photo Gallery with Effects

We will use the link's click event to achieve the following steps:

  1. Stop the default behavior of the link.
  2. Get the <href>value of the link.
  3. Create a new image tag to insert into the page.
  4. Fade the old image out while fading the new image in.

jQuery Plugins

http://plugins.jquery.com

Basic Setup Process

  1. Download the files.
  2. Move the required files to your site's folder.
  3. Attach the plug-in's CSS file to a web page.
  4. Link to the plug-in's JavaScript file.
  5. Modify your page's HTML.
  6. Call the plug-in function.

Today's plug-in of choice: a jQuery drop-down menu.

www.smartmenus.org
Documentation

Other jQuery plug-ins for enhancing page navigation.

Assignment

1 of 2

Read Chapter 7: Common jQuery Tasks in JavaScript & jQuery: the missing manual.

2 of 2

Download the Sample Page Starter Kit and use your own colors, fonts, and background images to make a fan website of your favorite show or movie.

  • You must create 3 pages: a home page (index.html), a photo slideshow page (slideshow.html), and a characters page (characters.html).
  • The home page must have a intro summary of the show/movie and links to 3 news articles about the show. It also must have a paragraph of why you love this show.
  • The slideshow page must have a jQuery Plugin slideshow of at least 10 photos.
  • The characters page must have a list of characters with names and photos.
  • On all pages: Replace the existing navigation list with a jQuery Plugin menu. Make sure all pages are linked to the menu. Replace all the dummy text with your own text. You may use text from other sites as long as you properly cite (with links) in the footer of each page.
  • Choose 2 appropriate Google WebFonts.
  • Add an appropriate color palette to the page.
  • Place the index.html, slideshow.html and characters.html pages (with supporting files) in a folder named asg8 and upload to your server. Link to it from your main page and upload the link to eLearning.

The Deep Dive

Ben Franklin once said, “Tell me and I forget. Teach me and I remember. Involve me and I learn.” The things you teach yourself are often the things that you remember the best. Select a topic and a partner and get to know it well enough to present it to the class.

Research Presentation
Give Oct 30

A 10-minute presentation to the class on your research topic:

  • Use an HTML or JS-based presentation system.
    May be hand-coded using a tool like revealjs.com or created with a GUI such as slides.com. Do not use Google Drive.
  • Introduce your topic
  • Introduce the problem is solves and for which audience members
  • What is the relevance in web design or development?
  • Where is this being used? What purpose does it serve?
  • What is its future?
  • Provide a link to your research
  • Be ready to answer audience questions about your topic

In your groups, you will perform user testing on three subjects for the University of Dallas' College of Business website. I will hand out questions to ask and go over the procedure in class. Please complete the testing and upload the resources (videos, written reports, etc.) to eLearning by 1:00pm on Monday, November 13. You may place the videos on a Google drive and send the link to eLearning.

Resources

Form Links

Usability Test Demonstration

The following video is a demonstration Usability Test performed by Steve Krug as part of a talk on Do-It-Yourself Usability Testing (demo starts at 27:00).

Cube Slam

Class 10 Description

This week we will look at using jQuery to update and validate web forms.

Assignment

1 of 2

Read Chapter 8: Enhancing Web Forms in JavaScript & jQuery: The Missing Manual.

2 of 2

Create a Mad-Lib style web form.

Download the jQuery Madlib Assignment Folder

Follow the instructions on the instruction sheet.

  • Style the page according to the character's universe.
  • Add 2 complementary Google Fonts
  • Use a background pattern. Subtle Patterns or Colourlovers.

Upload the folder to your server. Link to it from your main page and upload the link to eLearning.

Nothing to Hide

Class 11 Description

This week we will have Research Presentations.

Research Presentations

A 10-minute presentation to the class on your research topic:

  • Use an HTML or JS-based presentation system, preferably a jQuery plugin.
    May be hand-coded using a tool like revealjs.com. Do not use Google Drive, slides.com, keynote, or powerpoint.
  • Introduce your topic
  • Introduce the problem is solves and for which audience members
  • What is the relevance in web design or development?
  • Where is this being used? What purpose does it serve?
  • What is its future?
  • Be ready to answer audience questions about your topic.

Questions & Feedback

Peer feedback should provide constructive criticism, not attacks. This means that students will provide valuable comments to other students regarding their research. Students should give their initial perceptions and reactions, and their reasoning. Students who participate should be prepared to provide sound reasoning and suggestions for improvement if necessary. Feedback should include the positive aspects of the project, as well as, any suggested improvements. Remember, comments should always be backed up with reasons.

In groups, you will perform user testing on three subjects for the University of Dallas College of Business website. Please complete the testing and upload the resources (videos, written reports, etc.) to eLearning by 1:00pm on Thursday, November 13.

Usability Test Demonstration

The following video is a demonstration Usability Test performed by Steve Krug as part of a talk on Do-It-Yourself Usability Testing (demo starts at 27:00).

Class 12 Description

This week we will get introduced to jQueryUI.

What is jQuery UI?

jQuery UI is made up of many different parts which can be grouped into three categories:

  • Widgets
  • Interactions
  • Effects

jQuery UI Download Page

Today we will be adding widgets to a page with some interactions and effects.

  • Dialog Boxes
    • Properties
    • Passing Options to the Dialog Widget
    • Opening Dialogs Boxes with Events
    • Adding Buttons
  • Providing Information with Tooltips
    • Tooltip Options
    • Using HTML Content in a Tooltip
  • Tabbed Panels
    • Tabbed Panels Options
    • Tabs with Remote Panel Content
  • Saving Space with Accordions
  • Adding Menus to a Page
    • Creating a Horizontal Menu Bar

Chapter 09 Lesson File

Assignment

1 of 1

Read chapters 11 & 12 in Javascript & jQuery: The Missing Manual

Download the jQuery Page Starter Kit and use jQuery UI to make an interactive webpage.

  • You must use the following jQuery UI elements:
    • Dialog Box
    • Tooltips
    • Tabbed Panel or Accordion
    • Vertical Menu
  • Choose among the Google WebFonts two fonts that are complementary, attractive & readable.
  • Use appropriate background images.
  • Add your own colour palette to the page. You may use a palette from Colour Lovers.
  • Name the page index.html, upload to your server, link to it from your assignments page and upload the link to eLearning.

 

  • The site should have a rich interactive experience using jQuery.
  • The page design should be visually pleasing, professional, and should support the page content. 
  • The page design should be appropriate for its intended audience. 
  • The site should be well organized. 
  • All pages should have meaningful titles. 
  • Page navigation should be obvious and easy to maneuver. 
  • Navigation should be on every page and should be easy to find.  
  • The navigation should be consistent throughout the site.

Final Project Rubric

The Final Project Rubric will be used as a guide for assessing student performance and evaluating the quality of student work. The rubric includes multiple objectives each with a range of quality levels (performance criteria). The rubric is a guide for assessing the student's knowledge of each objective.

Rubrics can also be used as a method of self evaluation. Because the project objectives and grading criteria is clearly stated, students can assess their own progress on a project. Before you submit your project, use the rubric below to evaluate your site. You should evaluate your project by using the evaluation form.

Students will have the opportunity to submit a project evaluation form for each presentation. For every Final Project Evaluation Form that you submit, you get 1 point added to your final project. The most evaulations that you will get credit for is 2. So you have a chance to increase your Final by a score of 2.

Final Project Evaluations Due: December 11, 7:00pm. Upload to eLearning

Peer evaluations should provide constructive criticism, not attacks. This means that students will provide valuable feedback to other students regarding their designs. Students should give their initial perceptions and reactions, and their reasoning. Students who evaluate projects should be prepared to provide sound reasoning and suggestions for improvement if necessary. Evaluations should include the positive aspects of the project, as well as, any suggested improvements. Remember, comments should always be backed up with reasons.

 Download the Final Project Evaluation Form in RTF format

The rubric covers the following areas:

  1. Design
  2. Layout
  3. Navigation
  4. Mechanics
  5. jQuery Development
  6. Credibility
Final Project Rubric
Objectives Select Quality Criteria that Best Matches Project
Design

1 point
The page design is not entirely appropriate to the content or its intended audience

3 points
The page design is visually pleasing, although it may not be entirely appropriate to the content or its intended audience

5 points
The page design is visually pleasing, supports the page content, and is appropriate for its intended audience

Layout

1 point
The page layout is usable, but it has problems with clarity or placement of elements.

3 points
The sites layout is largely effective, although there may be some occasional problems with clarity or placement of elements

5 points
Pages use an effective and uncluttered layout, using background color to enhance the readability of text and the appearance of graphics;

Navigation

1 point
A reader can get around the site, but only with some difficulty

3 points
The site is well organized and easy to navigate for the most part, with clear relationships between pages; however, some sections may be more difficult to find or there may be "dead end" pages

5 points
The site is well organized and easy to navigate; the relationship between pages is clear and it's easy to find an individual page; each page is clearly linked to another; links are appropriate, clearly labeled, and have a definite purpose; page titles are appropriate to content and have a definite purpose

Mechanics

1 point
The site includes missing pictures or broken links.

3 points
Everything on the site works: there are no missing graphics or broken links;

5 points
Everything on the site works: there are no missing graphics or broken links; it has consistent layout among all major browsers.

jQuery Development

1 point
There is no or little jQuery interactivity used in the site.

3 points
There is jQuery used in the site, but it doesn't contribute to the overall usability or experience of the site.

5 points
jQuery was efficiently used to enhance the interactivity and experience of the site.

Credibility

1 point
Contact/copyright information is not shown on any pages.

3 points
A few pages contain contact/copyright information but not all pages.

5 points
Contact/copyright information is included on all pages (at least an email address or phone number). If the site is e-commerce, it should have the mailing addresses, phone numbers and email addresses

Author's name, affiliations, and credentials are included if applicable;

Week 13 Description

Customizing the Look of & Creating More Interactions and Effects with jQuery UI

Customizing the Look of jQuery UI

Introducing ThemeRoller
Downloading and Using Your New Theme
Overriding jQuery UI Styles

jQuery UI Interactions & Effects

The Draggable Widget
The Droppable Widget
Sorting Page Items
jQuery UI Effects

Assignment

1 of 1

Download the HP jQuery UI Page Starter Kit and use the jQuery UI drag and drop widgets to make a Hogwarts house-sorting webpage. (If you don't know anything about the Harry Potter universe, come see me with an alternative.)

  • The page will have images of 4 characters and images of 4 logos from the Hogwarts houses.
  • Use the Drag & Drop widgets to allow the user to drag the characters to their proper house. Provide feedback when the user is successful.
  • If the user drops a character to the wrong house, the character should go back to the original position. Provide feedback when the user makes a mistake.
  • You must also have an appropriate color pallette, Google Fonts and background images.
  • Bonus: When the user gets all 4 matches, provide a Congratulations message. (+1.3 points)
  • Name the page index.html, upload to your server, link to it from your assignments page and upload the link to eLearning.

Rock, Paper, Scissors

Fall Break: No Class

Next week will be lab time to work on your final project.

Watterson, Bill. "Calvin and Hobbes." CalvinandHobbes.com. N.p., n.d. Web. 16 Nov. 2016.

Lab Time

Attendance is optional. I will be in class to answer questions and help with final projects.

Watterson, Bill. "Calvin and Hobbes." CalvinandHobbes.com. N.p., n.d. Web. 29 Nov. 2015.

Final Project

 

  • The site should have a rich interactive experience using jQuery.
  • The page design should be visually pleasing, professional, and should support the page content. 
  • The page design should be appropriate for its intended audience. 
  • The site should be well organized. 
  • All pages should have meaningful titles. 
  • Page navigation should be obvious and easy to maneuver. 
  • Navigation should be on every page and should be easy to find.  
  • The navigation should be consistent throughout the site.

Final Project Rubric

The Final Project Rubric will be used as a guide for assessing student performance and evaluating the quality of student work. The rubric includes multiple objectives each with a range of quality levels (performance criteria). The rubric is a guide for assessing the student's knowledge of each objective.

Rubrics can also be used as a method of self evaluation. Because the project objectives and grading criteria is clearly stated, students can assess their own progress on a project. Before you submit your project, use the rubric below to evaluate your site. You should evaluate your project by using the evaluation form.

Students will have the opportunity to submit a project evaluation form for each presentation. For every Final Project Evaluation Form that you submit, you get 1 point added to your final project. The most evaulations that you will get credit for is 2. So you have a chance to increase your Final by a score of 2.

Final Project Evaluations Due: December 11, 7:00pm. Upload to eLearning

Peer evaluations should provide constructive criticism, not attacks. This means that students will provide valuable feedback to other students regarding their designs. Students should give their initial perceptions and reactions, and their reasoning. Students who evaluate projects should be prepared to provide sound reasoning and suggestions for improvement if necessary. Evaluations should include the positive aspects of the project, as well as, any suggested improvements. Remember, comments should always be backed up with reasons.

 Download the Final Project Evaluation Form in RTF format

The rubric covers the following areas:

  1. Design
  2. Layout
  3. Navigation
  4. Mechanics
  5. jQuery Development
  6. Credibility
Final Project Rubric
Objectives Select Quality Criteria that Best Matches Project
Design

1 point
The page design is not entirely appropriate to the content or its intended audience

3 points
The page design is visually pleasing, although it may not be entirely appropriate to the content or its intended audience

5 points
The page design is visually pleasing, supports the page content, and is appropriate for its intended audience

Layout

1 point
The page layout is usable, but it has problems with clarity or placement of elements.

3 points
The sites layout is largely effective, although there may be some occasional problems with clarity or placement of elements

5 points
Pages use an effective and uncluttered layout, using background color to enhance the readability of text and the appearance of graphics;

Navigation

1 point
A reader can get around the site, but only with some difficulty

3 points
The site is well organized and easy to navigate for the most part, with clear relationships between pages; however, some sections may be more difficult to find or there may be "dead end" pages

5 points
The site is well organized and easy to navigate; the relationship between pages is clear and it's easy to find an individual page; each page is clearly linked to another; links are appropriate, clearly labeled, and have a definite purpose; page titles are appropriate to content and have a definite purpose

Mechanics

1 point
The site includes missing pictures or broken links.

3 points
Everything on the site works: there are no missing graphics or broken links;

5 points
Everything on the site works: there are no missing graphics or broken links; it has consistent layout among all major browsers.

jQuery Development

1 point
There is no or little jQuery interactivity used in the site.

3 points
There is jQuery used in the site, but it doesn't contribute to the overall usability or experience of the site.

5 points
jQuery was efficiently used to enhance the interactivity and experience of the site.

Credibility

1 point
Contact/copyright information is not shown on any pages.

3 points
A few pages contain contact/copyright information but not all pages.

5 points
Contact/copyright information is included on all pages (at least an email address or phone number). If the site is e-commerce, it should have the mailing addresses, phone numbers and email addresses

Author's name, affiliations, and credentials are included if applicable;