Задачей этой статьи является систематизация знаний о том, как правильно растягивать сайт для различных разрешений экрана.

Примечание: ниже перевод очередной заметки «Image Optimization, Part 5: AlphaImageLoader» из блога YUI. Stoyan Stefanov на этот раз рассказывает о тонкостях применения фильтра AlphaImageLoader для IE. Мои комментарии далее курсивом.

Это пятая часть серии статей про оптимизацию изображений. С предыдущими частями можно ознакомиться по адресу:

• Image Optimization Part 1: The Importance of Images
• Image Optimization Part 2: Selecting the Right File Format
• 4 шага для уменьшения размера файлов
• Последовательные JPEG — Быть или не быть?

Данная статья из серии, посвященной оптимизации изображений, рассказывает о технике, доступной только в IE, — CSS-фильтре AlphaImageLoader, — который используется разработчиками для решения проблем с прозрачностью для полноцветных PNG-изображений в IE. Основная проблема с AlphaImageLoader заключается в том, что он влияет на производительность страницы, и тем самым ухудшает пользовательское восприятие. Я утверждаю, что стоит избегать использования AlphaImageLoader во всех возможных случаях.

Маленький экскурс

Как было сказано в одной из предыдущих статей, PNG могут быть нескольких видов, которые могут быть разделены на 2 основных:

• Индексированные (палитра), их также называют PNG8, можно использовать до 256 цветов.
• Полноцветные PNG, которые также называют PNG32 или PNG24.

Читать дальше на webo.in →

Привет, хабрачеловек. Сегодня я расскажу тебе про некоторые фундаментальные вещи в computer science: частичные вычисления, три проекции Футамуры и суперкомпиляцию.
 
 

1. Сразу к коду

-- функция, которая возводит x в степень y (неотрицательную)
power x y =
    case y of
        0 → 1
        1 → x
        _ → x * (power x (y - 1))


HTML 5 — это грядущее обновление гипертекстового языка разметки, основного способа создания контента для размещения его во всемирной паутине. Разработка HTML остановилась в 1999 году, на версии HTML 4.01 и с тех пор web-содержимое изменилось так, что текущие спецификации HTML перестали соответствовать сегодняшним требованиям.

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

Это статья нашего гостя Jacob Gube, web-разработчика и дизайнера, автора Six Revisions — блога о web-разработке и дизайне.

Много было про то написано, да не суть…

Озадачился следующей задумкой: перетаскиваемый слой с фиксированным положением на экране, страница скролица — слой остаётся на месте. Как известно данная задумка на ура воплощается в FF, Opera, Google Chrome, но вот IE интеллигентно послал мою задумку в свою мусорную корзинку — при скролинге передвинутый слой сползал вместе со страницей.

7 марта прошлого года W3C, после 10-летнего перерыва, возобновила работу над HTML.

Тогда я написал несколько внутрикорпоративных заметок о том, что я думаю по этому поводу и о перспективах развития web-приложений.

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

Я решил выложить их в виде статьи, переработав и снабдив иллюстрациями и примечаниями.

Содержание:

1. Вступление
2. Сценарии гибели
   • Гибель ментальная, или HTML — новый ассемблер
   • Гибель физическая, или HTML — новый Turbo Pascal
3. Все ли так серьезно?
   • Ментальной гибели не будет, если web-технологии будут правильно поняты
   • Физической гибели не будет, если web-технологии будут развиваться
4. Заключение
5. Примечания

В настоящий момент мир вступает в эпоху расцвета богатых web-приложений.

Программы, работающие через Веб, все больше вытесняют традиционные десктопные приложения. Gmail, Google Map, online-офис, даже web-операционные системы… Список можете продолжить сами.

Однако, по мере продвижения web-приложений, все больше возрастают требования к основным клиентским web-технологиям: xHTML, CSS, JavaScript.

И, если эти технологии не будут поспевать за все более возрастающими требованиями, это приведет к их медленному закату…
 

При создании html-макета страницы иногда приходится иметь дело с множеством однотипных картинок. Например, выпало верстать фотоальбом. Нужно нарезать порядка двадцати «превьюшек», потом их всех поименовать и сохранить. Рутина.

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

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

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

1. Что такое PNG?
2. PNG vs GIF.
3. PNG vs JPEG.
4. Жизнь после Photoshop'а или сжимаем дальше.
5. Adobe Fireworks или PNG-8 с альфа-каналом.
6. Вердикт.

Осторожно, много картинок! Все кликабельны.

Данная статья — первая из цикла на тему укрощения CSS. Сегодня мы рассмотрим технологию CSS Reset.

Зачем это нужно?

Каждый браузер устанавливает свои значения стилей по умолчанию для различных HTML-элементов. С помощью CSS Reset мы можем нивелировать эту разницу для обеспечения кроссбраузерности стилей.

Например, вы используете элемент a в вашем документе. Большинство браузеров, как Internet Explorer и Firefox, добавляют ссылке синий цвет и подчёркивание. Однако представьте, что через пять лет кто-то решил создать новый браузер (назовём его UltraBrowser). Разработчикам браузера не нравился синий цвет и раздражало подчёркивание, поэтому они решили выделять ссылки красным цветом и полужирным шрифтом. Именно исходя из этого, если вы установите базовое значение стилей для элемента a, то он гарантированно будет таким, каким вы хотите его видеть, а не как предпочитают его отображать разработчики UltraBrowser.

UPD: Заголовок изменен, что бы более соответствовать теме статьи

В статье пойдет речь об использовании convolution matrix (матрицы скручивания или матрицы свертки), с помощью которой можно создавать и накладывать на изображения фильтры, такие как blur, sharpen и многие другие.

