Monatsnamen / Wochentagsnamen in deutsch via PHP

“Gibt einen String zurück, der den angegebenen Formatierungs-Merkmalen entspricht. Dabei wird der gegebene Timestamp/ Zeitstempel oder – falls dieser fehlt – die momentane lokale Zeit benutzt. Der Monats- und Wochentagsname wird entsprechend des per setlocale() eingestellten Wertes gesetzt.” – php.net/manual/de/function.strftime.php

 

setlocale(LC_TIME, "de_DE");
echo strftime("%A"); // Wochentagsname
echo strftime("%B"); // Monatsname

Aero Shake deaktivieren

“Als ‘Schütteln’ definiert die Windows 7-Shell eine mindestens dreimalige Bewegung eines aktiven Fensters in annähernd gegengesetzte Richtung – etwa “Rechts – Links – Rechts” oder “Oben – Unten – Oben” in kurzem Zeitabstand” – www.pcwelt.de 

 

… ich habe das schütteln der Fenster (Aero Shake) irgendwie noch nicht ganz verstanden, da ich diese Funktion manchmal unbeabsichtigt ausführe. ;)

 

Download:

 DisableAeroShake.reg

 EnableAeroShake.reg

perror – Explain Error Codes für MySQL in der Shell

for i in `seq 1 180`; do perror ${i}; done | less

Info: http://dev.mysql.com/doc/refman/5.0/en/perror.html

 

Ausgabe:

OS error code   1:  Operation not permitted
OS error code   2:  No such file or directory
OS error code   3:  No such process
OS error code   4:  Interrupted system call
OS error code   5:  Input/output error
OS error code   6:  No such device or address
OS error code   7:  Argument list too long
OS error code   8:  Exec format error
OS error code   9:  Bad file descriptor
OS error code  10:  No child processes
OS error code  11:  Resource temporarily unavailable
OS error code  12:  Cannot allocate memory
OS error code  13:  Permission denied
OS error code  14:  Bad address
OS error code  15:  Block device required
OS error code  16:  Device or resource busy
OS error code  17:  File exists
OS error code  18:  Invalid cross-device link
OS error code  19:  No such device
OS error code  20:  Not a directory
OS error code  21:  Is a directory
OS error code  22:  Invalid argument
OS error code  23:  Too many open files in system
OS error code  24:  Too many open files
OS error code  25:  Inappropriate ioctl for device
OS error code  26:  Text file busy
OS error code  27:  File too large
OS error code  28:  No space left on device
OS error code  29:  Illegal seek
OS error code  30:  Read-only file system
OS error code  31:  Too many links
OS error code  32:  Broken pipe
OS error code  33:  Numerical argument out of domain
OS error code  34:  Numerical result out of range
OS error code  35:  Resource deadlock avoided
OS error code  36:  File name too long
OS error code  37:  No locks available
OS error code  38:  Function not implemented
OS error code  39:  Directory not empty
OS error code  40:  Too many levels of symbolic links
OS error code  42:  No message of desired type
OS error code  43:  Identifier removed
OS error code  44:  Channel number out of range
OS error code  45:  Level 2 not synchronized
OS error code  46:  Level 3 halted
OS error code  47:  Level 3 reset
OS error code  48:  Link number out of range
OS error code  49:  Protocol driver not attached
OS error code  50:  No CSI structure available
OS error code  51:  Level 2 halted
OS error code  52:  Invalid exchange
OS error code  53:  Invalid request descriptor
OS error code  54:  Exchange full
OS error code  55:  No anode
OS error code  56:  Invalid request code
OS error code  57:  Invalid slot
OS error code  59:  Bad font file format
OS error code  60:  Device not a stream
OS error code  61:  No data available
OS error code  62:  Timer expired
OS error code  63:  Out of streams resources
OS error code  64:  Machine is not on the network
OS error code  65:  Package not installed
OS error code  66:  Object is remote
OS error code  67:  Link has been severed
OS error code  68:  Advertise error
OS error code  69:  Srmount error
OS error code  70:  Communication error on send
OS error code  71:  Protocol error
OS error code  72:  Multihop attempted
OS error code  73:  RFS specific error
OS error code  74:  Bad message
OS error code  75:  Value too large for defined data type
OS error code  76:  Name not unique on network
OS error code  77:  File descriptor in bad state
OS error code  78:  Remote address changed
OS error code  79:  Can not access a needed shared library
OS error code  80:  Accessing a corrupted shared library
OS error code  81:  .lib section in a.out corrupted
OS error code  82:  Attempting to link in too many shared libraries
OS error code  83:  Cannot exec a shared library directly
OS error code  84:  Invalid or incomplete multibyte or wide character
OS error code  85:  Interrupted system call should be restarted
OS error code  86:  Streams pipe error
OS error code  87:  Too many users
OS error code  88:  Socket operation on non-socket
OS error code  89:  Destination address required
OS error code  90:  Message too long
OS error code  91:  Protocol wrong type for socket
OS error code  92:  Protocol not available
OS error code  93:  Protocol not supported
OS error code  94:  Socket type not supported
OS error code  95:  Operation not supported
OS error code  96:  Protocol family not supported
OS error code  97:  Address family not supported by protocol
OS error code  98:  Address already in use
OS error code  99:  Cannot assign requested address
OS error code 100:  Network is down
OS error code 101:  Network is unreachable
OS error code 102:  Network dropped connection on reset
OS error code 103:  Software caused connection abort
OS error code 104:  Connection reset by peer
OS error code 105:  No buffer space available
OS error code 106:  Transport endpoint is already connected
OS error code 107:  Transport endpoint is not connected
OS error code 108:  Cannot send after transport endpoint shutdown
OS error code 109:  Too many references: cannot splice
OS error code 110:  Connection timed out
OS error code 111:  Connection refused
OS error code 112:  Host is down
OS error code 113:  No route to host
OS error code 114:  Operation already in progress
OS error code 115:  Operation now in progress
OS error code 116:  Stale NFS file handle
OS error code 117:  Structure needs cleaning
OS error code 118:  Not a XENIX named type file
OS error code 119:  No XENIX semaphores available
OS error code 120:  Is a named type file
MySQL error code 120: Didn't find key on read or update
OS error code 121:  Remote I/O error
MySQL error code 121: Duplicate key on write or update
OS error code 122:  Disk quota exceeded
OS error code 123:  No medium found
MySQL error code 123: Someone has changed the row since it was read (while the table was locked to prevent it)
OS error code 124:  Wrong medium type
MySQL error code 124: Wrong index given to function
OS error code 125:  Operation canceled
MySQL error code 125: Undefined handler error 125
OS error code 126:  Required key not available
MySQL error code 126: Index file is crashed
OS error code 127:  Key has expired
MySQL error code 127: Record file is crashed
OS error code 128:  Key has been revoked
MySQL error code 128: Out of memory in engine
OS error code 129:  Key was rejected by service
MySQL error code 129: Undefined handler error 129
OS error code 130:  Owner died
MySQL error code 130: Incorrect file format
OS error code 131:  State not recoverable
MySQL error code 131: Command not supported by database
MySQL error code 132: Old database file
MySQL error code 133: No record read before update
MySQL error code 134: Record was already deleted (or record file crashed)
MySQL error code 135: No more room in record file
MySQL error code 136: No more room in index file
MySQL error code 137: No more records (read after end of file)
MySQL error code 138: Unsupported extension used for table
MySQL error code 139: Too big row
MySQL error code 140: Wrong create options
MySQL error code 141: Duplicate unique key or constraint on write or update
MySQL error code 142: Unknown character set used in table
MySQL error code 143: Conflicting table definitions in sub-tables of MERGE table
MySQL error code 144: Table is crashed and last repair failed
MySQL error code 145: Table was marked as crashed and should be repaired
MySQL error code 146: Lock timed out; Retry transaction
MySQL error code 147: Lock table is full;  Restart program with a larger locktable
MySQL error code 148: Updates are not allowed under a read only transactions
MySQL error code 149: Lock deadlock; Retry transaction
MySQL error code 150: Foreign key constraint is incorrectly formed
MySQL error code 151: Cannot add a child row
MySQL error code 152: Cannot delete a parent row
MySQL error code 153: No savepoint with that name
MySQL error code 154: Non unique key block size
MySQL error code 155: The table does not exist in engine
MySQL error code 156: The table already existed in storage engine
MySQL error code 157: Could not connect to storage engine
MySQL error code 158: Unexpected null pointer found when using spatial index
MySQL error code 159: The table changed in storage engine
MySQL error code 160: There's no partition in table for the given value
MySQL error code 161: Row-based binlogging of row failed
MySQL error code 162: Index needed in foreign key constraint
MySQL error code 163: Upholding foreign key constraints would lead to a duplicate key error in some other table
MySQL error code 164: Table needs to be upgraded before it can be used
MySQL error code 165: Table is read only
MySQL error code 166: Failed to get next auto increment value
MySQL error code 167: Failed to set row auto increment value
MySQL error code 168: Unknown (generic) error from engine
MySQL error code 169: Record is the same
MySQL error code 170: It is not possible to log this statement
MySQL error code 171: The event was corrupt, leading to illegal data being read
MySQL error code 172: The table is of a new format not supported by this version
MySQL error code 173: The event could not be processed no other hanlder error happened
MySQL error code 174: Got a fatal error during initialzaction of handler
MySQL error code 175: File to short; Expected more data in file
MySQL error code 176: Read page with wrong checksum
MySQL error code 177: Too many active concurrent transactions
MySQL error code 178: Index column length exceeds limit
MySQL error code 179: Index corrupted
MySQL error code 180: Undo record too big

C-Programm – einfacher Taschenrechner

Hier mal wieder ein einfaches Beispiel in C mit “Struktogramm” & “Programmablaufplan” & “Pseudocode” …

 

Pseudocode:

begin
    Eine 'einfache' Rechenaufgabe (z.B. 5+5) eingeben.
    Aufteilung der Eingabe in (drei) Variablen [ein1, ein2, ein3]
    case ein2 is
        +: Addition: "ein1" & "ein3"
        -: Subtraktion: "ein1" & "ein3"
        *: Multiplikation: "ein1" & "ein3"
        /: Division: "ein1" & "ein3"
        %: Modulo: "ein1" & "ein3"
        otherwise: Ausgabe: "Fehler in der Berechnung"
    end case
    Ausgabe: Ergebnis
end

 

Programmiersprache C:

#include <stdio.h> 
#define MAXLENGTHSTR 255

int main(void)
{
  /* Deklaration der Variablen */
  int ein1, ein3, aus;
  char ein2;
  char s1[MAXLENGTHSTR];

  printf("z.B.: \"1 + 2\" oder \"5 + 5\" eingeben!!!"); 
  /* Usereingabe */
  printf("Eingabe: ");
  /* flushall(); gets(s1); */
  gets(s1);

  /* Interne Verarbeitung des Input */
  sscanf(s1, "%d %c %d", &ein1, &ein2, &ein3);
  aus = 0;

  /* Berechnung */
  switch(ein2)
  {
    case '+': aus = ein1 + ein3; break; /* Addition */
    case '-': aus = ein1 - ein3; break; /* Subtraktion */
    case '*': aus = ein1 * ein3; break; /* Multiplikation */
    case '/': aus = ein1 / ein3; break; /* Division */
    case '%': aus = ein1 % ein3; break; /* Modulo */
    default: printf("   Input error!\n"); break;
  }
 
  /* Ausgabe */
  printf("Ergebnis: %d\n", aus);

  /* Ende */
  return 0;
}

Optimierte Gallery3D-App für Android (Froyo)

Ich habe für mein altes Samsung Spica (Android 2.2.2) eine optimierte Gallery3D App kompiliert und ggf. läuft die App auch auf anderen Geräten, daher würde ich mich über euer Feedback freuen…

 

Gallery3D
Gallery3D

 

Download: Gallery3D

 

Changelog:

* Gingerbread-Sources (Android 2.3)

* deaktiviertes Dithering 

* deaktivierter dynamischer Hintergrund

* Fixes / Updates

 

Sources: https://github.com/voku/android_packages_apps_Gallery3D/

 

Video: http://www.youtube.com/watch?v=zv61r9JtyUI

Crashkurs: jQuery-Selektoren

Was ist jQuery?

Es ist eine Vereinfachung von JavaScript durch ein sogenanntes Framework, welches uns lästige Routinearbeit beim Programmieren abnimmt und einen einfachen Zugang zu schwer nutzbaren JavaScript-Methoden bietet.

 

JavaScript mit & ohne jQuery!

Für den Einstieg in das Thema möchte ich ein Beispiel mit JavaScript und den selben Effekt via jQuery zeigen.

JavaScript: (JavaScript_test1.html)

<html>
<head>
<title>JavaScript</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script tyle="text/javascript">
window.onload = function() {
	var elements = document.getElementById("box").getElementsByTagName("p");
	for (var i = 0; i < elements.length; i++) {
		if (elements[i].firstChild.data == "Zweiter Absatz") {
			elements[i].className = "green";
		}
	}
}
</script>
</head>
<body>
<div id="box">
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>
</html>
Mit ein wenig Programmiererfahrung kann man den Quelltext direkt lesen und wer dieses Beispiel nicht versteht, sollte sich auf der folgenden Webseite umschauen > de.selfhtml.org/javascript/

 

jQuery: (jQuery_test1.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p:contains('Zweiter Absatz')").css({ 'color' : '#009933' });
});
</script>
</head>
<body>
<div id="box">
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

Wie man an diesem Beispiel erkennen kann, sind die “Selektoren” ein sehr wichtiger / umfangreicher Teil von jQuery.

 

jQuery-Selektoren

Als nächstes möchte ich einige jQuery-Selektoren und Methoden zum Auswählen von HTML-Elementen zeigen. Doch zuerst sollten wir die selben Werkzeuge zum ausführen & debuggen von JavaScript (jQuery) nutzen. Da JavaScript direkt im Browser kompiliert wird, könnten wir die Code-Zeilen auch direkt im Browser ausführen: Firefox + Firebug oder z.B. hier html5snippet.net

Firebug zum debuggen
Firebug zum debuggen
JavaScript via Firebug ausführen
JavaScript via Firebug ausführen

 

Selektiert alle HTML-Elemente von einem bestimmten Typ. -> z.B.: $(“p”)

(jQuery_selektoren1.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

 

Selektiert HTML-Elemente mit einer bestimmten ID. -> z.B.: $(“#box”)

(jQuery_selektoren2.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("#box").addClass("green");
});
</script>
</head>
<body>
<div id="box">
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

PS: ID’s müssen auf einer HTML-Seite einmalig sein!

 

Selektiert HTML-Elemente mit einer bestimmten CSS-Klasse. -> z.B.: $(“.box”)

(jQuery_selektoren3.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div div .box").addClass("green");
});
</script>
</head>
<body>
<div class="box">
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
<div>
	<div>
		<div class="box">
			<p>Erster Absatz</p>
			<p>Zweiter Absatz</p>
			<p>Dritter Absatz</p>
		</div>
	</div>
</div>
</body>
</html>

Hier wurde die Auswahl noch einmal via HTML-Tags (div) eingeschränkt.

 

Selektiert HTML-Elemente und die Auswahl weiterer Selektoren. -> z.B.: $(“div + .box”)

(jQuery_selektoren4.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div + .box").addClass("green");
});
</script>
</head>
<body>
<div class="box">
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
<div>
	<div>
		<div class="box">
			<p>Erster Absatz</p>
			<p>Zweiter Absatz</p>
			<p>Dritter Absatz</p>
		</div>
	</div>
</div>
<div class="box">
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

 

Selektiert alle HTML-Elemente X, die Kindknoten eines Elements Y sind. -> $(“X > Y”) -> z.B: $(“div > p”)

(jQuery_selektoren5.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div > p").addClass("green");
});
</script>
</head>
<body>
<div>
	<span>
		<p>Erster Absatz</p>
		<p>Zweiter Absatz</p>
		<p>Dritter Absatz</p>
	</span>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

 

