Projekt: MMK Zeichen, Font, G-DeviceKontext

Schrift, Information, Design und Web

Es geht um Schrift-Zeichen, Unicode-Blöcke, Text, Information, Formatierungen, Design, Web und Assoziationen. Wie kommt die Bedeutung?

Bob Dylan (aus Song "Oh, Sister"): "Time is an ocean but it ends at the shore." Die Zeit ist ein Ozean, aber sie endet am Gestade.

Projekt-Einführung Um was geht es?

Im Laufe der Geschichte bilden sich Kulturen, Sprach-Typologien, Symbole und Schriftsysteme. Heute kann Sprache aufgezeichnet werden. In gewissen Grenzen können Schrift und Sprache aufeinander abgebildet werden. Textverarbeitung , Schrift-Zeichen , Schriften der Welt , Mathematische Zeichen Zeichen für Texte, Prgrammier-Code, Quellcode-Dateien, usw.,

Johann Wolfgang von Goethe :
Es ist nicht genug zu wissen - man muss auch anwenden. Es ist nicht genug zu wollen - man muss auch tun.

In der Programmierung werden z.B. einzelne Zeichen verwendet ( Single Byte Character Set, Double Byte Character Set, Multibyte Character Sets ). Siehe z.B. de.wikipedia Zeichenkodierung . Zeichenketten bestehen aus einer Folge von Zeichen, genauer aus einer Folge von Zeichencodes ( Ordinalzahlen ). Bei ECMAScript gibt es Zeichenketten ( Strings ). Bei ECMAScript hat ein Zeichen nativ 2 Byte. Ein Zeichen ist eine Zeichenkettet mit der str.length = 1.

Das konkrete Aussehen eines Zeichen ergibt sich aus dem Font . Rasterorientierte Formate werden als Bitmap-Tabellen-Struktur gespeichert. Zum Darstellen eines Zeichen wird dessen Bitmap in den Bildschirmspeicher kopiert ( sehr schnell). Skalierbarer Vektorfonts und "True Type Fonts" werden als topologische-metrische Datenstruktur gespeichert. Zum Darstellen eines Zeichen wird mit Hilfe der Datenstruktur des Zeichens die zugehörigen Bitmap-Pixel berechnet und in den Bildschirmspeicher gesetzt ( rendern ).

Weltweite-Zeichensätze legen je Zeichen eine standardisierte Darstellungsform an und definieren die Ordinalzahl des Zeichen. Der UNICODE-Standard entspricht ISO 10646. w3.org Liste der Unicodeblöcke , w3.org HTML5 Character Entity Reference Chart

Schrift-Zeichen ( Weltweite Internet Unicode ), ECMAScript Schnellkurs ECMAScript-Strings , String-Beispiele , Toolchen für Unicodezeichen , Toolchen für UTF-8-Zeichen

Projekt-Kurzfassung Was? Wie? Warum? Wozu?

In dieser Veranstaltung werden grundlegende Kenntnisse für moderne Web-Anwendungen behandelt. Die Lösungen ( wie z.B. Web-Apps ) enthalten stets eigenen Ideen. Plagiate sind out. Alle Lösungen ( incl. Dokumentation ) werden ( im Laufe des Semesters ) Bestandteil der eigenen Projekt-Homepage.

Dieses erste Projekt entspricht einer kurzen Einführung in Teilen.

Zunächst Erstellung einer eigenen Seite, später als Homepage, die dann durchgängig für den praktischen Teil der MMK-Veranstaltung verwendet wird.
Die eigenen Aktivitäten werden in die Aktivitäten-Liste /loesungen/aktivitaeten.htm eingetragen. Insbesondere sind die eingebrachten Teile zu kommentiert und als HTML-Code in /loesungen/aktivitaeten.htm einzutragen.

Wie werden Unicode-Zeichen codiert?

Unicode ( Schriftzeichen ) , App für Zeichencode-Umrechnungen

