Archiv der Kategorie: Webdesign

Alles über Webdesign.

WIX der Homepage Baukasten

Werbung:

Homepage Baukasten zum erstellen von Webseiten ohne Programmierkenntnisse

Homepage Baukasten Systeme wie der WIX Homepage Baukasten werden immer beliebter

Homepage Baukasten Systeme werden heutzutage immer beliebter, vor allem bei Usern welche sich nicht mit Programmiersprachen, Datenbanken oder Webhosting befassen möchten. Eines dieser Homepage Baukasten Systeme ist der „WIX Homepage Baukasten„. Wir möchten euch an dieser Stelle eine kurze Anleitung bieten welche euch erklärt wie man schnell und effektiv mit WIX durchstartet und einen „Blog“ anlegen kann. WIX ist ein kostenloses Homepage Baukasten System welches aber auch kostenpflichtige Services anbietet um die Funktionspalette des Systems zu erweitern. Diese sind aber zum Erstellen einer Website nicht unbedingt notwendig, sie stellen lediglich eine Erweiterung der Grundfunktionen von WIX dar.

 

Ihr findet den WIX-Homepage Baukasten unter der Adresse: www.wix.com

Wix Homepage Baukasten

WIX der Homepage Baukasten – Homepage

 

Homepage Baukasten Tutorial – Mit Wix eine Webseite erstellen

Wir erstellen nun eine Test Webseite mit Wix und führen euch durch die einzelnen Schritte, die dazu notwendig sind.

 

Homepage Baukasten Wix.com – Account erstellen

Man startet auf der WIX Homepage indem man sich ein Konto anlegt. Man muss dazu seine E-Mail Adresse und ein Passwort angeben, nach einer Sicherheitsabfrage klicken wir auf „Registrieren“ und schon kann es losgehen. An die angegebene E-Mail Adresse wird prompt eine willkommens Nachricht geschickt.

 

Homepage Baukasten Wix.com – Kategorien auswählen

Im nächsten Bildschirm ist man schon automatisch eingeloggt und kann sich eine Kategorie und eine Unterkategorie für seine Webseite aussuchen. Wir wählen, unter den zahlreichen Auswahlmöglichkeiten, die Kategorie „Blog“, die Unterkategorie „Rezensionen“ und klicken, auf der rechten Bildschirmseite, auf „LOS„.

 

Homepage Baukasten Wix.com – Homepage Vorlage auswählen

Auf der nächsten Seite angekommen lesen wir die Überschrift „Wählen Sie Ihre Homepage-Vorlage: Rezensionen„. Hier werden uns einige kostenlose Designs oder Templates für unsere Seite angeboten. Man kann an dieser Stelle ebenfalls die Kategorie und Unterkategorie noch einmal ändern wenn man möchte. Wir möchten dies nicht tun sondern entscheiden uns für einen „Kunst & Kultur – Blog“ und wählen die entsprechende Vorlage aus. Man kann unter dem Vorlagenbild zwischen zwei Buttons wählen: „Ansehen“ und „Bearbeiten„, weiterhin steht dort auf der linken Seite ob es sich um eine kostenpflichtige oder eine gratis Vorlage handelt. Bei einem Klick auf „Ansehen“ öffnet sich ein neuer Tab im Browser und wir sehen eine Vorschau unseres zukünftigen Kunst & Kultur – Blogs. Wir möchten diese Vorlage nun auswählen und klicken auf „Bearbeiten„. Ein loading Screen öffnet sich in welchem steht das der WIX HTML Editor geladen wird.

 

Homepage Baukasten Wix.com – Der HTML Editor

Sobald die Seite fertig geladen ist öffnet sich ein „Willkommen im HTML Editor“ Fenster in welchem ein Einleitungsvideo abgespielt wird. In dem Video werden einem von einer sehr netten Stimme die wichtigsten Grundfunktionen des HTML Editors erklärt. Da dieses Video die Funktionen wirklich sehr gut erklärt gehen wir an dieser Stelle nicht weiter auf das Video ein. Mit einem Klick auf das „X“ recht oben schließt sich das Video Fenster und wir sind im Editor.

 

Hier kann mit einem Klick auf den Button „Seiten“ seine einzelnen HTML Seiten verwalten. Mit einem Klick auf „Design kann man unter der Rubrik „Hintergrund“ Hintergrundbilder hochladen oder Bilder aus den WIX Vorlagen auswählen. Unter „Farben“ kann man zwischen einigen Farbschemas für die Seite wählen oder sich eigene Farbschemas anlegen. Die dritte und letzte Rubrik hier ist die „Fonts“ Rubrik. Hier können wir zwischen einigen Font Schemen auswählen oder wie schon bei den Farbschemas seine eigenen Font Schemen anlegen.

 

Während dieser Vorgänge wird automatisch ein Popup Fenster geöffnet in welchem wir aufgefordert werden unsere bisherige Arbeit zu speichern indem wir uns einen Namen für unser Projekt aussuchen. Wir nennen unser Projekt „Test-Blog„. Durch Eingabe des Namens wird gleichzeitig eine Adresse bzw. Benutzerdomain für unseren Testblog generiert. Diese Domain sieht folgendermaßen aus: http://benutzername.wix.com/test-blog. Man wird darauf hingewiesen das man diesen Schritt auch später ausführen kann. Mit einem Klick auf „Speichern“ beenden wir diesen Schritt. Daraufhin öffnet sich ein „Glückwunsch Fenster“ welches wir mit „OK“ bestätigen.

 

Nun widmen wir uns der Rubrik „Elemente“ im HTML Editor. Unter dieser Rubrik kann man aus einem sehr großen Pool an HTML Elementen wählen und diese per Drag and Drop mit der Maus in seiner Webseite positionieren. Man kann hier zwischen Texten, Bildern, Medien, Formen & Linien, Buttons & Menüs, Blog-Elementen, Onlineshop, sozialen Netzwerken, Apps und einem Listenbaukasten wählen. Wenn man ein Element auswählt öffnet sich ein Untermenü in welchem man einige Attribute des Elements festlegen kann. Generell ist hier jeder Schritt sehr ausführlich erklärt so dass man, ohne groß nachzudenken, eine funktionierende Webseite sozusagen zusammen klicken kann.

 

Die nächste Rubrik ist der „App-Markt“ in welchem man kostenlose aber auch kostenpflichtige Apps für sein Projekt auswählen kann.

 

Die letzte Rubrik im HTML Editor sind die „Einstellungen“. Dort kann man Einstellungen zu den Bereichen Website-Adresse, SEO (Google), Soziale-Netzwerk-Einstellungen und Favicon tätigen.

 

Homepage Baukasten Wix.com – Veröffentlichen der Website

Oben im HTML Editor befindet sich eine Leiste auf welcher man unter anderem Buttons zum Speichern, Veröffentlichen, zur Vorschau und Premium vorfindet. Mit einem Klick auf „Premium“ kommt man auf eine Angebots Seite von Wix wo man zwischen einigen kostenpflichtigen Premium Paketen auswählen kann. Da wir uns auf kostenlose Services konzentrieren belassen wir es an dieser Stelle mit der Premium Pakete Auswahl. Mit einem Klick auf veröffentlichen wird unsere Seite für die Öffentlichkeit sichtbar und wir sind fertig. Alle hier erklärten Rubriken des HTML Editors funktionieren ohne Programmierkenntnisse. Sämtliche Funktionen sind mit der Maus via Drag and Drop auszuführen.

 

Ich hoffe dieses Review konnte euch etwas weiterhelfen bei der Entscheidung ob Ihr eine Webseite selbst, via Programmieren, oder über einen Homepage Baukasten anlegen möchtet. Für Rückfragen könnt Ihr einfach einen Kommentar hinterlassen.

 

HTML Umlaute und Sonderzeichen

Ihr habt euch bestimmt schon öfter über die fehlerhafte Darstellung der HTML Umlaute und Sonderzeichen wie zum Beispiel „ö, ä, ü und ß“ in euren Webseiten gewundert. Dieses Problem hat mich in meiner Anfangszeit immer wieder verfolgt. Man kann dies aber in HTML ganz leicht umgehen indem man für diese Umlaute bzw. Sonderzeichen eine andere Schreibweise nimmt. Mit der hier erklärten Schreibweise sehen eure Texte immer gut bzw. fehlerfrei aus, egal ob Ihr UTF8, ANSI oder welche Zeichenkodierung auch immer verwendet. Ich zeige euch nun die wichtigsten Zeichen in diesem Beitrag, alle anderen könnt Ihr auf einer Sonderzeichen Tabelle nachlesen welche ich weiter unten verlinken werde.
 

Übersicht über die wichtigsten HTML Umlaute und Sonderzeichen:

ä = ä
ö = ö
ü = ü
Ä = Ä
Ö = Ö
Ü = Ü
& = &
< = &lt;
> = &gt;
« = &laquo;
» = &raquo;
“ = &quot;
© = &copy;
® = &reg;
™ = &trade;
§ = &sect;
ß = &szlig;
€ = &euro;
£ = &pound;
| = &#124;
• = &bull;

Es gibt natürlich noch, wie schon oben erwähnt, jede Menge andere Sonderzeichen welche zwar nur selten gebraucht werden, über welche man aber dennoch bescheid wissen sollte.
Quelle: HTML Sonderzeichen Tabelle
 
Jetzt habt Ihr keine Probleme mehr durch HTML Umlaute und Sonderzeichen. Damit sollten alle Darstellungfehler in euren Webseiten Vergangenheit sein. Bei Fragen, Anregungen oder konstruktiver Kritik einfach einen Kommentar hinterlassen oder im Forum Posten. Und wie gesagt falls Ihr noch mehr Sonderzeichen braucht seht einfach in der Quelle zu diesem Beitrag nach, dort sind wirklich ausnahmslos alle Sonderzeichen aufgeführt, seien sie auch noch so unwichtig. Ich hoffe ich konnte euch mit diesem Beitrag weiterhelfen.
Check This Out

WordPress Plugin Update: WP-Benutzer-Avatar

Das wirklich gute WordPress Plugin WP-Benutzer-Avatar bekam heute das Update auf die „Version 1.8“. Dieses Plugin ist eine Erweiterung der WordPress Avatar Funktionen. Es erlaubt lokale Avatare einzubinden bzw. hochzuladen und es unterstützt „Gravatar“ Avatare. Man bekommt zur Kontrolle der Funktionen des Plugins eine Einstellungs Seite dazu ins sein WordPress Backend. Es ist wirklich einfach zu benutzen das man dazu eigentlich nichts erklären muss, wenn Ihr wollt könnt Ihr einen Screenshot der Backend Einstellungen des Plugins auf der Plugin Homepage sehen.
 
Plugin Homepage: WordPress User Avatar Plugin Seite
 
Changelog:
Add: Front Page Avatar Uploader
Add: Media Library aller hochgeladenen Avatare.
Bug Fix: Identifizierung der Public Static Functions
Update: Der Quellcode wurde umgestaltet (Einteiling in getrennte Klassen)
Update: Übersetzungen

 
Quelle: WordPress User Avatar Changelog
 
Also ich kann dieses Plugin sehr Empfehlen, es ist sehr leicht zu Installieren und auch die Handhabung ist sehr einfach. Es macht genau das was man von ihm erwartet. Ich benutze „WordPress 3.8.1“ und habe mit der aktuellen „Plugin Version 1.8“ keine Bugs oder Probleme feststellen können.
Bei Fragen oder Anregungen zu diesem Bericht hinterlasst einfach eure Meinungen oder Anregungen unten in Form eines Kommentares oder eröffnet ein Thema dazu hier im Forum.

Rechnen mit CSS oder die „calc()“ Funktion

In CSS kann man zum Beispiel die Breite oder die Höhe eines Objektes auch berechnen lassen. Dies ist sehr nützlich bei variablen Größen der Objekte, oder dem berühmten Problem mit „width:100%“ und einer „margin“ oder „padding“ Angabe. Das „Margin“ bzw. „Padding“ wird ja leider nicht mit in die Breite oder Höhe mit eingerechnet. So sind Objekte mit einer Breite oder Höhe von 100 Prozent und einem Margin oder Padding von 10 Pixel immer 20 Pixel zu Hoch bzw. zu Breit. Diese Probleme kann man durch berechnen der Größen perfekt umgehen. Man verwendet dazu die „calc()“ Funktion. Ich zeige Euch einfach einige Beispiele dazu.
 
Beispiel: die Breite eines Objektes berechnen.
#TestBox {
    /* Es gilt Punkt vor Strich */
    width: calc(100% / 4 - 2 * 5px);
}

