Содержание

Лекции Технопарка. 1 семестр. Web-технологии / Хабр

Сегодня этим постом мы открываем цикл еженедельных публикаций учебных материалов Технопарка. Если кто-то ещё не знает, Технопарк — это совместный образовательный проект Mail.Ru Group и МГТУ им. Н. Э. Баумана. На данный момент здесь проходит обучение по 20 IT-дисциплинам 91 наиболее талантливый студент. Технопарк существует с 18 ноября 2011 года, а первые счастливчики приступили к занятиям в декабре 2011 года.

Обучение в Технопарке совершенно бесплатное, оно проходит после занятий в университете. Стать участниками проекта могут студенты 3-5 курсов. Хотя для 2 и 6 курсов можем сделать исключение. Обучение длится 2 года, оно разбито на 4 семестра, в каждом из которых проходят по 3-4 предмета. Первый блок первого семестра посвящён всему, что связано с web-технологиями, от истории возникновения до программирования и безопасности web-приложений.

Лекция 1. Введение

На вводном занятии вы познакомитесь с краткой историей развития интернета, основными трендами в развитии web-приложений, облачных сервисов и мобильных приложений. Также на лекции разобрано устройство и работа несложного web-приложения, обсуждены такие фундаментальные понятия, как система адресации в интернете, домены, HTML-страницы и протокол HTTP. Напоследок кратко рассказано о CGI-скриптах, их назначении и особенностях работы.



Лекция 2. Сетевые протоколы

Вторая лекция посвящена сетевым протоколам. Сначала даны теоретические основы о модели OSI и вложенности протоколов, рассмотрено назначение и устройство протоколов TCP и IP, подробно рассказано о доменах, доменных зонах и делегировании. Затем лектор рассказывает о том, что собой представляет протокол HTTP, о назначении HTTP-заголовков, кодах ответа сервера и прочих нюансах передачи данных в сети. В оставшуюся часть лекции затрагиваются все вопросы, касающиеся электронных писем: какова структура e-mail, как составляются заголовок и тело письма, устройство и работа протоколов SMTP, POP3 и IMAP. В конце обсуждаются сугубо практические темы: составление списков рассылок, методы борьбы со спамом, назначение и работа расширения SPF, использование обратной зоны DNS.

Лекция 3. Web-серверы

На этой лекции рассмотрена общая схема работы web-сервера: что такое сокеты, конструкция запросов, файловая структура и ведение логов. Рассказано о различиях между frontend- и backend-серверами, а также об использовании серверов для получения статического контента и проксирования запросов. Далее затрагиваются азы конфигурирования сервера, рассказывается о таких понятиях, как MIME и Content-Type. После рассмотрения роли web-сервера в качестве сервера приложений, лектор переходит к информационному блоку об интерфейсах взаимодействия с языком программирования. А в конце лекции рассказывается о модели обработки запросов и способах сравнения производительности разных web-серверов.

Лекция 4. Серверная разработка

Вначале проведён небольшой обзор языков, используемых для разработки серверов. Затем подробно изучен протокол CGI, устройство CGI-скриптов и библиотеки для работы с ними.

Лектор рассказывает о том, как обрабатывать входные данные и работать с БД. Рассматривается работа с объектами и их списками, а также с формами. Затем вы узнаете, как использовать перенаправления, где и в каком виде хранятся данные на клиенте, как использовать cookie и сессии. Напоследок будет рассмотрена работа с шаблонами: использование шаблонизаторов, для чего нужны подшаблоны и особенности наследования шаблонов.

Лекция 5. Реляционные базы данных

Из этой лекции вы узнаете о том, что такое реляционные БД, для чего они используются и как развивались. Затем рассмотрены основные понятия, связанные с работой в реляционных БД, типы данных в SQL и работа с ними (нормализация, управление данными, выборки). Также лектор рассказывает о способах проверки целостности базы, использовании внешних ключей, а в конце лекции — о преимуществах и недостатках наиболее распространённых СУБД.

Лекция 6. MVC-фреймворки

MVC — это схема использования нескольких шаблонов проектирования. На лекции рассказывается о том, что это вообще такое и как эту схему применять на практике. Далее подняты вопросы маршрутизации URL и обработки HTTP-запросов. Затем рассказывается о визуализации данных с помощью представления и использовании шаблонов.

Лекция 7. Django (часть 2)

В конце предыдущей лекции была затронута тема реализации MVC во фреймворке Django. Здесь этот вопрос рассматривается уже подробно. В частности, вы узнаете о том, как написать скрипт управления django-приложением, что такое middleware и зачем оно нужно. Также вы познакомитесь с представлениями-классами (Class Based Views), расширениями фильтров и тэгов в шаблонизаторе и многим другим.

Лекция 8. HTML и CSS

После просмотра этой лекции вы многое узнаете о вёрстке web-страниц. Здесь рассказывается об истории развития и особенностях таких языков разметки, как HTML, XML и XHTML. В лекции преподаются основы вёрстки, рассматриваются основные тэги и атрибуты, без которых нельзя создать даже простейшую страницу.

Вы узнаете, какие бывают типы элементов страницы, как создавать таблицы и списки. Затем рассказывается о каскадных таблицах стилей (CSS), их создании и использовании.

Лекция 9. Javascript

Здесь вы познакомитесь с основами языка программирования JavaScript: с его синтаксисом, способами подключения к web-странице и моделями обработки событий. Заодно вы узнаете, что такое AJAX и как подключать JS-библиотеки. Остаток лекции посвящён использованию библиотеки jQuery и её плагинов.

Лекция 10. Rich Internet Applications

На данной лекции рассказывается о том, что собой представляют Rich Internet Applications, web-приложения, доступные через интернет. Они появились благодаря недостаткам, присущим HTML, CSS и JavaScript. Вы узнаете о возможностях, преимуществах и недостатках RIA, их устройстве и наиболее популярных видах использования.

Лекция 11. Безопасность web-приложений

Последняя лекция этого блока в Технопарке. На ней рассказывается об основных аспектах безопасности, которые необходимо знать web-разработчику: как реализована авторизация в протоколе HTTP, как можно сделать систему авторизации с помощью web-приложения, базовые понятия криптографии, средства безопасности в браузерах и какие бывают виды атак на web-приложения.

Подписывайтесь на наш youtube-канал!

Технологии Web-программирования — Современные технологии программирования (Информатика и программирование)

1 Технологии Web-программирования

1.1 Серверные Web приложения

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

Программы CGI. Для того чтобы сервер Web мог вести диалог с пользователем, разработан механизм программных расширений сервера, основанный на применении так называемого стандартного шлюзового интерфейса (Common Gateway Interface, CGI). Программы CGI пользуются этим интерфейсом для получения сведений от пользователя, для их обработки и отправки обратно в виде нового документа HTML, ссылки на существующий документ или на другой объект.

При этом для ввода информации пользователем в документ HTML встраиваются формы, содержащие различные органы управления. Заполнив всю форму, пользователь нажимает кнопку ввода, и данные из полей формы передаются программе CGI (рис. 1). Обработав данные, программа CGI динамически формирует новый документ HTML с результатами обработки и отправляет его обратно пользователю. При необходимости программа CGI обращается к СУБД или другим программным системам, работающим на сервере.

Программы CGI можно составлять на различных языках программирования – С, C++, Perl, Pascal, Java и т. д. Perl особенно удобен для создания программ CGI, так как, он содержит соответствующие функции, и доступен в различных операционных системах, в том числе Linux и Solaris.

Программа CGI – это консольное приложение, работающее в среде операционной системы сервера Web и осуществляющее обмен данными через стандартные потоки ввода и вывода. Такое приложение запускается только по запросу пользователя, когда к нему выполняется обращение из документа HTML. Окончив обработку запроса пользователя, программа CGI завершается.

