Оптимизация графики для Apple Retina Display используя CSS Background Size (Часть 2)

В одном из примеров я упомянул, что вы можете использовать media query для определения устройств высокого разрешения и потом «кормить» графику высокого разрешения только этим устройствам. Читать далее Оптимизация графики для Apple Retina Display используя CSS Background Size (Часть 2)

Как оптимизировать графику для Retina диcплеев (часть 1)

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

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

Новые противостояния приходят с каждым новым мобильным устройством. Но есть и отличная новость: нам не нужно подстраиваться под каждый новый моб.девайс, который выходит на рынок.

С выходом нового iPad и включая оба поколения iPhone 4, у компании Apple теперь есть миллионы устройств в руках ее верноподданных пользователей, которые радуют глаз красивыми высокоплотными дисплеями.

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

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

Когда Apple выпустили iPhone 4, у которого Retinaдисплей, они стали измерять экран в points, вместо пикселей. Каждый pointравен 4 пикселям. Дисплей увеличивает каждый пиксель в 2 раза так, что физический размер графики остается неизменным, смотрите ли вы с iPhone 4 или же с iPhone 3gs.

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

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

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

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

Так каково же решение?

Одно из – это использование mediaqueries для ретина дисплеев, разделяя графику на графику низкого и высокого разрешения.

@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {
    logo {  
        background: url(images/scribe-logo@2x.png);
        background-size: 130px 40px;
    }
}

Обратите внимание на 2 изображения ниже.

Первая картинка — обычная, вторая — высокого разрешения.

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

Этот способ работает хорошо, но он требует очень большого объема работы.

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

Один из новых способов сделать это – использовать iconfonts.

Преимущества использования iconfonts:

  • бесконечно масштабируемые
  • независимое разрешение
  • Поддерживается всеми браузерами
  • Вы можете создавать на лету (легко изменить цвета с CSS)
  • Небольшой размер файла

Вот как это работает:

1) Загрузите ваш шрифт на веб-сервер

2) Объявите ваш шрифт в CSS:

@font-face {
    font-family: 'ModernPictogramsNormal';
    src: url('http://www.studiopress.com/wp-content/uploads/modernpics-webfont.eot');
    src: url('http://www.studiopress.com/wp-content/uploads/modernpics-webfont.eot?#iefix')format('embedded-opentype'),
         url('http://www.studiopress.com/wp-content/uploads/modernpics-webfont.woff') format('woff'),
         url('http://www.studiopress.com/wp-content/uploads/modernpics-webfont.ttf') format('truetype'),
         url('http://www.studiopress.com/wp-content/uploads/modernpics-webfont.svg#ModernPictogramsNormal')format('svg');
    font-style: normal;
    font-weight: normal;
}

3) Создайте разметку

<div><span class="icon">i</span>View Basket</div>
<div><span class="icon">a</span>Read More</div>
<div><span class="icon">(</span>Settings</div>

4) Создайте класс в css и пропишите свойства.

.icon {
     color: #3090cf;   
    font-family: 'ModernPictogramsNormal';
    font-size: 18px;
    padding: 0 15px;  
}

​Кодоощущение разработчика под 1C Битрикс CMS

 Те, кто верит, налетай, те, кто жадный, убегай

Отделяем мух от котлет, а тех, кто нам верит от тех, кто нет.

Для вас свеженький товарчик, а для нас — солидный наварчик.

Товар без изъяна, товар без обмана, надёжный, как пружина от дивана.

(х/ф «Карты, деньги, два ствола»)

Громкие слова, яркие картинки, плавные слайдеры. На официальном сайте 1С-Битрикс не хватает только голых женщин и няшных котиков для окончательного и ошеломительного успеха. Почти 10000 партнёров, 85 тысяч успешно сданных проектов. Внушительно! Однако что кроется за кулисами всего этого великолепия? Чем товар хорош, а чем плох с точки зрения разработчика? Читайте дальше. Читать далее ​Кодоощущение разработчика под 1C Битрикс CMS

Webflow: делаем адаптивный дизайн без единой строчки кода

Обзор сервиса для создания адаптивного дизайна – Webflow.

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

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

Рассмотрим подробнее интерфейс сервиса. Начнем с простого – создания проекта.

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

Рабочая среда выгладит примерно так:

И так, справа мы видим элементы (html, iframe, video, forms, etc), которые мы можем перетащить (drag-n-drop) на страницу макета.

Скажу сразу, что сетка здесь 960px, что очень удобно, так как тенденции дизайна в наши дни склоняются именно к ней.

Чтобы получить доступ к цсс-свойстам любого элемента, который вы перетащили на рабочую область, достаточно дать класс.

Здесь мы видим знакомые нам css-свойства, которые можно установить без единой строчки кода, так как сервис сам генерирует его, а нам достаточно прописать размер либо же перетащить ползунок.

Панель слева позволит тестировать нашу страницу под все основные разрешения экранов, то бишь тестить адаптивную верстку, а также экспортировать наши «наброски» в исходный код.

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

Плюсы:

  • Проект постоянно развивается: добавляются новые элементы, скрипты, новые возможности (до недавнего времени была добавлена возможность создавать google карту в один клик мышки);
  • Простота в использовании: думаю, что в этом сервисе смогут разобраться люди, которые никогда не имели делом с версткой сайтов.
  • Возможность создавать дизайн полноценного сайта: недавно появилась возможность создавать дополнительные страницы в проекте;

Минусы:

  • Сервис платный и цена его немаленькая.

Для чего нужны фреймворки?

Многие программисты разрабатывают довольно большие проекты, не используя фреймворки. Некоторые «разработчики» вообще не знают о их существовании. Так всё же. Зачем нужны фреймворки, если можно обойтись и без них? Из моего собственного опыта могу сказать, что фреймворки позволяют улучшить не только код, но и сформировать правильное мышление программиста. Читать далее Для чего нужны фреймворки?

Как защитить код на PHP?

Спасение утопающих — дело рук самих утопающих

«Двенадцать стульев» И. Ильф, Е. Петров

В коммерческой разработке ПО рано или поздно возникает проблема защиты исходного кода программы. Особенно актуальной эта проблема становится при продвижении собственных продуктов которые содержат уникальные алгоритмы или крайне важно сохранить копирайт. Читать далее Как защитить код на PHP?

Обзор beta версии Yii 2.0

В преддверие выхода новой версии популярного фреймворка Yii мне захотелось разобрать его сильные и слабые стороны, а так же выяснить чего нам стоит ожидать в новой версии. Читать далее Обзор beta версии Yii 2.0