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 – Flash (Lab 2)

This week’s lab (which is due 04/14) is more free-form where you have the opportunity to really explore Flash and see what it can do. With this lab, you’ll experiment with more complex animations. I highly suggest you do the flash tutorials that come with the application – you can find them by clicking on the Help menu. In addition to working with nicely timed animations, you will be scripting in Flash’s ActionScript.

Create a navigation page (similar to a DVD menu) that allows the user to choose from at least 5 buttons/icons/links. Four of these icons should send the user to 4 separate animations (complete with sound). The 5th icon, when clicked, should send the user to my blog BorkWeb.com. At the end of each animation, give the user a navigation menu allowing them to view the other animations or return to the first screen. The 4 animations should be more in-depth than what we did with the previous Flash lab and can include graphics from other sources (i.e. you don’t need to do all the image creation right in flash…you can get pictures or make your own in Photoshop). Here are some animation suggestions:

  • Two balls that bounds around a room, bouncing off of each other.
  • A presidential spoof
  • A kid being attacked by a giant mosquito
  • A monkey dancing across the screen
  • ….be creative

You can add to the above requirements to suit your needs (but don’t detract from them). Have fun with this one. Here are some suggested sources for learning about more complex Flash animations:

  • Here are some simple tutorials at W3 Schools
  • Flash Kit has an awesome set of tutorials on a crap ton of topics

Now, in order to create the menus and navigation; stopping and starting movies and playing from various locations needs to be done with some ActionScripting. Here are a few resources to get you started:

  • ActionScript.org has some great tutorials on ActionScripting
  • Here’s some documentation very similar to the Java API
  • Check the help in Macromedia Flash (the application for simple start() stop() and loop() commands for controlling the movie)

And don’t forget about the quiz next Tuesday (4/11)

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