Расширения ISAPI. Другая технология расширения сервера Web – программный интерфейс сервера Microsoft IIS – ISAPI (Internet information Server Application Program Interface). По своим функциональным возможностям модули ISAPI аналогичны программам CGI, однако они работают быстрее за счет того, что приложение не завершается после обработки данных, а постоянно работает в виде процесса. Для CGI программ, для каждого пользователя приходится запускать отдельный процесс, что занимает время, а приложение ISAPI обрабатывает запросы от всех пользователей. С другой стороны, так как ISAPI работает в адресном пространстве сервера Web, ошибка в приложении ISAPI способна вызвать аварийное завершение работы сервера Web. Ошибки в программе CGI менее значимы, так как авария произойдет в том процессе, в котором работает эта программа.

Рис. 1. Взаимодействие клиентского браузера и программного расширения

Хотя технология ISAPI изначально предназначалась только для сервера Microsoft IIS, сейчас ее можно использовать и на платформе Linux. Для создания расширения ISAPI, используются языки С и C++, а также функции программного интерфейса Windows.

Приложения ASP. Технология Active Server Pages (ASP) предполагает использование на сервере Internet Information Server текстовых файлов с расширением asp, содержащих операторы языка HTML, и сценарии, на JScript или VB Script. Когда пользователь обращается к странице ASP, сервер Web интерпретирует расположенный в ней сценарий. При этом анализируются параметры, переданные этой странице. Далее страница модифицируется (или создается заново), а затем отправляется обратно пользователю. Сервер Web отправляет не саму страницу, а результат ее интерпретации, а логика работы страницы скрыта от пользователей.

Приложения РНР. Еще один способ создания активных серверов Web – использование технологии предварительной обработки гипертекста РНР (сокращение от «Php: Hypertext Preprocessor » ). В то время как ASP предполагает активное использование модели компонентного объекта СОМ и элементов управления ActiveX, технология РНР базируются на классических библиотеках объектных модулей. Разработанная для платформы Unix и ее клонов, РНР сегодня доступна и на платформе Microsoft Windows.

1.2 Клиентские приложения

Целесообразно разделять работу между клиентом и сервером, чтобы добиться оптимальной производительности в условиях низкоскоростных каналов Интернета. Предварительную обработку введенных данных, отправляемых серверу, имеет смысл выполнять на стороне клиента. Это позволит исключить, повторные передачи неправильно заполненных форм. А вот выборку из базы данных должен выполнять сервер.

Браузер, отображающий содержимое страниц, играет роль «интеллектуального » терминала. Помимо показа текста и графических изображений, браузер представляет собой среду, в которой работают активные объекты, встроенные в страницы Web. Это сценарии JavaScript, VB Script, аплеты Java, элементы управления ActiveX и некоторые другие.

Клиентские сценарии JavaScript. Язык сценариев JavaScript разработан фирмой Netscape Communication Corporation и первоначально назывался LiveScript. Язык JavaScript не имеет никакого отношения к языку Java, созданному Sun Microsystems.

Конструкции языка JavaScript встраиваются в страницы HTML и интерпретируются под управлением браузера при загрузке страниц, а также при совершении пользователем определенных действий над объектами, расположенными в этих страницах. Сценарии JavaScript способны обрабатывать данные, введенные пользователями в полях форм, а также события, возникающие в процессе манипуляций пользователя с мышью, копировать в окно браузера другие страницы HTML или изменять содержимое уже загруженных страниц.

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

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

Информация в лекции «22 Преобразование алгоритмов — ЯЛС» поможет Вам.

Для обеспечения совместимости с различными браузерами приходится учитывать такие особенности, что например, браузер IE реализует собственную версию JavaScript, называемую JScript.

Клиентские сценарии VB Script. Помимо JScript, браузер IE способен работать с VB Script, являющийся подмножеством Visual Basic и функционально равноценен языку JavaScript. Так как не все в Интернет работают с IE, применение VB Script для создания страниц, расположенных в Интернете, неоправдано. Ситуация меняется, если эта технология применяется в корпоративной интрасети. Когда администратор может установить на компьютеры всех пользователей IE, а в штате компании есть программисты, имеющие большой опыт работы с Visual Basic, то применение VB Script вместо JavaScript сокращает сроки разработки.

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

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

Элементы управления ActiveX. Элементы управления ActiveX (ActiveX control) основаны на модели компонентных объектов (Component Object Model, СОМ), их применяют для решения тех же задач, что и аплеты Java, однако предоставляют полный доступ к ресурсам компьютера. Это сокращает привлекательность элементов ActiveX для оформления страниц серверов Web, так как загрузка на компьютер неизвестных программ небезопасна. Элементы управления ActiveX можно использовать как на стороне сервера, так и на стороне клиента. Чтобы убедить пользователей в том, что предлагаемый для загрузки элемент ActiveX безопасен, используется технология цифровых сертификатов. Чтобы получить цифровой сертификат и подписать свой элемент управления ActiveX, разработчик должен внести единовременный денежный взнос, а затем производить ежегодную плату.

Заметим, что при разработке элементов управления ActiveX для Web-сервера их можно не подписывать, так как они не загружаются клиентами, а выполняются непосредственно на сервере.

Открытое образование — Веб-программирование

Select the required university:

———

Закрыть

Log in and enroll

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

Курс получил диплом III степени в специальной номинации от экспертного сообщества «Лучший курс по программированию» в Международном конкурсе открытых онлайн-курсов EdCrunch Award в 2018 году.

  • About
  • Format
  • Information resources
  • Requirements
  • Course program
  • Education results
  • Formed competencies
  • Education directions

About

Курс посвящен базовым технологиям веб-программирования – HTML и CSS и рассчитан на людей с минимальными знаниями в области веб-технологий.

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

В этом курсе помимо просмотра привычных видеолекций и презентаций вы будете практиковаться работать с кодом в интерактивных упражнениях, а закреплять навыки и доказывать, что вы действительно чему-то научились – в настоящих испытаниях. Практическая часть курса построена как игра: постепенно усложняющиеся задания, встречающиеся по ходу курса головоломки, мини-игры и сопровождающий вас Инструктор Кекс, не дадут соскучиться. А в конце курса вас ждёт итоговое испытание, в котором нужно будет сверстать страницу целиком.

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

Format

В состав курса входят видео-лекции, интерактивные пошаговые демонстрации, практические упражнения и испытания. Длительность курса составляет 10 недель. Трудоемкость курса – 4 зачетных единицы. Средняя недельная нагрузка на обучающегося – 14 часов.

1. Консорциум Всемирной паутины
2. Для тех, кто делает сайты
3. HTML | Mozilla Developer Network
4. CSS | Mozilla Developer Network

Requirements

Для успешного освоения курса необходимы базовые навыки работы с компьютером и сетью Интернет. На компьютере должен быть установлен текстовый редактор с подсветкой синтаксиса языков HTML и CSS, а также свободно-распространяемый графический редактор GIMP (GNU Image Manipulation Program), который можно бесплатно скачать по адресу: http://www.gimp.org/

Course program

В курсе рассматриваются следующие темы:

1. Введение в веб-технологии
2. Знакомство с HTML
3. Знакомство с CSS
4. Разметка
5. Графический редактор для веб-разработчика
6. Сетки
7. Позиционирование
8. Декоративные элементы
9. Стилизация элементов содержания
10. Публикация проекта

Каждая тема предполагает изучение в течение одной недели.

В курсе имеется два типа дедлайна (предельного срока выполнения оценивающих мероприятий):
– мягкий дедлайн, при котором необходимо выполнить все оценивающие мероприятия текущей недели до ее завершения;
– жесткий дедлайн, при котором на выполнение оценивающих мероприятий после мягкого дедлайна дополнительно выделяется еще две недели, по окончании которых доступ к соответствующим мероприятиям закрывается.

Education results

  • умения и навыки решения типовых задач клиентской веб-разработки, используя языки HTML и CSS (РО-1).

Formed competencies

09.03.01 Информатика и вычислительная техника

  • Разрабатывать интерфейсы «человек – электронно-вычислительная машина» (ПК-3)
  • Разрабатывать компоненты программных комплексов и баз данных, использовать современные инструментальные средства и технологии программирования (ПК-5)
  • Способность к проектированию базовых и прикладных информационных технологий (ПК-11)
  • Способность разрабатывать средства реализации информационных технологий (методические, информационные, математические, алгоритмические, технические и программные) (ПК-12)
  • Способность участвовать в работах по доводке и освоению информационных технологий в ходе внедрения и эксплуатации информационных систем (ПК-15)

09. 03.02 Информационные системы и технологии

  • Способность к проектированию базовых и прикладных информационных технологий (ПК-11)
  • Способность разрабатывать средства реализации информационных технологий (методические, информационные, математические, алгоритмические, технические и программные) (ПК-12)
  • Готовность участвовать в работах по доводке и освоению информационных технологий в ходе внедрения и эксплуатации информационных систем (ПК-15)

09.03.03 Прикладная информатика

  • Способность использовать нормативно-правовые документы, международные и отечественные стандарты в области информационных систем и технологий (ОПК-1)
  • Способность разрабатывать, внедрять и адаптировать прикладное программное обеспечение (ПК-2)
  • Способность программировать приложения и создавать программные прототипы решения прикладных задач (ПК-8)
  • Способность принимать участие во внедрении, адаптации и настройке информационных систем (ПК-10)

09. 03.04 Программная инженерия

  • Готовностью применять основы информатики и программирования к проектированию, конструированию и тестированию программных продуктов. (ОПК-3)
  • Готовность применять основные методы и инструменты разработки программного обеспечения (ПК-1)
  • Владение навыками использования операционных систем, сетевых технологий, средств разработки программного интерфейса, применения языков и методов формальных спецификаций, систем управления базами данных (ПК-2)
  • Способность создавать программные интерфейсы (ПК-22)

Education directions

09.00.00 Информатика и вычислительная техника

Университет ИТМО

Першин Александр Александрович

Кандидат технических наук
Position: Генеральный директор ООО «Интерактивные обучающие технологии»

Certificate

По данному курсу возможно получение сертификата.

Similar courses

31 August 2020 — 15 August 2030 г.

Эконометрика

НИУ ВШЭ

7 September 2020 — 15 August 2030 г.

Общая социология

НИУ ВШЭ

15 February 2021 — 31 December 2022 г.

Введение в биоинформатику: метагеномика

СПбГУ

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

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

Google Chrome

Mozilla Firefox

Apple Safari

Основы web-программирования — Лекции 14 Сергей Львович Островский


С этим файлом связано 6 файл(ов). Среди них: Tehnologiya programmirovaniya.pdf, 绦咽 喻遽睇� 爨蝈痂嚯� 磬 2 沭箫矬 漕矬耜�.doc, 绦咽 喻遽睇� 爨蝈痂嚯� 磬 2 沭箫矬 漕矬耜�(1).doc, Основы web-программ ирования.pdf, МетодичкаОС.doc, МетодичкаОС.doc.
Показать все связанные файлы
Подборка по базе: Анатомия лекции.pdf, ответы лекции.docx, Конспект к лекции 5.pdf, Задания к Лекции 2.docx, ГИГИЕНА 1,2 ЛЕКЦИИ.docx, Конспект лекции по ТЭС.pdf, ВП лекции.doc, ДКБ Лекции.docx, 1. Конспект лекций, ч.1-Трофимович В.В.- ОМПС 2018.pdf, Бухгалтерия. Лекции.docx

  1   2   3   4   5   6   7   8   9   10   11


С.Л. ОСтрОвСкий
Москва
Педагогический университет «Первое сентября»
2009
Основы Web-программирования
для школьного «сайтостроительства»
Лекции 1–4


Сергей Львович Островский
Материалы курса «Основы web-программирования для школьного «сайтострои- тельства»» : лекции 1–4. – М. : Педагогический университет «Первое сентября»,
2009. –48 с.
© С.Л. Островский, 2008
© Педагогический университет «Первое сентября», 2008
Содержание
Лекция 1
Пролетая над миром web-программирования . ……………………………………………………………………………………………………………………..3
Лекция 2
Пример задачи автоматизации: доска объявлений школьного сайта …………………………………………………………….17
Лекция 3
Обработка форм на стороне сервера …………………………………………………………………………………………………………………………………………..30
Лекция 4
«Позвольте, товарищи, у меня все записано!» ………………………………………………………………………………………………………………………43



��
�����������������������������������
������������������������
������������������������������
��������������������
��� ��������
���������������������������������������������������������������������������������
������������������������������������������������������������������������������������
�������������������������������������������������������������������������������������
�������������
���������������������������������������������������������������������������������
������������������������������������������������������������������������������������
����������� ������� �������� �� �������� ��������� ������� ��������������� �������
��������� �� �������� ������������ �������� �������������� ����� �������� ���������
����������������� ��������������������������������������������������������������������
�������������������������������������������������������������������������������������
����������������������������������������������������������������������������������
���������������������������������
���������������
����� ������������� ���� ��������� ����������
���� ��������� ��� ������ �������� ������ ��������
������������ ��� ������ ������ �������� ����� ���� �
�������������������������������������������������
��� ������ ��������� ����� ������� �� �������� �� ���
����� �������������� ������� ��������������� ����
��������������� ���������� �������� �� ��������
��� ���������� ���������������� ���� �������� ��
������� ������������ ������ ������������ ���������
�����������������������������������������������
�������� �����
������� �������� ���������� ����������������
����������������������������������������������
��� ������� ��������� ��������� ���������� ������
���� � ��������������� ��������� ����� ���� �������
������������ ��������� ������ ��� ������� �����
������������� �������� ������������� ��� �� �����
��� ���������� ���� ���� ��������� ��� ������ �����
������� �� ����� ������� ��� ������ ������������ ����
���������� ������� ������������ �� �������� ����� ���
������������� ������������ ������������ ��� ����
���������� ���� ������������ ������ ���������� ��
�������������� �� ������ �������������� �� �����
���� ��������� ��������� �������� ��������
����� ������� �� ������� ���������� �����������
������������
�������� ����� ������� ��� ���� ������� ������� ���
����� �������� ���������� ����������������� �
����������� ����������� ��������� ������ �����
��������� �� ������ ���������� ������������ �����
�����������������������������������������������
������������� ��������� �� �������������� �����
��� ���������� �������� ������ ��������� ���������
����� ������ ���������������� ��� ��������������
������ ���� �� ����� ����� ������������ ��������
������� ������ �� ������ ������ �������� ��������
����� ������� ������� ���� �� ������������ ���������
�������� ������ ���������� ������������ ��������
������������ ������������ �� ��������� �������
���� �����
Основы web-программирования
для школьного “сайтостроительства”
ОстрОвский сергей Львович — главный редактор газеты “Информатика”, заместитель гендирек- тора Издательского дома “Первое сентября”, руководитель отдела программирования, учитель инфор- матики московской гимназии № 1514. Web-программированием профессионально занимается c 1997 г.
C 2007 г. на очном отделении Педагогического университета “Первое сентября” читает курсы “Ос- новы web-дизайна и школьного «сайтостроительства»”, “Web-программирование для школьного
«сайтостроительства»”, “Интерактивная web-графика и web-анимация”. В 2006/2007 и 2007/2008 учебных годах состоялось 7 выпусков групп по этим курсам.
кОнцепция курса
Сайтом школы сегодня уже никого не удивишь. Несколько тысяч учреждений среднего образования в России имеют собствен- ные доменные имена, а уж “простые странички” и вовсе сосчитать невозможно. Все это большое хозяйство требует постоянной поддержки, которая, по факту, чаще всего ложится на плечи учителей информатики. И начинается… “У нас сменился телефон, надо поменять на всех страницах…”, “у Марии Ивановны скоро день рождения, надо разместить на сайте поздравление…”,
“а почему еще не готова страничка выпускного класса?..”. Даже если очень любить свою работу, такая жизнь может скоро свести с ума.
Между тем все технологии для автоматизации обслуживания сайтов давно придуманы. В идеале программист-разработчик после сдачи проекта заказчику к нему не прикасается вовсе — все текущее наполнение сайта производится посредством так называемых “CMS” (систем управления контентом). Но это в идеале… В реальности же применительно к школьным сайтам это пока не так, но и здесь можно на порядки облегчить себе жизнь, потратив некоторое время на программирование.
В курсе на конкретных практических примерах рассматриваются основные составляющие систем автоматизации обслу- живания сайтов: язык PHP и СУБД MySQL. В качестве инструмента используется пакет web-разработчика Denwer.
Для успешного освоения курса необходимо иметь опыт разработки web-страниц на HTML и на базовом уровне владеть каким-либо из языков программирования (например, Паскалем, Си и т.п.). Очень желательно иметь представление о CSS и Javascript.
Конечно, предлагаемый курс — это только начало, самый первый шаг. Но ведь он, как знают учителя, зачастую и является самым трудным. Надеемся, мы поможем нашим слушателям его сделать.
учебный пЛан

