Klausur Wintersemester 2014/2015, Fragen PDF

Preview

Summary

1 11.8 Allgemeine Hinweise: Schreiben Sie Ihren Namen und Matrikelnummer auf das Deckblatt. Halten Sie Ihren Studierendenausweis zur bereit. Beantworten Sie die Aufgaben nur auf den gehefteten Brauchen Sie mehr Platz verweisen Sie auf die am Ende der Klausur. Benutzen Sie nur dokumentenechte Stifte ...

Description

Web-2.0-Technologien 1 11.8.2015

Allgemeine Hinweise: •

Schreiben Sie zunächst Ihren Namen und Matrikelnummer auf das Deckblatt. Halten Sie Ihren Studierendenausweis zur Prüfung bereit.

•

Beantworten Sie die Aufgaben nur auf den gehefteten Klausurbögen. Brauchen Sie mehr Platz verweisen Sie auf die Zusatzblätter am Ende der Klausur.

•

Benutzen Sie nur dokumentenechte Stifte in blau/schwarz (NICHT rot oder Bleistift).

•

Erlaubte Hilfsmittel sind die ausgegebenen Cheat-Sheets mit handschriftlichen Ergänzungen und ◦ 2 Seiten (1 Blatt) handgeschriebene Notizen wenn Sie nur diese Klausur schreiben. ◦ 4 Seiten (2 Blatt) handgeschriebene Notizen wenn Sie beide Klausuren schreiben. Nicht erlaubt sind u.a. alle elektronischen Geräte (speziell Handies, Smart-Watches, etc.).

•

Bearbeitungszeit ist ◦ je 80 Minuten wenn Sie beide Klausuren getrennt bzw. nur diese eine Klausur schreiben, ◦ 160 Minuten wenn Sie W2T-1 und W2T-2 in einer Doppelklausur schreiben (Soz.-Inf.).

Viel Erfolg!

Vorname:

Nachname:

Matr.-Nummer:

Studiengang:

Platz-Nummer:

Dauer:

Aufgabe

Minuten

1

2

3

4

5

6

7

Punkte (max)

3

5

3

5

7

10

7

Aufgabe

8

9

10

11

12

13

14

Σ

8

5

7

7

5

4

4

80

Punkte

Punkte Punkte (max)

Klausur – Web-2.0-Technologien 1 – SS2015

Seite 2 von 26

Inhaltsverzeichnis 1. Begriffe (6*0,5 = 3 P).......................................................................................................................3 2. Internet-Kommunikation (1+1+1+2 = 5 P)......................................................................................4 3. HTTP: WWW-Adressen (2+1 = 3 P)...............................................................................................5 4. HTTP-Protokoll (1+1+1,5+1,5 = 5 P)..............................................................................................6 5. HTML-CSS: Design (7 P)................................................................................................................8 6. HTML-CSS: Grundlagen (1,5+2+1+2+1.5+2 = 10 P)...................................................................10 7. HTML-CSS: Design (1+1+1+2+2 = 7 P).......................................................................................12 8. CSS: Selektoren (8 P).....................................................................................................................14 9. Flexbox (0.5+1.5+1.5+1.5 = 5P)....................................................................................................15 10. PHP: Grundlagen (2+2+3 = 7 P)..................................................................................................16 11. PHP: Programmanalyse (3*1+2*2 = 7P)......................................................................................17 12. PHP: Operatoren (1.5+3.5 = 5 P).................................................................................................19 13. PHP: Programmierung (4*1 = 4 P)..............................................................................................20 14. Hashes (4*1 = 4 P).......................................................................................................................21 Zusatzblatt 1.......................................................................................................................................23 Zusatzblatt 2.......................................................................................................................................24 Anhang A............................................................................................................................................25 Anhang B............................................................................................................................................26

Klausur – Web-2.0-Technologien 1 – SS2015

1. Begriffe Wie lauten die Langformen der folgenden Abkürzungen?

RFC

HTTPS

URI

TCP

W3C

LAMP

Seite 3 von 26

(6*0,5 = 3 P)

Klausur – Web-2.0-Technologien 1 – SS2015

2. Internet-Kommunikation

Seite 4 von 26

(1+1+1+2 = 5 P)

a) Erläutern Sie die folgende Aussage: WWW ≠ Internet

b) Führen Sie für folgende Adresse 000F:0C21:0000:0000:1342:0000:0000:00FF eine optimale Zero-Compression durch.

c) Welcher Netzwerkdienst bildet im Internet Namen auf numerische Adressen ab? Welches Werkzeug (Kommandozeilen-Tool) haben wir zu seiner Nutzung kennen gelernt?

