home  |  suche  |  kontakt/johner  |  institut 
studierende  |  tech-docs  |  mindmailer 

Assignment 13: Requirements-Engineering

Deutsch

Bilden Sie Gruppen zu vier Personen, wobei zwei Personen der Kundenseite und zwei der Auftragnehmerseite zuzuordnen sind

  • Auf Kundenseite können Sie beispielsweise aus folgenden Rollen wählen: Finanzierer, Anwender, Betreiber, Betroffener, ...
  • Auf Auftragnehmerseite soll der/die GeschäftsführerIn sowie der/die EntwicklungsleiterIn vertreten sein.

Bearbeiten Sie bitte eines der drei Szenarien. Empfohlen ist Kontextszenario 3. Die Klausur wird sich eher auf dem Schwierigkeitsniveau von Kontextszenario 1 bewegen.

  • Kontextszenario 1: Am Semesterende schreiben die Studierenden Klausuren. Danach verabschieden sie sich möglichst rasch in die verdienten Semesterferien. Die Professoren machen sich dann an die Arbeit. Spätestens am Ende der Prüfungszeit müssen sie die Ergebnisse bekannt gegeben haben. Dazu nutzen sie das schwarze Brett. Allerdings sind zu diesem Zeitpunkt schon viele Studenten abgereist. In den Semesterferien gehen die Studenten in Urlaub, gehen arbeiten oder bereiten sich auf eine eventuelle Nachklausur vor. 
  • Kontextszenario 2: Nach Studienende beginnen die Absolventen zu arbeiten und verlassen daher Konstanz. Gerne würden sie mit den Kommilitonen und Kommilitoninnen in Kontakt bleiben. Persönliche Netzwerke sind auch bei der Arbeitssuche hilfreich. Kontakte zu älteren und jüngeren Semestern würden dieses Netzwerk weiter verbreitern. Auch die älteren, bereits im Beruf stehenden Studenten sind an diesen Kontakten interessiert. Schließlich können sie darüber neue Kollegen für ihre Firma rekrutieren.
  • Kontextszenario 3: Es geht um den Kontext einer Brauerei aus dem Hochschwarzwald. Lesen Sie hier mehr. Der Vorteil der Aufgabe besteht darin, dass Sie mehr Kontextinformationen zur Verfügung haben. Der Nachteil besteht darin, dass Sie mehr Kontextinformationen bearbeiten müssen.

Teilaufgabe a): Kontextanalyse

Dokumentieren Sie als Auftragnehmer:

  1. Wer sind die Stakeholder? Welche dieser Stakeholder sind potentielle Nutzer des Systems? Optional: Beschreiben sie einen Vertreter der letzteren Gruppe mit Hilfe der "Personas".
  2. Was sind die Kernaufgaben der Nutzer?
  3. Füllen Sie eine Tabelle mit den Spalten aus:

    • Kontextszenario/Nutzungskontext (dabei den obigen Text nur ergänzen)
    • Erfordernis
    • Nutzungsanforderung

Teilaufgabe b): Vervollständigen des Lastenhefts (optional)

  1. Sehen Sie weitere Stakeholder-Anforderungen? z.B. Gesetzliche oder organisatorische Anforderungen? Nutzen Sie auch die ISO 9126 als Checkliste.
  2. Kennzeichnen/nummerieren Sie alle Anforderungen eindeutig.
  3. Optional: Beschreiben Sie kurz, wie man prüfen kann, dass die im Lastenheft formulierten (Stakeholder-) Anforderungen durch das entwickelte System erfüllt sind.

Teilaufgabe c): Pflichtenheft (optional)

Wählen Sie eine der Kernaufgaben und zerlegen sie diese in Teilaufgaben. Leiten Sie daraus ein Kontextszenario ab, indem Sie eine Tabelle mit folgenden Spalten ausfüllen:

  1. Teilaufgabe
  2. Aktion des Benutzers
  3. Reaktion des Systems
  4. Damit erfüllte Nutzungsanforderung

