Übung 01 - Einführung

1.1 Fachliche Argumentation über Erfolgsprinzipien des WWW

Mit welchen fachlichen Argumenten wurde das WWW-Proposal von TBL abgelehnt?

Zum einen wurde die gezielte Evolvierbarkeit mit Vagheit verwechselt. Zum anderen besteht im WWW die Möglichkeit für "broken links", die ins Leere führen. Dies wurde von der Hypertext Community als Rückschritt empfunden, zumal dem Proposal an mathematischer Rigorosität mangelte und die Community ein Objekt- über einem Text-Protokoll bevorzugte.

Was sind die fachlichen Argumente, warum das WWW dennoch ein Erfolg wurde?

Unterschiedliche Technologien des WWW können sich unabhängig voneinander weiterentwickeln ohne zentrale Kontrolle
Kostenfreie Nutzung
Offenheit, Erweitbarkeit
Standardisierung

Was wäre der Preis für die garantierte Verhinderung von “broken links”?

Zentrale Kontrolle und Geschlossenheit.

1.2 HTTP

Sie bekommen im Browser den HTTP Status Code 200. Was bedeutet das?

"OK" - Anfrage wurde erfolgreich bearbeitet. Das Ergebnis wird in der Response übertragen

Sie bekommen im Browser den HTTP Status Code 301. Was hat das zu bedeuten?

"Moved Permanently" - Die Adresse, an welche die Request gesendet wurde ist nicht mehr gültig und die angeforderte Ressource ist nun unter einer anderen Adresse erreichbar, die im "Location"-Header-Feld der Response angegeben ist.

Sie bekommen im Browser den HTTP Status Code 400. Was hat das zu bedeuten? Was können Sie dagegen tun?

"Bad Request" - Der Server konnte die Anfrage nicht bearbeiten, da der Client bei dieser einen Fehler gemacht hat, z.B. einen Syntaxfehler. Für das Auftreten dieser Fehlermeldung kann es verschiedene Gründe haben.

In der URL befindet sich ein Syntaxfehler wie unzulässige Zeichen. -> URL überprüfen
Fehlerhafte oder alte Cookies innerhalb des Browsers und/oder beschädigte Dateien im Cache >Cookies und Cache löschen
Veraltete DNS-Einträge im DNS-Cache, die auf falsche IP-Adressen verweisen. -> DNS-Cache löschen
Beim Versuch zu großer Dateien kann dieser Fehler ebenfalls auftreten -> Nach Möglichkeit Dateigröße minimieren, z.B. durch geringere Bildqualität, Zippen der Datei, ...
Der Server beschränkt die Header Lines und die verwendete Header Line ist zu lang -> Evtl. Request auf in einem anderen Browser testen, um zu prüfen, ob dieser den Fehler verursacht

Sie bekommen im Browser den HTTP Status Code 403. Was hat das zu bedeuten? Was können Sie dagegen tun?

"Forbidden" - Der Server verweigert die gewünschte Response, da der Client keine Zugriffsrechte für die Ressource hat

Evtl. ist ein Fehler in der URL und man versucht auf ein Verzeichnis zuzugreifen, zu welchem "Normale Nutzende" keinen Zugriff haben -> URL überprüfen
Die Seite arbeitet mit Login Tokens (wie die WEM-App) und im Session Storage befindet ich ein veraltetes, ungültiges Token. -> Logout, Login
Ungültige/Korrupte Cookies, die Authenticationinformationen speicher -> Cookies löschen
Browser Extensions, Plugins können Probleme verursachen -> deinstallieren

In einer Webanwendung benötigen Sie eine OPTIONS-Anfrage, die die Optionen des Servers vor dem eigentlichen Zugriff erfragen soll. Aus Performanzgründen soll die Abfrage jedoch cacheable sein. Wie könnten Sie dafür eine Lösung angehen?

Cachen für Browser:
In den Headers der OPTIONS-Anfrage kann man das "Access-Control-Max-Age" erhöhen, sodass die OPTIONS-Anfrage weniger häufig gestellt werden muss:
Access-Control-Max-Age: 86400
Die Browser haben verschiedene Maximalwerte. Firefox setzt das Maximum auf 24 Stunden (86400 Sekunden), Chromium-basierte auf 2 Stunden.

Cachen für andere Systeme zwischen API und Browser:
Header hinzufügen:
Cache-Control: public, max-age=86400
Vary: origin

1.3 - 1.5 Wireframes with HTML and CSS

1.3 - Tribute Page

                                
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Dr. Norman Borlaug</title>
        <style>
            body {
                text-align: center;
            }

            img {
                max-width: 100%;
            }

            #heading {
                background: #eeeeee;
                padding-top: 1%;
                padding-bottom: 1%;
                color: #333332;
                font-family: 'Arial Black', serif;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
    <div id="heading">
        <h1>Dr. Norman Borlaug</h1>
        <p style="font-family: Arial, serif;">The man who saved a billion lives</p>
    </div>
    <img alt="Dr. Norman Balaug standing in a wheat field with other men."
         src="https://kaul.inf.h-brs.de/wem/assets/img/tribute-img.png">
    </body>
    </html>

