Online-Demo: Unterschied zwischen den Versionen
Zeile 25: | Zeile 25: | ||
'''Kontakt für Fragen oder Hilfe''' <br> | '''Kontakt für Fragen oder Hilfe''' <br> | ||
E-Mail: tfriedrich@digitmedia.de <br> | E-Mail: tfriedrich@digitmedia.de <br> | ||
− | Mailinglisten: Technik | + | Mailinglisten: Technik |
== Pagepeel/ Eselsohr == | == Pagepeel/ Eselsohr == |
Version vom 18. Juli 2007, 20:30 Uhr
Allgemein
Dies ist eine Aktion von Bloggern und anderen Website-Betreibern, die den AK Vorratsdatenspeicherung unterstützen wollen.
Wie bei anderen ähnlichen Aktionen (z.B. Softwarepatente) können Website-Betreiber ihre Startseite durch eine sog. Vorschaltseite ersetzen, die auf die Aktion "Stoppt die Vorratsdatenspeicherung" aufmerksam macht und auf die Seite des AK Vorratsdatenspeicherung verlinkt.
Noch besser sind sog. Pagepeels / Eselsohren, die quasi auf jeder Seite integeriert werden können, da doch eine Großzahl der Benutzer nicht über die Startseite auf den Webauftritt gelangen.
Anmerkung: Die Lizenz der Schäublone ist CC-by-nc-sa, das Pagepeel bzw. die Flash-Version folglich auch. Das heißt doch im Klartext, dass jeder, der z.B. Google-Werbung nutzt, an der Aktion nicht teilnehmen kann. Wie wäre es damit, das Einverständnis aller Autoren vorrausgesetzt, das nc (non-commercial) herauszunehmen?
Zeitraum
Jetzt. Denn: die EU-Richtlinie zur Vorratsspeicherung soll bis 1. Januar 2008 in deutsches Recht umgesetzt werden.
Flash PagePeel
Um den PagePeel in die eigene Seite einzubauen müssen sie einfach nur den folgenden Code in den body einfügen.
<script type="text/javascript" src="http://vorratsdatenspeicherung.digitmedia.de/PagePeel.js"></script>
Demo: http://vorratsdatenspeicherung.digitmedia.de/
Kontakt für Fragen oder Hilfe
E-Mail: <enkode>tfriedrich@digitmedia.de</enkode>
Mailinglisten: Technik
Pagepeel/ Eselsohr
Vorteil des Pagepeels im Gegensatz zur Vorschaltseite ist, daß auch alle Seiten außer der Startseite mit einbezogen werden können in die Aktion.
Die aktuelle Version ist 1.4.
Änderungen Version 1.4
- Störende Hintergrundbilder und -farben durch anderes CSS für Bilder und Links unterbunden
- Störende Abstände durch anderes CSS für Bilder und Links unterbunden
- Preload weiter aus dem sichtbaren Bereich geschoben
Änderungen Version 1.3
- Bilder kommen jetzt direkt von diesem Server (einfacher Änderungen zu machen und zu verbreiten)
- Jetzt mit Preload für die ausgeklappte Ansicht
- Nur noch CSS und HTML-Snippet einbinden reicht
- Bugfix der nicht aufgeklappten Pagepeel-Ani (Dank geht an Marko Jung)
Code
Folgenden HTML-Code in den <head>-Bereich einbauen:
<!-- AKVS head start v1.4 --> <style type="text/css"> <!-- div#akct { position: absolute; top:0px; right: 0px; z-index: 2342; width:113px; height:88px; background-image: url(http://wiki.vorratsdatenspeicherung.de/images/Akvse.gif); background-repeat: no-repeat; background-position: right top; border:none; padding:0; margin:0; text-align: right; } div#akct img { border:none; padding:0; margin:0; background: none; } div#akct a#akpeel img { width: 100%; height: 100%; } div#akct a, div#akct a:hover { text-decoration: none; border:none; padding:0; margin:0; display: block; background: none; } div#akct a#akpeel:hover { position: absolute; top:0px; right: 0px; z-index: 4223; width:500px; height:500px; display: block; background-image: url(http://wiki.vorratsdatenspeicherung.de/images/Akvsb.gif); background-repeat: no-repeat; background-position: right top; } div#akct a#akpreload { background-image: url(http://wiki.vorratsdatenspeicherung.de/images/Akvsb.gif); background-repeat: no-repeat; background-position: 234px 0px; } --> </style> <!--[if gte IE 5.5]> <![if lt IE 7]> <style type="text/css"> div#akct a#akpeel:hover { right: -1px; } </style> <![endif]> <![endif]--> <!-- AKVS head end -->
Folgenden HTML-Code in den <body>-Bereich einbauen:
<!-- AKVS body start v1.4 --> <div id="akct"><a id="akpeel" href="http://www.vorratsdatenspeicherung.de" target="_blank" title="Stoppt die Vorratsdatenspeicherung! Jetzt klicken & handeln!"><img src="http://wiki.vorratsdatenspeicherung.de/images/Akvst.gif" alt="Stoppt die Vorratsdatenspeicherung! Jetzt klicken & handeln!" /></a><a id="akpreload" href="http://wiki.vorratsdatenspeicherung.de/?title=Online_Demo" target="_blank" title="Willst du auch bei der Aktion teilnehmen? Hier findest du alle relevanten Infos und Materialien:"><img src="http://wiki.vorratsdatenspeicherung.de/images/Akvsi.gif" alt="Willst du auch bei der Aktion teilnehmen? Hier findest du alle relevanten Infos und Materialien:" /></a></div> <!-- AKVS body end -->
Bereitgestellt von dirk/dataloo
Außerdem als aktuelle Testseite online. Bitte mit weiteren Browsern auf Kombatibilität prüfen und Ergebnis unter Technisches eintragen.
Inhaltliches
- Gibt es Verbesserungsvorschläge?
- Codesnipplet für Smarty
Technisches/Kompatibilität
Bisher getestet unter:
- Firefox, Version:2.0.* (Windows 32bit, FreeBSD, MacOSX Intel C2D)
- Epiphany 2.14.3+; FLOCK 0.7.8; Opera 9.20; Iceweasel 2.0.0.3 (Debian GNU/Linux 4.0)
- IE, Version 6 (Windows, auch 64bit Version von Browser und OS)
- Konqueror, Version: 3.5.6 (FreeBSD, Kubuntu 7.04) mit der Einschränkung, dass das Info-Icon mittem im Eselsohr plaziert ist und der Hover-Effekt nicht auf der gesamten Fläche vom unausgeklappten Eselsohr funktioniert
- Opera, Version 9.1 (Windows, Linux), Version: 9.2 (Windows, FreeBSD, Linux)
- Seamonkey, Version: 1.1.1 (FreeBSD)
- Firefox 2.0.0.3 (W2K, aktuell gepatched)
- Firefox 2.0.0.3 (Intel Mac OS X)
- Safari 2.0.4 (Mac OS X (Intel und PPC))
- Safari 3.0.2 (Windows XP)
- Firefox/BonEcho 2.0.0.3 (NetBSD/amd64 3.1)
- Firefox 2.0.0.3 (Linux/Ubuntu 6.10, Linux/Gentoo-2006.1 x86_64)
- Firefox 2.0.0.4 (Linux/Ubuntu 7.04) / (SuSE Linux 10.2)
- Mozilla 1.7 (SunOS/sparc Solaris 10)
- IE NetRenderer (Windows)
- IE 7
- IE 6
- IE 5.5
- funktioniert nicht unter IE 5.0 (der Link funktioniert nicht, d.h. beim Klicken erscheint nicht www.vorratsdatenspeicherung.de)
- Camino 1.5 (Mac OS X 10.4.10, Intel C2D)
Anleitung zum Einbau
- Wordpress 2.1/2.2: Ein fertiges Paket (ZIP) gibt es als Wordpress-Plugin hier zum runterladen. Einfach in das Plugin-Verzeichnis von Wordpress entpacken (es ist nur die Datei ppeelvds.php notwendig), Plugin "Pagepeel (AK VDS)" aktivieren. Fertig. Getestet mit WP 2.1 und 2.2, mit den Versionen 1.5 und 2.0 könnte es auch funktionieren. Plugin wurde zusammengefrickelt von Ralf "Arby" Brostedt und liegt derzeit in Version 1.4 vor.
Funktioniert ebenfalls einwandfrei mit 2.0.10.
- Joomla:
- Es gibt jetzt einen Mambot, der den Joomla-Tag {schaeublone} übersetzt. Download hier.
- Schnell & dreckig: Direkt ins Seitentemplate einbauen. Im Admin Backend unter Site -> Template Manager -> Site Templates genutztes Template selektieren und "Edit HTML" Button betätigen. An geeigneter Stelle Code reinkopieren.
- Alternativ die Datei /templates/TEMPLATENAME/index.php mit einem Texteditor bearbeiten.
- Twoday.net-blogs:
Layout anpassen --> Skins (HTML)--> Den <head>-code in die "Hauptseite" einsetzen, den <body>-code unter "Beitragsanzeige". Speichern, fertig. - Serendipity:
- Für den Header-Code das Ereignis-Plugin "HTML-Code für den head-Bereich (HTML-Kopf Klotz)" aktivieren und dort den Code eintragen.
- Für den Body-Code das Ereignis-Plugin "HTML Nugget on page" aktivieren, dort die Option "Top of the content" aktivieren und den Code in die Textbox kopieren. Am Ende des Plugins die Textformatierung ausschalten, speichern, fertig.
- TYPO3:
- In den Setup-Bereich des Template-Datensatzes, wenn das zentrale PAGE-Objekt den Namen "page" hat...
- ...für den head-Bereich:
page.headerData.10 = TEXT
page.headerData.10.value (
HEAD-CODE
) - ...für den body-Bereich:
page.5 = TEXT
page.5.value (
BODY-CODE
)
- b2evolution: Im Verzeichnis skins/Name_des_verwendeten_Skins den Code in die Datei _main.php einfügen. So erscheint das Eselsohr auf allen Seiten.
- Blogger.com:
- Verwaltungsseite des Blogs aufrufen -> Vorlage -> HTML-Bearbeiten
- In der Textbox nach <head> und <body> suchen und den entsprechenden Code darunter einfügen
- Gallery2:
- Den gesamten head-Bereich mit {literal} und {/literal} ummanteln
- Mehr dazu unter Smarty - Is there a way to escape '{' and '}' in html?
- Thingamablog:
- Einfach die angegebenen Codeschnippsel in den/die beschriebenen <head>- und <body>-Bereich/e des/der Templates mittels Copy 'n' Paste einfügen. (Je nachdem, auf welchen Unterseiten es zusätzlich erscheinen soll.)
- vBulletin
- Das Administrator Kontrollzentrum öffnen, Styles verwalten, Style auswählen, Templates ändern, Forumhome, den entsprechenden Code direkt über dem </head>-Tag und unter dem <body>-Tag einfügen, Speichern.
- Blog.de und Verwandte
- Im Blog Design Wizard die CSS-Informationen in den eigenen CSS kopieren. In der 2. Zeile top:0px durch top:30px ersetzen, damit die blog.de-Toolbar nutzbar bleibt.
- unter Module -> FreeHTML I oder FreeHTML II den html-Code reinkopieren.
- Falls noch nicht geschehen das FreeHTML-Modul zur Seitenleiste hinzufügen
- Noch offen:
- Wer schreibt eine Anleitung für Blogs, die auf Blogger etc. basieren?
- Wer schreibt eine Anleitung für MediaWiki?
- Wer schreibt eine Anleitung für xtc und os-commerce shops?
Datenschutzerklärung
Das Online-Demo-Skript verwendet Grafiken, die auf unserem Server wiki.vorratsdatenspeicherung.de liegen. Auf diesem Server ist das Apachemodul "removeip" aktiviert. Das bedeutet, dass wir die IP-Adressen der Personen, die die Online-Demo-Grafiken anschauen, nicht speichern. Wir speichern auch keine Informationen über die verweisende Seite (Referrer). Insgesamt werden bei Verwendung des Online-Demo-Skripts keinerlei personenbezogene Daten von uns protokolliert.
Vorschlag für Vorschaltseite / Startseiten-Ersatz
Gibt´s hier als HTML & Grafiken im Zip Onlinedemo-vorschaltseite.zip zum runterladen. (Vorschlag von dirk/dataloo)
Außerdem als aktuelle Testseite online. Bitte mit weiteren Browsern auf Kombatibilität prüfen und Ergebnis unter Technisches eintragen.
Inhaltliches
- -> Wir haben uns geeinigt, das Motto "Stasi 2.0" vorerst nicht offiziell "als AK Vorrat" zu verwenden. Daher sollte der Hinweis "Eine Aktion des..." raus, es kann ja auch als Aufruf einiger Blogs oder anderer Leute und Gruppen veröffentlicht werden. Ralf (Gemacht - Dirx)
- Gibt es Verbesserungsvorschläge?
Technisches
- Die Vorschaltseite kann als Standalone Seite eingebunden werden oder als Div-Overlay. Zum Schließen des Overlays wird Javascript benötigt.
- Bisher getestet unter:
- Firefox, Version: 1.5.0.11 (Windows), Version: 2.0 (Windows, FreeBSD)
- Firefox, Version: 2.0.0.3 (Linux/Suse 9.3)
- IE, Version 6 (Windows)
- IE, Version 7 (Windows)
- Konqueror, Version: 3.5.6 (FreeBSD, Kubuntu 7.04)
- Opera, Version: 9.2 (Windows, FreeBSD)
- Seamonkey, Version: 1.1.1 (FreeBSD)
- Seamonkey, Version: 1.1.1 (Win32)
- Seamonkey, Version: 1.0.8 (Linux/Suse 9.3)
Die Vorschaltseite lässt sich unter Opera 9.21 nicht schließen.
Teilnehmende Websites
Hinweis: Auf dieser Seite dürfen sich alle, die an unserer Online-Demo teilnehmen (d.h. dass entweder das Eselsohr oder die Vorschaltseite zu sehen ist), selbständig verlinken. Dass eine Seite hier verlinkt ist, bedeutet deswegen nicht notwendig, dass der Arbeitskreis Vorratsdatenspeicherung mit dem Inhalt dieser verlinkten Seite übereinstimmt. Unabhängig hiervon behält sich der Arbeitskreis Vorratsdatenspeicherung vor, unerwünschte Links und Links zu Seiten, die nicht an der Online-Demo teilnehmen zu löschen. Von menschenverachtenden, rechtswidrigen und demokratiefeindlichen UnterstützerInnen und Websites distanzieren wir uns ausdrücklich. Wegen der Vielzahl der Links und der Möglichkeit für jede/n sich selbst einzutragen ist allerdings eine regelmäßige Kontrolle der unten angegebenen Websites nicht möglich!
- Jonas Westphal
- it news
- Draussen nur Kännchen
- FoxyTricks
- mundraub.de
- MySpace Satire gegen Ueberwachung
- Falcons Messerschmitt Bf 109 Hangar
- DSLnachPankow | Breitbandinitiative für Berlin-Pankow
- schoene toene
- Der Euskirchen-Blog
- Der Euskirchen-Podcast
- Die beliebte Euskirchen-Site
- tubor.de
- olav.net
- Die Senftube
- bitgewitter
- www.xobo.de
- PHPaws
- Sebbls Homepage
- GnuMail
- Blog von André Strauß
- Docuking
- Hartz IV & ALG II Nachrichten
- Fincuts Fotos
- Interessantes
- effelf.de
- Matthias in Marburg
- der alltäglich Irrsinn
- BadA$$Mood
- LE PixxelFriends
- Crocodile Hunter Portal
- madmaxx.info
- LUKi.org
- Samplepoolz - Audio Online Magazin
- Der wilde Garten - Einsichten, Aussichten, Gedanken
- menschenopfer.com
- Psychotic - srbg.de - Gestörtes aus aller Welt
- Fe26
- trueten.de
- mom24 SEO
- Mobile Zeitgeist
- Ringfahndung Journal
- Rssjunkie
- ZoEllNeR Online
- jo-zone
- Der Spiegelfechter
- Warrior Website: Warriors Blog
- Ricardo Cristofs Websites: BlackBlogX, Midvinterland, My CV
- Zipf Websites: rfxd
- Dirk Adler Websites: dataloo, stasi 2.0 shirt
- Freierfall Websites: Freierflug
- WordsBG Websites: Boredom ...sucks
- Julius Websites: browsergames.org
- Raphael Gradenwitz: Die Unschuldsvermutung, ein Menschenrecht!
- Siggi's Homepage
- http://www.ueberwachungsdruck.org
- Simon Columbus Website: simoncolumbus.de
- Nexus [1] [2]
- systemfehler.info
- info Abiturjahrgang 2008 Gymnasium Alfeld
- netzpolitik.org
- Daten-Speicherung.de
- hackemesser.de
- TOTALE-UEBERWACHUNG.de
- kevin-bachert.de.vu
- freifunk-hannover.de
- nanuk's Pirate-Blog - Super-Sache! Danke für das Wordpress-Plugin :)
- Spreeblick
- FM @ FHTW Berlin
- rob-log
- fuelli.de
- Kultur-Droge
- RammBlog
- Kulturbolschewismus
- zuckerbrot
- Piratenpartei Hessen
- BlogGlobal
- Nur meine zwei Cent
- daphillio's blog
- Gothic Database
- Weblog: Geeks-have-feelings-too.net
- Jackpot Baby!
- Das Farliblog - Deutschlands beliebtester Verbalterrorist
- windisch-design.de | Fotografie
- fabian-fingerle.de | Blog von Fabian (otih )
- datensalat.eu
- Blog des Semesters IT1A an der HS Esslingen
- Hendis Blog - Danke für eure Arbeit!
- e-Strike.pytalhost.net
- GroFaFo - Das GROSSE Fantasy-Forum
- Die Phantastischen Welten
- Mathias Richel //Das Blog
- surfkraft.de instrumental surf weblog
- algar-web.de - Impressionen und Informationen rund um's Reisen
- Absurde Zeiten
- prescher.net - Andreas Prescher's Website
- AlltagsGrauen - your daily overdose of terror with a slight taste of mint ..
- Pottblog
- EDV - Ende der Vernunft
- YuMDaP.net's blog
- eleysia.myblog.de
- Freekkk.de
- superberti.de
- kohnlehome.de
- www-anon-web.de
- discountsun.de
- www.belta.de - Dr. Moffsens Paginen
- genius's semaphlog
- WG-Blog
- www.oberschichtenfernsehen.de
- Spacezone is not a blog
- Waldis Welle - The Resurrection
- Dervanil
- Abi 2008 des JBG
- blog.rkarn.de - Danke für das WordPress-Plugin!
- www.rkarn.de
- thomasr-vogt.de
- leipzigblogs.de
- Neunzehnhundert.org :: Neue Introspektiven
- HasteNedGesehn
- zwei-null.org
- sagichdoch?
- Nornirs Ætt
- Singvøgel
- zweitens-magazin
- pozimski.eu (zwar erstmal eine Platzhalterseite, aber schonmal eingebaut)
- Daten Chaos
- hessis weblog
- Badespasz Halle (Saale)
- The Mighty E
- duke.de
- robert sacht.
- www.ellsaesser.de
- reaktanz-blog (auf den artikel-seiten)
- SO! - Onlinezeitung
- Pferdepension Eilbacherhof
- Schwebstoffe
- CommonSense
- juergen-luebeck.de
- translatr
- die ständige reise
- boschblog.de
- mivesto.de
- die Welt ist eine Scheibe
- mala fide
- ckay.de
- der-ewige.de
- slog.dieblogger.de
- designinplauen.de
- Linux Online Blog
- Spitblog
- NABU RV WEIMAR / APOLDA e.V
- dhaunsch, my journey through life the universe and everthing
- mois-Blog
- brigittedix.de
- bhuti.de
- HerrMarks' Blog
- stefan-welte.de
- Zucker
- SoE
- chris-b online
- Landesjugendvertretung Westfalen (LJV)
- BeNcHBaCKs.De.vU
- @cb's ßetabloggerei
- In deiner kleinen Welt - Lug & Trug von vorn bis hinten… Hans, die Frauen und das Leben…
- Babelsberg Movements
- YAK - Your Abi Kit
- nureinhobby
- Trance Explosion (wöchentliche Tranceshow)
- wasserstandsmeldung
- Notiz-Blog
- sparrenblog.de
- Die Zitrone
- Lumières dans la nuit
- lawlita.com - Gedanken eines Jurastudenten
- regioblog.de - Artikel und Meinungen aus Südhessen
- Mokel.org
- ubergeek.de
- suchseite.org
- Mogel-Packung.de - mit einer kleinen Mogelpackung-Sammlung
- Toke.de
- Blog Bitrauschen
- meingottundmeinewelt.de
- 46halbe.org
- blog.der-link.de
- fischegehtgarnicht.de
- Mitternachtshacking.de
- bascht.com
- nexx-creations
- Philosophieblog.de
- just:imho
- Kefas Welt
- Pfalz-Haus
- leipzig.freifunk.net
- NetReaper - Andersmensch
- daff.neyeon-digital.de
- Société Électronique
- wi01b.net
- schnuffelbabe.de
- m@rcus-olk.net
- snowblog
- terrorizt'z bLog
- zeemans Blog
- StraightAhead
- El-Equipo
- Neues für Nerze, Stoff für Mettwurst
- Heavy-Metal.de
- Claudia Troßmann :: Text | Design | Code
- Kulturblog.de
- Peaceblog.eu
- Teerezept.de
- Kein Signal // Punkrock aus München
- icewind’s Blog ³
- mcmarcdeluxe's blog
- darkerradio
- opsocom.de
- medienmagazin.net
- tierkultur.de
- LeSpocky.de
- kitsune.at
- Matthias Klees
- Bremer Grüne Stadtteilgruppe Neustadt
- wlanKarow
- Inspire-Mind.de
- Inspire-LARP.de
- Inspire-Act.de
- Sadmin.de.vu
- Nickloose.de
- Bauwagen Hausen bei Würzburg
- Dave`s Blog
- Halbwertunterhaltungt
- freakiest.de
- poetaster.de
- Christian Heindel
- THE CRUISE BROTHERS
- Daily Life Of An Owl
- BlueBlog - Ein weiteres Blog über interessante Dinge
- i heart digitallife
- kubieziel.de
- Nebenleben
- Lord of Chaos Blog
- der WB13
- Frenteuropa-PT
- Spawn´s HQ
- www.potdian.de
- Thomas goes .NET
- Schutzhaft.de - Es lebe die Freiheit.
- ComputerFrosch.de
- das BlogPimpBlog
- WolframsWebWorld
- Uhus *finest-assorted* Weblog Droppings
- desktopboutique.com - Linksammlung zu hauptsächlich politischen Themen
- macheath - Beobachtungen aus der Netzwelt
- Alkoholikerforum Saufnix
- Volkers Blog
- Unknown-Online - Privatsphäre ist kein Verbrechen!
- Kothhöfer.de – Nichts ist beständiger als die Änderung
- GreenSmilies.com – Die Welt der Smilies ist nicht immer nur gelb!
- braida.de – Jenz' Blog
- AveN's (Dark) Thoughts
- AveN's Coding Stories
- Lost in Programming Blog
- phoenitydawn
- Voynich-Manuskript-Lexikon
- Sil53r Surf3r
- Sebastian Nohn
- Suran.info
- :kemmis
- Zwonull.eu per Wordpress Plugin
- die.welt-ist.biz/arr
- blog.afoo.de
- denk-licht.de
- Sarja's Blog
- Gedankenpolizei
- Explorations of Beauty & Decay
- Nekobento: Japanische Rezepte für jeden Tag
- Studiengang Informatik 2004 - HS Zittau/Görlitz
- Philipp Cielen's Blog on Technology
- - U.S.Altgen
- tmkrth.tm.
- www.raktefakt.net
- Foxxis Place
- MC Ostpack
- www.nicht-wichtig.at
- Die Wallerts
- Kangaxx' JaB – Just another Blog
- larsblog
- Radiofuzzie.com
- Der radiofuzzie-Blog
- Waiting 4 Anna
- Tobias Doerffels Homepage
- djamc#s bl0g
- Suspekt! RheinMain
- GayArmy
- Lazybone Blog
- Der Schwabulator