How to change your website to an iPad app at minimal cost

The emergence of requirements and Scheme Review, product design, technical implementation, technical details, no., emergence of requirements, and Scheme Review

Imagine that you (Web developers) have a movie website (including introduction, comments, and cinema information ), how do you make movie applications of web sites into iPad applications at minimal cost?

Preferred solution: if your father or son is an iOS developer, the cost will be minimal (regardless of the emotional cost), or if your father is Li Gang or Li shuangjiang (no money is spent on finding someone to do it ), the cost will be minimized. However, if you are neither a rich second generation, an official second generation, nor a rich second generation or an official second generation, this solution can be ignored.

The most painful solution: You can use a webview to install all the pages of this website, and thenProgramThe icon is complete. This seems to be the best solution. Just like you add a shortcut to this website on your iPad, you can directly open the webpage to reach the page you need.

Optimization solution: If you work harder, you will transform it into a web app suitable for iPad users. As a result, the solution was finalized.

. Product Design

Because the screen size of the iPad is large enough, according to the usage habits of iPad users, users like to complete all the tasks on one screen without switching the screen (no matter how dazzling the animation you are switching the screen ). Therefore, the interaction design of the application can be roughly as follows:

On the left side is the category list of movies. A category list is displayed, showing the basic information of a movie (such as movie posters, stars, directors, years, countries, and types ); there are several tabs on the right. Each tab contains a lot of information. Tab1, movie details (plot, highlights,); tab2, cinema information (cinema and MAP information for the film to be released nearby); tab3, movie comments (you can also add your own comments ). When you click each tab, the current tab is displayed.

If you consider that there are enough categories of movies, you can consider three columns of display, the left and right are: Category list, single category movie list, single movie details (various tabs ).

. Technical Implementation

There is no doubt that such a requirement and product design require a large amount of front-end interaction. Without such requirement, a large amount of JavaScript is required.

Step 1: If you are diligent, you can create a program startup animation to load the movie category list and movie list on the page when you start the animation. Of course, you should not expect to load the content in each tab of each movie in the startup animation. Otherwise, you will never be able to see it. When there is enough data in the movie list, you can only load the content of the category list during this period.

Step 2: If only the movie list is loaded at startup, send an Ajax request when the user clicks each category, then, the data returned from the request is assembled into HTML and inserted into the page for display, and the requested data is cached.

Step 3: when a user clicks a single movie in the movie list, the tab displays information about the movie on the right, and the default tab displays (such as the movie details ), use Ajax technology to cache requested data

Step 4: When you click another tab, the content of this tab is displayed. If the data content is cached, the cached data is used. If the data content does not exist, it is obtained through Ajax.

. Technical Details

Here are some specific technical details to note:

1. Delayed Loading

To reduce the startup time, some static files need to be loaded with delay. For example, a Javascript file is required for each tab Style File. In particular, the Comment tab, where users need to log on to post comments, post comments, views, and other information. This module needs to load a lot of JavaScript.

2. Script dependency problems

Take the comment tab module as an example: this module contains many JavaScript modules, such as form scripts, Ajax login registration module, and comment module. When commenting, if the user is not logged on, you need to load the login registration module to log on or register, and some Form Verification scripts in the login registration module depend on the form script module. Many loader functions can be used for processing such module dependencies, such as Yui loader and seajs.

. No.

Okay, I admit, I have also become a title party. This blog post is an inspiration for using pure Web applications similar to this technology. To reduce the length, do not paste the specificCodeThe latency loading of static files and script dependencies mentioned in this article are many technologies discussed at the front end, which can be written separately.

In addition, the dynamic loading under IE6 has a bug. If you click to bind the event function to element A to include the code for loading static files, the static file loading will fail, it was dropped by abord. Solution, of course, if it is an iPad application, you don't need to consider this damn ie6bug.