Словарь терминов веб-дизайна

Самый понятный в интернете словарь терминов веб-дизайна — того птичьего языка, на котором разговаривают веб-разработчики.

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

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

Выбирайте вариант по вкусу — вас в любом случае поймут.

Angular (Ангулар, Ангуляр) — один из самых популярных и современных фреймворков JavaScript, развиваемый Google. Простыми словами, это набор готовых решений, позволяющих быстро создавать сложные и динамичные интерфейсы на сайтах.

Angular можно рассматривать как более современную и мощную альтернативу широко известной JavaScript библиотеке jQuery.

Другая популярная JavaScript библиотека для создания современных интерфейсов сайтов — React от компании Facebook.

Backend, back-end (бэкенд, бекенд, бэкэнд) — это та «задняя» часть сайта, которая невидима посетителю, но которая непосредственно отвечает за работу сайта.

Если сравнить сайт с кораблем, то бэкенд — это машинное отделение.

Для простоты можно считать, что бэкенд — это CMS или движок сайта со всеми его связями с механизмами хостинга — базой данных, веб-сервером, почтовыми службами.

Соответственно, у сайта, помимо бэкенда, еще есть фронтенд — лицевая часть, которую видит посетитель сайта и с которой он непосредственно взаимодействует.

Бэкэнд и фронтенд сайта пишутся на разных языках: для бэкенда характерны языки PHP, Python, Ruby, Go, а для фронтенда — JavaScript, HTML, CSS. Поэтому у разработчиков сайтов есть разделение специализаций — программисты бэкэнда и фронтэнда.

Бэкенд считается более сложной и более «программистской» частью создания сайта, а фронтенд — более простой и связанной с дизайном и эстетикой сайта.

Bootstrap (Бутстрап) — самый популярный CSS фреймворк от компании Twitter для адаптивной верстки сайтов.

Bootstrap — это набор готовых CSS файлов, который можно подключить к вашему сайту, чтобы быстро и качественно сделать его «мобильным» — т.е. корректно отображающимся на телефонах и планшетах.

Основа Bootstrap — модульная сетка из 12 колонок, которая умеет перестраиваться в зависимости от размера экрана устройства посетителя вашего сайта.

Кроме того, Bootstrap включает в себя стили оформления множества элементов современных сайтов: кнопок, форм, всплывающих окон, навигационных панелей и т.п.

Bootstrap — не единственный способ создания адаптивной верстки. Есть альтернативы — такие, как Foundation. Также можно сделать адаптивность полностью вручную, используя Media Queries. Это значительно дольше, но вполне возможно.

Важное преимущество Bootstrap — в его массовости. Он используется так давно и на таком большом количестве сайтов, что можно быть уверенным, что большинство проблем совместимости с браузерами и операционными системами в нем решены.

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

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

С другой стороны, благодаря этой особенности CMS, вы можете больше ни о чем не беспокоиться: чтобы управлять вашим сайтом с CMS, нужен только интернет и браузер.

Django (Джанго) — самый известный фреймворк на языке программирования Python. В отличие от популярных CMS, таких, как WordPress или Drupal, Django не предназначен для того, чтобы быстро создать сайт одного из стандартных типов. Django предназначен для разработки более сложных и индивидуальных решений.

Важное отличие Django — он написан не на самом популярном языке программирования PHP, а на считающемся более качественным и передовым языке Python. Это выдвигает дополнительные требования и к разработчикам сайтов на Django, и к хостингу, на котором будет размещаться написанный на Django сайт.

Django часто используют в крупных проектах — таких, как Instagram, Disqus, Mozilla, The Washington Times, Pinterest, YouTube, Google и других.

Drupal (Дру́пал, Дру́пэл) — бесплатная система управления сайтами, входящая в тройку самых популярных в мире.

Для работы Drupal подходит обычный хостинг с PHP и базой данных MySQL или MariaDB.

