Вчера Стив Джобс рассказал о том, почему на айпаде и айфоне нет и не будет флеша и сгенерированных в среде разработки Adobe Flash программ. Кто-то воспринимает это как ужасное нападение на свободу личности и превращение Стива Джобса в Большого брата. Я считаю, что ничего страшного в этом нет. Я, чей сайт принципиально сделан с использованием Adobe Flash по объективным причинам («вес» самого сайта и правильная отработка всех событий), и кто написал немало постов об этой технологии. Вернемся к объяснению Стива Джобса. Оно четкое, понятное и, если относиться к нему непредвзято, объясняет позицию компании очень хорошо. Особенно хочу подчеркнуть ту часть, где Стив Джобс прямым текстом говорит: айфон и айпад просто не потянут Adobe Flash в текущем виде — батарейки будут садиться как сумасшедшие, процессор будет греться как сковородка, а происходящее на экране все равно будет тормозить. Объяснение, чем отличается для устройства показ видео в H.264 от показа видео во флеше, вообще достойно занесения в справочники. Просто и доходчиво: первое декодируется на специальном чипе, а второе при помощи софта, требуя кучу ресурсов.

Когда я узнал, что мой сайт не будет показываться на моем новеньком айфоне, я даже расстроился. Потом успокоился, поняв, что пользователь все равно не сможет пользоваться красивым разъезжающим меню, основанном на положении мышки на экране, потому что в touch-интерфейсах функции «курсор над объектом» просто не существует. Об этом Стив Джобс тоже упомянул (правда ссылку на мой сайт не дал ;).

Ответ Эдоби

Я ожидал, что Эдоби не вступит в дискуссию, которую ему ненавязчиво навязал Стив Джобс. Они очень много сделали в CS5 для развития интерактивной составляющей и нью-медиа, но сделали это на основе флеша. Мне понятно их недовольство и может даже смущение от того, что они могли стать первой компанией, которая предложит средства для создания интерактивных медиа для, не будем скрывать, скоро самого перспективного рынка планшетных компьютеров во главе с айпадом. Тем не менее, я уверен, что шагом Эдоби должна была стать встреча с Эппл и разговор с тем же Джобсом. Он любит общаться. Поговорить именно о нью-медиа, куда и целился Эдоби (стоит только посмотреть на развитие Индизайна в CS5 и это становится очевидным). Может быть модифицировали бы чуть-чуть формат PDF, и Эдоби снова был бы на коне, а Apple, Wired и Adobe сняли бы очередной ролик о том, как круто журнал Wired сразу попадает из верстки на айпад. Но нет, генеральный директор Эдоби Шантану Нарайен (Shantanu Narayen) решил по каждому пункту ответить «Эппл не правы, а мы тут все д’Артаньяны».

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

На презентации Adobe CS5 все пользовались компьютерами и ноутбуками Apple. На всех мероприятиях Эдоби, на которых мне довелось побывать, используются именно они. Маркус Бледовски (Markus Bledowski), который представлял пакет программ для post production, начал презентацию на каком-то десктопном не-эппл компьютере под управлением Windows 7. Сделал он это, потому что его компьютер — двухлетний беленький макбук. Маркус не выдержал сражения с интерфейсом, как мне показалось, и в дальнейшем демонстрировал все программы и работу с ними со своего макбука, все время повторяя: «Смотрите! Даже на моем белом малыше не тормозит, как круто Эдоби все оптимизировали!».

Впрочем, на Envision Event устроенном Майкрософтом в Праге, почти у всех приглашенных экспертов тоже были ноутбуки Эппл ;)

Я помню как все начиналось и могу рассказать об этом. Давным давно, когда динозавры пользовались модемами, сайты называли домашними страничками, а слово «google» ничего не значило, у сайтов все равно были URL’ы. Мы называли их адресами сайтов и, если хотелось повыпендриваться, могли даже сказать «уникальные адреса веб-узлов, размещенных в глобальной сети Интернет». Программисты, которых сейчас называют айти-специалистами, были предоставлены сами себе в вопросах, касавшихся веб-программирования, что и привело к ожидаемым результатам — странным адресам страниц. Стандартным примером в те времена мог послужить адрес вроде blablabla.com/?sid=23l&pid=ln123&youare=cookiemonster, который иногда был обозначением страницы поиска, а через пять минут уже мог вести в каталог товаров. Тогда словно паладины сил добра без страха в сердце появились новые ребята. Они выглядели странно, занимались только консультациями и называли себя юзабилистами.

Они обозначили конец эпохи Программистских вакханалий и каким-то образом привели к исчезновению динозавров. Было бы удивительно, если бы юзабилисты ничего не сказали об адресах страниц, поэтому они не стали молчать. На камне высекли самое важное утверждение, которое касалось URL’ов: Ибо сказано, что есмь URL и быть ему читаемым и вести постоянно на одну и ту же страницу, дабы любой пользователь или пользовательница могли его разуметь и им обмениваться. Все знают, что любой опубликованный в интернете факт становится достоверным как только его проиндексирует гугл. Так случилось и в этот раз. С того момента люди стали наслаждаться читаемыми и понятными адресами страниц, содержание которых не менялось со временем. Дошло до того, что это прижилось даже на флеш и аякс-сайтах, а адреса определенных страниц или разделов стали выглядеть примерно так: blablabla.com/products/media-and-socialising/you-ve-got-rickrolld.

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

Поскольку никто никогда не относился к буферу обмена очень серьезно, считая, что хранить в нем важную информацию так же умно, как и рабочие документы в корзине, не была предусмотрена защита от несанкционированного копирования в буфер обмена чего-либо из флеш-ролика без ведома пользователя. Осознав это, Adobe сообщил: С этого момента (Flash 10) если пользователю хочется что-то скопировать, то он должен повзаимодействовать с роликом. Буквально: пользователь должен кликнуть на кнопку или ссылку в ролике, чтобы тот мог получить доступ к буферу обмена. Переложив, таким образом, вину за заполнение буфера всякой ерундой на пользователя, Adobe умыл руки.

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

Если нажать на кнопку, то в буфер обмена скопируется текст «http://mega.genn.org/ — schlong is schlonger»

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

1. <object width="636" height="48">
2. <param name="movie" value="copybtn.swf">
3. <param name="flashvars" value='normal=btn0.png&pressed=btn2.png&hover=btn1.png&clipboard=<a href="http://mega.genn.org/">mega.genn.org</a> — schlong is schlonger' />
4. <embed src="copybtn.swf" flashvars='normal=btn0.png&pressed=btn2.png&hover=btn1.png&clipboard=<a href="http://mega.genn.org/">mega.genn.org</a> — schlong is schlonger' width="636" height="48" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
5. </object>

David-m, комментируя пост Юры, заметил, что удобней было бы сделать прозрачный флеш-ролик с теми же функциями, который можно расположить над любым элементом на странице. Я сделал и такой вариант. Из всех параметров, разумеется, остался только clipboard. Если понравилось, то логично будет скачать оба swf’а в архиве (zip, 4 Кбайта).

Однажды утром, когда я дорисовывал логотипы для одних милых ребят, меня поприветствовал Геллер. Его надо было спасать. Каждый может попасть в такую ситуацию: заканчивается кислород в баллоне, а до ближайшего телепорта восемь парсеков, любимая девушка угнала машину с полным багажником кокаина или необходим простенький флеш-ролик. Удивительно, но Артему как раз не хватало ролика с проигрыванием видео. Ничего особенного: первый кадр, по клику на который начинается загрузка видео, а после загрузки оно показывается от начала до конца и останавливается на первом кадре. Если вновь нажать на первый кадр, то видео покажется сначала. Ничего особенного, если не учитывать предзагрузки .flv.

Как добиться загрузки .flv

