Lehrlings Blog

30. Juli 2010 in Browser, Internet, Tutorials von Leo

Normalerweise wird einer Unbekannten SSL Verbindung nicht getraut, weshalb man beim Testen mit phpunit an dieser Stelle scheitert. Um das ganze nun zum laufen zu bringen, benötigen wir ein neues Firefox Profil, mit welchem wir mit Selenium Testen. Standardmässig erstellt Selenium ein Temporäres Firefox Profil, dies klappt jedoch nicht da der Verbindung wie gesagt nicht vertraut wird.

Mit einem neuen Profil kann man nun zuerst Firefox mit diesem Profil starten, die Seite aufrufen und der Verbindung trauen. Diese Einstellung wird dann im Firefox Profil gespeichert.

Und so gehts:
1. Alle Firefox Fenster schliessen.

2. Firefox mit der folgenden Kommandozeile Ausführen (Ausführen: Windows Taste + R):
firefox.exe -ProfileManager -no-remote

3. Ein neues Profil erstellen (und haken setzen bei “Nicht Fragen beim Starten”, ansonsten bleibt Selenium hängen).
4. Jetzt durch das Profil Setup gehen und alles Einrichten. (Das Profil am besten auf C:\Selenium oder so verlagern, kurze Pfade sind empfehlenswert!)
5. Ist das Profil eingerichtet, startet man Firefox ganz normal und geht auf seine mit SSL geschützte Seite. Dort Vertraut man nun der SSL Verbindung. Danach kann Firefox geschlossen werden.

6. In der BATCH-Datei, welche wir zum Starten benötigen nun die Zeilen so bearbeiten:

cd C:\Selenium\selenium-server-1.0.3 (Pfad zu Selenium Server)
#firefox
java -jar selenium-server.jar -firefoxProfileTemplate c:\selenium (Pfad zum Firefox Profil)

Nun startet Selenium Firefox mit dem soeben erstellen Profil, anstatt schnell ein eigenes einzurichten.

Das wars!

4. Juni 2010 in HTML von Leo

Wer sich ein Design bzw. ein Layout für eine Webseite zusammenbasteln will, der hat entweder die Möglichkeit das ganze professionell und schön, also mit divs, oder schnell und einfach, mit Tabellen zu erstellen.
Man kann darüber streiten, jedoch gewinnen für mich eindeutig die divs. Das ganze hat auch seine Gründe, z.B. sind divs viel flexibler und man kann auch mehr damit machen.

Doch warum wählen viele Leute ein Tabellen Layout?
Da ich selbst nie mit Tabellen gearbeitet hatte und ich mit Tabellen ehrlich gesagt nicht so vertraut bin, wollte ich auch nie umsteigen. Jedoch für Leute die weniger Erfahrung in HTML und Co. haben, ist ein Tabellen Layout recht simpel, da man dies theoretisch auch schnell im WYSIWYG-Editor basteln kann.

Der Vorteil von divs?
Mit einem div hat man unzählige Möglichkeiten und nichts ist im Vorhinein definiert. Jedoch braucht man wie gesagt mit dem Umgang von divs etwas mehr Erfahrung, da es mehr Kenntnisse braucht. Mit divs hat man, im Gegensatz zu Tabellen, einen schönen und übersichtlichen Quellcode, welchen man schnell versteht.

Warum keine Tabelle?
Ja, Tabellen sind schnell gemacht und es ist einfach ein schnelles Layout zu erstellen, jedoch bleiben viele Möglichkeiten, welche man mit divs hätte, weg. Aber was auch noch gegen Tabellen spricht, ist der Quellcode. Ein Tabellen Layout kann sehr komplexe Strukturen haben wo man dann kaum mehr durchblickt.

Schlussendlich ist es jedem seine Sache, wer jedoch mehr will, der sollte sich vielleicht mal hinsetzen und die ganze div-Geschichte mal genauer ansehen

14. Mai 2010 in HTML von Leo

Mit JavaScript kann man viele Effekte auf seine Webseite bringen, jedoch bringt auch das eher langweilige HTML ein paar nette Sachen mit, welche einem einiges an JavaScript ersparen können. Und zwar geht es um Image Maps, also ums Mappen von Bildern. Zuerst aber eine kurze Erklärung was Image Maps überhaupt sind.

Mit Image-Maps ist es möglich, Bereiche auf einem einzigen Bild einzuteilen und z.B. eine Verlinkung auf einem bestimmten Punkt auf dem Bild hinzuzufügen. So könnte man theoretisch eine Navigation aus einem Bild erstellen und die einzelnen Links mit einem Image Mapping verlinken – aber dies wäre sehr unflexibel.

Offiziell wird Image-Map folgendermassen beschrieben:

Image maps allow authors to specify regions of an image or object and assign a specific action to each region (e.g., retrieve a document, run a program, etc.) When the region is activated by the user, the action is executed. 