Welche Werkzeuge und welche Nutzungsobjekte können Sie bereits jetzt identifizieren? Wie könnte die GUI aussehen, die diese Elemente darstellt?

 Beschreiben Sie kurz, wie man prüfen kann, dass die im Pflichtenheft formulierten (System-)Anforderungen durch das entwickelte System erfüllt sind. Nennen Sie Test- oder Prüfverfahren.

Hinweis: Einige werden ihre Dokumente der ganzen Gruppe vorstellen.

English

Context scenario: At the end of each semester students have to write the final exams. After they leave as fast as possible for the semester breaks. The professors start evaluating the exams. Latest at the end of the exam period they have to publish the results. They use the black bord to do so. However, most of the students already have left, either for vacation, in order to take a job or to prepare a resit (second attempt to pass the exam).

  • Who are the stakeholders?
  • What are their core tasks?
  • What are the user needs?
  • What are the user requirements?

Assignment 12: Custom Tags (optional, topic not covered in lecture)

Schreiben Sie ein "Custom-Tag", das sich "Alter" nennt. Als Parameter/Attribut kann man diesem Tag ein (Geburts-) Datum, die Sprache und die Anweisung übergeben, wie das Datum formatiert ist.

Beispiel:

 

<htwg:alter format="yyyy-MM-dd" language="de">1923-02-17</htwg:alter>

Als Ergebnis würde angezeigt werden "xy Jahre". Würde man "en" als Sprache übergeben, würde "xy years ausgegeben, wobei xy für das Alter in Jahren steht.

Hinweise:

  1. Es gibt eine Klasse SimpleDateFormat.
  2. Nützlich mag auch dieses Code-Snippets sein:

    <jsp:doBody var="getDate"></jsp:doBody>
    <%String s =(String) jspContext.getAttribute("getDate");%>

Wichtige Informationen finden Sie in den Unterlagen zur Vorlesung zu JSTL und Tags.

Assignment 11: Servlet & JSP (Optional)

Mit dieser Aufgaben können Sie das Zusammenspiel von Servlets und JSPs, wie man es bei MVS(2) Architekturen oft findet, ausprobieren.

Schreiben Sie eine Klasse DispatcherServlet, das die Anfrage an eine JSP-Datei weiterleitet. Dazu kann Ihnen folgender Code nützlich sein:

 

ServletContext context = getServletContext();  
RequestDispatcher dispatcher =  context.getRequestDispatcher("/dispatcher.jsp");
dispatcher.include(request, response);

Die JSP-Datei gibt dann tabellarisch alle Request-Parameter und deren Werte tabellarisch aus.

Lösungshinweis:

  • JSPs kennen das implizite Objekt request, auf dem eine Methode getParameterMap() definiert ist.
  • Zum Testen können Sie ihr Servlet im Browser aufrufen. Abhängig von Ihren Definitionen kann das wie folgt aussehen: http:// localhost:8080/WebTechnologies/Dispatcher?vorname=gerd&nachname=mueller

Assignment 10: JSP 2

Deutsch

In dieser Übung geht es darum, dass Sie Java-Klassen (konkret Java-Beans) in einer JSP-Seite auslesen.

Konkret sollen Sie in einer JSP-Seite die Werte einer Map tabellarisch ausgeben:

DrachenfelsHeiko von
JohnerChristian

Die Werte entstammen einer Java-Bean:

 

public class TestBean {
  public Map<String,String> getPersons() {
    Map<String, String> persons = new TreeMap<String, String>();
    persons.put("Drachenfels", "Heiko von");
    persons.put("Johner", "Christian");
    return persons;
  }

}

 

Übernehmen Sie den Code in die Klasse htwg.TestBean und schreiben Sie die dazu notwendige JSP-Seite.

English

Display the values (two persons) of a JavaBean as table (as shown above).

The JavaBean contains the method getPersons() as shown above. 

Assignment 9: JSP 1

Deutsch

Schreiben Sie eine JSP Seite, welche ein Formular aus 3 Texteingabefeldern und einen Button enthält.

In das erste und zweite Feld kann man zwei Zahlen, in das dritte einen Operator (+, - , x, /) eingeben. Nach Knopfdruck wird das Ergebnis der Berechung angezeigt. Eine Validierung der Eingabefelder ist nicht notwendig.

Diese Übung hat auf den ersten Blick eine Ähnlichkeit mit dem JavaScript Taschenrechner. Beachten Sie aber, dass jetzt die Berechnung auf Serverseite stattfindet.

Tipp: JSP-Dateien kennen implizite Objekte. Zu diesen zählt auch das Objekt request, von dem Sie wie bei Servlets die Parameter auslesen können.

English

Write a JSP page that contains three text input fields and a button.

The first to fields accept numbers, the third mathematical operators such as +, -, / and *. After pressing the button the result of the calculation is shown. A validation of the values in the input fields is not mandatory.

The assignment looks similar to the JavaScript calculator. However, this time the calculations are preformed on the server side.

Hint: JSP files know implicit objects such as request, response etc.

Assignment 8: AJAX using frameworks

Deutsch

Setzen Sie eine JavaScript Bibliothek wie JQuery ein, um Daten aus dem Backend nachzuladen. Als Beispiele können Sie aus folgenden Aufgabenstellungen wählen:

  1. Erinnern Sie sich noch an die Aufgabe, bei der Sie per AJAX passende Namen anzeigen? Ersetzen Sie den eigenen JavaScript-Code zum Erzeugen des AJAX-Requests durch JQuery.
  2. Schreiben Sie eine HTML-Seite mit einem Button. Laden Sie auf Knopfdruck JSON-Daten und fügen Sie die Ergebnisse unterhalb des Buttons in die HTML-Seite ein ohne die Seite neu laden zu müssen.
  3. Schreiben Sie eine eigene JSON-Datei. Diese kann beispielsweise die Werte aus folgendem XML enthalten (so üben Sie noch, eine XML-Datei nach JSON zu überführen):
    <Hochschule Name="HTWG">
      <Studierende Matrikel="1">Anne</Studierende>
      <Studierende Matrikel="2">Hannah</Studierende>
    </Hochschule>
  4. Ändern Sie Ihr Mini-Facebook so, dass es keinen HTML-Code, sondern nur noch Daten (z.B. im JSON-Format) und Ressourcen (CSS, JS) zurückschickt.

Implementieren Sie mindestens zwei der Teilaufgaben

English

Use the JavaScript library JQuery to load data from a backend. Select at least two of the following excercises: 

  1. Do you recall the assignment with the search for names? Replace your JavaScript code using JQuery.
  2. Write a HTML page that has a button. Pressing the button loads JSON-Daten and inserts the results below the  button into the HTML page without reloading the page
  3. Convert the follwing XML file into JSON and load the data into a HTML page using the $.ajax-function.:
    <university Name="HTWG">
      <student Matrikel="1">Anne</student >
      <student Matrikel="2">Hannah</student >
    </university >
  4. Update your Mini-Facebook. The backend (servlet) only my respond with plain data and JavaScript but no HTML code.

Assignment 7: AJAX

Deutsch

Bei dieser Aufgabe geht es darum, auf einer Webseite einen oder mehrere Vornamen anzuzeigen, die mit dem Buchstaben beginnen, den man in ein Eingabefeld eingegeben hat.

Schreiben Sie eine einfache HTML-Seite, die im Wesentlichen nur ein Text-Eingabefeld enthält. Sobald man in dieses Feld einen Buchstaben oder eine Buchstaben-Kombination eingibt (ohne dass ein Button geklickt wird), wird der erste gefundene Vorname auf der Seite eingetragen, der mit diesem Buchstaben bzw. dieser Buchstaben-Kombination beginnt.

Sie bauen somit eine Art Google-Suche für Vornamen, bei der ebenfalls die Ergebnisse nach jedem Tastendruck dynamisch angezeigt werden.

Eine Liste von circa 200 Vornamen finden Sie auf dieser Seite. Ein Servlet liest diese Daten initial ein (in ein Array oder ein HashSet) und schreibt den ersten passenden Vornamen oder alle passenden Vornamen auf den Response. Diese(n) Vornamen zeigt dann die HTML-Seite an.

English

The goal of this excercise is to display all first names matching the first letters typed into an input field.

Write a simple HTML page that contains a input field. As soon one or more letters are entered into this input field the web page shows all first names starting with these letters. The search is case insensitive. 

The data are loaded without the need to press any button.

Hint: Find here a list of first names. A servlets reads these data initially (before first request) into an array or collection. It returns either just the data (e.g. in JSON format) or a HTML snipett with all matching names.

Assignment 6: Servlets

Deutsch

Teilaufgabe 1

Sie schreiben ein Mini-Facebook. Man kann persönliche Daten in ein Formular eintragen, welche nachher auf einer Webseite angezeigt werden.

Rezept:

  • Legen Sie ein Dynamic WebProject an
  • Schreiben Sie ein einfaches HTML-Formular
  • Schreiben Sie ein Servlet, das die Formulardaten ausliest und eine HTML-Seite erzeugt. Diese Seite enthält eine dreispaltige Tabelle mit eben diesen Daten:

    1. Spalte: Feldbeschreibung, z.B. "Vorname"
    2. Spalte: Wert, z.B. Fredi
    3. Spalte: bleibt noch leer

  • Ändern Sie den URL-Pfad ("URL Mapping") auf "HtwgBook"
  • Lassen Sie sich die generierte Seite anzeigen

Teilaufgabe 2 (optional)

Beschreiben Sie, wie Sie vorgehen würden, wenn Ihnen Eclipse nur als IDE, nicht aber als Umgebung mit integriertem Tomcat zur Verfügung stünde. Sie dürften nur "normale" Java-Projekte anlegen.

 Teilaufgabe 3

Die angezeigte Webseite, welche die Tabelle mit den persönlichen Daten enthält, soll jetzt auch editierbar sein: In der dritten Spalte befindet sich nun ein Button "ändern". Drückt man diesen Knopf, so erscheint ein Eingabefeld (auf der gleichen oder auf einer neuen Seite), in das man den neuen Wert eingeben kann. Nach "submit" wird die Tabelle mit dem neuen Wert aktualisiert angezeigt. Die anderen Tabellenzeilen bleiben unverändert.

Passen Sie Ihr Servlet so an, dass es eine dreispaltige Tabelle mit den Formularfeldern ausgibt. Außerdem sollte es in der Lage sein, sich alle Werte zu "merken".  Tipp: Nutzen Sie die HttpSession.

Hinweise zur Lösung: Der übliche Ansatz vieler Studierenden, drauf los zu programmieren und sich iterativ der Lösung zu nähern, wird wahrscheinlich zu Schwierigkeiten führen. Überlegen Sie sich zuerst, welche Dateien (z.B. HTML-Seite, Servlets) Sie überhaupt benötigen, wie sich diese aufrufen und welche Parameter diese übergeben. Überlegen Sie sich auch, was das Servlet (die Servlets) in den doGet/doPost-Methoden machen sollen.

Bitte verwalten Sie weiterhin allen Code in Ihrem Git-Repository!

English

Part 1

Program a "mini facebook" web application. It is possible to enter personal data into a form. Upon submission of the data, data will be shown as table.

Receipe:

  • Add new dynamic webproject in eclipse
  • Write a simple HTML form
  • Write a servlet that reads out the form data an generates a table (three colums as shown below)

    1. Column: Description e.g. "First name"
    2. Column: Value, e.g. "Simon"
    3. Column: empty (still)

  • Change the URL path ("URL Mapping") to "HtwgBook"
  • Run the application

Part 2 (optional)

What would you do to run the application in Tomcat without Eclipse? Eclipse only may be used to program the application but not to run it.

Part 3

The webpage shall contain in the third column a button "edit" that allows to edit the value in the respective row. The other values (rows) remain unchanged.

Change the servlet accordingly. Hint: HttpSession helps you to remember data.

Hint: Students tend to start programming right away. This approach might not be very effective and might  cause many iterations and attempts. Rather consider designing "an architecture" first that  defines the artifacts (HTML pages, servlets),the interaction and sequence this ressources are accessed respectively generated.

Please version control all your code in a git repository!

Mein Facebook

ParameterWert--
First nameSimon
Last nameWagner
LocationKonstanz
HobbyProgrammieren

Assignment 5: HTML5

