ARTDM 171, Week 2: A Brief History + Web Basics


Published on

Published in: Education, Technology
  • 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
  • "Yet we are trained to ignore another form of governmental intervention that also made the Internet possible. This is the regulation that assured that the platforform upon which the Internet was built would not turn against it." p44, Future of Ideas, Lessig, L.

    Question: What can we interpret from Lessig’s final sentence in the reading, “Freedom thus enhanced the social value of the controlled…”?

    Question: How does our understanding of the Language of the Internet, both code and content, affect how we design for it and how we use it? Think about the RFC’s (request for comments in the design of the protocol.)
  • Content is at the Core
    • Code a page with no tags – content comes through
    • Easy to create Web pages
    • Linear format, top to bottom
  • It’s a method of using XHTML, CSS, JavaScript, and DOM (Document Object Model) to add motion and fluid interactivity to your pages.
  • It’s a method of using XHTML, CSS, JavaScript, and DOM (Document Object Model) to add motion and fluid interactivity to your pages.
  • Question: 
    Based on the reading (by Lessig), how might the Internet’s origins affect it’s behavior?  
    Lessig points out a lot of the benefits from the architecture, but is there anything else there?
  •   Not all networks are this way. Consider the telephone network.
  • ARTDM 171, Week 2: A Brief History + Web Basics

    1. 1. ARTDM 171, Week 2: A Brief History Gilbert Guerrero
    2. 2. Homework due today • Read Intro and Ch.1 of the Dreamweaver textbook • Read p.26-48 in The Future of Ideas • Post a comment on the blog
    3. 3. “Freedom thus enhanced the social value of the controlled…”  
    4. 4. Web Basics
    5. 5. General Folder Organization
    6. 6. General Folder Organization
    7. 7. Letʼs get coding! Open the web page excerpt.html
    8. 8. HTML Reference
    9. 9. Dreamweaver Basics And other survival techniques
    10. 10. Dreamweaver first steps • Use the Window menu • Workspaces • Panels • Tabs • Unsaved files * • Save All • Preview in Browser
    11. 11. HTML (Hyper Text Markup Language) • HTML is on the Web you see ultimately behind everything • Final product displayed in the browser  PHP, ASP, etc. are processed into HTML  JavaScript becomes and interacts with HTML  HTML pages are text files
    12. 12. HTML is designed to do three things • Formatting text into paragraphs, bold, italics, bullets, etc. • Inclusion of images • Hyperlinking
    13. 13. HTTP and HTML • Basic protocols of the World Wide Web • Specify how the Web will serve content and how browsers will retrieve content • Web browsers can handle other protocols, or interconnnect
    14. 14. WWW is in the Public Domain • Free to use • Decentralized • Accessible • Visible code • Easy to learn (copy + paste + modify)
    15. 15. Acronyms of the Web •HTML, XHTML, CSS, JS, PHP, ASP, JSP, DHTML, AJAX, XML,…
    16. 16. XHTML stands for Extensible Hyper Text Markup Language.  • Based on HTML, uses rigid structure from XML • Tags are always lower case • Attributes must be contained within quotes • Closing tag • Empty tags must end with / to be closed • Portability • All code in this class will be XHTML valid by default • HTML 5 is in the works… articles/previewofhtml5
    17. 17. What is XML? • Allows you to create your own markup tags and attributes • Use it anywhere, possibly as datasource • RSS feeds are based on this • For more about XML, read “Using XML”  by J. David Eisenberg,  http://  
    18. 18. CSS – the Designer's answer • Separates presentation from structure • Goes beyond the limits of basic HTML • After markup is done, style it with CSS
    19. 19. Web Developer Firefox plugin firefox/addon/60 View CSS of the class blog
    20. 20. DHTML – XHTML, CSS, JavaScript, and DOM • Not  really another language. • Examples: Pop up windows, flyout menus
    21. 21. JavaScript – client side processing • Scripting language that lets you process user interactions within the browser. • Not to be confused with Java • Rollovers, form validation, pop up alert messages, and other interactive responses
    22. 22. AJAX - Asynchronous JavaScript and XML • Another use of technology, not really a language • Using DHTML with live data, no page reloads. • Example: Google Maps • More info, read AJAX: A New Approach to Web Applications by Jesse James Garrett, ideas/essays/archives/000385.php
    23. 23. The Rest • PHP, ASP, JSP, etc. – server side scripts • Plugins – for everything else
    24. 24. The Internet and the World Wide Web
    25. 25. Infrastructure: Military • In the shadow of Sputnik, Advanced Research Projects Agency (ARPA) was created • In the late 1960s, Department of Defense contracted  Paul Baran at the Rand Corporation. • Their Question: Could a nuclear attack or an accident disable the nation's telecommunications system? 
    26. 26. Paul Baran baran.html
    27. 27. Wikipedia: Internet: History Internet#History
    28. 28. Technologies on the Internet • World Wide Web • Email • Peer-to-Peer (BitTorrent) • Chat and Instant Messaging • Online Gaming • VoIP (skype)
    29. 29. Principles of the Internet • End-to-end – intelligence at the ends, not hidden within the network • Network is neutral • Not optimized for any existing application • Built for unrestricted growth, not even the designers knew • No assumptions
    30. 30. Electronic Frontier Foundation
    31. 31. Standards
    32. 32. Vannevar Bush's Memex • “As we may think”, Atlantic Monthly 1945 • 194507/bush
    33. 33. W3C – WWW Consortium • Tim Berners-Lee, director of W3C • In October 1994, Tim Berners-Lee left CERN and founded the World Wide Web Consortium (W3C) • Created to ensure compatibility and agreement in the adoption of standards.  •  
    34. 34. Homework, due Feb 9 • Read Chapter 2: Starting your first site • free accounthosting with Dreamhost or get a Setup Web at • Read Chapter 3: Building your first page  • Create a Web page using Dreamweaver: • Heading • At least two paragraphs   • Link colors other than the default • Font faces and sizes