d) Sie greifen auf die URL http://abc.cs.uni-kl.de:4711 über Ihren Browser zu. Welche der folgenden Aussagen wären dann sicher und welche möglicherweise zutreffend? 1. Die angegebene URL ist falsch, denn HTTP funktioniert nur auf Port 80. 2. Der Browser öffnet lokal den Port 4711 und verbindet sich mit dem angegebenen Server auf Port 80. 3. Ihr Browser öffnet lokal einen Port, typischerweise unter 1024, und verbindet sich mit dem Server auf Port 4711. 4. Der Browser öffnet lokal den Port 4711 und verbindet sich mit dem angegebenen Server auf Port 4711. 5. Der Browser öffnet lokal den Port 80 und verbindet sich mit dem angegebenen Server auf Port 4711. 6. Ihr Browser öffnet lokal einen Port, typischerweise über 1023, und verbindet sich mit dem Server auf Port 4711. sicher: möglicherweise:

Klausur – Web-2.0-Technologien 1 – SS2015

Seite 5 von 26

3. HTTP: WWW-Adressen

(2+1 = 3 P)

a) Welche der folgenden abs_path sind in einer URL zulässig? Argumentieren Sie anhand des RFC 1808 im Anhang. (Kurze Begründung falls nicht bzw. warum es erlaubt ist obwohl es ggf. anders scheint.) 1. "1+2=3"

2. "/klausur#ergebnisse"

b) Geben Sie eine relative URL UR an, die bzgl. Basis B zur absoluten URL UA vervollständigt wird. UR muss dabei ".." sinnvoll enthalten. (Die u.a. URLs bezeichnen Dateien.)

B = http://a.b.c/z/y/x UA = http://a.b.c/z/x/y UR =

Klausur – Web-2.0-Technologien 1 – SS2015

4. HTTP-Protokoll

Seite 6 von 26

(1+1+1,5+1,5 = 5 P)

a) Was wird im Host-Header übermittelt? In welche Richtung wird er übertragen? Warum könnte man annehmen, dass der Host-Header gar nicht erforderlich sein sollte?

b) Welche grundlegende Information wird im Accept-Encoding-Header übermittelt? (Sie brauchen hier kein echtes Beispiel anzugeben).

Klausur – Web-2.0-Technologien 1 – SS2015

Seite 7 von 26

c) Was bedeutet der Status-Code 401 (Unauthorized)? Welchen Header-Typ hat der Server bei den in der Vorlesung betrachteten Fällen dabei mitgeliefert? Mit welchem Zusatz-Header-Typ sollte der Client darauf dann reagieren?

d) Welche der folgenden Request-Lines sind zulässig? Sie finden die entsprechende Grammatik aus RFC 2616 im Anhang. (Kurze Begründung falls nicht bzw. warum es erlaubt ist obwohl es ggf. anders scheint.) 1. "GET /klausur/index.HTTP HTTP/1.1" CRLF

2. "GET /loesung/ HTTPS/4.3" CRLF

Klausur – Web-2.0-Technologien 1 – SS2015

Seite 8 von 26

5. HTML-CSS: Design

(7 P)

Schreiben Sie auf der gegenüberliegenden Seite den passenden HTML-Code um die folgende Tabelle zu erzeugen.

Nutzen Sie dazu die hier im definierten Style-Definitionen. Als Element-Attribute sind nur "rowspan", "colspan", "id" und "class" erlaubt!

Examination-Results



{ { { { {

border: thin solid black; } background-color: lightgreen; } background-color: lightblue; } background-color: lighthgrey; } box-shadow: 0px 0px 20px orange inset; }

{ { { { {

font-style: italic; width: 400px; color: red; font-weight: bold; text-align: right;

} } } } }

Klausur – Web-2.0-Technologien 1 – SS2015

Seite 9 von 26

HTML-Text:



Klausur – Web-2.0-Technologien 1 – SS2015

6. HTML-CSS: Grundlagen

Seite 10 von 26

(1,5+2+1+2+1.5+2 = 10 P)

a) Erklären Sie anhand von jeweils einem Beispiel den Unterschied zwischen einem Blockund Inline-Element. Wie wandelt man ein Block-Element in ein Inline-Element? Zeigen Sie das anhand eines Beispiels. [1.5P]

b) Geben Sie CSS-Regeln an, durch die hinter jedem a-Element, dessen Ziel mit „https:“ beginnt, ein „ [S]“ angefügt wird. Wozu ist das nützlich? [2P]

c) Erläutern Sie in kurzen Sätzen die beiden HTML-Element-Attribute „id“ und „class“. [1P]

Klausur – Web-2.0-Technologien 1 – SS2015

Seite 11 11 von 26

d) Nennen Sie 4 semantische HTML5-Block-Elemente, die von sich aus keine spezielle Auswirkung auf die Darstellung haben. [2P]

e) Wo und wann werden „Vendor-Prefixes“ eingesetzt? Nennen Sie 2 Präfixe! [1.5P]