Deutsch

Das Ziel dieser Übung besteht darin, dass Sie praktische Erfahrungen mit HTML 5 sammeln. Sie müssen mindestens zwei der folgenden Teilaufgaben bearbeiten. Teilaufgaben b) und e) sind sehr empfohlen, um CallBacks besser zu verstehen.

Teilaufgabe a): Local Storage

Schreiben Sie eine HTML-Seite, die zwei Textfeld enthält, in die man Werte eingeben kann. Zusätzlich enthält die Seite einen Button "speichern". Beim Klicken auf diesen Button werden die Werte im "Web Storage" auch nach dem Neuladen der Seite gespeichert. Mit einem Klicken auf einen zweiten Button werden die Inhalte auf der HTML-Seite ausgegeben:

  • Inhalt des ersten Textfelds ist: ...
  • Inhalt des zweiten Textfelds ist: ...

Teilaufgabe b): Geolocation

Schreiben Sie eine HTML-Seite, die beim Laden Ihre aktuelle Position ausgibt.

Achtung: Der Firefox in Version 11 unterstützt diese Funktion leider noch nicht.

Teilaufgabe c): Erweiterung der HTML-Tags

Schreiben Sie eine Seite, die

  • zum einen ein Video ohne die Verwendung von Flash ausgibt und
  • zum anderen ein Formular enthält, mit dem man Namen, E-Mail-Adresse, Hausnummern (Zahl zwischen 0 und 200) und Geburtsdatum (muss in der Vergangenheit liegen) eingeben kann. Nutzen Sie auch das Attribute "placeholder".

Teilaufgabe d): Neue Layout-Möglichkeiten

Schreiben Sie eine HTML-Seite, die alle Überschriften der Ebene 1 mit einer Schmuckschrift darstellt. Verwenden Sie dazu Webfonts. Sie können dazu Webfonts von Google verwenden.

Fügen Sie in die Seite zusätzlich eine Tabelle ein, bei der jede zweite Zeile hellgrau hinterlegt ist.

Teilaufgabe e): Callbacks

Schrieben Sie zwei einfachste Funktionen a() und b(), die beispielsweise nur einen Alert beinhalten z.B. alert("Bin Funktion a");

Schreiben Sie eine dritte Funktion funktionausführen(einefunktion). Diese Funktion ruft die übergebene Funktion auf.

Schreiben Sie eine vierte Funktion start(), die die Funktion funktionausführen zweimal nacheinander aufruft. Einmal über gibt sie dazu die Funktion a(), einmal die Funktion b().

Die übergebenen Funktionen nennt man CallBacks.

Wenn Sie noch mehr lernen wollen, dann erweitern Sie die Funktionen a und b um einen Übergabeparameter: a(text), b(text). Den übergebenen Text geben Sie beim Alert mit aus. Zudem ergänzen Sie die Funktion funktionausführen(einefunktion, text) um einem zweiten Übergabeparameter und modifizieren die Methode start() entsprechend.

English

The goal of this exercise is to gather experinces with HTML5. You have to solve at least two of the following parts. Parts b) and e) are particularily recommended to gain a better understanding of callbacks.

Part a): Local Storage

Implement a HTML page with two text input fields and a button "save". On click on this button the two values are stored in the "web storage" and can be displayed on clicking on a second button "show values".

Part b): Geolocation

Implement a HTML page that shows your current position (e.g. a coordinates or on a map).

Part c): Additional HTML-Tags

Implement a HTML page that

  • includes a video 
  • contains a form with required values name, e-mail, street number (number between 0 and 200), day of birth (must be in the past). Make use of the attribute "placeholder"

Part d): New layout options

Implement a HTML page that uses web fonts for all headings. You may use Google's webfonts.

Insert a table with a grey background for all odd rows.

Part e): Callbacks

Implement two simple functions a() and b() that contain e.g. an alert ("I'm function a").

Implement a third function executeFunction(afunction). This function executes the function that is passed as parameter.

Implement a forth fuction start() that calls executeFunction twice. The first time it calls it with function a(), the second time with function b().

The function that are passed as parameters are called "callbacks".

