Program: Intro to Web Design for Young Adults

This is my final project for Media Literacy and Youth. It is a plan for a four-week (eight session) class on web design, aimed at high school students and taught in conjunction with the high school. Forgive the goofy place names – they’re the ones I used throughout the semester, and mad props if you know what book they’re from.

REASON

Reynolds Peak, Wisconsin is an industrial, mostly working-class Hogsboro suburb. The community is stable, with a low crime rate and a high employment rate. However, the schools struggle to adequately serve a diverse student population: approximately 80% of students at the local K-8 school receive free or reduced lunch, the student body is about 88% Hispanic and 9% Black, and about 45% of students are categorized as Limited English Proficient. The school does not have a computer lab or media center. The local high school does not fare much better: it has a 13% meet-or-exceed rate on state standardized tests. While the high school district has made significant efforts to improve its offerings in technology education – in the last year, they have added wireless access throughout the school and computers in science classrooms – students have fallen far behind their peers long before they reach high school.

Very few children in the community either receive advanced technology instruction in school or have computers at home: Latinos are much less likely than other demographic groups to use the internet or have access to computers at home (Fox). As a result, students are at a distinct disadvantage when they reach college or enter the workplace. Through this program, participants will receive top-notch, hands-on technology instruction. They will learn to create and maintain websites, a skill that is highly in demand in the workplace. Students will gain confidence with more general computer skills, as the class requires students to spend a significant amount of time working with familiar and new technologies. Participants will benefit from a small-class setting where they are able to work closely with their peers and teachers. Finally, a flexible, dynamic technology class may help participants succeed in other school subjects: technology education can be “a platform for helping pupils in [a] wide range of achievements” and can increase students’ motivation to study (Barak 156).

OBJECTIVES

-       Students will learn to create and edit basic HTML and CSS code.

-       Students will learn to use popular content creation websites and software, including: Adobe Photoshop, Adobe Dreamweaver, Audacity, Blogger, WordPress, Wikispaces, Google Sites, Wix, Weebly, and others.

-       Students will learn how to use an FTP program to upload files to a website.

-       Students will learn about copyright and plagiarism, and be able to find appropriately licensed materials to use on their websites.

-       Students will receive advice and critiques from professionals in the field.

ORGANIZATION

This class will be offered as an after school program in conjunction with the local high school, preferably to count toward credit or extracurricular requirements. This gives some level of assurance that students will attend most (if not all) of the sessions.

The class will be capped at 15 students to guarantee that teachers will be able to answer questions and provide one-on-one assistance as necessary. The sessions will run from 3-5 p.m. on Tuesdays and Thursdays. The class will be open to students in grades 6-12. For the sake of the group, all students must have basic familiarity with Microsoft Word and an internet browser.

Each class will begin with an introduction to the day’s material. All “lectures” will require students to follow along on their own computers, giving them the opportunity to experiment with the tools as the instructor explains them. Each class will include at least one activity that can be done alone or with a partner. Emphasis will be placed on understanding why web designers make certain choices, rather than simply explaining how to use the tools. Homework that reinforces the day’s lessons will be assigned after every class, and can be completed alone or with a partner. Students will be expected to attend extra lab sessions as necessary to complete their assignments.

DESIGN

Week One

Tuesday

Personal introductions and icebreakers: instructor, lab assistants, and students

Introduction to class materials

-       Why make a website?

• Think of blogs you visit regularly. Make a list of purposes they serve. Different websites let you play games, buy things, read the news, catch up with friends…
• Lots of teens have a presence on the web: personal blogs, MySpace or Facebook pages, websites for bands they like (or a band they’re in!)

-       How do I make a website?

• You can buy a domain name (explain what that is) and pay for hosting, or use a free website host
• You can use a template (a website someone else has designed, so you just plug your information in) or design your own website. You can also take a template and alter it to fit your needs. We’ll learn to do all of these things.

-       What kind of website can I make?

• Wikis
• Blogs
• Websites
• Pages on personal networking sites (MySpace, Facebook, etc.)

-       Intro to HTML

• Basic parts of HTML code (<HTML>, <HEAD>, <BODY>, <A HREF>, <IMG SRC>)
• The “view source” feature of web browsers
• Using code from a website chosen by the instructor, highlight the sections of code discussed in class and explain what they do.

Homework: Brainstorm at least three ideas for a blog or website you might like to create.

Thursday

Guest Speaker: Freelance web designer

Using templates to create a blog

-       Blogger

• What’s it for?
• Introduction
• Customizing the design
• Adding links and pictures using HTML editor

-       WordPress

• How is it different from Blogger?
  • Can use their interface on a domain name
  • More customizable, but also more difficult to customize
• Customizing the design
• Getting help on the WordPress wiki
• Adding links and pictures – basically the same as Blogger

-       Other options: LiveJournal, TypePad, Tumblr

Using templates to create a website – for free!

-       Google Sites

