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)
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 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
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
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
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
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)
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
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;
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
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;
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
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
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 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 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 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
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>
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.
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.
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.
Flashcard set info:
Author: Karin Zeller
Main topic: WebApp FS14
Topic: Web Applikationen FS14
School / Univ.: HTW
City: Chur
Published: 20.06.2014
Card tags:
All cards (103)
no tags
