Mark DuBois Weblog

I have been examining the recently released Windows 8 Developer Preview. Obviously, my focus is on web development related materials. I was excited to see that JavaScript is included as a language choice with Visual Studio 2011. That will (hopefully) be the focus of another weblog entry in the near future). Today, I wanted to focus on my initial experiences with Internet Explorer 10.

Before getting started with the specifics, I think it important to note that Microsoft appears to be developing for emerging technologies and their associated human computer interactions. I suspect we will be seeing a lot of new hardware choices before Windows 8 is mainstream.  The emphasis on Windows 8 is obviously mobile and multi-screen. This does not always seem to play well on a more traditional desktop/ laptop machine. Since I don’t have a recent Windows phone, the Metro interface is not as intuitive as I had hoped. I experienced a fair amount of fumbling until I “got it.” This was likely compounded by the fact that I was testing in a virtual environment on both desktop and laptop machines (none had a touch interface).

My initial plan was to download the .iso file and install using VMWare Player. Thanks to a couple of timely tweets, I saved myself a significant amount of grief. Apparently, there were initial problems with trying to launch that in VMWare (although many observed the new blue screen of death). Therefore, I chose both Oracle VirtualBox and Microsoft Hyper-V virtual environments. The install went smoothly in both. The initial screen is shown below. Obviously, I would then choose Internet Explorer from among the options. One can click on the image below to see a larger version. This is true for all the images below as well.

When I clicked on Internet Explorer, I immediately was taken to the Metro version (yes, there is also a desktop version). The Metro version has little browser chrome. One must move the cursor to the bottom (or right click) to open the interface. The image below shows the interface (including the address bar). One will note there are a limited number of choices (hopefully this will improve in the final version). I also note much better support for advanced CSS-3 (including rounded corners, shadows and so forth). I also noted that one does not need a vendor specific prefix (like -ms or -webkit) for most of the CSS-3 features to be recognized. Here is what a page looks like in the Metro view.

Ok, that is great – now, how do I view the source code? I know, only Mark would want to know that. Short answer is that you need to go to the more traditional desktop view. And, how do you get there, you might ask? Although not intuitive, one clicks on the second icon form the right on the bottom.

This activates the desktop view (which is another copy of Internet Explorer 10). Note that you can use the traditional Alt-Tab and Windows Key – Tab to switch between running applications. The desktop view has more traditional browser chrome and features such as view source and developer tools. That view of the same page is shown below.

Ok, now, how do I go back (without using the Alt-Tab key combination). Turns out there is the ability to hover over the edge of the application and see the most recent application. This took a little getting used to (I suspect this is where the touch environment would come in very handy). Note the screen capture below.

Now that I am back in the Metro view, I might want to open a new tab. If one right clicks, more options appear. In this case, I already have two tabs open.

The tabs are similar to what one experiences in other platforms and their browsers (for example Android browsers). One can choose to add a new tab. This is where it does get a bit “interesting.” So, I asked for a new tab and received the following screen.

Note the back arrow in the upper left of the image above. Should I foolishly click on that (instead of selecting from the choices presented), I would get a white page. This makes sense as I did open a new tab and the tab would initially be blank. However, I need to examine the open tabs to realize this. In my opinion, this is a potential issue for those with cognitive memory impairments. In my simple mind, clicking on the back icon should close the new tab and take me back to the most recent tab I was using.

I also wanted to note that you can pin specific pages to the start menu. Note the pin icon above.

Now for overall initial impressions. The interface is somewhat intuitive (provided you have experience with smart phones or tablets). The lack of chrome in the Metro interface is a plus for those wishing to see more of the web page as an immersive experience/ app. The ability to see the page in a more traditional desktop view (along with necessary tools for a developer) is a plus. Of course, having this as a separate application will take up additional resources.

