Dosonaro

Das Joomla Entwicklerhandbuch: Kommentiere und Gewinne! BEENDET

Christopher Dosin — Sun, 02 May 2010 14:24:52 +0000

Das Open Source Content Management System Joomla ist eines der am weitesten verbreiteten Systeme weltweit. Das war für mich unter anderem einer der Gründe, warum ich mich intensiv mit Joomla beschäftige. Aber natürlich auch die Flexibilität, die ungehäuren vielen Extensions sowie die sehr aktive Community.

Vor allem durch die Joomla Community habe ich sehr viel dazu gelernt. Grund genug, der Community nun etwas zurück zu geben. Ich verschenke hier “Das Joomla Entwicklerhandbuch”, geschrieben von einem der Joomla Core Entwickler Alex Kempkens.

Mit diesem Buch liefert Joomla!-Core Team-Mitglied Alex Kempkens die Anschlusslektüre für alle, die nach Hagen Grafs Einsteigerbuch “Joomla! 1.5 ” mehr wollen – nämlich selber entwickeln. In seinem Entwicklerhandbuch führt er programmiererfahrene Joomla-Anwender von der Entwicklung eigener Templates bis zur Programmierung von Joomla-Erweiterungen.
Hierzu erläutert er ausführlich und verständlich die Joomla-API (Programmierschnittstelle) und zeigt am konkreten Beispiel, wie unter Joomla Komponenten, Module und Plugins aufgebaut sind und wie sie entwickelt und distribuiert werden.

Um das Buch zu gewinnen, hinterlasst einfach einen Kommentar. Wichtig hierbei ist, dass Ihr eine korrekt Email Adresse angibt, damit ich euch kontaktieren kann, falls Ihr gewonnen hat. Der Gewinner wird durch Zufall ermittelt.

Gewonnen hat die Nummer 24 Sascha.
Herzlichen Glückwunsch von meiner Seite aus

FreshSplash – Free Joomla 1.5 Template

Christopher Dosin — Thu, 29 Apr 2010 12:00:23 +0000

Heute darf ich euch ein neues kostenloses Joomla Template anbieten. Das Layout bzw. die Photoshop Datei stammt von dem bekannten Joomla Template Club Gavick.com und steht unter der Creative Commons Attribution 3.0 Lizenz.

Ich habe mir die Zeit genommen und das Layout für Joomla 1.5 programmiert. Falls euch irgendwelche Fehler auffallen oder Ihr irgendwelche Wünsche zu dem kostenlosen Template habt, schreibt doch bitte euer Anliegen in die Kommentare.

Über Feedback würde ich mich natürlich auch sehr freuen

Die Features

Tabellenloses Layout
xHTML Valider Code
Schritart wird durch Cufon ersetzt
Browserübergreifend kompatibel
100% kostenlos!

Hier könnt Ihr euch die Demo des Templates anschauen

Hier könnt Ihr euch das kostenlose Joomla 1.5 Template downloaden

Es würde mich sehr freuen, wenn Ihr unseren kostenlosen RSS Feed abbonniert.

Nun aber viel Spaß mit dem Template.

Feedsmith Problem mit Wordpress 2.9

Christopher Dosin — Wed, 28 Apr 2010 16:23:19 +0000

Einige haben vielleicht bemerkt, dass seit letzen Monat unsere Email Benachrichtigung nicht mehr über Feedburner funktioniert. Ich hatte lange nach einer Lösung gesucht und nun endlich eine gefunden.

Das Problem liegt daran, dass das Feedsmith mit der Wordpress 2.9 Version anscheinend nicht kompatibel ist. So wurden die neusten Artikel nicht im Feedburner übernommen.

Die Lösung

Die Lösung ist hierbei relativ simpel. Löscht das Feedsmith Plugin aus eurer Wordpress Installation und installiert das Feedburner Plugin von John Watson. Danach müsst ihr nurnoch das Plugin aktivieren sowie unter der Plugin Konfiguration, welche Ihr unter “Plugins – Feedburner Configuration” findet, eure Feedburner URL eingeben.

Vielleicht solltet Ihr auch einmal schauen, ob euer Feedburner auf den aktuellsten Stand ist, sofern Ihr wie ich Wordpress 2.9 und Feedsmith nutzt bzw. genutzt habt.

Joomla für Designer Screencast Serie – Tag 5

Christopher Dosin — Tue, 27 Apr 2010 11:52:49 +0000

Nach langer Zeit nun endlich der fünfte Tag der Screencast Serie “Joomla für Designer”.
In dieser Folge programmieren wir die rechte Seite unserer PSD Datei. Außerdem verbreitert sich der Inhalt der Seite, sofern die rechte Spalte nicht akitivert ist.

Click here to view the embedded video.

Quick Tip of the Week – Wie ersetze ich meine Schriftart mit Cufon?

Christopher Dosin — Thu, 08 Apr 2010 10:27:37 +0000

In diesem Artikel habe ich bereits einige gute Schriftarten für Cufon vorgestellt. Diesmal möchte ich euch in meinem Quick Tip of the Week demonstrieren, wie Cufon funktioniert. Wie ersetze ich also meine normale Schrift im Quelltext mit einer Schriftart, die nicht jeder auf seinen PC hat?
In diesem Video nutze ich die Schriftart Nillan, natürlich könnt Ihr jede belibige Schrifart nutzen. Achtet aber darauf, dass Ihr diese auch nutzen dürft!

Nützliche Links

Video

Click here to view the embedded video.

Downloaded Cufon

Besorgt euch zunächst die Javascript Datei von Cufon. Diese könnt Ihr hier kostenlos runterladen. Diese Javascript Datei müsst Ihr in euren Bereich des Dokumentes einbinden.
Ich habe diese Datei direkt von Cufon eingebunden.

Generiert eure Cufon Schriftart

Nun müsst Ihr eure Cufon Schriftart noch generieren lassen. Geht dazu auf http://cufon.shoqolate.com/generate/ und wählt unter “Regular typeface” eure Schriftart aus. Bestätigt dann einmal die EULA sowie die Nutzungsbedingungen am Schluss und klickt auf “Lets do this”. Die erstellte Datei speichert Ihr in euer Verzeichniss und bindet auch diese Javascript Datei in euren Bereich ein.
Ich habe die Schriftart Nissan genommen, meine Datei hieß also “Nilland_400.font”

Elemente mit Cufon ersetzen

Wir möchten nun z.B alle h2 Elemente mit unserer Cufon Schriftart ersetzen. Dazu schreiben wir einfach folgenden kleinen Javascript Code in unseren < head > Bereich.

Fertig!

Möchtet Ihr nun ein bestimmtes Element ansprechen, müsst Ihr ganz einfach nur ein wenig CSS anwenden. Wir möchten nun z.B eine Liste mit der ID Cufon mit unserer Cufon Schriftart ersetzen.

Internet Explorer Fix

Wie immer hat der Internet Explorer einen kleinen Bug. So sieht man eine kleine Verzögerung bei der Ersetzung der Schriftart. Diesen Fehler können wir mit einem kurzen Javascript Code beheben. Schreibt diesen einfach in euren head Bereich.

Pizza Lieferdienst online bezahlen mit Kreditkarte und PayPal

Christopher Dosin — Sat, 06 Mar 2010 16:04:34 +0000

Ich konnte es einfach nicht lassen, ich musste diesen kurzen Artikel für euch schreiben. Ich war schon seit langem auf der Suche nach einem Lieferdienst, bei dem es Möglich ist, seine Bestellung online zu bezahlen. Und genau das macht yourdelivery!

Sitzt ihr nicht auch manchmal Abends am PC und seit am Programmieren, Designen oder am Spielen? Überkommt euch nicht manchmal auch einfach nur der Hunger? Mir ist es schon des öfteren passiert, leider passiert es genauso oft, dass ich kein Bar Geld in der Tasche habe und die nächste Sparkasse 10km weit entfernt ist. Und mal ehrlich, Abends noch in der Kälte zu der Sparkasse zu laufen? Das macht mir persönlich keinen Spaß. Bei Yourdelivery gibt man seine Postleizahl an und das System sucht den passenden Lieferdienst herraus. Eigentlich genauso wie die bekannte Lieferdienstseite Pizza.de, jeodoch hat yourdelivery eben den entscheidenen Vorteil: Nach der Bestellung kann man auswählen, ob man BAR, online mit Kreditkarte, oder mit seinem Paypal Account die Bestellung bezahlen möchte.

Ich habe es ausprobiert und es lief alles reibungslos. Bestellung ausgewählt, online Kreditkartennummer eingegeben und abgesendet. Eine halbe Stunde später, kam dann auch der Lieferdienst mit meiner heißen Pizza, mit dem kleinen Unterschied, dass ich diesmal kein Bares Geld zahlen musste

6 der häufigsten IE Bugs und wie man sie behebt

