html7bar – Web Windows Taskbar

Info

Die html7bar ermöglicht eine attraktive Platzierung von Weblinks und anderen Informationen in einer Windows 7 nachempfundenen Footer-Leiste.
Der Orb lässt sich anklicken und ein Fenster mit weiteren Links und einem Profilfoto öffnet sich. Wenn dieses Fenster geöffnet ist reicht ein Klick auf den Orb oder irgendwo außerhalb des Fensters um es zu schließen.

Voraussetzung: Auf der Seite muss jQuery eingebunden sein.

Installation

Ich erkläre die Installation der html7bar kurz in textform und weiter unten gibt es noch ein Video zum Nachmachen.

Kurz: .zip Archiv von unten downloaden, lokal entpacken, die Dateien auf den Server hochladen, Pfade in der

html7bar.html

anpassen und die .html mit php includen. Dann Links, Icons und Profilbild anpassen. Das Profilbild sollte 60x60px, Icons 16x16px bzw 32x32px groß sein.

Szenario: Ich möchte die html7bar in einem anderen Projekt einbauen. Um den Code des Projekts nicht unnötig zu vergrößern werde ich darauf hin arbeiten, dass am Ende in diesem Projekt nur noch mit

<?php include("http://url.zur/html7bar/html7bar.html"); ?>

die html7bar eingebaut wird. Somit bleibt eine eindeutige Trennung der html7bar und des ursprünglichen Projekts, der Code bleibt übersichtlich und aktivieren/deaktivieren ist durch das Auskommentieren dieser Zeile vollbracht.

In diesem Video zeige ich die Installation in weniger als 2 Minuten:

Konfiguration

Links ändern:
Sowohl die Links der Orb-Fensters als auch die Links der Taskbar sind in der

html7bar.html

enthalten. Dort könnt ihr URL und Linktext normal abändern.
Icons:
Die Icons müssen alle im

img

Unterordner liegen.
Die Maße sollten 16x16px für die Taskbaricons und 32x32px für die Orb-Fenstericons sein. Hintergrund transparent.
Die Icons werden ebenfalls in der html7bar.html entsprechend angepasst.
Profilfoto:
Das Profilfoto muss ebenfalls im

img

Ordner liegen, sollte 60x60px groß sein und wird in der

html7bar.css

in Zeile 91 (

background: url("img/profilfoto.png") no-repeat;

) angepasst.

Auch interessant:  Tipps zum Schutz gegen E-Mail-Phishing und gefährliche Mails (2019)

Screenshots:

html7bar als Lesezeichen-/Linkleiste:

html7bar als persönlicher, öffentlicher Newsfeed:

Demo

Demo
aktive Version: 2.3

Testnutzung:

<?php include("http://public.hannes-schurig.de/html7bar/html7bar.html"); ?>
Download

html7bar [.zip] (100KB)
aktive Version: 2.3

Changelog


v1.0 – release
v1.0.1 – html7bar credits postlink, fix credits padding
v1.0.2 – fix bar margin (left)
v1.0.3 – several css fixes, almost no css resets anymore (3 left)
v1.1 – using sprite images instead of multiple images (where it is possible) for better performance
v1.2 – it’s now possible to hide the html7bar
v1.3 – better graphics and css, hover everywhere
v1.4 – better sliding trick for hiding the bar (http://bit.ly/oYRoBF)
v1.5 – save html7bar visibility in cookie (if possible), show/hide html7bar on revisit
a.k.a. v2.0 – bugfixes, design optimization, show/hide html7bar with cookie-saving support
v2.1 – search field in orb window now searches the blog
v2.1.1 – code cleaning in html and css, 1 error in transitional xhtml left (has to)
v2.2 – buttons for configs, about and deactivate … i’m not really into this popping-out window myself because of the colors, thinking about something different
v2.3 – finished design for config/about/deactivate-window with shadow-background

10 Kommentare

  1. Die html7bar funktioniert in deinem Blog, auf der Demoseite jedoch nicht.

    Generell ist es schade, dass die Bar einem Funktionalität vorheuchelt. Warum kann man mit dem Suchfeld z.B. nicht wirklich auf deiner Seite suchen? Warum wird der „Herunterfahren“-Button nicht lieber für eine echte Funktionalität genutzt?

  2. Weil sich das Projekt in Entwicklung befindet. Das mit der Suche möchte ich auf jeden Fall noch realisieren. Schlag was vor für den Button Bereich. Was würdest du als Besucher gerne für eine Funktionalität dort haben?

    Edit: Danke für den Bug-Hinweis, alles geklärt.

  3. Aso, dachte, das wäre jetzt halbwegs final – wg. Version 1.0 und so. Na mit „Herunterfahren“ – Achtung Wortspiel – könnte man ja die Leiste runterfahren (also verbergen) lassen.

  4. Naja „final“ gibts bei mir nicht, ich betreibe diesen Webkram schließlich nicht professionell sondern setze einfach ein wenig oberflächliches Webwissen um. Wem das zu buggy ist (damit mein ich jetzt nicht direkt dich), sorry und besser machen. 😉
    Ich glaube ich werde ab jetzt auch alle meine Webprojekte erstmal im Beta Status releasen und dann erst paar Wochen später, wenn so die paar Standardbugs gefunden und behoben wurden, es „final“ nennen.

    Die Leiste verbergen; geile Idee! Ich werde „verbergen“ und „deaktivieren“ möglich machen. Mal sehen wann und wie und so.

  5. Funktioniert super das Teil!!

    Nur eine Frage: Darf ich die Leiste so umbauen, dass nur noch große icons statt kleinen icons und text zu sehen sind, wenn der Link zu deiner seite bleibt?

  6. Erstmal hi,

    darf ich vllt. die Taskbar so „umkrempeln“,
    dass man in den Einstellungen die Farbe verändern kann (also Farben wie bei Windows) und vllt. so eine Art leichte Transparenz und vllt. auch einen Verlauf (also in Sachen Design) und vllt. eine iFrame-Linkvorschau bei MouseOver (auch Win)?
    Aber ich werde Credits und co. natürlich an Ort und Stelle belassen 😀

    PS: Echt tolle Idee…

  7. Solange da unten rechts die Credits inklusive Links stehen bleiben darfst du deine Vorstellungen gerne einbauen.
    Ich würde mich auch freuen wenn du mir einen Link schickst, wenn die Programmierung fertig ist. Würde gerne mal sehen wie das dann aussieht.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.