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 Aug 28 at 1pm. 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 Aug. 28.

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.

 

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.

Timeline

Sept 11 Team, topic and plan
Oct 2 Research brief due
Oct 30 Research Presentations

 

Team, Topic and Plan
Sept 11

Select a teammate and agree upon a topic to explore for the semester.

  • Agree upon a topic. I will help you narrow down your topic to an achievable goal and provide additional resources
  • Immediately begin researching your topic (see questions in Research Brief section)
  • As you conduct your research identify how this tool will help developers and designers in their craft or process
  • Select a shared working space for documents, notes and resources (Google Drive, DropBox, Box.com, etc) for you and teammate

Research Brief
Due Oct 2

Create an HTML document that includes answers to the following questions. Cite your work by providing links back to relevant pages.

  • Who are the thought leaders behind your topic?
  • Where did this topic originate? Who created or founded?
  • Where can information be found about your topic and what kind of information is it (exercises, forums, code repos, etc)?
  • What does the future hold for this topic? What are new developments
  • Review blog posts, API documentation, code sources, etc
  • Insights from your research

 

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

 

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 review HTML/CSS tags and begin tackling the research project.

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.

Class Notes

In Class Design Challenge

Use content from Wikipedia to compose a page on codepen.io about your favorite character from a novel, film, TV show or comic book that includes the following:

  • A minimum of three paragraphs p of content
  • Proper heading structure:
    • An h1 tag for the page title
    • An h2 tag for the section
    • An h3 tag for the subsection
  • A link a to a website with more information
  • An image img of the hero or character
  • 2 complementary Google fonts that match the style of the page: one for the headers and one for the paragraph text.
  • Styles and colors to your page

Below is an example, with just the inherited styles from the site css.


The Tick

The Tick on TV

Overview

The Tick The Tick: The Animated Series is an American animated television series adaptation of the New England Comics superhero, The Tick. The series debuted September 10, 1994 on the Fox network's Fox Kids block and was responsible for introducing the satirical comic book character to a mainstream audience. Lasting three seasons, the final episode aired on November 24, 1996. Since then, The Tick has been syndicated by various networks, further increasing the show's cult following, and has been released on both VHS and DVD. A live-action series was created in 2001.

The Tick is an absurdist spoof of comic book superheroes. The Tick's sidekick is Arthur, a former accountant who dresses like a moth that flies. In the first episode, the Tick crashes a superhero convention to win the "protectorship" of The City.

The show's opening theme, written by Doug Katsaros, who also composed the scores for every episode, consists of big band music and campy scat singing. A typical episode plot would have The Tick battling a villain until Arthur devises a solution that saves the day. The Tick then declares an absurd moral regarding the previous conflict before the story comes to a close. Although the series was initially aimed primarily at children, it features an absurdist, parody style that appeals to an older audience as well.

Content repurposed from Wikipedia under the Creative Commons Attribution-ShareAlike License.

Assignment

Due: Sept 11th @ 1:00pm

1 of 3

Readings

 Learning is Misunderstood - An optional read that will challenge how you view studying, study methods and your approach to learning.

 Jumping Into HTML5 - Learn about new HTML5 tags and their usage. 

 Explore and Master Chrome DevTools (Ch. 1 and 2): - Learn how to use Chrome's Developer Tools and impress your friends, or at least your classmates.

 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 and export your work on codepen.io and send me the .zip file e-learning.

Research Presentation

We understand concepts more fully when we teach it. You will select a topic and research a minimum of 10 different source materials (web sites, magazines, book, etc.) and provide two examples of use. Students must understand the content and present it to the class.
Below are some suggested topics:

  • 3D visualization
  • Acessible Rich Internet Applications
  • APIs
  • Bandwith
  • Cloud-based OS
  • Cloud services
  • Cookies
  • Future devices
  • OpenID
  • Privacy
  • Responsive Images
  • Semantic Web
  • OS proliferation
  • Web Services
  • UI/UX - User interface, user experience
  • XHR (XMLHttpRequest)

