mirusys® CMS Entwickler Blog

mirusys CMS in sozialen Netzwerken

2009-11-13T08:46:00.005+01:00

mirusys CMS Entwicklungen, News und Infos sind nun auch auf den verschiedenen sozialen Netzwerken wie XING, Twitter und Facebook aufzufinden:

Web Accessibility / Barrierefreiheit Erweiterung mit mirusys CMS

2009-07-09T15:03:00.005+02:00

Um die Barrierefreiheit von allen unseren Websites mit unserem mirusys CMS noch weiter zu unterstützen wurde kürzlich nun eine zusätzliche Erweiterung freigeschalten:

Die Auszeichnung der Sprache im HTML Kopf der Website. Dies ist eine kleine aber feine technische Anpassung welche nun automatisch vom CMS übernommen wird. Mit dieser freien Erweiterung kann ein Screen-Reader (Software für sehschwache Personen) die Seite in der richtigen Sprache vorlesen und ist somit für alle zugänglich.

HTML Code Anpassung :

<html xmlns="http://www.w3.org/1999/xhtml"
lang="de-ch" xml:lang="de-ch">

Weitere Features von mirusys CMS welche standardmässig für alle Kunden zur Verfügung stehen sind folgende:

Die Internet-Präsenz ist immer tabellenlos aufgebaut, damit erreichen Sie eine saubere Trennung zwischen Inhalt und Design (SEO Vorteil).

Der Quellcode der Website wird nach dem W3C-Standard erstellt und ist auch valid (gültig).

Skalierbare Schriftgrössen sind bei unseren Auftritten standardmässig implementiert. In neueren Browsern kann mittels spezieller Tastenkombination (IE: Z.B. CTRL + "Mausrad" oder CTRL + "+") die Schriftgrösse relativ schnell und einfach vergrössert werden.

Weitere gängige Optimierungen wie z.B. Verwendung von Überschriften, Verzicht auf unnötige Pop-Up Fenster und verständliche Linktexte gehören ebenfalls zu unserem Standard.

Alternativer Text für Bilder ist bereits länger vorhanden und kann von jeder Person mit CMS Zugang selber definiert werden.

Einsetzen einer Sprachkennung in allen Templates wird standardmässig eingefügt. (Damit erkennt der Screenreader die Sprache der Seite)

Website Access for all - Zugang für alle

CMS Features von mirusys

Grafischer Formular Button mit CSS (valid, ohne Javascript)

2009-06-29T16:44:00.002+02:00

Bei einigen Formularen ist es wünschenswert dass man individuell gestaltete grafische Buttons implementieren kann, ohne dass das Code Handling - z.b. mit zusätzlichem Java-Script Code - dabei eingeschränkt wird. Es können mittels einem zusätzlichen Layer im HTML Code, den folgenden CSS Formatierungen sowie zwei simplen Button Grafiken valide Buttons erstellt werden, die von der Länge her noch automatisch angepasst werden. Die beiden Grafiken bestehen aus dem eigentlichen Button ohne den rechten Abschluss und einer Mindestlänge von 300 Pixeln sowie der 2. Grafik mit dem Button-Abschluss welcher nur noch der rechte Strich beinhaltet.

CSS Formatierung:


 div.button {
   height: 28px;
   background: url('images/btn_right.gif') right
               no-repeat;
   width: auto;
   float: left;
   padding: 0 3px 0 0;
 }

 div.button input.button {
   height: 28px;
   width: auto;
   background: url('images/btn_bg.gif') left center
               no-repeat;
   color: #000;
   font-weight: bold;
   border: none;
   overflow: visible;
   display: inline;
   margin: 0;
   padding: 0 10px 0 22px;
   font-size: 12px;
   font-weight: bold;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   cursor: pointer;   
 }

HTML Code:

<div class="button">
  <input type="button" name="submit" class="button"
  value="Search" />
</div>

Die Breite des Buttons wird automatisch angepasst, abhängig vom Input Value Wert ("Search").

Richtiger clear Layer

2009-05-15T09:33:00.008+02:00

Heutzutage werden die meisten Website Templates mit einer tabellenlosen Struktur d.h. mit Ebenen (sogenannte DIV-Layern) umgesetzt. Für deren korrekte und valide HTML-Umsetzung in Zusammenhang mit schönen Spalten Layouts kommt man nicht an einem "clearing" Layer vorbei. Diese Ebene ist dazu da, die entsprechenden Spalten sauber auf einer Linie horizontal abzuschliessen. Damit können die folgenden Ebenen alle auf einer Linie positioniert werden.

