Autor: Chris

Mit WIX Code komplexe Funktionalitäten einbauen

GD Star Ratingloading...Das ist Wix Wie schon in einem früheren Post berichtet bietet der Homepage-Baukasten von Wix eine Möglichkeit Webseiten ohne Programmierkenntnisse zu erstellen. Das eignet sich besonders für kleine Unternehmen oder Selbstständige, die sich einen professionellen Webdesigner nicht leisten können oder besonderen Wert darauf legen die eigene Webseite selber nach den eigenen Vorstellungen zu gestalten. Gerade mit der recht neuen Wix ADI können Nutzer auch ohne jegliche gestalterische Kenntnisse oder Programmiererfahrung ansprechende Webseiten erstellen. Das funktioniert auch gut solange man keine komplexen oder sehr individuellen Funktionalitäten benötigt. Will ein Wix-Nutzer jedoch individualisierte Funktionen einbauen oder ein ganz spezifisches Verhalten ermöglichen so war das bisher nicht möglich. Wix war damit für Menschen mit Programmierkenntnissen eher uninteressant. Doch das hat sich mit dem neuesten Feature von Wix grundlegend geändert. Mithilfe von Wix Code können technisch versierte Nutzer individuelle Funktionalitäten in ihre Webseite einbauen. Wix Code Einführung Wix Code bietet verschiedene Module, mit deren Hilfe es recht simpel ist das Verhalten der Webseite zu steuern. So lassen sich zum Beispiel mit dem wix-fetch-Modul Daten von einem beliebigen Endpunkt holen. Oder mit wix-data Daten in Collections speichern und darauf zugreifen. Eine Auflistung der verfügbaren Module siehst Du hier in der linken Spalte. Zu jedem Modul gibt es auch noch eine Vielzahl an Hooks, durch die man Code zu ganz bestimmten Zeitpunkten ausführen kann, z.B. bevor ein Element aus der Collection gelöscht wird. Neben Modulen...

Read More

Webseiten mit Wix bauen

GD Star Ratingloading...Webseiten nach dem Baukasten-Prinzip zu bauen ist in den letzten Jahren zunehmend beliebt geworden. Gerade kleine Unternehmen und Selbstständige, die eine Webseite für ihren Betrieb benötigen, greifen häufig zum Homepage erstellen auf Homepage-Baukästen wie Wix zurück. Das liegt zum einen daran, dass die Kosten für einen professionellen Webdesigner häufig nicht im Budget des Unternehmers liegen. Außerdem lässt sich eine Webseite, die mit einem Baukasten erstellt wurde, nach freiem Belieben gestalten und im Nachhinein ohne Absprache mit einem externen Entwickler anpassen. Inhalte können einfach geändert, Seiten hinzugefügt oder Designs adaptiert werden. Das alles ist auch für den Laien ohne Programmierkenntnisse einfach umzusetzen. Webseiten mit Wix erstellen Nach dem Login auf Wix erhält der Nutzer einen Überblick über seine bisherigen Webseiten und kann neue Webseiten anlegen. Nach dem Anlegen einer neuen Webseite kann man sich aus einer Vielzahl an unterschiedlichen Design-Templates das passende aussuchen. Die Templates sind dabei nach Kategorien sortiert, so dass es z.B. einem Restaurantbetreiber leicht fällt die passenden Restaurant-Templates zu finden oder einer Bloggerin eine Vielzahl an stylischen Blog-Layouts zur Auswahl steht. Bearbeiten-Modus Inhalte hinzufügen Hinzufügen von Bildeffekten Apps einfach hinzufügen   Sobald man sich für ein passendes Design entschieden hat, gelangt man in den Bearbeiten-Modus seiner Webseite. Hier lassen sich einfach per Drag-and-Drop-Funktion Inhalte wie Texte, Galerien, Buttons oder Formulare in die Webseite einfügen. Inhalte können einfach angepasst werden, indem sie mit der Maus angeklickt und anschließend über leicht...

Read More

Fehlerbehandlung mit Exceptions in PHP 5

