Die Chinesen,
so ist zu lesen,
(zBsp. hier )
verkauften ihre Mutter, wenn sie ein Geschäft witterten. Sie seien da sehr flexibel. Sie sprängen von Foxconn-Dächern und scherten sich nicht um Umweltvorschriften. Und überhaupt würden sie uns bald ökonomisch überholen. Und dann...

Ganz anders der Europäer oder der Amerikaner. Der sei unflexibel und teuer.

Und Apple bezahle den chinesischen Arbeitern keine fairen amerikanischen Löhne.
Und Applekunden unterstützten das auch noch.

Ähm?

Anmerkung 1:

Es ist der Arbeiter, der vom Dach springt. Ihm reicht der Lohn nicht.
In China und anderswo.

Es ist der Unternehmer, der kalkuliert, ob er ein Geschäft machen kann. Dazu ist es hilfreich geringe Löhne zu zahlen, keinen Urlaub zu geben, keine Rücksicht auf die Umwelt zu nehmen.
In China und anderswo.

Es ist der Staat, der das erlaubt.
In China und anderswo.


Anmerkung 2:

Wenn der Applekunde keine Appleprodukte mehr kauft, dann gibt es deswegen auch keine höheren Löhne/weniger Arbeitszeit bei Foxconn. Dann gibt es weniger Arbeiter bei Foxconn. Als Kunde kann man Schlecker vs. Rossmann ausspielen. Die Mitarbeiter vom Schlecker kriegen dann auch keine höheren Löhne. (Stefan S.)

iMac G5-Tastatur öffnen:

Man braucht zunächst ein kleines Sechskant-Bit, bzw. einen Inbusschlüssel mit 1,3mm Breite.

Auf der Unterseite unten (ggü. den USB-Buchsen) die drei Sechskantschrauben aufschrauben

und dann nach oben hin, also zu den Buchsen hin, aufklappen. Dabei auf die Folien-Kontakt-Stecker achten.

Diese jetzt herausziehen (mit den Fingern).

Und schon hat man zwei Teile.

Untere Lade öffnen:
Jetzt braucht man einen kleinen Kreuzschlitz, (PZ 1, einfach probieren)
Die beiden äußeren Schrauben aufdrehen (nicht die auf der Platine, diese kann dran bleiben!) und die beiden Schrauben in der dünnen Wand, die die USB-Ports dran halten, öffnen.
Jetzt die weiße USB-Stecker-Blende entlang des Kabels herausziehen.
Um die weiße Plastikeinlage von der transparenten Wanne abzuheben wird es jetzt etwas pfriemelig: Die weiße Plastikeinlage steckt unten in der Wanne, man muss sie also oben (an den USB-Steckern) herausklappen und dazu muss das Kabel vorsichtig mit durchgedrückt werden.
Jetzt kann man die Wanne und die Einlage säubern (z.B. mit weichem Spülschwamm und Wasser mit ein paar Tropfen Spülmittel).
Danach wieder zusammenfügen: erst unten anlegen und dann mit dem Kabel oben wieder zusammenfügen. USB-Teil festschrauben und die beiden äußeren Schrauben festdrehen.

Das obere Teil:

Ansich könnte man einfach alle Tasten abklipsen (die sind durchaus stabil und brechen nicht so leicht)
und dann das Plastik unter den Tastenkuppen trocken sauber machen. Nass wird das nix, das Wasser dringt in die Kontaktfolien ein, die zwischen Plastik und Blech liegen.
In jedem Fall, vorher abfotografieren!

Aber will man es richtig sauber, braucht man etwas mehr Geduld und Zeit, aber es ist zu machen:

Am Blechrücken des Tastaturteiles sich 33 gleiche kleine Kreuzschlitzschrauben und - je nach Modell - 3 Schräubchen mit ultrafeinem Kreuzschlitz drauf und etwas abstehend. Diese nicht entfernen, die halten nichts, sondern stellen nur Massekontakte zur Platine her (siehe die drei auf dem Bild).


Also alle 33 Schräubchen öffnen und dann das Blech vorsichtig abheben. Wenn die Folien mit abgehen, purzeln einem die Gummiböbbel der Tasten entgegen.
Keine verlieren! Und auf die kleine LED achten, die noch im Plastik liegt (LED in der Caps Lock-Taste)

Wenn die Folien dreckige Stellen haben von eingedrungenen Flüssigkeiten, kann man diese auch vorsichtig säubern. Aber Achtung, die sind an ein oder zwei Punkten zusammengeschweißt, wegen der Passform. Wichtig: die müssen wieder, insbesondere dazwischen, völlig trocken sein.

Von dem weißen Plastikträger kann man jetzt die Tastenkappen abklipsen. Nur zu, so leicht brechen die nicht ab. Evtl. von hinten die Tastenkappen mit einem Stäbchen rausdrücken, geht auch gut.

Die Tastenkappen kann man z.B. in ein Plastikeimerchen geben, warmes Wasser und Spüli dazu und mit Spülbürste kräftig drin herumstochern. Die Tasten und Schrift haben das bei mir gut ausgehalten. Geht auch in Waschmaschine bei 30°C Schongang.
Weißen Plastikträger auch mit Spüli und warmen Wasser mit der Spülbürste reinigen.

Trocknen bzw. Abtrocknen lassen. Das dauert. (Wenn später die Tastatur nicht geht, kann es sein, dass die Tasten noch Feuchtigkeit in die Folien gebracht haben!)

Und nun alles wieder zusammenbasteln:
Tasten wieder in die Schale klipsen. (Die Tasten halten was aus, aber richtig herum reinklipsen)
Etwas Geduld erfordert es, die Gummi wieder darauf zusetzen und die LED eisetzen.
Vorsichtig Folien drauf.
Dann das Blech und 33 Schrauben drauf.

So, wieder die Folienstecker ind die Buchsen schieben, das kleine herumkugelnde 3-Bein-Plastikteil auf die Sockel bei der Platine stülpen und oben anlegen und nach unten reinklappen, 3 Inbusschgrauben, fertig.

Viel Glück!

Nachtrag: Reparieren:

Wenn Tasten immer zwei Zeichen gleichzeitig produzieren, dann verursacht Dreck einen Kurzschluss in den Folien. Diese sind dann einzeln zu säubern. Vorsichtig mit weißem Lappen. Siehe oben.

Wenn Tasten gar nicht mehr gehen, dann sind die Leiterbahnen korrodiert und man muss die korrodierten Stellen überbrücken. Aber das ist eine fiese Bastelarbeit und keine amtliche Reperatur (dazu müßte man die Folien auswechseln).

Nicht-amtlich kann man die korrodierten Stellen (vorher mit Messgerät die kontaktunterbrechenden Stellen finden, mit bloßem Auge schwer machbar.) mit einem dünnen Drähtchen, z.B. aus 2 Litzen selbstgedreht, siehe Bild, überbrücken, in dem man das Drähtchen auf die blanke Leiterbahn mit Tesa aufklebt. (Mit Alufolie hatte es nicht geklappt, es fehlte der Anpressdruck, deswegen die Litzen verdreht)

Nachmessen!

Fertig! (Stefan S.)

Man, wie mich das nervt. Nicht das Kleingedruckte ansich, das könnte man sich ja noch vergrößern. Aber das Verschleiern des Inhaltes.

Von meiner Bank (Cronbank, Geschäftskonto) las ich meinen Kontauszug und da hatten die mir glatt was abgezogen, obwohl das doch ein kostenloses Konto ist - nein, war!
Ich habe mir jetzt ihren letzten Schrieb mal angeschaut, ob da was angekündigt war.

Fettgedruckter Betreff: Änderung des Rechnungsabschlusses für ihr Konto.
Im Text: gemäß...AGB... Ab dem Feb 2009 werden wir Ihnen jeweils zum Monatsende einen Rechnungsabschluss erteilen... blabla schriftlich widersprechen 6 Wochen... (warum sollte ich dem widersprechen, ist mir doch egal, ob monatlich oder - wie bisher - 1/4-jährlich?) Auf unserer Homepage steht der Wortlaut der AGB ... sowie das aktuelle Preisverzeichnis... Einen Auszug der wichtisten Konditionen und Gebühren haben wir für Sie auf der Rückseite abgedruckt.

