Введение и святая троица веб-разработки

Эта статья даст вам обзор Front End Development, Back-End разработки и Full Stack Development и даст вам представление о каждом из них в деталях, чтобы вы могли выбрать для себя область интересов.
Исходя из основного определения книги, «веб-разработка означает создание, создание и поддержку веб-сайтов. Он включает в себя такие аспекты, как веб-дизайн, веб-публикации, веб-программирование и управление базами данных ».

Теперь давайте подробно рассмотрим каждый аспект веб-разработки.

Внешний интерфейс:
«Front End» обычно относится ко всем видам материалов, которые пользователь действительно видит на веб-сайте после его полной загрузки. Вот почему его также называют «клиентской стороной» интерфейса.
Сюда входят элементы пользовательского интерфейса, такие как меню и раскрывающиеся списки, панель навигации, боковые панели, верхние и нижние колонтитулы, а также анимация CSS. Внешний интерфейс любого веб-сайта должен взаимодействовать как с пользователем, так и с серверной частью системы. Итак, front-end разработчик отвечает за эстетичность, дизайн и внешний вид сайта. Кроме того, в соответствии с последними рыночными тенденциями, интерфейсный разработчик должен знать, как сделать веб-сайт адаптивным к различным устройствам, браузерам и размерам экрана. Это связано с тем, что рынок очень универсален, а различные браузеры и устройства имеют некоторые сложности и свойства, которые необходимо учитывать перед созданием веб-сайта или блога (например, свойство shadow).

Интерфейсный разработчик уделяет большое внимание пониманию HTML, CSS и JavaScript.

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

Наиболее часто встречающиеся названия должностей, связанных с фронтенд-разработкой:

• Front End разработчик
• UI / UX дизайнеры
• Веб-дизайнер

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

Один очень распространенный вопрос среди начинающих веб-разработчиков и соискателей: «В чем разница между веб-разработчиком и веб-дизайнером и« Чем один отличается от другого ».

• Веб-дизайнер использует программное обеспечение для графики и графического дизайна, такое как Adobe Photoshop, Illustrator или InDesign, для создания внешнего вида веб-сайта. Чтобы стать хорошим веб-дизайнером, требуется сильное понимание множества концепций, включая цвет и типографику, особые отношения, аудиторию и пользовательский опыт. Итак, основная работа дизайнера веб-сайтов - создать максимально эстетичный вид веб-сайта с помощью таких программ, как Adobe Photoshop, InDesign и т. Д.
• Принимая во внимание, что веб-разработчик отвечает за разработку дизайна, данного веб-дизайнером для рабочей модели, к которой могут получить доступ разные пользователи по всему миру. HTML, JavaScript, JQuery и CSS - это некоторые из инструментов, которые веб-разработчик должен иметь в своем наборе.

Бэк-Энд:
Часть приложения, которая находится в основном на сервере, называется серверной частью веб-сайта. Поскольку эта часть доступна посетителям и пользователям веб-сайта, она также известна как серверная часть веб-сайта. Основная задача бэкэнда - убедиться, что правильные данные отправляются в браузер по запросу пользователя. Хотя это непростой процесс, и нужно многое сделать, чтобы получить информацию из серверной части, а затем отобразить ее пользователю во внешнем интерфейсе.
Давайте рассмотрим пример, чтобы прояснить ситуацию; Студент хочет получить результаты своего семестра на веб-сайте своего колледжа. После заполнения необходимой формы (номер регистрации, дата рождения и т. Д.) Он отправляет кнопку отправки. После нажатия кнопки отправки веб-сайт начинает сопоставление информации, введенной пользователем, с информацией, хранящейся в его базе данных. Если выясняется, что информация верна, серверная часть собирает и обрабатывает данные из серверной части и отправляет их во внешний интерфейс веб-сайта, где результат в конечном итоге отображается студенту.

Back-end разработчики используют такие языки, как Java, PHP, Ruby on Rails, Python и .Net, чтобы выполнить свою работу. Back-end разработка очень необходима для создания динамического веб-сайта. Динамические веб-сайты - это те веб-сайты, данные которых со временем обновляются. Например, когда вы входите в свою учетную запись Twitter по прошествии значительного количества времени, вы автоматически получаете последние обновления от людей, на которых вы подписаны в своей ленте. Это не будут те обновления, которые вы видели вчера. Как изменилась страница? Нет никаких шансов, что какая-либо компания будет нанимать сотрудников только для того, чтобы вручную обновлять ленту новостей. Фактически, скрипт в серверной части Twitter получил бы обновления и соответствующим образом повторно сгенерировал бы интерфейсную часть.
Примеры динамических сайтов включают Facebook, Twitter и Google Maps.
Бэкэнд состоит из трех частей: сервера, приложения и базы данных.
Примечание. Для управления базами данных используются такие технологии, как MySQL и MongoDB.

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

Святая Троица веб-разработки

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

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

