Updates from Adobe – a Fun New Adobe App

Adobe released a number of new apps and features today at the MAX convention. There are some new features in Photoshop CC, Illustrator CC, InDesign CC, and Premiere Pro CC. But the ones I found most interesting were the changes to Muse CC, Dreamweaver CC, and the new free Apps for iOS.

Muse CC

Muse finally has secure FTP support which I find very important. In fact some of the servers I work on don’t allow any connection other than secure FTP – which meant until now I couldn’t use Muse for them.
It also now has Find and Replace. This is a critical feature for web editors as when you’re working on a large site it can be difficult to know you’ve found all the instances you need to change if you have to do it by hand. For one site I worked on, we had to provide discounts to customers because one page listed the price from the previous year, and we didn’t catch it when we updated the site with the new price.
Another great new feature of Muse CC is the SVG import. Now you can create your images as vector graphics and import them directly into your web page. This is great for doing prototyping in Illustrator and then moving directly to the website. SVG images give you so many options beyond the standard web images.

Dreamweaver CC

Dreamweaver CC doesn’t have a lot of updates this time, but there are a few that are interesting. It has 64-bit support, plus they updated Live View. You can now edit while in Live View – which is a huge improvement. I hardly ever leave Live View now. I love that you can drag and drop images into Live View—so much easier to do! There are also a bunch of new starter templates you can use to create different kinds of pages including Responsive Web Designs.

Mobile Apps

But beyond Dreamweaver and Muse, Adobe now offers a bunch of mobile apps that all connect with your Creative Cloud account to allow you access to your creations from any device. There are three new apps in this release:

  • Adobe Premiere Clip
  • Brush CC
  • Shape CC

The one I’m most interested in is Brush CC.

Brush CC

Brush is a new app that will help you create your own custom brushes right on your iPad or iPhone. You start by creating a line or shape or whatever you want as a brush. Then you can modify it so that it displays exactly as you want it to. You can adjust things like:

  • display as a ribbon, or just a scattering of marks
  • color or black and white
  • have it repeat linearly, mirrored, or stretch to fit the space
  • crop it to make it a seamless brush or your own dotted line
  • add transparency
  • have the ends fade in and out or taper

My first simple brushThere are endless ways to create your brushes.

Then, once you’ve created your brush, you can save it to your Creative Cloud library and use it in Photoshop CC and other connected applications. I can see myself spending a lot of time in this app.

Download Brush CC from iTunes

Shape CC

my brushes and shapesThis is another new app that looks like it could be a lot of fun. However in my first attempt at using it, I found it fairly difficult. There is no image stabilization, so I found it difficult to focus on just the item I wanted. It also took me a while to figure out how to edit my shapes, and when the vectors were too connected, it was difficult to get just the lines I wanted and none that I didn’t. However, I then imported my shape into Illustrator without an issue.

There are no pre-defined shapes in Shape CC but it is reasonably easy to use other than the above concerns, I created two new shapes very quickly.

Download Shape CC from iTunes

Happy Birthday World Wide Web #web25

The web has been around for 25 years now, which is really amazing when you think about it. I was in the Peace Corps when I first heard of the World Wide Web and I was one of like three volunteers who found a way to get email while we were there. I had to go to someone’s house and he’d sign into his account and then we could piggyback from there to an email account. By the time I was getting ready to leave (2 years later) the Peace Corps office was setting up email for all the volunteers, but we still didn’t have web access.

In 1995, I returned home and got a job at a local business–NETCOM. It turned out I was working for a company that gave people access to the internet, and I barely knew what that was. I was working as a phone technical support representative, and it was challenging to say the least. I put people on hold a lot as I asked questions and repeated what the customers on the phone were asking me. I’d say I’ve come a long way since then.

When I started working on the web, it was black and white (or green and black, on the terminal screen I used) and all text. I spent a lot of time doing things like cleaning up Gopher, chatting on IRC, and reading alt.netcom.sucks. None of these things were the web, but I used them a lot more than I used the web, because there really weren’t many pages out there. When Mosaic started being able to support images and NetCruiser was developed it was incredibly exciting for all of us in tech support. Although, honestly, NetCruiser was more like bad news for us in tech support. One of the common info files we used for answering customers was called sales.lied, which isn’t very reassuring, but was our only honest reply to some questions.

In 1995, my roommate and I would search akebono.stanford.edu to find interesting facts on the few websites that were out there, and then quiz each other. The goal was to find the weirdest fact of the day. What made me laugh was the day several years later when I won an internet trivia quiz for knowing that that URL was the original URL of Yahoo!. For fun we would flood internet polls nominating Ender’s Game as the best book of all time. I wrote a bot to vote for that book (yes, the book, not the movie) 100 times a minute until the website went down. At first I thought I’d broken the Internet!

