The main goal of this version has been to be able to add the words we want to a list of favorites. This will allow us to keep the searched words for a later study and therefore the improvement of our Basque vocabulary. At present, with the dictionary I use I need to copy and paste the searched entries to the Notes application in order to study them afterwards.
Favorites screen of the version 2 of the dictionary
The working is very simple, as beside each entry we find a star that will save our entry in our favorites when clicking on it. From the favorites screen we will be able to erase words from the list or send the list to us by e-mail, as being a web application there is no other way of saving it.
Changes
Although, in functional terms the only thing added are the favorites, in developing terms I have made many changes. I have to remember that one of the goals of this application is to learn something of JavaScript and not only the development of the application, because although I am not a developer, I think it is important that we the designers get to know JavaScript. I already said on previous posts that the goal of this project is to develop the application without frameworks or libraries, in order to be able to increase the knowledge of applications development for mobiles and of all the elements which are involved. The main changes with respect to the previous version are:
- Design of the favorites screen and programming of the functionality.
- Creation and use of web fonts to use them as icons instead of SVG in order to be able to manage their styles from the CSS.
- Organize the text better in the JavaScript, in languages and separate them from the rest of the programming.
- Give a bigger area to the cancel button of the search input because sometimes the focus went to input.
- Background colors of the search results are now managed completely from the CSS with pseudo-class ‘:nth-child(odd)’ and ‘:nth-child(even)’.
- Now ‘setTimeout’ is used with the results loop to reduce the waiting time in long results.
- On sending the favorites by e-mail, it is used text without format, although iOS allows html -which is not allowed by most part of browsers-, it is a feature to be taken into account.
- The autofocus attribute of the search input has been removed, as although it is not supported in iOS, the input appeared with the style applied in the state :focus. It gets focus automatically when entering in the application only when it is accessed from a desktop computer with JavaScript.
- The majority of the graphic elements have been inserted in the CSS with data URI to do less requests HTTP.
- On the previous version, I said that, for a moment, a white screen appeared when the application started if it was loaded from the iOS home screen. After a number of tests and revising the code of the frameworks in which this did not happen, I have come to the conclusion that the white screen appears on those applications which are very small and those with few requests, therefore I consider this is a small error in iOS with webapps when you access from the home screen. However, most of frameworks, although not very heavy, have got many resources thought for creating any kind of application and do not have a cache manifest, and as they take longer to load, the white screen does not appear. If the heavy resources, as icons and graphics, are removed from those frameworks , I have checked the white screen does appear.
Objectives
Before starting with the next version of the application, the goals I have set are:
- Put the application in Git and get to know a little about the working of Git.
- Compatibility with Android and other systems for mobiles, as till now, I have only focused on iOS but I want to know other systems, mainly Android.
- Pack the application with PhoneGap and publish it on the App Stores from Google and Apple, mainly. This way, I will see the working of PhoneGap and the different possibilities given of integration with the system. In particular, for this application I am interested in the possibilities it can offer to save the favorites and so to consider any other different solution to the sending by e-mail. I will also see the publishing process of an application on the different App Stores and what that implies.
- I would like to see the possibility of turning the application into native with Titanium, as in the version 3 the amount of the data of the dictionary will probably be much bigger and it would be better managed by a native app. For what I have seen of the Titanium documentation, it does not seem to be difficult to adapt a programming on JavaScript so this adapts to Titanium, at least for an app like this one, but when one starts with this kind of frameworks, the problems start to appear and in that case, it is not my goal to get complicated and waste time on it.
- I will consider to insert one or another animation in CSS, but only if it contributes to the usability of the application because my main goal is this to be a search tool, as fast as possible and with the minimum number of clicks by the user.
- To consider the use of some model of compression-decompression on JavaScript for the dictionary, as on the next version it will be much bigger.
Problems
Some of the problems this version has and which I hope to be able to correct on coming versions:
- The main problem I have noticed is that the favorites screen takes quite a long time to show the results on the mobile. I guess I will have to think of a more effective way of searching, as, although I do not think it is something important now, it will be so on the next version and I will have to solve it.
Demo
Next we can see a demo of the dictionary. If you wish to load the dictionary to our iOS device you have to access the following link, Hiztegia v2, with the Safari browser of our iPhone and click on the ‘Add to the home screen’ button.
