Web-Vorlage für Fotoschau

EB · Beitrag von EB » Mi Nov 19, 2003 21:50

Hallo Homepage-Bastler,

habe mal eine Vorlage für eine Web-Fotoschau erstellt. Das Ergebnis kann
man hier anschauen:

http://home.t-online.de/home/benfer.e/fotoshow.htm

Soll eine Alternative zum Output des Web-Assistenten darstellen.

Programmiertechnische Eigenschaften:
- nur ein HTML-File für beliebig viele Bilder
- Seitenlayout mittels CSS (keinerlei Tabellen

)
- Steuerung der Fotoschau mittels Javascript

Einschränkung: wegen dem TV-Schnickschnack müssen die Bilder alle gleich groß sein.

Wenn Interesse besteht, stelle ich die Vorlage natürlich gern zur
Verfügung (z.B. Schiwagos HP; 271KB).

Beitrag von **Steffen Binas** » Do Nov 20, 2003 8:12

Ist die Seite mit dem Web-Assistenten entstanden? Wenn nicht, dann möchte ich nur den Hinweis geben, das solcherlei Ausgabe mit dem Web-Assistent sehr wohl möglich sind. Man müsste nur eine entsprechende Vorlage erstellen. Wer dazu Lust hat, dem hilft vielleicht ein Anhaltspunkt: Wenn man sich die Thumbnailseite als Anfang nimmt: Dort werden schließlich auch alle Bilder auf einer Seite dargestellt. Es ist also nach diesem Vorbild ohne weiteres möglich, aus diesen Dateinamen nicht eine Tabellenstruktur zu bauen, sondern das Java-Script-Array zu füllen.

EB · Beitrag von EB » Do Nov 20, 2003 21:15

Hallo Herr Binas,

die Seite ist nicht mit dem Web-Assistenten entstanden, sondern mit einem
normalen (HTML)Texteditor.

Das solch eine Ausgabe mit dem Web-Assistenten nicht möglich sein soll
habe ich nicht behauptet.
Ich bitte um Vergebung, wenn meine Äußerung so interpretiert wurde.

Habe nur den Output der beigefügten Vorlagen gemeint

Hier wird nun ein Problem deutlich, was vielleicht auch andere Interessierte
betrifft (oder doch nur mich alleine

):

nach dem Durchlesen der doch recht umfangreichen Beschreibung zum
Web-Assistenten habe ich in erster Linie die Erkenntnis gewonnen, dass
die Erstellung einer ganz neuen Vorlage nicht trivial ist, und wahrscheinlich
viel Zeit in Anspruch nehmen wird (mal von einfachen Modifikationen der
bestehenden Vorlagen abgesehen).

Außerdem habe ich das Problem, dass ich nicht abschätzen kann, ob sich
die von mir gewünschte Funktionalität mit dem Assistenten tatsächlich
automatisieren läßt. Ob es hier irgendwelche grundlegenden Einschränkungen
gibt, kann ich der Beschreibung nicht entnehmen.
Ausprobieren ist bei so einem Werkzeug natürlich eine sehr hilfreiche
Methode (man lernt enorm), aber wenn man z.B. nach 3 Tagen feststellen
sollte, dass sich die Ziele gar nicht erreichen lassen ...

Vielleicht gibt es ja noch ein paar Tricks und Kniffe von AS zu diesem Thema.

Werde mich in den kommenden langen Winterabenden mal mit dem
Web-Assistenten beschäftigen.

Beitrag von **Steffen Binas** » Fr Nov 21, 2003 9:43

Das solch eine Ausgabe mit dem Web-Assistenten nicht möglich sein soll
habe ich nicht behauptet.
Ich bitte um Vergebung, wenn meine Äußerung so interpretiert wurde.
Habe nur den Output der beigefügten Vorlagen gemeint

Ich konnte mir ja nur nicht sicher sein, dass Sie sich nicht schon die Arbeit gemacht haben, tiefer in die Webvorlagen einzusteigen. Das es geht, war als Hinweis gemeint, um Ihnen die Vorlagen schmackhaft zu machen und natürlich die Möglichkeit zu geben, zukünftig solche Webseiten mit einem Klick zu erstellen.

Die Vorlagen sind in der Tat sehr komplex, dafür aber vielseitig und für den Normalen Anwender, der sie ja nur verwendet, gut konfigurierbar.

Die Komplexität der Vorlagen ist aber nur der erste Blick. Auf den zweiten Blick zeigt sich, wie wenig Arbeit das doch alles macht. Schauen Sie mal in den Ordner "HTML modules". Dort sind die Einzelteile der Vorlagen enthalten. Eine XML-Datei beschreibt dann nur noch, wie die Einzelteile zusammengesetzt sind. Außerdem sind dort dann schon Voreinstellungen belegt. Diese Belegung macht die XML-Dateien etwas größer, aber das muss man nicht per Hand schreiben, sondern kann es vom Assistent ausfüllen lassen.
Und damit Bilder (z.B. ein Hinterundbild) zusammen mit der Vorlage weitergeben werden können, kann alles zusammen als ZIP-Datei verpackt werden.

Ich denke, dass ein kurzes Beispiel möglich ist. Mal sehen, was sich machen lässt.

Beitrag von **Steffen Binas** » Fr Nov 21, 2003 10:54

Ich habe mal ein Minibeispiel verfasst. Es besteht nur aus 2 kurzen Dateien. Was dabei herauskommt, sind ganz einfache Webseiten, die nur die Bilder und einen Weiter/Zurück-Link enthalten.

Also man benötigt die XML-Datei. "GanzEinfach.xml"

Code: Alles auswählen

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- 
Generelle Anmerkung
*******************

Viele Werte werden beim Erstellen der Vorlage einfach leergelassen. Sie werden 
nachher komfortabel im Web-Assistent eingestellt. Wenn die Vorlage vom 
Assistenten abgespeichert wird, werden alle Einstellungen automatisch 
eingetragen.

-->
<diashowhtmldesign>
  <!-- Ein Header muss sein, kann aber leer gelassen werden -->
  <header>
  </header>

  <pictures>

    <!-- Einstellungen für die großen Bilder --> 
    <picturelist>
      <name>pictures</name>
    </picturelist>

  </pictures>
  <module>
    <!-- HTML-Modul einbinden --> 
    <name>SimpleSeite</name>
    <path>HTML modules</path>
  </module>
</diashowhtmldesign>

Und wird noch das zugehörige HTML-Modul benötigt ("simpleseite.htm", im Unterordner "HTML Modules"):

Code: Alles auswählen

<!-- TemplateBegin -->
<!-- repeat maxCount="%picturecount" index="index" -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<img width="%picturewidth" height="%pictureheight" src="%picture" alt="%text" border=0>
<br>

[<a href="%previouspage">voriges Bild</a>] [<a href="%nextpage">nächstes Bild</a>]

</body>
</html>
<!-- end repeat -->
<!-- TemplateEnd -->

Beitrag von **Steffen Binas** » Fr Nov 21, 2003 11:02

Noch ein Hinweis:

Wird jetzt das HTML-Modul wiefolgt geändert, werden alle Bilder auf einer Seite dargestellt. Konkret hat sich der Befehlt "repeat" in die Seiten verschoben.

Code: Alles auswählen

<!-- TemplateBegin -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<!-- repeat maxCount="%picturecount" index="index" -->
<img width="%picturewidth" height="%pictureheight" src="%picture" alt="%text" border=0><br>
<!-- end repeat -->

</body>
</html>
<!-- TemplateEnd -->

Hier kann man sehen, wie der Assistent arbeitet. Enthält das Modul modul folgendes:

Code: Alles auswählen

<!-- repeat maxCount="%picturecount" index="index" -->
<html>
  ...
</html> 
<!-- end repeat -->

So werden lauter Einzelseiten erzeugt. Wird das Repeat innerhalb verwendet, entsteht nur eine einzige Seite (Schachtelungen sind möglich).

Code: Alles auswählen

<html>
  <!-- repeat maxCount="%picturecount" index="index" -->
    ...
  <!-- end repeat -->
</html>

Hypopotamus · Beitrag von **Hypopotamus** » Fr Nov 21, 2003 19:30

