.NET → Команда ASP.NET выпускает Sprite and Image Optimization Framework
Команда разработчиков ASP.NET готова представить новый набор инструментов с открытым исходным кодом под названием Sprite and Image Optimization Framework.
Sprite and Image Optimization Framework – это фреймворк, который содержит набор инструментов клиентской оптимизации для веб-сайтов, позволяющий сократить время доступа к страницам для пользователей. Для этого фреймворк предлагает использовать механизмы оптимизации загрузки изображений: посредством спрайтов и кодирования на основе data:uri.
Разработчикам ASP.NET предлагается использовать элемент управления для WebForms-проектов и специальный вспомогательный класс для ASP.NET MVC-проектов. Вместе с ними поставляется HTTP Module, который выполняет всю работу по оптимизации изображений и передачи их клиенту.
Загрузить Sprite and Image Optimization Framework можно по этой ссылке с сайта codeplex.com. Там можно найти исходные коды фреймворка, демонстрационные проекты, документацию.
Клиентская оптимизация → Клиентская оптимизация как сервис
Веб-разработка → К вопросу о кроссбраузерных Data URI
В погоне за оптимизацией сайтов захотел уменьшить количество запросов, не в ущерб размерам оптимизированных файлов.
Цель — передавать в одном файле изображения разных форматов, с разными настройками оптимизации.
Как средство, выбрал data uri и gzip'нутый css файл. Однако IE с data uri работают из рук вон плохо. Но в них есть mhtml. Существовавшая реализация не отвечала моим требованиям, т.к. приходилось 1 файл передавать два раза — раз для IE, в mhtml, и второй для всех остальных, в data uri. В поисках решения наткнулся на статью bolk'а, где описывалось решение для формата jpeg и некоторые теоретические выкладки для gif и png. После почти трехнедельного раскуривания манов мне удалось реализовать решение для gif и png и автоматизировать процесс для всех трех форматов.
Цель — передавать в одном файле изображения разных форматов, с разными настройками оптимизации.
Как средство, выбрал data uri и gzip'нутый css файл. Однако IE с data uri работают из рук вон плохо. Но в них есть mhtml. Существовавшая реализация не отвечала моим требованиям, т.к. приходилось 1 файл передавать два раза — раз для IE, в mhtml, и второй для всех остальных, в data uri. В поисках решения наткнулся на статью bolk'а, где описывалось решение для формата jpeg и некоторые теоретические выкладки для gif и png. После почти трехнедельного раскуривания манов мне удалось реализовать решение для gif и png и автоматизировать процесс для всех трех форматов.
Клиентская оптимизация → «За бугром» все больше интересуются техникой Data:URI CSS Sprites
Многим уже известна техника оптимизации сайтов на основе data:uri технологии. Последнее время все больше и больше к относительно новой технологии проявляется интерес мирового сообщества разработчиков. В интернете можно найти уже достаточно много статей на эту тему. Радует, что одним из первых, кто задумался серьезно о разработке кросс-браузерного data:uri это «наш человек» — Евгений Степанищев aka bolk. Ну так вот, речь не об этом, это так для истории…
Наткнулся мне «забугорный» блог www.ravelrumba.com, автор которого последнее время активно занимается исследованием эффективности data:uri css sprites. О чем свидетельствует ряд интересных статей о его работе.
CSS Images and Data URIs
Data URIs for CSS Images: More Tests, More Questions
Я решил поддержать его и провел анализ скорости загрузки разработанных им тестовых страниц.
Клиентская оптимизация → «Свежачок» по оптимизации — поведение браузеров при использовании Data:URI CSS Sprites
Последнее время в инете стало появляться все больше публикаций про использование data:uri css sprites. Приведу две ссылки из блога Steve Souders, известный всему миру «оптимизатор» работающий в Google.
CSSEmbed — automatically data: URI-ize
Aptimize: realtime spriting and more
Наш отечественный герой «веб-оптимайзер» sunnybear намного раньше поднимал вопрос про использование data:uri в css и нами совместно был проведен ряд исследований. В то время вылезло много интересных моментов и особенностей о которых мы писали в предыдущих статьях. Последние эксперименты вскрыли ряд ранее неизвестных моментов по работе браузеров с data uri css спрайтами.
XSLT → Преобразование FB2 в XHTML с сохранением вложенных рисунков
Возникла у меня небольшая необходимость преобразовать книги в формате FB в xhtml.
Ну ясное дело я полез на www.gribuser.ru/xml/fictionbook/2.0/xsl/export/ где и взял файл
FB2_2_xhtml.xsl (заодно захватил FB2_2_txt.xsl мало ли в текстовом виде понадобится книжку получить )
Попробовал сконвертировать книжку, и заметил маленькую проблемку, рисунки то пропали. :(
В принципе рисунки не главное в книжке, но все равно немного обидно. Поэтому полезем разбираться в чем проблема.
Ну ясное дело я полез на www.gribuser.ru/xml/fictionbook/2.0/xsl/export/ где и взял файл
FB2_2_xhtml.xsl (заодно захватил FB2_2_txt.xsl мало ли в текстовом виде понадобится книжку получить )
Попробовал сконвертировать книжку, и заметил маленькую проблемку, рисунки то пропали. :(
В принципе рисунки не главное в книжке, но все равно немного обидно. Поэтому полезем разбираться в чем проблема.
Internet Explorer → IE8 и поддержка стандартов — transparent PNG + opacity, а также data:URI + AlphaImageLoader
Наковырял пару проблем работы браузера IE8. Может кому пригодится.
результат — прозрачные пиксели становятся черными
нужно применить мульти-фильтр
Следующая проблема нашлась благодаря предыдущей
Прозрачный PNG + filter:alpha(opacity)
.class{
background:url(transparent.png);
filter:alpha(opacity=50);
}
результат — прозрачные пиксели становятся черными
Лекарство
нужно применить мульти-фильтр
.class{
background:none;
filter:alpha(opacity=50) progid:DXImageTransform.Microsoft.AlphaImageLoader(src=transparent.png, sizingMethod='crop');
}
Следующая проблема нашлась благодаря предыдущей
Клиентская оптимизация → Data URI [CSS] Sprites 1.1 — Автоматизация процесса сборки css спрайтов
Многим профессиональным веб-разработчикам известны приемы оптимизации сайтов. Одним из способов оптимизации является использование CSS спрайтов. Этим же разработчикам известно, какие существуют трудности с формированием, сборкой и пересборкой стандартных спрайтов. В инете можно найти инструменты для автоматизации этого процесса.
Веб-разработка → Кроссбраузерная одноцветная полупрозрачность
В этой статье я рассмотрю метод создания блоков с одноцветным полупрозрачным фоном.
Например, таких:
Сразу оговорюсь, что я не буду использовать opacity и абсолютное позиционирование, чтобы разместить контент поверх полупрозрачного блока.
Например, таких:
Сразу оговорюсь, что я не буду использовать opacity и абсолютное позиционирование, чтобы разместить контент поверх полупрозрачного блока.
Клиентская оптимизация → Сжатие при помощи canvas и PNG-картинок
Примечание: ниже находится перевод статьи "Compression using Canvas and PNG-embedded data". Автор предлагает на суд читателей еще один способ загрузить в клиентском браузере JavaScript-библиотеку, передав при этом минимум данных. Для этого используется PNG-картинка и объект canvas. Мои комментарии далее курсивом.
Недавно у меня появилась идея, что можно хранить исходный Javascript-код в PNG-картинке, а затем получать его через метод getImageData() элемента canvas. К несчастью, сейчас это означает, что только такой подход будет работать только в Firefox, Opera Beta и последних ночных сборках WebKit. Пока еще никто не указал мне, насколько gzip опережает данный метод по степени сжатия, я хочу сразу сказать что рассматриваемый метод никак не может быть практической альтернативой физическому сжатию. Чуть раньше сегодня я уже писал о сжатой версии в 8Кб скрипта Super Mario, для которого использовалась эта техника (подробнее можно прочитать в заметке про кодирование). Здесь я приведу лишь некоторые детали о действительном положении вещей.