USER-XY http://www.user-xy.de Webdesign und Webentwicklung Wed, 21 Sep 2016 11:52:37 +0000 de-DE hourly 1 Semantic Versioning im Projekt einsetzen http://www.user-xy.de/semantic-versioning-im-projekt-einsetzen/ http://www.user-xy.de/semantic-versioning-im-projekt-einsetzen/#respond Wed, 21 Sep 2016 11:51:20 +0000 http://www.user-xy.de/?p=4078 Auf der Suche nach einem Best Practice Pattern für die Versionierung meiner Projekte bin ich auf die Seite von semver.org gelangt. Dort ist das Regelwerk des Semantic Versioning beschrieben in dem gezeigt wird, wie sich eine Version zusammensetzt und wann welche Stelle der Versionsnummer zu ändern ist. Semantic Versioning Überblick Eine Versionsnummer besteht aus drei Stellen: MAJOR.MINOR.PATCH MAJOR wird erhöht, wenn Änderungen am Code nicht …

The post Semantic Versioning im Projekt einsetzen appeared first on USER-XY.

]]>
Auf der Suche nach einem Best Practice Pattern für die Versionierung meiner Projekte bin ich auf die Seite von semver.org gelangt. Dort ist das Regelwerk des Semantic Versioning beschrieben in dem gezeigt wird, wie sich eine Version zusammensetzt und wann welche Stelle der Versionsnummer zu ändern ist.

Semantic Versioning Überblick

Eine Versionsnummer besteht aus drei Stellen: MAJOR.MINOR.PATCH

semantic versioning: major, minor, patch

  1. MAJOR wird erhöht, wenn Änderungen am Code nicht mehr mit der aktuellen API kompatibel sind.
  2. MINOR wird erhöht, wenn neue API-kompatible Funktionalitäten bereitgestellt werden.
  3. PATCH wird erhöht, wenn es sich bei den Änderungen ausschließlich um API-kompatible Bugfixes handelt.

Semver.org bietet eine detailierte Spezifikation, um ein möglichst transparentes Verständnis zwischen Entwicklern und Usern zu schaffen, was eine Versionsänderung bedeutet und welche Auswirkungen zu erwarten sind.

Wer steht dahinter?

Die Semantic Versioning Spezifikation ist von Tom Preston-Werner, Erfinder von Gravatars und Mitbegründer von GitHub, erstellt worden.

The post Semantic Versioning im Projekt einsetzen appeared first on USER-XY.

]]>
http://www.user-xy.de/semantic-versioning-im-projekt-einsetzen/feed/ 0
JavaScript Days, AngularJS Days, HTML5 Days http://www.user-xy.de/javascript-days-angularjs-days-html5-days/ http://www.user-xy.de/javascript-days-angularjs-days-html5-days/#respond Thu, 08 Sep 2016 21:25:11 +0000 http://www.user-xy.de/?p=3972 Heute ist der letzte Tag um noch eines der begehten „early Bird“ Tickets für diese drei Konferenzen in Berlin zu ergattern. Ein Ticket, alle Vorträge. JavaScript Days, AngularJS Days, HTML5 Days auf einen Schlag! Das kann man sich einfach nicht entgehen lassen. Bei den ganzen tollen Themen weis man gar nicht welche man sich am liebsten anhören möchte. Was wird geboten? Angefangen bei CouchDB für …

The post JavaScript Days, AngularJS Days, HTML5 Days appeared first on USER-XY.

]]>
JavaScript Days

Heute ist der letzte Tag um noch eines der begehten „early Bird“ Tickets für diese drei Konferenzen in Berlin zu ergattern.
Ein Ticket, alle Vorträge. JavaScript Days, AngularJS Days, HTML5 Days auf einen Schlag! Das kann man sich einfach nicht entgehen lassen. Bei den ganzen tollen Themen weis man gar nicht welche man sich am liebsten anhören möchte.

Was wird geboten?

Angefangen bei CouchDB für alle und JavaScript Performance, über die Erstellung von Cross-Plattform-Applikationen mit AngularJS, Ionic2, Electron und Cordova bis hin zu Touch- und Pointer Events mit HTML5 und einem Ausblick auf HTML5 2.0. Hier die Programmübersicht.

Ticket sichern

Ein paar Stunden bleiben euch noch! Also gleich noch ein Ticket sichern. Falls ihr noch überlegt, es gibt ja auch noch die „normalen“ Tickets.

Freue mich darauf den ein oder anderen in Berlin zu sehen!
Bis dahin! Happy Coding!

The post JavaScript Days, AngularJS Days, HTML5 Days appeared first on USER-XY.

]]>
http://www.user-xy.de/javascript-days-angularjs-days-html5-days/feed/ 0
Was sind PHP Variablenfunktionen? http://www.user-xy.de/was-sind-php-variablenfunktionen/ http://www.user-xy.de/was-sind-php-variablenfunktionen/#respond Thu, 18 Aug 2016 15:47:00 +0000 http://www.user-xy.de/?p=3891 Einen tolles Konstrukt von PHP den ich heute kennengelernt habe sind die Variablenfunktionen. Bekommt man einen Funktionsnamen aus irgendeinem Grund als String übergeben, kann man mit Hilfe der Variablenfunktionen diese Funktion trotzdem aufrufen. Hierzu muss man einfach den Funktionsnamen in geschweifte Klammern schreiben. Das hier drüber ist die Kurzschreibweise. Wem das nicht gefällt, oder wer den Funktionsnamen so wie so in einer Variablen stehen hat, …

The post Was sind PHP Variablenfunktionen? appeared first on USER-XY.

]]>
Einen tolles Konstrukt von PHP den ich heute kennengelernt habe sind die Variablenfunktionen. Bekommt man einen Funktionsnamen aus irgendeinem Grund als String übergeben, kann man mit Hilfe der Variablenfunktionen diese Funktion trotzdem aufrufen. Hierzu muss man einfach den Funktionsnamen in geschweifte Klammern schreiben.

$this->{'myFunc'}();

Das hier drüber ist die Kurzschreibweise. Wem das nicht gefällt, oder wer den Funktionsnamen so wie so in einer Variablen stehen hat, kann auch folgende Syntax verwenden.

$foo = new Foo();
$myFunc = "Variable";
$foo->$myFunc();

Wo können KEINE Variablenfunktionen verwendet werden?

ACHTUNG! Nicht in jedem Fall kann diese Schreibweise verwendet werden. Funktionen bei denen es nicht funktioniert sind beispielsweise echo, print, unset(), isset(), empty(), include und require. Hier müssen eigene Wrapperfunktionen geschrieben werden.

Für weitere Informationen und eine Liste der Funktionen die Variablenfunktionen erlauben, schaut doch einfach bei php.net vorbei. Hier findet ihr noch viele weitere Beispiele.

The post Was sind PHP Variablenfunktionen? appeared first on USER-XY.

]]>
http://www.user-xy.de/was-sind-php-variablenfunktionen/feed/ 0
jQuery-Tutorial: Einführung und Grundlagen http://www.user-xy.de/jquery-tutorial-einfuehrung-und-grundlagen/ http://www.user-xy.de/jquery-tutorial-einfuehrung-und-grundlagen/#comments Tue, 01 Apr 2014 08:40:15 +0000 http://www.user-xy.de/?p=1343 jQuery-Tutorial für Einsteiger Das Javascript-Framework jQuery wurde von John Resig entwickelt und zählt heute zu den beliebtesten Bibliotheken, nicht zuletzt wegen seiner einfachen Handhabung. Für alle, die einen Einstieg in die Welt von jQuery planen, habe ich hier eine Einführung in die Grundlagen von jQuery. jQuery wird auch als „AJAX-Framework“ bezeichnet. AJAX steht für Asynchronous JavaScript and XML) und bezeichnet den Vorgang der asynkronen Datenübertragung …

The post jQuery-Tutorial: Einführung und Grundlagen appeared first on USER-XY.

]]>
jQuery-Tutorial für Einsteiger

Das Javascript-Framework jQuery wurde von John Resig entwickelt und
zählt heute zu den beliebtesten Bibliotheken, nicht zuletzt wegen seiner
einfachen Handhabung.

Für alle, die einen Einstieg in die Welt von jQuery planen, habe ich hier eine
Einführung in die Grundlagen von jQuery.

jQuery wird auch als „AJAX-Framework“ bezeichnet. AJAX steht für Asynchronous JavaScript and XML) und bezeichnet den Vorgang der asynkronen Datenübertragung zwischen Server und Client. Für solche Aufgaben bietet jQuery viele Möglichkeiten.
Ein Beispiel für eine AJAX Anwendung findest du in meinem Artikel „Mit Ajax Content nachladen“.

jQuery eignet sich aber nicht nur für AJAX-Anwendungen, sondern auch sehr hervorragend für die DOM-Manipulation, also das ändern von HTML Elementen und deren Eigenschaften.

Das jQuery Projekt ist super dokumentiert und sollte immer in Reichweite sein. Die Dokumentation beinhaltet sehr viele Beispiele, bei denen man sofort den Verwendungszweck der ein oder anderen Methode sieht und versteht. Hier findet man die API-Documentation mit allen Informationen zu den Grundfunktionen, die jQuery bereitstellt.

jQuery-Tutorial Start:

Zu Beginn braucht man erstmal die jQuery Bibliothek. Sollte man permanenten Internetzugriff
haben kann man die aktuellste Version direkt von der jQuery Seite einbinden.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script><script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

Momentan existieren zwei Stände von jQuery. „jquery-1.11.0“ und „jquery-2.1.0“.
Die Version „1.11.0“ unterstützt im Gegensatz zu der neueren und etwas schlankeren Version
allerdings noch die Internet Explorer 6, 7, und 8. Wer also auf Abwärtskompatibilität Wert legt,
sollte sich für die „ältere“ Version entscheiden.

Will man sich eine Kopie der jQuery Bibliothek lokal auf seinen Rechner ziehen,
geht man am besten auf die Downloadseite von jQuery,
wählt die aktuelle Version aus, und kopiert den gesamten Quellcode direkt in eine leere .js-Datei. Diese muss dann nur noch in der Webseite eingebunden werden.

Die Einbindung der jQuery Bibliothek erfolgt im Headbereich des HTML-Dokuments. Erst nachdem die jQuery Bibliothek eingebunden ist, werden weitere JavaScript Dateien eingebunden.
Somit ist sichergestellt, dass man Zugriff auf die jQuery-Syntax und die Methoden hat.


<!DOCTYPE html>
<html lang="de-DE">
    <head>
         <title>jQuery Einführung</title>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width" />
         <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
         <script type="text/javascript" src="js/functions.js"></script>
    </head>
    <body>

    </body>
</html>

jQuery-Tutorial Beispiele:

In folgenden Beispielen soll das Verständnis von jQuery etwas verdeutlicht werden. Auch will ich hier zeigen, auf welche unterschiedlichen Arten jQuery verwendet werden kann.

Prüfen ob jQuery geladen wurde:

if(typeof(jQuery) !== undefined){
	alert("jQuery wurde geladen");
}

jQuery Grundgerüst

In 98% der Fälle will man Elemente auf der Seite manipulieren. Hierzu muss der Zeitpunkt gewählt werden, an denen Sie alle geladen sind, um dann auf sie zugreifen zu können.

$(document).ready(function(){

});

Elemente mit jQuery ansprechen.

	$("#id").hide();
	jQuery("#id").hide();

Ein Element spricht man mit jQuery entwedert über das $-Zeichen, oder den Namen „jQuery“, gefolgt von runden Klammern, an.
Es gibt jetzt zwei Möglichkeiten, was in den runden Klammern stehen kann. Entweder, wie hier im Beispiel Anführungszeichen und einer ID, so wie man sie auch in CSS Dateien findet, oder man schreibt eine Variable hinein. Diese Variable steht dann NICHT in Anführungszeichen. Der Wert dieser Variablen, also, das was in der Variablen steht, sollte ein gültiger Selektor sein, wie man ihn auch im CSS verwenden kann. Nur dann ist sichergestellt, dass es nicht zu einem Syntaxfehler kommt.

jQuery VS. JavaScript:

jQuery

	$("p span");

JavaScript


for(var i = 0; i < document.getElementsByTagName("p").length; i++){
	for(var j = 0; j < document.getElementsByTagName("p")[i].getElementsByTagName("span").length; j++){
		document.getElementsByTagName("p")[i].getElementsByTagName("span")[i]
	}
}

