Создание современных кроссплатформенных приложений на основе web - технологий

1.

Создание современных
кроссплатформенных
приложений на основе
web-технологий
Петров Роман Владимирович, Вагин Денис Владимирович
Кафедра Прикладной математики
НГТУ НЭТИ

2.

Преподователи
Петров Р.В.
Вагин Д.В.
Директор компании ITConstruct –
одного из лидеров по веб-разработке
и внедрению CRM в России
Д.т.н, доцент каф. ПМт
Может руководить бакалаврскими
и магистерскими работами
Можно писать бакалаврскую
www.itconstruct.ru
vk.com/rvpetrov

3.

Цели курса
► Дать представление о веб-разработке
► Дать практические навыки веб-разработки
► Узнать, что в мире сделано до нас
► Научиться использовать современные framework и CMS
+ новинка 2025 - получить знания и сертификат по
разработке на Python от Яндекс!!!

4.

План курса
HTML+CSS
Javascript
+ jQuery
Bootstrap
PHP 8
MySQL
модуль на
framework
CMS

5.

Список практических занятий
1. Создание страниц на HTML и CSS.
2. Подключение CSS Framework для придания новостному
сайту современного вида.
3. Создание новостного сайта на HTML, CSS, PHP, MySQL.
4. Подключение JavaScript и jQuery.
5. Создание новостного сайта на базе современной CMS
(со встроенным дизайном)
6. Подключение CSS Framework (собственного дизайна) к
разработанному новостному сайту.
7. Разработка собственного модуля для
CMS/индивидуального модуля для сайта.

6.

Новинка 2025 - курс от Яндекс!
► Аналог курса python разработчик от Яндекс Практикум
за 159 000 рублей - бесплатно!
► Доступен для прохождения до декабря 2025 (надеюсь)
► Я буду сопровождать вас по данному курсу (в режиме
онлайн в телеграм группе)
► Можно зачесть задание из этого курса в качестве 6 и 7
лабораторной (Сдать модуль “Приложение «Блогикум»”
вместо 6,7 лабораторной)

7.

Группа по курсу python от Яндекс.

8.

Литература и документация
Учебное пособие https://elibrary.nstu.ru/source?bib_id=228938
Создание современных кроссплатформенных приложений на основе webтехнологий : учебное пособие / Р. В. Петров, Д. В. Вагин. – Новосибирск : Издво НГТУ, 2024. – 64 с.
Любые курсы по HTML, например www.w3schools.com
Любые курсы по PHP (даже старые)
Обязательно – актуальная документация по PHP (на русском) (т.к. PHP8
имеет отличия): www.php.net/manual/ru/
Любые курсы по SQL/MySQL
1С-Битрикс: dev.1c-bitrix.ru/learning/index.php
Wordpress: wordpress.org/documentation/
Яндекс.Практикум по python

9.

Редактор
► Visual Studio Code
► Notepad++
► Или любой другой

10.

Веб-сервер XAMPP
► https://www.apachefriends.org/
► Apache
► MariaDB (MySQL)
► PHP 8

11.

Frontend и Backend
Frontend:
HTML,
javascript,
CSS
Браузер = операционная
система
HTTP,
HTTPS
Backend:
PHP
и другие
Вместо экрана
- браузер
SQL

12.

Frontend и Backend
Обычно:
► Когда вы видите страничку в браузере, backend уже
завершился
► Когда вы обновляете страничку, backend запускается
ЗАНОВО
► Когда вы обновляете или переходите на новую
страницу, это НОВЫЙ запуск программы на backend
► Backend скрипту всё равно, что генерировать – HTML,
текст, CSS, PDF, jpeg. И вы не знаете, как именно их
сделали. Вы видите только результат

13.

Практические занятия
► https://docs.google.com/document/d/165uEdy_4ECaXlM-
ijd5ajzUDwDr1mVCrQEcoEBrO2Ao/edit

14.

Экзамен
всё про то как будет проходить экзамен

15.

Практическое занятие №1
► Делаем шаблон новостного сайта на HTML + CSS.
► Без framework, руками
► Дизайн не важен
► Что входит в новостной сайт?
► Главная страница, на которой есть меню и список
новостей
► Детальная страница новости
► Страница с контактами

16.

Практическое занятие №1
► Реализованы страницы со списком новостей, новостью
детально, контактами
► У новостей есть дата, заголовок, текст анонса,
картинка, детальный текст
► Картинки не потеряли свои пропорции
► CSS вынесен в отдельный файл
► Текст новостей взят из реальных новостей
► Сайт выглядит целостным, ничто никуда не
разъезжается
► Желательно: адаптивность

17.

Практическое занятие №2
► То же самое, но на bootstrap (например)
► getbootstrap.com/
► Можно подсмотреть идеи
► bootstraptema.ru/

18.

Практическое занятие №3
https://www.apachefriends.org/ru/download.html

19.

Практическое занятие №3
http://localhost/phpmyadmin/ - здесь работаем с базами данных
Кодировка – utf8_unicode_ci

20.

Практическое занятие №3

21.

Практическое занятие №3

22.

Практическое занятие №3

23.

Практическое занятие №3
http://localhost/lab3/
Папка c:\xampp\htdocs – это http://localhost
Нельзя ссылаться на файлы выше c:\xampp\htdocs