Pages

Sunday, August 28, 2016

WayBack Machine: 3 Sites, Then and Now

Amazon.com
The content on Amazon has stayed the same over the years, they've just added features. Style wise, they've gotten rid of many of the rounded borders and their outlines. The content has also been spread out more in the 2016 version.

In the 2016 version, there isn't as much text, which makes the site easier to digest. Their code has obviously changed between these versions, so let's check out the differences.






This is what their code looked like then:
<a name="top"> <!--Top of Page-->
</a>
<table border=0 width=100% cellspacing=0 cellpadding=0>
<tr align=center bgcolor="#FFFFFF">
<td>
<a href=/web/20000229110136/http://www.amazon.com/g/v11/nav/tabs/top-nav.map/ >
<img width=590 height=75 border=0 src="/20000229110136im_/http" >
</a>
</td>
</tr>
</table>


And here's what the same thing look like now:
<img src="/web/20160616140023im_/http://images-na.ssl-images-amazon.com/images/G/01/gno/sprites/nav-sprite-global-sprite_bluebeacon-1x_optimized._CB29559;
<!--[if IE 6]>
<style type="text/css"><!--
#navbar.nav-spirte-v3 .navsprite {
background-image: url{/web/20160616140023im_/http://images-na.ssl-images-amazon.com/images/G/01/gno/sprites/nav-sprite-global-sprite_bluebeacon-v1._CB327533;
}
--></style>
<![endif]-->
<!-- -->
<script>
(window.AmazonUIPageJS 7 AmazonUIPageJS : P).when('navCF').execute(function() {
(window.AmazonUIPageJS ? AmazonUIPageJS : P).load.js('/web/20160616140023im_/http://images-na.ssl-images-amazon.com/images/I/01o2nt7QnvL._RC|71seGE;
});
</script>

As we can see, the code now is much more complicated to accommodate for different web browsers, when back then compatibility wasn't much of an issue because there weren't many options in the first place.

BestBuy.com

Back when the internet was brand new and connections were slow, the goal of web designers was to design a website that had a small file size. This led to webpages looking fairly empty, as we can see here with Best Buy's website in December of 1996.
Now, in 2016, connections are much faster, so we have more content. This is an an obvious improvement from the old version.







Once again, the code for the old site is much different than the updated version:
<p align="center">
<img src="lites3.gif" alt="Best Buy - Just the Store You've Been Shopping For!" width="599" height="47">
</p>
<td valign="top" width="200"><a href="insert/">
<img src="Insert.gif" alt="Weekly Best Buys" border="0" width="178" height="96">
</a>
<p>A sampling from our weekly
        circular. Check it out!</p>
</td>

In the current version, all of the code is completely different, here's what it looks like:
<div id="header">
<!--<![endif]-->
<a href="#headerskip" title="Skip to content" class="skip">Skip to content</a>
<div class="header-inner">
<header>
<div class="secondary-fullbleed-wrap">
<div class="secondary-wrap">
<div class="value-prop"><a href="/web/20151009082825/http://www.bestbuy.com/site/misc/expert-service-unbeatable-price/pcmcat345300050032.c?id=pcmcat345300050032" data-lid="hdr_shi">Expert Service. Unbeatable Price.</a>
</div>

ChefBoyardee.com
The Chef Boyardee website has also gone through huge changes. The old version is extremely cluttered and hard to look at.
They've cleaned up the website a lot and made it easier to navigate.









Here's the code for the 2003 version:
<embed src="/web/20030801082330oe_/http://www.chefboyardee.com/flash/home.swf" quality="high" bgcolor="#ffffff" width="770" height="500" name="chef" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">

I found it interesting that for their website they just embedded a flash file, but in the 2016 version, it's much different:
<a href="/web/20160405091719/http://www.chefboyardee.com/" class="brand"><img src="/web/20160405091719im_/http://www.chefboyardee.com/assets/images/common/chef-logo.png" alt="Chef Boyardee"></a>
            <div class="main">
                <div class="inner clearfix">
                    <a class="toggle-main-menu" href="#"><span></span></a>

Some common themes I noticed between these websites is the use of tables in the older version. As the languages used to create websites are updated, you can create much nicer looking sites and even better looking code. The internet has evolved since it's creation, and it will continue to do so in the years to come.

Friday, May 13, 2016

Motor-Sthetics: Robo-Dough

I'm very proud of what our team has accomplished. We were good with assigning roles in order to get the job done. We struggled most with getting our website done on time, but we came in outside of school and got it done. Next time, I want to set deadlines and make sure they get met. There isn't anything I would really change, but I have learned how to work in groups better. I worked on graphic design, and web design. Here are some screenshots of what I worked on.



Wednesday, December 16, 2015

Webpages

I made these webpages about me using Adobe Dreamweaver, I learned how to use various HTML tags and CSS styles. Here are some screenshots:


360 Tour of my House

I made this house in SketchUp, I was able to make the basic design really quick, so I added a bunch of extra stuff, such as a patio, driveway, stone pathway, and a Ferrari in the garage.

Monday, November 30, 2015

Doghouse

I made this doghouse in Sketch-up by following blueprints. I used many tools, such as the push and pull tool. I got the dog from the warehouse, but I made the bowl and trees.

Friday, November 20, 2015

Tables and chairs

I made this set of chairs and a table using Sketchup, I used many tools, such as the push pull and follow me tool.

Thursday, November 12, 2015

Name animation




Today, I made this in photoshop, it's an animation of my name being "written" in a cursive-ish font. I made it by typing my name, erasing it from right to left, and then reversed the frames. After it's complete, I added a few effects to the words.