Download Sponsor Flipwall Shortcode  Download from WordPress

As taken from the readme file:

Description

Creates a cool sponsor wall with flip effect; instead of complicated post management, embed tiles anywhere with shortcodes!

Creates a two-sided square with a “logo side” and a “detail side”. Logo side will display a scaled image, while the detail side will show a name, description, and website link.

Based on awesome script Sponsor Flip Wall with jQuery & CSS by Martin Angelov. Not related to plugin WP Sponsor Flip Wall, which creates a content type in order to display tiles.

Installation

1. Unzip, upload plugin folder to your plugins directory (/wp-content/plugins/)
2. Activate plugin
3. Add flipwall tile shortcode anywhere you need it.

Frequently Asked Questions

How do I make a flipwall tile?

Use the shortcode!

What is the shortcode?

Use the following format:

[flipwall id="image-name" title="Sponsor Name" url="http://whatever.com" linktext="Instead of whatever.com" image="url to image" text="description if singleline" ] Description with <em>HTML</em> [/flipwall] 

where

• id = a unique identifier; if not provided just increments flipwall-#
• title = the name to display at the top of the “detail side”
• url = external link on “detail side”
• linktext = if provided, the text of the external link (instead of just showing the URL)
• image = url of the image for the “logo side”; if not provided will just display text “More about $title”
• text = optional – you can use this for a simpler shortcode if the description is just one line
• class = optional class to apply to the tile

Pretty much all of the attributes are optional:

[flipwall]This tile has no attributes, just a description[/flipwall] [flipwall text="This is just a one-liner"] 

But your resulting tiles wouldn’t be very useful.

Please note: if using the single-line version with text, you must either list all of them as such or list them at the end (due to the way shortcodes are closed in WP)

Also, if you want to use the default container, just wrap everything inside

[flipwall-group] ... [/flipwall-group] 

which will automatically clearfix the tiles.

Can I change the defaults?

Only one simple hook available:

• add_filter('abtSponsorFlipwall_localize', YOURFN);change the base javascript variables used by the flipwall init script:
  • stylesheet: replace the default stylesheet with your own to change the default appearance of tiles
  • speed: change the flip speed (from 350 ms)
  • direction: change the flip direction (from ‘lr’)

Download Contact-Form-7: 3rd-Party Integration  Download from WordPress

As taken from the readme file:

Description

Send Contact Form 7 Submissions to a 3rd-party Service, like a CRM. Multiple configurable services, custom field mapping. Provides hooks and filters for pre/post processing of results. Allows you to send separate emails, or attach additional results to existing emails. Comes with a couple examples of hooks for common CRMs (listrak, mailchimp, salesforce).

The plugin essentially makes a remote request (POST) to a service URL, passing along remapped form submission values.

Includes hidden field plugin from Contact Form 7 Modules: Hidden Fields. Based on idea by Alex Hager “How to Integrate Salesforce in Contact Form 7”

Installation

1. Unzip, upload plugin folder to your plugins directory (/wp-content/plugins/)
2. Make sure Contact Form 7 is installed
3. Activate plugin
4. Go to new admin subpage “3rdparty Services” under the CF7 “Contact” menu and configure services + field mapping.

Please note that this includes an instance of hidden.php, which is part of the “Contact Form 7 Modules” plugin — this will show up on the Plugin administration page, but is included automatically, so you don’t need to enable it. This file will only be included if you don’t already have the module installed.

Frequently Asked Questions

How do I add / configure a service?

See Screenshots for visual examples.

Essentially,

1. Name your service
2. Enter the submission URL — if your “service” provides an HTML form, you would use the form action here
3. Choose which forms will submit to this service (“Attach to Forms”)
4. Set the default “success condition”, or leave blank to ignore (or if using post processing, see Hooks – this just looks for the provided text in the service response, and if present assumes “success”
5. Allow hooks for further processing – unchecking it just saves minimal processing power, as it won’t try to execute filters
6. Map your form submission values (from the CF7 field tags) to expected fields for your service. 1:1 mapping given as the name of the CF7 field and the name of the 3rdparty field; you can also provide static values by checking the “Is Value?” checkbox and providing the value in the “CF7 Field” column.
7. Add, remove, and rearrange mapping – basically just for visual clarity.
8. Use the provided hooks (as given in the bottom of the service block)
9. Add new services as needed

How can I pre/post process the request/results?

See section Hooks. See plugin folder /3rd-parties for example code for some common CRMs, which you can either directly include or copy to your code.

Screenshots

1. Admin page – create multiple services, set up debugging/notice emails, example code
2. Sample service – mailchimp integration, with static and mapped values
3. Customized thank-you page

Hooks

1. add_action('Cf73rdPartyIntegration_service_a#',...
   • hook for each service, indicated by the # – this is given in the ‘Hooks’ section of each service
   • provide a function which takes $response, &$results as arguments
   • allows you to perform further processing on the service response, and directly alter the processing results, provided as array('success'=>false, 'errors'=>false, 'attach'=>'', 'message' => '');, where
     • success = true or false – change whether the service request is treated as “correct” or not
     • errors = an array of error messages to return to the form
     • attach = text to attach to the end of the email body
     • message = the message notification shown (from CF7 ajax response) below the form
   • note that the basic “success condition” may be augmented here by post processing
2. add_filter('Cf73rdPartyIntegration_service_filter_post_#, ...
   • hook for each service, indicated by the # – this is given in the ‘Hooks’ section of each service
   • allows you to programmatically alter the request parameters sent to the service

Basic examples provided directly on plugin Admin page (collapsed box “Examples of callback hooks”). Code samples for common CRMS included in the /3rd-parties plugin folder.

We’re strive to make this User Experience process part of each and every project we work on.

With markers and paper, we can rapidly sketch through several layout possibilities.

Why Wireframe?

One critical user experience technique is wireframes. We make wireframe mockups of our sites before our designers lay color to pixel because it allows us to explore ideas quickly, keeping the good ones and leaving behind those that won’t work. These wireframes act like blueprints for the complex interactions and flows for the website users.

This idea exploration leads to our client’s customers finding what they’re looking for, or looking to do, as quickly as is possible.  This speed for the user is very important.  In fact, our client’s customers demand it.

There are two wireframing tools we’re very fond of here.

1. Markers

Simple sketching with paper, markers and highlighters.  It’s a method that can’t be beat for its speed and efficiency at communicating ideas.  Think of it like the first draft of a great story — rough around the edges, but you have a fair idea as to what’s going on.

With a little labeling, the sketch becomes a powerful tool.

Several AtlanticBT staffers recently attended a day-long seminar put on by the Triangle Usability Professionals Association where the techniques of interface sketching were explored. We learned about using different marker shades, along with highlighters, to imply depth, focus, and interactivity.

It was great for all involved, and we knew we had to make it a formal part of our project process.

As an exercise, we took a look at our own Portfolio page and sketched out some possible upgrades to it.  The sketching allowed us to explore several ideas without spending any unnecessary development time.

2. Balsamiq Mockups

Wireframing with Balsamiq Mockups quickly provides clear direction.

Sketching is great – but at some point it becomes necessary to get those ideas onto screen so we can share them with our clients and internal team.  That’s where we turn to a prototyping tool like Balsamiq Mockups.

Balsamiq Mockups maintains the sort of low-detail “focus-on-the-feature” feel of sketching, but in a digital format.  It’s easy to use and easy to make changes when client and user feedback starts rolling in.  Balsamiq’s interface allows the user to add common website elements like text, links, buttons, and layout elements to the page with drag-n-drop ease.

Balsamiq allows us to take our sketches, refine and annotate them, and then share them with our clients to ensure that they’re getting exactly what they’re looking for as far with their site’s features navigation.

An Ounce of Prevention

The wireframing process provides three great benefits:

1. It saves everyone time and effort by answering a lot of project questions before designers and developers get started on their work.
2. It prevents unnecessary rework later in the project.
3. It lets us explore how the user will interact with the website beforehand in a way that non-visual methods sometimes miss, and does it in a way that is fast and easy for everyone involved to give feedback on.

Of course, the competition represents only one part of your business you need to keep an eye on. Just as important is keeping a healthy bottom line. As the economy has gone sour over the last couple of years, lots of business owners and marketers have decided to cut back on their web investments. Some did this as a matter of planning; for others, it was a stark necessity. As things continue to pick up, however, you’re going to want to be sure you’re doing all you need to do in order to bring in new sales and customers. Here are four things to consider adding to your business site, if you haven’t already:

1. Links to Twitter, Facebook, LinkedIn, and so on.

Social networking isn’t just a newer way to find customers – it’s a different way of interacting with them altogether. But you’re not going to enjoy any of the benefits (like stronger relationships, bigger account values, and increased referrals) if no one ever finds your profile. That’s why it’s so important that you place links to your information at these sites on your home page, and possibly other places. You want to make it as easy as possible for people to find you.

Another reason to take this step, like many on this list, is because visitors expect it. They’ve become accustomed to communicating with friends, colleagues, and vendors in social networking formats, and so if you aren’t there, they might wonder whether your business is staying up with new ideas and processes.

2. Video.

The recent increase in availability of high-speed Internet service, not to mention the lowering prices, has meant that online videos have become more cost-effective than they were just a few years ago. While video used to chew up too much bandwidth to effectively convey even the simplest of marketing messages, these days cell phones, netbooks, and other low-end computers can process longer clips easily.

The uses for video on your business site are almost endless. Besides creating sales materials, you can also release instructional pieces that show your customers how to use and maintain your products, introductory clips that draw visitors deeper into your site, and even “viral” sketches that spread your brand quickly from one user to another.

3. A blog.

There aren’t many companies or self-employed professionals who haven’t at least tried blogging, and for good reason: blogs allow you to communicate with your customers informally while helping your search engine optimization efforts at the same time. To get the most out of yours, though, you need to do more than make the occasional post. Instead, make sure visitors can find it easily, and then post fresh content at least a few times a month. Blogging might not be new, but it’s still growing; you can’t afford to miss out on the benefits it can bring your business.

4. A newsletter or free giveaway.

Unless you work for an enormous company with nearly unlimited resources (and maybe even then), getting people to your site is probably expensive and time-consuming. Because of that, it’s imperative that your visitors not leave quickly.

By using blogs, video, and social media, you should be able to hold more of their attention than you have in the past. But don’t stop there – make it easy to follow up with them later. Studies have repeatedly shown that it usually takes several contacts to make the first sale to a new customer, and yet many marketers give up after the first try. Whether it’s a free e-book, special report, newsletter, or other promotion, make sure you’re not letting traffic slip away without gathering a bit of information; you work too hard at finding people not to come any closer to a buying relationship.

In web marketing, or any marketing for that matter, there aren’t many “must try” strategies; what works for one company might not make much sense for another. You should try putting these four into play on your website, though. None of them is difficult or expensive, and they can keep you from falling behind the competition as buyers come back to the market.

Web Accessibility in General

Accessibility is an incredibly important aspect of web design. A company, organization, or individual who wants to have a website needs to consider having accessible content. In some fields like government and education to name a couple, they are required by law to have accessible websites.

So what does it mean to be accessible? Accessible to what? Accessibility is about making your content independent on a person’s abilities or disabilities. Regardless of a person’s physical or mental condition, they should be able to access your sites content.

Disabilities are categorized into four main areas:

• Visual
• Hearing
• Motor
• Cognitive

Accessibility Tool for Designers

WebAIM offers a tool called WAVE that evaluates a web page for accessibility issues. Not only do I use this tool personally on all of my projects, but I highly recommend it to others who have a concern for making their sites web accessible.

You can evaluate your website with WAVE one of two ways:

1. Download and install the Firefox WAVE toolbar.
2. Go to WAVE’s website

WAVE offers you a lot of tools to use at your disposal. You can check for errors, look at the structure and order of your site, see a text-only version, disable styles, and much more.

What is nice about checking for errors is that it visually shows you where the errors (if any) are coming from. This can make your design and development process much more efficient as you can pinpoint particular areas of concern.

There is not a greater feeling than to see WAVE give you the thumbs up and the green light on your design. Designers and developers should always be thinking about accessibility in their projects.

I encourage you to try this tool and avoid eliminating a valuable audience.

Firefox recently released Add-ons Collections to provide an easy way for users to share groups of related add-ons (also known as extensions) for their browser environment. This provides like-minded users the ability to share their collections of add-ons  similarly to the way Delicious enables users to share bookmarks.

The initial ABT Web Dev Collection consists of seven of the most essential add-ons in our web development arsenal. For this post we will highlight our current top five. From color sampling and screen grabbing to bug squashing and validating, this add-ons collection greatly improves our productivity and we hope you will find it beneficial.

Web Developer Toolbar

This add-on is considered a staple for web developers of all types. It’s the all-in-one solution where you can quickly disable styles, update CSS, and disable Javascript code. It gives you the ability to troubleshoot on the fly, where you can analyze or make changes to your source code and changes return immediately.

Firebug

Firebug’s developers have coined their add-on as “web development evolved” and we can’t agree more. Similar to the Web Developer Toolbar but different. It’s similar in the sense that you have access to all the same pieces to investigate, debug, etc. but it allows a WYSIWIG view of the inner workings of your web page. To list a few, you can: inspect and edit HTML, modify your CSS, monitor network activity, and quickly find errors.

HTML Validator

As web designers we all know and should strive for valid HTML markup. The HTML validator provides a quick and easy way for you just to do that. If you have error-free markup you get a nice green checkmark letting you know all is well. But if you have errors or warnings it will tell you exactly where in your markup you need to review. Having valid HTML helps contribute to better SEO rankings, browser rendering, and to future-proof your site.

Operator

If you are a web designer and have no idea what microformats are you better get to learning. Put simply, “microformats are a set of simple, open data formats built upon existing and widely adopted standards.” (Source: microformats.org) Microformats help us speak the same language when it comes to standards and as we move towards a semantic web (where we can search for topics  in a question format rather than keyword format) they will become a requirement. Operator gives you the ability to leverage and debug microformats. This is a necessary add-on as you are learning how to properly apply microformats.

ColorZilla

Do you need to quickly create a palette from a web image? Then ColorZilla is your add-on. With ColorZilla you can get a color reading from any point in your browser using an eyedropper tool. In addition you can add colors to your favorites, page zoom, easily adjust colors and paste into another program. A must-have for any web designer.

Be sure to download the new Mozilla Firefox Add-on Collector and then subscribe to our ABT Web Dev Collection to keep up to date with our tried and true collection of add-ons. As we come across other add-ons that we just can’t live without, we’ll add to our collection so you can stay on top of your web development.