You may also choose your own. The following websites may give you additional ideas on a topic to research:

Assignment

3 of 3
Research Topic
Decide upon a research topic that interests you and send to me via eLearning.

Class 4 Description

This week we will review the basic CSS tags, examine how CSS controls the appearance and layout of a webpage and learn about relative vs. absolute filepaths. We will also dive into the basics of JavaScript

Cheat Sheets

Class Notes


Presentation Notes

In Class Exercise

In tonight's exercise, we will review CSS style sheets, learn the different types of selectors, write a basic JavaScript program and learn the grammar of JavaScript.

 Lesson Files

Assignment

1 of 2

Complete the following Code Academy tutorials.

  • Unit 1: Introduction to JavaScript, Excercises 1-9

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

  • Introduction
  • Chapter 1: Writing Your First Javascript Program

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:

  • a unqiue color headings
  • a unique color for p tags

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

Save your webpage and your css styles page into a folder titled class03, compress(zip) it, and upload the compressed file to e-learning.

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 5 Description

This week we will explore the basics and grammar of JavaScript.

Today, we will use Javascript to:

  • Write text on a web page
  • Attach an external JavaScript file

In addition we will look at:

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

 Lesson Files

Cheat Sheets/Resources

Assignment

1 of 3

Complete the following Code Academy tutorials.

Upload a screenshot of your completed sections to e-learning

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

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

Create a simple webpage. 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.
Save your webpage and your css styles page into a folder titled class04, compress(zip) it, and upload the compressed file 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 a document or in the eLearning editor, answer the following questions, at least one paragraph per question:

  • What design rule did NextDoor break?
  • What led them to consider this change?
  • Was it a good or bad decision? Why or why not?
  • Was it successful? Why or why not?

Be prepared to share your findings in class.

Now that you've chosen a research topic, it's time to narrow your focus. For example, the field of user experience design has several elements:

  • Visual Design
  • Information Architecture
  • Interaction Design
  • Usability
  • Human-computer Interaction

Each element plays an important part in the topic.

Assignment

3 of 3

Find 5 articles on elements within your chosen research topic. The articles do not all have to be on the same topic. Write a paragraph summary of each topic and send to me through eLearning.

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 explore loops and functions.

Tonight's Class

 CSS

Resources/Downloads

  JavaScript

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

Bonus Resources

Assignment

1 of 3

Complete the Code Your Own Adventure section in Code Academy.
Upload a screenshot of the completed badge to eLearning when finished.

2 of 3

Download the Sample Page Starter Kit and use your own background images to complete the following.

  • Add CSS to this style sheet: sample-page-styles.css.
  • Float the <aside> sections to the right and left.
  • Float the navigation list (<ul>) left using the float: left property. Review the The Mystery of the CSS Float for assistance.
  • Use appropriate background images.
  • Choose among the Google WebFonts two fonts that are complementary, attractive & readable.
  • Use ems or percentage for the text size.
  • Style each header (<h1> - <h6>) tags.
  • Style the body contents (<p>).
  • Add styles to the special class.
  • Modify the leading on the paragraph text.
  • Modify the bullet type on the unordered list.
    List Styling
    .
  • Make the links inside the nav element a different color from the content links.
  • Add comments to the stylesheet.
  • Add your own colour palette to the page. You may use a palette from Colour Lovers.
  • Place the html and css pages in a folder named assignment 5, compress (zip) it, and upload to e-learning.

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 6 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 2

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.
  • 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. Also, provide a link from your homepage (see 2 of 2).

Website Mapping Review

HTML5 Frameworks Why recreate the wheel?

Assignment

2 of 2

Create your homepage for your domain. I highly suggest you start with an HTML framework.

  • Include a list of assignment links, starting with the assg5 above.
  • Include a paragraph of a general idea of your Research Presentation topic.
  • Be prepared to add sections for your Research Presentation and your Final Project.
  • Send me a link to your completed homepage through eLearning.

