Предисловие

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

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

Члены Экспертного совета и Жюри Фестиваля исходят из понимания того, что каждый из участников и лауреатов Фестиваля еще только идет по пути овладения проектно-исследовательскими компетенциями. И его надо поддержать на этом пути.

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

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

• А что интересно мне понять в окружающем меня мире?

• В каком глобальном контексте может быть продуктивен для меня поиск?

• Как сформулировать личностно и социально значимую проблему?

• Какие решения уже предлагались (предлагаются)? Устраивают они меня?

• Что я могу предложить и что для этого могу сделать?

Поэтому Оргкомитет считает важным выпуск данного сборника и планирует продолжение подобной работы и в дальнейшем.

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

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

Председатель Оргкомитета

Московского фестиваля

творческих открытий и инициатив «ЛЕОНАРДО»,

доктор педагогических наук,

профессор Института филологии МПГУ

И. А. Подругина

Секция «Человек и инновационные технологии»

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

Гончаров Антон

ГБОУ города Москвы «Школа № 1409»

Руководитель:

Вахитова Людмила Александровна, учитель математики и информатики

Введение

Более 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. Наличие обратной связи.

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

• Определение темы работы.

• Постановка цели и задач проекта.

• Подбор информации на основе литературных источников и Интернета.

• Разработка структуры сайта.

• Разработка общего дизайна сайта.

• Изучение необходимых элементов HTML.

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

• Интегрирование веб-страниц.

• Дополнение сайта Java Script и CSS.

• Отладка программных кодов на сайте.

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

• Размещение сайта в глобальной сети Интернет.

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

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

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

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

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

• новые элементы размещения, в том числе элемент управления «календарь», адресная карта, гибкая сеть данных, измерители и индикаторы хода выполнения, возможность перетаскивать файлы мышью и меню;

• программные расширения DOM (DocumentObjectModel, объектной модели документа), в том числе передаваемые сервером события DOM;

• формализация фактически стандартного объекта XMLHttpRequest, центрального фрагмента коммуникаций Ajax;

• динамическая растровая графика через элемент canvas.

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

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

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

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

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

• объекты с возможностью интроспекции;

• функции как объекты первого класса;

• автоматическое приведение типов;

• автоматическая сборка мусора;

• анонимные функции.

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

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

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

<head>

<script type="text/javascript" src="путь/к/jQuery.js"></script>

</head>

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

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

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

• когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством тега <link>, располагающегося в этом документе между тегами <head> и </head>:

<head>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

• когда таблица стилей описана в самом документе, она может располагаться в нем между тегами <style> и </style> (которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>). Все правила этой таблицы действуют на протяжении всего документа.

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

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

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

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

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

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

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

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

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

<head>

<meta charset="utf8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Леонардо да Винчи| История жизни Леонардо| Его достижения</title>

<meta name="description" content="Великий Леонардо да Винчи. Рассказ о жизни и достижениях. Где родился Леонардо да Винчи, где жил и работал. Чем знаменит в истории." />

<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />

<link rel="icon" href="favicon.ico" type="image/x-icon"/>

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

</head>

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

Заключение

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