Damit nun aber der clear-Layer korrekt funktioniert und nicht sichtbar ins Design eingreift sollte dieser wie folgt aussehen:

div#clear oder div.clear {
  height: 1px;
  line-height: 1px;
  font-size: 0;
  clear: left;
}

Falls einige betroffene Ebenen rechts gefloatet (float: right) werden, ist es nötig anstatt "clear: left;" die Eigenschaft "clear: both" zu verwenden.

Weitere Informationen bezüglich Floating Problematik und Möglichkeiten sind im Artikel Float die Theorie zu finden.

mirusys mit neuem search.ch Map Plug-In

2009-04-23T13:06:00.006+02:00

Gestern Abend wurde eine neue Version von mirusys (build 1-0-34) veröffentlicht. Die neue Version konnte mit einigen neuen Features und einem schönen neuen Plug-In ergänzt werden.

Search.ch Map Plugin
Neu gibt es, als Pendant zu GoogleMaps, auch eine Erweiterung für die komfortablen Search.ch Karten in welchen standardmässig die ÖV Fahrpläne integriert sind. Lediglich die Adresse sowie die Stadt kann eingegeben werden und schon wird das Ziel auf der Karte wie gewünscht angezeigt. Dies funktionieren relative einfach und ganz ohne nervigen und Domain-abhängigen API-Schlüssel wie z.B. bei GoogleMaps und an diversen Orten mit besserem Kartenmaterial.
Search.ch Map Beispiel