Selektiert alle folgenden Geschwisterknoten eines Elements X, die den Typ Y besitzen. -> $(“X ~ Y”) -> z.B: $(“#start ~ p”)

(jQuery_selektoren6.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("#start ~ p").addClass("green");
});
</script>
</head>
<body>
<div>
	<p id="start">Erster Absatz</p>
	<p>Zweiter Absatz<p>
	<div>
		<p>Dritter Absatz<p>
	</div>
	<p>Vierter Absatz</p>
</div>
</body>
</html>

 

Selektiert die Kombination aus allen durch die Selektoren gewählten Knoten. -> z.B: $(“#p1, #p2, #p3”)

(jQuery_selektoren7.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("#p1, #p2, #p3").addClass("green");
});
</script>
</head>
<body>
<div id="box">
	<p id="p1">Erster Absatz</p>
	<p id="p2">Zweiter Absatz</p>
	<p id="p3">Dritter Absatz</p>
</div>
</body>
</html>

 

Selektiert bestimmte HTML-Kind-Tags. -> z.B: $(“#box”).find(“p”)

(jQuery_selektoren8.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("#box").find("p").addClass("green");
});
</script>
</head>
<body>
<div id="box">
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

 

(jQuery_selektoren9.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("#box").find("*").addClass("green");
});
</script>
</head>
<body>
<div id="box">
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

 

Selektiert über Attribute. -> z.B: $(“div[id]”)

(jQuery_selektoren10.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div[id]").addClass("green");
});
</script>
</head>
<body>
<div id="box">
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

 

Selektiert über Attribute und dessen Werte. -> z.B: $(“div[id=’box’]”)

(jQuery_selektoren11.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div[id='box']").addClass("green");
});
</script>
</head>
<body>
<div id="box1">
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div id="box">
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

 

Selektiert über HTML-Tags und dessen Anordnung in der HTML-Struktur. -> z.B: $(“div:first”)

