From 590edb93fd024e585a394f001e928c75bbd20957 Mon Sep 17 00:00:00 2001 From: Mike Tigas Date: Wed, 1 Feb 2017 16:08:24 -0500 Subject: [PATCH 01/23] sked --- .DS_Store | Bin 6148 -> 0 bytes 2017/README.md | 47 +++++++++++++++++++++++++++ 2017/week1.md | 85 +++++++++++++++++++++++++++++++++++++++++++++++++ README.md | 1 + 4 files changed, 133 insertions(+) delete mode 100644 .DS_Store create mode 100644 2017/README.md create mode 100644 2017/week1.md diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index 730b7a3a4445e018f40336ce37eb698c06ab410d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6148 zcmeHL%}xR_5T4OJka!`UIQ9`-6FE0zc>-R*giZ7yfrH%l8F?Z7zRo~csUDS>nWX*N z`RTM@Lc4>A=wjcuB2y8Wpb?dWicnoO-MBN2$~E3z+SPiy*;N*~Ru%W&$fG<+D^HdE zpKP0L*Y*4NwaDS{F)PP8v-RKFcCQzl9OLFcbgOQGL;2f!aXh}Y3GEq;Lcf6n2*#t208Ds~*gs@uPXPL5$H9=RP+!7< P@gYzMi7puU1qMC=evmg@ diff --git a/2017/README.md b/2017/README.md new file mode 100644 index 0000000..70a0a38 --- /dev/null +++ b/2017/README.md @@ -0,0 +1,47 @@ +# 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 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 | TBD | +| Feb. 15 | TBD | +| Feb. 22 | TBD | +| **March 1** | **No Session** | +| March 8 | TBD | +| **March 15** | **Spring Break - No Session** | +| March 22 | TBD | +| March 29 | TBD | +| April 5 | TBD | +| April 12 | TBD | +| April 19 | TBD | + +## Potential Topics + +- 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 + +## 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/README.md b/README.md index 8d279d2..5beab5e 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@ # NYU Studio 20 Spring Tutorials ## Years +- [Spring 2017](2017/) - [Spring 2016](2016/) - [Spring 2015](2015/) From 428cc2638da8c51b7e6a2438ade245e3f2f9ab55 Mon Sep 17 00:00:00 2001 From: Mike Tigas Date: Wed, 1 Feb 2017 19:36:48 -0500 Subject: [PATCH 02/23] testing --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 5beab5e..86eea1b 100644 --- a/README.md +++ b/README.md @@ -9,3 +9,5 @@ Course materials are licensed under a Creative Commons Attribution-NonCommercial 4.0 International License. Creative Commons License + +test From 3b5e49e76591f70bb291cfc910f66d689d7f44f2 Mon Sep 17 00:00:00 2001 From: Mike Tigas Date: Wed, 1 Feb 2017 19:38:01 -0500 Subject: [PATCH 03/23] Update README.md --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index 86eea1b..5beab5e 100644 --- a/README.md +++ b/README.md @@ -9,5 +9,3 @@ Course materials are licensed under a Creative Commons Attribution-NonCommercial 4.0 International License. Creative Commons License - -test From ba173644d9a3355a3dc586b40699652acefffc38 Mon Sep 17 00:00:00 2001 From: Mike Tigas Date: Wed, 8 Feb 2017 14:03:50 -0500 Subject: [PATCH 04/23] wk2 --- 2017/README.md | 2 +- 2017/week2.md | 127 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 128 insertions(+), 1 deletion(-) create mode 100644 2017/week2.md diff --git a/2017/README.md b/2017/README.md index 70a0a38..2f5521f 100644 --- a/2017/README.md +++ b/2017/README.md @@ -18,7 +18,7 @@ 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 | TBD | +| Feb. 8 | [Putting Things on the Internet, HTML, the Web Inspector](week2.md) | | Feb. 15 | TBD | | Feb. 22 | TBD | | **March 1** | **No Session** | diff --git a/2017/week2.md b/2017/week2.md new file mode 100644 index 0000000..9300a29 --- /dev/null +++ b/2017/week2.md @@ -0,0 +1,127 @@ +# 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_" + +### 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: + * `

` + * `

` + * `

` + * `

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