To receive notifications about scheduled maintenance, please subscribe to the mailing-list gitlab-operations@sympa.ethz.ch. You can subscribe to the mailing-list at https://sympa.ethz.ch

Commit 8fdbad74 authored by Florian Moser's avatar Florian Moser
Browse files

Add web course elements

parent 0274795c
......@@ -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
......@@ -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
<!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
<!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
<!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
No preview for this file type
......@@ -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:`&nbsp[`grid`](https://css-tricks.com/snippets/css/complete-guide-grid/).
......@@ -574,23 +573,69 @@ for distributing items use `display:`&nbsp[`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
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment