Programme Programme - EvIM

Agenda für heute, 5. Dezember 2008
Interaktion mit Informatikmitteln
• Interaktion mit Informatikmitteln: Betriebsarten
Datenformate
Programmierung
• Hilfsmittel für die Programmierung
• Webprogrammierung
Zwei Interaktionstypen:
• mit Anwendern
• mit Daten
Drei Betriebsarten:
• Dialog
• Echtzeit
E h i
• Stapel
Unzählige Datenformate:
• ".a"
" " (Archiv
(A hi bei
b i UNIX) bi
bis
• ".zvd" (Voice-Datei)
2/46
Betriebsarten im Vergleich
© Departement Informatik, ETH Zürich
Betriebsarten im Vergleich
Echtzeitbetrieb
Dialogbetrieb
• Interaktive Eingabe von Instruktionen und
Daten
• Kurze Reaktionszeiten (μsek.)
Sofortige
o ge Ausgabe
usgabe von
o Daten
a e ((< 0
0.1 sec
sec.))
• So
g
((Redundanz))
• Hohe Zuverlässigkeit
• Steuerung eines Programms während
seiner Ausführung
g möglich
g
• Messen, Regeln, Ablaufsteuerungen
Programme
Programme
3/46
© Departement Informatik, ETH Zürich
4/46
© Departement Informatik, ETH Zürich
Betriebsarten im Vergleich
Stapelbetrieb
• Vollständig spezifizierter Auftrag wird
selbständig ausgeführt
•
Interaktion mit Informatikmitteln:
Betriebsarten
Datenformate
• Keine Möglichkeit, auf den
Programmablauf einzuwirken
Programmierung
• Hilfsmittel für die Programmierung
• Webprogrammierung
p g
g
• Rechenintensive Arbeiten,
Routineaufgaben (z.B. autom. Backup)
• Makros, Batch-Dateien (.BAT)
Programmierung
5/46
© Departement Informatik, ETH Zürich
Standardisierung ermöglicht Datenaustausch
Datenformate: Ganze Zahlen
Traditionelle Standards für
• Zahlen
(Prozessor, arithmetische Operationen)
Ganze Zahlen aus dem
Wertebereich 0..255
• Zeichen
• Graphik
(Alphabet: Zeichensätze, Programmsteuerung)
(Bildverarbeitung, Ausgabemedien)
Neuere Standards beschreiben
• Darstellung der Daten (Dokumente, Bilder)
• Bedeutung der Daten
(Beschreibung des Dateiinhalts)
Dezimalwert
0
1
4
127
128
254
255
Ganze Zahlen aus dem
Wertebereich -128..127
Dezimalwert
binäre Darstellung
ohne Vorzeichen
-127
-4
4
-1
-0
0
0
1
127
0000 0000
0000 0001
0000 0100
0111 1111
1000 0000
1111 1110
1111 1111
binäre Darstellung
mit Vorzeichen
1 111 1111
1 000 0100
1 000 0001
1 000 0000
0 000 0000
0 000 0001
0 111 1111
Wert
Wert
V
Vorzeichen
i h
6/46
© Departement Informatik, ETH Zürich
7/46
© Departement Informatik, ETH Zürich
Datenformate: Ganze Zahlen
Datenformate: Gleitkommazahlen
Ganze Zahlen aus dem
Wertebereich 0..255
Dezimalwert
-128
-1
1
-4
0
1
4
127
binäre Darstellung
Zweierkomplement
Positive Zahlen haben eine
führende 0
1000 0000
1111 1111
1111 1100
0000 0000
0000 0001
0000 0100
0111 1111
Nur eine Darstellung für 0
Umrechnung negativer Zahlen:
sämtliche Stellen werden negiert
zum Ergebnis wird 1 addiert
Bsp. -4:
g
negiert:
plus 1
Resultat:
Wert
8/46
1111 1100
0000 0011
1
0000 0100
0
11000101
00000100001011101011101
+
-5
4'331'357
Mantisse • 2Exponent = 135'354.90625
9/46
© Departement Informatik, ETH Zürich
Wie kann ein Komma gleiten?
Datenformate: Zeichen
Beispiel
Zeichen werden durch
Zahlen codiert.
Der Wert 0.00125 wird wie folgt umgewandelt:
0.00125
=
0.00125 x 100
=
0.0125
x 10-1
=
0.125
x 10-22
Mantisse = 0.125
ASCII
(
128 Zeichen (American
Standards Association)
Charsets
Unicode Consortium:
Universal Character Set
ISO 10646 (216 Zeichen)
Exponent = –2
Grund:
G
u d Erlaubt
aubt die
d e Darstellung
a ste u g se
sehr kleiner
e e Zahlen
a e auc
auch wenn
e
für die Mantisse wenig Bits zur Verfügung stehen
(kleine Präzision).
10/46
© Departement Informatik, ETH Zürich
© Departement Informatik, ETH Zürich
ISO 8859 (256 Zeichen)
11/46
© Departement Informatik, ETH Zürich
Prinzip der Rasterdaten
Grafik
Rastergrafik
Vektorgrafik
((aufgereihte
g
Bildpunkte)
p
)
((Linienzüge,
g , Kurven))
rgb Werte die als Bilddaten
rgb-Werte,die
gespeichert werden:
Farbe des Bildpunktes (Pixel):
0
rot
Kombinierter
g
rgb-Wert:
rot
grün
g
blau
0
255
0
0
0
16'711'680
0
0
1
16'711'680
1
rot
1
255
2
blau
0
255
2
255
3
4
2
3
0
gelb
255
255
0
16'776'960
tü ki
türkis
4
44
172
212
3
4
...
...
...
...
00101100
10101100
2'927'828
2
927 828
...
11010100
Skalierbar ohne
Qualitätseinbusse
Qualitätsverlust bei Skalierung
12/46
13/46
© Departement Informatik, ETH Zürich
Prinzip der Vektorgrafik
© Departement Informatik, ETH Zürich
Datenformate: Grafik
Listen mit Befehlen und Koordinaten geben einem Grafikprogramm
an, was wo wie zu zeichnen ist.
Beispiel (PostScript Standard)
Die Instruktionsfolge:
Zeichnet einen Kreis mit Radius
10 um ein Fadenkreuz am Punkt
50, 60:
newpath
50 50 moveto
50 70 lineto
40 60 moveto
60 60 lineto
50 60 10 0 360 arc
stroke
showpage
14/46
GIF-Dateien (Graphics Interchange Format, US Online-Dienst
Compuserve) arbeitet mit "Paletten" von bis zu 256 Farben.
Verlustlose Komprimierung erspart Speicher
Speicher.
JPEG Dateien (Joint Photographic Experts Group
JPEG-Dateien
Group, ISO 10980)
wurde als Standard für die Komprimierung fotografischer Bilder
eingeführt. Führt je nach Komprimierungsgrad zu mehr oder
weniger
i
Q
Qualitätsverlust.
lität
l t Verbreitet
V b it t bei
b i Di
Digitalkameras
it lk
und
d Bild
Bildern
auf dem Web.
60
0
BMP-Dateien (Windows Bitmap) speichern für jeden Bildpunkt die
intensität der Farben rot, grün und blau. In der Regel wird für jede
Farbe 1 Byte (8 Bit) verwendet
Speicherintensiv weil unkomprimiert.
0
50
© Departement Informatik, ETH Zürich
15/46
© Departement Informatik, ETH Zürich
Datenformate: Dokumente
Datenformate: Dokumente
Rich Text Format (RTF, Microsoft).
Portable Document Format (PDF, Adobe, versch. ISO-Normen).
• Inhalt plus Beschreibung, wie dieser dargestellt werden soll.
• Ein öffentliches Dateiformat für Dokumente, das die meisten
Textverarbeitungsprogramme lesen können.
• Die Datei ist reiner Text
Text, ähnlich wie HTML
HTML.
g p
• Vektorbasierte Seitenbeschreibungssprache.
Plattformunabhängige, originalgetreue Darstellung von
Dokumenten.
• Seitengrösse nur durch Verarbeitungsprogramm beschränkt.
RTF Datei:
RTF-Datei:
Schutzmechanismen
• Enthält Schutzmechanismen.
{\rtf1\ansi{\fonttbl\f0\fswiss Helvetica;}\f0\par
Di
Dies
ist
i t ein
i {\b bold}
b ld} Text.\par
T t \
}
• Dateigrösse hängt u.a. davon ab, ob Schriften eingebettet sind.
• Ideal zum Publizieren von Inhalten.
• Bildkompressionsverfahren.
p
Darstellung:
g
Dies ist ein Text.
16/46
17/46
© Departement Informatik, ETH Zürich
Datenformate: Hypertext
© Departement Informatik, ETH Zürich
Markups
Hypertext Markup Language (HTML, W3C).
• Die vorherrschende,, textbasierte,, Auszeichnungssprache
g p
für
Webseiten.
• Verwendet zur Strukturierung
g von Inhalten wie Texte,, Bilder
und Hyperlinks in Dokumenten.
• Enthält zusätzliche Angaben z. B. über die im Text
verwendete Sprache, die Autorin oder den Inhalt des Textes.
• HTML wurde vom World Wide Web Consortium
weiterentwickelt und soll durch XHTML ersetzt werden.
18/46
© Departement Informatik, ETH Zürich
Ein HTML-Dokument besteht aus einer Folge von Markups, die
durch einen Browser der Reihe nach abgearbeitet werden
Beispiel
<TABLE Border=1 Width=400 Heigth=300 BGcolor=silver>
<TR><TD Height=20%
i h 20% Colspan=2>
l
2  
b
</TD></TR>
/
/
<TR><TD Width=25%>   </TD>
<TD>  
p; </TD></TR>
/
/
</TABLE>
Diese Markups codieren eine
400 x 300 Pixel
grosseTabelle, die sichtbar
gemacht wird (Border=1)
19/46
© Departement Informatik, ETH Zürich
Markups
Datenformate: Hypertext-Dokumente
M k
Markups
sind
i d z.B.:
B
<TR> . . . </TR>
<TD>
TD . . . </TD>
/TD
(Table Row)
(Table Data)
Extensible Markup Language (XML, W3C).
• Textbasierte (im einfachsten Fall ASCII) Auszeichnungssprache zur Darstellung von hierarchisch strukturierten
Daten.
oder
Die Symbole:
y
• XML-Dokument können in andere Dokumente transformiert
werden, beispielsweise nach XHTML, um das Dokument in
einem Webbrowser anzuzeigen.
anzuzeigen
<TR>, <TD>, <TABLE>
werden als Tags oder Marken bezeichnet, wobei
<TR>
eine Startmarke und
</TR>
eine Endmarke ist
• XML wird auch für den Austausch von Daten zwischen
unterschiedlichen IT-Systemen
IT Systemen eingesetzt.
Tags werden mit Attributen ergänzt, welche die Details der
Darstellung
g angeben:
g
• Um die Struktur von XML-Sprachen zu beschreiben, bedient
man sich so genannter Schemasprachen wie DTD
(Document Type Definition) oder XML Schema.
<TABLE Border=1 Width=400 Heigth=300 BGcolor=silver>
http://www willcam com/cmat/html/tags html
http://www.willcam.com/cmat/html/tags.html
20/46
21/46
© Departement Informatik, ETH Zürich
© Departement Informatik, ETH Zürich
Datenformate: Hypertext-Dokumente
DTD fü
für Vi
Visulab-Daten
l bD t
<!ELEMENT VisulabData (data)>
<!ELEMENT data (variables, records)>
<!ELEMENT variables (realvariable)+>
<!ATTRLIST variables
count CDATA #REQUIRED>
XML Datei für Visulab-Daten
XML-Datei
Visulab Daten
<?xml version="1.0" encoding="iso-8859-1"?>
<VisulabData>
<data>
<variables count="4">
<realvariable
l
i bl name="sepal-leng"
"
l l
" hide="1"/>
hid "1"/
<realvariable name="sepal-widt" hide="0"/>
<realvariable name
name="petal-leng"
petal leng hide
hide="0"/>
0 />
22/46
© Departement Informatik, ETH Zürich
•
Interaktion mit Informatikmitteln:
Betriebsarten
Datenformate
Programmierung
• Hilfsmittel für die Programmierung
• Webprogrammierung
Was ist ein Programm?
Die Programmierumgebung stellt Instruktionen zur Verfügung
Sequenz
g g
Verzweigung
Wiederholung
Algorithmus
Eine Folge
g von Instruktionen, mit denen ein Computer(programm)
( g
)
den Inhalt von Speicherzellen verändert
Anwendungsprogramme:
Befehle der Anwendung + ev. Anweisungen
einer Programmiersprache
Programmierumgebung:
Anweisungen einer Programmiersprache
+ ev. vorprogrammierte Elemente
Betriebssystem: Anweisungen einer Kommandosprache
Datenstrukturen
Webseite:
Variable . . .
. . . Datei . . .
. . . Objekt
Anweisungen einer Skriptsprache
Al ith
Algorithmen
+ Datenstrukturen
D t
t kt
= Programme
P
23/46
Die Problemstellung diktiert die Datenstrukturen
+
13
→
1) P
Programm wird
i d kompiliert
k
ili t (übersetzt)
(üb
t t)
Berechnungen: Variablen
Fixe Listen: Felder (Arrays)
A
F
L
P
T
X
1
2
3
4
5
6
x
y
19
z
Dynamische Listen: verkettete Variablen (Records)
2
F
1
3
P
2
4
3
T
•
4
•
© Departement Informatik, ETH Zürich
Zwei Arten der Programmausführung (vereinfacht)
6
A
24/46
© Departement Informatik, ETH Zürich
Quellcode
ProzessorInstruktionen
Compiler
Müssen nicht auf dem ausführenden
Computer sein
Prozessor
Muss auf dem ausführenden
Computer sein
2) Programm wird interpretiert
P
Permanente
t D
Daten:
t
D t i (Fil
Dateien
(Files))
Quellcode
A
F
L
P
T
X
1
2
3
4
5
6
Interpreter
Compiler
ProzessorInstruktionen
L
output
25/46
Prozessor
© Departement Informatik, ETH Zürich
26/46
© Departement Informatik, ETH Zürich
Nobody's perfect: Fehlerquellen
Debugger (Entstörer)
• Sucht formale Fehler
• Falsche Programmlogik:
g
g diese Fehler müssen wir selber finden
• Prüft während der
Ausführung
• Nichtbeachten der Regeln der Programmiersprache: Hier kann uns
ein "Debugger" helfen
• Kann ein- oder
ausgeschaltet
werden
• Falsche
F l h D
Daten:
t
Verantwortung
V
t
t
der
d Programmiererin,
P
i
i
Programmiersprache kann helfen (Datentypen)
27/46
11/34
28/46
© Departement Informatik, ETH Zürich
Die wichtigsten Programmierparadigmen
© Departement Informatik, ETH Zürich
Imperative Programmierung
Ein Befehl in der Eingabeaufforderung löst eine Folge von Anweisungen aus
(Paradigma: Denkmuster)
Befehlszeile
Imperative Programmierung
Pascal-Anweisungsfolge
Befehls- oder Anweisungsorientiert (z
(z.B.
B Pascal
Pascal, C)
Objektorientierte
j
Programmierung
g
g
Objekte mit Eigenschaften und Operationen (z.B. Java, Eiffel)
Deklarative Programmierung
Fakten & logische Aussagen (z
(z.B.
B LISP
LISP, Prolog)
Bildschirm
29/46
© Departement Informatik, ETH Zürich
Programmcode
30/46
© Departement Informatik, ETH Zürich
Objektorientierte Programmierung
•
Interaktion mit Informatikmitteln:
Betriebsarten
Datenformate
Programmierung
• Hilfsmittel für die Programmierung
• Webprogrammierung
K k t oder
Konkretes
d
imaginäres Objekt
• hat Eigenschaften
• kann Aktionen auslösen
(kommuniziert)
31/46
© Departement Informatik, ETH Zürich
Hilfsmittel für den Programmentwurf
Pseudocode
Pseudocode
Natürlichsprachliche, knappe Beschreibung
unter Einbezug der Notation einer ProgrammierProgrammier
sprache
Flussdiagramme
Gerichtete Liniendiagramme zur Illustration
von Abläufen (Programmablaufplan)
Struktogramme
Darstellung von Aktionen durch Blöcke, die
aneinander gereiht oder ineinander
geschachtelt werden (Nassi-ShneidermanDiagramm)
32/46
© Departement Informatik, ETH Zürich
Beispiel:
p
Temperaturwerte
p
sollen von Grad Fahrenheit in
Grad Celsius umgerechnet werden
read(F)
subtrahiere 32
multipliziere mit 5/9
write(C)
it (C)
33/46
© Departement Informatik, ETH Zürich
Flussdiagramme
Flussdiagramme: Fallunterscheidung
Drei elementare Konstruktionselemente für Algorithmen:
Sequenz,, Fallunterscheidung
Seque
a u te sc e du g u
und
d Wiederholung
ede o u g
Diese Elemente lassen sich durch geeignetes Aneinanderreihen
der folgenden drei Symbole grafisch darstellen:
Operation
Fallunterscheidung
Eingabe/Ausgabe
34/46
read(F)
falsch
Pseudocode:
wahr
F ≤ 32
T = F - 32
read(F)
if F >= 32
then begin
subtrahiere 32
multipliziere mit 5/9
write(C)
end
else gebe warnung aus
Warnung
C=Tx 5/9
write(C)
35/46
© Departement Informatik, ETH Zürich
Flussdiagramme: Wiederholung
© Departement Informatik, ETH Zürich
Struktogramme: Sequenz, Fallunterscheidung
Nun möchten wir eine Umrechnungstabelle erstellen, die für jedes
ganze Grad Fahrenheit zwischen 0 und 100 die entsprechende
T
Temperatur
t in
i Celcius
C l i angibt.
ibt
F=0
P
Pseudocode:
d
d
F=0
solange
l
F < 101
begin
subtrahiere 32
multipliziere mit 5/9
write(F,C)
F=F+1
end
Angenommen, wir rechnen die
Temperaturen nur um, falls sie über
dem Gefrierpunkt sind,
sind andernfalls
geben wir eine Warnung aus.
Sequenz
Fallunterscheidung
Bedingung b
Anweisung 1
ja
A
Anweisung
i
2
Anweisung 1
nein
Anweisung 2
....
falsch
F < 101
wahr Berechne C
write(F,C)
erhöhe
ö F
Anweisung n
Stopp
36/46
© Departement Informatik, ETH Zürich
37/46
© Departement Informatik, ETH Zürich
Struktogramme: Wiederholung
Schleife 0 bis n mal
Solange Bedingung b
tue
Struktogramme: Beispiele
Schleife genau n mal
Für i = Anfangswert bis Endwert
t
tue
Anweisungen
A
Anweisungen
i
Lösung einer quadratischen
Gleichung. Mitteilung falls nicht
lösbar (Diskriminante < 0)
0).
Umrechnungstabelle, die für
jedes ganze Grad Fahrenheit
zwischen
i h 0 und
d 100 di
die
entsprechende Temperatur in
Celcius angibt.
g
Eingabe: p, q
a=p:2
d = a2 - q
Für F = 0 bis 100
100, Schrittw.
Schritt 1
ja
F = F -32
tue
d<0
nein
h=√d
C = F • 5/9
Ausgabe:
"nicht lösbar"
Ausgabe C
X1 = a + h
X2 = a - h
X1 X2
X1,
38/46
39/46
© Departement Informatik, ETH Zürich
© Departement Informatik, ETH Zürich
Statische Webauftritte
Kommunikationsschema für Webseiten
•
Interaktion mit Informatikmitteln:
•
Hilf itt l für
Hilfsmittel
fü di
die P
Programmierung
i
• Webprogrammierung
Betriebsarten
Datenformate
Programmierung
S
Server
Cli t
Client
2. Bearbeitung
1 A
1.
Anforderung
f d
HTML-Seite an Client
zur Interpretation senden
3. Antwort
Internet
Interaktion zwischen Web und Nutzer auf Mausklicks beschränkt
"Plakatcharakter" der Kommunikation
40/46
© Departement Informatik, ETH Zürich
Dynamische Webauftritte
Clientseitige dynamische Webauftritte
Client
• Clientseitig
Client erhält HTML-Dokumente, die
Programme enthalten, welche das
Erscheinungsbild im Browser steuern
Server
2 Bearbeitung
2.
1 Anforderung
1.
HTML-Seite an Client
p
senden
zur Interpretation
3. Antwort
4. Bearbeitung
• Serverseitig
Server beantwortet Anfragen qualifiziert
Dynamische Effekte für komfortable
Benutzerschnittstellen
Webdokumente werden durch den Server für den Client
bedarfsgerecht
g
aufbereitet
Bereichs- und Gültigkeitsüberprüfung
von Zahlen und Texten in Formularen
Jede Anfrage erhält eine individuelle Antwort
Hervorheben von Dokumentteilen bei
Erhalt des Mausfokus
41/46
42/46
© Departement Informatik, ETH Zürich
Beispiel für interaktive Webseiten: Formulare
© Departement Informatik, ETH Zürich
Formulare
"Abschicken" eines Formulars
• Das Method-Attribut bestimmt, in welcher Form dies geschieht
• Bei GET werden die Daten als "Query-String" an die Action-URL
geheftet
• Die Daten schliessen sich dem Fragezeichen der URL an:
Ziel-URL/formular.html?Anzahl=6&Item=Birnen
Trennzeichen
Durch Drücken des "Bestellen!"-Knopfes (Submit-Knopf) wird das Formular
gesandt (g
(gegeben
g
durch den URL der Webseite des Formulars))
zum Ziel g
43/46
© Departement Informatik, ETH Zürich
Datenelement
Der Query-String wird vom Webserver an dort ablaufende Programme
weitergegeben
it
b ((z.B.
B üb
über CGI)
CGI), kann
k
aber
b auch
h HTML-Dokumenten
HTML D k
t auff
der Client-Seite verfügbar gemacht werden
Hinweis: Kein Schutz gegen Missbrauch!!
44/46
© Departement Informatik, ETH Zürich
Programmiervorlesungen für die Naturwissenschaften (FS)
Programmieren
kann iin allen
k
ll B
Bereichen
i h d
des IInformatikf
tik
Arbeitsplatzes eingesetzt werden!
• 251-0840-00 Anwendungsnahes Programmieren (Matlab)
g
und Problemlösen ((Delphi))
• 251-0842-00 Programmieren
Datenverwaltung
Kommunikation
Datenverarbeitung
Informationserzeugung
45/46
© Departement Informatik, ETH Zürich
46/46
© Departement Informatik, ETH Zürich