• Каждый документ HTML начинается с тега документа HTML. Хотя это не обязательно, но рекомендуется начинать документ с указанного ниже тега:

   <! DOCTYPE html>

• <html> : каждый HTML-код должен быть заключен между основными HTML-тегами. Он начинается с <html> и заканчивается тегом </html> .
• <head> : Следующим идет тег заголовка, который содержит всю информацию заголовка веб-страницы или документа, такую как заголовок страницы и другую разную информацию. Эта информация заключена в тег заголовка, который открывается с <head> и заканчивается </head> . Содержание этого тега, конечно же, будет объяснено в следующих разделах.
• <title>: мы можем указать заголовок веб-страницы с помощью тега <title> . Это информация заголовка и, следовательно, упоминается в тегах заголовка. Тег начинается с <title> и заканчивается </title>
• <body>: Следующий шаг - самый важный из всех тегов, которые мы изучили до сих пор. Тег body содержит фактическое тело страницы, которое будет видно всем пользователям. Это начинается с <body> и заканчивается </body> . Каждый контент, заключенный в этот тег, будет отображаться на веб-странице, будь то тексты, изображения, аудио, видео или даже ссылки. Позже в этом разделе мы увидим, как с помощью различных тегов мы можем вставлять упомянутое содержимое на наши веб-страницы.

Весь паттерн кода будет выглядеть примерно так:

Этот код ничего не отображает. Он просто показывает базовый шаблон того, как написать HTML-код, и назовет заголовок страницы как GeeksforGeeks. - это тег комментария в HTML, и он не читает строку внутри этого тега.

CSS (каскадные таблицы стилей):

CSS используется для стилизации содержимого HTML, представленного на веб-сайте. Это включает в себя изменение цвета страницы, семейства шрифтов, размера шрифта, позиционирования элементов и т. Д.
Есть три типа CSS:

1. В отдельном файле (внешнем)
2. Вверху документа веб-страницы (внутренний)
3. Рядом с украшающим его текстом (встроенным)

Внешние таблицы стилей: отдельные файлы, содержащие инструкции CSS с расширением (.css) . Основное преимущество использования внешней таблицы стилей заключается в том, что вы можете изменить стиль всего веб-сайта сразу, не переписывая или изменяя тег стиля на каждой странице. Таким образом экономится много времени и энергии. Однако внешняя таблица стилей должна быть связана с файлом HTML с помощью тега между, чтобы она работала.

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

Выход:

 Привет, GeeksforGeeks

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

Выход:

 Привет, GeeksforGeeks

Но может ли веб-сайт иметь несколько таблиц стилей?
Да, но будут соблюдаться некоторые правила. Взгляните на следующий пример.

Предполагая, что имя внешней таблицы стилей как gfg.css имеет следующий стиль для элемента <h1>:

Если внутренний стиль определен после ссылки на внешнюю таблицу стилей (как показано ниже), элементы <h1> будут «зелеными»:

Пример:

Выход:

 Привет, GeeksforGeeks

Однако, если внутренний стиль определен до ссылки на внешнюю таблицу стилей, элементы <h1> будут «оранжевыми»:

Пример:

Выход:

 Привет, GeeksforGeeks

JavaScript:
Следует иметь в виду, что JavaScript и Java - это совершенно разные языки как по концепции, так и по дизайну, и оба они не связаны друг с другом. Java - это язык объектно-ориентированного программирования (ООП), созданный Джеймсом Гослингом из Sun Microsystems. JavaScript - это язык сценариев, первоначально известный как LiveScript. JavaScript используется во внешней разработке, тогда как Java используется для внутренней разработки в веб-разработке.
Основная функция Javascript - добавить логику и интерактивность к веб-странице (например, ссылка меняет свой цвет, когда пользователь нажимает на нее).
Однако сценарий должен быть включен в документ HTML или на него следует ссылаться, чтобы код интерпретировался браузером. Это означает, что веб-страница не обязательно должна быть статическим HTML, но может включать программы, которые взаимодействуют с пользователем, управляют браузером и динамически создают HTML-контент.

Преимущества использования JavaScript:

1. Меньше взаимодействия с сервером: ввод пользователя может быть проверен перед отправкой страницы на сервер. Это экономит трафик сервера, что, в свою очередь, ускоряет загрузку веб-сайта.
2. Посетителям не нужно ждать перезагрузки страницы, чтобы увидеть, не забыли ли они что-то ввести. Например, веб-сайт мгновенно уведомляет пользователя о необходимых исправлениях в форме перед ее отправкой.
3. Можно создать такие интерфейсы, которые будут изменять стиль шрифта или цвет шрифта ссылки, когда пользователь наводит на них указатель мыши.
4. JavaScript может использоваться для включения элементов в качестве компонентов и ползунков для перетаскивания, создавая, таким образом, более богатый и лучший интерфейс для пользователя.

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