HTML & CSS This week, I familiarized myself with HTML and CSS. I don't have a lot of experience coding in any language, so I started out by trying to read through the template files we were given. I realized pretty quickly that I couldn't learn anything about HTML until I tried to make changes. At first, I was timid. I only had the guts to change a few font colors, but I immediately changed them back once I had. Then, I realized that even if I totally messed up the website, I could always start over again. I started adding text, new pages, and changing fonts. This helped me understand the code that was given to us, and made it easier to add new things. I wanted to try to personalize the website further. I googled how to turn an image into a link so that my homepage wasn't cluttered with words. This snippet of code helped me do that:
<div class="col-sm-4">
<body>
<a href="./01_intro/index.html">
<img alt="clouds" src="./01_intro/week1cloud.png" >
</a>
</body>
</div>
I also wanted to use a background image rather than having a plain white background on my home page. I tried to google this as well but couldn't figure out exactly how to fit what I found into the code we were working from, so I looked at previous PS70 pages. I found this trick by inspecting the remnants of a website from Michael Zhang:
<body style="padding-top: 0px;background-image: url('./01_intro/cloud.png')">
As the weeks go by, I plan to continue making stylistic changes to the website. I understand how my website functions currently and can use it, but I'd like to turn it into something similar to a page I have using Adobe Portfolio. I don't want to take any long chunks of code from other websites until I completely understand everything I have here first. I plan on learning how to make scroll boxes within a page and having a preview when you hover your mouse over an image on the home screen. Key Takeaways: 1) Any element or thing will be contained with tags of the basic format:
<tag> element </tag>
where the "tag" option could be anything from div, body, header, etc... There is always an opening and a closing with each thing. 2) href="something" is a link to a new page. 3) For every page you have, you need to update the links in the respective index file, because the locations of everything on your website is different depending on what page you're currently viewing.
FINAL PROJECT IDEAS Robo-pufferfish I recently toured an engineering firm near my hometown that was tacking on many unique projects, but one that really caught my attention was their plan to build a robotic jellyfish. The robot had applications in military espionage and would utilize only soft robotics. As cool as the idea sounded, I couldn't help but think that if these engineers did their job too well, they might confuse some sea turtles! If sea turtles eat plastic bags that aren't supposed to look like jellyfish, what's going to stop them from going after a silicone replica of one? I tried thinking of an aquatic organism that doesn't have many natural predators, and my mind got hung up on one thing: pufferfish. My proposed robo-pufferfish would serve the same purpose as a robo-jellyfish (espionage), but if it makes physical contact with something in the ocean it would have the self defense mechanism to puff itself up. This would help it avoid being eaten by a hungry predator. For the purposes of this class, the basic functions would be to swim in water and expand on impact. Armadillo Since building a waterproof robot might be challenging given my experience with robotics (none), I decided to think of a unique land animal that I would try to emulate. After much thought, I settled on an armadillo. As a bonus, a robotic replica of an armadillo will not transmit Hansen's disease (leprosy)! This robot will "walk" on four feet, curl up into a ball when it bumps into something, and unfold itself a few seconds after the threat is removed. The purpose of this robot would mostly be for art, and to see if I can make it. Squid-Inspired Necklace The idea I'm leaning most towards is a self-defense necklace inspired by squids and skunks. When I think of gadgets to prevent sexual assault, I can think of a few: pepper spray, nail polish that changes color when a drink is contaminated with a date-rape drugs, and female condoms with spikes that would latch onto an attacker. While some of these are definitely effective, I've found that they are each impractical in some way. Not everyone wants to stick their fingers in every drink they take during a night out, some people might be hesitant to use pepperspray until it's too late, and the female condom doesn't prevent a harmful act. I'd like to add my idea to the mix. My ring-necklace combo would deter an assailant and mark them so they can be identified later, without hurting them. The ring would have a button on it that connects to the necklace via bluetooth. When the user presses the button with their thumb, it would triggers the release of ink. This way, if the victim's wrists are pinned down, they can use the necklace with one hand. The necklace would contain a liquid that 1) smells horrible (potential substances include otter musk and skunk spray) and 2) releases ink, similar to the kind found in clothing tags, that stain the skin of the attacker. This will hopefully overwhelm the attacker, and anyone else who comes into contact with the victim. For the purposes of this class, I would just use water. This idea has limitations due to its size - necklaces and rings are both small objects and the materials we use in class might be difficult to scale down.