Things are a lot easier now, but also a lot more corporate. I sometimes long for the crazy, heady days of the early web, but I think it’s grown up pretty well. Happy Birthday, WWW!

No more HGROUP

The HGROUP element in HTML5 has been in and out a couple of times. It’s now out. It’s officially obsolete in the HTML5 specification which means that you should not use it.

sigh

So what do we do to create sub-headings that are not part of the HTML outline? Well, here are some suggestions from the W3C HTML5 spec:

  • First, don’t use H1-H6 elements, unless of course, they head up a new section.
  • You can use paragraph tags inside the HEADER element. Then you can style those elements with CSS child selectors (or however else you’d like to) to denote that they are subtitles.
    <header>
    <h1>Lord of the Rings</h1>
    <p>Return of the King</p>
    </header>
  • Another option is to separate the sub-title from the title with a colon. For example:
    <h1>Lord of the Rings: Return of the King</h1>
  • You could also use the SPAN element around your sub-title, but keep it all within the same heading tag:
    <h1>Lord of the Rings <span>Return of the King</span></h1>

For most people this change probably won’t matter too much. After all, the HGROUP element wasn’t used very often. But I found it useful and intuitive, and while I realize the specification is still in draft, I wish that this element had stuck around.

The arguments against it center around:

  • It doesn’t indicate which heading is the sub-heading
    I think this is obvious from the H1, H2, H3 structure. H2 is a sub-heading of H1, etc. 
  • Heading semantics are still apparent even without the element.
    But with the above methods this is no longer true. Especially when you take into account that the W3C recommends against using heading elements unless they are starting a new section.
  • The specification concatenated all headings anyway for accessibility
    I’m not sure why this matters. They still are headings and sub-headings.
  • The HGROUP element acted as a DIV by another name
    This is the most coherent argument against the HGROUP element.
  • Almost no one uses it
    Perhaps true, but not everyone uses HTML5 either.

Ultimately, it doesn’t really matter.

I may have used HGROUP all the time, but now that it’s gone I’ll simply stop using it. It really doesn’t impact my sites a lot, and if I leave it in some pages until I get around to updating them, it won’t matter as the browsers that recognize the element (for style calls, and so on) will continue to do so.

Yes, I’m a tad disappointed, but I won’t lose any sleep over this. Goodbye HGROUP, it was fun while it lasted.

HTML5 vs native apps

I have believed that for most situations, HTML5 apps are going to be the new normal over native apps because they are much more flexible. It is more possible to create an HTML5 app to “run everywhere” than a native. Why? Well for starters Android apps are written in Java and iOS apps are written in Objective C.

Apparently Business Insider feels the same: HTML5 vs. Apps: Here’s Why The Debate Matters, And Who Will Win

HTML5 WebSocket now available on Amazon EC2

Kaazing
Kaazing announced today that they will be releasing their WebSockets solution on Amazon EC2. As you learned in Hour 19 of my book, WebSockets are a way to open a full-duplex connection between your web server and your customer. This helps you build applications and games that are faster and give real-time information to your customers. WebSockets applications are great for games but they also are a good choice for stock tickers, news tickers, and chat or IM applications. In fact, Kaazing is offering a free webinar on how to Build On-Demand Messaging as a Service Platforms on Tuesday, May 15, 2012 from 9:00am–9:30am PT.

By making their solution available on the Amazon EC2 cloud service, Kaazing and Amazon are making it even easier for small and large businesses to add the value of WebSockets to their sites.

HTML5 can increase mobile usage

If you’ve been wondering whether or not to convert your site (or create a new site) using HTML5, then the news from Usablenet (via TechCrunch) is welcome. Apparently, just adding a few interactive elements with HTML5 you can increase the engagement on your website and this makes mobile users especially want to stick around, up to 28% more in fact. One thing the headline doesn’t say is that it also decreases bounce rates by 15%—in other words, 15% fewer people are leaving right after showing up.

Now this isn’t just a matter of adding an HTML5 doctype to the top of your pages and calling it good. No, you need to do more with the HTML5 specification before you can look forward to those 11% more pageviews, lower bounce rates, and higher engagement. Doing things like:

  • Adding an interactive gallery or slideshow
  • Including location services
  • Expandable and collapsible boxes (to show and hide content)
  • Using shopping cart overlays (instead of dragging them off to yet another page)

All of these things make your site more interesting and interactive. And when you add HTML5 features like location services that are well suited to mobile phone use, well, of course mobile phone customers are going to appreciate that.

