Week 1 – Review of Web Development Concepts 

July 9 Welcome to the class!

Why should you learn to code?

 

The World of Web Development


Reviews

  • FTP/Reclaim Hosting Review
    • Fetch – can download newest version from TXST Technology Resources.
    • FileZilla – can download from TXST Technology Resources
    • Reclaim Hosting File Manager
  • Responsive Design Review

We won’t be using WordPress installations in this class, but if your personal portfolio is on WordPress, you will want to work on it throughout the semester to improve its design and functionality to best display your work.

Assignments:

Spin up a quick Bootstrap site with one page. You don’t have to include real content, but include images and backgrounds to create your desired design.

Use any images you want, but you may need to size them appropriately in Photoshop. For this exercise, you can use greeking (fake text) for text. Get started at getbootstrap.com. Download the Bootstrap 4 files and use the Starter Template to begin  (don’t use a pre-built Bootstrap template). Focus on the Layout, Content, Components and Utilities in the Documentation area.

Change the JQuery link in the template to the non-slim version. The slim version excludes some “ajax” functions. The most current is JQuery 3.3.1 – find the minified version (not slim).

  • 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 – use image styles to include a thumbnail in each.
    • One section should have two unequal columns
    • A footer
  • Apply scroll-to-anchor and parallax scrolling scripts. I will review these methods in class, but try to get them to work on your own. Scroll to anchor should work by including the link to the custom.js file in a script tag. Parallax requires section elements to include data-speed and data-background attributes. The id must correspond to the href in the nav for the link to work. You can find the custom.js.

<section id=”sectionname” data-speed=”6″ data-type=”background”>

*Note: if you use a dropdown in the nav, exclude the href=”#”, so that the dropdown continues to function. It tries to use the scroll-to-anchor script and disrupts the dropdown.

Watch

Read Code and Journalism Today

Begin thinking about the location of data on a topic that interests you. Some sources of data include data.world (sign up for a free account), US Census, City of Austin Data Portal, World Bank, United Nations, Gapminder, but there are many others. Find topics that interest you that we could use to tell an interactive story.

July 11

Bootstrap, continued. Finish up your Bootstrap exercise and review animation features.

Flexbox and CSS Grid examples

A Complete Guide to Flexbox

A Complete Guide to Grid

Does CSS Grid Replace Flexbox?

 

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.

Assignments:

Make a well designed form for any topic you would like. Develop it in Bootstrap, putting it in the sample project from yesterday, in the larger of the two uneven columns. It should work well responsively. 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.

JavaScript – Intro to Programming Concepts
We will go through the tutorials, and you will do the exercises in class. Feel free to try them on your own ahead of time.

Document Object Model
What is the DOM? – CSS Tricks
What is the Document Object Model – W3C
Manipulate the DOM with JavaScript chart

Using the Chrome Developer Tools

Watch:

Read Journalism and Design Thinking

.

 

Continue Intro to Programming

Interactive JavaScript – We will go through the tutorials, and you will do the exercises in class. Feel free to try them on your own ahead of time.

Assignments:

 

 

Interactive Quiz Exercise

More Interactive Examples – some of these techniques may help you with your Interactive Quiz project.

Work on your Exercise 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.

Week 1 assignments

  • Complete your Interactive Quiz Exercise by class. Also do Another Exercise at the end of the Quiz tutorial.
  • Review the Online Journalist Awards finalists for the past few years in the Student Categories. Consider what makes a good submission. Describe this in the #ojastudent channel.
  • Where are the interesting data sets? Make sure you have datasets with potential relevant stories to tell for next week.

 

Week 2 – Working with Data

July 18

Review Quiz Exercise

Review More Interactive Examples

Using Excel and other Spreadsheet Programs

Excel Handout

Using Flourish

Making Interactive Charts with Google Charts and Plot.ly

JQuery

 

Data Journalism – Pinterest Data Viz examples

 

Week 2 Assignments

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 would like to implement these best practices in a project. You can find these projects in many places, including ProPublica, NY Times, Texas Tribune and more. Use the #datajournalism channel on Slack.

Review the Agile and GitHub information.

Review Filtering Large Datasets Tutorial

More Advanced Application – try going through the Interactive Charting Example on your own.

Continue considering dataset, topic and final project.

 

Week 3 – More advanced Programming Topics

Before class, review these items:  Agile Development and GitHub – Review these concepts on your own. We’ll discuss.

 

Agile Methodology for Development

 

July 25

Making Interactive Charts with Google Charts and Plot.ly

JQuery

Filtering Large Data Sets

 

 

Assignments

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. Use the #finaldata Slack channel.

Begin working on your final project. Use Bootstrap to set up your page/site. Create graphics, set up navigation for sections. Begin working on content and data presentation.

 

Week 4 – Working with Python and Final Project Work

Aug. 1 

Scraping

 

APIs

 

Work on Project – Design, data, storytelling

If you want to move ahead with some more advanced exercises, I recommend these tutorials:

First News App – Using Python and Flask

First Graphics App – Using Node.js

 

Week 5 – Complete Projects

 

 

Aug. 9

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