Архив метки: web

Подключение визуального редактора TinyMCE с менеджером картинок к любой CMS

Опубликовано автором
4

TinyMCE — это очень распространенный и функциональный визуальный (WYSIWYG) редактор для CMS. Сделан редактор на JavaScript с использованием фреймворка jQuery. Хотя подключить его и не сложно, многие сталкиваются с проблемой отсутствия в стандартной поставке менеджера загрузки картинок. Конечно же без него работа с сайтом не будет полноценной. Одним из вариантов решения данной задачи — использование плагина TinyMCE Image Manager.
Предлагаю свой вариант сборки редактора с расширенными настройками и уже подключенным и настроенным плагином Image Manager. Скачать его можно здесь. Все что требуется для начала работы — это распаковать скачанный архив в корень сайта. А затем вставить вот эти 3 строчки кода в шапку сайта, отображаемую в CMS:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="/tiny_mce/tiny_mce_init.js"></script>

Для каталогов pic2 и upload2 необходимо назначить достаточные права (это можно сделать через FTP-клиент или через bash-консоль сервера командой chmod). Все настройки вынесены в отдельный файл (/tiny_mce/tiny_mce_init.js), чтобы в случае каких либо изменений не пришлось вновь редактировать шапку.
После установки все поля TEXTAREA будут редактироваться визуально, как показано на скриншоте.
tiny-mce
Если для какого-либо поля необходимо сделать исключение, то нужно назначить ему атрибут: class=’mceNoEditor’. Пример:

<textarea class="mceNoEditor" name="descr"><?php echo $descr; ?></textarea>

В этом случае поле будет редактироваться как обычно.

Народная карта Yandex на сайт или конструктор схем проезда

Опубликовано автором
Добавить комментарий

Хотите поставить на свой сайт карту Yandex и указать в ней схему проезда к вашей фирме? Как говориться «проще пареной репы». С помощью web-сервиса Yandex можно создать код карты для вставки, не имея навыков программирования.
конструктор схем проезда
Чтобы использовать народную карту Yandex, достаточно выбрать соответствующую закладку вверху справа на карте. Вид карты преобразится:
народная карта
Ссылка на сервис здесь — http://api.yandex.ru/maps/tools/constructor/

Убрать отступ от картинки в IE 9

Опубликовано автором
Добавить комментарий

Имеется код:

<table class='bn_table' cellpadding='0' cellspacing='0' border='0'>
<tr class='bn_0'>
  <td class='bn_0_0'><img src="/design/banner-0-0.png" border="0" width="49" height="2" /></td>
  <td class='bn_1_0'><img src="/design/banner-1-0.png" border="0" width="612" height="2" /></td>
  <td class='bn_2_0'><img src="/design/banner-2-0.png" border="0" width="47" height="2" /></td>
</tr>
<tr class='bn_1'>
  <td class='bn_0_1'><img src="/design/banner-0-1.png" border="0" width="49" height="284" /></td>
  <td class='bn_1_1'><img src="/design/banner.jpg" border="0" width="612" height="284" /></td>
  <td class='bn_2_1'><img src="/design/banner-2-1.png" border="0" width="47" height="284" /></td>
</tr>
<tr class='bn_2'>
  <td class='bn_0_2'><img src="/design/banner-0-2.png" border="0" width="49" height="51" /></td>
  <td class='bn_1_2'><img src="/design/banner-1-2.png" border="0" width="612" height="51" /></td>
  <td class='bn_2_2'><img src="/design/banner-2-2.png" border="0" width="47" height="51" /></td>
</tr>
</table>

При этом большинство браузеров отображает картинки в таблице без отступов. Однако новоиспеченный IE9 отображает отступы по вертикали. Пример ниже.
IE9 отображает отступы по вертикали после картинок
Решение простое — в CSS прописываем:

.bn_table tr td img {display:block;}

И вауля — отсупы исчезают!
убрали отступ после картинки в IE9

Стрелочные часы на javascript (с помощью спрайтов)

Опубликовано автором
Добавить комментарий

Часы на сайт — один из скриптов, который может показаться бесполезным, так как у всех есть системные часы. Однако некоторые хотят поставить такие часы как элемент дизайна. Но эффект эксклюзивности будет достигнут, только если эти часы будут уникальными, сделанными в цветовой гамме и стиле сайта. Поэтому копировать готовые часы у кого-то чаще всего будет неуместно, лучше сделать свои. Способов довольно много:

  1. Можно сделать часы во flash, но не у всех есть среда разработки flash (вариант использования не лицензионной программы не рассматриваем).
  2. А можно сделать с помощью javascript. Правда если речь идет о стрелочных часах, то стрелки часто делаются с помощью рисования линий или точек, что не всегда красиво.
  3. Есть еще SVG — на мой взгляд за этим форматом будущее. К сожалению c кроссбраузерностью этого решения пока не все гладко.
  4. Ну и еще вариант — использовать javascript и стрелки отображаемые с помощью спрайтов. Его и рассмотрим. Способ тоже не без минусов — получается довольно большой объем файлов стрелок (3 стрелки в приведенном ниже примере занимают чуть больше 100 кбайт). Хорошо что интернет сейчас быстрый у многих 🙂 Результат изображен ниже.


Используется 5 графических элементов. Фон, логотип для часов, и 3 стрелки. Другими словами, можно легко сделать любой внешний вид стрелок и фона, используя лишь графический редактор.
Исходники примера можно скачать здесь.
С изменением фона и логотипа все просто, а как быстро и без рутины подготовить спрайты для своих уникальных стрелок, можно прочитать в посте про клонирование объектов в векторном редакторе. Впрочем, подсказка есть в исходниках — там можно заметить два файла SVG — один с одиночными стрелками, другой с клонированными (наклон с шагом 6 градусов). Для создания стрелок использовал векторный редактор Inkscape 0.48.

Оптимизация HTML и CSS-кода для разных браузеров с помощью DOCTYPE или DTD

Опубликовано автором
Добавить комментарий

Бывает, что определенная связка HTML+CSS никак не хочет правильно (с точки зрения создателя кода, конечно) отображаться в некоторых браузерах. Использование своих таблиц стилей для отдельных браузеров уже стало классикой. Но можно ненароком забыть что первая строка HTML-файла, которая должна начинаться с <!DOCTYPE, может сильно повлиять на интерпретацию кода.
Описаний типа документа, или DTD, существует много, и браузер будет отображать код по разному, в зависимости от того, какой DOCTYPE выбран.

Например (строгий HTML 4.01):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

отличается от (переходной HTML 4.01):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

или от (HTML 5):

<!DOCTYPE html>

Так что если что то не ладится с кодом, попробуйте поиграть и этой строкой.