Web-programming

1. Веб разработка ЧТОТиБ 2017

2. Введение в веб-разработку • Чем занимается веб-разработчик? • Работа и карьера веб-разработчика; • Рабочие инструменты; • Сообщества веб-разработчиков.

3. Чем занимается веб-разработчик Короткий ответ: они создают и поддерживают веб-сайты. Фуллстак (Full stack) Фронтенд (Frontend) Бэкенд (Backend)

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

5. Фронтенд (Frontend) • "Фронтенд" обычно означает те вещи, которые вы непосредственно видите на сайте в браузере. Это показывает то, как представлено содержимое, включая все мелкие элементы пользовательского интерфейса вроде меню, выпадающих меню, красивых анимаций и модальных окон. • Фронтенд-разработчики часто фокусируются на понимании HTML, CSS и Javascript, поскольку эти языки работают в браузере. Они не обязательно фокусируются на том, чтобы делать вещи "красивыми" (что зачастую оставляют дизайнерам), но скорее на том, чтобы информация была представлена эффективно и пользовательское взаимодействие с веб-страницей было настолько комфортным, насколько это возможно. Сегодня мы выполняем все больше и больше кода непосредственно в браузере.

6. Бэкенд (Backend) • "Бэкенд", как правило, обозначает ту часть приложения, которая живет на сервере. Бэкенд больше сосредоточен на том, чтобы все необходимые данные корректно отправлялись в браузер. Эта часть айсберга скрывается под поверхностью... множество вещей должно работать правильно, чтобы передать данные на фронтенд, где они смогут быть корректно отображены.

7. Фуллстак (full stack) • "Фуллстак"-разработчики работают одновременно с обеими сторонами. Хотя каждый из "енд"-ов включает в себя изучение большого количества информации, фуллстак разработчики могут с комфортом "общаться" одновременно с базой данных и с браузером. В наши дни довольно популярно искать разработчиков с большим опытом работы с обеими частями веб-приложения.

8. Веб-разработчик против веб-дизайнера • Итак, если у нас есть бэкенд-разработчики и фронтенд-разработчики, то кто же делает веб-сайт действительно красивым? Кто объединяет изображения, логотипы и цветовые схемы? Это работа веб-дизайнера. Хотя исторически сложилось, что они были менее вовлечены в непосредственное программирование страниц, в настоящий момент даже от дизайнеров ожидают, что они смогут в нужный момент закатать рукава и написать немного кода. Некоторые из лучших веб-разработчиков пришли из сферы дизайна.

10. Веб-сайты против веб-приложений • Не все могут согласиться, что различает эти два понятия, но обычно веб-сайты больше предназначены для отображения статического (неизменного) содержимого, а веб-приложения требуют "умного" кода, работающего на сервере (того самого, который вы научитесь писать) для создания динамического содержимого.

11. Работа и карьера веб-разработчика • В стабильной технической компании; • Маленький технологический стартап; • Фрилансер; • В консультационной компании.

12. Рабочие инструменты • Компьютер; • Google; • Текстовый редактор; • Интерфейс командной строки (CLI) ; • Stack Overflow; • Git; • Github.

13. Сообщества веб-разработчиков Вживую: • Митапы; • Ночи програмирования; • Хакатоны; • Конференции ; • Школьные клубы; Онлайн: • Hacker News; • Github; • Stack Overflow ; • Блоги; • Вебинары;

14. КАК Работает сеть? • Что такое интернет? • Как делится и пересылается информация? • Что такое пакеты? • Что такое "клиент"? • Что такое "сервер"? • Что такое HTTP и как работают HTTP-запросы?? • Что такое DNS-серверы? • Что такое HTML и как он используется? • Что такое CSS и как он используется? • В чем разница между статичными и динамическими веб-страницами? • Что такое Веб-инспектор (так же известен как Инструменты Разработчика) в вашем браузере и как вы можете его использовать при работе с HTML-страницей? • Что происходит, когда вы нажимаете "Поиск" на google.com?

15. Что такое интернет? • Интернет (англ. Internet) — всемирная система объединённых компьютерных сетей для хранения и передачи информации. Часто упоминается как Всемирная сеть и Глобальная сеть, а также просто Сеть. Построена на базе стека протоколов TCP/IP. На основе Интернета работает Всемирная паутина (WorldWideWeb, WWW) и множество других систем передачи данных.

16. Как делится и пересылается информация? • Протокол IP (InternetProtocol) заведует непосредственной передачей информации по сети. Вся информация разбивается на части — пакеты и пересылается от отправителя получателю. Для того чтобы точно адресовать пакет, необходимо задать четкие координаты получателя или его адрес. • Протокол управления передачей (TCP, TransmissionControlProtocol) — это протокол, тесно связанный с IP, который используется в аналогичных целях, но на более высоком уровне. Протокол TCP занимается проблемой пересылки больших объемов информации, основываясь на возможностях протокола IP.

17. Что такое пакеты? • Пакет, пакет данных (англ. packet) – это сегмент данных отправляемых с одного компьютера или устройства на другое, по сети. Пакет содержит источник, пункт назначения, размер, тип, и другую полезную информацию, которая помогает доставить пакет до места назначения и прочитать его. Ниже показан пример разбивки пакета TCP.

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

19. ЧТО ТАКОЕ СЕРВЕР? • Понятия сервер и клиент и закреплённые за ними роли образуют программную концепцию «клиент-сервер». • Для взаимодействия с клиентом (или клиентами, если поддерживается одновременная работа с несколькими клиентами) сервер выделяет необходимые ресурсы межпроцессного взаимодействия (разделяемая память, пайп, сокет и т. п.) и ожидает запросы на открытие соединения (или, собственно, запросы на предоставляемый сервис). В зависимости от типа такого ресурса, сервер может обслуживать процессы в пределах одной компьютерной системы или процессы на других машинах через каналы передачи данных (например, COM-порт) или сетевые соединения. • Формат запросов клиента и ответов сервера определяется протоколом. Спецификации открытых протоколов описываются открытыми стандартами, например, протоколы Интернета определяются в документах RFC. • В зависимости от выполняемых задач одни серверы, при отсутствии запросов на обслуживание, могут простаивать в ожидании. Другие могут выполнять какую-то работу (например, работу по сбору информации), у таких серверов работа с клиентами может быть второстепенной задачей.

20. Что такое HTTP и как работают HTTP-запросы?? • HTTP (англ. HyperTextTransferProtocol — «протокол передачи гипертекста») — протокол прикладного уровня передачи данных (изначально — в виде гипертекстовых документов в формате «HTML», в настоящий момент используется для передачи произвольных данных). Основой HTTP является технология «клиент-сервер», то есть предполагается существование: • Потребителей (клиентов), которые инициируют соединение и посылают запрос; • Поставщиков (серверов), которые ожидают соединения для получения запроса, производят необходимые действия и возвращают обратно сообщение с результатом.

21. Что такое DNS-серверы? • DNS (англ. DomainNameSystem — система доменных имён) — компьютерная распределённая система для получения информации о доменах. Чаще всего используется для получения IP-адреса по имени хоста (компьютера или устройства), получения информации о маршрутизации почты, обслуживающих узлах для протоколов в домене. • DNS-сервер, nameserver — приложение, предназначенное для ответов на DNS-запросы по соответствующему протоколу. Также DNS-сервером могут называть хост, на котором запущено приложение.

22. HTML • HTML (от англ. HyperTextMarkupLanguage — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства. <!DOCTYPE html> <html> <head> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /> <title>HTML Document</title> </head> <body> <p> <b> Этот текст будет полужирным, <i>а этот — ещё и курсивным</i> </b> </p> </body> </html>

23. Введение в HTML & CSS • Язык HTML состоит из тегов. Теги — это те самые кирпичики, из которых построена каждая веб-страница. • Каждый тег начинается с символа < и заканчивается символом >, например: <p>. • Все теги можно разделить на парные и одиночные. Каждый парный тег состоит из двух частей: открывающего тега и закрывающего. Внутри закрывающего тега используется символ /.

24. Список одиночных тегов <area> — часть карты изображений,<base> — базовый адрес страницы,<basefont> — форматирует текст для всей страницы, устаревший тег,<bgsound> — проигрывает музыку при открытии страницы, нестандартный тег,<br> — перевод строки,<col> — форматирует одну/несколько колонок таблицы,<command> — комманда-переключатель, тег HTML5,<embed> — внедряет плагины, тег HTML5,<hr> — горизонтальная линия,<img> — изображение (фотография, картинка, рисунок и т.д.),<input> — элемент формы, может быть кнопкой, текстовым полем, перключателем и др.,<isindex> — поисковая строка, устаревший тег,<keygen> — шифровка расшифровка данных, тег HTML5,<link> — загружает внешние файлы .css, .xml, .ico,<meta> — мета-теги,<param> — параметры плагинов applet и object,<source> — внедряет аудио/видео файлы, с помощью тегов audio и video, тег HTML5,<track> — внедряет текстовую информацию (субтитры, характеристики медиафайлов и т.д.) ваудио/видео файлы, через теги audio и video, тег HTML5,<wbr> — указывает, где нужно перенести длинное слово, если оно не вмещается в окно браузера,тег HTML5.

25. ПАРНЫЕ ТЕГИ Парный может включать внутри себя другие теги или текст.

26. Атрибуты HTML-тегов • Теги могут иметь атрибуты. Некоторые теги есть смысл использовать только с атрибутами. Наиболее яркий пример — тег <img>, обозначающий изображение. Для него обязательно нужно указывать атрибут src, который задаёт адрес картинки (иначе браузер не сможет загрузить её). • В общем случае тег записывается следующим образом: • <имя-тега атрибут1="значение1" атрибут2="значение2" ...>

27. <div class="error2"> <imgsrc="/assets/course1/keks-macho.jpg" class="photocard"> </div> <divclass=error3"> <blockquoteclas="nice-cite"> <p>Lorem ipsum dolor sit amet, consecteturadipiscingelit, sed do eiusmodtemporincididuntutlabore et dolore magna aliqua.</p> <p> Lorem ipsum dolor sit amet</p> </blockquote /div> <div class="error1"> <p><em>В последующих курсах вам будет часто помогать с освоением тонкостей HTML и CSS</p> инструктор Кексик.</em> <div>

28. CSS • CSS (CascadingStyleSheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

29. CSS • CSS — это язык для управления внешним видом HTML-документа. С помощью CSS можно задавать параметры отображения любого тега: ширину и высоту, отступы, цвет и размер шрифта, фон и так далее. • Самый простой способ применить стили к тегу заключается в использовании атрибута style. Например: • <p style="color: red;">...</p> • В этом примере абзацу задан красный цвет шрифта. Такой способ задания стилей называют «инлайновые стили» или «встроенные стили».

30. CSS • Задавать стили каждого тега с помощью атрибута style очень затратно и хлопотно. А ещё это приводит к засорению HTML-кода избыточными, повторяющимися кусками CSS. • К счастью, есть и другие способы подключения стилей. Первый — подключение внешнего файла с помощью тега <link>, а второй — использование специального тега <style>.

31. cSS • Когда вы задаёте стили тега с помощью атрибута style, браузер сразу же понимает, к какому именно тегу применить эти стили. Но когда стили подключаются с помощью внешнего файла или через тег <style>, браузер ищет стилизуемые теги с помощью «селекторов».

32. CSS • Класс — это всего лишь один из атрибутов HTML-тегов, например: • <p class="important">...</p> • <p class="help">...</p> • В CSS можно задавать стили только для элементов с определённым классом. Для этого используется селектор по классу, который пишется так .имя-класса, например: • .important { color: red; } — выберет все теги с классом "important" • .help { color: green; } — выберет все теги с классом "help"

33. СТРУКТУРА HTML документа • Каждый HTML-документ должен начинаться с декларации типа документа или «доктайпа». Тип документа нужен, чтобы браузер мог определить версию HTML и правильно отобразить страницу. • Например, для старой версии HTML 4.01 доктайп выглядит так: • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" • "http://www.w3.org/TR/html4/strict.dtd"> • А для последней версии HTML уже намного проще: • <!DOCTYPE html> • Последнюю версию HTML ещё называют HTML 5.

34. СТРУКТУРА HTML документа • Тег <html> — это контейнер, в котором находится всё содержимое страницы, включая теги <head> и <body>. Как правило, тег <html> идёт в документе вторым после доктайпа. • Тег <head> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Содержимое этого тега не отображается напрямую. • Тег <body> предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера.

35. Заголовок HTML-страницы • Заголовок страницы — это тот текст, который отображается в левом верхнем углу браузера, а также во вкладках. • Чтобы задать заголовок страницы, нужно использовать тег <title> внутри тега <head>. Например, вот так: • <head> • <title>Это заголовок</title> • </head>

36. Кодировка HTML-страницы • Кодировку HTML-страницы нужно указывать для того, чтобы веб-браузер мог правильно отображать текст на странице. Если браузер неправильно «угадает» кодировку, то вместо текста будут отображаться «кракозябрики». • Чтобы сообщить браузеру кодировку HTML-страницы, необходимо внутри тега <head> использовать тег: • <metacharset="имя кодировки">

37. Ключевые слова • Есть целое семейство тегов <meta>, называемых мета-тегами. Их можно использовать внутри тега <head>. • Мета-теги хранят полезную для браузеров и поисковых систем информацию. Один из таких тегов — это описание ключевых слов страницы. Задаётся он так: • <metaname="keywords" content="разные, ключевые, слова">

38. Описание содержания страницы • Ещё один полезный для поисковых систем мета-тег — краткое описание страницы. Оно задаётся так: • <metaname="description" content="краткое описание"> • В атрибуте content должно быть краткое содержание или аннотация страницы. Оно часто используется поисковиками при отображении результатов поиска.

39. HTML-комментарии • Комментарий в HTML-коде задаётся так: • <!-- любой текст --> • Текст внутри комментария не отображается браузером на странице. Комментарии обычно используются в следующих случаях: • Для комментирования кода. Всегда полезно оставить подсказку. • Для временного отключения кода. Удалять код неудобно, так как его надо будет восстанавливать, а закомментировать и потом раскомментировать — самое лучшее решение.

40. Подключение внешних стилей • Чаще всего стили подключают из внешнего файла с расширением .css. Для этого используется тег <link>. Например: • <head> • <linkhref="style.css" rel="stylesheet"> • </head> • В атрибуте href задают адрес файла, а атрибут rel="stylesheet" говорит браузеру, что мы подключаем стили, а не что-то другое.

41. Подключение внешних скриптов • Скрипты чаще всего подключают из внешних файлов с расширением .js. Для этого используют тег <script> с атрибутом src, в котором указывается путь к файлу. Например: • <scriptsrc="scripts.js"></script> • Обратите внимание, что тег <script> парный. Если вы подключаете внешние скрипты, то просто ничего не пишите внутри тега. • Внешние скрипты лучше подключать перед закрывающим тегом </body>.

42. ЗАДАНИЕ Самостоятельно задайте мета-информацию страницы: • Заголовок страницы «Моя первая HTML страница». • Ключевые слова «вёрстка» «html» «css» «программирование». • Краткое описание «Краткое описание для моей первой HTML страницы».

43. Абзацы • Начнём с простейшего тега <p>, с помощью которого создаются абзацы. По умолчанию абзацы начинаются с новой строки и имеют вертикальные отступы, которыми можно управлять с помощью стилей. • <p>Lorem ipsum dolor sit amet, consectetueradipiscingelit, sed diem nonummynibheuismodtinciduntutlacreetdolore magna aliguameratvolutpat.</p> <p>Utwisisenim ad minim veniam, quisnostrudexercitutionullamcorpersuscipitlobortisnislutaliquip ex eacommodoconsequat.</p>

44. Заголовки и подзаголовки • В языке HTML для выделения заголовков предусмотрено целое семейство тегов: от <h1> до <h6>. Тег <h1> обозначает самый важный заголовок (заголовок верхнего уровня), а тег <h6> обозначает подзаголовок самого нижнего уровня. • На практике редко встречаются тексты, в которых встречаются подзаголовки ниже третьего уровня. Поэтому самыми часто используемыми тегами заголовков являются: <h1>, <h2> и <h3>. • Стоит отметить, что поисковые системы придают особое значение заголовкам, поэтому необходимо учиться правильно их использовать.

45. СПИСКИ • В HTML существует семейство тегов для создания списков: неупорядоченных, упорядоченных и списков определений. • Неупорядоченные (или маркированные) списки создаются с помощью тега <ul>, который может содержать внутри себя теги <li>, обозначающие «элемент списка». • Упорядоченный список создаётся с помощью тега <ol>, который может содержать внутри себя теги <li>.

46. ЗАДАНИЕ Создать многоуровневый список: • Теги заголовков • H1 • H2 • H3 • Теги форм • Теги списков

47. ЗАДАНИЕ • Разметка • Основы HTML • HTML-теги • парные • одиночные • Основы CSS • Селекторы • по типу • по классу • вложенные • Стиль кодирования • Работа с фотошопом • Построение сеток • Декоративные элементы • Введение в JavaScript • Прогрессивное улучшение

48. Список определений  • Список определений создаётся с помощью трёх тегов: • <dl> обозначает сам список определений; • <dt> обозначает термин; • <dd> обозначает определение термина. • Теги <dt> и <dd> пишутся парами внутри <dl>.

49. Выделение текста • Давайте посмотрим на <i> и <b> и сравним их с семантическими преемниками — <em> и <strong>. Что получается: • <i> — был просто курсивом, а сейчас обозначает дополнительное выделение (например, для иностранных слов, технических терминов) или просто курсивное начертание текста; • <b> — просто выделял текст полужирным, а сейчас обозначает стилистическое усиление текста (например, для ключевых слов) или просто полужирное начертание; • <em> — обозначал выделение, а сейчас обозначает экспрессивно-эмоциональное выделение, т.е. слово или фразу, произнесённые иначе; • <strong> — обозначал большее усиление экспрессии, а сейчас обозначает высокую важность, что, в общем, почти то же самое (ещё большее усиление или важность сейчас определяется уровнем вложенности).

50. Переносы и разделители. Теги br и hr • Иногда возникает необходимость вставить в текст перенос строки, не создавая при этом абзац. Например, при разметке стихов или текстов песен. • Для этого в HTML предусмотрен одиночный тег <br>. • Иногда этот тег используется для разбиения текста на «как бы абзацы», что является плохим подходом. Используйте для разметки абзацев тег <p>. • Одиночный тег <hr> используется для того, чтобы создать горизонтальную линию-разделитель. На внешний вид этой линии можно влиять с помощью атрибутов, но правильней делать это с помощью CSS.