Um so einen Image-Map zu erstellen, wird zuerst natürlich ein Bild benötigt, welches man mappen will.
Das Bild wird dann mit per HTML eingebunden und man gibt dem Bild einen Map:

<img usemap="#map" src="bild.jpg" />

“#map” ist hierbei der Name der Map, welche wir gleich definieren werden. Dieses HTML Attribut wird benötigt damit der Map funktioniert. Für valides HTML wird noch das alt und title-Attribut benötigt.

Der Mapping Part, welcher durch den oben genannten HTML-Tag aufgerufen wird, wird in einem eigenen Teil definiert und sieht so aus:

<map name="map">
    <area shape="rect" coords="11,10,59,29"href="http://www.google.ch" alt="Google CH" title="Google Schweiz" />
    <area shape="circle" coords="3,15,7" href="http://www.google.de" alt="Google DE" title="Google Deutschland" />
    <area shape="poly" coords="15,46,69,50,13,14" href="http://www.google.at" alt="Google AT" title="Google Österreich" />
</map>

Im img-Attribut wird also mit ‘usemap=”#map”‘ auf die Map ‘#map’ zugegriffen, welche wir (siehe Code oben) definieren.
Die Bereiche in denen was passiert (in unserem Beispiel sind es jetzt verlinkungen), werden mit Koordinaten angegeben und erhalten eine Form. Es gibt neben “default” (der restliche, undefinierte Bereich) 3 Formen fürs Mapping – rect (Viereck), circle (Kreis) und poly (Polynom). Diese werden (siehe oben) mit shape=”gewünschte form” angegeben.

Zu den verschiedenen Formen nun noch eine kurze Erklärung, wie das ganze mit den Koordinaten aussieht.

Viereck (shape=”rect”) Koordinaten werden definiert für: x1,y1,x2,y2
x1 = linke obere Ecke, Pixel von links
y1 = linke obere Ecke, Pixel von oben
x2 = rechte untere Ecke, Pixel von links
y2 = rechte untere Ecke, Pixel von oben

Kreis (shape=”circle”) Koordinaten werden definiert für: x,y,r
x = Mittelpunkt, Pixel von links
y = Mittelpunkt, Pixel von oben
r = Radius in Pixel

Polygon (shape=”poly”) Koordinaten werden definiert für: x1,y1,x2,y2 … xn,yn
x = Pixel einer Ecke von links
y = Pixel einer Ecke von oben
Es können so viele Ecken definieren wie gewünscht. Von der letzten definierten Ecke muss man sich einfach eine Linie zur ersten definierten Ecke hinzu denken, welche das Polygon schliesst.

(Quelle: Selfthtml)

1. Mai 2010 in Internet, Tutorials von Leo

Wer sich Gedanken über die Sicherheit in seinem WordPress Blog macht (zurecht!), der sollte folgende Punkte beachten, damit der eigene Blog so sicher wie möglich läuft. Hier also ein paar Anweisungen, Tipps und Tricks etc.

Aktuelle WordPress Version

Der eigene Blog sollte jeweils mit der aktuellsten WordPress Version laufen, da in neueren Versionen wahrscheinlich wieder Sicherheitslücken geschlossen wurden und so mit einer neuen Version die Sicherheit erhöht wird.

Plugins

Achtet bei den Plugins welche ihr installiert, ob es bekannte Probleme oder Sicherheitslücken gibt und erkundigt euch etwas. Häufig schaffen es Hacker dank Sicherheitslücken in Plugins, in euer System einzudringen. Hier gilt auch, jeweils die neuste Version zu verwenden.

Kein “Admin” User

Wenn ihr einen Blog einrichtet oder bereits eingerichtet habt, existiert zu beginn der User “Admin” (Name des Users). Erstellt euch einen zweiten User mit Admin Rechten und löscht den ersten User namens Admin, da er auch ein Sicherheitsrisiko sein kann.

Sichere Passwörter

Verwendet immer absolut sichere Passwörter, nehmt hierzu einen Passwort Generator.

Datenbank Präfix

Der Tabellenpräfix (Table prefix) für WordPress in euere mySQL Datenbank sollte nicht den Standardwert “wp_” haben, am besten erfindet ihr etwas völlig neues.

CHMOD Rechte

Die Verzeichnisse bzw. Dateien müssen zur Sicherheit folgende chmod Rechte besitzen:

Root | 755

wp-includes/ | 755

.htaccess | 644

wp-admin/index.php | 644

wp-admin/js/ | 755

wp-content/themes/ | 755

wp-content/plugins/ | 755

wp-admin/ | 755

wp-content/ | 755

Für absolute Sicherheit verwendet ihr am besten das Plugin WP Security Scan, welches noch weiteres zur Sicherheit beiträgt.

19. März 2010 in Internet von Leo

Um eine Google Sitemap bei Google anzumelden bzw. einzutragen verlangt Google ein Google Konto, mit welchem man die Sitemap dann in den Webmaster Tools eintragen kann. Wer dies jedoch ohne Google Konto machen will, hier die Lösung:

Erstellt im root eures Webservers eine Datei Namens “robots.txt” (normale Textdatei) und schreibt folgende Zeile in die Datei:

Sitemap: http://www.webseite.com/sitemap.xml

Den Pfad zu eurer Sitemap muss natürlich noch angepasst werden. Wo der Code schlussendlich in der robots.txt steht ist egal, er kann also an irgendeiner stelle sein, jedoch muss er auf einer eigenen Zeile sein.

17. Februar 2010 in Internet, Tutorials von Leo

Da auch ich auf Google News eingetragen bin, und das ‘Google News Sitemap’-Plugin installiert habe, musste ich vor kurzem feststellen, dass Google die Sitemap nicht mehr akzeptierte. Nachdem ich lange im Internet geforscht habe, konnte ich die Fehler beheben, mit welchen Google nicht zufrieden war.
Und zwar nimmt das Plugin die Sprache für die Sitemap aus den Einstellungen des RSS-Feeds. Dieser war komischerweise komplett auf englisch gestellt, was natürlich Google nicht wollte, da ich außerdem noch UTF-8 nutzte, anstatt ihr ISO-Format. Als ich dann einen Weg gefunden habe, klappte alles wunderbar, und die Sprache des RSS-Feeds lässt sich jetzt jederzeit gemütlich über das Backend von WordPress ändern. Und so wird es gemacht:

Erstellt eine neue PHP-Datei mit unten stehendem Code, und ladet sie danach in euer Plugins Verzeichnis (“/wp-content/plugins/”).

Nun könnt ihr in WordPress die Sprache des RSS-Feeds ändern. Die Option findet ihr unter “Einstellungen” => “Lesen”, dort dann ganz unten ins Kästchen “de” (ohne “”) eintragen.

Doch kommen wir nun zum hauptsächlichen Problem, dem “Incorrect Namespace”. Dieser Fehler passiert in der Plugin Version 1.4 und älter, da Google das Schema der Sitemaps (mal wieder) geändert hat.
Ich habe den PHP Code des Plugins dem neuen Schema angepasst, sowie noch eine deutsche Anleitung erstellt.
Das Plugin könnt ihr über den unten stehenden Link herunterladen. Dies ist die Version 1.5, welche ich erstellt habe.

Download google-news-sitemap-generator

11. Februar 2010 in Internet, Software, Tutorials von Leo

Um unseren Kunden einen schnelleren und einfacheren Support Garantieren zu können, testeten wir letzte Woche das Ticketing Support System ‘osTicket’. Mit osTicket ist es den Kunden möglich, neue Probleme, Wünsche oder Fragen direkt über das Support System in Form von Tickets einzugeben. Diese werden dann jemandem zugewiesen werden, und werden dann abgearbeitet.

Installation:
Die Installation von osTicket ist eigentlich recht simpel. Natürlich wird eine mySQL Datenbank sowie ein Server benötigt, auf welchem das System installiert werden kann. Nachdem man die entpackten Dateien von osTicket auf den FTP-Server geladen hat kann man das Installations-Skript über den Browser aufrufen: http://www.deinewebseite.com/support/setup/
Mit dem osTicket Installations-Skript, mit welchem man osTicket auf seinem Server installiert, geht alles recht zügig. Im Installations-Skript muss man lediglich die Datenbank sowie den User und die Login-Informationen, welcher auf die Datenbank zugreifen kann, angeben. Eventuell müssen noch die Rechte über einen FTP-Client gesetzt werden, damit osTicket laufen kann.
Danach ist osTicket normal auf dem Server installiert und sollte einwandfrei laufen.
Nach der Installation mussten wir noch eine Deutsche Übersetzung finden, was nicht so einfach war, da zur aktuellen Version von osTicket eigentlich noch keine Deutsche Übersetzung existiert. Also mussten wir eine veränderte Entwickler Version von osTicket installieren, welche das ganze Problem löste.

Mit der Übersetzung die wir verwenden, wurde jedoch nur der Teil, welche die Kunden sehen, übersetzt. Das Admin-Interface blieb in englisch – was ja nicht sonderlich schlimm ist. Jedoch ging es gleich zum nächsten Problem, die E-Mails, welche unsere Kunden erhalten, wenn es zum Beispiel eine Antwort auf eines ihrer Tickets gibt, war auch noch komplett in englisch. Die ganzen Phrasen sind alle in der Datenbank gespeichert, was heisst, dass wir die Datenbank immer wieder neu Importieren müssen. Zurzeit arbeite ich noch an der Übersetzung der E-Mail Templates, um alles noch etwas auszubessern.

