<!DOCTYPE html>
<html>
<head>
<title>Git & GitLab</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="css/remark.css">
<link rel="stylesheet" media="print" href="css/remark.print.css">
</head>
<body>
<textarea id="source">
class: center, middle
# An Introduction into modern web
<img src="images/thealternative-logo.jpg" width="30%">
---
# What we will look at
**HTML** for (structured) content.
Add text, images, files and meta data.
**CSS** for the design.
Define spacing, font and colors.
**JavaScript** to add functionality.
Animations! Filters! Sorting!
**PHP** to generate content.
Update the webpage more conveniently.
*Each of these areas is its own profession!
We only briefly touch JavaScript and PHP.*
---
# Structure of the course
**HTML**: Hypertext Markup Language to semantically structure content.
*Target: Know the most important HTML tags.*
**CSS**: Cascading Style Sheets to style HTML.
*Target: Know design basics and using a css framework.*
**JavaScript**: Functionality directly in the browser.
*Target: Apply jQuery & friends.*
**PHP**: Widely supported functionality on the server.
*Target: Generate your webpage based on data on the server.*
---
class: center, middle
# Hypertext Markup Language (HTML)
*Slogan: So easy, its not even programming!*
---
# A HTML document
```html
<!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, world!</title>
<meta name="description" content="A simple HTML document.">
</head>
<body>
<h1>Hello, world!</h1>
<p>This demonstrates a simple HTML document.</p>
</body>
</html>
```
---
# The core constructs
Tags:
```html
<tag>
content of tag
</tag>
```
Attributes:
```html
<tag attribute="content of attribute"></tag>
<tag no-content-attribute></tag>
```
That's all!
---
# Technical
```html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- ... -->
</head>
<!-- ... -->
</html>
```
**Charset** defines how your bits & bytes are mapped to text.
**Viewport** defines the width of the document shown in the browser.
Primarily useful for mobile devices.
---
# Meta data
```html
<html>
<head>
<!-- ... -->
<title>Hello, world!</title>
<meta name="description" content="A simple HTML document.">
</head>
<!-- ... -->
</html>
```
Used by search engines to classify the document and show a preview.
<img src="images/html_meta.png" width="40%">
Used by browsers in the browser tab.
<img src="images/html_meta_browser.png" width="40%">
---
# Body
```html
<html>
<!-- ... -->
<body>
<h1>Hello, world!</h1>
<p>This demonstrates a simple HTML document.</p>
</body>
</html>
```
The actual, structured content.
Elements:
- Headers: `<h1>`, `<h2>`, `<h3>`, `<h4>`, ...
- Text: `<p>`, `<br>`, `<a>`, `<i>`, `<u>`
- Images: `<img>`
- Structure: `<section>`, `<article>`, `<div>`
---
# Headers
H1 for the title (only once)!
H2 for chapter headers.
H3 for subheaders.
#`<h1>`Header H1`</h1>`
##`<h2>`Header H2`</h2>`
###`<h3>`Header H3`</h3>`
####`<h4>`Header H4`</h4>`
---
# Text
```html
<p>Write a paragraph inside p tags.</p>
<p>Use <br/>
if you must start a new line manually</p>
```
```html
<i>italic</i> <br/>
<b>bold</b> <br/>
<u>underline</u>
```
```html
<a href="https://developer.mozilla.org/">mozilla documentation</a>
```
```html
<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/>
---
# Images
```html
<img src="images/UZH-logo.png" alt="Logo UZH">
```
<img src="images/UZH-logo.png" alt="Logo UZH" width="40%">
describe the image with the `alt` tag.
used by search engines, screen readers, ....
or if the image does not load.
---
# Files
```html
<a href="images/UZH-logo.png" download>download file</a>
```
<a href="images/UZH-logo.png" download>download file</a>
add the download attribute to force downloading
else it opens in browser (which might then display download dialog)
---
# Misc
```html
<audio src="files/audio.mp3">play audio</audio>
```
```html
<video src="files/video.mp4">play video</video>
```
```html
<ul>
<li>Banana</li>
<li>Apple</li>
</ul>
```
```html
<ol>
<li>Learn HTML</li>
<li>Learn CSS</li>
...
</ol>
```
---
# (Semantic) Structure
```html
<section>
<div class="container">
<article>
<h1>About HTML</h1>
<h2>Introduction</h2>
<p>We are going to learn about (...)</p>
<h2>About Semantic HTML</h2>
<p>Use semantic tags to (...)</p>
</article>
</div>
</section>
```
Create own tags (like `<section>`) without special behaviour (such as `<a>`).
Give your document semantic meaning to make editing & styling easier.
Have something important? Use `<strong>` instead of `<b>`.
Writing an article? Wrap it in `<article>` instead of `<div>`.
---
class: center, middle
# Cascading Style Sheets (CSS)
*Slogan: Confused yet?*
---
class: center, middle
```html
<design-crashcourse>
```
Why? Because:
<blockquote>
Users often perceive aesthetically pleasing design as design that’s more usable. -
<a href="https://www.nngroup.com/articles/aesthetic-usability-effect/" target="_blank">https://www.nngroup.com/articles/aesthetic-usability-effect/</a>
</blockquote>
---
# Typography - Typeface
**serif** for books (see header).
Line-like Serifs help the eye read.
*Arial, Times New Roman, ...*
**sans-serif** for displays (see body).
No serifs look cleaner.
*Verdana, Courier, Helvetica, ...*
**monospace** for code (`like this`).
Same width characters help notice patterns faster.
*Consolas, ...*
many more variations...
---
# Typography - Font
Typefaces may consist of fonts of different weights
<img src="images/typography_weight.png" width="50%">
Many free-to-use fonts exist, like [google fonts](https://fonts.google.com/).
You might want to [pair fonts](https://fontpair.co/).
---
# Typography - Size
Adjust font size, line height & line length.
Line height
<img src="images/typography_line_height.png" width="48%">
A line should be around 15 words long.
If its too long, the eye can not easily find the start of the next line.
If its too short, the eye has to move around too much.
There are other factors that affect readability, which we will see on the next slide.
---
# Typography - Balance
Balance font weight, font size, line length and line height.
Improve readability:
- increase line height
- increase font size
- increase font boldness
- decrease line length
<img src="images/typography_light.png" width="48%">
<img src="images/typography_regular.png" width="48%">
---
# Spacing
Separate what does not belong together.
Separate little what does.
<br>
<br>
<br>
Emphasize importance with more space around.
<br>
<br>
<br>
You may want to define a spacing scheme for consistency.
Like 4, 8, 16, 32, 64 (geometric progression).
Like 5, 8, 13, 21, 34 (Fibonacci numbers / golden cut).
---
# Spacing - Example
<img src="images/spacing_original.png" width="80%">
---
# Spacing - Example
<img src="images/spacing_annotated.png" width="80%">
---
# Colors
Give your site a distinctive look with your "brand" colors.
Primary color associated with your brand.
Secondary color which contrasts primary nicely (like complement).
Colors for messages (red for errors, orance for warnings, ...).
Pastel colors for a soft look, bright colors for inspiring effects
<img src="images/color_palette.png" width="40%" alt="https://colorhunt.co/palette/7642">
<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, like [paletton](https://paletton.com)
---
class: center, middle
```html
</design-crashcourse>
```
---
class: inverted
# CSS basics
```css
body {
color: white;
background: black;
}
```
choose a **selector** (like `body`)
for **properties** (like `color`)
override the default **value** (like `white`)
---
# CSS selector
by element, class or id
```html
<section class="content" id="introduction"></section>
```
```css
section {
background: red
}
.content {
background: blue;
}
#introduction {
background: green;
}
```
choose the most appropriate selector according to your structure (usually it ends up being the `class`).
---
# Typography - Font Family
```css
body {
font-family: 'Times New Roman', Times, serif;
font-weight: bold;
font-style: italic;
}
```
including your own font family with
```css
@font-face {
font-family: 'Vegur';
src: url('Vegur-Bold.ttf') format('ttf');
font-weight: bold;
font-style: normal;
}
```
Generate optimized font family files [transfonter.org](https://transfonter.org/).
---
# Typography - Size
```css
body {
font-size: 16px;
line-height: 1.2em;
}
```
`em` is a relative unit to the current 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/).
---
# Spacing
```css
.rectangle {
background: blue;
width: 60px;
height: 20px;
padding: 50px;
margin: 20px;
border: 10px solid yellow;
}
```
```html
<div class="rectangle"></div>
```
<div class="rectangle"></div>
<img src="images/css_spacing.png" width="35%">
---
class: inverted
# Color
```css
body {
color: #FFFFFF;
background: rgb(0,0,0);
}
```
use predefined [colors](https://developer.mozilla.org/de/docs/Web/CSS/Farben).
or specify own color (using additive light mixing).
use hex (like `#rrggbb`).
or rgb (like `rgb(red, green , blue)`).
or rgba (like `rgba(red, green , blue, opacity)`) representations.
---
# Display
```css
body {
display: block;
}
```
defines how element is placed (and elements around).
`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/).
for distributing items use `display:` [`flex`](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
---
# Position
.row[
.column[
```css
.container-outer {
position: relative;
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%" >
---
# Position
`relative` to original position.
<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.
---
class: center, middle
# JavaScript
*Slogan: Absolutely no similarities with Java AT ALL.*
---
# 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 enhance server-generated HTML ("traditional")**
- to generate HTML ("webapps")
---
# 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".
---
# JavaScript Samples
Hello world
```js
let message = "Hello world";
console.log(message);
```
Loops
```js
let sum = 0
for (let i = 0; i < 10; i++) {
sum += i
}
console.log(sum)
```
Interact with the DOM and browser
```js
document.getElementById("wrapper").innerHtml = "Hello world";
window.location.href = "https://developer.mozilla.com";
alert("This is annoying");
```
---
# 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)
---
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/)*.
---
# 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).
Developments towards more "typing".
Multiple approaches:
- **Inject into HTML to generate only (dynamic) parts of page**
- Configure pre-made content management system (CMS)
- Use fully-fledged framework for webapps which generates HTML
- Provide only data over API to be consumed by client-side code
---
# Executing PHP
PHP is a server-side language.
You need a PHP server!
ETH student?
- Login per SSH into slab1.ethz.ch with kürzel & password.
- Place files in homepage folder.
- Access your personal webpage under `https://n.ethz.ch/~kürzel/`
Many commercial products like [cyon](https://www.cyon.ch/), [metanet](https://www.metanet.ch/), [hostpoint](https://www.hostpoint.ch/), ...
Test locally with [XAMPP](https://www.apachefriends.org/de/index.html) or read the documentation of your linux distribution how to setup Apache with PHP.
You can use [FileZilla](https://filezilla-project.org/) to access the server via FTP / SSH.
---
# "Hello World" in PHP
```html
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<?php
echo "<h1>Hallo Welt</h1>";
?>
</body>
</html>
```
Placed as `index.php` on your root directory, it generates:
```html
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<h1>Hallo Welt</h1>
</body>
</html>
```
---
# Upcoming events in table (1/2)
Dynamic data generation requires:
- data source (like database or simply a file)
- transformation (transform result of query into usable php variables)
- generation (generate html out of the variables)
For this example, we place `events.json` in the same directory as our script:
```json
[
{
"title": "Web course",
"date:" "30.08.2020"
},
{
"title": "Web course",
"date:" "30.08.2020"
},
...
]
```
---
# Upcoming events in table (2/2)
create one row in the table for each event
```php
<?php
$eventsJson = file_get_content("events.json");
$events = json_decode($eventsJson);
?>
...
<table>
<tbody>
<?php foreach ($events as $event) { ?>
<tr>
<td><?= $event->title ?></td>
<td><?= $event->date ?></td>
</tr>
<?php } ?>
</tbody>
</table>
...
```
---
# Send E-Mail from contact from submission (1/2)
Process user-input server-side:
- get user input (like using a form)
- send it to the server (HTTP GET / POST / PUT / ...)
- process it on the server (query global php variables)
---
# Outlook
Advanced topics coming right up!
---
class: center, middle
# Advanced topics
---
# Advanced topics
HTML:
- html semantic checker
CSS:
- other css frameworks
JavaScript:
PHP:
- sqlite database
</textarea>
<script src="js/remark.min.js" type="text/javascript"></script>
<script src="js/remark.driver.js" type="text/javascript"></script>
</body>
</html>