Bildschirmfoto 2022-05-03 um 18.39.23.png

Archive

An interactive website with a landing page,

a navigation system, and hyperlinks, single pages.

Parsons, Typography & Interaction 2

Timeline : 5 weeks

Project Team : Solo

Task

Examine how we sift through the web for content that helps us learn and connect. In this vast repository of information, what kind of systems of organization bring forward items of importance or moments of discovery? What content is de-prioritized or further obscured?

Begin a collection of 40 things using something from your walk as the focus. Your collection will be housed on a new Are.na channel you create and should consist of external texts, images, videos, sounds, links, etc.

 

You will then share your collection and 5 items from it with your class in a brief presentation. Afterwards, you will swap your collection with a classmate and add 10 additional items to your new collection.Finally, you will create a website organizing your newly swapped collection. It is crucial to remember that you are designing a flexible system, one that can grow and change over time, not a static website.

Bildschirmfoto 2022-05-04 um 06.49.01.png

Code

Bildschirmfoto 2022-05-04 um 06.48.43.png

<!doctype html>
<html>
   <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link href="assets/reset.css" rel="stylesheet">
       <link href="assets/style.css" rel="stylesheet">
       <script src="assets/arena.js" type="text/javascript"></script>
       <link href="assets/favicon.png" rel="icon">
   </head>
   <body>

       <!-- Replace this URL with your channel to connect the API! -->
       <a href="https://www.are.na/karan-chowdhary/movies-27fizkecvha" id="channel-url">
           <h1 id="channel-title"></h1> <!-- The channel title will be inserted inside this h1. -->
       </a>

   <div id="channel-description"></div> <!-- Same here for the channel description. -->


       <div class="header">
           <a <a class="movies-link" href="index.html">Home</a>
       | <a class="trailers-link" href="trailers.html">Trailers</a>
           | <a class="posters-link" href="posters.html">Posters</a>
           | <a class="links-link" href="links.html">Links</a>
           | <a class="timeline-link" href="timeline.html">Timeline</a>
       </div>



       <!-- All the channel “blocks” will be created as children, here. -->
       <!-- You could move the classes to different section elements to separate the types! -->
       <section id="main-section" class="section image-blocks embed-blocks link-blocks pdf-blocks text-blocks video-embed-blocks video-file-blocks">
       </section>



       <!-- These are the templates for the various block types, below. -->
       <!-- You can move/nest/remove any of the insertion points! -->
       <!-- For example, you could only show images for actual image blocks. -->
       <!-- You could not show the type if you group them by section, above. -->

       <!-- Spotify, Soundcloud, etc. -->
       <template id="audio-embed-block">
           <figure class="audio-embed"> <!-- You can use the container classes to style a whole type. -->
               <h3 class="title"></h3> <!-- Block title inserts here. -->
               <img class="image"> <!-- Image/cover image source inserts here. -->
               <div class="embed"></div> <!-- Embed iframe inserts here. -->
               <a class="link"> <!-- Original URL inserts here. -->
                   <p class="link-title"></p> <!-- Link title inserts here. -->
               </a>
               <figcaption class="description"></figcaption> <!-- Block description inserts here. -->
               <p class="type"></p> <!-- Block type/kind inserts here. -->
           </figure>
       </template>

       <!-- Uploaded audio files. -->
       <template id="audio-file-block">
           <figure class="audio-file-block">
               <h3 class="title"></h3>
               <img class="image">
               <audio class="audio" controls></audio> <!-- Audio source inserts here. -->
               <figcaption class="description"></figcaption>
               <p class="type"></p>
           </figure>
       </template>

       <template id="image-block">
           <figure class="image-block">
               <h3 class="title"></h3>
               <img class="image">
               <a class="link">
                   <p class="link-title"></p>
               </a>
               <figcaption class="description"></figcaption>
               <p class="type"></p>
           </figure>
       </template>

       <template id="link-block">
           <figure class="link-block">
               <h3 class="title"></h3>
               <img class="image">
               <a class="link">
                   <p class="link-title"></p>
               </a>
               <figcaption class="description"></figcaption>
               <p class="type"></p>
           </figure>
       </template>

       <template id="pdf-block">
           <figure class="pdf-block">
               <h3 class="title"></h3>
               <img class="image">
               <a class="link"> <!-- PDF link inserts here. -->
                   <p class="link-title"></p> <!-- Repeats the block title. -->
               </a>
               <figcaption class="description"></figcaption>
               <p class="type"></p>
           </figure>
       </template>

       <template id="text-block">
           <figure class="text-block">
               <h3 class="title"></h3>
               <div class="content"></div> <!-- Text blocks insert their HTML here. -->
               <figcaption class="description"></figcaption>
               <p class="type"></p>
           </figure>
       </template>

       <!-- YouTube, Vimeo, etc. -->
       <template id="video-embed-block">
           <figure class="video-embed-block">
               <h3 class="title"></h3>
               <!-- img class="image" -->
               <div class="embed"></div>
               <a class="link">
                   <p class="link-title"></p>
               </a>
               <figcaption class="description"></figcaption>
               <p class="type"></p>
           </figure>
       </template>

       <!-- Uploaded video files. -->
       <template id="video-file-block">
           <figure class="video-file-block">
               <h3 class="title"></h3>
               <img class="image">
               <video class="video" controls></video> <!-- Video source inserts here. -->
               <figcaption class="description"></figcaption>
               <p class="type"></p>
           </figure>
       </template>



   </body>
</html>

What it looks like

Bildschirmfoto 2022-05-03 um 18.38.02.png

.