Welche mobilen Betriebssysteme gibt es?
- Microsoft Windows Phone 8.0
- Android 1X, 2.X, 3.X, 4.X (im Moment 4.4.2, basiert auf Linux Betriebssystem)
- Research In Motion Version 10.2 (Blackberry)
- iOS 7.1 (iPhone)
- Symbian OS (Gibt es nicht mehr!)
- Tizen 2.1 (sollte ursprünglich Symbian ablösen)
- WebOS 3.05 (Firma Palm für PDA's, von HP aufgekauft)
- Bada 2.0 (von Samsung entwickelt)
- Firefox OS 1.2 (vollständig nach offenen Webstandards gebaut)
Was ist WURFL?
(Wireless Universal Resource File)
- Wertet den User Agent aus
- WURFL ist ein grosses XML-Konfigruationsfile, welches alle Informationen über mobiles enthält
- Die Lösung wird als Cloud-Service angeboten
Für was werden Breakpoints eingesetzt?
Für Änderungen des Layouts
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, weil es zu viele Smartphones mit verschiedenen Bildschirmgrössen gibt
Breakpoints werden mit den Media Queries gesetzt
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, weil es zu viele Smartphones mit verschiedenen Bildschirmgrössen gibt
Breakpoints werden mit den Media Queries gesetzt
Mobile
Wie wird bestimmt, was der Nutzer der mobilen Version braucht?
Wie wird bestimmt, was der Nutzer der mobilen Version braucht?
Oft gibt es Links, wie «View Full Site» oder «Desktop Site»
Mobile
Wie erkenne ich das Gerät / den Browser eines mobilen Geräts?
Wie erkenne ich das Gerät / den Browser eines mobilen Geräts?
Über den User Agent (http://detectmobilebrowsers.com/)
Man kann mit dem User Agent (PHP oder Javascript) herausfinden, um welches Gerät es sich handelt.
Der Name wird in Form eines Strings übertragen, der z.B. über das Gerät, Betriebssystem und Browser inklusive entsprechender Version Auskunft gibt.
Man kann mit dem User Agent (PHP oder Javascript) herausfinden, um welches Gerät es sich handelt.
Der Name wird in Form eines Strings übertragen, der z.B. über das Gerät, Betriebssystem und Browser inklusive entsprechender Version Auskunft gibt.
Mobile
Für wie viel Prozent der Internetnutzung werden Smartphones und Tablets genutzt?
Für wie viel Prozent der Internetnutzung werden Smartphones und Tablets genutzt?
Im September 2012 überstieg die mobile Internetnutzung erstmals die 10 Prozent-Marke, d.h. für 10% der Internetnutzung werden Smartphones und Tablets genutzt
Was macht der Befehl mit dem HTML-Link
<a href="tel:0351123456789">0351-123456789</a> ?
<a href="tel:0351123456789">0351-123456789</a> ?
= HTML-Befehl: Telefonieren
Was macht der Befehl mit dem HTML-Link
<a href="sms:0351123456789">Schick eine SMS</a> ?
<a href="sms:0351123456789">Schick eine SMS</a> ?
HTML-Befehl: SMS verschicken
Mobile
Was sind MIME-TYPES?
Was sind MIME-TYPES?
(Multipurpose Internet Mail Extension)
- wurde als Standard zur Erweiterung des E-Mail-Protokolls entwickelt.
- ermöglichen Übertragung von beliebigen Dateiformaten z.B. im Anhang einer E-Mail
- Deklaration von Dateiinhalten
Mobile
Welche Mobilen Browser gibt es?
Welche Mobilen Browser gibt es?
- jB5: Symbian, Windows Mobile
- Polaris: Samsug, LG
- Android (Webkit): Android Geräte
- WebOS (Webkit): Palm
- Blackberry: Blackberry, Webkit ist angekündigt
- Blazor: Palm
- Firefox for Mobile: für Maemo, Windows Mobile und Android
- Internet Explorer Mobile: Diverse Hersteller mit Windows Mobile
- Opera Mobile: Verschiedene Hersteller
- Opera Mini (läuft auf praktisch allen Plattformen) Ruft nicht direkt Website auf, sondern kontaktiert den Opera Mini Server, welcher die Seite komprimiert und vor-rendert
- Nokia Series 40 (Webkit): Nokia S40; Nokia Series 60 (Webkit): S60
- Safari (Webkit): iPhone, iPod, iPad, iPad Mini
- Skyfire Mobile (Gecko): Verschiedene Hersteller
- Dolphin Browser HD (Android)
- Mercury Browser (iPhone, Android) xScope Browser (Android)
Mobile
Was ist Rendering-Engine?
Was ist Rendering-Engine?
- Überbegriff für einen Layout-Engine
- Ein "Übersetzungstool"
- Macht aus dem HTML-Code ein Bild
Mobile
Welche Rendering-Engines gibt es?
Welche Rendering-Engines gibt es?
- Gecko (von Mozilla Firefox, wird sich ev. ändern: Mozilla (und Samsung) Servo)
- Presto (von Opera)
- Trident (von Internet Explorer)
- WebKit (von Safari und Chrome(?)
- Blink (neue Rendering Engine von Google (Chrome) und Opera)
-> WebKit = aktueller Standard Browser!
Mobile
Welche mobilen Bildschirmauflösungen gibt es?
Welche mobilen Bildschirmauflösungen gibt es?
| iPhone 4 und iPhone 4S (326 ppi) | 640 x 960 px |
| iPhone 5/5s/5c (326 ppi) | 640 x 1136 px |
| iPad 3. und 4. Generation (264 ppi) | 2048×1536 px |
Mobile
Responsive: Was machen die Optionen "cover" und "contain"?
Responsive: Was machen die Optionen "cover" und "contain"?
Cover:
vergrössert das Hintergrundbild proportional, bis die ganze Fläche bedeckt ist. Die Grafik ist nur teilweise sichtbar.
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%)
vergrössert das Hintergrundbild proportional, bis die ganze Fläche bedeckt ist. Die Grafik ist nur teilweise sichtbar.
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
Welche mobilen HTML Standards gibt es?
Welche mobilen HTML Standards gibt es?
- XHTML: alter Standard für das Internet und Mobiles
- HTML 5: Standard für das Internet und Mobiles
- XHTMLTM Basic 1.1 und das ältere XHTML-MP (Mobile Profile)
-> Wir verwenden HTML 5
Mobile
Welche mobilen CSS Standards gibt es?
Welche mobilen CSS Standards gibt es?
- Wireless CSS (mit XHTML-MP), Open Mobile Alliance oder OMA
- CSS Mobile Profile (mit XHTML-MP), W3C CSS Mobile
-> Wir verwenden CSS2 und CSS3
Mobile
Was ist ein Viewport?
Was ist ein Viewport?
Desktop
Smartphone
- Viewport ist der sichtbare Teil einer Website
- Viewports erlauben das Beeinflussen der Bildschirmdarstellung
- User vergrössert/verkleinert den Viewport durch Änderung des Browserfensters
- Unterschiedliche Bedienungen auf Desktop (Maus) und Smartphone (Gesten): Viewport ist für diese Medien verschieden
Smartphone
- 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
Mobile
Was ist der Unterschied zwischen einer Rendering-Engine und einem Browser?
Was ist der Unterschied zwischen einer Rendering-Engine und einem Browser?
Der Browser ist das Ausgabemedium, die Rendering-Engine die Übersetzung.
Die Rendering-Engine ist Bestandteil eines Browsers
(für Übersetzung des Designs, welches im HTML mittels CSS angegeben wird, bsp. WebKit-> Safari/Chrome, Gecko->Firefox)
Die Rendering-Engine ist Bestandteil eines Browsers
(für Übersetzung des Designs, welches im HTML mittels CSS angegeben wird, bsp. WebKit-> Safari/Chrome, Gecko->Firefox)
Mobile
Welches sind Standard Viewports?
Welches 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
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
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
Strategien für Mobile Programmierung
Welche 3 Strategien gibt es, um einen Inhalt auf Mobiles zu bringen? Beschreiben Sie Strategie 1.
Welche 3 Strategien gibt es, um einen Inhalt auf Mobiles zu bringen? Beschreiben Sie Strategie 1.
1. Strategie: Entwicklung auf Basis Betriebssystem: Native Apps
2. Strategie: Entwicklung mit HTML & CSS: WebApp
3. Strategie: Hybride App
1. Strategie: Entwicklung auf Basis Betriebssystem: Native Apps
Vorteil
Nachteil
2. Strategie: Entwicklung mit HTML & CSS: WebApp
3. Strategie: Hybride App
1. Strategie: 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.
- Android Mobile Applikationen basieren auf Java
- iPhones basieren auf objektorientiertem C
- Windows mobile Geräte basieren auf der .Net Technologie
Vorteil
- Applikationen können für eine spezifische Plattform entwickelt werden und nutzen alle deren technischen Möglichkeiten aus.
Nachteil
- 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 Lernaufwand
- Der Lernaufwand ist gewaltig.
Strategien für Mobile Programmierung
Beschreiben Sie Strategie 2 (Inhalt auf Mobiles bringen)
Beschreiben Sie Strategie 2 (Inhalt auf Mobiles bringen)
2. Strategie: Entwicklung mit HTML & CSS: WebApp
Vorteil
Nachteil
- 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.
Vorteil
- Eine einzige Entwicklungsumgebung reicht aus, um für alle Plattformen zu programmieren.
Nachteil
- 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.
Strategien für Mobile Programmierung
Beschreiben Sie Strategie 3 (Inhalt auf Mobiles bringen)
Beschreiben Sie Strategie 3 (Inhalt auf Mobiles bringen)
3. Strategie: Hybride App
Beispiel Flash CS 6+ und Actionscript 3
Es ist möglich, von Flash CS 6+ aus richtige Apps für Android und iPhone zu erzeugen:
Vorteil
Nachteil
- 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
Beispiel Flash CS 6+ und Actionscript 3
Es ist möglich, von Flash CS 6+ aus richtige Apps für Android und iPhone zu erzeugen:
Vorteil
- Eine einzige Entwicklungsumgebung reicht aus, um für alle Plattformen zu programmieren.
Nachteil
- Es ist oft nicht möglich, auf gerätespezifische Funktionen (zum Beispiel eingebaute Kamera) zuzugreifen.
- Performance oft niedrig Lernaufwand
- Der Lernaufwand ist hoch.
Mobile
Was sind Kennzeichen nativer Apps: App oder Web-App?
Was sind 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.
Strategien für HTML-Programmierung (Mobile)
Welche Strategien gibt es, um einen Inhalt auf Mobiles zu bringen? Beschreiben Sie Strategie 1
Welche Strategien gibt es, um einen Inhalt auf Mobiles zu bringen? Beschreiben Sie Strategie 1
1. Strategie: Keine Änderungen vornehmen, nur Optimierungen
2. Strategie: Separate mobile Webseiten
3. Strategie: Progressive Enhancement und Feature Detection
4. Strategie: Mobile WebApps
1. Strategie: Keine Änderungen vornehmen, nur Optimierungen
Mögliche Optimierungen:
Kritik:
2. Strategie: Separate mobile Webseiten
3. Strategie: Progressive Enhancement und Feature Detection
4. Strategie: Mobile WebApps
1. Strategie: Keine Änderungen vornehmen, 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
Strategien für HTML-Programmierung (Mobile)
Beschreiben Sie Strategie 2
Beschreiben Sie Strategie 2
2. Strategie: Separate mobile Webseiten
Kennzeichen:
Fragen:
Kritik:
- 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)
Fragen:
- Wie wird bestimmt, was der Nutzer der mobilen Version braucht? Oft gibt es Links, wie «View Full Site» oder «Desktop Site»
- Wie erkenne ich ein mobiles Gerät? Über den User Agent (http://detectmobilebrowsers.com/)
Kritik:
- Nicht zu empfehlen. Aufwand, um Inhalt und Gestaltung doppelt zu warten ist zu hoch.
- Die Detection mit dem User Agent ist fehleranfällig
Strategien für HTML-Programmierung (Mobile)
Beschreiben Sie Strategie 3
Beschreiben Sie Strategie 3
3. Strategie: Progressive Enhancement und Feature Detection
Beispiel:
Vorgehen:
- 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)
Strategien für HTML-Programmierung (Mobile)
Beschreiben Sie Strategie 4
Beschreiben Sie Strategie 4
4. Strategie: Mobile WebApps
- Browser App, welche mit HTML, CSS und Javascript funktioniert. * Unterschied zu «normaler» Website ist fliessend, Diskussion
Mobile
Welche Möglichkeiten gibt es für mobile HTML-Seiten?
Welche Möglichkeiten gibt es für mobile HTML-Seiten?
- Optimierungen der bestehenden Desktop-Seite
- Separate mobile Webseiten
- Progressive Enhancement, Feature Detection und Responsive Web Design RWD
- Mobile WebApps
Mobile
Adaptiv oder responsive? Unterschiede?
Adaptiv oder responsive? Unterschiede?
Responsive = reaktionsfähig
adaptive = anpassungsfähig
Adaptives Design
Responsives Design
Praxis
Vorgehen:
% für Container benutzen
-> Die Breiten von div-Tags werden nicht in px, sondern in % angegeben
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
Vorgehen:
% für Container benutzen
-> Die Breiten von div-Tags werden nicht in px, sondern in % angegeben
Mobile
Was bedeutet em oder % bei Responsive?
Was bedeutet em oder % bei Responsive?
Schriftgrösse!
em: 1.5em = 24pixel, weil Standardgrösse 1em = 16pixel ist
(muss im CSS angegeben werden!)
-> So bleibt das Verhältnis auf dem Bildschirm immer gleich
em: 1.5em = 24pixel, weil Standardgrösse 1em = 16pixel ist
(muss im CSS angegeben werden!)
-> So bleibt das Verhältnis auf dem Bildschirm immer gleich
Mobile
Responsive Bilder und Videos. Formate?
Responsive Bilder und Videos. Formate?
- Nur JPG, PNG oder GIF verwenden
- JPG immer optimieren, z.B. mit jpegmini
- PNG optimieren mit kraken.io
#bildspalte img
- max-width: 195px; width: 50%; /* 195/390 = 50% */ height: auto;
Bilder ohne width und height im <img>-Tag
img {width: 100%;
Bilder mit width und height im <img>-Tag
img {
width: 100%;
height: auto;
Mobile
Welche Lösungsstrategien gibt es beim Skalieren von Bildern?
Welche Lösungsstrategien gibt es beim 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
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
Was geschieht bei diesem Code?
Daten in eine Tabelle eingeben
-> Daten in HTML in Datenbanktabelle eingeben mit PHP
(HTML -> Datenbank)
-> Daten in HTML in Datenbanktabelle eingeben mit PHP
(HTML -> Datenbank)
Was geschieht bei diesem Code?
Daten in mehrere Tabellen eingeben
Relation zwischen tab1 und tab2
Relation zwischen tab1 und tab2
Was macht mysqli_real_escape_string
versieht spezielle Zeichen (z.B. : \x00, \n, \r, \, ', " und \x1a) mit einem Backslash ('\') (wegen SQL- Injection)
Dateinamen im Internet
Was sind erlaubte Zeichen?
Was sind erlaubte Zeichen?
- Buchstaben a bis z oder A bis Z
- Zahlen von 0 bis 9
- Unterstrich _
Dateinamen im Internet
Was sind verbotene Zeichen?
Was sind verbotene Zeichen?
- Europäische Sonderzeichen (z.B. ä, ö, ü, é, à, è, ç etc.)
- Leerzeichen
- Sonderzeichen (z.B. Punkt, ?, $ etc.)
Dateinamen im Internet
Was muss bei Gross-/Kleinschreibung beachtet werden?
Was muss bei Gross-/Kleinschreibung beachtet werden?
- Windows und Macintosh unterscheiden nicht zwischen Gross- und Kleinschreibung in Dateien. Das heisst, die Dateien «produkte.htm» und «Produkte.htm» sind identisch für Windows und Mac.
- Linux und Unix unterscheiden zwischen Gross- und Kleinschreibung. Das heisst, die Dateien «produkte.htm» und «Produkte.htm» sind für Linux und Unix nicht identisch.
- Dies ist in der Praxis wichtig, weil sehr viele Provider mit Linux- und Unix-Webservern arbeiten.
- Vorschlag: Wir vergeben wir für Ordner- und Dateinamen und CSS- Definitionen nach Möglichkeit nur Kleinbuchstaben.
- Verbotener Dateiname: Über uns.html
PHP
Wie heissen die Dateien?
Wie heissen die Dateien?
PHP-Dateien müssen mit der Dateierweiterung *.php in einem Unterordner von htdocs abgelegt werden.
PHP
Wo steht der Code?
Wo steht der 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>
<html><head><title>PHP</title></head>
<body>
<?php echo "Hallo Welt!"; ?>
</body>
</html>
Was bedeutet
do { in einer PHP Datei?
do { in einer PHP Datei?
Zeige mir ALLE Inhalte der Felder
mit limit (bsp. 0.4) = nur die ersten 4 Inhalte aus den Feldern
mit limit (bsp. 0.4) = nur die ersten 4 Inhalte aus den Feldern
PHP
Was ist am Zeilenende zu beachten?
Was ist am Zeilenende zu beachten?
Jede Zeile muss mit einem Strichpunkt abgeschlossen werden!
echo "Hallo Welt!";
echo "Hallo Welt!";
PHP
Was ist ein echo Befehl?
Was ist ein echo Befehl?
Dieser Befehl zeigt Inhalte an.
-> PHP Codes werden grundsätzlich nicht im Quellcode angezeigt. Steht der echo-Befehl (Die Ausgabe auf dem Bildschirm) vor dem Inhalt, wird der Inhalt angezeigt.
Echo passiert nur im <body> Teil.
Ausgabe mit HTML-Tags
Der echo() Befehl gibt Informationen aus. Es dürfen auch HTML- Befehle verwendet werden. echo "Hallo <strong>kluge</strong> Welt!";
Ausgabe mit HTML-Attributen
echo 'Hallo <span class="rot">kluge</span> Welt!';
-> PHP Codes werden grundsätzlich nicht im Quellcode angezeigt. Steht der echo-Befehl (Die Ausgabe auf dem Bildschirm) vor dem Inhalt, wird der Inhalt angezeigt.
Echo passiert nur im <body> Teil.
Ausgabe mit HTML-Tags
Der echo() Befehl gibt Informationen aus. Es dürfen auch HTML- Befehle verwendet werden. echo "Hallo <strong>kluge</strong> Welt!";
Ausgabe mit HTML-Attributen
echo 'Hallo <span class="rot">kluge</span> Welt!';
PHP
Was sind Variablen?
Was sind Variablen?
- Variablen sind Platzhalter, vergleichbar mit Schubladen.
- Variablennamen dürfen nur aus den Buchstaben a bis z, Ziffern und dem Unterstrichstrich (_) bestehen.
- Unterscheidung zwischen Gross- und Kleinbuchstaben
- Definieren von Variablen (Name und Inhalt festlegen)
- Variablen werden mit dem $-Zeichen definiert: $vorname = "Martin"; echo $vorname;
Datei- & Feld- & Tabellennamen im Internet
Was sind erlaubte Zeichen?
Was sind erlaubte Zeichen?
Buchstaben a - z oder A - Z; Zahlen von 0 bis 9; Unterstrich
Datei- & Feld- & Tabellennamen im Internet
Was sind verbotene Zeichen?
Was sind verbotene Zeichen?
Europäische Sonderzeichen, Leerzeichen, Sonderzeichen
Wie sieht die Verbindungsdatei zur Datenbank aus?
Host = Server
User = Ich
Pass = Passwort
Data = Datenbank
Was wird angezeigt?
$sql = "SELECT * FROM ".$tbl." ORDER BY name ASC LIMIT 0, 4;";
$sql = "SELECT * FROM ".$tbl." ORDER BY name ASC LIMIT 0, 4;";
Es werden die ersten vier Datensätze aufgelistet
Hol die ersten vier Datensätze aus der Tabelle, sortiert bei Name (Feld Name)
Hol die ersten vier Datensätze aus der Tabelle, sortiert bei Name (Feld Name)
PHP
Wie sehen der Start und das Ende von PHP aus?
Wie sehen der Start und das Ende von PHP aus?
Start:
<?php
Ende:
?>
Alles was zwischen Start und Ende steht, ist im Quelltext nicht sichtbar!
<?php
Ende:
?>
Alles was zwischen Start und Ende steht, ist im Quelltext nicht sichtbar!
Datenbank
Welchen Daten oder Feldtyp verwenden Sie für Schweizer Postleitzahlen (mit wenig Speichernutzung)
A: varchar
B: mediumtext
C: tinyint
D: int
Welchen Daten oder Feldtyp verwenden Sie für Schweizer Postleitzahlen (mit wenig Speichernutzung)
A: varchar
B: mediumtext
C: tinyint
D: int
C: tinyint
Warum? Darum!
..Weil es weniger Speicher benötigt! Pro Datensatz wird 1byte benötigt und bei int werden pro Datensatz 4byte benötigt.
varchar = zahlen und buchstaben
mediumtext = Zahlen und Buchstaben aber viel mehr Platz für Zeichen
long text = unendlich unendlich viiiel Platz
int = ganze zahlen
tinyint = ganze zahlen von -128 bis +127
Warum? Darum!
..Weil es weniger Speicher benötigt! Pro Datensatz wird 1byte benötigt und bei int werden pro Datensatz 4byte benötigt.
varchar = zahlen und buchstaben
- Bsp. für Name, Vorname, PW, E-Mail, Titel (begrenzen)
mediumtext = Zahlen und Buchstaben aber viel mehr Platz für Zeichen
- Längere Texte
long text = unendlich unendlich viiiel Platz
- Ich schreibe einen Roman
int = ganze zahlen
- Alle ganzen Zahlen aber KEINE MINUS ZAHLEN!
tinyint = ganze zahlen von -128 bis +127
- gibt 255 zahlen aber hier MIT Minuszahlen
Datenbank
Was macht auto_increment?
Was macht auto_increment?
Zählt pro Datensatz automatisch nach oben...
Bsp.
Karin = ID 1
Bö = ID 2
usw..
Bsp.
Karin = ID 1
Bö = ID 2
usw..
Datenbank
Wo speichern Sie Ihre Dateien (index.php usw.) ab, wenn Sie mit XAMPP lokal arbeiten?
Wo speichern Sie Ihre Dateien (index.php usw.) ab, wenn Sie mit XAMPP lokal arbeiten?
Die Dateien MÜSSEN im Ordner "XAMPP", Unterordner "htdocs" abgespeichert werden! Sonst können die Dateien lokal nicht gebraucht werden!
Aufgeruft werden die Dateien mit http:localhost (XAMPP öffnen)
Habe ich ein Projekt 1, dann: http:localhost/projekt1
Aufgeruft werden die Dateien mit http:localhost (XAMPP öffnen)
Habe ich ein Projekt 1, dann: http:localhost/projekt1
Mobile
Verbreitetstes Mobile Betriebssystem Schweiz? Europa? Asien? Nordamerika?
Verbreitetstes Mobile Betriebssystem Schweiz? Europa? Asien? Nordamerika?
Schweiz: iOS
Europa: beide (Android 50%, iOs 40%)
Asien: Android
Nordamerika: beide (Android 50%, iOs 40%)
Europa: beide (Android 50%, iOs 40%)
Asien: Android
Nordamerika: beide (Android 50%, iOs 40%)
Mobile
Was ist speziell am Browser Opera Mini?
Was ist speziell am Browser Opera Mini?
Ruft nicht direkt Website auf, sondern kontaktiert den Opera Mini Server, welcher die Seite komprimiert und vor-rendert
Mobile
Was ist speziell am Browser Skyfire Mobile?
Was ist speziell am Browser Skyfire Mobile?
schickt Flash Video an Server, welcher sie als H.264 kodiert und darstellt. Qualität passend zur Verbindungs-geschwindigkeit. Geht nicht für Animationen & Interaktivität
Mobile
Was für Standards bei der Gestaltung von Websites für mobile Geräte gibt es?
Was für Standards bei der Gestaltung von Websites für mobile Geräte gibt es?
- Styleguides
- WebKit Standard Browser
- (X)HTML 5
- CSS3
- Viewports
- Meta Tags
- WebKit Standard Browser
- (X)HTML 5
- CSS3
- Viewports
- Meta Tags
Mobile
Wie erkenne ich WebKit-Browser?
Wie erkenne ich WebKit-Browser?
Den CSS-Befehlen wird -webkit vorangestellt
h1 {
width: 100px; -webkit-transition: width 6s;
}
h1 {
width: 100px; -webkit-transition: width 6s;
}
Mobile
Die wichtigsten Standard Viewports?
Die wichtigsten Standard Viewports?
- Safari iPhone: 980px
- Opera Mobile: 850px
- Android WebKit: 800px
- Firefox Mobile: 800px
- Windows Phone: 1024px
- Opera Mobile: 850px
- Android WebKit: 800px
- Firefox Mobile: 800px
- Windows Phone: 1024px
Mobile
Für was sind Viewports da?
Für was sind Viewports da?
Erlauben das Beeinflussen der Bildschirmdarstellung
Bsp.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,user-scalable=yes" />
Bsp.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,user-scalable=yes" />
Mobile
Welches sind die 3 Strategien, um Inhalt auf Mobiles zu bringen?
Welches sind die 3 Strategien, um Inhalt auf Mobiles zu bringen?
1. Strategie: Entwicklung auf Basis Betriebssystem: Native Apps
2. Strategie: Entwicklung mit HTML & CSS: WebApp
3. Strategie: Hybride App
2. Strategie: Entwicklung mit HTML & CSS: WebApp
3. Strategie: Hybride App
Mobile
Welche Strategien gibt es für mobile HTML-Seiten?
Welche Strategien gibt es für mobile HTML-Seiten?
Optimierungen der bestehenden Desktop-Seite
- Separate mobile Webseiten
- Progressive Enhancement, Feature Detection und Responsive Web Design RWD
- Mobile WebApps
- Separate mobile Webseiten
- Progressive Enhancement, Feature Detection und Responsive Web Design RWD
- Mobile WebApps
Mobile
Welche Lösungen gibt es für responsive Web Design auf Basis HTML5, CSS und Javascript?
Welche Lösungen gibt es für responsive Web Design auf Basis HTML5, CSS und Javascript?
- % für Container benutzen
- em für Schriftgrad
- Breakpoints setzen mit Media Queries, bestimmt durch Layout Major: Layoutänderungen; Minor: Optimierungen
- em für Schriftgrad
- Breakpoints setzen mit Media Queries, bestimmt durch Layout Major: Layoutänderungen; Minor: Optimierungen
Mobile
Wie werden Breakpoints gesetzt?
Wie werden Breakpoints gesetzt?
Die Breakpoints werden mit den Media Queries gesetzt
Bsp.
@media screen and (max-width:850px) {
.col1 {width: 55%;}
.col2 {width: 35%;}
.col3 {float: none;}
}
Bsp.
@media screen and (max-width:850px) {
.col1 {width: 55%;}
.col2 {width: 35%;}
.col3 {float: none;}
}
Mobile
Was muss ich bei HTML-Programmierung für Mobiles berücksichtigen?
Was muss ich bei HTML-Programmierung für Mobiles berücksichtigen?
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
- 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
Wie greife ich auf Kamera / Mic zu?
Wie greife ich auf Kamera / Mic zu?
Kamera: <input type="file" accept="image/*;capture=camera" /> Video: <input type="file" accept="video/*;capture=camcorder" /> Mic: <input type="file" accept="audio/*;capture=microphone" />
Mobile
Unterschied User Agent und Feature Detection?
Unterschied User Agent und Feature Detection?
- Idee: Nicht auf User Agent zugreifen, sondern überprüfen, ob Funktion zur Verfügung steht.
- Beispiel: Man kann mit Javascript auf die Funktionalität testen und herausfinden, was das Gerät unterstützt.
- Beispiel: Man kann mit Javascript auf die Funktionalität testen und herausfinden, was das Gerät unterstützt.
Mobile
Wie kann ich die Performance verbessern?
Wie kann ich die Performance verbessern?
- 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.
- Icon Fonts benutzen
- Bei Social Media Diensten richtige Farben verwenden
- CSS Sprites
- Binäre Bilder
- Die UTF-8 Zeichensätze beinhalten auch Symbole. Diese sollten an Stelle von Grafiken verwendet werden.
- Icon Fonts benutzen
- Bei Social Media Diensten richtige Farben verwenden
- CSS Sprites
- Binäre Bilder
Mobile
Was sind CSS Sprites?
Was sind CSS Sprites?
Mehrere Hintergrundbilder zu einem einzigen Bild zusammenfassen
Vorteil:
Sprites: 1 Bild, wird mit CSS verschoben => Server-Zugriff verringern.
Vorteil:
Sprites: 1 Bild, wird mit CSS verschoben => Server-Zugriff verringern.
Mobile
Was sind binäre Bilder?
Was sind binäre Bilder?
Kleinere Bilder direkt ins HTML einbinden.
Vorteil:
Bild in CSS binär einbetten => nur 1 Serverzugriff
Vorteil:
Bild in CSS binär einbetten => nur 1 Serverzugriff
Mobile
Warum müssen Bilder für Mobiles in verschiedenen Auflösungen vorliegen
Warum müssen Bilder für Mobiles in verschiedenen Auflösungen vorliegen
Wegen den verschiedenen Bildschirmauflösungen und Retina-Bildschirmen
Mobile
Was ist Javascript?
Was ist Javascript?
- Javascript = Programmiersprache
- in den Browsern integriert, läuft im Browser ab
=> Javascript ist eine Programmiersprache für die Erstellung interaktiver und/oder dynamischer Webseiten
Anwendungs-Bsp.
- 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
- in den Browsern integriert, läuft im Browser ab
=> Javascript ist eine Programmiersprache für die Erstellung interaktiver und/oder dynamischer Webseiten
Anwendungs-Bsp.
- 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
Was ist mit Javascript NICHT möglich?
Was ist mit Javascript NICHT möglich?
- Zugriff auf Datenbanken
- Zugriff auf die Festplatte
- Zugriff auf irgendwelche Hardwarekomponenten
- Informationen mit anderen Anwendern austauschen
- Zugriff auf die Festplatte
- Zugriff auf irgendwelche Hardwarekomponenten
- Informationen mit anderen Anwendern austauschen
Mobile
Was ist jQuery?
Was ist jQuery?
jQuery ist ein Javascript-Framework, welches die Javascript-Befehle massiv vereinfacht.
Anwendungs-Bsp.
- 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, ...)
Anwendungs-Bsp.
- 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, ...)
Mobile
Definition DOM?
Definition DOM?
- Document Object Model
- Spezifikation einer Schnittstelle für den Zugriff auf HTML- oder XML-Dokumente
- Mit dem DOM wird ein Dokument, dessen Elemente und die Beziehung dieser untereinander festgelegt
- Spezifikation einer Schnittstelle für den Zugriff auf HTML- oder XML-Dokumente
- Mit dem DOM wird ein Dokument, dessen Elemente und die Beziehung dieser untereinander festgelegt
Mobile
Was macht das Attribut data-role?
Was macht das Attribut data-role?
- Es können einzelne Seiten im selben Dokument erstellt werden
- Struktur festlegen (z.B. page, header, footer, content etc.)
Bsp.
<div data-role="page" id="home"> <! Inhalt Home > </div> <div data-role="page" id="produkte"> <! Inhalt Produkte > </div>
- Struktur festlegen (z.B. page, header, footer, content etc.)
Bsp.
<div data-role="page" id="home"> <! Inhalt Home > </div> <div data-role="page" id="produkte"> <! Inhalt Produkte > </div>
Mobile
was macht das Attribut data-theme?
was macht das Attribut data-theme?
Das HTML5 Attribut data-theme legt das Aussehen fest
data-theme mit den Werten a bis e sind vorgefertigte Formatierungen (Themes)
Bsp.
<div data-theme=”a” data-role=”header”> <h3>Meine Website</h3> </div>
data-theme mit den Werten a bis e sind vorgefertigte Formatierungen (Themes)
Bsp.
<div data-theme=”a” data-role=”header”> <h3>Meine Website</h3> </div>
Mobile
Wie können Gesten eingebaut werden?
Wie können Gesten eingebaut werden?
- Javascript (touchstart, touchmove, touchend)
- jQueryMobile (swipe, swipeleft, swiperight, orientation, tap, taphold)
- jQueryMobile (swipe, swipeleft, swiperight, orientation, tap, taphold)
Mobile
Prinzip von hybriden Apps?
Prinzip von hybriden Apps?
Werden mit einem Framework auf Basis HTML, CSS und Javascript erstellt und vom Framework als native Apps ausgegeben.
HTML, Flash, Javascript, CSS
Grundsätzliches?
Grundsätzliches?
- 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.
- 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.
Was ist der Vorteil von AJAX?
Diese Technologie erlaubt es, nur einen Teil der HTML-Seite neu zu laden.
PHP, MySQL, SQL, CMS
Grundsätzliches?
Grundsätzliches?
PHP ist eine Programmiersprache welche auf dem Webserver abläuft.
MySQL ist ein Datenbankverwaltungssystem, welches auf dem Webserver installiert ist.
MySQL ist keine Datenbank. Es ist eine Software, um Datenbanken anzulegen und zu verwalten.
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.
MySQL ist ein Datenbankverwaltungssystem, welches auf dem Webserver installiert ist.
MySQL ist keine Datenbank. Es ist eine Software, um Datenbanken anzulegen und zu verwalten.
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.
Wie ist eine Datenbanktabelle aufgebaut
Jede Tabelle besteht aus Feldern, wobei ein Feld ein Schlüsselfeld (oft auch als Primärschlüssel bezeichnet) ist.
Das Schlüsselfeld hilft, Datensätze eindeutig zu identifizieren.
Mehrere Zeilen werden als Datensätze bezeichnet.
Das Schlüsselfeld hilft, Datensätze eindeutig zu identifizieren.
Mehrere Zeilen werden als Datensätze bezeichnet.
Was kann ich einem Datenbankfeld alles zuordnen?
- Feldname
- Datentyp (VARCHAR, INT, FLOAT, DATETIME usw.)
- Feldlänge (VARCHAR(30))
- Zeichensatz
- Attribut (auto_increment, unsigned)
- leere Einträge (NULL)
- Primärschlüssel
- Datentyp (VARCHAR, INT, FLOAT, DATETIME usw.)
- Feldlänge (VARCHAR(30))
- Zeichensatz
- Attribut (auto_increment, unsigned)
- leere Einträge (NULL)
- Primärschlüssel
Datenbank
Was macht das Attribut unsigned?
Was macht das Attribut unsigned?
Mit dem Attribut unsigned werden Zahlen von 0 bis +255 unterstützt
Datenbank
Welche Tabellentypen gibt es?
Welche Tabellentypen gibt es?
- InnoDB: transaktionssichere Tabellen, Sperrung auf Zeilen-Ebene.
- MyISAM speichert Daten schnell, bietet Volltext-Suchfähigkeiten
- MyISAM speichert Daten schnell, bietet Volltext-Suchfähigkeiten
Datenbank
Wie heissen die Begriffe vom ERM in der Datenbank?
Wie heissen die Begriffe vom ERM in der Datenbank?
- Die Entität entspricht dem Tabellennamen
- Die Attribute entsprechen den Feldern
- Das Datenmodell beschreibt in Form eines Diagramms die Struktur der Datenbank
- Die Attribute entsprechen den Feldern
- Das Datenmodell beschreibt in Form eines Diagramms die Struktur der Datenbank
Was ist 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.
Was kann man mit PHP machen?
- Berechnungen auf dem Webserver durchführen, ohne dass die Formeln ersichtlich sind. Grund: PHP liefert HTML-Dateien nur mit 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.
- 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.
Was macht folgender Befehl?
<?php
header("Location: http://www.timerate.ch");
?>
<html>
<?php
header("Location: http://www.timerate.ch");
?>
<html>
Auf andere URL umleiten
Was macht folgender Befehl?
$passwort = md5($_POST['passwort']);
$passwort = md5($_POST['passwort']);
Passwort verschlüsseln
Der Befehl md5(String) verschlüsselt einen String in eine Zeichenfolge von 32 Zeichen
Der Befehl md5(String) verschlüsselt einen String in eine Zeichenfolge von 32 Zeichen
Kartensatzinfo:
Autor: Karin Zeller
Oberthema: WebApp FS14
Thema: Web Applikationen FS14
Schule / Uni: HTW
Ort: Chur
Veröffentlicht: 20.06.2014
Schlagwörter Karten:
Alle Karten (103)
keine Schlagwörter
