IFD:WebApps/Julien Simshäuser - Revision history

Max: /* Lösung */

2011-05-12T18:12:39Z

Lösung

← Older revision		Revision as of 18:12, 12 May 2011
Line 7:		Line 7:
	Es wurde ein Wordpress Theme gestaltet und programmiert, das den Anforderungen gerecht wird.		Es wurde ein Wordpress Theme gestaltet und programmiert, das den Anforderungen gerecht wird.

	Startseite		=== Startseite ===
	* Es werden immer die Projektkategorien unterstrichen, die dem jeweiligen Thumbnail zugehörig sind, wenn man mit der Maus darüber fährt.		* Es werden immer die Projektkategorien unterstrichen, die dem jeweiligen Thumbnail zugehörig sind, wenn man mit der Maus darüber fährt.
	* Das Gestaltungsraster passt sich der Größe des Browserfensters an.		* Das Gestaltungsraster passt sich der Größe des Browserfensters an.
	* Durch Javascript wird davon gebrauch gemacht, dass aktuelle Browser je nach Mausposition verschiedene visuelle Spielereien möglich machen.		* Durch Javascript wird davon gebrauch gemacht, dass aktuelle Browser je nach Mausposition verschiedene visuelle Spielereien möglich machen.

	===Content Bereich===		=== Content Bereich ===
	* Wenn man auf ein Thumbnail geklickt hat, besteht die Möglichkeit, nähere Infos zu der Arbeit zu lesen, wenn man über die Überschrift mit der Maus fährt. Hier kommt auch ein Facebook Like-Button zum Vorschein.		* Wenn man auf ein Thumbnail geklickt hat, besteht die Möglichkeit, nähere Infos zu der Arbeit zu lesen, wenn man über die Überschrift mit der Maus fährt. Hier kommt auch ein Facebook Like-Button zum Vorschein.
	* Die Bilder im Contentbereich ordnen sich nach einem in JQuery und CSS programmierten mathematischen Gestaltungssystem an. Somit ist je nach Größe des Browserfensters die ideale Komposition des Inhaltes gewährleistet.		* Die Bilder im Contentbereich ordnen sich nach einem in JQuery und CSS programmierten mathematischen Gestaltungssystem an. Somit ist je nach Größe des Browserfensters die ideale Komposition des Inhaltes gewährleistet.

	=== Information / Kontakt Bereich===		=== Information / Kontakt Bereich ===
	* Ein kurzer Text, der die persönlichen Stärken als Gestalter hervorhebt.		* Ein kurzer Text, der die persönlichen Stärken als Gestalter hervorhebt.
	* Implementierung eines Twitter Feed.		* Implementierung eines Twitter Feed.

Max at 18:12, 12 May 2011

2011-05-12T18:12:02Z

← Older revision		Revision as of 18:12, 12 May 2011
Line 1:		Line 1:
	=Portfolio Website / Julien Simshäuser=		=Portfolio Website / Julien Simshäuser=


	==Problem==		==Problem==

	Es muss eine Portfolio Webseite erstellt werden, die die persönlichen Stärken als Gestalter deutlich macht. Außerdem sollte sie schnell und einfach bedienbar und zeitgemäß gestaltet sein. Neue Projekte müssen schnell eingetragen werden können.		Es muss eine Portfolio Webseite erstellt werden, die die persönlichen Stärken als Gestalter deutlich macht. Außerdem sollte sie schnell und einfach bedienbar und zeitgemäß gestaltet sein. Neue Projekte müssen schnell eingetragen werden können.
	Der Inhalt der Seite sollte idealer Weise mit sozialen Netzwerken verknüpft sein und auf verschiedenen Geräten erreichbar sein.		Der Inhalt der Seite sollte idealer Weise mit sozialen Netzwerken verknüpft sein und auf verschiedenen Geräten erreichbar sein.


	==Lösung==		==Lösung==

	Es wurde ein Wordpress Theme gestaltet und programmiert, das den Anforderungen gerecht wird.		Es wurde ein Wordpress Theme gestaltet und programmiert, das den Anforderungen gerecht wird.


	Startseite		Startseite

	* Es werden immer die Projektkategorien unterstrichen, die dem jeweiligen Thumbnail zugehörig sind, wenn man mit der Maus darüber fährt.		* Es werden immer die Projektkategorien unterstrichen, die dem jeweiligen Thumbnail zugehörig sind, wenn man mit der Maus darüber fährt.
	* Das Gestaltungsraster passt sich der Größe des Browserfensters an.		* Das Gestaltungsraster passt sich der Größe des Browserfensters an.
	* Durch Javascript wird davon gebrauch gemacht, dass aktuelle Browser je nach Mausposition verschiedene visuelle Spielereien möglich machen.		* Durch Javascript wird davon gebrauch gemacht, dass aktuelle Browser je nach Mausposition verschiedene visuelle Spielereien möglich machen.

			===Content Bereich===
	Content Bereich

	* Wenn man auf ein Thumbnail geklickt hat, besteht die Möglichkeit, nähere Infos zu der Arbeit zu lesen, wenn man über die Überschrift mit der Maus fährt. Hier kommt auch ein Facebook Like-Button zum Vorschein.		* Wenn man auf ein Thumbnail geklickt hat, besteht die Möglichkeit, nähere Infos zu der Arbeit zu lesen, wenn man über die Überschrift mit der Maus fährt. Hier kommt auch ein Facebook Like-Button zum Vorschein.
	* Die Bilder im Contentbereich ordnen sich nach einem in JQuery und CSS programmierten mathematischen Gestaltungssystem an. Somit ist je nach Größe des Browserfensters die ideale Komposition des Inhaltes gewährleistet.		* Die Bilder im Contentbereich ordnen sich nach einem in JQuery und CSS programmierten mathematischen Gestaltungssystem an. Somit ist je nach Größe des Browserfensters die ideale Komposition des Inhaltes gewährleistet.

			=== Information / Kontakt Bereich===
	Information / Kontakt Bereich

	* Ein kurzer Text, der die persönlichen Stärken als Gestalter hervorhebt.		* Ein kurzer Text, der die persönlichen Stärken als Gestalter hervorhebt.
	* Implementierung eines Twitter Feed.		* Implementierung eines Twitter Feed.
