16.11.2010
09:09

Christoph unterstützt uns ab sofort!

Bei uns geht es weiter voran. Mit Christoph begrüßen wir einen angehenden Informatiker bei uns, der uns bei der Erstellung verschiedener Kundenprojekte und auch bei der Weiterentwicklung eigener Projekte wie unserer Renderfarm unterstützt. 

Wir freuen uns auf die Zusammenarbeit mit ihm und darauf für unsere Kunden in Zukunft weiterhin in den Bereichen IT-Dienstleistungen, 3D-Simulationen und Webdesign als kompetenter Ansprechpartner und Dienstleister Lösungen zu entwickeln und umzusetzen. 

Herzlich willkommen Christoph und viel Spaß und Freude bei der gemeinsamen Arbeit!

Javascript Galleria and IE6, 7 and 8 compatibility

As requested by a few posters at getsatisfaction.com I will post my effort to make Galleria from galleria.aino.se compatible with IE 6 today and give a few hints to problems with IE 7 and IE 8. For those who run the classic theme I am sorry, we needed only a lightbox theme so far so thats what I will describe below.

I think all the Javascript code included in Galleria runs in IE 6. The one big problem is the themes and their CSS code. I managed to get it working in IE 6, but there are still a few small visual glitches, e. g. transparent PNGs. If it really disturbs you you can fix it easily. Our policy regarding IE 6 is to support it so far, that the site is readable and usable, but we will overlook some minor design problems as we hope more and more people start using good browsers.


Here is the Galleria with our theme, click on one of the images to open the Galleria Lightbox:

Fixes for IE 7 and 8

This part is needed to fix displaying and loading errors in IE 7 and 8. 

As far as I debugged the issue the theme CSS loading code does not work well in IE7 and 8. My solution was to load the CSS of the theme from the HTML file. To do this you need to follow these steps:


  1. Edit the theme .js file and comment the css line out like below::

    //css: 'galleria.[THEMENAME].css',



  2. Include the css file in the HTML file of your page:

    < link rel="stylesheet" type="text/css" href="[PATH_TO_GALLERIA]/themes/[THEMENAME]/galleria.[THEMENAME].css" />



  3. Patch galleria to load the theme without css,
    original code (in my galleria version this code appears around line 1343):

    if (obj.css) {
    var css;
    proto.loop(proto.getElements('script'), function(el) {
    var reg = new RegExp('galleria.' + obj.name.toLowerCase() + '.js');
    if(reg.test(el.src)) {
    css = el.src.replace(/[^\/]*$/, "") + obj.css;
    proto.loadCSS(css, function() {
    G.theme = theme;
    jQuery(document).trigger( G.THEMELOAD );
    });
    }
    });
    if (!css) {
    G.raise('No theme CSS loaded');
    }
    }
    return theme;

    Add the lines at the end:

    if (obj.css) {
    var css;
    proto.loop(proto.getElements('script'), function(el) {
    var reg = new RegExp('galleria.' + obj.name.toLowerCase() + '.js');
    if(reg.test(el.src)) {
    css = el.src.replace(/[^\/]*$/, "") + obj.css;
    proto.loadCSS(css, function() {
    G.theme = theme;
    jQuery(document).trigger( G.THEMELOAD );
    });
    }
    });
    if (!css) {
    G.raise('No theme CSS loaded');
    }
    } else { //########### EDIT HERE ###########
    G.theme = theme;
    jQuery(document).trigger( G.THEMELOAD );
    }
    return theme;

Inline code to start Galleria (change to your needs)

  1. <script type="text/javascript" src="fileadmin/templates/js/galleria/jquery.js"></script>
  2. <script type="text/javascript" src="fileadmin/templates/js/galleria/galleria.js"></script>
  3. <link rel="stylesheet" type="text/css" href="fileadmin/templates/js/galleria/themes/jnw-lightbox/galleria.jnw-lightbox.css" media="screen" />
  4.  
  5. <script type="text/javascript">
  6. $(document).ready(function() {
  7.  
  8. loadTheme();
  9. startGalleryDelayed();
  10. });
  11.  
  12. function loadTheme() {
  13. Galleria.loadTheme('fileadmin/templates/js/galleria/themes/jnw-lightbox/galleria.jnw-lightbox.js');
  14. }
  15.  
  16. function startGalleryDelayed () {
  17.  
  18. var i = 0;
  19. $(".csc-textpic").each(function () {
  20. $(this).addClass("galleria"+i);
  21. $(".galleria"+i).galleria({
  22. data_config: function(img) {
  23. // img is now the image element
  24. // the function should return an object with the new data
  25.  
  26. image = ($(img).parent().attr('href')+'');
  27. var startToken = "index.php?eID=tx_cms_showpic&file=";
  28. var endToken = "&width=";
  29. imageSrc = unescape(image.substring(image.indexOf(startToken)+startToken.length,image.indexOf(endToken)));
  30.  
  31.  
  32. return {
  33. image: imageSrc,
  34. description: $(img).parent().next().text()
  35. }
  36. }
  37.  
  38. });
  39. i++;
  40. });
  41.  
  42.  
  43. }
  44. </script>

Now to IE6: CSS styles

IE 6 does not know the "position: fixed" style. So I changed all this to "position: absolute" only for IE 6 using the star hack (see galleria.jnw-lightbox.css, at the end).

This works now, but our lightbox shows up on top of the page, even if we scrolled down before and may not be visible. I used an ugly hack for this: As soon as the lightbox opens, I set the scroll position to 0. And when the user closes the light box, I scroll to the position I saved before. These changes can be found in galleria.jnw-lightbox.js at line 94 and line 139/140.

Thats all, and here are all files including the patched theme and Galleria:

galleria-lightbox-ie6.zip

It is still not very beautiful in IE 6 because the transparent PNGs are not working, but this can easily fixed by converting them to GIFs or using the IE 6 PNG fix.

EDIT: Updated CSS and ZIP file. There still was a problem with height in IE 6. The key to get Galleria themes running in IE6 is avoiding "position:fixed" and setting width and height for all elements surrounding the gallery. This includes the elements html and body, set width and height for them to 100%!

To get the Lightbox working on this page I had to set a fixed height for the stage. Depending on the surrounding layout it may work with height:100% as well, as you can see here: http://www.niederwald.de/en/conferences/conference-rooms.html

And excuse the layout bugs in IE 6 on this page, our policy for our website is to maintain functionality and readability for IE 6 users, but we will not spend our time to fix all design glitches. The site linked above is a customer site. As the target audience of that site includes a significant fraction of IE 6 users IE 6 is 99% supported there.

Hope this helps all brave fighters against IE 6!

22.09.2010
16:00

Herzlich willkommen Nahom

Unverhofft kommt oft. Seit vergangener Woche haben wir einen neuen Mitarbeiter. Mit Nahom haben wir einen jungen und engagierten Praktikanten, der im Bereich IT-Service und Web-Entwicklung aktiv ist. Natürlich will er auch möglichst bald noch einen Blick in unseren Bereich 3D-Simulationen für Produkte werfen - und das wird er auch :-)

Wir freuen uns auf eine gute Zusammenarbeit und eine Menge neuer Ideen und Unterstützung bei unseren Projekten!

01.07.2010
11:04

Keywords für neue Produkte

Es ist nicht einfach Keywords für die eigene Landingpage zu definieren. Zwar geht es im Regelfall „nur“ darum, die eigenen Keywords so zu definieren, dass sie zur Seite passen und potenzielle Suchen abdecken, was sich leicht anhört, am Ende aber doch meist schwieriger ist als gedacht. Gleichwohl diffiziler wird die Angelegenheit, wenn es sich um ein neues Produkt handelt, nach dem nicht gesucht wird, da es noch nicht bekannt ist. Einerseits könnte man nun sagen, dann muss eben statt der Suchmaschinenoptimierung eine Bannerkampagne oder dergleichen gestartet werden, denn Keywords können nur für Produkte gefunden und sinnvoll genutzt werden, die auch gesucht werden. Natürlich würde das die Problematik umgehen, doch gleichwohl würde man Kunden, die nach dem Vorgängerprodukt oder ähnlichen Produkten suchen nicht direkt erreichen.

Ausgangspunkt: Keywords für ähnliche Produkte suchen

Es stellt sich also die Frage, wie kann man dieses Problem geschickt lösen. Eigentlich liegt die Lösung für die Keywordrecherche auf der Hand, man geht umgekehrt zum sonstigen Ansatz der Spezialisierung auf ein exakt passendes Keyword vor. Statt die Suche von einem allgemeinen Begriff auf immer speziellere Suchbegriff zu verfeinern, setzt man sich umgekehrt in Bewegung und prüft in der Nähe des eigenen Produkts liegende Keywords auf deren Eignung. Statt den Baum vom Stamm in die Äste zu durchsteigen, beginnt man auf einem Ast und bewegt sich solange Richtung Stamm, bis die Keywords ausreichend erfolgversprechend sind.

Die Keywords für die Landingpage werden folglich etwas unpräziser gewählt sein. Damit öffnet man sich die Möglichkeit auch bei bestehenden Produkten gefunden zu werden und die Nutzer von den Vorteilen des neuen Produkts auf der Landingpage zu überzeugen. Allerdings tut sich mit diesem Vorgehen ein Problem auf, das insbesondere bei Pay-per-Click-Werbung zu beachten ist, denn aufgrund der geringeren Übereinstimmung mit den Erwartungen des Besuchers der Landingpage werden viele abspringen und die Kosten pro Conversion werden stark steigen. Entsprechend ist es notwendig, die Budgets für eine solche Kampagne strikt zu überwachen. Es kann daher sinnvoll sein, zu versuchen zunächst in den generischen Suchergebnissen ein hohes Ranking zu erreichen, denn hier sind die Grenzkosten des nächsten Klicks null und somit ist es sogar wünschenswert, dass möglichst viele Klicks getätigt werden, um die Durchschnittskosten zu senken.

Jetzt interessiert uns, wie andere bei dieser Problematik vorgehen, daher freuen wir uns auf entsprechenden Kommentare!

23.06.2010
11:23

Studentische Aushilfe gesucht

Wir suchen dich. Ja, wirklich :-) Wir brauchen einen engagierten Studenten oder eine engagierte Studentin, die gerne mit uns zusammen Projekte im Bereich Web, 3D und allgemeine IT durchführen möchte.

Details finden sich in unserer Stellenbeschreibung, mit einem Hinweis, wo die Bewerbung hin soll. Wir freuen uns auf Eure Bewerbungen!