1 / 146

Порядок выполнения арифметических действий в числовых выражениях без скобок и со скобками, состоящих из 2-3 действий.

Порядок выполнения арифметических действий в числовых выражениях без скобок и со скобками, состоящих из 2-3 действий

ikonkursy
Download Presentation

Порядок выполнения арифметических действий в числовых выражениях без скобок и со скобками, состоящих из 2-3 действий.

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  21. 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>

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

  23. Список одиночных тегов <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.

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

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

  26. <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>

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

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

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

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

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

  32. СТРУКТУРА 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

More Related