A few words about encodings
Anyone who knows everything about this can skip this article, but I will tell the rest about the causes of various encodings and the problems of web design associated with…

Continue reading →

Fighters of the invisible front
If you haven’t guessed yet, then I mean META tags. Their role is not noticeable when displaying the page. These are just commands for a web server or browser, but…

Continue reading →

What are longreads on sites
The so-called longreads are one of the leading web design trends in 2015, and also, as expected, in 2016. With the help of long reads, sites today do not just…

Continue reading →

Why do we need SSI?

A! So you don’t even know what it is? And, moreover, do not understand why you need it? Well, then you have come where you need to. Today they explain to everyone here why they need SSI 🙂

Like all normal people, first we decipher the abbreviation SSI – Server Side Includes or, in Russian, – server-side inclusion. Clear? Not? Well, then I’ll tell you more:

SSIs are directives that are inserted directly into the HTML code and serve to transmit instructions to the Web server. Meeting such directives, which, by the way, are called SSI inserts, the Web server interprets them and performs the corresponding actions. Which, you ask? And here, for example: inserting an HTML fragment from another file, dynamically creating pages depending on some variables (for example, a browser type) and other no less pleasant things.

The advantages of SSI are manifested when we need to maintain a sufficiently large site that has a certain structure and repeating code elements on all pages. In general, when using server inclusions, it is convenient to consider a site as consisting of separate blocks, each of which is responsible for its part of the page. These blocks are virtually unchanged and repeat from page to page. In these blocks you can place such page elements as: the main menu, advertising inserts, repeating page design elements, etc. Physically, these blocks are simply HTML files containing part of the code needed to complete their task.

In order for the server to know that the page is not ordinary, but contains SSI directives, it has a special extension: * .shtml or * .shtm, the presence of which forces the web server to pre-process the pages. Actually, the extension can be any – depending on the configuration of the web server, but * .shtml is mainly used.

The full page is generated by the web server on the fly, collecting the page code from such blocks. In order to indicate to the server which block to insert and in which place of the page, a special entry form is used in the form of a comment. Here is one:

<! – # command param = “value” ->
where # is the sign of the beginning of the SSI insert;
command – SSI command;
param – parameters of the SSI command.
SSI-teams, there are about a dozen, but I will tell only about the most used. The most popular command is the command to include the contents of one file in another:

<! – # include virtual = “/ path / file.ssi” ->
where include is the insert command;
virtual – a parameter that defines how to interpret the path as absolute (file)
or as relative (virtual);
“/path/file.ssi” – path to the included file.
The result of its implementation will be the insertion of the contents of the file.ssi file at the location of this directive. When viewing the generated source of the HTML file, we will not see any signs of SSI, because This mechanism works absolutely transparently for browsers; they receive exceptionally correct HTML code.

The following command is the command to set the value of a variable:

<! – # set var = “pic” value = “picture.gif” ->
where var is the command to set the variable value;
pic – variable name;
picture.gif is the value of the variable.
In this case, we defined a variable called pic and assigned it the string value “picture.gif”. The pic variable value is now available inside the SSI insert, and we can use it at our discretion. For example, using the same SSI insert, but with different values ​​for the variable defined in it, we will get different results. Before showing a real example of using variables in SSI inclusions, I will talk about some of the commands used when working with variables. The first is the command to print the value of a variable:

<! – # echo var = “pic” ->
Its execution will lead to the fact that at the place the command appears, the value of the pic variable is printed, i.e. “picture.gif”.

A variable can participate in expressions, in this case a ‘$’ sign is placed before it, indicating that it is a variable, and not just text. Here is an example:

<! – # set var = “A” value = “123” ->
<! – # set var = “B” value = “$ A456” ->
After this assignment, variable B will contain the string “123456”. If you just need to insert the ‘$’ sign or any of the other special characters in the text, then you need to precede it with a slash, like this: ‘\ $’. In some cases, to avoid ambiguity, the value of a variable can be enclosed in braces: “$ {A}”.

A more complex use of variables is possible using conditional statements that have the following form of writing:

<! – # if expr = “condition” ->
<! – # elif expr = “condition” ->
<! – # else ->
<! – # endif ->
where condition is the condition for comparison.
Depending on the results of the verification, we can substitute one or another piece of code. Suppose we can analyze the type of user browser and, depending on this, issue either code for Netscape Navigator or Internet Explorer. This can be useful in some cases when it is impossible to create a page that would correctly display in both browsers.

How to create a color palette for sites or web interfaces
In Design Mania, there have already been several publications with similar topics: in a note about color matching services for websites, in addition to inspiration resources, we examined a couple…


Computer hardware configuration
What is described below suggests that you want to make a beautiful and stylish website completely do-it-yourself, i.e. you draw all the graphic elements yourself, write the pages yourself, scan…


Interactivity! What? And How?
Initially, there was a network, then e-mail appeared, and people began to correspond. They wanted to tell about themselves, share information - the World Wide Web (WWW) appeared. But static…


What is a stylish website?
A stylish website is when every page of your publication has a pronounced affiliation to the entire website. When it is easy to navigate and the search for information is…