Статьи по меткам ‘html’

Новый модуль — WWW::Ruler

Сентябрь 28th, 2012

Сегодня разместил на CPAN свой второй open source модуль — WWW::Ruler. Не буду описывать то, как с ним работать. Напишу лишь краткое его представление.

WWW::Ruler помогает легко формировать рулетку стиля Google (её функционирование) , а также помогает программисту получить нужные смещения для обрезания массива данных. То есть, мы указываем модулю размер всего массива, что мы имеем (например сколько всего товаров в категории), количество элементов на одной странице (категория разбита на страницы), желаемое количество кнопок «рулетки» и номер текущей страницы, для которой надо показать релетку. Модуль формирует массив элементов рулетки и вычисляет start & end позиции в массиве, которые можно использовать для вырезания данных из массива. Массив рулетки проходится обычным for оператором и отталкиваясь от значений, легко рисуются кнопки [<], [>], […] и [1], [2] и т.п..

Где взять:

CPANhttp://search.cpan.org/dist/WWW-Ruler/

GitHub репозитарий — https://github.com/Perlover/WWW-Ruler.git

Визуализация графиков на JavaScript

Июнь 1st, 2012

Сегодня решил немножко «пробить» вопрос визуализации на JavaScript разного рода графиков. Самые лучшие графики получаются средствами HTML5 и её расширением SVG. Также нашёл отличный пост про 20 библиотек визуализации. Вот ссылка на тот пост:

http://sixrevisions.com/javascript/20-fresh-javascript-data-visualization-libraries/

А также вот сам несколько демок разных библиотек. И всё это без всякого Flash, работает в Firefox! 🙂

http://www.highcharts.com/demo/
http://www.highcharts.com/stock/demo/

И ещё классную библиотечку нашёл сейчас — http://raphaeljs.com/ — там даже есть 3D шутер, типа Quake 🙂

Перед началом использования какой либо библиотеки обратите внимание на лицензии — тема новая, инструментов мало, и сильно коммерцианализирована. Многие разработчики дают free версии только как Demo. Простой пример такой библиотеки — http://wijmo.com/demos/

Несколько полезных jQuery модулей от Odyniec

Сентябрь 27th, 2011

Сегодня посмотрел страничку одного разработчика по ник — имени Odyniec. Очень понравились его разработки. Спешу поделиться с вами 🙂

  • imgAreaSelect — jQuery плугин для кропинга (cropping images) картинок (точнее, выделение области — кропинг делайте сами ;-)) — (пример)
  • imgZoom — Красивое листание картинок с анимацией, ротацией и приближением из далека (пример)
  • selectListмультивыборочный select лист, показывающий выбранные опции отдельно с возможностью легкого их удаления (пример)

Также, автор написал несколько полезных статей по CSS (как создать «деревья», «табы»)

Также, автор написал несколько модулей на perl для Dancer (его сайт также работает под Dancer): Dancer::Plugin::DebugToolbar, Dancer::Plugin::DirectoryView

Немного о супер направлениях в Web на Perl

Июль 19th, 2011

Немогу не поделиться своими выводами об изучении нескольких новых технологий в Perl и в Web программировании. Немного предистории.

Я сам программирую динамические веб сайты (CGI) только на Perl. Никогда не использовал PHP. Это не только потому, что я фанат Perl, но и дань эффективности — под Perl много модулей, много возможностей, и при грамотном подходе сайты на Perl будут работать быстрее PHP — ведь Perl код после компиляции хранится в памяти в виде байт кода (типа «Пи кода» кода в Pascal). А если знаешь Perl, то и разработка может идти гораздо быстрее. » Читать дальше: Немного о супер направлениях в Web на Perl

Хорошая статейка по CSS и Float блоки (поплавки)

Март 24th, 2011

Вот искал и нашел эту статейку со всеми премудростями обращения с блоками — поплавками (float) в CSS. Спешу с вами поделиться 😉

http://designformasters.info/posts/css-float-theory-and-practice/

Для тех, кто хочет иметь этот адрес всегда под рукой в мобильнике, вот QR-Code:

DOCTYPE & Images в таблицах — почему разваливается дизайн?

Январь 26th, 2011

Это будет краткий обзор моего исследования на тему DOCTYPE (подробнее о DOCTYPE я напишу как нибудь позднее) и поведения <IMG> элементов. Итак, если вы еще не знаете, а являетесь вебдизайнером или верстальщиком HTML страниц, вам надо знать, что лучше указывать тип документа для HTML диррективой DTD в начале любого HTML документа: <!DOCTYPE …>. Потому как иначе, ваша страница может выглядеть и работать не так, как вам хочется (например, без этого определения не работает CSS «position: fixed»). Я долго мучался с этим DOCTYPE, чтобы все работало так, как хотелось бы, и пришел к выводу, что лучше делать именно такое объявление типа: » Читать дальше: DOCTYPE & Images в таблицах — почему разваливается дизайн?

Каков % пользователей с JavaScript?

Декабрь 18th, 2009

На своих нескольких проектах уже замечал неоднократно такую статистику — по моим данным, только 70-73% рядовых пользователей интернета имеют включеную поддержку JavaScript. Сразу хочу заметить, что не Java, а JavaScript! Делаю эту поправку потому, что некоторые ошибочно думают, смотря в Google Analytics или в данные некоторых других счетчиков в  колонку Java (там, как правило, цифры за 90%). А ведь счетчики сами работают на JavaScript, и визит посетителя с отключенным JavaScript они просто не зафиксируют!

Как я посчитал эти цифры? Возьмем, к примеру логи Apache сервера. Они показывают сколько реально было загрузок какой либо страницы. Берем данные о загрузке страницы из этих логов -V1, затем смотрим, сколько нам посчитал счетчик, например Google Analytics — V2 (я обсчитывал статистику даже своими JavaScript счетчиками на основе Ajax). V1 — сколько всего смотрело людей, а V2 — у скольки включен скрипт. V2 всегда будет меньше V1, и если посчитать по формуле V2/V1*100%, то получится 70-73%. Проверьте сами! 🙂

Конечно, могут возразить — боты и все такое… Но я замерял на разных проектах — на известных и нет, и из разных источников. Цифры всегда были примерно одинаковые. Не верю, что везде процент ботов одинаковый!

Так что помните об этом, когда создаете страницу, работающую только на чистом JavaScript коде!

Dafizilla Table2Clipboard

Ноябрь 19th, 2009

Если вы попробуете скопировать таблицы из HTML страницы в Firefox и вставить их, например, в Excel или в OpenOffice Calc, то вы обнаружите, что они вставляются битыми и вообще, наперекосяк. Это ведь не то, что вы ожидали, наверное? Не знаю почему, но Firefox копирует таблицы в какой-то странной манере (добавляет лишние пробелы и т.п..). Эту манеру исправляет этот плагин.

Выделите таблицу с данными, например, щелкните правой кнопкой мыши по выделенным ячейкам (выделит отдельные ячейки — нажимаем Ctrl и удерживая, выделяем мышкой, или можно скопировать сразу всю таблицу — пункт «Copy whole table»), выберите в меню «Copy selected cells», затем сделайте вставку в Excel или в OPenOffice Calc. Все будет вставлено как надо.

Очень полезно, когда работаете с какими либо данными.

Пипетка цветов прямо из Firefox

Ноябрь 2nd, 2009

Сегодня поставил очень полезный плагинчик для вебмастера сайтов. Кто работал с Фотошоп, знают инструмент «пипетка» — тыкаешь в любое место картинки, получаешь параметр цвета. Я раньше так и делал для сайтов — делал скриншот, потом копировал в Фотошоп, там получал цвет пипеткой. Но если вам надо получить цвет из веб страниц, самый лучший способ — ColorZilla плагин.

Итак, скачиваем, ставим. Внизу слева появляется значок «пипетки». По правой кнопке мыши можно вызвать опции, установить разные настройки. Быстрый вызов — Shift + Esc. При этом появляется мишень — вы наводите на любое место в Firefox, хоть на менюшки самого Firefox, при этом видите цвет в мишени там, где пипетка. Клик — и цвет запомнен. Очень рекомендую поставить опцию «Options» -> «Auto Copy» -> «Enabled». Тогда автоматом цвет при клике будет запоминаться в Clipboard. Работает даже для картинок вебстраницы.
Если удерживать Alt + Shift, то можно прокручивать страницу вправо-влево, вверх-вниз мышкой, с нажатой на ней левой кнопкой (удобно, когда страница больше чем экран).

Но! Этот плагин имеет очень много других полезных фишек. Это:

  • Измерение расстояния (ΔX, ΔY) между текущей позицией мишени пипетки и позицией от предыдущего измерения
  • Редактор цветов
  • Палитры цветов и history по ним (иногда удобно использовать это)
  • И самая полезная штучка — Анализатор цветов страницы (Webpage DOM Color Analyzer). Один вызов этого зверя, и он проанализирует всю страницу, построит палитру цветов, что в ней используется и выдаст вам эту палитру. Если при этом наводить мышкой на цвета, он подсвечивает и показывает куски страницы, где используется этот цвет. Я думаю, полезно это может оказаться, например, в таком случае: вам понравился сайт и его цветовая гамма, вы вызываете анализатор, а потом эту палитру используете. В ней можно исключать какие либо цвета, или разделять ее между участниками через общий сайт addon-са. Вообщем, если поразбираться, должно понравиться. Думаю, на самом сайте можно найти много готовых палитр (не пробовал пока)

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

Уже после публикации этого поста, я выяснил, что можно узнать цвет под :hover линком. Не знаю, как я просмотрел это на странице help автора плагина. Вообщем, тыкаем в :hover линк, у нас — цвет после наведения мышки. Кликаем правой кнопкой мыши по пипетке в Status Bar — там есть «Resample Last Location». Выбираем этот пункт — у нас цвет до изменения.