Webtechnologien
Wintersemester 2024
<!DOCTYPE HTML> <html lang="de"> <head> <meta charset="utf-8"> <title>Auftakt</title> <meta name="viewport" content="width=792, user-scalable=no"> <base target="_blank"> <link rel="stylesheet" href="/assets/styles/presentation.css"> </head> <body class="list"> <div class="notes"> <a href="text.html" target="_parent">♯</a> <a href="/notes/" target="_blank">♫</a> </div> <header class="caption"> <h1>Auftakt</h1> </header> <section bg="webstuhl.jpg" id="webtechnologien" class="slide cover"><div><h2>Webtechnologien</h2> <p class="note">Quelle: <a href="https://www.flickr.com/photos/ginomempin/6857465493">Gino Mempin</a></p> </div></section> <section class="slide" id="website"><div><h2>Website</h2> <p class="center">Zeitplan, Aufgaben, Präsentationen und alles andere unter<br /> <br /><br /> <a href="https://beier.f4.htw-berlin.de" class="big">beier.f4.htw-berlin.de</a></p> <footer> <ul> <li>Themen der Schulung sind <ul> <li>Alle Bewohner des Technologie-Zoos World Wide Web einmal kennen zu lernen und generell Gebietskenntnis aufzubauen</li> <li>Strukturierung (HTML) und Gestaltung (CSS) einer Website</li> <li>Entwicklungswerkzeuge</li> <li>Responsive Web Design</li> <li>Mobile Web Apps</li> <li>Entwicklung dynamischer Seiten im Backend</li> <li>Entwicklung dynamischer Seiten im Frontend</li> </ul> </li> <li> <p>Weitere Interessen? Einfach sagen!</p> </li> <li>Ziel <ul> <li>Mit möglichst vielen Web-Technologien zu arbeiten und ein Gefühl für sie und ihren Kontext zu bekommen.</li> <li>Die Kernkonzepte des Webs zu verstehen (weil Konzepte wichtiger als Technologien)</li> </ul> </li> </ul> </footer> </div></section> <section class="slide" id="themen"><div><h2>Themen</h2> <p><img src="technologien.svg" alt="Themen" class="full-width" /></p> <footer> <ul> <li>Struktur (HTML), Aussehen (CSS), Funktion (JavaScript)</li> <li>Zudem: Responsive Web Design, Mobile Web Apps, Frameworks</li> <li> <p>Weitere Interessen? Einfach sagen!</p> </li> <li>Ziel <ul> <li>Mit möglichst vielen Web-Technologien zu arbeiten und ein Gefühl für sie und ihren Kontext zu bekommen.</li> <li>Die Kernkonzepte des Webs zu verstehen (weil Konzepte wichtiger als Technologien)</li> </ul> </li> </ul> </footer> </div></section> <section class="slide" id="übung-bewertung-prüfung"><div><h2>Übung, Bewertung, Prüfung</h2> <ul> <li>Note = 50% <a href="/semesteraufgabe/">Semesterprojekt</a> + 50% schriftliche Prüfung</li> <li>Entwicklung einer CRUD-App</li> <li>Initial Wahl eines Themas</li> <li>Gruppenarbeit mit max. 4 Personen</li> <li>Abgabe auf GitHub</li> <li>Zwischenpräsentation der statischen Lösung am 8. November</li> <li>Abschlusspräsentation der dynamischen Lösung am 17. Januar</li> </ul> <footer></footer> </div></section> <section class="slide" id="links"><div><h2>Links</h2> <ul> <li><a href="https://github.com/kamranahmedse/developer-roadmap"><strong>Web Developer Roadmap</strong></a> (Gebietskenntnis!) <br /> <small>maps with paths for frontend, backend and devops</small></li> <li><a href="https://github.com/dexteryy/spellbook-of-modern-webdev">Spellbook of Modern Web Dev</a> <br /> <small>A Big Picture, Thesaurus, and Taxonomy of Modern JavaScript Web Development</small></li> <li><a href="https://github.com/donnemartin/system-design-primer">The System Design Primer</a> <br /> <small>Learn how to design large-scale systems</small></li> <li><a href="https://github.com/thedaviddias/Front-End-Checklist">Front-End-Checklist</a> <br /> <small>The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your site / HTML page to production.</small></li> </ul> </div></section> <div class="progress"><div></div></div> <script src="/assets/scripts/shower.js"></script> <script src="/assets/scripts/shower-notes.js"></script> <script src="/assets/scripts/editor.js"></script> <script> document.querySelectorAll('[bg]').forEach(el => el.style.backgroundImage = `url(${el.attributes.bg.value})`); </script> </body> </html>