40 примеров лучших мобильных пользовательских интерфейсов

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

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

Что нужно знать о JPEG файлах

Видео урок для новичков, длительностью 7 минут, в котором Мартин Перхиньяк, пользуясь инструментами Adobe Photoshop CS6, расскажет об особенностях JPEG файлов.

Mozilla Style Guide

Профессионально выполненные руководства по стилям всегда интересно посмотреть. Тем-более, что в Style Guide от Mozilla переплетены воедино и веб и дизайн, что само по себе любопытно и познавательно.

Mozilla Style Guide



Подборка веб сайтов, использующих диагональные элементы

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

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

jQuery uLED — бесплатные электронные часы для веб сайта

Вот такие симпатичные часики с возможностью настройки цветов, закруглений, формата времени. Можно включить режим обратного отсчета или показывать случайные числа.

инструкция по подключению и настройке электронных часов uLED

UPD: Чуть позже заметил, что в мобильных браузерах эти часы либо не работают, либо отображаются, к сожалению, некорректно.

Коллекция из 6 бесплатных тем для jQuery UI

6 бесплатных тем для jQuery UI6 стильных тем для jQuery UI в светлых тонах.

jQuery UI — это набор компонентов пользовательского интерфейса библиотеки jQuery. Он предоставляет большой спектр инструментов для быстрой реализации широко используемых виджетов и других функциональных элементов пользовательского интерфейса.

jQuery UI включает в себя такие популярные компоненты, как: DatePicker, Slider, Accordion, Progress Bar, Drag 'n'Drop и др. И всё это поддерживает темы оформления. Есть даже ThemeRoller, который позволяет всем настраивать свои собственные темы.

Но, любая тема созданная с помощью ThemeRoller будет иметь оттенок стандартного jQuery UI, которые можно встретить на многих сайтах.

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

SEO — Из жопы в ТОПы

SEO - шпаргалка оптимизатораНебольшая шпаргалка для SEO-шника в формате ToDo. Общая практика оптимизации уже перестает помещаться в голове. Недавно поймал себя на мысли, что имея подобный список в самом начале проекта, всё было бы намного проще. Если чего-то не хватает, дополняйте в комментариях.

Читать дальше

Как быстро установить и настроить локальный WAMP сервер

Denwer — локальный WAMP сервер, джентльменский набор Web-разработчикаВ данном случае, WAMP — это набор программного обеспечения: Windows, Apache, MySQL, PHP (по аналогии с широко распространенным акронимом "LAMP" — Linux, Apache, MySQL, PHP).

У многих, развертывание локального сервера ассоциируется с огромным геморроем — установкой ПО, ковырянием в конфигах до полуночи с разного рода портами, сокетами, протоколами, настройками прав доступа. Но, если вы PHP программист или HTML верстальщик, а ваша рабочая ОС Windows, то вам эта болезнь не нужна. К счастью, есть отличное средство: Denwer - локальный WAMP сервер. Установка занимает минуты, работает годами. Пользуюсь им более 7 лет, практически с момента основания проекта, никаких проблем замечено не было. Инструкции по установке и использованию смотрим на веб сайте Денвера.

Как избежать загрузки страницы веб сайта во фрейме

Как избежать загрузки веб сайта во фреймеК примеру, Google Images отображая результат поиска по картинкам показывает на фоне ваш веб сайт, а поверх него уменьшенную картинку. Некоторые сайты при таких условиях загружаются сразу. Как? — Очень просто, достаточно добавить на страницу JavaScript код:

if (top.location != location) top.location.href = document.location.href;

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

Онлайн сервисы для бесплатного кроссбраузерного тестирования верстки

Бесплатное онлайн тестирование верстки на кроссбраузерностьНе всегда есть возможность протестировать веб сайт локально. Далеко ходить не надо, живой пример — у меня Windows 7 и установлены только следующие браузеры (в основном последние): FireFox 16, Chrome 22, Opera 12, Internet Explorer 7-9, Safari 5. А как же быть с другими платформами, браузерами и их версиями?

К примеру, на днях заказчик прислал скриншот, сделанный на OS X в Safari 6, где он видит черную полосу поперек экрана, но у меня нет OS X, да и Safari не той версии. Самое время для паники, но есть палочка-выручалочка...
Читать дальше

Ещё одна CSS-техника замены текста изображением

Новая CSS техника замены текста изображениемИнтересная заметка, где рассматривается HTML5-техника замены текста изображением. Обычно это приходится делать за счет отрицательного значения text-indent, но там возникают свои тонкости и непрятности в случае inline-блоков.

В заметке приводится такое решение:

.ir {
    color: transparent;
    font: 0/0 a;
    text-shadow: none;
}

Из недостатков: серый след в IE6; нельзя использовать единицы em для отступов, т.к. размер текста равен нулю; не работает когда CSS не загружен; текст может отображаться, если пользователь использует кастомные стили для указания приоритета и размера текста.

Пример Style Guide для сайта

Style Guide сайта South TeesВпереди новый проект — рисуется дизайн, делается начальная верстка, программист колдует над CMS. И, чуть позже, начинают появляться подводные камни, о которых никто не предупредил, не подумал, не предусмотрел. Как можно предусмотреть всё? Правильно, — нужен стайл гайд (Style Guide), в котором будут представлены все возможные случаи форматирования текста и оформления элементов. Вот один из примеров — Style Guide для сайта Southtees.nhs.uk. Есть чему поучиться.

Справочная таблица по разрешениям экранов в зависимости от OS

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

В этом деле будет полезна таблица разрешений экранов в зависимости от операционной системы.

HTML5 и cемантика

HTML5 и семантикаОх уж эти стенания и мучения в выборе правильных, с точки зрения семантики, тегов и конструкций. Думаю, это знакомо каждому верстальщику. Когда вы тратите уйму времени на выбор семантически правильной модели для своей очередной работы. Особенно сейчас, когда практически утвержден новый стандарт — HTML5. Статья "Поговорим о семантике" поможет разобраться в этом вопросе.

Top 10 мифов о QR-кодах

10 наиболее распространенных мифов о QR-кодахQR-коды сейчас повсюду, но часто их назначение не понимают или используют неправильно. Тут вы узнаете 10 наиболее распространенных мифах о QR-кодах.

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

Давайте разберемся и развенчаем 10 мифов, связаных с QR-кодами.

Читать дальше

Машина времени, или Как раньше выглядел интернет

Интернет архив WayBackMachine25 октября компания Internet Archive объявила о преодолении баръера в 10 петабайт (1016) заархивированных данных. С помощью этого интернет архива вы можете посмотреть как выглядели различные веб сайты много лет назад, найти информацию, которой уже нет в сети или же восстановить свой сайт из "бесплатного бэкапа". В архив, помимо текстового контента, включены изображения, флеш, видео и прочие данные, которые удалось сохранить.

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

Кстати, если вы хотите, чтобы ваш веб сайт не попал в данный архив, достаточно добавить следующие строки в robots.txt:

# Internet Archiver Wayback Machine
User-agent: ia_archiver
Disallow: /

jQuery — предварительная загрузка изображений

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

Читать дальше

Реализация "click away" логики на странице продаж (JavaScript, jQuery)

JavaScript реализация "Click Away" логики на странице продажРечь пойдет о страницах моментных продаж (где посетителя всеми способами убеждают купить какой-либо товар прямо сейчас). Для этого, в частности, применяются JavaScript таймеры обратного отсчета. Еще один способ удержать посетителя и поднять конверсию — показать ему скидку, или предложить бесплатную пробную версию, в случае, при попытке уйти со страницы (закрыть её или ввести другой URL в адресной строке).

Читать дальше

Редизайн блога

Front Camp / Редизайн блогаПосле установки и обкатки новой темы пришло время произвести тюнинг. Отчет о проделанной работе и изменениях под катом. Очень надеюсь, что читателям понравится новый стиль. Мне слегка поднадоел дизайн в стиле Web 2.0, поэтому оформление сделано, мягко говоря, своеобразно — в стиле милитари. Если словите глюк — сообщите.

Читать дальше