Interaktivität für Webpräsentation

webdiva · 31. Jan. 2011

Hallo zusammen!

Ich arbeite gerade an der folgenden Seite, wo es um die Präsentation eines technischen Themas, nämlich Mikrochips, geht:
Website-Link

Der erste Durchlauf (Grundaufbau) ist vorbei. Jetzt kommt der 2.te Teil, nämlich die Erhöhung der Interaktivät für den Benutzer.
Dabei habe ich mir die folgenden Ideen ausgedacht:

1) Interaktive Switching-Elemente: An den Seiten 1.5, 1.6, 1.7 kommen Lichtschalter vor. Die 2 Bilddarstellungen "Ein" und "Aus" sollen durch einen "Schalterklick" ersetzt werden. Wie könnte das funktionieren?
Kann ich mit dieser kleinen Simulation auch AND und OR Gatter realisieren?

2) Zoom slider: Schauen wir beispielsweise die Animation 2.9 an:
Momentan werden 5 Zoomansichten/Bilder der Reihe nach abgespielt. Die neue Idee ist, dass ein Slider die 5 Zoomansichten repräsentiert und dass beim Bewegen des Schalters die zu zoomende Region markiert/'highlighted' wird und dann gezoomt angezeigt.
Dazu habe ich mir ein cooles Skript angeschaut: Skript-Link

3) Sichtbuttons (am unteren Ende): Was auch noch attraktiv wirken könnte, ist wenn ein bestimmtes Thema in verschiedenen Ansichten dargestellt werden könnte, also beispielswise wird eine Schaltung in den folgenden Alternativansichten angezeigt: 1)Transistorlayout, 2) Transistor-level Schema, 3) VHDL code, 4) Simulationswellen

So - das wär's von meiner kreativen Seite.
Ich hoffe von euch auf Verbesserungs-/Erweiterungsvorschläge zu bekommen, bzw. Ansätze um die Ideen zu implementieren (Free Online-Scripts).

Alle Anmerkungen (Kritik/Komplimente, etc.) sind herzlich willkommen :icon7:

Bieber · 01. Feb. 2011

ohne JS geht auf deiner Seite nichts, bzw. sie sieht echt mies aus! das muss geändert werden...

schwarzer Hintergrund und weiße Schrift mag für dich persönlich vielleicht angenehm sein, aber viele finden das einfach nur anstrengend und ätzend.... warum muss es denn ein schwarzer Hintergrund sein? passt auch nicht so wirklich zum Thema

jspit · 01. Feb. 2011

Ich hab erstmal nach einem Menü gesucht und wie ich zu schnell zu den Seiten 1.5 .. komme. Aha, nach einer Kunstpause bewegt sich da unten etwas, und es kommt eine neue Seite. Da kann man bestimmt raufklicken..Autsch, jetzt bin ich schon bei 2.6 gelandet.
So etwa könnte es einen normalen Internetnutzer ergehen, der sich über Mikrochips informieren will. Mal ernsthaft über die Zielgruppe nachdenken !
Was das Menü betrifft würde schon ein simpler Tooltip über den Punkten helfen.

webdiva · 01. Feb. 2011

schwarzer Hintergrund und weiße Schrift mag für dich persönlich vielleicht angenehm sein, aber viele finden das einfach nur anstrengend und ätzend.... warum muss es denn ein schwarzer Hintergrund sein? passt auch nicht so wirklich zum Thema

Schwarz-weiss Kombination habe ich aufgrund des Kontrasts ausgewählt. Es ist klar lesbar.
Hättest du einen besseren Vorschlag?

Ich hab erstmal nach einem Menü gesucht und wie ich zu schnell zu den Seiten 1.5 .. komme. Aha, nach einer Kunstpause bewegt sich da unten etwas, und es kommt eine neue Seite. Da kann man bestimmt raufklicken..Autsch, jetzt bin ich schon bei 2.6 gelandet.
So etwa könnte es einen normalen Internetnutzer ergehen, der sich über Mikrochips informieren will. Mal ernsthaft über die Zielgruppe nachdenken !

Es ist ja schliesslich auch eine Webpräsentation. Die Slides müssen sich automatisch abändern. Dazu kommt die Eigenschaft dazu, dass der Benutzer die Präsentation auch manuell durchgehen kann.
Was genau würdest du ändern und wie?

webdiva · 01. Feb. 2011

Ich habe zu Punkt 2) Zoom folgendes Skript gefunden:

Link

