Smallville / Allgemein / Games (PC und Konsole) / Google-Themenbild
In diesem Thread befinden sich 14 Posts.
AntwortenDruckansicht
reiner17
icon01.png Google-Themenbild - 09.06.2011, 12:36:29

722 Posts - Fortress

Smallville-Fan
Moderator
Irgendwo hier im Forum hatten wir schon mal das Thema aufgegriffen und
muddi hatte dazu auch einige Links gepostet.
Nur ich finde den betreffenden Thread nicht mehr.

Das HEUTIGE Google-Themenbild ist aber sehr interessant.
Eine PNG-Datei in der durch die Seiten der Gitarre Töne erzeugt werden
können.

Link zum Bild: Link

Hat sich damit schon mal jemand beschäftigt, wie man so etwas hinbekommt?
bip
icon01.png Google-Themenbild - 09.06.2011, 12:51:02

5927 Posts - Superman

Die Untoten aus Ungarn
Moderator
So vom angucken würd ich auf einen Rollover sensor tippen, der halt erkännt, wenn man mit der Maus über die Seite fährt. Gibt es ja auch bei Web Sites mit MNenüs, wo dann das Menü ausklappt, wenn man drüber fährt. Und wenn der Sensor halt anschlägt wird die entsprechende Animation abgefahren und der Sound gespielt. So ganz grob vom Prinzip her. Wie genau sies programmiert haben kann ich nicht sagen, dazu kenn ich mich mit Webdesign zu wenig aus.
reiner17
icon01.png Google-Themenbild - 09.06.2011, 12:56:00

722 Posts - Fortress

Smallville-Fan
Moderator
Das Bildformat PNG ist doch eine Kombination des alten Formats BMP und GIF, Oder irre mich da?

Habe mal den Teil des Quellcodes kopiert, in welchen die Datei aufgerufen wird:

Zitat:
<style>#hplogo:active,#hplogo:focus{outline:none}#hplogo-g{background:url(logos/2011/guitar11-hp-sprite.png) no-repeat 0 0;height:175px;position:relative;width:474px}#hplogo-click{background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -2000px -2000px;cursor:pointer;height:130px;left:0;position:absolute;top:0;width:474px}#hplogo-lcd{height:30px;left:70px;position:absolute;top:129px;width:200px}#hplogo-lcd-icon{background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -580px -162px;cursor:pointer;height:0;position:absolute;width:0}#hplogo-lcd-text{background:transparent;border:0 none;color:#666;cursor:text;font-family:"VT323",arial,sans-serif;font-size:14px;left:77px;position:absolute;top:134px;text-decoration:none;width:182px}#hplogo-lcd-screen{background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -2000px -2000px;height:20px;left:52px;position:absolute;top:134px;width:214px}#hplogo-on{background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -809px -39px;height:37px;left:272px;position:absolute;top:123px;width:62px}#hplogo-led{background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -2000px -2000px;height:21px;left:292px;position:absolute;top:133px;width:21px}.hplogo-str{background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -530px -60px;height:20px;position:absolute;width:255px}#hplogot{-webkit-box-shadow:5px 5px 10px #ddd;-moz-box-shadow:5px 5px 10px #ddd;box-shadow:5px 5px 10px #ddd;-webkit-transition:opacity 0.5s ease-out;-moz-transition:opacity 0.5s ease-out;-o-transition:opacity 0.5s ease-out;transition:opacity 0.5s ease-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:#ffffca;border:1px solid #b5b5b5;cursor:pointer;display:none;font:normal 9pt arial,sans-serif;left:128px;opacity:0;padding:2px 3px;position:absolute;top:16px;white-space:nowrap}</style>

- Editiert von reiner17 am 09.06.2011, 13:30 -
Junkie
icon01.png Google-Themenbild - 09.06.2011, 20:02:00

3959 Posts
Justice League

Junkie
Administrator
Sehr nett gemacht.

Hab auch gerade mal auf den Quelltext geschaut, ganz schöner Wust aus Scripten, der da bei Google mitgeladen wird.

So weit ich das jetzt grob überschaue, ist es ne Kombination aus verschiedenen Techniken:

Eine *.png-Datei (die du verlinkt hast) wird über CSS zerlegt und die einzelnen Elemente werden in verschiedenen <div>-Containern positioniert. Dazu noch paar CSS3-Attribute die den Text einblenden.

Die Animation und Färbung der Saiten wird über JavaScript und eine Neupositionierung der einzelnen Elemente u.a. über diverse mathematische Funktionen gelöst.

Und für den Sound sorgt ein in einem IFrame integriertes Flash-Object, das über JavaScript an den Positionen der Saiten ausgelöst wird und dann die Klänge abspielt.

Aber ist alles ziemlich verschlüsselt worden, damit man es nicht so leicht lesen kann und Platz spart. Mit dem klaren Quelltext könnte man es leichter interpretieren.
reiner17
icon01.png Google-Themenbild - 09.06.2011, 20:19:32

722 Posts - Fortress

Smallville-Fan
Moderator
Das hast du wunderbar erklärt - ich dachte nämlich anfangs, dass man solche Effekte mit einer animierten Bilddatei machen könnte,
Superman X
icon01.png Google-Themenbild - 09.06.2011, 20:53:06

132 Posts - Clark Kent

Zitat:
Original von Junkie[…]
Hab auch gerade mal auf den Quelltext geschaut, ganz schöner Wust aus Scripten, der da bei Google mitgeladen wird.
[…]

