Лекции Технопарка. 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. Технология ActiveServerPages (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.
Клиентские сценарии VBScript. Помимо 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).
Разрабатывать компоненты программных комплексов и баз данных, использовать современные инструментальные средства и технологии программирования (ПК-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-программирования для школьного “сайтостроительства” ОстрОвский сергей Львович — главный редактор газеты “Информатика”, заместитель гендирек- тора Издательского дома “Первое сентября”, руководитель отдела программирования, учитель инфор- матики московской гимназии № 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-я лекция: в двадцать третьей серии цикла подводятся итоги курса, в игровой форме повторяются некоторые темы, идет непринужденное общение.
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)
Объекты этого типа предназначены для работы с внешними данными. В простом случае — это файл на диске. Файловые объекты должны поддерживать основные методы: 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, но есть из чего выбирать!
Веб-программирование
Темы курса: Более подробно мы рассмотрим позже, но вот краткий обзор того, над чем мы будем работать в ходе этого курса:
HTML и CSS (язык разметки, используемый для описания веб-страницы, и процедура, позволяющая сделать наши сайты более привлекательными)
Git (используется для контроля версий и совместной работы)
Python (широко используемый язык программирования, который мы будем использовать, чтобы сделать наши сайты более динамичными)
Django (популярная веб-инфраструктура, которую мы будем использовать для серверной части наших сайтов)
SQL, модели и миграции (язык, используемый для хранения и извлечения данных, и специфичные для Django методы, облегчающие взаимодействие с базами данных SQL)
JavaScript (язык программирования, используемый для ускорения и интерактивности веб-сайтов)
Пользовательские интерфейсы (методы, используемые для максимально простого использования веб-сайта)
Тестирование, CI, CD (изучение различных методов, используемых для обеспечения бесперебойного обновления веб-страниц)
Масштабируемость и безопасность (обеспечение одновременного доступа к нашим веб-сайтам многих пользователей и их защита от злонамеренных намерений)
HTML (язык гипертекстовой разметки)
HTML — это язык разметки, определяющий структуру веб-страницы. Он интерпретируется вашим веб-браузером (Safari, Google Chrome, Firefox и т. д.) для отображения контента на вашем экране.
Когда мы открываем этот файл в нашем браузере, мы получаем:
Теперь давайте поговорим о файле, который мы только что написали, который кажется довольно сложным для такой простой страницы.
В первой строке мы объявляем (веб-браузеру), что пишем документ в последней версии HTML: HTML5.
После этого страница состоит из вложенных HTML-элементов (таких как html и body), каждый из которых имеет открывающий и закрывающий тег , отмеченный либо для открытия, либо для закрытие.
Обратите внимание, что каждый из внутренних элементов имеет отступ чуть дальше предыдущего. Хотя это не обязательно требуется для браузера, будет очень полезно сохранить это в вашем собственном коде.
HTML-элементы могут включать атрибутов , которые предоставляют браузеру дополнительную информацию об элементе. Например, когда мы включаем lang="en" в наш начальный тег, мы сообщаем браузеру, что используем английский язык в качестве основного.
Внутри HTML-элемента мы обычно хотим включить тег head и body . Элемент head будет содержать информацию о вашей странице, которая не обязательно отображается, а элемент body будет содержать то, что на самом деле видно пользователям, посещающим сайт.
В заголовок мы включили заголовок для нашей веб-страницы, который, как вы заметите, отображается на вкладке в верхней части нашего веб-браузера.
Наконец, мы добавили текст «Привет, мир!» в теле, которое является видимой частью нашей страницы.
Объектная модель документа (DOM)
DOM — это удобный способ визуализации того, как элементы HTML связаны друг с другом, используя древовидную структуру. Выше приведен пример макета DOM для страницы, которую мы только что написали.
Дополнительные элементы HTML
Существует множество элементов HTML, которые вы можете использовать для настройки своей страницы, включая заголовки, списки и разделы, выделенные полужирным шрифтом. В следующем примере мы увидим некоторые из них в действии.
Еще одно замечание: дает нам комментарий в HTML, поэтому мы будем использовать его ниже для объяснения некоторых элементов.
Эта страница при отображении выглядит примерно так:
Если вас это беспокоит, знайте, что вам никогда не придется запоминать эти элементы. Очень легко просто ввести что-то вроде «изображение в HTML», чтобы найти img тег. Одним из ресурсов, который особенно полезен для изучения этих элементов, является W3 Schools.
Формы
Еще один набор элементов, который действительно важен при создании веб-сайта, — это сбор информации от пользователей. Вы можете разрешить пользователям вводить информацию с помощью HTML-формы, которая может содержать несколько различных типов ввода. Позже в курсе мы узнаем, как обрабатывать информацию после отправки формы.
Как и в случае с другими элементами HTML, их не нужно запоминать, и W3 Schools — отличный ресурс для их изучения!
<голова>
Формы
голова>
<тело>
<форма>
<дел>
Любимый цвет:
Синий
Зеленый
Желтый
Красный
<тип ввода="отправить">
форма>
тело>
CSS (каскадные таблицы стилей)
CSS используется для настройки внешнего вида веб-сайта.
Пока мы только начинаем, мы можем добавить атрибут стиля к любому элементу HTML, чтобы применить к нему некоторый CSS.
Мы меняем стиль, изменяя свойства CSS элемента, написав что-то вроде color: blue или text-align: center
В приведенном ниже примере мы вносим небольшое изменение в наш самый первый файл, чтобы дать ему цветной заголовок:
<голова>
Здравствуйте!
голова>
<тело>
Красочный заголовок!
Привет, мир!
тело>
Если мы стилизуем внешний элемент, все внутренние элементы автоматически приобретут этот стиль. Мы можем увидеть это, если переместим стиль, который мы только что применили, из тега заголовка в тег тела:
<голова>
Здравствуйте!
голова>
<тело>
Красочный заголовок!
Привет, мир!
тело>
<голова>
Хороший стол
голова>
<тело>
<таблица>
Океан
Средняя глубина
Максимальная глубина
<тело>
Тихий океан
4280 м
<тд>10911 м
Атлантика
3646 м
8486 м
таблица>
тело>
Приведенное выше очень похоже на то, что было раньше, но теперь, либо включив тег стиля , либо ссылку на таблицу стилей в элементе head, мы добавим следующий css:
Возможно, вы уже подумали, что на данный момент в нашем CSS есть ненужные повторения, поскольку td и th имеют одинаковый стиль. Мы можем (и должны) сократить это до следующего кода, используя запятую, чтобы показать, что стиль должен применяться к более чем одному типу элемента.
стол {
граница: 1px сплошной черный;
граница коллапса: коллапс;
}
тд, й {
граница: 1px сплошной черный;
отступ: 2px;
}
Это хорошее введение в то, что известно как селекторы CSS. Есть много способов определить, какие элементы HTML вы стилизуете, некоторые из них мы упомянем здесь:
тип элемента : это то, что мы делали до сих пор: стилизация всех элементов одного типа.
id : Другой вариант — присвоить нашим элементам HTML такой идентификатор:
Hello!
, а затем применить стиль с помощью #first-header{...} с помощью хэштега, чтобы показать, что мы ищем по идентификатору. Важно отметить, что никакие два элемента не могут иметь одинаковый идентификатор, и ни один элемент не может иметь более одного идентификатора.
class : Это похоже на id, но класс может использоваться более чем одним элементом, а один элемент может иметь более одного класса. Мы добавляем классы к элементу HTML следующим образом:
Hello!
(обратите внимание, что мы только что добавили к элементу два класса: страница-текст и приглушенный ). Затем мы стилизуем на основе класса, используя точку вместо хэштега: .muted {...}
Теперь нам также нужно решить проблему потенциально конфликтующих CSS. Что происходит, когда заголовок должен быть красным в зависимости от его класса, но синим в зависимости от его идентификатора? CSS имеет следующий порядок специфичности:
Стиль в линию
идентификатор
класс
тип элемента
В дополнение к запятой для нескольких селекторов есть несколько других способов указать, какие элементы вы хотите стилизовать. Эта таблица из лекции содержит некоторые из них, и мы рассмотрим несколько примеров ниже:
Селектор потомков : Здесь мы используем селектор потомков, чтобы применить стиль только к элементам списка, найденным в неупорядоченном списке:
<голова>
Использование селекторов
<стиль>
уль ли {
цвет синий;
}
стиль>
голова>
<тело>
<ол>
фу
полоса
<ул>
привет
до свидания
привет
баз
тело>
Атрибуты как селекторы : Мы также можем сузить наш выбор на основе атрибутов, которые мы назначаем элементам HTML с помощью квадратных скобок. Например, в следующем списке ссылок мы делаем красной только ссылку на Amazon:
.
<голова>
Использование селекторов
<стиль>
[href="https://www.amazon.com/"] {
красный цвет;
}
стиль>
голова>
<тело>
<ол>
Мы можем использовать 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!
тело>
Другим популярным способом оформления страницы является использование сетки HTML. В этой сетке мы можем указать атрибуты стиля, такие как ширина столбцов и промежутки между столбцами и строками, как показано ниже. Обратите внимание, что когда мы указываем ширину столбца, мы говорим, что третий равен 9.0102 auto , что означает, что он должен заполнить остальную часть страницы.
Оказывается, существует множество библиотек, уже написанных другими людьми, которые могут еще больше упростить оформление веб-страницы. Одна популярная библиотека, которую мы будем использовать на протяжении всего курса, называется bootstrap.
Мы можем включить начальную загрузку в наш код, добавив одну строку в заголовок нашего HTML-файла:
Далее мы можем взглянуть на некоторые функции начальной загрузки, перейдя в раздел документации на их веб-сайте. На этой странице вы найдете множество примеров классов, которые вы можете добавить к элементам, что позволит использовать для них стили с помощью начальной загрузки.
Одной из популярных функций начальной загрузки является система сетки. Bootstrap автоматически разбивает страницу на 12 столбцов, и мы можем решить, сколько столбцов занимает элемент, добавив класс col-x , где x — число от 1 до 12. Например, на следующей странице мы иметь строку столбцов одинаковой ширины, а затем строку, в которой центральный столбец больше:
<голова>
Моя веб-страница!
<стиль>
.строка > раздел {
отступ: 20 пикселей;
цвет фона: бирюзовый;
граница: 2px сплошной черный;
}
стиль>
голова>
<тело>
<дел>
<дел>
<дел>
Это раздел.
<дел>
Это другой раздел.
<дел>
Это третий раздел.
<дел>
<дел>
<дел>
Это раздел.
<дел>
Это другой раздел.
<дел>
Это третий раздел.
тело>
Чтобы улучшить адаптацию к мобильным устройствам, начальная загрузка также позволяет нам указывать размеры столбцов, которые различаются в зависимости от размера экрана. В следующем примере мы используем col-lg-3 , чтобы показать, что элемент должен занимать 3 столбца на большом экране, и col-sm-6 , чтобы показать, что элемент должен занимать 6 столбцов, когда экран маленький:
<голова>
Моя веб-страница!
<стиль>
. строка > раздел {
отступ: 20 пикселей;
цвет фона: бирюзовый;
граница: 2px сплошной черный;
}
стиль>
голова>
<тело>
<дел>
<дел>
<дел>
Это раздел.
<дел>
Это другой раздел.
<дел>
Это третий раздел.
<дел>
Это четвертый раздел.
тело>
Sass (синтаксически потрясающие таблицы стилей)
На данный момент мы нашли несколько способов устранения избыточности в CSS, таких как перемещение его в отдельные файлы или использование начальной загрузки, но есть еще немало мест, где мы все еще можем внести улучшения. Например, что, если мы хотим, чтобы несколько элементов имели разные стили, но чтобы все они были одного цвета? Если позже мы решим, что хотим изменить цвет, нам придется изменить его в нескольких разных элементах.
Sass — это язык, который позволяет нам писать CSS более эффективно несколькими способами, один из которых позволяет нам иметь переменные, как в следующем примере.
При записи в Sass мы создаем новый файл с расширением filename.scss . В этом файле мы можем создать новую переменную, добавив $ перед именем, затем двоеточием, затем значением. Например, мы напишем $color: red , чтобы установить для переменной color значение red. Затем мы получаем доступ к этой переменной, используя $цвет . Вот пример нашего файла variable.scss:
$цвет: красный;
ул {
размер шрифта: 14px;
цвет: $цвет;
}
пр {
размер шрифта: 18 пикселей;
цвет: $цвет;
}
Теперь, чтобы связать этот стиль с нашим файлом HTML, мы не можем просто связать файл .scss , потому что большинство веб-браузеров распознают только файлы .css . Чтобы решить эту проблему, мы должны загрузить на наши компьютеры программу под названием Sass. Затем в нашем терминале пишем sass variable.scss:variables.css Эта команда скомпилирует файл .scss с именем variable.scss в файл .css с именем variable.css , на который вы можете добавить ссылку на своей HTML-странице.
Чтобы ускорить этот процесс, мы можем использовать команду sass --watch variable.scss:variables.css , которая автоматически изменяет файл .css каждый раз, когда в файле .scss обнаруживается изменение.
При использовании Sass мы также можем физически вкладывать наши стили, а не использовать селекторы CSS, о которых мы говорили ранее. Например, если мы хотим применить некоторые стили только к абзацам и ненумерованным спискам внутри блока div, мы можем написать следующее:
раздел {
размер шрифта: 18 пикселей;
п {
цвет синий;
}
ул {
цвет: зеленый;
}
}
После компиляции в CSS мы получим файл, который выглядит так:
раздел {
размер шрифта: 18 пикселей;
}
делитель р {
цвет синий;
}
дел ул {
цвет: зеленый;
}
Еще одна функция, которую дает нам Sass, называется наследованием. Это позволяет нам создать базовый набор стилей, который может использоваться несколькими различными элементами. Мы делаем это, добавляя % перед именем класса, добавив некоторые стили, а затем добавив строку @extend %classname в начало некоторых стилей. Например, следующий код применяет стиль в классе message к каждому из различных классов ниже, в результате чего веб-страница выглядит так, как показано ниже.
%сообщение {
семейство шрифтов: без засечек;
размер шрифта: 18 пикселей;
вес шрифта: полужирный;
граница: 1px сплошной черный;
отступ: 20 пикселей;
поле: 20 пикселей;
}
.успех {
@продлить %сообщение;
цвет фона: зеленый;
}
.предупреждение {
@продлить %сообщение;
цвет фона: оранжевый;
}
.ошибка {
@продлить %сообщение;
цвет фона: красный;
}
На этом мы заканчиваем наш сегодняшний контент!
CS193X: основы веб-программирования
Основы веб-программирования
Эта страница будет содержать слайды, примечания и пример кода, относящийся к лекции.
Предварительное расписание курсов: см. дорожную карту на квартал.
Инструкции по установке NodeJS: следуйте этим инструкциям, чтобы установить NodeJS на свой компьютер.
Инструкции по установке MongoDB: следуйте этим инструкциям, чтобы установить MongoDb на свой компьютер.
5 июня: ЗАКЛЮЧИТЕЛЬНАЯ ЛЕКЦИЯ: Что дальше?
Слайды: Слайды Google/lection27.pdf
Важные идеи, которые мы не рассмотрели
Модуль в комплекте с браузером
Поддержка старых браузеров с помощью babeljs
Тестирование
Доступность
Библиотеки и фреймворки
Разглагольствования и общие советы
Не используйте jQuery: предпочитайте babeljs
Не используйте Bootstrap: изучите CSS
Выберите фреймворк внешнего интерфейса и создайте что-нибудь на его основе
В среду лекции не будет: Работайте над финальным проектом!
2 июня: ПО промежуточного слоя; моделирование данных; Аутентификация
Слайды: Слайды Google/lection26. pdf
Промежуточное ПО и маршруты
Одностраничное веб-приложение
Больше примеров MongoDB
Аутентификация
Код
Модули и маршруты
Примеры вышивки крестом
31 мая: Шаблоны, модули и маршрутизаторы
Слайды: Google Slides / Lection25.pdf
Архитектура веб-приложений
Многостраничные веб-приложения (рендеринг на стороне сервера)
Шаблоны с ручками
Модули NodeJS
Экспресс-маршрутизатор
Код
Репозиторий примеров MongoDB
Модули и маршруты
29 мая: НЕТ ЛЕКЦИИ
26 мая: MongoDB и NodeJS
Слайды: Google слайды / лекция24. pdf
MongoDB и NodeJS
вставка, поиск, удаление, обновление, вставка
Идентификатор объекта
Архитектура веб-приложений
Многостраничные веб-приложения (рендеринг на стороне сервера)
Одностраничные веб-приложения
Код
Репозиторий примеров MongoDB
Финальный проект ФИНАЛЬНЫЙ ПРОЕКТ НАЗНАЧЕН
24 мая: MongoDB
Слайды: Слайды Google/lection23.pdf
МонгоБД
монго / монгод
CRUD-операции
MongoDB и NodeJS
Код
Репозиторий примеров MongoDB
Установка MongoDB
Инструкции. Следуйте этим инструкциям, чтобы установить MongoDB на свой компьютер. Это будет необходимо для запуска примеров лекций.
22 мая: Сохранение данных; Введение в MongoDB
Слайды: Слайды Google/lection22.pdf
Сохранение данных
Корпус стойки
анализатор тела
Сохранение в файл
MongoDB: сохранение в базу данных
Код
Репозиторий примеров MongoDB
Лекция 21 репозиторий GitHub
Лекция 20 репозиторий GitHub
19 мая:
асинхронный / ожидающий ; более экспресс; подробнее fetch()
Слайды: Google слайды / лекция21.pdf
асинхронный/ждущий
Отправка данных на сервер
Возврат JSON из Express
Код
Лекция 21 репозиторий GitHub
Лекция 20 GitHub, репозиторий
Домашнее задание 5 HW5 назначено
17 мая: Морской экспресс;
fetch() и localhost
Слайды: слайды Google/lection20. pdf
н/мин
Экспресс
fetch() на локальный хост
Код
Лекция 19 репозиторий GitHub
Лекция 20 репозиторий GitHub
15 мая: Серверы, NodeJS и Express
Слайды: Слайды Google/lection19.pdf
Серверы в целом
NodeJS
н/мин
Экспресс
fetch() на локальный хост
Код
Лекция 19 репозиторий GitHub
Установка узла
Инструкции. Следуйте этим инструкциям, чтобы установить NodeJS на свой компьютер. Это будет необходимо для запуска примеров лекций, завершения HW5 и завершения окончательного проекта. (Спасибо нашему ассистенту Заку Мауреру за написание этих замечательных инструкций!)
12 мая: больше выборки; Цикл событий JavaScript
Слайды: Слайды Google/lection18. pdf
Больше API выборки:
Запрос сторонних API REST
Отправка форм
КОРС
Асинхронность в JavaScript
Цикл событий JavaScript
Код
Получить из Spotify / demo
Синтаксис JS элементов формы: select, textarea, checkbox
10 мая: Fetch API и JSON; Сторонние API
Слайды: Слайды Google/lection17.pdf
Fetch API и JSON
Принести в классе
REST API
Методы HTTP: ПОЛУЧИТЬ
Параметры запроса
Код
GitHub repo/live: Несколько примеров Fetch API
Выборка из класса/демо
Получить из Spotify/демо
Синтаксис JS элементов формы: select, textarea, checkbox
8 мая: Fetch API, Promises
Слайды: Слайды Google/lection16. pdf
Финишный функциональный JS
Карри
Анонимные функции
Затворы
Получить API
выборка()
Обещания и .then()
JSON
5 мая: Обратные звонки; Функциональный JavaScript
Слайды: Слайды Google/lection15.pdf
Обратные вызовы
Функциональный JavaScript
Затворы
Код
Пример кнопки: связь между двумя классами (кнопка — Меню ) с обратными вызовами
3 мая: Пользовательские события,
this и bind ; первоклассные функции
Слайды: Слайды Google/lection14. pdf
Пример пользовательских событий
это ключевое слово / bind()
Первоклассные функции
Обратные вызовы
Код
Пример кнопки: связь между двумя классами (кнопка — Меню ) с пользовательскими событиями
это загадка 1: Посмотрите, как это меняется в разных контекстах
это загадка 2: Посмотрите, как это меняется в разных контекстах
Настоящий пример: общение между двумя классами ( Подать заявку на Приложение ) через обратные вызовы
1 мая: больше классов ES6;
это и связывают
Слайды: Google слайды/lection13.pdf
Другие классы ES6
это ключевое слово / bind()
Общение между классами
Пользовательские события
Архитектура приложения JavaScript
28 апреля: анимация CSS; Классы ES6
Слайды: Слайды Google/lection12. pdf
События клавиатуры
События указателя
Анимации
Введение в классы ES6
Код: (подробнее см. в презентациях)
Прогулка дракона: пример Codepen перетаскивания дракона вдоль оси x
2D прогулка дракона
OO присутствует с bind/live: объектно-ориентированный пример настоящего
OO фотоальбом / live: Пример объектно-ориентированного фотоальбома
26 апреля: события клавиатуры, мыши и касания
Слайды: слайды Google/lection11.pdf
События клавиатуры
События указателя
Анимации
Код:
key-events.html: распечатывает события клавиатуры в веб-консоли.
photos-start.html: Стартовый код для нашего примера фотографий.
photos-desktop-finished. html: Пример готового фотоальбома с навигацией с помощью клавиатуры
photos-mobile-finished.html: пример готового фотоальбома с навигацией по свайпу влево/вправо
24 апреля: Дополнительные события JavaScript
Слайды: Google слайды/lection10.pdf
Распространение событий: всплытие и захват
Завершить тематическое исследование
данные-* атрибуты
Шалости и взломы
Код:
display-toggle.html: Переключение отображения. Показывает, как щелчок по внутреннему элементу запускает событие щелчка по внешнему элементу.
bubbling.html: Пример всплывающей подсказки события. Смотрите слайды для большего количества вариантов.
empty-extension.zip: Пустое расширение, которое ничего не делает, кроме вывода сообщения журнала
quora-extension. zip: расширение, которое удаляет экран входа в систему Quora
adblock-block-block.zip: Расширение, которое разблокирует Adblock на OnDemandKorea
21 апреля: больше DOM; тематическое исследование
Слайды: Google слайды / лекция09.pdf
Добавление и удаление элементов из DOM
Пример
: крестики-нолики
Обход DOM
Код:
dom-walk-script.js/html: рекурсивно выводит каждый элемент DOM HTML-страницы.
tictactoe.js/html/css: Простая игра в крестики-нолики
19 апреля: DOM и события
Слайды: Google слайды / лекция08.pdf
Завершить обзор языковых функций
DOM: объектная модель документа
Базовая обработка событий
17 апреля: Введение в JavaScript
Слайды: Слайды Google/lection07. pdf
Что такое JavaScript?
Знакомство с языковыми особенностями
Код:
first-js.html/script.js: кнопка с простым обработчиком событий.
14 апреля:
позиция ; Мобильный Интернет
Слайды: Слайды Google/lection06.pdf
позиция
Полезное background-image свойства
Мобильный CSS
Пропущено, но полезно: em и rem
Код:
mobile.html / css: наш первый пример мобильного веба.
Squarespace-mobile.html / css: мобильная версия нашего макета Squarespace.
12 апреля: Больше flexbox и макета
Слайдов: Google слайды / лекция05.pdf
Больше flexbox: сжатие и увеличение
высота / ширина процент причуды: vh / vw и размер коробки
Блочная и встроенная направляющая: просмотрите при необходимости
Код:
Squarespace. html/css: грубая копия шаблона Bedford Squarespace. Обязательно проверяйте элементы и просмотрите исходный код, чтобы увидеть, как это работает!
10 апреля: Flexbox
Слайды: Слайды Google/lection04.pdf
Коробка для отделки, модель
Отладка с помощью Chrome Inspector
Практический пример: макет Squarespace
дисплей: гибкий;
Шрифты Google
Фоновые изображения
Домашнее задание 1 HW1 назначено
7 апреля: Больше CSS; Блочная модель CSS
Слайды: Слайды Google/lection03.pdf
История HTML и стандартный HTML
Комбинирующие селекторы; каскадный; наследство
Коробчатая модель
HW0 DUE HW0 к оплате в 23:59
5 апреля: блочный или встроенный; классы и идентификаторы
Слайды: Слайды Google/lection02. pdf
Блочный или встроенный
раздел и интервал
класс es и id s
Блок против встроенной направляющей
Код: Веб-страница курса
3 апреля: Обзор курса и основы HTML/CSS
Слайды: Google слайды / лекция01.pdf
Учебный план и информация о курсе
Основы HTML и CSS: синтаксис; селектор элементов
Домашнее задание 0 HW0 назначено
10 лучших курсов веб-разработки в 2022 году — Class Central
В этой статье я познакомлю вас со списком лучших курсов веб-разработки, доступных в Интернете. Создание этого рейтинга потребовало значительных исследований, поэтому я объединил усилия с другом разработчиком, чтобы создать его. Мы следовали четко определенной методологии, которую вы можете найти ниже.
Но если вы хотите сразу перейти к результатам, вот наши 10 лучших вариантов. Вы можете нажать на курс, чтобы перейти к соответствующему разделу:
Курс
Рабочая нагрузка
Коротко
1. Веб-программирование CS50 с помощью Python и JavaScript (Гарвард)
25 часов
Богатый, подробный, хорошо построенный и средний уровень с бесплатным сертификатом
2. HTML, CSS и Javascript для веб-разработчиков (Джонс Хопкинс)
40 часов
Отлично подходит для понимания концепций, а также для их применения в реальной жизни
3. Введение в HTML5 (Мичиган)
13 часов
Отлично подходит для создания прочной основы в HTML
4. Адаптивный веб-дизайн (freeCodeCamp)
300 часов
Немедленное практическое программирование с бесплатным сертификатом
5. Введение в веб-разработку (Калифорнийский университет в Дэвисе)
25 часов
Интенсивный курс для начинающих для изучения основ
6. Введение в веб-разработку с использованием HTML, CSS, JavaScript (IBM)
20 часов
Четкость и лаконичность с упором на разработку облачных приложений
7. Основы адаптивного веб-сайта: код с помощью HTML, CSS и JavaScript (Лондонский университет)
25 часов
Основные понятия и практика кодирования аккуратно уложены в один курс
8. Полная веб-разработка с помощью React (HKUST)
36 часов
Подробный курс с идеальным балансом теории и практики
9. Основы программирования с помощью JavaScript, HTML и CSS (Duke)
35 часов
Для тех, кто хочет сначала изучить основы компьютерного программирования
10. Основы HTML5 и CSS (W3C)
15–20 часов
Подходит для изучения ключевых понятий в соответствии с правильными веб-стандартами
Что такое веб-разработка?
Веб-разработка — это просто процесс создания веб-сайтов и размещения их в сети. Веб-сайты могут варьироваться от отдельных статических страниц с простым текстом до сложных интерактивных веб-приложений. Веб-разработка требует базового понимания HTML, CSS и JavaScript — трех технологий, лежащих в основе Интернета.
Веб-разработка является быстрорастущей отраслью. Бюро статистики труда США прогнозирует, что с 2020 по 2030 год число рабочих мест в сфере веб-разработки увеличится на 13 процентов, что будет быстрее, чем средний темп роста для всех профессий.
Согласно отчету о будущем рабочих мест, опубликованному Всемирным экономическим форумом, веб-разработка входит в десятку лучших специализированных, но универсальных навыков, и ожидается, что она останется таковой как минимум до 2025 года.
Методика ранжирования курсов
Для создания этого рейтинга мы использовали трехэтапный процесс:
Первый , так как я являюсь автором контента в Class Central, ведущей поисковой системе для онлайн-курсов, я начал с используя наш каталог 100 000 курсов.
Вместе с моим другом-разработчиком Маноэлем я просмотрела нашу базу данных, чтобы составить предварительный список курсов. Я принял во внимание такие факторы, как обзоры, рейтинги, регистрации, закладки и многое другое.
Вкратце: я сузил варианты, взглянув на четко определенные показатели.
Второй , Я использовал свой опыт онлайн-обучения, чтобы оценить каждый предварительный выбор.
Такие показатели, как рейтинги курсов, редко дают полную картину. Я являюсь инструктором управляемых проектов в Coursera и прошла более 50 онлайн-курсов по различным предметам. Мой опыт в качестве онлайн-ученика и преподавателя дал мне некоторое представление о том, что искать в онлайн-курсе. Я использовал свой опыт для оценки каждого предварительного выбора.
Вкратце: я просмотрел свои выборы, чтобы прийти к почти окончательному выбору.
Третий , я расширил этот выбор, включив в него другие ценные ресурсы, с которыми я столкнулся.
Поскольку по большинству тем существуют давно зарекомендовавшие себя курсы, более свежие курсы по той же теме могут остаться незамеченными. Но иногда более свежие курсы улучшают хорошо зарекомендовавшие себя. Поэтому я постарался включить их, когда это было возможно.
Вкратце: я выбрал отличные, но менее известные курсы.
Конечным результатом стал уникальный набор курсов, который сочетает в себе десятилетние данные Class Central и мой собственный опыт онлайн-обучения, чтобы попытаться получить лучшее из обоих миров. На данный момент я потратил более 12 часов на создание этого списка, и я продолжу его обновлять.
Статистика рейтинга курсов
Вот некоторые статистические данные относительно рейтинга этого курса:
В совокупности на эти курсы зачислено более 4 миллионов человек.
Все десять курсов являются бесплатными или бесплатными для аудита.
Наиболее представленным в рейтинге провайдером курсов является Coursera с семью курсами.
В совокупности эти курсы были добавлены в закладки на Class Central более 61 970 раз, в то время как сама тема веб-разработки была добавлена в закладки более 203 200 раз.
Самый популярный курс в рейтинге сам по себе имеет более 1 миллиона зачисленных.
Итак, без лишних слов, давайте перейдем к моему выбору лучших онлайн-курсов по веб-разработке.
Брайан Ю, инструктор курса
Мой первый выбор в качестве лучшего онлайн-курса по веб-разработке — CS50 «Веб-программирование с использованием Python и JavaScript », предлагаемый Гарвардским университетом на edX.
Этот курс является продолжением легендарного гарвардского курса CS50 «Введение в информатику», одного из самых популярных МООК всех времен. И самое замечательное в этом курсе то, что вы можете пройти его бесплатно через Harvard OCW — он даже включает бесплатный сертификат об окончании!
Развивая наследие CS50, этот курс преподает Брайан Ю, который раньше был главой CS50, и который так же талантлив, как преподаватель, как профессор Малан, инструктор курса CS50.
В этом курсе вы погрузитесь в проектирование и создание веб-приложений с помощью Python, JavaScript и SQL с использованием таких фреймворков, как Django, React и Bootstrap.
Вы разовьете свои навыки веб-разработки, работая над несколькими проектами на протяжении всего курса, включая открытый финальный проект, где у вас будет возможность создать собственный веб-сайт!
Чему вы научитесь
Вы начнете с более подробного изучения HTML (языка гипертекстовой разметки) и CSS (каскадных таблиц стилей) — языков, используемых для создания веб-сайтов и улучшения их внешнего вида. Затем вы познакомитесь с Git, инструментом, очень часто используемым в веб-разработке для создания моментальных снимков вашего кода (и предотвращения его потери в случае сбоя системы!).
После этого вы углубитесь в Python, популярный язык программирования, используемый, среди прочего, для создания веб-приложений, и изучите его более продвинутые функции. В первую очередь вы сосредоточитесь на его использовании для создания динамических веб-приложений с использованием веб-фреймворка, известного как Django.
Вы узнаете о способности Django обрабатывать данные. Работая с SQL, моделями и миграциями, вы создадите интерактивные веб-приложения, использующие базу данных.
Вы перейдете к JavaScript, языку, используемому наряду с HTML и CSS для создания динамических и интерактивных веб-страниц.
Затем вы узнаете, как протестировать его, чтобы он работал правильно и в соответствии с отраслевыми стандартами. Вы затронете непрерывную интеграцию и непрерывную доставку, также известную как CI/CD, чтобы вы могли быстро обновлять свой код при внесении каких-либо изменений.
И, наконец, вы закончите курс концепциями масштабируемости и безопасности. Это важные соображения, когда вы хотите разместить его в Интернете для всех.
В довершение ко всему, у вас также будет возможность применить полученные знания на практике, создав собственные веб-приложения!
Как вы будете учиться
Курс разбит на 9 лекций. Продолжительность лекций от 1 до 2 часов. Концепции преподаются с помощью комбинации видео и чтения. Поскольку некоторые лекции могут быть длинными и утомительными, я предлагаю смотреть их по частям и учиться в своем собственном темпе.
Лекции состоят как из кратких теоретических объяснений, так и из множества интерактивных примеров программирования. Материалы для чтения включают заметки, слайды и исходный код.
Нравится Как Дэвид Малан, Брайан Ю — действительно талантливый инструктор, который дает четкие объяснения, хорошо подкрепленные визуальными эффектами. Курс имеет потрясающую производственную ценность: мы далеки от размытых презентаций некоторых ранних и не очень хороших онлайн-курсов.
Что касается оценок, то всего 6 проектов, включая проект в конце курса.
Финал — отличная возможность для вас обдумать все, что вы узнали — от HTML до интеграции базы данных в ваше веб-приложение — и создать собственный динамичный веб-сайт! Помимо нескольких ограничений, вы можете свободно выбирать внешний вид своего веб-сайта.
Обратите внимание, что для отправки проектов вам потребуется учетная запись GitHub. Итак, в этом курсе вы узнаете о Git и GitHub и будете использовать их на практике!
Учреждение
Гарвардский университет
Провайдер
edX
Инструктор
Брайан Ю, Дэвид Дж. Малан
Уровень
Промежуточный уровень
Рабочая нагрузка
25 часов
Регистрация
1М
Сертификат
Бесплатные и платные
Интересные факты
Если вы проходите курс в Гарвардском университете, он включает бесплатный сертификат .
CS50 запущен как отдельный курс; теперь он расширился до линейки из 10 курсов.
Помимо этого курса, Брайан Ю также преподает курс искусственного интеллекта CS50.
CS50 Web — один из немногих избранных курсов на edX, на который зарегистрировалось более 1 миллиона человек.
Этот курс был добавлен в закладки почти 6 тысяч раз на Class Central!
Если вы заинтересованы в этом курсе, вы можете найти дополнительную информацию о курсе и о том, как записаться здесь.
Яаков Чайкин, преподаватель курса
Мой второй выбор среди лучших онлайн-курсов по веб-разработке — HTML, CSS и Javascript для веб-разработчиков , предлагаемый Университетом Джонса Хопкинса на Coursera.
Уникальность этого курса заключается в том, что речь идет не только об изучении основ веб-разработки; речь идет о применении ваших знаний на практике в контексте реальных приложений. Вы сможете понять «почему» за всем, что вы узнаете.
Таким образом, даже если вы уже знакомы с веб-разработкой, у вас все равно будет возможность узнать что-то новое, контекстуализируя свои знания.
К концу курса вы сможете самостоятельно создать настоящий веб-сайт, который будет работать на всех устройствах.
Чему вы научитесь
Вы начнете с нуля, изучив, как использовать HTML, CSS и Bootstrap (наиболее широко используемую среду CSS на сегодняшний день) для создания современных веб-страниц.
Затем вы научитесь кодировать свою веб-страницу, чтобы все автоматически перестраивалось и изменялось в размерах в соответствии с размером экрана пользователя, будь то смартфон или настольный компьютер. Вы сделаете свой дизайн «отзывчивым» — это необходимо в наше время, так как многие интернет-пользователи пользуются телефонами.
Наконец, вы закончите курс изучения самого популярного языка в Интернете: JavaScript. Используя Javascript, вы создадите полнофункциональное веб-приложение, использующее Ajax.
Ajax позволяет обновлять только части веб-страницы. Например, когда вы просматриваете веб-сайт, панель навигации остается прежней; меняется только основное содержание. Ajax перезагружает только основной контент, тем самым экономя пропускную способность и делая веб-страницу более быстрой!
Иными словами, Ajax используется для получения данных с сервера и последующего динамического обновления содержимого без перезагрузки всей страницы. Эффективный!
Как вы будете учиться
Этот курс разбит на 5 недель. Каждая неделя предполагает от 2 до 3 часов работы. Курс преподается с помощью сочетания коротких видеороликов и нескольких чтений.
Теория и примеры программирования хорошо сбалансированы и сосредоточены на реальных приложениях.
Что касается оценивания, то каждую неделю проводится множество практических упражнений. В первую неделю проводится финальный тест с оценкой, а в остальные недели — по одному заданию, оцениваемому сверстниками.
Чем хорош этот курс, так это тем, что Яаков Чайкин на самом деле возьмет вас на экскурсию в местную компанию в Балтиморе (практически, конечно!), у которой нет хорошего веб-сайта, и вы создадите настоящий веб-сайт для что бизнес с нуля!
Обратите внимание, что для отправки проектов вам потребуется учетная запись GitHub. Это верно для многих курсов Джонса Хопкинса по информатике, и в любом случае GitHub — очень популярный инструмент в веб-разработке, поэтому стоит создать бесплатную учетную запись.
Учреждение
Университет Джона Хопкинса
Провайдер
Курсера
Инструктор
Яаков Чайкин
Уровень
Смешанный
Рабочая нагрузка
40 часов
Регистрация
682К
Рейтинг
4,7 / 5,0 (13 тыс. )
Сертификат
Платный
Обратите внимание
Это старый курс, но его основы прочны, и это важнее всего. Он использует более старую версию Bootstrap (Bootstrap 3), но если вы понимаете версию 3, вы можете легко работать с версией 5. Принципы веб-разработки остаются в основном теми же.
Интересные факты
Этот курс является частью специализации Ruby on Rails, но вы можете пройти его самостоятельно. Так что вам не нужно беспокоиться об остальной части специализации, чтобы пройти этот курс!
Этот курс является одним из самых популярных онлайн-курсов Class Central за все время.
Оба курса Чайкина — «HTML, CSS и Javascript для веб-разработчиков» и «Одностраничные веб-приложения с AngularJS» — заняли первое место среди курсов с самым высоким рейтингом на Coursera еще в 2016 году9.0004
Яаков Чайкин является соавтором книги «Основные сервлеты и страницы Javaserver: передовые технологии».
Если вы заинтересованы в этом курсе, вы можете найти дополнительную информацию о курсе и о том, как записаться здесь.
Коллин ван Лент, преподаватель курса
Мой третий выбор лучшего онлайн-курса по веб-разработке — Introduction to HTML5 , предлагаемый Мичиганским университетом на Coursera.
Если вы ищете курс, который научит вас абсолютным основам HTML5 (и когда я говорю «абсолютные основы», я имею в виду именно это), то этот курс для вас!
В отличие от других курсов, которые осыпают вас жаргоном и запутанным кодом, этот курс проведет вас через каждую деталь, чтобы вы могли постепенно научиться писать синтаксически правильный код. Но даже если вы уже знакомы с HTML, вы, скорее всего, узнаете что-то новое в этом курсе.
Еще одно разумное дополнение, которое выделяет этот курс из толпы, заключается в том, что он делает упор на доступность: сделать вашу сеть доступной для всех. Это важная тема, которую слишком часто упускают из виду на курсах веб-разработки.
Имейте в виду, что после завершения этого курса вы уйдете не как полноправный разработчик, а как человек, который может понимать и писать код. Этот курс посвящен изучению правильного синтаксиса HTML5, а стиль не рассматривается. Но курс оставит вас в отличном месте, чтобы вы могли пройти более продвинутые курсы и расширить свои знания.
Чему вы научитесь
В течение первой недели вы поймете, как работают URL-адреса (адреса веб-страниц), когда вы вводите их в веб-браузере. Вы познакомитесь с инструментами, необходимыми для кодирования, такими как редакторы, браузеры и различные программные инструменты. Вы закончите неделю некоторыми концепциями HTML5 и эволюцией языков веб-дизайна. На 1-й неделе программирования почти нет.
Вторая неделя посвящена больше коду, чем теории. Вы поймете объектную модель документа (DOM), древовидную модель, на которой построены все веб-сайты, и научитесь использовать контекстные теги и заголовки в HTML. Вы также узнаете о ссылках, изображениях, списках, таблицах и мультимедиа, чтобы добавить видео или аудио на свою веб-страницу.
На третьей неделе вы научитесь валидировать свой код, то есть проверять его синтаксическую правильность. Вы также узнаете о доступности и, наконец, поймете, как зарегистрировать доменное имя своего веб-сайта и разместить свой веб-сайт в Интернете. Так что это действительно полноценный курс!
Изучив все это, вы приступите к работе над окончательным проектом, в котором объедините все свои знания для создания синтаксически корректного многостраничного веб-сайта и убедитесь, что он корректен и доступен.
Как вы будете учиться
Этот курс разбит на 3 недели. Каждая неделя предполагает около 3 часов работы. Концепции преподаются с помощью комбинации видео и множества еженедельных чтений.
Что касается видео, некоторые из них в формате лекций, которые можно смотреть где угодно. Но некоторые из них представлены в демонстрационном формате, где вы должны следовать и тестировать свой код на своем компьютере во время просмотра видео. Ключом к успеху в этом курсе является написание кода.
Большинство чтений — это ссылки на бесплатный онлайн-учебник и некоторые другие онлайн-статьи.
Еженедельные оценки обычно проводятся в форме оцениваемых тестов. В конце курса также есть итоговое рецензируемое задание. Это задание довольно простое: вам нужно создать действующую веб-страницу, используя ваши знания HTML-тегов.
Учреждение
Мичиганский университет
Провайдер
Курсера
Инструктор
Коллин ван Лент
Уровень
Новичок
Рабочая нагрузка
13 часов
Регистрация
453К
Рейтинг
4,7 / 5,0 (25 тыс.)
Сертификат
Платный
Обратите внимание
Возможно, вы захотите иметь учетную запись CodePen (это игровая площадка для программирования), чтобы попробовать написать фрагменты кода и посмотреть, как они будут выглядеть в браузере, но это совершенно необязательно.
Интересные факты
После завершения этого курса вы получите ссылку на «Секретное видео» (ее можно найти в примечаниях для инструктора на главной странице курса). Но спойлерить не буду!
Этот курс является первым из пяти курсов веб-дизайна для всех: основы веб-разработки и специализация кодирования.
Коллин ван Лент ранее работала адъюнкт-профессором в Калифорнийском государственном университете, а также работала в NASA JPL, Военно-морской исследовательской лаборатории и АНБ.
Коллин опубликовала три книги для детей: «Веб-дизайн с HTML», «Веб-дизайн с HTML» и «Создание веб-страницы» (в соавторстве с сыном).
Если вы заинтересованы в этом курсе, вы можете найти дополнительную информацию о курсе и о том, как записаться здесь.
Предварительный просмотр приложения для фото кошек, которое вы создадите на первом уроке
Мой четвертый выбор среди лучших онлайн-курсов по веб-разработке — «Отзывчивый веб-дизайн », предлагаемый исключительно freeCodeCamp!
Этот курс посвящен двум языкам Интернета: HTML и CSS.
Этот курс freeCodeCamp отличается от обычных онлайн-курсов. У него нет видео лекций, которые вы можете посмотреть. Вместо этого все дело в чистом кодировании и динамичной практической практике!
Как только вы нажмете на урок, вы перейдете к серии забавных упражнений по программированию. Упражнения объясняют концепцию и дают инструкции по выполнению задачи. В основном они короткие и простые, но иногда и немного сложные.
Экран разделен на две части: слева находятся инструкции и консоль программирования, справа вы увидите вывод вашего кода. Так что в основном это динамический интерфейс; не нужно настраивать локальную среду разработки для запуска кода — все это можно делать в браузере!
Чему вы научитесь
Вы начнете с кодирования HTML. А чтобы сделать его еще милее, вы сделаете фото-приложение для кошек! Шаг за шагом вы будете добавлять один HTML-элемент за другим, и ваше приложение готово!
Далее идет CSS, так что больше никаких скучных веб-страниц! Теперь вы сможете добавлять цвета, изменять стиль и размер шрифта, а также оформлять свою веб-страницу, чтобы она выглядела более привлекательно.
Затем вы будете создавать простые HTML-формы, а также использовать некоторые новые инструменты CSS для оформления своей страницы.
Далее вы изучите блочную модель CSS. «Коробка» — это интервал и граница вокруг каждого элемента HTML. Вы также будете использовать Flexbox, чтобы элементы на вашей веб-странице сами изменяли размер, чтобы соответствовать любому размеру экрана, и ваша веб-страница отлично выглядела на любом устройстве.
Вы коснетесь типографики, чтобы оформить текст, а затем перейдете к специальным возможностям. Важно, чтобы ваша веб-страница была не только синтаксически правильной, но и удобной для всех, особенно для людей с ограниченными возможностями.
Есть еще CSS: псевдоселекторы CSS, которые изменяют определенные элементы HTML, промежуточный CSS и дальнейшая практика CSS, а также более адаптивные упражнения веб-дизайна для автоматического изменения размера вашей веб-страницы.
Вы также будете использовать переменные CSS для организации стилей и их повторного использования. Вы поймете, как управлять строками и столбцами на веб-странице с помощью CSS Grid.
Наконец, вы увидите, как на самом деле можно преобразовывать элементы HTML, поворачивая и масштабируя их, чтобы они выглядели привлекательно для пользователя. Вы будете использовать это, чтобы сделать милого маленького пингвина! А знаете ли вы, что вы также можете анимировать свой CSS? Да, вы тоже об этом узнаете.
Как вы будете учиться
Этот курс разбит на 5 «курсов», но не обязательно на недели. Каждый такой «курс» включает от 2 до 4 подкурсов, и каждый подкурс содержит от 20 до более 100 упражнений по кодированию. Нет отдельного чтения, как в других онлайн-курсах. Все представлено в самих упражнениях.
Весь курс включает в себя около 300 часов работы, хотя в зависимости от вашего опыта и от того, насколько полными функций вы хотите, чтобы ваши проекты были, это может занять у вас намного меньше времени.
Концепции изучаются с помощью комбинации простых и промежуточных упражнений по кодированию. Количество упражнений может показаться ошеломляющим, но стоит потратить время на их выполнение. Все они строятся друг на друге.
После каждого «курса» вам нужно будет выполнить один сертификационный проект, то есть всего 5 проектов. После их успешного завершения вы сможете просмотреть свой сертификат об окончании курса — совершенно бесплатно.
Обратите внимание, что сертификаты freeCodeCamp нельзя загрузить и их можно просмотреть только в Интернете.
Провайдер
FreeCodeCamp
Уровень
Новичок
Рабочая нагрузка
300 часов
Рейтинг
4,6/5,0
Сертификат
Бесплатно
Интересные факты
Этот курс включает бесплатный сертификат .
Этот курс является бета-версией предыдущего сертификационного курса адаптивного веб-дизайна. Учебная программа немного отличается, но сертификат общий для обоих. Бета-версия — это приятное улучшение — она еще более практична!
Несмотря на то, что в этом курсе нет видеолекций, вы все равно можете найти подсказки по решению упражнений на сопутствующем форуме, который даже содержит несколько поясняющих видео. Так что не беспокойтесь, даже если вы застряли!
Если вы заинтересованы в этом курсе, вы можете найти дополнительную информацию о курсе и о том, как записаться здесь.
Дэниел Рэндалл, преподаватель курса
Мой пятый выбор среди лучших онлайн-курсов по веб-разработке — Введение в веб-разработку , предлагаемый Калифорнийским университетом в Дэвисе на Coursera.
Этот курс предназначен для начинающих, которые хотят изучить основные принципы веб-разработки.
После завершения этого курса вы сможете понимать и писать базовый код на языках Интернета — HTML, CSS и JavaScript — для создания собственных динамических веб-сайтов.
Независимо от того, насколько малы ваши технические знания в настоящее время, этот курс подготовит вас к дальнейшему обучению в области веб-разработки, если вы хотите пройти более продвинутые курсы или специализации.
Любой желающий может пройти этот курс и использовать его в качестве трамплина для создания более крупных и сложных веб-сайтов!
Чему вы научитесь
Первая неделя посвящена структуре веб-сайта и веб-хостингу. Вы изучите жаргон и общие сокращения веб-разработки, приступите к размещению своего веб-сайта и узнаете о методах разработки на стороне клиента и сервера.
На второй неделе вы изучите базовый язык всех веб-сайтов: HTML. Вы сможете идентифицировать HTML-теги и код, а также изучить стили, применяемые к HTML, чтобы изменить его внешний вид.
Вы научитесь настраивать шаблоны для HTML, создавать ссылки, форматировать текст и работать с изображениями, которые хотите разместить на своих веб-страницах.
На третьей неделе будет JavaScript. Это язык, который делает веб-сайты динамичными! Вы начнете с написания простых программ на JavaScript, одновременно изучая его основной синтаксис.
Вы будете работать с предупреждениями и подсказками JavaScript, а также с событиями (как правило, это конкретные взаимодействия пользователей с вашими веб-сайтами, такие как нажатие или ввод текста). Вы также узнаете, как собирать пользовательский ввод и динамически изменять HTML с помощью JavaScript. Наконец, вы потренируетесь тестировать свои программы на JavaScript.
Неделя 4 охватывает стилизацию в веб-разработке: CSS. В то время как HTML и JavaScript формируют скелет веб-страницы, именно CSS делает ее интерактивной и красивой. Вы изучите различные принципы дизайна, сравните и сопоставите то, как мы используем CSS в виде встроенного, внутреннего и внешнего кода CSS, а также попрактикуетесь в кодировании CSS онлайн.
Вы сможете сделать веб-страницу менее скучной, добавив цвета и управляя макетами страниц. Вы будете работать с пикселями и создавать привлекательные таблицы с помощью CSS.
На пятой неделе вы научитесь создавать веб-формы с помощью HTML. Вы будете применять на практике все, чему научились за предыдущие недели, для создания HTML-формы. Они широко используются в Интернете.
Вы будете кодировать простые формы и проверять вводимые пользователем данные с помощью JavaScript. Вы также обсудите использование определенных элементов HTML, таких как кнопки, и то, как вы можете взаимодействовать с ними с помощью JavaScript.
Наконец, на неделе 6 вы изучите основы проектирования веб-приложений. Вы сможете создавать динамические веб-страницы для взаимодействия пользователей. Вы узнаете разницу между веб-разработкой на стороне клиента и на стороне сервера, определите, что такое «полный стек», и поймете основные циклы JavaScript, такие как циклы «пока» и «для».
Изучив все это, вы сделаете большой шаг к тому, чтобы стать опытным веб-разработчиком!
Как вы будете учиться
Курс разбит на 6 недель. Каждая неделя предполагает от 3 до 4 часов работы. Курс преподается с помощью сочетания коротких видео и чтения.
Материалы для чтения представляют собой внешние ссылки, предназначенные для предоставления дополнительной поддержки при прохождении курса.
Еженедельные оценки обычно проводятся в форме оцениваемых тестов. Есть также окончательный рецензируемый проект.
В этом проекте вы будете использовать все, чему научились в ходе курса, для создания HTML-формы на любую тему по вашему выбору. Вам нужно будет применить проверку HTML, CSS, изображений и JavaScript, а также различные типы ввода формы в вашей форме.
Учреждение
Калифорнийский университет, Дэвис
Провайдер
Курсера
Инструктор
Дэниел Рэндалл
Уровень
Новичок
Рабочая нагрузка
25 часов
Регистрация
191К
Рейтинг
4,7 / 5,0 (3K)
Сертификат
Платный
Интересные факты
Дэниел Рэндалл является соавтором сертификационного экзамена Java Web Services для Sun Microsystems.
Он также был техническим редактором книги «Думай как программист».
Если вы заинтересованы в этом курсе, вы можете найти дополнительную информацию о курсе и о том, как записаться здесь.
Упкар Лиддер, инструктор курса
Мой шестой выбор среди лучших онлайн-курсов по веб-разработке — Введение в веб-разработку с помощью HTML, CSS, JavaScript , предлагаемый IBM на Coursera.
Этот курс немного отличается от предыдущих курсов веб-разработки, которые мы видели до сих пор. Почему? Потому что этот курс посвящен созданию собственных облачных приложений!
Облачные приложения аналогичны обычным веб-сайтам, но работают с облачными службами, такими как облачная серверная инфраструктура, облачное хранилище и обработка данных, а также с другими облачными службами. Это может сделать их проще в создании, масштабируемыми и надежными, поэтому многие разработчики в настоящее время предпочитают облачные приложения.
Сегодня мы больше, чем когда-либо, полагаемся на облачные приложения во всем, от онлайн-покупок до удаленной работы. Это означает, что в этой области представлен большой набор навыков, имеющих отношение к карьере.
Чему вы научитесь
Этот курс полностью посвящен программированию для облака. Вы узнаете о языках, платформах и инструментах, которые используются для создания интерактивных облачных приложений. Вы также познакомитесь с различными типами разработчиков (front-end, back-end и full-stack) и узнаете общие термины и навыки, необходимые для того, чтобы стать облачным разработчиком.
Затем вы поймете, как создавать структуру вашего приложения с помощью HTML и добавлять к нему стили с помощью CSS. Затем вы перейдете к различным элементам HTML5. Эти элементы помогут вам создать структуру вашего веб-сайта, такую как верхние и нижние колонтитулы, разделы, дату и время, числа и многое другое.
Далее вы изучите JavaScript, чтобы повысить интерактивность вашего приложения. Вы сможете добавлять такие функции, как формы и слайд-шоу, чтобы сделать его более динамичным.
Чтобы иметь возможность хранить и отслеживать файлы проекта, вы научитесь использовать Git, GitHub и GitLab. Это популярные инструменты, используемые разработчиками для совместной работы и управления крупными программными проектами.
Как вы будете учиться
Курс разбит на 6 недель. Каждая неделя предполагает от 2 до 3 часов работы. Курс преподается с помощью сочетания коротких видео и чтения.
Существуют также плагины и внешние инструменты, которые помогут вам на практике освоить то, что вы узнали. Они не оцениваются и предназначены для того, чтобы помочь вам укрепить свои навыки.
На последней неделе этого курса вы создадите приложение для вымышленной организации. Вы примените все знания, полученные в ходе курса, для создания этого приложения. Это задание будет оцениваться коллегами, поэтому убедитесь, что вы все сделали правильно.
Обратите внимание, что для отправки этого проекта вам потребуется учетная запись GitHub. Так что в этом курсе вы не только узнаете о Git и GitHub, но и сможете их использовать!
Учреждение
IBM
Провайдер
Курсера
Инструктор
Упкар Лиддер
Уровень
Новичок
Рабочая нагрузка
20 часов
Регистрация
20К
Рейтинг
4,5/5,0
Сертификат
Платный
Интересные факты
Этот курс является частью нескольких специализаций, таких как специализация IBM по основам разработки облачных приложений и сертификат Full Stack Cloud Developer Professional.
Несмотря на то, что инструктором этого курса является человек, он в основном «преподается» компьютерным голосом. Очень инновационный подход IBM!
Если вы заинтересованы в этом курсе, вы можете найти дополнительную информацию о курсе и о том, как записаться здесь.
Мэтью Йи-Кинг (слева) и Марко Гиллис (справа), со-инструкторы курса
Мой седьмой выбор лучшего онлайн-курса по веб-разработке — «Основы адаптивного веб-сайта: код с HTML, CSS и JavaScript», предлагаемый университетом. Лондонских международных программ и ювелиров, а также Лондонского университета на Coursera.
Позвольте мне заранее сказать вам, что Мэтью Йи-Кинг — один из самых веселых инструкторов, которых вы когда-либо встречали (я имею в виду, вы только посмотрите, как круто он выглядит!). А что еще нужно, если у тебя крутые учителя? Вы сразу полюбите веб-разработку!
Соавторами этого курса являются Мэтью Йи-Кинг, Марко Гиллис и Кейт Девлин.
Чему вы научитесь
В первую неделю вы будете изучать HTML. Вы узнаете, как настроить среду веб-разработки, построить панель навигации, встроить изображения и создать списки с помощью HTML.
Вторая неделя посвящена CSS. Вы узнаете, как связать внешние файлы CSS с вашим HTML, изменить шрифты и макет текста, а также использовать CSS для настройки форматирования гиперссылок. Вы установите загрузочную библиотеку и создадите адаптивную сетку.
Затем вы освоите JavaScript на третьей неделе. Вы напишете простой код JavaScript, обеспечивающий взаимодействие с пользователем, в том числе посредством кликов. Вы изучите функции JavaScript и даже напишете свои собственные функции!
Последняя неделя посвящена более глубокому изучению JavaScript. Вы научитесь использовать переменные JavaScript, писать операторы if (операторы if сообщают программе, какой путь выбрать в соответствии с заданным условием) и использовать логические переменные (переменные, которые могут содержать только два значения: true и false) в тех случаях, если заявления.
Вы также научитесь писать код JavaScript, который немного сложнее для разработки более сложных приложений.
Как вы будете учиться
Курс разбит на 4 недели. Каждая неделя предполагает от 2 до 3 часов работы. Курс преподается с помощью сочетания коротких видео и чтения.
В каждом модуле есть множество практических тестов. Они не оцениваются, но помогут вам проверить свое понимание, прежде чем приступить к оцениваемым тестам.
Наряду с оцениваемым тестом каждую неделю проводится задание, оцениваемое сверстниками. Эти задания представляют собой простые упражнения по программированию на темы, которые вы изучили на этой неделе.
Учреждение
Лондонский университет
Провайдер
Курсера
Инструктор
Мэтью Йи-Кинг, Марко Гиллис, Кейт Девлин
Уровень
Новичок
Рабочая нагрузка
25 часов
Регистрация
175К
Рейтинг
4,6 / 5,0 (5,8 тыс. )
Сертификат
Платный
Интересный факт
Этот курс является первым из шести курсов специализации «Разработка адаптивных веб-сайтов и дизайн».
Доктор Марко Гиллис, один из инструкторов, также является преподавателем онлайн-программы бакалавриата Лондонского университета в области компьютерных наук, предлагаемой на Coursera.
Если вы заинтересованы в этом курсе, вы можете найти дополнительную информацию о курсе и о том, как записаться здесь.
Джогеш К. Муппала, преподаватель курса
Мой восьмой выбор среди лучших онлайн-курсов по веб-разработке — «Полная веб-разработка с использованием React », предлагаемый Гонконгским университетом науки и технологий на Coursera.
Этот курс старой школы довольно сложный, с особым акцентом на React. React — очень популярная внешняя библиотека JavaScript для создания пользовательских интерфейсов (UI). С React вы можете легко создавать интерактивные пользовательские интерфейсы.
Для успешного завершения этого курса рекомендуется иметь практические знания Bootstrap 4 и JavaScript. Одно замечание: в этом курсе используется React v16.3.0.
Чему вы научитесь
Вы начнете курс с введения в интерфейсные фреймворки и библиотеки JavaScript. Вы познакомитесь с React и его компонентами, а затем с различными типами компонентов и одностраничными приложениями маршрутизатора React.
Затем вы перейдете к контролируемым и неконтролируемым формам и поймете проверку формы в приложениях React. Вы познакомитесь с шаблоном архитектуры Flux и поймете, как Redux помогает его реализовать.
Вы глубже погрузитесь в Redux, узнав о действиях Redux, комбинировании редьюсеров и преобразователях Redux. Курс также учит вас взаимодействию клиент-сервер с использованием Fetch и REST API.
Затем вы узнаете, как применять анимацию к своему приложению с помощью React. И, наконец, вы закончите курс тестированием, сборкой и развертыванием приложений React.
Как вы будете учиться
Курс разбит на 4 недели. Каждая неделя предполагает от 3 до 5 часов работы. Курс преподается через сочетание видео и чтения.
В отличие от многих курсов, почти половина видео каждую неделю посвящена теории. Инструктор, Джогеш К. Муппала, описывает каждую концепцию с помощью слайдов и демонстрирует все упражнения шаг за шагом.
В дополнение к видео, в чтении представлены четкие пояснения к каждому упражнению с использованием фрагментов кода.
Ваша успеваемость будет оцениваться исключительно на основе заданий, оцениваемых коллегами каждую неделю. Эти задания проверяют ваше понимание понятий, изучаемых в этом модуле.
Учреждение
Гонконгский университет науки и технологий
Провайдер
Курсера
Инструктор
Джогеш К. Муппала
Уровень
Промежуточный уровень
Рабочая нагрузка
36 часов
Регистрация
148К
Рейтинг
4,7/5,0 (3,1 тыс. )
Сертификат
Платный
Забавные факты
Этот курс является вторым по полнофункциональной веб-разработке со специализацией React. Прохождение первого курса поможет вам лучше понять этот курс.
Инструктор Джогеш Муппала также ведет два блога: Случайные размышления и Мои шутки!
Если вы заинтересованы в этом курсе, вы можете найти дополнительную информацию о курсе и о том, как записаться здесь.
Оуэн Астрахан, Сьюзан Х. Роджер, Роберт Дюваль (все трое сзади) и Эндрю Д. Хилтон, преподаватели курса
Мой девятый выбор лучшего онлайн-курса по веб-разработке — Основы программирования с помощью JavaScript, HTML и CSS , предлагаемый Университетом Дьюка на Coursera.
Если вы хотите изучить программирование с нуля, прежде чем начать веб-разработку, то вы нашли свой курс!
Этот курс не только научит вас писать код на HTML, CSS и JavaScript, языках Интернета, но и объяснит вам основы самого программирования. Как только вы усвоите ключевые концепции, вы сможете перейти к программированию веб-разработки.
Чему вы научитесь
Вы начнете курс с изучения HTML и понимания концепций алгоритмов и программирования. Вы научитесь программировать в HTML и добавлять изображения, ссылки и списки для создания собственной веб-страницы и оформления ее с помощью CSS.
Вы изучите основные понятия программирования, такие как переменные, методы, функции, циклы и условия. Вы также поймете и реализуете алгоритм зеленого экрана.
Вы примените свои новые знания в области программирования к JavaScript, чтобы сделать свою веб-страницу более интерактивной. Вы будете использовать различные функции, такие как кнопки на своей веб-странице, и создать веб-страницу с зеленым экраном. Наконец, вы научитесь применять фильтры изображений в Интернете.
Как вы будете учиться
Курс разбит на 4 недели. Каждая неделя предполагает от 5 до 8 часов работы. Курс преподается с помощью сочетания коротких видео и чтения.
Теория, лежащая в основе каждой концепции, кратко объясняется с помощью простых слайдов на протяжении всего курса. Каждую неделю есть практика, а также оцениваемые викторины, чтобы проверить ваше понимание.
В конце 4-й недели появится дополнительный раздел с отличием. После этого к вашему сертификату будет добавлен специальный значок с отличием (если вы платите за него). Задание с отличием не является обязательным, и вы получите обычный сертификат, если закончите курс, но не раздел с отличием.
Учреждение
Университет Дьюка
Провайдер
Курсера
Инструктор
Оуэн Астрачан, Сьюзан Х. Роджер, Роберт Дюваль, Эндрю Д. Хилтон
Уровень
Новичок
Рабочая нагрузка
35 часов
Регистрация
480К
Рейтинг
4,6 / 5,0 (13,3 тыс. )
Сертификат
Платный
Интересный факт
Этот курс является первым из пяти курсов специализации Java Programming and Software Engineering Fundamentals.
Доктор Сьюзан Роджер, один из преподавателей курса, разработала инструмент для обучения формальным языкам и теории автоматов.
Если вы заинтересованы в этом курсе, вы можете найти дополнительную информацию о курсе и о том, как записаться здесь.
Марва Хусейн, со-инструктор курса
Мой десятый выбор среди лучших онлайн-курсов по веб-разработке — Основы HTML5 и CSS , предлагаемый Консорциумом World Wide Web (W3C) на edX.
Консорциум World Wide Web (W3C) — это международное сообщество, которое занимается разработкой веб-стандартов и раскрытием всего потенциала Интернета.
Созданный самим W3C, этот курс обязательно станет для вас надежным источником для изучения ключевых языков веб-разработки: HTML, CSS и JavaScript в соответствии с последними веб-стандартами.
Чему вы научитесь
Этот курс научит вас писать базовый код HTML, CSS и JavaScript. Вы начнете с создания своей самой первой веб-страницы на простом HTML5. Вы изучите основы HTML, как добавлять изображения и гиперссылки с помощью HTML, следуя передовым методам веб-разработки, таким как специальные возможности.
Затем вы сделаете свою веб-страницу более привлекательной, добавив CSS. Вы изучите основы CSS, а также его различные свойства и функции.
Отладка или исправление ошибок в вашем коде — важная практика в любом виде программирования. Этот курс посвящен различным инструментам и методам отладки, используемым для того, чтобы сделать ваш код HTML и CSS безошибочным.
Когда вы научитесь отлаживать свой код, вы сможете глубже погрузиться в HTML5 и CSS. Вы будете вставлять таблицы и мультимедиа, а также вставлять контент на свою веб-страницу (что необязательно для этого курса).
Вы закончите курс основами верстки страниц. Сюда входят CSS Flexbox (для размещения содержимого вашей веб-страницы на любом экране) и CSS Grid (для управления строками и столбцами на вашей веб-странице). Опять же, есть дополнительная информация об этом, если вы хотите пойти дальше, но это необязательно.
Как вы будете учиться
Этот курс разбит на 6 модулей. Каждый модуль включает от 1 до 2 часов работы. Курс преподается с помощью сочетания коротких видео и чтения.
Каждый модуль содержит дополнительные пояснения, фрагменты кода и практические вопросы без оценок, помимо обычных материалов для чтения. В этом курсе есть большое количество материалов для чтения, которые помогут вам лучше понять концепции.
В конце каждого модуля есть несколько оцениваемых заданий. После того, как вы все выполните, в конце курса вы пройдете итоговый тест, состоящий из 7 заданий с оценкой.
Учреждение
W3C
Провайдер
edX
Инструктор
Марва Хусейн, Эндрю Бирн, Адриан Левен
Уровень
Новичок
Рабочая нагрузка
15–20 часов
Регистрация
381К
Сертификат
Платный
Интересный факт
Этот курс является частью сертификата W3C Front-End Web Developer Professional Certificate.
Первоначально этот курс был разработан Дейлом А. Схоутеном, Анушей Мутией и Кристофером Перкинсом в рамках партнерства между W3C и Intel.
Если вы заинтересованы в этом курсе, вы можете найти дополнительную информацию о курсе и о том, как записаться здесь.
Веб-программирование
Режим доставки курса
Лекции
Онлайн-уроки
Практические
Назначение(я)
Презентация(и)
Краткое содержание курса
Введение: определение, всемирная паутина (www) и веб-картография
Разработка веб-сервисов и веб-карт с использованием Leaflet и Google Maps API
Чтение данных из различных источников данных
Методы веб-картографии; веб-дизайн и разработка, гиперссылки, анимация, веб-атлас, мультимедийное отображение
Создание и публикация геопространственной информации с использованием HTML, GML
Картографические веб-библиотеки и фреймворки
В этом курсе; Брошюра и API Карт Google
Результаты курса
Понимание основ клиент-серверной архитектуры
Понимание основ клиентских технологий [HTML, CSS, JavaScript]
Понимание основ серверных технологий [PHP, SQL, базы данных]
Связь между клиентом и сервером — AJAX
Библиотеки и фреймворки — JQuery
Инструменты для геопространственных приложений — [Leaflet, Google Maps, Turf, PostGIS, GeoJSON]
Лекция 1: Введение в веб-картографирование
Веб-программирование
Дж Мваура
Требуемые знания
Синтаксис HTML и CSS
w3schools. com
w3resources.com
Базовые навыки программирования на JavaScript
Картографический сервис; WMS, WMTS &am; ТМС
QGIS или ArcGIS
Сделайте Google своим другом
Эволюция веб-технологий
Сеть продолжает развиваться
HTML, CSS и JS
HTML — позволяет нам структурировать содержимое нашей веб-страницы. Наша карта будет содержаться в элементе HTML-файла 9.0029
CSS — дает нам контроль над стилем и визуальным представлением нашей веб-страницы. Мы будем использовать его для размещения и изменения размера карты, а также для настройки некоторых элементов листовки
.
JavaScript — дает нам возможность добавить интерактивности на нашу веб-страницу. Мы будем использовать его для добавления фрагментов карты на нашу веб-страницу, добавления данных (или слоев содержимого) и обработки взаимодействия пользователя с картой
.
Сервисы и библиотеки JavaScript
Карта Google — Google Inc
Брошюра — CloudMade
Открытые слои — OpenStreetMap
Карты Bing, Here Maps, ArcGIS Online, MapBox.
Сравнение библиотек
Имя
с открытым исходным кодом?
Бесплатно?
Ограничения
Карты Google
№
Ежедневно
Лицензия
Брошюра
Да
Да
навыки и время
Вот карты
№
Ежемесячно
Лицензия
ArcGIS Online
№
№
Лицензия
Открытые слои
Да
Да
навыки и время
Карты Bing
№
Ежемесячно
Лицензия
Мапбокс
(Да)
Ежемесячно
Лицензия
Коммерческие услуги
Требуется регистрация Вы получаете ключ API
Идентифицирует ваше приложение
Используется для мониторинга использования вашей службы
Ссылка на ключ в ваших файлах JavaScript
1.
Карты Google
Базовые карты (доступно 4 варианта)
Добавьте свои данные
Большие столы
GeoJSON
КМЛ
2. ArcGIS Online
Выбрать базовые карты
Добавьте свои данные и стили
Опубликовать/поделиться картой как приложение
Доступны шаблоны приложений
Доступно на GitHub
Редактировать приложение с помощью JavaScript API
3. MapBox
Создание карт с помощью MapBox Studio
Ссылка на ваш дизайн по идентификатору в файле JavaScript
Векторные плитки
Карта отображается на стороне клиента
На основе API с открытым исходным кодом
4. Открытые слои
Полностью переписан OL3
Дополнительные функции по умолчанию
Дополнительные параметры для настройки без плагинов
5. Буклет
Простой и легкий (всего 28кб кода)
Подходит для мобильных устройств
Простой API
Не так много функций
Множество плагинов
Легче учиться, если вы плохо знаете JavaScript
Какую библиотеку выбрать?
Соображения
Ваш вариант использования
Характеристики
Лицензия
Цены
Будущее
Базовые карты
Бесплатные серверы WMS/TMS/WMTS
Щелкнуть по плиткам карты улиц
Брошюра Click
Службы веб-функций Click
Список кликов
Пользовательский интерфейс и компоновка
Платформа начальной загрузки (HTML, CSS, JS)
Ответный
Много готовых строительных блоков
Нажмите кнопку начальной загрузки
Плагин брошюры
Плагин Click Leaflet
Функции интерактивной карты
У вас должна быть какая-то интерактивность на вашей карте
Фильтрация, изменение стиля, поиск. ..
Нажмите jQuery
Простой в использовании API для обработки событий и т. д.
Фильтрация с помощью ползунка: jQuery + noUiSlider
Нажмите noUiSlider
Обработка координат
Лучше преобразовать ваши точки данных в ту же CRS, что и ваша базовая карта в QGIS/ArcGIS
Если вам нужны преобразования CRS в вашем коде JavaScript, используйте proj4js
Нажмите proj4js
Отладка
Использовать инструменты браузера
Firebug для Firefox
Консоль Chrome
Код JavaScript console.log(переменная)
Форматы пространственных данных
Файловые данные
Shapefile, KML, GeoJSON и TopoJSON, gpx, csv
Пространственные данные базы данных
Право собственности: Microsoft SQL Server, Oracle Spatial и промежуточное ПО Esri ArcSDE
Открытые эквиваленты: PostgreSQL с расширением PostGIS, SQLite с расширением SpatiaLite
XML, в котором данные хранятся в наборе структурированных тегов
Битбакет: KML
Дом: KML
Пространственные файловые структуры: GeoJSON
Данные расположены в виде иерархического ряда пар ключ-значение с дискретной геометрией
Спецификации GeoJSON
Битбакет: GeoJSON
Домашняя страница: GeoJSON
Пространственные файловые структуры: TopoJSON
Кодирует топологию с геометриями, которые имеют общие последовательности позиций, называемые дугами
Технические характеристики TopoJSON
Битбакет: топоJSON
Домашняя страница: topoJSON
Вкратце
Конец лекции 1
Веб-программирование
Вот оно!
Вопросы по этому уроку, пожалуйста, присылайте по адресу: [email protected]
*Ссылки*
Карты Google; Электроинструменты для максимального использования API, 2014 г. Evangelos Petroutsos
D3 Советы и рекомендации; Интерактивная визуализация данных в веб-браузере, 2013 г. Малкольм Маклин
Интерактивная визуализация данных для Интернета, 2013 г. Скотт Мюррей
Веб-программирование с использованием HTML5, CSS и JavaScript, 2019 Джон Дин
Брошюра Документация Команда листовок
Документация Google для разработчиков Команда Google
Предоставлено … Веб-программирование
6.S063 Дизайн для Интернета: языки и пользовательские интерфейсы
Информация о курсе
# Главная Информация
— Лекции по понедельникам и средам с 14:30 до 16:00 (3-333)
— Лекции будут записаны, но частью вашей оценки будет участие (см. ниже)
— Обязательные лабораторные работы по пятницам с 14:30 до 16:00 (комната уточняется)
— 12 единиц (3-2-7)
— 6.009(или эквивалентный опыт программирования) является обязательным условием
— Этот предмет можно использовать для удовлетворения требований [CS12](https://eecsis. mit.edu/grade_requirements.html#CS12) и [EECS12](https://eecsis.mit.edu/grade_requirements.html#EECS12). факультативы
— Заполните [форму регистрации](/go/signup), **иначе вы не зарегистрированы на курс**!!
— *Регистрация может быть ограничена*
— **[*Здесь будут драконы*](https://en.wikipedia.org/wiki/Here_be_dragons): Это самое второе предложение этого курса. Идеально не получится.
Хотя многие проблемы были устранены в первой итерации (в 2020 году, как 6.S082, с теми же инструкторами), курс все еще находится в активной разработке.
и, таким образом, могут быть ошибки в лекции, ошибки в заданиях и т. д.
Если вас это не устраивает, возможно, этот курс не подходит вам в данный момент.**
# Описание курса
Этот курс научит принципам и технологиям проектирования удобных пользовательских интерфейсов для Интернета.
Мы изучим ключевые принципы и методы проектирования пользовательского интерфейса, включая обучаемость, эффективность, безопасность, прототипирование и пользовательское тестирование.
Мы изучим основные веб-языки HTML, CSS и Javascript, их различные роли и причины для самых разных дизайнов. Мы будем использовать эти языки для создания удобных веб-интерфейсов.
Мы также коснемся основ теории графического дизайна, поскольку дизайн и удобство использования идут рука об руку.
# Оценка
— Будут **еженедельные задания**, на которые будет приходиться 80% вашей оценки.
— Нет экзамена, промежуточного или более длительного проекта (хотя есть небольшие проекты, построенные на нескольких домашних заданиях).
— 20% вашей оценки будет посвящено участию. *(Мы все еще оцениваем это, и оно может быть изменено до начала урока)*
— 3/4 из них (15%) будут посвящены посещению и участию в лаборатории/лаборатории.
— Остальные (5%) будут посвящены общему участию. Некоторые лекции будут включать занятия в классе, которые будут учитываться при подсчете вашей оценки за участие.
но вы также можете активизировать свое участие другими способами, например, задавая вопросы и отвечая на них или помогая другим учащимся на [Piazza](https://piazza.com/mit/spring2022/6s063/).
— Получение отличной оценки за участие не требует идеальной посещаемости/участия. — Мы отменим требования к участию во время всплесков COVID и создадим условия для изоляции учащихся.
Расписание
Вот примерное расписание лекций на 6.S063.
**Это расписание может быть радикально изменено.**
Весной 2022 года этот класс предлагается только во второй раз, поэтому нам может потребоваться внести существенные коррективы в расписание в зависимости от множества факторов.
Это расписание будет обновляться в течение семестра, и, вообще говоря, чем дальше от настоящего находится тема, тем больше вероятность того, что она изменится.
По понедельникам
по средам
по пятницам
Введение и обзор
Структура веб-страницы: HTML Предварительное выполнение
Лаборатория Предварительная лаборатория
Обучаемость
Графический дизайн Предварительное чтение
Лаборатория
Эффективность
Основные понятия CSS Предварительное выполнение
Лаборатория
Вторник
Безопасность
Дополнительные основные концепции CSS Предварительное выполнение
Лаборатория
Эвристическая оценка
Макет
Лаборатория
Прототипирование и пользовательское тестирование
Универсальный веб-дизайн
Лаборатория
Введение в современный JS Предварительное чтение
События Предварительное чтение
Лаборатория
Без занятий (Весенние каникулы)
Без занятий (Весенние каникулы)
Нет лаборатории (Весенние каникулы)
Шаблоны проектирования
Функциональный JS Предварительное чтение
Лаборатория
Асинхронный JS
Типография Предварительное чтение
Лаборатория
веб-API
Цвет
Лаборатория
Без занятий (День патриота)
Анимация и обратная связь
Лаборатория
Визуализация данных
Разработка на основе компонентов
Лаборатория
Веб-стандарты (удаленный, опционально)
Без класса
Лаборатория
Отражение курса
Персонал
Имя
Роль
Электронная почта
Офис
Часы работы
Дэвид Каргер
Инструктор
Каргер
32Г-592
По предварительной записи
Леа Веру
Инструктор
отпуск
32Г-598
По предварительной записи
Тарфах Аль-Рашед
ТА
тарфа
Виртуальный
По понедельникам с 12:00 до 14:00 (найдите ссылку Zoom для Огайо на площади Пьяцца)
Соя Парк
ТА
соя
Виртуальный
По понедельникам и вторникам с 9:00 до 10:00 (найдите ссылку Zoom для Огайо на площади Пьяцца)
Элейн Сяо
ЛА
Эйсяо
34-301
Понедельник с 19:00 до 20:00
Тхань Нгуен
ЛА
танх_н
34-301
Вторник с 19:00 до 20:00
Логистика курсов
# Задержки и расширения
Чтобы дать вам некоторую гибкость в периоды большой рабочей нагрузки, легкой болезни, отсутствия в кампусе, собеседований и других случайных (но часто предсказуемых) обстоятельств, вы можете использовать ограниченные продления сроков решения проблем, называемые нерабочими часами. Каждый час простоя — это продление дедлайна на 1 час.
У вас есть бюджет **5 × 24 свободных часа на весь семестр**, который вы можете применить к любой комбинации отдельных заданий.
Использование любой части часа простоя поглощает весь час. Например. загрузка задания с опозданием на 62 минуты занимает 2 часа простоя.
Вы можете использовать **максимум 36 часов свободного времени (1,5 дня) для данного задания**.
Задания с опозданием более чем на 36 часов не принимаются.
Брюки **не** предназначены для случайной прокрастинации. Поздние представления должны иметь место только в исключительных обстоятельствах (поездка на конференцию, болезнь и т. д.).
Слаки просто избегают хлопот с представлением обоснования.
Если вы исчерпали свои свободные брюки и ищете дополнительные расширения, вам сначала нужно будет предоставить приемлемые обоснования для **всех** использованных вами слабых предметов.
Все запросы на продление в особых обстоятельствах должны быть задокументированы официальной запиской (например, запиской от врача) или фотографическим доказательством (например, селфи, на котором вы держите разбитый ноутбук). # Учебник и ресурсы
— Рекомендуемый учебник: *Дизайн повседневных вещей: исправленное и дополненное издание*, Дон Норман.
— [Веб-документы MDN] (https://developer.mozilla.org/en-US/)
— [Спецификации CSS] (https://www.w3.org/Style/CSS/specs.en.html)
— [Спецификация HTML] (https://html.spec.whatwg.org/multipage/)
— [Спецификация JavaScript (ECMAScript)](https://www.ecma-international.org/ecma-262/10.0/index.html#Title)
# Политика сотрудничества
— Подробно описано [здесь](collaboration.html).
IT350 Intro
Добро пожаловать в IT350 (веб- и интернет-программирование)
Это практический лабораторный курс, который знакомит с основными понятиями, теориями и связанными с ними методами, необходимыми для работы в Интернете. Темы будут охватывать ряд областей, включая HTML, CSS, а также сценарии на стороне клиента и на стороне сервера.
Показания
Конспекты лекций будут размещены в календаре. Ожидается, что вы просмотрите
примечания и следуйте вместе с задачами в конце. Обязательного учебника нет, но рекомендуемый учебник (Internet & World Wide Web: How to Program, Fifth Edition, P. J. Deitel, H. M. Deitel, A. Deitel; Prentice Hall, 2012) и рекомендуемое чтение с внешних веб-сайтов.
Проблемы
В нижней части онлайн-заметок почти к каждой лекции будут примеры задач.
чтобы вы работали во время урока. Эти задачи также являются хорошей практикой для экзаменов.
Проверка и отладка
Особое внимание будет уделяться проверке всех файлов HTML и CSS, чтобы убедиться, что они соответствуют стандартам. Вам также придется отлаживать свою работу в этом классе (проверка помогает при отладке HTML и CSS).
Ожидается, что вы освоите чтение ошибок валидатора для HTML и CSS, ошибок консоли для JavaScript, просмотр журналов для PHP и использование
доступные отладчики.
Задания курса
Календарь является основным источником информации и указаний, которые будут использоваться в течение всего семестра. Ожидается, что вы будете часто проверять там чтение, заметки, опубликованные задания и сроки.
Лаборатории : Лаборатории будут проводиться еженедельно. Большинство лабораторий начнутся во вторник, а в пятницу в 23:59.
Лабораторные работы будут сданы с использованием онлайн-системы отправки, и инструктор также ожидает, что ваши лабораторные файлы будут доступны в вашей веб-папке (подробнее об этом позже). Каждая отправка должна включать файл README с информацией о каждой лаборатории. Примечание: будьте готовы работать над лабораториями вне периода лаборатории. Как есть
в этом классе нет домашнего задания, лабораторные работы более сложные и потребуют больше времени.
Викторины : Будьте готовы к еженедельным викторинам.
Проект : В этом классе будет один большой проект. Вы будете работать в группах по 3-4 человека над созданием функционального и интересного веб-сайта. Заключительные презентации проектов состоятся во время выпускных экзаменов.
Краткая история всемирной паутины
Прародительница сегодняшнего Интернета, ARPANET , была реализована в конце 1960-х годов компанией ARPA (англ.
Агентство перспективных исследовательских проектов). Эта новая сеть состояла из дюжины университетов и институтов.
подключен через 56-килобайтные линии связи и был первым в своем роде, позволяющим использовать общие ресурсы.
Основными задачами этой сети были:
Разрешить нескольким пользователям отправлять и получать информацию одновременно
Использовать технику пакетной коммутации, с помощью которой цифровые данные отправляются небольшими пакетами, называемыми пакетами.
содержащий данные, информацию об адресе, информацию о контроле над ошибками и информацию о последовательности. Это значительно уменьшило передачу
стоимость подключенных выделенных линий связи
Работа без централизованного управления: если часть сети выйдет из строя, оставшиеся части все равно смогут маршрутизировать
пакеты
В то время как этот Интернет предназначался только для университетов и исследовательских лабораторий, военные стали его крупным пользователем, а США
Правительство решило разрешить доступ к этой сети в коммерческих целях. Скоро огромное разнообразие сетевых
и сопутствующее программное обеспечение появилось. Развитие протоколов TCP/IP сделало возможным взаимодействие.
По мере роста Интернета предприятия тратили значительные средства на его улучшение в условиях жесткой конкуренции между производителями.
операторы связи и поставщики аппаратного/программного обеспечения. Результат → пропускная способность (пропускная способность)
Интернета значительно увеличилось, а затраты резко упали.
В 1990 году Тим Бернерс-Ли представил концепцию Всемирной паутины (www), позволяющую пользователям находить
и просматривать мультимедийные документы. Позже, в 1994, он основал консорциум World Wide Web (W3C) , который занимается
разработка непатентованных и совместимых технологий для Интернета, чтобы сделать его общедоступным. Кроме того,
W3C помогает в стандартизации с помощью рекомендаций W3C , в том числе:
Язык гипертекстовой разметки (HTML)
Каскадные таблицы стилей (CSS)
Расширяемый язык разметки (XML)
Курс механики
В этом курсе вы будете разрабатывать веб-страницы и интерактивный контент! Для этого вы будете использовать midn.