Interaktive Medien FS14 Sem 4 | Karteikarten online lernen

Das Unix Betriebssystem iOS (früher iPhone OS) von Apple basiert auf Mac-OS-X und gibt es ausschliesslich für iPhone, iPad, iPad Mini und den iPod Touch (ab 2007)

11
Kartenlink

Mobile Webseiten
Was ist Symbian OS (Symbian Belle)?

Nokia, Sony Ericsson, Motorola, LG und verwenden dieses weit verbreitete Betriebssystem. Per April 2011 wurde die Symbian Foundation aufgelöst und die Tage dieses Betriebssystems sind gezählt (ab 2008)

12
Kartenlink

Mobile Webseiten
Was ist Tizen 2.1 (MeeGo, Moblin, Maemo) (ab 2005)?

Nokia verwendete Maemo für seine Highend Mobilegeräte. Ursprünglich sollte dieses Betriebssystem das Symbian OS ablösen.

2010: Zusammenarbeit Intel (Moblin) und Nokia => MeeGo
2011: Windows 8 als Standard bei Nokia
2011: MeeGo und Linux Mobile (LiMo) =>Tizen

Im September 2013 gab Samsung bekannt, das Betriebssystem zur Vernetzung von Smartphones, Fernsehern und Haushaltsgeräten weiterzuentwickeln

13
Kartenlink

Mobile Webseiten
Was ist WebOS 3.05?

Die Firma Palm verwendet diese Linux Plattform für ihre PDAs. Wurde von HP ausgekauft (ab 2009)
2011: Einstellung der Entwicklung
2012: WebOS als Open-Source-Software
2013: An LG verkauft für den Einsatz auf Smart-TVs

14
Kartenlink

Mobile Webseiten
Was ist Bada 2.0?

Von Samsung entwickeltes Betriebssystem Bada, für welches diverse Apps zur Verfügung stehen (ab 2009)

15
Kartenlink

Mobile Webseiten
Was ist Firefox OS 1.2?

Betriebssystem, vollständig nach offenen Webstandards gebaut (ab 2013)

November 2013: Nur wenige Wochen nach der Einführung von Firefox OS und dem Firefox Marketplace sind zahlreiche neue internationale sowie regionale Anwendungen verfügbar.

16
Kartenlink

Mobile Webseiten
Was sind die verbreitetsten Mobilen Betriebssysteme weltweit?

17
Kartenlink

Mobile Webseiten
Was sind die verbreitetsten Mobilen Betriebssysteme in Nordamerika?

18
Kartenlink

Mobile Webseiten
Was sind die verbreitetsten Mobilen Betriebssysteme in Asien?

19
Kartenlink

Mobile Webseiten
Was sind die verbreitetsten Mobilen Betriebssysteme in Europa?

20
Kartenlink

Mobile Webseiten
Was sind die verbreitetsten Mobilen Betriebssysteme in der Schweiz?

21
Kartenlink

Mobile Webseiten
Was sind die verbreitetsten Mobilen Browser weltweit?

22
Kartenlink

Mobile Webseiten
Was sind die verbreitetsten Mobilen Browser in der Schweiz?

23
Kartenlink

Mobile Webseiten
Was sind die verbreitetsten Mobilen Browser in Europa?

24
Kartenlink

Mobile Webseiten
Was sind die verbreitetsten Mobilen Browser in Nordamerika?

25
Kartenlink

Mobile Webseiten
Was sind die verbreitetsten Mobilen Browser in der Asien?

26
Kartenlink

Mobile Webseiten
Was versteht man unter Viewport?

Der Viewport ist der sichtbare Teil einer Website
Der User vergrössert/verkleinert den Viewport durch Änderung des Browserfensters
Unterschiedliche Bedienungen auf Desktop (Maus) und Smartphone (Gesten): der Viewport ist für diese Medien verschieden

27
Kartenlink

Mobile Webseiten
Wie verhält sich der Viewport bei Smartphones?

Viewport fix gegeben (z.B. Apple: 980px)
Viewport kann grösser / kleiner sein als sichtbarer Teil des Screens
User kann Grösse des Viewports nicht ändern, nur den Zoomfaktor

28
Kartenlink

Mobile Webseiten
Was sind Standard Viewports?

Die mobilen Browser versuchen, die Standardwebseiten optimiert in der Grösse darzustellen. Es wird von unterschiedlichen Standardgrössen ausgegangen:

Safari iPhone: 980px
Opera Mobile: 850px
Android WebKit: 800px
Firefox Mobile: 800px
Windows Phone: 1024px

29
Kartenlink

Mobile Webseiten
Wie wird auf einem Android-Gerät mit einer Bildschirmbreite von 720px eine Website mit 400px Breite dargestellt?

Android geht von einer Standardgrösse von 800px aus. Demzufolge füllt die Website nur gerade die Hälfte, nämlich 360 Pixel

=> 800 Pixel verkleinert auf 720 Pixel
=> 400 Pixel verkleinert auf 360 Pixel

30
Kartenlink

Mobile Webseiten
Wie wird auf einem iPhone mit einer Bildschirmbreite von 320px eine Website von 490px Breite dargestellt?

Das iPhone geht von einer Standardgrösse von 980px aus. Demzufolge füllt die Website nur gerade die Hälfte, nämlich 160 Pixel

=> 980 Pixel verkleinert auf 320 Pixel
=> 490 Pixel verkleinert auf 160 Pixel

31
Kartenlink

Mobile Webseiten
Wie wird auf einem Android-Retina-Gerät mit einer Bildschirmbreite von 720px eine Website mit 360px Breite dargestellt?

Android geht von einer Standardgrösse von 1080dips (Device Independent Pixels) aus. Demzufolge füllt die Website nur gerade einen Drittel aus

=> 1080 Pixel verkleinert auf 720 Pixel
=> 360 Pixel verkleinert auf 240 Pixel

32
Kartenlink

Mobile Webseiten
Wichtige Werte in der Programmierung für den Viewport?

Beispiel und empfohlener Eintrag
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,user-scalable=yes" />

33
Kartenlink

Mobile Webseiten
Was ist der Unterschied zwischen einer Rendering-Engine und einem Browser?

Antwort

34
Kartenlink

Mobile Webseiten
Welche Strategien gibt es um Inhalte auf Mobiles zu bringen?

1. Strategie: Entwicklung auf Basis Betriebssystem: Native Apps
2. Strategie: Entwicklung mit HTML & CSS: WebApp
3. Strategie: Hybride App

35
Kartenlink

Mobile Webseiten
Was heisst Entwicklung auf Basis Betriebssystem: Native Apps?

Die Anwendung wird für eine ganz spezifische Plattform (zum Beispiel Windows Mobile oder Android) oder ein ganz spezifisches Gerät (zum Beispiel Apple iPhone) entwickelt.

Für alle Betriebssysteme gibt es spezifische Software Development Kits (SDK) um Applikationen zu entwickeln, zum Beispiel:

Android Mobile Applikationen basieren auf Java (Details)
iPhones basieren auf objektorientiertem C (Details)
Windows mobile Geräte basieren auf der .Net Technologie (Details)

36
Kartenlink

Mobile Webseiten
Was sind die Vorteile von Native Apps?

Applikationen können für eine spezifische Plattform entwickelt werden und nutzen alle deren technischen Möglichkeiten aus.

37
Kartenlink

Mobile Webseiten
Was sind die Nachteile von Native Apps?

Eine für eine Plattform entwickelte Anwendung (zum Beispiel mit objektorientiertem C für das iPhone) muss für eine andere Plattform (zum Beispiel mit Java für Android) vollständig umgeschrieben werden.
Bei Änderungen in der App muss ganze Prozedur des App-Updates durchlaufen werden, was lange dauert.
Viele Leute suchen auf Google mobile und finden eine App auf dem App Store nicht
Der Lernaufwand ist gewaltig. Nebst der Programmiersprache (zum Beispiel Java oder objektorientiertes C) müssen auch noch die zusätzlichen Funktionen, Möglichkeiten und Klassen des SDK erarbeitet werden.

38
Kartenlink

Mobile Webseiten
Kennzeichen nativer Apps: App oder Web-App?

Native Anwendungen werden nur für eine Plattform erstellt. Eine iPhone App läuft nicht auf Android und umgekehrt.
Die native App wird mit speziellen Programmiersprachen erstellt.
Eine native App wird installiert.
Für eine App gibt es spezielle Vertriebswege, z.B. den Apple Store oder Google Play. Es gibt unzählige Apps.
Eine native App kann auf bestimmte Hardwareelemente direkt zugreifen (z.B. Kamera).
Apps haben das Look & Feel des Betriebssystems.

39
Kartenlink

Mobile Webseiten
Was heisst Entwicklung mit HTML & CSS: WebApp?

Die Anwendung wird mit HTML, CSS, Javascript und AJAX für alle Plattformen entwickelt.