Cube Slam

Class 7 Description

This week we get to know jQuery, a JavaScript library of code in an external JavaScript file.

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

Two Main Steps for JavaScript & jQuery:

  • Select an element on a page.
  • 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

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.

In 2015, the University of Dallas website went through a recent visual redesign and IA restructuring. The feedback from different populations has been mixed, to say the least. In groups of two, you will be performing usability tests to help gain a better understanding of the issues. This week, you will be reviewing the site and using the 247 Web Usability Guidelines to offer your opinion on the udallas.edu site.

Required Reading

Assignment

2 of 3

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 your answers in a word/google/text document.

Find a partner in this class to perform usability testing. 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.

Upload the document to your site and send the link to me via eLearning.

Assignment

3 of 3

Rate the University of Dallas website using the 247 Web Usability Guidelines. Fill out the rating for each guideline. If a guideline isn't relevant, leave the rating blank.

Rename your guideline sheet with your lastname-firstname-ExpertReviewCheckpoints.xls and upload to your site and send the link to me via eLearning.

Find the Invisible Cow

Class 8 Description

This week we make pages come alive with jQuery events, animations, and effects. We will also dive deeper into Usability Testing.

Action/Reaction: Making Pages Come Alive with Events

When you hear the phrase "Javascript lets you make interactive web pages," that that meands 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 3

Complete the following CodeAcademy assignment.

Intro to jQuery

Send a screenshot of your completed badge to me via eLearning.

Assignment

2 of 3

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.

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

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

3 of 3

Spend some time with your usability testing partner and come up with 5 specific tasks for your subjects to attempt to accomplish during your testing.

Write these tasks out in a document, upload to your website, and add a link to the document from your assignments page. Send me the link through eLearning.

The Black Brick Road of OZ

Class 9 Description

This week we will use jQuery to create an animated dashboard and explore other common jQuery tasks.

Animations & Effects

Animated Dashboard

Common jQuery Tasks

Adding Rollover Images
Photo Gallery With Effects
Creating New Windows

Assignment

1 of 1

Complete the following CodeAcademy assignment.

jQuery Functions and Selectors

Send a screenshot of your completed badge to me via 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.

Timeline

Oct 27 Team, topic and plan
Nov 3 Research brief due
Nov 10 Overview Presentation
Nov 17 Code sample
Dec 1 Code Activity
Dec 8 Final presentations
Dec 15 Final presentations (if needed)

 

Team, Topic and Plan
Oct 27

You may work by yourself or someone else. If you work in a group, select a teammate and agree upon a topic to explore for the semester.

  • Agree upon a topic. I will help you narrow down your topic to an achievable goal and provide additional resources
  • Immediately begin researching your topic (see questions in Research Brief section)
  • As you conduct your research identify how this tool will help developers and designers in their craft or process
  • Select a shared working space for documents, notes and resources (Google Drive, DropBox, Box.com, etc) for you and teammate

 

Research Brief
Due Nov 3

Create an HTML document that includes answers to the following questions. Cite your work by providing links back to relevant pages.

  • Who are the thought leaders behind your topic?
  • Where did this topic originate? Who created or founded?
  • Where can information be found about your topic and what kind of information is it (exercises, forums, code repos, etc)?
  • What does the future hold for this topic? What are new developments
  • Review blog posts, API documentation, code sources, etc
  • Insights from your research

Overview Presentation
Give Nov 10

A 5-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?
  • Be ready to answer audience questions about your topic

 

Code Sample, hosted on GitHub or CodePen
Ready by Nov 17

Produce a code sample available on CodePen that explains how to implement your topic.
It should:

  • Demonstrate what’s possible with the tool or topic you’ve chosen
  • Be well-documented and thorough
  • Be code that your team has created
  • Contain a GitHub wiki with resources and information from your research brief

 

Final Presentations
Presented on Dec 8 and Dec 15 (if needed)

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

  • Remind them of your research topic
  • Give the audience a code activity and walk-through
  • Provide a link to your GitHub resources and research