(jQuery_selektoren12.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div:first").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

 

(jQuery_selektoren13.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div:last").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

 

Selektiert alle Elemente mit geradem Index innerhalb der aktuellen Auswahl. (0 ist even) -> z.B: $(“div p:even”)

(jQuery_selektoren14.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p:even").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
</body>
</html>

 

Selektiert alle Elemente mit ungeradem Index innerhalb der aktuellen Auswahl. (1 ist odd) -> z.B: $(“div p:odd”)

(jQuery_selektoren15.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p:odd").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
</body>
</html>

 

Selektiert alle Elemente die nicht zutreffen. -> z.B: $(“div:not(:last)”)

(jQuery_selektoren16.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div:not(:last)").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

 

Selektiert Elemente, die innerhalb der aktuellen Auswahl einen bestimmten Index haben. -> z.B: $(“div p:eq(1)”)

(jQuery_selektoren17.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p:eq(1)").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

 

Selektiert alle Elemente, die innerhalb der aktuellen Auswahl einen bestimmten größeren Index haben. -> z.B: $(“div p:gt(1)”)

(jQuery_selektoren18.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p:gt(1)").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

 

Selektiert alle Elemente, die innerhalb der aktuellen Auswahl einen bestimmten kleineren Index haben. -> z.B: $(“div p:lt(1)”)

(jQuery_selektoren19.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p:lt(1)").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

 

Selektiert alle Elemente, die sich innerhalb der aktuellen Auswahl “bewegen”. -> z.B: $(“div p:animated”)

(jQuery_selektoren20.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	function run() {
		$("#test").slideToggle("slow",run);
	}
	run();

	$("div p:animated").addClass("green");
});
</script>
</head>
<body>
<div>
	<p id="test">Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

 

Selektiert alle Elemente, die mindestens ein Element enthalten, auf die der Selektor zutrifft. -> z.B: $(“div:has(‘span’)”)

(jQuery_selektoren21.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div:has('span')").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

 

Selektiert alle Elemente, die Elternelement eines anderen Knotens sind. (also sowohl von Element- als auch Textknoten) -> z.B: $(“p:parent”)

(jQuery_selektoren22.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p:parent").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<p></p>
	<p>Zweiter Absatz</p>
</div>
</body>

 

Selektiert alle Elemente, die über ein bestimmtes Attribut verfügen. -> z.B: $(“[name]”)

(jQuery_selektoren23.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("[name]").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Erster_Absatz">Erster Absatz</p>
	<span name="Zweiter_Absatz">Zweiter Absatz</span>
	<p name="Dritter_Absatz">Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

 

Selektiert alle Elemente, die über ein bestimmtes Attribut mit einem bestimmten Wert verfügen. -> z.B: $(“span[name=’Zweiter_Absatz’]”)

(jQuery_selektoren24.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("span[name='Zweiter_Absatz']").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Erster_Absatz">Erster Absatz</p>
	<span name="Zweiter_Absatz">Zweiter Absatz</span>
	<p name="Dritter_Absatz">Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

 

Selektiert ein Element, wenn das Attribut einen bestimmten Wert, oder den bestimmten Wert mit einem “Bindestrich” abgetrennten String folgt -> z.B: $(“p[name|=’Absatz’]”)

(jQuery_selektoren25.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p[name|='Absatz']").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Absatz-Erster">Erster Absatz</p>
	<p name="AbsatzZweiter">Zweiter Absatz</p>
	<p name="Absatz_Dritter">Dritter Absatz</p>
	<p name="Absatz-Vierter">Vierter Absatz</p>
</div>
</body>

 

Selektiert ein Element, wenn der Wert des benannten Attributs den übergebenen String als Substring enthält. -> z.B: $(“p[name*=’Absatz’]”)

(jQuery_selektoren26.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p[name*='Absatz']").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Absatz-Erster">Erster Absatz</p>
	<p name="AbsatzZweiter">Zweiter Absatz</p>
	<p name="Absatz_Dritter">Dritter Absatz</p>
	<p name="Absatz-Vierter">Vierter Absatz</p>
</div>
</body>

 

Selektiert ein Element, wenn der Wert des benannten Attributs durch Leerzeichen abgetrennten Teilwert des benannten Attributes oder dem vollständigen Wert entspricht. -> z.B: $(“p[name~=’Absatz’]”)

(jQuery_selektoren27.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p[name~='Absatz']").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Absatz Erster">Erster Absatz</p>
	<p name="AbsatzZweiter">Zweiter Absatz</p>
	<p name="Absatz_Dritter">Dritter Absatz</p>
	<p name="Absatz Vierter">Vierter Absatz</p>
</div>
</body>

 

Selektiert alle Elemente, die nicht einem bestimmten Attribut entsprechen. -> z.B: $(“p[name!=’Absatz’]”)

(jQuery_selektoren28.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p[name!='Absatz']").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Absatz">Erster Absatz</p>
	<p name="AbsatzZweiter">Zweiter Absatz</p>
	<p name="Absatz_Dritter">Dritter Absatz</p>
	<p name="Absatz Vierter">Vierter Absatz</p>
</div>
</body>

 

Selektiert alle Elemente, die mit einem bestimmten Attribut beginnen. -> z.B: $(“p[name^=’Absatz’]”)

(jQuery_selektoren29.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p[name^='Absatz']").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Erster_Absatz">Erster Absatz</p>
	<p name="AbsatzZweiter">Zweiter Absatz</p>
	<p name="Absatz_Dritter">Dritter Absatz</p>
	<p name="VierterAbsatz">Vierter Absatz</p>
</div>
</body>

 

Selektiert alle Knoten, die der erste (letzte) Kindknoten ihres Elternelements sind. -> z.B: $(“p[name^=’Absatz’]”)

(jQuery_selektoren30.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p:first-child, p:last-child").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

 

Erzeugt ein neues jQuery-Objekt aus dem unmittelbar folgendem Geschwisterknoten der Elemente der aktuellen Auswahl. -> z.B: $(“p”).next(‘span’)

(jQuery_selektoren31.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p").next('span').addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

 

(jQuery_selektoren34.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("span").next().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

 

Holt die Kindelemente jedes Elements der Auswahl. -> z.B: $(“div”).children()

(jQuery_selektoren32.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div").children().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

 

Erzeugt eine neue Auswahl aus den Elternknoten jedes Elements der aktuellen Auswahl. -> z.B: $(“span”).parent()

(jQuery_selektoren33.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("span").parent().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

 

Erzeugt ein neues jQuery-Objekt aus den unmittelbar vorherigen Geschwisterknoten des Elemente der aktuellen Auswahl. -> z.B: $(“span”).prev()

(jQuery_selektoren35.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("span").prev().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

 

Erzeugt ein neues jQuery-Objekt aus allen folgenden Geschwisterknoten der Elemente der aktuellen Auswahl. -> z.B: $(“p”).nextAll()

(jQuery_selektoren36.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p").nextAll().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

 

Erzeugt ein neues jQuery-Objekt aus allen vorherigen Geschwisterknoten der Elemente der aktuellen Auswahl. -> z.B: $(“p”).prevAll()

(jQuery_selektoren37.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p").prevAll().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

 

Bildet eine Auswahl aus allen Geschwisterknoten der Elemente der aktuellen Auswahl. -> z.B: $(“span”).siblings()

(jQuery_selektoren38.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("span").siblings().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
</body>

 

(jQuery_selektoren39.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("span").siblings().add("span").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
</body>

 

Bildet auf der Decendant-Achse der Elemente der aktuellen Auswahl eine neue Auswahl aus Elementen, die dem angegebenen Selektor entsprechen. -> z.B: $(“div p”).filter(‘:contains(Erster Absatz)’)

(jQuery_selektoren40.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p").filter(':contains(Erster Absatz)').addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
</body>

 

Bildet auf der Decendant-Achse der Elemente der aktuellen Auswahl eine neue Auswahl aus Elementen, die dem angegebenen Selektor nicht entsprechen. -> z.B: $(“div p”).not(‘:contains(Erster Absatz)’)

(jQuery_selektoren41.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p").not(':contains(Erster Absatz)').addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
</body>

 

(jQuery_selektoren42.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	var auswahl = $("div p");

	auswahl.clone().appendTo('#test');
	auswahl.not(':contains(Erster Absatz)').addClass("green").end().css({ 'color' : 'red', 'background-color' : 'black' }).last().css({ 'color' : 'yellow'});
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
<br>
<div id="test"></div>
</body>

 

jQuery-Beispiel

Zum Schluss möchte ich noch ein einfaches Beispiel mit Selektoren zeigen …

(jQuery-Selektoren_test.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>jQuery-Selektoren | Beispiel</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<h1>TEST: JPEG + PNG</h1>

<div class="pic_all" style="float: left; overflow: hidden; width: 85px; height: 54px; margin: 0 3px 3px 0; text-align: center; border: 1px solid #ffffff;">
	<img src="SUCKUP_PNG.png" alt="PNG: Original > 10 KB" height="54">
</div>
<div class="pic_all" style="float: left; overflow: hidden; width: 85px; height: 54px; margin: 0 3px 3px 0; text-align: center; border: 1px solid #ffffff;">
	<img src="SUCKUP_PNG_punypng.png" alt="PNG: Optimized > 9 KB" height="54">
</div>
<div class="pic_all" style="float: left; overflow: hidden; width: 85px; height: 54px; margin: 0 3px 3px 0; text-align: center; border: 1px solid #ffffff;">
	<img src="SUCKUP_JPEG_100.jpg" alt="JPEG: 100% Qualität > 27 KB" height="54">
</div>
<div class="pic_all" style="float: left; overflow: hidden; width: 85px; height: 54px; margin: 0 3px 3px 0; text-align: center; border: 1px solid #ffffff;">
	<img src="SUCKUP_JPEG_80.jpg" alt="JPEG: 80% Qualität > 9 KB" height="54">
</div>
<div class="pic_all" style="float: left; overflow: hidden; width: 85px; height: 54px; margin: 0 3px 3px 0; text-align: center; border: 1px solid #ffffff;">
	<img src="SUCKUP_JPEG_60.jpg" alt="JPEG: (60% Qualität > 7 KB" height="54">
</div>

<br clear:both><div style="float:left">
	<img style="margin-top: 50px; margin-left: -450px;" id="refMain" src=""><br>
	<div style="width: 420px; margin-left: -450px;" id="imageText"></div>
</div>

<script type="text/javascript">
$('div.pic_all').css({ 'border-color' : '#ffffff', '-moz-opacity' :'0.4' });
$(document).ready(function() {
	$('div.pic_all').each(function() {
		$(this).mouseenter(function() {
			$(this).css('border-color', '#EE398C').css('-moz-opacity', '1');
			$('div.pic_all').css({ 'border-color' : '#ffffff', '-moz-opacity' :'0.4' });
			$(this).css('border-color', '#EE398C').css('-moz-opacity', '1');
			var src_new = $(this).find('img').attr('src');
 			$('#refMain').attr('src', src_new);
 			var text_new = $(this).find('img').attr('alt');
 			$('#imageText').html(text_new);
		});
		$(this).mouseleave(function() {
			$(this).css('border-color', '#ffffff').css('-moz-opacity', '0.4');
			if ($(this).find('img').attr('src') == $('#refMain').attr('src')) {
				$(this).css('border-color', '#EE398C').css('-moz-opacity', '1');
			}
		});
 	});
});
</script>

</body>
</html>

Die Grundlagen der Suchmaschinen-Optimierung

Vorwort:

Ich möchte hier eine kurze Einführung in das Thema “Suchmaschinen-Optimierung” (SEO) geben. Das Thema ist in den letzten Jahren immer Umfangreicher geworden, da es immer mehr Webseiten mit ähnlichen Themen gibt, welche miteinander um die ersten Plätze bei Google und Co. konkurrieren.

Warum man sich mit dem Thema beschäftigen sollte wird erst richtig klar, wenn man sich folgende Zahlen anschaut -> 85% der Internetnutzer rufen nach dem Start des Browsers mittels einer Suchmaschine Inhalte auf, dabei hat Google 90-95% Marktanteil in Deutschland, so dass wir uns darauf konzentrieren sollten. Nach welchem Muster (Algorithmus) Google die Webseiten bewertet ist jedoch nicht 100% bekannt, aber es soll von über 200 Faktoren abhängen, dabei unterscheidet man grob in zwei Kategorien “Onpage”- & “Offpage”-Faktoren. 

Onpage-Faktoren: (auf der jeweiligen Webseite)

 

 

1.) Content is King

An erster Stelle sollte man sich in die “Zielgruppe” hineinversetzen, um möglichst einzigartigen Inhalte (Content) anzubieten welcher für den User einen Mehrwert bietet. Dieser Inhalt wird dann auch von anderen verlinkt und somit weiterempfohlen und von Google besser bewertet. 

Da Google & Co. reine textbasierte Suchmaschinen sind, ist Content aus der Sicht von Google ausschließlich Text, jedoch sollte man für den User einen angemessenen Ausgleich zwischen Text & Bilder finden. Zudem sollte man frames & Iframes vermeiden und die Keyword-Häufigkeit im Text beachten, es damit aber auch nicht übertreiben, da die Bedeutung der Begriffe bei steigender Anzahl abnimmt. (3-8% Keywords gemessen am Gesamttext) 

 

2.) Seitentitel

Der Titel-Tag sollte das Thema gut beschreiben und min. ein relevantes Keyword enthalten. Gegebenenfalls hilft es auch, wenn man manchmal einen etwas reißerischen Titel verwendet. ;) Optimale Länge sind 40 bis 100 Zeichen (~ 4 bis 10 Wörter). 

 

<title>Der Seitentitel</title>

 

3.) Keywords

Die Auswahl, Platzierung und Häufigkeit der “Stichworte” ist auch von Bedeutung, da die Suchmaschinen die Relevanz der jeweiligen Themen so besser beurteilen kann. Dabei nutzt man meistens eine Mischung verschiedener Strategien, welche ich hier mit einem kleinen Beispiel verdeutlichen möchte:

Shorttail: “MP3-Player”

Midtail: “MP3-Player Testsieger”

Longtail: “Archos Vision MP3-Player mit TFT-Display “

Schreibweise: “MP3-Plyer Testsiger” (Info: Google korrigiert die Eingaben bei der Suche, daher funktioniert diese Methode nicht mehr so wie früher) 

Keystroke (Google-Instant): “MP” anstatt “MP3-Player”

 

Folgende Webseiten können dabei helfen entsprechende Keywords zu finden, dabei sollte man jedoch nicht vergessen, dass man ggf. Leute hinzuziehen sollte, welche sich mit dem Thema auskennen 

– KeywordToolExternal

– Google-Instant

– Assoziationsanalys

 

<meta name="keywords" content="Suchbegriffe, mit Komma, getrennt">

 

4.) (Meta-)Tags

Es gibt eine ganze Reihe von Meta-Tags, jedoch werden nicht alle von den Suchmaschinen berücksichtigt. Daher folgt eine Liste der wichtigsten Meta-Tags:

(Verwendet man XHTML statt HTML, muss ein abschließender Slash “/” am Ende der Tags hinzufüg werden, um gültigen Quellcode anzubieten. )

 

<meta name="description" content="Seiten-Beschreibung">

 

Auch die “Beschreibung” sollte einige relevante Suchbegriffe (Keywords) enthalten und zum ein gewissen Interesse wecken. 1 bis 3 Sätze in 140-160 Zeichen.

Google indexiert zwar dieses Meta-Tag, zeigt es aber nur an, wenn die Seite entweder keinen text enthält oder von besonderer Relevanz ist. Ansonsten werden kurze Textauszug aus einer Webseite,  sogenannte “Snippets” oder Daten aus dem “Open Directory” verwendet.

 

<meta name="robots" content="all">

 

Dieser Tag dient neben der robots.txt zur Steuerung von Suchmaschinen-Crawlern. Ein Beispiel-Code ist: http://www.google.com/support/webmasters/

content

Beschreibung

index /noindex die Seite soll indexiert / nicht indexiert werden
follow /nofollow Links sollen weiterverfolgt / nicht weiterverfolgt werden
noarchive die Seite soll nicht gespeichert (google-cache) werden
nosnippet verhindert, dass ein Ausschnitt in den Suchergebnissen angezeigt wird
noodp

für die Seite soll nicht die Beschreibung von “Open Directory” verwendet werden

PS: wenn gewünscht kann man die Einstellungen (wie auch in der robots.txt) für bestimmte Suchmaschinen bestimmen: z.B.: <meta name=”googlebot” content=”noarchive”>

Als Beispiel kannst du dir einfach mal die robot.txt von dieser & anderen Webseiten anschauen z.B.: http://suckup.de/robots.txt

 

<link rel="alternate" type="application/rss+xml" title="RSS-Feed - suckup.de" href="/feed">

 

Sollte ein RSS-Feed vorhanden sein (aus einem Blog- oder CMS-System) kann und sollte dieser per Meta-Tag & auf der Webseite angegeben werden.

 

<link rel="canonical" href="http://example.org">

 

“Oft kommt es vor, dass mehrere URIs auf den gleichen Inhalt verweisen. Beispiele sind dynamisch generierter Inhalt, wie in Foren oder anderen CM-Systemen, bei denen die gleichen Einträge unter verschiedenen Adressen abrufbar sind, Druckansichten von Webseiten oder auch lokale Kopien von Dateien, wie beispielsweise Lizenzen. In diesen Fällen kann mit dem Canonical Link der Haupt-URI angegeben werden, unter dem der Inhalt erreichbar ist. Verlinkende Webseiten, insbesondere Suchmaschinen mit ihren Linkdatenbanken, können so das Orignaldokument zu einer Seite finden und darauf in den Suchergebnissen verweisen.” – http://de.wikipedia.org/wiki/Canonical_Link

 

Aber Google verarbeitet nicht nur Meta-Tags, auch Standard-HTML-Tags helfen der Suchmaschine zu verstehen welche Wörter von Bedeutung sind und welche nicht, dazu kann man z.B. den Text in verschiedenen Bereiche mit eigenen Überschriften aufteilen (h1, h2, h3 …), sortierte & unsortierte Liesten (ul, ol) erstellen, bestimmte Begriffe hervorheben (strong) und vieles mehr. Alle diese HTML-Tags sollten jedoch auch korrekt eingesetzt werden: z.B.:

Falsch ->

<div class="ueberschrift-h1>Test</div>
<h1 class="ueberschrift-h1>Test</h1>

Richtig ->

<style type="text/css">
h1 { color:red; font-size:48px; }
</style>
[...]
<h1>Test</h1>

 

5.) (Google) Sitemap

“Mithilfe von XML-Sitemaps kann Google Seiten auf Ihrer Website finden, die anderenfalls unter Umständen übersehen werden. Einfach gesagt ist eine XML-Sitemap eine Liste der Seiten Ihrer Website.” – http://www.google.com/support/webmasters/bin/answer.py?hl=de&answer=156184

z.B.: suckup.de/sitemap.xml

 

6.) Bilder

Die Dateigröße sollte als erstes nicht zu groß sein!! Zudem sollten Bilder an der richtigen Stelle im Text untergebracht werden, so dass die Suchmaschine und auch der Leser den Zusammenhang zwischen Bild & Text leichter herstellen kann. 

Keyword-basierte Dateinamen: Am besten beschreibt der Dateiname selbst bereits das Bild (z.B. Ubuntu_Logo_klein.png, Android_Froyo.png …) 

Alt- und Title-Tags verwenden: “Das Attribut alt ist Pflichtangabe für jede Grafikeinbindung. Geben Sie darin einen Alternativtext an für den Fall, dass die Grafik nicht angezeigt werden kann. Das sollte bei rein illustrierenden Schmuckgrafiken in der Form alt=”” geschehen, um die Grafik als inhaltslos zu kennzeichnen. Vermeiden Sie es in solchen Fällen, die alt-Attribute von Grafiken mit unsinnigen Inhalten wie “spacer.gif” o.ä. zu befüllen.” – http://de.selfhtml.org/html/grafiken/einbinden.htm 

Die beiden Tags können auch unterschiedliche Inhalte haben sollten jedoch das Bild / Produkt näher beschreiben (z.B.: <img width=”150″ height=”150″ src=”Windows8_Bluescreen.jpg” title=”Bluescreen von Windows 8″ alt=”Bluescreen von Windows 8″>

PS: die Angabe der höhe und breite beschleunigt den Seitenaufbau, da der Browser nicht erst schauen muss, welche Ausmaße das Bild hat.

Qualität der Bilder: Google kann qualitativ minderwertige Bilder, welche z.B. zu hoch komprimiert wurden (JPEG) erkennen, daher sollte man meistens auf PNG-Bilder zurückgreifen, welche verlustfrei komprimiert werden können. | suckup.de/bilder_test/index.html

PS: extrem große Bilder sollten weiterhin im JPEG-Format gespeichert werden 

 

7.) Domainwahl

Du solltest für ein Projekt / Produkt am besten eine eigene, einprägsame Domain registrieren, zudem zieht Google das alter der Domain als Kriterium hinzu. Kostenlose Angebote wie z.B.  “*.co.cc” Domains hat Google gänzlich aus seinem Index verbannt, um Spam zu verhindert.

 

8.) “double Content” (intern)

Derselbe Artikel (oder größere Textauszüge davon) sollten z.B. nicht über verschiedene Domain erreichbar sein.

Beispiel:

http://voku-online.de/2011/06/20/epic-fail-bumblebee/ 

http://www.suckup.de/2011/06/20/epic-fail-bumblebee/

https://suckup.de/2011/06/20/epic-fail-bumblebee/

————-> http://suckup.de/2011/06/20/epic-fail-bumblebee/

Wenn du automatisiert doppelten Content produzierst (z.B. RSS, Druckseiten, verlinkte Themenseiten), können diese via robots.txt global, oder für die jeweilige Seite, durch die Meta-Tags (noindex, nofollow) aus der Indexierung herausgenommen werden.

Zudem kann man auch noch einen “Canonical Link” einfügen, welcher dabei helfen soll die Original-Quelle zu belegen & per .htaccess verbieten die Bilder auf deiner Webseite von extern (Webseiten) aufzurufen.  

 

9.) korrekte Weiterleitungen (Redirects)

Wenn man seine Seite auf eine neue Domain umzieht, sollte man die Inhalte direkt auf die neue Ziel-Domain weiterleiten und nicht etwa auf die neue Startseite verweisen, hingegen sollte man für temporäre Umleitungen 302-Redirects anstatt permanente 301-Redirects. Hier ein paar Beispiele wie man eine Weiterleitung per .htaccess erstellt: .htaccess & mod_rewrite 

mehr Infos: Weiterleitungen

 

10.) die Struktur der URL

An die URL stellt man die selben Anforderungen wie an den Titel, zudem kann man noch extra Infos einfügen wie z.B. /blog/ oder die Kategorie z.B. /ubuntu/.

Aus SEO-Sicht ist es nicht empfehlenswert das komplette Datum mit in der URL anzugeben, jedoch kann das Jahr z.B. /2011/ mehr Besucher auf die Webseite / Blog locken, da viele aktuelle Informationen bei Google suchen. Man sollte jedoch auch beachten, dass die Bedeutung der Wörter aus Sicht der Suchmaschine abnimmt um so weiter unten / hinten sich dieses Wort in der URL befindet, daher ist es auch nicht zu Empfehlen das komplette Datum mit in der URL aufzunehmen: Optimale Länge sind 100 Zeichen (max. 200 Zeichen). 

Info: Um mehrere Wörter in der URL zu trennen, sollten ausschließlich die Zeichen “/”und “-” und nicht “_” verwendet werden.

 

11.) Menü & Seitenstruktur 

Ein (Haupt-)Menü sollte immer erreichbar sein und kein JavaScript oder Flash enthalten, da Google diese nicht (schlecht) indizieren kann. Zudem sollte man Sackgassen vermeiden, hilfreich sind dabei z.B.: “Kategorien”, “verlinkte Keywords” oder eine Zusätzliche Navigation auf der Webseite “Home > Support > FAQ”

Alle Inhalte, welche man mit 4-6 Klicks von der Startseite erreichen kann, kann auch Google erreichen!

 

12.) interne Verlinkung

Du solltest Keywords in Texten, welche auf einer Webseite sind, auch untereinander verlinken, so dass der Zusammenhang der einzelnen Texte besser zur Geltung kommt. Die interne Verlinkung kann z.B. auch durch eine “Tag-Cloud” verbessert werden.

 

13.) Ladegeschwindigkeit

Zum einen berücksichtigt Google die Ladegeschwindigkeit der Webseite als Rankingfaktor und User werden mit Sicherheit mehr Freude an der Webseite haben! ;)

Ich habe bereits vor einiger Zeit einen ausführlichen Blog-Post zu diesem Thema geschrieben -> Webseiten beschleunigen – Übersicht 

 

14.) 404-Fehlerseiten optimieren

Man kann die 404-Fehlerseite auf verschiedene Arten optimieren, zum einen kann man den User mit etwas witzigen ablenken und weiter auf der Webseite halten. | 100 lustige 404 Seiten

Zum anderen könnte man zumindest die Sitemap mit in die 404-Seite einbinden oder alternative Artikel anzeigen. Ich teste gerade das “AskApache Google 404“-Plugin für WordPress, welches mittels Google ähnliche Artikel in die 404-Seite anzeigt.

Info: Zudem sollte man 404-Links im allgemeinen vermeiden / korrigieren. Falls du WordPress einsetzt solltest du dir einmal das Plugin “Broken Link Checker” näher anschauen.

 

15.) fehlerfreien Quellcode (HTML, XHTML, …)

Zudem sollte der Quellcode der Webseite weitestgehend fehlerfrei sein, da zum einen die Kompatibilität zu verschiedenen Browsern damit verbessert wird und weil Google dies als Kriterium zur Beurteilung der Webseite heranzieht. Hier einige Webseiten, welche dabei helfen den Quellcode zu überprüfen: (W3C)

– CSS

HTML

– Mobile

– RSS-Feed

 

16.) kein Blackhat-SEO verwenden

Blackhat-SEO ist dunkle Seite der Suchmaschinenoptimierung, es geht dabei immer darum die Suchmaschinen auszutricksen, was jedoch meistens nach hinten losgeht und seine Abwertung der Webseite zur folge hat. Beispiele:

– versteckte Links

– weißer Text auf weißem Hintergrund

– das Gästebuch-, Foren-, Blog- und Wiki-Spamming durch Einfügen von (irrelevanten) Links 

– u.s.w.

 

17.) kein Intro / Flash- & Java-Anwendungen vermeiden

NIcht nur für die Suchmaschine ist es wichtig die Webseite ohne umwege zu erreichen, auch für die User sind Intros / Ladeanzeigen zu Webseiten mehr als störend. Auch sollte man Flash- & Java-Anwendungen nach möglichkeit vermeiden, da diese ggf. nicht von der Suchmaschiene indexiert werden. 

 

18.) RDFa-Attribute (Rich Snippets) im HTML-Code

Dies ist für kleine Webseiten kaum von Interesse, wenn man jedoch einen Online-Shop oder ähnliches betreibt, sollte man sich mit dem Thema näher beschäftigen.

Info: Rich Snippets & Introducing Rich Snippets

 

19.) stetige Aktualisierung

Zudem mögen Suchmaschinen neue Inhalte, wie bereits zu beginn geschrieben “Content is King”! Diesen Effekt kann man nutzen, indem man neue Inhalte z.B. via Kommentare generiert, dabei können Kommenare welche nicht zum Thema passen bzw. nicht die nötigen Keywords beinhalte ggf. auch negative Effekte haben, daher kann man Kommentare auch auf anderen Seiten auslagern z.B. mit Disqus.

Man kann z.B. auch neue Inhalte via Facebook & Twitter auf die Webseite bringen (siehe Twitter-Meldungen auf der rechten Seite) indem man Inhalte importiert oder man aktualisiert von Zeit zu Zeit einige Beiträge! ;)

 

20.) Usability & Optik

Im Allgemeinen geht es darum, die Benutzerfreundlichkeit (Usability) & das Design auf einer Webseite zu vereinen, so dass sich User besser auf der Webseite zurechtfinden und dies mit Backlinks belohnen.

 

21.) Seriosität & Glaubwürdigkeit 

Auch hier steht in erster Linie der User und nicht die Suchmaschine im Vordergrund. Jedoch ist die Glaubwürdigkeit, dass man weiß wovon man schreibt und ein seriöser Auftritt der Webseite auch ein wichtiger Faktor! Stimmt das Konzep der Webseite nicht, so hilft auch die beste SEO-Optimierung nichts.

 

Offpage-Faktoren: (nimmt Einfluss auf die jeweilige Webseite, ohne auf dieser etwas zu ändern)

 

 
 

1.) Backlinks

Wie bereits zu Beginn beschrieben, bewerten Google eingehende Links, sogenannte Backlinks positiv für deine Webseite. Hier nun einige Beispiele wie man den Linkaufbau vorantreiben kann.
 
– gute Inhalte, Gewinnspiele oder ähnliches was den Nutzer interessiert
   und somit weiterempfohlen und mit Backlinks belohnt wird :)
– Signaturen mit Link in Foren
– Kommentare mit Link in Blogs
– RSS-Feed anbieten / Blogroll erstellen
– Beiträge im Sozial-Network verlinken (Twitter, Facebook, Google+)
– …
 

2.) “double Content” (extern)

Doppelte Inhalte sind nicht nur ein internes Problem auf der Webseite selbst, wenn deine Beiträge von anderen übernommen (geklaut) werden und Google den selben Inhalt mehrmals im Internet findet, ist dieser einerseits weniger Wert und wird daher 

 

3.) Google Webmaster Tools

Mit Hilfe der Google Webmaster Tools kann man selber prüfen, wie gut oder schlecht man von Google erfasst wird und ggf. bereits Rückschlüsse aus Änderungen ziehen.
Zum Beispiel kann man feststellen, ob Google beim indexieren (crawlen) der Website auf Fehler gestoßen ist, Sitemanps angeben oder prüfen mit welchen Suchbegriffen die Webseite bereits gefunden wurde…

1.) Google-Konto erstellen
2.) Google Webmaster Tools

Tipp: andere Suchmaschinen haben ebenfalls “Webmaster Tools” > z.B. Bing Webmaster Tools

 

4.) (online) SEO-Software

