При верстке макета столкнулся с такой задачей. Имеется логотип, внутри которого необходимо разместить текст.

Логотип создается с помощью элемента - заголовка первого уровня h1. Внутри этого блочного элемента размещается ссылка. Решений подобной задачи в Интернете вроде бы много, но вот конкретно не нашел под себя. Решил с помощью форума forum.htmlbook.ru.

Необходимо сделать также, как и на psd-макете. Чтобы текст располагался по-вертикали по-центру, и был смещен при этом вправо. Часть html-кода, в котором создается логотип со ссылкой, показана ниже:

Логотип на psd-макете

Логотип сайта

С установкой фонового изображения проблем не возникает. Задаю ширину и высоту для блока h1 равной ширине и высоте логотипа. И прописываю для него картинку в качестве фона.

Текст-ссылку внутри блока также стилизую в соотвествии с тем, как она изображена на макете. А вот центрование текста - здесь есть некоторая тонкость. Спасибо SelenIT, что кратко и точно объяснил, как поступать в данном случае.

Итак. С помощью свойства display: table превращаю блочный элемент h1 в табличный. Это делается для того, чтобы можно было разместить текст строго по центру вертикали, так как только таблица имеет свойство vertical-align.

Строчный элемент а, то есть ссылка, теперь расположена внутри таблицы. Поэтому превращаю ее в ячейку таблицы с помощью правила display: table-cell. Теперь можно применить к содержимому этой ячейки свойство vertical-align: middle, тем самым размещая ее по-центру по-вертикали.

Осталось сместить текст вправо на заданную величину. Это выполняется с помощью правила padding-left: 80px.

Ниже привожу кусок кода, отвечающего за стилизацию логотипа сайта:

.logo{
  background: url(../img/logo.gif) 0 0 no-repeat;
  height: 100px;
  width: 180px;
  display: table; /*!*/

}
.logo a{
  font-family: 'webfontbold';
  font-weight: bold;
  font-size: 20px;
  color: #090909;
  text-transform: uppercase;
  text-decoration: none;
  display: table-cell; /*!*/
  vertical-align: middle; /*!*/
  padding-left: 80px;
}

Вот задача и решена. Разобрался с центрирование текста по-вертикали с помощью правил display: table, display: table-cell, vertical-align: middle.

На этом все.


Есть небольшая проблема. Столкнулся с тем, что при верстке макета необходимо получить размер шрифта, которым выполнена надпись.

Однако, при выделении текста инструментом “Horizontal Type Tool” в панели Photoshop показывает мне размер шрифта в points. А мне необходимо в правилах CSS записать размер шрифта в пикселях.

Чтобы заставить Photoshop показывать размеры шрифтов в пикселях, нужно выполнить несложные настройки.

Переходим в меню Photoshop по пути “Edit - Preferences - Units & Rulers”. Откроется окно, в котором неодходимо перейти в пункт “Units & Rulers”.

В верхнем разделе правой части окна находим “Units” с двумя полями - “Rulers & Type”:

Окно настроек единиц измерения в Photoshop

В выпадающем списке поля “Type” меняем значения с “Points” на “Pixels”. Сохраняем изменения кнопкой ОК и и выходим из настроек. Проверим результат изменений. Снова выбираем инструмент “Horizontal Type Tool” и выделяем мышью текст в макете.

Смотрим на панель:

Размер шрифта в пикселях

Что и требовалось. Теперь Photoshop автоматически показывает размер шрифта в пикселях, что удобно при написании правил в CSS.

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

На этом все.


Приложение KeepassX является менеджером паролей с графическим интерфейсом.

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

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

Естественно, запомнить все учетные записи в таком случае просто не реально. Вот тут и приходит на помощь менеджер паролей KeepassX. Все создаваемые учетные записи хранятся в одном шифрованном файле, и нужно помнить один единственный пароль только к нему.

KeepassX имеет удобный и информативный интерфейс, с помощью которого можно хранить самые разнообразные данные. Проще говоря, эта программа очень существенно облегчает жизнь. Без нее нормальная работа в Интернет становится крайне не удобной. Поэтому приложение можно смело отнести к разряду must have.

В дистрибутивах, основанных на Debian (таких как Ubuntu, Mint и многих других) с установкой программы KeepassX не существует каких-либо проблем. Пакет входит в стандартные репозитории этих операционных систем. Но вот с openSUSE здесь несколько сложнее, так как в репозиториях этого дистрибутива по умолчанию такой программы нет.

KeepassX в openSUSE 12.3 - последовательность действий

Открываем “Центр управления YAST” и в нем переходим “Программное обеспечение - Репозитории программного обеспечения”. Это необходимо для добавления стороннего репозитория, содержащего пакет KeepassX:

Центр управления YAST

В открывшемся окне добавляем URL-адрес репозитория - http://download.opensuse.org/repositories/security:/passwordmanagement/openSUSE_12.1/. После несложной процедуры настройки получаем добавленный репозиторий в систему openSUSE12.3.

В моем случае он имеет несколько нелогичное имя openSUSE_12.1. Ну пусть будем таким, в принципе - какая разница. Хотя, для порядка, должно называться более информативно. Жмем ОК:

Добавленный репозиторий с пакетом KeepassX

Все готово для установки программы KeepassX. Переходим в YAST в пункт “Управление программным обеспечением”. Откроется окно со множеством настроек.

Но в нем потребуется только два элемента - поле для ввода имени пакета и кнопка Поиск. Вводим в поле имя нужного нам пакета keepassx и нажимаем кнопку Поиск. В правом окне почти моментально видим результат:

Установка программы KeepassX