My biggest concern about the entire Windows 8 environment is that I see one could potentially lose work in progress. For example, one might have multiple tabs open in the Metro version. Perhaps one is in the middle of doing some research, filling out a form, checking weblogs, and so forth. Without right clicking, there are no visual clues that you have multiple tabs open. Therefore, one might forget to complete the rest of the form (or have it time out) before logging out. Perhaps the touch version addresses this concern. Overall, I do like the interface (and choices). However, it is a bit of a risk to diverge this far from more traditional Windows interfaces. Time will tell how risky this is.

I had the distinct pleasure of participating in the Mobile JS Summit on August 30, 2011. This conference was entirely online (using Adobe Connect). There was a wealth of information presented over the course of the day. I will try to summarize some of the highlights. The sessions I was able to participate in (either in person or by viewing the recordings) were the following:

• The new rules of designing for touch by Josh Clark – Josh began by indicating that touch screen interfaces create ergonomic, contextual, and emotional demands on designers that are very unfamiliar to those who have only designed for desktop environments. We should start paying much more attention to how toddlers interact with touch screen devices. We should also think of buttons and other UI components as a “hack” and should instead focus on being able to interact with the data directly. For example, consider how you interact with photos taken by your smart phone camera. Is there a next or previous button? We should optimize for one hand use of a smart phone and recognize the thumb covers a large percentage of the available screen real estate. Because of this, we should think in terms of content at the top of the screen and controls at the bottom. We should also keep in mind that the minimum size of interaction area should be 44 x 44 pixels (or some multiple of that). Navigation should be at the page bottom. Josh also covered things one shouldn’t do. For example, the globe of news from ABC for the iPad. While it is a technical marvel and very impressive, it is nearly impossible to obtain useful information while using the app. He contrasted this with the Solar Walk application (also for the iPad). Similarly, why does an eBook reader need a page flip display? It is like having a fake needle on a CD player. Gestures are keyboard shortcuts of keyboard interfaces. So, what does this mean for the web? Apps are creating new expectations. It is presently difficult to handle gestures on a web page. Simple swipes are a start. Consider the Flickr app for the iPad as a beginning example. Consider apps like UZU (where up to 10 fingers can be included in gestures). New platforms and UI metaphors don’t come along very often. Play with these models and learn.
  
• Mobile apps and the enterprise by Jonathan Stark – Jonathan is from the Boston area and covered development of mobile apps for really large companies. These apps often require a lot of IT involvement, interface with legacy applications, and have a short shelf life. Customers need real time access to data. These apps must be scalable as there will be insanely large spikes (which occur unpredictably). They must be extensible (from a small pilot to global). Obviously, one needs  a plan and metrics to measure success as the app is deployed. The app must also be secure. One often needs to rely on data adapters to stitch together disparate legacy apps residing in different departments. These apps often also have different audiences (direct customers, employees, and affiliates). Device hardware access if often the most difficult challenge. One can use tools like PhoneGap or rely on native coding (Java and Objective C). Tools like PhoneGap can be used effectively (if you understand their limitations). From a deployment perspective, one might want to consider third party app stores. For example, many corporations don’t want their internal apps published on iTunes.
• The realities of mobile design by Jenifer Hanen – There are lots of technologies and lots of approaches. It is like we are back in the mid-1990s. There are 4.3 billion mobile devices. Feature phones outnumber smart phones 4: 1. 500 million mobile phones connect to the Web. There are roughly 1,300 manufacturers of mobile devices world wide. Does one do a mobile app or a mobile website? Do what is best for the customer. When developing, consider having to use the application or web site in bright light (or with gloves), or with very small fingers. Some device constraints include: screen size, resolution, memory, speed, and browser(s) available. The line between feature phones and smart phones is blurring. When developing, consider bandwidth sipping. Bandwidth is very expensive in certain parts of the world. Give visitors a choice if appropriate. While there are downsides, consider that we are developing for a revolutionary set of new devices.
• From “It works” to “Wow, this is fast” by Simon Laurent and Daniel Pinter – Simon and Daniel covered development of their app – HTML4 and 5 Complete Reference and the numerous issues they encountered. They had to convert content from one format to HTML. They had to wire that HTML for convenient navigation in multiple modes. They had to create styles that looked familiar (for example iOS). They had to have tolerable performance.  Some of the problems they had to overcome included overlapping pages and long page load times. They covered the use of tools (like JSLint) to help resolve these problems.
• Sencha Touch by David Kaneda – David focused on the fundamentals of using Sencha Touch and included several demonstrations. He stressed that Sencha Touch only supports -webkit based browsers at this time (sorry Opera). He covered the fundamentals of touch events, scrolling enhancements, components, theming, and data packaging. This was a great introduction into this framework.
• jQuery Mobile by Marc Grabanski – this was also a great review of this framework. Marc covered touch friendly inputs, layout and theming, cookies and distribution. He also showed bits of the testing lab and the numerous devices being used to test jQuery mobile. He covered how progressive enhancement is built in and how jQuery mobile is also now a part of Dreamweaver CS 5.5. In addition to showcasing a gallery of apps built on this technology, he also discussed the minified library and why it should be used.
• Appcelerator Titanium by Kevin Whinnery – Kevin gave a great overview of this Eclipse based IDE. He reviewed the basic architecture and showcased a number of corporations presently using this approach. He built a simple mobile app. There is a free community edition of this product. While it requires learning new material (one can not just use HTML, CSS, and JavaScript), the learning curve does not appear to be that steep.
• SproutCore by Tom Dale – this framework was covered in depth. It arose from the foundation for tools like MobileMe. The idea is to make web pages more like desktop applications. we should be thinking of the user experience, not how to develop and deploy something in a browser. He focused on bindings, computed properties and auto-updating templates and provided numerous code examples. Much of this is built on the MVC approach (Model View Controller). Much happens long before one interfaces with the DOM. It is that DOM interface which slows everything down significantly.

