VII Международная студенческая научная конференция Студенческий научный форум - 2015

Вступление

Современная система образования предъявляет высокие требования к компьютерной подготовке преподавателей.

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

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

Сейчас для повышения профессионального статуса преподавателя и эффективности его деятельности недостаточно уметь пользоваться стандартным пакетом Microsoft Office - сегодня необходимо грамотно оформлять результаты своего труда в виде web-сайта и демонстрировать их в сети Интернет.

На персональном web-сайте учителя можно размещать:

• Расписание уроков
• Учебные программы и нормативные документы
• Методические пособия, рефераты и статьи
• Свои личные разработки и труды
• Фотоальбомы о проведении мероприятий
• Мультимедийные презентации
• Наиболее важные новости в сфере своей дисциплины
• Задания для домашней подготовки ученика, тестовые вопросы
• Работы учеников и т.д.

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

 1.    Сервис uCoz

1.1  Постановка задачи

Задача состоит в создании тематического  web-сайта с использованием гипертекстового языка разметки HTML, каскадных листов стилей CSS и языка программирования JavaScript. Объем работы не должен  значительно отличаться от стандартных личных web-страниц педагогов (первая страница - новости, остальные страницы - дополнительные, раскрывающие сущность выбранной тематики).

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

Сайт должен разрабатываться в панели HTML-кодов с частичным использованием визуального редактора с отдельным описанием. Это задействовано для наибольшего закрепления материала по данной теме. Просмотр страниц происходит в Mozilla FireFox (т.к. данная программа для просмотра web-страниц рекомендована для сервиса uCoz) или в любом другом навигаторе, установленном на компьютере пользователя.

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

 

 

1.2  Расшифровка выбора

К сожалению, далеко не все учителя владеют в совершенстве языком разметки гипертекста HTML, а тем более JavaScript  и CSS. Но, с помощью сервиса uCoz можно разрабатывать вполне достойные и грамотно сконструированные  web-страницы, т.к. здесь имеется встроенный "визуальный редактор", очень похожий на редактор Microsoft Word, с которым все знакомы. Это достаточно полезное приложение, которое упрощает изготовление и редактирование страниц в сети.

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

Ещё, в отличие от uCoz, у некоторых CMS -движков, например  WordPress,  Joomla,  для изготовления сайта требуется локальный   сервер   Denver. Это   отдельная   программа    для создания  виртуального      сервиса      без  подключения к Internet. Она была актуальна, когда Internet был дорогой, а его тариф оплачивался повременно. Сейчас преобладает "безлимит", поэтому, налицо устаревшие технологии, которые будут нести учителю-вэбмастеру хлопоты, нагромождение программ, которых и без Denver хватает.

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

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

 2. Создание Web-сайта для учителя информатики

2.1 Регистрация на сервисе uCoz

 

Для создания личной web-страницы достаточно лишь набрать название сервиса в любой поисковой системе.

 

Зайдем на официальный сайт http://ucoz.ru и ознакомимся с главной страницей. Мы видим, что на самой первой странице сайт предлагает нам регистрацию.

 

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

 

 

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

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

 

Далее панель управления будет доступна по вкладке общее→вход в панель управления.

 

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

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

2.2 Оформление страниц

 

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

<header class="header">

<div class="logo-wrap">

 <a class="logo-b" href="$HOME_PAGE_LINK$"><span class="logo-brk"></span><span class="logo-name">

     <!-- <logo> --> <font color="#ffffff">Сайт учителя информатики</font><!-- </logo> --></span>

 <span class="logo-brk"></span></a>

</div>

 

 <nav>

 <!-- <sblock_nmenu> -->

<?if($NMENU_1$)?>

<div class="show-menu">Menu</div>

<div class="vert-menu"><!-- <sblock_nmenu> --><!-- <bc> -->$NMENU_1$<!-- </bc> --><?endif?>

<!-- </sblock_nmenu> --></div>

<!-- </sblock_nmenu> -->

</nav>

 

 </header>

 

Теперь на главной странице нашего сайта будет его соответствующее название.

 

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

2.3 Заполнение сайта содержимым

 

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

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

Теперь перейдем на панель HTML кодов, где пропишем следующий код:

<p style="text-align: justify;">Об авторе</p>

 

<p style="text-align: justify;">Татевик Геворговна Кулешова.<br />

Учитель информатики и ИКТ 8-11 классов Маливской средней общеобразовательной школы.<br />

<a href="http://malivoschool.ucoz.com">http://malivoschool.ucoz.com</a></p>

 

<p style="text-align: justify;">Студентка 5 курса факультета математики, физики, химии, информатики<br />

Государственного образовательного учреждения высшего профессионального образования<br />

Московский государственный областной социально-гуманитарный институт<br />

