CSS
Latest
PhoneGap 1.0 lets devs write apps for seven platforms (video)
Until now, mobile app developers have followed a pretty predictable MO: develop for iOS first, Android second, and everyone else after that. Since last year, many of you code monkeys out there have been tapping into Nitobi's PhoneGap, a project that makes it easier to churn out apps for almost every OS, all at once. It's been picking up steam, with about 40,000 downloads per month, 600,000 in total, and a steady stream of donations. That all culminated this weekend with the release of PhoneGap 1.0, which lets devs use HTML, CSS, and JavaScript to write and deploy apps for iOS, Android, BlackBerry, webOS, Bada, and Symbian. That's a long list indeed, but we see one glaring omission: Windows Phone 7. Hit the source link to download it for free and check out the promo video below for an oh-so quick overview. Update: Oops! Looks like WP7 is included! Our apologies, and feel free to celebrate accordingly.
Skype wants the people to fix Skype 5 for Mac, will you answer the call?
Skype 5 for Mac leaves something to be desired -- we know it, you know it, and looks like Skype knows it too. That's why our fav VoIP app is soliciting the help of you, the people, to improve its UI. Skype's running a competition to find the one chat style to rule them all, and it starts taking custom CSS submissions April 8th. The contest has three rounds, with one judges' and one people's choice in each, followed by the selection of a grand prize winner from the six finalists. People's champs get an Apple TV and those picked by the judges snag a WiFi iPad 2, and all the winners get a copy of CSS3 for Web Designers and a year's subscription to Skype Unlimited World Extra. The grand prize is an eleven-inch MacBook Air, an iPad2, and the ego boost that comes with knowing your chat style forged in the flames of competition will be included in a coming release of Skype. Up to the challenge? Hit the source link for the full details.
Adobe outs experimental Flash-to-HTML5 conversion tool, calls it Wallaby
Ah, if only we could flip a big happy switch and convert all the web's Flash content into (functional) HTML5 code. It's a dream shared by many and, funnily enough, the company pushing to make it a reality is none other than Adobe itself, the owner and proprietor of Flash. Its Labs research team has just released an experimental new dev tool, dubbed Wallaby, that's targeted at taking Flash-encoded artwork and animations and turning them into a more compatible mix of HTML, CSS and JavaScript. Of course, the intent here is not some magnanimous move to free us from the shackles of Flash -- Adobe openly admits that the initial goal for the new tool will be to help convert animated banner ads so that they work on the iOS platform -- but hey, even bad tools can be used for good sometimes, right?
Apple iAds Producer helps you produce iAds for iOS devices
We know how it is, you want to be a hotshot developer, but all that coding sounds like daunting work. Never mind, Apple's got your back with its new iAds producer, which automates all the HTML5 and CSS3 stuff into the background and leaves you to focus on the crucial task of picking out templates and components for your perfect iAd. To be fair to this new dev tool, it does more than merely dumb down the design process. It also includes "sophisticated" JavaScript editing and debugging, a built-in simulator for testing your creation, and a project validator that checks your code for common errors. Hit the source link to give it a try.
HTML5 prettifies fan-made Tron trailer... in real time! (video)
What can HTML5 do for you? Quite a lot, as it happens. A chap by the name of Franz Enzenhofer has put together a real-time effects mixer for a fan-made Tron trailer, which combines HTML5 with a dash of JavaScript and a sprinkling of CSS to demonstrate the awesome potency of open web standards. You can recolor, reposition, rotate, stretch, or skew the video, all while it plays. We've got the unaltered trailer, made earlier this year as a sort of homage to the 1982 picture, for you after the break, but you'll want to hit the source link to start post-processing it with the finest browser-based video editor yet.
ScreenSteps 2.8.7, documentation gets social
ScreenSteps, an app for creating screen-based documentation and a TUAW favorite, has just released a pretty big update and a brand-new social document service called ScreenSteps.me. The desktop update includes, among other improvements, a totally-rewritten screen capture tool that makes the documentation process quite a bit simpler. The coolest part of the new screen capture tool is the ability to remember snapshot positions. If you're repeatedly taking screenshots of the same window or the same section of a web page, you can grab the exact same part of your screen each time. This not only saves time, it gives your documentation more uniform images, improving clarity. Among the other new features is a blur tool in the image editor, perfect for obscuring email addresses and personal information in screenshots. Also, ScreenSteps has added Zendesk as a service with which it can directly interface (the list already included WordPress, MindTouch, Confluence and others). ScreenSteps.me, in beta right now, is a social document service, similar to Skitch.com or Jing, but for documentation. Send a lesson directly from the desktop application and get back a short url and/or styled or unstyled HTML, ready for pasting on the web. It's simple, and it's great for everything from sharing on Twitter to posting to Basecamp or HTML newsletters. You can sign up for the ScreenSteps.me beta right now for free, and you can download a 14-day trial of ScreenSteps Desktop at Blue Mango. A license for the desktop version (good for both Mac and Windows) is US$39.95 for standard, US$79.95 for the Pro version (version comparison). Academic pricing is available.
CSS motion magic with Sencha Animator preview
We've seen some cool tricks done with CSS3 in recent months. From iOS icons made in pure CSS to the OS X Dock animation that Sam mentioned this week, people are embracing the possibilities. It is, however, only a certain breed of developer that has the mindset and the patience to build these kinds of showcase pieces. For most of us, the idea of recreating even basic Flash feats -- such as splash screens and banner ads -- in CSS3 is a bit daunting. The future is looking bright, though: Sencha has announced a new tool to take the pain out of complex CSS3 animations. Sencha Animator is currently available as a Developer Preview running on the Mac, Windows or Linux. It's buggy as heck, but showcases an intelligent interface with timeline-based animations across all of the available properties. It's functional enough to really get into, but there's enough missing (or broken) to keep you wishing for the next update. Nonetheless, it's very exciting; the tech of the future isn't looking like a step backward anymore1. The app will come in two editions, Standard and Ad Builder. The current developer preview is of the Standard Edition, which apparently has all the bells and whistles, it just lacks the license to use it for ad creation. Interested ad agencies will have to contact Sencha directly to talk licensing. As far as pricing on the standard edition, Sencha says only that they're "pricing standard edition like a traditional design tool: on a per user basis in the low hundreds of dollars." You need a Sencha Forum membership to use the preview, but it's free to try after you activate your account. If you're curious about the tools that are going to shape the web of tomorrow, you can check out the demos and give it a try yourself. 1 I'm choosing not to use this post as a platform to debate the merits of Flash. The fact is that Flash makes it relatively simple to create rich content for platforms that support it, and at the moment HTML5/CSS3 lack the feature set and tools that Adobe/Macromedia have developed over the last decade. I'll leave it at that.
Opera gets serious about TV widget content, releases CDK
Norwegian software company Opera first waded into the TV app game when they released an SDK for widgets back in 2008. Now they've taken another serious step by releasing the Opera Devices Content Development Kit to help HTML, CSS, XML, and Javascript savvy developers create content using technologies they're already versed in. For those who don't live and breathe in The Matrix, Opera's hope is to lower the barriers of entry for bringing online content into the living room, since the software eliminates the need for physical devices to test on. It also supports W3C, HbbTV (Hybrid Broadcast Broadband TV), OIPF, and CEA-2014 specifications -- meaning it's capable of running on a wide range of hardware from variety of manufacturers. For more details read the PR after the break or watch Opera's video from 2009 on the subject, which unfortunately isn't on par with its previous potato boiling jabs at Google. Still, learning about "Oprah's" new widgets makes it definitely worth a watch.
Firefox Tab Candy groups your tabs, but that's just for starters (video)
Although Firefox already has a strong selection of tab management helpers like TooManyTabs, which gives you extra rows and memory-preserving options, or Tree Style Tab, which shifts things to a tree-based vertical menu, Mozilla has rolled up its scaly sleeves and decided to rethink the whole thing. Tab Candy starts off much like Safari's TabExposé, by showing you all the tabs you currently have open in thumbnail form, but from there it allows you to organize them into separate groups (with sub-groups promised for the future), which then act in very much the same way as opening a new Firefox window. Yes, it's folders within the browser, and it's all based on good old fashioned HTML, CSS and JavaScript, so no pesky additional downloads will be required once this Alpha-stage code gets added to Firefox's official release. If you want to give it an early spin, hit the source link below, but don't neglect the video after the break to see what else Mozilla is thinking of cooking up with Tab Candy.
Icons and World Clock created with CSS3 magic, courtesy of Webkit
Recent versions of Webkit, the browser engine that Safari and Chrome are based on, have allowed for extensive use of CSS3, as well as some proprietary CSS tricks. The result has been some very innovative art created entirely using CSS. Take, for example, Louis Harboe's set of iOS icons created using some CSS3 properties such as rounded corners, shadows and gradients (among others). The finished set is stunning. Of course, the demo will only display properly in a compatible browser, so if you're using something other than an up-to-date version of Safari or Chrome (or Webkit, of course), you won't see much. If you're not a web designer, this might not look like a big deal. What you're seeing, though, are images created entirely without images; they're built using nothing but code that defines shapes, gradients, colors, etc. You can hit View Source on the page to see the code that defines these things -- it's nothing but divs and the CSS to color and shape them. If you are using a browser that can render these designs, you'll also want to check out Jeff Batterton's iPhone world clock, rendered in pure CSS3. Considering the rectangles that CSS has left designers stuck in for years, this is some pretty exciting stuff. I can still recall the first wave of people doing really innovative tricks with CSS2, and the push that they provided to the general web design community. I hope to see web design taking great strides forward as these new standards become accessible to an increasingly wider range of the web-surfing public. Modern browsers are pushing new limits ... we just have to wait for certain other browsers to finally be put to rest.
Symbian^3 web app development tools come out of beta, aim for standardized simplicity
Has the Nokia N8 made a Symbian^3 believer out of you? If so, you'll be glad to know the beta tag has been peeled off the web application development tools for the platform, which -- according to Executive Director Lee Williams -- provide "an ideal entry point" for coders of all skill levels. This is because the primary languages spoken are HTML, CSS and JavaScript, familiar to almost anyone who's tried to create for the web, and with just a little extra JavaScript exercise, you're promised access to the phone's contacts, camera, accelerometer, and location. It sounds all kinds of refreshing, but the usefulness of this tool set and the entire environment will be determined by what people produce with it -- and to that end we've provided you with a link to the downloads page (Windows, Mac and Linux users are all being served) where you can get your Symbian dev career started in earnest.
AdLib: Apple's secret web app weapon
MobileCrunch noticed something interesting about the iPad User Guide hidden in the iPad Safari's bookmarks. It's a web app, but it doesn't feel like a web app -- the views scroll independently and smoothly, "clicking" is exact, and the whole thing runs much more like a native iPad app than anything web app developers have been able to put together yet. Why? Apple's got a secret -- Done21 is calling it "AdLib," after a file found somewhere in the source code, and apparently it's a library that connects UIKit to HTML, CSS, and Javascript. It's a go-between framework that has no documentation in the code at all, and uses practically unlabeled variables. In other words, Apple is putting their own magic into web apps, and while the code is there to see, they aren't interested in sharing. At this point, it's not much more than a novelty -- Apple obviously is depending on Xcode and the iPhone OS SDK for developing iPad and iPhone applications, and there's no need for them to share the code magic that's making this happen. But it's interesting when you think of the original emphasis that Apple placed on web apps way back in the early iPhone days. If all of those web apps we had were as well-coded and responsive as this -- in other words, if they'd actually had ties into the UI -- then maybe web apps would have been just enough.
Firefox 3.6 Release Candidate now available
Mozilla has dropped a Firefox 3.6 release candidate which you can download and install it now if you want to try the browser's latest and greatest. It's a big, significant update, including many bug fixes, built-in Persona support, fullscreen for open native video, and an improved automatic form fill. For developers, there's even more updates, including support for the HTML5 File API, and new features in CSS and DOM as well. Despite the recent emergence of Chrome and the continuing popularity of Safari, Firefox remains my browser of choice. It's good to see that the latest release pushes the envelope. Of course, it's fine to wait for the official version, but if you want to get your hands on the new features right away, here's your chance. Firefox 3.6 Release Candidate is a free download as always.
Palm: webOS speed fix in the 'immediate future'
Palm device owners have little to complain about when it comes to webOS; not after enduring Garnet and empty Access promises for so long. Still, that OS which relies so heavily upon web technologies like HTML 5, JavaScript, and CSS can be surprisingly sluggish when compared to other smartphone OSes. Now we have a hint as to why thanks to Palm's Ben Galbraith and Dion Almae who made an interesting admission Tuesday related to the Pre's UI latency compared to the iPhone 3GS -- a phone based on the same ARM architecture. According to the duo, "the path to the GPU didn't exist" in webOS, something that will be solved in the "immediate future" using CSS transforms to modify visual elements thus freeing-up CPU cycles for other tasks. Hmm, immediate future sure sounds like a webOS update to accompany the Palm Pixi release on November 15th.
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.
CEPro breaks down Real and Kaleidescape cases, uncovers more questions
It's been a rough week for DVD copying services from Real and Kaleidescape, and public understanding of the whole DVD copying mess hasn't been spared. People like to watch DVDs and lawyers like to get paid, however, so we're willing to bet there's more to come. CEPro has put together a breakdown of the issues at hand, which not only makes for some good reading but also shows just how far from any real clarity we are. Whether it's legal to make bit-for-bit copies, but illegal to view them; legal to use copying tools, but illegal to produce them; or just plain mean to do something Hollywood doesn't want you to, consumers are going to push for media convenience. We're still hoping Blu-ray's Managed Copy gives us enough wiggle room on our HD digital handcuffs, but sadly, it seems like DVD fans can pick between taking up residence in legal limbo while the courts struggle to catch up with tech or just strip the CSS from discs and get on with their lives.
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.
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.
RealDVD ripping software heads to court, fair use advocates on pins and needles
Let's face it -- quite a lot is resting on the outcome of this case. For months now, RealNetworks has been unable to legally sell its RealDVD movie ripping software after a court issued a temporary restraining order that remains valid until it's decided if the application violates the DMCA (Digital Millennium Copyright Act). Now, the software is finally having its day in court, and the outcome could shape the future of the DVD player (for better or worse). You see, Real has already assembled a prototype Facet device that hums along on Linux; essentially, this DVD playing machine would sell for around $300 and could store up to 70 movies internally. On the surface, this sounds entirely like a poor man's Kaleidescape, but only time will tell if The Man agrees. Cross your fingers folks, we get the feeling fair use advocates are going to need the luck.
Sonic shoves Qflix DVD burners into more Dell desktops
We know you're struggling to believe your eyes, but those Qflix burners actually are still hanging around. For those who missed all the action last year, these devices enable users to download a DRM-laced film onto their PC and burn it onto a specially-keyed DVD for playback. In other words, you can forget about toasting flicks to that dusty stack of DVD-Rs you've got laying around from late '05. For whatever reason, Dell has seen fit to extend its partnership with Sonic Solutions by offering internal Qflix drives on the Studio XPS Desktop, Studio XPS 435, Studio Desktop and Studio Slim Desktop. The wild part? Its actually charging more for having you clean out its inventory.