Hallo Herr Binas,
ich habe schon mal versucht mit dem Webassistenten eigene Vorlagen zu machen. Habe auch eifrig das Handbuch gelesen, aber letztlich irgendwann aufgegeben. Ich denke man muß schon einiges über XML etc. verstehen, um da etwas auf die Reihe zu bekommen.
VG Claudia

RoadRunner · Beitrag von **RoadRunner** » Fr Nov 21, 2003 21:49

Hallo Herr Binas

Vielen Dank für die detaillierte Erklärung. Ich hab auch schon erfolglos versucht, den Aufbau des Ganzen an Hand eines mitgelieferten Beispiels und des Handbuchs zu verstehen und musste ebenfalls aufgeben.

Aber vielleicht war der Ansatz einfach falsch und man sollte, wie von Ihnen dargestellt, ganz klein beginnen und wenn mans kapiert hat, weitere Komplexität hinzufügen. Ihr Beispiel scheint mir so weit mal jedenfalls logisch...

Wenn ich dazu komme, werde ich übers Wochenende mal versuchen, ob ich EBs Fernsehapparat hinkriege

Beitrag von **Steffen Binas** » Sa Nov 22, 2003 11:58

Der Fernsehr funktioniert schon. Die Arbeit habe ich EB schon abgenommen und ihm die Datei per eMail geschickt. Allerdings ist dabei ein kleiner Fehler im Web-Assistent aufgefallen (das resevierte Wort %picture:# ging nicht) , sodass die Vorlage erst richtig mit der nächsten Version funktioniert.

Die XML-Datei kann wie im Minibeispiel sein, das HTML-Modul sieht dann einfach so aus (nur zwei Stellen beinhalten etwas Code):

Code: Alles auswählen

     <!-- repeat maxCount="%picturecount" index="index" -->imgs[%pictureindex - 1] = "%picture";
     <!-- end repeat -->

und

Code: Alles auswählen

  <div id="tvcontent"><form NAME=picform><a><img name=slideshow width=500 height=330 src="%picture:1"></a></form></div>

komplett sieht es dann so aus:

Code: Alles auswählen

<!-- TemplateBegin -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   <!-- Style Sheet mit allen Layout-Informationen laden -->
   <LINK REL=stylesheet TYPE="text/css" HREF="%stylesheets\fernseher.css">

   <!-- Fotoschau-Ablaufsteuerung -->
   <script LANGUAGE="JavaScript">
     <!--
     var n = 0;
     var imgs = new Array();     

     <!-- repeat maxCount="%picturecount" index="index" -->imgs[%pictureindex - 1] = "%picture";
     <!-- end repeat -->

     n_max = imgs.length-1;
     function next_slide()
       {
       n++;
       if(n>n_max)
         {
         n = 0;
         }
       document.picform.slideshow.src = imgs[n];
       }
     function prev_slide()
       {
       n--;
       if(n<0)
         {
         n = n_max;
         }
       document.picform.slideshow.src = imgs[n];
       }
     //-->
   </script>

   <!-- Verlassen dieser Site; Rückkehr zum Ausgangspunkt-->

   <script LANGUAGE="JavaScript">
     <!--
      function leave_show()
       {
       history.back();
       }
     //-->
   </script>
  </head>


  <body style="">
  <!-- Inhalt der Seite -->
  <div id="tv"> <img SRC="%images\tv.gif" HEIGHT=512 WIDTH=658 USEMAP="#buttons" BORDER=0 HEIGHT=111 WIDTH=634>

                <map NAME="buttons">
                <area SHAPE="RECT" COORDS="196,424,259,451" HREF="JavaScript:prev_slide()";>
                <area SHAPE="RECT" COORDS="402,424,465,451" HREF="JavaScript:next_slide()">
                <area SHAPE="RECT" COORDS="534,470,575,494" HREF="JavaScript:leave_show()">
                </map></div>

  <div id="tvcontent"><form NAME=picform><a><img name=slideshow width=500 height=330 src="%picture:1"></a></form></div>

  </body>

</html><!-- TemplateEnd -->

EB · Beitrag von EB » Sa Nov 22, 2003 12:52

... auch an dieser Stelle vielen Dank an AS für die Bemühungen

... werde mich genau wie RoadRunner nun am Wochenende hinsetzen, und
versuchen, mal alles nachzuvollziehen

-------------------------------------------------

ich habe schon mal versucht mit dem Webassistenten eigene Vorlagen zu machen. Habe auch eifrig das Handbuch gelesen, aber letztlich irgendwann aufgegeben.

Wäre das nicht noch ein brauchbares Thema für's User-Treffen:

Vorlagen erstellen für den Web-Assistenten

RoadRunner · Beitrag von **RoadRunner** » Sa Nov 22, 2003 14:56

Grüezi Herr Binas

Ich möchte mich diesem Dank für Ihre Arbeit und Ausführungen gerne anschliessen.

Da kann ich mir ja zum Einarbeiten alle Zeit der Welt lassen

. Nein, natürlich habe ich schon ein bisschen reingeschaut und wider besseren Wissens nochmals versucht eine Vorlage mit Vorschau- und normalen Bildern zu verstehen. Aber da verstehe ich die Schleifengestaltung und Abhängigkeiten überhaupt noch nicht: Warum ist es z.B. möglich, eine grosse äussere Schleife über die Hauptbilder zu machen und danach irgend wo tief drinnen eine einzelne neue Datei ("Einfache_Tabelle.htm") mit den Schleifen über die Vorschaubildern zu erstellen? Na ja, vielleicht komme ich ja noch drauf.

Eine Verständnisfrage hätte ich allerdings an Herrn Binas: Beim TV-Beispiel würde ich z.B. versuchen, die Positionsangaben dynamisch, d.h. über Parameter einstellbar zu machen. Dazu müsste aber auch die .css-Datei in den Mechanismus eingebunden werden können. Da man aber in der XML-Datei keine Dateieindungen angibt, scheint das nicht möglich zu sein?! Stimmt das, oder irre ich mich?

Fürs Usertreffen wäre das sicher ein Thema, nur hatte ich bis jetzt den Eindruck, dass es nur bei ganz Wenigen überhaupt ein solches ist...?!

Ein schönes Wochenende

Roadrunner

Beitrag von **Steffen Binas** » Sa Nov 22, 2003 16:01

Aber da verstehe ich die Schleifengestaltung und Abhängigkeiten überhaupt noch nicht: Warum ist es z.B. möglich, eine grosse äussere Schleife über die Hauptbilder zu machen und danach irgend wo tief drinnen eine einzelne neue Datei ("Einfache_Tabelle.htm") mit den Schleifen über die Vorschaubildern zu erstellen? Na ja, vielleicht komme ich ja noch drauf.

Das ist ganz einfach: Intern erstellt der Assistent eine riesige Datei, die erst später in einzelne HTML-Seiten zerschnitten wird. Alles zwischen <html> und </html> wird später eine Datei. Wenn man also eine Schleife baut, die eine Wiederholung von <html> ... </html> erzeugt hat man viele Dateien (Einzelbilderseiten) als Ergebnis, kommt in der Wiederholung kein <html> ... </html> vor, bleibt es bei einer Datei (Thumbnailseite).

Eine Verständnisfrage hätte ich allerdings an Herrn Binas: Beim TV-Beispiel würde ich z.B. versuchen, die Positionsangaben dynamisch, d.h. über Parameter einstellbar zu machen. Dazu müsste aber auch die .css-Datei in den Mechanismus eingebunden werden können. Da man aber in der XML-Datei keine Dateieindungen angibt, scheint das nicht möglich zu sein?! Stimmt das, oder irre ich mich?

Spontan fällt mir jetzt keine Lösung ein, das CSS-File zu ändern, ABER: die Stylesheets müssen nicht in einer getrennten CSS-Datei liegen. Man kann sie direkt in die HTML-Datei schreiben: <div style="...."></div> ist doch möglich.
Ehrlich gesagt, würde ich eine Lösung über Tabellen vorziehen, eine absolute Positionierung ist nicht sehr flexibel.

RoadRunner · Beitrag von **RoadRunner** » Sa Nov 22, 2003 18:22

Steffen Binas hat geschrieben:Das ist ganz einfach: Intern erstellt der Assistent eine riesige Datei, die erst später in einzelne HTML-Seiten zerschnitten wird. Alles zwischen <html> und </html> wird später eine Datei. Wenn man also eine Schleife baut, die eine Wiederholung von <html> ... </html> erzeugt hat man viele Dateien (Einzelbilderseiten) als Ergebnis, kommt in der Wiederholung kein <html> ... </html> vor, bleibt es bei einer Datei (Thumbnailseite).

Aaa-ja, dann schaue ich mir das mal unter diesem Aspekt an...

Steffen Binas hat geschrieben:Ehrlich gesagt, würde ich eine Lösung über Tabellen vorziehen, eine absolute Positionierung ist nicht sehr flexibel.

Da bin ich ganz Ihrer Meinung, da ja doch jeder Benutzer mit einer unterschiedlich grossen Browseroberfläche arbeitet. War wie deklariert auch nur eine Verständnisfrage und kam mir spontan im Zusammenhang mit der Ausgangslage in den Sinn.

EB · Beitrag von EB » Sa Nov 22, 2003 23:28

RoadRunner hat geschrieben:
Steffen Binas hat geschrieben:Ehrlich gesagt, würde ich eine Lösung über Tabellen vorziehen, eine absolute Positionierung ist nicht sehr flexibel.
Da bin ich ganz Ihrer Meinung, da ja doch jeder Benutzer mit einer unterschiedlich grossen Browseroberfläche arbeitet.

Nun, ob absolute oder relative Positionierungen/Größen (oder ein Mix von
beidem) mag auch von Aufbau und Inhalt der Web-Präsentation mibestimmt
werden. Wenn ich das Erscheinungsbild beim Betrachter genau festlegen
will, erreiche ich das am besten mit einer absoluten Verankerung aller
Elemente (ein prominentes Beispiel dürfte Focus Online sein).
In vielen Fällen kommt ein Mix von beidem zum Einsatz, wie auch bei AS. Die
Breite des äußeren Frames bleibt konstant, während der Inhalt der inneren
Seite sich dehnen und stauchen läßt.
Allerdings: warum sollen jetzt wieder Tabellen dafür verwendet werden

Ich habe mal das Beispiel mit dem Fernseher in eine relative Positionierung
umgewandelt (ohne Tabellen

, aber auch ohne Anspruch auf den optimalen
Lösungsweg

). Es kommt jedoch in diesem Beispiel eine der
Stärken von CSS zum Tragen, nämlich die Kaskadierung von Format-
definitionen.

Im HTML-Code muss die Formatbezeichnung für die angezeigten Bilder
geändert werden.

Code: Alles auswählen

  <DIV id="tv" class="content"><FORM NAME=picform><A><img name=slideshow src="show00n.jpg"></A></Form></DIV>

Im Style Sheet ändern sich die Formate für Fernseher und Bilder wie folgt:

Code: Alles auswählen

#tv {
    position: relative;
    width: 658px;
    height: 512px;
    top: 20%;
    left: 20%;
    }

