I saw some pretty crazy UX on new ways to show digital content lately. Wired’s solutions seems to be pretty well rounded. BUT I am sure it will take a while to get used to. Hopefully we will get some kind of standard established so we, the consumers/readers, won’t get lost with all the add-ons that we’re not used to. Let’s not fall into the browsers wars and think of some kind of basic UX that consumers could rely on. What do you think?

Last week Jeremy Clark from Adobe and I unveiled the first glimpse of the Wired Reader at TED. Above, you’ll see a video, narrated by Jeremy and Wired Creative Director Scott Dadich, who led our tablet team, that shows more. It explains why the tablet is such a groundbreaking opportunity for magazines such as ours.


What Jeremy and I showed was not a CGI demo or concept — it was running live code with real copy. The content was created in Adobe InDesign, as is the case for the print magazine, with the same designers adding interactive elements, from photo galleries and video to animations, along with adapting the designs so it looks great in both portrait and landscape orientation. This is a departure from the usual web model, where a different team repurposes magazine content into HTML, unavoidably losing much of the visual context in the process. Wired.com is not a re-purposed version of the magazine, but rather an separately-produced news service.

Read More here

Edit: here a pretty good article where Craig Mod talks about the new digital revolution in books: Books in the Age of the iPad.

1) Activating your the_post_thumbnail(); function

Follow our own post here: the_post_thumbnail();

2) Creating a php file for your featured section.

Now that you activated you thumbnail function we can go ahead and create a php file that will be used to call our featured section where we want it on our site.

Why create a php file instead of coding it directly in the theme files?
Well the answer is pretty simple. By doing so, if any changes are necessary in the featured post and you are calling the section at more then one place, you will be able to update them all in one single place.

Create a file called featured.php in your theme.

3) Implementing the right code

For our featured section we will want to create a specific category for it. For the lesson, let’s call it Featured.

<div id="featured_container"</div>
<?php query_posts('category_name=featured&showposts=3'); ?>
 
<?php while (have_posts()) : the_post(); ?>
 
<div class="featured_single"</div>
        <div class="featured_image">
                 <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(array(60, 60)); ?></a>
        </div>       
         <h2 class="featured-title">
                <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
        </h2>
</div>
 
<?php endwhile;?>
</div>

Let me breakdown this code for you.
First is the query. This is where we are fetching our posts from our featured category and the showpost function is to only fetch the latest 3.

<?php query_posts('category_name=featured&showposts=3'); ?>

The rest of the code between the query is regular post code. The first one is to fetch the post thumbnail which has a size of 60px by 60px. The second one will return the title of the post. Both of them will be links to the actual post.

4) Calling our file

Final step is fetching the featured.php file in your wordpress theme. This will be done by using an include tag:

<?php include( TEMPLATEPATH . '/featured.php' ); ?>

Save your theme file where you included the featured.php tag.

Note that you will need to implement some new css to make your featured section pretty.
here’s an option you can use:

#featured_container {width: 300px; background: #ddd; border: 2px solid #a1a1a1;}
.featured_single {width:300px; display: block; background: #fff; padding: 10px 15px;}
.featured_image {margin-right: 15px;}
.featured_image a {border: 2px solid #ddd; float:left; display: block; width: 60px; height: 60px }
.featured_title h2 {float: left; display: block;}

Optional

Some people will bring up the fact that these post will be duplicated on the site. To counter this we will have to add variables in our page query and our featured query. You can follow this resource to resolve this:
How to: Use two (or more) loops without duplicate posts

Related information

Wordpress Include Tags codex
Wordpress Loop codex
Wordpress Page codex
Activating Post Thumbnail function

A FULL-CG animated piece that tries to illustrate architecture art across a photographic point of view where main subjects are already-built spaces. Sometimes in an abstract way. Sometimes surreal.

-Alex Roman

Visit www.thirdseventh.com for more.
To see how the Compositing Breakdown (T&S)

Transmoflection

It’s the name of the Vancouver olympic games campaign. It’s based on a few words all melted together. I think it fits nicely with vancouver and the spirit of the games. The designs are working nicely in synergy with the campaign. Colours are nice and fits with a “winter olympic” frame of mind. The quality of the illustrations are impressive as well. All designs have been made by Studio Vanoc Canada. I think it’s a studio created solely for the Olympics.
You can visit the Vancouver 2010 site here.

http://www.youtube.com/watch?v=7MsATxMHnO8

Jack Crossing

Our first one is a graphic designer from England. Jack’s work revolves around typography, photography and screen printing. He hasn’t been in the business for long but his design pieces are impressive.
For more of his work you can visit his portfolio here.

Peter Crnokrak

Our next artist has an interesting study path. Research career in sciences transitioned into design following a postdoctoral tenure in quantitative genetics at the University of Toronto. A primary focus of Peter’s work is data visualisation, with a particular interest in the intersection of visual communication and data analysis. His work has been exhibited at InfoVis, bio.21, Computational Aesthetics and SIGGRAPH. All his work can be found on his site: The Luxury of Protest
Some of his data visualization is also available to buy.

Marc Philbert

Visit portfolio here.
Really nice woman photographer. Nice fashion and beauty approach.

Micheal Paul Young

Visit portfolio here.
Awesome talent in this Bangkok multidisciplinary designer.

1) Activation

First you will need to activate this feature in order to tell WP’s UI that you are requiring this.
In your theme functions.php file you will need to add these lines:

add_theme_support('post-thumbnails');

For backwards compatibility of your theme you should wrap this inside a function check for the new add_theme_support:

if ( function_exists( 'add_theme_support' ) )
add_theme_support( 'post-thumbnails' );

2) New post/page widget