What impressed me most about this conference is the amount of new information I received. This is after attending the D2W conference in Kansas City in July (where I also focused on mobile). Suffice it to say the pace of change is incredible in the area of mobile and multi-screen development. I feel very fortunate to have attended this event and  hope these notes are useful to readers. I also found it helpful to have individuals involved with various frameworks present their technologies and discuss them in depth (often one after the next). This allowed for a lot of useful comparisons. This is a fantastic time to be a part of design and development. It is rare that we get to watch the rules being written for a new means of communication.

CHOICE magazine recently asked me to review a book and published my review in their August, 2011 issue. For those who do not have ready access, I provide a copy of my review below.

Yu, Liyang.  A developer’s guide to the semantic Web.  Springer, 2011.  608p index  afp ISBN 9783642159695, $89.95

“As the title suggests, this book is about the semantic Web, the standards and technologies that allow computers to understand the meaning of information posted online.  Yu (Delta Air Lines) provides detailed discussions of core standards (e.g., RDF, OWL, SPARQL, microformats, GRDDL) along with working examples in chapters 1-6.  Chapters 7-11 provide in-depth presentations of applications such as FOAF, semantic Wiki, SearchMonkey, Rich Snippets, and others to help readers understand the potential of these applications.  Chapters 12-15 review three different applications that are created in a step-by-step approach.  The book contains numerous illustrations and code examples to facilitate an understanding of the concepts presented.  There are minor errors (e.g., Milwaukee is not a city in Illinois) and misspelled acronyms (e.g., SPRAQL instead of SPARQL) throughout.  Although this book covers numerous aspects of the semantic Web in significant detail, it is odd that there is no mention of HTML5 since HTML5 should greatly assist in the realization of the semantic Web (even though it is not yet a W3C recommendation).  This book is primarily intended for software developers, researchers, and practicing professionals who want to gain expertise in the fundamentals quickly.  It may also be useful for students taking courses on the semantic Web.  Summing Up: Recommended.  Upper-division undergraduates through professionals/practitioners.”

“Somewhere, something incredible is waiting to be known.”  This quote by Carl Sagan essentially sums up how I feel about this past summer. I have learned so much and had so many incredible experiences and met so many knowledgeable and passionate people and renewed a number of friendships. For those who are curious, we also now have a third grandson – Owen Mark. That was definitely the highlight of this summer (that and spending a week with our other two grandsons). However, as we start the fall semester at school, I wanted to share a few thoughts on my experiences with technology and education this past summer and some of the activities I have had the privilege to be associated with. This has been a summer of conferences and contests. I doubt this is a complete list, but here goes…

• Working Connections conference – Springfield, Illinois, May – I had the distinct honor of teaching a week long class on HTML5 and CSS-3 to a group of very dedicated and passionate teachers (and individuals involved in both state government and  industry).
• WOW Web Design Contest – Kansas City, Missouri, June – I was able to help run these contests for both secondary and post-secondary students. I believe this is the 8th year we have done a national contest with a focus on web standards and professionalism. This was my first year to actually award the medals. It is an incredible experience to be on stage with over 18,000 people in the audience.
• MPICT conference – San Francisco, California, June – I also had the pleasure of speaking on HTML5 and CSS-3 for another week with an emphasis on aligning and modernizing web curriculum. I met many colleagues from across the western states (including Hawaii) and have made a number of new friends.
• D2W conference – Kansas City, Missouri, July – Not only was I able to participate in this conference at the last moment (many thanks to Dee Sadler), but I was also able to travel to the Designer to Developer Workflow conference with two colleagues from central Illinois. It was a great experience and a chance to learn even more about mobile development issues.
• Adobe Education Leader Summer Institute, San Jose, California, July – I have been privileged to attend this event for the past 3 years. This year, I gave a five minute presentation on how we are teaching Business Catalyst as part of our web business class. I also got to participate in a panel discussion with collegaues entitled “Tell Adobe.”
• SchoolOfWeb.org initiative – I have been asked to co-chair this initiative focusing on interdisciplinary education. Although this is a daunting task, we simply must succeed. Our fragmented efforts at various education initiatives need to coalesce and I am honored to be a part.

Ok, those are some of the highlights. I have left out many others as I want to focus on what this means for students in our web classes and why I think it is important for everyone to become more involved.

So what? I know that is likely the main question readers are asking. Ok, Mark had a fun summer and did a lot of traveling. What this means is that I made a concerted effort to keep my knowledge and skills up to date. This is something every person in this field should be doing. If you are a student in a rapidly changing field (like web systems) ask your teacher what they are doing to keep up with current trends and enhancements. As you may well understand, the pace of change in the field of web systems is rapid and accelerating. We now think in terms of mobile and multi-screen development first and web pages later. We need to think of the web as an immersive experience, not just information. I also made a concerted effort to network with as many people as possible. This is one of the main reasons I attend conferences in person. Twitter, webinars and the like only go so far. One needs to actually communicate with people physically. Additionally, I believe I have made a difference. Whether discussing aligning web curricula with current best practices, teaching HTML5, or discussing what we are doing in central Illinois, I understand that I have had the chance to influence a number of programs throughout the United States. By my count, this represents between 40 and 50 school programs (mostly community college and high school). In addition to specific classes, our national web design contest is a grass-roots effort to improve curricula throughout the US. Students who participate realize the only way they can achieve excellence and get on the medal stand is to fully understand and employ web standards and professionalism. They are taking this message back to their teachers and asking that these topics be covered in depth. If one includes all the colleges and high schools touched by our web design contests, we are well over 100 institutions that I have been able to directly influence this summer. To me, that is making a difference and raising the bar for web standards and professionalism in education.

Now for those who have read this far – why am I mentioning this at the beginning of the fall semester? This is a new semester and academic year. One of the reasons I enjoy teaching is that every year and every semester is a new beginning. We can constantly improve over past semesters. Those who have had classes before may have become complacent. Those who are just getting started may feel overwhelmed.  Don’t (in either case). Use this semester as an opportunity to network (learn from others). Everyone has unique knowledge and skills they bring to our classes. Use this semester to take advantage of challenges and activities outside of class. For example, we have a meeting of our local Web Professionals chapter and Adobe User Group meeting every month. Participate. Yes, I know you are busy. So am I. However, unless you make an effort to grow and stretch, you will remain exactly where you are. Don’t just consider or think about participating in the web design contest – do it. Commit now and make an effort to test you knowledge, skills, and abilities against others in April. If you do well at state, you will go on to compete nationally. If you don’t do well, that is ok. Learn from your mistakes and try again next time.

You have some great opportunities available to you as you take classes in our web curriculum. Use this as an opportunity to grow and expand. Don’t just limit yourself to class work. If you only do the minimum, how will you differentiate your accomplishments to potential employers? “Somewhere, something incredible is waiting to be known.” Venture outside of your comfort zone and find the incredible.

Given that I have an Archos 101 Tablet, I wanted to include some screen captures for my upcoming CMWEB 141 class on mobile and multi-screen development. Since I connected my Motorola Droid 2 to my Windows 7 (64 bit) laptop, I thought that would be the best approach. I already have the Android SDK installed and could just use ddms.bat to take my screen captures as I do with my Droid 2. Silly Mark. Let me share a bit about my recent adventure. Yes, I activated debugging mode on the tablet (and also discovered a nice feature on Android tablets – you can take screen captures natively – note the checkbox). [Click on the image if you want to see the full version.]

Ok, I can now take screen shots and share them via my DropBox folder.  Problem solved. Yes, but, what if I want to do more. I really wanted the batch file to also work. I know, I should have stopped while I was ahead. I plugged in the Archos tablet to my computer via the supplied USB connection. There was the driver installation magic which resulted in… partial. success. I could share files between computer and tablet, but could not use the full capabilities of the Android SDK. That particular driver installation failed.

After a fair amount of research online (who ever said mobile development is always easy was just plain wrong), I discovered there are Archos ADB drivers [ftp://support.archos.com/ARCHOS%20it/ADB/adb_winusb_driver.zip]. Obviously, one needs to download that and unzip the USB drivers folder.

Next, one needs to modify the adb_usb.ini file to add the following line of code 0x0E79 (which is the decimal number 3705). Huh? Actually this is the Archos vendor ID. By the way, always keep a backup copy of any .ini file you modify. You will find this adb_usb.ini file in the c:\users\[username]\.android folder. Note screen capture below telling you to never edit this file. Yes, I could have run the utility, but I was in a hurry.

Next, locate the folder where you installed the Android SDK. In the platform-tools folder, you will see the adb.exe file. Navigate to this folder in the command shell (do not simply click on the file to execute it). A small screen capture is shown below. We are most interested in the following parameters. This is why you need to have the command shell open as there will be multiple parameters you need to pass in sequence. Essentially, you stop the service, start the server, and run the devices parameter again (after you have plugged in your tablet (with debugging enabled).

• adb kill-server [stops the service]
• adb start-server [starts it]
• adb devices [also starts the service]

When you plug the device in, the driver may not properly install. Ok, mine didn’t. We then need to open device manager, navigate to the problem child and search for drivers on our local system. You guessed it, we browse in the USB folder we downloaded from the Archos site. We do get a warning message that the driver is unsigned (install at your own risk). Also, once installed, you discover the driver is for a different Archos device, but it works.

We can now run the batch file and take screen captures from the laptop. Screen captures are shown below using the Dalvik Debug monitor. First, we see the device tethered and connected.

Next, we select Device > Screen capture from the menu and see the following.

Ok, I now have two separate wyas to obtain screen captures for the tablet. So why did I put this note together? 1) It is possible I will need to connect my tablet to another  laptop at some point in the future and it is highly unlikely I will remember all these steps. 2) I want readers to be aware that one must have a fairly deep understanding of computers to work with mobile development in 2011. Yes, it can be relatively simple to use tools like Dreamweaver 5.5 and Flash and Flash Builder, but there are times when working with actual devices (testing before a deployment in the Android market) that you need to try things out. They don’t always work as smoothly as anticipated. Students taking the CMWEB 141 class should always keep this in mind.

It was recently brought to my attention (via a tweet) that Adobe Acrobat can be used to generate QR (Quick Response) codes. So I did a little digging and discovered it was pretty easy to accomplish – who knew?

Background – QR codes were initially used for tracking parts, but have now become common on various printed materials (such as magazines, signs, business cards). They are used to quickly convey information (whether it is opening a URL for more information or generating a text message via SMS). Mobile phone users often have a bar-code scanner app installed. For example, I use Barcode Scanner v 3.6 (open source ZXing [Zebra Crossing] bar-code project) on my HTC Incredible (Android 2.2) smart phone. There are a number of ways to generate these codes, but I discovered that one can simply use Acrobat X to accomplish this. [If you don't have Acrobat, stop reading, you can use QR Droid (thanks to my son, Ben, for pointing out this app) from the Android Market or QR Code Now from the BlackBerry AppWorld.]

Examples – Here are two examples of codes generated by using the resulting PDF form.

QR code

Data Matrix code

Details – First, build the form. Start with a reasonably blank document (I created on in MS-Word). Save it as a PDF file, then open in Acrobat X. You must have the full product (not just the Acrobat Reader). Select Tools > Forms > Create to build your initial form (based on the PDF document you just opened). Depending on how you created your initial form, you may receive a message like the following. That is perfectly ok as we will be adding the fields manually.

Now that we have converted our PDF document into a form, we can add some fields. We want to first add a text field. We will then name that field and use the input from that field to generate our codes. As you examine the list of possible field types, you see that there is a barcode field (guess I never paid attention before).

I selected the Text Field and then drew it on the document. I changed the name to input and specified a property of having a thin border around the input field. This makes it easier for those using the form to see the dimensions. I also made the field multi-line as I don’t know how long the actual content will be.

Now that I have my input field, I can create two barcode fields. You may receive a warning message when first placing your barcode (see below). I chose OK and continued.

Next, open the properties after you have placed the barcode. Select the options tab and choose Symbology of either QR Code or Data Matrix. I also indicated that the decode condition would be a handheld scanner (as one typically finds in a mobile phone these days) (see screen capture below)

Once you have selected the appropriate symbology, you need to tie the results to the input field. In the screen capture below, I selected the Value tab from the properties. Make certain the “Include Field Names” checkbox is not selected (otherwise you will have additional information in your code). I also placed some reference text which will show beneath the actual code.

There are a number of cell phone QR code readers (this link is not a complete list, but contains a fair number).

If you want to try this out, I have a completed form linked (either download it to your computer or open it in a new browser window/ tab). Highlight the existing text, replace it with your own and then place the focus elsewhere (outside the input box). the code values should automatically update. xamine the page with your barcode scanner and verify that the code is directing you to the desired URL. Obviously, I don’t want you to use this example for commercial purposes. I am simply providing this as an example to help you better understand how to create your own form.

The starting MS-Word document is also provided if you want to try this out for yourself. Just save the file locally and experiment using Acrobat X.

On Monday, August 1, 2011, Adobe made a public version of their Edge animation tool available via Adobe Labs. I thought it might be helpful for readers to have an introduction to some of the fundamentals regarding the use of this tool. First, go get a copy of Edge at the above link. Download the file, unzip it locally and run the Setup.exe program (I am assuming you are using a Windows machine for this discussion – if you are using a Mac, do the corresponding task). while that is going on, also download the sample files (at the time of this writing, there are 4 samples). [Ferris Wheel - most impressive, Getting Jumpy, Rich Ad, and Sunshine Sailing].

Once you have successfully installed Edge, you will likely see the following message. Not a big deal, but you should be aware that this is a temporary trial and will eventually expire. As the note says, you will not see this message again.

Once you have clicked “Ok”, you will have the choice of learning more or working with the sample files (which you already should have downloaded).

For our initial purposes, we will  examine one of the starting files (and then build a simple animation on our own). For our initial analysis, I plan to examine the “Getting Jumpy” animation. Note that there are several files (one with a .edge extension, another with a .html extension and so forth). Obviously, the .edge extension is to be used with the editor; the other files are for deployment (I recommend also keeping a copy of the .edge file  with the others as you deploy them so you can make changes as the product is improved over time).

If you open the .edge file in Edge, you will see a screen like the following. Note that even though one opens the  .edge file, the tab indicates the .html extension. The entire interface is shown below (you might want to right click on the image (and open in a new browser tab) to see a better view). There is a central stage where the animation displays (simply click the space bar to preview the animation). You can also have multiple files open at once (note that I clicked on the drop down triangle adjacent to the file name to show that I have 4 files presently o Near the top, there is a menu and a set of initial tools (selection, rectangle, rounded rectangle, and text). I suspect future versions may include additional capabilities. Directly to the left of the stage is a properties window. To the right of the stage is a list of elements and directly below the stage is the timeline.

Let’s examine the properties panel in a bit more detail (below).

Note that since the entire stage is initially selected, one only sees the properties for the object. Click on other objects on the stage to see their properties. Note also that the title of this document is “Untitled.” Anyone who has worked with me knows this is one of my pet peeves. I recommend immediately changing the name from untitled to something more meaningful. This is what will appear on the title bar in the browser. note also the size of the animation and the CSS choices on what to do with content which goes beyond the boundaries. We will just leave those as they are for now.

Let’s next examine the elements panel (below).

Keep in mind that this tool is generating HTML code so all the divisions will be named as shown in the panel.We can click on the eye symbol to hide or show items and we can click on the adjacent dot to lock items. Although I do not recommend changing items, one should be aware that the main container (stage, in this case) represents a division within the HTML document (see code snippet below).

But, I see a whole lot more <div> elements listed. these are loaded dynamically via the .js file (which is why jQuery is also required in the edge_includes folder). Let’s just examine a bit of the JavaScript/ jQuery code which is used to dynamically create these objects.One can click on the image below to read (or, better – view the source code or look at your own examples).

Anyone familiar with jQuery should recognize the above syntax. These objects are also styled with CSS (shown below). As with the screen capture of the JavaScript, one can click on the image below to see it in more detail (or better, look at the source code).

Note that browser specific prefixes are employed throughout. I do encourage readers to examine the source code of what is generated (as it can be rather complex). This is also a great argument to using the native Edge tool to make any subsequent changes to the animation.

Lastly, we should also examine the timeline. A screen capture is shown below.

The funnel is active so we only see animated elements. The keyframe animation is also active. One is able to search for selected elements and one can also zoom in or out on the timeline (near the bottom of the image above).

Adobe provides some good starting resources so I just wanted to give an introduction to this tool. I think it has some great possibilities. I believe this also demonstrates a willingness on Adobe’s part to offer native HTML animation tools (as an alternative to Flash). Frankly, as I have said many times, one should use the proper tool to solve a given problem. Flash may (or may not) be the answer, the HTML5 <canvas> element may (or may not) be the answer, and animations done in jQuery and CSS may (or may not) be the answer. However, we now have another tool we can employ as needed. I encourage you to try it out.

Note that the CSS validator will choke on the CSS files (since many take advantage of browser specific prefixes for certain behaviors – such as transforms). The HTML will tentatively validate as HTML5. Note that although the <!DOCTYPE> evaluates as HTML5, most of the features of Edge are done with CSS and JavaScript/ jQuery.  Overall, I have been quite impressed as I begin working with this tool. I hope to post some of my own examples relatively soon (however, they will not be nearly as complex or exciting – most readers know I am graphically challenged).

For those who are interested, here are working examples of each of the sample files provided by Adobe (with some minor modifications – such as a proper title). Each of these examples will open in a new browser window/ tab. Note that some of these may take a moment to load (depending on your connection speed) – there is a fair amount of CSS and JS associated with some examples. Lastly, don’t forget to view these examples in various browsers (ranging from Chrome and Safari to Opera and Firefox and Internet Explorer).

• Ferris Wheel example
• Word animation example
• Rich ad example
• Sunshine sailing example