Honey Vig Web Developer Ajax,Jquery, ASP, PHP, dotNET

Saturday, January 9, 2016

If you have an e-commerce website, then SSL is mandatory for safely
processing credit cards. But even if you aren’t processing payments, you
should still seriously consider secure HTTP (or HTTPS), especially now
that I’m going to show you how to set it up quickly, for free. Let’s get
started.

What Is SSL And Why Should I Care?

In short, SSL is the “S” in HTTPS. It adds a layer of encryption to
HTTP that ensures that the recipient is actually who they claim to be
and that only authorized recipients can decrypt the message to see its
contents.
Sensitive information such as credit-card numbers — basically, anything private — should always
be served via HTTPS. However, there is an increasing trend towards
serving all content via HTTPS, as we’re seeing on news website, blogs,
search engines and the websites of most mainstream brands. So, even if
your website isn’t processing payments, there are good reasons to
consider HTTPS, a few of which are listed here:

Credibility
Even non-technical audiences associate the little green padlock in the browser’s address bar with trust and reliability.

Password protection
Perhaps your website only hosts kitten videos. But if users are logging
into your website via Wi-Fi with a password that they also use for
online banking, then you are potentially facilitating a serious security
breach by broadcasting those credentials publicly.

Future-proofing
Many websites are still served via HTTP, but there is an undeniable
trend towards HTTPS, and this will only increase as users become
increasingly educated about web security. Be on the right side of
history.

SEO
Google officially announced that HTTPS is used as a ranking signal. In other words, Google is rewarding HTTPS websites by boosting their rankings in search results.

A common argument against HTTPS is that it reduces performance. True,
the process of encrypting and decrypting does cost additional
milliseconds, but in most situations it is negligible, as evidenced by
the fact that performance-conscious companies such as Google and
Facebook serve all of their content via HTTPS. And, true, HTTPS can
exacerbate existing performance problems, like many CSS files being
served individually, but this is mitigated by following basic best
practices for performance. And with the adoption of HTTP/2, the
performance cost of HTTPS is even lower. The bottom line is that the
reduction in performance is a meaningful deterrent only if your website
is either hyperoptimized or so underperforming that every millisecond
matters.

How To Set Up HTTPS For Free

The first step to setting up HTTPS for free is to sign up for a cloud
DNS service. If you have no idea what DNS is, I recommend that you take
a minute to learn before proceeding. The delightful How DNS Works
does a great job of breaking it down into a quippy cartoon. Otherwise,
simply know that DNS is the system whereby domain names like example.com (which humans understand) get linked to IP addresses like 104.28.2.167
(which computers understand). You have many options, but I’m a fan of
CloudFlare because it’s really fast to set up, the dashboard is
intuitive, and a free plan is available with many powerful features.

Setting Up CloudFlare

After registering for a CloudFlare account, you’ll be walked through
an easy wizard to configure your first website, which will conclude with
instructions on how to log into your domain registrar and point the
nameservers to CloudFlare. The change will take some time to propagate,
but when it’s complete, CloudFlare will be hosting your website’s DNS
records. Next, turn on CloudFlare’s “flexible SSL” feature.
Choosing the “flexible SSL” setting is important because it doesn’t
require you to buy and install your own SSL certificate on your
website’s server.