Когда я написал кусок со всякими NetStream’ами, в голову пришла идея, что все уже сделано до нас. Пятнадцать секунд общения с поисковыми способностями гугла подтвердили мое предположение: ребята из Bloommedia уже придумали «How to preload FLV video in flash with actionscript 2.0». К сожалению, как это отражено и в комментариях к их посту, пример не рабочий: при первом просмотре видео все равно дергается и толку от прелоадера мало. К счастью, все поправимо, и сделать это довольно легко! Ниже пример работы прелоадера и исправленный исходный код, который не только нормально выполняет функции прелоадера, но и позволяет начинать загрузку по клику на видео.

Пример работы flv-прелоадера (размер загружаемого файла 2,6 Мбайта)

Не буду перегружать страницу полным исходным кодом, ведь его можно скачать (.fla, 304 Кбайта). Остановлюсь лишь на существенном отличии от кода Bloommedia.

1. // после того, как состоялась загрузка
2. mns.seek(0); // перематываем на начало
3. // mns.play("dom-kelly.flv"); — так включается проигрывание у Bloommedia. Это неправильно и лишь начинает загрузку заново (ничего не кешируется в большинстве случаев)
4. mns.pause(); // снимает с паузы и начинает проигрывание загруженного ролика (кешируется всегда!)

Итак, если использовать метод NetStream pause(), а не play(), то пользователь не будет обречен наблюдать рывки загружаемого видео. У него все покажется хорошо.

Briefly in English

Just in case any wonderer visited this page in order to make working flv-video preloader, I’ll repeat the main statements.

I found almost working example from Bloommedia. The problem was it didn’t cache the video. To solve it I just replaced play() method after video is loaded with pause() method. Unfixed version worked like this: loaded the whole movie, scrolled to the begining of it, then told NetStream to start loading it again (and playing while loading) in hope, that video was cached. Now it works the next way: after loading the whole movie player scrolls to the begining and starts playing it. Looks brilliant, right? ;)

You can download source of flv-video preloader (.fla, 304 Kbytes).

Все чаще и чаще слышно со всех сторон, что флеш скоро появится на айфоне. На сайте Please fix the iPhone это требование третье по популярности. Что ж, когда Flash завоюет место в iPhone Safari, айфон-версию моего сайта можно будет выбросить в корзину и поджечь ее. К несчастью радость меня не посещает. Флеш появится не раньше,чем Apple разрешит интерпретаторы интерпетируемых языков программирования (это не тавтология). Когда произойдет это эпохальное событие, а оно вполне может произойти, ведь NDA для разработчиков уже отменили, настанет эра вселенского покорения самых отсталых уголков мира айфоном. Java — интерпретируемый язык. Можно будет портировать кучу всякой ерунды с WM безо всяких проблем одним кликом мышки. Если вы спросите меня, почему медлит Apple, то я отвечу, что не знаю. Может быть они разрабатывают новые интерпретаторы, а может вырабатывают собственную концепцию противоречия миру. Время покажет. Не так давно мы верили, что за кассетами будущее, но пришли уменьшенные и более технологичные версии пластинок в виде DVD и CD. Посмотрим, что подарит нам завтрашний день и Apple.

Неаккуратно сделанный флеш-ролик всегда можно узнать по присущим только флешу «водяным знакам качества»: возможности выделить мышкой текст на кнопках и отчаянному пикселению невекторных объектов. Порой, конечно, приходится ухудшать качество, чтобы не сильно грузить процессор, но это не то, о чем я говорю. Речь о свойстве Allow smoothing у находящихся в Library растровых изображений. Что же делать, когда эти изображения не в библиотеке символов?

С включенным свойством «Allow smoothing» (пункт «Properties…» контекстного меню растрового объекта в библиотеке) фотографии всегда будут выглядеть дружелюбно (одно из значений слова «smooth»)

Неожиданные преграды и их нетрадиционное преодоление

В субботу утром я решил помочь американским товарищам с сайтом, на котором представлены красивые фотографии красивых машинок. Специфика представления фотографий подразумевала изменение их размера в зависимости от размера окна броузера. Ничего особенного, если не считать, что вплоть до восьмой версии флеша Macromedia, а нычне Adobe, их авторы так и не удосужились дать возможность allow smoothing для динамически подгружаемых растровых изображений.

