Web Architecture and Information Management

INFO 153 (CCN 49815) – Summer 2011
School of Information, UC Berkeley

Instructors: Brad Andrews
TA: Jonathan Yen

Lecture: Mon & Wed 14.00–16.30, 202 South Hall
Lab: Fri 14.00–16.30 202 South Hall

Description: This courses focuses on understanding the Web as an information system, and how to use it for information management for personal and shared information. The Web is an open and constantly evolving system which can make it hard to understand how the different parts of the landscape fit together. This course provides students with an overview of the Web as a whole, and how the individual parts it together. We briefly look at topics such as Web design and Web programming, but this course is not exclusively designed to teach HTML or JavaScript. Instead, we look at the bigger picture and how and when to use these and other technologies. The Web already is and will remain a central part in many information-related activities for a long time to come, and this course provides students with the understanding and skills to better navigate and use the landscape of Web information, Web technologies, Web tools, and common Web patterns.

Date Subject Slides Required Reading Additional Resources
2011-07-06 Overview and Introduction: This introductory lecture gives the motivation for the course, some information about the people involved and the organization of the course, a high-level overview of the course's topics, and an overview of the assignments which are an important part of the course program. Introduction bSpace [https://bspace.berkeley.edu/portal/site/2676fd30-179a-46b4-be96-cea7e9694390?panel=Main]
2011-07-06 Web History: The Web is, in the words of its creator Tim Berners-Lee, a "global information space." The Web is relatively new, but the vision of a global information space is at least a century old. Looking back at these early visions can give us a sense of the recurring problems in human communication and information management to which the Web was intended to be a solution. Yet we must be careful to avoid seeing an unbroken line of technological progress where there was none: many of the pioneers of information management were forgotten, and later generations constructed their own pragmatic historical narratives. History The Web Time Forgot [http://www.nytimes.com/2008/06/17/science/17mund.html] · Internet Pioneers [http://www.ibiblio.org/pioneers/] · Tim Berners-Lee [http://www.livinginternet.com/w/wi_lee.htm] · A Proposal [http://www.w3.org/History/1989/proposal.html] Paul Otlet [http://people.ischool.berkeley.edu/~buckland/otlet.html] · Emanuel Goldberg [http://people.ischool.berkeley.edu/~buckland/goldberg.html] · World Brain [https://sherlock.ischool.berkeley.edu/wells/world_brain.html] · Augmenting Human Intellect [http://www.dougengelbart.org/pubs/augment-3906.html] · Hypertext '87 [http://portal.acm.org/citation.cfm?id=43953] · W3C Web Chronology [http://www.w3.org/History.html] · How It All Started [http://www.w3.org/2004/Talks/w3c10-HowItAllStarted/?toc=true] · Histories of the Internet [http://www.isoc.org/internet/history/]
2011-07-06 Standards and Standards Bodies: The Web is composed of standards: rules and practices to which technologies must adhere if they are to be considered part of the Web. Most of these standards are developed by standards bodies, organizations that publish documents defining Web technologies. But sometimes standards develop more organically, from technologies that become popular and are widely implemented without a formal process. However they arise, Web standards are critical for the existence of the Web, and they can have enormous economic and societal impact. Standards Intro to Dynamics of Standards [http://books.google.com/books?id=IXkX8WKG24gC&pg=PA1] · Web Standards FAQ [http://www.webstandards.org/learn/faq/] · WHATWG FAQ (Parts 1 & 2) [http://wiki.whatwg.org/wiki/FAQ] How the Internet Got Its Rules [http://www.nytimes.com/2009/04/07/opinion/07crocker.html] ·IETF [http://www.ietf.org/] · W3C [http://www.w3.org/] · WHATWG [http://www.whatwg.org/]
2011-07-08 Lab: Web space setup & Web Standards: Lab 1
2011-07-11 Guest Lecture by Tommy Cusick [http://tommycusick.com]: HyperText Markup Language (HTML): The HyperText Markup Language (HTML) is the most important content type on the Web. This lecture covers a basic overview of how to use HTML markup in general. In particular, we look at page titles, meta tags, inserting text and images, using lists, and creating simple tables. Attributes can be used for more layout control in the HTML tags, and we discuss how to leverage such layout styling during the CSS lecture. HTML Getting started with HTML [http://www.w3.org/MarkUp/Guide/] · Getting to know HTML [http://proquest.safaribooksonline.com/059610197X/1] HTML Tutorial [http://www.w3schools.com/html] · HTML Reference [https://developer.mozilla.org/en/HTML/Element] · HTML Validator [http://validator.w3.org/]
2011-07-06 Guest Lecture by Tommy Cusick [http://tommycusick.com]: Cascading Style Sheets (CSS): Cascading Stylesheets (CSS) have been designed as a language for better separating presentation-specific issues from the structuring of documents as provided by HTML. CSS uses a simple model of selectors and declarations. Selectors specify to which elements of a document a set of declarations (each being a value assigned to a property) apply; in addition there is a model of how property values are inherited and cascaded. The biggest limitation of CSS is that it cannot change the structure of the displayed document. CSS Adding a Touch of Style [http://www.w3.org/MarkUp/Guide/Style] · Getting started with CSS [http://proquest.safaribooksonline.com/059610197X/285] CSS Spec [http://www.w3.org/TR/CSS21/] · Properties [http://www.w3.org/TR/CSS21/propidx.html] · CSS Tutorial [http://www.w3schools.com/css] · CSS Validator [http://jigsaw.w3.org/css-validator/]
2011-07-13 Guest Lecture by Jeremy Weinstein [http://www.jeremydw.com/]: Filesystems and Web Servers: It can be hard to understand web technologies without a basic understanding of filesystems, directory structure, and file paths. This lecture provides an overview of these topics and shows how web servers build upon these fundamentals. Filesystems Files [http://en.wikipedia.org/wiki/Computer_file] · Filesystems [http://hubpages.com/hub/understanding-your-file-system] · Directory structure [http://www.geo.hunter.cuny.edu/~tbw/spars/dept.faqs/file_dir_structure.htm] · Paths [http://en.wikipedia.org/wiki/Path_(computing)] · Website structure [http://www.netstrider.com/tutorials/HTML/structure/] · Web servers [http://www.howstuffworks.com/web-server.htm/printable] Filesystem Hierarchy Standard [http://www.pathname.com/fhs/pub/fhs-2.3.html] · Apache URL Mapping [http://httpd.apache.org/docs/2.2/urlmapping.html]
2011-07-13 Guest Lecture by Jeremy Weinstein [http://www.jeremydw.com/]: Web Browsers: This lecture looks at Web browsers and how they work. It introduces the basic functionalities of a browser; retrieval and rendering of Web pages. Any modern browser needs to support more than just HTTP and HTML; it must support CSS for stylesheets, JavaScript for scripted Web pages, various image formats, and popular applications such as Flash. In addition, browsers can support additional functionality such as off-line operation, or in general more application-oriented features such as AIR or Silverlight. Browsers Wikipedia [http://en.wikipedia.org/wiki/Web_Browser] · History [http://en.wikipedia.org/wiki/History_of_the_web_browser] Firefox [http://www.mozilla.com/firefox/] · Safari [http://www.apple.com/safari/] · IE [http://www.microsoft.com/windows/products/winfamily/ie/default.mspx] · Chrome [http://www.google.com/chrome] · Opera [http://www.opera.com/]
2011-07-15 Lab: HTML & CSS: Lab 2
2011-07-18 Internet Architecture: The Internet is the technical infrastructure on top of which the Web is built. Some of the services provided by the Internet are essential for the Web, most importantly the naming service and the data transfer service. The Domain Name System (DNS) provides the human-readable names for computers, which can then be used in the addresses of Web servers and ultimately Web pages. The Transmission Control Protocol (TCP) provides the reliable data transfer service between Web Servers and Web Browsers, building on the very robust Internet Protocol (IP). Internet TCP/IP [http://xrds.acm.org/article.cfm?aid=197182] Internet Architecture [http://en.wikipedia.org/wiki/Category:Internet_architecture] · TCP/IP Overview [http://www.garykessler.net/library/tcpip.html] · Timeline [http://www.zakon.org/robert/internet/timeline/]
2011-07-18 Web Foundations (URIs & HTTP): The Web's architecture has very simple principles revolving around the ideas of placing a heavy emphasis on a consistent and global identification mechanism for resources, a standardized way of how resource representations can be retrieved, and a standardized way of how resource representations should be usable by using standardized media types. Based on the Internet, the Web's transport protocol transmits representations of resources identified by a Uniform Resource Identifier (URI) between Web servers and clients. The most important protocols for data transfer on the Web is the Hypertext Transfer Protocol (HTTP). URIs & HTTP HTTP [http://en.wikipedia.org/wiki/Http] · Cool URIs [http://www.w3.org/Provider/Style/URI] Live HTTP Headers [https://addons.mozilla.org/en-US/firefox/addon/3829] · HTTP and CGI [http://www.garshol.priv.no/download/text/http-tut.html] · URI Spec [http://tools.ietf.org/html/rfc3986] · HTTP Spec [http://tools.ietf.org/html/rfc2616]
2011-07-20 Guest Lecture by Jonathan Yen []: Anatomy of a Basic Web Application: The vast majority of web sites today are no longer static HTML pages but database-driven web applications. Today we'll look at a simple database-driven web application in detail, to see how its various components--HTML forms, application server, and database--work together. Basic Web Apps Database-Driven Website [http://www.killersites.com/articles/articles_databaseDrivenSites.htm] · Forms [http://en.wikipedia.org/wiki/Form_(web)] · It's Alive! [http://proquest.safaribooksonline.com/9780596157739/1] · Web Application Frameworks [http://docforge.com/wiki/Web_application_framework] HTML Forms FAQ [http://htmlhelp.com/faq/html/forms.html] · HTML Forms Spec [http://www.w3.org/TR/html401/interact/forms.html]
2011-07-20 Guest Lecture by Jonathan Yen []: State Management (Cookies): HTTP is a stateless protocol, where each request/response interaction is a separate interaction and there is no protocol support for longer sessions (such as a user logging in and working on a Web site as an identified user). State management refers to mechanisms which provide support for this kind of scenario, the most popular choice for state management are cookies. Another possibility is URI-based state management. The newest option for storing state is HTML5 Web Storage. This lecture is also a glimpse into the world of Representational State Transfer (REST), the Web's fundamental model of handling interaction with resources. Cookies HowStuffWorks [http://computer.howstuffworks.com/cookie.htm/printable] · Databases in HTML5 [http://www.youtube.com/watch?v=siOHh0uzcuY#t=33m10s] Cookie Spec [http://tools.ietf.org/html/rfc2965] · Wikipedia [http://en.wikipedia.org/wiki/HTTP_cookie] · HTTP Viewer [http://www.httpviewer.net/] · HTML5 Web Storage [http://dev.w3.org/html5/webstorage/]
2011-07-22 Lab: Internet Architecture & Web Apps: Lab 3
2011-07-25 Media Types (MIME): One of the most important aspect of computer-based communications is the concept of media types, the question what type of information some digital artifact represents, and how it is encoded. The most common standard for this information is the scheme introduced by Multipurpose Internet Mail Extensions (MIME). Media types can be negotiated by peers communicating through HTTP. Some media types allow fragment identifiers, which allow references to a resource to identify a fragment of the complete resource. Media Types Firefox Handling [https://developer.mozilla.org/En/How_Mozilla_determines_MIME_Types] Registry [http://www.iana.org/assignments/media-types/] · Wikipedia [http://en.wikipedia.org/wiki/MIME_type]
2011-07-25 Multimedia & HTML5: Multimedia is a broad term for pictures, audio and video. Pictures include both images and graphics. Until HTML5, images were the only multimedia content on the Web widely supported by standardized formats. With the arrival of HTML5, audio and video are now supported directly by Web browsers, and there is wider support for graphics as well. Multimedia Flash v. HTML5 [http://news.cnet.com/8301-30685_3-20000037-264.html] · Style Guide [http://www.webstyleguide.com/wsg3/11-graphics/] · Graphics in HTML5 [http://www.youtube.com/watch?v=siOHh0uzcuY#t=6m06s] · Video in HTML5 [http://www.youtube.com/watch?v=siOHh0uzcuY#t=20m53s] Graphics File Formats [http://en.wikipedia.org/wiki/Graphics_file_format] · Intro to SVG [http://www.w3schools.com/svg/svg_intro.asp] · Audio and Video in Firefox [https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox] · Dive Into HTML5 [http://diveintohtml5.org/]
2011-07-27 Guest Lecture by Sumeet Pannu []: Cloud Computing and Storage: Cloud Computing Overview - ACM [http://portal.acm.org/ft_gateway.cfm?id=1364786&type=pdf] · Berkeley's View (pp. 1-9) [http://www.eecs.berkeley.edu/Pubs/TechRpts/2009/EECS-2009-28.pdf] · iCloud [http://www.businessinsider.com/apple-icloud-microsoft-cloud-2011-6] Google [http://www.google.com/apps/intl/en/business/cloud.html] · AppEngine [http://code.google.com/appengine/] · Amazon [http://aws.amazon.com/] · Salesforce [http://www.salesforce.com/cloudcomputing/] · Yahoo [http://labs.yahoo.com/Cloud_Computing] · Microsoft [http://www.microsoft.com/en-us/cloud/default.aspx] · IBM [http://www.ibm.com/cloud-computing/us/en/] · Dell [http://content.dell.com/us/en/enterprise/cloud-computing.aspx]
2011-07-27 Client-side Scripting: Scripting is used on the majority of today's modern Web sites. Scripting can be used to improve the usability and accessibility of a Web site (for example for validating form data on the client side), it can vastly improve the user experience with new interface design (the smooth scrolling of Google Maps vs. older click to scroll map services), or it can be used to implement behavior that would be impossible without scripting (for example the online applications of Google Docs). This introductory lecture looks into scripting fundamentals such as JavaScript itself, the Document Object Model (DOM) for accessing the browser window's content, and XMLHttpRequest for script-server communications. Scripting The Interactive Web [http://proquest.safaribooksonline.com/9780596527747/chapter_1_the_interactive_web] Best Practices [http://domscripting.com/book/sample/] · Tutorial [http://www.webteacher.com/javascript/] · Wikipedia [http://en.wikipedia.org/wiki/Dynamic_HTML]
2011-07-29 Midterm Exam & Lab: HTML5 & Cloud: Midterm
2011-08-01 Guest Lecture by Michael Wu [http://www.linkedin.com/in/michaelwuphd]: Social Web: Social History [http://www.webdesignerdepot.com/2009/10/the-history-and-evolution-of-social-media/] · ESS [http://www.gartner.com/it/page.jsp?id=1497215] · Network effect [http://en.wikipedia.org/wiki/Network_effect] · Weak ties & Revolution [http://www.wired.com/wiredscience/2010/09/weak-ties-twitter-and-revolutions/] market share [http://www.dreamgrow.com/top-10-social-networking-sites-by-market-share-of-visits-may-2011/] · trends [http://www.businessweek.com/technology/content/jan2011/tc2011015_110811.htm] · strenth of weak ties [http://www.cs.toronto.edu/syslab/courses/csc2231/07au/lectures/jorge.ppt] · world map [http://www.pcmag.com/article2/0,2817,2386823,00.asp] · cartoon history [http://www.slideshare.net/peoplebrowsr/a-brief-cartoon-history-of-social-networking-19302011]
2011-08-01 Anatomy of an Advanced Web Application: The widespread adoption of client-side scripting and AJAX techniques has resulted in web applications becoming easier use but harder to understand. No longer is it the case that HTML is used simply to present a document to be read. Now HTML, Javascript and CSS are used together to build dynamic applications that run in the browser. These applications often depend on APIs, resources intended for use by programs rather than people. On the server side, richly complicated "backend" applications give access to databases and other resources while responding to the browser's frontend requests. Advanced Web Apps AJAX [http://www.adaptivepath.com/ideas/e000385] · AJAX Tutorial [http://code.google.com/edu/ajax/tutorials/ajax-tutorial.html] · XMLHttpRequest [http://en.wikipedia.org/wiki/XMLHttpRequest] · jQuery [http://en.wikipedia.org/wiki/JQuery] JSON [http://en.wikipedia.org/wiki/JSON] · Web service [http://en.wikipedia.org/wiki/Web_service]
2011-08-03 Guest Lecture by John Chuang [http://www.ischool.berkeley.edu/people/faculty/johnchuang]: The Economics of the Web: Economics Economics of the Internet [http://lsr.nellco.org/cgi/viewcontent.cgi?article=1093&context=nyu_lewp]  · Virtual Goods [http://venturebeat.com/2010/09/28/u-s-virtual-goods-market-to-hit-2-1-billion-in-2011/] · Digital Music Sales [http://www.guardian.co.uk/business/2011/jan/20/ifpi-world-music-sales-2010]  · Online vs. Cable TV [http://www.nytimes.com/2011/07/27/business/media/fox-to-limit-next-day-streaming-on-hulu.html]  · Comcast vs. Netflix (video) [http://www.youtube.com/watch?v=oOXLYh41wNo] Cloud Computing Economics (pp. 10-13) [http://www.eecs.berkeley.edu/Pubs/TechRpts/2009/EECS-2009-28.pdf]  · Economics of Search (video) [http://www.youtube.com/watch?v=CT2k4z0xPwE]  · The Web is Dead [http://www.wired.com/magazine/2010/08/ff_webrip/all/1]  · FTC vs. Google [http://www.latimes.com/business/la-fi-google-ftc-20110625,0,2332885,full.story]
2011-08-03 Web Search: In his early vision of the Web, Tim Berners-Lee expected that most people would discover information by following hyperlinks, rather than by using keyword searches. Thus there is no search functionality built into the Web. Web search engines came later and had a profound effect on how we use and experience the Web. Now it is hard to imagine using the Web without search, a fact that has both technological and political implications. Search Google Basics [http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=70897] · Search Engine Basics [http://proquest.safaribooksonline.com/9780596809133/search_engine_basics] · Deep Web [http://www.nytimes.com/2009/02/23/technology/internet/23search.html] · Politics of Search Engines [http://epl.scu.edu/~stsvalues/readings/ShapingTheWeb.pdf] PageRank [http://ilpubs.stanford.edu:8090/422/1/1999-66.pdf] · robots.txt [http://en.wikipedia.org/wiki/Robots_exclusion_standard] · Site Map [http://en.wikipedia.org/wiki/Site_map] · nofollow [http://en.wikipedia.org/wiki/Nofollow] · Google Insights [http://www.google.com/insights/search/#]
2011-08-05 Lab 5: Lab 5
2011-08-08 Guest Lecture by Jeremy Weinstein [http://www.jeremydw.com/]: Content Management Systems: CMS Wikipedia [http://en.wikipedia.org/wiki/Web_content_management_system] · Top 10 CMS [http://net.tutsplus.com/articles/web-roundups/top-10-most-usable-content-management-systems/] More options [http://spyrestudios.com/free-content-management-systems/]
2011-08-08 Guest Lecture by Jeremy Weinstein [http://www.jeremydw.com/]: User Interface & Design Practices: UI & Design
2011-08-10 Guest Lecture by Jen King [http://www.ischool.berkeley.edu/people/students/jenniferking], UCB School of Information: Web policy: Privacy: Privacy
2011-08-10 Guest Lecture by Tomasz Finc [http://wikimediafoundation.org/wiki/User:Tfinc], Wikimedia Foundation: Web policy: Openness: Openness Wiki knowledge [http://www.nytimes.com/2011/08/08/business/media/a-push-to-redefine-knowledge-at-wikipedia.html] · Openness in Communication [http://firstmonday.org/htbin/cgiwrap/bin/ojs/index.php/fm/article/view/1367/1286] · OpenInternet.gov [http://www.openinternet.gov/get-informed.html] · Open according to Google [http://googleblog.blogspot.com/2009/12/meaning-of-open.html] · Open Knowledge [http://www.okfn.org/] Against transparency [http://www.tnr.com/article/books-and-arts/against-transparency] · Open Web Foundation [http://openwebfoundation.org/] · Creative Commons [http://creativecommons.org/] · Open Access [http://www.earlham.edu/~peters/fos/overview.htm] · Sunlight Foundation [http://www.sunlightfoundation.com/] · Public Knowledge [http://www.publicknowledge.org/] ·
2011-08-12 Final Exam: Final
Show Abstracts
Hide Abstracts
Creative Commons License Please send comments to brad@ischool.berkeley.edu
Last modification on Saturday, 02-Jul-2011 12:36:22 PDT
valid CSS! valid XHTML 1.0!