Web Technologies - Course Organizationkti.tugraz.at/staff/vsabol/courses/wt/wt_slides_intro.pdf · Course Organization Web Technologies (706.704) 3SSt VU WS 2019/20 Vedran Sabol Institute

Web Technologies VU - Introduction October 5th, 2020Vedran Sabol

Course Organization

Web Technologies (706.704)

3SSt VU

WS 2020/21

Vedran Sabol

Institute of Interactive Systems and Data Science, TU Graz

October 5th, 2020


Course

• Web Technologies VU (706.704)

• Elective course

Computer Science

Software Engineering and Management

• Catalogues

Multimedia Information Systems

Knowledge Technologies

Web and Data Science

2


Lecturers

Name:

Affiliation:

Office:

Office hours:

Phone:

Email:

3

Dr. techn. Vedran Sabol

Know-Center GmbH

Inffeldgasse 13, 5th floor, room PZ2 05 070

by appointment

+43 316 873 30850

[email protected]


Language

• Master course: lectures in English

• Communication, student Project and student Presentations:

English

or

German

• If in German: please informally (Du)!

• The lecture consists of two parts

1. Theoretical part

2. Practical part

4


When and Where

• Lectures - CANCELED: Monday, 14:15 – 15:45, HS i12

due to COVID-19 rules and a very large number of students!

• INSTEAD: “virtual” Lectures available for download

Slides and lecture videos will be posted each Monday on the course homepage

• Course Homepage: http://kti.tugraz.at/staff/vsabol/courses/wt

2020 content will be set up by Monday, 5th October 2020, in the evening

• Registration for the course in TUGOnline until 05.10.2020, 23:59

after that you can still be registered by the lecturer!

5

http://kti.tugraz.at/staff/vsabol/courses/wt


Student Work

Short summary:

• Main Goal: implement a working WebApp

Teamwork: groups of 4-5 Students (no exceptions!)

• Two presentations by each student team

1. Plan presentations in mid-November

• 20 minutes per group

2. Result presentations in mid-January

• 30 minutes per group

Presentation slot will be assigned to your team by the lecturer

• you only attend your group’s presentation slot

• Attending student presentations is obligatory!

all team members must attend both presentations

6


Communication

1. Newsgroup: tu-graz.lv.mmis

Server: news.tugraz.at

Newsgroup is the preferred way of communication for this course!

2. In person

On Monday in HS i12, at 14:15

You can ask me questions concerning the course

• Remember: there’s no lectures held at HS i12!

3. Email: [email protected]

if the previous two do not fit your need

• If addressing the lecturer (me) in the news group or emails:

a good idea is to use @LECTURER in the subject to raise my attention :)

7

mailto:[email protected]


Goals of the course (VU 706.704)

• To gain an overview of modern Web-based systems

• To learn what these systems are based on technically

Main technologies for developing Web Apps

Web development methods and design patterns

The structure of the Web and information access

Web usability, visualisation and social-semantic technologies

• To learn about successful examples of such systems

• To learn about the Web in technical details

8


Organisation of the course (VU 706.704)

• Theoretical part: lectures and corresponding materials

• Slides will be posted on the course homepage each Monday

URL to the new PDF will be announced on the newsgroup

• NO written examination this year!

• Instead: oral theory exam

each student will be asked question during the final group presentations in January 2021

Come well-prepared: learn the slides

If you fail you will have to repeat the theory exam !!!

9


Organisation of the course (VU 706.704)

• Practical part:

Implementation of a Web App

performed in teams of 4-5 students

• Deliverables:

Project plan

Implementation

Documentation

Reports

• 2 team presentations (all team members must attend)

1. Project plan (mid-November 2020)

2. Demo and oral exam (mid-January 2021)

10


Content of the course (VU 706.704)

Main areas:

• Markup languages with focus on HTML5

• Web programming , frameworks and architectural patterns

• Structure of the Web, navigating and finding information

• Web usability

• Interactive visualization in the Web

• Introduction to social-semantic Web

11



• Topic: Web programming

Main technologies: HTTP, URL, HTML…

Data formats for transferring information on WWW and Internet

Markup Languages: SGML, XML, HTML(5)

Main focus: HTML5 (two lectures) and CSS basics