After initializing your function go to a post and check out the new “Post Thumbnail” widget available under your “Categories“. Sweet! now you can upload a picture and chose the thumbnail image size you want to use via the image uploader that you are already been using. the only change will be the “Use as thumbnail” link besides the “insert into post” button.

3)Call the thumbnail in your theme

Next step is to call your thumbnail in your template files.

the_post_thumbnail();

It’s as simple as this. There are a few other options you can use to customize the your thumbnail output as well

Here is the css output:

.wp-post-image {
border: 2px solid #ccc;
}

4) Options

Set your thumbnail to use specific size:

// the thumbnail
the_post_thumbnail(array(100,100));
// medium resolution
the_post_thumbnail(array(300,200));
// large resolution
the_post_thumbnail(array(600, 400));
// original
the_post_thumbnail();

Add your own class:

// align right and the class  'NEW_CLASS'
the_post_thumbnail(array(100,100), array('class' => 'alignright NEW_CLASS'));

5) Theme Developer Options

Here’s a few options developers can use:
These one are to query the size of the images

// width of the thumbnails
get_option('thumbnail_size_w');
//  height of the thumbnails
get_option('thumbnail_size_h');
//  height of the medium resolution
get_option('medium_size_h');
//  width of the large resolution
get_option('large_size_w');

//  1 = Crop thumbnail to exact dimensions, 0 = Crop off
get_option('thumbnail_crop')

This example has been taken from WpEngineer.com

Here another example: If the size of a thumbnail is bigger than 100×100 and crop is activated, then the thumbnail should be resized to 100×100, otherwise use the original thumbnail.

if(get_option('thumbnail_size_w') > 100 && get_option('thumbnail_crop') == 1) {
the_post_thumbnail(array(100,100));
}else{
the_post_thumbnail('thumbnail');
}

For more info on the_post_thumbnail feature from wp 2.9 you can visit those links:

The always trusty Justin Tadlock:”Everything you need to know about WordPress 2.9’s post image feature”
New in WordPress 2.9: Post Thumbnail Images
Using The New Post Thumbnail Feature In WordPress 2.9
The Ultimative Guide For the_post_thumbnail In WordPress 2.9

Gaudi | Jeans & Style

Gaudi’s site is a full flash site that plays with big images and easy transitions. The use of big images and the focus on people makes this site very attractive. The content is concise and well placed. The lookbook is nicely done as well. The only downfall is the usability; sometime you have to experiment with your mouse in order to do cool stuff. Quality is nice on a 2560 x 1440 resolution.

lodjixmedia Interactive Agency

lodjixmedia Interactive Agency website is a wordpress based site. Delivering their content in a minimal looking site, they make good use of white space and colour coding to improve their users experience. Easy use of jquery and no fluff is a good recipe for a nice working design.

Well Wordpress is following a theme with all new releases. They call them by the name of Jazz musicians. Sweet as!
The name comes from Carmen McRae. She’s a Jazz vocalist.

So what’s nice with the new wordpress release?

1. Global undo/”trash” feature which means that if you accidentally delete a post or comment you can bring it back from the grave (i.e., the Trash). This also eliminates those annoying “are you sure” messages we used to have on every delete.
2. Built-in image editor allows you to crop, edit, rotate, flip, and scale your images to show them who’s boss. This is the first wave of our many planned media-handling improvements.
3. Batch plugin update and compatibility checking, which means you can update 10 plugins at once, versus having to do multiple clicks for each one, and we’re using the new compatibility data from the plugins directory to give you a better idea of whether your plugins are compatible with new releases of WordPress. This should take the fear and hassle out of upgrading.
4. Easier video embeds that allow you to just paste a URL on its own line and have it magically turn it into the proper embed code, with Oembed support for YouTube, Daily Motion, Blip.tv, Flickr, Hulu, Viddler, Qik, Revision3, Scribd, Google Video, Photobucket, PollDaddy, and WordPress.tv (and more in the next release).

So those are the main features that everybody will benefit. Some of the more obscure features that affects codere, developper and the performance of wordpress are enumerated here:

• We now have rel=canonical support for better SEO.
• There is automatic database optimization support, which you can enable in your wp-config.php file by addingdefine('WP_ALLOW_REPAIR', true);.
• Themes can register “post thumbnails” which allow them to attach an image to the post, especially useful for magazine-style themes.
• A new commentmeta table that allows arbitrary key/value pairs to be attached to comments, just like posts, so you can now expand greatly what you can do in the comment framework.
• Custom post types have been upgraded with better API support so you can juggle more types than just post, page, and attachment. (More of this planned for 3.0.)
• You can set custom theme directories, so a plugin can register a theme to be bundled with it or you can have multiple shared theme directories on your server.
• We’ve upgraded TinyMCE WYSIWYG editing and Simplepie.
• Sidebars can now have descriptions so it’s more obvious what and where they do what they do.
• Specify category templates not just by ID, like before, but by slug, which will make it easier for theme developers to do custom things with categories — like post types!
• Registration and profiles are now extensible to allow you to collect things more easily, like a user’s Twitter account or any other fields you can imagine.
• The XML-RPC API has been extended to allow changing the user registration option. We fixed some Atom API attachment issues.
• Create custom galleries with the new include and exclude attributes that allow you to pull attachments from any post, not just the current one.
• When you’re editing files in the theme and plugin editors it remembers your location and takes you back to that line after you save. (Thank goodness!!!)
• The Press This bookmarklet has been improved and is faster than ever; give it a try for on-the-fly blogging from wherever you are on the internet.
• Custom taxonomies are now included in the WXR export file and imported correctly.
• Better hooks and filters for excerpts, smilies, HTTP requests, user profiles, author links, taxonomies, SSL support, tag clouds, query_posts and WP_Query

I really like the new feature of post thumbnail.
This will actually be in one of our next post on wordpress.