Happy Birthday Gewinnspiel bei Cashy

Alle Jahre wieder gibts ein Geburtstags Gewinnspiel bei Bloggern. Aktuell feiert Cashy (alias Carsten Knoblauch) den siebenten Geburtstag seines Bloges und das mit viel Technik, so viel dass er jenes Gewinnspiel in zwei Teile splitten musste.

Gewinne-550x365

Im ersten Teil habt ihr die Chance auf Tablets, Smartphones und Gadgets wie S-Pens.

Schauts euch an und viel Erfolg beim Gewinnen :)

>>Hier gehts zun Gewinnspiel.

Google Music + Last.fm = <3

Ich zitiere mal einen bekannten, wortwörtlich wohlgemerkt:

"mimimimimimimimimimimimimimimimimimi ich kann ja gar nicht zu Last.fm scrobbeln mit diesem Google Music"
- Anonymer Bekannter, 20xx

Und bis vor einigen Tagen musste ich dieses auch unterstreichen. Doch nun gibt es DIE Lösung für das Problem, nämlich ein kleines Script von Daniel Slaughter. Dieses klingt sich über die Last.fm API in den Google Music Player und scrobbelt eure gespielten Tracks.

Doch bei solchen Userscripten stellt sich einem die Frage ob der Urheber des Codes nicht persönliche Daten über einen selbst sammelt. Das tut das besagte Script. Und zwar, zumindest nach angaben des Autors nur, die E-Mail-Adresse, den Last.fm Namen und die Session-ID vom Last.fm Cookie.

Schaut's euch an, kann man mögen, muss man aber nicht. Ich zumindest find's klasse : D

Otaku Mode? Oh Yeah!

Was wissen wir. Ich = Gamer Nerd, Otaku und heimlicher Verehrer von Kanalraten ... o. k. das Letzte ist gelogen. Aber das ich eine gewisse Affinität zu japanischen Spielen und Animationsfilmen aus dem selbigen Ort abfahre dürfte nur die wenigsten schockieren - und diejenigen, die das zum ersten Mal lesen: Es tut mir leid das ihr es auf diesem Weg erfahren musst.

Trolled1
Jedenfalls trägt man als Gamer gerne Shirts von seinen favorisierten Spielen, Sendungen, Helden, Antihelden, Maskottchen, Produkten, Werbemitteln, Tieren, Anti-Körper-Heizstrahlern und so weiter ... Doch was macht man als Otaku (alias. Anime Nerd)? Genau man geht auf eine Convention und kauft sich irgendwelche in China von klein Kindern bedruckte T-Shirts, welche nach dem 1 Waschen den Eindruck eines 50.Waschgangs vermitteln. Sollte man sich also mit so was nicht unbedingt zufriedengeben wollen, gibt es nun Boomslank, ein kleines Studio, welches hoch grafische T-Shirts etc. produziert - natürlich gegen einen guten Preis. (Aber man weis ja, Qualität steigt meist unproportional zum Preis)

Hier mal zwei Beispiele:

(download)
Der ganze Beitrag hier hat einen (fiesen?) Hintergedanken. Der gute RadiantDreamer (bekannt für das Cover von BlazBlue:Continuum Shift in Europa) verlost einige dieser Shirts. Und dieser Beitrag hier zählt als Teilnahmebedingung) also seid mir nicht böse.

Weniger ist manchmal mehr. LESS.

Da ich haupt- und nebenberuflich sehr viel mit CSS, HTML5 und dem ganzen Kram zu tun habe, war ich vor einigen Tagen auf der Suche nach einem etwas frischerem CSS Grid, den dass 960er Grid ist mittlerweile, in meinen Augen, nicht ganz so aktuell oder um es besser zu formulieren: Das 960er Grid System ist mir zu statisch. Ich will dieses nicht schlecht reden, die Leute welche dahinter sitzen / saßen / knieten haben echt eine klasse Arbeit gemacht und ich will es immer noch nicht missen, bedenkt man jedoch die aktuelle Lage der verschiedenen Bildschirmformate (Smartphones, Tablets oder Netbooks) macht sich ein etwas "dynamischeres" CSS Sytem besser. Und um den Bezug zum eigentlichen Thema zu finden, bin ich bei meiner, zufälligen, Suche auf das LESS Framwork gestoßen.

Ich will hier auch nicht über den allgemeinen Sinn bzw. Unsinn von CSS Frameworks diskutieren. Sicherlich gibt es wie überall Vor- und Nachteile. Für meinen Teil empfinde ich solche Frameworks als sehr arbeitserleichternd, und viel wichtiger, zeitsparend.

Die Grundidee

