Week 1 – Review and Intro to Programming
July 10 Welcome to the class!
Why should you learn to code?
The World of Web Development
What do you want to learn? What do you already know? Fill out this form …
- FTP/Reclaim Hosting Review
- Responsive Design Review
- Bootstrap Review – introduction; see tutorials
- WordPress Review- self-hosted – see Handout and WP/Bootstrap Tutorial
Spin up a quick Bootstrap site with one page. This is only an exercise, so you can pick any topic. You won’t be uploading it to the Web.
- One page
- Use navigation to different areas of the page.
- Include several different sections:
- Top section should have a dominant visual or carousel
- One section that spans all columns
- At least one section should have a background image.
- One section should have three equal columns
- One section should have two unequal columns.
- A footer
- Apply scroll-to-anchor and parallax scrolling scripts. I will review these methods in class on Tues, but try to get them to work on your own. You can find the custom.js.
Watch HTML Forms Tutorial Videos on CodeActually.com. We will finish up Bootstrap and begin there tomorrow.
Bootstrap, continued. Finish up your Bootstrap exercise and review features.
HTML Forms – we’ll go over the elements to make an html form for text inputs, radio buttons, checkboxes and dropdowns. This is the foundation of a user interaction interface.
Make a well designed form for any topic you would like. Use any html/css features you need to create the well-designed form. Consider the data you would like to collect from the user. Use each of the form elements we discussed at least once in your form. The page you create with the form should include an intro and some explanatory text. Develop it in Bootstrap, putting it in the sample project from yesterday, in the larger of the two uneven columns.
Review the Make An Interactive Quiz Tutorial
Take Quiz 1 on TRACS in class – this will cover HTML/CSS Review, Bootstrap, WordPress and Intro to Programming. You will have 30 minutes to take the quiz once you start it. MC/T or F.
Interactive Quiz Exercise
Work on your Project 1 Interactive Quiz. Develop an appropriate scoring method and any other interactivity you’d like to demonstrate in the Quiz. This can be a quiz that calculates or scores correct answers or it can be a Buzzfeed-style quiz where you provide different results based on the answers. Put some thought into the scoring and interactivity. Add any design elements to make this a well designed quiz. Upload this to a new subdomain.
Review the More Interactive Examples (no video for this, just reference and code) tutorial on CodeActually.com. You will want to take a close look at the Buzzfeed Quiz examples, if you are doing a project of this nature.
Work on Interactive Quiz Project. Be ready to finish it in class on Monday.
Week 2 – More Advanced Programming
More Interactive Examples – some of these techniques may help you with your Interactive Quiz project.
Complete Interactive Quiz Project – due by end of class – July 17
Data Journalism – Pinterest Data Viz examples
- Dollars for Docs – Propublica
- Ya’ll, Youse and You Guys – NYT
- Is It Better to Rent or Buy – NYT
- Dogs of NYC – WNYC
- Public Schools Explorer – Texas Tribune
- Stamen Design – MTV Awards
- Election 2014 – Twitter
- Battling Infectious Diseases in the 20th Century: The Impact of Vaccines – WSJ 2015
Research Assignment – find three professional data journalism projects and assess on storytelling, design and data. Write a paragraph or more on each project and then discuss how you will implement these best practices into your final project. You can find these projects in many places, including ProPublica, NY Times, Texas Tribune and more. You can do this in a Word document, save as a pdf and upload to the #datajournalism Slack channel. Due July 24.
Review Tutorial for Interactive Charting Example
Interactive Charting Example – this is a comprehensive example that demonstrates the power of several items we have covered in the class.
Assignments: Review Tutorial for Google Chart Examples
Making Interactive Charts with Google Charts
Assignments: Review Filtering Large Data Sets
Think about the type of final project you’d like to do for this class. The session will be over before we know it! You will need to find a data source that has good data and has the potential to tell a story. Write a Slack post about the type of data story you’d like to tell for the final project. Where is the data? Why is it interesting? What do you think you will find? What do you need to know to use it. This is due on Tues, July 25 in the #finaldata Slack channel.
Filtering Large Data Sets
- Quiz 2 in class
Assignments: Review the JQuery tutorial on CodeActually.com.
Work on Project 2 – Interactive Charting Project – create a page that provides two interactive charts or maps and one table that filters a data set using a dropdown. Use your own data. This could contribute to the start of your final project.
Week 3 – Finding and Working with Data
Complete Project 2 Interactive Charting
- Watch API tutorial below.
- Guest speaker Carolee Mitchell from data.world
- Take Quiz 3 in class
- Work on Data Analysis Project – take the data you pulled from the Twitter API, associated with your final project. Analyze the data for frequency of terms and users (and anything else that is interesting). Create at least two visualizations to demonstrate trends in the data and include a description of the analysis. You will submit this analysis as a Slack post in the #twitterapi channel with images you created as screenshots from a spreadsheet or other (TagCrowd.com) program. Do at least two different kinds of analysis.
- Beginners’ Guide to GitHub
- Other GitHub Resources
Agile Methodology for Development
Week 4 – More Advanced Applications
Complete Data Analysis Project
Assignment: Review d3 exercises
Introduction to d3
Work on Final Projects
Work on Final Projects
Work on Final Projects
Future Concepts – ways you can continue to learn to code
Final Project – Use more advanced data concepts in an interactive presentation. Find some interesting data and figure out an interactive way to present it on a website. A story (to include text and that can include interviews, images, multimedia) should accompany. Data must be interactive (manipulate the DOM), which can include ways to sort and filter data or present it interactively with charts. Site should have both an interactive table generated by json data with form to select and an interactive chart. Site should use responsive techniques that we discussed (fluid layout, fluid images and media queries).
Final Project due Aug. 9