CSS Gradients leicht gemacht!

Teil von CSS 3 sind sogenannte Gradients. Dies sind Farbverläufe, die nur via CSS Angabe erzeugt werden und nicht etwa eine Bilddatei benötigen. Der Vorteil liegt auf der Hand: Es muss keine komplizierte Hintergrundkonstruktion ersonnen werden um schöne Effekte zu zaubern.

Hier sieht man das ganze mal in Aktion. Das einzige Bild, ist der Hintergrund mit dem abgebildeten Gebäude. Der grüne Schleier, der schräg verläuft und dann transpartent wird und der Farbverlauf hinter dem Suchformular wurden nur durch CSS Gradients erzeugt. Was man auch sehr gut sieht: Gradients vertragen sich mit der border-radius Eigenschaft sehr gut.

Von Colorzilla  gibt es einen Excelenten CSS 3 Gradients generator! Damit lassen sich für alle Browser, die CSS 3 Gradients unterstützen selbige erstellen. Aber sogar dem Internet Explorer kann in den Versionen vor 9 über einen entsprechenden Proprietären  Filter nachgeholfen werden.  Für ältere Opera, Webkit und Mozilla Browser wird der Support mittels Präfix hergestellt.

Einfach ein Template auswählen und dann geht es ans Anpassen: Einfach für die jeweiligen Punkte die Transparenz bzw. den Farbwert einstellen und die Orientierung wie der Farbverlauf ist für den gesamten Gradient einstellen und dann einfach den Code aus dem CSS Fenster kopieren. Fertig ist der ein CSS Gradient, der sich auf einer Vielzahl von Browsern darstellen lässt.

AJAX und die Zurück-Schaltfläche"

AJAX Anwendungen haben den schönen Vorteil, dass sie sparsame Ladezeiten haben, da Inhalte im Hintergrund nachgeladen werden und auch nach Nutzerinteraktionen sofort die gesamte Seite neugeladen wird.

Dabei kommt aber recht schnell ein Problem auf: Was ist wenn z.B. Suchergebnisseiten mit AJAX realisiert wurden, die Person auf ein Ergebnis klickt und dann wieder zurück will? Was ist wenn jemand einfach nur die Adresse an einen Freund verschicken will? Hier hört die Schönheit der AJAX Anwendungen auf. Asynchrone Interaktionen ändern nicht die URL und verursachen auch keinen Eintrag in der Browser History  - wie auch, die URL ist ja gleichgeblieben.

AJAX arbeitet in vielen Fällten mit HTTP GET Parameter – diese werden als Querystring einfach an die URL dran gehängt. Jetzt könnte man auf die Idee kommen über JavaScript window.location.search  mit entsprechenden Parametern zu aktualisieren.  Das funktioniert – man kann window.location.search schreiben – aber der Browser läd sofort die gesamte Seite mit den Parametern neu. Das ist nicht das was man sich vorstellt.

Eine andere Technik sind die so  genannten “Anker”. Eigentlich sind Anker eher zur Navigation innerhalb von Seiten gedacht.  Deswegen wird der Teil der URL nach (und einschließlich mit dem) # nicht an den Server geschickt und nach Änderungen wird auch nichts neugeladen, allerhöchstens zum entsprechenden Anker auf der Webseite gescrollt.  Seltsamerweise heißt das korresondierende Javascript Element dazu window.location.hash.

Das schöne ist mit jedem Ändern von window.location.hash wird ein neuer Eintrag im Browser Verlauf angelegt. Vor und Zurück  im Verlauf wäre somit möglich. Auch die Adresszeile wird aktualisiert.

Wie aber schon erwähnt wird der Anker nicht mit an den Server geschickt beim Aufrufen der URL. Damit wäre man also genauso weit wie vorher. Die Lösung hierfür heißt direkt beim window.onload Ereignis den Anker zu parsen und einen Entsprechenden AJAX Request zu starten. Dazu kann man z.b. bei den Suchergebnissen die Anzahl der Ergebnisse hineinkodieren oder die Seitenummer der Ergebnisse, die man sich gerade ansieht. So wird bei window.onload geprüft ob Standardeingaben vorliegen oder ob man z.b. eigentlich Seite vier haben will. Wenn dies der Fall ist wird der Code aufgerufen, der sonst vom User ausgeführt werden würde, wenn dieser zur besagten Seite will.

