Каким образом можно разместить информацию, чтобы она влезала в один экран?

Антон
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

Твитнуть

Отправить

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	Ваш комментарий	Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа. Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным. Вот такой веб 2.0.

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

Похожие советы Формат: таблица₁₂₆ Носитель: сайт₅₃₄

1 • 4 • 2 • 6 •

3 • 2 • 1 • 2 • Что не так с чересполосицей? 1 • 3 • 4 • 1 • 2 • С подходами к адаптивной вёрстке вроде все уже разобрались, но вот с отображением табличных данных понятно не всё 8 • 4 • 7 • 8 • 5 • 2 • 4 • 6 • 9 • 4 • 1 • 7 • 16 • 4 • Можно ли иногда всё-таки использовать в таблицах разделение строк линиями или делать чересполосицу? 2 • Проблема в том, что ширина таблиц зависит от контента 5 • 3 • 3 • 2 • 6 • 1 • 7 • 10 • 3 • 8 • 6 • 5 • 14 • 3 • 2 • 3 • 5 • 8 • 3 • 4 • 4 • 6 • 2 • 1 • 2 • 10 • 1 • 2 • 6 • 3 • 3 • 1 • 13 • 7 • 3 • 13 • 11 • 46 • 10 • 7 • 6 • 5 • 15 • 2 • 2 • 11 • 10 • 14 • 5 • 8 • 8 • 3 • 8 • 5 • 7 • 4 • 6 • 2 • 7 • 7 • 9 • 5 • 8 • 10 • 12 • 3 • 3 • Банальное перечисление языков через запятую не подходит, работодателя интересует уровень владения каждым из языков. 12 • 7 • 10 • 7 • 11 • 8 • 2 • 2 • 4 • 4 • 4 • 12 • 13 • 6 • 3 • 14 • 15 • 15 • 11 • 4 • 4 • 8 • 7 • 15 • 11 • 7 • 9 • 17 • 4 • 8 • 6 • 2 • 13 • 11 •

3 • 1 • Фиолетовый цвет в новом дизайне советов не уместен 1 • 1 • Куда поставить ссылку: на поля или в текст? 2 • 3 • Стоит ли использовать выворотку в вебе и полиграфии? 1 • 1 • 1 • Как расположить 30 видеороликов? 2 • 2 • 1 • 1 • 3 • 1 • Сайты для слабовидящих 2 • 1 • Как оформить портфолио маркетологу? 1 • 2 • 4 • 2 • 2 • 3 • 5 • 2 • 1 • 4 • 1 • 3 • Как правильно в мобильных приложениях ставить ссылки? 1 • 1 • 3 • 1 • 2 • 4 • 2 • 4 • 1 • 3 • 1 • 2 • 3 • 3 • 2 • 3 • 3 • 1 • 2 • 5 • 1 • 1 • 3 • 2 • 1 • 1 • 5 • 2 • 2 • Сдала курсач в Школе редакторов 5 • 8 • 1 • Инфографика про губернаторов Иркутской области. Вторая часть 2 • 4 • 3 • 5 • Нужно, чтобы эти элементы были на странице, но получается сумбур. Четвёртая часть 3 • Нужно, чтобы эти элементы были на странице, но получается сумбур. Третья часть 1 • Нужно, чтобы эти элементы были на странице, но получается сумбур. Вторая часть 1 • 1 • При создании макета сайта зарылся в детали и упустил самое главное. Третья часть 5 • При создании макета сайта зарылся в детали и упустил самое главное. Вторая часть 4 • Как сделать, чтобы человек не ушёл с сайта, докрутив страницу до конца? 1 • 3 • 4 • 4 • 2 • 2 • 2 • 3 • 9 • Интернет-магазин принудительно отправляет пользователя в корзину с формой оформления товара 7 • Расскажите об ушках, цитатах и фактоидах 1 • Как верстать текстовые блоки с иллюстрациями? 2 • 7 • Что нужно знать о подписях в вёрстке? 2 • Как работают элементы управления в вёрстке 3 • 8 • 9 • 12 • Зачем нужны страницы «О компании» и «Команда». 2 • Что должен знать дизайнер об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? 9 • Как лучше всего решить эту задачу, если текст нужно разделить на анонс и основной текст? 2 • 1 • Я не понимаю, как должен быть устроен мир — в смысле сохранения предпочтений 2 • 4 • 1 • 4 • Занимаюсь разработкой интерфейса веб-приложения, в некоторых местах надо показать числовой коэффициент 3 • За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично? 1 • С чего начать изучение ЦСС? 1 • Как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера? 5 • 10 • Можно ли заверстать несколько разноширинных элементов через равные промежутки в резиновом контейнере? 1 • Как быстро придумать простой логотип для своего сайта? 1 • 3 • Чем отличается блог с комментариями от блога с отключенными комментариями? 3 • Удачное ли решение на сайте в поле пароля указывать, что нажат капслок, как на Маке? 6 • 8 • 6 • 3 • 9 • 11 • 3 • Как поступить правильно по отношению к читателю и поисковикам? 7 • Карусели и слайдеры 10 • 5 • 3 • 2 • 4 • Как вы храните данные для многоязычных сайтов? 3 • 4 • Что делать, если он совершил какие-то действия, а после этого заходит в свой профиль, где уже есть сохранённые данные? 5 • 5 • 2 • 3 • Как правильно сделать подчёркивание многострочного текста, чтобы линия была в три пикселя? 1 • 5 • 4 • Каким способом можно сделать загрузку кастомных шрифтов приятной? 6 • Артём, объясните, пожалуйста, в чём преимущество div перед table 5 • 5 • 5 • 8 • Как размыть объект? 2 • Как выровнять картинку внутри дива по центру, если её ширина больше ширины дива? 4 • Как правильно разделять разряды чисел? 4 • 6 • Артём, как вы подключаете стили для ИЕ? 3 • 7 • 2 • 7 • Стоит ли наращивать вложенность тегов для структурированности кода? 6 • Хочу сделать смену языка на сайте без перезагрузки страницы (и без аякса) 5 • Как на сайте бюро реализована разрядка у прописных букв? 5 • 14 • 4 • Хотим переделать свой и-магазин пиротехники 3 • Действительно ли необходимо цитаты внутри предложения заключать в тег q? 2 • Год назад запустил личный проект «Либретто опер» 2 • Расскажите, пожалуйста, о типах индикаторов загрузки 13 • 1 • Чем обосновано дублирование основного меню в «подвале»? 4 • Необходимо разработать интернет-магазин китайского чая 2 • Хочется, чтобы много красивых картинок на сайте быстро загружались 14 • 5 • В каких единицах стоит задавать размеры шрифта? 8 • 1 • Используете ли вы готовые ЦМС? 3 • 1 • 3 • Как правильно делать подчёркивание ссылок другим цветом? 6 • 1 • 5 • Как в ЦСС работать с родителями? 3 • 2 • Веб-студия рисует дизайн сайта и для выпадающего меню упорно делает пунктирную ссылку 4 • Как вы относитесь к «отложенным товарам» в интернет-магазинах? 3 • 1 • Как верстать ссылки вида http://site.ru/#news, чтобы при нажатии на них сайт не загружался заново? 2 • 16 • Как вы обходитесь без проверки на робота? 8 • 4 • 9 • 2 • 4 • Проблема в том, что ширина таблиц зависит от контента 5 • 2 • 5 • 3 • Как бы вы расставили ссылки в этих новостях с сайта glavbukh.ru? 1 • 1 • Клиент настаивает на длинных-длинных страницах текста в десятки экранов 4 • 2 • 1 • 3 • 5 • Какой делать фавыконку сайта: просто 16×16 или содержащую в себе разные размеры? 10 • 3 • 4 • 2 • 3 • 3 • 7 • 1 • Есть ли какие-то простые, самые базовые принципы по подбору цветовых схем для сайта? 3 • 6 • Без продвижения в поисковиках мы завтра же закроемся 2 • 3 • 1 • 2 • Дизайнер старательно вырисовывает в макете кнопку, похожую на его любимую в его ОС 4 • 3 • 1 • 4 • 5 • Есть форма, и есть поле ввода, куда пользователь вводит контактный телефон 3 • 2 • 4 • Сейчас хотя бы уж Джаваскрипт работает у всех? 7 • Как писать цены по-английски? 1 • 4 • 5 • 3 • 6 • 2 • 4 • Иногда люди, когда пытаются оценить, насколько выгодно расположены элементы на форме, рисуют линию, по которой якобы глаз скользит 2 • 5 • 2 • Раз уж интерфейс — зло, нужна ли вообще интернет-магазину корзина? 7 • 5 • 4 • 5 • 10 • 6 • 4 • 1 • Собираем и наполняем сайт одному дилеру известной автомобильной марки по гайдлайнам представительства 1 • 1 • 5 • 3 • 2 • 5 • 6 • Хозяин конторы принимает все решения относительно любого дизайна и вообще 3 • 3 • У меня с коллегой возник спор относительно того, какой элемент интерфейса нужно использовать для разлогинивания пользователя в интернете 7 • 6 • Какой должна быть вёрстка сайта — резиновой или фиксированной? 4 • 5 • 7 • 5 • Поскольку мне никто ничего не написал, пообщаюсь сам с собой 5 • 3 • 1 • Подскажите, пожалуйста, как правильно называть header и footer на сайтах по-русски? 1 • 3 • Я вот заметил, что на некоторых сайтах стали использовать статические баннеры 4 • 6 • 4 • 5 • Как вы относитесь к ссылке «наверх»? 12 • 3 • 4 • 5 • Если пользователь при авторизации на сайте трижды неправильно ввёл пароль, то на его электронную почту автоматически высылается письмо с ссылкой на восстановление 5 • 5 • Скажите, как отучить дизайнера лезть в код? 4 • 10 • Имеет ли смысл ставить кнопку «купить» в списке продуктов в интернет-магазинах? 22 • 3 • Зачем формы авторизации часто делают во всплывающих лайтбоксах 2 • Клиент хочет на сайте цветок. Железно 4 • 6 • Когда пользователь нажимает «Скачать файл», у него не открывается новое окно или же вкладка. Значит, ссылку на скачивание тоже надо подчёркивать пунктиром? 3 • 1 • 3 • 5 • 4 • Артём, пытаюсь не допустить настойчивого предложения сделать выключку текста по ширине в вебе 10 • 11 • 8 • 5 • Заметил, что в Советах вы часто используете капитель 3 • 7 • В каком лице формулировать ссылки и баблы на сайте? 5 • При запросе восстановления пароля сайты высылают подтверждение, при нажатии на ссылку генерируется новый пароль и высылается второе письмо 7 • Стоит ли обозначать ссылки, которые что либо меняют простым наведением курсора, волнистой линией? 5 • 3 • 4 • 4 • 17 • 14 • 6 • Что вы думаете по поводу наличия пункта «главная страница» в основном меню сайта? 9 • 4 • 1 • 5 • 2 • 6 • Почему у вас на сайтах везде используется английский перевод в урл, а в блоге — транслит? 6 • 5 • 5 • 8 • 2 • 5 • 1 • 4 • 4 • 7 • 10 • 7 • 6 • 1 • 10 • 2 • 6 • 3 • 5 • 5 • 6 • Почему бы не отвести часть правой стороны экрана под корзину? 13 • 5 • 8 • 3 • Как вы относитесь к новому формату форумов — вопросных систем? 3 • Артём, стоит ли учитывать различие регистров букв в адресах страниц? 11 • 2 • 2 • 7 • 8 • 4 • 13 • 12 • 6 • 5 • 2 • 19 • 4 • 2 • 7 • 4 • 3 • 7 • У меня есть сайт о Джумле 4 • 13 • 1 • 23 • Хотелось бы узнать ваше мнение о правиле «главная страница сайта должна умещаться на одном-двух экранах монитора» 3 • 5 • 10 • 9 • 4 • 2 • 2 • 1 • 7 • 4 • 7 • 3 • 5 • 9 • 2 • Что скажете о работе «Информационных архитекторов»? 1 • 6 • 5 • 3 • 2 • Хотелось бы услышать советы по минималистическому дизайну и по дизайну интернет-магазинов 5 • Почему на artgorbunov.ru курсор над горизонтальным скроллбаром имеет вид «движение во все стороны»? 8 • 12 • Подскажите, при создании сайта что раньше должно быть — дизайн или программирование? 9 • 3 • 13 • 6 • 2 • Как вы относитесь к иконке RSS? 8 • 1 • 4 • 3 • 2 • 3 • 5 • 8 • 1 • 9 • 8 • 8 • 6 • 4 • 11 • Для чего нужна висячая пунктуация в вебе? 6 • 4 • 7 • 3 • 11 • 6 • 1 • Шесть тезисов об идеальной электронной книге 12 • 1 • 22 • 6 • 2 • 23 • 9 • 12 • 15 • 3 • 4 • Довольно часто веб-страница должна содержать заведомо большое количество информации 2 • 1 • 9 • 6 • Как вы считаете, стоит ли причислять смайлы к знакам пунктуации? 6 • 1 • 5 • 12 • 2 • 1 • 7 • 8 • 10 • 5 • Что вы думаете о нотации Гарретта? 10 • Делаем открытый сервис «Сколько стоит хороший сайт?» 7 • 10 • 12 • 3 • 6 • 9 • 29 • 7 • 7 • 9 • Существует ли какая-то система нотации для моделирования пользовательского интерфейса, которая бы позволяла обозначать такие свойства элементов, как «резиновость», сохранение выравнивания по какой-либо оси? 10 • 7 • 9 • 12 • 10 • 7 • 12 • 13 • 7 • 16 • 8 • Как можно указать, что все это — PDF, не ставя иконку у каждой ссылки или просто подпись? 7 • 8 • 11 • Какое, по вашему мнению, самое лучшее решение для страницы faq? 7 • 8 • 22 • 7 • 4 • 8 • 6 • 8 • 3 • 9 • 4 • 4 • 10 • Есть ли смысл оформлять подчеркиванием все ссылки вне основного текста? 16 • 20 • Сет Годин только что опубликовал ссылку на результаты исследования движения глаз во время просмотра информации 5 • 7 • 6 • 15 • 1 • 3 • Что вы думаете насчет Google Chart API? 6 • 4 • 6 • 3 • 3 • Стоит ли при проектировании интерфейса опираться на вариант, что в будущем размеры экранов будут продолжать расти? 4 • 10 • 3 • 11 • 14 • 10 • 11 • 6 • 8 • 7 • 15 • 11 • 11 • 4 • 8 • 11 • 1 • 2 • Что изображать на инфоскроллере, чтобы он был действительно информативным? 7 • 2 • 8 • 15 • 7 • 4 • 4 • 9 • 5 • 4 • 11 • 1 • 7 • 3 • 15 • 12 • 9 • 4 • 12 • 17 • Все почтовые программы делятся на два класса: а-ля веб и а-ля десктоп-приложение 6 • 4 • 12 • Оправдана ли замена слова в меню или тексте на его синоним, если это исключает возможные ошибки при чтении? 17 • 15 • Сначала я думал, что 12 пунктов — это, может быть, 12 пикселей, но не так все просто 8 • 11 • 3 • 2 • 23 • 11 •

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

Все уже успели заметить, что вы почти во всех пятничных примерах советуете немного поунижаться 12 • Почему в переписке нельзя использовать «Доброго времени суток»? 2 • Выбранные элементы списка, как не забывать принципы из советов бюро и когда нужен логотип 1 • Какой движок выбрать для сайта рекламного агентства? 2 •

Комментарии

Ваш комментарий

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