Tag Archives: development

Adobe Releases Dreamweaver, Edge Updates for Web Developers

Adobe today announced some new features for Dreamweaver CS6, Edge Animate and Edge Code preview, which are available today for Creative Cloud subscribers. Several of the new features are integrations of technology and services that we’ve seen before, such as web fonts via Typekit, the type service Adobe bought late in 2011.

The other major news is the first public preview of Adobe Edge Reflow, a tool for building responsive website layouts. “Responsive” layouts flex and change depending on what device you are on, ensuring a good user experience across personal computers, mobile devices and tablets.

I’ve seen the product before today in demos and it is geared toward web designers more than developers—the user interface is polished and designed to build the code. There is no expansive code view, although you can read the generated CSS in some places. That code can then be exported and used in programs like Dreamweaver or Edge Code.

The release is a public preview and Adobe welcomes feedback at https://github.com/edge-reflow/issues.

The update to Adobe Edge Code includes a Live Development preview which pushes changes to a web browser immediately for testing. I like this new feature quite a bit. There’s also now a “Quick Edit” option to edit code in context rather than moving to the original file. Code hinting for HTML and CSS, a longtime feature in Dreamweaver and other mature code editors, is now in Edge Code.

Adobe Edge Animate’s new features include support for some CSS3 technology including gradients (radial and linear) and CSS filters. The addition of CSS filters is particularly interesting because they promise amazing control over HTML elements, including the ability to apply drop shadow, brightness/contrast changes, blurring, color saturation and other functions you normally associate with Photoshop. The spec for CSS filters was created by Adobe, so it makes sense they would pursue this. Unfortunately, CSS filters are supported only by Webkit browsers at this time, excluding Internet Explorer and Gecko browsers such as Firefox—but I bet they will build in support soon.

The other major enhancement added to Edge Animate is a user interface for previewing web fonts from Adobe’s Edge Web Fonts service. This free service is powered by Typekit. This is a nice improvement for web designers but most web developers have no trouble integrating Typekit fonts by adding the code snippets and setting up kits on the Typekit website. This kind of change, like several others in today’s announcements, serve creative professionals more than web developers.

The Edge Web Fonts interface is also new in an update to Dreamweaver CS6 going live today. The Dreamweaver update does have a few new features for web developers, including the option to apply fluid grid layouts to elements by class as well as ID attributes. The interface for working with fluid grid layouts has also been improved. These are the kinds of things that can really make a developer’s life easier.

There aren’t many new updates today, but the Creative Cloud paradigm drives more updates than we’re used to but with fewer features. Most new features I’ve seen today are improvements and they fit with Adobe’s goal of providing tools for the latest web technology (web fonts, responsive web design) for creative professionals. Web developers and programmers will probably be less excited by today’s announcements, but there’s some goodies for them too.

BOOK REVIEW: Node Up and Running

Front-end web developers everywhere know JavaScript and use it for everything from DOM manipulation to Ajax applications. That’s why I am really excited that Node.js exists—JavaScript running on the server side, running applications from the server rather than the browser. The exciting aspect of it is it opens up server-side programming to front-end developers who until now have focused on the browser.

Node Up and Running by Tom Hughes-Croucher and Mike Wilson provides a primer on Node that I really enjoyed. I have not worked with Node before but I’m experienced with JavaScript—in other words, I’m the ideal reader for an introductory book such as this. The most useful chapter for me was actually the first, which introduces Node and—most importantly—explains the scalability of Node and its ability to handle large applications. I wasn’t sure it was suitable for these things compared to Java or other server-side languages. I wish the book dived deeper into these questions, but the chapter was enough to make me feel comfortable using Node in these situations.

The rest of the book covers basic Node concepts like loops, error handling, APIs and data handling. All the basics you will need are here, but there’s more to Node and I will be looking forward to a more extensive Node “cookbook” from O’Reilly in the future. (Tom Hughes-Croucher said on Amazon.com that it is in the works.) Node Up and Running is short so you don’t get into all the details, but I was impressed it packed in as much useful details as it did. I also liked that the very first project code in the second chapter consisted of a chat server and a Twitter service—both look impressive and show off Node functionality.