#tv.content {
    margin-left:  79px;
    margin-top: -438px;
    width: 500px;
    height: 330px;
           }

Mehr nicht.

... eigentlich wollte ich mich ja heute mit dem Web-Assisten beschäftigen

... naja, morgen ist auch noch ein Tag ...

EB · Beitrag von EB » So Nov 23, 2003 13:50

Zwischenerkenntnis I (XML Steuerdatei)

... ich habe das Mini-Beispiel hergenommen, mit dem Web-Assistenten ein
paar Einstellungen getätigt und dann das Ganze als neue Vorlage abgespeichert

Mein Verständnis zur XML-Steuerdatei läßt sich so zusammenfassen:
-----------------------------------------------------------------------------------

- man benötigt zu Beginn eine XML-Steuerdatei, welche nur eine vorläufige
Datei ist, da der Web-Assistent alle Einstellungen die man dort vornimmt am
Ende automatisch in die Steuerdatei einträgt

- es entsteht dann in der Vorlage eine neue Steuerdatei, die immer design.xml heißt

- als Basis für die vorläufige Datei reicht das einfache Beispiel aus; editieren
muss ich (nur) den Bereich <module> wo festgelegt wird, welche HTML-
Bausteine alle benötigt werden; alles andere trägt der Web-Assistent ein

- benötige ich nur einen HTML-Baustein ist es ganz einfach; ich muss nur
diesen referenzieren; bei mehreren müssen eventuelle Abhängigkeiten
berücksichtigt werden (Kaskadenbildung)

- ich kann an dieser Stelle dem HTML-Baustein einen Zahlenwert für eine
eventuell dort vorhandene Variable übergeben;

... so weit - so gut ...

Dann habe ich da noch ein paar Fragen:

- in der Hilfe wird erklärt, dass ein Eigenschaftsname vom Typ 'editableregion'
sein kann; wie erkenne ich den Typ eines Eigenschaftsnamens

wo wird der Typ festgelegt

- in der Hilfe wird im Kapitel 'Vier Schritte zur eigenen Vorlage' im 4. Schritt
von einem Button 'Eigene Vorlage testen' gesprochen; ich sehe nur den
Button 'Eigene Vorlage laden'; ist dieser gemeint, oder sehe ich Ihn nicht
wegen meiner Windows Schriftgröße

... wird fortgesetzt ...

Beitrag von **Steffen Binas** » So Nov 23, 2003 16:07

- in der Hilfe wird erklärt, dass ein Eigenschaftsname vom Typ 'editableregion'
sein kann; wie erkenne ich den Typ eines Eigenschaftsnamens
wo wird der Typ festgelegt