An diesem Beispiel will ich verdeutlichen, wie viel Arbeit jQuery dem Anwender durch seine einfache Syntax und Struktur, abnimmt. Eine einfache Selektion von Elementen gestaltet sich in Javascript oft sehr schwierig, wie man an oberem Code-Beispiel sehen kann. Mit jQuery hingegen ist diese Selektion mit nur einer halben Zeile abgehandelt.

Elemente selektieren:

Elemente werden mit CSS-Logik selektiert.


$("#id").hide(); // Versteckt #id

$("section").hide(); // Versteck alle sections

$("section.class").hide(); // Versteck alle sections mit der Klasse class

$("section[rel]").hide(); // Versteck alle sections, die ein rel Attribut haben

$("section, article").hide(); // Versteckt alle article und section Tags

Um Metoden auf bestimmte Elemente anzuwenden, müssen diese selektiert, d.h. eingegrenzt werden. Dies funktioniert analog zu der CSS Selektion.

Reagiere auf ein click-Event

Alle p-Tags werden beim klick auf ein p-Tag ausgeblendet.

$("div p.click_to_hide_all").bind("click", function(){
   $("p.click_to_hide_all").hide();
});

Nur das p-Tag, auf das geklickt wurde wird ausgeblendet.

$("div p.click_to_hide_self").bind("click", function(){
   $(this).hide();
});

Beipiel: Element auf das geklickt wurde, ausblenden

Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.

Beipiel: Element auf das geklickt wurde, blendet alle Elemente mit der gleichen Klasse aus.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.

Reagiere auf unterschiedliche Events

Blendet Element aus wenn man darauf klickt, oder mit der Maus darüber fährt. (Nützlich für Touchgeräte)


$("div.double-event").bind("click mouseover", function(){
	$(this).hide();
});

Beispiel: Blendet Element bei verschiedenen Events aus.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.

Content anhängen

Inhalte können an das Ende eines Elements angehängt werden. Hier wird ein Link an das Ende eines Paragraphen gesetzt.

Hier werden die Elemente innerhalb des Elements, an das sie angehängt sind, eingefügt.

$("p.append_element").append("<span>Fußnote</span>");

Beispiel: Inhalt am Ende des Elements einfügen

Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.

Content voranstellen

Genauso wie an das Ende können Inhalte auch an den Anfang eines Elements gesetzt werden. In diesem Fall wird eine Zwischenüberschrift an den Anfang eines Paragraphen gesetzt.

$("p.prepend-element").prepend("Zwischenüberschrift");

Beispiel: Inhalt an den Anfang des Elements einfügen

Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.

Schleifen in jQuery

„each“ ist eine Methode um alle Elemente durchzugehen. Dies wird oft verwendet um nach bestimmten Elementen zu suchen, oder Attribute von Elementen zu manipulieren.

$("a.link").each(function(){
	$(this).attr("href", "javascript:void(0);");
});

Beispiel: Linkziel aller Links ändern

USER-XY
Google
jQuery
Lorem ipsum

Untersucht man die Links jetzt mit Firebug, so sieht es aus, als ob der Quelltext angepasst wäre.Sieht man sich allerdings den „echten“ Quelltext mit (StrG + u) an, so sieht man sofort, dass der Quelltext gleich geblieben ist.

CSS Eigenschaften auslesen und Manipulieren

Häufig will man bei einem bestimmten Event, die Schriftfarbe eines Elements ändern, sofern es diese nicht schon hat.

Auslesen der CSS Eigenschaft:

var elemColor = $("#css_element").css("color");

Manipulieren der CSS Eigenschaft:

$("#css_element").css({
	color: elemColor,
	fontSize: "20px"
});

Beispiel: CSS über jQuery verändern.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.

Elemente animieren

Um etwas mehr dynamik in die Seite zu bringen, kann man verschiedene Element auch animieren.

Über die „animate“-Funktion lassen sich allerdings nur Eigenschaften mit Zahlenwerten animieren. Farben kann man so nicht ändern.

$("div.animate").click(function(){
	$(this).animate({
		width : "600px",
		height : "200px"
	}, 1000);
});

Beispiel: Animiertes Element

Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.

Mauszeiger-Position ermitteln

Die aktuelle Position der Maus ermittelt man mit der Funktion mousemove().

