Here's a sneak preview of our next SyberWorks e-Learning Podcast Series episode, an interview with Dave Powell, Documentation Manager for SyberWorks, Inc.
Adobe has recently announced a new product in the Flash Platform - it's called Flash Catalyst. Now designers can use the products that they are familiar with, like Photoshop and Illustrator, to design interactive environments and components. They can then import them into Flash Catalyst and activate any element as a component that can then perform certain functions.
Transitions and animations can alse be added with a simplified timeline. The metaphor for creating interactive environments is pages, which is similar to Fireworks. The entire concept is similar to what Dreamweaver was all about - designing web pages without knowing any code or having to write any code.
Flash Catalyst will write all of the code as you create and publish the interactive projects. The idea is that the designers will use this tool to build a framework or wireframe of the project and then hand it off to the developers to tweak the code that it creates. The base example of this is that you can design an interface for user interaction, but all of the database calls and form information parameters need to be passed via ActionScript or MXML.
The code that Catalyst produces is Flex code or Flash Builder code. Flex has been recently renamed as Flash Builder to bring the product more in line with the other products in the Flash platform.
It will be interesting to see how Catalyst will be received by the design community. You can find Catalyst at labs.adobe.com and download the free Beta version now.
The hover pseudo class is very powerful and can be used on items other than just simple links. Used in conjunction with JavaScript libraries like JQuery or CODA, the hover class can become something more.
Warning for the weary: IE 6 only recognizes the hover pseudo class on links, no other elements.
In Maximize the Use of Hover, on Web Designer Wall, there are some great examples of what the hover class can be used for. Tool Tips, hidden info, and other applications go beyond the basics.
Displaying/hiding divs or other elements on a page, is a common practice with CSS/JavaScript. The practice presents a problem with accessibility. Essentially, display: none; tells the browser to think of the element as if it doesn't exist. From an accessibility standpoint, that also means that a screen reader, will not read that element at all.
Since there is still good reason to remove elements, even if only temporarily, from a page, what's the solution? You can move the element off the page, as in the following manner:
.remove { position: absolute; left: -9999px; }
The negative value pushes the element off the page, but doesn't completely remove it. Therefore, the element is still read by screen readers and is still accessible.
CSS is supposed to be relatively simple, and in it's current form - which has been around for a while - it has some glaring limitations. Dave Minter explores ten possibilities to make CSS even better. The list includes:
There's a lot of software envy going on at Microsoft when it comes to some essential web tools. Adobe has long held a widely established platform for publishing and document delivery with Acrobat. With the acquisition of Macromedia (2004), Adobe had its eyes set on Flash, Macromedia's ubiquitous web animation and interactivity platform. Adobe has expanded on that platform and added Flex and AIR to the mix. YouTube, quite arguably the biggest online video sharing site, has pinned its platform with Flash technology, using Flash's streaming capabilities.
Something interesting happened last week though. Netflix, the online video rental empire, who has been delivering it's Instant Watch technology to PC users for almost a year now, decided to use Silverlight as a method to deliver Instant Watch to Mac users. This begs the question "Silverlight vs. Flash"?
The answer may be easier for you depending on your server environment. If you are a .NET, Microsoft IIS environment, then Silverlight can take advantage of those areas. So developers on Microsoft platforms will be able to leverage the power of Silverlight quickly and easily.
Conversely, developers who are not in the Microsoft sphere (or could care less about Microsoft's publishing and development platform) may not want to migrate to a relatively unsupported web technology. After all, the Flash Player has over 90% market penetration, whereas Silverlight is relatively new. Not only that, but developing for Silverlight would mean starting all over again with new programs, syntax, etc. Probably not a good shift for those comfortable developing on the Flash platform.
According to Microsoft's Silverlight website, an Analysis Report shows the differences between the two platforms and how an entrenched, proven technology, such as Flash, has the werewithal to move forward in the marketplace, whereas Silverlight is the up and comer that has to prove itself.
So brace yourselves, developers, the browser wars may be over, but the platform wars are just beginning.
Serving up pages for multiple browsers reminds me of the way things were handled in the 90's. But there's a smart way to deliver pages for different browsers using a technique called 'progressive enhancement.' Progressive enhancement allows us to use CSS as we know it and a few conditional comments for IE, to deliver the same content to multiple browsers.
The deal is the way in which the CSS files are linked. This is nothing new, but part of progressive enhancement is separating the main style sheet into several style sheets. For example, a type.css, color.css, and layout.css file in addition to the main.css file, each controlling various aspects of the site. The main.css file is kind of a vanilla flavored, all-purpose approach to the look of the site, but the specialization of the other CSS files offers flexibility for future changes.
These secondary CSS files can then be imported with the @import directive. Using the media attribute, the style sheets can then be targeted for specific usage: screen or print. This will change the way older browsers see your pages. Yes, it's unfortunate that not everyone is using the latest browsers. I cringe to think that anyone is still using Netscape 4.x or IE 4. It's hard to believe, but very possible.
Progressive enhancement is not necessarily something new, it's more about the management of CSS files and the delivery of the look and feel of sites for various browsers.
While we are all waiting for the next release of CSS and for more browsers to support the latest specification, some people have taken it on their own to further the usability of CSS. Nicholas Cannasse has developed HSS, which extends CSS.
What's great about HSS is the ability to create variables. For example, the following variable could be used throughout a stylesheet:
var mycolor = "#3c3c3c";
Then, that variable can be used anywhere by calling it with this syntax:
color: $mycolor;
If I then change my mind on a color attribute for the design, I only need to change the variable and the rest will update.
Complex styles that involve a series of attributes applied to a container and nested elements can be treated with Nested blocks. Nested blocks allow you to simplify the number of calls to a container and its nested elements so that there's less declarations in your CSS file. For example:
Sure, a lot of browser manufacturers these days claim their browsers are faster than the other guys. How fast does your site load? "10 Easy Steps to Great Website Optimization" looks at some obvious and not-so-obvious ways to speed up your page load. The obvious things are compressing images to the nth degree. Using appropriate image formats to compress the images heavily, but retain maximum quality. Any good Photoshopper would be able to do that.
But the not-so-obvious tips include speeding up CSS by using the right selectors. Putting
at the bottom of the page instead of the top and others. Bandwidth is increasing for some, but connection speeds still vary widely. It's best to tighten up those pages for quicker delivery.
SyberWorks e-Learning Podcast Series 
Join the SyberWorks Learning Management Technology Group
on Linkedin
Follow SyberWorks on
Twitter