MadeYourWeb Elastic - разработка универсального современного шаблона CMS Joomla

MadeYourWeb Elastic

Представляю "эластичную" версию шаблона MadeYourWeb. Основные отличия от стандартного:

1. Применён метод отрицательных margin'ов, представляющий собой среднее арифметическое варианта оригинального MadeYourWeb, варианта, подсмотренного на сайте operafan.net и решения, описаного на сайте blog.html.it .
2. Левый и правый блоки шаблона фиксированные, центральная колонка - "резиновая". Правый и левый бордюры - тоже "резиновые". За счёт этого при изменении размеров окна браузера дизайн сайта искажается значительно меньше, чем при других вариантах вёрстки.
3. Улучшен внешний вид Главного меню.
4. Исправлено отображение в IE5/6 Топ-меню (реализована поддержка в IE5/6 свойства :hover для всех элементов).
5. Увеличены шрифты для большего удобства чтения материалов сайта.
6. Изменён дизайн центральной колонки шаблона. Точнее - дизайн позиций модулей user1 и user2 и wrapper'а.
7. Добавлен индикатор загрузки сайта.
8. Добавлены новые варианты вёрстки: двухколоночный с центральной + правой колонками и одноколоночный с одной центральной колонкой.
9. Реализована поддержка в IE5/6 прозрачных PNG-24.

Шаблон тестировался в браузерах IE6, FF2, Op9, IE7, Sf3, FF1, Op8 и показал практически одинаковые положительные результаты.
В IE5 и Op7 шаблон работает с незначительными погрешностями.

Шаблон разрабатывается для Joomla.v1.0.12/1.0.13 . Будет ли он работать на Mambo или более старых версиях Joomla - я не знаю. Но думаю, что на Joomla точно должен.

Код шаблона постоянно проверяется на соответствие стандартам HTML и CSS на сайте www.w3c.org .

Что запланировано:

1. Сделать интеллектуальное управление шириной сайта и бордюров лева и справа от него (В зависимости от ширины окна браузера должна изменяться и ширина сайта для более комфортной работы с ним. Бордюры по сторонам сайта тоже должны исчезать, появляться или изменять свою ширину в зависимости от ширины окна браузера. Но, однако, меньше определённого и больше определённых веб-мастером значений ширина сайта изменяться не должна для предотвращения искажения или разрушения дизайна сайта.).
2. Вставить кнопки для увеличения/уменьшения шрифта пользователем.
3. Сделать "подстройку" шаблона под увеличенные пользователем шрифты.
5. Сделать "эластичные" шаблоны на базе MadeYourWeb Red и MadeYourWeb Blue, добавить другие цвета.
6. Сделать "лёгкий" вариант шаблона MadeYourWeb Elastic, не использующего графику для модулей и меню.
7. Адаптировать шаблон для Joomla 1.5 .

Нерешённые на данный момент проблемы:

1. Несколько некорректное отображение шрифтов в IE5.5 и, особенно, IE5.0.

Посмотреть в действии самую новую версию шаблона можно на моём тестовом сайте webmaster.izem.ru/~projects/joomla10/templates .

Внимание! В связи с преездом на другой хостинг адрес тестового сайта изменился! Выше указан уже новый адрес.

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

В этом сообщении, чуть ниже, всегда находится самая свежая версия шаблона MadeYourWeb Elastic.
На данный момент - это версия 0.9.1 beta.

 

Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

Неcколько умных мыслей по поводу создания этого шаблона

На заре web-строительства, в конце 90-х, начале 2000-х, когда основу компьютерного благополучия пользователя состваляли 15-17-ти дюймовые мониторы, а 19-ка, а тем более 21-ка, были довольно большой редкостью, доступной лишь немногим гурманам, web-мастеру можно было не утруждать свою голову тем, как будет отображаться его сайт на разных мониторах и сверстать «жёсткий» 800-пиксельный дизайн или "резиновый", растягивающийся на весь экран. И этого, действительно, вполне было достаточно для комфортной работы пользователя...

Но время идёт, и мир меняется... Теперь у большинства пользователей 17-19" мониторы с 1280x1024 точками, да и широкоформатные с 1440, 1680 или 1920 точками уже совсем не редкость. Да и 2560x1600 точек встречаться изредка начали (мониторы 30"). Думаю, что уже не за горами панели на 42"...