Architectural patterns: Model-View-Controller (and similar)

Experiences with modern technologies: AngularJS and Node.JS

CGI, Contract programming, Web frameworks

…

12



• Topic: World Wide Web

Understanding and Investigating the Web in a scientific manner

What is it? What can WWW do? How is WWW structured? Why is WWW the way it is? How does WWW grow? How people access information in the Web? How can I find information on WWW? ...

Finding information on the Web: search engines, ranking methods,...

• Topic: Web usability

Guidelines for designing usable Web applications

Evaluation of interactive Web interfaces

13



• Topic: Visualisation in the Web

Visualisation Technologies for the Web

Visualisation Principles and Methods

Web-based Visual Analytics Systems

• Topic: social-semantic Web

Introduction to social-semantic Web technologies

Web 2.0 basics

14


Example – Web Visualisation (VU 706.704)

15

• Examples

Linked Data Query Wizard

Linked Data Visualization Wizard


Course Calendar (VU 706.704)

• 05.10.2020: Introduction, course and organization

• 12.10.2020: Basic Web Programming

• 19.10.2020: Markup Languages and HTML5 part I

• Team building deadline: 31.10.2020

Teams of 4 to 5 students

Use the newsgroup to find team partners!

Submission modality will be announced (via Email and in the newsgroup)

• 09.11.2020: HTML5 part II

16



• Plan submission deadline: 15.11.2020

Modality to be announced (via Email and in the newsgroup)

• 16.11., 19.11. and 20.11.2020: Practicals

Project plan presentations (in teams)

When:

• 16.11.2020, 11:30 – 16:00

• 19.11. and 20.11.2020, 09:00 – 17:00

Where: Room PZ2 05 038B (Besprechungsraum “Bunt”), Inffeldgasse 13, 5th floor

• If COVID-19 situation should deteriorate, then presentations will be held over a video link

Each team will receive a 20-minutes time slot from the lecturer

• You only have to attend your slot

17



• 23.11.2020: Architectural Patterns and Web Frameworks

• 30.11.2020: Guest lecture by a professional Web developer

Experiences, best practices and guidelines

MVC with AngularJS

Node.JS

Design and Usability of WebApps

• 07.12.2020: Web Structure, Searching, and Social-Semantic Web

• 14.12.2020: Web Usability and Web Visualization

18



• Demo App submission deadline: 18.01.2021

Modality to be announced (via Email and in the newsgroup)

• 19., 20., 21 and 22.01.2021: Practicals

Student presentation of results (in teams)

Oral examination (theory, each student will answer questions)

When: 09:00 - 18:00

Where: Room PZ2 05 038B (Besprechungsraum “Bunt”), Inffeldgasse13, 5th floor

• If COVID-19 situation should deteriorate, then presentations will be held over a video link

Each group will receive a 30-minutes time slot from the lecturer

• You only have to attend your slot

19


Practicals - Goals (VU 706.704)

• Project: implementing an interactive Web App using HTML5 and architectural patterns

• Web dev basics: HTTP, AJAX, JSON, client app model, basic server programming

• HTML5: JavaScript extensions, extended forms, canvas/SVG, browser storage, audio/video, Web Workers, WebSockets, app cache, DnD and other APIs

• Separation of concerns using Model View Controller (MVC) design pattern

20


Practicals - Goals (VU 706.704)

• Learning how to use different technologies in practice

Try out some new (and cool) technologies

Document all the steps

• Implementation

working and documented HTML5 code

capable of a live demonstration

• Documentation of code and design (using HTML + images)

Included in your app code

linked from your demo

• Teamwork: groups of 4-5 students

No working alone (no exceptions!)

21


Practicals - Presentations (VU 706.704)

• Plan presentation: 20 minute time slot

5 minutes presentation (use slides)

15 minutes feedback and discussion

• Plan content (use slides)

Introduce your WebApp idea - what are you going to implement

Give a time estimate (when what is supposed to happen)

Define group member responsibilities

Show a mockup of your user interface design

Tell us what HTML5 (and other) technologies you plan to use

Explain the architecture of the planned WebApp (MVC, server-client)

Obtain feedback on your plan from the lecturer

• take notes!

Leave with a “contract” of what you will be implementing

22


