im-Tal.net » Internet

Effekte mit der jQuery JavaScript Library

maxe — Wed, 12 Aug 2009 09:45:33 +0000

Mit der jQuery JavaScript Library sind tolle Effekte möglich, wie z. B. Sliding, Fading, Animating etc.
Wir haben uns selber noch nicht viel mit jQuery befasst, wollen aber unsere ersten Versuche hier als Einstiegsanleitung niederschreiben.

Also zu erst muss die Library ins Template eingebunden werden. Entweder man lädt sich die .js Datei hier herunter und bindet sie anschließend so (am besten im Header) ein:

<script src="jquery-1.3.2.min.js" type="text/javascript">script>

oder man bindet z. B. direkt die von jquery.com ein:

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

So, nachdem nun die Library eingebunden ist, können wir mit dem Javascript beginnen. Es läuft immer nach ähnlichem Schema.
Erst sagen wir, wir wollen eine Funktion:
$(document).ready(function()
Dann können wir bei Bedarf bestimmen, welches Element/Objekt bei Klick o. ä. die Änderung vornehmen soll:
$("button").click(function ()
Auf jeden Fall werden dann die Element/Objekte bestimmt, welche ihr Aussehen/Verhalten ändern sollen:
$("p").slideToggle

Als 1. kleines Beispiel lassen wir mit slideToggle alle Texte innernhalb eine p-Tags durch einen Button ein-/ausblenden:

<script type="text/javascript">
  $(document).ready(function(){
 
    $("button").click(function () {
      $("p").slideToggle("slow");
    });
 
  });
script>

Um den Button nun sichtbar zu machen, ist es nötig diesen an die entsprechende Stelle (vorzugsweise direkt über den Text) anzulegen:

Hier steht der Text der nun ein- bzw. ausgeblendet werden kann.

So lässt sich z. B. auch eine Sidebar aus-/einblenden. Statt “p” nimmt man dann z. B. den Div-Container der Sidebar (z. B. “#sidebar”).

Als 2. Beispiel wollen wir zeigen, wie z. B. die Kombination von mehreren Elementen/Objekte mit mehrfacher Veränderung möglich sind:

<script type="text/javascript">
  $(document).ready(function(){
 
    $("button").click(function () {
    $("div.block").add("p.extra").addClass("blau");
     alert("Class in blau geaendert");
    });
 
  });
script>

Alle Div-Container mit der Class “.block” und alle p-Tags mit der Class “.extra” bekommen eine neue Class “.blau” zugefügt und es wird ein Hinweistext ausgegeben. Statt addClass können auch andere Attribute, wie z. B. toggleClass genutzt werden.

Eine weitere Spielerei wäre ein FadeIn-Effekt bei allen Bildern die im Div-Container “#content” sitzen:

<script type="text/javascript">
  $(document).ready(function() {
    $("#content img").css("display","none");
    $("#content img").fadeIn(5000)
});
script>

Weitere Effekte findest du in der jQuery-Documentation: http://docs.jquery.com/Effects

Ein kleiner Hinweis für WordPress-User:

WordPress bringt eine jquery.js im Verzeichnis /wp-includes/js/jquery/jquery.js mit. Falls ihr also damit arbeiten wollt ist eine kleine Abweichung zu beachten. Statt des $-Zeichen muss in WP jQuery benutzt werden:


<script type="text/javascript">
  jQuery(document).ready(function(){
 
    jQuery("button").click(function(){
    jQuery("div.block").add("p.extra").toggleClass("blau");
     alert("Class geaendert");
    });
 
  });
script>

Falls ihr in WordPress nicht mit der WP eigenen jquery.js arbeiten wollt, könnt ihr diese deaktiveren und eine andere einbinden. Könnte sein, dass in eurer header.php, footer.php oder functions.php schon der Aufruf der jquery drin steht:

 
wp_enqueue_script('jquery');
?>

Das dann wie folgt ändern bzw. hinzufügen, falls es noch nicht vorhanden ist:

 
wp_deregister_script( 'jquery' ); //deaktiviert die wp jquery.js 
wp_enqueue_script( 'jquery', 'http://code.jquery.com/jquery-latest.js'); //laedt die neue jquery
?>

AntiVir Startbildschirm deaktivieren

im-Tal.net — Tue, 23 Jun 2009 08:25:50 +0000

Ergänzend zu unserem Artikel “AntiVir Notifier deaktivieren” haben wir auch einen Möglichkeit für AntiVir gefunden den Startbildschirm / Splash Screen zu deaktivieren. Dazu kann folgender Registry-Eintrag vorgenommen werden:

Windows Registry Editor Version 5.00
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Run]
"avgnt"="C:\\Programme\\Avira\\AntiVir PersonalEdition Classic\\avgnt.exe\" /min /ns"

Falls der Parameter /ns nicht funktionieren sollte, kann auch der Parameter /nosplash probiert werden.

Auch hier gilt, bei AntiVir 9 muss nur ein anderer Programmordner angegeben werden: C:\\Programme\\Avira\\AntiVir Desktop\\avgnt.exe

Bei Windows 7 Ultimate 64bit wurde der String wie folgt geändert:

Windows Registry Editor Version 5.00
[HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Windows\CurrentVersion\Run]
"avgnt"="C:\Program Files (x86) (x86)\Avira\AntiVir Desktop\avgnt.exe" /min /ns

Teamviewer

im-Tal.net — Thu, 19 Mar 2009 11:10:11 +0000

Wer oft von Bekannten oder Verwandet um Unterstützung bei PC Problemen gefragt wird, hat sich bestimmt schon mal für den Begriff “Fernwartung” interessiert.

Mit TeamViewer kann man innerhalb weniger Sekunden eine Verbindung zu einem PC oder Server über das Internet aufbauen und diesen Computer fernsteuern, als würden man selbst davor sitzen. Das schöne an Teamviewer ist, dass es standardmäßig Port 80 nutzt und eine Firewall somit nicht speziell konfiguriert werden muss. Es muss lediglich auf beiden Rechnern ausgeführt werden und wird dann über ID und Kennwort abgefragt.

Für private Nutzer ist das Programm kostenlos.

Das Programm kann wahlweise installiert oder als portable Variante genutzt werden: LINK

Unserer Meinung nach ein sehr nützliches Tool, welches man auf jeden Fall testen sollte. Einzige Voraussetzung ist, dass am Problem-PC noch Internet funktioniert.

FeedReader

im-Tal.net — Thu, 05 Mar 2009 15:39:52 +0000

FeedReader ist ein Programm mit dem man auf sehr übersichtliche Weise Newsfeeds, auch RSS- oder Atom-Feeds genannt, abbonieren kann. Es ist in kostenlos, in deutsch verfügbar und soll auch auf einem portablen Medium laufen. Daher ist FeedReader unseren Augen auf jeden Fall einen Test wert.

Eine deutsche Anleitung und den Download findest Du hier: LINK

Update: Nach unserem Test ist die Nutzung auf einem portablen Medium nur eingeschränk möglich, da das Programm trotzdem Spuren auf dem Hauptrechner hinterlässt. Wer hierauf allerdings keine großen Wert legt, dem können wir FeedReader empfehlen.

Externe Links mit CSS3 formatieren

maxe — Mon, 05 Jan 2009 21:32:46 +0000

Lange hatten wir nach einer “einfachen” Lösung gesucht um unsere externen Links sowie Mail-Links etc. speziell mit einer kleinen Grafik zu kennzeichnen.

Bsp:
http://www.example.org
mail{at}example.org

Nun sind wir auf die Attribut-Selektoren in CSS3 gestoßen. Mit dem Attribut-Selektor können verschieden Zeichenketten miteinander verglichen werden. Hier mal 4 Beispiele:

[attribut=wert]: vergleicht den Wert des Attributs auf genaue Übereinstimmung mit der Zeichenkette
[attribut^=wert]: ^ vergleicht den Wert des Attributs mit dem Anfang der Zeichenkette
[attribut$=wert]: $ vergleicht den Wert des Attributs mit dem Ende der Zeichenkette
[attribut~=wert]: ~ vergleicht den Wert des Attributs mit einem durch Leerzeichen getrennten Wort in der Zeichenkette

Wenn wir jetzt also externen Links, Maillinks, ftp-Links, rss-Links, .zip und .pdf Files etc. eine kleine Grafik als (rechten) background mitgeben wollen, nutzen wir nur Beispiel 2 und 3 (vergleichen des Anfangs und des Endes).
Die angegebenen Grafiken sind nur Beispieldateien. Diese müssen natürlich auf die eigenen Icons angepasst werden.

Zuerst formatieren wir also die externen Links http, ftp, wiki, mailto

/*exterer Link*/
a[href^="http:"] { background: url(images/extern.gif) no-repeat right top; padding-right: 13px; }
/*ftp Link*/
a[href^="ftp:"] { background: url(images/ftp.gif) no-repeat right; padding-right: 13px; }
/*wikipedia Link*/
a[href^="http://www.wiki"], a[href^="http://wiki"] { background: url(images/wiki.gif) no-repeat right; padding-right: 13px; }
/*mailto Link*/
a[href^="mailto:"] {background: url(images/mail.gif) no-repeat right; padding-right: 17px;}

Wichtig dabei ist uns, dass die internen von den externen Links unterschieden werden können. Also müssen wir die internen Links “zurück formatieren” (background:none), so dass der User nur bei den “externen Links” die Grafik sieht.

/*interner Link*/
a[href^="http://www.im-tal.net"], a[href^="http://im-tal.net"] { background: none; padding-right: 0; }

Und danach kommen dann die ganzen File-Links dran, als Bsp. haben wir PDF, ZIP und RSS angegeben. Natürlich können sämtliche andere Dateiformate, wie .doc, .xls, .ppt usw. auch überprüft werden.

/*PDF Link*/
a[href$=".pdf"] {background: url(images/pdf.gif) no-repeat right; padding-right: 13px;}
/*ZIP Link*/
a[href$=".zip"] {background: url(images/zip.gif) no-repeat right; padding-right: 13px;}
/*RSS Link*/
a[href$=".rss"], a[href$=".rdf"] {background: url(images/rss.gif) no-repeat right; padding-right: 13px;}

CSS3 ist noch nicht verabschiedet (wird es wohl auch so schnell nicht ), aber die meisten neueren Browser wie FF2+3 und IE7+8 setzen es bereits teilweise/vollständig um.

noindex und nofollow

maxe — Tue, 02 Dec 2008 13:45:37 +0000

noindex heißt auf deutsch nichts anderes als “nehm diese Seite nicht in deinen Suchemaschinen-Index auf”.
nofollow heißt auf deutsch nichts anderes als “Folge den Links auf dieser Seite nicht”.

noindex verhindert also bei den “freundlichen” Suchmaschinen (es ist nur ein Hinweis woran sich aber nicht alle Crawler halten), dass die Seite in ihren Index aufgenommen werden. Als Beispiel könnte man hier die Impressums-Seite oder den Disclaimer nennen.

nofollow ist für die Blogsysteme oder Internetforen eingeführt worden. Spammer kamen früh auf die Idee über die Kommentarfunktion sämtliche Links zu hinterlassen, die die Webcrawler dann natürlich abgegrast haben und als positive Verweise (Linkpopularität) auf die Spamseiten gewertet haben. Das sollte natürlich nicht Sinn und Zweck der Kommentarfunktion sein. Also wurde ca. 2005 das rel=”nofollow”-Attribut erfunden. Das Attribut kann den Weblinks angehängt werden. Bei WordPress u.a. wird dies z.B. automatisch für die Kommentar-Links angefügt.

Example

Für ganze Archive oder Seiten steht das Meta-Tag robots mit den Werten noindex und nofollow zur Verfügung.
Wer also, z. B. in WordPress für die Tages-Archive, die Suche, die 404-Seite, die Authoren-Archive und die Impressums-Seite die Indexierung verhindern aber trotzdem die Weiterverfolgung der Links aktivieren will, kann folgenden Code in die header.php seines Themes schreiben:

 if( is_day() || is_search() || is_404() || is_author() || is_page('impressum') ) { echo "\"robots\" content=\"noindex,follow\" />"; } ?>

grobe Übersetzung:
–> wenn es sich um ein Tages-Archive ODER die Suche ODER die 404-Seite ODER die Authoren-Archive ODER die Impressums-Seite handelt
–> dann setzte den Meta-Tag: name=”robots” content=”noindex,follow” (keine Indexierung aber bitte den Links folgen)

Auch gibt es noch den Wert “noodp”. Mehr dazu: Wikipedia.

Website mit verschiedenen Browsern testen

maxe — Fri, 28 Nov 2008 20:11:40 +0000

Website-Besitzer haben oft nur ein bis zwei aktuelle Browser zur Verfügung um ihre Website zu testen. Wie sieht aber die Website in älteren (z.B. IE 6) oder in anderen nicht so weit verbreiteten Browsern aus? Naja, man könnte jetzt hergehen und sich alle Browser in den verschiedensten Versionen (was oft sowieso nicht geht) installieren …

Es geht aber auch etwas einfacher. Auf der Website http://browsershots.org kann man die Browser-Kompatibilität der Website mit momentan ca. 60 Browsern testen und bekommt sogar von jedem Browser einen Screenshot.

Wer nicht ganz so viel testen will und sich nur auf den IE in den verschiedenen Versionen beschränken will kann sich den IETester von DebugBar installieren. Damit lassen sich lokal die IE Versionen von 5.5 bis 8 testen.

Schluss mit Kommentar-Spam

maxe — Mon, 27 Oct 2008 15:58:14 +0000

Mittlerweile gehört Spam ja schon zum Alltag. Ja ja, was würden wir alle den lieben langen Tag ohne Spam machen

Unser neuester Versuch in Sachen Kommentar-Spam-Bekämpfung geht neben Akismet auch noch einen anderen Weg ohne mathematische Gleichungen lösen zu müssen (MathSpam-Protection hatten wir auch schon getestet) oder irgendwelche unleserlichen Captchas abzutippen. Die Lösung hier im Blog heißt YAWASP (Yet Another WordPress Anti Spam Plugin). YAWASP geht einen neuen Weg. Das Plugin generiert, für Spammer nicht ersichtlich, zufällige Werte pro Feld die erst beim absenden zurück “übersetzt” werden. Der “einfache” Clou dabei: es wird ein zusätzliches, für normale User, unsichtbares Feld generiert welches die dummen Spamrobots hoffentlich ausfüllen und somit in die Falle tappen. Der normale User merkt davon nichts!

Leider schlägt durch das Plugin die Validierung (doppelte id) fehl. Aber kubi, der Author des Plugin, hat das Problem wohl schon auf seiner Optimierungsliste.
UPDATE: mittlerweile ist es möglich die doppelte ID über die Backend-Einstellungen zu deaktivieren. Ist dann valide aber allerdings nicht mehr so sicher. Also: wer die Wahl hat, hat die Qual

UPDATE2: Gerade eben sind wir auf folgenden “Lösungsvorschlag” zum “Spamfrei Bloggen” gestoßen: http://playground.ebiene.de/791/spamfrei-bloggen-unter-wordpress/
Müsste man auch mal ausprobieren … hmm, dass man wirklich mittlerweile soviel Zeit mit Spambekämpfung verbringen muss ?!?!

UPDATE3: Ein weiterer Artikel zum Thema Spam Abwehr: Antispam Bee

Netzwerkfreigaben mit Kaspersky (KIS)

im-Tal.net — Thu, 02 Oct 2008 14:24:50 +0000

Irgendwie hatten wir immer wieder Probleme Netzwerkfreigaben unter XP bzw. unter Vista zum laufen zu bekommen. Als Firewall setzen wir KIS (Kaspersky Internet Security) ein, mittlerweile in der Version 9. Nun scheinen wir aber auf die Rätsels Lösung gestoßen zu sein.

In den Firewall Einstellungen (Programmkontrolle -> Firewall -> Einstellungen) kann man im Register “Netzwerke” den Status der Netzwerkverbindung von “Öffentliches Netzwerk” auf “Vertrauenswürdiges Netzwerk” ändern. Nach dem bestätigen mit mehrmaligem OK kann man sich dann an die (Gast-)Freigaben unter Windows machen.

FileZilla 3 portabel machen

im-Tal.net — Thu, 02 Oct 2008 14:18:25 +0000

Wer FileZilla schon in der Version 2 kennt, weiß dass es in dieser Version eine FileZilla.xml Datei gibt, worin alle Einstellungen gespeichert werden. Somit kann man diese Version auch bequem portabel auf einem USB-Stick mitnehmen.

In der Version 3 werden die Einstellungen aber erst mal nur im Benutzerprofil von Windows gespeichert. Mit einem kleinen Trick kann man die Speicherung der Einstellungen aber wieder im Ordner von FileZilla festlegen. Dazu muss nur eine fzdefaults.xml mit folgendem Inhalt im Ordner von FileZilla erstellt werden:

 version="1.0" encoding="UTF-8" standalone="yes" ?>
>
>
 name="Config Location">Einstellungen/>
>
>

Das war es schon. Alle Einstellungen werden nun im Unterordner “Einstellungen” des FileZilla-Ordner abgespeichert. Dort findest Du insgesamt 6 Dateien.

Jetzt ist auch die Version 3 portabel.

im-Tal.net » Internet

Effekte mit der jQuery JavaScript Library

Ein kleiner Hinweis für WordPress-User:

Verwandte Artikel:

AntiVir Startbildschirm deaktivieren

Verwandte Artikel:

Teamviewer

FeedReader

Externe Links mit CSS3 formatieren

Verwandte Artikel:

noindex und nofollow

Website mit verschiedenen Browsern testen

Verwandte Artikel:

Schluss mit Kommentar-Spam

Verwandte Artikel:

Netzwerkfreigaben mit Kaspersky (KIS)

FileZilla 3 portabel machen

Verwandte Artikel: