Tumblelog by Soup.io
Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

June 27 2013

14:39

MediaStorm Guide to Copy and Pasting a Clip Range in Premiere Pro

This article is part of a new series of posts with tips and tricks from our producers’ experience working with Adobe Premiere Pro after years of working in Final Cut Pro. To read more about why we made the switch, check out this post.

Today’s post was written by MediaStorm producer Eric Maierson.


A neat new feature in Adobe Premiere Pro CC is the ability to copy and paste a range of clips (or one clip) without first having to use the Razor Tool (C).

To do this simply mark an In (I) and Out (O) on your timeline.

Then, Copy (Command-C) and Paste (Command-V).

Super easy, super helpful.

Note that if a clip is already selected, you’ll simply copy and paste whatever is highlighted, not the range indicated by in and out marks. Use Command-Shift-A to first deselect all clips.


To learn more about how our producers are using Adobe Premiere Pro see our other blog posts on the topic. Also, follow our producers’ twitter feed @PrProShortcuts for Premiere shortcuts.

To learn more about our production style, you can purchase a copy of our Post-production Workflow. Readers who purchase our current Final Cut Pro and Aperture workflow automatically receive the Premiere workflow when it is released.

MediaStorm offers several online and in-person training opportunities at mediastorm.com/train.

Have you made a recent switch in your editing software? Let us know about it in the comments below.

May 15 2013

14:58

MediaStorm Guide to Creating Subtitles in Premiere Pro

This article is part of a new series of posts with tips and tricks from our producers’ experience working with Adobe Premiere Pro after years of working in Final Cut Pro. To read more about why we made the switch, check out this post.

Today’s post was written by MediaStorm producer Eric Maierson.


There’s a critical difference between the title tool in Final Cut Pro and Adobe Premiere Pro. In FCP, one could slice a title that’s already in the timeline, open it in the Viewer window, then change the contents so that you now had two distinct titles.

This does not work in Premiere Pro.

In Premiere Pro each title is a distinct instance. So, if you splice a title in the timeline then change its content, you will also change the content of the first title as well. Both titles will say the same thing.

The only way around this is to create a new title instance for every subtitle. It’s a cumbersome process and one that we wish Adobe would change.

Setting Up a Title Template

In the Project window create a new bin (Command – /). Name it Subtitles.

Open the title tool (Command-T).

In the New Title window, name the title temp. The title size will default to your current sequence size.

When the title tool opens, press T for the Type Tool, then click inside the rectangle. Use 38pt Arial, then type a short phrase. If you plan to use drop shadow, and you should, add it here as well. (Tim McLaughlin will follow up this post with a more detailed look at the functionality of the Title Tool.)

Next, click the Selection tool (arrow icon) and move the title so that it rests on top of the title-safe line.

Use the Horizontal Center tool to align the title in the middle of the screen.

Close the title tool.

Drag the title from Project window to your Timeline.

To create a new title, simply click the New Title Based on Current Style button at the top right of the Title tool.

XML

At MediaStorm we no longer use burned-in timecode. We use XML to generate titles in our player.

If you plan to use XML with your subtitles for any reason, say to copy from one computer to another, the following steps are crucial:

Each time you paste a phrase from your transcript into a subtitle, you must also rename the subtitle instance with the exact same phrase.

If the contents of the subtitle is “I went home” the name of the subtitle instance must also be “I went home”; the names must match identically. That’s because XML in Premiere Pro reads the name of the title, not its contents.

Here too, we wish Adobe would change this behavior so that XML functioned as it does in Final Cut Pro 7, reading the content of the subtitle, not the name of the title file – the opposite of how it works now.

It’s obviously more expedient to avoid this extra step.

Subtitle Styles

Font Size – 38

Font – Arial

Drop Shadow – Standard effect, change opacity to 90%

Fades

If narrative is more than 15 frames from the end or beginning of a cut, set subtitle to start 10 frames before the start or end of narrative, then place 8 frame fade on subtitle.


To learn more about how our producers are using Adobe Premiere Pro see our other blog posts on the topic. Also, follow our producers’ twitter feed @PrProShortcuts for Premiere shortcuts.

To learn more about our production style, you can purchase a copy of our Post-production Workflow. Readers who purchase our current Final Cut Pro and Aperture workflow automatically receive the Premiere workflow when it is released.

MediaStorm offers several online and in-person training opportunities at mediastorm.com/train.

Have you made a recent switch in your editing software? Let us know about it in the comments below.

April 08 2013

13:38

MediaStorm Guide to Installing Missing Final Cut Pro Codecs for Premiere Pro

This article is part of a new series of posts with tips and tricks from our producers’ experience working with Adobe Premiere Pro after years of working in Final Cut Pro. To read more about why we made the switch, check out this post.

This great tip comes from Jonathan Grubbs via Josh Meltzer.


Should you install Premiere Pro on a machine without Final Cut Pro, you will find your machine missing some key codecs such as ProRes. The solution is straightforward.

Quit Premiere Pro.

Download the ProApps Quicktime Codecs from the Apple site.

You’ll receive an error if you try to install the codec package without FCP on your system.

Install ProApps QuickTime codecs

The workaround is to first install the free application unpkg.

Drag the ProAppsQTCodecs.pkg file on to the unpkg icon.

unpkg

Unpkg wil extract the components to your desktop.

Finder

In the Finder select Go > Go to Folder… (Command-Shift-G). Enter /Library/QuickTime.

Drag the component files in to this folder. You’ll need to click Authenticate and enter your root password.

Open Premiere Pro and the new codecs will be available.


To learn more about how our producers are using Adobe Premiere Pro see our other blog posts on the topic. Also, follow our producers’ twitter feed @PrProShortcuts for Premiere shortcuts.

To learn more about our production style, you can purchase a copy of our Post-production Workflow. Readers who purchase our current Final Cut Pro and Aperture workflow automatically receive the Premiere workflow when it is released.

MediaStorm offers several online and in-person training opportunities at mediastorm.com/train.

Have you made a recent switch in your editing software? Let us know about it in the comments below.

April 01 2013

13:20

MediaStorm Guide to the Adobe Premiere Pro Media Cache Database

This article is part of a new series of posts with tips and tricks from our producers’ experience working with Adobe Premiere Pro after years of working in Final Cut Pro. To read more about why we made the switch, check out this post.

Today’s post was written by MediaStorm producer Eric Maierson.


Each time you import audio or MPEG video files into Adobe Premiere Pro, the application caches a version into a database. This speeds up performance so that new previews do not need to be generated each time you view a clip.

Audio is stored in a .cfa file and MPEG in .mpgindex. These files are shared between Adobe Media Encoder, After Effects, Premiere Pro, Encore and Soundbooth.

By default both the cache files and the database are stored in the location /Users//Library/Application Support/Adobe/Common.

To check this, open Premiere Pro > Preferences > Media.

Storing Cache Files

Under normal circumstances, we tell producers to keep all project files together. But in this case it’s problematic as the media cache is not project-based. It stores files from all of your projects in one location.

So if project A, along with your cache drive, goes offline, project B on a separate drive will need to rebuild these files.

Of course, you could change the cache location each time you begin work on a different project. But honestly, the chances of forgetting this step seem high.

At MediaStorm we’ve left the cache in its default location without any noticeable performance issues. Nevertheless, the sheer number of these files means that they will add up quickly.

Cleaning the Cache

In the cache preferences (Premiere Pro > Preferences > Media) you’ll see a Clean button. Unfortunately, this function works counter to what might be expected. The Clean button deletes cache files associated with files that are currently not online. It ignores cache files related to your currently open project.

With that in mind, it’s difficult to create a specific workflow for deleting unused files. Our best suggestion is to make sure all current projects are mounted before cleaning the cache. This can obviously become burdensome if you’re working on more than one project.

Making The Cache Better

Ideally, I’d prefer to see the clean cache function work like the Render Manager in Final Cut Pro 7 (Tools > Render Manager…).

In FCP, the Render Manager opens a new window displaying a list of projects that contain render files. It offers the ability to individually select which project files to delete.

Hopefully, Adobe will address this issue.

For more information on Premiere Pro’s media cache database see Adobe’s support document Setting Up Your System.


To learn more about how our producers are using Adobe Premiere Pro see our other blog posts on the topic. Also, follow our producers’ twitter feed @PrProShortcuts for Premiere shortcuts.

To learn more about our production style, you can purchase a copy of our Post-production Workflow. Readers who purchase our current Final Cut Pro and Aperture workflow automatically receive the Premiere workflow when it is released.

MediaStorm offers several online and in-person training opportunities at mediastorm.com/train.

Have you made a recent switch in your editing software? Let us know about it in the comments below.

July 30 2012

15:21

MediaStorm Post-production Workflow Released for Final Cut Pro X

post-production-workflowWe have released a new version of the MediaStorm Post-production Workflow for Final Cut Pro X.

The workflow takes advantage of many of the new FCP X features and reduces the number of steps from the previous FCP 7 version.

While MediaStorm producers tested and refined the original MediaStorm Post-production Workflow for FCP 7 over seven years and more than 100 projects, we created the workflow for FCP X based on limited work with the new software. At the moment, it is a work in progress.

The updated workflow is bundled with the original FCP 7 workflow and includes access to MediaStorm’s Apple Aperture Workflow and MediaStorm’s Final Cut Asset Parser. Everyone who previously purchased the workflow will receive complimentary access to the FCP X document.

About the MediaStorm Post-Production Workflow

Developed over seven years, the MediaStorm workflow covers every phase of editing, from organizing assets through outputting final projects and archiving. Covering more than 200 steps, our approach efficiently streamlines the editing process with a focus on organization and creativity.

The MediaStorm Post-production Workflow includes:

  • The full 200-step workflow MediaStorm uses everyday with Final Cut Pro 7
  • The new workflow for Final Cut Pro X
  • Exclusive access to MediaStorm’s Apple Aperture Workflow, including information on how to best use the image management program in conjunction with Final Cut Pro
  • Exclusive access to MediaStorm’s Final Cut Asset Parser, a tool we developed to quickly generate a list of asset names used in a Final Cut 7 project
  • Time-saving software suggestions for transcribing audio, syncing and converting and editing video
  • Integration of more than 10 MediaStorm tutorials to help you choose the right music, color correct your video, work efficiently with subtitles, and backup and archive your files effectively
  • Helpful tips on organizing, naming and selecting assets

The MediaStorm Post-production Workflow takes into account best practices from more than 100 multimedia projects by MediaStorm producers.

Online access to MediaStorm’s Post-production Workflow, including MediaStorm’s Apple Aperture Workflow and Final Cut Asset Parser, can be purchased for a one-time fee of $14.95.

Click here for details.

Have you used our Post-Production workflow with FCP 7 or FCP X? Let us know what you think in the comments below.

April 24 2012

16:37

April 16 2012

20:59

MediaStorm Now Using H.264 for Better Playback

When MediaStorm launched in 2005, video playback on the web was in its infancy. The best way to serve our projects was using Adobe’s Flash technology.

Times change.

Today, MediaStorm is excited to announce that we will encode all new projects using the H.264 codec. What this means is the quality of the files you’ll see in our new projects will be significantly better.

They will also be larger. While our Flash files were encoded at 728 x 432 pixels, our new projects are 1280 x 720. Play the new workshop pieces Remember These Days or A Hundred Different Ways and you’ll see the difference, particularly in full-screen mode.

Even better, the high-quality file you see on the internet will be the exact same file you’ll see on your iPad and iPhone.

In conjunction with these changes, we’re also releasing two new white papers.

The first, MediaStorm Compression Workflow: From Output to Web-ready H.264 details our new encoding process.

The other, Setting up Qmaster for Faster Transcoding and Compression shows you how to use Apple’s Compressor for faster encodes that utilize all of your computer’s processors.

Both papers can be found on our resources page: http://mediastorm.com/train/resources.

September 01 2011

09:19

The ultimate responsive web design roundup

Responsive design is the new darling of the web design world. It seems that not a week goes by that there aren’t new resources for doing it, opinions about how to do it or even whether to do it at all, and new sites that make beautiful use of it.

It can quickly get overwhelming trying to keep up with it all.

Here we’ve compiled a list of more than seventy resources for creating responsive designs.

Included are articles discussing responsive design and related theories, frameworks and boilerplates for responsive layouts, tools for testing your responsive designs, techniques for resizable images, and a whole lot more.

Then, to top it all off, we’ve collected a hundred of the best responsive designs out there right now to inspire you and give you some real-world ideas.

Articles and Publications

Below are a number of high-quality articles talking about responsive design and the techniques that go into it. Some might include a few code snippets or other technical information, but for the most part, these are concept-level discussions.

Responsive Web Design

This is the original post by Ethan Marcotte that was posted on A List Apart. It discusses the reasoning and principles behind responsive design, as well as practical techniques for creating responsive sites.


Responsive Web Design Book

Responsive Web Design by Ethan Marcotte, published by A Book Apart, covers the state of the responsive web, flexible grids, flexible images, media queries, and how to create responsive designs.


The Practicalities of CSS Media Queries, Lessons Learned

This post, from Bloop, is a fantastic overview of how to use media queries (and their pros and cons compared to creating a dedicated mobile site), as well as some useful tips for implementing them. Some useful code snippets are included, too.


Big vs. Small: Challenges in Responsive Web Design

This article discusses some of the challenges responsive web design can present, including the unique considerations that are required as desktop screen sizes continue to grow, while at the same time many users are now accessing the web more on tablets or smartphones.


Beginner’s Guide to Responsive Web Design

This Beginner’s Guide from Think Vitamin offers a great introduction to responsive design, including information on fluid grids and media queries.


Responsive Web Design: What It Is and How To Use It

This introduction to responsive design from Smashing Magazine is a great primer on the subject. It covers the basic concept, as outlined by Ethan Marcotte, as well as practical concerns for creating responsive designs. Code examples are also included.


Responsive by Default

This article from Andy Hume discusses why the web is responsive by default, and that designers have been forcing it to be un-responsive for years. It’s an interesting idea, discussed mostly from a developer’s point of view.


Content Choreography

We often talk about responsive design strictly from the technical end of things, but the entire point of responsive design is to improve the content experience. This post from Trent Walton talks about just that, how stacking content isn’t always the best solution, and what can be done instead.


Understanding the Elements of Responsive Web Design

This post from Six Revisions covers the basics of responsive design: flexible grid, flexible images, and media queries.


A Brief Overview of Responsive Design

Here’s another great basic rundown of what responsive design is and how to achieve it, this time from 1st Web Designer.


Responsive Web Design has Created Opportunities Across the Board

This post covers some of the opportunities that responsive design presents for designers and developers.


Designing for a Responsive Web

This article from Webdesigntuts+ discusses responsive design in terms of fluid grid, fluid images, and media queries.


Experimenting with Responsive Web Design

This article from Lee Munroe gives a simple overview of responsive design, particularly media queries, as well as some examples.


CSS3 Media Queries

Web Designer Wall offers a great roundup of media query code snippets, responsive design examples, and more in this article.


20 Amazing Examples of Using Media Queries for Responsive Web Design

This post from Design Shack offers up some great examples of responsive design, as well as plenty of information how to create your own responsive sites.


Context

This post from Adactio covers some of the confusion that often surrounds responsive design, breaking it down in simple terms and offering some useful insight.


A Richer Canvas

This article from Mark Boulton discusses some of the advantages that responsive design, CSS3, and other tools give designers and content creators, specifically that we should be designing from the content out, rather than the other way around.


Some Thoughts on Responsive Web-Design and Media Queries

This post from Jon Phillips discusses some of the potential downsides to responsive design and, more importantly, offers some great solutions.


Responsive Web Design and Mobile Context

This post discusses how mobile devices are being used for browsing web content, and how that can affect your responsive design choices.


The New Front End Design Stack: The Role of Responsive Design

This post from Acquia discusses the importance of responsive design, offers some great examples, the technical elements that go into creating responsive designs, and more.


Responsive Web Design from the Future

Responsive Web Design from the Future is a presentation by Kyle Neath that discusses the future of web design in relation to responsive design principles.


To Hell With Bad Devices: Responsive Web Design and Web Standards

This is an in-depth look at responsive design, discussing device-specific design, what responsive design means for apps, and more.


The Pros and Cons of Responsive Web Design

Plenty of articles discuss how to create a responsive design, but not that many discuss the good and bad things about responsive designs. The Pam does just that, giving a fairly comprehensive list of the positives and negatives associated.


11 Reasons Why Responsive Web Design Isn’t That Cool

This post from WebDesignShock outlines some of the potential challenges and problems that responsive design can present.


Tutorials

The tutorials below will teach you about CSS media queries and other responsive design techniques.

Quick Tip: A Crash-Course in CSS Media Queries

This Nettuts+ tutorial offers some basics for working with media queries, complete with video tutorial and code snippets.


Adaptive Layouts with Media Queries

This tutorial from .Net Magazine offers a look at basic CSS3 media query techniques. It includes plenty of code snippets and practical information about crafting your own responsive layouts.


Responsive Web Design: A Visual Guide

This video tutorial from Tuts+ offers a great introduction to what responsive design looks like, with examples. It then explains how to create your own responsive design, taking into account both the visual and technical aspects.


CSS Media Queries & Using Available Space

This post from CSS-Tricks explains the concept of using media queries to take advantage of the available space in the browser viewport. It includes plenty of useful code snippets and examples.


Working with Media Queries

Here’s a short tutorial for working with media queries, with plenty of code examples. It’s basic and to-the-point, but a perfect introduction to basic media queries.


How to Use CSS3 Orientation Media Queries

Media queries are great for adjusting the way your responsive design displays on different browser sizes, but a lot of designers overlook the orientation controls. These allow you to change the way your site is displayed based on whether a device is currently oriented to portrait or landscape mode, which is useful for both smart phones and tablets.


Optimizing Your Email for Mobile Devices with the @media Query

We often overlook HTML email newsletters when thinking about responsive design, but considering the number of people who are likely to view your HTML emails on their phone, it’s a good idea to use media queries in this case. This post from Campaign Monitor explains how it’s done.


How to Use CSS3 Media Queries to Create a Mobile Version of Your Website

This post from Smashing Magazine explains how to use media queries for creating a mobile site or otherwise linking separate stylesheets.


Adaptive & Responsive Design with CSS3 Media Queries

This fantastic post from Web Designer Wall includes a responsive design template, as well as a tutorial on how the template was created. It’s a great resource for those who like to learn new techniques by dissecting finished projects.


Responsive Web Design with HTML5 and the Less Framework 3

This article from SitePoint offers thorough instructions for creating a responsive design using HTML5 and the Less Framework. It includes all the code you’ll need for the final design, as well as a good breakdown of what that code does.


Tools and Techniques

The techniques and tools below make it a lot easier to create designs that respond the way you want them to. Many are for handling images (arguably one of the more challenging aspects of responsive design), but there are others, too.

CSS Effect: Spacing Images Out to Match Text Height

Depending on your layout, you may need text to line up properly with images, regardless of how the images and text are spaced. This technique from Zomigi shows you how to do just that.


Hiding and Revealing Portions of Images

Resizing images can only take you so far with responsive designs in some cases. At times, it’s more important for a particular part of an image to be visible or readable than for the entire image to be shown. That’s where this technique from Zomigi can come in handy. It makes it possible to dynamically crop background and foreground images as your layout width changes.


Creating Sliding Composite Images

This technique, from Zomigi, lets you create what appears to be a single image but is actually multiple images layered on top of one another. In this way, you can control the exact placement of different elements of the image as your browser viewport changes size and shape.


Seamless Responsive Photo Grid

This gallery from CSS-Tricks offers up a seamless photo grid that automatically resizes your images and the overall grid to fit your browser viewport.


Responsive Data Tables

Responsive design techniques aren’t very friendly to data tables. It’s easy to end up with tables where the type is so small it’s impossible to read. Or you can specify a minimum width, but then that kind of defeats the purpose of a responsive design. This technique from CSS-Tricks offers a solution for responsively displaying tabular data on a mobile device.


Foreground Images that Scale with the Layout

So it’s easy enough to create scaling background images, but foreground images are a little trickier. This article covers a technique from Zomigi for creating foreground images in your content that will scale with your layout.


FitText

FitText is a jQuery plugin for scaling headline text in your responsive designs. Using this, your text will always fill the width of the parent element.


Sencha.io Src

Sencha.io Src is an image hosting service that sizes your images to the appropriate size for the device requesting them. Images are also optimized for efficient repeat delivery.


The Goldilocks Approach to Responsive Design

This post by Chris Armstrong talks about the “Goldilocks Approach” for creating responsive designs that are “just right” for any device.


Responsive-Images

Responsive-Images is an experiment in mobile-first images that scale responsively to fit your design. The idea is to deliver optimized, contextual image sizes in responsive layouts.


