айТриптих
Теперь моим сайтом и блогом можно любоваться и с айфона. При этом, если добавить любой из них на экран телефона в виде иконки, он будет обозначен своей уникальной красивой стеклянной пиктограммой (их хорошо видно на картинке вверху). Поскольку сеть изобилует ложными рекомендациями о том, как добиться такого результата (я про иконку), дальше я открою тайны правильного создания красивой пиктограммы. В завершение будут представлены скриншоты трех сайтов для айфона. Два из них рисовал я, а третий (mega) — обработанный плагин WPtouch.
Иконка на home screen телефона iPhone или плеера iPod Touch
Нет ничего сложного в изготовлении подходящего файла. Неплохого результата можно добиться, если создать PNG размером 129 х 129 пикселей.
По всему интернету разбросаны размеры сторон иконок от 48 до 69 пикселей (for best results), но мы-то с Apple Inc. знаем их правильные длину и ширину
Update (спасибо r3s3t)
Не смотря на то, что иконка на сайте Apple размером 129 на 129 пикселей, в руководстве разработчика указан размер 57 x 57 пикселей при разрешении 72 ppi. Действительно, в таком размере каждый пиксель на своем месте. Надо отдать должное алгоритмам уменьшения картинки — 129 х 129 пикселей сжимаются в 57 х 57 пикселей настолько хорошо, что не используя пиксельную графику и не разберешься.
Откуда же взялся размер 129 х 129 пикселей? Может он используется для айтьюнса или это задел для будущих разработок? Увидим ;)
После того, как файл будет на сервере, в заголовок каждой html-страницы следует добавить одну строку:
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
/apple-touch-icon.png — имя и путь к файлу с иконкой
После всех этих процедур айфон поймет что за картинку ему использовать, обрежет ей уголки и заключит в стеклянный контейнер.
mega.genn.org
genn.org | reborn
Hack & Dev
Совершенно случайно помог на выходных farcaller‘у сделать сайт, посвященный замечательным разработкам его команды для айфона. В принципе, с этого сайта и начались все переделки моих ресурсов ;)
***
iPhone-версии genn.org, iphone.hackndev.org и apple.com сверстал Акелла. Хотя, постойте, Apple он не верстал ;)
