Web20

From Wikiway: Share to learn, Learn to share
Jump to: navigation, search

Contents

Web Production COM 40600

Fall 2011, Purdue University

Tuesday-Thursday: 10:30 - 11:45

BRNG 2273

Office Hours: BRNG 2132, Tue - Thu 3 - 4 PM, Wed between 10 - 2 by prior appointment

Professor Sorin A. Matei

smatei at purdue edu

1 765 494 3429

Class sites: Syllabus http://wikiway.net/index.php5?title=Web20

Blackboard: http://blackboard.purdue.edu (for grade distribution only)

IMPORTANT: As the semester evolves and the specific needs of the course members become apparent, some changes to the class schedule, readings, assignments, etc. will be made. The assignment 2-5 due dates, in particular, are to be considered, at least for now, as "tentative". If any changes are found to be necessary, they will be discussed in class and will be included in the online version of the syllabus, as needed. If you print out a copy of this document, make sure that you compare it with the online version. The online version is the one considered final and "official."

Introduction

Web Production will teach you:

  1. How to create websites using simple html, CSS, php and image manipulation
  2. How to apply elementary principles of web design and usability to online projects
  3. How to install, manage, and modify content management systems
  4. How to generate and develop a social media site, how to identify your mission statement, target audience, marketing strategies, and how to build social media services using content management systems, mashups, and widget applications.
  5. How to write content for a social media site

TWO VERY IMPORTANT POINTS:

POINT ONE. The course is called web production because:

  1. In addition to HTML and CSS skills, the course teaches you how to make use of existing communication technologies, such as content management systems, Facebook, or Twitter to create specific communication outcomes. My aim is to train you to become a "producer" of web experiences. Similar to a movie or TV producer, who rarely or never picks up a camera, directs the actors or acts, a web producer might never need to write original programming code. He or she should know, however, what ready-made resources can help her or him set up a project and how to interact with web professionals to make things happen. In view of this, it would be a good idea to spend some time thinking of about the class, about what it has to offer and how these things match your needs. If you have questions, feel free to stop by my office to chat about your learning and professional needs.
  2. The course goes beyond using markup languages. It teaches skills and techniques for successful employment of Web 2.0 social media. Furthermore, the class introduces you to some basic principles related to creating a start-up business, non-profit project, or corporate internal or external communication initiative focused on a social media site.
  3. The course is designed for communication majors. It aims to support their future work as web production team members. Simply put, its goal is to help communication professionals understand the underlying technologies of social media projects so that they can communicate and interact competently with the IT or web design departments of their future employers. Given this goal, the technical competence you will acquire is at an introductory level. If you want to pursue web design as a main area of competence, you will need to take more advanced classes. Web technologies have advanced to such a degree that web designers need to be fluent in several few web programming languages (php, asp, java, python, etc), which this class cannot provide due to the time frame and the goals stated above.

POINT TWO. The course relies heavily on practical exercises and individual work outside class. Your are expected to spend at least 3-4 hours weekly on reading the assigned textbooks and working on the practical tutorials found in the the resource section. The projects, including the final one, might require supplementary time for their succesful completion.

Textbooks

The textbooks below are mandatory. They are not available through the bookstore. Use the links below to order them. If you chose to order or buy them from other sources make sure you acquire the same editions as those listed here.

  1. Felke-Morris, T. Basics of Web Design. HTML5 & CSS3 (e-textbook version). For the print version use Amazon.com.
    1. The book will be referenced in the syllabus as BOWD
    2. Most weeks I will recommend a chapter or a number of pages for further study. These are to be consulted at home during the 3-4 hours of weekly individual study for consolidating the information gained in class. Completing each practical exercise at the end of each recommended chapter(s) (ie, Review and Apply sections), each week, is essential for successful completion of your projects. Lectures are not meant to repeat the material presented in the textbook. Their goal is to provide you an applied, general introduction to some basic procedures and skills. The textbook will help you deepen your knowledge and practice your skills. The class also offers tutorials through the W3.org website. These are to be used as quick online reference materials. They cannot replace the BOWD tutorials.
    3. The book can also be used as a quick reference guide when working on your practical projects. For this purpose, use the Index list at the end of the book (eg, padding, page 160, paragraph element, page 28, etc.)
    4. The book uses HTML 5 in its examples, which is the next generation of markup tagging. Although not essentially different from the two flavors of HTML we use in this class (XHTML and regular HTML), HTML 5 includes some tags and procedures that we will generally ignore in our work. If you have questions about them, do not hesitate to ask me via email or during my office hours.
  2. S. Krug, Don't Make Me Think. Second Edition
  3. R. Williams. Non-designer's design book. 3rd edition
  4. L. Sabin-Wilson. Wordpress for Dummies, 2010 3rd edition
  5. D. Silver. Smart Start-ups

