PhoneGap und jQuery Mobile

10. Januar 2012 in Android, Coden, Javascript, Tutorials von Leo

In der Schule haben wir im JavaScript Modul den Auftrag erhalten, eine Android App mithilfe von PhoneGap zu programmieren. Ein weiterer Teilpunkt des Auftragspunkt gab es, wenn man das ganze mithilfe von jQuery Mobile umsetzt. Da ich jQuery schon kenne, dachte ich wieso nicht, und setzte mich mit jQuery Mobile auseinander.

Nun eine kleine Anleitung:

  1. Als erstes muss natürlich PhoneGap korrekt installiert werden. Die beste Anleitung findet ihr hier, auf der offiziellen PhoenGap Website.
  2. Das ganze geht von unserem index.html File aus. Dieses wird beim Start der App über PhoneGap aufgerufen. In der Anleitung oben wurde dieses File erstellt, es befindet sich im Verzeichnis /assets/www.
  3. Nun benötigen wir jQuery Mobile, sprich das JS, CSS und die Bilder für die Designs. Dies alles kann hierheruntergeladen werden. Weiter unten auf der Download-Seite findet ihr den Link zu einem Zip (“If you want to host the files yourself you can download a zip of all the files:”), dieses sollte heruntergeladen werden. Es gibt noch weitere möglichkeiten, so kann jQuery auch aus dem Web geladen werden, dann wäre es jedoch nicht lokal auf dem Handy und würde Traffic verursachen, bzw. bei keiner Datenverbindung gar nicht geladen werden. JQuery Mobile lokal zu haben ist also der sicherste weg.
  4. Haben wir jQuery Mobile heruntergeladen entpacken wir es und legen es auch ins www/ Verzeichnis wie unsere index.html-Datei. Das ganze wird nun in den Header inkludiert: 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

    Dies alles kommt natürlich in den Header (<head>) und die Link müssen auch noch angepasst werden (jenachdem wo ihr eure Files hingelegt habt).

  5. Nun wo alles eingebunden ist, können wir mit einer ersten Seite beginnen. Damit das ganze so aussieht wie es aussehen sollte, wird eine spezielle Seiten Anatomie von jQuery Mobile verlangt. Mehr dazu findet ihr hier.
    Wir fügen für eine erste Seite also folgenden Code zwischen die Body-Tags unseres index.html-Files:

    <pre><div data-role="page" id="idDerSeite">
	<div data-role="header">...</div>
	<div data-role="content">...</div>
	<div data-role="footer">...</div>
</div></pre>
  6. Der HTML-Code oben stellt jetzt eine Seite dar. Um mehrere Seiten zu erstellen, kopiert man den obigen Code einfach mehrmals in den Body-Tag der Seite und ändert die ID der Seite. Jeweils die oberste Seite wird als Standardseite genutzt, sprich, als erstes aufgerufen. Um die Seiten zu verlinken kann einfach ein normaler HTML-Link gemacht werden mit dem href=”#idDerSeite”.

0 Kommentare

Weiterlesen

phpMyAdmin auf Debian Server installieren

5. September 2011 in Software, Tutorials von Leo

Hier eine kurze und simple Anleitung um phpMyAdmin auf dem eigenen Debian Server zu installieren. Vorausgesetzt ist das mySQL bereits installiert ist.

1. Verbinden mit dem Server (SSH)
2. apt-get install phpmyadmin ausführen. Nun wird alles installiert. Falls etwas gefragt wird einfach OK / Ja auswählen.
3. Nun folgende 2 Befehle nacheinander ausführen: 

cp /etc/phpmyadmin/apache.conf /etc/apache2/sites-available/phpmyadmin

danach noch 

a2ensite phpmyadmin

4. Server neu starten: /etc/init.d/apache2 restart

Nun ist phpmyadmin über den Browser erreichbar (/phpmyadmin)

0 Kommentare

Weiterlesen

Doxygen: Dokumentation aus Quellcode generieren

9. August 2010 in Java, PHP, Tutorials von Leo

Heute habe ich mir bei der Arbeit das Programm “Doxygen” angeschaut, welches wir nun nach guten Ergebnissen, wahrscheinlich immer nutzen werden. Doch was ist Doxygen?
Doxygen ist ein Programm welches in C++ geschrieben ist und lokal ausgeführt werden kann, um aus Quellcode Dokumentationen zu erstellen. Das Programm scannt die Dateien welche sich in einem ausgewählten Verzeichnis befinden und listet die Funktionen (etc.) auf und liest die Kommentare zu den Funktionen, welche z.B. eine Beschreibung, einen Autor oder andere beinhalten.

Vor allem für grössere Projekte ist dieses Programm meiner Meinung nach sowieso Pflicht, um die Übersicht auf Funktionen zu behalten und auch schnell nachschlagen zu können, vor allem halt auch als nicht beteiligter oder “Neuling” im Projekt.

Doxygen generiert uns also mit dem “Doxywizard” z.B. mehrere HTML-Dateien, welche wir dann gemütlich auf z.B. unseren Web-Server hochladen können.