Assignment

2 of 2

Team, Topic and Plan
Oct 27

You may work by yourself or someone else. If you work in a group, select a teammate and agree upon a topic to explore for the semester.

  • Agree upon a topic. I will help you narrow down your topic to an achievable goal and provide additional resources
  • Immediately begin researching your topic (see questions in Research Brief section)
  • As you conduct your research identify how this tool will help developers and designers in their craft or process
  • Select a shared working space for documents, notes and resources (Google Drive, DropBox, Box.com, etc) for you and teammate
  • Update the research section of your webpage if necessary and send me a link through eLearning.

Funny and Creative 404 Pages

Class 10 Description

This week we will create a photo gallery and explore jQuery plugins.

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.

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

www.smartmenus.org
Documentation

Other jQuery plug-ins for enhancing page navigation.

Assignment

1 of 3

Complete the following CodeAcademy assignment.

Modifying HTML Elements

Send a link to your badge page or screenshot of your completed badge to me via eLearning.

Assignment

2 of 3

Download the Sample Page Starter Kit.

Find a jQuery plugin, add it to the page, and customize it.

Add appropriate background colors and text to make the plugin complement the rest of the page.

Name the page index.html, upload to your server, link to it from your main page and upload the link to eLearning.

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.

Tonight, I will check in with everyone on how they are doing with both the research presentation and usability testing.

Assignment

3 of 3

Research Brief
Due Nov 3

Create an HTML document that includes answers to the following questions. Cite your work by providing links back to relevant pages.

  • Who are the thought leaders behind your topic?
  • Where did this topic originate? Who created or founded?
  • Where can information be found about your topic and what kind of information is it (exercises, forums, code repos, etc)?
  • What does the future hold for this topic? What are new developments
  • Review blog posts, API documentation, code sources, etc
  • Insights from your research

Balldroppings.com

Bonus Weapon of Choice by Fatboy Slim

Class 11 Description

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

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.

In-Class Exercise

Tonight, in your research groups, you will search for, investigate, and install a jQuery presentation plugin.

The following is no longer required:

Code Sample, hosted on GitHub or CodePen
Ready by Nov 17

Produce a code sample available on CodePen that explains how to implement your topic.
It should:

  • Demonstrate what’s possible with the tool or topic you’ve chosen
  • Be well-documented and thorough
  • Be code that your team has created
  • Contain a GitHub wiki with resources and information from your research brief

Usability Testing Assignment

Your Usability Testing assignment is due on Thursday, November 17.

Assignment

1 of 1

Overview Presentation
Give Nov 10
2.3 points

A 5-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.

Class 12 Description

This week we will have Overview Presentations.

Overview Presentations

A 5-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 of 2, you will perform user testing on three subjects for the University of Dallas website. Please complete the testing and upload the resources (videos, written reports, etc.) to eLearning by 7:00pm on Thursday, November 17.

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).

Man Nostalgic For Simpler Era Of 20 Hours Ago

Week 13 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

Tonight 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

Assignment

1 of 1

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.

Nothing to Hide

Fall Break: No Class

Next week will be lab time to work on your final projects and presentations.

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 Presentations & Final Project

A 10-minute HTML or JS-based presentation to the class on your research topic:

  • Remind them of your research topic
  • Who are the thought leaders behind your topic?
  • Where did this topic originate? Who created or founded?
  • Where is this being used? What purpose does it serve?
  • What does the future hold for this topic? What are new developments?
  • Be ready to answer audience questions about your topic.

You will be graded on:

  • Depth of research. Do you know what you are talking about?
  • Basic presentation skills. Have you rehearsed your talk, or are you reading the slides?
  • Slide design: Does it complement the presentation? Does it enhance what is being discussed, or compete with the speaker?

Resources

 

  • 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 2 points 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 4.

Final Project Evaluations Due: December 16, 11:59pm. 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;