• Долой абсолютные единицы в иконках-спрайтах


      Спрайты — классный способ сократить количество запросов к серверу. Можно упаковать кучу иконок в один спрайт и прописать в CSS смещения для каждой иконки. Однако, очень неудобно, что нужно попиксельно всё это считать. Пиксели — значит никакой динамики. Если использовать пиксели, то кусочек спрайта будет отображаться фиксированным размером — независимо от того, выводится он внутри параграфа, или внутри заголовка. Это неправильно, мне кажется, и неудобно. Но, похоже, я нашёл интересный способ выводить иконки динамического размера.
      Читать дальше →
    • Google Plus, Facebook, Twitter — читаем в RSS агрегаторе

        Если вы боитесь социальных сетей, но хотели бы знать, о чем там пишут известные люди – используйте для этого технологию RSS. Как достать ссылки для подписки в RSS?

        Facebook
        Самый интересный вариант — FB RSS Facebook application

        Фейсбук в этом плане весьма открыт, кроме RSS фидов формата 2.0 разберется и с Atom. Все что вам нужно, это знать ID профиля или страницы.
        Пример, сообщетсво — English is Fun

        В адресной строчке заменяем www на graph — вместо http://www.facebook.com/EnglishIF?fref=pb пишем http://graph.facebook.com/EnglishIF?fref=pb
        В сгенерированном коде находим строку с «id»: " 384707561542391 ".
        (ID можно также найти с помощью findfacebookid.com)

        Используем шаблон www.facebook.com/feeds/page.php?format=rss20&id=, например www.facebook.com/feeds/page.php?
        format=rss20&id=384707561542391 и подписываемся

        Twitter
        Тут все еще проще.
        Скажем, собираемся читать @BreakingNews
        Используем шаблон api.twitter.com/1/statuses/user_timeline.rss?screen_name=, пример api.twitter.com/1/statuses/user_timeline.rss?screen_name=BreakingNews. Готово, можем подписываться.

        Если хотим читать фиды по определенному слову (скажем слово Android), добавляем к адресу search.twitter.com/search.atom?q=Android.
        Если хотим читать фиды по хештегу, добавляем к адресу хештег #Android — search.twitter.com/search.atom?q=%23Android. (Символ (#) меняем на %23).

        Google+
        Проще всего использовать gplus-to-rss.appspot.com.
        Нужно знать ID Страницы или профиля. На Google+ найдете его прямо в адресной строке, например страница +ru.android – в строке plus.google.com/u/0/communities/110130446304043859186 — 110130446304043859186 и есть ID
        Добавляем в URL gplus-to-rss.appspot.com/rss, в нашем случае gplus-to-rss.appspot.com/rss/110130446304043859186.

        Переведено с чешского источника

        Update

        ВКонтакте
        Для генерации RSS-фида вам нужно «скормить» ссылку на профиль или открытую группу сервису ВКонтакте RSS — vkontakte-feed.appspot.com
      • Закрываем зеркало сайта от индексации правильно

        • Tutorial
        Здравствуй, %habrauser%.
        Сегодня я покажу как не надо закрывать от индексации зеркало сайта, и как закрыть его правильно.

        Предыстория

        Я работаю web-мастером в одной крупной для нашего города компании.
        Мы сделали клиенту сайт, для рекламирования и продажи своей продукции.
        Клиент выбрал доменное имя в зоне .RU, и сайт около года успешно работал. Сайт по настоящее время обслуживается и редактируется по мере необходимости у нас.
        Через какое-то время клиент захотел второй домен для сайта, но в зоне .РФ.
        Он самостоятельно нашёл «профессиональных seo-специалистов продвигальщиков», сайт которых стоял на первом месте в выдаче Яндекса по определенным запросам.
        С ними он заключил договор, и ежемесячно отгружал немалую сумму денег в эту seo-конторку.
        Спустя пару недель сеошники наконец проснулись, связались с нами и получили ftp доступы к сайту, а так же пароль от админки сайта.

        Началась «оптимизация»

        Всё началось с того, что они не разобрались в движке сайта PHPShop.
        Отправили нам письмо, мы им сообщили где что редактируется, в каком файле находятся нужные им теги, а так же в довесок дали немного ссылок на официальную документацию.
        Читать дальше →
      • W3C Дайджест. Что нового в CSS3. Выпуск 3

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

          Предыдущая часть тут

          Анимация скрытых объектов




          Похоже, одной из серьезных проблем для модуля CSS3 Animations станут объекты, которые имеют display: none и visibility: hidden.
          Читать дальше →
        • Переход с Windows Mobile на Android. Список приложений

          Практический опыт перехода от WM-коммуникатора к Android.
          Очередной список Android-приложений со ссылками и кратким описанием.
          Все нижеописанное — субъективное мнение автора и не претендует на истину в последней инстанции


          Преамбула: после трех лет сосуществования с коммуникатором на базе Windows Mobile наступил момент, когда WM начало казаться мне жутким, неповоротливым и кривым чудовищем. Коммуникатор использовался очень плотно: звонки и SMS, разумеется, но это не главное; в основном – чтение книг, ежедневная навигация в московских пробках, web-серфинг, почта, хранение контактов, планирование рабочего (и не только) времени с помощью Календаря (от Задач ушел), Заметки (в том числе и графические от руки), переписка IM, звонки VoIP, ssh. Причем, Контакты, Календарь и Заметки постоянно синхронизировались с MS Outlook на настольном компьютере (ББ) и ноутбуке через USB и Bluetooth. Необходимые данные были постоянно доступны и на коммуникаторе и на рабочем месте и на домашнем ноутбуке, и отказываться от этого при переходе на другую платформу я не хотел. Мой выбор пал на Android. Открытая современная платформа и все такое. Близко душе программиста.
          Читать дальше →
        • Выравниваем блок по центру страницы

          • Tutorial
          Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах.
          Читать далее
        • Сканирование фотопленки при помощи DSLR

          Предисловие

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

          Зачем нужно?

          Сканирование пленки нижеописанным образом позволит получить максимум информации из снимка, возможность настройки экспозиции, баланса белого, контраста и т.д. При сканировании пленки в фотосалоне, машина автоматически выбирает контраст, баланс белого, экспозицию, зачастую делая это не верно.
          Читать дальше →
        • Как сверстать тему для WordPress

          • Tutorial

          Введение


          В предыдущих статьях мы рассмотрели принципы верстки на чистом CSS и с помощью Bootstrap. Сегодняшней статьей мы начинаем рассматривать особенности верстки под популярные CMS. И начнем с WordPress, как самой популярной из них. Будем считать, что WordPress у вас уже установлен и перейдем непосредственно к созданию шаблона, в качестве которого у нас по-прежнему будет выступать Corporate Blue от студии Pcklaboratory. Если вы не знаете как установить WordPress, то инструкцию можно найти здесь. В данном руководстве мы не будем подробно описывать CSS стили и HTML код – это было сделано уже в предыдущих статьях. Вместо этого рассмотрим детально особенности создания темы именно под WordPress.
          Читать дальше →
        • Насилие над DHTML и вывод JavaScript на десктоп. Реставрация старых игр. Сборка web-приложений

          • Tutorial

          Реставрация старых игр


          Привет Хабра! Это статья первая из цикла статей о игровом движке StalinGrad. Начну повесть о нем из далека, рассмотрев предпосылки для его создания. В статье речь пойдет о том, как делать игры, конвертировать JS -> APK, и прочих трудностях и проблемах.

          Пример до реставрации и после (а еще для Android`a):

          Читать дальше →
        • Чем тестировать адаптивный дизайн?

          • Translation
          image

          Хватит менять размер окна браузера, хватит его насиловать! Готов спорить, вы не раз слышали это. Хорошо, возможно и не слышали. Но если вы профессионально занимаетесь разработкой адаптивных сайтов, вы понимаете о чем я: любое изменение DOM или правка CSS, и вы снова начинаете тянуть край браузера вперед, назад, тестируя изменения и просматривая ничего ли не сломалось.

          Целью ваших движений является имитация экранов различных устройств.

          В корпоративной среде зачастую, у вас есть множество гаджетов предоставленных компанией для теста. На моей работе в моем распоряжении есть iPad, iPod, другие планшеты, ноутбуки, а также настольные мониторы. Если у вас нет такой роскоши, приходится использовать то, что под рукой.

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

          Для тестирования я выбрал реально адаптивный сайт PajamasOnYourFeet.com, сайт построено на основе HTML5 шаблона, бесплатно предоставленным EGrappler.
          Читать дальше →
        • Проблемы CSS. Часть 1

          • Translation
          От переводчика
          Статья большая решил разбить на две части.

          Впервые css был представлен примерно в 1995 году, и был предназначен для стилизации простых текстовых документов. Не веб сайтов. Не приложений. А именно текстовых документов. С тех пор, css, прошел долгий путь. Возможно слишком долгий.

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

          В лучшем случае — работу с css можно назвать веселым занятием. И это то, благодаря чему мы имеем работу. Потому что, как я считаю, генерация эффективных и кроссбраузерных css стилей невозможна и не будет возможна в ближайшее время.
          Читать дальше →
        • Работа с цветом: полезные инструменты, книги, статьи для веб-дизайнеров

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

            Инструменты




            Colour Lovers — старый и функциональный инструмент для подбора цветовых схем. Аналоги — Colourcode, Color Scheme Designer и конечно Kuler. Подобных сайтов великое множество, но эти, на мой взгляд, самые удобные.
            Читать дальше →
            • +65
            • 85.8k
            • 8
          • Адаптивное меню с поддержкой retina

            • Translation
            • Tutorial
            В этой статье очень подробно описано пошаговое создание адаптивного меню для сайта с несколькими вариантами компоновки элементов (в зависимости от размера экрана девайса). Для поддержки retina-экранов используется иконочный шрифт.



            Демо / Скачать исходники
            Читать дальше →
          • Повторяющийся зубчатый фон на CSS



              Давно на хабре не было постов про CSS и я решил восполнить этот пробел. Сегодня мы учимся готовить зубчатый фон используя только средства CSS и никаких изображений!

              Важные требования к такому забору:

              • Никаких изображений!
              • Он должен спокойно тянуться по горизонтали
              • Обязательно должен поддерживать неравномерный фон у подложки
              • Фон не должен требовать никакой экстра-разметки. Лучше всего будет избегать псевдо-элементов (экономия — хорошо).

              Поддерживаемые браузеры: Chrome, Firefox (> 3.6), Opera (>= 12), Safari (>= 5), IE10.

              Для IE 7, 8 у нас будет фоллбэк в виде обычной заливки. А вот с IE9 проблема — он не поддерживает градиенты, но при этом понимает hsla и rgba цвета. Воистину «великолепный» браузер. Что ж, его пока придётся игнорировать. Если кто–то подскажет хороший фоллбэк для IE буду только благодарен.
              Читать дальше →
            • Принцип цикады на чистом CSS

              • Tutorial
              Принцип цикады позволяет строить очень длинные неповторяющиеся фоны веб-страниц из нескольких простых изображений. Он был впервые описан Алексом Уокером в апреле 2011 года и быстро завоевал популярность. На сайте designfestival.com появилась целая галерея фонов, сделанных по этому принципу.

              Во многих случаях можно сэкономить ещё больше, используя градиенты. Даже с учётом того, что пока практически все браузеры поддерживают свойство linear-gradient только с префиксами, суммарный объем кода CSS, необходимый для создания фона, в несколько раз меньше размера нескольких PNG с фрагментами, и, что ещё важнее — вообще не требует лишних запросов к серверу. Так, Эрик Мейер недавно привёл пример реализации первых двух фонов из оригинальной статьи Уокера на чистом CSS. Для простых цветных полосок (вверху) понадобилось 2.66 Кб кода CSS (с префиксами, без минификации и компрессии). В будущем, когда все популярные браузеры избавятся от префиксов, будет достаточно 0.59 Кб кода. В оригинальном примере изображения весили около 6 Кб + 3 запроса к серверу. Второй пример с занавесом (внизу) впечатляет ещё больше. Даже с префиксами получается примерно десятикратный выигрыш.
              Читать дальше →
            • Cufón – используйте шрифты, какие душа пожелает

                Если стоит задача использовать в проекте нестандартный шрифт, то есть возможность пойти несколькими путями:
                1. Ъ-метод – не использовать нестандартные шрифты, достаточно в CSS сказать body {font-family: sans-serif;} и не морочить себе голову.
                2. Быдло-метод – нарезать из ЖПЕГов, картинок с заголовками, ужать посильнее, что б появилась размытость и вставлять вместо текста картинки. Достаточно популярный на наших просторах метод.
                3. W3C-метод – используем @font-family и наслаждаемся красивыми шрифтами без всяких заморочек. Пока этот метод не рассматривают, как рабочий, по причине слабой поддержи со стороны браузера.
                4. sIFR – клевая вещь, наиболее употребляемая на сегодняшний день, но как недостаток – требует наличия Flash-плагина. Хотя это трудно назвать недостатком, но если есть инструмент, позволяющий обойтись без плагинов, то это не может не радовать.
                5. Cufón – самое то. Относительно новый метод, который показывает превосходные результаты. Он и есть герой этой статьи.
                Читать дальше →