"kleine" Projektvorstellung

[Cerberus]

Hallo liebe "Nörgel-Gemeinde"

Ich wurde vor ein paar Wochen hilfesuchend gebeten, einer Studentin bei ihrem Abschluß-Projekt zu helfen.
In ihrer Ausbildung haben die Lehrkräfte offensichtlich ihren eigenen Lehrplan "vergessen" und das Projekt
komplett an die Wand gefahren.
Im Klartext: Künstler ohne jeglichen Bezug zum Web soll eine komplett funktionierende Seite erstellen
Und das mal locker flockig 3 Monate vor Projekt-Abgabe (Prüfungs- / Abschlussrelevant)

Leider wurde sie (über 3 Ecken) erst 1 Woche vor Abgabe zu mir geschickt ....
Also haben wir das ganze mit einer so "heißen Nadel" gestrickt, wie ich das so noch nie gemacht habe ...

Den Code habe komplett ich erzeugt -- Sie hatte die "künstlerische Leitung" und den Inhalt

Und das ist herausgekommen: Josephine Scheibe

Als sie vor einigen Tagen "Abgabe" hatte, hat das Projekt einen durchschlagenden Erfolg erzielt.
Sie ist die einzige ihres kompletten Jahrgangs, die wirklich ein funktionierendes Projekt hatte.
Auch ist Sie die einzige, die nun wirklich eine Webseite hat .....

Ob der Qualität und der Funktion haben wir sogar ihren "vorlauten" Lehrer mudtot gemacht
Das nenn ich mal nen Erfolg :P

Zur Technik:
Aktuell sockelt alles auf JavaScript, da das Projekt komplett Offline-Fähig sein muß.
Als Kern wird ausschließlich jQuery genutzt.
Enthalten ist ein Form-Validator und ein URL-Parser (Damit Direkt-URLs auch zum Ziel führen).
Der Gesamte Inhalt wird dynamisch über ein JS-Array geladen, erzeugt und gerendert.
Es gibt im Grunde keinen festen Code - die Bestückung kann sich daher stetig ändern ohne Eingriff in den Code.

In dem Sinne -- Feedback ist auch hier natürlich gewünscht

PS: 100%ige Mobiltauglichkeit

[tantetoni2]

die Lightbox ist nicht responsive wie der rest wobei mobil ne Lightbox eh Mist ist und naja am Javascript kann man wirklich noch ein bissel feilen, 20 Zeilen Code in der jquery.functions.js könntest du locker sparen

[Cerberus]

Ich weiß ...
Es muß ja aber "abgabefähig" sein ...
daher ist manches nicht "hochoptimiert"

[tantetoni2]

ach und das ist nicht abgabefähig

/**
 * Ermittelt die aktuell mögliche Position des Funktions-Inhaltes
 * Diese Funktion wird am Ende der Menü-Bewegung aufgerufen
 *
 * @return    null
 */
function setContentPosition() {
    var breiteNavbar = $('#nav-container').width(),
        breiteDocument = $(document).width()
    ;
    // Galerie-Position setzen, Text-Position setzen
    if (breiteDocument > mobileStyle) {
        $('#content, #content2').css({
            'left': parseInt(breiteNavbar - 100) + 'px',
            'width': '70%'
        });
    } 
    else {
        $('#content, #content2').css({
            'left': '0px',
            'width': '100%'
        });
    }
}

/**
 * Erzeugung der Hauptnavigations als UL-Objekt
 * Es wird unterschieden, ob der Eintrag ein Link
 * oder ein Hilfsobjekt ist
 *
 * @return    null
 */
function iniMenu() {
    // Galiern laden und entsprechend anzeigen
    $.each(navigation, function(index, value) {
        if (index.length) {
            // Teilstring ermitteln (Link oder nicht)
            var teil = index.substring(0, 5);
            if (teil == 'dummy') {
                $('#navigation').append('<li class="trenner"><span>' + value + '</span></li>');
            } else {
                var loader = 'page',
                    infotext, Css
                ;
                
                if (value['info'].length) {
                    infotext = ' title="' + value['info'] + '"';
                }
                if (value['class'].length) {
                    Css = ' class="' + value['class'] + '"';
                } 
                if (value['type'] == 'galery') {
                    loader = 'galery';
                }

                $('#navigation').append('<li class="link" id="nav-' + index + '">' + '<a href="javascript:void(0);" onclick="loadContent' + '(\'' + index + '\', \'' + loader + '\')' + '"' + infotext + Css + '>' + value['name'] + '</a>' + '</li>');
            }
        }
    });
}

