This course will introduce students to designing and publishing for the web. Students will be prepared to produce a user driven design that is appropriate for Web-based content. Equipped with a historical understanding of the web’s evolution and key industry-standard design guidelines to ensure strong online presentation, students will have a foundational knowledge of website creation and apply it to the planning, design and development of their own web page over the course of the semester. By the end of this course students will be comfortable creating, coding and posting basic HTML and CSS files to the Internet.

Origins:

The historical basis of this course will examine the minds, ideas, and culture which form the foundation of the Internet today, and inspire the Internet of tomorrow. From the first computers to Claude Shannon's work with digital computing and communication at Bell Labs, through Arpanet and Mutually Assured Destruction, continuing to CERN with Sir Tim Berners-Lee and the founding protocols of the World Wide Web as an Open Source community, straight through to the web’s MVP Aaron Swartz and issues of intellectual property, social media, big data, and freedom of speech. We will examine the issues surrounding the creation of the Internet by the US Government during the cold war, and it’s evolution in the context of g l obalization through social media. In looking at the past, we will speculate about the future, where ideas such as Virtual Reality and Artificial Intelligence may play a crucial role in transforming our culture. The core issues confronting the 21^st Century of privacy vs. security, and open source vs closed source economies will be explored on a philosophical and practical level.

Form:

Looking to the interaction design (IxD), u ser e xperience d esign (UX), and graphic design worlds we will develop a formal visual language of usability, and accessibility that takes into consideration the needs of the content creator, the audience, and audiences with special needs. Typography, color theory, information a rchitecture, and layout are a few of the formal elements we will critically explore. The goal is to merge design with concepts from visual language, audience analysis, and social media web presence to communicate with the public.

Function:

Students will create their own web presence using basic HTML and CSS, taking into consideration desktop and mobile platforms, coupled with social media tie-ins to communicate their project with the world. Each student will design their own site/web presence that will serve as the final project. We will also touch on content management systems (CMS), such as Wordpress, as a manner of looking towards the more advanced applications of this knowledge.

Required Resources:

W3Schools - http://www.w3schools.com/ (HTML, CSS, Javascript, jQuery, SQL, PHP, etc.)

The Internet's Own Boy: The Story of Aaron Swartz (Documentary) (https://archive.org/details/TheInternetsOwnBoyTheStoryOfAaronSwartz)

Advanced Resources (Suggested)

Useful Learning and Research Resources

Whittier College Library