Materials

All students are expected, in addition to purchasing the textbooks, to enable their Purdue web accounts for web publishing and mysql database administration. Details can be found here Webpage Setup.

Activities

The class combines a number of activities:

  1. In class discussions
  2. In class tutorials
  3. Short papers
  4. Independent research
  5. Blog postings on your own WordPress platforms
  6. Web site development

General rules for class interaction.

  1. All activities are mandatory.
  2. Individual activities are to be conducted in a timely and responsive manner.
  3. Class will use Blackboard for distributing the grades and some class announcements, BUT NOT THE CLASS MATERIALS. Students are responsible for learning how to use Blackboard. Make sure that you enable Blackboard to forward course messages to your email address. Class tutorials dedicated to Blackboard will be limited to features that the class needs.For help with Blackboard contact ITAP or check the blackboard.com site.

Do I need to be a geek to do well in this class?

The class does not have a specific prerequisite as far as web design knowledge or skills are concerned. However, all students are supposed to be computer literate and capable of functioning in a web environment. Students are expected to know what a folder, file, drive, email address, URL, and webpage are. They are supposed to know how to save, edit, and delete files using simple text editing tool. Students should adopt a positive, can do attitude when it comes to learning new skills and should not to hesitate to ask questions during or after class. They should also be detail oriented, should be able to type reasonably well (without typos) and fast. As in any situation were new skills are to be acquired, practice makes perfect. No skill presented in class will be succesfully mastered without constant, detailed oriented practice. Extensive explanations and demonstrations are offered in class and adequate books are provided. However, students are expected to practice alone and to hone their skills on their own by completing all tutorials assigned in class at the time suggested on the syllabus. Simple presence in class does not guarantee succesful acquisition of usable skills. Just like learning to play a new instrument, practice is essential. Feedback and one-on-one advising related to the tutorials is available during office hours.

Evaluation

A. Assignments 700 points (see class schedule for details and point breakdown)


 Points
 Due Date
Homework
 10
 08/28
Assignment 1
 90
 09/20
Assignment 2
 150
 10/06
Assignment 3
 250
 10/25
Assignment 4
 150
 11/15
Assignment 5
 50
 11/29











B. Final project: 300 points Details

Grades will be assigned on a 0-1000 scale. Scores will translate into letter grades as follows:

A+ > 970

A > 930

A- > 900

B+ > 870

B > 830

B- > 800

C+ > 770

C > 730

C- > 700

D+ > 670

D > 630

D- > 600

F < 600

Attendance, deadlines, and plagiarism

Attendance for this class is mandatory. I will take attendance at the beginning of each class using an "attendance ticket" system. I will describe the system on the first day of class. In essence, you are required to fill out at the beginning of the class an "attendance ticket" that I will provide, on which you will write your name, signature and daily password. You can miss three classes for personal reasons. Missing more than three classes involves a penalty of 20 points subtracted for each missed class from your overall class evaluation score. Missing more than 10 (13, including your allowance) classes can turn into an automatic F.

If you are more than 10 minutes late, please do not join the class. It disturbs the lecture and shows a lack of respect for your colleagues and for the instructor. If you are less than 10 minutes late, you may join the class but you will complete the attendance ticket at the end of the class. This will be marked as a "tardy". Two tardies = 20 point penalty.

Students are expected to attend every class and to turn in assignments on time. Furthermore, some important announcements or instructions will only be delivered in class. Missing classes might lead to missing deadlines, instructions or vital pieces of knowledge that are only available through oral communication. If you miss a class, it is your responsibility to catch up with the course material. This policy can be amended only if there is a documented case of medical or other type of emergency (family death or illness, etc).

Project extensions will be granted only with 24 hour prior notice. Extensions are not automatic. Legitimate reasons for requesting an extension are situations of certified medical or family emergencies (illness, major family events, such as funerals, etc). Documentation should be provided at the first opportunity after the emergency.  Professional duties, social service trips or events, job interviews, or similar events do not qualify as emergencies. I reserve the right to refuse extension requests that are not justified.