Line 34:		Line 23:

	==Techniken==		==Techniken==
			* [[HTML]]
	* HTML		* [[CSS]]
	* CSS		* [[JavaScript]], JQuery, Plugins: Easing, Color, Vgrid
	* ~~Javascript~~, JQuery, Plugins: Easing, Color, Vgrid
	* Wordpress, Plugins: custom-field-template, duplicate-post, twitter-for-wordpress, youtube-feeder		* Wordpress, Plugins: custom-field-template, duplicate-post, twitter-for-wordpress, youtube-feeder


	==Prozess==		==Prozess==

	~~<br clear="all"/>~~
	===Erste Scribbles===		===Erste Scribbles===
	[[File:Scribbble.jpg\|thumb\|left\|Erste Scribbles]]		[[File:Scribbble.jpg\|thumb\|left\|Erste Scribbles]]
			<br clear="all"/>

	~~<br clear="all"/>~~
	===Erste Photoshop Entwürfe===		===Erste Photoshop Entwürfe===
	[[File:Hauptseite.jpg\|thumb\|left\|Hauptseite]]<br clear="all"/>		[[File:Hauptseite.jpg\|thumb\|left\|Hauptseite]]<br clear="all"/>
	[[File:Content.jpg\|thumb\|left\|Content]]		[[File:Content.jpg\|thumb\|left\|Content]]
	[[File:Information.jpg\|thumb\|left\|Information]]		[[File:Information.jpg\|thumb\|left\|Information]]
			<br clear="all"/>


	~~<br clear="all"/>~~
	===Finale Webseite===		===Finale Webseite===

	http://vimeo.com/20814600		http://vimeo.com/20814600
	Passwort: "webapps"		Passwort: "webapps"

	<br clear="all"/>		<br clear="all"/>

Max: /* Quellen */

2011-05-12T18:10:20Z

Quellen

