Многие наверняка сталкивались с проблемой, когда какой-нибудь текст нужно выводить в одну строку. При этом текст может быть весьма длинным, а ширина блока, в котором этот текст находится, обычно ограничена, хотя бы тем же размером окна браузера. На эти случаи придумано свойство text-overflow, которое внесено в рекомендацию CSS3, а впервые было реализовано в IE6, очень давно. В случае использования этого свойства для блока, если его текст больше по ширине чем сам блок, то текст обрезается и в конце ставится многоточие. Хотя тут не все так просто, но вернемся к этому чуть позже.
С Internet Explorer'ом все понятно, что же относительно других браузеров? И хотя в настоящий момент из спецификации CSS3 свойство text-overflow исключено, Safari его поддерживает (по крайней мере, в 3-й версии), Opera тоже (с 9-й версии, правда называется свойство -o-overflow-text). А Firefox — нет, не поддерживает, и даже в 3-й версии не будет. Печально, но факт. Но может можно что-то сделать?

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

Я делаю шаблоны на чистом HTML/CSS уже больше восьми лет. За это время я убедился, что различные соглашения и документирование помогают в работе. Конечно, они не спасают от периодических CSS-кошмаров. Они лишь делают их менее болезненными. Мое решение — следовать определенным принципам в написании стилей. Эти принципы образуют основание, на котором будет строиться все дальнейшее написание стилей, облегчая работу над растущим проектом.

В погоне за оптимизацией сайтов захотел уменьшить количество запросов, не в ущерб размерам оптимизированных файлов.
Цель — передавать в одном файле изображения разных форматов, с разными настройками оптимизации.
Как средство, выбрал data uri и gzip'нутый css файл. Однако IE с data uri работают из рук вон плохо. Но в них есть mhtml. Существовавшая реализация не отвечала моим требованиям, т.к. приходилось 1 файл передавать два раза — раз для IE, в mhtml, и второй для всех остальных, в data uri. В поисках решения наткнулся на статью bolk'а, где описывалось решение для формата jpeg и некоторые теоретические выкладки для gif и png. После почти трехнедельного раскуривания манов мне удалось реализовать решение для gif и png и автоматизировать процесс для всех трех форматов.

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

В наше время манифест стал неотъемлемым атрибутом нового подхода в разработке программного обеспечения. Вдохновляющий пример – манифест Agile.
Поэтому свои мысли по поводу правильной разработки на Битриксе я решил сформулировать именно таким образом.

Расскажу о своих правилах, которые я использую в любом файле CSS.

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

Уже неоднократно видел утверждение, что CSS необходимо комментировать, чтобы потом было проще сориентироваться себе или тому, кто также поддерживает или будет в дальнейшем поддерживать ваш код. Но почему-то никто не предлагает использовать какой-то универсальный формат комментариев, который был бы понятен всем, хотя в программировании такое используется повсеместно: JavaDoc, JSDoc, PHPDoc и т.п.

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

Данная тема основана на теме Жизнь без IE6 пользователя mobilz

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

Основные моменты:
Добавлены ссылки на счетчик LiveInternet для предоставления пользователям объективных сведений о доле браузера Internet Explorer 6 в сети интернет. Обновлены версии используемых на странице браузеров, а также ссылки на основные моменты, которые могут быть непонятны пользователям (например выражение «Гик»).

Каждому HTML кодеру приходится нарезать картинки .psd из макетов будущего сайта, и эта задача настолько обыденна, что опытный верстальщик делает её на автомате. Не перегружая головной мозг, просто вырезает картинку, выбирает подходящий формат и настройки оптимизации, называет как бог на душу положит и кладёт в папку с картинками.

Относительно недавно познакомился с CSS-сеткой Golden Grid. Мне она понравилась небольшим весом и использованием правила «золотого сечения». Golden Grid более простая, чем Blueprint. Я не настаиваю на том, что она более удобная, но для моих задач подходит как нельзя лучше.

Вместо обозначений классов span-1, span-2… используются более интуитивные g160, g320 и т.д. Кроме того, неплохая типографика, подстроенная специально под сетку.

Сетка относительно новая (2009), поэтому не хватает многих важных деталей. Например, psd-шаблона. Решив заполнить столь значимый пробел, я создал такой шаблон, благо много времени это не занимает. Проведены и линейки, и серые прозрачные прямоугольники. Это сделано для того, чтобы сетку можно было ставить поверх основного дизайна.

Скачать (.zip, 20 кб)

Существует много способов по верстке колоночных макетов. Уже не один нос разбит в течении холиваров, разожженных по поводу использования тех или иных методов. Казалось бы, что все должно быть предельно ясно и понятно, но все-равно возникает много трудностей. Я хочу и свою лепту вложить во всеобщее благое дело, и потому потратил относительно немного времени на эксперименты, которые привели меня к созданию еще одного метода, в котором есть следующие плюсы и минусы:

Плюсы

• Есть прижимающийся к полу футер
• Колонки меню растягиваются по 100% высоте
• Колонок может быть сколько душе угодно
• Колонки могут быть как лево- так и правосторонними, а также совмещенными, например 2 справа и 1 слева
• Ширина как резиновая, так и фиксированная
• Критический минимум хаков
• Не используется Javascript
• Не используются бекграундовые изображения для создания эффекта колонки
• Никаких таблиц
• Одинаковый результат в ie5.5, ie6, ie7, ie8, ff3.5, o10, chrome4 (Если у вас не работает в каком-то браузере — отпишитесь, пожалуйста, в комментах. Исправим и приведем к универсальному виду)

Минусы

• Есть несколько «лишних» блоков. (Я бы и сам рад от них избавиться)
• Есть несколько абсолютно-позиционируемых блоков

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

перевод статьи: 12 Killer Tips for Designing in the Browser

Как Вы создаете макет сайта?

Обычный проект начинается с создания макета в Фотошопе и потом с использованием HTML и CSS максимально приближается к виду исходного PSD файла. Не смотря на это, развивается направление в веб-дизайне пропускающее этап Фотошопа в пользу создания первоначальной композиции прямо в браузере с использованием вашего любимого редактора. Я уверен, что прямо сейчас Ваша голова шумит от причин, по которым этот подход ограничит ваш дизайн, но есть огромное количество вещей, которые Вы можете делать в браузере. Эта статья познакомит с инструментами и приемами, которые понадобятся для создания великолепных работающих макетов на первом же этапе работы.

Основная идея

Meagan Fisher на 24ways.org представил неотразимый довод проектирования в браузере. Хотя я и не разделяю его презрение к Фотошопу (Я люблю Фотошоп больше любого другого ПО на планете), я согласен с некоторыми другими его пунктами. Фишер говорит, что статическое изображение не дает по настоящему ощутить, как сайт будет работать и что проектирование в браузере направляет твои силы на организацию контента до дизайна, что гарантирует большее удобство и создание правильной структуры

Мы будем использовать статью Фишера как затравку для наших заметок по превращению в профессионала в создании фантастических in-browser макетов готовых к работе сразу по получению одобрения от клиента.

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

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

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

Это пост является ответом на «За бугром», ибо нашлась пара свободных часов, и было, чем их занять.

UPD Был обнаружен плагин — Wappalyzer — который на порядок замедлял отображение data:URI в Firefox. Но даже с его отключением Firefox продолжает проигрывать почти всем браузерам.

Но все по порядку.

Пару недель назад разработчики Google Chromium опубликовали новость о поддержке технологии WebSocket. В айтишном буржунете новость произвела эффект разорвавшейся бомбы. В тот же день различные очень известные айтишники опробовали новинку и оставили восторженные отзывы в своих блогах. Моментально разработчики самых разных серверов/библиотек/фреймворков (в их числе Apache, EventMachine, Twisted, MochiWeb и т.д.) объявили о том, что поддержка ВебСокетов будет реализована в их продуктах в ближайшее время.
Что же такого интересного сулит нам технология? На мой взгляд, WebSocket — это самое кардинальное расширение протокола HTTP с его появления. Это не финтифлюшки, это сдвиг  парадигмы HTTP. Изначально синхронный протокол, построенный по модели «запрос — ответ», становится полностью асинхронным и симметричным. Теперь уже нет клиента и сервера с фиксированными ролями, а есть два равноправных участника обмена данными. Каждый работает сам по себе, и когда надо отправляет данные другому. Отправил — и пошел дальше, ничего ждать не надо. Вторая сторона ответит, когда захочет — может не сразу, а может и вообще не ответит. Протокол дает полную свободу в обмене данными, вам решать как это использовать.

Я считаю, что веб сокеты придутся ко двору, если вы разрабатываете:
— веб-приложения с интенсивным обменом данными, требовательные к скорости обмена и каналу;
— приложения, следующие стандартам;
— «долгоиграющие» веб-приложения;
— комплексные приложения со множеством различных асинхронных блоков на странице;
— кросс-доменные приложения.

Сложность структуры современного информационного общества постоянно растёт. В связи с этим, требования к эффективности алгоритмов обработки информации также увеличиваются. В последнее время наиболее популярными направлениями в этой области являются Data Mining (DM), Knowledge Discovery in Databases (KDD) и Machine Learning (ML). Все они предоставляют теоретическую и методологическую базу для изучения, анализа и понимания огромных объёмов данных.
Однако этих методов не достаточно, если сама структура данных будет настолько плохо пригодной для машинного анализа, как исторически сложилось на сегодняшний момент в Internet.
Для решения данной проблемы предпринята глобальная инициатива реорганизации структуры данных Internet в целях преобразования его в Семантическую Паутину предоставляющую возможности по эффективному поиску и анализу данных как человеком так и программным агентам.
В этой статье рассмотрены основные технологии позволяющие реализовать Semantic WEB.

Вольно-сокращенный перевод статьи 15 Time Saving CSS Tools You Should Be Aware Of
Под катом текст, графика, ссылки

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




Жанр этот, игры для программистов, из-за довольно высокого порога вхождения никогда не был популярен. А жаль. Потому что, как учил дядько Суворов, тяжело в учении — легко в бою. Я не милитарист и не оракул, но здравый смысл подсказывает, что довольно скоро некоторым из нас придётся писать ПО для «гаджетов» типа этого (кликабельно):

Фото на документы — написанная мною программа, которая предназначена для подготовки фотографии человека на российские документы. Программа больше года используется в десятках точках типа «фото на документы за 5 минут». Кроме этого, программу можно использовать дома, получая значительную экономию.

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