[Dev-Blog]Robada-County Roleplay | Support System

    Liebe Community,


    ich bin noch ein ziemlicher Anfänger in sämtlichen Programmiersprachen und code von Zeit zu Zeit neue Dinge.
    Mein letztes Projekt war eine Enterpage für das selbe Projekt. Diese habe ich mit HTML5, CSS(3) und Javascript erstellt.


    Mein neues Projekt ist ein Supportsystem, in welchem ich nun PHP verwende. Diese Programmiersprache habe ich zuvor noch nie verwendet und ich muss sagen, sie ist etwas komplizierter als die anderen :D.
    Auf jeden Fall habe ich mir das Ziel gesetzt, dieses System als Vorläufer Projekt zu machen, bevor ich meine Hände ein ein Control Panel lege.


    In diesem Thread halte ich euch am Laufenden, an was ich derzeitig arbeite, hinzufüge, ändere, remove oder behebe.


    Hier habt ihr den ersten Einblick in das System.




    Code: Changelog Version: 0.0.1
    +Hintergrundbild eingefügt (Das Bild unter der Navigationsleiste bis zum Seitenende)
+Textbox links & rechts eingefügt
+Navigation via PHP erstellt
+Navigation via CSS angepasst
!!!Noch nicht responsive!!!

    Die Startseite ist nun komplett fertig. Bis auf das, dass das ganze Design noch responsiv gemacht werden muss. Bin im responsiven Webdesign leider noch nicht so bewandert und werde es mir später vornehmen, außer jemand hat ein gutes Tutorial für mich.
    Als nächstes ist die Anmeldefunktion dran. Hierfür werde ich die Forumdatenbank nehmen, womit man sich anmelden muss.


    Als Inspiration habe ich das Supportsystem von Breadfish.de.
    Falls dies ein Problem ist, bitte melden. Die Designs der anderen Unterseiten wird anders aussehen. :)
    Fand nur die Startseite schön. :)


    LG Jeff

    Das einzige Bild ist nun das Bild was man sieht. Der Rest sind nun Textbausteine :D.
    Nur muss ich das Bild irgendwie responsive bekommen ;/


    sieht derzeitig so aus:


    Code
    body{
	background-image: url(bg.png);
	background-repeat: no-repeat;
	background-position: 50% 58%;
	margin: auto;
	width: 100%;
	height: 100%;
	padding-top: 40%;
}



    Naja, ich mach wahrscheinlich morgen abends weiter :D



    Code: Changelog Version: 0.0.2
    +login.php erstellt
+faq.php erstellt
+ticket.php erstellt
+bootstrap Vorlage eingefügt
*Vorlage auf eigene Wünsche geändert (siehe Bild)


Notiz: Das Bild im Header von "Home" wird voerst so bleiben, da ich mich etwas in Javascript reinlesen muss, um die Animationen hinzubekommen. Habe leider überhaupt keine Ahnung wie das geht. :/
Das Loginsystem wird mit dem Forum verknüpft. Um ein Ticket zu schreiben wird man sich aber nicht anmelden müssen. Dies ist eher für Supporter o.ä. gedacht, um Zugriff auf die Supporttickets zu haben.

    Sofern jemand von euch für mich ein tolles Tutorial, bei dem ich lerne, wie man Spoiler macht, oder Bildanimationen, kann er mir das gerne zukommen lassen. :D


    Spoiler möchte ich fürs FAQ verwenden. Die sollen dann tabelarisch gelistet werden und so aussehen:


    Bildanimation soll so aussehen:
    [spoiler=Bildanimation]
    Unbenannt.png
    zu sehen auf http://www.nitrado.net
    [/spoiler

    Also entweder verwendest du sich gut bewährte, allgängliche, modifizierbare/anpassbare Gallerien, z.B. eine "Javascript / jQuery Gallery", oder du programmierst das selbst. Oder nutzt als 3. Option Bootstrap Plugins als Gallery, geht auch. Wäre dann sicherlich auch responsiv.
    Ansonsten beim selbst programmieren: Nutze jQuery, hat tolle build-in Funktionen. Gibt auch Animationframeworks für Javascript.


    Und einen Spoiler kannst du auf die gleiche Art erstellen.
    Sowas programmiert sich aber ratz fatz.
    Du nimmst 2 div-Tags.
    Den einen mit dem Inhalt packst du in den anderen (logisch^^).
    Zuerst initialisiert du die Standardhöhe des inneren div-Tags und speicherst diese (aufpassen! Sobald man reinzoomt ändert sie sich. Über ein Event aktualisieren -> responsiv).
    Dann setzt du den Overflow per CSS auf hidden. Die Höhe des Äußeren auf 0. Und sobald du auf den Knopf drückt, setzt du die Höhe des außeren Containers auf die vorher gespeicherte Höhe des inneren. Animation per CSS rasch geregelt. Fertig ^^
    Vielleicht nicht die schönste Lösung, aber mMn eine der einfachsten, die sich bei mir auch gut bewährt hat.