1. SharePoint calendar integration
   • This feature will allow you to automatically display public events from your UF AHC Intranet calendar onto your public website [learn more]
2. Search engine meta descriptions for your homepage
   • Change the summary that is displayed to search engine users when your homepage shows up in the results [learn more]

Footer Contact Information:

You can now add a line of basic contact information to your websites footer (address, phone numbers). [see preview]

• To enable: visit Appearance / Theme Options / Footer
• In the text field labeled “Contact Info” insert your contact information [see preview]
• Select “Save Options“

Benefit: Users will be able to quickly find your contact information from any page, and you may even experience an improvement in search engine result rankings because of the geographic information (Google likes )

Horizontal Rule

Easily insert a horizontal rule (bar) into the content of your pages/posts.

• To insert: select the HR icon in the toolbar:
• The HR bar will look like this:

Benefit: Content on your website can be made easier to scan by breaking content sections up with a subtle bar.

Alert Box

Insert an alert box into the content of your pages/posts.

• To insert: while editing a post/page select the text you want to turn into an alert box and select “Alert – Red” from the “Styles” dropdown in the toolbar [see preview]
• The alert box will look like this:

Benefit: Users will be able to identify critical notices and content on your pages very quickly

“Do you want to view only the webpage content that was delivered securely?”

You should select “No” to properly view the webpage.

Solutions

Upgrading your version of Internet Explorer to 9.0, or using a different web browser (such as Firefox, Chrome, or Safari) will cause the error to go away.

One Cloud to Rule Them All

You’ve got a laptop, a PC and a smartphone. What do they all have in common? Hopefully all your documents and files. If you’re using a web-based solution instead of Microsoft Office and a thumbdrive, you’re winning. The trend towards Cloud Computing solutions is an exciting one, especially in our environment. More than four million businesses use Google Apps, and the list of universities making the switch is constantly growing. The UF College of Education has already taken the plunge. Being in the healthcare arena, we should obviously realize that not all data belongs on some random server in California, but for practices such as project management, communication and collaboration, having simple, user-friendly web-based software is a lifesaver. Eventually this trend might take a toll on software companies that primarily focus on client-side software, but if it encourages more open, easy-to-use applications that aren’t platform specific, and can be run in any web browser, it’s a good thing.

- Brad Alderman

Twitter

I’m a Twitter addict, so it’s probably no surprise that the biggest trend in tech for me is Twitter. Although this micro-blogging platform has been around for five years, it became more mainstream in 2011. We began seeing more brands use Twitter in marketing, promoting contests and “parties”, as well as providing access and transparency through their Twitter accounts. Networks hyped hashtags during high-profile shows and events, encouraging viewers to become part of the conversation in real-time. Twitter helped breaking news travel faster than ever before:  Osama Bin-Laden’s death, the Women’s World Cup finals and Beyonce announcing her pregnancy all set records this year for most tweets per second (8,868 at 10:35pm for the last on the list, to be exact.) In October 2011, Twitter reported handling over 250 million tweets per day, up from 90 million the year before, and reported that 50% of its users were active on the platform daily. Twitter received a bump with the release of the iPhone 4s and iOS5, experiencing a 300% increase in new user accounts just a few days after the launch. We can expect Twitter to continue changing the speed we communicate and the way we market to our consumers.

- Amanda Austin

The End of Plug-Ins

I think one of the biggest Trends in 2011 has been the rapid adoption of modern web standards to deliver plugin-free, rich internet experiences. Music videos, data visualizations, games, and medical applications are just some of the examples I’ve seen abandoning proprietary technologies for modern web standards to deliver rich internet content. The Canvas element (part of HTML5) gains more features and stability every month. It has allowed for web designers to bring dynamic 2D animation to the web like graphs, images, and games. The specification for WebGL was released in 2011. It allows for the generation of 3D interactive graphics right inside the browser, and uses the power of discrete graphics cards to drive those experiences. It has been exciting year for web graphics and animation. These web technologies are still in their infancy, I’m excited to see what 2012 will bring!

- Carlos Campos

Security

2011 has been a banner year in the importance of cyber security. Many headlines were made of proprietary or personal information being compromised because of laxed security.  As we become more and more “hooked in” to the digital world, and details of our personal life becomes more and more accessible.  In the next few years, information security will be absolutely crucial if this past year was sign of things to come.

- Sean Jeng

Trends in Web Creation for 2011

As we can see, more and more web sites are being created. While the biggest push used to be for the biggest, splashiest, eye grabbing sites, increasingly we are realizing that content and accessibility is King! It is not good enough to have a very pretty, fancy website if the content does not drive search engines and thereby viewers to your site. It is not good enough to have a site that looks pretty on a desktop computer but is too difficult to view on a netbook, tablet or cell phone. We are also seeing a big increase in blogging and RSS feeds to keep information current and constant. We are becoming a constantly connected world.

- Diane Millican

The March Towards Mobile

iOS, Android Marketplace, Amazon Appstore, native apps, responsive design, HTML5… o’ my. This year, the march towards mobile has been steady and loud. Everywhere you turn we are bombarded by different techniques to make your web assets available to your portable audiences. In the past year alone, we’ve seen our mobile traffic double on sites that don’t even seem relevant from an on-the-go perspective. In 2012, we will need to take an honest look at where this mobile trend wants to take us, and how do we get there without sacrificing our user’s experience and the utility of our websites. What do your audiences want to do on the run (all of it?), and on what devices are they going to do it on (does it matter? should it?)… o’ my.

- Carlos Morales

Math is Hard

2011 marks a year in which the Web finally fully matured. People no longer consider the Web this weird place where nerds and geeks hang out, and we no longer have to explain that there’s a thing called the Internet. Designers and developers can be confident in their tools, and the long, hard work of standards champions has been realized (IE 9 anyone?). People tasked with creating the Web’s user experience no longer have to worry themselves with the question of “Can we do this?” They can now turn their attention fully to the more important question, “How do we do this right?”

- Greg Turner

The Triumph of Content

The rapid spread of content management systems over the last few years in higher education has finally allowed institutions to reallocate web and communications resources from web development to content strategy, creation, and curation. For too long the content of higher education web sites have been stale retreads of printed content, and often do not meet the needs of their audiences , not to mention goals for admissions, marketing, or research. The advent of the CMS now allows content strategists the ability to break free of institutionalized ways of categorizing information into meaningful paths and groups for their audiences. This is a quantum shift in thinking that will reenergize how faculty, staff, and student interact with their web sites and help to stress the importance of this communications medium, which is too often neglected and seen as a dumping ground for information that can’t be disseminated in any other fashion. The launch of more and more blogs on content strategy, the inaugural meeting of the first convention devoted to strategy, and books devoted to the subject highlight the shift in thinking and underlie how content will become the arms race between higher education institutions in 2012.

- Jeff Stevens

Web Fonts, Finally

Design on the web has always been sorely lacking in the font department. The expressive nature of fonts makes them key catalysts for driving home any message. Think about it. Imagine if every print ad, from billboard to business card, was set in the likes of Arial, Georgia, Tahoma, Times New Roman, Verdana or even Comic Sans. Boring, right? Yet that’s exactly what browser makers had promoted until recently. To combat this depraved world of font haters, web designers devised ingenious, labor-intensive, workarounds to spice up their pages, using everything from image-replacement to Flash/Javascript dependent techniques. Thankfully, these have all been supplanted by the widely supported @font-face rule, making it easier than ever to implement custom fonts. I look forward to what is sure to be an exciting year for the blossoming of fonts on the web.

- James Young

Photo by bayasaa, Flickr.

Watch a preview of the major changes:

Don’t Forget to Refresh Your Browsers

If you are editing your site during the WordPress upgrade, you might encounter some issues with the new media upload and other popup boxes not working correctly. If this occurs, please refresh the page in your browser. This will correct the issue.

image courtesy of Ben Melbourne

I don’t know how many meetings I’ve been in that have been bogged down with discussions of minutae, when what we’re there to talk about is user experience. I’m sure it’s the same for you. However, using an iterative process, you can help smooth issues and get to coding, secure that the higher-ups who need to see something working and track progress are able to do so. And all it takes is a little smoke and a mirror or two.

For many people, the things we do are magic. Or they might as well be. And most people can’t tell the difference between a .jpg and a fully functioning website, as long as you don’t go selecting areas on the screen.

When prototyping a Web application, what you’re really doing is selling people on the user experience. While some stakeholders will be interested in read/write permissions, database redundancies and the like, most just want to make sure their users can complete the task at hand. So, when prototyping, consider the following:

Slideshow prototype and video

• A high-level presentation of a user’s process from task to task.

Hotspot prototype

• You can add hotspots to your slideshow to go from .jpg to minimally functional Web pages which then can link back to static slides.

HTML prototype

• Once your stakeholders feel confident in a good, mapped process and proposed features, you can begin to build out specific functions within the application. Again, you’re not yet ready to build the whole thing, just key moments in the user process.

Let’s say, for example, you’re building out a prototype for an online education course and you want to demonstrate the sign-up process. Do you need a fully-functioning form, sendMail object, and the ability to write to a database? Not at all. In fact, you might need nothing more than a few .jpgs and some simple form elements.

1. A functioning login screen. It doesn’t need to be built out with fully functioning CSS. All you need is a .jpg wrap to give it a good look and feel and a couple links: returning user | new user
2. Once someone clicks on “new user,” you could, again, build out a full form, but all you really need are a few blank fields. The rest can be pre-populated, or, if you wanted to get really clever, you could shfit to a fully completed form once you’re entered values for first name and last name, for example.
3. Then, you can hit “submit” and click through to a static .jpg congratulating the new user on a successful signup, including a message to check their email account for an activation link.

Is this process laced with pitfalls? Of course. If someone asks to see functions you haven’t built into the demo, it could all come crashing down. But if you’re prepared, and aren’t afraid to note the features they want to see and promise you’ll build them in for next time, there’s no reason why your audience shouldn’t leave happy.

Adobe Media Encoder

The new version of Adobe Media Encoder (AME) that comes with CS5 is a great little tool for encoding video.  If you are accustomed to switching frequently between After Effects and Premiere, but hate having to wait until your renders are complete to continue working, then AME can really help.

AME is now 64bit which makes it faster, more reliable, and renders with better quality.  AME was designed to run in the background and compress your projects while you continue working in After Effects or Premiere.

To encode After Effects projects using AME:

1. Open AME, choose the Add button in the upper-right side and select your After Effects project (or you can simply drag the project into the AME window).
2. A dialogue box will open where you can choose the After Effects comps that you would like to encode.
3. Press the Settings button to set your encode settings then press Ok when done.  Pressing Start Queue begins the encoding process.

This will work for Premiere projects as well.  You can even load several items in the queue and it will process them all in order.  If your target is the web, AME also offers 2-pass encoding, something that the After Effects renderer does not.

Encode Faster with Watch Folders

Watch Folders allows for an easy way to automatically batch encode files.  Once a watch folder is defined in AME any video (or multiple videos) that are dropped into that folder will be automatically converted to your pre-chosen format (AME has to be open in the background for this to work).  I noticed that If you stop a conversion for whatever reason, it will not automatically restart the queue, even when removing and then re-adding the source footage from the watch folder (CS5).  In this case you will need to manually start the queue for the stopped item. The source and output footage will be organized by AME automatically.  You will see two folders in the Watch Folder where your files will be saved, one called “Output” and another called “Source” – pretty self explanatory.

To create a Watch folder in AME:

1. Go to the file menu and select Create Watch Folder.
2. A window will open where you can select a folder or create a new one.
3. AME will list the watch folder in the queue, select it and choose a preset and format to configure your encode settings.
4. Drop a video or videos into the watch folder and AME will automatically start encoding it.

Streamline your workflow with Dynamic Link

Dynamic Link (Dynamic link is only available when you buy a software Bundle from Adobe) is a great way to streamline your workflow.  It allows for the quick transfer of projects and footage between After Effects, Premiere, and Encore.  The benefit really becomes obvious when you need to go back to the original source footage and make edits.  For example, lets say you are working in Premiere using footage that was rendered out from After Effects.  If any changes are needed in the original After Effects footage, normally you would need to re-render in After Effects, then re-imported into Premiere.  With Adobe Dynamic link, you can skip the re-rendering process.  Any changes that are made to the original footage in After Effects are automatically updated in the Premier Project, saving you from having to render twice.  You can even use the exact same workflow inside After Effects to import Premiere sequences, pretty cool!

To create a Dynamic Link project:

1. Go the File menu in Premiere and select Adobe Dynamic Link > Import Adobe After Effects Composition
   
2. The comp you choose will then appear in your assets folder ready for use, it will have a small green icon in the bottom-left corner indicating it’s a Dynamic Link project.
   

Photo by …Tim, Flickr

About the Author

In Google Analytics and Social Interaction Part 1, we looked at methods of recording how often people on our sites share content from that site with their networks in social media.  But how do we measure incoming traffic from these social networks?

Measuring Incoming Traffic With Google Analytics

The Campaigns tracking tool in Google Analytics provides as excellent tool for tracking incoming links. In order to use this tool, you’ll have to build a link that contains tracking codes for helping Analytics parse and categorize the incoming traffic. The process in doing so is not difficult, but it involves a little more time than just copying and pasting a link from your browser and pasting into a status update.

Google Link Builder

Google provides an excellent free tool called URL Builder to construct a link with the tracking information needed by Analytics. Go ahead and book mark this – this is an invaluable tool you should be using often.

This tool requires you to fill out a web form that asks for the relevant information. Only Campaign Source, Medium, and Name are the only required fields.:

• Website URL: enter the web address that you re linking to
• Campaign Source: Enter the name of the social media account that the ink will be placed on (Twitter, Facebook, Youtube, etc.)
• Campaign Medium: Specify how the link will be displayed in its usage – (banner, email, link, etc.)
• Campaign Term: If you are building a link for a paid campaign, you can specify the keywords that were purchased as part of the campaign
• Campaign Content: You can use this field to assign a category for a link – for example, if you are going to have multiple links in your social media for a fundraising campaign, you could specify the link as belonging to fundraising or summer-fundraising to be able to measure that data separate from other links in that social media feed.
• Campaign Name: Name of the campaign to track – (For example, social media, Facebook, etc.)

After completing your form fields, click Generate URL to get the link address.

Shorten The Link

Google will now give you your custom link, and it will be ugly and long. It won’t look attractive in a status update, let alone fit in a Twitter message.

That’s were a URL shortening service comes in. A service like bit.ly or Hootsuite’s owl.ly  will collapse the link into a manageable length for posting. Link previews built into Facebook and Twitter allow the end user to preview content before going to the link, which is important for users who might mistrust a link that they cannot tell the destination of before clicking on it.

Use the Link – Collect Analytics

Use the shortened link within your comment, status update or message.

Changes to your website usually begin to show results in 24 hours in Analytics. To view your traffic, go to the Campaigns page under Traffic Sources. There you’ll be able to generate the same kind of reports you do with other incoming traffic data and page interactions, and start determining which social media traffic sources yield the best results for drawing traffic to your web sites.

Log into your website and visit Appearance / Theme Options / Featured Content

There you will find a field titled  ‘Slider Speed‘. Change the value and experiment with the results!

This feature was in high-demand, so thanks for the feedback that led to it!

Fair warning:  this post contains no more than my idle musings.

As a programmer, programming is fun to me.  I’m sure a lot of other code monkeys feel the same way.  It is satisfying to be presented a problem, and create a solution for it.  It is a great feeling to just go in the zone and come up with a piece of code that would make you wonder if another better programmer possessed you for a brief moment.

It is easy to get carried away sometimes though.  The problem is that we fall in love with concept or piece of code and want to use it all the times.  It could be something we came up with ourselves, or something we saw on a blog post somewhere.  It is just so cool that we have to work it into our daily repertoire, whether the situation calls for it or not.  Next thing you know, we have a project using MVVM/n-tier hybrid architecture with a custom-built ORM, all to display an RSS feed.

That is one of the trappings we programmers often fall into; we get sucked into elaborate and complex solutions to do a easy task, when the best solution is often the simplest one.  It may be a little counter-intuitive, but at times it is almost easier to come up with a Rube Goldberg solution than it is to come up with a straightforward one.  Some times It may be because of unfamiliarity with a new programming language and its features, or simple tunnel vision.  Other times it’s because we get caught up with the latest industry trend.  Regardless of why, the end result is often this beast of a code that contains 500 lines to do what 20 lines would do better.

So my advice is to seek simplicity and follow the KISS rule (keep it simple, stupid).  The most elegant code I have seen is often the one that is least verbose (but not illegibly so).  Besides, a simpler code is also easier to maintain, and you’ll thank yourself 6 months later if (when) you have to go back to the old code for whatever reason.

About the Author

Sean Jeng
Web Developer

Sean got his first taste of web development when he saw his friend building an HTML web page to display Dungeons & Dragons character statistics. Since then he has determined that HTML is decidedly not dorky enough, and picked up a couple of programming languages.

Thanks to his stubborn refusal to give up, which is the decades-long result of being really bad at video games, Sean has become proficient at developing and debugging complex solutions. In addition, Sean has learned to be flexible enough to work with various 3rd party software solutions to meet clients’ needs. Just don’t ask him to use OSX. He’s really bad at that too.

Find Sean on Campus

• Communicore Building, C3-030
• 352.273.5679
• seanj@ufl.edu

Illustration: Self-Operating Napkin by Rube Goldberg