If you want to come-up with a even more sophisticated solution, add parameters to functions a(text) and b(text). Add a second parameter to executeFunction(aFunction, aText). Modify the other methods accordingly.

Assignment 4: JQuery, JSON

a) JQuery

Deutsch

Nutzen Sie ein bestehendes JavaScript Framework wie JQuery, um div-Elemente zu animieren. Laden Sie dazu jQuery herunter und binden Sie die Bibliothek ein. Verwenden Sie daraus definierte Funktionen wie slideUp() oder animate(). Die Seite von jQuery bietet einfach nachzuprogrammierende Beispiele (1 Zeile Code) und Tutorials.

English

Use an existing JavaScript framework such as JQuery to animate div-elements. Download JQuery and include it into your HTML file. Use pre-defined functions like slideUp or animate. There is a page with simple examples (partially just 1 line).

b) JavaScript & JSON

Deutsch

Server stellen den Clients (Browser) häufig Daten im JSON-Format zur Verfügung, z.B. http://finance.yahoo.com/webservice/v1/symbols/allcurrencies/quote?format=json.

  • Öffnen Sie diese Datei, kopieren Sie das erste Objekt in Ihren HTML-Code (var text = <TEXT_AUS_LINK>;) und setzen Sie die Daten per JavaScript in Ihre HTML-Seite ein.
  • In einem weiteren Schritt werten Sie mehrere Objekte der JSON-Datei aus, iterieren über alle Werte und erzeugen daraus eine HTML-Tabelle. Beschränken Sie sich dabei auf die Attribute "symbol", "name" und "price". Sie können optional diesen Ausschnitt aus der JSON Datei nutzen.
    Ggf. kann Ihnen dabei folgendes Code-Snippet nützen:

    var resources = object.list.resources;

    var result = "";

    for (r in resources){

    result += resources[r].resource.fields.name + " - ";

    }

  • Erst in der Vorlesung zu AJAX lernen Sie, wie man die Daten direkt von der URL lesen/laden kann.

English

Servers frequently provide data to clients such as browers in JSON format e.g. http://finance.yahoo.com/webservice/v1/symbols/allcurrencies/quote?format=json.

  • Open this file and copy the first object into your HTML code (var text = <TEXT_FROM_LINK>;) and add the data (contents) to the HTML page using JavaScript.
  • In a next stop evaluate multiple objects in that JSON file, iterate over values and generate a HTML table. You may limit the attributes to "symbol", "name" and "price". You may use optionally this excerpt of a JSON file and the code snippet shown above. 

In the lecture you will get to learn how to read data directly from an URL using AJAX.

c) XML & JSON 

Convert the following XML data into JSON format:
        <Bestellung nummer="A123">
            <Besteller kdnr="GER">
                <Vorname>Hans-Ulrich</Vorname>
                <Nachname>Graf</Nachname>
            </Besteller>
            <Position>
                <BestellPosition>1</BestellPosition>
                <Produkt>
                    <Bestellnummer>A122</Bestellnummer>
                    <Name>Fön</Name>
                    <Preis>23,75</Preis>
                </Produkt>
            </Position>
            <Position>
                <BestellPosition>2</BestellPosition>
                <Produkt>
                    <Bestellnummer>A122</Bestellnummer>
                    <Name>Tablet</Name>
                    <Preis>259</Preis>
                </Produkt>
            </Position>
        </Bestellung>

Assignment 3: JavaScript und DOM

German

Diese Aufgabe enthält Teile, die dem Umgang mit Versionsverwaltungssystemen dienen (in kursiv), und Teile, mit denen HTML, CSS, JS erlernt werden kann.

Hinweis: Der Umgang mit Versionsverwaltungssystemen ist Gegenstand der nächsten Stunde.

a) Remote Repository anlegen

Legen Sie auf Github oder Bitbucket ein (remote) Repository an. 

b) Daten aus Formular einfügen

Legen Sie ein neues Projekt in Eclipse an. Legen Sie in diesem Verzeichnis mit SourceTree ein lokales Repository an.

Schreiben Sie eine einfache HTML Seite, die ein Formular enthält. In dieses Formular kann man Text eingeben. Sobald man einen Button klickt, wird dieser Text in die HTML-Seite eingefügt.

