mediaVROG Blog

Mobile Widgets – Eine Einführung

mediavrog — Mon, 07 Jun 2010 11:06:51 +0000

Während meiner Tätigkeit bei MyMobai habe ich aktuelle Möglichkeiten zur mobilen Cross-Plattform Entwicklung evaluiert. Neben der Nutzung von Tools wie Titanium und PhoneGap sind dabei vor allem Widgets sehr interessant.
In diesem und folgenden Artikeln möchte ich daher über meine Erfahrung damit berichten. Zu Beginn eine Einführung zu Widgets:

Was sind Widgets?

Ein Widget ist per Definition

eine Komponente eines grafischen Fenstersystems. Das Widget besteht zum einen aus dem Fenster, einem sichtbaren Bereich, der Maus- und/oder Tastaturereignisse empfängt, und zum anderen aus dem nicht sichtbaren Objekt, das den Zustand der Komponente speichert und über bestimmte Zeichenoperationen den sichtbaren Bereich verändern kann. Widgets sind immer in ein bestimmtes Fenstersystem eingebunden und nutzen dieses zur Interaktion mit dem Anwender oder anderen Widgets des Fenstersystems. [Quelle: Wikipedia]

Aus Nutzersicht sind Widgets im klassischen Sinne kleine Programme, welche einen ganz konkret abgegrenzten Anwendungsfall abbilden. Sie lassen sich ohne Einarbeitung bedienen und besitzen nur wenige Ansichten. Doch gerade auf mobilen Endgeräten stimmt dies nicht immer: es existiert zwar eine Vielzahl von einfachen Widgets wie Feedreadern und kleinen Utility-Programmen, aber auch komplexe Anwendungen wie Location Based Services werden auf Basis der Widget-Technologie implementiert.

Technisch gesehen sind Widgets auf den meisten Plattformen einfache Packages aus XHTML-, Javascript,- CSS- und Bildressourcen. Damit sie ausgeführt werden können, wird eine so genannte Widget Runtime (WRT) benötigt, welche auch auf mobilen Geräten vorzufinden sind.

Vorteile von Widgets

Der größte Vorteil bei der Widgetentwicklung ist wohl die einfache Umsetzung mittels bekannter Webtechnologien (X)HTML, CSS und JavaScript. Im Gegensatz zur nativen Programmierung wie mit objective-c oder C++ finden auch Fronendentwickler einen leichten Einstieg in die mobile Anwendungsentwicklung. Vorhandenes Know-How kann dadurch ohne Umwege genutzt werden.

Auch im Vergleich zu Webanwendungen bieten Widgets einige Vorteile:

Mit dem Widget werden die zur Ausführung benötigten Ressourcen wie Anwendungscode und Bilder auf dem Zielgerät mitinstalliert. Unnötiger Traffic für Applikationsressourcen wird somit gezielt vermieden.
Viele Widgets nutzen die dynamische Abfrage von Daten mittels AJAX um sich zu aktualisieren oder Inhalte von verschiedenen Diensten einzubinden. Dies wird vor allem durch eine lockere bzw. konfigurierbare Cross-Domain-Policy ermöglicht.

Weiterhin stellt die WRT einem Widget Zugriff auf Geräte-API bereit. Damit ist ein Widget, im Gegensatz zu mobilen Webseiten, in der Lage auf Funktionen wie Messaging, Multimediaanwendungen usw. des Geräts zuzugreifen und steht einer nativen Anwendung diesbezüglich in nichts nach.

Auf der nächsten Seite wird ein Überblick über aktuelle Widget Runtimes gegeben.

No related posts.

Mootools “Check it, don’t select it” – Checkboxen statt multiple Select

mediavrog — Tue, 20 Apr 2010 23:20:37 +0000

Bereits vor einigen Jahren habe ich das Statement von Nicholas Rougeux bezüglich der Nutzerfreundlichkeit von Mehrfachauswahlfeldern (select[multiple]) gelesen. Er stellt als Alternative dazu eine CheckedListBox vor. Diese habe ich zur freien Verwendung in eine Mootools-Klasse gepackt.

Select[multiple] ist nicht sehr benutzerfreundlich