<a href="http://kolomna-kgpi.ru">http://kolomna-kgpi.ru</a></p>

 

<p style="text-align: justify;">Контакты<br />

<br />

E-mail: [email protected]<br />

Тел: +7(985)4875233</p>

 

<p style="text-align: justify;">На сайте представлены как собственные разработки, так и файлы и информация, найденные в сети Интернет (как свободно распространяемые) или найденные в учебно-методической литературе. Автор сайта не претендует на авторство всех представленных материалов. Если вы являетесь правообладателем какого-либо информационного продукта или информации, и условия, на которых она представлена на данном ресурсе, не соответствуют действительности, просьба немедленно сообщить с целью устранения нарушения авторского права.</p>

 

В секции тела нашей web-страницы располагается основной текст, который мы разбили на абзацы. Каждый абзац начинается с тега <p>  и заканчивается тегом </p>. Если нужно прервать текущую строку , не начиная  новый абзац , мы использовали автономный тег <br />.

У тега <p> существует атрибут text-align,  которым может задаваться выравнивание абзаца и заголовка. Этот атрибут принимает одно из следующих значений :  center ,  left, right, justify, означающих выравнивание по центру, по левому краю (значение по умолчанию),  по правому краю и по ширине соответственно. Можно заметить, что вся информация у нас на сайте выровнена по ширине - это наиболее оптимальный вариант отображения страниц в интернете.

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

 

 

Я считаю, что на данной странице форматирование начертания будет лишним, поэтому данный пункт мы пропустим.

Далее, нам необходимо на страницу сайта поместить ссылки, указывающие на официальные сайт учебных заведений, где учится и работает разработчик сайта. Для создания гиперссылок служит тег <a> с обязательным атрибутом href (от англ. Hypertext REFerence - гипертекстовая ссылка). Между начальным тегом <a> и заключительным тегом </a> размещается текст или графические изображения, которые появляются на web-странице в виде ссылки (текст обычно выделяется синим цветом и подчёркивается,  изображение помещается в рамку). Для использования изображения в качестве ссылки, нужно между тегами <a>  и </a> вставить тег <img>. В этом случае изображение фактически становится кнопкой, при нажатии на которую происходит переход по ссылке. В данном случае тег <img> нам не пригодился.

Мы использовали атрибут href, чьим значением является URL  ресурса (от англ. Uniform Resource Locator - единый указатель ресурсов), на который указывает создаваемая гиперссылка. Если ресурс расположен на том же сайте, что и web-страница, то можно указать относительный адрес, но в данном случае обе ссылки расположены на других сайтах.

У тега <a> есть необязательные атрибуты title и target. Значением атрибута title является текст всплывающей подсказки,  которая появляется при наведении курсора мыши на гиперссылку.

Атрибуту target присваивается значение _blank, если ресурс требуется открыть в новом окне (или вкладке),  и значение _self, если в текущем.  Гиперссылка может указывать на некоторую часть web-страницы. Например, на длинной web-странице, где текст бывает разбит заголовками на несколько частей, в верхней и нижней частях страницы создают ссылки для мгновенного перехода к нужному месту web-страницы. Помеченное для перехода по ссылке место на web-странице называется якорем.

Для создания якоря необходимо в нужном месте web-страницы расположить тег <a>  с атрибутом name.  Значением атрибута name является имя якоря. Для перехода к нужному якорю используется тег <a> с атрибутом href, в значении которого после ссылки на web-страницу необходимо поставить # и указать имя якоря. Если ссылка идёт на якорь  текущей web-страницы, то достаточно указать только # и имя якоря.  Имена якорей следует задавать латинскими буквами. Кроме того, некоторые браузеры считают различными имена якорей, набранные заглавными и строчными буквами.

После добавления информации о сайте, web-страница будет выглядеть следующим образом:

 

 

2.4 Добавление новостей на главную страницу

 

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

После вставки статьи, выделим цитату и применим специальное форматирование для цитат:

 

 

Тема статьи, которую мы добавили в новости связана с Единым Государственным  Экзаменом и поступлением абитуриентов в ВУЗы. Статья описывает поручения главы государства по данной тематике, поэтому вполне логично для привлечения внимания поместить фотографию Путина В.В. в текст статьи.

Для начала загрузим фотографию на uCoz. Для этого войдем в файловый менеджер с помощью вкладки Управление. Загрузим фотографию из компьютера и скопируем в буфер полное имя файла загруженной фотографии вместе с расширением. Далее в HTML-коде введем следующий текст:

<p><img alt="Путин: необходимо повысить минимальный балл ЕГЭ для приема в вузы " src="/News/A15-28_3.jpg" style="margin: 10px; float: left; width: 300px; height: 200px;" />Владимир Владимирович Путин - президент Российской Федерации поручил кабинету министров обеспечить повышение минимального количества баллов ЕГЭ, необходимого для поступления в университет. При этом для разных специальностей минимальные баллы будут разными.</p>

Тег <img> предназначен для отображения на web-странице изображений в графическом формате gif, jpeg или png. Этот тег имеет единственный обязательный параметр src, который определяет адрес файла с картинкой. При необходимости то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив параметр border="0" в тег <img>.

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

Фотографию в файловом менеджере мы предварительно поместили в папку News, куда в последствии будем добавлять файлы из страницы новостей. Данная сортировка поможет в дальнейшем упростить поиск файлов. Именно поэтому, в пути мы указывает не сразу имя файла с расширением, а предварительно указав папку.  С помощью width и height зададим ширину и высоту изображения соответственно, в данном случает 300 на 200 пикселей.

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

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

Итак, значение left выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне. Right выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне. None - это обтекание элемента не задается, а inherit - наследует значение родителя.

Применив все элементы форматирования, готовая статья будет выглядеть следующим образом:

2.5 Размещение личных разработок и полезных ссылок

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

Более того, при работе в школе, каждый учитель ежегодно готовит поурочные, тематические и календарные планирования. Конечно, сходу подготовить такого рода документы весьма непросто, поэтому было бы удобно рассмотреть методы составления подобных работ у коллег. При работе в школе я, конечно, сталкивалась с разработкой КТП (календарно-тематическим планированием) по Информатике и ИКТ для 8-11 классов, поэтому с удовольствием поделюсь им с другими учителями.

Для этого, создадим новую страницу с помощью вкладки Добавление и дадим название новой страницы "Разработки".

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

Итак, файлы загружены, теперь перейдем на страницу разработок и приступим к вводу HTML-кода. В тег <a> с обязательным атрибутом href поместим ссылку на первый документ из файлового менеджера, а в контейнере <a> </a> введем текст, который будет отображаться как ссылка для скачивания данного файла:

<a href='http://kuleshovatg.ucoz.ru/ktp/programma-ktp_inf-8_klass-safarjan_t.g..odt'>КТП Информатика и ИКТ 8 класс</a>

По тому же принципу добавим все документы на страницу и для того, что бы каждый файл начинался с новой строки добавим тег </br> после каждой ссылки.

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

 <ol>...</ol> нумерованный список (от англ. ordered list)

<ul>...</ul> маркированный список (от англ. unordered list)

<dl>...</dl> список определений (от англ. definition list)

 

Каждый элемент нумерованного или маркированного списка помещается между тегами <li> и </li> (от англ.  list  item).

Я посчитала, что наши ссылки логичней всего оформлять маркированным списком.

Далее, добавим заголовок к данным документом, просто поместив текст заголовка между тегами <h2> и </h2>, потому что для разбиения текста на разделы в HTML уже предусмотрено шесть уровней заголовков. Им отвечают теги от <h1> до <h6>.  Самый большой заголовок следует помещать между тегами <h1>  и </h1>,  самый мелкий заголовок - между <h6>  и </h6>.  Так же, как у тега <p>,  так и у тегов <h1>,  ...,  <h6> существует атрибут align,  которым может задаваться выравнивание абзаца и заголовка.

В итоге, страница, которую мы создали с помощью HTML-кода будет иметь следующий вид:

 

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

 

Выводы

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

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

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

Создание сайта дело непростое, но если использовать подходящие сервисы, которые облегчают поставленную задачу и являются обучающим звеном в данной области, то сам процесс становится значительно упрощенней и интересней. В качестве такого сервиса я выбрала систему uCoz, которая достаточно удобна для начинающих web-мастеров, неимеющих достаточного навыка работы с HTML и CSS и не желающих глубоко разбираться в процессе "сайтостроения" из-за отсутствия достаточного времени. Благодаря огромному количеству готовых модулей и удобному конструктору, они могут создать полнофункциональный интернет ресурс, затрачивая на это минимальное количество времени.

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

Список используемой литературы

 

1.     Kevin Werbach. Перевод: Станислав Малишев. - Краткое пособие по HTML, Москва 2012.-304 с.

2.     Р. Левин  и др. "Internet для "чайников", Санкт-Петербург, 2007.-384 с.

3.     www.htmlbook.ru

4.    www.webschool.narod.ru

5.    www.siteblogger.ru

6.    www.pronet.ru

7.    www.dreamweaver.net.ru

8.    www.lib.toxy.cv.ua

9.     https://sites.google.com/site/informatikamgosgi

 

Ссылка на разработанный сайт:

http://kuleshovatg.ucoz.ru

 

 

 

 

Код для цитирования: Скопировать