Der tägliche Computer-Ärger hat ein Ende… oder doch nicht!?
Coding
Kompatibilitäts-Liste für WordPress-Plugins
01435 Tagen
Es ist schon unglaublich, wieviel Energie und Zeit manche Menschen in diverse Web-Projekte stecken können.
Ein mehr als sinnvolles Projekt bzw. eher eine Übersicht stammt von der Firma BraveNewCode Inc., die im Bereich Webdesign und -entwicklung angesiedelt ist.
Das Unternehmen hat eine Übersicht erstellt, die über 5000 WordPress-Plugins enthält und sehr übersichtlich darstellt, unter welchen WordPress-Versionen jedes einzelne Plugin funktioniert und auch, welche sonstigen Vorraussetzungen gegeben sein müssen. So z.B. die PHP4-Kompatibilität oder ob eine Datenbank-Anbindung erforderlich ist.
Diese Übersicht wandert auf jeden Fall in meine Favoriten!
Danke auch an Heiko vom “Code Styling Project“, durch dessen Blog ich einmal auf die Seite aufmerksam geworden bin und für seinen Test dieser Seite. Scheinbar gibt es bei den Test-Verfahren von BraveNewCode noch einige kleine Fehler.
Online-WYSIWYG Editor für die eigene Website
01599 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.
Kostenlose Bücher von Galileo Press, O’Reilly und mehr
31636 Tagen
Das Thema Weiterbildung wird ja gerade in der heutigen Zeit immer größer geschrieben und auf das lebenslange Lernen wird man in der Schule schon vorbereitet. Es wird dort zumindest mal erwähnt. Wer sich in Beruf, Karriere oder einfach nur so aus Eigeninteresse (ja, sowas soll es auch geben!) gerade im IT-Bereich weiterentwickeln will, der war in der Vergangenheit immer auf kostspielige Literatur angewiesen. Sicher, es gibt die eine oder andere Website, die ebenfalls gute Informationen und Wissen vermittelt oder auch Tutorials, mit Hilfe derer man sich a la Learning-by-Doing fortbilden kann, aber das Buch in der Hand oder einschlägige Literatur ist meistens der bessere Weg. Es geht zwar nichts über eine Weiterbildungsmaßnahme mit Dozent und Unterricht, das würde jedoch bei den meisten sicherlich den finanziellen Rahmen sprengen.
Wem jetzt auch noch die Bücher oder Lern-DVDs (wie z.B. die Video2Brain-Reihe, die ich ebenfalls sehr empfehlen kann) zu teuer sind – diese schlagen im Schnitt ja auch mit ca. 50 Euro zu buche – findet gerade bei den großen Verlagen wie Galileo Press oder O’Reilly komplette Werke als kostenlose E-Books zum Download. Ist jetzt zwar meiner Meinung nach nicht genauso gut, wie ein Buch zum anfassen, reinkritzeln oder nachschlagen, aber es erfüllt sicherlich seinen Zweck. Bei den E-Books fehlt natürlich auch die CD/DVD, die meist bei den umfangreicheren Büchern beiliegt. Jedoch lassen sich die meisten Tools und Anwendungen kostenlos auf anderen Seiten im Internet herunterladen, da die Verlage meist Open-Source-Produkte einsetzen.
Das Angebot gerade von Galileo Press war mir schon länger bekannt. Allerdings musste ich vor einiger Zeit erst wieder daran erinnert werden, als ich im Buchhaus W. ein Exemplar zum Thema Java-Programmierung gesucht habe. Konnte mich nicht zwischen dem von Galileo und Addison-Wesley entscheiden. Erst ein Kunde machte mich auf das Galileo-Press-Angebot “openbooks” aufmerksam. Demnach viel die entscheidung auf das Werk von Addison-Wesley. Die beistehende Verkäuferin war allerdings gar nicht so begeistert über den Tipp. War danach auch etwas eingeschnappt und Hilfe konnte man auch nicht mehr von ihr erwarten. Schade eigentlich, da ich ja trotzdem ein Buch gekauft hab.
Hier dann mal für alle Schüler, Studenten und sonstige Sparfüchse die Links zu den kostenlosen E-Book-Seiten.
Galileo Computing – Richtig viele Bücher (auf deutsch) zu Themen wie Programmierung, Netzwerke und Betriebssysteme
Galileo Design – Nicht ganz so viele Bücher zu Fotografie, ActionScript, PhotoShop und Dreamweaver
O’Reilly OpenBooks – Deutsches hauptsächlich zum Linux-Bereich
Computer-Literatur onlinelesen – Sammelsurium zu den unterschiedlichsten Gebieten. Manche Sachen sind nicht schlecht.
Auch sei nochmal auf meinen Artikel zum Thema Cheat-Sheets hingewiesen. Diese kleinen Übersichten zu häufig benötigten Funktionen in allen möglichen Gebieten sind echt nicht zu vernachlässigen.
Kleine Helfer für Webdesigner und Entwickler
11691 Tagen
Anknüpfend an einen meiner letzten Artikel zum Thema Geek-Stuff, hier eine neue und sogar hilfreiche Website-Vorstellung.
Bei SixRevisions findet man eine schier unendliche Liste mit kleinen Helfern, speziell für Webdesigner. So erhält man dort nicht nur Links zu Faltkarten oder Postern mit Farbwerten und Tasten-Kürzel für Photoshop, sondern auch typographische Übersichten und HTML-Codes für Sonderzeichen. Sogar ein MausPad mit hexagonalen Farbwerten findet man!
Nebenbei findet man dort auch noch eine Auflistung für Web-Entwickler mit dem Themenbereich HTML, CSS, JavaScript und jQuery.
Ich persönlich mag diese Art der Hilfestellung. Man kann sie sich so schön an die Wand tackern. Zumindest so lange, bis man die Codes o.ä. auswendig kennt und keine Spickzettel mehr benötigt. Diese Helfer nennt man übrigens “Cheat Sheets” oder auch Referenz-Karten. In einigen Fachbüchern liegen diese immer mal wieder mit bei. Über eine Suchmaschine findet man zu diesen Begriffen Material zu den unterschiedlichsten Themen. Z.B. auch zu Spielen.
Hier mal wieder ein Dankeschön an Martin und sein privates Blog!
Buch-Geschenk-Aktion von phpforum.de
01713 Tagen
Für alle registrierten Mitglieder von phpforum.de gibt es bis zum 31.10.08 bei buecherbillig.de eines von 1.000 kostenlosen Büchern “SELFPHP. Das PHP Kochbuch. Studienausgabe”.
Bei Interesse einfach mal hier im phpforum vorbei schauen und gleich anmelden!
Kostenlos heißt mal wieder, das Buch ist kostenlos. Die Versandkosten von 3,95 € müssen natürlich gezahlt werden, solange man den versandkostenfreien Mindestbestellwert von 20 € nicht überschreitet.
Transparente PNGs für den Internet Explorer 6
01730 Tagen
Auf der Suche nach einem Workaround für die Darstellung von transparenten PNG-Grafiken im Internet Explorer 6 findet man ja mittlerweile zig Webseiten im Netz. Hier möchte ich die bei mir wunderbar funktionierende Lösung präsentieren.
In erster Linie wollte ich kein JavaScript anwenden, weshalb schon viele Lösungen weggefallen sind. Eine Möglichkeit per CSS besteht in der Nutzung von Microsoft’s AlphaImageLoader-Filter, der durch DirectX bereitgestellt wird. Zu beachten ist, dass man den Code nur auf das background-Element im CSS beziehen kann. img-Tags werden davon nicht angesprochen. Per Conditional Comment wird der entsprechende CSS-Code speziell dem IE6 zugewiesen.
Wichtig bei der Filter-Angabe ist, dass man keine Leerzeichen verwendet. In einigen Anleitungen sind diese leider vorhanden und das Copy&Paste funktioniert dann natürlich nicht. Auch die Pfadangabe zu den Bildern unterscheidet sich zwischen dem Filter und dem background-Element im CSS.
<style type="text/css">
div#logo {
background-image: url(../images/logo.png);
}
</style>
<!--[if lte IE 6]>
<style type="text/css"><!
div#logo {
filter:progid 
XImageTransform.Microsoft.AlphaImageLoader(src='images/logo.png', sizingMethod='image');
background: none;
}
</style>
<!--[endif]-->
Der Filter bietet unterschiedliche Möglichkeiten, das Bild zu skalieren. Über die Werte crop, image bzw. scale, die dem Element sizingMethod zugewiesen werden können, kann man das Bild auf folgende Weise skalieren:
- crop – Container und Bild behalten die angegebene Originalgröße
- image – Container wird auf die Bildgröße skaliert und enthaltener Text wird abgeschnitten (entspricht overflow:hidden) (Default-Wert)
- scale – Bild wird auf die Containergröße skaliert
Update: Auch img-Tags können per Inline-Styles transparent gemacht werden. Hierbei wird dann das src-Element überschrieben.
<img src="../images/logo.png" style="width: 200px; height: 80px; filter:progid
Und hier noch zwei Links mit ähnlicher Beschreibung/Anleitung. Einmal WebmasterPro.de und .devSOURCE.
Viele Windows-Schriftarten schnell installiert
01813 Tagen
Im Laufe der Zeit sammeln sich bei mir immer mehr Schriftarten an, die ich natürlich immer schön gesichert hab. Sprich, einfach immer mal wieder den Ordner “Fonts” kopiert. Will man jetzt die Schriftarten aber wieder auf einem neuen System installieren kopiert man den Ordner Fonts einfach mit dem Windows-Explorer in das Windows-Verzeichnis. Ab jetzt kann man sich dann schonmal für die zig Pop-Up-Meldungen bereit machen, die man einzeln weg klicken darf, weil schon vorhandene Schriftarten, die Windows schon mitbringt oder die schon installiert wurden, nicht einfach überschrieben werden. Ein kopieren per Kommandozeile fällt jedoch auch flach, da die Schriftarten dann nur kopiert, aber nicht installiert werden. Das funktioniert nur über den Windows-Explorer oder Programme von Drittanbietern. Diese Programme sind zwar zum Verwalten usw. gut geeignet, will man aber nur die Fonts installieren, total überflüssig.
Im faq-o-matic-Blog habe ich jetzt ein VB-Script gefunden, dass Schriftarten aus einem Ordner namens “FontsToInstall” per Windows-Explorer kopiert und installiert und sich nebenbei auch noch um die Fehlermeldungen kümmert. Somit bleibt der sowieso schon genug gestresse User vom stupiden dauer-klicken verschont und kann sich wichtigerem widmen. Aufgerufen wird das Script per Kommandozeile, z.B. per C:\installfont.vbs.
Hier ist das Script nochmal als gepacktes ZIP-Archiv zum herunterladen.
Zeilenumbruch im pre-Tag
31814 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.
Alternative zum border-image mit CSS
01815 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
01822 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.