Панель разработчика в Chrome

Loading...

Do curso por Moscow Institute of Physics and Technology

Создание Web-сервисов на Python

41 classificações

Explore Related Videos

At Coursera, you will find the best lectures in the world. Here are some of our personalized recommendations for you

Moscow Institute of Physics and Technology

Создание Web-сервисов на Python

41 classificações

Curso 3 de 4 em Specialization Программирование на Python

Современная жизнь немыслима без web-сервисов, ежедневно приносящих дивиденды в самых разных областях человеческой деятельности. А значит, профессия web-разработчика еще долго будет оставаться высокооплачиваемой и востребованной на рынке IT-специалистов. Существует множество решений и инструментов на разных языках программирования, упрощающих и ускоряющих web-разработку. В рамках данного курса освещается построение web-приложений на языке Python. Курс читают разработчики, применяющие Python в проектах, которыми ежедневно используют миллионы людей. В данном курсе вы сможете приобрести как базовые знания о функционировании современного интернета в целом, так и практические навыки создания интернет-приложений на языке Python.

Na lição

Веб интерфейсы с Django и Bootstrap

В этом модуле мы познакомимся с архитектурой web-фреймворков, разберём существующие web-фреймворки на Python и наконец создадим наше первое web-приложение на Python при помощи фреймворка Django. После этого мы разберём структуру Django-приложения и работу с базами данных при помощи инструментов Django. Напоследок нас ждёт знакомство с HTML и CSS, чтобы наше приложение выглядело более привлекательным.

Панель разработчика в Chrome6:29

Основы HTML7:03

Основы CSS11:20

Основные свойства CSS16:42

Применение Twitter BootStrap20:58

Conheça os instrutores

Абрамов Тимур
Пестров Никита
Опрышко Александр
Партилов Алексей

В этом видео мы рассмотрим, что такое панель разработчика,

зачем она нужна и как ей пользоваться.

Для того, чтобы ее открыть,

необходимо нажать правую кнопку и в самом низу диалога,

который выплывает, нажать inspect.

Появится такое окошко, где множество кнопочек.

Давайте сначала начнем рассмотрение с панели Elements.

В панели Elements представлен наше DOM дерево.

Тут можно посмотреть наш

HTML верстку, которое нам пришла.

Посмотрите элементы, которые есть на странице.

Если мы хотим выделить какой-то определенный элемент, нам это очень часто понадобится,

когда мы будем верстать, нам необходимо нажать вот эту стрелку

и навести на тот элемент, который мы хотим,

например, на

logo mail.ru.

И давайте посмотрим, как она устроена.

Мы видим, что эта ссылка,

ведет она на mail.ru и мы можем увидеть,

что с правой стороны и у нас окошко со стилями.

Это те стили, которые будут применены к данному элементу.

Можно увидеть, что на этот элемент навешен стиль,

который отвечает за logo, собственно,

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

Если мы хотим проверить какой-то определенный стиль, например,

display noen, мы увидим, что наш элемент пропал.

Мы применили этот стиль к непосредственно этому элементу.

Это очень удобно, когда мы верстаем и хотим попробовать, протестировать.

Нам не нужно лезть в код, находить этот элемент.

Мы просто его находим с помощью вот этого инспектора,

прямо в браузере, добавляем нужное нам стили и смотрим как это выглядит.

Очень удобный инструмент, когда мы хотим проверить,

как наш сайт будет выглядеть на мобильном устройстве.

Нажимаем и у нас экран уменьшается в формат

нашего мобильного устройства и мы можем посмотреть, как же сайт будет выглядеть на нем.

Можно выбрать то устройство, которое нам необходимо,

он будет и менять user агент,

и тут будет показано размер экрана и можно выбрать скорость

интернета или например вообще его выключить.

Попробуем обновить, вот, у нас появился динозавр. Попробуем включить.

Пробуем обновить, мы видим,

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

у нас будет страница отображатся на медленном интернете. Очень удобно в разработке.

Следующий этап, который мы посмотрим, это network,

тоже один из самых важных элементов в инспекторе. Тут мы можем видеть все,

что происходит сетью на нашей странице. В самом начале мы видим,

что идет HTTP запрос, HTTPS mail.ru.

Получаем двести, можем посмотреть в превью

и увидеть что она отдал веб сервер очень много джи эс кода, какой то верстки и т.д. [inaudible].

Также, после этого, у нас начали подгружаться наши JS файлы,

наши CSS файлы, картинки наши статика.

Это можно посмотреть по типу файлов с помощью вот этих фильтров JS,

CSS, image, font -шрифты,

но у нас их тут нет и т.д.

XHR, это аякс запросы, у нас их тоже тут нет.

Очень важные элементы сверху, например, disable cache,

это означает, что наш браузер не будет кэшировать статические файлы.

Может быть такая проблема, что вы изменили в коде ваш файл и стиль не применился.

Может быть это из за того,

что ваш браузер закэшировал этот файл и не получил обновления.

Давайте перейдем обратно в обычный режим.

Можем видеть, что когда

мы увеличили нашу страницу до размеров десктопа, то появились некоторые react запросы.

Давайте теперь перейдем на вкладку Application. Тут очень важно раздел storage.

Это то, что хранит наши страницы,

например, locarl storage, это локальное хранилище.

Это не как [inaudible] хранилище, к которой можно иметь доступ с помощью JS.

Тут можно посмотреть все данные, которые хранит наша страница.

И cookies storage, посмотреть те куки,

которые установлены на наш домен mail.ru.

Ими можно манипулировать, посмотреть на какой домен они

устанавливается, посмотреть время их жизни,

посмотреть может ли они устанавливаться на запросе HTTP и так далее и тому подобное.

И вкладка console, это,

грубо говоря, консольный вывод JS скриптов.

Тут можно проверить некие наши скрипты, например, 1+1

и посмотреть некий вывод с помощью команды

console.log.При написании JS скриптов, очень полезно.

Вот, собственно, в этом видео

мы рассмотрели, что такое панель разработчика и как ей пользоваться.

Explore nosso catálogo

Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.

O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.

© 2019 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play