Kategorie: Webentwicklung

Beiträge zu CSS, Stylesheets und Joomla Vorlagen

Kategorien
Wordpress

Einführung in WordPress Themes

Wordpress Logo Schwarz/Weiss

Einleitung

WordPress ist eine kostenlose Open-Source-Software, die es euch ermöglicht, schnell und einfach eine Website oder einen Blog zu erstellen und zu verwalten. Es ist eine Content-Management-Plattform, die es Benutzern ermöglicht, Inhalte wie Texte, Bilder und Videos zu erstellen und zu veröffentlichen. Dieser Beitrag behandelt eine Einführung in WordPress Themes

Dafür sind keine speziellen Kenntnisse in Webdesign oder Programmierung notwendig.

WordPress ist sehr flexibel und erweiterbar. Es gibt eine Vielzahl von Plugins und Themes, die die Funktionalität und das Aussehen einer Website anpassen können. WordPress ist eine der beliebtesten Content-Management-Systeme weltweit und wird von Millionen von Websites genutzt.

Themes

WordPress Templates, auch als WordPress Themes bezeichnet, sind vorgefertigte Designs um das Aussehen und die Funktionalität einer WordPress-Website zu ändern.
Diese kann der Administrator installieren und verwenden. Ein WordPress-Template besteht aus einer Reihe von Dateien, die die Struktur, das Design und die Funktionalität einer Website bestimmen.

Die Struktur des Templates umfasst den Header (obere Bereich der Website), den Footer (untere Bereich der Website) und den Content-Bereich (der Hauptteil der Website). Das Design wird durch CSS-Dateien gestaltet, die Schriftarten, Farben, Hintergründe, Layout und andere visuelle Aspekte der Website definieren. Die Funktionalität wird durch PHP-Dateien bestimmt. Damit werden die interaktiven Elemente der Website, wie z.B. Formulare, Menüs, Slider und andere Funktionen, bereitgestellt.

WordPress Templates sind in der Regel in der Lage, auf verschiedene Arten von Inhalten zugeschnitten zu sein, einschließlich von Blogs, Portfolio-Websites, Online-Shops und Unternehmens-Websites. Sie können auch anpassbar sein. Das bedeutet der Benutzer kann Änderungen an Farben, Schriftarten, Layout und anderen Aspekten des Designs vornehmen.

Lizenz

WordPress-Templates können kostenlos oder kostenpflichtig sein. Kostenlose Templates können von der offiziellen WordPress-Website oder von Websites Dritter heruntergeladen werden. Kostenpflichtige Templates werden in der Regel von professionellen Designern erstellt und bieten oft zusätzliche Funktionen und Supportleistungen.

Fazit

Insgesamt ermöglichen WordPress Templates es dir als Website-Betreiber, schnell und einfach eine ansprechende Website zu erstellen. Dazu noch ohne umfangreiche Kenntnisse in Webdesign oder -entwicklung zu haben.

Kategorien
Wordpress

WordPress Backup erstaunlich einfach

Wordpress Logo Schwarz/Weiss

Ihr wisst alle wie das ist: “Brauchst du ein Backup, hast du keins!”

In meinen bisherigen Joomla Installationen war zumeisst “Akeeba Backup” im Einsatz.

Das hat ganz gut funktioniert, ein paar Mal musste ich eine Instatnz inklusive Datenbank schon zurücksichern. Nötig hierfür:

  • die gewünschte Backupdatei
  • ein paar Dateien um den Backupprozess zu starten
  • Zugriff auf das Verzeichnis

Unter WordPress habe ich mit UpdraftPlus angesehen. Sehr interessant ist für mich die Aufteilung der Sicherung in verschiedene Themen (Templates, Datenbank, plugins usw.)

Auch die Möglichkeit in der “freien” Version ein Scheduling oder einen Cloudspeicher zu wählen macht das plugin sehr sinnvoll.

Die kostenlose Version von UpdraftPlus sichert Ihre Website perfekt. Wenn ihr mehr Funktionen und Optionen benötigt, könnt ihr die Pro Version kaufen.

Damit erhaltet ihr:

  • Inkrementelle Backups
  • Einfaches Duplizieren oder Migrieren von Websites (mit Migrator)
  • Multisite-/Multi-Netzwerk-Kompatibilität
  • Backups von Nicht-WP-Dateien und -Datenbanken an mehreren entfernten Zielen
  • Mehr Speicherziele (z. B. OneDrive, BackBlaze, Azure, SFTP) und mehrere Ziele
  • Datenbankverschlüsselung
  • Erweiterte Berichterstattung
  • Unterstützung für WP-CLI (das Kommandozeilen-Werkzeug für WordPress)
UpdraftPlus WordPress Backup & Migration Plugin
Kategorien
Joomla Modul

