`.
---
class: center, middle
# Cascading Style Sheets (CSS)
*Slogan: Confused yet?*
---
class: center, middle
```html
```
Why? Because:
Users often perceive aesthetically pleasing design as design that’s more usable. -
https://www.nngroup.com/articles/aesthetic-usability-effect/
---
# 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
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
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
---
# Spacing
Separate what does not belong together.
Separate little what does.
Emphasize importance with more space around.
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
---
# Spacing - Example
---
# 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
Many premade color schemes, like [colorhunt](https://colorhunt.co)
Many color scheme generators, like [paletton](https://paletton.com)
---
# Cheap Design
"Cheap Design" looks good on the drawning board, but does not work in practice.
No contrast:
Font too light:
Accessiblity checker for contrast from WebAIM.
*Font weight is more difficult.*
---
class: center, middle
```html
```
---
# CSS basics
```css
body {
color: blue;
}
```
choose a **selector** (like `body`)
for **properties** (like `color`)
override the default **value** (like `blue`)
---
# CSS selector
by element, class or id
```html
```
```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;
border: 10px solid yellow;
margin: 20px;
}
```
```html
```

---
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;
}
```
]
]

---
# Position
`relative` to original position.
`absolute` to its *closest positioned ancestor*: next parent with `position: relative`.
Removed from the document flow.

---
# (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/)
Getting it right is *extremely* hard!
---
# Opiniated advice what to do now
You know how to create a webpage now (without functionality)!
To tame the complexity, just start :)
Setup steps:
- Pick a CSS framework (like [Bootstrap](https://getbootstrap.com/))
- Look for the "starter template" (in HTML) or something similar
- Create a `.html` (like `index.html`) and paste the template
- Look at it in the browser (double-click)
Create your webpage:
- Add your own HTML to this `.html` file
- Add styling using the framework provided CSS classes
---
class: center, middle
# JavaScript
*Slogan: Absolutely no similarities with Java AT ALL.*
---
# Why?

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 Lua; rarely used concept).
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
```
---
# Masonry example
```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)
- [Package manager introduction](https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70)
- [JavaScript Developer Roadmap](https://github.com/kamranahmedse/developer-roadmap)
---
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?

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
Hallo Welt";
?>
```
Placed as `index.php` on your root directory, it generates:
```html
Hallo Welt
```
---
# 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",
"date:" "30.08.2020"
},
{
"title": "Project Management",
"date:" "10.09.2020"
},
...
]
```
---
# Upcoming events in table (2/2)
create one row in the table for each event
```php
...
= $event->title ?> |
= $event->date ?> |
...
```
---
# Upcoming events in table result
HTML that is delivered to the browser
```html
...
Web |
| 30.08.2020 |
Project Management |
| 10.09.2020 |
...
```
---
# Contact form submission
We require:
- 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)
Get user input with HTML forms:
```php
```
---
# Develop PHP snippets
Beginning is simple, mastery is hard.
Challenges:
- Subtle bugs as PHP very permissive
- Many security challenges (especially with user-input)
- Many beginners = much wrong information
Resources:
- Use `var_dump` function to debug variables
- https://www.php.net/ for the documentation
- https://stitcher.io/ for news about php
---
# Content Management System (CMS)
After installation, non-technical users can modify content.
Easy to setup marketing webpage, blog, small online shops, ...
Examples:
- [Wordpress](https://wordpress.com/) as most used, very good usability
- [Joomla](https://www.joomla.ch/) as another much used alternative
- [Drupal](https://www.drupal.org/) for more complex applications
Popular Webpage-As-A-Service:
- [Wix](https://wix.com/)
- [Squarespace](https://squarespace.com/)
---
# Frameworks
PHP is good for beginners, but scaling is difficult.
Use one of the well-designed, stable frameworks.
Recommended Frameworks:
- [Symfony](https://symfony.com/) as the most used framework
- [Laravel](https://laravel.com/) uses symfony concepts, more "hip"
- [Slim](https://www.slimframework.com/) as a minimal framework
- [ApiPlatform](https://api-platform.com/) which speeds up API development
Mastery of Frameworks takes *years*,
but reduces development / maintenance by *order of magnitudes*.
---
# Next steps
Summary:
- **HTML** for (structured) content.
- **CSS** for the design.
- **JavaScript** to add client functionality.
- **PHP** to generate content on the server.
For developers:
- Choose focus (Frontend? Backend? Marketing? Engineering?)
- Learn! Useful: [Roadmap](https://github.com/kamranahmedse/developer-roadmap)
- Ask questions on [stackoverflow](https://stackoverflow.com/) once you can [ask good questions](https://stackoverflow.com/help/how-to-ask)
- High investment = high reward
For researcher webpages:
- Connect to the provided ETH server
- Write HTML / CSS; add PHP / JavaScript only when necessary
- Use CSS frameworks if you want to have it look good
Many, many more use cases. This presentation is technically also a webpage :)