Learn to Code in 40 Steps
•Télécharger en tant que PPT, PDF•
1 j'aime•3,598 vues
A presentation given to SIPA New Media Task Force members who wanted to start coding but weren't sure where to start.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (17)
Similaire à Learn to Code in 40 Steps
Similaire à Learn to Code in 40 Steps (20)
Plus de Sara-Jayne Terp
Plus de Sara-Jayne Terp (20)
Dernier
Dernier (20)
Learn to Code in 40 Steps
- 1. Learning to Code Sara Terp @bodaceacat
- 2. Let’s Begin
- 3. Why are you here?
- 4. Being a Computer Scientist is… • • • • • • …knowing all the gotchas that trip you up …like security …and scaling …solving an endless series of puzzles …sometimes deeply frustrating …someone you can hire once your idea’s funded and off the ground
- 5. … So Build Prototypes (MVPs) “I went through 3-4 years thinking I was going to meet some magical engineer who would build all the stuff I was thinking about. But I never met that person, so I taught myself ASP and MS Access out of a book and got to work just hacking stuff together. I’m still a really shitty programmer, but I know enough to hack a prototype together” - Dennis Crowley, Foursquare founder
- 6. … and Don’t Worry About Perfect “Contestants must create a working software application that uses one or more of the MTA data sets or APIs available at http://mta.info/developers/, and includes the ability to update/refresh the data” – 2013mtaappquest.challengepost.com
- 9. Which Application? don’t code Minimally adapt code Build small Use a framework Build custom Website Use Wordpress, Drupal, Joomla etc. Add Php to wordpress, drupal etc Write html Write in Ruby/Rails, Python/Django, Php/Codeignitor etc Write in Ruby, Python, Php etc Mobile phone Use SMS. Use Funf, Conduit etc Write html Write Java, Obective-C Desktop tool Use Excel, download apps etc Add Visual Basic functions to Excel etc. Command line interface Graphical user interface Write in C++, Java, etc. Microcontrollers Build circuits Write in Python, C etc
- 10. Which Mentors?
- 11. How Easy to Get Started? • Html – very easy • Css – easy • Javascript – not so easy, but powerful • Php – very easy, can be messy • Ruby/Rails – easy, structured • Python/Django – not so easy, structured, very powerful data-handling libraries
- 12. Getting Started
- 13. Find Your Terminal Window • Windows: from start menu, go to “all programs -> accessories -> command prompt” • Mac: go to “/applications/utilities” then click on “terminal” • Linux: you’re already there
- 14. Get a Good Text Editor • • • • Notepad++ Komodo Edit Eclipse Idle (for Python)
- 16. Install a Virtual Server
- 18. HTML code: *.htm, *.html
- 19. HTML Effects
- 20. HTML Help • Getting started: – Write a file with extension “.htm” or “.html” – Open the file in a browser • Getting help: – Http://w3schools.com/ – http://learn.shayhowe.com/html-css – http://www.htmlgoodies.com/ – http://www.dontfeartheinternet.com/
- 21. CSS code: *.css
- 22. CSS Effects
- 23. CSS Positioning
- 24. CSS Help • Getting started: – Write a .css file – Add “<link rel="stylesheet" href=“yourfilename.css">” to an html file • Getting help: – use the same sites as for html – http://css-tricks.com/
- 25. Javascript code: *.js Or add “<script src=“myjavascriptfile.js”></script>” to your html file
- 27. Javascript Help • Getting started: – Add javascript to your html files – Write .js file and add link to html files • Getting help: – http://www.w3schools.com/js/ – http://www.codecademy.com/tracks/javascript – http://www.w3schools.com/ajax/
- 29. Php: *.php
- 30. Php: Getting started • First, set up a virtual server (WAMP, MAMP, XAMPP etc). • Then put your php file into directory wamp/www (or mamp/www or xampp/www) • Start the virtual server • Point your browser at localhost/myphpfile.php
- 32. Php: Getting Help • Tutorials: – http://php.net/manual/en/tutorial.php – http://www.codecademy.com/tracks/php • Meetups: – http://www.meetup.com/nycphp/ – http://www.meetup.com/new-york-php/ • Resources: – http://php.net/manual/en/langref.php
- 33. Ruby: *.rb
- 35. Ruby / Rails: getting help • Courses: – http://www.codecademy.com/tracks/ruby – https://www.codeschool.com/ • Meetups: – http://www.meetup.com/ruby-nuby-info/ – http://www.meetup.com/NYC-rb/ – http://www.meetup.com/nycruby/ • Guides: – http://guides.rubyonrails.org/ – http://railscasts.com/
- 36. Python: *.py
- 37. Python: getting started • https://wiki.python.org/moin/BeginnersGuide/Do • http://docs.python-guide.org/en/latest/ (look under “properly install”) • http://icanhazdatascience.blogspot.com/2013/03/
- 38. Python: getting help • • • • • • • • The Best Way to Learn Python (Read) Learn Python the Hard Way (Read) The Python Tutorial (Read) NewBoston's Python videos (Watch) http://www.pyschools.com/ (Do) Codecadamy's Python course (Do) MIT's Intro to Computer Science (Study) help(xx)
- 39. Learning a Language is Only the Start
- 40. Find Help Online
- 41. Go to Meetups and Hackathons
- 42. Find a Team to Learn With
- 43. Find Some Good Courses • Courses: – Codecademy .com – MITx.org – Coursera.org – https://generalassemb.ly/ ($) • Coding challenges: – ProjectEuler.net – TopCoder.com challenges
- 44. Find A Project to Learn From
- 45. Find Something To Do On a Project
- 46. Last (but not least) • Please! – Comment your code – Use coding standards – Learn about Test-Driven Development – Be adventurous : • Failing isn’t bad, it’s learning! • If a learning method doesn’t work for you, it’s not you: try a different method!
Notes de l'éditeur
- {"38":"help(xx) is a python command. If you’re not sure about a python variable or function, type help(functionname) to see what you can do with it.\nAnd there’s now a Ruby version of learn python the hard way… called “Learn Ruby The Hard Way”. \n","27":"Here’s how to get started, and where to find more help. \nYou also need to know about AJAX. AJAX (Asynchronous JavaScript and XML) is a way to only change the pieces of a webpage that you need to – e.g. if all you want to do is change the name of a button, you change the name of that button rather than reloading the whole page from the Internet. \n","16":"You’ll need somewhere to write and test software that you’re developing for the internet, and you won’t always be online when you’re coding (I’m writing this line on the New York subway…). \nTesting your internet code ‘locally’ (on your own pc) is easy in straight Ruby/Rails and Python/Django. But if you want to test php code for the internet, or link your code up to a mysql database, a virtual server is a must. \nThe two most common ones are WAMP (for Windows) and MAMP (for Mac). There are install instructions for these here: http://themetaq.com/articles/quick-wamp-and-mamp. There are some gotchas installing \nWAMP on a 64-bit Windows7 machine - http://blog.overcognition.com/?p=483 has some tips on how to deal with these.\n","5":"You don’t have to build the ‘perfect’ system. And you certainly won’t build the perfect version of your system in one go. Get used to thinking about Minimum Viable Products – e.g. what’s the smallest system you can build to show and test your ideas. \n","44":"Go find a project doing something that interests you in a language you want to learn. \nAsk around, both online and at meetups. Search the internet… for example, this is a Github search that I did for humanitarian projects. Notice the project at the top, flavour/eden. It’s in Python, has lots of contributors and was updated recently – it’s probably a good place to learn from. \n","33":"If you want to build a site quickly, do it in Ruby. \nAnd Ruby scales… e.g. you can build websites that handle a *lot* of internet traffic in it.\n","22":"Here’s what that css file did to the html code we saw earlier. \nCSS can also hide and unhide parts of the html code (e.g. if you have a form that’s only needed sometimes), and change the *position* of items in the html code. That’s where the <div> tags come in handy, because you can name them, e.g. in the html: \n<div id=“sara_sidebar”>\nTo move this part of the html to the top right of the webpage, you type this in the css file: \ndiv.sara_sidebar\n{\nposition:fixed;\ntop:30px;\nright:5px;\n}\n","11":"Last question: how soon do you want to build something?\nAnd there’s a tradeoff here: a really easy language like HTML probably won’t do everything you need your system to do, so think again about why you want to learn to code, and what you want to do with it. Then pick a language that fits that need. \n","39":"When you start coding, you’ll learn quickly that there’s a gap between the things that you want to do and the things that you can do at the moment. Don’t worry about this – it’s normal. Do go find some allies to help you learn. Here’s how.\n","28":"Back-end languages do all the things that aren’t about putting text on a webpage. Things like: getting data into and out of databases; managing user logins; connecting to other systems (using things like APIs).\n","17":"We’re going to look at some languages used in web applications. A web application is software that you access over the internet. It has a front end and a back end. Front-end languages control what you see when you go to a website; back end languages control everything else. \nIf you want to look at the front-end code for a website, right-click on a webpage and select “view source”. \nIf you want to see what produced a specific button, effect etc, then use one of the browser tools: \nIn Chrome (https://www.google.com/intl/en/chrome/browser/), right-click on the button etc and select “inspect element”\nIn Firefox, install Firebug (http://getfirebug.com/). \n","6":"This is part of the rules for a $20,000 software app contest (MTA New York). Notice that nowhere does it say “and the app should be perfect and beautiful”. It says “working” and it adds some rule about using the MTA data, but that’s it. \nAs soon as people start using your system, you’ll learn things about what they need and want, and they won’t be the things that you thought they would. So build “quick and dirty” prototypes; start with something that doesn’t do everything and doesn’t have to look amazing, and iterate… get people using your prototypes and giving you feedback, and change your system a little bit at a time. \n","45":"Once you’ve found a project, find the community that goes with it. Search for the name, or email the main contributors to ask how you could help (it’s not just coding help they need – writing user guides that describe what the code does is a much-needed skill too). Many projects have issues lists – lists of bugs (the things that are wrong with the code) they’d like to fix, and features they’d like to have (this is the issues list for the web version of Ushahidi). Picking one of these is a very very good way to learn about how a system works, and you can usually get help with it from the rest of the team.\n","34":"To get started, just go to Railsinstaller.org. It’ll save you a huge amount of time.\nStarting a Rails project is pretty magic. \nGo to your command prompt, move to the directory you want the rails project in (use command “cd” to do this), and type “rails new nameofyourproject”)\nGo into the rails project directory (“cd nameofyourproject”)\nType “rails server”\nIn a web browser, go to http://localhost:3000/\nHeroku is a good site if you want to move a Rails apps from your local machine onto a real, live, on-the-web server (this is known as “hosting”): https://devcenter.heroku.com/articles/getting-started-with-rails4.\nOther hosting sites include Amazon Web Services (http://aws.amazon.com/), EngineYard.com, Rackspace and Digital Ocean.\n","23":"I knew you were going to ask. \nBe careful what you wish for: CSS positioning can get messy quickly – it really helps to understand the idea of CSS “boxes” when you’re designing a new page.\nThe above, by the way, was *absolute* positioning – there’s also a lot to be done by positioning pieces of the html code *relative* to each other, e.g. in 2 or 3 columns from left to right across the page. It takes a little while to learn, but mastering CSS positioning means you can build websites that look the way you were dreaming about before you started coding in HTML.\n","12":"So… before we look at some languages, there are some things that confused me when I started that would be good for you to try now. \n","1":"Abstract: \n1-hour lecture given to Columbia University’s New Media Task Force (http://newmediataskforce.wordpress.com/), to help students start to build computer applications themselves.\n","40":"If I have a coding problem that I can’t fix, then nine times out of 10, I find the answer on Stack Overflow. First do a Google search for your problem, then write a question on StackOverflow.com if you can’t find the answer to it.\nIRC (Internet Relay Chat) lets you chat in real time with other people around the world. A lot of coders use IRC to talk to each other, and there’s at least one IRC channel for each language. \nYou’ll need a software package to access IRC: I use MIRC (http://www.mirc.com/get.html) to access IRC on Windows; for mac users, Colloquy (http://colloquy.info/) and LimeChat (http://limechat.net/mac/) are both popular.\nSome teams also hang out and chat on Skype, but this isn’t as popular as IRC.\nOther good places for help include Safari Books Online ($, but gives you access to huge numbers of technical books) - https://ssl.safaribooksonline.com/trial.\n","29":"Here’s PHP. It’s an easy language to learn, and (perhaps because of that) very popular in international development. \n","18":"This is html. \nHtml is the language that browsers read to decide what to display on a webpage, where to display it and how to format it. \nIt’s a pretty simple language. Everything is enclosed in “tags” – like this “<html>” tag here. Every tag – except “<p> and <br>” – has a start tag, <tag> and an end tag </tag>. Everything inside a pair of tags is affected by them. \nSome common tags you’ll see: \n<html><head></head><body></body></html> tells the browser that this is html, which parts are general instructions, and which parts are displayed. \n<p>- paragraph\n<h1><h2><h3> - headings\n<br> - new line\n<img> - picture\n<div> - division. You don’t see this tag, but it’s used by other code (like css) to change the things inside it.\n","7":"Lots of new programmers agonize about which programming language to use. Don’t. The basic commands available in most modern languages are pretty similar: if-then-else, for loops, print etc. Basically, pick a language that fits what you’re interested in and that you can get started with quickly, play with it, use it, and learn other languages if you have to.\nBut just in case, here are some things to think about… \n","46":"Comments are lines in your code that don’t do anything, but do leave a text message for the next coder (or you) to read. Comments help you understand what you were doing and why, when you come back to your code, and save a lot of later pain. \nA coding standard is an agreement between programmers to write their code so it all looks similar. For instance, the python coding standard is PEP8: http://www.python.org/dev/peps/pep-0008/ - this says things like “lines shouldn’t be more than 79 characters long”. Ruby has “the unofficial coding guide”, http://www.caliban.org/ruby/rubyguide.shtml. Php has PEAR and PSR: http://jason.pureconcepts.net/2012/11/php-coding-standards/\nTest-driven development is the idea that you first write what you want your code to do, then you run your code, watch it fail your tests, then fix the code until the tests pass. On a big project with lots of developers, this is the only thing standing between you and the code potentially breaking in places you didn’t expect every time someone updates it.\n","35":"Here are some places to get Rails (note that Ruby is rarely used without Rails) help. Again, note the meetups – the Ruby Nuby is specifically for beginning Rails programmers, so that might be a good place to start.\n","24":"And here’s how to get started with CSS.\n","13":"If you’re back-end coding, you’ll probably use the terminal window a lot. Here’s where to find it. \nIt’s also called “terminal” and “command prompt” (http://pcsupport.about.com/od/termsc/p/command-prompt.htm) sometimes.\n","2":"Hi! I’m Sara – I’m a system designer, a coder, and I’m relearning how to be a developer. The NMTF asked me to talk to you today because some of them are in Eric Cantor and my class “ICT for Development and Social Change at SIPA”, where we teach people how to design systems that make a positive difference that users can use, and coders can create. \nWe’re not teaching coding on that course because frankly being able to design a good system is a valuable skill in itself, and coding can take a long time to teach. There’s a Columbia Business School course that teaches coding, but it’s hard to get into and there isn’t a SIPA equivalent yet. So today’s lecture is about the ways you can teach yourself to build software quickly.\n","41":"Good local meetups that include language training include Ruby Nuby and PyLadies. \n","30":"Now we’re on back-end languages, it gets a little harder to start running your code. \nYou can’t run PHP files without a ‘web server’ – a computer that knows how to process instructions in languages like php. Luckily, there are lots of ‘virtual’ servers out there – software that you can use to mimic a web server on your local PC. We mentioned some of these earlier. \nAs an aside, if you try running a php file without a server, you’ll see that your browser comments out all the php code, and only the html code will be visible. \n","19":"And here’s what that piece of code produced.\n","8":"Question 1: which hardware are you planning to run this system on? You can run most languages on most ‘hardware platforms’, but making that happen can take a huge amount of computer science knowledge. Some platforms are designed to work with specific languages; some languages are just easier to use on some platforms. Here’s the basic list: \nComputer that isn’t connected to the Internet, i.e. someone’s running your code on their own machine: lots of languages available, including C, C++, Visual Basic, Java, Python, Ruby, R... Gotchas: people will have to install your code on their machine. This can get messy.\nComputer that is connected to the Internet, i.e. someone’s running your code through your website: lots of languages available, including Html/Css, Javascript, Php, Ruby, Python, Java…\nPhones and tablets, i.e. someone’s running your app on their phone: First, all smartphones support web-based applications, e.g. you can use them to view websites instead of programming a “native app”. If you do want to build an app (and one of the reasons you might want to do this is that you don’t have to be connected to the internet to run an app), Android phones are usually programmed in Java, using the Android Software Development Kit. iPhones are usually programmed in a variant of C called Objective-C. Blackberry phones are usually programmed in Java. \nMicrocontrollers, i.e. someone’s running your code on a miniature computer, e.g. to sense and control things in your environment, like robots and air quality: The Raspberry Pi is usually programmed in Python, (although other languages are possible); Arduinos are usually programmed in a variant of C. \n","36":"Python is a very powerful language that’s great for data wrangling. It takes a while to learn how to use all of it, but there’s a lot there to love, including powerful natural language processing libraries. \n","25":"Javascript is used to control “active” things in html, like checking your form inputs are valid. \nJavascript, like css, can be added into html code (look for the <script> tags) or added to an external file and included in html files, like this: \n<html>\n<head>\n<script src=“myfirstjavascript.js”></script>\n</head>\n<body>\n</body>\n</html>\nJavascript references can go in the head or the body of an html file, although they’re usually put into the head.\n","14":"You will spend a lot of your time as a coder debugging (finding and fixing errors in the code). Doing that with wordpad is painful. Here are some text editors that are set up for displaying code – with line numbers at the side of the code, with colour highlighting of different types of command, and sometimes even with colour highlighting of bugs as you write them. \nPersonally, I use Notepad++ (http://notepad-plus-plus.org/) for most things, and Idle (http://www.annedawson.net/Python_Editor_IDLE.htm) for Python coding. Notepad++ is a good place to start. As you learn to code, you’ll find that one editor will become your favourite. \n","3":"First, some questions for you:\nWhy are you here? Do you want to learn to code so you can build things that work; to try out new ideas; to build the next facebook; to enter competitions?\nHow much time do you have available?\nWhat sort of systems do you want to build? What interests you? What moves you? What are your favourite systems that already exist, and why?\nMy own answers to those questions:\nI’m here because I’m not really a coder… I’m a systems architect – someone who works out how technology fits into a bigger system of people, processes and equipment, and helps determine what that system should do. The things that I do with code are build prototypes to test out ideas about a system, and build tools to do little jobs like processing data the way that I need to. I do also write ‘commercial’ code, for companies like Ushahidi, but that’s a different skill, and one that takes a lot more time, patience and downright detective work than many of you will need to succeed. \nI never have any time, but as the saying goes, “if you want something done, ask a busy person…”\nI want to build systems for communities that include people in the developing world. Equality interests me, especially the equality of opportunity that we can have in a globally-connected world. My favourite systems are elegant, minimal, and carry on working when the world goes to heck – Facebook, Twitter, Skype (although that isn’t so great on the elegant), Ushahidi. \n","42":"You’ll become a better computer scientist if you work in a team. Places you can join teams include:\nOpen-source projects on Github\nDedicated team sites (e.g. OpenHatch.com and codeMontage.com)\nHackathons\nExisting open-source applications (Ushahidi, Sahana Foundation, OpenStreetMap etc)\nJoining a social coding company – you don’t have to start as a coder!\n","31":"This is what happens when we run that piece of php code on a Wampserver. Note the web address: localhost/phpexample.php – that’s exactly what you have to type in (not www.localhost or http://localhost). \nThe middle line was produced by the php code; the other lines are in html. \nThis is a very simple example, but some very complex web systems are built in php, including Ushahidi, which uses the Kohana framework to keep its code tidy.\n","20":"It’s a small language, not too complex, but you need to know it if you’re doing anything on the Internet. Here are \nHow to write and run your first piece of html code\nWhere to find more help online.\n","9":"Question 2: what are you trying to build? And can you get away with doing less coding to produce your prototype faster? \nThis table isn’t finished yet – but your options for most platforms are: \nNo coding: use an existing application as the basis of your system. E.g. you want a basic website? Use WordPress. \nMinimal coding: add code to an existing application – e.g. add CSS code to change the layout of a WordPress site.\nBuild small: if you just want a box and a button, then just code a box and a button. You don’t have to build complicated systems to be successful.\nUse a framework: A framework is a reusable piece of software designed to make programming complex applications easier. Frameworks give you easy-to-use commands for things that are common across lots of applications, like logging in, security, database management and making pages look similar to each other. Frankly, if it’s appropriate and you can use one, do: it saves a lot of time writing the code, and a lot of time debugging and maintaining it later.\nBuild custom: if a framework doesn’t fit your needs (and for most web applications, a framework usually does), then write everything from scratch (but use libraries where you can). \n","37":"Some places to get you started with python. Full disclosure: my cat Emily writes the icanhazdatascience blog.\n","26":"And here’s what that piece of javascript produced: a button that, when pressed, creates a ‘pop-up’ box with a message and another button.\n","15":"GitHub (github.com) is a collection of ‘repositories’ – directories containing software, descriptions and issue lists that are all available together online. \nBut Git is much more than that. It’s social: it lets many people all edit the software offline (on their own computers) and ‘push’ changes to it to the repository that can be accepted or rejected by the repository owners. It has ‘branches’ – copies of the repository that subgroups can play with and add new things to without affecting the main repository code, so you can break things locally without breaking a working system. \nGithub is also a great place to find open source software – software that you can use for free, and change to fit what you need.\n","4":"Being a coder isn’t the same as being a developer. You start by learning to code, then learn how to turn that into reliable systems. Today is about the coding part. \n","43":"MOOCs (Massive Online Open Courses) have really changed access to good coding courses. Here are some of the main MOOCs (codecademy is dedicated to coding, MITx is open MIT courses, coursera is courses from many universities): see also http://www.mooc-list.com/ and http://en.wikipedia.org/wiki/Massive_open_online_course. \nGeneral Assembly is a training company in New York that’s run by coders: the courses aren’t free, but they’re generally excellent. \nAnd if you want to practice on your own before starting with a team, there are coding challenges (websites containing small coding tasks that you submit solutions to). \n","32":"And here are some good places to find PHP help. Note that, as we start on backend languages, I’m suggesting that you go to meetups and meet other coders. You will get stuck occasionally, and having a bunch of people to ask rather than fighting the system by yourself can be a very very sanity-restoring thing. Especially if the answer turns out to be “oh, you just add a couple of characters here…”. \n","21":"Css tells the browser how to format the html, e.g. how to display each element and where to put it on the page. \nHere’s a simple piece of CSS that makes everything in <p> tags red and bigger, and everything in <td> tags green. To apply a piece of css to a html file, you either need to put the CSS code in the HTML file, \ne.g. by\n<html>\n<head>\n<style>\np {color: #ff0000; font-size: 24px;}\ntd {color: #00ff00;}\n</style>\n<title>Example HTML file</title>\n</head>\n<body> etc\nOr put the css into its own file (aka “external style sheet”) and add a “reference” to the html file – that’s the “<link rel…” line in the html code above.\n","10":"Question 3: where are the people you can learn from? \nPicking a language isn’t just about picking a language. It’s about finding the places and people that can help you write the system you want to, in your chosen platform, area etc. \nSo go out and find which languages the projects you like are written in. Google the websites and apps you want to be like – find out which languages they’re written in, and why (better yet, see if there are any articles about why the developers wouldn’t pick the language if they could start again now). \nThis is a github search for an area I’m personally interested in: HFOSS (Humanitarian Free and Open Source Software, http://www.hfoss.org/). The top project lists its language as Python… the list on the left shows all the languages that people used in this list of projects. If I started again today, I’d probably go help out on one of the Open Source projects that interests me, and cut my teeth fixing bugs for them until I knew enough to build my own systems.\n"}