ATCM 3335.001 - Internet Studio 2

Course Outline

Class 1 Description

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

Getting Started Describe yourself in HTML

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.

Careers in Web Development A place for everyone

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.

 

Midterm Project Due: Tuesday, March 23, 2018 by 7pm.

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.

 

Semester Project & Presentation Due: May 1, 2018, at 8:00pm.

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

 

Just for Fun Jack is a dull boy with all work and no play.

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.

Getting Started HTML is the language of love

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.

Just for Fun Dilbert's opinion on user testing.

Class 3 Description

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

Getting Started HTML is the language of love

Cheat Sheets

 HTML5 Cheat Sheet

 Javascript Glossary

 Javascript Operator Reference

 CSS3 Cheat Sheet

 30 Selectors You Must Memorize

 HTML/CSS/JavaScript Tools & Libraries

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

User Experience (UX) Myths Bogus but nonetheless popular

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.

Just for Fun Jack is a dull boy with all fun and no play.

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.

Getting Started Conjunction Junction, what's your function?

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

 HTML5 Cheat Sheet

 Javascript Glossary

 Javascript Operator Reference

 CSS3 Cheat Sheet

 30 Selectors You Must Memorize

 HTML/CSS/JavaScript Tools & Libraries

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.

 

User Experience (UX) Design Knowing when to break the rules.

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.

Midterm Project Design/Redesign a non-profit website.

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.

Just for Fun Don’t ask questions, just click the cookie!

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

Getting Started CSS is stylin',  JavaScript behaves.

Today's Class

 CSS

  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

Domain Registration Grabbing Your Identity

Required Reading

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.

Just for Fun Jack is a dull boy with all fun and no play.

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.

Getting Started   JavaScript makes the web behave.

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

  Font Awesome

Resources

Javascript


Icons


HTML5 Frameworks Why recreate the wheel?

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.

Midterm Project Design/Redesign a non-profit website.

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.

Just for Fun How to Break the Rules.

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.

jQuery Write Less. Do More.

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.

 Font Awesome Icons. Easy. Done.

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.

HTML5/CSS Frameworks Why recreate the wheel?

Just for Fun Best with Headphones.

Find the Invisible Cow

Class 8 Description

This week we will make pages come alive with jQuery events, animations, and effects. We will also look into HTML5 frameworks

jQuery Write less. Do more.

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

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

Download the Sample Page Starter Kit and use your own colors, fonts, and background images to make a very spring-like 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 spring-like background images.
  • Choose among the Google WebFonts two fonts that are springy, light & happy.
  • 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.

Wireframing & Prototyping Laying it all out & setting it all up.

We will learn how to rapidly prototype layout ideas in HTML using HTML Kickstart, a modular HTML, CSS and JavaScript kit.

Prototyping is an essential technique to explore a range of possibilities and interactions with little commitment to one concept or idea.

  • Low fidelity (lo-fi) prototyping techniques include drawing on napkins, paper or in a sketchpad.
  • Medium fidelity prototypes are built in HTML and simulate the interactivity of a website without the details.
  • High fidelity prototypes are designed in Photoshop, Illustrator or a graphic design application and are a pixel-perfect illustration of what the end product will look like.
  Lo-Fi
Quick 'n dirty		 Mid-Fi
Spartan yet interactive		 Hi-Fi
Robust 'n shiny
Examples Pencil and paper HTML Kickstart, Twitter's Bootstrap or other framework Photoshop or similar graphics application
Pros Rapid iteration, no commitment to one design Interactivity easily understandable Typically robust, highly polished
Cons Lacks detail, needs refinement Unrefined, stark Time-intensive, little room for alternate development

Assignment

2 of 2

Using your framework of choice, prototype the homepage of your Midterm assignment. Make sure you use the framework's grid system to scaffold the layout & include the basic UI elements of your homepage. Color and font styling is not necessary.

Upload the entire folder to your site and send the link to E-learning.

Midterm 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

4 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

4 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

4 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;

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

Credibility

1 point
Contact/copyright information is not shown on any pages. No social media or external sites referenced.

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

4 points
Contact/copyright information is included on all pages (at least an email address or phone number). Appropriate social tags are displayed.

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

Just for Fun A mysterious use of HTML, CSS, and JavaScript.

The Black Brick Road of OZ

Spring Break: No Class

 

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.

jQuery Write less. Do more.

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.

Bonus Design Showcase: Brutalist Websites

"In its ruggedness and lack of concern to look comfortable or easy, Brutalism can be seen as a reaction by a younger generation to the lightness, optimism, and frivolity of today's web design." - Brutalist Websites

Assignment

1 of 1

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.

Midterm Project - Due: March 20, 2018, at 7:00pm

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.

Midterm 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

4 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

4 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

4 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;

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

Credibility

1 point
Contact/copyright information is not shown on any pages. No social media or external sites referenced.

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

4 points
Contact/copyright information is included on all pages (at least an email address or phone number). Appropriate social tags are displayed.

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

Just for Fun Let's get retro.

Cube Slam

Class 10 Description

Presentations!

Midterm Project - Due: March 20, 2018, at 7:00pm

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.

Midterm 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

4 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

4 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

4 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;

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

Credibility

1 point
Contact/copyright information is not shown on any pages. No social media or external sites referenced.

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

4 points
Contact/copyright information is included on all pages (at least an email address or phone number). Appropriate social tags are displayed.

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

1 of 1

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

Just for Fun An anti-stealth game!

Nothing to Hide

Class 11 Description

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

Web Forms How to make them interactive with jQuery.

Class Notes

Lesson

Download Form Lesson Here

Resources



Assignment

1 of 1

Create a Mad-Lib style web form.

Download the jQuery Madlib Assignment Folder

Follow the instructions on the instruction sheet.

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

Just for Fun You Need to Watch This!

Class 12 Description

This week we will get introduced to jQueryUI.

jQuery UI Expanding Your Interface.

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 2

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

2 of 2

Download the jQuery Page Starter Kit and use jQuery UI to make an interactive protest webpage. You may protest an important issue, or one that makes no sense whatsoever and is downright silly.

  • You must use the following jQuery UI elements:
    • Dialog Box
    • Tooltips
    • Tabbed Panel or Accordion
    • Vertical Menu (optional)
  • Switch out the lorem ipsum text for your chosen protest content.
  • 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, place it in a folder named asg10, upload to your server, link to it from your assignments page and upload the link to eLearning.

 

Final Project Presentations May 1

  • 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: May 3, 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

jQuery UI Expanding Your Interface.

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 2

Read Chapter 13: Introducing Ajax

2 of 2

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.

Just for Fun I would change the key combos.

Rock, Paper, Scissors

Bonus:  The Time Sotheby's and Christie's Played 'Rock, Paper, Scissors' for a Cézanne

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.

Class 14: Introducing Ajax

This week we will look into the wonders of Ajax.

Ajax: The Basics
Ajax the jQuery Way
JSON

Resources

MAMP Personal Server for Mac
MAMP Personal Server for Windows (Beta)

Lesson Download

Assignment

1 of 1

Using the lesson we created tonight, create a webpage with 2 or more Flickr groups or feeds of your choice. You must also have an appropriate color pallette, Google Fonts and background images to your subject matter.

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

Just for Fun This is What Happens When You Reply to Spam Email.

Final Project

 

Final Project Presentations May 1, 2018 at 8:00pm

  • 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: May 3, 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;