Разработка web-сайта как переходный этап в преподавании между графическим дизайном и программированием Текст научной статьи по специальности «Компьютерные и информационные науки»

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

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

Список литературы:

1. Федеральный закон от 29.12.2012 N 273-Ф3 «Об образовании в Российской Федерации» [Электронный ресурс] // Официальный сайт компании «КонсультантПлюс». - Режим доступа: http://www.consultant.ru/document/ cons_doc_LAW_149753/ (дата обращения: 1.12.2013).

2. https://m.wikipedia.org/wiki/Ан1драгогика (дата обращения: 10.09.2014).

3. Калмыкова О.В., Черепанов А.А. Реализация принципов дистанционного обучения при преподавании информатики // Экономика, статистика и информатика. Вестник УМО. - М., 2014. - № 3. - С. 17-22.

4. Кукуев А.И. Андрагогический подход в педагогике. - Ростов-на-Дону: ИПО ПИ ЮФУ 2009. - 328 с.

РАЗРАБОТКА WEB-САЙТА КАК ПЕРЕХОДНЫЙ ЭТАП В ПРЕПОДАВАНИИ МЕЖДУ ГРАФИЧЕСКИМ ДИЗАЙНОМ И ПРОГРАММИРОВАНИЕМ

© Неженцев М.М.*

Орловский государственный педагогический университет, г. Орёл

Проектирование WEB-Сайта является переходным этапом в преподавании между графическим дизайном и программированием. Дизай-

* Аспирант кафедры Декоративно-прикладного искусства.

нер должен ориентироваться в информационных технологиях, для того, чтобы использовать расширенные возможности программирования в HLTM, Java Script, Php, Action script и других платформах. Изучение структуры сайта позволяет сопоставить его логические элементы, и изменять их посредством написания программного кода, упрощая освоение новых технологий.

Ключевые слова информационные технологии, проектирование, Web-сайт, дизайн, программирование, компьютерная графика, HTML, скрипты.

«Недавнее создание и широкое распространение Всемирной паутины привлекло в Интернет массу новых людей, никогда не причислявших себя к числу исследователей и разработчиков сетей. Была создана новая координирующая организация, W3-консорциум (World Wide Web Consortium, W3C). Первыми руководителями консорциума стали изобретатель WWW Тим Бер-нерс-Ли и Эл Вецца. WWW объединившись с NSFNET и USENET, составили современный Internet (международная сеть)» [1].

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

«Прежде всего, классификацию сайтов можно проводить по способу графического исполнения и информативного наполнения. То есть, отдельно рассматривать визуальный интерфейс и структуру представленной информации. Такое разделение относительно, поскольку грамотная разработка сайта подразумевает под собой тесную связь графического исполнения и информационной составляющей разрабатываемого ресурса» [2].

В связи с тем, что в проектировании работа ведется с конкретными объектами, достаточно сложным является обучение студентов абстрактным понятиям, которые нельзя наблюдать в жизни. Для перехода на язык, понятный студентам ХГФ, вполне возможной является работа с оформлением собственного сайта. На сегодня информация является одной из определяющих компонент любого развития личности. Это дает новые возможности в

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

Само по себе программирование не связанно с графикой, но для удобного проектирования на 2014 год разработано множество софта, позволяющего взаимодействовать с визуальными объектами. В обучении будет использоваться Dreamweaver CS5, как наиболее простая среда для установки и начала работы с сайтом. Кроме того, мы не будем с чистого листа начинать создание сайта, потому как в наше время существует множество источников кода на HTML, а так же движков сайтов, находящихся в открытом доступе для пользователя.

«Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью» [3].

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

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

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

Для перехода на уровень скриптов возможно выполнение заданий, связанных с выполнением каких-либо не сложных сценариев - к примеру - проигрывание какой-либо анимации, выполненной в Adobe Flash CS5.

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

Создание элементов флешь графики Action script- и Java script способствуют абстрагированию и уходу от графических объектов в цифровые коды. Последовательное выполнение данных заданий дает студенту быть свободным и независимым от случайного нажатия лишней кнопки в интерфейсе, кроме того, он овладевает в полной мере сайтостроением, на этапе завершенного сайта он может грамотно оформить персональную страницу в интернете, а так же знакомится с проектами с использованием сценариев.

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

Примерная схема выполнения сайта в данном случае будет выглядеть следующим образом:

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

- Предварительно сайт разделяется на основные блоки - шапка сайта, панели навигации, фоновое изображение, тестовые поля, поля для изображений и заставок.

- В дальнейшей работе происходит выделение текстовых полей, графических модулей, баннеров, блоков для анимации, экспортирование в Dreamweaver или альтернативные программы для программирования в графической оболочке.

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

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

«В исследовании основных векторов в графической разработке, необходимо рассмотреть стилистику изображения. Существует несколько направлений WEB-дизайна: минимализм, информационный дизайн, дизайн в бизнес-стиле, промостиль, Веб-2, дизайн в стиле флеш. Во всех этих стилях могут быть использованы и художественные направления дизайна» [4].

Основы минимализма сводятся к минимуму используемых средств создания сайта. Простота и логичность - вот основа минимализма.

Что определяет данное направление:

1. Белый фон, черный текст.

2. Отказ от графики.

3. Присутствие ограниченного количества шрифтов (максимум 2).

4. Минимальное оформление: пиксельные значки, тонкие линии.

5. Текстовая навигация.

6. Тщательная работа над контентом, так как количество информации на сайте огромное.

7. Четкая модульная сетка (каждый из блоков размещен с учетом функциональности).

«Информационный дизайн - это минимализм в высшей точке его проявления. Взяв от минимализма простоту и легкость подачи информации, и соединив ее с минимальным графическим оформлением, получили достаточно удобное направление в дизайне. В основном данное направление нашло себя в средствах массовой информации» [5].

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

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

Список литературы:

1. http ://www. seoded.ru/istoriya/internet-history/voznik-interneta-of. html.

2. http://deaction.com/poleznaya_informaciya/veb-dizajn_sozdanie_sajtov.

3. http://ru.wikipedia.org/wiki/HTML.

4. http://afblog.ru/windows/osnovnye-stili-saj_jtov.html.

5. http://michelle-k.ru.

ФОРМИРОВАНИЕ ИКТ-КОМПЕТЕНТНОСТИ МЛАДШИХ ШКОЛЬНИКОВ В УСЛОВИЯХ РЕАЛИЗАЦИИ ФГОС НОО

© Никотина Е.В.*

Ставропольский краевой институт развития образования, повышения квалификации и переподготовки работников образования, г. Ставрополь

Статья посвящена вопросу формирования ИКТ-компетентности детей младшего школьного возраста в условиях реализации ФГОС НОО:

* Доцент кафедры Начального образования, к.п.н.