Remember to always test your new designs and interactivity as much as possible. You don’t want to see a gain in mobile users of 28% while losing 50% of your desktop users. But the outlook is great for HTML5, and as mobile use grows in popularity, HTML5 websites will be the beneficiaries.

Does Facebook buying Instagram mean anything to HTML5 development?

I just read an article on SF Gate via Business Insider that said that because Facebook is buying Instagram for $1 billion they are backing away from HTML5.

Yes, Instagram is a native app, not an HTML5 web application. But I don’t see that as a signal that I should give up on HTML5 applications in favor of native apps. I see that as a signal that Facebook thinks they can recoup over a billion dollars from the Instagram app because they think it will add that much value to their other offerings.

The same article states that web applications can be slower than native applications. Sure, this is true. But it’s also true that web applications can be faster. And yes, Facebook’s application could be slow, but I suspect that was more due to a somewhat rushed dev cycle and not enough time to optimize things rather than simply because HTML5 apps are slower. By buying Instagram they can add those features into their Facebook app without having to reinvent the wheel.

The article also states that the reason that the Facebook app was so slow to load was that “every screen in the app had to load like a Web page.” And as proof, they linked to a Business Insider article that says “With the Facebook iPhone app, there are 6 screens a user has to go through before a user can actually take a picture.” I suspect that Nicholas Carlson may have been confused when he read that. I don’t read that as meaning that every page has to load like a web page, but rather that there are 6 screens or steps to go through before you can take a picture, compared to Instagram’s 1.

I honestly think that this is a good, if expensive, move on Facebook’s part. They get a photo app that is already very popular, and I’m sure we will see Instagram style features in the Facebook app in the future because of this acquisition. But I think it says a lot more about how Nicholas Carlson feels about HTML5 (negatively) than it does about how Facebook feels.

Adobe Shadow a great new tool for HTML5 app development on mobile


I have seen a lot of software come and go in the past 20+ years. And most of the time, while the innovation is interesting and fun, I haven’t seen anything that really made me think “this will really help me in my work,” but Shadow is the happy exception.

I only downloaded Shadow about an hour ago, and I’m already very impressed. I have connected my iPad, iPod touch, and Galaxy Tab to it and can see, immediately, how my pages, both on a local server and live on the web, look on those devices. I’m loving this product.

Adobe Shadow running on Mac and several mobile devices
Adobe Shadow running in Google Chrome with remote inspection on the Samsung Galaxy Tab, Apple iPad, and Motorola Atrix

HTML5 is well suited for mobile and if you’ve seen the news from ZD Net, it is even faster on iOS than Android. And now you can test and fix problems so much faster than you ever could before.

Have fun testing your mobile pages, because it just got a lot easier. Go Get Adobe Shadow

I feel compelled to mention that I’m watching the Apple Liveblog on Engadget now. Which wouldn’t have a lot to do with this post except that I’m watching it on Shadow on my iPad. 🙂

Dive Into HTML5 is Back

Dive Into HTML5 title screen
Dive Into HTML5 is Back!

You may have noticed that one of the best websites for learning HTML5 suddenly went dark a little while ago. Apparently the author, Mark Pilgrim, decided to exit the internet and took all his writing with him. And this meant that he marked the site Dive into HTML5 as 401-Gone. I was disappointed both because it removed a valuable resource and because I loved his “The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything” Which made it easy to quickly detect whatever HTML5 thing I wanted to detect, without having to memorize it myself. I wasn’t terribly upset, as I bought a copy of the book version, HTML5 Up and Running in eBook format long before I even knew of the website. But it was still a loss for anyone else wanting to learn HTML5.

So when some html5homies put it back up at http://diveintohtml5.info/ I was very happy. This is very good news. And what’s even better is that they are going to continue to add to it to keep it up-to-date and accurate.

HTML5 Speech Input Added to Chrome

The latest version of Chrome now adds support for speech input. This gives you the opportunity to let your readers actually talk to your applications and web pages, rather than be forced to type.

While this might not seem terribly useful, there are very useful applications, such as:

  • speak words to translate or get a definition
  • ask for directions of a map
  • hands-free browsing
  • zooming and panning with voice commands

I don’t know about you, but I have a vision of an HTML5 application where I could upload a photo, and then just say “zoom” and “enhance” and zoom in on the photo, like all those TV shows do.

And to do it, you just add a speech attribute to the <input> tag. For example:

<input type=text speech id=spoken-input>

Of course, to get it to work in Chrome you have to use the Webkit extension as well:

<input type=text x-webkit-speech=x-webkit-speech speech id="spoken-input>

I’ve got a simple working (if you’re on Chrome) example here.