Alexander Zerr

Show Blocks in TinyMce

September 26, 2011

Mit dem TinyMce bin ich soweit zufrieden. Er erfühlt zurzeit noch meine Bedürfnisse, doch eins viel mir ein als ich beim CKEditor eine Funktion bemerkte die so in TinyMce nicht vorhanden ist. Mit der Funktion kann man die Elemente im Text heforheben mit einem Rahmen der zeigt welches Element es ist. Leider hat TinyMce von Haus aus nicht dieses Feature und ich hab leider kein Plugin gefunden welches mir diese Funktion gib. So musste ich etwas Hand anlegen und eigenen Plugin schreiben.

Das Ergebnis ist einfach geschrieben, reicht mir vollkommen aus und bietet mir jetzt die Möglichkeit die Elemente mit Rahmen zu versehen wie im Screenshot zu sehen:

Das Plugin benötigt jQuery und kann schnell in den TinyMce integriert werden:

1. Schritt: Plugin hier runter laden und in den tiny_mce/plugins Ordner entpacken.

2. Schritt: TinyMce Config mit dem Parameter showblocks erweitern.

TinyMce Config:

plugins : "pluginA,pluginB,PluginC,...,showblocks",
theme_advanced_buttons1 : "showblocks,|,bold,italic,underline,strikethrough,..."

3. Schritt: Jetzt kann man den Plugin etwas steuern, in dem man im sagen kann ob er schon sofort die Elemente umrahmen soll oder man kann die Hover Funktion abschalten.

show_blocks: 1, // (optional) show blocks by open the editor
show_blocks_hover: 0 // (optional) hover Tag name 1 or show it permanent 0

Viel Spaß.

Geschrieben in Allgemein | Keine Kommentare »

Kostenlose Web Icons

September 14, 2011

Immer wieder trifft das Problem die Designer und Webmaster wenn sie Icons in die Seite einbauen. Man nimm welche aus eigener Sammlung und passt sie an, entwickelt was neues oder man nimm welche aus den Bestehenden Sammlungen wie Famfamfam und anderen Quellen. Seit kurzen erschien eine Web Symbol Sammlung an meist benutzten Icons die ausreichen um Wichtige Elemente zu symbolisieren. Das Geniale ist, dass es eine WebFont ist die skalierbar ist, einfach zu integrieren ist, einfach zu nutzen weil man braucht nur Buchstaben um die Icons zu symbolisieren und die Farbe direkt anpassen. Nachteil ist bei der Schrift die Semantik da man die Icons mit Buchstaben sich merken muss. Eigentlich ist handelt es sich die Gleiche Technik wie bei Webdings nur für Web.

Man lädt die Font auf der Web Symbols Seite runter und bindet sie im Style ein.

@font-face{ 
	font-family: 'WebSymbolsRegular';
	src: url('/fonts/websymbols-regular-webfont.eot');
	src: url('/fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
	     url('/fonts/websymbols-regular-webfont.woff') format('woff'),
	     url('/fonts/websymbols-regular-webfont.ttf') format('truetype'),
	     url('/fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
	}
 
.symbol { font-family: 'WebSymbolsRegular'; font-size:16px; }

Und im Html kann man jetzt ganz einfach die Icons mit Buchstaben nachbilden:

<div><span class="symbol">I</span>Bild</div>
<div><span class="symbol">S</span>Zahnrad</div>
<div><span class="symbol">C</span>Wolke</div>

Die Web Symbols Font wird immer weiter Entwickelt und bekommt bald neue Icons wie Telefon und E-Mail. Die Benutzung ist frei und unterliegt der OFL Lizenz. Somit hat man eine simple Möglichkeit mit wenigem Einsatz Standard Icons in die Seite zu integrieren.

Und ich möchte noch auf ein Projekt hinweisen wenn es um Öffentliche Icons/ Symbole geht. Das The Noun Project beinhaltet eine Große Sammlung an Vector Grafiken die alltägliche Sachen symbolisieren. Man kann die Icons frei nutzen und man finden eigentlich zu jedem Thema passendes Symbol.

Geschrieben in Design | Keine Kommentare »

Bilder ohne width/height

August 31, 2011

Die Richtlinien schreiben vor die Größen Angaben für Bilder immer zu setzen um dem Browser die Arbeit zu erleichtern das Layout richtig darzustellen und die Geschwindigkeit nicht zu beeinträchtigen. Da man aber öfters vergisst die width/height zu setzen, ist es sehr aufwendig im Quellcode nach den Stellen zu suchen.

Um das zu erleichtern, haben die Jungs aus 37signals.com einen simplen und Genialen CSS Helper geschrieben:

img:not([width]):not([height]) {
  border: 2px solid red !important;
}

Nach dem Einbau in die Seite, kann man im Developer Modus die Bilder mit einem Roten Rahmen einfacher im Layout finden.

Geschrieben in Design | 1 Kommentar »

WWW Rewrite Rule

August 5, 2011

Ich bin kein Fan von der Subdomain “WWW” und sie ist komplett überflüssig. Mit einem ModRewrite Rule kann man die www Subdomain umgehen in dem alles was auf www.domain.tld/inhalt-der-seite kommt direkt mit 301 auf domain.tld/inhalt-der-seite umleitet wird.

ServerName domain.tld

<Directory “/var/www/domain/”>
AllowOverride All
Order allow,deny
Allow from all
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
</Directory>
</VirtualHost>

Geschrieben in Tipps | Keine Kommentare »

Firefox Javascript Error Console

Juli 19, 2011

Seit der Firefox 4 Version, haben sich die Entwickler entschieden die JavaScript Fehler nicht zu zeigen. So hab ich mich gewundert, dass ich voll den sauberen JasvaScript Code schreibe und bei Fehlern keine Error Meldungen in der Console oder dem Firebug sehen kann. Um die Fehler wieder zu sehen, muss man kleinen Eingriff in die Firefox Config machen:

In der Adressleiste about:config eingeben und aufrufen.
Natürlich wird man Vorsichtig sein und es dem Firefox versprechen.
Nach errorconsole filtern.
Mit einem Doppelklick auf den Registry Wert devtools.errorconsole.enabled, kann man ihn auf true setzen.
Alle Firefox Fenster schließen und neu starten.

Jetzt bekommt man wie gewohnt alle JavaScript Fehlermeldungen zu sehen.

Geschrieben in Tipps | Keine Kommentare »