30 Jul 2007 8 am eastern

For web developers and iPhone users

XRAY web developer’s suite
Fab, free bookmarklet for web designers and developers analyzes any element on a web page with a click. Must be used to be appreciated. Part of a forthcoming suite of free, cross-browser web development tools from Westciv. Suggested improvements and bug reports welcome. Currently works in Webkit (Safari) and Mozilla (Firefox, Camino, etc.) browsers; an IE version is coming. Don’t miss the “Acknowledgements, Thanks, and Inspiration” credits, which link to great JavaScript and visual resources.
How to Rip DVD Movies To Your iPod Using Free Software
Great, straightforward how-to by brilliant author/developer Mark Pilgrim walks you through the process of setting up HandBrake, a free, open source app, to rip DVDs to your iPod. Last updated in 2005, several versions of HandBrake (not to mention several generations of iPod) ago, so screen shots will not always match current versions. But the settings advice is still accurate, and even applies to the iPhone, with its giant wide screen.
Ripping even a short movie you own takes a long, long time. I tested Pilgrim’s advice on a flick our toddler loves, so my iPhone could double as a parental aid during family trips. It took over five hours to burn an 86 minute film, but the results were beautiful.
For more video conversion advice, see the 12 December 2005 Macworld Secrets column, Convert video for the iPod. Summary: Upgrade to QuickTime Pro and export for iPod. Works great and works fast. One’s iPhone now sports Charlie the Unicorn and will soon host short home movies shot on a point and shoot digital camera and formatted by that camera as AVIs.

Tags: , , , , , , ,

  • Twitter
  • Facebook
  • del.icio.us
  • Digg
  • Google Bookmarks
  • NewsVine
  • RSS

Filed under: Design, Standards, Tools, development, iphone, links

