IFD:Webprogrammierung AV - Revision history

Alex V. at 13:11, 1 April 2010

2010-04-01T13:11:33Z

Alex V. at 12:58, 1 April 2010

2010-04-01T12:58:05Z

← Older revision		Revision as of 12:58, 1 April 2010
Line 32:		Line 32:


	Seite 1:		'''Seite 1:'''

	[[Image:welcome.jpg]]		[[Image:welcome.jpg]]
Line 40:		Line 40:


	Seite 2:		'''Seite 2:'''

	[[Image:filmsuche.jpg]]		[[Image:filmsuche.jpg]]
Line 49:		Line 49:


	Seite 3:		'''Seite 3:'''

	[[Image:filmdetails.jpg]]		[[Image:filmdetails.jpg]]
Line 58:		Line 58:


	Seite 4:		'''Seite 4:'''

	[[Image:film_eintragen.jpg]]		[[Image:film_eintragen.jpg]]
Line 67:		Line 67:


	Seite 5:		'''Seite 5:'''

	[[Image:filmübersicht.jpg]]		[[Image:filmübersicht.jpg]]

Alex V. at 12:56, 1 April 2010

2010-04-01T12:56:53Z

Show changes

Alex V. at 11:53, 30 March 2010

2010-03-30T11:53:39Z

← Older revision		Revision as of 11:53, 30 March 2010
Line 1:		Line 1:
			== '''Link:''' ==

			http://hundertneun.com/pomodaba/index.html

			http://hundertneun.com/pomodaba/index3.html (i-Frame-Version)

	== '''Idee:''' ==		== '''Idee:''' ==

Alex V. at 14:22, 25 January 2010

2010-01-25T14:22:36Z

← Older revision		Revision as of 14:22, 25 January 2010
Line 29:		Line 29:

	weitere Bilder folgen...		weitere Bilder folgen...

			Link zum existierenden, meiner Meinung nach sehr guten Filmdatenbank Programm:
			http://my-movie-database.de/

Alex V. at 19:21, 17 January 2010

2010-01-17T19:21:21Z

← Older revision		Revision as of 19:21, 17 January 2010
Line 1:		Line 1:
	'''Idee:'''		== '''Idee:''' ==

	Lokale Filmdatenbank, die alle Videoformate auf dem Rechner oder auf Wechseldatenträgern ''(Ext. HDD, UsB-Stick, ...)'' auslesen kann und browserbasierend "hübsch aufbereitet" darstellt.		Lokale Filmdatenbank, die alle Videoformate auf dem Rechner oder auf Wechseldatenträgern ''(Ext. HDD, UsB-Stick, ...)'' auslesen kann und browserbasierend "hübsch aufbereitet" darstellt.

	'''Umsetzung:'''		== '''Umsetzung:''' ==

	Das Auslesen der Dateien kann wohl nur durch eine Datenbank geschehen. Wenn alle relevanten Dateien ausgelesen wurden erhält man lediglich Informationen wie		Das Auslesen der Dateien kann wohl nur durch eine Datenbank geschehen. Wenn alle relevanten Dateien ausgelesen wurden erhält man lediglich Informationen wie
Line 15:		Line 15:
	Zudem wäre ein Rating, eine "Last viewed" und eine Vorschaufunktion ganz schön.		Zudem wäre ein Rating, eine "Last viewed" und eine Vorschaufunktion ganz schön.

	'''Problematik:'''		== '''Problematik:''' ==

	Vorab: Das "Projekt" sprengt wohl die Anforderungen an den Kurs. Ich werde mich zunächst auf einen "Dummy" konzentrieren, der exemplarisch und ohne Datenbank		Vorab: Das "Projekt" sprengt wohl die Anforderungen an den Kurs. Ich werde mich zunächst auf einen "Dummy" konzentrieren, der exemplarisch und ohne Datenbank
Line 24:		Line 24:
	so sieht das aus, weil das Interface ja auf diese Datenbankstrukturen passen muss.		so sieht das aus, weil das Interface ja auf diese Datenbankstrukturen passen muss.

	'''Skizze, etc:'''		== '''Skizze, etc:''' ==

	[[Image:preview_vogt.jpg]]		[[Image:preview_vogt.jpg]]

	weitere Bilder folgen...		weitere Bilder folgen...

Alex V.: Created page with ''''Idee:''' Lokale Filmdatenbank, die alle Videoformate auf dem Rechner oder auf Wechseldatenträgern ''(Ext. HDD, UsB-Stick, ...)'' auslesen kann und browserbasierend "hübsch …'

2010-01-17T19:19:07Z

Created page with ''''Idee:''' Lokale Filmdatenbank, die alle Videoformate auf dem Rechner oder auf Wechseldatenträgern ''(Ext. HDD, UsB-Stick, ...)'' auslesen kann und browserbasierend "hübsch …'

New page

'''Idee:'''

Lokale Filmdatenbank, die alle Videoformate auf dem Rechner oder auf Wechseldatenträgern ''(Ext. HDD, UsB-Stick, ...)'' auslesen kann und browserbasierend "hübsch aufbereitet" darstellt.

'''Umsetzung:'''

Das Auslesen der Dateien kann wohl nur durch eine Datenbank geschehen. Wenn alle relevanten Dateien ausgelesen wurden erhält man lediglich Informationen wie
Dateiname, Dateityp, Speicherort ''(Pfad)'', Größe, ... ''(Vgl. Ordnerstruktur und -informationen im Explorer)''. Inwiefern diese Informationen ausreichen um einen
Film eindeutig zu betiteln wird sich zeigen, vorallem weil Dateinamen in diesem Fall wohl nicht ausreichen, da diese oft unzureichend oder garnicht zutreffend sind.
Um neben diesen "Standart-Infos" nützliche weitere Angaben zu bekommen ''(Regie, Erscheinungsjahr, Filmplakat, Schauspieler, ...)'' und eine eindeutige Beschriftung zu ermöglichen, soll diese "lokale Datenbank" mit verfügbaren Online-Datenbanken abgeglichen werden ''(Vgl. imdb.com)''. Um eventuelle Ladezeiten und um die Datenbank auch offline verfügbar zu machen, sollen die online erworbenen Infos ebenfalls in die "Lokale Datenbank" eingefügt werden und lediglich bei neuerkannten Dateien und bestehender Internetverbindung ein Abgleich stattfinden.
Ich denke, dass mittels php ein Auslesen dieser Infos problemlos funktionieren kann und dann per html und css dargestellt werden können. Wichtig hierbei
ist eine Art Verschlagwortung ''(Tags)'', damit eine elementare Suchfunktion zur Verfügung gestellt werden kann. Es soll also möglich sein, nicht nur "stupide" nach
Filmtiteln zu suchen, sondern beispielsweise auch alle vorhandenen Filme nach Schauspieler, Jahr, Genre, ... mehr oder weniger zu listen.
Als besonderes Feature habe ich auch an eine Random-Funktion gedacht, die zufällig ''(vll. sogar mit Möglichkeit Tags auszuschließen)'' einen Film anbietet.
Zudem wäre ein Rating, eine "Last viewed" und eine Vorschaufunktion ganz schön.

'''Problematik:'''

Vorab: Das "Projekt" sprengt wohl die Anforderungen an den Kurs. Ich werde mich zunächst auf einen "Dummy" konzentrieren, der exemplarisch und ohne Datenbank
vorallem das Interface, am Beispiel von 5-10 Filmen aus verschiedenen Genres, zeigen soll.
Zudem muss eine Datenbank gefunden werden, die deutlich schlanker ist als die Üblichen, damit der Speicherbedarf so gering wie möglich gehalten werden kann.
Außerdem soll dieses ganze System, daher auch browserbasierend, auf allen Plattformen und vorallem, wie erwähnt, auf Wechselmedien funktionieren.
Abschließend muss ich noch sagen, dass noch viele, viele, vorallem technische Fragen im Raum stehen, so dass ich noch nicht sagen kann: So geht das alles,
so sieht das aus, weil das Interface ja auf diese Datenbankstrukturen passen muss.

'''Skizze, etc:'''

[[Image:preview_vogt.jpg]]

weitere Bilder folgen...

