Приветствую!

Сегодня мы продолжаем разработку web приложения, выполняющего проверку URL. На данном этапе чтобы получить работоспособное приложение нам осталось только создать представления.

Примечание. Ссылки на предыдущие статьи этого цикла вы найдете здесь.

Наше приложение содержит всего две страницы. Главную со сведениями обо всех выполненных проверках, и страницу с подробной информацией по конкретному URL. В принципе, нам достаточно двух представлений. Но заголовок и «хвостовик» страницы повторяются, поэтому мы создадим для них отдельные представления.

Все файлы представлений должны находиться в папке application/views/.

Рассмотрим их подробнее.
Читать дальше »

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

Хорошо это или плохо, разговор отдельный, но, наверное, все согласятся, что грамотное использование этих эффектов позволяет создать красивый web сайт с которым легко и приятно работать.

В этой статье мы рассмотрим пример использования очень интересного эффекта из библиотеки ScriptAculous – морфинга.

По определению, морфинг – это плавное преобразование одного объекта в другой.

Он очень часто используется в компьютерных играх и кинематографе.

К сожалению, возможности JavaScript в плане работы с графикой значительно скромнее, чем у библиотек вроде DirectX или программ нелинейного видеомонтажа. Т.е. вы не сможете сделать прямоугольный блок с текстом круглым или плавно преобразовать один шрифт в другой.

Тем не менее, можно изменить цвет и размеры блоков и шрифтов, их границы, фон и т.п.

Как это работает
Читать дальше »

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

Настоящую елку украшать все умеют с детства. Поэтому сегодня я покажу, как сделать виртуальную елочку, и дать посетителям сайта возможность ее украсить по своему вкусу.

Возможный результат показан на скриншоте.

Демонстрационная страница с елочкой размещена здесь.

Исходные материалы: рисунки с елочкой (firtree.jpg) и шариками (ball1_1.gif, ball1_2.gif, …), библиотека prototype.

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

Посмотрите на разметку страницы.

И таблицу стилей.

Основную часть страницы занимает блок content. В качестве его фона установлена картинка с елочкой, а высота и ширина подогнаны точно под размеры этой картинки.

Кстати, обратите внимание на изображения шариков, которые вставлены после блока content. Эти шарики не отображаются браузером, т.к. для них установлено правило display:none. Невидимые картинки нам, конечно, не нужны, но этот прием позволяет устранить задержки при развешивании шариков.

Дело в том, что браузер загружает одну и туже картинку только один раз. Если эта картинка повторяется на странице (в нашем случае может быть несколько шариков одного цвета), то используется уже загруженное изображение.

Если мы уберем невидимые изображения шариков, то они будут загружаться после щелчка пользователя по елке, а это создаст задержку между щелчком и появлением шарика (особенно на dialup’е).

Теперь перейдем к добавлению шариков. В обработчике события onclick блока content мы вызываем функцию addBall(event) и передаем ей объект с параметрами события.

Посмотрите на ее исходный код:

Прежде всего, мы объявили глобальную переменную i. С ее помощью будем создавать уникальные идентификаторы (id) для каждого добавленного шарика. Они нам необходимы для того, чтобы задать размещение для каждого шарика отдельно.

Выбор шарика мы выполняем с помощью генератора случайных чисел (Math.random()). Т.к. он возвращает числа в диапазоне от 0 до 1, а у нас 5 шариков, умножаем результат на 5 и округляем до ближайшего большего целого числа (Math.ceil()).

Вставка шарика осуществляется с помощью функции Bottom объекта Insertion из библиотеки prototype. Использовать ее несложно. В первом параметре указываем id блока, в который нужно добавить html разметку, а во втором – указываем саму разметку (здесь мы вставили тег img с нужным шариком).

Теперь рассчитываем координаты левого верхнего угла картинки с шариком. Для этого определяем координаты курсора:

Здесь ничего сложного, единственная заморочка заключается в том, что в IE координаты определяются не так как в Netscape, Mozilla.

От координат курсора отнимаем 10px (это половина длины и ширины изображения с шариком) и получаем координаты левого верхнего угла.

Для установки этих координат используем метод setStyle (строка 8). В его первом параметре указываем id элемента, а во втором – CSS правила.

