Client discovery-Summary of the development project on the "movie watching group activity" page development and client new version jump test page, jump to the Development Project

Client discovery-Summary of the development project on the "movie watching group activity" page development and client new version jump test page, jump to the Development Project

This week is my ideal practice. If I have a project on hand, I am busy with projects. If I have no project, I will improve my basic skills. Let's take a look at the effect of the activity page this week.

Project Introduction

(1). Development of the movie watching group activity page

The development of this project page is basically based on the technology used previously. The difference is that the development of ledi is in the ignorant state, and it is still somewhat improved, every line of code on the page knows the ins and outs, And the pop-up window, alignment, and center layout have gained a deeper understanding from reading "front-end development practices" this week. Css alignment and center layout are not completed by individual attributes, but are associated and triggered. What I did not understand before writing pages is the trigger relationship between attributes.

Here is an example of the pop-up window structure.

<Div id = "popup">  <div id = "popup_position"> <p class = "submit header_info"> Register after verifying the mobile phone number, </p> <p class = "submit"> you can contact </p> <input type = "tel" id = "tel" value = "mobile phone number: "> <br> <button class =" cupid green "id =" confirm "> OK </button> <button class =" cupid white "id =" cancel "> cancel </button> </div> <div id = "success"> <p> Successful participation, wait patiently for your invitation </p> <button class = "cupid green" id = "confirm_success"> OK </button> </div> <div id = "mask"> </div>

The pop-up window is structured into the pop-up section, that is, the pop-up section represented by the property as popup, And the mask section under the pop-up window represented by the property as mask. The outer popup uses absolute positioning, while the inner popup_position is used for Precise Positioning Relative to the image. For adjustment adaptation, you only need to adjust the external absolute position, internal relative position, internal element width and height ratio.

@media only screen and (max-width: 800px) and (min-width: 710px) {#join{position:absolute;left:25%;top:28%;}#popup{top:10%;width:90%;left:4%;}#popup img{width:100%;}#popup_position{top:-180px;}.submit{font-size: 16px;}#tel{height:40px;font-size: 16px;width:80%;}.cupid{height:40px;font-size: 16px;width:38%;}}

In the interaction section, jquery is relatively simple to implement the business logic. When it is pointed out separately, the page cannot slide. The implementation here is as follows:

JQuery (window). scroll (function () {if (jQuery ("# mask" ).css ("display ")! = "None") {// scroll bars are not allowed to scroll jQuery (window). scrollTop (0) ;}} in the pop-up window; // Page scrolling is not allowed when the mask appears

During the project, the entire team encountered some collaboration problems. There are about two days of the gap period from the moment you know the demand to start the work. After the gap period, there is only one day of development, and the next day of the activity will be launched. In the entire process, the development time is too short, and the test division of labor is not clear. Development, products, and testing all involve the testing role, the difference between the mobile terminal and the PC end lies in the diversity of adaptation, and there are many functional tests, while similar adaptation tests are relatively less. In the response header, the process is clearly tested and then launched. However, there is still a lack of unified communication rules for the specific responsibilities and focus of each process.

Another risk is that developers cannot optimize the product logic from the Logical Rationality point of view based on the product requirements, and will also cause a waste of resources in the future.

The above two points are some of the problems encountered this time. I should reflect to the leaders the improvement of the development process, increase the focus of adaptation testing, and timely feedback to the product to optimize the product logic.

(2) client new version jump test page development This project mainly constructs buttons Based on the interfaces provided as needed to provide a test page in the test environment. The Development page is very simple, and the main focus is on determining the requirement, that is, the interface parameters and the number of buttons. It takes a long time to communicate with the backend (ios and android) and test.

After the project determines who to communicate with, the next interface problem can be quickly completed. I have to lament that the team's efficiency is not in technical development, but in communication.

(3) personal insights In the free time, this week I will mainly study the "front-end development practices" and "PHP programming typical 300 examples". I can read the former without a mentor, determine the development process of the entire front-end and common development modes. This feature is based on the principle, without too many flashy examples. The latter is the logic code commonly used by php to develop backend code, which can lay the foundation for the website plan this year.
Generally, the Development page is designed for mobile terminals, and browser compatibility is not taken into account. The above-mentioned front-end book also gives a detailed description of these contents. First, let's look at the compatibility tool.
The method for adapting multiple IE versions in IE browser:

IEtest God tool:
Then, let's take a look at a fun and high-end css sprites example: You can set the background of a label as a chip and hide the extra background, set the width and height of the label, and then display the background by moving the background image, achieve what we want.
Similar to a covered landscape painting, if a part is torn apart, it shows a part of the landscape, while the landscape painting can also move relative to the cloth.

span{display:block;width:18px;height:20px; position:absolute;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif) no-repeat;}.up1{background-position:-58px -20px;}

It's a recipe 4 made by Le di. This page has a detailed method of making a poker video, as well as code that can be dragged. It is unclear in the code that some browser size features can be clicked on this page. The biggest workload for processing these css sprites is to generate the corresponding coordinates. Here is a simple tool: bg2css_v3.2.1.air, and there are also online tools.