JHtml::_('bootstrap.tooltip');

Я нашел эту строчку в модуле mod_breadcrumbs.

Сделал свой шаблон модуля, закомментировав эту строку. И вроде все хорошо, но после установки JoomShopping-а, меня опять встречали эти «незванные гости». Полазив по файлам нашел подобную строчку в файле components/com_jshopping/lib/factory.php на 167 строке и опять закомментировал.

JHtml::_('bootstrap.framework');

Правда в ситуации с модулем я переопределил шаблон, но как быть с JS пока не знаю. Возможно при обновлении (а у меня версия 4.1.0) файл перепишется. Так что если к вам лезут гости — ищем в модулях, компонентах строку: JHtml::_('bootstrap.

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

Итак, заходим на CDN Яндекса и видим там… только JS бутстрапа (на момент написания статьи они уже добавили CSS). Но я ж дотошный — и начал вручную в адресную строку вбивать остальные составляющие бутстрапа, в итоге там присутствуют все составляющие, кроме LESS. Тоесть там есть и 2 файла CSS и 2 файла PNG с белыми и черными иконками.

Кстати, на момент написания поста я вставил код бутстрапа 2.2.2… но зайдя на бутстрап, увидел, что там уже 2.3.0 — исправил в коде — все работает.

<script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script>
 <script src="http://yandex.st/bootstrap/2.3.0/js/bootstrap.min.js"></script>
 <link rel="stylesheet" href="http://yandex.st/bootstrap/2.3.0/css/bootstrap.min.css">
 <link rel="stylesheet" href="http://yandex.st/bootstrap/2.3.0/css/bootstrap-responsive.min.css">

Да… еще забыл упомянуть про иконки — они полноценно работают.

Основные плюсы: при обновлении бутстрапа — просто меняем циферки, например сейчас обновил 2.2.2 на 2.3.0 и не надо качать новый бутстрап и перезаливать файлы. Если пользователь до вас уже был на подобном сайте с бутстрапом от яндекса — то он вообще ничего качать не будет — все в кэше.

То, чего мы все давно ждали наконец то свершилось! Выход Joomla! 3.0. Bootstrap, отказ от Mootools, новый интерфейс и многое другое. Революция для джумловодов, или очередное обновление несущее в себе незначительные изменения аля «Умный поиск»? Рассмотрим ее поближе, и даже пощупаем...

Ну что же, приступим к обзору новых возможностей и изменений в Joomla! 3.0?!

• Интеграция фреймворка нового поколения Twitter Bootstrap в медиа пакет JUI (Joomla User Interface)
• Новый отзывчивый шаблон администраторской части Isis и новый интерфейс, поддерживающий мобильные устройства(!)
• Новый отзывчивый шаблон фронтальной части Protostar, построенный на обновленном Twitter Bootstrap
• Драйвер PostgreSQL. Теперь возможно создавать Joomla сайты на PostgreSQL.
• Поддержка PHP Memcached
• Использование JFeed вместо SimplePie
• Установка языковых пакетов напрямую из менеджера расширений
• Группа пользователей Гость теперь присутствует по умолчанию
• Разрешено сохранять пустые материалы
• Новый модуль статистики администратора
• Обновление TinyMCE до версии 3.5.6
• Постоянная чистка старого и ненужного кода, файлов, полей базы данных и таблиц, а также улучшенная стандартизация таблиц
• Улучшения Умного Поиска
• Большая работа по стандартизации и согласованности стилей кода
• Юнит-тестирование и обновленные системные тесты в CMS
• Использование конкретного пункта меню в модуле меню
• Для улучшения SEO добавлен тег канонических ссылок в head. Позволит забыть наконец то о дублях
• Обновление платформы Joomla! до версии 12.2

•   34 добавленных функций, учтенных в последних версиях Joomla! 2.5.x
•   491 исправление с багтрекера
•   отсутствие явных проблем с безопасностью движка (на то она и Stable)

Собственно официальная новость на этом и заканчивается. Благодарности можно почитать и в оригинале.

Скачать можно так же на странице официального релиза Joomla! 3.0 

А что же со старыми версиями?

Joomla! 1.5. Ну тут все довольно просто — поддержка этой версии совсем скоро прекратится. Как обещают разработчики это случится «вскоре после выхода Joomla! 3.0», но пока она поддерживается, правда исключительно в плане безопасности.

Joomla! 2.5. Здесь собственно тоже никаких сложностей — Joomla! 2.5 является LTS версией и будет поддерживаться аж до 2014 года, поэтому те, кто уже начал использовать эту версию Joomla не переживайте еще пару лет, если вы конечно не хотите головной боли с обновлениями, ведь придется вносить модификации и в расширения и в шаблоны.

И хоть официально демка Joomla! 3.0 не объявлена, она все же есть и находится по адресу http://joomla30.cloudaccess.net/ 

Продолжение следует...

Вывод на смартфон (в данном случае окно браузера уменьшено по ширине, для появления требующегося эффекта)

Вывод на смартфон при активации кнопки показа меню (кнопка удобно подходит для нажатия пальцем ) Код для формирования топ-бара следующий:

  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <a href="/" class="brand visible-phone"><?php echo $app->getCfg('sitename'); ?></a>
        <div class="nav-collapse"><jdoc:include type="modules" name="topmenu" style="none" /></div>
        <div class="hidden-phone"><jdoc:include type="modules" name="search" style="none" /></div>
        <div class="pull-right hidden-phone"><jdoc:include type="modules" name="login" style="none" /></div>
      </div>
    </div>
  </div>

В данном случае формирование кнопки происходит следующим образом:

        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>

Еще одной не маловажной возможностью bootstrap является возможность контролировать вывод блоков на том или ином устройстве (более подробно рекомендую прочитать в документации, ссылки есть выше, приведу краткую таблицу условий):

По поводу бара думаю всё понятно, кому не понятно могут спрашивать или читать доки.

Переходим к меню, расположенному в верхнем баре и содержащем 1-2 уровня.

Меню формируется не совсем стандартно для J!, следовательно придется привести вывод модуля к требующемуся виду:

<ul>
  <li><a rel="nofollow" href="#">Ссылка</a></li>
  <li><a rel="nofollow" href="#">Ссылка</a></li>
  <li>
    <a rel="nofollow" href="#">Account</a>
    <ul>...</ul>
  </li>
</ul>

<?php defined('_JEXEC') or die; ?>
<ul class="nav">
<?php foreach ($list as $i => &$item) :
    $id = '';
    if($item->id == $active_id) { $id = ' id="current"'; }
    $class = '';
    if(in_array($item->id, $path)) { $class .= 'active '; }
    if($item->deeper) { $class .= 'dropdown '; $itemdropdown = 1; $id = ' id="mdr"'; }
    $class = ' class="'.$class.'item'.$item->id.'"';

    echo '<li'.$id.$class.'>';

    if($itemdropdown == 1) {
      $linktype = $item->title;
      echo '<a class="dropdown-toggle" data-toggle="dropdown" href="#mdr" '. $title .'>'. $linktype .'<b class="caret"></b></a>';
      $itemdropdown = 0;
      $id = '';
    } else {
    switch ($item->type) :
        case 'separator':
        case 'url':
        case 'component':
            require JModuleHelper::getLayoutPath('mod_menu', 'default_'.$item->type);
            break;

        default:
            require JModuleHelper::getLayoutPath('mod_menu', 'default_url');
            break;
    endswitch;
    }

    if ($item->deeper) { echo '<ul class="dropdown-menu">'; }
    elseif ($item->shallower) {
        echo '</li>';
        echo str_repeat('</ul></li>', $item->level_diff);
    }
    else { echo '</li>'; }
endforeach; ?>
</ul>
<script type="text/javascript">
jQuery('.dropdown-toggle').dropdown()
</script>

• Bootstrap — оригинал документации.
• Bootstrap от Twitter'а — перевод документации.

Сразу перейдем к разработке шаблона: Начнем с того, что оптимально использовать html5+css3 при верстке сайта, т.к. сам фреймворк использует данную связку, т.е. структура файла index.php шаблона будет примерно следующей :

<?php defined('_JEXEC') or die; ?>
<?php echo '<?'; ?>xml version="1.0" encoding="<?php echo $this->_charset ?>"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
  <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bootstrap/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bootstrap/bootstrap-responsive.css" type="text/css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <jdoc:include type="head" />
  <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>

<body>

...

  <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bootstrap/widgets.js"></script>
  <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bootstrap/plugins/bootstrap-alert.js"></script>
  <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bootstrap/plugins/bootstrap-button.js"></script>
  <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bootstrap/plugins/bootstrap-carousel.js"></script>
  <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bootstrap/plugins/bootstrap-collapse.js"></script>
  <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bootstrap/plugins/bootstrap-dropdown.js"></script>
  <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bootstrap/plugins/bootstrap-modal.js"></script>
  <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bootstrap/plugins/bootstrap-tab.js"></script>
  <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bootstrap/plugins/bootstrap-tooltip.js"></script>
  <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bootstrap/plugins/bootstrap-popover.js"></script>
  <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bootstrap/plugins/bootstrap-typeahead.js"></script>

</body>
</html>

Итого:

• Указываем DOCTYPE — (для html5 и соответственно для адекватной обработки размера окна браузера используемого устройства)
• Указываем mteta-tag для обработки динамических запросов -

  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

• Затем грузим jQ и CSS фреймворка, затем подключаем заголовки выводимые самой Joomla и только после этого подключаем наш CSS, для переопределения стилей bootstrap.
• Сам фреймворк и используемые для него библиотеки оптимально вынести в конец документа.

Дополнительно желательно отключить mootools, чтобы в последствии не пришлось использовать jQuery.noConflict():

unset($this->_scripts[$this->baseurl.'/media/system/js/mootools-core.js'],
      $this->_scripts[$this->baseurl.'/media/system/js/mootools-more.js'],
      $this->_scripts[$this->baseurl.'/media/system/js/core.js'],
      $this->_scripts[$this->baseurl.'/media/system/js/caption.js']);
if (isset($this->_script['text/javascript']))
{
   $this->_script['text/javascript'] = preg_replace('%window\.addEvent\(\'load\',\s*function\(\)\s*{\s*new\s*JCaption\(\'img.caption\'\);\s*}\);\s*%', '', $this->_script['text/javascript']);
   if (empty($this->_script['text/javascript']))
      unset($this->_script['text/javascript']);

Кроме того, если требуется поддержка html5/css3 в браузерах ie младших версий, то стоит подключить еще и стили и скрипты для этих браузеров.

Модальное окно в дефолтном варианте не самый лучший выбор для показа изображений, по этому кроме него решено подключать jquery.colorbox, т.е., при весе 10Кб, поддерживает фреймы, слайдинг изображений, AJAX, видео, галаереи изображений, флэш, плюс достаточно прост в настройке и модификации, а т.к. мы используем еще и jQ, то вполне можно подключить еще доп. библиотеку слайдера на 5-20 строк кода.

На финальной стадии проекта оптимально все скрипты и CSS объеденить в два файла, провести компрессию и упаковать в gzip самостоятельно, это даст ощутимый выигрыш в скорости, но при этом потребуется перенести все скрипты из компонентов в данный единый файл. Объединять плагинами — не рекомендую, больше проблем в итоге будет.