Eigentlich eine sehr einfache Lösung  - man muss nur erst mal drauf kommen. 

Hier ein kleines Beispiel:

window.onload = loadhashrequested;

 

function loadhashrequested()
{
    if(window.location.hash.length > 0)
    {
        var newhash = window.location.hash;
        newhash = newhash.replace(/#amount=/g, "");
        if(newhash.length>0)
        {
            newhash = parseInt(newhash);
            newhash = newhash -10;
            loadmore(10, newhash);
        }
    }
}

 

Hier bei wird geprüft ob in der URL “#amount=” vorkommt. Anschließend wird geschaut ob der Rest eine Zahl ist. Darauf werden die Suchergebnisse ab 11 nachgeladen. Normalerweise würde der User über  den Loadmore Button nach und nach 10 weitere Ergebnisse laden.

Tabellen gestalten leicht gemacht

Mit tablecloth hat man ein ausgezeichnetes mittel um per JavaScript Tabellen optisch aufzubereiten und sogar dem Nutzer die Möglichkeit zu geben Einzelne Spalten und Datensätze zu markieren. So verliert man nichts mehr in längeren Tabellen aus den Augen!

Man könnte zum Gedanken kommen, dass diese Farbwechsel Serverseitig über reincodierte CSS Klassen gelöst wurden, aber nein: Das ganze macht tablecloth wie von selbst. Das heißt man hat keine Probleme mehr beim mitzählen und auch das Nachladen von Content via AJAX unterbricht nicht den Farbwechsel.

Auch hier werkelt wieder Tablecloth. Der Nutzer hat den Datensatz “Technische Universität Kaiserslautern” angeklickt. Die Maus befindet sich jedoch über dem Datensatz zur Technischen Universität Dresden (hellgrün hervorgehoben).

Die Farben lassen sich natürlich an die individuellen Bedürfnisse mit CSS sehr leicht anpassen.

Alles was man einstellen muss ist “Select on Click”, “Highlight Columns” oder “Highlight Rows” und dazu eben die passenden CSS Klassen schreiben (oder das Beispiel CSS nehmen). Jedem TR Wert wird die Classe “odd” oder “even” von tablecloth zugewiesen und schon kann der Spaß losgehen. Und Wie man auch in dem Beispielscreenshots sieht, ist es auch gar kein Problem die Überschriften außen vor zu lassen.

Das ganze gibt's übrigens hier: http://cssglobe.com/lab/tablecloth/

Google Maps und jquery

Google hat ein recht mächtiges JavaScript API für Google Maps erschaffen. Dennoch ist es schwer damit dynamischen Content zu erstellen, weil man sich erst mal quer durch das ganze API lesen muss.

Mit gMap geht das in Kombination mit jQuery ganz leicht!

$("#map").gMap();

Und schon ist die Weltkarte erzeugt. 

Klar ist: So eine Karte braucht man recht selten und auch den Straßenkartentyp wird man nicht immer brauchen. Hier lässt sich gMap sehr leicht anpassen. So ist ein Aufruf mittels 

$("#map").gMap({ maptype: G_PHYSICAL_MAP });

schon genug um den Kartentyp zu ändern. Hierbei unterstützt das Plugin übrigens alle typischen Karten der Maps API: G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP, G_DEFAULT_MAP_TYPES, G_PHYSICAL_MAP

Jetzt wissen wir wie man die Kartenart ändern. Aber wie komme ich an einen bestimmten Ort? Und wie zoome ich rein? Und überhaupt kann man diese netten kleinen Luftballons auch reinsetzen und gleich noch Tooltipps dazu ausgeben?
Klar: 

Obige Karte wurde mit folgendem Code erzeugt:

$("#map").gMap({ markers:[{address: "Technische Universität Kaiserslautern Gottlieb-Daimler-Straße 47 67663 Kaiserslautern", html: "Technische Universität Kaiserslautern",   popup: true  }],
  zoom: 7,
                 maptype: G_HYBRID_MAP  });

Spart man sich “popup:true” so ploppt der Tooltip beim Luftballon erst auf, wenn man drauf klickt. Die Location lässt sich übrigens auch mit echten Koordinaten machen, aber da die TU Kaiserslautern für Google Bekannt ist, ist das alles kein Problem – wie es auch mit jeder anderen Adresse kein Problem wäre.Im übrigen kann man auch sehr leicht mehrere Marker verwenden.

Das ganze gibts übrigens hier zum herunterladen – sehr gut erklärt mit noch viel mehr Beispielen als beim mir gerade: http://gmap.nurtext.de/download.html

jQuery Title Alert

Wenn der User einmal den Tab gewechselt hat, aber die eigene Webseite dennoch die Aufmerksam des Nutzers auf sich ziehen will, gibt es recht wenige diskrete Möglichkeiten, dafür sehr viele, die Benutzer mehr nerven als sie ihnen helfen.

Enthält die Webseite beispielsweise eine Chat Funktion, so möchte ein User natürlich informiert sein, wenn er eine neue Nachricht erhält, was er nicht will, sind haufenweise PopUps oder pausenlose “Blongtöne”, die ihn bei seiner Arbeit unterbrechen.

Eine sehr schöne Möglichkeit bietet hierzu jQueryTitleAlert. Es ermöglicht entweder den Seitentitel zu ändern oder einen “blinkenden Wechsel” zwischen der Meldung oder dem eigentlichen Seitentitel zu machen. Hierbei wird der User informiert und dennoch nicht gestört.

Wie funktioniert das ganze nun?

Zunächst einmal muss die jquery.titlealert.js eingebunden werden.

Danach kann man per $titleAlert(“Blinkende Nachricht”); auch schon loslegen. Das ist alles was man braucht um eine Blink-Nachricht abzusetzen. Natürlich geht es auch deutlich individueller!

var newtitle="Nachricht von Peter!";
$.titleAlert(newtitle, {
requireBlur:true,
stopOnFocus:true,
duration:0,
interval:700
});
Hierbei wird sobald man wieder den Tab betritt nur noch der eigentliche Titel angezeigt, das blinken wird unendlich oft gemacht (duration:0) und 700ms ist das blink-Intervall lang. Aktiviert man “requireBlur” wird die Nachricht nur angezeigt, wenn der User gerade einen anderen Tab offen hat.

Den Download gibt's übrigens hier: http://heyman.info/2010/sep/30/jquery-title-alert/

AnythingSlider

Es gibt jede Menge jQuery Plugins die Bilder ineinander überblenden aber AnythingSlider hebt sich hier von der Masse ab: Es slided wirklich alles und ist dabei noch stark anpassbar.

Es unterstützt sowohl das direkte Anwählen der einzelnen Inhaltsseiten als auch das “links”-“rechts” gleiten des Contents.Außerdem hat es eine Start-Stop-Automatik, die das gleiten verhindert, während die Maus über dem Content liegt.

Außerdem definiert es Anchors im HTML Code, sodass man sogar aus anderen Seiten heraus auf bestimmte Seiten des Sliders verlinken kann.

Ideal ist AnythingSlider für sogenannten “Featured Content”.

Herunterladen kann man ihn übrigens hier: https://github.com/ProLoser/AnythingSlider/downloads

Und die Dokumentation gibts hier: https://github.com/ProLoser/AnythingSlider/wiki

100 Mio Menschen nutzen monatlich Operas Mobilbrowser

So vermeldet es der Hersteller auf seiner Webseite. Das macht Opera Mini und Opera Mobil zu einer echten Größe im Mobil-Browser Segment. Vergleicht mal die Verkaufszahlen aller bisherigen iPhones kommt man laut der Wikipedia auf 89 Millionen.

Auf dem kommenaden MWC wird Opera seine neuen Browserversionen für Opera Mobile und Mini für Java2ME,Android, iPhone, Symbian, Blackberry und iPad vorstellen. Von einer speziellen Bada-Version wird bisher nichts gesagt, jedoch lässt sich auf den Bada-Phones die Java2ME Version unter m.opera.com herunterladen und installieren.

Besonders für Personen mit langsamen Handyverbindungen oder teuren Datentarifen ist Opera interessant, da er in der Lage ist die Downloads zu komprimieren. Somit kann man Kosten und Wartezeiten sehr gut einsparen.