Мы предлагаем:У нас есть:
1 базу данных MySQL(50MB)PHP 5
Прикрепление своих доменовMySQL
Предустановленные движки сайтовPerl
Место под файлы(300MB)Ruby
Бесплатно и без рекламы!
Авторизация:
e-mail: Пароль:
Забыли пароль?    Запомнить  
Все блогиЖизнь сообщества → Twitter Bootstrap - макет странички Окса
Rss

Можете взглянуть на мою попытку воспроизвести главную страницу Окса на Twitter Bootstrap, описанном в недавней статье.
Находится это здесь.
Напоминаю – основное отличие этого дизайна от того, что установлен здесь – отличное перетекание на экранах с маленькими размерами (в частности, шириной).
Я не стал пробовать меню, традиционно используемое в Bootstrap, что-то у меня с ним не сложилось.
Разбирать сформированный код статей мне было тяжеловато, поэтому код в районе статьи выглядит не очень адекватно. В остальном – скопированная от моего лица (с погрешностями вроде кнопок редактирования).
Ссылки не работают. Вроде. Что я нашёл, я выпилил.


Автор: Павел | Дата создания: 29 октября 2012, 17:57 UTC | 0.842
Теги: нет


Комментарии(21)
cyber01  29 октября 2012, 18:09 UTC  #
0.0
Avatar

Прикольно

Денис  29 октября 2012, 18:43 UTC  #
0.363
Index

Слишком пестро, много лишних линий из-за которых интерфейс уже сейчас кажется перегруженным.

Хотя нумерация страниц явно удалась.

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

Или задача стояла как можно быстро набросать нечто похожее? Тогда интересует затраченное время. В первом приближении можно сказать похоже. Для большего приближения не хватает однопиксельной тени у блоков.

Денис  29 октября 2012, 18:48 UTC  #
0.0
Index

Я не очень понял порыв попробовать повторить, т.к. он похоже явно не заточен под такой дизайн. Или это академический интерес?

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

Павел  29 октября 2012, 19:07 UTC  #
0.0
2bfe965ab5ef94a0568bc61c36b46d4c

Затрачено около 3 часов времени, при том, что это первый опыт работы над “сырым” макетом вообще.
Целью ставилась проверка того, как себя поведёт эта система на произвольном дизайне, при сильном сужении экрана. В качестве “произвольного” был взят тот, что здесь.
Насчёт пёстрых элементов – с момента публикации ссылки здесь дизайн уже претерпел некоторые изменения. В частности – ранее все кнопки были белыми. Согласен, с такой раскраской слишком пёстро, в ближайшие минуты поправлю на более мягкую гамму.

Павел  29 октября 2012, 19:19 UTC  #
0.0
2bfe965ab5ef94a0568bc61c36b46d4c

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

Пока что я буду совершенствовать этот макет, добавляя в него новые элементы. Принцип – делать меньше элементов большего размера, выдающих информацию на странице, которая изначально скрыта.
Но и в этом подходе тоже надо знать меру. То, что ты сказал про вынесение страниц “к нам” и “от нас” на главную же – мне кажется, уже слишком, поскольку даёт немаленький объём страницы.
Раз уж на то пошло, задам парочку вопросов.
“Умные элементы управления”. Можно пример?

Павел  29 октября 2012, 19:33 UTC  #
0.0
2bfe965ab5ef94a0568bc61c36b46d4c

Касательно того, что “не совсем похоже” – шаблон целиком сооружён на встроенных в Bootstrap классах, и я просто не хотел добавлять ничего сверх. То, что там попался похожий контейнер “well” – это моя случайная находка.

Денис  29 октября 2012, 20:43 UTC  #
0.363
Index

Хорошо, с правилами игры согласен.

“Умные элементы управления”. Можно пример?

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

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

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

В более сложном вариант – это виджеты, например, погоды. Все что надо уже есть, но при активации элемента управления можно посмотреть подробнее.

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

Вот, например, элементы управления голосованием здесь, тоже можно отнести к умным элементам – в зависимости от условий показывается содержимое, можно как проголосовать так и просмотреть кто и как голосовал.

Денис  29 октября 2012, 20:57 UTC  #
0.363
Index

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

В обновлениях может быть есть смысл показывать только одно с выпадающей “скатертью” остальных, если есть что-то подобное. Это к твоему:

Пока что я буду совершенствовать этот макет, добавляя в него новые элементы.

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

Павел  29 октября 2012, 21:50 UTC  #
0.289
2bfe965ab5ef94a0568bc61c36b46d4c

Да, я думал над этим. Там много лишней информации, те же теги, дата, время, блог. Я не менял большую часть информации именно из тех опасений, что движок не будет переделываться под такие модификации. Но раз так – давайте немного поиграем в утопию. Ждите меня с новой версией! =)

bartokng  30 октября 2012, 16:55 UTC  #
0.0
392

В целом мне нра!

Павел  30 октября 2012, 17:53 UTC  #
0.288
Gitaros  30 октября 2012, 21:30 UTC  #
0.0
Blank

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

Павел  30 октября 2012, 22:15 UTC  #
0.0
2bfe965ab5ef94a0568bc61c36b46d4c

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

Денис  31 октября 2012, 09:25 UTC  #
0.0
Index

Форму входа предлагается сделать в 2 линии полей ввода, справа от них квадратная кнопка входа, и убрать галочку “запомнить”, предлагаю сделать так просто по умолчанию.

Или наоборот в одну линию сделать, смотря как будет подходить. Значечки справа не понравились, непонятно что они делают. Точнее мне то хоть и понятно, но приведи к монитору человека, который впервые видит наш oxnull и спроси что делают кнопки. Не думаю, что эта задача по силам обычному человеку.

Из зачетного – кроме номеров страниц, теперь еще понравилась менюшка сверху, особенно ее поведение при сужении окна. Свежо, интересно.

Выпадающий список с блогами: как идея – хорошо, только при сужении не видно выпадающие пункты.

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

Павел  31 октября 2012, 16:54 UTC  #
0.335
2bfe965ab5ef94a0568bc61c36b46d4c

понравилась менюшка сверху, особенно ее поведение при сужении окна. Свежо, интересно.

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

Насчёт кнопок – уже возникала мысль вчера. Однако индикаторы плюса-минуса я всё же оставлю именно такими, потому что там уже трудно НЕ догадаться, что они значат. Другое дело – что их надо как-то теснее интегрировать в статью, чтобы было видно, что они относятся к ней.

Павел  01 ноября 2012, 01:41 UTC  #
0.0
2bfe965ab5ef94a0568bc61c36b46d4c

Апдейт.

  • Избавляюсь от значков в панели справа. Выпилил счётчик комментариев и рейтинг в низ блока со статьёй. Всё-таки оценку ставить нужно после прочтения, как правило, равно как и интересоваться комментариями.
  • Налаживаю всплывающие подсказки. Кнопка с комментами по наведении показывает, сколько их сейчас. Кнопка “Далее” снабжена более прозрачным описанием того, что она делает.
  • Перепилен дизайн “плюсоминусов”. Отзывчивость кнопок может привести к нежелательным эффектам в сознании пользователя типа “не нажалась! :(”, так что произведена замена на простые “пузырики” со значками. Всплывающие подсказки прикреплены.
  • Заголовок переехал внутрь блока статьи, как и полагается. От моего неудачного примера с h1-заголовком прямо в статье казалось, что у заголовка самой статьи нет большого значения. Исправлено путём отгораживания заголовка модифицированным <hr />. Но и цвет там сменить, возможно, не помешает.
  • В мобильной развёртке в меню теперь отображается не текст, а картинка с лого. Побочный эффект – кнопка меню на его фоне не особенно заметна.
  • Изменена сетка с кнопками внизу статьи. Кнопка “Далее” теперь раздувается на всю ширину в мобильном варианте, а в полновесном лаконично висит слева.
  • Форма входа переделана. Совсем. Ожидаю критики. Как убрать пустое место внизу – пока не знаю.

Нерешённые задачи:

  • Куда девать информацию, всплывающую по оставшимся кнопкам справа, я не знаю. Думаю увеличить колонну и повесить туда аккордеон с пунктами “Автор”, “О статье” и, возможно, чем-то ещё. Позже глянем, но отпишитесь сразу, кому такая идея не нравится.
  • Что-то мне не нравится то, как сейчас выглядит навигация по блогам, эта панель из четырёх кнопок. Не знаю, не нравится и всё тут. Первая кнопка нравится, а дальнейшее переделаю. Кстати, возможно, стоит уменьшить количество блогов? Большинству из них не грозит увеличение количества статей в ближайшее время.
Павел  01 ноября 2012, 14:28 UTC  #
0.0
2bfe965ab5ef94a0568bc61c36b46d4c

Форма успешно сжата.
Также провожу испытания нового элемента управления – сворачиваемого контейнера. На данный момент можно протестировать, тыкнув синюю кнопку слева.
Песочница всё там же: http://astralangels.ru/bootstrap3/

Павел  01 ноября 2012, 15:00 UTC  #
0.0
2bfe965ab5ef94a0568bc61c36b46d4c

Выпадающий список с блогами: как идея – хорошо, только при сужении не видно выпадающие пункты.

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

Денис  02 ноября 2012, 07:25 UTC  #
0.0
Index

Сворачиваемый контейнер предлагаю использовать под кнопкой “далее” у статьи, будет отображать статью полностью.

Вместо списка блогов можно сделать облако тегов в другом месте. Список блогов все равно мало информативен.

Форму входа по прежнему предлагаю переделать в сторону минимизации – удалить галочку “запомнить”.

Арсений  02 ноября 2012, 18:04 UTC  #
0.0
0cfd0jeujkq

Лично я против облака тегов.Кажется лучше выпадающее меню(более гармонично смотрится).Насчет галочки “запомнить”,- вот это да,вот здесь согласен.)

Но это лишь мое мнение.

Павел  02 ноября 2012, 18:07 UTC  #
0.0
2bfe965ab5ef94a0568bc61c36b46d4c

Облако мне кажется громоздким и не очень удобным элементом. Впрочем, его можно в наших условиях сделать реально БОЛЬШИМ, и сделать кнопку сворачивания. К примеру, с подписью “Ох-облако”. Ещё один довесочек к новой модели навигации по блогам, которую я пока рисую только в голове.


Простите, Ваш браузер не поддерживает html5
Управление стрелками. Пробел - пауза.