Достаточно навести курсор на изображение Mini, чтобы увидеть, как плохо выглядят растровые изображения с измененными начальными параметрами (угол наклона, размер) без сглаживания во флеше

Update (спасибо, Женя)
Начиная с девятой версии флеша есть свойство movieClip.forceSmoothing. Когда оно равно true, изображение изменяет свой размер со сглаживанием. Дальнейший текст не убираю для истории и флеша младше девятой версии, но проблема решается куда проще: movieClip.forceSmoothing=true.

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

1. import flash.display.*; // подгружаем необходимую для работы с BitmapData библиотеку
2. _root.createEmptyMovieClip("pic",_root.getNextHighestDepth()); // сюда поместим картинку со сглаживанием
3. _root.createEmptyMovieClip("tmpic",_root.getNextHighestDepth()); // в этот символ загрузим jpeg
4. _root.tmpic._visible=false;
5. … // опускаем код прелоадера, файл загружается в _root.tmpic
6. … // дальнейший код выполняется после завершения загрузки изображения
7. var bitmap:BitmapData = new BitmapData(
8. _root.tmpic._width,
9. _root.tmpic._height,
10. true);
12. _root.pic.attachBitmap(
13. bitmap,
14. _root.pic.getNextHighestDepth(),
15. "auto",
16. true); // этот параметр включает сглаживание
18. bitmap.draw(_root.tmpic); // переносим фотографию на холст ;)

Пример рабочий, проверено на себе. Поскольку я никак не могу заставить себя полностью перебраться на AS3, программный код написан для Action Script 2, да и требования к сайту вынуждали пользоваться именно этой версией. Но настанет тот час, и я чувствую, что очень скоро, когда я буду вынужден портировать этот код, и не только его, на Action Script 3 или даже выше ;)

***

Я уверен, что не открыл революционный способ (поиск по интернету показал, что я не один такой умный). Тем не менее, уверен, что это простое решение наверняка будет полезным, ведь вопросы об этом мне задают с завидной регулярностью.

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

Хочется верить, что в ожидаемом и анонсируемом Flash CS4 встроят не только поддержку 3d (да-да, там будет какой-то псевдо-трехмерный инструментарий), но и кучу недостающих мелочей. Таких как, например, dynamic image smoothing, который появился в Flash CS3.

Воскресным утром я осуществил то, что давно собирался сделать: всерьез взялся за Action Script 3. Разобравшись в синтаксисе и принципах я решил сделать что-то простое и ненавязчивое, но в то же время дающее подергать за самые частые задачи, которые приходится делать, создавая флеш-сайты или флеш-приложения. Ничего сложного в AS3, кроме огромного количества файлов для любого хоть чуточку серьезного проекта, нет. Мало того, всплыли воспоминания о юности, в которой я стал магистром технических наук и software engineer — дорвавшись до нормального объектно-ориентированного программирования я забыл о еде, питье и вообще почти обо всем.

Теперь о поставленной себе задаче. Вчера за quattro formaggi Юра рассказал об интересном посте, который он сейчас пишет. Я предложил проиллюстрировать, что одну из описываемых задач оптимальнее всего делать на флеше. Этой задачей я и занялся, сделав флеш-ролик используя AS3. Если бы я писал на AS2, то все заняло бы не более 20 минут. С копанием в устройстве и работе Action Script 3 я справился за 40 минут. Итак, что же я делал.

На экране есть несколько блоков, они могут располагаться друг за другом таким образом, чтобы всегда оптимально заполнять окно. У них есть максимальная ширина, но они могут изменять ее в меньшую сторону и прыгать со строки на строку. Картинка ниже сделает это объяснение более понятным:

Приводить весь первоначальный код не буду, он слишком велик для публикации просто так в посте. Кто хочет, может скачать и полюбоваться. Первоначальный же .fla не сохранился, но он не так уж необходим ;)

