LESSON ONEWeb Apps 101
Course Overview
WHO WE AREWill Gaybrick•   Currently: Thrive Capital / YLS ’12•   Previously: Harvard ’07 (math) => finance (Blackstone) =>...
WHY HACKYALE?Good ideas + good developers => goodtech companies•   Yale ⊃ many students with good ideas•   Yale ⊅ many stu...
GOALSCourse Overview
GOALSPractical, not theoretical / academic•   Zero => prototype•   Prototype => full application•   Not training CTOs
GOALSFocus on processes and psychology of webdevelopment more than content•   Learn by doing; learn by immersion•   Memori...
GOALSGoogle is your friend
GOALS80% of web development is knowing whereto lookMost common answer => Google•   Things to Google:         --Error messa...
Anatomy 101[for web applications]
TERMINOLOGYClient-server model     •   Client == (you and your) browser     •   Server == machine sending (or “serving”) y...
REQUEST-RESPONSE CYCLE(1) Client (browser) makes a “request”     •   “Request” == textual message whose syntax and        ...
THE CLIENT-SERVER MODEL          REQUEST FOR         - html, css, js         - image         - document         - etc…    ...
KEY TECHNOLOGIES             Anatomy 101          [for web applications]
ON THE CLIENT SIDE              REQUEST FOR             - html, css, js             - image             - document        ...
ON THE SERVER SIDE              REQUEST FOR             - html, css, js             - image             - document        ...
JAVASCRIPT ON BOTH!              REQUEST FOR             - html, css, js             - image             - document       ...
The Command Line       [brief intro to  operating systems]
OPERATING SYSTEMSOperating systems sit between applicationsoftware and computer hardware    •   Examples: Mac OSX, Linux (...
OPERATING SYSTEMS“System calls” are the interface by which aprogram communicates with an OS       •   Ex: open, read, writ...
THE COMMAND LINE•   The command line is a program that provides a text-only    interface to communicate dynamically with t...
THE COMMAND LINE•   On OSX, the command line program is “Terminal” (in Utilities), a    BASH implementation•   On Windows7...
THE COMMAND LINE
The Front End[client side code]
Front-End DevelopmentAn interaction between three “languages”    •   HTML - the content of the internet    •   CSS - the s...
HTMLThe “content” of the internet     •   just text, no formatting.
HTMLThe “content” of the internet     •   just text, no formatting.
HTMLThe “content” of the internet     •   just text, no formatting.
Coding in HTMLTags delineate ‘code’ from content.     • <div> I’m inside a tag! </div>     • Tags have “properties,” and t...
Popular Tags• <div> the delineating blocks of html      <div>This content will be in an div block!</div>• <a> links      <...
Form Tags<form>   First name: <input type="text" name="firstname" /><br />   Last name: <input type="text" name="lastname"...
Form Tags<form>   First name: <input type="text" name="firstname" /><br />   Last name: <input type="text" name="lastname"...
HTML in action!
HTML in action!But there’s no styling...
Enter, CSS            “Cascading Style Sheets”<p> Hello World! </p><p> Paragraphs are great! </p><p> Totally </p>
Enter, CSS            “Cascading Style Sheets”<p> Hello World! </p><p> Paragraphs are great! </p><p> Totally </p>
Now make them red. Alright, no problem sir!
Now make them red.            Alright, no problem sir!<p style=”color:red”> Hello World! </p>
Now make them red.            Alright, no problem sir!<p style=”color:red”> Hello World! </p><p style=”color:red” > Paragr...
Now make them red.             Alright, no problem sir!<p style=”color:red”> Hello World! </p><p style=”color:red” > Parag...
Now make them red.             Alright, no problem sir!<p style=”color:red”> Hello World! </p><p style=”color:red” > Parag...
Meh. Now make them blue.  But I just changed them all!
Meh. Now make them blue.           But I just changed them all!<p style=”color:blue”> Hello World! </p>
Meh. Now make them blue.           But I just changed them all!<p style=”color:blue”> Hello World! </p><p style=”color:blu...
Meh. Now make them blue.           But I just changed them all!<p style=”color:blue”> Hello World! </p><p style=”color:blu...
Meh. Now make them blue.           But I just changed them all!<p style=”color:blue”> Hello World! </p><p style=”color:blu...
In-line styling is sloppy
In-line styling is sloppy  CSS lets us get “DRY” =>  don’t repeat yourself!
Styling in CSSTwo Benefits
Styling in CSSTwo Benefits    1. Cleaner code
Styling in CSSTwo Benefits    1. Cleaner code    2. Flexible code
Selectors in CSSStyles are applied to selectors.
Selectors in CSSStyles are applied to selectors.     1. tags, i.e.: div, a, p
Selectors in CSSStyles are applied to selectors.     1. tags, i.e.: div, a, p     2. classes, non-unique identifiers
Selectors in CSSStyles are applied to selectors.     1. tags, i.e.: div, a, p     2. classes, non-unique identifiers     3....
Selectors in HTML
Selectors in CSS
Without CSS
With CSS
Javascript[making web pages         dynamic]
OverviewJavascript introduces logic into the client side     •   Ex: If page element A is clicked, make page element      ...
Brief History of JavascriptSee: this excerpt from Metafilter     •   Created by Brendan Eich at Netscape in less than      ...
JavascriptA general purpose programming language    •   Unlike HTML / CSS, which are domain specific    •   Contains variab...
Server Side JavascriptThanks to Google & Joyent, Javascript is nowcommonly used server side    •   Google’s V8 engine => J...
Deployment[going live with your                code]
ESSENTIAL ASIDE: GIT“Git” is a document version control tool     •   Created by Linus Torvalds & team to manage         di...
ESSENTIAL ASIDE: GIT“Git” will be confusing at first     •   Don’t get frustrated     •   Don’t start by reading a Git refe...
GITHUB         Deployment[going live with your code]
GITHUBWebsite (github.com) that hosts applicationcode     •   Free if you share it     •   Pay to protect it
GITHUBAs the name suggests, Github is integratedwith the git utility    •   Genius customer acquisition strategy => slip  ...
GITHUB“Github is the hacker resume” -Clever person
GITHUBWe will be using GithubPart of your homework for this week is toinstall git and make a Github profile
HEROKU         Deployment[going live with your code]
HEROKUCloud based service that hosts applications     •   Hosting code != hosting applications     •   A “front end” to Am...
HEROKUIncredibly fast deployment via command line:     •   (1) $ gem install heroku     •   (2) $ heroku create     •   (3...
HEROKUFantastic business    •   Integrated Insert to Githubto=> genius customer                    with sell Heroku       ...
HEROKU                                            Lookup Rack middleware.                                            Route...
QUESTIONS?contact will_and_bay@hackyale.com
Week 1
Upcoming SlideShare
Loading in …5
×

Week 1

499 views
406 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
499
On SlideShare
0
From Embeds
0
Number of Embeds
52
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

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
  • Week 1

    1. 1. LESSON ONEWeb Apps 101
    2. 2. Course Overview
    3. 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. 4. WHY HACKYALE?Good ideas + good developers => goodtech companies• Yale ⊃ many students with good ideas• Yale ⊅ many students who can implement those ideas
    5. 5. GOALSCourse Overview
    6. 6. GOALSPractical, not theoretical / academic• Zero => prototype• Prototype => full application• Not training CTOs
    7. 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. 8. GOALSGoogle is your friend
    9. 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. 10. Anatomy 101[for web applications]
    11. 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. 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. 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. 14. KEY TECHNOLOGIES Anatomy 101 [for web applications]
    15. 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. 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. 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. 18. The Command Line [brief intro to operating systems]
    19. 19. OPERATING SYSTEMSOperating systems sit between applicationsoftware and computer hardware • Examples: Mac OSX, Linux (UNIX), Windows 7 { memory operating system CPU hard disk
    20. 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. 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. 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. 23. THE COMMAND LINE
    24. 24. The Front End[client side code]
    25. 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. 26. HTMLThe “content” of the internet • just text, no formatting.
    27. 27. HTMLThe “content” of the internet • just text, no formatting.
    28. 28. HTMLThe “content” of the internet • just text, no formatting.
    29. 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. 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. 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. 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. 33. HTML in action!
    34. 34. HTML in action!But there’s no styling...
    35. 35. Enter, CSS “Cascading Style Sheets”<p> Hello World! </p><p> Paragraphs are great! </p><p> Totally </p>
    36. 36. Enter, CSS “Cascading Style Sheets”<p> Hello World! </p><p> Paragraphs are great! </p><p> Totally </p>
    37. 37. Now make them red. Alright, no problem sir!
    38. 38. Now make them red. Alright, no problem sir!<p style=”color:red”> Hello World! </p>
    39. 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. 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. 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. 42. Meh. Now make them blue. But I just changed them all!
    43. 43. Meh. Now make them blue. But I just changed them all!<p style=”color:blue”> Hello World! </p>
    44. 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. 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. 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. 47. In-line styling is sloppy
    48. 48. In-line styling is sloppy CSS lets us get “DRY” => don’t repeat yourself!
    49. 49. Styling in CSSTwo Benefits
    50. 50. Styling in CSSTwo Benefits 1. Cleaner code
    51. 51. Styling in CSSTwo Benefits 1. Cleaner code 2. Flexible code
    52. 52. Selectors in CSSStyles are applied to selectors.
    53. 53. Selectors in CSSStyles are applied to selectors. 1. tags, i.e.: div, a, p
    54. 54. Selectors in CSSStyles are applied to selectors. 1. tags, i.e.: div, a, p 2. classes, non-unique identifiers
    55. 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. 56. Selectors in HTML
    57. 57. Selectors in CSS
    58. 58. Without CSS
    59. 59. With CSS
    60. 60. Javascript[making web pages dynamic]
    61. 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. 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. 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. 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. 65. Deployment[going live with your code]
    66. 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. 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. 68. GITHUB Deployment[going live with your code]
    69. 69. GITHUBWebsite (github.com) that hosts applicationcode • Free if you share it • Pay to protect it
    70. 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. 71. GITHUB“Github is the hacker resume” -Clever person
    72. 72. GITHUBWe will be using GithubPart of your homework for this week is toinstall git and make a Github profile
    73. 73. HEROKU Deployment[going live with your code]
    74. 74. HEROKUCloud based service that hosts applications • Hosting code != hosting applications • A “front end” to Amazon EC2 • HackYale.com lives on Heroku
    75. 75. HEROKUIncredibly fast deployment via command line: • (1) $ gem install heroku • (2) $ heroku create • (3) $ git push heroku master
    76. 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. 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. 78. QUESTIONS?contact will_and_bay@hackyale.com

    ×