Pull to refresh
0
0
Send message

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

Reading time 2 min
Views 24K

Спрайты — классный способ сократить количество запросов к серверу. Можно упаковать кучу иконок в один спрайт и прописать в CSS смещения для каждой иконки. Однако, очень неудобно, что нужно попиксельно всё это считать. Пиксели — значит никакой динамики. Если использовать пиксели, то кусочек спрайта будет отображаться фиксированным размером — независимо от того, выводится он внутри параграфа, или внутри заголовка. Это неправильно, мне кажется, и неудобно. Но, похоже, я нашёл интересный способ выводить иконки динамического размера.
Читать дальше →
Total votes 46: ↑35 and ↓11 +24
Comments 54

Google Plus, Facebook, Twitter — читаем в RSS агрегаторе

Reading time 2 min
Views 49K
Если вы боитесь социальных сетей, но хотели бы знать, о чем там пишут известные люди – используйте для этого технологию 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
Total votes 54: ↑45 and ↓9 +36
Comments 30

Закрываем зеркало сайта от индексации правильно

Reading time 4 min
Views 6.1K
Здравствуй, %habrauser%.
Сегодня я покажу как не надо закрывать от индексации зеркало сайта, и как закрыть его правильно.

Предыстория

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

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

Всё началось с того, что они не разобрались в движке сайта PHPShop.
Отправили нам письмо, мы им сообщили где что редактируется, в каком файле находятся нужные им теги, а так же в довесок дали немного ссылок на официальную документацию.
Читать дальше →
Total votes 78: ↑60 and ↓18 +42
Comments 37

W3C Дайджест. Что нового в CSS3. Выпуск 3

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

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

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




Похоже, одной из серьезных проблем для модуля CSS3 Animations станут объекты, которые имеют display: none и visibility: hidden.
Читать дальше →
Total votes 31: ↑29 and ↓2 +27
Comments 30

Переход с Windows Mobile на Android. Список приложений

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


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

Выравниваем блок по центру страницы

Reading time 5 min
Views 964K
Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах.
Читать далее
Total votes 69: ↑51 and ↓18 +33
Comments 49

Сканирование фотопленки при помощи DSLR

Reading time 6 min
Views 51K
Предисловие

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

Зачем нужно?

Сканирование пленки нижеописанным образом позволит получить максимум информации из снимка, возможность настройки экспозиции, баланса белого, контраста и т.д. При сканировании пленки в фотосалоне, машина автоматически выбирает контраст, баланс белого, экспозицию, зачастую делая это не верно.
Читать дальше →
Total votes 50: ↑47 and ↓3 +44
Comments 53

Как сверстать тему для WordPress

Reading time 24 min
Views 583K

Введение


В предыдущих статьях мы рассмотрели принципы верстки на чистом CSS и с помощью Bootstrap. Сегодняшней статьей мы начинаем рассматривать особенности верстки под популярные CMS. И начнем с WordPress, как самой популярной из них. Будем считать, что WordPress у вас уже установлен и перейдем непосредственно к созданию шаблона, в качестве которого у нас по-прежнему будет выступать Corporate Blue от студии Pcklaboratory. Если вы не знаете как установить WordPress, то инструкцию можно найти здесь. В данном руководстве мы не будем подробно описывать CSS стили и HTML код – это было сделано уже в предыдущих статьях. Вместо этого рассмотрим детально особенности создания темы именно под WordPress.
Читать дальше →
Total votes 66: ↑54 and ↓12 +42
Comments 28

Насилие над DHTML и вывод JavaScript на десктоп. Реставрация старых игр. Сборка web-приложений

Reading time 12 min
Views 24K

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


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

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

Читать дальше →
Total votes 93: ↑82 and ↓11 +71
Comments 14

Animate.css — набор кроссбраузерных CSS3 анимаций

Reading time 1 min
Views 94K

Animate.css




На днях наткнулся на эту замечательную вещь и решил поделиться с Хабрахабром.
Animate.css — сборка отличных кроссбраузерных CSS3 анимаций в одном файле.
Читать дальше →
Total votes 71: ↑65 and ↓6 +59
Comments 23

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

Reading time 4 min
Views 266K
image

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

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

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

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

Для тестирования я выбрал реально адаптивный сайт PajamasOnYourFeet.com, сайт построено на основе HTML5 шаблона, бесплатно предоставленным EGrappler.
Читать дальше →
Total votes 30: ↑27 and ↓3 +24
Comments 33

Проблемы CSS. Часть 1

Reading time 7 min
Views 99K
От переводчика
Статья большая решил разбить на две части.

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

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

В лучшем случае — работу с css можно назвать веселым занятием. И это то, благодаря чему мы имеем работу. Потому что, как я считаю, генерация эффективных и кроссбраузерных css стилей невозможна и не будет возможна в ближайшее время.
Читать дальше →
Total votes 79: ↑71 and ↓8 +63
Comments 53

Работа с цветом: полезные инструменты, книги, статьи для веб-дизайнеров

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

Инструменты




Colour Lovers — старый и функциональный инструмент для подбора цветовых схем. Аналоги — Colourcode, Color Scheme Designer и конечно Kuler. Подобных сайтов великое множество, но эти, на мой взгляд, самые удобные.
Читать дальше →
Total votes 67: ↑66 and ↓1 +65
Comments 8

Адаптивное меню с поддержкой retina

Reading time 8 min
Views 35K
В этой статье очень подробно описано пошаговое создание адаптивного меню для сайта с несколькими вариантами компоновки элементов (в зависимости от размера экрана девайса). Для поддержки retina-экранов используется иконочный шрифт.



Демо / Скачать исходники
Читать дальше →
Total votes 61: ↑52 and ↓9 +43
Comments 18

Повторяющийся зубчатый фон на CSS

Reading time 2 min
Views 44K


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

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

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

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

Для IE 7, 8 у нас будет фоллбэк в виде обычной заливки. А вот с IE9 проблема — он не поддерживает градиенты, но при этом понимает hsla и rgba цвета. Воистину «великолепный» браузер. Что ж, его пока придётся игнорировать. Если кто–то подскажет хороший фоллбэк для IE буду только благодарен.
Читать дальше →
Total votes 82: ↑74 and ↓8 +66
Comments 66

Принцип цикады на чистом CSS

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

Во многих случаях можно сэкономить ещё больше, используя градиенты. Даже с учётом того, что пока практически все браузеры поддерживают свойство linear-gradient только с префиксами, суммарный объем кода CSS, необходимый для создания фона, в несколько раз меньше размера нескольких PNG с фрагментами, и, что ещё важнее — вообще не требует лишних запросов к серверу. Так, Эрик Мейер недавно привёл пример реализации первых двух фонов из оригинальной статьи Уокера на чистом CSS. Для простых цветных полосок (вверху) понадобилось 2.66 Кб кода CSS (с префиксами, без минификации и компрессии). В будущем, когда все популярные браузеры избавятся от префиксов, будет достаточно 0.59 Кб кода. В оригинальном примере изображения весили около 6 Кб + 3 запроса к серверу. Второй пример с занавесом (внизу) впечатляет ещё больше. Даже с префиксами получается примерно десятикратный выигрыш.
Читать дальше →
Total votes 102: ↑80 and ↓22 +58
Comments 26

Cufón – используйте шрифты, какие душа пожелает

Reading time 4 min
Views 90K
Если стоит задача использовать в проекте нестандартный шрифт, то есть возможность пойти несколькими путями:
  1. Ъ-метод – не использовать нестандартные шрифты, достаточно в CSS сказать body {font-family: sans-serif;} и не морочить себе голову.
  2. Быдло-метод – нарезать из ЖПЕГов, картинок с заголовками, ужать посильнее, что б появилась размытость и вставлять вместо текста картинки. Достаточно популярный на наших просторах метод.
  3. W3C-метод – используем @font-family и наслаждаемся красивыми шрифтами без всяких заморочек. Пока этот метод не рассматривают, как рабочий, по причине слабой поддержи со стороны браузера.
  4. sIFR – клевая вещь, наиболее употребляемая на сегодняшний день, но как недостаток – требует наличия Flash-плагина. Хотя это трудно назвать недостатком, но если есть инструмент, позволяющий обойтись без плагинов, то это не может не радовать.
  5. Cufón – самое то. Относительно новый метод, который показывает превосходные результаты. Он и есть герой этой статьи.
Читать дальше →
Total votes 119: ↑111 and ↓8 +103
Comments 106

Information

Rating
Does not participate
Location
Россия
Date of birth
Registered
Activity