Joomla Modul TransCalc

Joomla Logo flat

Einfach und schnell die theoretische Übertragungsraten berechnen! So wird es in einem Joomla Modul gemacht!

Die Berechnung von Übertragungsraten in der IT hängt von verschiedenen Faktoren ab, darunter die Art des Datenübertragungskanals, die verwendete Technologie und die Übertragungsprotokolle. Hier sind einige gängige Methoden, um Übertragungsraten zu berechnen:

Datenübertragungsgeschwindigkeit (Bits pro Sekunde):

In den meisten IT-Berechnungen wird die Übertragungsgeschwindigkeit in Bits pro Sekunde (bps) angegeben. Um die Übertragungsraten zu berechnen, können Sie die folgende Formel verwenden: Übertragungsgeschwindigkeit (bps) = Datenmenge (in Bits) / Zeit (in Sekunden) Zum Beispiel, wenn Sie eine Datei mit einer Größe von 8 Megabyte (8 * 1024 * 1024 Bytes) in 2 Sekunden übertragen, beträgt die Übertragungsgeschwindigkeit: Übertragungsgeschwindigkeit = (8 * 1024 * 1024 Bytes * 8 Bits pro Byte) / 2 Sekunden = 32 Mbps

Durchsatz (Bits pro Sekunde):

Der Durchsatz ist die tatsächliche Datenrate, die über einen bestimmten Kanal übertragen wird. Er kann niedriger sein als die nominelle Übertragungsgeschwindigkeit aufgrund von Protokolloverhead und anderen Faktoren. Um den Durchsatz zu berechnen, verwenden Sie die Formel: Durchsatz (bps) = Nutzdatenrate (in Bits pro Sekunde) / (1 + Verhältnis von Protokolloverhead)

Übertragungsgeschwindigkeit in Netzwerken:

In Netzwerken können Sie die Übertragungsgeschwindigkeit unter Berücksichtigung von Bandbreite und Latenz berechnen. Die Formel für die Berechnung der theoretischen maximalen Übertragungsgeschwindigkeit in einem Netzwerk lautet: Übertragungsgeschwindigkeit (bps) = Bandbreite (in Hz oder KHz) * log2(1 + Signal-Rausch-Verhältnis) Hierbei bezieht sich das Signal-Rausch-Verhältnis auf die Qualität des Signals, und die Bandbreite auf die verfügbare Bandbreite des Kanals.

Festplattenübertragungsraten:

Um die Übertragungsgeschwindigkeit von Festplatten oder Solid-State-Laufwerken (SSD) zu berechnen, können Sie die Formel verwenden: Übertragungsgeschwindigkeit (Bytes pro Sekunde) = Datenmenge (in Bytes) / Zeit (in Sekunden) Beachten Sie, dass die tatsächliche Übertragungsgeschwindigkeit von Festplatten auch von Faktoren wie der Dateigröße und der Anordnung der Daten auf der Festplatte abhängt.

USB-Übertragungsraten:

Die USB-Übertragungsraten können je nach USB-Standard (z. B. USB 2.0, USB 3.0, USB 3.1) variieren. Die maximale theoretische Übertragungsgeschwindigkeit eines USB-Standards ist in der Spezifikation angegeben.

Es ist wichtig zu beachten, dass die tatsächliche Übertragungsgeschwindigkeit in der Praxis oft niedriger ausfallen kann als die theoretischen Werte, aufgrund von Protokolloverhead, Störungen und anderen Faktoren. Die oben genannten Berechnungsmethoden dienen zur Abschätzung der Übertragungsraten und können bei der Planung von IT-Infrastrukturen und Netzwerken hilfreich sein. Dafür habt ihr jetzt sogar ein Joomla Modul.

Weiterlesen “Joomla Modul TransCalc”
Kategorien
Wordpress

WordPress mit Plugins erweitern

Wordpress Logo Schwarz/Weiss

Nächste Schritte

Wie ging es bei mir nach der erfolgten WordPress Installation weiter? Nachdem ich mich auf der WordPress Instanz erst einmal umgesehen hatte erfolgte eine manuelle Installation.

Warum?

Um das System besser zu verstehen hat mich der Setup-Vorgang interessiert und um zu sehen, was tut denn das Setup! Fazit: Nicht viel anders als bei vergleichbaren CMS Systemen.

Für die meine Verwendung habe ich folgende Plugins installiert.

  • Otter Blocks (lite) – Otter Blocks ist überhaupt das tollste was ich im letzten Jahr gesehen habe.
  • Antispam Bee
  • Complianz | GDPR/CCPA Cookie Consent
  • Quick Download Button
  • Simple Lightbox
  • WP-Optimize – Clean, Compress, Cache
  • WP Forms lite
  • WP Mail SMTP