брошюры
Лекция
1
Лекция 1. “Пролетая над миром web-программирования”. Границы возможностей статического HTML. Два мира, две системы: программирование на стороне клиента и программирование на стороне сервера. Идем от реальности: текущие предложения хостинг-провайдеров. Инструментарий: пакет Denwer, установка. Первая программа на PHP “Здравствуй, мир web- программирования”.
1
Лекция 2. Пример задачи автоматизации: доска объявлений школьного сайта. SSI, основные возможности и директивы.
SSI-версия школьной доски объявлений. PHP-версия доски объявлений. Совершенству нет предела: выводим все объявления из каталога, помечаем важные. Передача параметров в программы на PHP. Обзор синтаксиса PHP: типы данных, операции, основные алгоритмические конструкции.
1
Лекция 3. Обработка форм на стороне сервера. Формы и элементы управления HTML: однострочное и многострочное поля ввода, флажки, радиокнопки, списки. Методы GET и POST, кодирование URL. Обзор синтаксиса PHP: функции, массивы.
1
Лекция 4. «Позвольте, товарищи, у меня все записано!» Усовершенствованная доска объявлений с разделом администратора.
Обзор синтаксиса PHP: файлы. Законченный мини-проект: административный интерфейс для доски объявлений на файловом
“движке”.
контрольная работа № 1. Разработка теста с обработкой результатов тестирования на стороне сервера.
2
Лекция 5. PHP + MySQL. Введение в использование баз данных в задачах web-программирования. Зачем нужна СУБД? Теория реляционных баз данных: основные термины. SELECT — “главная команда” SQL. Что такое MySQL? Взаимодействие с сервером
MySQL из программ на PHP.
2
Лекция 6. Свои журналы ближе к т
/ делу.
База данных “Страница школьного журнала”: от проектирования до визуализации.
Практическое применение базы данных для автоматизации школьного сайта и школьной жизни.
контрольная работа № 2. Доработка базы данных “Страница школьного журнала”.
2
Лекция 7. Соображаем“на троих”. Задействуем трех основных “игроков”: MySQL+PHP+Javascript. Проверка данных форм на стороне клиента перед отправкой на сервер.
2
Лекция 8. “Живописцы, окуните ваши кисти…” Рисование средствами PHP. Генерирование графических данных “на лету”.
Построение графиков и диаграмм. Графическая визуализация данных школьного журнала.
итоговая работа.



Здравствуйте!
Прежде всего здравствуйте, дорогие коллеги!
В этом курсе нам предстоит познакомиться с удивитель- ным и захватывающе интересным миром web-програм- мирования. Конечно, мир этот огромен, практически не- объятен. Даже профессионалы обычно специализируются на некотором множестве технологий, а о других “имеют представление”. Поэтому нашей задачей-максимум будет знакомство с основными, наиболее распространенны- ми современными технологиями. Какими именно? Об этом — чуть ниже в разделе “Идем от реальности”.
Но, кажется, я допустил грубую педагогическую ошибку — не представился. Это тем более нехорошо, что мне, как главному редактору “Информатики”, хо- рошо известно, что лекции нашего дистанционного
Педуниверситета — это особый жанр. Их стиль, как правило, отличен от безличного и даже немного “высу- шенного” стиля газетных статей. В лекциях автор имеет полное право сказать (написать) “я думаю”, “я советую”.
Авторское “я” в лекциях не прячется за непонятным
“мы”. Здесь я — это я .
А я — это Сергей Львович Островский, главный ре- дактор “Информатики” (на этой должности я работаю с 1999 г., а вообще в газете — с момента ее основания в 1995 г.), учитель программирования московской гим- назии № 1514 (с 1990 г.), заместитель генерального ди- ректора Издательского дома “Первое сентября”, в сферу ответственности которого входит, в частности, и отдел программирования.
Web-программированием я занимаюсь с 1997 г. В те- чение некоторого времени весь наш отдел программи- рования из меня одного и состоял. Но с увеличением ко- личества задач увеличивалось и количество сотрудников.
Сейчас нужды Издательского дома обслуживает доволь- но большой отдел, в котором работают программисты, специализирующиеся на различных задачах, главной из которых является поддержка наших интернет-проек- тов. И хотя в последнее время мне все меньше прихо- дится программировать и все больше руководить, я ста- раюсь оставаться в профессиональной форме и вникать во все, что делают мои коллеги.
Важно также отметить, что этот дистанционный курс является сокращенной версией одноименного курса, который я читаю на наших очных курсах в Москве. Судя по отзывам слушателей, подавляющее большинство из них курсом довольны. Пользуясь случаем, я хочу искрен- не поблагодарить своих слушателей, которые терпеливо и мужественно осваивали этот непростой курс и от об- щения с которыми у меня остались самые лучшие вос- поминания.
В течение всего курса со мной можно (и нужно!) связываться для оперативных консультаций. Для это- го есть два способа. Первый — посредством элект- ронной почты. Пожалуйста, пишите мне на адрес
[email protected]. Тема письма в обязательном порядке должна начинаться с “7009” (это код нашего курса). Дополнительная просьба: в каждом письме ука- зывайте, пожалуйста, ваш идентификатор слушателя и полные фамилию имя и отчество.
Второй способ оперативной связи — ICQ. Для того чтобы мы могли общаться посредством ICQ, вам снача- ла необходимо прислать мне по электронной почте ваш номер, и я включу вас в свой контакт-лист. Просто пы- таться авторизоваться бесполезно — мой спам-фильтр отсекает все попытки несанкционированных авториза- ций. Я просто не получу ваш запрос.
Повторю: обязательно связывайтесь со мной для ре- шения возникающих проблем. Я не могу обещать не- медленного ответа на электронное письмо, но в течение нескольких дней отвечу обязательно. Что касается ICQ, то у меня всегда честно выставлен статус. Если написано
“занят”, значит, правда занят. “Свободен” — готов отве- тить на вопрос.
Ну, вот, почти познакомились. Поехали? 
…Простите, чуть не забыл сказать очень важную вещь.
Данный курс (как все курсы нашего Педагогическо- го университета), разумеется, можно просто читать.
Фактически слушатели отличаются от читателей газеты лишь тем, что должны тщательно прорабатывать мате- риалы лекций, выполнять текущие задания и контроль- ные работы. Но я приложил максимум усилий, чтобы лекции были интересны всем, а не только тем, кто запи- сался на курс. Так что интересного вам чтения, а слуша- телям — успешной учебы.
Вот теперь поехали!
Можно ли обойтись без
web-программирования?
Можно! Но… сложно. Впрочем, все, конечно, зависит от стоящей перед вами задачи. Разумеется, при реали- зации различных интерактивных сервисов (всевозмож- ных форумов, например) без программирования обой- тись нельзя. В этом практически ни у кого нет сомнений.
А вот можно ли обойтись без программирования при разработке “обычного” школьного сайта? Ответ “мож- но, но сложно” относится именно к такому пониманию вопроса. Почему? Давайте разберемся.
Что такое сайт с технической точки зрения? Мно- жество файлов. Среди них — html-страницы, картинки,
Лекция 1
Пролетая над миром web-программирования



