Интерблог

Архив рубрики "Кодинг"

Недолёт
Автор: Ognezmej. Опубликовано: 20 Июня 2012

Любой начинающий разработчик, получивший представление о библиотеке GD, приходит в восторг от открывающихся перед ним возможностей, и, в первую очередь - генерации картинок "на лету". Теперь не надо загружать на сервер множество изображений, иконок, превьюшек - PHP сам всё сделает из подручных материалов.

С первой проблемой сталкиваемся, когда количество картинок начинает превышать разумные пределы. Каковы они, эти разумные пределы - сами увидите. Страница и сами картинки даже при хорошем интернет-канале грузятся значительно медленнее, чем это должно быть, да и хостинг-провайдер начинает как-то косо смотреть на Ваш аккаунт. Каждая такая картинка - это запуск отдельного PHP-скрипта, теперь представьте, как увеличивается нагрузка на сервер для генерации 30, 50, 100 картинок... Рекомендации - генерировать картинки одной функцией, специально написанной для такого случая, единовременно, в статические файлы. В случае обновления - повторить процедуру генерации.

Вторая проблема - с динамически генерируемыми картинками не работает функция getimagesize(). Причина - запрос информации о файле совершается раньше, чем собственно файл создаётся. Решение отсутствует, рекомендации - избегать подобных сочетаний ингредиентов:)

 

Метки: PHP, Кодинг, Советы

А ещё AJAX нужен для...
Автор: Ognezmej. Опубликовано: 28 Мая 2012

Предположим, у Вас запускается тяжёлый PHP-скрипт. Достаточно тяжёлый, чтобы с шансами не уложиться в отпущенные сервером 30 секунд. Разумеется, можно через set_time_limit(), .htacess, php.ini попробовать изменить максимальное время выполнения скрипта, но далеко не все хостеры такое позволяют. По вполне закономерным причинам.

Что делать? Использовать аякс. Для начала осознаем простую истину. Тяжёлый скрипт обычно представляет собой не одну-единственную, а последовательность нескольких/многих функций, в том числе и зацикленных. Ага! Что такое функция? Это входные данные, некие действия и выходные данные. Последовательность функций - это когда входные данные последующей функции являются выходными данными предыдущей. Итак, разбиваем наш тяжёлый скрипт на составляющие функции так, чтобы исполнение каждой с гарантией уложилось в разрешённый отрезок времени. Например, делаем файл ajax.php, где в зависимости от переданной через GET переменной запускается та или иная функция. Делаем основной файл, из которого аяксом будем запускать поочерёдно нужные нам функции, анализируя их ответы. Благодаря Jquery эта задача превращается в чистое удовольствие.

$(селектор).load('ajax.php?function=one', {'var1':var1, 'var2':var2}, function(){анализируем выходные данные, запускаем функцию two, и так далее});

Для скорости работы данные из ajax.php можно получать в json, для простоты и наглядности - прямо в html.

Минусы - общее время работы всё-таки увеличивается. Но зато хотя бы работает. Плюсы - такую игрушку можно легко украсить progressbar-ом, а также можно легко отслеживать ошибки, не дожидаясь окончания работы всего скрипта. Ещё можно добавить кнопку "пауза", "продолжить" и наслаждаться тотальным контролем над выполнением приложения:)

 

Метки: Ajax, jQuery, PHP, Кодинг, Советы

Принцип неопределённости в PHP - праздник продолжается!
Автор: Ognezmej. Опубликовано: 12 Мая 2012

Попробуйте выполнить простенький код:

echo (106801004500603);

Понравилось? PHP считает, что он самый умный, и ему виднее, в каком формате сохранять число. Оно, конечно, и ладно бы, но рассмотрим пару задач.

 

Первая задача - вывести это самое число. Ни echo(), ни print() не выдадут ничего, кроме 1.068010045006E+14. Мы, однако же, не дураки, переведём число в формат string, и... получим то же самое. Слава-те-господи, в PHP существует функция number_format(), и number_format (106801004500603,0,'','') выдаст нам именно то, что мы хотим.

 

Вторая задача - занести это число в MYSQL. Вы уже поняли, что это не так просто, как кажется. Допустим, у нас некая таблица test, число надо записать в поле val. Первые четыре примера - если поле val - строковое, такое часто бывает, например, для всяких артикулов и серийных номеров, которые могут быть как просто числами, так и с наличием букв:

mysql_query('INSERT `test` SET `val`="106801004500603";'); - записывает 1.068010045006E+14

mysql_query('INSERT `test` SET `val`=106801004500603;'); - записывает 106801004500600

mysql_query('INSERT `test` SET `val`="'. number_format (106801004500603,0,'','') .'";'); - записывает 106801004500603

mysql_query('INSERT `test` SET `val`='. number_format (106801004500603,0,'','') .';'); - записывает 106801004500603

Если поле val - числовое:

mysql_query('INSERT `test` SET `val`="106801004500603";'); - записывает 106801004500600

mysql_query('INSERT `test` SET `val`=106801004500603;'); - записывает 106801004500600

mysql_query('INSERT `test` SET `val`="'. number_format (106801004500603,0,'','') .'";'); - записывает 106801004500603

mysql_query('INSERT `test` SET `val`='. number_format (106801004500603,0,'','') .';'); - записывает 106801004500603

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

 

 UPDATE:

Увы, number_fromat() работает только до 15 знаков. Число, состоящее из более, чем 15 знаков, меняется произвольным образом.

echo number_format (106545548010045006503,0,'','');  выводит 106545548010045014016

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

 

 

Метки: MYSQL, PHP, Кодинг, Советы

Принцип неопределённости в РНР
Автор: Ognezmej. Опубликовано: 03 Апреля 2012

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

Рассмотрим поведение переменных, передаваемых через $_GET. Общие места - наличие переменных рекомендуется проверять if (isset($_GET['var'])), конструкции вида <a href="script.php?page=&addr=&blabla=">ткни сюда</a> тоже, в общем, не вызывают особых вопросов - пустые переменные. А теперь проверьте эти переменные рекомендуемым способом - получите ЕКГУ, что в простонародье означает TRUE. А теперь не рекомендуемым - if ($_GET['var']) - получите нормальное FALSE!

Ну, и, конечно, попытки проанализировать ноль. Для нас-то ноль - это целое число, на которое нельзя делить, а для PHP это, кроме целого числа, ещё и строка '0', ещё и логическое FALSE, ещё и пустая строка (''). Ну, вот, к примеру, передаём тем же $_GET некую переменную ?var=0, и анализируем. if($_GET['var']) даёт FALSE, хотя этот ноль для нас может нести информацию. Или, к примеру, пишем функцию с необязательными параметрами. При передаче необязательным параметром нуля и его проверке тоже получаем FALSE. К счастью, такие моменты легко решаются строгой проверкой if($arg!==FALSE). Это просто нужно помнить, чтобы потом не было мучительно больно за неправильно работающий код.

В теории всё хорошо, переходим к практике.

Опаньки!

Строгая проверка if($_GET['var']!==FALSE) при анализе запроса ?var1=&var2= даёт TRUE! А вы думали, в сказку попали?

Итак, формулируем задачу: к нам прилетает запрос вида: ?var1=1&var2=0&var3=. Нужно его проанализировать и отличить заданную переменную от нуля и пустой переменной. Причём, первое от второго отличать необязательно, а вот от третьего - надо. Фокус номер один - все переменные из $_GET - запроса имеют строковый формат, и, если кто захочет проанализировать gettype($_GET['var']), его ждёт разочарование. Но слабость обращаем в силу - раз все переменные - строки, то строгая проверка if($_GET['var2']==='0') (обратите внимание на кавычки) должна дать TRUE. И точно. Таким образом, ноль мы выцепили. Что с ним делать - решаем сами. Остальные переменные проверяем нестрогим if ($_GET['var']).

 

Метки: PHP, Кодинг

Принцип неопределённости в MYSQL
Автор: Ognezmej. Опубликовано: 13 Февраля 2012

Допустим, у нас есть некая таблица table, в таблице некое поле field, поле имеет тип INT, ну, к примеру, 5 или 10, без разницы. Умолчание для него не определено (если само поле NOT NULL), или определено как 0. Заполним таблицу всевозможными записями, при этом не задавая поле field (или задавая его нулём). А теперь делаем запрос:

SELECT * FROM `table` WHERE `field`="любая херня, которая придёт в голову";

Как Вы думаете, сколько он найдёт записей? Ни одной? А вот и фигушки! Он найдёт все записи, где field не определён или ноль. Мало того, кавычки после `field`= играют здесь непростую и даже трагическую роль. Если кавычки убрать, то любая не-числовая херня будет, как оно и положено, выдавать ошибку MYSQL, а числовая будет правильно обрабатываться. С  кавычками правильно обрабатывается, опять же, только числовая херня. А неправильные данные даже ошибку не выдают. What is it means?

 

