Mark DuBois Weblog

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