30 Responses to “For web developers and iPhone users”

  1. Hot Links - Level 3 said on

    links from Technorati: XRAY web developer’s suite – XRAY web developer’s suite. Smart new bookmarklet from westciv—kind of like Steve Chipman’s MODI but with the addition of the canvas element for box model visualisation. [via] factoryjoe : westciv :: XRAY web developer’s suite – A great bookmarklet for viewing the dimensions of objects in a webpage. Saved By: Chris Messina | View Details | Give Thanks Tags: xray, css, john allsopp, tools, web design, bookmarklet

  2. GuyWeb said on

    links from TechnoratiFor web developers and iPhone users

  3. Simon Willison’s Weblog said on

    links from TechnoratiXRAY web developer’s suite (via). Smart new bookmarklet from westciv—kind of like Steve Chipman’s MODI but with the addition of the canvas element for box model visualisation.

  4. the faceblog · Mind-NOX said on

    links from TechnoratiHOW DO I USE XRAY? Step 1: Just drag the link titled “XRAY” below to your bookmarks bar, or otherwise add it as a bookmark in your bowser. This is quite handy for “in-window” debugging. (ViaJeffrey Zeldman Presents : For web developers and iPhone users.)

  5. http://guillermoesteves.com said on

    links from Technoratifree bookmarklet that works in Webkit and Mozilla browsers in OS X and Windows, although an Internet Explorer version is planned. Zeldman’s right, it has to be used to be appreciated: click here to try it. Now click any page element. Cool, huh? (ViaJeffrey Zeldman) Support this site, shop at Amazon.com.

  6. Idea Grapes said on

    links from Technoratimodel,常要點個幾次才能正確找到自己要看的元素。[viaZeldman.com] 相關套件: CSSViewer Aardvark bookmarklet, box model, css, Firefox, WebDev, xhtml

  7. Finger Tips - a fistful of handy web notes said on

    links from Technoratibut I prefer it to Firefox and with the addition of the Free, XRAY bookmark applet I am extremely happy. Sure I still need Firefox, just for checking web browser issues, but Safari does pretty much everything I want now. Thanks, once again, to MrZeldman, for the heads up!

  8. Tim Roberts said on

    This just has to be integrated into Firebug. The two would complement each other perfectly.

  9. brad said on

    Compressing movies is a lot like cooking: all you really need is a great recipe you can use again and again. As the result of days of testing, here’s a QuickTime-centric recipe for PAL users for 16×9 (widescreen) videos:

    File format: .mp4

    Video format: H.264

    Data Rate: this is the key to the recipe – make the Date Rate equal to the width of the video size you set, ie. for a 512×288 video, the Data Rate is 512. For a 720×400 DVD-size video, the data rate would be 720.

    Image size: for PAL users, testing reveals 512×288 (half resolution) is best for the internet as it provides the best image quality for the smallest file size. If you are compressing a DVD, try 720×400. (The actual 16×9 size is 720×404, but by getting rid of the 4 extra pixels, you’ll get better quality and a smaller file as 400 is divisible by 16, and 404 isn’t. The image will squish a bit, but it will be undetectable).

    Key Frame: automatic, best quality
    (Always use ‘Multi-pass’ or ‘Two Pass’ compression. In QT, “best quality” refers to ‘Multi-pass.’ In contrast, ’single pass’ is quicker, but doesn’t do as good a job.)

    Audio: do it like you do your music: AAC, 128kb, best quality

    If you have an “Enable Streaming” option, tick it.

    Sorry, I’m not sure about NTSC dimensions, although a simple rule for setting the data rate could be extrapolated from above. In other words, we know that a data rate of 512Kbps works well for compressing 147,456 pixels (total area: 512 x 288 = 147,456)

  10. Christopher Schmitt said on

    XRAY looks neat, but doesn’t the Web Developer Firefox extension have something like this already?

  11. Mau said on

    Handbrake works great, easy to use… but expect to wait about 40 minutes (on a Mac Pro) for a movie to finish ripping onto your hard drive… Handbrake has already some preset profiles so you can pick between AppleTv and iPod for your movies… 110-minute features use about 1 Gb of hard drive.

    I reduced the bitrate, and I have now watched streamed movies from my Mac Pro on to my MacBook Pro via iTunes Share, and no problems whatsoever… obviously it may look kind degraded if you plug it in a 50-inch LCD… but I don’t have such thing.

  12. Mau said on

    There is another Firefox extension called CSSViewer, it looks like xRay but it lets you move around while it is active. xRay is nice, but it locks your wheel scroll until you are done analyzing any given item.

  13. Jeffrey Zeldman said on

    @Christopher and Mau:

    The thing about XRAY is that it’s cross-browser.

    @Mau:

    I chose an HB iPod preset, which had a bitrate of 15,000. Then I lowered the bitrate to 400, per Mark Pilgrim’s (and Macworld’s) advice. The 86 minute video started ripping at 5:00 in the afternoon and was still grinding away when I went to sleep.

    Short of reviewing log files in Unix, I can’t tell you how long HandBrake actually took to rip the video, but it was way more than 40 minutes — closer to six hours or more.

    Ripping at a higher bitrate might speed up the process, but a higher bitrate creates large files whose extra quality you can’t see on your iPod or iPhone.

  14. Mau said on

    Jeff… you gotta stop going to bed at 6pm! =)

    So the lower the bitrate the slower the ripping?

  15. Ryan said on

    I’ve been using VisualHub for iPhone video converting. It’s not free ($23.32 US) but it has everything preset and works nicely.

  16. Richard Senior said on

    XRAY is fantastic! I know I should love Firefox, but I don’t. I much prefer the look of Safari. Sure Safari’s caching is pretty aggressive, but I work round that, and now with XRAY installed, I am a very happy bunny. Thank you!

  17. Jim Gaynor said on

    Jeff, I’ve been using Handbrake with the iPod setting and taking pretty close to a 1-1 ratio on a MBP Core 2 Duo 2Ghz with 2GB RAM. I’ll have to try brad’s suggestion of lowering the data rate…

  18. Dan Schulz said on

    I just can’t wait for XRAY to get ported to Opera. Any idea how long it’ll be before that happens?

  19. Jeffrey Zeldman said on

    I just can’t wait for XRAY to get ported to Opera. Any idea how long it’ll be before that happens?

    Not sure it’s going to happen. Talk to Westciv.

  20. Passenger 57 said on

    OK Zeldman, be honest,

    rip DVDs to your iPod
    Convert video for the iPod

    those are not paid PR8 link bites?

  21. Jeffrey Zeldman said on

    Oh, Passenger 57, how cynical you’ve become.

  22. Terry Eaton said on

    I saw Mark’s write-up on this and downloaded HandBrake a week or two ago. You definitely have more patience than I do. I gave up after about three hours thinking that there was a problem. I didn’t think I was expecting a miracle for it to take less than three times the length of the movie with all of the touted processing power of a MacBook Pro. I guess maybe I was. :-)

  23. Jesper said on

    As far as converting video for iPod goes, versions of iTunes produced after that article means you can just add a video to iTunes, right click and choose “Convert Selection for iPod”. No QT Pro needs to be acquired.

  24. Justin Bell said on

    One thing with H.264 is that it can take longer than some other encoders (which is probably why it often gives a better image).

    If encoding time is a real pain, you might want to try one of the other options in HandBrake, assuming the iPhone will support it — I don’t think it plays DivX, for one.

    Of course, all this also depends on how much space you have to play with, too. So in the end, you might want to ignore all this and just use the handy queuing feature (or is that cuing?) and leave it overnight where the CPU hogging won’t bother you.

  25. Jeffrey Zeldman said on

    @Justin:

    Encoding in H.264 in QuickTime Pro is but the work of a moment. The reason HandBrake takes ages to process DVD video files into H.264, it seems to me, is that HandBrake is *downsampling* at a high ratio — i.e. from 1500 fps to 400 fps.

    As for CPU hogging, there isn’t any. This is Mac OS X. You can keep working on other stuff while HandBrake does its thing in the background. Doesn’t seem to make any difference to the conversion speed. Working with HandBrake in the background, or doing nothing and letting HandBrake work in the foreground — either way, the process is Maple-syrup-slow.

  26. Kerri said on

    What kind of CPU are you ripping on? I have the Indiana Jones DVD collection, which we wanted to rip to watch on our AppleTV (since we don’t have a proper DVD player hooked up to the TV anymore).

    On my dual G5 2.0, one disc took more than four hours, using the HandBrake AppleTV default setting, plus captions. On a new 20″ Intel iMac 2.0, the same disc took about an hour and a half, using the same settings.

  27. Jeffrey Zeldman said on

    MacBook.

    Processor: 2 GHz Intel Core Duo

    Memory: 2 GB 667 Mhz DDR2 SDRAM

    Mac OS X Version 10.4.10

  28. Blaine Stratford said on

    I got Handbrake to work with my iPhone. The ripping time wasn’t that bad, but I sized down the original to fit the screen dimensions of the iPhone. For a 1.5 hour movie, the ripping took roughly 30 minutes on a 2.33 GHz Core 2 Duo MacBook Pro with 2 GB RAM.

    It is possible that the relative speediness of my experience was due to the fact that I was making a scaled down copy?

    Regardless, I am very pleased with Handbrake. It’s easy to use and works.

  29. Jeffrey Zeldman said on

    Actually, if you ignore the instructions in the 2005 articles and simply choose HandBrake’s iPod setting, you can burn a one hour movie in about 30 minutes, with excellent quality and at a comparably small file size.

    The 2005 instructions are great but outdated (as one might expect of technical posts). Just use the latest version of HandBrake and pick one of its default settings.

Speak up!

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

- Why ask? This confirms you are a human user!