Cтатья будет интересна не только веб-программистам, но и всем кто так или иначе занимается программной обработкой изображений, поскольку функции для работы с матрицей скручивания имеются во многих языках (точно известно о php и flash). Так же, статья будет интересна дизайнерам, использующим Adobe Photoshop, поскольку в нем имеется соответствующий фильтр (Filter-Other-Custom).

Примеры будут на языке PHP с использованием библиотеки GD. Теория, практика, примеры (осторожно, много картинок!)

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

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



В любом случае, это какое-никакое развлечение и повод для радости. И что-то детство в одном месте у меня заиграло, стало интересно, какова вероятность получить «счастливый» билет? Сколько всего «счастливых» билетов?

Помню, что в школе даже кто-то делал исследовательскую работу (или что-то в этом роде, не суть), мы пытались выводить формулы, рисовать графики и прочее.

Но, поскольку мощность наших компьютеров зачастую позволяет идти неоптимальным путем (с точки зрения математики), то решил не заморачиваться выводом формул.

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

1. Никогда не используйте ключевые кадры без крайней необходимости, особенно если это слой с фоном, который на протяжении всего ролика не меняется. Ну зачем, спрашивается, последний кадр делать ключевым? Если в первом кадре делаются какие-то изменения, то почти всегда забывают об этом последнем ключевом кадре. При продлении фона на временной шкале нужно использовать статические кадры (hot key f5).

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

3. Никогда не применяйте к графическим объектам и тексту анимацию motion, предварительно не преобразовав их в символы. Это раздражает больше всего, т.к в результате образуется большое количество символов graphic (с именами Tween), с которыми жутко неудобно работать!
Если вы создали текст, который планируется анимировать. не поленитесь преобразовать его в символ, вам потом будет гораздо удобнее с ним работать.

4. Давайте вменяемые имена символам и слоям., Ну хотя бы только символам! Порой очень много времени уходит на поиск того или иного символа в библиотеке.

5. Сортируйте символы, музыку и битмапы по папкам., Это же просто напросто удобно! Особенно если количество элементов в библиотеке превышает пару сотен.

6. Удаляйте все неиспользуемые символы из библиотеки., Для этого существует даже специальная команда «select unused items». Исключение составляют только элементы, которые планируется использовать в дальнейшей работе.

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

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

Но если вы привыкли работать в хаосе — никто вас осуждать не будет, просто помните, что с вашими исходниками возможно будет работать живые люди, поберегите хотя бы их! :)

Введение

Я точно не могу сказать, что заставило написать этот пост — может быть мой накопившийся опыт и принадлежность к php-программистам, которые, всемирно известны своим быдлокодом или недавний пост, в котором автор описывает проблему, появившуюся в его велосипеде и связанную с глобальными переменными в различных модулях. 

Почитав комментарии к которому, мне стало уж совсем плохо… Я просто не понимал как люди не видят сути проблемы, а видят только лишь ее последствия — проблему в велосипеде. А суть то заключается в том, что у автора напрочь отсутствуют какие-либо познания в «велосипедостроении». И что самое страшное — эти знания отсутствуют не у одного него. А практически у всей массы изобретателей которые сами велосипеды видели только на картинках. 

А если взять в расчет то, что они не хотят даже посмотреть на другие велосипеды…
 

Много способов прижатия футера к нижней кромке окна уже изобретено и описано, стОит только погуглить. Но хочется поделиться тем, к чему пришёл самостоятельно (пришлось изобретать, т.к. не было инета под рукой :))…

Сначала пошёл ошибочным путём: основной DIV с контентом — 100% по высоте, а хидер и футер спозиционированы абсолютно. Выглядит нормально во всех браузерах, но в ИЕ6 вылезал косяк — при динамической смене контента (через javascript) футер оставался на своем месте, т.е. не перемещался вслед за кромкой окна. Поэтому сделал так: DIV с основным контентом, DIV-футер с отрицательным margin-top, DIV-хидер с абсолютным позиционированием. Нарисовался очевидный плюс данного способа: основной контент страницы в HTML-коде максимально приближен к началу документа.

Вчера прошла встреча с Хоконом Ли — отцом CSS, технических директором Opera Software и YesLogic Pty Ltd (princexml). Было сказано много информации, которую я как, вероятно, и многие из вас знаем, поэтому постараюсь выделить что-то действительно полезное

• Почему Dragonfly лучше Firebug
• @face-font в Опере (доступен эсперементально)
• Почему Оперы нет на iPhon'е
• Популиризация ogg с помощью p2p, пиратов и Opera
• Следующая встреча

Общая информация

Так как мобильных устройств существует великое множество, то одна модель может поддерживать какие-либо возможности HTML/CSS, а другая наоборот — либо не поддерживать, либо поддерживать неправильно.

Но большинство устройств среднего и уж тем более hi-end класса поддерживают HTML/CSS в той или иной степени. Таким образом, язык WML для разработки сайтов под мобильные устройства устарел и практически не используется. На смену ему постепенно приходит общепризнанный стандарт в разработке сайтов — XHTML/CSS. Кодировка — строго UTF-8 (No BOM).

Предлагаю вашему вниманию таблицу значений отступов от букв до верха и низа строки, для стандартного значения line-height.
Эта таблица нужна для точного определения padding или margin обрамляющего или близлежащих элементов.

Вот картинка-легенда, чтобы было понятно о чем речь:

Надеюсь многие из вас помнят журналы «юный техник», «сделай сам», «техника молодежи», «радио» и другие. К сожалению с развалом советского союза культура технического творчества молодежи практически умерла (впрочем вместе с многими кружками «юный техник». Даже у нашей радиошколы при РОСТО (бывшая ДОСААФ) отобрали помещение и сделали офис. Но к счастью есть интернет!