5. Februar 2010 in Internet, Software von Leo

Vor kurzem gab mir Markus den Auftrag, ich soll das Open-Source Projekt Management System Todoyu installieren und testen, und sehen ob wir es im Geschäft vielleicht einsetzen können.
Als ich dies getan hatte – nachdem ich zuerst von Fehlermeldungen überhäuft wurde – testete ich das System und wollte sehen, ob es unsere jetzigen im Einsatz befindenden Systeme ersetzen kann.
Ich erstellte Markus einen zusätzlichen Admin Account, mit welchem er mir später auch ein paar Tasks (Aufgaben) zuteilte, und ich so das System im Einsatz testen konnte. Während ich nun auf einer Webseite arbeitete, lief Todoyu im Hintergrund – zumindest dachte ich dies. Jedoch stellte sich nach über einer halben Stunde heraus, dass die ganze Zeiterfassung nach nur wenigen Minuten stoppte.

Etwa eine Woche später (diesen Montag) installierte ich einen neuen Release von Todoyu, welcher einige Fixes enthielt. Zuerst reklamierte Todoyu bei der erneuten Installation jedoch wegen einem Datenbankfehler, also löschte ich die komplette Datenbank, was das Problem danach behebte.
Als alles abgeschlossen war testeten wir die neue Version, merkten zu beginn jedoch kaum wirkliche Unterschiede.

Nach einem Tag fassten wir dann unser Fazit:

Es ist auf jeden Fall eine coole Idee. Ausserdem könnten wir mit Todoyu alle jetzigen Funktionen, für welche wir zurzeit mehrere Systeme benutzen, alles in einem System vereinigen. Jedoch ist das ganze System noch nicht ausgereift, und weist auch einige Bugs auf. Wenn das ganze aber noch stetig weiter gepflegt und entwickelt wird, könnte man Todoyu sicher im professionellen Einsatz nutzen.

Installationsanleitung:

1. Todoyu herunterladen. [Hier]

2. Todoyu entpacken und auf den Server hochladen.

3. Währenddessen am besten eine Datenbank erstellen, auf welcher Todoyu dann läuft.

4. Wenn alles hochgeladen wurde, müssen den Verzeichnissen genügend Rechte gegeben werden (beim Aufruf kommen ansonsten Fehlermeldungen).

5. Nun das Todoyu Verzeichnis im Browser aufrufen.

6. Todoyu beginnt mit der Schritt für Schritt Installation, befolgen Sie diese (zu beginn müssen eventuell noch mehr Rechte vergeben werden).

7. Ist die Installation beendet, so können Sie sich gleich einloggen und loslegen.

Nach der Installation von Todoyu müssen noch einige Sachen angepasst, bzw. richtig eingerichtet werden.

12. Januar 2010 in Internet von Leo

Da ich WordPress gerne und viel nutze, möchte ich hier nun die besten, beziehungsweise meine Lieblings Plugins vorstellen.

All in One SEO Pack
Allen denen wichtig ist, dass ihr Blog ganzen oben mit dabei ist in Google, der hat bestimmt schon mal etwas von SEO, bzw. diesem tollen Plugin für WordPress gehört. Mit diesem SEO Plugin wird alles erledigt, um seinen Blog möglichst Suchmaschinenfreundlich zu gestalten. So wird z.B. der Titel (im Browser) automatisch angepasst, je nach dem welchen Artikel man sich gerade anschaut. Dies ist jedoch noch nicht alles, vieles weiteres ist möglich mit diesem Plugin, um seine SEO zu verbessern.

Zum Plugin

Sexy Boomarks
Dieses Plugin habe ich zwar erst kürzlich entdeckt, aber ich war echt begeistert. Mit diesem Plugin kann man coole Share Buttons an seine Artikel anfügen. Damit können die Besucher den Artikel gleich auf Twitter, Facebook & Co. Posten.

Zum Plugin

Mehr gibt es nach dem Break…

13. November 2009 in Browser, CSS, Tutorials von Leo

Kürzlich hab ich auf einer meiner täglich Internet besuchen etwas ganz tolles entdeckt. Das Stylen von markiertem Text. So war die Hintergrundfarbe des Markierten Textes plötzlich rot – was man ja auch nicht alle Tage sieht. Natürlich wollte ich wissen wie dies denn nun wirklich Funktioniert, und ob ich das auch gleich hier im Blog einbauen kann. Und siehe da, es funktioniert und war extrem einfach!

So wirds per CSS gemacht:

::-moz-selection{
background: #cf9;
color: #222;
}

::selection {
background: #ffffda;
color: #333;
}

Der obere Teil gilt für Firefox, der untere sollte im IE, und in neueren Versionen auch auf Opera funktionieren.

Viel Spass!