Уличная типографика теней

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

DAKU типографика

“The work is changing, the wall is changing. Everything around us is changing constantly. That’s the law of the universe”

DAKU

DAKU

Мобильная версия ★ unicode-table.com на всех прилавках страны

Почему нужна мобильная версия

В последнее время Google всё настойчивей стал присылать уведомления: 

«Сайт не оптимизирован для мобильных устройств. У посетителей складывается плохое впечатление о ресурсе. Эти страницы не считаются оптимизированными для мобильных устройств с точки зрения Поиска Google, и они будут отображаться и ранжироваться в результатах поиска на смартфонах соответствующим образом.»

Проще говоря, сайт опустят глубоко вниз. Новый мобильный фактор, как говорит руководство Google, включён в алгоритм, чтобы пользователи получали более релевантные результаты, оптимизированные под мобильные устройства. Мы согласились. Тем более что стали терять пользователей, да и самим давно хотелось пользоваться UT с телефона.

Стали выбирать решение:

  1. Мобильное приложение;
  2. Отдельная мобильная версия на поддомене;
  3. Адаптивная вёрстка, подстраивающаяся под разрешение любого устройства.

Создавать мобильное приложение дорого и долго. А, главное, никак не решает проблему отсутствия мобильной версии сайта (а следовательно, низких показателей в поиске). Третий вариант рекомендуется Google как оптимальный.

Что делать с главной страницей

Пользоваться unicode-table.com на телефоне действительно было затруднительно. Мелко. Неудобно. Зависает. Мы решили отказаться от полной таблицы в мобильной версии. И сосредоточиться на удобном поиске. Функционал мобильной версии получался другим, поэтому адаптив бы нас не спас и мы сделали отдельный сайт на поддомене.

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

Главная страница unicode-table в телефонеМобильная версия unicode-table.com

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

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

  1. Лого (для идентификации ресурса и возможности перейти на главную);
  2. Поле поиска. От кнопки «Найти» решено было отказаться;
  3. Основное меню в виде иконки гамбургера.

Технические моменты

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

Первая проблема с которой мы столкнулись на айфоне — никак получалось выделить ячейку с нужным символом. При удержании пальца на экране, выделение работало как угодно, только не так как нужно. Чаще всего выделялся целый блок (родительский <div>), а иногда произвольный набор символов. И лишь изредка выделялся тот самый, в который жмёшь. Помучившись несколько дней и попробовав разные варианты вёрстки вплоть до табличной, мы вспомнили, как работает выделение на сайтах с большими текстами: телефон стремится выделить абзац. Так родилось решение — заключить каждый символ в отдельный тег <p>. Телефон стал думать, что каждый символ — это самодостаточный абзац и выделять только его.

Выделение на телефонеВыделение на айфоне

Во-вторых, нужно было как-то объяснить Google, что m.unicode-table.com — это не новый сайт на поддомене, а всего лишь мобильная версия уже существующего сайта. Чтобы Google склеил новые мобильные страницы с уже существующими. Решение обнаружилось в справке Google.Developers

На обычной странице (http://www.example.com/page-1) нужно добавить следующий код:

<link rel="alternate" media="only screen and (max-width: 640px)"
      href="http://m.example.com/page-1" >

а на странице для мобильных устройств (http://m.example.com/page-1) такие атрибуты:

<link rel="canonical" href="http://www.example.com/page-1" >

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

При первом заходе на сайт с мобильного устройства, пользователь переадресуется на мобильную версию. Если после этого он возвращается по ссылке «Перейти к полной версии», это запоминается и автоматический переход больше не происходит. Определение устройства производится с помощью HTTP-заголовка User-Agent. Примеры определения устройства по этому заголовку для разных языков программирования можно увидеть на сайте: http://detectmobilebrowsers.com/

У нас получился отдельный домен для основной версии сайта, отдельный для мобильной версии и ещё один для статических файлов, таких как CSS и JS. Из-за политики безопасности браузеров это может нести некоторые проблемы, когда, например, не отображаются некоторые шрифты, подключаемые с соседнего поддомена. Это решается с помощью специального HTTP-заголовка, в котором перечисляются «доверяемые» домены:

Access-Control-Allow-Origin: http://one.example.com, http://two.example.comp

Почему unicode-table.com лучше, чем стандартные символьные клавиатуры на телефоне

1. Стандартные клавиатуры есть не у всех. На айфонах они появились только с iOS версии 8.3.
2. В стандартные клавиатуры входят только значки Emoji. А у нас в поиске все 70 000 символов.
3. UT — это отечественный продукт. Не содержит красителей, консервантов и ГМО.

m.unicode-table.com

 

Мы запустили таблицу символов Юникода

Мы запустили бета-версию таблицы символов Юникода: unicode-table.com
Это информационно-познавательный ресурс про буквы, символы, письменности и всё, что с ними связано.

Что у нас есть, чего нет ни у кого:
— вся таблица на одной странице с клёвой подгрузкой;
— перевод названий всех русских символов;
— географическая привязка той или иной письменности к карте мира.

Что ещё хорошего:
— можно легко перейти к любому разделу и диапазону; можно подсвечивать;
— работает русская и английская версия;
— можно отправить ссылку на любой символ или диапазон, скопировав их из адресной строки;
— работает поиск символов и разделов.

Планы развития:
— перевод на другие языки;
— сделать нормальный поиск;
— перевод всех иероглифов;
— сделать индикатор, показывающий ваше текущее положение при промотке таблицы;
— сделать так, чтобы все символы отображались на любых платформах;
— подготовить интересные наборы символов (кроме «чаще всего ищут»);
— сделать подробные описания разделов, письменностей;
— добавить другие плоскости Юникода (после 65 000 символов);
— оптимизировать скорость загрузки страниц и провести рефакторинг;
— много других мелких улучшений.

Кто участвовал в создании проекта:
Сергей Асанов: идея, дизайн, вёрстка
Олег Григорьев: всё программирование, внутренняя структура, система контроля версий
— Александра Палашина: страны, разделы и их описания на всех языках, часть символов в русской локализации
— Анна Кривоносова: все символы в русской локализации

Любые идеи по развитию сайта, можете оставлять здесь или на самом сайте во вкладке «Отзывы и предложения».

Если вам симпатичен этот проект, вы можете перевести нам любую сумму:
Яндекс.Деньги: 41001178031043
Вебмани: R127589510153

Знаете другие языки и хотите внести свой вклад? Мы ищем тех, кто сможет перевести интерфейс, названия разделов и символов на языки:
немецкий (занято)
— испанский
— китайский
— японский
— любые другие языки...

Есть вопросы? Хотите принять участие? Пишите: sa@unicode-table.com

перевернутый текст — ɯɔʞǝɯ ņıqɯʎнdǝʚǝdǝu

˙˙˙ʎʚоvоʟ ɐн ʟон ɔ ǝɔʚ qɯиʚɐɯɔ ǝɯиƍoıv ǝжоɯ ıqʚ иvɔǝ

Недавно я задался вопросом, можно ли писать вверх ногами. Открой фотошоп, скажите вы мне, переверни текст на 180 градусов и вот тебе пожалуйста. Но хотелось, чтобы это была не картинка, а настоящий текст, который можно скопировать и отправить другу. 
Так я открыл любопытный метод, уже реализованный до меня, правда только на английском. Принцип прост: в таблице символов юникода есть очень много символов для отображения самых разных языков. И некоторые эти символы очень похожи на наши буквы перевёрнутые вверх ногами. Оставалось лишь составить таблицу соответствия. Самые большие проблемы возникли с буквами «г», «з», «щ» и «ъ» . Но и их я кое-как решил. Для тех, кто хочет, можно попробовать перевернуть текст вверх ногами.

Метаморфозы «ё»

Афанасий Фёт

Многострадальная в нашем отечестве буква ё натерпелась изрядно. Из-за сложности написания (лени?) она постепенно исчезла из таких известных фамилий, как Фет, Рентген, Черчилль, Рерих, Пастер. Но совершенно удивительным образом периодически появлялась там, где её не должно быть. Например, в фамилии шахматиста и чемпиона мира Алехина и в словах бытие или опека.

Почему буква Ю на самом деле буква Ё

Юрий Гордон, основатель самой известной в России студии шрифтов «Леттерхед», вчера в Этажах рассказал о себе и своих работах. Интересно, что буква Ю на самом деле должна быть буквой Ё.
Когда-то русская У писалась так:

у

соответственно Ю (ЙУ) выглядела так:

ю

Естественно, быстрее и удобнее писать соединяя буквы, поэтому очень скоро между I и O появилась перемычка, правда сначала она была вверху:

ю

А со временем буква У куда-то затерялась, а осталась буква О, которой там быть не должно и Ю стала такой, какой мы её знаем:

ю

Хотя, на самом деле, получается, что Ю — это вовсе не ЙУ, а ЙО, т.е. буква Ё.