22
Jul 08

HTML Zeichenumschreibungen Nachschlagen

Screenshot HTML Entity Character Lookup
Bild1 HTML Entity für Karo gesucht

Auf der Suche nach HTML Umschreibungs Codes von exotischen Zeichen? Natürlich kann man diese in Zeichenreferenzen wie z.B. bei SelfHTML nachschlagen. Viel schneller und schicker geht es allerdings mit HTML Entity Character Lookup von Leftlogic.

Um die Umschreibung für ein beliebiges Symbol zu erhalten, muss dieses einfach in die Suchbox eingegeben werden. Gerade bei exotischen Symbolen reicht es auch aus, ähnliche Symbole einzugeben. So spuckt z.B. die Suche nach einem „a“ auch alle verwandten Zeichen bis hin zu einem „alpha“ und dem mathematischen „für alle“ aus.

Besonders schick, für Mac-Benutzer gibt es das Ganze auch als Dashboard-Widget. Dem gemeine PC Benutzer bleiben die Möglichkeiten, sich den HTML Entity Character Lookup in das Suchfeld des Firefox einzubauen oder sich das FF-Plugin zu installieren.


22
Okt 07

HTML Playground – learning by doing

Screenshot HTML Playground
Lerne XHTML und CSS am Beispiel

Mir persönlich hat es schon immer mehr gebracht, Dinge am praktischen Beispiel zu erlernen. Daher finde ich das Konzept des HTML Playgronds schon einmal sehr einladend. Doch neben dem guten, wenn auch nicht neuen, Konzept ist vor allem die Umsetzung gelungen!

In fünf Feldern kann man die Möglichkeiten des Zusammenspiels von XHTML und CSS entdecken. Im ersten Bereich der Seite wird das Tag, welches man näher kennenlernen möchte ausgewählt. Daraufhin erscheint unten mittig ein Beispielcode und die Anzeige dessen, was der Browser dazu ausspuckt rechts daneben.

Klickt man im Beispielcode auf irgendeinen HTML-Tag (grün) erscheint unten links wahlweise eine Liste der möglichen HTML-Attribute oder CSS-Eigenschaften. Möchte man eines der Attribute, oder eine CSS Eigenschaft an Hand des ausgewählten Tags testen, muss man nur auf den runden Pluspunkt drücken und den Wert auswählen, on the Fly ändert sich nun die Anzeige im Minifenster.

Im Bereich oben rechts wird immer die Beschreibung dessen, was man als letztes anklickte angezeigt. Sehr nützlich ist, dass hier auch eine Notiz über Kompatibilität auftaucht.

[via Dr. Web Magazin Nachlese September 2007]


23
Mrz 07

Frühwerke der Melanie K.

Praegnanz.de ruft zum Retro Posting auf und da dachte ich mir so, „Wieso eigentlich nicht?“

Peinlich sind mir meine ersten Werke nicht. Immerhin habe ich diese mit Liebe und per Hand in HTML gecoded und nicht, wie anderere zu der Zeit (= im Jahre 2000) zu Frontpage gegriffen.

Ok, ich gebe zu, das ist so nicht ganz richtig. Denn da gab es etwas, ein paar Monate zuvor. Meine wirklich allererste Internetseite habe ich nämlich *duck* mit dem MS Publisher erstellt *hüstel*. Quitschige Hintergrundbilder, Gifs (glücklicherweise keine Wackelgifs) und alles etwas unharmonischer.

Glücklicherweise habe ich schnell eine Anleitung für HTML in die Hände bekommen: „Marco Abrar’s HTML Wörterbuch„, in den Osterferien 2000 habe ich damit am Laptop meiner Schwester die erste Version von Mel’s Chaospage erstellt. Innerhalb eines Jahres machte diese Seite dann kleinere Entwicklungen und mehrere Verwandlungen durch: Version 2.??, Version 4.0 .

Interessant ist vielleicht auch die erste Version der Crazylounge – dem Vorzimmer für Privpages (Entstand im Herbst 2000). Achtung, Augenkrebs-Gefahr. Die Farben sind wirklich – grell. Zu meiner Verteidigung: Damals bin ich wenigstens schon auf die Probleme mit den Browsern eingegangen und hatte eine Netscape und IE-Version der Seite (Firefox Benutzer sollten sich unbedingt die IE-Version ansehen, da damals Netscape der Problem-Browser war und deswegen einiges in der Netscape-Version nicht so toll aussieht, einfach nur funktional ist).

Das waren sie also, die allerersten beiden Seiten. Dazwischen gab es eine Menge. Viele Projekte ohne wirklichen Inhalt. Ich hatte halt Spaß am Planen & Erstellen der Seiten.

Wie sieht es bei euch aus? Gibt es eure Erstlingswerke noch? Und was mich persönlich interessieren würde, liest hier eigentlich jemand mit, der mal in der Crazylounge war und dessen Homepage heute noch – in welcher Form auch immer – besteht (Immerhin umfasste das Verzeichnis zu seinen Hochzeiten um die 500 private Homepages *ein bißchen Stolz ist*)?


21
Sep 06

Der wahrscheinlich bescheurtste IE-Bug

So was ätzendes. Da hat verwendet man nichtsahnend Listen in Listen und möchte ihnen einen schönen linken Rahmen geben, und plötzlich macht der Internet Explorer, was er will.

Magik Creeping Text
Rauslaufender Text

Nach dem das erste Mal der Rahmen eingesetzt wurde, rückt der Text immer weiter nach links. Mit Rand und Innenabstand hat das nichts zu tun. Und erst nach mühsamen auskommentieren und einzelnem wiedereinfügen meiner CSS-Definitionen habe ich den Übeltäter gefunden.

Glücklicherweise konnte ich damit auch googlen und eine Lösung finden. Bei Position is Everything ist dieser Bug als Magik Creeping Text bekannt. Und dort erhält man glücklicherweise eine Lösung für das Problem, auch wenn empfohlen wird, so stark verschachtelte Boxen nicht einzusetzen. Die Lösung ist letztendlich noch seltsamer: Im übergeordneten Element muss ein border-bottom gesetzt sein. *kopfschütteln*

Wer noch mehr seltsame Eigenheiten des IE’s ansehen möchte, sollte unbedingt bei den e-workers vorbeischauen. Dort gibt es nämlich eine nette Bloßstellung des M$-Browsers.


30
Aug 06

Grey Flower

Einer der nichtgenommenen Vorschläge für mein zweites offizielles Webprojekt inspirierte mich zu einem neuen Design. Hier mal ein kleiner Blick auf das ursprüngliche Design:

Kleiner Screenshot des Design
So sah das mich inspirierende Design aus, welches abgelehnt wurde.

Was daraus geworden ist, könnt ihr hier begutachten. Wie ihr allerdings feststellen werdet, ist das alles noch nicht wirklich gut durchdacht und fertig. Mein Webserver hat seinen Geist aufgegeben, besser gesagt, mein MySQL-Server funktioniert nicht mehr und ich muss online entwickeln.

So wird es hier also in nächster Zeit an allen Ecken bröckeln ^.~. Mir fehlen nämlich auch noch ein paar Ideen, vor allem, was die große Anzahl an Tags angeht. Mal schauen, vielleicht gibt es aber auch einfach gewichtete Clouds mit den Top-X Tags & Kategorien und für alles andere muss man im Archiv nachblättern.

Ich könnte mir auch vorstellen, in der unteren Fußleiste eine Liste der beliebtesten Artikel einzustellen oder aber jener, die ich gerne empfehlen möchte, weil ich sie wiederentdeckte. Mal schauen. Ich bitte auf jeden Fall um Geduld und Verzeihung. ^.~


04
Jul 06

Bildunterschrift mit Hilfe einer Definitionsliste

Ich weiß gar nicht mehr genau, wofür ich es gesucht habe – warum, wieso… auf jeden Fall habe ich vor kurzem nach einer Möglichkeit gesucht, Bilder zu beschriften. Gefunden habe ich den sehr guten Artikel „Die vergessene Bildunterschrift“ bei Mediaevent. Dort wird eine Lösung mittels einer Definitionsliste vorgeschlagen.
<dl>
  <dt><!-- zu definierender Begriff --></dt>
  <dd><!-- Definition --></dd>
</dl>
Diese wird dann mit CSS beliebig formatiert. Und fertig. Ich bin wirklich begeistert, da das dämliche Klassengedöns für Bilder damit wegfällt, ebenso die umständliche CSS-Formatiererei. Ich werde wohl noch eine recht- und eine links-Klasse erstellen, für kleiner Bilder, die vom Text links- oder rechtsbündig umflossen werden sollen. Sehr praktisch. ^.^

Ähm… nur um es zu erwähnen. Weil ich beide Artikel fand und überflog. Auch das Markup-Journal schrieb über diese Lösungsmöglichkeit.