One complaint about Node Up and Running is that the book covers a quickly-changing framework and some parts of the book are outdated at this point. Another criticism is that the book is too short—it’s not even 200 pages, so it’s really just an introduction to Node. But as an introduction it serves its purpose very well and entices front-end developers with some great server-side code that can be built with their JavaScript skills. It’s an exciting time to be a JavaScript developer!

Node Up and Running
Tom Hughes-Croucher and Mike Wilson
Published by O’Reilly
US $34.99
Rating: 9/10
Buy at Amazon.com

BOOK REVIEW: The Book of CSS3

Book of CSS3

HTML5 is probably the most desirable acronym to have in a web designer’s portfolio today, but I think the third iteration of Cascading Style Sheets (CSS3) has greater impact on a designer’s bottom line and clients’ satisfaction. This is because CSS3 can finally deliver the slick user interfaces that used to be only possible with Photoshop and a lot of hacking for Internet Explorer. Browsers are advanced enough today to apply CSS3 and make websites everywhere look extra sharp.

The Book of CSS3 by Peter Gasston covers the full gamut of CSS3 rules and features, and I think it’s a useful book for CSS coders of all skill levels. I use a lot of CSS3 to control backgrounds and box elements, but there are entire sections of the CSS3 spec that I never really appreciated until I read this book. Gradients, color, opacity, transitions and animations are all prime examples. Another is media queries, which Adobe has made easier to implement with recent versions of Dreamweaver.

The book is clear, well-written and documented with good examples. There are a good deal of images to illustrate CSS3 in action, but unfortunately the book is in black and white which sometimes makes the images less useful. A more useful part of the book is the browser chart at the end of each section and in Appendix A, detailing which browsers support the demonstrated CSS3 features. Unfortunately, Internet Explorer still lags behind other browsers and doesn’t support a lot of CSS3 features (though I think this will change with the next version of IE). There are a few CSS3 features that are so experimental that most if not all browsers fail to execute them, including flexible box and template layout structures.

CSS3 will most likely change in the near future. Technology is evolving at a more rapid pace; the Firefox browser, for example, will be updated on a faster schedule and we’ll see more versions (and more CSS3 support) quicker. But I think the basic capabilities of CSS3 are set and web designers need to look at CSS3 now if they want to be progressive and offer clients the best technology today. The Book of CSS3 is a good place to learn the full range of CSS3 features.

The Book of CSS3
Peter Gasston
Published by No Starch Press
US $34.95
Rating: 9/10

buy from amazon

BOOK REVIEW: Eloquent JavaScript Simplifies Scripting For The Web

Marijn Haverbeke’s Eloquent JavaScript: A Modern Introduction to Programming is really about the fundamentals of coding clean JavaScript for websites. In any professional’s career, “fundamentals” are taught early on but can be forgotten or pushed aside in favor of getting projects out the door when deadlines are tight or in favor of new training that do things differently. In any case, fundamentals are usually the foundation of good programming and it’s beneficial to revisit them from time to time.

Eloquent JavaScript does a good job of detailing the fundamentals and explaining concepts like the stack and the environment. This attention to detail is what sets the book apart from other JavaScript books. However, Eloquent JavaScript is a comprehensive JavaScript guide so many features and techniques aren’t discussed. Another downside is the lack of tutorials or step-by-step examples: since the focus is on basic concepts, Marijn only needs basic snippets of code to illustrate his examples. There are a few larger projects used to demonstrate things over the course of a chapter or two, but they’re not really laid out as tutorials.

There are other aspects of JavaScript that aren’t discussed in Eloquent JavaScript, the most glaring of which might be libraries like jQuery. jQuery, Dojo and other JavaScript libraries are commonly used to make coding JavaScript easier, but Eloquent JavaScript mentions them on one page in passing. Again, there are many books out there that cover jQuery—and far more resources and code examples online—but this book is all about understanding JavaScript and knowing how to write elegant code from scratch.

Eloquent JavaScript is a very specialized book for programming purists and web developers who want to write the best code possible. Many developers are happy writing code that simply works, and this book may not be for them—a larger resource like O’Reilly’s JavaScript: The Definitive Guide or a book on jQuery might be a better fit for them. But if you want to grasp all the basic concepts behind JavaScript and write more eloquent code, try Eloquent JavaScript.

Eloquent JavaScript: A Modern Introduction to Programming
Marijn Haverbeke
Published by No Starch Press
US $29.95
Rating: 8/10

buy from amazon

BOOK REVIEW: Two iOS App Books

This review covers two books on iPhone and iOS development: Visual Quickstart Guide: Objective-C by Steven Holzner and iPhone App Development: The Missing Manual by Craig Hockenberry. Ironically, the iPhone App Development book was published just after the release of the iPad and nowadays we call this iOS development after the operating system these devices use. This also includes the iPod Touch.

Visual Quickstart Guide: Objective-C, like most Visual Quickstart books, offers a solid introduction to the topic and many exercises to get readers familiar with the programming language. Objective-C is the native language for writing iOS applications and for awhile Apple would not accept apps written with other languages and cross-compiled to Objective-C. This has since changed but many developers believe coding with the native language makes for a better application.

The Visual Quickstart Guide teaches the basic elements of Objective-C but it doesn’t address every aspect of the language. Readers who are new to object-oriented programming will benefit more from this book, which teaches the concept and its implications in iOS development. Experienced developers who know OOP or similar languages like ActionScript 3 can learn a few things from the book but I think there are better resources out there.

The Missing Manual sets itself apart by offering beginning-to-end training for iOS development—everything from installing Xcode to selling apps from the Apple App Store. I really like this aspect of the book, and developers who want to make money with their products will find this very useful. I think there’s less emphasis on Objective-C but part of that is because Craig uses Apple’s developer tools like the Interface Builder to create the applications demonstrated in the book. The obvious downside to this is the fact that Apple’s developer tools are available only on Mac OS X computers—Windows users are out of luck, even though iOS devices are marketed to them too.

Both books are good buys, and as with most things each one offers something a little different. Objective-C is a solid introduction to the language and green developer would find it very useful. The Missing Manual is a more complete resource for iOS development and is written for the entrepreneurial developer who wants to sell apps as much as develop them.

Visual Quickstart Guide: Objective-C
Steven Holzner
Published by Peachpit Press
US $29.99
Rating: 8/10

iPhone App Development: The Missing Manual
Craig Hockenberry
Published by O’Reilly
US $39.99
Rating: 9/10

Dreamweaver CS5 Review

dw_box

This review supplements Dreamweaver CS5 First Impressions, which I wrote just after CS5 was announced. That article explains most of the new features in Dreamweaver CS5 like other reviews, but the goal of this article is to share my experience in the field with Dreamweaver CS5 and to tell what works and what doesn’t work for me.

What CSS can do for you

Dreamweaver CS5 got quite a few new features focused on making CSS easier to use, and they have changed some aspects of the way I work with CSS. I still do a lot of hand-coding and don’t care to use the CSS Styles panel and its new features. I do like the Inspect button, which will put the Design view into Live View and color various properties of the CSS elements such as margins and padding. You can turn CSS rules on or off as well in the CSS Styles panel, which helps you see how the webpage is affected by specific rules and properties.

I love the Inspect feature for specific situations but most of the time my troubles with CSS happen with properties that aren’t easily seen, such as position, display and float/clear. I try to do a lot of my CSS positioning without absolute positioning when I can avoid it, and CSS1 and CSS2 tricks like floats aren’t really designed for the task. I wish Dreamweaver could solve these situations, but Inspect doesn’t provide easy solutions.

Handling CMS-generated websites

In my “First Impressions” article I mentioned Dreamweaver CS5 handles dynamic websites generated by PHP-based content management systems (CMS). At the time I couldn’t figure out how to get Dreamweaver to work with a website of mine that uses ExpressionEngine, and a little research suggests Dreamweaver CS5 actually doesn’t work with ExpressionEngine. Joomla!, Drupal and WordPress are the three CMS’s that Dreamweaver CS5 will handle dynamically—and there’s no support for the ASP-based CMS products out there, though there aren’t many.

