Saturday, April 16, 2016

Intel XDK: Controls 3: HTML5 and the image widget in Intel XDK

figure is the new HTML element in HTML5 and it contains figcaption element which is also new in HTML5. image is only one of the things that can be represented by figure.

You use the image widget in the CONTROLS/COMMON section of Intel XDK.

 imagewdiget_01

You just drag this from COMMON and drop it on  the page (as you enter the page you should see a broad orange border around the active area). By default the Strabburg.jpg gets entered as the image as shown.


imageWidget_02

With the following properties that you can use:


imageWidget_03

The html code for this inserted image is:


imagewidget_04

The scale-image style specifies a width of 200px of unspecified height

If we modify the properties as shown:


imageWidget_05

The HTML gets modified as shown:


imageWidget_06

The W3C recommendation for the image is the following (https://www.w3.org/TR/html5/embedded-content-0.html#examples-of-scenarios-where-users-benefit-from-text-alternatives-for-images)

Quoted from the above source:

"In some cases an image is included in a published document, but the author is unable to provide an appropriate text alternative. In such cases the minimum requirement is to provide a caption for the image using the figure and figcaption elements under the following conditions:
    The img element is in a figure element
    The figure element contains a figcaption element
    The figcaption element contains content other than inter-element whitespace
    Ignoring the figcaption element and its descendants, the figure element has no Text node descendants other than inter-element whitespace, and no embedded content descendant other than the img element.
In other words, the only content of the figure is an img element and a figcaption element, and the figcaption element must include (caption) content.
Such cases are to be kept to an absolute minimum. If there is even the slightest possibility of the author having the ability to provide real alternative text, then it would not be acceptable to omit the alt attribute."

TAB BAR Control in App Framework 7 here:
http://hodentekmobile.blogspot.com/2016/08/intel-xdk-controls-9-tab-bar-control-in.html
Post a Comment