diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index 730b7a3..0000000 Binary files a/.DS_Store and /dev/null differ diff --git a/2017/README.md b/2017/README.md new file mode 100644 index 0000000..9a9d01b --- /dev/null +++ b/2017/README.md @@ -0,0 +1,48 @@ +# 2017 Spring Workshops + +New York University, Studio 20 +20 Cooper Square, Room 653 +Wednesdays, 6:00-10:00 p.m. + +## Session Structure +Most of the sessions will follow this structure: + +6-8 p.m. Workshops and hands-on demos +8-10 p.m. Free worktime, project-specific help, advanced demos + +As the semester goes on, more and more of the session time will be devoted to worktime on projects, project-specific demos and training, and any specific questions you have. + +## Workshop Schedule +Topics will be selected week-by-week, based entirely on student interest. + +| Session | Tutorial | +| --- | --- | +| Feb. 1 | [Intro to Code, Git and GitHub, and the Command Line](week1.md) | +| Feb. 8 | [Putting Things on the Internet, HTML, the Web Inspector](week2.md) | +| Feb. 15 | [HTML/CSS Page Layout & Mobile Layout; Basic Data Visualization](week3.md) | +| Feb. 22 | [Digital Security; Project Pitches](week4.md) | +| **March 1** | **No Session** | +| March 8 | Jekyll Framework, Project Layout & Workflow | +| **March 15** | **Spring Break - No Session** | +| March 22 | Work on Project | +| March 29 | Work on Project | +| April 5 | Guest Speaker: Terry Parris Jr.; Work on Project | +| April 12 | Work on Project | +| April 19 | Work on Project | + +## Topic Brainstorming + +- front-end HTML/CSS +- mobile +- data / stats +- UX / interaction theory / psychology +- interactive maps / charts +- deconstructing existing projects and interactives + - talking about what technologies make them tick +- crowdsourcing / data mining, how it enhances storytelling +- domain names & web hosting (_maybe go over this for final projects?_) + +## License +Course materials are licensed under a Creative Commons Attribution-NonCommercial 4.0 International License. + +Creative Commons License diff --git a/2017/week1.md b/2017/week1.md new file mode 100644 index 0000000..e27e1cc --- /dev/null +++ b/2017/week1.md @@ -0,0 +1,85 @@ +# Week 1 - Introduction, Github, Command Line +We might not get through everything, but we'll get as far as we can. + +### What You'll Learn +* What different programming languages are for and how they work together +* How to use the command line to execute some basic commands on your computer +* How to publish up a website you made from scratch using Github pages +* How to follow the same workflow as professional developers when coding (and why they do things this way) + +## Today's Session + +### Intro to Code + +### Git and GitHub + +https://projects.propublica.org/graphics/images/data-institute/presentations/git-and-github.pdf + +__What is Git?__ + * Version control for coders + * Why do coders need version control? + * Sometimes your code just breaks and you need to go back + * Collaboration + * Think of it like "track changes" or "revision history" + +__What is Github?__ + * Graphical web service that helps people use git, plus some other nice features + * Why would anyone use it? + * Creators: + * Version control + * Collaboration + * Sharing with the world + * Free web hosting + * Project management extras (issues, milestones, etc.) + * Users: + * Access open-source projects and libraries + * Contribute to projects online (pull request) + +__Who uses it?__ +- [NYTimes](https://github.com/nytimes/) +- [Washington Post](https://github.com/washingtonpost) +- [ProPublica](https://github.com/propublica) +- [Quartz](https://github.com/quartz) +- [WNYC](https://github.com/wnyc) + +__How does Github work exactly?__ + +Four basic commands to sync the code on our computer to the repository hosted on Github; in the command line, you'd do it like this: + +``` +git status +git add . +git commit -m "Updated design"` +git push +``` + +Creating 'branches' and using a branch called 'gh-pages' to create our own website. + +``` +git branch +git branch gh-pages +git checkout gh-pages +git push origin gh-pages +``` + +(Don't fret! We'll get to the command line shortly.) + +What else is possible? [Github's excellent cheatsheet](https://training.github.com/kit/downloads/github-git-cheat-sheet.pdf). They also have a [tutorial](https://try.github.io). + +We'll also go over how commits, push, pull, and branches work in the GitHub app. + +#### Hands-on with GitHub + +1. Create a new account on [Github](https://github.com). +2. Install and setup Git and SSH Keys. + * Mac: + * Git: https://help.github.com/articles/set-up-git/ + * SSH: https://help.github.com/articles/generating-ssh-keys/ + * Windows: + * https://windows.github.com/ + +### Command Line Basics + +[Command line cheatsheet](https://github.com/propublica/institute-files/blob/master/commandline.md) + +[Command line basics](https://github.com/sisiwei/nyu-spring-tutorials/blob/master/2015/tutorials/command-line-basics.md). diff --git a/2017/week2.md b/2017/week2.md new file mode 100644 index 0000000..4468b28 --- /dev/null +++ b/2017/week2.md @@ -0,0 +1,175 @@ +# Week 2 + +## Today's Session + +### The Internet! + +* URLs! Like `https://github.com/mtigas/nyu-spring-tutorials/`. Your browser gets a lot of information out of this: + * **Protocols** (`https`, `http`). + - How is my browser going to communicate? + * **Domain names** (`github.com`). + - What server is my browser communicating with? + - These get looked up in DNS (the "domain name system") and get turned into an IP address, which is the server your browser tries to connect to. Because nobody's going to remember to type in something like `http://54.82.124.250`. + * **Paths** (`/mtigas/nyu-spring-tutorials/`). + - OK, what page is my browser that server asking for? + +(Showing off difference between HTTP and HTTPS with [Wireshark](https://www.wireshark.org); you don't need to follow along. And I'll come back to this in a later week when we do a cybersecurity workshop.) + +### Publishing with GitHub Pages + +We're going to use GitHub Pages https://pages.github.com/ to put some HTML pages on the internet! + +* We'll make a repo named `week2` in the GitHub Desktop app. (If you're on one of the lab computers, do it in the GitHub website; make sure you select "Initialize this repository with a README.") +* In this `week2` repo folder, create a file called `index.html`. +* From the GitHub Desktop app, commit this file and click "Publish" on the upper-right. (Reminder: you have to be on the "Uncommitted Changes" tab, not the "History" tab.) +* Then, go to your repo in the GitHub website. (From the app you can get to it by right-clicking your repo and clicking "View on GitHub".) Then go into the Settings tab. +* In the "GitHub Pages" section, see the "Source" dropdown. Set it to `master branch` and hit save. +* Refresh the settings page until the GitHub Pages section says "Your site is published at _link_" + +#### More GitHub Pages +Try doing this with the HTML project you did in Zoe's class. (Make sure your `index.html` and `images` folders are in the top folder of the repo!) + +#### Even More: Collaborating in GitHub Pages (Committing & Solving Merge Conflicts) + +I've given you access to modify the following repo: +https://github.com/mtigas/week2-collab + +(The repo publishes pages to this link: https://mtigas.github.io/week2-collab/ ) + +Use the "Clone or Download" button and use "Open In Desktop" to open the project in the GitHub Desktop app. This makes a copy of the project on your computer. + +Right click on `week2-collab` in GitHub Desktop and choose "Open In Finder" ("Open In Explorer" on Windows). + +* Edit the `index.html` file and save your changes. +* In GitHub Desktop, commit your changes. (It's in the "Changes" or "Uncommitted Changes" tab. You'll need to type in a Summary.) +* In GitHub Desktop, press the "Sync" button in the upper-right. + +If someone else has changed `index.html` and sync'd before you got a chance to, you might get an error — a "merge conflict". You have to edit `index.html` again to try to clean it up. Look for lines like this: + +``` +<<<<<<< HEAD + +======= + +>>>>>>> origin/master +``` + +This means you've changed the same section of code as somebody else. + +The part above the `=======` are the changes that others made to this section. Your changes are below the `=======`. You'll want to clean it up to remove all the lines starting with `<<<<<<<` or `>>>>>>>`, and the `=======` -- it's up to you to manually edit this code to be "clean". In this example, I'll just replace that whole mess with this: + +``` + +``` + +Then, it's Commit and Sync (as in the bullet points above). + +--- + +Nice collaboration things: + +From the repo page https://github.com/mtigas/week2-collab/ you can get to a log of all the changes by going to "Commits" on the left side (it has a number in front of it, i.e. "51 Commits"). + +From within a file (like, click on "index.html" from [the repo page](https://github.com/mtigas/week2-collab/)) you can see a line-by-line view of who did what. [This view](https://github.com/mtigas/week2-collab/blame/master/index.html) is appropriately called "blame". + +(Note: if someone deleted some lines, it won't show up in blame. That change will only show up in the log — but you'll see what was deleted in case you want to copy it back in.) + +### Other ways to publish your HTML on the web + +* FTP, SFTP, SCP + * You have an account with a service and you use these protocols to copy your files to their server. + * You use an app like [Fetch](http://fetchsoftworks.com/) (Mac; [NYU download here](http://www.nyu.edu/its/software/#fetch)) or [WinSCP](http://winscp.net/eng/index.php) (Windows)or [CyberDuck](https://cyberduck.io/). + + Once you're logged in, it works like another Finder/Explorer; you can create folders, move and delete files, etc. You can copy files to your space by dragging them into the app window. + * Theoretically there's some NYU space you maybe get access to, but I haven't tried it myself. + * https://www.nyu.edu/employees/resources-and-services/media-and-communications/digital-communications/web-guide/web-site-development/tutorials/ssh-file-transfer-protocol.html + * https://www.nyu.edu/employees/resources-and-services/media-and-communications/digital-communications/web-guide/web-site-development/tutorials/ssh-file-transfer-protocol/connect-to-i4-sftp.html + +### HTML refresher + +Basic HTML tags: +* `` +* `` +* `` +* `` +* `<h1>` +* `<p>` +* `<img>` +* `<a>` +* `<ul>` +* `<!-- Comments -->` + +Basic HTML template: +```html +<html> + <head> + <title> + + + Hello there! + + +``` + +Exercises: +* Create a basic HTML file and use the following tags: + * `

` + * `

` + * `

` + * `

` + * `` + * `` + * `