balthier9999
Bekanntes Gesicht
- Mitglied seit
- 26.02.2007
- Beiträge
- 7.598
- Reaktionspunkte
- 0
HTML Tutorial für Cynamite-Profis 
» Tja, *Kira* meinte, es fehle nur noch ein Tutorial für Profis, und da ist es. Doch zuvor muss ich erstmal klären, wer sich angesprochen fühlen sollte, und was das Tutorial bringt...
? Zielgruppe: Beherrscht HTML und CSS quasi blind
? Folgende Gruppe braucht sich (NOCH^^) nicht angesprochen fühlen sollten^^: Weit erfahren in Javascript, Webdesigner, Administratoren^^, PHP, CFM, Flash, uns was es nicht sonst noch für feine Sachen gibt. Ich könnte mir aber vorstellen, zumindest für Flash, vllt. sogar für AS in Zukunft ein Tutorial mit kleinen Tipps zu machen. Mal sehen.
? Wieder einmal behandele ich nur Themen, die Cynamite.de betreffen. Für eine eigene Website muss man sich so oder so mit »richtigen« Tutorials/Büchern befassen... Naja, und stellenweise wäre´s dann auch nicht so kompliziert und umständlich
? Das Tutorial lädt zu Spielereien ein. Wie du vielleicht schon erkannt hast, will ich ein bisschen mit Javascript rumspielen. Kenner wissen, ohne das -Tag geht das nur mit Eventhandlern. Doch auch damit ist einiges möglich...
? Aufgrund der begrenzten Möglichkeiten, wird der Blog diesmal script-technisch etwas kürzer ausfallen. Als Entschädigung kommen zum Schluss ein paar Gestaltungstipps für Grafiken... Diese sind sehr ausführlich ? wen wunderts, ist ja mein Beruf^^ ? deshalb vielleicht interressant, vielleicht überflüssig
! Hinweis: Der gesamte Blog ist auch im Download-Bereich zu finden. Häufig werde ich auch auf den Download-Bereich verweisen, wegen Beispielen. Deswegen habe ich eine ähnlich aussehende Version mit Links zu den Beispielen erstellt. Du findest diese Datei gleich im ersten Oberordner des Download-Zips. Geht aber notfalls auch ohne
JAVASCRIPT UND VISIBILITY:
» Erstmal allgemein was zu Javascript. Wie bei CSS benötigt man für Javascript (o. Jscript ) eigentlich im Header ein Tag, dass Befehle für die gesamte Seite enthält. Doch wie bei CSS lässt sich dies umgehen. Und zwar mit Eventhandlern. Ich arbeite generell mit OnMouse-Befehlen; das hab ich mir so angewöhnt, aber es geht auch mit OnClick etc. ... Natürlich ist Javascript eine Programmiersprache, die aber flexibler ist als C... Dennoch ist der Grundaufbau ähnlich... Für unser Profil können wir komplexe Befehle leider nicht nutzen, lediglich ein paar vielleicht von euch noch nicht genutzten CSS-Befehlen... Fangen wir an, mit einem Fenster, mit einem Bild, dass verschwinden soll, wenn ich Knopf A klicke, und wieder erscheinen soll, wenn ich Knopf B drücke.
Dazu brauchen wir das id-Attribut, einen onmousedown-Handler, und den wahrscheinlich nicht so geläufige CSS-Style visibility (mit 4 i, nicht vergessen!).
Mit id geben wir einem Objekt einen Namen. So weiß dann der Eventhandler, welches Objekt es quasi anvisieren soll. Onmouse sollte jeder von euch schon kennen: Damit definieren wir, bei welcher Aktion des Users der jeweilige Vorgang beginnen soll. Visibility hingegen ist ein normales Style-Attribut, welches also auch nach der Standard-Syntax "Visibility:Value;" funktioniert. Der Name sagt es schon: Dieser Style macht Elemente unsichtbar, oder sichtbar. Die Variablen lauten visible (show funktioniert nicht immer, nur bei IE glaube) und hidden. Also sichtbar und versteckt. Ein Beispiel findest du bei den Downloads (Werbung für mein Profil)
Zusätzlich habe ich mal bei den unten span-Tags den Style cursor eingesetzt (wollte ich immer mal machen :-Þ ).
Der User klickt nun auf MINIMIEREN, dann wird dem ... das Style Visibility umgeändert auf Hidden, und bei MAXIMIEREN halt andersrum.
Wie man sieht, funktioniert das Prinzip so:
Erst der Eventhandler, damit das ganze überhaupt möglich ist. Dann muss definiert werden, welches Element anvisiert werden soll. Im oberen Fall haben wir einem Objekt eine ID zugewiesen, man kann aber auch das Objekt selbst anvisieren... Das ist sogar viel bequemer, denn dann müssen wir nur this. schreiben, anstatt document.getElementById('id des Objekts'). etc. ... Danach folgt dann das betroffene Attribut, im oberen Fall style. ... Dann folgt der jeweilge Style. Wichtig! Aus irgendeinem Grund wird hierbei kein Doppelpunkt eingesetzt, sondern ein Ist-Gleich. Außerdem muss der Style in einzelne Klammer '...' eingeschlossen werden, da der gesamte Befehl bereits mit Anführungsstrichen " eingerahmt ist. Allerdings muss man gleich sagen, dass der Tobi uns position:absolute verboten hat^^, also können wir keine schicken Navileisten machen, die beim Scrollen bleiben.
(nochmal ein Hinweis: Zum Erfassen der ID nehmen wir document.getElementById('id') und nicht document.all., weil letzteres Probleme macht!)
Ein Anwendungsbeispiel für diese Sache findet ihr auf meinem Profil ganz oben. Dort ist eine Werbung für das hypergeniale FFW-Forum, die man aber minimieren kann, wenn sie stört. Es geht natürlich auch der umgekehrte Weg: Ein nicht sichtbares div mit Links erscheint erst, wenn man z.B. drüberfährt, und per OnMouseOut verschwindet sie wieder... kennen wir doch Cynamite, oder?^^ Hier mal ein Beispiel mit -Tags:
Hier drüberfahren
Unterpunkt
1Unterpunkt 2Unterpunkt 3
Die Unterpunkte könnten noch in Links umgewandelt werden... Natürlich ist dies nur eine Anwendung mit ... für mehrere Buttons nebeneinander kann man´s ja mit s versuchen.
Natürlich sei gesagt, dass man solche Spielereien nur für den wirklichen Zweck und zum Wohle des Betrachters benutzen und gestalten sollte. Vielleicht ist es ganz lustig, wenn man jeden Text erst aufklappen muss, aber den User wird´s wohl eher nerven.
Man kann mit diesem Wissen schon sehr viel anfangen; Kreativität ist gefragt. Beispielsweise könnte man ein Mosaik aus Bildern in einer anordnen, die alle onmousedown-Befehle mit id-»Verlinkungen«^^ zu einem passenden Text unterhalb des Mosaiks. Also mal als Beispiel eine Freundesliste: Oben sind 5 quadratische Bilder mit den User-Avataren, in der nächsten Zeile nochmal 5... Für die Optik sind diese grau gefärbt. Jedes Bild hat onmousedown="document.getElementById('id des Objekts').style.visibility='visible';"... Unterhalb des s sind dann von mir aus Textboxen, mit den entsprechenden Texten. Nicht vergessen: Diese müssen anfangs im style die visibility auf hidden haben!
Oder eine Navibar, bei der über jedem Punkt eine Beschreibung erscheint, wenn man drüber fährt. Dann muss man nur drauf klicken, und man wird geanker-linkt^^...
Du siehst, es gibt viele Möglichkeiten. Ich für meinen Teil fummle an dem oben genannten Werbefeature, werde aber sicherlich nochmal darauf zurückgreifen. Effekthascherei, ja... kann man so nennen, aber wozu haben wir denn die HTML-Editor-Möglichkeit ;D Und in den ebengenannten Fällen würde es sicher auch nicht nerven... Besser, als achso lustige alerts *räusper*
So, man könnte fast sagen, mir geht die Puste aus... Es gibt zwar noch lustige Möglichkeiten, aber die sind nicht wirklich sinnvoll. Ein Taschenrechner, beispielsweise xD... Naja^^
Aber das war ja noch nicht alles. Als nächstes ein paar Dinge, die man vielleicht so gar nicht gewußt hätte... Oder auch doch O.O ...Naja^^
DISPLAY-EIGENSCHAFT:
» Oben haben wir die Visibilty-Eigenschaft behandelt. Sie macht es uns möglich, beispielsweise für ein Javascript-Spielchen, Dinge per Klick verschwinden zu lassen. Offensichtliches Problem ist nun aber, dass der Containerinhalt zwar verschwindet, aber die Maße des Containers an sich bestehen bleiben. Wenn ihr euch beispielsweise meine Werbung anschaut, läuft da das ganze etwas anders: Da wird die Box verkleinert, wenn man sie minimert. Wie´s funktioniert? Mit display! Display ist eigentlich das bessere Visibilty, obwohl man mit Visibilty schon einiges anstellen kann (ich sag nur Beispiele anschauen). Doch der Vorteil liegt auf der Hand: Visibility versteckt leider nicht den reseriverten Platz für das betroffende Objekt. Display hingegen schon. Die Variablen unterscheiden sich aber sehr, da durch CSS 2 sehr viele existieren. Deren Bedeutung sollte aber selbstverständlich sein. Viel wichtiger ist die Variable none. Die versteckt logischerweise das Objekt. Auch hierfür findest du ein Beispiel in den Download-Dateien.
Hier sind nun die Variablen/Werte: block, compact, inline, inline-table, list-item, none, run-in, table, table-caption, table-cell, table-column-group, table-footer-group, table-header-group, table-row, table-row-group
Für das Beispiel gilt einfach: Es ist eine Tabellenzelle, also hat sie im style zunächst den Wert table-cell. Bei dem Onmousedown-Befehl wird dieser display-Wert auf none umgeschaltet. Ist also nicht viel anders, als bei Visibilty. Anwendungsbeispiele gibt´s viele: Listen, die sich ein und ausklappen, eben meine Werbung, etc. Ist also wiedermal eure Kreativität gefragt. Als kleines Beispiel habe ich nochmal die Freundesliste mit den neuen Eigenschaften umgeschrieben.
Sicher mag diese Variante viel besser erscheinen, als Display, aber ich finde, mit Visibility lassen sich auch coole Dinge erstellen; die Freudesliste mit Visibility finde ich nämlich gar nicht mal so schlecht, vom Design her.
OBJECTs/ MEDIEN:
Die meisten werden »Medien« eh von Seiten kopieren. Aber dennoch möchte ich trotzallem noch ein kleines Wörtchen drüber verlieren Der Begriff ist eventuell irreführend, denn OBJECTs können Dateiformate darstellen. Um diese darstellen zu können, benötigt der User ein entsprechendes Plug-In, beispielsweise Flash Player oder Java. Doch egal, es geht mir vielmehr um eine minimale Sache: Nicht jeder User hat das passende Plug-In. Denn häufig gibt´s User, die während der Arbeit mal kurz vorbeischauen. Da kann es sein, dass es dort keinen Flash-Player gibt... Die Lösung für dieses Problem ist Verschachtelung! Denn seit HTML4 können OBJECTs verschachtelt werden! Das höhere OBJECT wird als das ausschlaggende gesehen, falls ein Plug-In fehlt, wird das unterliegende benutzt. Logischerweise könnte ein OBJECT auch ein JPEG-Bild sein, dass ja eigentlich jeder Browser sehen kann. Schön ist, dass ihr hierbei die Kontrolle habt, wie dieses JPEG-Bild aussehen soll, zum Beispiel ein Bild mit Schrift »Besorg dir nen Flash Player, du Pfeife!«. So würde es dann ungefähr aussehen:
Video
Und das war´s schon xD Naja, wie bereits erwähnt, ist das Einbinden von Medien an sich einfach, da entsprechende Websites bereits den richtigen Quellcode zur Verfügung stellt.
UMBRUCH BEI DIVs:
» Vielleicht gibt´s einige, die sich daran stören, dass s automatisch einen Zeilenumbruch erzeugen, sodass man sie nicht so schick nebeneinanderstellen kann, wie die für einige doofen s... Aber es gibt eine einfache Lösung ? float:left... Dadurch wird das nächste Element links angeordnet. Da wir Klassen nicht einsetzen können, muss der flooooot^^ wie immer im Inline-Style jedes s angegeben werden. Täterätä!^^
TEXTAREA MARKIEREN PER BUTTON:
» Textareas sollte man eigentlich für die eigenen Profile vermeiden, weil es nicht wirklich professionell aussieht. Anders ist das, wenn man einen Code zur Verfügung stellen möchte. Beispielsweise TyBmaNs Eichelhörnchen-GIF-Animation. Er könnte den Quellcode für andere User in eine Textarea einarbeiten, damit andere User diesen kopieren können, andererseits aber der Code nicht soviel Platz wegnimmt. Ein Platzsparer also. Möchte man nun es den Usern einfach machen, erstellt man einen Alles-Markieren-Link. Und zwar setzen wir einen OnClick-Befehl, der die Textbox fokussiert und selektiert. So sieht´s dann aus:
Link blablabla Link
Damit lässt sich natürlich auch der »Hörnch, Hörnch«-Spruch kompakt zur Verfügung stellen
EMPFEHLENSWERTE FIREFOX-PLUG-INS:
Fireshot:
Erstellt einen Komplettscreen von einer Website. Also sprich alles wird abfotografiert, selbst wenn es nicht auf dem Bildschirm zu sehen ist.
Firebug:
Das Webdesign-Tool schlechthin, denn es analysiert (per Klick auf Untersuchen) die Oberfläche, zeigt bequem die Styles an, und erkennt Fehler.
GRAFIKEN:
» Inzwischen weiß jeder: JPEGs, GIFs und PNGs sind die Formate für´s Internet. JPEG zeigt qualitativ recht hochwertige Bilder, die sehr schnell aufgerufen werden, GIFs können ebenfalls sehr schnell aufgerufen werden, sind aber beschränkt auf wenige Farben, dafür unterstützt es aber eine absolute Transparenz. PNGs hingegen zeigen wohl die beste Qualität mit Halbtransparenzen, brauchen dafür länger beim Laden. Man muss also abwägen. Zwar könnte man für ein großes Bild (z.B. ein Hintergrundbild) eine PNG verwenden, jedoch ist das für Modem-Nutzer, von denen es noch sehr, sehr viele gibt (...) unzumutbar, bzw. nicht sinnvoll. Für große Bilder verwendet man idealerweise JPEG.
PNGs sind für mich wegen ihrer Transparenz interressant. Auf meinem Profil tauche ich^^ beispielsweise ins Wasser. Das Wasser ist ein PNG mit größe 1 x 1, sprich es wird schnell geladen. Dafür hat man eine schöne Halbtransparenz. Allgemein ist PNG für kleine Sachen gut geeignet. Hierfür eignet sich aber auch GIF. Ich persönlich nutze dieses Format nie...
Programme:
Es gibt natürlich Unterschiede, gewaltige sogar. Am besten ist es natürlich, Fireworks oder ImageReady zu besitzen. Theoretisch kann man die Grafiken auch in Photoshop erstellen... Zwar nenne ich den Blog Profi-Blog, aber er richtet sich dennoch an die ... mittelerfahrenen xD ... Also kann ich nicht verlangen, dass ihr euch teure Programme besorgt. Nutzt dazu das kostenlose PhotoFiltre... Ist recht übersichtlich, und mit der Zeit geht die Steuerung in Fleisch und Blut über. Leider besitzt dieses Programm keine Halbtransparenzendarstellung. Dafür aber PaintNET. Wollt ihr beispielsweise ein halbtransparentes 1 x 1px-Bilchen erzeugen: Bild mit entsprechender Größe erstellen, Ebenen-Eigenschaften ändern, Ebenentransparenz auf sagen wir 50% setzen, und als PNG speichern. Tada!
Mit etwas Mühe mit dem Radierer könnt ihr sogar Bilder ausschneiden. Dank Ebenen könnt ihr sogar halbtransparente Bilder unter, oder über nicht-transparente Bilder drüberlegen.
DESIGN:
» Ersteinmal grundsätzlich nützliches, was aber häufig falsch gemacht wird:
? Farben
Häufig sieht man auf Cynamite Profile, die ja nur vor Farben so explodieren. Vorallem bei Schriften ist das ein Graus! Wichtigste Regel überhaupt ^^: Schriften bekommen eine neutrale Farbe. Also Schwarz, Weiß oder ein in eine Richtung tendierendes Grau (also Hellgrau bei dunklem Hintergrund etc.). Einzige Ausnahme sollten Links, Hervorhebungen und Überschriften sein!
Und bitte legt vorher 3 Farben fest, die euer Profil beherrschen sollen. Zwei Farben gehen auch, sehen aber im Endeffekt etwas langweilig aus. Drei sind eigentlich das Optimum. Am besten eine Hintergrundfarbe, etwas Neutrales, wie Grau; eine Stilfarbe, die euch und euer Profil charakterisiert, und eine Auszeichnungsfarbe. Am besten wäre dabei natürlich ein optimaler Kontrast. Rot und Blau geht zum Beispiel überhaupt nicht. Rot und Grün ist perfekt, da sich die Farben im Farbkreis am entferntesten stehen, und damit den optimalsten Kontrast bieten. Oder man wählt einen weniger kontraststarken Unterschied, wie bei mir: Das sind´s Orange, Gelb und Weiß (im groben Gerüst). Ich habe mal einige Beispiele im Downloadbereich gezeigt, die gute, und schlechte Darstellungsweisen zeigen. Es geht hier übrigens wenig um Geschmack, sondern um Lesbarkeit! Und auch einfach um gutes Design. Es existieren schlichtweg Regeln, die von Natur (Goldener Schnitt), oder von der Gesellschaft vorgeschrieben sind, und die wir auch seit Geburt an akzeptiert haben. Und jeder wird zugeben müssen, dass ein Rot-Weiß-Schwarzes Layout besser aussieht, als ein Grün-Blau-Lila-Rotes Layout.
Legt euch eine Farbe fest, am besten orientiert ihr euch am Ava. Also, ich nehme Gelb, TyB nimmt Orange, Stargate Dunkelblau, Kratos66^^ Lila, Duffman Blau, etc. pp.
Nochmal: Keine bunten Farben für großen Text!
? Typografie
Typografie, dass heißt vorallem Schrift! Zum Glück(!) gibt es noch Einschränkungen bei Schriftarten, denn wer weiß, was wir an Fonttypes ertragen müssten, wenn alle die Vorzüge CSS3 nutzen würden. Grundsätzlich wiedermal der Hinweis: legt euch eine Schriftart fest! BESONDERS bei Schriftarten ist diese Regel wichtig. Wenn eine Website dutzende Schriftarten verwendet (weil es wohl Abwechslung geben soll?^^), dann kommt der User im Lesefluss durcheinander. Besonders, wenn ähnliche Schriften verwendet werden. Problem ist auch noch, dass die Websschriften unterschiedliche Zeilenabstände haben. Eine Monotype hat beispielsweise sehr geringe Zeilenabstände. Das kann zum Ärgenis werden, wenn eine offene Arial plötzlich von einer engen Courier unterbrochen wird! Im Zweifelsfall vergrößert man den Zeilenabstand per CSS. Es gibt wieder Ausnahmen: Überschriften. Es kann für den Stil vorteilhaft sein, für Headlines besondere Schriften zu verwenden. Ich rate sogar dazu, allerdings beachtet immer das Gesamtbild eures Layout. Ein frisches, modernes, technisch anmutendes Layout sollte keine Serifenschriften enthalten (Serifenschriften sind die, bei denen die Buchstaben Füsschen haben, wie die Times).
Noch ein Hinweis wegen Schriftgrößen: Bitte Fließtexte nicht mit Größen wie 20px oder so festlegen. Das ist unschön, liest sich schlecht, und ist unprofessionell. 12px sind Standard, allerdings kann man durch kleinere Größen einen anderen Charakter in Schriftarten wecken. Die Arial in 12px kennt jeder, macht man sie aber fett und verkleinert die Schriftgröße auf 10px sieht sie plötzlich ganz toll und neu aus.
? Hintergrundbilder
Sie sind zwar was feines, die Hintergrundbilder, jedoch lenken sie vom Text ab, oder überblenden ihn sogar. Es ist zwar nicht falsch, Hintergrundbilder einzusetzen, aber bitte kontrastärmere Bilder, die nicht in Konflikt mit der Schrift kommen. Ein Tipp vielleicht: Wenn ihr UNBEDINGT ein Bild von z.B. Resident Evil 5 im Hintergrund haben wollt, dann erstellt hinter euren Text durchsichtige Blöcke. Also ihr macht den Text in eine und gibt diesem ein background-image mit einem 1x1px-Bild, welches halbtransparent ist (Beispiel im Download-Teil). So habt ihr euer Bild, aber der Text bleibt ansehnlich. Nochdazu sieht es designmäßig gut aus.
? Medien
Auf einer Games-Seite sind natürlich Games auf dem Profil eine logische Sache. Allerdings gibt es Probleme: Modem-Nutzer interressiert´s nicht, und der Rest bekommt eventuell Probleme mit seinem Browser (manche Spiele beanspruchen nunmal halt viel Arbeitsspeicher). Und da nicht jeder ein Super-Highend-PC hat, sollte man Spiele lieber nicht auf dem Profil darstellen, sondern stattdessen lieber auf Seiten verlinken, wo diese Spiele zu finden sind. Mit Bildern und überzeugenden Text kann man auch so dem User zum Anschauen anregen. Das gleiche gilt für Youtube-Videos. Es ist sicher Geschmackssache, und ein paar Videos stören nicht. Trotzdem finde ich, sollten die Videos Bezug zum Profil aufnehmen. Sprich, sie sollen nicht einfach so im Raum liegen, sondern Bestandteil des Layouts sein. Neben einem Video könnte beispielsweise eine Beschreibung dessen stehen; ideal für Modem-Nutzer. Am besten legt man noch Alternativen für Medien fest, wie oben im OBJECT-Teil bereits erklärt wurde.
So, das war´s erstmal. Hoffe, den ein oder anderen etwas neues beigebracht zu haben. Hier findest du übrigens die Download-Datei, von mir erstellt, deshalb garantiert virenfrei.
Achja, bei Fragen, fragen!^^
» Tja, *Kira* meinte, es fehle nur noch ein Tutorial für Profis, und da ist es. Doch zuvor muss ich erstmal klären, wer sich angesprochen fühlen sollte, und was das Tutorial bringt...
? Zielgruppe: Beherrscht HTML und CSS quasi blind
? Folgende Gruppe braucht sich (NOCH^^) nicht angesprochen fühlen sollten^^: Weit erfahren in Javascript, Webdesigner, Administratoren^^, PHP, CFM, Flash, uns was es nicht sonst noch für feine Sachen gibt. Ich könnte mir aber vorstellen, zumindest für Flash, vllt. sogar für AS in Zukunft ein Tutorial mit kleinen Tipps zu machen. Mal sehen.
? Wieder einmal behandele ich nur Themen, die Cynamite.de betreffen. Für eine eigene Website muss man sich so oder so mit »richtigen« Tutorials/Büchern befassen... Naja, und stellenweise wäre´s dann auch nicht so kompliziert und umständlich
? Das Tutorial lädt zu Spielereien ein. Wie du vielleicht schon erkannt hast, will ich ein bisschen mit Javascript rumspielen. Kenner wissen, ohne das -Tag geht das nur mit Eventhandlern. Doch auch damit ist einiges möglich...
? Aufgrund der begrenzten Möglichkeiten, wird der Blog diesmal script-technisch etwas kürzer ausfallen. Als Entschädigung kommen zum Schluss ein paar Gestaltungstipps für Grafiken... Diese sind sehr ausführlich ? wen wunderts, ist ja mein Beruf^^ ? deshalb vielleicht interressant, vielleicht überflüssig
! Hinweis: Der gesamte Blog ist auch im Download-Bereich zu finden. Häufig werde ich auch auf den Download-Bereich verweisen, wegen Beispielen. Deswegen habe ich eine ähnlich aussehende Version mit Links zu den Beispielen erstellt. Du findest diese Datei gleich im ersten Oberordner des Download-Zips. Geht aber notfalls auch ohne
JAVASCRIPT UND VISIBILITY:
» Erstmal allgemein was zu Javascript. Wie bei CSS benötigt man für Javascript (o. Jscript
) eigentlich im Header ein Tag, dass Befehle für die gesamte Seite enthält. Doch wie bei CSS lässt sich dies umgehen. Und zwar mit Eventhandlern. Ich arbeite generell mit OnMouse-Befehlen; das hab ich mir so angewöhnt, aber es geht auch mit OnClick etc. ... Natürlich ist Javascript eine Programmiersprache, die aber flexibler ist als C... Dennoch ist der Grundaufbau ähnlich... Für unser Profil können wir komplexe Befehle leider nicht nutzen, lediglich ein paar vielleicht von euch noch nicht genutzten CSS-Befehlen... Fangen wir an, mit einem Fenster, mit einem Bild, dass verschwinden soll, wenn ich Knopf A klicke, und wieder erscheinen soll, wenn ich Knopf B drücke.Dazu brauchen wir das id-Attribut, einen onmousedown-Handler, und den wahrscheinlich nicht so geläufige CSS-Style visibility (mit 4 i, nicht vergessen!).
Mit id geben wir einem Objekt einen Namen. So weiß dann der Eventhandler, welches Objekt es quasi anvisieren soll. Onmouse sollte jeder von euch schon kennen: Damit definieren wir, bei welcher Aktion des Users der jeweilige Vorgang beginnen soll. Visibility hingegen ist ein normales Style-Attribut, welches also auch nach der Standard-Syntax "Visibility:Value;" funktioniert. Der Name sagt es schon: Dieser Style macht Elemente unsichtbar, oder sichtbar. Die Variablen lauten visible (show funktioniert nicht immer, nur bei IE glaube) und hidden. Also sichtbar und versteckt. Ein Beispiel findest du bei den Downloads (Werbung für mein Profil)
Zusätzlich habe ich mal bei den unten span-Tags den Style cursor eingesetzt (wollte ich immer mal machen :-Þ ).
Der User klickt nun auf MINIMIEREN, dann wird dem ... das Style Visibility umgeändert auf Hidden, und bei MAXIMIEREN halt andersrum.
Wie man sieht, funktioniert das Prinzip so:
Erst der Eventhandler, damit das ganze überhaupt möglich ist. Dann muss definiert werden, welches Element anvisiert werden soll. Im oberen Fall haben wir einem Objekt eine ID zugewiesen, man kann aber auch das Objekt selbst anvisieren... Das ist sogar viel bequemer, denn dann müssen wir nur this. schreiben, anstatt document.getElementById('id des Objekts'). etc. ... Danach folgt dann das betroffene Attribut, im oberen Fall style. ... Dann folgt der jeweilge Style. Wichtig! Aus irgendeinem Grund wird hierbei kein Doppelpunkt eingesetzt, sondern ein Ist-Gleich. Außerdem muss der Style in einzelne Klammer '...' eingeschlossen werden, da der gesamte Befehl bereits mit Anführungsstrichen " eingerahmt ist. Allerdings muss man gleich sagen, dass der Tobi uns position:absolute verboten hat^^, also können wir keine schicken Navileisten machen, die beim Scrollen bleiben.
(nochmal ein Hinweis: Zum Erfassen der ID nehmen wir document.getElementById('id') und nicht document.all., weil letzteres Probleme macht!)
Ein Anwendungsbeispiel für diese Sache findet ihr auf meinem Profil ganz oben. Dort ist eine Werbung für das hypergeniale FFW-Forum, die man aber minimieren kann, wenn sie stört. Es geht natürlich auch der umgekehrte Weg: Ein nicht sichtbares div mit Links erscheint erst, wenn man z.B. drüberfährt, und per OnMouseOut verschwindet sie wieder... kennen wir doch Cynamite, oder?^^ Hier mal ein Beispiel mit -Tags:
Hier drüberfahren
Unterpunkt
1Unterpunkt 2Unterpunkt 3
Die Unterpunkte könnten noch in Links umgewandelt werden... Natürlich ist dies nur eine Anwendung mit ... für mehrere Buttons nebeneinander kann man´s ja mit s versuchen.
Natürlich sei gesagt, dass man solche Spielereien nur für den wirklichen Zweck und zum Wohle des Betrachters benutzen und gestalten sollte. Vielleicht ist es ganz lustig, wenn man jeden Text erst aufklappen muss, aber den User wird´s wohl eher nerven.
Man kann mit diesem Wissen schon sehr viel anfangen; Kreativität ist gefragt. Beispielsweise könnte man ein Mosaik aus Bildern in einer anordnen, die alle onmousedown-Befehle mit id-»Verlinkungen«^^ zu einem passenden Text unterhalb des Mosaiks. Also mal als Beispiel eine Freundesliste: Oben sind 5 quadratische Bilder mit den User-Avataren, in der nächsten Zeile nochmal 5... Für die Optik sind diese grau gefärbt. Jedes Bild hat onmousedown="document.getElementById('id des Objekts').style.visibility='visible';"... Unterhalb des s sind dann von mir aus Textboxen, mit den entsprechenden Texten. Nicht vergessen: Diese müssen anfangs im style die visibility auf hidden haben!
Oder eine Navibar, bei der über jedem Punkt eine Beschreibung erscheint, wenn man drüber fährt. Dann muss man nur drauf klicken, und man wird geanker-linkt^^...
Du siehst, es gibt viele Möglichkeiten. Ich für meinen Teil fummle an dem oben genannten Werbefeature, werde aber sicherlich nochmal darauf zurückgreifen. Effekthascherei, ja... kann man so nennen, aber wozu haben wir denn die HTML-Editor-Möglichkeit ;D Und in den ebengenannten Fällen würde es sicher auch nicht nerven... Besser, als achso lustige alerts *räusper*
So, man könnte fast sagen, mir geht die Puste aus... Es gibt zwar noch lustige Möglichkeiten, aber die sind nicht wirklich sinnvoll. Ein Taschenrechner, beispielsweise xD... Naja^^
Aber das war ja noch nicht alles. Als nächstes ein paar Dinge, die man vielleicht so gar nicht gewußt hätte... Oder auch doch O.O ...Naja^^
DISPLAY-EIGENSCHAFT:
» Oben haben wir die Visibilty-Eigenschaft behandelt. Sie macht es uns möglich, beispielsweise für ein Javascript-Spielchen, Dinge per Klick verschwinden zu lassen. Offensichtliches Problem ist nun aber, dass der Containerinhalt zwar verschwindet, aber die Maße des Containers an sich bestehen bleiben. Wenn ihr euch beispielsweise meine Werbung anschaut, läuft da das ganze etwas anders: Da wird die Box verkleinert, wenn man sie minimert. Wie´s funktioniert? Mit display! Display ist eigentlich das bessere Visibilty, obwohl man mit Visibilty schon einiges anstellen kann (ich sag nur Beispiele anschauen). Doch der Vorteil liegt auf der Hand: Visibility versteckt leider nicht den reseriverten Platz für das betroffende Objekt. Display hingegen schon. Die Variablen unterscheiden sich aber sehr, da durch CSS 2 sehr viele existieren. Deren Bedeutung sollte aber selbstverständlich sein. Viel wichtiger ist die Variable none. Die versteckt logischerweise das Objekt. Auch hierfür findest du ein Beispiel in den Download-Dateien.
Hier sind nun die Variablen/Werte: block, compact, inline, inline-table, list-item, none, run-in, table, table-caption, table-cell, table-column-group, table-footer-group, table-header-group, table-row, table-row-group
Für das Beispiel gilt einfach: Es ist eine Tabellenzelle, also hat sie im style zunächst den Wert table-cell. Bei dem Onmousedown-Befehl wird dieser display-Wert auf none umgeschaltet. Ist also nicht viel anders, als bei Visibilty. Anwendungsbeispiele gibt´s viele: Listen, die sich ein und ausklappen, eben meine Werbung, etc. Ist also wiedermal eure Kreativität gefragt. Als kleines Beispiel habe ich nochmal die Freundesliste mit den neuen Eigenschaften umgeschrieben.
Sicher mag diese Variante viel besser erscheinen, als Display, aber ich finde, mit Visibility lassen sich auch coole Dinge erstellen; die Freudesliste mit Visibility finde ich nämlich gar nicht mal so schlecht, vom Design her.
OBJECTs/ MEDIEN:
Die meisten werden »Medien« eh von Seiten kopieren. Aber dennoch möchte ich trotzallem noch ein kleines Wörtchen drüber verlieren
Der Begriff ist eventuell irreführend, denn OBJECTs können Dateiformate darstellen. Um diese darstellen zu können, benötigt der User ein entsprechendes Plug-In, beispielsweise Flash Player oder Java. Doch egal, es geht mir vielmehr um eine minimale Sache: Nicht jeder User hat das passende Plug-In. Denn häufig gibt´s User, die während der Arbeit mal kurz vorbeischauen. Da kann es sein, dass es dort keinen Flash-Player gibt... Die Lösung für dieses Problem ist Verschachtelung! Denn seit HTML4 können OBJECTs verschachtelt werden! Das höhere OBJECT wird als das ausschlaggende gesehen, falls ein Plug-In fehlt, wird das unterliegende benutzt. Logischerweise könnte ein OBJECT auch ein JPEG-Bild sein, dass ja eigentlich jeder Browser sehen kann. Schön ist, dass ihr hierbei die Kontrolle habt, wie dieses JPEG-Bild aussehen soll, zum Beispiel ein Bild mit Schrift »Besorg dir nen Flash Player, du Pfeife!«. So würde es dann ungefähr aussehen:Video
Und das war´s schon xD Naja, wie bereits erwähnt, ist das Einbinden von Medien an sich einfach, da entsprechende Websites bereits den richtigen Quellcode zur Verfügung stellt.
UMBRUCH BEI DIVs:
» Vielleicht gibt´s einige, die sich daran stören, dass s automatisch einen Zeilenumbruch erzeugen, sodass man sie nicht so schick nebeneinanderstellen kann, wie die für einige doofen s... Aber es gibt eine einfache Lösung ? float:left... Dadurch wird das nächste Element links angeordnet. Da wir Klassen nicht einsetzen können, muss der flooooot^^ wie immer im Inline-Style jedes s angegeben werden. Täterätä!^^
TEXTAREA MARKIEREN PER BUTTON:
» Textareas sollte man eigentlich für die eigenen Profile vermeiden, weil es nicht wirklich professionell aussieht. Anders ist das, wenn man einen Code zur Verfügung stellen möchte. Beispielsweise TyBmaNs Eichelhörnchen-GIF-Animation. Er könnte den Quellcode für andere User in eine Textarea einarbeiten, damit andere User diesen kopieren können, andererseits aber der Code nicht soviel Platz wegnimmt. Ein Platzsparer also. Möchte man nun es den Usern einfach machen, erstellt man einen Alles-Markieren-Link. Und zwar setzen wir einen OnClick-Befehl, der die Textbox fokussiert und selektiert. So sieht´s dann aus:
Link blablabla Link
Damit lässt sich natürlich auch der »Hörnch, Hörnch«-Spruch kompakt zur Verfügung stellen
EMPFEHLENSWERTE FIREFOX-PLUG-INS:
Fireshot:
Erstellt einen Komplettscreen von einer Website. Also sprich alles wird abfotografiert, selbst wenn es nicht auf dem Bildschirm zu sehen ist.
Firebug:
Das Webdesign-Tool schlechthin, denn es analysiert (per Klick auf Untersuchen) die Oberfläche, zeigt bequem die Styles an, und erkennt Fehler.
GRAFIKEN:
» Inzwischen weiß jeder: JPEGs, GIFs und PNGs sind die Formate für´s Internet. JPEG zeigt qualitativ recht hochwertige Bilder, die sehr schnell aufgerufen werden, GIFs können ebenfalls sehr schnell aufgerufen werden, sind aber beschränkt auf wenige Farben, dafür unterstützt es aber eine absolute Transparenz. PNGs hingegen zeigen wohl die beste Qualität mit Halbtransparenzen, brauchen dafür länger beim Laden. Man muss also abwägen. Zwar könnte man für ein großes Bild (z.B. ein Hintergrundbild) eine PNG verwenden, jedoch ist das für Modem-Nutzer, von denen es noch sehr, sehr viele gibt (...) unzumutbar, bzw. nicht sinnvoll. Für große Bilder verwendet man idealerweise JPEG.
PNGs sind für mich wegen ihrer Transparenz interressant. Auf meinem Profil tauche ich^^ beispielsweise ins Wasser. Das Wasser ist ein PNG mit größe 1 x 1, sprich es wird schnell geladen. Dafür hat man eine schöne Halbtransparenz. Allgemein ist PNG für kleine Sachen gut geeignet. Hierfür eignet sich aber auch GIF. Ich persönlich nutze dieses Format nie...
Programme:
Es gibt natürlich Unterschiede, gewaltige sogar. Am besten ist es natürlich, Fireworks oder ImageReady zu besitzen. Theoretisch kann man die Grafiken auch in Photoshop erstellen... Zwar nenne ich den Blog Profi-Blog, aber er richtet sich dennoch an die ... mittelerfahrenen xD ... Also kann ich nicht verlangen, dass ihr euch teure Programme besorgt. Nutzt dazu das kostenlose PhotoFiltre... Ist recht übersichtlich, und mit der Zeit geht die Steuerung in Fleisch und Blut über. Leider besitzt dieses Programm keine Halbtransparenzendarstellung. Dafür aber PaintNET. Wollt ihr beispielsweise ein halbtransparentes 1 x 1px-Bilchen erzeugen: Bild mit entsprechender Größe erstellen, Ebenen-Eigenschaften ändern, Ebenentransparenz auf sagen wir 50% setzen, und als PNG speichern. Tada!
Mit etwas Mühe mit dem Radierer könnt ihr sogar Bilder ausschneiden. Dank Ebenen könnt ihr sogar halbtransparente Bilder unter, oder über nicht-transparente Bilder drüberlegen.DESIGN:
» Ersteinmal grundsätzlich nützliches, was aber häufig falsch gemacht wird:
? Farben
Häufig sieht man auf Cynamite Profile, die ja nur vor Farben so explodieren. Vorallem bei Schriften ist das ein Graus! Wichtigste Regel überhaupt ^^: Schriften bekommen eine neutrale Farbe. Also Schwarz, Weiß oder ein in eine Richtung tendierendes Grau (also Hellgrau bei dunklem Hintergrund etc.). Einzige Ausnahme sollten Links, Hervorhebungen und Überschriften sein!
Und bitte legt vorher 3 Farben fest, die euer Profil beherrschen sollen. Zwei Farben gehen auch, sehen aber im Endeffekt etwas langweilig aus. Drei sind eigentlich das Optimum. Am besten eine Hintergrundfarbe, etwas Neutrales, wie Grau; eine Stilfarbe, die euch und euer Profil charakterisiert, und eine Auszeichnungsfarbe. Am besten wäre dabei natürlich ein optimaler Kontrast. Rot und Blau geht zum Beispiel überhaupt nicht. Rot und Grün ist perfekt, da sich die Farben im Farbkreis am entferntesten stehen, und damit den optimalsten Kontrast bieten. Oder man wählt einen weniger kontraststarken Unterschied, wie bei mir: Das sind´s Orange, Gelb und Weiß (im groben Gerüst). Ich habe mal einige Beispiele im Downloadbereich gezeigt, die gute, und schlechte Darstellungsweisen zeigen. Es geht hier übrigens wenig um Geschmack, sondern um Lesbarkeit! Und auch einfach um gutes Design. Es existieren schlichtweg Regeln, die von Natur (Goldener Schnitt), oder von der Gesellschaft vorgeschrieben sind, und die wir auch seit Geburt an akzeptiert haben. Und jeder wird zugeben müssen, dass ein Rot-Weiß-Schwarzes Layout besser aussieht, als ein Grün-Blau-Lila-Rotes Layout.
Legt euch eine Farbe fest, am besten orientiert ihr euch am Ava. Also, ich nehme Gelb, TyB nimmt Orange, Stargate Dunkelblau, Kratos66^^ Lila, Duffman Blau, etc. pp.
Nochmal: Keine bunten Farben für großen Text!
? Typografie
Typografie, dass heißt vorallem Schrift! Zum Glück(!) gibt es noch Einschränkungen bei Schriftarten, denn wer weiß, was wir an Fonttypes ertragen müssten, wenn alle die Vorzüge CSS3 nutzen würden. Grundsätzlich wiedermal der Hinweis: legt euch eine Schriftart fest! BESONDERS bei Schriftarten ist diese Regel wichtig. Wenn eine Website dutzende Schriftarten verwendet (weil es wohl Abwechslung geben soll?^^), dann kommt der User im Lesefluss durcheinander. Besonders, wenn ähnliche Schriften verwendet werden. Problem ist auch noch, dass die Websschriften unterschiedliche Zeilenabstände haben. Eine Monotype hat beispielsweise sehr geringe Zeilenabstände. Das kann zum Ärgenis werden, wenn eine offene Arial plötzlich von einer engen Courier unterbrochen wird! Im Zweifelsfall vergrößert man den Zeilenabstand per CSS. Es gibt wieder Ausnahmen: Überschriften. Es kann für den Stil vorteilhaft sein, für Headlines besondere Schriften zu verwenden. Ich rate sogar dazu, allerdings beachtet immer das Gesamtbild eures Layout. Ein frisches, modernes, technisch anmutendes Layout sollte keine Serifenschriften enthalten (Serifenschriften sind die, bei denen die Buchstaben Füsschen haben, wie die Times).
Noch ein Hinweis wegen Schriftgrößen: Bitte Fließtexte nicht mit Größen wie 20px oder so festlegen. Das ist unschön, liest sich schlecht, und ist unprofessionell. 12px sind Standard, allerdings kann man durch kleinere Größen einen anderen Charakter in Schriftarten wecken. Die Arial in 12px kennt jeder, macht man sie aber fett und verkleinert die Schriftgröße auf 10px sieht sie plötzlich ganz toll und neu aus.
? Hintergrundbilder
Sie sind zwar was feines, die Hintergrundbilder, jedoch lenken sie vom Text ab, oder überblenden ihn sogar. Es ist zwar nicht falsch, Hintergrundbilder einzusetzen, aber bitte kontrastärmere Bilder, die nicht in Konflikt mit der Schrift kommen. Ein Tipp vielleicht: Wenn ihr UNBEDINGT ein Bild von z.B. Resident Evil 5 im Hintergrund haben wollt, dann erstellt hinter euren Text durchsichtige Blöcke. Also ihr macht den Text in eine und gibt diesem ein background-image mit einem 1x1px-Bild, welches halbtransparent ist (Beispiel im Download-Teil). So habt ihr euer Bild, aber der Text bleibt ansehnlich. Nochdazu sieht es designmäßig gut aus.
? Medien
Auf einer Games-Seite sind natürlich Games auf dem Profil eine logische Sache. Allerdings gibt es Probleme: Modem-Nutzer interressiert´s nicht, und der Rest bekommt eventuell Probleme mit seinem Browser (manche Spiele beanspruchen nunmal halt viel Arbeitsspeicher). Und da nicht jeder ein Super-Highend-PC hat, sollte man Spiele lieber nicht auf dem Profil darstellen, sondern stattdessen lieber auf Seiten verlinken, wo diese Spiele zu finden sind. Mit Bildern und überzeugenden Text kann man auch so dem User zum Anschauen anregen. Das gleiche gilt für Youtube-Videos. Es ist sicher Geschmackssache, und ein paar Videos stören nicht. Trotzdem finde ich, sollten die Videos Bezug zum Profil aufnehmen. Sprich, sie sollen nicht einfach so im Raum liegen, sondern Bestandteil des Layouts sein. Neben einem Video könnte beispielsweise eine Beschreibung dessen stehen; ideal für Modem-Nutzer. Am besten legt man noch Alternativen für Medien fest, wie oben im OBJECT-Teil bereits erklärt wurde.
So, das war´s erstmal. Hoffe, den ein oder anderen etwas neues beigebracht zu haben. Hier findest du übrigens die Download-Datei, von mir erstellt, deshalb garantiert virenfrei.
Achja, bei Fragen, fragen!^^
