IT — проект со школьниками: несколько рекомендаций
За последние 5 лет мне удалось создать десяток учебных проектов вместе со школьниками 8-11 классов в сфере информационных технологий. И вот я решил поделиться своим опытом в этой статье, надеясь на конструктивную беседу по такой актуальной теме. В статье я попытаюсь раскрыть технологию реализации IT — проекта как способа обучения, а также затронуть технические аспекты, которые помогут вашей команде достигнуть результата.
Давайте, в первую очередь, определимся, что же такое проект. Кстати, о проектной деятельности в сфере образования сегодня очень много говорят и пытаются ввести этот метод обучения в образовательный процесс, что я лично крайне поддерживаю. Почему? Да все просто: в сжатые сроки вместе с командой вы создаете продукт, а ваши подопечные одновременно с этим изучают что-то новое.
Вы найдете огромное количество определений понятия «проект», но я попробую дать свое. Проект со школьниками — это некий процесс реализации конечного продукта, направленный на изучение новых инструментов командной работы, создание работающего прототипа или первого варианта продукта, изучение технологий, выходящих за рамки школьной программы.
Ключевыми словами в такой трактовке я считаю “процесс” и “продукт”. Многие проекты, которые я видел, являются исследовательскими, т.е. доказывающими или опровергающими какую-то гипотезу. Результаты таких проектов обычно — презентация и доклад. Многие проекты являются информационными, т.е. направленными на сбор и систематизацию информации об объекте, проблеме, явлении. Результат такого проекта — опять же презентация, доклад, дискуссия.
Я бы хотел, все же, сделать акцент на слове “продукт” и говорить о том, что конечной целью проекта в сфере IT должна быть демонстрация чего-то материального, созданного в процессе реализации проекта. Причем, я ни в коем случае не отрицаю, а наоборот, подчеркиваю важность научно — исследовательских проектов, которые направлены на создание прорывных технологий и разработку новых концепций в сфере информационных технологий. Просто наукой и исследованиями могут заниматься единицы, и, скорее всего, это удел, все-таки, высшего образования.
Идея и продукт
Отнеситесь к выбору темы своего проекта внимательно и тщательно. Зачем тратить впустую ближайшие несколько месяцев, верно? Цели могут быть совершенно разные: улучшить мир, выиграть конкурс, заработать денег, но вся ваша команда должна четко понимать, зачем вы тратите силы и ресурсы, создавая что-то новое.
Еще один неочевидный момент: когда вы создаете что-то осязаемое, гораздо выше вероятность того, что проект будет реализован. Очень часто случается так, что, загоревшись идеей, команда не доводит дело до конца, просто четко не понимая, а что же мы делаем?
Итак, первая мысль пришла в голову, вы с этой мыслью походили и решили, что вот оно! Посмотрите аналоги, сделайте подробный поиск уже существующих решений. Может случиться так, что до вас уже все реализовали. Не отчаивайтесь, если вы не хотите менять тему проекта — сделайте подобное, но по-другому, добавьте функций или измените дизайн. Но лучше, все-таки, создать что-то свое.
Темы проектов могут быть очень разными, и очень большую роль здесь играет наставник. Школьник в силу отсутствия опыта просто может не понимать значимость (или отсутствие таковой) той или иной темы. Школьник может делать что-то только ради процесса, не отдавая отчет в бессмысленности создаваемого. Например, давайте сделаем так, чтобы свет в комнате включался по хлопку ладонями? Интересная идея, но спросите себя, а зачем, кому это будет нужно, если таких решений уже пруд пруди. Ради изучения чего-то нового? Да, такую цель тоже можно достигать проектной деятельностью, но она не самая главная. Главное, на мой взгляд, — научить ребят творить и создавать что-то нужное. Анализировать, аргументировать, убеждать и отстаивать свою точку зрения. Искать варианты улучшения существующего, создавать новое. Людей, которые могут придумывать, не так много, и ценность подобных специалистов возрастает с каждым годом.
Итак, что же может быть продуктом учебного проекта в сфере информационных технологий? Выделим основные очевидные варианты.
Это некий интернет — сервис, реализующий что-то новое или дополняющий уже созданную концепцию. Обратите внимание, что вы можете взять уже готовое решение и, не занимаясь плагиатом, а вдохновившись идеей, разработать что-то другое, более совершенное или просто с другим функционалом. Например, можно создать новый сервис для проведения тестирования или анкетирования. Какие технологии изучат ребята? Дизайн сайтов, верстка, программирование. Немало, на самом деле.
Мобильное приложение
Еще интереснее и сложнее, чем сайт. Поле для фантазии не ограничено, причем, всплывает такой интересный момент: вы можете заниматься созданием проекта озеленения территории вашего микрорайона, но оформить результат как мобильное VR — приложение с возможностью “прогуляться” по создаваемой территории для более полного погружения в реализуемую концепцию. Что мы изучаем? Современные тенденции дизайна, объектно — ориентированное программирование. И, конечно, новые инструментальные средства разработки. А заодно и ландшафтный дизайн.
Компьютерная игра
Этот продукт принимается к реализации ребятами без каких-либо лишних объяснений и обычно доводится до логического конца. Игру можно делать для малышей, игру можно делать обучающую. Можно сделать многопользовательскую браузерную игру, можно сделать игру для смартфонов и планшетов. Что изучают ребята? Приемы и методы геймификации, дизайн элементов компьютерной игры, объектно — ориентированное программирование.
Программа
Продукт, который будет что-то автоматизировать. Научите школьников думать о пользователе, ставить себя на место человека, который будет работать с программой. Научите тестировать свои творения. Пусть программа будет небольшая, но с уникальным функционалом. Новый калькулятор, виджет погоды или агрегатор новостей на рабочем столе — просто оглянитесь вокруг.
Еще один отличный метод — создавать что-то для себя. Вы анализируете, а чего вам не хватает в вашей деятельности или повседневной жизни? Гарантированно такой продукт будет популярным, так как если вы создадите решение, автоматизирующее вашу потребность, найдется круг людей, у кого потребность та же. Например, мне недавно надо было при публикации материалов на сайте добавлять подписи по разным шаблонам. Постоянно форматировать разные подписи — утомительно, вот я и написал плагин под WordPress, позволяющий этот процесс частично автоматизировать. Сделал для себя, но выложу в открытый доступ потом.
Фильм, плакат, журнал, трехмерная визуализация — все это может стать результатом вашего проекта.
Давайте ниже приведу мои рекомендации по реализации учебного проекта в сфере информационных технологий. С ними можно соглашаться или мы можем поспорить, но, может, мои мысли помогут и вам. Некоторые этапы пригодятся и для проектов в сфере экологии, туризма, литературы или русского языка, так как несут достаточно общий характер и будут ценны не только айтишникам.
Формулировка концепции
Придумали идею — запишите ее. Сформулируйте актуальность проекта, цели, которые вы хотите достичь, опишите простыми словами конечный результат вашего проекта, конечный продукт.
Общие папки
Обязательно создайте для своего проекта облачное хранилище с совместным доступом участников. Если это Google Диск или Облако Mail.ru, то создайте общие папки. В одном проекте у нас их было 8: “Модели”, “Текстуры”, “База данных”, “Фоны”, “Картинки”, “Скрипты”, “Настройки”, “Общее”. Можно использовать, наверное, более продвинутые инструменты, например, Битрикс24, я не пробовал. Надо, кстати, обратить на это внимание. Наверняка, есть еще инструменты совместного ведения проектной деятельности.
План реализации
Важный документ, потратьте на него побольше времени. В этом документе вам надо разбить ваш проект на маленькие этапы с описанием результата по окончании каждого. Только так вы дойдете до конца. Разрезав слона, мы сможем его съесть целиком. Школьник должен постоянно ощущать, что время было проведено не зря, что маленькая цель достигнута, скоро будет реализована основная концепция. Такой документ можно назвать план — графиком работ. Причем, когда вы будете его создавать, всплывет масса полезных мелочей, которые надо будет реализовать.
Нарисуйте результат
Все, что есть в голове, должно быть скинуто на бумагу. Делаете программу — рисуйте окна. Делаете сайт — рисуйте страницы. Делаете приложение — рисуйте все views. Делаете игру — рисуйте процесс и графические элементы. На обычных листах обычной ручкой или карандашом. Все зарисовки сохраняйте, ничего не выкидывайте. Схемы, идеи, кнопки, окна, рожицы и палочки — все сохраняйте! Вообще, должна быть общая папка, куда будут складываться все бумажные полезности для проекта.
Назовите команду
Обязательно дайте название своей команде! Это сплотит участников. По возможности, выберите логотип, хотя бы из бесплатных, и создайте лозунг, девиз. Пусть вы будете “IT гуру” или “Кодята”, но название команды даже из двух человек может стать началом целой истории. Обязательно придумайте название вашего конечного продукта, пусть оно будет емким и хлестким. “Газонокосилка 2.0”, “Веб заметки” или “Погода в кармане”. Да, обязательно разделите функции внутри вашей команды: пусть кто-то создает дизайн, а кто-то пишет код, кто-то ищет аналоги и тексты, а кто-то подбирает фотографии или звуковые файлы.
Добавляем экономику
Посчитайте затраты на реализацию проекта. пусть суммы будут большими, неважно, самое главное, чтобы они были реальными. Включите в смету оборудование и программное обеспечение, временные затраты, амортизацию и форс-мажорные обстоятельства. Это научит ребят быть более ответственными и не делать того, что нельзя реализовать.
Выбираем инструменты
План есть, эскизы есть, теперь самое время выбрать программные средства для реализации проекта. Почитайте, что сегодня используется в реальной разработке, что в тренде, что пригодится участникам проекта потом. Попробуйте различные IDE и редакторы, но не зацикливайтесь на учебной программе, выйдите за ее рамки. Обратите внимание, что многие разработчики идут навстречу образовательным организациям, просите у них бесплатные версии их продуктов. Так делает Autodesk и JetBrains, например. Посоветуйтесь с экспертами. Делайте учебный проект правильными инструментальными средствами.
Если будет код, то обязательно создайте репозиторий для версионного контроля. Это сэкономит кучу времени, и ребята приучатся к этой технологии. Как-то я заметил, что переход на систему версионного контроля кода изменило мое отношение к тому, что я пишу. Код стал для меня очень важным и ценным, что ли. Каждое изменение стало более обдуманным. Удаление кода тем более. Более ценным становится и время на разработку. Храните все файлы удаленно и в совместном доступе.
Создаем прототип
Первый самый большой результат проекта должен быть минимально работающим. Т.е. это должно быть что-то запускающееся и выполняющее основные функции, что-то, реализующее основную идею.
Тестируем
Отдаем первую версию продукта друзьям, знакомым, одноклассникам. Готовимся к критике и сразу настраиваемся на адекватное ее восприятие. Когда внутри себя решаешь, что критика будет, сразу становится легче. Внимательно выслушиваем и записываем, обязательно записываем, все советы и пожелания сохраняем. Вспоминаем про папку, куда все складываем.
Доделываем
Смотрим на часы. Оцениваем сроки и доделываем проект в соответствии с план — графиком. Причем, у вас могут быть как краткосрочные цели (выиграть ближайший конкурс), так и долгосрочные (доделать все до конца и выпустить продукт в свет). Дорабатываем основное, вспоминаем пожелания и выбираем из них самые критичные.
Презентуем
Все готово, отведите время на создание доклада и презентации. Рекомендую придерживаться вот таких разделов в презентации:
Шарик-то сдувается
Все хорошо на бумаге, но в реальности всегда чуть сложнее. На пути реализации проекта со школьниками встает несколько проблем. Первая — а когда делать? Вариантов несколько, может, это будет в рамках кружка, может, это будут старшеклассники в классах без экзаменов (8-ые и 10-е классы), может, на каникулах.
Вторая проблема — контроль. Чтобы шарик не сдулся, его надо все время надувать. Я столкнулся с тем, что ребята быстро начинают, но, самое страшное, быстро заканчивают, не доводя дело до конца. Тут без постоянного вмешательства наставника никак, надо напоминать, тянуть за руку, просить результаты. Повторюсь, проект должен быть разделен на малые части, пусть ребята что-то делают дома и присылают результаты или складывают в общий репозиторий.
И третья проблема — что дальше? Создайте сайт проекта, постарайтесь сделать так, чтобы на него обратили внимание, попробуйте доделать проект до конца. Сам, честно говоря, почти все проекты складывал в стол, решая только сиюминутные задачи и не развивая дальше. Вот написал эти строчки и решил к некоторым историям вернуться, может, они выльются во что-то большее.
Проектная деятельность — эффективнейший инструмент изучения нового, помимо уроков. Проект может помочь выявить скрытые таланты у детей. Кто-то научится публично выступать и защищаться, кто-то программировать, кто-то создавать графику, а кто-то станет в дальнейшем менеджером проектов. Побольше нам удачных и интересных проектов!
Создание Web-сайта на языке HTML. Учебное пособие
В примерной программе по информатике и ИКТ на тему “Коммуникационные технологии” отводится всего 12 часов и предлагается создать Web-страничку с использованием шаблонов. На тему “Мультимедийные технологии” выделяется 8 часов, но если в образовательном учреждении информатика изучается на пропедевтическом уровне уже в 5, 6 и 7 классах, то целесообразно перенести изучение мультимедийных технологий в пропедевтический курс и тогда можно увеличить время на изучение коммуникационных технологий, а точнее, можно добавить тему “Создание Web-сайтов на языке HTML” в 8 классе.
Освоение технологии создания сайтов рекомендуется начать с языка разметки гипертекста HTML в программе Блокнот, что является первоосновой в данном направлении. Конечно, за 8 часов невозможно изучить весь язык HTML, но можно показать назначение и применение основных тегов языка. Если ученик заинтересуется технологией создания сайтов, то сможет продолжить изучение материала самостоятельно или на соответствующих курсах, кружках или факультативах.
Представленное методическое пособие прошло неоднократную опрабацию в 8-х классах гимназии №441 Фрунзенского р-на Санкт-Петербурга и включает материал для проведения теоретических и практических занятий, выполнение которых сначала демонстрируется через проектор, а затем учащиеся выполняют самостоятельно на компьютере, используя раздаточный материал к уроку.
Для учащихся, которые бысторо выполнили запланированную работу на уроке предусмотрены дополнительные задания.
Эффективно осваивается материал, когда учащиеся вместе с учителем выполняют общий проект, например, по теме из истории Санк-Петербурга “Драматические театры Санкт-Петербурга”, а затем в качестве итоговой работы создают собственный небольшой проект, используя в качестве шаблона сайт, созданный совместно с учителем.
В качестве зачетной работы ученики отвечают на вопросы теста на знание тегов HTML и представляют созданный самостоятельно сайт.
Основные цели обучения: формирование познавательного интереса, развитие интеллектуальных и творческих способностей в области Web-технологий.
Урок 1
1. Общие сведения о Web-сайтах и языке HTML
Публикации во Всемирной паутине (World Wide Web) реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвящённую какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц, объединённых гиперссылками. Web-страницы могут содержать текст, рисунки, таблицы, мультимедийные и динамические объекты. Создание Web-сайтов можно осуществлять с помощью языка HTML.
HTML – Hyper Text Markup Language — язык разметки гипертекста. HTML ни в коей мере не является языком программирования, он отвечает только за расположение элементов (текста, рисунков) в окне браузера. HTML является языком для создания Web-сайтов во Всемирной паутине. Язык HTML состоит из простых команд – тегов. Теги управляют представлением информации на экране при отображении HTML-документа. Теги заключаются в угловые скобки <>… и бывают парные и непарные (одиночные <>).
Браузер – (browser) – программа для просмотра Web-страниц. Широко используют бразеры Microsoft Internet Explorer, Opera и др. Браузер при получении документа HTML выполняет его анализ, строит объектную модель документа, затем результат отображает на мониторе.
2. Структура HTML-документа
Записываются meta-теги, содержащие информацию о названии страницы, об авторе и др.
Содержит непосредственно информацию страницы: тексты, рисунки, таблицы
3. Форматирование символов
Символы, заключенные между следующими тегами отображают:
Текст, заключенный между тегами …….. имеет заданный размер, цвет и гарнитуру. Для этого используются атрибуты: SIZE = значение от 1 до 7 и COLOR = цвет (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white), каждому цвету соответствует свой шестнадцатеричный код от 000000 до FFFFFF.
Одиночный тег разрывает текстовый поток и вставляет пустую строку. Несколько таких тегов добавляют несколько пустых строк. Межстрочный интервал – одинарный.
4. Практическое задание №1.
Создание первого HTML-документа “Драматические театры Санкт-Петербурга”, работа со шрифтами, задание цвета и размера шрифта. Освоение технологии работы.
Урок №2
1. Форматирование текста по абзацам
— начинает абзац с новой строки. Новый абзац отделяется от предыдущего двойным межстрочным интервалом.
Выравнивание текста по абзацам:
2. Задание цвета всего текста и фона документа
Описываются в начальном теге тела документа
3. Заголовки разных уровней
Тегами …. оформляют заключенный в них текст. Значения n меняются от 1 до 6, при этом текст выводится от более крупного к более мелкому. Теги …. могут иметь атрибуты ALIGN=CENTER, LEFT, RIGHT.
Часть текста, которая будет оформляться как список, заключается в соответствующие теги, а каждый элемент списка помечается одиночным тегом
Виды нумераций списков:
5. Практичекое задание №2
Форматирование текста по абзацам, цвет фона, заголовки разных уровней, списки.
Урок №3
1. Вставка графических изображений
Всеми браузерами поддерживаются форматы .gif, .jpg. Эти форматы являются растровыми. GIF – поддерживается прозрачность и анимацияю, хорошо подходит для рисованных изображений. JPG – для полноцветных изображений, хорошо подходит для отсканированных изображений и фотографий, анимацию не поддерживает.
Одиночный тег вставляет графические изображения в текстовый поток в любом месте:
Необязательные атрибуты тега :
BORDER = толщина обрамляющей рамки в пикс., 0 нет рамки
HEIGHT = высота изображения в пикселах или %
WIDTH = ширина изображения в пикселах или %
HSPACE = свободное пространство слева и справа от изображения в пикселах или %
VSPACE =- свободное пространство сверху и снизу от изображения в пикселах или %
ALIGN = left, right, middle выравнивание изображения
Чтобы рисунок был по центру, можно использовать тег ……. /
2. Практическое задание №3
Вставка и форматирование графических изображений. Самостятельное создание Web-страниц драматических театров.
Урок №4
Рисунок так же можно сделать, как гиперссылку, написав:
2. Практическое задание №4
Оформление списка театров на главной странице glavn.htm, как гиперссылки на соотвествующие Web-страницы театров.
Урок №5
Используют не только для того, чтобы располагать данные в ячейках, сколько с целью позицирования фрагментов текста и изображений друг относительно друга.
С помощью таблиц удобно создавать навигацию по сайту.
Пример таблицы из двух строк (рядов), содержащих по две ячейки:
текст ячейки 1,1 текст ячейки 1,2
первая строка
текст 2,1 ячейки текст 2,2 ячейки
вторая строка
Ячейки таблицы могут содержать текст или изображения, а также текст с HTML-тегами и гиперссылки. Не следует оставлять ячейки таблицы незаполненными, надо поместить хотя бы неразрывный пробел
HSPACE=значение – свободное пространство слева и справа от таблицы в пикселах (
)
WIDTH=значение – ширина таблицы (ячейки) – в пикселах, или в процентах (
,
)
HEIGHT= значение – высоты таблицы (ячейки, строки) – в пикселах, или в процентах (
,
,
)
BORDER= значение – толщина рамки вокруг таблицы и ее ячеек, по умолчанию значение=1, если значение=0, то рамки нет (
,
)
BORDECOLOR=’цвет’ – цет рамки (
VALIGH=bottom, middle, top – выравнивание содержимого по вертикали (
,
)
2. Практичекое задание №5
Создание навигации по сайту в форме таблицы из одной строки
Уроки №6 и №7
В секции заголовка обычно помещается и ряд тегов с различными атрибутами, предоставляющими дополнительную информацию (метаинформацию) о Web-сайте:
(указывается через запятую набор ключевых слов, которые могут быть использованы рядом поисковых систем)
2. Самостоятельная работа над своим проектом
Примерные темы проекта: “Мосты через Неву”, “Реки и каналы Санкт-Петербурга”, “Мосты через каналы Санкт-Петербурга”, “Необычные музеи Санкт-Петербурга”, “Музыкальные театры”, “Филармонии и капелла”, “Технические ВУЗ-ы Санкт-Петербурга”, “Детские театры Санкт-Петербурга”, “Гуманитарные ВУЗ-ы Санкт-Петербурга”, “Пригороды Санкт-Петербурга”, “Музеи Санкт-Петербурга”, “Военные учебные заведения в Санкт-Петербурге” и др.
Урок №8
1. Контрольный тест на знание тегов HTML – 15 минут.
2. Рефлексия. Представление проекта и оценивание его учениками класса и учителем – 30 минут.
Вопросы контрольного теста – Приложение 2.
Литература для учителя
Литература для ученика
Проектная работа по информатике «Создание сайта на бесплатном хостинге»
Ищем педагогов в команду «Инфоурок»
Муниципальное Общеобразовательное Учреждение «Киришский лицей»
Тема: Создание сайта на хостинге «hostinger.ru»
Ученика 7 «А» класса
МОУ «Киришский лицей»
Козочкина Дарья Александровна
Оглавление
Введение
Для самостоятельного создания сайта вам необходимо знать язык программирования, обладать определенными навыками управления базами данных, овладеть массой других технических знаний, необходимых для успешной разработки сайта. Тогда вы сможете получить отличный веб-проект, который порадует своих гостей множеством функций и возможностей, а также будет соответствовать всем современным стандартам сайтостроения.
Грамотно разработанный сайт — это успешный сайт.
В своем проекте мы покажем, как можно без особых усилий и знаний создать персональный сайт.
Узнать что такое сайт.
Познакомится с видами сайтов.
Выяснить этапы создания сайта.
Основным источником литературы является сайт wikipedia.org
Глава 1. Что такое сайт
1.1. Определение сайта
Сайт (от англ. website : web — «паутина, сеть» и site — «место», буквально «место, сегмент, часть в сети») — система электронных документов (файлов данных и кода) частного лица или организации в компьютерной сети под общим адресом (доменным именем или IP-адресом)
Все сайты в совокупности составляют Всемирную паутину, где коммуникация (паутина) объединяет сегменты информации мирового сообщества в единое целое — базу данных и коммуникации планетарного масштаба. Для прямого доступа клиентов к сайтам на серверах был специально разработан протокол HTTP.
В наше время создание сайта актуальная тема сайт используют все компании, фирмы, кинотеатры, государство.
На сайт можно выкладывать: файлы, текстовые документы, приложения и т.д.
1.2. Виды сайтов:
Персональные сайты или персональные страницы
Официальные сайты компаний
Персональные сайты или персональные страницы Персональный сайт – это сайт, с содержанием, описывающим сферу интересов какого-либо человека. Обычно он создается самим владельцем с целью заявить о себе, найти друзей, единомышленников, людей со схожими взглядами и т.д.
Объем такого сайта не большой и часто ограничивается одной страницей (отсюда и название «персональная страница»).
Дизайн сайта, чаще всего сложный, подчеркивающий индивидуальность автора.
Личный блог (от англ. blog, weblog) – это web-сайт, основное содержимое которого – регулярно добавляемые записи (посты), содержащие текст, изображения, мультимедиа. Для блогов характерны недлинные записи временной значимости, отсортированные в обратном хронологическом порядке и предлагаемые к обсуждению сторонними читателями, посредством комментариев.
Блоги могут содержать несколько страниц. Их число зависит от активности автора и иногда оно может быть достаточно большим.
Структура блога всегда проста и понятна.
Дизайн блога, чаще всего, сложный, соответствующий тематике блога, иногда подчеркивающий индивидуальность его автора.
Сайты-визитки Сайт-визитка – это наиболее распространенный вид сайтов. Его название говорит само за себя. По сути, сайт-визитка – это электронный аналог традиционной бумажной визитки. Основное назначение сайта – представить своего владельца (реализуемые им товары, предоставляемые услуги) и дать максимум сведений необходимых для контакта с ним – адрес, телефоны, e-mail и т.п.
Ввиду небольшого объема размещаемой на сайте информации, структура сайта-визитки всегда проста и понятна. Традиционно сайт-визитка состоит из 3–5-и страниц и не содержит дополнительных разделов и многоуровневых меню.
Несмотря на простоту и дешевизну данного проекта, сайт-визитка – это отличный старт для начала любой коммерческой деятельность.
Сайты-галереи Сайт-галерея – это, прежде всего, интернет-выставка каких-либо собственноручно выполненных работ. Он может быть полезен дизайнеру, художнику, фотографу, мастеру или группе какого-либо прикладного творчества – любому автору стремящемуся заявить о себе, а также, пытающемуся найти клиентов, заказчиков, покупателей на свои произведения.
Структурно и по части дизайна сайт-галерея очень схож сайтом-визиткой. Он, так же как и сайт-визитка, состоит из небольшого количества страниц и не содержит многоуровневые меню. Графический дизайн сайта-галереи, так же как и графический дизайн сайта-визитки может изменяться в очень широком диапазоне – от самого простого, до весьма сложного, эксклюзивного.
Главной отличительной чертой сайта-галереи от сайта-визитки является наличие встроенной в него фотогалереи.
Официальные сайты компаний (организаций) Официальный сайт компании – это представительство компании в глобальной сети, место публикации всех новостей и информации, которую руководство компании хочет донести до общественности.
Отличительной чертой официального сайта является его официальный статус. Таким образом, посетитель сайта может ссылаться на информацию, размещенную на нем, как на достоверно известный факт, отражающий суть происходящего.
В сравнении с сайтом-визиткой – официальный сайт имеет больший объём (до 10-20 страниц) и содержит более подробную информацию о товарах и услугах.
Дизайн официального сайта чаще всего сдержан, но, не смотря на это, наличие в сети Интернет официального сайта, даёт его владельцу ряд конкурентных преимуществ.
Тематический сайт – это web-ресурс посвященный какой-то одной теме.
Обычно, тематический сайт – это достаточно большой виртуальный массив информации, своего рода, специализированный тематический журнал, в котором авторы сайта рассматривают избранную ими тему достаточно подробно и разносторонне.
Объем тематического сайта – от 20 страниц и более (чем больше, тем лучше).
В зависимости от объема, структура сайта может быть как простой, так и достаточно сложной. На сайте может содержаться несколько разделов, могут быть многоуровневые меню, а так же может быть установлено большое количество разных компонентов и модулей. Часто на таком сайте присутствует форум.
При разработке тематического сайта основной упор делается на удобство поиска и вывода материалов. Формат материалов может быть любой: простой текст, изображения, видео, аудио и т.д.
Дизайн сайта не ограничивается какими-то рамками и может быть как очень простым, так и эксклюзивным.
Сайты-каталоги (или сайты-витринаы)
Сайт-каталог – это удобное средство информирования потенциальных покупателей и партнеров компании обо всех предлагаемых ей товарах. Сайты этого вида схожи с сайтами-визитками, но помимо стандартных составляющих сайта-визитки они содержат еще и встроенный каталог, число страниц которого может быть от нескольких десятков до нескольких сотен и даже тысяч. На страницах данного каталога размещаются подробные описания товаров с фотографиями, техническими характеристиками и другой полезной информацией. Часто в каталоге публикуется стоимость товаров. Помимо встроенного каталога, для сайтов подобного вида является обязательным наличие компонента скачивания прайс-листов. Установка данного компонента позволит посетителям сайта делать заказ выбранных товаров с помощью электронной почты.
Структура сайта-каталога сложная. Кроме уже названных обязательных компонентов каталога и скачивания прайс-листов, в структуру сайтов подобного виды могут быть включены так же и некоторые другие компоненты и модули. На этот счет нет жестких правил и здесь все зависит от потребности в них и желания заказчика сайта. В общем виде, структура сайта-каталога может быть следующее:
каталог товаров (или услуг);
компонент скачивания прайс-листов;
контактные данные (адрес офиса, телефон, адрес электронной почты).
Дизайн сайта не имеет строго определённых рамок, он может быть и простым и сложным – здесь так же все зависит только от пожеланий заказчика.
Сайты Интернет-магазины Сайт Интернет-магазин – это современный торговый канал, дающий возможность реализовывать товары через Интернет. Как по части презентационных возможностей, так и в том, что касается удобства работы с товарным ассортиментом – Интернет-магазин является полнофункциональным магазином, с той лишь разницей, что его «витрина» расположена в Интернете.
Сайт-магазин обычно имеет достаточно большой объем (несколько десятков страниц) и сложную структуру. Как правило, на сайте представлен каталог товаров с их подробным описанием, условиями поставки и ценами. От прочих сайтов, сайт интернет-магазин главным образом отличается программными модулями, позволяющими автоматизировать процесс купли-продажи через Интернет.
Дизайн сайта-магазина может быть весьма разнообразным и изменяться в очень широком диапазоне – от весьма простого и сдержанного, до сложного, изысканного и утончённого, хотя, на этот счет, все же существует мнение, что для сайта интернет-магазина более предпочтительным является простой дизайн. Именно такой дизайн имеют все широко известные сегодня и успешные сайты подобного вида.
Промо-сайты Промо-сайт – это почти всегда неосновной сайт компании – сайт, который создается специально для продвижения какого-либо товара (группы товаров) или услуги. Промо-сайт – это, прежде всего, рекламный инструмент. Его можно сравнить с рекламным проспектом, цель которого – максимально подчеркнуть достоинства того или иного товара (услуги), привлечь клиентов и стимулировать их сделать какие-то действия: купить товар, заказать услугу, принять участие в акции, др.
Объём промо-сайта обычно не превышает 5–10 страниц – этого вполне достаточно, чтобы сайт прекрасно выполнял возложенные на него функции.
Структура промо-сайта определена его задачами. В большинстве случаев она очень простая и не разветвлённая. В общем виде, она может включать в себя:
описание продвигаемых товаров (услуги);
контактные данные: телефон, адрес офиса, адрес электронной почты.
Внешний вид промо-сайта должен быть стильным, ярким и запоминающимся. В ходе его изготовления, как правило, широко используется объемная графика, эксклюзивный дизайн и флэш анимация.
Новостной сайт – это мощный, информационный ресурс, посвященный новостям из какой-либо области. Это могут быть как новости политики, науки, культуры, или спорта, так и новинки сферы высоких технологий, моды и даже новые кулинарные рецепты. По своей сути, новостной сайт схож с телевизионными выпусками новостей. Его основное назначение – как можно быстрее доносить до пользователя свежую информацию, поэтому новости на сайте должны постоянно обновляться, в противном случае, смысл в них теряется. Новостной сайт – это так же и мощный рекламный инструмент, расположенный в глобальной сети. При грамотном администрировании он, за счет расположенной на нем рекламы, может принести своему владельцу ощутимую прибыль.
Объем новостного сайта всегда большой. За счет постоянно обновляемого контента, такой сайт может разрастаться до нескольких сотен, иногда тысяч, страниц.
Структура новостных сайтов в большинстве случаев сложная. Как правило, такие сайты содержат по несколько разделов и подразделов, сложные многоуровневые меню, большое количество компонентов и модулей, могут иметь форум.
Графический дизайн новостного сайта не должен содержать излишеств. Традиционно он всегда простой.
Корпоративный сайт – это фирменный коммерческий сайт компаний. Солидное интернет-представительство компании. Оптимальное решение для всех компаний, которые хотят стать лидерами в своей сфере бизнеса.
Объём корпоративного сайта, как правило, большой – сайт может содержать до сотни страниц.
Структура сайта, чаще всего, сложная, со сложно переплетённой многоуровневой иерархией логически описывающей бизнес-процессы компании. В ограниченном пространстве страниц сайта умещаются: многоуровневые меню; тексты, содержащие полную информацию о компании, продукции и услугах, событиях в жизни компании; таблицы; формы поиска; информационные блоки; различные компоненты и модули. Также, сайт может быть интегрирован с внутренними информационными системами компании на нем могут содержаться корпоративные форумы и закрытые разделы для тех или иных групп пользователей – сотрудников, дилеров, контрагентов и пр.
Такие сайты включают в себя:
информацию о компании (историю, новости, вакансии и т.д.);
деловую и полезную информацию (статьи, обзоры, советы, вопросы-ответы, др.);
каталоги товаров, услуг, их описания, др.;
раздел для клиентов, партнеров, посетителей;
закрытую часть для разных групп сотрудников (персональные разделы, личные кабинеты);
контактные данные и форму обратной связи.
Внешний вид корпоративного сайта, как правило, соответствует корпоративному стилю компании. При создании такого сайта используются фирменные цвета и шрифты. Часто при создании дизайна сайта отталкиваются от логотипа компании.
Сайты-порталы Сайт-портал – это наиболее мощный и самый сложный вид сетевого ресурса, который может быть посвящен как одной теме, так и нескольким. Благодаря обширному информационному содержанию сайтов-порталов, они интересны не только посетителям, но и поисковым системам, которые в последнее время все большее значение уделяют контенту.
Объём сайта-портала может составлять сотни и тысячи страниц.
Структура сайта-портала всегда сложная. Как правило, сайты данного вида содержат много разных разделов и подразделов, меню с многоуровневой вложенностью, включает в себя большое количество разного рода опций и модулей. Вообще, сложность структуры сайта в большой степени зависит от тематики сайта и целей, которые ставят перед собой заказчики. Однако, при создании портала, всегда следует помнить о том, что его основной задачей является предоставление информации. В этой связи, web-разработчик должен стремиться к созданию такой структуры сайта, которая была бы максимально удобна для пользователя.
Внешний вид сайта-портала обычно в меру сдержан. Объемная графика, о которой мы говорили в случае промо-сайта, теряет свой смысл – на первый план выходит графический минимализм.
Сайты порталы очень популярны в сети Интернет, однако изготовление сайта-портала – это достаточно трудоёмкая задача, которая требует много времени и привлечения к работе специалистов разных направлений.
Контент-проекты Контент-проект – это сайт, который представляет собой обширное собрание каких-либо тематических материалов – книг, статей, аудио и видео файлов, др.
Основная задача такого сайта – привлечь посетителей интересующихся определенной тематикой и перенаправить их на сайты партнеров. При условии размещения на сайте контент-проекте подходящих ссылок на сайты партнеров, он дает достаточно качественный трафик, а значит и конвертацию посетителей в покупателей.
Контент-проект выполняется в виде интернет-библиотеки (аудио или видеотеки), энциклопедии, справочника. В этом его отличие от простого тематического сайта.
Объем сайта, как правило, достаточно большой. Он может содержать несколько десятков и сотен страниц.
Структура сайта, чаще всего, сложная. Сайт обычно содержит несколько разделов, на нем могут применяться многоуровневые меню.
Во внешнем виде сайты контент-проекты не допускают излишеств, их графический дизайн, по возможности, должен быть простым.
1.3. Устройство сайта
Страницы сайтов — это набор текстовых файлов, размеченных на языке HTML. Эти файлы, будучи загруженными посетителем на его компьютер, понимаются и обрабатываются браузером и выводятся на средство отображения пользователя (монитор, экран КПК, принтер или синтезатор речи). Язык HTML позволяет форматировать текст, различать в нём функциональные элементы, создаватьгипертекстовые ссылки ( гиперссылки ) и вставлять в отображаемую страницу изображения, звукозаписи и другие мультимедийные элементы. Отображение страницы можно изменить добавлением стилей на языке CSS, что позволяет централизовать в определенном файле все элементы форматирования (размер и цвет заглавных букв 2-го уровня, размер и вид блока вставки и другое) или сценариев на языке JavaScript, с помощью которого имеется возможность просматривать страницы с событиями или действиями.
Страницы сайтов могут быть простым статичным набором файлов или создаваться специальной компьютерной программой на сервере. Она может быть либо сделана на заказ для отдельного сайта, либо быть готовым продуктом, рассчитанным на некоторый класс сайтов. Некоторые из них могут обеспечить владельцу сайта возможность гибкой настройки структурирования и вывода информации на веб-сайте. Такие управляющие программы называются системами управления содержимым (CMS).
Сайты могут содержать подразделы, ориентированные целиком на ту или иную аудиторию. В этом случае такие разделы называют версиями сайта. Аудитория может различаться по виду используемого оборудования, по используемому языку аудитории. К примеру, известны так называемые мобильные версии сайта, предназначенные для работы с ними с использованием смартфона. Сайты могут иметь языковые версии (русскоязычная, англоязычная и другие).
1.4. Технологические особенности сайтов
По технологическим особенностям создания и отображения сайты различаются:
По технологии отображения
Статические — состоящие из статичных html (htm, dhtml) страниц, составляющих единое целое. Пользователю выдаются файлы в том виде, в котором они хранятся на сервере.
Динамические — состоящие из динамичных html (htm, dhtml) страниц-шаблонов, информации, скриптов и прочего в виде отдельных файлов. Содержимое генерируется по запросу специальными скриптами (программами) на основе других данных из любого источника
Сайты, созданные с применением т. н. Flash-технологий, когда весь сайт располагается на одной веб-странице, предназначенной исключительно для загрузки Flash-файла, а вся навигация и контент реализованы в самом Flash-ролике.
Изготовление сайтов как работающих целостных информационных ресурсов и систем — составной процесс, вовлекающий труд различных специалистов. Этот вид деятельности называется веб-разработка. Владельцы будущего сайта (частные лица или организации) разрабатывают сайты своими силами, либо обращаются к специализированным разработчикам. Отношения между заказчиком и исполнителем регулируется с помощью договоров, технических заданий, специальных систем (различных сайтов, выступающих посредником между заказчиком и фрилансерами), либо устной договорённостью. Заказанная работа может представлять собой как полный комплекс создания сайта, вплоть до придумывания названия и регистрации домена, так и расширение сайта, техническую оптимизацию и редизайн. Всё больше разработка и сопровождение сайта (портала) становится мощным сегментом активов предприятий (организаций). Поэтому разработчиков предпочитают штатных или поручают проект вести одному из директоров аппарата управления (коммерческий директор, директор департамента по связям или непосредственно руководителю проекта с группой штатных специалистов и/или совместителей). Особую роль выполняют «тестеры» конечного продукта. Это ответственная роль в продвижении и оценке проекта, так как стадия разработки для динамического большого проекта никогда не прекращается. Если вы видите сайт 2-3 года без изменений, то он, возможно, никому не нужен, либо пользуется спросом на базисную информацию. Но сопровождение проекта становится не менее ответственным делом. По этой причине создание и продвижение сайта приводит к активной и прибыльной работе проекта. Ведь главная задача создания сайта есть прибыль.
