As simple as possible about the types of technologies for creating websites
In order for any site, including the resource of our web studio, to be displayed on the screens of computers and mobile phones connected to the Internet all over the world, 3 main components are needed:
Appearance.
A website starts with a visual. First, the design is created in a graphic editor (the most popular is Photoshop, although others can be used). Then the finished design (in fact, a picture of the future site) is reformatted into an HTML page. HTML (or HyperText Markup Language) is the markup language for documents on the Internet.
That is, the picture turns into a document that is maximally adapted for the network. At the moment (mid-2021), sites are being created in HTML 5 (no matter how difficult it is to guess, this is already the 5th version of the language for creating web projects). Everything related to the appearance of sites is also called front-end (front-end).
Functional.
It’s all about how the site works. For example, the functionality is responsible for sending orders through the feedback form or for registering in your personal account. The vast majority of modern sites work in the PHP programming language (Hypertext Preprocessor).
The most up-to-date version of the language at the time of this writing is 8.0.6. The part of the site that is responsible for the functionality is called the back-end (back-end).
Hosting.
This is a specially created place for storing and operating the site. Theoretically, the site can be run from your home computer. But, firstly, it is not so easy to set up a stable operation of a web resource without special skills, and secondly, it is not always possible not to turn off the computer around the clock. After all, the site should be on the Internet literally always.
Modern hosting has many parameters that you need to focus on when choosing the right place to host your site. We will talk about some of them below.With some stretch, a modern site can be compared to a car.
Front-end is the design of the car, the color, the shape of the bumper and headlights, and even the mirrors and door handles. This car has wheels but no engine. In principle, if you push such a car down a hill, it will go for some time.
You can also drag it with the help of horses. The same is true of a site created in pure HTML. Previously, there were only such (as before nothing went without a horse), but in the modern world, horse-drawn transport is as outdated as possible.
Back-end is the engine and other “stuffing” of the car. As in the car market, so in the web development market, someone buys “stylish and red”, and for someone it is more important what is “under the hood”.
An ideal option when looking at both the appearance and the “stuffing” responsible for stable operation. Unfortunately, most often a car is bought, and a website is ordered based solely on the design.
What can hosting be compared to? I think it’s a stretch to say that hosting is like road infrastructure. This includes not only asphalt coverage, but also the presence of gas stations and police posts.
It seems like not the most important detail, but if the car is in a hole or a swamp, it will not go anywhere. You can admire its design and even start and listen to a soft rumbling, but the car still does not perform the main function. A properly equipped road allows the car to move and perform its function.
Note that roads and gas stations are different. It’s the same with hosting. Everywhere seems to be high-quality gasoline, but after some gas stations the engine runs unevenly, and then filters need to be changed.
Bad hosting can significantly affect the loading speed and security of the site. Some features of your site on the wrong hosting will not work at all.
A little more about the front-end and the technologies that it includes
We have already said that the basis of the appearance of a modern site is HTML 5.
Theoretically, for your online store or blog to display correctly and look beautiful, one HTML is enough.
In practice, almost always when working on the appearance of the site, additional technologies are used, such as:
- CSS (Cascading Style Sheets) is a language for describing the appearance of a document created in the HTML markup language.
- JavaScript is a scripting language for making web pages interactive.
- It is believed that the latest version of CSS is CSS 4 (it supplements CSS 3 modules with new modules and values). CSS simplifies and extends working with HTML. You can paint the car with a brush and, in principle, if you do it for a very long time and carefully, it will look good, or you can use a special painting and drying chamber.
JavaScript is like the LED lights on the mirrors (turn signals) of a car. It seems to be related to appearance, but it seems like a special mechanism is needed to make it work. On the other hand, the most beautiful light bulbs will not make the car move.
JavaScript is used for both fairly simple functions (like creating a drop-down menu on our website: try hovering over the Services section now to see what we’re talking about) and quite complex effects.
Tools for creating a site that are included in the back-end
According to a W3Techs report, 79.2% of all websites are powered by php.
PHP is responsible not only for what the user of the site does (for example, scrolling through the pages of a blog), but also for the actions of the site administrator.
That is, if we want, for example, to add an article to a blog or a new product to an online store, we also use a code written in PHP.
A good way to illustrate the power of PHP or another language that the site engine runs in is the various sorts.
We need a mechanism that will calculate all prices, compare them with each other and then display them from the database in the order the user needs. This is the mechanism website developers create using PHP.
Other programming languages that are used in website building:
- Python
- Ruby
- Perl
- Java
A few words about CMS – affordable website builders
No car manufacturer creates new products entirely from scratch. Mitsubishi, among other things, does not need to invent its own battery and tires. After all, there have been excellent Bosch batteries and reliable Goodyear tires for a long time.
A car from scratch is either a village monster, converted from an old moped and a garden wheelbarrow, or an exclusive product for a very decent amount.
The situation is similar with websites.
An experienced smart developer is able to create a web project without using other people’s templates. He will use only “pure” technologies, which we talked about above, and develop a unique site that best suits the client’s needs.
Although in practice, unfortunately, “village monsters” are often created from scratch. It seems to work, but it is enough to sneeze to make everything fall apart.
A more common option is when sites are already made on ready-made designers or CMS (Content Management System).
CMS is the most efficient and simple technology to create a website in 2021.
The constructor already has built-in features of the latest (well, or penultimate) versions of PHP, CSS, HTML and JavaScript.
When you make a website from scratch, you build a house one brick at a time; when you use a CMS for development, you kind of put it together from large concrete blocks.
A huge plus of CMS is that usually there are built-in features not only for creating, but also for maintaining sites.
Modern technologies for creating websites:
- Design
- Layout or reformatting the design into HTML markup
- Programming or creating site functionality using PHP or a less common language
- Hosting for the smooth operation of the site
What is HTML5?
HTML5 – the price of a new specification of movie layout, which wins in the creation of web pages. In front of the previous version, it’s not just a movie specification for hypertext layout, but a set of various modules – from HTML elements to SVG video, audio, vector graphics, Canvas raster JavaScript graphics, browser local databases and browser APIs.
The entire list of modules allows HTML5 to successfully compete with Flash and Silverlight technologies.
Moreover, successful competition from Flash is possible because HTML5 is potentially less likely to overwhelm the computer’s processor, lower Flash, does not require installation of plugins and updates, and therefore, less conflict for hacker attacks.
In fact, the appearance of new <video> and <audio> tags in HTML5 will become a potential competitor to the mainstream technologies like Adobe and Microsoft.
Creating a web project based solely on “pure” technologies is a great impulse, although in 99% of cases it is unnecessary. It is much more rational to use ready-made constructors, where technologies are assembled into convenient simple modules and one task can be completed with just one action, and not several dozen when it comes to creating a site from scratch as much as possible.
New layout
HTML 5 to introduce some new elements and attributes. Some of them are technically equivalents to <div> and <span>, but still have their own semantically meaning, for example <nav> (navigation bar) and <footer>.
Qi tags will make it easier for the search robot, as well as processing the site from the Korman personal computer or reading the program. Other elements provide new functionality, such as <audio> and <video>.
Deprecated HTML 4 elements, such as <font> and <center>, were deprecated in HTML 5.
New API
The cream of the designation of the markup, in HTML 5, the application programming interface, API are designated. Extensive DOM (Document Object Model) interfaces have been expanded, and new APIs have been added:
• Drawing 2D pictures in real time;
• Control over the creation of media files, which can be featured, for example, to synchronize subtitles with videos;
• Saving data from the browser;
• Editing;
• Drag-and-drop;
• Robot with a fence.
Error handling
HTML 5-compliant browsers are very flexible in error handling, unlike XHTML. HTML 5 is designed so that browsers that do not support it can safely ignore HTML 5 elements. Unlike the fourth, the fifth version clearly prescribes the rules of lexical parsing, so that different browsers display the same result in case of incorrect syntax.
Canvas (English Canvas – “canvas”) – an HTML5 element designed to create a two-dimensional raster image using scripts, usually in the JavaScript language. The start of the block count is on the top left. Every element of the block is built from it. It is used, as a rule, to reproduce graphics for articles and the playing field in some browser games. But it can also be used to embed a video into a page and create a full-fledged player. Used in WebGL for hardware acceleration of 3D graphics.
Website development using software (Dreamweaver, FrontPage)
There are many ready-made solutions for faster and more convenient website development. They provide an opportunity to generate html code, develop a site in visual mode and have many other features.
Let’s highlight several tool systems for HTML development:
• programs that include visual editors (design-based editor) – tools that automatically generate the necessary HTML code, allowing you to develop Web pages in WYSIWYG mode;
• editor programs (code-based editors), which provide an editor and auxiliary tools for automating the writing of code.
Let’s consider the most popular design-based editors:
• Adobe DreamWeaver is one of the best visual editors that generate HTML code. It allows you to work in several modes at the same time, with HTML code or in visual mode. But the main drawback is that the program generates too “heavy” code, adding a lot of extraneous things. But if you are familiar with HTML, then the HTML text can be edited. This software system was produced until 2005 by Macromedia, after which it was acquired by Abode.
• Microsoft FrontPage is an easy-to-learn and convenient Web editor for designing, preparing, and publishing Web sites. Thanks to the integration with the MS Office family of products, a familiar interface and a large number of templates, the program allows even beginners who are familiar with the basics of working in MS Word to learn quickly. At the same time, FrontPage cannot be called a solution for “teapots”: the program provides wide functionality and various means of optimization during collective development. It allows you to quickly create dynamic complex Web sites of almost any complexity.
Consider popular code-based editors:
• Adobe HomeSites is a powerful package that includes many useful functions and routines. The volume distribution of the editor includes, in addition to the editor itself, the TopStyle editor for editing CSS tables, spell checking and much more.
• HotDog is a completely professional editor. Built-in support for a very wide set of tools used in Web-design: HTML, CSS, JavaSript, VBScript, ASP, as well as DOM – the document object model used when programming in VBScript and JavaScript. At the same time, the syntax checking of these tools can be configured within fairly wide limits. For example, HTML can be checked for compliance with version 3.2, 4, or “viewed” only in Internet Explorer, etc.
• AceHTML – basic functionality – similar to HomeSite and FirstPage. Among the valuable qualities of AceHTML, skillful work with Russian encodings should be noted. The second plus is a very good built-in utility for viewing graphic files on a computer. Thumbnails of all pictures in the directory, as well as their parameters and size in pixels, are displayed in a spacious window.
Use of CMS tool systems to create dynamic websites
There are two possible ways to create a dynamic site. The first is writing your own programs, which are responsible for creating the necessary templates and supporting the necessary functions. At the same time, the created system will fully meet the needs, but may require a lot of programming effort and time.
The second way is to use already existing systems, which are called Web content management systems. The advantage of this way is the reduction of time and effort. Its disadvantages include reducing flexibility, providing an insufficient or excessive set of opportunities.
The second way is the main one at this time for creating complex, modern sites, portals, Web applications. This is a method using CMS. Wikipedia gives the following definition.
CMS is a content management system (content management system, CMS) — a computer program or system used to ensure and organize a compatible process of creating, editing and managing text and multimedia documents (content or content). Usually this content is considered as unstructured data of the subject matter as opposed to structured data, which is usually found.