Es gibt sehr sehr viel SEO-Software, jedoch sollte man sich für den Anfang auf die bereits erwähnten “Webmaster-Tools” der Suchmaschinen konzentrieren! Wer zudem noch die Ranking-Positionen analysieren und überwachen möchte oder seine Webseite automatisch bei verschiedenen Suchmaschinen anmelden möchte, findet dafür auch kostenlose & kostenpflichtige Software. 
 
z.B.:
– kostenpflichtig: Hello Engines! 
– kostenloses (online): rapid.searchmetrics.com
 

5.) bezahlte Werbeeinblendungen (Grafikbanner, Textanzeigen …)

Natürlich kann man auch Traffic (Besucherzahlen) durch Werbung generieren. Dabei sollte man jedoch beachten, dass die Besucher nur wiederkommen, wenn auch einen Mehrwert bietet!

z.B.:

 

6.) Social-Media: Sichtbarkeit in sozialen Netzwerken und Plattformen

Social-Media ist ein Sammelbegriff für Facebook, Twitter, YouTube, Social-Bookmarking-Dienste etc. und ist so umfassend, dass ich dafür bereits ein eigenen Blog-Post geschrieben habe: Das Soziale-Netz und die digitale Zukunft

 

7.) Webkataloge

Ggf. kann man sich www.dmoz.org einmal anschauen, jedoch sind Webkataloge (Link-Sammlungen) in der heutigen Zeit weniger von Bedeutung!

