WebDesign
Latest
Google's search engine now converts color values
There are plenty of nerdy things that Google's search engine can do, and the latest is a peach if you're a graphic designer. If you type in "RGB to Hex," you'll be shown a color converter that'll let you pick a shade and get the RBG and Hex values for both. In addition, you can hit the Show Color Values toggle and get a breakdown of the HSV, HSL and CMYK counts for those shades. Yes, it's not the most useful feature in the world, but it'll save you having to open up Photoshop just to get a color value for your web design project.
Healthcare.gov revamp promises simpler sign-ups
It's almost universally accepted that Healthcare.gov's launch was an absolute nightmare. The next iteration may very well not be, thanks to the new blood that's been working tirelessly on a redesign since last November. As Wired tells it, once the revamped site launches this November 15th, it will employ something that was missing the first go 'round at all levels: common sense. That means the site will use Amazon's cloud services as a back-end (just like Netflix and Instagram), which should help avoid the black-outs from overloaded servers version 1.0 suffered. What's more, the sign-in system has been vastly simplified. Instead of using a login requiring a special character like an underscore or a dollar sign, your email address acts as a username. A new option to sample plans without inputting any personal info will be implemented as well, and the entire process has been optimized for those scoping out plans on a mobile device. If you weren't among the initial 5.4 million insured under the Affordable Care Act, this fall might be the time to start a new application. [Image credit: Alex E. Proimos/Flickr]
Adobe has a new Edge in its HTML5 tools
Adobe has come a long way in more than three decades as a company, and while a lot of attention lately has been given to security breaches and its subscription model, there is a lot of innovation going on behind the scenes. Last month, I had the chance to sit down with Sarah Hunt, who works on Adobe Edge tools and services, one of Adobe's newest parts of its multimedia-oriented software. Edge is a collection of HTML5-based tools that help designers and developers work with the web. Competing software that fall into this category includes Tumult's Hype and Sencha Animator. I have a subscription to Adobe's Creative Cloud, so I also took the chance to take a look at the software myself. Design If you're familiar with the current design of Adobe Photoshop, then you will be right at home with the tools in Edge. Everything is laid out in palettes on a dark background. The bulk of your work takes place in Edge Animate, and at first it's a bit overwhelming to have all this information in front of you at once. Coming from Hype, it was a bit jarring to go from a sparse environment to sudden clutter. But, as I explain below, having all this information works for the program. Adobe Edge Animate also has a template gallery and you can save templates as well. Use One of the things I love about Adobe Edge Animate are the tutorials. Upon first launch, you're given the chance to go through a series of step-by-step lessons to help you get comfortable with the software. Even if you're familiar with a competitor's software, it's a fantastic resource. For those new to this sort of work in general, it can be a godsend. There's plenty of books out there covering the same material, but this is all baked into the software. I would love to see similar tutorials come to Photoshop, InDesign and Illustrator - especially Illustrator. The tutorials are very easy and cover creating objects, basic animation, resizing, extending, reuse and motion paths. Once you're done with a design in Edge Animate, you can take it out to Edge Inspect to test on mobile devices in realtime. You can also bring it to Edge Reflow, which is a responsive design tool or tinker with the code in Edge Code, a commercial version of my favorite open-source code editor, Brackets. My test project was done through one of the tutorials. Following the steps, I completed a basic keyframe animation of bouncing letters, using the little toggles in the properties panel to control the keyframes. I enjoyed not having to puzzle over a record button or with the timeline for these, which was the steepest part of my learning curve with Hype. I also liked not having to flip through an inspector for other data. I caught on with Edge Animate a lot faster than I did with Hype, even though my learning curve with it was fairly quick as well. The software titles share enough similarities in basic tasks that if you go into Edge Animate with any knowledge of its competitors or Flash, it won't be hard to use. To change touch and swipe events, you need to right click on the object and select the action. I really wish there was an additional panel for this. One of Hype's features that I loved was the ability to see what browsers and devices your project was compatible with while you're working on it, something I would love to see here. Hunt acknowledged that the Edge tools does encourage people to do some coding. But, if you're familiar with timelines, there's a lot you can do with Edge. As a former print designer, Edge is built in such as way that I didn't feel intimated by using those skills to create a web product. While there is some coding involved, features such as motion paths are nearly impossible to hand-code and are best served by products such as this. Hunt said that the developers wanted to make people be as creative as possible, with as much UI help as possible. "Do you have three hours?" Hunt asked when I asked what was in the works. "There's so many things that we want to do." One of the active projects is introducing audio storytelling to Adobe Edge Animate. Other planned features include integration with InDesign and expanding it to chart-building, article linking, ePub3 support and other features such as drawing, tweening and video. Conclusion The Adobe Edge tools and services are part of an Adobe Creative Cloud subscription, and if you have this subscription, then take advantage of it. The Edge tools are extremely easy-to-use, and there is a lot of positive creative energy and excitement coming from its development team. As working with interactive and responsive design becomes more prevalent, these HTML5-based tools are going to become far more important than my beloved InDesign. If you want to try the Adobe Edge tools, there's a trial available on Adobe's wesbite. A monthly subscription is $49.99 and has access to all of Adobe's software. You can subscribe to just Adobe Edge Animate for $19.99 a month.
One HTML novice, a Mac and a website dream
I have a secret. I can't write HTML to save my life. For most people, that would be okay. But as a tech journalist, it's a bit embarrassing not to have fluency with the language that underlies the World Wide Web. My lack of HTML savvy is one reason why I loved Apple's old iWeb Mac web-composition app so much. Sure, the sites were a bit formulaic and clunky, but for someone who wanted more than a Facebook page, it was great. But when MobileMe's one-click hosting for iWeb went away, so did my site. [For readers who found themselves in the same hostless boat, Steve's tips on replacing the iWeb / MobileMe team are still valuable. –Ed.] But no longer. Though I still haven't learned HTML, I've decided I'm going to make the effort to create a new website based on the current crop of tools available on the Mac. Each month, I'll be using a different tool (be it an app, a Mac-only website builder or a hacked-together website from apps that aren't really meant to build websites). Along the way, I'll report on my journey, and I hope to get lots of feedback from those of you who were in a similar situation and tried different things. To start with, I'm going to try to design a version of my site using RealMac's capable RapidWeaver app and some pretty slick themes from designer Michael David. Next month, I'll report on how that went and show you my results; then I'll try to build the same site using different tools. In the end, I'll be able to know which Mac web tools are the best for folks like me, and which only say they are. You can follow all the posts in the series using our tag for My Mac Site. With all this in mind, I'd love to get your input on what you've found useful. Feel free to leave your comments below or tweet your advice to @michaelgrothaus.
W3C teams with Apple, Google, Mozilla on WebPlatform, a guide to building the open web (video)
The World Wide Web Consortium might just be the United Nations of web development, as it's bringing together some frequent enemies to fight for a common cause through WebPlatform.org. The collaboration will see Adobe, Apple, Facebook, Google, HP, Microsoft, Mozilla, Nokia and Opera pool educational resources to create a comprehensive, frequently updated guide to creating HTML5 and other content for the open web. The companies' instructional oversight is just the start, however -- visitors will have chats and forums to devise their own solutions, and they'll even have a better than usual chance at influencing mid-development web standards. It may be some time before we'll see the first fruits of the organization's work, but we're already happy to see technology companies set aside some of their differences.
Dude recreates first-gen iPod in-browser, won't put 1,000 songs in your pocket
Here's a bit of web fun to liven up your weekend: a digital artist by the name of Pritesh Desai has recreated a fully functional first-generation iPod that you can play directly in your browser. In remembrance of Steve Jobs, Desai built the faux iPod using HTML5, CSS3, and a touch of jQuery. You can drag the click wheel around just like with the real deal, change the volume, hit play / pause and even skip tracks. Especially nice is the addition of Extras like the Clock and the Calendar. Unfortunately, you won't be able to play any of your own tunes, but Desai had compiled a list of Creative Commons songs, so you can see how the player works. The next step is for someone to fill this up with hits of the early aughts ("Last Nite" by The Strokes, perhaps?) so you can truly travel back in time to the heydays of Windows XP and the Enron scandal.
Adobe Edge swells to include Tools & Services, streamlines the designer web
Adobe really wants web designers to kick things up a notch. Not satisfied with where Edge has gone so far, it just released a full-fledged Edge Tools & Services suite to cover the bases for polished desktop and mobile pages on most any modern platform. Motion tool Edge Animate (formerly Edge Preview), automated previewing tool Edge Inspect (formerly Shadow) and mobile app packager PhoneGap Build have all arrived in the suite as version 1.0 releases, and come with both Edge Web Fonts as well as TypeKit to spruce up text. A pair of pre-release utilities, Edge Code (Brackets) and Edge Reflow, are also joining the group to tackle the nitty-gritty of editing web code and layouts. Any of the apps will readily cooperate with third-party software, although they won't always be cheap: while most of the Edge suite is free to use in at least a basic form as long as you have a Creative Cloud membership at any level, Edge Animate is only free during its initial run and should eventually cost either $15 per month or $499 in a one-time sale. For pros that want to burnish their corner of the web to a shine, the result just might be worth the expense.
Twitter offers embeddable timeline tool, gives web designers new toy to play with
Until now, the only way for folks to see someone's tweets on the web was to grab screenshots or head directly to their Twitter page. No more. The microblogging platform just launched a new tool that lets folks embed Twitter timelines into any website, meaning you can have your 140-character musings right alongside your long-winded blog posts. Plus, you can interact with those tweets as you would at twitter.com, following and replying directly from the module. Interested? Head on down to the Twitter Developers source link below to learn how the embedding works.
Flickr launches prettified 'liquid' layout, brings high-resolution eye candy to the forefront
After refreshing the uploading tool (and throwing in some better editing functions), Flickr's decided to work on its looks. Its latest design update will now show a high-resolution version directly from a picture's main page. The size will also adjust itself to the resolution and size of your screen -- that's the fluid part of it -- avoid any nasty upscaling business. Hit up your own Flickr gallery to see the new design in action and expect more changes in the near future -- the developers are promising more to come.
Adobe Muse is ready to let you design websites without the coding headaches for $15 a month
If you've been looking to get that web project off the ground but despise the idea of coding it, Adobe's recently announced web design tool has just landed. Muse, the program that allows you to design websites without having to get your hands dirty with HTML5 is now available. The kit behaves more like a layout program (like InDesign) instead of a web publishing / programming tool, allowing those who are more design-minded to feel right at home. As you might expect, the software is available with an annual $49.99 per month Creative Cloud subscription alongside CS6 heavyweights like Photoshop and Illustrator. If Muse is all you're after, you can snag it alone for a $24.99 month-to-month fee or $14.99 for a twelve-month commitment. Need to see it in action before you open your wallet? No worries. Hit the coverage link below for a look at what the application can do.
Ten WYSIWYG HTML editors for Mac OS X (Updated)
OK, I'm sorry if I have been stuck on the theme of website creation lately, but the TUAW inboxes have been inundated with emails from readers who are concerned about the probable demise of iWeb. One of our readers, Mickey, wrote to say that "I'm a former Mac user who was forced to switch to PC and has since come back to the Mac. In the interim, however, I have created a personal webpage (mostly for family). I've got hosting and a domain and all that, and I have coded it in Microsoft FrontPage. The way I see it, I have two options 1) use Boot Camp or VMWare Fusion to continue writing the webpage in FrontPage or 2) find a Mac program that might be at least relatively amenable to importing the HTML code from FrontPage." Mickey wanted to redesign his website in iWeb, but had concerns about the future viability of the app. For that reason, and the fact that being able to edit his existing website on the Mac would keep him from having to do a complete reboot of the site, I figured he needed a Mac replacement for FrontPage -- a Windows application that has been abandoned by Microsoft. I've compiled a list of ten possible candidates to replace FrontPage with lovely Mac goodness. FrontPage was one of the first WYSIWYG (What You See Is What You Get) website tools that allowed you to design a page by moving elements around while it handled writing the HTML code behind the scenes. If you're looking into a way to move to Mac but still need to keep up a website that you originally created in the dreaded Land of Windows, then you'll find this list of Mac HTML editors to be very useful. 1) Panic Coda (http://www.panic.com). Coda probably has a lot more sophistication than most casual website designers need, but it will read existing HTML files and let you also add CSS style sheets. There's a free trial download available on the Panic website. Update: Several astute commenters pointed out that Coda is not a WYSIWYG editor. Instead, it's a full-powered text and code editor with the ability to display a preview of your edited work. 2) Kompozer (http://www.kompozer.net). This is a branch of the abandoned Nvu Open Source HTML editor that has been updated fairly regularly and is free. Never used it, so I can't vouch for it. The screenshot below is for the Windows version, but the user interface for the Mac edition is similar. 3) Flux (http://theescapers.com). Flux (£69.95) is a fairly powerful CSS / Javascript / HTML editor, with a free trial download. Once again, I've never used it -- but if you want to update your site into HTML5 goodness for the future, it's probably a good way to go. Potential Flux users shouldn't be worried if they don't know much about CSS, as the application is a wonderful way to get your feet wet in terms of style sheets. There's a very thorough Quick Start Guide available for download as well. 4) W3C Amaya (http://www.w3.org/Amaya/User/BinDist.html) If you want a tool that will let you both browse and author web pages, the W3C (World Wide Web Consortium) has a freebie editor available for download. For former FrontPage users, this app seems appropriately low-key and quite simple to use. 5) Mozilla SeaMonkey (http://www.seamonkey-project.org/) Made by the folks who created Firefox, SeaMonkey is not only an HTML editor, but has a lot of built-in Internet tools including a web feed reader, IRC chat client, etc. Update: The most recent version of SeaMonkey was delivered only five days ago. 6) Adobe Contribute (http://www.adobe.com/products/contribute.html) Back in the early 2000s, I had several sites that had been developed in FrontPage and needed to be maintained. Macromedia Contribute was a powerful tool, although sometimes frustrating. It's $199, and might be a bit of overkill for many casual users in terms of price and capability. 7) Freeway Express (http://www.softpress.com/products/freewayexpress/) Freeway Express is a wonderful Mac HTML editor with a surprisingly complete feature set. It's $69 for this low-end version, or you can upgrade to the even more powerful Freeway Pro ($229) if you need more capabilty. Trial versions of each are available for download. 8) Adobe Dreamweaver (http://www.adobe.com/products/dreamweaver.html) This is the design tool for professionals. It has a steep learning curve and an equally steep price tag ($399), but for a top-of-the-line web design package, Dreamweaver is the choice. 9) Quanta Gold (http://www.thekompany.com/products/quanta/) Considering that the web page for this app shows that it is now "Mac OS X ready", it looks like it hasn't been updated for a long, long time. There is a free demo version available for download, and the price if you decide to buy it is $39.95. 10) BlueGriffon (http://www.bluegriffon.org/) A free WYSIWYG content editor based on Mozilla's Gecko rendering engine. Free is always good! Update: Before anyone asks where RapidWeaver and Sandvox are, note that although they do have the capability to edit RAW HTML, they're both predominantly used to design new websites from scratch using built-in templates and then maintain those sites. Those two solutions were covered in my previous post, "Ten ways to replace iWeb and MobileMe hosting." Also, you may wish to look at several other editors, some of which aren't really WYSIWYG, but are favorites of some of the bloggers here at TUAW: Hype sells for $29.99 in the Mac App Store and is an amazing HTML5 WYSIWYG editor. Created by two ex-Apple engineers, it's gaining rave reviews and can be used to create animated websites. HyperEdit ($9.99) is another package from the Hype developers. It's a code and text editor in the same vein as Coda. Very similar to HyperEdit is Taco HTML Edit ($24.99), which has a component library that can add amazing features to an HTML document. MacRabbit's Espresso was a huge miss on my part. It's also a code editor more than a true WYSIWYG tool, and it's available from the MacRabbit website for $79.99. As usual, if you have a favorite Mac WYSIWYG HTML editor and wish to let other readers in on your personal choice, leave a comment below. Good luck, Mickey!
Ten ways to replace iWeb and MobileMe hosting
Yesterday, we reported on a rumor that Apple's website creation software, iWeb, is about a year away from obsolescence, along with MobileMe's hosting of iWeb sites. An iWeb user allegedly sent Apple CEO Steve Jobs an email asking if he should start looking for another website builder and a new host, and Jobs provided one of his patented terse replies: "Yep." In my post about this, I mentioned some alternatives that TUAW readers might want to look at. Here I'm going to take a more detailed look at several easy website creation tools and hosting alternatives, so that you can start making your plans to move away from iWeb and MobileMe. I will not be covering professional web design tools in this post, as iWeb is designed for easy creation of sites. Instead, all of the suggestions I'll make here are aimed at the folks who just want to create a relatively good-looking website quickly, without a lot of training. iWeb hosting via FTP If you want to keep using iWeb for a while but would like to move your iWeb site away from MobileMe hosting, then get yourself a domain name, get a web host, and start publishing via FTP. iWeb 3 made it possible to publish your website on a traditional web host. You set up the File Transfer Protocol (FTP) settings in iWeb's site publishing settings, and pressing the Publish Site button takes care of uploading graphics, text, and any changed pages to the host. Just about every major and minor web hosting provider supports FTP. Note that some of the standard iWeb features, including password protection, blog and photo comments, blog search and the hit counter don't work when you use FTP for publishing. The great thing about this solution is that you can just change the host for your website, point iWeb to the new host, and publish your same old site to the new location. Not much is lost in translation, and you won't need to go through a lot of redesign work. Unfortunately, iWeb probably won't be supported in the future and may eventually stop working with future releases of Mac OS X. The other negative? You'll need to pay for web hosting from one of the many hosting providers. You can also use your own Mac as a web server (no matter how old), but that's the subject of another post... iWeb hosting on Dropbox If you have a lightly-used iWeb site and don't feel like spending money on web hosting, consider getting a free Dropbox account and hosting your iWeb site there. I wrote some instructions on how to use Dropbox as your iWeb host a while back, so check them out. Advantages? You can continue using iWeb for a while longer. Disadvantages? Dropbox isn't designed for large-traffic web hosting, and might shut you down if your site is wildly popular. Likewise, if you have a huge and complex iWeb site with a lot of photos, you might go over the free 2 GB free storage limit and have to start paying for web hosting. Facebook Do you just want to have a "site" where you can post pictures and videos, let your friends know what you're doing, and get comments on your content? Then you may just want to move over to Facebook. It's free, and most of your friends and relatives are probably already using it. Facebook is fine for the new material you create, but how do you move your old posts to the land of Zuckerberg? It's probably not going to work very well. I can envision some sort of long session involving copying and pasting text to Facebook, but with the constantly changing wall of content on Facebook, your old content is going to be wiped off the wall fairly soon. If you have a lot of your iPhoto pics on your iWeb site, then you're in luck. Just open up iPhoto, put all of those iPhoto pics into an album, and then use Share > Facebook to move the photos into a Facebook album. What if you're looking for a more personal and unique site? That's where my next suggestions come in. WordPress / WordPress.com When I want to put a website or blog together quickly, I use WordPress. This blogging tool (content management system) has been around for years, and it is wildly popular. Over 14% of the top 1 million websites were created in WordPress, and the most recent major release of WordPress had been downloaded over 32.5 million times by February of 2011. There's even a professional version, WordPress VIP, which our sister site TechCrunch uses as its underlying CMS. WordPress is not a Mac application; rather, it is an AMP (Apache / MySQL / PHP) application that runs on a server (or on your Mac). You log into a dashboard from your favorite web browser, add content, change the look and feel of the site with themes and plugins, and then publish your changes. There's no need, as in iWeb, to make changes locally and then wait for your modifications to be uploaded to a server. For beginning WordPress bloggers, I recommend a free WordPress.com account. It's a great way to learn how WordPress works, all your content can be migrated to another WordPress host at a later date if necessary, and the fairly new step-by-step tutorials are an incredible way to learn all about this powerful content management system. If you decide to head out on your own, most major web hosting providers have one-click installers for WordPress. In other words, you sign up for a hosting plan, then say that you want WordPress installed. A few minutes later, you get an email from your WordPress site saying that you need to log in and create an administrative account. Do that, and you're on your way to blogging superstardom. Among the hosting providers that provide one-click installations of WordPress are Bluehost, DreamHost, MediaTemple, and GoDaddy. Note that you're going to have to pay for a hosting plan, so maybe the $99 you'll be saving every year by not renewing MobileMe will pay for your web hosting. WordPress is remarkably powerful, and a vast developer community is constantly creating new plugins to add functionality to the tool and designing new themes to make pages that are unique and beautiful. If you can't find a theme to your liking, there's always Artisteer, an app that you can use to easily create your own custom theme. iWeb users who might have set up a small shop using something like Google Checkout or PayPal buttons can actually get a real web commerce site going with WordPress. There are several plugins now available for WordPress that integrate with shopping cart services like FoxyCart. Finally, WordPress is an excellent way to get familiar with most content management systems. For anyone who has aspirations to become a professional blogger, starting with WordPress can get you familiar with the tools and workflow that you'll need to move on up the ladder. Tumblr Want a very easy to use and free way to host a website? Tumblr's a good start. You can sign up for free in minutes and be posting immediately after that. There's a selection of Tumblr themes -- none of which I found to my liking -- that you can choose from, and all you need to do to post is have a web browser or use an iOS app like Tumblr (Free) or QuickTumblr ($2.99, for iPad). As you can see from the Tumblr dashboard screenshot above, once you've logged into your account you have a choice of what you can post. Each one of these buttons leads to a data entry page that you can use to post a specific type of content. On Tumblr, you can create some social engagement by choosing other tumblelogs to follow, or by liking/favoriting posts which you can quote or reblog on your own site. Tumblr's bookmarklet and email posting tools are pretty snazzy, and they make it easy to clip and share popular links or videos. You can call in posts from your cellphone, if you like blogging in audio format. We even have a TUAW Tumblr for material that might not be suitable for the main site. I personally don't like the vibe or feel of Tumblr, which is why I use the next tool for some personal posting. Posterous The only thing you need to start a Posterous blog is an email account. Why? Because you can actually do a lot of your posting by just sending emails to a special Posterous address. You can also use the web-based editor with Safari, Firefox, Chrome, or any other modern web browser to update your information. Posterous is completely free, and there's also a free iPhone app for posting on the run. I've been using Posterous on and off for three years for my personal blog, and I really like it. There are some great themes -- the current one I'm using uses a grid of fifteen photos to show the last fifteen posts, and it works very well on an iPad. Speaking of the iPad, I recently found out that I can use the handy Writing Kit app ($4.99) to write posts in Markdown and then email 'em to Posterous for publishing. It also has some of the same posting options as Tumblr, and it offers a Groups feature for collaboration & sharing among friends or family. [Since it's graduation season, don't miss the Posterous "instant collaborative photo album" trick, which leverages the geolocation features of the Posterous iPhone app to cluster pictures around an event. So slick. –Ed.] As far as I'm concerned, Posterous is the best for free hosting of personal websites. It's incredibly flexible, drop-dead simple to use (I mean, how hard is it to send an email?), it has links to and from the social networking world, offers great looking themes, supports your own private domain names, and never seems to have any downtime. However, for small business sites, which are one of the other main uses for iWeb and MobileMe hosting, it's really not appropriate. Squarespace Businesses looking for a way to make beautiful sites with associated hosting should take a peek at Squarespace. This is a combination of a typographically-friendly web-based design tool and hosting that produces some great-looking sites. As with MobileMe hosting, you can have Squarespace host your own domain, and the hosting prices are relatively low -- $144 to $432 per year depending on how popular your site is, how many editors you want, and how many big business features you need. As with WordPress, Squarespace is easily integrated with shopping cart services. And when you see small business sites like this or this, you can see how professional and compelling Squarespace websites can be. Drupal / Drupal Gardens WordPress probably powers more websites and blogs than any other content management system, but Drupal is another hugely popular tool. It's an open source system like WordPress, meaning that the software is written and supported by a community, and the base files are free for the copying. Drupal powers the websites for The Economist, Examiner.com, and even the White House, so you can see that it's a professional system. For those who are making the move from iWeb and MobileMe hosting, Drupal Gardens might be a good place to start. It's a hosted system similar to WordPress.com and offers a lot of the power of Drupal 7. It's free for low-bandwidth use, with paid subscriptions for more users, more traffic, and support. Drupal sites can be extremely idiosyncratic in style, and the content management system has built-in features like forums, polls, galleries, and more. The free account is a great way to get your feet wet in the ocean of Drupal, and you can then either move to a paid subscription or put a Drupal installation on another host and move your content. RapidWeaver I've talked a lot about web-based blogging tools here, but what about easy Mac-based website tools? RapidWeaver ($59.99) from Realmac Software is a favorite of a lot of Mac users. In many ways, RapidWeaver is similar to iWeb. You create a site using a template, add pages, drop in addons (like widgets in iWeb), and then publish your site. While you're working on your content, you can toggle between an editing mode and a view of the site as it will look when it's published -- that's helpful for making sure that there are no surprises when the publish button is pushed. If you use RapidWeaver, you'll need to have a web hosting provider. The app supports FTP publishing, so just about any web hosting provider will be able to accommodate your site. Realmac has a store for RapidWeaver themes, plug-ins, and another feature called Stacks. Themes define the look and feel of the site, plug-ins provide extended capabilities like forms or ecommerce, and stacks are another way of including features that are not built into the basic app. There's a free trial available from RealMac before you buy RapidWeaver from the Mac App Store or direct from the company. Sandvox Another venerable web creation app for Mac is Sandvox 2 ($77) from Karelia Software. For a website creation and publishing experience that is close to that of iWeb, but with a lot more features and flexibility, Sandvox is probably the way to go. Even the user interface for Sandvox looks a lot like iWeb. As with both iWeb and RapidWeaver, there are a variety of themes included, many of which come in more than one choice of color. Unlike with iWeb, you can edit the raw HTML of your website and even run it through the W3C Markup Validation Service from within the app. Sandvox includes a long list of objects (essentially the same as iWeb widgets or RapidWeaver plug-ins). Things like Amazon lists (for use with an Amazon Associates account), a built-in Facebook "Like" button, Flickr thumbnails, or a built-in Twitter feed are easy to drag right into a Sandvox page. Once again, you'll need to get web hosting from any of the many providers out there. Sandvox supports publishing not only through FTP and SFTP, but WebDAV as well. You can download the app for a free trial and see if Sandvox is for you. Conclusion These are just ten of the possible web creation and hosting solutions that iWeb users have available to them. If you're currently hosting an iWeb site on MobileMe, it's a perfect time to start thinking about what you'll do in the post-MobileMe world. Whether you choose to continue using iWeb for a while and just host your site elsewhere, or decide to go with another tool or a web-based content management system, there's no better time to begin planning your website redesign or move. Keep in mind, though, before you tear up every bit of your carefully crafted iWeb workflow: it is still June of 2011, and there will be a full year before the MobileMe servers go dark in June of 2012. It's likely that we'll be hearing something more from Apple with regard to iWeb site migration around the time of the iCloud launch later this year. After all, as Fortune points out, this isn't the first time that an Apple web publishing tool has been kicked to the curb -- .Mac HomePage got the boot in July of 2009. I did not include professional-level tools like Adobe Dreamweaver in this list, since we wanted to show tools that anyone who is well-versed in the use of iWeb could easily use. If you favor other easy-to-use web creation and publishing tools, let us know in the comments.
RapidWeaver 5.0: TUAW exclusive first look and promo code giveaway
RapidWeaver, the easy-to-use and incredibly powerful website creation tool from Realmac Software, has just been updated to version 5.0. I had a sneak peek at the Mac OS X app earlier this week, and I'd like to share the experience with you. From what I've seen in a few days of working with the application, a lot of RapidWeaver has undergone a complete rewrite. For example, the resource system that manages website resources like PDFs, images and ZIP archives was previously available only for individual pages. Now, they're available in a sidebar alongside of pages for easy access. It's a simple drag and drop operation to add resources, whether they're images, movies or sound files. There's a QuickLook button for seeing those resources close up as well. RapidWeaver 5 has new sitemap plug-ins that generate HTML sitemaps for projects, as well as an XML sitemap that details every page in a project. The XML sitemap is submitted to the appropriate search engines when a site is published. Realmac has added six new themes to the built-in theme library, bringing the total number of included themes up to 47. Of course, there are many more themes available from third-party developers. Realmac has also consolidated themes that are applied to a RapidWeaver project, and those themes can optionally be compressed for faster loading of sites.
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.
Fake.app makes powerful Web automation easy
Todd Ditchendorf (Celestial Teapot Software) is probably best known for creating Fluid, a Site-Specific Browser app that we love to talk about. While Fluid was a great and well-executed idea, Todd's latest app, Fake, is truly inspired. The easiest way to describe Fake is to say it's Automator for the Web. It may not have the mass appeal that Fluid does, but its target audience (Web designers and developers, as well as Web power users) will have no trouble appreciating its capabilities. Fake, like Automator, offers an Actions library and allows you to create drag-and-drop workflows with Web-specific capabilities. Fill a form, click a button, follow links ... basically, you can automate anything that deals with HTML and DOM elements. You can even inject CSS and JavaScript into pages, which opens doors to extensive security testing, among other things. Sound intriguing? Read on ...
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.
Apple puts HTML5 where its mouth is
Looking for even more HTML5 samples to see what all the fuss is about? Good, 'cause Apple just went live with its HTML5 showcase page. Naturally, it took a veiled jab at Flash in the process: "Standards aren't add-ons to the web. They are the web." Samples include video, typography, photo galleries, transitions, audio, 360 degree object manipulation, and VR implementations including the source code so devs can tinker around for themselves. Now hit up the source for a taste. Update: Apple's offering a developer link that lets you play with the demos in Google's Chrome browser.
HTML5: seriously, it's not just for video
In a way, HTML5 has been reduced to a buzzword. You hear a lot of noise about how great it is for video, and how the web standard is an alternative to Flash content, but you don't see a whole lot of examples of that. We thought we'd take a moment and round up some of the cooler, more exciting instances of HTML5 online -- sites and experiments that go way beyond just playing someone's home movies. We're talking 8-bit gaming, some really crazy video effects, and a handful of incredibly interesting ways designers are maximizing the potential of the everyone's favorite new toy. Check out the links below, and prepare to readjust your expectations of HTML5. Note: Your best experiences for the links below will be in Chrome or Safari. You can get some of this working in Firefox, but as Chris Ziegler just remarked, "It's mega slow." These will absolutely blow your mind. Mr.doob's Chrome experiments -- Ball Pool and Google Gravity. Here's a roundup of experiments from Ben Joffe, including a rudimentary 3D shooter, a 3D functions plotter, and an HTML5 color picker. Some of my personal favorites, KesieV's Akihabara game room. The Legend of Sadness is where it's at. Exploding, real-time video. WPilot -- a multiplayer shooter. Like Asteroids meets Quake. A giant, color-cycling canvas. Weirdly addictive to play with. 3D molecules. 'Nuff said. Mega Man intro. In HTML5. If you guys have suggestions or examples you'd like to show off, let us know in comments!
First look: SketchyPad mockup tool for web and app designers
Part of my work involves making mockups of websites for clients, and up until this point the easiest way to do that was just to hand draw some sketches, scan them, send them to the client for rework, etc... Now there's a new iPad app from developer Nick Golovin that promises to make the creation of website and app mockups a lot easier. SketchyPad (US$4.99) is an iPad app using a simple sketchpad metaphor and a lot of stencils to make mockups. It includes many of the design elements that are used in web design and app development. The app includes snap-to bluelines for aligning elements, the stencils can be locked in place with a lock icon, and there are tools for layering buttons and other elements on the page. When you're done with a sketch, it can be exported to your camera roll, emailed, or exported to Balsamiq Mockups for Desktop. %Gallery-93085%
