Разработчик сайтов как называется профессия

IT профессии: работа с сайтами и поисковыми системами

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

Вот тут, пожалуй, самый большой букет недопониманий, поэтому каждый первый сайт приходится по несколько раз переделывать. Эмпирическим путем за год-два бизнесмен проходит путь понимания того, кто и чем занят, с кого что можно требовать, и кто какие хотелки способен реализовать. Универсального «мальчика, который этим всем занимается», не существует. Если бы была такая профессия как сайтолог, ей бы обязательно нашли более солидное название.

Профессия веб-программист

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

Потому что веб-разработка — это действительно адЪ. Для создания одного-единственного сложносочиненного сайта используется сразу несколько языков программирования. Вы себе представляете того «полиглота», который способен на каждом из пяти-шести цифровых языков быстро написать вам хотя бы «письмо счастья»? Например, за базовый «коннект» с браузерами отвечает HTML (Hyper Text Mark Up Language), за стиль и внешний вид — CSS, за динамику и часть функционала — Javascript, за работу с базами данных — SQL, за мобильные приложения — Java, модный Swift или Kotlin, а есть еще Python, воспетый в мемах монструозный PHP, специальный гугловедческий Go, древний, как цифровой мир, C++ и еще много других — у всех свои задачи и области применения.

Код, чтобы вы понимали, это «алфавит», состоящий из одинаковых, в принципе, символов.

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

Поэтому, если вам нужно создать сайт, не пишите «ищу программиста». Есть шанс накликать олдскульщиков из секты кода-самописца и на долгие годы впасть в ожидательную прострацию, когда шаману прилетит в бубен вдохновение, а мухоморы пройдут в организме весь цикл биохимических реакций. Короче, свой сайт вы получите через год, а то и вовсе никогда. Но если уж надумаете познакомиться с самописной камасутрой, то призывайте программиста как неуправляемого демона — предварительно очертив меловую пентаграмму, облившись до пят святой водой и написав завещание потомкам закончить таки долбанный проект. Если вы не надумали сделать второй Qiwi или Facebook, лучше звоните ДиКаприо, в смысле, вебмастеру, а к программистам в джунгли не ходите, заблудитесь.

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

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

Профессия мобильный разработчик

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

Если бизнесу нужен сайт с мобильной версией — это НЕ к мобильному разработчику. А если приложение — то не к веб-мастеру.

Профессия верстальщик

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

Есть еще адаптивная верстка — когда на все многообразие экранов с разными пропорциями нужно взять и как уже помянутую сову на глобус натянуть по принципу «дизайнерское «я так вижу» на мобильный экран», и при этом не перекрыть кнопками что-нибудь важное типа самих же себя. Вся эта магия колдуется на HTML и CSS с легкой примесью Javascript. За всю эту красоту верстальщика называют frontend разработчиком, или просто фронтендером. Мы к ним еще подойдем поближе.

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

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

Профессия Frontend и Backend разработчик

Создание самописных сайтов все же может иметь смысл — обычно это целые информационные системы, которые создает крупный бизнес, и у которых не было аналогов (примеры QIWI, нежно «любимый» народом Сбербанк и все остальные банки, а также онлайн-магазины типа М-Видео). Тут сложную логику вместе с натянутой на глобус совой не объединишь — такой сайт грузился бы полчаса и жутко тупил.

Поэтому появилось разделение на frontend и backend части. И соответственно, существуют фронтэнд и бекэнд программисты. Backend программисты отвечают за всю сложную логику и начинку сайта — внутренности. Регистрация пользователей на сайте, оформление платежей за покупки, интеграция складской и продажной программы 1С в структуру интернет-магазина — это все Backend. К слову, здесь вы можете ознакомиться с тонкостями выбора CMS для вашего интернет-магазина.

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

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

Профессия веб-мастер

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

Профессия веб-дизайнер

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

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

Профессия оптимизатор

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

Переводя на человеческий, у сайта два языка: один человеческий, для пользователей, и второй — машинный, для поисковой системы. Если «перевод» на машинный язык сделан с ошибками, Яндекс и Гугл будут морщиться и уходить, не дочитав, что же там вы такое предлагаете.

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

Оптимизатор сотрудничает с SEO-копирайтером и контент-менеджером в дружном тандеме, так как 40% теплых и ламповых отношений с поисковыми системами зависят от текстовой и визуальной составляющих сайта.

Профессия тестировщик

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

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

Профессия Web-аналитик

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

Профессия трафик-менеджер (опционально называемый лид-менеджером)

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

Профессия пока мало востребованная, так как ее функции благополучно берут на себя маркетолог, таргетолог и пиарщик. Тем не менее, существует и в последнее время становится все более популярной.

