Anforderungsanalsyse - Prototyping mit JavaScript

1,532 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,532
On SlideShare
0
From Embeds
0
Number of Embeds
457
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Anforderungsanalsyse - Prototyping mit JavaScript

  1. 1. Software Technik HTWG Konstanz Anforderungsanalyse Teil II Prototyping mit HTML und CSS Christian Baranowski
  2. 2. Prozess Wasserfallmodell
  3. 3. Requirement analysis Wasserfallmodell System design Coding Testing Delivery
  4. 4. Funktionale Anforderungen erfassen mittels Prototyping
  5. 5. HTML HYPERTEXT MARKUP LANGUAGE Einführung in die HTML
  6. 6. MARKUP LANGUAGE ML „Eine Auszeichnungssprache dient zur Beschreibung des Inhalts eines Dokumentenformats“ - Quelle Wikipedia
  7. 7. MARKUP MARKUP LANGUAGE ML Beispiel für … HTML LaTeX Wikitext <h1> section{ Überschrift Überschrift Überschrift = Überschrift = </h1> } <ul> begin{itemize} <li>Punkt 1</li> item Punkt 1 * Punkt 1 Aufzählung <li>Punkt 2</li> item Punkt 2 * Punkt 2 <li>Punkt 3</li> item Punkt 3 * Punkt 3 </ul> end{itemize} fetten Text <b>fett</b> textbf{fett} ''fett'''
  8. 8. Auszeichnungssprache Descriptive Markup Procedural Markup Language (DML) Language (PML) - SGML / XML - LaTeX - HTML - PostScript - DocBook - ... - SVG - ...
  9. 9. HTML Historie - 1967 William Tunnicliffe stellt generic coding – Konzept vor (Trennung Information von Darstellung.) Buch-Designer Stanley Rice veröffentlicht Idee der editorial structure tags. - 1969 Generalized Markup Language (GML): Konzept eines formal definierten Dokumententyps mit einer verschachtelten Struktur. - 1986 GML wird zu ISO 8879: Standard Generalized Markup Language (SGML) „Vater“ ist Charles Goldschwab, IBM - 1989 Tim Berners-Lee (CERN) beschreibt Grundzüge des WWW - 1992 Tim Berners-Lee stellt ersten Entwurf zu HTML vor - 1993 Alpha-Version des "Mosaic for X"-Browser (Netscape Browser) - 1994 MIT und CERN vereinbaren Gründung der W3 Organisation - 1996 Erste Recommendation der Cascading Style Sheets, level 1 - 1996 Working Draft zur XML, 1998 erste Recommendation - 2001 W3C verabschiedet den XML Schema-Standard Quelle: http://www.f4.fhtw-berlin.de/people/thomas/pdf/glMESO_02.pdf
  10. 10. Dokumente bestehen aus Struktur Format/Darstellung (Kapitel, Abschnitte, (Schriftarten, -größen, - Aufzählungen ...) formate, Farben, Positionen...) Inhalt / Daten (Text, Bilder, Video ...)
  11. 11. Grundgerüst einer XHTML-Datei <?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Beschreibung der Seite</title> </head> <body> </body> </html>
  12. 12. HTML XHTML <!DOCTYPE html PUBLIC "-//W3C// <!DOCTYPE html PUBLIC "-//W3C// DTD HTML 4.01//EN" DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/html4/ ! "http://www.w3.org/TR/xhtml1/ strict.dtd"> DTD/xhtml1-strict.dtd"> <html lang="en"> <html xmlns="http://www.w3.org/ 1999/xhtml" xml:lang="en" lang="en"> <body> <body> <h1>Überschrift1</h1> <h1>Überschrift1</h1> <p>Paragraph</p> <p>Paragraph</p> Zeilenumbruch<br> <p>Zeilenumbruch<br/></p> <ul> <ul> <li> Erstes Listen Element <li> <li> Zweites Element Erstes Listen Element </ul> </li> </body> <li> Zweites Element </li> </ul> </body>
  13. 13. DOCTYPE - Document Type Definition DOCTYPE Beschreibung Schließt aus, dass die Darstellung des Dokuments strict Elemente und Attribute benutzt, die das W3C als Aufgabe von Stylesheets ansieht. Kennzeichnet ein Dokument, in dem Elemente und transitional Attribute benutzt werden, die als unerwünscht gelten. (Dokumente für Browser ohne CSS) Kennzeichnet ein Dokument, das Frames (nicht frameset iframe) benutzt.
  14. 14. XHTML DOCTYPE Definition XHTML 1.0 - Strict, Transitional, Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  15. 15. HTML Grundelemente Überschriften <h1><h1> Textabsätze <p></p> Zeilenumbruch <br/> Zitate <blockquote> Präformatiertem Text <pre></pre> Block-Elemente <div><div> <span> Trennlinien <hr/>
  16. 16. Listen Aufzählungsliste <ul> ... </ul> Nummerierte Liste <ol> ... </ol> Definitionsliste <dl><dt><dd>...</dl>
  17. 17. Tabellen einfache Tabellen mit <th> <td> Tabellen mit Kopf und Fuß <thead><tbody>...
  18. 18. Links und Grafiken ...
  19. 19. Formulare ...
  20. 20. Anti Pattern „Anti-Pattern (deutsch: Antimuster) bezeichnet in der Softwareentwicklung einen häufig anzutreffenden schlechten Lösungsansatz für ein bestimmtes Problem.“ - Wikipedia
  21. 21. HTML - Anti Pattern Attribute zur Formatierung font, font-size text-align, valign bgcolor, color padding, margin width, height Frames / iFrames Tabellen zum Positionieren
  22. 22. Trennung Darstellung und Inhalt
  23. 23. Separation of Concerns (SoC) „Verschiedene Elemente der Aufgabe sollten möglichst in verschiedenen Elementen der Lösung repräsentiert werden.“ - Wikipedia
  24. 24. CSS CASCADING STYLE SHEETS Einführung in die Grundlagen von CSS
  25. 25. Syntax von CSS-Angaben Syntax selector {css-element:wertangabe;} Beispiele h1 {font:arial; color:green;} p {font-weight:bold;}
  26. 26. CSS Selektoren Elemente (p, h1, ul, div, body, table...) Stylesheet p {font:arial; color:green;} HTML <p>Dieser Text ist grün</p>
  27. 27. CSS Selektoren Klassen Stylesheet .fett {font-weight:bold;} HTML <p class=„fett“>Text ist fett </p>
  28. 28. CSS Selektoren IDs Stylesheet #box1 {top:50px;} HTML <div id=„box1“>Dieser Text wäre positioniert (s.u.)</div>
  29. 29. Margin und Padding
  30. 30. Zusammenfassung HTML CSS HTML geht auf Tim Berner-Lee (CERN) zurück (´92) Ist eine (nicht erweiterbare) Markup-Sprache Beschreibt die Struktur (nicht Semantik) von Dokumenten Sollte CSS zur Formatierung/Layouten nutzen Kann mit dem Tutorial von Stefan Münz (http:// de.selfhtml.org) erlernt werden
  31. 31. HTML UND CSS PATTERNS Einführung in grundlegende HTML und CSS Pattern
  32. 32. Box Models
  33. 33. Column Layout
  34. 34. CSS Grids
  35. 35. Wireframes - Demo
  36. 36. Übungen 1I • Erstellen Sie ein HTML / CSS Grundlayout für Ihre Anwendung • Setzen die Wireframes in HTML um
  37. 37. Software Technik HTWG Konstanz Anforderungsanalyse Teil III Prototyping mit JavaScript 22.10.2010 um 14Uhr Christian Baranowski

×