Tag Archives: HTML

JavaScript Critique: The Washington Post

site: http://www.niemanlab.org/2013/07/arguing-for-a-new-genre-javascript-journalism/

Screen Shot 2013-12-09 at 4.45.29 PM

While looking for JavaScript in journalism, I ran across this. This uses JavaScript to build an audioplayer unlike anything that you could do in CSS3 or HTML/CSS. It’s a great visual component to go along with the map since they’re both color-coded.

Looking for the audio player, I found it in a .js file. It looks like this:

function embedWPAudioPlayer(opts) {
 var id = opts.container,
 url = opts.url,
 width = opts.width,
 filetype = url.substr(url.length-3);
var plugin = (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) ? navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin : 0;
if (plugin || !Modernizr.audio) { //if it has the plugin OR it doesn't support HTML5
 var so = new SWFObject("http://media.washingtonpost.com/wp-srv/graphics/assets/swf/soundplayer_stretch.swf", id, width, "30", "9", "#ffffff");
 so.addParam("id", id);
 so.addParam("name", id);
 so.addParam("allowScriptAccess", "always");
 so.addParam("wMode", "transparent");
 so.addParam("swfliveconnect", true);
 so.addVariable("soundurl", url);
 so.write(id);
 } else if (Modernizr.audio) {
 $('#'+id).html('<audio controls style="width:' + width + 'px;"><source src="'+ url +'" /></audio>');
 }

}

It’s a little hard to understand, but knowing where to find it is pretty useful in case one would want to use it later.

It really adds to the piece since you can actually hear the words being spoken. Without the audio, this story would lose a lot of its value.

The Guardian’s “NSA Files Decoded.”

Link to the site: http://www.theguardian.com/world/interactive/2013/nov/01/snowden-nsa-files-surveillance-revelations-decoded#section/1

The Guardian took an in-depth look at what Edward Snowden’s leaks means to the viewers. The site is composed with plenty of quality videos of experts explaining the issue within a long, vertical reading page.

There are multiple features I like about this site, including the clean design and layout, as well as multiple multimedia elements used to present the story and data. But the most interesting one is the videos that automatically plays when you scrolled to it.

Screen Shot 2013-11-13 at 2.13.54 PM

Screen Shot 2013-11-13 at 2.14.18 PM

I found the related javascript in the site’s code:

<script type=”text/javascript” src=”http://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video-js/video.js&#8221; id=”js-gia”></script>

And the matching HTML begins from something like this:

Screen Shot 2013-11-13 at 2.39.51 PM

I think this java technique is really useful to learn. Although not everybody likes auto-play videos, but such feature sometimes makes the site more alive.

 

CSS Image Hover effect: Grey to Color.

Link to the site: http://www.jeremyholmesstudio.com/

What I like about this website is its design on image thumbnails. As you can see from the screenshots below, these grey thumbnails turn into color when you move the mouse over the image. I like this effect because it creates a sense of movement as if the users are “revitalizing” the image.

Screen Shot 2013-10-30 at 1.39.36 PM

(When you move the mouse over the image…)

Screen Shot 2013-10-30 at 1.39.50 PM

I looked into the website’s HTML, and found out it actually used javascript as listed in its <head> section. I would assume it helps the hover effect. The “id” for black and white images are “project_thumb”. and for the original color image the “id” is “cardthumb.”

