Medien Wiki - User contributions [en]

File:SEO.pdf

2014-06-29T15:31:59Z

Carlo Enke:

== Summary ==

== Copyright status: ==

== Source: ==

IFD:WebBasicsIISS14

2014-06-29T15:30:44Z

Carlo Enke: /* Kursplan/Themen */

[[:Category:Werkmodul|Werkmodul]]<br/>
''Lehrperson:'' [[User:Tobias|Tobias Wolf]]<br/>
''Bewertung:'' 6 [[ECTS]], 4 [[SWS]]<br/>
''Termin:'' Montag, 9:15 - 11:30<br/>
''Ort:'' Marienstr. 7b, Raum 105<br/>

''Erster Termin:'' Mo, 7. April 2014

==Kursplan/Themen==

''Der Kursplan ist nicht fix, sonder dient eher zur groben Orientierung!''

* 07.04. Web Inspektor, Semantik
** [[Media:2014-WebBasics2-1.pdf|Folien]]
* 14.04. Web Basics I in 2 Stunden
** [[Media:2014-WebBasics2-2.pdf|Folien]]
** [[Media:2014-WebBasics2-2-Material.zip|Material]]
** [http://webuser.uni-weimar.de/~here4760/webbasics2/2/ Ergebnis]
* 28.04. Interface Design & Responsives Design (Vertiefung CSS)
** [[Media:2014-WebBasics2-3.pdf|Folien]]
** [http://webuser.uni-weimar.de/~here4760/webbasics2/3/beispiel/ Beispiel]
** [[Media:2014-WebBasics2-3-mobil.zip|mobile Webseite]]
** [[Media:2014-WebBasics2-3-desktop.zip|Desktop Webseite]]
** [http://webuser.uni-weimar.de/~here4760/webbasics2/3/mobil/ mobile Webseite]
** [http://webuser.uni-weimar.de/~here4760/webbasics2/3/desktop/ Desktop Webseite]
* 05.05. Einführung in JavaScript
** [[Media:2014-WebBasics2-4-Folien.pdf|Folien]]
** [[Media:2014-WebBasics2-4-Material.zip|Material]]
** [http://webuser.uni-weimar.de/~here4760/webbasics2/4/navigation/marionettentheater.html Navigation]
* 12.05. Vertiefung JavaScript und Ajax: Facebook-Bilder-Galerie
** [[Media:2014-WebBasics2-5-Folien.pdf|Folien]]
** [[Media:2014-WebBasics2-5-Material.zip|Material]]
** [http://webuser.uni-weimar.de/~here4760/webbasics2/5/ Slideshow]
* 19.05. PHP, Facebook/Twitter-Anbindung
** [[Media:2014-WebBasics2-6-Folien.pdf|Folien]]
** [[Media:2014-WebBasics2-6-Daten.zip|Daten]]
* 26.05. fällt aus
* 02.06. Zwischenpräsentation
* 16.06. CMS (Content Management System)
** [[Media:2014-WebBasics2-7-Daten_kriby.zip|Daten kirby]]
* 23.06. kein Kurs, statt dessen Konsultation am 17. & 19. Juni, jeweils vormittags.
* 30.06. Best-Practice/Website-Optimierung
** [[Media:SEO.pdf|Folien]]
* 07.07.tba
* 10. - 13.07. Summaery

===Sonstige Themen:===
GitHub, CMS-Systeme (Wordpres oder ExpressionEngine), MySQL, SVG, JSON, jQuery, Suchmaschinenoptimierung

===Hilfreiche Links===

===Referenzen===
* [http://developer.mozilla.org/en-US/docs/Web/HTML/Element HTML Element Reference]
* [http://developer.mozilla.org/en-US/docs/Web/HTML/Attributes HTML Attribute Reference]
* [http://developer.mozilla.org/en-US/docs/Web/CSS/Reference CSS Reference]
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference JavaScript Reference]

====Erklärungen/Tutorials====
* [http://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction Einführung HTML (englisch)]
* [http://developer.mozilla.org/en-US/docs/Web/CSS/Syntax Einführung CSS (englisch)]
* [http://www.codecademy.com/tracks/web Interaktiv HTML lernen (englisch)]
* [http://docs.webplatform.org/wiki/beginners Web development for beginners – WebPlatform.org]

====Design====
* [[IFD:GenerativeBauhaus_WS2012#Themen|Generative Bauhaus]]
* [http://www.smashingmagazine.com/2014/05/16/design-principles-space-figure-ground-relationship/ Smashing Magazine: Design Principles: Space And The Figure-Ground Relationship]
* [http://webtypobuch.de/lesen #webtypobuch]

====Sonstiges====
* [http://praegnanz.de/weblog/cms-einkaufsfuehrer-2014 Die CMS-Landschaft im Jahr 2014 / praegnanz.de]

==Leistungsnachweis==

===70% Endabgabe===
Eine fertige Website in der behandelte Themen umgesetzt wurden.

Bewertet wird das Design & die Umsetzung.

===30% Hausaufgaben===
Jede Woche gibt es eine Hausaufgabe.

50% der Hausaufgaben müssen erledigt werden.

==Beschreibung==
Der Kurs wird studentisch unterstützt von Tobias Wolf.

Das Werkmodul richtet sich an Studierende gestaltender Studiengänge, die einen Einstieg in die Erstellung von dynamischen Websiten suchen.

Grundlage für den Kurs ist das Werkmodul "Web Basics I" bzw. Kenntnisse in HTML und CSS. Der Kurs wird auf diese Grundlagen aufbauen und anwendungsnah sich weiter in die Entwicklung von Websiten/WebApplikationen vertiefen. Dabei wird die Programmiersprache "JavaScript" von Grund auf vermitteln, mit der Webdesigner mit relativ überschaubaren Programmierkenntnissen zu überzeugenden Ergebnissen in Webanwenungen kommen. PHP als serverseitige Scriptsprachen werden wir auch von Grund auf kennen lernen.

Hier einige Beispiele für typische Anwendungen aus dem Weballtag, die im Kurs praktisch behandelt werden:
* Animationen und Darstellungseffekte
* dynamische Interfaceelemten (z.B. ausklappende Infobox, Menüs usw...)
* Spiele programmieren
* Slideshows und Fotostrecken
* Liveticker und Chats
* dynamische Formulare
* Diagramme und Charts
* Sound- und Videosteuern
* Inhalte dynamisch laden
* Inhalte speichern und verarbeiten

Je nach Interesse können auch folgende Themen zusätzlich behandelt werden:
* Einbindung von Social-Network-Angebote (Facebook, Google+, GoogleMaps usw.)
* 3D-Elemente im Web
* Soundvisualisierung
* Webcam-Interaktion (Fl)
* Fortgeschrittene JavaScript-Libaries wie paper.js oder box2d
* Optimierung für mobile Endgeräte (iPhone, iPad usw.)
==engl. Beschreibung==
Web Basic II
This beginner course is dedicated to all design- and media-students who are interessted in web development. First knowledges or practical experiences in HTML and CSS are required or at least the course "Web Basics I". Now we'll go deeper in web development with client technologies like HTML5, CSS3 and (especially) Javascript and PHP.

==Voraussetzungen==
Die Bewerbung für eine Teilnahme am Kurs muss bis zum 05. April per E-Mail mit dem Betreff: "Bewerbung Web Basics II SS14" und folgenden Angaben an: tobias.fabian.wolf (at) uni-weimar.de gesendet werden. Name, Fachrichtung und Fachsemester, Matrikelnummer, Angabe der geltenden Prüfungsordnung, gültige E-Mail-Adresse @uni-weimar.de und Erwartungen zum Kurs (in ein paar kurzen Sätzen). Sollte es mehr als 25 Bewerber geben, entscheidet die Zugehörigkeit zur Fakultät/des Studiengangs und ggf. die Reihenfolge der Anmeldungen über die Aufnahme in den Kurs. Eine Bestätigung zur Aufnahme im Kurs kommt bis zum 06. April per E-Mail.

==Zielgruppe==
Bachelor-Studierende der Fakultäten Medien, Gestaltung und des Studiengangs Medienarchitektur.

IFD:WebBasicsIISS14

2014-06-29T10:54:49Z

Carlo Enke: /* Kursplan/Themen */

[[:Category:Werkmodul|Werkmodul]]<br/>
''Lehrperson:'' [[User:Tobias|Tobias Wolf]]<br/>
''Bewertung:'' 6 [[ECTS]], 4 [[SWS]]<br/>
''Termin:'' Montag, 9:15 - 11:30<br/>
''Ort:'' Marienstr. 7b, Raum 105<br/>

''Erster Termin:'' Mo, 7. April 2014

==Kursplan/Themen==

''Der Kursplan ist nicht fix, sonder dient eher zur groben Orientierung!''

* 07.04. Web Inspektor, Semantik
** [[Media:2014-WebBasics2-1.pdf|Folien]]
* 14.04. Web Basics I in 2 Stunden
** [[Media:2014-WebBasics2-2.pdf|Folien]]
** [[Media:2014-WebBasics2-2-Material.zip|Material]]
** [http://webuser.uni-weimar.de/~here4760/webbasics2/2/ Ergebnis]
* 28.04. Interface Design & Responsives Design (Vertiefung CSS)
** [[Media:2014-WebBasics2-3.pdf|Folien]]
** [http://webuser.uni-weimar.de/~here4760/webbasics2/3/beispiel/ Beispiel]
** [[Media:2014-WebBasics2-3-mobil.zip|mobile Webseite]]
** [[Media:2014-WebBasics2-3-desktop.zip|Desktop Webseite]]
** [http://webuser.uni-weimar.de/~here4760/webbasics2/3/mobil/ mobile Webseite]
** [http://webuser.uni-weimar.de/~here4760/webbasics2/3/desktop/ Desktop Webseite]
* 05.05. Einführung in JavaScript
** [[Media:2014-WebBasics2-4-Folien.pdf|Folien]]
** [[Media:2014-WebBasics2-4-Material.zip|Material]]
** [http://webuser.uni-weimar.de/~here4760/webbasics2/4/navigation/marionettentheater.html Navigation]
* 12.05. Vertiefung JavaScript und Ajax: Facebook-Bilder-Galerie
** [[Media:2014-WebBasics2-5-Folien.pdf|Folien]]
** [[Media:2014-WebBasics2-5-Material.zip|Material]]
** [http://webuser.uni-weimar.de/~here4760/webbasics2/5/ Slideshow]
* 19.05. PHP, Facebook/Twitter-Anbindung
** [[Media:2014-WebBasics2-6-Folien.pdf|Folien]]
** [[Media:2014-WebBasics2-6-Daten.zip|Daten]]
* 26.05. fällt aus
* 02.06. Zwischenpräsentation
* 16.06. CMS (Content Management System)
** [[Media:2014-WebBasics2-7-Daten_kriby.zip|Daten kirby]]
* 23.06. kein Kurs, statt dessen Konsultation am 17. & 19. Juni, jeweils vormittags.
* 30.06. Best-Practice/Website-Optimierung
* 07.07.tba
* 10. - 13.07. Summaery

===Sonstige Themen:===
GitHub, CMS-Systeme (Wordpres oder ExpressionEngine), MySQL, SVG, JSON, jQuery, Suchmaschinenoptimierung

===Hilfreiche Links===

===Referenzen===
* [http://developer.mozilla.org/en-US/docs/Web/HTML/Element HTML Element Reference]
* [http://developer.mozilla.org/en-US/docs/Web/HTML/Attributes HTML Attribute Reference]
* [http://developer.mozilla.org/en-US/docs/Web/CSS/Reference CSS Reference]
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference JavaScript Reference]

====Erklärungen/Tutorials====
* [http://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction Einführung HTML (englisch)]
* [http://developer.mozilla.org/en-US/docs/Web/CSS/Syntax Einführung CSS (englisch)]
* [http://www.codecademy.com/tracks/web Interaktiv HTML lernen (englisch)]
* [http://docs.webplatform.org/wiki/beginners Web development for beginners – WebPlatform.org]

====Design====
* [[IFD:GenerativeBauhaus_WS2012#Themen|Generative Bauhaus]]
* [http://www.smashingmagazine.com/2014/05/16/design-principles-space-figure-ground-relationship/ Smashing Magazine: Design Principles: Space And The Figure-Ground Relationship]
* [http://webtypobuch.de/lesen #webtypobuch]

====Sonstiges====
* [http://praegnanz.de/weblog/cms-einkaufsfuehrer-2014 Die CMS-Landschaft im Jahr 2014 / praegnanz.de]

==Leistungsnachweis==

===70% Endabgabe===
Eine fertige Website in der behandelte Themen umgesetzt wurden.

Bewertet wird das Design & die Umsetzung.

===30% Hausaufgaben===
Jede Woche gibt es eine Hausaufgabe.

50% der Hausaufgaben müssen erledigt werden.

==Beschreibung==
Der Kurs wird studentisch unterstützt von Tobias Wolf.

Das Werkmodul richtet sich an Studierende gestaltender Studiengänge, die einen Einstieg in die Erstellung von dynamischen Websiten suchen.

Grundlage für den Kurs ist das Werkmodul "Web Basics I" bzw. Kenntnisse in HTML und CSS. Der Kurs wird auf diese Grundlagen aufbauen und anwendungsnah sich weiter in die Entwicklung von Websiten/WebApplikationen vertiefen. Dabei wird die Programmiersprache "JavaScript" von Grund auf vermitteln, mit der Webdesigner mit relativ überschaubaren Programmierkenntnissen zu überzeugenden Ergebnissen in Webanwenungen kommen. PHP als serverseitige Scriptsprachen werden wir auch von Grund auf kennen lernen.

Hier einige Beispiele für typische Anwendungen aus dem Weballtag, die im Kurs praktisch behandelt werden:
* Animationen und Darstellungseffekte
* dynamische Interfaceelemten (z.B. ausklappende Infobox, Menüs usw...)
* Spiele programmieren
* Slideshows und Fotostrecken
* Liveticker und Chats
* dynamische Formulare
* Diagramme und Charts
* Sound- und Videosteuern
* Inhalte dynamisch laden
* Inhalte speichern und verarbeiten

Je nach Interesse können auch folgende Themen zusätzlich behandelt werden:
* Einbindung von Social-Network-Angebote (Facebook, Google+, GoogleMaps usw.)
* 3D-Elemente im Web
* Soundvisualisierung
* Webcam-Interaktion (Fl)
* Fortgeschrittene JavaScript-Libaries wie paper.js oder box2d
* Optimierung für mobile Endgeräte (iPhone, iPad usw.)
==engl. Beschreibung==
Web Basic II
This beginner course is dedicated to all design- and media-students who are interessted in web development. First knowledges or practical experiences in HTML and CSS are required or at least the course "Web Basics I". Now we'll go deeper in web development with client technologies like HTML5, CSS3 and (especially) Javascript and PHP.

==Voraussetzungen==
Die Bewerbung für eine Teilnahme am Kurs muss bis zum 05. April per E-Mail mit dem Betreff: "Bewerbung Web Basics II SS14" und folgenden Angaben an: tobias.fabian.wolf (at) uni-weimar.de gesendet werden. Name, Fachrichtung und Fachsemester, Matrikelnummer, Angabe der geltenden Prüfungsordnung, gültige E-Mail-Adresse @uni-weimar.de und Erwartungen zum Kurs (in ein paar kurzen Sätzen). Sollte es mehr als 25 Bewerber geben, entscheidet die Zugehörigkeit zur Fakultät/des Studiengangs und ggf. die Reihenfolge der Anmeldungen über die Aufnahme in den Kurs. Eine Bestätigung zur Aufnahme im Kurs kommt bis zum 06. April per E-Mail.

==Zielgruppe==
Bachelor-Studierende der Fakultäten Medien, Gestaltung und des Studiengangs Medienarchitektur.

IFD:WebBasicsIISS14

2014-06-29T10:49:22Z

Carlo Enke: /* Kursplan/Themen */

[[:Category:Werkmodul|Werkmodul]]<br/>
''Lehrperson:'' [[User:Tobias|Tobias Wolf]]<br/>
''Bewertung:'' 6 [[ECTS]], 4 [[SWS]]<br/>
''Termin:'' Montag, 9:15 - 11:30<br/>
''Ort:'' Marienstr. 7b, Raum 105<br/>

''Erster Termin:'' Mo, 7. April 2014

==Kursplan/Themen==

''Der Kursplan ist nicht fix, sonder dient eher zur groben Orientierung!''

* 07.04. Web Inspektor, Semantik
** [[Media:2014-WebBasics2-1.pdf|Folien]]
* 14.04. Web Basics I in 2 Stunden
** [[Media:2014-WebBasics2-2.pdf|Folien]]
** [[Media:2014-WebBasics2-2-Material.zip|Material]]
** [http://webuser.uni-weimar.de/~here4760/webbasics2/2/ Ergebnis]
* 28.04. Interface Design & Responsives Design (Vertiefung CSS)
** [[Media:2014-WebBasics2-3.pdf|Folien]]
** [http://webuser.uni-weimar.de/~here4760/webbasics2/3/beispiel/ Beispiel]
** [[Media:2014-WebBasics2-3-mobil.zip|mobile Webseite]]
** [[Media:2014-WebBasics2-3-desktop.zip|Desktop Webseite]]
** [http://webuser.uni-weimar.de/~here4760/webbasics2/3/mobil/ mobile Webseite]
** [http://webuser.uni-weimar.de/~here4760/webbasics2/3/desktop/ Desktop Webseite]
* 05.05. Einführung in JavaScript
** [[Media:2014-WebBasics2-4-Folien.pdf|Folien]]
** [[Media:2014-WebBasics2-4-Material.zip|Material]]
** [http://webuser.uni-weimar.de/~here4760/webbasics2/4/navigation/marionettentheater.html Navigation]
* 12.05. Vertiefung JavaScript und Ajax: Facebook-Bilder-Galerie
** [[Media:2014-WebBasics2-5-Folien.pdf|Folien]]
** [[Media:2014-WebBasics2-5-Material.zip|Material]]
** [http://webuser.uni-weimar.de/~here4760/webbasics2/5/ Slideshow]
* 19.05. PHP, Facebook/Twitter-Anbindung
** [[Media:2014-WebBasics2-6-Folien.pdf|Folien]]
** [[Media:2014-WebBasics2-6-Daten.zip|Daten]]
* 26.05. fällt aus
* 02.06. Zwischenpräsentation
* 16.06. CMS (Content Management System)
** [[Media:2014-WebBasics2-7-Daten_kriby.zip|Daten kirby]]
* 23.06. kein Kurs, statt dessen Konsultation am 17. & 19. Juni, jeweils vormittags.
* 30.06. Best-Practice/Website-Optimierung
** [[Media:Website-Optimierung.zip|Website-Optimierung]]
* 07.07.tba
* 10. - 13.07. Summaery

===Sonstige Themen:===
GitHub, CMS-Systeme (Wordpres oder ExpressionEngine), MySQL, SVG, JSON, jQuery, Suchmaschinenoptimierung

===Hilfreiche Links===

===Referenzen===
* [http://developer.mozilla.org/en-US/docs/Web/HTML/Element HTML Element Reference]
* [http://developer.mozilla.org/en-US/docs/Web/HTML/Attributes HTML Attribute Reference]
* [http://developer.mozilla.org/en-US/docs/Web/CSS/Reference CSS Reference]
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference JavaScript Reference]

====Erklärungen/Tutorials====
* [http://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction Einführung HTML (englisch)]
* [http://developer.mozilla.org/en-US/docs/Web/CSS/Syntax Einführung CSS (englisch)]
* [http://www.codecademy.com/tracks/web Interaktiv HTML lernen (englisch)]
* [http://docs.webplatform.org/wiki/beginners Web development for beginners – WebPlatform.org]

====Design====
* [[IFD:GenerativeBauhaus_WS2012#Themen|Generative Bauhaus]]
* [http://www.smashingmagazine.com/2014/05/16/design-principles-space-figure-ground-relationship/ Smashing Magazine: Design Principles: Space And The Figure-Ground Relationship]
* [http://webtypobuch.de/lesen #webtypobuch]

====Sonstiges====
* [http://praegnanz.de/weblog/cms-einkaufsfuehrer-2014 Die CMS-Landschaft im Jahr 2014 / praegnanz.de]

==Leistungsnachweis==

===70% Endabgabe===
Eine fertige Website in der behandelte Themen umgesetzt wurden.

Bewertet wird das Design & die Umsetzung.

===30% Hausaufgaben===
Jede Woche gibt es eine Hausaufgabe.

50% der Hausaufgaben müssen erledigt werden.

==Beschreibung==
Der Kurs wird studentisch unterstützt von Tobias Wolf.

Das Werkmodul richtet sich an Studierende gestaltender Studiengänge, die einen Einstieg in die Erstellung von dynamischen Websiten suchen.

Grundlage für den Kurs ist das Werkmodul "Web Basics I" bzw. Kenntnisse in HTML und CSS. Der Kurs wird auf diese Grundlagen aufbauen und anwendungsnah sich weiter in die Entwicklung von Websiten/WebApplikationen vertiefen. Dabei wird die Programmiersprache "JavaScript" von Grund auf vermitteln, mit der Webdesigner mit relativ überschaubaren Programmierkenntnissen zu überzeugenden Ergebnissen in Webanwenungen kommen. PHP als serverseitige Scriptsprachen werden wir auch von Grund auf kennen lernen.

Hier einige Beispiele für typische Anwendungen aus dem Weballtag, die im Kurs praktisch behandelt werden:
* Animationen und Darstellungseffekte
* dynamische Interfaceelemten (z.B. ausklappende Infobox, Menüs usw...)
* Spiele programmieren
* Slideshows und Fotostrecken
* Liveticker und Chats
* dynamische Formulare
* Diagramme und Charts
* Sound- und Videosteuern
* Inhalte dynamisch laden
* Inhalte speichern und verarbeiten

Je nach Interesse können auch folgende Themen zusätzlich behandelt werden:
* Einbindung von Social-Network-Angebote (Facebook, Google+, GoogleMaps usw.)
* 3D-Elemente im Web
* Soundvisualisierung
* Webcam-Interaktion (Fl)
* Fortgeschrittene JavaScript-Libaries wie paper.js oder box2d
* Optimierung für mobile Endgeräte (iPhone, iPad usw.)
==engl. Beschreibung==
Web Basic II
This beginner course is dedicated to all design- and media-students who are interessted in web development. First knowledges or practical experiences in HTML and CSS are required or at least the course "Web Basics I". Now we'll go deeper in web development with client technologies like HTML5, CSS3 and (especially) Javascript and PHP.

==Voraussetzungen==
Die Bewerbung für eine Teilnahme am Kurs muss bis zum 05. April per E-Mail mit dem Betreff: "Bewerbung Web Basics II SS14" und folgenden Angaben an: tobias.fabian.wolf (at) uni-weimar.de gesendet werden. Name, Fachrichtung und Fachsemester, Matrikelnummer, Angabe der geltenden Prüfungsordnung, gültige E-Mail-Adresse @uni-weimar.de und Erwartungen zum Kurs (in ein paar kurzen Sätzen). Sollte es mehr als 25 Bewerber geben, entscheidet die Zugehörigkeit zur Fakultät/des Studiengangs und ggf. die Reihenfolge der Anmeldungen über die Aufnahme in den Kurs. Eine Bestätigung zur Aufnahme im Kurs kommt bis zum 06. April per E-Mail.

==Zielgruppe==
Bachelor-Studierende der Fakultäten Medien, Gestaltung und des Studiengangs Medienarchitektur.

IFD:ShowreelWS12/Carlo Enke - UNINIZER

2013-01-29T15:21:05Z

Carlo Enke: /* Carlo Enke */

=UNINIZER=
===Carlo Enke===

[[File:Carloenke_showreel_ss12_uninizer_00.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_11.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_15.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_02.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_01.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_03.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_04.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_05.jpg]][[File:Carloenke_showreel_ss12_uninizer_06.jpg]][[File:Carloenke_showreel_ss12_uninizer_07.jpg]][[File:Carloenke_showreel_ss12_uninizer_08.jpg]][[File:Carloenke_showreel_ss12_uninizer_09.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_10.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_14.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_12.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_13.jpg]]

File:Carloenke showreel ss12 uninizer 15.jpg

2013-01-29T15:20:27Z

Carlo Enke:

== Summary ==

== Copyright status: ==

== Source: ==

File:Carloenke showreel ss12 uninizer 02.jpg

2013-01-29T11:55:44Z

Carlo Enke: uploaded a new version of "File:Carloenke showreel ss12 uninizer 02.jpg"

== Summary ==

== Copyright status: ==

== Source: ==

IFD:ShowreelWS12/Carlo Enke - UNINIZER

2013-01-29T11:55:18Z

Carlo Enke: /* UNINIZER */

=UNINIZER=
===Carlo Enke===

[[File:Carloenke_showreel_ss12_uninizer_00.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_11.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_02.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_01.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_03.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_04.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_05.jpg]][[File:Carloenke_showreel_ss12_uninizer_06.jpg]][[File:Carloenke_showreel_ss12_uninizer_07.jpg]][[File:Carloenke_showreel_ss12_uninizer_08.jpg]][[File:Carloenke_showreel_ss12_uninizer_09.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_10.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_14.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_12.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_13.jpg]]

IFD:ShowreelWS12/Carlo Enke - UNINIZER

2013-01-29T11:42:43Z

Carlo Enke: /* UNINIZER */

=UNINIZER=
===Carlo Enke===

[[File:Carloenke_showreel_ss12_uninizer_00.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_11.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_01.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_03.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_04.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_05.jpg]][[File:Carloenke_showreel_ss12_uninizer_06.jpg]][[File:Carloenke_showreel_ss12_uninizer_07.jpg]][[File:Carloenke_showreel_ss12_uninizer_08.jpg]][[File:Carloenke_showreel_ss12_uninizer_09.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_10.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_14.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_12.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_13.jpg]]

IFD:ShowreelWS12/Carlo Enke - UNINIZER

2013-01-28T19:35:17Z

Carlo Enke:

=UNINIZER=
===Carlo Enke===

[[File:Carloenke_showreel_ss12_uninizer_00.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_11.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_01.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_02.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_03.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_04.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_05.jpg]][[File:Carloenke_showreel_ss12_uninizer_06.jpg]][[File:Carloenke_showreel_ss12_uninizer_07.jpg]][[File:Carloenke_showreel_ss12_uninizer_08.jpg]][[File:Carloenke_showreel_ss12_uninizer_09.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_10.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_14.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_12.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_13.jpg]]

File:Carloenke showreel ss12 uninizer 14.jpg

2013-01-28T19:34:32Z

Carlo Enke:

== Summary ==

== Copyright status: ==

== Source: ==

File:Carloenke showreel ss12 uninizer 12.jpg

2013-01-28T19:31:24Z

Carlo Enke: uploaded a new version of "File:Carloenke showreel ss12 uninizer 12.jpg"

== Summary ==

== Copyright status: ==

== Source: ==

File:Carloenke showreel ss12 uninizer 13.jpg

2013-01-28T19:29:14Z

Carlo Enke:

== Summary ==

== Copyright status: ==

== Source: ==

IFD:ShowreelWS12/Carlo Enke - UNINIZER

2013-01-28T19:29:07Z

Carlo Enke:

=UNINIZER=
===Carlo Enke===

[[File:Carloenke_showreel_ss12_uninizer_00.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_11.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_01.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_02.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_03.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_04.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_05.jpg]][[File:Carloenke_showreel_ss12_uninizer_06.jpg]][[File:Carloenke_showreel_ss12_uninizer_07.jpg]][[File:Carloenke_showreel_ss12_uninizer_08.jpg]][[File:Carloenke_showreel_ss12_uninizer_09.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_10.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_12.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_13.jpg]]

File:Carloenke showreel ss12 uninizer 12.jpg

2013-01-28T19:26:35Z

Carlo Enke:

== Summary ==

== Copyright status: ==

== Source: ==

File:Carloenke showreel ss12 uninizer 10.jpg

2013-01-28T19:26:22Z

Carlo Enke:

== Summary ==

== Copyright status: ==

== Source: ==

File:Carloenke showreel ss12 uninizer 09.jpg

2013-01-28T19:26:06Z

Carlo Enke:

== Summary ==

== Copyright status: ==

== Source: ==

File:Carloenke showreel ss12 uninizer 08.jpg

2013-01-28T19:25:54Z

Carlo Enke:

== Summary ==

== Copyright status: ==

== Source: ==

File:Carloenke showreel ss12 uninizer 07.jpg

2013-01-28T19:25:41Z

Carlo Enke:

== Summary ==

== Copyright status: ==

== Source: ==

File:Carloenke showreel ss12 uninizer 06.jpg

2013-01-28T19:24:43Z

Carlo Enke:

== Summary ==

== Copyright status: ==

== Source: ==

File:Carloenke showreel ss12 uninizer 05.jpg

2013-01-28T19:24:29Z

Carlo Enke:

== Summary ==

== Copyright status: ==

== Source: ==

File:Carloenke showreel ss12 uninizer 01.jpg

2013-01-28T19:08:40Z

Carlo Enke:

== Summary ==

== Copyright status: ==

== Source: ==

File:Carloenke showreel ss12 uninizer 04.jpg

2013-01-28T19:07:43Z

Carlo Enke:

== Summary ==

== Copyright status: ==

== Source: ==

File:Carloenke showreel ss12 uninizer 03.jpg

2013-01-28T19:07:22Z

Carlo Enke:

== Summary ==

== Copyright status: ==

== Source: ==

File:Carloenke showreel ss12 uninizer 02.jpg

2013-01-28T19:06:54Z

Carlo Enke:

== Summary ==

== Copyright status: ==

== Source: ==

IFD:ShowreelWS12/Carlo Enke - UNINIZER

2013-01-28T19:06:42Z

Carlo Enke: /* UNINIZER */

=UNINIZER=
===Carlo Enke===

[[File:Carloenke_showreel_ss12_uninizer_00.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_11.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_01.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_02.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_03.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_04.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_05.jpg]][[File:Carloenke_showreel_ss12_uninizer_06.jpg]][[File:Carloenke_showreel_ss12_uninizer_07.jpg]][[File:Carloenke_showreel_ss12_uninizer_08.jpg]][[File:Carloenke_showreel_ss12_uninizer_09.jpg]]
[[File:Carloenke_showreel_ss12_uninizer_10.jpg]]

File:Carloenke showreel ss12 uninizer 11.jpg

2013-01-28T19:05:51Z

Carlo Enke:

== Summary ==

== Copyright status: ==

== Source: ==

IFD:ShowreelWS12/Carlo Enke - UNINIZER

2013-01-28T18:57:29Z

Carlo Enke:

=UNINIZER=
===Carlo Enke===

[[File:Carloenke_showreel_ss12_uninizer_00.jpg]]

File:Carloenke showreel ss12 uninizer 00.jpg

2013-01-28T18:55:49Z

Carlo Enke:

== Summary ==

== Copyright status: ==

== Source: ==

IFD:ShowreelWS12/Carlo Enke - UNINIZER

2013-01-28T18:55:21Z

Carlo Enke:

'''UNINIZER'''

Carlo Enke

[[File:.jpg]]

IFD:ShowreelWS12/Carlo Enke - UNINIZER

2013-01-23T13:17:31Z

Carlo Enke: Created page with "'''UNINIZER''' Carlo Enke"

'''UNINIZER'''

Carlo Enke

IFD:ShowreelWS12

2013-01-23T13:16:20Z

Carlo Enke:

[[File:422px-20120102_IFD-Showreel20122013.png]]

<h3 style="color:#78BA56;">How to add your project</h3>

[http://www.youtube.com/watch?v=8rtEZEOPACw How-To Videocast]<br>
[[IFD:Showreel/Wie_stelle_ich_mein_Projekt_ins_Wiki%3F|How-To Manual]]<br>
[http://www.uni-weimar.de/medien/interfacedesign/showreel_ws2012 Test Your Presentation]

<h3 style="color:#78BA56;">INFOS</h3>

'''Präsentation Wintersemester 2012/2013'''<br>
Professur Interface Design<br>
Prof. Dr. Jens Geelhaar, Johannes Deich, Joatan Preis Dutra, Michael Markert, Gabriel Rausch, Martin Schied

'''30. Januar 2013'''<br>
'''9:00 - 13:00 Uhr'''<br>
'''Hörsaal A'''<br>
Marienstraße 13C

Die Präsentation der Professur Interface Design bietet die Möglichkeit,<br> einen Einblick in die Semesterarbeiten und die Inhalte der angebotenen Module zu<br> bekommen. Die Veranstaltung lädt nicht nur Studenten des Bereichs IFD <br>ein, sondern ist offen für alle Interessierten.

<h3 style="color:#78BA56;">PROGRAMM</h3>

'''9:00 - 10:00 Block "Werk- und Fachmodule"'''

''Werkmodule''

* Werkmodul 'Einführung in die be-greifbare Programmierung'
** [[/Einführung in die be-greifbare Programmierung - Introduction/]]
** [[/Preset Page/]]
** [[/Preset Page/]]

* Werkmodul 'Generative Bauhaus (Bauhaus-Vorkurs)'
** [[/Generative Bauhaus - Introduction/]]
** [[/Preset Page/]]
** [[/Preset Page/]]

* Werkmodul 'Human-Centered-Design-Research'
** [[/Human-Centered-Design-Research - Introduction/]]
** [[/Preset Page/]]
** [[/Preset Page/]]

* Werkmodul 'Web Basics I'
** [[/Web Basics I - Introduction/]]
** [[/Preset Page/]]
** [[/Preset Page/]]

''Fachmodule''

* Werkmodul 'Eclectic_Electric! Grundlagen der Elektronik'
** [[/Eclectic_Electric! - Introduction/]]
** [[/Preset Page/]]
** [[/Preset Page/]]

* Werkmodul 'iOS Dev II'
** [[/iOS Dev II - Introduction/]]
** [[/Preset Page/]]
** [[/Preset Page/]]

* Werkmodul 'Mobile Culture and Urban Spaces'
** [[/Mobile Culture and Urban Spaces - Introduction/]]
** [[/Preset Page/]]
** [[/Preset Page/]]

* Werkmodul 'Tangible Programming - An Introduction'
** [[/Tangible Programming - An Introduction - Introduction/]]
** [[/Preset Page/]]
** [[/Preset Page/]]

* Werkmodul 'Web Advanced I'
** [[/Web Advanced I - Introduction/]]
** [[/Preset Page/]]
** [[/Preset Page/]]

'''10:00 - 13:00 Block "Projektmodule"'''
* [[/Jan Dittrich – Exploring User Research Methods/]]
* [[/Dianna Mertz - title/]]
* [[/Jelena Djokic - title/]]
* [[/Martin Kohlstedt - title/]]
* [[/Matias Garcia - title/]]
* [[/Zhong Pu - title/]]
* [[/Carlo Enke - UNINIZER/]]

'''Schlusswort'''

<h3 style="color:#78BA56;">Fach- und Werkmodul Arbeiten</h3>
Übersicht der Arbeiten aus Fach- und Werkmodulen. Werden nicht einzeln auf der Veranstaltung vorgestellt.

''1. Semesterler bitte ganz oben in der Web Basics I Liste eintragen, damit ihr zuerst präsentiert und die Veranstaltung bei Prof. Bauer-Wabnegg noch erreicht!''
* Werkmodul 'Web Basics I'
** [[/Gabriel Rausch/]]
** [[/Gesa Junne/]]
** [[/Preset Page/]]
** [[/Preset Page/]]
** [[/Preset Page/]]

IFD:Web Advanced I WS1213/Kursplan

2013-01-15T10:31:41Z

Carlo Enke: /* Course Schedule */

==Course Schedule==

'''1st event'''<br>
15th Oct. 2012 (introduction, topics)
* [[Media:20121015 bu ws12 web advanced I v1 low.pdf|introduction & topics]]

<strike>22th Oct. 2012</strike>

'''2rd event'''<br>
29th Oct. 2012
* How to write better CSS (Sass / Compass / Less) Gabriel
** [[Media:20121029 Web Advanced I V 2 Sass.zip]]
** [[Media:20121029 Web Advanced I V 2 Sass Workaround.zip]]

'''3th event'''<br>
5th Nov. 2012
* How to animate - part I (frame sequences, jquery + extensions, css3 transition in jquery-combinations, css3 sequences)
** [[Media:20121105 material Web Advanced I V 3 Animation I.zip]]
** [[Media:20121105 Workaround Web Advanced I V 3 Animation I.zip]]

<strike>12th Nov. 2012</strike>

'''4th event'''<br>
19th Nov. 2012
* [[Media:20121119_Web_Advanced_I_Workaround.zip]]
* http://jquery.vostrel.cz/reel

* Moritz -- how to develop server-side applications in javascript
** Node.js: http://www.nodejs.org
*** Links
**** http://www.npmjs.org (Node Packaged Modules)
**** http://www.nodebeginner.org (a comprehensive Node.js tutorial)
**** [http://debuggable.com/posts/understanding-node-js:4bd98440-45e4-4a9a-8ef7-0f7ecbdd56cb understanding Node.js]
**** http://socket.io (WebSockets Modul für Node.js)
**** http://expressjs.com (web application framework für Node.js)
*** Material
**** [[Media:20121119 web advanced node js chat.zip]]
** Opa: http://opalang.org
** Meteor: http://meteor.com/

'''5th event'''<br>
26th Nov. 2012<br>
'''progress presentation'''

'''6th event'''<br>
3rd Dec. 2012 <br>
* Christian Sohn -- google doodle
* Florian Froger -- how to play videos in fullscreen | part I
* Jump & Run
** [[Media:20121203_Web_Advanced_I_Material.zip]]
** [[Media:20121203_Web_Advanced_I_Workaround.zip]]

'''7th event'''<br>
10th Dec. 2012
* Florian Froger -- how to play videos in fullscreen | part II
* Julius -- How to easily create stunning visualizations from (large) data
** [[Media:20121210_Web_Advanced_I_Visualizations.zip]]
* Johannes -- How to extend jQuery with you own requirements
** [[Media:20121210_Web_Advanced_I_JQuery_Extension.zip]]

'''8th event'''<br>
17th Dec. 2012
*Jan D.: Usability: Heuristische Evaluation
*Roland Muench: web typography
** http://drafts.rolandmuench.de/webadv/

'''9th event'''<br>
7th Jan. 2013 <br>
* CMS Systeme | Wordpress - Stepan
**[http://www.wordpress.lernenhoch2.de/wordpress-template-tutorial-pdf-template gute Wordpress Tutorial]
**[http://www.faceyourmanga.com face your manga]
**[http://www.de.gravatar.com Gravatar]
* CMS Systeme | Typo3 - Gabriel
* [[Media:20130107_2_Web_Basics_I_Material.zip]]
* [[Media:Typo3_snippets.zip]]
* [[Media:20130107_Web_Advanced_I_Workaround.zip]]

'''10th event'''<br>
14th Jan. 2013 <br>
* Lukas Krause: Physics in Webdesign
** [[Media:20131401_Web_Advanced_I_Physics.zip]]
** [[Media:20131401_Web_Advanced_I_Physics.pdf]]
* Sven S.: Ajax
** [[Media:20131401_Web_Advanced_I_AJAX.zip]]

* [[Media:20130114_Web_Advanced_I_Material.zip]]

'''11th event'''<br>
21th Jan. 2013
* GitHub - Lydia
* Alex -- How to animate - part II (maybe on an re-sit date?)
* Carlo: Google Kalender & Google Kalender API

'''12th event'''<br>
28th Jan. 2013<br>
'''course internal project endpresentation'''

'''>> Endpräsentation 30. Januar 2013 9:00 - 13:00 Uhr, Hörsaal A, M13C<<'''

IFD:Kolloq WS12

2012-11-16T11:44:19Z

Carlo Enke: /* Syllabus */

[[:Category:Kolloquium|Kolloquium]] <br/>
''Lehrperson:'' [[Jens Geelhaar]], [[Michael Markert]], [[Gabriel Rausch]], [[Martin Schied]], [[User:Joatan|Joatan Preis Dutra]], [[Johannes Deich]]<br/>
''Bewertung:'' 0 [[ECTS]], ca. 3 [[SWS]]<br/>
''Termin:'' Mittwochs, 10.15 Uhr<br/>
''Ort:'' Marienstraße 7b, Raum 105<br/>

''Erster Termin:'' Mittwoch, 17. Oktober 2012, 10:15 Uhr

==Beschreibung==
Das Interface-Design Kolloquium lädt jeden Mittwoch zu einem kleinen Vortrag aus der Praxis (von Studierenden, Gästen oder Mitarbeitern) ein. Im Anschluss wird über das Thema des Vortrags diskutiert.

==English description==
We are inviting students, guests and lecturers to present their works. There will be a brief discussion afterwards.

== Anmeldung ==
Der Besuch ist offen für alle und erfordert keine Anmeldung

==Zielgruppe==
Alle Bachelor- und Master-Studenten, Absolventen und Mitarbeiter der Professur Interface-Design.

== Hinweise für Vortragende ==

Übrigens: Wir freuen uns über Hinweise für interessante Vorträge!

Normalerweise gibt es zwei Redner pro Termin. Es gibt einen Beamer (VGA-Connector!), wenn Sie Sound oder einen Computer benötigen, melden Sie sich bitte bei [[User:Mm|Michael]]. Falls Sie die Präsentation auf einem USB-Stick mitbringen, dann bitte entweder als Mac-Keynote oder als PDF. Wir haben nur eventuell Zugriff auf einen Windows-PC mit Powerpoint.

Sie können Ihre Vortragssprache (Deutsch/Englisch) frei wählen. Es sind jedoch üblicherweise 5 bis 10% fremdsprachige Teilnehmer anwesend, die i.d.R. besser Englisch als Deutsch verstehen.

Die Präsentation sollte eine Dauer von etwa ~20 Minuten haben. Bitte haben Sie Verständnis dafür, wenn wir nach spätestens 30 Minuten abbrechen, denn wir möchten noch genügend Zeit für Feedback, Fragen und kurze Anschlussdiskussionen haben.

== Notes for Speakers ==

If you feel, you have something interesting to share, please contact us. We are always looking for interesting things to share and talk about.

Typically, we have two presentations per meeting. There is a projector with VGA Connector. If you need Sound or a Computer, please contact [[User:Mm|Michael]]. If you bring your presentation on a USB-Stick, please use either Mac-Keynote or PDF, because we may or may not find a Windows-PC with Powerpoint.

The language of your talk (German/English) is up to you to decide. Usually, there are about 5 to 10% Students that understand English better than German.

The presentation should have a duration of about ~ 20 minutes. Please understand that we need to stop the talk after 30 minutes latest, because there should be time for feedback, questions and short discussions.

==Syllabus==
Vorläufiger Semesterplan:
# <del>17.10.</del> no meeting yet…
# <del>24.10.</del> no meeting yet…
# <del>31.10.</del> no meeting! (Public Holiday)
# <del>07.11.</del> Jan: Interfaces, Martin: ARS-Project
# <del>14.11.</del> Matthias + Miriam (Exposé Masterarbeit - Bürgerbeteiligung, Stadtentwicklung, Medien), Jason (If You Have To Ask You Can't Afford It)
# 21.11. Marcel K. (HCI for Cultural Heritage Research and Museums, Patawhat.P (IVIN), Fabian: feindura - Flat File CMS
# 28.11. Adriana (Interaktive Oberflächen), Max Albrecht ([https://github.com/papermill/documentation papermill])
# 05.12. Augusto(ensemble), Carlo Enke (Uninizer - Analyse von Kalendersystemen, deren Aufgabenverwaltungssysteme)
# 12.12. tba
# 09.01. tba
# 16.01. tba
# 23.01. tba
# 30.01. tba

== Siehe auch ==
*tba

[[Category:WS12]]
[[Category:Kollogium]]
[[Category:Interaktion]]
[[Category:Interface-Design]]
[[Category:Jens Geelhaar]]

IFD:WebAdvancedII/Carlo Enke

2012-10-04T07:46:32Z

Carlo Enke: /* Das muss noch gemacht werden */

=OFG oder SV OFFROAD FREUNDE GREIZ e.V.=

== Idee und Konzept ==

Hierbei handelt es sich um eine Website für einen, wie schon in der Überschrift geschrieben, Offroadverein.
Ganz nach den Wünschen des Vorstandes wird die Seite gestaltet und mit Funktionen versehen.

Der Verein kam schon im Frühjahr auf mich zu mit der Idee einer Website, die zu ihnen passt, deren Farben beinhaltet und gleich auf das Thema "OFFROAD" verweist. Nach langen Vorbesprechungen waren die ersten Konzepte fertig und eine Seite mit dem WOW!-Effekt erblickt so langsam und sicher das Licht der Welt.
Zu den gewünschten Funktionen gehören unter anderem eine Übersicht der Events mit verschieden Kategorien, ein Blog, Gästebuch, Fotoalben und natürlich eine Verknüpfung mit den Netzwerken Youtube und Facebook. Hinter allen Funktionen steht eine Art CMS, dass ich selbst schreibe.

Der "Hintergrund" der Website wird mit einem Paralaxeffekt animiert und mit dem Vordergrund verschmelzen.

Der Fortschritt kann hier http://www.ceendesign.de/ofg begutachtet werden.

== Techniken ==

Die gesamte Website wurde mit Hilfe von '''''HTML 5''''' und '''''CSS 3''''' erstellt. Um die Seite dynamischer zu gestalten, habe ich zudem '''''PHP''''' und '''''jQuery''''' verwendet. Inhalte können von den Mitgliedern des Vereins über ein auf die Seite angepasstes selbstgeschriebenes '''''CMS''''' hinzugefügt, geändert oder gelöscht werden.

Im Hintergrund der Seite werden alle Daten in einer '''''SQL-Datenbank''''' gespeichert und abgerufen.

== Inhalte ==

=== Startseite ===

[[File:Carloenke_ofg_index_01.jpg]]

Auf der Startseite ist das zentrale Element das Newssystem. Hier wird ähnlich der der Pinnwand bei Facebook angezeigt, wenn neue Alben, Blogeinträge und News hinzugefügt wurden. Diese werden über den Aufruf

<pre>
<?php
$sql = "
(
SELECT
news.news_id AS id,
news.news_title AS title,
LEFT(news.news_body, 100) AS body,
news.time AS time,
'news' AS `type`
FROM
news
)
UNION ALL
(
SELECT
posts.post_id AS id,
posts.post_title AS title,
LEFT(posts.post_body, 300) AS body,
posts.time AS time,
'posts' AS `type`
FROM
posts
)
UNION ALL
(
SELECT
albums.album_id AS id,
albums.album_title AS title,
LEFT(albums.album_body, 200) AS body,
albums.time AS time,
'albums' AS `type`
FROM
albums
)
ORDER BY
time desc
";

$qry = mysql_query($sql);
while( $row = mysql_fetch_object($qry) )
{
if($row->type == "posts"){
echo "<div class='index_post'><div class='ip_img'><img src='admin/core/post_image/default.jpg' width='100px'></div><div class='post'><a href='blog_read.php?pid=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>Blogeintrag vom " . date("d.m.Y", $row->time) . "</font></div></div>";
}else if($row->type == "news"){
echo "<div class='news'><h1>" . utf8_encode($row->title) . "</h1>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>" . date("d.m.Y", $row->time) . "</font></div>";
}else if($row->type == "albums"){
echo "<div class='news'><a href='view_album.php?album_id=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<br/><br/><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><br/><br/><br/><br/><br/><hr/><font size='1' color='#aaa'>erstellt am " . date("d.m.Y", $row->time) . "</font></div>";
}
}
?>
</pre>
angezeigt und nach Datum des Eintrages sortiert.
Die Einträge sollen, soweit möglich auch auf Facebook gepostet werden.
Daneben gibt es noch die Anzeige über kommende Events, die nach Ablauf des Datums von der Startseite entfernt werden.

=== Über uns ===

Der Bereich umfasst alle grundlegenden Informationen rund um den Verein, wie die Chronik, Satzungen und Gremien.

=== Events ===

Veranstaltungen werden nach ihrer Art sortiert und nach deren Ablauf aus dem Layout entfernt und in einem Archiv gespeichert. Beim Klick auf ein Event kommt man zu einer genaueren Beschreibung mit allen wichtigen Informationen.

=== Bilder & Videos ===

Fotoalben können nur von Berechtigten erstellt und hochgeladen werden. Diese werden mit einem Thumbnail und kurzer Beschreibung (Titel, Anzahl der Bilder) dargestellt. Im Album direkt findet man eine Beschreibung und die einzelnen Bilder, welche in einer Lightbox geöffnet und betrachtet werden können.

Die Videos werden über YouTube hochgeladen und die Playlist bzw die einzelnen Videos in die Seite automatisch integriert. Angezeigt werden sie ähnlich wie die Fotoalben.

=== Blog ===

Dieser Bereich dient im wesentlichen dazu, die Mitglieder und Freunde des Vereins über Medienberichte und Zusammenfassungen der Veranstaltungen auf dem laufenden zu halten. Angezeigt werden ein Bild und eine kurze Vorschau zum Eintrag. Beim Klick auf einen Eintrag kommt man zum vollständigen Artikel und kann wenn Bedarf besteht ein Kommentar dazu abgeben.

=== Gästebuch ===

[[File:Carloenke_ofg_gb_01.jpg|Carloenke_ofg_gb_01.jpg]]

Das Gästebuch funktioniert ganz klassisch. Als Eintragender muss man drei Angaben machen und kann dann ins Buch einschreiben. Pro Seite werden zehn Einträge angezeigt, welche nach Aktuallität abwerts sortiert sind.

=== Links ===

Der Verein hatte den Wunsch eine extra Seite für die Sponsoren zu haben, wo alle aufgelistet und verlinkt sind.

=== Footer ===

Im Footer sind klassische Angaben wie ein Link zum Impressum, Abtretungserklärung, Anmeldebereich und ein Kontaktformular zu finden.

=== Adminbereich ===

[[File:Carloenke_ofg_admin_01.jpg|thumb|left|Events erstellen]]

Alles was hier gemachst wird, nimmt automatisch Einfluss auf die Inhalte der Website. Dazu gehört zum einen das Erstellen von Fotoalbem, Blogeinträge, News und vieles mehr.
Zusätzlich kann man neue Benutzer als Admin festlegen.
<br/><br/><br/><br/><br/><br/><br/><br/>

== Mobile Website ==

Um unterwegs auf die Inhalte der Website zugreifen zu können, entsteht parallel zur Desktopseite eine auf mobile Endgeräte angepasste Website. Die Inhalte werden nahezu alle übernommen.

Die Weiterleitung erfolgt per PHP:

<pre>
<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
header('Location: http://ceendesign.de/ofg/mobile');
?>
</pre>

== Das muss noch gemacht werden ==

* <strike>Hintergrundbild überarbeiten</strike>
* Events hinzufügen, ändern, <strike>löschen</strike>, <strike>mit einem Bild verknüpfen</strike>, nach Kategorie sortieren
* <strike>Blogeinträge ändern und mit einem Bild verknüpfen</strike>
* Fotoalben mit Bildern füllen
* Youtubevideos und Playlists automatisch einbinden
* Newsliste mit Linkerkennung und auf Facebook posten
* <strike>Datumformat einheitlich anpassen</strike>

* <strike>DAS WOHL WICHTIGSTE IST, DASS DERZEIT NOCH EINE WARNUNG AUF MALWARE ANGEZEIGT WIRD, DIE BEHOBEN WERDEN MUSS!</strike>

IFD:WebAdvancedII/Carlo Enke

2012-10-04T07:45:28Z

Carlo Enke: /* Das muss noch gemacht werden */

=OFG oder SV OFFROAD FREUNDE GREIZ e.V.=

== Idee und Konzept ==

Hierbei handelt es sich um eine Website für einen, wie schon in der Überschrift geschrieben, Offroadverein.
Ganz nach den Wünschen des Vorstandes wird die Seite gestaltet und mit Funktionen versehen.

Der Verein kam schon im Frühjahr auf mich zu mit der Idee einer Website, die zu ihnen passt, deren Farben beinhaltet und gleich auf das Thema "OFFROAD" verweist. Nach langen Vorbesprechungen waren die ersten Konzepte fertig und eine Seite mit dem WOW!-Effekt erblickt so langsam und sicher das Licht der Welt.
Zu den gewünschten Funktionen gehören unter anderem eine Übersicht der Events mit verschieden Kategorien, ein Blog, Gästebuch, Fotoalben und natürlich eine Verknüpfung mit den Netzwerken Youtube und Facebook. Hinter allen Funktionen steht eine Art CMS, dass ich selbst schreibe.

Der "Hintergrund" der Website wird mit einem Paralaxeffekt animiert und mit dem Vordergrund verschmelzen.

Der Fortschritt kann hier http://www.ceendesign.de/ofg begutachtet werden.

== Techniken ==

Die gesamte Website wurde mit Hilfe von '''''HTML 5''''' und '''''CSS 3''''' erstellt. Um die Seite dynamischer zu gestalten, habe ich zudem '''''PHP''''' und '''''jQuery''''' verwendet. Inhalte können von den Mitgliedern des Vereins über ein auf die Seite angepasstes selbstgeschriebenes '''''CMS''''' hinzugefügt, geändert oder gelöscht werden.

Im Hintergrund der Seite werden alle Daten in einer '''''SQL-Datenbank''''' gespeichert und abgerufen.

== Inhalte ==

=== Startseite ===

[[File:Carloenke_ofg_index_01.jpg]]

Auf der Startseite ist das zentrale Element das Newssystem. Hier wird ähnlich der der Pinnwand bei Facebook angezeigt, wenn neue Alben, Blogeinträge und News hinzugefügt wurden. Diese werden über den Aufruf

<pre>
<?php
$sql = "
(
SELECT
news.news_id AS id,
news.news_title AS title,
LEFT(news.news_body, 100) AS body,
news.time AS time,
'news' AS `type`
FROM
news
)
UNION ALL
(
SELECT
posts.post_id AS id,
posts.post_title AS title,
LEFT(posts.post_body, 300) AS body,
posts.time AS time,
'posts' AS `type`
FROM
posts
)
UNION ALL
(
SELECT
albums.album_id AS id,
albums.album_title AS title,
LEFT(albums.album_body, 200) AS body,
albums.time AS time,
'albums' AS `type`
FROM
albums
)
ORDER BY
time desc
";

$qry = mysql_query($sql);
while( $row = mysql_fetch_object($qry) )
{
if($row->type == "posts"){
echo "<div class='index_post'><div class='ip_img'><img src='admin/core/post_image/default.jpg' width='100px'></div><div class='post'><a href='blog_read.php?pid=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>Blogeintrag vom " . date("d.m.Y", $row->time) . "</font></div></div>";
}else if($row->type == "news"){
echo "<div class='news'><h1>" . utf8_encode($row->title) . "</h1>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>" . date("d.m.Y", $row->time) . "</font></div>";
}else if($row->type == "albums"){
echo "<div class='news'><a href='view_album.php?album_id=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<br/><br/><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><br/><br/><br/><br/><br/><hr/><font size='1' color='#aaa'>erstellt am " . date("d.m.Y", $row->time) . "</font></div>";
}
}
?>
</pre>
angezeigt und nach Datum des Eintrages sortiert.
Die Einträge sollen, soweit möglich auch auf Facebook gepostet werden.
Daneben gibt es noch die Anzeige über kommende Events, die nach Ablauf des Datums von der Startseite entfernt werden.

=== Über uns ===

Der Bereich umfasst alle grundlegenden Informationen rund um den Verein, wie die Chronik, Satzungen und Gremien.

=== Events ===

Veranstaltungen werden nach ihrer Art sortiert und nach deren Ablauf aus dem Layout entfernt und in einem Archiv gespeichert. Beim Klick auf ein Event kommt man zu einer genaueren Beschreibung mit allen wichtigen Informationen.

=== Bilder & Videos ===

Fotoalben können nur von Berechtigten erstellt und hochgeladen werden. Diese werden mit einem Thumbnail und kurzer Beschreibung (Titel, Anzahl der Bilder) dargestellt. Im Album direkt findet man eine Beschreibung und die einzelnen Bilder, welche in einer Lightbox geöffnet und betrachtet werden können.

Die Videos werden über YouTube hochgeladen und die Playlist bzw die einzelnen Videos in die Seite automatisch integriert. Angezeigt werden sie ähnlich wie die Fotoalben.

=== Blog ===

Dieser Bereich dient im wesentlichen dazu, die Mitglieder und Freunde des Vereins über Medienberichte und Zusammenfassungen der Veranstaltungen auf dem laufenden zu halten. Angezeigt werden ein Bild und eine kurze Vorschau zum Eintrag. Beim Klick auf einen Eintrag kommt man zum vollständigen Artikel und kann wenn Bedarf besteht ein Kommentar dazu abgeben.

=== Gästebuch ===

[[File:Carloenke_ofg_gb_01.jpg|Carloenke_ofg_gb_01.jpg]]

Das Gästebuch funktioniert ganz klassisch. Als Eintragender muss man drei Angaben machen und kann dann ins Buch einschreiben. Pro Seite werden zehn Einträge angezeigt, welche nach Aktuallität abwerts sortiert sind.

=== Links ===

Der Verein hatte den Wunsch eine extra Seite für die Sponsoren zu haben, wo alle aufgelistet und verlinkt sind.

=== Footer ===

Im Footer sind klassische Angaben wie ein Link zum Impressum, Abtretungserklärung, Anmeldebereich und ein Kontaktformular zu finden.

=== Adminbereich ===

[[File:Carloenke_ofg_admin_01.jpg|thumb|left|Events erstellen]]

Alles was hier gemachst wird, nimmt automatisch Einfluss auf die Inhalte der Website. Dazu gehört zum einen das Erstellen von Fotoalbem, Blogeinträge, News und vieles mehr.
Zusätzlich kann man neue Benutzer als Admin festlegen.
<br/><br/><br/><br/><br/><br/><br/><br/>

== Mobile Website ==

Um unterwegs auf die Inhalte der Website zugreifen zu können, entsteht parallel zur Desktopseite eine auf mobile Endgeräte angepasste Website. Die Inhalte werden nahezu alle übernommen.

Die Weiterleitung erfolgt per PHP:

<pre>
<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
header('Location: http://ceendesign.de/ofg/mobile');
?>
</pre>

== Das muss noch gemacht werden ==

* <strike>Hintergrundbild überarbeiten</strike>
* Events hinzufügen, ändern, löschen, mit einem Bild verknüpfen, nach Kategorie sortieren
* <strike>Blogeinträge ändern und mit einem Bild verknüpfen</strike>
* Fotoalben mit Bildern füllen
* Youtubevideos und Playlists automatisch einbinden
* Newsliste mit Linkerkennung und auf Facebook posten
* <strike>Datumformat einheitlich anpassen</strike>

* <strike>DAS WOHL WICHTIGSTE IST, DASS DERZEIT NOCH EINE WARNUNG AUF MALWARE ANGEZEIGT WIRD, DIE BEHOBEN WERDEN MUSS!</strike>

IFD:WebAdvancedII/Carlo Enke

2012-09-30T08:09:10Z

Carlo Enke: /* Inhalte */

=OFG oder SV OFFROAD FREUNDE GREIZ e.V.=

== Idee und Konzept ==

Hierbei handelt es sich um eine Website für einen, wie schon in der Überschrift geschrieben, Offroadverein.
Ganz nach den Wünschen des Vorstandes wird die Seite gestaltet und mit Funktionen versehen.

Der Verein kam schon im Frühjahr auf mich zu mit der Idee einer Website, die zu ihnen passt, deren Farben beinhaltet und gleich auf das Thema "OFFROAD" verweist. Nach langen Vorbesprechungen waren die ersten Konzepte fertig und eine Seite mit dem WOW!-Effekt erblickt so langsam und sicher das Licht der Welt.
Zu den gewünschten Funktionen gehören unter anderem eine Übersicht der Events mit verschieden Kategorien, ein Blog, Gästebuch, Fotoalben und natürlich eine Verknüpfung mit den Netzwerken Youtube und Facebook. Hinter allen Funktionen steht eine Art CMS, dass ich selbst schreibe.

Der "Hintergrund" der Website wird mit einem Paralaxeffekt animiert und mit dem Vordergrund verschmelzen.

Der Fortschritt kann hier http://www.ceendesign.de/ofg begutachtet werden.

== Techniken ==

Die gesamte Website wurde mit Hilfe von '''''HTML 5''''' und '''''CSS 3''''' erstellt. Um die Seite dynamischer zu gestalten, habe ich zudem '''''PHP''''' und '''''jQuery''''' verwendet. Inhalte können von den Mitgliedern des Vereins über ein auf die Seite angepasstes selbstgeschriebenes '''''CMS''''' hinzugefügt, geändert oder gelöscht werden.

Im Hintergrund der Seite werden alle Daten in einer '''''SQL-Datenbank''''' gespeichert und abgerufen.

== Inhalte ==

=== Startseite ===

[[File:Carloenke_ofg_index_01.jpg]]

Auf der Startseite ist das zentrale Element das Newssystem. Hier wird ähnlich der der Pinnwand bei Facebook angezeigt, wenn neue Alben, Blogeinträge und News hinzugefügt wurden. Diese werden über den Aufruf

<pre>
<?php
$sql = "
(
SELECT
news.news_id AS id,
news.news_title AS title,
LEFT(news.news_body, 100) AS body,
news.time AS time,
'news' AS `type`
FROM
news
)
UNION ALL
(
SELECT
posts.post_id AS id,
posts.post_title AS title,
LEFT(posts.post_body, 300) AS body,
posts.time AS time,
'posts' AS `type`
FROM
posts
)
UNION ALL
(
SELECT
albums.album_id AS id,
albums.album_title AS title,
LEFT(albums.album_body, 200) AS body,
albums.time AS time,
'albums' AS `type`
FROM
albums
)
ORDER BY
time desc
";

$qry = mysql_query($sql);
while( $row = mysql_fetch_object($qry) )
{
if($row->type == "posts"){
echo "<div class='index_post'><div class='ip_img'><img src='admin/core/post_image/default.jpg' width='100px'></div><div class='post'><a href='blog_read.php?pid=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>Blogeintrag vom " . date("d.m.Y", $row->time) . "</font></div></div>";
}else if($row->type == "news"){
echo "<div class='news'><h1>" . utf8_encode($row->title) . "</h1>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>" . date("d.m.Y", $row->time) . "</font></div>";
}else if($row->type == "albums"){
echo "<div class='news'><a href='view_album.php?album_id=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<br/><br/><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><br/><br/><br/><br/><br/><hr/><font size='1' color='#aaa'>erstellt am " . date("d.m.Y", $row->time) . "</font></div>";
}
}
?>
</pre>
angezeigt und nach Datum des Eintrages sortiert.
Die Einträge sollen, soweit möglich auch auf Facebook gepostet werden.
Daneben gibt es noch die Anzeige über kommende Events, die nach Ablauf des Datums von der Startseite entfernt werden.

=== Über uns ===

Der Bereich umfasst alle grundlegenden Informationen rund um den Verein, wie die Chronik, Satzungen und Gremien.

=== Events ===

Veranstaltungen werden nach ihrer Art sortiert und nach deren Ablauf aus dem Layout entfernt und in einem Archiv gespeichert. Beim Klick auf ein Event kommt man zu einer genaueren Beschreibung mit allen wichtigen Informationen.

=== Bilder & Videos ===

Fotoalben können nur von Berechtigten erstellt und hochgeladen werden. Diese werden mit einem Thumbnail und kurzer Beschreibung (Titel, Anzahl der Bilder) dargestellt. Im Album direkt findet man eine Beschreibung und die einzelnen Bilder, welche in einer Lightbox geöffnet und betrachtet werden können.

Die Videos werden über YouTube hochgeladen und die Playlist bzw die einzelnen Videos in die Seite automatisch integriert. Angezeigt werden sie ähnlich wie die Fotoalben.

=== Blog ===

Dieser Bereich dient im wesentlichen dazu, die Mitglieder und Freunde des Vereins über Medienberichte und Zusammenfassungen der Veranstaltungen auf dem laufenden zu halten. Angezeigt werden ein Bild und eine kurze Vorschau zum Eintrag. Beim Klick auf einen Eintrag kommt man zum vollständigen Artikel und kann wenn Bedarf besteht ein Kommentar dazu abgeben.

=== Gästebuch ===

[[File:Carloenke_ofg_gb_01.jpg|Carloenke_ofg_gb_01.jpg]]

Das Gästebuch funktioniert ganz klassisch. Als Eintragender muss man drei Angaben machen und kann dann ins Buch einschreiben. Pro Seite werden zehn Einträge angezeigt, welche nach Aktuallität abwerts sortiert sind.

=== Links ===

Der Verein hatte den Wunsch eine extra Seite für die Sponsoren zu haben, wo alle aufgelistet und verlinkt sind.

=== Footer ===

Im Footer sind klassische Angaben wie ein Link zum Impressum, Abtretungserklärung, Anmeldebereich und ein Kontaktformular zu finden.

=== Adminbereich ===

[[File:Carloenke_ofg_admin_01.jpg|thumb|left|Events erstellen]]

Alles was hier gemachst wird, nimmt automatisch Einfluss auf die Inhalte der Website. Dazu gehört zum einen das Erstellen von Fotoalbem, Blogeinträge, News und vieles mehr.
Zusätzlich kann man neue Benutzer als Admin festlegen.
<br/><br/><br/><br/><br/><br/><br/><br/>

== Mobile Website ==

Um unterwegs auf die Inhalte der Website zugreifen zu können, entsteht parallel zur Desktopseite eine auf mobile Endgeräte angepasste Website. Die Inhalte werden nahezu alle übernommen.

Die Weiterleitung erfolgt per PHP:

<pre>
<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
header('Location: http://ceendesign.de/ofg/mobile');
?>
</pre>

== Das muss noch gemacht werden ==

* Hintergrundbild überarbeiten
* Events hinzufügen, ändern, löschen, mit einem Bild verknüpfen, nach Kategorie sortieren
* <strike>Blogeinträge ändern und mit einem Bild verknüpfen</strike>
* Fotoalben mit Bildern füllen
* Youtubevideos und Playlists automatisch einbinden
* Newsliste mit Linkerkennung und auf Facebook posten
* <strike>Datumformat einheitlich anpassen</strike>

* <strike>DAS WOHL WICHTIGSTE IST, DASS DERZEIT NOCH EINE WARNUNG AUF MALWARE ANGEZEIGT WIRD, DIE BEHOBEN WERDEN MUSS!</strike>

File:Carloenke ofg gb 01.jpg

2012-09-30T08:07:29Z

Carlo Enke:

== Summary ==

== Copyright status: ==

== Source: ==

IFD:WebAdvancedII/Carlo Enke

2012-09-30T08:05:42Z

Carlo Enke: /* Inhalte */

=OFG oder SV OFFROAD FREUNDE GREIZ e.V.=

== Idee und Konzept ==

Hierbei handelt es sich um eine Website für einen, wie schon in der Überschrift geschrieben, Offroadverein.
Ganz nach den Wünschen des Vorstandes wird die Seite gestaltet und mit Funktionen versehen.

Der Verein kam schon im Frühjahr auf mich zu mit der Idee einer Website, die zu ihnen passt, deren Farben beinhaltet und gleich auf das Thema "OFFROAD" verweist. Nach langen Vorbesprechungen waren die ersten Konzepte fertig und eine Seite mit dem WOW!-Effekt erblickt so langsam und sicher das Licht der Welt.
Zu den gewünschten Funktionen gehören unter anderem eine Übersicht der Events mit verschieden Kategorien, ein Blog, Gästebuch, Fotoalben und natürlich eine Verknüpfung mit den Netzwerken Youtube und Facebook. Hinter allen Funktionen steht eine Art CMS, dass ich selbst schreibe.

Der "Hintergrund" der Website wird mit einem Paralaxeffekt animiert und mit dem Vordergrund verschmelzen.

Der Fortschritt kann hier http://www.ceendesign.de/ofg begutachtet werden.

== Techniken ==

Die gesamte Website wurde mit Hilfe von '''''HTML 5''''' und '''''CSS 3''''' erstellt. Um die Seite dynamischer zu gestalten, habe ich zudem '''''PHP''''' und '''''jQuery''''' verwendet. Inhalte können von den Mitgliedern des Vereins über ein auf die Seite angepasstes selbstgeschriebenes '''''CMS''''' hinzugefügt, geändert oder gelöscht werden.

Im Hintergrund der Seite werden alle Daten in einer '''''SQL-Datenbank''''' gespeichert und abgerufen.

== Inhalte ==

=== Startseite ===

[[File:Carloenke_ofg_index_01.jpg|Events erstellen]]

Auf der Startseite ist das zentrale Element das Newssystem. Hier wird ähnlich der der Pinnwand bei Facebook angezeigt, wenn neue Alben, Blogeinträge und News hinzugefügt wurden. Diese werden über den Aufruf

<pre>
<?php
$sql = "
(
SELECT
news.news_id AS id,
news.news_title AS title,
LEFT(news.news_body, 100) AS body,
news.time AS time,
'news' AS `type`
FROM
news
)
UNION ALL
(
SELECT
posts.post_id AS id,
posts.post_title AS title,
LEFT(posts.post_body, 300) AS body,
posts.time AS time,
'posts' AS `type`
FROM
posts
)
UNION ALL
(
SELECT
albums.album_id AS id,
albums.album_title AS title,
LEFT(albums.album_body, 200) AS body,
albums.time AS time,
'albums' AS `type`
FROM
albums
)
ORDER BY
time desc
";

$qry = mysql_query($sql);
while( $row = mysql_fetch_object($qry) )
{
if($row->type == "posts"){
echo "<div class='index_post'><div class='ip_img'><img src='admin/core/post_image/default.jpg' width='100px'></div><div class='post'><a href='blog_read.php?pid=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>Blogeintrag vom " . date("d.m.Y", $row->time) . "</font></div></div>";
}else if($row->type == "news"){
echo "<div class='news'><h1>" . utf8_encode($row->title) . "</h1>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>" . date("d.m.Y", $row->time) . "</font></div>";
}else if($row->type == "albums"){
echo "<div class='news'><a href='view_album.php?album_id=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<br/><br/><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><br/><br/><br/><br/><br/><hr/><font size='1' color='#aaa'>erstellt am " . date("d.m.Y", $row->time) . "</font></div>";
}
}
?>
</pre>
angezeigt und nach Datum des Eintrages sortiert.
Die Einträge sollen, soweit möglich auch auf Facebook gepostet werden.
Daneben gibt es noch die Anzeige über kommende Events, die nach Ablauf des Datums von der Startseite entfernt werden.

=== Über uns ===

Der Bereich umfasst alle grundlegenden Informationen rund um den Verein, wie die Chronik, Satzungen und Gremien.

=== Events ===

Veranstaltungen werden nach ihrer Art sortiert und nach deren Ablauf aus dem Layout entfernt und in einem Archiv gespeichert. Beim Klick auf ein Event kommt man zu einer genaueren Beschreibung mit allen wichtigen Informationen.

=== Bilder & Videos ===

Fotoalben können nur von Berechtigten erstellt und hochgeladen werden. Diese werden mit einem Thumbnail und kurzer Beschreibung (Titel, Anzahl der Bilder) dargestellt. Im Album direkt findet man eine Beschreibung und die einzelnen Bilder, welche in einer Lightbox geöffnet und betrachtet werden können.

Die Videos werden über YouTube hochgeladen und die Playlist bzw die einzelnen Videos in die Seite automatisch integriert. Angezeigt werden sie ähnlich wie die Fotoalben.

=== Blog ===

Dieser Bereich dient im wesentlichen dazu, die Mitglieder und Freunde des Vereins über Medienberichte und Zusammenfassungen der Veranstaltungen auf dem laufenden zu halten. Angezeigt werden ein Bild und eine kurze Vorschau zum Eintrag. Beim Klick auf einen Eintrag kommt man zum vollständigen Artikel und kann wenn Bedarf besteht ein Kommentar dazu abgeben.

=== Gästebuch ===

Das Gästebuch funktioniert ganz klassisch. Als Eintragender muss man drei Angaben machen und kann dann ins Buch einschreiben. Pro Seite werden zehn Einträge angezeigt, welche nach Aktuallität abwerts sortiert sind.

=== Links ===

Der Verein hatte den Wunsch eine extra Seite für die Sponsoren zu haben, wo alle aufgelistet und verlinkt sind.

=== Footer ===

Im Footer sind klassische Angaben wie ein Link zum Impressum, Abtretungserklärung, Anmeldebereich und ein Kontaktformular zu finden.

=== Adminbereich ===

[[File:Carloenke_ofg_admin_01.jpg|thumb|left|Events erstellen]]

Alles was hier gemachst wird, nimmt automatisch Einfluss auf die Inhalte der Website. Dazu gehört zum einen das Erstellen von Fotoalbem, Blogeinträge, News und vieles mehr.
Zusätzlich kann man neue Benutzer als Admin festlegen.
<br/><br/><br/><br/><br/><br/><br/><br/>

== Mobile Website ==

Um unterwegs auf die Inhalte der Website zugreifen zu können, entsteht parallel zur Desktopseite eine auf mobile Endgeräte angepasste Website. Die Inhalte werden nahezu alle übernommen.

Die Weiterleitung erfolgt per PHP:

<pre>
<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
header('Location: http://ceendesign.de/ofg/mobile');
?>
</pre>

== Das muss noch gemacht werden ==

* Hintergrundbild überarbeiten
* Events hinzufügen, ändern, löschen, mit einem Bild verknüpfen, nach Kategorie sortieren
* <strike>Blogeinträge ändern und mit einem Bild verknüpfen</strike>
* Fotoalben mit Bildern füllen
* Youtubevideos und Playlists automatisch einbinden
* Newsliste mit Linkerkennung und auf Facebook posten
* <strike>Datumformat einheitlich anpassen</strike>

* <strike>DAS WOHL WICHTIGSTE IST, DASS DERZEIT NOCH EINE WARNUNG AUF MALWARE ANGEZEIGT WIRD, DIE BEHOBEN WERDEN MUSS!</strike>

File:Carloenke ofg index 01.jpg

2012-09-30T08:04:04Z

Carlo Enke:

== Summary ==

== Copyright status: ==

== Source: ==

IFD:WebAdvancedII/Carlo Enke

2012-09-30T08:00:39Z

Carlo Enke: /* Adminbereich */

=OFG oder SV OFFROAD FREUNDE GREIZ e.V.=

== Idee und Konzept ==

Hierbei handelt es sich um eine Website für einen, wie schon in der Überschrift geschrieben, Offroadverein.
Ganz nach den Wünschen des Vorstandes wird die Seite gestaltet und mit Funktionen versehen.

Der Verein kam schon im Frühjahr auf mich zu mit der Idee einer Website, die zu ihnen passt, deren Farben beinhaltet und gleich auf das Thema "OFFROAD" verweist. Nach langen Vorbesprechungen waren die ersten Konzepte fertig und eine Seite mit dem WOW!-Effekt erblickt so langsam und sicher das Licht der Welt.
Zu den gewünschten Funktionen gehören unter anderem eine Übersicht der Events mit verschieden Kategorien, ein Blog, Gästebuch, Fotoalben und natürlich eine Verknüpfung mit den Netzwerken Youtube und Facebook. Hinter allen Funktionen steht eine Art CMS, dass ich selbst schreibe.

Der "Hintergrund" der Website wird mit einem Paralaxeffekt animiert und mit dem Vordergrund verschmelzen.

Der Fortschritt kann hier http://www.ceendesign.de/ofg begutachtet werden.

== Techniken ==

Die gesamte Website wurde mit Hilfe von '''''HTML 5''''' und '''''CSS 3''''' erstellt. Um die Seite dynamischer zu gestalten, habe ich zudem '''''PHP''''' und '''''jQuery''''' verwendet. Inhalte können von den Mitgliedern des Vereins über ein auf die Seite angepasstes selbstgeschriebenes '''''CMS''''' hinzugefügt, geändert oder gelöscht werden.

Im Hintergrund der Seite werden alle Daten in einer '''''SQL-Datenbank''''' gespeichert und abgerufen.

== Inhalte ==

=== Startseite ===

Auf der Startseite ist das zentrale Element das Newssystem. Hier wird ähnlich der der Pinnwand bei Facebook angezeigt, wenn neue Alben, Blogeinträge und News hinzugefügt wurden. Diese werden über den Aufruf

<pre>
<?php
$sql = "
(
SELECT
news.news_id AS id,
news.news_title AS title,
LEFT(news.news_body, 100) AS body,
news.time AS time,
'news' AS `type`
FROM
news
)
UNION ALL
(
SELECT
posts.post_id AS id,
posts.post_title AS title,
LEFT(posts.post_body, 300) AS body,
posts.time AS time,
'posts' AS `type`
FROM
posts
)
UNION ALL
(
SELECT
albums.album_id AS id,
albums.album_title AS title,
LEFT(albums.album_body, 200) AS body,
albums.time AS time,
'albums' AS `type`
FROM
albums
)
ORDER BY
time desc
";

$qry = mysql_query($sql);
while( $row = mysql_fetch_object($qry) )
{
if($row->type == "posts"){
echo "<div class='index_post'><div class='ip_img'><img src='admin/core/post_image/default.jpg' width='100px'></div><div class='post'><a href='blog_read.php?pid=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>Blogeintrag vom " . date("d.m.Y", $row->time) . "</font></div></div>";
}else if($row->type == "news"){
echo "<div class='news'><h1>" . utf8_encode($row->title) . "</h1>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>" . date("d.m.Y", $row->time) . "</font></div>";
}else if($row->type == "albums"){
echo "<div class='news'><a href='view_album.php?album_id=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<br/><br/><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><br/><br/><br/><br/><br/><hr/><font size='1' color='#aaa'>erstellt am " . date("d.m.Y", $row->time) . "</font></div>";
}
}
?>
</pre>
angezeigt und nach Datum des Eintrages sortiert.
Die Einträge sollen, soweit möglich auch auf Facebook gepostet werden.
Daneben gibt es noch die Anzeige über kommende Events, die nach Ablauf des Datums von der Startseite entfernt werden.

=== Über uns ===

Der Bereich umfasst alle grundlegenden Informationen rund um den Verein, wie die Chronik, Satzungen und Gremien.

=== Events ===

Veranstaltungen werden nach ihrer Art sortiert und nach deren Ablauf aus dem Layout entfernt und in einem Archiv gespeichert. Beim Klick auf ein Event kommt man zu einer genaueren Beschreibung mit allen wichtigen Informationen.

=== Bilder & Videos ===

Fotoalben können nur von Berechtigten erstellt und hochgeladen werden. Diese werden mit einem Thumbnail und kurzer Beschreibung (Titel, Anzahl der Bilder) dargestellt. Im Album direkt findet man eine Beschreibung und die einzelnen Bilder, welche in einer Lightbox geöffnet und betrachtet werden können.

Die Videos werden über YouTube hochgeladen und die Playlist bzw die einzelnen Videos in die Seite automatisch integriert. Angezeigt werden sie ähnlich wie die Fotoalben.

=== Blog ===

Dieser Bereich dient im wesentlichen dazu, die Mitglieder und Freunde des Vereins über Medienberichte und Zusammenfassungen der Veranstaltungen auf dem laufenden zu halten. Angezeigt werden ein Bild und eine kurze Vorschau zum Eintrag. Beim Klick auf einen Eintrag kommt man zum vollständigen Artikel und kann wenn Bedarf besteht ein Kommentar dazu abgeben.

=== Gästebuch ===

Das Gästebuch funktioniert ganz klassisch. Als Eintragender muss man drei Angaben machen und kann dann ins Buch einschreiben. Pro Seite werden zehn Einträge angezeigt, welche nach Aktuallität abwerts sortiert sind.

=== Links ===

Der Verein hatte den Wunsch eine extra Seite für die Sponsoren zu haben, wo alle aufgelistet und verlinkt sind.

=== Footer ===

Im Footer sind klassische Angaben wie ein Link zum Impressum, Abtretungserklärung, Anmeldebereich und ein Kontaktformular zu finden.

=== Adminbereich ===

[[File:Carloenke_ofg_admin_01.jpg|thumb|left|Events erstellen]]

Alles was hier gemachst wird, nimmt automatisch Einfluss auf die Inhalte der Website. Dazu gehört zum einen das Erstellen von Fotoalbem, Blogeinträge, News und vieles mehr.
Zusätzlich kann man neue Benutzer als Admin festlegen.
<br/><br/><br/><br/><br/><br/><br/><br/>

== Mobile Website ==

Um unterwegs auf die Inhalte der Website zugreifen zu können, entsteht parallel zur Desktopseite eine auf mobile Endgeräte angepasste Website. Die Inhalte werden nahezu alle übernommen.

Die Weiterleitung erfolgt per PHP:

<pre>
<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
header('Location: http://ceendesign.de/ofg/mobile');
?>
</pre>

== Das muss noch gemacht werden ==

* Hintergrundbild überarbeiten
* Events hinzufügen, ändern, löschen, mit einem Bild verknüpfen, nach Kategorie sortieren
* <strike>Blogeinträge ändern und mit einem Bild verknüpfen</strike>
* Fotoalben mit Bildern füllen
* Youtubevideos und Playlists automatisch einbinden
* Newsliste mit Linkerkennung und auf Facebook posten
* <strike>Datumformat einheitlich anpassen</strike>

* <strike>DAS WOHL WICHTIGSTE IST, DASS DERZEIT NOCH EINE WARNUNG AUF MALWARE ANGEZEIGT WIRD, DIE BEHOBEN WERDEN MUSS!</strike>

IFD:WebAdvancedII/Carlo Enke

2012-09-30T07:59:59Z

Carlo Enke: /* Adminbereich */

=OFG oder SV OFFROAD FREUNDE GREIZ e.V.=

== Idee und Konzept ==

Hierbei handelt es sich um eine Website für einen, wie schon in der Überschrift geschrieben, Offroadverein.
Ganz nach den Wünschen des Vorstandes wird die Seite gestaltet und mit Funktionen versehen.

Der Verein kam schon im Frühjahr auf mich zu mit der Idee einer Website, die zu ihnen passt, deren Farben beinhaltet und gleich auf das Thema "OFFROAD" verweist. Nach langen Vorbesprechungen waren die ersten Konzepte fertig und eine Seite mit dem WOW!-Effekt erblickt so langsam und sicher das Licht der Welt.
Zu den gewünschten Funktionen gehören unter anderem eine Übersicht der Events mit verschieden Kategorien, ein Blog, Gästebuch, Fotoalben und natürlich eine Verknüpfung mit den Netzwerken Youtube und Facebook. Hinter allen Funktionen steht eine Art CMS, dass ich selbst schreibe.

Der "Hintergrund" der Website wird mit einem Paralaxeffekt animiert und mit dem Vordergrund verschmelzen.

Der Fortschritt kann hier http://www.ceendesign.de/ofg begutachtet werden.

== Techniken ==

Die gesamte Website wurde mit Hilfe von '''''HTML 5''''' und '''''CSS 3''''' erstellt. Um die Seite dynamischer zu gestalten, habe ich zudem '''''PHP''''' und '''''jQuery''''' verwendet. Inhalte können von den Mitgliedern des Vereins über ein auf die Seite angepasstes selbstgeschriebenes '''''CMS''''' hinzugefügt, geändert oder gelöscht werden.

Im Hintergrund der Seite werden alle Daten in einer '''''SQL-Datenbank''''' gespeichert und abgerufen.

== Inhalte ==

=== Startseite ===

Auf der Startseite ist das zentrale Element das Newssystem. Hier wird ähnlich der der Pinnwand bei Facebook angezeigt, wenn neue Alben, Blogeinträge und News hinzugefügt wurden. Diese werden über den Aufruf

<pre>
<?php
$sql = "
(
SELECT
news.news_id AS id,
news.news_title AS title,
LEFT(news.news_body, 100) AS body,
news.time AS time,
'news' AS `type`
FROM
news
)
UNION ALL
(
SELECT
posts.post_id AS id,
posts.post_title AS title,
LEFT(posts.post_body, 300) AS body,
posts.time AS time,
'posts' AS `type`
FROM
posts
)
UNION ALL
(
SELECT
albums.album_id AS id,
albums.album_title AS title,
LEFT(albums.album_body, 200) AS body,
albums.time AS time,
'albums' AS `type`
FROM
albums
)
ORDER BY
time desc
";

$qry = mysql_query($sql);
while( $row = mysql_fetch_object($qry) )
{
if($row->type == "posts"){
echo "<div class='index_post'><div class='ip_img'><img src='admin/core/post_image/default.jpg' width='100px'></div><div class='post'><a href='blog_read.php?pid=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>Blogeintrag vom " . date("d.m.Y", $row->time) . "</font></div></div>";
}else if($row->type == "news"){
echo "<div class='news'><h1>" . utf8_encode($row->title) . "</h1>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>" . date("d.m.Y", $row->time) . "</font></div>";
}else if($row->type == "albums"){
echo "<div class='news'><a href='view_album.php?album_id=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<br/><br/><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><br/><br/><br/><br/><br/><hr/><font size='1' color='#aaa'>erstellt am " . date("d.m.Y", $row->time) . "</font></div>";
}
}
?>
</pre>
angezeigt und nach Datum des Eintrages sortiert.
Die Einträge sollen, soweit möglich auch auf Facebook gepostet werden.
Daneben gibt es noch die Anzeige über kommende Events, die nach Ablauf des Datums von der Startseite entfernt werden.

=== Über uns ===

Der Bereich umfasst alle grundlegenden Informationen rund um den Verein, wie die Chronik, Satzungen und Gremien.

=== Events ===

Veranstaltungen werden nach ihrer Art sortiert und nach deren Ablauf aus dem Layout entfernt und in einem Archiv gespeichert. Beim Klick auf ein Event kommt man zu einer genaueren Beschreibung mit allen wichtigen Informationen.

=== Bilder & Videos ===

Fotoalben können nur von Berechtigten erstellt und hochgeladen werden. Diese werden mit einem Thumbnail und kurzer Beschreibung (Titel, Anzahl der Bilder) dargestellt. Im Album direkt findet man eine Beschreibung und die einzelnen Bilder, welche in einer Lightbox geöffnet und betrachtet werden können.

Die Videos werden über YouTube hochgeladen und die Playlist bzw die einzelnen Videos in die Seite automatisch integriert. Angezeigt werden sie ähnlich wie die Fotoalben.

=== Blog ===

Dieser Bereich dient im wesentlichen dazu, die Mitglieder und Freunde des Vereins über Medienberichte und Zusammenfassungen der Veranstaltungen auf dem laufenden zu halten. Angezeigt werden ein Bild und eine kurze Vorschau zum Eintrag. Beim Klick auf einen Eintrag kommt man zum vollständigen Artikel und kann wenn Bedarf besteht ein Kommentar dazu abgeben.

=== Gästebuch ===

Das Gästebuch funktioniert ganz klassisch. Als Eintragender muss man drei Angaben machen und kann dann ins Buch einschreiben. Pro Seite werden zehn Einträge angezeigt, welche nach Aktuallität abwerts sortiert sind.

=== Links ===

Der Verein hatte den Wunsch eine extra Seite für die Sponsoren zu haben, wo alle aufgelistet und verlinkt sind.

=== Footer ===

Im Footer sind klassische Angaben wie ein Link zum Impressum, Abtretungserklärung, Anmeldebereich und ein Kontaktformular zu finden.

=== Adminbereich ===

[[File:Carloenke_ofg_admin_01.jpg|thumb|left|Events erstellen]]

Alles was hier gemachst wird, nimmt automatisch Einfluss auf die Inhalte der Website. Dazu gehört zum einen das Erstellen von Fotoalbem, Blogeinträge, News und vieles mehr.
Zusätzlich kann man neue Benutzer als Admin festlegen.

== Mobile Website ==

Um unterwegs auf die Inhalte der Website zugreifen zu können, entsteht parallel zur Desktopseite eine auf mobile Endgeräte angepasste Website. Die Inhalte werden nahezu alle übernommen.

Die Weiterleitung erfolgt per PHP:

<pre>
<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
header('Location: http://ceendesign.de/ofg/mobile');
?>
</pre>

== Das muss noch gemacht werden ==

* Hintergrundbild überarbeiten
* Events hinzufügen, ändern, löschen, mit einem Bild verknüpfen, nach Kategorie sortieren
* <strike>Blogeinträge ändern und mit einem Bild verknüpfen</strike>
* Fotoalben mit Bildern füllen
* Youtubevideos und Playlists automatisch einbinden
* Newsliste mit Linkerkennung und auf Facebook posten
* <strike>Datumformat einheitlich anpassen</strike>

* <strike>DAS WOHL WICHTIGSTE IST, DASS DERZEIT NOCH EINE WARNUNG AUF MALWARE ANGEZEIGT WIRD, DIE BEHOBEN WERDEN MUSS!</strike>

IFD:WebAdvancedII/Carlo Enke

2012-09-30T07:59:41Z

Carlo Enke: /* Adminbereich */

=OFG oder SV OFFROAD FREUNDE GREIZ e.V.=

== Idee und Konzept ==

Hierbei handelt es sich um eine Website für einen, wie schon in der Überschrift geschrieben, Offroadverein.
Ganz nach den Wünschen des Vorstandes wird die Seite gestaltet und mit Funktionen versehen.

Der Verein kam schon im Frühjahr auf mich zu mit der Idee einer Website, die zu ihnen passt, deren Farben beinhaltet und gleich auf das Thema "OFFROAD" verweist. Nach langen Vorbesprechungen waren die ersten Konzepte fertig und eine Seite mit dem WOW!-Effekt erblickt so langsam und sicher das Licht der Welt.
Zu den gewünschten Funktionen gehören unter anderem eine Übersicht der Events mit verschieden Kategorien, ein Blog, Gästebuch, Fotoalben und natürlich eine Verknüpfung mit den Netzwerken Youtube und Facebook. Hinter allen Funktionen steht eine Art CMS, dass ich selbst schreibe.

Der "Hintergrund" der Website wird mit einem Paralaxeffekt animiert und mit dem Vordergrund verschmelzen.

Der Fortschritt kann hier http://www.ceendesign.de/ofg begutachtet werden.

== Techniken ==

Die gesamte Website wurde mit Hilfe von '''''HTML 5''''' und '''''CSS 3''''' erstellt. Um die Seite dynamischer zu gestalten, habe ich zudem '''''PHP''''' und '''''jQuery''''' verwendet. Inhalte können von den Mitgliedern des Vereins über ein auf die Seite angepasstes selbstgeschriebenes '''''CMS''''' hinzugefügt, geändert oder gelöscht werden.

Im Hintergrund der Seite werden alle Daten in einer '''''SQL-Datenbank''''' gespeichert und abgerufen.

== Inhalte ==

=== Startseite ===

Auf der Startseite ist das zentrale Element das Newssystem. Hier wird ähnlich der der Pinnwand bei Facebook angezeigt, wenn neue Alben, Blogeinträge und News hinzugefügt wurden. Diese werden über den Aufruf

<pre>
<?php
$sql = "
(
SELECT
news.news_id AS id,
news.news_title AS title,
LEFT(news.news_body, 100) AS body,
news.time AS time,
'news' AS `type`
FROM
news
)
UNION ALL
(
SELECT
posts.post_id AS id,
posts.post_title AS title,
LEFT(posts.post_body, 300) AS body,
posts.time AS time,
'posts' AS `type`
FROM
posts
)
UNION ALL
(
SELECT
albums.album_id AS id,
albums.album_title AS title,
LEFT(albums.album_body, 200) AS body,
albums.time AS time,
'albums' AS `type`
FROM
albums
)
ORDER BY
time desc
";

$qry = mysql_query($sql);
while( $row = mysql_fetch_object($qry) )
{
if($row->type == "posts"){
echo "<div class='index_post'><div class='ip_img'><img src='admin/core/post_image/default.jpg' width='100px'></div><div class='post'><a href='blog_read.php?pid=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>Blogeintrag vom " . date("d.m.Y", $row->time) . "</font></div></div>";
}else if($row->type == "news"){
echo "<div class='news'><h1>" . utf8_encode($row->title) . "</h1>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>" . date("d.m.Y", $row->time) . "</font></div>";
}else if($row->type == "albums"){
echo "<div class='news'><a href='view_album.php?album_id=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<br/><br/><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><br/><br/><br/><br/><br/><hr/><font size='1' color='#aaa'>erstellt am " . date("d.m.Y", $row->time) . "</font></div>";
}
}
?>
</pre>
angezeigt und nach Datum des Eintrages sortiert.
Die Einträge sollen, soweit möglich auch auf Facebook gepostet werden.
Daneben gibt es noch die Anzeige über kommende Events, die nach Ablauf des Datums von der Startseite entfernt werden.

=== Über uns ===

Der Bereich umfasst alle grundlegenden Informationen rund um den Verein, wie die Chronik, Satzungen und Gremien.

=== Events ===

Veranstaltungen werden nach ihrer Art sortiert und nach deren Ablauf aus dem Layout entfernt und in einem Archiv gespeichert. Beim Klick auf ein Event kommt man zu einer genaueren Beschreibung mit allen wichtigen Informationen.

=== Bilder & Videos ===

Fotoalben können nur von Berechtigten erstellt und hochgeladen werden. Diese werden mit einem Thumbnail und kurzer Beschreibung (Titel, Anzahl der Bilder) dargestellt. Im Album direkt findet man eine Beschreibung und die einzelnen Bilder, welche in einer Lightbox geöffnet und betrachtet werden können.

Die Videos werden über YouTube hochgeladen und die Playlist bzw die einzelnen Videos in die Seite automatisch integriert. Angezeigt werden sie ähnlich wie die Fotoalben.

=== Blog ===

Dieser Bereich dient im wesentlichen dazu, die Mitglieder und Freunde des Vereins über Medienberichte und Zusammenfassungen der Veranstaltungen auf dem laufenden zu halten. Angezeigt werden ein Bild und eine kurze Vorschau zum Eintrag. Beim Klick auf einen Eintrag kommt man zum vollständigen Artikel und kann wenn Bedarf besteht ein Kommentar dazu abgeben.

=== Gästebuch ===

Das Gästebuch funktioniert ganz klassisch. Als Eintragender muss man drei Angaben machen und kann dann ins Buch einschreiben. Pro Seite werden zehn Einträge angezeigt, welche nach Aktuallität abwerts sortiert sind.

=== Links ===

Der Verein hatte den Wunsch eine extra Seite für die Sponsoren zu haben, wo alle aufgelistet und verlinkt sind.

=== Footer ===

Im Footer sind klassische Angaben wie ein Link zum Impressum, Abtretungserklärung, Anmeldebereich und ein Kontaktformular zu finden.

=== Adminbereich ===

[[File:Carloenke_ofg_admin_01.jpg|300px|left|Events erstellen]]

Alles was hier gemachst wird, nimmt automatisch Einfluss auf die Inhalte der Website. Dazu gehört zum einen das Erstellen von Fotoalbem, Blogeinträge, News und vieles mehr.
Zusätzlich kann man neue Benutzer als Admin festlegen.

== Mobile Website ==

Um unterwegs auf die Inhalte der Website zugreifen zu können, entsteht parallel zur Desktopseite eine auf mobile Endgeräte angepasste Website. Die Inhalte werden nahezu alle übernommen.

Die Weiterleitung erfolgt per PHP:

<pre>
<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
header('Location: http://ceendesign.de/ofg/mobile');
?>
</pre>

== Das muss noch gemacht werden ==

* Hintergrundbild überarbeiten
* Events hinzufügen, ändern, löschen, mit einem Bild verknüpfen, nach Kategorie sortieren
* <strike>Blogeinträge ändern und mit einem Bild verknüpfen</strike>
* Fotoalben mit Bildern füllen
* Youtubevideos und Playlists automatisch einbinden
* Newsliste mit Linkerkennung und auf Facebook posten
* <strike>Datumformat einheitlich anpassen</strike>

* <strike>DAS WOHL WICHTIGSTE IST, DASS DERZEIT NOCH EINE WARNUNG AUF MALWARE ANGEZEIGT WIRD, DIE BEHOBEN WERDEN MUSS!</strike>

IFD:WebAdvancedII/Carlo Enke

2012-09-30T07:59:08Z

Carlo Enke: /* Adminbereich */

=OFG oder SV OFFROAD FREUNDE GREIZ e.V.=

== Idee und Konzept ==

Hierbei handelt es sich um eine Website für einen, wie schon in der Überschrift geschrieben, Offroadverein.
Ganz nach den Wünschen des Vorstandes wird die Seite gestaltet und mit Funktionen versehen.

Der Verein kam schon im Frühjahr auf mich zu mit der Idee einer Website, die zu ihnen passt, deren Farben beinhaltet und gleich auf das Thema "OFFROAD" verweist. Nach langen Vorbesprechungen waren die ersten Konzepte fertig und eine Seite mit dem WOW!-Effekt erblickt so langsam und sicher das Licht der Welt.
Zu den gewünschten Funktionen gehören unter anderem eine Übersicht der Events mit verschieden Kategorien, ein Blog, Gästebuch, Fotoalben und natürlich eine Verknüpfung mit den Netzwerken Youtube und Facebook. Hinter allen Funktionen steht eine Art CMS, dass ich selbst schreibe.

Der "Hintergrund" der Website wird mit einem Paralaxeffekt animiert und mit dem Vordergrund verschmelzen.

Der Fortschritt kann hier http://www.ceendesign.de/ofg begutachtet werden.

== Techniken ==

Die gesamte Website wurde mit Hilfe von '''''HTML 5''''' und '''''CSS 3''''' erstellt. Um die Seite dynamischer zu gestalten, habe ich zudem '''''PHP''''' und '''''jQuery''''' verwendet. Inhalte können von den Mitgliedern des Vereins über ein auf die Seite angepasstes selbstgeschriebenes '''''CMS''''' hinzugefügt, geändert oder gelöscht werden.

Im Hintergrund der Seite werden alle Daten in einer '''''SQL-Datenbank''''' gespeichert und abgerufen.

== Inhalte ==

=== Startseite ===

Auf der Startseite ist das zentrale Element das Newssystem. Hier wird ähnlich der der Pinnwand bei Facebook angezeigt, wenn neue Alben, Blogeinträge und News hinzugefügt wurden. Diese werden über den Aufruf

<pre>
<?php
$sql = "
(
SELECT
news.news_id AS id,
news.news_title AS title,
LEFT(news.news_body, 100) AS body,
news.time AS time,
'news' AS `type`
FROM
news
)
UNION ALL
(
SELECT
posts.post_id AS id,
posts.post_title AS title,
LEFT(posts.post_body, 300) AS body,
posts.time AS time,
'posts' AS `type`
FROM
posts
)
UNION ALL
(
SELECT
albums.album_id AS id,
albums.album_title AS title,
LEFT(albums.album_body, 200) AS body,
albums.time AS time,
'albums' AS `type`
FROM
albums
)
ORDER BY
time desc
";

$qry = mysql_query($sql);
while( $row = mysql_fetch_object($qry) )
{
if($row->type == "posts"){
echo "<div class='index_post'><div class='ip_img'><img src='admin/core/post_image/default.jpg' width='100px'></div><div class='post'><a href='blog_read.php?pid=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>Blogeintrag vom " . date("d.m.Y", $row->time) . "</font></div></div>";
}else if($row->type == "news"){
echo "<div class='news'><h1>" . utf8_encode($row->title) . "</h1>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>" . date("d.m.Y", $row->time) . "</font></div>";
}else if($row->type == "albums"){
echo "<div class='news'><a href='view_album.php?album_id=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<br/><br/><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><br/><br/><br/><br/><br/><hr/><font size='1' color='#aaa'>erstellt am " . date("d.m.Y", $row->time) . "</font></div>";
}
}
?>
</pre>
angezeigt und nach Datum des Eintrages sortiert.
Die Einträge sollen, soweit möglich auch auf Facebook gepostet werden.
Daneben gibt es noch die Anzeige über kommende Events, die nach Ablauf des Datums von der Startseite entfernt werden.

=== Über uns ===

Der Bereich umfasst alle grundlegenden Informationen rund um den Verein, wie die Chronik, Satzungen und Gremien.

=== Events ===

Veranstaltungen werden nach ihrer Art sortiert und nach deren Ablauf aus dem Layout entfernt und in einem Archiv gespeichert. Beim Klick auf ein Event kommt man zu einer genaueren Beschreibung mit allen wichtigen Informationen.

=== Bilder & Videos ===

Fotoalben können nur von Berechtigten erstellt und hochgeladen werden. Diese werden mit einem Thumbnail und kurzer Beschreibung (Titel, Anzahl der Bilder) dargestellt. Im Album direkt findet man eine Beschreibung und die einzelnen Bilder, welche in einer Lightbox geöffnet und betrachtet werden können.

Die Videos werden über YouTube hochgeladen und die Playlist bzw die einzelnen Videos in die Seite automatisch integriert. Angezeigt werden sie ähnlich wie die Fotoalben.

=== Blog ===

Dieser Bereich dient im wesentlichen dazu, die Mitglieder und Freunde des Vereins über Medienberichte und Zusammenfassungen der Veranstaltungen auf dem laufenden zu halten. Angezeigt werden ein Bild und eine kurze Vorschau zum Eintrag. Beim Klick auf einen Eintrag kommt man zum vollständigen Artikel und kann wenn Bedarf besteht ein Kommentar dazu abgeben.

=== Gästebuch ===

Das Gästebuch funktioniert ganz klassisch. Als Eintragender muss man drei Angaben machen und kann dann ins Buch einschreiben. Pro Seite werden zehn Einträge angezeigt, welche nach Aktuallität abwerts sortiert sind.

=== Links ===

Der Verein hatte den Wunsch eine extra Seite für die Sponsoren zu haben, wo alle aufgelistet und verlinkt sind.

=== Footer ===

Im Footer sind klassische Angaben wie ein Link zum Impressum, Abtretungserklärung, Anmeldebereich und ein Kontaktformular zu finden.

=== Adminbereich ===

[[File:Carloenke_ofg_admin_01.jpg|300px|right|Events erstellen]]

Alles was hier gemachst wird, nimmt automatisch Einfluss auf die Inhalte der Website. Dazu gehört zum einen das Erstellen von Fotoalbem, Blogeinträge, News und vieles mehr.
Zusätzlich kann man neue Benutzer als Admin festlegen.

== Mobile Website ==

Um unterwegs auf die Inhalte der Website zugreifen zu können, entsteht parallel zur Desktopseite eine auf mobile Endgeräte angepasste Website. Die Inhalte werden nahezu alle übernommen.

Die Weiterleitung erfolgt per PHP:

<pre>
<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
header('Location: http://ceendesign.de/ofg/mobile');
?>
</pre>

== Das muss noch gemacht werden ==

* Hintergrundbild überarbeiten
* Events hinzufügen, ändern, löschen, mit einem Bild verknüpfen, nach Kategorie sortieren
* <strike>Blogeinträge ändern und mit einem Bild verknüpfen</strike>
* Fotoalben mit Bildern füllen
* Youtubevideos und Playlists automatisch einbinden
* Newsliste mit Linkerkennung und auf Facebook posten
* <strike>Datumformat einheitlich anpassen</strike>

* <strike>DAS WOHL WICHTIGSTE IST, DASS DERZEIT NOCH EINE WARNUNG AUF MALWARE ANGEZEIGT WIRD, DIE BEHOBEN WERDEN MUSS!</strike>

IFD:WebAdvancedII/Carlo Enke

2012-09-30T07:58:44Z

Carlo Enke: /* Adminbereich */

=OFG oder SV OFFROAD FREUNDE GREIZ e.V.=

== Idee und Konzept ==

Hierbei handelt es sich um eine Website für einen, wie schon in der Überschrift geschrieben, Offroadverein.
Ganz nach den Wünschen des Vorstandes wird die Seite gestaltet und mit Funktionen versehen.

Der Verein kam schon im Frühjahr auf mich zu mit der Idee einer Website, die zu ihnen passt, deren Farben beinhaltet und gleich auf das Thema "OFFROAD" verweist. Nach langen Vorbesprechungen waren die ersten Konzepte fertig und eine Seite mit dem WOW!-Effekt erblickt so langsam und sicher das Licht der Welt.
Zu den gewünschten Funktionen gehören unter anderem eine Übersicht der Events mit verschieden Kategorien, ein Blog, Gästebuch, Fotoalben und natürlich eine Verknüpfung mit den Netzwerken Youtube und Facebook. Hinter allen Funktionen steht eine Art CMS, dass ich selbst schreibe.

Der "Hintergrund" der Website wird mit einem Paralaxeffekt animiert und mit dem Vordergrund verschmelzen.

Der Fortschritt kann hier http://www.ceendesign.de/ofg begutachtet werden.

== Techniken ==

Die gesamte Website wurde mit Hilfe von '''''HTML 5''''' und '''''CSS 3''''' erstellt. Um die Seite dynamischer zu gestalten, habe ich zudem '''''PHP''''' und '''''jQuery''''' verwendet. Inhalte können von den Mitgliedern des Vereins über ein auf die Seite angepasstes selbstgeschriebenes '''''CMS''''' hinzugefügt, geändert oder gelöscht werden.

Im Hintergrund der Seite werden alle Daten in einer '''''SQL-Datenbank''''' gespeichert und abgerufen.

== Inhalte ==

=== Startseite ===

Auf der Startseite ist das zentrale Element das Newssystem. Hier wird ähnlich der der Pinnwand bei Facebook angezeigt, wenn neue Alben, Blogeinträge und News hinzugefügt wurden. Diese werden über den Aufruf

<pre>
<?php
$sql = "
(
SELECT
news.news_id AS id,
news.news_title AS title,
LEFT(news.news_body, 100) AS body,
news.time AS time,
'news' AS `type`
FROM
news
)
UNION ALL
(
SELECT
posts.post_id AS id,
posts.post_title AS title,
LEFT(posts.post_body, 300) AS body,
posts.time AS time,
'posts' AS `type`
FROM
posts
)
UNION ALL
(
SELECT
albums.album_id AS id,
albums.album_title AS title,
LEFT(albums.album_body, 200) AS body,
albums.time AS time,
'albums' AS `type`
FROM
albums
)
ORDER BY
time desc
";

$qry = mysql_query($sql);
while( $row = mysql_fetch_object($qry) )
{
if($row->type == "posts"){
echo "<div class='index_post'><div class='ip_img'><img src='admin/core/post_image/default.jpg' width='100px'></div><div class='post'><a href='blog_read.php?pid=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>Blogeintrag vom " . date("d.m.Y", $row->time) . "</font></div></div>";
}else if($row->type == "news"){
echo "<div class='news'><h1>" . utf8_encode($row->title) . "</h1>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>" . date("d.m.Y", $row->time) . "</font></div>";
}else if($row->type == "albums"){
echo "<div class='news'><a href='view_album.php?album_id=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<br/><br/><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><br/><br/><br/><br/><br/><hr/><font size='1' color='#aaa'>erstellt am " . date("d.m.Y", $row->time) . "</font></div>";
}
}
?>
</pre>
angezeigt und nach Datum des Eintrages sortiert.
Die Einträge sollen, soweit möglich auch auf Facebook gepostet werden.
Daneben gibt es noch die Anzeige über kommende Events, die nach Ablauf des Datums von der Startseite entfernt werden.

=== Über uns ===

Der Bereich umfasst alle grundlegenden Informationen rund um den Verein, wie die Chronik, Satzungen und Gremien.

=== Events ===

Veranstaltungen werden nach ihrer Art sortiert und nach deren Ablauf aus dem Layout entfernt und in einem Archiv gespeichert. Beim Klick auf ein Event kommt man zu einer genaueren Beschreibung mit allen wichtigen Informationen.

=== Bilder & Videos ===

Fotoalben können nur von Berechtigten erstellt und hochgeladen werden. Diese werden mit einem Thumbnail und kurzer Beschreibung (Titel, Anzahl der Bilder) dargestellt. Im Album direkt findet man eine Beschreibung und die einzelnen Bilder, welche in einer Lightbox geöffnet und betrachtet werden können.

Die Videos werden über YouTube hochgeladen und die Playlist bzw die einzelnen Videos in die Seite automatisch integriert. Angezeigt werden sie ähnlich wie die Fotoalben.

=== Blog ===

Dieser Bereich dient im wesentlichen dazu, die Mitglieder und Freunde des Vereins über Medienberichte und Zusammenfassungen der Veranstaltungen auf dem laufenden zu halten. Angezeigt werden ein Bild und eine kurze Vorschau zum Eintrag. Beim Klick auf einen Eintrag kommt man zum vollständigen Artikel und kann wenn Bedarf besteht ein Kommentar dazu abgeben.

=== Gästebuch ===

Das Gästebuch funktioniert ganz klassisch. Als Eintragender muss man drei Angaben machen und kann dann ins Buch einschreiben. Pro Seite werden zehn Einträge angezeigt, welche nach Aktuallität abwerts sortiert sind.

=== Links ===

Der Verein hatte den Wunsch eine extra Seite für die Sponsoren zu haben, wo alle aufgelistet und verlinkt sind.

=== Footer ===

Im Footer sind klassische Angaben wie ein Link zum Impressum, Abtretungserklärung, Anmeldebereich und ein Kontaktformular zu finden.

=== Adminbereich ===

[[File:Carloenke_ofg_admin_01.jpg|right|Events erstellen]]

Alles was hier gemachst wird, nimmt automatisch Einfluss auf die Inhalte der Website. Dazu gehört zum einen das Erstellen von Fotoalbem, Blogeinträge, News und vieles mehr.
Zusätzlich kann man neue Benutzer als Admin festlegen.

== Mobile Website ==

Um unterwegs auf die Inhalte der Website zugreifen zu können, entsteht parallel zur Desktopseite eine auf mobile Endgeräte angepasste Website. Die Inhalte werden nahezu alle übernommen.

Die Weiterleitung erfolgt per PHP:

<pre>
<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
header('Location: http://ceendesign.de/ofg/mobile');
?>
</pre>

== Das muss noch gemacht werden ==

* Hintergrundbild überarbeiten
* Events hinzufügen, ändern, löschen, mit einem Bild verknüpfen, nach Kategorie sortieren
* <strike>Blogeinträge ändern und mit einem Bild verknüpfen</strike>
* Fotoalben mit Bildern füllen
* Youtubevideos und Playlists automatisch einbinden
* Newsliste mit Linkerkennung und auf Facebook posten
* <strike>Datumformat einheitlich anpassen</strike>

* <strike>DAS WOHL WICHTIGSTE IST, DASS DERZEIT NOCH EINE WARNUNG AUF MALWARE ANGEZEIGT WIRD, DIE BEHOBEN WERDEN MUSS!</strike>

IFD:WebAdvancedII/Carlo Enke

2012-09-30T07:58:17Z

Carlo Enke: /* Adminbereich */

=OFG oder SV OFFROAD FREUNDE GREIZ e.V.=

== Idee und Konzept ==

Hierbei handelt es sich um eine Website für einen, wie schon in der Überschrift geschrieben, Offroadverein.
Ganz nach den Wünschen des Vorstandes wird die Seite gestaltet und mit Funktionen versehen.

Der Verein kam schon im Frühjahr auf mich zu mit der Idee einer Website, die zu ihnen passt, deren Farben beinhaltet und gleich auf das Thema "OFFROAD" verweist. Nach langen Vorbesprechungen waren die ersten Konzepte fertig und eine Seite mit dem WOW!-Effekt erblickt so langsam und sicher das Licht der Welt.
Zu den gewünschten Funktionen gehören unter anderem eine Übersicht der Events mit verschieden Kategorien, ein Blog, Gästebuch, Fotoalben und natürlich eine Verknüpfung mit den Netzwerken Youtube und Facebook. Hinter allen Funktionen steht eine Art CMS, dass ich selbst schreibe.

Der "Hintergrund" der Website wird mit einem Paralaxeffekt animiert und mit dem Vordergrund verschmelzen.

Der Fortschritt kann hier http://www.ceendesign.de/ofg begutachtet werden.

== Techniken ==

Die gesamte Website wurde mit Hilfe von '''''HTML 5''''' und '''''CSS 3''''' erstellt. Um die Seite dynamischer zu gestalten, habe ich zudem '''''PHP''''' und '''''jQuery''''' verwendet. Inhalte können von den Mitgliedern des Vereins über ein auf die Seite angepasstes selbstgeschriebenes '''''CMS''''' hinzugefügt, geändert oder gelöscht werden.

Im Hintergrund der Seite werden alle Daten in einer '''''SQL-Datenbank''''' gespeichert und abgerufen.

== Inhalte ==

=== Startseite ===

Auf der Startseite ist das zentrale Element das Newssystem. Hier wird ähnlich der der Pinnwand bei Facebook angezeigt, wenn neue Alben, Blogeinträge und News hinzugefügt wurden. Diese werden über den Aufruf

<pre>
<?php
$sql = "
(
SELECT
news.news_id AS id,
news.news_title AS title,
LEFT(news.news_body, 100) AS body,
news.time AS time,
'news' AS `type`
FROM
news
)
UNION ALL
(
SELECT
posts.post_id AS id,
posts.post_title AS title,
LEFT(posts.post_body, 300) AS body,
posts.time AS time,
'posts' AS `type`
FROM
posts
)
UNION ALL
(
SELECT
albums.album_id AS id,
albums.album_title AS title,
LEFT(albums.album_body, 200) AS body,
albums.time AS time,
'albums' AS `type`
FROM
albums
)
ORDER BY
time desc
";

$qry = mysql_query($sql);
while( $row = mysql_fetch_object($qry) )
{
if($row->type == "posts"){
echo "<div class='index_post'><div class='ip_img'><img src='admin/core/post_image/default.jpg' width='100px'></div><div class='post'><a href='blog_read.php?pid=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>Blogeintrag vom " . date("d.m.Y", $row->time) . "</font></div></div>";
}else if($row->type == "news"){
echo "<div class='news'><h1>" . utf8_encode($row->title) . "</h1>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>" . date("d.m.Y", $row->time) . "</font></div>";
}else if($row->type == "albums"){
echo "<div class='news'><a href='view_album.php?album_id=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<br/><br/><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><br/><br/><br/><br/><br/><hr/><font size='1' color='#aaa'>erstellt am " . date("d.m.Y", $row->time) . "</font></div>";
}
}
?>
</pre>
angezeigt und nach Datum des Eintrages sortiert.
Die Einträge sollen, soweit möglich auch auf Facebook gepostet werden.
Daneben gibt es noch die Anzeige über kommende Events, die nach Ablauf des Datums von der Startseite entfernt werden.

=== Über uns ===

Der Bereich umfasst alle grundlegenden Informationen rund um den Verein, wie die Chronik, Satzungen und Gremien.

=== Events ===

Veranstaltungen werden nach ihrer Art sortiert und nach deren Ablauf aus dem Layout entfernt und in einem Archiv gespeichert. Beim Klick auf ein Event kommt man zu einer genaueren Beschreibung mit allen wichtigen Informationen.

=== Bilder & Videos ===

Fotoalben können nur von Berechtigten erstellt und hochgeladen werden. Diese werden mit einem Thumbnail und kurzer Beschreibung (Titel, Anzahl der Bilder) dargestellt. Im Album direkt findet man eine Beschreibung und die einzelnen Bilder, welche in einer Lightbox geöffnet und betrachtet werden können.

Die Videos werden über YouTube hochgeladen und die Playlist bzw die einzelnen Videos in die Seite automatisch integriert. Angezeigt werden sie ähnlich wie die Fotoalben.

=== Blog ===

Dieser Bereich dient im wesentlichen dazu, die Mitglieder und Freunde des Vereins über Medienberichte und Zusammenfassungen der Veranstaltungen auf dem laufenden zu halten. Angezeigt werden ein Bild und eine kurze Vorschau zum Eintrag. Beim Klick auf einen Eintrag kommt man zum vollständigen Artikel und kann wenn Bedarf besteht ein Kommentar dazu abgeben.

=== Gästebuch ===

Das Gästebuch funktioniert ganz klassisch. Als Eintragender muss man drei Angaben machen und kann dann ins Buch einschreiben. Pro Seite werden zehn Einträge angezeigt, welche nach Aktuallität abwerts sortiert sind.

=== Links ===

Der Verein hatte den Wunsch eine extra Seite für die Sponsoren zu haben, wo alle aufgelistet und verlinkt sind.

=== Footer ===

Im Footer sind klassische Angaben wie ein Link zum Impressum, Abtretungserklärung, Anmeldebereich und ein Kontaktformular zu finden.

=== Adminbereich ===

[[File:Carloenke_ofg_admin_01.jpg|thumb|right|Events erstellen]]

Alles was hier gemachst wird, nimmt automatisch Einfluss auf die Inhalte der Website. Dazu gehört zum einen das Erstellen von Fotoalbem, Blogeinträge, News und vieles mehr.
Zusätzlich kann man neue Benutzer als Admin festlegen.

== Mobile Website ==

Um unterwegs auf die Inhalte der Website zugreifen zu können, entsteht parallel zur Desktopseite eine auf mobile Endgeräte angepasste Website. Die Inhalte werden nahezu alle übernommen.

Die Weiterleitung erfolgt per PHP:

<pre>
<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
header('Location: http://ceendesign.de/ofg/mobile');
?>
</pre>

== Das muss noch gemacht werden ==

* Hintergrundbild überarbeiten
* Events hinzufügen, ändern, löschen, mit einem Bild verknüpfen, nach Kategorie sortieren
* <strike>Blogeinträge ändern und mit einem Bild verknüpfen</strike>
* Fotoalben mit Bildern füllen
* Youtubevideos und Playlists automatisch einbinden
* Newsliste mit Linkerkennung und auf Facebook posten
* <strike>Datumformat einheitlich anpassen</strike>

* <strike>DAS WOHL WICHTIGSTE IST, DASS DERZEIT NOCH EINE WARNUNG AUF MALWARE ANGEZEIGT WIRD, DIE BEHOBEN WERDEN MUSS!</strike>

File:Carloenke ofg admin 01.jpg

2012-09-30T07:55:59Z

Carlo Enke:

== Summary ==

== Copyright status: ==

== Source: ==

IFD:WebAdvancedII/Carlo Enke

2012-09-30T07:47:36Z

Carlo Enke: /* Das muss noch gemacht werden */

=OFG oder SV OFFROAD FREUNDE GREIZ e.V.=

== Idee und Konzept ==

Hierbei handelt es sich um eine Website für einen, wie schon in der Überschrift geschrieben, Offroadverein.
Ganz nach den Wünschen des Vorstandes wird die Seite gestaltet und mit Funktionen versehen.

Der Verein kam schon im Frühjahr auf mich zu mit der Idee einer Website, die zu ihnen passt, deren Farben beinhaltet und gleich auf das Thema "OFFROAD" verweist. Nach langen Vorbesprechungen waren die ersten Konzepte fertig und eine Seite mit dem WOW!-Effekt erblickt so langsam und sicher das Licht der Welt.
Zu den gewünschten Funktionen gehören unter anderem eine Übersicht der Events mit verschieden Kategorien, ein Blog, Gästebuch, Fotoalben und natürlich eine Verknüpfung mit den Netzwerken Youtube und Facebook. Hinter allen Funktionen steht eine Art CMS, dass ich selbst schreibe.

Der "Hintergrund" der Website wird mit einem Paralaxeffekt animiert und mit dem Vordergrund verschmelzen.

Der Fortschritt kann hier http://www.ceendesign.de/ofg begutachtet werden.

== Techniken ==

Die gesamte Website wurde mit Hilfe von '''''HTML 5''''' und '''''CSS 3''''' erstellt. Um die Seite dynamischer zu gestalten, habe ich zudem '''''PHP''''' und '''''jQuery''''' verwendet. Inhalte können von den Mitgliedern des Vereins über ein auf die Seite angepasstes selbstgeschriebenes '''''CMS''''' hinzugefügt, geändert oder gelöscht werden.

Im Hintergrund der Seite werden alle Daten in einer '''''SQL-Datenbank''''' gespeichert und abgerufen.

== Inhalte ==

=== Startseite ===

Auf der Startseite ist das zentrale Element das Newssystem. Hier wird ähnlich der der Pinnwand bei Facebook angezeigt, wenn neue Alben, Blogeinträge und News hinzugefügt wurden. Diese werden über den Aufruf

<pre>
<?php
$sql = "
(
SELECT
news.news_id AS id,
news.news_title AS title,
LEFT(news.news_body, 100) AS body,
news.time AS time,
'news' AS `type`
FROM
news
)
UNION ALL
(
SELECT
posts.post_id AS id,
posts.post_title AS title,
LEFT(posts.post_body, 300) AS body,
posts.time AS time,
'posts' AS `type`
FROM
posts
)
UNION ALL
(
SELECT
albums.album_id AS id,
albums.album_title AS title,
LEFT(albums.album_body, 200) AS body,
albums.time AS time,
'albums' AS `type`
FROM
albums
)
ORDER BY
time desc
";

$qry = mysql_query($sql);
while( $row = mysql_fetch_object($qry) )
{
if($row->type == "posts"){
echo "<div class='index_post'><div class='ip_img'><img src='admin/core/post_image/default.jpg' width='100px'></div><div class='post'><a href='blog_read.php?pid=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>Blogeintrag vom " . date("d.m.Y", $row->time) . "</font></div></div>";
}else if($row->type == "news"){
echo "<div class='news'><h1>" . utf8_encode($row->title) . "</h1>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>" . date("d.m.Y", $row->time) . "</font></div>";
}else if($row->type == "albums"){
echo "<div class='news'><a href='view_album.php?album_id=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<br/><br/><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><br/><br/><br/><br/><br/><hr/><font size='1' color='#aaa'>erstellt am " . date("d.m.Y", $row->time) . "</font></div>";
}
}
?>
</pre>
angezeigt und nach Datum des Eintrages sortiert.
Die Einträge sollen, soweit möglich auch auf Facebook gepostet werden.
Daneben gibt es noch die Anzeige über kommende Events, die nach Ablauf des Datums von der Startseite entfernt werden.

=== Über uns ===

Der Bereich umfasst alle grundlegenden Informationen rund um den Verein, wie die Chronik, Satzungen und Gremien.

=== Events ===

Veranstaltungen werden nach ihrer Art sortiert und nach deren Ablauf aus dem Layout entfernt und in einem Archiv gespeichert. Beim Klick auf ein Event kommt man zu einer genaueren Beschreibung mit allen wichtigen Informationen.

=== Bilder & Videos ===

Fotoalben können nur von Berechtigten erstellt und hochgeladen werden. Diese werden mit einem Thumbnail und kurzer Beschreibung (Titel, Anzahl der Bilder) dargestellt. Im Album direkt findet man eine Beschreibung und die einzelnen Bilder, welche in einer Lightbox geöffnet und betrachtet werden können.

Die Videos werden über YouTube hochgeladen und die Playlist bzw die einzelnen Videos in die Seite automatisch integriert. Angezeigt werden sie ähnlich wie die Fotoalben.

=== Blog ===

Dieser Bereich dient im wesentlichen dazu, die Mitglieder und Freunde des Vereins über Medienberichte und Zusammenfassungen der Veranstaltungen auf dem laufenden zu halten. Angezeigt werden ein Bild und eine kurze Vorschau zum Eintrag. Beim Klick auf einen Eintrag kommt man zum vollständigen Artikel und kann wenn Bedarf besteht ein Kommentar dazu abgeben.

=== Gästebuch ===

Das Gästebuch funktioniert ganz klassisch. Als Eintragender muss man drei Angaben machen und kann dann ins Buch einschreiben. Pro Seite werden zehn Einträge angezeigt, welche nach Aktuallität abwerts sortiert sind.

=== Links ===

Der Verein hatte den Wunsch eine extra Seite für die Sponsoren zu haben, wo alle aufgelistet und verlinkt sind.

=== Footer ===

Im Footer sind klassische Angaben wie ein Link zum Impressum, Abtretungserklärung, Anmeldebereich und ein Kontaktformular zu finden.

=== Adminbereich ===

Alles was hier gemachst wird, nimmt automatisch Einfluss auf die Inhalte der Website. Dazu gehört zum einen das Erstellen von Fotoalbem, Blogeinträge, News und vieles mehr.
Zusätzlich kann man neue Benutzer als Admin festlegen.

== Mobile Website ==

Um unterwegs auf die Inhalte der Website zugreifen zu können, entsteht parallel zur Desktopseite eine auf mobile Endgeräte angepasste Website. Die Inhalte werden nahezu alle übernommen.

Die Weiterleitung erfolgt per PHP:

<pre>
<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
header('Location: http://ceendesign.de/ofg/mobile');
?>
</pre>

== Das muss noch gemacht werden ==

* Hintergrundbild überarbeiten
* Events hinzufügen, ändern, löschen, mit einem Bild verknüpfen, nach Kategorie sortieren
* <strike>Blogeinträge ändern und mit einem Bild verknüpfen</strike>
* Fotoalben mit Bildern füllen
* Youtubevideos und Playlists automatisch einbinden
* Newsliste mit Linkerkennung und auf Facebook posten
* <strike>Datumformat einheitlich anpassen</strike>

* <strike>DAS WOHL WICHTIGSTE IST, DASS DERZEIT NOCH EINE WARNUNG AUF MALWARE ANGEZEIGT WIRD, DIE BEHOBEN WERDEN MUSS!</strike>

IFD:WebAdvancedII/Carlo Enke

2012-09-21T17:07:13Z

Carlo Enke: /* Das muss noch gemacht werden */

=OFG oder SV OFFROAD FREUNDE GREIZ e.V.=

== Idee und Konzept ==

Hierbei handelt es sich um eine Website für einen, wie schon in der Überschrift geschrieben, Offroadverein.
Ganz nach den Wünschen des Vorstandes wird die Seite gestaltet und mit Funktionen versehen.

Der Verein kam schon im Frühjahr auf mich zu mit der Idee einer Website, die zu ihnen passt, deren Farben beinhaltet und gleich auf das Thema "OFFROAD" verweist. Nach langen Vorbesprechungen waren die ersten Konzepte fertig und eine Seite mit dem WOW!-Effekt erblickt so langsam und sicher das Licht der Welt.
Zu den gewünschten Funktionen gehören unter anderem eine Übersicht der Events mit verschieden Kategorien, ein Blog, Gästebuch, Fotoalben und natürlich eine Verknüpfung mit den Netzwerken Youtube und Facebook. Hinter allen Funktionen steht eine Art CMS, dass ich selbst schreibe.

Der "Hintergrund" der Website wird mit einem Paralaxeffekt animiert und mit dem Vordergrund verschmelzen.

Der Fortschritt kann hier http://www.ceendesign.de/ofg begutachtet werden.

== Techniken ==

Die gesamte Website wurde mit Hilfe von '''''HTML 5''''' und '''''CSS 3''''' erstellt. Um die Seite dynamischer zu gestalten, habe ich zudem '''''PHP''''' und '''''jQuery''''' verwendet. Inhalte können von den Mitgliedern des Vereins über ein auf die Seite angepasstes selbstgeschriebenes '''''CMS''''' hinzugefügt, geändert oder gelöscht werden.

Im Hintergrund der Seite werden alle Daten in einer '''''SQL-Datenbank''''' gespeichert und abgerufen.

== Inhalte ==

=== Startseite ===

Auf der Startseite ist das zentrale Element das Newssystem. Hier wird ähnlich der der Pinnwand bei Facebook angezeigt, wenn neue Alben, Blogeinträge und News hinzugefügt wurden. Diese werden über den Aufruf

<pre>
<?php
$sql = "
(
SELECT
news.news_id AS id,
news.news_title AS title,
LEFT(news.news_body, 100) AS body,
news.time AS time,
'news' AS `type`
FROM
news
)
UNION ALL
(
SELECT
posts.post_id AS id,
posts.post_title AS title,
LEFT(posts.post_body, 300) AS body,
posts.time AS time,
'posts' AS `type`
FROM
posts
)
UNION ALL
(
SELECT
albums.album_id AS id,
albums.album_title AS title,
LEFT(albums.album_body, 200) AS body,
albums.time AS time,
'albums' AS `type`
FROM
albums
)
ORDER BY
time desc
";

$qry = mysql_query($sql);
while( $row = mysql_fetch_object($qry) )
{
if($row->type == "posts"){
echo "<div class='index_post'><div class='ip_img'><img src='admin/core/post_image/default.jpg' width='100px'></div><div class='post'><a href='blog_read.php?pid=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>Blogeintrag vom " . date("d.m.Y", $row->time) . "</font></div></div>";
}else if($row->type == "news"){
echo "<div class='news'><h1>" . utf8_encode($row->title) . "</h1>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>" . date("d.m.Y", $row->time) . "</font></div>";
}else if($row->type == "albums"){
echo "<div class='news'><a href='view_album.php?album_id=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<br/><br/><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><br/><br/><br/><br/><br/><hr/><font size='1' color='#aaa'>erstellt am " . date("d.m.Y", $row->time) . "</font></div>";
}
}
?>
</pre>
angezeigt und nach Datum des Eintrages sortiert.
Die Einträge sollen, soweit möglich auch auf Facebook gepostet werden.
Daneben gibt es noch die Anzeige über kommende Events, die nach Ablauf des Datums von der Startseite entfernt werden.

=== Über uns ===

Der Bereich umfasst alle grundlegenden Informationen rund um den Verein, wie die Chronik, Satzungen und Gremien.

=== Events ===

Veranstaltungen werden nach ihrer Art sortiert und nach deren Ablauf aus dem Layout entfernt und in einem Archiv gespeichert. Beim Klick auf ein Event kommt man zu einer genaueren Beschreibung mit allen wichtigen Informationen.

=== Bilder & Videos ===

Fotoalben können nur von Berechtigten erstellt und hochgeladen werden. Diese werden mit einem Thumbnail und kurzer Beschreibung (Titel, Anzahl der Bilder) dargestellt. Im Album direkt findet man eine Beschreibung und die einzelnen Bilder, welche in einer Lightbox geöffnet und betrachtet werden können.

Die Videos werden über YouTube hochgeladen und die Playlist bzw die einzelnen Videos in die Seite automatisch integriert. Angezeigt werden sie ähnlich wie die Fotoalben.

=== Blog ===

Dieser Bereich dient im wesentlichen dazu, die Mitglieder und Freunde des Vereins über Medienberichte und Zusammenfassungen der Veranstaltungen auf dem laufenden zu halten. Angezeigt werden ein Bild und eine kurze Vorschau zum Eintrag. Beim Klick auf einen Eintrag kommt man zum vollständigen Artikel und kann wenn Bedarf besteht ein Kommentar dazu abgeben.

=== Gästebuch ===

Das Gästebuch funktioniert ganz klassisch. Als Eintragender muss man drei Angaben machen und kann dann ins Buch einschreiben. Pro Seite werden zehn Einträge angezeigt, welche nach Aktuallität abwerts sortiert sind.

=== Links ===

Der Verein hatte den Wunsch eine extra Seite für die Sponsoren zu haben, wo alle aufgelistet und verlinkt sind.

=== Footer ===

Im Footer sind klassische Angaben wie ein Link zum Impressum, Abtretungserklärung, Anmeldebereich und ein Kontaktformular zu finden.

=== Adminbereich ===

Alles was hier gemachst wird, nimmt automatisch Einfluss auf die Inhalte der Website. Dazu gehört zum einen das Erstellen von Fotoalbem, Blogeinträge, News und vieles mehr.
Zusätzlich kann man neue Benutzer als Admin festlegen.

== Mobile Website ==

Um unterwegs auf die Inhalte der Website zugreifen zu können, entsteht parallel zur Desktopseite eine auf mobile Endgeräte angepasste Website. Die Inhalte werden nahezu alle übernommen.

Die Weiterleitung erfolgt per PHP:

<pre>
<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
header('Location: http://ceendesign.de/ofg/mobile');
?>
</pre>

== Das muss noch gemacht werden ==

* Hintergrundbild überarbeiten
* Events hinzufügen, ändern, löschen, mit einem Bild verknüpfen, nach Kategorie sortieren
* Blogeinträge ändern <strike>und mit einem Bild verknüpfen</strike>
* Fotoalben mit Bildern füllen
* Youtubevideos und Playlists automatisch einbinden
* Newsliste mit Linkerkennung und auf Facebook posten
* <strike>Datumformat einheitlich anpassen</strike>

* DAS WOHL WICHTIGSTE IST, DASS DERZEIT NOCH EINE WARNUNG AUF MALWARE ANGEZEIGT WIRD, DIE BEHOBEN WERDEN MUSS!

IFD:WebAdvancedII/Carlo Enke

2012-09-21T08:03:05Z

Carlo Enke: /* Das muss noch gemacht werden */

=OFG oder SV OFFROAD FREUNDE GREIZ e.V.=

== Idee und Konzept ==

Hierbei handelt es sich um eine Website für einen, wie schon in der Überschrift geschrieben, Offroadverein.
Ganz nach den Wünschen des Vorstandes wird die Seite gestaltet und mit Funktionen versehen.

Der Verein kam schon im Frühjahr auf mich zu mit der Idee einer Website, die zu ihnen passt, deren Farben beinhaltet und gleich auf das Thema "OFFROAD" verweist. Nach langen Vorbesprechungen waren die ersten Konzepte fertig und eine Seite mit dem WOW!-Effekt erblickt so langsam und sicher das Licht der Welt.
Zu den gewünschten Funktionen gehören unter anderem eine Übersicht der Events mit verschieden Kategorien, ein Blog, Gästebuch, Fotoalben und natürlich eine Verknüpfung mit den Netzwerken Youtube und Facebook. Hinter allen Funktionen steht eine Art CMS, dass ich selbst schreibe.

Der "Hintergrund" der Website wird mit einem Paralaxeffekt animiert und mit dem Vordergrund verschmelzen.

Der Fortschritt kann hier http://www.ceendesign.de/ofg begutachtet werden.

== Techniken ==

Die gesamte Website wurde mit Hilfe von '''''HTML 5''''' und '''''CSS 3''''' erstellt. Um die Seite dynamischer zu gestalten, habe ich zudem '''''PHP''''' und '''''jQuery''''' verwendet. Inhalte können von den Mitgliedern des Vereins über ein auf die Seite angepasstes selbstgeschriebenes '''''CMS''''' hinzugefügt, geändert oder gelöscht werden.

Im Hintergrund der Seite werden alle Daten in einer '''''SQL-Datenbank''''' gespeichert und abgerufen.

== Inhalte ==

=== Startseite ===

Auf der Startseite ist das zentrale Element das Newssystem. Hier wird ähnlich der der Pinnwand bei Facebook angezeigt, wenn neue Alben, Blogeinträge und News hinzugefügt wurden. Diese werden über den Aufruf

<pre>
<?php
$sql = "
(
SELECT
news.news_id AS id,
news.news_title AS title,
LEFT(news.news_body, 100) AS body,
news.time AS time,
'news' AS `type`
FROM
news
)
UNION ALL
(
SELECT
posts.post_id AS id,
posts.post_title AS title,
LEFT(posts.post_body, 300) AS body,
posts.time AS time,
'posts' AS `type`
FROM
posts
)
UNION ALL
(
SELECT
albums.album_id AS id,
albums.album_title AS title,
LEFT(albums.album_body, 200) AS body,
albums.time AS time,
'albums' AS `type`
FROM
albums
)
ORDER BY
time desc
";

$qry = mysql_query($sql);
while( $row = mysql_fetch_object($qry) )
{
if($row->type == "posts"){
echo "<div class='index_post'><div class='ip_img'><img src='admin/core/post_image/default.jpg' width='100px'></div><div class='post'><a href='blog_read.php?pid=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>Blogeintrag vom " . date("d.m.Y", $row->time) . "</font></div></div>";
}else if($row->type == "news"){
echo "<div class='news'><h1>" . utf8_encode($row->title) . "</h1>" . utf8_encode($row->body) . "<hr/><font size='1' color='#aaa'>" . date("d.m.Y", $row->time) . "</font></div>";
}else if($row->type == "albums"){
echo "<div class='news'><a href='view_album.php?album_id=" . $row->id . "'><h1>" . utf8_encode($row->title) . "</h1></a>" . utf8_encode($row->body) . "<br/><br/><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><div class='index_album'></div><br/><br/><br/><br/><br/><hr/><font size='1' color='#aaa'>erstellt am " . date("d.m.Y", $row->time) . "</font></div>";
}
}
?>
</pre>
angezeigt und nach Datum des Eintrages sortiert.
Die Einträge sollen, soweit möglich auch auf Facebook gepostet werden.
Daneben gibt es noch die Anzeige über kommende Events, die nach Ablauf des Datums von der Startseite entfernt werden.

=== Über uns ===

Der Bereich umfasst alle grundlegenden Informationen rund um den Verein, wie die Chronik, Satzungen und Gremien.

=== Events ===

Veranstaltungen werden nach ihrer Art sortiert und nach deren Ablauf aus dem Layout entfernt und in einem Archiv gespeichert. Beim Klick auf ein Event kommt man zu einer genaueren Beschreibung mit allen wichtigen Informationen.

=== Bilder & Videos ===

Fotoalben können nur von Berechtigten erstellt und hochgeladen werden. Diese werden mit einem Thumbnail und kurzer Beschreibung (Titel, Anzahl der Bilder) dargestellt. Im Album direkt findet man eine Beschreibung und die einzelnen Bilder, welche in einer Lightbox geöffnet und betrachtet werden können.

Die Videos werden über YouTube hochgeladen und die Playlist bzw die einzelnen Videos in die Seite automatisch integriert. Angezeigt werden sie ähnlich wie die Fotoalben.

=== Blog ===

Dieser Bereich dient im wesentlichen dazu, die Mitglieder und Freunde des Vereins über Medienberichte und Zusammenfassungen der Veranstaltungen auf dem laufenden zu halten. Angezeigt werden ein Bild und eine kurze Vorschau zum Eintrag. Beim Klick auf einen Eintrag kommt man zum vollständigen Artikel und kann wenn Bedarf besteht ein Kommentar dazu abgeben.

=== Gästebuch ===

Das Gästebuch funktioniert ganz klassisch. Als Eintragender muss man drei Angaben machen und kann dann ins Buch einschreiben. Pro Seite werden zehn Einträge angezeigt, welche nach Aktuallität abwerts sortiert sind.

=== Links ===

Der Verein hatte den Wunsch eine extra Seite für die Sponsoren zu haben, wo alle aufgelistet und verlinkt sind.

=== Footer ===

Im Footer sind klassische Angaben wie ein Link zum Impressum, Abtretungserklärung, Anmeldebereich und ein Kontaktformular zu finden.

=== Adminbereich ===

Alles was hier gemachst wird, nimmt automatisch Einfluss auf die Inhalte der Website. Dazu gehört zum einen das Erstellen von Fotoalbem, Blogeinträge, News und vieles mehr.
Zusätzlich kann man neue Benutzer als Admin festlegen.

== Mobile Website ==

Um unterwegs auf die Inhalte der Website zugreifen zu können, entsteht parallel zur Desktopseite eine auf mobile Endgeräte angepasste Website. Die Inhalte werden nahezu alle übernommen.

Die Weiterleitung erfolgt per PHP:

<pre>
<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
header('Location: http://ceendesign.de/ofg/mobile');
?>
</pre>

== Das muss noch gemacht werden ==

* Hintergrundbild überarbeiten
* Events hinzufügen, ändern, löschen, mit einem Bild verknüpfen, nach Kategorie sortieren
* Blogeinträge ändern und mit einem Bild verknüpfen
* Fotoalben mit Bildern füllen
* Youtubevideos und Playlists automatisch einbinden
* Newsliste mit Linkerkennung und auf Facebook posten
* <strike>Datumformat einheitlich anpassen</strike>

* DAS WOHL WICHTIGSTE IST, DASS DERZEIT NOCH EINE WARNUNG AUF MALWARE ANGEZEIGT WIRD, DIE BEHOBEN WERDEN MUSS!