Project 2

Hi readers! This week I decided to do some research on html code to make this website as useful as possible. If you guys are interested, I put some of the things I learned below.

 

After learning the basics of HTML code, I decided to look at some real-world examples of websites I use. I looked at YouTube, Sony USA, and the BBC homepage. After looking through the html code of these websites, I noticed that there were distinct differences between the three websites. Here are my findings.

The first website I looked at was YouTube.com. The code behind this website was extremely complex. The code looked nothing like what was presented in the module, statements were longer and the tags were more complex. The amount of nesting was much greater as well, one statement could be nested within ten other statements. This code was very hard to understand, the only part that I could understand seemed to have “paths” to other links that was decided through code that called on a lot of functions. I believe that this is part was the recommended videos section. The second website I looked at was Sony USA. Of the three websites, Sony had the most normal structure. The html code was mostly easy to understand, with everything properly tabbed over and not bleeding on to the next line. There were however, some new tags I had never seen before. These were names such as “link rel”, “meta”, and “path ID”. The final website I looked over was the BBC Homepage. I thought that since the website was managed in another country the format would be different. This was not the case, the website looked like the Sony website, but had more sections of long code I couldn’t understand. The If statements and loops were similar in structure as well to the Sony website html code.

The first difference I noticed in the codes was the beginning of the code. Both BBC and YouTube did not start like the html example in the module. Instead the codes started with sections of code that defined the background theme and font sizes for different text boxes. The line “dark invert style” hinted me towards this conclusion. Similarly, on the BBC website the code begins with some links and titles for the heading part before getting to the title of the page. Also, just under this section of code, there is a section that runs Javascript on the page itself.

The second difference I found in the websites is in the different ways of formatting the html code. As I stated earlier, the Sony website was the easiest to read, with every single margin at the same spot and everyone properly spaced out. The second most organized code was the BBC website. The code was mostly understandable and properly separated except for some sections of code that took up more white space than usual. Lines of code were separated by lines of white text and the angle brackets were in different places on each line. YouTube is a bit of a special case, the case was very well organized with cascading rows of lines starting with “<div>” making an arrow sign. The code was just too dense and complex for me to understand.

The final difference I noticed was the general length of code of the three websites. In order from shortest to longest it would be; Sony USA first, BBC second, and YouTube third. This is probably due to the complex nature of YouTube’s website. There are so many dynamic lighting changes and moving elements of the front page, as well as a wealth of different links to show users. On the other hand, Sony USA is much shorter in comparison because the physical page that users see is much simpler and shorter. The entire page consists of a couple ads for Sony products and links at the top and bottom of the page.

Looking deeper at HTML code taught me to see deeper into a website’s structure. For example, I have a newfound respect for websites such as YouTube, Hulu, and Social Media. To present relevant information from such a large pool of resources is impressive. In addition, the way that the website is designed to keep users engaged and connected such as icons lighting up as you scroll over them is something I never something I really paid attention to until now. I feel like I can take the information I learned today and apply it to this blog.

IMG_3522

Some of the complex code from YouTube.com, while organized very well, it is hard to understand

IMG_3523

A section from the Sony website I understood, it has links to different websites such as “Facebook” and “Twitter”.

IMG_3524

Some examples of the badly formatted code from the BBC website.

 

Sources:

YouTube, YouTube, http://www.youtube.com/.

“Where To Buy.” Sony USA – Electronics, PlayStation, Movies, Music, Product Support, http://www.sony.com/.

“Homepage.” BBC News, BBC, http://www.bbc.com/.