All materials presented to me for grading should:

  1. Be your own work
  2. Should be created by you alone with no outside help
  3. Should not include copyrighted materials that do not belong to you or for which you do not have written permission to use
  4. Should have not been used in any other class or created for any other purpose than the specific assignment you are presenting it for.

In addition, please carefully review and make sure that your are in full compliance with the University academic integrity policies. http://www.purdue.edu/odos/aboutodos/academicintegrity.php

Special announcement for commmunication majors and minors

If you are planning to count this class toward your requirements for either the COM major or the COM minor, you must earn at least a C- in this course.

Emergency situations

In the event of a fire alarm, everyone must immediately evacuate the building until given the all clear by the fire department. In the event of an all hazards siren, everyone should immediately seek shelter in a safe location. In both cases, you should solicit additional clarifying information by all possible means: Purdue Homepage, TV, radio, email, etc. Additional information about campus preparedness is available at http://www.purdue.edu/emergency_preparedness/index.htm. The Beering emergency plan, as well as evacuation maps of each floor of the building, can be found at http://www.cla.purdue.edu/facstaff/resources/.

In case of emergency also follow these University adopted guidelines. http://www.itap.purdue.edu/tlt/faculty/ClassroomEP.pdf

In the event of a major campus emergency, course requirements, deadlines and grading percentages are subject to changes that may be necessitated by a revised semester calendar or other circumstances beyond the instructor’s control. For timely information check this webpage and your email.

Students with disabilities

Any student who feels s/he may need an accommodation based on the impact of a disability should contact me privately to discuss your specific needs. The student and the instructor will contact the Disability Resource Center in room 830 Young Hall to coordinate reasonable accommodations.

Schedule

INTRO August 23 - 25

Introduction, Class policies

Sign up on the wiki, course technologies, enabling your webspace

All students should have a valid web account. To check your account, go to the url http://web.ics.purdue.edu/~yourusername. If you get an error message (such as page not found), you need to contact ITAP immediately at 44600. Occasionally, ITAP will tell you to run Webfix. Follow these Instructions

How to create a VPN connection

How to map your H drive

Homework: 10 points due August 28, 5PM.

Upload a headshot of yourselves on the web (as shown in class). Make sure it is not greater than 100K.
Draft a simple resume, in bullet point point list format. Include in it the following information:

  • Name
  • Address (can be fake or campus address)
  • Position sought:
  • Education:
  • College, graduation date expected
  • Previous positions:
  1. Job 1
  2. Job 2
  3. Job 3
  • Skills:
  • Hobbies:

Save the resume as a text file (resume.txt) in a folder you name resume, found in the www folder, on your webspace. Send me the URL of your file at smatei at purdue edu by August 28, 11:59PM. The email will be used for ascertaining that the homework has been completed and will be used for grading purposes.

HTML PRIMER 1 - The basics August 30 - Sept 1

Your first HTML document

  1. The structure of an html document
    1. header
    2. body
  2. tags
    1. elements
    2. attributes
    3. types
      1. heading
      2. paragraph
      3. links
      4. images
      5. lists

Resources

HTML Tutorial (click the next arrows to see the next page)

HTML TAG CHEATSHEET

BOWD Chapter 1, especially from page 14 on - Complete Review and Apply Tutorial for Chapter 1

HTML Primer 2 Sept 6 - 8

HTML Complex Tags

  1. Tables
  2. Forms

Table attributes

Form components

BOWD chapters 9 and 10 (especially 218-222; 237-262)

HTML validator http://validator.w3.org for a tutorial see BOWD pages 46-47

Advanced attributes

Body tags attributes. Although deprecated, we still use them for convenience. Use with care.

Extra code to the inserted in all html pages (Explanations provided in class, if you missed the class stop by office hours to catch up. No email tutorials for missed classes.) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN">


META TAGS 

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

See BOWD Chapter 1 for details or the links above for info from the W3 site

HTML Entities

A list of html symbols that need to be coded manually to appear on a page (for example < or > Signs)

Also BOWD page 44

Resources

Form Handler Script (right click to download)

HTML Tutorial (click the next arrows to see the next page)

HTML primary colors from W3

HTML COMPLEMENTARY COLOR PICKER Also BOWD page 80

HTML TAG CHEATSHEET - Interactive, web based version

