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

HelloCoding, der Podcast.

In dieser Podcast-Episode geht es darum wie man eine Webseite erstellen kann vom Design über die verschiedenen System zu Erstellung. Und vieles weiteres, wie zum Beispiel die Zielgruppe.

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

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

• Discord Server
• Folge uns auf Twitter
• Folge uns auf Instagram
• HelloCoding Podcast
• Impressum
• Datenschutz

챕터

1. Einleitung (00:00:00)

2. An welchen Projekten wir Arbeiten? (00:00:35)

3. Quietscheentchen-Debugging - Rubber duck debugging (00:03:40)

4. Mit HTML ein par Webseiten Programmieren? (00:06:22)

5. Wie viel Erfahrung hast du Leon im Thema Webseiten? (00:07:32)

6. Wie würdest du mit einer neuen Webseite Anfangen Leon? (00:09:35)

7. Eine Idee für die Webseite definieren - Was für ein Ziel habe ich? (00:10:45)

8. Ein Wireframe verwenden - sinvoll oder nicht? (00:15:09)

9. Wie sollte man ein Screendesign aufbauen? Wo liegen die Vorteile? (00:18:00)

10. Grid-System (00:21:22)

11. Coperate Design - Wiedererkennung einer Firma (00:22:57)

12. Umsetzung der Webseite/der App (00:27:25)

13. Verschiedene CMS Typen (Classic, Headless, FlatFile) (00:29:49)

14. Wie wird ein CMS erweitert? Module, Plugins, Themes (00:32:51)

15. JavaScript & CSS Frameworks (00:35:15)

16. Responsive Design, Mobile First (00:40:39)

17. Hosting von Webseiten (00:41:42)

18. Sicherheit von Webseiten (00:43:32)

19. Abschließende Worte (00:45:33)