Hinweis auf noch nicht gespeicherte Elemente beim Verlassen der Webseite
Kategorie: web-development
Es gibt Momente, an denen man den User daran hindern möchte versehentlich eine Seite zu schließen.
Ein gutes Beispiel dafür ist das Editor Fenster von WordPress. Wird hier eine Änderung nicht gespeichert und das Fenster geschlossen, warnt WordPress, dass die Änderungen verloren gehen, sobald das Fenster geschlossen wird.
Soetwas nachzubauen ist eigentlich ganz einfach und erfordert nur etwas jQuery Code:
Weiterlesen: Hinweis auf noch nicht gespeicherte Elemente beim Verlassen der Webseite »
Bling Bling Effekt mit jQuery
Kategorie: web-development
Ich habe für ein neues Projekt länger nach einem “Bling Bling” Effekt für jQuery gesucht, der einem Bild den Eindruck geben kann, als würde es von einer Glasoberfläche bedeckt werden und jemand würde die Fläche hin und wieder leicht wenden, so dass darin Spiegelungen zu sehen scheinen (siehe Video). Eines Tages zeigte mir dann meine Kollegin ShineTime.
Eigentlich ist ShineTime eine Fotogallerie mit netten jQuery Effekten — beinhaltet aber eben diesen Effekt den ich so lange gesucht habe! Wenn ich mir für meine Zwecke den Code dazu aber anschaue, werde ich gleich von einer Lawine an jQuery code überrollt. Also habe ich den Code wirklich auf das wesentlichste abgespeckt und möchte euch zeigen, wie einfach dieses “Bling Bling” umgesetzt werden kann.
h5Validate – The HTML5 Form Validation Plugin for jQuery
Kategorie: Aus dem Leben...
Sehr schönes HTML5 Form Validation Tool für jQuery. Macht es wirklich einfach Formulare aus Usersicht schön zu validieren und dem User Usabilityfreundlich Rückmeldung zu geben.
Simple automatic “flash” slideshow using HTML and jQuery
Kategorie: web-development
“If you are looking for a quick and easy slideshow solution that is fully editable via HTML then here is a simple jQuery solution. “
Den Browser per jQuery erkennen
Kategorie: web-development
Per CSS lässt sich nur der IE erkennen, alle anderen bleiben nur “alle Anderen”. Mit Hilfe von jQuery lassen sich jedoch alle Browserfamilien separat erkennen:
CSS browser-size selection mit JavaScript
Kategorie: web-development
Ich habe nach einer Lösung gesucht, das Design einer Webseite abhängig von der Größe des Browserfensters zu gestalten. Das Design sollte bei kleinen Browserfenstern nicht abgeschnitten aussehen und der Inhalt — meist Bilder — jeweils skaliert werden.
Zur Lösung des Problems gibt es leider keine Conditional Comments, oder CSS Selektoren aber einen einfachen Trick mit JavaScript. Mittels $(window).width() kann man nämlich die Fenstergröße abfragen und daraufhin das CSS passend bspw. mit $("#wrapper").css("width", "820px"); manipulieren.
Also einfach im <head></head> ein Skript bspw. wie folgt hinzufügen, und fertig:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
if($(window).width() < 1024)
{
$("#wrapper").css("width", "820px");
$("div#content").css("width", "600px");
$("div#content img").css("max-width", "575px");
}
elseif ($(window).width() < 800)
{
$("#wrapper").css("width", "520px");
$("div#content").css("width", "300px");
$("div#content img").css("max-width", "275px");
}
});
</script>
</script>(Google)Robots-freundliche Inhalte durch Nachladen von Inhalt mittels jQuery?!
Kategorie: web-development
Google nennt sowas Cloaking. “Cloaking bezeichnet den Versuch, Nutzer zu täuschen, indem Suchmaschinen und Besuchern unterschiedlicher Content oder unterschiedliche URLs bereitgestellt werden.”
Ich habe in meinem letzten Beitrag eine Möglichkeit beschrieben HTML Inhalte mit jQuery (JavaScript) dynamisch nachzuladen. Allerdings habe ich im nachhinein festgestellt, dass im verarbeiteten Quellcode des Browsers der Inhalt leider nicht auftaucht — es ist lediglich der “alternative content” zu sehen. Ein Tool, welches mir die Seite aus Sicht eines Google-Bots anzeigt, bestätigte mir die Befürchtung.
Aus SEO’s Sicht ein Fluch und Segen zugleich. Einerseits lassen sich so im “alternative content” viel Roboter-freundlichere Texte unterbringen, die der normale User der Seite als abgehackt und grammatikalisch falsch empfinden würde, anderseits muss der “alternative content” mit jeder Änderung des nachgeladenen Contents händisch aktualisiert werden.
Glaubt man SEO Meinungen, die besagen, dass der SEO dem Genitiv sein Tod sei und die SEO Grammatik ein Fall für sich sei so ließe sich der “anderseits Teil” eher vernachlässigen und die Tatsache, dass der nachgeladene Inhalt für die Robots nicht sichtbar ist, eher als Gewinn (aus SEO’s Sicht) betrachten.
Sicheres Kontaktformular mit jQuery und PHP erstellen
Kategorie: web-development
Ein Kontaktformular ist mit PHP eigentlich schnell erstellt und lässt sich einfachste Weise in jede Webseite einbauen. Was leider oft vergessen wird ist die Sicherheit — nicht nur zum Schutz vor SPAM des Kontaktformular-Administrators, sondern auch zum Schutz vor Injections, die das Skript zum versenden von SPAM unter dem Namen des Webseitenbetreibers missbrauchen können.
Oft wird diese vermeintlich triviale Website-Funktion von Programmier-Anfängern umgesetzt, die keine Erfahrung mit der sicheren Web-Programmierung haben. Solche Skripte prüfen die Formular-Eingaben nicht auf unerlaubte Zeichen – dadurch können sie von Spammern als Spam-Verteiler missbraucht werden … Das oberste Gebot eines jeden Web-Programmierers muss lauten: “Vertraue nichts und niemandem”. Daten, die ein Skript aus HTML-Formularen, POST/GET-Übergabeparametern oder sonstwoher erhält müssen grundsätzlich als potenziell gefährlich angesehen und vor der Verarbeitung “gesäubert” werden. Eine “gesunde” Portion Paranoia ist sehr hilfreich beim Web-Programmieren, auch wenn Auftraggeber oder Vorgesetzte manchmal schief gucken mögen.
Auch wenn man ein Webskript nicht so sicher machen kann wie ein Tresor, lässt sich ein Kontaktformular doch recht einfach absichern. Damit die SPAMmer nicht so einfach freies Futter finden, hier also eine Anleitung, wie ein Formular sehr einfach abgesichert werden kann — und dazu passend ein How-To zur Erstellung eines sicheres Kontaktformulars mit PHP und jQuery
EDIT: ich habe seit der Erstellung des Posts gelernt, dass eine alleinige JS Validierung aus Sicherheitstechnischer Sicht eigentlich gar keine ist, denn: “Die Validierung von Formularen über JavaScript kann zwar nützlich sein, da sie oft schneller ist und die Seite nicht neu geladen werden muss, allerdings ist sie kein Ersatz für eine erneute Validierung der Daten auf der Seite des Servers. Sind die Daten nicht serverseitig validiert worden, kann man davon ausgehen dass sie überhaupt nicht validiert wurden.” [gängige Sicherheitsprobleme im Web
Zudem "hat sich leider immer wieder herausgestellt, das es mit Javascript unmöglich ist, eine Validierung zu garantieren. Irgendwelche Trottel haben Javascript immer ausgeschaltet oder es buggt. " [phpBlogger]
Ich werde demnächst also nur noch eine phpValidierung durchführen, und wohlmöglich mit Hilfe dieser Bibliothek
