Шаблон PORTAL

+27
1.92K
По мотивам обсуждений здесь, здесь и здесь сделан шаблон с применением технологии masonry. Основное в шаблоне — автоматическое плавное изменение положения модулей при смене разрешения экрана.Таким образом, шаблон фактически резиновый, но модули не растягиваются.


Иллюстрация

FAQ

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

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

3) Сейчас модули особенно не настроены, каждый сможет сам это сделать на своём сайте (типа: количество новосте, колонок в модуле и прочее) и таким образом добиться полноценного заполнения своих страниц при разных разрешениях монитора.

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

4) Дизайн шапки легко переделывается под любой каприз.

--------------------------------------

ПОСМОТРЕТЬ ДЕМО

ПОСМОТРЕТЬ ДЕЙСТВУЮЩИЙ САЙТ

Сравнение технологий: JOOMLA, WORDPRESS

--------------------------------------



P.S. По такой же технологии сделан новый сайт RuTube, причём они хвалились, что это сделали супер-пупер американы-дизайнеры smoke
+8
maxisoft maxisoft 9 лет назад #
Шаблон далек до заявленного качественного, да и использование новейших технологий спорное тут. Что значит современные технологии?

вот простые косяки которые сразу обесценивают пока данный шаблон:




Это так на вскидку.

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

Сайт будет стоит своих денег если его пилить и пилить еще.

Да и современные технологии это скорее всего по моему понимаю HTML5, CSS3 и респондив разметка.
+1
Олег с клещами Олег с клещами 9 лет назад #
Это так на вскидку.
Вот это и чувствуется. После того как ещё 1,5 минуты посмотришь, то сообразишь, что все пустые места устраняются хозяином сайта путём грамотного размещения модулей. А если уж так трудно это сообразить, то пожалуйста решение: не используй позиции с шириной 180 (перечислены в описании) да и всё.
+4
maxisoft maxisoft 9 лет назад #
суть не в том что хочешь или нет, если вы ПИШИТЕ "КАЧЕСТВЕННЫЙ" тогда стоит принимать критику в любом качестве. Тогда стоит к шаблону написать мануал на 100 страниц для юзеров чтобы поняли что им использовать а что нет.
+1
Олег с клещами Олег с клещами 9 лет назад #
А кстати, где это я писал "качественный"? Это Вы о теме на форуме? Так это не я её так назвал, там все тусовались. По поводу качества каждый сам пусть решает. Многие восхищаются, когда на дефолте фон и цвета поменяешь. Такие, брат, пирожки....
+1
Олег с клещами Олег с клещами 9 лет назад #
И ещё: вряд ли стоит задавить разрешение менее 800px и кричать, что это косяк. Хочешь я любой твой так же выставлю? Шаблон предназначен для минимального разрешения 1050.
0
maxisoft maxisoft 9 лет назад #
Да хочу чтобы выставили. Суть в том что если шаблон расчитан на минимальное 1050 о скорее всего имет смысл ставить стили ограничивающие его ширину до той которая является оптимальной. Если я не прав тогда что тут с этим поделать.
+1
Олег с клещами Олег с клещами 9 лет назад #
А какая разница - если человек зашел с разрешением 800 и видит кусок левой части сайта, или расползлось верхнее меню? По любому не удобно. А прописать ширину, это не вопрос, просто не очень надо, на мой взгляд. Лучше бы вот сделать wap версию, это вот стоит подумать.
0
maia maia 9 лет назад #
Вообще однозначно плюс! За то, что с технологией разобрался. Я поковырялась, но заленилась вникать, теперь адаптировать под себя эту рыбу уже проще ) Пригодится. Но вот страннно, что самой идеи не понял. Вообще эта фишка изначально была придумана для общего диза как под самые широкие, так и под самые узкие - мобильные мониторы. То есть под ширину в 1000 рх и 1900 резину сделать не проблема вообще. А вот под 240 и 1900 без перестройки структуры модулей - уже никак. Вот тут оно и рулит. Так что немного доработать все же имеет смысл. Главное - начало положено и начало хорошее )
+1
sotastroy sotastroy 9 лет назад #
И сразу критика от профессионалов. Мало того, что никто не согласился делать такой шаблон, так скажу больше, кое-кто согласился и не смог.
Конкретно по шаблону, да, может где-то и есть косяки + не всем понятно, как использовать эти "плавающие блоки", но однозначно плюс за разработку. Кто на форуме очень хотел адаптацию именно этого шаблона - обрадуются.
+3
Максим Шорин Максим Шорин 9 лет назад #
выскажу немного другое - где стиль шаблона ? где индивидуальность ? Серо и скучно .. за старания + за реализацию - , вобщем ни чего не буду ставить..
+1
Максим Шорин Максим Шорин 9 лет назад #
Еще и продает ? I think this really sucks ...
+2
Malanas Malanas 9 лет назад #
Человек делает нестандартный шаблон - это уже плюс, единственное может поторопился с продажами... хотя.. что ему мешает поправить все косяки в следующей версии....
+4
keven keven 9 лет назад #
Косяки можно же подправить, шаблон все таки интересный, ничего подобного здесь еще не было.
+1
Dost Dost 9 лет назад #
Шаблон оригинальный и заслуживает внимания и изучения. На RuTube все таки блоки одинаковые по значению - видео. На городском портале, если человек заходит с различных устройств, чем уже никого не удивишь будет наверно тяжело ориентироваться. Ну схожесть с RuTube есть, молодец. Отрицательно отношусь к таким продажам на бесплатном движке по крайней мере здесь на сайте. В этом плане мне нравится подход Dezerit.
+1
Олег с клещами Олег с клещами 9 лет назад #
будет наверно тяжело ориентироваться
По моему, вряд ли. Насколько я понимаю, мало кто из юзеров вообще умеет менять разрешение в браузере. Так что как первый раз зашел, так и будет дальше, т.е. всё на привычных местах.
0
Dost Dost 9 лет назад #
Я разрешение в браузере тоже не умею менять! Я имел ввиду зашел с компа. Показываешь потом другу с нетбука, открываешь, а там другой сайт...Блоки меняются как то хаотично на первый взгляд. Возможно я ошибаюсь, это первое впечатление.
0
Dost Dost 9 лет назад #
Кстати да, менять масштаб в браузере тоже не очень хорошая затея.
+1
Олег с клещами Олег с клещами 9 лет назад #
Блоки меняются как то хаотично на первый взгляд
Это только на первый взгляд. На самом деле строгие правила. Вращение блоков происходит вокруг центральной оси сайта (центр экрана) и соблюдается иерархия порядковых номеров. Блоки малой ширины при наличии места выстраиваются справа в колонку.
0
Dost Dost 9 лет назад #
Ну пока строгих правил еще не наблюдается. Разве так должен отображаться блок с фото?
0
Олег с клещами Олег с клещами 9 лет назад #
F5 вам в помощь
0
Dost Dost 9 лет назад #
Почему только мне? Всем пользователям сразу.
+3
letsgo letsgo 9 лет назад #
Как всегда. Кто делают свои сайты - хвалят, кто не делает свои сайты на результат, те ругают. Собственно вполне оправданно и обе стороны можно понять. Шаблон этот первый блин и получился функционально и очень интересным, но немного не хватает дизайна как такового. Главное теперь добавить сюда различные дизайны, я бы конечно если честно предпочел бы саму технологию применить на своих шаблонах. В общем плюс ставлю.
+2
NastiK NastiK 9 лет назад #
Не понимаю вашей критики, это на мой взгляд шаг в будущее ну и что что дизайна особого нет, зато изучена технология, я думаю не многие пока что научились на ней сайты (на инстанте) писать. И тот же рутуб гляньте тоже пустые места есть, но однако он популярен.
+3
NastiK NastiK 9 лет назад #
Не понятно и мнение тех кто минусует, человек старался тем более он сейчас не продаёт шаблон.
+2
Hunter (Роман) Hunter (Роман) 9 лет назад #
Не ну так -то прикольно. Но меня честно эта перестановка блоков испугала. А представляю как будут плеваться пользователи от этих постоянных перестановок - когда они привыкли все видеть на своих местах. Я не так давно поменял дизайн сайта - и то народ возбухал - недовольных было много что местами поменяли - модули. Все жаловались - что надо опять к сайту привыкать. Так что, действительно - может быть эта технология неплохая - но больше подходит для каких-нибудь фотосайтов - где много фотографий разных размеров и в зависимости от размеров - они прыгают по разным местам. Или для сайта каких-то розыгрышей и викторин подойдет. А как на портале, так и в любой соцсети - должно все стоять на своих местах - ну можно по одному - модулю местами переставлять раз в неделю и то найдутся недовольные.
+1
Hunter (Роман) Hunter (Роман) 9 лет назад #
Но плюс поставлю - разработка интересная, достойна внимания
0
letsgo letsgo 9 лет назад #
а у вас пользователи меняют мониторы ежедневно, еженедельно, ежемесячно все поголовно?) Ну абсурд же.

Ну поймите то простую мысль, то что вы сдвигаете, сжимаете, пробуете - этого пользователь не делает, зашел он с своим монитором и сидит и спокойно воспринимает сайт) Итак год, или два, пока монитор не сменит. Технология эта для того, чтобы не было пустого места у человека с любым монитором.
+1
Hunter (Роман) Hunter (Роман) 9 лет назад #
Нет тут такая фишка в общем. Много народа заходит с сотовых телефонов - которые как известно теперь открывают не только мобильные версии сайтов - а полноценные сайты. Так вот при увеличении изображения на сотовом - чтобы посмотреть или почитать - модули начинают прыгать и скакать - сам проверял - что Вы на это скажете.

А так согласен - если дело касается компа - то это так. Хотя можно и без этой технологии постараться чтоб свободных мест не было.
+2
Atid Atid 9 лет назад #
Что мне понравилось у вас на сайте то это то что страницы открываются за доли секунд
+3
Reborn Reborn 9 лет назад #
За постижение методики и привнесение в массы +++
Хотя я не вижу в этом перспективы и считаю,что не передвижением блоков нужно решать отображение в разных мониторах,
а определением user-agent.
0
Thanatognozija Thanatognozija 9 лет назад #
Я вот как-то спрашивал о таком, как сделать, чтобы было как Вконтакте. Там, если спускаешься вниз по стене, и заканчивается левая колонка - правая становится по ширине... Мне кажется, что это решение подошло бы сюда...
0
Thanatognozija Thanatognozija 9 лет назад #
Вот, это было в этой теме http://instantcms.ru/forum/thread9705.html#76292
+1
Олег с клещами Олег с клещами 9 лет назад #
чтобы было как Вконтакте
Можно сделать на этой платформе. Надо подумать...
0
Malstein Malstein 9 лет назад #
Красота!!!Мне нравится!И что стоит??это чюдо
0
Malstein Malstein 9 лет назад #
Красота!!!Мне нравится!И что стоит??это чудо.. оговорился
+1
Александр Александр 9 лет назад #
Оу... данный дизайн я не понял. Зашёл и потерялся. Куча всего и всё это в шахматном порядке... очень напрягает! Так же в шаблоны НЕ ПОНРАВИЛОСЬ, как реализовали выпадающее меню кнопки "Добавить". Меню появляется с задержкой, не красивая анимация. В общем плюсану за старание, но шаблон на оценку 3
+1
Олег с клещами Олег с клещами 9 лет назад #
Куча всего и всё это в шахматном порядке... очень напрягает!
Не надо напрягаться. Это просто демонстрация, что можно много. Каждый сам свою структуру прописывает,очень просто.
0
necromanc necromanc 9 лет назад #
не люблю когда в три равных колонки... как то теряешься где основной контент а где анонсы, всякие блоки боковые.. а так перспективное направление конечно.
+1
Олег с клещами Олег с клещами 9 лет назад #
Ну, никто ведь не мешает на главной всё основное расположить в самой левой широкой колонке, а остальное будет правее и ниже. А на внутренних основной контент широк и очевиден.
0
Clear Clear 9 лет назад #
Идея шаблона отличная но требует больших доработок. Я же лично в своё время искал подобный шаблон и нашел его на вордпресс. При желании можно посмотреть его исходники СSS и скачать. Сделано очень грамотно и красивро. Ширина меняеться в зависимости от монитора. Вот вамм ССЫЛОЧКА на пример посмотрите и отпишитесь что думаете по ней. Еще можно посмотреть ЭТУ. Смысл не в содержимом блока а в их адаптации к изменениям ширины монитора. У одного шаблона один вариант адаптации, у другого другой. Удачи ...
+1
Олег с клещами Олег с клещами 9 лет назад #
Посмотрел. Первая ссылка- то же самое, что у меня, один в один. Вторая - странная идея с наползанием модулей один на другой, думаю это уж совсем на любителя, крайне редко понадобится, но можно сделать и так.
+1
Олег с клещами Олег с клещами 9 лет назад #
ПОСМОТРЕТЬ ДЕЙСТВУЮЩИЙ САЙТ

Сравнение технологий: JOOMLA, WORDPRESS

Так сказать, найдите 5 отличий? Не считая лайтбоксов всяких....
0
maia maia 9 лет назад #
На счет пяти не знаю, но есть одно основное и очень важное. В этом http://press75.com/ и этом http://demo.gavick.com/free/may2012/ вариантах можули не только переставляются, но и меняют ширину. Поэтому смотрится сайт всегда красиво. Ну и это же позволяет использовать шаб для очень маленьких мониторчиков - что, собсно, и требуется от этой затеи. Если удастся реализовать то же самое - мне точно оно надо, куплю.
+1
Олег с клещами Олег с клещами 9 лет назад #
При всём моём уважении, но где же Вы нашли изменение ширины? Приведите пример? Технология masonry этого даже не предусматривает.
0
maia maia 9 лет назад #
+1
Олег с клещами Олег с клещами 9 лет назад #
:) :)
Юмор оценил!
А если предположить, что при увеличении разрешения на одном и том же мониторе, модули и кажутся больше?! Вот оно чё, Михалыч.....
0
maia maia 9 лет назад #
Про разрешение не поняла. Здесь я просто сдвигала границу браузера при одном и том же разрешении и модули меняли свой размер, перестраиваясь. Собсно, эжто видно и потому. что размер шрифта везде одинаково. Или Вы о чем? При чем здесь разрешение? И юмор?
0
maia maia 9 лет назад #
А на верхнем видно, что модули растянулись хотя бы потому, что в верхнем модуле текст вместо шести строк занял четыре, сохранив размер шрифта.
0
maia maia 9 лет назад #
Вот запись того, как меняются размеры модулей при уменьшении окна
http://rutube.ru/video/private/3c1b8b248a7d38b4f3c8dfec73e2c2b0/?p=fKdIM_3YIIulKr39ZY2FSQ==
http://rutube.ru/video/private/1e44ff0ffa6c88641b317d186c403472/?p=3QkI1IrmUhFn5CZbMSNxvA==
+1
Олег с клещами Олег с клещами 9 лет назад #
Кстати, в этом http://press75.com/ ширина не меняется, просто модули уезжают один под другой, это уж точно не для всех подходит. Для динамических модулей инстанта, с меняющейся высотой, явно не имеет смысла это использовать.
0
maia maia 9 лет назад #
Что подо что уезжает - не поняла
+1
Олег с клещами Олег с клещами 9 лет назад #
1) открываешь http://press75.com
2) нажимаешь и удерживаешь Ctrl и нажимаешь "+" несколько раз и наблюдаешь, как с каждым нажатием левые модули плавно уходят под правые.
З.Ы. Это типа технология такая....
0
maia maia 9 лет назад #
У меня ничего ни под чего не уходит. Просто модули увеличиваются в размере и сдвигаются так же, как при уменьшении ширины браузера.
+1
Олег с клещами Олег с клещами 9 лет назад #
посмотри в опере
+1
Олег с клещами Олег с клещами 9 лет назад #
Если в Опере не работает - шаблон в топку, т.к. всё же один из популярнейших браузеров.
0
maia maia 9 лет назад #
А это с ctrl + ничего ни подо что не уходит
http://rutube.ru/video/private/ca24287132a60e1e6d807c0d0e6851ff/?p=RKeSNS0Um_JaGxrw0qQJyQ==
или я не понимаю о чем речь, или у Вас что-то с браузером не то. У меня на всех все нормально отображается.
+1
Олег с клещами Олег с клещами 9 лет назад #
Ты права, я смотрел только в опере. На хроме и мозилле всё так, как ты говоришь, и это ещё хуже, чем в опере, т.к. вообще не для инстанта с его динамическими модулями. Представь в одном блоке модуль "Лента активности" а в другом "новости форума" - 1) они когда нибудь бывают строго одной высоты? 2) Кому это надо читать что-то с грубо обрезаным низом?
0
maia maia 9 лет назад #
Так о чем и речь )) Вот здесь все модули разновысотные http://demo.gavick.com/free/may2012/ но то, что они меняют ширину, как раз позволяет им распределиться равномерно, поэтому же и говорю, что мне, например, без этой возможности просто перестройка их не пригодится. С дырками посередине тоже никому не нужен. Уж лучше низ. И это именно то, на чем сама застряла, когда пыталась подобный шаб сотворить. А вообще с головой дружить надо, когда расставляешь модули.
+1
Олег с клещами Олег с клещами 9 лет назад #
с головой дружить надо, когда расставляешь модули
На демо-сайте специально так расставлено, чтобы было видно, что может быть. А вот на действующем пустых мест не найдёшь, только внизу, но это же у всех так. Так что считаю, что все стандарты соблюдены. Так это ещё я использовал модули разной ширины, а если использовать одной, как на джумле и вордпрессе, то вопрос пустых мест вообще не возникнет ни в какой ситуации.
+1
Олег с клещами Олег с клещами 9 лет назад #
Молодец! Много потрудилась. Только на рутубе категория private не всем доступна, так что не смог оценить труды, извини. Но, честно не понимаю, в чём вопрос? Технологии на всех образцах совпадают на 100% в плане перемещения модулей, и есть свои фишки у всех разные типа поворота картинок, или лайтбокса. Чего мы обсуждаем-то? Пока не понял...
+1
maia maia 9 лет назад #
За оценку моей деятельности спасибо, но в общем, она не требовалась. Вопрос в следующем:
1, что значит "А если предположить, что при увеличении разрешения на одном и том же мониторе, модули и кажутся больше?!" - при чем здесь увеличение разрешения?
2, что значит "левые модули плавно уходят под правые" и "модули уезжают один под другой," - я этого не наблюдаю ни в одном браузере - они просто перестраиваются и меняют размер при этом.
0
Clear Clear 9 лет назад #
Молодцы ребята ! Вперёд к совершенству ))). А левые модули уходят под правые у кого то, возможно из за интересного браузера какого нибудь устаревшего ?
0
Clear Clear 9 лет назад #
Да и еще вам для коллекции в обсуждение есть http://portal.opera.com/ , хотя он не плавающий но тем не менее тоже неплох другими фишками типа раскрывающихся списков при клике по заголовку блока. А в качестве благодарности для
maia, предлагаю подарить ей этот шаблон за труды и старание в развитии этого шаблона. Думаю так будет правильно, а может это поможет вообще такой шаблон уникализировать и усовершенствовать.
+1
Олег с клещами Олег с клещами 9 лет назад #
Ну, это уж вообще из другой "Оперы" :))
0
Lana Lana 9 лет назад #
Классный шаблон! Дилетантский вопрос, не может это как-то негативно повлиять на индексацию текстов (в каком порядке текст скушает бот)?
+2
Олег с клещами Олег с клещами 9 лет назад #
Положение блока - это всего лишь визуализация вывода, а бот кушает согласно кода. Блоки пронумерованы от 1 до 40 - в таком порядке и кушает. Body - конечно на первом месте.

Еще от автора

Добавление материалов гостями без регистраци
Много предлагалось способов как разрешить гостям добавлять материалы. Перепробовал все, на сегодня ни один не работает. Пришлось изобрести велосипед.
Фиктивный счетчик клиентов
Иногда требуется вывести на сайте фиктивный счетчик клиентов. Я люблю максимально простые решения.
Вставка из Word в CKEditor 1.хх
Не раз уже на форуме обсуждали проблемку в CKEditor когда нельзя вставить текст из Word (нет кнопки). Решения я не увидел, поэтому полез сам
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.