Оператор технической поддержки (огульно называемый админом, сисадмином и вебмастером)

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

Вам также могут быть интересны следующие статьи:

• IT профессии: работа с текстами
• IT профессии: программист
• IT профессии: учет доходов + расходов и правовая помощь
• IT профессии: менеджмент и коммуникация.
• IT профессии: написание текстов

Кто такой веб-разработчик, чем он занимается и как им стать

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

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

Анастасия Редченкова

Старший фронтенд-разработчик Kraftvaerk. Рассказала о профессии

Автор-фрилансер. Упаковала рассказ Анастасии в готовую статью

Кто такой веб-разработчик

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

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

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

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

Вот несколько примеров обычных сайтов:

А это примеры веб-приложений:

Кто есть кто в веб-разработке

Веб-разработка неоднородна: она включает в себя как веб-дизайн и вёрстку страниц, так и работу с клиентской и серверной частью, конфигурацию серверов. Из-за этого профессиональную область условно разделили на специализации, в зависимости от того, за что в проекте отвечает специалист: за внешний вид сайта или его серверную часть ↓

Frontend-разработчик

Это программист, который создаёт видимую часть интернет-ресурса. Когда пользователь заходит на сайт сервиса для заказа такси, он видит карту, поля ввода адреса, форму выбора тарифа, визуализацию маршрута — всё это и есть результат работы фронтендера. Его задача — перевести готовый дизайн-макет в код и сделать так, чтобы всё на сайте работало правильно и подстраивалось под устройство пользователя.

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

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

Backend-разработчик

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

Когда пользователь при заказе такси вводит первые буквы ойконима «Москва», сервис сразу же предлагает варианты автозаполнения: Московский вокзал, Москва-Сити, Московская станция метро. Эти данные система получает с сервера.

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

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

Fullstack-разработчик

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

Чем занимается веб-разработчик

Представим, что клиент заказал разработку маркетплейса. Чтобы понять, какие задачи при этом решает фронтенд-разработчик, а какие — бэкендер, рассмотрим подробнее этапы работы над проектом ↓

Предварительная работа

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

Команда веб-разработчиков оценивает объём работ, обсуждает задачу с тимлидом и определяет сроки и технологии, которые потребуются на её выполнение. Работа разбивается на задачи — их описание и дедлайны фиксируются в таск-менеджере: Jira, Azure DevOps, Trello, Notion.

Работу над сайтом начинает дизайнер, который на основании требований заказчика разрабатывает макет.

Работа фронтенд-разработчика

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

Затем он приступает к написанию кода. Делать это можно даже в простом цифровом блокноте, но обычно используют специальный редактор или IDE: VS Code, WebStorm.

Код пишут на языке гипертекстовой разметки HTML — он описывает, какие элементы находятся на странице: заголовки, тексты, ссылки, изображения.

С помощью таблицы стилей CSS определяют расположение и оформление этих элементов: цвета, размеры шрифтов и плашек.

Интерактивность на интернет-странице появляется за счёт применения языка программирования JavaScript. Фронтенд-код доступен любому пользователю сайта. Чтобы его увидеть, нужно кликнуть на странице правой кнопкой мыши и выбрать пункт «Просмотреть исходный код страницы» или View page source, если интерфейс браузера на английском.

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

Работа бэкенд-разработчика

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

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

Когда разработчик присоединяется к состоявшемуся проекту, рабочее окружение уже настроено. Тогда бэкендер изучает контекст задачи, исследует логи и предлагает решение, а затем приступает к написанию кода.

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

Вслед за этим бэкенд-разработчик настраивает систему автоматизации — она нужна для запуска тестов при внесении изменений в проект. Успешное тестирование приводит к обновлению кода.

Получив набор HTML, CSS, JavaScript-файлов, специалист приступает к настройке баз данных и обеспечивает их взаимосвязь с внешней частью сайта. Логин, пароль, просмотренные товары, список заказов, содержимое корзины — всё это будет поставляться на фронтенд с серверной части сайта.

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

Профессия

Веб-разработчик с нуля

Узнать больше

• Научитесь программировать на JavaScript и PHP — сможете создавать сайты и веб-приложения
• Соберёте портфолио из 9 проектов
  резюме
• Сможете начать работать по специальности уже через 6 месяцев обучения

Какие знания и навыки нужны веб-разработчику

Хард-скиллы

Чтобы хорошо справляться со своей работой, фронтенд-разработчику нужно:

• Знать язык гипертекстовой разметки HTML, который помогает расположить текст на странице.
• Уметь оформлять текст с помощью таблицы стилей CSS, а также работать с его препроцессором SCSS и постпроцессором PostCSS.
• Знать язык программирования JavaScript, который помогает делать сайты интерактивными.
• Неплохо владеть TypeScript — это язык программирования, который расширяет возможности JavaScript.
• Разрабатывать интерфейсы во фреймворках Angular, Vue, React. Они управляют состоянием отдельных компонентов страницы и обеспечивают мгновенный отклик сайта или веб-приложения.
• Работать с Bootstrap и Tailwind CSS — наборами готовых элементов, которые ускоряют вёрстку простых страниц.
• Разбираться в том, как устроен протокол HTTP — свод правил, по которым происходит обмен данными в интернете, в результате чего пользователи могут просматривать веб-страницы. Это знание позволяет настроить взаимодействие со сторонним веб-сервисом при необходимости.
• Работать с графическими редакторами, такими как Figma, уметь экспортировать изображения и находить размеры элементов.
• Настраивать сборку проекта с помощью Webpack, который разделяет JavaScript- и CSS-код на маленькие по объёму части для упрощения работы.
• Уметь работать с системой контроля версий Git и таск-трекерами, чтобы не потерять замечания коллег и зафиксировать все этапы работы.

Бэкенд-разработчику для успешной работы необходимо:

• Знать язык программирования, который используют в компании: PHP, Python, Ruby, Java, Perl, C#, JavaScript.
• Иметь представление о фреймворках для нужного языка: Django для Python, Symfony, Laravel, Yii2 — для PHP. Фреймворки объединяют технические средства, которые упрощают выполнение какой-либо задачи.
• Уметь работать с асинхронными запросами, которые запрашивают у сервера недостающую информацию и добавляют её на страницу, и кэшированием — промежуточным буфером, в котором хранятся данные.
• Знать паттерны проектирования, то есть типовые решения определённой проблемы при создании программ.
• Иметь представление об основах сетевой безопасности и инструментах её обеспечения.
• Понимать принципы работы веб-серверов Apache, NGINX, IIS. Именно они обеспечивают бесперебойную работу сайта и его взаимодействие с пользователем.
• Уметь работать с пакетными менеджерами — специальными утилитами для добавления сторонних библиотек на сайт и расширения функциональности.
• Знать устройство баз данных и работать с SQL — языком запросов, который помогает получать из базы данных информацию в удобном формате.
• Уметь работать с Git и таск-трекерами.

Фулстек-разработчик совмещает эти знания.

Освоив необходимые навыки, можно получить первую работу: на hh.ru нередко встречаются вакансии для кандидатов без опыта. Новичку для первого трудоустройства нужно владеть HTML, CSS, JavaScript, PHP, mySQL, Git, Figma, а также знать методологию БЭМ и библиотеку Bootstrap. Наличие портфолио необязательно.

Софт-скиллы

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

Коммуникабельность. Даже если вы разработчик-фрилансер и работаете из дома, навыки коммуникации важны. Вам предстоит общаться с заказчиками, делиться опытом с коллегами, презентовать свои идеи, давать обратную связь. Для этого нужно тренировать навык грамотного выражения мысли и учиться соблюдать деловой этикет — как лично, так и по почте. Развить эти скиллы помогут книги «Пиши, сокращай» и «Новые правила деловой переписки» Максима Ильяхова и Людмилы Сарычевой.

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

Внимательность помогает избежать муторного поиска ошибок. Языки программирования капризны: поставишь запятую не там, где нужно, и 200 строк кода не заработают. Поэтому важно развивать умение концентрироваться.

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

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

Где работают и сколько зарабатывают веб-разработчики

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

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

Медианная зарплата на IT-рынке по итогам первого полугодия 2022 года — 140 тыс. рублей в месяц. Фронтенд-специалист, согласно исследованию Хабр Карьеры, получает 140–180 тыс. рублей, бэкенд- и фулстек-разработчики — 150–200 тыс. рублей.

Уровень зарплат при этом определяется сложностью проекта и масштабом самой компании. IT-компания «ААМ Системз» предлагает фронтенд-разработчикам без опыта зарплату в размере 40–90 тыс. рублей:

Разработчик ИИ-решений для ритейла Retail Rocket готов платить веб-разработчикам мидл-уровня зарплату в размере 90–130 тыс. рублей в месяц:

Веб-разработчики уровня сеньор в международном проекте Optimacros получают в месяц от 250 тыс. рублей и выше:

Как попасть в веб-разработку

Веб-программистом можно стать несколькими способами ↓

Окончить вуз

Например, по специальностям «Прикладная математика и информатика» или «Информационные системы и технологии».

Обучиться на курсах дополнительного образования

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

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

• Основы веб-разработки можно освоить на бесплатных курсах «Степика». Там можно узнать, как работает интернет, научиться создавать сайты с помощью HTML и CSS и размещать их в сети, освоить основные инструменты веб-разработчика: редактор кода, отладчик, Google. Курс создан специально для людей, которые никогда не программировали и ничего не знают о работе интернета.

