#CancelTheCulture

Thema und Fragestellung:

Relevanz des Themas:

Motivation:

Gestalterische Thesis:

Kulturgeschichtliche Thesis

1. Social Media & Data Gathering / Scraping

In einem ersten, längeren Teil habe ich mich intensiv damit beschäftigt, wie ich an Informationen und Daten aus den sozialen Netzwerken gelangen kann. Dies stellte sich als große Herausforderung heraus, da die von mir bevorzugten sozialen Netzwerke wie 'Twitter', 'Instagram' oder 'Facebook' keine kostengünstigen APIs zur Verfügung stellen.

Was ist eine API?

Die API – auch Programmierstelle genannt- ermöglicht es demnach Anwendungen miteinander zu kommunizieren. Die API ist nicht die Datenbank oder gar der Server, sondern der Code, der die Zugangspunkte für den Server regelt und die Kommunikation ermöglicht.

Somit wird der Datenaustausch zwischen verschiedenen Systemen um ein Vielfaches beschleunigt und vereinfacht.

Weshalb Data Scraping?

Informationsgewinnung:

Wissensentwicklung:

Erkennung von Mustern und Zusammenhängen:

Die Verwendung von Daten als Designerin ermöglicht es mir, meine Arbeit fundierter zu gestalten. Vor allem eröffnet es mir jedoch neue Möglichkeiten, die gesammelten Daten visuell darzustellen und gestalterische Arbeiten zu kreieren.

Nach einigen fehlgeschlagenen Versuchen, mein Projekt mit einem möglichst kleinen Budget umzusetzen und mit Python und Javascript eigene Scraper zu stellen, habe ich mich letztendlich für das soziale Netzwerk Reddit entschieden, da dieses Entwicklern bisher seine API kostenlos zur Verfügung gestellt hat.

Was ist 'Reddit'?

Weshalb 'Reddit'?

Volatilität des Internets

Dies traf genau während meiner Arbeit ein. Reddit hat offensichtlich bei Twitter abgeschaut und beschlossen, ab Sommer 2023 seine Daten-API kostenpflichtig zu machen. Das führte dazu, dass viele Subreddits in den privaten Modus wechselten und meine Arbeit dadurch erschwert wurde.

2. UNTERSUCHUNG Sprachsynthese - 'Text-to-Speech'

Die Anonymität im Internet wird aus verschiedenen Gründen missbraucht. Ein Hauptgrund ist, dass Anonymität es den Menschen ermöglicht, unerkannt zu bleiben und möglicherweise rechtliche Konsequenzen oder soziale Sanktionen zu umgehen. Dies kann dazu führen, dass einige Menschen ihre Anonymität ausnutzen, um Hass, Belästigung, Betrug oder andere schädliche Handlungen zu begehen. Darüber hinaus kann Anonymität dazu führen, dass Menschen sich mutiger fühlen, ihre Meinungen oder Ansichten zu äußern, auch wenn sie beleidigend, diskriminierend oder kontrovers sind.

Wenn man der Anonymität im Internet ein Gesicht und eine Stimme gibt, kann dies mehrere Auswirkungen haben. Zum einen kann es dazu führen, dass Menschen verantwortungsvoller und vorsichtiger mit ihren Handlungen und Äußerungen umgehen, da sie sich bewusst sind, dass sie nicht mehr vollständig anonym sind. Dies könnte zu einer Reduzierung von beleidigendem oder schädlichem Verhalten führen.

3. ENTWÜRFE & AUSARBEITUNG WEBSEITE