f) Korrigieren Sie alle syntaktischen Fehler im folgenden HTML5/CSS3-Fragment. Nicht fehlerhafte Teile sollen unverändert bleiben. [2P]

Test 1



Klausur – Web-2.0-Technologien 1 – SS2015

Seite 12 von 26

7. HTML-CSS: Design

(1+1+1+2+2 = 7 P)

Gegeben ist das folgende HTML5-Dokument:

Rezeptbuch



09.03.2037 Obst in Würfel

schneiden Säfte dazugeben

alles mischen



23.02.1978 Rumpsteak Ofenkartoffel Zutaten waschen Fleisch würzen Fleisch braten

Klausur – Web-2.0-Technologien 1 – SS2015

Seite 13 von 26

Implementieren Sie nun die folgenden Design-Anforderungen jeweils als CSS-Styles. Zusammen soll der Inhalt der Kästen den gesamten Inhalt der Datei rezeptbuch.css ergeben.

a) Markieren Sie alle gefährlichen Arbeitsschritte (schneiden, backen, braten) mit roter Hintergrundfarbe. [1P]

b) Arbeitsschritte sollen mit römischen Zahlen (lower) durchnummeriert sein. [1P]

c) Das Erstellungsdatum soll immer rechtsbündig sein. [1P]

d) Jedes Rezept soll einen gepunkteten grünen Rahmen bekommen und der Innen- und Außenabstand soll auf allen Seiten 1.5em betragen. [2P]

e) Befindet sich der Maus-Cursor über einem Arbeitsschritt soll dies durch einen Halbschattenwurf (grün, 15px alle Seiten) hervorgehoben werden. [2P]

Klausur – Web-2.0-Technologien 1 – SS2015

Seite 14 von 26

8. CSS: Selektoren

(8 P)

Gegeben ist das folgende HTML5-Fragment: ...

Klausur Wann: 11.8.2015 8:30 Uhr Wo: 52-207 Chemie-Gebäude Aufgaben:

Beweisen Sie ... Programmieren Sie ...



Kreuzen Sie in der folgenden Tabelle die Elemente an, auf die sich der jeweilige Selektor auswirkt. Für jede korrekte Zeile 1 Punkt!

Element id

Selektor a * div > ul li > address.formal #d + p

#a > #b > #f, h1 .anspruchsvoll

h1 ~ p [title]

b

c

d

e

f

g

h

i

j

k

l

m

n

o

Klausur – Web-2.0-Technologien 1 – SS2015

9. Flexbox

Seite 15 von 26

(0.5+1.5+1.5+1.5 = 5P)

a) In Flexbox gibt es zwei Achsen. Wie heißen diese? [0.5P]

b) Geben Sie ein Beispiel an, wie die Achsen-Richtung eingestellt wird. [1.5P] Geben Sie nun die resultierende Richtung der beiden Achsen an (jeweils „von … nach ...“).

c) Illustrieren Sie in einer kleinen Zeichnung die Wirkung des Wertes „space-around“ für die Eigenschaft „align-items“. (Zeichnen Sie die beiden Achsen als Pfeile ein!) [1.5P]

d) Illustrieren Sie in einer kleinen Zeichnung jeweils die Wirkung des Wertes „flex-end“ für die Eigenschaft „justify-content“. (Zeichnen Sie die beiden Achsen als Pfeile ein!) [1.5P]

Klausur – Web-2.0-Technologien 1 – SS2015

10. PHP: Grundlagen

Seite 16 von 26

(2+2+3 = 7 P)

a) Was ist in PHP eine superglobale Variable? Geben Sie mindestens 5 davon an.

b) Geben Sie ein a-Element (als HTML-Quelltext) an, das einen GET-Request an die URL „/test/funktion“ schickt mit den Parametern (a='Timmy', b='+100', c='&').

c) Was ist der Unterschied zwischen den PHP-Funktionen urlencode und htmlentities? Wo werden sie jeweils eingesetzt und was könnte geschehen, wenn man sie einfach weglässt (Beispiel)?

Klausur – Web-2.0-Technologien 1 – SS2015

11. PHP: Programmanalyse

Seite 17 von 26

(3*1+2*2 = 7P)

Untersuchen Sie die folgenden PHP-Fragmente auf Korrektheit und Funktion. Falls korrekt: Was wird ausgegeben/zugewiesen und warum? Denken Sie daran, dass echo von sich aus keinen Zeilenumbruch oder extra Leerzeichen erzeugt. Argumentieren sie ausführlich anhand der Typen, evtl. Typumwandlungen und vielleicht vorhandener Fehler. a)

b)

c)

Klausur – Web-2.0-Technologien 1 – SS2015 d)

e)

Seite 18 von 26

Klausur – Web-2.0-Technologien 1 – SS2015

Seite 19 von 26

12. PHP: Operatoren Zerlegen Sie folgende Ausdrücke in Term-Bäume.

(1.5+3.5 = 5 P) Beispiel: 1 + 2 * 3.4 (7.8)

Berücksichtigen Sie bei der Entscheidung, wie „stark“ einzelne Operatoren binden. (Präzedenzen siehe Cheat-Sheet!) Schreiben Sie zusätzlich die Ergebnisse der Ausdrücke in Klammern an den jeweiligen Knoten (siehe Beispiel).

+ 1

* 2

(6.8)

3.4

a)

7 * 6 . '42' / 7.0

b)

(float) 1 === 3 % 2 && 'a' < 5 ? 42 : 1 . 3

Klausur – Web-2.0-Technologien 1 – SS2015

13. PHP: Programmierung

Seite 20 von 26

(4*1 = 4 P)

a) Was sind Session-Daten?

b) Was bewirkt der Aufruf von session_start()? Warum muss er vor der ersten Ausgabe erfolgen?

c) Geben Sie ein Beispiel-PHP-Fragment an, in dem der Wert der Session-Variablen „Username“ auf „Peter“ gesetzt wird.

d) Wo werden die Session-Daten normalerweise im Server gespeichert. Warum?

Klausur – Web-2.0-Technologien 1 – SS2015

14. Hashes

Seite 21 von 26

(4*1 = 4 P)

a) Was ist eine Hash-Kollision? Nennen Sie zwei Anwendungsbereiche von Hashes, bei denen das ein Problem ist.

b) Sind Hash-Kollisionen (z.B. bei md5) vermeidbar? (Mathematisch-präzise Begründung!)

c) Ein symmetrisches Verschlüsselungsverfahren ermöglicht es, Daten mit einem (schwer erratbaren) Schlüssel k zu verschlüsseln, so dass die Umkehrung (Entschlüsselung) praktisch nur dann möglich ist, wenn man den Schlüssel k besitzt. Vergleichen Sie die symmetrische Verschlüsselung konzeptionell mit der Base64-Kodierung. Was ist bei letzterer die Voraussetzung zur Dekodierung der Daten?

d) Vergleichen Sie analog dazu die symmetrische Verschlüsselung konzeptionell mit Hashing. Was ist bei letzterem die Voraussetzung zur Dekodierung der Daten?

Klausur – Web-2.0-Technologien 1 – SS2015

Seite 22 von 26

Klausur – Web-2.0-Technologien 1 – SS2015

Zusatzblatt 1 Zu Aufgabe: ______

Seite 23 von 26

Klausur – Web-2.0-Technologien 1 – SS2015

Zusatzblatt 2 Zu Aufgabe: ____

Seite 24 von 26

Klausur – Web-2.0-Technologien 1 – SS2015

Seite 25 von 26

Anhang A EBNF aus dem RFC1808 „Relative Uniform Resource Locators“: URL

= ( absoluteURL | relativeURL ) [ "#" fragment ]

absoluteURL = generic-RL | ( scheme ":" *( uchar | reserved ) ) generic-RL

= scheme ":" relativeURL

relativeURL = net_path | abs_path | rel_path net_path abs_path rel_path

= "//" net_loc [ abs_path ] = "/" rel_path = [ path ] [ ";" params ] [ "?" query ]

path fsegment segment

= fsegment *( "/" segment ) = 1*pchar = *pchar

params param

= param *( ";" param ) = *( pchar | "/" )

scheme net_loc query fragment

= 1*( alpha | digit | "+" | "-" | "." ) = *( pchar | ";" | "?" ) = *( uchar | reserved ) = *( uchar | reserved )

pchar uchar unreserved

= uchar | ":" | "@" | "&" | "=" = unreserved | escape = alpha | digit | safe | extra

escape hex

= "%" hex hex = digit | "A" | "B" | "C" | "D" | "E" | "F" | "a" | "b" | "c" | "d" | "e" | "f"

alpha lowalpha

= lowalpha | hialpha = "a" | "b" | "c" | "d" "j" | "k" | "l" | "m" "s" | "t" | "u" | "v" = "A" | "B" | "C" | "D" "J" | "K" | "L" | "M" "S" | "T" | "U" | "V"

hialpha

| | | | | |

"e" "n" "w" "E" "N" "W"

| | | | | |

"f" "o" "x" "F" "O" "X"

| | | | | |

"g" "p" "y" "G" "P" "Y"

| | | | | |

"h" "q" "z" "H" "Q" "Z"

| "i" | | "r" | | "I" | | "R" |

digit

= "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"

safe extra national reserved punctuation

= = = = =

"$" "!" "{" ";" ""

| | | | |

"_" "'" "|" "?" "#"

| | | | |

"." "(" "\" ":" "%"

| | | | |

"+" ")" | "," "^" | "~" | "[" | "]" | "`" "@" | "&" | "="...