Bootstrap 3.3 unter Concrete 5.6
Meine Webseite verwendet Concrete 5 als CMS.
Auf aktuelle Version 5.7 kann man dummerweise nicht upgraden, weil man im Unterbau zuviel geändert hat. Toll. Ich will einige Komponenten trotzdem aktualisieren.
Ich hatte so die famose Idee, auf meiner Webseite Bootstrap auszutauschen
VON v3.0
AUF v3.3
Der Konflikt besteht darin, dass das Backend mit Bootstrap 2 arbeitet und mit jQuery v1.7 daherkommt.
Bootstrap 3.3 braucht nun aber mind. jQuery 1.9. Mit vermeintlich gutem Gewissen habe ich die letzte 1-er Version von jquery heruntergeladen. Und mit jQuery 1.11 läuft wiederum das Bootstrap 2 Backend nicht mehr sauber.
Ein Teufelskreis ;-)
Erschwerend kommt hinzu, dass C5 das jQuery innerhalb
Loader::element('header_required');
irgendwo lädt (damit werden mehrere Html-Header Zeilen per echo rausgeschrieben).
Entweder man modifiziert Originale (davon rate ich per se ab), macht Custom-Elemente - oder ersetzt es in seinem Template. Letzters habe ich gemacht - mit Hilfe der ob_ Funktionen wird der Content abgegriffen und darin der Pfad zum jQuery File ersetzt.
// 2014-11-01 hahn
// HACK to use bootstrap 3.3 in live mode and concrete5 cms mode
// --> load specific jquery version
ob_start();
Loader::element('header_required');
$sHeadcontent = ob_get_contents();
ob_end_clean();
$u = new User();
if (!$u->isRegistered()) {
$sHeadcontent=str_replace(
'/concrete/js/jquery.js', // or '/updates/concrete[version]_updater/concrete/js/jquery.js',
$this->getThemePath() . '/js/jquery_1.11.1.js',
$sHeadcontent
);
}
echo $sHeadcontent;
// ENDE jquery HACK
Eine andere Folge des jQuery Updates war die Inkompatibilität mit colorbox (Addon Lightboxed Image - 0.9.2).
Durch Aktualisieren der Dateien unter
[webroot]/packages/lightboxed_image/blocks/lightboxed_image
mit den aktuellen colorbox-Sourcen lief auch das wieder.
Update:
Eine andere Variante (die Auswirkung auf alle Themes hätte) wäre, die Datei concrete/elements/header_required.php in das Verzeichnis elements zu kopieren und dort anzupassen. So kommt man auch ohne die ob_-Funktionen aus.
weiterführende Links:
- Concrete5 Note: There is currently NO UPGRADE script from 5.6, this is a new version for new sites.
- C5 addon: Lightboxed Image
- Download: colorbox [master]
Chocolatey: Ersatz für choco list mit lokalem Cache
Ich habe mich mit Chocolatey angefreundet, verfluche aber die langsame Paketsuche.
Was man da machen kann? Nun, eine Batch-Datei schreiben, die die Paketliste lokal speichern kann und diesen Cache durchsucht.
Die Funktion ist nicht mit choco list [Suchbegriff] identisch, da hier auch Metainformationen gesucht werden - die Suche in meinem Skript geht rein auf Paketnamen, ist dafür aber wirklich massiv schneller!!
Der Cache wird 1 x pro Tag erneuert - oder bei manuellem Aufruf mit Parameter -u (=update).
Die Hilfe erscheint bei Aufruf ohne einen Parameter:
===== CHOCO PACKAGE SEARCH WITH LOCAL CACHE ===== DESCRIPTION: clist2 is a choco list to search public packages that uses a local cache SYNTAX: clist2 [searchstring] searchstring: part of a package, case insensitive, regex allowed i.e. "^fire" to find the firefox clist2 "^fire" clist2 -i infos about cachefile clist2 -u force update of local package list (it takes a while)
Schoko Nougat
Zugegeben, der Titel ist eine schlechte Übersetzung des englischen Originals.
Unter Windows gibt es ein Tool NuGet - ein Paketmanager für Entwicklertools unter MS Windows. Chocolatey NuGet greift die Idee mitsamt Technologie auf und ist ein Paketmanager für (alle möglichen) Windows Applikationen. Quasi ein apt-get, yum oder rpm für MS Windows.
Unter Chocolatey sind über 2000 Pakete (Metabeschreibungen) für die Installation verschiedenster Programme verfügbar: Flashplayer, Skype, Antivirus, Browser, Mailclient, Libreoffice, … Analog zu Linux Paketmanagern kann man per Kommandozeile Pakete suchen, installieren, updaten, deinstallieren …
Das gefällt mir ;-)
[Weiterlesen…]
Pimped Apache Server Status Update v1.10
Mein PHP Tool “Pimped Apache Server Status” macht den Apache Status lesbar. Dies funktioniert auch mit mehreren Webservern gleichzeitig und eignet sich so auch zum Live Monitoring von loadbalancten Webseiten.
Im letzten Update kamen 2 Boxen in der oberen Reihe hinzu. Sie zeigen die Anzahl der abgefragten Webserver an und wie lange dies brauchte.
Im LAN bei mir auf Arbeit wird der Status von 19 Webservern in weniger als 0.3 Sekunden geholt.
Wie weit es nach oben skaliert, weiss ich noch nicht. Erfahrungsberichte von anderen Webmastern/ Sysadmins sind daher willkommen!
Update:
Ich habe mich noch einmal genauer belesen…
Die einzelnen Apache Server status werden in der Methode ServerStatus->getStatus() (s. Datei ./classes/serverstatus.class.php) mittels curl_multi_exec() geholt. Bei dieser Funktion erfolgen die Requests - wie ich es auf php.net lese - sequentiell.
Erst ab PHP Version 5.5 gibt es eine Funktion curl_multi_setopt, mit der man parallele Requests steuern kann - aber auf diese PHP-Version ist mein Tool noch nicht getrimmt.
Weiterführende Links:
Html5 Audio: schnelles Wiederholen eines Sounds
Kürzlich hatte ich etwas zur Wiederholung von loopenden HTML5 Audios geschrieben. Beim Schreiben der elektronischen Osterkarte kämpfte ich noch mit einem anderen Audio-Problem: Mit Klick auf ein Element sollte ein Sound wiedergegeben werden. Im Onclick Event eines Bildes wird nachfolgende Funktion aufgerufen. Diese holt aus einem Spielfeld-Array die Information, ob es ein neu aufgedecktes Feld ist und spielt einen entsprechenden Sound durch Ansteuern eines (in der Seite bereits vorhandenen) Audioobjektes:
function clickimage(oLink) {
(...)
iClickCounter++;
var oAudio = false;
var oField = aFields[oLink.id];
(...)
if (oField["active"]) {
// scream yeah!
(...)
oAudio=document.getElementById("audioclickok");
oAudio.currentTime=0;
oAudio.play();
(...)
} else {
// oh no!
(...)
var sSoundid=oField["done"]?"audioclickremoved":"audioclickfailed";
oAudio=document.getElementById(sSoundid);
oAudio.play();
(...)
}
(...)
}
Hey es spielt! Aber eher schlecht als recht. Bei mehrfachen Klicks gibt es äusserst unschöne Effekte. Es hakt - die Wiedergabe ist nicht synchron.
Eine Abhilfe wäre web-API. Oder man stehert die Wiedergabe ein und desselben Audiofiles über mehrere Audio-Objekte.
Oder: man setzt vor der Play-Methode die Abspielposition auf Null.
(...) oAudio=document.getElementById(sSoundid); oAudio.currentTime=0; oAudio.play(); (...)
Der Unterschied ist wirklich frappant!
Weiterführende Links
Frohe Ostern!
Es ist wieder Ostern und wieder gibt es eine animierte Grusskarte :-)
Wem es gefällt, kann diese mit einem eigenen Titel an Freunde versenden.
Es ist ein kleines Reaktionsspiel. Nach einer zufälligen Wartezeit wird ein Feld hervorgehoben, was schnellstmöglichst angeklickt werden muss. Es wird die Zeit zusammengezählt vom Anzeigen eines Feldes bis es angeklickt wurde.
Schöne Feiertage!
zur Osterkarte 2014
Wie es erstellt wurde?
- Hintergrundmusik und Sounds wurden mit Magix Music Maker erstellt.
- Grafiken / Fotos / Scans wurden mit Paint Shop Pro montiert bzw. nachbearbeitet
- Die Spielsteuerung erfolgt mit Javascript - jQuery nimmt mir teilweise einige Arbeiten ab. CSS 3 animiert die Boxen.
Mit dem Webbrowser kann man die Sourcen einsehen - oder mich nochmal fragen.
Weiterführende Links:
Loopende Sounds mit Html5 Audio
Ich bin dabei, eine e-Card vorzubereiten und habe einen loopenden Song erstellt. Wenn ich diesen mit dem Audio Tag mitsamt loop Attribut einbinde:
<audio title="Hintergrundmusik" preload="auto" controls="controls" loop="loop" autoplay="autoplay" id="audioBgSound" > <source type="audio/ogg" src="/axel/download/easter2014-bg_2.0_.ogg" > <source type="audio/mp3" src="/axel/download/easter2014-bg_2.0_.mp3" > </audio>
… so gibt es am Ende des Songs immer eine kurze Pause von ein..zwei Zehntel, bevor der Song von vorn beginnt. Das ist unschön, ich wollte eigentlich einen soften Übergang ohne diese Zwangspause.
Einen Evenlistener auf “ended” zu setzen, der die Position auf 0 (Anfang) setzt, hat genau denselben Effekt, wie das Loop Attribut.
Nun habe ich eine Krüppel-Lösung hergenommen.
Mit window.setTimeout wird eine Funktion forlaufend wiederholt. Diese prüft die Position und ob das Ende “fast” erreicht ist. Fast heisst hier: Länge des Audios ([audio].duration) minus etwas Luft. Ich hab mal 0.2 Sekunden gesetzt.
/**
* sound hook
* @returns {undefined}
*/
function soundtrigger() {
oAudioBgsound = document.getElementById("audioBgSound");
iPos = oAudioBgsound.currentTime;
if (iPos>oAudioBgsound.duration - 0.2){
oAudioBgsound.currentTime=0;
}
if (iPos > (oAudioBgsound.duration - 6)) {
window.setTimeout("soundtrigger();", 50);
} else {
window.setTimeout("soundtrigger();", 5000);
}
}
Es ist echt unschön, aber falls wer was besseres weiss…
weiterführende Links:
Linkchecker auf meiner Webseite
Hinweis: Dieser Artikel von 2014 ist veraltet. Als Linkchecker verwende ich nun den meinen ahCrawler
In meiner alten Webseite hatte ich in externen Linkchecker direkt als Link im HTML-Code.
Im neuen CMS ist das nicht mehr so. Alle Links verweisen auf die echte Zielseite. Aber ich habe weiterhin einen Linkchecker integriert - allerdings als Javascript-Löung.
So funktioniert es:
Alle Links zeigen auf die Zielseite.
<a href="http://example.com/">Beispiellink</a>
Nun ist es so, dass ich in meinen Artikeln keinerlei externe Links verwende. Alle externen Links sind rechterhand platziert - in einem DIV namens “sbright” (”sb” für sidebar).
Alle Links in diesem Div - also nicht die auf der Seite insgesamt - werden geprüft, ob sie eine externe Referenz besitzen - falls ja, wird das Onclick Event umgebogen auf ein PHP-Skript inc_urlchecker.php. Diese Funktion nutzt jQuery:
/**
* change external links in the sidebar: a linkchecker will be added
* @returns {undefined}
*/
function initAddLinkchecker(){
var sLink=false;
$("#sbright a").each(function() {
// do something with external links:
if (this.href.indexOf("axel-hahn.de")<0){
sLink=this.href;
sLink="/axel/php/inc_urlchecker.php?url="+sLink;
$(this).attr("onclick", "location.href='"+sLink+"'; return false;");
}
});
}
In jenem PHP-Skript wird der übergebene Link mit einem Http Head Request mittels Curl geprüft.
// from http://php.net/manual/en/function.get-headers.php
function get_headers_curl($url) {
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, true);
curl_setopt($ch, CURLOPT_NOBODY, true);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
$r = curl_exec($ch);
$r = preg_split("/n/", $r);
return $r;
}
Ist der Http-Response Code OK (200er und 300er Http-Statuscodes) wird der Besucher weitergeleitet. Wenn nicht, gibt es einen entsprechenden Hinweis im Webbrowser samt Entschuldigung, Fehlermeldung und Link zurück zur letzten Seite.
Ach so, und vom letzten Test eines Links wird der Response Header in eine (Sqlite) Datenbank geschrieben. Die sehe ich gelegentlich ein und weiss, welche Links ins Nirvana gehen.
Weiterführende Links:
Webseite umgestellt auf Concrete 5
Wer ab und an auf meiner Webseite war, wird es bemerkt haben: sie sieht nun anders aus. Die bisherigen Inhalte sind (zumeist) noch da, haben aber eine neue URL.
Ich habe meine Webseite auf das CMS Conrete 5 umgestellt.
Wer eine alte Adresse ansurft …
… sei es, er wählt einen Bookmark, einen nunmehr veralteten Link aus einem Forum oder dem noch nicht aktualisierten Suchindex einer Suchmaschine, der kommt auf eine Umleitungsseite.
Diese Umleitungsseite kennt das Mapping von der alten zur neuen URL. Suchmaschinen werden sofort mit einem 30x auf die neue Seite umgeleitet (Google hat übrigens so sehr schnell gelernt!); andere Benutzer bekommen einen Hinweis und den neuen Link angeboten.
Apache-Rewrite Regel für alte Seiten:
RewriteRule ^(axel.*).html$ /(...)/redirector_phpcms.php [PT,QSA]
Wenn das Redirect-Skript einen Bot erkennt, dann gibt es statt der Hinweis-Seite ein 301:
// ----- Bots ein 30x senden
if ($sNewUrl){
if (
stripos($_SERVER["HTTP_USER_AGENT"], "spider")>0
|| stripos($_SERVER["HTTP_USER_AGENT"], "bot")>0
|| stripos($_SERVER["HTTP_USER_AGENT"], "wget")>0
(...)
){
header("HTTP/1.1 301 Moved Permanently");
header("Location: $sNewUrl");
}
}
Warum das Ganze?
Bisher habe ich einen Parser verwendet, dessen Entwicklung seit einer gefühlten Ewigkeit eingestellt ist. Securitymässg ist das keine so tolle Ausgangslage.
Die Wahl fiel deshalb auf Concrete 5, weil ich bereits andere Webseiten damit umgesetzt habe und das Benutzerinterface beim Bearbeiten ganz nett und angenehm finde.
Was blieb gleich?
Die visuelle Menüstruktur blieb weitestgehend identisch. Die neue Webseite wurde aufgeschaltet, als ich ca. 95% der Inhalte und Funktionen drin hatte. Nur mit neuen URLs halt. Was fehlt, sind Fotos und VB-Script- und einige veraltete Javascript-Seiten.
Was sonst so gleich blieb:
- Statistik erfolgt weiterhin mit Piwik
- die Suche ist immernoch die von Sphider
- mein bisheriger HTML5-Audioplayer ist integriert (AMC Player)
- RSS News zu div. Themen werden im Hintergrund aktualisiert
Um meine Inhalte übernehmen zu können, brauchte ich unbedingt den Ersetzungsmechanismus aus dem bisherigen Parser. Dafür habe ich eine PHP-Klassse (mit Hilfe der Originalvorlage) geschrieben.
Was ist neu?
Neben dem Unterbau und den URLs (eben wg. des neuen CMS)
- werden Elemente von Bootstrap 3 genutzt: Menüs, Icons, Tabellen und andere Elemente nutzen dieses Framwork.
- das Layout wurde etwas frischer.
- Seiten können Tags haben. Mit Klick auf einen Tag kommt man zu einer Suchseite, die Seiten aufzeigt, die denselben Tag verwenden.
- Seiten-Inhalte zu verwalten ist für mich einfacher. Davon habt ihr zwar nichts direkt, aber ihr profitiert davon.
weiterführende Links
- Concrete 5 (CMS; Opensource)
- Matomo.org (Statistik-Tool; früher: Piwik)
- Bootstrap (HTML-Framework)
- http://www.sphider.eu/ - Sphider (PHP-Suchmaschine - Anm.: hat bekannte Sicherheitslücken und wird nicht mehr weiterentwickelt)
- AMC Player (HTML5 Audioplayer für surround und stereo)
- RSS-News (im Menü rechts dann eine Rubrik wählen)
Fundstück: Diskette
Es ist sooo lange her, dass ich meine ersten Programmzeilen geschrieben habe. Das war zu meinen Schulzeiten an einem 8 Bit Computer namens Z9001 und muss so 1987 herum gewesen sein.
Nach der Wende war mein erster Computer ein C-64 … im Studium mein zweiter ein PC. Nicht zuletzt wg. des Informatikkurses bin ich auf Turbo Pascal umgeswitcht und habe unter DOS programmiert. Mein DOS-Highlight war damals ein Freeware-Menüprogramm, das bei einem Programmaufruf aus dem Speicher verschwand - mit Mausunterstützung und Drag and Drop.
Und irgendwann begann MS Windows, sich durchzusetzen. Mein erstes Windows-Programm, was ich mit Delphi zu einem kompletten Projekt gemacht habe - das heisst: mit Installer und Hilfedatei und derlei Drumherum - war jenes auf diesem Plastik-Dings im Bild unten, Diskette genannt. Tja, damals hatte man an an einem Rechner diverse Schlitze, um um dieses Etwas einschieben zu können. Hach damals … *seufz*
Weiterführende Links: