x§§

Web-CAIS

Web for Content Authors and Information Scientists

2023 Spring, period IV;5 ects (5 op)

Pia Niemelä, Janne Miilunpalo, Jaakko Rajala, Jenni Hukkanen
All course material available in Plussa
Original slides, Aulikki Hyrskykari

Starting lecture

  • Learning outcomes
  • Prerequisites
  • Passing the course
    • Weekly exercises
    • Assignment
    • Exam
  • Course tools: Plussa, VSCode, browser dev tools
  • Course Content
  • How the web works
    • Core front-end technologies
    • History in short
    • Online resources
    • Validation

Learning outcomes

A student will be able to

  • implement websites and also enrich them with basic dynamic functionality.
  • understand the underlying basic technologies, and concepts that facilitate learning modern web frameworks

Knowledge: HTML, CSS, JavaScript, unstrapping abbreviations and terminology such as TCP/IP, HTTP, DNS, AJAX, JSON, CORS . . .

Prerequisites

  • Moderate programming experience beneficial, in particular needed in JavaScript assignment done in
    • group of five
  • No previous web development skills
    • but self-directed attitude in info and help seeking
    • help available during Kooditorios

The course practices: lectures

Starting lecture 9.3.
Hybrid lectures, both in the auditorium and in stream
Lectures are optional. Recordings will be stored in Teams

The course practices: weekly exercises

  • About a week for the submission
  • submitted to Plussa, most often as a file:
    • solve the exercises locally
    • when final, submit to Plussa for auto-grading
    • grading happens in a few minutes and points are given
    • corrective feedback provided as well
  • The submissions that are late will get -30..50% penalty
  • < 50%; of exercises means fail, and that the whole course will be declined
  • The grade varies between 0..2 (check the formula in the front page)
  • Sick leave gives a valid reason for deviation, if the course personnel is informed before module close, preferably with a doctor's certificate

HTTP, HTML: structure
(Ex1-2)

CSS, responsive web: Style
(Ex3-4)

JavaScript: behaviour
(Ex5-7)

Assignment: frontend part

Exam

The course practices: assignment

  • Groups of three to six
    • divided by course personnel
    • ..before Easter break.
    • Compulsory part: modules JS1, JS2 and JS3 (group submissions)
    • Optional part: groups can stop after JS3, or continue to the final assignment, the submission of which is done in git repo
  • Possible grades are [fail, 0-2]
    • fail, if Ex5-7< 50%
    • else, depending on exercise points the grade varies between 0..1, (check the formula in the front page)
    • grade 2 is possible if, in addition, the optional final assignment is pass, i.e.:
      • the work passes auto-graders
      • a student contributes fairly to the work
      • a student replies to the rate-your-mate survey

Rate-your-mate

  • Based on TeamQ by Britton et al. (2017)
  • provides feedback on collaboration skills
  • may result in the rejection of the work, if no contribution, but only a bunch of annoyed team mates

Plussa Exam

  • done on-line
  • grade:
    • < 50%: fail
    • < 75%: pass
    • >>= 75%: 1

Total

avg(2+2)+1=5

+2: wk01..04

+2: wk05..07 +1, assignment +1

+1: exam

Course tools

Developer tools
During lectures, we will use Chrome Developer tools, but similar tools are provided by all the browsers.

How web works

Web page as a playload

General (HTTP/web)

familiarize with techniques, tools and environments, the basics of web development

fetching data (AJAX), some security concerns (e.g., CORS)

HTML
  • character encoding
  • new HTML5 tags
    • e.g., semantic markup
    • media: audio, video
  • content model
  • tables, forms
  • validation
CSS
  • selectors and combinators
  • box model
  • display property, positioning, floating
  • flex, grid
  • media queries, Bootstrap
JavaScript
  • interaction and manipulation of DOM
  • variables and arrays, functions
  • form interactions
  • classes and objects
    • getters/setters, data hiding