Vielen Dank diesbezüglich noch an das search.ch Team für die sehr schöne und hilfreiche API Beschreibung bei search.ch (http://map.search.ch/api)

Weisse Pixel in JPG Bild während Fading (Slideshow) im Internet Explorer

2009-03-30T10:23:00.016+02:00

Ein ganz kurioser Fehler ist mir vor kurzem in unserer Diashow/Slideshow aufgefallen: Sobald Bilder (JPG) mit richtig Schwarzen Flächen vorhanden sind (RGB: 0/0/0) werden diese während dem Sliden (Transparenz-Überblendung) als durchsichtig angezeigt.

Dies verursacht helle Pixel auf schwarzen Flächen im Bild, was dann sehr gut auffällt, vorallem noch wenn die Überblendezeit noch etwas länger dauert. Interessant ist, dass davon "nur" der Internet Explorer betroffen ist, Firefox kommt natürlich klar damit.


Fehlerhaftes Bild mit weissen Pixel	Korrektes Bild nach dem Fix

Lösung:

Dieser Bug ist eindeutig auf den Browser Internet Explorer zurückzuführen und nicht auf einen fehlerhaften Export z.B. vom Grafikprogramm selber. Auch weist das JPG-Bild selber keine solchen hellen Flächen in diesen Bereichen auf.

Damit dieser Fehler behoben werden kann, muss man leider das Bild selber im Grafikprogramm anpassen. In meinem Fall war dies im Photoshop wie folgt möglich:

Photoshop:
Bild --> Anpassen... --> Tonwertkorrektur
--> Danach den schwarzen Regler (Slider) unten bei
   Tonwertumfang um etwa 2-4 Punkte vermindern.
   Danach das Bild erneut exportieren und speichern.

Quelle: Judder/Skywire

mirusys CMS goes High Availability

2009-01-28T10:59:00.008+01:00

Alle mirusys CMS Instanzen werden seit Anfang 2009 auf einem hochverfügbaren Cluster gehostet. HTTP-Anfragen werden vom Loadbalancer an einen von mehreren aktiven Nodes weitergeleitet und von diesem direkt beantwortet. Der dadurch entstehende "Single Point of Failure" - der Loadbalancer selber - wird in einem Aktiv/Passiv-Setup durch einen zweiten Loadbalancer abgesichert und von Heartbeat überwacht. Das Gesamtsystem ist dadurch performanter, stabiler und erst noch problemlos skalierbar. Mit diesen technischen und fortschrittlichen Massnahmen wurde die Ausfallsicherheit erhöht und die Qualität für alle Kunden mit mirusys CMS ab Version 4.0 wesentlich verbessert.

PNG Support im alten Internet Explorer (5.x/6.x)

2008-10-09T16:43:00.008+02:00

Heute haben wir ein sehr einfaches und nützliches Code Snippet auf snipplr.com gefunden mit welchem man in alten Internet Explorer 5 und 6 Browsern den PNG Support und deren wirkliche Transparenz anwenden kann.

Es wird lediglich ein JavaScript im Head des HTML Codes benötigt welches auf der geladenen HTML Seite nach allen vorhandenen PNG Bild-Dateien sucht und diese in ein SPAN mit der effektiven PNG Transparenz umwandelt.
Mit dem Conditional Tag wird gewährleistet dass dies nur in den Browsern ohne PNG Support wie der Internet Explorer (5.x und 6.x) geladen wird:

<!--[if lt IE 7]>
 <script type="text/javascript" src="/_local/templates/scripts/pngsupporter.js"></script>
<![endif]-->

Modifikation

Damit dies in unserem CMS und auch sonst ein wenig besser und fehlerfrei angewandt wird, wurde dies von uns etwas modifiziert.

Die Datei pngsupport.js mit der PNG Support Funktion sieht wie folgt aus:

function correctPNG() {
/* correctly handle PNG transparency in Win IE 5.5 & 6.
  http://snipplr.com/view/8637/png-support--no-other-files-needed/ */

  var arVersion = navigator.appVersion.split("MSIE");
  var version = parseFloat(arVersion[1]);

  if ((version >= 5.5) && (document.body.filters)) {   
      for(var i=0; i<document.images.length; i++) {
          var img = document.images[i];      
          var imgName = img.src.toUpperCase();      
          if (imgName.substring(imgName.length-3, imgName.length) == "PNG") {
              var imgID = (img.id) ? "id='" + img.id + "' " : "";
              var imgClass = (img.className) ? "class='" + img.className + "' " : "";
              var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";         
              var imgStyle = "display:inline-block;" + img.style.cssText;    
              if (img.align == "left") imgStyle = "float:left;" + imgStyle;         
              if (img.align == "right") imgStyle = "float:right;" + imgStyle;         
              if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle;         
              var strNewHTML = "<span style="\" src="'" sizingmethod="'scale');\"></span>";          
              img.outerHTML = strNewHTML;         
              i = i-1;   
          }
      }
  }
}
window.attachEvent("onload", correctPNG);

Zu beachten gilt noch, dass die entsprechende Ebene mit dem PNG Bild ein umschlossenes DIV Tag benötigt, damit nicht das obere Nodeset überschrieben wird:

 <div>
<img id="left_collage_bottom" src="../images/bg_collage.png" alt="" width="323" height="190" />
</div>

Nun wird das PNG24 im älteren IE6 angezeigt!

Das Original Skript ist von conspirator auf snipplr.com zu finden:
http://snipplr.com/view/8637/png-support--no-other-files-needed/

mirusys CMS mit neuer Produkte Website

2008-09-30T10:02:00.006+02:00

Nach langen Vorbereitungen (Namensuche, Logokreation, Screendesign Erstellung und den konzeptionellen Inhalt ist es nun endlich soweit:
Brunner AG hat soeben die mirusys® CMS Produkte-Website gelauncht.
Nun sind viele detaillierte Informationen zu den CMS-Features, umfassende Referenzen mit Case Studies und weitere interessante Informationen von der intuitiven CMS-Lösung für KMU's nun ersichtlich.
http://cms.mirusys.ch

Trennlinie HR mit Hintergrund-Bild

2008-08-20T14:24:00.005+02:00

Kürzlich wollte ich eine schön gepunktete Trennlinie auf der Website per CSS erstellen. Wie wir wissen werden allerdings die Standard Formatierung per CSS im Internet Explorer 6.x (IE6) falsch dargestellt. Der Browser intepretiert dotted als dashed und so erscheint die Linie dann gestrichelt anstatt gepunktet, was aboslut nicht ins Design passt. So überlegte ich mir die Linie so zu formatieren, dass die gepunktete Grafik einfach ein Hintergrundbild ist.

Auf dem Internet gibt es einige Informationen dazu, allerdings gibt es Lösungen die gar nicht funktionieren oder einfach nicht für ein gefloatetes Design gemacht sind.

Hier einige Beispiele die in meinem Fall NICHT funktionierten:

HR mit Hintergrundbild mittels absoluter Positionierung und CROP (rect) Funktion
Leider funktioniert dieser Ansatz nicht korrekt in einem gefloateten Design...
HR Border im IE mit ZOOM Funktion austricksen
Interessanter Ansatz der bei mir leider nicht 100%ig funktionierte...

So blieb mir nichts anderes übrig als die Lösung von Marek Sovavsiti mittels einem zusätzlichen DIV Element über die Trennline (HR) zu erstellen, was wie folgt aussieht:

HTML:


<div class="hr"><hr /></div>

CSS:


div.hr {
  height: 15px;
  background: #fff url(../images/hr.gif) repeat-x scroll center;
}
div#teaser div.hr hr {
  display: none;
}

Zeilenumbruch verhindern zwischen Wortabstand (Mac Safari 3.x)

2008-08-11T12:51:00.001+02:00

Der MAC Safari Browser ab einer Version 3.x erzwingt einen Zeilenumbruch zwischen zwei Wörtern mit einem Leerzeichen z.B. in einer Navigation (z.B. „Über uns“). Dies ist in meinem Fall unerwünscht und kann mit folgendem CSS Befehl umgangen werden:

white-space: nowrap;

Google ändert Algorithmus

2008-07-01T16:32:00.004+02:00

Der Suchmaschinen Gigant Google änderte kürzlich seinen Algorithmus. Dies wäre eigentlich nicht weiters wirklich etwas Neues, doch hatte diese Änderungen schon einen gewissen Einfluss auf die Suchmaschinen Positionen (SERP's). Mehr Gewicht erhielt die Aktualität der Website, was eigentlich schon länger absehbar war und auch sehr sinnvoll ist. Dieser Schritt von Google unterstützt unsere Philosophie mit raschen und einfachen Erstellung und Änderung von Website-Inhalten mit einem dafür prädistinierten CMS wie z.B. mirusys um so mehr.

Verloren an Wert haben hingegen Websites mit Subdomains welche nun nicht mehr als eigenständige Domains zählen und die Linkpopularität, diese vielleicht wegen den bezahlten Links ...

Quelle: Internet World

Transparente Bilder via CSS

2008-05-21T15:27:00.005+02:00

Mit folgender CSS Definition kann einem Bild relativ einfach und schnell eine Transparenz gesetzt werden:


/* Bilder 50% transparent setzen */
div#head a:hover img {
    filter:alpha(opacity=50); -moz-opacity: 0.50; opacity: 0.50;
}

Dabei gelten die Werte folgenden Browser-Typen:

Internet Explorer: filter:alpha(opacity=50);
Hier muss ein Wert von 0 bis 100 eingegeben werden. 100 steht für komplette Transparenz.

Mozilla Browser (Firefox etc.): -moz-opacity: 0.50;
(Wert zwischen 0 und 1.)

Restliche Browser: opacity: 0.50;
(Wert zwischen 0 und 1.)

Mirusys CMS

2008-05-20T15:10:00.006+02:00

Endlich ist es soweit: Die Brunner AG hat Ihrem Brunner CMS einen Produkte Namen und ein Logo kreiert: Per sofort heisst das CMS: "mirusys". "miru" stammt aus dem Japanischen und bedeutet "sehen" (Wysiwyg) und "sys" ist von "System" (Content Managament SYSTEM) abgeleitet.
In Kürze folgt die Produkte-Website und eine Menge weitere Informationen wie Screenshots, Features und Demo ...

Float in Float IE6 margin wrong inherted div width Bug - IE Fehler: Vererbte Div Weite wird im gefloateten Margin falsch übernommen

2008-05-15T14:28:00.015+02:00

Hinweis:
Bei diesem Bug handelt sich NICHT um den bekannten und vielfach auftretenden IE Double Margin Bug und den IE Inherited Margins on Form Elements Bug!

Problem:

Bei einem Webauftritt mit validen XHTML/CSS und gefloateten Ebenen (DIV Elemente, float in float) wird im Internet Explorer 6 die Margin Breite prozentual vom Eltern-Element falsch übernommen und somit falsch berechnet!

Der IE6 Browser berechnet den prozentualen Wert des Margins vom obersten DIV, dh. von 100% der gesamten Breite ( und nicht vom oberen Eltern DIV (Parent DIV)! D.h. In den Ebenen wird die Breite im Margin nicht korrekt weiter vererbt. Beim Gebrauch des Paddings funktioniert dies, beim MARGIN allerdings nicht.

Valider Quellcode, aber mit fehlerhafter Darstellung im IE6

Folgender Code haben wir auf unserem Beispiel angewendet, welcher den fehlerhaften Float erzeugt. Dabei floated die Box 3 immer nach unten (dabei hat das Ganze nichts mit dem Double Margin Bug zu tun) wie auf folgendem Screenshot zu sehen ist:


<body>
<div id="page">
<div id="content" style="background-color: yellow;">
<div id="group1573" class="cmsGroup" style="width: 50%; padding: 0%; background-color:red; display:block;">
  <div id="cell2352" class="cmsCell" style="width: 99.6%; background-color:yellow;">
    <p>Box 1</p>
  </div>
  <div id="cell3467" class="cmsCell" style="width: 22.58%; float: left; background-color: green; margin-right: 3.09%;">
    <div>
      <p>Box 2</p>
    </div>
  </div>
  <div id="cell1574" class="cmsCell" style="width: 73.93%; background-color:#CC9966;">
    <p>Box 3</p>
  </div>
</div>
</div>
</div>
</body>

Die dazu passenden Head Stylesheets sind auf allen Beispielen auf dieser Seite unverändert!


<style type="text/css">

body div.cmsGroup {
float: left;
display: inline;
}

body div.cmsCell {
float: left;
display: block !important;
}

</style>

Bugfix/Lösungsvorschlag:

Es ist offensichtlich, dass die Zelle mit der ID cell3467 und dem definierten "margin-right: 3.09%" falsch berechnet wird - nämlich mit realen 16 Pixeln anstatt 8 - und auf den obersten Basis-Wert der "DIV width" zurückgreift (100% anstatt 50%). Dabei wird dazwischen die Weite 50% der Gruppe #group1573 übergangen! Somit müssen wir nach dieser Gruppe nochmals eine Ebene (DIV) mit der Weite von 100% (width: 100%) definieren um die richtige Weite von realen 3.09% (8 Px) zu erlangen.

Es muss nun innerhalb der Gruppe nochmals eine Ebene mit folgenden Attributen erstellt werden:

<div style="width: 100%">

Der Screenshot dazu sieht folgendermassen aus:

Im kompletten und funktionierenden Quellcode sieht dies folgendermassen aus:


<body>
  <div id="page">
    <div id="content" style="background-color: yellow;">
      <div id="group1573" class="cmsGroup" style="width: 50%; padding: 0%; background-color:red; display:block;">
        <!-- Bugfix for IE6 related margin width -->
     <div style="width: 100%">
        <!-- E: Bugfix -->
       <div id="cell2352" class="cmsCell" style="width: 99.6%; background-color:yellow;">
            <p>Box 1</p>
          </div>
          <div id="cell3467" class="cmsCell" style="width: 22.58%; float: left; background-color: green; margin-right: 3.09%;">
            <div>
              <p>Box 2</p>
            </div>
          </div>
          <div id="cell1574" class="cmsCell" style="width: 73.93%; background-color:#CC9966;">
            <p>Box 3</p>
          </div>
        <!-- Bugfix for IE6 related margin width -->  
        </div>
        <!-- E: Bugfix -->
   </div>
    </div>
  </div>
</body>

Beweis des IE6 Margin Float Bugs

Folgende Änderung beweist die falsche Berechnung der Margin Width. Dazu haben wir die Box 3 anstatt 73.93% auf 50% angepasst, so passt alles in die Breite von 99.6% der Gruppe.

Auf diesem Screenshot sieht man den Fehler:

Der Quellcode dazu:


<body>
<div id="page">
<div id="content" style="background-color: yellow;">
<div id="group1573" class="cmsGroup" style="width: 50%; padding: 0%; background-color:red; display:block;">
    <div id="cell2352" class="cmsCell" style="width: 99.6%; background-color:yellow;">
      <p>Box 1</p>
    </div>
    <div id="cell3467" class="cmsCell" style="width: 22.58%; float: left; background-color: green; margin-right: 3.09%;">
      <div>
        <p>Box 2</p>
      </div>
    </div>
    <div id="cell1574" class="cmsCell" style="width: 50%; background-color:#CC9966;">
      <p>Box 3</p>
    </div>
 </div>
</div>
</div>
</body>

Dynamisches Excel Dokument mittels Brunner CMS Export automatisch erstellen

2008-03-18T11:54:00.006+01:00

Mittels dem Brunner CMS 4 ist es möglich ein dynamisches Dokument mittels Inhalt aus der CMS Datenbank (Bsp. Kundenadressen aus dem Shop) dynamisch in ein Microsoft Excel Dokument zu exportieren.

D.h. Die exportierte Excel Datei ist stets abgeglichen mit dem aktuellen Inhalt der CMS Datenbank, welche nun der Kunde einfach mittels Link downloaden kann. Hierbei kommen die Technologien des Brunner CMS selber, von XSLT und XML zum Einsatz welche das gewünschte Excel Format erzeugen. Folgende Einstellung müssen dabei im XSLT berücksichtigt werden, damit ein nach Kundenwunsch generierte und angepasste Excel Datei erstellt wird:

<?xml version="1.0" encoding="UTF-8"?>
    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">
    <xsl:output method="xml" media-type="application/vnd.ms-excel" />

    <xsl:template match="/">
     <Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"       xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:html="http://www.w3.org/TR/REC-html40">

    <DocumentProperties xmlns="urn:schemas-microsoft-com:office:office">
     <LastAuthor>Brunner CMS 4.0</LastAuthor>
      <Version>1.00</Version>
    </DocumentProperties>

    [...]

    <xsl:for-each select="/root/loops/loop[@keyname='kundenanfragen']/item">   
      <Row ss:Height="25" ss:StyleID="s106">
        <Cell ss:StyleID="s101">
            <Data ss:Type="Number">
                <xsl:value-of select="data/@pointer_id" />
            </Data>
        </Cell>
        <Cell ss:StyleID="s102">
            <Data ss:Type="String">
                <xsl:value-of select="data/produkt" />
            </Data>
        </Cell>
      </Row>

    </xsl:for-each>

    [...]

Ladegeschwindigkeit optimiert

2008-02-15T09:38:00.003+01:00

Heute morgen konnten wir die Testphase für das Brunner CMS4 in Sachen Geschwindikeitsoptimierung abschliessen und mit der neuen Version 163 veröffentlichen. Neu werden alle Javascript Dateien (rund 1000) im CMS-Backend komprimiert (gzip, gz) gespeichert und angefordert.

Die Ladegeschwindigkeit beim erstmaligen CMS Backend Aufruf hat sich bei einer normalen ADSL Leitung verdoppelt und mit einer kleineren Geschwindigkeit (300 kBit) sogar vervierfacht!

Interessant und weitere Informationen dazu gibt es unter folgendem Link:
gzip-komprimiertes Javascript und CSS effektiv ausliefern

HTML Formular: Leeren eines Input Feldes bei Auswahl von Pulldown Menu

2008-02-06T17:28:00.001+01:00

In einem Formular gibt es bei diesem Fall zwei Feldergruppen die miteinander eine Abhängigkeit haben. So gibt es zwei Feldgruppen (Fieldset), die erste mit einem Input: Ein Textarea und ein Pulldown (Select) Menu, das zweite Fieldset beinhaltet lediglich ein Pulldown (Select) Menu. Wenn man nun auf dem zweiten Pulldown Menu was auswählt (Javascript Event "onchange"), so sollten alle drei Felder (Input, Select und Textarea) vom ersten Fieldset geleert werden.

Dies geschieht wie folgt:

Als erstes muss das Formular mit einem Namen versehen werden:

<form name="form">

Die erste Felder Gruppe besitzt ein Textarea, ein Input und ein Pulldown Feld und sieht wie folgt aus:
<textarea name="EindruckAdresse" cols="21" rows="3" style="width: 250px;"></textarea> <input type="text" name="EindruckKonto" size="25" style="width: 250px;"> <select name="A4_mit_ES" style="width: 366px;"> <option value="Bitte wählen Sie aus">Bitte wählen Sie aus</option> <option value="3000 Ex.">3000 Ex.</option> <option value="5000 Ex.">5000 Ex.</option> </select>
Die zweite Felder Gruppe, erhält eine Auswahl (select) mit 3 Optionen:
<select name="A4-ES-105"> <option value="Bitte wählen Sie aus">Bitte wählen Sie aus</option> <option value="5000 Ex.">5000 Ex.</option> <option value="10000 Ex.">6000 Ex.</option> </select>
Nun gibt es die Bedingung, dass wenn man in der zweiten Gruppe im Pulldown einen anderen Wert auswählt, das Input, das Textarea Feld per Javascript geleert und das Pulldown Menu auf den Anfangswert gesetzt werden:

Dazu fügen wir im Pulldown Menu, dem select Tag folgendes Attribut bei:

onchange

Um nun die Felder zu leeren, füllen wir in diesem Attribut folgende Werte ein:

     JavaScript:
       document.form.EindruckKonto.value = '';
       document.form.EindruckAdresse.value = '';

form

EindruckKonto

EindruckAdresse


      document.form.A4_mit_ES.selectedIndex=0;

Dabei steht form für den Formular Namen und A4_mit_ES für den Feldnamen.

 <select name="A4-ES-105" onChange="JavaScript:document.form.EindruckKonto.value = ''; document.form.EindruckAdresse.value = ''; document.form.A4_mit_ES.selectedIndex=0;">

Gesamter HTML - Code:


<form method="post" action="action.php" name="form">

   <fieldset title="Adresse">
   <legend>1. Adresse</legend>
       <textarea name="EindruckAdresse" cols="21" rows="3" style="width: 250px;"></textarea>
       <input type="text" name="EindruckKonto" size="25" style="width: 250px;">
       <select name="A4_mit_ES" style="width: 366px;">
           <option value="Bitte wählen Sie aus">Bitte wählen Sie  aus</option>
           <option value="3000 Ex.">3000 Ex.</option>
           <option value="5000 Ex.">5000 Ex.</option>
       </select>
   </fieldset>
   <fieldset title="Adresse 2">
   <legend>2. Adresse</legend>
       <select name="A4-ES-105" onChange="JavaScript:document.form.EindruckKonto.value = ''; document.form.EindruckAdresse.value = ''; document.form.A4_mit_ES.selectedIndex=0;">
           <option value="Bitte wählen Sie aus">Bitte wählen Sie aus</option>
           <option value="5000 Ex.">5000 Ex.</option>
           <option value="10000 Ex.">6000 Ex.</option>
       </select>
   </fieldset>   

</form>

CMS und SEO - vermeintlich ohne Bande, in Wahrheit dicke Freunde

2008-01-24T12:37:00.001+01:00

Für den Werbeclub Zentralschweiz durfte Thomas Fischer von der Brunner AG, Druck und Medien, Kriens am Montag, 21. Januar im AAL Luzern über Trends und Zukunftsszenarien im Online-Marketing sprechen.

Im Speziellen wurde der Stellenwert der Suchmaschinenoptimierung (SEO) und die Rolle, die dem CMS dabei zukommt, erläutert. Im Anschluss an das Referat bestand in der Diskussionsrunde und während des Apéros die Möglichkeit, mit den Web-Spezialisten von Brunner ins Gespräch zu kommen und offene Fragen zu klären.

Weitere Informationen und SEO-Massnahmen welche das Brunner CMS bereits standardmässig unterstützt gibt es unter folgendem Link: Brunner CMS und SEO

XHTML valide Flash Datei einbinden, mit alternativem Bild

2008-01-11T11:23:00.005+01:00

Um eine korrekte Flash Animation einzubinden welche zudem W3C validen XHTML Code erzeugt, und dabei bei nicht vorhandenen Macromedia Flash automatisch ein Alternativ-Bild anzeigt, sollte folgender Code verwendet werden:

<object type="application/x-shockwave-flash" data="http://url.ch/logo.swf" id="flashmovie" codebase="http://download.macromedia.com/pub/
shockwave/cabs/flash/swflash.cab#
version=6,0,0,0" height="40" width="315">
<param name="movie" value="http://url.ch/logo.swf" />
<param name="quality" value="best" />
<param name="menu" value="false" />
<param name="play" value="true" />
<img src="images/bg_navi.jpg" alt="logo" id="flashimage" height="40" width="315" />
</object>

CSS Schriften Standardisierung

2008-01-08T17:29:00.002+01:00

Häufiges Problem vom Einsatz mit Relativen Schriftgrössen ist die Normalisierung der Schriftgrösse. Dabei wird eine fixe physikalische Schriftgrösse von 13 Pixeln (mit Hilfe des Yahoo YUI Fonts CSS ) definiert, welches in der wichtigsten CSS Datei folgendermassen reingeladen wird:

@import url("fonts.css");

Von hier an werden alle Schriftarten mit Prozent Werten relativ angegeben, ausgehend von den 13 Pixeln. So wird eine Schriftgrösse von 12 Pixeln mit 93% wie folgt definiert:

div#content p, div#content li, div#content td p {
font-size: 93%;
}

div#content li li {
font-size: 100%;
}

