Категории: HTML

Небольшой эксперимент с использованием data: URL

Владимир | | CSS, HTML, Web разработка.

data uri

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

К сожалению, не всегда есть возможность проигнорировать устаревшие браузеры (главным образом речь идет о IE6 и 7). И это сильно замедляет использование новых стандартов.

Ситуация довольно сложная. Большинство владельцев ресурсов не согласятся потерять часть аудитории (пусть даже небольшую) только потому, что разработчик решил внедрить новую технологию. Но не все понимают, что использование устаревших технологий делает менее комфортной работу посетителей с нормальными браузерами. В частности, время загрузки страницы для них окажется больше, чем могло бы быть.

Поэтому оптимальным решением было бы автоматическое переключение технологий в зависимости от возможностей браузера.

Об одной из таких технологий и пойдёт речь в этой статье. Называется она data: URL.
Читать дальше

Galleria — плагин для создания галерей с картинками

Владимир | | CSS, HTML, JavaScript, Web разработка.

galleria

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

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

Можно, конечно, написать собственную реализацию такого плагина, но это процесс трудоемкий (если делать качественно) и, скорее всего, код процентов на 90 будет повторять то, что есть в других плагинах.

В таких случаях гораздо предпочтительнее использовать фреймворки. Об одном из них и пойдет речь в этой статье.
Читать дальше

JavaScript и jQuery: перемещение блоков

Владимир | | HTML, JavaScript, Web разработка.

jquery blocks movement

В этот раз я покажу пример небольшого скрипта, позволяющего перемещать HTML блоки на странице.

Когда возникает подобная задача, первое что приходит в голову (по крайней мере мне 😉 ) – использовать готовые плагины. Например, jQuery Sortable. Что ни говори, решение довольно удобное, от пользователя требуется только перетащить объект с помощью мышки.

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

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

Именно такой вариант мы рассмотрим в этой статье.

Посмотреть результат можно на демонстрационной страничке
Читать дальше

Google Maps: выделение областей на карте

Владимир | | HTML, JavaScript, Web разработка.

google maps circle logo

О сервисах Google Maps и Яндекс.Карты слышали, наверное, практически все пользователи интернета. Но если для рядового пользователя их возможности ограничиваются стандартным интерфейсом, то для разработчиков всё гораздо интереснее.

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

Сегодня я хочу показать небольшой пример, позволяющий посетителю выделить область на карте (использоваться будут Google Maps). В дальнейшем, эту область можно сохранить в базе данных вашего сайта.

Прежде всего, сформулируем задачу.

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

Т.к. для обоих случаев API практически одинаков, рассмотрим вариант с окружностью.

Итак, принцип работы будет следующий.
Читать дальше

jQuery и плагины: решения для просмотра больших изображений

Владимир | | CSS, HTML, JavaScript, Web дизайн, Web разработка.

jquery img zoom

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

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

Думаю, с этой проблемой в какой-то момент сталкиваются все веб мастера.

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

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

<a href="1.jpg"><img src="1_thumb.jpg" /></a>

где 1_thumb.jpg – уменьшенное изображение 1.jpg.

Главный недостаток такого подхода – посетитель покидает страницу, а затем должен на неё вернуться с помощью кнопки «Назад».

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

Для этого примера я решил остановиться на плагинах к библиотеке jQuery. Т.к. на данный момент она одна из самых популярных и, кроме того, аналоги можно найти для всех распространённых JS библиотек.

Хочу сразу отметить, что плагинов для работы с изображениями – сотни, и многие дублируют друг друга.

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

Конвертер валют

Владимир | | HTML, JavaScript, Web разработка.

rates converter

В комментариях к прошлой статье «Создаём валютный информер с помощь PHP и JavaScript» читатель с ником php-user предложил хороший вариант усовершенствования скрипта.

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

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

Source

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

Определим план работ.
Читать дальше

Создаём валютный информер с помощь PHP и JavaScript

Владимир | | Ajax, HTML, JavaScript, PHP, Web разработка.

exchange rates

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

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

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

Source

Подключение информера

Читать дальше

Загрузка файлов с помощью SWFUpload и PHP

Владимир | | HTML, JavaScript, PHP, Web разработка.

swfupload

О загрузке файлов на сервер рассказывается, наверное, в каждой книге о веб разработке. Обычно при этом приводится пример формы с тегом input type=file и объясняется, как работать с массивом $_FILES на стороне сервера. Это классический вариант. Он отлично работает, но имеет несколько ограничений.

1) Чтобы загрузить несколько файлов, нужно создать несколько тегов input. При этом пользователь должен будет выбирать каждый файл отдельно, что довольно неудобно при большом количестве файлов.

2) Невозможно показать процент загрузки файла.

3) Загрузка нескольких файлов будет выполнена в одном запросе. Тут нет ничего плохого, но может возникнуть проблема, если на сервере установлены ограничения на максимальный объем запросов и время выполнения скриптов.

4) Загрузка не будет асинхронной, т.е. произойдет перезагрузка страницы.

На сегодняшний день существует два основных варианта решения этих проблем. Использование iframe или flash (по-идее, silverlight тоже можно использовать для этих целей).
Читать дальше

Yii PHP фреймворк: оформление административных страниц

Владимир | | HTML, PHP, Web разработка, Yii.

yii grid view

Одной из наиболее мощных возможностей фреймворка Yii является генерация кода. Она позволяет сразу после создания таблицы в базе данных получить файлы модели, контроллера и представлений. Т.е. весь необходимый код для выполнения CRUD операций.

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

Взгляните на обычную страницу управления записями, сформированную с помощью компонента CGridView.
Читать дальше

WordPress плагин для внутренней перелинковки страниц сайта. Версия 2.

Владимир | | HTML, PHP, Web разработка, WordPress.

wp terms descriptions 2

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

Прежде всего, хочу поблагодарить всех, кто участвовал в обсуждении и тестировании моего плагина «Terms Descriptions». Вы подсказали мне несколько хороших идей, которые я реализовал в новой версии плагина.

Сразу даю ссылку на архив.

Source

Новые возможности.
Читать дальше