CSS3 und HTML 5 für Mobilphone, Tablets (Geräte ohne Maus) ========================================================== Übersicht ------------ Zu der Klasse der Wegwerfgeräte, die Anbieter wie Google, Apple, Microsoft den Kunden weltweit und massiv am Markt offerieren, gehören auch alle Geräte, die u.a. Mobilfunk abdecken, oder auch mit geringen Anschaffungskosten den Zugang zur Internetwelt ermöglichen. Der Anbieter Microsoft verkoppelt inzwischen solche Geräte mit dem Betriebssystem Windows, das auf vielen Gerätetypen lauffähig sein soll UND mit den u.a. Software wie MS Office auch dann verbreitet werden soll, wenn das Gerät alles andere als sinnvolle Ressourcen verfügbar hat. Natürlich sind High-End-Geräte zu exorbitanten Preisen käuflich, obwohl erst diese Geräte die im Ansatz mögliche sinnvolle Nutzung der Wegwerfgeräte erst erlauben. - Mit anderen Worten: Die Klasse der Wegwerfgeräte ist pure Steinzeit. Wegwerfgeräteanbieter lieben es systematisch, Ressourcen zu vergeuden, z.B. Akkus fest einzubauen, oder die Hardware systemisch so zu ändern, dass ein Upgrade nicht mehr möglich ist. Als Trittbrettfahrer für die Welt der Wegwerfgeräte haben sich die Netzwerkanbieter etabliert, die exorbitanten Kosten mit den exorbitanten Preisen der High-End-Geräte paaren. Natürlich sind preiswerte Angebote an Netzwerkzugang und Gerätetypen möglich, die u.a. schon mal einen solchen Datendurchsatz anbieten, der an die Zeiten der Modemwelt erinnert. Was für den Netzwerkzugang ganz typisch ist: Teilung der Breitbandbereiche durch mehrere Nutzer, die also eine gute Datenrate als maximale oder theoretische verkauft bekommen, aber tatsächlich sind über datentransferhungrige Mitbenutzter in der gemeinsamen Funkzelle ärgern. Eine Zugansversorgung wie bei ADSL (DSL) ist ja bei Funkzugang mangels Kabel eben nicht möglich. Allen Wegwerfgeräten ist die Eigenschaft gemeinsam: Diese Geräteklasse besitzt keine Maus, sondern hat eine andere Steuerung wie auch immer implementiert. Sehr weit verbreitet ist die Berührungssteuerung mit oder ohne Wischen - alles per Hände. Im öffentlichen Bereich gibt es schon lange die Möglichkeit, per Hand z.B. den Geldautomaten zu bedienen, ohne zu wissen, wo der Vorgänger, der den Berührungsbildschirm genutzt hat, mit seinen Fingern davor war - ob in der Nase oder im Hintern. - Auch Wegwerfgeräte sind also ideale Kandidaten für Schmierinfektionen. Die Geräteeigenschaft eines Wegwerfgerätes hat direkten Einfluss auf die Nutzung von HTML-5 und CSS im Webdesign, das in seinen Ursprüngen zu Wegwerfgeräten komplett inkompatibel ist. Wegen Wegfall der Maus und oder der Tastatur und wegen der Vielfalt der Bildschirme der Wegwerfgeräte sind die alten Standards natürlich nicht sinnlos, denn es gibt ja -zwar abnehmend - noch reichlich Desktop-Geräte wie PC. Aber: Das Webdesign wurde daher zwar nicht modernisiert, auch nicht modular erweitert, sondern analog zur Kleinstaaterei einfach so umgebogen, dass zum jeweiligen Stand der Wegwerfgeräte und deren Betriebssystemarten eine scheinbar übergreifende Systematik eingebaut wurde. Dauerhaft gelingen kann solches Chaos natürlich nur dann, wenn die Betriebssysteme sich an Java (Sun bzw. Oracle) orientieren: Adobe verkauft mit Flach eine Java-Abartart. SAP hat seit zig Jahrzehnten Interpreter am Werkeln. Google zofft sich u.a. mit Java-Hersteller wegen angeblich geklauten Teilen des Android-Betriebssystems. Apple baut massiv, mit viel Geld und viel Arbeit in Billigländern wie China sein Portfolio aus und bringt auch massiv Wegwerfgeräte auf den Markt. Mit anderen Worten: Die Systematik der Wegwerfgeräte hat das Webdesign regelrecht zersetzt. Da Geräte und Betriebssystem benutz werden, quasi Geld zu drucken, wenn Kunden neue Hardware deswegen kaufen, weil ein Betriebssystem z.B. wegen eklatanter Sicherheitslücken als wertlos gelten muss, oder weil die alte Hardware so austauschbare Module ausweist, mit denen man neue Features nicht realisieren kann. Als Analog hält das Betriebssystem Microsoft Windows 10 her: Microsoft hat den großen Schnitt versucht, denn alle anderen Vorgänger von Windows kranken systematisch an Sicherheitslücken - das neue Windows vermutlich aber auch. Bekanntlich verkauft Microsoft Betriebssystemlücken über Generationen von Windows weiter. - Microsoft will eben massiv Geld der Kunden abzocken, quasi Geld drucken. Wenn also das zersetzte Webdesign herhalten muss, die Wegwerfgeräte UND andere Klassen wie Desktop-PC odert Laptops, im Design bedienen zu können, dann muss sich zwingen die nächste Marktlücke auftun: Der Webdesigner ist regelmäßig nicht in der Lage, die Vielfalt der Geräte und der Browser und der Betriebssysteme nachverfolgen und auch in der Programmierung berücksichtigen zu können. Es gab Zeiten, in denen in den Medien wie z.B. in der c't vom Heise-Verlag die Nutzung von Javascript verpönt wurde, da sich damit Sicherheitslücken auftun, Was dazu natürlich nicht gesagt wurde: Die Vielfalt der Geräte, Browser und Betriebssysteme kann übergreifend im Webdesign NUR durch Interpreter bedient werden - also z.B. durch Javascript. Als Alternative wurde CSS genannt, also eine Interpretersprache, die die Browser nutzen, um Elemente der Webseite ansteuern zu können - so wie im Bereich HTML. Natürlich wurde auch dazu nicht gesagt: Die Steuerung der Elemente kann wegen Interpreter auch per Javascript (z.T. erheblich besser) vollzogen werden, da CSS und HTML im Browser natürlich in den Objektstrukturen der Elemente hinterlegt sind, die per Javascript (oder Microsoft Visual Basic Script) zugänglich sein müssen, denn Javascript nutzt ausschließlich die Objektstruktur (HTML-DOM). Logisch, dass es Anbieter gab und gibt, die eigene Javascript-Bibliotheken am Markt platzieren, um per Schnittstelle (Interface) dem Programmierer das Webdesign auf Objektebene effektiv zu ermögliche. Bibliothek - das ist das Schlüsselwort für alle Interpreter: Script wird zur Laufzeit einer Webseite quasi als Text eingelesen, ausgewertet, den im Browser intern vorhandenen Schnittstellen zugeordnet, so dass eine Folge von Steuerungen entsteht, die die Webseite anzeigen und am Leben halten. Ob nun wie bei Java bereits vorkompilierte interne Schnittstellen, oder wie bei Google oder Mozilla der Text (Script) vorkompiliert verarbeitet werden, spielt keine Rolle. Bibliotheken erlauben neben der Schaffung von einheitlichen Programmierungsschnittstellen auch die Herstellung der Kompatibilitäten zwischen Browsern. Klar, die Schaffung der einheitlichen Programmierschnittstellen bezieht sich auf die Systematik des jeweiligen Bibliothekenherstellers - Wieder Kleinstaaterei. Oder: Wer fremde Bibliotheken nutzt, macht sich vom Anbieter der Bibliotheken abhängig. Die Schaffung von Abhängigkeiten ist bei Wegwerfgeräten ganz klar das Ziel (quasi Druck von Geld). Hersteller der Wegwerfgeräte sind nicht bereit, die Kleinstaaterei zu beenden, sondern haben diese Abhängigkeit von Bibliotheken direkt in das Betriebssystem eingebaut, um gegenüber der Konkurrenz besser den Markt verwerten zu können (quasi Geld drucken). Gepaart mit systematischen Sicherheitslücken in den Betriebssystemen (Analogon zur Microsoft-Windows-Strategie) und dem Umstand, dass Gerätehersteller das Betriebssystem angepasst, also mit weiteren Sicherheitslücken ausgestattet, dem Kunden offerieren, ist das Webdesign im Bereich der Wegwerfgeräte NUR mit der Nutzung von Bibliotheken möglich. Das traditionelle HTML wurde auf die Bedürfnisse des Webdesign für Wegwerfgeräte umgeboten. Analog dazu das CSS. Editoren nutzen regelmäßig fremde Bibliotheken z.B. BootStrap, so dass neben den Editoren auch die Webseiten permanent angepasst und aktualisiert werden müssen. Editoren sollten eventuell keine Freeware sein. Diverse Editoren arbeiten nur per Drag und Drop, also visueller Zusammenbau der Webseite, z.B. RocketCake WYSIWYG Web Builder. Es gibt Editoren, die das Coding erlauben. Style sind im Bereich HTML und CSS Haupt-Gegenstand: Die Webseite wird im Layout und im Kaufzeitverhalten definiert. Die Datenbeschaffung für Inhalte der Webseite erfolgt im Bereich Wegwerfgeräte per Datenbankanschluss über die Funkverbindung bzw. den Internetzugang. Ein Smartphone ohne Datenbankanschluss der Apps ist sinnlos, da das Smartphone im Gegensatz zum Desktop-Computer keinerlei ausreichende Ressourcen der Datenhaltung hat. - Stichwort Cloud, also Datenhaltung auf fremden Servern im Internet (Delikatesse für die vielfältigen Trojaner, die die Sicherheitslücken der Wegwerferäte genüsslich verwerten). Alternativ gibt es inzwischen Krücken, um ein Smartphone in die eigene Datenhaltung (ohne fremde Cloud) einzubinden, um Smartphone-Besitzer an er Stange zu halten und dafür deren Vermögen abzukassieren (Zukauf von Hardware). Eine analoge Krücke ist der Einsatz der Wegwerfgeräte in verwertbaren und per Trojaner exzellent missbrauchbaren Bereichen wird Banking per Datenbanken in fremden Clouds. Nachfolgend wird nur die clientseitige Webprogrammierung (ohne Datenbeschaffung per Server) betrachtet. Es werden zarte Ansätze der Web-Programmierung für Wegwerfgeräte per HTML und CSS genannt. Diese Ansätze werden nur zum Zweck der Übersicht offeriert, um den Missbrauch des traditionellen Webdesign zu zeigen. Umfangreichere Informationen findet man mittels einer Entwicklungsumgebung des Webdesign (IDE) für Mobilphones, Tablets etc., Diese IDE müssen zwingend Bibliotheken mitbringen und unterstützen, um die Vielfalt der Geräte und Betriebssysteme etc. unter einer scheinbar einheitlichen Schnittstelle bedienen zu können. - Klar: Die Hersteller der IDE suchen sich natürlich diese Unterstützung aus und können dafür auch z.T. exorbitant Entgelt verlangen. Wer es kostenlos haben will, wird so gut wie nicht nachhaltig Webdesign für Wegwerfgeräte vollziehen können, ohne sehr tief in die Materie der Bibliotheken (und deren Vielfalt) steigen zu müssen. Fazit: Das Webdesign ist im Bereich der Wegwerfgeräte so verunstaltet worden, dass nachhaltiges Design nicht mehr möglich ist. Die Kleinstaaterei an Vielfalt der Wegwerfgeräte und deren Betriebssystemen, die das Webdesign bestimmen, zwingt zur Nutzung von herstellerspezifischer und oder von Fremdsoftware, um auf dem Laufende zu sein. Diese Verkettung im Webdesign ist die Sicherheitslücken und z.B. Spionage einfach ideal. Mit anderen Worten: Steinzeit. Scriptsprache HTML und CSS für Wegwerfgeräte -------------------------------------------- Das traditionelle HTML wurde auf die Bedürfnisse des Webdesign für Wegwerfgeräte umgeboten. Analog dazu das CSS. Dazu dient eine Modellierung der Wegwerfgeräte gegenüber dem herkömmlichen HTML bzw. CSS. Natürlich gibt es wieder mehrere Modelle. Nachfolgend ein Blick auf das Responsive Design. Das auf Ereignisse des Kontext der Webseite reagierende Design ist ein ur-uralter Hut. Ziel ist es, das Layout und Amlebenhalten der Webseite in Echtzeit zu steuern. - Das kann HTML im Zusammenhang mit Script und dem HTML-DOM grundsätzlich von Hause aus. Die Kunst im Webdesign für Wegwerfgeräte ist es, das Layout und Amlebenhalten der Webseite an den gerätespezifischen Kontext anzupassen, wobei die Gerätevielfalt zu beachten ist - natürlich auch die zukünftige Vielfalt. Da das eigentlich ein Ding der Unmöglichkeit ist, wurden HTML und CSS mittels Responsive Design verwertet. Das allerdings ist so mangelhaft implementiert, dass dem Webprogrammierer alternativen wie animierte Gif oder SVG-Bilder ans Herz gelegt werden, um die Gerätevielfalt sicherer zu bedienen. Tiefste Steinzeit. Responsive Design ist EXTREM statische Programmierung: Das Layout der Webseite wird nicht modular sondern einzelfallspezifisch entworfen. Das Layout der Webseite kann nicht per einheitlicher Schnittstelle für alle Vielfalten abgebildet werden, um Codung zu sparen. Das Layout der Webseite festlegen, bedeutet Aufwand auch in der Pflege der Webseite. Daher wurden ja die Apps erfunden, also Anwendungen, die wie eine Webseite wirken können, aber direkt die Komponenten des Betriebssysteme und deren enormen Vielfalten der Wegwerfgeräte nutzen (Apps sind hier nicht Gegenstand der Betrachtungen). Die Nutzung von CSS ist die Nutzung von Styles, die es bereits in HTML gab, als es noch keine CSS-Sprache gab. CSS nutzt das DOM der Webseiten, so wie es HTML macht. CSS und HTML sind vom Zweck her z.T. synonym. CSS wird gern benutzt, um Webseiten zu animieren. Responsive Design benötigt CSS, um das Webdesign gerätespezifisch bedienen zu können. CSS-Editoren sind regelmäßig spezialisiert und damit keine HTML-Editoren. Wichtig: Wegwerfgeräte haben weder Tastatur noch Maus. Es können also Ereignisse (Events) der Tastatur und Maus nicht programmiert werden. Responsive Content mit CSS umsetzen - Bildschirmdimension --------------------------------------------------------- CSS wird benutzt, um auf die gerätespezifische Varianten der Bildschirmdimensionen reagieren zu können. Das Ereignis ist quasi die vom Gerät gelieferte aktuelle Bildschirmdimension (auch die gerätespezfische Dimension). Es werden CSS-Media-Anfragen benutzt, deren Systematik hier nur im Kontext der Wegwerfgeräte gezeigt wird. Beispiel 1: @media only screen and ( max-width: 767px ) { HIER KOMMT ALLES CSS REIN } Kombination aus gelieferte Bildschirmdimension (Screen-Dimension) und Abfrage eines Einzelfallwertes. Damit Spannweiten programmierbar sind, wurden Attribute eingeführt: Im Beispiel max-width. Wenn die Breite der Bildschirmdimension <=767 px, dann tue das, was innerhalb { } steht. In Javascript wäre die Kodierung für ein Objekt windows.screen (wenn es das gäbe), so if (windows.screen.size.maxWidth <= 767) then { ... } Beispiel 2: @media only screen and ( max-width: 767px ) { SceenMaxWidth767_HideObject { display: none; } } Wenn die Breite der Bildschirmauflösung <= 767 pixels, dann stelle im Web-Dokument die CSS-Klasse "SceenMaxWidth767_HideObject" zur Verfügung. ... Das HTML-Tag xxx muss das Style-Attribut .display haben !! Zwischen style,display und style.visibility gibt es wesentliche Unterschiede: visibility setzt das im DOM verfügbare Objekt auf unsichtbar. display kann eventuell das Objekt im DOM auch noch ausblenden. Das HTML-Objekt wird unsichtbar, wenn die Breite der Bildschirmdimension <= 767 Pixels.

