Homepageerstellung

HTML / CSS Editor

Browsererweiterungen

  • HTML-Editor WebStudio: Firefox
    WYSIWYG HTML Editor
  • ConstEdit Word Processor: Chrome
    WYSIWYG HTML Editor inkl. Spracheingabe (Spracherkennung)
  • Text Editor: Firefox, Chrome
    Texteditor + Sourcecodeeditor inkl. Speicherung als Datei
  • Visual CSS Editor: Chrome
    Format und Layout direkt ändern + Export von generiertem CSS (nicht für WordPress Seiten)
  • Live editor for CSS: Firefox, Chrome
    CSS Editor für angezeigte Webseite mit Maus-Auswahl von CSS Selektor
  • Stylebot: Firefox, Chrome
    WYSIWYG CSS Editor für angezeigte Webseite mit Maus-Auswahl von CSS Selektor
  • CSS Spider: Firefox, Chrome
    Anzeige von CSS zu Element unter Mauszeiger + Kopieren / Export zu CodePen
  • CSSViewer: Firefox, Chrome
    Anzeige von CSS zu (hervorgehobenem) Element unter Mauszeiger
  • CSS Peeper: Chrome
    Anzeige Schriftarten / Farben / Medien + CSS zu (hervorgehobenem) Element unter Mauszeiger
  • CSS Scanner: Chrome
    Anzeige von CSS zu (hervorgehobenem) Element unter Mauszeiger
  • CSS Selector Capture Pro: Chrome
    Anzeige von CSS Selektot zu (hervorgehobenem) Element unter Mauszeiger
  • Selector Finder: Chrome
    Anzeige von CSS Selektot zu (hervorgehobenem) Element unter Mauszeiger
  • ABBAdata CSS Selector Finder: Chrome
    Anzeige von CSS Selektot zu (hervorgehobenem) Element unter Mauszeiger

Onlinetools


CMS

CMS … Content Management System

Standardwebserver

LAMP … Linux + Apache + MySQL + PHP

Webserver mit besonderen Anforderungen

Flatfile CMS

… mit PHP, aber ohne Datenbankbedarf!

Übersicht allgemein

Spezialisierte CMS

Wiki

Online CMS

… kein eigener Server oder Installation erforderlich


Webshop

Online Webshop


Eigenprogrammierung

Datenbanken

Für Anzeige und Bearbeitung von Struktur und Inhalten siehe auch Datenbankzugriff

Weberweiterungen


Ressourcen / Wissen

Für Farben siehe Bildbearbeitung => Farben-Management

Onlinegeneratoren / Konverter

Browsererweiterungen

  • Flipsum Ipsum: Firefox, Chrome; LoremGen: Firefox, Chrome; Lipsum Generator: Chrome;
    Yet Another Lorem Ipsum Generator: Chrome;
    Simple Lorem Ipsum Generator: Chrome;
    Blindtext-Generator für rasche Inhaltsbefüllung via Kopieren und Einfügen
  • Lorem: Firefox, Chrome; Loremizer: Firefox, Chrome; LoremIpsumReplacer: Chrome
    Webseitentext mit Blindtext ersetzen – z.B. für Screenshot ohne vertrauliche Inhalte
  • Dummy Form Filler: Firefox, Simple Lorem Ipsum: Firefox
    Yet Another Lorem Ipsum Generator: Chrome
    Blindtext-Generator für rasche Inhaltsbefüllung von Formularen
  • Content Security Policy (CSP) Generator: Firefox, Chrome
    Analyse bestehender Website + Erstellung von (möglichem) Content-Security-Policy HTTP Header
  • Laboratory: Firefox, Chrome
    Analyse bestehender Website + Erstellung von (möglichem) Content-Security-Policy HTTP Header

Schriftarten / Fonts

Installationsanleitung für Windows 10

Für lokale Schriftverwaltung siehe Bürotools => Font-Management

Online-Konverter

Browsererweiterungen

