Das krümelige Weblog – live aus der Parallelgesellschaft ..

Small helper: StickWiki

Information management is a complex field and the solutions available – be they freeware, open source or commercial – to gather, organize and interlink information range from small post-its up to complete version-based and multi-author capable wikis and project content management systems.

Me, I’m used to creating simple and small text files with a more or less descriptive title and the information needed inside of them. The files are optimally placed in one directory where i normally have to search for the bits of information that i currently need. As a formal Windows-user i was used to using the standard “My Documents”-folder – which became bloated very fast – to place those files because this is the fastest directory to open and save files from and to. The main problem with this approach consists in the files being so many and no obvious and plain system can be derived to organize title and content of the files. Often, when I’m writing to one file about a subject I would include other information simply because they flew by me while writing.

Yesterday, while searching for a simple todo-application for work, I found the small application “StickWiki“. It’s a wiki-system that consists of only one (!) html-file which updates itself using javascript.

Wiki on a Stick (in short WoaS) is a wiki that lives in one self-modifying XHTML file. It’s perfect to be used at home or at office, on your laptop or USB pen drive (along with Portable Firefox if you want) and even in a floppy disk! It can be used as a personal notepad, calendar, repository for software documentation and many other things; it allows full customization and extension by your own scripts or libraries. It also offers true AES encryption of pages.

Of course the StickWiki has to be placed on a writable media such as usb-stick, but since most people seem to be using those, this shouldn’t be a problem. On the other hand time will show how effective the system is for a larger set of information, especially if it’s encrypted.. I hope i won’t forget to backup the file..

In general I think the idea is marvelous. Though I use to place much of the information that I need to be as mobile as myself (i.e. at work and at home) on my server and access through some internet connection, this is a much easier and stable way of accessing and organizing small bits of information. Have a look for yourself!

http://sourceforge.net/projects/stickwiki/

IE4Linux – download the past!

Nicely done! I was just about to call a friend to let him use his Microsoft Windows-machine to check a site out, that I just created – because with me using ubuntu, i couldn’t see, if the site looks o.k. with IE. For whatever reason i started looking for sites like browsershots.org which could provide me with a screenshot of how Internet Explorer displays the html code.. The problem with those sites – and specially browsershots is that they’re extremely heavily trafficked and therefor for a quick check of site too slow.

While i was searching i came across the site IEs4Linux from which one can download a script, that will install up to three versions of Internet Explorer on a linux machine. To start them you need Wine.

Though shalt not duplicate

Google reacts really sensibly to duplicated content. And the results of it’s reactions aren’t even logic!

Last week, i was testing some settings, plugins and design elements for my site on a test server. To make the test as realistic as possible, i copied the whole wordpress-database to a new database and let the new wordpress-installation handle all the content. Unfortunately by the time i was finished Google already got aware of my test site and indexed it very thoroughly leaving me wondering, why the server response time was so long.

The day after the big indexing fest, my main site got kicked out of the index! And i mean really kicked out as in no-where-to-be-found! The Page-Hits dropped below 500 Hits/day¹.

After i removed the test site (or rather hid it) my main site got back into the index. Yet, the traffic didn’t recover and i think it will take some time..

But why would google downgrade my site, when the content is duplicated?? I do understand the need to downgrade those pages that are copied off of wikipedia, but google wouldn’t downgrade wikipedia for that content, would it? Why didn’t “the google” acknowledge my main site as being the authority and the test site as copied content?

There are two lessons here:

1. As the title says: don’t duplicate or you get kicked! This is specially interesting for those who publish in different sites. If you want to duplicate articles, indicate as clear and authoritative as possible through well-placed links² which of the two duplicates is the original and which is the copy. Plus: don’t let anyone feed off of your full-text feed!
2. We have to find alternatives to google. Half of the visitors on my page get here through google. This has to change and i’ll be looking into it.

1. these are google-counts, my own stattraq is still counting around 4000 Hits (formerly 5000-6000 Hits; i think it’s counting some bots as well, but one difference is that google analytics only counts visitors, who have javascript enabled!) [↩]
2. i.e. title[↩]

Zwei Jahre Too Much Cookies Network

Meine kleine Seite ist vor einigen Tagen zwei Jahre alt geworden. Leider kann ich das nicht mehr mit Genauigkeit sagen, da der Einleitungsartikel kein ordentliches Datum trägt¹. Damals lief es eh’ über mein eigens programmiertes blog-System, das etwa ein Jahr anhielt, bis ich es etwa 11 Monate nach Eröffnung der Seite mit WordPress ersetzt hatte. Seitdem bin ich fast durchgängig mit dem etwas abgeänderten Template “bg_conn”². Seit einiger Zeit denke ich über eine Umstellung des Designs nach, aber so richtig gefunkt hat es nicht.. Jetzt endlich habe ich mich für das vorliegende Design entschieden, das aber immer noch als “work in progress” zu verstehen ist..

Viel Spaß weiterhin..

1. oder aber die Seite ist weit älter als ich dachte..[↩]
2. was eine Abkürzung für “Brown and Grey Connections” ist[↩]

Transparenzen in (X)HTML

Die Option, überlagerte Elemente durch andere hindurch scheinen zu lassen, eröffnet neue Möglichkeiten zum Webseiten-Design. Ob als für dynamische Navigationselemente oder für allgemein statische Designs, Transparenzen verleihen einer Webseite eine zusätzliche Dimension ohne große Änderungen zu fordern. Leider sind die Implementierungen bis in den heutigen Browsergenerationen selbst nicht ‘transparent’, wodurch der Webdesigner schnell zum Verzweifeln kommt.

Offiziell

Im CSS-Standard CSS 3 wird erstmals ein standardisiertes Attribut eingeführt, um ein Element durchsichtig zu machen. Das offizielle CSS-Attribut, um ein Element halb-transparent zu machen wird mit “opacity” festgelegt. Auf ein Element angewandt, wird sowohl das Element selbst, als auch alle Unterelemente je nach Übergabeparameter halbmaskiert dargestellt und Elemente dahinter sichtbar.

Obwohl CSS 3 noch im Recommendation-Status steckt¹ wurden einige seiner Vorgaben bereits von einigen Browsern umgesetzt. Bei opacity hat jeder Browserhersteller sein eigenes Süppchen gekocht:

Internet Explorer

Der Internet Explorer hat seit der Version 4.0 die Möglichkeiten implementiert, Filter auf Elemente anzuwenden. Dazu gehörten sowohl Verwischeffekte (Blur()), wie auch Schatten oder Farbwertänderungen, aber auch der Filter Alpha(). Damit lässt sich im einfachsten Fall die Transparenz für ein Element wie in der W3C-Spezifikation festlegen. Darüber hinaus erlaubt der Filter Transparenz-Verläufe festzulegen, die linear, rechteckig oder radial sind.

Der Internet Explorer unterstützt bisher (7.0) nicht das opacity-Attribut. Es lässt sich allerdings dazu überreden: IE7 [sic!] ist eine Bibliothek, die in Laufzeit das Verhalten des Internet Explorers bei einer gegebenen CSS-Vorlage an den Standard anpasst. Ich habe die Bibiothek leider mit dem Internet Explorer 7 nicht zum Laufen bekommen.

Es gibt weitere Beschränkungen der Transparenz im Internet Explorer: Bei einem transparenten Element muss die Eigenschaft hasLayout wahr sein, damit die Transparenz tatsächlich angezeigt wird. Dazu müssen bestimmte CSS-Attribute gesetzt sein – bspw. eine absolute Positionierung, eine feste Dimension oder ein float-Attribut. Wichtig zu wissen, dass ein relativ positioniertes Element, das nur über margins, nicht aber über eine feste Breite festgelegt ist² kann im Internet Explorer im Allgemeinen nicht als transparentes Element dargestellt werden.

Firefox und Opera

Im Firefox soll das Standard-Attribut opacity mit der Version 3.0 Anwendung finden. Bis dahin werden sich Webdesigner mit dem Mozilla-eigenen Attribut -moz-opacity zufrieden geben müssen. Dieses ist in Anwendung und Auswirkung identisch mit opacity.

Opera auf der anderen Seite hat in der Version 9.0 bereits die CSS3-Eigenschaft opacity fest integriert!

Weitere Ressourcen

• CSS 2.1 & 3 Support in KHTML 3.4
• A brief introduction to Opacity and RGBA – css3.info
• Cross-Browser Variable Opacity with PNG: A Real Solution

1. letzte Version des Farbmoduls vom Mai 2003![↩]
2. was ja nicht selten vorkommt[↩]

Internet Explorer 7.0 vs. Firefox 2.0

Many haven’t noticed it yet, but for three days now we are living in a new era. This era is marked by the release of the new and updated Internet Explorer 7.0 and the continuation of the Browserwars! I’ll try and copmpare the outcome of Redmond’s torturing of it’s employees with what Firefox 2.0 (due anytime now, testing RC3) has to offer.

Introduction: Browser Wars

The Browser Wars are rememberd because of the easily grasped, bipolar nature of the story. There was Explorer, there was Netscape, and they were locked in Eternal Struggle. This kept the story simple and reminded people of other bipolar struggles with Good vs. Evil overtones in recent world history.
Browser Wars II

I remember the times when the IT-industry (and the geek-community) was split on which browser to use and ultimately which browser to support. Often the average user had to cope with what his internet-provider provided him with. So the browser that was packaged with AOL, T-Online or Compuserve¹ had big influence on which browser had to be supported by the webdesigners of the time.

I seem to remember that at some point, AOL decided to switch to Microsoft’s Internet Explorer and that had my employer pounding at me to get his online-shop working properly (especially all the javascript hover-effects). Mentioning one or both browsers infront of the right audience sparked a heated debate about which was better and did a better job at implementing the html-standards.

Of course at that time, noone really knew what those standards were about and blaming one browser or the other for not displaying some element (possibly invented by the other browser) was rather hypocritical. For example: with the release of Internet Explorer 6.0 Microsoft had invented their own DOM that was very handy but not really standards-compliant..

Tabbed Browsing

Although mainly introduced² by Firefox, Tabbed Browsing has become very popular and by now is something, every internet browser should have although there still isn’t any standard of how to implement it..

Firefox 2.0‘s tabs open fast, they can be moved and resorted and they become narrower when more are opened. The problem of too many tabs has been solved in the past by stacking tabs in more than one line. Version 2.0 now has the ability to scroll tabs to the left and right. At the right side of the tabs there is a button that shows the tabs in a horizontal list (also scrollable). It is enabled once the tabs exceed a certain amount.

Each tab has it’s own “close”-button, which i find rather counter-productive, especially since this button is only visible, when the tab is active. Of course it will be possible to change this behaviour and place a common “close”-button at the right side via plugin. Furthermore one can close the active tab with the combination [Ctrl-W] or via middle-button click.

To open a new tab in Firefox or Internet Explorer, one can middle-click or Ctrl-Click on a link, type Ctrl-T or double-Click on an empty space on the tab-bar.

Internet Explorer 7.0‘s support of tabbed browsing is very close to that of Firefox but there are some minor differences: although the opened tabs can be scrolled right and left, it’s not possible to scroll using the scroll-wheel on the mouse. On the other hand, Internet Explorer supports a miniature view of all the opened tabs (called Quick Tabs) via Ctrl-Q or the button at the left side of the tabs-bar,³