А представляете, как забавно смотрится сайт, свёрстанный 800-ми точками на мониторе с 1680, а тем более, с 1920 точками... А ещё "интересней" будет выглядеть сайт с "простым резиновым" дизайном на широком мониторе, оптимизированным для тех же 800 точек - тонкая левая колонка, гигантская середина с контентом, уместившимся в одну строчку, и тонкая правая колонка.

Так что же делать? Получается, что теперь мы не можем использовать ни "жёсткий" дизайн, ни простой "резиновый"? В общем-то, так оно и есть, и надо признать, что старые стандарты вёрстки устарели. И использовать их уже непрофессионально. И выход, на мой взгляд, только в одном: в использовании "умного резинового" дизайна, т.е., дизайна, подстраивающегося под ширину окна браузера по какому-то "умному" алгоритму, предоставляющему посетителю сайта оптимизированную для его ширины экрана картинку. Для отличия назовём такой дизайн "эластичным".

Самый простой вариант (я не сказал, хороший ;-) ) - в том, чтобы сделать левый и правый бордюры сайта тоже "резиновыми". Тогда, в принципе, при увеличении ширины окна бордюры тоже будут увеличиваться, не давая сайту чересчур "расплываться" в ширину. Но и тут есть две проблемы: при чрезмерном увеличении окна браузера сайт всё равно "расплывётся", а при уменьшении окна, например, до 800 точек, левый и правый бордюры всё равно останутся, зазря занимая и без того дифицитное место...

Выход из положения получается такой: принудительно ограничить минимальную ширину шаблона значением, при котором шаблон гарантированно не разваливается, например, 765 точками. Далее, при увеличении ширины окна шаблон должен просто увеличиваться в ширину. Правого и левого бордюров, естественно, быть пока не должно за неимением места. Но, когда ширина сайта превзойдёт вторую ключевую точку, например, 1000 точек, то ширина сайта должна увеличиваться уже не такими темпами, и должны начать увеличиваться левый и правый бордюры. Такой вариант позволяет уменьшить влияние размеров окна браузера на дизайн шаблона. Далее, когда ширина сайта достигнет третьей ключевой точки, например, 1400 или 1600 точек, и дизайн сайта начнёт портиться из-за слишком большой ширины окна браузера, ширина сайта должна зафиксироваться, а увеличиваться будут только левый и правый бордюры сайта. Таким образом мы защитим наш сайт от чрезмерного вытягивания сайта "в горизонтальную ниточку".

Этот алгоритм решился на удивление несложным JS скриптом и сейчас тестируется. Увидеть его работу можно будет в версиях, имеющих статус RC и далее. Все параметры скрипта снабжены комментариями и настраиваются по желанию веб-мастера как угодно.

 

Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

Автор Izem (Скопировано со старого форума)

MadeYourWeb Elastic v0.4.0 alpha :

[ + ] Добавлен индикатор загрузки сайта.

Долго думал, куда бы его поместить... Потом обратил внимание на пустующее окошко поиска по сайту. "Эврика!" - Вскричал я. :-X
Так на сайте появился индикатор загрузки...


MadeYourWeb Elastic v0.4.1 alpha :

[ V ] Исправлен путь к изображению индикатора в index.php .
[ V ] Исправлена строка загрузки изображения индикатора в templateDetails.xml .


MadeYourWeb Elastic v0.4.2 alpha :

[ V ] Оптимизирован путь к изображению индикатора в index.php .

Посмотрел, как грузятся картинки в шаблоне:

Код (CODE):

1. <?php echo '<img src="' .$mosConfig_live_site. '/templates/' .$GLOBALS['cur_template']. '/images/logo.gif" alt="Логотип" />'; ?>

Элементарно, Ватсон! Сделал так же. Теперь ничего править не надо, в каком бы каталоге не стоял сайт - путь к изображению индикатора выставляется автоматически. За идею спасибо AlexAGF'у .


MadeYourWeb Elastic v0.4.3 alpha :

[ V ] Подправлено отображение pathway'я в не-IE5/6 браузерах.

 

Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

