Guymon

YAMB - Yet Another Mobile Boilerplate

Noch ein responsive HTML Boilerplate was ich mir mal ansehen werde:

YAMB is a small set of tools and best practices that allow web designers to build responsive websites faster. Websites built with YAMB will be optimized for screen widths between 320px and anything. Resize your browser to check it out.

YAMB includes features that are requested by the clients all the time:

• Fluid grid layout.
• Drop-down menu with possibility of unlimited sub-levels or/and mega subs.
• For small screens drop-down menu is automatically converted into select box.
• Responsive image slideshow with captions.
• Responsive images in content part of the website

Keylogging mit dem Accelerometer

Spannend, Forschern ist es gelungen über die DeviceOrientation API einen Keylogger zu programmieren, der zu 70% korrekt die Tasten erkennt.

Two researchers from the University of California Davis, Hao Chen and Lian Cai, have successfully divined the keystrokes on an Android on-screen keyboard by measuring the wiggles, jiggles, and vibrations picked up by the device’s accelerometer. This is significant because the data from accelerometers is not thought of as a potential attack vector, and is thus freely available to any application on any smartphone or tablet.

Responsive Images with CSS3

Nicolas Gallagher diskutiert eine weiter Möglichkeit Responsive Images zu realisieren. Er setzt auf CSS3 statt auf JavaScript.

This method relies on the use of @media queries, CSS3 generated content, and the CSS3 extension to the attr() function. (…) The source image is “mobile optimised” and the urls of larger size images are included using HTML data-* attributes.

Das HTML sieht dann so aus:

<img src="image.jpg"
 data-src-600px="image-600px.jpg"
 data-src-800px="image-800px.jpg"
 alt="">

Und das CSS so:

@media (min-device-width:600px) {
 img[data-src-600px] {
 content: attr(data-src-600px, url);
 }
}
@media (min-device-width:800px) {
 img[data-src-800px] {
 content: attr(data-src-800px, url);
 }
}

Sehr spannend auch wenn im Artikel noch auf einige Probleme hingewiesen wird.

Responsive Images

Responsive Images ist ein Ansatz der filamentgroup Bilder passend zum Context zuladen. Im Kern ist das ein “Mobile-First” Ansatz in dem die Desktop Bilder via JavaScript nachgeladen werden.

The goal of this technique is to deliver optimized, contextual image sizes in responsive layouts that utilize dramatically different image sizes at different resolutions. Ideally, this could enable developers to start with mobile-optimized images in their HTML and specify a larger size to be used for users with larger screen resolutions — without requesting both image sizes, and without UA sniffing.

Im Quellcode sieht das so aus: <img src="small.jpg?full=large.jpg" >

Ganz spannend was sich im Bereich Responsive Webdesign gerade so tut.

Funkzellenauswertung

Aus der taz:

Die Dresdner Polizei hat bei den Antinaziprotesten im Februar dieses Jahres die Handyverbindungen von tausenden Demonstranten, Anwohnern, Journalisten, Anwälten und Politikern ausgespäht. (…) Dabei erfasste die Polizei über einen Zeitraum von mindestens viereinhalb Stunden sämtliche Anrufe und SMS-Nachrichten, die bei allen Personen ein- oder ausgingen, die sich in der Südvorstadt aufhielten. (…) Von ihnen allen liegen den Behörden jetzt die Handyverbindungsdaten vor. Offiziell sollten mit dieser groß angelegten Überwachungsaktion Personen gefunden werden, die zuvor Polizisten angegriffen hatten. In mehreren Fällen wurden die Handydaten aber für andere Ermittlungen zweckentfremdet.