Dreamweaver CS5 has taken an important first step toward working with dynamic websites but there’s a lot more to be done. Other dynamic systems, such as e-commerce products which are coming up more and more in my work, aren’t covered by Dreamweaver and I don’t do anything more than the design and production in that application. If you run Joomla!, Drupal or WordPress often, then I’d purchase Dreamweaver CS5 since it works beautifully with those products. Other CMS’s—like ExpressionEngine—don’t gain anything new.

The Inspect button is my favorite new feature, but the redesigned Site Definition dialog box is a close second. It makes creating new sites and handling multiple remote servers and environments much easier, though I think this says more about the weaknesses of the previous interface than the strengths of the new one in Dreamweaver CS5. Improvements like these are doubly important because interfaces like the Site Definition dialog box are used very often and if they aren’t well-designed they really grate on you. The other great new interface improvement from Adobe recently is the new File Import interface in Photoshop Lightroom 3, and that one proves that a lot of time and effort can be saved with a flexible and simple interface.

About the HTML5 Pack

Adobe released a Dreamweaver CS5 HTML5 extension a couple weeks ago that adds some HTML5-specific elements to Dreamweaver CS5. HTML5 has become a buzzword now that Apple is throwing it around as a replacement for Adobe Flash (which it really isn’t, at least not yet). I’m sure many web designers will switch from XHTML to HTML5 and Adobe has tried to embrace HTML5 even with the uncertainty around web video and whether it threatens its Flash products.

The HTML5 Pack should be a no-brainer for designers wanting to learn HTML5. The pack includes a couple HTML5 starter layouts accessible from the New Document window, but these layouts are fairly simple and don’t have many HTML5 elements other than the semantic additions such as

and

Adobe Web Apps, Part 2: BrowserLab

Adobe has become more and more aggressive in the field of web applications, producing various services like Photoshop Express and Acrobat.com to complement their shrink-wrapped software. According to Devin Fernandez, Senior Product Manager for Dreamweaver, the company’s “hosted services” strategy takes advantage of the convenience and quick development times inherent in online applications. Shorter production times means that these applications can be developed and improved faster and more often.

Betas for two new online applications were announced recently by Adobe. One is InContext Editing, a streamlined online content editing system that’s handy for Dreamweaver users. The first part of this series comprises an analysis and review of InContext Editing. The other application is BrowserLab, a service that allows website testing for multiple browsers. This practice is essential for any web designer and any tool that makes the process easier deserves a look.

Pain points

Adobe looks for “pain points” when developing products: I’ve heard this phrase more than a few times during various demos and discussions over the years. BrowserLab is Adobe’s response to several of customers’ pain points: speed, convenience, simplicity and productivity. BrowserLab is designed to improve these four points for users. The browser emulator concept is not new—BrowserCam and browsershots.org are two services similar to BrowserLab—but Adobe hopes to improve on the concept.

BrowserLab is currently in limited distribution. Adobe planned to accept only 3,500 users for the initial preview but demand was high enough that this was increased to 8,300. The service is being tweaked and improved in preparation for a full launch, at which point it will become a paid service. For now the development team is focused on improving stability and performance.

The BrowserLab experience

BrowserLab has the same professional black/gray design as most of Adobe’s other web applications. The application is easy to use, though BrowserLab has relatively few functions and doesn’t need much user interface to be effective. There are only three view modes: 1-up, 2-up and onion skin view. Onion skinning overlays one browser image on another, which is a good way to see small differences between browsers. Users can also zoom anywhere from 75% to 200% to get a close view of the results.

Onion skinning overlays one browser result with another—in this example, Designorati.com is being tested with Firefox 3 and Internet Explorer 7.
Onion skinning overlays one browser result with another—in this example, Designorati.com is being tested with Firefox 3 and Internet Explorer 7.

