Code
Dear HTML, CSS, and JavaScript: Flash is more flexible → permalink
Nate Klaiber is spot on. I had this same conversation with Jason at ThunderTech a while ago. As much of a proponent I am for web standards, it’s not the technology that’s to blame.
One of the key issues in this space is the lack of a good IDE for developing media rich websites without Flash. That’s what makes Flash so attractive to designers, the ease of creating these multimedia based websites. Dreamweaver doesn’t come close.
Over the last few years we’ve seen major Flash studios, like Fantasy-Interactive, make the move to web standards.
Even though HTML/CSS/JS is far more semantic, more accessible and more flexible, we don’t possess the tools to build a really top-notch IDE.
The bigger question is… should we bother building such an IDE? I’m not so sure. It’s the transparency of the markup that makes HTML/CSS/JS so accessible. Abstracting that markup in an IDE would probably bring along the same issue’s that plagues Flash today.
How to build a Gantt Chart with the Google Charts API
The Google Charts API is an excellent way to add high quality charting to your web application. We first started working with the API as part of the Simpli5 dashboard development, and were quite impressed with its functionality and ease of use. Wrapper classes were developed and added to our Sandstone Application Framework to make the addition charts to Simpli5 and other applications as simple as possible.
An application we are developing for a client requires some graphic representation of progress along a timeline of multiple steps. A Gantt Chart is the obvious best solution, but alas that is not a chart type available from the Google API. However, a Gantt chart is really just a special type of bar chart, and bar charts are available in the API. So the question was, how can we make the standard Google bar chart display as a Gantt?
The Google Charting API Developer’s Guide does an excellent job documenting the “how” side of things, so to avoid repeating a lot of stuff from there, we’ll just focus on the “what” of building a Gantt chart with Google.
Fixing Disappearing Cursors in Firefox
The past few days I have been debugging the User Interface for Simpli5. Today I wrestled with a particularly frustrating issue in which cursors were completely vanishing from inputs in Firefox. While it did not affect the interaction of the input, I could still manipulate the text, it did cause quite an annoyance.
Here is a quick example which demonstrates the problem:
The problem is caused by the change in Firefox’s current rending frame. Setting overflow:scroll on our #Container div causes Firefox to use that div as it’s current rending frame. Thus, the cursor is being rendered on the #Container, not on the #Dialog div, which contains the input. Effectively, the input is covering its own cursor.
The fix is a simple change in CSS inheritance. Without setting an overflow setting on the #Dialog div, we are inheriting the overflow:scroll from #Container. By setting the #Dialog div’s overflow setting back to it’s default overflow:auto we are changing Firefox’s rendering frame to the #Dialog div, thus bringing back our cursor.
Here is the fixed example:
Thankfully, Mozilla has fixed this problem in Firefox 3.
Google Chart’s Resolution
A few days ago I posted my frustrations with Google’s charting API security. While I still believe there are some issues that would plague banks, government and other institutions that have highly sensitive data, I have found a solution to our problem.
Google Charting Frustrations
Last week Google released its Charting API which generates PNG based image graphs for your data. The data is passed to them through a URL and returns the image data.
Placing this image tag in your HTML will generate the following graph.
Bridging the Gap Between Compile Time and Run Time
As the lead systems architect here at Designing Interactive, I enjoy reviewing new code patterns to see if there are areas in our codebase in which they could be implemented. Recently I spent some time digging into Martin Fowler’s Active Record pattern. While a direct implementation of this exceptional code pattern doesn’t fit within our Sandstone Application Framework, I was inspired to review how we have implemented our business entity classes to see if we could implement some of the more fundamental concepts of the Active Record code pattern.
Unobtrusive Javascript Controversy
As a professional and bleeding edge design firm we work hard to stay on top of new technology. We put careful thought into our coding practices and conventions. But what happens when a previous convention has room for improvement but the cost of change is prohibitive? We certainly don’t suggest partial implementation. If it’s worth implementing, it’s worth implementing fully.
Our current controversy revolves around the topic of unobtrusive javascript. We (the staff at Designing Interactive) all agree on the benefits of unobtrusive javascript:
Reasons to Validate
Validation is the process of ensuring that your web pages (XHTML, XML and CSS files) meet the standard set aside by the w3c, the organization responsible for these markup languages. Validation is similar to running your documents through a spell checker for errors, ensuring that the data sent to the web browsers is well formed and syntactically correct.
Search
Popular Posts
- 50 Tips To A User Friendly Website
- My Favorite Pomodoro Timers
- How to build a Gantt Chart with the Google Charts API
- Why Flash is Mostly Bad
- Sharing the Grid
- 10 Tips to Better Google Wave Conversations
- The difference between User Research and Usability Testing?
- How to Label Submit Buttons
- Our New Development Process
- Paper Prototyping vs. Balsamiq Mockups
Latest Comments
- Nate Klaiber → “ The design industry is plagued with the misconception that product manuals are evil. These designers believe that your product should be intuitive enough to use without a manual. While there is a certain truth to this, there are many viable reasons for product manuals to be used. There needs to be a certain…”
- Joe Fiorini → “ The design industry is plagued with the misconception that product manuals are evil. These designers believe that your product should be intuitive enough to use without a manual. While there is a certain truth to this, there are many viable reasons for product manuals to be used. There needs to be a certain…”
- Roger F Carver → “ The Google Charts API is an excellent way to add high quality charting to your web application. We first started working with the API as part of the Simpli5 dashboard development, and were quite impressed with its functionality and ease of use. Wrapper classes were developed and added to our Sandstone Application Framework to make…”
- Nate Klaiber → “ The “I agree” checkbox has become an interface standard on registration forms. “I agree to the terms and conditions.” While it’s purpose is generally understood by the consumer, it is a key source of frustration for people registering for accounts. eBay's Registration, as an example Why it’s overlooked: Checkboxes are small, particularly ones which aren’t grouped…”
- Josh Walsh → “ Most of the value you gain from a usability testing session comes from the analysis after the session is complete. I have been involved in a few sessions recently where no formal analysis has been conducted. I believe this is a mistake. Traditionally, the analysis portion of a usability session takes quite a long…”