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
You use the image widget in the CONTROLS/COMMON section of Intel XDK.
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
Comments