Отмечаем галочкой пакет keepassx и жмем на кнопочку Принять в правом нижнем углу. YAST спросит подтверждения об установке дополнительных зависимостей и затем выполнит инсталляцию программы KeepassX.

Можно закрывать “Центр управления YAST”. Переходим в главное меню KDE и в строке поиска вводим KeepassX, чтобы долго не блуждать по различным пунктам меню типа Интернет, Офис и тому подобное.

Все, менеджер пакетов KeepassX установлен и готов к работе.

На этоь все.


Одним из полезных инструментов web-разработчика является плагин для Firefox - Wappalyzer.

Определить, под какой CMS и с помощью каких дополнительных интрументов web-разработки работает определенный сайт, можно разными способами. Это и просмотр исходного кода страницы, и различные уловки и ухищрения, специфичные для конкретной системы управления сайтом.

Но с помощью плагина Wappalyzer это можно сделать быстро и очень удобно. Достаточно посмотреть на скриншот, чтобы оценить удобство плагина:

Плагин Wappalyzer в браузере Firefox

После установки плагина, которая выполняется обычным для Firefox способом ссылка для установки Wappalyzer в правом углу адресной строки браузера размещаются иконки, каждая из которых символизирует CMS и дополнительные интсрументы, которые были найдены плагином на данном сайте.

В вышеприведенном примере видно, что сайт работает под управлением коммерческой CMS 1C-Bitrix. В оформлении сайта были применены возможности популярной библиотеки jQuery.

Сам сайт работает под управлением также не менее популярного web-сервера Nginx, который в свою очередь управляется операционной системой Debian Linux. Сайт был написан с использованием языка программирования PHP.

Чтобы получить более подробный отчет о результатах анализа сайта плагином Wappalyzer, достаточно щелкнуть правой кнопкой мыши на группе этих значков. Откроется небольшое контекстное меню с подробным описанием:

Контекстное меню плагина Wappalyzer

Рассмотренный пример, думаю, достаточен для описания возможностей плагина Wappalyzer в практической деятельности. Чтобы более полно описать все, что умеет плагин, перейдем на его домашнюю страницу.

Wappalyzer может определять движки, под которыми работает сайт. Полный список доступных CMS представлен здесь - [Wappalyzer CMS]3. Видим популярные WordPress, Joomla, Drupal, DataLife Engine и другие. Колличество CMS, которые плагин может определить, впечатляет.
Помимо новостных движков, Wappalyzer умеет определять интернет-магазины - [Wappalyzer Web Shops]4.
Плагину также доступны web-сервера - [Wappalyzer Web Servers]5. На первом месте здесь стоит очень популярный Apache, за которым с большим отрывом следует Nginx.
Из разряда “вкусностей” плагин знает о существовании фреймворков Javascript, без которых не обходится сегодня ни один из более или менее серьезных сайтов - [Wappalyzer Javascript Frameworks]6. Тут на первом месте, бесспорно, стоит jQuery.
Имеется также возможность определения различных web-приложений для аналитики сайтов - [Wappalyzer Analytics]7.
Помимо этого, плагин Wappalyzer умеет много чего. Достаточно посмотреть на длинный список - [Wappalyzer Applications]8. Здесь есть блоги, капчи, системы управления базами данных, хостинг-панели, операционные системы, форумы и многое другое.

Думаю, данный обзор плагина Wappalyzer является достаточно полным.

В заключение можно сказать, что разработка плагина не прекращается. В него регулярно добавляются новые возможности автором, голландским программистом Elbert F, который на данный момент проживает в Австралии.

На этом все.


Восстановить пароль пользователя к Joomla на самом деле совсем просто. Весь процесс занимает не более двух минут и пары-тройки действий. Недавно сам столкнулся с такой проблемой.

Вариантов восстановления существует несколько, но самым простым и надежным для меня является ручная правка записи в базе данных MySQL. Для этого лучше всего воспользоваться удобным приложением, созданным специально для работы с подобными базами данных - phpMyAdmin (pma).

Заходим в панель управления хостингом и открываем в ней phpMyAdmin. Далее находим ту базу данных, которой соответствует сайт на Joomla, к которому потерян пароль.

Открываем ее и в левом окне находим таблицу, в которой размещены данные всех зарегистрированных пользователей. Обычно такая таблица имеет имя xxxx_users, где хххх - это префикс таблицы:

Таблица пользователей в базе данных MySQL

Открываем эту таблицу. В правом окне отображаются все пользователи, внесенные в базу данных MySQL:

Пользователи сайта в базе данных MySQL

Выбираем в таблице того пользователя, пароль которого нужно отредактировать. Если пользователей несколько, то нужно найти нужного и отметить его галочкой. Если же один, то достаточно просто нажать на ссылку “Изменить” напротив этой записи.

Откроется большая таблица, в которой нужно найти строку password. В столбце “Значение” отображено значение текущего пароля, зашифрованного по алгоритму MD5. Восстановление его с практической точки зрения не имеет смысла.

Может быть, это и можно сделать, но данный процесс займет слишком много времени и усилий. Проще заменить пароль на другой, заранее нам известный:

Редактирование пароля пользователя Joomla

Для этого очищаем поле ввода в столбце “Значение”. В столбце “Функция” в поле ввода находится ниспадающий список. В нем нужно выбрать алгоритм шифрования MD5. И вводим новый пароль в поле “Значение”, например 123123. После того, как нажмем кнопку ОК, введенный заново пароль 123123 зашифруется и подставится наместо введенного нами.

Нажимаем кнопку ОК и выходим из phpMyAdmin. Проверяем результат изменений. Переходим в административную панель Joomla по адресу http://super-site.com/administrator и вводим в форме входа пару логин и измененный пароль. Все должно работать, если не было допущено каких-либо ошибок.

На этом все.