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 091c9bb2 authored by Florian Moser's avatar Florian Moser
Browse files

Add basics of Web course

parent f941e61b
MIT License
Copyright (c) 2020 ZI IT Training
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
# Course logistics
Target group is bachelor informatik or master/phd students of all fields of study
To be used for research (latex) and programming (code)
## Before the course
Check slides for accuracy. After adapting, regenerate pdf (printing with chrome).
Prepare "Git Introduction" quizz on https:/socrative.com/ with ID SOC-52925287
Prepare poll asking for background (field of study, primary purpose, use before, installation feedback).
Prepare strawpoll asking for speed (slower, OK, faster) like https://www.strawpoll.me/31696019 then update link below.
Send E-Mail to all [participants](https://app.connect.uzh.ch/apps/id/kurse.nsf/kursleitendeveranstaltungenaktuelle.xsp?openxpage&parentkey=kursleitenden-homepage&login)
```
This Tuesday, the 17.11., we will meet for the "Introduction to Git and GitLab".
We start at 17:00 at RAI-E-131 (in Teams, https://t.uzh.ch/RAIE131).
We will introduce you to some tools during the course. To keep it productive, we kindly ask you to prepare & install these. You will need around 15 minutes. If you run into problems, feel free to ask in the breaks of the course!
We will use the following three tools:
- Install git from https://git-scm.com/downloads. The defaults of the installer are sensible. If you prefer, we will help you in the course!
- Create an account on https://gitlab.uzh.ch/. Create a SWITCH eduID account, if you do not have one already.
- Install GitHub Desktop from https://desktop.github.com/. When installing, you can skip signing in into GitHub.
```
## During the course
Before:
- Post background poll https://famoser.typeform.com/to/FmStSEkm
- Ask to login at https://b.socrative.com/login/student/ with MOSER4979
- Ask to find A4 to take notes of commands during Local Workflow part
During (continuously):
- Answer questions in chat
- Running example is already published book about animals
- After each part questions, 10min exercise, then 10min break
During (logistics):
- After terminology, start "Git Introduction" Quiz
- After Local Workflow, ask about speed with https://www.strawpoll.me/31696019
After:
- Process Feedback
## Concept
didactic:
- get background of participants at the start to adapt terminology.
- quiz at the end of introduction to deepen & verify understanding
- advanced exercises so fast students do not get bored
- explicit break so everyone can relax for a moment
- allow choosing advanced topics to adapt well to participants
# Crashcourse personal/course Website
The easiest way to publish your own papers / portfolio is having your own webpage.
We will show you how to create a simple website yourself.
You will learn the basics about HTML, design it using CSS and add some functionality using JavaScript.
In the end, we will have a quick look at PHP allowing you to generate your content dynamically.
Our target will be that you can publish a fully functional website at the end of the course.
We will touch other topics such as the basics of design when we need it.
## Inhalt
This course will give you a basic understanding of everything you need to create your own personal website.
We will have exercise breaks where you can apply the concepts at your own pace.
Chapters:
- HTML: Structure your content.
- CSS: Design.
- JavaScript: Functionality in the browser.
- PHP: Generate content.
- Advanced topics: Fun part for further development.
In the exercises, you will work on either a portfolio or course website (your choice!).
## Voraussetzungen
No experience required.
All tools we use are free.
## Teilnehmende
PhDs and Students.
Particularly suitable for all with no prior experience with web development.
Students who have only superficial experience (copying & pasting stuff found online...) will profit from a more structured understanding.
## Kursunterlagen
All material is published online.
## Bemerkungen
You need to be able to use your computer.
This course is offered in cooperation with The Alternative (https://thealternative.ch).
\ No newline at end of file
body { font-family: sans-serif; }
h1, h2, h3 {
font-family: serif;
font-weight: normal;
}
.remark-code, .remark-inline-code { font-family: monospace; }
\ No newline at end of file
@media print {
.remark-slide-scaler {
width: 100% !important;
height: 100% !important;
transform: scale(1) !important;
top: 0 !important;
left: 0 !important;
}
}
\ No newline at end of file
var slideshow = remark.create();
\ No newline at end of file
This diff is collapsed.
<!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>
```
\ No newline at end of file
<!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%">
---
# Preconditions
Setup webserver
---
# 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.
---
# 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?*
---
# Design crashcourse
Why? Because:
<blockquote>
Users often perceive aesthetically pleasing design as design that’s more usable.
</blockquote>
---
# Typography
combine fonts
---
# Spacing
more is better
use some math law
---
# Colors
palette generator
---
# Bootstrap
---
class: center, middle
# JavaScript
*Slogan: Absolutely no similarities with Java AT ALL.*
---
# jQuery
---
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/)*
---
# Summary
---
# Outlook
Advanced topics coming right up!
---
class: center, middle
# Advanced topics
---
# Advanced topics
HTML:
- html semantic checker
CSS:
- other css frameworks
JavaScript:
- [package manager introduction](https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70)
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>
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