• Lots of theme/template options based on the type of website you’re making
• Limited HTML editing

-       Weebly

• Simplest interface
• Drag and drop

-       Wix

• More dynamic than other options
• What is Flash?

-       Potential drawbacks of using a template

• Looks “cookie-cutter”
• Can’t always customize extensively

Homework: Using one of the free web publishers discussed in class, create a website or blog with at least three pages (or three blog entries) that link to each other. Take a look at the code your web publisher produced. Can you find the elements we discussed on the first day?

The next six sessions are presented as a rough outline of the material to be covered. Concepts covered in each class may vary depending on the students’ proficiency with the material and need for review.

Week Two

Tuesday

Introduction to web design

-       Basic design principles (http://psd.tutsplus.com/tutorials/designing-tutorials/9-essential-principles-for-good-web-design/ and http://mason.gmu.edu/~montecin/webdesign.htm)

-       Elements of websites (navigation bar, body, footer)

-       Colors, fonts, and backgrounds: good and bad examples

-       What does it mean to be “standards compliant”?

Introduction to using WYSIWYG software (Dreamweaver)

-       HTML versus WYSIWYG editor – which one to use?

-       Frames, tables, CSS

-       Managing your website files

-       Adding links and multimedia elements

Homework: Draw (by hand or using the computer) a website layout that adheres to design principles.

Thursday

Guest speaker: Owner of a web design firm

Advanced use of Dreamweaver

-       Creating and using CSS stylesheet

-       Image rollovers and other neat tricks

-       Fancy navigation: drop-down menus, image maps, and more

-       PHP, MySQL, Javascript: what are they? What can they do? Can Dreamweaver help you do any of that stuff?

-       What’s Flash?

Homework: Do your best to create the site you drew using Dreamweaver. Help will be available during staffed lab time. We will start on this assignment during class so that everyone can get one-on-one help during the session.

Week Three

Tuesday

Introduction to image editing: we’re going to spend some time taking pictures of each other, the lab, and the community center’s outdoor space, then edit them! You can also bring in photos or artwork (that you made) to scan and edit on our computers. We’ll learn how to get photos from the camera to the computer, and how to use the scanner.

-       Using Photoshop to make your pictures look better (brightness, color, retouching)

-       Using Photoshop to make your pictures look totally different (filters, brushes, etc.)

-       Photoshop and Dreamweaver can work together to create a website. Here’s how.

Very basic video and audio editing

-       Intro to Audacity

-       Recording video using YouTube and a webcam

Review of Dreamweaver basics

Homework: Using one of the techniques discussed in class, create at least one multimedia object you could put on your website.

Thursday

Guest speaker: Graphic designer

We’ve got all these cool pictures. Now what?

-       Review: how to add multimedia files to your website using WYSIWYG tools and HTML

-       From here to there: using FTP to upload your files

-       How to incorporate your favorite music, pictures, and videos without annoying visitors or violating design principles

Copyright & plagiarism

-       Copyright law: fair use, public domain, internet piracy

-       Can I take pictures/text/video/music from another website? What if I give credit?

-       Hotlinking

-       Is my website under copyright?

-       Want to use something that is under copyright? You can always try asking permission.

Finding images, videos, and sound clips that you can edit and post

-       Some material is freely available because it is in the public domain. Some people license their material for use by other people.

-       Creative Commons search on Flickr

-       Wikimedia Commons

-       Archive.org

Homework: Complete an outline of your final website, including the layout and at least three pages it will include – this can either be drawn by hand or on the computer. Get started creating your website and any multimedia objects you’d like to include.

Week Four

Tuesday – Project Day!

We will spend most of the day working on our final websites. The instructor and lab assistants will be available to help you with any problems. We will review as a group any topics that are giving us trouble. We will also talk about how to integrate Wikis and blogs into our websites.

Homework: Finish your website!

Thursday

Guest speaker: Technology instructor from community college

Class presentations – no pressure! Just show us what you’ve made.

Where do we go from here?

-       Opportunities for further learning through local high schools, community colleges, and after-school programs

-       Job and volunteer opportunities in web/graphic design

DESIGN RATIONALE

Because the program runs for multiple weeks, there is some risk that students may miss a class and therefore be unable to complete the required tasks. However, the benefits of offering a multi-week program outweigh the negatives: web design is a fairly broad and difficult topic, and a one-day program would not allow the class to explore nearly as many concepts. Additionally, students will benefit from the reinforcement provided by homework assignments and review from week to week. Students who miss class will have an opportunity to come to lab hours and work with an instructor or assistant to learn the materials that were covered.

It is important that students have time to experiment with the tools introduced during class, which is why the program offers staffed lab time for the students in the class. One hour of staffed lab time will be available either before or after the class, along with an additional 1-2 hours at some other point during the week. While students must have some experience using computers as a prerequisite for the class, many students are likely to require one-on-one assistance, which will be available through the extra lab time.

Many of the projects and assignments encourage students to work with a partner. Students benefit from working with peers of a similar skill level. This type of collaboration encourages students to learn from one another, and is particularly helpful for students who feel like they are behind the rest of the class. Offering students the opportunity to work together will help mitigate this problem. “Rather than working in isolation, collaboration provides [students in technology classes] social engagement, a safe environment to acknowledge deficiences, and an opportunity to brainstorm, be creative and get help from peers” (Jones 13). At the same time, allowing students to work on their own provides a good option for more independent students.

The program will also feature brief presentations given by professionals from the community. Showing teenagers successful, empowered role models from their own community encourages them to feel optimistic about their own futures: “Young Latinos…do not seem to appreciate science and math-oriented careers as possible career options…seeing more Hispanic teachers and science professionals in the schools would help Hispanic students appreciate the diversity of choices before them, as well as their own potential” (Gasbarra 8-9).

RESOURCES

This program requires a lab space with one computer per student, as well as a computer that is hooked up to a projector. All computers must have internet access, an FTP program, Audacity, and Adobe Creative Suite, along with USB drives and webcams. The lab must be accessible outside of class hours so that students without a home computer can complete their homework. Alternatively, the school could work with an organization that loans out laptops to ensure that students have access to the necessary software outside of class. All students will need to have a USB thumb drive, which should be provided by the program so as to avoid concerns about costs.

The most important resource for this program is a dedicated, well-trained staff. The teacher must have experience working with this age group, along with extensive knowledge of web design principles and applications. Lab assistants must also be knowledgeable and patient, as they will be responsible for helping students with their course assignments.

OUTCOMES

Program participants will receive 16 hours of technology instruction in a hands-on environment. They will interact with and learn from a self-selected peer group, as well as experienced teachers, lab assistants, and professionals in the field. By the end of the program, students will have gained the following competencies:

1. Students will be able to explain how websites are designed and maintained.

Students will be able to explain the differences between blogs, wikis, websites, and social networking pages, and be able to list possible uses for each type of site.

1. Students will be able to design and build websites.

-       Students will be able to design (on paper) an attractive, functional website that adheres to design principles while demonstrating creativity.

-       Students will be able to build websites using a number of tools, ranging from freely available web tools to advanced software like Adobe Dreamweaver.

-       Students will be able to tweak the HTML and CSS code produced by WYSIWYG programs.

-       Students will be able to code a basic website from scratch using HTML.

1. Students will be able to explain the legal and ethical issues that stem from internet content creation.

-       Students will be able to find and use appropriately licensed media to share and use in multimedia projects.

-       Students will be able to identify copyrighted, Creative Commons-licensed, and public domain materials.

-       Students will be able to explain “fair use” exceptions and identify circumstances under which such an exception can be claimed.

-       Students will be able to make decisions about the copyright status and licenses of their own work.

1. Students will be able to find opportunities for content creation in their daily lives.

-       Students will be able to identify different types and purposes of websites.

-       Students will understand the ways in which technology can impact their community and the world around them.

-       Students will be able to voice their opinions and beliefs online.

-       Students will gain exposure to technology-related careers through professionals from the community.

1. Students will feel more confident in their ability to use advanced technologies.

– Students will know how to experiment with software in order to gain mastery.

– Students will be able to explain their technological competencies on job and college applications.

RESOURCES

Barak, Moshe et. al. “Majoring in Technology Studies at High School and Fostering Learning.” Learning Environments Research 3 (2000): 135-158.

Barron, Brigid et. al. “Sparking Self-Sustained Learning: Report on a Design Experiment to Build Technological Fluency and Bridge Divides.” International Journal of Technology and Design Education 17.1 (2007): 75-105.

Fox, Susannah. “Latinos Online, 2006-2008.” Pew Research Center’s Internet & American Life Project. Pew Research Center, 22 Dec. 2009. Web. 28 April 2010.

Gasbarra, Paul and Jean Johnson. “Out Before the Game Begins: Hispanic Leaders Talk about What’s Needed to Bring More Hispanic Youngsters into Science, Technology and Math Professions.” America’s Competitiveness Hispanic Participation in Technology Careers Summit: Palisades, NY, 2008. New York: Public Agenda, 2008.

Gibson, Kay L. “Using Technology to Encourage Motivation and Achievement in Academically At-Risk Secondary Students.” Proceedings of Society for Information Technology Education International Conference: Chesapeake, VA, 2002. Location: Publisher, 2002. 66-70.

Jones, Toni Stokes. “Mentoring African American Educational Media and Technology Students.” TechTrends 46.2 (2002): 11-14.

Sosa, Teri. “Visual Literacy: The Missing Piece of Your Technology Integration Courses.” TechTrends 53.2 (2009): 55-58.

Vengersammy, Ormilla. “Give Your Technology Program a Little ‘Class’!” Computers in Libraries 29.3 (2009): 14-18.