Разделы презентаций


21 занятие

Содержание

Проверка присутствия

Слайды и текст этой презентации

Слайд 121 занятие
Школа::Кода

«Основы программирования на языке Python»

21 занятиеШкола::Кода«Основы программирования на языке Python»

Слайд 2Проверка присутствия

Проверка присутствия

Слайд 3Какой тэг нужен для ...?

Какой тэг нужен для ...?

Слайд 4Параграф

Параграф

Слайд 5Заголовки







Заголовки

Слайд 6Перевод строки


Перевод строки

Слайд 7Выделение жирным

Выделение жирным

Слайд 8Универсальный блочный

Универсальный блочный

Слайд 9Универсальный строчный

Универсальный строчный

Слайд 10Выделение курсивом

Выделение курсивом

Слайд 11Таблица

- строки
- заголовочные ячейки
- ячейки данных

Таблица - строки - заголовочные ячейки - ячейки данных

Слайд 12Зачем нужен ...?

Зачем нужен ...?

Слайд 13
Заголовок страницы (окна браузера)
Находится в тэге head

Заголовок страницы (окна браузера)Находится в тэге head

Слайд 14… title=“***” …
Подсказка при наведении на элемент

… title=“***” …Подсказка при наведении на элемент

Слайд 15
Привязка стилей, шрифтов, ...
Находится в тэге head
Атрибуты
href
rel
type (до html5)

Привязка стилей, шрифтов, ...Находится в тэге headАтрибутыhrefreltype (до html5)

Слайд 16
Изображение
Атрибуты
src
width
height

ИзображениеАтрибутыsrcwidthheight

Слайд 17
Ссылка на другую страницу или якорь
Атрибуты
href

Ссылка на другую страницу или якорьАтрибутыhref

Слайд 18Зачем нужно CSS свойство ...?

Зачем нужно CSS свойство ...?

Слайд 19display
тип блока
block
inline
inline-block

displayтип блокаblockinlineinline-block…

Слайд 20padding-top: 10px;
верхний внутренний отступ в 10 пикселей

padding-top: 10px;верхний внутренний отступ в 10 пикселей

Слайд 21margin-bottom: 15px;
нижний внешний отступ в 15 пикселей

margin-bottom: 15px;нижний внешний отступ в 15 пикселей

Слайд 22Какое свойство нужно для ...?

Какое свойство нужно для ...?

Слайд 23Ширина блочного контейнера
width
width: 50px;
width: 25%;

Ширина блочного контейнераwidthwidth: 50px;width: 25%;

Слайд 24Фон с картинкой
background-image
background-image: url(‘../images/pic.jpg’);
background
background: #FFF url(‘../images/pic.jpg’) no-repeat;



Фон с картинкойbackground-imagebackground-image: url(‘../images/pic.jpg’);backgroundbackground: #FFF url(‘../images/pic.jpg’) no-repeat;

Слайд 25Рамка
border
Черная сплошная толщиной в 1 пиксель
border: solid 1px #000;
Белая пунктиром

толщиной в 5 пикселей
border: dashed 5px #FFF;




РамкаborderЧерная сплошная толщиной в 1 пиксельborder: solid 1px #000;Белая пунктиром толщиной в 5 пикселейborder: dashed 5px #FFF;

Слайд 26Высота блочного контейнера
height
height: 250px;
height: 100%;

Высота блочного контейнераheightheight: 250px;height: 100%;

Слайд 27Внутренний отступ
padding
padding: 5px;
padding: 5px 10px;
padding: 5px 10px 15px 20px;



Внутренний отступpaddingpadding: 5px;padding: 5px 10px;padding: 5px 10px 15px 20px;

Слайд 28Размер текста
font-size
font-size: 14px;
font-size: 12pt;
font-size: 1.2em;
font-size: 110%;







Размер текстаfont-sizefont-size: 14px;font-size: 12pt;font-size: 1.2em;font-size: 110%;

Слайд 29Внешний отступ
margin
margin: 5px;
margin: 5px 10px;
margin: 5px 10px 15px 20px;



Внешний отступmarginmargin: 5px;margin: 5px 10px;margin: 5px 10px 15px 20px;

Слайд 30Цвет текста
color
color: white;
color: #FFF;
color: rgb(255, 255, 255);







Цвет текстаcolorcolor: white;color: #FFF;color: rgb(255, 255, 255);

Слайд 31Цвет фона
background-color
background-color: black;
background-color: #000;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0,

0.5);








Цвет фонаbackground-colorbackground-color: black;background-color: #000;background-color: rgb(0, 0, 0);background-color: rgba(0, 0, 0, 0.5);

Слайд 32Какова реальная ширина блока?
width: 100px;
margin: 5px 15px;
padding: 5px;

Реальная ширина:
15 +

5 + 100 + 5 + 15 = 140