Doch Doxygen kann nicht nur für PHP Projekte verwendet werden, nein, Doxygen verwendet viele verschiedene Programmiersprachen. Die aktuell Unterstützten Sprachen sind folgende: C++, C, Java, Objective-C, Python, IDL (Corba and Microsoft flavors), Fortran, VHDL, PHP und C#.

Um Doxygen richtig verwenden zu können, muss der eigene Code Kommentiert werden (am besten in englisch). Dies sieht dann z.B. so aus:

/**
* Beschreibung
*
* @author Max Mustermann
* @since Version 1.0
*
* @param string $string1 beschreibung
* @param bool $string2 beschreibung
* @return string beschreibung
*/
function something($string1, $string2) {
  return $stringX
}

All das wird dann von Doxygen gelesen und so ins Resultat, also die Dokumentation eingefügt.

Hier könnt ihr euch Doxygen herunterladen.

Als Beispiel für so eine Dokumentation, hier unsere öffentliche 4eyes API: www.api.4eyes.ch

2 Kommentare

Weiterlesen

Selenium und https (SSL)

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!

0 Kommentare

Weiterlesen

Mit Batch Dateien verschieben und aufräumen

3. Mai 2010 in Tutorials von Leo

Wer häufig unordnung auf seinem (Windows) Computer hat und zu faul ist das ganze Aufzuräumen, dem hilft Batch weiter. Mit einer Batch Datei und wenigen Zeilen Code, wird einem das mühsame Aufräumen nun erheblich leichter gemacht. Einfach die Batch Datei ausführen und schon räumt der Computer für euch auf, bzw. macht halt dass, was ihr in die Batch Datei geschrieben habt.

Obwohl ich kein Batch Profi bin, habe ich mir kürzlich eine kleine Batch Datei geschrieben. Die Datei räumt meinen “Downloads” Ordner (Windows Vista/7) auf, bzw. verschiebt die Dateien und Ordner so wie sie sind in einen neuen Ordner, löscht den Downloads Ordner und erstellt ihn wieder neu.

Mein Code sieht folgendermassen aus:

XCOPY D:\Downloads D:\ablage\temp /E /S
RD D:\Downloads /S /Q
md D:\Downloads

Auf Zeile 1 wird der Inhalt vom Downloads Ordner in meinen gewünschten temp Ordner kopiert. Auf Zeile 2 wird der Ordner “Downloads” gelöscht und auf Zeile 3 wieder neu erstellt.

Wenn ihr den Inhalt lieber verschieben wollt, könnt ihr das mit “move” machen:

MOVE D:\Downloads\*.* D:\ablage\temp\

0 Kommentare

Weiterlesen

Sicherheit in WordPress Blog erhöhen

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.

0 Kommentare

Weiterlesen

Firefox: ICQ Search entfernen

30. April 2010 in Software, Tutorials von Leo

Wer hatte das noch nie: Da installiert man ein Programm, klickt immer schön auf den “Weiter”-Button um fortzufahren und merkt dann beim nächsten Firefox Start, dass neben dem Programm auch noch einige andere Änderungen vorgenommen wurde – ich rede von der wirklich nervigen ICQ Search. Die ICQ Search wird bei der Installation von ICQ (und womöglich auch einer Hand voll anderer Programmen) mit installiert, wenn man nicht genau aufpasst, nämlich ist das entfernen eines Häckchen nötig, wenn man gefragt wird ob man die ICQ Search bzw. ICQ Toolbar mit installieren möchte.

Wer die Toolbar oder Search installiert hat, dem wurde die Standard Google-Suche in Firefox mit der nervigen ICQ Search ersetzt. Um diese wieder zu entfernen und alles wieder auf die Standardwerte zu setzen geht ihr folgendermassen vor:

1. Checkt zu erst in der Systemsteuerung unter Programme (Software) deinstallieren ob eventuell auch gleich noch andere Programme statt nur Plugins oder Änderungen installiert wurden. Entfernt diese falls vorhanden.

2. Öffnet nun Firefox und tippt die die Adresszeile folgenden Text ein und drückt Enter:

about:config

Bestätigt danach das ihr Aufpassen werdet.

3. Sucht nun in der config Übersicht oben im Suchfeld nach keyword.URL. Nun stosst ihr auf einen Wert in welchem anstatt Google etwas mit ICQ steht. Einfach über Rechtsklick auf den Standardwert zurücksetzen.

4. Sucht nun noch nach browser.search.defaultenginename und setzt auch diesen Wert auf den Standardwert zurück. Dieser Wert bezieht sich auf das kleine Suchfeld oben rechts im Browser.

Nun wurde hoffentlich alles entfernt. Startet am besten den Browser neu, falls die Änderungen erst nach einem Neustart in Kraft treten sollten.

0 Kommentare

Weiterlesen

MouseOver Effekt auf div Element mit Javascript

12. April 2010 in Browser, Tutorials von Leo