Lettering.js

Lettering.js is a jQuery plugin that gives you precise control over the way your web typography appears, which can be a big plus in maintaining readability in a responsive design.


Fluid Images

This technique from Ethan Marcotte creates fluid-width images for your fluid designs. It also works for embedded videos, and there’s a workaround for IE compatibility.


Respond

Respond is a lightweight polyfill script for min/max width CSS3 media queries, to make them work in Internet Explorer 6-8. It’s only 3kb minified, or 1kb gzipped.


Modernizr

Modernizr is a toolkit for HTML5 and CSS3 that provides JavaScript-driven feature detection combined with media queries.


Responsive Web Design Sketch Sheets

If you wireframe your designs on paper, you’ll find these Responsive Web Design Sketch Sheets to be very useful. There are a couple of different layouts you can download for free, each of which shows a handful of likely device viewports.


Frameworks and Boilerplates

Frameworks and boilerplates can greatly speed up your design process. The good news is that there are tons of boilerplates and frameworks already available for creating responsive designs.

Golden Grid System

The Golden Grid System uses a 16-column base design for widescreen monitors. On tablets, the columns will fold into an 8-column layout. And on smaller smartphone screens, the columns fold again to 4-columns, allowing the design to adapt to anything from a 2560 pixel wide screen down to a 240 pixel screen.


The Semantic Grid System

The Semantic Grid System allows for fluid layouts and responsive designs, while also using semantic markup (which is sorely lacking from most grid frameworks).


Gridless

Gridless is an HTML5 and CSS3 boilerplate for creating mobile-first responsive websites. It includes no predefined grid system and no non-semantic classes.


Less Framework 4

The Less Framework is a CSS grid system for designing responsive sites that adapt to the size of the browser viewport. It has four layouts: default (for desktops and landscape mode tablets), tablet layout, wide mobile layout, and mobile layout. This is a good option for designers who want a responsive design but don’t necessarily want fluid columns.


Responsive Twenty Ten

Responsive Twenty Ten is based on the Twenty Ten WordPress theme. There’s also a plugin available to turn your Twenty Ten child theme into a responsive design.


Columnal

Columnal is a CSS grid system that’s a “remix” of some other grids, with added custom code. The elastic grid base is taken from cssgrid.net, while other bits of code are taken from 960.gs.


1140 CSS Grid

The 1140 CSS Grid System is a flexible, fluid grid that will rearrange based on the browser viewport. It’s designed to fit perfectly in a 1280 pixel wide monitor, but becomes fluid below that.


320 and Up

320 and Up uses the mobile-first principle to prevent mobile devices from downloading desktop assets. It’s an alternative to starting with a desktop version and scaling down.


Skeleton

Skeleton is a boilterplate for responsive, mobile-friend designs. It starts with the 960 grid but scales down for smaller screens, and is designed to be both fast to get started with a style agnostic.


Fluid Grid System

The Fluid Grid System is based on a six-column grid and has 720 different layout possibilities. Because of its simplicity, it degrades well in older browsers.


Fluid 960 Grid System

The Fluid 960 Grid System is based on 960.gs, but has a fluid layout regardless of browser size.


Foldy960

Foldy960 is a responsive version of 960.gs. It consists of some extra classes and other things for turning a 960.gs design into a responsive design.


SimpleGrid

SimpleGrid is another responsive grid framework that supports infinite nesting. It’s configured for screens at four different sizes, including 1235px and 720px.


Testing Tools

These tools make it much easier to test your responsive designs without having to use a bunch of different devices.

resizeMyBrowser

resizeMyBrowser is a useful testing tool for responsive designs. Just click one of the predefined browser size buttons and your browser will resize. Each size is labeled with the name of at least one device that uses that resolution.


responsivepx

responsivepx is a browser testing tool that lets you enter a URL (local or online) and then adjust the height and width of the browser viewport to see exact break-point widths in pixels.


Responsive Design Testing

Matt Kersley has created this browser testing tool that lets you see exactly how your site displays at common browser widths, starting at 240px and going up to 1024px.


Screenfly

Screenfly shows you how a website will look on various devices, including internet-enabled TVs and mobile devices.


Adobe Device Central

A number of Adobe Creative Suite products come with Device Central, which can be a very valuable tool for testing your responsive designs. It lets you not only preview, but also test your designs on the device of your choice.


Examples

Below are 100 examples of fantastic responsive designs. There are a lot more sites out there using the technique, and new ones are launched every day. One great resource for finding new sites is Media Queries, a gallery dedicated specifically to sites using responsive design techniques.

Profi Span


Forgotten Presidents


Ben Handzo


Aaron Shekey


The Highway Hurricanes


dConstruct 2011


Merlin Ord & Media


The Happy Bit


Forefathers


Easy Readers: Adaptive Web Design


More Hazards More Heroes


Facts Regula


Hi, My Name is Andrew


Sifter


FoodDrinkEurope


The Obvious Corporation


Geek in the Park


Mapalong


JCHELBY


10K Apart


Expositio


Food Sense


New Adventures in Web Design Conference


Cisco London 2012


Team PAWS Chicago


Diablo Media


Andersson-Wise Architects


Designing with Data


Full Frontal 2011


Aaron Weyenberg


Web Design Yorkshire


Winnie Lim


Urban Svensson


Luke Williams


Upperdog


Writer


Toronto Standard


Design Professionalism


Impact Dialing


Modernizr


Johan Brook


Dust and Mold Design


Gridchin


Staffanstorp


El Sendero del Cacao


Dustin Senos


Kisko Labs



51bits


digitalHappy


Patrick Grady


Trent Walton


Headshift


Owltastic


WeeNudge


Ash Physical Training


Mark Boulton


The Modern Gentleman


Build Guild


Do Lectures


David Hughes


320 and Up


About.com


Really Simple


Splendid


Leica Explorer


Spigot Design


Cohenspire


Jason Weaver


Joni Korpi


iwantedrock.com


Converge SE


Pelican Fly


Simple Bits


Information Architects


Andy Croll


Hicks Design


8 Faces


The Sweet Hat Club


Little Pea Bakery


Sleepstreet


Andrew Revitt


Cujo.jp


Interim.it


Philip Meissner Design


Teixido


Transfinancieel


UX London


Jeremy Madrid


Brad Dielman


Thomas Prior


Clearleft


Herjen Oldenbeuving


Bureau


City Crawlers Berlin


CSS-Tricks


Robot…or Not?


Marcelino Llano


Caleb Ogden


A Flexible Grid


Simon Collison


More roundups

Here are some more great responsive design roundups from other sites.


Written exclusively for WDD by Cameron Chapman.

Are you using responsive design techniques in your projects? Know of any resources we missed? Let us know in the comments!

Source

July 21 2011

15:59

CIJ Workshop in Blog Form!

Here’s an introduction to a little thing called ScraperWiki. Please watch it so that you don’t develop bad habits that could annoy the programmers you want helping you!

