Die Gestaltung von Webseiten ist nicht besonders flexibel: Das HTML-Grundgerüst folgt klaren Regeln, unter der Haube agiert CSS. Beider Manipulation erfordert ein bisschen Expertenwissen. Wer sich eine Webseite bauen lässt, möchte aber in der Regel vermeiden, sich in die Technik und irgendwelchen Code einzuarbeiten. Oft bestückt man die Webseite nur in unregelmäßigen Abständen, und wer soll sich dann all diese Codeschnipsel und wo sie hingehören behalten?

So wollte ein Kunde auf einer für mobile Geräte optimierten Seite in der mittleren Inhaltsspalte Bilder und Texte nebeneinander darstellen, und zwar mehrere Bilder. Seine Idee war, eine Tabelle anzulegen und die einzelnen Bausteine dort zu platzieren, wie man es mit MS-Word gerne macht. Tabellen so zu optimieren, dass sie auch auf Smatphones funktionieren bedeutet eigentlich, sie zu vermeiden. Statt einer HTML-Konstruktion

<table> <tr> <td> Bild </td> <td> Text </td> </tr> </table>

kommt für eine zweispaltige Darstellung eine Konstruktion

<div style="overflow: hidden;"> <div style="width: 49%; float: left;"> <div> Bild </div> </div> <div style="width: 49%; float: right;"> <div> Text </div> </div> </div>

zum Einsatz. Einem Kunden kann ich aber nicht zumuten, im WYSIWYG-Editor in die Quelltext-Ansicht zu gehen und irgendwelches HTML und CSS einzugeben. Will der in 14 Tagen seinen Text überarbeiten, weiß er schon nicht mehr, was wo hingehört. Und das ist ja auch nicht seine Aufgabe.

Das Problem haben aber auch andere Entwickler schon gehabt und deswegen hat jemand die Erweiterung "Layouter" programmiert. Layouter stellt verhältnismäßig einfach unterschiedliche Spaltenlayouts für an sich der Link zum Layoutereinspaltige Inhalte bereit.

Ein unauffälliger Link unter dem Editor-Fenster führt zu einem kleinen Popup, das die Layoutalternativen zum Auswählen angibt. Hat man sich für eine Variante entschieden, gibt man im Popup die Inhalte ein. Weiter gestalten kann man sie an dieser Stelle allerdings nicht, erst wenn man die Die Auswahlmöglichkeiten im LayouterEingabe abschließt und die Inhalte in den WYSIWYG-Editor übernommen werden, kann man Texte ganz normal fett, kursiv oder mit Übrschriftsdefinitionen auszeichnen.

Mit Vorsicht zu genießen ist die Option, Text automatisch in zwei Spalten fließen zu lassen. Die resultierende Konstruktion

<p style="-moz-column-count: 2; -moz-column-gap: 16px; -webkit-column-count: 2; -webkit-column-gap: 16px; column-count: 2; column-gap: 16px;"> Text </p>

funktioniert nur in modernen Browsern und wird z.B. vom Internet Explorer unterhalb der Version 10 nicht unterstützt. Das ist allerdings kein Beinbruch, ältere Browser stellen den Text dann eben nur herkömmlich einspaltig dar.

Unterhalb einer mehrspaltigen Konstruktion eine weitere, unabhängige mehrspaltige Konstruktion einzufügen, ist jetzt nicht weiter schwierig: Den Cursor einfach ganz unten in den Editor setzen (wo sich eine leere Zeile befindet) und wieder den Layouter aktivieren. Natürlich kann man diese Layouts durch Unachtsamkeit und das Setzen des Cursors an die falsche Position zerstören, sie sind aber weitaus stabiler und flexibler als viele handgestrickten Varianten.

Wer schon einmal Bildergalerien mit Drupal erstellt hat, weiß die Bildstile von Drupal zu schätzen mit deren Hilfe man aus hochgeladenen Bildern, automatisch Thumbnail-Bilder (auch einfach nur "Thumbnails" genannt) oder andere Formate generieren lassen kann. Auch wenn die hochgeladenen Bilder völlig unterschiedliche Formate haben, möchte man die Thumbnails doch häufig immer im exakt gleichen Format haben, z.B. 100x100px. Für solche Fälle bietet sich der Effekt "Skalieren und zuschneiden" an. Dabei wird das Bild zunächst so skaliert, dass die kürzere Seite exakt 100px misst. Da das Seitenverhältnis des Bildes unverändert bleibt, hat die längere Seite jetzt natürlich noch mehr als 100px. Bei einem 800x600px großen Bild, hat das runterskalierte Bild jetzt 133x100px. Daher wird es im nächsten Schritt in der Breite auf 100px beschnitten. Das Ergebnis ist ein mittiger Bildausschnitt. Der folgende Screenshot der Drupal-Bildstile-Seite zeigt das beispielhaft.

