-Website

ÜK 404

Design

Screendesign

Ein Screendesign erstellt man um das Layout der noch nicht erstellten Website zu gestalten. Man kann das Screendesign mit vielen verschiedenen Programmen herstellen. In diesem ÜK haben wir mit Adobe XD gearbeitet. Mit Adobe XD kann man schöne und gute Screendesigns herstellen und es ist sehr gut dafür geeignet. Das Screendesign ist so gemacht, dass man die verschiedenen Farben des Footer sehen kann, sowie das Layout der ganzen Seite und auch die Farben des Footers. Das Ziel es ein Screendesign zu erstellen und die Webseite möglichst Wahrheitsgetreu nachzumachen. Natürlich kann das Screendesign während der Bearbeitung der Website angepasst werden. Jedoch sollte es schon möglichst genau sein, damit man es zum Beispiel dem Kunden zeigen kann. Dieser kann dir dann ein Feedback geben. Wenn er nicht zufrieden wäre, müsste man das ganze Websitedesign wieder neu machen.

Adobe XD

Sitemap

Ein wichtiger Schritt beim Erstellen einer Webseite ist die Sitemap. Sie zeigt auf, welche Unterseiten in welcher Reihenfolge angeordnet sind. Sie beginnt mit der Startseite unter welcher die Unterseiten aufgeschrieben werden. Eine Sitemap ist sehr wichtig für die Übersicht der Webseite. Sitemaps können zb. auf der Seite GlooMaps erstellt werden. www.gloomaps.com

Sitemap

Wordpress

WordPress ist ein freies Content-Management-System. Es wurde ab 2003 als Software für Weblogs programmiert und wird als Open-Source-Projekt ständig weiterentwickelt. WordPress ist das am weitesten verbreitete System zum Betrieb von Webseiten. In WordPress kann jeder Beitrag frei erstellbaren Kategorien zugewiesen werden, Navigationselemente werden automatisch passend erzeugt. Weiter bietet das System Leserkomentare mit der Möglichkeit, diese vor der Veröffentlichung erst zu prüfen, eine Verwaltung der Benutzerrollen und -rechte und die Möglichkeit externer Plug-ins, womit WordPress in Richtung eines vollwertigen CMS ausgebaut werden kann.
WordPress basiert auf der Skriptsprache PHP und benötigt eine MySQL Datenbank.

Wordpress Admin

CMS

Ein Content-Management-System ist eine Software zur gemeinschaftlichen Erstellung, Bearbeitung, Organistation und Darstellung von digitalen Inhalten zumeist zur Verwendung in Webseiten, aber auch in anderen Medienformen. Diese Ingalte können aus Text- und Multimedia-Dokumenten bestehen. Ein Autor mit entsprechenden Zugriffsrechten kann ein solches System in vielen Fällen ohne oder mit wenig Programmier- oder HTML-Kenntnissen bedienen, da die Mehrzahl der Systeme über eine grafische Benutzeroberfäche verfügt.

Bootstrap

Bootstrap ist ein freies Frontend-CSS-Framework. Es enthält auf HTML und CSS basierende Gestaltungsvorlagen für Typografie, Formulare, Buttons, Tabellen, Grid-Systeme, Navigations- und andere Oberflächengestaltungselemente sowie zusätzliche, optionale JavaScript-Erweiterungen.

Bootstrap-Website

Theme

Auf Wordpress kann man Themes, um sich sehr viel Arbeit zu ersparen. Mit Themes muss man nicht jede Seite einzeln abändern, falls man z.B. im Footer einen neuen Link hinzufügen möchte. Themes teilen eine HTML-Seite in verschiedene Elemente auf. Es gibt header.php, index.php, footer.php, und viele mehr. Aber für eine normale Website würden die 3 vorher komplett ausreichen. Das heisst, wenn man z.B. unzufrieden ist mit dem Footer aber den Rest beibehalten möchte, muss man nur footer.php verändern/ersetzen. Dann wird diese Änderung auf allen Seiten angenommen.

Themes haben natürlich auch CSS mit an Bord. Dort kann man auch die Theme-Infos angeben. Wenn man das Theme verkauft, sollte man unbedingt dort Informationen einfügen. Aber bei einem Theme, der nur für eine bestimmte Seite/privat genutzt wird, wäre eine Beschreibung und ein Bild reichen.