← Older revision		Revision as of 18:10, 12 May 2011
Line 63:		Line 63:

	==Quellen==		==Quellen==
	[http://www.google.com]google.com		* [http://www.google.com google.com]
	[http://www.jquery.com]jquery.com		* [http://www.jquery.com jquery.com]
	[http://www.wordpress.org]wordpress.org		* [http://www.wordpress.org wordpress.org]
	[http://www.github.com]github.com		* [http://www.github.com github.com]
	[http://www.stackoverflow.com]stackoverflow.com		* [http://www.stackoverflow.com stackoverflow.com]
	[http://www.cyberduck.ch]cyberduck.ch		* [http://www.cyberduck.ch cyberduck.ch]
	[http://www.barebones.com/products/textwrangler]~~textwrangler~~		* [http://www.barebones.com/products/textwrangler textwrangler]

Mm: /* Prozess */

2011-05-04T11:35:17Z

Prozess

← Older revision		Revision as of 11:35, 4 May 2011
Line 43:		Line 43:
	==Prozess==		==Prozess==

			<br clear="all"/>
	===Erste Scribbles===		===Erste Scribbles===
	[[File:Scribbble.jpg\|thumb\|left\|Erste Scribbles]]		[[File:Scribbble.jpg\|thumb\|left\|Erste Scribbles]]

			<br clear="all"/>
	===Erste Photoshop Entwürfe===		===Erste Photoshop Entwürfe===
	[[File:Hauptseite.jpg\|thumb\|left\|Hauptseite]]		[[File:Hauptseite.jpg\|thumb\|left\|Hauptseite]]<br clear="all"/>
	[[File:Content.jpg\|thumb\|left\|Content]]		[[File:Content.jpg\|thumb\|left\|Content]]
	[[File:Information.jpg\|thumb\|left\|Information]]		[[File:Information.jpg\|thumb\|left\|Information]]


			<br clear="all"/>
	===Finale Webseite===		===Finale Webseite===

	http://vimeo.com/20814600		http://vimeo.com/20814600
	Passwort: "webapps"		Passwort: "webapps"

			<br clear="all"/>

	==Quellen==		==Quellen==

Juliensimshauser: /* Lösung */

2011-03-09T02:24:19Z

Lösung

← Older revision		Revision as of 02:24, 9 March 2011
Line 10:		Line 10:
	==Lösung==		==Lösung==

	Es wurde ein Wordpress Theme gestaltet und programmiert, ~~dass~~ den Anforderungen gerecht wird.		Es wurde ein Wordpress Theme gestaltet und programmiert, das den Anforderungen gerecht wird.


Line 32:		Line 32:
	* Implementierung eines Flickr Foto Feed.		* Implementierung eines Flickr Foto Feed.
	* Mobile Video Diary: Umprogrammierung eines youtube Feed Plugins für Wordpress mit der Youtube Player API: Die neusten Handy-Youtube-Uploads werden automatisch auf der Webseite eingebunden (loop, autoplay, mute).		* Mobile Video Diary: Umprogrammierung eines youtube Feed Plugins für Wordpress mit der Youtube Player API: Die neusten Handy-Youtube-Uploads werden automatisch auf der Webseite eingebunden (loop, autoplay, mute).


	==Techniken==		==Techniken==

Juliensimshauser: /* Portfolio Website / Julien Simshäuser */

2011-03-09T02:21:38Z

Portfolio Website / Julien Simshäuser

← Older revision		Revision as of 02:21, 9 March 2011
Line 15:		Line 15:
	Startseite		Startseite

	– Es werden immer die Projektkategorien unterstrichen, die dem jeweiligen Thumbnail zugehörig sind, wenn man mit der Maus darüber fährt.		* Es werden immer die Projektkategorien unterstrichen, die dem jeweiligen Thumbnail zugehörig sind, wenn man mit der Maus darüber fährt.
	– Das Gestaltungsraster passt sich der Größe des Browserfensters an.		* Das Gestaltungsraster passt sich der Größe des Browserfensters an.
	– Durch Javascript wird davon gebrauch gemacht, dass aktuelle Browser je nach Mausposition verschiedene visuelle Spielereien möglich machen.		* Durch Javascript wird davon gebrauch gemacht, dass aktuelle Browser je nach Mausposition verschiedene visuelle Spielereien möglich machen.


	Content Bereich		Content Bereich

	– Wenn man auf ein Thumbnail geklickt hat, besteht die Möglichkeit, nähere Infos zu der Arbeit zu lesen, wenn man über die Überschrift mit der Maus fährt. Hier kommt auch ein Facebook Like-Button zum Vorschein.		* Wenn man auf ein Thumbnail geklickt hat, besteht die Möglichkeit, nähere Infos zu der Arbeit zu lesen, wenn man über die Überschrift mit der Maus fährt. Hier kommt auch ein Facebook Like-Button zum Vorschein.
	– Die Bilder im Contentbereich ordnen sich nach einem in JQuery und CSS programmierten mathematischen Gestaltungssystem an. Somit ist je nach Größe des Browserfensters die ideale Komposition des Inhaltes gewährleistet.		* Die Bilder im Contentbereich ordnen sich nach einem in JQuery und CSS programmierten mathematischen Gestaltungssystem an. Somit ist je nach Größe des Browserfensters die ideale Komposition des Inhaltes gewährleistet.


	Information / Kontakt Bereich		Information / Kontakt Bereich

	– Ein kurzer Text, der die persönlichen Stärken als Gestalter hervorhebt.		* Ein kurzer Text, der die persönlichen Stärken als Gestalter hervorhebt.
	– Implementierung eines Twitter Feed.		* Implementierung eines Twitter Feed.
	– Implementierung eines Flickr Foto Feed.		* Implementierung eines Flickr Foto Feed.
	– Mobile Video Diary: Umprogrammierung eines youtube Feed Plugins für Wordpress mit der Youtube Player API: Die neusten Handy-Youtube-Uploads werden automatisch auf der Webseite eingebunden (loop, autoplay, mute).		* Mobile Video Diary: Umprogrammierung eines youtube Feed Plugins für Wordpress mit der Youtube Player API: Die neusten Handy-Youtube-Uploads werden automatisch auf der Webseite eingebunden (loop, autoplay, mute).

Juliensimshauser: /* Portfolio Website / Julien Simshäuser */

2011-03-09T02:20:23Z

Portfolio Website / Julien Simshäuser

← Older revision		Revision as of 02:20, 9 March 2011
Line 57:		Line 57:

	http://vimeo.com/20814600		http://vimeo.com/20814600
	Passwort: "~~webapp~~"		Passwort: "webapps"

	==Quellen==		==Quellen==

Juliensimshauser: Created page with "=Portfolio Website / Julien Simshäuser= ==Problem== Es muss eine Portfolio Webseite erstellt werden, die die persönlichen Stärken als Gestalter deutlich macht. Außerdem so..."

2011-03-09T02:19:46Z

Created page with "=Portfolio Website / Julien Simshäuser= ==Problem== Es muss eine Portfolio Webseite erstellt werden, die die persönlichen Stärken als Gestalter deutlich macht. Außerdem so..."

New page

=Portfolio Website / Julien Simshäuser=

==Problem==

Es muss eine Portfolio Webseite erstellt werden, die die persönlichen Stärken als Gestalter deutlich macht. Außerdem sollte sie schnell und einfach bedienbar und zeitgemäß gestaltet sein. Neue Projekte müssen schnell eingetragen werden können.
Der Inhalt der Seite sollte idealer Weise mit sozialen Netzwerken verknüpft sein und auf verschiedenen Geräten erreichbar sein.

==Lösung==

Es wurde ein Wordpress Theme gestaltet und programmiert, dass den Anforderungen gerecht wird.

Startseite

– Es werden immer die Projektkategorien unterstrichen, die dem jeweiligen Thumbnail zugehörig sind, wenn man mit der Maus darüber fährt.
– Das Gestaltungsraster passt sich der Größe des Browserfensters an.
– Durch Javascript wird davon gebrauch gemacht, dass aktuelle Browser je nach Mausposition verschiedene visuelle Spielereien möglich machen.

Content Bereich

– Wenn man auf ein Thumbnail geklickt hat, besteht die Möglichkeit, nähere Infos zu der Arbeit zu lesen, wenn man über die Überschrift mit der Maus fährt. Hier kommt auch ein Facebook Like-Button zum Vorschein.
– Die Bilder im Contentbereich ordnen sich nach einem in JQuery und CSS programmierten mathematischen Gestaltungssystem an. Somit ist je nach Größe des Browserfensters die ideale Komposition des Inhaltes gewährleistet.

Information / Kontakt Bereich

– Ein kurzer Text, der die persönlichen Stärken als Gestalter hervorhebt.
– Implementierung eines Twitter Feed.
– Implementierung eines Flickr Foto Feed.
– Mobile Video Diary: Umprogrammierung eines youtube Feed Plugins für Wordpress mit der Youtube Player API: Die neusten Handy-Youtube-Uploads werden automatisch auf der Webseite eingebunden (loop, autoplay, mute).

==Techniken==

* HTML
* CSS
* Javascript, JQuery, Plugins: Easing, Color, Vgrid
* Wordpress, Plugins: custom-field-template, duplicate-post, twitter-for-wordpress, youtube-feeder

==Prozess==

===Erste Scribbles===
[[File:Scribbble.jpg|thumb|left|Erste Scribbles]]

===Erste Photoshop Entwürfe===
[[File:Hauptseite.jpg|thumb|left|Hauptseite]]
[[File:Content.jpg|thumb|left|Content]]
[[File:Information.jpg|thumb|left|Information]]

===Finale Webseite===

http://vimeo.com/20814600
Passwort: "webapp"

==Quellen==
[http://www.google.com]google.com
[http://www.jquery.com]jquery.com
[http://www.wordpress.org]wordpress.org
[http://www.github.com]github.com
[http://www.stackoverflow.com]stackoverflow.com
[http://www.cyberduck.ch]cyberduck.ch
[http://www.barebones.com/products/textwrangler]textwrangler