Allgemeine Gebühren:
1.Löschen eines Kontos 0,-
2. ec-Karte 7,50
3. Monatlicher Kontoauszug 0,-
4. sonstiger Versand 0,55
usw usw.
naja usw., dachte ich.
Aber ich kam natürlich nicht darauf, dass die für ein bisher kostenloses Konto unter Pkt 5. jetzt eine Kontogebühr (Grundpreis) 5,00€/mon eingebaut haben und das nirgends vorher im Hauptteil angedeutet haben.

Klar das mag immernoch günstig sein.
Aber ich bin reichlich angepisst von dem Verhalten, mir die wohl wichtigste Änderung der Konditionen nicht in der Überschrift (Grundpreiserhöhung oder -"Anpassung" o.ä.) und noch nicht einmal im Fließtext kundzutun, sondern unter Nr.5 im Kleingedruckten. Grrrrrr.

Muss man seine Kunden versuchen zu verscheißern?
Jedenfalls hat mein Adrenalin dafür gesorgt, dass ich mir mit 1 Stunde Internetrecherche jetzt zwei Alternativen aus dem Internet gefischt habe.


Das gleiche Prinzip von meinem örtlichen Energieversorger: N-Ergie, vor einem halben Jahr.
Eigtl. dachte ich ja "örtlich" sei besser als Großkonzern oder -Billigableger-Yello-E-Atom-Quark.
Fettgedruckter Betreff: Zuverlässige Stromversorgung zu Marktpreisen.
1.Absatz blabla
2.Absatz Andere Anbieter haben Preise erhöht bla.
3.Absatz 2.Hälfte ... notwendige Preisanpassungen...
Warum steht das nicht im Betreff? Darum ging es doch!
Auch so eine Verscheißerung!

Im 4. Absatz gar stand ein Preisvergleich der Preise bis 31.12. mit anderen Ökostromanbietern. Die neuen Preise, Gegenstand des Tarifänderungen, gelten aber erst ab 1.1.. Die haben also ihre alten Preise mit den neuen der anderen verglichen und - oh Wunder - gut abgeschnitten. Den neuen Tarifen waren aber 100,- teurer!

Und: warum schreiben die mir nicht hin wie die bisherigen Tarife waren und mit welcher Mehrbelastung ich würde rechnen müssen?

Grrrrrrr. Verscheißerung im Quadrat!
Mein Adrenalin hatte locker für 2Std. Internetrecherche und einen Wechsel des Energieversorgers gereicht.

Da hat man sich ja nun schon gewöhnt an: Handy für 1Euro.*
Flatrate 0,-*
Mittelklassewagen für 150,-*
ja, bitte gern, gleich einpacken.

Ach so, ja, das Sternchen, kleingedruckt in Schrifthöhen, die bundesrichterlich als gerade noch zulässig angesehen werden:
* mit 24 Monate Vertag
* die ersten 3 Monate
* Finanzierungsrate bei 9.000,- Euro Anzahlung.

Ihr Arschlöcher!

Oder freundlicher formuliert:
Das ist kein sauberes Geschäftsgebaren.

Und nur weil es üblich ist, (z.B. dass Hunde auf den Gehweg scheißen), muss ich das noch lange nicht gut finden.

Gruß Adrenalo-Stefan (Stefan S.)

Thema: Hinsendekosten bei Fernabsatzverträgen

Ich liebe den Verbraucherschutz!

Doch der Reihe nach:

Fand ich doch 2006 ein Schnäppchen bei eBay:
Festplatte für 1 Euro.

Aber (1): Konnte leider nicht testen, bla bla verkaufe als defekt an Bastler Hm, tja seine Bewertungen waren gut und 1 Euro verlockend! Und außerdem gibt es ja das Fernabsatzgesetz!

Aber (2):
Versandkosten 10 Euro!

Nun gut bis 1,- gehe ich und siehe da: 1,2,3, meins!

Und nun - man ahnt es: oh Wunder: Festplatte kaputt!

Also habe ich gleich einen Widerruf per Email abgesendet.

Die Antwort lautete, das wäre schon o.k., aber ich bekäme nicht 11,-, sondern nur 1 Euro zurück, denn das Fernabsatzgesetz gewähre nur die Rücksendekosten zurück.
Überflüssig zu erwähnen: Er hatte mir mit GLS das Teil für 4,- zugesandt! Grrrrrrr.
Groll und Ärger durchfloss meine Blutbahnen, ich bemühte Google. Ich war mir sicher, wenn das für Rücksendekosten gelte, müsse es doch wohl erst recht für die Hinsendekosten gelten. Wäre ja noch schöner und widerspräche zudem dem Verbraucherschutzsinn des ganzen Fernabsatzgesetzes.

Tatsächlich aber waren sich die Rechtsgelehrten uneinig. Unfassbar für mich. Die Verbraucherzentrale NRW wusste jedoch von einem Urteil in meinem Sinne , dies war jedoch noch nicht rechtskräftig. Ich versuchte mich abzuregen und schrieb meinem Kontrahenten in moderatem Ton - so gut es eben ging - diese, meine Erkennntnisse und schlug vor Halbe/Halbe bis zur endgültigen Entscheidung. Er fand die Lösung o.k. und so sendete ich ihm für 4,- das Teil zurück und er überwies mir 4+1+5=10,- (Stimmt schon, wenn ich wütend bin, werde ich kleinlich ).

Und jetzt fand ich - Tätähhh: bzw:
Ganz in meinem Sinn die Berufungsentscheidung des OLG Karlsruhe !

Doch leider gibt es "Michaels EShop" bei eBay nicht mehr, auch seine Website ist fort und meine Email ging ins Leere...

Wer also einen Michael Tetzner aus München kennt, kann ihn mal fragen, ob er früher Festplatten bei eBay verhökert hat und gegebenenfalls ihm sagen, dass er mir noch 5,- schulde.

Trotzdem liebe ich den Verbraucherschutz. (Stefan S.)

Habe was im Internet (http://www.w3schools.com) entdeckt, was sich prima für dieses Deine erste Website - Tutorial nutzen lässt:

Man kann sich mit Copy & Paste die Auswirkungen der Code-Änderung ansehen, indem man auf dieser Website im linken Code-Fenster den alten Code durch den neuen ersetzt:
Einfach hier unten den Code mit Apfel-C rauskopieren und in jene Website links ins Fenster klicken, mit Apfel-A den alten Text markieren und mit Apfel-V ihn durch den neuen ersetzen.
Jetzt nur noch oben auf "Edit the text and click me" klicken. Schon sieht man das Ergebnis im rechten Fenster(-Frame)

Dazu habe jetzt den CSS-Code der bisherigen Beispiele in den HTML-Head eingefügt.

Zur Erinnerung: Teil 1: Teil 2: Teil 3: Teil 4: Teil 5:

Code von Teil 4 (bzw. Teil 3):
<html>
<head>
<title>Meine erste Website</title>

<style type="text/css">
body { background-color:yellow; color:darkgrey; font-family:Arial; font-size:14px; }

h1 { background-color:white; font-family: Georgia; font-size:18px;
color:black; letter-spacing: 1em; font-weight:bold }
h2 { font-family:Georgia; font-size:16px; font-style:italic; color:black; }

p:first-letter { font-size:2em; color:red }

.Navigation {position:absolute; top:120px; background-color:white;
width:20%; left:20px; border :2px solid red; text-align:right; }
.Inhalt { position:absolute; top:120px; width:70%; right: 20px; text-align:left; }

a {border:0px solid green; background-color:grey; color:red; }
a:hover { background-color:green; color:yellow; }
a:focus { background-color:white; color:blue; }

</style>
</head>

<body>

<h1>Meine Website</h1>
<h2>Jetzt geht's aber los.</h2>

<div class="Navigation">
<a href="http://www.mactechnews.de">MTN-Website</a><br><br>
<a href="http://de.selfhtml.org/css/index.htm">Alles zu CSS</a><br><br>
<a href="http://www.apple.com.de">Apple</a>
</div>

<div class="Inhalt">
Hallo Leser.
Meine <b>wichtigste</b> Website ist die
<a href="http://www.mactechnews.de"> MTN-Website</a>.</p>

<p> In der Navigation stehen hier lauter Fremd-Links.
Normal wuerde man da jetzt zu den anderen eigenen Seiten
des eigenen Webprojektes verlinken wie Hobbys, Links, Kontakt, Impressum etc.</p>

<p> Mehr Inhalt faellt mir jetzt auch nicht ein.</p>

</div>

</body>
</html>

Code von Teil 5:
<html>
<head>
<title>Meine erste Website</title>

<style type="text/css">
body { background-color:rgb(255, 255, 230);
color:darkgrey; font-family:Arial; font-size:14px; }

h1 { text-align:center; padding:5px; margin-left: 40px; margin-right: 40px;
border: 10px solid grey;
background-image:url("http://data.mactechnews.de/282704.jpg");
background-position: 0px -75px; background-color:blue;
color:rgb(255, 255, 230); font-family: Georgia; font-size:20px;
letter-spacing: 1em; font-weight:bold; }

h2 { font-family:Georgia; font-size:16px; font-style:italic; color:black; }

p:first-letter { font-size:2em; color:red }

.Navigation {position:absolute; top:120px; background-color:white;
width:20%; left:20px; border :2px solid red; text-align:right; }
.Inhalt { position:absolute; top:120px; width:70%; right: 20px; text-align:left; }

a {border:0px solid green; background-color:grey; color:red; }
a:hover { background-color:green; color:yellow; }
a:focus { background-color:white; color:blue; }

</style>
</head>

<body>

<h1>Meine Website</h1>
<h2>Jetzt geht's aber los.</h2>

<div class="Navigation">
<a href="http://www.mactechnews.de">MTN-Website</a><br><br>
<a href="http://de.selfhtml.org/css/index.htm">Alles zu CSS</a><br><br>
<a href="http://www.apple.com.de">Apple</a>
</div>

<div class="Inhalt">
Hallo Leser.
Meine <b>wichtigste</b> Website ist die
<a href="http://www.mactechnews.de"> MTN-Website</a>.</p>

<p> In der Navigation stehen hier lauter Fremd-Links.
Normal wuerde man da jetzt zu den anderen eigenen Seiten
des eigenen Webprojektes verlinken wie Hobbys, Links, Kontakt, Impressum etc.</p>

<p> Mehr Inhalt faellt mir jetzt auch nicht ein.</p>

</div>

</body>
</html>

Natürlich kann man darin jetzt selbst nach belieben rumpfuschen...

Feine Sache, dieses www.w3schools.com
(Stefan S.)

Teil 1: Teil 2: Teil 3: Teil 4:

Jetzt will ich mal an der Optik feilen und dabei weitere CSS-Eigenschaften erläutern.
(Bei der "2.Website" sollte man sich zuerst die Optik überlegen und dann deren Umsetzung in Angriff nehmen. Aber...)

Vorab noch: Leerzeichen und Zeilenumbruch werden vom Browser ignoriert. D.h. man kann und sollte dies für den eigenen Überblick nutzen und welche reinschreiben, wo es einem taugt.

Zur Optik, mich stört schon mal:
Gelb ist zu intensiv. Farben können nicht nur mit Namen z.B.yellow, sondern auch mit ihren RGB-Werten geändert werden:
Jede Farbe kann im RGB-Format (Rot-Grün-Blau)

• in Werten zwischen 0-255 (z.B. rgb(255,255,230))
• in Hex-Werten (z.B.#FFFFDD) oder
• in Prozentwerten (z.B. rgb(100%,100%, 80%)) angegeben werden.

background-color:rgb(255, 255, 230);
Weiter:

"Meine Website" steht nicht in der Mitte. Kein Problem:text-align:center
und außerdem ist es so gedrängt:
Jedes Element mit Inhalt hat in HTML eine räumliche Ausdehnung. An deren Grenze (border) kann man eine Kante bzw. einen Rahmen sichtbar machen. Die Stärke kann man selber wählen, die Farbe, die Art (z.B. gepunktet, gestrichelt, durchgehende Linie, doppelte Linie, 3D-Effekte). Man kann auch alle vier umgebenden Kanten einzelnen ändern, zB. nur die unterstreichende Kante zeigen. Und damit der Text (oder das Bild) nicht am Rahmen klebt, kann man einen inneren Abstand angeben (padding). Desweiteren kann man auch den Abstand festlegen, den der Rahmen zu den angrenzenden Elementen haben soll (Abstand nach außen: margin)
(Letztere Eigenschaft wurde aber von alten Internet Explodern anders interpretiert, als der Standard (und alle anderen Browser ) dies vorsah und führte zu einer bisweilen ärgerlichen Darstellung auf den verschiedenen Browsern. Diese Rahmen-Darstellungsweise heißt auch Boxmodel. Uns soll das jetzt nicht interessieren, geht es doch erstmal um die erste Website am heimischen Rechner mit dem Lieblingsbrowser. Wenn ihr allerdings mal was ins Internet stellen wollt, dann hört ihr hier schon die ersten Probleme wachsen.)

Also, frisch und unbelastet ans Werk:

padding:10px; (allseitiger Innenabstand von 10px)
margin-left: 40px; margin-right: 40px; (Außenabstand nach links und rechts)
border: 10px solid grey Rahmen 10px durchgehend in grau

Ach, und innen leg ich jetzt mal ein Muster drunter, also als Hintergrund des Elementes (h1)
Dazu brauch ich ein Hintergrundbild. Ich klau mal eines zu Demonstrationszwecken von MTN-User Vicelow_SSC (Ich hoffe Vicelow_SSC hat nichts dagegen und lobe hiermit sein Foto als sehr gelungen ) )
background-image:url("http://data.mactechnews.de/282704.jpg");
Und das verschiebe ich noch.
background-position: 0px -75px; Negative Zahlen gehen auch! Die erste Zahl steht für horizontale und die zweite für vertikale Verschiebung (kein Komma dazwischen).

Man könnte noch die Kachelung nur auf eine Richtung beschränken oder ganz unterbinden mit
background-repeat: repeat-x für Wiederholung der Kacheln nur in X-Richtung (also horizontal). Ist hier nicht nötig.
Sehr interessant sind diese Eigenschaften für Verläufe, die man nur in 1 Pixel-Stärke anlegen braucht (dadurch wenig Speicherplatz frisst) und diese dann wiederholen lässt.
Und für den Fall, dass ein Browser das Bild nicht laden kann oder will, gebe ich noch eine Hintergrundfarbe und eine passendere Schriftfarbe an:
background-color:blue;
color:rgb(255, 255, 230);

Und das packe ich jetzt alles zur h1-Überschrift, in der CSS-Datei:

h1 { text-align:center; padding:10px; margin-top: 40px; border: 10px solid grey;
background-image:url("http://data.mactechnews.de/282704.jpg");
background-position: 0px -75px; background-color:blue;
color:rgb(255, 255, 230); font-family: Georgia; font-size:32px;
letter-spacing: 1em; font-weight:bold; }

Nochmal zur Schrift zurück: den Leerraum zwischen den Buchstaben erzeugt der Befehl:
letter-spacing: 1em;
1 em entspricht dabei der Höhe eines Buchstaben, genauso gingen aber px pt oder ex.

CSS-Datei speichern
body { background-color:rgb(255, 255, 230);
color:darkgrey; font-family:Arial; font-size:14px; }

h1 { text-align:center; padding:5px; margin-left: 40px; margin-right: 40px;
border: 10px solid grey;
background-image:url("http://data.mactechnews.de/282704.jpg");
background-position: 0px -75px; background-color:blue;
color:rgb(255, 255, 230); font-family: Georgia; font-size:20px;
letter-spacing: 1em; font-weight:bold; }

h2 { font-family:Georgia; font-size:16px; font-style:italic; color:black; }

p:first-letter { font-size:2em; color:red }

.Navigation {position:absolute; top:120px; background-color:white;
width:20%; left:20px; border :2px solid red; text-align:right; }
.Inhalt { position:absolute; top:120px; width:70%; right: 20px; text-align:left; }

a {border:0px solid green; background-color:grey; color:red; }
a:hover { background-color:green; color:yellow; }
a:focus { background-color:white; color:blue; }
und im Browser anschauen... (wie im Teil 4 beschrieben: )
Naja, schön isses wieder nicht.

Was man mit Links anstellen kann (Mouseover...) beim nächsten mal.
In der Zwischenzeit:
(Stefan S.)

Teil 1: Teil 2: Teil 3: Teil 4:CSS - voll konkret

Im letzten Teil habe ich CSS im Überblick vorgestellt. Jetzt wird es konkreter.

Doch vorher noch einen Hinweis auf wertvolle Helferlein:
Um HTML/CSS - Code zu schreiben ist ein Editor sinnvoll, der die HTML-tags, den CSS-Code und den eigentlichen Text-Inhalt verschiedenfarbig darstellt. Smultron kann das und mehr.
Um Code-Fehler zu entdecken empfiehlt sich ein "Validator". Ich verwende dazu Firefox mit dem PlugIn "Firebugs".

Zurück zu CSS:
Wenn eine Webpräsenz aus mehreren optisch ähnlichen Websites bestehen soll, dann ist es sinnvoll den CSS-Code in eine Extra-Datei zu schreiben, auf die in allen HTML-Dateien verwiesen wird. Der Code und etwaige Änderungen muß dann nur einmal geschrieben werden. So will ich das ab jetzt tun.

In den <head> - Bereich jeder html-Datei kommt einfach die Angabe, dass es eine Extradatei (hier: style.css; Name aber frei wählbar) mit zu befolgenden CSS-Angaben gibt:

<link href="style.css" rel="stylesheet" type="text/css">

In der Datei style.css stehen dann einfach die CSS-Angaben und zwar z.B:

h2 { font-family:Georgia; font-size:16px; font-style:italic; color:black; }

Zuerst die Bezeichnung des HTML-Elementes (h2). (die CSS-Anweisung ist ohne Klammer, während das entsprechende HTML-Element im HTML-Body ja in spitze Klammern gesetzt ist).
Es folgt die CSS-Anweisung, wie das Element, immer wenn es auftaucht, darzustellen ist. Dies steht in geschweiften Klammern { }.
Nun wird die Eigenschaft angegeben, die man explizit bestimmen will (z.B. font-size). Alle nicht genannten Eigenschaften werden, wenn auch kein übergeordnetes Element diese festlegt (s.u.), gemäß der Voreinstellungen des Web-Browsers dargestellt, also u.U. von Browser zu Browser verschieden!

Nach einem Doppelpunkt folgt nun der Wert, also zB.16px als Größenangabe, yellow als Farbe etc.

Mehrere Eigenschaften werden durch Semikolon voneinander getrennt.

Was ist ein übergeordnetes Element?

In obigem Beispiel ist eine Überschrift (h=headline) "zweiten Grades" (h2) genannt. (Es gibt Überschriften von h1 bis h6, h1 stellt die Größte dar.).
Wenn diese in einem Abschnitt <div> steht, dann ist dieser übergeordnet. Der Abschnitt könnte seinerseits auch in einem weiteren (also übergeordneten) Abschnitt stehen (verschachtelt wie die Babuschka-Figuren). Und alles ist eingebettet in den <body>-tag, den Körper bzw. den Darstellungsbereich des Browser-Fensters.

Will man viel festlegen, so schreibt man dies also am besten in den <body>, dann ist das schon mal geregelt.

Zur Klarstellung:
Ist im <body> die Schriftgröße mit font-size:14px angegeben und im <div> mit 18px, so wird im <div>-Bereich mit 18px geschrieben, da diese Angabe die konkretere ist. Übergeordnet bedeutet also nicht wichtiger, sondern allgemeiner!


Jetzt haben wir also zwei Dateien: Eine HTML-Datei, genannt z.B
Website01.htm:
<html>
<head>
<title>Meine erste Website</title>

<link href="style01.css" rel="stylesheet" type="text/css">

</head>

<body>

<h1>Meine Website</h1>
<h2>Jetzt geht's aber los.</h2>

<div class="Navigation">
<a href="http://www.mactechnews.de">MTN-Website</a><br><br>
<a href="http://de.selfhtml.org/css/index.htm">Alles zu CSS</a><br><br>
<a href="http://www.apple.com.de">Apple</a>
</div>

<div class="Inhalt">
Hallo Leser.
Meine <b>wichtigste</b> Website ist die <a href="http://www.mactechnews.de">
MTN-Website</a>.

<p> In der Navigation stehen hier lauter Fremd-Links.
Normal wuerde man da jetzt zu den anderen eigenen Seiten des eigenen
Webprojektes verlinken wie Hobbys, Links, Kontakt, Impressum etc.</p>

<p> Mehr Inhalt faellt mir jetzt auch nicht ein.</p>

</div>

</body>
</html>
Und eine CSS-Datei, die ich oben in Website01.htm schon benannt habe als
style01.css
body { background-color:yellow; color:darkgrey; font-family:Arial; font-size:14px; }

h1 { background-color:white; font-family: Georgia; font-size:18px;
color:black; letter-spacing: 1em; font-weight:bold }
h2 { font-family:Georgia; font-size:16px; font-style:italic; color:black; }

p:first-letter { font-size:2em; color:red }

.Navigation {position:absolute; top:120px; background-color:white;
width:20%; left:20px; border :2px solid red; text-align:right; }
.Inhalt { position:absolute; top:120px; width:70%; right: 20px; text-align:left; }

a {border:0px solid green; background-color:grey; color:red; }
a:hover { background-color:green; color:yellow; }
a:focus { background-color:white; color:blue; }

Im nächsten Teil werde ich die Optik der Website01.htm versuchen zu verbessern, indem ich die Anweisungen in der CSS-Datei abändere.

Teil 5:
(Stefan S.)

Teil 1: Teil 2: Teil 3: Optik in HTML: mit CSS

HTML-Seiten mit Text und Bild ist ja jetzt kein Problem mehr.
Aber es sollte halt nach was aussehen. Und dazu ist die folgende kurze Vorgeschichte sinnvoll zu wissen.

Ursprünglich war die Optik gar nicht wichtig, denn HyperText Markup Language war als "Sprache" entwickelt worden, um Text mit Formatierungen (fett, kursiv, groß, klein..), Struktur (Überschriften, Absätze, Listen, Tabellen) und Verweisen (sowohl nach innerhalb als auch außerhalb des Textes) schnell über das frischgeborene, noch langsame Internet zu schicken und darstellen zu können. Insofern ist HTML auch eher ein Textformat als eine Sprache. Aber mit der Ausbreitung und Verallgemeinerung des Internets und seiner Verschnellerung wuchsen die Wünsche hinsichtlich der optischen Darstellung der Inhalte, z.B. für Firmen-Web-Präsenzen.
Dann begann das Gefrickel mit den vorhandenen Befehlen etwas auf die Beine zu stellen, später kam noch das wesentlich kompliziertere JavaScript hinzu, mit dem man beispielsweise Mouseover-Effekte erzeugen konnte, und der Browserkrieg (IE-Netscape) bescherte echtes Chaos. Als Ausweg erwies sich "CSS", sozusagen der Darstellungsbruder zum HTML-Inhalt. Dies gelang aber erst, als sich CSS-fähige Browser durchsetzten.

Aber jetzt kann fast jeder Browser weitgehend CSS. Und da dieses CSS sowohl tauglich, als auch weitgehend durchgesetzt ist und auch nicht sonderlich schwer ist, will ich gar nicht erst die Optische Gestaltung in HTML erläutern, sondern jetzt über CSS schreiben, denn so wird es auch eine zeitlang Standard bleiben:
HTML ist für den möglichst strukturierten Inhalt und CSS für seine Darstellung da.

CSS heißt Cascading Style Sheets.

Cascading bedeutet soviel wie verschachtelbar und wird gleich noch erläutert.
Der Style der Website wird mittels Sheets, also Vorgaben verwirklicht und zwar in Bezug auf die HTML-Elemente (tags, "spitze Klammern").
CSS gibt also dem Browser vor, wie die einzelnen (Struktur-) Elemente auszusehen haben. Dazu weist er diesen Elementen die gewünschten Darstellungseigenschaften zu, z.B.:

• Die ganze Website soll als Hintergrundfarbe gelb haben.
• Aller Text ist in Arial, in der Schriftgröße 14 Pixel und der Farbe dunkelgrau zu halten.
• Außer Überschriften, die sollen in Georgia geschrieben sein, schwarz auf weißem Untergrund und 18 Pixel groß sein. (Dieses war bereits die erste Verschachtelung!)
• Jeder Absatz soll mit einem doppelt-großen Buchstaben beginnen.

Nun wird es interessant:

• Alle Links sollen grau hinterlegt sein, sollen die Farbe Rot haben,
• wenn man mit der Maus darüberfährt gelb auf grün werden und
• beim Klicken dann blau auf weiß erscheinen.

Und man kann alles nach belieben Positionieren!
Dazu muß man aber auch Alles in ein Element reingeschrieben haben, damit man dieses Element dann positionieren kann. Im Allgemeinen bietet sich Absatz <p> und - das hatten wir noch nicht: - <div> an. Das steht für englisch: division also Abschnitt o.ä.

Und damit man sich grafisch ordentlich austoben kann, kann man den Elementen (z.B. Abschnitten) auch Namen (id) geben oder Kategorien (class) einführen.
Damit kann man nun beliebig viele Elemente gestalten und positionieren. Und ineinanderverschachteln, bei Bedarf.

Sinnvoll ist es also sich Gedanken über die Struktur der geplanten Website zu machen. Im Groben könnte sich anbieten:

• Eine Hauptüberschrift mit Namen und Slogan darunter
• Bereich für die Navigation zwischen den Seiten
• Der Inhalt, bei Bedarf mit Zwischenüberschriften

Wie wird das nun umgesetzt?

Ausgangspunkt bleibt die HTML-Site.
In dieser wird nun der Style entweder

• direkt in die jeweiligen Elemente hineingeschrieben (gilt dann nur für dieses eine Element) oder
• in den Head-Bereich vorneweg geschrieben (gilt dann für die entsprechenden Elemente in dieser Site) oder auf eine
• externe zweite Datei verwiesen, das geschieht auch im Headbereich (Das gilt dann für die Elemente aller Websites, die auf diese CSS-Datei verweisen.

Das kann man auch kombinieren und das ist dann wieder verschachtelbar möglich. Wobei die speziellere Angabe die allgemeinere verdrängt. Die erste Angabe oben ist die speziellste, die dritte ist die allgemeinste.


Nach soviel Arbeit einfach mal ein Beispiel - in der Variante "CSS vorneweg im Head-Bereich", mit oben genannten Features. Zwischen <style type="text/css"> und </style> sind die Elemente genannt und deren gewünschte Eigenschaften folgen in geschweiften Klammern, jeweils durch einen Strichpunkt voneinander getrennt.

Also jetzt sozusagen: Learning by Looking

<html>
<head>
<title>Meine erste Website</title>

<style type="text/css">

body { background-color:yellow; color:darkgrey; font-family:Arial; font-size:14px; }

h1 { background-color:white; font-family: Georgia; font-size:18px;
color:black; letter-spacing: 1em; font-weight:bold }

h2 { font-family:Georgia; font-size:16px; font-style:italic; color:black; }

p:first-letter { font-size:2em; color:red }

.Navigation { position:absolute; top:120px; background-color:white;
width:20%; left:20px; border :2px solid red; text-align:right; }
.Inhalt { position:absolute; top:120px; width:70%; right: 20px; text-align:left; }

a {border:0px solid green; background-color:grey; color:red; }
a:hover { background-color:green; color:yellow; }
a:focus { background-color:white; color:blue; }
a:active { }

</style>
</head>

<body>

<h1>Meine Website</h1>
<h2>Jetzt geht's aber los.</h2>

<div class="Navigation">
<a href="http://www.mactechnews.de">MTN-Website</a><br><br>
<a href="http://de.selfhtml.org/css/index.htm">Alles zu CSS</a><br><br>
<a href="http://www.apple.com.de">Apple</a>
</div>

<div class="Inhalt">
Hallo Leser.
Meine <b>wichtigste</b> Website ist die
<a href="http://www.mactechnews.de"> MTN-Website</a>.</p>

<p> In der Navigation stehen hier lauter Fremd-Links.
Normal wuerde man da jetzt zu den anderen eigenen Seiten
des eigenen Webprojektes verlinken wie Hobbys, Links, Kontakt, Impressum etc.</p>

<p> Mehr Inhalt faellt mir jetzt auch nicht ein.</p>

</div>

</body>
</html>
Naja, falls ihr diese Datei mal im Browser angeschaut habt: am Design könnte man noch etwas arbeiten.

Hier steht alles zu CSS:

Im Teil 4 werde ich wieder konkreter:
(Stefan S.)

Teil 2 (siehe auch Teil 1 )

Bilder
Bilder und Links einfügen geht natürlich genauso wieder mit spitzen Klammern (tags).
<img> Image steht für Bild.
Aber das reicht nicht. Es fehlt zumindest die Angabe woher man das Bild bekommt, bzw hochlädt. Das <img>-tag erhält noch weitere Informationen/ Attribute. "src" steht für source=Quelle gefolgt von der Adresse des Bildes in Anführungszeichen:
<img src="Bild01.jpg">
Das gilt, wenn das Bild01 (in diesem Fall ein .jpg) sich im gleichen Verzeichnis befindet, wie die html-Datei, in der es vorkommt, z.B. beides am Schreibtisch oder beides in gleichem Ordner liegt.

Unterschiedliche Ordner gibt man an mit "/" für Unterverzeichnisse, also z.B. am Schreibtisch hat man das html-Dokument und in einem Schreibtisch-Ordner "Bilder" hat man dann das Bild01:
<img src="Bilder/Bild01.jpg">

Wenn sich jedoch andersrum das html-Dokument in einem "tieferen" Verzeichnis befindet (z.B.Schreibtisch/Website) als das Bild (Schreibtisch), muß man zuerst "zurück"-adressieren mit "../" also:
<img src="../Bild01.jpg"> oder falls das Bild01 im Ordner "Bilder"liegt:
<img src="../Bilder/Bild01.jpg">

Wenn sich das Bild ganz woanders befindet, also auf einem anderen Server im Internet, dann brauchen wir die Internet-Adresse (http://www....) wie z.B.:
<img src="http://www.mactechnews.de/data/picture/root/site_logo.jpg"> oder
<img src="http://www.spiegel.de/static/sys/v8/headlines/spiegelonline.gif">

So, Bilder sind also erstmal im Kasten - zumindest rudimentär.

Links/Verweise werden mit <a> gesetzt und mit </a> geschlossen. A wie Anker. Dazwischen steht der Text , den man anklicken kann:
<a>Verweistext</a>
und in die spitzen Klammern zum <a> mit dazu kommt wieder die Adresse rein, mit "href" (Referenz) also so:
<a href="http://www.mactechnews.de"> meine Lieblings-Website</a>
Statt diesem Verweistext kann man aber auch ein ganzes Bild anklickbar machen, indem man das <img>-tag anstelle des Textes setzt:
<a href="http://www.mactechnews.de">
<img src="http://www.mactechnews.de/data/picture/root/site_logo.jpg"
</a>
Wie man sieht, haben manche tags noch mehr Informationen eingebaut, manche sind notwendig andere nicht. Welche tags bzw. html-Elemente welche "Attribute" haben können/müssen es gibt steht hier: jeweils bei den einzelnen Elementen unter "Attribute".

Wie man auch dort sieht gibt es viele weitere Elemente zu erkunden: Listeneinträge, Formulare etc. Sehr wichtig war vor allem und ist immer noch die Tabelle . Denn mit dieser kann man mehrspaltig gestalten. Aber die Gestaltung ist nun wirklich ein weiteres, eigenes Thema.

Umlaute etc.
Und beinahe hätte ich es vergessen: Un-amerikanische Buchstaben müssen extra codiert werden:
Solche Spezial-Codes fangen mit & an und enden mit ;
z.B. das Ü, also U-Umlaut: & U u m l ;
oder Eszett: & s z l i g ; (lig bedeutet wohl Ligatur o.ä.)
weitere: & e u r o ; & c o p y ; & c l u b s ; ... &euro; &copy; &clubs; sind hier zu finden: Achtung bitte jeweils die Leerzeichen rauslöschen!


Und hier der html-code zum Analysieren und Ausprobieren, Spaß haben (mit Tabelle! table):

<html>
<head>
<title>Meine erste Website</title>
</head>

<body bgcolor="yellow">

<h1>Es kann losgehen</h1>
Hallo Leser.
Meine <b>wichtigste</b> Website ist die Mactechnews.<br><br>
<a href="http://www.mactechnews.de"> Hier</a> ist der Link.<br>
Und da das anklickbare Logo:<br>
<a href="http://www.mactechnews.de">
<img src="http://www.mactechnews.de/data/picture/root/site_logo.jpg"
alt="Verweistext"></a>
<br><br>
Und hier noch ne Tabelle:<br>
<table border=2>
<tr><th colspan=3>Tabellen-& U u m l ; berschrift</th></tr>

<tr><td>Zelle 1 </td><td>und eine 2<br>
wobei <i>tr</i> das Ende einer Tabellenzeile einl& a u m l ;utet</td>
<td>Zelle 3 in Zeile 1</td></tr>

<tr><td>und man sollte immer gleichviele einzelne Zellen in jeder Zeile haben</td>
<td colspan=2>es sei denn, man verbindet welche mit <i>colspan</i>
</td></tr>
</table>

</body>
</html>

Soweit mal Teil 2. Soll ja keiner erschlagen werden. Teil 3

(Stefan S.)

Deine erste Website
... geht ganz einfach.

Websites, also Dateien/Dokumente, die in Webbrowsern dargestellt werden sollen, sind html-Dateien. Ein simples <html> in einen Texteditor eingeben und als website.htm abgespeichert, ist bereits ein html-Dokument, aber noch kein sinnvolles.

Da soll ja was drinstehen, was angezeigt werden soll. z.B.: "Hallo MTN-Leser".
Jetzt muß man noch wissen, dass die Befehle und Darstellungshinweise für die Maschine in spitze Klammern zu schreiben sind und man der Maschine sagen muss, wo das Ende des jeweiligen Befehls-Bereiches ist: das wird mit einem Schrägstrich angezeigt: </html> markiert also das Ende einer html-Datei.

Und wie bei den meisten anderen Dateien auch, kriegt die Datei einen Kopfbereich für diverse Informationen zur Datei selbst ( <head> ) und dann einen Körper ( <body> ), also den eigentlichen Hauptteil in dem dann z.B. "Hallo MTN-Leser" zur Anzeige gebracht werden soll.

Here we go:
<html>
<head>
</head>
<body>
Hallo MTN-Leser
</body>
</html>
Diese Zeilen in einen Texteditor einfügen (in Textedit unbedingt auf Format"in reinen Text umwandeln" gehen), die Datei mit Endung .html (oder nur .htm) abspeichern und diese Datei auf Safari schieben (also. in Safari öffnen)
und schon lächelt uns: Hallo MTN-Leser an.

Das war es dann auch schon, so funktioniert html.

Und das kannst Du also jetzt auch.

Und damit es noch etwas mehr Spaß macht, ein paar weitere Befehle (bzw tags, Einzahl: tag, so heißen die spitzen geklammerten Befehle in Englisch):

• <b> bedeutet "bold" und ist Fettdruck, und der Bereich wird beendet mit </b>
• <i> bedeutet "italics" und ist Schrägdruck </i>
• <br> heißt der Zeilen-Umbruch. Wenn man einen will, muß man ihn eingeben. Dieses tag braucht kein Ende.
• <h1> Ueberschrift (headline 1.Größe) groooß geschrieben </h1>

Und der Website geben wir noch einen Titel, der muß in den <head>-Bereich und wird oben im Browser angezeigt.

Also folgendes jetzt in die Datei kopieren (in reinen Text umwandeln nicht vergessen), mit .htm als Endung speicher und rein in damit in Safari (Reload-Button?):
<html>
<head>
<title>Meine erste Website</title>
</head>
<body>
<h1>Es kann losgehen</h1>
Hallo MTN-Leser. Das ist meine erste Website.
Hallo MTN-Leser. Das ist meine erste Website <br>
Hallo MTN-Leser. Das ist meine <b>erste Website</b><br>
Hallo MTN-Leser.<br><br> Das ist <i>meine erste <b>Website</b></i>
</body>
</html>

Falls Interesse besteht, schreibe ich mehr, z.B. wie man Umlaute hinkriegt und Links, Bilder... Das hier war nur zum Anfixen.

Im Übrigen gibt es ein wunderbare Website zum Thema html, die wohl jeder html-"Programmierer" kennt: selfhtml.org , bzw.: Da stehen alle weiteren Befehle drin.

Und: angefixt? Hier ist der 2.Teil:

(Stefan S.)

Kreatives Wortschöpfungen ist das Finden immer tollerer (von Tollhaus) Bezeichnungen von unschönen Sachverhalten.
Man sollte diese mal sammeln. (Mit freundlicher Unterstützung div.Forumsmitglieder)
Aktuell: zertifizierter Ökostrom
= Atomstrom, verbunden mit einem Zettel, auf dem steht, dass es anderswo, wo es viel Wasserkraft (Norwegen,...) gibt, den Leuten egal ist wie Strom produziert wird.
Atomstrom zu Ökostrom umzuzertifizieren ist ähnlich eklig wie abgelaufenes Fleisch im Supermarkt umzuetikettieren.
Wer mal beim Kreativ-Pool meckern will:

Weitere kreative Wortschöpfungen:
Personal-Optimierung für Massenentlassung
Kollateralschaden steht für Zivilisten umbringen
Rentenanpassung = Rentenkürzung
Park (z.B.:Westpark o.ä.) = Industriegebiet
Seniorenresidenz = Altersheim
shuffle = Ohne Anzeige
Prekariat für Unterschicht
Nullwachstum für Stagnation
Diätenanpassung=Diätenerhöhung
ethnische Säuberung=Völkermord
Kleinvolieren=0,04m3, da fliegt sich nix
Profil schärfen = künstliches Erzeugen von Unterschieden vor Wahlen

Oder kennt noch jemand:
Vorwärtsverteidigung (=Angriffskrieg)
Atomares Gleichgewicht wiederherstellen = Aufrüsten

Neue Kategorie:
Pseudo-Business-(Englisch)-Neusprech:
(im eigtl.Sinn nicht negativ, trotzdem der Versuch der Aufhübschung)

Facility Manager = Hausmeister/-verwalter
Micro-Teaching = Unterricht in Kleingruppen
Logistikunternehmen = Spedition
Logistik-Assistent = Briefträger
Humankapital für Arbeiter
Arbeitnehmer für Arbeiter; eigtl.: Arbeitskraftgeber
Raumkosmetikerin=Putzfrau
Cerealien=Getreidekörner
Direktmarketing=Briefkastenwerbung (-Verstopfung)

wer bietet mehr? (Stefan S.)

Manch einem ist es ihm egal, wenn im Kaufhaus, bei Google und im Innenministerium seine Daten, Körpermerkmale, Bewegungs- und sonstigen Profile gesammelt, gerastert und ausgewertet werden. Seine Freiheit, so meint er, würde ja nicht darunter leiden, habe er doch nichts zu verbergen.
Da hat er ja auch recht: wer immer tut, was man ihm sagt, dass er tun solle...

Doch manche dieser "Manch-Einer" werden gar plötzlich zum großen Freiheitskämpfer:

Wenn Sie ihrem Geschwindigkeitsdrang nicht mehr auf öffentlichen Autobahnen frönen dürfen sollen.
Wenn sie sich - wie Arbeitssklaven in Metropolis - in eine lange Reihe gleichförmig 130km/h dahindämmernder Fortbewegungsknechte einreihen sollen. Gerne wähnen sie sich doch als wichtige, eilige Mitglieder dieser Gesellschaft, ja, sogar als Wichtigere, Eiligere.
Aber: Wäre es nicht ein tolles Gefühl von Freiheit weniger im Stau zu stehen?
Und, so argumentieren sie, es gäbe sowieso kaum noch geschwindigkeitsunbeschränkte Strecken mehr.
Für die paar restlichen Kilometer so ein Aufstand?

Und manche wiederum bellen laut, wenn sie ihren Tabakdunst in Kneipenräumen Anderen nicht mehr zur gefälligen passiven Luftreinigung vorsetzen dürfen.
Dabei ist das Nachgeben einer Sucht doch ein gänzlich unfreies Verhalten.

Unterstützt von Lobbyorganisationen der Tabak- Auto- und Särgehersteller, wähnen diese Freiheitskämpfer das Ende aller Freiheit heraufziehen.
Seltsame Freiheitskämpfer sind das hier in Deutschland, einem Land in dem Farbe, Form und Höhe von Gartenzäunen geregelt sind.

Fußnote: (Stefan S.)

Mikrofone, Gitarren, Synthesizer an iMac, iPod ans Mischpult, Videorekorder an Stereoanlage, etc, ...

1. Vorbemerkungen
2. Kabel
3. Stecker und Buchsen
4. Lötverbindung
5. Einzelne Aufgabenstellungen

1. Vorbemerkungen

Kann was passieren?
Finger verbrennen, Hose mit Lötzinn versauen, Teppichboden versengen...

Und:
Wenn die Adapter Kurzschlüsse haben oder bewirken, oder diese starke Ausgänge mit schwachen Eingängen verbinden, können die Geräte oder das Gehör (Boxenausgang an Ohrhörer) schaden nehmen.

Im Prinzip gibt es 4 verschiedene Spannungslevel, von gering bis hoch (dahinter die üblicherweise dazu verwendeten Stecker):
- Mikrofonlevel (XLR, Klinke)
- Line-Level (Cinch)
- Kopfhörer (Klinke), liegt zwischen Line- und Boxen-Level
- Boxenlevel (Hifi: Klemmverbindung, Bananenstecker; Saal-Beschallung jetzt: Speakon, früher Klinke, XLR!)

XLR- und Klinke-Adapter sind im also mit Bedacht zu verwenden, da sie in verschiedenen Spannungsbereichen verwendet werden.

Und: zwar schrieb ich dies nach bestem Wissen und mit reinem Herzen, aber Fehler könnten ja trotzdem drin sein, daher keine Haftungsübernahme bei Schäden

Viel Glück beim Ausprobieren!

2. Kabel
Audiokabel haben eine oder zwei (Stereo, Symmetrierung s.u.) Signalleitungen und eine Masseleitung.

Außer bei Lautsprecher- oder Kopfhörerkabeln ist die Masseleitung gewöhnlich als Abschirmung der Signalleitung ausgeführt. Sie ummantelt als Geflecht aus dünnen Drähtchen - möglichst komplett - die Signalleitung.
Sie schirmt so - wie ein faradayscher Käfig - Störsignale von der Signalleitung ab. Dies verringert die Störgeräusche.
(Bei billigen Kabeln ist die Abschirmung ziemlich durchlässig, z.B weil nicht als Geflecht ausgeführt.)

Mikrofonkabel sind im professionellen Bereich "symmetrisch" ausgeführt (daher dort keine Klinkenstecker), d.h. diese haben zwei (abgeschirmte) Signalleitungen. Durch einen "Trick" wird dadurch eine gute Störungsunempfindlichkeit erreicht: An der zweiten Leitung liegt das Signal "umgekehrt", also negativ , d.h umgepolt an. Wenn nun - insbesondere bei langen Kabelwegen - Störsignale auf das Kabel einwirken, so wirken diese in gleicher Weise auf beide Leitungen. Im Mikrofonverstärker wird aber das zweite Signal wieder umgekehrt, also auch das darüber geführte Störsignal und zum ersten Signalweg addiert. Darüber wird das Signal verdoppelt, die Störsignale jedoch löschen sich gegenseitig aus. (30m Leitungslänge für Mikrofone sind dann kein Problem!)

zum Spezialfall Mikrofonkabeln von Klinke auf XLR siehe 3.c)bb) und 5.

3. Stecker
(Die Pinnummern sind meist auf den Steckern abzulesen)
(Masse ist nicht automatisch die Gehäusemasse)

a) Cinch (bzw. Chinch) siehe
Seit Mitte der 70er Jahre die Hifi-Audioverbindung.
Anschluß:
Der Stift führt das Signal und die Röhre ringsrum (Abschirmung!) die Masse.
Mikrofone werden damit gewöhnlich nicht verkabelt.

b) Klinkenstecker siehe
Mono oder Stereo,

aa) 6,3mm Durchmesser
Mono: Musikinstrumente, Effektgeräteverkabelungen, einfache Mikros (Karaoke...)
Stereo: Kopfhörer oder Symmetrierte Effektgeräteverkabelungen

6,3mm Stereoklinkenstecker verbinden 2 Signale und 1 Masse und eignen sich daher auch um symmetrierte Signale zu führen.

bb) 3,5mm (Miniklinke)

Mono: (selten)
Stereo: Aus-und Eingänge bei Computern, MP3-Player, Ohrhörer.

cc) Anschluss:
Schaft = Masse
Spitze = Signal
bei Stereoausführung/Symmetrierung der
Zwischenring = 2ter Kanal bzw. 2tes Signal

c) XLR (im Audiobereich 3-polig) siehe

Verwendung:
Mikrofonkabel, Mischpulte an Endstufen, alte Lautsprecherkabel

aa) Ausführung
male/female
male (männlich): sowohl Stecker als auch Einbaubuchsen haben Stifte
female (weiblich): sowohl Stecker als auch Einbaubuchsen haben Löcher

bb) Anschluß:
Bei XLR ist der Signalweg, also die Richtung des Signals mit dem Stecker definiert: Männlichen Steckern führen das Signal heraus und weibliche empfangen das Signal.
Ein "normales" XLR-Kabel hat demnach immer ein männliches und ein weibliches Ende,da ja ein Signal durchgeleitet werden soll, muss es am einen Ende rein und am andeeren wieder raus. Dadurch lässt es sich auch mit gleichartigen Kabeln auf einfache Weise verlängern.
Geräte-Eingänge sind mit weiblichen Buchsen versehen (Mikrofoneingänge beim Mischpult, Signaleingänge an Endstufenverstärkern).
Geräteausgänge hingegen haben männliche Buchsen (Mikrofone und MIschpultausgänge).
Dieses senkt die Gefahr falschen Anschlusses. Und man erkennt die Signalrichtung bereits an den Gerätebuchsen.
In nur wenigen Extremfällen kann ein mal ein Zwischen adapter mit dem gleichen Stecker-"Geschlecht" Sinn machen. Dazu sollte man sich dann schon gut auskennen.

Alte Lautsprecher und damit auch Endstufenausgänge wurden bis in die 90er Jahre noch mit XLR ausgeführt. Somit gibt es neben Mikrofonkabeln auch noch Lautsprecherkabel, die in XLR ausgeführt sind. Da letztere nicht-abgeschirmt sind und nur zwei Pins belegt haben, eignen sie sich nicht als Mikrofonkabel. Andersrum kann man bei niedrigen Pegeln zur Not eine Box mit einem Mikrofonkabel mit Endstufenausgängen verbinden (viel kleinere Leitungsdicke!)

Falls eine moderne Box einen XLR-Buchse hat, wird diese wohl eine aktive Box (also mit eingebautem Verstärker) sein. Ein weiblicher Stecker darf dann nur mit Line-Level-Signal vom Mischpult (und nicht mit einem Endstufenausgang!) versorgt werden. Ein männlicher XLR-Stecker dient dann zur Signalweitergabe an eine andere aktive Box

Pinbelegung - Mikrofonkabel:
1 = Masse
2 = Signal 1 ("hot", Bez. dient nur zur Unterscheidung)
3 = Signal 2 ("cold")

soweit die üblichen Mikrofonkabel.
Problematisch wird es, wenn der Mikrofoneingang (z.B. eines Mischverstärkers aus den 70ern oder einer Karaoke- oder Hifikomponente) nur über Monoklinke-Eingänge verfügt. Dann ist ein Signal "zuviel". Man lässt dann nicht einfach ein Signal weg, sondern führt ein Signal (cold) mit der Masse zusammen (Pin 1 und Pin 3) und führt dann die neu-verbundene Masse auf die Klinkensteckermasse. Dadurch verliert das Kabel seine Symmetrierung und die Störgeräusche werden stärker.
Diese Zusammenführungen sollte man nur bei einem XLRKlinke-Kabel vornehmen, nicht aber bei Mikrofonverlängerungskabeln XLRXLR, denn sonst kommt es bei der Verwendung eines Mischpultes mit sog."Phantompower" zu Kurzschlüssen. (Phantompower ist eine Stromversorgungsmögllichkeit von Mikrofonen, die einer Betriebsspannung bedürfen)

Pinbelegung - alte Lautsprecher:
Vorsicht wegen Verwechslungsgefahr mit Mikrofonkabeln!
XLRXLR
1 Masse
2 Signal
3 nicht belegen

XLRKlinke (Boxenkabel)
Klinkenstecker im Bereich Lautsprecher ist Mist wegen der Kurzschlußgefahr, sowohl beim Ein- und Ausstecken als auch beim Betrieb mit modernen=kräftigen Endstufen (hohe Spannung Funken könnten überspringen). Wenn's sein muß, dann immer erst Ver- und Entkabeln, wenn Verstärker ausgeschaltet sind. Ansonsten Pinbelegung wie oben: XLR-1 auf Klinke-Masse(Schaft) und Signal XLR-2 auf Klinkenspitze.

Kann auch sein, dass es nicht funktioniert, habe gehört, dass diese Pinbelegung nicht überall Standard war. Viel Glück

d) Speakon siehe
Nur für Lautsprecher in der Beschallung
werden geschraubt
1+ auf XLR-Pin2 (Neutrik-Adapter gehen jedoch auf XLR2 und 3, besser eine Pinbelegung zuwenig, bevor Kurzschluß)
1- auf XLR-Pin1
2+ nur bei Bi-Amping etc.
2- nur bei Bi-Amping etc.

e) Sonstige: DIN, Scart, Tuchel
aa) DIN-Stecker: siehe
3 (Mono) oder 5 (stereo) im Halbkreis angeordnete Pins haben die Stecker zum Anschluß der verschiedenen Hifi-Komponenten untereinander.
Pinbelegung:
2 Masse
1 Record links (bzw.mono)
4 Record rechts
3 Play links (momo)
5 Play rechts

(Bei Midikabeln werden nur die Pins 4 und 5 und evtl. als Masse Pin 2 verwendet)

5 würfelförmig angeordnete Pins haben hingegen die alten Kopfhöreranschlüsse

bb) Scartstecker (zum Anschluß von Videorekordern und Fernsehgeräten) siehe
Auch diese Stecker führen das (Stereo-) Audiosignal in Linelevel-Stärke an einzelnen Pins und können von daher gut für Adapter verwendet werden.
1 Audio Out r
2 Audio In l
3 Audio Out l
6 Audio In r

cc) Tuchelstecker, siehe
ähnlich wie DIN- und XLR-Stecker, bei Mikrofonen bis in die 70erJahre verwendet.

4. Lötverbindung
Die meisten Verbindungen werden gelötet.
(Speakon-Boxenkabel und Hifi-Boxen werden geschraubt bzw. geklemmt)