Какова реальная ширина блока?width: 100px;margin: 5px 15px;padding: 5px;Реальная ширина:15 + 5 + 100 + 5 + 15

Слайд 33Какова реальная высота блока?
height: 200px;
margin: 10px 15px 20px 40px;
padding: 15px

10px;
border: solid 2px black;

Реальная высота:
10 + 2 + 15 +

200 + 15 + 2 + 20 = 264

Какова реальная высота блока?height: 200px;margin: 10px 15px 20px 40px;padding: 15px 10px;border: solid 2px black;Реальная высота:10 + 2

Слайд 34Web программирование с flask

Web программирование с flask

Слайд 35216.109.112.135
209.73.168.74
216.109.112.135
209.73.168.74
site.com
GET http://site.com/posts/index.html
Статические страницы

216.109.112.135209.73.168.74216.109.112.135209.73.168.74site.comGET http://site.com/posts/index.htmlСтатические страницы

Слайд 36216.109.112.135
209.73.168.74
216.109.112.135
209.73.168.74
site.com
GET http://site.com/posts/



charset="UTF-8">
Список пользователей

rel="stylesheet" href="/static/styles/style.css">














Фамилия Имя Отчество
Яровая Мария Ивановна





Динамические страницы

216.109.112.135209.73.168.74216.109.112.135209.73.168.74site.comGET http://site.com/posts/          Список пользователей

Слайд 37Задание
Создать папку проекта
Создать папку files
Скопировать файлы в папку files
Создать python

файл app.py

ЗаданиеСоздать папку проектаСоздать папку filesСкопировать файлы в папку filesСоздать python файл app.py

Слайд 38from flask import Flask
app = Flask(__name__)

@app.route("/")
def home():
return "Привет,

мир!"

@app.route("/about")
def about():
return "О нас"

if __name__ == "__main__":

app.run(debug=True)

# импортировать Flask
# создать объект сервера

# прописать путь для этой функции
# создать функцию главной страницы
# что вернуть браузеру

# прописать путь
# создать функцию страницы
# вернуть браузеру

# если запущен отсюда
# запустить сервер

from flask import Flaskapp = Flask(__name__)@app.route(

Слайд 39@app.route(“ПУТЬ_К_СТРАНИЦЕ”)
def НАЗВАНИЕ_ФУНКЦИИ_СТРАНИЦЫ():
# обработка данных
return ЧТО_ВЕРНУТЬ_КЛИЕНТУ

@app.route(“ПУТЬ_К_СТРАНИЦЕ”)def НАЗВАНИЕ_ФУНКЦИИ_СТРАНИЦЫ():  # обработка данных  return ЧТО_ВЕРНУТЬ_КЛИЕНТУ

Слайд 40Задание
Запустить сервер (файл app.py)
Открыть сайт в Chrome
Открыть «/about»

ЗаданиеЗапустить сервер (файл app.py)Открыть сайт в ChromeОткрыть «/about»

Слайд 41Марина
Карина
Маша
Оля
names.txt
Марина
Карина
Маша
Оля

МаринаКаринаМашаОляnames.txtМаринаКаринаМашаОля

Слайд 42Задание
Вернуть в функции home данные из файла names.txt
names =

list() with open("files/names.txt", encoding="utf-8") as f: for raw_line in f:

names.append(raw_line.strip())
return "
".join(names)
ЗаданиеВернуть в функции home данные из файла names.txt names = list() with open(

Слайд 43Названия файлов и папок
пробелы (“my new shoes.jpg”)
русские (“фото.jpg”)
lower_case (нижний

регистр без пробелов)
Windows – style.css = Style.css
UNIX – style.css

≠ Style.css
Названия файлов и папокпробелы (“my new shoes.jpg”)русские (“фото.jpg”) lower_case (нижний регистр без пробелов)Windows – style.css = Style.css

Слайд 45Задание
Создать папку templates (именно ее!)
Создать в ней файл index.html
Добавить в

импорт render_template
from flask import Flask, render_template
Вернуть index.html в home
return render_template('index.html')

ЗаданиеСоздать папку templates (именно ее!)Создать в ней файл index.htmlДобавить в импорт render_templatefrom flask import Flask, render_templateВернуть index.html

Слайд 46Шаблонизатор
Тэги (открывающие и закрывающие)
{% tag_name %}
Значения
{{ var_name }}

ШаблонизаторТэги (открывающие и закрывающие){% tag_name %}Значения{{ var_name }}

Слайд 47Задание
Создать html файл names.html
Добавить код страницы names, прописать путь «/names»,

вернуть names.html

@app.route("/names") def names(): return render_template('names.html')

ЗаданиеСоздать html файл names.htmlДобавить код страницы names, прописать путь «/names», вернуть names.html@app.route(

Слайд 48Передача значений в шаблон
#app.py
name = "Владимир"
return render_template(‘names.html', name=name)

#names.html
Имя пользователя: {{

name }}

Передача значений в шаблон#app.pyname =

Слайд 49#app.py
entities = list() with open("files/names.txt", encoding="utf-8") as f: for raw_line

in f: entities.append(raw_line.strip())
return render_template('names.html', entities=entities)

#names.html
{% for name

in entities %}

{{ name }}


{% endfor %}

#app.pyentities = list() with open(

Слайд 50Задание
Создать папку static (именно ее!)
папку css
файл style.css
папку images
Прописать стили в

head
/static/css/style.css

ЗаданиеСоздать папку static (именно ее!)папку cssфайл style.cssпапку imagesПрописать стили в head	/static/css/style.css

Слайд 51Наследование шаблонов
menu
side
bar
content 1
контент главной страницы

menu
side
bar
content 2

page2.html
контент со списком пользователей

контент со

списком пользователей

контент главной страницы

контент c таблицей
контент c таблицей
index.html
index.html
users_list.html
table.html

Наследование шаблоновmenusidebarcontent 1контент главной страницыmenusidebarcontent 2page2.htmlконтент со списком пользователейконтент со списком пользователейконтент главной страницыконтент c таблицейконтент c

Слайд 52Задание
Создать в папке templates html файл base.html и сделать шаблон
Добавить

блоки:
В тэге title (head):
{% block title %}{% endblock %}
В body:
{%

block content %}{% endblock %}

ЗаданиеСоздать в папке templates html файл base.html и сделать шаблонДобавить блоки:В тэге title (head):{% block title %}{%

Слайд 53




{% block title %}Мой сайт{% endblock %}





{% block content %}{% endblock %}






Слайд 54Задание
Наследоваться от base.html
{% extends 'base.html' %}
Переписать блоки:
{% block title %}
{%

block content %}

ЗаданиеНаследоваться от base.html{% extends 'base.html' %}Переписать блоки:{% block title %}{% block content %}

Слайд 55{% extends 'base.html' %} {% block title %}Главная{% endblock %} {% block

content %}
Это контент главной страницы! {% endblock %}

{% extends 'base.html' %}  {% block title %}Главная{% endblock %}  {% block content %} Это

Слайд 56Задание
Создать страницу table:
функцию table
путь /table
table.html, наследованный от base.html
вернуть table.html
Скопировать код

чтения из файла. Заменить names.txt на humans.txt

ЗаданиеСоздать страницу table:функцию tableпуть /tabletable.html, наследованный от base.htmlвернуть table.htmlСкопировать код чтения из файла. Заменить names.txt на humans.txt

Слайд 57Бакарюк;Иван;Петрович Васильева;Марина;Львовна Иванова;Светлана;Петровна Петров;Максим;Витальевич Яровая;Мария;Ивановна
humans.txt

Бакарюк;Иван;Петрович Васильева;Марина;Львовна Иванова;Светлана;Петровна Петров;Максим;Витальевич Яровая;Мария;Ивановнаhumans.txt

Слайд 58data = raw_line.strip().split(';')
entities.append({'last_name': data[0],

'name': data[1], 'surname': data[2]})


data = raw_line.strip().split(';')
keys = ['last_name', 'name', ‘surname']
item = dict()
for i in range(len(data)):
item[keys[i]] = data[i]
entities.append(item)
data = raw_line.strip().split(';')entities.append({'last_name': data[0],

Слайд 59@app.route("/table")
def table():
entities = list()
with open('humans.txt', encoding="utf-8")

as f:
for raw_line in f:

data = raw_line.strip().split(';')
entities.append({'last_name': data[0],
'name': data[1], 'surname': data[2]})

return render_template('table.html', entities=entities)

Код функции table

@app.route(

Слайд 60{% extends 'base.html' %}

{% block title %}Список пользователей{% endblock %}

{%

block content %}


Фамилия
Имя
Отчество

{% for item in entities %}

{{ item.last_name }}
{{ item.name }}
{{ item.surname }}

{% endfor %}

{% endblock %}
{% extends 'base.html' %}{% block title %}Список пользователей{% endblock %}{% block content %}

Слайд 61Динамический url

Динамический url

Слайд 62Динамический url
slug
https://rc-like.ru/dji-spreading-wings-s900-kit
http://www.pro-smm.com/kak-polzovatsya-sniply/
id
https://habrahabr.ru/post/38434/
https://vk.com/id17022311

Динамический urlslughttps://rc-like.ru/dji-spreading-wings-s900-kithttp://www.pro-smm.com/kak-polzovatsya-sniply/idhttps://habrahabr.ru/post/38434/https://vk.com/id17022311

Слайд 63slug
@app.route("/users/")
id
@app.route("/users/")

slug
@app.route("/posts/")
id
@app.route("/posts/")

slug@app.route(

Слайд 64@app.route('/users/')
def show_user_profile(username):
# показывает профиль пользователя
return 'User

%s' % username

@app.route('/posts/')
def show_post(post_id):
# показывает статью по её

id (int)
return 'Post %d' % post_id
@app.route('/users/')def show_user_profile(username):  # показывает профиль пользователя  return 'User %s' % username@app.route('/posts/')def show_post(post_id):  # показывает

Слайд 65master129;Малахов;Арсений;Викторович;25/01/1993;+7(918)646-55-91 airfix;Мадатов;Василий;Евгеньевич;30/11/1995;+7(951)345-83-17 kr0ff;Малинин;Петр;Степанович;18/12/1996;+7(938)044-15-18
users.txt
login;last_name;name;surname;birth_date;phone

master129;Малахов;Арсений;Викторович;25/01/1993;+7(918)646-55-91 airfix;Мадатов;Василий;Евгеньевич;30/11/1995;+7(951)345-83-17 kr0ff;Малинин;Петр;Степанович;18/12/1996;+7(938)044-15-18users.txtlogin;last_name;name;surname;birth_date;phone

Слайд 66Задание
Создать страницу users_list:
функцию users_list
путь /users
users_list.html, наследованный от base.html
вернуть users_list.html
Скопировать код

чтения файла из table.
Заменить humans.txt на users.txt
Добавить элементы (login,

birth_date, phone)
ЗаданиеСоздать страницу users_list:функцию users_listпуть /usersusers_list.html, наследованный от base.htmlвернуть users_list.htmlСкопировать код чтения файла из table. Заменить humans.txt на

Слайд 67@app.route("/users")
def users_list():
entities = list()
with open('users.txt', encoding="utf-8")

as f:
for raw_line in f:

data = raw_line.strip().split(';')
entities.append({'login': data[0], 'last_name': data[1],
'name': data[2], 'surname': data[3],
'birth_date' : data[4], 'phone': data[5]})

return render_template('users_list.html', entities=entities)
@app.route(

Слайд 68{% extends 'base.html' %} {% block title %}Список пользователей{% endblock %} {%

block content %}

Логин Фамилия Имя Отчество Дата рождения Номер телефона {% for item in entities %} {{ item.login }} {{ item.last_name }} {{ item.name }} {{ item.surname }} {{ item.birth_date }} {{ item.phone }} {% endfor %} {% endblock %}
{% extends 'base.html' %} {% block title %}Список пользователей{% endblock %} {% block content %}

Слайд 69Задание
Скопировать users_list в user_item:
функцию user_item
путь /users/
user_item.html, наследованный от base.html
вернуть user_item.html
+

код чтения файла из users_list.

ЗаданиеСкопировать users_list в user_item:функцию user_itemпуть /users/user_item.html, наследованный от base.htmlвернуть user_item.html+ код чтения файла из users_list.

Слайд 70Основные коды состояний
200 Ok (все норм)

403 Forbidden (доступ запрещен)
404 Not

Found (не найден)

500 Server Error (ошибка сервера)

http://ru.wikipedia.org/wiki/Список_кодов_состояния_HTTP


Основные коды состояний200 Ok (все норм)403 Forbidden (доступ запрещен)404 Not Found (не найден)500 Server Error (ошибка сервера)http://ru.wikipedia.org/wiki/Список_кодов_состояния_HTTP

Слайд 71Задание
Добавить к импорту abort
from flask import Flask, render_template, abort
Выбрать

пользователя по login’у
Если такого login’а нет, то вызвать abort(404)
В шаблоне

вывести данные о пользователе
ЗаданиеДобавить к импорту abortfrom flask import Flask, render_template, abort Выбрать пользователя по login’уЕсли такого login’а нет, то

Слайд 72@app.route("/users/")
def user_info(login):
item = None
with open('users.txt', encoding="utf-8")

as f:
for raw_line in f:

data = raw_line.strip().split(';')
if data[0] == login:
item = {'login': data[0], 'last_name': data[1], 'name': data[2],
'surname': data[3], 'birth_date' : data[4], 'phone': data[5]}
break

if item is None:
abort(404)
return render_template('user_info.html', item=item)
@app.route(

Слайд 73{% extends 'base.html' %}

{% block title %}Пользователь {{ item.login }}{%

endblock %}

{% block content %}
Фамилия: {{ item.last_name }}
Имя: {{ item.name

}}


Отчество: {{ item.surname }}


Дата рождения: {{ item.birth_date }}


Номер телефона: {{ item.phone }}


{% endblock %}
{% extends 'base.html' %}{% block title %}Пользователь {{ item.login }}{% endblock %}{% block content %}Фамилия: {{ item.last_name

Обратная связь

Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое TheSlide.ru?

Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.


Для правообладателей

Яндекс.Метрика