Joomla. Курс контент-менеджера ч.1

Почему и зачем Joomla

Время нынче тяжелое. Случилось так, что мои близкие и друзья кто не работает, а кто устал от ежедневной работы за копейки. Я и сам устал от ежедневного стояния в пробках. К тому же эксплуатация автомобиля не выдерживает такой зарплаты. Пришла пора сидеть дома и работать, простите за банальность, по интернету. Я — программист, но мои друзья ими не являются. Поэтому я собрался обучить их профессии контент-менеджера. То есть, буду публиковать для них уроки по разным системам управления контентом(CMS). Будем делать примерный сайт про общестов любителей смешных картинок. Прошу не кидаться помидорами. Интернету я ничего не обязан, обязан только моим друзьям. Обязан за их заботу и за терпение, с которым они сносят мои выходки.

Итак, приступим.

Установка Joomla

Джумлу мы все поставили. Не без проблем, оказалось. Джумла 3 работает только на php 5.5, плюс для установки надо поменять в файле sql-скрипта joomla.sql «ENGINE=InnoDB» на «ENGINE=MyIsam», иначе на новом xammp’е не развернется база Джумлы. Будем считать, что Джумла установилась и вы не установили демо-данные. Если всё-таки установили, то не проблема переставить. Итак, Джумла должна иметь у вас первоначальный пустой вид.

Первый взгляд

В публичной части страница сайта разделяется на области. Заголовок, контент(содержание), меню, футер(низ страницы). Если присмотреться к разным сайтам, то почти у всех именно так. Так проще систематизировать информацию для разных позиций(на странице позиция — место размещения блока). Где-то вот так это выглядит, как пример.


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

Джумла состоит из публичной части(фронт-энд) и админки(бэк-энд). Переход в админку осуществляется добавлением к строке браузера /administrator. Возникнет форма логина и пароля. Ввести нужно те данные, которые использовались при установке.

К следующему разу нужно научиться заходить на локальную Джумлу и в админку. Уяснить, что у джумлы есть позиции на странице. Пока хватит, а то голова уже болит.

Joomla. Курс контент-менеджера ч.1

Электроснабжение: Ликвидация белых пятен в образовании. Начнем с ба...

Электроснабжение:  Ликвидация белых пятен в образовании. Начнем с ба...:  Ликвидация белых пятен в образовании. Начнем с базисных определений.  Электрический ток - это упорядоченное движение заряженных частиц...

Эмуляция мобильных устройств в Google Chrome

Совместимость со всевозможными мобильными телефонами и планшетами последнее время преследует меня по пятам. Несколько раз уже приходилось переделывать готовые проекты, поскольку заказчик решил посмотреть свой сайт на подвернувшимся ему некстати планшетом. Отсюда моя заинтересованность в bootstrap и 960grid. Как выяснилось, в Хроме в режиме разработчика есть волшебная кнопочка.(Или CTRL-Shift-M для ускоренных).


Что можно эмулировать и видеть:

1. проверять responsive на всевозможных разрешениях, ландшафтном и портретном режимах, включая Retina


2. смотреть, как приложение работает в сети


3. смотреть, как работают media queries


4. эмулировать события touch, geolocation и ориентацию устройства


5. совмещать всё вышеперечисленное с режимом разработчика

Для Ретины ставим Device pixel ratio в 2, для всех остальных — 1.

Что может встретиться для Ретины в сети — @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) … , image-set, srcset в картинках, свойство window.devicePixelRatio.

Сохранение пресета выполняется при нажатии кнопки в правом верхнем углу.

Шорткат — Esc

Эмуляция различных сетей осуществляется в меню выбора сети. Проблем не вызывает, всё понятно.

Просмотр в прямом эфире media queries — вот эта кнопка.


Экраны от максимального до минимального помечены разными цветами.

Правый клик по полоске открывает правило в css.

Удобнее пока ничего не видел. Идем дальше.

Можно смотреть и в режиме print. Тоже полезно.

Дальше идут сенсоры и геолокация. Так далеко я пока не зашел, не было заданий. Разобраться там несложно тоже.

Поддерживаются события touchstart, touchmove и touchend.

С шифтом эмулируется pinch. Надо проверить, что это такое, я туповат.

Много еще чего эмулируется и можно всё это проверить с сайтами html5rocks, html5demos. У меня лично сползла крыша от новых фич и я угасаю. Пока займусь версткой и гридами. Много воды утекло с тех пор, как я начал верстать дивами, но, похоже, теперь надо верстать гридами уже. И пользовать мобильный эмулятор от Гугла.

Эмуляция мобильных устройств в Google Chrome

Bootstrap: Как добавить к Storefront

Bootstrap page-headerи сетка(решетка) Bootstrap

Включаем Bootstrap в посте

В стандартной теме woocommerce Storefront мне менять ничего не хотелось, но всякие кнопочки и элементы форм bootstrap, иконки, применить хотелось.

Уж очент там всё привлекательно и на моих устройствах хорошо выглядит.

Стили в body

Да, почему бы нет? Немного не правильно, поскольку там, снизу в подвале может всё переназначиться, но чем чёрт не шутит? Поставлю-ка я включение стилей вначале поста и скрипт бутстрапа в конце. И посмотрим.

На телефоне по-другому

будет выглядеть, поскольку колонки переопределяются. Работает!

По моему, работает нормально

Но хотелось бы просмотреть все элементы. да и сверстать что-нибудь. При этом пользоваться уже Gimp’ом и Inkscape для дизайна и нарезки. А шаблон перерисовать, позаимствовав у мастеров. Что поделать, миром правит посредственность. Я — не исключение. Рисовать не умею и своего вкуса нет. В наше время каждый имеет право лепить, что хочет. Постомодернизм — никто никому ничего. И смешение стилей с полным отсутствием смысла.

Зачем бутстрап? Всё очень просто. Идеология mobile first, мало по малу, завоевывает место в умах заказчиков. Телефоны и планшеты становятся полноправными участниками user experience. Что тут поделаешь? Надо верстать и для них, или преимущественно для них, уж и не знаю. К тому же, я — не художник, а плагиатор. Мне нужно быстро создать кнопку, например или селект. Не заморачиваться со стилями. Дальше в бутстрапе еще интереснее. Всякие вертелочки. Пока могу сказать, что grid и заголовки — работают. Идем дальше. А пока я посмотрю матчи последнего тура США по баскетболу, проще говоря — NBA. 8 марта, можно и отдохнуть. Водку я не пью, бросил. Софт я использую строго GNU или бесплатный. Поддерживать корпорации не хочу. Хотя капитализм мне ближе. Он лучше оплачивает труд, справедливее. Тимофей Мозгов вот, например, получает миллионы в год за игру. Сколько бы он получал в своем родном городе? Я знал одного баскетболиста. Баскетбол он бросил, жизнь прожил весело. Умер от цирроза печени. А если бы играл и эмигрировал? Много вопросов в связи с бутстрапом. Многослойная тема. Продолжим скоро верстку с бутстрапом.

Bootstrap: Как добавить к Storefront

Разборка и замена электролитов ( конденсаторов ) Радиотехника 001

Проигрыватель пластинок Радиотехника 001 + ГЗМ 005 первичный осмотр