Erstellen sie eine Lister für Zeichen, die in ihrer Homepage verwendet werden sollen. Beispiele für Zeichen, Emoji Cheatsheet, https://www.copypastecharacter.com/symbols
⁝ … ✖ « » ‹ › ⦉ ⦊ ⧀ ⧁ （） ⦑ ⦒ ☰ \u2630 <> \u003c\u003e ⟨⟩ \u27e8\u27e9 〈〉 \u3008\u3009 ＜＞ \uff1c\uff1e ∖ ∕ ⧹ ⧸ ｟｠ ► ▼ ▲ ⇨ ⇩ ↥ ↧ ⁕ ⁑ ⁂ ✪ ☀ ✹ ❇ ✺ ▲ △ ▶ ▷ △▲ △▴ ▵▶ ❖ ⁛ ⁜ ′ ″ ‴（）⁐ ☰ ☰ ≡≡

 sichtbares | codes .... | Entität    | Zweck      |

   Zeichen   | codes .... | in HTML    |            |

Hinweise zu HTML 5 HTML 5

Wikipdia HTML5

Wie sieht der Quellcode einer einfachen HTML-Seite aus? Beispiel:

<!DOCTYPE html>
 <html lang="de">
 <head>
 <title>TITLE_DER_SEITE</title>
 <meta name="robots" content="noindex" />
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <meta name="author" content="AUTOR_DER_SEITE" />
 <meta name="description" lang="de" content="ESA-2017: TITLE_DER_SEITE BESCHREIBUNG" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <link rel="canonical" href="http://www.mydomain.de/pfad/page.htm" />
 <link rel="stylesheet" media="screen" href="./css/mmk.css" />
 <script type="text/javascript" src="./js/my.js"></script>
 <script type="text/javascript">
   //window.onload = function () { ... };
 </script>
 </head><body><noscript><h2> Script erforderlich ...</h2></noscript>
 
 
 <h1>TITLE_DER_SEITE</h1>
 
 <p class="p">·p-Tag </p>
 
 <ul class="dir"><li> ul-li-item 1
 </li><li> ul-li-item 2
 </li><li> ul-li-item 3
 </li></ul> 
 
 <p> Validiere mit https://validator.w3.org/check </p>
 
 </body>
 </html>

Hinweise zu CSS ( Einstieg ) CSS 3.x

Siehe z.B. CSS-Einführung CSS-Properties

Hinweise zu ECMAScript ( Einstieg ) "JavaScript"

Anstelle von proprietären Sprach-Entwicklungen, wie z.B.

  JavaScript   ( Trademark of Oracle Corporation )
  JScript      ( Microsoft, Windows Script engine;.js,.jse,.wsf,.wsc )
  ActionScript ( Macromedia Inc. owned by Adobe Systems ), usw.

wird bei dieser Veranstaltung vorrangig ECMAScript verwendet, das durch
European Computer Manufacturers Association (ECMA-262 und gleich ISO/IEC 16262) standardisiert wird.
Weblinks zu ECMAScript, Webtechnologien, Frameworks, Web-Bibliotheken für mobile Plattformen:

Zugriff auf DOM-Nodes ECMAScript

Zu dem HTML-Tag

  <tag id="myid" ...

gehört eine DOM-Node ( ECMAScript-Element ). String "myid" identifiziert das Tag. Mit dem Seite-eindeutigen Universalattribut id="myid" kann das zugehörige Node-Element erhalten werden:

 var el = document.getElementById(id);

Kürzere Schreibweise mit der abkürzende Userfunktion $(id), etwa

 function $(id) { 
   return document.getElementById(id); 
 }

Mit der Laufzeit-Abfrage

 if (typeof id === "string") { ... }:

wird die Funktion universeller. id als Eingabe-Paramter kann eine Referenz auf eine String oder ein DOM-Objekt sein.

 function $(id) { var doc = document; 
   var el = doc;
   switch( typeof id ) {
     case "string": el = doc.getElementById(id); break;
     case "object": el = id; break;
     default: el = window;
   } return el;
}

Ereignisse ( onclick ) Events