Html Cheat Sheet to Print - PDF VERSION TO PRINT

HTML Primer 3 Sept 13 - 15

Styling in HTML

  1. CSS intro and Syntax
  2. HOW TO IN GENERAL TERMS
    1. Modifying individual tags (inline style)
    2. Modifying specific pages (internal style sheet)
    3. Creating site wide styles (external style sheet)
  3. Individual style elements
    1. Font
    2. Links
    3. Lists

BOWD chapter 5


Layout with CSS

  1. Basic CSS BOX - plus next chapters in this section
  2. Positioning, Width, height, other details start at this link and go all the way to summary

BOWD chapter 7 and 8 (especially pages 184-192)


Html code validator

CSS code validator

Code for creating an external style sheet 

<LINK href="special.css" rel="stylesheet" type="text/css">

To be used in class as example:

  1. http://web.ics.purdue.edu/~smatei/resume/index-inline.html
  2. http://web.ics.purdue.edu/~smatei/resume/index-box.html

Assignment 1:

Create a two page site on any topic you wish that includes

  1. Main content area 650 px wide, centered
  2. On each page there should be at least one css created box that floats either right or left
  3. At least two images per page, each of which should also be a hyperlink. Images should fit nicely in the design.
  4. Use both in line styles and an external style sheet for formatting all headers and paragraphs. Use sans serif fonts for headers and serif fonts for main text.
  5. Colored backgrounds, different for each box and for the entire page
  6. Should be posted in a folder titled a1 on your web account. One page should be called index.html, the other secondary.html. The pages should be identical but the content in each of them different. A link should lead from index.html to secondary.html

CHECK YOUR HTML CODE AT http://validator.w3.org and YOUR CSS at http://jigsaw.w3.org/css-validator/

Due September 22, midnight. Send me an email when done - 90 points

Dreamweaver Sept 20 - 22

Introduction to Dreamweaver

Setting up a site

Creating a page

Adding images

Adding and changing CSS

PICNIK THE EASY SQUEEZY PEASEY ONLINE PHOTO EDITOR


Complete tutorials 1-3 from this site http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-1.shtml

Dreamweaver 2 Sept 27 - 29

More Dreamweaver practice

Simple image resizing and cropping

Complete tutorials 3-6 from this site http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-1.shtml

Assignment 2

Updated September 28

Create a three page site, using Dreamweaver following these instructions

  1. All content should fit in an imaginary box 800 px wide precisely
  2. Header image in a mast box. Mast image should include some text.
  3. Three column design: one main content area and two sidebars. Use padding for all three.
  4. At least two different images other than the mast on each page, each of which should also be a hyperlink. 2 images should be 200 by 100 and two images should be 400 by 200 native resolution (no width attributes or styles for defining image width). The remaining two pictures can be of any reasonable size. No hyperlink border around images! Images should float right or left and there should be a small gap between them and the surrounding text.
  5. Use a local style sheet for creating visual effects specific to each page and an EXTERNAL style sheet for formatting the headers and paragraphs for all pages. Use id or classes for effects that apply to a series of tags or instances in which a tag appears.
  6. Use sans serif fonts for headers and serif fonts for main text.
  7. Define specific colors for all fonts.
  8. Colored background for at least one box.
  9.  1 of the html pages should should include a form and 1 page a table. Both should be meaningful and functional.
  10. Should be posted in a folder titled a2 on your web account. One page should be called index.html, the others two 2.html and 3.html. Two links should lead from index.html to 2.html and 3.html. The content of the three pages should be different, the layout can be similar.

REVIEW RELEVANT BOWD CHAPTERS, ESPECIALLY 8

CHECK YOUR HTML CODE AT http://validator.w3.org

CHEKC YOUR CSS CODE AT http://jigsaw.w3.org/css-validator

due October 7, 11:59PM. Send me an email when done. 150 points.

Practical activities Oct 4 - 6

Don't make me think (the entire book)

Principles of webdesign slides

Designing a page that follows Krug - in class exercise

More Dreamweaver and work on the Assignment 3. Be prepared to discuss your projects and to work on them in class.

Resource: Simple horizontal menus

http://css.maxdesign.com.au/listamatic/index.htm

A fancy menu

http://css.maxdesign.com.au/listamatic/horizontal13.htm#

Fall Break and Work for Assignment 3 October 11 - 13

