Достался мне проект по адаптации флеш-курса электронного обучения под iPad.
Хотел поделиться некоторыми моментами.

Медиа
Проект должен был позволять играть видео/аудио файлы, причем без лишний движений со стороны пользователя.
Видео на iPad можно проиграть только путем нажатия пользователем на что-нибудь, т.е. автоматически проиграть медиа файл, например, при загрузке страницы не получится, или получится, но далеко не во всех версиях iOS.
Так что первый раз проиграть видео/аудио приходится по клику пользователя. Дальше, если тому же тегу менять атрибут src, отлавливая событие onended, проигрывание можно делать автоматически.

Сегодня начал верстать очередной сайт и по привычке пошел на www.yaml.de, чтобы скачать самую свежую версию моего любимого CSS-фремворка и… не узнал внешний вид сайта.

Оказывается вышла новая версия, которая по прежнему осталась очень компактной (ядро 4.6 kB) и обеспечивает хорошую поддержку браузеров

Запустился, правда, в стадии ранней бета-версии (создатель пишет «super-beta»), сервис http://scriptogr.am, основным предназначением которого является возможность быстрого создания блога (пока без ничего лишнего вроде рекламы), хостингом для которого будет являться dropbox-аккаунт. Все довольно просто:

• Требуется позволить сервису получить доступ к учетной записи на Dropbox, в котором он аккуратно создаст свою папку scriptogram, а в ней папку posts — там и будут храниться собственно markdown-файлы, представляющие из себя будущие записи в блоге.
• Затем в админке надо как-то назвать блог и получить тем самым адрес http://scriptogr.am/username; прямо после можно начать блог крайне простым текстовым редактором, который предлагает сервис. Редактор позволяет создать markdown-файл, поместив его в dropbox-аккаунт или отредактировать существующий.
• Следующий шаг — синхронизация между DropBox и scriptogr.am (кнопку для этого сложно не найти), после которой на http://scriptogr.am/username новый блог и будет, собственно, доступным. Вполне допустимо загрузить предварительно подготовленные md-файлы и синхронизировать их аналогично.

Взыскательные пользователи могут отредактировать CSS-стили или HTML-код блога, который, тем не менее, и по умолчанию выглядит довольно неплохо — вот так выглядит официальный блог проекта.

Я не люблю CSS. Он простой и понятный. Это движущая сила Интернета, но он слишком ограниченный и им трудно управлять. Пришло время привести этот язык в порядок и сделать его более полезным, используя динамический CSS при помощи LESS.
Объясню свою позицию на примере. Почему бы вместо использования #FF9F94 для получения темно-персикового цвета просто не хранить значение этого цвета в переменной для её последующего использования? Что бы перекрасить сайт достаточно будет изменить значение переменной всего в одном месте и всё.
Другими словами: это будет очень изящно, если мы будем использовать немного программирования и логики в CSS, что бы сделать его более мощным инструментом. Хорошо, что это всё возможно с использованием LESS.

Даже хорошие презентации, не содержащие списков из двадцати пунктов восьмым кеглем и вызывающих рвотный рефлекс картинок из бесплатных сборников клипарта “встречи и партнёрство” или “офисная жизнь”, следуют давным-давно заданному стандарту, без изменений перенесённому в офисные пакеты из мира старинных диапроекторов. Презентация всегда представляет собой набор прямоугольных картинок одинакового формата и размера. Иногда между ними добавляют переходы и анимацию, раздражающую не меньше разноцветных надписей и бессмысленно улыбающихся абстрактных офисных работников. Стандартом де-факто для хорошей презентации давно стала последовательность статичных слайдов без всякого мельтешения, с очень коротким текстом крупным шрифтом и несколькими тщательно подобранными фотографиями или скриншотами.

Основанный на трансформациях и переходах CSS3, javascript-фреймворк для создания презентаций impress.js выходит за рамки понятия “слайд” и позволяет строить презентации в открытом, неограниченном трёхмерном пространстве. Источником вдохновения для него послужил сервис prezi.com. Репозиторий impress.js на Гитхабе появился меньше месяца назад, но уже стал одним из самых популярных. Нетерпеливые могут посмотреть небольшую демку здесь, а остальные — создать пример необычной презентации прямо сейчас.

Стивен Виттенс переработал свой сайт Acko.net. Виттенс применил 3D функции CSS 3 и небольшую часть JavaScript для создания ошеломляющего 3D заголовка страницы.

Чтобы увидеть 3D в действии вам надо использовать браузер WebKit (Safari или Chrome) т.к. пока только они поддерживают CSS 3D эффекты. В других браузерах, которые еще не поддерживают 3D эффекты сайт все равно нормально просматривается. Чтобы увидеть полный 3D эффект обязательно прокрутите страницу.

Виттенс в своем блоге подробно написал как он создал 3D эффекты и даже сделал 3D редактор, с которым вы можете поиграть.

Представляю скромную подборку сервисов, которые ускоряют экономят время разработчику и/или ресурсы сервера. Здесь не будет подробных обзоров, только список с кратким описанием и ссылками. Также, я не претендую на свежесть ресурсов, поэтому кому-то перечисленный список покажется слишком очевидным и известным всем.

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

Google Fusion Tables

Позволяет развернуть реляционную базу данных на серверах гугла с обращениями с помощью библиотеки Visualization или JSONP.
Статья на хабре: habrahabr.ru/blogs/webdev/116035
Ссылка: www.google.com/fusiontables/Home

Минусы: количество обращений в секунду равно пяти с одно IP адреса и столько же при обращении с аккаунта (используя авторизацию). То есть развернуть сайт с хорошей посещаемостью и работать с сервисом с помощью сервера не получится. Стоимость увеличения лимита — от 10 тысяч долларов в год (см. Maps API Premier). Кроме того, отсутствуют джойны, которые заменяются представлениями (view), создаваемыми через интерфейс.

Представляю вашему вниманию перевод статьи под названием "Redesigning The Country Selector" от Christian Holst. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.

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



Однажды, проводя масштабные юзабилити-тестирования (о которых мы писали на Smashing Magazine в апреле 2011. Примечание переводчиков: мы перевели и эту статью тоже. Обязательно ознакомьтесь :), мы последовательно столкнулись с несколькими проблемами, связанными с выбором страны. Якоб Нильсен сообщал о похожих моментах в 2000 и 2007 годах, когда он тестировал выпадающие списки с большим количеством внутренних элементов, к примеру, таких, как перечни штатов или стран.

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

В компьютерную эпоху пробелы, как самая несодержательная часть текста, часто обходят должным вниманием при подготовке изданий. Зачастую в документе присутствуют всего два вида пробелов: обыкновенный и неразрывный (в Word'е фиксированной ширины, в InDesign'е — нет). Между тем, пробелов существует около двух десятков, и некоторые из них очень пригождаются в русской типографике.

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

Неразрывный пробел ничем не отличается по ширине и растяжению от обычного пробела, но не может быть заменён переводом строки. Неразрывные пробелы необходимо ставить после почти всех однобуквенных слов (а, в, и, к, о, с, у, я) и до «б» и «ж», иногда после двухбуквенных слов в начале предложения, между числом и единицами измерений (100 грамм, 5 м), между частями названия (InDesign 5.5).

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

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

Производители обычно выпускают рекомендации для построения GUI под их OS. Дошла очередь и до Google Android:

Многие наверняка знакомы с плагином quicksearch для jQuery. Этот плагин, перебирая заранее подготовленный список всех элементов и их текстовое представление, проверяет наличие ключевых слов с использованием функции indexOf.

Мне такое решение не понравилось. Я считаю, что этот функционал должен быть нативным.

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

В этом уроке я покажу как создать кнопку с изюминкой, используя только якорный тег и мощь CSS.

По следам хабралинча имени Рюмкина коснёмся темы правильного типографического оформления чисел. В голову пришли следующие темы, если что-то вдруг забыто — пишите в комментариях, добавлю в статью.

• Минускульные и маюскульные цифры
• Целые числа и десятичные дроби
• Простые дроби
• Буквенные сокращения (тысяча, миллион, миллиард)
• Диапазоны
• Порядковые числительные и числительные в составе сложных слов

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

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

Известно, что следуя идеям старой школы, а именно, добавляя ссылки на JS и CSS в страницы, может обернуться большим временем загрузки страницы. Браузер отображает страницу по мере скачивания, но останавливается, если натыкается на тег script со ссылкой, до того момента, пока скрипт не будет загружен и выполнен. Сайты стали использовать всё большее количество скриптов, начальное отображение страницы занимает всё больше времени, к примеру, на этой странице, которую вы читаете, 13 скриптов, 7 из которых находятся в head'е. Ко всему прочему, некоторые браузеры по-прежнему придерживаются ограничений на одновременное количество загрузок с одного хоста.

Сразу предлагаю принять, что все JS файлы минимизированы, и передаются в сжатом виде.

Существует несколько решений, как то:
— поместить стили и скрипты прямо в страницу;
— установка аттрибутов async/defer тегу script;
— склеить все скрипты в один файл;
— помесить ссылки на скрипты в конец body;
— разместить все файлы на CDN/на разных хостах;
— свой вариант…

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

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

Сейчас наличие нескольких подключений к интернет на одном, в том числе и домашнем сервере — не редкость. Городские локалки, ADSL, 3G модемы… Добавим к этому сети домашние локальные и внешние виртуальные (VPN), и получим ядрёную смесь интерфейсов, между которыми необходимо роутить трафик, балансировать трафик между разными каналами в интернет (когда они есть), и переключаться с нерабочих каналов на рабочие (когда они отваливаются).

Судя по постам в инете, большинство людей, столкнувшихся с этой ситуацией, очень плохо представляет себе, как это настраивается. Надо отметить, что в линухе действительно управление роутингом весьма сложное и запутанное — следствие эволюционного развития и поддержки (частичной) совместимости. Я хочу описать принципы настройки роутинга multihomed серверов на конкретном, достаточно сложном, примере: на сервере три физических сетевых интерфейса (один в домашнюю локалку и два к ADSL-модемам), два ADSL-подключения (ADSL-модемы в режиме bridge, так что pppd поднимает этот же сервер) к разным провайдерам (одно со статическим IP, второе с динамическим), плюс VPN на сервер компании — итого шесть интерфейсов.

Тема достаточно сложная, поэтому для понимания материала потребуется хотя бы минимальное понимание работы роутинга (что такое default route и gateway), файрвола (маркировка пакетов, отслеживание соединений, связь между разными таблицами и цепочками файрвола и роутингом), pppd (скрипты ip-up/ip-down) и протоколов IP и TCP.

Привет %username%!
Хочу поделится замечательным сервисом для создания анимации на платформе HTML5 под названием Mugeda. Сразу оговорюсь, сервис не мой, но пройти мимо и тем более не рассказать о нем я не мог.

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

Кратко: системы управления сайтом/контентом (СMS), инструменты для прототипирования/проектирования, CRM-системы, решения для ведения документооборота, бухгалтерии.

В отличие от прошлых лет, сейчас мы сделали не один, а сразу 16 рейтингов систем управления сайтом/контентом для тех, кто подходит к этому вопросу особо тщательно.

Традиционный рейтинг CMS по доле рынка (популярности) среди интернет-агентств

Новый рейтинг CMS по совокупности ключевых параметров (т.е., по качеству)

1	UMI.CMS	112,65
2	1C-Битрикс	101,54
3	NetCat	101,49
4	WordPress	91,83
5	Joomla!	91,38
6	MODx	90,66
7	Drupal	88,38

Опрос, модерация и анализ данных проводились с марта по декабрь 2011 года.
В голосовании по вопросу использования CMS участвовал 341 игрок рынка.

Под катом — остальные рейтинги CMS и других решений, применяемых в веб-студиях и интернет-агентствах.

Доброе время суток!
Несомненно многие из читателей Хабрахабр слышали, видели или даже использовали технологию WebGL. Если быть кратким — это библиотека для аппаратного ускорения интерактивной 3D графики прямо в веб-браузере без установки дополнительных плагинов. Обычно WebGL воспринимается как технология для создания развлекательного контента, например трехмерные многопользовательский онлайн игры. Однако интерактивная трехмерная графика в браузере может пригодиться и вполне для более серьезных профессиональных целей. И пример такого использования уже доступен каждому из нас.
Design Review Quickshare — веб вьювер 3D моделей с использованием облачных технологий. Сразу не терпится сказать, что с его помощью Вы с легкость сможете разместить 3D модель на своей странице!