It isn’t easy to build a website and remain free of all possible problems. As Super Savvy Carolyn will tell you, “It isn’t easy to do my job.”

In response to the Obamacare problems, a web designer might feel one part commiseration and one part exactness. I feel your pain, but I would hopefully be able to do better.

The Obamacare problems are massive and multifold. The Healthcare.gov website is only part of the disappointment and frustration.

However, breaking down the debacle into oversimplified lessons proved irresistible and instructive and even entertaining, thanks to Jon Stewart.

Obamacare’s problems can teach us 3 lessons on how to approach any web design project.

1. Technical Problems

From the initial logging-in problems to the website crashing to the delayed enrollment process, the technical problems with the Healtcare.gov website have been one of Obamacare’s biggest difficulties.

“Sloppy” contractors and the process of choosing them are being blamed for the faulty website infrastructure that will purportedly require more time than predicted for substantial improvement.

Jon Stewart on The Daily Show discusses Obama’s “tech surge” move to try to assist in fixing the website problems. When you have to implement a “tech surge,” things are looking very bad indeed, and Pac Man attacking is not a good sign.

Hopefully this tech surge will be able to solve the critical problem of where to access the healthcare information for the 47% of the uninsured who are uncertain of how to learn more about Obamacare.

The latest technical problem involves the shutting down of a data center, stopping all fifty states from online enrollment.

Lesson learned:

Build a solid website from the ground up, hiring skilled people who are invested in helping you implement a successful end product that is easy to navigate.

2. Security problems

A security flaw in the coding of Healthcare.gov has been revealed as allowing “clickjacking,” invisible links planted in legitimate websites that give hackers access to private information.

When a user inputs personal information such as a social security number into the faulty website, these invisible links give hackers the ability to create “fake identities, fake credit cards, and fake accounts very easily,” according to a Mother Jones interview with Kyle Wilhoit, a threat researcher at Trend Micro, a Japanese security software company.

Worse is the impression that the federal contractors who are responsible for the cybersecurity of the Healthcare.gov site don’t take it seriously.

Lesson learned:

Industry leaders as well as programmers must take responsibility for online security because we are all potentially affected by gaps in cybersecurity.

3. Planning problems

The Healthcare.gov site’s fiasco began with planning problems. The end-to-end testing wasn’t given enough time, the decision to go live October 1 was premature, and shelving a window-shopping feature just before going live probably contributed to a bottleneck instead of allowing users to look before registering.

From the smallest website project to a nation’s healthcare digital infrastructure, bad planning will come back to haunt you. And if you’re inaccurate or you make promises you know you can’t keep, you will be haunted even more.

According to experts, the Obama administration knew that millions of Americans wouldn’t be able to keep their existing health insurance, despite Obama’s highly televised claims otherwise.

The latest affront to the broken promise is the appeal for funds by OFA, funneled through emails requesting a survey on Obamacare that, once completed, directs the user to a donation request to support Obamacare.

Lesson learned:

For project success and fulfillment, don’t skip the necessary planning required. Undergo tedious testing, practice thorough development, and design insightful solutions as part of planning a successful website.

Oh, and part of planning means staying informed. Don’t make claims that you know aren’t accurate. It messes with your inner glam.

Photo courtesy of A Futurist at the Movies.

Certain programmers, it seems, are horrified by the prospect of non-geeks taking up the scepter of coding know-how. With knowledge comes power. With power you gain independence.

When you learn basic HTML code you can fix unwanted formatting, add extra spaces, create line breaks, or introduce links and images. All by yourself.

We’re not talking full-on programmer or hard-core code monkey here. Learn basic HTML code and you can find the freedom to not only fix things, but you can add these links or images to your sidebar in the text widgets as well.

Basic HTML Code

 

 

 

 

 

Click on “Text,” your HTML (which stands for Hyper Text Markup Language) editor to see how a post looks compared to the visual or plain text where you type your posts. It’s in the upper right of the New/Edit Post menu in WordPress.

HTML code can normally be found between the carrots or angle brackets, like this: <html>. HTML tags are the keywords surrounded by the angle brackets.

• HTML tags often come in pairs: <p> and </p>.
• The start tag is the first tag and the second tag is the end tag.
• The end tag looks like the start tag but with a forward slash before the keyword or tag name.
• Start and end tags are also called opening tags and closing tags.

Everything that is found between an opening and closing tag is “wrapped” inside and will be displayed in the visual editor according to that type of tag. For example, when you want something bold, everything found between the start and end tag will make it bold, like this:

• <strong>This sentence will be bold!</strong>

Here are more examples of simple HTML with start and end tags:

• <p>This is the beginning and end of a paragraph.</p>
• <em>This sentence will be in italics, or “emphasized.”</em>
• <h1> This is the title or header.</h1>
• <h2>This is the subheader.</h2>
• <h3>This is another subheading.</h3>