Ich habe nun das .js und das .css File in eine Probe-HTML Datei eingebunden, doch mit welcher Funktion rufe ich nun das Javascript File auf?

Junkee[] · 01. Feb. 2011

kannst du nicht lesen?

webdiva · 01. Feb. 2011

Junkee[] schrieb:
kannst du nicht lesen?

Ich nehme an, dass man das hier eingeben muss:

$("#zoom01").gzoom({sW: 300,
sH: 225,
lW: 1400,
lH: 1050,
lighbox : false
});

Aber ich weiss nicht wie. Das kann man definitiv nicht so in eine HTML Datei hineinschreiben.

Junkee[] · 01. Feb. 2011

http://de.selfhtml.org/javascript/index.htm

webdiva · 01. Feb. 2011

Ok, also es steht, dass die folgenden Dateien nötig sind:
- jquery 1.3.2 (habe ich via Google API eingebunden)
- ui.core.js (Wo finde ich diese Datei?)
- ui.slider.js (Wo finde ich diese Datei?)
- jquery.gzoom.js (habe ich im lokalen Speicher)

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type="text/javascript" src="jquery.gzoom.js"></script>

<script type="text/javascript">
$("#zoom01").gzoom({sW: 300,
sH: 225,
lW: 1400,
lH: 1050,
lighbox : false
});

$(".zoom_no_lbox").gzoom({sW: 300,
sH: 225,
lW: 1024,
lH: 768,
lightbox: true
});

$("#zoom04").gzoom({sW: 300,
sH: 225,
lW: 1024,
lH: 768,
lightbox: true,
zoomIcon: 'images/gtk-zoom-in.png'
});

</script>

Junkee[] · 01. Feb. 2011

die Dateien kannst du doch googeln!

webdiva · 01. Feb. 2011

Junkee[] schrieb:
die Dateien kannst du doch googeln!

Also, ich habe die Dateien von dieser Page hier runtergeladen (Hoffe, es sind die richtigen).
Link

Der Code sieht folgendermassen aus:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type="text/javascript" src="jquery.gzoom.js"></script>
<script type='text/javascript' src='jquery.ui.core.js'></script>
<script type='text/javascript' src='jquery.ui.slider.js'></script>

<script type="text/javascript">
$("#zoom01").gzoom({sW: 300,
sH: 225,
lW: 1400,
lH: 1050,
lighbox : false
});

$(".zoom_no_lbox").gzoom({sW: 300,
sH: 225,
lW: 1024,
lH: 768,
lightbox: true
});

$("#zoom04").gzoom({sW: 300,
sH: 225,
lW: 1024,
lH: 768,
lightbox: true,
zoomIcon: 'images/gtk-zoom-in.png'
});

</script>

Es funktioniert aber trotzdem nichts!! Vor allem hat es in der .js Datei nicht mal ein Feld, wo man den Namen der Bilddatei spezifizieren kann!!

Bieber · 01. Feb. 2011

die jquery-Version die du einbindest ist veraltet! Aber die anderen JS-Dateien sind möglicherweise schon aktuell?! --> version missmatch

und: http://forum.jswelt.de/javascript-faq/48897-finde-fehlerkonsole.html

webdiva · 01. Feb. 2011

Bieber schrieb:
die jquery-Version die du einbindest ist veraltet! Aber die anderen JS-Dateien sind möglicherweise schon aktuell?! --> version missmatch

Danke für den Hinweis!
Habe den neuen Link auf folgender Seite gefunden und eingebunden
"<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js'></script>"

Bieber schrieb:
und: http://forum.jswelt.de/javascript-faq/48897-finde-fehlerkonsole.html

Folgende Errors erhalten. Er scheint die JQuery Datei doch nicht zu akzeptieren?

Error: jQuery is not defined
Source File: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js
Line: 17

Error: jQuery is not defined
Source File: file:///jquery.gzoom.js
Line: 17

Error: jQuery is not defined
Source File: file:///jquery.ui.core.js
Line: 308

Error: jQuery is not defined
Source File: file:///query.ui.slider.js
Line: 682

Error: $ is not defined
Source File: file:///test.html
Line: 11

Junkee[] · 01. Feb. 2011

dann ist jQuery nicht (richtig) eingebunden...

webdiva · 01. Feb. 2011

<html>
<head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js'></script>
<script type="text/javascript" src="jquery.gzoom.js"></script>
<script type='text/javascript' src='jquery.ui.core.js'></script>
<script type='text/javascript' src='jquery.ui.slider.js'></script>

