Universal Design by Dadie nur 5Kb

Druckbare Version

25.07.2004, 18:33
dadie

Universal Design by Dadie nur 5Kb

Hi

Also ich habe ein Design gebaut jedoch kein Normales.
Ich wollte folgendes Verwirklichen :

1,In jedem Brwoser soll es gleich aussehn sogar in textbasierten Brewsern.

2,Es soll die standert HTML Normen einhalten

3,Es soll so klein sein das sogar 33Kbs user es in 1 sekunde geladen haben.

4,Es soll für möglichst viele auflösungen gut lesbar sein.

Was kamm dabei raus ?

Das kamm raus :

http://dlcc.funpic.de/HP-03/HP-03.html

Das witzige ist die .html datei ist grösser als ALLE
bilder zusammen.Alle bilder zusammen sind genau 2,13KB
und die HTML datei 2,33 KB *gg*

Was sagt ihr ? Könnte man die HP noch kleiner machen ?

Wichitg ist auch das ich testes von Textbasierten browser brauche.Ich habe bsiher nur einen von meiner Schule getestet Ka wie der hiess.Bitte test mit allen Brwoser die ihr habt und sagt mir bei welchen es BUGs gibt.

achja bitte bewertet mal das Design (beachtet dabei alle Pic sind 2,13 KB gross *gg*)

Noch was Download bar ist es unter folgender adresse :

http://dlcc.funpic.de/HP-03/hp-03.rar

einfach ein neues fenster oder tab öffnen udnd en link reinkopieren udn ENTER drücken.

Ich hätte die .html datei NOCH kleiner machen können leider häte darunter dann die Ordnung gelitten und das ist sehr
wichitg bei Templets.

MFG

Dadie
25.07.2004, 18:51
Latency

Sry dich enttäuschen zu müssen, aber für dieses Design hast du noch seeehr viele Bilder drinnen ;)

Als ich das Design sah rechnete ich persönlich mit 3 Bildern, dass es dann 10 wurden hat mich doch ziemlich verwundert. Denn die Balken und Co. lassen sich mit ein wenig CSS besser nachbilden.

Ob es danach im Endeffekt kleiner wird weiß ich nicht, aber ich gehe davon aus.

Zum Design selber sag ich jetzt nicht viel :rolleyes:
25.07.2004, 19:05
dadie

ja das problem ist nur das ich kein css kann.
Aber ist schon geil was in 5kb reinpassen oder ?
25.07.2004, 19:09
mitaki

*hust*

CSS ist aber heute Notwendig, v.a. wenn du dich an die "HTML Normen" halten willst. SelfHTML bietet dir einen großen Umfang an Beispielen zur CSS Verwendung.

Da du Bilder im PNG Format verwendest kannst du diese mit dem Programm OptiPNG eventuell noch verkleinern, der Link dazu befindet sich im gepinnten Thread.
25.07.2004, 19:23
Jesus_666

Was bitte soll das "ï»¿" am Anfang, noch vor dem <html>-Tag bedeuten? Und was hat "text-decoration: glow;" in einer echten Website zu suchen? Glow wird nur vom IE unterstützt.
BTW, warum verschwendest du so viel Platz an den Seiten? Links und rechts sehe ich große, leere Flächen.

Ich habe in vier Browsern getestet: Mozilla Firefox 0.9, Konqueror 3.2.3-01 Red Hat, Lynx Version 2.8.5dev.16 und Amaya 8.6.

Der Firefox zeigte mir eine grellblaue, ansonsten eher schlichte Seite, die abgesehen vom Fehlen gewisser Informationen (Doctype, Encoding) und ein paar merkwürdigen Zeichen am Anfang in Ordnung zu sein schien.
Der Konqueror brachte das selbe Resultat.

Unter Lynx war die Seite bedienbar, hatte aber einen Fehler bei der Darstellung der Links. (Screenshot)

Amaya hatte wie erwartet extreme Schwierigkeiten mit der Seite (Screenshot), was nicht weiter verwunderlich ist, da Amaya der W3C-Browser ist und nur Seiten verarbeiten kann, die absolut korrektes HTML und CSS verwenden. Das tut diese Seite nicht mal ansatzweise.
25.07.2004, 19:26
dadie

sag mir doch einer das ï»¿ im lynx der fehler ist bei glow udn ich suche den fehkler warum das bei lynx dargestellt wird.
25.07.2004, 20:06
Jesus_666

Das ï»¿ wird bei mir überall angezeigt, das steht so im Code.
25.07.2004, 20:14
dadie

nein da steht nicht im code da bin ich mir sicher.

Ne frage :

Dieser W3C standert stinkt er sagt :

...td style="background-image: url(./img/01.png);" width="187" height="112">

in diesem text sei ein fehler.Wenn ich fragen darf wo ?
Ich ahbe schon den alten html nackground code ersätz wo ist da ein fehler ? die zahlen sind in "" alles ist klein geschreiben
sama wo soll da ien fehler dirn sein ?
25.07.2004, 20:18
Latency

Zitat:

Original geschrieben von dadie
...td style="background-image: url(./img/01.png);" width="187" height="112">

...td style="background-image:url(../img/01.png); width:187px; height:112px">

So ist es am schönsten und saubersten ;)
Noch besser wäre es allerdings wenn du den Code in eine externe CSS Datei auslagerst ;)
25.07.2004, 20:30
mitaki

