{"id":1212,"date":"2009-01-03T16:52:10","date_gmt":"2009-01-03T14:52:10","guid":{"rendered":"http:\/\/www.frische-zitronen.de\/?p=1212"},"modified":"2017-12-03T11:06:35","modified_gmt":"2017-12-03T09:06:35","slug":"5-one-site-webseiten-mit-unobstrusive-slideshow-effekten","status":"publish","type":"post","link":"https:\/\/www.jukemedia.de\/blog\/2009\/01\/5-one-site-webseiten-mit-unobstrusive-slideshow-effekten\/","title":{"rendered":"5 One-Site-Webseiten mit unobstrusive Slideshow-Effekten"},"content":{"rendered":"

Frisch ans Werk in 2009. Die Tr\u00e4um-und-Dr\u00f6mel-Zeit zwischen den Jahren geht dem Ende zu – Zeit \u00fcber Neues nachzudenken. Und ich habe auch schon ein Thema, welchem ich mich 2009 intensiver widmen werde: Javascript. Jawohl, richtig gelesen. Das Teufelswerk, aber kommt man dran vorbei? Es ist nunmal Fakt, dass mir Kunden oft Beispielwebseiten zeigen, auf denen sehr sch\u00f6ne Effekte zu sehen sind. Ja, ja – sch\u00f6n finde ich die auch, aber wer Wert auf Webstandards legt, wei\u00df, dass man bei vielen Dingen meist das eine nicht ohne das andere haben kann. Und das andere sind dann oft tiefgreifende und nicht akzeptable Minuspunkte bez\u00fcglich der Bedienbarkeit (Strichwort: JS deaktivert) und\/oder erschwerte Suchmaschinenoptimierung (Stichwort: Indizierbarkeit von Links in JS-Navigationen und Flash-Webseiten). Das alles war f\u00fcr mich bisher ein Grund, dass ich mich auf das Wesentliche konzentriert habe, also auf alles, was m\u00f6glich ist, ohne diese Nachteile in Kauf zu nehmen.<\/p>\n

Es hat sich jedoch zwischenzeitlich einiges getan und ich bin auf eine Reihe von M\u00f6glichkeiten gesto\u00dfen, den W\u00fcnschen meiner Kunden vielleicht doch mehr entgegenzukommen ohne dasss ich die Anforderungen, die mir wichtig sind, zu sehr zur\u00fcckschrauben muss. Es gibt Webseiten, auf denen Javasript-Effekte eingesetzt werden und die dennoch bedien- und benutzbar bleiben auch wenn JS per Browser deaktiviert wurde. <\/p>\n

Einige Fundst\u00fccke habe ich hier zusammengetragen:<\/p>\n

http:\/\/www.hotel-oxford.ro\/<\/a><\/h3>\n

\"oxford\"<\/p>\n

Diese Webseite wurde von www.desero.net\/en<\/a>, Webdesigner aus Rum\u00e4nien, erstellt. BTW: Es lohnt sich mal einen Blick in das Protofoilio zu werden – zum Neidischwerden ;-). Die Webseite benutzt f\u00fcr die Slides das Javascript-Framework Mootools<\/strong>. Das Ganze ist unobstrusive eingebaut – d.h. die Webseite bleibt bedien- und benutzbar, auch wenn JS dekativert ist. <\/p>\n

 <\/p>\n

http:\/\/jareddesign.com\/<\/a><\/h3>\n

\"jared\"
\nJared Christensen ist – wie es scheint – ein Multitalent aus Iowa, USA. Auch seine Webseite benutzt mootools<\/strong> um von einem zum n\u00e4chsten skip sanft hin\u00fcberzugleiten.<\/p>\n

 <\/p>\n

http:\/\/www.teamviget.com\/<\/a><\/h3>\n

\"vidget\"
\nTeamviget ist eine web consulting \/ design \/ development \/ marketing Firma mit mehreren Büros rund um Washington.DC und Durham. Auf der hier vorgstellten Webseite wird jQuery<\/strong> eingesetzt. <\/p>\n

 <\/p>\n

http:\/\/moofx.mad4milk.net\/<\/a><\/h3>\n

\"moo-fx\"
\nMoo.fx<\/strong> ist eine Javascript Bibliothek, die im framework mootools<\/strong> und prototype<\/strong> verwendet werden kann. Auf dieser Webseite kommt das „akkordeon“ zum Einsatz. BTW: Das Akkordeon ist standardm\u00e4\u00dfig im CMS Typolight integriert – aber dazu im Laufe des Jahres noch mehr.<\/p>\n

 <\/p>\n

http:\/\/www.78d.se\/<\/a><\/h3>\n

\"eklund\"
\nUnd so kann die Akkordeaon-technik auch aussehen: Mario Eklund ist Webdesigner aus Schweden und setzt es in seinem Portofolio ein.<\/p>\n

 <\/p>\n

Das w\u00e4ren mal ein paar Beispiele f\u00fcr den Anfang. Ich werde diesen Artikel aber wahrscheinlich fortlaufend erg\u00e4nzen, wenn ich noch andere Beispiele finde. Oder vielleicht habt ihr noch ein paar gute und interessante Beispiele? Es sollten aber unbedingt Webseiten sein, die auch dann noch bedien- und benutzbar sind, wenn JS deaktivert ist. Webseitenbespiele bei denen leider gar nichts mehr geht aber das daf\u00fcr sehr sch\u00f6n, gibt es genug. Zur Nachahmung ist das aber nicht so sehr zu empfehlen.<\/p>\n

One-Site <\/h3>\n

Bei einigen der hier vorgstellten Beispiele ist es offensichtlich, dass seiteninterne Skip-Links verwendet werden, bei anderen weniger oder h\u00e4ttet ihr bei der Oxford-Seite gedacht? So werden die Informationen f\u00fcr das menschliche Auge wohl proportioniert, das hei\u00dft: es gibt zu einem Thema immer nur eine kurze, schnell erfassbare Menge Text. Die Suchmaschine jedoch bekommt im Quelltext alle Informationen geballt auf einer Seite. Das finde ich sehr geschickt gemacht. <\/p>\n

Und hier noch ein Link zu einer umfangreichen Sammlung weiterer Beispiele von onesite-Webseiten<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Eines der Themen, denen ich mich 2009 verst\u00e4rkt widmen werde hei\u00dft Javascript, genauer gesagt: Javasript Frameworks und Bibliotheken. Geschickt eingesetzt muss die Verwendung von Javascript nicht um jeden Preis verdammt werden und bietet Vorteile wenn es um Imagewebseiten und die Aussenwirkung geht. In diesem Artikel stelle ich 5 Webseiten vor, in denen Javascript sinnvoll verwendet wird.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[14,51,241,338,339],"yst_prominent_words":[],"class_list":["post-1212","post","type-post","status-publish","format-standard","hentry","category-webdesign","tag-webdesign-2","tag-javascript","tag-javascripts","tag-onobstrusive","tag-slideshow"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/1212","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/comments?post=1212"}],"version-history":[{"count":1,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/1212\/revisions"}],"predecessor-version":[{"id":4025,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/1212\/revisions\/4025"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=1212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=1212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=1212"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=1212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}