One-week self-learning Dynamic Site Design

(Site: http://chentingpc.me)

It took more than six days to design the framework of the site and the implementation of version 0.1, nearly 50 or 60 hours. In fact, the demand analysis, page and system design took nearly four days, and the real dynamic function took only two days to complete. Of course, this includes the learning of languages and tools (HTML, CSS, JavaScript, PHP, and MySQL) related to site design and implementation from scratch; in addition to my previous website construction experience using WordPress and discuz frameworks, I have basically no idea about HTML, CSS, JavaScript, PHP, and MySQL programming. This article will record my design ideas, site design methods, and learning experiences. The full text is divided into four parts: source, design conception and demand analysis, system analysis and design, site design learning method.

Figure 1: Final Homepage

Source

I have been planning a website for a long time.

I have been working on a smart player for a long time, just a year ago. I also made a standalone version. This version looks very rough. It is something that I did after I just finished learning C ++ in the last 10 days of the National Day last year. But how easy is it for programming below windows, what's more, what I learned at that time is C/C ++. I have never learned anything about the operating system, network, or even data structure. So I always miss it, you need to make this player (because you have never met an ideal player, you are currently using this player that can actively manage your own songs and actively play your desired music ).

The most important thing to improve the player is the algorithm, network, and interface. The algorithm must be more intelligent, and the network can communicate with each other, so that the collective intelligence and interface must be more beautiful. However, it is always difficult to take the time to do this in windows, because it is very difficult to take a lot of time (I have tried, however, the brand-new design in a very short time is not as useful as the original version ). This issue is stranded.

Not long ago, I began to find that the csdn Blog system was really bad. I can only publish technical articles on it. Because it is a technical site, I have to open a Sina Blog (Weibo) to publish some other ideas ), in addition, I can only remember some important privacy information on my laptop. This is just an article I wrote! There are some important or unimportant articles and information I have collected. What I can do today is to repost them to my blog, or store them in my favorites, once there is a mess, I don't know what the mess is. The only management is classification, and a little more is the powerless keyword tag. This is nothing. There are different types of articles, I don't want to send all the articles to the homepage (do I need to send a technical detail and a complaint I collected along with an important article I wrote to the homepage in the same place?, this is not very strange.) I also don't want all people to see all my articles. I want to grant them permissions, but I can't do it? Yes, it can be done in a bad way, but what is it for everyone? It's full of noise and noise, and the interface cannot be customized.) Remember, this is just an article! What about books? I hope that the books I have read can be recorded. I hope that I can record my book list for learning something and share it with many others, of course, this aspect can be completed by Douban. It is not perfect, but it is enough to make me like it. There are pictures and videos, including the music mentioned above. How can I manage these heavy information? Suppose I leave my computer for a while and then come back, do I still remember where I saved my previous information? So I want to create a website. I have been thinking about it for a short time.

Figure 2: initial Homepage

Figure 3: many other blue

In fact, I want to create a site with a whim.

I visited the iPad a week ago. I opened a previously downloaded HTML book and found it quite simple. Then I went to the library to visit it, I also read several HTML books and found that they are really good. The advanced interfaces seem to be more friendly than C/C ++, A lot of features can be customized through several tags, just like shopping, without money! So I started to think about my website and started to read some books.

Figure 4: remove some blue

Figure 5: Why is blue required?

Design Conception and Requirement Analysis

I have two main positioning features for my site: first, I can manage and publish my information on creation and collection, and second, I can provide a platform other than the operating system for my other applications (why is this platform important? Because it is simple and cross-platform ).

First, let's talk about the interface style. The design of the interface must combine aesthetic concepts with detailed functions of the site, and be simple as described above. What is the concept? I think it is simple, perfect, and extraordinary. Or, let alone too much, it is simple. Simple is not a black or empty text, it is not a simple in my heart, what is simple in my heart, not a sentence or two can be clearly said, or even I can not understand. However, simplicity is much more difficult than complexity. It can be understood as follows: simple means to try or complete all possible complexities and then simply hide and package the complicated things. Apple's products under the leadership of Steve Jobs seem easier to use, but they are actually complicated. For example, Safari on iPad is very easy to use, no matter what site, the iPad layout is always well adapted, and the reading mode looks more comfortable, but it is not easy until you start designing the site, you will find that the adaptation of those la S requires a strong self-active typographical function, and the reading mode is even more outstanding, even though you have followed up in aoyou 3, however, compared with safari in the iPad, it is simply unusable (slow, ugly, and unavailable to many sites ). Therefore, I believe that simplicity is complicated to the extreme.

Figure 6: good enough

Figure 7: Final Homepage

In addition, there are many functions, but the most important thing is the two positioning points mentioned above: managing and publishing the information I created and collected, and providing a platform for other applications I have made. The following provides a brief design of functional requirements (detailed design is not listed in this article ):

Article information management: flexible classification. The push information is displayed on the home page, instead of all articles. Information is displayed in each part. The importance of information is differentiated. Different importance levels have different display styles, in addition, it can control the display of articles of different importance. Tag management can be recommended. When there is a lot of information, it allows the hacker to see what he needs without thinking. permission management, the home page and article have multi-level permissions: public, specific list, and specific group (for example, a home page for a partner, a home page for a friend, and a home page for a family member; the article section is similar), encryption, non-disclosure; intelligent information extraction, content search using natural language; blabhblah ..

Music information management: this is to use the site as an application platform, as a smart player, as a software that can manage your own music memories, adaptive to the likes and dislikes, new tricks, you can use the collective wisdom to recommend music and actively play the music you want to listen ..

Image Information Management: there is still a long way to upload all the images. After all, it is too big to upload and mark some important images. this is the shot of different stages of life; supports photo upload on smart mobile devices. Of course, permission management is indispensable ..

Video Information Management: similar to image information management; blahblah ..

Recommendation information management: there is a lot of overlap between the recommendation information and the content mentioned above. There are also some interesting sites that do not want to be handed in. There is no good idea about how to deal with it temporarily; blahblah ..

(Well, it takes too much time to write out all your thoughts. Let's do it first. There are so many features that haven't caught up with the opportunity. Now the market has been divided, otherwise, you can use your spare time to create a nice SNS. Now you can make a personal site)

System Analysis and Design

The system analysis design is to convert the results of the requirement analysis into modules, classes, pages, and so on. Of course, a template is required for versatility. The implementation of the template is to use an external CSS layout, and use the PHP require external PHP page to make some relatively fixed sections on the page, such as header and footer. For the sake of security, I will not disclose the detailed design of the website here. In terms of the framework, each functional section has its own sub-folder and the related pages are placed below (for example, login, notice, and other management functions of the page are placed in its separate sub-folder, the template-related page in the template folder ).

Figure 9: Partition Panel

In terms of database design, in line with the principles of the relational database design, we also need to fully consider the scalability of its added functions. For example, there can be a lot of sections in the article, and now we only consider a part of them, it has not been integrated with the recommended section. If we have fixed the classification of the article, we will not be able to integrate it with the recommendation in a way that we can't even think of today. On the contrary, suppose that the classification is open (now we first set the first classification attribute, and then we can set the next classification or make the classification into text-like values, and then set the priority based on different classifications, dynamically deduce and load the document from the database ). Currently, version 0.1 contains three tables: User table, article table, and comment table. The attribute values are as follows:

User table: ID, password, authority, time_of_register, tiem_of_last_login, email

Article table: ID, title, keywordlist, contents, comment_count, time_of_creation, time_of_last_visit, time_of_last_edit, visit_count, classify, authority, and status (used to record deleted, draft or)

Comment table: ID, belongto, time, title, content, status

Figure 10: Input Panel

Site Design Learning Method

It took less than a week to learn HTML, CSS, javascrip, PHP, MySQL, although not proficient or even mastered, it is not a proper word (used to describe JavaScript and PHP), but you can make a prototype of a dynamic site and have some experiences.

Let's first introduce the big framework of the site design problem: the site is a typical client and server mode, one is the server's background processing, and the other is the client's frontend processing. The front-end (that is, the user's browser) is actually a compiling and running environment, and the code sent from the backend (that is, the PHP, Apache, MySQL, and other environments on the server) after processing is compiled and run. Therefore, if we make a rough classification, we can see that the front-end languages include HTML, CSS, and Javascript. These are the code that runs on the user's browser. They are interpreted languages, in general, the execution sequence is javascrip first, and then HTML and CSS. Javascript may be used to dynamically respond to some events during interaction with users; the backend languages include PHP, Python, and Ruby. I am not familiar with the latter two. For PHP, it dynamically generates HTML + CSS + JavaScript code after processing on the server end and transmits it to the front end, therefore, different contents can be displayed based on different situations. For more information, see http://sixrevisions.com/web-policy/web-policages-decoded /. On the backend, you also need Apache and other server programs to capture client requests and respond to client requests. You also need the MySQL database to store information and run search. To build a server on a common computer, you can download wampserver + WordPress in Windows to build a personal blog. in Linux, you can use lamp + Wordpress to build a personal blog, for detailed operations, use the keywords mentioned above to search.

Figure 11: Image partitioning

The following describes the focus of various language learning in sequence (I used a few basic exam book http://book.douban.com/doulist/1402936/ a week ):

HTML: The structure, common styles, and tags of HTML.

CSS: Position, margin, and inheritance are important concepts.

Javascript: a dynamic layout that responds to user actions. The main concepts include functions, objects (custom objects and built-in objects), events, CSS control, cookies, and Ajax.

PHP: dynamically processed, including database operations, functions, object-oriented, data flows (data transmission between pages), cookies, and sessions.

MySQL: mainly refers to the concepts of databases, such as databases, tables, attributes, and relationships, as well as SQL query languages, including creation, insertion, query, update, and deletion. In addition, mySQL is used to manage user information through its own MySQL database. Therefore, management operations are actually database operations.

Other exam links:

Http://www.w3school.com.cn/index.html (good site, as the web design front-end entrance exam is particularly good, so that it can be better than the limit of the syntax)

Http://www.php.net/docs.php (official website, there are very good manual documents)

I keep thinking that there are thousands of programming languages in the world, some of them overlap and others are independent (for example, C/C ++ many others are used for underlying development and desktop application development, while many others are used for enterprise, network, and mobile terminals, HTML, CSS, and JavaScript are used for front-end, and PHP, Python, and Ruby are used for back-end. For independent parts, we can easily select (for example, write the front-end of the site, how many people are willing to use C instead of HTML ?), It is often difficult to choose overlapping parts (for example, using PHP, Python, or Ruby for the back-end of the site ?), No matter how you choose, a programmer cannot only speak one language, nor can he just speak the past time. He must constantly update his language knowledge, it is not like the popular words on the Internet (for example, Mu you and Shenma are full of clouds) that follow up. In the face of so many languages and so rapid updates, how can a programmer follow up in that language? Don't tell me what the language is changing, but the algorithm and data structure will not change. This is a one-sided and superficial view. First, the algorithm and data structure are also changing, only what many developers often use may be more fixed than the limit. Second, it is more important to simply rely on algorithms and data structures. You can tell people in natural language that, people may do it, but how do you tell the machine that the machine has its own language and its own mechanism? This is not the case. You can solve it by looking at it, even for people, the results of "what you do" vary from person to person, not always based on your algorithms. Language changes very fast. In the past thirty years, you have to know what the language is, except for syntax, it is the mechanism of the language itself, the mechanism of the operating platform, and the mechanism of Mathematics (that is, the so-called data structure and algorithm ). The syntax will be more and more intelligent, and there is nothing to consider. Select the editor and compiler, and you will be right when you write more and write more; language Mechanism (for example, C pointer, C ++'s extremely complex heap mechanism, Java garbage collection, and all object-oriented language object-oriented mechanisms) it is not a small problem. In terms of language learning, this learning should be one of the most important tasks and the biggest part of the differences between languages. In addition, it is a platform (for example, microcomputer is a platform, smart phone is a platform, embedded devices are platforms, different operating systems are also platforms, different frameworks are also platforms) mechanism, the platform mechanism is reflected not only through APIS (input and output), but also by more complicated things, such as process, thread synchronization, and network protocols, these things are extremely important, but they are very universal. The changes between languages are often only reflected in the API (for example, coding in windows, c ++ and C # may have slightly different detailed processing for process synchronization, but they are based on the same principle). Finally, there is a mathematical mechanism, so there is nothing to say about it, stability is like a mountain, although it also changes over time. Therefore, to sum up different languages, the stability of their components is as follows: syntax <Language Mechanism <platform mechanism <mathematical mechanism. We have learned the platform mechanism and mathematical mechanism. In fact, switching between different languages only involves switching between the syntax and language mechanism. This takes time, but in general, it is different from learning a new language completely (for example, when learning a mother tongue, you actually learn not only the language itself, but also the detailed meaning behind the language, this is probably what you did before primary school. However, when your mother tongue learns almost the same thing, you can learn a foreign language, that is, it is mainly used to learn vocabulary, grammar, and other things of the language itself. You basically don't have To clarify "What Is Mom" and "why is earth round ). Therefore, programmers should not despair, do not think that there are so many terrible languages, do not blindly learn a variety of languages, blindly so-called "proficient" a language, do not think that those theories are useless, I think "operating systems are concepts" or something. The process of learning can be discussed, who is the first, but the results are the same. Qualified programmers must pass through the four layers mentioned above, in particular, the platform mechanism (the largest platform is the electronic computer, so the most basic platform mechanism is the computer's execution principle) and the mathematical mechanism, syntax mechanisms and language mechanisms are relatively easier than just a few. However, a good programmer must be proficient in some languages, they can be used to express themselves beautifully.

Figure 12: About

Postscript:

This article contains 5000 or 6000 words in three hours, which is not well written! But there is always better than not, because in the future we assume that we forget to be able to take it out and pick it up again. I expect the site of the 0.1 version will be upgraded during the winter vacation and announced that it will be ready for use in the next semester and will not be available again.

(Thanks to the loose environment and rich books of the school library, I want to do my own work on the second floor. I need to borrow books on the first floor. It is a wonderful time to go back and forth between the two floors. The final statement is that this article is not purely teaching, but a summary post, and hopes to help readers. The Design and Implementation of a good site is not a specific time can be described, the site is not the best quality, but people have only limited energy, a week to learn to what extent varies from person to person, in the past three years or five years, the degree to which they are achieved varies from person to person. This is not the most important thing. The most important thing is to do what you really like and try to do it well)

(Ps, site: http://chentingpc.me)

One-week self-learning Dynamic Site Design