На днях передо мной стояла задача: реализовать на интернет-магазине ювелирных украшений возможность для пользователя посмотреть увеличенную фотографию изделия по частям, т.е. показывать только ту часть картинки, которую захочет увеличить сам пользователь.
Т.к. на сайте уже использовалась библиотека JQuery, я решила поискать плагин, который бы помог реализовать мою задачу. И такой плагин действительно нашелся - .
Работает он очень просто: при наведении курсором на превью изображения выделяется некоторая его область, которая отображается в увеличенном виде рядом с превью.
Для того чтобы подключить плагин, необходимо следующее:
1. В head страницы добавить строку вызова дополнительного css-файла для плагина:
3. Написать html код, который будет выводить превью, например блок div. Присвоить ему класс "jqzoom". А каждому изображению, которое необходимо увеличить прописать атрибут jqimg - в нем будет путь к изображению большего размера.
4. И последнее - вызвать функцию, которая отвечает за работу плагина:
$(document).ready(function(){ $(".jqzoom").jqueryzoom({ xzoom: 300, //ширина блока, где будет отображаться увеличенная картинка, по умолчанию 200 yzoom: 300, //высота блока, где будет отображаться увеличенная картинка, по умолчанию 200 offset: 40, //размеры блока на превью при наведении курсором, по умолчанию 10x10 position: "right", //позиционирование блока, по умолчанию "right" preload:1 // по умолчанию загружатся в буфер 1 изображение lens:1 // число объективов}); });
Как известно, существует 2 популярных способа верстки на основе блоков div: плавающая модель (float) и абсолютное позиционирование (absolute). Каждый из них имеет свои плюсы и минусы. Eric Sol вместе со своей командой разработали новый способ позиционирования в CSS под названием "" - имитация абсолютного позиционирования.
Большинство дизайнов имеют колоночную структуру, т.е. шапку, 2-3 колонки и подвал. Используя только абсолютное позиционирование невозможно задать правила для подвала, т.к. его положение напрямую зависит от контента. С плавающей моделью тоже возникают сложности: блоки просто разваливаются, если их суммарная ширина будет больше 100%.
Задача команды Эрика была намного сложнее:
Мы должны были сделать конструктор форм, основанный на WYSIWYG, который позволял бы пользователю перетаскивать элементы в любую точку рабочей области. Необходимо было реализовать возможность создавать красивые формы, не использующие какие-то уже заданные статичные шаблоны, а чтобы пользователь мог располагать элементы формы как угодно относительно друг друга.
Ни один из стандартных способов позиционирования не помог реализовать эту задачу.
Тогда ребята стали экспериментировать и сделали, можно сказать, открытие:
В итоге, мы решили попробовать способ, основанный на вычислении левого отрицательного отступа относительно элемента с фиксированной позицией, в отличие от расчета величины его правого края относительно предыдущего элемента. Сделать это получилось с помощью комбинации свойств: position: relative, left: 100% и отрицательного значения margin-left.
Вначале необходимо сформировать сетку из строк и ячеек. Мы можем поместить любое количество ячеек в одной строке и любое количество строк в необходимом нам блоке:
… и так далее. Каждый блок-ячейка имеет дополнительный внутренний блок с классом sap-content. Это сделано для того, чтобы: - избежать баг отрисовки в IE6, - управлять отступами внутри ячейки - использовать свойства overflow (ячейки не будут разваливаться)
Для позиционирования первого блока-ячейки нам нужно прописать отрицательное значение margin-left и установить ширину блока. Например:
#item1 { margin-left: -100%; width: 30%;}
Наглядно это можно изобразить так:
С помощью такого CSS кода мы позиционируем каждую новую ячейку по друг за другом, при этом ширина каждой из них зависит от контента содержащегося в ней, либо задается отдельно в стилях. Отрицательный отступ - эта та самая величина, рассчитываемая от правого края рабочей области, которую мы теперь компенсируем слева.
Примеры
- 3х колоночный макет с фиксированным размером левой и правой колонок. Следует обратить внимание на следующие моменты:
Левая и правая колонки имеют ширину в пикселях. Поэтому, мы не можем высчитать левый отступ для центрального блока, т.к. не знаем ширину рабочей области в процентах, так же как и ширину колонок в процентах от рабочей области. Решение будет простым: установим для главного блока свойства: margin-left: -100% и width: 100% и добавим padding чтобы получить отступы от колонок.
Все 3 колонки отрисованы на одном уровне по оси Z, поэтому необходимо для левой и правой колонок прописать свойство z-index, например 100.
Отступы для левой и правой колонок добавлены к дополнительному внутреннему блоку sap-content, и как говорилось выше, это обеспечивает гибкость работы с ним.
включает 5 колонок, в котором рабочая область, все строки и ячейки имеют ширину в процентах. Добавление изображений, границ и отступов не влияет на отрисовку и позиционирование блоков.
Преимущества метода
Новый способ позиционирования позволяет нам располагать элементы на заранее отведенное для них место, так же как и при абсолютном позиционировании, но все элементы будут следовать в одном потоке, друг за другом. Имитация абсолютного позиционирования имеет множество преимуществ наравне с версткой обычными методами. Каждая строка в сетке всегда будет _той же высоты_ что и центральная часть или той, что определена стилями, и всегда будет иметь 100% ширины, независимо от того сколько ячеек задано в колонке. Кроме того, способ позволяет избежать образования промежутков между элементами - и это большой плюс, т.к. в IE приходилось применять для этого css-фильтры (хаки) в блочной модели.
Еще одним преимуществом является то, что эта техника «смягчает» недостатки плавающей модели. Когда содержимое блока шире чем сам блок, то он толкает следующий блок вправо, а не сбрасывает его вниз. Содержимое блока может быть даже намного больше своего родителя - это никак не скажется на структуру нашего макета. (в этом помогает правило overflow: hidden). И самое главное - новая техника абсолютно валидна HTML 4.01 и CSS 2.1 и отрицательное значение margin-left одинаково воспринимается всеми браузерами! Больше никаких хаков! К тому же, модель подойдет как для дизайнов с фиксированной, так и 100% шириной, и позволяет работать с одинаковыми высотами колонок, при этом имеющих фиксированную либо % ширину. Имитация абсолютного позиционирования может даже использоваться рекурсивно, т.е. позволяет использовать ячейки как строки с новыми ячейками - как при верстке с использованием table.
Подводные камни
Техника имитации абсолютного позиционирования представляет собой шаблонную сетку, таблицу, и скорее пригодна для сложных макетов. Поэтому если ваш дизайн состоит из двух колонок, то эта техника, скорее всего, вам не понадобиться.
Кроме того, есть ситуации, в которых техника не будет работать. Если вы хотите расположить элементы друг за другом, вы не можете использовать единицы измерения, отличные от той, в которых указана ширина рабочей области, иначе вы просто не сможете рассчитать необходимый отрицательный отступ. Например, у вас есть рабочая область шириной 800px и вы хотите сделать левый отступ в 2em для вашей ячейки, но вы не рассчитаете значение отступа, т.к. не знаете сколько em в 800 пикселях.
Еще одно замечание: когда элемент становиться больше предшествующего элемента согласно html коду, то этот прицепной элемент будет сдвинут вправо на величину равную разнице в ширине между первым элементом и рабочей областью.
Т.к. техника эта новая и еще неопробованная пользователями, то, наверняка, отроются еще и другие ее секреты, как положительные, так и отрицательные. Но приведенные примеры уже доказывают, что новая техника практически замещает нелюбимые нами таблицы и прекрасно подходит для шаблонов на сетке.
Несколько дней назад опубликовал на своем блоге новость о том, он вместе с успешно реализовали идею о (статья в моем блоге). Уже сегодня каждый может увидеть CSS-константы в действии. Для этого нужно установить свежую версию .
Собственно, вот мой маленький тест: стили блока div я задала константами.
Радует, что разработчики идею свою не бросили и теперь уж точно доведут дело до финиша. Но когда этим смогут воспользоваться вебмастера - неизвестно… Да и код выглядит пока довольно громоздко, но уже хоть что-то :)
Интересно, будет ли реализована возможность использовать не только константы, но и переменные, вида:
В рамках акции блога Miku сделала маленький плагин для wordpress WP-RSSday - ко Дню RSS в России, который намечается на 1 июля. Кто еще не знает, что такое RSS? :) Плагин выводит в правом верхнем углу на сайте ленточку в расцветке российского флага со ссылкой на сайт дня RSS в России. Ссылка, как полагается неиндексируемая. Чтобы ленточка появилась на вашем блоге, просто скопируйте папку wp-rssday в папку plugins вашего сайта и активируйте плагин в панели управления блогом Cкачать плагин "День RSS в России" Посетить сайт дня RSS в России
Пользователи Рунета могут смело брать маркер поярче и обводить на календаре новую дату: 1 июля - День RSS в России. Под таким лозунгом проходит акция блога Miku.
В Россию праздник пришел следом за , прошедший 1го мая у англоязычной части Интернета. Что ж, принимаем эстафету:)
В апреле этого года Исследовательским центром портала SuperJob.ru был проведен опрос «Используете ли Вы RSS?», по итогам которого выяснилось, что 63% пользователей Рунета ничего не знает о существовании такого сервиса. «Ни разу не пользовался и даже не знаю, как начать»; «А что это такое?» это - наиболее частый ответ, который давали респонденты. Подробнее о результатах исследования можно узнать
Определение:
RSS - семейство форматов, основанных на языке разметки XML. Обычно используется для представления и передачи кратких анонсов новостей и статей сайтов.
Сайт посвященный RSS -
Немного истории
Разработка RSS началась ещё в 1997 году. Первую известность эта технология получила, когда компания Netscape использовала её для наполнения каналов своего портала Netcenter. Вскоре RSS уже использовался для трансляции контента на многих новостных сайтах: BBC, CNET, CNN, Disney, Forbes, Wired, Red Herring, Slashdot, ZDNet и многих других.
Первой открытой официальной версией RSS была версия 0.90, основанная на формате RDF (Resource Description Framework). Однако многим он показался слишком сложным, и тогда Netscape представила его упрощённую версию - 0.91. А в 2000 году произошло разделение формата:
группа разработчиков из списка рассылки «RSS-DEV» предложила формат RSS 1.0, который был основан на стандартах XML и RDF организации W3C.
Дейв Вайнер, работающий в компании «UserLand Software», опубликовал спецификацию RSS 0.92, которая является развитием версии 0.91 и ориентируется на тех пользователей, которым RDF-описание показалось излишне сложным.
Популярность технологии росла и уже в июне 2006 года появился конкурент RSS - формат . Подробности развития технологии можно узнать из .
Как использовать технологию RSS?
Если вы хотите всегда быть в курсе свежих новостей ваших любимых сайтов, то именно RSS поможет вам узнавать свежие заголовки уже сразу после их публикации. И для этого не нужно даже устанавливать специальные программы. Все современные браузеры имеет встроенный RSS-reader, или, проще говоря, «новостную читалку».
Например в IE7 достаточно зайти на сайт и нажать иконку RSS: перед вами откроется список доступных новостных лент, которые вы можете читать прямо из браузера.
RSS-ридеры
Если вам не хочется пользоваться именно браузером, то можно читать новости через on-line ридеры, установить программу:
для Windows:
Для Linux
Для Mac OS
Более подробный список программ можно найти также в обзоре .
RSS для разработчиков
Если у вас есть сайт с постоянно обновляемым контентом, например, блог, то встроить RSS-ленту не составит труда. Любой блоговый движок (, , , , , , ) имеет функцию создания новостной ленты, вам лишь останется указать ссылку на фид (он же RSS фид, он же новостная лента). Если вы пишите движок самостоятельно, то сформировать RSS ленту вам помогут .
RSS иконка
Как минимум, каждый блоггер однажды решает сделать свой оригинальный дизайн RSS иконки. Сейчас разнообразие иконок настолько велико, что новички врятли знают, какой она была изначально. На самом деле, иконку RSS придумали еще разработчики FireFox:
Opera и Microsoft возражать не стали, а предложенный дизайн решили сделать стандартом RSS иконки. Подборку таких стандартных иконок можно найти на официальном сайте . Ну, а если вам хочется чего-то большего, то можно заглянуть сюда: , .
Посчитай-ка
Сформировали ленту? Нарисовали красивую иконку? Пора собирать читателей! И тут на помощь нам придет сервис . Просто зарегистрируйте адрес своего фида и у вас появиться возможность отслеживать динамику изменений числа подписчиков на вашу ленту. Кроме того, можно настроить рассылку ленты на e-mail вашим читателям.Ведете блог на wordpress? Установите плагин , чтобы весь RSS трафик отсылался в FeedBurner. Тогда вы будете знать более точное число читателей.
Надеюсь после этой статьи число пользователей, не знающих о технологии RSS уменьшится :)
Мало этой статьи? Еще больше полезных ссылок вы найдете .
Как принять участие в празднике?
Хотите принять участие в праздновании дня RSS в России? Заходите на официальный сайт дня RSS в России! Расскажите, что вы тоже знаете о RSS и получите сертификат участника.
Кроме того вы можете:
Скачать плагин для wordpress показывающей ленточку с флагом России, ссылка с ленточки ведет на сайт дня RSS в России (конечно в nofollow :)).