Internet Explorer’s tabs implementation isn’t quite as good as that of Firefox. Opening a new tab is rather slow and switching between tabs per keyboard is a little bit uncomfortable. The shortcut to switch between tabs is the same as switiching between open documents in Word or Excel: Ctrl-Tab for forward and Ctrl-Shift-Tab for backward. Other than that one can chose a specific tab by pressing Ctrl-#⁴. In Firefox it is additionally possible to switch forward and backward via Ctrl-PageUp and Ctrl-PageDown, which can be a huge advantage for pro users..

Internet Explorer’s tabs have one advantage: the user can chose to open the tab by default next to the active tab! In Firefox 1.5 it was possible to drag the link to the tabs-bar and release it there either to overwrite an existing tab or to add a new one at any place in between or at the end of the tablist. I hope this function will be in the final Firefox 2.0!

Web 2.0 – Webfeeds, Configurable Search Engines and Encyclopedias

Both browsers support viewing and subscribing to Webfeeds. They automatically pick-up alternative feeds and give the user the option to view them. Additionally Internet Explorer 7.0 gives one the option to sort the feed-items by Date, Title or Author or to search the feed. Since these functions are pure xslt-functions, they are executed rather fast and could give the user some advantage..

Equally both browsers provide the ability to search in different search engines although the list of search engines for Microsoft’s browser is a little bit smaller than that of Firefox⁵.

Internet Explorer 7.0 incoorporates the ability to “research”, which roughly means “looking up things in msn-services” like Encarta for example. Until now i couldn’t figure out, what the difference to the normal search via wikipedia or any other service was.

Pageview and Zoom

In Firefox, pressing Ctrl-+ and Ctrl– zooms the text on the active page in or out. The zoom-level is nearly infinite. In Internet Explorer 7.0, the zoom-function zooms the whole page⁶. This way, images and other objects stay at an appropiate size. At the same time, the scroll bars get zoomed too..

Equally both have a function to Preview Print-Output, where the Internet Explorer has a slight advantage since it can zoom the printed page in and out and change the page-margins.

More Firefox Features

Firefox is getting even better with the release of version 2.0:

Resuming your browsing session: The Session Restore feature restores windows, tabs, text typed in forms, and in-progress downloads from the last user session. It will be activated automatically when installing an application update or extension, and users will be asked if they want to resume their previous session after a system crash.

Inline spell checking: A new built-in spell checker enables users to quickly check the spelling of text entered into Web forms without having to use a separate application.⁷

JavaScript 1.7: JavaScript 1.7 is a language update introducing several new features such as generators, iterators, array comprehensions, let expressions, and destructuring assignments. It also includes all the features of JavaScript 1.6.

Furthermore, Firefox has over Internet Explorer, that it supports SVG. The support is far from being optimal, but at least it’s something.

Conclusion

I hope my take on the two browsers can be helpful for further examination and improvement. Although we can look forward to a new Browser War, this time around, the opponents will have to be more civilized (i.e. standards are there to be held) and they both have to deal with a growing number of alternatives⁸ be it opera, Safari or Konqueror. I will hope for the best for both browsers but will remain for the beginnning a loyal Firefoxer.

1. i think they all still exist in one way or the other[↩]
2. i know, some browsers had Tabbed Browsing before Firefox, but Firefox was the one to really make it popular[↩]
3. Of course there is a plugin for Firefox to do this, but to be honest, it’s not that fast..[↩]
4. # stands for a number, that way it’s possible to navigate to the first nine tabs[↩]
5. missing imdb and Technorati for me![↩]
6. via “View”>”Text Size” it’s still possible to only zoom the text![↩]
7. in practice, there is still some work to be done here![↩]
8. which i ignored blatantly in this article[↩]

CSS-Pulldown auch für Internet Explorer

Bis heute ist der Artikel “Pulldown Menues” der am meisten gelesene Artikel auf diesem Blog. Im Schnitt wird er etwa 2000 Mal im Monat gelesen. Das Interesse spiegelt sich auch an der hohen Google-Treffer-Quote wieder. Das einzige Problem war bisher die Unterstützung für den Internet Explorer.

