Der tägliche Computer-Ärger hat ein Ende… oder doch nicht!?
Posts tagged HTML
Online-WYSIWYG Editor für die eigene Website
01625 Tagen
Sobald man damit anfängt, etwas größere und umfangreichere Website-Projekte anzunehmen, kommt es immer häufiger vor, dass man dem Nutzer bzw. Auftraggeber selbst mehr Freiheiten in Sachen Content geben sollte. D.h., dass mittlerweile so ziemlich jeder “Chef” meist kleinere, aber auch größere Änderungen innerhalb seiner Homepage selbst vornehmen möchte. Hat man beim erstellen des Projekts auf ein CMS wie Typo3 oder Joomla gesetzt, ist diese “Freiheit” schon mit inbegriffen. Sollte man sich jedoch dazu entschlossen haben, die Seiten im alleingang zu coden, stehen einem erstmal nur die Standard-HTML-Möglichkeiten in Form von Textareas zur Verfügung. Nicht gerade Benutzerfreundlich, wenn man seinem Kunden auch gleich noch eine Liste mit HTML-Tags inkl. Erklärung und einer mehr oder weniger kleinen Einweisung begegnen muss.
Einfacher ist es da, einen Online-Editor nach dem WYSIWYG-Prinzip in die Seite einzubauen. Ein solcher Editor bietet vom Look&Feel her einen ähnlich großen Umfang wie eine normale Textverarbeitungssoftware a la Microsoft Word oder OpenOffice.
Auf der Suche nach einem geeigneten Editor, der sich einerseits leicht integrieren lässt und andererseits gut anpassbar und vor allem benutzerfreundlich ist, bin ich auf zwei schöne Vertreter gestoßen.
Zuerst möchte ich TinyMCE nennen. Dieser wurde mir von einem anderen Webdeveloper empfohlen. Nachteilig fand ich hier jedoch die fehlende Unterstützung von einem Datei- und Bilder-Upload, sowie -Management. Diesen Nachteil kann man jedoch gegen den Einkauf von einem bzw. zwei Plugins ausmerzen.
Besser und auch etwas anpassbarer fand ich da den FCKEditor. Hier ist eine Upload-Lösung schon integriert und auch die Toolbar lässt sich leicht personalisieren. Hier werden auch keine Textareas mehr benötigt. Man bindet nur noch eine JavaScript-Klasse in die Seite mit ein. Nachteilig natürlich für jene, die JavaScript deaktiviert haben. Aber da es schließlich nur ein ausgewählter Kreis von Nutzern benötigt, ist dieser Nachteil vertretbar. Sofern dieser Nutzerkreis keine Probleme mit JavaScript hat, versteht sich.
Zwei vielleicht interessante Seiten zu dem Thema habe ich natürlich auch wieder im Angebot.
Zum einen eine Gegenüberstellung mit dem Titel “FCKEditor vs. TinyMCE” aus dem WebTecker-Blog. Hier ist die Schlussfolgerung, dass jeder für sich selbst entscheiden muss, welchen Editor er einsetzen möchte.
Alternativ dazu eine ganze Liste von Online-Editoren mit Angaben zu unterstützen Browsern und ein paar Funktionen. Leider ist das ganze nicht mehr 100%ig aktuell. Die Liste wird bereitgestellt von Genii Software. Nett ist hier auch der direkte Link zu einer Demo einiger vorgestellter Editoren.
DEN ultimativen Online-Editor gibt es leider nicht. Auch ich muss zu dem Schluss kommen, dass jeder Webworker selbst testen und den für ihn am besten geeigneten Editor wählen sollte. Ich für mich bin mit dem FCKEditor sehr zufrieden.
Zeilenumbruch im pre-Tag
31841 Tagen
Da ich doch immer mal wieder diversen Code hier niederschreibe hat sich ein Plug-In zum Syntax Highlighting namens “Snippet Highlight” in mein WordPress dazugesellt. Schlecht bzw. gut – weil ja eigentlich Sinn der Sache – ist, dass ein pre-formatierter Text eben genau so wiedergegeben wird, wie er eingetippt wurde. Die Folge ist meist, dass bei langen Strings diese regelmäßig schön über das Layout hinaus schießen oder, je nach Layout, auf einmal im nirgendwo verschwinden.
Mit HTML kann man das “Problem” lösen, indem man im pre-Tag einfach width=50 eingibt. Somit wird nach maximal 50 Zeichen ein Zeilenumbruch durchgeführt. Je nach genutztem WordPress-Plugin wird dies jedoch wieder entfernt, wenn man pech hat.
CSS ist da schon etwas sicherer. Im Blog “Unwakeable” von Tyler Longren bin ich mal auf ein schönes CSS-Format gestoßen, dass jeden Browser gut bedient.
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
width: 99%;
}
Alternativ dazu kann man sich natürlich auch einen div-Container drum herum bauen, mit fester Breite und Höhe und dem ganzen einen overflow verpassen. Kann man, muss man aber nicht, weil nicht wirklich elegant. Vorteil ist jedoch, dass es ins Layout passt und trotzdem die Formatierung erhalten bleibt.
Woopra-Website ohne Design
01841 Tagen
Wollte mir heute mal die Software für Woopra herunterladen und musste dementsprechend auf deren Homepage. Erstmal war ich leicht irritiert, da mir die Seite im Firefox gänzlich ohne Design präsentiert wurde. Im Internet Explorer 6 bekommt man zwar ein Design zu sehen, allerdings ist die Navigation leicht zerschossen.
Beim durchsehen des Quelltextes stößt man zur Zeit auf folgenden, leicht kuriosen, Eintrag:
<link style="display: none;" rel="stylesheet" href="http/www.woopra.com/wp-content/themes/woopra/style.css" type="text/css" media="screen">
Der Fokus liegt hier auf dem style="display: none;", der im link-Tag meiner Meinung nach ziemlich überflüssig ist. Nach einem Test mit einer Beispielseite scheint dieser Eintrag jedoch vom Firefox wie auch vom IE6 gekonnt ignoriert zu werden. Ich habe mal über die Web Developer Toolbar für den Firefox das im link-Tag angegebene Stylesheet manuell eingebunden und siehe da, zumindest das Design wird wieder korrekt dargestellt. Allerdings ohne Bilder. Über die im Quelltext angegebenen Source-Links lässt sich jedoch darauf zugreifen und vor allem der IE6 zeigt diese auch ganz normal an.
Ich bastel ja jetzt schon seit einiger Zeit an Websites herum, aber diesen Effekt kann ich mir im Augenblick noch nicht so ganz erklären. Vor allem, da nur Firefox das Design und die Bilder verschmäht.
Update: Nach einigem suchen bin ich jetzt doch noch auf den Übeltäter gestoßen. Das Problem verursacht das Plug-In Adblock Plus. Hat man hier den “ABP Tracking Filter” abonniert erhält man eine Regel namens “.woopra.”. Diese deaktiviert jegliche Anzeige und Ausführung von Scripten, Bildern und Stylesheets, die über eine Website geladen werden. Ausgenommen ist hierbei die direkte Anzeige im Browser über einen URL-Aufruf, weshalb auch das direkte Laden der Bilder bzw. das manuelle Einbinden des Stylesheets funktioniert hat.
Manchmal sollte man schon wissen, was diverse Plug-Ins bzw. Addons so treiben und im Hintergrund anstellen.
Alternative zum border-image mit CSS
01841 Tagen
Beim erstellen einer, wenn auch kleinen, Website stößt man doch immer mal wieder auf kleiner Probleme bei der Umsetzung. So hat sich z.B. jemand überlegt, es wäre doch ganz schick, wenn man um seinen Content einen grafischen Rahmen erstellt. Eine komfortable Funktion dafür gibt es im Bereich von CSS. Diese nennt sich border-image. Problem ist nur, dass es diese erst in der CSS-Version 3 geben wird. Aktuell nutzbar ist jedoch die Version 2.1, welche ohne eine solche Funktion auskommen muss. Dementsprechend muss man sich leider anderweitig behelfen. Hier jetzt eine kleine Anleitung zu meiner Lösung – es gibt ja bekanntlich immer mehrere für ein Problem.
Das ganze funktioniert jetzt erstmal nur bei der Vergabe einer festen Breite.
Überblick bei CSS-Dateien behalten
01848 Tagen
Seit einiger Zeit beschäftige ich mich schon relativ intensiv mit dem Thema CSS. Vom ersten Tag an, als ich davon hörte, war ich begeistert. Das strikte trennen von Inhalt und Design hat unschlagbare Vorteile. Vor allem bei einem Re-Design einer Website. Zu diesem Thema habe ich mittlerweile einiges an Büchern, Websites, Videos und anderen Quellen auf mich einprasseln lassen. Was bis dahin jedoch leider zu kurz kam, war das Kommentieren und Dokumentieren der CSS-Dateien. Es wird zwar überall mehr oder weniger kurz angeschnitten, aber jeder kommentiert eben auf seine Art und Weise.
Beim durchstöbern vom Smashing Magazine bin ich zufällig über eine Anleitung oder auch Leitfaden gestoßen, der sich mit unterschiedlichen Ansätzen der Kommentierung auseinander setzt. Dementsprechend wird gezeigt, wie man seine CSS-Dateien durch Kommentare sauber aufbereitet, um auch nach Jahren immer noch den Durchblick zu behalten. Auch ist es eine große Hilfe bei Gemeinschafts-Projekten, wenn also mehrere Personen an einer CSS-Datei hantieren. Und generell bietet eine strukturierte Kommentierung einen schnellen Überblick des Inhalts und ein zügigeres Auffinden einzelner Elemente.
Für jeden, der effektiv, schnell und zukunftsorientiert “programmieren” will sollte sich diesen Leitfaden einmal ansehen und auch einige der Tipps und Vorschläge anwenden. Man macht dabei nur sich selbst und anderen damit das Leben und Umgestalten leichter.