Санкт-Петербург, 2015 год
Экскурс в мир WEB разработки
Лаабе Дмитрий,
IT-Доминанта

Немного о себе…
1. Опыт в ИТ – 19 лет
2. Преподавание ИТ в СПбГПУ («Политех») – 7 лет
3. Более 10-ти авторских курсов в области WEB разработки
4. Руководство рекрутинговой компанией в сфере ИТ – 10 лет
5. Подготовка ИТ рекрутеров – 8 лет

Что нужно знать рекрутеру о разработке ПО
1. Базовые понятия
2. Связи между ними
3. Привязку конкретных технологий к базовым понятиям
4. Архитектуру разрабатываемых систем

Что НЕ нужно знать рекрутеру о разработке ПО
1. Синтаксис языка JavaScript
2. Основные настройки WEB сервера
3. …

Базовые понятия: архитектура ПО
1. Одноуровневая: desktop приложение
2. Двухуровневая: клиент-серверное приложение
3. Трехуровневая: клиент-серверное приложение + база
данных
4. Многоуровневая: сложные системы с цепочками вызовов

Базовые понятия: клиент-серверное взаимодействие
Сервер - компьютер (или
специальное компьютерное
оборудование), выполняющий
определенные сервисные
функции
Клиент – компьютер
отправляющий запросы
серверу
ответ
запрос

Клиент-серверное ПО
Примеры серверного ПО (Back End):
1. WEB серверы (выдача HTML страниц): MS IIS, Apache, nginx и т. д.
2. FTP серверы (выдача файлов): FTP службы ОС, FileZilla server и т.д.
3. SMTP(почтовые) серверы: MS Exchange, SendMail,
4. И т.д.
Примеры клиентского ПО (Front End):
1. WEB клиенты: Internet Explorer, Google Chrome, Mozilla FireFox и т.д.
2. FTP клиенты: Cute FTP
3. Почтовые клиенты: MS Outlook, The Bat
1. Серверное ПО – ПО обеспечивающее обработку запросов от клиентов в
рамках некоторого сервиса
2. Клиентское ПО – ПО взаимодействующее с пользователем, отправляющее
запросы на сервер и принимающее ответы от него

Базовые понятия: Протоколы
Сетевой протокол — набор правил и действий,
позволяющий осуществлять обмен данными
между включёнными в сеть устройствами.
TCP/IP –транспортно-сетевой,
HTTP, FTP, SMTP - прикладной
7-ми уровневая модель ISO OSI

Службы Интернет
Популярные службы:
• World Wide Web
• ICQ
• Skype
• FTP
• Telnet
• И др.
Служба Интернет – серверное ПО, работающее в Интернет.

Архитектура WEB приложений
WEB приложение – частный случай 3-х
уровневой архитектуры приложения
WEB браузер
(тонкий клиент)
WEB сервер Сервер БД
JavaScript Developer,
Front End Developer
PHP Developer,
Java Developer,
Ruby Developer
DB Developer (SQL)

Служба World Wide Web

Служба WWW: обработка запросов

WEB хостинг: панель управления хостингом

WEB хостинг: терминальный доступ на сервер

Основы HTML
HTML (от англ. HyperText Markup Language — «язык гипертекстовой
разметки») — стандартный язык разметки документов во Всемирной
паутине. Большинство веб-страниц содержат описание разметки на языке
HTML (или XHTML).
Язык HTML интерпретируется браузерами, полученный в результате
интерпретации форматированный текст отображается на экране монитора
компьютера или мобильного устройства.
Тег HTML - элемент языка разметки гипертекста. Текст, содержащийся между
начальным и конечным тегом отображается и размещается в соответствии со
свойствами, определенными для данного тега.

Структура HTML документа

Стилевые описания CSS
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный
язык описания внешнего вида документа, написанного с использованием языка
разметки.
CSS используется создателями веб-страниц для задания цветов, шрифтов,
расположения отдельных блоков и др.

Формирование Веб-документа
HTML
CSS
JavaScript
Интерпретациявеб-
браузера

Статистика использования браузеров 2015
• Данные с сайта http://www.w3counter.com
• Данные с сайта http://www.w3schools.com

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

Базовые понятия: Программирование
Программирование— процесс записи
алгоритма/программы.
Язык программирования – набор
правил определяющих способ записи
программы

Front-end разработка
Front-end разработка – это создание клиентской части веб приложения.
В нее входят (в общем случае):
• HTML верстка шаблонов страниц сайта/UI
• Создание UI
• Программирование UI
Front-end разработчик vs JS разработчик:
• Часто это одно и тоже
• Front-end шире, чем JS
• Front-end не всегда JS
Некоторые варианты front-end для WEB:
• HTML/JavaScript
• Flash/Flex/ActionScript
• ActiveX/C+ или C#
• Applet/Java
• HTML/VBScript (только Internet Explorer)

JavaScript
JavaScript - прототипно-ориентированный сценарный язык программирования.
Наиболее широкое применение нашел в веббраузерах для создания
интерактивных страниц.
Задачи, решаемые с помощью JS в
браузере:
• Управление UI
• Динамическое формирование и
загрузка содержимого
• Проверка данных форм
• Управление структурой
документа
• Создание визуальных эффектов
• и др.

JavaScript
Код JavaSript:
1. Встраивается в страницу или подключается к ней
2. Интерпретируется браузером
3. Выполняется браузером при возникновении определенных событий
4. Может менять содержимое и структуру страницы
Пример:

Базовые понятия: Фреймворки
Принцип действия:
1. Реализует типовое приложение
2. Позволяет расширять себя под
конкретную задачу
3. Используется для более быстрого
создания однотипных систем
Фрейворк - каркас программной системы с
определенной структурой и поведением по
умолчанию

Библиотеки и фреймворки JavaScript
Библиотека/фреймворк JavaScript – набор функций/прототипов написанных на JS и
готовых для повторного использования.
Библиотека/фреймворк JS:
• Решает определенный круг типовых задач front-end разработки
• Состоит из одного или нескольких файлов JS
• Может быть подключена к одной/нескольким/всем страницам веб приложения
Типовые задачи, решаемые JS фреймворками:
• Упрощение манипулирования элементами документа DOM
• Разделение данных, логики и отображения (шаблон MVC)
• Уменьшение количества кода
• Модульность

Библиотеки и фреймворки JavaScript
Библиотека/Фреймворк Назначение и особенности
jQuery 1. Взаимодействиe JavaScript и HTML.
2. Работа с AJAX
Пример: $("div.test"). addClass("blue")
AngularJS 1. Разработка сложных клиентских одностраничных
приложений.
2. Отделение логики от данных и отображения (MVC)
3. Приложения более компактные.
Backbone.js См. Angular JS
Ember.js См. Angular JS
CoffeScript 1. Язык, расширяющий возможности JS.
2. Транслируется на сервере в JS
3. Код более компактный и читаемый

jQuery
Библиотека jQuery:
• Помогает получать доступ к любому элементу DOM,
• Помогает обращаться к атрибутам и содержимому элементов DOM,
• Помогает манипулировать элементами DOM,
• Предоставляет удобный API для работы с AJAX,
• Предоставляет набор компонентов UI
Примеры:
• Меняем содержимое кнопки
$( "button.continue" ).html( "Next Step..." )
• Выводим контейнер при нажатии на любую кнопку button-container
var hiddenBox = $( "#banner-message" );
$( "#button-container button" ).on( "click", function( event ) {
hiddenBox.show();
});

Angular.js
Приложение на Angular.js состоит из
модулей.
Основные элементы модуля:
1. Контроллеры (Controllers)
2. Представления (View)
3. Менеджеров контроллеров (Routes)
4. Директив (Directives)

Angular.js: простейший модуль

AJAX
AJAX, (Asynchronous Javascript and XML — «асинхронный JavaScript и XML») —
подход к построению интерактивных пользовательских интерфейсов веб-
приложений, заключающийся в «фоновом» обмене данными браузера с веб-
сервером, когда при обновлении данных веб-страница не перезагружается
полностью.

Веб серверы
Статистика использования Веб серверов май 2015 по
данным http://w3techs.com/:

WEB сервисы
Примеры WEB сервисов:
• Google Maps Api Web Services
• Yandex Search API
• Platron API
Веб-сервис — идентифицируемая веб-адресом (url) программная система со
стандартизированными интерфейсами.

СУБД в WEB
СУБД – программное обеспечение для
управления базой данных
Язык запросов – один из важнейших
элементов СУБД
SQL – де-факто стандартный язык запросов к
реляционным БД
MS SQL Server, Oracle DB,
PostgreSQL, MySQL, SQLLite и
др.
Команда Описание
CREATE TABLE Создает таблицу
DROP TABLE Физически удаляет таблицу из базы данных
SELECT Выполняет запрос на выборку данных из таблиц и
представлений
DELETE Удаляет одну или более строк из таблицы базы данных
INSERT Вставляет одну или более строк в таблицу базы данных

Среды WEB разработки
IDE - система программных средств, используемая программистами для
разработки программного обеспечения (ПО).
Некоторые IDE используемые в WEB разработке:
• MS Visual Studio (MS Visual WEB Developer)
• IntelliJ IDEA (RubyMine)
• WebStorm
• Notepad и др.

Серверные WEB технологии: PHP
PHP - скриптовый язык общего назначения, интенсивно применяемый для
разработки веб-приложений, одним из лидеров среди языков, применяющихся
для создания динамических веб-сайтов.
Популярные PHP фреймворки:
• Zend Framework
• Yii
• Drupal
Обработка
Исходный файл PHP: Передается клиенту:

Серверные WEB технологии: ASP.NET
ASP.NET(Active Server Pages) — технология создания веб-приложений и веб-
сервисов от компании Майкрософт, часть платформы Microsoft .NET

Серверные WEB технологии: ROR
ROR (Ruby on Rails) - фреймворк, написанный на Ruby. Ruby on Rails предоставляет
архитектурный каркас MVC для веб-приложений, а также обеспечивает их
интеграцию с веб-сервером и сервером базы данных.

Серверные WEB технологии: Python/ Django
Python — высокоуровневый язык программирования общего назначения,
ориентированный на повышение производительности разработчика и читаемости
кода.
Hello.py
Django — свободный фреймворк для веб-приложений на языке Python,
использующий шаблон проектирования MVC

Серверные WEB технологии: Java
JSP(JavaServer Pages) – серверная технология WEB. Страница JSP включает и код и
HTML разметку и компилируется в servlet.
Сервлет – класс Java, реализация которого расширяет функциональные
возможности WEB сервера.

Серверные WEB технологии: Java
Пример сервлета:

Разработка WEB приложений
Подходы к разработке:
1. Разработка с «нуля»:
• Серверная: языки PHP, ASP, Java;
• Клиентская: HTML, JS, CSS
2. Разработка с использование фреймворков:
• Rails и язык Ruby
• Django и язык Python
• Zend Framework и язык PHP
3. Разработка с использованием CMS: 1С-Битрикс, UMI.CMS,
Joomla, WordPress

Что нужно знать о проекте рекрутеру?
1. Архитектура проекта (уровневость)
2. Клиентские языки программирования проекта
3. Серверные языки программирования проекта
4. Используемые клиентские и серверные библиотеки
5. Используемые протоколы и API
6. Используемые фреймворки и(или) CMS
7. Используемые БД
8. Используемые IDE (среды разработки)
9. Какую часть проекта будет писать программист на
конкретной позиции
Ну и, конечно, какие задачи решает проект… 

Спасибо за внимание!
• Сайт: http://www.it-dominanta.ru
• Телефон: +7 (812) 334-99-90
• E-mail: contact@it-dominanta.ru
• Адрес: 191186, Санкт-Петербург, Большая морская ул., д.3 (БЦ "Лидваль"), офис 314.
Контакты:
Лаабе Дмитрий
Генеральный директор и основатель IT-Доминанта
Технический директор портала IT-Событие
email: Dmitry@it-dominanta.ru