Skip to Content

Free TUAW iPhone app -- try it now!
AOL Tech

css posts

Filed under: Odds and ends, iTunes, Graphic Design

Inside the new iTunes LP format

With the release of iTunes 9 came iTunes LP. Our own Dave Caolo gave iTunes LP a glowing review, but if you're wondering just how Apple worked their magic with the new format, web developer Jay Robinson has picked it apart thoroughly. As it turns out, simply replacing the ".itlp" extension with ".zip" reveals the contents of the package, which are actually HTML, CSS, and a little JavaScript. The Flash-like interfaces really use no Flash, but instead rely on the proposed CSS3 animation properties. If you're a web developer like yours truly (or a few other TUAW bloggers), you'll definitely want to check out Jay's analysis of the format.

We've also been informed by a loyal tipster that if you take that unzipped folder of content and put it in your Sites directory (with Web sharing turned on, naturally), you might try browsing to it from your iPhone or iPod touch and seeing what shows up in Mobile Safari. Fascinating.

Filed under: Software, Cool tools, Developer

Developer Color Picker: For your pickiest developer

Wade Cosgrove, code ninja over at Panic, has released a freeware Developer Color Picker that helps developers of all stripes pick and paste color declarations for a variety of languages.

Any color picker will let you choose a color from anywhere on your screen, but Developer Color Picker turns that into usable code for your Xcode and web development projects. Developer Color Picker generates code suitable for NSColor, UIColor, CGColorRef, CSS and HTML declarations.

Depending on what you want, you can copy just the value for the color itself, or an entire declaration including the color. Imagine the time you save not having to type UIColor *aColor = [UIColor colorWithRed:0.282 green:0.569 blue:0.894 alpha:1.000]; again!

Developer Color Picker is available on Panic's website.

Filed under: Internet, Developer, Snow Leopard

3D animations coming to Safari


Charles Ying over at satine.org has put together an impressive demo using Safari's forthcoming CSS 3D transform features. There is a YouTube video of the demo (you can watch it in the 2nd half of this post), as a nightly build of WebKit or the Snow Leopard version of Safari is required to render it.

The demo, titled Snow Stack, displays a wall of photos in three dimensions and allows you to navigate across the wall using your arrow keys. The wall of photos seems to go on into infinity while it dynamically loads the photos from Flickr as you travel across it.

The animation style is similar to the browser plug-in Cooliris (formerly known as PicLens), but it was written entirely in HTML and CSS, with some JavaScript to pull in the photos from Flickr. The animations are so amazingly smooth animations it's hard to believe that only CSS was used to create them. Surprisingly, Safari on iPhone has supported CSS 3D transforms for sometime now, but the animations have yet to make an official debut on the desktop.

If you are running Leopard and want to see the demo running on your Mac you will need to download the nightly build of WebKit to render it in all of its 3D splendor. If you have a pre-release copy of Snow Leopard installed you can simply use the built-in version of Safari to view it. Until Apple releases a public build of Safari with these features those are your only options.

A post today on the Surfin' Safari blog over at WebKit features another demo of CSS 3D transforms called Poster Circle. I've posted a video to YouTube of this demo in action.

Some of the options developers will be able to use with the new CSS 3D tranforms include: scaling, perspective, rotation, and standard 3D positioning. Apple has submitted a specification detailing these features to the W3C. Hopefully as time progresses other browser vendors will implement the spec as well. In the meantime Safari users will have these beauties all to themselves.

Continue reading3D animations coming to Safari

Filed under: Analysis / Opinion, Internet Tools, Developer

CSS Animation to replace need for Flash in MobileSafari? Not likely

New nightly builds of Safari's bleeding-edge doppelgänger, WebKit, are getting some new support for CSS animations -- support that's already available in MobileSafari.

The animations, which include a falling leaves effect, a way to simply animate objects sliding across the screen, and a "pulse" effect (described as "the new <blink>") are all supported by WebKit. The WebKit blog shows code examples about how to use these behaviors in your own sites.

MacRumors's Arnold Kim suggests that Apple may be looking to obviate the need for Flash on the iPhone and iPod touch through the implementation of web tools like CSS Animation. I would argue that while CSS is powerful, getting Flash on the iPhone is about one thing and one thing only: Games.

Continue readingCSS Animation to replace need for Flash in MobileSafari? Not likely

Filed under: iPod Family, Tips and tricks, Developer, iPhone

CSS trick mimics sideways-flicking behavior in MobileSafari

Ajaxian has posted a ridiculously simple way to enable web apps to mimic the iPhone's side-to-side flicking behavior using custom CSS supported by MobileSafari. If you're creating a web app specifically for iPhone and iPod touch users, you can get a similar feel to a native application with MobileSafari.

MobileSafari includes some CSS 3 support, including advanced DOM selectors and support for animations and transitions. Chances are, other browsers will have limited support for CSS 3 draft standards, and whatever you write probably will only work in MobileSafari and Safari 3 on the desktop.

The test application in this movie shows how it tracks finger movements across the screen, and performs actions based on the distance "swiped." Very nifty.

[Via Cameron.io.]

Filed under: Tips and tricks, Internet, Graphic Design

Safari 3 allows styled form controls

This was included in WebKit builds beginning several years ago, apparently, but is something I recently stumbled upon. Historically, Safari has been pretty insistent on making sure web page form fields (like drop-down menus and buttons) retain the Aqua look-and-feel. Web designers, on the other hand, have gotten used to choosing colors and font sizes for those controls, so they fit in with their site's design.

Hopefully everyone can now be happy: Safari 3 allows web designers to style form controls with CSS. The results are pictured: instead of a glossy, Aqua-like control, Safari displays a matte-finish control in the color and size of your choosing. You can even apply background images to form controls. If you don't apply styles to your controls, then Safari retains the Aqua look.

This shouldn't require any changes to code that's already written for other browsers: Safari 3 should pick right up on the formatting, and display it as the designer intended. It does, however, open up WebKit-specific CSS to your form controls.

Filed under: Cool tools, How-tos, iPhone

Set custom iPhone CSS signatures

Here's a great how-to that I've been meaning to post for a while. Blogger David F. Bills posted a tutorial for adding custom CSS signatures to your iPhone email defaults. The process involves copying over your preferences file and adding the CSS code to the SignatureKey preference.

This gets very interesting when Bills shows you how to add a custom image to your signature. You actually have to encode the image directly so it arrives with your message. Otherwise, spam blockers may block the image download if you just use an HTML link.

It's a really easy to follow method and I had very little trouble getting it set up to include the signature shown here. My biggest obstacle came from my tendency to paste everything in TextEdit. For this project, PropertyListEditor works better and more reliably due to the length of the pasted key.

Filed under: Books and Blogs, iPhone

iPhone Web Development book debuts

August Trometer's new PDF book, Optimizing Your Website for Mobile Safari" just debuted. I am not much of a web designer myself but I may cough up the ten bucks to pick up a copy of this ebook. Topics according to the web page include Mobile Safari detection, Webkit-specific CSS attributes, and how to use iPhone-specific features via web tweaks. iUI, Joe Hewitt's iPhone-specific webpage design kit, doesn't appear in the write-up, and I'm not sure if Trometer covers using it or not.

Full disclosure, I have worked with AW/Pearson and will be doing so again.

Filed under: Analysis / Opinion, iPod Family, Video, Odds and ends, Apple

New iPod touch ad was created by student, reuses Zune tune


As many, many readers noted, a new iPod touch ad appeared on TV over the weekend, and Apple has now posted it on their site. There's a long story behind this one that I hadn't heard yet, it would seem that the ad is a product of TBWA/Chiat/Day, just like most of Apple's ads, but the idea actually came from an 18-year-old English guy named Nick Haley. Nick created the ad (his original cut is above) back in September as a homage to Apple's new iPod, and it looks like someone in Cupertino noticed (or at least someone on Madison Avenue).

This might be old news to most of you, but I hadn't heard it and it's a good story. Apple has a reputation for getting their advertising from other sources, and it's nice to see them acknowledge an ad that came from someone who really loves their products.

Special thanks to reader running for figuring this one out for us: the song used in the ad is actually the same one used in this super weird Zune ad from last year. Even when Apple is completely upfront about the origin of their ad, they can't seem to keep from colliding with competitors in the same space.

Update: Calling it the iTouch was completely accidental, and I apologize. You guys are right-- it's the iPod touch, and I'm sorry for mistaking it. I guess the word was sitting in my brain and just wanted to come out.

Filed under: OS, Software, Odds and ends, Internet, Apple, Apple History

Hypercard's history

SiliconUser takes a short look at ye olde Hypercard technology, Apple's precursor to the concepts that eventually became HTML and the World Wide Web. The project was originally created in 1985 as an easier way to create programs on the Macintosh-- it consisted of a "cards and stacks" metaphor, as in you created one card that linked to another card in the stack, and so on. Early Hypercard stacks just worked as organized information databases, but eventually Hypercard ended up doing more and more-- cards could work as applications in themselves, and the links between them served as a precursor to hyperlinks and what we know as the Internet today. Personally, I only used Hypercard very minimally, and it's hard for me to imagine as much functionality coming out of Hypercard as we've got with CSS, HTML, and PHP today. But Hypercard faithful (of which the numbers seem to be not quite known), held onto the application for a long time.

Hypercard's downfall came arguably not because it failed to stand up to new concepts, but because Apple, in a blunder, passed the program away to Claris, who tried to sell it rather than include it free in Macs. By the time Apple took it back, in 1993, the momentum was lost, and after a short period with Apple's Quicktime division, Hypercard was discontinued in 2004. Previous to that, Hypercard 3.0 was shown at WWDC 1996 (including the ability to display Hypercard stacks in a web browser, which might have been the key to keeping Hypercard alive), but that release never came. There are a few traces of Hypercard left on Apple's site, but as a technology, it's as dead as dead gets.

Thanks, Thomas!

