Articulated

HTML 5 takes us back to the future

The more things change the more things stay the same.

A collection of evolving technologies for media development are bringing us backwards in time, or perhaps around to, and ultimately through, the old promise of digital design and into a new world where designers can once again be designers, leaving the production to the professionals. Read the rest of this entry »

Web type, layout and testing

A List Apart’s most recent issue is about web type. There is a lot of chatter on this topic. Some of it has to do with the launch of Typekit, a web service that allows licensing of fonts for use on the web. In addition to Typekit, ALA also mentions Typotheque and Kernest. I’ve been using a few good free fonts from FontSquirrel for my websites along with my own font. Clearly, web fonts are going to explode in 2010. Along with mobile websites, this is clearly the next leap web designers have to take.

The articles also had numerous links to online resources for web designers. I liked:

• Web Font Specimen a tool for testing the display of fonts that are applied to a web page using @font-face
• Litmus a fee-based service for browser testing. This is a much more user-friendly and reliable version of what Browsershots does for free.
• 960.gs is a CSS resources for developing a website using the very popular 960px grid system. Grid systems are a good idea in general. This is just one of many possible systems.

The deep end

It could be a mistake, but I am attempting to construct my new website home page using Flash and ActionScript 3. Unlike the more accessible ActionScript 2, AS3 is a real programming language. I am not a real programmer. This could be a difficult project.

The difficulties begin with the documentation. I think the authors of the Flash Help pages assumed the readers would be programmers. Learning AS3 means learning to understand the terms used to describe the various objects, parameters, and methods provided for by the language.

Testing is also difficult. Some of the actions I want to enable are simple: button states, status checks. Some are more difficult. I have become a fan using interactions between Flash and HTML and the things that jQuery can facilitate. When I start incorporating AJAX requests, the points of failure in the test of any feature multiples. Is there a problem with my ActionScript, the JavaScript, or with the resource I am requesting through AJAX?

A starting point for solving these problems might be the development of a better error tracking scheme. Within the Flash authoring environment, I can use trace actions. Flash will also generate error message when something is wrong. JavaScript errors can be tracked using Firebug (something I have learned I cannot live without). But when a SWF file is being run within an HTML page, there is no easy error checking. Any error messages must be tracked with event listeners. The output needs to be displayed on the animation stage. Perhaps I should create a reusable widget that can be applied to any Flash file for tracking this information.

I am also struggling with justification for using Flash. Most (but not all) of the actions I’d like to enable with Flash could be done using HTML/CSS/jQuery. Why go through the pain of developing all or parts of my website using Flash? The answer I come back to is “so I can learn to swim.” Sometimes, the best way to learn something is to jump into the deep end. The knowledge could be valuable.

Script to script

Warning: this post is for client-side engineering geeks. This is not for designers. Run away now.

Using Flash, I have developed a widget that can easily be applied to a website. The widget loads data from an XML file and creates an interactive interface for viewing the data. For my latest client, I decided to modify the widget to read data from the HTML page containing the widget, rather than from an secondary file. I want the HTML page to display the data for visitors who do not have the Flash browser plug-in and serve as the source of data when the widget is displayed for visitors who do have the Flash plug-in.

To make this happen, I tried to send the HTML-structured data to Flash using SWFObject and flashvars. jQuery code identified the HTML element containing the data, assigned it to a variable, and passed that variable to Flash when the widget was loaded into the page. Within Flash, the function normally used to process XML was modified to parse the data in its HTML format. This was a failure. I was unable to get Flash to recognize the contents of the variable as and XML object.

For my second attempt, I tried something more sophisticated. I used jQuery to parse the HTML structured data and convert it into an array of objects. Each object represented a data point. I thought this would be easier. Instead of parsing the data using ActionScript, I could send Flash “pre-packaged” information. Unfortunately, I failed to realize the limits of the SWFObject and flashvars. Flashvars is an object but the object nodes must be strings. When I tried to pass my array to Flash using flashvars, the array was converted into one very long string.

Banging my head against the proverbial wall did finally yield a solution with many potential uses. Instead of trying to pass data to the SWF all at once, I used jQuery to process the data and pass each data point to the SWF as a function call. This is possible using Flash’s ExternalInterface object.

ExternalInterface allows Flash to interact with JavaScript in the containing page. In addition, you can access  ActionScript functions in the SWF by creating a reference to the <object> in the HTML that contains the SWF. Using jQuery, doing so is simple.