I like using BrowserLab, but for a product like this the big question is whether or not it can faithfully test all the browsers you need tested. At this time BrowserLab can emulate four modern browsers and one browser that I consider non-modern:

  • Internet Explorer 6 for Windows
  • Internet Explorer 7 for Windows
  • Firefox 2 for Windows and Mac
  • Firefox 3 for Windows and Mac
  • Safari 3 for Mac
BrowserLab already has most of the browsers I test for, and several others are in the works.
BrowserLab already has most of the browsers I test for, and several others are in the works.

Internet Explorer 8, Safari 4, Opera and Chrome and next up for addition to BrowserLab. I think BrowserLab needs to emulate all these browsers in order to be successful: the ability to test all needed browsers in one application is what will make BrowserLab popular. Fortunately, the BrowserLab team tells me they are working on this right now. For now BrowserLab has a limited browser set, and that’s one reason why I still use bonafide web browsers to test my websites. Dreamweaver’s Live View is also a nice tool for website testing, but it’s not always accurate.

Another reason why I test in actual browsers is because BrowserLab is not a browser emulator: it works by screen-capturing websites in various browsers and displaying the resulting images. These images are not interactive, so you can’t test JavaScript or CSS interactivity and you can’t see Flash or other animations. Flash can also give BrowserLab a false image: in one test, BrowserLab showed a Flash animation’s mask did not work in Firefox 3 for Windows. I checked it out in that browser and learned the browser applied the mask a split-second after rendering the rest of the page. BrowserLab captured the screen too soon to reveal this. Scott Fegette, Technical Product Manager for Dreamweaver tells me the BrowserLab team is looking to actual emulation of browsers in a web application, but for now they are going to stay with screen captures.

Top: A website I designed, tested in BrowserLab. Bottom: The same website viewed with the same browser being tested in BrowserLab. The Flash graphic and headlines (styled with sIFR 3) are not visible in BrowserLab but do work online.
Top: A website I designed, tested in BrowserLab. Bottom: The same website viewed with the same browser being tested in BrowserLab. The Flash graphic and headlines (styled with sIFR 3) are not visible in BrowserLab but do work online.

Top: A website I designed, tested in BrowserLab. Bottom: The same website viewed with the same browser being tested in BrowserLab. The Flash graphic and headlines (styled with sIFR 3) are not visible in BrowserLab but do work online.

Still, BrowserLab is a handy tool if my computer’s unavailable, and it’s online so I can use it anywhere. I want to see more available browsers (such as Internet Explorer 8) and it would be nice to be able to mark a particular capture as a model and have BrowserLab show where other browsers fail to duplicate it, but I think BrowserLab is on its way to becoming a good tool for web designers.

One more thing for Dreamweaver users

Dreamweaver users can leverage BrowserLab even further with an extension that allows screen capturing and testing directly from Dreamweaver CS4. The BrowserLab extension requires Extension Manager 2.1 and comes in two parts, but completing the installation process will add a BrowserLab panel to Dreamweaver CS4. From there users can send a local or server copy of the active page to BrowserLab for viewing. The combination of Dreamweaver’s Live View and BrowserLab allows users to preview dynamic interfaces, including JavaScript and Ajax, and also preview websites from behind a firewall. Other service-based solutions can’t do this.

BOOK REVIEW: ActionScript 3.0 Classroom In A Book

as3-classroom

Remember “Training From The Source”? This was the name of Macromedia‘s official line of training books for Dreamweaver, Flash and other design applications. When ActionScript 2.0 was released I bought the book Flash MX 2004 ActionScript Training From The Source to learn that new version of the Flash programming language. I carried that large book through many airports and conferences, chipping away at its pages over the course of a few years.

By the time I was finished with that book, ActionScript had moved forward again to version 3.0, Macromedia was no more (having been acquired by Adobe) and “Training From The Source” was folded into Adobe’s own “Classroom In A Book” series. I thought it fitting to review the series recently with a look at ActionScript 3.0 for Adobe Flash CS4 Professional Classroom In A Book.

Small, compact, solid