Wenn Du das liest,
hat Dein Wegwerfgerät eine Breite der Bildschirmdimension über 767 Pixels.

Man muss wissen, welche Bildschirmdimension das jeweilige Wegwerfgerät anbietet. Oder man nutzt Bibliotheken. Um den Text auf einem Smartphone im Querformat jedoch nicht im Hochformat anzuzeigen, kann man die Breite 479px verwenden. Beispiel 3: iPad @media only screen and (min-device-width:768px) and /* gerätespezifische Breite */ (max-device-width:1024px) and (orientation:portrait){... } @media only screen and (min-device-width:768px) and /* gerätespezifische Breite */ (max-device-width:1024px) and (orientation: landscape){... } Beispiel 4: iPhone 4 @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and /* gerätespezifische Ratio */ (min-device-pixel-ration: 1.5) {... } Beispiel 5: Smartphone Landscape & Portrait @media only screen and (min-device-width:320px) and /* gerätespezifische Breite */ (max-device-width:480px){... } Smartphone Landscape @media only screen and (min-device-width:321px) /* gerätespezifische Breite */ {... } Smartphone Portrait @media only screen and (min-width:320px){... } Beispiel 6: .BackGroundImg { height: 400px; background-image: url(small.png); /* kleines Bild */ background-repeat: no-repeat; background-size: contain; background-position-x: center; } @media (min-width: 500px) /* wenn Bildschirm gross genug, dann grosses Bild */ { body { background-image: url(body.png); } .BackGroundImg { height: auto; background-image: url(large.png); /*grosses Bild */ } } Responsive Content mit CSS umsetzen - Grid-View ----------------------------------------------- Die Ausrichtung der Elemente an einem Netz benötigt, dass alle HTML-Elemente der Webseite im Border-Box-Modus angezeigt werden, damit padding und border in die Berechnung der Höhe und Breite des jeweiligen HTML-Elementes berücksichtigt werden. * { box-sizing: border-box; } Beispiel 1: Webseite it 2 Spalten (wie bei einer Zeitung) .menu { width: 25%; float: left; } .main { width: 75%; float: left; } Beispiel 2: .div1 { width: 300px; height: 100px; border: 1px solid blue; box-sizing: border-box; } .div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; box-sizing: border-box; } Responsive Content mit CSS umsetzen - Relatives Layout ------------------------------------------------------ Das fließende Design ("Liquid Design") nutzt anstelle Angaben eines Festwertes den eines relativen, z.B. in Prozent % - Auch diese Technik ist ein ur-uralter Hut. Beispiel 1: body { width: 90%; /* 90% der aktuellen Dokumentbreite werden für Body verwendet */ } Beispiel 2: img, embed, object, video { max-width: 100%; height: auto; } Responsive Content mit HTML umsetzen - Bildschirmdimension ---------------------------------------------------------- CSS wird benutzt, um auf die gerätespezifische Varianten der Bildschirmdimensionen reagieren zu können. Das Ereignis ist quasi die vom Gerät gelieferte aktuelle Bildschirmdimension (auch die gerätespezfische Dimension). CSS und HTML nutzen gemeinsam die browserinternen Schnittstellen. Daher können CSS und HTML im Anliegen synonym sein. Anstelle CSS kann auch HTML verwendet werden. Beispiel 1: Dieser Link auf eine Textdatei "styles.css", die CSS-Befehle enthält und vom Browser als CSS-Programmcode zu laden und zu interpretieren ist, ist mit dem media-Attribut zur Bildschirmdimension verknüpft: Die CSS-Datei "styles.css" wird NUR dann interpretiert, wenn der Bildschirm eine minimale Breite von 750 px hat. Beispiel 2: Beispiel 3: Responsive Content mit HTML umsetzen - Viewport ----------------------------------------------- Das Meta-Tag-Attribut viewport dient der Anzeige und Skalierung der Dimensionen der Webseite. Folgendes Meta-Tag sollte in allen Webseiten platziert werden: width=device-width Die Anzeige folgt screen-width des Gerätes. initial-scale=1.0 Skalierung beim Laden der Webseite.