Drupal Beispiel-Bildstil "Skalieren und zuschneiden 100x100"

Der Einsatz von WYSIWYG-Editoren erleichtert das Schreiben von Beiträgen für eine Webseite deutlich. Und erlaubt auch Anwendern, die keine HTML-Kenntnisse besitzen, ihre Beiträge zu gestalten. Allerdings gibt es einen Stolperstein, der dazu führen kann, dass der erstellte Beitrag auf der Webseite anders aussieht als erwartet. Die Ursache liegt oft darin, dass Beiträge z.B. mit Microsoft Word vorgeschrieben und dann per copy&paste (unter Windows z.B. Strg-C und Strg-V) direkt in das Eingabefenster des CKeditors kopiert werden. Im schlimmsten Fall kann solcher Text dafür sorgen, dass eine Webseite komplett unbrauchbar wird, so wie in diesem Beispiel bei einer Joomla-Seite. Um das zu Vermeiden, sollte man aus Word kopierte Texte daher immer über den Button "aus MS-Word einfügen"  in seinen Beitrag kopieren (der rot umrandete Button).

CKeditor-Button "Aus MS-Word einfügen"

Sie möchten wissen, wie Sie die Positionierung Ihrer Webseite auf den Suchergebnisseiten von Google und Co. verbessern können und wollen sich zunächst einmal über das Thema Suchmaschinenoptimierung informieren? Dann empfehlen wir unsere Basisberatung "Suchmaschinenoptimierung". Diese erhalten Sie bis zum 31. August 2012 zum Vorzugspreis von 90 € (statt 120 €)

Unsere Basisberatung umfasst folgende Leistungen:
Wir machen eine Analyse Ihrer Webseite (mit bis zu 10 Unterseiten). Anschließend erläutern wir Ihnen in einem ca. einstündigen persönlichen Gespräch im Rahmen einer Online-Sitzung, welche Verbesserungspotenziale bestehen und was Sie beachten sollten. Sie erfahren von uns:

  • was ist für Suchmaschinen wichtig und was nicht;
  • wie gestalten Sie Ihre Inhalte, so dass diese auf den Suchergebnisseiten möglichst weit nach vorne gelangen;
  • wie auch Fotos und Grafiken Besucher auf Ihre Seite bringen, wenn sie einige Grundsätze beachten;
  • welche Keywords für Sie relevant sein können und wie sie selber geeignete Keywords und Keywordkombinationen ermitteln;
  • wie Sie die Verlinkung Ihrer Webseite im WWW verbessern und was Sie dafür lieber nicht tun sollten;

Ziel des Beratungsgespräches ist es Sie in die Lage zu versetzen, selbst zu beurteilen, welche Maßnahmen der Suchmaschinenoptimierung für Ihre Webseite geeignet sind. Mithilfe einer kleinen Checkliste entscheiden Sie dann, welche Arbeiten gemacht werden sollen, welche davon Sie selber übernehmen können/wollen und welche Aufgaben Sie anderweitig vergeben. Gerne sind wir für Sie da, um Ihre Webseite anschließend auch längerfristig zu begleiten.

Viele betrachten das Thema Suchmaschinenoptimierung als Geheimwissenschaft und so mancher Anbieter dieser Dienstleistung stützt diesen Glauben nur zu gerne - sichert es doch arglose Kunden. Tatsächlich geheim ist zunächst einmal tatsächlich der Algorythmus, den Google (und auch andere Suchmaschinen) verwendet, um die Seiten eines Webauftrittes zu analysieren und in den Suchindex einzusortieren. Aber Google gibt auf seinem Webmaster-Blog durchaus Ratschläge, was man tun kann, damit die eigene Website über die Suchfunktion auch gefunden wird. Neben etwas Know-How braucht man ansonsten vor allem Geduld und Fleiß. Geduld, weil es gerade bei neuen Websites eine Weile dauert, bis die eigenen Bemühungen Früchte tragen und Fleiß, weil man Inhalte schaffen muss, damit sich die Suchmaschinen überhaupt für die eigene Seite interessieren. Mit dieser kleinen Artikelserie wollen wir allen, die ihre Website selber pflegen und optimieren wollen, das nötigste Rüstzeug an die Hand geben, auch ohne fremde Hilfe die eigene Seite zu optimieren.