Mit diesen CSS-Eigenschaften lassen sich alle Schriftgrössen auf fast allen Browsern mit derselben Schriftgrösse darstellen, in welchem dann auch in unserem CMS Backend Wysiwyg Editor (TinyMCE) Pixel genau angezeigt werden. Dies ermöglicht übrigens auch die relative Schriftgrössen Darstellung für barrierefreie Websites.

Seite beim Aufruf direkt ausdrucken

2008-01-03T15:48:00.001+01:00

Es gibt immer wieder Seiten auf der Website die mit hochauflösenden Bildern und auch Logos ausgedruckt werden. Nun dies erfolgt im Brunner CMS mittels einer Druck Vorlage und dem dazugehörenden Print CSS. Diese können individuell nach Ihren Wünschen angepasst werden. Die gewünschte Seite zum Ausdrukcen kann vom Besucher entweder per Link, per Browser-Menu (Datei - Druckvorschau) oder direkt mit folgendem JavaScript Befehl im HTML Code auf der Seite in einer "Skript Zelle" ausgeführt werden:

print("

<script language="Javascript">
window.print();
</script>

");

PHP Mailer, Formular Versand per E-Mail mit PHP

2008-01-03T11:42:00.001+01:00

Obwohl dieses Thema nichts direkt mit unserem CMS zu tun hat, ist dieses Tutorial von Tanmar.info sehr nützlich für ältere und statische Webseiten um erfolgreich Formulare (Text/HTML) per PHP/HTML mit oder ohne Attachments zu übermitteln die natürlich auch beim gewünschten Adressaten ankommen!

Hier das deutsche Tutorial dazu:
www.tanmar.info/content/view/36/64/

Die Dateien dazu findet man auf folgender SourceForge Seite:
http://phpmailer.sourceforge.net/

Wort mit Trennzeichen erzwingt Tabellenbreite im Firefox Browser

2007-12-14T15:56:00.001+01:00

Normalerweise brauche ich absolut keine Tabellen mehr in Inhaltsbereichen und es braucht viel bis ich auf eine Tabelle zugreife, aber in diesem Fall muss eine komplexere Liste von Jobangeboten (5 Spalten, 30 Zeilen) dargestellt werden.

Wegen einer beschränkten Breite (600 Pixel) müssen die Spaltenbreiten dementsprechend angepasst werden. Nun habe ich heute festgestellt, dass längere Wörter mittels Trennzeichen (-) verschönert getrennt werden können. Leider aber nur im Internet Explorer! Der Firefox Browser kann leider das Wort "Restaurations-angestellter" nicht automatisch trennen und erzwingt somit die neue Tabellen/Spaltenbreite!

Hier führt leider (noch) kein Weg vorbei nach dem Trennzeichen (-) manuell ein Umbruch einzufügen.

<p>Restaurations-<br />angestellter<p>

Website Text-Inhalt vor einfachen Copy&Paste schützen

2007-12-12T16:00:00.000+01:00

Mit folgendem Javascript kann auf einer Website der Inhalt vor dem "Content" Klau erschwert (nicht geschützt!) werden. Ist nicht wirklich sinnvoll, aber trotzdem kann es hilfreich sein.

Hier der zu implementierende Javascript Code:

function captureEvents(){
return false;
}

document.onselectstart = captureEvents;
document.onselect = captureEvents;
document.ondblclick = captureEvents;
document.onmousedown = captureEvents;

Zusätzlich kann für Mozilla Browser das Ganze auch im CSS wie folgt gelöst werden:

.unselectable{

/* Gecko-based, Mozilla */
-moz-user-select:none;

/* Safari */
-khtml-user-select: none;

}

<p unselectable="on">Inhalt welcher nicht angewählt werden kann.</p>