Next Generation CMS :: Форум поддержки
Вы не зашли.
- Темы: Активные | Без ответов
Объявление
#1 2011-02-10 17:17:19
Клиентский интерфейс (выношу на суд)
Всем доброго времени!
Решил создать шаблон для NGcms, который был бы качественно свёрстан и в то-же время красиво смотрелся.
В данный момент шаблон находится в стадии разработки, так как по-сути я принялся за переделку всей клиентской (именно пользовательской, не включая админки) части CMS, таким образом нужно адаптировать все плагины итп.
Ориентируюсь я больше на организацию клиентского кода в CMS и задачу более грамотных концепций по применению CSS с Яваскриптом для удобства их редактирования будущими разработчиками. Надеюсь, если Виталику понравится моя идея - будем вносить незначительные правки в движку.
Мной предусматривается обязательная возможность работоспособности сайта без используемого мной фреймворка, т.е. с его применением я пишу только конкретно данный шаблон, а если что-либо планирую править в двиге связанное с яваскриптом, то пишу для этого дополнительно функцию без использования фреймворка. Стараюсь делать всё таким образом, что-бы изменения не отражались пагубно на всех остальных шаблонах, но частично конечно-же затронут пару мелких моментов, которые я лично буду готов исправить во всех поставляемых с NGcms шаблонах.
Художник из меня некудышный, но с юзабилити, вёрсткой (оптимизированной для SEO) и яваскриптом дружу, соответственно мне нужно ваше мнение касательно внешнего вида и стилевой составляющей. Что-бы вам хотелось видеть в реализованном шаблоне и поставляемом шаблоне движка, как бы вы лучше изменили цвета итд итп. Если есть желание и возможность, с удовольствием приму ваши готовые изображения для сайта в psd формате (благо их немного используется, но логотипа я пока не придумал)
===
Ключевые особенности: использую в шаблоне фреймворк jQuery, не стесняюсь применять CSS 3.0 игнорируя при-этом осла, из интересных реализованных моментов - форма входа на сайт с микро-валидацией и возможность лёгкого изменения типа вёрстки с резины на фиксированную (для разработчика, т.е. в итоге ссылки не будет, надо будет изменить один класс в main.tpl). Весь css и JS код прокомментирован. Черные блоки в контенте сделал для описания и возможности скрыть лишнее, подняв нужное к верху странички 
Поддержка: IE7+(кроме моментов с CSS3, кои я сделал так чтоб не совсем уж гадко в IE выглядел сайт), FireFox, Opera, Hrome, Safari ( последних версий, остальные браузеры и другие версии перечисленных не проверял)
Вот то, о чем идет речь: http://zxs.ru/test1/index.html (шаблон будет всегда доступен по-этой ссылке, пока не закончу работу. Об обновлениях буду оповещать в теме)
http://zxs.ru/test1/comments.html - хитрый вывод комментариев с использованием хэшей вместо "?news_id=7&page=2". Пока к движке не прикручивал, но на предмет баговости оттестировал, всё фурычит. До 500 страничек с +/-2000 комментариями работает достаточно шустро, до 100 стр с 1000 комментами летает. Планирую прикрутить прелоадер. Если кто возьмется за прикрутку к плагину comments или подскажет, как лучше прооптимизировать яваскрипт, буду благодарен. Подробное описание в сообщении ниже..
http://zxs.ru/test1/bbcode.html - редактор ББ кодов (предлагаемый сразу для использования в админке и комментариях...)
http://zxs.ru/bbcode/index.html - обновленный редактор ББ кодов примеренный на админку.
Жду ваших мнений, идей, критики.
-время редактирования темы = время обновления шаблона по той-же ссылке.
Изменено mittus (2011-05-11 17:32:42)
Не в сети
#3 2011-02-10 17:27:23
Re: Клиентский интерфейс (выношу на суд)
Внутри может оно и технологично, но снаружи не зацепило (а шаблон это именно наружка). Не люблю темные тона
Цеплять нечем, ибо стараюсь максимально минимизировать html в том числе, что-бы разработчикам не приходилось ковыряться пол года в каскаде кода для правки шаблона под себя или смены дизайна. Т.е. исходный код на мой взгляд в поставляемых шаблонах должен быть предельно ясным и кратким.
Но если будут предложения по цветовым гаммам, там достаточно изменить одну картинку и выслать мне коды цветов для основных стилевых моментов - без труда сделаю 2-й вариант
Изменено mittus (2011-02-10 17:30:19)
Не в сети
#4 2011-02-10 17:44:08
Re: Клиентский интерфейс (выношу на суд)
mittus, при том, что сейчас сверстано, можно убрать как минимум 20-30% лишнего CSS и HTML, если взялся делать чистый шаблон, то делай его чистым, а не а-ля шаблон вордпресс, хотя мне пофиг )))
Не в сети
#5 2011-02-10 18:47:44
Re: Клиентский интерфейс (выношу на суд)
Trashcka, мне кажутся скверными высказывания о html, понятно что я ещё всё прооптимизирую, но разметка совсем не перенасыщена. Что касается css, у шаблона всё-таки должен быть хоть какой-то стиль по моему мнению, но оптимизации тоже вполне всё поддается. Пока на стадии создания всё бью на отдельные блоки, потом буду распределять более грамотно все стили
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Шаблон Next Generation CMS</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.5.bn.js"></script>
<script type="text/javascript" src="js/jquery.cookie.min.js"></script>
</head>
<body>
<div id="page" class="rubber">
<div id="header"> <a id="logotype" href="#"><img src="" alt="изображение" />Основной логотип</a>
<div id="navMain">
<!--верхнее меню-->
</div>
<h1>название раздела, в котором вы находитесь</h1>
<div id="search_form">
<!--форма поиска-->
</div>
<div id="login_form">
<!--форма входа-->
</div>
</div>
<div id="colum_content">
<div id="maincontent">
<div id="content">
<!--контент-->
</div>
</div>
<div id="side_bar">
<div id="in_side_bar">
<!--сайд бар-->
</div>
</div>
</div>
<div id="footer">123</div>
</div>
</body>
</html>А это разметка шаблона globlog к сравнению:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<meta http-equiv="content-language" content="ru" />
<meta name="generator" content="NGCMS 0.9.2 Release + SVN [SVN729+]" />
<meta name="document-state" content="dynamic" />
<link href="http://ngcms/engine/plugins/rating/tpl/skins/basic/rating.css" rel="stylesheet" type="text/css" />
<meta name="description" content="Здесь описание вашего сайта" />
<meta name="keywords" content="Здесь ключевые слова, через запятую (,)" />
<link href="http://ngcms/templates/globlog/css/style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="http://ngcms/engine/includes/js/functions.js"></script>
<script type="text/javascript" src="http://ngcms/engine/includes/js/ajax.js"></script>
<title>Заголовок вашего сайта : Главная страница</title>
</head>
<body>
<div id="loading-layer"><img src="http://ngcms/templates/globlog/images/loading.gif" alt="" /></div>
<div class="min_width">
<div class="main">
<!--header -->
<div id="header">
<div class="indent">
<div class="logo">
<h1><a href="/">Логотип</a></h1>
<div><span>Слоган сайта</span></div>
</div>
</div>
<div class="side_left_menu">
<div class="side_right_menu">
<div class="side_top_menu">
<div class="left_top_menu">
<div class="right_top_menu">
<div class="block_search">
<!--форма поиска-->
</div>
<div class="menu">
<div class="mw_login">
<!--верхнее меню-->
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="side_left">
<div class="side_right">
<div class="side_top">
<div class="side_bot">
<div class="left_top">
<div class="right_top">
<div class="left_bot">
<div class="right_bot">
<div class="indent">
<div class="w100">
<div class="column_center">
<div class="indent_center">
<div class="side_left_2">
<div class="side_right_2">
<div class="side_top_2">
<div class="side_bot_2">
<div class="left_top_2">
<div class="right_top_2">
<div class="left_bot_2">
<div class="right_bot_2">
<!--контент-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="side_bar">
<!--сайд бар-->
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<!--футер-->
</div>
</div>
</div>
</body>
</html>Изменено mittus (2011-02-10 18:54:56)
Не в сети
#6 2011-02-10 19:14:57
Re: Клиентский интерфейс (выношу на суд)
<div id="page" class="rubber">Не понятно зачем и класс и айди? И вместо page лучше юзать так сказать устоявшийся айди container, раз делаешь для публики )
<div id="navMain">
<!--верхнее меню-->
</div>Меню явно лучше делать списком, посему зачем еще и див?
<h1>название раздела, в котором вы находитесь</h1>Не есть хорошо, т.к. на внутренних лучше в Н1 пихать не заголовок раздела где находишься.
<div id="search_form">
<!--форма поиска-->
</div>
<div id="login_form">
<!--форма входа-->
</div>Тут конечно все зависит от стиля, но раз для людей то для формы явно просто через form, а логин через список.
<div id="maincontent">
<div id="content">
<!--контент-->
</div>
</div>
<div id="side_bar">
<div id="in_side_bar">
<!--сайд бар-->
</div>
</div>Этих конструкций не поняла, зачем по 2 дива?
Зачем использовать после каждой новости див с очисткой, если правильнее делать через оверфлов.
Ну и по CSS, если для людей, то надо его проще и нижним регистром.
Такие конструкции p.center лучше не юзать, т.к. тормозит браузер.
Зачем писать #navMain li a если и так понятно, что линк в #navMain, также из-за этого тормозит браузер.
Зачем писать сжато #search_form{padding:2px 3px;bottom:12px;padding:2px если это для людей, читать не удобно.
Ну и так далее, и это только при беглом осмотре за пол минуты.
Изменено Trashcka (2011-02-10 19:15:22)
Не в сети
#7 2011-02-10 20:54:35
Re: Клиентский интерфейс (выношу на суд)
#page => #conteiner +
class="rubber" - отвечает за резиновую верстку, подумаю еще как более изящно решить этот вопрос.
#navMain - внутри вложен ul список с меню, нужно на тот случай, если ul>li будет задаваться через шаблонизатор, что-бы идентификатор не терялся за пределами main.tpl
h1 - если честно, пока еще не продумал как в CMS правильно организовать этот вопрос, т.к. по идее в первом теге h1 должно находится то-же, что и в title для лучшей индексации поисковиками. (если можно, распиши подробнее как тут на твой взгляд будет лучше сделать)
по #login_form у меня работает jQuery функция, которая её отображает итп... #search_form я просто позиционирую, причина та же, что и с #navMain, что-бы идентификатор не оказывался за пределами main.tpl, но идентификатор можно задать и самой форме...
Насчет формы входа списком, не совсем понял - зачем это нужно в конкретном случае, поясни пожалуйста
#maincontent.... по два дива нужно для того, что-бы ширина левого блока была автоматической для резины и можно было расставить паддинги со своими стилями для #content, #in_side_bar
Див с очисткой в конкретном случае в дополнение выполняет функцию hr, также над ним сразу идет текст новости, не вложенный в дивы, где можно ставить overflow
По-поводу p.center, #navMain li - скинь ссылку, где почитать можно.
CSS пишу в строчку для себя, у меня есть автоматическая штука, которая потом в один сделает его правильным
Не в сети
#8 2011-02-10 21:18:59
Re: Клиентский интерфейс (выношу на суд)
mittus, так и айди котейнеру можно задать резину.
#navMain можно и списку назначить, разве, что если меню надо выводить блоком, то просто дописать это свойство и все. Теряться за пределами не будет, по крайней мере у меня не теряется, зачастую так пишу.
по Н1 это вообще зависит от многих параметров сайта, очень часто при оптимизации в нем заголовок не пишу ) но стандартно да, Н1=титл +300-500 символов текста, Н2 + 300-500 символов текста и т.д., Н3, Н4 ключевики.
Форма логина состоит минимум из 4 строк: 2 инпата, пипка входа, и линки на рег. и вост.пароля, с помощью списка можно будет легко менять вид отображения меняя только CSS.
По 2 дива все равно не поняла логики, если и одного хватает с головой, иной раз и без них верстаю, т.к. левую границу держит контейнер.
С сайтбаром одного точно хватает.
По поводу почитать?, без понятия где можно, ну начать стоит с - как работает браузер, рендеринг и т.п., кстати как раз где-то неделю назад начала писать статью на эту тему и забросила )))
Изменено Trashcka (2011-02-10 21:19:16)
Не в сети
#9 2011-02-10 23:03:02
Re: Клиентский интерфейс (выношу на суд)
Trashcka, смысл в том, что при отсутствии класса вёрстка становится фиксированной. С одним идентификатором это реализовать будет невозможно.
С #navMain соглашусь, но подождем когда twig появится в шаблонах, тут надо именно от него отталкиваться будет, а-то мало-ли..
Форма логина всё-таки не такой уж и шаблонный предмет, вместе с формой поиска. В зависимости от концепций дизайна разметка у инпутов может быть абсолютно разной и менять html все-равно придется, соответственно в моём случае нет смысла насыщать формы лишними тегами.
По 2 дива - пофиксил где это возможно
--по ссылке шаблон обновил
Не в сети
#10 2011-02-10 23:54:19
Re: Клиентский интерфейс (выношу на суд)
Trashcka, смысл в том, что при отсутствии класса вёрстка становится фиксированной. С одним идентификатором это реализовать будет невозможно.
Первый раз такое слышу, пример:
HTML
<div id="container-primer">
<div id="content-primer">
КОНТЕНТ
</div>
<div id="sidebar-primer">
САЙТБАР
</div>
</div>
CSS
#container-primer { background: #CCC; }
#content-primer { float: left; width: 60%; background: #AAA; }
#sidebar-primer { float: right; width: 40%; background: #EEE; }
либо CSS
#container-primer { margin: 0 auto; width: 500px; background: #CCC; }
#content-primer { float: left; width: 60%; background: #AAA; }
#sidebar-primer { float: right; width: 40%; background: #EEE; }
Или у тебя понятие резина - другое?
Не в сети
#11 2011-02-11 00:01:01
Re: Клиентский интерфейс (выношу на суд)
Trashcka, кликни на "Кликни на меня!!!", удалится класс "rubber" и вёрстка станет без него фиксированной ))) Суть в этом... Т.е. что-бы пользователь шаблона сам решил что ему нужно - резина или фикс. верстка.... В конце наверное уберу класс и оставлю инструкцию по замене 2-х строчек css кода для перехода на резину. Посмотрим )
Не в сети
#12 2011-02-11 00:09:24
Re: Клиентский интерфейс (выношу на суд)
mittus, т.е. это ты еще и яву хочешь подгружать, дабы он кукисы запоминал кто что выбрал? Это уже получается не чистый шаблон, а навязывание своего.
Ладно забей ) лучше делай ))
Не в сети
#13 2011-02-11 00:13:57
Re: Клиентский интерфейс (выношу на суд)
Trashcka, да нет, явой я бы не дергался с css вообще. Это разработчику предлагается внести нужную ему настройку самому в шаблоне. Просто немного предусмотрительности в css xDD
Изменено mittus (2011-02-11 00:16:14)
Не в сети
#14 2011-02-12 09:14:07
Re: Клиентский интерфейс (выношу на суд)
Добавил модуль для работы с постраничным выводом комментариев с использованием хэшей, вместо "plugin/comments/show/?news_id=7&page=2" : http://chartercenter.ru/mittus/comments.html
Просьба потестить, оставить свои замечания по работе скрипта и возможные решения по оптимизации кода.
Для принудительной записи хэшей в хистори IE используется jQuery плагин http://chartercenter.ru/mittus/js/jquery.haschange.js
Функция отвечающая за это всё:
var maxLength = 25, defHash = 1, tail = 0, comment = $('#comments').find('div.hash'), comLength = comment.length, pages = Math.ceil(comLength/maxLength), container = $('.pages'), arrChange = function(){
var arrFirst = container.find('.arr:first'), arrLast = container.find('.arr:last'), iback = defHash-1, inext = defHash+1;
if(pages > comLength/maxLength) tail = 1; else tail = 0;
if(location.hash){
if(iback>0) arrFirst.css('visibility','visible').attr('href','#page-'+iback);
else arrFirst.css('visibility','hidden');
if(inext <= comLength/maxLength+tail) arrLast.css('visibility','visible').attr('href','#page-'+inext);
else arrLast.css('visibility','hidden');
} else
if(comLength > maxLength){
defHash = 1;
arrFirst.css('visibility','hidden');
arrLast.attr('href','#page-2');
}
}
$(window).bind('hashchange',function(){
var active = container.find('span'), error = $('#error');
if( container.is(':empty') && comLength > maxLength){
var s = '<a class="arr" href="#">←</a>';
for(i=1;i<=pages;i++){
s += '<a href="#page-'+i+'">'+i+'</a> ';
}
s += '<a class="arr" href="#">→</a>';
container.html(s);
}
active.replaceWith('<a href="#page-'+defHash+'">'+defHash+'</a>');
if(location.hash){
var i = location.hash.split('#page-');
defHash = Number(i[1]);
arrChange();
} else arrChange();
var getactive = container.find('a:eq('+defHash+')'), calcrange = defHash*maxLength, expended = calcrange-maxLength;
comment.css('display','none');
if((defHash<=comLength/maxLength+tail) && (defHash > 0)){
getactive.replaceWith('<span>'+defHash+'</span>');
error.css('display','none');
for(i=expended;i<calcrange;i++){
comment.eq(i).css('display','block').html('Комментарий #'+Number(i+1) +' на '+defHash+' страничке. Максимальное число комментариев на одной странице: '+maxLength );
}
} else error.css('display','block');
});
$(window).trigger('hashchange');Описание работы: комментарии загружаются на стороне сервера в div блоки с классом hash для каждого коммента, всё это обрамляется блоком с id="comments". Далее скрипт смотрит максимальное кол-во комментариев на страничке (настройка minLength) и сравнивает это с их кол-вом. Если больше, тр создается постраничный листинг, затем выводится 1-я группа комментов. Стрелки в право-лево видимы в том случае, если есть куда листать, кнопки видимы все независимо от их кол-ва, так мной задумано. При клике на страничку отображаются комментарии соответствующие порядку комментариев... это сами увидите, для наглядности в комментариях пишутся номера, странички и макс. кол-во комментов на странице. Хистори работает без глюков в браузерах IE7+, FF,opera,hrom,safari. при переходе по хэшу открывается соотв. страничка соотв. параметрам хэша, при белеберде в хэше выводится сообщение об ошибке.... Вроде всё
upd прооптимизировал и исправил пару багов, теперь скорость намного выше.
Изменено mittus (2011-02-12 10:28:53)
Не в сети
#15 2011-02-17 07:28:59
Re: Клиентский интерфейс (выношу на суд)
Выложил редактор ББ кодов: http://chartercenter.ru/mittus/bbcode.html, там смотрите всё сами... Смущают картинки спойлера и хайда, если сможете - предложите что-нибудь более лицеприятное. + скоро обновлю с доделанными выпадающими списками для выборки цвета, стилей шрифтов и смайликов.
Не в сети
#16 2011-02-17 10:07:09
Re: Клиентский интерфейс (выношу на суд)
mittus, если понравится и пригодится, то забери у меня из темы http://ngcms.ru/forum/viewtopic.php?id=1605.
Не в сети
#19 2011-02-24 03:12:06
Re: Клиентский интерфейс (выношу на суд)
http://zxs.ru/bbcode/index.html - обновил редактор ББ кодов... Посмотрите пожалуйста управление форматированием текста - как на ваш взгляд было-бы лучше организовать эту выпадалку?
Не в сети
#22 2011-02-24 20:48:58
Re: Клиентский интерфейс (выношу на суд)
mittus, отлично смотрится не подскажиш как сделать как у тебя,или это ты для показа ?
Не в сети
#23 2011-02-24 20:50:34
Re: Клиентский интерфейс (выношу на суд)
magliona, А ctrl+c & ctrl+v уже не помогает?:rolleyes:
xmpp://ngcms@conf.ngcms.ru
Настройка клиента для подключения к конференции
Не в сети
#24 2011-02-24 20:51:45
Не в сети