Автор Izem (Скопировано со старого форума)

MadeYourWeb Elastic v0.5.0 alpha :

[ V ] Доделан двухколоночный дизайн.
[ + ] В код файла index.php добавлены комментарии.
[ V ] Частично упорядочен CSS-код.


MadeYourWeb Elastic v0.5.1 alpha :

[ V ] В файле index.php подправлены комментарии.
[ V ] Частично оптимизирован CSS-код.

 

Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

Автор Izem (Скопировано со старого форума)

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

Если верьёзно, то beta уже скоро.

 

Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

Автор Izem (Скопировано со старого форума)

Так как все значительные ошибки работы исправлены, считаю возможным объявить начало публичного beta-тестирования шаблона. Посему, большая просьба ко всем, кто хотел бы помочь нашему общему делу: потестируйте, пожалуйста, шаблон во всех возможных режимах. Обо всех замеченных глюках и ошибках сообщайте в этой теме.


MadeYourWeb Elastic v0.6.0 beta :

[ V ] Восстановлена работа шаблона в IE5.0 и IE5.5.

В IE5 блок user2 "съезжал" под блок user1. Выяснилось, что можно это дело исправить, прописав в свойствах CSS объемлющего DIV'а width: 100% , и всё встанет на свои места. Однако, с width: 100% IE6 работает неправильно, а остальные браузеры в данном случае к нему равнодушны. Поэтому решено было использовать знаменитый CSS-хак для IE5:

Код (CODE):

1. div#centercol_inner {
2.     padding: 0;
3.  
4.     width: 100%;             /* Для IE5 */
5.     margin: 0 7px 0 7px;     /* Для IE5 */
6.     voice-family: "\"}\"";   /* IE5 Hack */
7.     voice-family: inherit;   /* IE5 Hack */
8.  
9.     width: auto;             /* Для всех */
10.     margin: 0 10px 0 10px;   /* Для всех */
11. }
12.  
13. html>body div#centercol_inner { width: auto; }   /* IE5 Hack Fix :-) */

MadeYourWeb Elastic v0.6.1 beta :

[ V ] Исправлено оформление строк подменю главного меню.

М-даа... Проверил валидность кода - ошибка. Выяснилось, что в рекламной гиперссылке в футере (footer.php) был прописан атрибут "alt" (видимо, перепутали с "title"). Естественно, по стандарту, в ссылке может быть "alt"!. Заменил его на "title" - сайт сразу же стал проходить валидацию.

В связи с этим прошу разработчиков сборки Joomla 1.0.12RE исправить официальный дистрибутив RE.

 

Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

Автор sourpuss (Скопировано со старого форума)

так для него есть
<!--[if IE 7]>
<![endif]-->

В чем проявляется? Может не стоит с 5.0 заморачиваться? Все же с 5.5 пошла более-менее приличная поддержка CSS.

не, это footer.php

Глюки в IE 5.5: местами косяки со шрифтами + то, что творится на главной

 

Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

Автор Izem (Скопировано со старого форума)

Ага, точно, футер. Прошу прощения, это я заработался... Исправил дезинформацию.

Да я тоже так думаю. В принципе, вполне достаточно будет общего соответствия картинки с тем же IE6. А по мелочам - ничего страшного, ИМХО. Хотя, мож, и получится его тоже уговорить, но упираться особо не буду.

Со шрифтами в IE5.5 попробую поработать - может, и с ним договоримся.

Да, точно, в IE5.x Почему-то не работает "отбойник" :-\

Код (CODE):

1. <div class="clr"></div>

Посему и рассыпаются блоки при ширине окна менее 1100 точек. Попробую разобраться.
Может быть, поможет обёртывающий DIV вокруг user1 и user2 .

 

Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

Автор Izem (Скопировано со старого форума)

Если поможете - доделаю! Я не всесилен, к сожалению, у меня не так много времени, и знания мои не безграничны... А посему, обращаюсь ко всем с просьбой: если вы знаете, как решить какую-либо проблему по нашему общему делу - пишите, пожалуйста, предложения - я всё постараюсь протестировать и, в случае удачи, вставлю в код.