/**
 * Inhalt in den Hauptbereich laden
 * Je nach Modus werden entweder die Galerien oder eine HTML-Seite angezeigt
 * Der inaktive Content wird auf Default zurückgesetzt
 *
 * @param     String      zu ladender Inhalt beim Klicken
 * @param     String      'galery' oder 'page'
 * @return    null
 */
function loadContent(type, mode) {
    if (mode == undefined) {
        // Wenn der Modus unbekannt ist, dann abbrechen
        return;
    }

    // Je nach Modus die Container definieren
    var ziel = $('#content2'),
        old = $('#content')
    ;
    if (mode == 'galery') {
        ziel = $('#content');
        old = $('#content2');
    } 

    if ($('#mobile-nav li').length > 0) {
        $('#mobile-nav').fadeOut('fast');
    }

    // inaktiven Container ausblenden
    old.fadeOut('fast');

    if (type.length) {
        // Navigation ist Mittig? dann nach links bewegen
        if (firstRun == 0) {
            // Navigation bewegen
            moveNavigation(type, mode);

            // Inhalt setzen
            setContentPosition();

            // Inhalt wartet, bis die Navigation links angekommen ist
            ziel.delay(runtimeNav);
        } else {
            // Navigations-Status prüfen
            setNavigationStatus();
        }

        // Die Seite nur laden, wenn sich der Klick geändert hat und der Modus definiert ist
        if (type != lastType && mode != undefined) {
            $('#nav-' + lastType + ' a').removeClass('active');

            // Inhalt ausblenden und firsch laden
            ziel.fadeOut('fast', function() {
                // inaktiven Container zusätzlich unsichtbar machen
                old.css('display', 'none');

                // Inhalt aus Config.js laden
                if (mode == 'galery') {
                    old.html('');
                    getInhalt2Content(type);
                } else {
                    old.load('./pages/lightbox.htm');
                    ziel.load('./pages/' + type + '.htm');
                }

                // Inhalt anzeigen
                ziel.fadeIn('fast');

                $('#nav-' + type + ' a').addClass('active');

                lastType = type;
            });
        }
    } else {
        alert('Content-Type <' + type + '> not available');
    }
}

/**
 * Bilder aus dem Config-Array in die Gallerie laden
 *
 * @return    null
 */
function getInhalt2Content(type) {
    // Galerie erzeugen
    $('#content').html('<div class="image-set"></div>');
    var $imageSet = $('.image-set');
    
    $.each(data[type], function(index, value) {
        var info;
        // Prüfen, ob in Info etwas enthalten ist
        if (value['info'].length) {
            info = '<br />' + value['info'];
        }
        // Bild erzeugen
        var image = '<a href="data/big/' + value['image'] + '" class="image-link" ' + 'data-title="' + value['titel'] + info + '" data-lightbox="' + type + '-set">' + '<img src="./data/thumb/' + value['thumb'] + '" class="image-thumb" title="' + value['titel'] + '" />' + '</a>';

        // erzeugtes Bild an die Galie anhängen
        $imageSet.append(image);
    });
}

[Cerberus]

nö

jaja -- du hast ja recht *grmpf

[phenom]

Super Arbeit.

[tantetoni2]

warum arbeitest du bei der Navi nicht auch mit Media Querys wie beim Kontaktformular? Dann sparst du dir dafür das Javascript geraffel

[Cerberus]

werde ich wahrscheinlich auch so umbauen ...
hab gerade das "geflacker" der Hintergründe abgeschaltet ...
und dabei noch nen "Logik-Bug" ausgebügelt ...

Parameters laufen nun auch "smootie"

Werde erst mal schauen, was die "Kundin" dazu sagt und wie es genau weiter entwickelt wird ....

[Joageht]

Also, ich bin sehr unerfahren und leicht zu beeindrucken - aber für mit der heißen Nadel gestrickt ist das sehr schick finde ich.
Für jemanden der gar keine Ahnung hat (wie die Tutoren anscheinend) wahrscheinlich eine Offenbarung