Anzeige mit alert( this.tagName ) bzw. mit alert( $(this).tagName

<button class="border_bottom"
          onclick="alert( this.tagName )"> 
          alert( this.tagName ) 
  </button>
 
  <button class="border_bottom"
          onclick="alert( $(this).tagName )"> 
          alert( $(this).tagName ) 
  </button>

Hinweis: toggle Sichtbarkeit

Eine Funktion toggle_id ( id soll Sichtbarkeit "off/on" umschalten. Wie?

Anstelle von 
 if (el.style.display === hide) { 
   el.style.display = show; 
 } else { 
   el.style.display = hide; 
 }
 kann kürzer geschrieben werden:
 el.style.display = el.style.display === hide ? show : hide;

CSS-Class und el.classList .add .contains .remove .contains

Wie kann HTML-Attribut classList verstanden werden? Wie hängt style.className mit classList zusammen? Beispiel:

<script>
  function my_button_toggle(id, class1, class2) {
    var el = $(id);
    if (  !el.classList.contains( class2 )) { el.classList.add( class2 );
      if (!el.classList.contains( class1 )) { el.classList.add( class1 ); }
    } el.classList.toggle( class1 );
  }
 </script>
 
 <button id="BUTTON" class="class1 class2"
   onclick='my_button_toggle(this,"class1","class2")'> my_button_toggle(this,"class1","class2")
 </button>

decrypt_mailto Wie? Wozu?

<script>
 function decrypt_mailto(s) {var i,  n = 0, r = "";
 for (i = 0; i < s.length; i += 1) {
     n = s.charCodeAt(i); if (n >= 8364) { n = 128;}
     r += String.fromCharCode(n-1);
 }
 return r;
 }
 
 function linkTo_decrypt_mailto(s) {
   location.href = decrypt_mailto(s);
 }
 //alert(decrypt_mailto('nbjmup;BCD'));
 </script>

https://www.owasp.org/index.php/Main_Page

Beispiele für Zeichen: Emoji Cheatsheet https://www.copypastecharacter.com/symbols (auch als FF Add-on) ⁝ … ✖ « » ‹ › ⦉ ⦊ ⧀ ⧁ （） ⦑ ⦒ ☰ \u2630 <> \u003c\u003e ⟨⟩ \u27e8\u27e9 〈〉 \u3008\u3009 ＜＞ \uff1c\uff1e ∖ ∕ ⧹ ⧸ ｟｠ ► ▼ ▲ ⇨ ⇩ ↥ ↧ ⁕ ⁑ ⁂ ✪ ☀ ✹ ❇ ✺ ▲ △ ▶ ▷ △▲ △▴ ▵▶ ❖ ⁛ ⁜ ′ ″ ‴（）⁐ ☰ ☰ ≡≡ === function encrypt_mailto() { var n = 0; var r = ""; var s = "mailto:"+document.forms[0].emailField.value; var e = document.forms[0].emailField.value; e = e.replace( /@/, " [at] "); e = e.replace( /\./g, " [dot] "); for( var i=0; i < s.length; i++ ) { n = s.charCodeAt( i ); if( n >= 8364 ) { n = 128; } r += String.fromCharCode(n+1); } document.forms[0].cyptedEmailField.value = r; document.forms[0].HTMLCyptedEmailField.value = "a href=\"javascript:linkTo_decrypt_mailto('"+ r +"');\">"+ e +""; }

eMail Adresse:

Verschlüsselte eMail Adresse:

html code:

Diese Zeilen in <head></head> einfügen:

    <script type="text/javascript"> <!--
    function decrypt_mailto( s )
    {
        var n = 0;
        var r = "";
        for( var i = 0; i < s.length; i++)
        {
            n = s.charCodeAt( i );
            if( n >= 8364 )
            {
                n = 128;
            }
            r += String.fromCharCode( n - 1 );
        }
        return r;
    }

    function linkTo_decrypt_mailto( s )
    {
        location.href=decrypt_mailto( s );
    }
    // --> </script>

Die Benutzung ist frei und unterliegt keiner Garantie.

Plagiate sind out!
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine in der 1. Veranstaltung

Schrift, Information, Design und Web ·

Diese Zeilen in <head></head> einfügen:

Schrift, Information, Design und Web