Lynda.com – Free with Los Angeles Public Library card (https://www.lynda.com/portal/sip?org=lapl.org)

Internet Archive (https://archive.org/)

Media History Project (http://mediahistoryproject.org/)

Stack Overflow (http://stackoverflow.com/) - A communicty for developers that ask and answer questions

Reddit.com (https://www.reddit.com )

Research

r/technology (https://www.reddit.com/r/technology/)

r/AskTechnology (https://www.reddit.com/r/AskTechnology/)

r/history (https://www.reddit.com/r/history/)

r/science (https://www.reddit.com/r/science/)

r/compsci (https://www.reddit.com/r/compsci/)

Development and Design

r/learnwebdev (https://www.reddit.com/r/learnwebdev/)

r/webdev (https://www.reddit.com/r/webdev/)

r/Web_Development (https://www.reddit.com/r/Web_Development/)

r/web_design (https://www.reddit.com/r/web_design/)

r/web_programming (https://www.reddit.com/r/web_programming/)

r/learnprogramming (https://www.reddit.com/r/learnprogramming/)

YouTube

Learn Code Academy (https://www.youtube.com/user/learncodeacademy)

Computer History Museum (https://www.youtube.com/user/ComputerHistory )

Glick, James. The Information: A History, a Theory, a Flood. Pantheon. 2011. (ISBN#: 0375423729)

Laurel, Brenda. Design Research: Methods and Perspectives. MIT Press. 2003 (ISBN#: 0262122634)

Shannon, Claude. A Symbolic Analysis of Relay and Switching Circuits. MIT Press. 1938. http://hdl.handle.net/1721.1/11173

Turing, Alan. ON COMPUTABLE NUMBERS, WITH AN APPLICATION TO THE ENTSCHEIDUNGSPROBLEM. Proceedings of the London Mathematical Society 42 (1):230-265. 1936. http://www.turingarchive.org/browse.php/b/12

Wark, McKenzie. A Hacker's Manifesto. Havard University Press. 2004 (ISBN#: 0674015436)

The Mentor. The Conscience of a Hacker. 1986. http://archive.org/stream/The_Conscience_of_a_Hacker/hackersmanifesto.txt

Poitras, Laura. Citizenfour. 2014. Documentary.

Herzog, Werner. Lo and Behold, Reveries of the Connected World. 2016. Documentary.

Prerequisites

No previous knowledge of Web publishing is necessary.

Technology Needed:

External Drive, Aptana (open source) or Dreamweaver (closed source), text editor, FTP program (Filezilla). Photoshop/Illustrator (a design software) or Gimp/Inkscape (open source). A backup drive/solution.

Grading System:

Homework – 20%

Midterm Quiz – 5%

Case Studies/Critique – 10%

Critique and Discussion participation – 10%

Final Quiz - 5%

Final Paper – 20%

Final Project – 30%

* all papers are to be double spaced with 12 point font, following MLA citation guidelines. Encyclopedias such as Wikipedia, and dictionaries cannot be cited.

Case Studies (10%):

Each student will write a 5 page paper, due at midterm, which will take 3 websites and/or social media sites/channels and critically analyze them for:

Content

User Interface Design

Audience Analysis

Graphic Design

Effective Communication

Information Architecture

Accessibility

Search Engine Optimization

Mobile and Desktop Design effectiveness

These papers will help to give a language for critically designing web content. I am looking for an analytical perspective where you make arguments for your positions using terminology we have discussed throughout the course, and through research. This is meant to be more than an opinion piece, I want to see critical thinking and the formation of a defensible visual language.

Final Paper (20%):

The students will each take an issue of cultural importance in regards to the Internet today and examine it in a 7 page paper through the lens of history. They will breakdown the issue in terms of:

What is the issue?

Who does it concern?

What is it’s historical context?

Why it is important?

What implications does it have for the future?

How has the issue evolved over time?

Why is this issue of cultural importance?

What is your position on the matter?

The paper must be both analysis of the issue, utilizing cited references, as well as a defense of their position on the matter. This is a research paper, not an opinion piece, so the purpose is to explore the topic and draw conclusions from facts obtained in your research. Start with a question, do your research, make a thesis statement and create a paper that is a detailed exploration of your question and your position on the subject. It is best to pick a topic you are truly concerned with, while allowing the research to guide your paper, rather than allowing your initial opinion to be the sole guide.

Final Project (30%):

The final project is to consist of a basic website hand coded in HTML and CSS for both mobile and desktop platforms. The site needs to be designed to communicate content of the students choosing. For example, it can be a product/company, social media site, portfolio site, blog, or project site (game/music/art). Be creative and have fun designing and building it. In addition, the students will design a social media presence taking into consideration the best usage of each platform as well as hashtags/keywords that will target their audience. The social media presence can be described in a 1 page proposal breaking down their approach, it does not need to be live. Search Engine Optimization (SEO), must be put into place in the web site using the best practices discussed in class. Students will be graded on:

effective communication

design

usability/accessibility

SEO (Search Engine Optimization)

cleanliness/elegance of code

code commenting

functionality

web/desktop layouts

typography

social media presence

In essence, both form and function

At midterm, a design and style guide must be complete including: logo, font choices, layout, and color scheme, content, and social media presence concepts. The design can be done in Photoshop/Gimp (raster) or Illustrator/Inkscape (vector) *preferred, and must be included in a 1 page document describing the target audience, content, and initial thoughts on social media presence. The final social media presence proposal document is due at finals.

Critique and Participation (10%)

Everybody is expected to participate in discussions and critique. I am interested in developing your critical thinking and discourse. Regarding this there are boundaries which will be discussed throughout the term. All discourse is to be respectful and constructive, any discussion that veers off of these standards will be stopped. Your opinion, however interesting, is not the purpose of critique. Rather, I am seeking formal and hermeneutic critical analysis, which means that I want a discourse approaching the content from an objective perspective, based on facts, analysis, interpretation and context. Our criticism explores decision making, execution of techniques, reading of materials and interpreting the meaning which is communicated. I do not want to see personal attacks, or subjective opinion that amounts to discussion of personal taste, or attempts to tell the content producer what to do to make their project better. Brainstorming can be useful, but is not critique, and should be saved for one and one discussion when asked for by the content producer.

Coursework:

*Classes will be split between lecture on Mondays and Lab on Wednesdays.

Rubric:

You are graded against yourselves, not each other. I want to see effort put forth in both the exploration and research of the origins and theory of the web as well as the design and development of content. Digital literacy is a fundamental need in today's world. I want to see improvement in the depth of your ability to interact and explore the digital world, and to take part utilizing visual language and basic coding.

A- Research practices show a broad application of cited sources with critical consideration for their validity. Well written papers and documents. A strong sense of visual design as well as elegant coding with comments. In addition, the proposal for social media presence will show a detailed understanding of the various platforms in the context of the content selected for the final project.

B- Research practices show a strong, but not especially broad application of cited sources, with critical consideration for their validity, though with inconsistent results. Well written papers and documents. A decent sense of visual design as well as clean coding with comments, however uneven application of the techniques discussed. In addition, the proposal for social media presence will show an understanding of the various platforms in the context of the content selected for the final project.

C- Research practices show an average amount of improvement, adhering to cited sources, there are multiple holes that have not been considered. Average papers and documents, showing minimal improvement throughout the term. An acceptable sense of visual design as well as decent coding, however there are missing elements in the application of the techniques discussed. The proposal for social media presence shows a decent understanding of the platforms and concepts.

D- Research practices have shown minimal improvement with many gaps. Papers and documents show minimal improvement, and do not cover all outlined topics. Design shows minimal improvement but both design and development are completed on time and mostly correctly implemented. The social media presence is completed but shows little new knowledge of the platforms in relation to the application of your content.

Weekly Outline

*The Syllabus is the authoritative schedule of expectations. Please look to the courses Moodle page for the most up to date syllabus throughout the term. It is subject to change as student need dictates.

Week 1 (1/30-2/1)

M-Lecture: Course Introduction, Design Research, Style Guides

W-Lab: Critique existing web design/development, introduction to development environment, ftp, and the basics of how the web works. Setup development environments. Each lab until final project development begins will include brief technical lectures and laboratory practice developing your HTML/CSS skills. I expect you to continue practicing between classes, so there should be progress between labs, keeping the ideas and techniques fresh in your mind is important when learning a new language.

Homework:

Research web sites on which you find interesting content, function, or design.

Collect screen-shots and links citing the sources with brief descriptions exploring why you selected them.

A random sampling will be discussed during each weeks lab.

Save as a PDF, and bring to class each week.

The document will become part of your midterm research and design document.

Begin planning what you will design your site to do.

The PDF will culminate at midterm-week 6-in a coherent document describing the content of the site, your target audience, have a site-map, style-guide, and complete design of all unique pages done in a raster or preferably a vector program, and include all research done regarding design and development.

Begin W3C Schools tutorials (to be completed before week 8) covering:

HTML (http://www.w3schools.com/html/default.asp )

CSS (http://www.w3schools.com/css/default.asp )

Bonus knowledge that can greatly improve your abilities:

Javascript (http://www.w3schools.com/js/default.asp) – Highly recommended

jQuery (http://www.w3schools.com/jquery/default.asp ) – Highly recommended

PHP (http://www.w3schools.com/php/default.asp )

SQL (http://www.w3schools.com/sql/default.asp)

Week 2 (2/6-2/8)

M-Lecture: (1940’s – 1950’s) Birth of Digital Computing (1940’s) through the early cold war (1950’s), encoding/decoding, transmitting, bits. Turing to Shannon. The women that programmed the first computers.

W-Lab: Critique web design/development, Introduction to basic HTML, and how to learn the language. Sitemaps and introduction to information architecture. Work with HTML by making correct local folder structure, and basic skeleton of an HTML page.

Homework:

Research the web for the sites you will utilize for your midterm case studies.

Desk crits in lab over next couple weeks of your final design and research.

Make a sitemap based on 1 of the sites you have selected for midterm, to be reviewed in desk crits during lab next week.

Continue working on HTML skeleton page to add content and structure.

Week 3 (2/13-2/15)

M-Lecture: (1960’s – 1970’s) Mutually Assured Destruction, Arpanet, Merging of the various networks to the Internet, ideas of collaborative research (CERN). Unix. Logic of the net (server structure and distribution).

W-Lab: Critique research and web design/development of your final project and review the sitemap of 1 of your midterm case study sites. Continuation of HTML5 and introduction to CSS – grid layout, style guide design. Design work-flow and wireframes. Continue working on your HTML files to add techniques discussed in lab, especially included external CSS file.

Homework:

Finalize concept of for content of final project to be discussed in desk crits during lab next week.

Begin wireframes and design process.

Continue HTML/CSS example practice to keep knowledge fresh.

Week 4 (2/20-2/22)

M-Lecture: (1980’s) BBS, Gaming, Early Programming, Email, Chat, Modems, Linux, Personal Computing. Fall of Gopher protocol.

W-Lab: Desk crits of final project concepts. HTML Menus, Information Architecture, Social Media and cross promotion. Work on your ongoing HTML/CSS practice by adding more techniques from lab discussion.

Homework:

Finalize wireframes and continue design process.

Continue HTML/CSS practice fleshing out techniques.

Week 5 (2/27-3/1)

M-Lecture: (1989-2000) WWW, Cern, Dot-com bubble, Startups, ICANN, Post-Cold War, Globalization

W-Lab: Desk crits of wireframes, and design. User Experience Design/Interaction Design introduction. HTML5 media. Introduction to javascript and API's (jQuery). Add video, audio, and slideshows to your example sites.

Homework:

Watch The Internet's Own Boy: The Story of Aaron Swartz. Archive.org (https://archive.org/details/TheInternetsOwnBoyTheStoryOfAaronSwartz)

Finish and come in with questions to discuss for week 8 – after spring break.

Finish the Research and Design document for your site. Due next week.

Continue practicing HTML/CSS and media distribution.

Week 6 (3/6-3/8)

*Midterm
M-Review: Case Study Reviews and Critique of Research and Design PDF.

W-Review: Case Study Reviews continued. Quiz and Critique of Research and Design PDF.

Homework: Continue work on final, begin development.

Week 7 (3/13-3/15) SPRING BREAK

Week 8 (3/20-3/22)

M-Lecture: Discuss Aaron Swartz documentary. (2001-Present) Social Media, Viral Media, Memes, Reddit/Message Boards, Arab Spring and digital revolution.

W-Lab: Search Engine Optimization, Accessibility. Semantic Web. Final Project Development.