No class on October 13. Work on Assignment 3. Bring to class on October 20 storyboard and site map for Assignment 3 on paper.

October 18 - 20 Further work on Assignment 3

CRAP principles

In class discussion of CRAP principles turning a list into a CRAP compliant page

Assignment 3

The goal of this site is to test your understanding and ability to use sound usability and web design principles. Create AT LEAST 5 pages of a NEWS site that is in compliance with Krug and CRAP. It shold include

  1. One front page
  2. Two section pages. A section page is similar to the front page, with the difference that it only includes headlines related to that particular section and a local navigation menu for subtopics associated with it.
  3. Two article pages (one for each section). You can create more individual articles, if you feel the need.
  4. Include on all pages identity markers, tagline - make sure you use the same image header throughout
  5. Create navigation bar using a listamatic unordered horizontal list menu of your choice that can also be used as a site map
  6. Use an external style sheet for all pages.
  7. Use a harmonious color scheme with complementary colors. All text should be black on white.
  8. Make sure that main site functionality is featured in most obvious place. Make sure that main graphics and text draws readers into your site, rather than bouncing them off to other sites.
  9. Pages should be organized according to Krug principles - should include consistent header, footer, main content area (enclosed in a box and using at least one sidebar), and a prominently featured search box. Should put first things first and should have a clear focus area.
  10. Padding, floating, and borders to be used as needed.
  11. Consistency in use of fonts and color is mandatory
  12. Meaningful repetition is expected
  13. Skillful alignment is a must
  14. Compliance with the principle that form follows function is mandatory
  15. Article pages need to contain articles written by you in a style that is compliant with the rules discussed in class (directness, chunking, keyword-stuffed, links should be meaningful and well labeled). Articles need to be at least 300 words long and need to convey a meaningful message.
  16. Pictures should be used to anchor the content and to enhance the main article ideas.Caption each picture appropriately crediting the author and explaning the meaning of the picture. Do not use img or style width attributes to resize pictures, use photoshop or fireworks. No hyperlink borders allowed. Pictures need to add to, not repeat the message.
  17. All code should be written specifically for this assignment... Do not recycle any of the pages used for previous assignments or created in class. This includes pictures, html code, css, etc...
  18. All files should be in a folder named a3. Main file should be called index.html, the other files should be called 1,2,3,4, html
  19. Validate your style and pages. Check your site in Firefox.

Update - Due no later than October 28. Can be turned in early. Send the instructor an email when done. 250 points.

October 25 - 27 Designing Social Media Projects

Producing a meaningful social media project

Silver, Smart startups: Essential Chapters 1-8, 14, 15, 21. The rest of the chapters should also be read as sources of inspiration for your own projects.

Things to remember from Smart Start Ups

Assignment 4

Think about a business or non-profit project inspired by the idea of "communiteering" described by David Silver in his book, for which you would like to create a social website. (This will be your final project website).  Write a document, in which you provide:

  1. An exciting, one paragraph description of your project and a catchy name. Explain what the public good and user needs are. (PS: This should be the last thing you write... Refer to the points below for details about public good, user needs, and type of content.)
  2. A short list of three main goals your project is trying to achieve. Make sure that they address user needs first and foremost.
  3. What public good would your community generate? Explain how your public good is similar to at least two examples provided by Silver.  Do not forget to define the "public good" concept first and to refer to the relevant pages in Silver's book that discuss the concept or present your examples.
  4. Describe what type of user need will you serve and what kind of association model would you use. Again, refer to Silver's key concepts related to user needs and to his specific organization/association examples, indicating which specific pages discuss them.
  5. Explains what communiteering means and how you will use this idea for your own project. Mention the relevant pages of Silver's book that discuss this concept and use some of his examples to make your point.
  6. Describe in what way your project would be different or similar to one of the examples provided by Silver's book. We may refer, but are not limited to WeightWatchers, Mary Kay, Tupperware or Comdex marketing models. Be specific, explain what the above mentioned business models refer to. Discuss in an explicit way the relevant chapters, stories, examples provided by Silver, citing the page numbers you are referring to.
  7. Target audience, including geographic area and ESTIMATED SIZE (thousands, millions of individuals etc.). Explain how you estimated the size. Target audiences CANNOT BE generic (males, tourists, shoppers, etc.) Be specific. Indicate the demographic, gender, education, or age characteristics of your audience (upper class students, unmarried females from the midwest, college students from Indiana that want to travel to Cancu for spring break). Explain why these demographics are important for your project and why do you think that they are underserved. 
  8. Avenues of engagement. Using the models and ideas presented by Silver, which you should cite using page numbers and discuss in some detail, indicate in which way you will engage social marketing strategies similar to those presented in his book to attract members and visitors to your site.
  9. Indicate which
    1. Online social networks will be used to spread the word (estimate initial number of project "missionaries")
    2. Types of events to be used to spread the word (online and offline). Emulate at least two examples mentioned by Silver, citing their name, significance and specific pages where they are discussed.
  10. What kind of content are the users supposed to produce for you? Describe in detail the types of articles, their length, complexity and sources to be used.
  11. What will motivate the users to produce content for your site? Refer to the Silver book. Try to leverage his ideas about the main factors that motivate human interaction online. Provide examples from his book, cite the pages where they are mentioned and explain how they insipred your own ideas.
  12. What types of revenue streams do you intend to capture? Again, refer to at least two examples provided by Silver and cite the pages where they are discussed.
  13. Proposed timeline for implementation with specific dates (Up to final deadline). Include all activities you will engage in throughout the rest of the semester, justifying them in a few words (why are they necessary) and explaning what exactly they entail.
  14. Proposed timeline for success (past final deadline): be realistic, explain in a few words why would it take your project this amount of time to become successful.

The assignment is to be posted as a Google Doc, as demonstrated in class NOTE: The document should have the title "Assignment 4". If you upload the document, makes sure that you click the box that says "convert to Google Docs format for editing". Don't forget to share with samatei@gmail.com. Please send an email to the professor when done.

The document should be in a narrative format and it should be at least 1200 words long. Use the above points as headers, but do not use bullet points for answering the questions. The assignment needs to read like a coherent story.

Deadline, November 15. 150 points. Should be posted on Google Docs, as instructed

November 1 - 3 - Content for Web 2.0

Positioning content for Web 2.0 platforms

The Cluetrain Manifesto -- Be yourself, do not BS, ge to the point, subvert hierarchy, be honest

  1. The 95 Theses
  2. Introduction
  3. Markets are conversations

Feel free to peruse the entire book at Cluetrain.com

Writing for social media tutorial

Powerpoint presentation

Writing for the living web - Strategic tips for writing for the web

  1. Write for a reason
  2. Write often
  3. Write tight/Omit unnecessary words.
  4. Make good friends
  5. Find good enemies
  6. Let the story unfold
  7. Stand up, speak out
  8. Be sexy/ expose your private parts (so to speak...)
  9. Use your archives / link to your own content

Jakon Nielsen Tutorial (Make sure you read the rest of this article)

  • On the Web, users are engaged and want to go places and get things done. The Web is an active medium.
  • While watching TV, viewers want to be entertained. They are in relaxation mode and vegging out; they don't want to make choices. TV is a passive medium.
  • In linear media — such as print and TV — people expect you to construct their experience for them. Readers are willing to follow the author's lead.
  • In non-linear hypertext, the rules reverse. Users want to construct their own experience by piecing together content from multiple sources, emphasizing their desires in the current moment. People arrive at a website with a goal in mind, and they are ruthless in pursuing their own interest and in rejecting whatever the site is trying to push. Banner blindness is only the most extreme manifestation of this selfishness.

General tips from Online Journalism Review:

  • The shorter, the better: Readers appreciate writers who do not waste their time. Simple, direct language communicates your thoughts more efficiently than your bloated demonstration of all that stuff the rest of us slept through in English class.
  • Active voice: "Do it," don't "will have been done" it. Reserve passive voice for situations where you don't know the subject, such as crime and court reports. But even then, try to cast as much of the action in the active voice as you can.
  • Strong verbs: The best verbs demonstrate action. If you're writing a string of weak linking verbs, think about the action that's happening in your post, then rewrite a new draft using nothing but nouns and verbs in an attempt to better engage your vocabulary.
  • Attribute sources: If you don't tell your readers where you got your information, many of them will assume that you are just making it up. You aren't, are you? Attribution brings you credibility, because readers know that you've got nothing to hide if they want to check you out.
  • Contextual hyperlinking: Online narratives should allow readers to "branch off" and click through to other, more detailed, supporting content, depending upon a reader's level of interest. Almost all journalism refers to other sources, but online, a writer has the ability to link readers directly to those supporting sources. Note the URLs of those sources when reporting, and work those into your piece with contextual hyperlinks.
  • Try to link those URLs to the relevant proper names, keywords and phrases, rather than to the URLs themselves written out, or worse, the over-used "click here."
  • Use formatting: Break up that boring mass of gray type by using bold, bullet points, etc.