На Drupal можно создавать как простые сайты-визитки, так и крупные порталы и интернет-магазины.

Drupal поддерживает мультиязычность «из коробки».

Frontend, front-end (фронтенд, фронтэнд, фронт-енд) — лицевая часть сайта, которую видит и с которой непосредственно взаимодействует посетитель сайта.

Фронтенд — та часть разработки сайта, которая в итоге производит наибольшее визуальное впечатление на посетителей. Другая часть разработки сайта — бэкенд, невидимая пользователю серверная часть.

К фронтенду также относятся такие понятия веб-дизайна, как UI и UX — User Interface и User eXperience — то, насколько интуитивно понятен пользователю способ работы с сайтом и насколько приятное впечатление сайт оставляет у пользователя.

В механизмах фротнэнда в первую очередь используются технологии JavaScript и CSS/HTML.

Minification (минификация) — способ увеличения быстродействия сайта за счет автоматического уменьшения размера кода HTML, CSS и JavaScript файлов.

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

Для этого используются правила оформления кода — Code Style Guide, свои для каждого языка программирования. В соответствии с этими правилами, программисты пишут код с активныи использованием многочисленных пробелов, чтобы выделять отступами блоки кода, с комментариями и т.п. приемами, облегчающими чтение кода.

Но для работы сайта все эти красивости кода не нужны. Часто можно вообще убрать все лишние пробелы и переводы строк и превратить код сайта в одну сплошную длинную строку, и при этом он будет продолжать работать. А вес файлов с кодом уменьшится, и сайт будет загружаться быстрее.

Например, комплект CSS файлов Bootstrap можно сжать с помощью автоматической минификации на 20-25%.

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

Open Source (опен сорс) — идеология свободного (что включает в себя, в том числе, бесплатность) распространения программного обеспечения. Казалось бы, какое отношение имеет идеология к разработке сайтов? Как минимум такое, что подавляющее большинство сайтов в мире работают именно на программах, написанных в соответствии с идеологией Open Source — т.е. на лицензионно чистых и легально бесплатных.

В понимании идеи Open Source есть много нюансов. Например, то, что Open Source — это больше, чем просто бесплатное программное обеспечение. Для Open Source важна доступность исходных кодов программы, что позволяет всем желающим развивать и улучшать программу или делать собственные модифицированные версии.

Противоположность Open Source — проприетарное, или несвободное, программное обеспечение (proprietary software). Ключевое отличие проприетарных программ в том, что они не только платные, но и их владельцы ограничивают права пользователей на использование, копирование или модификацию этих программ.

Open Source имеет юридическое воплощение в виде свободных лицензий, из которых самая известная и чаще всего используемая — лицензия GPL.

Для разработчиков сайтов и для владельцев сайтов важно то, что Open Source обеспечивает лицензионную чистоту используемых программ. Т.е. вы можете быть спокойны насчет лицензионных отчислений (их нет) и легальности использования программного обеспечения (она есть).

На программах, написанных под Open Source лицензиями, работают не только большинство серверов в интернете, но и все самые популярные CMS, а также множество инструментов веб-разработчиков.

Крупнейшие мировые технологические компании также поддерживают движение Open Source и вносят существенный вклад в разработку Open Source проектов. Компания Google открыла специальный портал для поддержки Open Source: opensource.google.com.

Более того — движение Open Source поддерживают даже правительства, в частности, США. Агентство национальной безопасности США (АНБ) создало сайт nationalsecurityagency.github.io, на котором предлагает свои разработки для любого использования, в т.ч. коммерческого, и прямо говорит: «Правительство получает выгоду в виде улучшения технологий силами Open Source сообщества».

PHP (пи-аш-пи, пэ-ха-пэ) — самый массовый язык программирования сайтов. На PHP написаны все самые популярные CMS в интернете — WordPress, Drupal, Joomla. PHP наиболее широко поддерживается на хостингах.

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

