Нам поступило много просьб о создании приложения под Android. И вот первая версия приложения для чтения высказываний из коллекции сайта Forismatic уже готова!

Мне, как наверное и многим другим, очень хочется при верстке использовать плюшки CSS3. Все большая поддержка 3 уровня каскадных таблиц такими браузерами как opera, firefox, safari, chrome и даже explorer 9 только подогревает это желание, но как обычно есть «но», IE6-8. При этом стоит понимать, что аллергия IE9 к winXP откидывает мечту на годы вперед. На этом можно было бы и закончить, но настырность и зуд в области мозга которая отвечает за желание использовать CSS3 не позволяют мне этого сделать.

Весь смысл этого поста сводится к тому, что IE не умеет CSS3 и поэтому его нужно научить, а если не захочет — заставить. И поиск подобного решения сподвиг меня сделать данную подборку.

Встречайте, парад нездоровых решений

Задача прибивания футера к низу страницы обмусолена с ног до головы. Она неплохо решается для футера фиксированной высоты. А вот для случая, когда высота футера зависит от его содержимого, методов не так много. Либо это очевидное решение на javascript. Либо подгонка для этого элементов, изначально для того не предназначенных. Я, конечно, о таблицах. Хочу предложить способ, который тоже имеет свои недостатки (обо всем ниже), но недостатки эти другие, и, следовательно, может подойти тем, кому первые два не подходят.

Здравствуйте, Хабравчане.
Однажды мне пришла идея создать сайт для поиска торрентов. Ведь, очень не удобно искать, по очереди, на большом количестве трекеров.
Итак, представляю Вам — Torrent-Search.

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

Думаю, все знают, что это такое. Некоторые браузеры, в частности, Фаерфокс и Интернет Эксплорер 8 рисуют однопиксельную пунктирную рамку вокруг ссылок и внутри кнопок, когда пользователь нажимает на них. Если сайт состоит из голого html, скорее всего, дискомфорта они не доставят. Но если все ссылки как-то стилизованны, вам (или вашему дизайнеру), скорее всего захочется избавиться от этого. Тем более, что эта рамка может отобразиться в неподходящем месте:

Тот факт, что iPhone предлагает наиболее развитый мобильный браузер среди мобильных платформ, пожалуй, ни у кого не вызовет сомнений. Однако не все знают, что довольно небольшими усилиями можно сайт сделать еще более дружественным к тем, кто смотрят его на iPhone или iPod Touch.

Ниже предлагаются простые 5 шагов, с которых можно начать, на примере сайта WHOIS Digger.

Шаг 1. Аналог favicon.ico

Когда пользователь создает ссылку на ваш сайт в виде иконки в SpringBoard, iPhone автоматически формирует картинку из скриншота страницы. В результате почти всегда получается неразборчивая каша, которая на гордое звание «иконки для iPhone» никак не тянет. Пропишите этот тег в заголовке страницы:

<link rel="apple-touch-icon" href="res/iphone_icon.png" />

и добавьте соответствующую картинку res/iphone_icon.png размером 57х57 пикселов. iPhone сам добавит скругленные углы и полукруглый блик, сделав вашу иконку похожей на остальные.

Вот так выглядит исходная картинка и иконка на рабочем столе iPhone:

Перед нами постоянно стоит задача предлагать пользователям новые варианты для создания заметок в разных ситуациях. Уже есть клиентские приложения Evernote для разных платформ и мобильных устройств, тесная интеграция с операционными системами и браузерами — все это позволяет достаточно быстро и удобно создавать текстовые, аудио- и фотозаметки и синхронизировать их. Но есть одно «но». До сих пор пользователь все равно зависел от наличия Интернета. Кажется, нам помогли обойти и этот момент.

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

Как это работает?

Для работы нужны связанные аккаунты в сервисах «Вселисделал» и, разумеется, Evernote. Небольшая инструкция о том как это сделать чуть ниже.

Когда все настроено, достаточно позвонить на бесплатный номер 8-800-100-3342 и после приветствия системы продиктовать пришедшую на ум мысль, предварив ее ключевым словом EVERNOTE (произносится как ЭВЕРНОУТ). Например: «ЭВЕРНОУТ. Не забыть взять на завтрашнюю встречу распечатку презентации. МЕТКА «важно». Через пару минут соответствующая заметка с распознанным текстом уже появится в Evernote, и ей будет назначена метка «важно». При этом к заметке будет прикреплен WAV-файл с исходной записью вашего голоса. Стоит отметить, что возможность добавлять заметки голосом доступна даже в базовом аккаунте «Вселисделал», то есть бесплатна для пользователей.