Jetzt kann es endlich losgehen!

Kategorien
Joomla Modul

Joomla Modul für einen AMZN Banner

Joomla Logo flat

Installation als Joomla Modul

Amazon bietet ein brilliante Anzahl an Werbemittel für Affiliates an. Da kann man leicht die Übersicht verlieren. Neben normalen Produktlinks und Deeplinks gibt es auch noch Banner und Widgets.

Was sind Werbebanner?

Sie dienen Werbezwecken, oft mit auffallenden Animationen und mit einem Link zu einer bestimmten anderen Website.

Was ist ein Widget?

Zusammenfassend ist ein Widget ein Element auf dem Bildschirm eines Tablets oder Computers, welches Sie interaktiv nutzen können.

Dieses Modul dient zum Anzeigen eines Amazon Self Optimizing Banners. Alle Groessen die Amazon anbietet sind möglich (180×150,468×60,600×520 usw. ) und alle Einstellungen koennen ueber die Modulparameter gesetzt werden. Eingetragen muss nur die jeweilige Partner-ID von Amazon.

Der gesamte Container liegt in einer DIV-Box die sich durch die Angabe eines Klassensuffixes über die CSS-Datei des Templates formatieren lässt. Die Anzeige des Backlinks lässt sich durch den Parameter “Backlink anzeigen” steuern.

3 kB

Kategorien
Joomla Modul

Joomla Modul – Self Optimizing Links

Joomla Logo flat

Self Optimizing Links mit Joomla

Werbung, die sich gezielt dem Inhalt einer Joomla Seite anpasst. Bisher konnte man die Amazon-Werbung nur schwer an die Inhalte einer Site anpassen.

Man musste sich immer genau auf spezifische Produkte festlegen und die Werbeblöcke, die wechselnde Produkte anzeigen sollten, zeigten häufig immer das Gleiche an.

Die „Self-Optimizing-Links“ passen sich in Joomla nach einiger Zeit an die Inhalte der Seite an. Als Betreiber einer Website mit tausenden von DVD-Rezensionen braucht man nur ein einziges Mal den HTML-Code der Self-Optimizing-Links in das Template/Seite/Beitrag einfügen

In Abhängigkeit des angezeigten Contents werden dann automatisch die passenden Produkte von Amazon.de angezeigt.

Die Einstellungen können über Parameter gesetzt werden.
Eingetragen muss die jeweilige Partner-ID. 

https://partnernet.amazon.de

3 kB

Kategorien
Webentwicklung

Super HTML 8.0 Web Studio

Prozess Pyramide

Super HTML 8.0 Web Studio (S-HTML) ist ein professioneller, deutschsprachiger HTML/Webeditor, der unter anderem zur Erstellung von Homepages, Webseiten und Webanwendungen geeignet ist.

S-HTML ist in erster Linie ein Code-basierter Editor, der volle Kontrolle über den Quellcode und damit maximale Flexibilität und Präzision bietet. Speziell für HTML-Dokumente steht aber auch ein bequemer WYSIWYG-Modus (What you see is what you get) zur Verfügung, der besonders für Anfänger mit wenig HTML-Kenntnissen geeignet ist.

Das Programm unterstützt alle gängigen Sprachen aus dem Webumfeld wie HTML, XHTML, XML, CSS, JavaScript, PHP, Perl, WML u.v.m. und ist damit ein unverzichtbares Werkzeug für jeden professionellen Webentwickler.

Weiterhin ist Super HTML vollständig Unicodefähig und kann Dokumente für alle Zeichensätze und Sprachen bearbeiten und erstellen (ANSI, UTF-8 und UTF-16).

Vor allem aber zeichnet sich SuperHTML durch seine sehr übersichtliche und gut strukturierte, anpassbare Benutzeroberfläche aus, bei der alle Funktionen dort zu finden sind, wo man sie erwartet. Mit zahlreichen Assistenten und Hilfsfunktionen greift das Programm dem Benutzer unter die Arme, so dass sich auch komplexere Aufgaben deutlich leichter bewältigen lassen. Viele weitere, leistungsfähige Komfortfeatures wie ein vollwertiger, integrierter (S)FTP-Client, ein Tag Inspektor, eine integrierte HTML-Referenz sowie eine Textbausteinverwaltung mit Tastaturshortcuts runden das Programmpaket ab.

In der Version 8.5 wurden insgesamt über 100 verschiedene Ideen, Anregungen und Vorschläge von Anwendern der Vorgängerversionen umgesetzt.

Ein Download des Tools ist bei chip.de möglich. (Stand 2023)