• Курсы для разработчиков есть на Coursera. Можно самостоятельно изучить Python и другие языки программирования и инструменты для создания веб-ресурсов.

• Веб-разработке можно учиться с нуля на курсах Нетологии. Студенты на онлайн-занятиях программируют на JavaScript и PHP, а по итогам курса собирают портфолио из девяти проектов и могут приступать к работе по специальности уже через полгода обучения.

Освоить программу обучения самостоятельно

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

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

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

• Mozilla Developer Network, MDN — хранилище документации и обучающий ресурс для веб-разработчиков, созданный Mozilla в 2005 году. Это единое место для хранения документации об открытых веб-стандартах и собственных проектах Mozilla.

• FreeCodeCamp — некоммерческая организация с интерактивной обучающей веб-платформой, форумом и учебными пособиями по HTML, CSS, JavaScript. На обучающей платформе можно выполнять проектные задания в одиночку или в парах. Уроки содержат как теорию, так и практические задачи.

Что почитать и посмотреть веб-разработчику

• «Новая большая книга CSS» Дэвида Макфарланда — издание, которое поможет поднять навыки работы с HTML и CSS на новый уровень.
• «Совершенный код» Стива Макконнелла — ясное прагматичное руководство, которое синтезировано из самых эффективных методик и наиболее эффективных принципов написания кода.
• «Чистый код» Роберта Мартина — книга, которая поможет писать ясный, удобный для чтения код и не множить сущности без необходимости.
• «JavaScript. Подробное руководство» Дэвида Флэнагана — методичка программиста с большим числом практических примеров и одновременно настольный справочник по широкому кругу вопросов.
• Learn.javascript.ru — современный учебник по JavaScript, который включает в себя много тонкостей и фишек JavaScript/DOM. Подходит для новичков.
• Telegram-каналы «Сайтодел» и «Веб-страница» — на них регулярно публикуют материалы по фронтенду и бекэнду.
• Youtube-канал Google Developers — здесь выкладывают записи мастер-классов, семинаров и докладов с мероприятий для IT-специалистов

Резюмируем

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

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

Специалисты работают как в штате, так на фрилансе. Фронтенд-разработчики в среднем зарабатывают 140–180 тыс. рублей, бэкенд- и фулстек-разработчики — 150–200 тыс. рублей.

Освоить профессию можно в вузе, на онлайн-курсах и самостоятельно.

Читать также

10 вопросов веб-разработчику: действительно ли разработчики получают больше всех, что должен сделать каждый разработчик и кто такой хакер

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

Увидеть интерфейс «глазами дизайнера»: о взаимодействии фронтендера с дизайнером

Мнение автора и редакции может не совпадать. Хотите написать колонку для Нетологии? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.

Старший фронтенд-разработчик Kraftvaerk. Рассказала о профессии

Светлана Рычина

Автор-фрилансер. Упаковала рассказ Анастасии в готовую статью

IT-профессии для девушек: куда поступить после 9-го класса, чтобы реализовать свой потенциал

Сразу оговоримся — мы не делим IT-профессии на мужские и женские. Любой человек независимо от пола может выбрать профессию по своему вкусу. И будет прав! Но так уж вышло, что девушек в IT меньше, чем парней — и можно бесконечно обсуждать, почему это так. Мы не будем! Мы просто расскажем, какие профессии есть, чтобы показать весь спектр возможностей. В помощь — поддерживающие слова опытных IT-специалисток. Если ты спрашиваешь: «А можно в IT?», мы отвечаем: «Конечно!»

Дата-аналитик

Анализирует данные, чтобы помогать бизнесу принимать решения

Аналитик — мозг компании, он обрабатывает данные, чтобы делать на их основе выводы. Данных в мире скопилось уже столько, что дата-аналитиков не хватает! Каждая покупка в интернет-магазине зафиксирована, каждое посещение сайта записано. Всё это данные! Где покупать недвижимость, если открывается новый магазин, какой сериал предложить пользователю на стриминговом сервисе, от чего зависит выбор тарифа такси — всё это может узнать дата-аналитик. Он строит гипотезы, выявляет закономерности и визуализирует результаты исследований.

София Кучмар, архитектор больших данных в компании Inconus, студентка колледжа IThub

Проджект-менеджер

Отвечает за результат

Проджект-менеджер — главный по проекту. Представь себе, что магазину нужно создать продукт, например, мобильное приложение. Одному специалисту тут не справиться, над таким проектом работает целая команда: аналитики, дизайнеры, разработчики, тестировщики, UX-райтеры. Чтобы все они работали слаженно и нужен проджект-менеджер. Он следит за сроками, ставит задачи, разруливает конфликты и держит связь с заказчиком.

