JavaScript application for iPad. Couple of tips
I got a project to adapt the flash e-learning course for iPad.
I wanted to share some points.
The Media
Project was supposed to allow playing video / audio files, and without unnecessary movements on the part of the user.
Video on the iPad can only be played by clicking on something, i.e. Automatically play a media file, for example, when loading a page it will not work, or it will, but not in all versions of iOS.
So the first time to play video / audio is a click away. Further, if the src attribute is changed to the same tag, catching the onended event, playback can be done automatically.
There were several problems with this part of the project:
1. Before the file was uploaded, the QuickTime logo was displayed on the video tag.
display: none or visibility: hidden did not work. Helped -webkit-transform: translateX (-2048px).
2. Some twitching of sound took place before the video was downloaded and ready for playback. The problem was solved by checking the readyState property of the video tag.
3. For some reason, sometimes, at the click of a user, instead of the desired video file, an audio file was played. I read that in iOS media the object is implemented as a singleton, i.e. there can be only one instance per page. In general, this is all a theory and it didn’t make me any easier. I tried to remove the src attribute or make it empty - no effect. Through experiments src = ".." helped (src = "." Still didn’t help). Probably, it was possible to come up with something more beautiful, but because it was impossible to delete media tags and then I was very tired of this glitch, then I left everything just like that.
So, playing the video file we do this: Another moment about the video - you can’t catch a click on it, you need to put a layer on top and already track the event. Window events
1. ononline, onoffline - it was necessary to track the Internet connection in order to show the user some warnings and, if possible, continue to work.
2. onpageshow - fulfills when the user hasn’t closed the window, clicked on the “home” button on the device itself, and then returned back to safari.
3. onorientationchange - fulfills upon transition between portrait and landscape modes of the device itself. Here you can catch the window.orientation value to determine the mode.
4. onbeforeunload - this, it would seem, a standard event on the iPad does not work. I had to load the entire application into an external iframe and it had to track the onunload event.
Animation
1. Better done with css using -webkit-transition. It works much faster, and this is very important, especially for iPad1.
2. Instead of animating the top and left properties, use translate3d.
3. Well animated scale, this can come in handy when switching between portrait and landscape modes.
4. Poorly animated opacity, width, height, especially if the element has -webkit-box-shadow specified.
CSS
Everything is very good here, one browser and many useful properties.
1. As far as possible, you need to avoid downloading pictures. Gradients, circles, triangles - everything can be done with styles.
2. The fastest way to hide elements is by using the translate3d or translateX properties.
3. Need to study –web-kit css properties, it can save a lot of time. Here you can see http://css-infos.net/properties/webkit .
Touch events
1. Used jQuery Mobile, though I had to pick it up a bit, otherwise he added extra tags to the page. In conjunction with the scrollview plugin, a powerful scroller is obtained. I also tried http://cubiq.org/iscroll
2. For Drag'n'Drop I used this plugin http://www.gotproject.com/blog/post2.html , though I had to finish it, because he did not take into account the scale value of the elements.
3. Instead of click, whenever possible I used touchstart - much faster.
Performance
1. iPad1 and iPad2 are very different in performance, so it’s better to develop using iPad1.
2. It would be nice to avoid serious manipulations with adding / removing DOM elements - iPad1 sometimes just bent over.
3. It is also better to connect the files in the application header using, say, headjs.com, without which the browser sometimes crashes without warning me about anything.
In general, the impression of the work was mixed - I constantly had to look for some hacks, and because of this I often had the feeling that everything was going wrong. In his assessment of the project, he was mistaken twice because before that he had not worked with iPad devices at all.
But, when at the end of the work I looked at the result, it was nice.
I wanted to share some points.
The Media
Project was supposed to allow playing video / audio files, and without unnecessary movements on the part of the user.
Video on the iPad can only be played by clicking on something, i.e. Automatically play a media file, for example, when loading a page it will not work, or it will, but not in all versions of iOS.
So the first time to play video / audio is a click away. Further, if the src attribute is changed to the same tag, catching the onended event, playback can be done automatically.
There were several problems with this part of the project:
1. Before the file was uploaded, the QuickTime logo was displayed on the video tag.
display: none or visibility: hidden did not work. Helped -webkit-transform: translateX (-2048px).
2. Some twitching of sound took place before the video was downloaded and ready for playback. The problem was solved by checking the readyState property of the video tag.
3. For some reason, sometimes, at the click of a user, instead of the desired video file, an audio file was played. I read that in iOS media the object is implemented as a singleton, i.e. there can be only one instance per page. In general, this is all a theory and it didn’t make me any easier. I tried to remove the src attribute or make it empty - no effect. Through experiments src = ".." helped (src = "." Still didn’t help). Probably, it was possible to come up with something more beautiful, but because it was impossible to delete media tags and then I was very tired of this glitch, then I left everything just like that.
So, playing the video file we do this: Another moment about the video - you can’t catch a click on it, you need to put a layer on top and already track the event. Window events
$(video).css("-webkit-transform", "translateX(-2048px)"); //убирает квик-тайм лого перед проигрыванием видео
/* пресекаем глюки с дераганием видео перед тем, как оно нормально начнет проигрываться */
video.play();
if(video.readyState !== 4){
setTimeout(function(){
video.pause();
}, 1);
}
/* отлавливая нужное событие, возвращаем тег видео и начинаем проигрывание */
$(video).bind("canplaythrough", function(){
$(video).css("-webkit-transform", "translateX(0)");
video.play();
});1. ononline, onoffline - it was necessary to track the Internet connection in order to show the user some warnings and, if possible, continue to work.
2. onpageshow - fulfills when the user hasn’t closed the window, clicked on the “home” button on the device itself, and then returned back to safari.
3. onorientationchange - fulfills upon transition between portrait and landscape modes of the device itself. Here you can catch the window.orientation value to determine the mode.
4. onbeforeunload - this, it would seem, a standard event on the iPad does not work. I had to load the entire application into an external iframe and it had to track the onunload event.
Animation
1. Better done with css using -webkit-transition. It works much faster, and this is very important, especially for iPad1.
2. Instead of animating the top and left properties, use translate3d.
3. Well animated scale, this can come in handy when switching between portrait and landscape modes.
4. Poorly animated opacity, width, height, especially if the element has -webkit-box-shadow specified.
CSS
Everything is very good here, one browser and many useful properties.
1. As far as possible, you need to avoid downloading pictures. Gradients, circles, triangles - everything can be done with styles.
2. The fastest way to hide elements is by using the translate3d or translateX properties.
3. Need to study –web-kit css properties, it can save a lot of time. Here you can see http://css-infos.net/properties/webkit .
Touch events
1. Used jQuery Mobile, though I had to pick it up a bit, otherwise he added extra tags to the page. In conjunction with the scrollview plugin, a powerful scroller is obtained. I also tried http://cubiq.org/iscroll
2. For Drag'n'Drop I used this plugin http://www.gotproject.com/blog/post2.html , though I had to finish it, because he did not take into account the scale value of the elements.
3. Instead of click, whenever possible I used touchstart - much faster.
Performance
1. iPad1 and iPad2 are very different in performance, so it’s better to develop using iPad1.
2. It would be nice to avoid serious manipulations with adding / removing DOM elements - iPad1 sometimes just bent over.
3. It is also better to connect the files in the application header using, say, headjs.com, without which the browser sometimes crashes without warning me about anything.
In general, the impression of the work was mixed - I constantly had to look for some hacks, and because of this I often had the feeling that everything was going wrong. In his assessment of the project, he was mistaken twice because before that he had not worked with iPad devices at all.
But, when at the end of the work I looked at the result, it was nice.