Your SlideShare is downloading. ×
Week 1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Week 1

347
views

Published on

Published in: Education, Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
347
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. LESSON ONEWeb Apps 101
    • 2. Course Overview
    • 3. WHO WE AREWill Gaybrick• Currently: Thrive Capital / YLS ’12• Previously: Harvard ’07 (math) => finance (Blackstone) => startups (hunch.com, jumo.com, milewise.com)Bay Gross• Currently: BlueFusion / Yale ’13• Previously: Various web apps, magnum opus => isitchickentendersday.com
    • 4. WHY HACKYALE?Good ideas + good developers => goodtech companies• Yale ⊃ many students with good ideas• Yale ⊅ many students who can implement those ideas
    • 5. GOALSCourse Overview
    • 6. GOALSPractical, not theoretical / academic• Zero => prototype• Prototype => full application• Not training CTOs
    • 7. GOALSFocus on processes and psychology of webdevelopment more than content• Learn by doing; learn by immersion• Memorization as the emergent byproduct of experience• We can’t make you successful developers• We can equip you with kernel of knowledge and key resources with which to makes yourselves successful developers
    • 8. GOALSGoogle is your friend
    • 9. GOALS80% of web development is knowing whereto lookMost common answer => Google• Things to Google: --Error messages --Syntax --Entire problems. Ex: “javascript dropdown menu”
    • 10. Anatomy 101[for web applications]
    • 11. TERMINOLOGYClient-server model • Client == (you and your) browser • Server == machine sending (or “serving”) you the data and files you request“Host” ~== “server” • “to host” (code, files, applications) ~== “to serve”“Local” => hosted on the machine in question“Remote” => hosted on a different machine
    • 12. REQUEST-RESPONSE CYCLE(1) Client (browser) makes a “request” • “Request” == textual message whose syntax and semantics are defined by HyperText Transfer Protocol (“HTTP”)(2) Server issues a “response” • “Response” == textual message whose syntax and semantics are defined by HTTP • Contains status code. Ex: 404 (“Not Found”), 200 (“Okay”), 500 (“Internal Server Error”)(3) Cycle repeats itself
    • 13. THE CLIENT-SERVER MODEL REQUEST FOR - html, css, js - image - document - etc… RESPONSE FROMCLIENT SERVER - requested content… or - some other reasonable response based on context (ex. 404 Not Found)
    • 14. KEY TECHNOLOGIES Anatomy 101 [for web applications]
    • 15. ON THE CLIENT SIDE REQUEST FOR - html, css, js - image - document - etc… RESPONSE FROMCLIENT SERVER - requestedHTML content… orCSS - some otherJAVASCRIPT reasonable response based on context (ex. 404 Not Found)
    • 16. ON THE SERVER SIDE REQUEST FOR - html, css, js - image - document - etc… RESPONSE FROMCLIENT SERVER - requested PYTHONHTML content… or RUBY (ON RAILS)CSS - some otherJAVASCRIPT reasonable response JAVA based on context (ex. 404 Not Found)
    • 17. JAVASCRIPT ON BOTH! REQUEST FOR - html, css, js - image - document - etc… RESPONSE FROMCLIENT SERVER - requested PYTHONHTML content… or RUBY (ON RAILS)CSS - some otherJAVASCRIPT reasonable response JAVA based on context (ex. JAVASCRIPT 404 Not Found)
    • 18. The Command Line [brief intro to operating systems]
    • 19. OPERATING SYSTEMSOperating systems sit between applicationsoftware and computer hardware • Examples: Mac OSX, Linux (UNIX), Windows 7 { memory operating system CPU hard disk
    • 20. OPERATING SYSTEMS“System calls” are the interface by which aprogram communicates with an OS • Ex: open, read, write, close, fork, killApplications consist of code: • (1) “Lower level” languages (C, for example) making such calls directly; or • (2) “Higher level” languages (Python, for example) making such calls indirectly via “compilation” into lower level languages
    • 21. THE COMMAND LINE• The command line is a program that provides a text-only interface to communicate dynamically with the operating system• Several different command line programs or “shells”: BASH (most common), sh (Bourne shell) { memory operating system CPU hard disk BASH, sh
    • 22. THE COMMAND LINE• On OSX, the command line program is “Terminal” (in Utilities), a BASH implementation• On Windows7, cmd.exe (native) or “Cygwin” (open source BASH implementation)
    • 23. THE COMMAND LINE
    • 24. The Front End[client side code]
    • 25. Front-End DevelopmentAn interaction between three “languages” • HTML - the content of the internet • CSS - the style of the internet • Javascript - the logic and action of the internet
    • 26. HTMLThe “content” of the internet • just text, no formatting.
    • 27. HTMLThe “content” of the internet • just text, no formatting.
    • 28. HTMLThe “content” of the internet • just text, no formatting.
    • 29. Coding in HTMLTags delineate ‘code’ from content. • <div> I’m inside a tag! </div> • Tags have “properties,” and these properties are then passed on to the content within the tags
    • 30. Popular Tags• <div> the delineating blocks of html <div>This content will be in an div block!</div>• <a> links <a href=”http://www.hackyale.com”>Home</a>• <img> images <img src=”http://www.hackyale.com/logo.png” />• <p> paragraphs <p>This text will be in a nice paragraph</p>
    • 31. Form Tags<form> First name: <input type="text" name="firstname" /><br /> Last name: <input type="text" name="lastname" /></form><form> <input type="radio" name="sex" value="male" /> Male<br /> <input type="checkbox" name="sex" value="female" /> Female</form><form name="input" action="/signup"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /></form>
    • 32. Form Tags<form> First name: <input type="text" name="firstname" /><br /> Last name: <input type="text" name="lastname" /></form><form> <input type="radio" name="sex" value="male" /> Male<br /> <input type="checkbox" name="sex" value="female" /> Female</form><form name="input" action="/signup"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /></form>
    • 33. HTML in action!
    • 34. HTML in action!But there’s no styling...
    • 35. Enter, CSS “Cascading Style Sheets”<p> Hello World! </p><p> Paragraphs are great! </p><p> Totally </p>
    • 36. Enter, CSS “Cascading Style Sheets”<p> Hello World! </p><p> Paragraphs are great! </p><p> Totally </p>
    • 37. Now make them red. Alright, no problem sir!
    • 38. Now make them red. Alright, no problem sir!<p style=”color:red”> Hello World! </p>
    • 39. Now make them red. Alright, no problem sir!<p style=”color:red”> Hello World! </p><p style=”color:red” > Paragraphs are great! </p>
    • 40. Now make them red. Alright, no problem sir!<p style=”color:red”> Hello World! </p><p style=”color:red” > Paragraphs are great! </p><p style=”color:red” > Totally </p>
    • 41. Now make them red. Alright, no problem sir!<p style=”color:red”> Hello World! </p><p style=”color:red” > Paragraphs are great! </p><p style=”color:red” > Totally </p>
    • 42. Meh. Now make them blue. But I just changed them all!
    • 43. Meh. Now make them blue. But I just changed them all!<p style=”color:blue”> Hello World! </p>
    • 44. Meh. Now make them blue. But I just changed them all!<p style=”color:blue”> Hello World! </p><p style=”color:blu” > Paragraphs are great! </p>
    • 45. Meh. Now make them blue. But I just changed them all!<p style=”color:blue”> Hello World! </p><p style=”color:blu” > Paragraphs are great! </p><p style=”color:red” > Totally </p>
    • 46. Meh. Now make them blue. But I just changed them all!<p style=”color:blue”> Hello World! </p><p style=”color:blu” > Paragraphs are great! </p><p style=”color:red” > Totally </p>
    • 47. In-line styling is sloppy
    • 48. In-line styling is sloppy CSS lets us get “DRY” => don’t repeat yourself!
    • 49. Styling in CSSTwo Benefits
    • 50. Styling in CSSTwo Benefits 1. Cleaner code
    • 51. Styling in CSSTwo Benefits 1. Cleaner code 2. Flexible code
    • 52. Selectors in CSSStyles are applied to selectors.
    • 53. Selectors in CSSStyles are applied to selectors. 1. tags, i.e.: div, a, p
    • 54. Selectors in CSSStyles are applied to selectors. 1. tags, i.e.: div, a, p 2. classes, non-unique identifiers
    • 55. Selectors in CSSStyles are applied to selectors. 1. tags, i.e.: div, a, p 2. classes, non-unique identifiers 3. ids, unique identifiers
    • 56. Selectors in HTML
    • 57. Selectors in CSS
    • 58. Without CSS
    • 59. With CSS
    • 60. Javascript[making web pages dynamic]
    • 61. OverviewJavascript introduces logic into the client side • Ex: If page element A is clicked, make page element B disappear • Ex: When a person submits their name to this box (“input”), hide the input and display “Thank you!”
    • 62. Brief History of JavascriptSee: this excerpt from Metafilter • Created by Brendan Eich at Netscape in less than two weeks => a little rough around the edges • Has almost nothing to do with Java • During the web 1.0 days, was much derided / blocked • Web 2.0 was really all about Javascript • Currently the most important language in existence
    • 63. JavascriptA general purpose programming language • Unlike HTML / CSS, which are domain specific • Contains variables & logical statements • “Event driven” => structured around “callbacks” • A “callback” is a function or code snippet executed upon the occurrence of some specified event
    • 64. Server Side JavascriptThanks to Google & Joyent, Javascript is nowcommonly used server side • Google’s V8 engine => Javascript lightning fast • Joyent => Node.js, a web application framework based on V8
    • 65. Deployment[going live with your code]
    • 66. ESSENTIAL ASIDE: GIT“Git” is a document version control tool • Created by Linus Torvalds & team to manage distributed development of Linux kernel • Consists of (1) a command line executable, and (2) a domain specific language (“DSL”) (“add,” “commit,” “push,” “pull,” “merge,” “checkout,” etc.) • Maintains a local repository of “diffs” allowing you to reconstruct the state of your code at the moment of any “git commit [file or directory]” command
    • 67. ESSENTIAL ASIDE: GIT“Git” will be confusing at first • Don’t get frustrated • Don’t start by reading a Git reference • You will grasp the basic commands quickly via example • Then feel free to supplement your knowledge by reference to resources section of HackYale.com
    • 68. GITHUB Deployment[going live with your code]
    • 69. GITHUBWebsite (github.com) that hosts applicationcode • Free if you share it • Pay to protect it
    • 70. GITHUBAs the name suggests, Github is integratedwith the git utility • Genius customer acquisition strategy => slip seamlessly into existing workflow • Send your code to github: git push [remote] [branch] • Get some code from github: git pull [remote] [branch]
    • 71. GITHUB“Github is the hacker resume” -Clever person
    • 72. GITHUBWe will be using GithubPart of your homework for this week is toinstall git and make a Github profile
    • 73. HEROKU Deployment[going live with your code]
    • 74. HEROKUCloud based service that hosts applications • Hosting code != hosting applications • A “front end” to Amazon EC2 • HackYale.com lives on Heroku
    • 75. HEROKUIncredibly fast deployment via command line: • (1) $ gem install heroku • (2) $ heroku create • (3) $ git push heroku master
    • 76. HEROKUFantastic business • Integrated Insert to Githubto=> genius customer with sell Heroku taken amount of time acquisitionSalesforce strategy • Free to host an app. Pay for “add-ons” and scale => another genius customer acquisition • Targeted Rails apps at outset => a third genius customer acquisition strategy • Hosted on Amazon’s servers => no Capex or server maintenance costs => high margins • Sold to Salesforce.com for $200mm after [X months]
    • 77. HEROKU Lookup Rack middleware. Routes to server?We will use Heroku • Supports both Node.js and Rails • More broadly, supports Rack middleware based applications • Part of this week’s homework is to create an account on Heroku and deploy a “static” page
    • 78. QUESTIONS?contact will_and_bay@hackyale.com

    ×