| assets/drawio/node-js.drawio | ●●●●● Patch | Ansicht | Raw | Blame | Historie | |
| assets/images/node-js.svg | ●●●●● Patch | Ansicht | Raw | Blame | Historie | |
| index.html | ●●●●● Patch | Ansicht | Raw | Blame | Historie |
assets/drawio/node-js.drawio
Neue Datei @@ -0,0 +1 @@ <mxfile host="Electron" modified="2024-06-10T16:15:20.436Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="tjOBXhCWw8cwJkA8svfN" version="16.1.2" type="device"><diagram id="ERSdXdGp_mw-8WpFkcub" name="Page-1">5Zhdb5swFIZ/DdJ2EQnbQJLLhmT90LJOo+uq3nnggjWDM8dpkv36mWEK1Exl2iCou4p5j419Hp+cY2MhPz2cC7xJ1jwizIJ2dLDQ0oIQzh2ofnLlWCgA2k6hxIJGWquEgP4gWrS1uqMR2TY6Ss6ZpJumGPIsI6FsaFgIvm92e+CsOesGx8QQghAzU/1CI5kU6gxOK/2C0DgpZwbevLCkuOysPdkmOOL7moRWFvIF57JopQefsJxeyaUY9+431qeFCZLJLgOCA7m9mab0Hh6Xl/fh3fe7xfVEv+URs512WC9WHksCgu+yiOQvsS202CdUkmCDw9y6V5uutESmTD0B1TQXVc5AhCSHmqQXeU54SqQ4qi77ii+YaWhJjS10tIj1nsZPYyu3VUN7/gcUoEHBTwRP6S41aCgnZNPlrRT8G/E540IpGc9Uz8UDZeyZhBmNM/UYKjRE6YscCVWRdqYNKY2ifJpWxs1d+BvM2uppmDXqXgt01BdzZDD/RJSHYrLKYqqAQY/loL8K1Yrz1puLm/V7Kw9y5b7tB8Hb04VqadVwdHLzXAMpaGPquj0xdQymny/HBgmZcdcKCfYVeO6IUl47ItCVEbD7guQZkK7wIw5CQTfy9eZEp8M+2EPG6tTYhtvZyaN1/oyS262STPuCNDMgLa/Xk7OPp099aGSk5uNLfdBu+Y/NBz39ldm3huWDushcBa830bUdVQY9/YExXTxKKMAdWxkG5s3kf6jD0OmwE4MWYmBeV0ZQieHs5QIzdQcsMMC8geSpdBTFGCL3RVjOv4GlHqvvOr9stc9jaPUT</diagram></mxfile> assets/images/node-js.svg
Neue Datei @@ -0,0 +1,3 @@ <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="802px" height="502px" viewBox="-0.5 -0.5 802 502"><defs/><g><rect x="10" y="10" width="360" height="480" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="2" pointer-events="all"/><rect x="130" y="10" width="120" height="60" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 20px; margin-left: 66px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Chromium</div></div></div></foreignObject><text x="95" y="24" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">Chromium</text></switch></g><rect x="30" y="140" width="320" height="110" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 98px; margin-left: 16px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Render-Engine<br />(HTML + CSS)</div></div></div></foreignObject><text x="95" y="101" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">Render-Engine...</text></switch></g><rect x="30" y="70" width="320" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 45px; margin-left: 16px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">UI</div></div></div></foreignObject><text x="95" y="49" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">UI</text></switch></g><rect x="30" y="270" width="320" height="200" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="2" pointer-events="all"/><rect x="90" y="270" width="200" height="40" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 145px; margin-left: 46px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">JavaScript</div></div></div></foreignObject><text x="95" y="149" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">JavaScript</text></switch></g><rect x="190" y="310" width="120" height="140" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 190px; margin-left: 96px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">V8</div></div></div></foreignObject><text x="125" y="194" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">V8</text></switch></g><rect x="70" y="310" width="120" height="140" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 190px; margin-left: 36px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">DOM-API</div></div></div></foreignObject><text x="65" y="194" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">DOM-API</text></switch></g><rect x="410" y="10" width="380" height="480" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="2" pointer-events="all"/><rect x="540" y="10" width="120" height="60" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 20px; margin-left: 271px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">NodeJS</div></div></div></foreignObject><text x="300" y="24" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">NodeJS</text></switch></g><rect x="440" y="270" width="320" height="200" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="2" pointer-events="all"/><rect x="500" y="270" width="200" height="40" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 145px; margin-left: 251px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">JavaScript</div></div></div></foreignObject><text x="300" y="149" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">JavaScript</text></switch></g><rect x="570" y="310" width="150" height="140" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 73px; height: 1px; padding-top: 190px; margin-left: 286px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">V8</div></div></div></foreignObject><text x="323" y="194" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">V8</text></switch></g><rect x="480" y="310" width="90" height="140" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 43px; height: 1px; padding-top: 190px; margin-left: 241px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Node-API</div></div></div></foreignObject><text x="263" y="194" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">Node-API</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg> index.html
@@ -36,9 +36,16 @@ <ul> <li>JavaScript</li> <li>Responsive Design</li> <li>NodeJS</li> <li>WebComponents / lit</li> <li>NodeJS</li> <li>Datenbank</li> </ul> </section> <section> <h3>Betrieb</h3> <ul> <li>Server einrichten</li> <li>SSL- / TLS-Zertifikate</li> </ul> </section> <section> @@ -66,13 +73,6 @@ <li>Progressive Web Application</li> <li>CEF / Electron</li> <li>WebAssembly</li> </ul> </section> <section> <h3>Betrieb</h3> <ul> <li>Server einrichten</li> <li>SSL- / TLS-Zertifikate</li> </ul> </section> <section> @@ -3916,7 +3916,328 @@ </section> <section> <h3>Aufgabe</h3> <p>Entwickle eine Tab-Komponente (Vorlage "tab-componenmt.html"), welche beim Click auf einen Registerreite / Tab ein Event feurt, welches die Außenwelt über das gerade aktivierte Tab (tab-id) informiert</p> <p>Entwickle eine Tab-Komponente (Vorlage "tab-componenmt.html"), welche beim Click auf einen Registerreite / Tab ein Event feuert, welches die Außenwelt über das gerade aktivierte Tab (tab-id) informiert</p> </section> <section> <h3>Lösung</h3> <pre> <code class="js" data-trim data-line-numbers> this.root.innerHTML = ` <style> ::slotted(div) { display: none; } ::slotted(div.active) { display: block; } </style> <div><slot name="tab"></slot></div> <div><slot name="content"></slot></div> `; </code> </pre> </section> <section> <pre> <code class="js" data-trim data-line-numbers> connectedCallback() { const firstContent = this.querySelector("div"); firstContent.classList.add("active"); this.addEventListener("click", (e) => { if (e.target.tagName === "SPAN" && e.target.hasAttribute("tab-id")) { const oldContent = this.querySelector("div.active"); const newContent = this.querySelector(`[tab-id="${e.target.getAttribute("tab-id")}"]`); oldContent.classList.remove("active"); newContent.classList.add("active"); this.dispatchEvent(new CustomEvent("tabclick", {composed: true, bubbles: true, detail: e.target.getAttribute("tab-id"), cancelable: true})); } }); } </code> </pre> </section> </section> <section> <section> <h2>NodeJS</h2> </section> <section> <h3>Was ist NodeJS?</h3> <ul> <li class="fragment">"JavaScript auf dem Server"</li> <li class="fragment">basiert auf der V8-Engine von Google</li> <li class="fragment">Laufzeitumgebung für JavaScript mit eigener API</li> </ul> </section> <section> <img data-src="/assets/images/node-js.svg"> </section> <section> <h3>Überblick über die Node-API</h3> <p>Die API ist in viele verschiedene Module aufgeteilt</p> <table> <tr><td>fs</td><td>Dateisystem</td></tr> <tr><td>crypto</td><td>Kryptografie</td></tr> <tr><td>zlib</td><td>Datenkompression</td></tr> <tr><td>http</td><td>Webserver</td></tr> <tr><td>net</td><td>Netzwerk (TCP)</td></tr> <tr><td>tls</td><td>Verschlüsseltes Netzwerk (TCP)</td></tr> </table> </section> <section> <p>Aufruf eines Programmes in der Kommandozeile</p> <pre> <code class="bash" data-trim data-line-numbers> node [Node-Parameter] path/to/script.js [Anwendungsparameter] </code> </pre> <p>z.B.</p> <pre> <code class="bash" data-trim data-line-numbers> node --inspect index.js --port 3000 </code> </pre> </section> <section> <p>Einbinden von Modulen</p> <pre> <code class="js" data-trim data-line-numbers> const fs = require("fs"); </code> </pre> </section> <section> <p>Aufbau eines Moduls</p> <pre> <code class="js" data-trim data-line-numbers> module.exports = { foo: 5, sayHello: function(name) { return "Hello " + name + "!"; } } </code> </pre> <p>oder</p> <pre> <code class="js" data-trim data-line-numbers> exports.foo = 5; exports.sayHello = function(name) { return "Hello " + name + "!"; }; </code> </pre> </section> <section> <p>Aufgabe</p> <p>Schreibe ein Modul, welches eine <code>Square</code>-Klasse zur Verfügung stellt, mit welchem man den Umfang und den Flächeninhalt eines Rechtecks berechnen kann:</p> <pre> <code class="js" data-trim data-line-numbers> const Square = require("./square"); const square = new Square(2, 3); console.log(square.getArea()); // => 6 console.log(square.getPerimeter()); // => 10 </code> </pre> </section> <section> <h3>Module für die Kommandozeile</h3> <p>package.json</p> <pre> <code class="bash" data-trim data-line-numbers> npm init -y </code> </pre> <pre> <code class="js" data-trim data-line-numbers> { ... "bin": { "my-command": "./index.js" } } </code> </pre> </section> <section> <p>index.js</p> <pre> <code class="js" data-trim data-line-numbers> #! /usr/bin/env node console.log("Hello world from the command line!"); </code> </pre> </section> <section> <p>Installation</p> <pre> <code class="bash" data-trim data-line-numbers> npm install -g path/to/project </code> </pre> z.B. <pre> <code class="bash" data-trim data-line-numbers> npm install -g . </code> </pre> </section> <section> <p>Ausführung</p> <pre> <code class="bash" data-trim data-line-numbers> my-command </code> </pre> </section> <section> <p>Kommandozeilenparameter</p> <pre> <code class="js" data-trim data-line-numbers> console.log(process.argv); </code> </pre> <p>angelehnt an die Parameter aus der Programmiersprache <code>c</code>:</p> <pre> <code class="c" data-trim data-line-numbers> int main(int argc, char *argv[]) </code> </pre> </section> <section> <p>Aufgabe</p> <p>Mache das vorherige Programm für die Konsole aufrufbar, sodass die Länge und Breite für das Rechteck per Konsolenargumente übergeben werden können und der Flächeninhalt ausgegeben wird:</p> <pre> <code class="js" data-trim data-line-numbers> my-command 2 3 </code> </pre> </section> <section> <h3>Buffer</h3> <p>Array-artige Struktur für rohe Bytes</p> <pre> <code class="js" data-trim data-line-numbers> const b1 = Buffer.from("abc"); // bevorzugt const b2 = Buffer.alloc(100, 0); // Länge mit initialen Daten const b3 = Buffer.allocUnsafe(100); // Länge ohne initiale Daten const b4 = new Buffer("abc"); // offiziell nicht empfohlen console.log(b1); // => <Buffer 61 62 63> console.log(b1.toString("hex")); // => "616263" </code> </pre> </section> <section> <p>Mit Buffern arbeiten:</p> <pre> <code class="js" data-trim data-line-numbers> const a = Buffer.from("a") + Buffer.from("b"); const b = Buffer.concat([Buffer.from("a"), Buffer.from([98])]); const c = b.toString() console.log(a); // => ab console.log(b); // => <Buffer 61 62> console.log(c); // => ab for (const byte of a) { console.log(byte); // => 97 98 } </code> </pre> </section> <section> <p>Aufgabe</p> <p>Implementiere eine XOR-Verschlüsselung (<code>^</code>-Operator), sodass jedes Byte einer Original-Nachricht der Reihe nach mit dem entsprechenden Byte eines Schlüsselwortes verschlüsselt wird und gebe die verschlüsselte Nachricht als Text aus.</p> </section> <section> <p>Aufgabe</p> <p>Implementiere zur vorherigen Verschlüsselung eine Entschlüsselung.</p> </section> <section> <p>Lösung</p> <pre> <code class="js" data-trim data-line-numbers> const word = Buffer.from("abcdef"); const key = Buffer.from("xyz"); const encrypted = Buffer.alloc(word.length, 0); // encrypt for (let i = 0; i < word.length; i++) { encrypted[i] = word[i] ^ key[i % key.length]; } // decrypt for (let i = 0; i < word.length; i++) { word[i] = encrypted[i] ^ key[i % key.length]; } console.log(word.toString()); // => "abcdef" </code> </pre> </section> <section> <h3>Streams</h3> <p>Konstanter Fluss von (meist) großen Datenmengen in kleinen Paketen</p> </section> <section> <p>Gängige Typen von Streams</p> <ul> <li>Standard In / Out</li> <li>HTTP-Requests / -Responses</li> <li>TCP-Sockets</li> <li>Lese- und Schreib-Streams auf Dateien</li> <li>Große Datenbank-Ergebnisse mittels Cursor</li> </ul> </section> <section> <pre> <code class="js" data-trim data-line-numbers> const readableStream = fs.createReadStream("./source.txt"); const writableStream = fs.createWriteStream("./target.txt"); readableStream.on("data", (data /* Buffer */) => { // process data here writableStream.write(data) }); readableStream.on("end", (data) => { // stream has finished, e.g. EOF (end of file) }); // alternatively pipe content readableStream.pipe(writableStream); </code> </pre> </section> <section> <p>Aufgabe</p> <p>Lese eine beliebige Datei als Readable Stream, verschlüssele den Inhalt mit der XOR-Methode und schreibe die verschlüsselten Bytes in eine Zieldatei</p> </section> <section> <p>Aufgabe</p> <p>Ändere das Programm, sodass auf Konsolenebene ein Pipe (|) ermöglicht wird:</p> <pre> <code class="bash" data-trim data-line-numbers> echo "Hello World!" | node index.js </code> </pre> <p>Nutze dafür die implizit vorhandenen Streams von Standard In / Out:</p> <pre> <code class="js" data-trim data-line-numbers> process.stdin; // Readable Stream process.stdout; // Writable Stream </code> </pre> </section> </section> </div>