Practicals – Presentations (VU 706.704)

• Demo presentation and oral exam: 30 minute slot

5 minutes for the presentation (use slides)

5 minutes demo (you may mix slides and demo)

20 minutes question answering

• Demo content

Show us what you did

Explain how it works shortly

Briefly answer 1-2 questions (5 minutes)

Justify why you did something (the way you did it)?

Discuss advantages/disadvantages openly

Timings are strict (for plan and demo presentations)!

Please make a dry run at home !!!

23


Important Dates Overview (VU 706.704)

Submissions:

• Team building deadline: 30.10.2020

• Project plan submission deadline: 15.11.2020

• Demo App submission deadline: 18.01.2021

• One submission per team

Submission modality will be announced (per Email to each student and in the newsgroup)

Student presentations (in teams):

• Project plan presentations: mid-November 2020

16.11. or 19.11. or 20.11.2020

• Student presentation of results and oral examination: mid-January 2021

19. or 20. or 21 or 22.01.2021

• Each team will receive a time slot from the lecturer

You only have to attend your slot

24


Demo Implementation - Requirements

• WebApp implementation

Focus is on client-side programming in the browser

Single page app

Server component(s) may or may not be involved

• Must have’s:

Direct programming of HTML5 APIs and technologies

Implement the Model-View-Controller pattern on the client yourself

• Goal: clean separation of your code (i.e. separate files, documented APIs) into i) logic, ii) data model, and iii) presentation/rendering

These topic will be introduced in the theoretical lectures

25



• Don’s:

Use of helper libraries that encapsulate access to HTML5 features is NOT PERMITTED

Libraries that set up the stage for MVC (e.g. angular.js) are NOT PERMITTED

browser plug-ins/add-ons are not permitted if they take over HTML5 features (e.g. playing media)

• You still may use libraries!

for all other purposes than listed above

if your app does demonstrate direct use of all necessary HTML5 features

• but you wish to use a library for a “large” feature that otherwise would not be possible

• e.g. LeafLet.js for geo-visualization

Ask if unsure!

26



• Your demo must use

• 1 graphics technology

canvas (2D), or SVG, (or optionally WebGL)

• 1 storage technology:

Web Storage, Indexed DB, File/FileSystem API, (or WebSQL)

Cookies don’t count

• Use one (or both) of the following

background processing with Web Workers

real-time communication using WebSockets

27



• Your demo must use (con’d)

• Choose (at least) 2 of the following HTML5 features

Web Forms with HTML5 features

Semantic markup

Audio/video elements

Geolocation API

Drag and Drop

History API

AppCache

NOTE: you may exchange these with other HTML5 technologies

• e.g. camera capture using MediaRecorder API (not introduced in the lecture)

• If you access the server: asynchronous app model using AJAX

REST API with JSON for data transfer

28


WebApp Ideas

• Educational widgets

quizzes, math training, simple physics simulations, multimedia content presentation etc.

• Games

E.g. pong, snake, battleship etc.

optionally incl. multiplayer

• Drawing/sketching application

e.g. freehand drawing, image processing, simple (UML) diagram editor

optionally with saving/loading results locally

• (Sticky) Note-taking application

optionally incl. sharing

29


WebApp Ideas

• Chat application

optionally incl. media exchange

• Geo-application

e.g. embedding information from public REST APIs over a leaflet.js map

• Simplified text editor app

optionally incl. (real-time) collaboration/synchronisation

• Data visualization or data dashboard app

• <add your idea here>

30


Grading (VU 706.704)

• Project plan: 10

• Plan presentations: 10

• Implementation and documentation (working demo!): 40

• Result presentations: 10

• Question answering (theory): 30

NOTE: if you fail the oral theory exam, you will have to repeat it!

• Total points: 100

31


Thank you

Questions?

32

Also interesting:

• Master’s Thesis on Visual Web-based User Interfaces @Know-Center

contact the lecturer ([email protected])

• Evaluation Methodology VU (706.712) by Eduardo Veas

mailto:[email protected]

Documents

Web Technologies - Course Organizationkti.tugraz.at/staff/vsabol/courses/wt/wt_slides_intro.pdf · Course Organization Web Technologies (706.704) 3SSt VU WS 2019/20 Vedran Sabol Institute