Bei Bedarf wird noch eine serverseitige Programmiersprache (zum Beispiel PHP oder .Net) eingesetzt.

40
Kartenlink

Mobile Webseiten
Was sind die Vorteile einer WebApp?

Eine einzige Entwicklungsumgebung reicht aus, um für alle Plattformen zu programmieren.

41
Kartenlink

Mobile Webseiten
Was sind die Nachteile einer WebApp?

Es muss eine Strategie entwickelt werden, um Websites für bestimmte Geräte oder Gruppen zu optimieren. Es ist meist (noch) nicht möglich, auf gerätespezifische Funktionen (zum Beispiel eingebaute Kamera) zuzugreifen.
Dieser Nachteil wird in Kürze mit dem WebRTC behoben

42
Kartenlink

Mobile Webseiten
Was heisst Entwicklung Strategie: Hybride App?

Die Anwendung wird mit einer »allgemeinen« Programmiersprache geschrieben. Beispiel: Flash Actionscript, Javascript, Java
Eine Softwaretechnologie setzt Actionscript, Javascript, Java in nativen Code um und erzeugt eine App
Beispiele: PhoneGap, Flash, Appcelerator

43
Kartenlink

Mobile Webseiten
Was sind die Vorteile von Hybrid-Apps?

Eine einzige Entwicklungsumgebung reicht aus, um für alle Plattformen zu programmieren.

44
Kartenlink

Mobile Webseiten
Was sind die Nachteile von Hybrid-Apps?

Es ist oft nicht möglich, auf gerätespezifische Funktionen (zum Beispiel eingebaute Kamera) zuzugreifen.
Performance oft niedrig
Der Lernaufwand ist hoch, es muss Actionscript 3 oder Javascript beherrscht werden. Allerdings lassen sich diese Programmiersprachen auch für andere Anwendungen (auf Basis Desktop oder Internet) einsetzen.

45
Kartenlink

Mobile Webseiten
Welche Strategien gibt es, um einen Inhalt auf Mobiles zu bringen?

1. Strategie: Keine Änderungen vornehmen, nur Optimierungen
2. Strategie: Separate mobile Webseiten
3. Strategie: Progressive Enhancement und Feature Detection

46
Kartenlink

Mobile Webseiten
Es gibt mehrere Strategien, um einen Inhalt auf Mobiles zu bringen. Was heisst es, keine Änderungen vorzunehmen, nur Optimierungen?

Auf den Mobiles und dem Desktop werden dieselben Inhalte und Formatierungen zur Verfügung gestellt. Diese Strategie ist erfolgreich, wenn folgende Annahmen getroffen werden:

Bandbreiten sind kein Thema in Bezug auf Kosten und Geschwindigkeiten
Intelligente Browser reagieren auf das Darstellungsgerät
Die Wünsche der mobilen Benützer sind nicht so wichtig

Mögliche Optimierungen

Nicht unterstützte HTML-Befehle (wie Frames etc.) entfernen
Grösse der Links anpassen (mindestens 44 Pixel)
Überprüfung der Bildgrössen (Kilobytes)

Kritik
Nicht zu empfehlen. Zu viele Anwender verwenden Mobiles

47
Kartenlink

Mobile Webseiten
Es gibt mehrere Strategien, um einen Inhalt auf Mobiles zu bringen. Was heisst es, separate mobile Websites zu erstellen?

Für die Smartphones gibt es völlig andere Webseiten (HTML, CSS, Bilder etc.)

Kennzeichen

Inhalt anders angeordnet: Navigation unten, Inhalt oben
Optimierte Bilder: kleine optimierte Bilder
Struktur: Unwichtige Inhalte nur via Link erreichbar
Besondere Inhalte für das Smartphone: ortsbezogene Werbung
Es gibt zwei verschiedene Varianten der Website (Inhalt und Gestaltung)

Kritik

Nicht zu empfehlen. Aufwand, um Inhalt und Gestaltung doppelt zu warten ist zu hoch.
Die Detection mit dem User Agent ist fehleranfällig

48
Kartenlink

Mobile Webseiten
Es gibt mehrere Strategien, um einen Inhalt auf Mobiles zu bringen. Was heisst Progressive Enhancement und Feature Detection?

Auf den Mobiles und dem Desktop werden ähnliche Inhalte und Formatierungen zur Verfügung gestellt. Dazu teilen wir die Browser in verschiedene Kategorien auf. Beispiel:

Kategorie 1: Browser hat keine CSS-Unterstützung
Kategorie 2: Browser hat limitierte CSS-Unterstützung
Kategorie 3: Browser hat CSS Mobile Profile Unterstützung
Kategorie 4: Browser hat CSS2-Unterstützung
Kategorie 5: Browser hat CSS3-Unterstützung

Vorgehen

Für das Herausfinden der Bildschirmgrössen können Media Queries und Media Features verwendet (MediaQuery Spezifikation) werden.
Für das Herausfinden der unterstützten Funktionen kann Modernizer verwendet werden.
Die Weiterentwicklung dieses Gedankens führt zum Responsive Webdesign (RWD)

49
Kartenlink

Mobile Webseiten
Es gibt mehrere Strategien, um einen Inhalt auf Mobiles zu bringen. Was heisst Mobile Web Apps?

Browser App, welche mit HTML, CSS und Javascript funktioniert.
Unterschied zu «normaler» Website ist fliessend

50
Kartenlink

Mobile Webseiten
Merkmale für Responsive Web Design?

Breiten werden in relativen Massen angegeben
Positionen werden in Abhängigkeit der Breiten definiert.

51
Kartenlink

Mobile Webseiten
Was ist der Unterschied zwischen adaptivem und responsivem Design?

responsive = reaktionsfähig; adaptive = anpassungsfähig

Adaptives Design
an bestimmten Umbruchpunkten fixe Layouts, angepasst an bestimmte Bildschirmgrösse.

Responsives Design
reagieren dank flexiblem Layout stufenlos auf Grössenänderung des Browserfensters

Praxis
Adaptives und responsives Layout bilden eine Einheit

52
Kartenlink

Mobile Webseiten
Wie wird beim Responsive Design vorgegangen?

Lösungsschritt 1: % für Container benutzen
Regel

target size ÷ context size = result size
Die Breiten von div-Tags werden nicht in px, sondern in % angegeben

Lösungsschritt 2: rem für Schriftgrad
Regel

target size ÷ context size = result size
Schriftgrössen und Höhen werden in rem angegeben

Lösungsschritt 3: Breakpoints setzen

Breakpoints werden für Änderungen des Layouts eingesetzt.
Major Breakpoints: Für Layoutänderungen
Minor Breakpoints: Optimierungen für gängige Geräte (z.B. iPad)
Die Major Breakpoints werden nicht von der Bildschirmgrösse bestimmt, sondern vom Layout
Grund: Es gibt zu viele Smartphones mit verschiedenen Bildschirmgrössen
Die Breakpoints werden mit den Media Queries gesetzt

53
Kartenlink

Mobile Webseiten
Erkläre was ein Breakpoint im Responsive Web Design macht.

54
Kartenlink

Mobile Webseiten
Nenne Vorteile und Nachteile zur Desktop-First-Programmierung.

Vorteile

Bestehendes Layout kann verwendet werden
Vom Bekannten zum Unbekannten

Nachteile

Nicht optimale Struktur für Mobiles: Navigation unterhalb des Inhalts
Inhalte mit display: none werden zwar ausgeblendet, aber trotzdem geladen

55
Kartenlink

Mobile Webseiten
Nenne Vorteile und Nachteile zur Mobile-First-Programmierung.

Vorteile

Mobiles: zunehmender Markt mit Wachstumspotenzial
Konzentration auf das Wesentlichste: Funktionalität, Aussage, Inhalt
Höhere Performance
Optimaler Ansatz für Responsive Design

Nachteile

Nur für neue Websites / Redesign. Kann bestehende Webseite nicht mit diesem Ansatz gestalten.
Viel Neuland

56
Kartenlink

Mobile Webseiten
Welche Varianten zu Media Queries gibt es?

Variante 1:
@media (max-width: 650px) {.....}

Variante 2:
<link rel= "stylesheet" media= "screen and (orientation: portrait)" href= "portrait-screen.css" />

Die erste Variante ist zu bevorzugen, um HTTP-Requests zu sparen. Browser laden nämlich immer alle Stylesheets, auch wenn die Bedingungen nicht auf sie zutreffen.

57
Kartenlink

Mobile Webseiten
Wie baut man ein CSS auf? (grundsätzlich)

a) CSS resetten
b) Globale Einstellungen festlegen (für alle Geräte)
c) Regeln für spezifische Inhalte festlegen
c) Media Queries für 800, 650 und 400 Px
d) Druckansicht mit @media print

58
Kartenlink

Mobile Webseiten
Wie entwickle ich mit HTML, CSS und Javascript für Smartphones?

Generell gilt:

Bedienung mit Finger-Berührung: Grössere Links
Aussehen testen in horizontaler und vertikaler Lage
Aus horizontales Scrollen verzichten
Einfaches Design, wenig Bilder / Grafiken
UI Framework benützen
Beschränkte Bandbreite berücksichtigen

59
Kartenlink

Mobile Webseiten
Was ist WURFL?

Datenbank WURFL (Wireless Universal Resource File), welche diesen userAgent auswertet
WURFL ist ein grosses XML-Konfigruationsfile, welches alle Informationen über mobiles enthält.
Enthält Informationen z.B. über Kapazitäten von Mobiles
Die Lösung wird als Cloud-Service angeboten

60
Kartenlink

Mobile Webseiten
Wofür ist Modernizr?

Modernizr ist eine JavaScript-Bibliothek, mit deren Hilfe man HTML5/CSS3 einsetzen kann ohne in Kauf nehmen zu müssen, dass die Website in älteren Browsern nicht richtig funktioniert.
Modernizr überprüft jeden anfragenden Browser gezielt danach, was er leisten kann und was nicht. Das Ergebnis dieser Prüfung wird in einem eigens erzeugten JavaScript-Objekt gespeichert.
Zusätzlich ergänzt Modernizr das HTML-Element um Klassen, die erklären, welche Features unterstützt werden und welche nicht.
Idee: Nicht auf User Agent zugreifen, sondern überprüfen, ob Funktion zur Verfügung steht.
Beispiel: Nicht herausfinden, ob Smartphone XY eine bestimmte Funktion unterstützt
Mit Modernizr herausfinden, ob Funktion unterstützt wird.

61
Kartenlink

Mobile Webseiten
Welche Bilddateien verwendet man im Web?

62
Kartenlink

Mobile Webseiten
Was machen die Optionen cover und contain bei Bildern?

Die Option cover vergrössert das Hintergrundbild proportional, bis die ganze Fläche bedeckt ist. Die Grafik ist nur teilweise sichtbar.
Die Option contain vergrössert das Hintergrundbild proportional, bis die ganze Fläche bedeckt ist. Die Grafik ist ganz sichtbar.
Das Hintergrundbild kann mit dem Befehl background-size: 100% auto; auch gezoomt werden (im Beispiel horizontal 100%)

63
Kartenlink

Mobile Webseiten
Was ist die Problematik mit Bildern im Responsive Web Design?

Was geschieht mit den Bildern auf kleinen und grossen Bildschirmen?
Keine Lösung! Es gibt eine W3C Arbeitsgruppe
Vorschläge für intelligente Bilder
Es gibt nicht nur kleine und grosse Bildschirme, sondern auch noch Retina- oder HiDPI-Bildschirme

64
Kartenlink

Mobile Webseiten
Was ist das Problem von Retina- oder HiDPI-Displays?

Hochaufgelöste Bilder werden auf HiDPI-Displays (Retina) in hoher Präzision wiedergegeben. Der Bedarf an Bandbreite ist vier Mal höher.
Ein Bild in Standardauflösung sieht auf einem Retina-Bildschirm unscharf aus. Fehlende Pixel müssen interpoliert werden.
Die Gerätepixel entsprechen nicht den CSS-Pixeln. Wenn man CSS- und Gerätepixel gleichsetzt, wäre die Darstellung zu klein.

65
Kartenlink

Mobile Webseiten
Was ist der Unterschied zwischen CSS-Pixeln, Bild-Pixeln und Device- bzw. Display-Pixeln?

CSS-Pixel: Pixelgrösse, in der das Bild dargestellt wird
Bild-Pixel: Anzahl der Pixel, die ein Bild tatsächlich hat
Device- bzw. Display-Pixel: Tatsächliche Pixel des Device-Bildschirms, auf denen das Bild dargestellt wird

Würde man bei Retina-Displays die CSS- und Geräte-Pixel gleichsetzen, wäre die Darstellung viel zu klein. Darum werden für jeden CSS-Pixel (1x1) vier physikalische Device-Pixel (2x2) benutzt.

66
Kartenlink

Mobile Webseiten
Welche Lösungsstrategien gibt es zum Skalieren von Bildern?

1. Lösung mit HTML und CSS Sizing
2. Lösung mit Media Queries
3. Lösung mit Javascript
4. Lösung: Web basierter Dienst: Sencha io Src
5. Lösung Server Side Lösung: Adaptive Images

67
Kartenlink

Mobile Webseiten
Erläutere Lösungsstrategie mit HTML und CSS Sizing zum Skalieren von Bildern im RWD.

Doppelt so grosse Grafik erzeugen und diese mit CSS verkleinern

<img src="bild300px.jpg" width="150" height="150">
oder
.bild {
background-image: url(bild300px.jpg); background-size: 150px 150px;
}

Vorteile

Einfache Implementierung
Für Bilder und Hintergrundbilder anwendbar

Nachteile

Für alle Geräte dieselbe Datenmenge

68
Kartenlink

Mobile Webseiten
Erläutere Lösungsstrategie mit Media Queries zum Skalieren von Bildern im RWD.

Die Auflösungsdichte lässt sich herausfinden, resp. bestimmen:

min-device-pixel-ratio
-o-min-device-pixel-ratio
-moz-min-device-pixel-ratio
-webkit-min-device-pixel-ratio

device-pixel-ratio
-o-device-pixel-ratio
-moz-device-pixel-ratio
-webkit-device-pixel-ratio

Man könnte Hintergrundbilder (innerhalb CSS) durch andere Hintergrundbilder ersetzen.

@media screen and (-o-min-device-pixel-ratio : 2/1),
screen and (-webkit-min-device-pixel-ratio: 2),
screen and (-moz-min-device-pixel-ratio: 2),
screen and (-minmoz-device-pixel-ratio: 2),
screen and (min-resolution: 2dppx) {
…
}--

69
Kartenlink

Mobile Webseiten
Erläutere Lösungsstrategie mit Javascript zum Skalieren von Bildern im RWD.

window.devicePixelRatio // 1, 1.5 oder 2
Die Lösung retina.js ersetzt automatisch Bilder bei hohen Auflösungsdichten, der Web-Designer muss zwei Bilder vorbereiten:
«When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place»

70
Kartenlink

Mobile Webseiten
Erläutere Lösungsstrategie Web basierter Dienst: Sencha io Src zum Skalieren von Bildern im RWD.

Sencha ist externer Dienst, welcher zwischen Bild und Browser liegt und Bilder dynamisch skaliert
Bild ohne src.sencha.io (relativer Pfad):

Bild mit src.sencha.io (absoluter Pfad):

71
Kartenlink

Mobile Webseiten
Erläutere Lösungsstrategie Server Side Lösung: Adaptive Images zum Skalieren von Bildern im RWD.

Diese Lösung arbeitet mit PHP, welches die Skalierung der Bilder übernimmt. Es wird Bildschirmbreite, nicht Browserfensterbreite verwendet

Bei dieser Lösung wird mit verschiedenen Bildern gearbeitet

72
Kartenlink

Mobile Webseiten
Die neuen CSS-Schrifteinheiten in Bezug auf den Viewport?

vw bezieht sich auf die Breite des Viewports
vh bezieht sich auf die Höhe des Viewports
vmin bezieht sich den kleineren Wert von Höhe oder Breite des Viewports
vmax bezieht sich den grösseren Wert von Höhe oder Breite des Viewports
Die Einheit nimmt 1% des Wertes. Beispiel: 1 vw ist 1% der Viewportbreite

Beispiel

h1 {font-size:16vw;}

Wenn der Viewport zum Beispiel 832 Pixel gross ist ergibt das eine Pixelgrösse von: 832/100*16 = 133 Pixel

73
Kartenlink

Mobile Webseiten
Zähle Performance Tips zur Optimierung von Websites auf.

Formatierungen (wie abgerundete Ecken, Farbverläufe, Linien etc.) nicht über Grafiken, sondern via CSS.
Die UTF-8 Zeichensätze beinhalten auch Symbole. Diese sollten an Stelle von Grafiken verwendet werden. Datei UTF-8_Zeichensatz.html
Icon Fonts benutzen
Bei Social Media Diensten richtige Farben verwenden
CSS-Sprites
Binäre Bilder

74
Kartenlink

Mobile Webseiten
Was sind CSS-Sprites und wie funktionnieren sie?

CSS-Sprites bezeichnet eine einzelne Grafikdatei, die viele Symbole und Icons enthält. Diese zusammengefassten Grafiken fungieren als Sprites und dienen dazu, die Ladezeit von Webseiten zu minimieren. Die einzelnen Elemente dieser Gesamtgrafik werden mit der CSS-Eigenschaft background-image und background-position ein- beziehungsweise ausgeblendet.

Mehrere Hintergrundbilder zu einem einzigen Bild zusammenfassen (CSS-Sprite)
Sprites: 1 Bild, wird mit CSS verschoben => Server-Zugriff verringern. Siehe Beispiel wpii_css.
Verschiebung von Hand oder Online-Dienst

