ECMAScript-Applikationen (read-first) Valid XHTML 1.0 Transitional

Kundenanforderungen bedingen Client/Server-seitige Web-Entwicklungen. Eine nutzerzentrierte Agile Web-Softwareentwicklung versucht schnell zu reagieren. 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:

  ECMAScript-Standard 262 Ver.8 ,  en.wikipedia: ECMAScript 
  de.wikipedia: JavaScript-Versionsgeschichte 
  Frameworks   HTML5 ,  CSS3 

ECMAScript die "Sprache des Web" Crockford zu JavaScript

Brendan Eich gilt als Entwickler von JavaScript .
JavaScript entnimmt wesentliche Ideen aus den Sprachen Java , Scheme , Self .
Hier ist ein Weblink zu der JavaScript-Versionsgeschichte
Es gibt zahlreiche Dialekte en.wikipedia: Dialects .

Heute ist ECMAScript die "Sprache des Web" und Douglas Crockford schreibt:

JavaScript kam aus dem Nichts und breitete sich in alarmieren kurzer Zeit weltweit aus. Es gab nie eine Laborphase, in der sie ausprobiert und aufpoliert werden konnte. Sie wurde, so wie sie war, direkt in Netscape Navigator 2 integriert und war zu diesem Zeitpunkt nicht sonderlich ausgereift. Als Java®-Applets versagten, wurde JavaScript zur "Sprache des Web". Die Popularität von JavaScript hat nahezu nichts mit seiner Qualität als Programmiersprache zu tun.

ECMAScript:
String: charAt, charCodeAt, concat, contains, indexOf, lastIndexOf, match, quote, replace, search, slice, split, substr, substring, trim, toLowerCase, toUpperCase
Object: create, defineProperty, defineProperties, keys, getPrototypeOf, getOwnPropertyDescriptor, getOwnPropertyNames, preventExtensions, isExtensible, seal, isSealed, freeze, isFrozen
Array: pop, push, reverse, shift, sort, splice, unshift, concat, join, slice, indexOf, lastIndexOf, filter, forEach, every, map, some, reduce, reduceRight, contains Number: toExponential, toFixed, toLocaleString, toPrecision Function: apply, call, bind RegExp: exec, test Date: Date, [now]

Technologien ändern sich, sowohl das Machbare, wie das Verfügbare. Die "gängigen" ( proprietären ) Browser erfüllen (2016) ECMAScript 5/6 Standard mit gewissen Einschränkungen, siehe z.B. github ECMAScript compatibility table .
Brwoser haben eingebaute Funktionen, die mit den ECMASxript zusammenwirken und z.B. für Zugriffe auf DOM-Strukturen benötigt werden. Solche Funktionen sind an eingebaute Objekte gebunden, wie z.B. window, iframe, frame, links, location, event, history, AJAX, atob, btoa, usw. Siehe z.B. Browser-Objekt-Hierarchie .


Web-Technologien ( Web-Entwicklung ) Web-Engineering

Eine IT-Anwendung besteht u.a. aus Komponenten von Software , die mit Hilfe von Softwaretechniken zu einer Applikation werden. Ein Anwendungsprogramm (kurz Anwendung = Applikation, engl. application software, Anwendungssoftware ) braucht ein Betriebssystem und eine geeignete Laufzeitumgebung. Ein Anwendungsprogramm kann als eine Software-Zwischenschicht zwischen den jeweiligen Anwendungsfällen und dem Betriebssystem betrachtet werden.

Beim Design des www-Internets stand das Miteinander von kooperativen Nutzern in einer vertraulichen Umgebung im Vordergrund. Die Sicherheit war kein Kriterium bei der Entwicklung der Protokolle . Die Protokolle aus den Anfängen des Internets ( wie z.B. IP, UDP, TCP, DNS, SMTP, HTTP, SSL und BGP ) werden jedoch bis heute verwendet.

Web-Entwicklungen hängen zusammen mit gemeinsamen Vereinbarungen ( z.B. Protokollen, Sicherheitsanforderungen ), mit verteilten Hardware-Komponenten und mit vielschichtigen Software-Entwicklungen ( siehe z.B. de.wikipedia Kategorie: Web-Entwicklung , Web-Engineering )


Apps und Applikationen (allg.) Welche Art von Applikationen?

Der Begriff App ist eine engl. Kurzform für application. Oft bezeichnet Mobile apps Anwendungen für Smartphones und Tablet-Computer , die direkt installiert werden können (App Store von Apple, Windows Phone Marketplace von Microsoft, Android Market von Google, Nokias Nokia Store früher Ovi Store, AppWorld von RIM für die Blackberry-Geräte, PlayNow von Sony Ericsson, Samsung Apps).

Bei verteilten Systemen können Anwendungsteile lokal auf einem Arbeitsplatzrechner installiert sein und weitere Anteile auf einem entfernten Server laufen. Zahlreiche Arbeitsplatzrechner können dann z.B. per Netz den Server und Serverdienste nutzen ( de/en.wikipedia: Client-Server-Webanwendung (Bildquelle: wikipedia) , Webanwendung , Web application , verteilte Anwendungen ).


RIA und ARIA (Begriffserklärung) Was meint RIA, ARIA, JSONP, XSS?

Das Web entwicklt sich von einem rein statischen "Seiten-Lieferanten" hin zu einem Ausliefern von clienseitigen Web-Applikationen. Das Acronym RIA ( Begriff Rich Internet Application, deutsch: reichhaltige Internet-Anwendung) beschreibt eine Anwendung, die Internet-Techniken benutzt und eine intuitive Benutzeroberfläche hat. RIA braucht Programmlogik auf dem Client.