Epic Fail – Bumblebee

Wer ein Notebook mit “NVIDIA® Optimus™ Technologie” besitzt und z.B. Ubuntu installiert hat sollte sich einmal “Bumblebee” anschauen … “Owners of optimus laptops. Install bumblebee, use the nvidia card while gaming, use intel chipset for everything else. Now with autoshutdown for the nvidia card.” – Quelle

Mit dem Update auf Version 1.4.32 wurde ein Fehler behoben, welcher bei Ubuntu-Usern “/usr” löscht. daraufhin wurden in den letzten Tagen etliche lustige Kommentare & Bilder zu dem Thema auf github.com gepostet. Hier einige Beispiele …

bumblebee-fun1
bumblebee-fun1
bumblebee-fun2
bumblebee-fun2
bumblebee-fun3
bumblebee-fun3
bumblebee-fun4
bumblebee-fun4
bumblebee-fun5
bumblebee-fun5
bumblebee-fun6
bumblebee-fun6
bumblebee-fun7
bumblebee-fun7

Optimierungen von Android unter Linux nutzen

Vor einiger Zeit habe ich ein kleines Shell-Script (SSSwitch – auto-switch settings) geschrieben, welches mein Android Handy beim Start optimiert und die Kernel-Einstellungen anpasst, wenn der Bildschirm an bzw. aus ist. Einige der Einstellungen kann man auch unter Linux verwenden. Als Beispiel beschreibe ich hier kurz, wie man die I/O Leistung verbessern kann und wer allgemein etwas zum optimieren von Linux / Ubuntu lesen möchte, dem hilft ggf. folgender Blog-Post weiter -> SpeedUp-Ubuntu ;)

 