← Older revision		Revision as of 13:11, 1 April 2010
Line 10:		Line 10:
	Es handelt sich bei diesem Projekt um einen Testdummy, der weder mit später beschriebenen Datenbank ausgestattet ist, noch irgendwelche Funktionen (Menü, etc.) aufweist.		Es handelt sich bei diesem Projekt um einen Testdummy, der weder mit später beschriebenen Datenbank ausgestattet ist, noch irgendwelche Funktionen (Menü, etc.) aufweist.
	Der Grund ist folgender: Ich habe feststellen müssen, dass es deutlich schwerer wird eine Datenbank an ein bestehendes Design zu koppeln, als Datenbankfeatures mit einem Design zu versehen. Es wird also nötig sein, zuerst eine passende Datenbank zu finden und darauf basierend ein Layout zu gestalten.		Der Grund ist folgender: Ich habe feststellen müssen, dass es deutlich schwerer wird eine Datenbank an ein bestehendes Design zu koppeln, als Datenbankfeatures mit einem Design zu versehen. Es wird also nötig sein, zuerst eine passende Datenbank zu finden und darauf basierend ein Layout zu gestalten.
	Alle klickbaren und nötigen Links zur Navigation sind standartmäßig blau gefärbt und unterstrichen, was natürlich im Endprodukt verschwinden wird. Alle für die Zukunft angedachten Features, die jetzt vielleicht auf Grund der fehlenden Datenbank nicht eingebunden wurden, sind farblich gekennzeichnet.		Alle klickbaren und nötigen Links zur Navigation sind standartmäßig blau gefärbt und unterstrichen, was natürlich im Endprodukt verschwinden wird. Alle für die Zukunft angedachten Features, die jetzt vielleicht auf Grund der fehlenden Datenbank nicht eingebunden wurden, sind <span style="color: #00CD00;">farblich gekennzeichnet</span>.


Line 27:		Line 27:
	[[Image:layout.jpg]]		[[Image:layout.jpg]]

	Das Grundlayout ist dreigeteilt: Die Bereiche 1 und 3 bilden einen grafischen Rahmen (Filmstreifen) um den eigentlichen Inhaltsbereich 2. Diese drei div-Container werden in einem übergeordneten div-Container ausgerichtet (float:left), der zugleich alles horizontal zentriert. Die Größe dieser div-Box beträgt 960 x 600 px, eine mehr oder weniger gebräuchliche Auflösung, die weites gehend auf allen gängigen Monitoren ohne störende Scrollbalken funktioniert. Eine Auflösung von 800 x 600 px wurde bewusst nicht beachtet, da schätzungsweise nur etwa 10 – 15% der weltweiten PCs noch diese Auflösung bevorzugen. Die eigentliche Seite ist also statisch, die Hintergrundgrafik „wächst“ natürlich auflösungsabhängig mit.		Das Grundlayout ist dreigeteilt: Die Bereiche <span style="color: #FF0000;">'''1''' </span>und <span style="color: #FF0000;">'''3'''</span> bilden einen grafischen Rahmen (Filmstreifen) um den eigentlichen Inhaltsbereich <span style="color: #FF0000;">'''2'''</span>. Diese drei div-Container werden in einem <span style="color: #395ADE;">übergeordneten div-Container</span> ausgerichtet (float:left), der zugleich alles horizontal zentriert. Die Größe dieser div-Box beträgt 960 x 600 px, eine mehr oder weniger gebräuchliche Auflösung, die weites gehend auf allen gängigen Monitoren ohne störende Scrollbalken funktioniert. Eine Auflösung von 800 x 600 px wurde bewusst nicht beachtet, da schätzungsweise nur etwa 10 – 15% der weltweiten PCs noch diese Auflösung bevorzugen. Die eigentliche Seite ist also statisch, die Hintergrundgrafik „wächst“ natürlich auflösungsabhängig mit.
	Das Design soll einen Filmstreifen imitieren, den man vertikal im Browser auf- und abrollen kann. Um diesen Effekt zu erzeugen muss die Seite natürlich vertikal scrollbar sein, d.h. sie muss „länger“ als das Browserfenster sein. Aus diesem Grund wurden die Maße auf 960 x 3000 px erhöht und bei der i-Frame-Version der sichtbare Bereich wieder auf 960 x 600 px begrenzt, was einem Sinnabschnitt entspricht.		Das Design soll einen Filmstreifen imitieren, den man vertikal im Browser auf- und abrollen kann. Um diesen Effekt zu erzeugen muss die Seite natürlich vertikal scrollbar sein, d.h. sie muss „länger“ als das Browserfenster sein. Aus diesem Grund wurden die Maße auf 960 x 3000 px erhöht und bei der i-Frame-Version der sichtbare Bereich wieder auf 960 x 600 px begrenzt, was einem Sinnabschnitt entspricht.
	Diese Webseite besteht also aus nur einer .html-Seite, die man in Sinnabschnitte unterteilen kann. Prinzipiell entspricht also ein Sinnabschnitt einer Seite, die ich nun aufliste:		Diese Webseite besteht also aus nur einer .html-Seite, die man in Sinnabschnitte unterteilen kann. Prinzipiell entspricht also ein Sinnabschnitt einer Seite, die ich nun aufliste:
Line 36:		Line 36:
	[[Image:welcome.jpg]]		[[Image:welcome.jpg]]

	Dieser Sinnabschnitt ist sozusagen die Startseite. Hier wird der Nutzer begrüßt und erhält eine kurze Einführung. Zudem soll ein „Hilfe-Menü“ hier präsentiert werden, dass sich je nach Sinnabschnitt anpasst.		Dieser Sinnabschnitt ist sozusagen die Startseite. Hier wird der Nutzer begrüßt und erhält eine <span style="color: #00CD00;">kurze Einführung. Zudem soll ein „Hilfe-Menü“ hier präsentiert werden, dass sich je nach Sinnabschnitt anpasst.</span>
	Unterhalb des Begrüßungstextes findet man eine Übersicht der fünf Filme, die zuletzt ins System eingetragen wurden. Per Klick auf das Filmplakat gelangt man auf die entsprechende Detailansicht dieses Films. Der hier angedeutete Mouse-over-Effekt wird mit dem jquery-Effekt CSS Dock Menu (http://www.ndesign-studio.com/blog/css-dock-menu) ersetzt.		Unterhalb des Begrüßungstextes findet man eine Übersicht der fünf Filme, die zuletzt ins System eingetragen wurden. Per Klick auf das Filmplakat gelangt man auf die entsprechende Detailansicht dieses Films. <span style="color: #00CD00;">Der hier angedeutete Mouse-over-Effekt wird mit dem jquery-Effekt CSS Dock Menu (http://www.ndesign-studio.com/blog/css-dock-menu) ersetzt.</span>


Line 46:		Line 46:
	Dieser Sinnabschnitt beschreibt die Suchmaske. Die Suchfunktion hängt sehr eng mit der Datenbankstruktur zusammen, daher soll exemplarisch gezeigt werden, was mögliche Suchattribute sein können. Ebenfalls noch nicht sicher ist, ob der Nutzer seine Suche frei eingeben darf/muss (siehe Titel, Regie, Cast) oder alles per drop-down (siehe Genre, Jahr, Land) geregelt werden kann.		Dieser Sinnabschnitt beschreibt die Suchmaske. Die Suchfunktion hängt sehr eng mit der Datenbankstruktur zusammen, daher soll exemplarisch gezeigt werden, was mögliche Suchattribute sein können. Ebenfalls noch nicht sicher ist, ob der Nutzer seine Suche frei eingeben darf/muss (siehe Titel, Regie, Cast) oder alles per drop-down (siehe Genre, Jahr, Land) geregelt werden kann.
	Das Suchergebnis mit der höchsten Übereinstimmung wird direkt rechts neben das Suchfeld angezeigt und verlinkt. Das Suchergebnis stellt nur minimalste Informationen bereit; der Film kann aber durch die angegebenen Links genauer betrachtet werden.		Das Suchergebnis mit der höchsten Übereinstimmung wird direkt rechts neben das Suchfeld angezeigt und verlinkt. Das Suchergebnis stellt nur minimalste Informationen bereit; der Film kann aber durch die angegebenen Links genauer betrachtet werden.
	Die Suchergebnisse mit weniger Relevanz werden unter der eigentlichen Suchmaske ebenfalls aufgeführt, so dass beispielsweise Filme ähnlichen Titels, mit gleichen Schauspielern, aus dem gleichen Jahr oder vom gleichen Regisseur ebenfalls per Klick aufrufbar sind.		Die Suchergebnisse mit weniger Relevanz werden unter der eigentlichen Suchmaske ebenfalls aufgeführt, so dass beispielsweise Filme ähnlichen Titels, mit gleichen Schauspielern, aus dem gleichen Jahr oder vom gleichen Regisseur ebenfalls <span style="color: #00CD00;">per Klick</span> aufrufbar sind.


Line 55:		Line 55:
	Dieser Sinnabschnitt zeigt eine Detailansicht eines ausgewählten Films. Neben dem Filmplakat werden elementare Informationen wie Titel, Genre und Handlung angeboten. Zusätzlich hat der User auch die Möglichkeit sich durch den passenden Trailer zu informieren und erhält zudem tiefergehende Angaben wie die Besetzungsliste.		Dieser Sinnabschnitt zeigt eine Detailansicht eines ausgewählten Films. Neben dem Filmplakat werden elementare Informationen wie Titel, Genre und Handlung angeboten. Zusätzlich hat der User auch die Möglichkeit sich durch den passenden Trailer zu informieren und erhält zudem tiefergehende Angaben wie die Besetzungsliste.
	Festzuhalten ist noch, dass der Link „Film ansehen“ eine externe Verknüpfung zu einem MediaPlayer beschreibt; der Film wird also nicht im Browser geöffnet.		Festzuhalten ist noch, dass der Link „Film ansehen“ eine externe Verknüpfung zu einem MediaPlayer beschreibt; der Film wird also nicht im Browser geöffnet.
	Angedeutet durch den Link „Fantasy“ sollen alle hier aufgeführten Punkte, bis auf „Handlung“, verlinkt sein, so dass man beispielsweise bei Klick auf „Genre“ --> „Fantasy“ alle Filme dieses Genres aufgelistet bekommt oder bei Klick auf einen Schauspieler alle Filme, in denen er mitwirkt. Auch hier wieder das bekannte Problem der serverseitigen Anbindung.		<span style="color: #00CD00;">Angedeutet durch den Link „Fantasy“ sollen alle hier aufgeführten Punkte, bis auf „Handlung“, verlinkt sein, so dass man beispielsweise bei Klick auf „Genre“ --> „Fantasy“ alle Filme dieses Genres aufgelistet bekommt oder bei Klick auf einen Schauspieler alle Filme, in denen er mitwirkt. Auch hier wieder das bekannte Problem der serverseitigen Anbindung</span>.


Line 62:		Line 62:
	[[Image:film_eintragen.jpg]]		[[Image:film_eintragen.jpg]]

	Dieser Sinnabschnitt bietet die Möglichkeit Filme manuell in die Datenbank einzutragen. Für den Fall, dass das Backend Filme von Speichermedien falsch oder gar nicht automatisch erkennt, hat der Benutzer hier die Möglichkeit Filme eigenhändig hinzuzufügen. Diese Methode ist sicherlich bei einer Fülle von Dateien recht aufwendig und zeitraubend, aber auch hier gilt wieder, dass das Datenbanksystem bestmöglich ausgewählt werden muss, damit eine manuelle Eintragung ein Sonderfall bleibt.		Dieser Sinnabschnitt bietet die Möglichkeit Filme manuell in die Datenbank einzutragen. Für den Fall, dass das Backend Filme von Speichermedien falsch oder gar nicht automatisch erkennt, hat der Benutzer hier die Möglichkeit Filme eigenhändig hinzuzufügen. <span style="color: #00CD00;">Diese Methode ist sicherlich bei einer Fülle von Dateien recht aufwendig und zeitraubend, aber auch hier gilt wieder, dass das Datenbanksystem bestmöglich ausgewählt werden muss, damit eine manuelle Eintragung ein Sonderfall bleibt.</span>
	Die Eintragungsmaske orientiert sich am bekannten Suchfeld, erweitert durch mögliche Angaben von URLs, beispielsweise von imdb (http://www.imdb.de), die vorhandene Filmdetails dann importieren.		Die Eintragungsmaske orientiert sich am bekannten Suchfeld, erweitert durch mögliche Angaben von URLs, beispielsweise von imdb (http://www.imdb.de), die vorhandene Filmdetails dann importieren.
	Unterhalb der Eintragungsmöglichkeiten befindet sich eine Aussicht auf kommende Neuerscheinungen. Diese Neuerscheinungen sollen genau so präsentiert werden wie die bereits eingetragene Filme im System, dürfen natürlich nicht als solche aufgeführt werden (siehe Seite 5).		Unterhalb der Eintragungsmöglichkeiten befindet sich eine Aussicht auf kommende Neuerscheinungen. <span style="color: #00CD00;">Diese Neuerscheinungen sollen genau so präsentiert werden wie die bereits eingetragene Filme im System, dürfen natürlich nicht als solche aufgeführt werden</span> (siehe Seite 5).


Line 72:		Line 72:

	Dieser Sinnabschnitt listet alle vorhandenen Filme auf und soll so vor allem dem Nutzer, der sich ohne fixe Absichten einen Film aussuchen möchte, losgelöst von Genre, Jahr, etc., eine Übersicht bieten.		Dieser Sinnabschnitt listet alle vorhandenen Filme auf und soll so vor allem dem Nutzer, der sich ohne fixe Absichten einen Film aussuchen möchte, losgelöst von Genre, Jahr, etc., eine Übersicht bieten.
	Alle Filme sind alphabetisch aufgeführt und lassen sich per Klick auf einen Anfangsbuchstaben begrenzen. Per Klick auf ein Filmplakat oder den Filmtitel springt die Seite zur Detailansicht (siehe Seite 3).		Alle Filme sind alphabetisch aufgeführt und lassen sich <span style="color: #00CD00;">per Klick</span> auf einen Anfangsbuchstaben begrenzen. Per Klick auf ein Filmplakat oder den Filmtitel springt die Seite zur Detailansicht (siehe Seite 3).