Webanwendungen können JavaScript, AJAX, JOSONP, Java Applets, Flash-Animationen, ActiveX-Plugins und mehr enthalten.

Das Acronym RIA ( Begriff Rich Internet Application, deutsch: reichhaltige Internet-Anwendung) beschreibt eine Anwendung, die Internet-Techniken benutzt und eine intuitive Benutzeroberfläche hat.

Eine RIA kann mit dem Nutzer interagieren und braucht i.a. nicht installiert werden. Vielfach basieren RIAs auf Web-Technologien (wie HTML, CSS, JavaScript, AJAX), die von den meisten Browsern (ohne zusätzliche Plugins) unterstützt werden. Ein Teil der modernen Browser ermöglicht bereits die Verwendung des Accessibility-Standard. Die ARIA-Spezifikation (Richtlinie) wurde vom W3C und der WAI (Web Accessibility Initiative) erarbeitet, um Webseiten und Web-Anwendungen für behinderte Menschen besser zugänglich zu machen.

ARIA (Accessible Rich Internet Applications) ist eine rein semantische Erweiterung für HTML, die das Layout von Webseiten nicht ändert. ARIA macht mit JavaScript und Ajax angereicherte Webseiten und Webanwendungen besser für Behinderte zugänglich (allg. Benutzerfreundlichkeit, Barrierefreiheit dynamischer Seiten, blinde Menschen, Screenread-Nutzer).


de.wikipedia:      Rich_Internet_Application 

ARIA macht mit JavaScript und Ajax angereicherte Webseiten und Webanwendungen besser für behinderte Menschen zugänglich. Siehe z.B.


www.w3.org:   W3C wai-aria
,

de.wikipedia:      Accessible_Rich_Internet_Applications
, 

developer.mozilla: ARIA_User_Agent_Implementors_Guide
,

de.wikipedia:      Web_Content_Accessibility_Guidelines
, 

de.wikipedia:      Widgets
,

hacks.mozilla:     Offline web applications
,

de.wikipedia:      Gadget (MS-Desktop-Mini-Anwendungen)
,

de.wikipedia:      HTML-Applikation (Windows)


Bemerkungen zu Browser (Stand 2011) Typische Browser

W3C-Empfehlungen haben eine hohe Verbindlichkeit aber keine gesetzliche Gültigkeit. W3C-Empfehlungen sind patentfreie, unparteiische, plattformunabhängige Quasistandards bisherige Recommendations des W3C:

WCAG,	XHTML,	SMIL,	OWL,
XML,	XML Schema, DOM,	XSL,
XSLT,	RSS,	CSS,	XPointer,
HTML,	PNG,	SVG,	RDF,
XLink,	VoiceXML,	XPath,	XQuery,
MathML,	XForms).

Die ECMAScript-Ausbaustufe kann für gängige Browser Browser-ECMAScript-Compatibilities ES6 nachgesehen werden.

  ECMAScript-Weblink:  ECMAScript-Standard 262 Ver.8 ,
                      de.wikipedia: JavaScript-Versionsgeschichte .
  Webtechnologien:     HTML5 ,  CSS3 
  Compatibility tables of HTML5, CSS3, SVG and more: 
  Browser-Compatibilities werden bei Cross-Browser-Entwicklungen benötigt

Hier Wikipedia-Übersichtsartikel Liste von Webbrowsern oder Webbrowser oder Web Browser Hier die Browserentwicklung bei wikipedia: Timeline_of_web_browsers .svg , .png , Timeline_of_web_browsers , Versionsgeschichte , google.de trends firefox, chrome, ie, safari, opera

