← SEGERT BLOG

→

Webdesign-Glossar (mit Blick auf das geniale CMS ExpressionEngine)

Meine Angebote für Webdesign-Leistungen mit Konzeption, Design und CMS ExpressionEngine sind differenziert. Fachbegriffe lassen sich nicht vermeiden. Deshalb schicke ich mit meinen Angeboten seit 2014 ein Webdesign-Glossar als PDF mit. Das ist eine gute Sache und wird gerne angenommen. Und da Webtechniken ständig voranschreiten, wird das Glossar immer mal wieder erweitert mit verständlich erklärten Begriffen. Über neue Begriffe informiere ich an dieser Stelle.

Addon: Siehe unter Plugins.

Administrator (ExpressionEngine)

In einem Content Management System hat der Administrator (auch Super-Admin genannt) sämtliche Rechte, um das System zu konfigurieren, zu erweitern und anzupassen und sämtliche Inhalte zu editieren. Im besten Fall weiss der Super-Admin, wie Layout und Funktionalitäten der Website ausgebaut werden können.
Allgemein ist ein Administrator für die Pflege und Konfiguration von Software-Systemen wie zum Beispiel einem Webserver zuständig. Bei technischen Problemen ist er der erste Ansprechpartner.

Accordion

Im Webdesign ist ein "Accordion" eine Element der Benutzeroberfläche von inhaltsreichen Webseiten. Gleichzeitig ist sie eine Technik, um Inhalte platzsparend darzustellen. Ein Accordion besteht aus einer Liste von Abschnitten oder Panels, wobei jeder Abschnitt einen Titel und einen Inhalt hat. Die Inhalt eines Abschnitts ist zuerst verborgen. Der Benutzer kann dann durch Klicken auf so einen Titel den Inhalt darunter anzeigen oder ausblenden lassen.

Das Accordion-Design wird zum Beispiel gerne für FAQ-Seiten eingesetzt. Auch dieses Glossar organisiert die Inhalte über ein Accordionfunktion. Typischerweise wird das Accordion-Element in Kombination mit HTML, CSS und JavaScript implementiert. CSS wird verwendet, um das Aussehen und die Animationen zu gestalten, während JavaScript die Interaktivität ermöglicht, indem es die Anzeige der Inhalte steuert.

Alt-Text

Der Alt-Text ist eine Abkürzung für alternativen Text mit denen grafische Elemente wie Fotos im HTML-Code ausgezeichnet werden. Die Texte helfen Suchmaschinen bei Indexierung von Bildern und sind ein wichtiger Bestandteil des barrierefreien Webdesigns, eben weil Alt-Texte blinden und sehbehinderten Menschen Hinweise auf die Funktion und den Inhalte der Grafiken geben. So kann zum Beispiel ein Foto kurz beschrieben werden. Das sorgt für Teilhabe an der Website, auch wenn der Besucher die Bilder nicht sehen kann.

Blog / Weblog

Ist eine Website oder Teil einer Website, in der Verlage, Firmen, Privatpersonen regelmäßig Inhalte zu mehr oder weniger speziellen Themen veröffentlichen (auch englisch „posten“ genannt). Die Beiträge können in den meisten Fällen von Besuchern kommentiert werden. Ein Blog wird nach Datum organisiert, die aktuellsten Beiträge stehen sinnvollerweise meistens oben.
Mit ExpressionEngine kann man schnell und einfach Bloginhalte ganz oder teilweise auch in anderen Bereichen der Web-Site wie zum Beispiel der Startseite unterbringen. Das kann dann nur der Titel sein und nur die drei neuesten Einträge. Das ist frei und flexibel bestimmbar.

Browser

Das ist die Software, mit der Internetnutzer „durch das Web surfen“ können. Auf Windows heißt der Browser „Edge“, auf Apple-Systemen Safari. Weit verbreitet sind die Browser Firefox und Chrome (von Google). Eine kleine Gemeinde nutzt auch Opera oder den Chrome-Klon Brave, der sich auf die Fahne geschrieben hat, dem gläsernen Surfer entgegenzuwirken.
Ich arbeite beim Webdesignen vorwiegend mit Chrome und teste zwischendurch immer mal wieder die Arbeitsfortschritte mit Firefox und Safari.

Channel

Ein Channel bezeichnet in ExpressionEngine einen Inhaltsbereich, in dem Inhalte strukturiert, sortiert und unter Kategorien abgelegt werden können. Channels sind beliebig anlegbar und sehr differenziert zu konfigurieren, das kommt ganz auf die Inhalte der Hauptbereiche einer Website an. Bereiche können sein: Aktuell, Presse, Projekte, Jobs, Standorte, Produkte.

Coding

Allgemeiner Begriff für die Programmierung von Software oder einer Website. Handelt es sich um die Umsetzung einer Website mit HTML und CSS, spricht die Fachwelt lieber von Coding, da HTML und CSS keine Programmier- und keine Scriptsprachen sind.
Programmierung fängt mit Scriptsprachen wie Javascript, PHP etc. an, da hierfür in der Regel auch logische Abläufe und Abfragen mitentwickelt werden, zum Beispiel für Shopsysteme und interaktive Elemente. Das trifft für das Coding von HTML und CSS nicht zu, da sie „nur“ Formatierungssprachen sind, die dem Browser sagen, wie eine Website aussehen soll.
Aber handerstelltes CSS-Coding ist eine Kunst für sich, die für heutige responsive Anforderungen einen umfassenden Erfahrungsschatz voraussetzt.

Content Management System

Eine Software, die auf Webservern installiert wird und es dem Betreiber der Website erlaubt, Inhalte der Website ohne technische Kenntnisse zu pflegen und zu erweitern. Ein CMS ist unverzichtbar für mittlere bis große Websites. Es erleichtert das Veröffentlichen und Strukturieren von Inhalten wesentlich und beschleunigt dies. Es gibt zahlreiche Systeme, die oftmals kostenfrei sind und unterschiedliche Anforderungen bedienen.
Sehr weit verbreitet ist WordPress. Es hat den Ruf, nicht das sicherste zu sein. Das ist auch einer Gründe, warum ich 2009 auf ExpressionEngine umgestiegen bin, das bereits zahlreiche Sicherheitseinstellungen an Bord hat. Mehr über Vorteile von ExpressionEngine.

CSS

Abkürzung für Cascading Style Sheets. CSS ist eine Auszeichnungssprache, die seit 1993 in der Entwicklung ist und sich auch hierzulande ab den frühen Nullerjahren bei Webdesignern durchsetzte. CSS wurde für die Gestaltung von Websites entwickelt. Ziel: Das Design strikter von der eigentlichen Strukturierung der Inhalte durch HTML zu trennen. Dadurch werden die Inhalte auch für Geräte zugänglicher, die die Formatierung (das Design) nicht lesen können, wie zum Beispiel Suchmaschinen oder Screenreader (für Menschen mit Sehbehinderung).
CSS ist heute ein unverzichtbarer Bestandteil der Webentwicklung und ein mächtiges Werkzeug, mit dem zum Beispiel Animationen programmiert werden können. Mein CSS ist handmade.

CSS-Präprozessor

CSS-Präprozessoren sind Entwicklerwerkzeuge, die die Funktionalität von Cascading Style Sheets (CSS) erweitern. Entwickler können damit effizienter und strukturierter arbeiten. Bei professioneller Anwendung verbessern Präprozessoren auch die Wartbarkeit und Lesbarkeit des CSS-Codes.
Die beliebtesten CSS-Präprozessoren sind Sass (Syntactically Awesome Stylesheets) und Less.

Editor

Mitarbeiter, die für die inhaltliche Pflege einer Website verantwortlich sind und dafür mehr oder weniger eingeschränkte Rechte innerhalb eines Content Management System bekommen, um Inhalte zu editieren und Bilder und Dateien zu veröffentlichen. Man spricht von Online-Redakteuren.
Im CSM ExpressionEngine können für Redakteure sehr differenziert Rechte vergeben werden, da das CMS eine mächtige Mitgliederverwaltung on board hat.

ExpressionEngine

ExpressionEngine ist ein Content-Management-System (CMS) und ein Webentwicklungs-Framework, das von EllisLab entwickelt wurde. Es ermöglicht die Erstellung und Verwaltung von Websites und Webanwendungen durch eine benutzerfreundliche Schnittstelle.
ExpressionEngine bietet Flexibilität in der Gestaltung von Inhalten. Es kann sowohl für Blogs als auch für komplexe Unternehmenswebsites eingesetzt werden. ExpressionEngine zeichnet sich durch eine modulare Architektur aus, die es Entwicklern ermöglicht, Funktionen nach Bedarf hinzuzufügen oder anzupassen. Mit seiner Template-Engine können Benutzer das Design ihrer Websites effektiv steuern. Zudem unterstützt das CMS eine Vielzahl von Feldertypen für Texte, Bilder, Videos, Daten in Grids und viele mehr.
ExpressionEngine wird von mir als Webentwicklern sehr geschätzt, da es für viele Webprojekte eine individuelle und erweiterbare Lösung ist, die zudem hohen Sicherheitsansprüchen gerecht wird.
Weitere Informationen im Artikel Vorteile des CMS ExpressionEngine für Kunden, Designer und Webentwickler

Formular

Bekannte Beispiele für ein Formular sind Kontakt- und Bestellformulare. Formulare bestehen immer aus einem Set bestimmter Felder. Formulare werden deshalb auch in Content Management Systemen eingesetzt. In die dort aufgeführten Felder können Editoren bestimmte Inhalte eintragen und veröffentlichen.
ExpressionenEngine enthält sehr viele Feldertypen für alle möglichen Inhaltstypen. Damit kann man schnell individuelle und selbsterklärende Formulare konzipieren und umsetzen. Informationsarchitekten werden ihre Freude haben.

Geräteübergreifend

Im mobilen Zeitalter ist geräteübergreifend eine Anforderung an Websites, so daß sie sowohl auf großen Monitoren wie auch auf Tablets, Smartphones und Screenreades ohne Einschränkungen funktionieren und professionell aussehen.

HTML

Abkürzung für Hypertext Markup Languages. HTML wird definiert als Auszeichnungssprache, die Inhalte für das Web strukturiert. Mit HTML wurde 1989 im Prinzip das Web erfunden. HTML erlaubte das Teilen und Verlinken von Dokumenten im Internet. Wikipedia schreibt dazu:
„Um Forschungsergebnisse mit anderen Mitarbeitern der Europäischen Organisation für Kernforschung (CERN) zu teilen und von den beiden Standorten in Frankreich und in der Schweiz aus zugänglich zu machen, entstand 1989 am CERN ein Projekt, welches sich mit der Lösung dieser Aufgabe beschäftigte. Am 3. November 1992 erschien die erste Version der HTML-Spezifikation“

Informationsarchitektur

Ist ein Fachgebiet des User Experience Design, in der Regel abgekürzt als UX-Design: Informationsarchitektur (IA) sammelt, sichtet und hinterfragt die Inhalte, ordnet und strukturiert sie, sucht verständliche Bezeichnungen und dokumentiert die Resultate. Sie kennt viele Typen der Navigation und erstellt die Navigationsstruktur einer Website. Zentrales Ziel der IA ist: Der Benutzer soll sich ohne Nachdenken und Hindernisse die Inhalte einer Website erschliessen können, seien die Inhalte auch noch so komplex und vielfältig.

JavaScript

Eine Scriptsprache, die mit ihrer Entwicklung ab 1995 HTML-Seiten dynamischer machen sollte. JavaScript ermöglicht die Interaktion mit HTML-Dokumenten. Damit können Entwickler dynamische Inhalte erstellen, Benutzerinteraktionen verbessern und das Erscheinungsbild von Webseiten verändern, ohne die Seite neu laden zu müssen.
JavaScript ist aus der Webentwicklung nicht mehr wegzudenken. Es wird für Desktopanwendungen und Spiele im Browser, für Chatbots, für das Internet der Dinge (IoT) und vieles andere eingesetzt.

Konfiguration

Konfiguration im Zusammenhang mit einem Content Management System wie ExpressionEngine heißt: Zahlreiche Einstellungen vorzunehmen, um das System benutzbar und sicher zu machen und auf die Anforderungen des Kunden hin einzurichten. Es heißt zudem, ein Design zu integrieren, eine Navigation aufzubauen und die Templates zu programmieren.

Layer

Der Begriff stammt ursprünglich aus der Software-Architektur, wird aber seit einigen Jahren auch von Webdesignern verwendet. Ein Layer ist ein Fenster im Browser, das sich über den Hauptinhalt der Webseite legt. Es öffnet sich entweder bildschirmfüllend oder begrenzt und kann im besten Fall schnell wieder geschlossen werden. Layer enthalten oftmals Bilder zum Durchklicken, strukturierte Kurz-Informationen oder Login-Felder.

Performance

Die Ladezeit einer Website hat in der mobilen Zeit wieder eine größere Bedeutung bekommen. Entsprechend sind die differenzierten und zum Teil aufwendigen Techniken zur Steigerung der Performance ein wichtiger Bestandteil des Webdesigns.

PHP

PHP ( Hypertext Preprocessor) ist eine populäre und frei verfügbare Scriptsprache, mit der häufig Content Management Systeme, Shop-Software und andere Webanwendungen programmiert werden.
Das CMS ExpressionEngine ist mit PHP geschrieben und kann damit auch um Funktionen erweitert werden.

Plugin

Zusatzsoftware (auch Addons genannt), die zum Beispiel die Funktionen von Content Management Systemen erweitert. Es gibt kostenlose und kostenpflichtige Plugins. Ein CMS, in dem häufig und viele Plugins zur Erweiterung der Funktionalität zum Einsatz kommen, ist WordPress, was die Anfälligkeit für Sicherheitslücken beträchtlich erhöht und auch den Nachteil hat, dass Bereiche der Website nicht mehr aktualisiert werden könnten, wenn das Plugin veraltet ist und nicht mehr aktualisiert wird, was wiederrum das Sicherheitsrisiko noch zusätzlich erhöht.
ExpressionEngine braucht Addons von Dritten dagegen nur für ganz spezielle Anwendungen (für Online-Shops, Foren usw). Von der Bildergalerie über Kalenderfunktionen und Formular bis hin zur Mehrsprachigkeit läßt sich vieles mit Bordmitteln realisieren.

Programmierung

Dient der Herstellung von Software mit Hilfe von Programmiersprachen. Programmierung ist Software-Entwicklung. Auch Webanwendungen wie Webshops und Content Management Systeme werden programmiert; und ihre Einrichtung (Konfiguration) verlangt oftmals weitere, individualisierte Programmierarbeit.

Prototyp(en)

Der Prototyp hat sich im Webdesign mit Aufkommen und Akzeptanz mobiler Websites und Apps durchgesetzt. Er zeigt dem Kunden das Grund-Design von Websites und wie diese auf verschiedenen Geräten wie PC und Smartphone aussehen und wirken werden. So kann der Gestaltungsprozess agiler gestaltet werden und nachträgliche Änderungen ohne teuren Mehraufwand realisiert werden. Für größere Projekte unverzichtbar.

Onepager

Ein Onepager ist eine Website, die aus einer einzigen HTML-Seite besteht. Im Gegensatz zu traditionellen mehrseitigen Websites, auf denen verschiedene Inhalte auf verschiedenen Seiten verteilt sind, werden bei einem Onepager alle Informationen auf einer einzigen Seite präsentiert. Dabei scrollt der Benutzer einfach nach unten, um verschiedene Bereiche mit unterschiedlichen Inhalten wie Startbegrüßung, Leistungen, Kontaktinfos und mehr zu sehen.