Der Lötkolben bringt das Lötzinn zum Schmelzen. Dieses umschließt die metallischen Kabelenden und die Steckerpins und bildet im erkalteten Zustand eine dauerhafte, gut leitende Verbindung zwischen Kabel und Stecker.

Vorgehensweise:

beim Kabel:

• Kabel Abisolieren

• Drähtchen Verdrillen (die Abschirmungsdrähtchen auf eine Seite dabei ziehen)

• Verzinnen der verdrillten Leitungen (noch nicht mit den anderen zu verlötenden Pins oder Kabelenden zusammenbringen)

beim Stecker:

• Stecker Zerlegen

• Verzinnen der Steckerlötpins

• Steckerhülse auf Kabel aufschieben

• Verzinnte Enden der Kabel und Stecker parallel, überdeckend aufeinanderlegen und Lötkolben daranhalten bis sich das Zinn von Stecker und Kabel verschmilzt

• Stecker zusammenstecken/-schrauben

und dann:

• Das alles am anderen Adapterende wiederholen

und zum Schluß:

• Verbindungen prüfen auf Durchgang und (keinen) Kurzschluss (wichtig!)

Anmerkung:
Gerade kleine Stecker wie Stereominiklinkenstecker sind eine echte Herausforderung, die man sich aber sparen kann in dem man nicht mehr verwendete Kabel z.B. alte Ohrenstöpselkabel abschneidet und diese verwendet. Bei solchen Kabeln liegen Masse und Signal oft einfach nebeneinander. Das geht nur weil sie von einer Schutzschicht überzogen sind, die man aber entweder abkratzen oder mit dem Feuerzeug abschmelzen kann.

5. Einzelne Aufgabenstellungen

a) Mikrofonkabeln von XLR auf Klinke
Mikrofonanschluß ist männliche XLR-Buchse
Für's Mikrokabel (oder Adapter) braucht man dann weiblichen XLR-Stecker
Pinbelegung bei Kabel mit 1 X Signal und 1 X Masse:
Masse auf 1+3
Signal auf 2
und auf der Seite des Klinkensteckers:
Masseleitung auf Schaft
Signal auf Klinkenspitze

b) Mono auf Stereo?
geht, außer bei Lautsprecherboxen, wenn deren Impedanzen zusammengerechnet, äh, besser eine Tabelle:
Verstärkerausgang "schafft"
8 Ohm 1X 8 Ohm-Box oder 2 X 16 Ohm Box
4 Ohm 1 X 4-Ohm-Box oder 2 X 8 Ohm-Box oder 4 X 16-Ohm-Box
Ansonsten z.B. ein Monosignal aufteilen auf einen Stereoeingang müsste funktioniern
Tip: Vorsichtig mal ausprobieren.

c) Stereo (oder 2 einzelne Kanäle) auf Mono?
Geht nur bedingt, kann sein, dass man einen hohen Leistungsabfall hat, da beide Ausgänge sich gegenseitig beeinflussen.
Tip: Vorsichtig mal ausprobieren.
Die zwei Stereo-Signalleitungen sollte man nicht bei Lautsprecherausgängen zusammenlegen.

d) Mikrofon an iMac oder andere Computer-Stereoklinken-Audioeingänge.
Meist wird das Mikrofonsignal zu schwach sein, da die Eingänge meist Line-Level benötigen.
Chancen hat man bei batteriebetriebenen Mikros und bei Mikros mit hohem Outputlevel.
So funktioniert mein Beyerdynamic TG-X80 gerade eben so.
Hat das Mikro XLR-Ausgang, dann:
XLR-Pin 1 auf Stereominiklinkenmasse=Schaft
XLR-Pin 2 auf Stereominiklinkenspitze oder-Zwischenring

Hat das Mikro einen fest angehängtes Klinkenkabel, dann benötigt man eine 6,3mm Monoklinkenbuchse um auf Stereominiklinkenstecker zu kommen.
Klinkenmasse auf Stereominiklinkenmasse und
Klinkenspitze auf Stereominiklinkenspitze (oder auch Zwischenring)

e) Gitarren, Synthesizer an iMac oder andere Computer-Stereoklinken-Audioeingänge.
passive Gitarren-Tonabnehmer liefern evtl. ein zu schwaches oder zu dünnes Signal
ausprobieren!
Klinkenmasse auf Stereominiklinkenmasse und
Klinkenspitze auf Stereominiklinkenspitze (oder auch Zwischenring)

f) Synthesizer an iMac oder andere Computer-Stereoklinken-Audioeingänge.
geht gut!
Klinkenmassen beider Monoklinkenstecker zusammenführen und mit Stereominiklinkenmasse verbinden
Klinkenspitze auf Stereominiklinkenspitze
Klinken-Zwischenring auf Stereominiklinken-Zwischenring

g) weitere einfach ausprobieren...

iPod ans Mischpult (entweder an Monoklinkeneingänge oder an Cinch-Eingänge für "Tape"
Videorekorder an Stereoanlage (Pinbelegung SCART-Stecker siehe oben)
etc, ...


(Stefan S.)