Moderne Webseitenerstellung

[Ticketz]

Moin,

ich muss aktuell in meinem Studium als Hausarbeit/Projekt eine eigene Bewerberwebseite erstellen. Allgemein sollen es 3 Seiten sein. Einmal zum Bespiel "Begrüßung", Lebenslauf & Motivationsschreiben bzw. was mich Auszeichnet, was ich mir wünsche, und einen eher Privaten Bereich mit Fotos und Videos.
Realisiert werden soll das mit HTML5, CSS3 und PHP. GGf. auch eine Datenbank mit MySQL

Eine grobe Vorstellung, wie das ganze Aussehen soll habe ich schon. Auch gibt es einige Vorgaben aber die theoretischen Grundlagen für mein Konzept bereiten mir aktuell Probleme.

Im Zusammenhang mit der Webseite soll auch eine Hausarbeit abgegeben werden, in der wir unter anderem den aktuellen Stand soweit beleuchten, wie ich ihn auch für die Webseite verwenden möchte/werde.
Aber da fängt es dann schon an. Wie wird aktuell gearbeitet, was ist der aktuelle Stand der Technik und woher bekomme ich solche Infos?
Was beim Design und Aufbau moder ist, ist nicht schwer herauszufinden, da gibt es genug Artikel von Technikwebseiten. Wie wird das aber umgesetzt?

Ich habe schon ein paar Webseiten dazu gefunden aber auch in unserer Bibliothek gibt es nur wenig Fachbücher die das so explizit beschreiben.

Bei HTML5 weiß ich zum Bespiel, dass es deutlich mehr Tags gibt und nun auch dynamische Inhalte eingebunden werden können und dazu kein externes Programm benötigt wird. Auch gibt es deutlich mehr Sicherheitsfeatures, die benutzt werden können.


In der angehängten PDF ist unter "Leitfragen zu 2." im zweiten Absatz entsprechende Fragen, die ich mir stellen kann.

Des Weiteren würde ich mich auch über Tipps und Anregungen für eine solche Arbeit freuen.

mfG

 

[Mr. Black]

Ohne das PDF angeschaut zu haben: Wenn du externe Frameworks nutzen darfst, schau dir doch mal Bootstrap 3 oder die v4 Alpha an.

Damit kann man viel anstellen, ohne gleich das Rad neuzuerfinden.

(Und ich meine jetzt nicht, dass du die Vorlagen nutzen sollst, nur die Möglichkeiten des Frameworks!)

 

[Ticketz]

gut, dass du das noch Ergänzt hast. In einer anderen Unterlage steht "Vorgenerierte Layouts oder Baukästen sind nicht zu verwenden!!!". Allerdings hatte mein Prof. auf die Frage ob ich auch ein Spiel wie Pong einbauen darf gesagt, dass ich dafür ja sicherlich fertigen Code verwenden würde. Soweit ist das also durchaus in Ordnung, wir sollen eben nicht das Rad neu erfinden.

Problematisch finde ich auch, dass wir in der Vorlesung nicht weit sind und insgesamt kaum Grundlagen haben. Andrerseits hatte er uns alte Konzepte/Arbeiten gezeigt, die erstmal nicht so ausführlich schienen, wie ich mir das Vorstelle. Ich habe halt gerade das Problem einen guten Ansatz für den Anfang zu finden.

 

[Mr. Black]

Du kannst natürlich zu Übungszwecken dir ein paar Templates herunterladen und daran herumspielen, nachvollziehen etc. um dann was eigenes auf die Beine stellen zu können.

Ich selbst habe etwa 8 Websites erstellt bisher - alle mit irgendeinem Framework wie Bootstrap o.ä. . Wäre mir viel zu umständlich, jede Kleinigkeit selbst zu machen.

 

[Bagbag]

Ich kann dir auf jeden Fall empfehlen den Umgang mit der Flexbox zu erlernen. Das ist beim Layout unheimlich hilfreich.

Falls das ganze responsive werden soll, solltest du neben der Flexbox auch noch Media Queries erlernen.

Wenn es eine One-Pager Seite sein soll, sind Frameworks wie Angular oder React ganz hilfreich, da du die Website dann wie eine klassische Desktop-Anwendung erstellen kannst - mit wiederverwendbaren "Controls" / "Components" und abgetrennter (JavaScript)-Logik.

 

[Smartass]

... im zweiten Absatz entsprechende Fragen ich mir stellen kann ...

Master Yoda;-) ich habe mir gerade das PDF angesehen: da wird unter Abschnitt 3.1 "Fachlich-technische Anforderungen" die

Trennung von:
• Inhalt und Struktur ................. (HTML)
• Layout und Design ................... (CSS)
• Interaktion und Verhalten ........... (PHP)

verlangt. Das könnte man nun -theoretisch- so verstehen, dass damit die Einbettung von PHP-Code in HTML (bzw. von HTML-Code in PHP) NICHT gestattet ist. Was also wiederum bedeuten würde, dass nicht nur die