As you can see, CloudFlare is acting as the middleman to secure
traffic between your website and the client. If this were a static HTML
website, you would now be able to connect to it via HTTPS (https://yourdomain.com). WordPress, however, requires additional configuration in order to work with the modified protocol.

Reconfiguring WordPress From HTTP To HTTPS

You will first need to update the “WordPress Address” and “Site
Address” settings in the dashboard, under “Settings” → “General.” When
you do this, you will have to log into the dashboard again.

Proceed cautiously. If you update these settings prematurely, you
risk locking yourself out. For example, if the website isn’t yet
properly configured for HTTPS and the settings are updated, you could
cause a redirect loop that breaks the website and prevents you from
accessing the dashboard.
At this point, you should be able to visit the home page of the
website via HTTPS. However, page links will still point to the HTTP
URLs. WordPress stores links to pages and images as absoute URLs,
meaning that the full URL, including the protocol, is saved in the
database. To ensure that the entire website is consistently served via
HTTPS (without spitting up warnings about mixed content), you will need
to update your legacy content.

Updating Legacy Content

On a small website with only a few pages, the quickest option might
be simply to manually update the URLs by editing existing pages in the
admin interface. If the website is large or has a highly active blog,
then manual editing likely isn’t practical. If your host provides
phpMyAdmin or some other interface to run MySQL queries, you could do
this pretty easily with a few MySQL queries in the SQL tab.
Alternatively, you could follow The Customize Windows’ instructions to do it from the command line.
At the risk of stating the obvious, replace yourdomain.com in the following queries with your actual domain. Also, if you’ve customized WordPress’ table prefix, replace wp_ with the relevant prefix.First, update the URLs of the posts and pages.

After running these queries, you will want to refresh your permalinks
by going to “Settings” → “Permalinks.” Simply change the setting back
to the default, and then set it back to whatever setting you were
originally using.
Now, you should be able to click the menus and links throughout the website, and the protocol should remain HTTPS.

Troubleshooting Mixed-Content Warnings

Depending on the theme and plugins in use, you might get a warning in
the address bar stating that certain resources are not being served
securely. If the errors are associated with assets added by your own
custom theme or plugin, make sure to properly enqueue JavaScript and CSS files and not to hardcode URLs that begin with HTTP.
Most browsers will let you expand the warning to show the specific
requests that are causing the error. You could also try a free plugin
such as SSL Insecure Content Fixer, which will attempt to correct third-party plugins that have failed to do this.
By this point, you should see the green padlock in the URL bar when
visiting your website. If you aren’t using an e-commerce plugin such as
WooCommerce or WP eCommerce, you’re done! If you are, there is an
important last step.

Getting Flexible SSL To Work With E-Commerce Plugins

WordPress has a core function named is_SSL()
that plugins rely on to determine whether traffic is encrypted with
SSL. With the method above alone, this function will return false
because the encryption is only between CloudFlare and the client. The
traffic that PHP interacts with is unencrypted, so the super global that
that function checks (i.e. $_SERVER['HTTPS']) would not be useful. For our purpose, the relevant variable is $_SERVER['HTTP_X_FORWARDED_PROTO'], which, at the time of writing, WordPress does not recognize. The request to change this is long-standing, but it is yet to be resolved.Fortunately, a free plugin will fix this for you immediately, CloudFlare Flexible SSL. Simply install the plugin and activate it. Remember that this technique does not add any more security. Traffic between CloudFlare and your website’s server is still unencrypted and, therefore, still vulnerable to sniffing.

Flexible SSL Is Not Full SSL

CloudFlare’s “Universal SSL” initiative is an interesting attempt to
make the Internet more secure, but it is not without controversy. The
primary concern is that flexible SSL does not encrypt the second half of
the traffic’s journey (to your server), yet the browser currently still
shows the same green padlock that we have come to associate with complete SSL. CloudFlare offers the following justification on its blog:

Having cutting-edge encryption may not seem important to a small
blog, but it is critical to advancing the encrypted-by-default future of
the Internet. Every byte, however seemingly mundane, that flows
encrypted across the Internet makes it more difficult for those who wish
to intercept, throttle, or censor the web. In other words, ensuring
your personal blog is available over HTTPS makes it more likely that a
human rights organization or social media service or independent
journalist will be accessible around the world. Together we can do great
things.

For better or worse, flexible SSL is here, and the Internet will have
to adapt. In the meantime, the burden is on website owners to be
educated and to make responsible decisions.

Redirecting HTTP Requests To HTTPS

Enabling a website to run on HTTPS does not ensure that requests will
actually use the protocol. If your website has been around for a while,
users might have already bookmarked it with HTTP. You can redirect all
HTTP requests to the new protocol by adding the following snippet to the
top of the .htaccess file in the root of your website. If the file does not exist, you can safely add it.

If an .htaccess file already exists, be careful not to change anything between the # BEGIN WordPress and # END WordPress
lines in that file. Those lines are managed by WordPress, and whenever
the permalinks get refreshed, the contents in that section get
overwritten.

Congratulations

By upgrading your website to HTTPS, you have improved your website,
protected users and participated in the advancement of the Internet. And
it didn’t cost you anything!

Friday, January 8, 2016

According to Colour Blind Awareness 4.5% of the population are color-blind.
If your audience is mostly male this increases to 8%. Designing for
color-blind people can be easily forgotten because most designers aren’t
color-blind. In this article I provide 13 tips to improve the
experience for color-blind people – something which can often benefit
people with normal vision too.

What Is Color Blindness?

There are many types
of color blindness but it comes down to not seeing color clearly,
getting colors mixed up, or not being able to differentiate between
certain colors.
These problems can also be exacerbated by the environments in which
people use websites. This could include low-quality monitors, bad
lighting, screen glare, tiny mobile screens and sitting far away from a
huge television screen.
Relying solely on color for readability and affordance makes a website difficult to use, which ultimately affects readership and sales.
While the following tips aren’t exhaustive, they do cover the
majority of problems color-blind people experience when using websites.

1. Text Readability

To ensure text is readable it should pass accessibility guidelines
based on the combination of text color, background color and text size
as follows:

“WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for
normal text and 3:1 for large text (14 point and bold or larger, or 18
point or larger).”— WebAim color contrast checker

2. Text Overlaid On Background Images

Text overlaid on imagery is tricky because some or all of the image may not have sufficient contrast in relation to the text.
Alternatively, you can style the text itself to have a solid color or
a drop shadow, or anything else that matches your brand guidelines.

3. Color Filters, Pickers And Swatches

The screenshot below shows the color filter on Amazon
as seen by someone with and without protanopia (red–green color
blindness). Without descriptive text it is impossible to differentiate
between many of the options available.
Amazon shows descriptive text when the user hovers, but hover isn’t available on mobile.Gap solves this problem by adding a text label beside each color.
This happens to be beneficial for people with normal vision too. For
example, black and navy are difficult colors to differentiate on screen.
A text label takes the guesswork out of it.

4. Photographs Without Useful Descriptions

The screenshot below shows a SuperDry T-shirt
for sale on its website. It is described as “Leaf Jaspe” which is
ambiguous as leaves can come in an assortment of colors (green, yellow,
brown. etc.).Jaspe (or rather “jaspé”) means randomly mottled or
variegated, so using this in addition to the specific color would be
useful: “Gray Green Leaf Jaspe.”

5. Link Recognition

Links should be easy to spot without relying on color. The screenshot
below simulates the vision of somebody with achromatopsia (can’t see
color) viewing the UK Government Digital Service (GDS) website.
Many of the links are hard to see. For example, did you notice that
“GDS team, User research” (located under the heading) are links?
To find a link, users are left having to hover with their mouse
waiting for the cursor to change to a pointer. On mobile, they are left
to tap on text hoping it will make a page request.
The links above with icons are easier to see. For those without, it
would be a good idea to add an underline, which is exactly what GDS does
within the body of its articles.

6. Color Combinations

In the physical world you can’t always control which colors appear
next to one another: a red apple may have dropped and nestled itself
into some green grass. However, we can control the colors we use to design our website. The following color combinations should be avoided where possible:

green/red

green/brown

blue/purple

green/blue

light green/yellow

blue/grey

green/grey

green/black

7. Form Placeholders

Using a placeholder without a label is problematic because placeholder text usually lacks sufficient contrast. Apple has this problem with their registration form. Apple’s registration form uses a placeholder without a label.
Increasing the contrast is not advisable because it will then be hard
to tell the difference between placeholder text and user input.
It’s better to use labels – a good practice anyway – with sufficient contrast, which is exactly what Made.com does. Made.com uses labels with good contrast.

8. Primary Buttons

Often, primary buttons use color alone to present themselves as such, and Argos does just this on its login screenThe Argos login screen relies on color to emphasize the primary button.
Instead, consider using size, placement, boldness, contrast, borders,
icons and anything else that will help – within the bounds of your
brand guidelines. As an example, Kidly uses size, color and iconography)

