Universal Design by Dadie nur 5Kb

**dadie** · 25.07.2004 18:33

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

**Latency** · 25.07.2004 18:51

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

**dadie** · 25.07.2004 19:05

ja das problem ist nur das ich kein css kann.
Aber ist schon geil was in 5kb reinpassen oder ?

**mitaki** · 25.07.2004 19:09

*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.

**Jesus_666** · 25.07.2004 19:23

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.

**dadie** · 25.07.2004 19:26

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

**Jesus_666** · 25.07.2004 20:06

Das ï»¿ wird bei mir überall angezeigt, das steht so im Code.

**dadie** · 25.07.2004 20:14

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 ?

**Latency** · 25.07.2004 20:18

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

**mitaki** · 25.07.2004 20:30

<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">

**dadie** · 25.07.2004 20:39

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

**Maisaffe** · 27.07.2004 15:52

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

)

Dennis

@ Dadie: Boah, du spammst ja überall

**Jesus_666** · 27.07.2004 17:49

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 <br>-Tag:

Code:

<!-- So sieht's aus -->
&nbsp; <A href="./HP-03.html">Link</A><br>
&nbsp; <A href="./HP-03.html">Link</A><br>
&nbsp; <A href="./HP-03.html">Link</A><br>
&nbsp; <A href="./HP-03.html">Link</A><br>

<!-- So mag's Lynx lieber -->
&nbsp; <A href="./HP-03.html">Link</A><br>
&nbsp; <A href="./HP-03.html">Link</A><br>
&nbsp; <A href="./HP-03.html">Link</A><br>
&nbsp; <A href="./HP-03.html">Link</A>

**wrtlprnft** · 27.07.2004 20:12

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?

**Jesus_666** · 27.07.2004 20:22

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

**wrtlprnft** · 27.07.2004 22:42

>_<

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.

**dadie** · 28.07.2004 00:37

sehr interesand.

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

Habe das <br> das zuviel war weggemacht und einbsichen den Code besser sichtbar gemacht.

**wrtlprnft** · 28.07.2004 00:52

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

**dadie** · 28.07.2004 01:07

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">

jeha ich kann was in css

**wrtlprnft** · 28.07.2004 01:11

>_<
Tippfehler... Das merkst du spätestens dann, wenn du es ausprobierst.

Thema: Universal Design by Dadie nur 5Kb

Themen-Optionen

Anzeige

Universal Design by Dadie nur 5Kb

Berechtigungen