Mit anderen Worten Google produziert nur Mist und hält sich nicht an Standards - wie so oft.

>>>
Kim Taeyeon || Flying Petals || merong77 || TaeyeonISM <<<
reiner17
icon01.png Google-Themenbild - 09.06.2011, 21:22:43

722 Posts - Fortress

Smallville-Fan
Moderator
Den oben dargestellten Code könnte man ja auch sortieren und strukturierter darstellen.
Das Ergebnis ist aber das Ziel und das ist gut gelungen.
Red-Blue Blur
icon01.png Google-Themenbild - 09.06.2011, 22:02:14

2405 Posts - Daily Planet

Klaatu Barada Nikto
Diese Gimmicks nennen sich übrigens Doodle.
Zitat:
Wer möchte, kann auch die Tastatur zum spielen benutzen. Dazu muss einfach die kleine Tastatur-Grafik im unteren Bereich des Doodles angeklickt werden, das diese Rot leuchtet. Und schon lässt sich auch mit der Tastatur das Doodle bedienen.

hehe, die ganze Sache ist schon genial gemacht.
Zitat:
Doch wieso zwei Schalllöcher? Bei einer Gitarre gibt es doch nur zwei?!
Der Grund ist ganz einfach: Die beiden Schalllöcher ergeben die beiden Os aus dem Google Schriftzug, welcher sich hinter dem Doodle versteckt. Mit ein wenig Fantasie kann man dieses auch leicht erkennen. Um den Schriftzug im Les Paul Doodle zu verdeutlichen, habe ich diesen einfach mal ins Doodle eingemalt.



Textquelle
reiner17
icon01.png Google-Themenbild - 09.06.2011, 22:27:32

722 Posts - Fortress

Smallville-Fan
Moderator
Von allen Doodles finde ich dieses als ziemlich raffiniert. Ich glaube ich studiere nochmal.
Ansonsten danke ich RBB für die Erklärungen. Das mit dem Google-Symbol hatte ich schon gewusst, aber das dies auch über die Tastatur funktioniert ist schon super.
muddi
icon01.png Google-Themenbild - 09.06.2011, 22:31:58

5592 Posts - Superman

Watch out!
Administratorin
Der Schriftzug heute gefällt mir. So zur Abwechslung mal. Was die manchmal für nen Scheiß da haben... aber...

Zitat:
Original von reiner17
Irgendwo hier im Forum hatten wir schon mal das Thema aufgegriffen und
muddi hatte dazu auch einige Links gepostet.




*gifs made by me*
reiner17
icon01.png Google-Themenbild - 10.06.2011, 17:10:44

722 Posts - Fortress

Smallville-Fan
Moderator
Zitat:
Original von muddi
Der Schriftzug heute gefällt mir. So zur Abwechslung mal. Was die manchmal für nen Scheiß da haben... aber...

Zitat:
Original von reiner17
Irgendwo hier im Forum hatten wir schon mal das Thema aufgegriffen und
muddi hatte dazu auch einige Links gepostet.




Der Thread ist bestimmt beim Serverabsturz mit verloren gegangen. Nachdem RBB das mit dem englischen Begriff erläutert hatte - der stand mit im Titel des alten Thread - Doodles.

Ist ja auch egal - ich kann mich nur daran erinnern, dass du da schon mal ein paar Bilder verlinkt hattest.
muddi
icon01.png Google-Themenbild - 10.06.2011, 17:29:26

5592 Posts - Superman

Watch out!
Administratorin
Is auch egal, ja. Aber du musst mich da verwechseln. Sowas hab ich nie verlinkt, interessiert mich nämlich nich. XD

*gifs made by me*
reiner17
icon01.png Google-Themenbild - 10.06.2011, 18:08:37

722 Posts - Fortress

Smallville-Fan
Moderator
Hatte ich mich damals auch gewundert. Vielleicht war es da auch nur ein Spaß von dir gewesen. Mal schauen dass ich den Eintrag irgendwo wiederfinde.

Hier mal die verlinkte Seite dazu:

Doodles Google


- Editiert von reiner17 am 10.06.2011, 18:14 -
muddi
icon01.png Google-Themenbild - 10.06.2011, 18:26:00

5592 Posts - Superman

Watch out!
Administratorin
Kenn ich nich. Interessant. Oo

*gifs made by me*


Forum wechseln
Forum wechseln zu:

pForum 1.30 © 2000 - 2006 by Thomas Ehrhardt

Login
Username
Passwort
 
Login speichern
Passwort vergessen?
Neuestes Mitglied
ursula

User online
keine Benutzer online

User im Chat
keine User im Chat

Neue Themen
 Tom Welling in Lucifer
 Justin in This Is Us
 Michael Rosenbaum - LI...
 Banshee!
 The one man who beats ...
 der neue;)
 Smallville die beste S...
 BUCHANKÜNDIGUNG E-BOOK
 WIEDERBELEBUNGSVERSUCH
 Drucker gesucht
Letzte Posts
 Schreibe was über dein...
 Was ist eure ultimativ...
 Euer Lieblingsessen
 Seid Ihr sportlich akt...
 Lieblings-Superheld MA...
 Supergirl SpinOff-Seri...
 [Laura] Kara/Supergirl...
 Tom Welling in Lucifer
 Mit oder ohne ... ?
 Game of Thrones
Community
  SOG
  Clana's Angels
  Smallville Love
  Smallville Fanbase
  Smallville Legend
  Clana.de
  Superman-Forum.net
Google/Forum Suche

Partner of Smallville Online Germany