Mobile Webseiten
Was ist Tizen 2.1 (MeeGo, Moblin, Maemo) (ab 2005)?
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
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
Mobile Webseiten
Was versteht man unter Viewport?
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
Mobile Webseiten
Was sind Standard Viewports?
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
Mobile Webseiten
Wie wird auf einem Android-Gerät mit einer Bildschirmbreite von 720px eine Website mit 400px Breite dargestellt?
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
=> 800 Pixel verkleinert auf 720 Pixel
=> 400 Pixel verkleinert auf 360 Pixel
Mobile Webseiten
Wie wird auf einem iPhone mit einer Bildschirmbreite von 320px eine Website von 490px Breite dargestellt?
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
=> 980 Pixel verkleinert auf 320 Pixel
=> 490 Pixel verkleinert auf 160 Pixel
Mobile Webseiten
Wie wird auf einem Android-Retina-Gerät mit einer Bildschirmbreite von 720px eine Website mit 360px Breite dargestellt?
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
=> 1080 Pixel verkleinert auf 720 Pixel
=> 360 Pixel verkleinert auf 240 Pixel
Mobile Webseiten
Was heisst Entwicklung auf Basis Betriebssystem: Native Apps?
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:
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)
Mobile Webseiten
Was sind die Nachteile von Native Apps?
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.
Mobile Webseiten
Kennzeichen nativer Apps: App oder Web-App?
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.
Mobile Webseiten
Was sind die Nachteile einer WebApp?
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
Mobile Webseiten
Was heisst Entwicklung Strategie: Hybride App?
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
Mobile Webseiten
Was sind die Nachteile von Hybrid-Apps?
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.
Mobile Webseiten
Es gibt mehrere Strategien, um einen Inhalt auf Mobiles zu bringen. Was heisst es, keine Änderungen vorzunehmen, nur Optimierungen?
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:
Mögliche Optimierungen
Kritik
Nicht zu empfehlen. Zu viele Anwender verwenden Mobiles
- 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
Mobile Webseiten
Es gibt mehrere Strategien, um einen Inhalt auf Mobiles zu bringen. Was heisst es, separate mobile Websites zu erstellen?
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
Kritik
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
Mobile Webseiten
Es gibt mehrere Strategien, um einen Inhalt auf Mobiles zu bringen. Was heisst Progressive Enhancement und Feature Detection?
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:
Vorgehen
- 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)
Mobile Webseiten
Was ist der Unterschied zwischen adaptivem und responsivem Design?
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
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
Mobile Webseiten
Wie wird beim Responsive Design vorgegangen?
Wie wird beim Responsive Design vorgegangen?
Lösungsschritt 1: % für Container benutzen
Regel
Lösungsschritt 2: rem für Schriftgrad
Regel
Lösungsschritt 3: Breakpoints setzen
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
Mobile Webseiten
Nenne Vorteile und Nachteile zur Desktop-First-Programmierung.
Nenne Vorteile und Nachteile zur Desktop-First-Programmierung.
Vorteile
Nachteile
- 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
Mobile Webseiten
Nenne Vorteile und Nachteile zur Mobile-First-Programmierung.
Nenne Vorteile und Nachteile zur Mobile-First-Programmierung.
Vorteile
Nachteile
- 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
Mobile Webseiten
Welche Varianten zu Media Queries gibt es?
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.
@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.
Mobile Webseiten
Wie entwickle ich mit HTML, CSS und Javascript für Smartphones?
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
Mobile Webseiten
Was ist WURFL?
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
Mobile Webseiten
Wofür ist Modernizr?
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.
Mobile Webseiten
Was machen die Optionen cover und contain bei Bildern?
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%)
Mobile Webseiten
Was ist die Problematik mit Bildern im Responsive Web Design?
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
Mobile Webseiten
Was ist das Problem von Retina- oder HiDPI-Displays?
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.
Mobile Webseiten
Was ist der Unterschied zwischen CSS-Pixeln, Bild-Pixeln und Device- bzw. Display-Pixeln?
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.
Mobile Webseiten
Erläutere Lösungsstrategie mit HTML und CSS Sizing zum Skalieren von Bildern im RWD.
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
<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
- Für alle Geräte dieselbe Datenmenge
Mobile Webseiten
Erläutere Lösungsstrategie mit Media Queries zum Skalieren von Bildern im RWD.
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) {
…
}--
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) {
…
}--
Mobile Webseiten
Erläutere Lösungsstrategie mit Javascript zum Skalieren von Bildern im RWD.
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»
Mobile Webseiten
Erläutere Lösungsstrategie Web basierter Dienst: Sencha io Src zum Skalieren von Bildern im RWD.
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): <img src="see.jpg" alt="See" />
- Bild mit src.sencha.io (absoluter Pfad): <img src="http:src.sencha.io/http:www.htwchur.ch/ mobi/see.jpg" alt="See" />
Mobile Webseiten
Erläutere Lösungsstrategie Server Side Lösung: Adaptive Images zum Skalieren von Bildern im RWD.
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
Bei dieser Lösung wird mit verschiedenen Bildern gearbeitet
Mobile Webseiten
Die neuen CSS-Schrifteinheiten in Bezug auf den Viewport?
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
Mobile Webseiten
Zähle Performance Tips zur Optimierung von Websites auf.
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
Mobile Webseiten
Was sind CSS-Sprites und wie funktionnieren sie?
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
Mobile Webseiten
Was sind Vorteile von CSS-Sprites?
Was sind Vorteile von CSS-Sprites?
- Verbesserung der Ladezeit In den meisten Fällen kann durch eine konsequente Nutzung von Sprites eine Verringerung der Webseiten-Ladezeit erreicht werden: Der Browser lädt wesentlich schneller eine Datei mit einer Größe von 10kb als zehn Dateien mit jeweils 1kb, weil die HTTP-Spezifikation nur wenige parallele Download-Vorgänge vorsieht.
- Vermeiden von Verzögerung bei Bildwechseln
Mobile Webseiten
Nenne einige JavaScript-Anwendungsbeispiele.
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
Mobile Webseiten
Was ist die Idee von jQuery?
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
Mobile Webseiten
Was ist das DOM?
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.
Mobile Webseiten
Wie ist der Aufbau einer Android Applikation?
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
Mobile Webseiten
Wie ist der Aufbau einer iPhone Applikation?
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.).
Mobile Webseiten
Was sind Widgets?
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.
Web-Applikationen
Welche Regeln gelten für Dateinamen im Internet?
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
Verbotene Zeichen
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.)
Web-Applikationen
Nenne Spezifikationen von HTML, Flash, Javascript und CSS.
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.
Web-Applikationen
Was ist AJAX (Web 2.0)?
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.
Web-Applikationen
Wie funktionieren Dynamische Sites mit PHP & MySQL?
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.
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.
Web-Applikationen
Nenne die Spezifikationen von PHP, MySQL und SQL.
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
Web-Applikationen
Was ist JSP?
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
Web-Applikationen
Nenne das Wichtigste zu Datenbanken.
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.
Web-Applikationen
Nenne Details über Datenbank Felder: Daten- oder Feldtyp
Nenne Details über Datenbank Felder: Daten- oder Feldtyp
Welche Art von Daten wird im Feld gespeichert:
Beispiele:
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.
- 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.
Web-Applikationen
Nenne Details über Datenbank Felder: Feldlänge
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
Web-Applikationen
Nenne Details über Datenbank Felder: Attribut
Nenne Details über Datenbank Felder: Attribut
- Gewissen Daten- oder Feldtypen lassen sich Attribute zuordnen
- Beispiele: Das Schlüsselfeld kann das Attribut auto_increment besitzen. Jeder Datensatz kriegt eine automatische Nummer - Ein Feld vom Typ TINYINT unterstützt Zahlen von -128 bis +127 Mit dem Attribut unsigned werden Zahlen von 0 bis +255 unterstützt
Web-Applikationen
Details über Datenbank Felder: Wie viel Speicherplatz brauchen Felder?
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
Web-Applikationen
Datenbank Normalisierung: Was ist die Erste Normalform?
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:
Web-Applikationen
Datenbank Normalisierung: Was ist die Zweite Normalform?
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:
Web-Applikationen
Datenbank Normalisierung: Was ist die Dritte Normalform?
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:
Web-Applikationen
Datenbank Normalisierung: Was ist eine 1:m Beziehung?
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
Auf das Beispiel übersetzt:
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
Web-Applikationen
Datenbank Normalisierung: Was ist eine m:m Beziehung?
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
Auf das Beispiel übersetzt:
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
Web-Applikationen
Datenbank Normalisierung: Was ist eine 1:1 Beziehung?
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
Auf das Beispiel übersetzt:
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
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';
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
Operatoren: =, <, <=, >, >=, <>, OR, AND
Web-Applikationen
Wo steht der PHP-Code?
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!";
<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!";
Web-Applikationen
PHP Programmierung: Was sind Variabeln?
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.
Web-Applikationen
PHP Programmierung: Nenne Eigenschaften von Variabelnnamen. Was dürfen sie?
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
Web-Applikationen
PHP Programmierung: Wann sind Variabeln gültig?
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;
Web-Applikationen
PHP Programmierung: Was passiert bei diesem Code?
<?php $vorname ="Martin"; ?>
<?php
function test() {
$variableInFunktion = "Andreas";
}
test();
?>
<p><?php echo "Hallo ".$vorname." und ".$variableInFunktion; ?></p>
PHP Programmierung: Was passiert bei diesem Code?
<?php $vorname ="Martin"; ?>
<?php
function test() {
$variableInFunktion = "Andreas";
}
test();
?>
<p><?php echo "Hallo ".$vorname." und ".$variableInFunktion; ?></p>
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();
?>
<p><?php echo "Hallo ".$vorname." und ".$variableInFunktion; ?></p>
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();
?>
<p><?php echo "Hallo ".$vorname." und ".$variableInFunktion; ?></p>
Web-Applikationen
PHP Programmierung: Was sind superglobale Variabeln?
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
$vari = "MV";
echo $GLOBALS["vari"];
$_SERVER hat verschiedene Parameter:
echo $_SERVER['PHP_SELF']; Dateiname
echo $_SERVER['SERVER_NAME']; Servername
Web-Applikationen
PHP Programmierung: Welche Möglichkeiten unterstützt PHP, HTML- und PHP-Code zu verbinden?
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 <b>hier</b> zu sehen!";
$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 <b>hier</b> zu sehen!";
Web-Applikationen
PHP Programmierung: Was sind die Regeln des Vereinigungs-Operators?
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
<p class = "rot">
im HTML steht für die Ausgabe mit PHP
echo "<p class = 'rot'>";
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);
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)
echo is_numeric($dieVariable1); (=false)
echo is_numeric($dieVariable2); 1 (=true)
Web-Applikationen
Was macht dieser Code und was gibt er als Ergebnis aus?
$dieVariable = "Bern Basel Genf";
echo strpos($dieVariable,"Genf",2);
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.
// 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.
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);
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
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
Web-Applikationen
Was macht dieser Code und was gibt er als Ergebnis aus?
echo phpinfo();
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");
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");
Web-Applikationen
Was macht dieser Code?
$name = ereg_replace("[^A-Za-z0-9.]", "", $name);
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.
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.
Web-Applikationen
PHP-Programmierung: Wie greift man auf Datenbanken zu?
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
<?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
Web-Applikationen
PHP-Programmierung: Wie greift man auf externe Dateien zu zu?
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
<?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
Web-Applikationen
PHP-Programmierung: Was ist eine SQL-Injection?
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
Web-Applikationen
PHP-Programmierung: Was ist eine Datenbank View?
PHP-Programmierung: Was ist eine Datenbank View?
Eine Datenbank View ist eine virtuelle Tabelle, welche keine Daten, sondern nur SELECT Abfragen gespeichert sind.
Vorteile
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
Web-Applikationen
Was kann ich mit PHP tun?
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.
Flashcard set info:
Author: Manuela
Main topic: Interaktive Medien
Topic: Mobile Websites
School / Univ.: HTW Chur
City: Chur
Published: 21.06.2014
Card tags:
All cards (187)
no tags
