Веб разработка и веб дизайн: WEB дизайн и WEB разработка в чём разница и отличие – как правильно выбрать курсы и программы обучения

WEB дизайн и WEB разработка в чём разница и отличие

Привет, Друзья! Сегодня мы поговорим о том, что такое WEB дизайн и WEB разработка и в чём между ними разница. Итак поехали!

WEB дизайн и WEB разработка в чём разница и отличие

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

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

Что такое WEB дизайн

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

Инструменты и профессиональные навыки, которые отличают WEB-дизайнера от веб-разработчика:

1. Выполнение многоэтапного и сложного графического дизайна.
2. Размещение различных кнопок, всплывающих окон, рекламных баннеров и форм для подписки на сайте.
3. Применение для проектирования профессионального программного обеспечения (Photoshop, Illustrator).
4. Использование готовых стилей и компонентов для создания уникального внешнего вида сайта.
5. Брендинг, развитие корпоративного стиля, формирование запоминающегося дизайна логотипа.
6. Создание макетов, каркасов и раскадровок отдельных веб-страниц.
7. Добавление анимированных компонентов.
8. Адаптивный дизайн, обеспечивающий комфортный просмотр сайта на различных устройствах.

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

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

Что такое WEB разработка

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

Процесс WEB-программирования можно разделить на две категории:

1. Внешняя или клиентская разработка (front-end) – это код, отвечающий за определение того, как веб-сайт будет фактически отображать разработанные дизайнером макеты и выбранные графические компоненты.
2. Внутренняя или серверная разработка (back-end) – отвечает за управление базами данных. Благодаря правильному программированию сайт будет открывать доступ к определенному контенту, обеспечивая получение и передачу данных на внешний интерфейс для последующего отображения.

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

В своей работе WEB-разработчики используют:

1. Технологии по кодированию с применением HTML и языков программирования.
2. Таблицы стилей CSS для формирования внешнего вида документов.
3. Объектно-ориентированный язык программирования JavaScript.
4. Препроцессоры CSS (Less, Stylus или Sass).
5. Фреймворки и библиотеки стилей (AngularJS, JQuery, ReactJS, Ember).
6. Распределённые системы управления версиями Git и GitHub.
7. Разнообразные тактовые редакторы, а также расширения и плагины для браузеров.

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

WEB-дизайн или WEB-разработка что выбрать

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

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

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

Обучение SEO

Более подробно о том, как выводить сайты в ТОП 10 поисковых систем Яндекс и Google, я рассказываю на своих онлайн-уроках . Все свои интернет-проекты я вывел на посещаемость более 1000 человек в сутки и могу научить этому Вас. Кому интересно обращайтесь!

На этом всё, всем удачи и до новых встреч!

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

От автора: как и любой другой индустрии, Интернету нужны мастера, которые будут над ним работать. Одной специальности здесь мало. Кто-то должен придумать концепт, кто-то оформить идею в рабочий макет, а кто-то — взять и построить приложение. Чтобы выполнить весь комплекс работ, люди должны владеть навыками и иметь соответствующий способ мышления: креативный художник или изобретательный программист. Если вы тоже не раз задавались вопросом «web дизайн и web разработка: что из этого моё?», значит, информация из статьи вам поможет определить дальнейший вектор развития.

Граница между дизайном и разработкой

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

Дизайн — это тоже разработка?

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

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

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

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

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

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

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

Программист-разработчик

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

Навыки специалиста

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

Начни с простого: первые шаги веб-разработчика

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

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

Представим, что вы уже знаете спарку HTML/CSS. Если еще нет, то потратьте на технологии два дня, и они у вас в кармане. Нет разницы, даже если вы хотите стать дизайнером. Такой навык не помешает, ведь даст понимание того, как будут расположены элементы макета в будущем.

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

В случае стремления к чему-то другому изучите один из языков для бэкенда. Это может быть веб-язык PHP или любой из языков программирования общего назначения. Советуем выбрать Java, Python или C/C#/C++. Дело не в том, что они лучше, чем PHP (быстрые и мощные), а в том, что с такими знаниями легче реализовать себя в альтернативных сферах. Ну, а если судьба заставит работать с PHP, то со знанием «взрослого» PL, обучение на «препроцессоре» не займет больше недели.

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

Что постигнуть дизайнеру?

Photoshop, Illustrator, GIMP или любой другой графический редактор. Разница лишь в том, что именно вы хотите рисовать и какой из интерфейсов выучите быстрее всего. В любом случае, начать лучше с Photoshop. Он наиболее универсален из всех представленных на рынке.

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

А если одновременно?

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

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

Шанс для оффлайна

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

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

Вот и все! Выбирайте то, что по душе, и развивайтесь в выбранном направлении!

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Освойте востребованные навыки дизайн и верстки

Комплексный процесс дизайна и верстки на примере лендинга!

Смотреть

Веб-разработка — Википедия

Материал из Википедии — свободной энциклопедии

Текущая версия страницы пока не проверялась опытными участниками и может значительно отличаться от версии, проверенной 4 февраля 2018; проверки требуют 17 правок. Текущая версия страницы пока не проверялась опытными участниками и может значительно отличаться от версии, проверенной 4 февраля 2018; проверки требуют 17 правок.

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

На сегодняшний день существуют несколько этапов разработки веб-сайта:

В зависимости от текущей задачи, какие-то из этапов могут отсутствовать.

Создание технического задания

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

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

1. Цели и назначение сайта.   
2. Аудитория сайта.
3. Технические характеристики.
4. Содержание сайта (структура сайта с подробным описанием элементов и функций каждой страницы).
5. Интерактивные элементы и сервисы (формы обратной связи, поиск на сайте, форум на сайте).
6. Формы (отправки на почту, подписки на рассылку, обратной связи).
7. Система управления содержимым (контентом).
8. Требования к материалам.
9. Перенос на хостинг.

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

Начинается работа с создания дизайна, обычно в графическом редакторе. Дизайнер создаёт один или несколько вариантов дизайна, в соответствии с техническим заданием. При этом отдельно создаётся дизайн главной страницы, и дизайны типовых страниц (например: статьи, новости, каталог продукции). Собственно «дизайн страницы» представляет собой графический файл, слоеный рисунок, состоящий из наиболее мелких картинок-слоев элементов общего рисунка.
При этом дизайнер должен учитывать ограничения стандартов HTML (не создавать дизайн, который затем не сможет быть реализован стандартными средствами HTML). Исключение составляет Flash-дизайн.
Количество эскизов и порядок их предоставления оговаривается с проект-менеджером. Также менеджер проекта осуществляет контроль сроков. В больших веб-студиях в процессе участвует арт-директор, который контролирует качество графики. Этап также заканчивается утверждением эскиза заказчиком.

HTML-верстка

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

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

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

Завершающим этапом разработки сайта является тестирование

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

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

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

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

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

К стандартным текстовым блокам относятся:

• header сайта;
• footer сайта;
• навигационная цепочка, или «хлебные крошки».

Основные элементы текстового блока:

1. заголовки 1, 2 и 3 уровней;
2. изображения;
3. изображения в тексте;
4. галереи;
5. текст;
6. раскрывающийся блок текста, который содержит заголовок;
7. нумерованные и ненумерованные списки;
8. таблицы;
9. файлы для скачивания;
10. видео.

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

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

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

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

Сдача проекта

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

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

1. ↑ Веб-дизайн сайта должен адекватно выглядеть в различных браузерах, особенно в браузерах Internet Explorer, Firefox, Safari, Chrome и Opera.
   Ранее Internet Explorer (версии 6) по-своему трактовал HTML-стандарты (отголоски старой борьбы за лидерство с Netscape). Этот морально устаревший браузер создавал много проблем для веб-дизайнеров. Многие разработчики даже предлагали отказаться от верстки под IE 6, однако наличие этого браузера в стандартной поставке Windows XP, а значит и его присутствие на многих пользовательских компьютерах, вынуждало веб-дизайнеров тестировать свои проекты в нём.

• Марко Беллиньясо. Разработка Web-приложений в среде ASP.NET 2.0: задача — проект — решение = ASP.NET 2.0 Website Programming: Problem — Design — Solution. — М.: «Диалектика», 2007. — С. 640. — ISBN 0-7645-8464-2.
• Олищук Андрей Владимирович. Разработка Web-приложений на PHP 5. Профессиональная работа. — М.: «Вильямс», 2006. — С. 352. — ISBN 5-8459-0944-9.
• Гото Келли, Котлер Эмили. Веб-редизайн, 2-е издание. — СПб.: «Символ-Плюс», 2006. — С. 416. — ISBN 5-93286-082-0.

Веб-дизайн vs. Веб-разработка

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

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

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

Внешний вид

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

Контент

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

Функциональность

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

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

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

Есть и другие “backend” приложения, которые являются невидимыми для посетителей, например, формы обработки, управления контентом и другие программы управления, которые позволяют непрограммистам поддерживать некоторые аспекты данных веб-сайта.

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

Юзабилити

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

• Передает ли внешний вид надлежащий образ/имидж веб-сайта?
• Является ли навигация легкой и понятной для пользования?
• Приводит ли навигация посетителя туда где им нужно оказаться?
• Быстро ли загружается веб-сайт?
• Работают ли приложения должным образом?

Дизайн vs Разработка

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

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

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

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

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

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

15-03-2016

Проектирование и разработка веб структуры сайтов и приложений: основные правила

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

Приложение и сайт: есть ли разница в структуре

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

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

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

Многогранная структура

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

Все, из чего состоит сайт

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

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

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

система управления базой данных. Это компонент web-структуры, который хранит всю необходимую информацию для работы приложения. Новичкам сложно понять, для чего он нужен: можно ведь просто создать папку с нужными файлами и ссылаться на них в коде. Но если бы такой подход использовали при создании ВКонтакте, вы бы увидели этот сайт примерно в 2028 году. К тому же, работал бы он медленно и не всегда корректно. СУБД позволяет не только оперативно работать с готовыми данными, но и постоянно пополнять базу. Наиболее популярными СУБД являются MySQL и MariaDB.

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