Программист

Пишет код на одном из языков программирования

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

Код, выводящий на экран фразу «Hello, world», на языке программирования Python выглядит так: print(‘Hello, world!’). Как вы видите, код — это слова и символы, как в обычном языке. Никакой магии — только торжество логики и алгоритмов.

Анна Щербакова, Senior Software Engineer (старший инженер по разработке ПО) в международной компании-разработчике ERP-систем

Веб-дизайнер

Отвечает за внешний вид сайтов и приложений

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

Впрочем, красота — это далеко не всё. Веб-дизайнер должен думать и о нашем удобстве! На удобном сайте легко найти нужный раздел и прочитать текст — на любом устройстве. Так что просто рисовать, как вздумается, не получится, нужно следовать стандартам, тестировать варианты, делать исследования.

Разработчик веб-сайтов и приложений

Специализируется на сайтах и приложениях

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

Есть веб-разработчики, которые отвечают за то, как сайт выглядит. Их называют фронтенд-разработчиками или фронтендерами. А есть те, кто отвечают за то, как сайт работает. Это бэкендеры! Вы нажимаете на кнопку поиска на Авито (выглядит она чудесно — спасибо фронтендеру) и получаете список товаров, которые вы и искали (тут отлично поработал бэкендер, соединив базу данных объявлений с вашим запросом).

Александра Сурначёва, ведущий преподаватель бизнес-роли «Фронтенд-разработчик», преподаватель JavaScript, HTML и CSS с опытом работы фронтенд-разработчиком на проектах резидентов Сколково и госкорпораций более 12 лет

Разработчик игр

Разрабатывает компьютерные и мобильные игры

Разработчик игр (Game Developer) создаёт игры, что логично. Надо понимать, что над игрой работает множество специалистов — геймдизайнеры, цифровые художники, UX-дизайнеры, копирайтеры, программисты, проджект-менеджеры.

Разработчик игр — это программист. Ещё разработчиков игр называют геймдев-специалистами. Чаще всего программировать с нуля не приходится — используются движки или платформы. Популярная среда для разработки игр называется Unity. Это вроде основы, где можно создавать свои игры. Именно на работе в Unity специализируются студенты колледжа IThub.

Этичный хакер

Ищет слабые места в безопасности систем

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

Екатерина Старостина, архитектор кафедры информационной безопасности, директор по развитию бизнеса компании «Орлан»

Игровой художник

С оздаёт арты для компьютерных игр

Игровой художник — максимально творческая IT-профессия. Художник есть художник. Эти специалисты создают локации, героев, текстуры и спецэффекты для компьютерных игр, а также 3D-модели. Концепт-художники рисуют первые эскизы, которые потом дорабатывают 2D- и 3D-художники. Концепт-художники должны разбираться в разных стилях и находить именно то дизайн-решение, которое будет подходить к той или иной игре. Если любишь рисовать, то здесь тебе будут рады!

Юля Фролова, 2D-художник, студентка колледжа IThub

SMM-менеджер

SMM-менеджер — специалист, который занимается Social Media Marketing, то есть маркетингом в социальных сетях. Социальные сети — мощный инструмент для роста бизнеса: здесь можно продавать товары и услуги, формировать имидж компании и общаться с аудиторией. SMM-менеджер продвигает проекты в социальных сетях «ВКонтакте» и «Одноклассники», ведёт Telegram-каналы и блоги на Яндекс.Дзене — в соответствии с SMM-стратегией. Несмотря на кажущуюся простоту, в профессии SMM-менеджера есть место и довольно серьёзным вещам — аналитике, стратегическому планированию, бренд-менеджменту.

Анастасия Когновицкая, ex-SMM-менеджер колледжа IThub, менеджер по рекламе медиабаингового интернет-агентства Consortium Media

Интернет-маркетолог

Привлекает покупателей в интернете

Интернет-маркетолог — специалист, от которого ждут потенциальных покупателей. Где он их находит? В интернете! Чем больше посетителей на сайте, тем больше продаж! А вот чтобы посетители приходили на сайт, интернет-маркетолог зовёт их туда (буквально заманивает!) интересной и яркой рекламой, пишет письма, отправляет SMS, публикует информацию в каталогах. Работы много!

Кроме этого, нужно проследить, чтобы посетители сайта не уходили разочарованными. Сайт должен ответить на их вопрос: по какой цене и почему я должен здесь купить? Интернет-маркетологу нужно постоянно проверять, не потратил ли он слишком много денег на привлечение одного клиента. Была ли эффективна реклама? Что ещё можно сделать, чтобы повысить количество заявок на сайте? Эти вопросы интернет-маркетолог задаёт себе каждый день.

