Программирование в компьютерных сетях

Сентябрь 15, 2022

Главная
Алгебра
Программирование в компьютерных сетях

Содержание

2. Цели курса Целью курса «Программирование в компьютерных сетях» является приобретение теоретических и практических знаний, умений и
3. Цели курса Научиться осуществлять проектирование web-приложения; осуществлять поэтапную разработку страниц приложения по отдельности, а также интегрировать
4. Цели курса Иметь понимание: проблем и направлений развития Web-технологий; основные методы и средства проектирования программного обеспечения
5. Задачи курса Освоить язык гипертекстовой разметки HTML; CSS – каскадные таблицы стилей; PHP; Java-script, JQuery; Форматы
6. План лекции Основные понятия Основные виды браузеров и особенности их использования Обзор инструментария Технологии Web-программирования Основные
7. Основные понятия Основные виды браузеров и особенности их использования Обзор инструментария Технологии Web-программирования Основные вехи WEB
8. «WEB-программирование» Для чего нам нужен интернет и его инструменты? Для поиска и анализа информации Для презентации
9. Для поиска и анализа информации Для презентации себя и своих достижений Для зарабатывания денег Для общения
10. WEB-Документ – это документ, помещенный во Всемирной паутине для ознакомления с ним большого числа пользователей и
11. Web-сайт – набор документов информационного содержания, как правило, статический Web-сервис - сайт, созданный для выполнения каких-либо
12. Сайт – в компьютерной сети объединенная под одним адресом (доменным именем или IP-адресом) совокупность документов частного
13. Основные понятия «WEB-программирование» Статические сайты представляют из себя набор статических страниц, размещенных на сервере. Основным недостатком
14. Основные понятия «WEB-программирование» Подавляющее большинство веб-сайтов в Интернете являются гибридами. Например, интернет-магазин - это гибрид, который
15. Доме́н — область (ветвь) иерархического пространства доменных имён сети Интернет, которая обозначается уникальным доменным именем. Доменная
16. Доме́нное имя — символьное имя домена. Должно быть уникальным в рамках одного домена. Полное имя домена
17. Для преобразования IP-адресов серверов в доменные имена (и наоборот) служит DNS, представляющая собой распределённую систему серверов.
18. Услуга сдачи в аренду веб- и DNS-серверов для размещения веб-сайтов называется хостингом и оказывается хостинг-провайдерами, имеющими
19. Виды хостинга веб-сайтов: Colocation: сервер и его программное обеспечение принадлежит заказчику и размещается в дата-центре провайдера
20. Virtual private server (VPS): от предыдущего варианта отличается использованием технологий виртуализации с общим ядром и одинаковой
21. Shared-хостинг: используется многопользовательская ОС, клиенту предоставляется аккаунт одного пользователя с ограниченными правами, у каждого пользователя своя
22. Основные понятия Основные виды браузеров и особенности их использования Обзор инструментария Технологии Web-программирования Основные вехи WEB
23. Сейчас популярны четыре ядра, или семейства: На основе Gecko: FireFox, Mozilla, Netscape, SeaMonkey. На основе Trident:
24. Популярность браузеров на 2015 Обзор WEB-браузеров «WEB-программирование»
25. Что находится внутри браузера? «WEB-программирование»
26. Ограничения JS в браузере «WEB-программирование» Нельзя взаимодействовать с файловой системой Нет доступа к сетевым функциям, кроме
27. Популярность браузеров по Liveinternet в рунете 2015 (белым) на начало 2017г (черным) http://vawilon.ru/statistika-brauzerov Обзор WEB-браузеров «WEB-программирование»
28. Браузер (от английского «Web browser» – Веб-обозреватель, просмотрщик) является программой для просмотра страниц в интернете, а
29. В чем отличие WEB-браузера от поисковика? «WEB-программирование» Сегодня все браузеры имеют свои встроенные системы поиска, что
30. На заметку по возможности не размещать важную информацию в графике и дополнять рисунки комментарием в атрибуте
31. Кроссбраузерность HTML страниц Перейдите по адресу cdnjs.com/libraries/normalize и найдите версию данного файла, заканчивающуюся на .min.css (эта
32. Наиболее общая структура html страницы «WEB-программирование»
33. Основные понятия Основные виды браузеров и особенности их использования Обзор инструментария Технологии Web-программирования Основные вехи WEB
34. Создать персональную страницу с помощью конструкторов сайтов. Такой способ является простым и быстрым, но у него
35. Инструментарий «WEB-программирование»
36. Создать свою собственную персональную страницу вручную, написав ее с помощью HTML- кода. Сам код можно написать
37. Все HTML редакторы можно разделить на две основные категории: WYSIWYG HTML редактор кода. С помощью программ
38. Редактор HTML тегов. Работая с программами данного типа вы можете наблюдать непосредственный код страницы и изменять
39. Инструментарий «WEB-программирование» Пример online HTML редактора http://htmledit.squarefree.com/ http://www.internet-technologies.ru/articles/article_1857.html - обзор online редакторов
40. Инструментарий «WEB-программирование» Пример online HTML редактора JSFiddle JSFiddle — это место для написания и распространения кода.
41. Инструментарий «WEB-программирование» Пример online HTML редактора JSFiddle
42. Инструментарий «WEB-программирование» Пример WYSIWYG HTML редактора KompoZer https://sourceforge.net/projects/kompozer http://rus-linux.net/MyLDP/internet/KompoZer-nachalo-raboty.html - Инструкция по работе с программой http://ruseller.com/lessons.php?rub=28&id=675
43. Инструментарий «WEB-программирование» Пример локального HTML редактора - Brackets Официальный сайтОфициальный сайт - http://brackets.io Отличный open-source продукт
44. Инструментарий «WEB-программирование» Пример локального HTML редактора - Brackets плагин для Live Preview — работает только с
45. Инструментарий «WEB-программирование» WebStorm – среда разработки для JavaScript равно подходящая как для frontend’a, так и для
46. Основные понятия Основные виды браузеров и особенности их использования Обзор инструментария Технологии Web-программирования Основные вехи WEB
47. Технологии Web-программирования Javascript: позволяет создавать интерактивные и программируемые web-страницы «WEB-технологии. Язык HTML» Hypertext Markup Language (HTML):
48. Технологии Web-программирования Structured Query Language SQL – обеспечивает взаимодействие с базами данных. Asynchronous Javascript and XML
49. Технологии Web-программирования «WEB-программирование. Язык HTML» http://evolutionofweb.appspot.com/ Следующие 3 страницы предоставляют вам ретроспективу развития WEB-технологий. Найти ее
54. Среди совсем недавно появившихся технологий - WebGL, о котором много говорят последнее время. Очень эффективный пример
55. Итак, WebGL позволяет получать доступ к ресурсам видеокарты для отображения в реальном времени 3D-графики на интернет-страницах.
56. Направления в WEB – разработке «WEB-программирование»
57. Направления в WEB – разработке «WEB-программирование» Фронтенд-разработчик Бекенд-разработчик
58. Направления в WEB – разработке «WEB-программирование» Структура web-приложений: этап 1 Frontend Отображение статических HTML-страниц (HTML, CSS)
59. Направления в WEB – разработке «WEB-программирование» Структура web-приложений: этап 2 Frontend Отображение статических HTML-страниц (HTML, CSS)
60. Направления в WEB – разработке «WEB-программирование» Структура web-приложений: этап 3 Backend Реализация публичного API Хранение данных
61. Направления в WEB – разработке «WEB-программирование» Структура web-приложений
62. Направления в WEB – разработке «WEB-программирование» Часть работодателей не отличают (или не хотят отличать) верстальщика от
63. Направления в WEB – разработке «WEB-программирование» Карьерный путь фронтендера обычно начинается с верстальщика — это самый
64. Направления в WEB – разработке «WEB-программирование» Фронтенд-разработчик
65. Направления в WEB – разработке «WEB-программирование»
66. Направления в WEB – разработке «WEB-программирование» Какие технологии должен освоить фронтенд-разработчик: HTML и CSS (в том
67. Направления в WEB – разработке «WEB-программирование» Back-end разработчики несут ответственность за создание "серверной" части в веб-приложениях,
68. Направления в WEB – разработке «WEB-программирование» Основные навыки: Свободное владение серверными языками PHP, Python, Ruby, Java,
69. Направления в WEB – разработке «WEB-программирование» DevOps (акроним от development и operations) — набор практик, нацеленных
70. Направления в WEB – разработке «WEB-программирование» DevOps Поскольку DevOps — это командная работа (между сотрудниками, занимающимися
71. Основные понятия Основные виды браузеров и особенности их использования Технологии Web-программирования Основные вехи WEB Перечень лабораторных
72. Основные вехи WEB «WEB-программирование. Язык HTML»
73. Основные вехи WEB HTTP/0.9 HTTP был предложен в марте 1991 года Тимом Бернерсом-Ли, работавшим тогда в
74. Основные вехи WEB «WEB-программирование. Язык HTML» Сэр Тимоти Джон Бернерс-Ли (англ. Sir Timothy John «Tim» Berners-Lee;
75. Основные вехи WEB «WEB-программирование. Язык HTML» HyperText Markup Language —«язык разметки гипертекста», является приложением SGML (стандартного
76. Основные вехи WEB Первый WEB-браузер* - 1993г. «WEB-программирование. Язык HTML» NCSA Mosaic (по-русски произносят [маза́ик]) —
77. Основные вехи WEB «WEB-программирование. Язык HTML» Первый WEB-браузер - 1993г.
78. Основные понятия Основные виды браузеров и особенности их использования Технологии Web-программирования Основные вехи WEB Перечень лабораторных
79. Структура курса «WEB-программирование» Курс разделен на 2 части: Фронтэнд разработка Бэкенд разработка 17 лекций и 17
80. «WEB-программирование» Перечень лабораторных работ к первой части курса
81. «WEB-программирование» Перечень лабораторных работ ко второй части курса
82. Использованные источники Как стать веб-разработчиком в 2017 году — план действий. В свободном доступе: https://habrahabr.ru/company/netologyru/blog/328426/ Что
83. Полезные ссылки Скринкаст по Node.js MDN (Mozilla Developer Network — веб-технологии для разработчиков) learn.javascript.ru — основной
85. Скачать презентацию

Слайд 2

Цели курса
Целью курса «Программирование в компьютерных сетях» является приобретение теоретических и

практических знаний, умений и навыков, ориентированных на эффективное профессиональное использование современных web-технологий.

«WEB-программирование»

Слайд 3

Цели курса
Научиться
осуществлять проектирование web-приложения;
осуществлять поэтапную разработку страниц приложения по отдельности,

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

«WEB-программирование»

Слайд 4

Цели курса
Иметь понимание:
проблем и направлений развития Web-технологий;
основные методы и средства

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

«WEB-программирование»

Слайд 5

Задачи курса
Освоить
язык гипертекстовой разметки HTML;
CSS – каскадные таблицы стилей;
PHP;
Java-script,

JQuery;
Форматы для передачи данных в клиент-серверных приложениях.
Выполнить
Разработку сайта.

«WEB-программирование»

Слайд 6

План лекции
Основные понятия
Основные виды браузеров и особенности их использования
Обзор инструментария
Технологии Web-программирования

Основные вехи WEB
Перечень лабораторных работ

«WEB-программирование»

Слайд 7

Основные понятия
Основные виды браузеров и особенности их использования
Обзор инструментария
Технологии Web-программирования
Основные

вехи WEB
Перечень лабораторных работ

«WEB-программирование»

Слайд 8

«WEB-программирование»
Для чего нам нужен интернет и его инструменты?
Для поиска и

анализа информации
Для презентации себя и своих достижений
Для зарабатывания денег
Для общения

Слайд 9

Для поиска и
анализа информации
Для презентации себя и своих достижений
Для

зарабатывания денег
Для общения

WEB-страницы и сайты

Браузеры и поисковики

Соцсети, почта, сервисы

Сайты, сервисы, средства аналитики

Соцсети, сервисы,
средства аналитики

Какими инструментами мы пользуемся?

«WEB-программирование»

Слайд 10

WEB-Документ – это документ, помещенный во Всемирной паутине для ознакомления с

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

«WEB-программирование»

Основные понятия

Это одно и то же?

Слайд 11

Web-сайт – набор документов информационного содержания, как правило, статический
Web-сервис - сайт,

созданный для выполнения каких-либо задач или предоставления услуг в рамках сети. У онлайн-сервиса есть уникальный функционал. Это может быть конструктор товара, фотохостинг, закрытая социальная сеть для корпоративного пользования, открытая социальная сеть, доска объявлений, почтовый сервис, файлообменный, облачное хранилище…
Web-приложение – сервис может являться частью приложения.

«WEB-программирование»

Основные понятия

Слайд 12

Сайт – в компьютерной сети объединенная под одним адресом (доменным именем

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

Основные понятия – сайт

«WEB-программирование»

Слайд 13

Основные понятия
«WEB-программирование»
Статические сайты представляют из себя набор статических страниц, размещенных

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

Слайд 14

Основные понятия
«WEB-программирование»
Подавляющее большинство веб-сайтов в Интернете являются гибридами. Например, интернет-магазин -

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

Слайд 15

Доме́н — область (ветвь) иерархического пространства доменных имён сети Интернет, которая

обозначается уникальным доменным именем.

Доменная система имен иерархическая, поэтому домены бывают разных уровней. Домены бывают 1-го, 2-го и 3-го уровней.
Адрес сайта «читается» компьютером именно с конца, с домена первого уровня.

Основные понятия

«WEB-программирование»

Слайд 16

Доме́нное имя — символьное имя домена. Должно быть уникальным в рамках

одного домена. Полное имя домена состоит из имён всех доменов, в которые он входит, разделённых точками. Например, полное имя ru.wikipedia.org обозначает домен третьего уровня ru, который входит в домен второго уровня wikipedia, который входит в домен org, входящий, в свою очередь, в корневой домен.
Доменное имя служит для адресации узлов сети Интернет и расположенных на них сетевых ресурсов (веб-сайтов, серверов электронной почты, других служб) в удобной для человека форме.

Основные понятия – Доменное имя

«WEB-программирование»

Слайд 17

Для преобразования IP-адресов серверов в доменные имена (и наоборот) служит DNS,

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

Основные понятия - DNS

«WEB-программирование»

Слайд 18

Услуга сдачи в аренду веб- и DNS-серверов для размещения веб-сайтов называется

хостингом и оказывается хостинг-провайдерами, имеющими необходимые лицензии, специально оборудованные помещения (дата-центры), каналы связи, техническую поддержку. Мелкие хостинг-провайдеры, так называемые реселлеры, не имеют своего дата-центра и арендуют необходимые ресурсы.
Распространены следующие виды хостинга веб-сайтов:
Colocation;
Dedicated;
Virtual dedicated server (VDS);
Virtual private server (VPS);
Shared-хостинг;
Cloud computing.

Хостинг

«WEB-программирование»

Слайд 19

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

размещается в дата-центре провайдера в стойке с другими серверами;
Dedicated: владельцем сервера является хостинг-провайдер, который может оказывать техническую поддержку операционной системы и ПО;
Virtual dedicated server (VDS): на мощном сервере запущено несколько виртуальных серверов с помощью технологии виртуализации, один из которых сдается в аренду конкретному клиенту. Каждая виртуальная машина имеет свой IP-адрес, может содержать любую ОС и ПО, имеет гарантированные минимальные ресурсы (память, процессорное время или количество ядер CPU);

Хостинг

«WEB-программирование»

Слайд 20

Virtual private server (VPS): от предыдущего варианта отличается использованием технологий виртуализации

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

Хостинг

«WEB-программирование»

Слайд 21

Shared-хостинг: используется многопользовательская ОС, клиенту предоставляется аккаунт одного пользователя с ограниченными правами,

у каждого пользователя своя область дисковой памяти. Общие для всех пользователей ресурсы сервера и, как правило, IP-адрес. Несколько сотен сайтов могут быть размещены на одном физическом сервере с одним IP-адресом (виртуальный хостинг по имени). Самый массовый вид хостинга, подходящий для большинства простых веб-сайтов;
Cloud computing: запрос приходит на ферму серверов, клиент платит за количество запросов, за место для хранения данных и за объем передаваемых данных.

Хостинг

«WEB-программирование»

Слайд 22

Основные понятия
Основные виды браузеров и особенности их использования
Обзор инструментария
Технологии Web-программирования
Основные

вехи WEB
Перечень лабораторных работ

«WEB-программирование»

Слайд 23

Сейчас популярны четыре ядра, или семейства:
На основе Gecko: FireFox, Mozilla,

Netscape, SeaMonkey.
На основе Trident: Internet Explorer, Maxthon (MyIE).
На основе KHTML или WebKit: Konqueror, Safari, браузер телефонов Nokia 60 Series.
На основе Presto и Merlin: Opera (с версии 15 переход на WebKit).

Основные виды браузеров и их особенности

Браузер (от англ. browse — просматривать, листать) — это специальная программа, позволяющая просматривать содержимое сети Интернет.

Обзор WEB-браузеров

«WEB-программирование»

Слайд 24

Популярность браузеров на 2015
Обзор WEB-браузеров
«WEB-программирование»

Слайд 25

Что находится внутри браузера?
«WEB-программирование»

Слайд 26

Ограничения JS в браузере
«WEB-программирование»
Нельзя взаимодействовать с файловой системой
Нет доступа к

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

Слайд 27

Популярность браузеров по Liveinternet в рунете 2015 (белым)
на начало 2017г (черным)
http://vawilon.ru/statistika-brauzerov

Обзор WEB-браузеров

«WEB-программирование»

Chrome

Yandex

Firefox

Opera

6,66

8,77

Слайд 28

Браузер (от английского «Web browser» – Веб-обозреватель, просмотрщик) является программой для

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

В чем отличие WEB-браузера от поисковика?

«WEB-программирование»

Слайд 29

В чем отличие WEB-браузера от поисковика?
«WEB-программирование»
Сегодня все браузеры имеют свои

встроенные системы поиска, что облегчает работу в сети Интернет. Многие крупные владельцы поисковых систем обзаводятся своими интернет-браузерами, например, Yandex (Yandex браузер), Google (Google Chrome) и другие. Конечно, встроенный поиск в этих браузерах – это поисковая система этой же компании.

http://infox45.ru/prodvizhenie-sajtov/o-poiskovyx-sistemax-runeta

Слайд 30

На заметку
по возможности не размещать важную информацию в графике и

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

Различные браузеры показывают конкретную страницу по-разному. Отображение страниц зависит от работы алгоритмов коррекции, встроенных в браузер, а в разных браузерах эти алгоритмы различны.

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

проверять страницы сайта во всех распространенных браузерах -
Chrome, Firefox, Mozilla, Opera, IE, — причем в разных версиях;

предоставлять разные варианты доступа к информации
(самое лучшее — создать дополнительно текстовую версию);

Обзор WEB-браузеров

«WEB-программирование»

Слайд 31

Кроссбраузерность HTML страниц
Перейдите по адресу cdnjs.com/libraries/normalize и найдите версию данного файла,

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

Normalize.css является альтернативой CSS Reset. Проект является продуктом сотен часов глубокого исследования различий между изначальными стилями браузера. Это исследование провели Николас Галахер, и Джонатан Нил/
Цели normalize.css:
сохранять полезные настройки браузера, а не стирать их;
нормализовать стили для широкого круга HTML-элементов;
корректировать ошибки и основные несоответствия браузера;
совершенствовать юзабилити незаметными улучшениями;
объяснять код, используя комментарии и детальную документацию.
Он поддерживает широкий диапазон браузеров (в том числе мобильных) и включает в себя CSS, который нормализует HTML5-элементы, типографику, списки, встраиваемый контент, формы и таблицы.

«WEB-программирование»

Обзор WEB-браузеров

Слайд 32

Наиболее общая структура html страницы
«WEB-программирование»

Слайд 33

Основные понятия
Основные виды браузеров и особенности их использования
Обзор инструментария
Технологии Web-программирования
Основные

вехи WEB
Перечень лабораторных работ

«WEB-программирование»

Слайд 34

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

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

Инструментарий

«WEB-программирование»

Существует множество способов создать свою собственную web-страницу.

Слайд 35

Инструментарий
«WEB-программирование»

Слайд 36

Создать свою собственную персональную страницу вручную, написав ее с помощью HTML-

кода. Сам код можно написать как в простом текстовом редакторе (прим. переводчика - наподобие Блокнота в Windows или Kate в Linux), так и в специализированном редакторе HTML-кода, который поможет в создании правильной и грамотной структуры страницы. Многие программисты считают данный способ наиболее правильным и используют только его в своей работе, и утверждают, что этот способ чуть ли ни единственный правильный и HTML-код нужно создавать только вручную. Можно сказать, что этот способ, без сомнения, является наилучшим при создании персональных страниц. Но в этом случае можно легко допустить ошибки при написании кода.

Инструментарий

«WEB-программирование»

Слайд 37

Все HTML редакторы можно разделить на две основные категории:
WYSIWYG HTML редактор

кода. С помощью программ данного типа можно создавать веб-страницы без знания языков программирования, что следует из названия: What You See Is What You Get (что видишь, то и получаешь). Преимуществом является отсутствие углубления непосредственно в процесс строительства страницы, однако это же является и недостатком. Редакторы этого типа зачастую формируют объёмные HTML коды, в результате чего документ получается невероятно громоздким и время его загрузки увеличивается.

Инструментарий

«WEB-программирование»

Разновидности HTML редакторов

Слайд 38

Редактор HTML тегов. Работая с программами данного типа вы можете наблюдать

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

Инструментарий

«WEB-программирование»

Разновидности HTML редакторов

Слайд 39

Инструментарий
«WEB-программирование»
Пример online HTML редактора
http://htmledit.squarefree.com/
http://www.internet-technologies.ru/articles/article_1857.html - обзор online редакторов

Слайд 40

Инструментарий
«WEB-программирование»
Пример online HTML редактора
JSFiddle
JSFiddle — это место для написания и распространения

кода. Сайт предоставляет панели для написания CSS-, HTML- и JS-кода вашего проекта. JSFiddle также позволяет подключать библиотеки, такие как JQuery, AngularJS и т.п. После этого вы можете запустить код в самом приложении или сохранить его и поделиться с другими.

Слайд 41

Инструментарий
«WEB-программирование»
Пример online HTML редактора
JSFiddle

Слайд 42

Инструментарий
«WEB-программирование»
Пример WYSIWYG HTML редактора KompoZer
https://sourceforge.net/projects/kompozer
http://rus-linux.net/MyLDP/internet/KompoZer-nachalo-raboty.html - Инструкция по работе с

программой

http://ruseller.com/lessons.php?rub=28&id=675 10 бесплатных редакторов для веб страниц

Слайд 43

Инструментарий
«WEB-программирование»
Пример локального HTML редактора - Brackets
Официальный сайтОфициальный сайт -

http://brackets.io
Отличный open-source продукт от Adobe, который имеет уже множество плагинов, расширений, дополнений. На взгляд разработчиков — перспективная вещь.
Написан на HTML, CSS, JavaScript.
Интерфейс
В стиле Adobe. Все очень просто и понятно, но при этом стильно.
Функционал
Стандартный, но к счастью полная поддержка LESS, SCSS. И внимание: тут есть некое подобие парсинга PSD. Т.е. редактор анализирует ваш PSD макет и вы свободно можете исходя из PSD сделать разметку стилей вашей страницы. Adobe есть Adobe.

Слайд 44

Инструментарий
«WEB-программирование»
Пример локального HTML редактора - Brackets
плагин для Live Preview

— работает только с Google Chrome. Вносим какие-либо изменения в код в редакторе — в окне браузера автоматически отображаются изменения:
подсказки при редактировании CSS, JS и HTML-файлов;

Уроки по Brackets http://master-css.com/page/brackets-code-editor

Слайд 45

Инструментарий
«WEB-программирование»
WebStorm – среда разработки для JavaScript равно подходящая как для

frontend’a, так и для создания приложений на Node.js и мобильных приложений на React Native. Этот инструмент разработан компанией JetBrains и является платным.
Многие разработчики считают WebStorm лучшей IDE для веб-разработки.

Live Edit позволяет мгновенно видеть результаты ваших изменений в CSS, HTML и JavaScript файлах проекта в браузере без перезагрузки страницы. Live Edit доступен в режиме отладки JavaScript и работает в браузере Google Chrome с предустановленным плагином JetBrains IDE Support.
WebStorm поддерживает современные языки, компилируемые в JavaScript, такие как TypeScript, CoffeeScript и новую версию JavaScript – ECMAScript 2017, предлагая автодополнение кода, проверку ошибок, рефакторинг и отладку.

Функционал

Слайд 46

Основные понятия
Основные виды браузеров и особенности их использования
Обзор инструментария
Технологии Web-программирования
Основные

вехи WEB
Перечень лабораторных работ

«WEB-программирование»

Слайд 47

Технологии Web-программирования
Javascript: позволяет создавать интерактивные и программируемые web-страницы
«WEB-технологии. Язык

HTML»

Hypertext Markup Language (HTML): используется для написания WEB-страниц

XHTML: Более новая, более тщательно стандартизированная спецификация HTML

Cascading Style Sheets (CSS): содержит стилистическое оформление web-страниц

Слайд 48

Технологии Web-программирования
Structured Query Language SQL – обеспечивает взаимодействие с базами

данных.

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

PHP (Hypertext Preprocessor) позволяет WEB-серверу динамически создавать страницы

«WEB-технологии. Язык HTML»

Слайд 49

Технологии Web-программирования
«WEB-программирование. Язык HTML»
http://evolutionofweb.appspot.com/
Следующие 3 страницы предоставляют вам

ретроспективу развития WEB-технологий.
Найти ее вы можете по адресу:

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

Слайд 50

Слайд 51

Слайд 52

Слайд 53

Слайд 54

Среди совсем недавно появившихся технологий - WebGL, о котором много говорят

последнее время.
Очень эффективный пример использования –http://bodybrowser.googlelabs.com/moo.html

«WEB-программирование. Язык HTML»

Демонстрация строения тела коровы. Позволяет бегунком слева отображать тело «по уровням». Объект можно отдалять и приближать, а также перемещать мышью.

Слайд 55

Итак, WebGL позволяет получать доступ к ресурсам видеокарты для отображения в

реальном времени 3D-графики на интернет-страницах. На данный момент, в финальных версиях всех браузеров поддержка WebGL имеется только в Firefox и Chrome, Opera и Apple. Явно от реализации уклонилась пока Microsoft, но, скорее всего, передумают и они.

«WEB-программирование. Язык HTML»

Взаимодействие видео с 3D-графикой и JavaScript-объектами. Первые шаги к расширенной реальности в Интернете.

Слайд 56

Направления в WEB – разработке
«WEB-программирование»

Слайд 57

Направления в WEB – разработке
«WEB-программирование»
Фронтенд-разработчик
Бекенд-разработчик

Слайд 58

Направления в WEB – разработке
«WEB-программирование»
Структура web-приложений: этап 1
Frontend
Отображение

статических HTML-страниц (HTML, CSS)
Контент на страницах, переходы по гиперссылкам

Backend
Хранение статических документов и отдача по запросу по протоколу HTTP

На данном этапе сайты назывались web-ресурсами

Слайд 59

Направления в WEB – разработке
«WEB-программирование»
Структура web-приложений: этап 2
Frontend
Отображение

статических HTML-страниц (HTML, CSS)
Контент на страницах, переходы по гиперссылкам
Взаимодействие с сервисом посредством форм

Backend
Хранение статических документов и отдача по запросу по протоколу HTTP
Обработка пользовательских запросов и генерация динамических страниц
Хранение данных в базе данных.

На данном этапе сайты назывались web-сервисами

Слайд 60

Направления в WEB – разработке
«WEB-программирование»
Структура web-приложений: этап 3
Backend
Реализация

публичного API
Хранение данных в базе данных и работа с ними

Теперь сайты называют web-приложениями

Frontend
Хранение и доступ к статическому контенту (файлы стилей, скрипты)
Генерация и отображение пользовательского интерфейса
Взаимодействие с пользователем и выполнение запросов к API
Обновление пользовательского интерфейса в ответ на действия пользователя.

Слайд 61

Направления в WEB – разработке
«WEB-программирование»
Структура web-приложений

Слайд 62

Направления в WEB – разработке
«WEB-программирование»
Часть работодателей не отличают (или

не хотят отличать) верстальщика от фронтенд-разработчика:
Верстальщик — боец узкого фронта. Его задача — сверстать полученный от дизайнера макет, используя HTML+CSS. Он, возможно, немного умеет в JavaScript, но чаще ограничивается умением прикрутить какой-нибудь плагин jQuery.
Фронтенд-разработчик — это универсальный солдат. Он и макет заверстает, и веб-приложение построит, и серверную часть, если надо, освоит. Знать надо немало: HTML, CSS, JavaScript, библиотеки и фреймворки JS, препроцессоры и фреймворки CSS, системы контроля версий и таскраннеры, технологии бэкенда, юнит-тестирование и многое другое.

Слайд 63

Направления в WEB – разработке
«WEB-программирование»
Карьерный путь фронтендера обычно начинается

с верстальщика — это самый логичный и общепринятый вариант. Сначала изучается связка HTML+CSS, затем на нее «наслаиваются» знания JavaScript, библиотек и фреймворков. Будущий специалист также изучает ключевые понятия построения серверной части, добавляет сюда инструменты, необходимые для выбранной специализации. Затем все это шлифуется умением работать с контролем версий, графическими редакторами и пониманием принципов UI/UX-дизайна.

User Experience Design в переводе означает «опыт взаимодействия» и включает в себя различные UX-компоненты: информационную архитектуру, проектирование взаимодействия, графический дизайн и контент.

Фронтенд-разработчик

Слайд 64

Направления в WEB – разработке
«WEB-программирование»
Фронтенд-разработчик

Слайд 65

Направления в WEB – разработке
«WEB-программирование»

Слайд 66

Направления в WEB – разработке
«WEB-программирование»
Какие технологии должен освоить фронтенд-разработчик:
HTML

и CSS (в том числе сетки и CSS-фреймворки, спецификации W3C и WHATWG, HTML5/CSS3 Polyfills)
Препроцессоры CSS (Sass, Less, Stylus и т. д.)
JavaScript
Популярные фреймворки и библиотеки: jQuery, Angular.JS, React.JS, Backbone.js и т. д.)
SVG
DOM
HTML5 API
ECMAScript 6
Популярные CMS (WordPress, Drupal, Joomla и т.д.)
Понимать принципы построения бекэнда и разбираться в серверных технологиях (Node.js, PHP, Ruby, .NET и т. д.)
Инструменты дебаггинга (Chrome Dev Tools, Firebug и прочие)
Инструменты контроля версий (Git, GitHub, CVS и т. д.)
Базы данных и языки запросов (SQL, MySql, NoSQL, MongoDB и т. д.)
Графические редакторы (Photoshop, Illustrator и т. д.)

Фронтенд-разработчик

Слайд 67

Направления в WEB – разработке
«WEB-программирование»
Back-end разработчики несут ответственность за

создание "серверной" части в веб-приложениях, иначе говоря, они имеют дело со всем, что относится к программно-административной части веб-приложения, внутреннему содержанию системы, серверным технологиям — базам данных, архитектуре, программной логике.
Back-end разработчик должен знать серверные языки программирования, такие как PHP, Python, Ruby, Java, Perl, Node JS (программные платформы). Дополнительно к Node JS этому специалисту полезно будет изучить Express (библиотеку для взаимодействия платформы Node JS с сервером) и Mongo DB (базу данных для получения и хранения информации). В качестве дополнительных средств применяются фреймворки Symfony, Codeigniter, Yii, Zend Framework, Kohana и др.

Back-end разработчик

Слайд 68

Направления в WEB – разработке
«WEB-программирование»
Основные навыки:
Свободное владение серверными языками

PHP, Python, Ruby, Java, Perl, Node JS, а также фреймворками Symfony, Codeigniter, Yii, Zend Framework, Kohana и др;
Понимание интерфейсных веб-технологий, таких как HTML, CSS, и JavaScrip;
Навыки работы с большими объемами информации;
Способность организовывать серверное окружение, включая администрирование баз данных, а также масштабирование приложений;
Знание всех стандартов безопасности;
Опыт работы с системами контроля версий, таких как Git;
Знание английского языка для работы с технической документацией.

Back-end разработчик

Средний уровень ЗП по России

Слайд 69

Направления в WEB – разработке
«WEB-программирование»
DevOps (акроним от development и

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

DevOps

Иллюстрация, показывающая DevOps как пересечение разработки, эксплуатации и тестирования

Слайд 70

Направления в WEB – разработке
«WEB-программирование»
DevOps
Поскольку DevOps — это командная работа

(между сотрудниками, занимающимися разработкой, операциями и тестированием), нет единого инструмента «DevOps»: это скорее набор (или «инструментальная цепочка DevOps»), состоящий из нескольких инструментов. Как правило, инструменты DevOps вписываются в одну или несколько из этих категорий, что отражает ключевые аспекты разработки и доставки программного обеспечения:
Code — разработка и анализ кода, инструменты контроля версий, слияние кода;
Build — инструменты непрерывной интеграции, статус сборки;
Test — инструменты непрерывного тестирования, которые обеспечивают обратную связь по бизнес-рискам;
Пакет — репозиторий артефактов, предварительная установка приложения;
Release — управление изменениями, официальное утверждение выпуска, автоматизация выпуска;
Конфигурация — Конфигурация и управление инфраструктурой, Инфраструктура как инструменты кода;
Мониторинг — мониторинг производительности приложений, опыт работы с конечным пользователем.

Слайд 71

Основные понятия
Основные виды браузеров и особенности их использования
Технологии Web-программирования
Основные вехи

WEB
Перечень лабораторных работ

«WEB-программирование»

Слайд 72

Основные вехи WEB
«WEB-программирование. Язык HTML»

Слайд 73

Основные вехи WEB
HTTP/0.9
HTTP был предложен в марте 1991 года Тимом

Бернерсом-Ли, работавшим тогда в CERN (The European Organization for Nuclear Research), как механизм для доступа к документам в Интернете и облегчения навигации посредством использования гипертекста.
Самая ранняя версия протокола HTTP/0.9 была впервые опубликована в январе 1992 г. (хотя реализация датируется 1990 годом). Спецификация протокола привела к упорядочению правил взаимодействия между клиентами и серверами HTTP, а также чёткому разделению функций между этими двумя компонентами.

«WEB-программирование. Язык HTML»

Были задокументированы основные синтаксические и семантические положения.

Слайд 74

Основные вехи WEB
«WEB-программирование. Язык HTML»
Сэр Тимоти Джон Бернерс-Ли (англ. Sir

Timothy John «Tim» Berners-Lee; род. 8 июня 1955) — знаменитый британский учёный, изобретатель URI, URL, HTTP, HTML, изобретатель Всемирной паутины (совместно с Робертом Каиллау ) и действующий глава Консорциума Всемирной паутины (W3C).
Автор концепции семантической паутины. Автор множества других разработок в области информационных технологий.

Слайд 75

Основные вехи WEB
«WEB-программирование. Язык HTML»
HyperText Markup Language —«язык разметки гипертекста»,

является приложением SGML (стандартного обобщённого языка разметки), соответствующего международному стандарту ISO 8879

1990-1995 – Начальное развитие («относительно хаотичное»)
1995-2000 – Стандартизация
2000-2005 – Поиск путей дальнейшего развития
2005-наст. время – Разработка нового поколения HTML (HTML 5)

4 этапа в развитии HTML

Слайд 76

Основные вехи WEB
Первый WEB-браузер* - 1993г.
«WEB-программирование. Язык HTML»
NCSA Mosaic (по-русски

произносят [маза́ик]) — это первый веб-браузер под операционную систему Microsoft Windows с графическим интерфейсом пользователя и развитыми возможностями, на котором были основаны и Netscape Navigator, и Microsoft IE

Были и другие примеры успешных реализаций графических браузеров, но все они – до Моsaic – имели лишь небольшой круг пользователей.

Основными разработчиками Mosaic были Марк Андерссен и Эрик Бина, работавшие в Национальном центре применения суперкомпьютеров (National Center for Supercomputing Applications) Иллинойского университета.

Слайд 77

Основные вехи WEB
«WEB-программирование. Язык HTML»
Первый WEB-браузер - 1993г.

Слайд 78

Основные понятия
Основные виды браузеров и особенности их использования
Технологии Web-программирования
Основные вехи

WEB
Перечень лабораторных работ

«WEB-программирование»

Слайд 79

Структура курса
«WEB-программирование»
Курс разделен на 2 части:
Фронтэнд разработка
Бэкенд разработка
17 лекций

и 17 лабораторных работ

Слайд 80

«WEB-программирование»
Перечень лабораторных работ к первой части курса

Слайд 81

«WEB-программирование»
Перечень лабораторных работ ко второй части курса

Слайд 82

Использованные источники
Как стать веб-разработчиком в 2017 году — план действий. В

свободном доступе: https://habrahabr.ru/company/netologyru/blog/328426/
Что должен уметь фронтенд-разработчик. В свободном доступе: https://habrahabr.ru/company/netologyru/blog/327294/
Brackets для сомневающихся и новичков. В свободном доступе: https://habrahabr.ru/post/242623/

Слайд 83

Полезные ссылки
Скринкаст по Node.js
MDN (Mozilla Developer Network — веб-технологии для

разработчиков)
learn.javascript.ru — основной источник информации о JS для начинающих
WebReference.ru — основной источник информации о HTML5 и CSS3 для начинающих

Программирование в компьютерных сетях

Содержание

Цели курсаЦелью курса «Программирование в компьютерных сетях» является приобретение теоретических и

Цели курсаНаучиться осуществлять проектирование web-приложения;осуществлять поэтапную разработку страниц приложения по отдельности,

Цели курсаИметь понимание: проблем и направлений развития Web-технологий;основные методы и средства

Задачи курсаОсвоить язык гипертекстовой разметки HTML; CSS – каскадные таблицы стилей;PHP;Java-script,

План лекцииОсновные понятияОсновные виды браузеров и особенности их использованияОбзор инструментарияТехнологии Web-программирования

Основные понятияОсновные виды браузеров и особенности их использованияОбзор инструментарияТехнологии Web-программирования Основные

«WEB-программирование»Для чего нам нужен интернет и его инструменты?Для поиска и

Для поиска и анализа информацииДля презентации себя и своих достиженийДля

WEB-Документ – это документ, помещенный во Всемирной паутине для ознакомления с

Web-сайт – набор документов информационного содержания, как правило, статическийWeb-сервис - сайт,

Сайт – в компьютерной сети объединенная под одним адресом (доменным именем

Основные понятия «WEB-программирование» Статические сайты представляют из себя набор статических страниц, размещенных

Основные понятия «WEB-программирование» Подавляющее большинство веб-сайтов в Интернете являются гибридами. Например, интернет-магазин -

Доме́н — область (ветвь) иерархического пространства доменных имён сети Интернет, которая

Доме́нное имя — символьное имя домена. Должно быть уникальным в рамках

Для преобразования IP-адресов серверов в доменные имена (и наоборот) служит DNS,

Услуга сдачи в аренду веб- и DNS-серверов для размещения веб-сайтов называется

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

Virtual private server (VPS): от предыдущего варианта отличается использованием технологий виртуализации

Shared-хостинг: используется многопользовательская ОС, клиенту предоставляется аккаунт одного пользователя с ограниченными правами,

Основные понятияОсновные виды браузеров и особенности их использованияОбзор инструментарияТехнологии Web-программирования Основные

Сейчас популярны четыре ядра, или семейства: На основе Gecko: FireFox, Mozilla,

Популярность браузеров на 2015Обзор WEB-браузеров «WEB-программирование»

Что находится внутри браузера? «WEB-программирование»

Ограничения JS в браузере «WEB-программирование» Нельзя взаимодействовать с файловой системойНет доступа к

Популярность браузеров по Liveinternet в рунете 2015 (белым)на начало 2017г (черным)http://vawilon.ru/statistika-brauzerov

Браузер (от английского «Web browser» – Веб-обозреватель, просмотрщик) является программой для

В чем отличие WEB-браузера от поисковика? «WEB-программирование» Сегодня все браузеры имеют свои

На заметку по возможности не размещать важную информацию в графике и

Кроссбраузерность HTML страниц Перейдите по адресу cdnjs.com/libraries/normalize и найдите версию данного файла,

Наиболее общая структура html страницы «WEB-программирование»

Основные понятияОсновные виды браузеров и особенности их использованияОбзор инструментарияТехнологии Web-программирования Основные

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

Инструментарий «WEB-программирование»

Создать свою собственную персональную страницу вручную, написав ее с помощью HTML-

Все HTML редакторы можно разделить на две основные категории:WYSIWYG HTML редактор

Редактор HTML тегов. Работая с программами данного типа вы можете наблюдать

Инструментарий «WEB-программирование» Пример online HTML редактораhttp://htmledit.squarefree.com/http://www.internet-technologies.ru/articles/article_1857.html - обзор online редакторов

Инструментарий «WEB-программирование» Пример online HTML редактораJSFiddleJSFiddle — это место для написания и распространения

Инструментарий «WEB-программирование» Пример online HTML редактораJSFiddle

Инструментарий «WEB-программирование» Пример WYSIWYG HTML редактора KompoZerhttps://sourceforge.net/projects/kompozerhttp://rus-linux.net/MyLDP/internet/KompoZer-nachalo-raboty.html - Инструкция по работе с

Инструментарий «WEB-программирование» Пример локального HTML редактора - Brackets Официальный сайтОфициальный сайт -

Инструментарий «WEB-программирование» Пример локального HTML редактора - Brackets плагин для Live Preview

Инструментарий «WEB-программирование» WebStorm – среда разработки для JavaScript равно подходящая как для

Основные понятияОсновные виды браузеров и особенности их использованияОбзор инструментарияТехнологии Web-программирования Основные

Технологии Web-программирования Javascript: позволяет создавать интерактивные и программируемые web-страницы «WEB-технологии. Язык

Технологии Web-программирования Structured Query Language SQL – обеспечивает взаимодействие с базами

Технологии Web-программирования «WEB-программирование. Язык HTML» http://evolutionofweb.appspot.com/Следующие 3 страницы предоставляют вам

Среди совсем недавно появившихся технологий - WebGL, о котором много говорят

Итак, WebGL позволяет получать доступ к ресурсам видеокарты для отображения в

Направления в WEB – разработке «WEB-программирование»

Направления в WEB – разработке «WEB-программирование» Фронтенд-разработчикБекенд-разработчик

Направления в WEB – разработке «WEB-программирование» Структура web-приложений: этап 1Frontend Отображение

Направления в WEB – разработке «WEB-программирование» Структура web-приложений: этап 2Frontend Отображение

Направления в WEB – разработке «WEB-программирование» Структура web-приложений: этап 3Backend Реализация

Направления в WEB – разработке «WEB-программирование» Структура web-приложений

Направления в WEB – разработке «WEB-программирование» Часть работодателей не отличают (или

Направления в WEB – разработке «WEB-программирование» Карьерный путь фронтендера обычно начинается

Направления в WEB – разработке «WEB-программирование» Фронтенд-разработчик

Направления в WEB – разработке «WEB-программирование»

Направления в WEB – разработке «WEB-программирование» Какие технологии должен освоить фронтенд-разработчик:HTML

Направления в WEB – разработке «WEB-программирование» Back-end разработчики несут ответственность за

Направления в WEB – разработке «WEB-программирование» Основные навыки:Свободное владение серверными языками

Направления в WEB – разработке «WEB-программирование» DevOps (акроним от development и

Направления в WEB – разработке «WEB-программирование» DevOpsПоскольку DevOps — это командная работа

Основные понятияОсновные виды браузеров и особенности их использованияТехнологии Web-программирования Основные вехи

Основные вехи WEB «WEB-программирование. Язык HTML»

Основные вехи WEBHTTP/0.9 HTTP был предложен в марте 1991 года Тимом

Основные вехи WEB «WEB-программирование. Язык HTML» Сэр Тимоти Джон Бернерс-Ли (англ. Sir

Основные вехи WEB «WEB-программирование. Язык HTML» HyperText Markup Language —«язык разметки гипертекста»,

Цели курса
Целью курса «Программирование в компьютерных сетях» является приобретение теоретических и

Цели курса
Научиться
осуществлять проектирование web-приложения;
осуществлять поэтапную разработку страниц приложения по отдельности,

Цели курса
Иметь понимание:
проблем и направлений развития Web-технологий;
основные методы и средства

Задачи курса
Освоить
язык гипертекстовой разметки HTML;
CSS – каскадные таблицы стилей;
PHP;
Java-script,

План лекции
Основные понятия
Основные виды браузеров и особенности их использования
Обзор инструментария
Технологии Web-программирования

Основные понятия
Основные виды браузеров и особенности их использования
Обзор инструментария
Технологии Web-программирования
Основные

«WEB-программирование»
Для чего нам нужен интернет и его инструменты?
Для поиска и

Для поиска и
анализа информации
Для презентации себя и своих достижений
Для

Web-сайт – набор документов информационного содержания, как правило, статический
Web-сервис - сайт,

Основные понятия
«WEB-программирование»
Статические сайты представляют из себя набор статических страниц, размещенных

Основные понятия
«WEB-программирование»
Подавляющее большинство веб-сайтов в Интернете являются гибридами. Например, интернет-магазин -

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

Основные понятия
Основные виды браузеров и особенности их использования
Обзор инструментария
Технологии Web-программирования
Основные

Сейчас популярны четыре ядра, или семейства:
На основе Gecko: FireFox, Mozilla,

Популярность браузеров на 2015
Обзор WEB-браузеров
«WEB-программирование»

Что находится внутри браузера?
«WEB-программирование»

Ограничения JS в браузере
«WEB-программирование»
Нельзя взаимодействовать с файловой системой
Нет доступа к

Популярность браузеров по Liveinternet в рунете 2015 (белым)
на начало 2017г (черным)
http://vawilon.ru/statistika-brauzerov

В чем отличие WEB-браузера от поисковика?
«WEB-программирование»
Сегодня все браузеры имеют свои

На заметку
по возможности не размещать важную информацию в графике и

Кроссбраузерность HTML страниц
Перейдите по адресу cdnjs.com/libraries/normalize и найдите версию данного файла,

Наиболее общая структура html страницы
«WEB-программирование»

Основные понятия
Основные виды браузеров и особенности их использования
Обзор инструментария
Технологии Web-программирования
Основные

Инструментарий
«WEB-программирование»

Все HTML редакторы можно разделить на две основные категории:
WYSIWYG HTML редактор

Инструментарий
«WEB-программирование»
Пример online HTML редактора
http://htmledit.squarefree.com/
http://www.internet-technologies.ru/articles/article_1857.html - обзор online редакторов

Инструментарий
«WEB-программирование»
Пример online HTML редактора
JSFiddle
JSFiddle — это место для написания и распространения

Инструментарий
«WEB-программирование»
Пример online HTML редактора
JSFiddle

Инструментарий
«WEB-программирование»
Пример WYSIWYG HTML редактора KompoZer
https://sourceforge.net/projects/kompozer
http://rus-linux.net/MyLDP/internet/KompoZer-nachalo-raboty.html - Инструкция по работе с

Инструментарий
«WEB-программирование»
Пример локального HTML редактора - Brackets
Официальный сайтОфициальный сайт -

Инструментарий
«WEB-программирование»
Пример локального HTML редактора - Brackets
плагин для Live Preview

Инструментарий
«WEB-программирование»
WebStorm – среда разработки для JavaScript равно подходящая как для

Основные понятия
Основные виды браузеров и особенности их использования
Обзор инструментария
Технологии Web-программирования
Основные

Технологии Web-программирования
Javascript: позволяет создавать интерактивные и программируемые web-страницы
«WEB-технологии. Язык

Технологии Web-программирования
Structured Query Language SQL – обеспечивает взаимодействие с базами

Технологии Web-программирования
«WEB-программирование. Язык HTML»
http://evolutionofweb.appspot.com/
Следующие 3 страницы предоставляют вам

Направления в WEB – разработке
«WEB-программирование»

Направления в WEB – разработке
«WEB-программирование»
Фронтенд-разработчик
Бекенд-разработчик

Направления в WEB – разработке
«WEB-программирование»
Структура web-приложений: этап 1
Frontend
Отображение

Направления в WEB – разработке
«WEB-программирование»
Структура web-приложений: этап 2
Frontend
Отображение

Направления в WEB – разработке
«WEB-программирование»
Структура web-приложений: этап 3
Backend
Реализация

Направления в WEB – разработке
«WEB-программирование»
Структура web-приложений

Направления в WEB – разработке
«WEB-программирование»
Часть работодателей не отличают (или

Направления в WEB – разработке
«WEB-программирование»
Карьерный путь фронтендера обычно начинается

Направления в WEB – разработке
«WEB-программирование»
Фронтенд-разработчик

Направления в WEB – разработке
«WEB-программирование»

Направления в WEB – разработке
«WEB-программирование»
Какие технологии должен освоить фронтенд-разработчик:
HTML

Направления в WEB – разработке
«WEB-программирование»
Back-end разработчики несут ответственность за

Направления в WEB – разработке
«WEB-программирование»
Основные навыки:
Свободное владение серверными языками

Направления в WEB – разработке
«WEB-программирование»
DevOps (акроним от development и

Направления в WEB – разработке
«WEB-программирование»
DevOps
Поскольку DevOps — это командная работа

Основные понятия
Основные виды браузеров и особенности их использования
Технологии Web-программирования
Основные вехи

Основные вехи WEB
«WEB-программирование. Язык HTML»

Основные вехи WEB
HTTP/0.9
HTTP был предложен в марте 1991 года Тимом

Основные вехи WEB
«WEB-программирование. Язык HTML»
Сэр Тимоти Джон Бернерс-Ли (англ. Sir

Основные вехи WEB
«WEB-программирование. Язык HTML»
HyperText Markup Language —«язык разметки гипертекста»,