UPDATE:

It means неявное приведение типов. То же самое, что и PHP-шная функция intval(). Значение поля приводится к целочисленному, и, если первым символом является не цифра, то получаем ноль. Если же хоть одна цифра вначале, то значение приравнивается к этой цифре - и равенства с пустым полем не будет.

Соответственно, рекомендация заключать даже численные переменные в кавычки может иметь довольно непредсказуемые последствия. Поскольку, как там же говорилось, mysql всё равно преобразует их к нужному типу:) Но, разумеется, если всё делать аккуратно и всё знать заранее, проблем не будет. Знать бы, куда падать, соломки бы подстелил...

 

Метки: MYSQL, Кодинг

JQuery. Щадящий режим.
Автор: Ognezmej. Опубликовано: 13 Мая 2011

Допустим, у нас есть задача, решаемая средствами JQuery. Допустим, она решается подключением какого-нибудь общеизвестного плагина. Но! Отдельные моменты плагином не реализованы, либо реализованы не так, как хотелось бы. А в целом, да, плагин подходит.

Что делать?

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

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

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

 

 

Метки: jQuery, Кодинг

Эмуляция плавности в ActionScript.
Автор: Ognezmej. Опубликовано: 20 Апреля 2011

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

Тем не менее, выходы и лазейки всегда найдутся. Рассмотрим простенький пример, как можно изобразить подобие плавного ухода элемента в ноль (fade out), не используя кадровую анимацию и не перегружая компьютер большим количеством одновременно выполняемых вычислений. Метод основан на том, что глаз человеческий воспринимает одновременно далеко не так уж много информации. 24 кадра в секунду, чтоб движение казалось плавным - аксиома кинематографа. Чтобы движение казалось хоть каким-то движением, достаточно двух-трёх кадров. Используем вот эту простенькую конструкцию:

my_clip._alpha = 50;
var mPause = setInterval (function ()
                {
                clearInterval (mPause);
                my_clip._alpha = 0;                
                my_function();               
                }, 300);

my_function - функция, которая запускается по окончанию нашей как-бы-анимации.
300 - это 300 миллисекунд, примерно треть секунды. Можете посмотреть, как оно работает с другими значениями.

Запускаем - объект уходит в сумрак быстро, но с некоторой иллюзией плавности - то, что нам и было нужно. Оказалось достаточно одного промежуточного кадра.

Попытаемся подытожить. Для создания сложного интерактивного ролика приходится сочетать разные варианты анимации. При простейших движениях без участия пользователя целесообразнее использовать программную анимацию. Когда возникает необходимость анимации при наведении мыши, используем все возможные методы, чтобы не перегружать машину вычислениями. Если анимация нескольких объектов идентична - оптимальным будет создание одного объекта, внутри которого будет находиться ещё один объект, выполняющий всю необходимую анимацию через tween. Этот самый внутренний объект представляет собой несколько кадров, в каждом из которых изображён один из объектов, которые надо анимировать. Далее внешний объект копируется, при этом внутренний при помощи gotoAndStop() устанавливается на соответствующий кадр. Там, где важна не сколько красота анимации, сколько её наличие, можно использовать эмуляцию через промежуточный кадр. И, разумеется, нейтрализуем быструю мышь посредством onEnterFrame.

 

Метки: ActionScript, Кодинг, Советы

Программная анимация в ActionScript
Автор: Ognezmej. Опубликовано: 19 Апреля 2011

Спрашивается, нафига во Flash программная анимация, если есть tween и shape, позволяющие легко и непринуждённо производить большинство простейших изменений объекта?

Ответ кроется в самой постановке вопроса. Программная анимация нужна там, где работа с tween и shape занимает больше времени. Итак, представьте - нужно сделать разную анимацию нескольких разных объектов. Открываем каждый объект, добавляем туда кадры, прописываем состояние объекта в ключевых кадрах, прописываем события к тем или иным кадрам, если это нужно, выходим из объекта. И это с каждым. В случае, если не устраивает скорость или положение объекта во время анимации - опять заходим, меняем кадры, выходим. Даже, если анимация всех объектов абсолютно одинакова, в случае чего придётся редактировать каждый объект. Также возможна путаница с именами объектов, поскольку для удобства дальнейшей работы (но бабушка-то надвое) объект неподвижный помещается в объект с анимацией.

