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

Атрибут async на момент написания этого текста поддерживается всеми браузерами, кроме IE. Это логический атрибут. Когда он присутствует, то скрипт будет загружен асинхронно. Он может быть использован только если скрипт загружен через атрибут src.

Варианты использования:

<script async>
<script async="async">
<script async="">

Итак, создаем элемент, например, картинка:

<img src="/images/pic.png" class="attention" title="Заголовок :: Текст на подсказке" />

Создаем стиль:

/* обертка */
.tip-wrap {
  background-color: #f0c356;
  font-size: 12px;
  max-width: 300px;
  padding: 4px;
  box-shadow: 1px 1px #505050;
}
/* верхняя часть */
.tip-top {
}
/* содержимое подсказки */
.tool-tip {
	color: #fff;
	width: 139px;
	z-index: 13000;
}
/* заголовок */
.tool-title {
	font-weight: bold;
	font-size: 11px;
	margin: 0;
	color: #9FD4FF;
	padding: 8px 8px 4px;
	background: url(/images/bubble.png) top left;
}
/* текст */
.tool-text {
	font-size: 11px;
	padding: 4px 8px 8px;
	background: url(/images/bubble.png) bottom right;
}
/* нижняя часть */
.tip-bottom {
}

Теперь скрипт инициализации:

window.addEvent('domready', function(){
  var Tips = new Tips($$('.attention'));
});

Появление подсказки можно сделать с разными эффектами, например, плавное появление:

var Tips = new Tips($$('.attention'), {
	initialize:function(){
		this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
	},
	onShow: function(toolTip) {
		this.fx.start(1);
	},
	onHide: function(toolTip) {
		this.fx.start(0);
	}
});

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

В этом обзоре рассмотрим самые распространенные компоненты, для создания интернет-магазина на базе CMS Joomla. Сейчас это HikaShop, JoomShopping, VirtueMart, redSHOP. Разработчики этих компонентов активно поддерживают свои продукты и периодически выпускают обновления.

HikaShop

Компонент имеет рейтинг 4.54 из 5.00 в каталоге дополнений joomla. На момент написания этого обзора компонент HikaShop совместим с joomla версий 1.5-1.6-1.7-2.5. Страница компонента в каталоге расширений http://extensions.joomla.org/extensions/e-commerce/shopping-cart/14275

Установка

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

Администрирование

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

Функции

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

Удобство изменения шаблона

Шаблон сделан неплохо. Изменить его под свой дизайн или изменить какие-то представления информации не составит труда.

Резюме

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

JoomShopping

Компонент имеет рейтинг 4.12 из 5.00 в каталоге дополнений joomla. Совместим с joomla версий 1.5-1.6-1.7-2.5. Страница компонента в каталоге расширений http://extensions.joomla.org/extensions/e-commerce/shopping-cart/5378

Установка

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

Администрирование

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

Функции

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

Удобство изменения шаблона

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

Резюме

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

VirtueMart

Компонент имеет рейтинг 3.98/5.00 в каталоге дополнений joomla. Совместим с joomla версий 1.5-1.7. Страница компонента в каталоге расширений http://extensions.joomla.org/extensions/e-commerce/shopping-cart/129

Установка

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

Администрирование

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

Функции

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

Удобство изменения шаблона

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

Резюме

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

redSHOP

Компонент имеет рейтинг 3.87/5.00 в каталоге дополнений joomla. Совместим с joomla версий 1.5-1.6-1.7. Страница компонента в каталоге расширений http://extensions.joomla.org/extensions/e-commerce/shopping-cart/11571

Установка

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

Администрирование

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

Функции

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

Удобство изменения шаблона

Самый неудобный для редактирования шаблон. Даже небольшие изменения будет сделать непросто. Про серьезное изменение верстки лучше сразу забыть.

Резюме

Хороший интернет-магазин. Работает быстро. Основной недостаток — неудобство редактирования шаблона.

Недостаток этого способа в том, что настройки придется прописывать вручную. Проще всего сделать так — сначала сохранить настройки как обычно в админке. Потом зайти в БД и достать строку с настройками, например, таким запросом:
SELECT params FROM q6e9c_modules WHERE module = 'mod_login'
Полученную строку с параметрами вставляем в $module->params, как показано на примере ниже. Формат данных видно в данном примере.

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

jimport( 'joomla.application.module.helper' );
$module = JModuleHelper::getModule( 'mod_login' );
$module->params = '{"Text":"String","Label":"Name"}';
echo JModuleHelper::renderModule($module);

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

Поддержка в браузерах

IE — начиная с 9 версии.

Пример простой вставки видео ролика:

<video preload="metadata" tabindex="0">
    <source type="video/mp4" src="media/clip.mp4"></source>
    <source type="video/webm" src="media/clip.webm"></source>
    <source type="video/ogv" src="media/clip.ogv"></source>
</video>

Чтобы добавить к видео элементы управления, добавляем такой атрибут: controls="controls"
Код ролика, с элементами управления( Воспроизвести, пауза, прокрутка, громкость, полный экран ):

<video controls="controls">
    <source type="video/mp4" src="media/clip.mp4"></source>
    <source type="video/webm" src="media/clip.webm"></source>
    <source type="video/ogv" src="media/clip.ogv"></source>
</video>

Список всех доступных атрибутов для тэга <video>

.rc {
  -moz-border-radius: 0.3em; /* старые mozilla */
  -webkit-border-radius: 0 0 0.3em 0.3em; /* safari, chrome */
  border-radius: 0 0 0.3em 0.3em; /* современные mozilla, css3 */
}

Единственное условие — плагин «Контент — Загрузка модулей(Content — Load Module)» должен быть включен.

Находим файл administrator/components/com_jshopping/views/product_edit/view.html.php

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
jimport( 'joomla.application.component.view');

class JshoppingViewProduct_edit extends JView
{
    function display($tpl = null){

        JToolBarHelper::title( ($this->edit) ? (_JSHOP_EDIT_PRODUCT) : (_JSHOP_NEW_PRODUCT), 'generic.png' );
        JToolBarHelper::save();
        JToolBarHelper::spacer();
        JToolBarHelper::apply();
        JToolBarHelper::spacer();
        JToolBarHelper::cancel();

        parent::display($tpl);
	}
}
?>

И добавляем всего одну строку JRequest::setVar('hidemainmenu', true);

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
jimport( 'joomla.application.component.view');

class JshoppingViewProduct_edit extends JView
{
    function display($tpl = null){
	JRequest::setVar('hidemainmenu', true);

        JToolBarHelper::title( ($this->edit) ? (_JSHOP_EDIT_PRODUCT) : (_JSHOP_NEW_PRODUCT), 'generic.png' );
        JToolBarHelper::save();
        JToolBarHelper::spacer();
        JToolBarHelper::apply();
        JToolBarHelper::spacer();
        JToolBarHelper::cancel();

        parent::display($tpl);
	}
}
?>