PS: Нашёл хорошую инструкцию по применению этой конструкции: ссылка - хорошо всё расписано, если кому надо (только не копируйте со страницы по этой ссылке код - он переносится с ошиибками - набирайте текст с клавиатуры!).
sourpuss'у спасибо за идею.

 

Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

Мгм... Вот думаю удалить всё "скопировано со старого форума" как флуд и ставить только одно сообщение о новом, со ссылкой на тему на старом форуме. Убедите, что этого делать не стоит.

 

Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

Убеждаю (как я понял, разговор про приписки "перенесено со старого форума"):

1. Я долго пробовал разные варианты, прежде чем прийти к такой формуле.

2. Если не сделать ссылку на автора, читателям темы будет непонятно, с чего это вдруг Izem сам с собой так оживлённо разговаривает. Если просто написать Автор Ladm, то читатели, скорее всего подумают, что это цитата из какого-то сообщения. А мне хотелось сохранить структуру и дух обсуждения темы со старого форума.

3. Надеюсь, Вы знаете, что 1 лишний килобайт на все приписки - это очень мало.

4. Ссылку на старый форум давать смысла нет - он всё равно будет через некоторое время удалён.


Убеждаю (если имелись ввиду дублированные со старого форума сообщения):

1. Насчёт флуда не согласен. (Wikipedia: Флуд (от англ. flood — наводнение) — пустословие, сообщения в интернет-форумах и чатах, занимающие (во многих случаях) большие объёмы и не несущие какой-либо информации или очень малое количество полезной информации.) Под определение "флуд" ни одно из этих сообщений не подходит.

2. Если имелось ввиду, что нужно продолжить здесь тему со старого форума с того места, на котором она прервалась там, то отвечаю. Пользователям будет неудобно переключаться с одного форума на другой для следования нити обсуждения. И не забываем, что старый форум будет удалён! А тогда смысл обсуждения вообще будет потерян.

PS: Извиняюсь, если моё мнение не совпало с Вашим.

PPS: А почему просто не сконвертировали старый форум в новый? В старом - бесценный кладезь знаний по Джумле остался... Жалко, если он потеряется. Иногда ведь само обсуждение бывает даже полезнее результата оного.

 

Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

Автор Izem (Скопировано со старого форума)

MadeYourWeb Elastic v0.6.2 beta :

[ V ] Убрано неоправданное появление горизонтальной полосы прокрутки в IE6.


Странно. В версии 0.6.1 я уже убирал горизонтальную полосу прокрутки в IE6. Но потом она опять появилась! :-\
Похоже, происходит это потому, что IE6 неправильно обрабатывает width: 100%...

Найден такой выход. Как я понимаю, в CSS, если не указать явно ширину блока, то он раскидывается на 100% ширины сам. А посему, мы смело можем удалить большинство width: 100% в нашем css-файле. Что я и сделал. Отображение шаблона нигде не изменилось. А 6-й ослик, всё-таки, спрятал свою горизонтальную прокрутку!

PS: "И я сыт, и овцы целы..." - Сказал волк, съев пастуха.
PPS: sourpuss'у респект за орлиный глаз!

 

Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

Старый форум будет удалён через полгода. За это время шаблон уже должен стать стабильным и столь навороченным, что о пред истоках конечные пользователи и не вспомнят. Кладезь знаний переносим сюда - http://joomla-docs.ru А форум - это среда общения, а не хранения информации. Пусть тема останется уже как есть. Хотя рекомендую оптимизировать и удалить всё лишнее для удобства ориентирования в информации.

 

Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

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

 

Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

Ladm, а что, свои сообщения теперь нельзя удалять с форума? :-\ Или я просто не понял как?

 

Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

Теперь нельзя. Подобные вопросы - в ЛС.

 

Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

Ладно, я добью тему, а потом скину в ЛС номера страниц, которые надо удалить...

 

Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

вопросик: как выглядит текст в mainbody при разрешениях больше 1280 пикселей по горизонтали? нет ли такого эффекта, что, если текста мало, он вытягивается в одну строчку? я когда-то тоже был приверженец эластичного дизайна, но когда мониторы стали выдавать большие разрешения, заметил этот неудачный эффект и начал фиксировать ширину.

 

Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

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

 

Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

вот и я об этом! так он таки фиксирован от определённой ширины?