75
Kartenlink

Mobile Webseiten
Was sind Vorteile von CSS-Sprites?

Verbesserung der Ladezeit
Vermeiden von Verzögerung bei Bildwechseln

76
Kartenlink

Mobile Webseiten
Was und wofür ist JavaScript?

Programmiersprache
in den Browsern integriert, läuft im Browser ab
=> Javascript ist eine Programmiersprache für die Erstellung interaktiver und/oder dynamischer Webseiten.

77
Kartenlink

Mobile Webseiten
Nenne einige JavaScript-Anwendungsbeispiele.

Rollover (Bild ändert sich, wenn ich mit der Maus darüber fahre)
Dynamische Inhalte darstellen (einfache Grafiken aus Daten erstellen)
Inhalt von Formularen überprüfen
Einfache Animationen erstellen
Tabellen sortieren
Spiele programmieren
Videos steuern
AJAX-Funktionen

78
Kartenlink

Mobile Webseiten
Was ist nicht möglich mit JavaScript?

Zugriff auf Datenbanken
Zugriff auf die Festplatte
Zugriff auf irgendwelche Hardwarekomponenten
Informationen mit anderen Anwendern austauschen

79
Kartenlink

Mobile Webseiten
Was ist die Idee von jQuery?

jQuery ist ein Javascript-Framework, welches die Javascript-Befehle massiv vereinfacht.
Cheatsheet
Erfunden 2006 von John Resig
»jQuery ist ein freies, umfangreiches JavaScript-Framework, das komfortable Funktionen zur DOM-Manipulation und -Navigation zur Verfügung stellt.«
jQuery Mobile ist ein auf jQuery aufgebautes Framework für Tablet PCs und Smartphones

80
Kartenlink

Mobile Webseiten
Was sind die Aufgaben von jQuery?

Zugriff auf Teile der Webpage
Modifizierung des Aussehens
Verändern des Inhalts
Interaktion mit dem Benutzer
Animation
AJAX (Nachladen von Informationen)
Allgemeine JavaScript-Aufgaben vereinfachen (Arrays, ...)

81
Kartenlink

Mobile Webseiten
Was ist das DOM?

Das Document Object Model (DOM) ist eine Spezifikation einer Schnittstelle für den Zugriff auf HTML- oder XML-Dokumente
Die Spezifikation wird vom W3C (World Wide Web Consortium) definiert
Mit dem DOM wird ein Dokument, dessen Elemente und die Beziehung dieser untereinander festgelegt
Durch DOM wird ein Dokument in einer Baumstruktur verwaltet, bei der alle Inhalte Knoten (Dokumentknoten, Elementknoten, Attributknoten, Textknoten) sind.

82
Kartenlink

Mobile Webseiten
Wie bindet man jQuery ein?

Im Kopf der HTML-Datei wird folgender Code eingegeben
Die eigentlichen jQuery-Befehle werden mit Vorteil in einer separaten Javascript-Datei abgelegt

83
Kartenlink

Mobile Webseiten
Nenne einige jQuery Mouse Events.

click()
hover()
mouseover()
mouseout()
toggle()

84
Kartenlink

Mobile Webseiten
Welche Gesten unterstützt jQuery Mobile?

jQueryMobile unterstützt verschiedene Gesten:

swipe,
swipeleft,
swiperight,
orientation,
tap,
taphold

85
Kartenlink

Mobile Webseiten
Vorschläge zur Erstellung von Web Apps und Hybridapps?

Web App:
jQuery Mobile

HybridApp:
PhoneGap oder Appcelerator

86
Kartenlink

Mobile Webseiten
Was sind Voraussetzungen für die Programmierung für Android Mobiles?

Mac, PC oder Linux
Java JDK 5, 6 oder höher
Eclipse IDE
Android Software Development Kit (SDK)
Kenntnisse der Java Programmiersprache

87
Kartenlink

Mobile Webseiten
Wie ist der Aufbau einer Android Applikation?

Android Anwendungen sind in Java programmiert.
Der kompilierte Java Code und die Daten (Bilder etc.) werden zum Android Package gebündelt.
Dieses Package wird bei einem Android Mobile installiert.
Das User Interface einer Android Anwendung besteht aus Views
Dieses Layout und die Hierarchie der Views wird mit einem XML Layout erstellt

88
Kartenlink

Mobile Webseiten
Welche Schriften werden auf Android Mobiles dargestellt?

Nur Droid! (Droid Sans, Droid Sans Mono, Droid Serif).

Arial oder Helvetica werden in Droid dargestellt.

89
Kartenlink

Mobile Webseiten
Voraussetzungen für die Programmierung für iPhone Mobiles?

Intel-based Mac mit Mac OS X Leopard or later
iPhone Software Development Kit (SDK)
Know how der Programmiersprache Objective-C

90
Kartenlink

Mobile Webseiten
Wie ist der Aufbau einer iPhone Applikation?

iPhone Applikationen bestehen aus einer oder mehreren Views
Diese beinhalten GUI Komponenten wie Text Felder, Schaltflächen, Labels, etc.
Der Objective-C Code ist verantwortlich, dass man mit den Views etwas tun kann. Er besteht aus einem View Controller, welcher reagiert auf Aktionen (Schaltfläche drücken, iPhone drehen etc.)
Strikte Trennung zwischen GUI (Views) und Code
Die Programmierung erfolgt in der IDE (integrated development environment) mit dem Namen Xcode
In der Applikation gibt es noch Daten (Metadata, Bilder, Hilfedateien etc.).

91
Kartenlink

Mobile Webseiten
Welche Schriften werden auf dem iPhone angezeigt?

American Typewriter,
American Typewriter Condensed,
Arial,
Arial Rounded MT Bold,
Courier New,
Georgia,
Helvetica,
Marker Felt,
Times New Roman,
Trebuchet MS,
Verdana,
Zapfino

92
Kartenlink

Mobile Webseiten
Was sind Widgets?

Widgets sind HTML/JavaScript/CSS Applikationen welche im Browser (oder ausserhalb davon) ablaufen
Theoretisch sind Widgets ein W3C Standard
Widgets sind plattformabhängig, es fehlt ein Standard API
Die Web Runtime (WRT) erlaubt die Installation und Ausführung von Widgets.

93
Kartenlink

Web-Applikationen
Welche Regeln gelten für Dateinamen im Internet?

Da wir im Internet in gemischten Hard- und Softwareumgebungen (z.B. Windows, Unix, Macintosh, Linux etc.) arbeiten, dürfen nicht beliebige Dateinamen vergeben werden. Es gelten die folgenden Regeln:

Erlaubte Zeichen

Buchstaben a bis z oder A bis Z
Zahlen von 0 bis 9
Unterstrich _

Verbotene Zeichen

Europäische Sonderzeichen (z.B. ä, ö, ü, é, à, è, ç etc.)
Leerzeichen
Sonderzeichen (z.B. Punkt, ?, $ etc.)

94
Kartenlink

Web-Applikationen
Nenne Spezifikationen von HTML, Flash, Javascript und CSS.

HTML, CSS, Javascript und Flash laufen im Client (Browser) ab.
HTML kann nur Dateien anfordern.
HTML und Flash können weder Dateien schreiben noch Verzeichnisse auslesen oder auf Datenbanken zugreifen Ausnahme: Cookies
Um sich die Arbeit mit Javascript zu vereinfachen wird oft mit jQuery gearbeitet. Mit wenigen Befehlen können lange und komplizierte Javascripts abgearbeitet werden.
In Web 2.0 Anwendungen wird mit AJAX gearbeitet. Diese Technologie erlaubt, nur einen Teil der HTML-Seite neu zu laden.
Mit dem Framework jQuery lässt sich Javascript vereinfachen.

95
Kartenlink

Web-Applikationen
Was ist AJAX (Web 2.0)?

Asynchronous JavaScript and XML
Erfunden von Microsoft für Outlook Web
Grundprinzip: Nur einen Teil einer HTML-Seite laden
Synchrone Datenübertragung: Übertragung zwischen Sender und Empfänger wird mit einem Taktsignal zeitlich synchronisiert.
Asynchrone Datenübertragung: die Zeichen werden asynchron, d.h. zu beliebigen Zeiten, übertragen.
JavaScript-Code (und Benutzer) warten nicht darauf, dass der Server antwortet.

96
Kartenlink

Web-Applikationen
Was sind Sockets?

Kommunikation zwischen Server und Client: kein bestimmtes Protokoll, sondern Byte-Ströme

97
Kartenlink

Web-Applikationen
Was bedeutet Peer-to-Peer?

Das Netzwerk besteht aus Knoten, welche direkt – ohne über den Server – kommunizieren. Es gibt also keine zentrale Steuerung. Zum Beispiel Napster, Gnutella, Skype

98
Kartenlink

Web-Applikationen
Wie funktionieren Dynamische Sites mit PHP & MySQL?