Для каждой из сторон этого процесса характерны свои языки программирования. Для фронтенда это формальные HTML/CSS + JavaScript. Для серверной части все гораздо разнообразнее. По сути, на «бэке» можно использовать любой из языков общего назначения, но, как правило, это PHP, Java, Python, Ruby и С-подобные PL.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Семантическая структура

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

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

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

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

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

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

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

Файлы в системе

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

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

На самом деле, не существует универсального совета по созданию толковой структуры для сайта. Но некоторым принципам все же нужно следовать. Для начала необходимо распределить данные по категориям. Не стоит хранить музыкальное оформление, иллюстрации и видеоролики в «корне» вместе с index.html. Будет намного лучше, если для каждого вида данных вы создадите отдельную папку. Еще лучше, если внутри таких папок вы создадите еще и подвиды.

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

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

Структурный помощник

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Разработка веб-приложения на PHP

Создайте веб-приложение на PHP на примере приема платежей на сайте

Смотреть

Теория дизайна сайта для веб-разработчиков.

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

Теория дизайна и веб-разработка

Попытка предложить хорошую креативную разработку может показаться легкой тому, кто посещал школу дизайна, но не 90% веб-разработчиков, никогда не ходивших на дизайнерские курсы или в школу и возникающих в основном либо из разработчиков, либо, как правило, из недизайнерской среды. Вопрос остается открытым… что на самом деле определяет хороший веб-дизайн? Только талант? Человек, владеющий неким «особенным» зрением, которому известно, что сработает, а что не? Или за всем этим имеется логический и научный подход, который может привести дизайнеров, критиков и даже клиентов к идее отличного дизайна.

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

Принцип гештальта

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

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Посмотрите на это изображение…

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

Теперь попробуем увидеть, что в действительности детали не имеют никакого значения; посмотрите на эти два примера:

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

Черная птичка в верхнем левом углу смотрит в обратную сторону

Мужчина слева в другой сомбреро (шляпе)

Палочка мужчины перевернута и немного темнее

Камни тротуара внизу справа на втором изображении больше

Женщина смотрит в обратном направлении

Здесь эти различия на самом деле никак не повлияли на общий вид изображения… давайте рассмотрим другой простой пример:

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

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

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

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

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

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

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

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

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

Ладно, давайте взглянем на некоторые идеи и их силуэты:

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

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

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

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

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

Автор: Ahmed Hussam

Источник: http://webdesign.tutsplus.com/

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: [email protected]

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

Лекции Технотрека. Основы веб-разработки (весна 2016) / Mail.ru Group corporate blog / Habr

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

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

В качестве инструментария студенты в ходе курса обзорно знакомятся с администрированием nginx, MySQL и Redis, разработкой на Django и использованием таких библиотек и продуктов, как Centrifugo, Gunicorn, Celery, Elasticsearch. Кроме того, разбираются основы верстки и работы CSS-фреймворками и JS-компонентами. Курс ведут Илья Стыценко (разработчик в подразделении внутренней информационной разработки) и Денис Исаев (руководитель группы программистов C/C++ в Почте Mail.Ru). Более подробно — под катом.

В первой лекции рассказывается, кому и зачем действительно нужна web-разработка, как строится проект (от наличия ТЗ и до выкладки на боевые сервера). Рассматриваются назначение и принципы работы сети в целом и сетевых протоколов (DNS, IP, TCP, HTTP/HTTPS).

В основе этого занятия несколько тем: основы UNIX-систем, способы серверной работы с сокетами, схема устройства работы web-серверов (и обработки сетевых соединений), администрирование nginx как web-сервера и использование gunicorn как сервера приложений.

Представляем студентам понятие web-фреймворка. Рассказываем о том, какие они бывают и чем отличаются друг от друга. Разбираем парадигму MVC и её применение в Django. Изучаем базовые особенности django и каждого из компонентов, начинаем строить модели данных и readonly-часть будущего проекта.

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

Рассматриваем верстку. Простая тема о принципах рендера в современных браузерах, студенты знакомятся с HTML, CSS, DOM-моделью. Даем самые основы применения JavaScript и jQuery.

Агрегирование данных в БД, AJAX-запросы и JSON, generic-связи между моделями, management-команды Django.

Лекция посвящена обзорным темам о том, что и почему мы делаем в web-разработке: архитектуре серверов, real-time в web-приложениях (применяем websockets, используя Centrifugo), очередям (используем Celery), поиску по сайту (Elasticsearch, Sphinx, Haystack, вот это всё). Рассматриваем вопрос кеширования в Django и в web-проектах в целом.

Заключительная лекция. Вы узнаете, как мы выкатываем сайты на продакшн: выбираем домен, имя и сервер; работаем с сервером (SSH/терминал, мониторинг, логи, backup, безопасность и т.д.). И чуть-чуть о SEO. Просто так, на десерт.

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

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

Илья Стыценко зарегистрирован на Хабре как sat2707 и, если у вас есть вопросы, сможет ответить в комментариях.