Web page fetched as a GET request

  • A user must know the URL of a service. Human-readable names are used instead of IP addresses. The IP addressing range goes from 0.0.0.0 to 255.255.255.255 and they are allocated by the Internet Assigned Numbers Authority (IANA).
  • The Domain Name System (DNS) is called as the phonebook of the Internet. DNS solves the domain name (e.g. m.yle.fi) to a correct IP address. The IP address is used in routing in network layer.
  • On top of that, TCP/UDP is used as a transport layer, more info
Client
  • defines URL and makes GET request
  • in the request also other info, such as supported HTTP version, or info about user agent (type of a browser,...)

HTTP transaction

Server (Apache, Nginx, ...)

construct both

  • response headers and status code being the most important indicator
    • Here, 200 signals success
  • response body
    • when Content-type is: application/html, the body part is HTML
    • maybe be static or dynamically constructed HTML

OSI vs TCP/IP model: HTTP in the application layer

Mnemonic: "All people seem to need data protocols"
,
OSI LayerTCP/IP layerDescriptionExamples
ApplicationApplicationenables apps communicate with each other, e.g., over HTTPbrowsers, email apps, ftp services, DNS (mtr, ping)
Presentationencrypts the contentHTTPS
Sessionsends to port, synchssockets
TransportTransportcontrols network trafficTCP/UDP, IP-address:port (HTTP: 80, HTTPS: 443/8443, e.g., https://plus.tuni.fi:443 )
NetworkNetworkroutes packets via best path between networksIP addresses, connection may be checked with ICMP (ping)
Data LinkNetwork i/ftransfer of data frames within a networkMAC addresses
Physicaltransmits raw bit streamcables,switches

Web standards

Standards: history in short

W3C standardizes
WHATWG develops/
innovates
Year Organization Standard
1989 no standards HTML 1.0-2.0
1994 W3C HTML3 3.0-4.1
2000 W3C XHTML 1.0
2003 WHATWG (Mozilla, Opera, Apple) HTML
2006-2007 W3C + WHATWG co-operation
2014 -"- HTML5 (W3C recommendation)
2016 -"- HTML5.1 (W3C recommendation)

HTML standards and resources

WHATWG

W3 Consortium

A community for free and open Web standards

  • Member-driven organization, non-profit organization
  • W3C's vision for "One Web" brings together thousands of dedicated technologists representing more than 400 Member organizations and dozens of industry sectors.
  • W3C standards define an Open Web Platform for application development, such as
    • HTML
    • CSS
    • Scalable vector graphics (SVG)
    • Web open font format (WOFF)
    • the Semantic Web stack
    • XML
    • and a variety of other APIs
  • developers, designers, and anyone passionate about the Web have a place to hold discussions and publish ideas
For more information see https://www.w3.org/.

W3C validation

  • reveals mistakes that would otherwise go unnoticed
  • browsers render pages regardless of the mistakes in them
  • interpretation of erroneous code varies between browsers

HTML validation:
validator.w3.org

  • copy the HTML code into the validator direct input field, or
  • upload the code from your computer (Browse…), or
  • if published, just pass the address for the validator

CSS validation:
jigsaw.w3.org/css-validator/validator.html

  • as with HTML-code, either copy, upload or
  • pass the address of the whole file (which is attached with CSS code)

Literature

Course literature for those who like books The two, now already classic books good to start with

  • Jon Duckett: HTML & CSS: Design and build websites
  • Jon Duckett: JavaScript & jQuery: interactive frontend web development

Free online material

  • Marijn Haverbeke: Eloquent Javascript
  • Cody Lindley: Frontend Developer Handbook 2019 (recommended by Kari Systä, the Web/Cloud domain lead)
  • HTML & CSS
  • JavaScript

Material

On-line resources
  • Google of course, but what to choose from the result list?
  • Stackoverflow -search answers to specific questions
  • W3Schools (also tutorials, reference pages)