Lecture 1 - Comm Lab: Web @ ITP


Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Lecture 1 - Comm Lab: Web @ ITP

  1. 1. Communications Lab :: Web Lecture 1: Introduction / HTML
  2. 2. Course Instructor <ul><ul><li>Ruxy Staicut </li></ul></ul><ul><ul><li>Email : ruxy@nyu.edu </li></ul></ul><ul><ul><li>Office hours : Wednesdays 7-9 pm in the Adjunct Office </li></ul></ul><ul><ul><li>Resident Help Sessions : Thursdays 3:30-5 pm, Room 50 </li></ul></ul>
  3. 3. Course Information <ul><ul><li>Schedule </li></ul></ul><ul><li>      Mon 6:30 pm - 9 pm.  </li></ul><ul><ul><li>Location </li></ul></ul><ul><li>      Room A / B </li></ul><ul><ul><li>Course website </li></ul></ul><ul><li>      http://ruxystaicut.com/itp </li></ul>
  4. 4. A Little Bit About Yourself... <ul><ul><li>Name </li></ul></ul><ul><ul><li>Background </li></ul></ul><ul><ul><li>Experience with HTML / CSS / JavaScript / Sinatra? </li></ul></ul>
  5. 5. Today <ul><ul><li>Class introduction, schedule </li></ul></ul><ul><ul><li>You are here! Where are we on the ITP Technology Map? </li></ul></ul><ul><ul><li>Web pages: How do they work? </li></ul></ul><ul><ul><li>HTML elements: Let's build a web page! </li></ul></ul>
  6. 6. Course Goals <ul><ul><li>Learn to lay out and style a web page </li></ul></ul><ul><ul><li>Make the page responsive to the user </li></ul></ul><ul><ul><li>Embed a form for taking user input </li></ul></ul><ul><ul><li>Create a simple server to receive, store, manipulate, and return that input </li></ul></ul>
  7. 7. Schedule <ul><ul><li>Week 1, September 12th: Introduction/HTML  </li></ul></ul><ul><ul><li>Week 2, September 19th: HTML Forms and CSS </li></ul></ul><ul><ul><li>Week 3, September 26th: Sinatra Introduction and Routes </li></ul></ul><ul><ul><li>Week 4, October 3rd: Sinatra and DataMapper </li></ul></ul><ul><ul><li>Week 5, October 17th: JavaScript </li></ul></ul><ul><ul><li>Week 6, October 24th: Advanced Sinatra </li></ul></ul><ul><ul><li>Week 7, October 31st: Show Sites </li></ul></ul>
  8. 8. Assignments <ul><li>There will be readings assigned to each lecture. It is very important that you read what is assigned. They are additional tutorials that will help you understand the material in more depth. </li></ul><ul><li>The assignments are individual .  </li></ul><ul><li>You need to hand in the assignment for each class , otherwise it will be registered as a late assignment. </li></ul>
  9. 9. Grading <ul><li>Attendance and Participation: 35% </li></ul><ul><li>Assignments and presentations: 40% </li></ul><ul><li>Final Project: 25% </li></ul>
  10. 10. Software Required for Class <ul><ul><li>Komodo Edit </li></ul></ul><ul><ul><li>Chrome browser </li></ul></ul><ul><ul><li>Cyberduck </li></ul></ul>
  11. 11. Map: You Are Here <ul><ul><li>2D Design </li></ul></ul><ul><ul><li>Programming Language </li></ul></ul><ul><ul><li>UI / UX </li></ul></ul><ul><li>TODO: What other things are there on this map for other courses? </li></ul><ul><li>Picture by courtesy of  Aram Bartholl </li></ul>
  12. 12. Map: You Are Here <ul><ul><li>Client / Server Communication  </li></ul></ul><ul><ul><li>Data Structures  </li></ul></ul>
  13. 13. Map: You Are Here <ul><ul><li>Markup vs. Programming Language </li></ul></ul><ul><li>Markup </li></ul><ul><ul><li>Creates structure </li></ul></ul><ul><ul><li>Information, not instructions </li></ul></ul><ul><ul><li>Declarative </li></ul></ul><ul><ul><li>Tree-like structure </li></ul></ul><ul><ul><li>More easily manipulated than programming languages </li></ul></ul><ul><ul><li>Examples: HTML, XML, Wikipedia's Markup </li></ul></ul><ul><li>Programming Language </li></ul><ul><ul><li>Communicates instructions to a machine </li></ul></ul><ul><ul><li>Processes and uses information </li></ul></ul><ul><ul><li>Sequence of commands, imperative </li></ul></ul><ul><ul><li>Examples: JavaScript, Sinatra </li></ul></ul>
  14. 14. HTML <ul><ul><li>On the client side, the HTML sits on the webpage. </li></ul></ul><ul><ul><li>It provides structure and organization for the layout of the page </li></ul></ul>
  15. 15. What Does HTML Look Like? <ul><li>< html > </li></ul><ul><li>    Oh hai. I'm the content of a web page. </li></ul><ul><li>< /html > </li></ul>
  16. 16. What Is An HTML Tag? <ul><ul><li>It is an element contained between two angle brackets: < html >. This is also called an  opening or  start tag . </li></ul></ul><ul><ul><li>Each tag that is opened, needs to have a closing tag or end tag. This contains a slash sign like this: < /html > </li></ul></ul><ul><ul><li>Together, the two create a block which may contain content, as in the previous example. </li></ul></ul><ul><li>     < html > </li></ul><ul><li>         Oh hai. I'm the content of a web page. </li></ul><ul><li>     < /html > </li></ul>
  17. 17. Nested Tags - Head and Body <ul><li><html> </li></ul><ul><li>    <head> </li></ul><ul><li>        The head contains the items that prepare the page, mostly things you don't see. </li></ul><ul><li>    </head> </li></ul><ul><li>    <body> </li></ul><ul><li>        This is the main part of the page, visible. </li></ul><ul><li>    </body> </li></ul><ul><li></html> </li></ul>
  18. 18. Adding Title and Paragraphs <ul><li><html> </li></ul><ul><li>    <head> </li></ul><ul><li>        <title> </li></ul><ul><li>            My web page </li></ul><ul><li>        </title> </li></ul><ul><li>    </head> </li></ul><ul><li>    <body> </li></ul><ul><li>        <p>Hi, welcome to my new webpage!</p> </li></ul><ul><li>        <p>Another paragraph!</p> </li></ul><ul><li>    </body> </li></ul><ul><li></html> </li></ul>
  19. 19. Emphasize and Strong <ul><li>< em >I'm italic.< /em > ==> I'm italic </li></ul><ul><li>< strong >I'm bold.< /strong > ==> I'm bold </li></ul>
  20. 20. Headings <ul><li>< h1 >I am the greatest.< /h1 > </li></ul><ul><li>< h2 >I am number 2, the second greatest.< /h2 > </li></ul><ul><li>< h3 >I came in third, smaller than 1 and 2< /h3 > </li></ul><ul><li>     .... </li></ul><ul><li>< h6 >I am the smallest heading, a heading nonetheless.< /h6 > </li></ul>
  21. 21. Links <ul><li>< a href =&quot; http://itp.nyu.edu &quot;>Visit ITP</ a > </li></ul><ul><li>This turns into... Visit ITP </li></ul>
  22. 22. Images <ul><li>< img src =&quot; cute_cat.jpg &quot; width =&quot;104&quot; height =&quot;142&quot; / > </li></ul><ul><li>Width and Height is in pixels. </li></ul><ul><li>NOTE: cute_cat.jpg has to be located in the same directory as the html file. </li></ul>
  23. 23. Relative Paths <ul><li>< img src =&quot;images/ cute_cat.jpg &quot;  width =&quot;104&quot;  height =&quot;142&quot;  / > </li></ul><ul><li>In this case, the &quot;images&quot; directory has to be in the same directory as the html. </li></ul><ul><li>Example: </li></ul>
  24. 24. Relative Paths <ul><li>< img src =&quot;../images/ very_cute_cat.jpg &quot;  width =&quot;104&quot;  height =&quot;142&quot;  / > </li></ul><ul><li>Putting  ../  in front of a path means go into parent directory.  </li></ul><ul><li>Example:  </li></ul>
  25. 25. Lists - Ordered <ul><ul><li>I'm the first in the list. </li></ul></ul><ul><ul><li>I'm the second in the list. </li></ul></ul><ul><li>HTML: </li></ul><ul><li>< ol > </li></ul><ul><li>    < li >I'm the first in the list.</ li > </li></ul><ul><li>    < li >I'm the second in the list.</ li > </li></ul><ul><li>    .... </li></ul><ul><li></ ol > </li></ul>
  26. 26. Lists - Unordered <ul><ul><li>I'm an element in the list </li></ul></ul><ul><ul><li>I'm an element in the list </li></ul></ul><ul><li>HTML: </li></ul><ul><li>< ul > </li></ul><ul><li>    < li >I'm an element in the list</ li > </li></ul><ul><li>    < li >I'm an element in the list</ li > </li></ul><ul><li>    ... </li></ul><ul><li></ ul > </li></ul>
  27. 27. Nesting <ul><li><h2> Today's News </h2>  </li></ul><ul><li><p>   </li></ul><ul><li>     Citing &quot;massive overvaluation&quot; of the    </li></ul><ul><li>     <a href=&quot;wikipedia.org/wiki/Swiss_franc&quot;> Swiss franc </a> , the    </li></ul><ul><li>     <a href=&quot;wikipedia.org/wiki/Swiss_National_Bank&quot;> Swiss National Bank </a> </li></ul><ul><li>    <strong> </li></ul><ul><li>         <a href=&quot;wikipedia.org/wiki/Swiss_franc#2011_appreciation&quot;> introduces </a> </li></ul><ul><li>    </strong>  </li></ul><ul><li>     a minimum exchange rate with the  </li></ul><ul><li>     <a href=&quot;wikipedia.org/wiki/Euro&quot;> euro </a> .   </li></ul><ul><li></p> </li></ul>
  28. 28. Nesting <h2> Today's News </h2> <p>        Citing &quot;massive overvaluation&quot; of the        <a href=&quot;/wiki/Swiss_franc&quot;> Swiss franc </a> , the        <a href=&quot;/wiki/Swiss_National_Bank&quot;> Swiss National Bank </a>       <strong>          <a href=&quot;/wiki/Swiss_franc#2011_appreciation&quot;> introduces </a>     </strong>       a minimum exchange rate with the      <a href=&quot;/wiki/Euro&quot;> euro </a> .   </p>
  29. 29. Exercise <ul><ul><li>  Download the HTML template at the resources section on ruxystaicut.com/itp </li></ul></ul><ul><ul><li>Open the file you downloaded in Komodo Edit  </li></ul></ul><ul><ul><li>Save it in a new folder </li></ul></ul>
  30. 30. You should see... <ul><li><!DOCTYPE html> <html>   <head>     <meta charset=utf-8 />     <title> Your Title Goes Here </title>   </head>     <body>     Content goes here    </body> </html> </li></ul>
  31. 31. What does all this mean? <ul><ul><li>Open the HTML file you just saved in Chrome (File > Open File... ) </li></ul></ul><ul><ul><li>Modify the file in Komodo Edit - for example, change the text! </li></ul></ul><ul><ul><li>Save it </li></ul></ul><ul><ul><li>Refresh the browser </li></ul></ul>
  32. 32. Let's fill this page up <ul><li>Tell me a little about yourself. We'll add...  </li></ul><ul><ul><li>a heading,  </li></ul></ul><ul><ul><li>a paragraph,  </li></ul></ul><ul><ul><li>an image </li></ul></ul><ul><ul><li>a couple of links </li></ul></ul><ul><ul><li>italic and bold text </li></ul></ul>
  33. 33. Upload your file to FTP <ul><li>FTP stands for File Transfer Protocol. </li></ul><ul><li>  </li></ul><ul><ul><li>  Open up Cyberduck and connect to your account </li></ul></ul><ul><ul><li>  Make a new folder for Comm Lab Web and put your new html file there </li></ul></ul><ul><ul><li>  Upload your image here as well </li></ul></ul><ul><ul><li>  Go to the url of your page  </li></ul></ul>
  34. 34. To continue... <ul><li>1.   Modify the page again (add another paragraph, heading, link, image, etc)   </li></ul><ul><li>2.   Save   </li></ul><ul><li>3.   Open HTML file in browser: did you see your changes? </li></ul><ul><li>4.   Upload your file again to FTP through Cyberduck. </li></ul>
  35. 35. Readings and Tutorials <ul><ul><li>Programs vs. markup or why HTML authoring is not programming:  </li></ul></ul><ul><li>         http://www.cs.tut.fi/~jkorpela/prog.html </li></ul><ul><ul><li>W3Schools HTML Tutorial: </li></ul></ul><ul><li>         http://www.w3schools.com/html/ </li></ul><ul><ul><li>HTML Dog Tutorials - Beginner:  </li></ul></ul><ul><li>         http://htmldog.com/guides/ </li></ul><ul><li>** The tutorials are required for your assignment. </li></ul>
  36. 36. Assignment for Next Week <ul><ul><li>  Check your assignment for this week on the schedule at ruxystaicut.com/itp/ </li></ul></ul><ul><li>  </li></ul><ul><ul><li>  The assignment is due next class .  </li></ul></ul><ul><li>  </li></ul><ul><ul><li>  Print your assignment to turn it in.  </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Don't forget to link on the class wiki to your files. </li></ul></ul>
  37. 37. Next Time... <ul><ul><li>HTML Forms </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Styling HTML with CSS - fonts, colors, backgrounds </li></ul></ul><ul><li>  </li></ul><ul><ul><li>CSS box model </li></ul></ul>