What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
The W3C DOM standard is separated into 3 different parts:
Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
The HTML DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects.
With the HTML DOM, JavaScript can access and change all the elements of an HTML document.
A distributed system is a collection of computational and storage devices connected through a communications network. In this type of system, data, software, and users are distributed.
What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
The W3C DOM standard is separated into 3 different parts:
Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
The HTML DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects.
With the HTML DOM, JavaScript can access and change all the elements of an HTML document.
A distributed system is a collection of computational and storage devices connected through a communications network. In this type of system, data, software, and users are distributed.
IT Trends for 2011: Things Might Be Very Different TodayCharles Severance
This is a keynote talk I gave at the University of North Carolina at Wilmington's anual Wilmington Area Information Technology Exchange. (http://csb.uncw.edu/isom/wilmIT.htm) It goes "through a fractured fairy" tale history of the Internet focusing on the ways that the Internet and web might actually never have happenned. The talk proposes an alternate present where these innovations failed ,and then looks forward toward where we might be 20 years from now with the evolution of cloud computing. The talk features 11 short video segments including footage of Larry Smarr, Doug van Houweling, Robert Cailliau, TIm Berners-Lee, Paul Kunz, Joseph Hardin, and Jeff Bezos. While teach video was only 1-2 minutes long in this talk, there are extended versions of the videos are available on my Vimeo channel http://www.vimeo.com/drchuck
I wold love to give this talk a few more times. It was a lot of fun.
Web History 101, or How the Future is UnwrittenBookNet Canada
In 1989 computer scientist Tim Berners-Lee wrote “Information Management: A Proposal” to persuade CERN management that a global hypertext system was in their interests. That proposal gradually grew into what we now call the World Wide Web. This originating document contains not only the bits that would later become the Web, but also features for a future we’ve yet to realize. In this talk, we’ll take a look at some of those highlights and focus them on the world of publishing, proposing solutions to problems we’re still attempting to solve and fostering ideas for further daydreaming.
Design and development of a web-based data visualization software for politic...Alexandros Britzolakis
Presenting a tool for identifying political popularity over Twitter. AthPPA (which stands for Athena Political Popularity Analysis) is a tool for identifying how popular a political leader is over Twitter. For the purposes of this dissertation the Twitter accounts of the most prominent Greek political leaders have been identified. Structured data such as likes, re-tweets, text-length per tweet as well as the number of subscribers per account have been visualized. Furthermore, sentiment analysis is calculated and visualized using spaCy module and a sentiment lexicon which contains a set of emotion based labeled words.
Episode 3(3): Birth & explosion of the World Wide Web - Meetup session11William Hall
This is the 11th of of 23 presentations in a series introducing and outlining my hypertext book project, "Application Holy Wars or a New Reformation - A Fugue on the Theory of Knowledge. The project explores the interactions of technology and cognition in the extraordinary evolutionary history of the human species. In presentation I show how a universally accessible library for the body of human knowledge emerged from what started as defense projects to interconnect various projects so they could share computer resources and to harden digital communications against nuclear warfare. Tonight's topics cover:
● ARPANET and the invention of addressable digital communications
● Vannevar Bush, Memex, and the revolutionary invention of hypertext
● Revolutionary tools for authoring, managing, and delivering hypertext
● Exponential growth of the web and web content
● Using the Web's automated cognition for assembling and retrieving relevant knowledge
A Never-Ending Project for Humanity Called “the Web”Fabien Gandon
A Never-Ending Project for Humanity Called "the Web"
Fabien Gandon, Wendy Hall
https://hal.inria.fr/WIMMICS/hal-03633526
In this paper we summarized the main historical steps in making the Web, its foundational principles and its evolution. First we mention some of the influences and streams of thought that interacted to bring the Web about. Then we recall that its birthplace, the CERN, had a need for a global hypertext system and at the same time was the perfect microcosm to provide a cradle for the Web. We stress how this invention required to strike a balance between the integration of and the departure from the existing and emerging paradigms of the day. We then review the pillars of the Web architecture and the features that made the Web so viral compared to competitors. Finally we survey the multiple mutations the Web underwent no sooner it was born, evolving in multiple directions. We conclude on the fact the Web is now an architecture, an artefact, a science object and a research and development object, and of which we haven't seen the full potential yet.
Technologie Proche: Imagining the Archival Systems of Tomorrow With the Tools...Artefactual Systems - AtoM
These slides accompanied a June 4th, 2016 presentation made by Dan Gillean of Artefactual Systems at the Association of Canadian Archivists' 2016 Conference in Montreal, QC, Canada.
This presentation aims to examine several existing or emerging computing paradigms, with specific examples, to imagine how they might inform next-generation archival systems to support digital preservation, description, and access. Topics covered include:
- Distributed Version Control and git
- P2P architectures and the BitTorrent protocol
- Linked Open Data and RDF
- Blockchain technology
The session is part of an attempt by the ACA to create interactive "working sessions" at its conferences. Accompanying notes can be found at: http://bit.ly/tech-Proche
Participants were also asked to use the Twitter hashtag of #techProche for online interaction during the session.
Acetabularia Information For Class 9 .docxvaibhavrinwa19
Acetabularia acetabulum is a single-celled green alga that in its vegetative state is morphologically differentiated into a basal rhizoid and an axially elongated stalk, which bears whorls of branching hairs. The single diploid nucleus resides in the rhizoid.
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...Levi Shapiro
Letter from the Congress of the United States regarding Anti-Semitism sent June 3rd to MIT President Sally Kornbluth, MIT Corp Chair, Mark Gorenberg
Dear Dr. Kornbluth and Mr. Gorenberg,
The US House of Representatives is deeply concerned by ongoing and pervasive acts of antisemitic
harassment and intimidation at the Massachusetts Institute of Technology (MIT). Failing to act decisively to ensure a safe learning environment for all students would be a grave dereliction of your responsibilities as President of MIT and Chair of the MIT Corporation.
This Congress will not stand idly by and allow an environment hostile to Jewish students to persist. The House believes that your institution is in violation of Title VI of the Civil Rights Act, and the inability or
unwillingness to rectify this violation through action requires accountability.
Postsecondary education is a unique opportunity for students to learn and have their ideas and beliefs challenged. However, universities receiving hundreds of millions of federal funds annually have denied
students that opportunity and have been hijacked to become venues for the promotion of terrorism, antisemitic harassment and intimidation, unlawful encampments, and in some cases, assaults and riots.
The House of Representatives will not countenance the use of federal funds to indoctrinate students into hateful, antisemitic, anti-American supporters of terrorism. Investigations into campus antisemitism by the Committee on Education and the Workforce and the Committee on Ways and Means have been expanded into a Congress-wide probe across all relevant jurisdictions to address this national crisis. The undersigned Committees will conduct oversight into the use of federal funds at MIT and its learning environment under authorities granted to each Committee.
• The Committee on Education and the Workforce has been investigating your institution since December 7, 2023. The Committee has broad jurisdiction over postsecondary education, including its compliance with Title VI of the Civil Rights Act, campus safety concerns over disruptions to the learning environment, and the awarding of federal student aid under the Higher Education Act.
• The Committee on Oversight and Accountability is investigating the sources of funding and other support flowing to groups espousing pro-Hamas propaganda and engaged in antisemitic harassment and intimidation of students. The Committee on Oversight and Accountability is the principal oversight committee of the US House of Representatives and has broad authority to investigate “any matter” at “any time” under House Rule X.
• The Committee on Ways and Means has been investigating several universities since November 15, 2023, when the Committee held a hearing entitled From Ivory Towers to Dark Corners: Investigating the Nexus Between Antisemitism, Tax-Exempt Universities, and Terror Financing. The Committee followed the hearing with letters to those institutions on January 10, 202
Francesca Gottschalk - How can education support child empowerment.pptxEduSkills OECD
Francesca Gottschalk from the OECD’s Centre for Educational Research and Innovation presents at the Ask an Expert Webinar: How can education support child empowerment?
Unit 8 - Information and Communication Technology (Paper I).pdfThiyagu K
This slides describes the basic concepts of ICT, basics of Email, Emerging Technology and Digital Initiatives in Education. This presentations aligns with the UGC Paper I syllabus.
Biological screening of herbal drugs: Introduction and Need for
Phyto-Pharmacological Screening, New Strategies for evaluating
Natural Products, In vitro evaluation techniques for Antioxidants, Antimicrobial and Anticancer drugs. In vivo evaluation techniques
for Anti-inflammatory, Antiulcer, Anticancer, Wound healing, Antidiabetic, Hepatoprotective, Cardio protective, Diuretics and
Antifertility, Toxicity studies as per OECD guidelines
Safalta Digital marketing institute in Noida, provide complete applications that encompass a huge range of virtual advertising and marketing additives, which includes search engine optimization, virtual communication advertising, pay-per-click on marketing, content material advertising, internet analytics, and greater. These university courses are designed for students who possess a comprehensive understanding of virtual marketing strategies and attributes.Safalta Digital Marketing Institute in Noida is a first choice for young individuals or students who are looking to start their careers in the field of digital advertising. The institute gives specialized courses designed and certification.
for beginners, providing thorough training in areas such as SEO, digital communication marketing, and PPC training in Noida. After finishing the program, students receive the certifications recognised by top different universitie, setting a strong foundation for a successful career in digital marketing.
2024.06.01 Introducing a competency framework for languag learning materials ...Sandy Millin
http://sandymillin.wordpress.com/iateflwebinar2024
Published classroom materials form the basis of syllabuses, drive teacher professional development, and have a potentially huge influence on learners, teachers and education systems. All teachers also create their own materials, whether a few sentences on a blackboard, a highly-structured fully-realised online course, or anything in between. Despite this, the knowledge and skills needed to create effective language learning materials are rarely part of teacher training, and are mostly learnt by trial and error.
Knowledge and skills frameworks, generally called competency frameworks, for ELT teachers, trainers and managers have existed for a few years now. However, until I created one for my MA dissertation, there wasn’t one drawing together what we need to know and do to be able to effectively produce language learning materials.
This webinar will introduce you to my framework, highlighting the key competencies I identified from my research. It will also show how anybody involved in language teaching (any language, not just English!), teacher training, managing schools or developing language learning materials can benefit from using the framework.
6. Reading Wheel (Bookwheel)
• Described by Agostino
Ramelli in 1588
• Keep several books open
to read from them at the
same time
o comparable to modern
tabbed browsing
• The reading wheel has
never really been built
• Could be seen as a
predecessor of hypertext
6
8. "As We May Think" (1945)
When data of any sort are placed in storage, they are filed
alphabetically or numerically, and information is found
(when it is) by tracing it down from subclass to subclass.
It can be in only one place, unless duplicates are used; one
has to have rules as to which path will locate it, and the
rules are cumbersome. Having found one item, moreover,
one has to emerge from the system and re-enter on a new
path. The human mind does not work that way. It operates
by association. ...
Vannevar Bush
9. "As We May Think" (1945) …
... It affords an immediate step, however, to associative
indexing, the basic idea of which is a provision whereby any
item may be caused at will to select immediately and
automatically another. This is the essential feature of the
memex. The process of tying two items together is the
important thing. ...
Vannevar Bush, As We May Think,
Atlanic Monthly, July 1945
Vannevar Bush
10. "As We May Think" (1945) …
• Bush's article As We May
Think (1945) is often seen
as the "origin" of hypertext
• The article introduces
the Memex
o memory extender
o store and access information
o follow cross-references in the form
of associative trails between pieces
of information (microfilms)
o prototypical hypertext machine
o trail blazers are those who find delight in
the task of establishing useful trails
Memex
14. What happed to the Memex
14
• Bush ‘upgrades’ the memex in 1959
o Magnetic tape replaces microfilm
o Ability to speak to the machine – interaction with sound
o Color to distinguish old trails from new trails
o Phone lines in order to add documents to one’s
personal database
• Was never built
15. 2/12/19 15
• Why wasn’t it ever built?
• What was its impact on future developments?
• Why is it important?
16. Why wasn’t it ever built?
16
• According to Bush:
o It would have been ‘enourmously expensive’ to build
o It was an idea before its time
o Creating associations between was not well understood
o Public didn’t understand the value of the project
• Others:
o Device was too ambiguous; no good definition
o No practical way to create associations
o Associations aren’t the best way to link information
18. Memex and Hypertext/Web
18
Innovation Memex Hypertext/Web
Relationships between
connections
Association Association
Ideas connected by… Web of trails Hyperlinks, tags
Ideas are… Personal Shared/public
Relationships are… Bi-directional Uni-directional
Retrieval mechanism Identify trail and then
search trail sequentially
Click
Model for memory
association
Human brain Human brain
19. Why was the Memex important
19
• Provided a method for dealing with information overload
• Presents a novel approach to organizing personal information
• Remembered as the technical vision of hypertext
• Suggests fascinating possibilities for human-machine symbiosis
• Derivative inventions represent an opportunity to study the co-
evolution of human practices and technological tools
22. Hypertext (1965)
• Ted Nelson coined the term hypertext
• Nelson started Project Xanadu in 1960
o first hypertext project
o non-sequential writing
o referencing/embedding parts of a document
in another document (transclusion)
à transpointing windows
o bidirectional (bivisible) links
o version and rights management
• XanaduSpace 1.0 was released as part of Project Xanadu
in 2007
• OpenXanadu demo/deliverable released in 2014
Ted Nelson
25. Video: Ted Nelson Explains XanaduSpace
https://www.youtube.com/watch?v=En_2T7KH6RA
26. Hypertext Editing System, HES (1967)
• Early hypertext system
o developed at Brown University (1967)
by Andries van Dam and his team
o Ted Nelson was a visitor at Brown
University a that time
• Limitations
o unidirectional links
o only embedded links
• File Retrieval and Editing System, FRESS (1968)
o follow-up project taking ideas from HES and NLS
o first system introducing 'undo' functionality
o bidirectional links
27. The Mother of All Demos (1968)
• Douglas Engelbart and his colleagues
at the Stanford Research Institute
developed the oNLine System (NLS) as
part of the Augment Project
o vision about the future of interactive computing
• NLS was demonstrated at the Fall
Joint Computer Conference in 1968
o showed first practical use of hypertext
o computer mouse
o remote collaboration (connected computers)
o raster-scan video monitors
o screen windows
o ...
Douglas Engelbart
29. Aspen Moviemap (1978)
• Early hypermedia system
o developed at MIT by Andrew
Lippman and his team
o hypermedia = extension of
hypertext with other media
types (e.g. images, sounds)
• Virtual tour of Aspen
o pictures taken every 10 feet
while driving through the city
o additional linked media
(e.g. images and sounds)
• Similar concept now used in
Google Street View
Slide source: Beat Signer
32. ARPANET (1969)
• Advanced Research
Projects Agency Network
o created by DARPA
(US Department of Defense)
o first operational packet
switching network
o first ARPANET link esta-
blished in November 1969
• ARPANET applications
o Email (1971), Ray Tomlinson
o FTP (1973)
ARPANET Team
33. Worldwide Number of Hostnames
992‘117‘228 hostnames in August 2014, source: http://news.netcraft.com
34. TCP (1974)
• Transmission control protocol
o replacement of Network Control
Protocol (NCP)
• 'A Protocol for Packet Network
Interconnection'
o by Vint Cerf and Bob Kahn
• Reliable and ordered
transmission of byte stream
between two endpoints
• Migration of ARPANET to TCP/IP in 1982
Vint Cerf Bob Kahn
35. TCP/IP (1978)
• 4 abstraction layers
o each layer offers functionality to the above layer
o separation of concerns
• Application layer
o HTTP, FTP, POP, ...
• Transport layer
o TCP, UDP, ...
• Internet layer
o addressing hosts and packet routing
o IP, ...
• Link layer
38. World Wide Web (WWW)
• Networked hypertext system
(over ARPANET) to share in-
formation at CERN
o first draft in March 1989
o The Information Mine,
Information Mesh, …?
• Components by end of 1990
o HyperText Transfer Protocol (HTTP)
o HyperText Markup Language (HTML)
o HTTP server software
o Web browser called WorldWideWeb
• First public "release" in August 1991
Tim Berners-Lee Robert Cailliau
Slide source: Beat Signer
40. WWW and Hypertext
• WWW is mainly a network-enabled version of the
HES hypertext model
o unidirectional links between heterogeneous resources
o is it more than just a digital version of paper documents
with links?
• What about all the richer functionality researched by the
hypertext community?
o bidirectional links
o transclusion and external (non-embedded) links
o version management
o …
42. Basic Client-Server Web Architecture
• Effect of typing http://www.kuleuven.be in the broswer bar
(1) use a Domain Name Service (DNS) to get the IP
address for www.kuleuven.be (answer
2a02:2c40:0:80::80:12)
(2) create a TCP connection to 2a02:2c40:0:80::80:12
(3) send an HTTP request message over the TCP
connection
(4) visualise the received HTTP response message in the
browser
Internet
Client Server
HTTP Request
HTTP Response
43. Web Server
• Tasks of a web server
(1) setup connection
(2) receive and process
HTTP request
(3) fetch resource
(4) create and send
HTTP response
(5) logging
• The most prominent web servers are the Apache HTTP
Server and Microsoft's Internet Information Services (IIS)
• A lot of devices have an embedded web server
o printers, WLAN routers, TVs, ...
Worldwide Web Servers, http://news.netcraft.com
44. Example HTTP Request Message
GET / HTTP/1.1
Host: www.kuleuven.be
User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:24.0) Gecko/20100101
Firefox/24.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-gb,en;q=0.5
Accept-Encoding: gzip, deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
45. Example HTTP Response Message
HTTP/1.1 200 OK
Date: Thu, 03 Oct 2013 17:02:19 GMT
Server: Apache/2.2.14 (Ubuntu)
X-Powered-By: PHP/5.3.2-1ubuntu4.15
Content-Language: nl
Set-Cookie: lang=nl; path=/; domain=.kuleuven.be; expires=Mon, 18-Sep-2073
17:02:16 GMT
Content-Type: text/html; charset=utf-8
Keep-Alive: timeout=15, max=987
Connection: Keep-Alive
Transfer-Encoding: chunked
<!DOCTYPE html>
<html lang="nl" dir="ltr">
<head>
...
</head>
<title>KU Leuven</title>
<meta name="Description" content="Welkom aan de KU Leuven" />
...
</html>
46. HTTP Protocol
• Request/response communication model
o HTTP Request
o HTTP Response
• Communication always has to be initiated by the client
• Stateless protocol
• HTTP can be used on top of various reliable protocols
o TCP is by far the most commonly used one
o runs on TCP port 80 by default
• Latest version: HTTP/2.0
47. HTTP Message Format
• Request and response messages have the same format
<html>
...
</html>
HTTP/1.1 200 OK
Date: Thu, 03 Oct 2013 17:02:19 GMT
Server: Apache/2.2.14 (Ubuntu)
X-Powered-By: PHP/5.3.2-1ubuntu4.15
Transfer-Encoding: chunked
Content-Type: text/html
header field(s)
blank line (CRLF)
message body (optional)
start line
HTTP_message = start_line , {header} , "CRLF" , {body};
48. HTTP Request Message
• Request-specific start line
• Methods
o GET : get a resource from the server
o HEAD : get the header only (no body)
o POST : send data (in the body) to the server
o PUT : store request body on server
o TRACE : get the "final" request (after it has potentially been modified by proxies)
o OPTIONS : get a list of methods supported by the server
o DELETE: delete a resource on the server
start_line = method, " " , resource , " " , version;
method = "GET" , "HEAD" , "POST" , "PUT" , "TRACE" ,
"OPTIONS" , "DELETE";
resource = complete_URL | path;
version = "HTTP/" , major_version, "." , minor_version;
49. HTTP Response Message
• Response-specific start line
• Status codes
o 100-199 : informational
o 200-299 : success (e.g. 200 for 'OK')
o 300-399 : redirection
o 400-499 : client error (e.g. 404 for 'Not Found')
o 500-599 : server error (e.g. 503 for 'Service Unavailable')
start_line = version , status_code , reason;
version = "HTTP/" , major_version, "." , minor_version;
status_code = digit , digit , digit;
reason = string_phrase;
Slide source: Beat Signer
50. HTTP Header Fields
• There exist general headers (for requests and responses),
request headers, response headers, entity headers and
extension headers
• Some important headers
o Accept
• request header definining the Multipurpose Internet Mail
Extensions (MIME) that the client will accept
o User-Agent
• request header specifying the type of client
o Keep-Alive (HTTP/1.0) and Persistent (HTTP/1.1)
• general header helping to improve the performance since
otherwise a new HTTP connection has to be established for
every single webpage element
o Content-Type
• entity header specifing the body's MIME type
51. MIME Types
The MIME type defines the request or response body's
content and is used for the appropiate processing
• Standard MIME types are registered with the Internet
Assigned Numbers Authority (IANA) [RFC-2045]
mime = toplevel_type , "/" , subtype;
MIME Type Description
text/plain Human-readable text without formatting information
text/html HTML document
image/jpeg JPEG-encoded image
... ...
53. Cookies
• Introduced by Netscape in June 1994
• A cookie is a piece of information that is
assigned to a client on their first visit
o list of <key,value> pairs
o often just a unique identifier
o sent via Set-Cookie or Set-Cookie2 HTTP response headers
• Browser stores the information in a "cookie database" and
sends it back every time the same server is accessed
• Cookies can be disabled in the browser settings
54. Hypertext Markup Language (HTML)
• Dominant markup language for webpages
• More details in the next lecture
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Katrien Verbert</title>
</head>
<body>
<p>Katrien Verbert is Assistant Professor of Computer Science at KU Leuven</p>
</body>
</html>
55. Dynamic Web Content
• Often it is not enough to serve static web pages but
content should be changed on the client or server side
• Server-side processing
o Common Gateway Interface (CGI)
o JavaServer Pages (JSP)
o PHP: Hypertext Preprocessor (PHP)
o Python
o ...
• Client-side processing
o JavaScript
o Adobe Flash
o ...
59. JavaScript
• Interpreted scripting language for client-side processing
• JavaScript functionality often embedded in HTML
documents but can also be provided in separate files
• JavaScript often used to
o validate data (e.g. in a form)
o dynamically add content to a webpage
o process events (onLoad, onFocus, etc.)
o change parts of the original HTML document
o create cookies
o ...
61. Semantic Web (Web 3.0)
• Add explicit semantics
to web resources
• Machine-interpretable Web
• Use of ontologies
• Potential reasoning over
Web resources
Character set: UNICODE
Cryptography
Syntax: XML and XML Namespaces
Data interchange: RDF
Taxonomies: RDFS
Ontologies:
OWLQuerying:
SPARQL
Unifying Logic
Trust
User interface and applications
Proof
Rules:
RIF/SWRL
Based on [http://en.wikipedia.org/wiki/File:Semantic-web-stack.png]
Identifiers:
URI/IRI
61
64. Co-lecturer (tom) and teaching assistant (Nyi Nyi)
Nyi Nyi Htun
https://www.kuleuven.be/wieiswie/nl/
person/00120760
Tom Broos
https://www.kuleuven.be/wieiswie/nl/
person/00039954
65. Optional text books
HTML & CSS: Design
and Build Web Sites
Jon Duckett
JavaScript & JQuery:
Interactive Front-end
Web Development
Jon Duckett
Web Development and
Design Foundations HTML5
Terry Felke-Morris
67. Course goals
know the
foundations
learn the basic
infrastructure of the
web
Learn about
technologies and
tools
Learn to use web
technologies and tools
develop the knowledge
to select appropriate
technologies for
particular tasks
build
build your own non-
trivial dynamic web
application
69. Course Outline
1. Introduction
o history of the Web
o HTTP protocol
o client-side and server-side processing
o course organisation
2. Hypertext Markup Language
3. CSS
4. Javascript
70. Course Outline …
5. JQuery
o Selecting HTML elements
o Dynamically updating a web page
6. APIs and XML/JSON applications
o XML
o JSON
o REST web services
o Using REST APIs to retrieve data
71. Course Outline …
7. PHP
8. Semantic Web and Web 3.0
o RDF, RDFs, OWL, SPARQL, …
o Linked Data
o semantic web applications
73. date Lecture Exercise session
12 Feb. Course introduction, history of the web, web
architectures, overview assignments
19 Feb. Introduction to HTML Exercise HTML
26 Feb. Introduction to CSS Exercise HTML + CSS
5 March No Lecture
12 March Introduction Javascript Exercise Javascript
19 March Introduction JQuery Exercise JQuery
26 March APIs and XML/JSON Applications Exercise working with APIs
2 April Project kick-off
23 April Project implementation
30 April Semantic web technologies Project implementation
7 May PHP Project implementation
14 May No Lecture Project implementation
21 May Project presentations
74. Team project milestones
1. Form teams
2. Project proposal
3. Final presentation
4. Short report
Due 27 Feb
due 30 March
21May
due 28 May
75. Project proposal
1 page description of your intended project:
o Motivation
o Which APIs you will use
o First design on paper
o Problems/questions
Due 30 March
If you want earlier feedback, send us your proposal earlier ;-)
76. Final presentation
• 20 mins (15 mins presentations + 5 mins questions)
• What is your project about?
• Most important part final presentation: demo
• What have you learned when implementing the project?
77. Short report
• Motivation
• Data/API
• Web application design and implementation
• Reflection
o How is your work related to the topics taught in the course?
o If you would start over, what would you do differently?
• Effort
o How much effort did it take to implement the project?
o how did you distribute it in your group?
82. References
• Web Technologies: A Computer Science
Perspective, Jeffrey C. Jackson, Prentice
Hall, August 2006, ISBN-13: 978-0131856035
• Vannevar Bush, As We May Think, Atlanic Monthly,
July 1945
o http://www.theatlantic.com/doc/194507/bush/
o http://sloan.stanford.edu/MouseSite/Secondary.html
o http://www.youtube.com/watch?v=c539cK58ees
• Videos of the NLS demo
o http://sloan.stanford.edu/mousesite/1968Demo.html
83. References …
• Ted Nelson demonstrates Xanadu Space
o http://www.youtube.com/watch?v=En_2T7KH6RA
• Aspen Moviemap
o http://www.naimark.net/projects/aspen.html
o http://www.youtube.com/watch?v=w18MyqszIYc
• Networking Technologies (TCP/IP, …)
o Andrew S. Tanenbaum, Computer Networks,
Prentice Hall 2002, ISBN-13: 978-0130661029
• Mark Weiser, The Computer for the 21st Century,
ACM Mobile Computing and Communications
Review, July 1999
84. TODO by next week
2/12/19 84
Request webstorm key (free)
https://www.jetbrains.com/student/