Закончим наш экскурс в мир IT-профессий монологом нашего эксперта Моны Архиповой — предпринимателя в сфере информационной безопасности. Она начинала свой карьерный путь в 2006 году. По её словам, первые пять лет были «откровенным мраком»: «Шуточки были весьма жесткие и местами жестокие, вроде «девочка, позови сисадмина».

Мона Архипова, сооснователь и COO МИРЦ, независимый консультант по информационной безопасности

Не стесняйся и ты! Если вдруг чувствуешь в себе стремление изучать информационные технологии, никто не может помешать тебе в этом! Приходи к нам в колледж, чтобы убедиться, что девушки в IT ещё как существуют — и добиваются больших успехов. В колледже IThub девушек — почти треть: целых 27%, и количество абитуриенток растёт с каждым годом. В 2022 году по сравнению с 2019-м (за 4 года) доля студенток среди поступивших на 1-й курс выросла в 2,3 раза.

Если хочешь задать вопросы, пиши в чате на сайте или отправь заявку (это ни к чему не обязывает).

1.7. Профессии для создания и обслуживания веб сайтов

Сразу хочу сказать, что здесь никакой воды про профессии для создания и обслуживания веб сайтов, и только нужная информация. Для того чтобы лучше понимать что такое профессии для создания и обслуживания веб сайтов, верстальщик, тестировщик, бекэнд, фронтэнд, фуллстек, программист, devops , настоятельно рекомендую прочитать все из категории Основы интернет и веб технологий. Что нужно знать и уметь современному программист у? чем профессиональный программист отличает от дилетанта? Узнать ответы на эти и многие другие вопросы можно прочитав эту статью. И так, начнем!

Информационная архитектура

Информационная архитектура (англ. Information architecture, часто сокращается до «ИА») — сочетание схем организации, предметизации и навигации, реализованных в информационной системе.

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

• структурирование информации, которая будет представлена на сайте;
• проектирование информационного пространства, способствующее выполнению задач и интуитивному доступу к содержимому.\

Веб-разработка — процесс создания веб-сайта или веб-приложения. Основными этапами процесса являются веб-дизайн, верстка страниц, программирование на стороне клиента и сервера, а также поддержка веб-сервера.

Веб-дизайн

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

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

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

Веб-дизайнер — сравнительно молодая профессия, и профессиональное образование в области веб-дизайна в России пока не распространено. В связи с увеличением спроса на представительство в Сети растет и спрос на дизайн сайтов, увеличивается количество веб-дизайнеров.

Веб-дизайн является одной из основных номинаций в конкурсной программе молодежных Дельфийских игр России.

Объяснение термина

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

Этапы разработки веб-сайта

• Создание технического задания или спецификации

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

• Дизайн основной и типовых страниц сайта

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

При этом дизайнер должен учитывать ограничения стандартов html (не создавать дизайн, который затем не сможет быть реализован стандартными средствами html). Исключение составляет Flash-дизайн.

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

Утвержденный дизайн передается html- верстальщик у, который «нарезает» графическую картинку на отдельные рисунки, из которых впоследствии складывает html-страницу. В результате создается код, который можно просматривать с помощью браузера. А типовые страницы впоследствии будут использоваться как шаблоны.

• Программирование

Далее готовые HTML-файлы передают программисту. Программирование сайта может осуществляться как «с нуля», так и на основе CMS — системы управления сайтом. Веб-разработчики часто называют CMS «движком».

В случае с CMS надо сказать, что сама «CMS» в некотором смысле это готовый сайт, состоящий из заменяемых частей. «Программист» — в данном случае правильно будет назвать его просто специалистом по CMS — должен заменить стандартный шаблон, поставлявшийся с CMS, на оригинальный шаблон. Этот оригинальный шаблон он и должен создать на основе исходного «веб-дизайна».

При программировании сайта специалисту назначаются контрольные точки сроков.

• Завершающим этапом разработки сайта под ключ является, конечно же, тестирование.

Веб-дизайн сайта должен адекватно выглядеть в различных браузерах, особенно в браузерах Internet Explorer, Firefox, Safari, Chrome и Opera.

Internet Explorer (версии 6) по-своему трактовал HTML-стандарты (отголоски старой борьбы за лидерство с Netscape). Этот морально устаревший браузер создавал много проблем для веб-дизайнеров. Многие разработчики даже предлагали отказаться от верстки под IE 6, однако наличие этого браузера в стандартной поставке Windows XP, а значит и его присутствие на многих пользовательских компьютерах, вынуждало веб-дизайнеров тестировать свои проекты в нем. По состоянию на лето 2012 года IE 6 используется на 6 % пользователей, в основном за счет Китая, где его используют 21 % пользователей .

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

Сроки контролирует менеджер проекта. Также на этом этапе привлекают к работе дизайнера, чтобы он провел авторский надзор.

