• Vorträge

    Viele Vorträge, die auf Konferenzen gehalten werden, landen irgendwo im Internet. Wir haben sie für euch zusammengesucht.

    • Vier Webseiten mit “WOW-Effekt”

    von am 26. Oktober 2009

    Wir konzentrieren uns hier im Blog ja nicht nur auf PHP, es gibt auch eine Kategorie, die sich um Webentwicklung kümmert. Diese möchte ich heute mal wieder ein wenig füllen. In letzter Zeit habe ich viel im Netz gesurft um mich mal wieder ein wenig was Layouts angeht inspirieren zu lassen.

    Vielleicht will ich ja zum 500sten Artikel ein neues Layout machen. Ist aber noch nicht sicher. Ein paar Ideen spuken auf jeden Fall schon in meinem Kopf herum. Ich würde sogar sagen, ein paar echt gute. Aber es sind ja noch fast 100 Beiträge bis dahin. Ich habe also jede Menge Zeit euch neugierig zu machen.

    Wie gesagt, ich habe die letzten Tage und natürlich auch das Wochenende über ein wenig das Web durchstöbert und bin auf vier Webseiten gestoßen, die mich mit ihren Effekten begeistert haben. Begeistert vor allem, weil ich nicht auf Anhieb wusste, wie der Effekt zustande kommt. Diese Seiten möchte ich heute kurz vorstellen.

    • Fat-Man Collective – Fangen wir mal mit der “unspektakulärsten” Seite an. Sehr schöner Effekt beim Scrollen der Seite. Der dicke Mann rennt mit. Bleibt auch stehen, wenn man aufhört. Wenn ich auf ein Menüpunkt klicke, dann springt das System erst weiter, bis der dicke Mann gesprungen ist. Natürlich muss ich nicht dazu sagen, dass die Effekte ohne Flash realisiert wurden.
    • Zaum & Brown – Auf den ersten Blick eine sehr einfache Webseite. Sehr schön gestaltet, aber ohne viel Schnick-Schnack. Interessant wird es erst, wenn man die Größe der Seite verändert. Einfach mal machen. Es lohnt sich. Wunderbarer Effekt, den ich nicht so einfach nachmachen könnte. Sehr gelungen. Schön unaufdringlich, aber trotzdem Wow.
    • Think Geek - Diesen Effekt habe ich schon vor einer Weile entdeckt, aber er passt so wunderbar in die Reihe. Scrollt mal an das Ende der Seite und achtet auf den Hintergrund. Der Effekt ist so einfach, wie genial.
    • Symfony - Nicht großes oder weltbewegendes. Ich finde nur die Art eine E-Mail Adresse zu verschlüsseln sehr interessant. Hier wurde sie über CSS einfach “codiert”. Natürlich fragt ihr euch jetzt warum codiert? Das steht doch ganz eindeutig fabien.potencier@ … Einfach mal die Adresse in die Zwischenablage kopieren und wieder rausholen. Ihr werdet überrascht sein. (Danke für den Link übrigens bei Christian!)

    So das waren schon die vier Seiten. Ihr habt gemerkt, ich stehe auf Effekte, die man erst beim zweiten mal schauen erkennt. Ist zwar schade, das solche Schmankerl nicht von jedem wahrgenommen werden, umso mehr freue ich mich immer so etwas zu entdecken.

    Wenn ihr auch Webseiten kennt, die eure Kinnlade ein wenig nach unten fallen lassen haben, dann her damit. Die Liste kann noch ein paar Einträge vertragen. Was das Symfony und das Think Geek Beispiel angeht, da würde ich gerne in der nächsten Zeit noch mal ein wenig erklären, wie es funktioniert. Beim Zaum & Brown und dem dicken Mann müsste ich mich erst ein wenig einarbeiten, vielleicht aber will da ja jemand von euch übernehmen.

    Ach ja, was die Twitter Leser angeht: Sorry, dass ihr die Links schon kennt, aber der Fairness halber muss ich sie auch mal hier posten.

    Nils Langner

    Auch wenn Ihr es mir nicht glauben werdet, aber ich habe nichts gegen PHP. Ich rege mich einfach nur gerne auf. Ok so schlimm ist es auch nicht. Eigentlich wollte ich schon immer einen Blog haben und da ...

    Zum Profil von Nils Langner

    22 Kommentare »


    • A journey through the world | 4 Seiten mit dem gewissen etwas
      am 26. Oktober 2009 um 08:59 Uhr

      [...] Hier geht es zum Artikel [...]


    • Julia
      am 26. Oktober 2009 um 09:12 Uhr

      Zaum & Brown…sehr cooler Effekt!


    • KingCrunch
      am 26. Oktober 2009 um 09:37 Uhr

      Zu Symfony “EMail-Trick”: Funktioniert scheinbar unter FF3.5 nicht.


    • Sven
      am 26. Oktober 2009 um 09:40 Uhr

      @KingCrunch
      Der Symfony-Trick klappt wunderbar. Auch unter Firefox 3.5.3.


    • Dennis Becker
      am 26. Oktober 2009 um 10:00 Uhr

      “Ein paar Ideen spucken auf jeden Fall …” – Ich hoffe aber, die Ideen “spuken” nur herum, sonst wird’s ziemlich feucht im Kopf :D

      @Symfony: die E-Mail steht einfach nur Rückwärts drin und wird per CSS quasi umgedreht ;) Den Trick kenne ich schon gut 3-4 Jahre.


    • Sascha Tietze
      am 26. Oktober 2009 um 10:12 Uhr

      Das mit der eMail: bis zu welchem Browser / welcher Version ist das abwärtskompatibel… wohl nicht allzu sehr *an den IE denk* ;)


    • Flyingmana
      am 26. Oktober 2009 um 10:45 Uhr

      Die Fat-Man Collective Seite lädt bei mir grad nicht, vermutlich ein wenig überlastet.

      Aber die Zaum & Brown Seite ist wirklich nett gemacht. Hab den JS-Code mal überflogen und es sieht nicht all zu schwierig aus sowas selbst zu machen.


    • Nils Langner
      am 26. Oktober 2009 um 10:47 Uhr

      @Flyingmana: Lust einen kurzen Artikel drüber zu schreiben und es zu erklären?


    • Sven
      am 26. Oktober 2009 um 10:51 Uhr

      Bzgl. einer E-Mail-Codierung ist die folgende Seite absolut empfehlenswert: http://techblog.tilllate.com/2008/07/20/ten-methods-to-obfuscate-e-mail-addresses-compared/

      Es werden 9 verschiedene Techniken zum Verschleiern der E-Mail-Adresse vorgestellt und verglichen. Besonders lobenswert ist der Praxistest: hier wurde zu jeder verschleierten E-Mail-Adresse (unterschiedliche Verschleierungstechnik) der eingehende Spam über die vergangenen 1,5 Jahre gemessen.


    • Micha
      am 26. Oktober 2009 um 10:57 Uhr

      Hier auch noch ein recht Interessanter Effekt:
      http://www.chive-project.com/Screenshots

      Nach unten scrollen und den unteren Bildschirmrand beobachten.

      Gibt auch jeden Fall nette Spielerein da draußen.


    • Nils Langner
      am 26. Oktober 2009 um 10:00 Uhr

      @Sven: Genau so eine Aktion wollte ich auch mal starten :) War aber wieder 1,5 Jahre zu spät. Danke für den Link.


    • Stephan Hochdoerfer
      am 26. Oktober 2009 um 11:35 Uhr

      Wenn es um Hintergrundeffekte geht finde ich das hier einfach genial:
      http://www.csszengarden.com/?cssfile=http://www.css-praxis.de/cssocean/zenocean.css


    • noch ein Sven
      am 26. Oktober 2009 um 11:56 Uhr

      Finde den Symphony E-Mail-Trick nicht sehr gut: Wenn ich der Person eine E-Mail schicken möchte, kopiere ich mir die E-Mail-Adresse – in diesem Fall hätte ich aber die E-Mail-Adresse in falscher Reihenfolge im Zwischenspeicher, also muss ich den umständlichen Weg gehen und sie abtippen.


    • Cem Derin
      am 26. Oktober 2009 um 12:21 Uhr

      Man beachte was passiert, wenn man die Fensterbreite änder ;)

      http://silverbackapp.com/


    • KingCrunch
      am 27. Oktober 2009 um 01:11 Uhr

      Bei der Silverback-Seite? Nichts passiert da ^^

      Überhaupt ist das ganze Thema samt Diskussion mehr “Design über Funktionalität”. Der versprochene “Wow-Effekt” hält sich bei mir in Grenzen. Is ja nett anzuschauen, aber was hat es zu bieten?


    • Nils Langner
      am 27. Oktober 2009 um 06:41 Uhr

      @KingCrunch: Es gibt Leute, denen Design/Layout wichtig ist. Da zähle ich mich auch dazu. Mir macht es einfach Spaß solche Kleinigkeiten zu entdecken. Dass das nicht jedermann Sache ist, weiß ich, habe ich auch kein Problem mit. Jedem das seine :)


    • Cem Derin
      am 27. Oktober 2009 um 10:16 Uhr

      @KingCrunch: Welchen Browser benutzt du denn?!


    • Marc
      am 27. Oktober 2009 um 13:57 Uhr

      Hi, ich baue auch gerade ein weiteres Blog auf und habe dabei ein wenig mit Eyecandy und AJAX gearbeitet. Bei Interesse einfach mal reinschauen: http://thegeek.de

      Gruß,
      Marc


    • Sascha Tietze
      am 27. Oktober 2009 um 19:27 Uhr

      @KingCrunch: Um das Ganze nochmal aufzuklären, es passiert wohl etwas. Resize die Seite einfach mal leicht indem du wirklich mit der Maus die Breite änderst und achte auf die Blätter oben, sieht echt lustig aus.


    • Nils Langner
      am 27. Oktober 2009 um 20:15 Uhr

      Ich glaube KingCrunch hat den Effekt schon gesehen, aber er empfindet ihn nicht als erwähnenswert. Zumindest war das meine Interpretation. Vielleicht täusche ich mich auch.


    • PHP Gangsta
      am 28. Oktober 2009 um 09:09 Uhr

      “Natürlich muss ich nicht dazu sagen, dass die Effekte ohne Flash realisiert wurden.”
      Bei mir sind sie MIT Flash realisiert…

      Interessant finde ich auch die Email-Adresse mit CSS (direction=rtl). Das ist cool, hab ich so noch nicht gesehen.


    • Linus Gubenis
      am 28. Oktober 2009 um 17:05 Uhr

      Mh, meine neue Startseite, habe heute das erste mal die Seite gefunden, bei den 4 Webseiten gabs bei mir aber nur bei der Halloween Sache ein WoW :)

      Find jedoch sehr gut wie alle in den Kommentaren mitmachen, die Seite lebt!

    RSS Feed für Kommentare zu diesem Artikel. TrackBack URL

    Hinterlasse einen Kommentar

    Werbung
    PHP Magazin
    Ausgabe 02/2010

    Dieses Mal mit Artikeln zu den Themen OpenSocial und Apache Shindig, Graphentheorie, Smarty3

    t3n
    Ausgabe 19

    Social Media (R)evolution. Weitere Themen sind noSQL, Crowdsourcing ...

    PHP Journal
    Ausgabe 2/2010

    PHP & Windows optimal nutzen, die besten PHP-CMS im Überblick, Google-API mit Zend Framework nutzen.

    Wir wurden schon öfters gefragt, ob man uns nicht irgendwie unterstützen kann. Die Antwort war immer einfach: Klar! Am einfachsten ist es eure nächsten Einkäufe bei Amazon über unsere Link abzuwickeln. Damit würdet ihr uns schon sehr helfen. Über Co-Autoren freuen wir uns aber noch mehr.