var pointer-to-swf = $("body").find("object").get(0);
(assuming the only <object> tag in the page is for the swf)

Once the pointer is created, you can access ActionScript functions like so:

pointer-to-swf.ASFunction(params);

To solve my particular problem, I used jQuery to gather data from the HTML in the page. The data was then passed to Flash as a function call. The ActionScript function accepted the data and added it to the display.

ExternalInterface is not a new thing. Communicating between ActionScript and JavaScript has been possible for a while now. However, jQuery has only recently made it possible to easily manipulate HTML and perform AJAX methods. Combining jQuery with the ability to communicate with and control Flash opens up some big doors.

The biggest discovery, for me, is an alternative to flashvars or data loading methods within ActionScript. I can, instead, pass information to Flash as needed using jQuery.

Mobile Me

Several friends have created their own start pages. There are online services that do this for you – basically a way to have online bookmarks. It’s a good idea. I don’t always work on one computer or with one web browser, and keeping bookmarks synchronized is not feasible. So a personal start page is a nice solution. It also allows you to design what it looks like and organize the content to fit precisely to the way you work – if you’re so inclined.

I finally realized that there were too many good links I’ve forgotten. I’ve used Facebook and this blog and my web browser to save links that I felt were worthy of remembering, but that’s too many places. I don’t always browse my bookmarks or read old posts, so the links are forgotten. By creating a personal start page, I can always have these links at hand. I’ll remember to return to these sites and see what’s new. And my personal page can accessed wherever I have an internet connection.

Which brings me to the next part of this endeavor. My connection to the internet is often my phone. So I should have the page bookmarked in a way that’s easy to get to. The iPhone provides a great way of doing that. You can create a button on the home screen of the phone that will link you directly to a web page. It’s like a bookmark, only better. And it works for any web page. Unfortunately, the default icon that the iPhone creates for a web page is a very tiny thumbnail of that web page. This is basically useless. I don’t understand why they didn’t just use the site favicon. Apple did provide for something very similar to a favicon. If you place a 57×57 pixel png file named “apple-touch-icon.png” in the root directory of your site, the iPhone OS will use that image as the icon for your bookmark button. The OS will even round the corners of the image and apply the “shiny surface effect” to the icon. More about how this works can be found in this blog post by Drew McLellan.

Of course, bookmarking my personal start page is only the first step. To do this right, my start page should appear properly formatted for mobile viewing when I am on my phone. The iPhone will display normal web pages, but they are not the most convenient for the small screen. When it comes to mobile web pages, one of the best examples is the ESPN website. They did an amazing job creating a first rate browsing experience for mobile viewers. Their site is complex, so they serve up a completely different set of pages to mobile viewers. I am creating a single page. I’d like to accomplish my goals using CSS.

ESPN will serve as a useful case study for a mobile site. I suggest using a development tool to load their mobile web pages on your computer and inspecting the code. They’ve done nice work. However, to differentiate the look of a site for different devices using CSS, I suggest starting with an article from A List Apart that was published earlier this year. They break down the basics. David Storey also has a good post about developing for the iPhone on My Opera.

I still have work to do, but the beginnings of my mobile stylesheet are in place. It seems to work like a charm. I’m going to have fun when I start developing mobile websites for clients.

@fontface resource

I stumbled upon an awesome website today. It is called FontSquirrel. FontSquirrel is one of the many online free font catalogs. Unlike the others, this website offers something unique: @fontface kits. A kit is a collection of font files and CSS code that you can download install for your website. This is a wonderful tool for website designers. The @fontface protocol is relatively new. It’s nice to see online resources finally providing fonts and tools for designers to take advantage of the capability. It really opens the door, at last, for online type freedom.

FontSquirrel also has a very interesting tool offered in as a “beta”: the @fontface kit generator. You can upload a font and have the website convert it into one of their kits, complete with proper font formats and CSS code. Obviously, they would prefer you to obey license agreements from foundries. However, if you’re like me and you have your own TTF fonts, you can have their generator provide you with the files required to deploy your font online. Way cool.

The ways of the master

I’m a little annoyed at Joomla today. One of the ways in which pages are created on the site is by selecting what I call a view: a predetermined layout used by Joomla to display articles from a section or category. However, for each category or section, there are really only two views to choose from. Neither option is particularly compelling.