Filed under: Software, Internet Tools

RapidWeaver 3.6 released



Realmac Software today has released the much-anticipated new version of RapidWeaver, their powerful WYSIWYG software that does a great job of filling the gap between iWeb and Dreamweaver. This new v3.6 ushers in a significant list of new features, such as:

  • Themes Styles - no more digging in HTML and CSS to customize your theme (unless you really want to)
  • 6 completely new themes
  • Snippets - manage chunks of frequently used code instead of copy/pasting or constantly re-typing
  • New Flash Slideshow - completely rewritten and can now pull images from a Flickr feed
  • Improved blog, including tags and inline comment support
  • Easy creation of Lists
  • Detailed Publishing
  • And much, much more

Also, due to RapidWeaver's "skyrocketing" popularity, RealMac Software introduced a redesigned website today that includes a full-featured add-ons section where users can browse themes, plug-ins and code snippets, which of course also means 3rd parties nowhave one central RapidWeaver community where the can highlight their products.

With everything involved, I can completely understand Realmac Software's decision to make v3.6 a paid upgrade - current users (including MacHeist owners) can purchase a v3.6 license for $25, while a full license costs $49. A demo is of course available, so head over to the shiny new Realmac Software site to see everything RapidWeaver has to offer.

Filed under: Software, Productivity, Internet Tools

CSSEdit 2.5 brings tabs, X-ray Inspector and more



MacRabbit has released CSSEdit 2.5, a significant update to their fantastic CSS editing and manipulating application. As if CSSEdit 2.0 didn't bring enough cool features, v2.5 is almost like sneaking a peek at your v3.0 birthday presents that are stashed away in your parent's closet the day before your party. There is a list of what's new on the MacRabbit's blog.

Quite the update, but a free one for registered owners of v2.x. Users of 1.x can upgrade for $14.95 instead of CSSEdit's regular price of $29.95, and of course a demo is available from MacRabbit.

[via Nik Fletcher's Twitter]

Filed under: Software

CSSEdit 2.0



I'm not a designer, heck I'm hardly a writer, but I do know good software when I see it (and a cute company logo). CSSEdit is a good piece of software, and it has only gotten better with version 2, released today. But what is it, you ask? CSSEdit is the premier CSS editor (that's Cascading Style Sheets to you) for OS X. Version 2 is faster, can save CSS from a remote website better, and auto saves your work. The big ticket feature is previewing CSS for dynamic applications (think blogs).

A demo is available while a full license will cost $29.95.

Filed under: iTS, Rumors, Software, Video, Security

iTunes to allow video burning soon?



I used the question mark because nothing is set in stone here, but TUAW reader Ann-CA tipped us off to a report at the DVD Newsroom that Hollywood might actually be close to lifting some of their over-the-top restrictions on DVD burning. This slightly loosened grip on their content could allow for things like DVD burning kiosks (it better be a darn fast burner), and it could also give the green light to vendors like the iTunes Music Store to allow burning of purchased videos.

The panel in charge of making and (finally) rewriting these rules is called the DVD Copy Control Association, according to DVD Newsroom. This DVDCCA is currently working on licensing the encryption technology (Content Scrambling System, or: CSS - nothing to do with web design) to digital distribution services, which is the key to allowing video burning.

No ETA is offered on when these rewritten rules could see the light of day, or when video burning could arrive in the iTMS. If Hollywood's reaction times of the past are any indication (and I genuinely hope they aren't), however, we might all be using 7th or 8th gen iPods before we can watch iTMS video on something besides Apple-branded devices.

Filed under: Software, Cool tools, Widget Watch

Widget Watch: CSS Tweak!

CSS Tweak!, as you might imagine, can optimize and clean up your CSS code with the drag and drop of a file. The widget will report how much smaller your file is going to get, and its description states that your new file is "saved in the same location as the original", so I'm pretty sure this means it doesn't overwrite the original, but proceed (and backup!) with caution.

CSS Tweak! appears to be free and is available from Andy Peatling at his site, CssDev.

Tip of the Day

Use Spotlight as a reference tool. Type any word in the Spotlight box and one of the top entries will be a definition. Click on it, and it will bring up the dictionary application to check the word in either the dictionary, thesaurus, Apple database, or Wikipedia.


Follow us on Twitter!
 TUAW [Cafepress]

Featured Galleries

DNC Macs
Macworld 2008 Keynote
Macworld 2008 Build-up
Google Earth for iPhone
Podcaster
Storyist 2.0
AT&T Navigator Road Test
Bento for iPhone 1.0
Scrabble for iPhone
Tom Bihn Checkpoint Flyer Briefcase
Apple Vanity Plates
Apple booth Macworld 07
WorldVoice Radio
Quickoffice for iPhone 1.1.1
Daylite 3.9 Review
DiscPainter
Mariner Calc for iPhone
2009CupertinoBus
Crash Bandicoot Nitro Kart 3D
MLB.com At Bat 2009
Macworld Expo 2007 show floor

 

More Apple Analysis

AOL Radio TUAW on Stitcher