Исследуем. Проектируем. Предлагаем - читать онлайн

Разработка и создание веб-сайта «Леонардо да Винчи» с использованием HTML, CSS

Введение

Более 500 лет гений Леонардо да Винчи (15 апреля 1452 – 2 мая 1519) является загадкой для людей. Художник и ученый, изобретатель, анатом, архитектор, скульптор, инженер, провидец, поэт – яркий пример «универсального человека».

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

Мы проанализировали имеющиеся сайты в Интернете и пришли к выводу, что те сайты, которые так или иначе связаны с Леонардо да Винчи, не отражают всю многогранность его личности, нет ни одного сайта в едином стиле.

Наша школа № 1409 является одним из учредителей Московского фестиваля творческих открытий и инициатив «ЛЕОНАРДО». Необходим сайт для изучения участниками Фестиваля жизни, творчества и изобретений Леонардо да Винчи. Тема является актуальной, ведь интерес к изобретениям и личности Леонардо да Винчи не ослабевает даже в наш век 3D-технологий, вдохновляет на творчество, проектную деятельность и вызывает желание воспроизвести технические изобретения Леонардо, которые он не успел реализовать при жизни.

Цель: разработка единого дизайна сайта, создание цифрового веб-ресурса и размещение его в Интернете.

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

Задачи:

1. Изучение аналогичных продуктов в Интернете.

2. Изучение языков для создания веб-сайтов.

3. Разработка дизайна сайта, соответствующего эпохе Возрождения и работам Леонардо да Винчи.

4. Разработка единого стиля всех страниц веб-сайта.

5. Подбор содержания главной страницы и вкладок.

6. Создание кода главной и дополнительных страниц сайта.

7. Добавление счетчика посещений.

8. Выбор провайдера и размещение сайта в сети Интернет.

Объект изучения: языки создания веб-страниц HTML, Java Script и CSS, программные среды Adobe Photoshop, MS Power Point и блокнот NotePad++.

Среда разработки: блокнот NotePad.

Методы исследования:

1. Анализ и изучение литературы по html-конструированию, веб-дизайну и материалов сети Интернет.

2. Анализ фильмов и литературы. Поиск и обобщение информации о жизни и творчестве Леонардо да Винчи.

3. Моделирование структуры сайта.

4. Html-конструирование и программирование.

Способы оценки результата (анкетирование пользователей):

1. Информативность и грамотность подачи информации.

2. Дизайн сайта.

3. Навигация по сайту.

4. Наличие обратной связи.

Этапы работы:

1. Теоретическая часть проекта

1.1. Общий обзор технологий создания веб-сайтов

HTML – это язык разметки веб-страниц, который интерпретирует их содержимое для браузеров и отображает пользователям Интернета сайты в нужном виде.

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

На данный момент существует пять поколений языка. Последнее – HTML5, альтернативное название – WebApplications 1.0. Спецификация WebApplications 1.0 только развивается, и некоторые из упоминавшихся функций более полно разработаны, чем остальные. Вот весьма общее описание новых функций:

Многое из описанного выше в современном Интернете нашло свое воплощение в функциях, реализованных в виде единичных разработок на JavaScript.

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

На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом легким для использования непрограммистами. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке.

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

Несмотря на схожий с Си синтаксис, JavaScript по сравнению с языком Си имеет коренные отличия:

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

jQuery – библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими.

jQuery, как правило, включается в веб-страницу как один внешний JavaScript-файл:

CSS (CascadingStyleSheets – каскадные таблицы стилей) – формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например к SVG или XUL.

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

1.2. Создание дизайна и единого стиля сайта на основе анализа информационных источников

Для разработки дизайна учитывался теоретический анализ литературных и Интернет-источников в процессе поиска информации о жизни, личных качествах, творчестве и изобретениях Леонардо да Винчи, об эпохе Возрождения. Найденная информация обобщалась и классифицировалась.

Изучив весь спектр талантов гения, мы сконцентрировали внимание на нескольких гранях его таланта и на важных этапах жизни и творчества. Особенно заинтересовали описания странных и загадочных для своего времени аппаратов. В эпоху Возрождения да Винчи едва ли мог рассчитывать на скорое воплощение в жизнь всех своих изобретений. Главным препятствием для их реализации был недостаточный технический уровень. Но в XX веке почти все аппараты, описанные в его трудах, стали реальностью. Это говорит о том, что «итальянский Фауст» был не только талантливым изобретателем, но и человеком, который смог предвосхитить технический прогресс. Конечно, этому способствовали глубокие познания Леонардо. Как бы то ни было, Леонардо да Винчи всегда остается для нас одним из величайших изобретателей всех времен и народов. Многие идеи воплотились в жизнь именно благодаря Леонардо. Ученый улучшил различные изобретения и, что еще более важно, смог придать им наглядность.

При разработке содержания сайта также учтено, что Леонардо да Винчи был талантливым художником.

Мастер оставил множество зарисовок к своим разработкам. И даже если идеи, приписываемые да Винчи, ему не принадлежат, нельзя отрицать, что ученый смог систематизировать огромный пласт знаний, донеся эти знания до потомков.

Создание дизайна сайта заняло целых три месяца. За основу фона были взяты научные записи и чертежи Леонардо да Винчи. Его цвет должен был сочетаться со всеми надписями и основной гаммой изображений. Была разработана специальная виньетка, дизайн надписей и отдельно строчные буквы каждого абзаца для создания единого стиля сайта. Все изображения подвергались обработке в специальной программе Adobe Photoshop для изменения гаммы тонов и качества изображений.

2. Разработка веб-сайта с помощью HTML, CSS и Java Script

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

Структура HTML документа главной страницы стандартная, состоит из контейнера , в котором находятся метатег, определяющий кодировку страницы, ссылки на подключение таблиц CSS, скриптов, написанных на языке JavaScript, а также библиотеки jQuery:

В теле документа описано содержимое страниц. Основным контейнером для содержимого сайта является

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

Заключение

Результаты работы над проектом:

• Изучены основы языка разметки гипертекста, элементы каскадных таблиц стилей, элементы веб-программирования.

• Получены навыки работы в графическом редакторе Adobe Photoshop, оптимизированы изображения на веб-страницах.

• Исследованы некоторые фильмы и художественные произведения о жизни и творчестве Леонардо да Винчи.

• Изучены основные подходы объектно-ориентированного программирования.

• Создан сайт в едином стиле для Фестиваля творческих открытий и инициатив «Леонардо».

Публикация в Интернете по адресу: leonardo-davinchi.ru

Применение проекта: данный веб-ресурс будет использоваться в следующем году в ходе мероприятий фестиваля «ЛЕОНАРДО», и планируется разработать анкету (форма на сайте) для сбора данных о заинтересованности потомками жизнью Леонардо да Винчи, его эпохой, его достижениями и исследованиями.

Дальнейшее развитие проекта:

1. Предстоит работа над появлением следующих интерактивных страниц сайта.

2. В перспективе изучение языка серверных скриптов PHP.

3. Предстоит дальнейшее пополнение контента сайта.

Литература

1. Волынский А. Л. Жизнь Леонардо да Винчи. М., 1997.

2. Гуковский М. А. Механика Леонардо да Винчи. М., 1947.

3. Зубов В. П. Леонардо да Винчи. 1452–1519. Изд. 2-е, доп. М., 2008.

4. Николл Ч. Леонардо да Винчи. Полет разума / пер. с англ. Т. Новиковой. М., 2006.

5. Пудик Я. Леонардо да Винчи. Шедевры графики. М., 2008.

6. Вокруг света. Энциклопедия. URL: http://vokrugsveta.ru/encyclopedia/ (дата обращения: 20.02.2018).

7. Полные и краткие биографии. URL: http://all-biography.ru/alpha/v/vinchi-leonardo-da-vinci-leonardo-da (дата обращения: 20.02.2018).

8. Леонардо да Винчи. URL: http://worldgenius.ru/ (дата обращения: 20.02.2018).

9. Леонардо да Винчи. URL: http://leovinci.ru/ (дата обращения: 20.02.2018).

10. Военная техника. Леонардо да Винчи. URL: http://leonardodavinchi.ru/voyna/ (дата обращения: 20.02.2018).

11. Для тех, кто делает сайты. URL: http://htmlbook.ru/ (дата обращения: 20.02.2018).

