Living Histories: Kefalonia, Greece

Living Histories is a multi-year multidisciplinary project spearheaded by Prof. Scott Townsend and based in Kefalonia (Κεφαλονια), the sixth largest Greek island. The focus of Living Histories is the documentation of the experiences, practices, values, and history of Kefalonia and its people. I and eight other students in the 2022 program cohort worked collaboratively to build and populate a website for all of the research done to date, including interviews, photography, cultural practices, and social values.

During my time in Kefalonia, I had the opportunity to be immersed within the island's culture, taste its traditional foods, and form relationships with it's people. It was a pleasure to be involved in building a web app that contained a manifestation of Kefalonia's hisotry and practices. I sharpened my technical skills with HTML, CSS and Javascript during its construction. I enhanced my ability to manage time, team collaboration and research content to bring the porject to completeion within the five week program.

Technologies:

HTML, CSS, Adobe CC

The Process

During the initial phase, I dedicated my efforts to refining a web layout, paying keen attention to user experience, navigation, and content arrangement. I delved into the idea of integrating an island map for seamless navigation between oral interviews that the project recorded. This stage marked the beginning of my creative exploration, involving brainstorming sessions for layout and navigation concepts, and experimenting with wireframes and prototypes.

Navigation

The "Oral Histories" section offers a user-friendly experience for exploring interview materials. Navigating to this section reveals an interactive island map where cities can be selected to access interviews from specific regions. Alternatively, individual interviews can be accessed by choosing names from the Archive.

Upon selecting a location, users are presented with categorized anecdotes from multiple interviewees, providing diverse perspectives on local life and events. Clicking on an interviewee's name above an anecdote grants access to their complete interview. This interactive feature not only enhances user engagement but also demonstrates technical expertise in HTML and CSS through seamless navigation and well-organized content presentation.

Example 1: HTML and CSS

Here's an example of a HTML and CSS code snippet for the timeline navigation:


                            <div onclick="application.goToTargetView(event)" id="Timeline_Nav" class="Timeline_Nav">
                            <a href="Earthquake.html">
                                <div id="Group_1">
                                    <div id="n__ba">
                                        <span>Χρονολόγιο </span>
                                    </div>
                                </div>
                                
                                <div id="Timeline">
                                    <span>Timeline</span>
                                </div>
                                <svg class="Rectangle_2">
                                    <rect id="Rectangle_2" rx="0" ry="0" x="0" y="0" width="25.174" height="1.027">
                                    </rect>
                                </svg>
                            </a>
                        </div>

Example 2: HTML and CSS

Here's a HTML/CSS code snippet that showcases the navigation between the Oral Histories and Practices pages:


                            <head>
                            </head>
                            <body>
                            <div id="Oral_Histories">
                                <svg class="Rectangle_72">
                                    <rect id="Rectangle_72" rx="0" ry="0" x="0" y="0" width="1000" height="974">
                                    </rect>
                                </svg>
                                <svg class="NAV">
                                    <rect id="NAV" rx="0" ry="0" x="0" y="0" width="1000" height="100">
                                    </rect>
                                </svg>
                                
                                <a href="Practices_Page.html">
                                <div id="Practices_Nav" class="Practices_Nav">
                                    <div id="Text">
                                        <span>Πρακτικές</span>
                                    </div>
                                    <div id="Practices">
                                        <span>Practices</span>
                                    </div>
                                    <svg class="Rectangle_3">
                                        <rect id="Rectangle_3" rx="0" ry="0" x="0" y="0" width="24.166" height="1.027">
                                        </rect>
                                    </svg>
                                </div>
                                </a>
                            </div>
                            </body>

This code includes HTML and SVG elements for the webpage, including rectangles and navigation links