Die Beiträge werden in loser Folge erscheinen. Den Auftakt macht ein Kurzüberblick  und dann geht es mit dem wichtigsten Thema überhaupt weiter: dem Inhalt (engl. Content; eigentlich müsste man hier eher von "Copy" reden, denn es geht vor allem um den geschriebenen Text, nicht um andere Inhalte wie Bilder oder Dateien). Geplant sind folgende Beiträge:

Wir wünschen Ihnen viel Spaß bei der Lektüre und hoffen Ihnen nützliche Anregungen geben zu haben. Wenn Sie Fragen zu dem Thema haben oder Unterstützung benötigen, dann nehmen Sie einfach Kontakt zu uns auf - über unser Kontaktformular, per Mail oder Telefon

Die Masche ist nicht neu und wird seit Jahren in immer wieder leicht abgewandelter Form versucht. Aktuell erhalten Domain-Inhaber Mails mit folgendem Text:

Wenn man auf einer Drupal-Websete Links, die zu externen Seiten führen, besonders kennzeichnen möchte - z.B. mit einem nachfolgendem Bildsymbol wie auf wikipedia, dann hilft das Modul External links filter. Einfach das Modul installieren und aktivieren und schon erscheint bei jedem ausgehenden Link ein   hinter dem Link. Natürlich kann man auch ein anderes Symbol verwenden. Dazu tauscht man einfach die PNG-Datei elf.png im Modulverzeichnis ../sites/all/modules/elf/ gegen das gewünschte Bild aus.

Von einer neuen Betrugsmasche wird in einem einschlägigen XING-Forum berichtet. Die Betrüger bestellen dabei in einem Online-Shop und wählen die - vermeintlich sichere - Zahlungsart "Vorauskasse". Der ahnungslose Shop-Betreiber erhält nach der Bestellung auch tatsächlichen eine scheinbar richtige Vorkasse-Zahlung mit der korrekten Auftragsnummer. Was er nicht weiß: die Betrüger haben eine andere ahnungslose Person veranlasst, die Vorauszahlung für eine zu leisten, indem sie als Vermieter von Ferienwohnungen oder Urlaubsappartments aufgetreten sind. Bucht nun jemand eine solche Ferienwohnung, so erhält er für die Bezahlung die Kontoverbindung des Händlers und die Auftragsnummer der betrügerischen Bestellung. Der Händler versendet nun die Waren an die Betrüger (die wohl oft eine rumänische Anschrift haben). Der Schwindel fliegt in der Regel erst auf, wenn Mieter sich nach der Reservierung seiner Ferienwohnung erkundigt, für die er bereits bezahlt hat. In aller Regel ist es dann aber bereits zu spät  und die Ware längst beim Betrüger.

Shop-Betreiber sollen daher Zahlungseingänge kritisch auf etwaige Unstimmigkeiten prüfen. Insbesondere wenn neben der Auftragsnummer weitere Angaben im Verwendungszweck stehen, wie z.B.  "Miete Appartment", oder wenn der Kontoinhaber vom Besteller abweicht, ist Vorsicht geboten.

Zum Testen einer Website auf Drupal-Basis (aber natürlich auch bei jedem anderen CMS) gehört im Regelfall auch, die Seite mit den jeweils erstellten Benutzerrollen zu prüfen. Denn nur so läßt sich feststellen ob alle User die korrekten Berechtigungen besitzen - nicht zu wenige, da sonst die Funktion nicht gewährleistet ist, aber auch nicht zu viele, weil sonst Sicherheitslücken entstehen können. Der normale Weg - ausloggen, als Testuser mit einer anderen Rolle wieder einloggen - ist das Mittel der Wahl, wenn man einen umfangreichen Testlauf durchführt und viele Funktionen in einem Durchgang prüfen möchte. Alternativ kann man natürlich auch mit einem zweiten Browser arbeiten und sich dort mit der jeweiligen Testrolle einloggen. Will man aber nur mal schnell zwischendurch in eine andere Rolle schlüpfen, um z.B. ein vom Kunden berichtetes Fehlverhalten zu prüfen, oder um mit anderen Rechten etwas vorzuführen, so ist das aus- und wieder einloggen ebenso mühsam wie das Starten eines neuen Browsers. Hierfür bietet das Drupal-Modul Masquerade eine komfortable Lösung: es stellt verschiedene Optionen zur Verfügung, um zwischen verschiedenen Benutzern hin und her zu schalten. Zum einen bietet es einen Link "Masquerade as (Benutzername)" auf der Profilseite jedes Benutzers an - natürlich nur, wenn man die entsprechende Berechtigung zum "Maskieren" hat! Klickt man diesen an, sieht man die Website ab sofort mit den Rechten, die mit der Rolle dieses Benutzers verbunden sind. Gleichzeitig erscheint im persönlichen Menü ein Eintrag "Switch Back", mit dem man genauso schnell zurück wechseln kann. Zusätzlich gib es einen Eintrag (oder auch mehrere) der einen schnellen Wechsel zu einem festgelegten (Default-)Benutzer gestattet, sowie einen Block, wo man nach Benutzernamen suchen und dann in dessen Rolle schlüpfen kann.

Jeder Rollenwechsel wird übrigens von Drupal in der Log-Datei protokolliert, so dass man diese später nachvollziehen kann. Sobald die Website online geht, empfiehlt es sich, Masquerade wieder zu deinstallieren.

Um die Pflege seiner Website möglichst komfortabel zu gestalten, setzen viele einen WYSIWYG-Editor wie JCE oder TinyMCE ein. Häufig kopiert man dabei auch Texte aus anderen Dokumenten - z.B. aus einer Word-Datei. Das geht ja auch ganz einfach: Text markieren, mit Strg-C kopieren und mit Strg-V in das WYSIWYG-Fenster einfügen. Und genau hier lauert eine böse Falle. Word übergibt beim Kopieren des Textes stillschweigend diverse Formatierungsanweisungen. Diese sind bei eingeschaltetem WYSIWYG allerdings nicht sichtbar. Erst beim Umschalten in den Text-Modus sieht man, was Word neben dem erwünschten Text sonst noch alles mitgeliefert hat: 

 <!--[if gte mso 9]><xml>  <w:WordDocument>   <w:View>Normal</w:View>   <w:Zoom>0</w:Zoom>   <w:HyphenationZone>21</w:HyphenationZone>   <w:PunctuationKerning/>   <w:ValidateAgainstSchemas/>   <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>   <w:IgnoreMixedContent>false</w:IgnoreMixedContent>   <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>   <w:Compatibility>    <w:BreakWrappedTables/>    <w:SnapToGridInCell/>    <w:WrapTextWithPunct/>    <w:UseAsianBreakRules/>    <w:DontGrowAutofit/>   </w:Compatibility>   <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>  </w:WordDocument> </xml><![endif]--><!--[if gte mso 9]><xml>  <w:LatentStyles DefLockedState="false" LatentStyleCount="156">  </w:LatentStyles> </xml><![endif]--> <!--  /* Style Definitions */  p.MsoNormal, li.MsoNormal, div.MsoNormal      {mso-style-parent:"";      margin:0cm;      margin-bottom:.0001pt;      mso-pagination:widow-orphan;      font-size:12.0pt;      font-family:"Times New Roman";      mso-fareast-font-family:"Times New Roman";} @page Section1      {size:612.0pt 792.0pt;      margin:70.85pt 70.85pt 2.0cm 70.85pt;      mso-header-margin:36.0pt;      mso-footer-margin:36.0pt;      mso-paper-source:0;} div.Section1      {page:Section1;} --> <!--[if gte mso 10]> <style>  /* Style Definitions */  table.MsoNormalTable      {mso-style-name:"Table Normal";      mso-tstyle-rowband-size:0;      mso-tstyle-colband-size:0;      mso-style-noshow:yes;      mso-style-parent:"";      mso-padding-alt:0cm 5.4pt 0cm 5.4pt;      mso-para-margin:0cm;      mso-para-margin-bottom:.0001pt;      mso-pagination:widow-orphan;      font-size:10.0pt;      font-family:"Times New Roman";      mso-ansi-language:#0400;      mso-fareast-language:#0400;      mso-bidi-language:#0400;} </style> <![endif]-->

Aktuelles

Windows ist immer wieder für eine Überraschung gut. Leider sind es oft keine guten Überraschungen. Letztens trat bei...

Warum es sinnvoll ist, seine Webseite auf SSL umzustellen, hatten wir in unserem...

Für Unternehmen gibt es mehrere Gründe, warum sie ihre Webseiten verschlüsselt ausliefern sollten. Werden sensible Daten...

Ab sofort steht für alle Webhosting-Accounts auch die PHP-Version 7 zur Verfügung.

Hierbei handelt es sich um eine neue...

Seit Windows XP gibt es das Problem, dass Windows Dateinamen die (inkl. des Verzeichnispfades) länger als 255 Zeichen sind, nicht...

Wir sehen uns:

WordCamp Frankfurt

02.09. – 04.09.2016
@WordCampFRA #WCFRA

Gezwitschert ...

  • Neu im Blog: Problem bei der Anmeldung an Windows10 nach Update (und wie man es löst) https://t.co/mpH7vCQYqS vor 11 Wochen 3 Tage
  • Neu im Blog: Drupal-Webseite auf SSL umstellen https://t.co/3pQWwxAKKV vor 14 Wochen 4 Tage