Week 1: Assignment Overview

  1. Final project idea
  2. Project Management
    • Complete a Git tutorial and document your repository setup.
    • Create a personal website with a section about yourself and your project sketch.
  3. Agreement
    • Signed and uploaded.

1. Final Project Idea

Sponge Puppet with Mechanism for Storytelling

1. Introduction

Storytelling is a powerful tool for stimulating children's imagination, improving language comprehension, and strengthening the bond between the narrator and the listener. This project aims to design and build a sponge puppet with an internal mechanism that synchronizes facial movements with narration.

2. General Objective

Design and construct an interactive sponge puppet with a movement mechanism synchronized with the voice, making storytelling more engaging for children.

3. Specific Objectives

  • Design an internal structure that enables mouth movement and basic facial expressions.
  • Use accessible materials and digital fabrication techniques to build the puppet.
  • Implement an activation mechanism based on servo motors controlled by an electronic board.
  • Develop an automatic synchronization system between narration and mouth movement.

4. Justification

Puppets have been used for centuries as educational and entertainment tools. However, most require manual manipulation, limiting immersion in the story. This project seeks to create an interactive puppet that enhances the storytelling experience, offering a more dynamic and immersive way to tell stories.

5. Methodology

Design and Fabrication:

  • Creation of the puppet model in 3D software (Solid Works, Fusion 360, or Blender).
  • Cutting and assembling the sponge to form the head and main structure.
  • Implementation of a mechanical system for mouth mobility and facial expressions.

Electronics and Programming:

  • Use of an Arduino board or similar to control the mouth mechanism.
  • Implementation of servo motors for synchronized movement.
  • Development of synchronization software based on voice detection.

6. Expected Impact

  • Improvement in storytelling experiences.
  • Increased attention and interaction from children.
  • Use of accessible technologies for education and entertainment.


2. Project Management & Version Control

2.1 Installing Git

  1. Go to the official Git website.
  2. Choose and download the correct version for your OS.
  3. Run the installation file and follow the instructions.
  4. To confirm installation, run:
    5. git --version
Steps to install Git

2.2 Setting Up Your Git Profile



git config --global user.name "Manuel Ignacio Ayala Chauvin"
git config --global user.email "your_email@example.com"


Git Profile Configuration Steps

2.3 Connecting Git to GitHub/GitLab Using SSH

  1. Check if you already have an SSH key:
    2. cat ~/.ssh/id_rsa.pub
  2. If no key is found, generate one:
    3. ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
Generating SSH Key for GitHub/GitLab

2.4 How to Generate an HTML5

This guide explains step by step how to create an HTML5 document with all elements aligned to the left.

2.4.1. Create a New HTML File

Open your favorite text editor and create a new file (for example, index.html).

2.4.2. Set Up the Basic HTML Structure

Begin with the following structure:

<!DOCTYPE HTML>
			  <html>
				<head>
				  <meta charset="utf-8" />
				  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
				  <title>Your Title Here</title>
				  <link rel="stylesheet" href="path/to/your/stylesheet.css" />
				</head>
				<body>
				</body>
			  </html>

2.4.3. Add Custom Styles for Left Alignment

Inside the <head> tag, include a <style> block to set text alignment to left:

<style>
				body,
				.container,
				header,
				section,
				footer,
				.content,
				nav ul {
				  text-align: left;
				}
				body {
				  background-color: #f5f5f5;
				  color: #000;
				}
				a {
				  color: #000;
				  text-decoration: none;
				}
				a:hover {
				  text-decoration: underline;
				}
				h1, h2, h3, h4, h5, h6 {
				  color: #000;
				  font-weight: bold;
				}
			  </style>

2.4.4. Build the Header and Navigation

Add the header section with your logo and navigation menu inside the <body>:

<div id="header">
				<div class="top">
				  <div id="logo">
					<h1 id="title">Your Name</h1>
					<p>Your Profession</p>
				  </div>
				  <nav id="nav">
					<ul>
					  <li><a href="#top" id="top-link">Intro</a></li>
					  <li><a href="#FinalProject" id="FinalProject-link">Final Project</a></li>
					  <li><a href="#ProjectManagement" id="ProjectManagement-link">Project Management</a></li>
					  <li><a href="#Agreement" id="Agreement-link">Agreement</a></li>
					  <li><a href="#WeekConclusion" id="WeekConclusion-link">Week Conclusion</a></li>
					</ul>
				  </nav>
				</div>
				<div class="bottom">
				  <!-- Social Icons can be added here -->
				</div>
			  </div>

