ITrig - Web

Webflow CSS3 Playground - Webseiten im Browser designen

nospam@example.com (Guenny) — Mon, 25 Mar 2013 15:25:00 +0100

Mit webflow steht zurzeit eine Plattform in den Startlöchern, die Webdesign für verschiedene Plattformen deutlich vereinfachen soll. Der CSS3 Playground von Vlad und Sergie Magdalin zeigt bereits erste Eindrücke, wie so etwas in Zukunft aussehen könnte.

Interessanterweise lassen sich mit dem Webeditor CSS3 oder HTML Elemente direkt im Browser bearbeiten, so gleicht das Browserfenster einer Art Photoshop mit WYSIWYG Editor. Beinhaltet aber auch weitere Werkzeuge, um schnell und einfach zum gewünschten responsive Design zu gelangen. Auf der linken Seite lässt sich zwischen den verschiedenen Formaten hin und her schalten.

Welche Features sich bereits direkt über den Browser bearbeiten lassen (am besten über Chrome) haben die Jungs auf einer extra Seite ausführlich aufgelistet. Das Projekt ist noch nicht offiziell gelauncht, es bleibt also abzuwarten, ob der Browser-Editor auch in der finalen Version umsonst bleibt.

Piwik Release v1.11 - Echtzeitbesucher, Weltkarte und Tracking Code Generator

nospam@example.com (Guenny) — Mon, 11 Mar 2013 12:47:00 +0100

Piwik wurde in einer neuen Version 1.11 veröffentlicht. Nachdem in der letzten Version mit dem Page Overlay Feature bereits eine praktische Funktion integriert wurde, sind in v.1.11 wieder interessante Features an Bord.

Besucherkarte nach Stadt, Land, Region und Echtzeit-Besucherkarte

Die neue, per Crowdfunding finanzierte, Besucher-Weltkarte, ist von Flash befreit und erlaubt es weltweit die Herkunft der Seitenbesucher anzuzeigen. Wobei in Länder, Regionen und Städte unterteilt werden kann. Neben der örtlichen Auswahl lassen sich auch verschiedene Kriterien wie Besuche, eindeutige Besucher, Aktionen, Aktionen pro Besuch, Durchschnittszeit auf der Webseite und Absprungrate anzeigen.

Für längere Statistiken ungeeignet, aber visuell sehr wertvoll ist die neue Live-Besucherkarte. Sie zeigt weltweit die aktuellen Seitenbesucher an. Wobei die "gelben Blasen" alle 10 Sekunden aktualisiert werden. Je größer sie sind desto aktueller ist der Besuch, danach werden sie nach und nach kleiner und transparenter, bis der Besucher von der Karte wieder verschwindet. Per Mouseover lassen sich weitere Werte wie Land, Ort, aufgerufene Webseite, Herkunft und Besuchszeit einblenden.

Neues Administrator-Menü

Die Navigation der Einstellungen ist auf die linke Seite gewandert und erscheint in einem neuem Design. Auch hier wird sich das "Adim-Auge" freuen.

Tracking Code Generator

Im neuen Menü befindet sich unter "Tracking Code" ein neuer Code Generator, dieser erlaubt es diverse Einstellungen am Code automatisch zu erstellen. So kann festgelegt werden, ob eine Bild oder JavaScript benutzt werden soll. Trifft letzteres zu, lassen sich verschiedene Werte festlegen:

Benutzer über alle Subdomains tracken
Domain der Seite beim Tracken dem Seitentitel voranstellen
Klicks auf Alias-URLs verstecken
Benutzerdefinierte Variable für diesen Besucher aufzeichnen
Eine benutzerdefinierte Variable für jeden Seitenaufruf aufzeichnen
Clientseitige DoNotTrack Erkennung aktivieren
Eigene Anfrage-Parameter für Kampagnen Name & Stichwort verwenden

Neue Reports, verbesserte SMS-Benachrichtigungen und Berichte

Die einzelnen Reports wurden weiter verfeinert, so kann nun beispielsweise die Browsersprache angezeigt werden. Bei den Berichten lässt sich nun die genau Stunde des Versands definieren. Die SMS Benachrichtigung soll noch einmal komplett überarbeitet werden, hierzu gibt es ein Crowdfunding Projekt.

Alle Neuerungen sind im Detail hier zu finden.

HTML & CSS für Anfänger und Fortgeschrittene als Online Handbuch

nospam@example.com (Guenny) — Tue, 05 Mar 2013 13:28:00 +0100

HTML & CSS für Fortgeschrittene

An Advanced Guide to HTML & CSS ist ein Onlineserie für diejenigen, die ihre HTML & CSS Kenntnisse optimieren und verfeinern möchten. Auf 10 Kapiteln wird dem interessierten Programmierer ein tieferer Einblick in die Entwicklung von optimalem Code gegeben. Neben Performance und Positionierung werden Selektoren, Preprozessoren, Transformationen und Animationen behandelt. JQuery darf natürlich auch nicht fehlen, genauso wenig wie Polyfills.
Jeder Abschnitt gibt mit Erklärungen und Beispielen das neue Wissen optimal wieder. Die Webseite ist zwar in Englisch gehalten, sollte aber keinen abschrecken, denn es ist wirklich selbsterklärend.

Lesson 1 Performance & Organization
Lesson 2 Detailed Positioning
Lesson 3 Complex Selectors
Lesson 4 Responsive Web Design
Lesson 5 Preprocessors
Lesson 6 jQuery
Lesson 7 Transforms
Lesson 8 Transitions & Animations
Lesson 9 Feature Support & Polyfills
Lesson 10 Extending Semantics & Accessibility

HTML & CSS für Anfänger

Manch einem mag dieser Einstieg ins Webdesign zu schnell gehen oder es wird ein einfaches Nachschlagewerk benötigt. Auch dafür hat Shay Howe, der Entwickler des HTML und CSS Leitfadens, die richtige Lösung. Wie könnte es anders sein gibt es auch einen Leitfaden für Anfaänger, den "Beginner’s Guide to HTML &CSS". Dieser führt in der selben übersichtlichen Art, wie das Handbuch für Fortgeschrittene, an die Websprache heran. Behandelt werden ebenfalls 10 Kapitel wie:

Lesson 1 Terminology, Syntax, & Introduction
Lesson 2 Elements & Semantics
Lesson 3 Box Model & Positioning
Lesson 4 Typography
Lesson 5 Backgrounds & Gradients
Lesson 6 Unordered, Ordered, & Definition Lists
Lesson 7 Images, Audio, & Video
Lesson 8 Building Forms
Lesson 9 Organizing Data with Tables
Lesson 10 Coding Practices & Additional Resources

Beide Anleitung sind eine Empfehlung wert, sollte Interesse an HTML und CSS bestehen.

Bomberman Online - Multiplayer Browsergame in HTML5

nospam@example.com (Guenny) — Wed, 27 Feb 2013 17:40:00 +0100

Es soll ja Leute geben, die heute Abend kein Fußball schauen. Für diejenigen ist Bombermine, eine Bomberman Adaption, eventuell genau die richtige Alternative. Dank JavaScript und HTML5 kann der Spieleklassiker umsonst im Browser gespielt werden (Chrome hatte im Test Ladeprobleme, Firefox funktionierte ohne Probleme). Das mach auch richtig Spaß, denn es handelt sich um eine Multiplayer Version, das heißt ihr gegen den Rest der Welt.

Sollte der Spaßfaktor nachlassen, kann ebenfalls auf die guten alten Lemminge zurückgegriffen werden, leider nicht als Multiplayer, dafür aber im Browser.

Bombermine online spielen

Schnell und einfach jQuery lernen - Das jQuery Learning Center bietet einen ersten Einstieg für Anfänger

nospam@example.com (Guenny) — Fri, 22 Feb 2013 15:50:00 +0100

Bereits in der letzten Woche ist das jQuery Learning Center im Zuge des jQuery Webseitenrelaunches an den Start gegangen. Die neue Plattform ist von jQuery Fans für angehende jQuery Nutzer, d.h. die Community entwirft verschiedene Kapitel, um euch jQuery Schritt für Schritt näher zu bringen. Anders als zum Beispiel Codecademy werden keine Aufgaben gestellt, sondern lediglich Beispiele zu Bereichen wie Events, Plugins oder Performance genannt. Zurzeit werden folgende Kapitel gelistet:

Für den Anfang bzw. einen Einstieg in jQuery ist das schon ein reichliches Angebot. Da der gesamte Inhalt Open Source ist, ist Kritik sowieso nicht wirklich angebracht. Die neue Oberfläche ist zwar noch im Betastadium, bietet für den Anfänger bzw. Einsteiger jedoch genau die richtigen Schritte für einen leichten Einstieg in die Materie.

Wem der Umfang noch nicht ausreicht oder die Beispiele nicht genügen, dem sei "jQuery Fundamentals", ein umfassendes Online-Handbuch von Rebecca Murphy, ans Herz gelegt. Das E-book steht unter Creative Commons und kann somit ebenfalls frei genutzt werden.

Harlem Shake For Website - Die eigene Homepage zum Tanzen bringen

nospam@example.com (Guenny) — Tue, 19 Feb 2013 16:56:00 +0100

Gangnam Style war gestern, heute tanzt man Harlem Shake und das weltweit. Eine YouTube Suche spuckt bereits über 85000 Ergebnisse der neuen Bewegungsart aus. Egal ob norwegische Armee oder das Original, welches bereits über 132 Millionen Klicks aufweisen kann, der Tanz ist rund um den Globus zum Meme geworden. In Deutschland wäre es Dank unserer Freunde von der GEMA wahrscheinlich anders gekommen, weiß Martin Weigert zu berichten.

Doch kommen wir nun zu etwas völlig anderem. Wer hat nicht schon immer davon geträumt den Harlem Shake auf der eigenen Webseite zu integrieren?
Braucht kein Mensch, gibt es aber dennoch. Unter HSMaker.com ist der Harlem Shake für Webseiten zu finden.

Einfach URL der gewünschten Webseite eingeben, den Klängen von "Harlem Shake" lauschen und warten bis die Wände wackeln. Viel Spaß

Giphy oder GIFsoup – Suchmaschine oder Archiv für GIFs

nospam@example.com (Guenny) — Tue, 19 Feb 2013 13:39:00 +0100

Animierte Bildchen erfreuen sich ungebremster Beliebtheit. Nachdem 2012 das Oxford Dicitionary "GIF" zum Wort des Jahres gekürt hat, geht der Siegeszug ungebremst weiter. Zig Webseiten präsentieren täglich neue Grafiken, da fällt es zuweilen schwer den Überblick zu behalten. Etwas Abhilfe schaffen Suchmaschinen, die sich auf GIFs spezialisiert haben.

Da wäre beispielsweise Giphy, eine recht neue Suchmaschine für animierte Bilder. Diese macht einen sehr guten Eindruck, leider kann Giphy noch nicht mit allzu viel Content aufwarten, bietet aber Dank Verschlagwortung ein schnelle Möglichkeit an das gewünschte GIF zu kommen.

Wem die Auswahl noch zu gering ist, der wechselt eventuell zu GIFsoup. Dort findet der Animationsfan, neben einer großen Auswahl an Bildern, auch die Möglichkeit selbst GIFs aus youtube Videos zu erstellen. Dafür wird allerdings ein Account benötigt. Die Ergebnisse des eigenen Archivs können sich ebenfalls sehen lassen, denn es werden gleichzeitig Links für Foren oder der direkte Download angeboten. Da es sich allerdings nur um eigenen Content handelt, kann nicht wirklich von einer Suchmaschine gesprochen werden.

Alternativ bieten Seiten wie thumblr oder soup.io wohl die größte Vielfalt, wenn es um animierte Bilder geht.

Die volle Farbpalette - HTML5 Color Picker

nospam@example.com (Guenny) — Sat, 16 Feb 2013 12:59:00 +0100

Farbe gefällig? Dann rasch zum HTML5 Color Picker von Devon Hunt.
Der Entwickler und Designer hat neben verschiedenen Projekten, die unter http://lab.hailpixel.com/ zu finden sind, eine Webseite entworfen die Nichts anderes macht, als alle verfügbaren Farben plus Hexcode gegenüber zu stellen.
Die Bedienung ist denkbar einfach, Links Rechts Bewegungen ändern den Farbton, die Helligkeit wird mit Hoch und Runter reguliert. Bleibt noch die Sättigung für das Scrollrad. Thats it. Mehr muss dazu nicht gesagt werden, einfach, praktisch gut. Sollte die Umsetzung dennoch nicht zusagen, bleiben Alternativen wie z.B. 0to255

WebQuake - Dank HTML5 und WebGL das Kultspiel Quake von id Software im Browser spielen

nospam@example.com (Guenny) — Thu, 14 Feb 2013 15:32:00 +0100

Ach waren das noch Zeiten, als vor ca. 15 Jahren Quake auf den Markt kam und einen die Nächte geraubt hat. War damals noch eine CD von Nöten, um den Spielspaß zu genießen, reicht heute ein einfacher Browser wie Firefox und Chrome völlig aus. Mit Hilfe HTML5 und WebGL schaffte es der russische Entwickler Vitaliy Kuzmin alias SiPlus das Kulstpiel auf den Browser zu portieren.

Wobei dabei auf die Originalressourcen von Quake zurückgegriffen wird, diese werden jedoch lokal auf dem Client berechnet. Neben Command & Conquer in HTML5 wurde nun ein weiterer Klassiker im Browser verwirklicht. Tolle Sache, auch wenn es bis jetzt nur eine Demo ist.

WebQuake auf Github

WebQuake Demo

Mit calm.com oder rainymood.com enspannt in die Arbeitswoche starten

nospam@example.com (Guenny) — Mon, 04 Feb 2013 11:42:00 +0100

"I don't like mondays" denken sich heute wohl wieder Millionen von Arbeitnehmern. Ich selbst will mich da nicht unbedingt ausschließen, denn der Start in die neue Woche gehört mit zu den schwersten Herausforderungen, besonders im winterlichen Schmuddelwetter ;)

Damit der erste Arbeitstag der Woche nicht gleich in Stress ausartet wurden Seiten wie calm.com erschaffen. Die Webseite bietet in Zeiten der Hektik und Schnelllebigkeit einen Hafen der Ruhe. Zumindest für zwei oder zehn Minuten. Falls die Klicksucht nicht ganz in den Griff zu bekommen ist, kann ein Audioguide dazu geschaltet werden, damit auch der letzte Workaholic die Zeit zum Relaxen findet.

Sollten die beruhigenden Töne zu animierten Naturlandschaften nicht anschlagen und die Entspannungsphase nicht eintreten, empfehle ich einen Blick auf rainymood.com. Die Webseite bietet angenehmen Sommerregen mit leichten Gewitter im Hintergrund. Wer hier nicht zu Ruhe kommt, der findet bei diesen Tönen vielleicht an einem anderen "stillen Ort" seine Rückzugsstätte. Schönen Montag noch!

Was ist der Unterschied zwischen Java und JavaScript?

nospam@example.com (Guenny) — Sun, 20 Jan 2013 16:22:00 +0100

Nachdem die letzten Tage immer wieder Meldungen über Sicherheitslücken in Java aufgetaucht sind und dazu geraten wurde selbiges besser zu deaktivieren oder ganz zu deinstallieren, tauchten immer wieder Fragen auf wie zum Beispiel:

Funktionieren Webseiten oder Social Networks wie Facebook, Twitter und Co auch ohne Java?
Funktionieren Browserspiele ohne Java?
Welche Programme benötigen Java eigentlich?
Kann ich JavaScript und Java deaktivieren?
Was ist der Unterschied zwischen Java und JavaScript?

Um die Fragen zu beantworten und euch etwas aufzuklären, will ich mit der letzten beginnen.

Was ist der Unterschied zwischen Java und JavaScript?

Bei JavaScript handelt es sich um eine Scriptsprache, die meist in Verbindung mit HTML auf Webseiten zum Einsatz kommt. Genauer gesagt, ist die Sprache in jedem Browser aktiv, zumindest in den Standardeinstellungen. JavaScript kann im Browser komplett deaktiviert oder aktiviert werden (siehe hier). Das vollständige Deaktivieren ist jedoch wenig sinnvoll, da viele Seiten ohne JavaScript nicht mehr richtig funktionieren.
Praktischer sind Add-ons wie No-Script, die es erlauben JavaScript auf gewünschten Seiten zu aktivieren, denn leider kann die Scriptsprache auch von dritten zum Einschleusen von unerwünschtem Code missbraucht werden.

Ist von Java die Rede, ist ein eigenständiges Programm der Firma Oracle gemeint, welches zur Zeit in Version 6 oder 7 für 32bit und 64bit Systeme zur Verfügung steht.
Bei Java selbst handelt es sich um eine objektorientierte Programmiersprache. Das Java Paket von Oracle dient dazu, Programme die in dieser Sprache geschrieben wurden auf beliebigen Systemen auszuführen.
Zusätzlich dazu enthält Java auch ein Browser Plugin, um Programme (sogenannte Applets) im Browser auszuführen. Diese Applets sind jedoch lange nicht so verbreitet wie JavaScript, das heißt der Normalbürger wird wenig davon merken, wenn das Java Plugin im Browser deaktiviert ist.

Kann ich JavaScript und Java deaktivieren?

Wie oben erwähnt wirkt sich das Deaktivieren von JavaScript signifikant auf das Surfen aus, wobei das Deaktivieren von Java, so gut wie keinen Einfluss hat.

Welche Programme benötigen Java?

Java Programme sind oft in der Industrie zu finden, aber auch auf dem lokalen PC heimisch, so basieren Programme wie Eclipse, JDownloader, JEdit oder Azureus beispielsweise auf Java.

Funktionieren Browserspiele ohne Java?

Die meisten Browserspiele basieren auf Flash, manche auch auf HTML5. Somit sollte dem Spielspaß auch ohne Java Nichts im Wege stehen

Funktionieren Webseiten oder Social Networks wie Facebook, Twitter und Co auch ohne Java?

Wie bereits in den vorherigen Fragen beantwortet, benötigen Webseiten oftmals JavaScript, damit der volle Funktionsumfang genutzt werden kann. Die meisten Facebookspiele basieren auf Flash und funktionieren auch ohne Java, das gleiche gilt für handelsübliche Browsergames.

HackerRank: Social Community für Coder, wer hackt am besten

nospam@example.com (Guenny) — Thu, 29 Nov 2012 17:47:00 +0100

Soziale Netzwerke für die Allgemeinheit gibt es inzwischen wie Sand am Meer, wer heute noch ein neues Netzwerk startet, sollte eher eine Nische füllen, um genügend Nutzer um sich zu scharen.

HackerRank möchte genau dieses tun und stellt mit der frisch aus der geschlossenen Beta entlassenen Webseite eine Plattform für Hacker zur Verfügung. Wer nun denkt, dass dort illegales vor sich geht, hat hacken wohl falsch interpretiert. Die Webseite bietet Wettbewerbe und Rätsel an, an denen sich Coder gegenseitig messen können. Ähnlich wie bei Lerncommunities wie CodeCademy kann der Code direkt im Browser eingeben werden und benötigt keine Extratools.

Zum Start stehen zehn "Challenges" zur Verfügung, vom bekannten Tic Tac Toe bis zum AntiChess. Bei den Aufgaben handelt es sich um Spiele, Puzzles und andere Problemstellungen. Bei späteren Levels kann es durchaus vorkommen, das gar keine Lösung vorhanden sind und nur ein Algorithmus verbessert werden muss.

Wie funktioniert HackerRank

Im Prinzip besteht eine Challenge aus einer Aufgabe, im ersten Beispiel aus dem Spiel "TicTacToe". Sobald mit der Aufgabe begonnen wird, erhält der Coder eine Erklärung was das Ziel dieser Challenge ist, danach muss er sich für eine Programmiersprache entscheiden. Im Editor kann zwischen vielen bekannten Sprachen von C, Java über Python bis Haskell oder Erlang gewählt werden. Ist die gewünschte Sprache ausgewählt wird ein Codekonstrukt vorgegeben, welches bestmöglich gelöst werden sollte. Hier ein Java Beispiel:

import java.io.*;
import java.util.*;
import java.text.*;
import java.math.*;
import java.util.regex.*;

public class Solution {

/* Complete the function below to print 2 integers separated by a single space which will be your next move*/
     static void nextMove(String player, String [] board){

}

public static void main(String[] args) {
        Scanner in = new Scanner(System.in);
        String player;
        String board[] = new String[3];

        //If player is X, I'm the first player.
        //If player is O, I'm the second player.
        player = in.next();

        //Read the board now. The board is a 3x3 array filled with X, O or _.
        for(int i = 0; i < 3; i++) {
            board[i] = in.next();
        }

        nextMove(player,board);

    }
}

Nachdem der Code vervollständigt wurde, kann mit dem eigenen Programm, Bot genannt, gegen andere Hacker angetreten werden.

Ziel des Ganzen ist sicherlich der Spaß am Coden und einer der oberen Plätze im "Leaderboard".

Wer gerne programmiert und dabei die Herausforderung im Wettbewerb mit anderen sucht, der ist bei der neuen Hacker Plattform sicherlich genau richtig.

The Useless Web - das wahre Gesicht des Internets

nospam@example.com (Guenny) — Mon, 26 Nov 2012 12:43:00 +0100

Passend zum Montag geht es heute um die "nutzlosen" Seiten im Netz.
Webseiten die wenig bzw. gar keinen Sinn ergeben, sind im Netz an vielen Ecken zu finden. Netterweise eignen sich solche Seiten prima dazu Zeit totzuschlagen. Um diese noch einfacher zu verschwenden wurde wohl "The Useless Web" erschaffen. Dabei handelt es sich um eine "tolle" Sammlung von GIF oder Flash Seiten auf die per Zufallsgenerator weitergeleitet wird.

Probiert es aus und seht das wahre Gesicht des Internets. Viel Spaß

Google Street View Antarktis - Rund um den Südpol

nospam@example.com (Guenny) — Thu, 19 Jul 2012 12:48:00 +0200

Google Street View hat seine Antarktis Karte aktualisiert. So sind faszinierende neue Bilder aus dem ewigen Eis hinzugekommen.

Seit 2010 ist der Südpool virtuell begehbar, mit dem aktuellen Update wurden hauptsächlich historische und wissenschaftliche Bilder hinzugefügt. So können neben dem beflaggten Südpol auch die Hütten der Polarforscher Ernest Shackleton und Robert Falcon Scott betrachtet werden. Ebenfalls interessant ist die Amundsen-Scott Station mit dem Südpol-Teleskop.

Den gesamten Überblick findet ihr in der offiziellen Meldung

Die Evolution des Internets - Interaktive Grafik zur Netzentwicklung

nospam@example.com (Guenny) — Fri, 06 Jul 2012 11:28:00 +0200

The Evolution of Web ist eine interaktive Infografik, die so gut wie keine Wünsche offen lässt. Sie zeigt auf anschauliche Art und Weise die Entwicklung des Netzes von 1990 bis heute.

Browser und Technologien

Unterteilt ist die Grafik in Browser (Mosaic bis Chrome OS), Protokolle (HTTP), Programmiersprachen (Java) und weitere Technologien (Webfonts, IndexedDB, APIs) . Wobei alle einzelnen Punkte zusätzliche Informationen, wie Versionhistory und Änderungen offenbaren, sobald mit der Maus darüber gefahren wird.

Die Entwicklung des Internets

Ein weiterer Bereich der Infografik zeigt die Datenentwicklung des Netzwerkes. Hier werden die Nutzer grafisch dargestellt und dazu im Vergleich der Datenverkehr weltweit, welcher inzwischen bei 27.483 PetaByte pro Monat angekommen ist.

Fazit

Viel Spaß beim Erkunden der Internetgeschichte