Кому-как, а мне рыться в монтажной линейке представляется занятием тоскливым до безнадёжности. Всё должно быть максимально автоматизировано.

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

Для примера возьмём функцию fade, позволяющую плавно менять прозрачность объекта

MovieClip.prototype.fade = function (speed,limit,after)
    {
    var interval = Math.round(1000/speed);
    var grow = (this._alpha<limit);
    var Go = setInterval(function(obj) {
        var stopFade = false;
        if (grow && obj._alpha>=limit) stopFade = true;
        if (!grow && obj._alpha<=limit) stopFade = true;
        if (stopFade)
            {
            clearInterval (Go);
            obj._alpha = limit;
            if (after!=false) after.call();
            }
        else
            {
            if (grow) obj._alpha++;
            else obj._alpha--;
            }
        }, interval, this);   
    }

Параметры:
speed - скорость изменения,
limit - уровень альфы, который должен получиться в итоге
after - самое главное - функция, которая запускается по завершению анимации - чтобы можно было отследить это самое завершение. Можно применять любую пользовательскую функцию.

Например,  mc.fade(100,0,function(){trace('анимация завершена');}) - объект уходит в ноль, после чего выдаётся сообщение о завершении анимации.

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

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

 

Метки: ActionScript, Кодинг, Советы

Анимация при наведении в ActionScript
Автор: Ognezmej. Опубликовано: 19 Апреля 2011

"А хотите, я его стукну, и он станет фиолэтовым в крапинку?" ("Тайна Третьей планеты")

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

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

Но ведь оно же всё правильно прописано! Смотришь код - нет, никаких ошибок. Вот здесь onRollOver, здесь onRollOut. Запускаешь трассировку - вот те раз - некоторые действия и вправду не выполняются.

О эти быстрые движения мышью! Заказчику - развлечение, а программисту головная боль и бессонные ночи. Итак, правило - любую анимацию проверяй на быстрые движения мышью. Чтоб никаких глюков, лишних, или, наоборот, отсутствующих объектов, их перемещения непонятно куда...

На этом лирическое отступление заканчиваем. Итак, мы выяснили, что при быстром перемещении мыши (и клике, кстати, тоже, такое бывает), одним словом, при определённом количестве событий в секунду Flash перестаёт на них реагировать должным образом. Заметим, что количество глюков зависит от производительности компьютера - чем медленнее машина, тем легче испортить анимацию. Теперь упрощаем задачу. Итак, имеется некое множество элементов, при наведении и убирании мыши с которых должно происходить нечто. Прописываем это самое нечто в виде одной строчки, выполняющей некое простейшее действие, хотя бы ту же трассировку. Проверяем на быструю мышь - работает! Делаем вывод - компьютер не способен просчитать большое количество сложной анимации одновременно, однако простейшие действия выполняет. Теперь наше простейшее действие прописываем более утилитарно - изменением либо свойства элемента, либо просто какой-нибудь переменной. Ещё раз проверяем на быструю мышь. Эти самые свойства элемента и переменные - и есть тот хвост, за который мы поймали зверя, и теперь вытащим его на свет.

А вытаскиваем  мы нашего зверя при помощи onEnterFrame. Функция, которая гарантированно срабатывает с регулярностью, равной frame rate, который у нас меняется от 0.01 до 120. В зависимости от производительности компьютера его можно увеличить или уменьшить - не забывая, что у разных пользователей разные компьютеры. Я предпочитаю значение, равное 50.

Теперь всё просто. Внутри onEnterFrame анализируем наши переменные или свойства элементов, и выполняем необходимые действия.

Вопрос - почему onEnterFrame работает, а onRollOver и onRollOut - не работают? Ответ очевиден. В первом случае с регулярностью вызывается ОДНА функция, во втором - столько функций, сколько Вы за это время успели попасть мышкой по каждому элементу. Много сложной анимации одновременно покамест не по зубам даже очень мощному компьютеру - проверял на таком.

Удачи!

 

Метки: ActionScript, Кодинг, Советы

Did You know...
Автор: Ognezmej. Опубликовано: 04 Марта 2011

...что PHP может открывать BMP и даже PSD-файлы?

Итак -

 Функция imagecreatefrombmp():
http://ee.php.net/manual/en/function.imagecreate.php#53879

