Разработка шаблона модуля Разработка шаблона модуля «Login»: вывод формы регистрации в SqueezeBox (Joomla 1.6/Joomla 1.7/Joomla 2.5).

SqueezeBox — стандартный для Joomla тип модального окна, использующий в качестве основной библиотеки mootools.

Для подключения SqueezeBox в шаблоне используется конструкция:

JHTML::_('behavior.modal');

, это добавит в страницы следующий JS:

window.addEvent('domready', function() { SqueezeBox.initialize({}); SqueezeBox.assign($$('a.modal'), { parse: 'rel' }); }); 

В Joomla 1.6/1.7/2.5 есть возможность создания собственных альтернативных шаблонов компонентов/модулей, и возможность выбора их в настройках, ей и воспользуемся.

Итак, в предыдущем топике я слегка описал, что такое LESS, а сейчас я расскажу вам как начать использовать LESS вместо CSS.

Первое что мы сделаем, это переименуем наш css файл в less

styles.css = styles.less

Далее нам необходимо откомпилировать наш LESS файл и дать браузеру CSS (тоесть сделать почти обратное действие переименованию). И только после этого мы сможем полноценно использовать динамику в наших таблицах стилей. Есть несколько вариантов компиляции:

• Специальной программой (компилятором) компилируем LESS в CSS. После этого вставляем готовый файл на сайт.
  минус — надо сначала писать — потом компилировать — заливать и проверять на рабочем сайте
  Но иногда именно локально и требуется. Я попробовал три приложения, 1,3 и 4 и оставил 4… но это уже на ваш личный выбор.

  Ссылки:

  • LESS.app (для Mac OS)
  • WinLESS (для Windows)
  • LESS parser (для Adobe AIR — значит кросплатформенное)
  • Crunch (для Adobe AIR — значит кросплатформенное) — есть компрессия

Не буду описывать особенности данного фреймворка, для этого есть документация:

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

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

Я обращаю внимание, что зачастую вебмастера и контент-менеджеры очень наплевательски относятся к изображениям на сайте. Это заключается в том, что они берут фотографию и вставляют ее на сайт в исходном варианте. Потом ставят ширину (или высоту или и то и другое) и всё. Фотография на сайте вроде небольшая по размеру, но «вес» значителен, что неблагоприятно сказывается на скорости загрузки страницы.

Попытаюсь поставить таких людей на путь истинный.

Для примера я взял одну из своих фотографий. Оригинальный размер: 2816 × 2112, размер файла 2.6 MB. Много, не правла-ли? Попробуем вставить ее на сайт вышеупомянутым «рукотазым» методом.

<img src="original_photo.jpg" width="640" height="480">

Все нормально, фото небольшое, но весит так-же как и раньше — 2.6 MB. Этого доспускать нельзя. Открываем графический редактор и меняем размер фото, потом сохраняем как JPG.

Размер изображения 640x480, размер файла 603 kb.

Возможно вы обратили внимание, что эта картинка открылась не сразу. Это потому, что размер файла все-равно велик. Уменьшаем дальше

SqueezeBox является стандартным для joomla модальным окном, основанном на mootools (стандартный фреймворк joomla), в большинстве случаев данного модального окна достаточно как для сайта-визитки, так и для портала, поддерживаются браузеры: IE 6+, Opera 9, Firefox 1.5+, Safari 3+.

Плагин поддерживает вывод:

• ajax запросы (возможность получения контента с помощью ajax);
• вывод/копирование элементов уже существующих на странице;
• iframe;
• изображений (без поддержки галереи, т.е. вывод одиночных изображений);
• видео с YouTube (flash).

Я использую при верстке шаблонов для Joomla не CSS, а LESS. Кто знаком с этим динамическим языком стилевой разметки (динамическим CSS), можете пропустить данный топик и сразу написать комментарий, остальным советую обратить внимание на текст ниже. Я планирую написать так сказать «цикл» статей по данной тематике, надеюсь у меня хватит сил, терпения, времени и т.д.

Есть всякие официальные текстовки (en ru) но я расскажу все по своему.

Что такое LESS и чем он отличается от CSS?

• LESS это тот-же самый CSS, в который добавили динамики.

Что за динамика?

