Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Alles hat ein Ende...

Eine Weisheit der Dakota-Indianer sagt:
"Wenn Du entdeckst, dass Du ein totes Pferd reitest, steig ab!"

Vor fast fünf Jahren habe ich die NOF-Community gegründet und nachdem just zu diesem Zeitpunkt das „alte NOF-Forum“ quasi über Nacht vom Betreiber geschlossen wurde, war mein Forum für viele Nutzer von NetObjects Fusion eine willkommene Alternative.

Inzwischen sind weit über 5000 NetObjects-Nutzer in der NOF-Community registriert und täglich kommen weitere hinzu. An interessierten Mitgliedern fehlt es also nicht. Was aber fehlt, sind Mitglieder, die Lust haben, anderen Nutzern bei der Lösung ihrer vielfältigen Probleme in der Anwendung von NetObjects Fusion zu helfen. Vielleicht, weil viele von ihnen - ebenso wie ich - das Interesse an NOF verloren haben und zwischenzeitlich mit anderen Programmen arbeiten.

Aktuell ist es so, dass der Support wie die Kosten für den Betrieb der NOF-Community fast ausschließlich von mir übernommen werden. Dies, und die Tatsache, dass ich die Arbeit mit NetObjects Fusion nicht mehr für zeitgemäß halte, veranlasst mich, den aktiven Forenbetrieb zu beenden. Die Beiträge, Tipps und Anleitungen aus den letzten Jahren stehen ab heute nur noch als Nachschlagewerk zur Verfügung.

Ich bedanke mich an dieser Stelle ganz herzlich bei allen, die mich und die NOF-Community in den vergangenen Jahren unterstützt haben.

Beste Grüße nettesekel

Die letzten Beiträge