9. Alert Messaging

Success and error messages are often colored green and red
respectively. Most color-blind people don’t suffer from achromatism, and
so will naturally associate different colors with different messages.
However, using prefix text such as “Success” or, my preference, an icon
makes it quick and easy to read.

10. Required Form Fields

Denoting required fields with color is a problem because some people may not be able to see the differences.
Instead, you could consider:

Marking required fields with an asterisk.

Even better, marking required fields with “required.”

Where possible, remove optional fields altogether.

11. Graphs

Color is often used to signify different segments of a graph.
Using patterns and, where possible, placing text within each segment
makes graphs easy to understand. When text doesn’t fit – as is often the
case with a small pie chart segment – using a key will suffice.

12. Zoom

One accessibility feature that browsers have, is enabling someone to
zoom in as much as they need. This improves readability–which is
especially helpful on a mobile device.
Unfortunately, zoom can be disabled using the Viewport Meta Tag,
which is problematic. For example, text size may be too small to read
in relation to the color contrast—but zooming in effectively increases
the font size, making it easier to read. So don’t disable zoom on your
website.

Similarly to the previous point, browsers provide the ability to
increase text size (instead of zooming the entire page as a whole), in
order to improve readability. However, some browsers disable this
functionality when the font-size is specified in absolute units such as
pixels. Using a relative font size unit, such as ems, ensures that all
browsers afford this capability.

Tooling

There are lots of tools available to help you design for color-blind people:

Check My Colours: if you have an existing website, you can just enter a URL and receive feedback of what needs to be improved.

Color Oracle: a color blindness simulator for Windows, Mac and Linux, showing you what people with common color vision impairments will see.

Conclusion

The tips in this article are not exhaustive, and they are not
necessarily applicable to every situation. However, they do cover the
majority of problems color-blind people experience when using websites.
It’s more important to take away the principles, so that you can
integrate them into your own design process. Ultimately, websites aren’t
just meant to look good – they are meant to be easy to use for
everyone, including people who are color-blind.