Systemvorraussetzungen

  • IBM-kompatibler PC
  • 30 MB freier Festplattenspeicher
  • 256 MB RAM
  • Auflösung min. 800 x 600 Pixel mit min. 256 Farben.
  • Microsoft Windows (9x/ME/NT/2000/XP oder Vista) mit Internet Explorer ab Version 5.0
  • Empfohlen: Windows XP oder Windows Vista mit Internet Explorer 6.0 oder 7.0 oder höher.
Weiterlesen “Super HTML 8.0 Web Studio”
Kategorien
Stylesheets Webentwicklung

Flexible Layouts in HTML mit CSS

Das CSS Flexible Box Layout zeigt neben CSS Grid eine der beiden wesentlichen Möglichkeiten zur Gestaltung von Layouts mit CSS auf.

Im Gegensatz zu älteren Techniken wie Floats wird Flexbox für die Erzeugung von responsiven Layouts bereitgestellt. Es stehen mit flexiblen Layouts sehr eine Vielzahl an Möglichkeiten der Gestaltung zur Verfügung.

Wie funktioniert CSS Flexbox?

Flexbox arbeitet mit einem Container-Element und den darin enthaltenen Child Elementen in der ersten Ebene (Flex-Items). Der Flexboxcontainer wirkt auf eine Ebene. Weitere Ebenen abwärts werden nicht unterstützt.

Bei den Container Elementen kann es sich um <div> Elemente oder auch um Listen handeln. Hier ein Beispiel mit Listenelementen, in der realen Darstellung ist es nicht in Graustufen gehalten..

Flex Layout
Flex Layout

Eigenschaften der Flex-Box

Elemente können mittels der Eigenschaften justify-content, align-items auf den Achsen (vertikal und horizontal) positioniert werden. Die Ausrichtung auf der horizontalen kann mit flex-direction angepasst werden.

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>Flexible Darstellung</title>
	<style>
		ul {
			font-family: sans-serif;
			display: flex;
			justify-content: space-around;	
			margin: 5rem;
			border: 1px solid #BBBBBB;
			background-color: #595873;
			padding: 0px;
			width: 35rem; 
			list-style-type: none;
		}
		li {
			box-sizing: border-box;
			margin: 0px;
			border-right: 0px solid #FFFFFF;
			text-align: center;
		}
		li:last-of-type {
			border-right: none;
		}
		a {
			display: block;
			padding: 1rem;
			background-color: #567482;
			color: #FFFFFF;
			text-decoration: none;
		}
		a:hover, a:focus {
			background-color: #CCCCCC;
			color: #000000;
		}	
	</style>
</head>
<body>
  <nav>
  <ul>
    <li><a href="#" title="Anfang">Anfang</a></li>
    <li><a href="#" title="Beiträge">Beiträge</a></li>
    <li><a href="#" title="Kontaktformular">Kontaktformular</a></li>
    <li><a href="#" title="Impressum">Impressum</a></li>
  </ul>
</nav>
</body>
</html>

Die Eigenschaft display:flex erzeugt die Flexbox generell.

Die weiteren Eingenschaften lauten:

  • flex-direction: row (links nach rechts = Standardwert)
  • flex-direction: column (oben nach unten)
  • flex-direction: row-reverse (rechts nach links)
  • flex-direction: column-reverse (unten nach oben)

Flex Elemente

Neben der Positionierung über den Flex-Container können auch die Items innerhalb des Containers angepasst werden. Entweder mit Hilfe der klassischen CSS-Angaben für Größe und mittels eines Box Models. In der CSS Flexbox dienen die Eigenschaften flex-basis, flex-grow und flex-shrink zur Beeinflussung der Größe. Mit den verschiedenen flex-Werten kann das gewollte Layout innerhalb des Flex Containers erzeugt werden.

Kategorien
Stylesheets Webentwicklung

RGBa – Werte für RGB und Alphakanal

RGBa steht für Red-Green-Blue-alphachannel, also einem Quadrupel aus drei Farbwerten (Rot, Grün und Blau) und einem Transparenzwert (Alphakanal).

Damit stellt es eine Weiterentwicklung des schon bekannten RGB Farbraumes dar und unterscheidet sich im Wesentlichen nur durch den vierten Kanal.

https://www.w3schools.com/css/css_colors_rgb.asp

Kategorien
Stylesheets Webentwicklung

Flash of unstyled content

CSS Programming Image

CSS Unterstützung.

Nicht immer halten die Browser das was versprochen wird. Immer wieder gibt es Probleme (flash) in der Darstellung zwischen den einzelnen Browsern, welche es dem Webdesigner schwer machen sein Projekt umzusetzen. Hier auf diesen Seiten habe ich einige häufige Probleme gesammelt. Natürlich biete ich auch Lösungen an. Konzentriert habe ich mich dabei nicht auf sog. “Hacks” sondern eher auf eine Umgehung bzw. “schöne” Lösung des aufgetretenen Problems.

Weiterlesen “Flash of unstyled content”