Till now I have only tried the application with browsers based on Webkit, on the desktop and with the iOS browser. I have tested it on Android but it did not work so I am going to make it work and I will show the different problems I came across with, in case it helps someone. It has been tested on Android 2.2 and up.
JavaScript
Although I see there are different interface problems, the first problems I will try to solve are those with JavaScript as otherwise you cannot access the different elements of the interface. To revise the application I am going to use the Android emulator. The first thing I will need is to activate the JavaScript console of the browser. To do that, on the address bar I write about:debug and I click Enter. Next, I click on the Menu button and I access the Settings where I will be able to see that a new option has appeared, Debug. I access Debug and I activate the Show JavaScript Console option, and now we can go back to the browser’s window. Now, we have got the following basic functions of text logging:
- console.log(String)
- console.info(String)
- console.warn(String)
- console.error(String)
The problems I have come across with in JavaScript are the following:
- Input event: The first error I see is that, when I write on the search input, this does not gives back any result. That is to say, nothing is working. The event I use on the addEventListener so the searches are done is the ‘input’ event, which I used on iOS because it worked better with the focus actions. Just a change of the ‘input’ event for ‘keydown’ event, makes the application gives results and I confirm that everything works perfectly.
- Execution exceeded timeout: In some of the tests I have performed I have obtained this error, so I guess I will have to optimize the data load.
Interface
The problems I have come across with on the interface are the following:
- background-clip-text: The Favourites icon cannot be seen correctly because I have applied a gradient to the icon font using the technique you can see on the following article https://www.webkit.org/blog/164/background-clip-text/. Finally, and after several tests, I have seen that the best option is to remove the gradient as the different techniques I have found cause enough problems.
- SVG: The language selection button uses an SVG which does not work on previous versions to Android 3.0. I will probably delete the use of SVG and change it later for a font icon.
- Orange borders on focus: With the following CSS I have removed the orange edge shown when you focus on an element.
1* {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);} - Icons text: The icons with no text have a hidden text to which I have applied display:none as they cause problems with the used technique.
- text-shadow: text-shadow does not work correctly when blur is equal to 0, at least on Android 2.3. I have changed blur to 1.
- Home icons: In this part there are no problems. Android recognizes the icons to be added to the iOS home screen so you will have nothing to do with them.
Demo
Next we can see a demo of the dictionary.
- If we want to download the dictionary to our iOS device we have to access the following link, Hiztegia v 2.1, with the Safari browser of our iPhone and click on the ‘Add to the home screen’ button.
- If we want to add the dictionary to our Android home screen we will have to access the following link, Hiztegia v 2.1, click on the Menu and then Save in markers. Then you have to click again on Menu and Markers and once on the markers window you hold the dictionary marker clicked till the menu appears, on which you click on Add shortcut to desktop.
