MPJO-779-01: WEB DEVELOPMENT FOR MEDIA
GEORGETOWN UNIVERSITY: MPS-JOURNALISM
Tuesdays, 5:20 p.m. to 7:50 p.m. | Spring 2019
Instructor: Greg Linch
Contact Info: gl443@georgetown.edu
Downtown campus, room C222
- Office hours are by appointment only
COURSE OVERVIEW
Merely using the web and digital tools is no longer enough for today’s media professionals. Journalists and communicators alike need to have a strong foundational and practical understanding of how websites are built and how to troubleshoot when problems arise. This class does not aim to make you full-time coders (though maybe you’ll want to be after this class!) or require any previous web development experience, but we do want you to come away with some coding skills. You’ll also be able to collaborate more effectively with web developers and to continue learning on your own.
Students will learn about the various areas of web development and the fundamental technologies used to code and design web pages by diving into HTML, CSS, JavaScript/jQuery and PHP. Students will set up and customize their own self-hosted website using WordPress. Readings, hands-on demonstrations, self-learning tutorials and assignments will be the basis for instruction.
COURSE OBJECTIVES
By the end of the semester, students should be able to:
- Identify the fundamental concepts and technologies underpinning modern web development, what role they play and how they work together
- Develop, deploy and maintain a dynamic website
- Use online tutorials and technical documentation to gain web development skills
- Synthesize technical knowledge to communicate ideas to non-technical people and non-technical ideas to technical people
REQUIRED READING
There is no required text for this course. Instead, the instructor will assign selected readings throughout the semester. Students will be expected to read materials before class, write an analysis post each week (unless otherwise noted) and discuss in class.
EQUIPMENT/SOFTWARE
Required:
Access to a computer (preferably a laptop) where you can install free software programs**:
- Sublime Text 3 (Mac and Windows)
- GitHub desktop (Mac and Windows)
- MAMP (Mac) or XAMPP (Windows)
- Filezilla client (Mac and Windows) (not the server, not the pro version)
For the final project, you must also purchase (if you don’t already have) later in the semester:
- A domain: your name, business name, blog name, etc.
- e.g. Namecheap domains
- Web hosting: basic tier with FTP access and the ability to install software
Free accounts are required for:
- GitHub
- Codecademy
- Note: You are not required to get a paid account or do the projects.
**Notes on required software:
- These three programs must be downloaded and installed before the first class.
- If you have problems installing these and can’t resolve the issue after searching online, please contact the instructor as soon as possible.
- Important: Don’t change any MAMP or XAMPP settings unless instructed.
ATTENDANCE
As outlined by the university, missing more than two classes will result in a final grade reduction of one level (for example, an A will be converted to an A-). Absences for classes, beyond the initial two, will result in further reduction of the final grade. If you are absent for more than four classes, you will be in danger of failing this course.
If, for whatever reason, you are unable to attend class, please obtain notes and assignments from other students for the material you missed. Please show up to class on time. If you repeatedly show up tardy, it will have a negative impact on your grade — and you’ll look bad in front of your fellow students.
CLASSROOM ETIQUETTE, CLASS PARTICIPATION AND OTHER GUIDELINES
All mobile devices must be silenced before class starts.
Students are expected to complete all the readings, learning assignments and analysis posts before each class so they’re ready to learn new concepts and to apply skills to the hands-on work in class. The analysis posts are always due before the next class to allow everyone to read each other’s posts and to allow the instructor to adjust the next class session accordingly.
Whether you’re using a lab computer or a personal laptop, computers in class will only be used for coursework. Your full focus and attention are required for this class. It is easy to miss important ideas or not fully grasp concepts if you are distracted. We’re going to cover lots of technical topics during long class periods, so you don’t want to miss anything.
Email is the primary means of communication outside of class for any questions. Other communications should be arranged by email. If you have issues setting up the software we’ll be using, try to troubleshoot on your own at first, but also don’t wait until the last minute to contact the instructor in case you need assistance. For coding issues, figuring out why something doesn’t work — and how to fix it — is a key concept of the class. You should reasonably exhaust all options for finding a solution (Google, StackOverflow, online tutorials and blog posts) before asking for help from a peer or the instructor.
Class participation is an integral part of this class and accounts for 10 percent of your grade. That includes showing up and participating in class discussions, sharing your thoughts on the weekly assignments and contributing thoughtful insights to the conversation. Engage in the class! You will get more out of it and so will your peers.
Class discussions should be respectful and considerate of others’ views and opinions. Everyone should feel comfortable asking questions and sharing their thoughts freely.
ASSIGNMENTS
*** NOTE: Unless otherwise specified, all assignments are due Sundays by 11:59 p.m. before the next class and weekly analysis posts are due Mondays by 11:59 p.m.
Late work will result in one full letter grade lower for each day after the deadline. If you have an emergency and will miss a deadline, you must request an extension from the instructor as soon as possible. If the request is approved, a new deadline will be given.
Self-learning: Read texts, watch videos or complete tutorials as assigned. For Codecademy lessons, you are required to email the instructor a screenshot of the “syllabus” view of the relevant course(s) and lesson(s) by the deadline. Due: Sundays by 11:59 p.m.
Analysis/reflection posts (~300-400 words): For assigned readings and self-learning, share your thoughts on the readings/lessons and highlight what you found most interesting or had questions about on the course blog. These posts should be a mix of analysis/synthesis to show your understanding of the material. They can also act a running journal of your progress (here’s what I did, here’s what I’m going to do, here’s what hurdles exist, here’s how I solved a problem, etc.). These are due one day after the assignment so you have time to reflect on what you learned and share those thoughts. Points will be deducted for failing to include the proper week tag (e.g. week1, week2, etc. with no space) and/or for failing to select “Instructor” under “Notifications.” Due: Mondays by 11:59 p.m., unless otherwise specified
Midterm: Project explainer or developer profile (~800 words): Two options: 1) Profile a developer working in journalism, PR, media or – perhaps more interestingly – outside of media whose work might be relevant to your field. 2) Pick a project related to your course of study to deconstruct what, how and why it was built, plus lessons learned or what it might mean in the larger context of the field. The project should not be something you worked on and the developer should not be a friend or co-worker. Be sure they know this will be published publicly on the class site when you contact them. Your profile subject or explainer topic must be approved by the instructor beforehand. Pitch due Sunday, Feb. 10 by 11:59 p.m. Midterm due: Sunday, March 24 by 11:59 p.m.
Development environments: Having local and live development environments are essential to your final project. You need to set up a local environment for testing on your computer and a live production environment on a hosting service for the public-facing site. The local environment will use MAMP for Mac or XAMPP for Windows. The production version will use a hosting account ($4/month) and the domain (~$10/year) you’ve purchased. For the hosting, you must be able to install one WordPress site, use FTP and create a MySQL database. Due Sunday, March 3 by 11:59 p.m.
Final project site: Create a customized project using the WordPress site created for the production environment. This will be preceded by a project pitch detailing your plans, including what code customizations and features you’ll be adding. For example, you might do some combination of creating customized a child theme, building a new simple plugin or two (or a single plugin that’s more advanced), using an API, etc. Grading criteria will be shared during the semester. You will primarily be evaluated on the custom code you write, upload to GitHub and publish to your site via FTP. Pitch due: Sunday, March 10 by 11:59 p.m. Project due: Sunday, April 21 by 11:59 p.m.
Final project critiques: Evaluate your peers’ project sites with constructive feedback. These must be added to GitHub as “issues” and you should have 2-3 per person per project. These are due the day after the demos so everyone has a chance to incorporate feedback over the weekend. Due: Wednesday, April 24 by 11:59 p.m.
Surveys: Fill out this survey before the first session (http://bit.ly/webdevspring2019), plus any others sent out during the course based on specified deadlines. These surveys will help the instructor know where everyone stands and if any adjustments in content or pacing are needed.
GRADING
Your course grade will be based on the following:
In-class participation/surveys: 10%
Self-directed learning/code assignments/Codecademy: 15%
Analysis/reflection posts: 15%
Midterm – Project explainer or developer profile: 15%
Development environments: 5%
Final project site: 30%
Final project critiques: 10%
Total: 100%
Graduate course grades include A, A-, B+, B, B-, C and F. There are no grades of C+, C- or D.
A 100-93 B- 82.99-80
A- 92.99-90 C 79.99-70
B+ 89.99-88 F 69.99-0
B 87.99-83
The instructor will provide a warning by mid-semester to any student who appears to be on track for a poor final grade.
UNIVERSITY RESOURCES
Georgetown offers a variety of support systems for students that can be accessed on main campus or at the downtown location:
- MPS Writing Resource Program
202-687-4246
http://writingcenter.georgetown.edu/
- Academic Resource Center
202-687-8354 | arc@georgetown.edu
- Counseling and Psychiatric Services
202-687-6985
http://caps.georgetown.edu/
STUDENTS WITH DISABILITIES POLICY
Students with documented disabilities have the right to specific accommodations that do not fundamentally alter the nature of the course. Students with disabilities should contact the Academic Resource Center (Leavey Center, Suite 335; 202-687-8354; arc@georgetown.edu; http://ldss.georgetown.edu/index.cfm) before the start of classes to allow time to review the documentation and make recommendations for appropriate accommodations. If accommodations are recommended, you will be given a letter from ARC to share with your professors. You are personally responsible for completing this process officially and in a timely manner. Neither accommodations nor exceptions to policies can be permitted to students who have not completed this process in advance.
GEORGETOWN HONOR SYSTEM
All students are expected to maintain the highest standards of academic and personal integrity in pursuit of their education at Georgetown. Academic dishonesty in any form is a serious offense, and students found in violation are subject to academic penalties that include, but are not limited to, failure of the course, termination from the program, and revocation of degrees already conferred. All students are held to the Honor Code. The Honor Code pledge follows:
In the pursuit of the high ideals and rigorous standards of academic life, I commit myself to respect and uphold the Georgetown University Honor System: To be honest in any academic endeavor, and To conduct myself honorably, as a responsible member of the Georgetown community, as we live and work together.
PLAGIARISM
Stealing someone else’s work is a terminal offense in journalism, and it will wreck your career in academia, too. Students are expected to work with integrity and honesty in all their assignments. The Georgetown University Honor System defines plagiarism as “the act of passing off as one’s own the ideas or writings of another.” More guidance is available through the Gervase Programs at http://honorcouncil.georgetown.edu/system/what-is-plagiarism/x
If you have any doubts about plagiarism, paraphrasing and the need to credit, check out http://www.plagiarism.org.
SYLLABUS MODIFICATION
The syllabus may change to accommodate discussion of emerging topics. Also, the schedules of guest speakers may require some shifting of our agenda. The instructor will make every effort to provide as much advance notice as possible for any alterations. Please always check the course site syllabus for the latest information http://webdevclass.greglinch.com/syllabus
SEXUAL ASSAULT POLICY AND RESOURCES
Georgetown University and its faculty are committed to supporting survivors and those impacted by sexual misconduct, which includes sexual assault, sexual harassment, relationship violence, and stalking. Georgetown requires faculty members, unless otherwise designated as confidential, to report all disclosures of sexual misconduct to the University Title IX Coordinator or a Deputy Title IX Coordinator. If you disclose an incident of sexual misconduct to a professor in or outside of the classroom (with the exception of disclosures in papers), that faculty member must report the incident to the Title IX Coordinator, or Deputy Title IX Coordinator. The coordinator, will, in turn, reach out to the student to provide support, resources, and the option to meet. [Please note that the student is not required to meet with the Title IX coordinator.]. More information about reporting options and resources can be found on the Sexual Misconduct Website: https://sexualassault.georgetown.edu/resourcecenter
If you would prefer to speak to someone confidentially, Georgetown has a number of fully confidential professional resources that can provide support and assistance. These resources include:
- Health Education Services for Sexual Assault Response and Prevention: confidential email sarp@georgetown.edu
- Counseling and Psychiatric Services (CAPS): 202. 687.6985 or after hours, call 202. 444.7243 and ask for the on-call CAPS clinician
CLASS SCHEDULE
Pre-course assignments
- Required
- *** Complete this survey before doing the readings and analysis post ***
- Required: Reading/watch
- Required:
-
- Download and install the required software listed above
- Create a free GitHub account and log into it via the GitHub Desktop app. If it asks you to install the command line tool during setup, say yes.
- Email your GitHub profile link to the instructor.
- Required:
-
- Write analysis post that includes why the ideas in the readings matter for this class, what you found most interesting and your main takeaways from the topics discussed. Due Sunday, Jan. 13 by 11:59 p.m.
Week 1 – Jan. 15
Overview of class and how the web works
- Overview of the class
- Review of survey results
- Discussion of pre-course reading materials
- How does the Internet work? How does the web work? What’s the difference?
- Internet protocols
- Client-server model
- What are front-end, back-end, full-stack?
- Overview of tools we’ll use, including a GitHub walk-through
Assignments for week 1
- Think about: What do you want to build?
- What problem do you want to solve?
- What kind of site? Personal, niche interest, business, etc.
- Focus on the what, not the how yet
- Read: Getting started with HTML and CSS
- Read: Basic intro to HTML/CSS for journalism students
- Create: Codecademy account
- Complete: Codecademy Learn HTML lesson 1 and Make a website lesson 1
- “Intro to HTML,” “HTML Document Standards” and “Site Structure”
- Send screenshot of completed and expanded “syllabus” view to instructor by email showing 100% for the required lessons
- Read: Meet Your Web Inspector
- Watch: Chrome Dev Tools: Elements Tab
- Read: GitHub features
- Read: Understanding the GitHub flow
- Complete: Intro to GitHub exercise
- Analysis/reflection post
- Email to instructor
- link to the test repo you made in the GitHub exercise
- link to your Codecademy profile (example)
- full-page screenshots of the completed Codecademy lessons’ “syllabus” view
Week 2 – Jan. 22
Browser and front-end basics
- View source/Inspect element
- Document-Object Model (DOM)
- HTML review
- CSS overview
- Responsive web design overview
- Git and GitHub discussion
Assignments for week 2
- Codecademy Learn CSS course lesson 1 and Make a website course lesson 2
- Complete: “Setup and Selectors,” “Visual Rules,” and “A Closer Look at CSS”
- Upload to Canvas: screenshots of completed and expanded “syllabus” view showing 100% for the required lessons
- Read: How to inspect styles
- Read: W3 Schools – Responsive web design from “RWD Intro” through “RWD Videos”
- familiarize yourself with the the concepts — you don’t need to memorize this
- Read: Getting your project on GitHub
- familiarize yourself with the the concepts — you don’t need to memorize this
- Create a prototype homepage (e.g. for a personal site) using HTML and CSS and add it to GitHub
- Create granular commits for each section of the page (header, body, list, etc.) to get in the habit of having good commits and commit messages starting verbs
- At least 10 different tags, including img and a list (ol or ul)
- Submit via Canvas the repo link for your homepage
- Analysis/reflection post
Week 3 – Jan. 29
Scripting basics
- CSS and response design review
- The DOM revisited
- Client-side scripting vs server-side scripting
- Intro to programming concepts with JavaScript
Assignments for week 3
- Complete: Codecademy Learn JavaScript course lessons 1-5
- Submit via Canvas a screenshot of completed and expanded “syllabus” view
- Work on midterm: Developer profile or technical project explainer
- Analysis/reflection post
Week 4 – Feb. 5
Scripting revisited
- Review JavaScript
- Intro to jQuery
Assignments for week 4
- Complete: Codecademy jQuery course lessons 1-5
- Submit via Canvas a screenshot of completed and expanded “syllabus” view
- Work on midterm: Developer profile or technical project explainer
- Send pitch to instructor via email with name of person or project and how you found them. Due Sunday, Feb. 10 by 11:59 p.m.
- Analysis/reflection post
Week 5 – Feb. 12
Scripting continued
- Review jQuery
- Start work on gallery assignment in psuedocode
- Overview of JavaScript debugging and console.log()
Assignments for week 5
- Complete: Gallery assignment
- Create a gallery using HTML and jQuery, then use CSS to add styles. Be sure to commit each granular step along the way (e.g. added photos, added interactivity, added styles, etc)
- Include captions that also change with each photo
- Publish to GitHub and submit repo link via Canvas
- Work on midterm: Developer profile or technical project explainer
- Analysis/reflection post
Week 6 – Weds, Feb. 20 in room C220 via Zoom due to weather (***note the change***)
Databases, servers, different code environments
- Review jQuery gallery assignment
- Intro to server-side scripting and PHP
- Intro to databases for web applications
- Intro to web servers and server stack
- Intro to WordPress
Assignments for week 6
- Complete: Learn PHP “learn the basics”
- Upload to Canvas a full-page screenshot of each lesson — and be sure to include the “code” and “output” windows
- Work on midterm: Developer profile or technical project explainer
- Bring your laptop to class on Feb. 26 for local development environment setup
- Analysis/reflection post
Week 7 – Feb. 26
Diving into WordPress
- Explanation of development, staging and production environments
- How to set up self-hosted WordPress on your local machine and hosting service
- MAMP, XAMPP, PHPmyadmin, htdocs folder
- Create final project repo
- WordPress codex/documentation overview
- Post formats, custom post types, custom fields explained — oh, my!
Assignments for week 7
- Complete: If needed, finish setting up local development environment. Send screenshot to instructor showing WordPress set up on localhost (include the browser’s address bar).
- Due Sunday, March 3 by 11:59 p.m.
- Complete: Install WordPress on your hosting/domain and send screenshot showing WordPress installed on your domain (include browser address bar)
- Due Sunday, March 3 by 11:59 p.m.
- Read: WordPress documentation entry excerpts to better understand code customization options. Focus on fundamentals, key concepts and general steps:
- Theme development: read intro, “What is a theme?”, “Setting up a development environment”, “Template files” and stop at “Using template files”)
- Child themes: read until “How to Create” and then briefly skim the rest
- Writing a plugin: intro and “What is a plugin?”
- Post formats: intro and “supported formats”
- Post types: read through “custom post types”
- Custom fields: intro
- Custom meta boxes: what, why, “adding”
- Pitch post: what your site will be conceptually (personal, portfolio, niche interest, side business, etc), why you choose this and who the audience is (tag: final-pitch, separate from analysis post).
- Due Sunday, March 10 by 11:59 p.m.
- Work on midterm: Developer profile or technical project explainer
- Analysis/reflection post
Spring Break — March 5
Week 8 – Wednesday, March 13 in room C229 (Greg out/substitute)
Review of WordPress features
- Create a child theme
- Plugin walkthrough: Reading List
- Themes, child themes and plugins Q&A
Assignments for week 8
- Create a new folder/repo, add PHP to the HTML homepage you created previously
- Use 5 different PHP features (e.g. calculate something, submit a form, etc.)
- Make granular commits and publish to GitHub
- Read the following about the Twenty Seventeen theme—focusing on the mechanics and how different aspects of the theme are controlled:
- Read: Agile manifesto
- Watch: Agile best practices
- Read: Shh! Don’t Tell Them There’s No Magic In Design Thinking
- Work on midterm: Developer profile or technical project explainer
- Analysis/reflection post
Week 9 – March 19 (Greg out/substitute)
Project management and ethics
- Q&A for Twenty Seventeen theme
- What is agile? What is waterfall?
- What is user-centered design?
- How to manage technical projects
- Outlining your steps and creating checklists
- Using GitHub for projects
- issues
- pull requests
- readme/wikis
Assignments for week 9
- Read: Intro to command line
- Complete: Midterm: Developer profile or technical project explainer
- Read everyone else’s midterm
- Make sure you have Filezilla client (not pro) downloaded
- Analysis/reflection post
Week 10 – March 26
Midterm profile discussion and FTP how-to
- Discuss midterm profiles/project explainers
- How to update your live site using FTP/Filezilla
- Command line Q&A
- Intro to APIs
Assignments for week 10
- Watch: What is an API?
- Read: What is an API? In English, please.
- Watch: REST API concepts and examples
- Read: WordPress REST API intro page
- Update final-pitch post: finish the pitch post you started by including what code customizations you’ll include. Add 6 code customization proposals and plan to use at least 3. View the 2017 class pitch posts to see the required format and details. If you wrote something in a more narrative manner already, just add all the needed details in specific format about that.
- Analysis/reflection post
Week 11 – April 2
Project customizations
- Discuss APIs
- Discuss projects and what code customizations everyone is planning
- Planning workshop
- Create plan for creating your code customizations
- Create timeline to complete your project
Week 11 assignments
- Work on final project
- Update final-pitch post with code customization details (what, why, how) and timeline for each (research, pseudo-code, writing code, testing locally, debugging, deploying, testing live)
- Analysis/reflection post
Week 12 – April 9
Final project workshop
- Work on your final projects
- Ask questions
Assignments for week 12
- Work on final project
- Analysis/reflection post
Week 13 – April 16
Final project workshop
- Final project updates and Q&A
Assignments for week 13
- Complete the final project: Due Sunday, April 21 by 11:59 p.m.
- Submit the live site URL and GitHub repo URL via Canvas
- Analysis/reflection post
Week 14 – April 23
Final project demos
- Present your project
- Take notes for feedback
- Add feedback as GitHub issues to everyone else’s repos
Assignments for week 14
- Add constructive feedback using GitHub issues (3 per repo) on each project repo and submit the URLs to each issue in one batch when completed. Due Wednesday, April 24 by 11:59 p.m.
- Feedback can be specific suggestions of things add, change, remove as well as overall assessments
- Avoid doing all conceptual, but all technical and design is fine
- Make adjustments to your project based on feedback over the weekend. Email the instructor one time when all initial changes (e.g. errors, bugs) are finished/fixed by Sunday, April 28 by 11:59 p.m.
- Analysis/reflection post reflecting on final project and big-picture class thoughts and feedback due by Monday, April 29 at 11:59 p.m.
Week 15 – April 30
Leveling up your skills and guest speaker
- An overview of other web dev tools and what they are best used for
Guest speaker and/or field trip TBA
Assignments for week 15
- “What’s next?” post: You’ve heard more about what more there is to learn, besides diving deeper into what we’ve started using in class. Now it’s time to create a plan for advancing your skills after the class. Devise a self-learning plan to use after the course ends, including goals and timetable, then post it to the class blog (tag: whats-next) Due: Sunday, May 5 by 11:59 p.m.