1. Sie tippen eine URL in den Browser
2. Browser schaut in Domain Name Server nach IP-Adresse
3. Browser verlangt Startdatei index.html von Server: Request
4. Request geht via diverse Internet-Router zum Server
5. Der Webserver sucht die gewünschte Datei
6. Der Webserver realisiert die Datei-Endung *.php (oder *.cf, *.esp etc.) und schickt die Datei zum PHP-Interpreter
7. Der PHP Interpreter arbeitet den PHP-Code ab
8. Der PHP Interpreter schickt SQL-Befehle [Structured Query Language] an die Datenbank MySQL
9. Die Datenbank arbeitet die Befehle ab und schickt die Resultate an PHP zurück
10.PHP schickt die Resultate in Form von HTML-Code an den Webserver zurück
11.Der Browser stellt die Datei dar.

99
Kartenlink

Web-Applikationen
Nenne die Spezifikationen von PHP, MySQL und SQL.

PHP ist eine Programmiersprache welche auf dem Webserver abläuft. Konkurrenzprodukte zu PHP: Active Server Pages (ASP.NET), Ruby, Java Server Pages (JSP), Cold Fusion etc.
Oft spricht man auch von Middleware oder Applikationsserver mit der entsprechenden Programmiersprache
MySQL ist eine Datenbank welche auf dem Webserver installiert ist. Konkurrenzprodukte: Microsoft Server, Oracle, dBase, Filemaker etc
SQL ist eine [mehr oder weniger] genormte Abfragesprache für Datenbanken
Ein Content Management System [CMS] ist eine programmierte Lösung für das Verwalten von Websites. Ein CMS besteht z.B. aus PHP, MySQL, Javascript, HTML, CSS, AJAX

100
Kartenlink

Web-Applikationen
Was ist Cold Fusion?

Kostenpflichtige Lizenz von Adobe. Railo ist eine kostenlose Alternative
Vorteile: sehr einfach zu lernen, Verwandtschaft zu HTML, läuft auf vielen Servern
Nachteile: geringere Verbreitung, Kosten ($1500 pro Server)

101
Kartenlink

Web-Applikationen
Was ist ASP.Net?

kein Produkt, sondern eine Technologie von Microsoft. Die Programmiersprachen sind C# und VB.NET
Lizenz: Proprietäre Software
Vorteile: weit verbreitet, ASP.NET trennt die Darstellung von der Programmlogik
Nachteile: Nur Windows Server

102
Kartenlink

Web-Applikationen
Was ist JSP?

JavaServer Pages, abgekürzt JSP, ist eine von Sun Microsystems entwickelte, auf JHTML basierende Web-Programmiersprache zur einfachen dynamischen Erzeugung von HTML- und XML-Ausgaben eines Webservers.

Lizenz: Open Source
Vorteile: weit verbreitet, viele Tutorials, läuft auf vielen Servern
Nachteile: Komplexität

103
Kartenlink

Web-Applikationen
Nenne das Wichtigste zu Datenbanken.

Datenbanken speichern Informationen in Feldern, welche zueinander in Beziehungen stehen.
Datenbanken eigenen sich zum Speichern, Abrufen, Filtern und Sortieren von Informationen.
Dafür wird die genormte Datenbanksprache SQL [Structured Query Language] verwendet.
Eine sehr bekannte und oft eingesetzte Open-Source-Datenbank heisst MySQL.
MySQL wird über die Kommandozeile gesteuert. Als Benutzeroberfläche wird oft phpMyAdmin eingesetzt.

104
Kartenlink

Web-Applikationen
Was kann ich mit MySQL tun?

Daten von Gästebüchern, Foren, Blogs, Preislisten etc

erfassen
sortiert und gefiltert abrufen
bearbeiten
löschen

105
Kartenlink

Web-Applikationen
Wie sieht der Aufbau einer Datenbank: Felder aus?

Jedes Feld besteht aus

einem Namen verständlich
einem Feldtyp unklar
einer Länge halb verständlich
einem Zeichensatz halb verständlich
Attributen unklar
einem Standardwert halb verständlich

106
Kartenlink

Web-Applikationen
Ist MySQL eine Datenbank?

MySQL ist keine Datenbank. Es ist eine Software, um Datenbanken anzulegen und zu verwalten.

107
Kartenlink

Web-Applikationen
Nenne Details über Datenbank Felder: Feldname

Vorschlag: Kleinbuchstaben a bis z und Unterstrich Details
Namen, welche MySQL selbst als Befehle verwendet sollten nicht verwenden werden, zum Beispiel : alter, select, from, order etc.

108
Kartenlink

Web-Applikationen
Nenne Details über Datenbank Felder: Daten- oder Feldtyp

Welche Art von Daten wird im Feld gespeichert:

Nur ganze Zahlen
Zahlen mit Komma
Datum & Zeit
Texte
etc.

Beispiele:

VARCHAR für beliebige Strings (Buchstaben, Zahlen)
INT für ganze Zahlen
FLOAT für Zahlen mit Komma
DATETIME für Datum mit Uhrzeit

Timestamp: Mit Standard: CURRENT_TIMESTAMP (ohne ON UPDATE CURRENT_TIMESTAMP) hat Spalte den aktuellen Zeitstempel als Vorgabewert, wird jedoch nicht automatisch aktualisiert.
Ohne Standard: CURRENT_TIMESTAMP, aber mit ON UPDATE hat Spalte den Standardwert 0 und wird automatisch aktualisiert.
Mit CURRENT_TIMESTAMP und ON UPDATE hat Spalte den aktuellen Zeitstempel als Vorgabewert und wird aktualisiert.

109
Kartenlink

Web-Applikationen
Nenne Details über Datenbank Felder: Feldlänge

Einige Daten- oder Feldtypen (zum Beispiel VARCHAR und CHAR) werden unter Angabe einer Länge deklariert, welche die maximale Anzahl von Zeichen spezifiziert, die gespeichert werden kann.
Beispiel: - VARCHAR(30) kann 30 Zeichen speichern

110
Kartenlink

Web-Applikationen
Nenne Details über Datenbank Felder: Zeichensatz

Einem Feld kann ich einen Zeichensatz zuordnen. Mit Vorteil ordne ich aber den Zeichensatz der Tabelle, resp. Datenbank zu

111
Kartenlink

Web-Applikationen
Nenne Details über Datenbank Felder: Attribut

Gewissen Daten- oder Feldtypen lassen sich Attribute zuordnen
Beispiele:

auto_increment

TINYINT

unsigned

112
Kartenlink

Web-Applikationen
Nenne Details über Datenbank Felder: Leere Einträge

NULL bedeutet, dass der Eintrag nicht leer sein darf. In diesem Falle muss das mit PHP vor der Eintragung in die DB überprüft werden.

113
Kartenlink

Web-Applikationen
Nenne Details über Datenbank Felder: Tabellentyp

InnoDB:
transaktionssichere Tabellen, Sperrung auf Zeilen-Ebene.

MyISAM
speichert Daten schnell, bietet Volltext-Suchfähigkeiten

114
Kartenlink

Web-Applikationen
Details über Datenbank Felder: Wie viel Speicherplatz brauchen Felder?

Bei riesigen Datenbanken (zum Beispiel Amazon) muss ich die Felder so konzipieren, dass die Datei nicht zu gross wird.
Jedes Datenbankfeld verbraucht Speicherplatz

Beispiel:

TINYINT kann Zahlen speichern zwischen 0 und 255 pro Datensatz wird 1 Byte benötigt
INT kann Zahlen speichern zwischen 0 und 4'294'967'295 pro Datensatz werden 4 Byte benötigt

=> Wenn ich nur die Zahlen zwischen 0 und 10 verwende sollte ich mit TINYINT und nicht mit INT arbeiten

115
Kartenlink

Web-Applikationen
Datenbank: Was ist eine Entität?

Die Entität entspricht dem Tabellennamen.

116
Kartenlink

Web-Applikationen
Datenbank: Was ist ein Attribut?

Die Attribute entsprechen den Feldern

117
Kartenlink

Web-Applikationen
Datenbank: Was ist ein Datenmodell?

Das Datenmodell beschreibt in Form eines Diagramms die Struktur der Datenbank

118
Kartenlink

Web-Applikationen
Datenbank Normalisierung: Was ist die Erste Normalform?

Die Datenbank hat dann die erste Normalform, wenn alle Attribute nur einen einzigen Wert haben. In unserem Beispiel ist dies beim Attribut Songs nicht der Fall.
Aus diesem Grunde wird das Attribut Songs zu einer neuen Entität mit dem Namen Song und dem Attribut Songname (und vielleicht noch Songlaenge)

Nicht normalisiert:

Erste Normalform:

119
Kartenlink

Web-Applikationen
Datenbank Normalisierung: Was ist die Zweite Normalform?