Die Breite beträgt hier ein viertel des gesamt zur Verfügung stehenden Raumes minus 10 Pixel. Ihr kennt es ja aus der Schule, euer Mathe Lehrer hat es bestimmt 1000 mal gepredigt. Es gilt auch hier immer „Punkt vor Strich“ genau wie in der Schule.
 
Beispiel: Breite und Höhe eines Objektes berechnen mit einem „Padding“ von 10 Pixel.
#TestBox {
    /* Das Padding muss von der gesamt Breite abgezogen werden */
    padding: 10px;
    width: calc(100% - 2 * 10px);
    height: calc(100% - 2 * 10px);
}

In diesem Fall füllt das Objekt exakt den zur Verfügung stehenden Raum zu 100 Prozent aus weil wir die 20 Pixel Padding von den 100 Prozent abziehen und wir so keine „Übergröße“ des Objektes bekommen.
 
Beispiel: einen Text vertikal zentrieren bei einer Box mit variabler Höhe.
#TestBox:before {
    /* Wir platzieren den Text auch via CSS */
    content: "Dummy Text";
    font-size: 18px;
    left: 0;
    position: absolute;
    text-align: center;
    top: calc(50% - 9px);
    width: 100%;
}

Die Box ist absolut positioniert und füllt von der Breite her gesehen den ganzen ihr zur Verfügung stehenden Raum aus. Sie beginnt ganz links und der Text wird horizontal zentriert ausgegeben. Die vertikale Position des Textes wird durch den „top“ Wert angegeben, und genau diesen lassen wir berechnen (50% der gesamt zur Verfügung stehenden Höhe minus halbe Font Größe). Damit haben wir den Text genau vertikal zentriert, egal welche Höhe die Box bekommt.

WordPress Update Services

Wenn man mit WordPress Beiträge veröffentlicht kann man diverse Update Services darüber informieren. Das ist eine gute Sache und verhilft einem zu mehr Publikum. Diese Update Services kann man unter „Einstellungen/Schreiben“ eintragen. Von WordPress aus ist ein Update Service schon eingetragen. Man kann dort aber wesentlich mehr eintragen als nur diesen einen.
 
Ich zeige euch einfach mal meine Liste:
http://rpc.pingomatic.com/
http://rpc.twingly.com
http://api.feedster.com/ping
http://api.moreover.com/ping
http://www.blogdigger.com/RPC2
http://www.blogshares.com/rpc.php
http://www.blogsnow.com/ping
http://www.blogstreet.com/xrbin/xmlrpc.cgi
http://bulkfeeds.net/rpc
http://www.newsisfree.com/xmlrpctest.php
http://ping.feedburner.com
http://ping.syndic8.com/xmlrpc.php
http://ping.weblogalot.com/rpc.php
http://rpc.blogrolling.com/pinger/
http://rpc.weblogs.com/RPC2
http://www.feedsubmitter.com
http://blo.gs/ping.php
http://www.pingerati.net
http://www.pingmyblog.com
http://geourl.org/ping
http://ipings.com
http://www.weblogalot.com/ping
http://ping.weblogs.se/
http://blogmatcher.com/u.php
http://coreblog.org/ping/
http://www.blogpeople.net/servlet/weblogUpdates
http://trackback.bakeinu.jp/bakeping.php
http://ping.myblog.jp
http://ping.bitacoras.com
http://ping.bloggers.jp/rpc/
http://ping.blogmura.jp/rpc/
http://xmlrpc.blogg.de
http://1470.net/api/ping
http://bblog.com/ping.php
http://blog.goo.ne.jp/XMLRPC
http://api.moreover.com/RPC2
http://api.my.yahoo.com/RPC2
http://xping.pubsub.com/ping/
http://ping.blo.gs/
http://rpc.icerocket.com:10080/
http://rpc.newsgator.com/
http://rpc.technorati.com/rpc/ping
http://topicexchange.com/RPC2
http://www.newsisfree.com/RPCCloud

Es bleibt natürlich jedem selbst überlassen welche und wieviele Services man dort Einträgt. Meine Liste verändert sich auch immer mal wieder. Man muss sich dabei auch auf dem laufenden halten, denn manche Dienste verschwinden, dafür kommen neue hinzu.
 
Quelle: WordPress.org Update Services
 
Ich hoffe ich konnte euch damit helfen, bei Fragen und Anregungen hinterlasst einfach einen Kommentar unten oder eröffnet ein Thema dazu hier im Forum.