Javascript

Screen Shot 2014-11-09 at 7.21.41 PMThis 2012 post by the Guardian is a pretty cool way to show data. The story is gay rights in the US, and they have different interactive charts that show where each state stands in gay rights. They have the categories broken down by color, so you can get an easy visual just by glancing at the chart and key. But if you want more specific information, you just hover over the slice that represents the state and information shows up along the side. If you scroll down, the areas of gay rights are broken down by region and further discussed.

I noticed they had a few small problems- like in some of the regional charts, only one of the highlighted categories descriptions pops up. For example, you can clearly see that Minnesota allows both single and joint adoptions, but when you hover, it only says single. Otherwise, however, the story seems pretty successful.

You can see they used javascript to make it interactive- it’s how they have the hovering and have the information pop up at the side. CSS was mainly used for basic styling. I just really think it’s a cool way to make data interactive, so that the viewer doesn’t get lost in all the information and can focus on however much of the data they wish at one time.

Advertisements

BLOG SIX- Si Digital’s JavaScript Magic

屏幕快照 2014-11-09 下午2.44.26

This JavaScript site is Si Digital‘s new-look portfolio and blog. This grabs the attention via its intriguing homepage animations, all done through JavaScript. We can see such technique easily guides the user through our services, with liquid moving through tubes activating an animation at each stage.

To achieve this effect they used jQuery .animate(), using its step() option to work out where the liquid was in the tube – and if it needed to activate any other animations on its journey. We know that viewers tend to find their own interest whenever they head on a site and engage. Everybody reads at different paces. Here, Si Digital tried to find the right balance for the liquid speed, which is not too slow but trackable. Not too much embed of JavaScript makes such great impact on the overall effect to a site. Finding the creative way to present is sometimes more important than the actual technical showcase.

http://sidigital.co/

Blog Six: New York Times: A Nation Challenged

fathers

I found an older article from the New York Times published in 2002. It’s an interactive story about the fathers of lost fire fighters and officers in NYC one year after September 11th. The story is extremely intricate, thorough and gut-wrenching. Even more than that, the online piece is extremely interactive. We see the fathers and can learn more about them and their sons. It also takes us to a whole article about each father and his coping since the incident. There are also audio elements.

This story used a lot of interactive elements. The designers used CSS to design the page and add the color scheme. On the individual bio pages, we can clearly see that they had to use div’s and boxes to separate the information. There are also some jQuery effects present. They use some shadowing, fade-in, fade-out, audio plug-ins and even the next and previous buttons.

This all adds to the content of the story. It’s very enjoyable and engaging. The effects aren’t overbearing and they flow well with the site.

Vice News

Screen shot 2014-11-07 at 11.31.53 AM

I like the use of JavaScript used in Vice News. In my opinion, it is just barely enough to give you the sense of interactivity, without detracting from the content. Granted, a bit more interactivity wouldn’t take anything away from the content, but I’m in a minimalistic mood today, so I can appreciate it.

For starters, there is a nice big/bold sticky nav bar that follows you all the way down the page. When you scroll over each picture and corresponding headline, the picture fades a bit and the headline becomes orange.

In the features section there are much larger photos and, when you scroll over them, it shows the photo credit in the bottom right corner.

There is also a tab that reads “Read” or “Watch” in the top right of these photos that turns orange when you scroll over them.

Nothing too complicated or gripping, but I think it gets the job done.

How did St.Louis Post-Dispatch use CSS, JQuery, and Javascript in its website

Screen Shot 2014-11-07 at 10.50.17 AM

The website I’m looking at this week is St.Louis Post Dispatch. I can’t tell a ton about how the website uses jquery and javascript, but by looking at the website and its code, I can tell that there are two things definitely using javascript or jquery. The designers used javascript to embed a video player, but I don’t really know how that works, since I don’t really understand those codes. As for the navigation bar, I think the Post-Dispatch staff used the jquery, but I cannot find the jQuery in the website’s code. I think the navigation bar should always stick to the top of the screen, but that is not the case for this website. It disappears after you scroll pass it and comes back up after you scroll to the story section. I guess maybe it’s because of the miscalculation of the height, but it can also be other reason (maybe to be functional in some way or it’s too much trouble to fix). The website used CSS for styling purpose.

BBC News uses JavaScript

Almost every news site I looked at uses JavaScript and jQuery. I never knew how important this aspect was. In fact, I generally took these tools for granted. When I first started designing I was frustrated because I didn’t know how to do them when they are so commonly used. Now that I know how it has become exciting and has improved my designs drastically.

Screen Shot 2014-11-07 at 9.54.59 AM

BBC News is my example of a news site using JavaScript and jQuery. Just one example is a slideshow of videos towards the middle of the page. I noticed this aspect because I wanted to do something very similar for my True/False website. Unfortunately, we had not learned JavaScript and jQuery yet, so I was unable to do this. I am looking forward to adding this aspect and others like it into my next website. I think this is important to the readers because they have been trained to use aspects like this and like more options. This slideshow is a simple, clean and easy way to give them these options.

Blog 6:DJane Dominique Jardin uses of Jquery

For this blog, I came across a website for a female DJ named Dominique Jardin. She’s from Austria and is mostly focuses on Electronic Dance Music.  Anyway, her website is one of the best I’ve seen. When you first access her site, there is a loading symbol.

Screen Shot 2014-11-07 at 9.42.42 AM

 

and then the a picture of Dominique appears:

Screen Shot 2014-11-07 at 9.45.59 AM

 

that quickly fades into another picture:

Screen Shot 2014-11-07 at 9.42.45 AM

before you’re finally brought to the home page of the site:

Screen Shot 2014-11-07 at 9.43.01 AM

 

This opening sequence happens every time you load the website. It’s automatic but again it’s really fast so I wasn’t annoyed by it. The website also makes use of the sticky navigation but with a twist.

Screen Shot 2014-11-07 at 9.50.44 AM

 

The black bar stays at the top of page, the entire time but as you scroll the navigation buttons disappear and her name changes to just DJ. But if you hover over the navigation bar, all the information reappears like it is above.

Screen Shot 2014-11-07 at 9.53.32 AM

 

The site uses a lot of javascript and jquery in the coding. She has her music videos embedded on the page so just press play and keep scrolling.  Also she has some examples that we’ve learned in class, like the hide/reveal (the boxes on this page flip completely to show new information). This is a technique I really want to use on my next site.

I only talked about the homepage for this post but each section of her website has incorporated Jquery and the site although it’s almost all responsive, doesn’t take a long time to load or move slowly. Her media page, reminds me a lot of a tumblr website/with infinite scroll.

Check out this website it’s awesome! http://dominiquejardin.com/