Класс phppsdreader с соответствующей функцией imagecreatefrompsd():
http://www.phpclasses.org/package/3627-PHP-Open-images-in-the-PhotoShop-PSD-format.html#download

Разумеется, должна быть библиотека GD2 - практически на всех хостингах она есть:)

 

Метки: PHP, Кодинг

Использование кодировки UTF-8
Автор: cyberacing. Опубликовано: 20 Февраля 2011

Не существует самого лучшего браузера, самого лучшего текстового редактора, самой лучшей операционной системы. А самая лучшая кодировка существует. Это UTF‑8. Главное ее преимущество заключается в том, что вы можете непосредственно включать в документ любые символы из всего набора Unicode. С UTF‑8 возникают проблемы на веб‑сервере? Здесь неприятность в том, что страница сделана в одной кодировке, а сервер в заголовках HTTP сообщает другую. Надо привести настройки сервера в соответствие с действительной кодировкой веб‑страниц. Чтобы PHP сайт правильно заработал с Юникодом необходимо сделать несколько операций. Для начала необходимо в секции <head> HTML-страницы прописать тег meta

<meta http-equiv="content-type" content="text/html; charset=utf-8">

Но несмотря на то, что с помощью тега meta указана верная кодировка, все браузеры по-прежнему упорно считают, что документ пришел в Windows-1251. Дело в том, что сервер отправляет кодировку в заголовке ответа. То есть сервер считает, что страница должна быть в кодировке Windows-1251, о чем говорит браузеру заголовком Content-type.

Content-type: text/html; charset=windows-1251

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

<?php
header('Content-type: text/html; charset=utf-8');
?>

Во-вторых, указать в файле .htaccess нужную кодировку:

AddDefaultCharset utf-8

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

Но на сайте обычно используется еще и база данных. Для неё тоже хорошо бы использовать кодировку UTF-8, а то могут возникнуть сложности, и на экране будут ромбики с вопросами. Что нужно сделать для этого? Ну наверно стоит для самой базы, для всех таблиц в базе и для всех текстовых полей использовать кодировку utf8_unicode_ci. Но обычно этого недостаточно. Тогда в код сайта, после функций mysql_connect и mysql_select_db добавляем строчку:

mysql_query("SET NAMES utf8");

Теперь можно наслаждаться самой лучшей кодировкой UTF-8!

 

Метки: Кодинг

Галерея PrettyPhoto
Автор: cyberacing. Опубликовано: 17 Июля 2010

В работе над одним проектом встал вопрос использования плагина LightBox. Скачал его, пытался установить. Все отлично в плагине, но он не удовлетворял всем требованиям. Поэтому пришлось искать более функциональные аналоги. И тут наткнулся на PrettyPhoto. Разобравшись, я понял, что это мой выбор. Он очень удобный, понятный и легконастраиваемый. К тому же этот плагин позволяет работать не только с фото. В области просмотра можно выводить видео с YouTube, ролики в формате .mov (Apple QuickTime), содержимое во flash-формате и наконец вообще любой контент через iframe. И еще он имеет свой API, чего у других не наблюдалось.

Кроме множества различных настроек плагин предоставляет еще 4 метода:

$.prettyPhoto.open('path/to/image','Title','Description') – метод позволяет открыть нужную галерею.

$.prettyPhoto.changePage('next') – с помощью этого метода можно осуществить переход к следующему изображению галереи.

$.prettyPhoto.changePage('previous') – с помощью этого метода можно осуществить переход к предыдущему изображению галереи.

$.prettyPhoto.close() – с помощью этого метода можно закрыть галерею.

Самый большой интерес вызовал метод, с помощью которого можно открыть галерею практически как угодно и откуда угодно. Именно такое требование было в данном проекте. Нужно было открыть галерею в "лайтбоксе", при этом по клику перейти на страницу галереи и открыть фотографию, на которой был клик на предыдущей странице-превью галерей. Как оказалось задача решалась просто :)

Для желающих изучить подробнее и посмотреть демо-примеры предлагаю обратиться на сайт разработчика: PrettyPhoto

 

Метки: jQuery, Кодинг

Области применения Ajax
Автор: cyberacing. Опубликовано: 02 Июня 2010

Для чего все-таки нужен Ajax? Где его стоит использовать, а где нет?

Где стоит использовать Ajax:

  • Формы. Они очень медленны. Если асинхронно передавать данные, страница не перезагружается.
  • Навигация в виде "дерева". Вообще, такая навигация - ужас. Простая топология намного удобнее, но если уж до этого дошло, лучше использовать Ajax.
  • Голосования. Пользователю будет приятней оставить свой голос за несколько секунд, чем за 30-40.
  • Система комментариев. Пример: на сайте есть статьи, к которым можно приписывать комментарии. Пользователю приходится все время перезагружать страницу, чтобы увидеть новые посты. Это крайне неудобно.
  • Фильтры. Часто на сайтах делают сортировку по дате, по имени, и т.д. Ajax это будет значительно удобнее.

Где не стоит использовать Ajax:

  • Поиск. Лучше использовать PHP и Perl.
  • Обычная навигация. Для навигации между документами Ajax не поможет.
  • Обновление большого количества текста. Если текст занимает почти всю страницу, то легче перезагрузить ее.
  • Бесполезные украшения. Всякие подсвечивающиеся ячейки и появляющиеся подсказки будут только отвлекать пользователя.

Теперь о самой большой проблеме Ajax. Закладки и кнопки "вперед-назад" стали незаменимы из-за традиционных веб-приложений. С посещением разных сайтов у пользователя скапливается большая коллекция закладок, да и кнопки "вперед-назад" работают прекрасно, всегда можно вернуться к интересующей информации. Но Ajax-приложения довольно необычны, и обычно огромное количество данных находится формально на одной и той же странице. Наши браузеры тоже считают такое приложение одной страницей, поэтому при обновлении кнопки "вперед-назад" не работают, поэтому нельзя вернутся, если что-то пропустил, а закладки в этом случае просто бесполезны.

Итак, Ajax - это не технология, это объединение технологий, это процесс, это новый взгляд на старые вещи. Ни одна из технологий, составляющих Ajax не нова. Однако, их совместное использование позволяет получить новые результаты.

 

Метки: Ajax, Кодинг

Версия для печати
Автор: cyberacing. Опубликовано: 10 Февраля 2010

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

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

Также может быть создана специальная функциональность «Собрать буклет», позволяющая преобразовывать выбранные пользователем разделы и страницы сайта в аналог полиграфического буклета (с оглавлением, номерами страниц, соответствующей версткой и т.д.). При ее реализации можно найти на сайте МДМ-банка.

Проверить корректность «версии для печати» веб-страницы можно по следующему контрольному списку:

  • каждая страница должна содержать логотип компании и контактную информацию (в том числе, URL сайта, с которого страница распечатана)
  • важно убедиться, что страница корректно воспроизводиться в черно-белом варианте
  • все стили оформления сайта необходимо аккуратно вопроизвести с учетом размеров бумаги, полей, оставляемых принтером, и прочих технических ограничений
  • на странице не должно быть служебных и лишних графических элементов (в том числе, фон страницы, если он не белый)
  • в версии для печати должны отсутствовать рекламные баннеры
  • на странице не должно быть навигационных элементов сайта
  • контент должен приемлемым образом разбиваться на страницы стандартного формата (обычно А4)
  • если информация быстро устаревает, то должна быть проставлена дата генерации страницы

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

(Выдержка из книги Овчинникова Р. и Сухова С. "Корпоративный веб-сайт на 100%")

 

Метки: Кодинг, Советы

Meta description
Автор: cyberacing. Опубликовано: 30 Ноября 2009

В этом тэге дается краткое описание содержания страницы. Эти данные могут быть использованы поисковыми системами для составления краткого описания страницы в списке результатов. Это описание никаким образом не отражается на внешнем виде страницы. Это служебная информация и она не видима на странице. Рекомендуется ВСЕГДА писать этот тэг! (Если, конечно, это не будет дорвей для поисковика, который не учитывает мета тэги.)

Тэг meta description может существенно повысить расположение вашей страницы в списке результатах. Но это только в тех поисковых системах, в которых учитываются мета тэги. Другая причина, по которой нужно использовать этот тэг: Некоторые поисковики составляют резюме о содержании страницы именно по этому тэгу. И следовательно читая это описание, пользователь решает, идти ему на эту страницу или нет.

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

В заключении:

  • Используйте meta description на всех страницах.
  • Ограничьтесь 150 символами.
  • Используйте ключевые слова.
  • Ключевые слова не должны повторяться более 7 раз.
 

Метки: Кодинг, Продвижение

Кроссбраузерный обтекающий список
Автор: Ognezmej. Опубликовано: 06 Июля 2009

Всем хороши списки.

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

Собственно, вот такие стили работают. В эксплорере (6 и 7), мозилле и опере. В заголовке документа - XHTML 1.0 Strict. Валидолом не проверялось, стояла цель - адекватное отображение.

ul {zoom: 1; overflow: hidden; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;}

li {list-style: none; background: url(img/sector/ico.gif) no-repeat left 5px; padding: 0px 0px 0px 16px; margin: 0px 0px 0px 10px;}

Разумеется, адрес картинки и цифры, которые не 0, взяты из конкретного примера, вы можете туда любые свои добавлять. Здесь важны горизонтальные значения. Соответственно, вертикальные значения маржинов и паддингов можете писать, какие в голову взбредут.

Итак, если интересно поподробнее:
zoom: 1; overflow: hidden; - предназначены для того, чтобы буллеты не уплывали под картинку в фаерфоксе
margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; горизонтальные маржины и паддинги для ul лучше оставлять нулевые. Впрочем, можете поэкспериментировать - мне не понравилось
background: url(img/sector/ico.gif) no-repeat left 5px; - здесь всё понятно - эта хрень заменяет буллет. Вместо 5px вам нужно будет поставить вертикальную позицию этого как-бы-буллета. В среднем - половина высоты шрифта.
padding: 0px 0px 0px 16px; - здесь 16px - это отступ текста элемента списка ОТ ЛЕВОГО КРАЯ картинки-буллета. Соответственно, равен отступу текста от буллета плюс ширина буллета.
margin: 0px 0px 0px 10px; - здесь 10px - это отступ всего элемента списка от левого края.

Да, данные стили работают и с обычными списками в отсутствие обтекания.

 

Метки: XHTML, Кодинг

Буквицца
Автор: Ognezmej. Опубликовано: 11 Июня 2009

В общем, есть в CSS такой псевдокласс, как first-letter.
В стилях записывается так:

P:first-letter {}

Вместо тэга P можно использовать другие - не знаю, не пробовал. Заявляется стиль после определения самого элемента (в нашем случае P). Итак, задаём нашей буквице размер, шрифт, цвет, и наслаждаемся.

Захотел сделать обтекание, о чём пожалел. По разным браузерам расползлось как тараканы. Ставим line-height, причём в правильном формате (проценты или множитель), прописываем все маржины и паддинги, в результате получаем, что в эксплорере и опере буквица имеет некий необъяснимый отступ сверху, которого нет в фаерфоксе. В случае, если высота буквицы немного меньше, чем высота строки основного текста, помноженная на целое число, это не так страшно. В противном случае за счёт этого самого отступа вниз буквица может ещё строчку сожрать. И как с этим бороться, пока не поняли... Думаем-с

 

Метки: XHTML, Кодинг

Выкрутасы Эксплорера VI.
Автор: Ognezmej. Опубликовано: 03 Мая 2009

Итак, задача: идёт последовательно несколько блоков, внутри каждого - картинка, обтекаемая текстом. Требуется - нормальное отображение.

Баг: в случае, если размер текста меньше высоты картинки, каждый последующий блок оказывается не внизу, а также справа от картинки. Во всех нормальных браузерах это лечится параметром clear:both;
Но не в шестёрке!
Под Шестым Эксплорером оказывается, что содержимое верхнего блока, за исключением обтекаемой картинки, просто не видно. Забавно, что прокрутка страницы за пределы этого блока и последующее возвращение делают текст вновь видимым.

Замечено: баг появляется для текста, которому не прописан float. Если прописать ему right, тогда возникает вопрос - кто кого обтекать будет. И, наконец, может быть заголовок, который на весь блок - куда его деть?

Замечено ещё: баг пропадает, если жёстко задать высоту блока. Но тогда во всех не-эксплорерах блоки начинают наползать друг на друга.

Итак, решение:
В параметрах блоков используем общеизвестный код для кроссбраузерной минимальной высоты:
clear: both; min-height: (высота картинки)px; height: auto ! important; height: (высота картинки)px;

Высоту картинки можно жёстко задать, если она одинакова для всех блоков, или вытащить средствами PHP.

Проверялось на IE6.0, IE7.0, Firefox 3.08, Opera 9.51

 

Метки: XHTML, Кодинг

Ошибки с картами изображений в XHTML 1.1
Автор: cyberacing. Опубликовано: 02 Февраля 2009

Недавно решил перейти со стандарта XHTML 1.0 Strict на XHTML 1.1. Это было не так сложно, так как различий между ними не так много. Но проверяя валидацию старых проектов, обнаружил, что слишком много ошибок возникает там, где в коде были использованы карты изображений (map и area). Я попытался устранить проблему в валидации согласно стандарту. После устранения ошибок карта изображений проходит валидацию, но... абсолютно не работает, ни в IE, ни в FF. Я решил выяснить, в чем может быть проблема.

Код, работающий корректно в XHTML 1.0 Strict, продолжает работать и в XHTML 1.1, но валидацию не проходит. Проверка возвращает следующие ошибки:

(1) There is no attribute "name".
(2) Character "#" is not allowed in the value of attribute "usemap".
(3) Non-existent ID "#mapName2".

Старый код под XHTML 1.0 Strict, который работает:

<map name="MapName2" id="MapName2">
<area shape="rect" coords="14,123,197,223" 
href="/contacts/" alt=""></area></map>
<img src="/img/imagemap.jpg" usemap="#mapName2" alt="image" />

Подсвечены области с ошибками. Посмотрим, что нам предлагают стандарты. XHTML 1.0 (Strict) DTD представляет нам следующее: 

<!ELEMENT img EMPTY>
<!ATTLIST img
  %attrs;
  src         %URI;          #REQUIRED
  alt         %Text;         #REQUIRED
  longdesc    %URI;          #IMPLIED
  height      %Length;       #IMPLIED
  width       %Length;       #IMPLIED
  usemap      %URI;          #IMPLIED
  ismap       (ismap)        #IMPLIED
>

<!ELEMENT map ((%block; | form | %misc;)+ | area+)>
<!ATTLIST map
  %i18n;
  %events;
  id          ID             #REQUIRED
  class       CDATA          #IMPLIED
  style       %StyleSheet    #IMPLIED
  title       %Text;         #IMPLIED
  name        NMTOKEN        #IMPLIED
>

Для элемента "img", как вы заметили, "usemap" определяется как %URI. Это означает, что знак # может быть использован, как указатель на фрагмент страницы. А для элемента "map" атрибут "id" должен быть обязательно, а для "name" указано, что он может быть использован по желанию. Что мы и делаем. 

Теперь обратимся к стандарту XHTML 1.1: 

<!ATTLIST %input.qname;
      usemap      IDREF                    #IMPLIED
><!ENTITY % map.attlist "INCLUDE" >
<![%map.attlist;[
<!ATTLIST %map.qname;
      %XHTML.xmlns.attrib;
      id         ID                        #REQUIRED
      %class.attrib;
      %title.attrib;
      %Core.extra.attrib;
      %I18n.attrib;
      %Events.attrib;
>

Заметьте, атрибут "usemap" элемента "map" в XHTML 1.1 DTD теперь определяется как IDREF, а не URI. Это означает, что значение "должно быть таким же, как и для ID других элементов". Вот почему # дает ошибку и почему она не может быть ссылкой на ID (т.к. ID не содержат #). Кроме того, элемент "map" больше не поддерживает атрибут "name". 

Теперь мы знаем правила и попробуем изменить наш код: 

<map id = "MapName2">
<area shape="rect" coords="14,123,197,223" 
href="/contacts/" alt=""></area></map>
<img src="/img/imagemap.jpg" usemap="mapName2" alt="image" />

После этого мне полегчало. Код соответствует стандартам и проходит валидацию. НО... эта конструкция отказывается работать в современных браузерах. Все дело в том, что браузеры не на 100% поддерживают рекомендации W3C по XHTML 1.1. Поэтому, если вы хотите, чтобы карты изображений функционировали, вы должны использовать нестандартный XHTML 1.1 и не обращать внимания на ошибки валидации. Вот такие дела.

 

Метки: XHTML, Кодинг

Популярные записи

Принцип неопределённости в РНР

Принцип неопределённости в MYSQL

Недолёт

А ещё AJAX нужен для...

Принцип неопределённости в PHP - праздник продолжается!

Эмуляция плавности в ActionScript.

Программная анимация в ActionScript

Анимация при наведении в ActionScript

Использование кодировки UTF-8

Буквицца

Архив записей  

2019

Янв  

2018

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек

2017

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек

2016

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек

2015

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек

2014

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек

2013

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек

2012

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек

2011

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек

2010

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек

2009

Янв  Фев  Мар  Апр  Май  Июн

Июл  Авг  Сен  Окт  Ноя  Дек