OBJECTIVES FOR THIS WORKSHOP

  • Have your own ScraperWiki account and understand all the features and navigation of the site
  • Scrape twitter for different terms and export the dataset
  • Query datasets on ScraperWiki using SQL and learn about our API
  • Create a table from the data in a scraper and understand how views work
  • The main objective is to understand ScraperWiki capabilities and potential!

Exercise 0. Make an account

Go to http://scraperwiki.com and make an account. You’ll need this to save your scrapers. We encourage you to use your full name, but it’s not obligatory!  Before you start you may like to open a 2nd tab/window in your browser as that will allow you to go back and forth between the blog instructions and the exercise!   The exercises are all written using the Python Programming language.

Outcome:

You’ll have your very own ScraperWiki account (lucky you!). Welcome to your dashboard. Please fill out your profile when you have time. You’ll automatically get email updates on how your scrapers are doing. We’ll show you all the features you have, where your data goes and how to schedule your scraper.

The following scrapers you’ll be copying and pasting can be found on my profile page: http://scraperwiki.com/profiles/NicolaHughes/

Exercise 1. Basic data scraping

We’ll start by looking at a scraper that collects results from Twitter. You can use this to store tweets on a topic of your choice into a ScraperWiki database.

1. Edit and run a scraper

  1. Go to http://scraperwiki.com/scrapers/basic_twitter_scraper_2/.
  2. Click Fork Scraper. You’ve now created a copy of the scraper. Click Save Scraper located on the right side of the window to save the scraper.
  3. Position your cursor on Line 11 between the two open speech marks ‘ ‘ -  This will allow you to edit the query to a Twitter search term of your choice.  For example, if you want to find tweets about an event type in the event hashtag e.g. QUERY=’#cij2011’.
  4. Click Run and watch the scraper run.
  5. Save the scraper. Click Save Scraper located on the right side of the window to save the scraper.

2. Download your scraped data

  1. On the top right-hand corner there are 4 tabs – you are in the Edit (Python) tab, click the Scraper tab.  You will see all of your data in tabular format.
  2. Click on ‘Download spreadsheet (CSV)’ to download and open your data as a spreadsheet.  If you have Microsoft Excel or Open Office you can analyse that data using standard spreadsheet functions.
  3. Double-click on your spreadsheet to open it.

Outcome:

Congratulations! You have created your very own twitter scraper (*applause*) that doesn’t depend on the twitchy twitter API.  You’ve scraped your data and added it to the data store. You’ve also taken the data into a csv file.  The scraper is scheduled to run daily and any new data will be added automatically. Check out the video on how to change the schedule.

Exercise 2. Analysing some real-life data

In this exercise, we’ll look at a real-life use of ScraperWiki.

The Press Complaints Commission doesn’t release the details of the complaints in a way that is easy to analyse, and it doesn’t release many statistics about its complaints.

It would be interesting to know which newspaper was the most complained about.

However, as one of our users has scraped the data from the PCC site it can be analysed – and crucially, other people can see the data too, without having to write their own scrapers.

Here is the link: http://scraperwiki.com/scrapers/pcc-decisions-mark-3/

There’s no need to fork it. You can analyse the data from any scraper, not just your own.

As the Open Knowledge Foundation say, ‘The best use of your data is one that someone else will find’.

Instead, we are going to create a new view on the data.  However we are not going to create a view from the beginning – we will fork a view that has already been created!  Go to http://scraperwiki.com/views/live_sql_query_view_3/, fork the view and save it to your dashboard.  You can also change the name of the view by clicking on the top line beside your name “Live SQL Query View” and change it to “My analysis of the PCC Data”.  Save it again by clicking ‘Save’.  Take a few moments to study the table and pay particular attention to the column headings.

  1. There are four tabs on the top right hand corner of the screen – click the ‘View’ tab.  This will take you to the ScraperWiki test card.  Click the centre of the test card “Click to open this view”.
  2. Using this SQL query view, find out which publications get the most complaints.
  3. Place the cursor in the ‘SELECT’ box, delete the ‘*’ and click on the word ‘publication’ which appears on the 2nd line of the yellow box (tip: the yellow box contains all of the column headings in the table) to the right of the column, and is positioned on the line under swdata .   This will transfer the word  ‘publication’ into the  your SELECT box.  Position your cursor to the right of the word ‘publication’ and type in ‘, count(publication)’. This creates a column that contains the a count of the number of times a publication appears in the dataset that was created from by the original scraper.
  4. Place your cursor in the ‘GROUP BY’ box, and repeat the process above to select the word ‘publication’ from the yellow box to the right. The GROUP BY statement will group together the publications and so give you the aggregated number of times each publication has appeared in the PCC.
  5. Place your cursor in the ‘ORDER BY’ box, remove the existing text and then type ‘count(publication) desc’. The ORDER BY keyword is used to sort the result-set. This will put the result-set in order of how many times the publication has received a complaint with the most complained about publication appearing at the top.
  6. In the ‘LIMIT’ box type ‘10’ to see the top 10.
  7. Hit the ‘Run SQL query’ button and see your results.  At the bottom of the column the last item is ‘full query’ – yours should read as follows:  (it may be truncated)

SELECT publication, count(publication) FROM swdata GROUP BY publication ORDER BY count(publication) DESC LIMIT 10

It should look like this!

This is a simple query showing you a quick result.  The query is not being saved.   You can use the Back and Forward browser tabs to see both screens however as soon as you go back to the test card and “Click to see view’  – the query will be reset.

For some really great SQL tutorials check out: http://www.w3schools.com/sql/default.asp

Your Challenge:

Now lets find out who has been making the most complaints – not receiving them.  You will be altering the query to find out which complainants have made the most complaints.

Outcome:

So you have just learned a bit about SQL, which is very simple and very powerful. You can query any open data set in ScraperWiki to find the story. Welcome to the wonderful realm of data journalism. Hop aboard our digger and explore.

Exercise 3. Making views out of data

Making a view is a way to present raw data within ScraperWiki.  It allows you to do things with the data like analyse it, map it, or create some other way of showing the data.

For example, in the previous exercise we used the view to create a simple SQL Query.  The view produced a table but it did not save the results of the query.    In this exercise we are going to make a table that gives you the latest result of your query every time you open it up!  In effect you will be creating your own live league table.

  1. Fork and save to your dashboard: http://scraperwiki.com/views/top_10_receivers_of_cabinet_office_money/
  2. On line 59 change “cabinet_office_spend_data” to “pcc-decisions-mark-3”. This is re-directing the view code to the original PCC scraper.
  3. On line 60 change the var sqlselect = “ SELECT publication, count(publication) FROM swdata GROUP BY publication ORDER BY count(publication) DESC LIMIT 10 ” query to the SQL query you worked out in the previous exercise.
  4. Click the ‘PREVIEW’ button which is positioned to the right of the orange documentation button above the ‘console’ window to make sure you’re getting the table you want.
  5. Click the X on the top right hand corner of the View Preview Window.
  6. The Heading still refers to the old scraper!  Go to the edit view and click on line 21 and replace the old title with ‘Top Complaints by Publication to the PCC’
  7. Save the View and Preview.
  8. Go to line 18 and replace http://scraperwiki.com/scrapers/cabinet_office_spend_data/”>Cabinet Office Spend Data</a> with http://scraperwiki.com/scrapers/pcc-decisions-mark-3/”>Press Complaints Commission Data</a>. You can also change the ‘this page’ hyperlink from <a href=”http://www.cabinetoffice.gov.uk/resource-library/cabinet-office-spend-data”> to <a href=”http://www.pcc.org.uk/”>.
  9. Save the view and preview.
  10. Click View to return to the test card and scroll to the bottom of the screen where you will see the paragraph heading – ‘Add this view to your web site’.   You could copy the code and add it to your web site and have the data linked directly. If you don’t have a site, this view is where you can return to get your live league table that will update with your data (wow)!
ScraperWiki Testcard

Note: there is no data stored in a view, only a link to a scraper that is looking at the data in the data store. This is why you can quickly and easily alter a view to look at another scraper at any time.  So you van build a viewer once and use it many times.

Check out what the Media Standards Trust made from our PCC scrapers! They made the Unofficial PCC.

Your Challenge:

Build a table of the top 10 receivers of Cabinet Office Money! The original scraper here: http://scraperwiki.com/scrapers/cabinet_office_spend_data/.

So go to your SQL viewer and change the scraper name to “cabinet_office_spend_data” i.e. the name of the scraper for our internal API is the string of letters after ‘scrapers/’ in the URL of the scraper.

Create your query (Hint: you’ll want to look at the ‘Refined’ table as that has the names of the suppliers cleaned to be the same for each spelling, just hit the word ‘Refined’ and the table that is selected for your query will appear in yellow. You’ll also want to use ‘sum’ instead of ‘count’ to sum up the money not how many times the supplier got paid). Then make your table view.

If you want to keep your PCC table just fork it, change the name in the title, save it and change the code to look at “cabinet_office_spend_data” and your query.

Hint: the original table you forked will have the answers!

Also check out this view of the same data set: http://scraperwikiviews.com/run/cabinet_spending_word_cloud_date_slider/

And this view of HMRC spending data that was made in a couple of hours from forking my code: http://scraperwikiviews.com/run/hmrc_spending_pie_chart_date_slider/

Outcome:

You’ll have a live league table that feeds off your scraped data! You’ll see how our setup allows you to constantly view changing data on the web and tell you the stories as they are developing. So you can get data out but you can keep it in and have lots of different views interrogating your data within ScraperWiki.

So let’s work on the journalism in ‘data journalism’ and not just the data. It’s not what can do for your data; it’s what your data can do for you!

So let’s start scraping with ScraperWiki!

Note: Answers in screencast form will be put on the blog in two weeks’ time. So no excuses!


May 25 2011

01:02

‘Documentation is like sex: when it is good, it is very, very good; and when it is bad, it is better than nothing’

You may have noticed that the design of the ScraperWiki site has changed substantially.

As part of that, we made a few improvements to the documentation. Lots of you told us we had to make our documentation easier to find, more reliable and complete.

We’ve reorganised it all under one contents page, called Documentation throughout the site, including within the code editor. All the documentation is listed there. (The layout shamelessly inspired by Django).

Of course, everyone likes different kinds of documentation – talk to a teacher and they’ll tell you all about different learning styles. Here’s what we have on offer, all available in Ruby, Python and PHP (thanks Tom and Ross!).

  • New style tutorials – very directed recipes, that show you exactly how to make something specific in under 30 minutes. More on these in a future blog post.
  • Live tutorials – these are what we now call the ScraperWiki special sauce tutorials. Self contained chunks of code with commentary that you fork and edit and run entirely in your browser. (thanks Anna and Mark!)
  • Copy and paste guides – a new type of reference to a library, which gives you code snippets you can quickly copy into your scraper. With one click. (thanks Julian!)
  • Interactive API documentation – for how to get data out of ScraperWiki. More on that in a later blog post. (thanks Zarino!)
  • Reference documentation – we’ve gone through it to make sure it covers exactly what we support.
  • Links for further help – an FAQ and our Google Group. But also for more gnarly questions asks on the Stack Overflow scraperwiki tag.

We’ve got more stuff in the works – screencasts and copy & paste guides to specific view/scraper libraries (lxml, Nokogiri, Google Maps…). Let us know what you want.

Finally, none of the above is what really matters about this change.

The most important thing is our new Documentation Policy (thanks Ross). Our promise to keep documentation up to date, and available alike for all the languages that we support.

Normally in websites it is much more important to have a user interface that doesn’t need documentation. Of course, you need it for when people get stuck, and it has to be good quality. But you really do want to get rid of it.

But programming is fundamentally about language. Coders need some documentation, even if it is just the quickest answer they can get Googling for an error message.

We try hard to make it so as little as possible is needed, but what’s left isn’t an add on. It is a core part of ScraperWiki.

(The quote in the title of this blog post is attributed to Dick Brandon on lots of quotation sites on the Internet, but none very reliably)


May 18 2011

10:13

All recipes 30 minutes to cook

The other week we quietly added two tutorials of a new kind to the site, snuck in behind a radical site redesign.

They’re instructive recipes, which anyone with a modicum of programming knowledge should be able to easily follow.

1. Introductory tutorial

For programmers new to ScraperWiki, to a get an idea of what it does.

It runs through the whole cycle of scraping a page, parsing it then outputting the data in a new form. For a simplest possible example.

Available in Ruby, Python and PHP.

2. Views tutorial

Find out how to output data from ScraperWiki in exactly the format you want – i.e. write your own API functions on our servers.

This could be a KML file, an iCal file or a small web application. This tutorial covers the basics of what a ScraperWiki View is.

Available in Ruby, Python and PHP.

Hopefully these tutorials won’t take as long as Jamie Oliver’s recipes to make. Get in touch with feedback and suggestions!


February 07 2011

16:56

MediaStorm Guide to Crossfades

In my last post, 10 More Ways to Improve Your Multimedia Right Now, I wrote:

Delete all dissolves between images…The eye sees cuts. When we look from one object to another, we see a blink. We don’t see one object then dissolve to another.

A reader responded with a comparison: “Our eyes don’t see shallow depth-of-field [either], but that doesn’t mean we shouldn’t use shallow DOF when appropriate.”

I agree.

So before I discuss when it’s appropriate to dissolve between pictures, let’s quickly revisit why doing so usually doesn’t work.

The problem is that crossfades create an unexpected middle image. In most cases, this intermediate picture, a combination of two hopefully strong ones, is both messy and confusing. There’s no particular meaning to be gleaned from this superimposition. Now, repeat this between every image over the course of a three- to five-minute project, and it’s not hard to see how exhausting it can become. In short, it’s a distraction. And anything that distracts from your story needs to be removed.

I’m not steadfast about most rules, but this one I think is pretty solid: the number one way to improve your multimedia right now is to not make crossfades your default transition. Use a simple cut as your default instead.

But back to the question, when do dissolves actually work?

I think the answer is when there’s some commonality between the two images. That is, some portion of the images stays the same so that when you do dissolve, only the most important part of the frame changes. The rest stays the same.