Christopher Dosin — Tue, 16 Feb 2010 15:06:37 +0000

Internet Explorer – Der Fluch eines jeden Webentwicklers. Bis zu 60% der Entwicklung kann durch die Bugs des Internet Explorers zu nichte gemacht werden. In diesem Tutorial zeige ich euch einige der häufigsten Internet Explorer Bugs sowie du diese Fehler umgehen kannst. Lasst uns starten

Zentrieren eines Layouts

Das zentrieren eines Elements ist warscheinlich etwas, dass jeder Webentwickler zu tun hat. Die einfachste und am meisten verbreiste Lösung ist wohl margin:auto; für das entsprechende Element. Diese Methode zentriert das Element, unabhängig von der Auflösung oder der Browser Breite.

#container{
	border: solid 1px #000;
	background: #777;
	width: 400px;
	height: 160px;
	margin: 30px 0 0 30px;
}

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 100px;
	margin: 30px auto;

}

Das Ergebniss was man erwartet:

Aber was der Internet Explorer ausgibt ist:

Das ist ein Fehler des Internet Explorer 6. Allerdings ist er zum Glück leicht zu beheben.

Der Fix

Der einfachste und sicherste Weg, ist dem Element ein text-align:center; zu geben. Das darauf folgende Element erhält dann ein text-align:left; um den Text natürlich wieder korrekt anzuzeigen.

#container{
	border: solid 1px #000;
	background: #777;
	width: 400px;
	height: 160px;
	margin: 30px 0 0 30px;
	text-align: center;
}

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 100px;
	margin: 30px 0;
    	text-align: left;

}

Treppeneffekt

Normalerweise setzt jeder Webentwickler eine Navigation mit einer Liste um. Man erstellt eine Liste und darin ein paar Links. Normalerweise klappt es auch, doch der IE sieht das wohl anders.

ul {
    list-style: none;
}

ul li a {
   	display: block;
   	width: 130px;
	height: 30px;
   	text-align: center;
   	color: #fff;
   	float: left;
	background: #95CFEF;
	border: solid 1px #36F;
	margin: 30px 5px;
}

Ein standard-komformer Browser macht es zum Beispiel so:

Und der IE Screenshot:

Nicht sehr erfreut, wenn ihr mich fragt. Glücklicherweise gibt es auch hier einen 2 Fix`s.

Fix1

Der einfachste Weg ist, anstatt dem Anker Tag dem Listen Element ein float:left; zu geben.

ul li {
	float: left;
}

Fix2

Der zweite Weg ist, dem Listenelement ein display:inline zu geben. Neben der Behebung dieses Fehlers, behebt es auch den doppel margin Bug.

ul li {
	display: inline
}

Doppel margin bei floated Elementen

Dies ist wohl einer der ersten Fehler, die ein Webentwickler beheben sollte, sofern die Seite für den Internet Explorer 6 optimiert werden muss.

#element{
	background: #95CFEF;
	width: 300px;
	height: 100px;
	float: left;
	margin: 30px 0 0 30px;
	border: solid 1px #36F;
}

Das Ergebniss was man erwartet:

Aber was der Internet Explorer 6 ausgibt ist:

Der Fix

Für diesen speziellen Bug, muss man den zu floatenden Element ein display:inline; geben. Unser bisheriger Code ändert sich zu:

#element{
	background: #95CFEF;
	width: 300px;
	height: 100px;
	float: left;
	margin: 30px 0 0 30px;
	border: solid 1px #36F;
   	display: inline;
}

Auto Overflow und relativ positionierte Elemente.

Dieser Fehler passiert, wenn man in einem overflow:auto; Element ein weiteres Element plaziert, mit der Eigenschaft position: relative;. Lasst es mich anhand des Codes demonstrieren:

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 150px;
	margin: 30px 0;
	overflow: auto;
}

#anotherelement{
	background: #555;
	width: 150px;
	height: 175px;
	position: relative;
	margin: 30px;
}

Die erwartete Ausgabe:

Die IE Ausgabe:

Der Fix

Der einfachste Weg ist, dass Eltern Element auch relativ zu positionieren:

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 150px;
	margin: 30px 0;
	overflow: auto;
    	position: relative;
}

Eine mindest Höhe sowie Breite setzen

Der Internet Explorer ignoriert komplett die min-height Eigenschaft.

Der Fix

Dieser Fix ist von Dustin Diaz. Er benutzt die !importent Nachricht, damit es funktioniert:

#element {
  min-height:150px;
  height:auto !important;
  height:150px;
}

Abstand zwischen Listen Elementen

Der IE6 fügt einen vertikalen Abstand ein, wo garkeiner ist. Schauen wir es uns einmal an:


Link 1
Link 2
Link 3

ul {
	margin:0;
	padding:0;
	list-style:none;
}

li a {
	background: #95CFEF;
	display: block;
}

Wie es ausshen sollte:

Was der IE uns ausgibt:

Fix1

Der einfachste Fix ist, dem Anker Tag eine feste Breite zuzuweisen.

li a {
	background: #95CFEF;
	display: block;
    	width: 200px;
}

Fix 2

Die zweite Methode ist, dass Anker Tag links zu floaten und es danach ebenfalls links zu clearen.

li a {
	background: #95CFEF;
	float: left;
    	clear: left;
}

Fix 3

Die dritte Methode ist, dass zu schliessende Listen Element ein display:inline; zu geben. Das behebet ebenfalls den double margin bug wie oben beschrieben:

li {
	display: inline;
}

10 Fonts für cufon und sifr

Christopher Dosin — Tue, 16 Feb 2010 13:16:58 +0000

Cufon, Sifr und Filr sind sehr beliebte Tools für Designer und Webentwickler. Sie erlauben einen jede Font in eine Webseite zu integrieren. Allerdings muss man hierbei sehr Vorsichtig sein, da nicht jede Font Lizenzfrei ist. Da jeder User die Fonts downloaden kann, muss man hier Lizenzfreie Fonts nutzen.

Scripte wie sIFR, Filr und natürlich Cufon machen es für jeden Webentwickler und Designer einfach, jede Schriftart in seine Webseite zu integrieren wie z.B Myriad Pro oder HelveticaNeue. Seit ein paar Monaten sieht man immer mehr Blogs, die belibige Schriftarten als Überschriten und Titel benutzen. Unter anderem benutzt auch Dosonaro eine solche Schriftart in Verbindung mit Cufon.

In diesem Artikel zeige ich euch 10 Schrifarten, die ihr mit @font-face, sIFR, Filr oder Cufon lizenzfrei einbinden könnt.

Fertigo

Download

Delicious

Downloaden

Tallys

Downloaden

Museo Sans

Downloaden

CA BND Bold WEB

Downloaden

League Gothic

Downloaden

Chunk

Downloaden

Flaminia Type System

Downloaden

Junction

Downloaden

Andika

Downloaden

Erstelle eine Dialogbox mit CSS3 und jQuery

Christopher Dosin — Mon, 15 Feb 2010 21:00:30 +0000

Einige von euch wissen mittlerweile sicherlich, dass ich zurzeit an dem neuen Template Marktplatz Themebay arbeite. Hierbei habe ich verschiedene Scripte mit jQuery eingesetzt. Unter anderem auch eine Dialogbox.
In diesem kleinen Tutorial werde ich euch kurz und knapp erklären, wie Ihr eine solche Dialogbox programmieren könnt. Da der Internet Explorer wie üblich nicht alles darstellen kann, wird die Dialogbox im IE ein klein wenig anders aussehen. Natürlich wird sie aber genauso funktionieren, wie in anderen Browsern.

Beachtet bitte, dass Ihr die neuste jQuery Datei im head Bereich eures Dokumentes einbinden müsst, damit die Dialogbox funktioniert.

Die aktuellste Version könnt Ihr euch direkt über Google Code einbinden

Die Demo

Unser Ergbeniss wird in etwa so aussehen:

Da wir mit CSS3 arbeiten, wird unsere Dialox Box im Internet Explorer leider so dargestellt:

Das HTML Markup

Hierbei handelt es sich diesmal um recht wenig HTML Code. Der div Container mit der ID #dialog-overlay stellt den dunklen Hintergrund dar. Der div Container mit der ID #dialog-box stellt die eigentliche Dialogbox dar.






		Close

Die CSS Datei

Beachtet bitte, dass alle Kommentare im Code auf Englisch stehen. So weiss wirklich jeder Webentwickler, was gemeint ist.

#dialog-overlay {

	/* set it to fill the whil screen */
	width:100%;
	height:100%;

	/* transparency for different browsers */
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	background:#000; 

	/* make sure it appear behind the dialog box but above everything else */
	position:absolute;
	top:0; left:0;
	z-index:3000; 

	/* hide it by default */
	display:none;
}

#dialog-box {

	/* css3 drop shadow */
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);

	/* css3 border radius */
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;

	background:#eee;
	/* styling of the dialog box, i have a fixed dimension for this demo */
	width:328px; 

	/* make sure it has the highest z-index */
	position:absolute;
	z-index:5000; 

	/* hide it by default */
	display:none;
}

#dialog-box .dialog-content {
	/* style the content */
	text-align:left;
	padding:10px;
	margin:13px;
	color:#666;
	font-family:arial;
	font-size:11px;
}

a.button {
	/* styles for button */
	margin:10px auto 0 auto;
	text-align:center;
	display: block;
	width:50px;
	padding: 5px 10px 6px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	line-height: 1;

	/* button color */
	background-color: #e33100;

	/* css3 implementation */
	/* rounded corner */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;

	/* drop shadow */
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

	/* text shaow */
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;

}

a.button:hover {
	background-color: #c33100;
}

/* extra styling */
#dialog-box .dialog-content p {
	font-weight:700; margin:0;
}

#dialog-box .dialog-content ul {
	margin:10px 0 10px 20px;
	padding:0;
	height:50px;
}

Javascript

$(document).ready(function () {

	// if user clicked on button, the overlay layer or the dialogbox, close the dialog
	$('a.btn-ok, #dialog-overlay, #dialog-box').click(function () {
		$('#dialog-overlay, #dialog-box').hide();
		return false;
	});

	// if user resize the window, call the same function again
	// to make sure the overlay fills the screen and dialogbox aligned to center
	$(window).resize(function () {

		//only do it if the dialog box is not hidden
		if (!$('#dialog-box').is(':hidden')) popup();
	});	

});

//Popup dialog
function popup(message) {

	// get the screen height and width
	var maskHeight = $(document).height();
	var maskWidth = $(window).width();

	// calculate the values for center alignment
	var dialogTop =  (maskHeight/3) - ($('#dialog-box').height());
	var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2); 

	// assign values to the overlay and dialog box
	$('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
	$('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();

	// display the message
	$('#dialog-message').html(message);

}

Falls euch der Artikel gefallen hat, abonniert doch bitte unseren kostenlosen RSS Feed.

Downloade die Source Dateien kostenlos herunter.

CSS3 cheat sheet als PDF Datei

Christopher Dosin — Sat, 13 Feb 2010 11:55:58 +0000

Beim stöbern auf diversen Blogs bin ich heute auf eine ziemlich hilfreiche PDF Datei gestoßen. Der Webpogrammierer Chris Hanscom von Veign.com hat einen kostenlosen CSS3cheat sheet erstellt. Es ist eine Auflistung aller Eigenschaften, Selektoren Typen und zulässigen Werte in den aktuellen CSS 3-Spezifikation des W3C. Neben jeder Eigenschaft befinden sich die dazu entsprechenden Werte.

CSS3 cheat sheet als PDF Datei downloaden.

Dosonaro

Das Joomla Entwicklerhandbuch: Kommentiere und Gewinne! *BEENDET*

FreshSplash – Free Joomla 1.5 Template

Die Features

Feedsmith Problem mit Wordpress 2.9

Die Lösung

Joomla für Designer Screencast Serie – Tag 5

Quick Tip of the Week – Wie ersetze ich meine Schriftart mit Cufon?

Nützliche Links

Video

Downloaded Cufon

Generiert eure Cufon Schriftart

Elemente mit Cufon ersetzen

Fertig!

Internet Explorer Fix

Pizza Lieferdienst online bezahlen mit Kreditkarte und PayPal

6 der häufigsten IE Bugs und wie man sie behebt

Zentrieren eines Layouts

Der Fix

Treppeneffekt

Fix1

Fix2

Doppel margin bei floated Elementen

Der Fix

Auto Overflow und relativ positionierte Elemente.

Der Fix

Eine mindest Höhe sowie Breite setzen

Der Fix

Abstand zwischen Listen Elementen

Fix1

Fix 2

Fix 3

10 Fonts für cufon und sifr

Fertigo

Delicious

Tallys

Museo Sans

CA BND Bold WEB

League Gothic

Chunk

Flaminia Type System

Junction

Andika

Erstelle eine Dialogbox mit CSS3 und jQuery

Die aktuellste Version könnt Ihr euch direkt über Google Code einbinden

Die Demo

Das HTML Markup

Die CSS Datei

Javascript

CSS3 cheat sheet als PDF Datei

Das Joomla Entwicklerhandbuch: Kommentiere und Gewinne! BEENDET