GD Star Ratingloading...In PHP 4 wurde die Fehlerbehandlung aus Funktionen oder Methoden mithilfe der return-Anweisung zurückgegeben. Nehmen wir zum Beispiel an, wir möchten innerhalb einer Methode oder Funktion eine MySQLi-Verbindung aufbauen. Beim Scheitern der Verbindung soll eine Fehlermeldung sowie der zugehörige Fehlercode ausgegeben werden. In PHP 4 hätte die Fehlerbehandlung so ausgesehen: function connect_to_mysql() {$mysqli = @new mysqli('localhost', 'username', 'password', 'db_name'); if ($mysqli->connect_errno) { return false;} return true;} Möchten wir nun herausfinden, ob die Verbindung zur Datenbank erfolgreich hergestellt worden ist oder nicht, müssen wir den Rückgabewert der Funktion überprüfen. if(connect_to_mysql() == false) {echo "Es konnte keine Verbindung zur Datenbank hergestellt werden."; die();} Haben wir jetzt zum Beispiel noch weitere Funktionen fürs Einfügen neuer Einträge in die Datenbank oder fürs Selektieren von Einträgen, so müssen wir für jede Funktion einzeln überprüfen, ob ein Fehler aufgetreten ist oder nicht. Bauen die einzelnen Funktionsaufrufe aufeinander auf, so ist dies umso wichtiger. In PHP 5 ist die Fehlerbehandlung innerhalb von Klassen nun mittels Exceptions möglich. Die Klassenmethode connect_to_mysql() würde in PHP 5 mit Exceptions so aussehen: public function connect_to_mysql() {$mysqli = @new mysqli('localhost', 'username', 'password', 'db_name'); if ($mysqli->connect_errno) { throw new Exception('Es konnte keine Verbindung zur Datenbank hergestellt werden.');}} Im Skript, das die Klassenmethode aufruft, fällt jetzt die explizite Überprüfung auf den Rückgabewert weg. Die Abarbeitung des Skripts wird unterbrochen sobald eine Exception auftritt. Dies ist vermutlich einer der größten Vorteile von...

Read More

CSS3 Transitions

GD Star Ratingloading...Wie man Transitions nutzt CSS3 bietet sehr viele nützliche neue Features. Eines dieser Features sind Transitions (dt. Übergang/Blende). Mit Transitions lassen sich auf einfache Weise Effekte beim Übergang von einem Style zu einem anderen animieren. Sieh Dir einmal die Navigation oben auf dieser Seite an. Es ist zwar nicht sehr auffällig, aber wenn Du genau hinschaust, wirst Du merken, dass der Link beim Mouseover nicht direkt die Farbe wechselt, sondern fließend von der einen in die andere Farbe übergeht. Das gleiche passiert übrigens mit allen Links auf der Webseite. Um eine CSS-Eigenschaft zu animieren benötigen wir immer einen Anfangs- und einen Endzustand. Der Endzustand kann zum Beispiel über die Pseudo-Klasse :hover oder über eine Klasse definiert werden, die einem Element per Javascript zugewiesen wird. Um die Farbe von Links mittels Transitions zu animieren, reicht schon der folgende Code. Zu beachten ist, dass wir für Safari eine Regel mit dem Prefix -webkit, für Firefox mit dem Prefix -moz und für Opera eine Regel mit dem Prefix -o hinzufügen müssen. a {color: #FF4E50; -webkit-transition: color .25s ease-in-out; -moz-transition: color .25s ease-in-out; -o-transition: color .25s ease-in-out; transition: color .25s ease-in-out;} a:hover {color: #2F9999;}Solltest Du an mehreren Stellen in Deinen CSS-Dateien CSS3-Features nutzen, so kann ich Dir das Skript Prefix free empfehlen, das für Dich alle nötigen Prefix-Regeln für die unterschiedlichen Browser automatisch einfügt. Betrachten wir jetzt einmal den Code genauer....

Read More

Wie man eine HTML5 Webseite aufbaut – Teil 2

GD Star Ratingloading...Die Übersetzung dieses Tutorials ist momentan leider noch nicht optimal und wird nach und nach verbessert. Du kannst alternativ die englische Version lesen. Im zweiten Teil des Tutorials werden wir den CSS-Code erstellen und die Webseite responsive machen. Falls Ihr den ersten Teil des Tutorials, in dem der Aufbau der HTML-Struktur und das Einbinden der benötigten Skripts erklärt wird, noch nicht gelesen habt, solltet Ihr dies tun bevor Ihr mit dem zweiten Teil anfangt. Wir haben ja bereits im letzten Teil unseren CSS Reset eingebunden. Der Reset sorgt dafür, dass wir keine vorgegebenen Stylings für HTML-Elemente haben, die in jedem Browser unterschiedlich ausfallen können. Wir können nun also anfangen unsere Seite von Grund aus aufzubauen, müssen aber natürlich darauf achten, dass z.B. Paragraphen nicht mehr automatisch einen vom Browser vorgegebenen Innenabstand haben und wir somit jeden Wert selbst definieren müssen. Erstellen des Stylings – Definieren der globalen Regeln Wenn wir ein Stylesheet erstellen, ist es wichtig mithilfe von Kommentaren die Datei in verschiedene Bereiche einzuteilen. Der erste Bereich ist der globale oder generelle Bereich, in dem wir generelle Stylings einfügen, die auf der ganzen Webseite verwendet werden und sich im Allgemeinen nicht verändern. Das erste Element, das wir stylen, ist das body-Element. Wie Du auf der Webseiten-Vorschau sehen kannst, soll die Seite einen orangenen Streifen am oberen Rand erhalten. Dieser Streifen wird durch einen 5px dicken Rand...

Read More
  • 1
  • 2