$( "div" ).mousemove(function( event ) {
var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
$( "span:first" ).text( "( event.pageX, event.pageY ) : " + pageCoords );
$( "span:last" ).text( "( event.clientX, event.clientY ) : " + clientCoords );
});

Beispiel: Mauszeiger Position

Move the mouse over the div.
 

The post jQuery-Tutorial: Einführung und Grundlagen appeared first on USER-XY.

]]>
http://www.user-xy.de/jquery-tutorial-einfuehrung-und-grundlagen/feed/ 4
WordPress Wartungsmodus schaltet nicht mehr ab http://www.user-xy.de/wordpress-wartungsmodus-schaltet-nicht-mehr-ab/ http://www.user-xy.de/wordpress-wartungsmodus-schaltet-nicht-mehr-ab/#comments Fri, 21 Mar 2014 13:09:13 +0000 http://www.user-xy.de/?p=1359 WordPress Wartungsmodus Meldung: Heute ist es passiert. Nach einem Plugin Update auf diesem Blog, schaltete sich der Wartungsmodus nicht mehr ab. Egal ob man auf das Front- oder Backend zugreifen will, erscheint die Fehlermeldung: Für kurze Zeit nicht verfügbar, um eine regelmäßige Instandhaltung durchzuführen. Prüfe in einer Minute erneut. Dies liegt daran, dass WordPress bei einem Update in den Wartungsmodus wechselt. Dabei ist es egal, …

The post WordPress Wartungsmodus schaltet nicht mehr ab appeared first on USER-XY.

]]>
WordPress Wartungsmodus Meldung:

Heute ist es passiert. Nach einem Plugin Update auf diesem Blog, schaltete sich der Wartungsmodus nicht mehr ab. Egal ob man auf das Front- oder Backend zugreifen will, erscheint die Fehlermeldung:

Für kurze Zeit nicht verfügbar, um eine regelmäßige Instandhaltung durchzuführen. Prüfe in einer Minute erneut.

Dies liegt daran, dass WordPress bei einem Update in den Wartungsmodus wechselt. Dabei ist es egal, ob es sich um ein Plugin oder Core-Update handelt. So sollen Fehler verhindert werden, die entstehen könnten, wenn sich User zum Zeitpunkt des Updates auf der Seite befinden und somit Funktionen ausgeführt werden, während die Datei gerade neu angelegt wird.

Ist das Update erfolgreich verlaufen, schaltet WordPress den Wartungsmodus normalerweise automatisch wieder ab. Wenn ein Fehler auftritt, wird das Update abgebrochen, die alte Version wird weiter verwendet, eine Fehlermeldung wird im Backend ausgegeben und auch hier wird der Wartungsmodus wieder abgeschaltet.

WordPress Wartungsmodus abschalten

Manchmal kann es allerdings passieren, dass ein Fehler auftritt, den WordPress nicht registriert, oder der Server während dieses Vorgangs nicht erreichbar ist. Aufgrund dessen wird der Wartungsmodus nicht abgeschalten und die Meldung bleibt bestehen.

Aber dieses Problem lässt sich ganz einfach lösen indem man den Wartungsmodus manuell abschaltet.

1. Hauptverzeichnis der WordPress Installation aufrufen.2. Die Datei „.maintenance“ suchen und löschen.

Manche FTP-Programme zeigen die Datei nicht an. Das gleiche gilt auch für „.htaccess“ oder „.htpasswd“ Dateien. Deshalb kann ich an dieser Stelle nur das Programm „Win-SCP“ empfehlen, wenn ihr unter Windows arbeitet.

Fazit

Der Fehler, dass sich WordPress im Wartungsmodus „aufhängt“ kam bei mir heute das erste Mal. Wie man hier sehen konnte, ist es nicht tragisch viel Aufwand diesen kleinen Fehler zu beheben, allerdings sollte man wissen, wie es geht.

Nachdem abschalten des Wartungsmodus habe ich mich wieder in mein WordPress-Backend eingeloggt. Dort habe ich das fehlgeschlafenge Update einfach nochmal ausgefährt. Keine weiteren Probleme.

The post WordPress Wartungsmodus schaltet nicht mehr ab appeared first on USER-XY.

]]>
http://www.user-xy.de/wordpress-wartungsmodus-schaltet-nicht-mehr-ab/feed/ 7