ANWENDUNGSSOFTWARE

ANWENDUNGSSOFTWARE
JavaScript I: Formulare und Datenübergabe
JAVASCRIPT, HTML UND CSS
  HTML-Datei
beschreibt Struktur und enthält Inhalt
einer Webseite
  CSS-Datei beschreibt, wie die einzelnen
Strukturelemente aussehen sollen
  JavaScript fügt Interaktivität zu einer Seite hinzu
  JavaScript kann in die HTML-Seite integriert oder
als extra Datei eingebunden werden
FORMULARE UND DATENÜBERGABE
  Formulare
erfassen Nutzereingaben
  Funktionen können auf Formularfelder zugreifen
(lesen und schreiben)
  Formulare lassen sich am besten mit Tabellen
visuell ausrichten
  CSS-Angaben für die Tabellenelemente in die CSSDatei
FORMULARE - HTML
<!--Beginn des Formulars-->
<form name="form1“>
<!--Beginn der Tabelle-->
<table id="tab1“>
<!--neue Tabellenzeile-->
<tr>
<!--Tabellenzelle1 enthält Text-->
<td>Name:</td>
<!--Tabellenzelle2 enthält ein Texteingabefeld
mit dem Namen "User", das 40 Zeichen breit
ist-->
<td> <input type="text" size="40"
name="User"></td>
<!--Ende der Tabellenzeile -->
</tr>
FORMULARE -HTML
<!--neue Tabellenzeile-->
<tr>
<!--Zelle 1 enthält einen Absendebutton-->
<td><input type="submit" value="Absenden"></
td>
<!--Zelle 2 enthält einen Button zum
Zurücksetzen, der mit "Abbrechen" beschriftet
ist-->
<td><input type="reset" value="Abbrechen"></
td>
</tr>
<!--Ende Tabelle-->
</table>
<!--Ende Formular-->
</form>
FORMULARE - CSS
/*Angaben für das gesamte Formular, setzt den
Innen-Abstand und zeichnet einen breiten Rand
um das Formular*/
form {
padding:10px;
border: 6px solid #005500;
}
/*Angaben für Formularfelder vom Typ input,
setzt Innenabstand, schmalen grauen Rand und
Hintergrundfarbe*/
input {
padding: 4px 6px;
border: 1px solid #555;
background-color: #aaaaaa;
}
TABELLEN - CSS
/*Angaben für Tabelle "tab1" und
Tabellenzellen, zeichnet blauen Rand
und setzt die Inhalte rechtsbündig*/
#tab1, td {
border: 1px solid #0000ff;
text-align: right;
}
GOOGLE WEB FONTS
  http://www.google.com/fonts/
  große
Auswahl an Fonts
  können vom Google-Server nachgeladen werden
  Achtung:
Es wird also beim Laden der Seite eine Verbindung
zum Google Server aufgebaut, nicht sichtbar für die
Seitenbesucher.
Webseite abhängig von Google-Servern!
Webseite sendet Verbindungsdaten an Google,
Surfprotokolle können erstellt werden.
  Auswahl auf der Webseite, automatische CodeGenerierung
GOOGLE WEB FONTS
  Beispiel-Link
für html-Datei:
<link href='http://
fonts.googleapis.com/css?
family=Merienda' rel='stylesheet'
type='text/css'>
  Verwendung
in CSS:
font-family: 'Marienda', cursive;
EINGEBETTETE FRAMES - IFRAME
<iframe src="..." width="..." height="..." name="Verweis">
o  src bestimmt, was im Frame angezeigt wird: HTML-Datei, beliebige andere
lokale oder entfernte Datenquelle (youtube-Video, Google Maps – Verweis,
Facebook-Button etc.)
o  name wird benötigt um Verweise auf den Frame zu definieren, mit der
Angabe von target können dort dann auch später über einen Verweise
Inhalte angezeigt werden
o  zwischen <iframe> und </iframe> kann auch alternativer Text
angegeben werden, wird angezeigt, falls der Browser eingebettete Frames
nicht interpretieren kann
INHALTE FÜR IFRAMES
o  Plugins für Facebook:
http://developers.facebook.com/docs/plugins/
o  Google Maps einbinden:
http://maps.google.de/
o  Youtube-Videos einbinden:
http://www.googlewatchblog.de/2010/07/youtube-videos-als-html5video-einbinden/
o  immer Datenschutz beachten, insbesondere beim Facebook-PlugIn,
da wird eine Verbindung zu Facebook beim Öffnen der Seite hergestellt
und Informationen übertragen, ohne dass der Nutzer die Möglichkeit
hat, darauf Einfluss zu nehmen