Unicode – Sonderzeichen & Emojis

Browsererweiterungen

  • Special Characters: Firefox; Symbol Finder: Firefox, Chrome
    Unicode-Sonderzeichen zum Kopieren und Einfügen
  • Special Characters: Chrome
    Unicode-Sonderzeichen inkl. weltweite Sprachfamilien zum Kopieren und Einfügen
  • Keyboard.cool: Firefox, Chrome
    Emojis und Unicode-Sonderzeichen zum Kopieren und Einfügen
  • Emoji: Firefox; EmoBoard: Chrome
    Emojis zum Kopieren und Einfügen
  • Character Identifier: Firefox; Unicode Analyzer: Chrome
    Kontextmenü für Unicode-Eigenschaften ausgewählter Zeichen

Bilder & Icons

Bildagenturen (zahlungspflichtig)

Beispiele für Anbieter und Preise als Orientierungshilfe (ohne jede Gewähr)


Websiteanalyse + SEO Tools

Für Umsetzung von Optimierungsmaßnahmen siehe auch WordPress

Browsererweiterungen

  • Update Scanner: Firefox, Site Delta Watch / Highlight: Firefox / Firefox, Visualping: Chrome
    Web pages scanner: Firefox, Check4Change: Firefox
    Webseiten auf Änderung prüfen/überwachen
  • BuiltWith: Firefox, Chrome, Wappalyzer: Firefox, Chrome
    verwendete Technik inkl. Webserver und CMS der angezeigten Webseite
  • Check WordPress Version: Firefox, WordPress Version: Chrome
    WordPress Version (soweit ersichtlich) von WordPress Webseite anzeigen
  • WordPress Theme and Plugins Detector: Chrome
    Erkennung von verwendetem Theme und Plugins auf WordPress Webseite
  • WPintel: Chrome
    San auf Identifizierbarkeit von WordPress Version, Plugins, Themes, Benutzernamen, etc.
  • OpenLink Structured Data Sniffer: Firefox, Chrome
    Analyse strukturierter Metadaten (POSH, JSON-LD, Microdata, RDF-Turtle, RDFa) zu aktivem Tab
  • Link Redirect Trace: Firefox, Chrome
    Prüfung Link der aktuellen Webseite auf Eigenschaften, Funktion und Weiterleitungen
  • HTTPS Mixed Content Locator: Chrome
    Unsichere Inhalte (Mixed Content) auf https Webseite identifizieren
  • Broken Resources Finder: Firefox
    fehlende Ressourcen (Bilder, Styleshheets, etc.) auf aktueller Seite erkennen
  • Link Investigator: Firefox; Check My Links: Chrome; Broken Link Checker: Firefox, Chrome
    Funktionsprüfung aller Hyperlinks einer Webseite
  • Link Gopher: Firefox, Show Links: Firefox, Link Grabber: Chrome
    Links einer Webseite extrahieren und in einem neuen Tab gegliedert anzeigen
  • Link Properties Plus WE: Firefox
    Anzeige Response Headers (inkl. Änderungsdatum etc.) für Webseite/Link/Bild/Datei
  • LastModifiedInfo: Firefox
    Anzeige Änderungsdatum für Webseite
  • GTmetrix: Chrome, Page load time: Chrome
    Webseitenladezeitanalyse
  • Resize Window & Viewport: Firefox, Window Resizer: Chrome
    Bildschirmauflösungen testen – Responsive Webdesign (Firefox: [Strg] + [Shift] + [M])
  • Measure-it: Firefox, Chrome; ruler: Firefox;
    Pixelabmessungen auf Webseite
  • Measure Everything: Firefox, Chrome
    Messung Abstände zwischen DOM Elementen
  • Protractor: Chrome
    Winkelmessung
  • Ruler Measurement: Chrome; Grids & Rulers: Firefox, Guides: Chrome
    Führungslinien zur Kontrolle korrekter Elementausrichtung
  • Web Developer: Firefox, Chrome
    Fehler suchen, HTML/CSS validieren, Cookies, Infos, Abmessungen, Bildschirmauflösung, …
  • Server Status: Firefox
    Server Standort, IP Adressen, HTTP Version, Ladezeit, Datenvolumen, zuletzt geändert, SSL/TLS
  • HTTP Header Spy: Firefox, Chrome; HTTP Headers: Chrome
    HTTP Header der aktuell geladenen Webseite anzeigen
  • HTTP Headers: Chrome
    HTTP Header der aktuell geladenen Webseite anzeigen + Live HTTP Protokoll gesamter Webverkehr
  • HTTP Header Live: Firefox
    HTTP Header anzeigen + ändern + erneut senden
  • mHeaderControl: Firefox, Header Rewriter: Chrome
    Request Headers manipulieren für Cookies, Referer, …
  • Caspr-Enforcer: Chrome; CSP Tester: Firefox, Chrome
    Frei gestaltbare HTTP Content Security Header an Website ausprobieren (Anwendung oder Report-Only)
  • Disable Content-Security-Policy: Chrome
    Zu Testzwecken (temporär) HTTP Content Security Header für Webseiten im aktuellen Tab deaktivieren
  • CORS Unblock: Firefox, Chrome
    Zu Testzwecken (temporär) HTTP CORS Access Control Header der aufgerufenen Webseiten deaktivieren
  • SEO Inspector: Firefox, META SEO inspector: Chrome
    Metadaten der aktuellen Website anzeigen
  • Web Developer Checklist: Firefox, Chrome
    „Best Practices“ Website Kurzcheck gemäß http://webdevchecklist.com/
  • SeoQuake: Firefox, Chrome, SEO & Website Analyse: Firefox
    SEO Analyse