Autor Thema: Barrierefreiheit: Textvergrößerung  (Gelesen 1643 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline Dada

  • Supporter
  • *****
  • Beiträge: 1631
  • System: Windows 10
  • System-Typ: 64bit
Barrierefreiheit: Textvergrößerung
« am: 31. März 2013, 20:43:47 »
Bei Seiten von Institutionen öffentlichen Rechtes ist es Pflicht, bei gewerblichen und privaten Seiten nicht aber dennoch zu empfehlen. Gerade wenn die Zielgruppe einer Seite Defizite in der Sehkraft aufweisen.

Die Textvergrößerung

Ich stelle euch hier mal eine Möglichkeit vor das auf jQuery aufbaut.
Hierzu verwenden wir jQuery.creaseFont-Script.

Dieses Script vergrößert oder verkleinert Text. Es werden dafür CSS-Klassen benutzt, das heißt, ihr könnt beim Erstellen des Script-Aufrufes entscheiden, welche Klasse (P,H1,H2 oder eigene Klassen) benutzt werden sollen.
Wer nichts damit anzufangen weis sollte sich diese Tutorials mal anschauen:
Formatvorlagen, was ist das?
Formatvorlagen erstellen
Formatvorlagen zuweisen

Dieses Script setzt auf dem Endgerät, mit dem die Seite angeschaut wird, ein Cookie, somit wird, wenn die Seite wieder besucht wird, der Text direkt vergrößert/verkleinert.


Es gibt allerdings Unterschiede im Einbau in NOF, in Version <10 kann man wie gewohnt die Scripte in die Headtags einfügen bei NOF11 und NOF12 müssen wir dies in der Code-Ansicht tun.

In diesem Tutorial zeige ich euch beide Vorgehensweisen in NOF 9 und NOF 12.

Für beide Methoden braucht ihr das  jQuery.creaseFont-Script ihr könnt es bei GitHub herunterladen.

Diese Script benötigt mindestens jQuery 1.7.2, was eine kleine Änderung bei NOF11/12 benötigt dazu aber später mehr.
« Letzte Änderung: 31. März 2013, 20:46:18 von Dada »
Fragen - die inhaltlich ins Forum gehören - sind grundsätzlich im Forum zu stellen und werden auch nur dort beantwortet, damit Alle durch deren Erörterung lernen und von ihr profitieren können. Anfragen dieser Art per PN bleiben unbeantwortet!

Strebe nie nach Dingen, die auch Dümmeren gelingen ...

Offline Dada

  • Supporter
  • *****
  • Beiträge: 1631
  • System: Windows 10
  • System-Typ: 64bit
Der Einbau in NOF-Versionen bis einschließlich NOF 10
« Antwort #1 am: 31. März 2013, 22:24:21 »
Zunächst müsst ihr eurem Text eine Formatvorlage zuweisen,
ich nutzte hier in meinem Beispiel nur den „p-Tag“. Ihr könnt aber auch eine andere Formatvorlage verwenden wie z.b.".meintext“






Nun fügen wir die benötigenden Skripte zwischen die Headtags ein.






Die Reihenfolge wie die Skripte eingebunden sind ist wichtig sonst funktionieren diese nicht.
Ihr benötigt zusätzlich noch jQuery 1.7.2 oder höher.


Jquery muss zuerst in den Headtag eingefügt werden.

Code: HTML5

Nun kommt das jQuery.creaseFont-Script zwischen die Headtags

Code: HTML5
  1. <script type="text/javascript" src="jquery.creaseFont.min.js"></script>

Die Pfadangaben müsst ihr anpassen, je nachdem wo euer Skript liegt.

Jetz noch unser Aufruf der creaseFont-Funktion.

Code: HTML5
  1. <script type="text/javascript">

Code: Javascript
  1. jQuery(document).ready(function(){
  2.      $.creaseFont({
  3.           content     :  'p',
  4.           defaultSize :  12,
  5.           maxSize     :  20,
  6.           minSize     :  6,
  7.           stepSize    :  1,
  8.           unit        :  'px',
  9.           animate     :  true,
  10.           animateSpeed:  500,
  11.           cookieName  :  'creaseFont',
  12.           cookieLifetime:60
  13.           });
  14.         $(window).keydown(function(e) {
  15.     switch (e.keyCode) {
  16.         case 107:
  17.             $('#fontLarge').click();
  18.             return false;
  19.         case 111:
  20.             $('#fontDefault').click();
  21.             return false;
  22.         case 109:
  23.             $('#fontSmall').click();
  24.             return false;
  25.     }
  26.     return;
  27. });
  28. });
  29.  

Code: HTML5

Im Aufruf der creaseFont-Funktion könnt ihr eurere Einstellungen machen.

Content gibt die zu Verwendende Klasse an hier p.
Mit defaultSize die Standartgröße des Textes.
MaxSize ist maximale und minSize die minimale Größe des Textes.
StepSize die Vergrößerungsschritte
mit unit gebt ihr die Verwendet Größeneinheit an %,Px oder em.
Animate schaltet die Animation beim vergrößen an(true) oder aus (false).
AnimateSpeed die Geschwindigkeit der Animation in Millisekunden.
CookieName der Name des Cookie der auf dem Endgerät gespeichert wird.
CookieLifetime ist die Gültigkeitsdauer eines Cookie.

Der weiter Code $(window).keydown wird dazu gebraucht um die + und – Taste sowie der /-Taste an der Num-Tastatur abzufragen. Denn dieses Script kann man so zusätzlich mit der Tastatur steuern.

Nun braucht ihr noch Steuerelemente für das Script dies geschieht über Links. Hier in meinem Beispiel nutzte ich Grafiken als Buttons. Ihr könnt aber auch einen Textlink verwenden und diesen per Formatvorlage formatieren.

Wir erstellen nun unseren ersten Link für das verkleinern.






Wählt dazu bitte
Linktyp: Externer Link
Neuer Link: Javascript

dahinter
Code: Javascript
  1. void(0);

und klickt auf speichern.
Nun auf den HTML-Button und fügt folgendes in „In dem Link“ ein.

Code: HTML5
  1. id="fontSmall"






Als nächstes erstellt ihr einen Link für die Standartgröße.
Geht genauso vor wie eben nur das ihr hier

Code: HTML5
  1. id="fontDefault"
einfügt.

Nun kommt noch der Link für das Vergrößern, hier wird

Code: HTML5
  1. id="fontLarge"
in den Link eingefügt wird.

Das war schon der ganze Einbau in NOF bis einschließlich Version 10.
« Letzte Änderung: 01. April 2013, 18:10:58 von Dada »
Fragen - die inhaltlich ins Forum gehören - sind grundsätzlich im Forum zu stellen und werden auch nur dort beantwortet, damit Alle durch deren Erörterung lernen und von ihr profitieren können. Anfragen dieser Art per PN bleiben unbeantwortet!

Strebe nie nach Dingen, die auch Dümmeren gelingen ...

Offline Dada

  • Supporter
  • *****
  • Beiträge: 1631
  • System: Windows 10
  • System-Typ: 64bit
Der Einbau in NOF 11/12
« Antwort #2 am: 01. April 2013, 13:38:38 »
Bei NOF 11 und 12 wird ja eine interne jQuery publiziert, die mit diesem Script nicht kompatibel ist.
Hier gibt es zwei Möglichkeiten, das eliminieren der NOF-eigenen jQuery oder die Verwendung der „SwissKnife Replace jQuery“-Komponente. Bei Verwendung der Komponente gestaltet sich der Einbau anders. Deshalb erläutere ich den Einbau bei Verwendung der Komponente später gesondert.

Einbau mit eliminieren der NOF-jQuery.js

Auch hier müssen wir unserem Text eine Formatvorlage zuweisen. In dem Beispiel nutze ich wieder den p-Tag.






Nun fügen wir die benötigenden Skripte zwischen die Headtags ein.






Die Reihenfolge wie die Skripte eingebunden sind ist wichtig sonst funktionieren diese nicht.
Ihr benötigt zusätzlich noch jQuery 1.7.2 oder höher.


Jquery muss zuerst in den Headtag eingefügt werden.


Code: HTML5


Nun kommt das jQuery.creaseFont-Script zwischen die Headtags


Code: HTML5
  1. <script type="text/javascript" src="jquery.creaseFont.min.js"></script>


Die Pfadangaben müsst ihr anpassen, je nachdem wo euer Skript liegt.

Jetz noch unser Aufruf der creaseFont-Funktion.

Code: HTML5
  1. <script type="text/javascript">

Code: Javascript
  1. jQuery(document).ready(function(){
  2.      $.creaseFont({
  3.           content     :  'p',
  4.           defaultSize :  12,
  5.           maxSize     :  20,
  6.           minSize     :  6,
  7.           stepSize    :  1,
  8.           unit        :  'px',
  9.           animate     :  true,
  10.           animateSpeed:  500,
  11.           cookieName  :  'creaseFont',
  12.           cookieLifetime:60
  13.           });
  14.         $(window).keydown(function(e) {
  15.     switch (e.keyCode) {
  16.         case 107:
  17.             $('#fontLarge').click();
  18.             return false;
  19.         case 111:
  20.             $('#fontDefault').click();
  21.             return false;
  22.         case 109:
  23.             $('#fontSmall').click();
  24.             return false;
  25.     }
  26.     return;
  27. });
  28. });
  29.  

Code: HTML5


Im Aufruf der creaseFont-Funktion könnt ih eurer Einstellungen machen.

Content gibt die zu Verwendende Klasse an hier p.
Mit defaultSize die Standartgröße des Textes.
MaxSize ist maximale und minSize die minimale Größe des Textes.
StepSize die Vergrößerungsschritte
mit unit gebt ihr die Verwendet Größeneinheit an %,Px oder em.
Animate schaltet die Animation beim vergrößen an(true) oder aus (false).
AnimateSpeed die Geschwindigkeit der Animation in Millisekunden.
CookieName der Name des Cookie der auf dem Endgerät gespeichert wird.
CookieLifetime ist die Gültigkeitsdauer eines Cookie.

Der weiter Code $(window).keydown wird dazu gebraucht um die + und – Taste sowie der /-Taste an der Num-Tastatur abzufragen. Denn dieses Script kann man so zusätzlich mit der Tastatur steuern.


Jetzt müsst ihr noch die NOF-eigene jQuery eliminieren.
Hier findet ihr die Anleitung: jQuery.js eleminieren

Nun braucht ihr noch Steuerelemente für das Script dies geschieht über Links. Hier in meinem Beispiel nutzte ich Grafiken als Buttons. Ihr könnt aber auch einen Textlink verwenden und diesen per Formatvorlage formatieren.

Wir erstellen nun unseren ersten Link für das verkleinern.




Wählt dazu bitte
Linktyp: Externer Link
Neuer Link: Javascript dahinter

 
Code: Javascript
  1. void(0);

und klickt auf speichern.
Nun auf den HTML-Button und fügt folgendes in „Innen“ ein.

Code: HTML5
  1. id="fontSmall"






Als nächstes erstellt ihr einen Link für die Standartgröße.
Geht genauso vor wie eben nur das ihr hier

Code: HTML5
  1. id="fontDefault"

 einfügt.

Nun kommt noch der Link für das Vergrößern hier wird

Code: HTML5
  1. id="fontLarge"

in den Link eingefügt wird.





« Letzte Änderung: 01. April 2013, 22:37:38 von Dada »
Fragen - die inhaltlich ins Forum gehören - sind grundsätzlich im Forum zu stellen und werden auch nur dort beantwortet, damit Alle durch deren Erörterung lernen und von ihr profitieren können. Anfragen dieser Art per PN bleiben unbeantwortet!

Strebe nie nach Dingen, die auch Dümmeren gelingen ...

Offline Dada

  • Supporter
  • *****
  • Beiträge: 1631
  • System: Windows 10
  • System-Typ: 64bit
Bei Verwendung der SwissKnife-Komponente
« Antwort #3 am: 01. April 2013, 17:45:08 »
Jetzt noch zu der Besonderheit, wenn ihr die "Replace jQuery"-Komponente von Swissknife nutzt.


Die Einbindung von jQuery wird automatisch generiert, dies geschieht hinter den manuellen Einfügen die ihr im Masterborder oder Layout-HTML machen könnt.

Da die korrekte Abfolge der Skripte für die Funktion der Textvergrößerung wichtig ist, muss man das CreaseFont-Script und der Aufruf der CreaseFont-Funktion unter die jQuery bringen. Dies geht in der Code-Ansicht.

Hier fügt ihr in Custom4 die entsprechenden Aufrufe ein.






Code: HTML5
  1. <script type="text/javascript" src="jquery.creaseFont.min.js"></script>

Code: HTML5
  1. <script type="text/javascript">

Code: Text
  1. jQuery(document).ready(function(){
  2.      $.creaseFont({
  3.           content     :  'p',
  4.           defaultSize :  12,
  5.           maxSize     :  20,
  6.           minSize     :  6,
  7.           stepSize    :  1,
  8.           unit        :  'px',
  9.           animate     :  true,
  10.           animateSpeed:  500,
  11.           cookieName  :  'creaseFont',
  12.           cookieLifetime:60
  13.           });
  14.         $(window).keydown(function(e) {
  15.     switch (e.keyCode) {
  16.         case 107:
  17.             $('#fontLarge').click();
  18.             return false;
  19.         case 111:
  20.             $('#fontDefault').click();
  21.             return false;
  22.         case 109:
  23.             $('#fontSmall').click();
  24.             return false;
  25.     }
  26.     return;
  27. });
  28. });
  29.  

Code: HTML5


Das Einbringen der Steuerelemente erfolgt, wie schon beschrieben.

« Letzte Änderung: 20. Februar 2014, 20:33:09 von nettesekel »
Fragen - die inhaltlich ins Forum gehören - sind grundsätzlich im Forum zu stellen und werden auch nur dort beantwortet, damit Alle durch deren Erörterung lernen und von ihr profitieren können. Anfragen dieser Art per PN bleiben unbeantwortet!

Strebe nie nach Dingen, die auch Dümmeren gelingen ...

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

 


Wenn dir dieser Artikel gefallen hat, dann empfehle ihn doch weiter... ;)