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

Тема в разделе "Создание шаблона", создана пользователем Izem, 12.08.2007.

  1. Offline

    Izem Недавно здесь

    Регистрация:
    08.01.2007
    Сообщения:
    53
    Симпатии:
    2
    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.
     

    Вложения:

    Последнее редактирование: 01.11.2007
  2.  
  3. Offline

    Izem Недавно здесь

    Регистрация:
    08.01.2007
    Сообщения:
    53
    Симпатии:
    2
    Ответ: 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 и далее. Все параметры скрипта снабжены комментариями и настраиваются по желанию веб-мастера как угодно.
     
    Последнее редактирование: 22.08.2007
  4. Offline

    Izem Недавно здесь

    Регистрация:
    08.01.2007
    Сообщения:
    53
    Симпатии:
    2
    Ответ: 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 браузерах.
     
    Последнее редактирование: 14.08.2007
  5. Offline

    Izem Недавно здесь

    Регистрация:
    08.01.2007
    Сообщения:
    53
    Симпатии:
    2
    Ответ: 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-код.
     
    Последнее редактирование: 14.08.2007
  6. Offline

    Izem Недавно здесь

    Регистрация:
    08.01.2007
    Сообщения:
    53
    Симпатии:
    2
    Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

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

    Если верьёзно, то beta уже скоро.
     
    Последнее редактирование: 14.08.2007
  7. Offline

    Izem Недавно здесь

    Регистрация:
    08.01.2007
    Сообщения:
    53
    Симпатии:
    2
    Ответ: 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.
     
    Последнее редактирование: 14.08.2007
  8. Offline

    Izem Недавно здесь

    Регистрация:
    08.01.2007
    Сообщения:
    53
    Симпатии:
    2
    Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

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

    так для него есть
    <!--[if IE 7]>
    <![endif]-->
    В чем проявляется? Может не стоит с 5.0 заморачиваться? Все же с 5.5 пошла более-менее приличная поддержка CSS.

    не, это footer.php

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

    Izem Недавно здесь

    Регистрация:
    08.01.2007
    Сообщения:
    53
    Симпатии:
    2
    Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

    Автор Izem (Скопировано со старого форума)
    Ага, точно, футер. Прошу прощения, это я заработался... :eek: Исправил дезинформацию.
    Да я тоже так думаю. В принципе, вполне достаточно будет общего соответствия картинки с тем же IE6. А по мелочам - ничего страшного, ИМХО. Хотя, мож, и получится его тоже уговорить, но упираться особо не буду.
    Со шрифтами в IE5.5 попробую поработать - может, и с ним договоримся. :)

    Да, точно, в IE5.x Почему-то не работает "отбойник" :-\
    Код (CODE):
    1. <div class="clr"></div>

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

    Izem Недавно здесь

    Регистрация:
    08.01.2007
    Сообщения:
    53
    Симпатии:
    2
    Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

    Автор Izem (Скопировано со старого форума)
    Если поможете - доделаю! ;) Я не всесилен, к сожалению, у меня не так много времени, и знания мои не безграничны... :( А посему, обращаюсь ко всем с просьбой: если вы знаете, как решить какую-либо проблему по нашему общему делу - пишите, пожалуйста, предложения - я всё постараюсь протестировать и, в случае удачи, вставлю в код.
    PS: Нашёл хорошую инструкцию по применению этой конструкции: ссылка - хорошо всё расписано, если кому надо (только не копируйте со страницы по этой ссылке код - он переносится с ошиибками - набирайте текст с клавиатуры!).
    sourpuss'у спасибо за идею.
     
    Последнее редактирование: 22.08.2007
  11. artlebsak
    Offline

    artlebsak Папа Джум ™

    Регистрация:
    13.04.2007
    Сообщения:
    517
    Симпатии:
    15
    Пол:
    Мужской
    Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

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

    Izem Недавно здесь

    Регистрация:
    08.01.2007
    Сообщения:
    53
    Симпатии:
    2
    Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

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

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

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

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

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


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

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

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

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

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

    Izem Недавно здесь

    Регистрация:
    08.01.2007
    Сообщения:
    53
    Симпатии:
    2
    Ответ: 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'у респект за орлиный глаз! :)
     
  14. artlebsak
    Offline

    artlebsak Папа Джум ™

    Регистрация:
    13.04.2007
    Сообщения:
    517
    Симпатии:
    15
    Пол:
    Мужской
    Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

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

    Izem Недавно здесь

    Регистрация:
    08.01.2007
    Сообщения:
    53
    Симпатии:
    2
    Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

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

    Izem Недавно здесь

    Регистрация:
    08.01.2007
    Сообщения:
    53
    Симпатии:
    2
    Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

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

    artlebsak Папа Джум ™

    Регистрация:
    13.04.2007
    Сообщения:
    517
    Симпатии:
    15
    Пол:
    Мужской
    Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

    Теперь нельзя. Подобные вопросы - в ЛС.
     
    Izem нравится это.
  18. Offline

    Izem Недавно здесь

    Регистрация:
    08.01.2007
    Сообщения:
    53
    Симпатии:
    2
    Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

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

    chilly_bang специалист

    Регистрация:
    30.04.2006
    Сообщения:
    1 545
    Симпатии:
    38
    Пол:
    Мужской
    Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

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

    sergv2005 Пользователь

    Регистрация:
    18.01.2006
    Сообщения:
    424
    Симпатии:
    20
    Пол:
    Мужской
    Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

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

    chilly_bang специалист

    Регистрация:
    30.04.2006
    Сообщения:
    1 545
    Симпатии:
    38
    Пол:
    Мужской
    Ответ: MadeYourWeb Elastic - разработка универсального современного шаблона

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

Поделиться этой страницей

Загрузка...