Technologies for Web Animations and their Positive and Negative Sides Regarding Web Page Metrics

The development of web technologies has led to the availability of various multimedia content on the web. In addition to text, images, and videos, transitions, animations and interactivity are increasingly used. Transitions and animations present the content on the page in more interesting, attractive ways and can attract and retain users longer, improving the measurable parameters of page visits as well as the user experience. Animations on the web can be created in many ways. And if the animations are not executed well, they can slow down the page. The goal of this article is to compare the measurable parameters of animations created with different technologies. HTML, CSS, SVG, P5js, WebGL technologies and animations created with a 3D modeling tool were used. The article uses two different examples of animations created with different technologies and then tested on several devices

Fuzzy Logic-Based Evaluation Model of Handwritten Font Sizes Readability on Extra Small Devices

Handwritten fonts are appealing to designers, but their application in web design can cause a readability problems. Different handwritten letter cuts in different font sizes are not equally readable on all screen types. The problem often occurs on extra small devices such as mobile phones. Therefore, it is necessary to choose the combination of the font type and appropriate font size that will ensure responsiveness and be readable on different devices, especially the small ones. For this purpose, a study of readability of monoline handwritten font in seven letter cuts (thin, ultra-light, light, regular, semi-bold, bold, and ultra-bold) in several font sizes was conducted. Variable font was used because it contains all style versions of one typeface family, as opposed to standard font families that use different files for each style version. Also, variable font is suitable for use on web because one file with all the necessary typeface styles is significantly smaller in size than classic families with multiple files which shortens the font loading time. Furthermore, model of readability evaluation using the fuzzy logic based postprocessing method for segmentation values related to evaluation criteria is proposed. Prototype of a variable handwritten fonts are tested in responsive web environment, using CSS technology. The results show that handwritten font size readability evaluation has measurable output because the score combine various numeral factors affecting the readability of particular font size in several letter cuts.  Using of proposed model in short time can show readability level of some font type in some font size on a new responsive web suitable for different screen sizes, including extra small devices

Readability Evaluation of Variable Handwritten Fonts on Different Screen Sizes Using Fuzzy Logic

According to the OpenType standard, variable font is a single font file which contains all style versions of one typeface family, as opposed to standard font families that use different files for each style version. Therefore, they are suitable for use on web because one file with all the necessary typeface styles is significantly smaller in size than classic families with multiple files. This shortens the font loading time, which enables wide range of typographical use on various devices. This paper investigates the readability of handwritten variable fonts in a responsible web environment on four screen sizes: extra small, small, medium, and large. Seven letter cuts were made from basic monoline handwritten font: thin, ultra-light, light, regular, semi-bold, bold, and ultra-bold. This paper presents model of readability evaluation using the fuzzy logic based postprocessing method for segmentation values related to evaluation criteria. Linguistic variable’s values are used to rate readability level against each of the criteria i.e., attributes. Prototype of a variable handwritten fonts are tested in responsive web environment, using CSS technology. The results show that readability evaluation has measurable output because the score combine various numeral factors affecting the readability of particular letter cut.  Also, the results indicate that this type of font is not suitable for displays on extra small and medium screens such as mobile phones and tablets. That knowledge opens advanced possibilities to designers when designing for web because variable handwritten fonts are relatively simple, uniform and easily manageable. Using of proposed model in short time can show readability level of some font type on a new web

Manipulating Pixels in Computer Graphics by Converting Raster Elements to Vector Shapes as a Function of Hue

This paper proposes a method for changing pixel shape by converting a CMYK raster image (pixel) to an HSB vector image, replacing the square cells of the CMYK pixels with different vector shapes. The replacement of a pixel by the selected vector shape is done depending on the detected color values for each pixel. The CMYK values are first converted to the corresponding RGB values and then to the HSB system, and the vector shape is selected based on the obtained hue values. The vector shape is drawn in the defined space, according to the row and column matrix of the pixels of the original CMYK image. Twenty-one vector shapes are introduced to replace the pixels depending on the hue. The pixels of each hue are replaced by a different shape. The application of this conversion has its greatest value in the creation of security graphics for printed documents and the individualization of digital artwork by creating structured patterns based on the hue