At the 9:09 mark of The Marlboro Marine by Luis Sinco, James Blake Miller is standing at a window while his wife, Jessica, sits on a mattress on the floor. As Miller describes the challenges he faces, he says of his wife, “And before I put her through that, I’d rather be without her.” The image then dissolves to the same scene, Miller still at the window but now he’s alone.

Producer Chad Stevens successfully uses a dissolve here to great effect. It works because the majority of the image stays the same; the dissolve highlights just part of the frame, Miller’s wife as she literally disappears. Combine the pictures with the dialogue, “I’d rather be without her,” and you have a seamless match between technique and story. It’s the kind of harmony we should all strive towards.

A second example can also be found in The Marlboro Marine at 9:30. Here a dissolve is used to emulate a rack focus. Miller is at the back of the frame while the motorcycle he’s working on is in the front, out of focus. A crossfade changes the viewers focus, shifting Miller out of focus to detail the bike. Again, the frame stays largely the same. All that changes is the focal point of the image.

So in summary, to effectively use dissolves between images, most of the image should remain constant and the crossfade should be used to show a change in time or to shift where the viewer is meant to focus. But, like any technique that draws attention to itself, use it sparingly. Once or twice per project is usually more than enough. Ideally, you want dissolves to be seen as a surprise, not a given.

Finally, if you can think of other effective ways to use dissolves, by all means, add your thoughts to the comments below.

January 28 2011

16:44

Ruby screen scraping tutorials

Mark Chapman has been busy translating our Python web scraping tutorials into Ruby.

They now cover three tutorials on how to write basic screen scrapers, plus extra ones on using .ASPX pages, Excel files and CSV files.

We’ve also installed some extra Ruby modules – spreadsheet and FastCSV – to make them possible.

These Ruby scraping tutorials are made using ScraperWiki, so you can of course do them from your browser without installing anything.

Thanks Mark!


November 30 2010

16:15

MediaStorm’s 10 More Ways to Improve Your Multimedia Right Now

As a followup to a previous post, here are ten more ways to improve your work right now, no matter how challenging your original assets may be.

Make edits with purpose. Always ask why you are making an edit at a particular place. Is the cut motivated by action? A musical beat? A pause in narration? If you don’t have a reason, you need to find a new location for your edit. Every edit must be motivated.

When editing your visuals, don’t cut in the middle of a word. Doing so is confusing. Edit between words, or even better, edit according to written grammar: at a comma, a period, or to emphasize a word. Cutting after words like because and however is also effective.

Edit rhythmically. Make the first cut at the beginning of a spoken phrase. Time the first phrase so it ends right before a musical beat. Cut to another a second image on the musical beat. Pause a few frames before completing the audio under this second. It’s easier to understand once you see the rhythm in action. Check out the “Town Bar” section of Driftless at the 1:37 mark.

Limit the number of times your interview subject is on-screen. There are three main reasons to show your subject on-screen: 1) To introduce someone so the audience knows who is talking. 2) When the subject is expressing emotion that you want your audience to see. 3) As filler, i.e., when you have nothing else to use as coverage. Avoid situation three whenever possible. For an example of an emotional response, see the end of Kingsley’s Crossing.

Don’t start your project with text. The first 10 seconds of a project are crucial. It’s where you audience decides whether they trust you enough to stick around. Starting with text says that your work can’t sustain itself without first reading some background information. That’s not dramatic. There’s nothing wrong with using text, just try to avoid it first thing.

Make sure your text slides are long enough to comprehend. You should be able to read them to yourself at least twice. If not, lengthen them.

If you need to use explanatory text, don’t clump it together in a paragraph. Paragraphs are for print. Show one sentence at a time. If you need a second one, wait until you think the viewer has finished the first to bring the second on screen.

Choose your fonts wisely. Fonts are like attire. Pick one that best represents the occasion. Of the thousands of fonts available to you, which one best represents the spirit and mood of your work? Use that one.

Always lead with your strongest images. You may instinctively want to save your best work for the end. But if you don’t grab the viewers’ attention quickly, they won’t make it to the end. See the beginning of Marcus Bleasdale’s Rape of a Nation for an example.

Delete all dissolves between images. I’ve mentioned this one before but it’s worth repeating. The eye sees cuts. When we look from one object to another, we see a blink. We don’t see one object then dissolve to another. Remove all of your image dissolves and your work will improve immediately. For more on the eye and its relationship to editing, see Walter Murch’s excellent book In the Blink of an Eye.

Please add your own tips and tricks in the comments below.

November 23 2010

18:56

MediaStorm’s Guide to Using Subtitles

Sometimes the most difficult challenge regarding subtitles is deciding whether to use them or not.

Subtitles present obvious aesthetic challenges—from inevitably covering the most important part of an image to turning a visual experience into a written one. If at all possible, avoid them; the obvious exception being when someone speaks a language other than that of the intended audience. Then subtitles are essential.

So how do you know if you need English subtitles for someone speaking English? It’s often difficult for a producer to make this call. After listening to the same clips again and again, we learn a speaker’s cadence and nuances and they become clearer to us. Probably the best method to make this determination is to play your project for a group of people who haven’t seen it yet and see if they can understand the narration without subtitles.

With fresh ears, they’ll quickly let you know if they’re able to follow along. If there’s any confusion, use subtitles; the most captivating visuals are useless if your audience can’t understand what’s going on.

Here are some other subtitle guidelines you may find useful:

  • Keep all of your subtitles on the same video channel in Final Cut. No other graphic or video elements should be on that channel. Just subtitles. This will help your organization and make things much easier when you need to add a drop shadow, which I will discuss later.
  • Avoid fonts with serifs, particularly small ones. Serifs tend to fall apart when a project is compressed to smaller dimensions. MediaStorm’s style is to use 18pt Arial bold.
  • Drop shadows are imperative. They help separate the subtitle text from images and video. To see their importance, place a drop-shadow subtitle above complex imagery. Now turn the effect on and off. The difference is striking. We use the drop-shadow settings below in Final Cut:
  • When an image changes, so should the subtitle. Don’t let subtitles bleed over onto the next image, or you’ll create visual confusion as subtitles seemingly appear and disappear at random.
  • Keep subtitles to one line only. Avoid wrapping them onto a second line as this, too, will create confusion when subtitles jump between one and two lines of text.
  • If your subtitles do not fit on one line but your image remains the same, you’ll need to cut to a second subtitle. To do this, start the first subtitle when the image begins. Cut to the second subtitle approximately 10 frames before the next word is spoken. This way, you’ll retain the pacing of your narrator, and the drama of your project, by not revealing what’s said before you need to.
  • At the beginning of a new cut, if there’s a pause of more than a second before someone speaks, fade up the subtitle with an eight-frame dissolve. The dissolve should complete approximately 15 frames, or half a second, before the person speaks.
  • If you intend to broadcast your project, make sure your subtitles are broadcast-safe. To create broadcast-safe subtitles in Final Cut, from the top right pulldown menu in the Canvas window select Show Overlays Show and Show Title Safe. The title safe region is within the boundaries of the inner rectangle (when you are working in 16:9).
  • Make a subtitle template. Create one subtitle with the proper font, size, and drop shadow. Before using this as your template, though, turn off the drop shadow as it will cause extra rendering. Next, using option-drag, copy the subtitle block to its next location. Double-click the subtitle to load it into the Viewer window. Then, using your transcript, paste in the proper text.

    When you have added all your subtitles, turn on the drop shadows on your first clip. Select it, then use the keystroke command-C to copy.

    To paste the drop shadow on all the other subtitles, select the additional clips using the T tool. Then press option-V to paste the attributes. Select drop shadow from the pop-up window.