• Размещение сайта в Интернет

Файлы сайта размещают на сервере провайдера и производят нужные настройки. На этом этапе сайт пока закрыт для посетителей.

• Наполнение контентом и публикация

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

• Внутренняя SEO-оптимизация.

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

• Внешняя SEO-оптимизация.

Сводится, как правило, к построению структуры входящих ссылок. Это собственно и есть раскрутка. К разработке сайта внешняя SEO-оптимизация не имеет отношения. Поскольку SEO-оптимизация это разновидность шаманизма — она как магия, классифицируется на «белую» и «черную» — такую, после которой сайт за две недели попадает в топ, а потом в бан. Настоящая белая SEO-оптимизация это трудоемкий и долгий процесс, стоимость которого может в несколько раз превышать расходы на создание сайта.

Заказчик или его доверенное лицо просматривают готовый проект и в случае, если все устраивает, то подписывают документы о сдаче проекта.

Так же на этом этапе производится обучение представителя заказчика навыкам работы в администраторской зоне сайта.

Процесс и результат

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

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

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

Изображение первоначально может быть векторным или растровым, выполненным в Adobe Illustrator, Adobe Photoshop, GIMP или другом визуальном редакторе(например, Scribus или Inkscape), но для верстальщика изображение, как правило, переводится в растровый формат.

Для демонстрации клиенту изображение обычно переводится в простой однослойный и привычный формат изображений.

Юзабилити

Удобство использования, Юзабилити (англ. usability — дословно «возможность использования», «способность быть использованным», «полезность») — понятие в микроэргономике, эргономическая характеристика степени удобности предмета для применения пользователями при достижении определенных целей в некотором контексте . Термин имеет связь с понятием «эргономичность», но в отличие от последнего меньше ассоциируется с технической эстетикой, с внешним видом и более привязан к утилитарности используемого объекта .

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

Официальное определение

Международный стандарт ISO 9241-11 определяет юзабилити как

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

При этом относительная важность всех трех аспектов определяется этим самым контекстом.

Особенности при употреблении в русском языке

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

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

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

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

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

Верстка веб-страниц

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

Методы верстки

Табличная верстка

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

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

Блочная верстка

Верстка при помощи блоков (тег div ) и описывающих их таблиц стилей (CSS). Реализует концепцию семантичной верстки.

Фреймовая верстка

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

По принципам использования средств разметки HTML различают логическую разметку и презентационную (физическую).

Например, курсивный текст можно получить как с помощью тега , так и с помощью тега .

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

Иными словами, при первом подходе ориентируются на внешний вид, а во втором — на логическое предназначение.

Преимуществом второго подхода является независимость верстки от используемого типа устройств и дизайна веб-страниц.

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

Все сайты, по макету верстки, можно разделить на три принципиальные группы:

• жестко фиксированные (Rigid fixed),
• адаптивные резиновые (Adaptable fluid)
• расширяемые эластичные (Expandable elastic) макеты.

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

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

Адаптивная верстка/тип макета — дизайн, который подстраивается (адаптируется) под размер экрана, в том числе может происходить перестройка блоков с одного места на другое, или их замена блоками отображаемыми только при определенном разрешении. Адаптивная верстка пришла на смену идеи создания специальных мобильных версий сайта, «живущих» на отдельных поддоменах (например, m.wikipedia.org).

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

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

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

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

• Сайт будет отображаться при разных размерах экрана так, как это наиболее удобно пользователю;

• Требует тщательной проработки нескольких макетов, для различных размеров экранов.

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

Табличная верстка

Преимущества и недостатки

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

Проблема возникает при множественной вложенности таблиц, что характерно для достижения определенных эффектов на веб-странице. Рост количества таблиц повышает шанс возникновения ошибок при верстке, увеличивает размер документов и снижает скорость загрузки файлов. Применение визуальных редакторов, вродеAdobe Dreamweaver или Microsoft FrontPage, для создания и правки документов облегчает работу с таблицами, но из-за обилия их параметров и в этом случае разработчики не застрахованы от появления ошибок и лишней работы, связанной с индивидуальным редактированием каждой таблицы.

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

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

При использовании таблиц широко известным приемом стало применение распорок — прозрачных изображений высотой в один пиксель. Само изображение не отображается на веб-странице, но его можно масштабировать в любых пределах. Получается невидимая палочка определенной ширины или высоты, которая не дает ячейкам таблицы сблизиться меньше, чем на заданное расстояние. Распорки особенно были актуальны для браузера Netscape, который не показывал фон ячейки, если в ней ничего не размещалось. Чтобы избавиться от указанной особенности, и помещали в ячейку маленький прозрачный рисунок в формате GIF.

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

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

