Practical Responses to Challenges in Contemporary Web Education
Enormous improvements in communication have made understanding more difficult. Even science, mathematics, and music as the last refuge of Western mind have come under the spell of the mechanized vernacular.1
Teaching Web design and development at the university level is a two-fold challenge. The first challenge is that the traditional model of teaching and learning (i.e. lectures, quizzes, and a final exam) doesn't apply or even work for applied Web technology education. The second challenge is the set of expectations of contemporary students concerning factors such as asynchronicity, convenience, ubiquity, speed, and customization in their education, that is, the what, when, and how they learn seems to increase and change with each new class of learner.
In Web education we have to teach the code and other skills. Then we have to turn around and (or simultaneously) teach them how to keep learning on their own, as is the common and required practice of any competent Web professional lest their new skills go quickly obsolete. And even though the old models of assessment are not on par with the subject, we still have to test and assess what and how well students are learning. To meet this two-part challenge of a relevant, productive educational model and student expectations when teaching my introductory- and mid-level Web design and application development courses I apply a bipartite strategy that addresses these hurdles directly by relying on authenticity and flexibility respectively.
To meet the first challenge of an irrelevant teaching and learning model that is no longer effective in teaching the Web, I employ a strategy of "authenticity" in the classroom that educates the students on how to be a Web professional in terms of problem solving and execution: planning, producing, and launching a Web project. The practice of authenticity in the classroom teaches the students first-hand what it means and what the current industry standard practices are to be a Web designer and/or developer. Students are taught to employ an independent learning model, that is, how the pros do it, how to be functional, productive, and capable of navigating the larger context of the Web in order to solve immediate problems effectively that come up during a Web project.
To meet the second challenge of student expectations in terms of technology and lifestyle, my strategy involves technology-enabled flexibility in the classroom. The practice of technology-enabled flexibility allows me to not only effectively deliver course materials but it also - and perhaps more importantly - empowers me as professor to meet the students where their expectations lie concerning the technologies and lifestyles they are accustomed to by the time they arrive at the university. This practice of flexibility mandates a hybrid classroom model. Because flexibility is so much an inherent part of being a Web designer and/or developer, the two strategies are highly complementary.
Challenge --> Strategy
1. traditional education model --> authenticity
2. student expectation --> technological flexibility
This is a discussion of my practical experiences teaching Web design, development, and literacy in the hybrid classroom using this complementary strategic approach. In part one of the chapter I address the first challenge of an outdated educational model when it comes to teaching Web design and development. Here I will explain my strategy of authenticity in response to this challenge including my approaches to teaching HTML and CSS code, and also practices for students to employ professional methods in problem solving during the process of carrying out a Web project. Part two of this chapter addresses the second challenge of student expectations. This part covers my responsive strategy of technological flexibility and the techniques and methods I use to create a student centered experience in the hybrid classroom including the online course management system, class meeting scheduling, and customized video-based lectures and tutorials to introduce weekly course topics.
Part 1: Authenticity: Problem Solve Like the Pros
When teaching Web design and development, does the old educational model still apply? I aim to teach my students how to start off on the right path in order to become a professional in the Web field, and most professional Web developers I know will tell you that no, quizzes won't teach you how to code. There are better ways of learning how to be a Web designer and/or developer, and these are the techniques I employ in my classroom. The practice of "authenticity" in the classroom teaches the students first-hand how to be a Web designer and/or developer, that is, how to be functional, productive, and able to navigate the larger context of the Web to solve immediate problems that come up during a Web project.
At the early stage in the class I emphasize the students' need to understand the larger context. For example, in the New Media and the Web course, we discuss the larger Web ecosystem in which they will be working including not just HTML code, but all of the important parts of a Web site including server hosting, security, and user experience. To make this idea accessible to them I have termed this condition to be the goal of designing a sustainable Web ecosystem to stress the interconnectedness of the information technology and human world, that is, the human and binary node system the learner needs to understand.
Parts of this are the social and cultural implications of the technologies we are learning about in class. Year after year, I hear students say, "I never thought about it like that." For this reason I always work to put the technologies we are learning into a greater context for the students. I have found this to be an added benefit to the course that most students tell me they never expected to get. It gets them thinking which you can see in their faces and hear in their words. It is rewarding on many levels, and therefore and important part of learning to be an open-minded professional in the field of Web design and development.
As we experience, the younger generations have come up knowing how to text and Tweet and chat, but they (often) don't know how these Web based technologies work or what they really mean. Therefore, I start each class by telling the students they will learn about what is underneath the technologies they are using: code. In my New Media and the Web course, for example, the code they will learn is HTML and CSS. We start out with a simple code editor so that the students have to type out each character of code and learn what each one does. I've recently begun to utilize third party online services such as CodeAcademy to assist the students in keeping track of their coding progress and earn badges for their successes along the way. This is also helpful in that they retain such accounts and can access them for the life of their learning, well beyond the time frame of our semester. I guide the students in opening up a native text editor on their lab computers and start to type out the document object model code for their first HTML page by hand.
This is sometimes awkward for them at first, but it is essential in their learning. In this process they learn the slow process of building an HTML tag, then a page, then a site by hand. I have had students respond that they didn't expect to be writing code by hand because they know that there are faster ways to build a Web site, like the various online services. Many students have commented how much they appreciate now knowing what the code looks like, how to write it, and what it means. It is a whole other language they knew nothing about before the course. This is a foundational skill that must be learned before any further Web design and development can occur.
It is requisite today to teach students of any age and/or background that learning to fish, as they say, is far more valuable than being handed a meal. Therefore I nurture and encourage self-motivation, self-reliance, and critical thought in each of the students I work with each semester. From the very start of each new class and continually throughout each semester I help the students become aware of the vast number of Web design, development and literacy resources that area available to them online. Most of the time the resources that I use in my Web work are the same ones to which I refer the students. Often, if not always, these documentation resources are free, in tune with the culture of free and open source software with a bent toward open education.
Central to these practices are educational resources that are Web based, accessible, findable, and usable over time, asynchronously, for the lifetime of the learning process. There are so many outlets for students learning to become professional Web developers such as StackOverflow, DevShed, and W3 Schools, for example, however students need to be instructed on best practice and critical thinking when using these resources. For example, when troubleshooting a browser error, a student might be referred to checking StackOverflow for help. I advise the students at this time about confirming their sources for reliability, check for things like version numbers, and the dates of when certain posts were created. All of these details are important when accurately troubleshooting an error.
Of course the challenge in this model is assessment. How do we know the students are learning and how do we know how well they are learning? In place of the standard quiz and final exam I assign smaller, more detailed assignments. During the first three weeks of class when we are covering larger context concepts such as a brief history of the Web, current popular technologies, and the idea of the sustainable Web ecosystem these weekly assignments are in the form of discussion questions. This gives the students a chance to process through the material and then offer their understanding of it all in an active discussion format. From that time on the assignments take the form of Web project planning documentation, hand written code, and FTP problems in order to give them a chance to apply the topics we are covering each week in the lectures and labs. Each of these assignments is worth 25 points, plus the final Web site project of 250 points, totals the course at around 600 points and allows me to have a reliable assessment strategy for the duration of the course.
I have found that students tend to take to these smaller, more frequent assignments well as long as they have an idea early on of when and how often they will be due. Whenever possible it is also productive to offer detailed examples of the hands on work. Informing students early on of this structure and offering them the course schedule and examples to stay on track alleviates much stress in this regard and helps toward a more productive semester.
Qualifications on This Approach
To put new ideas and concepts clearly in a way that undergraduate students (as well as returning adult learners) can understand, I have found that creating examples is always a big help. The students I have worked with from elementary school age to adult learner seem to appreciate the concrete example as a way of initially understanding complex technical processes. Many of these examples I take from years of working with and building applications for clients and customers in the business, health, and environmental sectors. Keeping examples clear and straightforward is almost always a useful and progressive step when covering topics of Web design, development, and/or literacy.
Most recently, I have taken the basic example to the next level by creating screen capture and other video formats to walk the student through various scenarios. This practice creates asynchronous, detailed, often customized instruction on very specific topics. The videos can be logged into a Web accessible library or channel to allow for continual student access and reference. An added set of benefits to this approach is that the videos may become relevant and therefore applicable to other students in the future with similar needs. The moral here could be something like: teach it once, edit it down so you get it right, and then enlighten (potentially many students) for life.
Part 2: Flexibility: Student Centered Approach
The practice of technology-enabled flexibility allows me to effectively deliver course materials and also to meet the students where their expectations lie concerning the technologies and lifestyles they are accustomed to by the time they arrive at the university. The practice includes a reliance on the uses of a hybrid classroom model and customized video lectures and tutorials delivered asynchronously.
There is much documentation available on the "flipped" (also "inverted", "reversed", "hybrid") classroom model. My own version of this approach is rather simple (which is always welcomed by students coming into a code-centric course to be sure). A cornerstone to the hybrid classroom that I employ is the centralized and accessible online portal. The home base for our learning material is the university course management system. Although we have virtually unlimited choices in how to host online educational resources, I have found that utilizing the university's CMS makes it beneficial if only for one major reason: the CMS is linked with the university's Office of the Registrar. The fact that the CMS is configured this way makes it automatic that the students are enrolled in the online portal. The students can find the portal easily on their dashboard, and they usually have some familiarity with how to use the CMS (from using is in other classes).
Additionally, and probably most valuable is the fact that the grade book is already in place and linked to each student. Each of these points saves quite a bit of time in getting the students familiar with the CMS used in the course, the process of setting up assignments and grading, and keeping an open line of communication during the semester so that we can focus our time as much as possible on course topics.
The key file, and probably the one document I spend the most time on each semester is our course schedule. In actuality it is nothing more than an HTML table that acts as a calendar of sorts, detailing each week and class. It shows the topics for each class, as well as the assignment, due dates, points, and direct hyperlinks to the video lecture and tutorial materials and assignments. A student could effectively navigate the entire semester from this single file. I build it that way on purpose to streamline the logistics of the course as much as possible.
The courses that I currently teach at Penn State usually meet twice a week. The first meeting of every week is carried out completely online and is used as an introduction to the topics of the week, concept learning, viewing initial demonstrations, and other tutorial material. Students regularly enjoy the freedom of time and place this gives them. The second weekly class meeting is usually held in residence, so the students and I show up physically in the classroom. It is during this second weekly session that the "hands-on” method comes into the forefront of their learning of the topics of the week.
Often times I will start the class meeting with announcements, and then go right in to working through a demonstration on the big screen in front of the class. These are short, quick demonstrations directly after which I turn to the class and ask for questions or comments. If there are questions and/or comments those are addressed thoroughly. Once Q&A is up, I tell the students to get to work recreating the steps and processes of the topics that I just demonstrated. During this time I walk around the classroom asking for questions the individuals might have (this allows the shy students a more comfortable chance to ask their questions directly), addressing technical problems, troubleshooting, and generally assisting the students and giving feedback so that they can more completely understand the topics we are covering. This process allows for much feedback on a small-group or one-to-one basis that the students easily benefit from and enjoy.
This model truly is a hybrid approach in that it is a contemporary use of mixed, online synchronous and asynchronous media and in-residence classroom (one-to-many) and one-to-one instruction. I have witnessed that it has become increasingly successful over the past few years.
Once the students know the structure of the course and they start to get comfortable with it, the course overall begins to gain momentum. As part of the inverted classroom model, I create customized videos for each week and topic that we cover throughout the semester. It is time consuming and not something everyone is skilled for, but the payoffs are great, especially over time. This model is more accepted all of the time from administration, faculty, and by now is expected in many cases by the students. Important here is the process of creating – or using – educational resources that are Web based, accessible, findable, and usable over time, asynchronously, for the lifetime of the learning process. That doesn't mean I create indestructible material that lasts forever, it is simply to explain that, first, the material is not presented to the student on temporal media like paper that will break down eventually, and, second, that the digital material is hosted somewhere online where the students can – in their own time and place – find it, use it, and continue to do so well after the week – or the semester – has ended.
Qualifications on This Approach
There are a lot of ways to create custom, multimedia-based content for the classroom. The method described here is one that I have recently adopted and find that it works well for me. Others may find that other multimedia models are more suited to their needs. I have a small photography and videography lighting studio in my home office which makes creating content very easy and convenient for me. This home studio setting allows for a variety of lighting options, backdrops and technologically centered scenes in which to record video of me giving a lecture. For certain lessons it makes sense to record only a quick, lively introduction video to a new topic or week, and then edit that introduction onto the bulk of a lecture that is screen video capture. The mode of delivery of a lecture or lesson is based on the topics. Most of my topics are code or image editing processes and the like, so I will record a welcome and intro video of myself against a bookshelf backdrop, or standing next to the big screen Sony® HD TV, introduce the topic, and then switch over to the screen video capture with voice over for the remainder of the lecture.
The equipment I use is professional grade to build and retain the highest quality final product, but the processes are kept fairly simple in to make a productive, efficient use of time. The camera I use is the Nikon D7000 in 1080p full HD video recording mode. This is an excellent camera that is professional grade yet fairly straightforward to use effectively. The camera sits on a standard tripod and will record up to 20 minutes of full high definition video at a time. I find that I usually record in less than ten minute takes and edit the footage together after shooting, so this works out very well. Additionally, it is a quick USB dump to the laptop that is the editing terminal, so if needed, well over 20 minutes can be recorded easily.
I am fortunate to have a walkout first level with plenty of window light in the home studio setting, so lighting is rarely an issue. However I do have some supplemental lighting when needed. A basic 500-watt halogen work light with a versatile stand purchased at a home improvement store works very well. You can combine more than one of these to suit your lighting needs.
For the script of the brief introduction videos, I have a large dry erase board that stands directly behind the camera. I use this to note main points that I want to talk about in the introduction, and since it is placed directly behind the camera, while I am looking at it in the final recordings it looks as though I am looking directly into the camera which has a good, comfortable, conversational effect in the videos. Longer lecture recordings require a written script that can be spoken much more effectively as voice-overs in video screen capture with relative visual aids. A combination of the two works very effectively and is my standard model.
ScreenFlow® is only one solution for recording video screen capture. This is currently my software of choice because of its versatility. It has the option to quickly start and stop screen capture, select the source for the video capture, record computer sound, and record audio from the built in microphone on the laptop. Once the screen capture has been recorded there are many custom options to further enhance the video and audio. Features like turning on the radar effect when clicking the mouse, and enlarging the cursor for increased usability are helpful features that increase the effectiveness of the instructional material being created.
Once the necessary video footage has been compiled, ScreenFlow® also offers a editing bay to import photos, video, audio, text and several noted effects in a multi-track setting which makes editing a breeze. There are several options for exporting the final version of your video including more than one Web video hosting service. If you have an account with one of these services you can upload your video directly from ScreenFlow®. I record and output my videos to full HD 1080p 16:9 quality which looks really good in YouTube®, on mobile devices of various screen resolutions, laptops, and even big screen TVs.
I use Google Apps and manage one YouTube® channel for my class videos with several playlists. I have one playlist for each class I teach, and when a new video is complete, I simply upload it to my channel and add it to the related playlist. I can then embed each video or the entire playlist in the respective week in the course management system for that week.
Although the above description is how I create original content for my classes, a similar (perhaps scaled back) method can also be employed to give detailed feedback to individual students on specific assignments and projects. I find that it is well worth the time required to offer as much dedicated, direct time and attention to each student, each week, on each project or assignment they turn in. This time and direct attention has had a positive response from the students, who react with great appreciation. When applicable, the use of augmenting technologies to aid in this instruction has been implemented (ScreenFlow®, Skitch®, Jing®, Audacity®, and other instructional software applications have been used.)
As time goes on, I interact with students more, and evaluate more of their work, I am realizing that often times this is the only way some of them will be pushed to improve. I can see this in the classroom as well as in the comments that they leave in the term-end evaluations. For me, this is the biggest challenge in teaching Web user interface design principles because so many of the variables that constitute a grade or the success of some types of projects can be somewhat subjective and ambiguous when being evaluated. Much of the communication media and art fields that I've taught in retain this challenging attribute.
My pedagogical goals in all of these effort are to teach the student to be competent in their Web design and development practices, that is, to tackle a project with confidence in their planning, execution, and troubleshooting that are certainly a part of most any professional grade information technology project. It is difficult to know if a class of students that grew up taking quizzes in elementary and high school, but using tablet computers to do it, are learning topics of information sciences and technology effectively by still using the quiz model.
My teaching experience and observed student learning has taught me that foregoing these older models to get their hands on code and creating their own Web images is a far faster and effective model for teaching the subjects of Web design, development, and literacy. At the same time, we teachers of information sciences and technology are on some level all still students in our own right, that is, we are learning how to teach in many ways, sometimes all over again. We can agree that people learn differently and that different approaches to teaching are very important. It is a complex condition that we can teach effectively the benefits of continuous learning.
1. Innis, Harold. Minerva's Owl. Toronto: University of Toronto Press, 1947. Print.
Carlson, Scott. "The Net Generation Goes to College: Tech-savvy Millennials have lots of gadgets, like to multitask, and expect to control what, when, and how they learn. Should colleges cater to them?." Chronicle of Higher Education. 7 Oct 2005: A34. Print. <http://chronicle.com/article/The-Net-Generation-Goes-to/12307>.