12. HTML5. URL: http://www.html-5-tutorial.com/index.htm (дата обращения: 20.02.2018).

13. Ruseller. URL: https://ruseller.com/ (дата обращения: 20.02.2018).

Геометрический умножатель

Введение

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

Примерно такой же мне видится ситуация и с таблицей умножения. Заучив ее в младших классах и научившись использовать повсеместно, я пришел к мысли о том, что передо мной не просто цифры, а зашифрованное послание. Что же оно несет в себе? Как я могу приоткрыть завесу тайны над тем посланием, которое нам оставил Пифагор, а может быть, и кто-то из более древних мудрецов?

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

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

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

Объект исследования: таблица умножения (таблица Пифагора) как одно из хранилищ священных знаний в области сакральной геометрии и нумерологии.

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

Цель проекта: попытаться раскрыть пространственное отображение закономерностей, заложенных в таблице умножения, и на их основе создать механическое устройство – Геометрический умножатель.

В ходе проведения данного исследования были поставлены следующие задачи и выполнены соответствующие этапы работы (см. таблицу).

Таблица

Задачи и этапы исследовательского проекта

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

Основная часть

1. Теоретическая часть

1.1. Изучение основных постулатов сакральной геометрии и нумерологии

В Древней Греции изучение сущности красоты, таинства прекрасного, основанного на определенных геометрических образцах, сформировалось в отдельную ветвь науки – эстетику, которая у античных философов была неразрывно связана с космологией. Древние греки обладали геометрическим видением универсального порядка. Они воспринимали Вселенную как обширное пространство разнообразных взаимосвязанных элементов.

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

Геометрические фигуры – конкретное воплощение чисел. Числа принадлежат к миру принципов, и они становятся геометрическими фигурами, нисходя в физический план. Например, число 4 связывается с квадратом, 5 – с пентаграммой, 3 – с треугольником, 2 – с углом, 1 – с точкой или линией. Такая абстрактная величина, как число, на определенном этапе развития самосознания человека начинает пониматься органически и геометрически.

1.2. Анализ степени изученности и научной разработанности данной темы

Интересные работы, связанные с нумерологическим представлением таблицы умножения и абрисами первоцифр, можно найти в работах А. А. Корнеева на его сайте, созданном в начале двухтысячных годов под названием «Числонавтика». Так, в одной из статей утверждается, что таблица умножения является «цифровым отображением топологической операции продольного разрезания ленты Мебиуса на три части».

Еще одно серьезное исследование я нашел у кандидата физико-математических наук В. Б. Творогова, который запатентовал свое изобретение в 1999 году как «Вращающаяся таблица умножения/деления размером (w х w), где w = 3(mod10) или w = 7(mod10)». Это устройство в основном варианте реализации имеет две параллельные расположенные рядом неподвижные плоскости и вращающийся круг между ними. На плоскостях нарисованы квадратные матрицы с ячейками и общей осью вращения. Таблицы на поворотной плоскости позволяют получить результат умножения способом поворота круга относительно неподвижных плоскостей вокруг оси, проходящей через центры таблиц.

Описание механизма мне показалось сложным, вследствие чего я так и не смог представить принцип его работы. Также я понял, что в устройстве есть определенная сложность с вычислением десятков результата. Так, в описании изобретения есть фразы, говорящие о необходимости проведения дополнительных операций методом устного счета: «сбоку в каждом ряду, кроме первого, сделаны прорези для вспомогательного числа v_i, используемого для устных вычислений десятков».

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

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

Давайте вспомним, как строится всем известная таблица умножения (таблица Пифагора). Для ее представления необходимо построить квадрат, в левом столбце и в верхней строке которого идут числа от 1 до 9. Умножая каждое число из верхней строки на каждое число из левого столбца и записывая результат на пересечении, мы получим квадрат, состоящий из 81 клетки. Таким образом, мы видим в каждой клетке таблицы результат умножения чисел из левого столбца и верхней строки.

Теперь приведем таблицу умножения к нумерологическому квадрату (см. рис.). Для этого числа в каждой ячейке таблицы необходимо нумерологически сократить, т. е. преобразовать с помощью сложения входящих в состав числа цифр до однозначных. Например, число 12 = 1 + 2 = 3, а число 49 = 4 + 9 = 13 = 1 + 3 = 4.