99injections – OIL

Идея и режиссура: Олег Сердюк
Подробности и загрузка видео: Ссылка на Vimeo

С появлением  новой директивы в языке CSS 2.0 “@font-face” мастерам интернет дизайна стали доступны широкие возможности по использованию всевозможных шрифтов для оформления сайта, это конечно слегка утяжеляет страницу для конечного пользователя, но даёт большую свободу в полёте фантазии при вёрстке.

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

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

Какие преимущества у шрифтов-иконок перед изображениями?

В первую очередь – это возможность легкого построения Responsive дизайна, который будет откликаться на размеры экрана. При использовании иконок Вам потребуется минимум 3 полных сета, например для отображения сайта на телефоне, ПК и планшете. С пиктограммами достаточно указать предельные величины для шрифта. Ниже Вы видите три пиктограммы – это буквы ABC (.modern {font: 60px/68px ‘ModernPictogramsNormal’, Arial;})

ABC

При изменении размеров качество иконок не страдает, Вы можете использовать такой размер, какой Вам нужен (45px, например):

AB
Чтобы сменить цвет иконки, Вы можете просто задать цвет шрифта (color:red, например):

AE
С помощью CSS 3.0 можно легко применить различные эффекты к таким шрифтам-иконкам также, не теряя в качестве:

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

Это лишь часть преимуществ таких шрифтов. Начав их использовать, Вы сможете найти ещё массу применений для них.

Как использовать произвольный шрифт на страницах сайта?

В примерах выше мы использовали бесплатный шрифт с пиктограммами под названием Modern Pictograms. Данный шрифт подключён только к этому посту с помощью CSS (как это сделать на WordPress пишет Voffa.ru).

1. Вам понадобиться – @font-face-kit шрифта Modern Pictograms

2. Код CSS для страницы сайта:
<style type="text/css" media="screen">
@font-face {
font-family: 'ModernPictogramsNormal';
src: url('modernpics-webfont.eot');
src: url('modernpics-webfont.eot?#iefix') format('embedded-opentype'),
url('modernpics-webfont.woff') format('woff'),
url('modernpics-webfont.ttf') format('truetype'),
url('modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
font-weight: normal;
font-style: normal;
}
h3.modern {font: 60px/68px 'ModernPictogramsNormal', Arial, sans-serif;letter-spacing: 0;}
.modern {font:18/27px 'ModernPictogramsNormal', Arial, sans-serif;letter-spacing: 0;}
</style>

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

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

Несколько бесплатных чёрных сетов шрифтов-иконок

Modern Pictograms (89 пиктограмм)

Разработан компанией Design Office для WordPress темы. Поставляется бесплатно по открытой лицензии.

Скачать шрифт

Heydings icons (60 пиктограмм)

Отлично подойдёт для построения качественного GUI (graphical user interface).

Скачать шрифт

Iconic icons (171 пиктограмма)

Большая упаковка иконок и шрифтов-пиктограмм. Идеальное решение для минималистичного дизайна.

Скачать шрифт

Websymbols (80 пиктограмм)

Интернет обозначения в шрифте Websymbols, российской студии Just Be Nice.

Скачать шрифт

Font-Awesome (150 пиктограмм)

Большой набор иконок, который можно использовать в коммерческих целях.

Скачать шрифт

Также мы уже писали о новом шрифте с пиктограммами Entypo. На этой ноте у нас всё. Пользуйтесь, спрашивайте. Хорошего дня!

А нам {

На территории СНГ, к примеру, скоро начнёт свою работу облачный сервис от компании Яндекс – “Яндекс.Диск”, который анонсировал хранилище в 10Gb. Сервис  будет доступен на всех мобильных и стационарных платформах, кроме Linux (только онлайн версия в браузере). Получить инвайт можно тут.

Вернёмся к устройствам на базе Android. Гигант отрасли облачных технологий Box.net предлагает пользователям Андроид бесплатно на постоянной основе получить целых 50 гигабайт в облаке.

Для чего используются облачные сервисы?

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

Облачный сервис Box.net для Android даёт 50 гигабайт.

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

• Скачать приложение box.net для android с маркета Google Play.
• Установить приложение.
• Войти в свой аккаунт или зарегистрировать новый.
• Получить уведомление, что у Вас 50 гигабайт места в облаке.
• Ссылка для мобильных в QR коде:

Если Вы пригласите своих друзей и сотрудников с такого аккаунта, то они тоже получат по 50Gb свободного места в Box.net!

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

Для начала необходимо установить эмулятор на свой компьютер, предварительно скачав, установщик. Есть два типа установочных файлов – интернет установка (3,5 Мб, но вся нужная информация закачивается из интернет при установке) и стандартный установщик (100 мб).

Интернет-установщик требует 2Gb свободного места (не совсем ясно для чего), стандартный установщик займёт около 300 Мб без учёта приложений, которые Вы установите в будущем.

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

Интерфейс приложения интуитивно понятен и прост. Для установки приложений  используйте строку поиска, программа эмулятор Android производит поиск по нескольким Интернет магазинам приложений и игр: 1Mobile Market, Amazon Appstore, GetJar.

В верхней части окна находиться панель с ярлыками уже установленных приложений и игр, среди которых Drag Racing, Pulse, Evernote, Talking Tom и другие.

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

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

Видео игрового процесса – играем в Angry Birds  в среде Windows 7:

Да, хочу подметить, что эмулятор Android для Windows неплохо подгружает систему и потребляет немало ресурсов во время HD игр.

Особое значение уделяется графической карте, на некоторых ПК, с встроенными видеокартами(Intel Graphics и т.п.), Вы можете получить предупреждение, что некоторые игры и приложения будет ограничены в функционале или не будут работать вобще.

На данном  этапе эмулятор Android находится в разработке и доступна лишь версия  бета-1, которая является пока бесплатной.

Советую воспользоваться этим эмулятором и насладиться работой с приложениями и играми под Android на своём ПК.

Скачать эмулятор Android – BlueStacks App Player

Статью подготовил eldarbal специально для ITPride. Я веду блог об онлайн сервисах и программном обеспечении. Если Вас заинтересовала моя статья, заходите на мой сайт.

Коды всегда нравятся людям, ведь они таят в себе элемент какой-то тайны и загадочности.  Нередко вместо всего рекламного материала на бигборде располагается только большой код и такая реклама не менее эффективна, чем “глянец”, QR код на визитке тоже не уже редкость, но говорит о том, что Вы идёте в ногу со временем.

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

Чем он примечательнее других?

1. Код можно сделать другого цвета отличного от чёрного, это конечно, не самая главная “фишка” и такое могут и другие.
2. Безусловно,  можно сделать QR код с цветным фоном.
3. Элементы самого кода можно закруглить.
4. Вместо цветного фона можно использовать любую фотографию, а также настроить её прозрачность.
5. Элементы кода можно также залить фотографией. Как обрезать по маске (работающие с фотошоп поймут, остальные посмотрят примеры ниже).
6.  Можно загрузить логотип в  Ваш  QR код, не нарушая читабельность.
7.  Можно редактировать код “попиксельно” и раскрасить элементы по своему вкусу.

Неплохие преимущества, а теперь от слов к практике – создаём оригинальный QR код для ITPride. Для начала мы сгенерировали стандартный QR код:

После генерации кода, становится доступным меню справа. В нём мы:

• закруглили углы кода,
• загрузили и обрезали изображение слонёнка, который себя фотографирует по “маске кода”,
• установили прозрачность рисунка в 40%,
• добавили свой логотип.

Вот что из этого вышло:

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

Советы по работе с сервисом

• Следите за ползунком “Customization maximum”, не превышайте порога в 3 ячейки для читаемости кода.
• Выбирайте такое место для логотипа, которое содержит минимум элементов кода. Логотип можно поворачивать и применять к нему ряд эффектов (выделите лого, нажмите кнопку FX).
• Старайтесь делать код тёмным, а фон светлым – это облегчит качество снимка на слабых камерах, а, соответственно, и чтение кода самого.
• Чтобы получить код большего размера, можно пойти на хитрость – увеличьте весь сайт кнопками CTRL+”+”, и сделайте скриншот экрана кнопкой PrintScreen

Ссылки на сервис.

Запустить сервис "QR Hacker" | Открыть сервис "QR Hacker"(⇒)