разработка — это… Что такое Веб-разработка?



Веб-разработка

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

Основные этапы веб-разработки

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

• Проектирование сайта или веб-приложения (сбор и анализ требований, разработка Технического Задания, проектирование интерфейсов)
• Разработка креативной концепции сайта
• Программирование (разработка функциональных инструментов) или интеграция в систему управления содержимым (CMS)
• Создание дизайн-концепции сайта
• Создание макетов страниц
• Создание мультимедиа и FLASH-элементов
• Вёрстка шаблонов и страниц
• Оптимизация и размещение материалов сайта
• Тестирование и внесение корректировок
• Открытие проекта на публичной площадке
• Обслуживание работающего сайта или его программной основы

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

Основные профессии

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

Литература

• Марко Беллиньясо. Разработка 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

Ссылки

Категории:

• Всемирная паутина
• Веб-разработка

Wikimedia Foundation.
2010.

• Союз Т-11
• Китаб

Смотреть что такое «Веб-разработка» в других словарях:

• Веб-сайт — Запрос «сайт» перенаправляется сюда; см. также другие значения. Веб сайт (от англ. website: web  «паутина», «сеть» и site  «место», букв. «место в сети») или просто сайт  в компьютерной сети объединённая под одним адресом (доменным …   Википедия

• Разработка веб-сайтов — Веб разработка процесс создания веб сайта или веб приложения. Термин включает разработку приложений электронной коммерции, веб дизайн, программирование для веб на стороне клиента и сервера, а также конфигурирование веб сервера. Содержание 1… …   Википедия

• Веб-разработчик — Веб разработка процесс создания веб сайта или веб приложения. Термин включает разработку приложений электронной коммерции, веб дизайн, программирование для веб на стороне клиента и сервера, а также конфигурирование веб сервера. Содержание 1… …   Википедия

• Разработка — может означать: Процесс проектирования и конструирования изделия (см. Разработка нового продукта и Разработка с общедоступными наработками) Итеративная разработка Разработка алгоритмов Разработка программного обеспечения Разработка приложений для …   Википедия

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

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

• Веб-приложение — Веб приложение  клиент серверное приложение, в котором клиентом выступает браузер, а сервером  веб сервер. Логика веб приложения распределена между сервером и клиентом, хранение данных осуществляется, преимущественно, на сервере, обмен… …   Википедия

• Веб-приложения — Веб приложение клиент серверное приложение, в котором клиентом выступает браузер, а сервером веб сервер. Браузер может являться реализацией так называемых тонких клиентов. Браузер способен отображать веб страницы и, как правило, входит в состав… …   Википедия

• Веб-шаблон — является инструментом для отделения содержимого от визуального представления в веб дизайне, для массового создания веб документов. Это основной компонент системы веб шаблонов (англ.)русск.. Веб шаблоны используют для создания сайтов любого… …   Википедия

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

Книги

• Веб-разработка Исчерпывающее руководство, Макдональд М.. Можно без труда создать добротный веб-сайт, вооружившись обычным компьютером и некоторыми амбициями. Хотите сделать собственный блог, интернет-магазин, форум, ресурс с рекламой мероприятия?… Подробнее  Купить за 1585 руб
• Javascript и jQuery. Интерактивная веб-разработка, Дакетт Джон. Эта книга предназначена для веб-дизайнеров и программистов, контент-менеджеров и редакторов контента, маркетологов и менеджеров по электронным продажам, блогерови любителей. Мы не только… Подробнее  Купить за 1029 грн (только Украина)
• Веб-разработка с применением Node и Express Полноценное использование стека JavaScript, Браун И.. JavaScript— самый популярный язык написания клиентских сценариев. Это основополагающая технология для создания всевозможных анимаций и переходов. Без JavaScript практически невозможно… Подробнее  Купить за 917 руб

Другие книги по запросу «Веб-разработка» >>

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 человек в сутки и могу научить этому Вас. Кому интересно обращайтесь!

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

Как работают веб-приложения / Хабр

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

1. Чем веб-приложения отличаются от сайтов

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

Сайты содержат различную статику, которая как и HTML-файл не генерируется на лету. Чаще всего это картинки, CSS-файлы, JS-скрипты, но могут быть и любые другие файлы: mp3, mov, csv, pdf.

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

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

2. Какие бывают веб-приложения

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

1. Backend (бэкенд или серверная часть приложения) работает на удаленном компьютере, который может находиться где угодно. Она может быть написана на разных языках программирования: PHP, Python, Ruby, C# и других. Если создавать приложение используя только серверную часть, то в результате любых переходов между разделами, отправок форм, обновления данных, сервером будет генерироваться новый HTML-файл и страница в браузере будет перезагружаться.
2. Frontend (фронтенд или клиентская часть приложения) выполняется в браузере пользователя. Эта часть написана на языке программирования Javascript. Приложение может состоять только из клиентской части, если не требуется хранить данные пользователя дольше одной сессии. Это могут быть, например, фоторедакторы или простые игрушки.
3. Single page application (SPA или одностраничное приложение). Более интересный вариант, когда используются и бэкенд и фронтенд. С помощью их взаимодействия можно создать приложение, которое будет работать совсем без перезагрузок страницы в браузере. Или в упрощенном варианте, когда переходы между разделами вызывают перезагрузки, но любые действия в разделе обходятся без них.

3. Pyhon-фреймворк Django aka бэкенд

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

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

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

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

Данные в БД можно создавать, читать, изменять и удалять. Иногда для обозначения этих действий можно встретить аббревиатуру CRUD (Create Read Update Delete). Для запроса к данным в БД используется специальный язык SQL (structured query language).

В Джанго для работы с БД используются модели (model). Они позволяют описывать таблицы и делать запросы на привычном разработчику питоне, что гораздо удобнее. За это удобство приходится платить: такие запросы медленнее и ограничены в возможностях по сравнению с использованием чистого SQL.

Полученные из БД данные подготавливаются во вью к отправке на фронт. Они могут быть подставлены в шаблон (template) и отправлены в виде HTML-файла. Но в случае одностраничного приложения это происходит всего один раз, когда генерируется HTML-страница, на который подключаются все JS-скрипты. В остальных случаях данные сериализуются и отправляются в JSON-формате.

4. Javascript-фреймворки aka фронтенд

Клиентская часть приложения — это скрипты, написанные на языке программирования Javascript (JS) и исполняемые в браузере пользователя. Раньше вся клиентская логика основывалась на использовании библиотеки JQuery, которая позволяет работать с DOM, анимацией на странице и делать AJAX запросы.

DOM (document object model) — это структура HTML-страницы. Работа с DOM — это поиск, добавление, изменение, перемещеие и удаление HTML-тегов.

AJAX (asynchronous javascript and XML) — это общее название для технологий, которые позволяют делать асинхронные (без перезагрузки страницы) запросы к серверу и обмениваться данными. Так как клиентская и серверная части веб-приложения написаны на разных языках программирования, то для обмена информацией необходимо преобразовывать структуры данных (например, списки и словари), в которых она хранится, в JSON-формат.

JSON (JavaScript Object Notation) — это универсальный формат для обмена данными между клиентом и сервером. Он представляет собой простую строку, которая может быть использована в любом языке программирования.

Сериализация — это преобразование списка или словаря в JSON-строку. Для примера:

Словарь:

    {
        'id': 1, 
        'email': '[email protected]'
    }

Сериализованная строка:

    '{"id": 1, "email": "[email protected]"}'

Десериализация — это обратное преобразование строки в список или словарь.

С помощью манипуляций с DOM можно полностью управлять содержимым страниц. С помощью AJAX можно обмениваться данными между клиентом и сервером. С этими технологиями уже можно создать SPA. Но при создании сложного приложения код фронтенда, основанного на JQuery, быстро становится запутанным и трудно поддерживаемым.

К счастью, на смену JQuery пришли Javascript-фреймворки: Backbone Marionette, Angular, React, Vue и другие. У них разная философия и синтаксис, но все они позволяют с гораздо большим удобством управлять данными на фронтенде, имеют шаблонизаторы и инструменты для создания навигации между страницами.

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

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

5. Как клиент и сервер общаются между собой

Общение клиента с сервером происходит по протоколу HTTP. Основа этого протокола — это запрос от клиента к серверу и ответ сервера клиенту.

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

Современные веб-приложения используют протокол HTTPS, расширенную версию HTTP с поддержкой шифрования SSL/TLS. Использование шифрованного канала передачи данных, независимо от важности этих данных, стало хорошим тоном в интернете.

Есть еще один запрос, который делается перед HTTP. Это DNS (domain name system) запроc. Он нужен для получения ip-адреса, к которому привязан запрашиваемый домен. Эта информация сохраняется в браузере и мы больше не тратим на это время.

Когда запрос от браузера доходит до сервера, он не сразу попадает в Джанго. Сначала его обрабатывает веб-сервер Nginx. Если запрашивается статический файл (например, картинка), то сам Nginx его отправляет в ответ клиенту. Если запрос не к статике, то Nginx должен проксировать (передать) его в Джанго.

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

После того как Джанго обработал запрос, он возвращает ответ c HTML-страницей или данными, и код ответа. Если все хорошо, то код ответа — 200; если страница не найдена, то — 404; если произошла ошибка и сервер не смог обработать запрос, то — 500. Это самые часто встречающиеся коды.

6. Кэширование в веб-приложениях

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

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

• В Джанго пришел запрос на получение данных для графика в отчете. Мы достаем из БД данные, подготавливаем их и кладем в БД с быстрым доступом, например, memcached на 1 час. При следующем запросе мы сразу достанем их из memcached и отправим на фронтенд. Если мы узнаём, что данные перестали быть актуальными, мы их инвалидируем (удаляем из кэша).
• Для кэширования статических файлов используются CDN (content delivery network) провайдеры. Это серверы, расположенные по всему миру и оптимизированные для раздачи статики. Иногда бывает эффективнее положить картинки, видео, JS-скрипты на CDN вместо своего сервера.
• Во всех браузерах по умолчанию включено кэширование статических файлов. Благодаря этому, открывая сайт не в первый раз, все загружается заметно быстрее. Минус для разработчика в том, что со включенным кэшем не всегда сразу видны изменения сделанные в коде.

Лекции Технотрека. Основы веб-разработки (весна 2016) / Блог компании Mail.ru Group / Хабр

Продолжаем публикацию наших образовательных материалов. Этот курс посвящен разработке 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 и, если у вас есть вопросы, сможет ответить в комментариях.

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

От автора: как и любой другой индустрии, Интернету нужны мастера, которые будут над ним работать. Одной специальности здесь мало. Кто-то должен придумать концепт, кто-то оформить идею в рабочий макет, а кто-то — взять и построить приложение. Чтобы выполнить весь комплекс работ, люди должны владеть навыками и иметь соответствующий способ мышления: креативный художник или изобретательный программист. Если вы тоже не раз задавались вопросом «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 на практическом примере по созданию веб-приложения

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

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

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

Смотреть

выбери себе приключение / Блог компании Авито / Хабр

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

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

upd — немного дополнил текст до ката.

Предположим, что я и мой друг Валерка решили сделать стартап. Uber for X, или там еще что-нибудь в таком духе. Собрались в баре, обсудили эту идею, клёвая тема. Надо сделать. Три месяца не спали, не ели, не выходили из дома. Разрабатывали. Запустили и поняли, что это никому не нужно.

Печаль. Попробуем еще раз. На этот раз мы изучили рынок, посмотрели, какие потребности у пользователей, какие проблемы. Мы сделали какой-то прототип совсем на коленке, быстро и бесплатно за два вечера. Прототип взлетел. Круто, идем дальше.

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

Язык

По порядку. На каком языке писать? Можно взять модный функциональный: Haskell, Erlang, Lisp (очень модный среди дедушек старше 70). Либо очередного убийцу JS, который очень клевый, компилируется в JS, имеет все нужные фичи. Но скорее всего, нам некого будет нанимать через год, потому что очередной убийца JS не взлетит, и придется переучиваться заново или переписывать проект.

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

Еще варианты? Можно взять Perl, но тогда будет некого нанимать ещё вчера. Ещё?

Java. Java — норм. Как язык не очень, на мой субъективный взгляд, но JVM — отличная виртуальная машина, все ок, быстро работает, но железа все равно нужно много. А ещё пока мы на Java писали абстрактный билдер фабрики стратегий вместо того, чтобы делать фичи, пользователи ушли к конкурентам.

Ладно, у нас есть еще Python. В принципе, у него всё ок. Но мы запускаем приложение на Python, оно использует одно ядро из 56, в остальном… все ок. Либо можно взять что-то современное: Go, Rust, еще что-то. Но они слишком низкоуровневые, и мы просто долго делаем фичи… Какой-нибудь язык нам всё равно придется выбрать. Пусть в итоге это будет JS, сойдет.

База данных

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

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

Ладно. Базу взяли какую-нибудь, бахнули перед ней ORM, чтобы проще было с одного SQL на другой переезжать. Когда-нибудь (spoiler: никогда).

Архитектура

Какую взять архитектуру? Ребята на Хабре пишут, что микросервисы – это клёво. Олег Бунин говорит: «берите микросервисы».

Если начать с микросервисов, то с восьмидесятипроцентной вероятностью границы у них будут неправильные, потому что не до конца продумали доменную модель и плохо поняли, где надо резать, а где не надо. Плюс все берут микросервисы, деплоят их пачками по всему своему кластеру, и через месяц возникает вопрос: «а как это всё теперь тестировать?». Сервисы уже работают в продакшене, а мы их не тестируем. Используя привычные методологии (пирамида тестирования, ручные интеграционные тесты, end-to-end тесты), тестировать микросервисы сложно. Поэтому мы долго делаем фичи.

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

Где запускать проект?

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

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

В общем, сепаратизм нам не подходит. Логично переходим к вопросу набора команды.

Разработка

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

• токсичными пижонами, которые ничего не будут делать и создадут плохую атмосферу в коллективе,
• либо идеалистами, выстраивающими по крупицам безукоризненную архитектуру, ставящими ORM перед базами, которые никогда менять не придется…

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

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

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

Quality Assurance

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

Плюс еще есть подходы, когда ты минимизируешь mean time between failures вместо mean time to recover. Mean time between failures — это когда QA специалист говорит: «не будем релизить, у меня чутье плохое, баги будут, давайте через две недели выкатим». А mean time to recover — это когда вы катите что-нибудь, сразу видите на метриках, что что-то сломалось, и через две минуты все откатили, пофиксили и все ок. Но чтобы можно было проект через две минуты откатить, надо всё покрыть нормальными метриками, а это не всегда тривиально. А если метрики в плачевном состоянии, и мы выкатим плохой релиз, мы можем узнать об этом после того, как все пользователи уйдут от нас к конкурентам.

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

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

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

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

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

Web. История одной технологии / Блог компании GeekBrains / Хабр

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

1990

Представьте мир, в котором нет интернета. Точнее, он существует в форме протоколов, позволяет обмениваться сообщениями и письмами, но первый веб-сайт был создан только в конце 1990 года (с описанием World-Wide-Web, что логично) и располагался по адресу info.cern.ch. Текст, только текст и ничего больше.

Позже HTML, основы которого были описаны на info.cern.ch, очень быстро научился поддерживать 16 цветов и вставлять изображения, что повлекло за собой рождение первых браузеров, поддерживающих эти функции — Mosaic (1993) и NetScape (1994).

1994

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

Что касается деятельности дизайнеров и разработчиков сайтов, то в мире, в котором существует лишь HTML, работа ведётся преимущественно в примитивных текстовых редакторах.

yahoo.com, 1994 год

google.com/inbox, наши дни

1995

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

HTML дополняется Javascript. Теперь разработчики с удовольствием добавляют на страницы всплывающие окна и прочие ответные реакции на действия пользователя. JS останется настоящим must-have любого веб-сайта вплоть до развития CSS, а актуальность сохранит и по сей день.

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

Для простых труженников веб-цеха компания Microsoft выпускает HTML-редактор FrontPage, работающий по принципу WYSIWYG (What You See Is What You Get). Приложение получило бешеную популярность среди непрофессионалов: теперь любой человек в домашних условиях мог за несколько минут создать симпатичный сайт. При этом FrontPage нашёл отклики и в сердцах разработчиков — для работы под связку Windows-Internet Explorer он подходил идеально.

microsoft.com, 1995 год

microsoft.com, русская версия, наши дни

1996

Год ознаменовался двумя громкими дебютами: CSS и Macromedia Flash. Язык разметки позволил серьёзно сократить размеры исходного кода и количество проблем, связанных с банальным форматированием текста.

Flash же и вовсе на многие годы стал основой интернет-анимации, признаком качественного сайта и магнитом для случайных прохожих.

apple.com, 1996 год

apple.com, русская версия, наши дни

1997

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

Главным событием стал анонс HTML 4 — версии языка, призывающей активно использовать таблицы стилей CSS, а от издержек первых трёх версий немедленно избавится. Впрочем, доработанная и причёсанная версия 4.01 официально объявится лишь спустя 2 года и впоследствии прослужит долгих 15 лет. Тем временем число пользователей интернета достигло 100 миллионов человек.

В качестве альтернативы FrontPage Macromedia выпустила Dreamweaver. Правда, в 1997 году была создана лишь версия для MacOS, лишь через год появилась адаптация под Windows. Впрочем, это не помешало Dreamweaver достаточно быстро занять лидирующие позиции на рынке.

1998

Выходит CSS2. Теперь разработчики могут прибегать к блочному форматированию, работать со звуком, создавать стили постранично, а также генерировать содержимое сайтов. CSS2 верой и правдой служит вот уже 18 лет (если учитывать редакцию CSS2.1 вышедшую в 2011 году) и до сих пор не потерял актуальности, несмотря на активное внедрение CSS3.

1999 — 2002

Период, когда на свет не появилось ничего полезного, кроме, пожалуй, браузеров Internet Explorer 5.0 (1999) и 6.0 (2001) и CMS Drupal. Последняя, впрочем, появилась лишь формально, серьёзная популярность придёт лишь через 3 года.

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

2003

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

2004-2005

2004 год ознаменовался запуском FireFox — конкурента практически безальтернативного IE. А вот годом позже на свет появился сервис YouTube. Несмотря на то, что в тот момент это не произвело эффекта разорвавшейся бомбы, проект довольно быстро обошёл в рейтингах MySpace, а уже через год был куплен Google более чем за 1,5 миллиарда долларов. И это никого не удивило. Более того, популярность сервиса оказалось такой, что долгое время подавляющее количество видео на сайтах было именно с YouTube.

Стоит отметить и выпуск Unity — инструмента для разработки 2D и 3D приложений. В вебе эта технология прекрасно проявила себя в создании браузерных игр, а также оказалось полезной для ресурсов с необходимостью демонстрации прототипов и 3D моделей.

Кроме того, в 2005 году объявился ещё один конкурент WordPress и Drupal – CMS Joomla!

2007

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

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

FrontPage, последняя версия которого датирована 2003 годом, уходит в утиль и заменятся на Microsoft SharePoint и Microsoft Expression Web.

2008

Google создаёт Chrome, который очень быстро обходит в рейтингах популярности Internet Explorer. Он быстр, удобен как пользователю, так и разработчику. Веб-дизайнеры понемногу привыкают к необходимости работать на большие и малые экраны.

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

2009

Алексис Сельер под влиянием Sass создаёт на языке Ruby собственный препроцессор LESS. Несмотря на незначительное число отличий, большинство начинающих разработчиков предпочитают именно этот продукт из-за его простоты и универсальности, а главное, из-за возможности работы с фреймворком Twitter Bootstrap.

Microsoft объявляет о прекращении поддержки IE6, некогда самого популярного в мире браузера (даже сегодня его использует около 0,1% пользователей).

2010-2013

Эти годы ознаменовались появлением сразу трёх главных трендов.

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

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

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

2014

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

Наши дни

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

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

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

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

А какие вехи дизайна отметили бы вы?

Что такое веб-разработка? — Комплексный взгляд на веб-разработку

Веб-разработка — это довольно расплывчатый термин, используемый для описания создания или поддержки веб-сайтов, размещенных в Интернете. Я использую слово «расплывчатый», потому что существует множество языков программирования, фреймворков и инструментов, которые используются для веб-разработки. Веб-разработка может относиться к одной веб-странице, построенной с помощью HTML и CSS, которая может содержать пару сотен строк кода. Или, на другом конце спектра, это может относиться к веб-сайту, подобному Facebook, который предположительно содержит около 60 миллионов строк кода. См. Ссылку: Сколько строк кода?

1. Введение
2. Что такое веб-разработка
3. История веб-разработки
4. Как работает веб
5. Технологии веб-разработки
6. HTML
7. CSS
8. Javascript
9. Рендеринг: На стороне сервера
10. Рендеринг: на стороне клиента
11. Рендеринг: на стороне сервера

Введение

Я буду полностью честен с вами: Я не большой поклонник веб-разработки.

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

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

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

Это правда; веб-разработка захватила мир. Это король-конг платформ для разработки.

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

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

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

В этой главе мы собираемся охватить некоторые основы.

Что такое веб-разработка?

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

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

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

Тем не менее, независимо от того, как осуществляется веб-разработка, базовые технологии одинаковы: HTML, JavaScript, CSS — и большое количество терпения.

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

1. Python (включая Django, среду веб-разработки Python)
2. Java
3. ASP.NET
4. C ++
5. C
6. Scala
7. Ruby

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

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

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

Краткая история Интернета

Давайте поговорим об истории веб-разработки. Это даст нам хороший ориентир для разговоров о том, «что такое веб-разработка» сегодня.

Веб-разработка началась в совершенно другом месте, чем сейчас.

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

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

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

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

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

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

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

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

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

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

Разработчики пытались найти способы сделать Интернет все более динамичным.

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

В конце концов целые веб-приложения создавались динамически, без каких-либо обновлений страниц. Эти типы веб-приложений известны как SPA или одностраничные приложения. Вы когда-нибудь были на веб-сайте, заполнили некоторую информацию в форме, нажали кнопку «Обновить», а веб-страница не перезагружалась? Вероятно, запрос отправляет AJAX. Это позволяет динамически изменять веб-страницу без ее обновления. Довольно крутая штука.

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

Фактически, это стало настолько верным, что Google создал веб-ОС под названием Chrome OS, в которой ОС в основном является веб-браузером Chrome. Однажды все будет размещено в Интернете, потому что браузеры будут достаточно мощными, чтобы все запускать. Он уже движется в этом направлении, поскольку мы видим, что появляется все больше и больше облачных технологий.

Как работает Интернет

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

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

Считайте этот краткий учебник очень сжатым и основным объяснением того, как работает Интернет.

Прежде всего, у нас есть веб-браузер.

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

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

Веб-браузер должен отправить запрос на веб-сервер, чтобы отобразить веб-страницу.

Это делается с помощью протокола, известного как HTTP или протокол передачи гипертекста.

Когда запрос определенного ресурса или URI (унифицированный идентификатор ресурса) отправляется на веб-сервер, этот веб-сервер находит запрошенный контент — если он существует — и отправляет ответ браузеру.

Затем браузер анализирует и отображает этот ответ, который конечный пользователь видит в веб-браузере.

Теперь, очевидно, что скрывается гораздо больше, но основная идея состоит в том, что веб-браузер делает запрос, а веб-сервер отвечает, возвращаясь из HTML, CSS и JavaScript.

Почему это важно понимать, если вы хотите заниматься веб-разработкой?

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

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

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

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

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

Основные технологии веб-разработки

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

HTML

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

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

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

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

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

Веб-браузер анализирует HTML и использует его вместе с CSS и JavaScript для визуализации страницы.

CSS

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

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

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

CSS (каскадные таблицы стилей) могут быть связаны на веб-странице для определения стиля этой веб-страницы.

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

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

Довольно полезная технология.

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

JavaScript

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

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

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

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

Используя JavaScript для управления DOM, можно программно изменить всю структуру и стиль веб-страницы.

В веб-приложениях все это происходит внутри браузера (если вы не используете такую ​​технологию, как Node.js, которая запускает JavaScript на сервере для фактического анализа запросов и отправки ответов).

Рендеринг: на стороне сервера

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

Начнем с рендеринга на стороне сервера.

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

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

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

Как мы уже говорили в истории Интернета, это был оригинальный способ работы большинства веб-приложений.

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

Рендеринг на стороне клиента

С увеличением возможностей браузеров и движков JavaScript в браузерах наблюдается сильное движение в сторону того, что известно как рендеринг на стороне клиента.

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

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

За кулисами JavaScript используется для создания и управления элементами DOM и даже для создания HTML или CSS, которые являются частью веб-страницы или, в данном случае, веб-приложения.

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

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

Обычно это только одна страница, и ее содержимое динамически обновляется.

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

.

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

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

Цифровой пинг-понг: внутреннее устройство современного веб-сайта

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

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

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

В качестве примера представим, что Дженни хочет посетить google.com.

1. Дженни сначала вводит URL-адрес веб-сайта (google.com) в браузере на своем локальном компьютере (клиент ).
2. Компьютер Дженни генерирует запрос , который отправляется на компьютер server , который затем принимает запрос .
3. Сервер запускает (или выполняет) внутренний код , обычно захватывая данные (или запрашивая) из базы данных .
4. База данных отправляет запрошенные данные обратно на сервер .
5. Сервер берет данные и выполняет код интерфейса для создания ответа .
6. Этот ответ отправляется обратно на клиент , где он затем отображается (или визуализируется) на компьютере клиента как стандартная веб-страница.

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

Что у меня за линия ?: Где подходит веб-разработчик

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

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

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

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

Фото: Netflix

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

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

Выбор, выбор, везде: узнайте, какие дисциплины веб-разработки подходят именно вам

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

• Графический / Визуальный дизайнер: Визуальный дизайнер часто хорошо обучен в искусстве, используя Photoshop и другие инструменты для создания макетов страниц или целых веб-сайтов, которые понравятся клиенту и понравятся аудитории. В некоторых отделах разработки эти позиции «бескодовые», в то время как в других часто ожидается, что визуальные дизайнеры превратят визуальные макеты в работоспособный интерфейсный код.
• Front-End Developer: Разработчик сосредоточился на внешнем виде сайта (уровень презентации обсуждался выше) и почти исключительно использовал языки HTML, CSS и JavaScript.
• Back-end разработчик: Back-end разработчик пишет весь код, необходимый для основной логики веб-сайта: получение данных из базы данных и определение того, как эти данные используются и отображаются для пользователя через внешний интерфейс. Языки, обычно используемые для внутренней разработки, разнообразны, но некоторые из самых популярных — это Ruby on Rails, Python, PHP и Node.js.
• Разработчик полного стека: Высоко оцениваемая позиция, и по праву, разработчик полного стека — это тот, кто разбирается во всех аспектах процесса разработки и способен вносить код и функциональные решения на каждом этапе пути, от планирования и дизайн как для внешнего, так и для внутреннего программирования.

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

.

Изучите веб-разработку как абсолютный новичок (2020)

Вы пытаетесь изучить веб-разработку как новичок, но не знаете, с чего начать?

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

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

Шаги по изучению основ веб-разработки:

1. Основы : Как работают веб-сайты, интерфейс и сервер, с использованием редактора кода
2. Основы : HTML, CSS и JavaScript
3. Инструменты : менеджеры пакетов, инструменты сборки, контроль версий
4. Дополнительный интерфейс : Sass, адаптивный дизайн, фреймворки JavaScript
5. Основы серверной части : Серверы и базы данных, язык программирования

Я рекомендую выполнить шаги 1, 2 и 3 по порядку.Затем, в зависимости от того, хотите ли вы сосредоточиться на внешнем или внутреннем интерфейсе, вы можете выполнить шаги 4a или 4b в любом порядке.

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

Дорожная карта для изучения веб-разработки (инфографика)

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

Нажмите, чтобы загрузить полноразмерное изображение

А теперь перейдем к первому шагу!

1: Что такое веб-разработка?

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

Как работают веб-сайты?

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

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

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

В чем разница между интерфейсом и сервером?

Термины «внешний интерфейс», «серверная часть» и «полный стек» веб-разработчик.
опишите, с какой частью взаимоотношений клиент / сервер вы работаете
с участием.

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

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

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

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

Использование редактора кода

Когда вы создаете веб-сайт, самый важный инструмент, который вы будете использовать
ваш редактор кода или IDE (интегрированная среда разработки).это
инструмент позволяет вам написать разметку и код, который будет составлять
интернет сайт.

Есть довольно много хороших вариантов, но в настоящее время самым популярным редактором кода является VS Code. Код VS
— это более легкая версия Visual Studio, основной IDE Microsoft.
Он быстрый, бесплатный, простой в использовании, и вы можете настроить его с помощью тем и
расширения.

Другими редакторами кода являются Sublime Text, Atom и Vim.

Если вы только начинаете, я бы порекомендовал проверить VS Code, который вы можете скачать с их веб-сайта.

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

2: Базовый интерфейс

Интерфейс веб-сайта состоит из файлов трех типов: HTML,
CSS и JavaScript. Эти файлы загружаются в браузере на
на стороне клиента.

Рассмотрим подробнее каждую из них.

HTML

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

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

CSS

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

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

JavaScript

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

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

.