Programmierung Virtueller Textmarker

Transcription

Dr. Web Magazin / 08 2004
Programmierung
Virtueller Textmarker
Bei langen Texten freut sich der Leser, wenn er ohne Umschweife zu Kernaussagen geführt wird. Das kann man mit Fettschrift machen oder subtiler mit einem
virtuellen Textmarker. CSS und Javascript in Personalunion machen's möglich.
Zwei Klassen benötigen wir. Auf Knopfdruck tauscht Javascript mit deren Hilfe die
Hintergrundfarbe aus. Das wirkt so, als hätte der Webdesigner die relevanten Textpassagen mit einem Textmarker angestrichen. Die Farbe Gelb eignet sich am besten dazu.
Der Quelltext:
<head>
<script language="JavaScript" type="text/JavaScript">
var aktiviert = -1;
function changehervorheben() {
if (aktiviert == 1){document.getElementById("text").className =
'nichthervorheben';
}else{document.getElementById("text").className =
'jetzthervorheben';}
aktiviert *= -1;
}
</script><style>
.nichthervorheben .hervorheben {background:#FFFFFF;}
.jetzthervorheben .hervorheben {background:#FFFF00;}
</style></head>
<body bgcolor="#F4F4F4">
<a href="#" onclick="changehervorheben()"><img src="wichtigen-textzeigen.gif" border="0"></a><br><br>
<div class="nichthervorheben" id="text" style="width:464px;fontfamily:arial;">
<p>Lorem dolor amet, consectetuer adipiscing elit, sed diam <span
class="hervorheben">tincidunt ut laoreet</span> dolore magna erat volutpat. Ut, quis nostrud exerci suscipit lobortis ut consequat.</p><p>Duis eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, feugiat facilisis <span class="hervorheben">at
qui delenit</span> nulla facilisi. Lorem, elit.</p></div></body>
Eine wichtige Textpassage wird ganz einfach mit dem Span-Befehl gekennzeichnet:
<span class="hervorheben">besonders wichtiger Text</span>
Das gilt für beliebig viele Textpassagen, doch man es aber übertreibt, ist der Nutzen
schnell wieder dahin.
Programmierung
Tabellen mit Übersicht
Seit HTML 4 können Tabellen zur besseren Übersicht in Kopf, Fuß und Hauptbereich unterteilt werden. Da jeder Bereich eigene Attribute bekommen kann,
lassen sich schöne Effekte erzielen. Zum Beispiel kann Mozilla durch eine lange
Liste von Tabellenzeilen scrollen, ohne das die Kopf-Zeile aus dem Blickfeld gelangt.
Dieser Effekt eignet sich besonders gut für umfangreiche Listen, Preisangaben oder
Aufzählungen. Ist der Besucher nämlich gar nicht an der ganzen Tabelle interessiert,
muss er auch nicht erst bis zu deren Ende scrollen, um weiterlesen zu können.
Live-Demo in neuem Fenster
Falsch angezeigt im Opera
...und ordentlich im Mozilla
Der horizontale Scrollbalken lässt sich nicht ausblenden, wird statt des allgemeinen
Overflow jeder Balken einzeln angesprochen, bleibt die Tabelle groß:
overflow-x:scroll;overflow-y:hidden;
Die Tabelle wird zunächst in die Bereiche <thead>, <tbody> und <tfoot> aufgeteilt.
Jeder Teil lässt sich jetzt mit Stylesheets formatieren, zusätzlich zu den Einstellungen
in den Zeilen und Zellen., bei mehr Inhalt wird ein Scrollbalken angezeigt.
Programmierung
Der Tabellen-Body bekommt eine Höhe von 100 Pixel zugewiesen, bei mehr Inhalt
wird ein Scrollbalken angezeigt.
<table style="width: 360px;font-family:arial;font-size:12px;">
<thead style="background-color:#e1e1e1;">
<tr>
<th>Jahr</th>
<th>Einwohner</th>
</tr>
</thead>
<tbody style="overflow:scroll;height:100px;">
<tr><td>1724</td><td>2.540</td></tr>
<tr><td>1726</td><td>2.560</td></tr>
<tr><td>1728</td><td>2.588</td></tr>
<tr><td>1730</td><td>2.660</td></tr>
<tr><td>1732</td><td>3.340</td></tr>
<tr><td>1734</td><td>4.577</td></tr>
<tr><td>1736</td><td>5.630</td></tr>
<tr><td>1738</td><td>5.980</td></tr>
<tr><td>1740</td><td>7.320</td></tr>
<tr><td>1742</td><td>9.230</td></tr>
</tbody>
<tfoot style="background-color:#e1e1e1;">
<tr>
<td colspan="2">Die Tabelle zeigt die Entwicklung der Stadt X von
1724 - 1742.</td>
</tr>
</tfoot>
</table>
Leider ist der Mozilla
Gerade für Nutzer des
zieht die Höhenangabe
lich zur Riesentabellen
Scrollfunktion fehlt.
bislang der einzige Browser, der diese Technik unterstützt.
Internet Explorers ist eine Browserweiche ratsam, der IE befälschlicherweise noch auf jede einzelne Zeile, was unweigerführt. Safari und Opera zeigen alles ordentlich an, einzig die
Webmaster
Schneller Feierabend mit Templates
Webdesign ist out, fertige Design-Templates sollen die Zukunft des Internet da rstellen, versprechen die Template-Anbieter. Der Webdesigner kann sich damit
Zeit und Arbeit sparen, der Kunde sich manchmal aber auch den Webdesigner.
Problematisch wird es, wenn der Kunde ein Template selbst benutzen will, um sich
den Designer zu sparen. Templates sind im Prinzip fertige Seiten oder ganze Webs ites, deren Design kann zwar geändert werden, muss aber nicht. So reicht es schon,
wenn der Kunde die Texte auswechselt – das kann selbst die Demo-Version von
Frontpage. Schwierig wird es, wenn das Template nicht perfekt passt, der gewählte
Grünton einen Tick zu grell ist oder die Schrift nicht zum Logo passen will.
Hier kommt dann doch wieder der Designer ins Spiel, denn neben einigen Fachkenntnissen sollte es auch an Programmen wie Paint Shop Pro oder Photoshop, HomeSite oder Dreamweaver nicht mangeln. Damit kann der Webdesigner die fertigen
Vorlagen dann nach Belieben editieren und an das aktuelle Projekt anpassen.
Der Kauf einer Template-Datei ist zwar billiger als der komplette Neuentwurf, wirklich neue Designideen entstehen so allerdings nicht. Den meisten Vorlagen haftet dann
auch etwas der "von der Stange" Charakter an. Gerade wenn das Design nicht exklusiv
erworben wird, ist die Gefahr groß, dass die Konkurrenz demnächst mit dem gleichen
Design im Netz steht.
Business-Template vom Templatemonster
Anbieter für Templates gibt es wie Sand am Meer, meist unterscheiden nur Preis und
Lieferumfang über die Qualität. Der wohl bekannteste Anbieter ist das amerikanische
Templatemonster. Die angebotenen Templates sind komplett fertige Webseiten, die
sowohl als HTML-Dateien und fertigen Flash-Filmen vorliegen, aber auch die Quelldateien im Photoshop und .fla Flash-Format enthalten.
Webmaster
auch speziellere Designvarianten sind möglich
Von den meisten Seiten existiert neben der Version mit kleinen Flash-Filmchen auch
eine weitere, Flash- freie Webseite. Diese ist mit CSS gestaltet. Deren Preis richtet sich
danach, ob die Seite exklusiv genutzt werden soll, oder ob andere Seiten das gleiche
Design nutzen dürfen. Für exklusive Seiten müssen bis zu 2000,- US$ gezahlt werden,
Standard-Templates gibt es ab 50,- US$. Zum Ändern der Vorlagen werden die Programme Adobe Photoshop ab Version 6 und Flash MX vorausgesetzt.
Elmer Temps hat als Template-Discounter die Riesenauswahl von 10.000 fertigen Site-Vorlagen im Programm, die zusammen nur 99,95 US$ kosten. Obwohl sich die einzeln Vorlagen oft sehr ähneln, sind sie trotzdem alle eigenständig und in der Regel von
ordentlicher Qualität.
Grosse Auswahl, kleiner Preis
Webmaster
Einen Haken hat das Angebot allerdings: Von den 10.000 fertigen Vorlagen besteht
der Hauptteil aus den fertigen HTML- und Grafikdaten. Es gibt zwar auch komplette
Photoshop-Vorlagen, davon aber nur 1500. Die 4000 Windows- und Apple-Schriften,
Banner- und Flash-Vorlagen machen das Angebot aber zusätzlich interessant, schließlich könnte für jeden neuen Auftrag etwas Passendes dabei sein.
Interessant ist, dass man sich mit der Zahlung der 99,95 US$ nic ht nur einmal aus der
Sammlung bedienen darf, sondern das Recht auf "Lifetime Unlimited Downloads "
erhält, sich also immer wieder und für verschiedene Projekte bedienen darf.
Wer zum Einkaufen nicht gleich nach Amerika segeln möchte, findet auch in Deutschland Anbieter, die die Vorlagen der großen amerikanischen Anbieter mit Euro-Preisen
vertreiben. Die Firma nexMedia e.motion hat, zwar in weniger übersichtlicher Auflistung, die Vorlagen von Templatemonster im Programm.
Ebenfalls viel Auswahl für wenig Geld
Besserdich New Media (http://www.homepage- grafiken.de/) bietet ebenfalls zahlreiche fertige Templates, unterteilt nach Vorlagen für Flash-Filme, komplette Webseiten,
Homepage-Buttons oder Photoshop-Vorlagen. Für 58,- EUR können Webmaster beliebig oft und beliebig viele Vorlagen herunterladen. Für 79,- gibt es neben dem
Download-Zugang alle bisherigen Vorlagen zusätzlich zum Archivieren auf CD-ROM.
Dr. Web Kunden finden zum Kennen le rnen einige dieser Templates in der Dr. Web
Webmaster-Rubrik.
Webmaster
Alles an Bord mit PHPNuke
Als eines der bekannstesten und am häufigsten benutzten Systeme glänzt das kostenlose PHPNuke mit Funktionsvielfalt und vergleichsweise einfacher Installation.
Zunächst bietet PHPNuke die üblichen CMS Funktionen. Artikel lassen sich erstellen, editieren und veröffentlichen. Aber auch Umfrage n können in die Welt gesetzt,
Statistiken erstellt oder Bereiche nur prominenten Besuchern zugänglich machen
werden. Wem das nicht ausreicht, der findet weitere teils freie, teils kostenpflichtige
Erweiterung im Web – oder kann selbst Hand anlegen.
Text und Umfragen, schnell installiert und geändert
Bei der Gestaltung hat der Webmaster weniger Freiheiten im Vergleich zu Systemen
wie Typo3. Immerhin gibt es zahlreiche so genannte Themes, die sich rasch in Funktion setzen lassen. Ein Theme kontrolliert Aussehen und Layout komplett. Durch einen
Wechsel lässt sich jede Website ruckzuck komplett verändern. Eine große Auswahl
fertiger Theme-Dateien zum Download bietet die Site Nuke-Themes an.
Der Message-Editor ist spärlich ausgefallen, ohne HTML-Kenntnisse kommt man
hier nicht weit. So aber hat der Webmaster die Kontrolle über den Quelltext, nicht
valider Code wie durch den WYSIWYG-Modus des IE kann dann höchstens durch
schlechte Theme-Templates verursacht werden.
Webmaster
ohne HTML geht es nicht
Schnelle Übersicht für den Admin
Unter jedem Artikel sieht der eingeloggte Administrator, wer einen Artikel lesen darf,
ob er zeitlich begrenzt lesbar ist erkennt und den Link zum Editor.
PHPNuke ist nicht nur durch seine einfache Bedienung, sondern auch durch mangelnde Sicherheit bekannt geworden. Bei kleineren Projekten ist die Gefahr eines Angriffs
zwar gering, trotzdem empfiehlt es sich, die neueste Version mit aktuellen Updates zu
nutzen – sicher ist sicher. Je bekannter nämlich ein System ist, desto mehr potenzielle
Angreifer finden sich, die versuchen Sicherheitslücken auszunutzen.
Trotzdem wird von vielen immer noch Version 5.5 empfohlen (aktuell ist Version 7).
Sie läuft stabil und schneller als aktuellere Versionen, auch sind die Sicherheitslücken
dort bereits bekannt und in der Regel gestopft. Wer dem Besucher das genutzte CMS
nicht verraten mag, kann in den Einstellungen sogar die Copyright-Meldung deaktivieren, bei neueren Versionen ist das nur gegen Lizenz-Gebühr erlaubt. Dagegen
spricht aber die Kompatibilität zu Erweiterungen, die mit älteren Versionen nicht mehr
alle funktionieren. Vor dem Download sollte man sich also Gedanken machen, welche
Version besser geeignet ist.
Webmaster
Admin Interface
Wer weiss, wie eine Datenbank über die Shell oder PHPMyAdmin eingerichtet wird,
braucht vor der Installation von PHPNuke keine Angst zu haben. Die Datenbank wird
danach automatisch eingerichtet, alle weiteren Einstellungen werden im Browser
über leicht verständliche Icons aktiviert. Andere Systeme haben zwar besser zu nutzende Editoren, die vielen zusätzlichen Funktionen machen PHPNuke aber durchaus
interessant. PHPNuke (http://phpnuke.org/) wird deshalb oft für Community-ähnliche
Gebilde genutzt. Man hat schließlich alles an Bord, was man braucht.
Icons für mehrere IE-Versionen
Ein nützliche Erfindung ist die Kennzeichung der verschiedenen Versionen des Browsers des Schreckens. Sofern man jedenfalls mehrere davon parallel laufen hat, was
Webdesigner notgedrungen häufiger unternehmen.
http://blech.home.pages.at/iepara.html
Webmaster
404 – Error not found
Noch immer mangelt es zahlreichen Webpräsenzen an einem sinnvollen Fehlermanagement. Wenn veraltete Suchmaschinen-Indizes auf längst gelöschte Dateien verweisen oder Hyperlinks ins Nichts führen, verlässt man sich auf Provider
und Serversoftware. Wie gute 404 Seiten aussehen können, zeigen einige Beispiele.
Der Fehlercode 404 gehört wohl zu den häufigsten im gesamten WWW. Bei größeren
Projekten kann es schon einmal vorkommen, dass die eine oder andere Seite beim
Upload liegen bleibt oder gelöscht wurde. Jeder Verweis darauf erzeugt beim Besucher dann diesen Fehler. Wie die Fehlermeldungen auch gleich dem Webmaster Bescheid geben können, lesen Sie unter Fehlerseiten, die wirklich weiterhelfen. Dies
spart zumindest das mühsame Suchen in Log-Dateien.
Fehlerseiten sind auch kein Geheimnis, sie bestehen aus ganz normalen HTMLDateien. Über die Konfigurations-Datei .htaccess im obersten Ordner der Webpräsenz
wird der Webserver angewiesen, bei Fehlern diese Seite zu zeigen. Eine ausführliche
Anleitung hat Dr. Web unter Abfangjäger für Fehler zusammengestellt.
404 Fehler ohne Hilfe für Surfer
Doch was gehört hinein in die Fehlerseiten? Da gibt es mehrere Möglichkeiten. Manche leiten den verirrten Besucher klammheimlich zur Startseite oder zur internen
Suchfunktion weiter. Wenn andere Webmaster dann ihre Links durchgehen, finden Sie
den Fehler oft gar nicht.
Eine kurze Fehlermeldung mit Link zu Startseite und Suchfunktion ist da hilfreicher. Eine zweite Möglichkeit: Die Startseite wird geladen, erkennt aber automatisch,
dass ein 404-Fehler erzeugt wurde. Statt des normalen Logos wird zusätzlich eine
Fehlermeldung angezeigt, die restlichen Inhalte bleiben aber gleich.
Der Code in der .htaccess könnte dann zum Beispiel so aussehen:
ErrorDocument 404 http://www.domain.de/startseite.php?error=404
Die Startseite enthält dann zusätzlich diesen Code:
<?php
if($_GET['error'] != "") { echo '404 Fehler aufgetreten!'; }
?>
Webmaster
Wer einen Webshop betreibt, könnte die Fehlerseite auch zu Werbezwecken nutzen.
Amazon, wer sonst, macht es exemplarisch vor. Unter der kurzen Fehlermeldung werden aktuellen Bestseller gelistet, gleich bestellbar natürlich.
Geschickt geworben bei Amazon.com
...nur in Deutschland weiss das keiner
Planetvegan informiert witzig über den Fehler und bietet neben dem Link zur Startseite
auch eine Kontakt-Möglichkeit an, damit auch keine Frage ungeklärt bleibt.
Webmaster
mooooved pages...
Hoogspanning gibt sich auffällig, wenn eine gewünschte Seite nicht existiert. Statt
dem Link zur Startseite wird hier mittels Javascript der Link zur verweisenden Seite
angeboten.
Fehler kaum zu übersehen
Wer noch mehr Inspirationen zur eigenen 404-Fehlermeldung braucht, findet diese
zum Beispiel in der 404lounge (http://404lounge.net/). Die 529 gesammelten Fehlermeldungen sind sogar teilweise kommentiert.
Webmaster
Popup-Blocker mit Flash austricksen
Stark zunehmende Popup-Werbung hat dazu geführt, dass immer mehr Browser
mittels Popup-Blocker solche Fenster unterdrücken. Dies gilt natürlich auch für
wichtige Popups, die Besuchern weiterhelfen können. Mit der Hilfe von Flash
lassen sich die Blocker allerdings austricksen.
Zum Erstellen reicht eine Demo-Version der Flash-Software, solange diese das Speichern beherrscht und einen Film exportieren kann. Kenntnisse von Flash und Actio nscript werden nicht benötigt.
Beim Starten von Flash wählt die Software automatisch eine für dieses Vorhaben zu
große Bühne. Unter Modifizieren / Dokument lässt sich diese brauchbar anpassen. 1x1
Pixel reichen für unser Vorhaben vollkommen aus, die Hintergrundfarbe sollte passend
zur Webseite gewählt werden.
Ändern der Film- Eigenschaften
Das erste Schlüsselbild ist in der Zeitleiste schon vorgegeben, mehr wird auch nicht
benötigt. Mit der rechten Maustaste wird das Aktionen-Menü aufgerufen, um das Javascript hinzuzufügen.
Zeitleiste mit Aktion
Webmaster
Expertenmodus für Befehlseingabe
Nach Änderung der Ansichts-Einstellungen auf den „Expertenmodus“ lassen sich die
Befehle auch direkt von Hand eingeben - das Suchen in den Befehlsmenüs entfällt.
Ein erster Test der Javascript-Funktion besteht darin, eine typische Meldung hervorzurufen:
getURL("javascript:alert('test');");
Javascript eingebaut
Nach dem Testen des Films unter Steuerung / Film testen zeigt uns der Browser die
Meldung an. Im nächsten Schritt wird statt der langweiligen Fehlermeldung jetzt ein
Popup-Fenster geöffnet, das bisher weder von dem Popup-Blocker der Google Toolbar noch Mozilla oder Apples Safari Browser verhindert wird. Lediglich der neue Internet Explorer SP2 lässt sich auf diese Weise nicht austricksen.
Der einfache Flash-Actionscript Code hierfür:
getURL("javascript:window.open
('http://www.domain.de/popup.html',
'popup', 'scrollbars=0,toolbar=0, location=0,directories=0,
status=0,resizable=0,width=300,height=200');");
Nun kann der Film über das Datei-Menü als .swf Film exportiert werden, oder über die
Veröffentlichen-Funktion gleich in eine HTML-Datei eingebaut werden - dazu muss
der Film allerdings einmal gespeichert werden. Die Dimensionen des Fensters lassen
sich bei „width=300“ und „height=200“ beliebig anpassen.
Diese Methode hat zwei kleine Nachteile: Um die Größe des Fensters zu ändern oder
die URL zu wechseln, muss die Einstellung immer wieder in dem Flashfilm vorgenommen werden. Außerdem gibt der Browser die Meldung [object] in einer leeren
Seite nach Öffnen des Fensters aus.
Webmaster
Um das zu umgehen, lässt sich die Fenster-Funktion direkt in der Webseite definieren und dann über den Flash-Film starten. Selbst dies wird weder von Safari, Mozilla noch der Google-Toolbar erkannt noch verhindert.
Der Code für die Aktion im Flashfilm lautet dann:
getURL("javascript:startfenster();");
Im Datei-Head der Datei mit dem Flashfilm wird dann die Javascript-Funktion definiert:
<script language="javascript" type="text/javascript">
function startfenster() {
newWin = window.open('http://www.domain.de/popup.html',
'popup', 'scrollbars=0,toolbar=0,location=0,directories=0,
status=0,resizable=0,width=300,height=200');
}
</script>
Diese lässt sich jetzt auch beliebig ändern, ohne den Film wieder neu erstellen zu müssen. Obwohl der Flashfilm nicht viel mehr macht, als die definierte Funktion zu starten, wird das Fenster angezeigt. Wird die Funktion dagegen direkt aus der Datei heraus gestartet, wird das Popup erkannt und unterdrückt.
Sollte die Methode Verbreitung finden, werden angepasste PopUp Blocker entsprechend zurückschlagen. Noch allerdings ist das, mit Ausnahme des Windows XP Service Packs 2, nicht der Fall.
Musik auf der Website: Flash hilft aus
Manche uralt Homepage nervt Besucher noch immer mit MIDI-Dateien, die als
Hintergrundmusik abgespielt werden. Da das Flash-Plugin aber in fast jedem
Browser installiert ist, sind auch qualitativ hochwertigere MP3-Dateien kein
Problem mehr.
Flash komprimiert die Dateien dabei gleich noch einmal, damit sie auch wirklich nur
wenig Ladezeit verbrauchen. Trotzdem sollte man die Hintergrundmusik lieber etwas
knapper wählen und als Schleife wiederholen – Modemuser werden es Ihnen danken.
Für einen einfachen Hintergrund-Sound braucht es weniger als zwei Minuten Arbeit,
selbst Flash-Neulinge sollten keine Probleme haben. Ist der passende Sound ausgewählt (Copyright beachten!) kann er direkt über Datei / Importieren zu einem neuen
Projekt hinzugefügt werden. Er taucht dann sofort in der Bibliothek auf, die sich mit
der Taste F11 einblenden lässt.
Webmaster
Von dort wird der Sound auf die weiße Arbeitsfläche gezogen. Er ist zwar dort nicht
zu sehen, wird aber angezeigt, wenn man mit der Maus über das aktuelle Bild in der
Zeitleiste fährt. Wird das Bild angeklickt, lässt sich die Anzahl der Wiederholungen
im Eigenschaften-Fenster einstellen. Nach Testen und Speichern kann der Film jetzt
veröffentlicht werden. Da der Film in der Regel aber nur als kleiner Teil der HTMLSeite genutzt wird, kann die Größe des Films noch über Modifizieren / Dokument auf
1px mal 1px gestellt werden.
Gäste mögen Kontrolle. Mit zwei Schaltflächen lässt sich ein mini CD-Player simulieren, mit dem man den Sound starten und wieder stoppen kann.
Hierfür braucht es etwas Actionscript, die Flash-eigene Scriptsprache. Diese lässt sich
rasch per Klick zusammenstellen, so dass auch Einsteiger keine Probleme haben.
Webmaster
Insgesamt werden drei Zeitleisten-Ebenen mit je drei Schlüsselbildern benötigt. Eine
neue Ebene lässt sich per Knopfdruck hinzufügen. Schlüsselbilder werden gesetzt,
wenn der ausgewählte Frame angeklickt und im Einfügen-Menü der Punkt "Schlüsselbild" gewählt wird.
Die Ebenen lassen sich für bessere Übersicht per Doppelklick mit eigenen Namen versehen, das ist aber nicht zwingend nötig.
Zum Start wird das erste Schlüsselbild der Sound-Ebene aktiviert, jetzt kann die Musik
auch in die weiße Bühne gezogen werden. Nun muss das erste Schlüsselbild der Button- Ebene aktiviert werden. Mit den Flash-Werkzeugen wird ein Pausenknopf gezeichnet, der einfach aus zwei gefüllten Rechtecken besteht. Diese werden dann mit
STRG-A oder Apfel- A ausgewählt und dann über das Einfügen-Menü in ein Symbol,
Schaltfläche konvertiert.
Einmal angeklickt, lassen sich der neuen Schaltflächen im Aktionen-Fenster neue Aktionen hinzufügen: Bei Druck soll der Film zu Bild drei springen und dort anhalten.
Der Quellcode kann entweder im Expertenmodus selbst eingefügt werden, oder über
das Aktionen-Menü Filmsteuerung, goto zusammengestellt werden:
on (press) {
gotoAndStop(3);
}
Webmaster
Beim Zusammenstellen muss nachträglich noch "Gehe zu und stoppe" statt "Gehe zu
und abspielen" gewählt werden.
Bild 2 enthält in der untersten Ebene ebenfalls einen Sprung-Befehl, der dem Schlüsselbild im Aktionen-Fenster ebenso hinzugefügt wird wie zuvor der Schaltfläche. Hier
angelangt soll der Film einfach zurück zu Bild 1 springen und anhalten:
gotoAndStop(1);
Das dritte und letzte Schlüsselbild braucht auf der "Button-Ebene" einen dreieckigen
Abspielknopf, der wieder über das Einfügen-Menü in eine Schaltfläche gewandelt
wird. Der Code ist fast identisch zu dem des Pausenknopfs, allerdings wird statt zu
Bild 3 zurück zu Bild 1 gesprungen, damit die Musik wieder gestartet wird.
on (press) {
gotoAndPlay(1);
}
Als letztes muss dem dritten Schlüsselbild der Soundebene noch ein Befehl zum Anhalten der Musik gegeben werden.
stopAllSounds();
Dieser Befehl lässt sich ebenfalls über die Filmsteuerung im Aktionen-Menü schnell
hinzufügen. Zur Verdeutlichung hilft das Diagramm, die Befehle den einzelnen
Schlüsselbildern zuzuordnen.
Der fertige Flash-Film ist mit drei Bildern recht klein, besitzt aber bereits alles, um
dem Besucher die Wahl zwischen Musik abspielen und Musik stoppen zu lassen.
Webdesign
Vorsicht, Falschfarben!
Wenn die Farbe falsch wirkt, obwohl der Farbwert exakt ist, liegt das Problem
höchstwahrscheinlich am Farbkontrast. Er bezeichnet das Zusammenspiel zweier
beieina nder liegender Farben, oder auch Vorder- und Hintergrund.
Durch den Simultankontrast wirkt eine Farbe vor einem dunklen Hintergrund zum
Beispiel heller als vor einem hellen Hintergrund, ein warmer Hintergrund (rot, orange,
gelb) lässt die Farbe selbst kühler wirken, vor einem kalten Hintergrund (blau, grün)
wirkt die gleiche Farbe wärmer.
Gleichzeitig wird auch der Untergrund anders wahrgenommen. Wird eine orangefarbene Fläche auf einen grauen Hintergrund gelegt, wirkt der Grauton leicht bläulich.
Dies geschieht, weil das Gehirn Blau, die Komplementärfarbe zu Orange, mit hinzurechnet. Hat der Hintergrund dabei schon einen leichten Blaustich, wird dieser durch
die orangfarbene Fläche noch verstärkt.
Gleiche Farbe, wirkt links aber anders als rechts
Das Problem macht sich hauptsächlich bei großen Flächen bemerkbar, Fotos sind
mit ihren vielen verschiedenen Farben weitgehend immun. Auch Text ist nur in großen
Überschriften betroffen. Eine automatische Möglichkeit, die Farben anzupassen, gibt
es nicht, hier sind etwas Geschick und ein gutes Auge gefragt. Die wichtigste Maßgabe ist, dass der Designer sich nicht scheuen darf, auf der gleichen Seite verschieden
Farben zu nutzen, um die gleiche Farbwirkung zu erzielen.
Beide Grauflächen: #046C64
Linkes Grau: #046C64, rechtes Grau: #397664
Um also links auf blauem Grund das gleiche Grau darzustellen, wie rechts auf rotem
Grund, darf nicht der gleiche Farbwert genommen werden – sonst stimmen die Farben nicht optisch überein.
Webdesign
Bilder gerade stellen
Ob gescannt oder digital fotografiert, Bilder kommen selten mit exakten Kanten
in den Rechner. Professionelles Design verlangt aber genau das. Mit Photoshop
lässt sich so ziemlich jede Vorlage in wenigen Schritten begradigen.
Nutzern von Photoshop CS hilft das Messwerkzeug. Mit ihm wird zuerst eine Kante
des schief gescannten Bildes nachgezogen. Der Winkel wird automatisch gespe ichert und steht uns weiterhin zur Verfügung. Wird unter dem Menüpunkt Bild: Auswahl drehen die Option "Per Eingabe" gewählt, steht der richtige Winkel schon parat per Knopfdruck wird das Bild begradigt.
Messwerkzeug in Photoshop CS
Wer der Genauigkeit des Messwerkzeugs nicht traut oder mit älteren PhotoshopVersionen arbeitet, dem hilft gute alte Handarbeit. Zunächst wird mit Apfel-R oder
STRG-R das Lineal eingeblendet, aus dem dann je eine vertikale und eine horizontale
Hilfslinie gezogen werden.
Kante anvisiert...
Das Bild wird mit dem Auswahlwerkzeug ausgewählt, wenn es nicht freigestellt auf
einer eigenen Ebene vorhanden ist. Mit Apfel- T oder STRG-T lässt es sich dann von
Hand drehen. Dazu wird das Bild an einer der Seiten angefasst, ein Ziehen an den
Ecken würde das Bild skalieren.
Webdesign
... und begradigt
Stimmt die neue Bildkante mit den Hilfslinien überein, lässt sich die Transformation
mit Enter bestätigen. Ist das Ergebnis noch nicht so sauber wie gewünscht, sollte man
den letzten Schritt rückgängig machen und die Transformation komplett wiederholen, andernfalls verliert man immer mehr an Qualität und das Bild wirkt weichgezeichnet.
Ist der Bildausschnitt durch das schiefe einscannen interessanter als zuvor, kann mit
der Freistellen-Funktion schnell eine neue, gerade Bildkante aus dem Bild heraus hergestellt werden. Jetzt dient das Auswahlwerkzeug als Maßkante.
Einstellung für die Auswahl
In den Werkzeug-Einstellungen wird als Art ein festes Seitenverhältnis gewählt. Damit die Proportionen stimmen, muss zwischen digitalem und analogem Foto unterschieden werden: Digital ist das Seitenverhältnis 4:3, analog meist 9:13 oder 10:15.
Mit Bild / Freistellen wird die Auswahlkante zur neuen Bildkante, und das Bild wirkt
wieder gerade.
Gratis Bilder für eigene Projekte
Twicepix möchte, wenn es groß ist, ein Foto-Archiv werden, aus dem sich Gestalter
frei bedienen können. Dazu muss gutes Material vorhanden sein, das man selbst einstellen kann. Obwohl die Datenbank bislang nicht sonderlich groß ist, finden sich bereits ansprechende Aufnahmen. Billige Ferien- und Familienfotos gibt es nicht. Alle
Bilder werden vor der Veröffentlichung geprüft. Bisher sind unter anderem Materialien zu den Themen Kunst und Architektur, Computer und Technik, Essen, Trinken,
Wohnen, Städte und Länder, Natur, Menschen und Tiere, Objekte und Schilder vo rhanden. Alles ist in Rubriken arrangiert und besitzt eigene Schlüsselwörter für die
rasche Suche im Archiv.
http://www.twicepix.net
Webdesign
Metallbutton mit Icons
von Dirk Metzmacher
Ein trendiger Metallbutton wird mit kleinen Icons geschmückt. Auch wenn es
schwer ist für jedes Thema das passende Motiv zu finden, dass Ergebnis wird Sie
belohnen.
Da dieses Interface durch seine Breite das Design von Dr.Web sprengen würde können
Sie durch einen Klick auf die Bilder jeweils die größere Original-Version aufrufen.
Schritt 1 Setzen Sie die Vordergrund farbe auf #D2D2D2 und erstellen Sie mit dem
Abgerundeten-Rechteck-Werkzeug den Hintergrund der Buttonleiste.
Hintergrund erstellt
Schritt 2 Erstellen Sie eine neue Ebene und wählen Sie mit dem Auswahlrechteck
Teile des unteren Randes aus. Füllen Sie die Auswahlen mit verschiedenen Farben.
Das hier genutzte Grün ist #9DC349, das Orange #FFAA22.
Unterer Rand
Schritt 3 Auf einer eigenen Ebene erstellen Sie die Metallfläche, die aus einem einfachen Ve rlauf besteht. Wählen Sie dazu mit dem Auswahlrechteck die Fläche aus und
ziehen Sie einen Verlauf von oben nach unten mit #FFFFFF nach #E8E8E8 auf.
Metallfläche erstellen
Schritt 4 Die Abgrenzungen der einzelnen Menüpunkte bestehen aus zwei 1 Pixel
breiten Strichen. Zeichnen Sie mit dem Buntstift auf einer eigenen Ebene mit der
kleins ten Werkzeugspitze und #FFFFFF den ersten Strich, mit #8E8E8E den zweiten Strich. Diese Ebene kopieren Sie für die restlichen Abgrenzungen.
Abgrenzungen der Menüpunkte
Webdesign
Schritt 5 Für den Schatten der Metallfläche erstellen Sie eine neue Ebene , wählen mit
dem Polygon-Lasso auf einer Seite die Form aus und füllen die Fläche mit #BFBFBF.
Kopieren Sie die Ebene und klicken Sie dann im Menü auf "Bearbeiten --> Transformieren --> Horizontal spiegeln". Jetzt positionieren Sie die Kopie auf der rechten Seite.
Schatten
Schritt 6 Kleine Icons, die Sie mit angebrachter über die Bildersuchmaschine von
Google oder ein Verzeichnis finden können, wurden in der Größe angepasst, entfärbt
und durch "Bild --> Anpassen --> Farbton/Sättigung" und aktivierten "Färben" wieder
eingefärbt. Bei jedem Icon wurde der Ebenenstil Schlagschatten aktiviert.
Metallfläche mit Icons
Schritt 7 Zum Schluss beschriften Sie die Metallfläche mit dem Textwerkzeug und
sorgen für einen sauberen Abschluss, indem Sie dem oberen Rand der Metallfläche
einen ein Pixel breiten Strich spendieren, der die gleiche Farbe wie die Abgrenzungen
haben sollte (#949494).
Variation
Für ein MouseOver wechseln Sie zu ImageReady und teilen das Bild mit den SliceWerkzeugen auf. Da die einzelnen Menüpunkte und die Icons auf eigenen Ebenen liegen, können Sie leicht Ebenenstile hinzuschalten, so dass zum Beispiel die Punkte
beim MouseOver Rot aufleuchten.
Banner-Archiv
Dem gemeinen Werbebanner wird dieser Tage nur wenig Liebe entgegengebracht.
Und glücklicherweise befindet es sich allenthalben auf dem Rückzug. Wer Banner
dennoch erstellen will oder erstellen muss, sei es für eigenen Projekte oder im Auftrag,
dem ist immer an Anregung gelegen. Dann lohnt es sich beim "Bannereport" hineinzuschauen. Dort gibt es eine mächtige Sammlung zu allen denkbaren Formaten. Sich
dort umzuschauen, kann auch jenseits beruflicher Interessen durchaus unterhaltsam
sein.
http://www.bannerreport.com/html/gallery.php
Marketing
Business Menü
von Dirk Metzmacher
Für Themen wie "Geld" oder "Versicherung" braucht man ein ernsthaftes Design, das Sicherheit und Vertrauen vermittelt. Hier ein Entwurf für ein Menü, in
dem die Farben Blau und Grau nicht zufällig eine Rolle spielen.
Schritt 1 Der Hintergrund wurde mit einem satten Blau gefüllt (#005599) und mit
etwas "Licht" durch den Airbrush, einer weichen Werkzeugspitze und weißer Farbe
abgereichert.
Hintergrund
Schritt 2 Mit dem Abgerundeten-Rechteck-Werkzeug wurde in Grau die Basis der
Stellen erstellt, die später die Grundlage für das Logo ergeben soll. Ein leichter
Schlagschatten und Verlauf und eine dunkelgraue Kontur sorgen für einen 3DEffekt. Im Hintergrund liegen zusätzlich weiße und graue Kästchen, die einfach mit
dem Auswahlrechteck erstellt und mit den passenden Farben gefüllt wurden.
Grundlage für das Logo
Webdesign
Schritt 3 Die obere "Plattform" bietet sich für ein Logo als ideale Stelle an. Hier wurde ein Beispiel nur mit dem Textwerkzeug erstellt und ein Spruch hinzugefügt. Für
die Grundlage des Buttons wurde auf einer eigenen Ebene mit dem Buntstift und
Hellgrau ein Rahmen gezeichnet, der mit einem leichten Verlauf gefüllt wurde (von
#555555 nach #828282).
Logo und Buttongrundlage
Schritt 4 Kopieren Sie Ihren Button und fügen Sie ihn in den Zwischenraum so oft
ein, bis dieser gefüllt ist. Auf einer neuen Ebene zeichnen Sie mit dem Buntstift einen
kleinen Pfeil.
Zwischenraum gefüllt
Webdesign
Schritt 5 Beschriften Sie den Button mit dem Textwerkzeug und kopieren Sie den
Pfeil, so dass jeder Menüpunkt einen eigenen besitzt.
Ergebnis
Mit ImageReady können Sie dieses Menü ganz einfach mit einem Mouseover ve rsehen.
Perfekt optimierte Webgrafiken
Im Web findet man viel zu häufig schlecht oder falsch komprimierte und gespe icherte Grafiken. Auch in Zeiten von DSL kosten das Platz und sorgt für längere
Ladezeiten – viel wichtiger allerdings ist die Optik. Und so geht's:
Als Faustregel gilt: JPEG ist ein gutes Format für Fotos, Farbverläufe und Bilder,
die mehr als 256 Farben benötigen. GIF ist ideal für größere Farbflächen, zum Be ispiel Screenshots. PNG, das dritte Format im Bunde, wird immer noch nicht mit allen
Funktionen von allen Browsern unterstützt, sollte deshalb nur mit Bedacht genutzt
werden.
Farbverlauf als JPEG, 0,70kb
Farbverlauf als GIF mit Farbkanten, 4,9kb
Zwar lassen sich beim Speichern von GIF-Bildern mit dem Einsatz eines Dithers mehr
Farben simulieren, als tatsächlich zur Verfügung stehen, für Verläufe und Fotos
werden die Bilder trotzdem viel größer und qualitativ schlechter als JPEGs.
Webdesign
Farbverlauf als GIF mit Dithering für bessere Ergebnisse
Dither-Einstellungen für das GIF-Format in Photoshop
Soll ein Bild mit großen Flächen gezeigt werden, etwa Text auf eintönigem Hintergrund, ist hingegen das JPEG-Format denkbar ungeeignet. Hier sorgt dessen Kompressionsverfahren nämlich an den oft starken Kontrasten an Buchstabenrändern für
unschöne Artefakte. Diese fallen bei Fotos gar nicht auf, bei Texten ist es aber besonders schlimm.
Vergrößert zeigen sich die unschönen JPEG-Artefakte
Eine einmal durchgeführte JPEG-Komprmierung lässt sich auch nicht wieder
rückgängig machen, hier ist dann Handarbeit gefragt, wenn nachträglich das Format
geändert werden muss. In unserem Beispiel würde das GIF-Format weniger als die
Hälfte selbst der schlechtesten JPEG-Qualitätseinstellung an Speicherplatz verbrauchen. Buttons, Icons, Symbole und fast alle Bilder, die Text enthalten, sind ideal für
das GIF- oder PNG-Format, das ebenso verlustfrei komprimiert. Um mehr als die tatsächlichen 256 Farben des GIF-Formates zu simulieren, helfen Variationen an den
Dither-Einstellungen.
Besteht ein sehr großes Bild aus Text und Fotos, ist das Aufteilen („Slicen“) in einzelne Bilder hilfreich. Programme wie Photoshop, Imageready oder Fireworks erze ugen zu den Bildabschnitten gleich den fertigen HTML-Code, der sie wieder in der richtigen Reihenfolge neben- und untereinander platziert.
Suchmaschinen
MSN: Hilft mir die Google-Optimierung auch hier?
Dass Microsoft den Suchmaschinen-Markt aufrollen wird, gilt als sicher. Man
sollte vorbereitet sein. Kleine Optimierungen helfen, sowohl bei Google als auch
im neuen MSN ganz vorne mitzuspielen.
Das Webseiten mit dem Text "Optimized for Internet Explorer" vom MSN-Bot bevorzugt behandelt werden, ist ein böses Gerücht - obwohl man es Microsoft zutrauen
könnte. Bestätigt ist jedoch, dass der neue MSN Such-Algorithmus wie schon Google
verstärkt auf den Title-Tag achtet; mit unbenannten Seiten hat man also nur geringe
Chancen.
Nur mit "Untitled Document" gut zu finden
Englische Seiten lassen sich schon jetzt über Microsofts Bcentral Seite
(http://submitit.bcentral.com/msnsubmit.htm) hinzufügen. Um den MSN-Bot manuell
anzulocken, hilft es, zahlreiche externe Links vorweisen zu können. Diese lassen sich
zum Beispiel durch Web-Verzeichnisse wie dem DMOZ (http://dmoz.org/) erzeugen.
Ist eine Seite im DMOZ gelistet, steigt der Wert sowohl für Google als auch MSN.
Ein weiteres interessantes Verzeichnis ist das Looksmart Directory
(http://www.looksmart.com/). Zwar haben MSN und Looksmart ihre Zusammenarbeit
beendet, Microsoft hat sich aber die Option offen gehalten, Looksmart-Einträge trotzdem einzublenden. Der zusätzliche qualifizierte Link tut der Website in jedem Fall
gut, außerdem nutzen andere Seiten das Looksmart Verzeichnis mit, unter anderem
CNN und Excite.
Leider macht es Looksmart dem Webmaster nicht sehr leicht, sich in das Verzeichnis
einzutragen. Dazu muss man erst einmal Mitglied der eigenen Zeal-Community
werden, was mit dem Bestehen von zwei Tests nicht zu einfach ist. Danach lassen sich
zuerst nur einige, nicht-kommerzielle Seiten vorschlagen. Erst später, nach Einstufung als "zealot" oder "editor", lassen sich endlich auch andere Seiten eintragen.
Suchmaschinen
Anmelden für Zeal...
...um später eigene Seiten einzubauen
Microsofts Suchroboter sucht anders als Google auf der ganzen Seite nach passenden
Keywords: Nicht nur Titel und Body-Text einer Seite werden auf potenzielle Schlüsselwörter durchsucht, auch die Meta-Tags erhalten ihre Bedeutung zurück. Wer
ihnen Dank Google kaum noch Beachtung schenkt, sollte dies schleunigst nachholen.
Die Schlüsselwörter in Titel, Meta- Tags und dem eigentlichen Inhalt müssen aber übereinstimmen, Spammer sollen es möglichst schwer haben. Wer aber der Einfachheit
halber die gleichen Meta-Tags auf allen Unterseiten nutzt, schneidet hingegen
schlechter ab.
Eine weitere Fundstelle für Keywords: Der Text der Links, die auf eine bestimmte
Seite verweisen. Dieser ist für MSN nämlich noch wichtiger als für Google. Hier lohnt
sich die Optimierung gerade für interne Links. Diese sollten nicht mehr mit "hier",
"mehr" oder "weiter" betitelt werden, ein Linktext in der Form "Teil 2 des WebmasterBerichtes" wird Suchmaschinen genauso gefallen wie Lesern, die den Text nur schnell
überfliegen.
Obwohl die meisten Google-Optimierungen auch beim neuen MSN-Algorithmus greifen, sollte man es auf keinen Fall übertreiben. MSN freut sich über möglichst viele
Keywords im Text, Google dagegen reagiert auf eine übertrieben hohe KeywordDichte eher allergisch.
Suchmaschinen
Das neue MSN, im Beta-Test
Den aktuellen Stand der MSN-Suche kann man hier testen: http://beta.search.msn.com
Beide Suchmaschinen bewerten aktuelle Seiten mit frischen Inhalten besser als Seiten, deren Inhalt nur selten aktualisiert wird. Gerade die eher statischen Firmen- und
Produktseiten sind betroffen. Eine oft genutzte Möglichkeit bietet auch hier ein
Weblog, ein Forum oder ein News-Bereich.
Wie PHP-Dig Suchmaschinen füttern kann
Immer häufiger werden Google & Co. mit irrelevanten Seiten verstopft. Seiten,
die außer Schlüsselwörtern keinen nennenswerten Inhalt bieten. So etwas lässt
sich mit wenig Handgriffen automatisieren, ist aber nur dann sinnvoll, wenn echte Inhalte gezeigt werden.
Als Beispiel haben wir die interne Suchmaschine PHP-Dig benutzt und so umgewandelt, dass automatisch die erste Ergebnis-Seite nicht nur angezeigt wird, sondern auch
komplett als Datei in einem extra Verzeichnis erstellt wird.
Sucht also jemand bei Ihnen nach "Baubiologie Tipps", würde das Skript mit den gefundenen Ergebnis sen die Datei baubiologie-tipps.html erstellen.
Auf diese Weise erstellt man im Laufe der Zeit vollautomatisch eine größere Zahl zusätzlicher Seiten für die Suchmaschinen. Mehr Material mit relevantem Inhalt bedeutet
bedeutet erhöhte Chancen.
Suchmaschinen
Google-Spam
Doch dies darf man gestrost als eine leichte Form des Suchmaschinen-Spammens betrachten. Dem Besucher wird mit Ihren Suchergebnissen aber in der Regel durchaus
auch weitergeholfen.
Damit Ihre Dateien auch gefunden werden, sollte sich in dem Extra-Ordner eine IndexDatei befinden, die alle Seiten automatisch auflistet. Eine Anleitung dazu finden Sie in
dem Artikel Mit Pfunden wuchern.
Zunächst muss die seiteninterne Suchmaschine PHP-Dig auf Ihrem Webserver installiert sein. Ideen dazu haben wir unter Profi Tipps für PHPDig bereits veröffentlicht.
Nach Anlegen eines Verzeichnisses für eine bessere Übersicht muss nun die Datei
function_phpdig_form.php aus dem "libs" Unterordner des PHP-Dig Verzeichnisses
editiert werden. Suchen Sie in der Datei zunächst das erste Vorkommen dieser Zeile:
$in_loop = 0;
Dahinter muss diese Zeile ergänzt werden:
$datei_schreiben = "";
Als nächstes müssen Sie noch diesen Codeblock finden. Er befindet sich zwischen
Zeile 170 bis 180, abhängig von der Anzahl der eigenen Erweiterungen im Skript:
if ($in_loop == 0) {
print phpdigParseTags($line,$t_strings);
}
}
}
Suchmaschinen
Tauschen Sie dies gegen den folgenden Code-Block aus:
if ($in_loop == 0) {
print phpdigParseTags($line,$t_strings);
}
$datei_schreiben .= $line;
}
$datei_name = str_replace(" ", "-", $query_string);
$datei_name = str_replace(".", "-", $datei_name);
$datei_name = str_replace(":", "-", $datei_name);
$datei_name = str_replace(";", "-", $datei_name);
$datei_name = str_replace("/", "-", $datei_name);
$datei_name = str_replace("ö", "oe", $datei_name);
$datei_name = str_replace("ä", "ae", $datei_name);
$datei_name = str_replace("ü", "ue", $datei_name);
$datei_name = str_replace("ß", "ss", $datei_name);
$datei_name = str_replace("\\", "", $datei_name);
$datei_name = str_replace("&", "", $datei_name);
$datei_name = str_replace("=", "", $datei_name);
$datei_name = str_replace("*", "", $datei_name);
$datei_name = str_replace("\"", "", $datei_name);
$datei_name = str_replace("<", "", $datei_name);
$datei_name = str_replace(">", "", $datei_name);
$datei_name = str_replace("(", "", $datei_name);
$datei_name = str_replace(")", "", $datei_name);
if(substr($datei_name,0,1) == " ") { $datei_name = substr ($datei_name, 1); }
$datei_name .= ".html";
if($datei_name != "index.html") { @touch("../hilfe/$datei_name"); }
$fp = @fopen("../hilfe/$datei_name","w+");
@flock($fp,2);
@fwrite($fp,$datei_schreiben);
@flock($fp,3);
@fclose($fp);
}
Dies sorgt dann dafür, dass alle Daten, die sonst an den Browser ausgegeben werden,
zusätzlich in der Variablen $datei_schreiben gespeichert werden. Aus den Suchbegriffen wird dann der Dateiname generiert. Leerzeichen werden dabei gegen Bindestriche getauscht und Sonder- und Satzzeichen ersetzt oder entfernt.
So schön diese Funktion auch ist, bei häufiger Benutzung Ihrer Suchmaschine verursacht sie während des Aufrufs eine erhöhte CPU-Last. Dazu wird das Verzeichnis
schnell mit zahlreichen Dateien gefüllt. Nur ein regelmäßiges Ausmisten sorgt für dauerhaften Nutzen und Ordnung.
Suchmaschinen
SEO Software: Contentclone
Je mehr Seiten eine Suchmaschine indexieren kann, desto größer und mächtiger
ist sie. Das gilt auch für jedes Webprojekt, vorausgesetzt, es gelingt diese Seiten
mit brauchbaren Inha lten zu füllen.
Brückenseiten helfen weiter. Sie eignen sich vorallen dann, wenn spezielle Techniken
wie Frames, Java oder Flash zusätzliche suchmaschinenfreundliche Einstiegsseiten
erforderlich machen. Contentclone geht einen Schritt weiter und erzeugt anhand von
Keywords echte Startseiten. Und zwar in rauen Mengen.
Contentclone ist eine Set von PHP-Scripts, auch wenn der Anbieter durch einen
"Boxshot" etwas andere suggeriert. Eine Installation auf dem Webserver ist erforderlich, eine MySQL Datenbank wird aber nicht benötigt.
Im Prinzip tut Contentclone nichts anderes als für angegebene Schlüsselwörter neue
Dateien, Verzeichnisse und wenn gewünscht auch Subdomains zu erzeugen. Bei 100
Keywords geht die Zahl der erzeugten Seiten bereits in die Zehntausende! Das Ganze
lässt sich sogar über einen Cronjob steuern. An Leerzeichen und Umlauten verschluckt
sich das Script nicht.
Die erweiterte Version verspricht noch mehr: dynamisch erstellte Seiten, Keywords
und Metatags, unsichtbare Linklisten, Beobachtung des Google Spiders und seiner
Aktivitäten, das Anlegen einer Sitemap, mehrere Sprachen, Anreichern der neuen Seiten mit Blindtexten und mehr.
All das macht Contentclone (http://www.contentclone.de) zu einen idealen Werkzeug
für Suchmaschinen-Spammer. Hand aufs Herz: Programmme wie dieses sind dafür
verantwortlich, dass die Qualität von Google und Co. abgenommen hat. Über seinen
Einsatz muss jeder selbst befinden. Vielleicht zwingt die Konkurrenzsituation dazu,
vielleicht der Ehrgeiz. Dass Suchmaschinen solche Praktiken nicht mögen, muss nicht
erwähnt werden. Die Gefahren sind bei moderatem Einsatz dennoch gering, und verboten ist der Gebrauch nicht.
Die Kosten betragen 99,- Euro für die einfache und 199,- Euro für die erweitere Version. Ein Installationsservice kann für 49,- Euro in Anspuch genommen werden.
Promotion
Promotion: Fernsehwerbung im Infokanal
Werbung im Fernsehen erreicht immer noch die meisten Zuschauer, erfordert
aber ein enormes Budget. Der Videotext bietet sich als preisgünstige Alternative
mit hoher Reichweite an. Nicht nur die Anbieter von Klingeltönen, Sexseiten und
Finanztipps haben das längst erkannt.
Klar, Text-Werbung ist deutlich günstiger als pompöse 30-Sekunden Spots in der besten Sendezeit. Im Videotext der bekannten Fernsehsender gibt es verschiedene Möglichkeiten, auch mit kleinerem Budget auf sich und Websites aufmerksam zu machen.
Alle weiteren Informationen kann man nämlich getrost dort erst bieten, das spart auch
im Videotext Platz und Kosten.
Die Firma SevenOne Interactive GmbH betreut die Videotext-Seiten der Sender
Sat.1, ProSieben, N24, Kabel 1, DSF, MTV und MTV 2 sowie Neun Live. Nach eigenen Angaben hat Video- oder Teletext mit 35 Millionen Lesern die nach dem Fernsehen zweitgrößte Reichweite, immerhin sollen 86% aller TV-Haushalte auch Videotext
empfangen können.
Man kann entweder gleich eine ganze Seite mieten, die dann mit einer dreistelligen
Adresse über die Fernbedienung gefunden werden kann, oder kleine Werbeblöcke
(„Top-Ads“) und Einzeiler auf den Haupt- und Rubrikenseiten buchen. Wer eine
gleich eine ganze Seite möchte, sollte trotzdem Werbung auf den Haupt-Seiten schalten, damit Zuschauer überhaupt zur eigenen Textseite finden können.
IP-Media vermarktet die Teletext-Angebote der Sender RTL, RTL 2, VOX, n-tv und
Eurosport. Auf ihrer Übersichtsseite sind die Preise pro Werbeplatz für die einzelnen
Sender übersichtlich aufgelistet. Auch interessant: IPMedia bietet die Werbung im
Laufband des aktuellen n-tv Fernseh-Programms an.
Promotion
Nach den Angaben von IP-Media wird der n-tv Videotext täglich von 500.000 Besuchern gesehen. Pro Woche kostet ein Werbestreifen auf der Startseite Nr. 100, die jedes Mal als erstes bei Druck auf die Videotext-Taste aufgerufen wird, 1400,- EUR pro
Woche. Die Unterseiten bringen zwar weniger Leser, kosten dafür aber auch weniger
Geld. Ein Werbestreifen auf einer Rubrikenseite kostet nur noch 890,- EUR, auf Unterseiten nur noch 650,- EUR.
Das Top-Ad genannte Banner oben rechts auf der Startseite hat ein größeres Format
und soll noch besser gesehen werden. Dafür kostet die Woche hier auch 1750,- EUR.
Wer gleich die wichtigsten Informationen auf einer eigenen Seite anbieten möchte,
muss dafür 695,- EUR hinlegen. Zum schnellen Vergleich der eigenen Werbung lässt
sich der n-tv Text übrigens auch online über die Sender-Homepage betrachten.
Sat.1 hat eine andere Zielgruppe als n-tv, die wohl auch höhere Werbepreise rechtfertigt. Hier kostet eine komplette Unterseite 1330,- EUR, der Top-Ad Werbebanner auf
der Startseite schlägt mit 6965,- EUR zu Buche. Bei Pro 7 sind es immer noch 1015,EUR für eine eigene Seite und 4655,- EUR für ein Startseiten-Banner. Eine Werbezeile auf Unterseiten kostet dafür aber nur 112,- Euro.
N24, der Nachrichtensender der früheren Kirch-Senderfamilie, lockt mit deutlich günstigeren Werbepreisen als selbst n-tv. Hier kostet eine eigene Seite nur noch 210,- EUR,
der Startseiten-Banner 553,- EUR. Die „Centerline“ genannte einzeilige Werbung in
der Mitte der Startseite kostet auch nur 805,- EUR pro Woche.
Text & Schreiben
So packen Sie die neue Rechtschreibung - Teil 1
von Gabi Neumayer
Wie geht das eigentlich mit der neuen Rechtschreibung? Hier finden Sie alle
wichtigen Änderungen und Tipps, wie man sie schnell umsetzt.
Was wird alles neu geregelt?
Die neuen Regeln lassen sich in mehrere Bereiche unterteilen, die wir Ihnen in den
nächsten Folgen dieses vierteiligen Artikel vorstellen werden:
•
•
•
•
•
•
Laut-Buchstaben-Zuordnung
Groß- und Kleinschreibung
Fremdwörter
Getrennt- und Zusammenschreibung
Zeichensetzung
Silbentrennung
In diesem ersten Teil geht es erst einmal um die neue Wahlfreiheit bei der Rechtschreibung und wie Sie am besten damit umgehen. Außerdem verraten wir Ihnen die
besten Tricks zum schnellen Lernen der neuen Rechtschreibung.
Sie haben die Wahl!
Nach den neuen Regeln gibt es eine Menge Wahlmöglichkeiten. So kann man:
•
•
•
Fremdwörter fast immer entweder eingedeutscht oder auch in der “fremden”
Form schreiben (Potential - Potenzial)
eine Infinitivgruppe entweder immer oder auch (fast) nie mit einem Komma
abtrennen
viele Wörter unterschiedlich schreiben: groß oder klein, zusammen oder getrennt (zum Beispiel sodass – so dass, aufs Beste/beste, weit reichend – weitreichend)
Schöne Freiheiten – die aber doch zu einigen Problemen führen: Man muss sich innerhalb eines Textes oder auch innerhalb eines Unternehmens darauf einigen, welche
Schreibungen man nun nehmen will. Denn dass jede/r in jedem neuen Satz oder Brief
so schreibt, wie er oder sie gerade möchte, ist kaum im Sinne einer Corporate Identity – und auch nicht im Sinne der LeserInnen. Grundsätzlich können Sie sich zwischen
vier Varianten entscheiden:
Text & Schreiben
Die Varianten
1. Die konservative Variante Es wird nur das geändert, was geändert werden muss.
Die Kommasetzung und die Fremd wortschreibung beispielsweise bleiben nahezu unverändert. Das verursacht in der Regel den geringsten Umstellungsaufwand.
2. Die progressive Variante Es wird alles geändert, was geändert werden kann. Das
bedeutet jedoch große Umstellungen vor allem bei der Kommasetzung und der
Fremdwortschreibung.
3. Die hauseigene Variante Man legt im Detail fest, welche Schreibung man wofür
verbindlich machen will. Diese Variante erfordert den mit Abstand größten Aufwand –
trotzdem haben schon viele große Unternehmen diese Möglichkeit gewählt.
4. Die Praxiswörterbuch-Variante Das ist eine Mischform, die aber den Vorteil bietet, dass sie in einem speziellen Wörterbuch niedergelegt ist (Praxiswörterbuch zur
neuen Rechtschreibung, Duden). Darin steht für jedes Wort nur eine ausgewählte
Schreibvariante. Wenn man die Schreibungen in diesem Buch für ein Unternehmen
verbindlich macht, spart man sich die vielen Einzelfestlegungen, die bei einer unternehmenseigenen Variante nötig sind. Der Nachteil: Man muss öfter nachschlagen als
bei den Varianten 1 und 2.
Tipps und Tricks Wenn Sie sich für eine Variante entschieden haben, geht es an die
Umsetzung. So le rnen Sie die neuen Schreibungen am schnellsten:
1. Umgeben Sie sich mit neuer Rechtschreibung Hängen Sie beispielsweise ein Poster mit Regeln und Beispielen der neuen Rechtschreibung an Ihren Arbeitsplatz. Kleben Sie Haftnotizen mit besonders auffälligen neuen Schreibweisen an Ihren PCBildschirm.
2. Führen Sie Ihre eigene Wörterliste Sobald Sie ein Wort nachgeschlagen haben,
notieren Sie es auf einem Zettel. Wenn der Zettel zu unübersichtlich wird, tippen Sie
die Wörter ab und lassen sie vom PC alphabetisch sortieren. Mit dieser individuell auf
Ihre Bedürfnisse zugeschnittenen Liste können Sie sich nach einer Weile mühsames
Blättern in einem Wörterbuch fast ganz sparen.
3. Aktiv lernen Suchen Sie zu jeder Änderung, die Ihnen auffällt, die passende Regel/Begründung für die neue Schreibung. Formulieren Sie die Regel. Suchen Sie sofort
weitere Wörter, die ebenfalls von dieser Regel betroffen sind.
4. Lernmittel für Kinder nutzen Für Kinder gedachte Bücher und CDROMs sind
meist besonders gut verständlich und didaktisch hervorragend aufbereitet. Sehen Sie
sich deshalb bei den (Schul-)Büchern und Lernprogrammen für Kinder um, wenn Sie
Hilfsmittel suchen.
Text & Schreiben
von Gabi Neumayer
Groß oder klein? “ss” oder “ß”? Sprachexpertin Gabi Neumayer zeigt, was die
neue Rechtschreibung zur Groß- und Kleinschreibung und zur Laut-BuchstabenZuordnung zu sagen hat.
Laut-Buchstabe n-Zuordnung
Fast alle Fälle in diesem Bereich lassen sich mit zwei einfachen Regeln entscheiden:
1. Das Stammprinzip Wörter, die den gleichen Wortstamm haben und / oder zur selben Wortfamilie gehören, werden in diesem Stamm gleich geschrieben: nummerieren
wie Nummer, platzieren wie Platz, überschwänglich wie Überschwang. Dazu gehört
auch, dass beim Zusammentreffen dreier gleicher Buchstaben nun alle geschrieben
werden: Protokollliste. – Eine wichtige Ausnahme: Statt selbstständig kann auch weiter selbständig geschrieben werden.
2. “ss” oder “ß”? Diese einfache Regel verursacht die meisten Änderungen der neuen
Rechtschreibung:
•
•
Nach kurzem Vokal steht “ss”: dass, Passwort.
Nach langem Vokal oder Diphthong (“ei”, “au” etc.) steht “ß”: Maß, weiß.
Abgesehen davon gibt es einige wenige Einzelfestlegungen. So werden rau und Känguru nun ohne “h” geschrieben (wie blau, Gnu etc.), Tipp schreibt man jetzt mit zwei
“p”, Ass mit zwei “s”.
Groß- und Kleinschreibung Heute wird insgesamt mehr großgeschrieben als früher.
Hier alle wichtigen Neuerungen im Überblick:
1. Sie und du Die Anrede Sie in all ihren Formen (Ihnen, Ihre etc.) wird immer noch
großgeschrieben. Geduzt wird jetzt aber generell klein – auch in Briefen: du, dein, dir.
2. Feste Begriffe Feste Begriffe schreib t man klein: erste Hilfe, schwarzes Brett. In
vier Bereichen bleibt die Großschreibung allerdings erhalten: Titel (Kaiserliche Hoheit), Arten und Rassen in der Biologie (Rotäugiger Salm), besondere Feiertage (Weißer Sonntag) und historische Ereignisse (der Deutsch-Französische Krieg).
Personennamen auf “-isch” und “-sch” werden in adjektivischen Ableitungen kleingeschrieben: das gatessche Imperium. Groß schreibt man sie nur, wenn man den Eigennamen durch einen Apostroph hervorhebt: das Gates’sche Imperium – oder wenn sie
Teil eines Namens sind (die Cansteinsche Bibelanstalt).
3. Tageszeiten Nach den Adverbien (vor)gestern, heute, (über)morgen werden die
Tageszeitbezeic hnungen großgeschrieben (heute Mittag, gestern Abend).
Text & Schreiben
4. Bestimmte Wendungen Einige häufig gebrauchte Wendungen und Floskeln werden nun großgeschrieben. Die wichtigsten: im Einzelnen, im Allgemeinen, im Folge nden, im Wesentlichen, im Vo raus, im Nachhinein, und Ähnliches [u. Ä.], Angst machen, Leid tun, in Bezug auf.
5. Substantiv + Verb Verbindungen von Substantiv und Verb werden nun häufiger
getrennt geschrieben. Dann schreibt man auch das Substantiv groß (Eis laufen, Rad
fahren).
6. Adjektive und Partizipien Man schreibt sie vor allem in zwei Fällen groß:
•
•
wenn es sich um Adjektive in Paarformeln handelt: Jung und Alt, Gleich und
Gleich gesellt sich gern
wenn sie in festen Wortgruppen stehen: auf dem Laufenden sein, es ist das Beste ...
Vorsicht: Bindestrich! Wie oben schon gesagt, werden beim Zusammentreffen dreier
gleicher Buchstaben nun alle geschrieben. Man kann sich dann auch entscheiden, zur
Verdeutlichung einen Bindestrich zu setzen: Protokoll-Liste.
Wenn Sie aber ein Wort wie adressseitig mit Bindestrich schreiben möchten, müssen
Sie auf etwas Besonderes achten. Durch den Bindestrich wird ja der erste Teil, ein
Substantiv, vom zweiten, einem Partizip, getrennt. Dann muss der substantivische Teil
wieder großgeschrieben werden – also Adress-seitig.
von Gabi Neumayer
Getrennt oder zusammen? Mit oder ohne Bindestrich? “Differential” oder “Differenzial”? Erfahren Sie alles über die neue Getrennt- und Zusammenschreibung
und die Schreibung der Fremdwörter.
Getrennt oder zusammen?
Die Regeln zur Getrennt- und Zusammenschreibung sind leider immer noch recht umfangreich. Aber die Grundprinzipien sind einfach. Das wichtigste: “Im Zweifel getrennt!” Hier nun die wichtigsten Regeln in diesem Bereich.
1. Hier imme r getrennt Dies sind die wichtigsten Fälle, in denen getrennt geschrieben
wird:
•
•
so, wie + Adjektiv, Adverb oder Pronomen: wie viel, so viele, halb so weit
Verbindungen
mit
dem
Verb
sein:
dabei
sein
Fügungen aus X + Partizip, wenn X gesteigert oder erweitert werden kann:
leicht verständlich
Text & Schreiben
Fügungen aus Substantiv + Partizip, wenn auch die zugrunde liegende Fügung getrennt geschrieben wird: Aufsehen erregend wegen Aufsehen erregen. Achtung: In
diesen Fälle müssen Sie besonders auf die Großschreibung der nun allein stehenden
Substantive achten! Nach der neuesten Ergänzung der Regeln können solche Fügungen
aber nun auch wieder zusammengeschrieben werden.
Wörter wie sagenumwoben, meterhoch gehören jedoch nicht dazu. Sie enthalten ja in
der ursprünglichen Wortgruppe noch andere Bestandteile: von Sagen umwoben, einen/mehrere Meter hoch. Wenn also bei der Wortbildung etwas eingespart wird,
schreibt man auch nach neuer Rechtschreibung zusammen.
•
•
•
•
Fügungen aus Verb + Verb: kennen lernen, spazieren gehen, sitzen bleiben
Fügungen aus Partizip + Verb: getrennt schreiben, verloren gehen
Fügungen aus Substantiv + Verb: Rad fahren, Internet surfen
Für Fügungen aus Adjektiv + Verb gibt es einen Test: Man schreibt getrennt,
wenn
das
Adjektiv
gesteigert
oder
erweitert
werden
kann:
Beispiel:
nahe
liegen
–
Steigerung:
näher
liegen
Beispiel: blau färben – Erweiterung: leuchtend blau färben
2. Neuerdings zusammen Einige gebräuchlicheWörter werden nun zusammengeschrieben. Die wichtigsten: umso, stattdessen, irgendetwas – und alle anderen Wörter,
die mit irgend- beginnen.
3. Hier haben Sie die Wahl Bei einigen Wörtern und Wortverbindungen können Sie
sich aussuchen, ob Sie sie getrennt oder zusammen schreiben wollen. Hier die wichtigsten:
•
sodass/so dass, außerstande/außer Stande, imstande/im Stande, infrage/in Frage
stellen, zugrunde/zu Grunde, zulasten/zu Lasten, zugunsten/zu Gunsten, aufseiten/auf Seiten, vonseiten/von Seiten, zuleide/zu Leide tun, instand/in Stand setzen, zurate/zu Rate ziehen
Der Binde -Strich
Wann immer Sie zur Verdeutlichung einen Bindestrich setzen möchten, können Sie
das nach der neuen Rechtschreibung tun. Vor allem beim Aufeinandertreffen dreier
gleicher Buchstaben machen viele gern von dieser Möglichkeit Gebrauch (ScrollLine).
Aber Vorsicht: Achten Sie auf Änderungen in der Groß- und Kleinschreibung, die sich
bei der Schreibung mit Bindestrich ergeben können:
•
Ichsucht – Ich-Sucht, Dasssatz – dass-Satz.
Keine Wahl haben Sie bei Zusammensetzungen mit Ziffern: Da muss nun der
Bindestrich immer gesetzt werden. Auch hier ist es übrigens wichtig, auf neue Großschreibungen zu achten:
Text & Schreiben
•
die 12-jährige Suferin– aber die 12-Jährige.
Für Ableitungen galt das bislang nicht. Mittlerweile darf man aber auch sie mit
Bindestrich schreiben. Zum Vergleich:
•
•
3-mal (Zusammensetzung, denn “mal” kann auch ein eigenständiges Wort sein)
3fach oder 3-fach (Ableitung, denn “- fach” gibt es als eigenständiges Wort in
dieser Bedeutung nicht)
Fremdwörter
Generell gilt: Für viele Fremdwörter ist neben der alten nun auch eine eingedeutschte
Schreibung möglich. Aber die alten Schreibungen bleiben auch weiterhin richtig! Wer
sich also nicht umstellen möchte, schreibt trotzdem richtig.
1. Eindeutschungen Vor allem geht es bei den Eindeutschungsmöglichkeiten um hä ufig gebrauchte Wörter, und dort besonders um diese Buchstabenkombinationen:
•
•
•
•
•
•
Oft kann ph zu f werden - vor allem in phot, phon, graph: Telegraf, stereofon,
Fotosynthese
Seltener können th, gh, rh zu t, g, r werden: Tunfisch, Jogurt, Katarr
-tial, -tiell kann zu - zial, -ziell werden: Differenzial, essenziell
-é kann zu -ee werden: Exposee, Frottee
Wörter aus dem Englischen auf - y bekommen im Plural ein -s angehängt: Hobbys, Communitys
Einige andere mögliche Eindeutschungen: Ordonanz, Bravur, Ketschup, Ind ices, Frigidär
2. Getrennt oder zusammen? Nach den Regeln der Getrennt- und Zusammenschreibung kann man zusammengesetzte Fremdwörter nun öfter zusammenschreiben, zum
Beispiel Cashflow (neben: Cash-Flow) oder Multiplechoicetest (neben: MultipleChoice-Test).
Wenn der erste Bestandteil eines mehrteiligen Substantivs ein Adjektiv oder Partizip
ist, ist Getrenntschreibung möglich: Standing Ovations (auch: Standingovations), Open
Source (auch: Opensource oder Open-Source). Achtung: Sobald so ein mehrteiliges
Substantiv mit einem deutschen Wort durchgekoppelt wird, müssen Bindestriche gesetzt werden: Open-Source-Befürworter.
3. Groß oder klein? Bei mehrteiligen Substantiven schreibt man das erste Wort groß
und auch die substantivischen Bestandteile im Innern der Fügung, zum Beispiel: Corporate Identity. Leider muss man also dafür immer noch Kenntnisse der jeweilige
Fremdsprache haben – oder eben nachschlagen, dass man zum Beispiel Status quo
schreibt, aber Corpus Delicti.
Im vierten und letzten Teil dieser Serie beschäftigen wir uns mit den Neuerungen bei
der Silbentrennung und der Zeichensetzung.

Programmierung Virtueller Textmarker

Transcription

Similar documents

udeso ec - TeXdoc.net

Heft 152 - Rosa-Luxemburg

Marktinformation

outlook vergisst kennwort

SHARPEN projects professional - Handbuch

Tipps und Tricks Nr. 24 - Sammellinse 1/2013 - BSW