diff --git a/web/css/remark.css b/web/css/remark.css
index 5ffb122bb72a517649544b58b7885a36a5371d23..dd1a53f6b39862def7d7326f28f7bb1062c2bf6f 100644
--- a/web/css/remark.css
+++ b/web/css/remark.css
@@ -16,4 +16,14 @@ h1, h2, h3 {
padding: 50px;
margin: 20px;
border: 10px solid #FFE599;
+}
+
+.row {
+ display: flex;
+}
+
+.column {
+ flex-basis: 0;
+ flex-grow: 1;
+ max-width: 100%;
}
\ No newline at end of file
diff --git a/web/template.html b/web/example_01_template.html
similarity index 97%
rename from web/template.html
rename to web/example_01_template.html
index c8af9612e4c15e7d0d6d03d0041d7763416aa7ab..f35c2336432819466b590350cc984ce66d6f9a2d 100644
--- a/web/template.html
+++ b/web/example_01_template.html
@@ -11,5 +11,4 @@
<h1>Hello, world!</h1>
<p>This demonstrates a simple HTML document.</p>
</body>
-</html>
-```
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/web/example_02_position.html b/web/example_02_position.html
new file mode 100644
index 0000000000000000000000000000000000000000..55ca426348b849b8726d3501a592b39f0eff2e74
--- /dev/null
+++ b/web/example_02_position.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+ <title>Hello, positions!</title>
+ <meta name="description" content="A HTML document demonstrating positioning.">
+ <style>
+ .container-outer {
+ position: relative;
+ top: 10px;
+ width: 100%;
+ height: 90px;
+ background-color: blue;
+ }
+
+ .container-inner {
+ position: absolute;
+ top: 50px;
+ right: 50px;
+ width: 100%;
+ height: 30px;
+ background-color: yellow;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="container-outer">
+ <div class="container-inner">
+ </div>
+ </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/web/example_03_datatable.html b/web/example_03_datatable.html
new file mode 100644
index 0000000000000000000000000000000000000000..2e4cf677bc529d38cd4bdda1284f675374312f2a
--- /dev/null
+++ b/web/example_03_datatable.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+ <title>Hello, table!</title>
+ <meta name="description" content="A HTML document with an interactive table.">
+
+ <!-- jQuery -->
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+ <!-- DataTable -->
+ <link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
+ <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
+
+ <script>
+ $(document).ready(function () {
+ $('.table-interactive').DataTable();
+ });
+ </script>
+ </head>
+ <body>
+ <h1>Hello, table!</h1>
+ <p>This demonstrates an interactive table.</p>
+
+ <table class="table table-interactive">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Age</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Timmy</td>
+ <td>9</td>
+ </tr>
+ <tr>
+ <td>Santa Clause</td>
+ <td>-1</td>
+ </tr>
+ </tbody>
+ </table>
+ </body>
+</html>
\ No newline at end of file
diff --git a/web/example_04_masonry.html b/web/example_04_masonry.html
new file mode 100644
index 0000000000000000000000000000000000000000..ceccdfdfcad79140b359d30ad14ff42ba520a948
--- /dev/null
+++ b/web/example_04_masonry.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+ <title>Hello, masonry!</title>
+ <meta name="description" content="A HTML document with a masonry.">
+
+ <!-- jQuery -->
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+ <!-- Masonry -->
+ <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
+
+ <script>
+ $(document).ready(function () {
+ $('.grid').masonry({
+ itemSelector: '.grid-item',
+ });
+ });
+ </script>
+
+ <style>
+ .grid { width: 840px; background-color: #efefef; }
+ .grid-item { width: 200px; height: 20px; background-color: #618b55; margin: 5px; }
+ .grid-item--width2 { width: 410px; }
+ .grid-item--height2 { height: 40px; }
+ .grid-item--height4 { height: 80px; }
+ </style>
+ </head>
+ <body>
+ <h1>Hello, masonry!</h1>
+ <p>This demonstrates a masonry.</p>
+
+ <div class="grid">
+ <div class="grid-item grid-item--height4"></div>
+ <div class="grid-item grid-item--width2"></div>
+ <div class="grid-item grid-item--height2"></div>
+ <div class="grid-item"></div>
+ <div class="grid-item grid-item--height2"></div>
+ <div class="grid-item"></div>
+ </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/web/illustrations.bmpr b/web/illustrations.bmpr
index e7079ab015a4452d0b8ec115c82beab6aadb721c..9b1e6bbcef156f74b7157a0f4177503600204bc1 100644
Binary files a/web/illustrations.bmpr and b/web/illustrations.bmpr differ
diff --git a/web/images/css_position.png b/web/images/css_position.png
new file mode 100644
index 0000000000000000000000000000000000000000..837e85a56be55467a0458be2e0d6c12561a4b359
--- /dev/null
+++ b/web/images/css_position.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:07439a848ab5659d95cb97cce75c64b096d2763238bcaa66d28cd3b074ed32f2
+size 18521
diff --git a/web/images/css_position_absolute.png b/web/images/css_position_absolute.png
new file mode 100644
index 0000000000000000000000000000000000000000..bc1344fc104d441019ac08c679f15fa1514d3b44
--- /dev/null
+++ b/web/images/css_position_absolute.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5f4b5c2f5fa16f51b3cf7b7075b6b7b17eac91bab84f45d157a08f4746f4d09d
+size 10511
diff --git a/web/images/css_position_relative.png b/web/images/css_position_relative.png
new file mode 100644
index 0000000000000000000000000000000000000000..3ef3ef2581d14e377cf4692d23f321c5742d8fe3
--- /dev/null
+++ b/web/images/css_position_relative.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a785c8885822eba174ad499466ce97305034296cb2a087224f0687e0c0054e53
+size 10426
diff --git a/web/images/server_client.png b/web/images/server_client.png
new file mode 100644
index 0000000000000000000000000000000000000000..f91cf20c7514e779fcb00f05e181cb7a191a6bc5
--- /dev/null
+++ b/web/images/server_client.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3aac5d778f90e50019b2646934f79cfe7441f0d058b8a1a7ebd7884e45ddcd50
+size 29749
diff --git a/web/web.html b/web/web.html
index 861d6672ccbb352a6f4e07e0927a3b091a766b54..b6e599fc2b544e97626783f7f257e804671fe6e2 100644
--- a/web/web.html
+++ b/web/web.html
@@ -205,7 +205,7 @@ if you must start a new line manually</p>
```
```html
-<a ... target="_blank">`open in new tab`</a>
+<a ... target="_blank">open in new tab</a>
```
<a href="https://developer.mozilla.org/">mozilla documentation</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a" target="_blank">open in new tab</a> <br/>
@@ -418,7 +418,7 @@ Pastel colors for a soft look, bright colors for inspiring effects
<img src="images/color_bright.png" width="40%" alt="https://colorhunt.co/palette/220000">
Many premade color schemes, like [colorhunt](https://colorhunt.co)
-Many color scheme generators out there, like [paletton](https://paletton.com)
+Many color scheme generators, like [paletton](https://paletton.com)
---
@@ -505,7 +505,7 @@ body {
```
`em` is a relative unit to the current font size.
-`rem` is a relative unit the `html` font size.
+`rem` is a relative unit to the `html` font size.
You can try out different combinations on [app.typeanything.io](https://app.typeanything.io/).
@@ -563,8 +563,7 @@ body {
defines how element is placed (and elements around).
-TODO FACTCHECK
-`display: block` is the default and renders a full-width container.
+`display: block` renders a full-width container.
`display: inline-block` renders as wide as the content.
for arranging items along a grid, use `display:` [`grid`](https://css-tricks.com/snippets/css/complete-guide-grid/).
@@ -574,23 +573,69 @@ for distributing items use `display:` [`flex`](https://css-tricks.com/snippe
# Position
+.row[
+.column[
```css
-body {
- position: absolute;
+.container-outer {
position: relative;
- top: 0;
+ top: 10px;
+ left: 0px;
+ width: 100%;
+ height: 35px;
+ background-color: blue;
+}
+```
+]
+
+.column[
+```css
+.container-inner {
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ width: 100%;
+ height: 10px;
+ background-color: yellow;
}
```
+]
+]
+
+<img src="images/css_position.png" width="65%" >
---
-# Bootstrap
+# Position
+
+`relative` to original position.
-Good design is hard.
+<img src="images/css_position_relative.png" width="65%">
+<br>
+`absolute` to its *closest positioned ancestor*: next parent with `position: relative`.
+Removed from the document flow.
+<img src="images/css_position_absolute.png" width="65%">
+
+---
+
+# (Good) design & CSS is hard!
+
+Use proper resources:
+- https://developer.mozilla.org/en-US/docs/Web/CSS
+
+Use a CSS framework:
+- [Bootstrap](https://getbootstrap.com/)
+- [Foundation](https://get.foundation/)
+- [Bulma](https://bulma.io/)
+
+
+<br/>
+
+Getting it right is *extremly* hard!
+Advice: Learn a framework property. Avoid writing CSS.
---
@@ -602,9 +647,182 @@ class: center, middle
---
+# Why?
+
+<img src="images/server_client.png" width="50%">
+
+Execute code on client for interactivity.
+
+Examples:
+- Upon scrolling, content fades in (design)
+- Button is disabled as long as user must not click it (usability)
+- Table entries can be filtered and searched for (functionality)
+
+---
+
+# About JavaScript
+
+General-Purpose programming language.
+
+Dynamically typed (like python).
+Curly brackets to designate blocks of code (like C#, Java).
+Prototype-based inheritance (like ???).
+
+In browsers, has access to DOM (representation of HTML).
+Can rewrite the content of the page!
+
+Essentially two concepts on how to use JavaScript:
+- to generate HTML ("webapps")
+- to enhance server-generated HTML ("traditional")
+
+---
+
+# Webapps
+
+heavy client-side functionality.
+
+communicates with the server using mostly using "AJAX" requests: Content is loaded continuously in the background without the user noticing.
+
+examples:
+- google docs
+- spotify
+- facebook
+
+frameworks:
+- [Angular](https://angular.io/)
+- [React](https://reactjs.org/)
+- [VueJS](https://vuejs.org/)
+- many, MANY more
+
+---
+
+# Traditional websites
+
+content is generated by the server, but some small interactivity is added.
+
+the webpage is mostly complete & usable without JavaScript; its a "Nice-to-have".
+
+examples:
+- ETH, UZH homepages
+- this presentation
+- most KMU webpages
+
+by combining multiple JavaScript libraries (for tables, for animations, for modals, ...) and pointing them to right DOM element to "enhance".
+
+---
+
# jQuery
+library which simplifies interacting with the DOM.
+
+DOM manipulation
+```js
+$(".button").click()
+```
+
+Event handling
+```js
+$(document).ready(() => { $(".button").click() });
+```
+
+Ajax
+```js
+$.ajax({
+ type: "POST",
+ url: 'index.php',
+ data: $('.form').serialize()
+});
+```
+
+---
+
+# DataTable example
+
+```html
+<!doctype html>
+<html lang="en">
+ <head>
+ ...
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+ <link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
+ <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
+ <script>
+ $(document).ready(function () {
+ $('.table-interactive').DataTable();
+ });
+ </script>
+ </head>
+ <body>
+ <table class="table table-interactive">
+ ...
+ </table>
+ </body>
+</html>
+```
+---
+
+# Masonry example
+
+```html
+<!doctype html>
+<html lang="en">
+ <head>
+ ...
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+ <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
+ <script>
+ $(document).ready(function () {
+ $('.grid').masonry({
+ itemSelector: '.grid-item',
+ });
+ });
+ </script>
+ </head>
+ <body>
+ <div class="grid">
+ <div class="grid-item ..."></div>
+ <div class="grid-item ..."></div>
+ ...
+ </div>
+ </body>
+</html>
+```
+
+---
+
+# Development tools
+
+In browser, do right click and select "Inspect element" or similar.
+
+HTML view:
+- view & modify the HTML
+- investigate applied css properties
+
+Console view:
+- view errors if they occurred
+- directly execute JavaScript
+
+Useful to try out / investigate when something does not work.
+
+---
+
+# JavaScript summary
+
+General-Purpose language.
+Many read-to-use libraries for beginners.
+
+General steps to use a library:
+- Include required JavaScript / css files
+- Add initialization code hooking library and DOM
+- Debug using the Development tools
+
+Resources:
+- [jQuery libraries](https://github.com/petk/awesome-jquery)
+- [JavaScript Developer Roadmap](https://github.com/kamranahmedse/developer-roadmap)
+- [Package manager introduction](https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70)
---
@@ -612,10 +830,39 @@ class: center, middle
# PHP: Hypertext Preprocessor (PHP)
-*Slogan: It is getting better. Or: [PHP: a fractal of bad design](https://eev.ee/blog/2012/04/09/php-a-fractal-of-bad-design/)*
+*Slogan: It is getting better. Or: [PHP: a fractal of bad design](https://eev.ee/blog/2012/04/09/php-a-fractal-of-bad-design/)*.
---
+# Why?
+
+<img src="images/server_client.png" width="50%">
+
+Generate HTML on server (for example using data from a database).
+
+Examples:
+- A table of all upcoming events is generated
+- An E-Mail is sent upon contact form submission
+
+---
+
+# About PHP
+
+General-Purpose programming language.
+
+Dynamically typed (like python).
+Curly brackets to designate blocks of code (like C#, Java).
+"Normal" inheritance (like C#, Java).
+Rather fast development towards more "typing".
+
+Multiple approaches:
+- Inject into HTML to generate only (dynamic) parts of page
+- Use fully-fledged framework for webapps which generates HTML
+- Provide only data over API to be consumed by client-side code
+
+---
+
+
# Summary
---
@@ -641,7 +888,6 @@ CSS:
- other css frameworks
JavaScript:
-- [package manager introduction](https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70)
PHP:
- sqlite database