July 20 2010

20:59

MediaStorm releases updated Multimedia Gear Guide

One of the most frequent questions we’re asked is “what gear do I need to do multimedia?” While there’s no quick and easy answer, we’ve put together a revised MediaStorm Gear Guide, detailing the equipment we use and recommend for gathering multimedia. With technology changing so frequently, it’s often hard to keep up with the latest and greatest gear, so I’ve also tried to give insight into why each type of equipment is ideal, and to provide different options when there are multiple versions available. If you have any questions, or suggestions of combinations that have worked well for you, we’d love to hear from you in the comments.

See our Gear Guide.

July 15 2010

15:34

MediaStorm’s Guide to Using Apple’s ProRes 422 Codec

One of the questions I’m asked most frequently about Final Cut is, “When do I use Apple’s ProRes 422 codec?”

To tackle this question it’s first necessary to understand a few things about codecs.

Shooting video is a very intensive digital capture process. It requires cameras to capture lots of information in a short amount of time. To handle so much raw data, most cameras need to compress what they capture. A codec is essentially a compression scheme, a way to encapsulate so much material into a containable format.

Standard DV footage, for instance, uses a compression scheme referred to as the DV codec. Similarly, HD footage — 1080i60, 1080p, etc. — uses the HDV codec.

Codec takes its name from “encoder” and “decoder” since your computer must now decode the encoded file during playback.

When you create a new sequence in Final Cut, you are building what will become a new movie. Thus, you need to define what kind of codec you’ll be using when it’s played back. This is where you need to decide if ProRes 422 is the proper choice.

The answer is actually quite simple.

If you will be using only one kind of video in your project, HDV 1080p for example, then you should use 1080p’s native codec, HDV, for your sequence. If you’re using only DV footage, set your sequence codec to DV.

On the other hand, if your project includes more than one format — both DV and HDV material for example — then you’ll need to set your FCP sequence codec to ProRes 422.

The ProRes 422 codec is so powerful that it can contain two or more other codecs within it, without requiring extra rendering. It’s a truly remarkable ability.

For a technical description of how to set up your sequence’s codec, see Tips from the MediaStorm Final Cut Pro workflow.

In Final Cut 7, the latest version, Apple introduced three new flavors of 422. About 90 percent of the time, you’ll use the standard ProRes 422. But if you’d like more information on the other options, see Final Cut Pro 7. Expanded ProRes Family.

Finally, if you’re unsure of your file’s codec, open it in QuickTime, then use the shortcut key command-I to open the application’s Movie Inspector window.

There you’ll see all kinds of metadata including the clip’s length and file size as well as the codec it uses.

June 14 2010

18:43

MediaStorm’s Guide to Custom Final Cut Shortcuts

Frequently when working in Final Cut, I need to find the source of a clip. The most obvious way to do this is to right-click on the clip and select Reveal in Finder.



But I’d prefer to use a faster method, specifically a keyboard shortcut key.

To find a function’s shortcut, enter a keyword into the Help>Search field window. You’ll see all of the menu items that contain the word ‘reveal.’ Use the down arrow key to select Reveal in Finder.

A large blue arrow points to the item under the View menu.

Notice that there’s no shortcut key to the right of the menu. This indicates that Apple has not assigned a default keystroke to this task.

Not to worry. Final Cut provides a straightforward method for customizing your keyboard with new shortcut keys.

Choose Tools>Keyboard Layout>Customize or Option-H.

Final Cut launches the default keyboard layout window.

This tool illustrates each of Final Cut’s shortcut keys with an icon on the respective key. Note the tabs on top for modifier keys (command, option, control, etc.).

To the right of the default keyboard layout window is a series of expandable menus. Each contains a Final Cut function, an icon, and for some, a keyboard shortcut.

In the search box above this menu, type ‘reveal,’ You’ll see a number of results. At the bottom of the list is Reveal in Finder.

To create a custom shortcut, you’ll need to drag the function onto the keyboard. First though, click the lock at the lower left of the window in order to amend the default settings.

In most cases, you’ll want to add the function to an unused key combination. In my example, I wanted to include the F key, as Reveal in Finder is a form of ‘find.’

Sorting through the tab, you’ll see that in the control-option pane the F key is empty.

Simply drag the function from the left side of the keyboard layout window onto the right-side key.

Place the icon on the F key.

Lock the window again, and you’re good to go.

Now, when I want to find out the source location of a video or photograph, I just select the clip then use the custom keystroke control-option-F, and a Finder window will open, revealing the file.

The same workflow can be used for just about any Final Cut function that doesn’t use a default keystroke.

Tell us your favorite custom keystrokes in the comments.

June 10 2010

17:43

Why no one is watching your video and 9 ways to improve your story [VIDEO]


Here are the 9 ideas I think will improve your stories:

Note: You’ll have to watch to get more detail

1. Create a strong sense of place

2. Steal

3. Create some drama

4. Stop burying your lede

5. Be bold

6. What the hell?

7. Bait the hook

8. Add a dash of mystery

9. Keep them guessing



src="http://www.multimediashooter.com/art_of_the_open-poster.jpg"
href="http://www.multimediashooter.com/art_of_the_open.mov"
target="myself"
controller="true"
autoplay="true"
scale="aspect">

Links:

Manhattan (1979)

Photographer Lucas Oleniuk and columnist Jennifer Wells reflect on the Conrad Black trial.

Man on Wire

Apocalypse Now

This American Life on Showtime

LATimes.com Waiting for Death

NYTimes.com One in 8 Million

Wapo.com One Man, Two Worlds

ackermangruber.com/shortfilms/snowbirdsinquartzsite/

Life Unbarred

The Failure of Reform

Scarred by Abuse

Tags: Tutorials

May 12 2010

21:59

What are the best tools for "scraping" data off a Web page for analysis in Excel or other software?

My former student Michelle Minkoff answered this question, at least in part, on Poynter.org today: http://www.poynter.org/column.asp?id=31&aid=183176. Her post includes links to two wonderful tutorials. I'm interested in other suggestions, and also in approaches for someone who's not too afraid of coding to write/adapt their own scraper.

Part of the reason I ask this question is that I've been thinking that writing a scraper might be an interesting final project for a course introducing programming to journalists. The rationale (along the lines of how I've taught computer-assisted reporting in the past) is that it's the kind of project a journalist would immediately see the utility/value of. So in addition to suggested tools/approaches, I'd be interested in feedback on this idea.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl