Использование LESS

Добрый день.

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

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

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

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

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

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

Для чего это?

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

Joomla 3.3 - первый стабильный релиз Joomla 3?

И так произошел релиз Joomla 3.3 в целом это событие особо ни чем не примечательно, за исключением нескольких интересных фактов.

Об этих фактах мы и поговорим в этой заметке.

Привлекам покупателей из социальных сетей в ваш интернет магазин Joomla!

Как говорят нам всевозможные seo издания в социальные сети сейчас несут трафик сравнимый с поисковым. Поэтому глупо не использовать этот трафик для привлечения в интернет магазин.

Плюс как утверждают эти же seo издания, упоминания в социальных сетях, так же являются фактором, влияющим на ранжирование страницы. В этой статье я расскажу, про инструмент, который поможет вам убить двух зайцев сразу.

Косячим: Меню

Добрый день. Кратко расскажу об основной ошибке при создании главного меню на сайте.

На JoomlaForum есть раздел «Мой сайт на Joomla», который я периодически просматриваю. Глядя на работы новичков я, честно говоря, прихожу в ужас. Большинство работ сделаны по советам «10 грубейших ошибок при создании сайта», только советы были интерпритированы с точностью наоборот. Хочу немного обобщить всяческие советы непосредственно для меню.

Основная ошибка: слишком много пунктов меню

Зачем больше 5 пунктов в главном меню? У вас всегда есть футер. И тот человек, который ищет что-то конкретное, всегда докрутит до футера и кликнет, на интересующий его пункт меню. Вот пример отвратительного меню:

Главная | О нас | Почему мы | Цены | Услуги | Скидки | Акции | Предложение посредникам | Вакансии | Наша техника | Задайте нам вопрос |

Косячим: Верстка текста.

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

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

  • Списки

    Неверно:

     - Пункт один;&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. Пункт два;
    4.  
    5. Пункт три.
  • Параграфы

    Неверно:

    Параграф один. <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

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

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

Русский язык для Joomla 3.0

Спешу вас обрадовать. Вышла русская локализация Joomla 3.0.

Когда в прошлый раз происходила смена поколения joomla, официальная локализация для России выходила ну очень долго, что породило кучу форков и переводов очень низкого качества. В этот раз все вышло по другому: не прошло и недели, как на joomla.org одобрили русскую локализацию для joomla 3.0.

Использование в шаблонах Twitter Bootstrap - часть 2.

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

Подключение PHPStorm к удаленной базе данных

Уже долгое время мне мозолила глаз вкладка «Database» в правом верхнем углу PHPStorm. Решил с ней разобраться в конце концов и подключить базу данных разрабатываемого сайта к проекту. Оказалось все не так сложно и, в результате, очень удобно.

Joomla 3.2 Alpha Released

И так случилось, то что все знали и все боялись. Вышла Альфа версия Joomla 3.2, которая проясняет множество моментов, с одной стороны я рад, что релиз вышел и почти что в срок, с другой стороны меня этот релиз немного расстраивает. И так начнем рассматривать, что появилось нового.