<td> darf keines der Attribute "width" oder "height" enthalten, da beides mit Stylesheets realisierbar ist (so wie es Latency schrieb).

Da funpic.de am Ende ein <script> Tag hinzufügt, wird es unmöglich ein valides Dokument zu erstellen (obwohl du versuchen kannst am Ende des Quelltextes einen Kommentar zu beginnen, damit die Zeilen am Ende nicht mehr gewertet werden).

Es fehlt dir außerdem diese meta-Angabe:

Code:

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
25.07.2004, 20:39
dadie

Sorry das mit dem ï»¿ war ein BUG in meinem editor fertrau nie einen Noname bilich editor >:(

nun ist die seite ohne bugs bis halt auf das sciprt von funpic
27.07.2004, 15:52
Maisaffe

Zitat:

Original geschrieben von dadie
Sorry das mit dem ï»¿ war ein BUG in meinem editor fertrau nie einen Noname bilich editor >:(

nun ist die seite ohne bugs bis halt auf das sciprt von funpic

sieht mal garnicht so schlecht aus (für fast nix an inhalt :D)

Dennis

@ Dadie: Boah, du spammst ja überall :D
27.07.2004, 17:49
Jesus_666

Amaya kriegt es immer noch nicht richtig hin, aber ich weiß nicht genau, wieso. Immerhin ist es etwas besser geworden.

Lynx hat immer doch dasselbe Problem; der letzte Link wird eingerückt. Die Fehlerursache ist ein -Tag:

Code:

   <A href="./HP-03.html">Link</A>   <A href="./HP-03.html">Link</A>   <A href="./HP-03.html">Link</A>   <A href="./HP-03.html">Link</A>    <A href="./HP-03.html">Link</A>   <A href="./HP-03.html">Link</A>   <A href="./HP-03.html">Link</A>   <A href="./HP-03.html">Link</A>
27.07.2004, 20:12
wrtlprnft

Wegen der enormen Grafiklast und der schlechten resizibality hab ich mal versucht, das Ganze umzuschreiben. Das ist dabei rausgekommen.

Das einzige Problem besteht darin, dass der I€ (••••••teil) bei den Ecken oben nicht mitmachen will. Gibt es da irgenteine Möglichkeit, den Rand da wegzubekommen?
27.07.2004, 20:22
Jesus_666

Versuch's mal mit dieser Methode. (Anmerkung: Für IE-Kompatibilität muß man einen häßlichen Hack benutzen.)
27.07.2004, 22:42
wrtlprnft

http://www.multimediaxis.de/images/s.../smilie_06.gif>_<http://www.multimediaxis.de/images/s.../smilie_06.gif
Naja, um ehrlich zu sein: Ich hab befürchtet, dass der Hack noch komplizierter wird...
Fehlt bloß noch der Amaya... Wieso macht der die Tabellenzelle einfach zu kurz?

Edit: So, ich hab deine Seite noch in Dillo und ELinks getestet. Das Ergebnis (unten Dillo, oben ELinks, links deine, rechts meine Version, beide Browser sind auf Standarteinstellungen)
Da kann man jetzt geteilter Meinung sein, welche Variante man jetzt bevorzugt. Mir gefällts besser, wenn sämtliche Links in einer Zeile sind.
28.07.2004, 00:37
dadie

sehr interesand.

THX ich werde auch mal mein glück in css suchen.

Habe das das zuviel war weggemacht und einbsichen den Code besser sichtbar gemacht.
28.07.2004, 00:52
wrtlprnft

Für nicht-css-kenntnisse schauts auch ganz gut aus.
Das einzige große Problem in deinem Code ist, dass du im Hauptteil vor jeder Zeile zwei Leerzeichen positionieren musst. Das ist bei mehrzeiligen Texten unmöglich, was deinen Code praktisch unbrauchbar macht. Wenn du statt

PHP-Code:

<td style="background-image: url(./img/04.png); width:516px;" align="left">

PHP-Code:

<td style="background-image: url(./img/04.png); width:516px; padding-left[b][u]:[/u][/b]10px; text-align:left">

schreinst ist alles in Ordnung.
Falls du wirklich noch nix von CSS weißt: Das ist bereits CSS;)
28.07.2004, 01:07
dadie

ich kann zwar css noch nciht lange aber das muss

nicht

PHP-Code:

<td style="background-image: url(./img/04.png); width:516px; padding-left=10px; text-align:left">

heissen das = ist html ne das heist so

PHP-Code:

<td style="background-image: url(./img/04.png); width:516px; padding-left:10px; text-align:left">

:D :D jeha ich kann was in css
28.07.2004, 01:11
wrtlprnft

>_<
Tippfehler... Das merkst du spätestens dann, wenn du es ausprobierst.
28.07.2004, 01:24
dadie

nur mir ist ein problem aufgefallen.

Beim IE ist nach dem letzten link kein br mehr
und es kommt diereckt das abschluss bild des navigator.

sihe URL :

http://dlcc.funpic.de/HP-03/1.jpg

Jedoch beim Mozilla ist oben und unten ein BR warum ?

sihe URL :

http://dlcc.funpic.de/HP-03/2.jpg

WICHTIG

Link kopieren und in den Brwoser einfügen.