One week self-study dynamic site design

(Site: http://chentingpc.me)

The framework of this site and the implementation of the 0.1 version number have taken a total of six days and nearly fifty or sixty hours. In fact, the time spent on demand analysis, page and system design took nearly four days, and the real dynamic features only cost two days to complete. Of course, this includes the language and tools (HTML, CSS, Javascript, PHP, Mysql) to learn about the design and implementation of the site from scratch, in addition to the previous experience of building sites with WordPress and discuz frameworks, I have HTML, CSS , Javascript, PHP, MySQL programming is basically ignorant. This article will document my design concept, site design methodology, and learning experience. The full text is divided into four parts: source, design conception and requirement analysis, system analysis and design, site design learning method.

Figure 1: Finally the homepage

Source

I want to do the site is a long-time premeditated.

A long time ago, I was doing a smart player, the so-called very long time, that is, a year before. And I also made its stand-alone version number, this version number looks very rough, is the national day last year 10 days after learning C + + to do a thing, but the windows of the following programming is easy, not to mention that when the learning of the C + +, the operating system, Network even the data structure of what has not yet learned, so always heart miss think, want to put this player (also because has not encountered an ideal player, so far in this can take the initiative to manage their own songs, their own active play you want to listen to music player).

The most important thing for this player to improve is the algorithm, the network and the interface, the algorithm needs to be more intelligent, the network can be interoperable so that the use of collective intelligence, the interface needs to be more beautiful. However, it is difficult to take the time to do this thing in Windows, because it is very difficult to go further very much (I have tried, but in a very short period of time the new design is not as good as the original version). The matter was stranded.

Until recently, I started to discover that CSDN's blogging system was awful. I can only publish technical articles on that, because that is the technical site, and in order to announce some of my other thinking, I have to open a Sina blog (Weibo), and other important privacy, I can only remember on their own laptop, this is only the article, I wrote the article! Also I collect some important or unimportant articles, information, I can now do is awkward to reprint to my blog, or put in my collection, once more on the mess I do not know what, messy piling up there, the only management is classified, and then a little more is the key words of the weak label. This is not much, the article is a different classification, I do not want to send all the articles to the homepage (I would like to collect a technical detail, a complaint with one of the important articles I wrote to the same location on the homepage, it is not very strange), I do not want to let all the people see all my articles, I want to give them permission, but I can't do it (the person seems to be able to do it?) Yes, it can be crappy to do, but everyone is a place, full of all kinds of noise and noise, the interface is not really self-customization, remember, this is just an article! Books, I hope I have read a good book can be recorded, I hope to be able to learn something from the book list, can share to many other people, of course, this can rely on the watercress to complete, it is not perfect, but enough to let me like. There are pictures, videos, including the above-mentioned music, these heavy information I how to manage, assuming a period of time I left the computer, and then come back, I will remember my previous information is saved where? So I want to do a site, I have thought for a short period of time.

Figure 2: The first homepage

Figure 3: A lot of other blue

In fact, I want to do the site is a whim.

Because a week ago on the ipad, casually opened a copy of the previous download of the HTML book to see, it is quite simple, I have some heart, and then went to the library blind stroll, also read a few HTML books, found really good, those high-level interface can do things look more cordial than C + +, Very versatile directly through a few tags can be customized, like shopping, no money! So I began to try to conceive of my site, borrowed a few books began to read.

Figure 4: Remove some blue

Figure 5: Why do I need blue?

Design conception and Demand analysis

I have two main positioning for the site function: first, can manage and publish my creation and collect information, second, can provide my other application an operating system outside the platform (why is this platform important?) Because it's simple and cross-platform).

First of all, the interface style, interface design must be combined with the aesthetic concept of the site's detailed functions, and to do the above said simple. What is the idea, I think: simple, perfect, extraordinary. Or, don't say too much, it's simple. Simple is not in black and white, no picture no frame, that is not my heart simple, my heart of the simple is what, not one or two words can be said clearly, and even I do not understand. But it is more difficult to be simple than to be complex; it is easy to understand simple: simple is to put all possible complex to try or complete after the complexity of the simplification of processing and packaging hidden after the things. The products Apple made under Steve Jobs, whether seemingly or in use, seem simpler, but actually complex, like Safari on the ipad, which is very easy to use, no matter what the site, always adapts well on the ipad's canvas, And the more reading mode looks very comfortable, but until you start to design the site only to find it is not easy, you will find that the layout of those who need to be very strong self-active typesetting function, and reading mode is outstanding, although in the Proud Tour 3 also follow-up, But it's not as bad as safari in the ipad (slow, unsightly, and unusable for very many sites). So, suppose someone says that simplicity is complex to the extreme, I believe.

Figure 6: Good enough?

Figure 7: Finally the homepage

Again the function, the function is more, but the most important is said above two position: manages and publishes my creation and collects the information, provides the platform for other application which I do. The following is a summary of the functional requirements (detailed design is not listed in this article):

Article Information management: Flexible classification, home page display push information instead of all articles, each tile display related information, the importance of information is differentiated, different important degree of display style is different, and also can control the display of different important degree of the article; tag management, can be recommended, when the information is many, Allows visitors to see what he needs without thinking; Rights management, home page, Articles with multilevel permissions: Public, specific lists, specific groups (such as to work on a home page, a friend a home page, a home page to the family, article section similar), encryption, non-public, intelligent information extraction, Search for content in natural language; Blahblah.

Music Information Management: This is to put the site as an application platform to use, do a smart player, do a can manage their own music memory software, to the likes and dislikes, new greasy have self-adaptation, you can use collective wisdom to recommend music, their own initiative to play the music you want to listen to; Blahblah.

Picture information management: All pictures upload a bit far, after all, it is too big, put some important pictures upload and mark, this is the lens of different stages of life; Support Intelligent mobile Terminal photo upload; Of course, the Authority management; Blahblah.

Video information management: Similar to image information management; Blahblah.

Recommended information management: the recommended information and the above said things have a very big intersection of places, and others do not want to hand over the place, such as some interesting sites, how to deal with temporary no very good idea; Blahblah.

(Alas, to the hearts of the ideas are well written out too time-consuming, first of all, but the function is really much, did not catch up with the good timing, now the market has been divided, or else can also use spare time to make a nice SNS, now or do a personal site it)

System Analysis and Design

The analysis and design of the system is to transform the results of demand analysis into modules, classes, pages, etc. Of course, in order to universality, need to do template, template implementation is to use the external CSS layout, PHP require external PHP page to do some relatively fixed section of the page, such as Header,footer. For security reasons, I do not disclose the detailed design of the site, from the framework, each of the different functional sections have their own sub-folder, the relevant pages are placed in the following (for example, login, register and other management functions of the page is placed in its own sub-folder, Place template-related pages in the Templates folder).

Figure 9: Partition panel

In database design, in line with the principle of relational database design, but also need to fully consider the expansion of the function, for example, the article can have a lot of sections, now only consider a part, and the recommended section has not been integrated, assuming that the classification of the article is dead, In the future, there is no way to integrate with the recommendation in some of today's even unexpected ways, instead, assume that the classification is open (now set the first classification attribute, can be set sub-classification later or the classification into a text-like value, and then based on the priority of different classifications, in the database when the article is dynamically inferred and then loaded). For now, the 0.1 version number contains the user table, the article table, the Comment table three tables, and its attribute values such as the following:

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, status (used to record deleted, draft, or active, etc.)

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

Figure 10: Input Panel

Site Design Learning Methods

In less than a week of time, learning HTML, CSS, Javascrip, PHP, Mysql, although not proficient or even mastered is not a suitable word (to describe the description of JavaScript and PHP), but can already make a dynamic site of the embryonic, There is still some experience.

First to introduce the site design of the large framework of the problem: the site is a typical client, server-side mode, part of the service side of the background processing, part of the client's foreground processing. The front end (that is, the user's browser) is actually a compilation run environment, the backend (that is, the server PHP, APACHE, MySQL and other environments) after processing the code to compile and run. So, assuming a rough classification, it can be seen that the front-end language has HTML, CSS, Javascript, these are running on the user's browser code, they are interpreted language, the general run order is Javascrip run first, and then run HTML and CSS, In the process of interacting with the user, it is possible to use JavaScript to dynamically respond to some of the events; the backend language is PHP, Python, Ruby, and so on, for the latter two I am not familiar with, PHP, it in the server after processing the dynamic generation of html+css+ JavaScript code is passed to the front end, so you can display different content depending on the situation. Detailed and detailed classification of this link: http://sixrevisions.com/web-technology/web-languages-decoded/. In the backend, the service-side programs such as Apache are required to capture client requests, as well as to respond to client requests, and the MySQL database is required to store information and run lookups. To build a server on a regular computer, you can download wampserver+wordpress to build a personal blog under Windows, and you can use lamp+wordpress to build a personal blog under Linux. Detailed operation can use the above mentioned keyword search for a bit.

Figure 11: Picture Partitioning

Here's a look at the main points of language learning (a list of some basic reference books I used in a week http://book.douban.com/doulist/1402936/):

The structure of html:html, common styles and labels.

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

Javascript: Dynamic layout, in response to user actions, the main concepts include functions, objects (self-defined objects and built-in objects), events, CSS control, cookies, Ajax, and so on.

PHP: Dynamic processing, including the operation of the database, functions, object-oriented, data flow (data transfer between pages), cookies and session, and so on.

MySQL: The main fact is the database of those concepts, such as databases, tables, attributes, relationships, and SQL query language, including create, insert, query, UPDATE, delete, etc. in addition, MySQL is used to manage user information through its own MySQL database, Therefore, the management operation is actually a database operation.

Other links to the references:

Http://www.w3school.com.cn/index.html (very good site, as a web design front-end reference particularly good, so that can be better than the grammar limit)

http://www.php.net/docs.php (official website, there is a very good manual document)

  I've been thinking that there are thousands of programming languages in the world, some of them are overlapping and some are independent (such as many others for low-level development and desktop application development, Java Many other for enterprise, network, mobile terminal, HTML, CSS, JavaScript for the front end, PHP, Python, Ruby for the backend), for the independent part, we easy to choose (for example, write the front end of the site, how many people will be willing to use C instead of HTML to write?) It is often difficult to choose between overlapping parts (for example, the backend of a site, with PHP, Python, or Ruby?). ), no matter how the choice, a program ape can not just a language, and can not only language of the past time, he needs to constantly update his language knowledge, and not like the popular words on the internet (such as Muyou, God horse are clouds) kind of follow-up, face so many languages and so rapid update, How can a program ape do that language follow-up? Don't tell me what "language is changing, but the algorithm and data structure will not change", this is a one-sided and superficial view, first of all, the algorithm and data structure is also changing, just a lot of developers often use the more fixed, second, but also more important, only by the algorithm and data structure now nothing can be done, You use natural language to tell people, people may do, but how do you tell the machine, the machine has its own language, and its own mechanism, not a "so, you look at it" can solve, even for people, "you look at the results of" the result is not always according to your algorithm to run. The language is changing very fast, 30 years Hedong 30 years Hexi, but you need to know what language is: In addition to grammar, it is the mechanism of the language itself, the mechanism of the operating platform and mathematical mechanisms (such as the so-called data structures and algorithms, etc.). Grammar anyway is those and will become more and more intelligent, there is nothing to consider, choose the editor, compiler, look at writing more writing on the right; the mechanisms of language itself (such as pointers to C, a particularly complex heap of C + +, garbage collection in Java, and object-oriented mechanisms for all object-oriented languages) are a big problem. In the learning language this aspect of learning should be one of the most important tasks, and is also the largest part of the difference between the language, and the platform (for example, the computer is the platform, the smart phone is the platform, the embedded device is the platform, different operating systems are platforms, different frameworks are platforms) mechanism, The mechanism of the platform is not only reflected through the API (input and output), but also some more complex things, such as the process, thread synchronization and other things, such as network protocols, these things are extremely important, but with very large versatility, The change in language and language is often just on the API today (for example, tapping code in Windows, C + + and C # may be slightly different for process synchronization, but based on the same principle);It's a mathematical mechanism, it's nothing to say, it's stable like a mountain, although it's changing over time. So, for different languages, the degree of stability of their constituent components is this: grammar < language mechanism < platform mechanism < mathematical mechanism. The platform mechanism and mathematical mechanism to learn, in fact, the switch between the different languages is just a switch between grammar and language mechanism, this takes time, but in general, and completely learn a new language is different (for a not so appropriate example, when learning the mother tongue, you actually not only learn the language itself, Also learn the details behind the meaning of the language, this is probably the main thing you did before the primary school, but, the mother tongue almost the same time, learning foreign language, that is mainly in the vocabulary and grammar of the language itself, you basically do not need to make clear "what Mother is", "Why the Earth is round". Therefore, the program ape do not despair, do not feel the language so much terrible, do not blindly learn all kinds of language, to blindly so-called "proficient" a language, not to say that the theory is useless, think "operating system are concepts" or something. The process of learning can be explored, who first who after, but the result is the same, qualified program ape must be in the above said four levels are passable, especially the platform mechanism (the largest platform is the computer, so, the most basic platform mechanism is the principle of the implementation of computers) and mathematical mechanisms, Grammatical mechanism and language mechanism is temporary cramming relatively easy, but a good program ape, also must be proficient in some languages, can use them to express themselves gracefully.

Figure 12:about

Postscript:

This article three hours five thousand or six thousand words, write bad! But there is always better than not, because later assumed which day forgot to take out to see, again picked up. This 0.1 version of the site I expected to strengthen the winter vacation and then announced that the next semester to put into use, it is expected to have no time to play it.

(Thanks to the school library's relaxed environment and rich books, on the second floor to do their own things, need to book on the first floor to borrow, the two layers between the back and forth is memorable, this time is very wonderful.) Finally, this article is not purely teaching, but a summary of the posts, but also hope that the reader has some help. Design and implementation of a good site is not a time to describe the description of the site is not the best, but only a limited amount of energy, a week to learn what degree of individual, three years five years to achieve what degree is different from person to person, this is not the most important, 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-study dynamic site design