После компиляции флеша я получил аккуратный файл размером 4 Кбайта, отправил Юре и отправился читать Dark Blue Воррена Эллиса (Warren Ellis). После прочтения комикса мне захотелось решить какую-нибудь головоломку и я взялся за оптимизацию флеш-ролика. Достигнуть желаемых 1024 байтов мне не удалось, но результат получился удовлетворительный.

Оптимизация символов

Первым делом я, разумеется, убрал встраивание шрифта, которым показывались цифры. Для этого достаточно и _sans. Само текстовое поле сделал шириной в два символа и удалил единицу, которую написал в нем еще при создании. Половину размера как рукой сняло ;)

После этого, я избавился от всех групп: вместо размещения блика в группе над нижней плашкой, я поднял его в слой повыше, сэкономив несколько байтов. Везде, где это было возможно, я убрал прозрачность: Alpha: 100% и никаких возражений!

Оптимизация имен

Следующим шагом стала оптимизация имен. Текстовое поле из txt стало просто t, buttonBackground — b и так далее. Это также сэкономило несколько десятков байтов. Функция arr(e:Event) в файле main.as стала называться просто a(e:Event). Поскольку она вызывается при изменении размеров окна listener’ом, это помогло уменьшить размер результирующего swf. Изменения же имен переменных никакого влияния на размер файла не оказали бы.

Оптимизация исходного кода

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

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

1. var colw:Number=Math.floor(stage.stageWidth/cols);

то после того, как она стала int, операция / взяла на себя функции целочисленного деления:

1. var colw:int=stage.stageWidth/cols;

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

1. stage.addEventListener(Event.RESIZE, a);
2. …
3. function a(e:Event):void {
4. var cols:int=Math.ceil(stage.stageWidth/300);
5. var colw:int=stage.stageWidth/cols;
6. for (var i:int = 0; i < 30; i++) {
7. var nB:Object=getChildAt(i);
8. nB.b.width=colw;
9. nB.x=i%cols*colw;
10. nB.y=Math.floor(i/cols)*43;
11. }
12. }

Для вызова этой функции в конструкторе пришлось добавить следующее:

1. var e:Event;
2. a(e);

Эта конструкция добавила 2 байта к размеру swf, но до этого мы сэкономили гораздо больше.

В конце-концов я убрал проверки деления на ноль (флеш даже не поморщился) и скомпилировал проект снова. Юра предостерег меня, чтобы я не увлекся и не сделал оптимизацию настолько хорошей, что swf станет отрицательного размера. Мир в безопасности: БАК запущен, а файл с отрицательным размером у меня не получился. После всех манипуляций swf стал занимать 1149 байт. Больше в нем оптимизировать нечего. Для сравнения можно скачать получившийся проект (zip, 12,7 Кбайта). Мне кажется, что оптимизировать там уже нечего ;)

Ежегодно в Калифорнии (а где же еще?) собирается около 1000 человек, которые могут и хотят поделиться интересной информацией. Принимает их TED. Это неэлитарная элитарная конференция, где люди, меняющие облик и дух современной жизни, выступают в роли то ли stand-up комедиантов, то ли университетских профессоров.

Глядя на на имя и профессию докладчика, даже если знаешь, что он снял сериал, завоевавший сердца многих, и Cloverfield, или создал самую популярную поисковую систему и раздражающий AdSence, или даже просто написал очень популярную книгу, сложно угадать о чем пойдет речь.

— Вот ваш кокаин. Спасибо, что без сдачи. Свободная каса!

Я просмотрел далеко не все (просмотрю ли вообще когда-нибудь?), но мне особенно запомнился Стивен Левит (Steven Levitt) и его анализ нарко-экономики под названием «Почему наркодельцы все еще живут с родителями?». Он сравнивает банды с Макдональдсом и находит больше совпадений, чем можно себе представить.

Аудио-запись выступления можно скачать в mp3 или добавить в iTunes. Видео тоже можно добавить в iTunes или же скачать mp4 в упакованном виде (zip).