If you use multiple tags to alter text, be sure to keep the end tags in the same order as the start tags.

There are also tags that don’t require both a start and end tag:

• </ br> Use this HTML tag to create a line break, or to skip a line
• <hr> This gives you a line across the page and stands for horizontal reference.
• To add a single space type these 6 characters in: &nbsp;  (This stands for non-breaking space.)

HTML for Links

Link tags make those blue-colored (or occasionally other-colored) and sometimes underlined hyperlinks that you can click on and go to another website or another page. Link tags in HTML come in a set of two beginning with <a href and ending with </a>. Here is an example of a hypertext link, also known as an anchor text link:

<a href=”your url here”>your anchor text here</a>

When creating a link to Google.com it will look like this:

<a href=”http://www.google.com/“>Google</a>

This is what it will look like in your text: Google

• The “a” stands for anchor and starts the link to another page.
• The “href” stands for hypertext reference and tells the browser where the link is going
• Add the full URL address to where the link goes. It has an equal sign in front of it and is enclosed in quotes because it’s an attribute of the anchor tag, which is a command inside of a command.
• The anchor text is what appears on the page that the viewer will read and be able to click. Always write something that names the link instead of generic terms such as “click here.”
• The “/a” ends the link command.

For a Link to a New Window

If you want the link to open in a new window (which is what you want your links going to a different site to do), you need to add a target, like this:

<a href=”http://www.google.com/” target=”_blank”>Google</a>

Now your link will open in a new window: Google

For a Link With Pop-Up Text

If you want to add text that pops up when you hover over the link with your mouse, you need to add a title, like this:

<a href=”http://www.google.com/” title=”Google me!”>Google</a>

Now try hovering over the link: Google. (I know, it’s so cool, isn’t it?)

HTML for Images With the <img> Tag

This is the tag you use when you display an image:

<img src=”image.gif” alt=”name of image”>

An image of your favorite cat photo might look like this:

<img src=”favoritecat.gif” alt=” Cutest Cat Ever”>

• “Src” stands for source and the “image.gif” is the url of where the image is stored. Your WordPress site has a media library where you can upload and store images for display.
• The “alt“ attribute specifies the alternate text for the image if the image cannot be displayed for some reason.

To Shift the Image to the Right

When you want to shift the image to the right you need to add that information to the end of the tag, like this:

<img src=”url of image” alt=”image name often keyword” align=”right” />

You can change the “right” to “left” or “center” to float the image wherever you want it. Now you are no longer a Rookie, and you can add Beginning HTML Expert to your resume.

There’s a simple way for hackers to phish your username and then attempt to log in through your log in page.

First, finding your WordPress log in page is as easy as typing in this:

yourdomain.com/wp-login.php

Second, they can phish for your username by entering what’s called the author archive’s URL into the address bar:

yoursitename.com/?author=1

All hackers have to do is change the author number until the usernames come up. When I tried this on two different sites I have admin access to, not only did the usernames of authors come up, but the usernames of subscribers were also exposed.

As I changed the author number, the subscriber names either popped up on the web page with “Archives for” preceding the name (even though there are no archives/content for the names), or they appeared in a drop down box beneath the address bar, or in the browser tab.

Avoid the Danger of Username Theft

In the meantime, when an author is identified with admin rights, the hacker can attempt to access your site by brute force password attacks. This loophole for finding usernames in WordPress sites confirms the danger of two things.

1. A weak password needs updated.

WordPress offers password strength help here.

Your WordPress password is easily changed in your Users Profile under About Yourself.

2. For your username, don’t choose author name, admin, administrator, or any one of the targeted usernames.

See the list of targeted usernames in the recent brute-force attack here.

Your username can’t be changed in your WordPress profile. Follow my simple steps in How to Change Your WordPress Username through your Cpanel.

For every loophole there is an equally effective loophole filler. In a perfect World Wide Web, that is. Staying abreast of countermeasures against hackers requires constant vigilance and a few WordPress plugins to keep the invasion at bay and your usernames safe.

Keep Hackers Away With a Safe Slug

While the World Wide Web isn’t perfect, there are steps you can take to keep your site secure. The WordPress plugin that works to keep your usernames safe is WP Author Slug.

By automatically creating a different display name from the username, hackers are prevented from figuring out your log in name through the author archive’s URL. Instead, the URL will show a set display name and not the username that’s used to log in.

In case you’re wondering, the author “slug” is also known as your “nicename” and is the URL-friendly version of the website title with the author name. It is automatically generated by WordPress to look like this: example.com/author/authorname.

Just wanted to clear that bit of potential slug-confusion up. Nothing like visions of a slimy slug in your URL to ruin your day.

Good luck keeping your WordPress site secure and the loopholes plugged with safe slugs.