Как привязать аккаунт во «Вселисделал» к аккаунту Evernote?

= (mooning)

= (finger)

Новая программа от Microsoft позволит упростить кроссбраузерную web-разработку.



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

Скачать программу уже можно.

UPD: по ссылке — превью-версия для сравнения только разных версий IE. Превью-версия бесплатна. Представленная картинка отражает интерфейс расширения для Expression Web 3, выход которого только ожидается. Expression Web 3 — это платное средство разработки.

Завершился IX Всероссийский открытый интернет конкурс Золотой сайт 2008.



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

Безусловно, проблем у конкурса тоже достаточно. На лицо сложная и затянутая система голосования. К сожалению, сам сайт конкурса вряд ли получил бы какую-либо премию…

Но! Результаты все равно примечательны, часть из которых и публикую.

Гран-При Конкурса в 2008 г.
"Элементы" — популярный сайт о фундаментальной науке
Разработчик: Defa Studio, Ultratool, Stars Interactive

Гран-При "Дизайн 2008"
Студия дизайна ONY
Разработчик: Студия дизайна ONY

Гран-При "За общее качество работ" 
"ADV/web-engineering"
(Viera in the City ; Независимость Форд ; Независимость LandRover 
Фотоаппараты Lumix ; Интач ; Страховой интернет-магазин РОСНО)
Разработчик: "ADV/web-engineering"

Результаты прочих номинаций.

Вторая версия статьи, расширенная и дополненая.

Большая часть готовилась для моего выступления на «РИТ: Клиентские технологии», куда я, к сожалению, не доехал.

 



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

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

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

Как-то сидя вечером и просматривая Хабр наткнулся на заметку товарища ganzer о том, что человек ищет адекватный к его потребностям конструктор пазлов. Все бы ничего, но я сам, как любитель убить несколько часов за этим занятием, заметил, что в сети нет приятных и «правильных» инструментов для создания простого пазла, который можно тут же собрать.

И тут на задворках сознания начала зудить навязчивая идея. Именно с этого все и началось.

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

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

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

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

Даже и не думал, что это можно сделать, да с такой красивой реализацией на JS. Всё предельно просто: составляется хэш соответствия символов, например «n» перевёрнутая «u» и т.п., для символов у которых нет отражённых копий в алфавите, ищутся соответствия в таблице Unicode. После чего хэш добивается своей реверсированной версией и остаётся только к нему обращаться через функции на эвентах.

«Люди не являются островами в открытом океане». Это высказывание успешно можно использовать особенно в том случае, если вы — дизайнер или разработчик. Несмотря на существование платных средств, как Basecamp и Zimbra, вы можете использовать ещё и бесплатные, которые, пожалуй, не уступают платным (а порой и обгоняют их).

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

В этом посте я постарался собрать все известные мне хаки для css. Многие могут усомниться в их надобности для нормальных современных браузеров, потому как большинство хаков всегда применялись только для IE, но этот пост скорее для любознательных :), в верстке хаки вообще лучше не использовать. Но так или иначе, раз они есть, грех о них не знать.

В отличие от многих хаков для той же Opera, которые также будут обработаны и Safari, я немного изменил код и Opera 9.2, Opera 9.5 и Safari 3 увидят каждый свой css.

Вы наверняка не раз видели javascript-реализации контекстных меню на базе популярных библиотек, таких как jQuery и prototype. А значит обязательно сталкивались с основными их недостатками: неудобностью API, большим количеством кода, требовательностью к ресурсам, любовью к генерации огромного количества html кода. В один прекрасный момент эти проблемы пересилили мою лень и я решил бороться с ними, поставив следующие задачи:

• Минимум html кода, генерируемого для меню (зачем нам засорять ДОМ)
• Лаконичность js кода для создания меню (API вызова без копипасты)
• Оптимум гибкости при работе (многоуровневые, динамически модифицируемые меню)
• Как можно меньше кода в реализации библиотеки (6302 байта в несжатом виде)
• Минимальное количество jQuery-вызовов (чтобы можно было легко от них отказаться тем, кто jQuery не использует)
• Inline-события где это возможно вместо биндов (меньше ресурсов сожрет)

UPD: разместил проект в google code, пользуйтесь, развивайте:
svn checkout js-cmenu.googlecode.com/svn/trunk js-cmenu-read-only

207 флагов-иконок для вашего сайта. Делал для своего проекта, решил поделиться со всеми желающими. Размер 32×32, скоро сделаю 16×16 и 48×48. Файлы названы согласно ISO 3166-1 alpha-2.

Пример:


Лицензия: Creative Commons Attribution 3.0 Unported License.

Скачать (330 кб)