JQwys Editor unterstützt korrekte Textstrukturen
Zur vorrangig textuellen Gestaltung einer Seite hat Webfruits zwei Editoren zur Verfügung: Xinha und die Eigenentwicklung JQWys. Gegenüber Xinha hat JQWys den Vorteil näher an den Stilvorgaben von Webfruits zu sein. Darüber hinaus verfolgt der Editor das Prinzip What you see is what you mean (WYSIWYM). Das bedeutet, dass die Textstruktur optisch unterstützt wird. Man sieht praktisch auf einem Blick, ob Absätze, Überschriften oder Auflistungen richtig gesetzt sind.
Die Auswahl des Editors erfolgt in den Benutzereinstellungen (Einstellungen - Optionen).
Mit den Werkzeugen zur Barrierefreiheit bietet der Editor eine wertvolle Unterstützung für Screenreader an.
Jeder Block, ob Absatz oder Überschrift, ist deutlich erkennbar. Gut zu sehen sind auch Sprachwechsel und Abkürzungen. Die roten Wellenlinien stammen von der Rechtschreibprüfung des Browsers (Firefox).
© IMB Webdevelopment
Die Funktionen von JQWys im Überblick
HTML anzeigen/verstecken
Mit diesem Button wechseln Sie von der HTML-Ansicht zur Design-Ansicht. Damit haben Profis die volle Kontrolle über den HTML-Quellcode.
Absatz
Dieser Button ist identisch mit der Auswahl "Absatz" im nächstfolgenden Auswahlfeld und zeichnet den aktuellen Block, in dem der Text-Cursor steht, als Absatz aus. Ein Block ist ein durch "Return" beendeter Textabschnitt. Um innerhalb eines Absatzes einen Zeilenumbruch zu erwirken, drücken Sie Shift und Return.
Textformat auswählen
In diesem Auswahlfeld wird dem aktuellen Block, in dem der Text-Cursor steht, die jeweils erforderliche Textstruktur zugeordnet, die da sind:
- Einfacher Absatz und Absätze mit spezieller Gestaltung wie: Vorspann, Bildunterschrift und Copyright.
- Überschrift 1 (Titel), welcher nur in Ausnahmefällen zum Einsatz kommt, da diese Überschriften-Ebene bereits für den Titel der Seite benutzt wird.
- Überschrift 2 (Zwischentitel) unterteilt den Inhalt einer Seite in Abschnitte.
- Überschrift 3 unterteilt den Inhalt innerhalb eines durch Überschrift 2 geteilten Abschnitts in weitere inhaltlich untergeordnete Abschnitte.
- Überschrift 4 unterteilt den Inhalt innerhalb eines durch Überschrift 3 geteilten Abschnitts in weitere inhaltlich untergeordnete Abschnitte.
- und so weiter...
Linksbündig
...setzt den aktuellen Block linksbündig, was dem Standard entspricht.
Zentriert
...zentriert den aktuellen Block. Beispiel:
Ein wenig zentrierter Text, um sich abzuheben.
Zentrierter Text hat keine Funktion als Überschrift.
Rechtbündig
...setzt den aktuellen Block rechtsbündig. Beispiel:
Zitat Eduard Schmidt
Blocksatz
...richten den aktuellen Block als Blocksatz aus. Das heißt, die Wörter einer Zeile werden so ausgerichtet, dass sie links und rechts bündig abschließen. Da es bei HTML keinen Standard zur Silbentrennung gibt, kommt es rasch zu einem uneinheitlichen auseinandergerissen Schriftbild. Prinzipiell ist Blocksatz daher nur für kurze Passagen und zur Hervorhebung von Textteilen empfehlenswert – wie in diesem Fall.
Geordnete Liste einfügen
Mit einem Klick auf diesen Button wird mit einer durchnummerierten Auflistung begonnen, oder markierte Absätze in eine Auflistung umgewandelt. Beispiel:
- Brot
- Milch
- Butter
Ungeordnete Liste einfügen
...ist ähnlich wie die geordnete Liste jedoch ohne Nummerierung. Beispiel:
- Brot
- Milch
- Butter
Um eine Auflistung zu beenden, drücken Sie zweimal Return und wechseln mit dem Absatz-Button (siehe oben) wieder in den Absatz-Modus. Um innerhalb eines Listenpunktes einen Zeilenumbruch zu erwirken, drücken Sie Shift und Return.
Einzug erhöhen
Mit dieser Funktion lassen sich verschachtelte Listen erstellen. Es lassen sich jedoch auch einfache Absätze einrücken.
Einzug vermindern
...macht den Einzug wieder rückgängig.
Fett
Mit einem Klick auf diesen Button wird der aktuell markierte Text fett dargestellt.
Kursiv
Mit einem Klick auf diesen Button wird der aktuell markierte Text kursiv dargestellt.
Unterstrichen
Mit einem Klick auf diesen Button wird der aktuell markierte Text unterstrichen dargestellt.
Durchgestrichen
Mit einem Klick auf diesen Button wird der aktuell markierte Text durchgestrichen dargestellt.
Text hochstellen
Damit können etwa Hochkommastellen dargestellt werden: 103 oder m2. Das Hoch- oder Tiefstellen sollte keinesfalls zur Verkleinerung der Schrift verwendet werden.
Text tiefstellen
Damit lassen sich Indizes, Suffixe und dergleichen darstellen wie etwa bei chemischen Formeln: CO2.
Befehle rückgängig machen
Damit können Eingaben und Befehle wieder rückgängig gemacht werden. Funktioniert nicht im Internet Explorer!
Befehle wiederherstellen
Damit können rückgängig gemachte Eingaben und Befehle wiederhergestellt werden. Funktioniert nicht im Internet Explorer!
Link einfügen
Dieser Button öffnet den Dialog, um Verknüpfungen (Links) herzustellen. Wählen Sie zuerst die Textpassage aus, mit der Sie verlinken wollen. Nach dem Öffnen des Dialog können Sie unter URL eine mit http:// beginnende Internetadresse eingeben. Verlinkungen auf eigene Angebote lassen sich am einfachsten über den Linkassistenten (Klick auf das Ordner-Symbol) bewerkstelligen.
Unter Titel kann ein zusätzlicher Text zur Beschreibung des Links eingegeben werden, was vor allem dann notwendig ist, wenn der verlinkte Text über den Link nichts aussagt, wie etwa "hier", "weiter" oder "mehr". Unter Ziel haben Sie die Möglichkeit, einen Link in einem neuen Fenster öffnen zu lassen. In diesem Fall kann im Titel auch mit "Öffnet in neuem Fenster" darauf hingewiesen werden.
Der Link wird nach einem Klick auf "OK" gesetzt.
Link entfernen
Entfernt einen zuvor markierten Link.
Sonderzeichen einfügen
Dieser Button öffnet den Dialog zur Auswahl von Sonderzeichen. Klicken Sie einfach das gewünschte Sonderzeichen an, damit es an der aktuellen Cursorposition eingefügt wird. Damit lassen sich vor allem gängige Typographische Zeichen einfügen, die auf der Tastatur nicht vertreten sind, wie etwa der Bindestrich (–), der Gedankenstrich (—) oder das Copyright-Zeichen (©), um nur einige zu nennen. Benutzen Sie Sonderzeichen nicht zur Dekoration.
Bild einfügen
Öffnet den Dialog zum Einfügen eines Bildes oder eines Bildobjektes aus der Bilddatenbank. Geben Sie unter URL den absoluten Pfad einer Bilddatei ein oder wählen Sie mit Hilfe des Bildassistenten ein Bild aus Ihrer Bilddatenbank aus. Bei letzterer Methode sind Sie auf der sicheren Seite. Beachten Sie in diesem Zusammenhang, dass Sie auch über die entsprechenden Rechte über das dargestellte Bild verfügen müssen.
Unter Alternativtext geben Sie in einem kurzen Satz über den Inhalt des Bildes Bescheid, zum Beispiel: "Eingestürztes Haus in Köln". Der Alternativtext kann bei rein dekorativen Grafiken entfallen.
Unter "Größe" kann zwischen den vorskalierten Bildgrößen aus der Bilddatenbank ausgewählt werden. Ein Haken bei "vergrößern" erlaubt die Vergrößerung des Bildes mit einem so genannten Lightbox-Effekt.
Der Umfluss kontrolliert die Lage des Bildes etwa links oder rechts vom Text. Beides lässt sich freilich nur dann bewerkstelligen, wenn die Größe des Bildes es sinnvollerweise zulässt. Andernfalls ist es besser, keinen Umfluss einzustellen (Standard).
Im Allgemeinen orientiert sich die Positionierung des Bildes am Text-Cursor, allerdings sollte man diese im besten Fall zu Beginn eines Absatzes wählen und nicht irgendwo mitten in einem Textfluss, da dieser sonst unterbrochen wird. Man braucht also den Cursor nicht rechts platzieren, um ein Bild rechts vom Absatz zu haben.
Mit Bildunterschrift und Copyright lassen sich die entsprechenden Texte eingeben. Ein Ausfüllen dieser Texte bewirkt in Zusammenhang das Einfügen eines HTML-Konstruktes.
Werkzeuge zur Zugänglichkeit
Mit diesem Werkzeug lassen sich einige Auszeichnungen realisieren, die für barrierefreie Texte notwendig sind: Auszeichnung von Sprachwechsel, von Abkürzungen und Akronymen. Zuerst den Text markieren. Unter "Auszeichnung" zwischen "Sprache", "Abkürzung" und "Akronym" wählen. Bei Sprachwechsel unter "Sprache" die von der Standardsprache abweichende Sprache auswählen, etwa "English" wie in diesem Beispiel: some english text. Die Auszeichnung hat in der Regel keine optische Auswirkung auf der Website, wird jedoch im Editor grau unterstrichen und mit dem ISO-Code der Sprache versehen (etwa "EN" für Englisch). Mit dem Einsatz von Sprachwechsel können Screenreader die abweichenden Texte wieder korrekt vorlesen und Suchmaschinen die Texte besser indizieren.
Abkürzungen wie z.B. sollten generell vermieden werden, da sie weder hübsch aussehen noch das Textverständnis fördern. Mit "Abkürzung" lässt sich der markierte Text, die Abkürzung, mit der Langversion ergänzen: z.B. Das macht freilich nur Sinn bei aus irgendwelchen Gründen unvermeidbaren Abkürzungen, etwa in juristischen Texten.
Das Gleiche gilt für Akronym. Akronyme sind Abkürzungen eines Begriffes, die aber wie ein Wort ausgesprochen werden, wie etwa NASA. In diesem Fall ist das Akronym auch in einer abweichenden Sprache, was hier in der selben Auszeichnung mit dem Sprachattribut ausgewählt werden kann.
Abkürzungen und Akronyme haben je nach Design eine graue Unterlinie oder werden gar nich gesondert angezeigt. In jedem Fall wird ein so genanntes Tooltip mit der ausgeschriebenen Version ausgegeben, sobald der Mauszeiger darüber geht. Hauptsächlich dient das Werkzeug für Screenreader und für die semantische Korrektheit des Textes.
Tabelle einfügen
Mit diesem Dialog wird das Einfügen einer Datentabelle ermöglicht, die im Design vordefiniert ist und bei nicht missbräuchlicher Verwendung barrierefrei ist. Dazu notwendig sind die Angaben einer Tabellenüberschrift, einer Zusammenfassung, wie diese Tabelle zu lesen ist, sowie das Hinzufügen von Spalten- und Zeilenköpfe.
In der Regel haben Tabellen sowohl Spalten- als auch Zeilenköpfe, da sie semantisch auch so zu lesen sind. Nehmen wir einen Stundenplan als Beispiel. Dieser hat die Wochentage als Spaltenkopf und die Unterrichtsstunden als Zeilenkopf. Die Lage der Zellen definiert somit an welchem Tag zu welcher Stunde welcher Kurs stattfindet.
Beispiel für eine Tabellen ausschließlich mit Spaltenbezug wäre eine Pro- und Kontragegenüberstellung, die keinen Zeilenbezug aufweist. Das ließe sich jedoch schöner als zwei Listen darstellen.
Einziges Beispiel für eine Tabelle mit ausschließlichem Zeilenbezug sind Wertepaare.
Komplexe statistische Tabellen lassen sich semantisch korrekt nur im HTML-Code und mit profunden Kenntnissen bewerkstelligen.
Formatierungen entfernen
Beim Kopieren eines Textes von einer Textverarbeitung oder aus einem anderen Medium kommen in der Regel unerwünschte und zumeist einfach falsche und irritierende Formatierungen mit. Mit einem Klick auf diesen Button werden sämtliche Formatierungen entfernt.
HTML säubern (nach Kopieren)
Ähnlich wie Formatierung entfernen ist dieses Werkzeug, wobei jedoch Textstrukturen wie Absätze und Überschriften sowie Bilder erhalten bleiben.
Wörter zählen
...gibt Auskunft über Anzahl der Zeichen und Wörter sowie über die Anzahl der Zeichen des gesamten Quellcodes (HTML)
Hilfe
...ist ein kurzer Überblick über die Funktionen des Editors.
Über JQwys
Hersteller und Copyright-Vermerk