Web Architecture

INFO 253 (CCN 42598) — Fall 2011
School of Information, UC Berkeley

Instructor: Dilan Mahendran

TA: Rami Taibah

Lecture: Tue&Thu 2:00–3:30, 202 South Hall

Lab: Mon; 3:30-5:30 107 South Hall

Description: This course is a survey of Web technologies, ranging from the basic technologies underlying the Web (URI, HTTP, HTML) to more advanced technologies being used in the context of Web engineering, for example structured data formats and Web programming frameworks. The goal of this course is to provide an overview of the technical issues surrounding the Web today, and to provide a solid and comprehensive perspective of the Web's constantly evolving landscape. Because of the large number of technologies covered in this course, only a fraction of them will be discussed and described in greater detail. The main goal of the course thus is an understanding of the interdependencies and connections of Web technologies, and of their capabilities and limitations. Implementing Web-based applications today can be done in a multitude of ways, and this course provides guidelines and best practices which technologies to choose, and how to use them.

Date Subject Slides Required Reading Additional Resources Assignment [a/]
2011-08-30 Overview and Introduction: This introductory lecture gives the motivation for the course, 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.
2011-08-30T14:00 2011-08-30T15:30 202 South Hall, UC Berkeley
Introduction (11 Slides)
2011-09-01 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.
2011-09-01T14:00 2011-09-01T15:30 202 South Hall, UC Berkeley
Browsers (30 Slides) Wikipedia [http://en.wikipedia.org/wiki/Web_Browser] · History [http://en.wikipedia.org/wiki/History_of_the_web_browser] · What is a Browser? [http://www.youtube.com/watch?v=o4MwTvtyrUQ] 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-09-06 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, but most layout issues are deferred until the CSS lecture.
2011-09-06T14:00 2011-09-06T15:30 202 South Hall, UC Berkeley
HTML (22 Slides) Getting started with HTML [http://www.w3.org/MarkUp/Guide/] HTML Tutorial [http://www.w3schools.com/html] · HTML Reference [https://developer.mozilla.org/en/HTML/Element] · HTML Validator [http://validator.w3.org/] A1 [a/1/] assigned (due date: 9/22)
2011-09-08 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.
2011-09-08T14:00 2011-09-08T15:30 202 South Hall, UC Berkeley
CSS (32 Slides) Adding a Touch of Style [http://www.w3.org/MarkUp/Guide/Style] 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-09-13 Advanced HTML: This lecture covers linking in general and in header information, and a more general view of HTML layout based on the box model used by browsers. The concept of frames is introduced, which can be used in a combination of framesets and pages, or as inline frames. Finally, image maps are introduced as a way of how images can be turned not only into links, but into a set of various linked areas overlayed over the image.
2011-09-13T14:00 2011-09-13T15:30 202 South Hall, UC Berkeley
Advanced HTML (30 Slides) Advanced HTML [http://www.w3.org/MarkUp/Guide/Advanced.html] Online Image Map Editor [http://www.maschek.hu/imagemap/imgmap]
2011-09-15 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). Asynchronous JavaScript and XML (Ajax) takes Dynamic HTML (DHTML) to the next level by allowing server access from within scripting code. This is accomplished by using a standardized API for client/server communications, the XMLHttpRequest object. This objects allows using HTTP connections from within scripting code, and thereby allows scripting code to dynamically reload data from a server in response to user interactions.
2011-09-15T14:00 2011-09-15T15:30 202 South Hall, UC Berkeley
Scripting (39 Slides) DHTML [http://www.yourhtmlsource.com/javascript/dhtmlexplained.html] Best Practices [http://domscripting.com/book/sample/] · Tutorial [http://www.webteacher.com/javascript/] · Wikipedia [http://en.wikipedia.org/wiki/Dynamic_HTML]
2011-09-20 Mobile Applications: Web-based mobile applications inherit important properties and constraints both because of their dependency on the Web, and because of their focus on mobile scenarios. From a practical perspective, an important question is how expensive it is to design and build native or Web-based applications for mobile devices, and in this lecture we look at the most important component in that picture, the mobile browser. We also take a closer view of the spectrum between native and Web-based mobile apps. Specifically, we look at the gap, how that gap might be closed by the activities referred to as HTML5, and what still remains as open issues even with HTML5.
2011-09-20T14:00 2011-09-20T15:30 202 South Hall, UC Berkeley
Mobile Applications (23 Slides) mobileOK [http://www.w3.org/TR/mobileOK/] Touch Web [http://blog.taptu.com/2010/02/03/touchfriendlywebreport/] · Mobile Browser Test [http://www.w3.org/2005/MWI/Tests/blog/2010/02/09/wctmbv2] · HTML5 APIs [http://dret.typepad.com/dretblog/html5-api-overview.html] · PhoneGap [http://www.infoq.com/presentations/PhoneGap-Mobile-Applications-with-HTML-CSS-JavaScript]
2011-09-22 Offline-Capable Applications: Mobile settings should not rely on the client being online all the time. For Web-based applications, however, this is a challenge, because the traditional model of Web-based applications has no notion of offline mode. HTML5, however, introduces the ability to design and build offline-capable applications. One important part of that is local storage, the ability to persistently store data on the client. The other important part is the application cache, the ability of a Web-based application to list all the resources that are necessary for offline mode. Clients can then reliably store all these files locally for offline capabilities.
2011-09-22T14:00 2011-09-22T15:30 202 South Hall, UC Berkeley
Offline (28 Slides) Going Offline [http://building-iphone-apps.labs.oreilly.com/ch06.html] Offline Applications [http://www.w3.org/TR/offline-webapps/] · HTML5 [http://www.w3.org/TR/html5/offline.html] A2 [a/2/]  (due date: 10/12)
2011-09-27 Geolocation: Mobility is (one of) the key defining characteristics of mobile devices, and many use cases and scenarios not only depend on mobility (the ability to move), but on location (the knowledge of where something moved to). Determining the location of a mobile device can be done in a variety of ways, and in this lecture we briefly look at various localization technologies (IP address, Wi-Fi, cell phone, GPS). We then look at the W3C Geolocation API, which is currently under development and allows scripting code to request the location of the device it is running on. Finally, we discuss some privacy issues around automated access to location information.
2011-09-27T14:00 2011-09-27T15:30 202 South Hall, UC Berkeley
Geolocation (32 Slides) Geolocation Privacy and Application Platforms [http://dret.net/netdret/publications#dot10b] Geolocation API [http://www.w3.org/TR/geolocation-API/] · Geolocation Privacy [http://escholarship.org/uc/item/0rp834wf] · Geolocation Demo [http://npdoty.name/location/]
2011-09-29 Web Storage: Mobile applications face two main challenges that call for local data storage: they must be able to go offline so that they can work when there is no connectivity; they must be able to store data locally so that they can better optimize network traffic. In this lecture, we look some of the established mechanisms for local storage (Cookies) and traffic optimization (HTTP caching), and look at the HTML5 mechanisms that provide more extensive client-side support for local data storage: Web Storage and Web SQL Database.
2011-09-29T14:00 2011-09-29T15:30 202 South Hall, UC Berkeley
Storage (47 Slides) Web Storage [http://www.w3.org/TR/webstorage/] · Web SQL Database [http://www.w3.org/TR/webdatabase/] · State [http://www.w3.org/2001/tag/doc/state.html] · Cookies Spec [http://tools.ietf.org/html/rfc2965]
2011-10-04 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).
2011-10-04T14:00 2011-10-04T15:30 202 South Hall, UC Berkeley
Internet (27 Slides) 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/] TCP-IP Reference [http://www.tcpipguide.com/free/index.htm]
2011-10-06 Group Project: This class session will be devoted to group project development discussions. A final component of i253 is to develop one or a set of web technologies covered in this course toward a prototype web application or website design. This can range from an novel utilization of CSS to an AJAX implementation on a mobile phone browser. Group size can range from 2-4 students.
2011-10-06T14:00 2011-10-06T15:30 202 South Hall, UC Berkeley
Group Group Proposal [i253-final-project.pdf] (due date: 10/17)
2011-10-11 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).
2011-10-11T14:00 2011-10-11T15:30 202 South Hall, UC Berkeley
URIs & HTTP (43 Slides) 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-10-13 HTML Forms: This lecture introduces HTML Forms, a way how an HTML page can provide input fields, so that users can provide data to a Web-based application. HTML forms are regular HTML pages (i.e., using regular HTML structures), but they also contain special HTML elements for data entry. Most importantly, each form contains instructions on how to submit the entered data, and the browser will use that information to send an HTTP request containing all the data of the form submission.
2011-10-13T14:00 2011-10-13T15:30 202 South Hall, UC Berkeley
HTML Forms (22 Slides) HTML Forms FAQ [http://htmlhelp.com/faq/html/forms.html] Style Guide [http://www.webstyleguide.com/wsg3/10-forms-and-applications/] · Forms Spec [http://www.w3.org/TR/html401/interact/forms.html] A3 [a/3/assignment3.html] (due date: 10/31)
2011-10-18 Security & Privacy: TCP and thus HTTP are clear-text protocols, which make no attempt to hide the data being transmitted. For secure data transfers, it thus is necessary to use additional technologies for providing secure data transfers. For the Web, the most interesting security feature are secure HTTP interactions, which are provided by HTTP over SSL (HTTPS), a protocol that layers an encryption layer (SSL or TLS) between TCP and HTTP. For any task involving personalization and/or trust, it is not only necessary to have a concept for providing privacy, but also to have concepts for identity and how to prove identity, which needs authentication.
2011-10-18T14:00 2011-10-18T15:30 202 South Hall, UC Berkeley
Security (35 Slides) Security [http://en.wikipedia.org/wiki/Internet_security] · Privacy [http://en.wikipedia.org/wiki/Internet_privacy] · Browser Security [http://cacm.acm.org/magazines/2009/8/34494-browser-security/fulltext] Browser Options [http://support.mozilla.com/en-US/kb/Options+window] · HTTPS [http://en.wikipedia.org/wiki/Https] · HTTPS Spec [http://tools.ietf.org/html/rfc2818]
2011-10-20 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.
2011-10-20T14:00 2011-10-20T15:30 202 South Hall, UC Berkeley
Search (29 Slides) 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] · 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-10-25 Guest Lecture:Ashwin Jacob Mathew [http://www.ischool.berkeley.edu/people/students/ashwinmathew]"The Infrastructure of the Internet(and why you should care about it)"Click for Slide Presentation [./src/ashwin-i253.pdf] : Openness & Transparency: It has become commonplace to praise the Web as "open" or to hear impassioned defenses of "the Open Web." But what does it mean for an information system to be open? Today we will examine some varying definitions of openness, and guest speaker Ashwin Jacob Mathew [http://www.ischool.berkeley.edu/people/students/ashwinmathew] will present some questions about issues about "openness" raised by his study of the Internet Working Protocols.Where do domain names come from? Who secures HTTPS transactions? How are IP addresses allocated? In this lecture, Ashwin will address these questions and more, exploring the infrastructure of the Internet as social and political system; just as much as it is a technical system.
2011-10-25T14:00 2011-10-25T15:30 202 South Hall, UC Berkeley
Openness (9 Slides) Openness in Communication [http://firstmonday.org/htbin/cgiwrap/bin/ojs/index.php/fm/article/view/1367/1286] · Meaning of Open [http://googleblog.blogspot.com/2009/12/meaning-of-open.html] · 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/] · Data.gov [http://www.data.gov/] · Public Knowledge [http://www.publicknowledge.org/] · Open Knowledge [http://www.okfn.org/]
2011-10-27 Guest Lecture:Nick Doty [http://www.ischool.berkeley.edu/people/students/nickdoty], "Privacy in Web Standards" [http://npdoty.name/slides/web-standards-privacy-talk] : Web 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.Our guest lecturer Nick Doty will discuss Standards developed by the World Wide Web Consortium and other technical standards bodies make the Web interoperable and also profoundly impact user privacy. Nick will discuss how the standardization process works and look at some examples of the impacts on privacy.
2011-10-27T14:00 2011-10-27T15:30 202 South Hall, UC Berkeley
Standards (16 Slides) 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/] A4 [a/4/assignment4.html] (due date: 11/11)
2011-11-01 Web Intermediaries and Third-Party Content: Until now we have discussed the Web in terms of interactions between Web servers (where content is published) and Web browsers (where content is displayed). In actuality, things are a bit more complicated than that. There are many different kinds of Web intermediaries that may occupy the path between where content originates and where it is consumed. These intermediaries can provide a number of services, from improving performance to filtering content to protecting privacy.
2011-11-01T14:00 2011-11-01T15:30 202 South Hall, UC Berkeley
Intermediaries and Third-Party (36 Slides) Web Intermediaries [http://www.almaden.ibm.com/cs/wbi/papers/www7/Intermediaries.pdf] · The Great Firewall [http://www.theatlantic.com/magazine/archive/2008/03/-ldquo-the-connection-has-been-reset-rdquo/6650/] Proxy auto-config [http://en.wikipedia.org/wiki/Proxy_auto-config] · Content-control software [http://en.wikipedia.org/wiki/Content-control_software] · Web cache [http://en.wikipedia.org/wiki/Web_cache] · Anonymizer [http://en.wikipedia.org/wiki/Anonymizer] · CDN [http://en.wikipedia.org/wiki/Content_delivery_network]  Widgets, badges, and gadgets [http://blogs.zdnet.com/Hinchcliffe/?p=80]  Transclusion [http://en.wikipedia.org/wiki/Transclusion] · Widget landscape [http://www.w3.org/TR/widgets-land/]  Widget Marketing [http://www.startup-review.com/blog/youtube-case-study-widget-marketing-comes-of-age.php]
2011-11-08 Content Syndication: For many information sources on the Web, it is useful to have some standardized way of subscribing to information updates. Syndication formats such as RSS and Atom can be used by these information sources to publish a feed of updated information items. Feeds follow a simple and unified model for representing information items, and thus can be easily aggregated, filtered and re-published across a wide variety of applications, as long as those applications publish information in feed-based formats.
2011-11-08T14:00 2011-11-08T15:30 202 South Hall, UC Berkeley
Syndication (43 Slides) Identifying Atom [http://www.xml.com/pub/a/2004/08/18/pilgrim.html] Atom [http://tools.ietf.org/html/rfc4287] · Validator [http://validator.w3.org/feed/]
2011-11-10 Representational State Transfer (REST): Representational State Transfer (REST) is an architectural style for building distributed systems. The Web is an example for such a system. REST-style applications can be built using a wide variety of technologies. REST's main principles are those of resource-oriented states and functionalities, the idea of a unique way of identifying resources, and the idea of how operations on these resources are defined in terms of a single protocol for interacting with resources. REST-oriented system design leads to systems which are open, scalable, extensible, and easy to understand.
2011-11-10T14:00 2011-11-10T15:30 202 South Hall, UC Berkeley
REST (40 Slides) REST vs. SOAP [http://www.prescod.net/rest/rest_vs_soap_overview/] · What is REST? [http://www.eioba.com/a69755/how_i_explained_rest_to_my_wife] · REST Interfaces [http://bitworking.org/news/193/Do-we-need-WADL] RESTwiki [http://rest.blueoxen.net/cgi-bin/wiki.pl] · RMM [http://martinfowler.com/articles/richardsonMaturityModel.html] · HTTP API Classification [http://www.nordsc.com/ext/classification_of_http_based_apis.html]
2011-11-17 Semantic Web: The Semantic Web can either be understood as a prepackaged set of languages and technologies for representing semantics and working with them, or as a more general idea of Web Semantics, which instead of predefining certain languages and technologies just looks at the various options of how more semantics can be represented on the Web. Taking the latter approach, this lecture looks at the various ways in which semantics can be introduced on the Web, and what is required in these scenarios in terms of technology and information sharing.
2011-11-17T14:00 2011-11-17T15:30 202 South Hall, UC Berkeley
Semantic Web (42 Slides) Which Semantic Web? [http://www.google.com/search?q=%22Which%20Semantic%20Web?%22+Catherine+C.+Marshall+Frank+M.+Shipman] RDFa [http://www.w3.org/TR/xhtml-rdfa-primer/] · FAQ [http://www.w3.org/2001/sw/SW-FAQ] · RDF [http://www.w3.org/TR/rdf-primer/] · OWL [http://www.w3.org/TR/owl-features/]
2011-11-21 Media Types [rescheduled lecture]: 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.
2011-11-21T14:00 2011-11-21T15:30 202 South Hall, UC Berkeley
Media Types [rescheduled lecture] (31 Slides) MIME Respect [http://www.w3.org/2001/tag/doc/mime-respect] MIME [http://tools.ietf.org/html/rfc2046] · Registry [http://www.iana.org/assignments/media-types/]
2011-11-22 Guest Lecture:Deb Wolfe www.titlenine.com [http://www.titlenine.com/] - Retail Web Applications : E-commerce:
2011-11-22T14:00 2011-11-22T15:30 202 South Hall, UC Berkeley
Ecommerce (2 Slides)
2011-11-29 Group Project Presentations:
2011-11-29T14:00 2011-11-29T15:30 202 South Hall, UC Berkeley
Group Presentation Schedule [./groupschedule.html]
2011-12-01 Group Project Presentations:
2011-12-01T14:00 2011-12-01T15:30 202 South Hall, UC Berkeley
Group Presentation Schedule [./groupschedule.html]
Show Abstracts
Hide Abstracts
Creative Commons License Please send comments to dilanm@ischool.berkeley.edu
Last modification on Monday, 24-Oct-2011 22:11:16 CDT
valid CSS! valid XHTML 1.0!