Оформление веб-ресурсов Единой информационной среды кафедры




НазваОформление веб-ресурсов Единой информационной среды кафедры
Дата канвертавання04.02.2013
Памер86.39 Kb.
ТыпДокументы
Московский Государственный Институт Математики и Электроники

Оформление веб-ресурсов

Единой информационной среды кафедры

2008

Введение

Проект большой и имеет в себе несколько частей. Выполняется изначально силами двух студентов на практике 1 курса. В задачи входит:

  1. Выявление недостатков существующего дизайна ресурсов кафедры.

  2. Разработка дизайна для нового сайта кафедры.

  3. Осознание новой структуры веб-ресурсов (замена некоторых старых сайтов новым, объединенным).

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

  5. По итогам проекта ожидается наличие отчета, включающего описания всех рассмотренных ресурсов с обоснованиями и пояснениями. Цель этого описания -- изложить идею и дать последующим авторам подробные и доходчивые инструкции к выполнению данной работы. В практической реализации требуется: иметь полные комплекты электронной верстки страниц (в нарезке и, по мере возможности, в коде). Логичным окончанием проекта может являться внедрение наработок на сайтах. Исходя из этих ожиданий формируется итоговая оценка работы по "практической" части. Теоретическая обоснованность и эстетическая ценность и завершенность формируют оценку теоретической части.

  6. Работы по проекту ведутся на отдельной странице (и связанных с ней) -- "Разработка дизайна веб-ресурсов ЕИС". Просьба подписывать свои части работы. На персональных страницах пишутся логи -- что сделано и когда. Здесь же получаете отзывы. Обсуждение проекта -- на его странице "обсуждение".



Общие пожелания

  1. «Легкий» дизайн.

  2. «Резиновая» верстка на div:

    1. идеальное отображение сайта в 1024 x 768, 1280 x 800, 1280 x 1024;

    2. приемлемое отображение сайта в 1600 x 1200 (без больших пробелов);

    3. идеальное отображение сайта при увеличении и уменьшении шрифта на один пункт;

    4. приемлемое отображение сайта при увеличении и уменьшении шрифта на два пункта.

  3. Максимальная интеграция близких по тематике компонентов (ссылками, через RSS, баннерами).


Главная страница

  1. Блок новостей (с информацией о событиях в ближайшие дни).

  2. Блок с «календарем» (формат отображения — на усмотрение) (+ ссылки на новости и т.п., если таковые есть):

    1. Дни рождения студентов, аспирантов, преподавателей, сотрудников, выпускников кафедры.

    2. Заседания кафедры.

    3. Даты сдачи тезисов на конференции.

    4. Даты мероприятий от Профкома.

    5. Даты видеоэфиров.

    6. ...

  3. Блок со случайной фотографией из галереи.

  4. Блок со случайной цитатой (с ссылками/кнопками «все цитаты», «добавить»).

  5. Блок из 3 случайных элементов витрины.

  6. Список Web-ресурсов кафедры (в формате выпадающего списка, как сейчас сверху; «окультурить»!).

  7. Личный кабинет: форма входа (логин/пароль) или блок с информацией из профиля (если пользователь авторизован).

  8. Баннер видеоэфира (который пройдет в ближайшее время либо недавно состоялся).

  9. Поиск по сайту (поле с кнопкой).


Структура меню

  1. Кафедра.

    1. История.

    2. Состав.

    3. Абитуриентам.

    4. Студентам.

    5. Контакты.

  2. Деятельность:

    1. Витрина.

    2. Наука.

    3. Журнал.

    4. Видео.

  3. Ресурсы.



Витрина — сборник законченных продуктов, созданных на кафедре ИКТ. Включает в себя:

  1. Web-проекты (в том числе и для внутреннего использования).

  2. Видеоработы (любые ролики: сделанные как «для себя», так и по заказу).

  3. Журнал «Аудитория».

  4. Аппаратные решения.

  5. Программные решения.


Для каждого элемента витрины задаётся категория, делается характеризующее его изображение, составляется описание и (по возможности) приводится ссылка на подробности/сам продукт.
Помимо того, что случайные элементы витрины выводятся на главной (и других) странице(ах) сайта, необходим отдельный рубрикатор для просмотра всего каталога продуктов.
Пример правильной витрины: http://www.artlebedev.ru/everything/id/.


Выявление недостатков текущего дизайна кафедры.

Начать стоит с того, что на данный момент как графический, так и структурный (?) дизайн ЕИС практически

отсутствует. Для примера, как сейчас выглядят некоторые страницы:




Auditory.ru | Главная страница

auditory.jpg



Форум

forum.jpg


База знаний |Вики

wiki.jpg

Фото-галерея

gallery.jpg



Недостатки графического дизайна.

  • Отсутствие единого стилевого оформления всех ресурсов кафедры;

  • Неудобная, сбивающая с толку навигация;

  • Наличие ненужных/неработающих элементов/функций (таких как неработающая смена «skin»’а на главной, случайное фото и тд)

  • Нелогичная разметка главной страницы (~ 60% занимают второстепенные описания к ресурсам кафедры и лишь ~ 20% - новости)

Концепция.

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

Что для этого нужно? По сути всего две вещи: динамичный (?) контент и дружественный интерфейс.

Контент это новости, фотографии, видео, цитаты, дни рождения, рассылки, объекты витрины, события. Для пользователя будет удобно, если зайдя на одну страницу он сможет сразу узнать о последних обновлениях на разных ресурсах, о новых событиях, а также информацию касающуюся учебного процесса (расписание занятий, свои задолженности, текущие проекты, сроки их сдачи и тд). У нас такой страницей будет auditory.ru, должен получится своеобразный портал, с которого пользователь сможет переместиться в любое интересное ему место.


Главная страница.

Эскизы главной страницы.

Для не авторизованных пользователей:

glavnay_non_autorith.jpg

Для авторизованных пользователей:

glavnay_autorith.jpg


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

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

Итак, список того, что мы хотим видеть на этой странице:

  1. Новости

  2. Календарь событий

  3. Информацию о ближайших днях рождения

  4. Индивидуальная учебная информация + ссылка на пользовательские настройки

  5. Случайные цитаты

  6. Превью трех элементов витрины

  7. Превью трех фотографий

  8. Поиск (быстрый и расширенный)

  9. Для не авторизованных (абитуриенты): заметные ссылки на информацию о кафедре и ее деятельности

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

Рассмотрим по порядку все элементы эскиза.

Навигация.

На этой странице навигация имеет следующую структуру:

  1. О кафедре

    • История

    • Состав

    • Абитуриенту

    • Контакты

  1. Деятельность

    • Витрина

    • Наука

    • Журнал

    • Видео

  2. Ресурсы

    • auditory.ru

    • bug-tracking

    • wi-fi @ миэм

    • база знаний

    • библиотека

    • видео и телевидение

    • дни рождения

    • личный кабинет

    • новости

    • подписка MSDN

    • почта

    • файловое хранилище

    • форум

    • фотогалерея

    • хостинг картинок

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

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

icons.jpg

Для студентов это меню также доступно, но переносится на правую панель, по умолчанию вкладка с этим меню закрыта.

Такое разделение меню верхнюю область страницы, туда очень удобно вставить меню «ресурсы», делаем это так как сделал Google: выносим четыре наиболее популярных пункта в строку, остальные открываются в выпадающем списке «Ещё».

menu.jpg

Авторизация.

В этой же строке размещаем быстрый поиск и авторизацию.

Для экономии места и осуществляем авторизацию подобно тому как это делается на habrahabr.ru, появляется окошко для авторизации, не требующее места на самой странице.

autor.jpg

Дни рождения

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

Календарь

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

При желании пользователь может «развернуть» календарь, то есть увеличить его площадь в два раза и работать с более функциональным его вариантом. Как аналог можно рассмотреть календарь на vkontakte.rucall.jpg

Новости.

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

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

comm.jpg

«Интересный» блок

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

Блок работает как телефон слайдер ^__^: интересную информацию можно посмотреть, неинтересную свернуть.

Этот блок можно дополнять, можно что-то убирать. На начальном этапе здесь будет «Расширенный поиск», учебная информация, «случайная цитата», «Витрина» с тремя элементами и их названиями, при клике переносящая нас на страницу элемента, «Фотогалерея» с тремя случайными фотографиями, аналогичная витрине, «Видео» точно также. Плюс для авторизованных пользователей вкладка с информацией о кафедре.

Футер

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

Страница новости.

Здесь будет эскиз

Страница дней рождения.

Здесь будет эскиз

Страница абитуриентам.

Здесь будет эскиз

Резина.

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



Дадаць дакумент у свой блог ці на сайт

Падобныя:

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

Оформление веб-ресурсов Единой информационной среды кафедры iconМинистерство природных ресурсов и охраны окружающей среды республики беларусь постановление
Положения о Министерстве природных ресурсов и охраны окружающей среды Республики Беларусь, утвержденного постановлением Совета Министров...

Оформление веб-ресурсов Единой информационной среды кафедры icon"Создание единой системы отраслевых требований по проектированию доступной для инвалидов среды жизнедеятельности"
Формирование доступной для инвалидов среды жизнедеятельности". Настоящий Свод правил разработан в соответствии с государственным...

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

Оформление веб-ресурсов Единой информационной среды кафедры icon"Создание единой системы отраслевых требований по проектированию доступной для инвалидов среды жизнедеятельности"
Федеральной целевой программы "Социальная поддержка инвалидов на 2000-2005 годы" в соответствии с Государственным контрактом n 1...

Оформление веб-ресурсов Единой информационной среды кафедры iconПресс-релиз минприроды ур от 12 августа 2003 года по поводу совместной пресс-конференции Министра природных ресурсов и охраны окружающей среды ур александра
Министра природных ресурсов и охраны окружающей среды ур александра Владимировича Кулагина, старшего госинспектора Государственной...

Оформление веб-ресурсов Единой информационной среды кафедры iconI. Качество природной среды и состояние природных ресурсов
Климатические наблюдения в Удмуртской Республике проводятся Удмуртским республиканским центром по гидрометеорологии и мониторингу...

Оформление веб-ресурсов Единой информационной среды кафедры iconМуниципальное общеобразовательное учреждение
«О внедрении единой региональной информационной системы «Образование» в 2009 – 2010 учебном году»

Оформление веб-ресурсов Единой информационной среды кафедры iconПостановление министерства природных ресурсов и охраны окружающей среды республики беларусь
В соответствии со статьей 11 Закона Республики Беларусь от 25 ноября 1993 г. №2609-xii "Об отходах" в редакции Закона Республики...

Оформление веб-ресурсов Единой информационной среды кафедры iconDev {web} конференция о веб-разработке 13 октября в Санкт-Петербурге пройдет конференция о веб-разработке
Они будут рассказывать о том, что хочется знать веб-разработчику сложных высоконагруженных проектов

Размесціце кнопку на сваім сайце:
be.convdocs.org


База данных защищена авторским правом ©be.convdocs.org 2012
звярнуцца да адміністрацыі
be.convdocs.org
Галоўная старонка