All posts by gabriel22mizzou

About gabriel22mizzou

From Los Angeles, Ca. Freshman at Mizzou. Journalism Major.

Blog 6: NY Times Interactive Quiz

I decided to do the new york times multimedia quiz on how people talk. It was hard for me to figure out what actually created certain actions looking at the jQuery. However, I believe I definitely know what this does:

function surveyEnd() {

// fade out survey holder

$c.find(‘.quiz-container’)

.fadeTo(500, 0, function() {

$(this).hide();

// fade in the map holder

$(‘.map-container’).fadeTo(650,1);

})

// bring back map preloader

$c.find(‘#map-preloader’).show();

// get answer indices

$.each(responses, function(k,v) {

if ( v == ‘1’ )

answers.push(k);

})

This should be what happens when the survey ends and it fades out. The box goes away and a big map fades in. The .fadeTo is very simple but it makes for a clean switch. It is not distracting at all.

survey end and restuls
survey end and restuls

I wish I knew what the jquery was for the actual quiz. When the cursor goes over a possible answer, it is underlined and when it’s clicked it turns green and an X appears in the box. Once you hit next, a map will pop out on the side showing you a specific result for that answer. I wasn’t able to find it but I thought that was a simple, non distracting way to have answers be selected. Hopefully someone can help me figure this out.

Quiz
Quiz
Advertisements

Blog 4: Moviefone’s coverage of the 2015 Oscsars

Moviefone.com is website primarily used to find movie times near you and movie reviews. I was surprised to find out that they had a page dedicated to coverage of the Academy Awards.

2015/03/img_0563.png

I think the best part about this site is how they handled it as an ongoing story rather than just a single episode. They are still publishing content on this page related to the Academy Awards weeks after the show. That’s impressive.

As far as the design of the site – I browsed through the site on my iPad, so maybe it is different on a laptop or desktop, but I thought it was extremely simple. I feel like I could’ve made this site with the current coding skills we’ve learned in this class. It has a slideshow at the top with what I’m guessing is the most recent stories, a horizontal list of nominated films that you can scroll through/click and find out more info, and then as you scroll down there are more stories vertically listed in chronological order with pictures and a headline. I think they laid this content in a way that’s not overwhelming. That’s impressive, because usually sites with so much information on one page is too much to handle for the eye and confusing. This site is not like that.

I don’t like how the side bar at the top of the page has nothing to do with the Oscars. It is just a list of the most popular articles on moviefone.com, if anything I think they should have it at the bottom of the page because it is not related to this content. Under that sidebar section there is another section that is related to the Oscars. It has thumbnails and titles of interesting photo galleries. That should have been at the top of the sidebar sections. I also thought they should’ve made it a different color besides grey. I think these photo galleries are cool, but the grey and white color makes someone viewing this site think it is not important informaton, it doesn’t draw the eye.

Combining multimedia – They combine text, photos and video. Very simple.

Blog 3: Creative Momentum Web Design Firm

Funny thing is I actually found this CSS tool on a web design firm site called Creative Momentum. I scrolled through and noticed a cool transformation on it’s photos where you can click to see more of their work. When you put your cursor over one of the photos, a circle thing appears over it and says “See more”. I thought that looked really cool and would love to do that myself. Here is an example of the sites CSS transition:

Screen Shot 2015-02-24 at 2.26.43 PM

via: http://thecreativemomentum.com/
via: http://thecreativemomentum.com/

I used the inspector element tool on Google Chrome. It was intimidating to look at. There are a lot of things to chose from. I hope I found the right part. So this is what I found:

-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
-webkit-transition-delay: 0s;
-webkit-transition-duration: 0.2s;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease-in;
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(0, 0, 0);
background-image: none;
background-origin: padding-box;
background-size: auto;
color: rgb(255, 255, 255);
cursor: auto;
display: inline-block;
font-family: ‘Open Sans’, helvetica, arial;
font-size: 14px;
font-weight: 200;
height: 280px;
margin-bottom: 2px;
margin-left: 2px;
margin-right: 2px;
margin-top: 2px;
outline-color: rgb(255, 255, 255);
outline-style: none;
outline-width: 0px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: relative;
text-decoration: underline;
transition-delay: 0s;
transition-duration: 0.2s;
transition-property: all;
transition-timing-function: ease-in;
width: 280px;

I’m going to try it on my own and see what happens.

BLOG 2: Espnla.com

I chose ESPNLA.com. This is a news site by ESPN that is focused all on Los Angeles sports teams. I think it does a great job creating a clear visual hierarchy on each page. It has the lead story with a big picture or video right in the middle, and a link to the story. It also has the latest headlines in a sidebar directly next to it.

http://espn.go.com/los-angeles/
http://espn.go.com/los-angeles/

The headline sidebar is easy to find and makes it easy for people to get the information they are most likely looking for. It actually allows you to see all the latest news from one of those specific team buttons by just hovering over one of them.

http://espn.go.com/los-angeles/
http://espn.go.com/los-angeles/

I also think this site does a great job clearly defining areas, and putting certain things in the right places based off of importance. It’s not even question of which these are clickable and which are not thanks to when your cursor hovers over something,  if it’s clickable, a line will show up under it. Or a picture will have a play button in the middle of it to show that it can be clicked and a video will start.

I also love that if you scroll down on the homepage it will show the next game coming up for each team. This site has a lot of information but I think it does a great job making that information easily accessible and not overwhelming. It provides a great experience for an LA sports fan. Overall, I think this is a great site.

Blog Post 1: NPR Planet Money Makes a T-shirt

I decided to cover a multimedia piece by NPR. It is an extremely complex piece that utilizes all different kinds of media to tell the story of what goes behind the making of a T-shirt. It starts with a home page that has a picture and a video that is basically an introduction to the story and all 5 sections.

http://apps.npr.org/tshirt/#/title
http://apps.npr.org/tshirt/#/title

Once the video is done it automatically takes you to the next section. Each of these sections has a picture with motion and a video at the top. When finished the page scrolls down for the user leading to more content. This makes the multimedia piece very easy to navigate. There are also buttons on the bottom right and left of the screen.

http://apps.npr.org/tshirt/#/title
http://apps.npr.org/tshirt/#/title

These buttons give the user the ability to move throughout the piece how the desire. Whether they want to skip to a certain section or go back.

I think one of the best parts about this piece is that even though the text and graphics compliment the videos very well, they also can stand alone. I think that is great because if the user doesn’t want to watch the video, they are not necessarily missing out on anything and are still able to learn valuable information.

As I said before, the site uses all different kinds of media: photos, video, several different styled graphics and tables and text. I think that is what makes it so strong. The variety of pieces that are used to assist each other yet at the same time can stand alone. You can tell a lot of work went into all of this. There is actually a section of the piece that explains the process of creating it.

Overall, I think this was a very well done multimedia piece of journalism.  It’s clean, simple and easy to navigate with high quality pieces. I think the only possible negative is that there is so much information it can be a little overwhelming.