Несмотря на то, что докладчики выступают перед очень неоднородной аудиторией, каждое выступление — настоящий подкаст. Так что кроме информационной цели, TED полезен еще и с практической: при подготовке выступления перед публикой или записью подкаста полезно посмотреть как разнообразную информацию можно подать в понятной и интересной для всех форме.

***

Все ролики можно скачать в формате mp4, что, несомненно, сделает обладателей айфонов и айподов счастливыми. Для тех, у кого нет времени смотреть, но часто свободны уши, есть версия в mp3.

Update

Вот еще два замечательных выступления о том, как создавать и выводить продукт на рынок.

Кетчуп, горчица, другие соусы

Малкольм Гладуэлл (Malcolm Gladwell) про соус для спагетти.

Скачать в разных форматах можно на TED ;)

Розовая корова с соевым молоком

Сет Годин (Seth Godin) рассказывает о том, что производитель должен выделяться и делать интересные продукты, чтобы провоцировать otaku как метод коммуникации с потребителем. Что это? Расскажет Сет.

Скачать в разных форматах можно на TED ;)

genn.org в Mac OS X Safari и iPhone Safari

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

1. <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
2. <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="css/iphone.css" />

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

xHTML выглядит так:

1. <div id="magic">
2. <!-- тут флеш -->
3. </div>
4. <div id="style">
5. <!-- тут контент для айфона -->
6. </div>

В css-файле не для обычного броузера написано, что надо спрятать div по имени style, а в css-файле для айфона написано, что надо спрятать magic. Вот, похоже, и все. Спасибо Юре за помощь ;)

Не получается

Если сайт все равно не выглядит на айфоне так, как задумывалось, а спрятался в уголке и ждет пока его увеличат, или, что тоже бывает, растянулся на весь экран, то следует добавить следующую строку в заголовок xhtml-файла:

1. <meta name = "viewport" content = "width = device-width">

Для того, чтобы не дать пользователю увеличивать и уменьшать сайт на экране, надо добавить user-scalable = no:

1. <meta name = "viewport" content = "width = device-width, user-scalable = no">

В следующий раз расскажу о некоторых хитростях создания сайтов для айфонов, чтобы пользователи падали от восторга в обморок ;)

Вчера мы с Акеллой по очереди рассказывали интересные вещи в G-Club. Акелла интересно и подробно рассказал о микроформатах, красиво показав, что это не больно и даже интересно. Я же показал на примере нескольких сайтов, как важно понимать для чего создается веб-сайт и как им будут пользоваться. Мастер-класс увенчался четырьмя правилами создания хорошего веб-сайта.

Презентацию можно скачать в формате PDF (2.2 МБайта)

К сожалению, фотографий еще нет, а сам я на 10 дней улетаю из Украины. Надеюсь, что к моему возвращению уже смогу показать, как мы сидим с микрофонами и умным видом, глядя в iBook и MacBook Air, и рассказываем что-то крайне интересное. Было приятно встретить знакомых, надеюсь, друзья, что вам понравилось!

Место проведения — G-Club — довольно интересно. Там бесплатные пиво, орешки и игровые приставки. Жаль, что такого не было, когда я учился в университете, тогда я бы точно проводил там с однокурсницами все время, особенно на этапе создания курсовых работ ;)

***

Сегодня утром Юра сбросил ссылку на 7 Essential Guidelines For Functional Design. Советую прочесть, это более развернутое описание тех правил, что я привел в конце мастер-класса. Просто great minds think alike ;)

Теперь моим сайтом и блогом можно любоваться и с айфона. При этом, если добавить любой из них на экран телефона в виде иконки, он будет обозначен своей уникальной красивой стеклянной пиктограммой (их хорошо видно на картинке вверху). Поскольку сеть изобилует ложными рекомендациями о том, как добиться такого результата (я про иконку), дальше я открою тайны правильного создания красивой пиктограммы. В завершение будут представлены скриншоты трех сайтов для айфона. Два из них рисовал я, а третий (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-страницы следует добавить одну строку:

1. <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 он не верстал ;)