Designers hold CSS close to their hearts. It’s just code, but it is also what makes our carefully crafted designs come to life. Thoughtful CSS is CSS that respects our designs, that is handcrafted with precision. The common conception among Web designers is that a good style sheet is created by hand, each curly bracket meticulously placed, each vendor prefix typed in manually.

But how does this tradition fit in a world where the websites and applications that we want to create are becoming increasingly complex?

Keep Reading….

One of our recent enhancements to the Beacon website included integrating components of our blog into the content of the site. This is visible on the homepage under the “Blog” tab and shows the three most recent postings on our WordPress blog. Additionally, we decided to include links to recent blog links by categories or topic on the page. For example, the SEO Management page would produce blog links that fell in the SEO category. This is applied throughout the site on interior pages, which is effective for SEO as each page will be updated with every blog posting we create (given the post falls in the category of the page displayed).

The blog feed on the homepage was much easier in comparison worked like this:

XSLT Format used in Cascade:

This is a simple ASP literal that will be the populated by the blog feed.

<xsl:comment>#START-CODE<asp:Literal id=”litFeedReaderBlog” runat=”server”/>#END-CODE</xsl:comment>

VB for CodeBehind File:

VB CodeBehind File (.pdf)

This small set of code basically links to page with RSS feed, in this case, the general RSS feed for entire blog. The part shown in red needs to match the URL of the RSS feed to your particular WordPress site. The part shown in green is a relative path to the XSL file you will use to format the output. Lastly, the part in blue needs to match the ID of your ASP literal so the codebehind knows where to place the output.

Most WordPress sites use the following schema to the feed: http://sitename.com/rss

Example: http://blog.beacontechnologies.com/feed

The above linked RSS page acts as the data source for the VB CodeBehind file and uses an XSL file (shown below) to format the output to the page. Because this RSS page is updated and managed by WordPress, the output is always up to date with the blog.

XSLT used by CodeBehind File for Output:

XSLT File (.pdf)

This XSL will limit the number of posts displayed to the most recent 3 posts (First 3 listed on RSS page–Code shown in green) and will output it in a way to provide a linked title, the author and date, as well as a snipped from the article itself and ‘Read More’ link. We used JavaScript to clean up some of the output that the RSS feed delivers, such as the [...] text and cleaned up the way links were displayed in the snippet.  You can visit the blog feed page and view source to get the XML data that will be processed by the XSLT.

So, if you followed all that and put it into practice, you get something like this (after styling):

Now, to implement category control, we needed to add an additional Data Definition within Cascade on every page that would set the category. We used a simple drop-down that had an entry for every category we have on our blog. Notice below that the data-definition values need to be URL-friendly. The reason for this is that the modified blog feed with category control will integrate this category to the blog’s general RSS feed. We are going to pass this category information to the codebehind file for processing by sticking the data definition value into the ASP literal’s text attribute. All interior pages would use the same codebehind file as to avoid the need for a new configuration type that would need published with each page.  The only maintenance that goes along with the blog feed is adding new ones to the data definitions as they are created in WordPress.

The code and logic above was primarily followed for the related links, but had to be modified to fit the following specs:

• Have Cascade output a text attribute on the ASP literal containing the category to be used (grabbed from data definitions) which would be passed as a parameter to the functions used in the original VB Codebehind.
• List out 3 of the most recent blogs (just linked titles, somewhat simplified from homepage output) from the blog category set in the data definition. If NO data definition is set for the ‘blog category’, use the ‘Section’ data definition value (which shown above is required on all of our pages.) The section value is a fall-back to one of the three parent categories on the blog: Web Development, Web Marketing, and Web Hosting.  Notice we can’t just use the values of the ‘Section’ data because it does not match the URL structure on WordPress.
• If there aren’t 3 posts for the blog category that has been set in the data definition, retrieve what posts are available and then use one or two posts the parent category (depending on how many needed to make 3 posts).

At first, the solution Justin and I had come up with, was to make the VB smart enough to recognize when less than 3 posts were output and go out and grab the remaining from the parent category. The issue with this was that the parent category of any category might list already output postings by the sub-category (since they are listed in order of most recent). Therefore, we had to heavily modify the codebehind file in a way that it would ALSO recognize not to output duplicate posts from the parent category.

XSLT Format and Template Changes in Cascade:

Every page needs to get the codebehind file.  In Cascade, this is accomplished by adding the following to the template:

<!–#START-ROOT-CODE<%@ Page Language=”VB” aspcompat=”true” AutoEventWireup=”false”  CodeFile=”/rightColumnBlogFeed.aspx.vb” Inherits=”_Default” %>#END-ROOT-CODE–>