Ein Ausschnitt aus dem besagtem Skript …

# =========
# One-time tweaks to apply on every boot;
# =========
STL=`ls -d /sys/block/stl*`;
BML=`ls -d /sys/block/bml*`;
MMC=`ls -d /sys/block/mmc*`;

… hier wurde der externe / interne Speicher von Android angegeben unter meinem Linux-System würde ich hier also z.B. folgendes angeben.

SDA=`ls -d /sys/block/sda/*`;

# =========
# Remount all partitions
# =========
for k in $(busybox mount | cut -d " " -f3);
do
	sync;
	busybox mount -o remount,noatime,nodiratime $k;
done;

“atime – Update inode access time for each access. See also the strictatime mount option.” – man mount Hier schalten wir die Funktion aus, welche aufzeichnet wann ein Datei oder Verzeichnis zuletzt angesehen wurde, da wir diese Funktionalität unter Android selten benötigen werden. ;) Ggf. kann man diesen Abschnitt komplett so unter Linux / Ubuntu verwenden z.B.:

mount
/dev/sda5 on / type ext4 (rw,errors=remount-ro,commit=0)
[...]
/dev/sda3 on /boot type ext2 (rw)
/dev/sda6 on /home type ext4 (rw,commit=0)
[...]
for k in $(busybox mount | cut -d " " -f3); do sync; mount -o remount,noatime,nodiratime $k; done;
mount
/dev/sda5 on / type ext4 (rw,noatime,nodiratime,errors=remount-ro)
[...]
/dev/sda3 on /boot type ext2 (rw,noatime,nodiratime)
/dev/sda6 on /home type ext4 (rw,noatime,nodiratime)
[...]

… wie man sieht sind die neuen Mount-Optionen nun aktiv. Wer mehr dazu erfahren möchte findet in dem bereits erwähnten “SpeedUp Ubuntu“-Beitrag unter dem Punkt “3.1) Filesystem” mehr Infos.

# =========
# check enabled/disabled status for IO settings
# =========
if [ "$IO_SETTINGS_ENABLED" -eq "1" ];
then
	# =========
	# Optimize non-rotating storage
	# =========
	for i in $STL $BML $MMC;
	do
		/system/xbin/echo "1" > $i/queue/iosched/rq_affinity;
		/system/xbin/echo "1" > $i/queue/iosched/low_latency;
		/system/xbin/echo "64" > $i/queue/max_sectors_kb;
		/system/xbin/echo "$READ_AHEAD_ALL" > $i/queue/read_ahead_kb;
	done;

Hier legen wir unter anderem die Puffergröße von unseren Speichermedien ein. Als Beispiel zeige ich kurz wie sich der Buffer auf die Lesegeschwindigkeit auswirkt, wenn eine Datei z.B. erneut geöffnet wird. ;) Dazu benötigen wir zuerst einen Compiler (gcc)

sudo apt-get install gcc

Nun den folgenden Quelltext kopieren …

#include 
#include <stdio.h>
#include <unistd.h>
#include <sys/times.h>
#include <sys/stat.h>
#include <fcntl.h>
#include <stdlib.h>

#define MAX_PUFFER_GROESSE 1<<14
// Ausgabe
static void zeit_ausgabe(long int puff_groesse, clock_t realzeit, struct tms *start_zeit, struct tms *ende_zeit, long int schleiflaeufe);

int main(void) {
    char puffer[MAX_PUFFER_GROESSE];
    ssize_t n;
    long int i, j=0, puffer_groesse, opt_puffer;
    struct tms start_zeit, ende_zeit;
    static long ticks=0;
    clock_t uhr_start, uhr_ende, system_cpu=0.0;

    // Ausgabe
    fprintf(stderr, "+--------------+-------------+--------------+--------------+--------------+\n");
    fprintf(stderr, "| %-10s | %-10s | %-10s | %-10s | %-10s |\n",
                    "Puffer-", "UserCPU", "SystemCPU", "Gebrauchte", "Schleifen-");
    fprintf(stderr, "| %10s | %10s | %10s | %10s | %10s |\n",
                    " groesse", " (Sek)", " (Sek)", " Uhrzeit", " laeufe");
    fprintf(stderr, "+--------------+-------------+--------------+--------------+--------------+\n");

    while (j <= 14) {
        i=0;
        puffer_groesse=1<<j;
        if (lseek(STDIN_FILENO, 0L, SEEK_SET) == -1) {
            fprintf(stderr, "Error: lseek");
            exit(1);
        }
        if (lseek(STDOUT_FILENO, 0L, SEEK_SET) == -1) {
            fprintf(stderr, "Errir: lseek");
            exit(1);
        }
        if ( (uhr_start = times(&start_zeit)) == -1) {
            fprintf(stderr, "Error: times");
            exit(2);
        }
        while ( (n=read(STDIN_FILENO, puffer, puffer_groesse)) > 0) {
            if (write(STDOUT_FILENO, puffer, n) != n) {
                fprintf(stderr, "Error: write");
                exit(3);
            }
            i++;
        }
        if (n < 0) {
            fprintf(stderr, "Error: read");
            exit(4);
        }
        if ( (uhr_ende = times(&ende_zeit)) == -1) {
            fprintf(stderr, "Error: times");
            exit(5);
        }

        if (ticks == 0) {
            if ( (ticks = sysconf(_SC_CLK_TCK)) < 0) {
                fprintf(stderr, "Error: sysconf");
                exit(6);
            }
        }
        // Ausgabe
        zeit_ausgabe(puffer_groesse, uhr_ende-uhr_start, &start_zeit, &ende_zeit, i);
        j++;
    }
    exit(0);
}