2.4.5. Create the Main Content Sections

Add a container for your main content sections, for example:

<div id="main">
				<section id="top" class="one dark cover">
				  <div class="container">
					<header>
					  <h1>Week 1: Assignment Overview</h1>
					</header>
					<footer>
					  <a href="#FinalProject" class="button scrolly">Final Project</a>
					</footer>
				  </div>
				</section>
				<!-- Add additional sections as needed -->
			  </div>

2.4.6. Add Specific Content for Each Section

For example, for the "Project Management & Version Control" section:

<section id="ProjectManagement" class="two">
				<div class="container">
				  <h2>2. Project Management & Version Control</h2>
				  <h3>2.1 Installing Git</h3>
				  <ol>
					<li>Visit the <a href="https://git-scm.com/downloads" target="_blank">official Git website</a>.</li>
					<li>Download the version appropriate for your OS.</li>
					<li>Run the installer and follow the instructions.</li>
					<li>Confirm installation by running:
					  <pre><code class="language-bash">git --version</code></pre>
					</li>
				  </ol>
				  <img src="path/to/image1.png" alt="Steps to install Git" width="600">
				  <!-- Add subsections for Git profile setup and SSH key generation as needed -->
				  <footer>
					<a href="#Agreement" class="button scrolly">Agreement</a>
				  </footer>
				</div>
			  </section>

2.4.7. Include Scripts Before Closing the Body

Add your JavaScript files just before the closing </body> tag:

<script src="assets/js/jquery.min.js"></script>
			  <script src="assets/js/jquery.scrolly.min.js"></script>
			  <script src="assets/js/jquery.scrollex.min.js"></script>
			  <script src="assets/js/browser.min.js"></script>
			  <script src="assets/js/breakpoints.min.js"></script>
			  <script src="assets/js/util.js"></script>
			  <script src="assets/js/main.js"></script>

2.4.8. Save and Test Your Document

Save the file and open it in your web browser to ensure that all elements are correctly aligned to the left and that the page functions as expected.



Agreement

Fab Academy Student Agreement

The Fab Academy is responsible for:

  • Teaching principles and practices of digital fabrication
  • Arranging lectures, recitations, meetings, and events for the class
  • Evaluating and providing feedback on student work
  • Offering clear standards for completing assignments
  • Certifying and archiving student progress
  • Promoting a respectful environment free of harassment and discrimination

I am a Fab Academy student, responsible for:

  • Attending class lectures and participating in reviews
  • Developing and documenting projects in enough detail to reproduce them
  • Honestly reporting my work and attributing the work of others
  • Following locally applicable health and safety guidance
  • Promoting a respectful environment free of harassment and discrimination

Manuel Ignacio Ayala Chauvin



Week 1: Conclusion

The first week at Fab Academy has been fundamental in establishing the foundation for the entire learning and project management process. During this time, I outlined the idea for my final project: creating a sponge puppet with an internal mechanism that synchronizes facial movements with narration, aiming to transform the storytelling experience into something more interactive and dynamic.

Simultaneously, I familiarized myself with essential project management and version control practices. I completed a Git tutorial, installed and configured the tool, and learned how to connect Git to platforms such as GitHub or GitLab using SSH keys. This will allow me to document and rigorously track the development of my projects.

Additionally, I created a personal webpage using HTML by following a detailed guide that included setting up the basic structure, adding custom styles to align all elements to the left, and building a functional navigation bar. This activity enabled me to document my profile, the proposal for my final project, and other relevant details.

Finally, I signed and uploaded the Student Agreement, committing myself to adhere to the policies and standards of Fab Academy. All these activities have laid the necessary groundwork to advance in the course, integrating both technical knowledge and management skills.

In summary, this first week has been a period of significant learning and tool integration, preparing me to face future challenges in the realm of digital fabrication and project management.