We saw that http://blog.beacontechnologies.com/feed shows a listing from all categories (10 of the most recent being shown).  We can change the URL to include one of our categories, say… Web Marketing — just by changing the URL to http://blog.beacontechnologies.com/category/web-marketing/feed.  Notice the RSS feed is then modified to fit the category and still listed (as defaulted in WordPress) by most recent posts.  The XSLT file below was used to select either the post category or section for outputting the text attribute of the ASP literal.

Modified XSLT File (.pdf)

Changes in VB Codebehind & CodeBehind’s XSLT

While I’d prefer not to share our exact source code, here are the modification necessary to the templated file above to prevent duplicate stories from being output.

• The ‘BuildFeed’ function had the first parameter changed to the ASP literal’s text value.
• The XSLT file got dutplicated, one to output 3 posts and one to grab the full page of posts generated by the RSS (10).  Both had ‘~’ characters appended after each list item.
• The BuildFeed function would fetch what posts it could from the blog category, if there are less than 3, it would record the titles of the categories found and load them into an array (This was the reason for ‘~’ character being added–Parsing values was a bit easier this way using the split function.)
• The BuildFeed function would then visit the parent categories RSS page and compare post title with those in the subcategory recorded in the array.  If they matched, it skipped the post, otherwise appended it in with list to be included.  Because we didn’t have any categories with less than 3 posts, I was able to just switch my XSL file used by the codebehind to output only 2 posts–and the VB would take care of the rest and use the 10 post page parent.  Controlling the output this way made it much easier to debug and test that the proper number of posts being output from the parent category and subcategory feeds.

With all the recent projects needing Javascript development and those upcoming, I’ve had to do quite a bit of searching around the web for scripts I can integrate into our projects.  Here is a list of libraries, scripts, and resources we’ve put to into practice here at Beacon.

Javascript Libraries

• jQuery
  JS Library that allows CSS-styled selectors for DOM elements.
• jQuery-UI
  Extensive collection of user-interfaces and controls.
• Script.aculo.us
  Contains a visual effects engine, a drag and drop library, and other visual effects.
• MooTools
  Has built in functionality for playing sounds and an extensive collection of transitions and effects.
• YUI
  Never really used this library, but it appears to be well documented and used around the web.

Scripts

• Name: Moment.js
  Website: http://momentjs.com/
  Note: This script is fantastic for formatting dates/time.
• Name: Respond.js
  Website: https://github.com/scottjehl/Respond#readme
  Note: Light-weight library script that allows CSS3 Media Querys for responsive web design in browsers that do not support CSS3.
  
• Name: Table Sorter
  Website: http://tablesorter.com/docs/
  Note: Fantastic script that makes table headers sortable.  Works with rows or columns and can sort multiple data types including: strings, integers, and dates.
• Name: Masked Inputs
  Website: http://digitalbush.com/projects/masked-input-plugin/
  Note: This script is a nice compliment to live form validation.  We use it on our Beacon site, but had issues with it removing the input if a user leaves the textbox incomplete.  We found a fix for this on the web, incorporated it into the current release (non-minified), and then re-minified it.  The modified version can be downloaded here.
• Name: JSLitmus
  Website: http://fmarcia.info/jsmin/test.html
  Note: This online tool can be used to compact your JS code.  I recommend keeping a backup of the original coding
  if you plan on ever revisiting the code.
• Name: JSBeautifier
  Website: http://jsbeautifier.org/
  Note: This tool will format code for you with indentations and line returns.  Badly formatted code or minified code files can be undone with this for significantly better readability.
• Name: GreyBox/LightBox/ThickBox
  GreyBox Website: http://orangoo.com/labs/GreyBox/
  LightBox Website: http://lokeshdhakar.com/projects/lightbox2/
  ThickBox Website: http://jquery.com/demo/thickbox/
  Note: Different flavor scripts that handle popup windows.
  

Web Developer and Coding Resources:

• GitHub – Developer projects with online collaboration
• DZone – Developer articles and tutoirals
• NetTuts -Web Developer tutorials
• CodeCanyon – Has tutorials on a variety of web languages with video
• DynamicDrive – Heaps of scripts to add functionality to your site.

Resource Articles:

I regularly visit these sites (and others like them containing lists of scripts) to gather resources for a project.

• http://www.topdesignmag.com/100-awesome-cssjavascript-plugins-and-coding-techniques/
• http://net.tutsplus.com/articles/web-roundups/40-super-neat-javascript-plugins/
• http://www.queness.com/post/237/30-javascript-menu-plugins-and-scripts
• http://www.noupe.com/javascript/50-useful-javascript-and-jquery-techniques-and-plugins.html

Beacon is pleased to announce the launch of Framingham State University’s Academics section redesign.

After completing a redesign of Framingham State University’s main website in the summer of 2010, the client contracted with us to address the Academics section such that it would be more effective in reaching prospective and current students.  Well, we are proud to announce the launch of the newly redesigned Academics section and all department sections as well.  The client had a very tight deadline for this project in order to have the new site launch coincide with a planned ad campaign.  Beacon’s Web Development Team juggled its resource plan to complete this project on time and within budget (again)!

 

Justin Klingman managed the project and Wendy Honeycutt, worked directly with the client to create the beautiful design.  Keana Lynch completed the template and Cascade development a little early and perfectly, and Thomas Brinegar customized the jQuery homepage slideshow on the Academics homepage.

We recently launched the Beacon site with a new design which included a handful of jQuery animation, many of which had replaced the the previous design’s Flash-intensive content. We have recently come across an issue with the jQuery library with some builds of IE7 and IE8 that resulted in an extensive trail of debugging. We concluded that it was a browser issue (even in different OS environments) that was only fixed by re-installing IE. Here I will outline the issue and the debug trail–and hopefully maybe even think up some potential fixes that weren’t explored when testing was originally performed.

The Issue

In IE7 and IE8 we found that refreshing the homepage would crash IE and sometimes handle restoring the tab, other times not.  Microsoft has acknowledged this error in an KB article.

The Debug Trail

• Initial replication of issue in IE 8.0.6012 on one of the test machines using a Windows XP environment.
• Attempted browser-configuration changes that might’ve caused issues including:
• Privacy Settings
• Security Settings
• PrivateBrowsing
• Add-Ons disabled
• Just-In-Time Debugging (picked up from a slightly different error that was sent to me as a screenshot from Mark Dirks — last one on right shown above)
  Unfortunately not of these seemed to be the culprit.
• Disabled JavaScript in IE altogether–which of course fixes it but not what we we’re aiming for. This confirms it is a JavaScript/jQuery related issue
• Attempted using different versions from currently used (1.6.1) to most recently published version from jQuery site (1.6.4) – tried both compressed/uncompressed versions without any success.
• Checked a  changelog of jQuery since version 1.6.1 onward for IE7/8 errors.
  *Anything related to these browsers I had checked out scripts for any instances of (CSS background-image in jQuery and other function calls)
• One Google search led me to a site that reported changing the jQuery file name had corrected their similar mshtml.dll error—-not the case here)
• Double checked the in-line JavaScript as well as .JS file functions dependent on the jQuery library contained no redirects or any instance of the window.location method
  Since the IE8 error that comes up sometimes on the test machine says the browser attempted to load more than twice) – the only instance of this I found is a comparison checking if ‘#beacon-video’ is in the URL and if so, it runs a function to scroll the Beacon video into view and sets the tabs display(css) values. The window.location value is never assigned anywhere.
• Checked that there weren’t multiple instances of window.onload or jQuery(document).ready()
• Ran the jQuery library file through a beautifier to get a better look at the pin-pointed trouble spot you found and checked for any obvious issues. Justin Klingman found that in the compressed library he could comment out the last half of the code which removed the crash so before ‘beautifying’ the code I had marked this position with a comment and looked in the region after the code was cleaned up.
• Removed all other scripts from the page to see if those dependencies may have had an impact on the crash, but removing them all (including the JavaScript function calls in the body,) except for the jQuery Library. No difference, same crashing effect.
• The only change that did successfully fixed the crashing tab to load was removing jQuery from the page, however,
  when the content of another root level page (the SEM pages) into the root default document, that loads/refreshes fine without crashing.
  The only difference between interior/homepage in terms of JavaScript is the presence of the homeScripts.js file and the inline function calls on the homepage.
  After further testing this, removing only homeScripts.js still crashed the tab on the homepage (unless jQuery was also removed) —
  All internal pages use the same copy of the jQuery Library and they don’t crash, so the exact source of what’s crashing the page/tab is still not clear to me.

The Vecoplan, LLC site was launched on August 4th. This site is slightly different than any other site Beacon has developed due to the fact it has been developed in a content management system called Typo 3.  Since Vecoplan is headquartered in Germany, the CMS for this North American website was mandated by Corporate because TYPO3 is very prevalent in Europe.  The challenge for this project was developing a new website that matched Corporate branding, yet focused on the products and services of Vecoplan LLC (No. America), provided improved usability and most importantly, sustained the SEO web marketing initiatives that are also being provided by Beacon.  Needless to say, the ramp up on a different CMS was extremely challenging, but our staff stepped up to deliver another high quality website!  In addition, our web marketing team worked with the web development team to successfully guard against the usual dip in organic traffic that can occur when migrating to a new website.

The site features the following:

• Rotating banner image on home page, updatable by client via CMS
• Several carousels that allow user to choose market sector, service area, etc.
• Mini-contact form housed in the footer
• Parts Order form through which customers can fill out and submit online
• Unique sub-navigation across center of page
• Product detail pages – Really beautiful product detail pages that showcase the product photography
• Integration of Vecoplan Midwest’s website

A HUGE thanks goes out to Miral who really made it all work!! Miral was faced with the challenge of not only learning a whole new content management system to build this site in, but one where most of the instructional material was in German. Throughout this project he continually faced many challenges and met each one admirably.  This project was led by Stephanie, Project Manager, who did a great job of keeping the team moving forward during various challenges to add another unique launch to Beacon’s portfolio.  Other big contributors were Wendy, who provided the client with exactly what they needed for a design, Thomas who assisted with all of the Flash and carousel work, and Jeff who provided SEO feedback and analysis. Finally, William, Wayne, and Caleb whom all had a hand in the launch at some point – thank you Beacon team!

 

The Expressive Web (Beta) was recently released by Adobe to showcase some of the newest and most expressive features that HTML5 and CSS3 can add to the web today. Personally I found this to be an amazing example of what’s in the future for web designers and developers.

The site highlights the following HTML5 and CSS3 features:

• CSS3 animation
• CSS3 gradients
• CSS3 media queries
• CSS3 shadows
• CSS3 transforms
• CSS3 transitions
• CSS3 web fonts
• HTML5 audio
• HTML5 canvas
• HTML5 forms
• HTML5 video
• Web storage

 

Each feature page contains:

• A demo of the feature.
• Data on browser support.
• Links to examples in the wild that use the feature.
• Links to more in-depth resources and tutorials.
• Detection and fallback strategies for the feature.

 

To read the full article about the development and design of the site visit Adobe Introducing The Expressive Web

Beacon Technologies just completed a redesign of the Texas A&M Foundation Intranet. In addition to visual updates, the site received usability enhancements and organizational features.

Here are some project highlights:

• The site is secured using both .NET permissions and an authentication method (Central Authentication Service) used by the University and allows multiple levels of security—from “guests” to management level. GREAT JOB MIKE!
• Bulletin board system for FAQs and Q&As as well as “fun” applications like trading tickets and recipes
• Integration of Google calendar, including downloadable events and calendar filters (See below.)
• Internal blog to enhance internal communication
• Beautifully designed and informational employee profile pages (See below.)
• Bookmark utility that visitors can use to save pages
• A-Z index for alphabetical listing of site pages as well as traditional site map
• CMS form creator

The client is thrilled with the results and we’d like to give credit to everyone on the software development team that was involved in the project! This is the Foundation’s eighth project with Beacon.

BEFOREAFTER

I recently provided a client with a list of non-flash animation options (a.k.a. JavaScript plug-ins) for their new home page banner image area. My good friend Wendy Honeycutt came up with a great list that I thought I’d share:

• http://tympanus.net/codrops/category/tutorials/
• http://tympanus.net/Tutorials/HoverSlideEffect/
• http://tympanus.net/Tutorials/CompactNewsPreviewer/
• http://www.serie3.info/s3slider/demonstration.html
• http://galleria.aino.se/
• http://www.gcmingati.net/wordpress/wp-content/lab/jquery/svwt/index.html
• http://css-tricks.com/examples/StartStopSlider/
• http://www.sohtanaka.com/web-design/examples/image-rotator/
• http://jqueryglobe.com/labs/slide_thumbs/

*Note: most JavaScript plug-in apps are customizable. Thus, the speed of image rotation, background colors, font styles, and transparencies can be adjusted.  Some really cool stuff out here!!

What are your favorite sites for JavaScript plug-ins?

Texas A&M Foundation launched this month. Our objectives were to analyze, design, develop and host the Texas A&M Foundations public blog.  The blog design also needed to closely mimic the public site design. We have worked with TAMF on several other web site projects, including redesigning their public web site twice. The site received lots of comments and traffic on its very first day.

Features and Highlights:
• User manual
• RSS feed
• SEO friendly URLs
• Creation of categories
• Ability to add images and/or video to blog posts
• Contact information for each post author
• Comments allowed and moderated

Thomas Brinegar primarily handled the design and development with periodic assistance from Annette Fowler, Wendy Honeycutt, Justin Klingman and Tiffany May. William Nichols handled all of the administrative duties. Finally, big thanks to Heather Showstead for sound advice and suggestions.

Thanks to all!