Allgemeine Ziele:
- 100% Markdown-Syntax
- 90% LiaScript
- 20% kennenlernen von Versionmanagement und kollaborativem Arbeiten mit git und GitHub
Zeitplan
-
Vorstellung: Infos zu uns, Forschungsziele, Projekte, etc.
-
Vorstellung/ Erwartungen der Teilnehmer
- Was erwarten Sie von der heutigen Veranstaltung, Welchen Hintergrund habe Sie?
- Eintragung in ein Etherpad Dokument
- Kurze Besprechung der Inhalte und der Arbeitsmethodik bei dessen Erstellung
- synchrones kollaboratives Arbeiten --> Herausforderung Synchronisation
-
Motivation OER:
- Ziele, Zentrale Aussage zu den Anforderungen: Verteiltheit der Editierung
- (Lösung mit Git), einfache Editierung interaktiver Inhalte (Lösung mit LiaScript)
- Ableitung des folgenden Ablaufes - Phase 1: Github EInführung, Phase 2: LiaScript
-
Phase 1 - Einführung GitHub
- Mechanismen zur Synchronisation von Dokumenten, Abläufe in GitHub
-
Übung Github
- Alle Teilnehmer arbeiten an einer README.md Datei eines Projektes
- Erklärung der Unterschiede zum Etherpad
- Explizite Formatierung mit Markdown, Nachvollziehbarkeit der Veränderungen,
- Einbettung in Entwicklungsumgebung
-
Projekt-Website: https://LiaScript.github.io
-
Open-Source: https://github.com/liascript
-
YouTube: https://www.youtube.com/channel/UCyiTe2GkW_u05HSdvUblGYg
-
Wieteres:
- Dokumentation: https://github.com/LiaScript/docs
- Bücher: https://github.com/topics/liascript-course
- Templates: https://github.com/topics/liascript-template
- Talks & ...: https://github.com/LiaPlayground
- Blog: https://aizac.herokuapp.com
-
Editor:
-
Atom: https://atom.io
- Liascript-Preview: https://atom.io/packages/liascript-preview
- Liascript-Snippets: https://atom.io/packages/liascript-snippets
-
VSCode: https://code.visualstudio.com/Download
- LiaScript-Preview: https://marketplace.visualstudio.com/items?itemName=LiaScript.liascript-preview
- LiaScript-Snippets: https://marketplace.visualstudio.com/items?itemName=LiaScript.liascript-snippets
-
-
Development-Server: https://www.npmjs.com/package/@liascript/devserver
Quellen:
- Pro Git book (2te Ausgabe) - Ben Straub
- online (deutsche Ausgabe): https://git-scm.com/book/de/v2
{{1}}
-
git
-
dezentrales Versionsmanagement System, entwickelt von Linus Torvalds
-
speichert die gesamte Historie eines Projektes
-
ermöglicht kooperatives Arbeiten mehrer Autoren
-
Download: https://git-scm.com/downloads
{{2}}
-
-
GitHub
-
Platform für die Versionsverwaltung
-
Erweitert git um: Reviews, Projekt-Management, Bug-Reports, etc.
-
online: https://github.com
-
Wikipedia: https://de.wikipedia.org/wiki/GitHub
{{3}}
-
-
repository (repo)
-
das eigentliche Projekt
-
enthält alle Versionen und Entwicklungs-Zweige (branches)
{{4}}
-
-
fork^*^
- Kopie eines fremden Repositories
- Ziel: eigene Weiterentwicklung oder Zuarbeit
GitHub .----------------------. fork .---------------------. | |------------------->| | | Main Repository | | Personal Repository | | |<-------------------| | '----------------------' pull request '---------------------'{{5}}
-
clone
- lokale Kopie eines Repositories
GitHub .----------------------. fork .---------------------. | +------------------->| | | Main Repository | | Personal Repository | | |<-------------------+ | '----------------------' pull request '--+------------------' | clone ^ ---------------------------------------------- | push | Local Machine | pull | v | .---------------------------------------------------------------+-. | | | local files | | | '-----------------------------------------------------------------'{{6}}
-
pull
-
Heruntladen/herunterziehen der Versionen aus einem entfernten repo
-
(meist auf GitHub)
{{7}}
-
-
push
-
Hochladen der lokalen Versionen zu einem entfernten repo
-
(meinst auf GitHub)
{{8}}
-
-
pull request^*^
-
Höfliche Anfrage der Übernahme von Änderungen
{{9}}
-
-
branch
-
Verschiedene Entwicklungs-Zweige
-
Namensgebung: (beliebig aber ...)
main: Projekt (Nur funktionierende Versionen)develop: Hauptentwicklungszweigtest: Test-Zweig für unsere Arbeit nicht nötigfeat/Irgendwas: kleine Erweiterungen
GitHub .----------------------. fork .---------------------. | +------------------->| | | Main Repository | | Personal Repository | | |<-------------------+ | '----------------------' pull request '--+------------------' | clone ^ ---------------------------------------------- | push | Local Machine | pull | v | .---------------------------------------------------------------+-. | | | (main) *---*---*-----*----------------------------*-----* | | \ / / | | (develop) o-----o--------o-----o--------o----o | | \ / \ / | | #----# #----# | | (feat-1) (feat-2) | '-----------------------------------------------------------------'{{10}}
-
-
commit
-
Hinzufügen einer neuen Version
{{11}}
-
-
checkout
-
"auschecken" oder springen zu einem Zweiges oder einer Version
{{12}}
-
-
merge
- Übernehmen der Änderungen aus einem branch in einen anderen
-
Download und Installation von Atom: https://atom.io
-
Installation von PlugIns:
-
Download und Installation von VSCode: https://code.visualstudio.com/Download
-
Installation von PlugIns:
{{1}}
Fuzzy Suche: Ctrl + Shift + P
Speichern: Shift + S
LiaScript-Preview: Alt + L
Verschieben von Zeilen: Ctrl + ᐃ/ᐁ
LiaScript:
- Snippets: l i a
- Programmiersprachen: h i l i
- Stimmen: v o i c e
https://LiaScript.github.io/course/?YOUR_COURSE_URL
{{1}}
-
{{2}}
-
{{3}}
-
Brave Browser via IPFS
-
Beaker Browser via Hyper
-
{{4}}
-
freier Webspace
Markdown is intended to be as easy-to-read and easy-to-write as is feasible.Readability, however, is emphasized above all else. A Markdown-formatted document
should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions. While Markdown’s syntax has been influenced by several existing text-to-HTML filters — including Setext, atx, Textile, reStructuredText, Grutatext, and EtText — the singlebiggest source of inspirationfor Markdown’s syntax is the format ofplain text email.To this end, Markdown’s syntax is comprised entirely of punctuation characters, which
punctuation characters have been carefully chosen so as to look like what they mean. E.g., asterisks around a word actually look like *emphasis*. Markdownlists look like, well, lists. Evenblockquotes look like quoted passages of text, assuming you’ve ever used email.-- by John Gruber
Blöcke werden "optisch" durch Leerzeilen voneinander getrennt
Dies ist ein Satz. alö df asdjöflj asöldkfj asöjdf aslkfö Dies ist ein zweiter Satz.
kursiv -- auch kursiv
Fett -- auch fett
Sehr wichtig
Durchgestrichen
Durchgestrichen
Dies ist ein Text ~~~Durchgestrichen~~~ ...
~~Durchgestrichen~~
LiaScript
x^2^
Unordered Lists
-
Element 1
Dies ist ein zweiter Absatz.
- Unterabschnitt 1
- Unterabschnitt 2
-
Element 2
ordered lists
-
Dies ist Wichtig
Auch das gehört dazu
-
Kaffee
Als zweites kommen die folgenden Zutaten:
- Tee
- Zucker
“Live as if you were to die tomorrow. Learn as if you were to live forever.”
-- Mahatma Gandhi
| Header | 2 | rechts |
|---|---|---|
| Element 1 | element2 | code |
| 12 | 1333 | $ f(x) = \frac{1}{x^2} $ |
Teil A
Teil B
# Titel
## Titel 2
``` JavaScript
// Drucke Hallo Welt
console.log("Hallo Welt")
```Übersicht über alle HTML-Tags: https://www.w3schools.com/TAgs/default.asp
**Honest Textbook ads (click to enlarge)**
Verweis -> !Bild --> ?Audio --> !?Video --> ??Unbekannt --> Galerie
?Beethoven !?Ehrliche Bildung ??Simulation ??3D
Lorem aösdfjafd saölsjdf aösdfj aslkfdj aösdj asödfjasdj asdfa affs asff asf asf
Blöcke und einzelne Elemente können unterschiedlich formatiert werden!
Merke: Kommentare vor dem Block und hinter dem Element.
Siehe auch: W3Schools
- Schriftfarbe:
color: redodercolor: #FF0000odercolor: rgb(1,0,0) - Schriftgröße:
font-size: 4remoderfont-size: 3cmoderfont-size: 20px - Maximale Höhe & Breite:
max-height: 300pxmax-widht: 300px - Minimale Höhe & Breite:
min-height: 300pxmin-widht: 300px - Tatsächliche Höhe & Breite:
width: 300pxoderwidth: 50%oderẁidth: 50vw - Ränder:
border: 2px solid blackoderborder: 2px dashed black - Abstände:
padding: 3pxoderpadding-top: ..oderpadding-leftodermargin: 3pxodermargin-top: ..odermargin-left
Mithilfe von
class="translate"oderclass="notranslate"können Element markiert werden, die übersetzt bzw. nicht übersetzt werden sollen.
Beispiel:
<!-- class="notranslate" -->
Alle Code-Elemente werden automatisch mit der Klasse `notranslate` markiert.
<!-- class="translate" -->
``` javascript
console.log("Hello World")
```--{{0}}--
Ich bin ein Kommentar, der laut vorgelesen werden kann.
--{{1}}--
Es ist möglich, Kommentare mit Animation zu verbinden.
{{1}}
--{{2}}--
Blöcke können auch wieder verschwinden.
{{2-3}}
| Tabellen | sind | cool |
|---|---|---|
| rechts | zentriert | links |
| :-) | $ f(x) = x^2 $ | <--> |
--{{3 Russian Female}}--
Первоначально создан в 2004 году Джоном Грубером (англ. John Gruber) и Аароном Шварцем. Многие идеи языка были позаимствованы из существующих соглашений по разметке текста в электронных письмах...
{{3}}
Oder die Sprache kann geändert werden. Tippe "voice" um eine Auswahl der unterstützen Sprachen zu erhalten
Hallo {2}{Welt, } dies ein Absatz mit internen Animationen {1-2}{die auch wieder verschwinden können}.
Hallo {|>}{Welt, } dies ein Absatz mit internen Animationen {1-2}{die auch wieder verschwinden können}.
--{{1}}--
Dieser Text ist besonders wichtiges Zitat.
{{1}}
“Live as if you were to die tomorrow. Learn as if you were to live forever.”
-- Mahatma Gandhi
Nutzung von KaTeX
Funktionsübersich: https://katex.org/docs/supported.html
-
Inline Formeln:
$ ... $--> $ f(a,b,c) = (a^2+b^2+c^2)^3 $ -
Block Formeln:
$$ ... $$$$ \sum_{i=1}^\infty\frac{1}{n^2} =\frac{\pi^2}{6} $$
Zentriert nach =
\begin{split}
a &=b+c \\
&=e+f \\
&=g+h+i+j\\
a+b+&c+d=12\\
\end{split}@formula
Hinzufügen einer Nummer
\tag{33}
\begin{equation}
a =b+c
\end{equation}@formula
Definition einer Matrix und Nutzung von HTML.
\begin{Bmatrix}
a & b & c & d & e & f \\
g & h & i & j & k & l \\
m & n & o & p & q & r \\
s & t & u & v & w & x \\
y & z & ä & ö & ü &
\htmlStyle{color: red; font-size: 26px}{ß}
\end{Bmatrix}
\\
\href{https://katex.org/docs/supported.html#html}{\KaTeX HTML support}
\\
\includegraphics[height=0.8em, totalheight=0.9em, width=0.9em, alt=KA logo]{https://katex.org/img/khan-academy.png}@formula
Wie heißt dieses Projekt?
[[LiaScript]]
Was ist LiaScript?
[[X]] LMS [[X]] Eine Sprache? [[ ]] Ein Buch [[?]] Denk nach [[?]] Antwort B
Es ist auf jeden Fall B.
Was ist LiaScript?
[(X)] LMS [(X)] Eine Sprache? [( )] Ein Buch
Multiline
1.9 | DOTS
| ***
y | * *
- | r r r r r r r*r r r r*r r r r r r r
a | * *
x | * *
i | B B B B B * B B B B B B * B B B B B
s | * *
| * * * * * *
-1 +------------------------------------
0 x-axis 1
Dokumentation: https://github.com/andre-dietrich/elm-svgbob
.-----.
|.---.|
|| || device
|.___.| loads
| ooo |----+--------------------------+--------------------------.
| ooo | | | |
| ooo | | | |
'_____' | | |
| | |
v v v
+-------------------+ .---------------------------. +-------------------+
| Loadable module C | | Loadable module A | | Loadable module B |
+---------+---------+ |---------------------------| | (instrumented) |
| | .-----. | +----------+--------+
'--------------------> | A.o | | |
calls | '-----' | |
| .------------------. | |
| / A.instrumented.o / <----------------'
| '------------------' | calls
'---------------------------'
┌─┬┐ ╔═╦╗ ╓─╥╖ ╒═╤╕
│ ││ ║ ║║ ║ ║║ │ ││
├─┼┤ ╠═╬╣ ╟─╫╢ ╞═╪╡
└─┴┘ ╚═╩╝ ╙─╨╜ ╘═╧╛
┌───────────────────┐
│ ╔═══╗ Some Text │▒
│ ╚═╦═╝ in the box │▒
╞═╤══╩══╤═══════════╡▒
│ ├──┬──┤ │▒
│ └──┴──┘ │▒
└───────────────────┘▒
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
https://github.com/topics/liascript-template
-
Download von NodeJS: https://nodejs.org/de/download/
-
Download des LiaScript-Exporters: https://www.npmjs.com/package/@liascript/exporter
Das Quadrat von
<script output="x" input="range" value="1" min="0" max="1000" step="0.1"> @input </script>ist gleich ==>
<script> @input(`x`) * @input(`x`)</script>Pos: <script run-once default="0" output="result" input="range" value="2" min="0" max="25" step="0.1" > @input </script> and amplitude:
<script run-once default="0" output="amp" input="range" value="1" min="0" max="2" step="0.1" > @input </script>| Header 1 | <script>@input(result)</script> |
|---|---|
| 1 | @sin(1) |
| 2 | @sin(2) |
| 3 | @sin(3) |
| 4 | @sin(4) |
| 5 | @sin(5) |
| 6 | @sin(6) |
| 7 | @sin(7) |
| 8 | @sin(8) |
| 9 | @sin(9) |
The first value defines some kind of range:
<script input="range" value="2" output="range">@input</script>, while the second can be interpreted as range
<script input="range" value="50" output="amplitude">@input</script>.You can double-click on any gray element to inspect and edit its javascript code.
<script run-once style="display: inline-block; width: 100%"> function func(x) { x /= 10; return Math.sin(x) * Math.cos(x * @input(`range`) + 1) * Math.sin(x * 3 + 2) * @input(`amplitude`); } function generateData() { let data = []; for (let i = -200; i <= 200; i += 0.1) { data.push([i, func(i)]); } return data; } let option = { animation: false, grid: { top: 40, left: 50, right: 40, bottom: 50 }, xAxis: { name: 'x', minorTick: { show: true }, splitLine: { lineStyle: { color: '#999' } }, minorSplitLine: { show: true, lineStyle: { color: '#ddd' } } }, yAxis: { name: 'y', min: -100, max: 100, minorTick: { show: true }, splitLine: { lineStyle: { color: '#999' } }, minorSplitLine: { show: true, lineStyle: { color: '#ddd' } } }, dataZoom: [{ show: true, type: 'inside', filterMode: 'none', xAxisIndex: [0], startValue: -20, endValue: 20 }, { show: true, type: 'inside', filterMode: 'none', yAxisIndex: [0], startValue: -20, endValue: 20 }], series: [ { type: 'line', showSymbol: false, clip: true, data: generateData() } ] } "HTML: " </script>