Write great headlines

  1. Communicate a Benefit/information
  2. Create Controversy or Debate
  3. Ask a Question
  4. Personalize Titles
  5. Use Keywords
  6. Use Power Words
  7. Big Claims and Promises
  8. Humor Titles
  9.  Less is more (unless you want to use the power of keywords to boost your traffic)

These tips and tricks will be used for judging your blog posts and the final "copy" of your site

Assignment 5

Write a 350 words article that is compliant with the rules above including headers, bullet points, 3 links, 2 pictures, proper attribution, etc. on Google docs and share with samatei@gmail.com. Grading will be done after you correct my suggestions and after posting this text on your CMS. Details to be provided in class. First draft due November 22, final document posted on CMS by November 29. 50 points.

Checklist

  1. Is the information specific?
  2. Is the headline stuffed with keywords?
  3. Does it contain actionable information?
  4. Does it communicate personal benefit for the reader?
  5. Does it actively engage the user?
  6. Is the tone conversational/not patronizing?
  7. Is it written concisely?
  8. Does it use strong verbs?
  9. Does it attribute sources?
  10. Does it use contextual hyperlinking?
  11. Does it use formatting for emphasis?
  12. Does it use a strong picture?
  13. Is content placed in space and time?

In Class writing exercise - follow the link to join the class discussion

Examples of social media writing

Hugh Hewitt Blog

Daily Kos

Huffington Post

Pajama Media

Google Blog

Wonkette

NY Times Bits

Atlantic Wire

November 8 - 10 Content Management Systems: Wordpress

Check your webspace through ITAP's My Account feature

Make sure that you have at least 50MB left (account size should be no larger than 450MB). Delete files as needed. Empty trash...

Setting up your CMS

details http://www.itap.purdue.edu/tlt/careeraccount/mysql.cfm

Download Wordpress at http://wordpress.org and unzip in social media folder.

installation tutorial http://codex.wordpress.org/Installing_WordPress#Easy_5_Minute_Wordpress_Installation_on_Windows more help at http://codex.wordpress.org

For details also consult relevant chapters from WordPress for Dummies, including Chapter 1-4, 6, 7 and especially pages 104-117.

Use career account username for database name. Username should be, again, career account username. Password should be MySql password you set up at the previous step. Use mydb.ics.purdue.edu for localhost address. use wp_406 for prefix


November 15 - 17

Multimedia and Wordpress chapter 9

Advanced editing for Wordpress - using html in posts and changing css styles

Themes and plugins on WordPress

Chapters 5 and 10 Wordpress for Dummies

For themes see chapter 12

Plugin screencast tutorial


Theme Repository at Wordpress


Plugin Repository at Wordpress

November 22


More on themes and plugins for Wordpress

Chapter 11 and 12 WordPress for Dummies

Wordpress code resource

November 29 - December 1

A simple php tutorial

GET PHP SCRIPTS FOR CLASS HERE

Simple php commands

<?php print(Date("m/j/y")); ?>

<?php include('studies.php'); ?>

<?php include('quote.php'); ?>

<? $last_modified = filemtime("res.php"); print("Last Modified "); print(date("m/j/y h:i", $last_modified)); ?>


<form method="post" action="sendmail.php">

Email: <input name="email" type="text" />
Message:<textarea name="message" rows="15" cols="40">
</textarea>
<input type="submit" value="Send Me A Message" />

</form>

Simple Php scripts

Simple feedback form in php

December 6- 8


Custom Pages


Modifying themes using php tags and templates Chapters 12 and 13 Wordpress for Dummies


Creating a custom page template

The basic building blocks of Wordpress

The Wordpress Loop


More php tricks applied to Wordpress...

Theme development tutorial

Download theme template for in class work

Anatomy of a theme

Code snippet for custom page template

Snippet to add a loop to a static page


INSTRUCTIONS FOR FINAL PROJECT DUE DEC 13, 11:59 PM

Retrieved from "http://wikiway.net/index.php5?title=Web20"
Entry points
Personal tools