Für eine propritäre Unabhängikeit ist die Verhaltenskonformität von unterschiedlichen Browsern ( Cross-browser ) wesentlich.
Es gibt Browser-Vergleichstabellen (siehe z.B. github: es5-compat-table für ECMAScript 5. Es gibt Browsertests (siehe z.B. wikipedia: Acid-Browsertests ), die eine Standardkonformität meßbar machen möchten. Der Acid3-Browser-Test möchte die Konformität von "dynamic Web applications" messen, insbesondere

DOM2 Core, DOM2 Events, DOM2 HTML, DOM2 Range, DOM2 Style (getComputedStyle, …),
DOM2 Traversal (NodeIterator, TreeWalker), DOM2 Views (defaultView),
ECMAScript, HTML4 (<object>, <iframe>, …),
HTTP (Content-Type, 404, …), Media Queries,
Selectors (:lang, :nth-child(), combinators, dynamic changes, …),
XHTML 1.0,
CSS2 (@font-face), CSS2.1 ('inline-block', 'pre-wrap', parsing…),
CSS3 Color (rgba(), hsla(), …), CSS3 UI ('cursor'),
data: URIs,
SVG (SVG Animation, SVG Fonts, …)

Der "Weg der Browser-Karawane durch die Zeit" wird an der "Rückwärtskompaktibilität" zu alten Homepages und deren aktueller Anzeige durch unterschiedliche Browser-Versionen sichtbar. Um unschöne Darstellungsgeffekten zu vermeiden gibt es z.B. Conditional Comments (kurz CC) , die als Browserweichen eingebunden werden können. Style-Beispiel für den IE:

<meta http-equiv="X-UA-Compatible" content="IE=8" />
oder auch
<style type="text/css" >
  @import url("/css/styles.css");
</style >
<!--[if gte IE 5]>  <link rel="stylesheet" type="text/css" href="/win_ie.css" /> <![endif]-->
<!--[if IE 6]>  <link rel="stylesheet" type="text/css" href="/css/win_ie6.css" /> <![endif]-->
<!--[if IE 7]>  <link rel="stylesheet" type="text/css" href="/css/win_ie7.css" <![endif]-->

Beispiel: Das Google Web Toolkit (GWT) bietet ein Java-API, um Web-basierte RIAs zu entwickeln. Dazu wird der Java-Code mittels Cross-Compiler in JavaScript-Code umgewandelt. GWT benötigt zur Laufzeit einen aktuellen Browser aber keine Browser-Plugins.


:: Was ist "Sicherheit"? Einführendes

IT-Entwicklungen können von proprietärer Software abhängen ( Firmware, Bibliotheken, Tools, usw. ).

 Unüberschaubare Abhängigkeiten von proprietären Fremdsoftware-Komponenten
 bergen unüberschaubare Sicherheitsrisiken und können 
 die Lebensdauer der eigenen Entwicklungen begrenzen.

Sicherheit ist ein fassettenreicher Begriff. Sicherheit umfaßt z.B. Technische Aspekte, Sicherheitstechniken, Angriffssicherheit, Betriebssicherheit, Systemsicherheit, Ausfallsicherheit und auch individuelle/zwischenmenschliche/kollektive/wirtschaftliche Sicherheiten. Beipiel: Zu Clouddiensten können ausländische und inländische Rechtsräume mit uneinklagbaren Zuständigkeiten gehören, wobei ggf. der Kunde den Ausfall von Geräten oder Infrastruktur, Softwareschwachstellen und menschliches Versagen und andere unwägbare Beeinträchtigungen tragen soll. 2016 gibt es "proprietäre Versuche", mit Hilfe von "partnerschaftlichen Verträgen" eigene Verantwortung für geheime Software an "andere" zu deligieren. Wer kontrolliert die Vefügbarkeit und Zuordnung von Diensten? Welches Recht gilt?

Zur IT-Sicherheit gehören u.a. Advanced Techniques in Binary Exploitation, Mathematische Methoden und Algorithmen in der Kryptologie, Anomaly Detection Challenges, Rootkit Programming, Security Bugs Fixing, Web Application Security, Reverse Engineering, Binary Exploitation, Exploiting Games, usw.

Zur Web-Sicherheit gehören u.a. Injection-Schwachstellen ( SQL-Injections, Command-Injections ) Cross-Site-Scripting (XSS), Cross-Site-Request-Forgery (CSRF), Include-Schwachstellen, Upload-Schwachstellen, Konfigurations-Schwachstellen.

 Die  Datenschutz-Grundverordnung  
 ( Verordnung der Europäischen Union gültig ab  25. Mai 2018)
 versucht Regeln zur Verarbeitung personenbezogener Daten 
 durch private Unternehmen und öffentliche Stellen zu regeln.
 Der Datenschutzrahmen 
 ( EUROPÄISCHE PARLAMENT, Europäischer Datenschutzrahmen für das 21. Jahrhundert)
 soll dem Schutz der Privatsphäre in einer vernetzten Welt dienen.
 Siehe auch MS EU-Datenschutz 
 ( Datensparsamkeit, Grundverordnung ist gültig ab  25. Mai 2018, 
   GDPR = General Data Protection Regulation ).

Die Professionalisierung der Angriffsmittel und Angriffsmethoden und "Assume the breach" gehören 2016 leider zur Informationstechnologie ( siehe BSI = Bundesamt für Informationssicherheit in Deutschland: Lage der IT-Sicherheit in Deutschland, Unternehmen sollten von erfolgreichem Cyber-Angriff ausgehen.

Geheim, Vertraulich, Intern, Öffentlich Allgemeines

Zur Verbesserung der Informationssicherheit kann eine internationale Zertifizierung von Informationssystemen beitragen. Ein "sichers System" möchte die interne/externe Integrität und Konsistenz bewahren und unzulässige System-Modifikationen durch autorisierte/unautorisierte Anwender verhindern. Oft werden die folgenden Zustände unterschieden:

 Geheim  
Vertraulich
  ↓ ... darf nicht nach unten schreiben
  ↑ ... darf nicht von  obenlesen lesen  
 Intern     
 Öffentlich 

Informationssicherheit "toter" Weblink

Einführend wird eine ungewünschte Attacke gezeigt. Diese einfache Attacke kann in den Sicherheitsgrenzen des Browsers z.B. seitenübergreifende Cookies, tracking Cookies, localStore, Rückmeldungen per AJAX usw. benutzen.

Ein Link auf eine Seite ( 404 File not found ) würde dem Betrachter eine nicht vorhanden Seite ("toter Link") zeigen, was tatsächlich passiert, bleibt dem Betrachter verborgen.

<!DOCTYPE html><html lang="de">
<head><title>Object not found!</title>
<meta charset="utf-8">
<link rev="made" rel="follow" href="mailto:unbekannte@e-mail-adresse.de" />
<style type="text/css"><!--/*-->*/
/**/--></style>
</head>
<body>
<h1>Object not found!</h1>
<p>The requested URL was not found on this server. The link on the 
<a href="http://www.wohlklingen-schoen.de/tags/">referring page</a> 
seems to be wrong or outdated. Please inform the author of 
<a href="http://www.wohlklingen-schoen.de/tags/">that page</a> 
about the error.</p>
<p>If you think this is a server error, please contact the 
<a href="mailto:unbekannte@e-mail-adresse.de">webmaster</a>.</p>
<h2>Error 404</h2>
<address>
<a href="/">www.wohlklingen-schoen.de</a><br />
<span>Wed Dec 1 16:17:18 2013<br />Apache/2.2.0 (Linux/SUSE)</span>
</address>
</body></html>

Informationssicherheit ( Organisationen ) BSI, WASC, WASC

Das Internet ist ein weltweites System, das auf adressenbasierten Vermittlungen von Informationen beruht. Das weltweite Internet ist ein unübersichtlicher Tummelplatz für Nutzware und Schadware (siehe z.B. Informationssicherheit ). Die Sicherheit in internationalen Netzen und die Art und Weise wandeln sich fortwährend und fordern eine hohe Sicherheit bei Browsern.

Informationssicherheit möchte

  • Vertraulichkeit, Verfügbarkeit und Integrität garantieren,
  • vor Gefahren bzw. Bedrohungen schützen,
  • Schädigungen vermeiden und Risiken minimieren.

Wer ist die "verbürgende Vertrauensautorität" ( propritär?, staatlich?, ... ) ? Welches sind die "besten" Zertifizierungsstellen und welche Zertifikate ( engl. CA = Certification Authority, siehe z.B. Windows Start certmgr.msc ) sind ohne Mängel? Siehe z.B. de.wikipedia Zertifizierung und Stichworte, wie Gütesiegel‚ Gütezeichen oder Qualitätssiegel, Prüfzeichen oder Prüfsiegel. Siehe z.B. Prüfsiegel


Information und Online-Tracker Was ist das?

Wer im Internet surfend unterwegs ist aggiert adressbasiert. Ein Internet-Surfer nutzt einen Browser, der bei jedem Request Adressen braucht, um Daten anzufordern. Die Navigation innerhalb von Webseiten sagt etwas über den Besucher. Firmen, Werbe-Netzwerke, Soziale-Netzwerke sind i.a. am Kundenverhalten interessiert. Was wird bevorzugt? Was wird wann und in welcher Reihenfolge angeklickt?

Mit Hilfe von Online-Trackern werden solche Daten gesammelt, mit verarbeitenden Programmen analysiert, geordnet und gruppiert ( Laufzeitanalyse, Profilbildung ).

Zahlreiche Internet-Aktivitäten unterliegen sichtbaren/verborgenen/maschinellen Beobachtungsmöglichkeiten.

  • Wie können die erstellten Daten-Kongregationen eingesehen/gelöscht werden?
  • Wie können die verborgenen Aufzeichnungen von Browser-Aktivitäten eingeengt/gestoppt werden?

Sicherheit ( Gremien ) und Organisationen ) Wer macht was/wofür?

Es gibt Gremien und Organisationen, die sich um die Eindämmung von "Schadware" bemühen. Zum Schutz persönlicher Daten sollte der informationssuchende Nutzer befähig sein, selbst zu kontrollieren, ob seine Suchmaschinenanfragen aufzeichnet, ob und wie seine IP-Adressen gespeichert und/oder Tracking-Cookies benutzt und welche Informationen an Dritte weiter gereicht werden. Wie ist die Transparenz für den Kunden zu gewährleisten? Welche staatlichen Vorgaben vertreten die Kundenwünsche und welche Einengungen der Freiheit sind hinzunehmen? Wie schützt der Staat sich selbst und seine "Untertanen" vor einen möglichen "staatstragenden Big-Brother-Ego"? Hier einige Beispiele zu Gremien und Organisationen:

Diese zehn wichtigsten Bedrohungen für die Sicherheit von Webanwendungen sind (2013, OWASP Top Ten 2013).

A1 Injection
A2 Broken Authentication and Session Management
A3 Cross-Site Scripting (XSS)
A4 Insecure Direct Object References
A5 Security Misconfiguration
A6 Sensitive Data Exposure
A7 Missing Function Level Access Control
A8 Cross-Site Request Forgery (CSRF)
A9 Using Components with Known Vulnerabilities
A10 Unvalidated Redirects and Forwards
Diese zehn wichtigsten Bedrohungen für die Sicherheit
von Webanwendungen sind (2012,  OWASP Top Ten 2012).
A1 – Injection
     z.B. SQL-, OS- oder LDAP-Injection
A2 – Cross-Site Scripting (XSS)
     z.B. Seiteninhalte ändern,
     Benutzer umleiten, Sitzungen übernehmen
A3 – Fehler in Authentifizierung und Session Management
     z.B. schwaches Session Management,
     Passwörter oder Sessiontoken kompromittieren,
     Authentifizierung, Identität-Diebstahl
A4 – Unsichere direkte Objektreferenzen
     z.B. Manipulation von internen Implementierungsobjekten,
     unautorisierte Zugriffe auf Daten, Dateien, Ordner,
     Datenbankschlüssel
A5 – Cross-Site Request Forgery (CSRF)
     z.B. Manipulationen nach Identität-Diebstahl des
     angemeldeten Benutzers,
     Session Cookies, Authentifizierungsinformationen
A6 – Sicherheitsrelevante Fehlkonfiguration (NEU)
     unsichere Default-Konfiguration
     (Apps, Frameworks, Applikations-, Web- und Datenbankserver,
     aktualisierte Bibliotheken und Komponenten)
A7 – Kryptografisch unsichere Speicherung
     auslesen von mangelhaft verschlüsselten, sensible Daten,
     wie Kreditkartendaten oder Zugangsinformationen
A8 – Mangelhafter URL-Zugriffsschutz
     z.B. realisiert Zugriffsberechtigungen
     nur durch Ein/ausblenden von Links,
     mangelnde Prüfung der 'erspähten' Zugriffsberechtigung
A9 – Unzureichende Absicherung der Transportschicht
     z.B. abgelaufene oder ungültige Zertifikate,
     schwache oder keine Verschlüsselung und Authentisierung
A10 – Ungeprüfte Um- und Weiterleitungen (NEU)
      z.B. Ausgepähte Umleitungsziele werden auf Phishing-Seiten
      oder Schadcodeseiten weitergeleitet

ECMAScript und Sicherheit Was ist unsicher?

Heute sind Vertraulichkeit, Integrität und Verfügbarkeit wichtige, hinterfragungswürdige Begriffe. Das E-Mail-Internet-Protokoll nutzt das Domain Name System (DNS, Namensauflösung) und kann die Sender-Identität verschleiern. Angriffe mit seitenübergreifendes Scripting (engl. XSS Cross-Site-Scripting gibt es seit etwa 1995.

  • Zu Web-Schwachstellen und Web-Gefährdungen gehören u.a.
    • Injection-Schwachstellen ( SQL-Injections, Command-Injections ) ...
    • Cross-Site-Scripting (XSS) ...
    • Cross-Site-Request-Forgery (CSRF) ...
    • Include-Schwachstellen ...
    • Upload-Schwachstellen ...
    • Konfigurations-Schwachstellen ...
  • Statisches Includieren von script-Code bei "Hackerseiten", die z.B. durch Anhängen eines Get-Anteiles an eine URL, "Gewünschtes" übermitteln möchten. Dies können mehr oder minder sensible Daten des Benutzers sein, die der Browser lokal aus DOM-Injection oder lokalem Cross-Site-Scripting bekommen kann.
  • Serverseitig generierte Seitenteile, die Benutzereingaben (z.B. zur Verbesserung, ggf. mit Injektion-Code ) zurückschicken (reflected Cross-Site-Scripting)
  • Auslieferung von persistentem Schadcode durch Fremdserver bei jedem Seitenaufruf

Mit AJAX ( Asynchronous JavaScript and XML ) kann ECMAScript auf Objekte einer anderen Webseite zuzugreifen, wenn sie aus derselben Quelle (Origin) stammen. SOP ( Same-Origin-Policy ) ist ein Sicherheitskonzept (siehe en.wikipedia Same-Origin-Policy ).
"Cross-Site Request Forgery" möchte SOP umgehen. Für AJAX gilt SOP ( Same-Origin-Policy ). Zugriffe werden nur erlaubt wenn gilt document.domain === anderes_window.document.domain

Wie kann Sicherheit gewährleistet werden?
Wie kann eine geprüfte Einhaltung von sicherheitsrelevanten Eigenschaften garantiert werden?
Wie können Entwickler unsicheren Code erkennen, vermeiden?
Es sind weitere Ergänzungen erforderlich ...... Hinweis auf "use strict"; und JSLint ...


Laden von ECMAScript-Code Was ist daran ungünstig?

Wie wird ECMAScript-Code in die Seite includiert?

<script type="text/javascript" src="./incl/daten.js"></script>

Was kann damit gemacht werden? Was kann mit
document.write('<noscript>JavaScript aktiviert?</noscript>'); gemacht werden?
Mit script-include und document.write() kann SOP ( Same-Origin-Policy ) umgangen werden.
Beispiel: jQuery.getScript(url,callback);
Beispiel: oft benutzt!
Beispiel: Welcher weltweit aggierender Internetkonzern benutzt z.B. analytics? Bitte nachfolgendes anschauen und analysieren:

Die EU-Cookie-Compliance sieht eine Zustimmung "Ich stimme zu, dass diese Seite Cookies für Analysen, personalisierte Inhalte und Werbung verwendet" vor. Doch wer verantwortet unüberschaubare, hilfreichen Fremdcode, der in guter Absicht in eine Seite eingefügt wird, wenn die potentielle Möglichkeit besteht, daß der Fremdcode die Seite des Seitenbetreibers, die Legitimation des Einfügenden und die Integrität des Benutzer kompromitieren kann?

Ein Angreifer, der einen kleiner Zugangsspalt öffnet, kann beliebig zusätzlichen Code von irgendeinem Server der Welt anfordern und Serverrequests ausführen, sehen was der User sieht, Passwörter abfragen und Geräte kontrollieren.

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? 
               "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + 
        "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try { var pageTracker = _gat._getTracker("UA-...numer...-3");
pageTracker._trackPageview();
} catch(err) {}</script>

Ist Seite geladen? Wann ist der frühester Zugriff auf DOM-Elemente?

Beim Programmieren von Web-Apps wird der Zugriff auf die DOM-Elemente benötigt. Hierzu ruft das System eine Callbackfunktion window.onlode auf. Diese Funktion wird aufgerufen, wenn die Seite vollständig gerendert ist.

- Laden des Benutzerskriptes am Ende der HTML-Seite
- onload-Ereignis nutzen
- onlod im Body-Tag
- Welche System-Events gibt es noch? 

window.onload = function () {
  // ECMAScript-Code kann nach dem 
  // vollständiger Laden und Rendern aller Elemente
  // auf geladenen DOM-Baum zugreifen
}

Was meint JSONP? SOP ( Same-Origin-Policy )

SOP wird nicht verhindert, wenn eine Seite Script-Code (von unterschiedlichen Domain's) dynamisch in die Seite nachläd ( z.B. Einbettung eines iFrames von einem Drittanbieter ) und dann z.B. mit AJAX/XMLHttpRequest Web Services, das JSONP unterstützt, aufruft. JSONP ist eine Kombination von "On-demand JavaScript" und "Same-origin’s flexibility for adding JavaScript from different domains" (Bespiele Flickr, Google-Maps, usw.).

JSON meint nach wikipedia JavaScript-Object-Notation , JSONP und hängt zusammen mit Mashup (web_application_hybrid) , Mashup (Internet) jsonp-api-in-4-schritten .

SOP wird nicht verhindert, wenn eine Seite Script-Code (von unterschiedlichen Domain's) dynamisch in die Seite nachläd ( z.B. Einbettung eines iFrames von einem Drittanbieter ) und dann z.B. mit AJAX/XMLHttpRequest Web Services, das JSONP unterstützt, aufruft. JSONP ist eine Kombination von "On-demand JavaScript" und "Same-origin’s flexibility for adding JavaScript from different domains". JSONP meint JSON mit Padding. Dies ermöglicht die Übertragung von Daten über Domaingrenzen und funktioniert (stark vereinfacht) mit script-include und einem GET-Anteil, wie z.B. src="http://example.com/getjson?jsonp=Rueckruf"

function append_js_to_body (script_text) { //globales eval
  var doc = document;
  var t   = doc.createElement('script');
  t.type  = 'text/javascript';
  t.defer = false;
  t.appendChild(doc.createTextNode(script_text));
  doc.body.appendChild(t);
  doc.body.removeChild(t);
}
function include_js_in_head (url_js) {
    var script = document.createElement('script');
    script.setAttribute("type", "text/javascript");
    script.setAttribute("src", url_js);
    document.getElementsByTagName('head')[0].appendChild(script);
}
// in Seite z.B.
<a onclick="include_js_in_head('url_js')">Loading Only Once</a>
//Die url_js - Datei enthält z.B.
function include_js_in_head() { // ueberschreibt
  // jetzt viel viel Code in url_js
}
// hier kommen weitere Funktionen und globale Variablen 
// und dann Aufruf von
include_js_in_head(); // startet die neue Funktion

Verwenden von AJAX Wo liegen die Unterschiede zum Code-Laden?
 Die Demo-Seite muss vom Server und ueber das linke Menu geladen werden, sonst gibt es einen security error: 
http://www.cilie.org/esa/beispiele/load_xml_page_mit_ajax.htm

:: Projekte Hinweise, Beispiele

Projekte: Welche? Wofür? Wann? Wozu? Wie? MmHhh ...

Hier kommen lediglich Hinweise, Bemerkungen und Stichworte zu den Projekten. Details werden in der Veranstaltung besprochen.

Beispiele von Projekten frühere Projekte
  1. "Abi-Mathe" ( Zahlenbasis, ... )
  2. Authoring Tools
  3. Rich, Animated Interface für Web Applikation
  4. Entwicklung eines kleinen online-Tools, für spontane (ad hoc, anonyme) Mitwirkungsmöglichkeiten. Bei seminaristischen Veranstaltungen können sich ergeben: Mitwirkungsmöglichkeiten bei "Content-Questions", Partipicipationen am gemeinsamen Wissen, vermehrte Konzentration, Achtsamkeit und Engagement bei der Veranstaltung, und (ad hoc, anonymes) Feedback bei Kurzpräsentationen, spontane Evaluationsergebnisse. Siehe z.B. en.wikipedia: Audience_response - Systems für Seminaristische Veranstaltungen mit anonyme-spontanen (ad hoc) Mitwirkungsmöglichkeiten.
  5. Entwicklung eines kleinen online-Tools zur Unterstützung von Peer-Review ( Begutachtung durch Ebenbürtige ) für die Signifikanz und Aktualität von Fragestellung, die Originalität und Validität ( Wirksamkeit, Gültigkeit, Gütequalität ) des Lösungsansatzes, die Plausibilitätsprüfung von Resultaten im Kontext und das Aufspüren von methodische Fehlern.
  6. Entwicklung von desktopähnlichen Webanwendungen, client-side applications, personalisierte Widgets, Desktop-Gadgets w3.org: widgets, de.wikipedia: Widget, en.wikipedia: GUI_widget
  7. Werkzeuge für Entwickler (siehe z.B. http://jsfiddle.net/pJgyu/6654/)
  8. Halbautomatische Spreadsheet-Erstellung für Kleinbetriebe
  9. Miniaturisierte Desktop-Anwendungen (unabhängig von Plattform und Device; Widgets, ...)
  10. ECMAScript Edition 5 (December 2009,"save mode")
  11. XML/XHTML-"Editor", CSS-"Editor"
  12. Lehrprogramme, Fragebogen
  13. Page-Transformationen (statisch nach dynamisch)
  14. XSLT-Transformationen
  15. Internationalisierung von ARIAs
  16. localStorage.setItem(key,val), localStorage.getItem(key)
    var obj = { 'one': 1, 'two': 2, 'three': 3 };
     localStorage.setItem('obj', JSON.stringify(testObject));
     var retrievedObj = localStorage.getItem('obj');
     console.log('retrievedObj: ', JSON.parse(retrievedObj));
    
  17. HTA-Applikationen (Windows, Powershell-Objekte)
  18. Tool für die Erstellung von Silverlight-Applikationen
  19. SVG-"Editor", Silverlight
  20. Propietäre Toolkits, Simulationen, interaktive Geometrie
  21. Konzepte zur beständigen Dockumentensicherheit, auch zwischen ECMAScript (Client) und PHP (Server)
  22. Automatische Erstellung von Dokumentationen aus Dokumenten
  23. Converting syntax highlighting source code to formatted text with syntax highlighting
  24. Semantic Web Development Tools


  • Rollen in Projekten
  • Projektauftraggeber
  • Projektentscheider
  • Projektleiter / Projektmanager (PL, PM)
  • Fachentscheider (-kreis)
  • Teilprojektleiter (TPL)
  • Projektmitarbeiter
  • Steering Committee / Projektlenkungsausschuss ("PLA")
  • Review Team (vor allem bei Softwareentwicklungsprojekten)
  • Controlling
  • Effizienz
  • Kernteam
  • Lernen durch Lehren
  • Projektarbeit
  • Projektentwicklung
  • Projektmanagement
  • Projektsteuerung
  • Projektphasen
  • Qualitätssicherung
  • Projektgegenstand


Screencast bei Projekten

Screencast Wie können RIA präsentiert werden?

Es gibt zahlreiche Abhängigkeiten, Überdeckungen und Ähnlichkeiten zwischen Screencast, Desktop Monitoring, Screen Recording, Screen Capture, Desktop Monitoring, "Bildschirmvideos", Screencast-Bibliothek; Viewlet und Video, Podcampus, E-Learning-Podcast, Multimedia Portal, usw.

Ein "Screenshot" entspricht einer einzelne (Teil-) Aufnahme des Bildschirms.

Ein Screencast entspricht der Zusammenfassung einer Folge von solchen Bildern zu einem gefertigten Film (Screen = Bild oder Bildschirm; cast = broadcasting). Ein Screencast (engl.) ist ein digitaler Film, der den Computer-Bildschirm (Desktop) wiedergibt und einen Audio-Kommentar enthält. Der Begriff Screencast (engl.) geht auf Jon Udell (2004) zurück.

Ein Screencast kann in anschaulicher Weise die Bedienung von Software aufzeigen und komplizierte (desktop-) Abläufe wieder geben. Bedienungs- und Installationsvorgänge können demonstriert werden. Ein solcher Film kann nachbearbeitet werden.

Ein Screencast ist eine digitale Präsentation, die meistens dem Zweck dient, Bedienungs-, Installations- oder sonstige Arbeitsschritte einer Software web-, video- und häufig auch audiobasiert zu demonstrieren. Wie auch generell bei einem Webcast, besteht normalerweise die Möglichkeit, die Aufzeichnung des Screencasts nachträglich jederzeit erneut betrachten zu können. Die auf e-teaching.org regelmäßig durchgeführten Online-Schulungen sind Beispiele für Screencasts, deren Aufzeichnung Sie jederzeit (noch einmal) betrachten können.

Ein Screencast (engl.) ist meist nur wenige Minuten lang und kann die Aufmerksamkeit des Zuschauers durch Spotlighting auf die wesentlichen Bildbestandteile leiten.


Generation Z Was ist "Z-typisch"?

Die Geburten-Jahrgänge 2000 bis 2015 werden schlagwortartig als Gen Z ( Generation Z ) bezeichnet.
Typische Merkmale sind etwa:
als Kleinkind bereits Kontakte mit Smartphones und Tablet-PCs, selbstverständlichen Gebrauchs von digitalen Technologien, World Wide Web, MP3-Player, Smartphon seit Kindesalter, Digital Natives,

Gemäß soziologischer Untersuchungen wird der Generation Y wird Sinnsuche in der Arbeit zugeschrieben. Die Generation Z möchten eher beruflich Karriere machen und Führungspositionen erreichen und etwas "nach außen darstellen", materielle Reichtümer treten hinter dem Streben nach Anerkennung zurück. Nach Klaus Hurrelmann gibt Hinwendungen und bewusste Bestrebungen, Umwelt und Gesellschaft zu verändern. Netzwerke sind ihnen wichtig. Siehe z.B. de.wikipedia: Generation Z .

Typische Beobachtungsmuster sind etwa:

  • Sinnsuche im Tun
  • Konkretes Ziel anstreben
  • Etwas tun, was man im Alltag wirklich brauchen kann
  • Gewünschte "Realitätsnähe"
  • Möglichst gemeinsames lernen und arbeiten, um Sachverhalte, um Bedeutungen und Kontexte besser Einschätzen zu können
  • Eine durchtragende Gemeinschaft ( "Vernetzwerkkultur", Community ) mit logisch-vernetzten Einbettungen
  • Bedingt auch nachhaltige Selbsterprobungsmuster mit unterschiedlichen Wegen zu konkreten Zielen

Spannweiten zwischen Individualität und Bildung Bildung und/oder Ausbildung?

Nachfolgend geht es lediglich um Stichworte und Assoziationen im Bildungskontext der Veranstaltung, um Beziehunggeflechte zwischen technologischer Aktualität und wissenschaftlichem Arbeiten und um Befähigungen zu methodisch-systematisches Vorgehen und individuellen Sichtweisen. Hier findet sich einiges zu Lehr- und-Lernkonzepten .

  • Mundgerechte didaktische Stoffvermittlung und selbständiges Forschen und Erarbeiten
  • Präsentation eigener Arbeiten und konstruktive Kritik der Gruppe
  • Individuelle Bequemlichkeiten und Diskussionsbereitschaft in der Gruppe
  • Einbettungen und Rückkopplungen von Fragen, individuellen Sichten und soziale Kontaktfähigkeiten
  • Präsentation eigener Arbeiten und konstruktive Kritik der Gruppe
  • Fachübergreifende Aspekte und individuelle Interessen und Sichten
  • Individueller Erwartungshorizont und aktuelle Wissensbasis der Gruppe
  • Evaluation, Selbsterkenntnis, Monitoring, Begrenzungen, Self-Assessments, Selbständigkeit, Betreuungsangebote, Intesität der Nutzung und weitere ...

Projekte und Handlungskompetenz Allgemeines?

Einstein (1934): [Es] sprießen aus der menschlichen Gesellschaft nur dann wertvolle Leistungen hervor, wenn sie genügend gelockert ist, um dem Einzelnen freie Gestaltung seiner Fähigkeiten zu ermöglichen.

Bei Lehr- und Lernprozesse haben Projekte und "learning through interaction" einen eigenen Stellenwert. In de.wikipedia: Handlungskompetenz steht:

"Im handlungsorientierten Unterricht sollen die Schüler oder Studenten Handlungskompetenz(en) für die außer- und nachschulische Lebenswelt entwickeln. Methodisch wird dieses Ziel über ein aufgaben- und ergebnisorientiertes learning by doing bzw. learning through interaction – oft in Partner- oder Gruppenarbeit – angegangen. Hierdurch wird auch die emotionale Seite der Schüler angesprochen und damit ihre sozial-affektiven Kompetenzen gefördert."

Zu einer Veranstaltung gehören soziale und individuelle Unterschiede und Zusammenhänge. Die Bewältigung bestimmter Lehr- und Lernprozesse kann erfolgreicher sein, wenn achtsame Konzentration auf den Gegenstand und die Bereitschaft zur aktiven Teilnahme vorhanden sind (siehe z.B. de.wikipedia: Kompetenz )

Kultusministerkonferenz vom 5.2.1999:
"Handlungskompetenz wird verstanden als die Fähigkeit des Einzelnen, sich in beruflichen, gesellschaftlichen und privaten Situationen sachgerecht, durchdacht, sowie individuell und sozial verantwortlich zu verhalten."

Infolge der vielfältigen Abhängigkeiten und unüberschaubarer Komplexität bei Entwicklungsprojekten kann ein empirisches, inkrementelles und iteratives Vorgehen angezeigt sein, wobei die aktuelle Zustandstransparenz mit Funktionsprüfungen und zielgerichtete Anpassungen verbunden wird ( siehe z.B. de.wikipedia: Vorgehensmodell der Softwaretechnik ).


Projekte (allgemeines) Welche?

Zu den Projekten ( de.wikipedia; von lat. proiectum, Neutrum zu proiectus 'nach vorn geworfen', proiacere 'vorwärtswerfen') gehören aufeinander abgestimmte Tätigkeiten und Anfangs- und Endtermine. Umgangssprachlich wird ein Projekt auch als Vorhaben mit Entwurfscharakter bezeichnet. Ein Projekt beginnt mit einem konkreten Projektauftrag (Näheres in der Veranstaltung). Die vielschichtigen Vorgänge sollen zu einem angestrebten Ziele führen (Präzisieren der Probleme, Entwerfen des Lösungsansatzes, Simulieren der Lösung).

Blazek (1991):
Eine Aufgabenstellung kann und sollte in der Regel als Projekt betrachtet werden, sofern das zu lösende Problem relativ komplex erscheint, der Lösungsweg zunächst unbekannt ist, aber bereits eine Zielrichtung und ein Zeitrahmen vorliegen, und/oder bereichs-/fachübergreifende Zusammenarbeit erforderlich ist.

Projektinitiierung (z. B. Projektziele, Kick Off, Stakeholder) Projektplanung (z. B. Aufgabenplan, Ablaufplan, Risikomanagement, SWOT Analyse) Projektdurchführung (z. B. Kommunikationskonzepte, Controlling) Projektabschluss (z. B. Lessons learned).

Projekte

Ein Projekt ist nach DIN 69901 ( Deutschen Instituts für Normung e. V. ): ein Vorhaben, das im Wesentlichen durch die Einmaligkeit aber auch Konstante der Bedingungen in ihrer Gesamtheit gekennzeichnet ist, wie z. B. Zielvorgabe, zeitliche, finanzielle, personelle und andere Begrenzungen; Abgrenzung gegenüber anderen Vorhaben; projektspezifische Organisation.

Nach Blazek (1991) ist ein Projet eine "sachlich und zeitlich begrenzte Aufgabe, die interdisziplinär angegangen wird." Zu einem Projekt gehören

  • Projekt-Idee, Auftaktveranstaltung, Projekt-Modivation, Projekt-Initiierung (z. B. Projektziele, Interesse, Einsatz, Kick-off-Meeting ) Das Stakeholder-Konzept versucht das gesamtgesellschaftliche Interesse zu berücksichtigen.
  • ...

Projekte bewerten Bepunktet bzw. anonym werten? Wie?

Faire Bewertungen basieren auf der Kompetenz zu verantwortlichem Handeln. Auch subjektive Bewertungen (Evaluation) können hilfreich sein, wenn diese mit vernüftigen Abwägungen einhergehen (kritisch-konstruktive Didaktik).

Die differenzierte Überprüfung eigenen Verhaltens und/oder eigener Anschauungen, eigene Erfahrungen in der Gruppe, gefolgt von mehr sozialer Kompetenz und kompetenterer Selbstbewertung können sich infolge von Kurzpräsentationen mit Hörerbeteiligungen (anonyme Bewertungen durch die Zuhörer) ergeben.

Es gibt unterschiedliche Formen von persönlichen Bewertungen. Wer wiegt wen und mit welchen Gewichten? Wer kennt den anderen und wielange? Wer kennt sich selbst und wielange? Wer kennt seinen objektiv/subjektiven Wägemechanismus und seine Fähigkeiten zum Differenzieren des Wiegevorganges? Welche kollektive Wirkungen ergeben sich aus vielschichtigen Bewertungen?

  1. Eine kritische, konstruktive Bewertung zielt auf mögliche Verbesserungen.
  2. Eine positive Bewertung anerkennt und lobt.
  3. Ein (überspitzter) Tadel hat einen subjektiven Anteil, gemeint ist ...

    Unausgewogene, unfaire, beleidigende "Bauchmeinungen" und destruktiven Beleidigungen und polemisch-überspitzte Verallgemeinerungen sind unwissenschaftlich, auch wenn sich diese als pseudo-Tatsachenbehauptungen tarnen.