Element Inspector

Assuming you haven't scratched your eyes out from the sight of comic sans, in this post I will be going to some professionally designed websites and looking at the actual HTML and CSS code that makes the websites look the way they do, and trying to figure out how they work.

The first site I will be going to to look at for elements is a site titled "If the Moon Were Only 1 Pixel". Unfortunately for those viewing this from school internet, the site is blocked for some reason (Personal Website content?) It is a very interesting website that shows a scale model of the solar system, truly depicting the amount of SPACE that is in between all of the planets in our solar system. The website even has a feature that lets you cruse along at a scaled speed of light, meaning it takes 8 minutes to get from the sun to the Earth, half an hour to Jupiter, and two hours to get to Pluto.


Of course, it would be very tedious to have to scroll all the way to every single planet when you just want to quickly look at the planets, and see how they compare to each other in size. At the top, there is a navigation bar that allows you to click on any of the icons that symbolize the planets, allowing you to jump to the planet, as you can see in the image to the left. The way this work appears to be simple, and I will explain it to the best of my ability.

Peering into the jumble of code present to create this site, I found the Navigation bar in the code, a simple list of links all named for a div. When the user clicks one of these icons, it jumps to the location of the "div" that is placed where that planet is on the chart. In the pair of images below you can see I have boxed out the table where it displays the links, and also the divs themselves, and underlined the names of the divs.

----------

The site also displays the would-be distance from the sun at the bottom. Interestingly, it allows you to choose from a variety of different units to display the distance in. This is from a small dropdown (or i suppose up?) menu that pops up when you click on the distance at the bottom. Selecting any of these causes the website to use some black magic javascript voodoo that I don't know entirely how works. Although, I do have a decent understanding of basic logic structure in coding, and can try to the best of my abilities to explain it.

Above is the actual code from the HTML, it doesn't reveal much about the inner workings of the site, but it is there nonetheless, and vitally important.

Above is the ultimate terror that is Javascript. from what I can see from it, it appears that the code assigns the distance of one kilometer to some distance in pixels, then, using the kilometer as a base, calculates what the distance would be for all of the other units of measurement, relative to the kilometer.

An interesting feature that the site contains, is a button in the lower right corner that will automatically scroll the image, to a scale speed of light, meaning it takes 8 minutes to get to Earth from the Sun, and around half an hour to get to Jupiter from the Sun.

Considering how LONG that it takes to get to the outer planets of our own solar system, I think that proves once and for all, that light speed, is just too slow.

Anyway, joking aside, this little trick appears to also use some demonic Javascript wizardry. This time unfortunately, I have next to no idea how this is working its magics. Maybe someone reading this who better understands java or just logic programming in general will see it and understand. There is also some HTML code where the button is, but that appears to only simply place the button in its place, and not actually affect the java in any way.

My Logo

Before the end of 2nd Semester we were tasked with creating a new logo for ourselves. Though this was a few months ago I still do remember a majority of the details and the process I went through to create my logo. In this blog post I will show you through the process that I went through to create the logo that I ended up using.

In case you had not noticed, the small icon displayed on the tab for my Blog Page (the Favicon), is a small flag. That flag is the flag of the glorious Empire of Matto. Long story short, many years ago I created a fictional alternate reality world where most of the world was ruled by massive nations, each nation was created, ran, and named after me or one of my friends. These nations were basically used to represent conflicts within our inner groups of friends. I took the idea of this and stuck with it, creating a flag for my nation as well as a very detailed history for the nation. The flag you can see is displayed to the right of this paragraph, that flag has been the basis for all other flags that I've made for my great nation, and the colours have been used as a basis for many of the designs for my projects and also for my logo.

The first step to creating our logo was what many would expect, simply brainstorming an idea. It took me a while to get any decent ideas, but eventually some started flowing into my mind. To the left of this paragraph you can see my first primitive sketches. Various ideas sprang to my mind, using the flag to represent the lines across the T's of my name, as well as simply having them be on the tops of the T. Another idea that I rather liked was a tank blasting through a wall with Matto displayed in big letters above the hole blasted by the tank, however that idea would have been very complex and difficult to actually make. After scrawling some ideas onto the piece of paper that I scanned and have displayed on this document, our class as a whole spent a day showing the designs we had come up with and asked the other members of our class what their opinions of the designs as well as for ideas for a logo based off of those that we had already created. On my sketching image, you can see to the bottom left there is another design, simply Matto written in cursive with the Imperial flag hanging off of the tail of the O. That idea is the idea that I based my flag off of for the most part, although there were parts of it that I had changed.

This picture isn't as significant, before making the final draft of my logo before designing it on the computer I wanted to practice writing my name in Cursive script. Considering I hadn't written hardly anything in cursive for several years, I hope one can understand why I had to practice writing my own name in cursive, when it was in a much larger size than that needed to simply sign a small dotted line.

To the right, you can see the final sketch that I made of my logo, before going onto the computer to actually create the logo in Adobe AfterEffects. This was the last hand written thing that I did for the project. From the tail of the O you can see the colours of the Imperial flag fly off into the distance, which I had based somewhat off of the idea of having the flag hang off of the tail of the O. As you can see, my cursive handwriting still isn't very good, even after practicing, but hey, this wasn't simply just writing it, it was writing in very large bubble letters, and that's much more difficult to do.

Finally, now you can see below this paragraph, the final result of my creativity. Once I had the idea solidified in my mind, it was a simple task of going into Adobe AfterEffects and recreating the logo, with a crisp, fine look to it. Personally, I am very satisfied with the end result. The logo is simple, and displays the colours of the Imperial Flag, and pleasant to look at if you ask me.