Some Random French Student’s portfolio

mahi

Here’s the link: http://www.mahedineyahia.fr/

I found some random French designer’s portfolio site. I don’t know anything about the guy, but I like his website. It has a nice moving parallax effect when you first scroll down the page. I think it might move through frames of a video or something. I’m not sure how he got it to move to the side like it does.

I also like how he displayed his work. Three big bars come across the screen and each one leads to another section of his work. I’m pretty sure this is jQuery. I like it because it’s a very innovative design. It’s different from any other websites, but it still works well and looks nice.

Kobe’s Use of Javascript

Screen Shot 2014-11-07 at 9.01.52 AM

I love Kobe’s color scheme choice for their website. The design is very clean and organized. As for their javascript the image slider is very nicely designed. However, personally I wasn’t a big fan of the enlarging images. When you put the mouse over any of the pictures they expand and I found it super distracting. Other than that I thought their use of javascript was effective in advertising their biggest deals and services.

Blog 6

http://hyundaisonata.com/#!/GAME

I chose a car website because I googled best jquery websites and this was one of the ones included. It is as simple as when you are waiting for the site to load, you see a small image that fills in with color. I’m unsure of how complicated this is, but I bet fill will not be too difficult and that’s something I’m definitely interested in learning how to do.

Screen Shot 2014-11-07 at 7.15.18 AM

I think the thing that is best about this site is that the jquery effects do not take away from the content. In fact it actually really accentuates the different good parts about the car, and things such as the sidebar map that helps you find things near to you. I think another thing I like about this site is the small effects such as going from one page to the next is a curtain that comes across as you click. When you click to find a Hyundai dealership near you, it has very small transitions that are not too flashy to deter from what you are trying to do, while still providing an almost professional look by doing more than the basic site would.

jQuery in TED.com

I am a big fan of TED talks. I used to be a lesser fan of the website. But, quite recently, the website got a “makeover.” It used to have a collage of stills from talks. The collage consisted of large to small pictures. If you hovered over the large pictures, you could see the title of the talk. However, you could not do that for the smaller pictures in the collage, which was a little annoying. With the makeover, now the collage has large and medium pictures, which means you can see the title of the talk. It is a great improvement, in my opinion.

homepage

With jQuery, the website has done two great things for its homepage, which makes all the difference in how user-friendly the website is. First, it increased the sizes of the images in the talk-collage (as seen in the picture above). Second, it made a slideshow of sorts of all the recent talks, which you can scroll through with the handy-dandy right arrow button you see.

It’s a simple use of jQuery, but it made all the difference in the world. It is much more clean and fun to use.

Blog Six: Firestorm

Firestorm: The story of the bushfire at Dunalley by The Guardian

This is an amazing work!

Screen Shot 2014-11-06 at 11.22.46 PM

The only thing you need to do is scroll down, and it even provides a small prompt at the bottom to remind you of that. The sticky navigation bar on the right side is convenient and consistent. And the position won’t distract much attention.

Screen Shot 2014-11-06 at 11.20.25 PM

Its design is very user-friendly and it is rich of content. It uses photos, text, graphics, videos background sound and interviews to tell a dramatic and complete story.

Screen Shot 2014-11-06 at 11.22.22 PM

Screen Shot 2014-11-06 at 11.25.29 PM

As readers scroll down, the whole story unfolds as a long slide show. The previous picture fades out and the new picture fades in. Some other effects are used as well. Besides, the text goes up, continuing to tell the story.

When I look for jQuery code, I found it set different Javascript and CSS for IE6 to IE9. It also used jQuery from Google:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>Screen Shot 2014-11-06 at 11.20.25 PM Screen Shot 2014-11-06 at 11.22.22 PM Screen Shot 2014-11-06 at 11.22.46 PM Screen Shot 2014-11-06 at 11.25.29 PM

Blog 6: How Buzzfeed uses JavaScript

Screen Shot 2014-11-05 at 9.58.17 PMOver the last few weeks, I’ve started to see JavaScript and jQuery everywhere — not that it hasn’t been there before. It’s just that I had no idea what it was about.

I wanted to point out Buzzfeed’s homepage because I like how it makes use of photos and captions. The homepage is pretty busy. It has lots of links to stories. It’s already borderline cluttered. But it rescues itself from chaos by using JavaScript. Instead of including headlines with each story link, it just uses photos. If you scroll over the photo, it reveals the headline or caption. This lessons the clutter that would be there if text appeared with every photo. I also like the opacity of the captions on the left side. It still allows you to see the photo.

The emphasis on visual allows for a more appealing homepage, in my opinion. However, the major drawback of this approach is that the visual has to convey what the story means. In some cases, it’s difficult to tell a story just by one image.

I wonder why they didn’t employ more interactive features. The centerpiece is static. It could be an opportunity for a slideshow of several stories. Perhaps they felt that feature would have been too distracting. I also would have found it beneficial to have the navigation stick at the top as you scroll.

Blog 6 – What the World Eats

For this week’s blog, I stumbled across a nifty infographic by National Geographic about what types of diets people around the world have and how they have changed over time. It’s extremely interactive and very well-designed. Screen Shot 2014-11-05 at 10.29.13 AM

The point of this interactive infographic is to allow readers to compare lots of information quickly and easily in a way that makes visual sense. The user can view the breakdown of each food group specifically by simply hovering over the section, which highlights the same food group on the per country breakdown in the sidebar. The user can also view changes throughout time by pressing the play button at the bottom of the screen. This site uses jQuery to control the interactivity of the site. Without jQuery interactivity, this infographic would have to be expanded to incorporate all the information separately and would much for difficult for the reader to comprehend. This piece of data journalism is made much better because it is presented in an interactive medium.