Last modification on Wednesday, 24-Nov-2010 20:22:42 CET
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 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 | Assignments [a/] |
|---|---|---|---|---|---|
| 2010-08-31 |
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.
2010-08-31T14:00
2010-08-31T15:30
202 South Hall, UC Berkeley
|
Introduction (21 Slides) | |||
| 2010-09-02 |
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.
2010-09-02T14:00
2010-09-02T15: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/] | |
| 2010-09-07 |
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.
2010-09-07T14:00
2010-09-07T15: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/20) |
| 2009-09-09 |
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.
2009-09-09T14:00
2009-09-09T15: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/] | |
| 2010-09-14 |
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.
2010-09-14T14:00
2010-09-14T15: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] | |
| 2010-09-16 |
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 scrollmap 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.
2010-09-16T14:00
2010-09-16T15:30
202 South Hall, UC Berkeley
|
Scripting (33 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] | |
| 2010-09-21 |
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.
2010-09-21T14:00
2010-09-21T15: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] | |
| 2010-09-23 |
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.
2010-09-23T14:00
2010-09-23T15:30
202 South Hall, UC Berkeley
|
Offline (27 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/] assigned (due date: 10/6) |
| 2010-09-28 |
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.
2010-09-28T14:00
2010-09-28T15:30
202 South Hall, UC Berkeley
|
Geolocation (30 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/] | |
| 2010-09-30 |
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.
2010-09-30T14:00
2010-09-30T15:30
202 South Hall, UC Berkeley
|
Storage (30 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] | ||
| 2010-10-05 |
Rachel Hollowgrass :
Usability: According to the International Organization for Standardization (ISO), usability defines the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use. We will discuss tradeoffs in the design of Web interfaces to support users goals, and present resources to aid design decisions.
2010-10-05T14:00
2010-10-05T15:30
202 South Hall, UC Berkeley
|
Usability | Contextual Design (Chapter 3, pp. 41-64) [http://books.google.com/books?id=sVKuMvaFzjQC&lpg=PP1&dq=Contextual%20design%3A%20defining%20customer-centered%20systems&pg=PA41#v=onepage&q&f=false] | Usability 101 [http://www.useit.com/alertbox/20030825.html] · Beyond Usability [http://adaptivepath.com/events/workshops/webvisions/webvisions_PDX_veen.pdf] · Heuristic Evaluation [http://www.useit.com/jakob/inspectbook.html] · useit.com [http://useit.com/] | |
| 2010-10-07 |
Rachel Hollowgrass :
Participatory Design:
2010-10-07T14:00
2010-10-07T15:30
202 South Hall, UC Berkeley
|
Design | |||
| 2010-10-12 |
Uniform Resource Identifier (URI): 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. For identification, the Web uses the concept of a Uniform Resource Identifier (URI), and the main properties of URIs are that they make resources identifiable within a certain scheme, which then determines how resources are identified within that scheme, and what methods can be used for interacting with them.
2010-10-12T14:00
2010-10-12T15:30
202 South Hall, UC Berkeley
|
URI (7 Slides) | Cool URIs [http://www.w3.org/Provider/Style/URI] | URI Spec [http://tools.ietf.org/html/rfc3986] | |
| 2010-10-14 |
Hypertext Transfer Protocol (HTTP): The Hypertext Transfer Protocol (HTTP) is the protocol which is used for interactions with resources onthe Web (other resources can be identified by non-HTTP URIs, but they are not really onthe Web). HTTP is a TCP-based text-based stateless client/server protocol with a rather simple method for how to exchange request/reponse messages between clients and servers. HTTP has support for caching and some Web-oriented functionalities such as content negotiation and authentication.
2010-10-14T14:00
2010-10-14T15:30
202 South Hall, UC Berkeley
|
HTTP (20 Slides) | HTTP [http://en.wikipedia.org/wiki/Http] | 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] · HTTP Spec [http://tools.ietf.org/html/rfc2616] | |
| 2010-10-19 |
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.
2010-10-19T14:00
2010-10-19T15: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/] assigned (due date: 10/25) |
| 2010-10-21 |
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.
2010-10-21T14:00
2010-10-21T15:30
202 South Hall, UC Berkeley
|
Security (29 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] | |
| 2010-10-26 |
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).
2010-10-26T14:00
2010-10-26T15:30
202 South Hall, UC Berkeley
|
Internet (24 Slides) | TCP/IP [http://www.acm.org/crossroads/xrds1-1/tcpjmy.html] | 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/] | |
| 2010-10-28 |
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.
2010-10-28T14:00
2010-10-28T15:30
202 South Hall, UC Berkeley
|
Syndication (33 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/] | A4 [a/4/] assigned (due date: 11/4) |
| 2010-11-02 |
Atom Publishing Protocol (AtomPub): The feed formats RSS and Atom are read-only formats, and the Atom Publishing Protocol (AtomPub) builds on top of Atom and provides a protocol for submitting new items to feeds. AtomPub is a good example for a RESTful protocol that exposes all resources through URIs, allows to explore resources by following typed links, and allows interactions with resources based on the uniform interface defined by HTTP.
2010-11-02T14:00
2010-11-02T15:30
202 South Hall, UC Berkeley
|
AtomPub (11 Slides) | Putting Things to REST [http://escholarship.org/uc/item/1786t1dm] | AtomPub [http://tools.ietf.org/html/rfc5023] | |
| 2010-11-04 |
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.
2010-11-04T14:00
2010-11-04T15: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] | A5 [a/5/] assigned (due date: 11/11) |
| 2010-11-09 |
Microformats: HTML pages are for human users and describe a resource in structural terms (headings, lists, tables, …). For machine-based interaction, it is often necessary to have more information about the application concepts. XML is a popular language for representing application structures, but is targeted at machine-based processing alone. Microformats and more formal approaches such as the Resource Description Format (RDF), RDF in Attributes (RDFa), and Web Ontology Language (OWL) often are used to describe Web content semantically.
2010-11-09T14:00
2010-11-09T15:30
202 South Hall, UC Berkeley
|
Microformats (30 Slides) | Wikipedia [http://en.wikipedia.org/wiki/Microformat] | microformats.org [http://microformats.org/] · Tutorials [http://www.xfront.com/microformats/] | |
| 2010-11-16 |
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.
2010-11-16T14:00
2010-11-16T15:30
202 South Hall, UC Berkeley
|
Semantic Web (19 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/] | A6 [a/6/] assigned (due date: 11/18) |
| 2010-11-18 |
Media Types: 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.
2010-11-18T14:00
2010-11-18T15:30
202 South Hall, UC Berkeley
|
Media Types (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/] | |
| 2010-11-23 |
Architecture of the World Wide Web: 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. This lecture presents an overview of these architectural principles and illustrates them with using blogs as an example of Web-based applications.
2010-11-23T14:00
2010-11-23T15:30
202 South Hall, UC Berkeley
|
Web Architecture (33 Slides) | Architecture? [http://www.martinfowler.com/ieeeSoftware/whoNeedsArchitect.pdf] · Architecture Summary [http://www.w3.org/TR/webarch/summary.html] | Architecture [http://www.w3.org/TR/webarch/] · Push! [http://www.wired.com/wired/archive/5.03/ff_push_pr.html] |
|
Please send comments to dret@berkeley.edu Last modification on Wednesday, 24-Nov-2010 20:22:42 CET |
|
|