Compared to the Training From The Source book, which was a large book in both page count and size, Classroom In A Book is smaller in both respects. I actually appreciate the smaller size because it increases portability. The book design is sharp, with a matte finish cover that is easier to handle and a clear layout design that aids learning. I was surprised the author, Chris Florio, had a laid-back, informal writing style—one would expect a workbook like this to have a no-nonsense tone—but I could appreciate a bit of levity after working on the exercises for hours at a time.

A different approach to ActionScript training

Classroom In A Book has roughly half the pages of its Training From The Source predecessor, so either ActionScript 3.0 is less complex than version 2.0 or the book doesn’t cover everything. It’s actually a combination of three things:

  • ActionScript 3.0 really is less complex than ActionScript 2.0, though it’s more verbose; the distinction is comparable to HTML and the more strict XHTML. Syntax is streamlined and coding skills apply to everything in a more uniform way.
  • Classroom In A Book doesn’t cover everything. Some topics such as CSS aren’t covered at all, while others (like classes) aren’t covered in their entirety. That might be a good thing, since ActionScript has always been a large language with many classes and elements. It seems this book is designed to teach essential ActionScript skills and leave minutiae to other resources.
  • Classroom In A Book is project-oriented, while Training From The Source was skill-oriented. Both books have projects to work on (and ship with a CD-ROM full of good project materials) but Training From The Source focused on skills such as handling text fields, XML, conditional logic, debugging and so on. Classroom In A Book thinks more in terms of building preloaders, loading content, creating quizzes and working with XML and video. Both approaches are good and Classroom In A Book teaches a great deal if one completes the exercises, but it’s not necessarily a compendium of ActionScript knowledge like Training From The Source was. It complements other sources such as the ActionScript 3.0 reference files, accessible directly from Flash.

Conclusion

ActionScript 3.0 for Adobe Flash CS4 Professional Classroom In A Book is worth buying, and particularly helpful for new Flash users who don’t know ActionScript or experienced Flash users who have not yet upgraded their skills to include ActionScript 3.0. The language really has made a sea change from ActionScript 2.0 and learning it requires training. Classroom In A Book is a good place to start.

ActionScript 3.0 for Adobe Flash CS4 Professional Classroom In A Book
Published by Adobe Press
US$54.99
Rating: 9/10

BOOK REVIEW: Universal Design for Web Applications

univdesign-webapps

Wendy Chisholm is co-editor of the W3C’s Web Content Accessibility Guidelines 1.0; Matt May is an accessibility engineer at Adobe and leader of the Web Standards Project Accessibility Task Force. With credentials like theirs, their book Universal Design for Web Applications has all the makings of an essential resource for web designers and developers who need their web applications to be accessible for everyone—and who doesn’t need their web applications to be accessible?

Lean but worth reading

This book is published by O’Reilly, and it seems to me that O’Reilly puts out books that are either (1) small and compact or (2) large and dense. Universal Design is one of the former, at less than 200 small pages. I actually prefer these to the larger tomes, and in this case it works great because the book is full of useful knowledge. The book’s title suggests it’s about web application design but most of it pertains to HTML/XHTML structure, forms and tables, scripts and some Ajax—all of which are just as pertinent for web designers if not more so. If you build websites for a living—but not necessarily web applications—then Universal Design is just as valuable a book for your bookshelf.

The information in this book is fairly comprehensive but not complete—the sections on structure and accessible code are fairly thorough but I wish there was more written about the process of creating such code, which is in the final chapter and only takes up a small portion of the book. It’s pretty good but experienced web designers who know next to nothing about universal design may need a little more help getting in the habit of building accessible web applications. But with the first couple chapters, which introduce and promote the concept of universal design, those in the field will have a pretty good idea of why it’s important and how to approach it on a basic level.

It’s ironic to me that web designers and developers are often manic about validation—they’ll proudly show their sites are XHTML-compliant and pooh-pooh those that aren’t—but sometimes don’t know much about all the factors involved in universal design, which is probably more important to their clientele. I would recommend any web designer or developer to pick up Universal Design for Web Applications, supplement it with online material from W3C and other accessibility resources, and change the way they construct their web products.

Universal Design for Web Applications
Wendy Chisholm and Matt May
Published by O’Reilly
US$34.99
Rating: 9/10