Due to the shift in my work, the focus of dabrook is now more on web design curriculum and resources for other web educators than it is for current web students.  Old courses are still archived, and online courses with quizes, assignments, and badges will be coming soon, but I still have to refine the mobile experience a bit more before I start adding more functionality to the site.

For the records, here is what last year's design looked like, with it's 2011 Student Web Conference insipired graffiti background.

And here is what we have for 2012.

The new look is a little more mature, since it's catered to web educators.  The header of the site is also now sporting a rather large advertisement for the Student Web Hosting Company, which is a for-profit partner of DaBrook.org.

I tihnk that the new design met my goals to make DaBrook look a bit more professional than fun and have more static resources for educations like curriculum, as opposed to current course content.

1. Steps in building a web site
2. Jobs in the field
3. How much money you can make
4. Work in the field I have done

I think it all came together well in the presentation below:

I have to say that since taking a hiatus from the classroom, I have enjoyed the break.  Teaching is a lot of work. But it is also so rewarding! Being around young people excited about doing creative work on the web is one of the best feelings ever.  Thanks again to Mr. Sell and the web students at Clarksburg High School for having me! 

I decided that the best thing to do would be create a series of free courses based on the Web Standards Project Education Task Force Interact Curriculum.  The Interact Curriculum is an open-source curriculum designed to provide web programs with a solid foundation for designing web programs and courses.

Starting in January of 2012 I will be archiving my old courses and releasing the following ones below.  More details about the courses will follow,  but I wanted to take a moment and release the roadmap I will be following for making these courses available.

Note 1: The CMS courses are not ones that I will developing and are not part of the Interact framework.
Note 2: There is also a roadmap for a UX Designer track that is not shown above.

Back in June, Viget Labs hosted my Free ExpressionEngine Workshop.  At the time, I had planned to sell a video of the workshop that included a combination of live footage of me lecturing edited in with separetly recorded screencasts of the hands on activities we did building the Freelance Portfolio site.  Instead I have decided to take the screencasts, which were a solid course in themselves, with clear explinations and step by step instructions, and pull them all together in a free online course.  

You can find the Free Online ExpressionEngine Course live now under Courses > ExpresionEngine.

I have not done a completely online course before so I am interested for folks feedback about how to bring more of the classroom environment into an online video course, so please let me know what you think!

The brief poll below is something that I drew up to help me (and the team) get a better understanding of how would students like to see social features added to Blackboard.

Course name: DOM Scripting 1 (or JavaScript 1)

Course overview:  In this introduction course students learn the fundamentals of working with the behavior layer on the web using JavaScript.  Students will learn basic programming, the principals of unobtrusive and cross browser scripting, how to navigate and manipulate the DOM, and how to use JavaScript libraries to improve development.  Requirements: CA272.

Required Reading: Scriptin with JavaScript from New Riders

Course Outline:

1. What is JavaScript
   1. Characteristics of the language
   2. Examples of what it can do
   3. How to add to web pages
   4. Hello World 
   5. Error testing
2. Variables and Arrays
   1. What is a variable?
   2. Types of variables (loosely v. strictly typed)
   3. Converting between variable types
   4. What are arrays?
   5. Types of arrays
3. Objects and Functions
   1. What is an object?
   2. How to create objects  
   3. What is a function?
   4. How to write and call a function
   5. Passing parameters to functions
   6. Attaching functions to objects (methods) 
4. Conditionals and Loops
   1. If, else, else if
   2. While loop
   3. For loop
   4. Less common loops: for in, try catch, throw
   5. Looping through arrays
5. The DOM
   1. What is the DOM?
   2. Understanding how to navigate the DOM
   3. Native JS ability to get elements in the DOM 
6. Midterm - Write a form validation function
7. jQuery Selectors
   1. What is jQuery?
   2. How to select elements in the DOM with jQuery
8. Events
   1. Types of events on a web page
   2. Native JS ways to act on events
   3. jQuery way to work with events
9. Manipulating the DOM
   1. What is possible to change in the DOM?
   2. Examples of DOM manipulation
   3. How to manipulate the DOM
10. Timing
    1. Native setTimeOut() function
    2. jQuery delay 
11. Animation
    1. Discussion of good v. bad animations
    2. jQuery animate() function
    3. jQuery animation effects
12. Cookies
    1. What is a cookie
    2. How to use cookies
    3. jQuery cookie plugin 
13. Regular Expressions
    1. What is a regx?
    2. Syntax for writing regular expressions
    3. Email validation example
14. In depth project
    1. Either form validation
    2. Or slideshow
15. Final

Semester 2

Course name: DOM Scripting 2 (or JavaScript 2)

Course overview:  In this advanced course students learn the how to build Rich Internet Application using JavaScript and jQuery.  Students will learn principals of interaction design, best practices for programming JavaScript, and how to use effectively use AJAX in an application.  Requirements: CA272 and CA276.

Required Reading: jQuery: Novice to Ninja from Sitepoint

Course Outline:

1. Rich Internet Applications
   1. What are RIA?
   2. The role of JavaScript in RIA
   3. Examples of RIA 
   4. What happens with no JavaScript?
2. JavaScript Review
   1. Cover the basics of the langauge
   2. Review of events in JavaScript
   3. Brief review of important principals from JS1
3. jQuery Review
   1. Comparison with other JS Libraries
   2. Selecting elements
   3. jQuery events
4. Interaction Design (ID)
   1. What is ID?
   2. Important principals
   3. Good and bad examples
5. Designing a User Interface Project
   1. Overview of the demo application
   2. Plan behaviors for design of the application interface
   3. Cover necessary logic and functionality for planned behaviors
6. Midterm - Create an interactive web application interface
7. jQuery Plugins
   1. What is a plugin?
   2. How do they work
   3. How to build a plugin
8. jQuery Plugins continued
   1. Types of jQuery plugins
   2. Practice implementing  
9. jQuery UI Library
   1. What is the UI Library
   2. How to add it your site
   3. How to customize library elements
10. Extending the User Interface Project with jQuery Plugins
    1. Plan behaviors
    2. Discuss how to implement necessary plugins
11. AJAX
    1. What is AJAX
    2. AJAX with native JS
    3. AJAX with jQuery
12. AJAX continued
    1. AJAX load
    2. AJAX get
    3. AJAX callbacks
13. Server side programming
    1. What is it?
    2. Cover basics needed to get AJAX working
    3. Talking to the server side
    4. Listening to the server side
14. JSON v. XML
    1. What is JSON
    2. What is XML
    3. JSON v. XML
    4. How to parse JSON 
15. Extending the User Interface Project with AJAX
    1. Discuss how AJAX can improve the interface
    2. Plan behaviors
    3. Cover necessary logic and functionality
16.  Final - Submit final interface projects

About Blackboard and My New Position

Most people know Blackboard as the online software professors use to post information about classes.  This is what Blackboard, the company, calls it's "Learn" Platform, and it is the worlds largest and most used Learning Management Software (LMS).  As a company, Blackboard is also behind a number of other education technology platforms - from video conferencing software and analytics systems to swipe card payments and campus surveillance systems.  

Those who have used Blackboard (the LMS) also know that it is not particularly sexy, or intuitive.  In fact, it kinda sucks.  A lot of the work I did for my masters thesis had to do with how much of a negative impact bad design in applications like Blackboard has on students' willingness to engage in online learning.

So why go to work for them?  

Well, Blackboard has recently geared up it's User Experience (UX) team.  They have done some great work in separating the Java, logic layer of the application from the HTML/CSS/JS front-end, made some strong commitments to improving the UI of the application, and even dropped support for IE6.  When I heard this, and saw some of the cool work the team was doing with new releases I knew I would have an opportunity to make a big difference on the look, feel and function of this software that every college student and professor seems to have to use, yet noone likes.

I've always toyed with the idea of going to work as a web designer full time, and the opportunity to join the UX team at Blackboard just felt right.  

Officially, I will have the title of "Experience Designer."  As I understand it, my job will mostly entail the following:

1. Listen to ideas for new requests from users, market research, and the Bb team
2. Brainstorm, sketch, and prototype how the features will look and function
3. HTML, CSS, and JavaScript up some sweet sweet interaction 
4. Do my share of bug fixes on already released versions of the software

It sounds like I will also have a chance to focus particularly on the design and interaction of the gradebook module.  It's funny to me because entering grades was definitely my LEAST favorite thing about teaching.  However, I've built my own gradebook before and think I have some ideas on how to make grading more enjoyable for teachers.

I really like that the position will give me a creative outlet as an idea's man, while still allowing me to improve my JS skills.  That combined with the fact that I'm doing much needed work on the worlds largest piece of education software makes me feel like I'm not selling out completelty in leaving the classroom.  It was very important to me in the process of leaving the high school classroom to work full time as a designer/developer that I didn't stray too far from the education field.

Still a Webucator at Heart and in Practice

Five years ago I set myself the goal of building a four year web program at Springbrook.  Although there are so many more things that I could do with the program, I feel that I have succeeded.  We have a web design class, web development, paid and unpaid internships, and the annual Student Web Conference. As far as I know, there's not a high school in the world that has a better web program.  

What I would love to do next is build a four year web program at the University level.  For a number of reasons, I do not see this happening for some time: I'm giving myself ten years.  In the meantime I plan to adjunct at as many colleges and universities as I can to get a better field for the current state of higher ed web design and development courses.  

I will also continue to run workshops on CMS development, produce the Required Listening show, and publish tutorials for web students.

Behind the scenes I am going to be putting a lot of thought into how to effectively build a higher ed web program.  There are important questions like pedagogically how do you structure learning and assessment, administratively how do you find and keep good teachers, and content wise how do you create a program that teaches the standards without becoming outdated.  

Working at Blackboard will allow me to still keep a foot in the door in the educational world while at the same time finally letting cut loose with being a full time designer.  Having some corporate experience and higher ed contacts shouldn't hurt either.  All in all, I hope to come out of the position ready to build an amazing four-year higher ed web program.

