Антон
23 ноября 2011

Здравствуйте!

Для учёта успеваемости студентов мы ведём сводную ведомость на бумаге.

Теперь мне поставили задачу переделать её в веб-страницу. При этом встала проблема с отображением заголовков столбцов, где перечислены предметы (их может быть до 20, и названия достаточно длинные). Насколько я понял, выводить эти названия на веб-странице вертикально невозможно. Но если повернуть их горизонтально, ширина страницы превысит ширину экрана. А данную таблицу очень желательно видеть целиком, чтобы можно было оценить успеваемость конкретного студента. Поменять местами столбцы и строки тоже невозможно, количество студентов иногда превышает 30. Каким образом можно разместить информацию, чтобы она влезала в один экран (без прокрутки по горизонтали)?

Спасибо.



Антон!

Используйте понятные студентам и преподавателям сокращения для предметов:

См. также таблицы на Биатлонтайме

АПРиК фил. арх. фин. т. вер.  сети лог. КТОП БД
М Ф ИСТ инф эл. МПС ТА дискр. ИИ СПО англ.
И. Иванов 120 30 30 150 23 54 70 54 49 75 92 80 50 88 42 44 54 70 54 92
С. Петров 30 50 23 54 70 54 92 20 50 88 42 44 54 70 54 92 20 30 49 75
П. Сидоров 60 30 30 15 23 54 70 54 49 75 92 12 50 88 42 44 54 70 54 92
С. Козлов 30 120 79 54 70 54 92 100 50 88 42 44 54 70 54 92 12 30 49 75
И. Иванов 120 30 30 25 23 54 70 54 49 75 92 15 50 88 42 44 54 70 54 92
И. Симонов 12 15 23 54 70 54 92 10 50 88 42 44 54 70 54 92 60 30 49 75

P. S. Я веду практический курс «Пользовательский интерфейс и представление информации». Дата следующего курса пока неизвестна.

 
Мы напишем вам, когда будет открыта запись. Без спама.

Поделиться

Комментарии

Кирилл Латинский
23 ноября 2011

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

Евгений Волков
23 ноября 2011

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

Больше 20 предметов и больше 30 студентов — это больше 600 значений, которые вы хотите уместить в одном месте.

Так вот, чтобы оценить какие-то значения по шкале, лучше всего подойдёт гистограмма, а раз мы в вебе, то контент становится динамическим. Можно выбирать по какому предмету или студенту показать график (решать, какая шкала будет постоянной, — дело автора. Я бы менял предмет, а студентов оставлял в одном порядке, а при нажатии на студента, выдавал бы всю его статистику по всем предметам, см. рисунок). Предметы можно группировать по алфавиту, раз их много.

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

Денис Соколов
23 ноября 2011

Повернуть боком, хотя в данном случае и не стоит (читать это очень неудобно), в интернете уже почти можно:
http://caniuse.com/#search=rotat

Сергей Сыркин
24 ноября 2011

Вертикальный текст c помощью ЦСС:

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);

Дмитрий Олляк
23 ноября 2011

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

А ещё я бы покопал в сторону наклонного расположения заголовков (тот же transform:rotate с дополнительными мучениями по позиционированию элементов). Мне это кажется удобным:

Артём Таныгин
23 ноября 2011

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

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

Лузеры
Иванов (теормех 35%, математика 25%)
Сидоров (философия 15%)

Молодцы
Николаев, Левинзон, Карамболов (ср. балл 82%)

Ср балл группы без учета лузеров и молодцов 71%.

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

Во втором режиме надо выводить данные по предметам:

Проблемы
Математика (ср. балл 64%)
Философия (ср. балл 54%)

Нет проблем
Теормех (ср. балл 82%)
Физкультура (ср. балл 90%)

По 14 предметам средний балл группы 74%. Успеваемость группы хорошая.

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

А ещё можно всё красиво визуализировать. Хотя даже лучше будет, если система сама сделает выводы и отправит уведомления с нужными данными определённым людям, ответственным за эти параметры (старостам, преподавателям, деканам, ректору).

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

Александр Каленюк
23 ноября 2011

Илья! Боюсь, что не для каждого предмета можно найти понятное студентам и преподавателям сокращение.

Я, например, веду курс, который на языке бюрократов называется: «Основы программирования и создания программных продуктов». Естественно, никто в жизни его так не называет; в расписании пишется что-то вроде «осн. прогр. и ПП», студенты называют его «Каленюк», я — «Шарп» или «бывший первый семестр Гайдаржи». Для сводной ведомости лучше всего подойдёт, наверное, сокр. с расписания, но для горизонтального размещения оно всё равно великовато, а сокращать его дальше некуда. А то так и до объектного проектирования недалеко. И таких предметов, особенно ближе к старшим курсам, становится до неприличия много. Таблица рискует стать и широкой и непонятной одновременно.

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

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

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

Вот такой веб 2.0.

Недавно всплыло

7 Кто ты? 1 4 Начальник считает, что перед встречей нужно обязательно разработать несколько вариантов предложений 6