In den HTML-Modulen werden die Eigenschaften samt Typ festgelegt.

Da steht z.B. im Modul

Code: Alles auswählen

<!-- property name="Seiteninhalt" type="editableregion" -->

...

&seiteninhalt;

...

Wo &seiteninhalt; steht wird nun der Seiteninhalt eingefügt. Was der Seiteninhalt konkret ist (also welches HTML Modul dort eingefügt wird), wird durch die XML-Steuerdatei festgelegt.

- in der Hilfe wird im Kapitel 'Vier Schritte zur eigenen Vorlage' im 4. Schritt
von einem Button 'Eigene Vorlage testen' gesprochen; ich sehe nur den
Button 'Eigene Vorlage laden'; ist dieser gemeint, oder sehe ich Ihn nicht
wegen meiner Windows Schriftgröße

Genau der Button "Eigene Vorlage laden" ist gemeint.

RoadRunner · Beitrag von **RoadRunner** » So Nov 23, 2003 20:35

Ok, denke das ist klar. Nun glaube ich auch die Standard-Vorlage mit den Thumbnails und Bildern zu verstehen. Naja, wenigstens beinahe:

Wenn ich Felder aus dem Bereich der Bilder in der Thumbnail-Schleife verwende (z.B. %text), bringts das System offenbar durcheinander, auch (oder gerade), wenn ich mit %picture dafür sorge, dass der Zähler mitgeführt wird. Jedenfalls stimmen dann die Links nicht mehr...

RoadRunner · Beitrag von **RoadRunner** » So Nov 23, 2003 20:59

Die Liste von eb kann ich wie folgt ergänzen:

XML-Steuerdatei:

- Die XML-Datei bestimmt, aus welchen Modulen eine "editableRegion" zusammengesetzt ist und kann Standardwerte von Variablen ersetzen.
- Einer "editableRegion" können mehrere Module zugeordnet werden. Diese werden, so fern die "editableRegion" in einer HTM-Datei aufgerufen wird, in der Reihenfolge gem. XML-Datei ausgeführt.

HTM-Dateien:

- Die HTM-Dateien sind Textbausteine und bestimmen ihren Teil der Seitengestaltung und die Stelle an dem eine "editableRegion" eingesetzt wird. Ausserdem sind Wiederholungsfunktionen möglich. Variablen werden hier deklariert und können mit einem Standardwert initialisiert werden.
- Der <html>-Einleitungs-Tag muss vor der Schleife kommen, wenn mehrere Seiten erstellt werden müssen und danach, wenn nur eine Seite erscheinen soll (siehe auch Hinweis von Herrn Binas weiter oben).
- Eine Repeat-Schleife geht nie weiter, als bis zum letzten (Vorschau-)Bild. Bei verschachtelten Schleifen werden alle beendet, wenn das letzte Bild erreicht ist.