===========================================
Website-Bau mit verschiedenen Technologien
===========================================
Übersicht
=========
In diesem Projekt zeigen wir, wie man eine Website mit verschiedenen Technologien erstellt und welche Vor- und Nachteile die einzelnen Ansätze mit sich bringen. Die ausgewählten Technologien sind Plain (HTML, CSS), WordPress, NiceGUI und Angular.
Zeil website (die nachzu bauen ist):
.. image:: /img/figma_page_example.png
:alt: Muster Student Beispiel
:align: center
Über das Projekt
================
Das Ziel dieses Projekts ist es, die Erstellung einer Website anhand eines Beispiels, wie es im bereitgestellten Bild zu sehen ist, mit verschiedenen Technologien zu demonstrieren. Wir haben uns für folgende Technologien entschieden:
- **Plain (HTML, CSS)**
- **WordPress**
- **NiceGUI**
- **Angular**
Jede Technologie wird ihre eigenen Abschnitte haben, die ihre Implementierung und die Vor- und Nachteile beschreiben.
WordPress
=========
Einführung
----------
WordPress ist ein beliebtes Content-Management-System (CMS), das es Benutzern ermöglicht, Websites einfach zu erstellen und zu verwalten. Es bietet zahlreiche Themen und Plugins, die die Anpassung und Funktionalität erweitern. In diesem Abschnitt wird die Erstellung einer Website mit WordPress.com beschrieben.
Schritt-für-Schritt-Anleitung
-----------------------------
1. **WordPress.com Konto erstellen**:
- Gehen Sie zu `WordPress.com `_ und erstellen Sie ein Konto.
- Folgen Sie den Anweisungen auf der Website, um ein neues Konto zu erstellen.
2. **Ein Thema auswählen**:
- Wählen Sie ein geeignetes Thema, das eine einfache Anpassung ermöglicht. Es wird empfohlen, ein leicht anpassbares und responsives Theme zu wählen.
- Gehen Sie im WordPress.com-Dashboard zu „Design“ > „Themes“ und wählen Sie ein passendes Theme aus.
3. **Seitenstruktur erstellen**:
- **Neue Seite erstellen**:
- Gehen Sie im WordPress-Dashboard auf „Seiten“ > „Neu hinzufügen“.
- Geben Sie der Seite einen passenden Titel, z.B. „Muster Student Profil“.
- **Seiteninhalt hinzufügen**:
- Fügen Sie die verschiedenen Abschnitte hinzu, die im Beispiel zu sehen sind: Profilbild, „Über mich“, Projekte und soziale Medien.
- Verwenden Sie dafür den WordPress-Block-Editor (Gutenberg), um Texte, Bilder und Links hinzuzufügen.
4. **Layout und Design anpassen**:
- **Profilbild hinzufügen**:
- Fügen Sie einen Bild-Block hinzu und laden Sie das Profilbild hoch.
- **Textblöcke für „Über mich“ und „Meine Projekte“ hinzufügen**:
- Verwenden Sie Textblöcke, um die entsprechenden Texte hinzuzufügen.
- **Soziale Medien Links hinzufügen**:
- Fügen Sie Schaltflächen- oder Icon-Blöcke hinzu und verlinken Sie diese zu den entsprechenden sozialen Medienprofilen.
5. **Anpassungen vornehmen**:
- **CSS-Anpassungen**:
- Gehen Sie zu „Design“ > „Customizer“ > „Zusätzliches CSS“ und fügen Sie benutzerdefiniertes CSS hinzu, um das Layout weiter anzupassen.
- Beispiel:
.. code-block:: css
.profile-picture {
border-radius: 50%;
width: 150px;
height: 150px;
margin: 0 auto;
}
.about-section, .projects-section {
margin: 20px 0;
}
.social-media-links a {
margin: 0 10px;
text-decoration: none;
}
6. **Seite veröffentlichen**:
- Nachdem alle Inhalte und Anpassungen vorgenommen wurden, klicken Sie auf „Veröffentlichen“, um die Seite live zu schalten (wurde für diese Beispielseite nicht gemacht).
Ergebnis
---------
.. image:: /img/wordpress_page_example.png
:alt: Muster Student Beispiel
:align: center
Vor- und Nachteile von WordPress
-----------------------------------
**Vorteile**:
- Einfache Bedienung und Verwaltung ohne tiefgehende Programmierkenntnisse.
- Vielzahl von Themes und Plugins zur Erweiterung der Funktionalität.
- Große Community und umfangreiche Dokumentation.
**Nachteile**:
- Kann durch viele Plugins langsamer werden.
- Sicherheitsrisiken, wenn nicht regelmäßig aktualisiert.
- Eingeschränkte Flexibilität im Vergleich zu reinem HTML, CSS und JS oder Frameworks wie Angular.
Plain (HTML, CSS)
===================
Einführung
----------
Unabhängig von der Technologie, in der eine Website erstellt wird, muss sie letztendlich in HTML und CSS übersetzt werden, damit sie von einem Browser angezeigt werden kann. Ein Low-Level-Ansatz ist also die direkte Verwendung von Plain HTML und CSS.
Schritt-für-Schritt-Anleitung
-----------------------------
1. **Anlegen der Ordnerstruktur**:
Es gibt keine festen Vorgaben für die Ordnerstruktur. Eine einfache HTML-Datei kann bereits im Browser angezeigt werden. Dennoch ist es sinnvoll, das Projekt zu strukturieren, z. B. so:
| website/
| ├── index.html
| ├── css/
| │ └── style.css
| └── images/
2. **boilerplate code in index.html einfügen**:
- Der Boilerplate-Code bildet die Grundlage für jede HTML-Datei und enthält wichtige Deklarationen wie die Dokumententyp-Deklaration, den HTML-Tag und den Head- und Body-Bereich.
.. code-block::
How to create a website using HTML and CSS
Test
3. **Grund struktur der Seite in HTML definieren**:
- Der Body-Bereich einer HTML-Seite enthält den eigentlichen Inhalt, der für den Besucher sichtbar ist.
- Um Elemente auf der Seite zu definieren, bietet HTML viele Tags.
- Eine kleine Tag-Auswahl:
-
ist ein generischer Container, um mehrere Teile zu gruppieren.
-
3. **Elemente stylen**:
- Mit CSS wird das Aussehen und die Anordnung der HTML-Komponenten definiert.
- Dazu werden in der CSS-Datei Stilregeln erstellt.
.. code-block::
html, body {
background-color: #2b2b2b;
height: 100%;
}
.seperator{
background: #734e3e;
width: 10px;
}
- Der Teil vor den {}-Klammern definiert, auf was sich die Regel bezieht.
- In der Regel wird der eigentliche Stil definiert.
3. **Website anzeigen**:
- Während der Entwicklung kann die Website einfach durch Öffnen der index.html-Datei in einem Browser angezeigt werden.
- Um die Website im Internet verfügbar zu machen, muss sie auf einem Webserver gehostet werden
Ergebnis
--------
.. image:: /img/plain_html_page_example.png
:alt: Muster Student Beispiel
:align: center
Vor- und Nachteile von Plain HTML/CSS
-------------------------------------
**Vorteile**:
- Plain HTML/CSS ist auf allen Browsern und Geräten kompatibel.
- Websites mit Plain HTML/CSS sind oft schneller und schlanker als Websites, die mit Frameworks erstellt wurden.
- SEO-freundlich: Plain HTML/CSS ist für Suchmaschinen leicht zu crawlen und zu indizieren.
**Nachteile**:
- Code kann schenll unübersichtlich werden
- wenige teile des codes sind Wiederverwendbar im Vergleich zu Komponenten basierten Frameworks
- Website sind schwierig responsive zu gestalten
NiceGUI
=======
Einführung
----------
NiceGUI ist ein Framework für die Erstellung von grafischen Benutzeroberflächen (GUIs) in Python. Es ist einfach zu erlernen und ermöglicht die schnelle Erstellung von Webanwendungen, Dashboards, Roboterprojekten und vielem mehr. NiceGUI zeichnet sich durch seine Backend-First-Philosophie aus, die es dem Entwickler ermöglicht, sich auf die Python-Logik zu konzentrieren, während das Framework sich um die Details der Webentwicklung kümmert.
In diesem Abschnitt wird die Erstellung einer Website mit NiceGUI beschrieben.
Schritt-für-Schritt-Anleitung
-----------------------------
1. **NiceGUI mit pip installieren**:
- pip3 install nicegui
2. **Initialisierung**
- Neue .py datei erstellen
- NiceGUI importieren:
.. code-block:: python
from nicegui import ui
3. **Elemente hinzfügen**
- Über die importierte **ui** können Elemente hinzugefügt werden
- Zum Beispiel ein Label:
.. code-block:: python
ui.label('test')
- Es kann aber auch direkt html code eingefügt werden:
.. code-block:: python
ui.html("