Da der IE den :hover-Selektor nur für link-Elemente kennt, konnte das CSS-Pulldown damit nicht funktionieren. Ich hatte als Ausweg ein Script vorgeschlagen, das nur für den IE einen klassischen Javascript-Hover-Effekt vollzieht. Damit funktioniert das theoretisch auch, allerdings tauchten damit einige Probleme mit dem Eventhandling onmouseout auf. Das Ereignis wurde nur unregelmässig vom IE wahrgenommen und führte dazu, dass die Menüs offen blieben.

Weiterer Nachteil: Opera kann eigentlich die CSS-Angaben ordentlich interpretieren, hat aber ein Problem dadurch, dass es im Script als IE erkannt wird..

Lösung

Nun habe ich das Menü so umgebaut, dass es auch im Internet Explorer (<6.0) funktional ist. Den entscheidenden Tip bekam ich von der Seite cssplay (über wer-weiss-was). Dabei geht es darum, jedes Untermenü mit dem Titel in ein Link-Element einzuschliessen. Zwar darf in validem HTML ein Link-Element nicht Kind von einem anderen Link-Element sein, allerdings spricht der Internet Explorer nur das niedrigste DOM-Link-Element an, wenn es zu einem Klick kommt. Damit der Quelltext trotzdem valide bleibt, wird der IE-Zusatz als spezieller Kommentar-Hack ausgeführt:

<li><a href=".." class="iehide">Technik</a>
<!--[if lte IE 6]>
<a href="..">Technik
<table><tr><td>
<![endif]-->
Menü-Liste
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->


Nun muss der eigentliche Menü-Kopf versteckt werden (da sonst doppelt) und die Pulldown-Funktionalität für den IE erstellt werden. Cssplay schlägt vor, eine eigene stylesheet-Datei für den IE zu erstellen und den link dahin wieder in einem IE-Kommentar einzuschliessen. Es reicht aber auch schon in der normalen stylesheet-Datei folgendes einzutragen (s. Star-HTML-Hack):

* html .menu .iehide, * html .menu ul li a:visited.iehide {display:none;}
* html .menu a:hover ul li a.hide {display:none;}
* html .menu table, .menu tr, .menu td {
margin:0px;
padding:0px;
border:0px;
border-collapse:collapse;
}
* html .menu a table {
display:none;
}
* html .menu a:hover {background:transparent;}
* html .menu a:hover ul,* html .menu a:hover table {display:block;}
* html .menu a:hover ul li a.sub {}
* html .menu a:hover ul li a {display:block;}
* html .menu a:hover ul li a ul {visibility:hidden;}
* html .menu a:hover ul li a:hover {}
* html .menu a:hover ul li a:hover ul {visibility:visible; }
* html .menu a:hover ul li a:hover ul.left {left:-105px;}

Einige Anmerkungen

• Im stylesheet sind bereits Unteruntermenüs vorgesehen, die seitwärts aufklappen. Diese werden derzeit aber nicht auf der Seite verwendet.
• Für a:hover muss ein Hintergrund gesetzt werden, sonst funktioniert das Aufklappen aus irgendeinem Grund nicht!
• Theoretisch sollte es auch ganz ohne Tabelle funktionieren, tut es aber nicht!

The dark side of the internet

Drei Artikel über ordentlich Strukturiertes HTML und CSS, die sehr zu empfehlen sind:

• Join me, and together we can rule the galaxy as father and geeks!”: Counting Sith Lords
• Accessibility explained the Star Wars way: interessante Erklärung zu barrierefreiem Webdesign.
• Einführung in XHTML, CSS und Webdesign: Eine wirklich gelungene Einführung in Webdesign. Auch gut zum Stöbern..

Alle Links habe ich via der Mailingliste der PHP-Usergroup Hannover.