Webdesign – Trennung von Content und Layout

Tatsache ist, die strikte Trennung vom „Text“-Inhalt und „Schön“-Aussehen, ist die Grundlage jedes Webdesigns und der ISO-Standard, sowie W3C-Standard, für die Sprachen HTML, CSS, SVG und XHTML. Außerdem ist barrierefreies Web eine Forderung aller Behinderten-Organisationen, anderer Benachteiligten und zum Teil schon als Gesetz verabschiedet.


Problem:
Webdesignern wird die Arbeit oft mit untaugliches Material erschwert.
• Mail hat keine Anhang, sonden die Bilder werden zum Quelltext der Mail per „Drag and Drop“ hinzugefügt und nicht als separate Dateien, das vollkommenste Desaster
• Texte werden in Bilder integriert
• Photoshop*-Dateien, Word-Dateien, Excel-Dateien
• keine Rohdaten
Kein Webbrowser beinhaltet Photoshop, Word, Excel und so weiter, sondern nur Webtechniken!
Es werden in jedem Fall Rohdaten als Originalbild und Text oder CSV-Datei benötigt mit den Endungen *.txt und *.csv. Nein, Word ist kein Text-Editor, sondern eine proprietäre Textverarbeitung.

Wie wirkt sich das aus?
Ein Photoshop-Bild ist Super für Flyer, Plakete und ähnliche Printmedien, dort kann der Content nur Schaden am Ersteller-Computer oder dem Computer des Verarbeitenden anrichten. Aber um Bilder durch das Internet zu schleusen ist eine gewaltige Internet-Technik zu bedienen, da die Bilder von Photoshop sehr groß sind und unnötige Sachen transportieren, macht es die Sache noch schwerer und könnte bei Computer-Sabotage sogar rechtliche Konsequenzen nach sich ziehen. Außerdem wird der zu lesende Content unleserlich.

Ergebnis:
Riesige Datenmengen, riesiges Defizit beim Vermitteln von Content, Bilder mit schlechtester Qualität und nach 2 Sekunden weißem Bildschirm ist der User schon fort auf der Konkurenz-Website. Ein rießiger Schaden für alle.
Schranke


Im Einzelenen
1. Wie groß sind die Bilder
2. Darstellungsfehler


1. Wie groß sind Bilder
a) Größe bei Übertragung von der Website auf den Computer, also den Desktop
Das angezeigte Bild mit Schranke, unbearbeitet als Screenshot in der Größe 510×403 Pixel aufgenommen ergibt:
• 1.201.750 Bytes – Photoshop-Dateiformat, ohne HSV, ohne Adope-Zusatz-Content
• 616.326 – Gimp-Dateiformat
• 429.348 – PNG-Format
• 81.828 – JPG-Format
Schranke-Datei

b) Größe der übertragenen Datei im Arbeitsspeicher
Jetzt die tatsächliche Größe im Arbeitsspeicher (RAM):
510x403x24RGB = 4.932.720 Bytes

Für direkt von Photoshop erstellte Dateien gilt im RAM:
510x403x48CMYK = 9.865.440 Bytes + unbekannter Content von Adobe.
Der mir unbekannte Content macht mir am meisten Sorgen, da er möglicherweise unerwünschten Content noch nachladen könnte, Adobe ist eine USA-Firma.

2. Darstellungsfehler
Gerade die Trennung von Content und Layout kann die geforderte barrierefreie Darstellung ermöglichen.
• Suchmaschinen die den Inhalt lesen, können keinen Text aus einem Bild auslesen
• textbasierte Browser sehen auch nichts
• was ist mit RSS und so weiter
• Blinde die mit mit ihrer Darstellungstechnik arbeiten, fühlen ebenfalls nichts
• die Tastenkombination „Strg++“ kann in allen Webbrowsern die Schrift mit ihren Vektoren klar und größer darstellen. Bei Text im Bild verschwimmt dieser, siehe meinen Beitrag http://ro-kom.de/mediendesign/.
• eigene Desktop-Einstellungen, wie zum Beispiel Kontrast, werden torpediert.

Ergebnis:
Derzeitige Gesetze und weltweit anerkannte Industrie-Normen werden missachtet und der User wird mit dem vom Photoshop-Macher erstelltem Kunstwerk terrorisiert, da dem User die Kontrolle über den Content verloren geht.


Lösung:
Respekt vor dem Webmaster und dazu lernen, so bekommt die gewünschte Website ein rechtskonformes Aussehen und ein Top-Ranking bei den Suchmaschinen.
Eine weitere Lösung ist Gimp, da diese Programm OpenSourceSoftware ist und somit saubere Dateien erstellt ohne Müll-Content.


*Photoshop ist eine Marke von Adobe, Kalifornien und eine proprietäre Software mit 58% Schwarzkopien, das heißt jeder 2. Anwender ist kriminell!
Quellen:
https://de.wikipedia.org/wiki/Photoshop
http://www.photoshoplady.com/infographics/photoshop-evolution.html

Kommentare sind geschlossen.