Tag Archives: web

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.

How Adobe FormsCentral Saved My Project

Adobe FormsCentral, one of their growing number of apps at Acrobat.com, has been on my review list for some time but didn’t have a great angle to write about until recently. Adobe FormsCentral literally saved a recent project of mine, and I was surprised how its strengths dovetailed with the technical issues I was facing.

The project objective was straightforward:

  • Build an online registration form
  • Include payment integration with PayPal
  • Send email notification to the user and the client on submission
  • Store registration data or send it via email to the client

The client’s website is constructed with Ning, which made its name as a social community builder but now is a blend of that and a typical content management system. Unfortunately, Ning’s backend is fairly difficult to work with unless you are doing basic CSS or HTML changes. The Perl script that we used last year to submit the form data was not allowed by Ning, effectively scuttling our existing solution. I was worried that Ning would force the form to be hosted elsewhere until I thought about FormsCentral, which has a few characteristics that made it ideal for this job:

  • A robust set of form elements covered all the inputs I needed.
  • The ability to embed my form on any webpage with an iframe let me put this form on a Ning page with no problem.
  • The FormsCentral service handles all the notifications and submission data storage, so I didn’t have to write code to handle it myself.
  • Multiple user accounts through FormsCentral meant that my client could run reports and check registrant data as easily as I could.

FormsCentral comes loaded with 50 templates for various industries, but I only needed five text fields so a blank template was adequate. In the Design tab, I was able to make fields required, limit the total characters, include help popups and restrict input to certain types like text, number or email. These are all typically included with forms services like FormsCentral. The one design feature that is completely absent is the ability to dictate design with CSS, which I’d normally use to design a web form. I understand Adobe’s focus on non-programmers, but CSS could really make it easier to apply design elements throughout forms.

The Options tab pretty much covered the rest of my project requirements. I created a Submission Receipt that is sent to all users after they complete the form. I also set up a notification to be sent to the client and myself after every submission, though I was a bit disappointed my client had to create an Adobe ID and log into FormsCentral in order to be added to the notifications list. I also noted that I couldn’t create my own HTML email template to be used for notifications or receipts.

Payment processing is also set up in FormsCentral’s Options tab. Configuring PayPal payments with this form was the most difficult step to master. Registering the PayPal account with the form is easy enough but connecting the form fields to the purchase functionality can be confusing. In the Payment Processing settings, I had to specify the purchase field, quantity field, price and description. The user selected their quantity in a particular field on the form, so that was used for the quantity field. (I also could have set it for exactly one item, which is helpful in some situations.) The purchase field is what confused me because, in this case, the form’s Submit button is also considered a valid purchase field. It was what I needed for this project.

FormsCentral forms can be distributed up to three ways:

  • An HTML page hosted at FormsCentral. An example is https://adobeformscentral.com/?f=zGP2-N2bVVS-pV5I4D7hMQ.
  • A PDF form with interactive form fields. This can be submitted by the user when offline, and the data is stored locally until an Internet connection can be made.
  • Embedded via iframe into an HTML page. The embed code looks like this:


script type=”text/javascript” src=”https://formscentral.acrobat.com/Clients/Current/FormsCentral/htmlClient/scripts/adobe.form.embed.min.js”>
script type=”text/javascript”>
var fzGP2_2dN2bVVS_2dpV5I4D7hMQ = new ADOBEFORMS.EmbedForm({formId:”zGP2-N2bVVS-pV5I4D7hMQ”, server:”https://adobeformscentral.com/”, width:640, showHeader:false, transparent:true, widthAfterRedirect:640, heightAfterRedirect:400});
fzGP2_2dN2bVVS_2dpV5I4D7hMQ.display();

You can see some embedded parameters, such as background color, form width and the iframe size after the form is submitted and a redirect URL is specified. (I didn’t use this because FormsCentral lets you show a confirmation message after submission.)

The View Responses tab is where the client and I could see the submitted data. Everything is stored, and PayPal even returns the transaction ID and total dollar amount to FormsCentral so the payment data is complete. A report can be exported from the File menu within FormsCentral, or you can view the Summary Report tab to see some charts based on your data. These did not help me much because most of my data was non-numerical, and the charts can only display data as a full count or an average. My client and I focused on the View Responses tab, which had all the data we required.

The Ning platform could accept FormsCentral’s embed code since it’s pure HTML, and the form itself worked perfectly. This got us around the limitations imposed by Ning and also provided me the data handling that I normally would have executed with my own scripts. Ultimately, FormsCentral gave me more tools with less work and helped both me and my client be more efficient. FormsCentral does have its limitations, mostly imposed by the product’s emphasis on the non-programming user. However, FormsCentral is designed for projects like this one and I was lucky to consider it!

FormsCentral can be run as a 30-day trial for 99 cents or paid monthly for $14.99 per month. This allows up to five forms and up to 500 responses. An annual rate of $143.88, recently reduced, provides 5,000 responses per form with unlimited data storage and unlimited forms. Note that the Acrobat.com apps, including FormsCentral, are not included in Adobe’s Creative Cloud product.

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

Susan Weinschenk’s 100 Things You Need to Know About People Books

Designer book cover

Three years ago, I highly rated Susan Weinschenk‘s book Neuro Web Design, which explained how to apply psychology principles to web design and build websites that are more appealing, easier to use and more memorable. Susan has written two more books that continue to apply psychology to technology and appeal to designers and presenters. Both follow a similar format: 100 Things Every ____ Needs to Know About People, with 100 ideas grounded in psychology and applicable to designers’ and presenters’ projects.

As with Neuro Web Design, both 100 Things books are well-researched. Susan has a deep knowledge of various studies and psychological findings and explains them without being too technical. The studies are also quite interesting and revealing in themselves, and I liked reading those before anything else. The book designer also did a good job building charts when needed to illustrate psychological concepts. The rest of the books’ design is colorful, incorporates useful sidebars, and provides a “takeaways” callout at the end of each section to communicate the most essential points.

Presenter book cover

Susan also does a good job connecting psychological truisms with scenarios in the design and presentation worlds. The “completeness” ratings you see on online profiles—such as a LinkedIn or Dropbox account—plays into the fact that “people are more motivated as they get closer to a goal.” “People read in a certain direction,” so be sure to stand beside your presentation so you can be the point of entry in how attendees “read” the stage. Rule 18 in the designer’s book—”People read faster with a longer line length, but prefer a shorter line length”—even explains the differences between text on a webpage and text in print, and it’s all based on recent research. These books are based on evidence and tied directly to our industries.

However, Susan doesn’t always do a good job connecting the rules specifically to the designer’s or presenter’s world and some don’t apply to our work as well as others. “People can be in a flow state” and work with focused attention, but this applies to any work—not just designers’ work. Same thing with “people can’t multitask.” I think the book for presenters is more focused on aspects of presentation than the designers’ book is focused on design. Ultimately, I think every point Susan makes is useful but some are more useful than others.

Still, both books are great material and a good value. Designers and presenters sometimes build their products by the book and don’t always think about why some approaches might work better than others. Susan’s books help you understand the “why.”

100 Things Every Designer Needs to Know about People
100 Things Every Presenter Needs to Know about People

Susan Weinschenk, Ph.D.
Published by New Riders
US $34.99 for Presenters, US $29.99 for Designers
Rating: 9/10
Buy Designer and Presenter from Amazon.com

BOOK REVIEW: The Tangled Web And Untangling Web Security

Tangled Web book cover

Front-end developers are being assigned more and more projects that require cross-domain communication with data services via JavaScript, and so web security and handling cross-domain applications has become more important. I find that many developers don’t want to handle such mundane details—they simply want their app to work like it should—but they have to learn these things in order to accomplish their task.

Michal Zalewski, who has a strong pedigree in web security circles and wrote Google’s own Browser Security Handbook, has a really excellent book out called The Tangled Web: A Guide to Securing Modern Web Applications. I am really impressed by how thorough and comprehensive the book is—it’s 300 pages, quite dense and covers all the major topics on web security I can think of. It’s also very technical, so much so that I think its target audience is back-end developers and system administrators more than front-end developers. I’m not sure yet if front-end developers need to know everything in The Tangled Web or should worry more about the bits that they can do something about and leave the rest for their colleagues on the back end.

Fortunately, most of the early chapters cover familiar front-end topics such as HTML, CSS and JavaScript and I really recommend those for front-end developers. They will really open your eyes to all the little security imperfections in the code we write every day, a lot of which seem safe but can cause big problems. The Tangled Web really opened my eyes on the subject, and I’m looking forward to making my code more airtight.

There’s not much I can say against The Tangled Web: it is comprehensive, clearly written, and technically accurate. I think front-end developers can definitely get a lot of use out of it but some chapters cover topics they can’t always do anything about, such as server connections. Back-end developers, database programmers and system admins will probably have the same reaction to those early chapters on front-end programming. Before you buy, read the outline of The Tangled Web’s chapters and see if the book is a good fit for you.

a href=”http://www.amazon.com/gp/product/1593273886/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&tag=wwwjeremyschu-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=1593273886″>The Tangled Web: A Guide to Securing Modern Web Applications
Michal Zalewski
Published by No Starch Press
US $49.95
Rating: 10/10
Buy from 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: Google Analytics Is More Than Inserting Code

google-analytics

I’m always impressed that O’Reilly’s books drill so deep into a topic they can squeeze out a 200-page book about something mundane like Google Analytics, the analytics engine used by countless websites. Most developers don’t do much more than implement the code and watch the page view statistics, but Google Analytics by Justin Cutroni (a Google Analytics Certified Partner) covers a lot more.

I was really impressed by a couple things in Google Analytics. Firstly, the book explains Google Analytics’ back-end processing far more than any source I’ve seen before. I found it intriguing from a developer’s perspective. Some may not find these details very useful but there are some practical applications for this knowledge. For example, knowing how the analytics engine parses results helps us know how long it will take for recent data to affect the dashboard.

The other aspect of Google Analytics that really impressed me is the chapter on advanced tracking techniques. It’s a large chapter (50 pages) that alone can really extend the usefulness of Google Analytics beyond what most people get out of it. The information on tracking e-commerce alone covers the price of this book. Generally speaking, the advanced information is what makes Google Analytics worth reading.

Google Analytics is also well-written and I like how Justin added some working examples and exercises on implementation, so readers can use techniques right away. Not everything in Google Analytics will pertain to a customer’s needs, but developers who use Google Analytics should at least be aware of all the service’s features—and Google Analytics covers pretty much everything.


Google Analytics

Justin Cutroni
Published by O’Reilly
US $29.99
Rating: 10/10

Sometimes It Takes A Detective To Solve CSS

css-detective

It’s probably safe to say that the process of developing a website requires debugging issues that just don’t make sense. Floats don’t clear. Web fonts don’t display. Internet Explorer 6 doesn’t do anything right (at least it’s on its way out). Solutions are sometimes easy to find and apply, but many times a bug doesn’t seem to have a logical solution!

This is why I like the structure and premise of The CSS Detective Guide by Denise R. Jacobs. Bugs can be mysterious and the codebase can look like a crime scene, so why not frame the process with that in mind? The book devotes a couple chapters to general HTML and CSS knowledge and two more to bugs, debugging techniques and things to look for when debugging CSS.

The other six chapters in the book are case studies with real-world code and bugs that Denise walks through and solves with the reader. This is the kind of book that would have benefitted greatly by providing live code that the reader could load on their computer, test and revise, but even though the book has a companion website (www.cssdetectiveguide.com) there is no code to download and work with. It is mentioned that files and live versions of the cases are “coming soon,” but the book was published in April.

HTML and CSS code is published within the book so readers have at least that to go on when learning how to debug the CSS. I thought the case studies were quite good, with several bugs in each—some specific to Internet Explorer but many others that apply to all browsers, or to other browsers like Firefox.

I think many CSS books on the market are more high-level or experimental (Dan Cederholm’s books come to mind) and don’t focus on the nitty-gritty details of CSS bug fixes. Dan’s books are exceptional resources for CSS pros but The CSS Detective Guide is written for those learning CSS or those wanting to improve their debugging techniques. It’s also fun to read thanks to the mystery/detective/crime story angle, which I think is a nice touch in a technical book.

The CSS Detective Guide
Denise R. Jacobs
Published by New Riders
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