|
|
@@ -0,0 +1,102 @@
|
|
|
+# Основы WEB-разработки
|
|
|
+
|
|
|
+WEB разработка делится на две независимые части: **Фронтенд** и **Бэкенд**
|
|
|
+
|
|
|
+## Фронтенд
|
|
|
+
|
|
|
+**Вся лицевая сторона**. Фронтенд-разработчик отвечает за то, что пользователь видит и с чем взаимодействует на странице. Например: дизайн, визуальные элементы, схемы.
|
|
|
+
|
|
|
+Задачи фронтендера — сделать сайт, который будет решать задачи владельца, одинаково корректно работать на всех устройствах, независимо от браузера и размера экрана и при этом будет удобен пользователю.
|
|
|
+
|
|
|
+Основные инструменты: **HTML**, **CSS** и **JavaScript**.
|
|
|
+
|
|
|
+## Бэкенд
|
|
|
+
|
|
|
+**Невидимая часть сайта**. Бэкенд-разработчик отвечает за то, что скрыто от глаз пользователя и работает на сервере. Например: создание базы данных и программы, которые будут записывать информацию в базу, шифрование паролей и ценной информацией, настраивание доступов и системы резервного копирования данных, написание программы, обрабатывающие информацию, невидимую пользователю.
|
|
|
+
|
|
|
+Языков программирования для бэкенда много, например: **PHP**, **Ruby**, **Python** или **Node.js**. Для бэкенд-разработки нужны системы управления базами данных: **MySQL**, **PostgreSQL**, **SQLite** или **MongoDB**.
|
|
|
+
|
|
|
+## Вёрстка страниц
|
|
|
+
|
|
|
+Вне зависимости от того, что вы выберете: фронтенд или бэкенд, вам придётся взаимодействовать с веб-страницами. Для этого надо изучить **HTML** и **CSS**.
|
|
|
+
|
|
|
+>IMHO это утверждение не всегда верно. Да, большинство "старых" бекенд-фреймворков содержат шаблонизаторы для формирования **HTML** файлов, но современные JS-фреймворки формируют контент на лету и в бекенд ходят только за данными. Таким образом бекенд-разработчик может сосредоточиться на работе с данными.
|
|
|
+
|
|
|
+### HTML
|
|
|
+
|
|
|
+Это язык гипертекстовой разметки. Отвечает за структуру и содержание страницы. Он состоит из тегов, а тег состоит из имени, заключённого между знаками «меньше» и «больше». Например: `<h1>`, `<p>` и `<ul>`.
|
|
|
+
|
|
|
+Вспомните, как вы работаете с документом в текстовом редакторе. Пишете текст, фрагменты выделяете курсивом или цветом, вставляете картинки или таблицы. Веб-разработчик делает то же самое в редакторе кода с помощью тегов.
|
|
|
+
|
|
|
+Вместо расширения `*.txt` тут используется `*.html`. Оно даёт понять браузеру, что внутри файла находится код веб-страницы. Браузер разбирает его структуру, определяет взаиморасположение элементов и визуализирует их.
|
|
|
+
|
|
|
+```html
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+ <head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <title>HTML Документ</title>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <p>
|
|
|
+ <b>
|
|
|
+ Этот текст будет полужирным, <em>а этот — ещё и курсивным</em>.
|
|
|
+ </b>
|
|
|
+ </p>
|
|
|
+ </body>
|
|
|
+</html>
|
|
|
+```
|
|
|
+
|
|
|
+Веб-стандарты **HTML** описаны в спецификациях. Это главный источник знаний и для браузеров, и для разработчиков. Важно следить за их обновлениями.
|
|
|
+
|
|
|
+### CSS
|
|
|
+
|
|
|
+Это язык, который используется для стилизации вашей разметки. Например: сделать текст красным, выровнять по левую сторону, округлить углы изображения, поиграть со шрифтами, сделать отступы больше или меньше.
|
|
|
+
|
|
|
+```css
|
|
|
+p {
|
|
|
+ font-family: "Arial", "Helvetica", sans-serif;
|
|
|
+}
|
|
|
+
|
|
|
+/* свойству font-family передаются сразу несколько шрифтов и название семейства */
|
|
|
+```
|
|
|
+
|
|
|
+Тег `<p>` отвечает за формирование текстового абзаца. Допустим, нам нужно чтобы все `<p>` на странице получили одинаковые свойства. Для этого надо подключить к странице стили. Пока они не подключены никакого эффекта от них не будет. Стили можно встроить внутри HTML-кода страницы (инлайново) или подключить их как внешний файл. Чаще всего стили подключают из внешнего файла с расширением `*.css`. Так разметка отделяется от стилизации, снижается вероятность ошибки, внешний файл кешируется и не загружается повторно. Для подключения из внешнего файла используется тег `<link>`.
|
|
|
+
|
|
|
+```html
|
|
|
+<head>
|
|
|
+ <link href="external.css" rel="stylesheet">
|
|
|
+</head>
|
|
|
+```
|
|
|
+
|
|
|
+Знание основ **HTML** и **CSS** позволит создавать простые сайты с текстовым наполнением. Если хотите что-то посложнее, не обойтись без языков программирования.
|
|
|
+
|
|
|
+## Программирование
|
|
|
+
|
|
|
+### JavaScript
|
|
|
+
|
|
|
+Браузерный язык программирования для фронтенд-разработки. Его поддерживают все популярные браузеры. Каждый сайт, каждое веб-приложение, которым вы пользовались содержит JavaScript-код. Его часто рекомендуют для изучения новичкам, потому что он достаточно простой, но содержит все фундаментальные вещи: объектно-ориентированную модель и структуры данных.
|
|
|
+
|
|
|
+Применяется, чтобы оживить HTML-страницы: добавить на страницу обработку действий пользователя или интересные визуальные эффекты. Возможности применения **JavaScript** ограничиваются только вашей фантазией и поддержкой браузеров. Не путайте его с **Java**, это совершенно разные языки.
|
|
|
+
|
|
|
+### PHP
|
|
|
+
|
|
|
+Серверный язык программирования, на котором пишут бэкендеры. Он создан специально для веб-разработки — написанный на нём код можно внедрить в HTML.
|
|
|
+
|
|
|
+Когда вы открываете свою страницу в социальной сети и вводите логин-пароль, компьютер формирует запрос с вашими данными и отправляет на сервер. На стороне сервера PHP получает информацию из базы данных, которая тоже лежит на сервере и формирует вашу страницу: передаёт на фронтенд имя, фотографию, заполняет поля. Результат оформляется в виде готового HTML и отправляется вам в браузер.
|
|
|
+
|
|
|
+PHP не самый сложный язык, но чтобы раскрыть все его возможности, потребуется изучить и другие технологии. Например, работу с базами данных: язык SQL, а также MySQL, PostgreSQL, SQLite или MongoDB.
|
|
|
+
|
|
|
+База данных — это место, в котором хранятся данные сайта. Это могут быть тексты страниц, списки пользователей с их логинами и паролями, каталоги продукции и многое другое. На PHP пишется серверная логика для интернет-магазинов, сервисов бронирования, а также крупных проектов, которыми пользуются миллионы людей: «Википедия» и «ВКонтакте».
|
|
|
+
|
|
|
+### React
|
|
|
+
|
|
|
+Библиотека на языке **JavaScript**. Используется для создания веб-приложений. Уметь пользоваться библиотеками нужно, чтобы оптимизировать написание кода и не тратить много времени на поиск ошибок. В библиотеке хранятся готовые решения, которые можно использовать для типовых задач.
|
|
|
+
|
|
|
+Чтобы написать приложение с помощью **React**, недостаточно знать **HTML**, **CSS** и **JavaScript**. Библиотеку придётся изучить отдельно. Но если у вас уже есть базовые знания **JavaScript**, проблем с этим не будет.
|
|
|
+
|
|
|
+### Vue
|
|
|
+
|
|
|
+JavaScript-фреймворк. Как и **React** используется для создания веб-приложений. На нём мы дальше и будем писать. **Vue** приложение содержит и верстку и стили и логику. При выполнении в браузере строится виртуальный DOM, в котором формируется содержимое, а затем это содержимое отрисовывается в окне браузера.
|
|
|
+
|
|
|
+АПИ будем использовать то, которое написали на `C#`.
|
