Homepageerstellung

HTML Editor

Browsererweiterungen

  • HTML-Editor WebStudio: Firefox
    WYSIWYG HTML Editor
  • ConstEdit Word Processor: Chrome
    WYSIWYG HTML Editor inkl. Spracheingabe (Spracherkennung)

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


Weberweiterungen

Sitemap

Onlinetools


Grafiktools

Präsentation/Animation


Ressourcen

Browsererweiterungen

  • OpenLorem: Firefox, Chrome, Lorem Ipsum Generator: Chrome, Right click ipsum: Chrome
    Dummytextgenerator für rasche Inhaltsbefüllung
  • Dummy Form Filler: Firefox, Simple Lorem Ipsum: Firefox
    Yet Another Lorem Ipsum Generator: Chrome
    Dummytextgenerator für rasche Inhaltsbefüllung von Formularen

Bilder


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.
  • WP Content Discovery: Chrome
    Anzeige aller darstellbaren Seiten, Beiträge und Nutzer
  • 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
  • Empty Cache Button: Firefox, Clear Cache: FirefoxChrome
    Cache löschen
  • Reload Skip Cache Button: Firefox, Hard Refresh Button: Firefox, Reload Without Cache: Firefox
    Hard reload: Chrome, ActiveReload: Chrome
    Neuladen von Seite und Cache überschreiben
  • 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, LinkMiner: Chrome,
    Broken Link Checker: Chrome, Redirect Link Checker: 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, getResponseHeaders: Chrome
    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, Responsive Web Design Tester: Chrome
    Bildschirmauflösungen testen – Responsive Webdesign (Firefox: [Strg] + [Shift] + [M])
  • MeasureIt: Chrome; Measure-it: Firefox; ruler: Firefox, Chrome; Page Ruler Redux: Chrome
    Pixelabmessungen auf Webseite
  • PixelZoomer: Firefox, Chrome
    zoombare Pixel- und Hex-Code Farbmessung
  • Protractor: Chrome
    Winkelmessung
  • Grids & Rulers: Firefox, Guides: Chrome
    Führungslinien zur Kontrolle korrekter Elementausrichtung
  • ColorZilla: Firefox, Chrome, ColorPick Eyedropper: Chrome
    Farbbestimmung von Bildschirmpunkten
  • Font Finder: Firefox, Chrome, Font Inspector: Firefox, Chrome, WhatFont: Chrome
    Schrifteigenschaften (Schriftart, Farbe, Größe, …) per Mausklick
  • Web Developer: Firefox, Chrome
    Fehler suchen, HTML/CSS validieren, Cookies, Infos, Abmessungen, Bildschirmauflösung, …
  • mHeaderControl: Firefox, Header Rewriter: Chrome
    Request Headers manipulieren für Cookies, Referer, …
  • 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

  • Tota11y: Firefox, Chrome
    Prüfung Überschriftenstruktur, Kontrast, problematischen Linktext, etc.
  • Visual ARIA: Firefox, Chrome
    Accessible Rich Internet Applications – Umsetzung Spezifikationen überprüfen
  • ChromeLens: Chrome
    Simulation Farbenblindheit, Test Barrierefreiheit, Anzeige Navigation mit TAB-Taste
  • WCAG Accessibility Audit Developer UI: Chrome
    Prüfung Website mit Google Accessibility Developer Tools auf Barrierefreiheit
  • WCAG Contrast Checker: Firefox, WCAG Luminosity Contrast Ratio Analyzer: Chrome
    Prüfung Farbkontrast für barrierefreien Zugang
  • Let’s get color blind: Firefox, Chrome, RGBlind: Firefox, Chrome, Spectrum: 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

Onlinetools

Zuletzt geändert: 17.06.2019