Mehr Information über den Aufbau von Themes
/* Theme Name: Twenty Nineteen
Theme URI: https://wordpress.org/themes/twentynineteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our 2019 default theme is designed to show off the power of the block editor. It features custom styles for all the default blocks, and is built so that what you see in the editor looks like what you'll see on your website. Twenty Nineteen is designed to be adaptable to a wide range of websites, whether you’re running a photo blog, launching a new business, or supporting a non-profit. Featuring ample whitespace and modern sans-serif headlines paired with classic serif body text, it's built to be beautiful on all screen sizes.
Requires at least: WordPress 4.9.6
Version: 1.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: twentynineteen
Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Twenty Nineteen is based on Underscores https://underscores.me/, (C) 2012-2018 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

PHP

PHP ist eine Programmiersprache, welche Serverbasiert ist, also der ganze Code von PHP wird von auf dem Server gerrechnet und nicht auf dem Computer an dem sie die Seite aufmachen. Dies heisst, wenn man als User auf die Website geht und den Code verändern will, sieht man die PHP-Sprache nicht, weil man als user auf die Seite geht und nicht als Admin. Als Admin kann man auf die Seite und man sieht anschliessend den PHP-Code. Wichtig ist, dass man wenn man PHP schreibt auch das File anpasst auf die Dateiendung (.php).

<?php bloginfo(string $show ='url'); ?>

Zur Info: Alles was in der Klammer stehen kann wird nun aufgelistet:


‘name‘ -- Zeigt den unter "Einstellungen"> "Allgemein" festgelegten "Site-Titel" an. Diese Daten werden aus dem Datensatz "blogname" in der Tabelle wp_options abgerufen.
‘description‘ -- Zeigt die unter Einstellungen> Allgemein festgelegte „Tagline“ an. Diese Daten werden aus dem Eintrag "blogdescription" in der Tabelle wp_options abgerufen.
‘wpurl‘ -- Zeigt die unter "Einstellungen"> "Allgemein" festgelegte "WordPress-Adresse (URL)" an. Diese Daten werden aus dem Eintrag „siteurl“ in der Tabelle wp_options abgerufen. Ziehen Sie in Betracht, stattdessen site_url () als Echo zu verwenden, insbesondere bei Konfigurationen mit mehreren Standorten, bei denen Pfade anstelle von Unterdomänen verwendet werden (dies gibt die Stammsite und nicht die aktuelle Unterdomäne zurück).
'url' -- Zeigt die unter "Einstellungen"> "Allgemein" festgelegte "Site-Adresse (URL)" an. Diese Daten werden aus dem Datensatz "home" in der Tabelle wp_options abgerufen. Überlegen Sie sich stattdessen, home_url () als Echo zu verwenden.
‘admin_email‘ -- Zeigt die unter Einstellungen> Allgemein festgelegte E-Mail-Adresse an. Diese Daten werden aus dem Datensatz „admin_email“ in der Tabelle wp_options abgerufen.
‘charset‘ -- Zeigt die unter Einstellungen> Lesen festgelegte Codierung für Seiten und Feeds an. Diese Daten werden aus dem Eintrag "blog_charset" in der Tabelle "wp_options" abgerufen. Hinweis: Dieser Parameter gibt immer "UTF-8" wieder, was die Standardkodierung von WordPress ist.
‘version‘ -- Zeigt die von Ihnen verwendete WordPress-Version an. Diese Daten werden aus der Variablen $ wp_version abgerufen, die in wp-includes / version.php festgelegt ist.
‘html_type‘ -- Zeigt den Inhaltstyp von WordPress-HTML-Seiten an (Standard: "text / html"). Diese Daten werden aus dem Datensatz "html_type" in der Tabelle "wp_options" abgerufen. Designs und Plugins können den Standardwert mithilfe des Filters pre_option_html_type überschreiben.
‘text_direction‘ -- Zeigt die Textrichtung von WordPress-HTML-Seiten an. Verwenden Sie stattdessen is_rtl ().
‘language‘ -- Zeigt die Sprache von WordPress an.
‘stylesheet_url‘ -- Zeigt die URL der primären CSS-Datei (normalerweise style.css) des aktiven Designs an. Erwägen Sie stattdessen, get_stylesheet_uri () als Echo zu verwenden.
‘stylesheet_directory‘ -- Displays the stylesheet directory URL of the active theme. (Was a local path in earlier WordPress versions.) Consider echoing get_stylesheet_directory_uri() instead.
‘template_url‘ / ‘template_directory‘ -- URL des Verzeichnisses des aktiven Themas. Innerhalb von untergeordneten Designs geben sowohl get_bloginfo ("template_url") als auch get_template () das übergeordnete Designverzeichnis zurück. Erwägen Sie, stattdessen get_template_directory_uri () (für das übergeordnete Vorlagenverzeichnis) oder get_stylesheet_directory_uri () (für das untergeordnete Vorlagenverzeichnis) als Echo zu verwenden.

Ein Beispiel dafür kann zum Beispiel sein, dass man einen Titel haben will. So könnte dies gelöst werden.

<? <title> <?php the_title();?> | <?php bloginfo("name");?> </title; ?>

Auch kann man den Header und Footer von seinem Theme folgender massen holen:

<?php get_header(); ?> <?php get_footer(); ?>

MySQL

MySQL ist eines der wltweit verbreitesten Datenbankverwaltungssysteme. Es ist als Open-Source-Software sowei als kommerzielle Enterpriseversion für verschiedene Betriebssysteme verfügbar und bildet die Grundlage für viele dynamische Webauftritte. MySQL wird häufig in Verbindung mit dem Webserver Apache und der Skriptsprache PHP eingesetzt.

MySQL Management Tool (PHPMyAdmin)

Plugins

Generell versteht man unter dem Begriff Plugin eine Erweiterung für ein Software-Programm, womit dieses zusätzliche Funktionen erhält. Aber meistens wird heutzutage mit "Plugin" ein WordPress-Plugin, also eine Erweiterung oder ein Modul für die Blogsoftware WordPress bezeichnet.
Im Plugin-Verzeichnis von WordPress gibt es tausende von Plugins welche zum Download bereit stehen.
Hier sind die wichtigsten Plugins nochmal aufgelistet:

Plugin Funktion
Contact Form 7 Kontakformulare erstellen
Yoast SEO Optimiert Webseiten für Suchmaschinen
WP Globus Plugin zur Hilfe der Webseitenübersetzung in anderen Sprachen
Elementor Plugin zur Hilfe des designen der Webseite
WPS Hide login ändert die Login URL zum Schutz gegen Hacker

Benutzerrollen

In WordPress kann man fünf verschiedene Benutzerrollen anlegen, und zwar Abonnent, Mitarbeiter, Autor, Redakteur und Administrator.

Benutzerrollen Rechte
Abonnent
  • Hat die wenigsten Rechte
  • Verfolgt den Blog und darf kommentieren
Mitarbeiter
  • Darf eigene Artikel verfassen, jedoch nicht veröffentlichen
  • Darf keine Seiten erstellen
  • Starke Einschränkungen
  • Darf keine Fotos oder Videos hochladen
Autor
  • Darf eigene Artikel verfassen und veröffentlichen
  • Darf Fotos und Videos hochladen
  • Kann Kommentare zu den eigenen Artikeln freischalten
Redakteur
  • Darf Seiten und Artikel erstellen sowie veröffentlichen
  • Kann Kategorien und Schlagwörter anlegen sowie bearbeiten
  • Kann Artikel anderer Nutzer (Ausnahme Administrator) bearbeiten und freischalten
Administrator
  • Kann in jedem Bereich der WordPress-Seite aktiv sein
  • Kann andere Administratoren löschen, Benutzerrollen ändern oder neue Benutzer anlegen
  • Mächtigste WordPress-Benutzerrolle

Backup and Restore

Wichtig für die Sicherheit einer Webseite ist es, regelmässig ein Backup zu erstellen. Dies kann gemacht werden, indem man am besten den gesamten Wordpressordner, welcher sich im htdocs befinden, kopiert und an einem anderen ort ablegt. Es empfiehlt sich den Ordner mit Name und Datum anzuschreiben. Für ein vollständiges Backup, benötigt man auch die gesamte Datenbank, welche sich im phpmyadmin befindet. Diese kann als SQL File exportiert werden und zum Backup hinzugelegt werden. Um seine Webseite wieder herzustellen, muss man die SQL datei in die Datenbank importieren und das Backup der Homepage wieder in den htdocs-Ordner bewegen.