blattertech informatikLukas BlatterNiederlenzerstrasse 21
5600 Lenzburg/AGSwitzerland

079 569 25 90
https://www.blattertech.ch

Adresse anzeigen

Blog

Warum wird meine Seite gehackt?

15. Februar 2017 |  WEBDESIGNKommentare (0)

Vor kurzem habe ich einen interessanten Artikel zum Thema "Warum wird meine Seite gehackt?" gelesen. Marc Nilius trägt hier einige Fakten sehr anschaulich zusammen:

www.wp-wartung24.de/warum-wird-meine-seite-gehackt/


target=_blank - eine unterschätzte Sicherheitslücke bei sozialen Medien

2. September 2016 |  WEBDESIGNKommentare (0)

T3N hat einen interessanten Artikel zu target=_blank veröffentlicht.
Wird ein Link mit target=_blank geöffnet, öffnet sich ein neues Browserfenster. Durch den dabei ausgeführten Befehl window.opener erhält die sich neu öffenende Seite Zugriff auf das bisherige Browserfenster. So ist es möglich via Javascript möglich den Inhalt der Ursprungsseite zu verändern. Gefährdet sind hier vor allem soziale Medien wie Facebook.

Klickt man z.B. bei Facebook auf einen Link, so kann die Zielseite die noch offene Facebookseite manipulieren, so dass man z.B. das Passwort eingeben muss, welches direkt bei den bösen Buben landet.

Als Webseitenbetreiber mit Kundenlogin welcher target=_blank verwendet, kann man seine Benutzer wie folgt schützen:

<a href="http://www.seite.com" target="_blank" rel="noopener noreferrer">Neue Seite</a>

Mit dem rel="noopener noreferrer" setzt man den window.opener auf Null. Somit erhält die neue Seite keinen Zugriff mehr auf die bisherige Seite.

Ob man als User von diesem Problem betroffen ist, kann man auf dieser Seite testen:
https://mathiasbynens.github.io/rel-noopener/

Beim Cross-Origin Beispiel warnt mich Firefox, dass die Ursprungsseite Seite plötzlich umleiten will. Dazu gibt es einerseits eine Einstellung: "Erweitert" › "Allgemein" die Option "Warnen, wenn Webseiten versuchen umzuleiten oder neuzuladen"
Außerdem gibt es noch das AddOn RequestPolicy. RequestPolicy warnt unabhängig von dieser Einstellung.


Einfacher Slider mit jQuery

15. August 2016 |  CMS MADE SIMPLE |  WEBDESIGN |  JQUERYKommentare (2)

Auf Stack Overflow habe ich vor kurzem einen einfachen Slider entdeckt. Der Slider nutzt jQuery ohne weitere Plugins.

<html>
<head>
<style>
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: sans;
}
.track {
  position: relative;
  height: 400px;
  width: 100%;
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.ipsum {
  display: inline-block;
  padding: 10px;
  background-color: rgba(255, 255, 255, .75);
}
</style>

</html>
<body>
<div class="jCaroFade track">
  <!-- Slides -->
  <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/550/20180902929_88c507f552_h.jpg');">
    <p class="ipsum">SLIDE ONE</p>
  </div>
  <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/277/19726574813_cf2aa22221_b.jpg');">
    <p class="ipsum">SLIDE TWO</p>
  </div>
  <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/488/20178281609_c1e34be0b2_b.jpg');">
    <p class="ipsum">SLIDE THREE</p>
  </div>
  <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/414/19744665244_c099ce816c_h.jpg');">
    <p class="ipsum">SLIDE FOUR</p>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>$('.jCaroFade').each(createFader);

function createFader(i, elem) {
  var track = $(elem);
  var firstSlide = track.find('.slide').eq(0);
  var loop = 0;

  firstSlide.nextAll().hide();
  setInterval(function() {
    loop++;
    firstSlide = firstSlide.fadeOut(500, function() {
        $(this).appendTo(track);
      })
      .next()
      .fadeIn(500);
  }, 3000);

}
</script>
</body>
</html>


Eine Demo des Sliders kann auf jsFiddle angeschaut werden.


HTML5Shiv - neue URL

3. Juli 2016 |  WEBDESIGNKommentare (0)

Diverse Templates verwenden um die Kompatibilität von HTML5 mit IE9 oder älter zu ermöglichen, die JavaScript Bibliothek HTML5Shiv. Diese wurde zu Beginn auf GoogleCode gehostet.

<!--[if IE]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Das Projekt wird mittlerweile auf Github gehostet. Um HTML5Shiv wieder zum laufen zu bringen, muss die URL angepasst werden. Eine Möglichkeit dazu ist die Verwendung des CDN von Cloudflare. Auf CDNJS.com findet man dazu den Link.

Somit ist der Code neu:

<!--[if IE]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->

Ein weiterer Vorteil ist die Einbindung via SSL. Mittlerweile werden viele Seiten mit SSL betrieben was die Einbindung von externen Scripten per SSL erfordert.


Linktipp 18

17. Juli 2013 |  CSS |  PHP |  WEBDESIGN |  LINKTIPPKommentare (0)

Unter Linktipp veröffentliche ich in unregelmässigen Abständen einige interessante Links welche mir über den Weg gelaufen sind:

RedBeanPHP - Datenbankzugriff ohne SQL Statements
Stefan Wienströer hat ein ausführliches Tutorial zu RedBeanPHP veröffentlicht. RedBeanPHP legt automatisch eine Datenbankstruktur zu Objekten an oder erweitert diese.
Der Einsatz gestaltet sich sehr einfach. Mehr dazu in verlinkten Tutorial.

Windows Developer System – Der Webserver
Um Webseiten zu entwickeln gibt es verschiedene Möglichkeiten. Optimal setzt man dabei auf einen eigenen Webserver auf dem PC / Mac. Eine Möglichkeit dafür ist der ZendServer. Sascha Presnac stellt das System in seinem Blog vor:

Create modern CSS3 hover effects
Sehr gutes Tutorial welches zeigt, wie Hover Effekte in CSS3 aufgebaut sind und welche Auswirkungen die einzelnen Parameter haben.

Praktische jQuery Snippets
Auf catswhocode.com hat Jean-Baptiste Jung einige sehr praktische jQuery Snippets zusammengetragen:

  • Smooth Anchor Scrooling
  • Bildgrössen Anpassung
  • Inhalt beim Scrollen automatisch laden
  • Höhe eines Div Elements ermitteln
  • JSON Parsing
  • und einige weitere

Fontastic - Webapp zum Zusammenstellen von Icon-Fonts
Mit Fontastic lassen sich angepasste Icon-Fonts erstellen. Seit längerem haben Icon-Fonts anstelle von Grafischen Icons Konjuktur. Statt jedoch eine Icon-Font mit 300 Zeichen zu laden, lässt sich mit Fontastic eine Font zusammenstellen welche nur die 3-4 Zeichen die man benötigt beinhaltet.

PowerPoint 2007 - Vorschau während der Präsentation aktivieren
Wird eine Präsentation via Beamer an die Wand projeziert, so kann der sogenante Moderationsmodus genutzt werden. Damit können neben den Folienkommentaren auch eine mitlaufende Uhr und die nächsten bzw. vorangegangenen Folien angezeigt werden.
Aktiviert wird das ganze wie folgt: 2. Monitor / Beamer anschliessen. Danach in PowerPoint in die Registerkarte "Bildschirmpräsentation" gehen, dort "Bildschirmpräsentation einrichten". In den Einstellungen "mehrere Bildschirme" aktivieren und den Haken beim Präsentationsmodus setzen.

jQuery Unveil
Laut t3n das kleine Lazy-Load Plugin für jQuery. Für Responsives Webdesign lässt sich damit einfach das Laden von verschiedenen Bildauflösungen umsetzen

Regelmässig poste ich interessante Links auf Twitter: @lukasblatter


Linktipp 17

9. April 2013 |  LINKTIPP |  CSS |  PHP |  TYPO3 |  WEBDESIGNKommentare (0)

Unter Linktipp veröffentliche ich in unregelmässigen Abständen einige interessante Links welche mir über den Weg gelaufen sind:

PHP header() Umleitung funktioniert nicht
Funktioniert eine header() Umleitung nicht, so ist bereits vor dem header() Aufruf eine Ausgabe erfolgt. Mit headers_sent kann einfach ermittelt werden wo diese Ausgabe erfolgt ist.


Linktipp 16

22. Februar 2013 |  LINKTIPP |  CSS |  SONSTIGES |  SQL |  TYPO3 |  COMPUTER |  WEBDESIGNKommentare (0)

Unter Linktipp veröffentliche ich in unregelmässigen Abständen einige interessante Links welche mir über den Weg gelaufen sind:

Tückische Autoincrement-Werte in MySQL
MySQL hat das Problem, das unter Umständen der letzte Autoincrement Wert verloren gehen kann, wenn der MySQL Server neugestartet wird. Wird z.B. der letzte Eintrag mit der ID 3 gelöscht, so vergibt MySQL nach dem Neustart nochmals die ID 3. Mehr dazu im verlinkten Blogpost.

Notfallhilfe für Windows 8 mit Windows PE
Manchmal will auch ein Windows nicht mehr. Da ist guter Rat manchmal teuer. Die verlinkte Anleitung von Borncity zeigt mehrere Lösungswege auf, wie man mit einem Windows PE Datenträger die Windows-Installation reparieren oder zumindest die Daten sichern kann.

Retina Images mit Typo3
Der Artikel von typo3blogger.de


Linktipp 15

5. Februar 2013 |  LINKTIPP |  SONSTIGES |  COMPUTER |  WEBDESIGNKommentare (0)

Unter Linktipp veröffentliche ich in unregelmässigen Abständen einige interessante Links welche mir über den Weg gelaufen sind:

Betriebskonzepte des Flughafen Zürich
Der Flughafen hat einen interessanten, 20 minütigen Video zu drei verschiedenen, möglichen Betriebskonzepten veröffentlicht. Je nach Wetter und Tageszeit wird der Flugbetrieb mit einem der drei Konzepte abgewickelt. Im Video werden diese Konzepte vorgestellt und gezeigt wo diese optimiert werden könnten.
via read you five

Windows 8: Verbindungsreihenfolge ändern
Es ist möglich in Windows 8 die Reihenfolge in welcher die möglichen Veribindungen aufgebaut werden zu ändern. Günter Born hat dazu eine Anleitung geschrieben.

Windows 8 God Mode: Systemsteuerung komplett
Unter Windows lässt sich mit einem bestimmten Ordnernamen die Systemsteuerung komplett öffnen. Es werden dabei alle Optionen nacheinander angezeigt.


Linktipp 14

2. Februar 2013 |  LINKTIPP |  CSS |  SONSTIGES |  COMPUTER |  WEBDESIGNKommentare (0)

Unter Linktipp veröffentliche ich in unregelmässigen Abständen einige interessante Links welche mir über den Weg gelaufen sind:

Windows Vollbackup mit Redo Backup erstellen
Bisher ist zumindest für mich Acronis True Image das Mass aller Dinge um Vollbackups eines System zu machen. Die Opensource Software Redo Backup bietet genau diese Möglichkeit. Caschy hat die Software in seinem Blog vorgestellt.

MeinEinkauf.ch: Online in Deutschland einkaufen
Lieferadresse Konstanz und viele verschiedene weitere Anbieter ermöglichen, dass ein Einkauf in Deutschland an eine deutsche Lieferadresse geliefert wird, wo der Einkauf abgeholt werden kann. Der Anbieter MeinEinkauf.ch geht noch ein wenig weiter und liefert das Paket für ein moderates Entgelt direkt zu dir nach Hause. Der Preis: Versand plus Verzicht auf die MwSt differenzt.
Sprain hat den Dienst vorgestellt.

Webseitenbesucher via Soziale Netzwerke identifizieren
Heise hat einen Bericht über einen Amerikaner gebracht, der nach dem Besucher einer Seite am nächsten Tag ein Werbe-E-Mail dieser Firma bekam, obwohl er keine E-Mailadresse oder sonstige Informationen zu sich hinterlassen hat. Die Identifikation soll alleine


Linktipp 13

11. Dezember 2012 |  LINKTIPP |  CSS |  COMPUTER |  WEBDESIGN |  CMS MADE SIMPLEKommentare (0)

Unter Linktipp veröffentliche ich in unregelmässigen Abständen einige interessante Links welche mir über den Weg gelaufen sind:

OpenPGP für Webmailer wie Google, Yahoo oder den Webhoster um die Ecke
Vor 10 Jahren war genau dies bei mir und einem Kollegen bereits ein Thema für das es damals noch keine wirklich praktikable Lösung gegeben hat. Mittlerweile gibt es dazu Erweiterungen für Firefox und Chrome, welche Caschy auf seinem Blog vorgestellt hat.

Win8 Backup mit Bordmittel
Günter Born stellt derzeit auf seinem Blog diverse Möglichkeiten zum Backup von Windows mit Bordmitteln vor. Der verklinkte Beitrag erklärt, wie ein Image-Backup der gesamten Windows-Installation gemacht werden kann.

HTML Code Sniffer
Wie barrierefrei ist meine Webseite. Mit dem Bookmarklet lässt sich einfach und schnell feststellen wie die Standards auf einer Webseite eingehalten werden.
via PHP Magazin

QR-Code Marketing
Lichtenecker hat einen interessanten Blog Beitrag mit zwei Beispielen zum QR-Code Marketing veröffentlicht. Beide Beispiele


Linktipp 10

26. September 2012 |  LINKTIPP |  PHP |  COMPUTER |  WEBDESIGN |  CMS MADE SIMPLEKommentare (0)

Unter Linktipp veröffentliche ich in unregelmässigen Abständen einige interessante Links welche mir über den Weg gelaufen sind:

Template's mittels include in CMSMS nutzen
Tapio Löytty hat eine Anleitung geschrieben wie in CMSMS ab Version 1.11 Templates mittels "include" und "block" Funktionen von Smarty3 genutzt werden können.


Linktipp 9

19. September 2012 |  LINKTIPP |  JQUERY |  PHP |  SNIPPLETS |  WEBDESIGN |  CMS MADE SIMPLEKommentare (0)

Unter Linktipp veröffentliche ich in unregelmässigen Abständen einige interessante Links welche mir über den Weg gelaufen sind:

Die ganz normale Praxis der Folter
Das Journal21 hat einen Hintergrundbericht zum Thema Folter veröffentlicht der die erschreckende Fakten wie, wo und warum auch von den USA gefoltert wird.

CSS Arrow Please
Mit diesem Dienst lassen sich Sprechblasen in CSS3 sehr einfach erstellen. (via @cyon)


Linktipp 8

12. September 2012 |  JQUERY |  WEBDESIGN |  CSS |  LINKTIPPKommentare (0)

Unter Linktipp veröffentliche ich in unregelmässigen Abständen einige interessante Links welche mir über den Weg gelaufen sind:

Jeder dritte fällt auf gezieltes Phishing herein
In einem Test mit über 10'000 Mitarbeitern aus 30 Unternehmen hat sich herausgestellt, dass das theoretische Wissen um Phishing in der Praxis noch lange kein entsprechendes Handeln hervorbringt. Zudem wurden von 6% aller Probanden eigene Zugangsdaten auf einer fremden Seite eingegeben.


Linktipp 6

4. September 2012 |  LINKTIPP |  PHP |  WEBDESIGNKommentare (0)

Unter Linktipp veröffentliche ich in unregelmässigen Abständen einige interessante Links welche mir über den Weg gelaufen sind:

60 User Interface Design Tools A Web Designer Must Have
Das Tripwire Magazin beschreibt hier diverse Tools die einem Webdesigner dienlich sein können. (via @wowawebdesign)

Nützliche elektronische Reisebegleiter für Geschäfts- und Ferienreisen


Linktipp 2

16. August 2012 |  LINKTIPP |  CSS |  WEBDESIGNKommentare (0)

Unter Linktipp veröffentliche ich in unregelmässigen Abständen einige interessante Links welche mir über den Weg gelaufen sind:

CSS Unminify
Optimalerweise minimiert man das Stylesheet wenn man einen möglichst guten Pagespeed erreichen möchte. Nur sind solche minimierten CSS Dateien schlecht lesbar. Mit dem CSS Unminify kann man das Stylesheet wieder lesbar darstellen.


Linktipp 1

1. August 2012 |  LINKTIPP |  SNIPPLETS |  WEBDESIGNKommentare (1)

In den letzten Wochen sind mir einige interessante Links über den Weg gelaufen die ich gerne hier mit euch teile. Teileweise habe ich diese Links durch weitere ergänzt:

PHP Security Cheat Sheet - OWASP
Diese Zusammenstellung ist eine gute Übersicht wie man Sicher in PHP programmiert.


XML: Tutorials und Linktipps

19. Juli 2012 |  WEBDESIGN |  SONSTIGESKommentare (0)

Derzeit schlage ich mich mit XML Files rum. Hier darum eine Sammlung von Links zu Tutorials und weiterem:

XML Schema Definition (ausführlich und gut erklärt)
XML Schema (Wikipedia)


CSS3: Breadcrumbs

10. Februar 2012 |  WEBDESIGN |  CSSKommentare (1)

Eine Breadcrumbs Navigation ist nützlich um dem Benutzer zu zeigen wo er in der hierarchischen Struktur einer Webseite befindet. Er kann über die Breadcrumbs Navigation zurück auf ein höheres Level wechseln.

Mit der CSS3 Breadcrumbs Navigation kann dies in ähnlichem Stil wie die Breadcrumbs Navigation von Apple ohne zusätzliche Grafikelemente umgesetzt werden.

CSS3 Breadcrumbs

Eine Demo sowie die Scripts dazu finden sich hier


CSS3: Silbentrennung “hyphens”

7. Februar 2012 |  CSS |  WEBDESIGNKommentare (2)

Bis anhin war die Silbentrennung mit HTML nicht möglich oder nur durch den Umweg eines JavaScripts. Mit der CSS Eigenschaft "hyphens" kann die Silbentrennung nun aktiviert werden.

body {
 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 hyphens: auto;
}


2 Klicks für mehr Datenschutz

6. September 2011 |  JQUERY |  SNIPPLETS |  WEBDESIGNKommentare (1)
2 Klicks für mehr Datenschutz

2 Klicks für mehr
Datenschutz

Heise.de hat vor kurzem ein jQuery Plugin für mehr Datenschutz bei Socialmedia Buttons veröffentlicht.

Das Plugin bindet die Socialmedia Buttons von Facebook, Twitter und Google+ erst auf den ausdrücklichen Wunsch des Nutzers ein.


Facebook und Google+ Buttons ohne direkte Einbindung

1. September 2011 |  WEBDESIGN |  SNIPPLETS |  JQUERYKommentare (0)

Facebook und Google+ Buttons sind aus der Sicht des Datenschutzes bedenklich. Ein weiterer Grund der gegen die direkte Einbindung dieser Buttons spricht, ist die Preformance welche rapide sinkt. Behelfen kann man sich mittels eines statischen Buttons der bei Klick den "richtige" Facebook oder Google+ Button nach lädt.

Folgende 2 Seiten haben hierzu interessante Anleitungen geschrieben:

Andiministrator Facebook / Google+
Media-Deluxe (Google+)


HTML5Pattern

31. August 2011 |  SNIPPLETS |  WEBDESIGNKommentare (0)

Eine interessante Anwendung von HTML5 ist das "Pattern" Attribut welches für Input Felder eingesetzt werden kann. Damit lassen sich mit regulären Ausdrücken die Eingaben in einem Feld überprüfen und auswerten. Auf der Seite HTML5Pattern sind diverse Beispiele dazu veröffentlicht. Ein Beispiel daraus:


Yahoo! Webplayer

6. August 2011 |  SNIPPLETS |  WEBDESIGNKommentare (0)

Yahoo! hat mit dem Webplayer ein sehr einfach zu nutzendes Tool geschaffen, mit welchem Mp3, Videomaterial oder auch youtube Videos in die eigene Webseite integriert werden kann.

Yahoo! Webplayer

Der Player wird wie folgt eingebunden:


Conditional HTML Class

25. Juli 2011 |  SNIPPLETS |  WEBDESIGNKommentare (0)

Der Internet Explorer (IE) ist dafür bekannt, dass er einige HTML oder CSS Befehle anders umsetzt oder z.T. gar nicht kennt. Microsoft hat für mit den Conditional Comments eine Möglichkeit geschaffen, einfach die verschiedenen Browserversionen zu erkennen. Diese Möglichkeit lässt sich nutzen, um ohne die üblichen CSS Hacks einen einem sauberen CSS Code zu schreiben. Zuerst wird die entsprechende IE Version gecheckt und anschliessen die entsprechende Version als class dem HTML Tag zugewiesen. Um nun eine bestimmte IE Version anzusprechen, muss im CSS nur der entsprechende Parent-Selektor eingefügt werden (Bsp: .ie6 .box).


Bilder horizontal und vertikal zentriert ausrichten

15. Juli 2011 |  WEBDESIGNKommentare (0)

Wer eine Bildergalerie erstellt stand sicher auch schon mal vor dem Problem, dass bei einer Umsetzung ohne Tabelle die Bilder nicht einfach horizontal und vertikal zentriert werden können. Hier eine Lösung für dieses Problem:

Bilder horizontal und vertial zentriert ausrichten