A quick search of the Joomla website did not help. It appears that there hasn’t been much work done to create additional types of views that can be added as plug-ins. That likely means most of the work on this problem has been done on an individual basis by PHP developers putting together Joomla sites for singular purposes. These are the people that must be sought out for their knowledge and inspiration.

I asked the oracle for a gift of said wisdom and the oracle gave me this website: The Art of Joomla. The site is authored by self-proclaimed Joomla master Andrew Eddie. I don’t say this in jest. As far as I can tell, he is a Joomla master, and I must now become the student. I am fortunate that there are those people out there willing to share the wisdom they have gained through experience. Hopefully, this will result in improvements in my Joomla website.

JComments

I am preparing a new website using Joomla. Why? To learn something new. I created my Haunts page to learn Google Maps. I created this blog to learn something about WordPress. My new site, which is still being written, could technically have been developed using WordPress as well. WordPress is a great product that has matured well and has a great user interface and lots of developer support. Joomla is relatively young and – as I’ve discovered – somewhat lacking in features. The list of available extensions seems limited in comparison with what is available for something like Drupal. And, of course, Drupal has a much larger core feature set.

As time goes on, better extensions are being written for Joomla. A good example is JComments, an extension which was recently added to the catalog on the Joomla website. I had previously installed !JoomlaComment for my site, which at the time was the best of the options I had reviewed. However, I was disappointed by the templates provided for the formatting of comments, which are all dependent on ancient HTML table layouts. By comparison, JComments uses standards compliant HTML formatting, AJAX actions, and a nice simple theme. Because of the HTML compliant formatting, it should be very easy to apply my own CSS styling and make the comments match with my site design.

Hopefully, the maturation process of Joomla will ultimately be reflected in its documentation. Most of the documentation appears to be very technical. It’s for PHP programmers. At least they have something to work with. For those of us who are content managers, or who are working to design and theme a Joomla site, There isn’t a lot to go on. This was also my complaint about Drupal, although Drupal has been around long enough (now in version 6) so that a Google search of a Drupal question will usually yield an answer. There are also Drupal books that can help designers to learn the ropes. I haven’t done a search for books yet, but there’s much less online discussion about Joomla, resulting in fewer successful searches for answers to theme-related questions.

To date, my Joomla experience has been positive. I would not recommend it for every website, but does work for the simple website that I am building. As I said before, my site could be accomplished using WordPress, but I can see where Joomla helps. I also like the simplicity of the Joomla back-end, which is refreshing compared to the mess that is the Drupal interface. As my experience continues, perhaps I will come to understand and appreciate more of what Joomla can offer.

Browsershot myself

I am reading a book about how to create themes for Drupal. I am not a fan of Drupal. I got accustomed to working with Plone – a very user friendly alternative. Because of this, my experience with Drupal has been disappointing. Likewise, I am not having any fun with this book. The best thing I can say about it is that it makes a good sleep aid.

However, the book has provided one useful reference: Browser Shots. This free web service will provide screen shots of your website using a wide variety of web browsers for Linux, BSD, Windows, and MacOS at various screen sizes, color depths, and with various features (such as Flash) enabled or disabled. For someone who doesn’t have access to a 5 computers running 90 different browsers, this is an incredibly useful service.

However, this is one feature of this website that my Drupal book did not mention: the website seems to have established a gallery of websites it has captured. This gallery allows users to rate the websites, and presents the top-rated websites on the home page. This is a great resource when seeking a little web design inspiration. I already found one website (for a web development company in Australia) that has given me food for thought regarding the webslingerz website I put together last year. I will definitely be coming back to Browser Shots often to look around and get ideas.

New Fave

I’ve been working on updates to the design of this blog. I recently sat down and thought about the design and finished (at least, in Photoshop) the unfinished parts. Now I just have to deal with the implementation. That’s been tricky. I’m still learning about WordPress and the design I am using is not the most developer-friendly design I could create.

During my evening marathon session of debugging and testing, I came across the blog of the ScriptyGoddess, who showed me how I might customize the search form for my WordPress theme. Turns out, this blog holds a wealth of front-end developer information. One of the more recent posts actually might come in handy in a week or two when I have to develop a website for a television program. Anyway, I know I’ll be referring back to this in the future.

Meanwhile, I have a few more things to implement before the design of this thing is finished. Then, I can move along to some of my other projects.