Onepager kommen mir als Minimalist mit besonderem Blick auf Benutzerfreundlichkeit sehr entgegen. Er eignet sich für Websites, die nur begrenzte Informationen oder eine klare Botschaft vermitteln möchten. Sie sind für kleine Firmenpräsenzen, Portfolios, Landingpages, Veranstaltungsseiten und so weiter geeignet.

Responsive

Das englische Wort für reaktionsfähig. Meistens wird in english von „responsive Web Design“ gesprochen. Im Prinzip sind das Websites, die sich unabhängig von der Größe und Breite eines Displays oder Browsers fliessend anpassen, also reaktionsfähig sind.

RSS

Abkürzung für Really Simple Syndication. Das ist ein Dateiformat, das von RSS-Readern gelesen werden kann. Diese Dateien werden Feeds genannt. In Ihnen speichern Websites neue Beiträge ab. Hat ein Interessent diesen Feed in seinem RSS-Reader „abonniert“, kann er die Neuigkeiten lesen, ohne die Website besuchen zu müssen. RSS-Reader gibt es als kostenfreie Software für PC- und Mac-Computer, Tablets und Smartphones.

Scripte

In vielen Fällen sind Scripte Dateien, die Anweisungen in einer Scriptsprache enthalten, um bestimmte Funktionen und Abläufe auf Websites zu realisieren. Einfaches Beispiel: Ein Script überwacht in einem Kontaktformular, ob alle notwendigen Felder ausgefüllt worden sind. Wenn nicht, wird eine Fehlermeldung ausgegeben.

SEO

Abkürzung für Search Engine Optimization. Das heißt Suchmaschinenoptimierung. SEO ist ein eigenständiges Tätigkeitsfeld mit eigener Fachsprache und zahlreichen Techniken und Methoden. Nicht alle sind im Sinne der Suchmaschinen.

Slider

Slider werden gerne auf Startseiten eingesetzt, um eine Reihe von großen Bildern mit kurzen Aussagen anzuzeigen und automatisch zu wechseln. Zwar sind Slider unter Usability-Experten nicht gerade beliebt, doch machen sie durchaus, wenn es darum, zum Beispiel Kunstwerke, Produkte und Infografiken vorzustellen, die der Benutzer schnell durchsliden kann.

Sprungadresse

Ein Link, der es erlaubt, mit einem Klick zu einem unteren Teil einer langen Webseite zu springen. Eine Sprungadresse kann zum Beispiel auch der Link „Zum Seitenanfang“ oder „Nach oben“ sein.

Template

Im Zusammenhang mit meinen Angeboten ist ein Template eine gecodete Datei, die innerhalb eines Content Management Systems (CMS) zum einen das Layout einer Seite enthält und zum anderen Funktionen des CMS bestimmt. Beispiel: Auf der Startseite sollen eine Kurzform der aktuellen Blogbeiträge erscheinen. Dafür muss das Template für die Startseite entsprechend erweitert werden.
Templates im CMS ExpressionEngine sind durch die strikte Trennung von Design, Funktionalität und Inhalt sehr schlank, so dass man auch für komplexe Web-Sites nicht den Überblick verlieren muss. Erfahrene Webentwickler, die mit Templatesprachen vertraut sind, finden hier schnell den Durchblick.

Touchgesten

Touchgesten erlauben das Navigieren auf berührungsempfindlichen Displays, wie sie Tablets und Smartphones haben. Gesten sind konkret zum Beispiel das Wischen von links nach rechts oder das Tippen mit dem Zeigefinger.

URL

