YU Home
CPA Blog RSS

Have You Heard About CSS Filters Yet?

July 26th, 2012 by malave

Quick Tip: Have You Heard About CSS Filters Yet?

Over the years CSS has been providing us with more and more ways to accomplish things without an image editor, whether it be 3D transforms or border radius. One of the missing pieces to this puzzle, though, is the ability to saturate, blur, or otherwise filter a photograph with just CSS.

To solve this problem, the W3C has come up with CSS Filters. Using filters we can accomplish many effects which are applicable not only to images, but text and HTML too!

Filter Support

The CSS filter property works just like any other CSS property. However, as usual browser support is pretty thin on the ground. The only browsers that support filters are webkit based (Safari and Chrome). For this reason we need to use browser prefixes. Although webkit is the only engine to support filters, we will use all browser prefixes as it is best practice.

Using Filters

There are a variety of values you can use. When using filters remember that not all your visitors will be able to see them, so it’s best not to use them in a way that is necessary to the user experience. Here’s an example, in which we set an image to have a 5px Gaussian blur:

img
{
-webkit-filter: blur(5px);
 -moz-filter: blur(5px);
 -ms-filter: blur(5px);
-o-filter: blur(5px);
filter: blur(5px);
 }
CSS Gaussian BlurCSS Gaussian Blur

Filters have much wider usages though, another example is using filters to grayscale an image:

img
{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
CSS GrayscaleCSS Grayscale

Pretty simple, huh? Grayscale and blur are only two of a huge range of filters. If you want to learn more you can check out a more comprehensive list of filters here.

Why not experiment a little?

Dr E.

Achieving Online Accessiblity (Yes, You Can!)

July 16th, 2012 by Linda Hsia

In an earlier post, I touched on the subject of online accessibility and why we should all strive for it. “But achieving online accessibility is so hard!,” you say. Well, like just about everything in life, nothing is so black and white. Here are some easy ways to achieve online accessibility. While they won’t provide 100% accessibility, they are major steps forward—and help to dispel the notion that Web accessibility is hard or undoable.

  • Alt (alternative) text: This is text that describes an image on your page. It displays when an image doesn’t load on a page (instead, you see that dreaded box with an “x” inside) or when users have disabled their images. The text is an alternative to viewing the actual image. If an image loads, you can see the text when you hover over the image. Besides helping people with visual disabilities understand an image (by using talking browsers, screen readers, etc.), alt text is also crawled by Googlebot, so it’s important for SEO purposes as well. In fact, check out Google’s tips on how to create great alt text. However, remember: users first, search engines second. Put something useful in that alt text instead of trying to “game” search engines.
  • Don’t use images for text: Many sites have images to be whimsical or grab users’ attention, but they often don’t convey anything meaningful. Be as stingy with images as you should be with words on your website. Unless your site deals exclusively with images, ask yourself, is this image really necessary?
  • Avoid conveying information solely through the use of color: a blind or color-blind person won’t see this text and nor would users who have a monochromatic display on their Web device.
  • Use simple, declarative sentences: trying to be “cute” with your words or using nuance or jargons is not only often just plain annoying, but they pose extra obstacles for people with cognitive disabilities to comprehend.
  • Identify formats (PDF, PPTs, Excel, Word, etc.) in links: Doing so gives people the option of whether or not they want to—or even can—open your files. Imagine someone with a motor disability and how aggravating it could be for that person to click on an unidentified link to have to close it.

These are just some simple ways to achieve online accessibility. For those involved in Web redesigns, take as many steps as possible to make sure your site is accessible to people with disabilities. And for the rest of us, we should remain vigilant. Organizations can—and have been—sued for not making their site accessible.

Should you pay a tax for using Internet Explorer 7 or older?

July 5th, 2012 by edge

This post is for those of you that insist on using Internet Explorer, especially the older versions.

Did you know your browser is effecting how you see content on sites?  Have you ever wondered why someone would make that button on your favorite website three foot long and purple?

Chrome and Internet Explorer mock comparison courtesy of howtogeek.com.

Well, they didn’t. Your outdated browser did.   Your browser is bad and your computer should feel bad.

Some poor web developers (looks around) spent hours and hours developing and building a fantastic site only to have an inbox full of complaints or comments about three foot long purple buttons and pages that can’t be used or seen.  Instead of the site viewers simply updating to newer versions of  Internet Explorer, or better yet, downloading Chrome, Opera or Firefox for free — those developers spend hours going back and readjusting their sites in order to accommodate the antique browsers.

That’s why one company has taken a drastic step…adding a special tax to purchases for those who use the older versions of Internet Explorer on their site.

According to Ruslan Kogan this is the world’s first Internet Explorer 7 “tax”.

A step too far perhaps? Compensation for extra work, or an excuse for more taxes?  What do you think?

Pew Survey: Who Uses Twitter?

July 2nd, 2012 by Linda Hsia

Boy in business attire at desk with laptop computer

"Hmmm...how can I get my team to tweet more?"

First, the good news (at least for Twitter). According to the 2012 Pew Twitter survey, more people are tweeting these days: the number of adults who tweet daily has doubled since May 2011 and quadrupled since late 2010. Adult users are also logging into Twitter more often now on a daily basis, up from 4 % last year to 8% this year.

Other findings:

  • Thirty-one percent of 18- to 24-year-old Internet users tweet, and 20% of Internet users in this age group tweets nearly every day.
  • Suburbanites and urbanites tweet more than those who live in rural areas.
  • Women tweet slightly more than men.
  • More than 28% of African Americans use Twitter, with 13% doing so daily.

The Mobile Factor

The Pew survey found a strong correlation between youth, mobile devices (especially smartphones) and tweeting. For example, smartphone owners tweet more than Internet users who own more basic mobile phones, and those ages 18-24 are not only the fastest growing Twitter adopters over the last year, but they also have the largest increase in smartphone ownership of any demographic group over the same time period.

I’d like to leave you with a funny but thought-provoking article about live tweeting, which contains this gem: “I know you think that it’s critical that you get your opinions on the presentation out to your legions of followers right this minute. But trust me, your followers can wait for your thoughts until the session is over; you’re not Edward R. Murrow, and this is not the London Blitz.”

Would love to read your thought in comments!

Why is Responsive Web Design Important?

June 26th, 2012 by jin

What is Responsive Web Design?
RWD is a design trend term coined by Ethan Marcotte in his article on A List Apart. The basic concept of RWD consists of having a flexible fluid layout that adapts to the different viewing modes of various web browsers. The end results are beautifully tailored layouts with scaled images and dynamic re-flows of web content.

There are three key technical features, that when composed together will enhance the viewing environment:

  1. tailored style sheets using CSS3 media queries and media query listeners
  2. flexible grid-based layout that uses relative sizing (percentages and ems)
  3. dynamic scaling of images, media, and web content

Why is there a need for responsive designs?
The ability to communicate creatively via the web has forever changed the print industry. Creative minds are no longer bounded by specific dimensions of paper. With the expanding number of web browser dimensions, static design layouts are not enough anymore to accommodate the growing users of modern electronics. From the familiar computer desktops and popular tablets to mobile devices and tv/game console browsers, there is an increasing need for a layout that is fluid and responsive for this changing web landscape.

What are media queries?
CSS2 allowed web developers to specify style sheets based on different media types of screen and/or print. CSS3 took a step forward and allowed developers to render layouts based on additional media queries using expressions to check for specific conditions. For example, a media query would check a device browser’s screen min and max width before changing the background color of the wrapper.

@media screen (min-width:320px) and (max-width:720px)
{
.wrapper { background: #ccc; }
}

Responsive Grid Layouts
There are many responsive CSS frameworks out there. These flexible grid layouts are based on a number of fluid columns with predefined style sheets and media queries that can be used for your future responsive layout needs.

The trend of Responsive Web Design is catching on in popularity. Many sites are now getting a redesign so their layouts can adapt for a better user experience.

Experimenting on how to generate fake web traffic to artificially increase analytics metrics.

June 22nd, 2012 by norberto

I just spent a few minutes writing a console application in .NET that artificially generates traffic on any given website. I will come back with details next week after testing the results.

Stay tuned…

UPDATE:

Have your site even been audited for traffic? In the days of big online advertising businesses, more traffic can mean more $$$ so web traffic auditing becomes important for validating your site popularity in terms of visitors, conversion rates, etc.

I always wondered how that information is filtered and validated to make sure the audit results are legitimate. This is particularly important on sites that monetize referrals to sponsored links or advertising delivering and unlike e-commerce portals, don’t have a shopping cart as a safe source of conversion data. With this in mind I decided  to spend a few minutes writing a script that generates artificial traffic to any given site.

My main goal is to kick start an open discussion and if I’m lucky enough, get illustrated by an expert in the field on how traffic coming from a script similar to the one described here can be filtered out from different analytics data sources.

Since I just wanted to have a working example without spending much time on it, I took a quick & dirty approach. I created a C# console application that takes advantage of the fantastic Tor network to “anonymize” the web requests. Using this blog post as a target I ran the script on a modest VirtualBox instance in my home computer. The results? well as per Google Analytics, this post rapidly surpassed in number of visits the most popular post in this blog by a wide margin. This is too obvious and too small to have any impact on a minimally popular site but I believe you get the idea.

While coding I took many shortcuts to keep the code simple (again this is intended to be nothing but a quick experiment) but if someone is willing to spend more time, it should not be too difficult to run multiple threads and multiple Tor instances to generate a decent amount of traffic, simulate user interaction through browser automation instead of just creating browser instances (using selenium or a similar tool?), add http_referer’s to the game, dynamically restrict Tor’s exit nodes to generate traffic from limited geographical areas, etc.

The console application below simply randomly opens the target url using one of the installed browsers at a (again) random interval. The application ran on a VM instance configured to use Privoxy as a proxy to Tor (with the G Analytics tracking code whitelisted). I wanted to make sure most calls are seen coming from different locations, so the script restarts the Tor process before opening each browser, forcing Tor reconnect to the network and pick up a (typically) new exit node and  a different IP. It also deletes the browser cookies file after closing it to keep the tracking code history clean so all visits are considered unique.

As a result a new web request coming from a random user agent is generated from a different source IP each time at random intervals. Which is exactly what I wanted to test..

IMPORTANT: Most of us love the Tor project, if bots start to continuously add load to the network circuits it will rapidly become unusable. I limited the script traffic to about one request a minute for this very reason. Please do not abuse it so we can all use it…

Beside blacklisting known Tor exit nodes IPs pulled from the server logs, I can’t think on any way to separate legitime traffic from the one generated by an improved version of the script  below.

Any tech guru out there willing to educate this fool? Please?

 

Finally, here is the code (please excuse the formatting):

 

       private const string TargetUrl = "http://YourTargetUrl.com";
        private const string TorAppLocation = @"C:\YourPathToTheTorApp\tor.exe";
        private static readonly string[] InstalledBrowsers = new[]{"IExplore","Chrome","Firefox","Safari"};
        static private Process _prc;
        static private int _reqCounter = 0;

 

        static void Main(string[] args)
        {
            StopTor(); //Initial Stop in case Tor is running when the script was started
            while (true){
                StartTor(); //Start the Tor process (Gets new IP)
                OpenBrowser(InstalledBrowsers[new Random().Next(0, InstalledBrowsers.GetUpperBound(0)+1)]); //Use a random browser from the list of installed.
                StopTor();  // Stops Tor
            }
        }
        static void OpenBrowser(string browserName)
        {
            try {
                //create the request..
                var processInfo = new ProcessStartInfo(browserName + ".exe") {WindowStyle = ProcessWindowStyle.Hidden, Arguments = TargetUrl};
                Process.Start(processInfo);
                Console.WriteLine("Currently Using: " + browserName + ", Total Visits: " + _reqCounter);

                // Wait for a random interval in between 40 and 60 secs. This limits the requests frequency to aprox. 1 per minute. I don't want add too much unnecessary traffic to the Tor network or the web server.
                Thread.Sleep(new Random().Next(40000, 60000)); //This can be easily changed to make the traffic it more natural. 
                Process[] brProcesses = Process.GetProcessesByName(browserName);
                foreach (var br in brProcesses) br.Kill(); //Killing all processes is a very bad idea but works for this quick test.
                Thread.Sleep(2000);
                deleteCookies(browserName); //Delete browser cookies so each request is considered unique.
                _reqCounter++;
            }
            catch(Exception ex)
            {
                Console.WriteLine("Error: " + ex.Message);
            }
        }

 

       static void deleteCookies (string BrowserName)
        {
            try {
                switch (BrowserName) //A switch statement for this?? I guess I'm tired already.. :) 
                {
                    case "IExplore":
                        Directory.Delete(@"YourPathToCookiesFile\Cookies",true);
                        break;
                    case "Chrome":
                        File.Delete(@"YourPathToCookiesFile\Cookies");
                        break;
                    case "Firefox":
                       File.Delete(@"YourPathToCookiesFile\Cookies");
                        break;
                    case "Safari":
                       File.Delete(@"YourPathToCookiesFile\Cookies");
                        break;
                }
            }
            catch (Exception ex)
            {} //Ignore Errors..
        }
        static void StartTor()
        {
            Console.WriteLine("Starting Tor Process...");
            try{
                //create and start the Tor Win process
                _prc = new Process {StartInfo = new ProcessStartInfo(TorAppLocation, "ControlPort 9051 CircuitBuildTimeout 10")};
                _prc.StartInfo.WindowStyle = ProcessWindowStyle.Hidden;
                _prc.Start();
                Thread.Sleep(10000); //Wait for Tor to be ready, this should be improved but is good enough for now.
            }catch(Exception ex)
            {
                Console.WriteLine("Error: " + ex.Message);
            }
       }
        static void StopTor()
        {
            Console.WriteLine("Stopping Tor Process...");
            try
            {
                _prc.Kill();
            }
            catch (Exception ex)
              {} // Empty catch statement to suppress errors when the Tor process isn't running
            Thread.Sleep(5000);
        }

 

Video Indexing

June 19th, 2012 by robertso

I’ve been reading alot about video indexing and meta information for SEO.  Human-defined metatags are subjective and limited in scope.  A number of companies are developing software that can create so-called “fingerprints” for video assets beyond keywords like “educational”, “comedy” etc. (Virage is one such application).  I also edit large video files of an hour or more in length.  Having to edit in real time is slow but there is no way around it–if you want to know what is in a video and make sure all the technical details are correct, especially when it comes to synching audio from a multi-camera production and checking for audio drift.  But I came up with an indexing system of my own in order to get a more detailed snapshot of a video without having to watch the entire video.  The original video was 56 minutes, which was clipped every 140 seconds for 20 seconds second starting at the 24 second mark  (the intervals and start position can be set to any values) which generated an index video of 8 minutes.   In my next post I will explain how to use the index videoas a table of contents of sorts to navigate within the full length video.

The original video is at:

 

Peter Robertson

Crazy Online Ideas That Actually Worked

June 12th, 2012 by admin

Did you already signup to that new social media network called BuggaSpace.Com?  Oh Bugga is the best!  You can stay in touch with your friends pets and even speak to superstar performers like Chester Cheeto and the Geico Gecko. 

Smh.  Is it just me or does it seem that the internet has taken a weird turn? 

ChatRoulette?  Not sure what that is?  Here is the breakdown.

Chatroulette.com is an online chat website that pairs strangers from around the world together for webcam-based conversations. Visitors to the website begin an online chat (text, audio, and video) with another visitor who is chosen at random. At any point, either user may leave the current chat by initiating another random connection.

Can you say “car wreck”.

But wait, how about this goodie!

FindAGrave.Com

Yeah, that is not a mistype.  Visiting famous people is a creepy hobby. Visiting them after they have passed on is the idea that Jim Tipton used to achieve success. When Jim’s ‘tombstone tourism’ came to a sudden halt after he ran out of dead celebrities to visit in his native Utah, he started FindAGrave.com; a site that was dedicated to locating the graves of people buried anywhere inside the U.S. More than enough people were happy to make use of the site and soon enough genealogy research and other paid services were being offered as well on the website.

The great and horrible thing about the ‘Net, is that just about anything can be posted or created for use by the masses, but some of them should never have seen the light of day. 

Here are some other great ones and a top 10 list provided by our friends at DailyBlogTips.com

1. MillionDollarHomepage.com

Selling pixels on a website is a ridiculous idea but when it comes to the internet, ridiculous ideas have always been the the key to getting ridiculous amounts of money. For Alex Tew selling pixels on a website was simply supposed to be something to help him pay for college. Little did he know it would do more than that and that it would in fact help him get a head start on life and now the young man is already worth over a million dollars. Interviews on major News networks and more publicity than a 21 year old would know what to do with would follow and soon enough other people even tried to piggyback on his idea. Now that is ridiculous, ridiculously successful.

2. SantaMail.org

Each year it gets harder to convince kids that there is a real Santa Claus somewhere in the North pole. But no kid would argue if they got a reply directly from Santa himself and armed with this idea Byron Reese set out to become a real live Santa Claus for kids all over the world. Through the website SantaMail.org, kids got the chance to send their letters to ‘Santa’ at the ‘North Pole’. To get a personalized reply from Santa would cost the kids parents $9.95. This may not seem like much until you multiply it by the 300 000 responses that ‘Santa’ sent last year alone.

3. S@%!MyDadSays

What do you get when you put together an unemployed writer living with his parents, a father with enough sarcastic remarks to make a grown up cry and a twitter account? In Justin Halpern’s experience, you get mentioned on The Daily show, a book deal and last but not least a sitcom deal. A mere 30 days after the writer started posting his father’s ‘wisdom’ on a twitter account, Justin Halpern was well on his way to a successful life without even trying.

4. WheresGeorge.com

We are always being told to wash our hands after touching money because we don’t know where the money has been. Now possible for you to know exactly where your money has been just by logging into WheresGeorge.com. This website tracks your money by allowing users to enter their zip codes and currency serial numbers. If the person who had the bill before you had already done the same, you will get to see just where your money has been. You will also be able to see where the bill is if the next owner does the same thing. The website is currently tracking nearly 200 million bills worth over a billion U.S. dollars.

5. PickyDomains.com

At the beginning of the ‘dot com’ era you could get paid thousands of dollars for a single domain name if it caught the attention of the right people. Dmitry Davydov’s success online went something like this, except he charged a measly fifty dollars for each domain name that he came up with. The buyers liked it since it was risk free and they didn’t have to pay anything if they didn’t like the name. Dmitry liked the idea because every single domain name he sold meant fifty dollars gotten doing something that he enjoyed. Soon enough The San Francisco Chronicle got wind of his story and with the fame came more customers. Crowd sourcing became the next step for Dmitry and the rest is history.

6. FindAGrave.Com

Visiting famous people is a creepy hobby. Visiting them after they have passed on is the idea that Jim Tipton used to achieve success. When Jim’s ‘tombstone tourism’ came to a sudden halt after he ran out of dead celebrities to visit in his native Utah, he started FindAGrave.com; a site that was dedicated to locating the graves of people buried anywhere inside the U.S. More than enough people were happy to make use of the site and soon enough genealogy research and other paid services were being offered as well on the website.

7. Doggles.com

It may have been the world’s most worthless invention ever but to Ken and Roni di Lullo, this crazy idea turned out to be worth millions. Most dog owners would never have thought to buy sunglasses for their dogs but the moment ‘Doggles’ started to be marketed as an anti UV radiation shield, thousands of dog owners rushed to get a pair for their dogs. The result? Cool looking dogs and two new members in the millionaires club with a chain of shops in 16 countries around the world.

8. GeesePoliceInc.com

It may not be an online business but it was with the help of the internet that David Marcks managed to change a relatively simple idea into a 2 million dollar a year business. In the 1980s, David noticed two things as he worked on the golf course. First, the wild geese were proving to be quite irritating and second, his border collie was unusually effective when it came to chasing away these birds. Putting these two together, David Marcks started his very own business that now comprises 27 trucks and 32 dogs with the mission of ridding any place of wild geese.

9. BugMeNot.com

Most internet users would agree that there is nothing more irritating than having to register to access a site that is already free. However, nobody would agree more to this fact than Guy King and that is why he decided to do something about it. BugMeNot.com is a free web service that was started by King to provide instant logins to free sites (like YouTube.com or NYTimes.com) and the site was a major success since many users were tired of having to waste time on pointless registration processes and having to expose their email addresses to spamming. In an ironic twist, BugMeNot.com got publicity simply because they tried to shut it down in 2004. After a simple mention of this fact in Wired magazine, the website got even more attention and was soon expanding to other niches such as Retailmenot.com.

10. ShoppingCartAbuse.Com

Only a crazy person would fall in love with an idea such as this one. Luckily for the owner of ShoppingCartAbuse.com there are plenty of crazy people out there. According to the website description, “The Center for Prevention of Shopping Cart Abuse is an organization dedicated to preventing the pervasiveness of Shopping Cart abuse”. With T-shirts and other commercial interests, the website became an instant hit and even a few Hollywood celebrities could not resist being part of this ‘campaign’.

Animated *.gif in a jiffy

June 4th, 2012 by strazyns

The old saying goes like this: “A picture is worth 1000 words.”

Most of us though, feel the need to share more than one picture. To not share 1000 words, but an entire story with a series of images. For those who have this need, but are short for time, there’s a great tool out there which automates the process.

GifNinja.com is a great tool for creating an animated slideshow with just a few clicks.  Save some screen real estate and create a gallery-like experience for your audience with this amazing tool.

GifNinja works best if all images are the same dimensions.  If you need help resizing your images, you should check out this other great tool, Pixlr.

Slideshow gif Example

 

Online Accessibility: What Is It, and Why Does It Matter?

May 28th, 2012 by Linda Hsia

What does it mean to have a site that is online or Web accessible? After all, if people can connect to a Web site, isn’t that all there is to it?

It’s not that simple. Here are two definitions of Web or online accessibility (both terms can be used interchangeably):

  • “Web accessibility means that people with disabilities can use the Web.”—Web Accessibility Initiative (WAI)
  • “Web accessibility refers to the practice of making Web sites usable by people of all abilities and disabilities”—Wikipedia

Who’s Affected by Inaccessible Web Content?

 The groups most likely to be negatively affected by inaccessible Web content may surprise you and may even include people you know:

  • People with visual disabilities, such as blindness, low vision and color blindness
  • People with hearing disabilities, such as deafness or hard of hearing
  • People with motor disabilities resulting from traumatic injuries (e.g., spinal cord injuries) or diseases or congenital conditions (e.g., cerebral palsy, muscular dystrophy, multiple sclerosis, etc.)
  • People with cognitive disabilities, including learning disabilities, memory problems, ADHD, etc.
  • People with seizure disorders that can be trigged by content that strobes, flickers or flashes

Why Should I Care to Make My Site Accessible?

A very compelling reason to do so is that Web accessibility is the law. It’s not a nice to have but a must have.

It’s also the moral thing to do. You may know people who belong in one of the categories listed above, or you yourself may fit into one of the categories. Shouldn’t everyone, regardless of her or his abilities, be able to get and use Web content?

If your organization still isn’t convinced, then make the business argument: to not do so could hurt the pocketbook. Your company can get sued, and there is a growing number of organizations that have been, including Penn State, University of Arizona, Northwestern, Target, JetBlue, AOL, Priceline.com, etc., etc.

Helpful Links

WebAIM

WAVE (Web Accessibility Evaluation Tool)

WAI (Web Accessibility Initiative)

Wikipedia

American with Disabilities Act (ADA) (passed in 1990, it didn’t really cover the Web but revisions went into effect March 2011)

Sections 504 of the Rehabilitation Act (PDF) (Designed to protect qualified individuals with disabilities from discrimination. Applies to employers and organizations that receive financial assistance from any federal department or agency.)

Sections 508 of the Rehabilitation Act (Requires all federal Web sites be accessible and that anyone who does business with the U.S. government have accessible sites. Although it doesn’t regulate the private sector or apply to recipients of federal funds, Section 508 strongly influences Web accessibility.)

 

NEXT UP: simple things you can do to make your site online accessible.