Lerne Coding

{02} Was bei der Erstellung von Webseiten beachtet werden sollte?

22.05.2022
Netzwerk Offline
Dein Netzwerk ist offline, deshalb laden wir die gesamte Seite aus dem Cache. Beachte: die Inhalte könnten veraltet sein!
Für aktuelle Inhalte aktiviere bitte dein Internet!
Alter Browser
Hallo liebe Nutzer,
da wir als Coding-Plattform und Webentwickler ausschließlich auf aktuelle Technologien setzen, unterstützen wir keine veralteten Internetbrowser. Bitte schau dir doch ein paar der tollen Alternativen an, bestimmt findest du hier einen für dich passenden modernen Browser!
Inhaltsverzeichnis
[[TABLE OF CONTENTS]]

Shownote zur Episode {02}

{00:01:11} UML - Unified Modeling Language

{00:02:04} Dialog-Element HTML 5 - vollständiger Support ist endlich verfügbar. Mehr dazu im Artikel "HTML, das neue Element für Dialoge, Pop-ups und Modals".

{00:06:55} Was ist Turing-Vollständigkeit? Mit einer Turing-vollständigen Sprache ist es theoretisch möglich, jede Turing-Maschine zu schreiben. So könnte man zum Beispiel einen Compiler für die Sprache in der Sprache selbst schreiben. Mehr dazu hier.

{00:08:15} Was ist ein Content-Management-System - kurz CMS? Ein CMS ist ein Interface, um Inhalte einer Webseite oder einer App einfach zu verwalten, ohne über Programmierkenntnisse zu verfügen. Weshalb grade im Umgang mit Kunden gerne auf ein CMS zurückgegriffen wird.

{00:10:00} Was ist ein Wireframe? Ein Wireframe (Deutsch: "Drahtmodell") ist ein Modell der Webseite, reduziert auf die nötigsten Formen ohne Farbe und Details. Ein Bild kann zum Beispiel durch ein Rechteck mit einem Kreuz darin ersetzt werden. Mehr dazu auch hier.

{00:14:20} Zum Thema Typografie kann ich euch die Webseite “typolexikon.de" ans Herz legen dort findet ihr viele Information zu diesem Thema!

{00:14:35} Das Buch “Grafik und Gestaltung - Das umfassende Handbuch" - Es gibt einen umfassenden Einblick in das Thema Design - es ist sehr kompakt geschrieben, gut verständlich und gefüllt mit sehr nachhaltigen Wissen. Sowohl für Anfänger:innen zum Lernen als auch für erfahrenere Personen als Nachschlagewerk gut geeignet. Bevor ich damals mein Fachabitur (~2015) in Gestaltung begonnen hatte, hab ich mir bereits durch dies Buch viel wissen anlesen können, das mir dann weiter geholfen hat. 

Grafik und Gestaltung - ISBN 978-3-8362-4186-1
Grafik und Gestaltung - ISBN 978-3-8362-4186-1

{00:19:14} Software für Screendesign: Affinity Designer, Figma, Sketch, Adobe XD, Photoshop

{00:22:53} Grid System Generator für Photoshop: http://gridcalculator.dk/

{00:23:51} Deutsche Bahn Guide Line fürs Design (Coperate Design): https://marketingportal.extranet.deutschebahn.com/

{00:27:55} Eine wunderbare Webseite, die euch einen Überblick über verschiedenste CMS Systeme gibt, ist https://cmsstash.de/ diese Seite hat einen tabellarischen Überblick und viele verschiedene Vergleiche. Sei es WordPress, Kirby oder Directus eine große Auswahl an CMS wird beschrieben.

{00:28:44} Static Site Generatoren (SSGs) - Es gibt verschiedenste Static Site Generatoren, die bekanntesten sind vor allem Hugo, Gatsby, Jekyll. Persönlich find ich (Felix) noch VuePress sehr interessant, persönlich benötige ich allerdings selten einen SSG.

{00:34:12} Twig ist eine Template Engine für PHP. Diese Syntax ist auch in anderen Sprachen sehr verbreitet, wie zum Beispiel jinja2 für Python. Natürlich gibt es Abweichungen, aber solche Engines sind im Allgemeinen sehr verbreitet.(https://twig.symfony.com/)

{00:35:49} Tailwind ist eine CSS Framework, das den Focus darauf legt, selbst wenig CSS noch schreiben zu müssen. Bootstrap ist eine CSS Framework, das ursprünglich von Twitter entwickelt wurde, inzwischen Geräte es durch viel alternativen immer mehr in den Hintergrund. UiKit legt den Focus auf Input und Ui Element, was das Erstellen von User Interfaces vereinfacht.

{00:37:06} CSS Präprozessor SASS/SCSS mehr Infos im Artikel "Was ist SASS/SCSS? Wie hilft es mir?".

{00:42:28} Traefik - Edge Router - https://doc.traefik.io/traefik/

{00:45:12} Gutscheine für Netcup:

  • 5,00 € Gutschein Code | 36nc16389496330
  • Webhosting 2000 30% Rabatt | 1927nc16532409620
  • Webhosting 4000 30% Rabatt | 1928nc16532409880

Discord Server

Zusammenfassung

In dieser Podcast-Episode sprechen ich und Leon über das Rubber duck debugging und sehr ausgiebig über die Entwicklung von neuen Webseiten. Angefangen bei der Zielgruppe und der Idee. Weiter gehts mit dem Screendesign und Wireframe und abschließend kommen wir dann zur Umsetzung und verschiedenen CMS Systemen und Entwicklung und Hosting Möglichkeiten.

Kapitel - Übersicht

  • {00:00:00} - Einleitung
  • {00:00:35} - An welchen Projekten wir Arbeiten?
  • {00:03:40} - Quietscheentchen-Debugging - Rubber duck debugging
  • {00:06:22} - Mit HTML ein par Webseiten Programmieren?
  • {00:07:32} - Wie viel Erfahrung hast du Leon im Thema Webseiten?
  • {00:09:35} - Wie würdest du mit einer neuen Webseite Anfangen Leon?
  • {00:10:45} - Eine Idee für die Webseite definieren - Was für ein Ziel habe ich?
  • {00:15:09} - Ein Wireframe verwenden - sinvoll oder nicht?
  • {00:18:00} - Wie sollte man ein Screendesign aufbauen? Wo liegen die Vorteile?
  • {00:21:22} - Grid-System
  • {00:22:57} - Coperate Design - Wiedererkennung einer Firma
  • {00:27:25} - Umsetzung der Webseite/der App
  • {00:29:49} - Verschiedene CMS Typen (Classic, Headless, FlatFile)
  • {00:32:51} - Wie wird ein CMS erweitert? Module, Plugins, Themes
  • {00:35:15} - JavaScript & CSS Frameworks
  • {00:40:39} - Responsive Design, Mobile First
  • {00:41:42} - Hosting von Webseiten
  • {00:43:32} - Sicherheit von Webseiten
  • {00:45:33} - Abschließende Worte
Bildquelle - Vielen Dank an die Ersteller*innen für dieses Bild

Kommentare zur Podcast Episode {02}

Es sind noch keine Kommentare vorhanden? Sei der/die Erste und verfasse einen Kommentar zur Podcast Episode {02}!

Kommentar schreiben

Neue Podcast Episoden

close