Um den Artikel kurz aufzugreifen: Auswahlfelder mit Mehrfachauswahl sind nicht sehr benutzerfreundlich. Der Nutzer muss zum Selektieren mehrerer Werte die Strg-Taste gedrückt halten – lässt er einmal aus Versehen los (z.B. beim Scrollen durch die Liste) und markiert nun einen Wert, so ist nur noch dieser allein ausgewählt. Das Gleiche Problem zeigt sich beim Benutzen der Hoch und Runter-Tasten zum Navigieren der Optionen.

Eine Liste von Checkboxen als Alternative

Checkboxen sind hingegen einfacher in der Bedienung: Ein Klick aktiviert sie, ein weiterer deselektiert sie wieder. Der Nutzer kann sich so leichter auf seine primäre Aufgabe (das Selektieren von Optionen) konzentrieren, als darauf zu achten, bestimmte Tasten zu drücken.

CheckedListBox für Mootools

Zur Wiederverwendung und schnellen Verbesserung der Benutzerfreundlichkeit auch in bestehenden Systemen (wo z.B. die HTML-Templates nicht geändert werden sollen) habe ich eine Mootools-Klasse geschrieben, welche select[multiple]-Elemente in ungeordnete Listen von input[type=checkbox] überführt. Dabei übernimmt es die Dimensionen des select-Feldes, damit das Layout nicht springt.

In dieser Implementierung steht es frei, eine Mehrfachauswahl vollständig durch eine Liste von Checkboxen zu ersetzen oder die Mehrfachauswahl nur auszublenden. Letzteres kann vor allem sinnvoll sein, um bereits bestehende Javascripte, welche das select-Element in seiner Funktion erweitern (z.B. Filter) nicht anpassen zu müssen. Um das select zu komplett zu ersetzen, kann dem Konstruktor die Option replaceOriginal übergeben werden.

window.addEvent("domready", (function($){
   new CheckedListBox($("mySelect"));
   new CheckedListBox($("mySelect2"), {replaceOriginal: true} )
}).pass(document.id) );

Download

Es ist natürlich noch viel Raum für Verbesserungen. Vorschläge/Patches sind willkommen :):

Bis ich das Plugin für die Mootools Forge aufbereitet habe, kann folgender Download Link genutzt werden:

CheckedListBox.js (2,88 kB)

Das minimal benötigte CSS (vgl. auch die Demo weiter unten für ein vollständiges Beispiel):

.cidsi{
   border: 1px solid #ccc;
}

.cidsi li label:hover, .cidsi label.cidsi-checked{
   background-color: #EFFF79;
}

.cidsi li label{
   cursor: pointer;
   border-bottom: 1px dotted #ccc;
   text-indent: -35px;
   display: block;
   padding: 10px 10px 10px 35px;
}

.cidsi li label input{
   vertical-align: top;
   margin:0 10px;
}

* html .checklist label { height: 1%; }

Demo

Factory method – design patterns in Mootools 1

steve — Mon, 08 Mar 2010 12:18:03 +0000

Wer den Objektorientierungsansatz von Mootools oft nutzt wird das factory method pattern früher oder später nutzen wollen. Eine einfache Implementierung als Mixin könnte wie folgt aussehen:

var Factory = new Class({
   factor: function(classname, params) {
      return new window[classname](params);
   }
});

Jede Mootools-Klasse wird bei ihrer Definition einer Variablen zugewiesen, welche sich automatisch im global scope, dem window-object, befindet und über den Objektzugriff “[]” angesprochen werden kann.

Die Implementierung dieses Entwurfsmusters lässt sich nun in jeder weiteren Klasse einfach als Mixin nutzen.

var myClass = new Class({
   Implements: [Factory]
});

CSS Sprites – Webseiten Performance 1

mediavrog — Mon, 15 Feb 2010 23:33:06 +0000

CSS Sprites sind ein sehr gutes Mittel zur Verringerung der Ladezeiten von Webseiten. Dennoch scheuen viele Entwickler noch den Einsatz von CSS Sprites, da fehlende Erfahrung beim Erstellen viel Zeit kosten und den Performancegewinn zunichte machen kann. In diesem Artikel möchte ich gängige Verfahren und Ansätze darstellen, um übliche Fehler zu vermeiden. Ich möchte dem Leser damit die Fähigkeit vermitteln, die richtigen Entscheidungen zum Einsatz von CSS Sprites treffen zu können.

Was sind CSS Sprites?

Eine knappe Einführung noch vorweg, für alle die mit dem Begriff per se (noch) nichts anfangen können:
Sprites sind (Bild-)Dateien, in denen viele Bilder nebeneinander angeordnet sind. Bei der Darstellung eines Sprite wird aber immer nur ein Ausschnitt gezeigt, während die anderen Bilder verborgen bleiben (maskiert). Beim Verschieben der Grafik im Hintergrund wird ein weiterer Teil sichtbar. Animiert man die Position des Hintergrundbildes, kann so der Eindruck von Bewegung entstehen. Diese Technik entstammt der Computerspielindustrie, wo sie bereits seit Jahrzehnten eingesetzt wird. Genaueres zu Sprites im Allgemeinen findet sich in der Wikipedia.

Kirby Idle Animation by hextupleyoodot - Thanks

Die Einzelbilder der Kirby Idle Animation by hextupleyoodot

(thanks to hextupleyoodot)

CSS Sprites nutzen ebenfalls eine Bilddatei, in der mehrere Einzelbilder enthalten sind, aber meist nicht zum Zwecke der Animation. Vielmehr werden sie als Hintergrundbild vieler Elemente referenziert, wobei durch Angabe der Position das gewünschte Bild dargestellt wird.

CSS Sprites kommen vor allem für kleinere Grafiken und Hintergrundgrafiken zum Einsatz, welche auf einer Webseite zur Gestaltung eingesetzt werden. Diese Technik eignet sich für Designelemente und nicht für inhaltsbezogene Bilder wie Fotos.

Wie funktionieren CSS Sprites genau?

Das folgende Beispielbild enthält mehrere Zustände einer Auswahlbox. Anstatt per :hover, :focus etc. die Bilder auszutauschen, habe ich sie in ein Bild gepackt (>> CSS Sprite). Sie sollen nun als Hintergrundbilder eines HTML-Elements zum Einsatz kommen. Mittels CSS wird dabe das Sprite als background-image zugewiesen. Der Trick besteht nun darin, für jeden Status des Elements die passende background-position zu definieren. Damit wird das Sprite unter dem Element so positioniert, dass die gewünschte Teilgrafik sichtbar wird.

Beispiel für die Verwendung von CSS Sprites

Das passende CSS

.checkbox{
  background: url(checkboxes.png) no-repeat 0 0;
  height: 25px;
  width: 25px;
}

.checkbox.checked{
  background-position: 0 -40px;
}

.checkbox:focus{
  background-position: 0 -80px;
}

[...]

Demo (customformelements.net)

Auf der nächste Seite werden Vor- und Nachteile für den Einsatz von CSS Sprites dargestellt.

Wordpress 2.5 – Bilder größer als 500 Pixel Breite in Beiträge einfügen

String in Dom und Dom in String konvertieren

mediavrog — Wed, 21 Oct 2009 07:56:50 +0000

Das Konvertieren von Text in ein DOM und zurück ist z.B. bei der Widget-Entwicklung sehr nützlich. Meist steht nur ein Key/Value Store zur Verfügung, um Daten abzuspeichern. Um darin XML zu speichern und wieder auszulesen, können die Klassen DOMParser und XMLSerializer verwendet werden.

var xmlstring = '_Blink';

var dom = (new DOMParser()).parseFromString(xmlstring, "text/xml");

var stringAgain = (new XMLSerializer()).serializeToString(dom);

No related posts.

Typo3 nach Umzug auf neuen Server: “Anzeigen / Vorschauoption” springt auf alten Server

mediavrog — Thu, 10 Sep 2009 13:35:07 +0000

Heute musste ich mich um ein Typo3 Problem kümmern, bei dem eine Seite im Vorschau-Modus in Typo3 nicht angezeigt wurde, nachdem das Projekt auf einen neuen Server umgezogen war (The requested page does not exist!).

Nach kurzer Recherche stellte sich heraus, dass Typo3 immer wieder versucht hat, den Inhalt vom alten Server zu holen. Da es sich um eine neu angelegte Seite handelte, fand er diese nicht auf dem alten Server und lieferte obigen Fehler zurück.

Ein Hilferuf von 2006 in der Typo3 Mailingliste beschreibt das Problem ebenfalls sehr gut:
#Auszug#
> hab vor ein paar tagen eine fertiges typo3 system von meinen
> testserver exportiert und auf einen neuen server importiert.
> verlief soweit fast alles problemlos, probleme gibt es nur wenn ich
> versuche im rechten menu “anzeigen” oder bei der seitenerstellung die
> funktion “vorschau (lupe)” nutzen möchte das dann immer wieder meine
> alte serverurl aufgerufen wird.

Michael Hoffmann michael at steinefrenz.net
Fri Oct 13 13:18:08 CEST 2006
#Auszug Ende#

Lösung

In meinem Fall lag das Problem an der Domainkonfiguration im Typo3. Wie im Bild zu erkennen, stand die alte Domain an erster Stelle in der Konfiguration.

Falsche Domainkonfiguration

Nachdem sie mit den Schaltflächen (grün markiert) in der Liste nach unten verschoben wurde, funktionierte auch die Vorschau-Ansicht wieder problemlos und zeigt nun auf den aktuellen Server.

Richtige Domainkonfiguration

Typo3 tt_news – Mehrere Templates für SINGLE, LIST oder LATEST je nach Seite

mediavrog — Wed, 09 Sep 2009 15:42:40 +0000

Ein kleiner Tipp, um (beliebige) verschiedene Templates in tt_news in Abhängigkeit der Seiten-ID oder irgendeiner anderen Condition zu verwenden.

In der tt_news Dokumentation wird dies nur beiläufig erwähnt. In meinem konkreten Fall wollte ich mehrere Templates für die SINGLE-View verwenden, um in einem den kompletten Artikel darzustellen, und in einer Multibox auf einer anderen Seite dann nur die NEWS_IMAGEs anzuzeigen.

# Change single template for "Galerie" to fetch another template than standard single
[PIDinRootline = {$galleryPageId}]
plugin.tt_news {
  altMainMarkers.TEMPLATE_SINGLE = TEMPLATE_SINGLE_GALLERY
  altMainMarkers.TEMPLATE_SINGLE.wrap = ###|###
}
[global]

Im news-HTML-Template muss dazu ein neues Subpart namens TEMPLATE_SINGLE_GALLERY angelegt und befüllt werden. In meinem konkreten Beispiel schaut das dann so aus:

%MINIFYHTMLcf7c68529817041bb3521abd0361b3480%###NEWS_TITLE###



            ###NEWS_IMAGE_BOX###
            ###NEWS_IMAGE###

Auf der entsprechenden Seite mit der uid {$galleryPageId} muss in diesem Beispiel natürlich ebenfalls ein tt_news Plugin hinzugefügt werden und mit dem code “SINGLE” konfiguriert werden.

Firebug Issue with CSS Specifity calculation

mediavrog — Mon, 31 Aug 2009 12:51:56 +0000

Leider ist der Eintrag nur auf English verfügbar.

No related posts.

Extension Backend Konfiguration in Typo3 4.2.8 von Typ file

mediavrog — Wed, 19 Aug 2009 18:25:19 +0000

Ich bin gerade bei der Entwicklung einer neuen Extension auf ein seltsames Problem gestoßen, bei der in der Typo3 Extension Backend Konfiguration kein File Upload möglich ist:

In der ext_conf_template.txt (vgl. Hintergrundinformationen zum Konfigurieren von Extensions) habe ich folgende Konfiguration vorgenommen:

# cat=cfe.basic/file; type=file[js]; label= Use your own configuration
customConfig = EXT:cfeConfiguration.js

Nun sollte Typo3 im Backend ein Uploadfeld bereitstellen, welches nur Javascript-Dateien akzeptiert.

Der Output sieht aber ganz anders aus: ein Select-Feld mit der Dateiendung – nichts weiter.

Konfigurationstyp: file wird als select gerendert und nicht wie erwartet als upload Feld

Kennt jemand dieses Problem unter Typo3 4.2.8? Würde mich freuen zu hören! Derweil versuche ich dem Problem auf die Schliche zu kommen…

IE Bug: Accept-charset UTF-8 in Formularen, welche in ISO Seiten eingebettet sind

mediavrog — Tue, 23 Jun 2009 12:03:51 +0000

Der Internet Explorer verhält sich mal wieder ausnahmslos inkonsistent. Gibt man einem form-Element das Attribut accept-charset=”UTF-8″ und ist dieses Formular in einer ISO-kodierten (oder auch andere) Seite eingebettet, so verschickt der IE (alle Versionen) die Inhalte nur in UTF-8 wenn folgende Bedingung erfüllt ist:

Die Lösung für das UTF-8 charset Problem

Die Eingabe muss ein UTF-8 Zeichen enthalten, welches NICHT in der umgebenden Kodierung (bspw. ISO) abgebildet werden kann. Andernfalls behält der IE die umgebende Kodierung und ignoriert damit das accept-charset.

Abhilfe schafft das Einfügen eines hidden-Fields, welches ein UTF-8 Zeichen enthält. Beispielsweise:

Ausführliche Informationen finden sich unter: http://michi.knallgrau.at/blog/stories/3643754/

Meinen besten Dank an Michi von Knallgrau, you made my day!

Da kram ich mir doch meine IE Voodoo Doll wieder raus !!

Internet Explorer parsing #1 : Listen und nicht-listen-Elemente

Google Chrome Comic

mediavrog — Tue, 02 Sep 2008 14:04:17 +0000

Der Comic mit technischen Ausführungen zum neuen Browser von Google: Google Chrome. Er wurde von Scott McCloud gezeichnet und ist unter der Creative Commons license veröffentlicht.

Einige sehr interessante Einblicke in eine neue Browserarchitektur. Eine Zusammenfassung der Features habe ich ebenfalls veröffentlicht.

Google Chrome – Googles Antwort auf neue Anforderungen im Browsermarkt

mediavrog — Tue, 02 Sep 2008 13:28:51 +0000

Mit Google Chrome geht nun bald ein neuer Browser an den Start. Entwickelt von Google und an die neuen Herausforderungen im Netz angepasst, soll er als weiterer Konkurrent zum Internet Explorer fungieren.

Was für die Webentwickler und Datenschützer zunächst wie ein Albtraum erscheint, könnte sich dennoch als eine echte Alternative zu aktuellen Browsern herausstellen.

Der Browser soll noch im Verlauf des heutigen Tages als Testversion zum Download erhältlich sein.

Weitestgehend technische Erklärungen der Funktionen erhält man beim Lesen eines von Scott McCloud wunderschön gestalteten Comics (erhältlich bei blogoscoped.com oder hier im Blog).

Eine Übersicht der Inhalte / Funktionen:

Multi-Prozess orientiert:
Das Problem heutiger Browser sei, dass der Speicher über den Tag beim Öffnen vieler Seiten und dem Laden von Web-Applikationen langsam fragmentiert und somit für den Browser immer mehr speicher eingeräumt werden muss. Google will dies verhindern, indem jeder Tab seinen eigenen Prozess startet, der beim Schließen restlos entfernt und aufgeräumt werden kann (inkl. Speicher). Somit hängt auch nicht gleich der gesamte Browser fest, wenn es in einem Tab zu Problemen kommt > ein robuster Browser.
Überwachung des Speichers und der CPU-Auslastung von Tabs und Plugins:

Speicherfresser können dank integriertem “Task-Manager” erkannt und eliminiert werden, falls es zu Problemen kommt frei nach dem Motto: “Placing blame where blame belongs”
Rendering Engine:
Es wurde die Open Source Webkit Engine eingesetzt, welche auch im Safari und im Opera zum Tragen kommt und für Geschwindigkeit und Konformität steht.
Javascript Engine V8:
Von einem dänischen Team wurde eine komplett neue Javascript Virtual Machine namens V8 entwickelt, da bisherige Engines nicht für die Anforderungen (Speicherbedarf..) moderner Web-Applikationen ausgelegt sind. V8 wird unter Anderem den Javascript Code in Maschinencode wandeln, anstatt ihn zur Laufzeit zu interpretieren, was die Abarbeitung schneller macht. Außerdem soll eine präzise Garbage-Collection zum Einsatz kommen. Durch diese und andere Features soll Javascript nun endlich schnell und stabil laufen, was allen Youtubes, Mindmeistern und Online-Offices zu Gute kommt. Zu guter Letzt steht sie unter einer Open Source Lizenz und kann somit auch von Anderen Projekten eingesetzt werden.
Tabs:

Die Tabs beim Google Chrome Browser werden über der Adressleiste angezeigt (anstatt wie üblich unter dieser). Außerdem sind sie wie eigenständige Anwendungen zu betrachten (vgl. weiter oben) und lassen sich einzeln entkoppeln und mitsamt ihrem Status auf andere Monitore verschieben uws.
Suche über Fremseiten:
Ein interessantes Feature, welches in dem Comic auf Seite 20 erwähnt wird ist folgende Funktionalität der Adressleiste: Während der Suche auf einer Seite (z.B. Amazon) erkennt der Browser das Suchfeld und es kann künftig direkt über die Adressleiste gesucht werden, indem man den Namen der Seite angibt und Tab drückt. Nun noch das Suchwort eigetragen und mit enter bestätigt spart man sich das laden einer kompletten Seite und gelangt sofort zu den Ergebnissen. Fraglich ist, bei welchen Seiten diese Funktion unterstützt wird bzw. wie gut die Erkennung eines Suchfeldes funktioniert
Startseite:
Ähnlich wie beim Opera setzt man anstelle einer leeren Seite auf eine Art Übersichtsseite mit den neun zuletzt besuchten Seiten, den zuletzt durchgeführten Suchen und den letzten Bookmarks.
Incognito Surfen:
Google Chrome bietet eine Tab-Variante für aonymes Surfen an. Keine Daten werden von diesem Tab gespeichert und tauchen somit auch nicht in der History auf. Lesezeichen können nicht angelegt, sonder nur gelesen werden. Cookies werden nach Beenden entfernt. Eine ähnliche Funktion bietet momentan noch der Internet Explorer 8 mit dem InPrivate-Modus (oder auch Porn-Modus laut diversen Diskussionen :)
Web-Applikationen in eigenem schlanken Browser-Fenster:
Per Schortcut lassen sich Webapplikationen starten, in denen die übrigen Funktionen wie Adressleiste und Navigation ausgeblendet werden können um nicht von der Anwendung abzulenken.
Funktionen gegen Malware und Phishing:
Die Tabs arbeiten in einer Art Sandbox (die Entwickler nennen die Umgebung sogar Jail”) ohne die Rechte Dateien auf die Festplatte zu schreiben oder zu lesen. Dadurch sollen sich auch eventuelle Schadprogramme nicht aus diesen Grenzen bewegen und werden beim Schließen eines Tabs ebenfalls zerstört. Google gibt aber zu, dass vom Nutzer (evtl. unabsichtlich) installierte Plugins diesen Sicherheitsmechanismus umgehen können. Um Phishing vorzubeugen, lädt Google Chrome ständig aktualisierte Listen von Malware und Phishing Seiten herunter und warnt den nutzer beim Betreten der Seite.
Google Gears:
Die API für Google Gears ist gleich im Chrome Browser integriert.
Open Source:
Der gesamte Code wird unter einer Open Source Lizenz veröffentlicht (ähnlich Mozilla Firefox), so dass andere Entwickler Teile in Ihren eigenen Projekten nutzen können.

Fazit

Mit dem neuen Browser könnte Google nun schon nicht mehr nur das Internet, sondern auch die Anwendung “drumherum” beherrschen, was natürlich einige Ängste schürt. Trotzdem klingen die Features vielversprechend, insbesondere die V8 könnte die Performance von heutigen Webanwendungen erheblich steigern und Entwickler und Endnutzer könnten davon‚ profitieren. Nebenbei wird – sollten die Versprechen gehalten‚ werden – der relativ festgefahrene Browsermarkt mal wieder in Bewegung kommen und Browserhersteller gezwungen sein neue Wege einzuschlagen (ich denke da insbesondere an den Internet Explorer).

