WEEK 11: HTML Cinema (March 26) – DTC 491 Advanced Digital Cinema

To Do This Week

DUE : Video Essays

Notes

Watch Video Essays…

Brainstorm HTML Cinema with ChatGPT

Interactive Video Project Development Prompt

Project Description:
I’m working on an interactive video project for a Digital Cinema course that explores the theme of [Your Theme]. The project aims to integrate HTML, CSS, and basic JavaScript with short video loops (10-60 seconds each) to create a web-based narrative or thematic exploration. I’m looking for assistance in developing a web page that showcases these videos in an engaging and interactive way.

Project Theme: [Insert your project theme here, e.g., “Resilience,” “Urban Exploration,” “Digital Identity”]

Interactivity and Web Design Needs:

Navigation Design: [Describe how you want users to navigate through your videos. For example, clickable thumbnails, scroll-triggered video play, etc.]
User Interaction: [Describe the types of interactions you want to incorporate (e.g., mouse hover to reveal text, clicking to play/pause videos, etc.).]
Layout and Aesthetics: [Describe your vision for the webpage’s layout and aesthetic appeal, including any specific color schemes, fonts, or graphic elements you wish to include.]

Technical Requirements:

Video Optimization: Suggest how to optimize video for web delivery without sacrificing quality, considering potential Wi-Fi limitations.
Autoplay Policy: Strategies to engage users in a way that complies with browsers’ autoplay policies (e.g., using muted videos with an option to enable sound).

Questions for ChatGPT:

How can I code an HTML/CSS layout that reflects the theme of [Your Theme] while ensuring a smooth and intuitive user experience?
What JavaScript techniques can I use to implement the described interactivity and navigation features?
Can you provide example code for creating a responsive video gallery that aligns with my project’s interactivity and design needs?

Brainstorm Final Project with ChatGPT

I’m working on my Final Project for a digital cinema course and need some guidance to flesh out my ideas and plan the execution. I would like you to ask me questions to get a clearer idea of what I want to do given time and resource limitations. Here are the details of my idea so far:

Project Theme: [Insert the overarching theme or idea of your project, e.g., “The Intersection of Technology and Nature.”]
Interest Areas: [List areas within digital cinema you’re interested in exploring, e.g., “AI video, video looping.”]
Project Format: [Specify the format you’re considering, such as documentary, experimental video, video essay, etc.]
Cinema Language Elements: [Mention the cinema techniques you plan to use, e.g., “montage, continuity editing.”]
Inspirational Sources: [List any films, artists, or theoretical concepts that inspire your project.]
Technical Aspects: [Describe the technical components you’re considering, like specific video editing software, AI tools, or web technologies for a networked video.]
Conceptual Engagement: [Explain how your project engages with ideas or themes discussed in class, connecting theory with practice.]
Challenges/Limitations Anticipated: [Briefly mention any challenges or resource limitations you foresee in realizing your project and any initial thoughts on overcoming them.]
Creative Vision: [Share your creative vision for the project, including the emotional or intellectual impact you aim to achieve.]
Assistance Needed: [List specific areas where you’re seeking advice or guidance, such as “optimizing video for web delivery,” “incorporating user interactivity,” or “scripting for narrative coherence.”]

HTML Cinema Project (10%)

Due April 9th

Project Overview:

Bring together video and interactive design to explore complex ideas, emotions, or stories, creating a space where differences and similarities among clips enrich the overall narrative or thematic impact. With this project you are to create an interactive website that is made of short video or loops, each ranging from 10 to 60 seconds. This project is an opportunity to integrate HTML/CSS and basic JavaScript with video. You may start from provided HTML templates or you can use ChatGPT for coding assistance to build out your own idea.

Your project can be an interactive visual essay, a branching short fiction work, or experimental montage centered around a theme, idea, or passion that is meaningful to you. Consider this a short project that can be expanded for the Final Project.

The core challenge lies in integrating separate videos or video loops, with text and design, to form a cohesive narrative or thematic exploration, using the unique properties of web interactivity to engage viewers in a multilinear storytelling experience. What connects the separate videos? How does the user interact with the videos ? How do the differences and similarities in the videos to create echos and networks of meaning? The idea with this project is to show multiple views or perspectives on a single subject. The micro-narratives can add up to one overall narrative or remain discrete fragments that are in association with the others for a montage or poetic effect.

Project Objectives:

Interactivity and Engagement: Design a user interface that encourages viewers to interact with the video content in meaningful ways, enhancing their understanding and appreciation of the underlying theme or story.
Video: Create a series of videos that, when viewed together, convey a unified narrative or thematic concept, exploring different facets of a single idea or passion.
Media Integration: Use HTML, CSS and JavaScript to create a web environment that integrates video loops, text, sound and/or graphic elements offering a smooth and intuitive user experience. Use ChatGPT to help you.

Steps to Completion:

Theme or Narrative Development: Begin by identifying the central idea, passion, or story you wish to explore through your user interface. Sketch it out and consult with ChatGPT. This concept will guide the selection and creation of your video content.
Video Curation and Creation: Create short video loops that reflect different perspectives or facets of your chosen theme. Each video should stand on its own while also contributing to the overall narrative or thematic framework.
Web Page Design: Using either the provided HTML templates or custom code assisted by ChatGPT, design a website or single page that effectively showcases your videos. Focus on creating a user-friendly interface that encourages exploration and interaction.
Interactivity Implementation: Incorporate interactive elements that enhance the viewing experience, such as clickable links that alter video playback, navigation controls that reveal thematic connections, or dynamic layouts that change based on user interaction.
Narrative and Thematic Integration: Carefully arrange your videos, interactive and design elements, text and other media, to highlight the connections between them.

Evaluation Criteria:

Innovation and Creativity: The originality of your theme or narrative concept and the creative use of video and web technologies to explore it.
Technical Proficiency: Your ability to effectively use HTML and JavaScript to create a functional, engaging web page.
Video/Audio Creation: Work at the framing, pacing, camera movements. Use montage, continuity and looping for effect. Work at the sound. You may use AI Tools!
User Engagement: The effectiveness of your design in encouraging user interaction and exploration, enhancing the overall impact of your narrative or thematic presentation.

Using either the HTML templates I created or ChatGPT to help code your own HTML and JavaScript, create a web page with a selection of 3-6 short video loops* (10-60 seconds each) that is either a short visual essay about an idea or passion or a short fiction. What connects the separate videos? How does the user interact with the videos?** How do the differences and similarities in the videos create networks of meaning?

The idea with this project is to show multiple views or perspectives on a single subject. The micro-narratives can add up to one overall narrative or remain discrete fragments that are in association with the others for a narrative or poetic effect.

*To avoid loading or bandwidth issues, please export your videos to a smaller size – around 400-500px width.

** You must force the user to click somewhere on the page/site to allow autoplay on videos.

AUDIO/VIDEO & JavaScript

Video and Audio elements
Audio/Video DOM reference
Chrome – must interact with page (click something) before video or audio can play

In-class Group Database Project

WORKSHOP

Final Project Overview (20%)

Rough Cuts Submission: DUE April 16th -10% of the project grade.

Final Cuts Submission: DUE April 23rd– 90% of the project grade.

Project Description:

This final project is a culmination of your exploration into digital cinema throughout this course. Drawing upon the knowledge gained from assignments, readings, screenings, and class discussions, you are to create a comprehensive project that investigates at least two facets of digital cinema. This exploration can include, but is not limited to, looped video, AI video, composited video, networked video, hyperlinked video, database video and the video essay.

Project Options:

You have the freedom to choose the format of your project, which can range from a fictional narrative, a non-fictional documentary, to an abstract or experimental piece. Regardless of the chosen format, the following criteria must be met:

Medium: The project should primarily be made of video (moving digital images originally captured as video) as its medium.
Cinema Language: Incorporate elements of cinema language, such as thoughtful continuity editing and/or montage, to tell your story or present your concept effectively.
Conceptual Engagement: Your project should reflect a deep engagement with the ideas and themes discussed in class, demonstrating how these concepts have influenced the conception and execution of your work.

Evaluation Criteria:

Your grade will be determined by both the creative quality and effort evident in your work, as well as the depth of its conceptual underpinnings. Projects will be assessed based on their originality, technical execution, and the extent to which they engage with and reflect class discussions and readings.

Suggested Project Ideas:

A mini-documentary exploring a significant topic or issue.
A detailed profile of an individual, company, product, or institution.
A fictional short video that tells a compelling story.
A video essay that presents a critical analysis of a particular subject.
A series of video loops that explore thematic or conceptual ideas.
A work of database or hypercinema utilizing HTML5 to create an interactive experience.
An experimental video that employs hybrid spaces through composting, spatial montage, and other effects.