Wie bereits erwähnt, ist es in der heutigen Zeit sehr wichtig möglich viele Medienformate mit einer Seite abzudecken. Den wir sind momentan immer unterwegs, arbeiten an irgendwelchen Projekten (was ja immer ganz cool klingt, wenn man in der Lounge mit anderen über seine Arbeit redet und dabei auf seinem Macbook Air rumtippt) und dabei hat man seine Seiten meistens auf diversen Geräten wie dem iPad, iPhone oder einem Android Phone auf.

Nun wird meistens eine mobile Version der Seite geladen, sofern die gewählte Seite auf ein mobiles Gerät optimiert wurde. Bei den ganzen Wordpress Nutzern ist meistens das beliebte WPtouch im Einsatz. Ich sehe hier folgende Nachteile:

  • Es ist ein Plug-in, wodurch unnötiger Ballast erzeugt wird
  • Zusätzliche Abfragen durch Javascripts
  • Undynamisch da vieles vom Plug-in abhängt, und man relativ eingeschränkt ist

Es gibt noch weitere Plug-ins für Wordpress welche denselben Zweck haben, eine mobile Fassung der Seite zu generieren, wohingegen WPtouch noch die High-End Klasse solcher Plug-ins ist. Nun nehmen wir mal an, wir haben einen Kunden welcher UNBEDINGT Funktion oder Darstellung XY in der mobilen Ansicht haben (den hat er hat ja NATÜRLICH Beweise und Statistiken, welche besagen, dass es sehr wichtig ist, genau jenes zu zeigen) - zu diesem Zeitpunkt fallen so ziemlich alle Plug-ins weg, da man dort meistens keine tief gehende Konfigurationsmöglichkeiten hat.

Für solche Zwecke ist LESS konzipiert, welches sich des "media-query" im CCS3 bedient.

Me...die...ja...Kuh...erie?

Mit der in CSS2 eingeführten Abfrage des genutzten Mediums durch media="screen", media="print" etc. konnte man einzelne Stylesheets für, zum Beispiel, die Druckvariante einer Seite festlegen. Diese Medienabfrage wird nun, beziehungsweise um genauer zu sein, wurde schon, in CSS3 erweitert und nennt sich, wie bereits gesagt, Media Query.

Das Ganze funktioniert ähnlich wie die "alten" Media abfragen jedoch kann man nun auch bestimmte Variablen abfragen.

Somit werden mit @media only screen and (min-width: 1212px) { XYZ:123 } nur die Eigenschaften XYZ angewandt wenn das darzustellende Display ein farbiger Bildschirm und mindestens einen Viewport von 1212px hat.

Alle vom W3C eingeführten Media Features, wie die einzelnen Media Query Eigenschaften genannt werden, kann man in einer schönen Übersicht auf ihrer Seite nachsehen. Außerdem empfehle ich allen den Heise Artikel von Michael Jendryschik zu lesen, dort wird noch auf Negation und andere Spielereien mit den Queries eingegangen wird.

Das Framework

Zurück zum eigentlichen Framework. Das LESS nutzt für seine Aufteilung die Fibonacci-Zahlen bis zur 13.

  • 3 Spalten für kleine Displays bis 320px (iPhone etc. im Portrait Modus)
  • 5 Spalten für kleine Displays bis zu 480px (Smartphones im Landscape Modus)
  • 8 Spalten für "alte" Monitore und Browser bis zu 768px
  • 13 Spalten für Monitore bis zu einer Breite von 1280px

Somit lässt sich unser Layout im Goldenen Schnitt teilen. Hat man nun ein Element, welches alle Spalten im 3er Layout einnimmt, ist dieses in der 8 Spalten Darstellung nur 38% breit (1,14 Spalten).
Bei der Typografie wurde auch darauf geachtet, den Goldenen Schnitt mit einfließen zu lassen, dabei wurde der Text auf die 24px Grundlinie optimiert.

Aber Aber Aber.... Was ist mit dem Internet Explorer?

Persönlich optimiere ich GAR NICHT mehr für den IE, da ich es nicht einsehe auf dieses miese Stück Software zu optimieren (was hat sich Microsoft nur dabei gedacht). Das LESS bietet dabei zwei Möglichkeiten: Entweder man belässt den Code im Urzustand, dabei nutzen alle alten Browser (auch der IE bis zur Version 8) das 768er Layout oder man nutzt ein JavaScript welches, alten Browsern ermöglicht die Media Queries abzufragen.

Doch nun stellt eich einigen die Frage wieso überhaupt das LESS und nicht die anderen media-query Grid-Systeme. Ich bin der Meinung dass das LESS ein optimal optimiertes CSS Grid ist und für die Zukunft gewappnet ist. Schaut es euch an, macht euch ein Bild davon und fangt an zu gestalten, den eine PSD und PNG Vorlage werden mitgeliefert.

Links: