Skip to content

Latest commit

 

History

History
767 lines (558 loc) · 21.1 KB

D-LiaScript_Tutorial.md

File metadata and controls

767 lines (558 loc) · 21.1 KB

LiaScript

Entwicklung von OER mit LiaScript und GitHub

Allgemeine Ziele:

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

Quellen

Git & GitHub

Quellen:

Fachsprache & Fachchinesisch

 {{1}}

  • git

  • GitHub

  • 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: Hauptentwicklungszweig
      • test: Test-Zweig für unsere Arbeit nicht nötig
      • feat/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

Setup Entwicklungsumgebung

  1. Download und Installation von Atom: https://atom.io

  2. Installation von PlugIns:

  1. Download und Installation von VSCode: https://code.visualstudio.com/Download

  2. Installation von PlugIns:

    {{1}}

Wichtige Tastenkombination:

  • Fuzzy Suche: Ctrl + Shift + P

  • Speichern: Shift + S

  • Verschieben von Zeilen: Ctrl + ᐃ/ᐁ

  • LiaScript:

    • Snippets: l i a
    • Programmiersprachen: h i l i
    • Stimmen: v o i c e

Teilen von Kursen via ...

https://LiaScript.github.io/course/?YOUR_COURSE_URL

{{1}}

Markdown Tutorial

Philosophy

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 single biggest source of inspiration for Markdown’s syntax is the format of plain 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*. Markdown lists look like, well, lists. Even blockquotes look like quoted passages of text, assuming you’ve ever used email.

-- by John Gruber

Dialekte

Grundlagen

Blöcke werden "optisch" durch Leerzeilen voneinander getrennt

1. Absätze und Formatierungen

2. Listen

3. Blockquotes

4. Tabellen

5. Verweise

6. Bilder

7. Trennlinien

8. Code

9. HTML

Übersicht über alle HTML-Tags: https://www.w3schools.com/TAgs/default.asp

<details> & <summary>
**Honest Textbook ads (click to enlarge)**

https://www.youtube.com/watch?v=lhSjYT7pWkw

<lia-keep>

LiaScript Tutorial

Multimedia

Verweis -> !Bild --> ?Audio --> !?Video --> ??Unbekannt

Bilder und Texte

Formatierung

Blöcke und einzelne Elemente können unterschiedlich formatiert werden!

Merke: Kommentare vor dem Block und hinter dem Element.

Siehe auch: W3Schools

Nützliche Stile
  • Schriftfarbe: color: red oder color: #FF0000 oder color: rgb(1,0,0)
  • Schriftgröße: font-size: 4rem oder font-size: 3cm oder font-size: 20px
  • Maximale Höhe & Breite: max-height: 300px max-width: 300px
  • Minimale Höhe & Breite: min-height: 300px min-width: 300px
  • Tatsächliche Höhe & Breite: width: 300px oder width: 50% oder width: 50vw
  • Ränder: border: 2px solid black oder border: 2px dashed black
  • Abstände: padding: 3px oder padding-top: .. oder padding-left oder margin: 3px oder margin-top: .. oder margin-left
Kontrolle der Übersetzung

Mithilfe von class="translate" oder class="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")
```

Metainformationen

Präsentationsformate

Buch/Präsentation/Folien

    --{{0}}--
Ich bin ein Kommentar, der laut vorgelesen werden kann.

    --{{1}}--
Es ist möglich, Kommentare mit Animation zu verbinden.

      {{1}}
?[audio](https://bigsoundbank.com/UPLOAD/mp3/1068.mp3)


    --{{2}}--
Blöcke können auch wieder verschwinden.

     {{2-3}}
| Tabellen |      sind      | cool  |
|:-------- |:--------------:|:----- |
| rechts   |   zentriert    | links |
| :-)      | $ f(x) = x^2 $ | <-->  |

liatab

    --{{3 Ukrainan Female}}--
Первоначально создан в 2004 году Джоном Грубером (англ. John Gruber) и Аароном
Шварцем.
Многие идеи языка были позаимствованы из существующих соглашений по
разметке текста в электронных письмах...


    {{3}}
Oder die Sprache kann geändert werden. Tippe "voice" um
eine Auswahl der unterstützen Sprachen zu erhalten

Inline Animationen

Hallo {2}{Welt, } dies ein Absatz mit internen Animationen {1-2}{die auch wieder verschwinden können}.

Sprachen Lernen |> oder !>

Versteckte Kommentare

--{{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

Formeln

Nutzung von KaTeX

Funktionsübersich: https://katex.org/docs/supported.html

  1. Inline Formeln: $ ... $ --> $ f(a,b,c) = (a^2+b^2+c^2)^3 $

  2. Block Formeln: $$ ... $$

    $$ \sum_{i=1}^\infty\frac{1}{n^2} =\frac{\pi^2}{6} $$

Interaktive Formeln

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

Quizzes

Umfragen

Aufgaben/Tasks

Bemerkung zu Versionen

Klassenräume

Zeichnen mit ASCII-Art

Diagramme

                                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

Code als Bild

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 │▒
  ╞═╤══╩══╤═══════════╡▒
  │ ├──┬──┤           │▒
  │ └──┴──┘           │▒
  └───────────────────┘▒
   ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒

Weiteres

Spaß mit Tabellen

Erweiterungen

Wo finde ich Erweiterungen

https://github.com/topics/liascript-template

Visit W3Schools!

Wie erstelle ich eigene Erweiterungen

Export zu anderen Formaten

  1. Download von NodeJS: https://nodejs.org/de/download/

  2. Download des LiaScript-Exporters: https://www.npmjs.com/package/@liascript/exporter

Ein Ausblick: JavaScript

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>

Tabellen und Code

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)

Diagramme

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>