Блочная верстка

При этом придерживаются следующих принципов.

• Разделение содержимого и оформления;
• Активное применение тега div;
• Таблицы применяются только для представления табличных данных.

Слои можно размещать в окне браузера с точностью до пикселя. Положение слоя задается двумя координатами относительно любого угла окна браузера, родительского элемента или документа.

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

Свойства слоя удобно задавать и настраивать через стили. Возможности CSS расширяют спектр оформительских изысков. Использование стилевых таблиц позволяет несложными методами получить компактный и эффективный код.

Более современные версии браузеров стали строже придерживаться стандартов и содержать средства по работе со слоями.

Преимущества и недостатки

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

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

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

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

Основные профессии для создания сайта

• Информационный архитектор
• Веб-дизайнер
• Юзабилити-инженер
• Верстальщик веб-страниц
• Программист
• тестировщик
• Поисковый оптимизатор
• Копирайтер (писатель), контент-менеджер

Нередко веб-специалисты совмещают в себе сразу несколько специальностей.

Также веб разрабочиков услов разделяют на бекэнд фронтэнд и фулстек.

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

— Backend – так называется все, что, так или иначе, связано с сервером, с вычислениями на сервере, а также с хранением информации на нем. К примеру, если вы в поисковике ищете информацию, результаты выдачи формируются именно сервером. Все это задачи backend-разработчиков.

Во frontend и backend есть собственные технологии и собственные языки программирования, и для работы с ними необходимо владеть этими языками. И если программист прекрасно разбирается в обоих направлениях, если он легко выполняет задачи, связанные и с frontend, и с backend – тогда этого программиста и называют фулстек-разработчиком.

Так что fullstack программист – специалист-универсал, способный и сверстать дизайн сайта, и настраивать функционирование форм и кнопок, и писать серверную часть, плюс и собственно сервер настроить сможет. Такой программист в одиночку создает веб-сервис, заменяя собой 3-4 более узких специалистов.

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

Верстальщик

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

Версткой веб-страниц занимаются верстальщики. В общем случае в задачу верстальщика входят:

• создание кода веб-страницы с помощью соответствующего языка разметки. Таковыми могут быть, например, HTML, XHTML, XML.
• оформление ранее созданного кода страницы с помощью встроенных средств языка разметки, либо же с помощью каскадных таблиц стилей CSS

Инструменты верстальщика

Верстальщик использует следующее ПО:

• текстовый редактор или редактор HTML для написания и редактирования кода
• графическая программа для так называемой «нарезки» графического макета, полученного верстальщиком от веб-дизайнера

А также иногда прибегает к помощи:

• WYSIWYG редакторов, в которых пользователь располагает все элементы, которые должны были быть получены с помощью HTML, используя графический интерфейс пользователя. После чего программа преобразует визуальное представление в HTML код. В данном случае автору не обязательно обладать исчерпывающим знанием HTML.
• программы автоматической верстки сайтов, которые извлекают слои с изображениями и текстом из дизайн-макета, созданного в графическом редакторе Adobe Photoshop и формируют из этих слоев HTML код. Таким образом создается базовый каркас веб страницы, готовый к последующей доработке.

Использование WYSIWYG редакторов и программ автоматической верстки часто осуждается из-за низкого качества получаемого кода. Тем не менее, зачастую для пользователей их использование удобнее ручного кодирования, а также не требуют глубокого знания HTML, и поэтому широко используются.

Должностные обязанности html-верстальщика включают в себя:

• Верстка шаблонов под стационарные мониторы и мобильные устройства (на основе готовых psd-макетов).
• Верстка е-мейл рассылок и промо-страниц.
• Интеграция шаблонов в CMS.
• Программирование на JavaScript и AJAX.

Валидность HTML-верстки

Валидность HTML-верстки — это ее соответствие стандартам организации The World Wide Web Consortium (W3C). Отсутствие ошибок в верстке документа — один из основных показателей качества верстки. Автоматическая проверка верстки на ошибки может быть проведена как с помощью онлайн сервиса W3C, так и различными программами «валидаторами». Разные версии спецификации HTML предполагают различный синтаксис, поэтому тест верстки на валидность должен обязательно учитывать ее Document Type.

Программист

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

Место программирования в обществе

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

Продолжение:

См.также

• Веб-разработка
• Продвижение сайта
• компьютерные науки
• тестировщик , qa ,
• спеациальность qa , тестировщик ,
• геймдизайнер , программист ,
• agile , бизнес аналитик ,
• веб-программист , web программист ,
• главный программист ,
• веб-программист , web программист ,
• матрица компетенций , диаграммы компетенций ,

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

Ответы на вопросы для самопроверки пишите в комментариях, мы проверим, или же задавайте свой вопрос по данной теме.