<script type="text/javascript">
$("#zoom01").gzoom({sW: 300,
sH: 225,
lW: 1400,
lH: 1050,
lighbox : false
});

$(".zoom_no_lbox").gzoom({sW: 300,
sH: 225,
lW: 1024,
lH: 768,
lightbox: true
});

$("#zoom04").gzoom({sW: 300,
sH: 225,
lW: 1024,
lH: 768,
lightbox: true,
zoomIcon: 'images/gtk-zoom-in.png'
});

</script>

<link type="text/css" href="jquery.gzoom.css" rel="stylesheet" />
<link type="text/css" href="jquery.ui.core.css" rel="stylesheet" />
<link type="text/css" href="jquery.ui.slider.css" rel="stylesheet" />

</head>
<body>


</body>
</html>

Ich sehe hier drin keinen Fehler. So schwierig ist das Einbinden ja wohl nicht. Kann jemand diesen Code oben eingeben und schauen, ob da etwas kommt?

Junkee[] · 01. Feb. 2011

Du bindest jQuery nicht ein.

webdiva · 01. Feb. 2011

Ich habe folgende Spezifizierung im gzoom.js File gefunden:

/*!
* jQuery gzoom 0.1
*
* Requires:
* jQuery v1.3.2 or later
* jQuery ui.core.js v.1.7.1
* jQuery ui.slider.js v.1.7.1
*
*/

Deshalb habe ich jetzt jQuery Version 1.3.2 eingebunden und ui.core.js und ui.slider.js für jQuery v.1.7.1 runtergeladen und alles eingebunden.
Hier ist der Code:

HTML:

<html>
<head>

	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
	<script type="text/javascript" src="jquery.gzoom.js"></script>
	<script type='text/javascript' src='ui.core.js'></script>
	<script type='text/javascript' src='ui.slider.js'></script>

	<script type="text/javascript">
	$("#zoom01").gzoom({sW: 300,
                    sH: 225,
                    lW: 1400,
                    lH: 1050, 
                    lighbox : false
                    });
    

	$(".zoom_no_lbox").gzoom({sW: 300,
                          sH: 225,
                          lW: 1024,
                          lH: 768, 
                          lightbox: true
                         });
			    

	$("#zoom04").gzoom({sW: 300,
                    sH: 225,
                    lW: 1024,
                    lH: 768, 
                    lightbox: true, 
                    zoomIcon: 'images/gtk-zoom-in.png'
                    });
			    
	</script>


	<link type="text/css" href="jquery.gzoom.css" rel="stylesheet" />
	<link type="text/css" href="ui.core.css" rel="stylesheet" />
	<link type="text/css" href="ui.slider.css" rel="stylesheet" />

</head>
<body>		 

</body>
</html>

Jetzt hat alles mit der Versionkompatibilität geklappt --> keine Fehlermeldung bekommen!

Nochmals zur alten Frage: Ich finde nirgends eine Stelle im .js File um den Namen der Bilddatei einzugeben.
Kein Wunder erscheint nichts auf der Webpage!

kkapsner · 01. Feb. 2011

zoomIcon?

webdiva · 02. Feb. 2011

<html>
<head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type="text/javascript" src="jquery.gzoom.js"></script>
<script type='text/javascript' src='ui.core.js'></script>
<script type='text/javascript' src='ui.slider.js'></script>

<script type="text/javascript">
$("#zoom01").gzoom({sW: 300,
sH: 225,
lW: 1400,
lH: 1050,
lighbox : false
});

$(".zoom_no_lbox").gzoom({sW: 300,
sH: 225,
lW: 1024,
lH: 768,
lightbox: true
});

$("#zoom04").gzoom({sW: 300,
sH: 225,
lW: 1024,
lH: 768,
lightbox: true,
zoomIcon: 'kendwa_big.jpg'
});

</script>

<link type="text/css" href="jquery.gzoom.css" rel="stylesheet" />
<link type="text/css" href="ui.core.css" rel="stylesheet" />
<link type="text/css" href="ui.slider.css" rel="stylesheet" />

</head>
<body>

</body>
</html>

Habe jetzt bei zoomIcon einen gültigen Bildnamen eingegeben.
Es erscheint immer noch nichts!

kkapsner · 02. Feb. 2011

Fehlerkonsole?
Testlink?

Interaktivität für Webpräsentation

New member

New member

Lounge-Member

New member

New member

Lounge-Member

New member

Lounge-Member

New member

Lounge-Member

New member

New member

New member

Lounge-Member

New member

Lounge-Member

New member

Super Moderator

New member

Super Moderator