Web 3.0 – Weg vom Browser

Leave a reply

Web 1.0 brachte Information zum Benutzer, im nächsten Schritt brachte der Benutzer Information in das Web 2.0 ein. Nun ist es soweit und das Web 3.1* ist aus dem Browser herausgewachsen und überall verfügbar.

Irgendwann stellt sich immer die Frage: Was kommt als nächstes? Was ist also der Nachfolger des Web 2.0? In Internet-Jahren gesprochen, existiert Web 2.0 schon seit 100 Jahren. Von Web 1.0 (1991) zu Web 2.0 (2003) dauerte es ~10 Jahre und nun haben wir schon 2014, es sind also weitere 11 Jahre vergangen. Wo bleibt der Nachfolger, zumal sich doch alles immer schneller, beinnahe täglich, ändert? Continue reading →

Tutorial: Ghost Blog Installation

Leave a reply

Ghost-Logo

Die Blogging-Plattform Ghost kann mal eine sehr gute Alternative für Blogger zu WordPress werden. WordPress ist mittlerweile viel mehr als nur für das Bloggen gedacht, dass kann aber auch Nachteile haben. Kompromisse müssen eingegangen werden, es schwirren für viele Nutzer unnötige Funktionen rum, das System wird langsamer und vielleicht noch der ein oder andere Punkt mehr.

Ghost will wirklich nur für das Bloggen gedacht sein, setzt auf node.js und hat sich über Kickstarter finanziert – ist aber kostenfrei erhältlich.

Continue reading →

Quick-Hints #14

Leave a reply

Willst du fließend JavaScript sprechen?

Wenn du das möchtest und gerade begonnen hast zu lernen, dann kann ich dir wärmstens http://speakingjs.com/es5/ ans Herz legen. In dieser HTML-Edition des Print-Books findet man eine sehr gute Einführung in JavaScript plus vielen weiteren Informationen, weit über die reine Syntax der Sprache hinaus. So werden unter anderem die wichtigsten Libraries vorgestellt, aber auch wie man die Code-Qualiät verbessern kann und wie die Geschichte von JavaScript ist.

Aber auch für Nicht-Anfänger ist es eine tolle Lektüre. Viele Sachen wird man überspringen können, einiges wird wieder in Erinnerung gerufen und alles kennt man nie.

Don’t use EmberJS

Ich bin eher ein Fan von Low-Scope und flexiblen Frameworks, also nicht unbedingt von EmberJS (auch wenn es ein tolles Framework ist!):

Von gezeichneten und lebenden Prototypen

In Quick-Hints #11 hatte ich bereits seinen tollen Artikel zu Transitional Interfaces vorgestellt. In einem weiteren tollen Artikel von Pasquale D’Silva auf Medium stellt er ein paar nette Tools für die Darstellung / Prototypisierung von Interaktionsdesign vor. Besonders Framer hat es mir angetan und ich werden es demnächst einsetzen, wenn ich eine Idee kurz ausprobieren oder vorstellen möchte. Mit Framer können Prototypen von Animationen und Interaktionen mit JavaScript erstellt werden.

Für die statische Darstellung (oder vielleicht auch dynamisch in Verbindung mit Framer) gibt es auf http://awesomekit.me ein tolles Grafikpaket zum kostenlosen Download. Hiermit gelingen jedem schöne iOS7 Wireframes.

Ein weiterer CSS Preprocessor?

Nein, GridStyleSheets ist mehr. Basierend auf dem gleichen Algorithmus, den Apple für sein natives Layout benutzt, will GSS das CSS der Zukunft sein.

Quick-Hints #13

Leave a reply

Animiertes SVG mit Clipping Masks

Mit dem nötigen Talent oder dank einer engen Zusammenarbeit mit Grafiker, können dank Clipping Mask sehr einfach sehr coole Animationen mit SVG entstehen. So wird in folgender Demo ein iPhone 5C nach und nach aufgebaut, alles im puren SVG: http://www.pencilscoop.com/demos/animating-svg-clipping-masks/; dort findet ihr auch das entsprechende Tutorial.

Canvas für mehr Performance?

Continue reading →

Quick-Hints #12

Leave a reply

Repository for Web Components

Für die Web Components (W3C Working Draft) gibt es mit customelements.io eine Sammlung von vielen netten Custom HTML-Elementen. Das ganze ist ähnlich einem NPM (Node) oder Nexus (Java) aufgebaut. Die Web Components bieten (dank Polyfill auch heute schon), die Möglichkeit – wie es der ein oder andere von euch (in ähnlicher Form) schon aus AngularJS kennt -, das Spektrum an HTML-Elementen zu erweitern. So findet sich auf der Website zum Beispiel ein Calendar-Element, welches durch einfache Benutzung des Tags

<x-calendar view="2013-06-09"></x-calendar>

einen Kalendender in eure Website zaubert. Natürlich ganz normal mit CSS stylebar. Viele weitere Elemente und Informationen könnt ihr auch unter x-tags.org finden.

#perfmatters

Performance im Front-end ist immer wieder ein Thema auf meinem Blog. Vor allem beim Scrollen von Webseiten gilt immer wieder die Herausforderung, die 60 FPS zu halten. Mittlerweile gibt es sehr viele Kniffe und Hinweise, wie einem das gelingen kann. Ein guter Artikel zu diesem Thema ist hier zu finden: Continue reading →

(HTML5 Canvas-)Bilder hochauflösend (Retina) darstellen

Leave a reply

Vor guten zehn Monaten ist der letzte Artikel in der Kategorie “Leicht und klar erklärt” erschienen und so gab mir heute (mal wieder) ein Thema in der Firma eine perfekte Vorlage für einen Artikel.

Wie stelle ich HTML5 Canvas Grafiken auf einem iPad mit Retina-Display scharf dar? Folgende Erklärung gilt aber nicht nur für das Canvas-Element, auf Bilder/Fotos trifft dies ebenso zu. Fast alle Tablets haben mittlerweile hochauflösende Displays (High DPI – HiDPI) und so wird es immer wichtiger, dass du das folgende beachtest – zumindest wenn du deinen Besuchern Qualität bieten möchtest. Die vernünftige Darstellung von Bildern auf allen Geräten kann man als Teildisziplin von Responsive Webdesign bezeichnen. Auf zur Theorie:
Continue reading →

Quick-Hints #11

1 Reply

CSS3 3D Transformationen

http://rupl.github.io/unfold/ - Unfolding the Box Model: Exploring CSS 3D Transformation

Eine sehr sehr schöne Präsentation zu 3D-Transformationen mit CSS. Der Einstieg wird hier anschaulich und dadurch leicht gemacht.

CSS Variables sind im Firefox angekommen

Seit der Version 29 von Firefox ist es möglich, Variablen in CSS zu verwenden. Du kennst wahrscheinlich LESS, SCSS und Co. und hast vielleicht auch schon die Möglichkeit, Farben global zu deklarieren, zu schätzen gelernt. Nun braucht man nicht mehr Zwangsweise einen CSS-Preprocessor um Variablen für z.B. Farben und Margins anzugeben; siehe auch: http://mcc.id.au/blog/2013/12/variables

CSS Variables in Firefox 29

CSS Variables in Firefox 29

Continue reading →

Mac OS X: Laufende Programme / Prozesse finden und beenden.

Leave a reply

Die einfachste Möglichkeit herauszufinden, welche Programme / Prozesse gerade laufen, ist sicher über den Activity Monitor (Aktivitätsanzeige).  Hierfür oben rechts auf die Lupe klicken oder schneller mit Apfeltaste + Space. In das Suchfeld dann “Aktivitätsanzeige” oder “Activity Monitor” eingeben und Enter drücken. Ihr solltet dann soetwas sehen:

Activity Monitor Mac OS X

Activity Monitor Mac OS X

Continue reading →

Quick-Hints #10

Leave a reply

Yay Jubiläum

#perfmatters

#perfmatters ist ein beliebtes Thema derzeit auf meinem Blog. Hier hinzufügen möchte ich noch ein paar Slides von Addy Osmani mit Case-Studies und weiterem Hintergrundwissen zur Erhöhung der Rendering-Performance im Browser. Es kommt aber nicht nur auf die Geschwindigkeit beim Rendering an, auch der Weg vom Server zum Browser muss bedacht werden. Google Mitarbeiter Ilya Grigorik hat einiges tief gehendes Wissen zu “High Performance Browser Networking” in einer Präsentation verpackt und kann dir so auch in diesem Gebiet zu besserer Performance deiner WebApp verhelfen. Vor allen bei mobilen Webseiten ist die Latency ein großes Problem. Ein CDN kann hier zumindest ein wenig Milderung verschaffen.

Wenn du zukünftig die Veränderungen deiner Performanceoptimierung tracken willst, kannst du dies mit Google Analytics machen. Am besten fügst du hierfür vor:

Continue reading →

Domain belegt, was nun?

Leave a reply

Es ist mittlerweile ziemlich schwer eine freie generische Top Level Domain (TLD) zu bekommen. Die besten Namen mit .com, .net und ähnlichen sind schon lange belegt und auf Phantasienamen kann man nicht immer setzen. Manchmal hat man Glück und es ist zumindest die .de-Domain zum gewünschten Namen frei. Dabei ist aber der Nachteil, dass man aus SEO-Sicht keinen englischen Content auf auf einer deutschen Domain veröffentlichen sollte. Die Lösung sind von Google als generisch behandelte ccTLDs (country code TLD), also Domains, die eigentlich zu einem Land gehören, von Google aber nicht zwangsweise so behandelt werden.

Screenshot: Google Webmaster-Tools - Geotarget Setting

Screenshot: Google Webmaster-Tools – Geotarget Setting

Bei generischen Domains (.com, .org, etc.) kannst du Google (per Webmaster-Tools) mitteilen, welche Region (Land, Sprache) du adressieren möchtest. Bei länderspezifischen Domains (.de, .at, etc.) geht das nicht, außer eben bei folgenden Ausnahmen:
Continue reading →