Übrigens: Falls man immer die gleiche Bildgröße verwendet (was vor allem bei umflossenen Bildern sinnvoll sein kann, weil die Float-Eigenschaft bei CSS immer eine Breitenangabe benötigt) ist es auch sehr einfach mit Hilfe der Definitionsliste das Bild mit einem Hintergrundbild (z.B. einer Schattengraphik) zu verschönern ;)). Bei Gelegenheit gehe ich darauf vielleicht mal näher ein. Ansonsten denke ich, dass es etliche Tutorials dazu bereits in den Weiten des Webs gibt.


17
Jun 06

Levels of HTML-Knowledge

Tja, hmm… Ich denke mal .. ich bin irgendwo in between 4 & 5. Das mit der DIV-Mania habe ich noch nicht ganz hinter mir, Datentabellen mit Div’s und Spans würde ich allerdings nie bauen ^-^“. Kurz vor fünf?? Wahrscheinlich eher nicht… ^-^“ aber vielleicht werd ich’s ja, wenn ich länger in meinem Job gearbeitet habe ^-^“. Interessante Sache der Artikel Levels of HTML-Knowledge. Und ich bin ein bißchen stolz darauf, es über Wysiwyg hinaus geschafft zu haben ^-^“ Ich sage nur MsPublisher *rotwerd* – meine wohl größte Sünde ^-^“… Naja.. aber zu lernen habe ich noch viel, vor allem, was Feinheiten angeht. Und mehr Routine kann ja auch nicht schaden. ^.^

Nachtrag Tja hmm, da gibt’s ja auch noch Levels of CSS-Knowledge. Würde mich auch da zwischen vier und fünf einordnen ^-^“… auch gegen fünf *lol*. Denn auch im CSS-Bereich habe ich noch viel zu lernen. Finde diese beiden Artikel allerdings auf jeden Fall sehr interessant.


13
Jun 06

Websites as Graphs

Graphisch aufbereitet wird die HTML-Struktur einer Seite, dabei herauskommen eine interessantes Geflecht. Und das ist meins:

Weblog.netzgeschaedigt graphisch aufbereitet

Interessant und auch beruhigend ist der Prozess, in dem das Bild entsteht. Wabernde Punkte, Verbindungen… ganz so wie bei dieser anderen Seite *grübel*… wie hieß die doch gleich – irgendetwas mit Zoo??? Wie auch immer. Ich schweife ab. Wer interessiert ist an einer graphischen Aufbereitung des Quelltextes, kann dies bei aharef.info tun.

Es hat mir keine Ruhe gelassen… das Ding, was ich meinte heißt Sodaconstrutor ^-^“. Und damit kann man kleine lustige Roboter-Spinnen basteln. Bereits von anderen Menschen kreierte Wesen kann man sich dann im SodaZoo ansehen ^.~. Für all jene – wie z.B. mich – die nicht mit ganz so viel Geduld beseelt sind ^-^“.


16
Apr 06

diverses zum Thema Webdevelopement

Viel zu lesen. Zum Beispiel ein Artikel des SELFHTML-Weblogs der sich mit dem Thema Layout beschäftigt: Tabellen, Spalten und Weblogs vs. Hypertext. Passend dazu das Floatutorial von maxdesign. tjkdesign beschreiben in ihrem Artikel, wie man aus einer klaren XHTML-Struktur viele unterschiedliche Layouts erstellen kann – nur mit der Power von CSS. Und wenn ich schon dabei bin ^-^“. Um so etwas zu bewerkstelligen braucht man Positionierung, also schnell zum Tutorial Learn CSS Positioning in Ten Steps und Einschließen von Floats ohne zusätzliches Markup.

Dann lohnt es sich definitiv bei Webdesign from Scratch vorbeizuschauen, gleich zwei interessante Artikel sind mir damals ins Auge gefallen. Zum einen Information Architecture Models, zum anderen ein Artikel über die Basics des Webdesigns. Etwas mehr Theorie, dennoch interessant: Five simple steps to typesetting on the web: printing the web, ein Thema, über das man normalerweise nicht so nachdenkt ^-^“ – ich zumindest nicht. Wobei ich bei meiner Tutorialseite damals eine Druckansicht hinzugefügt habe.

Zwei Seiten habe ich dann noch, die sich mit dem Thema Formulare beschäftigen, zum einen eine Anleitung eine Suchbox so aussehen zu lassen, als sei es eine Safari Suchbox. Sieht schick aus und werde ich bestimmt irgendwann einmal ausprobieren ^-^“. Und der zweite Artikel: Using CSS to Create a Two-Column Layout.

Zuletzt noch ein paar Seiten, die sich mit den CSS-Codes auseinandersetzten. Perun verlinkt auf zwei Seiten, welche sich mit der Übersichtlichkeit des Codes beschäftigen. Bei Webstandart geht es um CSS shorthand properties, also wie man manche CSS-attribute bündeln kann.


