Taking Screenshots on Windows 10

Taking a screenshot of the display on a computer can be a great way to convey the configuration settings or an error message.

Preparing the article Install IIS on Windows 10 I was interested in taking screenshots of my progress through the various screens.

I looked at using the pnt scr key.The choices associated with this option are more limited. Having taken the screenshot it requires a document to paste into. I wished to be able to do a simple save to a jpg file. Further, its a simple screen capture, rather than the capture of a selected window or a rectangular area of the window.

I chose to use the  Snipping tool.

To start this I began typing the word snipping in the search box at the bottom left of the screen until the word snipping was presented as an option.

Using the snipping tool I found it convenient to select the New>Window option. I was then able to select from the open windows and click on capture.

Having captured the window, with a trigger delay if it helps, I saved the file for use.

The saved file is of a quality and file size greater than will be required on a website. A smaller file size is downloaded quicker making the page load faster giving happier website visitors and better search engine results.

I used the Gimp to edit my images, reducing the saved image quality. If I had more images to adjust them a program such as XnConvert may have been more appropriate.

Screenshots on Windows 10 continue to support the use of the prt scr key.

Where does UpdraftPlus save its Backups?

Where does UpdraftPlus save the backup files, if none of the multitude of cloud storage offerings is used?

Not wishing to use an external storage location, such as Google Drive, Dropbox or Microsoft OneDrive. I configured UpdraftPlus to save the file locally, within the website space.

The question is “Where does UpdraftPlus save its backup files?

To understand this I logged into the control panel for the website domain and navigated through the file system.

I was lucky I looked within the wp-content directory first, where I found an updraft sub-directory.

PpdrafPplus backup file save directory

As the image above shows within the /wp-content/updraft directory are to be found the UpdraftPlus backups.

In case your website gets compromised you may wish to login occasionally to download these backups.

Better still use one of the external storage services to keep a backup of your website. Unfortunately these could also get deleted, so its still worth keeping a local backup copy.

 

 

 

Remove the Dotted Line Around a Clicked Link

When I click on a link a dotted line appears around it.

As an example, the image below is taken from some recent development work. It shows a menu in white on a dark background.

Remove dotted line around clicked link showing dots

Here I have clicked on the link to the contact us page. The white, dotted border line is showing until this page is replaced by the next.

As viewed I think that the dotted outline, when clicking on the link is not in keeping with the rest of the menu. I would like to remove it.

The image below shows how I would like the transition to look.

Remove dotted line around clicked link without dots

The expectation is that the configuration of the line border is configured in CSS.

In fact its controlled by the CSS outline property.

I added the property to the a entry in CSS, example:

a:hover, a:focus{color:#004;text-decoration:none;outline:none;}

Job done!

Now when I click on on the menu link there is no surrounding dotted line

 

Posted in CSS

Install IIS on Windows 10

For testing and development it’s convenient to install IIS on a Windows computer. In this case Windows 10.

IIS is installed through the Windows features control panel.

To access the Windows features, begin by opening the control panel by right clicking on the Windows logo. From the control panel home select the Programs and then Turn Windows features on and off.

Or if you prefer type the name of the control panel appwiz.cpl into the search box and press enter.

This will open the first stage, the Programs and features control panel.

Windows 10 install IIS programs and features

Click on Turn Windows features on or off in the left hand menu column. This will open a popup showing the list of features available.

Windows 10 install IIS Windows features

From the list select entries pertaining to IIS.

Windows 10 install IIS Windows features IIS options

You may wish to select the outer element allowing it to populate a typical set of options.

Once done click on OK at the bottom

Windows 10 install IIS Windows features applying changes

The new additions will be added.

Windows 10 install IIS Windows features changes completed

Until all is installed.

Checkout your installation of IIS by navigating to http://localhost.

Windows10 install IIS localhost confirmation

 

Adding a New Product to a WooCommerce shop/catalogue

1. Introduction

WooCommerce is a highly customisable shop/cataloguing plug-in.  Details on usage are provided directly via the following references

https://docs.woocommerce.com/document/managing-products/

https://docs.woocommerce.com/document/variable-product/

https://docs.woocommerce.com/document/related-products-up-sells-and-cross-sells/

https://docs.woocommerce.com/document/linking-a-project-to-a-product/

The text below is an overview which may be helpful, however if in doubt, refer to the official WooCommerce documentation

Having logged into your WooCommerce enabled WordPress CMS site the Woocommerce features/options are found in the left hand menu.

  • The WooCommerce menu item covers overall configuration and available options.
  • The Products menu item covers the shop/catalogue content.

To add or edit the products, select Products to expand the available options, followed by the Add Products menu item.

WooCommerce add new product menu add product

  • select Products to see a list of all products currently loaded into the shop/catalogue
  • select Add Product to add an individual product to the shop/catalogue will be listed.
    • note:  WooCommerce does not include bulk import by default, however import plugins are available to  enable bulk import from csv.

2. Navigating the Add Product menu item

Having selected add product you are presented with a number of fields to add product information.

WooCommerce add new product: Add new product page view

  1. Content Area: This is the main content for the product description
  2. Hover over a product to show the possible actions: edit, quick edit and view

edit: takes you to the details page for the selected product, enabling you to update product details as required.

quick edit: takes you to a subset of fields such as price, product category, product availability to enable fast management of the list of products

view: provides a preview of how the product is listed in your shop/catalogue.

3. Adding a new Product

To add a new product either click on Add Product shown at the top of the image above, or click on Add Product from the menu. You are presented with a number of field options and menus:

  1. Product Data type drop down menu: enables the product to be defined as Simple, Grouped or Variable
    • Simple Product: a self contained, single item,
    • Grouped Product: whereby the individual product is detailed, but will be sold as part of a defined group.
    • Variable Product: enables a product to be defined with variations; for example a t-shirt having different colours, or shoes with different sizes.  The product data for a variable product will automatically become the umbrella data for 2 or more additional products – the variants. Selecting Variable product automatically adds a new tab “Variations”. The screen shot below shows the options available for variations – for example product colour.
      To add the variation product, select the attributes tag, adding your variations (for example different colours), then visit the variations tab to select the colour and add the variation, giving the colour variation a unique sku:WooCommerce add new product: variable product variations
  2. Product Data management tabs menu: enables product information to be added under a fixed set of categories:  General, Inventory, Shipping, details on Linked Products and Attributes (specific product details).
    • General: set the price which you will charge for the product.WooCommerce add new product: general
    • Inventory: Add a SKU (Stock Keeping Unit) reference entry to uniquely identify your product. The Stock Status entry may be used to indicate stock level, from  “in stock” to an actual number, using the Manage Stock option.
    • WooCommerce add new product: inventory
    • shipping: Package size for shipping. Leave alone unless you wish to define the shipping box of the product.
    • WooCommerce add new product: shipping
    • Linked Products:  Linked products allow other products to be shown according to the selected item – perhaps similar items or “often bought with” items.  Linked products works in 3 ways:
      • Up-sells – enabling a more expensive product to be highlighted as an alternative to the selected product.  To add up-sell products:
        • create your product as a simple product
        • then create a new product which will incorporate these
        • under product data select simple product and the linked products tab, add products into up-sells
      • Cross-sells – a chance to sell an additional product. Bought a phone – why not add a case?
      • Grouping – set this to group the product with other items.
    • WooCommerce add new product: linked prodcts
    • Attributes:  An option to define additional custom properties.  If you specialise in a particular range of products then additional details may be appropriate. For example a painting may warrant water colour, oils, width /height and canvas.
    • WooCommerce add new product: attributes
    • Advanced: Additional options to enable a note to be sent to the customer with the purchase, to set the menu order and to enable customers to review products.

WooCommerce add new product: advanced

3. Generic product details

Accessed from the right hand panel, the generic product details are important to categorise and display your product information in the shop/catalogue

Product Categories: Enable you to associate your product with a particular category(ies).  These categories are used when displaying products.

Product Tags: A way to add an extra level of categorisation. Tags can be a great way of promoting products/website pages.

Product Image: A single large image is shown to represent the product. The image is uploaded in the usual way, either my selecting from the media images already in the library or by adding a new image from the local computer.

Product Gallery: If you wish to show more than one image then add more here.

Product Short Description: Does what it says, provides a short summary description about the product on list pages. Shown prior to clicking through to the full product details.

END

Link your Twitter Android app to your Twitter Account

Create a Twitter application to link your Android Twitter app with your Twitter account, enabling the posting of tweets from your Android phone or tablet.

Most of the Android Twitter apps make use of their own Twitter application by default.

Whilst this makes the configuration of the app easy, Twitter imposes a limit on the number of clients using a given application. A number of these clients have previously reached their client limit.

With your own Twitter application you are not reliant upon the configuration and maintenance of details by someone else.

Also the security keys which you use are unique to your application – much safer. And as many of the Twitter Android apps are at, or near the limit imposed by Twitter using your app allows someone else to make use of the default.

Create your own Twitter application, linking your Twitter Android app. Its easy to do and avoids any potential issues from using the default application associated with one of the Android apps.

The Twitter application provides two encrypted keys to enter in the Twitter app.

In this example I used Twidere, of coarse other apps are available.

In the Twidere app slide in from the left edge of the screen to show the configuration options.

From the settings select network, then scroll down to select default API settings.

On this page it is the consumer key and consumer secret which we shall be entering from our Twitter application.

twitter-auth-twidere

Rather than the usual Twitter public website, we’ll start from is the development website dev.twitter.com

At the top of the page click on my apps in the navigation at the top. This goes to https://apps.twitter.com/. No doubt you have a Twitter account – sign in with the details..

Create Twitter Application: Login

After logging in the shown page has a list of your existing Twitter apps.

create-twitter-app-list

Click on Create New App button

create-twitter-app-create

Enter the relevant details. It’s worth describing your app properly in the description, in case you wonder what it is in 6 months time. Ensure that your website link contains the full reference, including the http://

create-twitter-app-details

Select the tab for Keys and Access tokens

create-twitter-app-keys

The consumer key and consumer secret values and shown.

Create Twitter application: Keys and Access Token

Whilst not needed at the moment I often create the access tokens at this time. Click on the button Create my access token to populate the values of the token and token secret.

Copy the application setting values of consumer key (API key) and  consumer secret (API secret) into the Twitter Android app. In our example we are using Twidere. Click OK to save.

Create Twitter Application: Twidere Android Client API Authorisation Settings

Your Android Twitter client app should now be good to go. Return to the list of tweets and try adding a new one.

Website Error 406 Not Acceptable

I like to run WordPress websites showing their URL as friendly URLs. The permalink setting of Post name (http://www.example.com/sample-post/) is selected for this.

However, on a new WordPress website after clicking on Save changes I was getting a screen showing a 406 not acceptable error.

406 not acceptable

I investigated making this setting manually, editing the file .htaccess.

The section relevant to the permalinks was empty:

# BEGIN WordPress

# END WordPress

I was expecting something more akin to this:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

As a workaround I added in the rewrite code and uploaded to the website. Refreshing the permalink page there was no difference. Reviewing the .htaccess file once more the content between the WordPress lines was once more empty.

Other content within the file was retained an actioned.

Searching the Internet for more details I found reference to ModSecurity.

And here it is on the control panel:

406 not acceptable :control panel modsecurity

Whats the default setting for ModSecurity? Is it active and can it be turned off?

To begin I clicked on the ModSecurity icon.

406 not acceptable :control panel configure modsecurity

In the top row click on the Disable button

406 not acceptable :control panel disable modsecurity

Confirm Disable all.

There you have it: Correcting the 406 Not acceptable error by disabling ModSecurity.

WooCommerce Sort by Custom Field

Modify the WooCommerce catelogue ordering to sort using your own custom field.

Rather than taking the products by alphabetical order, or whatever, I wanted to be able to fine tune the ordering and be more specific.

I chose to add a custom field to the WooCommerce shop products. This would then be used as my sort argument.

WooCommerce sort by custom field

Shown in the image above is the extra field called seq_num. To fit products in between each other the number given can be to a fine graduation.

To give the custom ordering based upon the custom field value I tweaked the WooCommerce function woocommerce_get_catalog_ordering_args.

Here’s the addition to the functions.php file

add_filter('woocommerce_get_catalog_ordering_args', 'woocommerce_get_custom_ordering_args');

function woocommerce_get_custom_ordering_args( $args ) {
$args['order'] = 'ASC';
$args['meta_key'] = 'seq_num';
$args['orderby'] = 'meta_value_num';
return $args;
}

Why add ALT Text to an Image?

Adding ALT text to a website image is good for SEO, but is that all?

The image alt text is the short phrase that pops up when you hover over an image.

The alt text can also be shown when the image fails to load or download.

The alt text parameter associated with a website image is best known for its SEO requisite. However, it’s also important for Braille, screen readers and in case the image fails to download.

Oh, and if someone is viewing your website with the Lynx web browser.

Reasons to add Image alt Text

To summarise, adding descriptive text to your images is good for:

  • SEO
  • Search engine indexing
  • Braille readers
  • Screen readers
  • Disabled image download

SEO

SEO ranking is acheived through a number of factors. Amongst these is the quality of the underlying HTML code.

SEO includes adherence to the standards defined for website design and build.

Badly written website HTML code can adversely affect a website’s search engine ranking.

Included within badly written HTML code is the omission of the alt text from an image. So yes, not supplying this text can impact on your website.

Good alt text may also be used in promoting the web page and the image on the search image results. The text may help to have your image shown on the Google search results, image listing.

Search Engine Indexing

The search engine robots, crawling the Internet, are not able to interpret an image, understanding how you perceive it to be used.

For example, you have included a picture of a building on a web page. The alt text may be used to clarify its context. Perhaps you provided the interior design; your company is based here; as an architect it interests you; or maybe it’s simply a lovely building which inspires you.

Adding alt text to the image will clarify, to the search engine robot the context in which you are using the image.

Otherwise the only available reference info is the file name, and dependent upon the context within the surrounding text.

Screen Readers

A screen reader will convert the text on a web page to synthesised speech, or braille, allowing those with limited sight to browse the Internet, hearing the content of web pages.

Screen readers operate by converting the text content of a web page to either speech or braille. The text content for conversion includes not only the visible sentences of text but some of the underlying code to. To best understand a web page’s content a screen reader will handle elements such as tables and images by cleverly giving more information such as highlighting the table headers.

A screen reader will work best where the underlying HTML code is correctly structured. Making use of the less visible parameters such as the image alt text.

Simply having an image with no description, or the original camera file name won’t be of help.

Image Download Disabled

Disabling image download is the correct setting for best security, when configuring an email client.

Although not a page on your website it does illustrate the importance of adding a descriptive text to your images.

Why add alt Tex to an Image: Lynx Browser

A basic editor, such as Lynx doesn’t handle images. A useful tool if your desktop windowing system has crashed, or you are accessing via a terminal session.

Adding the alt Text

It’s really easy to add the alt text associated with an image.

The common CMSs all offer an easy option to add the descriptive text to the images.

For example WordPress, when editing an image in the media pages or on a page or post offers the alt text as a text box to be completed when editing an image. As shown in the image below.

Image alt Text WordPress Attachment Details

The WordPress CMS offers the appropriate text fields, when editing an image. Other CMSs do likewise.

If you are interested in how it’s implemented in HTML. It’s simply the addition of the parameter alt, as shown in the simplified version below, of the phone box image:

<img  src=”http://www.vntweb.co.uk/image-alt-text-wordpress-attachment-details.png” alt=”Image alt Text WordPress Attachment Details” />

Further Reading

For more information about why you should add alt text to your website images there’s a wikipedia screen reader article and RNIB has info about assistive technology, also read about the BBC’s view on accessability of their website with screen readers and WebAIM has details about designing for screen reader compatibility

DNN FAQ Unknown Server Tag dnn:DnnListBox

Catching up with DotNetNuke site updates I observed an error on a page with the FAQ module installed.

The website had been updated to DNN 8.0.4.

Bellow is the DNN FAQ module error

DotNetNuke.Services.Exceptions.ModuleLoadException: Unknown server tag 'dnn:DnnListBox'. ---> System.Web.HttpParseException: Unknown server tag 'dnn:DnnListBox'. ---> System.Web.HttpParseException: Unknown server tag 'dnn:DnnListBox'. ---> System.Web.HttpException: Unknown server tag 'dnn:DnnListBox'. at System.Web.UI.TagPrefixTagNameToTypeMapper.System.Web.UI.ITagNameToTypeMapper.GetControlType(String tagName, IDictionary attribs) at System.Web.UI.MainTagNameToTypeMapper.GetControlType(String tagName, IDictionary attribs, Boolean fAllowHtmlTags) at System.Web.UI.ControlBuilder.CreateChildBuilder(String filter, String tagName, IDictionary attribs, TemplateParser parser, ControlBuilder parentBuilder, String id, Int32 line, VirtualPath virtualPath, Type& childType, Boolean defaultProperty) at System.Web.UI.TemplateParser.ProcessBeginTag(Match match, String inputText) at System.Web.UI.TemplateParser.ParseStringInternal(String text, Encoding fileEncoding) --- End of inner exception stack trace --- at System.Web.UI.TemplateParser.ProcessException(Exception ex) at System.Web.UI.TemplateParser.ParseStringInternal(String text, Encoding fileEncoding) at System.Web.UI.TemplateParser.ParseString(String text, VirtualPath virtualPath, Encoding fileEncoding) --- End of inner exception stack trace --- at System.Web.UI.TemplateParser.ParseString(String text, VirtualPath virtualPath, Encoding fileEncoding) at System.Web.UI.TemplateParser.ParseFile(String physicalPath, VirtualPath virtualPath) at System.Web.UI.TemplateParser.ParseInternal() at System.Web.UI.TemplateParser.Parse() at System.Web.Compilation.BaseTemplateBuildProvider.get_CodeCompilerType() at System.Web.Compilation.BuildProvider.GetCompilerTypeFromBuildProvider(BuildProvider buildProvider) at System.Web.Compilation.BuildProvidersCompiler.ProcessBuildProviders() at System.Web.Compilation.BuildProvidersCompiler.PerformBuild() at System.Web.Compilation.BuildManager.CompileWebFile(VirtualPath virtualPath) at System.Web.Compilation.BuildManager.GetVPathBuildResultInternal(VirtualPath virtualPath, Boolean noBuild, Boolean allowCrossApp, Boolean allowBuildInPrecompile, Boolean throwIfNotFound, Boolean ensureIsUpToDate) at System.Web.Compilation.BuildManager.GetVPathBuildResultWithNoAssert(HttpContext context, VirtualPath virtualPath, Boolean noBuild, Boolean allowCrossApp, Boolean allowBuildInPrecompile, Boolean throwIfNotFound, Boolean ensureIsUpToDate) at System.Web.UI.TemplateControl.LoadControl(VirtualPath virtualPath) at DotNetNuke.UI.ControlUtilities.LoadControl[T](TemplateControl containerControl, String ControlSrc) at DotNetNuke.UI.Modules.WebFormsModuleControlFactory.CreateModuleControl(TemplateControl containerControl, ModuleInfo moduleConfiguration) at DotNetNuke.UI.Modules.ModuleControlFactory.LoadModuleControl(TemplateControl containerControl, ModuleInfo moduleConfiguration) at DotNetNuke.UI.Modules.ModuleHost.LoadModuleControl() --- End of inner exception stack trace ---

I visited the DNN FAQ module on github, downloaded and installed the more recent updated version 08.04.00.

The error was gone!