Guest Lecture: JavaScript, Ajax & DOM Manipulation

Zach has asked me to give a JavaScript guest lecture in his Web Programming class. We’ll cover: JS basics, node manipulation, DOM traversal, AJAX, JavaScript libraries, and myPlymouth implementations of those topics. Here are the slides (get the .ppt here):

A few resources that are mentioned:

Note: this is an updated talk on the workshop I led two years ago

myPlymouth: Thanksgiving Theme

Thursday before Thanksgiving, users of the myPlymouth portal at Plymouth State were greeted by an altered header graphic similar to that of the Halloween theme I had done for the previous month.

This one, however, changed daily for 9 days. Here’s the sequence:

Thursday:
Thanksgiving in myPlymouth

Friday:
Thanksgiving in myPlymouth

Saturday:
Thanksgiving in myPlymouth

Sunday:
Thanksgiving in myPlymouth

Monday:
Thanksgiving in myPlymouth

Tuesday:
Thanksgiving in myPlymouth

Wednesday:
Day 7

Thursday (The flames flickered ever so slightly):
Thanksgiving Day

Friday – Monday:
Day 9

Now, once I finished that final graphic Dan approached me and made a funny request. He wanted a special little violent ending for himself. The thought of a custom final header for a few sketchy people sounded fun…so I obliged with this header that showed for a mere 5 people on campus:

Day 9 Alternate

In addition to the internal alteration of the header, I did another alteration on the login page for the Tuesday and Wednesday before as well as the Thursday of Thanksgiving. My pal, the turkey, showed up in place of the random image. Here he is:

Thanksgiving in myPlymouth

Overall, the header was well received be the campus feuling my desire to come up with something nifty for the coming holidays! A special thanks to Ken, Zach, and Dan for giving good content suggestions and allowing me to bounce ideas off them!

Plymouth State: JavaScript Workshop

Tonight I led a workshop on JavaScript for some PSU Employees. We discussed JS basics, node manipulation, DOM traversal, AJAX, JavaScript libraries, and myPlymouth implementations of those topics. Here are the slides:

A few resources that were mentioned:

myPlymouth: Halloween Theme

As I alluded to on my last post, on Halloween, Zach, Dan, and I unveiled a new feature in Plymouth State University‘s portal. Plymouth State will begin customizing the myPlymouth logo and/or the entire header withing the portal.

Using some snazzy CSS easter-egg functionality combined with some PHP, we can dynamically alter the look of the portal and target customizations to the entire campus, groups of people, or individuals. On Halloween, we customized and targeted the entirety of our user population with the following header theme. We changed this:

Default myPlymouth Header

To this:

myPlymouth Halloween Header

The Halloween theme was a surprise to the campus and received a number of good reviews and comments! The theme didn’t reduce the portal’s functionality, it simply gave it a nice candy coating to add a little flair. Overall, I’m pretty happy with the layout (which is actually made up of 7 images). Due to the excitement around the Halloween theme, the campus can be sure that more are coming!

As I mentioned before, targeting the entire campus is doable along with targeting groups of people and individuals. Needless to say the targeting capabilities of this can be exploited by…well…by me. And I’ve had some fun exploiting it, too! Here’s a couple of fun ones that I targeted at specific users:

This header was targeted at my manager, Ken:

myPlymouth: Ken

This one is targeted at Dee:

myPlymouth: Dee

Here’s one that I targeted at Dan and Zach:

myPlymouth: Lame

Fun times. So far, Dan, Zach, and I have some pretty sexy ideas for what can be done…ranging from minor tweaks to the logo (similar to the goofy ones I did above), to fully customized headers (like the Halloween one), all the way to full blown themes that customize a larger portion of myPlymouth. I look forward to getting creative with what I can draw and implement.

Art: Turkey Sketch

I’ve begun the design of custom headers for holiday themed portal action in Plymouth State University‘s portal. Here’s a quick turkey sketch I did with my Wacom tablet in preparation for a Thanksgiving themed header. I’m still a little undecided on what I plan to do with the header as a whole. I have a few weeks to figure that out, I suppose :)

Turkey

Guest Lecture: Application Design with Databases

I had the privilege of being a guest speaker at Plymouth State University’s Database Management class. The focus of the lecture was regarding Web Application Design and how it relates to database integration. Here are the slides that were handed out and for those curious, here’s the topics of discussion:

Topics:

  • My Background
  • My Project Background
  • Application Design Process
    • Analysis
    • Language Selection
    • Database Design
    • Interface Design
    • Development
    • The Sweet Stuff
  • Industry
    • Where it was
    • Where it is
    • Where its going
  • Stuff I’ve Learned
  • Suggestions

ITS Team Building Through Battle

Many thanks to Al, Erich, and Cliff for setting up another successfull ITS Paintball trip! Five ITS members participated – Alan Baker, Cliff Pearson, Erich Beyrent, Ted Wisniewski, and Me – along with Erich’s brother Geoff and my wife, Abby. The trip down was swell and our first few games were small (consisting of just the 7 of us). Teams were split up initially as such:

Team Fluffy Bunny:
Me, Abby, Geoff and Cliff
Team Squishy n00bs:
Al, Ted, Erich

I must say that Team Fluffy Bunny rocked the house until both teams were merged into one as more players joined in. A total of 19 games were played in 7 hours. I ended up sucking majorly halfway through the day getting no more than 2 kills a game (and often 0!).

Of all the players, though, Cliff shined through as the 1337 pwnz0r making all the n00bs cry in pain with his mad paintball skills. The rest of us did well (kill counts coming soon, perhaps), although Al, Ted, and Erich tended to last the longest in the later games…jerks.

We worked together, we killed together, and we died together…heck, there was a bit of team-killing going on to help us along with the dying part :) All in all, the day was a blast! We’re hoping for more numbers the next go-round…if you haven’t tried the sport, give it a go. Its an adrenaline rush…and; you get to rain paint down on your friends until they beg for mercy. What more could you ask for?

Luckily my wife was there to document some of the games with her spiffy new camera. Check out the gallery here. Here’s a few sweet samples:

Multimedia – Webpage Critiques

This assignment requires you to pick 3 websites and critique them (in a document and place them on WebCT) telling what you like/dislike; what the rules the site is breaking; what is usable/what isn’t; what it can do to improve. Obviously I’m not expecting you to jump right in without any background on what is considered good/bad design, so here are some resources:

Top Ten Web Design Mistakes (http://www.useit.com/alertbox/designmistakes.html)
Jakob Nielson is a Web Usability guru (despite the fact that his site is so ugly). Check out the above linked article as well as the other Top Ten Lists at the bottom.

Web Design From Scratch (http://www.webdesignfromscratch.com/basics.cfm)

  • This site is great as it details the process of design and the differences between sites that have focused on art and those that have focused on providing tools. There are a lot of sections (see the links on the right hand side of the page) that are all interesting.
  • Of particular not for this assignment:
    • “How people use web pages”
    • “Other online factors”
    • “The Design Spectrum”

Web Style Guide (http://www.webstyleguide.com/index.html?/pages/editorial_style.html)

  • The whole thing is a good read, but if you don’t want to read everything, Read Chapters 2 and 4 (they are short)

Here is what you need to provide for each site you choose to critique:

  • Provide the Web Address to the site.
  • Answer these questions: Why did you select the site? What interested you about this particular site?
  • Describe features of the site, including the following:
    • Overall theme or main subject for the website
    • Types of materials presented on the website (e.g. letters, diaries, photographs, illustrations, historical summaries, literature texts)
  • Answer these questions:
    • Is the information source trustworthy? How do you know?
    • Who is the website designed for? For example, is it intended to reach the general public, medical professionals, kids, older people, etc.? How do you know?
    • Is the website well-designed to reach that group of people? Why do you think so? Give specific examples (ie., vocabulary, ease of finding information, working hyperlinks, low-tech vs. high-tech video presentation [which is important if you’re calling in on a slow modem!!], visual ‘style,’ etc.)
    • Is the website easy to navigate? Why or why not?
    • Does the site design used by the site match well with the theme/subject and topics covered? (For instance, are the main buttons set up to correspond to key topics? Do the main sections of the website, as organized and presented, work together logically? If there are photographs, illustrations or graphics, do they complement/reinforce the theme effectively?)
  • Describe and critique other design elements of the website.
    • Is the visual display plan effective? (e.g., Is the site too cluttered/busy? Is there too much empty space?)
    • Are the font sizes and designs appropriate (e.g., attractive, easy to read)?
    • Does the website make effective use of color and spacing?
  • What can be improved, if anything?

Score sheet

Points Criterion
15 Web Address Provided as a link
10 Rationale for site selection
20 Description of site’s key features
20 Answers to the questions about: Audience, navigation, theme/topics, etc.
20 Critique of the design elements
15 Plan for improving the site
100 TOTAL

Multimedia Lab – Advanced Powerpoint Navigation

chimpanzee.jpgChances are, most of you have used Microsoft Powerpoint. For the class slides, simple presentations and such we only use the most basic features of the MS product. We are going to explore some of these features. The goal isn’t necessarily to expand our knowledge of Powerpoint but to experiment with some of the forms of navigation discussed in class.

The Scenario:
You are a scientist that studies chimpanzees. Last month you witnessed one or more chimpanzees do something that has never been done before. You were tasked with creating an application that details various aspects of that discovery…for some reason you chose Powerpoint as your tool.

Minimum Requirements:

  • Your application must make use of various forms of media. (text, images, etc) – 20pts
  • Your application must include at least 12 slides PLUS an additional notes slide that lists/describes the types of navigation used. – 20pts
  • Your application must utilize (at minimum) conceptual/modal navigation and hypertext. Other forms of navigation can be used as appropriate. – 25pts
  • Your application must not navigate as normal powerpoint slides navigate (i.e. advance on click). To get a starting point, read the instructions below. – 25pts
  • Use proper spelling and grammar. – 10pts
  • Be creative and have fun with the assignment! – Priceless

Setting Up Your Powerpoint Application For This Assignment:

  • With your powerpoint application open, click on Slide Show > Set Up Show….
  • In the Show options section, check the box: Loop continuously until ‘Esc’
  • In the Show slides section, check the From radio button and choose the start/end slides as appropriate to your application. (If your first slide is your contents where you begin all your navigation, then you’ll want the start/end boxes to be set to 1 and 1). Experiment.
  • …this is just a starting point. Explore the application and make it bend to your will.

Here’s a good reference for advanced PowerPoint stuff.

Handing in your Lab:
The lab is due next Friday at midnight. To hand it in:

  • log in to myPlymouth
  • click on the myCourses tab
  • click on the Multimedia course
  • go into the Assignments section
  • click on Lab 1
  • Browse to your powerpoint file in the form
  • Submit it

An Introduction to Multimedia

What is Multimedia? Multimedia is a combination of text, animated graphics, video, and sound delivered to you via some electronic means. We are immersed in it. Its what appeals to me for entertainment; for research.

As technology has progressed we have seen a convergence of both the presentation and study of Multimedia. Multimedia Lecture #1 will discuss this convergence and further continue the introduction with the discussion Multimedia Navigation and Usability.

Get the Class Slides here.

Check out this great resources:

Read this paper in preparation for our next class: Reducing Cognitive Load in Multimedia Navigation.

Multimedia Syllabus

Class: Multimedia (CS 3440)

Instructor: Matthew Batchelder
Office: Hyde 3rd Floor, ITS Offices
Phone: 535-2086
Office Hours: I am in my office most of the time between 8AM and 5PM. However, I will make sure I’m there if you call or email me ahead of time.
Email: mtbatchelder (AT) plymouth (DOT) edu
Required Text Book: Fundamentals of Multimedia, Ze-Nian Li, Mark S. Drew (publisher: Pearson Prentice Hall, ISBN: 0-13-061872-1)

Meeting Times and Places:
Tuesday: Rounds 207, 12:30-1:45.
Thursday: Memorial 213, 12:30-1:45 Lab.


Course Description:
Use and development of multimedia – combining text, graphics, sound, still and video images and animation into a unified, seamless document. Examines the nature of the various media, the capture or creation, digitalization and modification of each media type, the architecture and technology of multimedia systems, the principles behind effective multimedia presentations, analysis and design of GUI systems and multimedia development through the use of common software packages. Treats both the fundamental concepts and current and emerging technologies.

Course Goals and Objectives:

  1. Learn about the nature of text, image, audio, video, graphic and animation files.
  2. Learn about capturing the various media.
  3. Learn about creating, editing and storing the various media.
  4. Learn about digitization and compression and the role they play in multimedia.
  5. Learn about authoring tools for packaging multimedia systems.
  6. Learn about web-based multimedia and the special problems involved in delivering media over the WWW.
  7. Learn about effective graphical user interfaces.
  8. Learn to use a variety of common software packages to complete the above objectives.

Evaluation:
40% – Labs
30% – Quizzes
30% – Final Project

Grade Scale:
Grades will be assigned according to the following scale:
93-100 – A
90-92 – A-
88-89 – B+
83-87 – B
80-82 – B-
78-79 – C+
73-77 – C
70-72 – C-
68-69 – D+
63-67 – D
60-62 – D-
below 60 – F

Evaluation Items

  • Final Project: Every student will be expected to complete a semester project. The project will be presented to the rest of the class during the last week of classes and during the final exam period (which is Tuesday, May 16, 11am – 1:30pm). The project will comprise 30% of the semester grade.
  • Quizzes: There will be 4 hour-long quizzes. Of the four quizzes, only 3 will count toward the semester grade, with the lowest score of the four being dropped. These three quizzes and a final exam will comprise 30% of the semester grade (6% each). NO makeup quizzes will be given for any reason. If for some reason a student misses an quiz, that quiz will be his or her dropped quiz. The first section (11-11:50) of the final exam period will be used for project presentations. The quiz schedule is as follows:
    1. Quiz 1: Tuesday, February 21
    2. Quiz 2: Tuesday, March 28
    3. Quiz 3: Tuesday, April 18
    4. Quiz 4: Thursday, April 27
    5. Final Exam: Tuesday, May 16, 11am-1:30am (11-11:50 will be used for project presentations)
  • Labs: There will be a number of lab sesions throughout the semester. During the lab, we will meet in Memorial 213. During some of these lab periods, students will be expected to complete an exercise. These lab assignments will comprise 40% of the semester grade, with the lowest lab assignment grade being dropped. NO late labs will be accepted. If for some reason a student misses a lab, that lab will be his or her dropped lab.

Attendance Policy:
Attendance will not be taken in class or lab. However, every student is responsible for everything covered, even if it is not in the text.

Academic Honesty:
Issues of copyright and attributing original sources are particularly important in this course. These topics will be covered in this course, but it is important to realize from the first day of this course that you must accurately represent work that you have created originally versus work that consists of elements from other authors/creators. A safe guideline is to very clearly attribute the work of others, and use content from other people sparingly in your own work. I reserve the right to individually question students about their homework assignments and labs to have the student explain his or her answers to me. If you are unable to explain your answers when I ask, you will not be given credit for the assignment or lab. Such a situation constitutes plagiarism and you are referred to the Student Handbook for a description of the possible consequences of such academic dishonesty.

Tentative Schedule:

Week Date Topic Assignment
week 1
January 30
Ummm…hello to you.  (omghi2u)
Read Chapter 1
February 2
Introduction to Multimedia Read Handout (Navigating the Digital Vista)
week 2
February 7
Introduction to Multimedia (cont.) Read Lab Handout
February 9
Lab – Versatile Powerpoint Navigation
Read Handout (Chapter 7-10 excerpts)
week 3
February 14
File Compression
Read Lab Handout
February 16
Lab – Compression

week 4
February 21
Quiz
Read Handouts (Chapter 3-4 excerpt & Web Usability)
February 23
Images, Color, & Web Usability
Meet in Memorial. Read Handout (Web 2.0)
week 5
February 28
Web 2.0
Read Lab Handout
March 2
Lab – Webpage Usability
Meet in Memorial 213; Read Handout (Chapter 6 excerpt)
week 6
March 7
Basics of Digital Audio
Read Lab Handout
March 9

Meet in Memorial 213;
week 7
March 14
Audio & Project Planning Read Handout (Project Planning, Delivery, & Presentation)
March 16
Quiz Read Handout (Chapter 2 excerpt)
week 8
March 21
No Class
Spring Break – Develop Project Idea
March 23
No Class/Lab Spring Break – Develop Project Idea
week 9
March 28
Animation & Authoring Software
Read Lab Handout
March 30
Lab – Flash
Meet in Memorial 213;
week 10
April 4
No Class

April 6
No Class/Lab (Work on your Flash Lab)
Work in Memorial 213 (if needed)
week 11
April 11
Quiz
Read Handout (Chapter 5 Excerpt)
April 13
Video

week 12
April 18
Flash Help & Video Slides
Read Lab Handout
April 20
Lab/Project Assistance
 
week 13
April 25
Legal & Ethical Issues/Presenting Your Project

April 27
Quiz

week 14
May 2
Work on Project
May 4
Work on Project

week 15
May 9
Presentations

May 11
Presentations

week 16
May 16
Presentations & Final Exam (11am-1:30pm)

Web Expressions – Lab 2 – Webpage Critiques

Sorry guys. I said I’d get this up yesterday but I forgot :P Here are the Instructions for Lab 2: Webpage Critiques…or if you don’t want to dowload that, here they are:

————————————————

This assignment requires you to pick 3 websites and critique them (on your blog) telling what you like/dislike; what the rules the site is breaking; what is usable/what isn’t; what it can do to improve. Obviously I’m not expecting you to jump right in without any background on what is considered good/bad design, so here are some resources:

Web Usability Studies (http://mlcnet.org/workshop/mla-events/LTD11-01-Instone/)
This is a slide show…quick to read, very helpful for this assignement!

Web Design From Scratch (http://www.webdesignfromscratch.com/basics.cfm)

  • This site is great as it details the process of design and the differences between sites that have focused on art and those that have focused on providing tools. There are a lot of sections (see the links on the right hand side of the page) that are all interesting.
  • Of particular not for this assignment:
    • “How people use web pages”
    • “Other online factors”
    • “The Design Spectrum”

Web Style Guide (http://www.webstyleguide.com/index.html?/pages/editorial_style.html)
• The whole thing is a good read, but if you don’t want to read everything, Read Chapters 2 and 4 (they are short)

Here is what you need to provide for each site you choose to critique:

  • Provide the Web Address to the site.
  • Answer these questions: Why did you select the site? What interested you about this particular site?
  • Describe features of the site, including the following:
    • Overall theme or main subject for the website
    • Types of materials presented on the website (e.g. letters, diaries, photographs, illustrations, historical summaries, literature texts)
  • Answer these questions:
    • Is the information source trustworthy? How do you know?
    • Who is the website designed for? For example, is it intended to reach the general public, medical professionals, kids, older people, etc.? How do you know?
    • Is the website well-designed to reach that group of people? Why do you think so? Give specific examples (ie., vocabulary, ease of finding information, working hyperlinks, low-tech vs. high-tech video presentation [which is important if you’re calling in on a slow modem!!], visual ‘style,’ etc.)
    • Is the website easy to navigate? Why or why not?
    • Does the site design used by the site match well with the theme/subject and topics covered? (For instance, are the main buttons set up to correspond to key topics? Do the main sections of the website, as organized and presented, work together logically? If there are photographs, illustrations or graphics, do they complement/reinforce the theme effectively?)
  • Describe and critique other design elements of the website.
    • Is the visual display plan effective? (e.g., Is the site too cluttered/busy? Is there too much empty space?)
    • Are the font sizes and designs appropriate (e.g., attractive, easy to read)?
    • Does the website make effective use of color and spacing?
  • What can be improved, if anything?

Score sheet

Points Criterion
15 Web Address Provided as a link
10 Rationale for site selection
20 Description of site’s key features
20 Answers to the questions about: Audience, navigation, theme/topics, etc.
20 Critique of the design elements
15 Plan for improving the site
100 TOTAL

Web Expressions – Week 3

Alrighty. This week:

Here are our slides: Week 3: Internet Stuff

Wednesday Lab: You will be evaluating some websites…more to come on lab day ;)

Friday: You will need to brush up on the following topics (i.e. read the following articles):

Do your blog posts!

Web Expressions – Blog Spotlights

I was reading over all of your blogs today and came accross one that I think has a very interesting topic that warrants some response and comments. Check out “Russo’s Blog” and her post about “School Life.” Read it, comment on it…get a discussion going. Perhaps use that to fuel a post on your blog as well.

If you are into Football and want some sweet info on the recent Pats game, check out these blogs:

The End Zone
mbegalle’s personal blog

As the semester moves on I will spotlight various people. There are a lot of good blog posts out there, but on occasion I’ll just handpick a couple that catch my eye or just to push people to read others’ blogs. (you see, reading blogs is just as important as posting them!) Try to find a couple that interest you and watch them. Post responses in their comment sections. Post responses in your blog that quote them! Lets get some social networking going :D