App erstellt Präsentationen

Nach Goethe:
Auch aus den Steinen, die im Weg liegen, kann man eine schöne Zukunft bausen.


Projekt-Einführung ( Allgemeines ) überall Visualisierungen

Vorträge können medial und mit angemessene Gerätschaften unterstüzt werden. Geeignet medialen Unterlagen können der aktuellen Vortragspräsentation und auch dem Web-Auftritt dienen.

Beispiele ( Kontexte ): Grafiksoftware ( Kategorie ), Vortragsvisualisierungen, informative Grafiken, Visualisierung , Säulendiagramme, Balken- und Kreis-Diagramme, Diagramme , Tabellenkalkulation, Kalender, Geschäftsgrafiken, Desktop-Publishing, Unternehmenspräsentationen, Organigramme , Organisationsplan, Organisationsdiagramm, Slideshows , Tonbildschau, vertonte Schaubilder, Multivision, Multimedia, usw.

Siehe z.B.Google-Tool https://www.google.com/intl/de/slides/about/ 

Mediale Darstellungen und Design können übersichtlich, einfach und schlicht sein.
Mediale Darstellungen und Design können überladen, aufwendig und verwirrend sein.


Projekt-Kurzfassung ( "myPräsentationApp" ) Um was geht es?

Für das Erstellen von Präsentationen gibt es bereits unterstützende Programme, deren Anforderungen an die Bedienbarkeit einfachen/aufwendigen sein können. Bei diesem Projekt geht es um das Entwickeln einer Web-basierte "selfmade App", die dem Erstellen von webtauglichen Präsentationen dient. Projektname sei "myPräsentationApp".

Ideen zur "selfmade App".
a ) Beispiel: Einfaches Präsentieren mit dl-dt-dd Liste, Studienenführung ,
b) Beispiel: App für Präsentation-Erstellung ( für Blinde ).
c ) Beispiel: App zum Generieren von Sprüchen ( online, Bild hochladen, mit opacity Text darüber legen ).
d ) Beispiel: App zum Generieren von "Leitgedanken des Tages".
Nähere Hinweise in der Veranstaltung.



Hinweis: HTML-Quelltext und DOM-Nodes Unterschiede?

Tutorial Webanwendungen ( Wedel ), Trennung von Darstellung und Inhalt ( Wedel ), ...



Hinweis: CSS-Selektoren und DOM-Zugriffe Wie geht das?

Beim Rendern einer Seite dienen die CSS-Selektoren ( z.B. #myid, .myclass, dl > dt, ) der Zuordnung von CSS-Elementen zu DOM-Elementen.

Der ECMAScript-Code von "sizzlin = hot selector engine" emuliert die nativ CSS-Selektoren-Zugriffe.

Wie geht das mit den CSS-Selektoren? Einige Weblinks: CSS-Einfuehrung , CSS-Propertys , DOM mit CSS-Selektoren , CSS-Selectoren ( w3schools ).

Wie kann die DOM-Elementeauswahl mit CSS-Selectoren getestet werden?
Siehe z.B. CSS-Selectoren interaktiv ( Wedel )



Hinweis: HTML-Quelltext-Fragment in DOM-Fragment wandeln Wie?

Wie kann ein validiertes HTML-Quelltext-Fragment in nativ-DOM-Fragmente transformiert werden? Ein Fragment meint hier einen Quellcode-Sub-Baum und/oder einen nativ-DOM-Sub-Baum ...

  1. als validierten HTML-Quelltext
  2. als nativ-DOM-Fragment im Laufzeit-Kontext 
 <div id="teste_fragment">
  <p> Anzeige: An dieses p-Tag wird pre-fragment angefügt:</p>
 </div>

 <script>
 function fragment_erstellen(htmlStr, tgName) {
    tgName = tgName || "div";
    var frag = document.createDocumentFragment();
    var temp = document.createElement(tgName);
    temp.innerHTML = htmlStr;
    while (temp.firstChild) { frag.appendChild(temp.firstChild); }
    return frag;
 }
 function fragment_anfuegen(selector, frag) { // selector="#id"
    var ziel = document.querySelector(selector);
    ziel.appendChild(frag);
 }

var htmlStr = '<pre class="code"> <span class="rot">inner</span>HTML </pre>';

 var frag = fragment_erstellen(htmlStr);
 fragment_anfuegen("#teste_fragment", frag);
 </script>

Anzeige: An dieses p-Tag wird pre-fragment angefügt:

Einige Weblinks: Documenten Fragmente ( Mozilla ), ...



Hinweis: Erstellen von ECMAScript-Bibliotheken Wie?

Es gibt unterschiedliche Möglichkeiten, wie eine ECMAScript-Code-Bibliothek aufgebaut werden kann. Zu Bibliotheken gehört ein "Namensraum". Siehe die einführenden ECMAScript-Beispiele zu Namespaces . Wikipedia: Namensraum , Namensraum bei XML .

Beispiel für den Aufbau einer Bibliothek: 

var  my_obj =  (  function (doc) { "use strict"; 
   var win = doc.defaultView;

   function is_online() { 
     var p = window.location.protocol;
     return ((/(http|https)\:/).test(p)) && (!(/file\:/).test(p));
   }
   function get_dom_nodes(selektoren_str, parent_ele) {
      var par = parent_ele || doc;
      return par.querySelectorAll(selektoren_str);
   }
   function my_fn1(a,b,c) { ...
     return ...
   }
   function my_handler(k) {
     return function (event) { // test1: alert(event.target.tagName+" "+event.target.dataTd);
       ... dts = get_dom_nodes("dl > dt"),
     };
   }
   function init() {
     ... dts = get_dom_nodes("dl > dt");
     ... dts[i].classList.add("dt_passiv"); 
     ... dts[i].addEventListener("click",  my_handler (i), false);
   }
 
   return {  init:      init,
           is_online:  is_online,
           my_funct1: my_funct1,
           version:    "2017"
           } ; 

  } (document) ); 

 window.onload = function ( ) {  my_obj.init();
 };


Hinweis: App und Internationalisierung Wie?

Für jede Sprache wird eine zugehörige Text-Sammlung angelegt, hier msg_de, gespeichert im File msg_de.js
msg_de.js wird in die HTML-Seite includiert. Die Values werden mit JSON.stringify() erstellt. Aufruf etwa gemäß JSON.parse( msg_de.umlaute ) 

 var msg_de = (function () { "use strict"; 
  return {/// values erstellt mit JSON.stringify /////////

    umlaute: "Deutsche Umlaute sind <em>ä ö ü Ä Ö Ü</em>\n\n",,
    hinweis1: "<script>\n var i, obj = { }, arr= [ ]; \n</script>",

    ///////////////////////////////////////////////////////
    ver: 2017
  };
} ());





Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 24.10. 12.00 Uhr