С одной стороны, это неудобно — вы не можете взять файл с расширением .php и просто его запустить — в лучшем случае будет показан его код, в худшем не произойдет вообще ничего. Но когда речь идет о разработке сайтов, то становится ощутимо колоссальное преимущество в удобстве и оперативности разработки на интерпретируемом языке: написанный на PHP код не нужно компилировать, на настроенном веб-сервере с поддержкой PHP этот код будет работать сразу.

В современных условиях PHP — хороший вариант для малых и средних сайтов и для ситуаций, когда требуется минимизировать затраты на начальном этапе разработки.

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

Python (Питон, Пайтон) — язык программирования, который в разработке сайтов распространен меньше, чем PHP, но зачастую используется в более крупных и ответственных проектах.

В практике веб-разработки Python, как и PHP, используется как интерпретируемый язык программирования.

Для Python нет таких массовых готовых CMS, как WordPress или Drupal для PHP, но есть мощный фреймворк Django, существенно облегчающий и ускоряющий разработку сайтов на Python.

Python развивается при поддержке Google и широко используется во внутренних проектах компании.

React, ReactJS, React.js (Реакт, Реакт-джи-эс) — библиотека JavaScript для создания современных интерфейсов сайтов. React создан компанией Facebook и развивается при поддержке Instagram и большого сообщества разработчиков.

Существует достаточно большое количество JavaScript библиотек для решения похожих задач — например, Angular от компании Google. При этом можно использовать и React, и Angular в одном проекте — поскольку специализация у них различается.

React используется такими крупными проектами, как Netflix, Yahoo, Airbnb, Sony, Atlassian и многими другими.

SEO (произносится просто «сео») — аббревиатура Search Engines Optimisation (оптимизация для поисковых систем). Это название комплекса работ, который выполняется для того, чтобы обеспечить положение определенного сайта на как можно более высоких позициях при поиске в Google, Яндексе, Bing и других поисковых системах.

Другой синоним SEO (помимо буквальной расшифровки аббревиатуры «оптимизация для поисковых систем»), — «продвижение в поисковых системах». Понятие продвижения в этом случае означает постепенное улучшение двух главных результатов для сайта, к которому применяются технологии SEO:

  • повышение позиций сайта в результатах поиска в Google и других поисковиках;
  • увеличение количества ключевых слов, по которым сайт можно найти в Google и других поисковиках.

SEO — синтетическая дисциплина, находящаяся на стыке технологий программирования, HTML-верстки, литературной работы с текстами, Public Relations и статистического анализа.

Это связано с тем, что для определения наиболее подходящих для пользователей результатов поиска современные поисковые системы (в первую очередь Google) учитывают большое количество самых разных факторов. По современным оценкам — около 200 параметров для каждого запроса.

Подробнее о том, как работает SEO, смотрите в нашей статье «SEO — оптимизация сайта для Google»

SVG (эс-вэ-гэ, эс-ви-джи) — аббревиатура Scalable Vector Graphics (масштабируемая векторная графика). Это язык разметки, подобный HTML, но для изображений. На основе языка SVG создаются файлы изображений с расширением .svg, которые можно включать в страницы сайтов. Преимущества изображений в формате SVG — они мало весят и их можно увеличивать и уменьшать без потери качества.

Существует два широко распространенных и принципиальных разных типа компьютерной графики: растровая (.jpg, .png, .gif, .psd) и векторная (.svg, .ai, .eps). Растровая графика — это всегда прямоугольник, заполненный пикселями (прямоугольниками отдельных цветов), а векторная графика — это рисунок, который создается на основе формул.

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

Преимущества векторной графики, к которой относится SVG, в том, что векторное изображение можно масштабировать (увеличивать и уменьшать) без потери качества (без появления пикселей или нерезкости), и в размере файла, который обычно существенно меньше, чем у аналогичного растрового изображения.

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

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

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

По завершению спринта тестируется созданный функционал и корректируется план следующего спринта.

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