myPlymouth: Thanksgiving Theme
November 28, 2007 | 3 Comments
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:
Friday:
Saturday:
Sunday:
Monday:
Tuesday:
Wednesday:
Thursday (The flames flickered ever so slightly):
Friday - Monday:
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:
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:
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
November 11, 2007 | 1 Comment
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
November 2, 2007 | 4 Comments
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:
To this:
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:
This one is targeted at Dee:
Here’s one that I targeted at Dan and Zach:
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
November 1, 2007 | 6 Comments
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 :)
Guest Lecture: Application Design with Databases
December 4, 2006 | 2 Comments
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
May 7, 2006 | 7 Comments
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)
April 4, 2006 | Leave a Comment
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 one for looping backgrounds
- Here’s one on working with variables
- Here’s one on drag n’ drop
- 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 - Animation and Authoring Tools
March 28, 2006 | Leave a Comment
Today we’ll be discussing Animation and Authoring Tools in preparation for our lab on Flash w/ ActionScripting!
Multimedia - Audio and Project Planning
March 14, 2006 | Leave a Comment
Today we’re discussing Audio briefly, then we’ll move right in to Project Planning…which prepares you for checking out the Final Project document!
Multimedia - Webpage Critiques
March 2, 2006 | Leave a Comment
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 - Images, Color & Web 2.0
February 28, 2006 | Leave a Comment
We are covering a lot of topics today and thus our slides may bleed over into next week. We’ll begin with Images & Color. Then move on in to Web 2.0, which we’ve talked about in the past.
Multimedia - Compression
February 16, 2006 | Leave a Comment
Today we’ll be discussing Compression. Here are the slides.
Here’s the assignment for this week. Its due next Friday at midnight!
Next Tuesday: Quiz (everything we’ve covered thus far)
Multimedia - Navigation
February 7, 2006 | Leave a Comment
This week is a simple continuation from last week. We’ll be discussing Multimedia elements and navigation. Here’s the slides.
Reminder: We have lab on Thursday, so we meet in Memorial. I will be posting the lab assignment on this blog before lab.
Multimedia Syllabus
January 31, 2006 | 1 Comment
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:
- Learn about the nature of text, image, audio, video, graphic and animation files.
- Learn about capturing the various media.
- Learn about creating, editing and storing the various media.
- Learn about digitization and compression and the role they play in multimedia.
- Learn about authoring tools for packaging multimedia systems.
- Learn about web-based multimedia and the special problems involved in delivering media over the WWW.
- Learn about effective graphical user interfaces.
- 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:
- Quiz 1: Tuesday, February 21
- Quiz 2: Tuesday, March 28
- Quiz 3: Tuesday, April 18
- Quiz 4: Thursday, April 27
- 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:
|
Script.aculo.us Is My New Best Friend
December 18, 2005 | 22 Comments
Ajax is great. DOM manipulation is sexy. I'm fairly new to the Ajax world having only developed with with it since July. MasterWish was my guinea pig and continues to be my playground for all things Web 2.0. Luckily, my manager Ken is pumped up about this whole Web 2.0/Ajax thing which has allowed me to experiment with my projects at work as well and PSU should expect to see some sweet apps roll out over the next year!
Since July, I've been developing my Ajax applications and examples using SAJAX (Simple Ajax), a PHP/Javascript framework for Ajax development. It was great at first glance...a lot easier than building Asynchronous Javascript transactions from scratch. But despite its ease, it was a bit clunky. Last week I was stumbling around the web looking for anything new to suck up and found a beauty of a tool. Script.aculo.us.
Script.aculo.us is a Javascript Effects and Control framework developed by Thomas Fuchs, a software architect living in Vienna, Austria who, like me, was disappointed by current web application frameworks that made no sense to him. His framework is 3 things: Easy to Use, Simple, and Easy to Use. His libraries - built off of the Ajax framework, Prototype - blow SAJAX out of the water! Let me give you an example to, say, update a news title on an article (I won't include the HTML markup as that is trivial):
Here's what needs to be done to build a SAJAX call:
Step 1: Create a SAJAX Call Function
-
function x_updateTitle()
-
{
-
sajax_do_call('/process_ajax.php',"x_updateTitle", x_updateTitle.arguments);
-
}
Step 2: Create a server side function to handle the update
-
<?php
-
function x_updateTitle($news_id,$news_title)
-
{
-
//do some database calls to update the title;
-
}
-
?>
Step 3: Edit the server side SAJAX file (process_ajax.php) and add x_updateTitle to the list of valid call functions
-
<?php
-
include('sajax.php');
-
addFunctions('x_updateTitle');
-
handleClientRequest();
-
?>
Step 4: Call the SAJAX Javascript function from somewhere (in an onClick, onSubmit or something)
-
<a onClick="x_updateTitle(1, document.getElementById('news_title').value, 'callbackFunction');">asdfdf</a>
Here's the equivalent in Script.aculo.us
Step 1: Create a server side function to handle the update
-
<?php
-
function x_updateTitle($news_id,$news_title)
-
{
-
//do some database calls to update the title;
-
}
-
?>
Step 2: Call the Script.aculo.us Javascript function from somewhere (in an onClick, onSubmit or something)
-
<a onClick="new Ajax.Request('/process_ajax.php', { asynchronous:true, parameters:'news_id=1&news_title=$(\'news_title\')', onSuccess:callbackFunction });">asdf</a>
Thats it! Its a big difference. Thats just the tip of the iceberg. Script.aculo.us has many features for implementing Drag and Drop with one line of Javascript code; fancy display/hide functions; dynamic DOM Element creation/deletion; field autocompletion; and various other visual effects. It slick. And to top it off, the Script.aculo.us website is pretty sweet! Luckily the documentation is excellent and is in wiki format. As Plymouth State moves into the Web 2.0 world, I'll be pushing for Script.aculo.us/Prototype to be our Ajax standard. I have seen the light and it is good.
