IFD:Webprogrammierung MS - Revision history

Vuco1885: /* Verschiedene Endgeräte */

2010-03-29T14:44:53Z

Verschiedene Endgeräte

← Older revision		Revision as of 14:44, 29 March 2010
Line 202:		Line 202:

	[[Image:kommentarBB.jpg\|250px]]		[[Image:kommentarBB.jpg\|250px]]


			===Abschließend===

			Ich hätte nie gedacht, was alles für Probleme auftauchen könnten. Ich hatte keine Ahnung, wie viel Arbeit so eine Webseite macht. Wenn man jetzt durchs Netz surft, sieht man die Arbeit der Programmierer mit anderen Augen. Auf funktionierende Drop-Down-Menüs schiele ich besonders neidisch...;)
			Auch wenn heute, am 29.März'10 noch nicht alles perfekt steht, so habe ich doch sehr viel aus dieser Aufgabe mitnehmen können. Ich habe gelernt mit Photoshop zu arbeiten, dass Tüfteln Spaß machen kann, wie reich das Internet von Tutorien und Erklärungen für die undenkbarsten Probleme ist (jeder hatte sie schon mal..), wie typo3 funktioniert, das TemplaVoila Freund und Feind ist, der Fehler im Detail steckt und das Pixel wichtig sind, so klein sie sein mögen ;)



			=[http://www.haltestelle-kunst.org/ SCHAU'S DIR AN UND REISE MIT! ICH WÜNSCHE VIEL SPAß DABEI!]=

Vuco1885: /* 15.März'10 */

2010-03-29T14:27:52Z

15.März'10

← Older revision		Revision as of 14:27, 29 March 2010
Line 105:		Line 105:
	Des weiteren wurden Extensions installiert. Diese entsprechen bei typo3 z.B. den Plug-Ins bei WordPress.		Des weiteren wurden Extensions installiert. Diese entsprechen bei typo3 z.B. den Plug-Ins bei WordPress.
	Der geplante Koffer für die Links zu Freunden wurde eingefügt, landet aber manchmal links oben auf der Seite, statt rechts unten, da nun das Kommentar-Modul auf die rechte Hälfte der Seite gestellt wurde und den Koffer (darunter) scheinbar nach oben verschiebt.		Der geplante Koffer für die Links zu Freunden wurde eingefügt, landet aber manchmal links oben auf der Seite, statt rechts unten, da nun das Kommentar-Modul auf die rechte Hälfte der Seite gestellt wurde und den Koffer (darunter) scheinbar nach oben verschiebt.
	Die Kommentare stehen nun doch auf der rechten Seite, statt unter den Beiträgen, damit sie jederzeit gut zu sehen sind und es ein ~~leichtes~~ ist, einen Neuen zu hinterlassen. SO kommt den "Mitreisenden" die nötige Bedeutung zu. ~~Dafür~~ fallen allerdings die Aufzählungen "Neuste Kommentare" und "Neusten Beiträge" weg. Unter anderem, weil ich auf das Background-Problem gestoßen bin. Dadurch, dass ich ein Bild als bg habe, ist mir eine bestimmte Seitenlänge vorgegeben, außer ich lasse ihn sich wiederholen, was bisher nicht wirklich gut funktioniert hat. Deshalb habe ich mich entschieden, dass man die Seiten weiterblättern muss, bzw. dass ich als Autor dann einfach einen neuen Unterpunkt machen muss, den man über ein Untermenü erreichen kann. So könnte ich ein bspw. Projekt in verschiedene Phasen einteilen und jeder eine zuordnen. So braucht auch kein User meilenweit nach unten scrollen und kann genau den Stand des Projektes anpeilen, der ihn interessiert und gezielt einen Kommentar abgeben.		Die Kommentare stehen nun doch auf der rechten Seite, statt unter den Beiträgen, damit sie jederzeit gut zu sehen sind und es ein Leichtes ist, einen Neuen zu hinterlassen. SO kommt den "Mitreisenden" die nötige Bedeutung zu. Alles was mit Kommunikation und Aktion (seitens des Besuchers) zu tun hat ist somit auf der rechten Seite angesiedelt. Auch der Blog ist der einzige Menüpunkt der in den rechten Bereich eindringt. Neben praktischen Gründen, dass ich mir so Platz lasse für einen weiteren Punkt in Zukunft, ist die Anordnung dem neuen Konzept angepasst.
			Für das Kommentar-modul fallen allerdings die Aufzählungen "Neuste Kommentare" und "Neusten Beiträge" weg. Unter anderem, weil ich auf das Background-Problem gestoßen bin. Dadurch, dass ich ein Bild als bg habe, ist mir eine bestimmte Seitenlänge vorgegeben, außer ich lasse ihn sich wiederholen, was bisher nicht wirklich gut funktioniert hat. Deshalb habe ich mich entschieden, dass man die Seiten weiterblättern muss wenn überhaupt nötig, bzw. dass ich als Autor dann einfach einen neuen Unterpunkt machen muss, den man über ein Untermenü erreichen kann. So könnte ich ein bspw. Projekt in verschiedene Phasen einteilen und jeder eine zuordnen. So braucht auch kein User meilenweit nach unten scrollen und kann genau den Stand des Projektes anpeilen, der ihn interessiert und gezielt einen Kommentar abgeben.
	Das rechts oben platzierte Schild wird nun auch nicht mehr nur zwangsweise die Tochter- oder Schwestermenüpunkte anzeigen, sondern auch Links zu verwandten Themen, bzw. Artikeln zu denen ich die Leser weiterleiten möchte. Auch Links zu externen Seiten sind möglich. So fungiert das Schild, wie im wirklichen Leben, als Wegweiser und Entscheidungsfinder zugleich. Diese ganzen Links muss ich allerdings per Hand für jede Seite neu auswählen, eine Arbeit die sich meiner Meinung nach lohnt und zweckdienlich ist.		Das rechts oben platzierte Schild wird nun auch nicht mehr nur zwangsweise die Tochter- oder Schwestermenüpunkte anzeigen, sondern auch Links zu verwandten Themen, bzw. Artikeln zu denen ich die Leser weiterleiten möchte. Auch Links zu externen Seiten sind möglich. So fungiert das Schild, wie im wirklichen Leben, als Wegweiser und Entscheidungsfinder zugleich. Diese ganzen Links muss ich allerdings per Hand für jede Seite neu auswählen, eine Arbeit die sich meiner Meinung nach lohnt und zweckdienlich ist.

Vuco1885: /* Zusammenfassung */

2010-03-29T14:15:28Z

Zusammenfassung

← Older revision		Revision as of 14:15, 29 March 2010
Line 146:		Line 146:
	====1. Template Voila Templating====		====1. Template Voila Templating====

	Absolute Trennung zwischen Content und Darstellung. Mit nur einem einzigen Template wird diese ganze Website gesteuert.... und es hat nur 40 Zeilen HTML.		Absolute Trennung zwischen Content und Darstellung. Mit nur [http://www.haltestelle-kunst.org/fileadmin/templates/main/hsk-main.html einem einzigen Template] wird diese ganze Website gesteuert.... und es hat nur 40 Zeilen HTML.

	====2. "Sampled" Grundkonfiguration====		====2. "Sampled" Grundkonfiguration====
Line 152:		Line 152:
	Typo3 CMS ist mächtig und auch sehr kompliziert. Ich habe mir den Einstieg leichter gemacht, in dem die Grundkonfiguration des CMS einfach komplett von einer anderen Website "ausgeliehen" wurde, nämlich von http://www.bumbaumel.eu.		Typo3 CMS ist mächtig und auch sehr kompliziert. Ich habe mir den Einstieg leichter gemacht, in dem die Grundkonfiguration des CMS einfach komplett von einer anderen Website "ausgeliehen" wurde, nämlich von http://www.bumbaumel.eu.

	====3. Extensions ohne Ende per Click, Cut & Paste====		====3. [http://typo3.org/extensions/repository/ Extensions] ohne Ende per Click, Cut & Paste====

	Es sieht komplizierter aus, als es ist: search (macina_searchbox), Seite Verlinken (tipafriend), Drucken (kopiert direkt aus dieser Anleitung), bunte Social Bookmarking links (wt_socialbookmarks) mit freien Icons von überall, Kommentare (ve_guestbook). Alles konfiguriert nach der Cut&Paste-Methode. Und (fast) alles gestylt mit einer einzigen CSS-Datei. Auch kopiert von hier und mal von da...		Es sieht komplizierter aus, als es ist: search (macina_searchbox), Seite Verlinken (tipafriend), Drucken ([http://www.admin-wissen.de/eigene-tutorials/webentwicklung/typo3-workshop/fortgeschrittene-themen/typo3-usability/druckansicht-mit-typo3/ kopiert direkt aus dieser Anleitung]), bunte Social Bookmarking links (wt_socialbookmarks) mit freien Icons von überall, Kommentare (ve_guestbook). Alles konfiguriert nach der Cut&Paste-Methode. Und (fast) alles gestylt mit einer einzigen [http://www.haltestelle-kunst.org/fileadmin/templates/css/style.css CSS-Datei]. Auch kopiert von hier und mal von da...

	====4. Das Sorgenkind "Dynamisches Menu"====		====4. Das Sorgenkind "Dynamisches Menu"====

	Aber so einfach ging es natürlich nicht weiter. Die meiste Zeit wurde tatsächlich in ein (genauer zwei) nervige JavaScript-Menus investiert. Erst wurde mit der Anleitung von typo3wizard das Brainjar-Menu installiert. Nach vielen Stunden frustrierenden Rumprobierens sah es endlich einigermaßen cool aus und hat auch funktioniert... bis ich auf die Idee kam, die Seite herauszuzoomen. Hier ein Screenshot mit dem Bug.		Aber so einfach ging es natürlich nicht weiter. Die meiste Zeit wurde tatsächlich in ein (genauer zwei) nervige JavaScript-Menus investiert. Erst wurde mit der Anleitung von typo3wizard das [http://www.typo3wizard.com/de/snippets/menus/implementation-des-dhtml-menues-von-brainjarcom.html Brainjar-Menu] installiert. Nach vielen Stunden frustrierenden Rumprobierens sah es endlich einigermaßen [http://www.haltestelle-kunst.org/fileadmin/graphics/Picture_3.png cool] aus und hat auch funktioniert... bis ich auf die Idee kam, die Seite herauszuzoomen. [http://www.haltestelle-kunst.org/fileadmin/graphics/Picture_2.png Hier ein Screenshot mit dem Bug.]

	Da hier nicht die Idee war wochenlang in Javascript zu hacken (wie auch...), bin ich schnell umgestiegen auf "Tmenu Layers" von Typo3. Aber die Probleme hörten nicht auf, und falls Ihr diese Website mit Safari oder in einer hohen Auflösung zwischendurch mal angeschaut habt, werdet Ihr wissen wovon ich spreche. Mit FireFox auf meinem Notebook sah das Menü zeitweise super aus. Also sollte die Reise mit dem Javascript-Menus wohl-oder übel weitergehen....		Da hier nicht die Idee war wochenlang in Javascript zu hacken (wie auch...), bin ich schnell umgestiegen auf "Tmenu Layers" von Typo3. Aber die Probleme hörten nicht auf, und falls Ihr diese Website mit Safari oder in einer hohen Auflösung zwischendurch mal angeschaut habt, werdet Ihr wissen wovon ich spreche. Mit FireFox auf meinem Notebook sah das Menü zeitweise super aus. Also sollte die Reise mit dem Javascript-Menus wohl-oder übel weitergehen....

Vuco1885: /* Das Problem der verschiedenen Browser */

2010-03-29T14:01:03Z

Das Problem der verschiedenen Browser

← Older revision		Revision as of 14:01, 29 March 2010
Line 182:		Line 182:

	Die erste Idee war, dass das Problem am Font liegt, aber dieser und andere Versuche das Menu fehlerfrei laufen zu lassen scheiterte. Es musste ein gravierender Fehler vorliegen, den ich nicht beheben könnte, daher die Umstellung auf ein grafisches, sehr statisches Menü.		Die erste Idee war, dass das Problem am Font liegt, aber dieser und andere Versuche das Menu fehlerfrei laufen zu lassen scheiterte. Es musste ein gravierender Fehler vorliegen, den ich nicht beheben könnte, daher die Umstellung auf ein grafisches, sehr statisches Menü.
			Doch wie man oben sehen kann (Sorgenkind Dynamisches Menü) sind auch hier (noch) die Unterschiede sehr deutlich.

	===Verschiedene Endgeräte===		===Verschiedene Endgeräte===

Vuco1885: /* Verschiedene Endgeräte */

2010-03-29T13:57:29Z

Verschiedene Endgeräte

← Older revision		Revision as of 13:57, 29 March 2010
Line 197:		Line 197:
	[[Image:ohnekofferBB.jpg\|320px]] [[Image:menüBB.jpg\|320px]]		[[Image:ohnekofferBB.jpg\|320px]] [[Image:menüBB.jpg\|320px]]

	[[Image:~~kommentarBB~~.jpg\|320px]] [[Image:mitkofferBB.jpg\|320px]]		[[Image:linksBB.jpg\|320px]] [[Image:mitkofferBB.jpg\|320px]]

			[[Image:kommentarBB.jpg\|250px]]

Vuco1885: /* Verschiedene Endgeräte */

2010-03-29T13:53:21Z

Verschiedene Endgeräte

← Older revision		Revision as of 13:53, 29 March 2010
Line 195:		Line 195:
	Sollte die Seite auf anderen Smartphones/ Handys nicht so flüssig funktionieren, dann ist zu sagen, dass dies keine Seite ist, die darauf angewiesen ist mobil erreicht zu werden, da keine zwingend notwendigen oder dringenden Handlungen erfordert sind. Umso schöner ist es zu sehen, wie gut sie vom BlackBerry angezeigt wird. Ein I-Phone hatte ich leider nicht zur Verfügung. Ihr schon? Dann testet doch einfach mal die Seite und gebt Bescheid wie sie euch darauf gefallen hat!		Sollte die Seite auf anderen Smartphones/ Handys nicht so flüssig funktionieren, dann ist zu sagen, dass dies keine Seite ist, die darauf angewiesen ist mobil erreicht zu werden, da keine zwingend notwendigen oder dringenden Handlungen erfordert sind. Umso schöner ist es zu sehen, wie gut sie vom BlackBerry angezeigt wird. Ein I-Phone hatte ich leider nicht zur Verfügung. Ihr schon? Dann testet doch einfach mal die Seite und gebt Bescheid wie sie euch darauf gefallen hat!

	[[Image:ohnekofferBB.jpg\|320px]]		[[Image:ohnekofferBB.jpg\|320px]] [[Image:menüBB.jpg\|320px]]

			[[Image:kommentarBB.jpg\|320px]] [[Image:mitkofferBB.jpg\|320px]]

Vuco1885: /* Verschiedene Endgeräte */

2010-03-29T13:51:26Z

Verschiedene Endgeräte

← Older revision		Revision as of 13:51, 29 March 2010
Line 194:		Line 194:
	Ich habe ganz bewusst kein Flash auf der ganzen Seite verwendet, weil IPhones und das neue IPad kein Flash unterstützen.		Ich habe ganz bewusst kein Flash auf der ganzen Seite verwendet, weil IPhones und das neue IPad kein Flash unterstützen.
	Sollte die Seite auf anderen Smartphones/ Handys nicht so flüssig funktionieren, dann ist zu sagen, dass dies keine Seite ist, die darauf angewiesen ist mobil erreicht zu werden, da keine zwingend notwendigen oder dringenden Handlungen erfordert sind. Umso schöner ist es zu sehen, wie gut sie vom BlackBerry angezeigt wird. Ein I-Phone hatte ich leider nicht zur Verfügung. Ihr schon? Dann testet doch einfach mal die Seite und gebt Bescheid wie sie euch darauf gefallen hat!		Sollte die Seite auf anderen Smartphones/ Handys nicht so flüssig funktionieren, dann ist zu sagen, dass dies keine Seite ist, die darauf angewiesen ist mobil erreicht zu werden, da keine zwingend notwendigen oder dringenden Handlungen erfordert sind. Umso schöner ist es zu sehen, wie gut sie vom BlackBerry angezeigt wird. Ein I-Phone hatte ich leider nicht zur Verfügung. Ihr schon? Dann testet doch einfach mal die Seite und gebt Bescheid wie sie euch darauf gefallen hat!

			[[Image:ohnekofferBB.jpg\|320px]]

Vuco1885: /* Verschiedene Endgeräte */

2010-03-29T13:34:25Z

Verschiedene Endgeräte

← Older revision		Revision as of 13:34, 29 March 2010
Line 183:		Line 183:
	Die erste Idee war, dass das Problem am Font liegt, aber dieser und andere Versuche das Menu fehlerfrei laufen zu lassen scheiterte. Es musste ein gravierender Fehler vorliegen, den ich nicht beheben könnte, daher die Umstellung auf ein grafisches, sehr statisches Menü.		Die erste Idee war, dass das Problem am Font liegt, aber dieser und andere Versuche das Menu fehlerfrei laufen zu lassen scheiterte. Es musste ein gravierender Fehler vorliegen, den ich nicht beheben könnte, daher die Umstellung auf ein grafisches, sehr statisches Menü.

	====Verschiedene Endgeräte====		===Verschiedene Endgeräte===

	Das die Website schon allein je nach Browser unterschiedlich aussieht und dann auch noch je nach Version (v.a. bei Internet Explorer) konnten wir ja bereits eindeutig feststellen.		Das die Website schon allein je nach Browser unterschiedlich aussieht und dann auch noch je nach Version (v.a. bei Internet Explorer) konnten wir ja bereits eindeutig feststellen.
	Doch wie zeigt sich meine Seite beispielsweise auf Smartphones?		Doch wie zeigt sich meine Seite beispielsweise auf Mobil-Telefonen?

			Den Test habe ich mit einem BlackBerry gemacht.
			Durch die vielen großen Bilder ist die Ladezeit relativ lang, aber annehmbar.
			Zunächst wurden der Koffer und die Social-buttons nicht geladen (Koffer ersetzt durch Feld mit Aufschrift "Mitreisende"), doch nach ein paar weiteren Versuchen stellten auch sie kein Problem mehr dar.
			Zum ersten Mal machte das Menü keine Probleme und funktionierte einwandfrei. Kommentare können auch störungsfrei vom Handy aus geschrieben und versendet werden. Die Verlinkungen steuern die richtigen Seiten an und so kann man auch ohne Probleme die Videos auf YouTube erreichen und ansehen.
			Ich habe ganz bewusst kein Flash auf der ganzen Seite verwendet, weil IPhones und das neue IPad kein Flash unterstützen.
			Sollte die Seite auf anderen Smartphones/ Handys nicht so flüssig funktionieren, dann ist zu sagen, dass dies keine Seite ist, die darauf angewiesen ist mobil erreicht zu werden, da keine zwingend notwendigen oder dringenden Handlungen erfordert sind. Umso schöner ist es zu sehen, wie gut sie vom BlackBerry angezeigt wird. Ein I-Phone hatte ich leider nicht zur Verfügung. Ihr schon? Dann testet doch einfach mal die Seite und gebt Bescheid wie sie euch darauf gefallen hat!

Vuco1885: /* Das Problem der verschiedenen Browser */

2010-03-29T12:53:10Z

Das Problem der verschiedenen Browser

← Older revision		Revision as of 12:53, 29 March 2010
Line 173:		Line 173:
	===Das Problem der verschiedenen Browser===		===Das Problem der verschiedenen Browser===

	Alle meine ersten Menüs liefen über Java Script. Java Script wird immer durch den Browser berechnet. Ich denke, dass Internet Explorer, Opera oder Mozilla Fire Fox dass JavaScript alle unterschiedlich errechnet haben - sprich wo mein Menü positioniert ist usw. Deshalb kam es wohl zu den sehr unterschiedlichen Ausgabeweisen der Website.		Alle meine ersten Menüs liefen über Java Script. Java Script wird immer durch den Browser berechnet. Ich denke, dass Internet Explorer, Opera oder Mozilla Fire Fox dass JavaScript alle unterschiedlich errechnet haben - sprich wo mein Menü positioniert ist usw. Deshalb kam es wohl zu den sehr unterschiedlichen Ausgabeweisen der Website. Auch blieb immer ein Bug.

	[[Image:ScreenshotwebMozilla.jpg\|320px]]		[[Image:ScreenshotwebMozilla.jpg\|320px]]
Line 180:		Line 180:

	[[Image:Screenshotwebopera.jpg\|320px]]		[[Image:Screenshotwebopera.jpg\|320px]]

			Die erste Idee war, dass das Problem am Font liegt, aber dieser und andere Versuche das Menu fehlerfrei laufen zu lassen scheiterte. Es musste ein gravierender Fehler vorliegen, den ich nicht beheben könnte, daher die Umstellung auf ein grafisches, sehr statisches Menü.

			====Verschiedene Endgeräte====

			Das die Website schon allein je nach Browser unterschiedlich aussieht und dann auch noch je nach Version (v.a. bei Internet Explorer) konnten wir ja bereits eindeutig feststellen.
			Doch wie zeigt sich meine Seite beispielsweise auf Smartphones?

Vuco1885: /* 4. Das Sorgenkind "Dynamisches Menu" */

2010-03-29T12:30:48Z

4. Das Sorgenkind "Dynamisches Menu"

← Older revision		Revision as of 12:30, 29 March 2010
Line 160:		Line 160:
	Aber so einfach ging es natürlich nicht weiter. Die meiste Zeit wurde tatsächlich in ein (genauer zwei) nervige JavaScript-Menus investiert. Erst wurde mit der Anleitung von typo3wizard das Brainjar-Menu installiert. Nach vielen Stunden frustrierenden Rumprobierens sah es endlich einigermaßen cool aus und hat auch funktioniert... bis ich auf die Idee kam, die Seite herauszuzoomen. Hier ein Screenshot mit dem Bug.		Aber so einfach ging es natürlich nicht weiter. Die meiste Zeit wurde tatsächlich in ein (genauer zwei) nervige JavaScript-Menus investiert. Erst wurde mit der Anleitung von typo3wizard das Brainjar-Menu installiert. Nach vielen Stunden frustrierenden Rumprobierens sah es endlich einigermaßen cool aus und hat auch funktioniert... bis ich auf die Idee kam, die Seite herauszuzoomen. Hier ein Screenshot mit dem Bug.

	Da hier nicht die Idee war wochenlang in Javascript zu hacken, bin ich schnell umgestiegen auf "Tmenu Layers" von Typo3. Aber die Probleme hörten nicht auf, und falls Ihr diese Website mit Safari oder in einer hohen Auflösung zwischendurch mal angeschaut habt, werdet Ihr wissen wovon ich spreche. Mit FireFox auf meinem Notebook sah das Menü zeitweise super aus. Also sollte die Reise mit dem Javascript-Menus wohl-oder übel weitergehen....		Da hier nicht die Idee war wochenlang in Javascript zu hacken (wie auch...), bin ich schnell umgestiegen auf "Tmenu Layers" von Typo3. Aber die Probleme hörten nicht auf, und falls Ihr diese Website mit Safari oder in einer hohen Auflösung zwischendurch mal angeschaut habt, werdet Ihr wissen wovon ich spreche. Mit FireFox auf meinem Notebook sah das Menü zeitweise super aus. Also sollte die Reise mit dem Javascript-Menus wohl-oder übel weitergehen....
	Doch seit dem gab es nur weitere Probleme. Also: Java Script GOOD BYE! Wieder ein neues Menü musste her. Diesmal ist es ein statisches, grafisches Menü von typo3. Wenn Ihr es euch mit verschiedenen Browsern anschaut, könnt ihr die Arbeit sehen, die da noch auf mich wartet.		Doch seit dem gab es nur weitere Probleme. Also: Java Script GOOD BYE! Wieder ein neues Menü musste her. Diesmal ist es ein statisches, grafisches Menü von typo3. Wenn Ihr es euch mit verschiedenen Browsern anschaut, könnt ihr die Arbeit sehen, die da noch auf mich wartet.

← Older revision		Revision as of 13:57, 29 March 2010
Line 197:		Line 197:
	[[Image:ohnekofferBB.jpg\|320px]] [[Image:menüBB.jpg\|320px]]		[[Image:ohnekofferBB.jpg\|320px]] [[Image:menüBB.jpg\|320px]]

	[[Image:~~kommentarBB~~.jpg\|320px]] [[Image:mitkofferBB.jpg\|320px]]		[[Image:linksBB.jpg\|320px]] [[Image:mitkofferBB.jpg\|320px]]

			[[Image:kommentarBB.jpg\|250px]]