Ich bin gespannt, ob alle Erwartungen und Versprechen gehalten werden können und freue mich darauf, den neuen Browser mal auf einer Testfahrt zu erproben.

Hier noch einmal der Link zu den Comics, falls‚ er oben überlesen wurde :)

[Bild: Copyright by Google]

Kropki – ein Sudoku-ähnliches Puzzle mit Punkten

mediavrog — Mon, 11 Aug 2008 11:49:39 +0000

Ich habe vor Kurzem in der PM Kreativ einen mir bis dato unbekannten Rätseltyp entdeckt:

Kropki

Die Regeln sind sehr einfach gehalten. Ein n x n großes Feld soll so mit Zahlen ausgefüllt werden, dass jede Zahl von 1 bis n in jeder Spalte und jeder Zeile nur einmal vorkommt.

Soweit ähnelt es dem sudoku sehr, nun sind aber meistens keine Zahlen vorgegeben. Stattdessen finden sich zwischen einzelnen Feldern zwei Typen von Punkten (meist durch unterschiedliche Farben gekennzeichnet), welche den Witz in diese Rätselart bringen.

Kropki bedeutet übrigens auf Polnisch “Punkte”.

Weitere Regeln:

Befindet sich ein schwarzer Kreis zwischen 2 Feldern, so muss in einem der beiden Felder das Doppelte des anderen Feldes stehen.
Befindet sich ein weißer Kreis zwischen 2 Feldern, so unterscheiden sich die Zahlen dieser beiden Felder genau um den Wert 1.
befindet sich zwischen 2 Feldern kein Kreis, so darf keine der oben genannten Eigenschaften auf die beiden Zahlenwerte der Felder zutreffen

Mir hat das erste Kropki sehr viel Spaß gemacht, zumal es sehr logisch aufgebaut ist und es sich gegen Ende zu rasch entwickelt. So bietet diese Rätselart einen kurzweiligen Gehirntwist, der nicht gleich 4 Stunden frisst.

Ein Beispiel

Ein paar Beispiele finden sich auf Matroids Matheplanet im Beitrag **Kropki.

Anmerkung

Es gibt offensichtlich mehrere Typen von Kropki. Eines ähnelt sehr dem Sudoku (oben beschrieben), ein anderes eher dem japanischen Go (http://www.nongnu.org/kropki/)

No related posts.

Belege in Computeranimation und Digitalem Compositing

mediavrog — Sun, 10 Aug 2008 16:46:54 +0000

Hier die Ergebnisse einiger Wochen konzentrierter Arbeit in den benannten Fächern.
Dies waren die letzten Noten, welche ich noch vor Beginn meiner Diplomarbeit benötigte :)

Climber

Computeranimation

Aufgabe: Erstellen einer Charakteranimation basierend auf einer Gliederpuppe unter Nutzung inverser Kinematik.
Interpretation: Sie handelt von einem Bergsteiger, welcher sich seinen Weg auf den Gipfel bahnt. Nach kleineren Hindernissen oben angekommen, verliert er schuldhaft sein Leben.

Click here to view the embedded video.

A tick of life

Digitales Compositing

Aufgabe: Unter Verwendung der in der Vorlesung vorgestellten Techniken soll ein kurzer Videoclip (ca. 20 Sekunden) erstellt werden. Das Thema ist frei wählbar
Interpretation (in Zusammenarbeit mit Mario G.):: Der Film handelt von der Vergänglichkeit von Schönheit und der Flüchtigkeit des Augenblicks, was sich in der Erscheinung eines Origami-Kranichs manifestiert, welcher durch einen Vogelschiss zum Leben erweckt wird.

Click here to view the embedded video.

Wer konkrete Fragen zur Umsetzung hat, kann mich gern anschreiben.

mootools 1.2 cheat sheet updated

mediavrog — Sun, 10 Aug 2008 16:26:33 +0000

I’ve updated the cheat sheet and increased contrast for b/w printers.
See the original post

Ich habe heute das mootools 1.2 cheat sheet in etws abgeänderter Form (erhöhter Kontrast – besonders für Schwarz-Weiß-Drucker geeignet) erneut hochgeladen

Download im Beitrag zum mootools cheat sheet