Основы веб-технологий

NePlankton 0 12336
Основы веб-технологий

Иногда, для того чтобы понять устройство чего-то сложного, достаточно разобрать это на отдельные части и посмотреть, как они взаимодействуют чтобы обеспечить работу механизма. Если мы хотим разобраться в том, как устроен сайт, для начала можно разложить его на три составляющие: графический интерфейс, программная часть и серверное оборудование.

Графический интерфейс — это система графических изображений, с помощью которых пользователь может “общаться” с компьютером. Это окна, иконки, панели управления — изображения, позволяющие дать компьютеру команду с помощью клика. Для сравнения, противоположностью графического интерфейса является текстовый интерфейс, для работы в котором пользователь вводит специально сформулированные команды в командную строку. Вся информация при этом предстает в текстовом виде, например, как при настройке компьютера в BIOS.

Серверное оборудование (хостинг) — это компьютерное оборудование, оснащенное специальным программным обеспечением для хранения самого сайта и данных пользователей, обеспечения непрерывной доступности сайта в интернете и взаимодействия со сторонними веб-службами.

Программная часть — это совокупность программ, которые обеспечивают “взаимопонимание” между компьютером и пользователем. Они обрабатывают поступающие запросы, подготавливают графический интерфейс и выдают ответ. Например, если пользователь хочет перейти по ссылке на другую часть сайта, именно программная часть аназилирует суть запроса и открывает новую страницу.

Обеспечение правильного функционирования каждой из этих частей сайта требует своего подхода, поэтому стоит подробнее остановиться на технологиях, которые используются при построении каждой из них.

Часть I. Интерфейс. Клиентские технологии — HTML, CSS, JavaScript

Итак, типичный сайт состоит из трех частей — интерфейса (который также известен как пользовательская часть), программной и серверной частей. Для начала рассмотрим подробнее пользовательскую часть сайта. Ее также называют frontend и она отвечает за графический интерфейс — правильное отображение контента сайта. Для построения пользовательской части используется HTML-разметка, CSS-стили и JavaScript. HTML (HyperText Markup Language, т.е. язык разметки гипертекста) позволяет отобразить информационный контент — текстовые блоки, ссылки и изображения. Простейшая веб-страница может быть создана используя исключительно HTML, но из-за отсутствия стилевых элементов она скорее всего будет выглядеть грубовато и не слишком привлекательно, поэтому важный элемент создания веб-страницы — это оформление контента. Как будет выглядеть шрифт текста, как будет располагаться сам текст, где будут находиться различные объекты, — за все это отвечает CSS (Cascading Stylesheets).

JavaScript, в свою очередь, нужен для того, чтобы сайт мог взаимодействовать с пользователем — анализировать введенные данные, проверять их корректность, изменять контент страницы согласно запросам, выдавать оповещения, модальные окна или показывать выпадающие меню. Технология AJAX (Asynchronous JavaScript and XML) позволяет сайту отправлять запросы и получать данные с сервера без видимой перезагрузки страницы, что значительно ускоряет работу. AJAX используется, к примеру, в Google Maps — во время прокрутки карты не нужно каждый раз перезагружать страницу. Для упрощения разработки клиентской части сайта можно использовать библиотеки, содержащие готовые сборники компонентов для написания типичных программ. Например, бесплатная библиотека JQuery содержит полезные функции для решения типовых задач на JavaScript.

Часть II. Серверное оборудование

Основная задача серверной части сайта или backend — реализовывать сохранность и непрерывную доступность данных на сайте. Серверная часть позволяет пользователю получить доступ к данным, которые хранятся на сервере, используя интерфейс. То есть, когда посетитель сайта хочет перейти на другую страницу, например, нажав на ссылку, этот запрос сначала обрабатывается на сервере, происходит интерпретация скриптов (от англ. script), то есть программных кодов, которые сообщают серверу, что нужно сделать в ответ на данный запрос, а затем открывается новая автоматически сформированная веб-страница.

Работа скриптов зависит от того, какой язык программирования поддерживается сервером, на котором располагается твой сайт. В части III поговорим подробнее о языках программирования, которые используются при создании сайтов.

Часть III. Программная часть. Языки веб-программирования

Отдельное внимание стоит уделить программной части сайта. Именно программы обеспечивают функциональность сайта, позволяют производить на нем различные действия и получать доступ к данным. Веб программирование — это создание программ для использования их веб-приложениями. Языков веб-программирования достаточно много: Visual Basic, C++, Perl, Java, JavaScript, PHP, Python, Ruby и другие. Эти языки можно разделить на две группы — серверные и клиентские.

Клиентские языки программирования

Особенность клиентских языков программирования в том, что программы, написанные на них, обрабатываются браузером на компьютере клиента, т.е. пользователя. Это позволяет ускорить работу сайта и снизить нагрузку на сервер. Недостатком в данном случае является то, что разные браузеры интерпретируют эти программы по разному, соответственно, в разных браузерах внешний вид сайта может немного отличаться. Поэтому при разработке сайта следует уделить отдельное внимание кроссбраузерности сайта — тому, как он будет выглядеть в наиболее широко используемых браузерах, таких как Chrome, Firefox, Safari, Internet Explorer и Opera.

Примеры клиентских языков программирования: JavaScript, Visual Basic.

Серверные языки программирования и базы данных

Серверные языки программирования предназначены для того, чтобы обеспечивать связь между сервером и пользователем, используя базы данных. Программы, созданные с использованием этих языков, получают запросы от браузера, обращаются к базе данных и возвращают ответ. К примеру, когда пользователь хочет открыть документ на сайте, браузер передает этот запрос базе данных на сервере и программа выдает результат — нужный документ или, например, знаменитую ошибку 404, “не найдено”.

Примеры серверных языков программирования: C++, Java, PHP, Python, Perl.

Создание сайтов в Adobe Flash

Adobe Flash — это мультимедийная среда для создания веб приложений с помощью языка ActionScript, позволяющая работать с растровой, векторной и трехмерной графикой, создавать баннеры, анимацию, а также воспроизводить на сайте аудио и видео файлы. Преимущества Adobe Flash в том, что сайты, созданные с помощью этой технологии как правило визуально очень ярки и привлекательны. По этой причине сайты на основе Adobe Flash хорошо подходят для рекламы. Однако платформа Flash имеет несколько существенных минусов, из-за которых ее начинают вытеснять более современные технологии, один из них это “тяжеловесность” — сайт сравнительно медленно загружается. Второй минус в том, что для того, чтобы открыть сайт, использующий Flash требуются специальные плагины, которые к тому же не на все устройства можно установить. Например, продукция компании Apple не поддерживает сайты с Flash. Более того, поисковые системы не считывают текст с flash файлов. Это значит, что поисковики будут находить такой сайт только по ключевым словам, которые указаны при поисковой оптимизации, а не по самому контенту, что скорее всего негативно скажется на посещаемости сайта. Таким образом, можно сделать вывод, что если ты создаешь сайт для целей бизнеса, лучше избежать использования платформы Adobe Flash.

Какой язык лучше?

Не существует одного языка веб-программирования, который был бы лучше, чем все другие. Преимущество одного языка над другим может иногда проявляться в подходе к решению определенной проблемы, но в целом многие задачи можно эффективно решить используя любой из распространенных языков. Часто выбор зависит от специализации разработчиков, готовых взяться за конкретный проект. По распространенности сейчас лидирует PHP, следовательно, найти PHP разработчиков проще всего, и стоимость разработки дешевле, однако часто есть риск столкнуться с низким качеством работы, поскольку из-за широкой распространенности на нем пишет много непрофессионалов. Разработка на Java и .NET стоит дороже, и, как правило, услугами таких специалистов пользуются корпорации. Язык Ruby находится где-то посредине между этими двумя категориями, разработка на нем обойдется дороже, чем на PHP, но и средний уровень специалистов выше.