4. CODING

 // ..

    async function fetchAndDisplayPost(hashtag) {
      const response = await fetch(`https://www.reddit.com/r/all/search.json?q=${hashtag}&sort=new`);
      const data = await response.json();
    
      if (data.data && data.data.children.length > 0) {
        const posts = data.data.children;
    
        const existingPosts = Array.from(postContainer.children).map(row => row.getAttribute('data-post-id'));
    
        const uniquePosts = posts.filter(post => !existingPosts.includes(post.data.id));
    
        if (uniquePosts.length > 0) {
          
          latestPost.textContent = '';
          mediaContainer.textContent = '';
          document.getElementById('most-upvoted-comment').textContent = '';
          document.getElementById('most-downvoted-comment').textContent = '';
    
          const randomPost = uniquePosts[Math.floor(Math.random() * uniquePosts.length)].data;
          const newRow = createPostRow(randomPost);
          newRow.setAttribute('data-post-id', randomPost.id);
          postContainer.prepend(newRow); // Add the new post at the top of the container
    
          
          latestPost.textContent = randomPost.selftext;

        // ..

Das bereitgestellte Skript führt verschiedene Aufgaben aus, um die Funktionalität der Webseite zu ermöglichen.

Zunächst werden mit Hilfe der entsprechenden IDs (postContainer, latestPost, mediaContainer) die benötigten Elemente aus dem HTML-Dokument abgerufen. Diese Elemente dienen zur Anzeige der Beiträge und ihrer zugehörigen Inhalte.

Das Skript definiert eine Funktion namens createPostRow, die für das Erstellen einer neuen Zeile mit Beitragsdetails zuständig ist. Diese Funktion erhält ein Beitrag-Objekt als Eingabe und generiert dynamisch die HTML-Elemente, die zur Anzeige des Autors, des Subreddits und des Titels des Beitrags benötigt werden.

Zusätzlich gibt es eine asynchrone Funktion namens fetchAndDisplayPost, die das Abrufen und Anzeigen eines einzelnen Beitrags basierend auf dem eingegebenen Hashtag behandelt. Sie verwendet die Fetch-API, um Daten aus der Reddit-API im JSON-Format abzurufen. Die Funktion überprüft, ob in den empfangenen Daten Beiträge vorhanden sind, und filtert etwaige Duplikate aus. Falls es einzigartige Beiträge gibt, werden zuvorige Beitragsinhalte, Medien und Kommentare gelöscht. Anschließend wird ein zufälliger Beitrag ausgewählt, mithilfe der createPostRow-Funktion eine neue Zeile erstellt und diese dem postContainer-Element hinzugefügt. Der Inhalt und die Medien des Beitrags werden entsprechend ihres Typs angezeigt, z. B. Bilder, YouTube-Videos, Reddit-Galerien, Videos oder Links. Die Funktion ruft außerdem eine weitere Funktion namens displayComments auf, um die am meisten hoch- und heruntergevoteten Kommentare für den Beitrag abzurufen und anzuzeigen.

Die displayComments-Funktion ruft Kommentare für eine bestimmte Beitrags-ID ab, sortiert sie anhand ihrer Bewertungen (Upvotes minus Downvotes) und aktualisiert die entsprechenden Elemente im HTML-Dokument mit den am meisten hoch- und heruntergevoteten Kommentaren.

Das Skript richtet einen Ereignislistener für das hashtagInput-Feld ein, der das Abrufen und Anzeigen von Beiträgen auslöst, wenn ein Hashtag eingegeben wird. Es definiert auch eine asynchrone Funktion namens startPostRefresh, die kontinuierlich neue Beiträge basierend auf dem eingegebenen Hashtag abruft und anzeigt. Diese Funktion wird aufgerufen, um den kontinuierlichen Aktualisierungs- und Aktualisierungsprozess zu starten.

Darüber hinaus sucht das Skript automatisch nach dem Hashtag "cancelculture", wenn die Seite geöffnet wird, indem es einen Ereignislistener für das DOMContentLoaded-Ereignis hinzufügt. Dieser Ereignislistener setzt den initialen Hashtag-Wert und ruft fetchAndDisplayPost auf, um Beiträge zum initialen Hashtag anzuzeigen.

Insgesamt ermöglicht dieses Skript Benutzern das Suchen von Beiträgen basierend

Einige der verwendeten & gescrapten Informationen für die Visualisierung sind:

• 'author': Der Benutzername des Beitragserstellers.
• 'subreddit_name_prefixed': Der Name des Subreddits, in dem der Beitrag eingereicht wurde.
• 'title': Der Titel des Beitrags.
• 'selftext': Der Inhalt des Beitrags.
• 'url': Die URL, die mit dem Beitrag verbunden ist.
• 'score': Die Punktzahl des Beitrags (Upvotes - Downvotes).
• 'num_comments': Die Anzahl der Kommentare zum Beitrag.
• 'author_gold_count': Die Anzahl der Gold-Auszeichnungen, die der Beitragsersteller erhalten hat.
• 'author_karma': Der Karma-Punktestand des Beitragserstellers.
• 'upvote_ratio': Das Verhältnis von Upvotes zu Gesamtstimmen für den Beitrag.
• 'created_utc': Der UTC-Zeitstempel, wann der Beitrag erstellt wurde.
• 'all_awardings': Ein Array von Auszeichnungsobjekten, die der Beitrag erhalten hat.
• 'link_flair_text': Der Flair-Text, der mit dem Beitrag verbunden ist.

 

  

    <!DOCTYPE html>
    <html>
    <head>
      <title>#CancelTheCulture</title>
      <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
      <div class="container">
        <div class="column-left">
          <div class="empty-row">#CancelTheCulture</div>
          <div class="title-row horizontal-line">
            <div class="column">Username</div>
            <div class="column">Subreddit</div>
            <div class="column">Post</div>
          </div>
          <div id="post-container"></div>
        </div>
        <div class="column-right">
          <form id="search-form">
            <input type="text" id="hashtag-input" placeholder="Enter hashtag">
          </form>
          <div id="latest-post"></div>
          <div id="most-upvoted-comment"></div>
          <div id="most-downvoted-comment"></div>
          <div id="media-container"></div>
        </div>
      </div>
      <script src="script.js"></script>
    </body>
    </html>
  

5. Projekt