ПрОЛетая над мирОм WEb-ПрОграммирОвания
файлы других форматов. Даже при средних размерах сайта количество файлов обычно значительно. Ну, на- пример, рассмотрим типовой сайт школы, на котором имеются: главная страница, страницы методических объединений (кафедр), страницы учителей, классов (как проходящих обучение, так и окончивших школу). Этот список каждый из нас может с легкостью продолжить.
Допустим, что макет сайта выполнен без особых изыс- ков, но добротно. А на страницах добротных школьных сайтов обычно присутствуют своеобразные “выходные данные” — адрес школы, контактный телефон и т.п. Со- гласны? Пока нет вопросов? Сейчас будут!
Причем не вопросы, а настоящее стихийное бед- ствие: у школы изменился телефон (например, в Мос- кве не так давно код в ряде районов сменился с 495 на
499). Представляете масштаб “катастрофы”? Это же придется пройтись по всем страницам (а их могут быть не сотни, а тысячи!) и изменить всего один несчастный телефон! Что, кто-то не испугался? Ага, нашлись продви- нутые html-кодеры, уже слышны всякие разговоры про фреймы (ух… не люблю я эти фреймы, но признаю — с использованием фреймов можно спроектировать сайт так, чтобы указанная задача изменения телефона была очень простой). Хорошо, а как вам следующая задачка?
Как здорово видеть на школьном сайте поздравления с днем рождения! Причем не только учителям эти поздрав- ления приятно получать, но и ученикам. Согласны? А те- перь давайте прикинем трудозатраты… В школе, в которой я работаю, около 200 учителей и 800 учеников. Это значит, что каждый день, без выходных и отпусков, веб-мастер должен обновлять соответствующую страницу. И оши- баться ему крайне не рекомендуется — представляете, как будет кому-то обидно, если именно его забудут .
Подобных примеров я знаю очень много и приводить их могу долго (я еще про расписание могу рассказать, про расписание замен и т. п.). Дело здесь не в конкрет- ных примерах, а в общей, объединяющей их идее. А она такова: сделать сайт, не прибегая к программированию, можно. Сделать, разместить и… забыть. Потому что под- держивать сколько-нибудь масштабный сайт “руками”, бесконечно править статичные html-файлы нереально!
Но ведь никто так и не делает . Для поддержки сайтов разрабатываются специальные программы уп- равления содержанием (это практически буквальный перевод термина CMS — Content Management System).
В некотором смысле наш курс о том, как устроены та- кие программы. Ведь в ряде случаев профессиональная
CMS и не нужна — нужно лишь минимально автомати- зировать некие типовые операции обслуживания сайта
(вспомним о тех же днях рождения).
Итак, повторю еще раз основную мысль: необходи-
мость в программировании возникает, как правило,
на этапе решения задач обслуживания сайта. Иногда пара строчек кода заменяет дни работы (и, кстати, по- вышает качество этой работы!). Я понимаю, что пока все это больше похоже на лозунги, чем на руководство к действию. Но чуть потерпите. Уже в этой лекции мы покажем, как лозунги претворяются в жизнь.
Два мира, две системы
Возможно, некоторые из наших молодых коллег ни- когда не слышали фразы, вынесенной в заголовок этого пункта. Оно и к лучшему. Но в любом случае речь пой- дет не об оригинальном смысле этого штампа советской пропаганды, а о двух мирах web-программирования — клиентском и серверном.
Слышали ли вы когда-нибудь такие программистские термины — “сторона клиента” и “сторона сервера”? Не исключено, что слышали, например, в таком контексте:
“скрипт работает на стороне клиента” (или “…сервера”).
Хотите узнать, что имеется в виду?
Сторона клиента — это компьютер клиента, пользо- вателя. Тот самый компьютер, за которым сидит поль- зователь, когда работает в Интернете. Еще более узко, сторона клиента — это браузер пользователя. В целях безопасности мир браузера частично отстранен от мира клиентского компьютера, и скрипты (программы), вы- полняющиеся в браузере, имеют ограниченный доступ к файловой системе.
На каких языках можно программировать на сторо- не клиента? Прежде всего, конечно, на “эсперанто” всех браузеров — языке Javascript. Программированию на
Javascript посвящено немало хороших книг, среди ко- торых есть настоящий шедевр А.А. Дуванова, который
(что мне особенно приятно!) впервые был опубликован в “Информатике” [1].
Основное назначение Javascript — манипулирование объектами браузера, посредством которого можно как реализовывать достаточно сложные интерактивные сце- нарии, так и просто облегчать себе жизнь при решении рутинных задач.
Рассмотрим простой пример. Допустим, вам требует- ся поместить на страницу набившую оскомину таблицу перевода чисел (к примеру, в диапазоне от 0 до 256) из десятичной в двоичную и шестнадцатеричную системы счисления. Ничего сложного в этой задаче нет — если есть много лишнего времени, можно даже набить тре- буемую таблицу. Только делать это не надо. Я, например, потратил на все про все чуть больше минуты, включая время на набор кода. Вот такого, к примеру:
Пример 1

  1   2   3   4   5   6   7   8   9   10   11

Весь гарвардский курс по основам программирования

Офтоп

Vert Dider

23 лекции на русском языке по 40-60 минут.

Привет, TJ!

Сегодня хотим представить все 23 серии Гарвардского курса по основам программирования, который был прочитан осенью 2015 года. Курс переведён и озвучен нашей студией по заказу JavaRush, и мы хотим сказать им огромное спасибо за поддержку!

На кого рассчитан курс CS50?

Если вы новичок, пройдите CS50. Если кто-то из ваших знакомых приглядывается к ИТ и программированию, советуйте CS50 не глядя. Я серьезно.

CS50 подойдет любому человеку, кто решил стать «айтишником». Пожалуй, его можно рекомендовать и способным 12-летним, и умудренным опытом «перебежчикам» из других профессий. Идеально — старшеклассникам и студентам.

Курс очень прогрессивный и обновляется из года в год. При этом в отличие от большинства подобных университетских обучающих программ (например, MIT 6.00X) от слушателя не требуются знания университетской математики, достаточно школьного уровня.

Что изучают на CS50?

— Основы компьютерных наук и программирования. Системы счисления, работа с командной строкой в Linux, циклы, условные переходы и прочие радости;

— Концепции алгоритмов и алгоритмичности мышления. Вы узнаете о том, какие задачи можно решать с помощью программирования и каким образом. О бинарном поиске, простом по сути, но очень эффективном и требующем тщательности в реализации, Дэвид Малан расскажет сходу, прямо на нулевой лекции. И попробуйте потом забыть сцену с разрывом телефонного справочника, а вместе с ней — и полученные знания! Вообще, курс охватывает все основные алгоритмы, которые нужно знать и понимать «айтишникам»;

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

— Основы языка программирования C и визуального языка Scratch. Собственно, все основные примеры и задания студенты делают на языке C;

— Основы баз данных и SQL;

— Веб-разработка: основы CSS, HTML, JavaScript и PHP. Естественно, только самые азы;

— Основы подготовки презентации проектов по программированию.
Приятного просмотра!

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

2-я лекция: также является вступительной и знакомит с общими понятиями языков программирования, продолжая тему первой лекции.

3-я лекция: знакомит с понятием и функциями компилирования и рассказывает, каким образом в программах появляются баги (начиная с самого первого «компьютерного жучка»), как их распознать и чем они могут быть вызваны.

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

5-я лекция: продолжение о багах, плюс раскрывает понятие структуры программы, объясняет, зачем нужны функции внутри кода, в чём важность области действия значений, и вводит функцию strlen. Также из неё вы узнаете, как в CS50 борются с любителями списывать, и научитесь экономить оперативную память компьютера во избежание ошибки сегментации.

6-я лекция: об основах криптографии, массивах и аргументах командной строки.

7-я лекция: знакомит с основными методами сортировки данных. Дэвид Мэйлен рассказывает о пузырьковой сортировке, сортировках выбором, вставкой и слиянием, а зрители проверяют их на практике.

8-я лекция: про сортировку данных методом слияния, а также краткий экскурс в мир побитовых операций.

9-я лекция: продолжение знакомства с оператором условия — if, введение понятие рекурсии, а также обсуждение скандала концерна Volkswagen и проблемы компьютерной безопасности. Лектор детально рассматривает функцию перестановки — swap, демонстрирует приёмы работы с отладчиком программ и раскрывает структуру и механику оперативной памяти.

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

11-я лекция: изучение указателей, разбор структуры функций библиотеки CS50, знакомство с утечкой памяти, введение понятия linked list и других структур данных с детальной демонстрацией.

12-я лекция: про особенности стека, очереди и связного списка. Разбор возможных проблем, связанных с доступом к памяти. Тут же рассматривается структура двоичного дерева, префиксного дерева и работа со сжатием файлов.

13-я лекция: о хэшировании данных, сетевых протоколах и о том, как при помощи зашифрованных соединений защитить себя от подозрительных незнакомцев.

14-я лекция: введение в веб-программирование и знакомство с языками HTML и CSS.

15-я лекция: тема пятнадцатой серии цикла — введение в веб-программирование и знакомство с языком программирования PHP и языком разметки HTML.

16-я лекция: шестнадцатая серия цикла продолжает рассматривать язык PHP, теперь для разработки веб-приложений, а также знакомит с базами данных и MySQL.

17-я лекция: семнадцатая серия цикла продолжает знакомить зрителей с базами данных SQL.

18-я лекция: тема восемнадцатой серии цикла — введение в ДжаваСкрипт и программирование на стороне клиента.

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

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

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

22-я лекция: в двадцать второй серии цикла профессор Сказелатти из Йельского Университета демонстрирует использование искусственного интеллекта в играх.

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

Web-программирование. Python 3. (Лекция 4) презентация, доклад

Слайд 1
Текст слайда:

WEB-ПРОГРАММИРОВАНИЕ ЛЕКЦИЯ 4. PYTHON 3 (ЧАСТЬ 1)

АСИСТ. КАФ. 308 ТРУТНЕВА НАДЕЖДА ВЛАДИМИРОВНА
ТЕЛ: 8-926-880-12-76
ПОЧТА: [email protected]


Слайд 2
Текст слайда:

PYTHON 3

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

Python – интерпретируемый язык программирования.


Слайд 3
Текст слайда:

ПРОГРАММА

Программа на языке Python может состоять из одного или нескольких модулей. Каждый модуль представляет собой текстовый файл в кодировке, совместимой с 7-битной кодировкой ASCII. Для кодировок, использующих старший бит, необходимо явно указывать название кодировки. Например, модуль, комментарии или строковые литералы которого записаны в кодировке KOI8-R, должен иметь в первой или второй строке следующую спецификацию:

# -*- coding: utf8 -*-

Программа на Python, с точки зрения интерпретатора, состоит из логических строк. Одна логическая строка, как правило, располагается в одной физической, но длинные логические строки можно явно (с помощью обратной косой черты) или неявно (внутри скобок) разбить на несколько физических:
(синтаксис python 2.7)
print a, » — очень длинная строка, которая не помещается в», \
80, «знакоместах»


Слайд 4
Текст слайда:

ИМЕНА

Имя может начинаться с латинской буквы (любого регистра) или подчеркивания, а дальше допустимо использование цифр. В качестве идентификаторов нельзя применять ключевые слова языка и нежелательно переопределять встроенные имена.
>>> import keyword
>>> keyword.kwlist
[‘and’, ‘assert’, ‘break’, ‘class’, ‘continue’, ‘def’, ‘del’,
‘elif’, ‘else’, ‘except’, ‘exec’, ‘finally’, ‘for’, ‘from’,
‘global’, ‘if’, ‘import’, ‘in’, ‘is’, ‘lambda’, ‘not’, ‘or’,
‘pass’, ‘print’, ‘raise’, ‘return’, ‘try’, ‘while’, ‘yield’]

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


Слайд 5
Текст слайда:

ИМЕНА

В каждой точке программы интерпретатор «видит» три пространства имен:
локальное,
глобальное
встроенное
Пространство имен — отображение из имен в объекты.

Локальные имена — имена, которым присвоено значение в данном блоке кода. Глобальные имена — имена, определяемые на уровне блока кода определения модуля или те, которые явно заданы в операторе global. Встроенные имена — имена из специального словаря __ builtins __.

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

Так как переменную можно связать с объектом в любом месте блока, важно, чтобы это произошло до ее использования, иначе будет возбуждено исключение NameError. Связывание имен со значениями происходит в операторах присваивания, from, import, в формальных аргументах функций, при определении функции или класса, во втором параметре части except оператора try-except.


Слайд 6
Текст слайда:

ЦЕЛЫЕ ЧИСЛА

обычное целое int
целое произвольной точности long
логический bool


Слайд 7
Текст слайда:

ЦЕЛЫЕ ЧИСЛА


Слайд 8
Текст слайда:

СИСТЕМЫ СЧИСЛЕНИЯ

• int([object], [основание системы счисления]) — преобразование к целому числу в деся-
тичной системе счисления. По умолчанию система счисления десятичная, но можно
задать любое основание от 2 до 36 включительно.
• bin(x) — преобразование целого числа в двоичную строку.
• hex(х) — преобразование целого числа в шестнадцатеричную строку.
• oct(х) — преобразование целого числа в восьмеричную строку


Слайд 9
Текст слайда:

СИСТЕМЫ СЧИСЛЕНИЯ


Слайд 10
Текст слайда:

ВЕЩЕСТВЕННЫЕ И КОМПЛЕКСНЫЕ ЧИСЛА

Тип complex
Литерал мнимой части задается добавлением j в качестве суффикса (перемножаются мнимые единицы):

>>> -1j * -1j
(-1-0j)
Тип реализован на базе вещественного. Кроме арифметических операций, можно использовать операции из модуля cmath.

Тип float

>>> pi = 3.1415926535897931
>>> pi ** 40
7.6912142205156999e+19
Кроме арифметических операций, можно использовать операции из модуля math.


Слайд 11
Текст слайда:

ПОСЛЕДОВАТЕЛЬНОСТИ

Последовательности бывают изменчивыми и неизменчивыми.


Слайд 12
Текст слайда:

ПОСЛЕДОВАТЕЛЬНОСТИ (СРЕЗЫ)

последовательность[нач:кон:шаг]

где нач — промежуток начала среза, кон — конца среза, шаг — шаг. По умолчанию нач=0, кон=len(последовательность), шаг=1, если шаг не указан, второе двоеточие можно опустить.


Слайд 13
Текст слайда:

СТРОКИ

S = ‘spam»s’
S = «spam’s»


Слайд 14
Текст слайда:

СТРОКИ (МЕТОД FORMAT)


Слайд 15
Текст слайда:

СПИСОК (LIST)

Создание списка с помощью генератора списков:


Слайд 16
Текст слайда:

МЕТОДЫ СПИСКОВ


Слайд 17
Текст слайда:

КОРТЕЖ (TUPLE)

Для представления константной последовательности (разнородных) объектов используется тип кортеж. Литерал кортежа обычно записывается в круглых скобках, но можно, если не возникают неоднозначности, писать и без них.
p = (1.2, 3.4, 0.9) # точка в трехмерном пространстве
for s in «one», «two», «three»: # цикл по значениям кортежа
print s
one_item = (1,)
empty = ()
p1 = 1, 3, 9 # без скобок
p2 = 3, 8, 5, # запятая в конце игнорируется
Использовать синтаксис кортежей можно и в левой части оператора присваивания. В этом случае на основе вычисленных справа значений формируется кортеж и связывается один в один с именами в левой части.
a, b = b, a


Слайд 18
Текст слайда:

СЛОВАРЬ (DICT)

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

d = {1: ‘one’, 2: ‘two’, 3: ‘three’, 4: ‘four’}
d0 = {0: ‘zero’}
print d[1] # берется значение по ключу
d0[0] = 0 # присваивается значение по ключу
del d0[0] # удаляется пара ключ-значение с данным ключом
print d
for key, val in d. items(): # цикл по всему словарю
print key, val
for key in d.keys(): # цикл по ключам словаря
print key, d[key]
for val in d.values(): # цикл по значениям словаря
print val
d.update(d0) # пополняется словарь из другого
print len(d) # количество пар в словаре


Слайд 19
Текст слайда:

СЛОВАРЬ (DICT)

Генератор словарей


Слайд 20

>> a = set()>>> aset()>>> a = set(‘hello’)>>> a{‘h’, ‘o’, ‘l’, ‘e’}>>> a = {‘a’, ‘b’, ‘c’, ‘d’}>>> a{‘b’, ‘c’, ‘a’, ‘d’}>>> a = {i ** 2 for i in range(10)} # генератор множеств>>> a{0, 1, 4, 81, 64, 9, 16, 49, 25, 36}>>> a = {} # А так нельзя!>>> type(a)»>

Текст слайда:

МНОЖЕСТВО (SET)

Множество в python — «контейнер», содержащий не повторяющиеся элементы в случайном порядке.

>>> a = set()
>>> a
set()
>>> a = set(‘hello’)
>>> a
{‘h’, ‘o’, ‘l’, ‘e’}
>>> a = {‘a’, ‘b’, ‘c’, ‘d’}
>>> a
{‘b’, ‘c’, ‘a’, ‘d’}
>>> a = {i ** 2 for i in range(10)} # генератор множеств
>>> a
{0, 1, 4, 81, 64, 9, 16, 49, 25, 36}
>>> a = {} # А так нельзя!
>>> type(a)


Слайд 21
Текст слайда:

МНОЖЕСТВО (SET)

>>> words = [‘hello’, ‘daddy’, ‘hello’, ‘mum’]
>>> set(words)
{‘hello’, ‘daddy’, ‘mum’}


Слайд 22
Текст слайда:

ФАЙЛЫ

Объекты этого типа предназначены для работы с внешними данными. В простом случае — это файл на диске. Файловые объекты должны поддерживать основные методы: read(), write(), readline(), readlines(), seek(), tell(), close() и т.п.

Следующий пример показывает копирование файла:

f1 = open(«file1.txt», «r»)
f2 = open(«file2.txt», «w»)
for line in f1.readlines():
f2.write(line)
f2.close()
f1.close()

Чаще используют библиотеку urllib


Слайд 23
Текст слайда:

УСЛОВИЯ


Слайд 24
Текст слайда:

УСЛОВИЯ


Слайд 25
Текст слайда:

УСЛОВИЯ


Слайд 26

5: print lf.close()»>

Текст слайда:

ЦИКЛ WHILE

f = open(«file.txt», «r»)
while f:
l = f.readline()
if not l:
break
if len(l) > 5:
print l
f.close()


Слайд 27
Текст слайда:

ЦИКЛ FOR

for i in range(1, 10):
for j in range(1, 10):
print(«%2i» % (i*j))


Слайд 28
Текст слайда:

ПРЕРЫВАНИЕ


Слайд 29
Текст слайда:

ПРЕРЫВАНИЕ


Слайд 30
Текст слайда:

СПАСИБО ЗА ВНИМАНИЕ !

ВОПРОСЫ???


Лекция 0 — Веб-программирование CS50 с помощью Python и JavaScript

  • Введение
  • Веб-программирование
  • HTML (язык гипертекстовой разметки)
    • Объектная модель документа (DOM)
    • Дополнительные элементы HTML
    • Формы
  • CSS (каскадные таблицы стилей)
  • Адаптивный дизайн
  • Начальная загрузка
  • Sass (синтаксически потрясающие таблицы стилей)

Введение

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

В этом курсе вам понадобится текстовый редактор, в котором вы сможете писать код локально на своем компьютере. Некоторые популярные включают Visual Studios Code, Sublime Text, Atom и Vim, но есть из чего выбирать!

Веб-программирование

Темы курса: Более подробно мы рассмотрим позже, но вот краткий обзор того, над чем мы будем работать в ходе этого курса:

  1. HTML и CSS (язык разметки, используемый для описания веб-страницы, и процедура, позволяющая сделать наши сайты более привлекательными)
  2. Git (используется для контроля версий и совместной работы)
  3. Python (широко используемый язык программирования, который мы будем использовать, чтобы сделать наши сайты более динамичными)
  4. Django (популярная веб-инфраструктура, которую мы будем использовать для серверной части наших сайтов)
  5. SQL, модели и миграции (язык, используемый для хранения и извлечения данных, и специфичные для Django методы, облегчающие взаимодействие с базами данных SQL)
  6. JavaScript (язык программирования, используемый для ускорения и интерактивности веб-сайтов)
  7. Пользовательские интерфейсы (методы, используемые для максимально простого использования веб-сайта)
  8. Тестирование, CI, CD (изучение различных методов, используемых для обеспечения бесперебойного обновления веб-страниц)
  9. Масштабируемость и безопасность (обеспечение одновременного доступа к нашим веб-сайтам многих пользователей и их защита от злонамеренных намерений)

HTML (язык гипертекстовой разметки)

  • HTML — это язык разметки, определяющий структуру веб-страницы. Он интерпретируется вашим веб-браузером (Safari, Google Chrome, Firefox и т. д.) для отображения контента на вашем экране.
  • Давайте начнем с создания простого HTML-файла!
 

    <голова>
        Здравствуйте!
    
    <тело>
        Привет, мир!
    

 
  • Когда мы открываем этот файл в нашем браузере, мы получаем:

  • Теперь давайте поговорим о файле, который мы только что написали, который кажется довольно сложным для такой простой страницы.
    • В первой строке мы объявляем (веб-браузеру), что пишем документ в последней версии HTML: HTML5.
    • После этого страница состоит из вложенных HTML-элементов (таких как html и body), каждый из которых имеет открывающий и закрывающий тег , отмеченный либо для открытия, либо для закрытие.
    • Обратите внимание, что каждый из внутренних элементов имеет отступ чуть дальше предыдущего. Хотя это не обязательно требуется для браузера, будет очень полезно сохранить это в вашем собственном коде.
    • HTML-элементы могут включать атрибутов , которые предоставляют браузеру дополнительную информацию об элементе. Например, когда мы включаем lang="en" в наш начальный тег, мы сообщаем браузеру, что используем английский язык в качестве основного.
    • Внутри HTML-элемента мы обычно хотим включить тег head и body . Элемент head будет содержать информацию о вашей странице, которая не обязательно отображается, а элемент body будет содержать то, что на самом деле видно пользователям, посещающим сайт.
    • В заголовок мы включили заголовок для нашей веб-страницы, который, как вы заметите, отображается на вкладке в верхней части нашего веб-браузера.
    • Наконец, мы добавили текст «Привет, мир!» в теле, которое является видимой частью нашей страницы.

Объектная модель документа (DOM)

  • DOM — это удобный способ визуализации того, как элементы HTML связаны друг с другом, используя древовидную структуру. Выше приведен пример макета DOM для страницы, которую мы только что написали.

Дополнительные элементы HTML

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

    <голова>
        HTML-элементы
    
    <тело>
        
         

Большой заголовок

Заголовок меньшего размера

Самый маленький заголовок
слово, выделенное жирным шрифтом и слово, выделенное курсивом! Посетите веб-сайт CS50! Ненумерованный список: <ул>
  • фу
  • бар
  • баз
  • Упорядоченный список: <ол>
  • фу
  • бар
  • баз
  • Изображение: Изображение резиновой уточки

    <таблица> Океан Средняя глубина Максимальная глубина <тело> Тихий океан 4280 м <тд>10911 м Атлантика 3646 м 8486 м

    Эта страница при отображении выглядит примерно так:

    • Если вас это беспокоит, знайте, что вам никогда не придется запоминать эти элементы. Очень легко просто ввести что-то вроде «изображение в HTML», чтобы найти img тег. Одним из ресурсов, который особенно полезен для изучения этих элементов, является W3 Schools.

    Формы

    • Еще один набор элементов, который действительно важен при создании веб-сайта, — это сбор информации от пользователей. Вы можете разрешить пользователям вводить информацию с помощью HTML-формы, которая может содержать несколько различных типов ввода. Позже в курсе мы узнаем, как обрабатывать информацию после отправки формы.
    • Как и в случае с другими элементами HTML, их не нужно запоминать, и W3 Schools — отличный ресурс для их изучения!
     
    
    <голова>
        Формы
    
    <тело>
        <форма>
            
            
            <дел>
                Любимый цвет:
                 Синий
                 Зеленый
                 Желтый
                 Красный
            
    <тип ввода="отправить">

    CSS (каскадные таблицы стилей)

    • CSS используется для настройки внешнего вида веб-сайта.
    • Пока мы только начинаем, мы можем добавить атрибут стиля к любому элементу HTML, чтобы применить к нему некоторый CSS.
    • Мы меняем стиль, изменяя свойства CSS элемента, написав что-то вроде color: blue или text-align: center
    • В приведенном ниже примере мы вносим небольшое изменение в наш самый первый файл, чтобы дать ему цветной заголовок:
     
    
        <голова>
            Здравствуйте!
        
        <тело>
             

    Красочный заголовок!

    Привет, мир!

    • Если мы стилизуем внешний элемент, все внутренние элементы автоматически приобретут этот стиль. Мы можем увидеть это, если переместим стиль, который мы только что применили, из тега заголовка в тег тела:
     
    
        <голова>
            Здравствуйте!
        
        <тело>
            

    Красочный заголовок!

    Привет, мир!

     
    
        <голова>
            Хороший стол
        
        <тело>
            <таблица>
                
                    Океан
                    Средняя глубина
                    Максимальная глубина
                
                <тело>
                    
                        Тихий океан
                        4280 м
                        <тд>10911 м
                    
                    
                        Атлантика
                        3646 м
                        8486 м
                    
                
            
        
    
     

    • Приведенное выше очень похоже на то, что было раньше, но теперь, либо включив тег стиля , либо ссылку на таблицу стилей в элементе head, мы добавим следующий css:
     стол {
        граница: 1px сплошной черный;
        граница коллапса: коллапс;
    }
    тд {
        граница: 1px сплошной черный;
        отступ: 2px;
    }
    й {
        граница: 1px сплошной черный;
        отступ: 2px;
    }
     

    Что оставляет нас с этой более красивой таблицей:

    • Возможно, вы уже подумали, что на данный момент в нашем CSS есть ненужные повторения, поскольку td и th имеют одинаковый стиль. Мы можем (и должны) сократить это до следующего кода, используя запятую, чтобы показать, что стиль должен применяться к более чем одному типу элемента.
     стол {
        граница: 1px сплошной черный;
        граница коллапса: коллапс;
    }
    тд, й {
        граница: 1px сплошной черный;
        отступ: 2px;
    }
     
    • Это хорошее введение в то, что известно как селекторы CSS. Есть много способов определить, какие элементы HTML вы стилизуете, некоторые из них мы упомянем здесь:
      • тип элемента : это то, что мы делали до сих пор: стилизация всех элементов одного типа.
      • id : Другой вариант — присвоить нашим элементам HTML такой идентификатор:

        Hello!

        , а затем применить стиль с помощью #first-header{...} с помощью хэштега, чтобы показать, что мы ищем по идентификатору. Важно отметить, что никакие два элемента не могут иметь одинаковый идентификатор, и ни один элемент не может иметь более одного идентификатора.
      • class : Это похоже на id, но класс может использоваться более чем одним элементом, а один элемент может иметь более одного класса. Мы добавляем классы к элементу HTML следующим образом:

        Hello!

        (обратите внимание, что мы только что добавили к элементу два класса: страница-текст и приглушенный ). Затем мы стилизуем на основе класса, используя точку вместо хэштега: .muted {...}
    • Теперь нам также нужно решить проблему потенциально конфликтующих CSS. Что происходит, когда заголовок должен быть красным в зависимости от его класса, но синим в зависимости от его идентификатора? CSS имеет следующий порядок специфичности:
      1. Стиль в линию
      2. идентификатор
      3. класс
      4. тип элемента
    • В дополнение к запятой для нескольких селекторов есть несколько других способов указать, какие элементы вы хотите стилизовать. Эта таблица из лекции содержит некоторые из них, и мы рассмотрим несколько примеров ниже:

    Селектор потомков : Здесь мы используем селектор потомков, чтобы применить стиль только к элементам списка, найденным в неупорядоченном списке:

     
    
        <голова>
            Использование селекторов
            <стиль>
                уль ли {
                    цвет синий;
                }
            
        
        <тело>
            <ол>
                
  • фу
  • полоса <ул>
  • привет
  • до свидания
  • привет
  • баз
  • Атрибуты как селекторы : Мы также можем сузить наш выбор на основе атрибутов, которые мы назначаем элементам HTML с помощью квадратных скобок. Например, в следующем списке ссылок мы делаем красной только ссылку на Amazon:

    .
     
    
        <голова>
            Использование селекторов
            <стиль>
                [href="https://www.amazon.com/"] {
                    красный цвет;
                }
            
        
        <тело>
            <ол>
                
  • Google
  • Амазон
  • Фейсбук
    • Мы можем использовать CSS не только для постоянного изменения внешнего вида элемента, но и для изменения его внешнего вида при определенных условиях. Например, что, если мы хотим, чтобы кнопка меняла цвет при наведении на нее курсора? Мы можем добиться этого с помощью псевдокласса CSS, который обеспечивает дополнительные стили в особых обстоятельствах. Мы пишем это, добавляя двоеточие после нашего селектора, а затем добавляя обстоятельство после этого двоеточия.
    • В случае с кнопкой мы бы добавили :hover к селектору кнопок, чтобы указать дизайн только при наведении:
     
    
        <голова>
            Псевдоклассы
            <стиль>
                кнопка {
                    цвет фона: красный;
                    ширина: 200 пикселей;
                    высота: 50 пикселей;
                    размер шрифта: 24px;
                }
                кнопка:наведите {
                    цвет фона: зеленый;
                }
            
        
        <тело>
            
            
            
        
    
     

    • Сегодня многие люди просматривают веб-сайты не на компьютерах, а на других устройствах, таких как смартфоны и планшеты. Важно убедиться, что ваш сайт читается людьми на всех устройствах.
    • Одним из способов достижения этого является знание области просмотра . Окно просмотра — это часть экрана, которая фактически видна пользователю в любой момент времени. По умолчанию многие веб-страницы предполагают, что область просмотра одинакова на любом устройстве, что приводит к тому, что многие сайты (особенно старые) трудно взаимодействовать на мобильных устройствах.
    • Одним из простых способов улучшить внешний вид сайта на мобильном устройстве является добавление следующей строки в заголовок наших HTML-файлов. Эта строка указывает мобильному устройству использовать окно просмотра той же ширины, что и у используемого вами устройства, а не намного больше.
     
     
    • Другой способ взаимодействия с различными устройствами — медиа-запросы. Медиа-запросы — это способы изменения стиля страницы в зависимости от того, как она просматривается.
    • В качестве примера медиа-запроса попробуем просто изменить цвет экрана, когда он сжимается до определенного размера. Мы сигнализируем медиа-запрос, набрав @media , а затем тип запроса в скобках:
    • .
     
    
        <голова>
            Размер экрана
            <стиль>
                @media (минимальная ширина: 600 пикселей) {
                    тело {
                        цвет фона: красный;
                    }
                }
                @media (максимальная ширина: 599px) {
                    тело {
                        цвет фона: синий;
                    }
                }
            
        
        <тело>
             

    Добро пожаловать на страницу!

    • Еще один способ справиться с разным размером экрана — использовать новый атрибут CSS, известный как flexbox. Это позволяет нам легко переносить элементы на следующую строку, если они не помещаются по горизонтали. Мы делаем это, помещая все наши элементы в div , который мы назовем нашим контейнером. Затем мы добавляем некоторые стили к этому div, указывая, что мы хотим использовать отображение flexbox для элементов внутри него. Мы также добавили некоторые дополнительные стили к внутренним элементам div, чтобы лучше проиллюстрировать происходящее здесь наложение.
     
    
        <голова>
            Размер экрана
            <стиль>
                #контейнер {
                    дисплей: гибкий;
                    flex-wrap: обернуть;
                }
                #контейнер > div {
                    цвет фона: зеленый;
                    размер шрифта: 20px;
                    поле: 20 пикселей;
                    отступ: 20 пикселей;
                    ширина: 200 пикселей;
                }
            
        
        <тело>
            <дел>
                
    Текст 1!
    Текст 2!
    Текст 3!
    Текст 4!
    Текст 5!
    Текст 6!
    Текст 7!
    Текст 8!
    Некоторый текст 9!
    Текст 10!
    Текст 11!
    Текст 12!