Kürzlich musste ich für einen Event eines Kunden etwas Javascript schreiben, um ein paar div Elemente (HTML) mit einem MouseOver und MouseOut Effekt versehren, welche dem div Element z.B. eine neue Hintergrundfarbe geben.

Eigentlich kann das ganze in Browsern wie Firefox, Google Chrome und Safari (?) ganz simpel mit einem div:hover gemacht werden, jedoch würde dies im Internet Explorer (mal wieder) nicht funktionieren. Deshalb musste Javascript her, welches das ganze nun in allen Browsern ermöglicht.

Und so wird es gemacht:

1. Zuerst muss Prototype (aktuell 1.6) heruntergeladen und auf seinen Server hochgeladen werden. Ansonsten würde das Javascript nicht funktionieren.

2. Nun erstellt man eine neue Javascript Datei (.js) und ladet diese auch auf seinen Server. Im HTML File müssen die beiden Javascript Files nun noch eingebunden werden:

<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="scripts/dein-effekt.js" type="text/javascript"></script>

Der Pfad und Dateiname muss natürlich noch durch den eigenen ersetzt werden.

3. Zu erst erstellen wir ein HTML Gerüst aus div’s:

<div class="content">
  <div class="team">
     <div class="tools">Anmelden!</div>
  </div>
</div>

Hierbei handelt es sich nun um ein Turnier, bei dem man sich Anmelden kann. Der Link zur Anmeldung erscheint jedoch nur, wenn man mit der Maus über das div “team” fährt.

4. Im Javascript schreiben wir nun folgendes:

var act = 0;

Event.observe(window, 'load', function() { //wenn das Fenster geladen hat

	var team = $('content').select('div.team'); //Hier wir dem JS das div gezeigt

Gleich darunter:

		team.each(function(team){ //hierbei wird das div.team ausgewählt
				Event.observe(team, 'mouseover', function() { //mouseover div.team
						mouseOver(team);
				});
				Event.observe(team, 'mouseout', function() { //mouseout div.team
						mouseOut(team);
				});
	});
});

Danach kommt zuerst einmal die Funktion mouseOver:

function mouseOver(team){
	children = team.childElements(); //die Unterelemente werden gewählt
	tool = children[0]; // das nullte Unterelement (als das gleich darauf folgende
	tool.style.display='block'; //jetzt wird das div (div.tools) angezeigt
	team.addClassName('act');
	//tool.addClassName('act');
}

Und die Funktion mouseOut:

function mouseOut(team){
	children = team.childElements();
	tool = children[0];
	tool.style.display='none';
	team.removeClassName('act');
	tool.removeClassName('act');
}

Im CSS müssen nun noch die Class definiert werden. Die Class .act, für active (aktiv), welche sagt dass das Element aktiv ist, also die Maus gerade auf dem Element ist.
Das Javascript versteckt und zeigt lediglich ein div Element und gibt bzw. nimmt ihm eine neue CSS Class.

Das Javascript sollte wie folgt aussehen:

var act = 0;

Event.observe(window, 'load', function() {

	var team = $('content').select('div.team');

		team.each(function(team){
				Event.observe(team, 'mouseover', function() {
						mouseOver(team);
				});
				Event.observe(team, 'mouseout', function() {
						mouseOut(team);
				});
	});
});

function mouseOver(team){
	children = team.childElements();
	tool = children[0];
	tool.style.display='block';
	team.addClassName('act');
	//tool.addClassName('act');
}

function mouseOut(team){
	children = team.childElements();
	tool = children[0];
	tool.style.display='none';
	team.removeClassName('act');
	tool.removeClassName('act');
}

0 Kommentare

Weiterlesen

TYPO3 – Verschiedene CSS Files je nach treeLevel

5. März 2010 in Tutorials, TYPO3 von Leo

In einem aktuellen Projekt an welche ich gerade arbeite, musste ich je nach dem wo man gerade ist in der Navigation, verschiedene CSS Files einbinden. Das heisst, je nach treeLevel (so nennt man dies in TYPO3), wird ein anderes CSS File eingelesen, falls dies erwünscht ist.

Zu erst einmal, wie wird der treeLevel bestimmt?
Dies ist ganz einfach, man geht von der Hauptseite (root) aus, welcher 0 ist. Danach geht es mit 1, 2, 3 [...] weiter, je nach Untermenü.

1 Kommentare

Weiterlesen

Google News Sitemap Plugin für WordPress

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/”).

/*
Plugin Name: RSS Language
Plugin URI: http://bueltge.de/wp-landingsites-de-plugin/181/
Description: Add options field for rss language
Version: 1.0
Author: Frank Bültge
License: GNU
Author URI: http://bueltge.de/
*/

function rss_language_string() {
?>


language codes.'); ?>
}

function rss_language_admin_init() {
register_setting( 'reading', 'rss_language' );
add_settings_field( 'rss_language', __('RSS Language Code'), 'rss_language_string', 'reading');
}
add_action( 'admin_init', 'rss_language_admin_init' );

?>

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

0 Kommentare

Weiterlesen