Für zahlreiche generelle Browsererweiterungen siehe auch Webbrowser => Handhabung-Erweiterungen

OnlinetoolS

Barrierefreiheit (WCAG)

… Test von Einhaltung WCAG 2.0 Standards zur Barrierefreiheit (Accessibility) von Webseiten

Browsererweiterungen

  • WAVE: Firefox, Chrome
    Prüfung Struktur, Kontrast, Alt-Text, Technik
  • Siteimprove Accessibility Checker: Firefox, Chrome
    Prüfung Struktur, Kontrast, Technik … auch ohne Anmeldung
  • axe – Web Accessibility Testing: Firefox, Chrome
    Prüfung Struktur, Kontrast, Technik
  • Tota11y: Firefox
    Prüfung Überschriftenstruktur, Kontrast, problematischen Linktext, etc.
  • Visual ARIA: Firefox, Chrome
    Accessible Rich Internet Applications – Umsetzung Spezifikationen überprüfen
  • Accessibility Insights for Web: Chrome
    Prüfung auf rund 50 Kriterien
  • ARC Toolkit: Firefox, Chrome
    Zahlreiche WCAG Tests – integriert als Tab in Entwicklertools
  • ChromeLens: Chrome
    Simulation Farbenblindheit, Test Barrierefreiheit, Anzeige Navigation mit TAB-Taste
  • WCAG Contrast Checker: Firefox, Chrome
    Prüfung Farbkontrast für barrierefreien Zugang + Simulation Varianten von Farbenblindheit
  • Image ALT: Firefox, Chrome
    Alt-Text zu jedem Bild anzeigen
  • Let’s get color blind: Firefox, Chrome; RGBlind: Firefox, Chrome
    Simulation Ansicht Farbenblindheit
  • Web Disability Simulator: Chrome, Funkify: Chrome
    Simulation Farbenblindheit und anderer Sehbeeinträchtigungen
  • dyslexia simulator: Chrome, Dyslexia Simulator: Chrome
    Simulation von Dyslexie-Auswirkungen auf Lesbarkeit

Zuletzt geändert: 28.08.2024

Inhalt
Skip to content