<script type=”text/javascript”>
$(document).ready(function(){
createHover();
});
function createHover() {
$(“.project_thumb”).unbind(‘mouseenter’).unbind(‘mouseleave’); // reset the hover to prevent doubling
$(“.project_thumb”).bind(“mouseenter”,function() { // create hover
$(“img”, this).fadeTo(10, .1); // Sets the opacity to 70% on hover
}).bind(“mouseleave”,function(){
$(“img”, this).fadeTo(10, 1.0); // Sets the opacity back to 100% on mouseout
});

</script>

 

The actual HTML for the black and white image contains this part that is related to the hover effect:

<div id=”item_3627254″ name=”3627254″ page=”1″ spot=”-1″>

<div id=”pr_contain_item_3627254″>

<a href=”/The-Green-Guide-for-Horse-Owners-and-Riders” onmouseover=”this.className=’hover’;” onmouseout=”this.className=’nohover’;” id=”p3627254″ rel=”history” name=”jeremyholmesstudio” onfocus=”this.blur()”>

<div class=”loader_holder” id=”load_3627254″>

<img src=”/_gfx/loadingAnim.gif” style=”opacity: 1;”>

</div>

<div class=”cardimgcrop notitle_notag” id=”cardthumb_3627254″ name=””>

<img src=”http://payload66.cargocollective.com/1/5/190228/3627254/prt_184x184_1344956617.jpg&#8221; border=”0″ rel=”testprt_1344956617.jpg” style=”opacity: 1;”>

</div>

</a>

</div></div>

 

 

And in the CSS stylesheet, “project_thumb”, “cropimgcrop” and “cardthumb” are defined:

 

 

.project_thumb {
    float: left;
    margin: -5px 0px 32px 31px;
    padding: 0px 0px 0px 0px;
    position: relative;
    text-align: left;
}

.project_thumb .hover {
    cursor: pointer;
    text-decoration: none;
}

.project_thumb .nohover {
    text-decoration: none;
}

.project_thumb:hover .cardimgcrop img {
    opacity: 0;
    filter: alpha(opacity=0);
}

.cardimgcrop img {
    opacity: 1;
    filter: alpha(opacity=100);

    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
}

.project_thumb .hover .thumb_title span {
    text-decoration: none;
}

.project_thumb .cardimgcrop:active {
    margin: 0px 0px 0px 0px;
    border:0px solid #ffffff;
    -moz-box-shadow: 0px 0px 0px #888888;
    -webkit-box-shadow: 0px 0px 0px #888888;
    box-shadow: 0px 0px 0px #888888;
}

.project_thumb.active .cardimgcrop {
    border: 0px solid #2d86ff;
    -moz-box-shadow: 0px 0px 0px #888888;
    -webkit-box-shadow: 0px 0px 0px #888888;
    box-shadow: 0px 0px 0px #888888;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}

.project_thumb.active .thumb_title span {
    text-decoration: none;
}

.cardimgcrop {
    background: #ffffff;
    border: 0px solid #ffffff;
    margin: 0px 0px 0px 0px;
    padding: 0 0 0 0px;
    position: relative;
    min-width: 184px;
    min-height: 134px;
}

.cardimgcrop.notitle_notag {
    margin-bottom: 0px;
}
#cardthumb_3627254 {
    background-image: url(https://dl.dropbox.com/u/13148572/JHStudio_Web/btn/projects/horsecolor_btn.jpg); 
margin: 0 0px 0 0px;}

The coding is quite complicated as the designer created different parts of image using photoshop. So it’s important to have everything sorted out in mind and create correct <div> to arrange them, and matching CSS to define the effect.

The Escape Committee’s beautiful HTML/CSS techniques

When I visited the Escape Committee’s website, I knew immediately I wanted to copy its CSS technique for my next website.

The creators of this site appeared to use a grid system when designing the home page; the page consists four rows of three photos and/or projects. Not all of the boxes are the same size, which adds an asymmetrical touch to the grid pattern.

Screen shot 2013-10-29 at 3.00.05 PM

While inspecting the home page’s HTML, I realized the site’s developers used a code I was unfamiliar with. The following is  small chunk of code the developers used to design the page:

<div class=”m-home_content” >
<div class=”grid-pageContentContainer” >
<div class=”grid-homeContent style-white u-clearfix” >
<div class=”grid-homeContent_itemA grid-homeContent_itemDouble” >

Another design feature I love about this site is the hovering effect we see when we scroll over one of the photos. When we move our computer mouse over a photo, the photo becomes darker, and text appears that tells us the name of that project. We now also have the option to click on “View Article.”

Screen shot 2013-10-29 at 3.01.08 PM

The HTML I found for this effect is as follows:

<div class=”c-imageBlock c-imageBlock_verticalAlign c-hideContentUntilHover” style=”background-image:url(http://www.escapecommittee.com/wp-content/uploads/2013/05/11-580×400.jpg >

The site’s grid pattern adds organization to the site, and its hover effect allows the user to know what he or she will see once he or she clicks on one of the squares. I would like to use these techniques when I create my next website.

CSS of the Roots N Blues Website

I really like the style of the Roots N Blues website from this year. Specifically, I like the way they did the bios of the artists that were playing this weekend.

Screen Shot 2013-09-25 at 8.27.59 AM

If you scroll over the photos, they go dark. You can also click on them for a bio and video of the artist. I also just like the general shape and how they look on the page.

Here are some of the CSS elements for the parts I like below.

Screen Shot 2013-09-25 at 8.31.20 AM

Screen Shot 2013-09-25 at 8.39.47 AM

I really enjoy the way this site looks.