Software Technik
            HTWG Konstanz



                        Anforderungsanalyse
               Teil II Prototypi...
Prozess
Wasserfallmodell
Requirement analysis             Wasserfallmodell
              System design



                              Coding



 ...
Funktionale Anforderungen
erfassen mittels Prototyping
HTML
HYPERTEXT MARKUP LANGUAGE

 Einführung in die HTML
MARKUP LANGUAGE ML

„Eine Auszeichnungssprache dient zur Beschreibung
des Inhalts eines Dokumentenformats“
- Quelle Wikipe...
MARKUP
                 MARKUP LANGUAGE ML

Beispiel für …        HTML               LaTeX            Wikitext
           ...
Auszeichnungssprache


Descriptive Markup         Procedural Markup
Language (DML)              Language (PML)

-   SGML /...
HTML Historie
- 1967 William Tunnicliffe stellt generic coding – Konzept vor (Trennung
    Information von Darstellung.) B...
Dokumente bestehen aus



Struktur                                         Format/Darstellung
(Kapitel, Abschnitte,       ...
Grundgerüst einer XHTML-Datei

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC
   "-//W3C//DTD XHTML 1.0 Transitional//EN"
  ...
HTML                             XHTML
<!DOCTYPE html PUBLIC "-//W3C//   <!DOCTYPE html PUBLIC "-//W3C//
DTD HTML 4.01//EN...
DOCTYPE - Document Type Definition


DOCTYPE                         Beschreibung

               Schließt aus, dass die Da...
XHTML DOCTYPE Definition


XHTML 1.0 - Strict, Transitional, Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/...
HTML Grundelemente

      Überschriften <h1><h1>
       Textabsätze <p></p>
       Zeilenumbruch <br/>
      Zitate <block...
Listen
  Aufzählungsliste <ul>   ... </ul>

 Nummerierte Liste <ol>    ... </ol>

Definitionsliste <dl><dt><dd>...</dl>
Tabellen


      einfache Tabellen mit <th>   <td>

Tabellen mit Kopf und Fuß <thead><tbody>...
Links und Grafiken


        ...
Formulare


   ...
Anti Pattern
   „Anti-Pattern (deutsch: Antimuster) bezeichnet in der
Softwareentwicklung einen häufig anzutreffenden schle...
HTML - Anti Pattern
Attribute zur Formatierung
  font, font-size
  text-align, valign
  bgcolor, color
  padding, margin
 ...
Trennung Darstellung und Inhalt
Separation of Concerns (SoC)
  „Verschiedene Elemente der Aufgabe sollten möglichst in
verschiedenen Elementen der Lösung ...
CSS
       CASCADING STYLE SHEETS

Einführung in die Grundlagen von CSS
Syntax von CSS-Angaben



Syntax
 selector {css-element:wertangabe;}


Beispiele
 h1 {font:arial; color:green;}
 p {font-w...
CSS Selektoren


Elemente (p, h1, ul, div, body, table...)
  Stylesheet
  p {font:arial; color:green;}
  HTML
  <p>Dieser ...
CSS Selektoren


Klassen
 Stylesheet
 .fett {font-weight:bold;}
 HTML
 <p class=„fett“>Text ist fett </p>
CSS Selektoren


IDs
 Stylesheet
 #box1 {top:50px;}
 HTML
 <div id=„box1“>Dieser Text wäre
 positioniert (s.u.)</div>
Margin und Padding
Zusammenfassung HTML CSS


HTML geht auf Tim Berner-Lee (CERN) zurück (´92)

Ist eine (nicht erweiterbare) Markup-Sprache
...
HTML UND CSS
               PATTERNS
Einführung in grundlegende HTML und CSS
                  Pattern
Box Models
Column Layout
CSS Grids
Wireframes - Demo
Übungen 1I

• Erstellen
        Sie ein HTML / CSS Grundlayout für Ihre
 Anwendung

• Setzen   die Wireframes in HTML um
Software Technik
            HTWG Konstanz



                       Anforderungsanalyse
                   Teil III Proto...
Nächste SlideShare
Wird geladen in …5
×

Anforderungsanalsyse - Prototyping mit JavaScript

1.438 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.438
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
457
Aktionen
Geteilt
0
Downloads
11
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

×