Это часть первой серии из шести статей, посвященных моему прогрессу в изучении курса программирования Гарвардского университета CS50W (веб-программирование с использованием Python и JavaScript).
Эта запись охватывает недели 1, 2 и проект Поиск. Для видеопрохождения моего решения проекта нажмите ЗДЕСЬ. Моя предыдущая запись из этой серии находится ЗДЕСЬ; следующий можно найти ЗДЕСЬ.
Привет, мир! (снова) и добро пожаловать на мою вторую попытку в Гарвардском университете CS50W, Веб-программирование с помощью Python и JavaScript.
В этом месяце я закончил первые три лекции курса (HTML/CSS, Git и Python), а также его первый проект «Поиск» — повторную реализацию поиска Google.
0: HTML и CSS
В нулевой лекции были рассмотрены два краеугольных камня Интернета: HTML и CSS. HTML — это язык разметки для документов, предназначенных для просмотра в веб-браузере (например, Chrome и Firefox); CSS — это язык таблицы стилей, используемый для представления этой информации с точки зрения макета, цветов и шрифтов.
Мы рассмотрели основные концепции HTML: элементы и теги, отступы, атрибуты, элементы заголовка и тела, а также объектную модель документа — простой способ визуализации того, как элементы в HTML связаны друг с другом. Всего за ~10 строк кода мы смогли отрендерить нашу первую «Hello, World»; еще в 10 мы смогли выделить его жирным шрифтом, выделить его курсивом, перечислить, занести в таблицу, связать (и так далее до бесконечности).
Затем мы узнали о HTML-формах, способе сбора пользовательского ввода. Формы легко настраиваются, позволяя пользователям вводить информацию с помощью текста, переключателей или флажков, отправляя их на сервер с помощью простой кнопки.
Теперь, имея возможность грубо отображать текст в веб-браузере, мы узнали, как стилизовать его (и все другие элементы HTML) с помощью CSS. Это можно сделать несколькими способами: напрямую добавляя отдельные элементы HTML с кодом CSS; поместив наш CSS в заголовок страницы; или на самом деле изолировать его как отдельный файл CSS, гиперссылкой на который является рассматриваемая HTML-страница.
До сих пор наши страницы были функциональными, но не красивыми и уж точно не динамичными (вспомните GeoCities начала 2000-х). Чтобы сделать наши страницы читаемыми на различных устройствах — от смартфонов до настольных компьютеров — мы узнали об адаптивном дизайне с помощью медиа-запросов (способ изменения стиля страницы в зависимости от того, как она просматривается) и CSS flexbox, метод переноса элементов на новую строку, если они не помещаются по горизонтали.
Также быстро стало очевидно, насколько ручными, утомительными и легко ломаемыми могут быть самописные HTML-страницы. Чтобы упростить создание привлекательных, настраиваемых и отзывчивых веб-страниц, мы познакомились с Bootstrap — бесплатным CSS-фреймворком с открытым исходным кодом, который сейчас находится в пятой версии. Одной из центральных особенностей Bootstrap является система сеток, мощный способ создания макета всех форм и размеров с помощью системы из двенадцати столбцов, пяти адаптивных уровней, Sass (подробнее об этом чуть позже) и нескольких предопределенных/неинтуитивно названных занятия а-ля <div class="w-100 d-none d-md-block"></div>.
Наконец, мы рассмотрели Sass — язык, который позволяет пользователям писать CSS более эффективно с помощью ряда методов, в том числе за счет использования переменных и наследования (базовый стиль, который может быть общим для нескольких элементов HTML). В отличие от CSS, файлы Sass должны быть преобразованы или скомпилированы в формат CSS перед использованием через программу Sass в терминале.
1: Гит
В первой лекции был представлен обзор Git и GitHub, Git — это локальная система контроля версий для управления историей исходного кода, а GitHub — облачный сервис для размещения репозиториев Git.
В лекции был представлен довольно полный обзор общих команд Git (коммиты, конфликты слияния, ветвление и т. д.) и некоторый практический опыт, но мне еще предстоит регулярно использовать систему. Во-первых, в то время как Git концептуально прост, страх перед необратимым удалением проекта становится значительно более выраженным, когда в оболочке Bash представлен список суровых вариантов белого на черном. Во-вторых, я просто не нахожу большого стимула использовать Git прямо сейчас, когда «откат» находится всего в нескольких cmd+z от Atom.
Учитывая, что эта потенциальная полезность компенсируется барьером для входа, я надеюсь, что в будущем появится возможность использовать Git в обязательном проекте — обязательное требование проекта является сильным мотиватором для изучения темы (‹кашель, кашель указатели в C)!
2: Питон
Вторая лекция была посвящена первому из языков программирования CS50W, Python. Используя мои превосходные навыки работы с Googlez (где z обозначает особенно продвинутое мастерство), я узнал следующее: Python является динамически типизированным (т. е. явное объявление переменных не требуется); выразительный (т.е. читабельный); интерпретируемый (т. е. код выполняется построчно интерпретатором без компилятора); объектно-ориентированный язык программирования (то есть парадигма программирования, в которой программы организованы вокруг «объектов, а не функций и логики»)… очевидно.
Предполагая некоторое знакомство с программированием, лекция прошлась по базовому синтаксису Python и типам данных, таким как int, float, str, bool и None, прежде чем перейти к тому, где язык действительно сияет: последовательности, из которых есть несколько типов - строки, списки. , кортежи, наборы и словари.
Всего одной строкой кода (возьмите этот C!), мы реализовали нашу первую «Hello, World!» на Python; всего в двух строках мы принимали имя от пользователя и приветствовали его.
После изучения синтаксиса Python для общих операторов и логики (отступы, циклы For/While, условия If… Else, функции и т. д.) мы перешли к объектно-ориентированному программированию (ООП). ООП — это одна из центральных парадигм Python, метод структурирования программы путем объединения свойств и поведения в отдельные объекты (в отличие от процедурного программирования). Объектом ООП, например, может быть человек с такими свойствами, как имя и возраст, и поведением, таким как ходьба и разговор. В Python новый объект создается с использованием класса, похожего на план этого объекта.
Лекция завершилась обзором поддержки Python для парадигмы функционального программирования, в которой функции рассматриваются как значения, как и любые другие переменные. К примерам были описаны: декораторы (функция, которая может модифицировать функцию) и лямбда-функции (простая, короткая, одноразовая функция, созданная в коде).
Проект 0: Поиск
Проект 0, «Поиск», не использовал Python, вместо этого использовались концепции, взятые почти исключительно из лекции 0. В этом проекте перед нами стояла задача заново реализовать внешний интерфейс поиска Google, поиска изображений и расширенного поиска с использованием HTML и CSS. .
Подобно проектам CS50, хотя лекция 0 затронула многие концепции, необходимые для завершения проекта, требовалось еще больше экспериментов и самостоятельных исследований.
Мой подход заключался в том, чтобы сначала реализовать каждый основной элемент проекта по отдельности — веб-форму, панель навигации, кнопки отправки и т. д. После того, как каждый элемент был завершен, было относительно тривиально собрать все вместе в один веб-сайт и сгладить любые шероховатости. .
Большая часть моего времени в проекте была потрачена на изучение Bootstrap, хотя, оглядываясь назад, я мог бы сэкономить много разочарований, если бы я читал документацию, а не бесцельно копировал / вставлял / взламывал примеры кода, найденные в Интернете. Хотя мне не нравится веб-дизайн — особенно по сравнению с простой функциональностью C — я потратил много времени, пытаясь точно соответствовать дизайну Google, многому научился в процессе — изменение цвета кнопок, тщательное размещение логотипа и т. д. .
Больше всего разочаровывало, но в конечном счете и больше всего радовало повторное внедрение поиска Google «Мне повезет». Хотя это уже невозможно, как описано в документации проекта (поскольку компания перенаправляет любой клон «Мне повезет» в качестве меры предосторожности), я проявил настойчивость и нашел обходной путь в нескольких строках JavaScript. Короче говоря, этот код добавлял скрытую обратную косую черту к вводу текста пользователем при отправке веб-формы, перенаправляя его в DuckDuckGo, который автоматически перенаправлял пользователя к первому результату поиска! Это уродливый код, и я изо всех сил пытаюсь понять, что именно делает каждый компонент, но он работает!
