J220: Intro to Coding News Packages Spring 2020

Course Objective

This is a class that teaches students how to conceive and construct online news packages for both mobile and desktop. Students will work to produce stories in a variety of media (text, photos, video, graphics, and interactives) and construct a website to display the story in an engaging way. Focus will be on design of the project, technical skills for web development, digital reporting skills like scraping data, and understanding workflows and mechanics of online news production.

A major component of this course includes learning how to code HTML, CSS/Bootstrap, entry-level JavaScript, Node, and the command line interface. These are tools used both in designing an online package as well as understanding data research methods for reporting stories.

This is a forward-thinking course. We aim to foster an environment that encourages experimentation and innovative thinking. Come prepared with big ideas, and plenty of ambition. This is your opportunity to try new things, and make your mark on a burgeoning area of the industry.

Learning Outcomes

In this course students will:

  • Demonstrate a firm understanding of HTML, CSS, JavaScript, and command line tools and respective techniques used in the interdisciplinary construction of digital stories and reports.
  • Demonstrate the ability to problem solve and exhibit a level of resourcefulness to formulate a project that goes beyond their own comprehension.
  • Communicate effectively, through visual and oral communication.
  • Work with others in a collaborative environment to produce strong work.
  • Learn how to build web pages for the good of humanity.

Final Project

Double-dipping of the story is allowed, meaning students may work on the same story they are producing for another class — provided the other instructor allows this as well. Students may also pitch an original piece for the final project in this class. Throughout the class students will work on tutorial material and exercises, but the final project will be a story produced by the student.

Pair/group projects will be allowed provided the group can make a case that each team member will have a level of contribution commensurate to a solo project. The larger the group, the less likely this will be the case. Each team member will be responsible for coding a particular section of the project.

Attendance Policy

Given the technical natures of this course, attending every class is crucial. Each session builds off the previous session. Missing classes will likely result in students falling behind. Attendance will be taken to motivate students and ensure they are receiving in-class instruction.

Missing Class

There are two types of absences: excused and non-excused. Excused absences are guaranteed by California Education Code and they include, among other, some the following reasons:

  • Illness with doctor's note.
  • Having medical, dental, optometrical, or chiropractic services rendered with doctor's note.
  • Either of the above two reasons, but for a child of the student, if the student is a parent or legal guardian.
  • For the purpose of attending funeral services of a member of the pupil’s immediate family.
  • For the purpose of jury duty in the manner provided for by law.
  • Observance of a holiday or ceremony of the pupil’s religion, attendance at religious retreats.

All other absences are considered unexcused, and include the following:

  • Busy working on a story for another class.
  • Scheduling a meeting with a source whose only availability is during this class time.
  • Woke up too late and missing the 10am start time for class.
  • Generally not feeling well.

However, the unexpected does happen. I get it. Things come up. Therefore, I allow one freebie for an unexcused absence without any recourse to a student's grade. Students wishing to use their freebie should notify the instructor at the end of the semester when it comes time for grading.

Making up missed classes

Regardless if a class is excused or unexcused, students are still responsible for staying caught up with the material and completing all assignments. As quoted by UC Berkeley guidelines on absences:

Students are responsible for material covered during missed classes whether or not they have been formally excused; therefore it is the student’s responsibility to inform themselves about the material missed....it is not the instructor’s or the GSI’s responsibility to tutor students in missed material. For this reason it is recommended that students absent from class for any reason make timely contact with several other students in the class to arrange for thorough briefing on the material they missed.

Assignments

Assignments are listed in the class website and bCourses, and include the following three types of assignments.

  • Story pitch session
  • In-class exercises
  • A final project to build a web-package based on a reported story

Grading Policy

Grades for this course will be divided into the following criteria. All grading, attendance, and assignments will be done through bCourses.

Criteria Percentage
Attendance20%
Class participation/Homework Assignments/Quizzes20%
Final Project60%

Software and Setting up your Local Development Environment

All software used in this class is free and open source.

This page has instructions for setting up your computer to run all of the in-class exercises. There are lots of steps. We will do this together in class, so please wait before doing this on your own. Use this page as a reference to follow along.

Class Meeting Times

Class meets on Tuesdays 10:00am—1:00pm in the Lower Newsroom of North Gate Hall (room 106). Class will generally run for two hours on most weeks, with the third hour devoted to workshops and lab. However, there may be a few class sessions were we run a full three hours.

Class overview and anatomy of a multimedia story — An overview the class, syllabus, and expectations. This will be followed by a lecture on the anatomy of online multimedia packages. We’ll look at examples of previous story packages produced in this class.
Homework: Submit link to Google Doc from group exercise on bCourses.
Introduction to HTML — This is our first introduction to HTML. We will do an activity, and build a basic webpage from scratch.
Homework: Submit the website you built in today's class on bCourses (Due before next class).
Introduction to CSS — This class will cover Cascading Style Sheets, including how to select HTML tags in a document using classes, ids and type selectors. We will build a webpage in class.
Homework: Create a pretend portfolio website with your name and mock info.
CSS Part 2 — Lesson will cover more in-depth CSS lessons on styling a web page, understanding the box model better, certain layout rules and styling properties.
Homework: Turn in the in-class exercise on bCourses.
CSS Part 3 — Class will cover how to use CSS for changing the look of boxes, lists, tables, and forms. We will talk about prefixes and pseudo-selectors, layout items, and mobile queries.
Homework: Design a web form to look like one of the images given.
Bootstrap Part 1 — We will dive into the Bootstrap 4 framework. This lesson will cover various CSS helper classes, the grid, columns, and markup patterns.
Homework: Design a mockup of a pretend story using the information given in class.
Bootstrap Part 2 — The next part of the Bootstrap 4 framework. This lesson will cover various CSS helper classes, the grid, columns, and markup patterns.
Pitch Day — This is the day we go over story pitches and form teams (if applicable). We will do an exercise together to give feedback on each story, and envision on the ways it might be told online.
Guest Speaker — Guest speaker.
Spring Break — No class this week, work on your stories.
NPM and GitHub — Class will cover how to use Github, which can be used to publish your stories. We will then install NPM, and learn how to download the story template packages and run them on your computers. This is where you should start to build your final project.
Homework: {"title"=>"Submit your Github Repository URL"}
Introduction to JavaScript Part 1 — Introduction to JavaScript for manipulating content after page load. Make a basic button handler. Go over Chrome Inspector.
Introduction to JavaScript Part 2 — In this class we explore additional aspects of JavaScript, and how we can manipulate the DOM. I'll introduct some jQuery plugins for performing common techniques in news packages.
Scraping Data, Making Interactives — In this session, we'll learn how to scrape a website and build interactives that you can embed on your website project..
Workshop Stories — One-on-one meetings with the instructor to work on the design and production of your stories.
Presentation of Stories — Students will present stories to the school.

Classroom Decorum Policy

Students must turn off the ringers on their cell phones before class begins. Students may not check e-mail, social media sites like Facebook, Twitter or other websites during the lecture portions of the class. Anyone caught visiting these sites will be publicly admonished, and will be given marks against their class participation grade at the discretion of the instructor.

Instructor Contact/Office Hours

Assistant Dean for Academics Jeremy Rue
Office Hours: Wednesday, 2p.m. – 5pm.
http://journalism.berkeley.edu/faculty/jrue/

Academic Dishonesty and Plagiarism

Students will abide by the Student Code of Conduct http://students.berkeley.edu/uga/conduct.asp. There is a zero-tolerance policy for work that is submitted without proper attribution and that constitutes plagiarism. If students are unsure about the expectations regarding the Student Code of Conduct, please seek advice from the instructors.