В таблице стилей задаем для всех изображений абсолютное позиционирование.

Вот и все. Можно наряжать елочку
Чтобы убрать шарики обновите страницу.

С Новым Годом!

P.S. Вы можете скачать архив с исходными файлами примера или посмотреть рабочую версию страницы.

Недавно столкнулся с небольшой проблемой. Во время верстки сайта www.etutorials.org.ua нужно было разместить два элемента так, чтобы они частично перекрывались. В обоих элементах в качестве фона используются картинки, поэтому разместить их нужно точно, иначе линии не совпадут.

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

Задача в общем-то простая и должна легко решаться с помощью CSS. Но разработчики IE6 так не считали.
Читать дальше »

Сегодня мы продолжим эксперимент с раскрашиванием колонок web страницы. В прошлый раз мы создали страницу с тремя колонками и задали для центральной колонки один фоновый цвет, а для правой и левой – другой.

Естественно, не очень удобно, что боковые колонки всегда одного и того же цвета. Исправляем этот недостаток.
Читать дальше »

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

Нам нужно чтобы центральная колонка имела один цвет фона, а правая и левая – другой.

Решить задачу «в лоб», т.е. воспользоваться свойством background-color каждой из колонок, не получится. Так как колонки неодинаковой высоты, которая может изменяться, и заранее неизвестна. А фон, естественно, должен распространяться на всю высоту колонки, от заголовка до хвостовика.
Читать дальше »

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

Сегодня я расскажу о JavaScript библиотеке, которая позволяет легко решить эту задачу. Называется она Prototip и состоит всего из одного файла prototip.js. Только учтите, что Prototip, по сути, является надстройкой над другой библиотекой – prototype (о которой я уже неоднократно рассказывал), поэтому без нее он работать не будет.

Прежде всего, разберемся, что представляет собой всплывающая подсказка.
Обычно это блок с текстом или картинкой, который появляется, когда вы наводите курсор на определенный элемент страницы.
Чтобы этот блок двигался вместе с курсором, для него в таблице стилей устанавливают абсолютное позиционирование, и с помощью javascript меняют координаты при перемещении мышки.
Естественно, такой блок может содержать практически любую html разметку с текстом, картинками, баннерами, flash роликами и т.п.

Переходим к созданию подсказок
Качаем библиотеку с официального сайта. В архиве вы найдете две папки:
js/ - в ней находятся два файла prototip.js и prototype.js, т.е. все необходимое для работы;
css/ - здесь размещены: файл с таблицей стилей и несколько картинок, которые используются для создания стандартных подсказок.

После этого подключаем файлы библиотек к странице:

Если вы хотите использовать обычные подсказки, то подключите файл с таблицей стилей из папки css. Но, в большинстве случаев, лучше использовать свои собственные стили (так больше шансов, что подсказка впишется в дизайн сайта ).

Теперь делаем простенькую страничку:

Как видите, она состоит из двух абзацев, в каждом из которых есть фраза, выделенная тегами <span id="…"></span>. Вместо тега <span> можно использовать любой другой, главное указать id элемента.

Для фразы в первом абзаце (id="needtip") сделаем простую текстовую подсказку. Для этого создаем файл simpletip.js, подключаем его к странице:

И добавляем в него обработчик события window.onload (таким образом, наш код будет автоматически выполняться при загрузке страницы).
Читать дальше »

Сложно представить современный интернет без форм для ввода данных. Они повсюду. Практически все web сервисы требуют авторизации или, как минимум, ввода имени и адреса email. Для ускорения работы с формами существуют специальные программы, многие браузеры имеют функцию автозаполнения…. Но сегодня речь не о них.

Мы посмотрим, как сделать обычную html форму удобнее для посетителей. И, кроме того, сделаем ее доступной для программ чтения с экрана, текстовых браузеров и тому подобного софта.
Читать дальше »

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

Современные JavaScript библиотеки позволяют кардинально изменять внешний вид страницы с помощью буквально нескольких строчек кода. В этой статье я покажу как с помощью библиотеки Prototype можно изменить стили практически любого набора элементов на html странице.
Читать дальше »