23
Jan 06

Bilder mit CSS formatieren

Bilder automatisch zentrieren lassen? Bis vor kurzem habe ich mir nur mit einem zusätzlichen Absatz helfen können. Bis ich auf einer Seite (leider weiß ich nicht mehr wo), die wunderbare Eigenschaft auto für Ränder (margin) entdeckt habe. Mit Hilfe dieser Eigenschaft, kann man beliebige ‚Block‘-Elemente zentrieren.

Was sind Block-Elemente?
Was bedeutet das jetzt? ‚Block‘-Elemente sind z.B. Layer oder Absätze. Sie sind abgeschlossen und nach ihnen wird automatisch die Zeile umgebrochen. Für genauere Beschreibungen verweise ich einfach mal auf einschlägige Literatur und begnünge mich mit Beispielen: <div>,<p> und <ul> oder <ol> sind ‚Block‘-Elemente, während z.B. <b>,<i> oder besser <strong>,<em> oder aber auch <img>-Elemente es nicht sind. Sie sind ‚inline‚, das heißt, hinter ihnen geht es ganz normal, ohne einen Textumbruch, weiter.

Nun bietet CSS die Möglichkeiten, Elementen eine Anzeige-Eigenschaft (z.B. block oder inline) zuzuweisen. Dies geschieht mit der Angabe:display:block; bzw.display:inline;

Automatisches Zentrieren der Bilder via CSS
Für das automatisch zentrierte Bild, muss man dem <img>-Tag die Anzeigart block zuweisen, zentriert wird danach mit margin:auto:.storycontent img {
display:block;
margin-left:auto;
margin-right:auto;
}

.storycontent  habe ich vor img gesetzt, da ich nur die Bilder innerhalb meines Postings ansprechen möchte. Und  das Posting befindet sich in einer Box der Klasse .stroycontent. Mit obrigem Code wirkt die CSS-Definition nur auf alle Bilder innerhalb dieser Boxen.

Jetzt kann man das Bild beliebig formatieren. Z.B. einen Bilderrahmen darum setzten. Hierfür benötigt man einen inneren Randabstand (padding), und einen Rahmen (border) und kann z.B. auch noch die Hintergrundfarbe (background) ändern.

Beispielcode
Ein Beispiel für solch einen Code ist: .storycontent img {
display:block;
margin:2px auto;
padding:4px;
border:1px dotted blue;
background: white;
}

Nachtrag:
Diese Art zu zentrieren funktioniert natürlich auch mit jedem anderen Blockelement. Somit ist es z.B. die einfachste Möglichkeit, eine komplette Seite mit fester Breite, im Browser-Fenster zu zentrieren (Im Template Lavender habe ich noch meine alte und wesentlich umständlichere Methode verwendet, so als Vergleich ;)).


25
Jun 04

xhtml-buch, html-editor und favicons

Haute mal wieder ein wenig Webdesign: Praxisbuch XHTML zum downloaden. Zur Aufstockung der Tutorialsammlung ^-^“ Mehr Basiswissen und Hilfen gibt es unter lerneniminternet. Dort gibt es unter anderem ein Email-Tutorial, dass sich mit dem Auftreten von Webseiten beschäftigt.
So etwas ähnliches wie ZenGarden nur nicht so schön ^-^‘ ist css + design.
Wenn ihr gelangweilt seid von dem geraden CSS-Design solltet ihr unbedingt bei orderedlist vorbeischauen. Dort wird gezeigt, wie man ein Menu biegen kann.
Mehr Webwork. Bei freeware bin ich über einen HTML-Editor gestoßen, der vielversprechend aussieht, jetzt müsste ich ihn nur noch mal testen. Leider ist die Installationsdatei ziemlich groß.
Mehr Inspiration! Na, habt ihr denn schon ein Favicon? – Das sind diese kleinen Bilder, die im Adressfeld, oder dem Tab oder in den Favoriten erscheinen ^-^“ – wenn nein, Inspiration gibt es bei delta.tango.bravo
Etwas anderes, aber nicht weniger interessant. Ein Bericht von intern über einen amerikanischen Gesetzentwurf gegen P2P-Piraterie der so ziemlich alles illegal machen würde, was man so macht. Das Schlüsselwort heißt INDUCE. Der Gesetzvorschlag macht bereits das „verleiten“ zum Tausch strafbar. Wenn ich mal zitieren darf: ein CD- oder DVD-Brenner strahlt eine fast schon sinnliche Kopierlust aus und damit eine Aufforderung, das Urheberrecht zu verletzen. *kopfschieflegt* *sz*