URL ist die Abkürzung für Uniform Resource Locator, In der Regel wird der URL in das Adressfeld eines Browsers eingetragen, um eine Website zu besuchen. Ein URL hat in der Regel die folgende Struktur:
Protokoll (z.B. "http://" oder "https://"): Das Protokoll gibt an, wie die Ressource abgerufen werden soll. http:// und https:// sind die am häufigsten verwendeten Protokolle und stehen für die Übertragung von Webseiten über das Hypertext Transfer Protocol, wobei die Variante https die Daten verschlüsselt überträgt und damit für mehr Sicherheit im Web sorgt.
Domain (www.eigene-domain.de"): Die Domain ist die Adresse der Webseite oder einer anderen Ressource im Internet.
Pfad (z.B. "/pfad/ihreressource"): Der Pfad gibt den spezifischen Ort der Ressource auf dem Server an, z.B. ein Verzeichnis.
Parameter (z.B. "?id=123"): Parameter können zusätzliche Informationen übermitteln, wie spezifische Daten für Onlineshops oder andere dynamischen Websites.

Eine sprechende URL ist in ihrer Struktur (dem Pfad) für Menschen leichter verständlich. Statt kryptischer Zeichenfolgen oder numerischer IDs verwendet man dabei Wörter oder beschreibende Begriffe, die den Inhalt oder die Funktion der Webseite repräsentieren. Sprechende URLs sind benutzerfreundlicher und ein Teil der Suchmaschinenoptimierung (SEO). Folgend ein Beispiel für einen sprechenden URL:
https://segert.net/segertblog/thema/barrierefreies-cms

Usability

Usability umfasst die „Gebrauchstauglichkeit“ einer Software, einer mobilen App oder Web-Site. Als Synonym wird auch gerne das Wort „Benutzerfreundlichkeit“ verwendet, obwohl Usability weit mehr als das umfasst.

UX Design

User Experience Design fragt und forscht interdisziplinär nach dem Nutzererlebnis von Produkten und Software. Das UX-Design verlangt einen nach Fachgebieten geordneten Enwicklungsprozess. Der spannt einen Bogen von der Zielgruppenanalyse und dem Anforderungsmanagement über die Nutzerforschung und Informationsarchitektur bis hin zum Informationsdesign und den Techniken der konkreten Umsetzung mit einem mehr oder weniger umfangreichen Usability Testing.

Validierung

Im Zusammenhang mit meinen Angeboten meint Validieren das Aufspüren und Beseitigen von Code-Fehlern mit Hilfe von Validatoren, die frei im Netz benutzt werden können. So kann auch der Kunde überprüfen, ob zum Beispiel der HTML- und CSS-Code fehlerfrei geliefert wurde.

Webfont

Um mehr als nur die üblichen Webschriften benutzen zu können, unterstützen moderne Browser Webfonts. Diese kostenpflichtigen oder kostenfreien Fonts werden auf den Server des Kunden abgelegt und bei Aufruf der Website geladen, damit die Texte in der gewählten Schriftart erscheinen können.
Webfonts können auch von Google-Diensten abgerufen werden, das empfiehlt sich aus datenschutzrechtlichen Gründen aber nicht.

Webstandards

Webstandards meinen die Webtechniken zur Erstellung von Websites und beziehen sich zum Beispiel auf HTML und CSS. Websites, die unter Einhaltung der Webstandards erstellt wurden, haben folgende Vorteile:
- Sie laden schneller, auch weil Inhalt und Design sich in separaten Dateien befinden.
- Sie sind browserübergreifend. Sie funktionieren in allen modernen Browsern.
- Sie sind plattformübergreifend (PC, Apple, Smartphone, Screenreader etc).
- Sie entsprechenden den Anforderungen von Suchmaschinen wie Google.
- Sie machen ein Redesign leichter. Farben, Schriften etc. sind schnell änderbar.
- Sie sind einfacher zu pflegen.

Website

Die Website (auch Web-Site) umfasst die Gesamtheit der Seiten eines Webprojektes. Die „Homepage“ dagegen meint nur die Startseite. Mit „Seite“ oder „Webseite“ ist in diesem Angebot immer eine ganz konkrete Seite innerhalb der gesamten Website gemeint, zum Beispiel die Seite mit den Blogbeiträgen oder Downloads.

\\\ Update: 15.02.2024 Angelegt: 04.11.2023 Rubrik: Grafik- & Webdesign Views: 712

Blog-Startseite /// Rubrik Grafik- & Webdesign