// Ausgabe
static void zeit_ausgabe(long int puff_groesse, clock_t realzeit, struct tms *start_zeit, struct tms *ende_zeit, long int schleiflaeufe) {
    static long ticks=0;
    if (ticks == 0) {
        if ( (ticks = sysconf(_SC_CLK_TCK)) < 0) {
            fprintf(stderr, "Error: sysconf");
            exit(6);
        }
    }
    fprintf(stderr, "| %10ld | %10.2f | %10.2f | %10.2f | %10ld |\n", puff_groesse, (ende_zeit->tms_utime - start_zeit->tms_utime) / (double)ticks, (ende_zeit->tms_stime - start_zeit->tms_stime) / (double)ticks, realzeit / (double)ticks, schleiflaeufe);
    return;
}

… und in eine leere Datei (io_speed_buffer.c) einfügen, nun compilieren wir noch schnell das Programm mit folgendem Befehl …

gcc io_speed_buffer.c -o io_speed_buffer

… als nächsten benötigen wir eine etwa 10 MB große Datei als Eingabe, diese erzeugen wir mittels “dd” im aktuellen Verzeichnis.

dd if=/dev/zero of=./test count=20000

Und schon können wir mittels folgenden Befehl die optimale Buffer-Größe herausfinden. Wobei man bei minimaler Verbesserung nicht den höheren Wert nutzen sollte.

z.B.:

./io_speed_buffer <test >test2
+--------------+-------------+--------------+--------------+--------------+
| Puffer-    | UserCPU    | SystemCPU  | Gebrauchte | Schleifen- |
|    groesse |      (Sek) |      (Sek) |    Uhrzeit |     laeufe |
+--------------+-------------+--------------+--------------+--------------+
|          1 |       0.48 |      10.41 |      10.90 |   10240000 |
|          2 |       0.26 |       3.40 |       3.66 |    5120000 |
|          4 |       0.19 |       1.64 |       1.83 |    2560000 |
|          8 |       0.12 |       0.80 |       0.92 |    1280000 |
|         16 |       0.01 |       0.46 |       0.47 |     640000 |
|         32 |       0.03 |       0.20 |       0.23 |     320000 |
|         64 |       0.00 |       0.12 |       0.12 |     160000 |
|        128 |       0.00 |       0.07 |       0.07 |      80000 |
|        256 |       0.00 |       0.04 |       0.04 |      40000 |
|        512 |       0.00 |       0.02 |       0.02 |      20000 |
|       1024 |       0.00 |       0.02 |       0.02 |      10000 |
|       2048 |       0.00 |       0.01 |       0.01 |       5000 |
|       4096 |       0.00 |       0.00 |       0.00 |       2500 |
|       8192 |       0.00 |       0.01 |       0.01 |       1250 |
|      16384 |       0.00 |       0.01 |       0.01 |        625 |

Standardmäßig ist der Wert “128” gesetzt …

cat /sys/block/sda/queue/read_ahead_kb
128

… welchen wir jedoch leicht ändern können! ;)

sudo echo "256" > /sys/block/sda/queue/read_ahead_kb
cat /sys/block/sda/queue/read_ahead_kb
256

Ggf. kann man diese Einstellungen auch unter Linux direkt beim start ausführen lassen z.B. könnte man den zuvor gezeigten “echo”-Befehl in der “rc.local”-Datei einfügen. (/etc/rc.local)

	# =========
	# Optimize io scheduler
	# =========
	for i in $STL $BML $MMC;
	do
		/system/xbin/echo "$IO_SCHEDULER" > $i/queue/scheduler;

Welcher I/O Scheduler der beste für das Speichermedium ist kann man am betesten selber testen, indem man z.B. wieder den “dd”-Befehl verwendet. -> [Discussion] SSSwitch – auto-switch settings PS: Für mein Android-System nutze ich momentan “bfq” wobei “noop” gerade für SSD-Speichermedien schneller sein soll …

		case $IO_SCHEDULER in
		"cfq")
    		        /system/xbin/echo "0" > $i/queue/rotational;
      		        /system/xbin/echo "1" > $i/queue/iosched/back_seek_penalty;
      		        /system/xbin/echo "1" > $i/queue/iosched/low_latency;
     		        /system/xbin/echo "3" > $i/queue/iosched/slice_idle;
      		        /system/xbin/echo "16" > $i/queue/iosched/quantum;
      		        /system/xbin/echo "2048" > $i/queue/nr_requests;
			/system/xbin/echo "1000000000" > $i/queue/iosched/back_seek_max;;
		"bfq")
			/system/xbin/echo "0" > $i/queue/rotational;
			/system/xbin/echo "1" > $i/queue/iosched/back_seek_penalty;
			/system/xbin/echo "1" > $i/queue/iosched/low_latency;
			/system/xbin/echo "3" > $i/queue/iosched/slice_idle;
			/system/xbin/echo "16" > $i/queue/iosched/quantum;
			/system/xbin/echo "2048" > $i/queue/nr_requests;
			/system/xbin/echo "1000000000" > $i/queue/iosched/back_seek_max;;
		"noop")
			/system/xbin/echo "4" > $i/queue/iosched/quantum;
			/system/xbin/echo "16" > $i/queue/iosched/fifo_batch;
			/system/xbin/echo "248" > $i/queue/nr_requests;;
		"deadline")
			/system/xbin/echo "1" > $i/queue/iosched/front_merges;
      		        /system/xbin/echo "16" > $i/queue/iosched/fifo_batch;;
		"sio")
      		        /system/xbin/echo "1" > $i/queue/iosched/front_merges;
			/system/xbin/echo "4" > $i/queue/iosched/quantum;
			/system/xbin/echo "16" > $i/queue/iosched/fifo_batch;
			/system/xbin/echo "256" > $i/queue/nr_requests;;
		esac;
[...]
	done;
[...]
fi;

Hier noch ein-wenig Feintuning für die entsprechenden I/O Scheduler ;) ggf. müssen diese Werte auf anderen Systemen (Hardware) angepasst werden, dies habe ich bisher nur auf meinem Android System getestet. Falls euch / jemanden dieser Blog-Beitrag gefallen hat, werde ich weitere Einstellungen von dem Skript erklären … :)

Screenshots von Android via shell

Wenn man auf seinem Android beispielsweise einen Kernel mit 24bpp Unterstützung installiert, kann man auch wenn man root-Rechte hat, keine Screenshot via App machen. Um dies zu umgehen kann man die “Android Debug Bridge (adb)” verwenden.

sudo apt-get install ffmpeg
/opt/android-sdk-linux_x86/platform-tools/adb pull /dev/graphics/fb0 fb0
ffmpeg -vframes 1 -vcodec rawvideo -f rawvideo -pix_fmt rgb32 -s 320x480 -i fb0 -f image2 -vcodec png image.png

 

Das gleich Verfahren kann man auch unter Windows anwenden und wer lieber mit einer GUI arbeitet, sollte sich einmal QtADB anschauen. ;)