Die zweite Normalform sagt, dass alle Attribute von einem eindeutigen Schlüsselfeld abhängen müssen.
In unserem Beispiel ist das nicht der Fall. Wenn eine Band verschiedene CDs herausgegeben hat kommt der gleiche Bandname bei verschiedenen Schlüsselfeldern vor. Somit muss das Attribut Bandname als Entität betrachtet werden

Falsches Design:

Zweite Normalform:

120
Kartenlink

Web-Applikationen
Datenbank Normalisierung: Was ist die Dritte Normalform?

Die Regel der dritten Normalform sagt, dass Attribute nicht voneinander abhängen dürfen.
Im obigen Beispiel sind aber in der Entität Plattenfirma die Attribute Land (z.B. Schweiz) und Landkuerzel (z.B. CH) voneinander abhängig. Das Attribut Land muss als Entität erstellt werden

Falsches Design:

Dritte Normalform:

121
Kartenlink

Web-Applikationen
Datenbank Normalisierung: Was ist eine 1:m Beziehung?

Die Entitäten (Tabellen) müssen noch miteinander in einer Beziehung stehen. Es gibt die Beziehungen 1:1, 1:m und m:m.

Am häufigsten sind die 1:m Beziehungen

Entität 1 besitzt eine oder mehrere Entitäten 2.
Entitäten 2 kommen nur in einer Entität 1 vor

Auf das Beispiel übersetzt:

Jede CD hat einen oder mehrere Songs;
Der Song kommt nur auf einer CD vor

122
Kartenlink

Web-Applikationen
Datenbank Normalisierung: Was ist eine m:m Beziehung?

Die Entitäten (Tabellen) müssen noch miteinander in einer Beziehung stehen. Es gibt die Beziehungen 1:1, 1:m und m:m.

Häufige Beziehung m:m

Entität 1 besitzt eine oder mehrere Entitäten 2.
Entitäten 2 kommt in einer oder mehreren Entitäten 1 vor

Auf das Beispiel übersetzt:

Jede CD hat einen oder mehrere Songs
Der Song kommt auf einer oder mehreren CDs vor

123
Kartenlink

Web-Applikationen
Datenbank Normalisierung: Was ist eine 1:1 Beziehung?

Die Entitäten (Tabellen) müssen noch miteinander in einer Beziehung stehen. Es gibt die Beziehungen 1:1, 1:m und m:m.

Seltene Beziehung 1:1

Entität 1 besitzt nur eine Entität 2.
Entitäten 2 kommen nur in einer Entität 1 vor

Auf das Beispiel übersetzt:

Jede CD hat einen Song
Der Song kommt nur auf einer CD vor

124
Kartenlink

Web-Applikationen
In der Tabelle tbl_pokemon2 gibt es die Felder Energie, Name, Beschreibung und Punkte.

Was macht folgender Befehl:

SELECT * FROM tbl_pokemon2;

Alle Felder aus tbl_pokemon2

125
Kartenlink

Web-Applikationen
In der Tabelle tbl_pokemon2 gibt es die Felder Energie, Name,Beschreibung und Punkte.

Was macht folgender Befehl:

SELECT Name FROM tbl_pokemon2;

Feld Name aus tbl_pokemon2

126
Kartenlink

Web-Applikationen
In der Tabelle tbl_pokemon2 gibt es die Felder Energie, Name,Beschreibung und Punkte.

Was macht folgender Befehl:

SELECT Name, Energie FROM tbl_pokemon2;

Felder Name und Energie aus tbl_pokemon2

127
Kartenlink

Web-Applikationen
In der Tabelle tbl_pokemon2 gibt es die Felder Energie, Name,Beschreibung und Punkte.

Was macht folgender Befehl:

SELECT Name FROM tbl_pokemon2 ORDER BY Name ASC;

Feld Name aus tbl_pokemon2, aufsteigend sortiert nach Feld Name

128
Kartenlink

Web-Applikationen
In der Tabelle tbl_pokemon2 gibt es die Felder Energie, Name,Beschreibung und Punkte.

Was macht folgender Befehl:

SELECT Name FROM tbl_pokemon2 ORDER BY Name DESC;

Feld Name aus tbl_pokemon2, absteigend sortiert nach Feld Name

129
Kartenlink

Web-Applikationen
In der Tabelle tbl_pokemon2 gibt es die Felder Energie, Name,Beschreibung und Punkte.

Was macht folgender Befehl:

SELECT Name FROM tbl_pokemon2 ORDER BY Name, Energie ASC;

Feld Name aus tbl_pokemon2, absteigend sortiert nach Feld Name, dann nach Energie

130
Kartenlink

Web-Applikationen
In der Tabelle tbl_pokemon2 gibt es die Felder Energie, Name,Beschreibung und Punkte.

Was macht folgender Befehl:

SELECT DISTINCT Energie FROM tbl_pokemon2;

Feld Name aus tbl_pokemon2, jeder Wert kommt nur einmal vor

131
Kartenlink

Web-Applikationen
In der Tabelle tbl_pokemon2 gibt es die Felder Energie, Name,Beschreibung und Punkte.

Was macht folgender Befehl:

SELECT Name, Energie FROM tbl_pokemon2 WHERE Energie = 'Green';

Felder Name, Energie aus tbl_pokemon2 wenn Energie= Green

132
Kartenlink

Web-Applikationen
In der Tabelle tbl_pokemon2 gibt es die Felder Energie, Name,Beschreibung und Punkte.

Was macht folgender Befehl:

SELECT Name, Energie FROM tbl_pokemon2 WHERE Energie = 'Green' OR Energie = 'Yellow';

Felder Name, Energie aus tbl_pokemon2 wenn Energie = Green oder Yellow.

Operatoren: =, <, <=, >, >=, <>, OR, AND

133
Kartenlink

Web-Applikationen
In der Tabelle tbl_pokemon2 gibt es die Felder Energie, Name,Beschreibung und Punkte.

Was macht folgender Befehl:

SELECT Name, Punkte FROM tbl_pokemon2 WHERE Punkte>50;

Felder Name, Punkte aus tbl_pokemon2 wenn Punkte > 50

134
Kartenlink

Web-Applikationen
In der Tabelle tbl_pokemon2 gibt es die Felder Energie, Name,Beschreibung und Punkte.

Was macht folgender Befehl:

SELECT Name, Punkte FROM tbl_pokemon2 WHERE Punkte BETWEEN 50 AND 60;

Felder Name, Punkte aus tbl_pokemon2 wenn Punkte zwischen 50 und 60

135
Kartenlink

Felder Name, Punkte aus tbl_pokemon2 wenn Punkte = 30, 40 oder 70

136
Kartenlink

Web-Applikationen
In der Tabelle tbl_pokemon2 gibt es die Felder Energie, Name,Beschreibung und Punkte.

Was macht folgender Befehl:

SELECT Name, Punkte FROM tbl_pokemon2 WHERE Punkte IS NULL;

Felder Name, Punkte aus tbl_pokemon2 wenn Feld Punkte leer ist

137
Kartenlink

Web-Applikationen
In der Tabelle tbl_pokemon2 gibt es die Felder Energie, Name,Beschreibung und Punkte.

Was macht folgender Befehl:

SELECT Name FROM tbl_pokemon2 WHERE Name LIKE 'V%';

Name beginnt mit V.

Es gibt auch NOT LIKE. % steht für «Wildcard»

138
Kartenlink

Web-Applikationen
In der Tabelle tbl_pokemon2 gibt es die Felder Energie, Name,Beschreibung und Punkte.

Was macht folgender Befehl:

SELECT Name FROM tbl_pokemon2 WHERE Name LIKE '%ac%';

Name beinhaltet «ac»

139
Kartenlink

Web-Applikationen
In der Tabelle tbl_pokemon2 gibt es die Felder Energie, Name,Beschreibung und Punkte.

Was macht folgender Befehl:

SELECT * FROM tbl_pokemon2 ORDER BY RAND();

Listet nach Zufallsprinzip auf

140
Kartenlink

Web-Applikationen
Wie heissen PHP-Dateien?

PHP-Dateien müssen mit der Dateierweiterung *.php in einem Unterordner von htdocs abgelegt werden.

141
Kartenlink

Web-Applikationen
Wo steht der PHP-Code?

Der Code steht am Anfang vor dem html Tag oder im body der HTML-Seite und beginnt immer mit <?php und endet mit ?>:

<html><head><title>PHP</title></head>
<body>
<?php echo "Hallo Welt!"; ?>
</body>
</html>

Zeilenende immer mit ; (Strichpunkt)
Jede Zeile muss mit einem Strichpunkt abgeschlossen werden!

echo "Hallo Welt!";

142
Kartenlink

Web-Applikationen
Wie sieht die Ausgabe von PHP (echo-Befehl) mit HTML Tags aus?

Der echo() Befehl gibt Informationen aus. Es dürfen auch HTML-Befehle verwendet werden.

echo "Hallo kluge Welt!";

143
Kartenlink

Web-Applikationen
Wie sieht die Ausgabe von PHP (echo-Befehl) mit HTML-Attributen aus?

HTML-Attribute stehen in Anführungszeichen ("). Bei PHP werden sie in Hochkomma gesetzt:

echo "Hallo kluge Welt!";

144
Kartenlink

Web-Applikationen
Wie sieht die lange echo-Ausgabe aus?

Lange HTML-Ausgaben lassen sich mit echo <<<_END und _END ausgeben:

echo <<<_END
<html><head><title>PHP Form Upload</title></head><body>
<form method='post' action='up.php' enctype='multipart/form-data'>
...
_END;

145
Kartenlink

Web-Applikationen
Wie werden Kommentare bei PHP geschrieben?

Kürzere Kommentare mit / /, über mehrere Zeilen gehende mit /* */ schreiben:

/ / Das ist ein Kommentar
/* Das ist auch ein Kommentar. Er geht über mehrere Zeilen. Das ist auch ein Kommentar. Er geht über mehrere Zeilen. */

146
Kartenlink

Web-Applikationen
Was muss man bei PHP-Befehlen zur Gross-/Kleinschreibung beachten?

Gross- und Kleinschreibung muss bei PHP-Befehlen nicht beachtet werden, wohl aber bei Variablennamen und beim Datenbankzugriff.

Wir unterscheiden immer zwischen Gross- und Kleinschreibung

147
Kartenlink

Web-Applikationen
PHP Programmierung: Was sind Variabeln?

Variablen sind Platzhalter, vergleichbar mit Schubladen. Die Variable hat einen beliebigen Namen (entspricht der Beschriftung der Schublade) und einen Inhalt (entspricht dem Inhalt der Schublade).
Variablennamen dürfen nur aus Buchstaben, Ziffern und dem Unterstrichstrich (_) bestehen.
Es muss kein Datentyp festgelegt werden.

148
Kartenlink

Web-Applikationen
PHP Programmierung: Nenne Eigenschaften von Variabelnnamen. Was dürfen sie?

Variablennamen ...

... dürfen beliebig lang sein
... dürfen kein Leerzeichen enthalten
... dürfen nur aus Buchstaben und Ziffern bestehen, das erste Zeichen muss ein Buchstabe sein!
... dürfen keine deutschen Umlaute oder scharfes ß enthalten
... unterscheiden zwischen Groß- und Kleinbuchstaben
... dürfen keine Schlüsselwörter von PHP oder JavaScript sein
... dürfen als einziges Sonderzeichen den Unterstrich "_" enthalten

149
Kartenlink

Web-Applikationen
PHP Programmierung: Wie werden Variablen definiert (Name und Inhalt festgelegt)?

Variablen werden mit dem $-Zeichen definiert:

$vorname = "Martin";
echo $vorname;

150
Kartenlink

Web-Applikationen
PHP Programmierung: Wann sind Variabeln gültig?

Variablen welche ausserhalb von Funktionen definiert werden sind in der ganzen Datei gültig, haben aber in Funktionen keine Gültigkeit.
Variablen, welche in der Funktion definiert werden sind nur innerhalb der Funktion gültig.
Es besteht aber die Möglichkeit, globale Variablen (welche in der ganzen Datei gültig sind) zu definieren. Der Befehl gehört in die Funktion: global $variablenname;

151
Kartenlink

Web-Applikationen
PHP Programmierung: Was passiert bei diesem Code?

<?php $vorname ="Martin"; ?>
<?php
function test() {
$variableInFunktion = "Andreas";
}
test();
?>
<?php echo "Hallo ".$vorname." und ".$variableInFunktion; ?>

Der Code gibt eine Fehlermeldung, weil die Variable nur in der Funktion, nicht aber ausserhalb definiert ist.

Lösung:

Der Befehl global $variable muss sich in der Funktion befinden. Er sagt aus, dass die Variable auch ausserhalb der Funktion Gültigkeit hat

<?php $vorname ="Martin"; ?>
<?php
function test() {
global $variableInFunktion;
$variableInFunktion = "Andreas";
}
test();
?>
<?php echo "Hallo ".$vorname." und ".$variableInFunktion; ?>

152
Kartenlink

Web-Applikationen
PHP Programmierung: Sind Variabeln auch in anderen Dateien gültig?

Variablen haben in anderen Dateien keine Gültigkeit. Sie müssen als Sessionsvariablen deklariert werden.

153
Kartenlink

Web-Applikationen
PHP Programmierung: Was sind superglobale Variabeln?

Superglobale Variablen $GLOBALS haben in der ganzen Datei Gültigkeit (innerhalb und ausserhalb Variablen), zum Beispiel:

$vari = "MV";
echo $GLOBALS["vari"];
$_SERVER hat verschiedene Parameter:
echo $_SERVER['PHP_SELF']; Dateiname
echo $_SERVER['SERVER_NAME']; Servername

154
Kartenlink

Web-Applikationen
PHP Programmierung: Welche Möglichkeiten unterstützt PHP, HTML- und PHP-Code zu verbinden?

Direkte Methode des Verbindens
$vorname ="Martin";
echo "Guten Tag $vorname, cool dich zu sehen!";

Vereinigungs-Operator
Der Punkt (.) hängt HTML- und PHP-Code zusammen
$vorname ="Martin";
echo "Guten Tag ".$vorname.", cool dich zu sehen!";

Variablen mit HTML-Code
$dieVariable ="Martin";
echo "Guten Tag ".$dieVariable.", schön dich hier zu sehen!";

155
Kartenlink

Web-Applikationen
PHP Programmierung: Was sind die Regeln des Vereinigungs-Operators?

Gänsefüsschen (") im HTML-Code werden durch Hochkomma (') ersetzt.
Der Auszugebende HTML-Code kommt in Gänsefüsschen (").
HTML- und PHP-Code werden mit dem Vereinigungs-Operator (.) zusammengehängt.

Statt

im HTML steht für die Ausgabe mit PHP
echo "";

156
Kartenlink

Web-Applikationen
PHP Programmierung: Was sind Konstanten?

Variablen, welche im Laufe des Programms nicht geändert werden dürfen werden als Konstanten definiert.

Beispiel:
Mehrwertsteuer. In Code werden sie ohne $-Zeichen verwendet
define ("mwst","8%");
echo "Mehrwertsteuer: ".mwst;

157
Kartenlink

Web-Applikationen
Was macht dieser Code und was gibt er als Ergebnis aus?

$dieVariable="Martin";
echo strlen($dieVariable);

Länge eines Strings?

// Ergebnis: 6

158
Kartenlink

Web-Applikationen
Was macht dieser Code und was gibt er als Ergebnis aus?

$dieVariable1="Martin";
$dieVariable2="1234";
echo is_numeric($dieVariable1);
echo is_numeric($dieVariable2);

Ist der String eine Zahl?

echo is_numeric($dieVariable1); (=false)
echo is_numeric($dieVariable2); 1 (=true)

159
Kartenlink

Web-Applikationen
Was macht dieser Code und was gibt er als Ergebnis aus?

$dieVariable=" Martin ";
echo trim($dieVariable)." ist da";

Überflüssige Leerzeichen am Anfang und Ende entfernen

// Ergebnis: Martin ist da

160
Kartenlink

Web-Applikationen
Was macht dieser Code und was gibt er als Ergebnis aus?

$dieEingabe = "Verantwortlich: Martin Vollenweider";
echo str_replace("Martin Vollenweider", "MV",$dieEingabe);

Strings ersetzen

// MV

161
Kartenlink

Web-Applikationen
Was macht dieser Code und was gibt er als Ergebnis aus?

echo substr("Martin Vollenweider",0,6);

String in Länge beschränken

// Martin
im Beispiel ist 0 der Startwert und 6 die Länge.

162
Kartenlink

Web-Applikationen
Was macht dieser Code und was gibt er als Ergebnis aus?

$dieVariable = "Bern Basel Genf";
echo strpos($dieVariable,"Genf",2);

Zeichen in Zeichenkette suchen (ab Startposition)

// 11

Genf ist an Position 11 (die erste Position beginnt mit Null). Die Suche beginnt ab dem dritten Zeichen (2). Wenn nichts gefunden wird, wird auch nichts zurück gegeben.

163
Kartenlink

Web-Applikationen
Was macht dieser Code und was gibt er als Ergebnis aus?

$dieVariable = "Genf Bern Basel Genf";
echo strrpos($dieVariable,"Genf");

Letztes Zeichen in Zeichenkette suchen

// 16

164
Kartenlink

Web-Applikationen
Was macht dieser Code und was gibt er als Ergebnis aus?

$dieVariable = "Genf Bern Basel Genf";
echo strstr($dieVariable,"Bern");

Erstes Zeichen in Zeichenkette suchen und Rest zurückgeben (alles nachfolgende wird ausgegeben)

// Bern Basel Genf

165
Kartenlink

Web-Applikationen
Was macht dieser Code und was gibt er als Ergebnis aus?

$derName="Martin Vollenweider";
echo strip_tags($derName);

HTML- und PHP-Tags entfernen

// Martin Vollenweider, nicht in fett

166
Kartenlink

Web-Applikationen
Was macht dieser Code und was gibt er als Ergebnis aus?

$vorname ="Martin";
echo strtoupper($vorname).", ".strtolower($vorname);

Text in Gross- und Kleinbuchstaben

167
Kartenlink

Web-Applikationen
Was macht dieser Code und was gibt er als Ergebnis aus?

echo mt_rand(1,20);

Zufallszahl erzeugen
Die Zufallszahlen werden mit mt_rand(startwert,endwert) bestimmt.

// Zahl 1-20

168
Kartenlink

Web-Applikationen
Was macht dieser Code und was gibt er als Ergebnis aus?

echo max(5,6,78,9,2);

oder

echo min(5,6,78,9,2);

Minimum und Maximum

Der Befehl max(Wert1,Wert2,Wert3,...) liefert immer den grössten Wert zurück

78

Der Befehl min(Wert1,Wert2,Wert3,...) liefert immer den kleinsten Wert zurück

2

169
Kartenlink

Web-Applikationen
Was macht dieser Code und was gibt er als Ergebnis aus?

echo phpinfo();

Allgemeine Systeminformationen

Der folgende Befehl liefert Infos über die verwendete PHP-Version:
echo phpinfo();

Mit getenv() lassen sich gezielt einzelne Parameter davon auslesen:

echo getenv("HTTP_ACCEPT_CHARSET");
echo getenv("REMOTE_ADDR");

170
Kartenlink

Web-Applikationen
Was macht dieser Code?

$name = ereg_replace("[^A-Za-z0-9.]", "", $name);

Nur bestimmte Zeichen zulassen
Die Variable $name dürfe nur die Zeichen A–Z, a–z, 0–9 und den Punkt enthalten

Beispiel E-Mail-Adresse:

if (ereg("^.+@.+\\..+$", $input)==true) {
$meldung = "E-Mail-Adresse richtig";
} else {
$meldung = "E-Mail-Adresse falsch";
}

+: Der voranstehende Ausdruck muss mindestens einmal vorkommen, darf aber auch mehrfach vorkommen.

171
Kartenlink

Web-Applikationen
Wie bindet man eine externe PHP-Datei ein?

Dazu dient die Methode require_once vor dem <head>-Teil von
HTML:

<?php
require_once('externeDatei.php');
?>
<head>
...
</head>

172
Kartenlink

Web-Applikationen
PHP-Programmierung: Was ist ein Array?

Ein Array ist eine mehrdimensionale Variable:

$variable = array("Wert1", " Wert2", " Wert3");

173
Kartenlink

Web-Applikationen
PHP-Programmierung: Wie findet man die Länge eines Arrays raus?

echo "Anzahl: ".count($variable);

174
Kartenlink

Web-Applikationen
PHP-Programmierung: Wie sortiert man ein Array?

sort($variable);

175
Kartenlink

Web-Applikationen
PHP-Programmierung: Wie gibt man ein Array aus?

for ($i=0; $i<count($variable); $i++) {
echo $variable[$i]." ";
}

176
Kartenlink

Web-Applikationen
PHP-Programmierung: Wie funktionieren if-Bedingungen?

if (Bedingung) {
Befehle, wenn Bedingung wahr;
} else {
Befehle, wenn Bedingung falsch;
};

== steht für gleich
!= steht für ungleich
&& steht für AND
|| steht für OR

177
Kartenlink

Web-Applikationen
PHP-Programmierung: Was sind Funktionen?

Funktionen beinhalten Befehle, welche zu einem späteren Zeitpunkt aufgerufen werden.

Sie sind also bildlich vergleichbar mit einem Vorratskasten

178
Kartenlink

Web-Applikationen
PHP-Programmierung: Wie definiert man Funktionen?

function Funktionsname(Parameter) {
// Code;
}

179
Kartenlink

Web-Applikationen
PHP-Programmierung: Wie ruft man Funktionen auf?

Eine Funktion wird mit folgendem Befehl aufgerufen:

Funktionsname(Parameter);

180
Kartenlink

Web-Applikationen
PHP-Programmierung: Wie greift man auf Datenbanken zu?

In externer Datei verbindung.php sind Verbindungsvariablen:
<?php
/ / Wichtigste Verbindungsparameter als Variablen
$host = "Name des Hosts, z.B. localhost";
$db = "Name der Datenbank";
$user = "Name des Benutzers";
$pwd = "Passwort des Benutzers";
$tbl = "Name der Tabelle";
$verb = mysqli_connect($host, $user, $pwd, $db);
/ / Fehler ausgeben
error_reporting(E_ALL);
ini_set('display_errors', '1');
/ / Zeichensatz utf8
mysqli_query($verb,"SET NAMES 'utf8' COLLATE 'utf8_general_ci'") or die("Fehler: ".mysqli_connect_error());
/ / Keine Enter unterhalb letzter Zeile!
?>
207

181
Kartenlink

Web-Applikationen
PHP-Programmierung: Wie greift man auf externe Dateien zu zu?

In jeder Datei, welche auf die Datenbank zugreift muss ganz am Anfang des Codes auf die externe Verbindungsdatei zugegriffen werden:

<?php
require_once("verbindung.php");
?>

include, require, require_once

include(): Externe Datei einbinden. Fehlermeldung bei Fehlern
include_once(): wird, wenn bereits eingebunden, nicht erneut eingebunden
require(): wie include(), aber Programmende bei Fehler.
require_once(): wie include_once(), aber Programmende bei Fehler

182
Kartenlink

Web-Applikationen
PHP-Programmierung: Wie findet man heraus, wie die ID eines soeben eingefügten Datensatzes ist?

$letzteID = mysqli_insert_id($verb);

183
Kartenlink

Web-Applikationen
PHP-Programmierung: Was ist eine SQL-Injection?

«SQL-Injection ... bezeichnet das Ausnutzen einer Sicherheitslücke in Zusammenhang mit SQL-Datenbanken, die durch mangelnde Maskierung oder Überprüfung von Metazeichen in Benutzereingaben entsteht. Der Angreifer versucht dabei, über die Anwendung, die den Zugriff auf die Datenbank bereitstellt, eigene Datenbankbefehle einzuschleusen. Sein Ziel ist es, Daten auszuspähen, in seinem Sinne zu verändern oder Kontrolle über den Server zu erhalten.»
Lässt sich durch einfache PHP-Befehle umgehen

184
Kartenlink

Web-Applikationen
PHP-Programmierung: Was ist eine Datenbank View?

Eine Datenbank View ist eine virtuelle Tabelle, welche keine Daten, sondern nur SELECT Abfragen gespeichert sind.

Vorteile

Man baut die View zwar einmal mit komplexen SELECT Befehlen, kann dann aber mit einfachen SELECT-Befehlen darauf zugreifen.
Man kann verschiedenen Benützern nur Rechte für die virtuelle Tabelle geben.
Man kann auf Werte, welche berechnet werden, einfacher zugreifen

185
Kartenlink

Web-Applikationen
Was kann ich mit PHP tun?

Berechnungen auf dem Webserver durchführen, ohne dass die Formeln ersichtlich sind. Grund: PHP liefert HTML-Dateien mit nur den Ergebnissen zurück. Beispiel: Prämienrechner von Versicherungen
Applikationen, bei denen Daten in Datenbanken gespeichert werden. Beispiele: Gästebuch, Forum, Blog etc.
Anwendungen, mit denen Dateien vom Webserver gelesen und wieder zurück geschrieben werden. Beispiel: Datei Uploads von Bildern etc.
Steuern, dass nur angemeldete Anwender bestimmte Seiten öffnen können.

186
Kartenlink

Web-Applikationen
PHP-Programmierung: Was macht dieser Code?

<?php
header("Location: http://www.timerate.ch");
?>
<html>

Mit PHP auf andere URL umleiten

Dieser Befehl muss vor dem <html> Befehl stehen.

187
Kartenlink

Web-Applikationen
PHP-Programmierung: Wie startet man eine Session?

Am Anfang jeder Datei angeben:
session_start();
Eine Sessionsvariable übergeben:
$_SESSION['variable'] = "Inhalt Sessionsvariable";
Den Sessionsnamen ausgeben:
session_name();

Kartensatzinfo:

Autor: Manuela

Oberthema: Interaktive Medien

Thema: Mobile Websites

Schule / Uni: HTW Chur

Ort: Chur

Veröffentlicht: 21.06.2014

Tags: Mobile Websites, Web App, Vollenweider,

Schlagwörter Karten:

Alle Karten (187)

keine Schlagwörter

Missbrauch melden

Deutsch English

Hol' Dir diese Lernkarten, lerne & bestehe Prüfungen. Kostenlos! Auch auf iPhone/Android!

Interaktive Medien FS14 Sem. 4 (187 Karten)