Введение. Основные понятия: front-end, HTML, CSS, JavaScript

5 (100%) 11 vote[s]

Что такое веб-разработка, какая разница между front-end и back-end? Что такое статичные та динамичные веб-сайты? С какой целью начинают изучать веб-разработку? Кто-то хочет сделать новый «Instagramm», кто-то мечтает о карьере в IT-сфере, а кому-то просто интересно, как это все работает.

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

Кроме того, в интернете полно информации по основным языкам программирования и библиотеках к ним. Наконец, без работы вы никогда не останетесь.

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

Front end и back end

Веб-разработку условно можно разделить на фронт-энд (client-side) разработку и бэк-энд (server-side) разработку.

По сути фронт-энд – это все, что видит пользователь на экране после загрузки страницы в браузере . Основные задачи разработчика — дизайн, верстка, взаимодействие страницы с пользователем. Основные инструменты – HTML, CSS, JavaScript.

HTML – это язык разметки страницы (говорит браузеру, какие элементы должны находиться на странице и в каком месте).

CSS – это код для описания стилей веб-страниц, отвечает за косметическую сторону.

JavaScript добавляет сайту функциональность и интерактивность.

Бэк-энд – это все, что происходит за кулисами веб-приложений. Занимается хранением информации при помощи баз данных. Фронт-энд получает информацию из баз данных (например, автоматическое обновление выводимой на клиентской стороне информации).  Серверная сторона может быть написана на разных языках программирования: PHP, Ruby on Rails, Python, Java, Perl, Node.js и т.д.

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

Статичные и динамичные страницы

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

Динамичные сайты позволяют пользователю взаимодействовать с содержимым страницы, и выполняется это при помощи HTML, CSS и JavaScript.

Процесс разработки веб-приложения

Планирование:

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

Дизайн:

  • Верстка страниц.
  • Утверждение заказчиком.

Разработка:

  • Написание функционала.
  • Интеграция контента.
  • Тестирование.
  • Исправление ошибок (bugfixing).

Post-Production:

  • Проверка заказчиком.
  • Финальное тестирование.
  • Написание документации.
  • Пробный запуск продукта.
  • Получение фидбеков (обратной святи) от пользователей.
  • Поддержка.

Задания Front-End разработчика

  • Psd к html/css (перевод макетов в html/css-код).
  •  Оптимизация картинок.
  •  Поиск шрифтов.
  •  Проверка дизайна.
  •  Создание мокапов (мокапы – это блоки, используемые для построения сайта).
  •  Адаптивная раз метка (для широкоэкранных и мобильных устройств).

Браузеры, в чем между ними разница?

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

Это, конечно, усложняет жизнь веб-разработчика. Тестирование разрабатываемого сайта в разных версиях браузера – неотъемлемая часть задач веб-разработчика. Есть ресурсы, на которых можно проверять поддержку разными браузерами тех или иных возможностей. Наиболее популярные — https://html5please.com/,  https://caniuse.com/.

Чтобы сайт отображался корректно в разных браузерах, нужно знать основных игроков на этом поле. Основные – это Google Chrome, Internet Explorer Microsoft, Edge Microsoft, FireFox Mozilla, Safari Apple, Opera.

Для распознавания и выполнения JavaScript-кода браузеры используют виртуальные машины (движки). У каждого браузера  есть своя JS engines, которая отличается от других скоростью, способом, форматом обработки информации, управлением памятью, сбором мусора (утилизацией неиспользуемого кода). Google Chrome использует движок V8, Internet Explorer, Microsoft Edge – Trident Chakra, FireFox Mozilla – Spider Monkey, Opera – Presto, Safari – WebKit.

Как только появляются новые возможности, они становятся доступными в браузере при помощи вендорных префиксов в стилях CSS.

Так, для Google Chrome – это -webkit- , для Internet Explorer, Microsoft Edge это -ms- , для FireFox Mozilla – это -moz- , для Opera  — это -o-, для Safari – это -webkit-. 

Как учитывать браузеры при разработке веб-приложений? Например, если сайт создается для крупных компаний, то нужно ориентироваться на IE, поскольку он устанавливается на всех ОС Windows по умолчанию. Если разрабатывается молодежный портал, то, скорее всего, основная аудитория будет заходить на него при помощи Google Chrome, FireFox Mozilla или Opera.

Кроме того, возрастает популярность мобильных девайсов. Мобильные браузеры значительно медленнее веб-браузеров. Среди мобильных браузеров лидируют Google Chrome и Safari. Также следует учитывать, что размеры окна мобильного девайса меньше стационарных мониторов, а контент может отображаться в двух режимах: альбомная горизонтальная ориентация (landscape) и портретная вертикальная ориентация (portrait).

Прежде чем начать конструировать первые веб-страницы, рекомендуется самостоятельно прочитать, что такое DNS, что такое IP адрес. О том, как работает DNS (система доменных имён), интересно объясняется на https://howdns.works/.

Читайте больше по теме

Подписаться
Уведомление о
guest
0 комментариев
Inline Feedbacks
View all comments
Просмотры: 733

Популярные записи