Fügen Sie die Daten dem Index hinzu. Führen Sie einen Commit durch.

Bevor Sie die Übungsstunde beenden, laden Sie den Code ins Remote Repository hoch.

c) Taschenrechner

Schreiben Sie einen Taschenrechner mit JavaScript. Sie können sich entscheiden, ob man die Zahlen per Button oder direkt über die Tastatur in ein Formularfeld eingeben kann. Die eval()-Funktion ist für diese Teilaufgabe tabu.

Auch diese Dateien (wie alle künftigen Übungen!!) bringen Sie bitte unter Versionskontrolle.

English

This assignment contains elements that are meant to practice working with version control systems (in italics) and elements that are meant to practice working with HTML, CSS and JS.

Hint: We will cover the topic "version control systems in the next exercise".

a) Create remote repository anlegen

Create a remote repository on  Github oder Bitbucket

b) Insert data from form

Create a local Eclipse project. Create inside this project / folder a local respository using SourceTree.

Write a simple HTML page that  contains a form. One can enter text into this form (e.g. text field). As soon the button is pressed, the text is inserted into the page (e.g. after the form).

Add the files to the index and commit it locally.

Upload at the end of the lesson the files to the remote repository.

c) Calculator

Write a calculator using JavaScript. You may decide whether the digits can be entered via buttons or via a text field. It is not permitted to use the "eval()"-function.

Please put any files (also in future assignments) under version control.

Assignment 2: CSS

Deutsch

Sie formatieren Ihren Lebenslauf. Dazu sollten Sie die folgenden Optionen nutzen:

  • Sie ändern die Farbe des Hintergrunds und mindestens eines Textes
  • Sie positionieren das Passbild oben rechts
  • Die Spaltenüberschriften der Tabelle sind in heller Farbe auf dunklem Hintergrund
  • Die Überschriften sind in Großbuchstaben gesetzt
  • Sie haben Text in einem bestimmten Tag, z.B. <p>, den Sie anders formatieren als den Text in der übrigen (<p>-) Tags

Die Formatierung erfolgt ausschließlich über CSS.

English

Please layout  your CV. Use the following options:

  • Change the background color of at least one text element.
  • Position the portrait on the upper right corner.
  • The table headings are in a bright color on dark background.
  • The headings are all upper case.
  • One p-tag is formatted differently than the other p-tags

Assignment 1: HTML

Deutsch

Schreiben Sie eine HTML-Seite mit Ihrem Lebenslauf. Diese sollte enthalten:

  • Name, Anschrift, Kontaktdaten (können anonymisiert oder verfälscht sein)
  • Ihr Passbild. Falls Sie keines haben, können Sie Opens external link in new windowdieses nutzen.
  • Tabellarische Darstellung der wichtigsten Stationen (z.B. Schule, Abi, Jobs, Studium, Wehr- oder Ersatzdienst)
  • Hobbies oder Interessen als Aufzählungsliste
  • Formular (noch nicht funktionierend), mit dem man Ihnen eine Nachricht hinterlassen kann. Der Nutzer kann die Priorität seiner Nachricht klassifizieren (sehr wichtig, wichtig, eilt nicht), wozu Sie "Radio-Buttons" nutzen. Weiter kann man das Thema aus einer Liste auswählen (Job-Angebot, Nur-mal-so, private Nachricht, Sonstiges).
  • die einzelnen Abschnitte sind durch Überschriften von einander getrennt.
  • Sie verwenden mindestens einen Link, beispielsweise den auf die Seite der Hochschule.

Die HTML-Seite darf keine Formatierungsinformationen enthalten.

English

Write your curriculum vitae (CV) as a web page. This site should include (any information may be anonymized)

  • Name, address, contact data
  • Your portrait (if you don't have any use this one)
  • Most important steps in your life (e.g. school, jobs, civil or military services) in tabular form
  • Your hobbies as lists
  • Form to send you a message. The message can be prioritized (urgent, semi-urgent, not urgent)
  • the sections are separated by heading
  • Also use a link e.g. to our university

The  page may not contain formating information yet.