Verzeichnis
Dr. Web MagazinDas deutschsprachige Magazin für Seitenbetreiber
Responsive Menu: jQuery-Plugin minimiert Navigationsmenüs für mobile ClientsThu, 24 May 2012 07:21:01 +0000
Responsive Design ist in aller Munde. Design, das sich an unterschiedliche Auflösungen anpassen kann, macht eine eigenständige mobile Website in vielen Fällen überflüssig. Einige Problembereiche des reponsiven Designs sind allerdings bislang ungeklärt, respektive bedürfen besonderer Behandlung. Neben der noch fehlenden Möglichkeit, Bilder in unterschiedlichen Auflösungen bereitzustellen, können auch Navigationen zu Problemen führen, da sie oft sehr viel Platz einnehmen. Das jQuery-Plugin „Responsive Menu" sorgt für Abhilfe. Auf einer Desktop-Website lässt sich in der Regel genug Raum für die Benutzerführung einer Website finden. Oft werden auch mehrere Menüs bereitgestellt, um die einzelnen Bereiche einer Website besser strukturieren zu können. In der Mobilansicht stellt sich dann oft die Frage: Wohin mit der Navigation? Bei einer linear aufgebauten Mobil-Website rutscht die Navigation meist ans untere Ende der Seite. Bei vielen Navigationspunkten kann es dann schon mal passieren, dass die Navigation nicht komplett ins Display passt. Das jQuery-Plugin „Responsive Menu" wandelt eine Listennavigation für die Mobilansicht in eine Dropdown-Auswahlbox um. Dabei ist die Verwendung recht einfach und schnell erledigt. „Responsive Menu" einbinden Zunächst müssen jQuery und das Plugin im Kopf der Website eingebunden werden: 1 2 Anschließend wird per jQuery das Plugin aufgerufen – ebenfalls im Kopf des HTML-Dokumentes. Hier [...]
Bei der Entwicklung von Webseiten ist der Browser ein wichtiges Hilfsmittel geworden. Früher waren Browser ausschließlich reine Seitenbetrachter, was sich über die Jahre stark geändert hat. Heutzutage gibt es für fast jeden Vertreter seiner Gattung tausende mehr oder weniger nützliche Erweiterungen, die nicht nur dem Developer das Leben leichter machen wollen. In dieser Masse verliert man schnell die Übersicht. Vor allem, wenn man mit mehr als einem Weltnetz-Blätterer arbeitet. Deswegen haben wir die Sammlungen der drei beliebtesten Browser durchforstet und für jeden ein paar Highlights heraus gesucht. Firebug (Firefox), Developer Tools (Chrome), Dragonfly (Opera) Firebug ist das Urgestein der Entwickler-Tools und wurde zum Vorbild für andere Browserhersteller, die ähnliche Tools fest in den Browser integrierten. Im Chrome heißen sie schlicht Developer Tools. Diese machen ihrem Namen alle Ehre und bieten – wie Firebug – ein gutes Set an Werkzeugen. Bei Opera heißt das ähnlich funktionsreiche Pendant Dragonfly. Web Developer (Firefox, Chrome), Developer Briefcase (Opera) Hier erhalten Sie eine Erweiterung, die nahezu alles bietet, was man bei der Erstellung brauchen kann. Eine einfache Farbpipette, ein Bildschirmlineal und weitere Tools sind vorhanden. Die Opera-Version des Web Developers bietet zwar etwas weniger Werkzeuge, aber immer noch genug Funktionen, den Alltag zu erleichtern. [...]
Das Einsatzgebiet von QR-Codes weitet sich immer mehr aus. So lassen sich Kontaktdaten und Termine speichern und direkt ins Adressbuch beziehungsweise in den Kalender übertragen. Mit dem BezahlCode kann der QR-Code nun auch als digitaler Überweisungsvordruck verwendet werden. Überweisungsvordruck, wie man ihn mit dem BezahlCode nicht mehr braucht Wer Rechnungen online überweisen oder Geld spenden will, muss die entsprechenden Kontodaten und Beträge manuell in die eigene Homebanking-Oberfläche eingeben. Mit dem BezahlCode werden alle nötigen Informationen für eine Überweisung als QR-Code bereitgestellt. Der BezahlCode kann auf Rechnungen, Zahlungsaufforderungen oder Spendenaufrufen eingebunden werden. Was ist der BezahlCode? Der BezahlCode ist ein QR-Code, der alle Informationen für eine Überweisung beinhaltet – also Kontonummer, Bankleitzahl, Empfängername, Verwendungszweck und Betrag. Die Daten werden in einem speziellen Format hinterlegt, sodass diese von entsprechenden Anwendungen ausgelesen werden können: bank://singlepayment?name=MAX+MUSTERMANN&account=12345&BNC=12345678&amount=5%2C99&reason=FIKTIV+SAGT+DANKE Ist eine Anwendung auf dem Smartphone oder Tablet installiert, die das Format unterstützt, wird beim Aufruf des QR-Codes eine Überweisung mit den im BezahlCode hinterlegten Kontoinformationen vorbereitet, die nur noch ausgeführt werden muss. Wer unterstützt den BezahlCode? Erste Anwendungen, die das Bezahlen mit dem BezahlCode unterstützen, sind die Banking-App iOutBank für iPhone und iPad sowie die Apps iFinance Mobile und MoneyMoney. Die Entwickler der App iOutBank haben auch [...]
WYSIHTML5 ist ein frischer Rich Text-Editor in der Tradition alter Bekannter wie TinyMCE. Er wird in eine Textarea implementiert und bietet Bearbeitungsfunktionen isoliert für die Inhalte dieses Elements. Das Prinzip ist nicht neu und seit Jahren gängig in den Blogs und CMS dieser Welt. Neu an WYSIHTML5 ist zweierlei. Zum einen schreibt es semantisches, valides HTML5, zum anderen lässt sich der zugrundeliegende Parser manuell anpassen. WYSIHTML5: Javascript-Lösung für valide Auszeichnungen Die als Open Source über GitHub verfügbare Javascript-Lösung WYSIHTML5 wirkt auf den ersten Blick wie der zwanzigste Klon bereits vorhandener Wettbewerber. Es handelt sich aber mitnichten um alten Wein in neuen Schläuchen, vielmehr bringt WYSIHTML5 tatsächlich sinnvolle Änderungen in eingefahrene Strukturen. Mit immerhin rund 150k ist der Editor weniger als halb so groß wie der TinyMCE. Zudem benötigt WYSIHTML5 kein jQuery oder sonstige Frameworks, sondern läuft als eigenständige Anwendung ohne jegliche Dependenzen. Jedes iframe wird innerhalb einer Sandbox ausgeführt, weshalb die Entwickler den Editor als besonders Cross-Scripting-resistent annoncieren. Praktisch: URLs werden während des Eintippens automatisch verlinkt. Unter Chrome kann die Spracheingabe genutzt werden. Kollege Potschien schrieb kürzlich hier darüber. Wichtig für das konsistente semantische Markup der gesamten Site ist, dass WYSIHTML5 nicht mit Inline-Styles, sondern mit Klassen-Namen arbeitet. WYSIHTML5: Anpassbarer [...]
Photoshop: Interessantere Fotos mit Farbmanipulation und BelichtungsfehlernTue, 22 May 2012 08:42:43 +0000
Photoshop stellt uns alle Optionen bereit, um Fotomaterial in der Qualität zu steigern. Doch auch der entgegengesetzte Weg steht uns offen, Bilder mit exakt eingearbeiteten Bildfehlern können ebenso mit Photoshop konstruiert werden. Dazu gehören etwa Farbverschiebungen und kolorierte Aufnahmen. Die Ergebnisse haben einen ganz eigenen Charme und gehören sicherlich nicht zuletzt deswegen zu den beliebtesten Filtern, die die neuen sozialen Bildernetzwerke, wie Instagram und andere zu bieten haben. Cross Processing-Effekt Ein junger Klassiker ist der Cross Processing-Effekt. Dazu geht man auf Ebene > Neue Einstellungsebene > Gradationskurven, bestätigt mit OK und wählt bei RGB den Rot-Kanal an. Ziel ist es, in den einzelnen Farbkanälen unterschiedliche Kurven zu formen. Die Kurven werden sich dabei überkreuzen, was auch den Namen des Effektes erklärt. Im Rot-Kanal wird ein Punkt in die Mitte gesetzt und ein zweiter unten links. Auch der Grün-Kanal wird so behandelt und eine leichte S-Kurve eingestellt. Im Blau-Kanal wird eine Kurve erzeugt, die genau entgegengesetzt verläuft (also wie ein umgedrehtes S). So entsteht ein Bild, bei dem die Schatten bläulicher und die helleren Bereiche gelblicher sind. Bei diesem Effekt ist es hilfreich, eine Einstellungsebene > Helligkeit/Kontrast einzufügen, um den Kontrast etwas heraus zu nehmen und die Helligkeit leicht zu verstärken. [...]
Kommen wir nun also zum zweiten Teil unserer Django-Reihe. Sie erinnern sich. Wir wollen eine Anwendung zur Verwaltung von Ferienimmobilien entwickeln. Im ersten Teil hatten wir uns mit Django-Grundlagen beschäftigt. Heute soll es richtig los gehen. Voraussetzung hierfür ist, dass man ein lauffähiges Debian oder besser Ubuntu, zum Beispiel in einer virtuellen Maschine, aufgesetzt hat und dass man weiß, wie man die Shell bzw. das Terminal in Linux bedient. In der VM soll anschließend Django in seiner eigenen Umgebung laufen und die erste Anwendung starten. Als erstes Tool installieren wir "virtualenv". Wie der Name schon verrät, handelt es sich hierbei um eine virtuelle Umgebung (virtual environment). Für unser Projekt wollen wir eine Art "Container" schaffen, in dem wir Pakete für Python installieren können, ohne in Konflikt mit anderen Python- bzw. Django-Anwendungen zu kommen. Es ist nicht selten, dass man mehrere Django-Anwendungen auf einem Server laufen hat. Eine vielleicht in der Version 1.2, die andere schon in 1.4, welche die aktuelle Version ist. Da Python auf einfachem Wege aber immer nur eine Version eines Moduls oder einer Bibliothek zur Verfügung stellen kann, benötigen wir hier virtualenv. Installieren und Einrichten einer virtuellen Umgebung für Django Zum Installieren von "virtualenv" benötigen wir ein [...]
Social jQuery: Einheitliche Social-Buttons statt unterschiedlicher Code-SnippetsMon, 21 May 2012 11:09:45 +0000
Wer Seiten oder Profile bei sozialen Netzwerken wie Facebook, Twitter und Google+ pflegt, bindet Links zu eben diesen Netzwerken gerne auf der eigenen Website ein. Statt sich mit den entsprechenden Quelltext-Snippets auseinanderzusetzen oder Buttons selbst zu basteln, können Social-Buttons auch einfach über Koottam Social jQuery eingebunden werden. Beispiele für Social-Buttons mit dem Plugin Mit dem Koottam-Social-jQuery-Plugin sind Buttons zu allen bekannten sozialen Netzwerken sowie RSS-Feeds schnell und einfach in die eigene Website eingebunden und angepasst. Neben dem Link zur jeweiligen Präsenz beim sozialen Netzwerk wird die Anzahl der Fans beziehungsweise Follower angezeigt. Außerdem garantiert das Social-jQuery-Plugin ein einheitliches Aussehen aller dargestellten Buttons. Social jQuery einbinden Wie der Name schon vermuten lässt, ist jQuery Voraussetzung, um das Plugin nutzen zu können. Damit die Social-Buttons auch ihr richtiges Aussehen erhalten, muss die mitgelieferte Stylesheet-Datei ebenfalls mit eingebunden werden: Anschließend können die sozialen Netzwerke über einfache A-Elemente ausgezeichnet werden: Facebook Per JavaScript wird das A-Element aufgrund der vergebenen Klasse nun durch den per jQuery-Plugin bereitgestellten Social-Button ersetzt: 1 2 3 4 5 6 7 8 9 10 11 12