• Это когда вы можете сделать какое-либо условие, смешать свойства, пользоваться переменными.

Для чего это?

• Самый простой пример — вы указали цвет ссылки, и при наведении хотите сделать ее темнее. Вместо того, чтобы открывать какие-нибудь графические программы для подбора цвета, вам нужно в свойстве

Основные ошибки при верстке текста (контента) на сайте.

Несемантическая верстка

• Списки
  

  Неверно:

   - Пункт один;&lt;br&gt;<br /> - Пункт два;&lt;br&gt;<br /> - Пункт три.&lt;br&gt;<br /> &lt;br&gt;<br /> 1. Пункт один;&lt;br&gt;<br /> 2. Пункт два;&lt;br&gt;<br /> 3. Пункт три. 

  
  

  Верно:

   
  • Пункт один;
   
  • Пункт два;
   
  • Пункт три.
  1. Пункт один;
   
  2. Пункт два;
   
  3. Пункт три.
• Параграфы
  

  Неверно:

  Параграф один. <br><br>
  
  Параграф два.
  
  

  Верно:

  Параграф один.

  <code><br />

Параграф два.

Неверно:

<code><span style="text-size: 24px;">Заголовок</span><br />

Подзаголовок

<code><br />

Подзаголовок

Верно:

<code><br />

<code><br />

Встречаются и другие ошибки, но эти зачастили. Советую загуглить запрос «семантическая верстка». Там конечно рассказано про CSS, но все те правила нужно использовать и при верстке текстов. Основной смысл такой — если делаем спискок, то делает его тегом списка, если делаем заголовок, то тегом заголовка и т.д.

Перенос предлогов
на новую строчку

• Используем непереносимый пробел
  

  Ошибочно:

  В чащах юга жил бы цитрус? да, но фальшивый экземпляр!

  Грамотно:

  В&nbsр;чащах юга жил&nbsр;бы цитрус? да, но&nbsр;фальшивый экземпляр!

Для этого есть специальные утилиты, например «Реформатор»

Картинки без отступов

У любой картинки в тексте должен быть отступ, поэтому нам необходимо создать всего-лишь одно правило на CSS. Если блок с вашим контентом имеет id="content", то правило будет выглядеть так:

• Отступы у картинки

   #content img {margin: 20px;} 

Тег readmore в неположенном месте

Если вы поставите тег readmore в случайном месте, то все открытые до него теги будут закрыты тегами верстки, что в свою очередь на 99% перекосит весь дизайн сайта, особненно если вы используете div в верстке текста.

• Тег readmore
  

  Ошибочно:

  В чащах юга жил бы цитрус?

  ---

  да, но фальшивый экземпляр!
  
  

  Грамотно:

  В чащах юга жил бы цитрус?
  
  

  ---

  
  
  да, но фальшивый экземпляр!
  
  

Делайте верно, и оно будет красивым.

P.S. Скопировали — вставили текс из WORD — бросьте в себя камень, бейте себя по рукам, наймите здоровенного мужика с волосатыми руками, который будет стучать вам по голове, когда вы делаете это. Так делать нельзя ни в коем случае.

Font Awesome: бесплатный иконочный шрифт в стиле Twitter Bootstrap.

Каждому разработчику шаблонов периодически приходится сталкиваться с нудной работой над детализацией интерфейса создаваемого шаблона — иконками. Это могут быть, как иконки социальных сетей, так и интуитивная графика для обозначения времени создания материала, полей ввода логина и пароля, оформления кнопок визуального редактора и т.д. Сайт может содержать в себе несколько десятков подобных изображений. Которые нужно правильно оптимизировать, собрать в спрайт-сетку, затем вычислить положение каждого изображения сетки, затем спозиционировать его в качестве фонового изображения к каждому элементу. Зачастую эта кропотливая и нудная работа занимает больше времени, чем верстка всего шаблона в целом.

Меню на странице может быть несколько, но основные рекомендуется разместить в верхнем баре, для настольных ПК и планшетов оно будет зафиксировано у верхней границы окна браузера (что удобно для навигации), а на смарфонах оно свернется и высветится кнопка вызова меню. Для примера:

Недавно зашел на JS хостинг Яндекса (CDN) и увидел там Bootstrap.

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

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

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