Trennung von:
• Inhalt und Layout der Webseiten ..... (HTML + CSS) = logisch, sondern auch die von
• HTML-"Grundgerüst" und Seiteninhalten (PHP)

gemeint ist: damit aber letztlich die Erstellung eines PHP-Steuerungskripts gefordert wäre, das dann unter Einbezug einer Datenquelle alle möglichen Seiten zusammenbaut - was wiederum eine WESENTLICH anspruchsvollere Aufgabenstellung darstellen würde.

Wie gesagt, kaum vorstellbar, aber ich würde das klären.

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

Anmerkung: Es war der Punkt, der über "Trennung von ..." steht, nämlich:

Kommentierter Quellcode je Befehl, Klasse, Variable ...

der mich das einen Moment lang glauben ließ - halte es aber für "fast" unmöglich.

 

[Teisi]

Also mal ehrlich, ich kann nirgends rauslesen aus dem PDF, das ein CMS verboten wäre...

Nur mal so....

 

[Ticketz]

ich habe die erste Seite rausgenommen, weil sie persönliche Daten enthält. Auf der steht, dass was bei #3 steht.

Ich kann meine Überlegung und Konzepte hier als Idee schlecht als Text fassen, darin geht es aber im wesentlich auch nur um den Aufbau. Der Hintergrund und technische Umsetzung erlernen wir im laufe des Semesters, womit dann auch die Website selbst Gestalt annehmen soll.

 

[Ticketz]

Moin,

ich habe mich mal mit einem Freund zusammengesetzt der im fortgeschritten Studium Informatik/Webdesign ist und mein Konzept etwas finalisiert.
Habe im gleichen Zug schon einmal Konzepgrafiken erstellt, die das schriftliche ergänzen und anschaulicher gestalten sollen.

Wenn ihr mal rein gucken wollt: https://drive.google.com/open?id=0B3R_ZNQ1U6KeMVpFWk1MajEzeGs

Über Feedback würde ich mich freuen.

 

[blablub1212]

Das Problem dürfte wohl dein Content werden, wenn du deinem Konzept folgen willst.

Du hast wenig Content aber viele Unterseiten. Diese werden also relativ "leer" sein. Das wird wohl dazu führen, dass der größte Teil der Seite in der Desktop-Ansicht weiß bleibt und dadurch die ganze Seite untergeht.

Daher empfehle ich dir, dass du dem anhaltenden Trend der One-Pager folgst. Du packst deinen ganzen Content auf eine lange Seite und der User erreicht die einzelnen "Unterpunkte" durch bloßes scrollen.

Zum "Blenden" kannst du dann tolle Effekte wie Paralax, Sticky Header/Footer etc., Fade-Ins/-Outs etc. per CSS3 und JavaScript einbauen.

Und da du alleine biste muss ich dir einfach sagen, dass es wenig Sinn macht das Rad neu zu erfinden. Schau was die großen US-Startups machen und orientiere dich daran. Inspiration findest du bspw. unter: https://www.inc.com/inc5000

 

[Ticketz]

gleiches Problem bei der Sidemap, die mir der Freund noch vorgeschlagen hat für die Fußzeile.

Die Seite 2 soll ja als so eine OnePage realisiert werden. Die Anforderung ist aber den "dynamischen" Inhalt auf eine extra Seite zu legen. Kontakt und Impressum wollte ich zunächst zusammenlesen, aber das ist wohl unüblich. Auch die Landing Page als extra Seite bleibt wohl so.
bisher eben nur Konzept, wie die finale Umsetzung ist sehe ich dann mit der Zeit.

 

[Teisi]

Das schnellste und einfachste ist wohl Wordpress mit nem ajax Plugin.
Templating für WP sollte auch relativ (für deine Zwecke ausreichend) schnell erlernt sein.

Dann hast du verschiedene Seiten. Die du bei bedarf mit ajax so wirken lassen kannst, als sei eine oder mehere Seiten ein onePager. (Einzelne Seiten wegen SEO!)
Und du hast ein mehr oder weniger schönes backend zur Inhaltspflege.
Und du musst dich um weniger kümmern, wie z. B. sichere formulare und sowas...
(Wobei ich Wordpress als nicht wirklich Professionell halte, aber nun gut... )


Grundsätzlich einfacher ist natürlich eine Quasi statische Seite, in der du die Inhalte die sich nicht verändern (Menü, html-header, etc.) per PHP auslagerst. Dann hast halt kein Backend. Dafür ist deine Seite schneller geladen.


Allerdings kommt es darauf an, was deine Vorgesetzten von dir sehen wollen.
Wollen Sie sehen das du PHP kannst?

Und einen Modernen Aufbau? Was soll das sein? Es gibt nur eine schlechte und eine gute Möglichkeit etwas Umzusetzen. Mit zig varianten dazwischen - Allerdings kommt es alleine darauf an was das Programm am ende können soll - und was es in ein par jahren können soll.

Du kannst auch ein HEADLESS-CMS verwenden. <- Google danach.


Dann in deinem PDF heißt es: wie werden "professionelle" Webseiten gebaut?
Was ist professionell? Aber im Grunde auch hier - KOMMT AUF DEN VERWENDUNGSZWECK AN. (ein Shop ist auch eine Webseite - funktioniert für gewöhnlich aber doch ganz anders)
Zudem kommt es auch auf das Budget an. Eine 2000 Euro Webseite kann genauso Professionell sein wie eine 100.000 Euro Webseite - solange sie das macht was sie soll und das kann was sie können soll. Sie werden aber mit 99.99% sicherheit komplett unterschiedlich entwickelt.
Und wenn es sehr spezielle Anforderungen sind, wird evtl auch von 0 begonnen und alles mit nem Framework aufgebaut - ganz ohne bestehendem CMS oder Shop.
Von daher ist die Aufgabenstellung Punkt 2. meiner meinung nach - purer mist!

Eine Webseite für einen Friseur kann auch professionell sein - aber ich wette das die ganz anders gebaut wird als z. B. eine Webseite von Mercedes...

Und wenn Punkt 3. auf Punkt 2. aufbaut:
- Dann kommt du sowieso nicht an nem CMS vorbei - Denn wenn du ein Framework einsetzten willst, Symphony z. B. brauchst du wohl viel mehr Zeit als du hast, um dich damit zu beschäftigen.
- "Homepagedesign für verschiedene Display-Größen" <- ist ein mustHave!


Und so eine Selbstdarstellung - Lebenslauf Webseite, würde wohl in purem HTML geschrieben. Warum? Weil sich der Inhalt so gut wie nicht ändert, weil es am schnellsten Lädt, weil es am sichersten ist, weil es kaum Anforderungen an den Webserver/-space stellt.

Ohne zu wissen was tatsächlich gewünscht wird, kann man dir zu nichts wirklich raten - ...

 

[ayngush]

Welches Semester und Modul und für welche Fakultät soll das sein?

Ausgehend von einem eher technisch ausgelegten Studium (MINT):

Ich lese da aus deiner Hausarbeit offensichtlich andere Dinge heraus, als die anderen hier

50% der Aufgabe besteht daraus, dass du wissenschaftliches Arbeiten erlernen sollst. Dazu zählt nicht in Foren zu fragen, wie man etwas technisch "richtig" macht. Da gibt es ohnehin kein richtig oder falsch. Und aktuelle Standards... Wie schon mal hier erwähnt: Es kommt auf die Anforderungen drauf an, was der "Standard" (eher "best practise") am Ende sein soll... Es gibt nicht "DEN" Standard, außer die generischen Standards für einzelne Dinge...
Du musst dafür zwingend Fachlektüre lesen. Dabei geht es um die Basics und warum man diese verwendet. Du wirst wenig Erfolg haben Bücher im Bereich "aktuelle Webseiten bauen in 2017" zu finden, sondern eher Bücher wie "Systemarchitektur 1o1"...
Das Ergebnis dieser Arbeit ist ein wissenschaftlicher Text mit Literatur- / Quellenverzeichnis aus dem deine Transferleistung zu entnehmen ist.

Die anderen 50% sind dann die technische Umsetzung von Aufgabe 2 nach üblichen "best practises".

Du Fängst hier, wie viele andere, jedoch mit Aufgabe 3 an. Du musst aber zwingend mit Aufgabe 2 Anfangen - sonst geht die Arbeit in die Hose.

Es spielt aus meiner Sicht keine Rolle, ob man dir jetzt Symphony, Slim Framework, Bootstrap, Wordpress oder sonst was empfiehlt.

Die dem zugrunde liegende Architektur bzw. das Systemdesign (system design pattern) ist immer ähnlich oder gar gleich und darum geht es. (Schau Dir noch mal genau den Absatz der Fachlich-technischen Anforderung "Trennung von: [...]" an)
Du sollst laut meiner Interpretation Deiner Aufgabe verstehen, warum man (immer noch) model view controller (MVC) macht (Drei-Schichten-Architektur), warum man Abhängigkeiten auflöst (Unit-Testing... Test Driven Development... Dependency Injection...) und nicht lernen, wie man HTML5/CSS3/PHP Firlefanx erstellt.

Bonuspunkte bekommst Du wohl durch eine Abstraktionsschicht der Datenbank, Responsive Webdesign, so etwas wie der gut gemeinte aber schlecht beschriebene Ansatz von "Security" (Passwortschutz mit GET / POST ... sry ich kotze gleich) und AJAX.

Sollte das Studium mehr auf die Inhalte oder auf "Medien und Design" abzielen (Wirtschaftswissenschaften / Design / Kunst) dann vergiss alles, was ich gesagt habe, da bin ich dann eher raus, weil ich davon keine Ahnung habe

Grüße