1.2 - Survey Form

                                
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Survey Form</title>
        <style>
            body {
                background: #b2d6d1;
                text-align: center;
                font-family: "Ubuntu", sans-serif;
            }

            .row {
                position: static;
                display: block;
            }

            .left {
                display: inline-block;
                text-align: right;
                width: 45%;
                padding-right: 1em;
                padding-bottom: 2em;

            }

            .right {
                display: inline-block;
                text-align: left;
                width: 45%;
                padding-left: 1em;
                padding-bottom: 2em;
            }

            .right div div label {
                vertical-align: middle;

            }

            .right div div input {
                vertical-align: middle;
            }

            input {
                height: 20px;
            }

            input[type=radio] {
                border-radius: 0;
            }

            select {
                height: 25px;
            }

            .form {
                padding-top: 1em;
                margin-left: 2em;
                margin-right: 2em;
                background: white;
            }

        </style>
    </head>
    <body>
    <h1>Survey Form</h1>
    <div class="form">
    <p>Let us know how we can improve freeCodeCamp</p><br>
        <form>
            <div class="row">
                <div class="left">
                    <label for="name">* Name:</label>
                </div>
                <div class="right">
                    <input id="name" placeholder="Enter your name" type="text">
                </div>

            </div>
            <div class="row">
                <div class="left">
                    <label for="email">* Email:</label>
                </div>
                <div class="right">
                    <input id="email" placeholder="Enter your Email" type="text">
                </div>
            </div>

            <div class="row">
                <div class="left">
                    <label for="age">* Age:</label>
                </div>
                <div class="right">
                    <input id="age" placeholder="Age" type="number">
                </div>
            </div>

            <div class="row">
                <div class="left" style="vertical-align: top">
                    <label for="role">Which option best describes your current role?</label>
                </div>
                <div class="right">
                    <select id="role">
                        <option value="student">Student</option>
                        <option value="teacher">Teacher</option>
                        <option value="other">Other<option>
                    </select>
                </div>
            </div>

            <div class="row">
                <div id="radio">
                    <div class="left" style="vertical-align: top">
                        <label for="radio">* How likely is that you would recommend <br> freeCodeCamp to a friend?</label>
                    </div>
                    <div class="right">
                        <div style="display: block">
                            <div>
                                <input id="def" name="recommend" type="radio">
                                <label for="def">Definitely</label><br>
                            </div>
                            <div>
                                <input id="maybe" name="recommend" type="radio">
                                <label for="maybe">Maybe</label><br>
                            </div>
                            <div>
                                <input id="unsure" name="recommend" type="radio">
                                <label for="unsure">Not Sure</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="left">
                    <label for="fcc">What do you like most in FCC:
                    <label>
                </div>
                <div class="right">
                    <select id="fcc">
                        <option disabled hidden selected value="">Select an option</option>
                        <option value="challenges">Code Challenges</option>
                        <option value="yt">YouTube-Tutorials</option>
                        <option value="community">Community</option>
                    </select>
                </div>
            </div>

            <div class="row">
                <div class="left" style="vertical-align: top">
                    <label for="radio2">Things that should be improved in the future
                        <br>(Check all that apply):</label>
                </div>
                <div class="right">
                    <div id="radio2" style="">
                        <div>
                            <input id="frontend" type="checkbox">
                            <label for="frontend">Front-end Projects</label><br>
                        </div>
                        <div>
                            <input id="backend" type="checkbox">
                            <label for="backend">Back-end Projects</label><br>
                        </div>
                        <div>
                            <input id="data" type="checkbox">
                            <label for="data">Data Visualization</label>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    </body>
    </html>

1.3 Product Landing Page

                                
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Product Landing Page</title>
        <style>
            @import url('https://fonts.googleapis.com/css2?family=Economica&display=swap');
            @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

            html {
                height: 100%;
                overflow: hidden;
                margin: 0;
            }

            body {
                margin: 0;
                font-family: "Open Sans", sans-serif;
                height: 100%;
                overflow: hidden;
                background: #ebeae6;
            }

            .header {
                background: #363636;
                text-align: center;
                color: #dcdbdb;
                height: 3em;
                vertical-align: central;
                line-height: 3em;
                position: sticky;
                font-weight: bold;
            }

            .header span {
                padding: 1em;
            }

            h1 {
                text-align: center;
                font-family: Roboto, sans-serif;
                font-weight: bold;
            }

            .main {
                height: calc(100% - 350px);
                display: flex;
            }

            .footer {
                background: #011826;
                text-align: center;
                color: white;
                position: fixed;
                left: 0;
                bottom: 0;
                width: 100%;

            }

            button {
                background: #f88e37;
                color: white;
                border-radius: 8px;
                border: none;
                height: 2em;
                font-family: "Economica", sans-serif;
                font-size: 20px;
                font-weight: bold;
            }

            img {
                border: 1px solid black;
                border-radius: 10px;
                height: 100%;
            }

            p{
                padding-bottom: 2em;
                font-size: 18px;
                font-weight: bold;
            }

        </style>
    </head>
    <body>
    <div class="header">
        <span>The book series</span>
        <span>Testimonials</span>
        <span>The Author</span>
        <span>Free resources</span>
    </div>
    <h1>You don't know JavaScript</h1>

    <div class="main">
        <div style="display: inline-block; width: 49%;  text-align: center;">
            <img alt="Picture of a book named You don't know JS, Complete Series by Kyle Simpson" src="https://kaul.inf.h-brs.de/wem/assets/img/landing-img.png">
        </div>

        <div style="display: inline-block; width: 49%;  text-align: center; align-content: center">
            <p style="padding-top: 3em">Don't just drift through Javascript.</p>
            <p>Understand how Javascript works</p>
            <p>Start your journey through the bumpy side of Javascript.</p>
            <button style="width: 40%;">ORDER YOUR COPY NOW</button>
        </div>
    </div>

    <div class="footer">
        <p style="margin-bottom: 0; margin-top: 4em; padding-bottom: 1em;">The first ebook in the book series is absolutely
            free.</p>
        <button style="margin-bottom: 2em; width: 50%">FIND OUT MORE ABOUT THIS OFFER</button>
    </div>
    </body>
    </html>