nicht angemeldet
Matthias Apsel
Matthias Apsel
wowogiengen
Gunnar Bittersmann
Matthias Apsel
Hallo miteinander,
nachdem wir hier bei Euch schon schnelle und kompetente Hilfe erfahren durften, gleich das nächste Problem, bei dem wir nicht weiterkommen.
Wir sind ja dabei, die derzeit online befindliche Homepage für das Smartphone zugänglich zu machen (Link siehe oben), und dabei haben wir festgestellt, daß - wenn die Test-Seite mit dem Android-Browser "Internet" betrachtet wird, das völlig unterschiedliche Darstellungen gibt:
Android 2.3.6 Die Infos zu diesem Smartphone muß ich nachreichen. Wichtig erscheinen sie mir deshalb, weil es das älteste Android ist, das ich in meinem Bekanntenkreis kenne. Nur ist das Handy nicht gerade in Reichweite und der Besitzer kommt mit meinen Fragen nicht klar; muß es selbst ausprobieren ...
Android 4.1.2 Seite fehlerhaft dargestellt. a) Grafik "audiobibel.png", das ist die Grafik, welche auf allen Seiten im Kopf erscheint, wird nicht angezeigt; die anderen Grafiken schon b) die Farben werden nicht dargestellt (alles weiß) c) die Rahmen sind nicht mehr abgerundet, sondern eckig d) die Seite "/auswahl_at.htm" wird unterhalb der Tabelle "Das Alte Testament" weder zentriert, noch in voller Breite dargestellt (alle anderen Seiten schon) ==> Nachtrag: Nachdem ich einige Male auf "anzeigen" in der Zeile "Die geschichtlichen Bücher" geklickt und dann wieder zurück auf "verbergen" ging, stimmt die Breite und Zentrierung auf einmal ... Hier vier Screenshots meines Android 4.1.2 mit dem Android-Browser "Internet" die das veranschaulichen:
Startseite
Weiterführende Seite
Seite "auswahl_at.htm" nach Klick auf "anzeigen"
Seite "auswahl_at.htm" nach erneutem Klick auf "verbergen"
Android 4.4.2 Seite fehlerhaft dargestellt. a) Header-Grafik ist OK (also nicht fehlerhaft) b) die Farben werden nicht dargestellt (alles weiß) c) die Rahmen sind nicht mehr abgerundet, sondern eckig d) die Seiten "/auswahl_at.htm" wird unterhalb der Tabelle "Das Alte Testament" weder zentriert, noch in voller Breite dargestellt. Egal, ob ich im "eingerollten", oder im "ausgerollten" Modus bin. Habe es wie unter Android 4.1.2 mehrfach probiert, durch Klicken auf "anzeigen" und danach auf "verbergen"; die Breite und die Zentrierung unterhalb der Tabellenüberschrift ändern sich aber nicht (auch nicht nach einem Aktualisieren des Browsers). Die Bilder spare ich mir hier; sieht nur unwesentlich anders aus, da der Viewport des moderneren Smartphones etwas breiter und höher ist.
Ich vermute mal, daß der Fehler am ehesten im "standard.css" zu suchen ist; also daß dort noch Abfragen für diverse Browser reinmüssen … Weiß auch hier jemand weiter? Danke!
Holger
Matthias Apsel
Gunnar Bittersmann
Matthias Apsel
wowogiengen
Matthias Apsel
wowogiengen
Gunnar Bittersmann
Matthias Apsel
Matthias Apsel
Matthias Apsel
Gunnar Bittersmann
Hallo AudioBibel,
der link zur problematischen Seite scheint mir nicht richtig zu sein. Ich denke, dieser hier ist korrekt: http://audiobibelneü.de/TEST/
Behebe zunächst die Fehler https://validator.nu/?doc=http%3A%2F%2Faudiobibelneü.de%2FTEST%2F
Bis demnächst
Matthias
Hallo Matthias,
auch Dir danke für Dein schnelles Feedback.
Jetzt ist es schon spät, und morgen bin ich erst gegen Abend wieder zurück.
der link zur problematischen Seite scheint mir nicht richtig zu sein. Ich denke, dieser hier ist korrekt: http://audiobibelneü.de/TEST/
Der von Dir angegebene Link ist korrekt. Was hatte ich denn geschrieben (sehe nichts davon)? 😱
Behebe zunächst die Fehler https://validator.nu/?doc=http%3A%2F%2Faudiobibelneü.de%2FTEST%2F
Die Fehler schaue ich mir mit Wolfgang an (der mir den Code - HTML und CSS - geschrieben hat); davon versteh' ich noch viel zu wenig. Er oder ich melden uns dann wieder hier im Forum. Bis dahin!
Holger
P.s. Habe gerade auf mein Betriebssystem (Linux Mint 17.3 KDE 64bit) noch - neben Chrome und Firefox - den Opera installiert. Auch hier habe ich festgestellt, daß die Farben gänzlich fehlen. Wie in den Android-Browser "Internet". Also auf jeden Fall ein Fehler im CSS oder dem HTML.
Nachtrag …
Wolfgang, der den HTML- und CSS-Code schreibt und ich, der ich diesen von derzeit fünf Standard-HTM-Seiten auf weitere ca. 150 Seiten übertragen und anpassen werde, sind gerade dabei, die schon online gestellte Seite http://www.xn--audiobibelne-olb.de auch für Smartphones und das Tablet zugänglich zu machen. Dies geschieht seit einigen Monaten auf der Test-Seite http://www.xn--audiobibelne-olb.de/test/. Diese wird später die derzeit im Netz befindliche Seite ablösen.
Da nun immer wieder neue Fragen auftauchen werden, die auch separat, in einzelnen Threads, abgearbeitet werden sollen, stelle ich jedem neuen Problem diesen Link - unser erstes, bereits gelöstes Problem - voraus (für die, welche es interessiert):
Erstes, bereits abgearbeitetes Problem
Das war's schon 😀
Holger
Hallo AudioBibel,
der link zur problematischen Seite scheint mir nicht richtig zu sein. Ich denke, dieser hier ist korrekt: http://audiobibelneü.de/TEST/
Der von Dir angegebene Link ist korrekt. Was hatte ich denn geschrieben (sehe nichts davon)? 😱
"Problematische Seite: audiobibel@xn--audiobibelne-olb.de"
Wie du in der ersten Zeile sehen kannst, sollte es nicht mehr notwendig sein, Umlautdomains per Punycode zu referenzieren. Du kannst also einfach "http://audiobibelneü.de" statt "http://xn--audiobibelne-olb.de" schreiben. Die Browser bauen sich das schon so um wie sie das brauchen.
Bis demnächst
Matthias
Hallo Matthias,
danke für die Info. Vor ein paar Jahren hieß es noch, ich sollte die Seite vorsichtshalber immer - wie Du es nennst: Punycode - schreiben; das sei sicherer. Nun es schadet ja auf jeden Fall nicht. Nur hatte ich oben versehentlich (wahrscheinlich durch Hineinkopieren ohne Kontrolle) nicht die Seite, sondern die Mailadresse hinterlegt. 😉
Aber wenn ich darauf verzichten kann, auch gut! Kann ich das dann auch zuverlässig auf die Mailadresse anwenden?
Holger
Hallo AudioBibel,
Vor ein paar Jahren hieß es noch,
Ein paar Jahre sind im Webumfeld eine Ewigkeit
ich sollte die Seite vorsichtshalber immer - wie Du es nennst: Punycode - schreiben;
Den Namen habe nicht ich mir ausgedacht.
Aber wenn ich darauf verzichten kann, auch gut! Kann ich das dann auch zuverlässig auf die Mailadresse anwenden?
Ich würde sagen ja ohne jedoch eine Garantie dafür zu geben.
Bis demnächst
Matthias
Hallo Holger & Co, ich habe gerade mal bei der index.htm-Seite die Validierungsfehler behoben, bis auf den im meta-tag... aber das kann wahrscheinlich eh ersatzlos rausfliegen?
Zu den weiteren Fehlern, die man hier Auswahl Altes Testament sehen kann, hab ich eine Frage. Und zwar haben wir uns gedacht, dass die einzelnen Kategorien der Bücher in der Bibel (geschichtlich, poetisch und prophetisch) immer anzeigen, und die Bücher darin (z.B. 1. bis 5. Mose etc.) dann über Javascript ein- und ausblendbar machen. Und zwar sollte die Tabelle dazu dann so aussehen, dass
Jetzt wo ich den Text hier schreibe, die Ausgabe des Validators nochmal ansehe und den HTML-Code dazu, verstehe ich langsam, wie pingelig der Validator ist.
Error: Row 2 of a row group established by a tbody element has no cells beginning on it.
From line 40, column 39; to line 40, column 43
henzeile"></tr>↩
<!-- Abstand zum nächsten Bereich-->
<tr class="zwischenzeile"></tr>
Da sollte dann also mindestens noch ein
<td colspan="5"/>
rein, oder?
Jetzt habe ich nebenher noch den Quellcode bisschen editiert. Aber der Validator mosert jetzt an den Spalten rum, die ich per Javascript sichtbar oder unsichtbar schalte. Er hat ja recht, die Spalten 4+5 sind im Prinzip ja doppelt belegt und das passt ja nicht wirklich. Aber wie kriege ich das sauber hin?
So... jetzt hab ich bisschen was verbessert. Das Ergebnis ist online.
Da ich nicht weiss, was Holger möchte (ob die Info-Blase und der Link separat sein sollen, wie im 1. bis 4. Buch Mose, oder zusammen, wie bei dem Richter und weiter unten), hab ich da mal aufgehört zu optimieren.
Die anderen, wo die Spaltenzahl nicht stimmt, brauch ich eure Hilfe… Viele Grüße erstmal und Gute Nacht
Hallo Wolfgang,
Du warst aber fix unterwegs!
bis auf den im meta-tag... aber das kann wahrscheinlich eh ersatzlos rausfliegen?
Jawohl, die können vermutlich erst mal raus. Muß mich noch mal genauer schlau machen; manche kommen evtl. (in englischer Beschreibung) noch einmal rein. Aber erst mal weg damit! 😉
Da ich nicht weiss, was Holger möchte (ob die Info-Blase und der Link separat sein sollen, wie im 1. bis 4. Buch Mose, oder zusammen, wie bei dem Richter und weiter unten), hab ich da mal aufgehört zu optimieren.
Also, ideal wäre Info-Blase und Link in je eine separate Spalte zu stecken. Ich glaube das haben wir uns anfangs gespart, da erhöhter Arbeitsaufwand.
Danke Wolfgang!
Eine gute Woche
Holger
Wir sind ja dabei, die derzeit online befindliche Homepage für das Smartphone zugänglich zu machen (Link siehe oben), und dabei haben wir festgestellt, daß - wenn die Test-Seite mit dem Android-Browser "Internet" betrachtet wird, das völlig unterschiedliche Darstellungen gibt:
Nur zur Info: Da unter Android und iOS jeder Browser die systemeigene Webseitendarstellungskomponente (oder wie das heisst) verwenden muss (sonst gibt es keine Freigabe von Google bzw. Apple), müssten die Probleme jeden Browser betreffen.
Android 4.1.2 Seite fehlerhaft dargestellt. a) Grafik "audiobibel.png", das ist die Grafik, welche auf allen Seiten im Kopf erscheint, wird nicht angezeigt; die anderen Grafiken schon
Dafür sehe ich jetzt keinen Grund gegenüber 4.4.2.
Du könntest versuchen, die Grafik mit anderen Optionen zu speichern oder, falls dein Grafikprogramm das nicht zulässt, ein Optimierungswerkzeug wie pngcrush oder optipng benutzen, die letztlich den gleichen Effekt haben. Beide arbeiten verlustfrei, sind also nur von Vorteil; in deinem Fall kann die Grafik um ein Drittel auf 30k reduziert werden.
Falls andere PNG-Grafiken vorhanden sind: Mit pnginfo lassen sich Details zu den Dateien anzeigen, vielleicht ergibt sich damit ein Hinweis auf die technische Ursache.
Es gibt bei Android wohl eine Größenbegrenzung, die greift aber erst, geräteabhängig, ab zwei- bis dreitausend Pixeln Höhe bzw. Breite. Davon ist diese Grafik, auch wenn sie schon sehr groß ist, noch deutlich entfernt.
Unabhängig: Für derartige Titelgrafiken -praktisch nur Text- solltest du tunlichst kein Pixelformat wie PNG benutzen (JPEG sowieso nicht). Alleine, was du dadurch an Informationen verlierst, falls der Leser nicht sehen kann, egal ob menschlich-fehlsichtig oder Suchmaschinenbot, ist äußerst betrüblich. Das scheint mir hier ganz besonders zu gelten, weil Vorgelesenes gerade für Fehlsichtige von Interesse sein dürfte, mithin ein wenig Mühe gerade hier eher nicht vergebene Liebesmüh' wäre.
Und wenn ich jetzt gerade daran denke, dass du für vielleicht 150 Buchstaben und ein paar Leerzeichen sage und schreibe 44071 Bytes verbrätst (statt der vielleicht 150, die reichen täten), wird mir ganz schwummerig …
Setze den Kopfhörer und das Buch in eigene Grafiken und den Untertitel ("deutschsprachige MP3-Dateien" usw.) als Text in den HTML-Code. Der eigentliche Titel sollte IMHO auch als Text gegeben werden, denn an der Schriftart ist nun nichts, was eine Pixelgrafik rechtfertigen würde. Falls die Schwingungen es dir aber so sehr angetan haben, probiere wenigstens SVG statt PNG, das sieht nicht so pixelig aus.
b) die Farben werden nicht dargestellt (alles weiß) c) die Rahmen sind nicht mehr abgerundet, sondern eckig
/* Globale Variablen */
:root {
--farbe_at_dunkel: hsl(203, 47%, 72%); /* Die dunkelste Farbe im AT */
--randradius: 8px; /* Radius eines beliebigen Randes*/
Android unterstützt erst ab der nach Version 4.4.4 folgenden Version 56 CSS-Variablen, siehe http://caniuse.com/#search=css variables .
Hallo Martin,
vielen Dank für Deine prompte und ausführliche Antwort! 😀
Nun ist es schon fast wieder Sonntag und auch morgen bin ich frühestens am späten Nachmittag wieder anzutreffen.
Du schlägst also vor,
die Grafik "audiobibel.png" deutlich (um ca. 70 %) zu komprimieren und / oder sie in ein anderes Format (bspw. .svg) umzuwandeln.
Den Text von der Grafik zu lösen und diesen in das HTML einzubinden.
Hört sich sinnvoll an! Auch das werde ich mit Wolfgang besprechen, da HTML und CSS nicht mein Ding sind. Vermutlich brauche ich (oder gar wir beide, Wolfgang und ich) bezüglich der Grafik noch Hilfe: auch da bin ich etwas auf den Kopf gefallen.
Er oder ich melden uns (vermutlich erst nächste Woche) wenn wir weiter gekommen sind (oder eben auch nicht weiterkommen).
Bis dahin, ein schönes Rest-Wochenende
Holger
Hallo AudioBibel,
Du schlägst also vor,
- die Grafik "audiobibel.png" deutlich (um ca. 70 %) zu komprimieren und / oder sie in ein anderes Format (bspw. .svg) umzuwandeln.
- Den Text von der Grafik zu lösen und diesen in das HTML einzubinden.
Lediglich für die Kopfhörer und die Bibel SVG- (oder PNG) Grafiken zu verwenden und den Text als HTML umzusetzen. Etwa so
<header>
<h1>Audio-Bibel<span>NeÜ</span><h1>
<p>deutschsprachige MP3-Dateien …</p>
<p>Übersetzer: …</p>
</header>
Die Bilder sind schmückendes Beiwerk und sollten deshalb als Hintergrundbilder per CSS eingebunden werden. Wo du Grafiken finden kannst, siehst du in der Wiki-Linkliste.
Z. B.
Kopfhörer: https://pixabay.com/de/kopfhörer-musik-audio-computer-159569/
Buch: https://pixabay.com/de/buch-drucken-offen-lesung-146504/
Beachte aber auch:
Beachten Sie das Urheberrecht: Vorsicht bei der Nutzung kostenloser oder vermeintlich lizenzfreier Bilder
Bis demnächst
Matthias
@@Matthias Apsel
Lediglich für die Kopfhörer und die Bibel SVG- (oder PNG) Grafiken zu verwenden
Eher JPEG, wenn’s denn vernüntig aussehende Bilder sein sollen.
LLAP 🖖
Hallo Gunnar Bittersmann,
Lediglich für die Kopfhörer und die Bibel SVG- (oder PNG) Grafiken zu verwenden
Eher JPEG, wenn’s denn vernüntig aussehende Bilder sein sollen.
Auf der Seite sehen sie eher nach Icons aus. Daher meine Empfehlung.
Bis demnächst
Matthias
@@Matthias Apsel
Auf der Seite sehen sie eher nach Icons aus. Daher meine Empfehlung.
Nö, für Icons sind die Bilder viel zu wenig stilisiert.
Die Dinger sehen weder nach Icons noch nach Bildern aus. Daher meine Einschätzung, dass das nicht so gewollt ist.
LLAP 🖖
Hallo Gunnar.
Nö, für Icons sind die Bilder viel zu wenig stilisiert.
Oder anders: Die Bilder weisen einen zu hohen Ikonizitätsgrad auf, um Icons zu sein. MfG, at
Hallo at,
DER at?
Bis demnächst
Matthias
Hi nochmal Matthias,
das mit den Bildern schauen wir uns noch mal genauer an. Eigentlich wollte ich meine selbstgemachten Fotos (wurden etwas verfremdet) weiter verwenden; sie gehören gewissenermaßen zum Erkennungsbild der Seite dazu. Mal seh'n; die Qualität könnte man (mit etwas Hintergrundwissen sicher noch verbessern). Die von Dir geposteten Bilder gefallen mir jetzt nicht so (betriebsblind?).
Holger
Hallo Holger, ich weiß nicht, wie du das siehst, aber ich denke, dass es zwar prinzipiell richtig ist, die Webseite auf möglichst vielen Browsern korrekt anzeigen zu können, aber ich finde auch, dass es für eine private Seite vom Aufwand her nicht unbedingt sinnvoll ist, die älteren Browser auch noch zu unterstützen. Rein theoretisch müsstest du dann jedesmal, wenn ein Browser neu raus kommt, diesen auch testen, und die Seite wieder anpassen…
Wie du vielleicht gesehen hast, habe ich online die index.htm und die auswahl_AT.htm bereits etwas nach dem Gemeckere des Validators überarbeitet. Die Zentrierung der 'align="center"' -Tags ist dabei abhanden gekommen…
Die große Grafik können wir in 4 Zeilen Text und 2 Bilder umbauen, das ist kein Thema. Mit Hilfe meiner Schwägerin sollte es auch kein großes Thema sein, ein eigenes, quasi copyright-freies Bild eines Kopfhörers und einer Bibel in dem Stil zu bekommen, wie es bereits eingebunden ist… SVG müsste meiner Meinung nach hierfür nicht sein…
Viele Grüße Wolfgang
@@wowogiengen
ich weiß nicht, wie du das siehst, aber ich denke, dass es zwar prinzipiell richtig ist, die Webseite auf möglichst vielen Browsern korrekt anzeigen zu können, aber ich finde auch, dass es für eine private Seite vom Aufwand her nicht unbedingt sinnvoll ist, die älteren Browser auch noch zu unterstützen.
„Ich unterstütze jeden Browser; ich optimiere für keinen.“ (Jeremy Keith)
Das ist die sinnvolle Herangehensweise: Webseiten so zu entwickeln, dass sie auf allen Browsern dargestellt werden – auf manchen schlechter, auf anderen besser. Und das ist nicht mit Aufwand verbunden, sondern mit Webstandards. Und damit, dass HTML und CSS (im vollen Gegensatz bspw. zu JavaScript) so konzipiert sind, dass Browser, die ein bestimmtes Feature nicht verstehen, keinen Fehler werfen und ihren Dienst quittieren, sondern das Feature (sei es ein unbekanntes HTML-Element oder -Attribut, eine unbekannte CSS-Eigenschaft oder Wert) ignorieren und ihre Arbeit (d.h. die Darstellung der Webseite) fortsetzen.
So ist gewährleistet, dass mit modernsten Webtechnologien umgesetzte Seiten auch auf Uralt-Browsern lauffähig sind, wenn denn die Entwickler das Prizip von progressive enhancement verstanden haben. Jeremy Keith gibt in seinem Buch „Resilient Web Design“ (frei im Web verfügbar!) einige Beispiele, z.B. responsive images: Browser, die das picture-Element und das srcset-Attribut nicht verstehen, verstehen aber immer noch <img src="campfire.jpg" alt="Kirk, Spock und McCoy am Lagefeuer">.
(Und wenn Marc Andreesen nicht diesen blöden Design-Fehler in HTML eingebaut hätte und das als <img src="campfire.jpg">Kirk, Spock und McCoy am Lagefeuer</img> standardisiert worden wäre, dann würde das sogar in Browsern funktionieren, die nicht einmal das img-Element kennen.)
Rein theoretisch müsstest du dann jedesmal, wenn ein Browser neu raus kommt, diesen auch testen, und die Seite wieder anpassen…
Ein neuer Browser wird neue Features unterstützen, ohne auf einmal Altbekanntes nicht mehr oder falsch umzusetzen. (Und sollte es doch mal ein Browserbug bis in die veröffentlichte Version schaffen, wird der in Windeseile gemeldet und gefixt werden.)
Das soll nun keinesfalls ein Plädoyer sein, nicht in verschiedenen Browsern zu testen.
Aber wenn man auf Webstandards und progressive enhancement setzt, ist man auf der sicheren Seite, dass Webseiten in allen Browsern angemessen dargestellt werden.
Ich sagte wohlgemerkt nicht: gleich dargestellt.
LLAP 🖖
Hallo @Gunnar, du schreibst:
Ein neuer Browser wird neue Features unterstützen, ohne auf einmal Altbekanntes nicht mehr oder falsch umzusetzen. (Und sollte es doch mal ein Browserbug bis in die veröffentlichte Version schaffen, wird der in Windeseile gemeldet und gefixt werden.)
Ich sehe, dass unsere Webseite im Firefox eigentlich richtig, und so wie gewollt dargestellt wird. Im Internet-Explorer fehlen aber z.B. die Hintergrundfarben der Tabellen, und die Rundungen der Rahmen sind auch weg. Das bedeutet für mich aber, dass entweder der IE sich nicht an den Standard hält, oder der Firefox etwas kann, was der IE nicht kann…
Wie soll ich da eine Seite erstellen, die für beide (im Bestfall sogar für alle) Webbrowser immer das korrekte Ergebnis anzeigt - vorausgesetzt, alle Browser unterstützen die von mir gewollten Gestaltungsmöglichkeiten.
Viele Grüße Wolfgang
@@wowogiengen
Im Internet-Explorer fehlen aber z.B. die Hintergrundfarben der Tabellen, und die Rundungen der Rahmen sind auch weg.
Genau darüber hattest du dich hatte AudioBibel sich schon bei Android gewundert und Martin L. aus E. hatte gesagt, dass alte Androids keine CSS-Variablen unterstützen und auch Can I use verlinkt den URL dahin angegeben. (Die Verlinkung hab ich mal eben nachgeholt.)
Das bedeutet für mich aber, dass entweder der IE sich nicht an den Standard hält, oder der Firefox etwas kann, was der IE nicht kann…
Letzteres.
Wie soll ich da eine Seite erstellen, die für beide (im Bestfall sogar für alle) Webbrowser immer das korrekte Ergebnis anzeigt
Den CSS-Code so übersetzen, dass er ohne CSS-Variablen auskommt. Mehrere Möglichkeiten:
Du ersetzt in deinem Editor sämtliche Vorkommen von var(--farbe_at_dunkel) durch den Wert hsl(203, 47%, 72%) und auch alle anderen Variablen steht durch ihre jeweiligen Werte. Danach kannst du den :root {}-Block löschen.
Vermutlich die einfachste Variante. Damit gibtst du allerdings den Vorteil auf, dass du alle diese Einstellungen nur einmal zentral festlegst.
Du verwendest einen CSS-Postprozessor, der dir diese Arbeit abnimmt.
Du verwendest einen CSS-Präprozessor (bspw. Sass) und darin Variablen, d.h. anstelle von
:root
{
--farbe_at_dunkel: hsl(203, 47%, 72%);
--farbe_at_heller: hsl(203, 75%, 75%);
⋮
}
schreibst du
$farbe_at_dunkel: hsl(203, 47%, 72%);
$farbe_at_heller: hsl(203, 75%, 75%);
⋮
(kein :root {}-Block)
und anstelle von var(--farbe_at_dunkel) überall $farbe_at_dunkel usw. Und das natürlich auch für alle anderen Variablen. Beim Kompilieren werden dann die Variablen durch die jeweiligen Werte ersetzt, wobei auch HSL (was IE 8 und früher nicht versteht) in RGB umgewandelt wird.
Wobei ich allerdings hier statt einzelner Variablen eine Map verwenden würde:
$settings: (
farbe_at_dunkel: hsl(203, 47%, 72%),
farbe_at_heller: hsl(203, 75%, 75%),
⋮
);
Abruf dann mit map_get($settings, farbe_at_dunkel) usw.
LLAP 🖖
@@Martin L. aus E.
ein Optimierungswerkzeug wie pngcrush oder optipng benutzen
Ich verwende ImageOptim.
Und wenn ich jetzt gerade daran denke, dass du für vielleicht 150 Buchstaben und ein paar Leerzeichen sage und schreibe 44071 Bytes verbrätst (statt der vielleicht 150, die reichen täten), wird mir ganz schwummerig …
Mir wurde vorher schon ganz schwummerig:
Die Serife des kursiven A links unten ist weggeschnitten.
Der Text in der Grafik ist pixelig; besonders auf hochauflösenden Displays (Retina) ist der Unterschied zu richtigem, scharf gerendertem Text deutlich.
Kopfhörer und Buch (der Bücher?) sind pixelig und es deutet nichts darauf hin, dass der Effekt so gewollt ist.
Setze den Kopfhörer und das Buch in eigene Grafiken und den Untertitel ("deutschsprachige MP3-Dateien" usw.) als Text in den HTML-Code. Der eigentliche Titel sollte IMHO auch als Text gegeben werden
+2
LLAP 🖖
Hallo Martin,
erst mal: Was bedeutet eigentlich das "LLAP" unten in Deinen Beiträgen? Bitte erweitere meinen Horizont! 😉
Das mit dem abgeschnittenen "A" ist mir noch gar nicht aufgefallen. Und ja, die Qualität der eingefügten Bilder (Kopfhörer und Bibel) ist tatsächlich nicht die tollste. Das nehme ich mir also zu Herzen. Allerdings muß ich es noch umsetzen. Werde also neue Fotos von meinem Kopfhörer und der Bibel machen. Denn die Motive sollen schon so bleiben …. Und dann wie schon weiter oben empfohlen, nur noch die beiden Bilder in guter Auflösung und guter Kompression ins CSS einbetten und den bisherigen Text der Grafik ins HTML schreiben.
Wenn (!) das dann geschafft ist, werdet ihr (und ICH) bestimmt mehr begeistert sein. 😂
Gebt mir etwas Zeit; das ist nun wirklich nicht mein Spezialgebiet (wie so vieles andere nicht).
LG
Holger
P.s. (mit einem breiten Grinsen) Schaut mal, wie die Grafik anfangs ausgeschaut hat; da habe ich doch schon eine enorme Verbesserung hingelegt, oder? 😉
Hallo AudioBibel,
Hallo Martin,
Gunnar 😉
erst mal: Was bedeutet eigentlich das "LLAP" unten in Deinen Beiträgen? Bitte erweitere meinen Horizont! 😉
In Verbindung mit 🖖 solltest du die Ergebnisse einer beliebigen Suchmaschine deuten können. Ich empfehle die Bildersuche nach "llap".
Bis demnächst
Matthias
Hallo Gunnar (der nicht Martin heißt - peinlich, peinlich),
sorry, aber ich steh auf dem Schlauch. Die kleine (!) hübsche Grafik sagt mir gar nichts. OIF 596??? Auch nicht wenn ich die Bildersuche nach "llap" tätige. Irgendwas mit der Enterprise; die Serie heißt im Englischen abgekürzt LLAP. Bin ich zu alt? Kuck ich zu wenig Fernsehen / Kino? Star-Streck-/Enterprise-Fan bin ich auf jeden Fall nicht. Verzeihung. 😂
Also: Ich bitte noch immer um Aufklärung ...
Danke
Holger
Hallo AudioBibel,
Hallo Gunnar (der nicht Martin heißt - peinlich, peinlich),
Ich bin nicht Gunnar 😉
Irgendwas mit der Enterprise;
Genau. Live long and prosper. In der deutschen Übersetzung Leben Sie lang und in Frieden.
Bis demnächst
Matthias
:-) Danke Matthias. So sei es!
Holger