Thanks to all of the people who have made my work at Springbrook possible and so rewarding.  I won't forget you!

Demo: http://dabrook.org/examples/labs/product-image-switcher/

The Markup

I won't get into the markup for the entire example, but rather focus on the image switcher part of it.  Since the entire product is wrapped in a article tag, it made sense to use an aside tag for the image switcher.  Here is the code:

<aside class="preview">
	<img alt="Alt title of image" height="220" id="main" src="images/shoe-inside.png" width="300" />
	<nav>
		<a href="images/shoe-inside.png"><img alt="Side of the shoe" height="73" src="images/shoe-inside.png" width="100" /></a>
		<a href="images/shoe-front.png"><img alt="Front of the shoe" height="73" src="images/shoe-front.png" width="91" /></a>		
		<a href="images/shoe-back.png"><img alt="Back of the shoe" height="73" src="images/shoe-back.png" width="91" /></a>		
	</nav>
</aside>

You'll notice that I'm using the same image for the thumbnail and the main image.  Using separate thumbnail images could be easier and faster, but I found using the same image worked fine.

Fallback for no JS

If JavaScript is disabled our navigation will obviously not work.  We could display three full sized images stacked vertically down the left hand side.  Or we could just remove the switcher nav completely.  I went with the second option.  

By setting the entire switcher <nav> to display: none we will just remove nav by default and use jQuery's .show(); function to make the nav display on page load.

The CSS

The styling for the switcher section is pretty simple, with a little CSS3 easing and size transform for a little extra interaction.

img#main {
	border: 1px #ccc solid;
	padding: 2px;
	margin: 10px;
}
nav {
	display: none;
	margin: 0 10px;
}
nav a {
	border: 1px #ccc solid;
	padding: 2px 2px 0;
	display: block;
	float: left;
	margin: 2px;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;	
	transition: all .3s ease-in-out;		
}
nav a:first-child {
	margin-left: 0;
}
nav a:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);	
	transform: scale(1.1);				
}
nav a.active {
	background: #FEFFC0;
	border-color: #ECD95C;
}

The JavaScript

Finally we can add the interaction layer.  At the basic level, what we are going to do is take the href value for the nav image and make it the src value for the main image.

When I had the image switch with no easing or animation, it seemed a little too abrupt. So, I used the jQuery animate() function to fade the previous image to a lower opacity, switch the image, and then fade it back to full opacity.  It isn't the smoothest transition ever, but it will do :)

Here's the JS code:

$(document).ready(function() {
	$("aside.preview nav").show();
	var previewImg = $("img#main");
	$("a:first").addClass("active");
	$("nav a img").click(function(){
		var link = $(this).parent();	
		var linkHref = link.attr("href");			
		var linkAlt = link.attr("alt");			
		if( $(link).hasClass("active") == false)
		{
			$("a").removeClass("active");
			link.addClass("active");											
			$(previewImg).animate({
				opacity: 0.8,
			}, 300, function() {
				previewImg.attr("src", linkHref);
				previewImg.attr("alt", linkAlt);				
				$(this).animate({
					opacity: 1,
					}, 300
				);							
			});			
		}
		return false;
	});
	$("input").click(function(){
		$("p.more").fadeIn("slow");
	})
});

Download

Feel free to use on your own sites if you ever need a product image switcher.  

View the demo or download a .zip

Originally, I had planned to do an online ExpressionEngine course.  However, with the announcement of the new EE video tutorial community partner, Creat-EE, I had to admit to myself that I do not have the time or resources to compete in the market of polished, post-produced, online videos, recorded in a studio setting.  The ExpressionEngine training market is expanding and with people like Michael Boyink and Erik Reagan from Train-EE doing high quality (and high priced) workshops, it was clear I had to put some thought into what my niche would best be in the market.

After some thinking and brainstorming with former students, I decided that small, personalized, college class-room style workshops are what I do best.   

Why Free?

First and foremost, I want to give back.  Having a free class removes a large barrier to entry for web students and freelancing professionals who don't have a large budget for professional development.

Second, a former student and video enthusiast has offered to record the workshop and produce a short video series from the day.  We will have this available for sale on DaBrook after the workshop for $49.  The money will go directly to this student, and in a way will hopefully help compensate him for the amazing work he did recording and getting online the entire semester of my Advanced Web Design class.

Since we will be selling the video of the workshop, I thought it would be a nice treat to offer a few lucky folks a chance to attend the workshop for free.  The number of 20 attendees was set due to space limitations at Viget Labs, who has graciously agreed to host the event.

Apply to Attend

Since there are only 20 seats available, we will have an application process.  All you have to do to enter is say why you want to attend the free workshop.  Applications will be accepted until Friday, June 3rd and winners will be announced Monday, June 6 2011.

The first batch will mostly go to a batch of recent speakers.  But we have some extras, so holler at @dabrooktweets if you want one!