realizată de Jun-Ying Poon 3 ani în urmă
198
Mai multe ca aceasta
Infos aufrufbar unter: device.platform; device.version; device.name; screen.width; ..
document.addEventListener("deviceready", deviceInfo, true);
Einbindung in z.B. Android: .jar im Projektordner libs
Zugriff auf Geräte-APIs und -Features mit JS
meisten Features allein mit JS nicht zugänglich
z.B. Beschleunigungssensor, Kamera, Kompass, Geolocation, Offline-Storage, Benachrichtigungen..
kostenlos & Open Source
Multi-Platform-Deployment: iOS, Android, Windows, macOS, Chromium Engine
geräteangepasste Bibiliothek für jede Plattform
webbasierter Ansatz: Webanwendung (HTML, CSS, JS) im Webbrowser (mit Systembibliotheken auf Endgerät)
hybrider Ansatz: Webanwendung als WebView in nativer Anwendung (mit Systembibliotheken auf Endgerät)
weitere Module & APIs in nativer Anwendung
nativer Ansatz: native Anwendung mit Systembibliotheken auf Endgerät
Debugging
neue Sicherheitsprobleme
Zurück-Button, Bookmarking
hohe Serverlast
Serverseitiges Skript, php:
direkt in DOM einfügen: Daten nachladen
beim Klick auf Link wird URL in div geladen
beim Klick auf Link wird URL in div geladen
XML & DOM oder JSON
Datentransfer und Adressierung/Änderung
XHTML & CSS
Darstellung
clientseitiges Scripting
definierte Funktionen durch objektbezogene Ereignisse aktiviert, manipulieren wiederum Objekte
Skripte sind in XHTML-Seite eingebettet
JavaScript Manipulation und Events
serverseitiges Scripting
Datenbankzugriff und Datenaufbereitung
asynchron: Benutzer muss nach Anfrage nicht mehr warten, während Server Anfrage bearbeitet
Antworten auf Anfragen können in anderer Reihenfolge zurückkommen
Webbrowser: Benutzeroberfläche schickt JavaScript an AJAX-Engine -> AJAX-Engine schickt HTTP-Anfrage an Webserver -> Webserver schickt XML, JSON, HTML/CSS an AJAX-Engine -> AJAX-Engine schickt HTML/CSS zurück an Oberfläche
keine Auslieferung der vollständigen Seite, sondern nur von Seitenfragmenten oder Daten
kein ständiger vollständiger Reload mehr notwendig
weniger Wartezeiten
Look/Feel von Desktopanwendungen
erhöht Usability von Webapplikation
JavaScript-Klasse, einfach zu nutzendes Interface
Grid System: Layout durch Zeilen und Spalten
4 Grid Klassen: xs, sm, md, lg
responsive Elemente z.B.: class="col-xs-6 col-md-4"
maximal 12 Spalten, die zusammengefasst werden können
Klassen für Fortschrittsbalken: progress-bar-success progress-bar-info progress-bar-danger progress-bar-striped
aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style=width:80%"
Klassen für Panels: panel-primary panel-success panel-info panel-warning panel-danger
Klassen für Alerts: alert-success alert-info alert-warning alert-danger
Klassen für Navigationsbar:
Klassen für Dropdown:
Klassen für Bilder: img-rounded, img-circle, img-thumbnail, img-responsive
Klassen für Tables: table-striped, table-bordered, table-hover, table-condensed
Klassen für Buttons: btn-default, btn-primary, btn-danger, btn-success..
Vielzahl an Themes
automatisiert als HTML exportieren
Rapid Prototyping -> Oberfläche bequem zusammenklicken
Flip Toggle:
Checkbox:
Slider:
Radiobuttons:
Formular:
Beispiel Auswahlliste:
data-role: page, header, content, listview
AJAX-basiertes Navigationssystem
Umwandlung in hybrid möglich
leichter Einbezug fremden Knowhows / Best Practices
viele Ressourcen verfügbar -> schnelle Einarbeitung
einfaches Erstellen mit bekannten Technologien
bewährte Komponenten -> praxiserprobt
Zeit- / Kostenersparnis
keine Installation notwendig -> schnelle Updates
Heterogenität mobiler Betriebssysteme -> Plattformunabhängigkeit
keine Internetverbindung notwendig, lokale Datenspeicherung
Distribution über Google Play
Leistungsumfang der Hardware ausschöpfen -> Performance
umfassende Integration ins System, alle APIs benutzbar
BroadcastReceiver
bei Ereignis (z.B. Anruf, SMS..) wird ein Rundruf abgesetzt, um alle Interessierten darüber zu informieren
empfängt mit sendBroadcast() gesendete intents
ContentProvider
Zugriff auf entsprechenden ContentProvider anderer Apps (z. B. Kalender)
Datenzugriff, Kapselung, Mechanismen für Datensicherheit
Service
kein eigener Prozess, kein separater Thread
Hintergrundverarbeitung ohne Benutzerschnittstelle (länger laufende Operation ohne Interaktion mit Nutzer)
Widget
UI Elemente (Mini-Programm) auf Homescreen
muss nicht gestartet werden, wird direkt sichtbar ausgeführt
Intent
implicit intent: Android ermitteln lassen, welche Komponente für Intent zuständig ist
explicit intent: bestimmte Komponente direkt ansprechen
"abstract description of an operation to be performed"
Starten einer Activity, Senden zu BroadcastReceiver oder Kommunizieren mit einem Service im Hintergrund
View und ViewGroup
ViewGroup fasst zusammengehörige View-Elemente zusammen
Oberklasse für Steuerelemente (z.B. Buttons)
Activity
Fragment: Teil des UI innerhalb einer Activity mit eigenem Lifecycle
repräsentiert Screen, interagiert i.d.R. mit Benutzer
über AndroidManifest.xml kann eine App notwendige Berechtigungen anfordern
für jede App ein separater Benutzer und Gruppe
Integration von Google-Diensten
Software-Distribution über App-Store oder alternative Anbieter
Multimedia-Unterstützung inkl. Kamera
Java Virtual Machine -> Java-Apps
Organizer (Addressbuch, Kalender) und Chrome-Browser
Konnektivität: WLAN, Bluetooth, GSM..
GUI für mobile Endgeräte
Mitglieder aus: Netzbetreiber (T-Mobile..) Gerätehersteller (LG..) Halbleiterindustrie (Intel..) Softwareindustrie (eBay..) Lösungsanbieter (accenture..)
Problem: viel Overhead bei Übertragung
gute Eignung für Anwendungsentwicklung: Datenrepräsentation, Objektlokalisation..
direkte Netzwerkprogrammierung
Problem: Datenrepräsentation
direkte Kontrolle aller Parameter
evtl. bessere Performance
Flexibilität bei Entwicklung neuer Protokolle
wichtige Mechanismen fehlen noch -> Sicherheit, Transaktionalität, Abrechnung
Verwendung von XML -> großer Overhead
evtl. schlechte Performance
breite Unterstützung aus Industrie, niedrige Einstiegsbarrieren
Flexibilität: Wiederverwendbarkeit, Erweiterbarkeit, Skalierbarkeit
Modularität der Dienste
basiert auf etablierten Internettechnoilogien
plattform- / sprachenunabhängig
UDDI: Universal Description, Discovery and Integration
Datenklassifikation
grüne Seiten
technische Informationen über den Dienst (Verweise auf technische Spezifikation, z.B. WSDL)
gelbe Seiten
Klassifizierung Unternehmen und angebotene Dienste (Branche, Produkte etc.)
weiße Seiten
allgemeine Informationen über Unternehmen (Name, Adresse, Ansprechpartner..)
Umsetzung: UDDI-Business-Registry, Zugriff über Betreiberseiten
Spezifikation: Definition des Aufbaus, Beschreibung der XML-basierten Daten, Beschreibung der API
globales Verzeichnis mit Web Services und Beschreibungen durch Anbieter
WSDL: Web Service Description Language
abstrakte Beschreibungssprache, unabhängig von Plattform / Programmiersprache
Metainformationen über Funktionalität und Schnittstellen sowie Einbindung von Diensten
SOAP: Simple Object Access Protocol
unabhängig von Programmiersprache, Plattform, Transportprotokoll
Unterstützung diverser Nachrichtenmuster, Internationalisierungsmöglichkeiten
dokumentenorientierte Übertragung beliebig komplexer XML-Strukturen
Ziele: Einfachheit, Erweiterbarkeit
XML-Kommunikationsprotokoll zum Informationsaustausch zwischen zwei Anwendungskomponenten
UDDI: Auffinden WSDL: Beschreibung SOAP, XML-RPC: XML-Nachrichtenmodell HTTP: Transport
Nachfrager: Web service suchen -> einbinden -> nutzen
Anbieter: Web Service entwickeln -> beschreiben -> veröffentlichen -> verwalten ( -> zurückziehen)
dynamische Integration
dynamische Lokalisierung / Einbindung zur Laufzeit
Prozessorientierung und Komposition
Erstellung sogenannter Web-Service-Ketten
Erstellung von AS auf Basis von Web Services
lose Kopplung
flexibler Austausch der Servicekomponenten möglich
Kapselung und Modularität
fördert Mehrfachverwendung
Ablauflogik im Modul bleibt Nutzer verborgen (Black Box)
kapseln eine bestimmte fest definierte Funktionalität
in sich abgeschlossene Einheiten (Module)
Umsetzung der SOA: Service-Oriented-Architecture
bieten anwendungsorientierte Dienste (Business Services)
grobere Granularität als herkömmliche Objekte
Dienst wird über Netzwerk angesprochen
Dienst wird über Schnittstellen beschrieben
WDSL: describe UDDI: advertise and syndicate SOAP: communicate
"Software application identified by a URI. Interfaces and bindings are capable of being defined, described and discovered as XML artifacts. Supports direct interactions with other software using XML based messages exchanged via internet-based protocols."
Funktionszugang
Zugreifende Middleware
SOA: Service Oriented Architecture
ORB: Object Request Broker
Kernproblem: Übermittlung der IOR
direkt zwischen Client-Server oder über Broker
Interoperabilität zwischen 30 Plattformen
Schnittstellendefinition auf Basis von IDL: Interface Definition Language
Stub: Kodierung der Nachricht Skeleton: Dekodierung der Nachricht
anschließend Übersetzung in gewünschte Sprache
nicht programmiersprachenspezifisch: eigene Schnittstellenbeschreibungssprache von COBRA
Programmiersprachen für Realisierung: C++, Java, Eiffel
Architektur
von OMG standardisiert, von Sun und IBM entwickelt, ORBs angeboten von IBM, BEA, Weblogic Server..
Grundlage für CORBA: Common Object Request Broker Architecture
ermöglicht Aufruf des Objekts unter Nutzung des ORB
Objekte erhalten eine systemweit eindeutige Referenz IOR: Interoperable Object Reference
übernimmt Kommunikation und Interaktion der Objekte
MOM: Message Oriented Middleware
vorzugsweise bei asynchroner Kommunikation eingesetzt
übermittelte Informationen
weitere optionale: Dateninformationen, Kontrollinformationen
Methodenaufruf und notwendige Parameter
keine Beschränkung hinsichtlich Nachrichteninhalt
Kommunikation auf Basis von Nachrichten
RMI: Remote Method Invocation
Methodenaufruf eines entfernten Java-Objekts -> Java-Implementierung von RPC
RPC: Remote Procedure Call
gepufferter asynchroner Remote Procedure Call
asynchroner Remote Procedure Call
Asynchronität -> höhere Flexibilität / Effektivität
synchroner Remote Procedure Call
aufrufender Prozess übergibt entfernter Methode Parameter -> aufrufende Methode bearbeitet Anfrage -> aufgerufene Methode schickt Ergebniswerte zurück
Clientseite: Stubs Serverseite: Skeleton
Systemschnittstelle, die es Programmierer erlaubt, netzwerkspezifischen Code aus Applikationslogik auszblenden
Methodenaufruf nahezu transparent -> Aufruf einer entfernten Methode ähnelt Aufruf einer lokalen Methode
Aufruf auf entfernten Computern befindlicher Prozeduren
Zugangsschaffende Middleware
Wrapper
Wiederverwendbarkeit prozeduraler Anwendungen
problemlose Eingliederung in objektorientierte AS
Verknüpfung von objektorientierter und prozeduraler Programme
Simulation einer objektorientierten Anwendungskomponente
Überführung prozeduraler Funktionen in objektorientierte Methoden
Screenscraper
keine Änderung am Serverprogramm nötig
Anpassung der Client-Oberfläche an Weiterentwicklung
extrahiert Daten aus bestehender Ausgabe
Datenzugang
Datenbank-Middleware
Datenbankgateways
höhere Funktionalität ggü. Datenbankschnittstellen
Funktionalitäten
Fehlerbehandlung, Sicherheitsfunnktionalitäten
Datentyp-Konvertierung
Abfrage-Optimierung / - Übersetzung
Datenbankzugang
herstellerabhängige Schnittstelle: Kommunikationszentrale für Datenbankzugrif
Datenbankschnittstellen
liefert nur kleinsten gemeinsamen Nenner an Funktionalität
Beispiele: Open Database Connectivity (ODBC) Integrated Database Application Programming Interface (IDAPI) Distributed Relational Database Architecture (DRDA)
Datenbanktreiber übersetzen Abfrage in spezifische Abfragesprache / Protokolle des DBMS
offene, standardisierte Schnittstelle -> ermöglicht Zugriff auf heterogene Datenbanken
Einsatz: Client-Server-Architekturen, Peer-to-Peer, Integration alter in neuer Systeme
einheitliche Schnittstelle zwischen einzelnen Komponenten verteilter Systeme
Verbindungsschicht und Basis für Nachrichtenaustausch
Benutzer- / Rechteverwaltung
Datensätze löschen / ändern / einfügen
INSERT INTO tab [(spalte1, spalte2)] VALUES (wert1, wert2)
mit Subquery: INSERT INTO tab1 SELECT spalte3, spalte4 FROM tab2
UPDATE tab1 SET spalte1 = wert1, spalte2= wert2 WHERE bedingung (z.B. Tupel-ID)
DELETE FROM tab WHERE bedingung
JOIN: Ausgabe zusammenhänger Datensätze aus unterschiedlichen Tabellen
SELECT .. FROM tab1 JOIN tab2 ON tab1.pk=tab2.pk WHERE ..
OUTER JOIN: alle Datensätze werden ausgegeben
standardmäßig INNER JOIN: nur Datensätze, die in allen Tabellen vorkommen
GROUP BY: Zeilen mit übereinstimmenden Werten in einer Spalte gruppieren
Reihenfolge: SELECT .. FROM .. WHERE .. GROUP BY .. HAVING ..
HAVING: Filterung von Gruppen (Aggregatsfunktionen wie COUNT hier möglich)
Sonderfunktionen
mathematische Operationen
Division DIV(), Wurzel SQRT(), Modulo MOD()
skalare Funktionen
Groß-/Kleinbuchstaben UCASE(), LCASE()
Aggregatsfunktionen
Durchschnitt AVG(), Zählen COUNT(), MAX(), MIN()
Erweiterte Selektion (Filterung mit Suchbedingung): SELECT spalte FROM tabelle WHERE suchbedingung
Regular Expression (Platzhalter): WHERE spalte LIKE '%' oder '_'
In Liste: WHERE spalte IN (wert1, wert2..)
Suchbedingungen kombinieren: WHERE bed1 AND bed2
DROP TABLE
ALTER TABLE
CREATE TABLE
Aufbau DBMS
Benutzer / Programme (greifen auf externes Modell zu)
externes Modell A, B..
DQL (Data Query), DML (Data Manipulation Language)
konzeptionelles Modell
DDL (Data Definition Language)
Internes Modell
DSDL (Data Storage Description Language)
Speichermeiden (greifen auf internes Modell zu)
Arten
Graphendatenbanken
Key-Value (Google BigTable..)
dokumentenorientiert (CouchDB..)
objektorientiert (DB4O..)
relational (MySQL..)
Vorteile DBMS
Datensicherheit
Datenintegrität
Datenkonsistenz
Datenunabhängigkeit
Redundanzabbau
Hohe Performance
Datenbanken bieten standardisierte Konzepte (SQL, ERM..)
Daten müssen persistent gespeichert werden
Zugriff: Programme -> logische Datei -> DBS -> DB mit physischen Dateien
Datenqualität: Güte der Daten -> präzise und verlässliche Aussagen
Glaubwürdigkeit, Nützlichkeit, Interpretierbarkeit, Schlüsselintegrität
mangelhafte Datenqualität -> geringere Güte von Informationen -> Gefahr von Fehlentscheidungen -> auch Zulieferer / Abnehmer betroffen
Webserver mit PHP installieren -> Composer installieren -> Laravel installieren -> Anwendung mit Laravel entwickeln
umfangreiches Softwarepaket
Designer können ohne Kontakt mit Code Aussehen verändern
vordefinierte Struktur
umfangreiches Ökosystem, seit 2011 kontinuierlich weiterentwickelt
$pdo = new PDO('host', 'iser', 'pw'); $abfrage = "SELECT * FROM verein"; $result = $pdo->query($abfrage); foreach($result as $row) {{ echo $row['name'] ... $row['date']; }
mail($empfaenger, $betreff, $text, "From: $sender");
weitere Funktionen
Sortieren nach Werten: asort($array), arsort($array)
Sortieren nach Schlüsseln: ksort($array), krsort($array)
count($array), in_array($array, $element), array_push($array, $element), array_pop($array, $element)
Ausgabe aller Elemente
foreach ($array as $key => $element) {
echo $array[$key];
echo "
";
}
oder echo $element;
assoziative Arrays
$array = array("Eins"=>"A", "Zwei"=>"B", "Drei"=>"C"); echo $array["Eins"];
Zugriff: echo $array[2];
$array = array("eins", "zwei", "drei");
müssen nicht explizit angegeben werden
zusammengesetzt (Array, Object)
skalar (Boolean, Integer, Float, String)
späte Bindung: Funktionen können an beliebiger Stelle definiert werden
function quadrat($num) { return $num * $num; } echo quadrat(4);
weniger skalierbar (als z.B. Java)
Interpretation -> Performancenachteile
Robustheit (z.B. schwache Typisierung problematisch)
unsaubere Programmierweisen, unsichere Serverkonfiguration -> Servereinbrüche
historisch inkonsistent gewachsen (z.B. OOP erst später aufgenommen) -> uneinheitliche Programme und Syntax
freie Software -> keine Lizenzkosten
gute Tool-Unterstützung (VS Code, Eclipse) und weit verbreitet
einfach erlernbar, geringer Entwicklungsaufwand
Beispiele: Wikipedia, Typo3, Wordpress, Facebook
bei jedem Aufruf geparsed / interpretiert
serverseitiger Skriptcode auf Server geladen
definierte Funktionen durch objektbezogene Ereignisse aktiviert -> manipulieren wiederum Objekte
Skripte in XHTML-Seite eingebettet
verbesserte Objektorientierung (Überladung, Kapselung)
Ausblenden display: none;
Text-Ausrichtung text-align: left | right | center | justify;
Text-Dekoration text-decoration: underline | overline | line-thourgh | blink;
Text-Transformation text-transform: capitalize | uppercase | lowercase;
Schriftgröße (font-size), Farbe (color), Schriftart (font-family), Schriftfamilie (font-family)
a:link a:active a:visited a.navigation:link (Subklassen)
background-color: background-image: background-attachment: scroll | fixed; background-position: prozent | top | left | ..; background-repeat: repeat | repeat-x | no-repeat;
Farben: #RRGGBB, #RGB, rgb(rrr,ggg,bbb), Schlüsselwörter (black, green, olive, red)
Prozentwerte width: 50%;
Längenmaße
relativ (px)
absolut (in, cm, mm)
Selektoren
Pseudo-Klassen / Pseudo-Element-Selektoren: a:visited, p:first-letter
ID-Selektoren: #start
Klassenselektoren: .wichtig
kontextsensitive Selektoren: li b
Elementselektoren: h1, h2, p
als Inline-Styles (nur für jeweiliges Element)
über Import-Direktiven
durch Link auf externe CSS
fester Bestandteil der XHTML-Seite (innerhalb head)
Trennung Inhalt und optische Darstellung
single point of change, Reduzierung überflüssigen Codes
präzise Kontrolle über Erscheinungsbild, auch bei unterschiedlichen Browsern
schwierige Wiederverwendung von Elementen
boolesche Attribute
XHTML: als Attributwert
Attributwert in Anführungszeichen optional
XHTML: immer
Elemente ohne Inhalt möglich z.B.
XHTML: entweder leeres Element-Tag
oder mit End-Tag
Groß-/Kleinschreibbung egal
XHTML immer klein
Basis: SGML (Standard Generalized Markup Language)
XHTML: Basis XML (SGML-Teilmenge)
Ziele
inhaltliche / grafische Strukturierung von Internetseiten, Textformatierung
als Alternative zu HTTP-Kopfdaten
Suchroboteranweisungen
index, follow, noindex, nofollow
Seitenbeschreibung
analog für Stichwörter (keywords) und Autor (author)
Textfeld
size und maxlength optional
nutzt HTTP-Post und kann über "name" adressiert werden
Daten werden an Skript suche.php geschickt (in neuem Fenster)
nutzt HTTP-Post und kann über "name" adressiert werden
Daten werden an Skript suche.php geschickt (in neuem Fenster)
nutzt HTTP-Post und kann über "name" adressiert werden
Daten werden an Skript suche.php geschickt (in neuem Fenster)
Textfelder, Passwortfelder, Radiobuttons, Checkboxen, Dropdown
Interaktivität -> User-Daten können erhoben werden
Image Maps (verweis-sensitive Grafiken)
shape: Rechteck (rect), Kreis (circle), Polygon (poly)
Öffnungsart
"_parent" beendet aktuelles Frameset
"_self" im selben Fenster
"_blank" im neuen Fenster
"zielframe" im Frame zielframe
Ziel: relativ (index.html), absolut (http://..) oder Anker im Dokument (#sprung)
a = anchor
Zelle für Daten
Zelle der Kopfzeile, meist hervorgehoben dargestellt
Tabellenzeile
beliebig verschachtelbar (Tabellen in Tabellen)
früher
Zeilenumbruch
Absatz
Kommentar:
Textkörper:
Titel, von Suchmaschinen interpretiert:
von Suchmaschinen analysisert:
Beginn / Ende:
XML-Prolog
nicht möglich:
stattdessen clientseitiges Skripting (JavaScript), serverseitiges Skripting (PHP, Perl) oder serverseitige Anwendungen / Applikationsserver
Absätze, Listen, Tabellen, Links..
serverseitiges Skripting, Applikationsserver
clientseitiges Skripting, ausführbarer Code
Web 3.0: semantisches Web
Web 2.0: soziales Web
Web 1.0: statisches und dynamisches Web
Funktionalität
Integritätssicherung, Transaktionsmanagement, Sicherheit
Verwaltung XML-Dokumente
Datenmodelle
native XML Datenbanksysteme (dokumentorientiert)
XML-enabled Datenbanksysteme (datenorientiert)
XML-Parser und XSL-Prozessoren
validieren und transformieren XML-Dokumente
XML-Viewer (Wiedergabe von XML)
Editoren
datenorientierte Anwendungen (EDI / zwischenbetrieblicher Datenaustausch, Integration von AS..)
dokumentorientierte Anwendungen (Cross-Media-Publishing, technische Dokumentation..)
XML durch verschiedene Stylesheets in verschiedene Ausgabeformate (Print, Web, CD..)
XLS-FO
relativ schwierig, geringe Verbreitung
Einsatz in der Druckvorstufe
Übersetzung von XML in Layout-orientiertes Format
Extensible Stylesheet Language - Formatting Objects
XLST
Stärke: vergleichsweise mächtig
relativ schwierig, schlecht wartbar
Übertragung von XML-Dokumenten von ursprünglicher Struktur in eine andere
Extensible Stylesheet Language - Transformations
CSS
SCSS
Stärke: vereinfacht Erstellung großer Stylesheets
erfordert weiteren Schritt im Entwicklungsprozess
ermöglicht Integration von Variablen, Schleifen..
Sassy Cascading Style Sheets
Stärke: relativ leicht erlernbar
Grenzen
Veränderung Dokumentstruktur nicht möglich
Auswertung von Attributen nicht möglich
Zuordnung typographischer Eigenschaften zu Elementen
Cascading Stylesheets
aufwändigere Erstellung, länger und unübersischtlicher
genügen selbst XML-Format
erweitert DTDs
Vererbungskonzept
einfache Datentypen (Ganzzahl, Datum..)
mangelnde Funktionalität für datenorientierte XML-Dateien
z.B. exakte Zeichenlänge nicht möglich
eigene Syntax: neuer Lernaufwand, neue Parser
Definition von Attributen - Beispiel
Attribut muss Standardwert haben
#FIXED EUR EUR ist vorgegeben, kann nicht geändert werden
#REQUIRED kein Standardwert, Attribut muss angegeben werden
#IMPLIED kein Standardwert, Attribut ist optional
EUR, falls Attribut im Dokument nicht vorhanden
betrag = Element waehrung = Attribut (EUR | JPY) = zugelassene Werte #IMPLIED = Optionen
beliebige Werte: waehrung CDATA
Beispiel:
Wiederholungstypen:
+ 1-n * 0-n ? 0-1
enthält andere Elemente:
kann innerhalb des XML oder in eigener Datei definiert werden
spezifiziert Menge der zulässigen Elemente, zulässigen Attribute und zulässige hierarchische Anordnung der Elemente
Document Type Definition
valid / gültiges XML
zugehörige DTD/XSD existiert
hält sich an die Regeln der DTD/XSD
Dokument ist wohlgeformt
well-formed / wohlgeformtes XML
ist mit Tags hierarchisch gegliedert (passendes End-Tag zu jedem Start-Tag)
besitzt mindestens ein Element
zulässiger Prolog
Groß- / Kleinschreibung wird beachtet
Attribute (Attributname + Attributwert)
spezifizieren ein Element näher (z.B. waehrung="EUR")
Element (Tags + Inhalt)
Struktur: Elemente in einer Hierarchie -> Tree View
Tags (Starttag und Endtag)
Prolog (version, encoding, DOCTYPE, stylesheet)
-> automatische Weiterverarbeitung (Datenaustausch, entfernter Methodenaufruf..)
Ersatz für gerätespezifische API und Flash
Server-sent events: Server kann Nachrichten an Client senden (Push)
Web Workers: Threading für JavaScript (Skripts im Hintergrund ausführen)
WebSocket API: bidirektionale Client-Server-Kommunikation
header, footer, nav, section, article, aside
Dokumentenstruktur besser (such-)maschinenlesbar
Browser kann bestimmte Bereiche besser unterstützen
JavaScript-Zugriff auf lokale Datenbank (auch ohne Internet)
kein direkter Zugriff durch Serverseite (anders als Cookies)
Speicherung in assoziativem Array
Web Storage ( = DOM Storage)
sessionStorage für Browsersitzung (Spielstand..)
localStorage mit unbegrenzter Lebensdauer (Highscores, Kontaktdaten..)
besonders relevant für mobile Anwendungen
Attribut pattern (Eingabevalidierung mit Regular Expressions)
Attribute autofocus und placeholder (Hinweistext)
Pflichtfelder (müssen ausgefüllt werden)
Eingabehilfen (z.B. Date-Picker) vom Browser
Inhaltstyp möglich (z.B. E-Mail oder Datum)
3D mittels WebGL
2D-Drawing-Primitives: fillRect für gefülltes Rechteck
Abbildungen dynamisch mit JavaScript erstellen
ansonsten Attribut draggable="true" und Attribut dropzone
Element aus Browser herausziehen, als Datei auf Desktop legen
navigator.geolocation Objekt
JavaScript ermittelt Position des Besuchers (GPS, Funkzelle, IP)
Vorteil
keine zusätzliche Software / Codecs notwendig, breite Plattformunterstützung, offener Standard
verzahnt mit Implementierung durch Browser-Hersteller
kleiner (Framework enthält mehrere Entwurfsmuster)
abstrakter (Frameworks können als Code dargestellt werden)
Änderungen bei Basisklassen können erbende Klassen beeinflussen
Abhängigkeit und Sprachgebundenheit
Kostenvorteile (mittelfristige Entwicklungskosten)
Qualitätssteigerung / -sicherung (Frameworks häufig getestet)
Wettbewerbsfähigkeit (schnelle Bereitstellung von Anwendungen)
Controller (PHP-Skripte)
jeder Zugriff geht über Controller
Ablaufsteuerung (Reaktion auf Benutzeraktionen)
View (Smarty-Templates)
beinhaltet ggf. Präsentationslogik und interaktive Elemente
grafische Darstellung
Model (PHP-Objektklassen)
Schnittstellen: Anlegen, Auslesen, Manipulieren von Datenobjekten
Objekte zur Darstellung von Elementen der Realität
Ablaufsteuerungen durch Austausch von Controller wechselbar (Strategy)
Objekte können sich auf andere auswirken, ohne dass das geänderte Objekt die anderen genauer kennen muss (Observer)
nach Zielsetzung
Verhaltensmuster
Strukturmuster
Erzeugungsmuster
nach Abstraktionsniveau
Architekturmuster, Entwurfsmuster, Idiome
Benutzer in den Entwurfsprozess einbinden
Problem(e) lösen und ein erprobtes Konzept bieten
Voraussetzung: statisches / dynamisches Modell der Applikation
Schnittstellen / Komponenten und Beziehungen
Voraussetzung: Verhalten der Objekte
Modellierung von von Objekten ausgetauschten Nachrichten
Voraussetzung: Klassenmethoden, Geschäftsprozesse
Modellierung von Aktivitätsflüssen (Operations- / Workflowmodellierung)
Beziehungen
nicht ausgefüllter Pfeil: Unterklasse von
schwarz ausgefülltes Karo: m:1 Beziehung zu
Voraussetzung: Anforderungskatalog/Use-Case-Diagramm und Geschäftsprozessmodell/EPK
Identifizierung von Klassen (mit Attributen + Operationen) -> Beschreibung Anwendungsgebiet der Applikation
Voraussetzung: Anforderungen (formale Beschreibungen, Berichte)
Modellierung von außen sichtbarer Anforderungen, repräsentiert verschiedene Anwendungsfälle
Use-Case-Diagramm, Klassenmodell, Objektmodell, Kollaborationsdiagramm, Zustandsmodell, Aktivitätsmodell, Sequenzmodell, Interaktionsmodell, Komponentenmodell, Verteilungsmodell
Zusammenhänge verständlich machen
Betrachtung von verschiedenen Standpunkten
wichtige Voraussetzungen für Fortgang müssen erfüllt sein -> Sollbruchstelle
definierte Zeitpunkte: Präsentation Zwischen- / Endergebnis
frühzeitiges Erkennen von kritischen Pfaden und notwendigen Terminverschiebungen
Auswertung
Risiken identifizieren und präventiv begegnen
Verantwortlichkeiten / Rollen im Projektteam festlegen
Aufgaben / Aktivitäten koordinieren & zeitlich planen
Ziele, Rahmen, Voraussetzungen klären
erfüllen Anforderungen, fehlerfrei, solide, lesbar und veränderungsfreundlich implementiert
Behebung eines Fehlers: Kosten verzehnfachen sich pro Phase
Beteilung an Projektplanung -> Gesamtzusammenhänge verstehen
Aufgaben klar definiert + leichter überschaubar
Projektinteressen durch Projektleitung bestmöglich vertreten
Riiskominderung für Nicht-Erreichung der Ziele
Probleme und Auswirkungen frühzeitig erkennbar
Planung, Steuerung und Überwachung eines Projektes
Erzeugnis / Ergebnis des Vorhabens
