Подготовка рабочего места, настройка ПО
Веб-дизайн и разработка
“
В этом уроке мы познакомимся с базовыми программами, которые нужны веб-разработчику. Начинаем!
Глоссарий
Для успешного освоения материала рекомендуем вам изучить следующие понятия:
Интегрированная среда разработки (IDE)
Комплекс программных средств, используемый программистами для разработки программного обеспечения
Редактор исходного кода
Текстовый редактор для создания и редактирования исходного кода программ
Подсветка синтаксиса
Выделение синтаксических конструкций текста с использованием различных цветов, шрифтов и начертаний
Автодополнение кода
Функция в программах, предусматривающих интерактивный ввод текста по дополнению текста по введенной его части
База данных
Представленная в объективной форме совокупность самостоятельных материалов, систематизированных таким образом, чтобы эти материалы могли быть найдены и обработаны с помощью электронной вычислительной машины
Веб-сервер
Сервер, принимающий HTTP-запросы от клиентов, обычно веб-браузеров, и выдающий им HTTP-ответы, как правило, вместе с HTML-страницей, изображением, файлом, медиа-потоком или другими данными
Инструменты разработчика
Инструменты разработки, встроенные в браузер
Растровая графика
Изображение, синтезированное компьютером и построенное на экране при помощи растровой развертки
Векторная графика
Способ представления объектов и изображений (формат описания) в компьютерной графике, основанный на математическом описании элементарных геометрических объектов, обычно называемых примитивами, таких как: точки, линии, сплайны, кривые Безье, круги и окружности, многоугольники
Видеолекция
Конспект
Главный инструмент разработчика
Главное, без чего нельзя обойтись, это редакторы кода и среды разработки, ведь именно в них мы будем писать код.
Отличия редактора кода от среды разработки
Обзор сред разработки и текстовых редакторов
Давайте посмотрим, какие среды разработки и текстовые редакторы сейчас существуют.
PhpStorm
Среда разработки от компании JetBrains. Имеет большой функционал и поддерживает все языки, на которых мы будем писать.
WebStorm
Эта среда разработки от компании JetBrains больше ориентирована на клиентскую разработку и не поддерживает язык PHP. Удобна при разработке SPA, особенно если вы используете фреймворки.
Среда разработки от компании JetBrains. Имеет большой функционал и поддерживает все языки, на которых мы будем писать.
WebStorm
Эта среда разработки от компании JetBrains больше ориентирована на клиентскую разработку и не поддерживает язык PHP. Удобна при разработке SPA, особенно если вы используете фреймворки.
Важно
Среды разработки от компании JetBrains платные, но у них существует пробный период, а также лицензии для студентов и преподавателей, так что если вы относитесь к этим категориям, то обратитесь в свое учебное заведение для получения лицензии
VisualStudio Code
Текстовый редактор от компании Microsoft. Позиционируется как «легкий» редактор кода для кроссплатформенной разработки веб- и облачных приложений.
Включает в себя отладчик, инструменты для работы с Git, подсветку синтаксиса, автодополнение и средства для рефакторинга. Имеет широкие возможности для кастомизации.
Sublime Text
Один из старых редакторов. Он тоже имеет набор плагинов, которые можно поставить.
Atom
Бесплатный текстовый редактор от компании GitHub, которую в 2018 году купила Microsoft.
Brackets
Cвободный текстовый редактор для веб-разработчиков. Некоторые разработчики его используют, поэтому о нем нужно знать, а использовать тот или иной редактор — это ваше личное решение.
В этом курсе мы будем использовать VisualStudio Code.
Текстовый редактор от компании Microsoft. Позиционируется как «легкий» редактор кода для кроссплатформенной разработки веб- и облачных приложений.
Включает в себя отладчик, инструменты для работы с Git, подсветку синтаксиса, автодополнение и средства для рефакторинга. Имеет широкие возможности для кастомизации.
Sublime Text
Один из старых редакторов. Он тоже имеет набор плагинов, которые можно поставить.
Atom
Бесплатный текстовый редактор от компании GitHub, которую в 2018 году купила Microsoft.
Brackets
Cвободный текстовый редактор для веб-разработчиков. Некоторые разработчики его используют, поэтому о нем нужно знать, а использовать тот или иной редактор — это ваше личное решение.
В этом курсе мы будем использовать VisualStudio Code.
Зачем нужен веб-сервер
Давайте создадим два файла: index. html и index. php со следующим содержимым:
index.html
<h1>Hello world!</h1>
index.php
<?php
echo "Hello world!";
Теперь откроем их в браузере.
Файл в формате html отображается корректно. Мы видим заголовок первого уровня, который написали, а вот php-файл выводит код.
Дело в том, что браузер может отображать только HTML-код, а php-код должен исполняться веб-сервером и отдаваться браузеру в виде HTML.
Дело в том, что браузер может отображать только HTML-код, а php-код должен исполняться веб-сервером и отдаваться браузеру в виде HTML.
Обзор веб-серверов
Наиболее распространенным веб-сервером является Apache, но кроме него есть много и других, таких как Nginx или IIS от Microsoft.
В реальности для серверной разработки одного веб-сервера будет недостаточно, потому что еще нужна база данных, панель для удобной работы с базой данных и многое другое.
Можно поставить все это по отдельности, а можно пользоваться готовыми сборками, которые упрощают работу.
На выбор у нас две такие сборки — OpenServer и XAMPP.
В реальности для серверной разработки одного веб-сервера будет недостаточно, потому что еще нужна база данных, панель для удобной работы с базой данных и многое другое.
Можно поставить все это по отдельности, а можно пользоваться готовыми сборками, которые упрощают работу.
На выбор у нас две такие сборки — OpenServer и XAMPP.
OpenServer имеет много разных модулей, программ и утилит для веб-разработки и весит, соответственно, много.
XAMPP имеет минимально необходимый набор и весит гораздо меньше.
XAMPP имеет минимально необходимый набор и весит гораздо меньше.
Мы будем использовать OpenServer.
Важно
Скачайте его заранее, так как это не быстрый процесс
Установка веб-сервера
1. Запустите скачанный файл.
2. Выберите папку назначения — куда распакуется OpenServer. Рекомендую выбрать корень диска С.
3. Необходимо запустить OpenServer из той папки, куда вы его распаковали.
4. При первом запуске OpenServer предложит установить Microsoft Visual C++ Runtime and Patches. Если ранее вы уже устанавливали этот пакет, то пункт можно пропустить. Если не уверены, то лучше установите.
5. После запуска должна появиться иконка в виде красного флажка в трее.
6. Нажмите на нее правой кнопкой мыши и выберете Запустить.
7. Дождитесь, пока иконка с флажком станет зеленой, это будет означать, что сервер успешно запущен.
2. Выберите папку назначения — куда распакуется OpenServer. Рекомендую выбрать корень диска С.
3. Необходимо запустить OpenServer из той папки, куда вы его распаковали.
4. При первом запуске OpenServer предложит установить Microsoft Visual C++ Runtime and Patches. Если ранее вы уже устанавливали этот пакет, то пункт можно пропустить. Если не уверены, то лучше установите.
5. После запуска должна появиться иконка в виде красного флажка в трее.
6. Нажмите на нее правой кнопкой мыши и выберете Запустить.
7. Дождитесь, пока иконка с флажком станет зеленой, это будет означать, что сервер успешно запущен.
Работа с веб-сервером
1. В папке Domains создаем папку Test.
2. Перемещаем ранее созданные 2 файла в эту папку.
3. Перезапускаем браузер
Теперь в браузере можно обратиться по имени нашего домена, а именно test/
2. Перемещаем ранее созданные 2 файла в эту папку.
3. Перезапускаем браузер
Теперь в браузере можно обратиться по имени нашего домена, а именно test/
По умолчанию веб-сервер будет пытаться открыть файл с именем Index, а если у нас несколько таких файлов с разными расширениями, то предпочтение будет отдано php-файлу.
И сейчас вместо php-кода мы видим результат выполнения этого кода. Когда мы обратились к php-файлу, наш веб-сервер выполнил его и отдал браузеру результат в виде обычного html-документа.
HTML-файл также работает, просто для доступа к нему нужно явно указать в адресной строке, какой файл мы хотим посмотреть.
И сейчас вместо php-кода мы видим результат выполнения этого кода. Когда мы обратились к php-файлу, наш веб-сервер выполнил его и отдал браузеру результат в виде обычного html-документа.
HTML-файл также работает, просто для доступа к нему нужно явно указать в адресной строке, какой файл мы хотим посмотреть.
Настройка окружения
Отличия редактора кода от среды разработки
1. Открыть командную строку.
2. Проверить версию PHP командой php -v
2. Проверить версию PHP командой php -v
Как видите, php не является командой, потому что, когда мы обращаемся к команде php, командная строка пытается найти php либо в той папке, в которой мы находимся, либо в переменных окружения. Ни там, ни там команды php нет.
Консоль OpenServer
В OpenServer встроена своя собственная консоль, которая уже знает все необходимые пути.
Важно
Консоль можно найти, нажав правой кнопкой мыши по иконке в трее и выбрав Консоль из раздела Дополнительно
Откройте ее и попробуйте выполнить ту же самую команду.
В этой консоли команда php доступна, но не всегда удобно использовать консоль OpenServer, например потому, что ее долго открывать или потому, что в средах разработки есть своя собственная консоль.
Добавление PHP в окружение
Чтобы использовать команду php в любой консоли, требуется добавить путь до программы PHP в переменную окружения PATH, но для начала нужно найти путь до самой программы PHP.
В OpenServer она лежит по пути: C:\OpenServer\modules\php\PHP7.3
В OpenServer она лежит по пути: C:\OpenServer\modules\php\PHP7.3
Важно
Вместо 7.3 может быть любая другая версия, которую вы хотите использовать
Далее нужно сделать следующее:
1. Открыть Этот компьютер
2. ПКМ -> Свойства
3. Дополнительные параметры системы
4. Переменные среды
5. Выбрать переменную Path и нажать Изменить
6. Нажать Создать и вставить путь до php.
7. Во всех открытых окнах нажать кнопку ОК
После этого все консоли будут видеть команду php, но перед этим все открытые консоли нужно перезапустить.
1. Открыть Этот компьютер
2. ПКМ -> Свойства
3. Дополнительные параметры системы
4. Переменные среды
5. Выбрать переменную Path и нажать Изменить
6. Нажать Создать и вставить путь до php.
7. Во всех открытых окнах нажать кнопку ОК
После этого все консоли будут видеть команду php, но перед этим все открытые консоли нужно перезапустить.
DevTools
Веб-разработчики не ограничиваются одной средой разработки. Второй, очень мощный, инструмент уже встроен в браузер и называется Developer tools, или Инструменты разработчика. Его можно открыть, нажав F12, или через меню браузера.
Важно
Сразу рекомендую расположить эту панель справа, так как иногда по умолчанию она может быть снизу, и это не очень удобно
Панель вкладок начинается с двух иконок:
1. Позволяет выбрать какой-то элемент на странице
2. Включает режим эмуляции смартфона.
Дальше идут вкладки. Рассмотрим некоторые из них.
Elements
На этой вкладке мы можем видеть весь DOM, можем перемещаться по HTML-элементам, редактировать их и даже удалять. Перемещаясь по элементам, мы можем просматривать и изменять их стили. Все наши действия будут виртуальными и не приведут к сохранению в файле.
Console
Консоль служит для отладки, сюда выводятся все ошибки, которые произошли в коде, а также предупреждения и простые сообщения об отладке. Здесь же можно писать и исполнять JavaScript код.
Sources
Здесь отображается структура проекта, и мы можем видеть какие файлы подключены. Эта вкладка используется в основном для отладки.
Network
На этой вкладке отображаются все запросы, которые выполняет наша страница: изображения, стили, скрипты, а также запросы на сервер.
Application
Не самая часто используемая вкладка, но может помочь с просмотром такой информации как куки, сессии приложений, локальное хранилище и т.д.
1. Позволяет выбрать какой-то элемент на странице
2. Включает режим эмуляции смартфона.
Дальше идут вкладки. Рассмотрим некоторые из них.
Elements
На этой вкладке мы можем видеть весь DOM, можем перемещаться по HTML-элементам, редактировать их и даже удалять. Перемещаясь по элементам, мы можем просматривать и изменять их стили. Все наши действия будут виртуальными и не приведут к сохранению в файле.
Console
Консоль служит для отладки, сюда выводятся все ошибки, которые произошли в коде, а также предупреждения и простые сообщения об отладке. Здесь же можно писать и исполнять JavaScript код.
Sources
Здесь отображается структура проекта, и мы можем видеть какие файлы подключены. Эта вкладка используется в основном для отладки.
Network
На этой вкладке отображаются все запросы, которые выполняет наша страница: изображения, стили, скрипты, а также запросы на сервер.
Application
Не самая часто используемая вкладка, но может помочь с просмотром такой информации как куки, сессии приложений, локальное хранилище и т.д.
Программы для работы с графикой
Помимо инструментов для разработки иногда приходится пользоваться программами для работы с графикой. Обычно это Photoshop и Illustrator от компании Adobe, но можно использовать и другие бесплатные аналоги.
Photoshop и Illustrator — редакторы, которые работают с разной графикой. Photoshop — с растровой, а Illustrator — с векторной.
Photoshop и Illustrator — редакторы, которые работают с разной графикой. Photoshop — с растровой, а Illustrator — с векторной.
Отличие растровой и векторной графики
Посмотрите что будет, если увеличить следующие две картинки.
Растровая картинка
(оригинальный размер)
(оригинальный размер)
Векторная картинка
(оригинальный размер)
(оригинальный размер)
Растровая картинка (×5)
Векторная картинка (×5)
“
Теперь вы знаете, какие базовые программы нужны для того, чтобы заниматься веб-дизайном и разработкой, и самостоятельно можете установить их.
Дополнительные материалы
Программное обеспечение (ПО)
Программа или множество программ, используемых для управления компьютером
Контроль версий
Программное обеспечение, позволяющее хранить несколько версий одного и того же документа, при необходимости возвращаться к более ранним версиям, определять, кто и когда сделал то или иное изменение, и многое другое
PHP
Скриптовый язык общего назначения, интенсивно применяемый для разработки веб-приложений
HTML
Стандартизированный язык разметки документов во Всемирной паутине
JavaScript
Мультипарадигменный язык программирования, обычно используется как встраиваемый язык для программного доступа к объектам приложений
DOM
(Document Object Model — объектная модель документа).
Независящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-, XHTML- и XML-документов, а также изменять содержимое, структуру и оформление таких документов
Независящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-, XHTML- и XML-документов, а также изменять содержимое, структуру и оформление таких документов
Плагин
Независимо компилируемый программный модуль, динамически подключаемый к основной программе и предназначенный для расширения и/или использования ее возможностей
Кроссплатформенность
Способность программного обеспечения функционировать в нескольких различных операционных системах или на разных аппаратных платформах
SPA (single page application)
Веб-приложение или веб-сайт, использующий единственный HTML-документ как оболочку для всех веб-страниц и организующий взаимодействие с пользователем через динамически подгружаемые HTML, CSS, JavaScript, обычно посредством AJAX
Фреймворк
Программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта
Apache
Свободный веб-сервер, является кроссплатформенным ПО. Основным достоинством считаются надежность и гибкость конфигурации
Nginx
Веб-сервер и почтовый прокси-сервер, работающий на Unix-подобных операционных системах
IIS
Проприетарный набор серверов для нескольких служб Интернета от компании Microsoft
Домен
Символьное имя, служащее для идентификации областей, которые являются единицами административной автономии в сети Интернет, в составе вышестоящей по иерархии такой области
Куки
Небольшой фрагмент данных, отправленный веб-сервером и хранимый на компьютере пользователя
Сессия
Понятие «сессий» основано на том, что состояние пользователя каким-то образом сохраняется, когда он переходит с одной страницы на другую
Локальное хранилище
Объект веб-хранилища, позволяющий хранить пары ключ-значение в браузере
Пиксель
Наименьший логический двумерный элемент цифрового изображения в растровой графике, или [физический] элемент матрицы дисплеев, формирующих изображение
Среды разработки
PhpStorm
WebStorm
Редакторы
Visual Studio Code [бесплатный]
Sublime Text 3
Atom [бесплатный]
Brackets [бесплатный]
Веб-серверы
OpenServer
XAMPP
Графические редакторы
Adobe Photoshop
Adobe Illustrator
GIMP [бесплатный]
PhpStorm
WebStorm
Редакторы
Visual Studio Code [бесплатный]
Sublime Text 3
Atom [бесплатный]
Brackets [бесплатный]
Веб-серверы
OpenServer
XAMPP
Графические редакторы
Adobe Photoshop
Adobe Illustrator
GIMP [бесплатный]
Интерактивное задание
Тест
Для закрепления полученных знаний пройдите тест
| Стартуем! |
Что имеет больше возможностей для написания кода по умолчанию?
| Дальше |
| Проверить |
| Узнать результат |
Где находится программа PHP в OpenServer?
| Дальше |
| Проверить |
| Узнать результат |
Что можно сделать с помощью инструментов разработчика в браузере?
| Дальше |
| Проверить |
| Узнать результат |
В какой программе лучше делать иконки для сайта?
| Дальше |
| Проверить |
| Узнать результат |
Если вы перейдете по адресу example.com, а в корне сайта лежат два файла — index. html и index. php, — то какой файл откроется по умолчанию?
| Дальше |
| Проверить |
| Узнать результат |
К сожалению, вы ответили неправильно
Прочитайте лекцию и посмотрите видео еще раз
| Пройти еще раз |
Неплохо!
Но можно лучше. Прочитайте лекцию и посмотрите видео еще раз
| Пройти еще раз |
Отлично!
Вы отлично справились. Теперь можете ознакомиться с другими компетенциями
| Пройти еще раз |