Я давно интересовался техникой Apple - да и сейчас плотно с ней пересекаюсь по работе. Техника хорошая, но она породила культ.
А всегда находится кто-то, кто над этим культом смеется.
Команда Joy of Tech - как раз такие ребята. Регулярно рисуют комиксы, от которых порой уписатся можно.
Вот адрес - http://www.geekculture.com/joyoftech/index.html
Правда, все на английском, и надо быть хоть немного "в струе", чтобы понять что к чему. Зато смешно!
Но есть в нем одна недоработка. Один неуддобный момент. Юзабилити-недоработка.
А именно:
когда в Chrome открыта только одна закладка, и мы нажимаем на кнопку закрытия этой закладки, то закрывается весь браузер.
Неудобно. Приходится наново запускать Chrome - то есть, тратить лишнее время.
Приходится вновь загружать Flash IDE, в сотый раз все проверять, находить ошибки - исправлять - выкладывать в сеть, и... О, черт! Снова что-то не так!
Чтобы упростить отладку роликов, их можно отлаживать прямо онлайн. Конечно, полнофункциональный Debugger - как в Flash IDE - будет недоступен. Но у Вас будет возможность писать в лог-файл все сообщения, которые Вы в ролике выводите с помощью команды trace().
Другими словами, Вы сможете получить то же, что и в окне Output во время выполнения ролика - но только при выполнении с сайта, онлайн.
Все, что для этого понадобится - установить себе специальный Flash Player Debug. Это версия, предназначенная для FLEX-разработчиков (FLEX выполняется с помощью обычного флеш-плеера). Разумеется, сама среда FLEX нам не понадобится - нам нужен только Flash Player Debug.
Итак, по шагам, что и как надо сделать, чтобы получить возможность отладки flash-роликов (.swf) в онлайне.
Скачать этот плеер можно бесплатно, со страницы сайта Adobe - http://www.adobe.com/support/flashplayer/downloads.html
На картинке ниже показано, где на данной странице находится этот плеер - он есть в версии под Internet Explorer, и под Nescape-совместимые браузеры (Firefox, Opera). Ну и плюс под Мак и Linux:
Перед установкой данного плеера Вам необходимо удалить из системы Ваш текущий - обычный - flash-плеер. В Windows это можно сделать либо через "Панель управления/Установка и удаление программ", либо с помощью специального деинсталлятора от Adobe. Получить его можно на странице http://kb2.adobe.com/cps/141/tn_14157.html
Там же есть и инструкции - правда, на английском. Но думаю, никаких проблем у Вас не возникнет - просто перед деинсталляцией надо закрыть ВСЕ программы, которые могут использовать Flash - браузеры, мессенджеры (типа ICQ), отдельно открытые SWF-файлы и пр.
После установки Flash Player Debug запустите браузер, и откройте какой-нибудь флеш-ролик. Над роликом откройте контекстное меню Flash-плеера. Там должны быть пункты меню "Отладчик" и "Показать области перерисовки" (как на картинке ниже):
Если есть - все окей, плеер установлен.
А именно.
Сперва надо прописать файл конфигурации. Но в строго определенное место - в папку, которая назначена в системе как домашняя для текущего пользователя.Обратите внимания - как правило, в системах Windows эти переменные уже заданы, и указывают на домашнюю папку того пользователя, под которым Вы работаете в системе.
То есть - C:\Documents and Settings\<имя-пользователя>.
В самой системе Windows местоположение данной папки задается с помощью т.н. переменных системного окружения - HOMEDRIVE и HOMEPATH. Но если хотите проверить наверняка - нажмите на меню "Пуск", выберите пункт "Выполнить...", введите cmd и нажмите Enter. Запустится интерпретатор командной строки. В нем введите команду set и вновь нажмите Enter. Перед Вами появится список всех переменных системного окружения - включая их имена и значения. Найдите там HOMEDRIVE и HOMEPATH. Они и задают то место, куда надо прописать файл конфигурации. Если же этих переменных в списке нету, то их надо задать принудительно. Для этого следует нажать правой кнопкой мышки на иконке "Мой компьютер", и выбрать "Свойства". Затем в открывшемся окне перейти на вкладку "Дополнительно", и там - почти в самом низу - нажать на кнопку "Переменные среды". Во вновь открывшемся окне следует создать две указанные переменные. Для этого нажимаем кнопочку "Создать" в верхнем блоке ("Переменные среды пользователя для <какое-у-Вас-там-имя>"), и заполняем два поля. Верхнее - имя переменной (HOMEDRIVE или HOMEPATH), второе - ее значение. Для примера: HOMEDRIVE C: HOMEPATH \Documents and Settings\<имя-Вашего-пользователя> После создания переменных перегрузите компьютер. |
Итак, будем считать, что у нас уже задана папка для файла конфигурации - C:\Documents and Settings\<имя-пользователя>.
В этой папке нам надо создать текстовый файл, который называется mm.cfg.
В нем следует прописать несколько настроек (каждая с новой строки):
TraceOutputFileEnable=1 ErrorReportingEnable=1 MaxWarnings=500
Параметр TraceOutputFileEnable определяет, будут ли выводится в лог те строки, которые вы в Flash-ролике формируете с помощью команды trace(). Если этот параметр равен 0 (т.е. TraceOutputFileEnable=0) - то эти строки в лог выводится не будут. Если 1 - будут.
Параметр ErrorReportingEnable определяет, будут ли выводить в лог сообщения об ошибках воспроизведения. Если они Вам не нужны - можете их отключить (т.е. прописать ErrorReportingEnable=0).
Параметр MaxWarnings определяет, сколько строчек сможет записать в лог-файл Flash Player Debug. По умолчанию это значение равно 100 - после чего новые строки в лог не пишутся. На примере выше мы задали ограничение в 500 строк. Кстати, если прописать MaxWarnings=0, то мы снимем всякое ограничение на длину лога.
Важно - при каждом новом запуске Flash Player Debug содержимое лога уничтожается.
Раньше, до апдейта 9-й версии Flash Player Debug местоположение лог-файла можно было задать самому - прописав его в файле конфигурации mm.cfg (использовался параметр TraceOutputFileName=<полный-путь-к-файлу/имя-файла>).
Но теперь местоположение и имя файла жестко зафиксированы.
Называется он flashlog.txt.
В системах Windows 95 / 98 / ME / 2000 / XP этот файл находится по адресу C:\Documents and Settings\<имя-Вашего-пользователя>\Application Data\Macromedia\Flash Player\Logs
В системе Windows Vista лог-файл лежит по адресу C:\Users\<имя-пользователя>\AppData\Roaming\Macromedia\Flash Player\Logs
(Если Ваша домашняя папка на другом диске - или называется вдруг по другому - что можно проверить по значению переменных HOMEDRIVE или HOMEPATH, о которых упоминалось Выше, то начало пути надо поменять на тот, что задан этими переменными.)
Открываем Flash IDE, создаем новый документ, и в первом кадре нашего единственного слоя вписываем ActionScript - что-то наподобие:
trace("Test message from Flash"); var a=10; var b=20; var c=a+b; trace("c = " + c);
Нажимаем Ctrl+Entrer, смотрим, все ли в порядке. Появится окно Output, где будет результат наших команд trace().
Перед тем как сделать Publish ролику, чтобы протестировать его онлайн, не забудьте в настройках публикации (Ctrl + Shift + F12) разрешить отладку для скомпилированного файла. У меня - во Flash IDE 8 она называется Debagging Permitted. У Вас же - если версия IDE более новая - может называться по другому. Например, Enable Debugging. Если ее не включить, в лог-файле может ничего не появится.
Затем загружаем наш ролик в веб (с помощью любого доступного способа внедрения в html - через JavaScript, тег <object> или <embed>) - и смотрим в лог-файл.
И видим:
Test message from Flash c = 30
Вот и все. Осталось дело за малым - выводить с помощью trace нужные нам значения переменных, находить ошибки, исправлять и наслаждаться корректно работающими флеш-роликами.
В общем, удачной Вам отладки flash-роликов онлайн!
Вставить на html-страницу звук, чтобы он проигрывался стандартными средствами ОС, довольно просто. Для этого достаточно использовать тег:
<embed type="audio/x-mpeg" src="музыкальный-файл.mp3" autostart="true" controller="true"> </embed>
Особое внимание надо обратить на параметр controller="true" - если его не поставить, возникнет некоторая несовместимость с браузерами на Маке - они будут проигрывать звук средствами QuickTime, но не будут отображать стандартный контроллер (полосу прокрутки и кнопку play/start).
P.S. Для еще большей совместимости тег <embed> можно обернуть тегом <object> - хотя и без него все работает довольно гладко, даже на iPhone.
Так что - жаль...
В знак почтения давайте послушаем (и посмотрим) его отличную песню "Do you remember the time" ("Помнишь ли ты то время?" - ссылочка на клип на YouTube)
К примеру, пришлось по работе скопи-пастить визуальный вид одной промо-странички. И понадобилось отключить обтекание текста для некоторых картинок. С таблицами возиться неохота - там было много картинок, пришлось искать решение через CSS.
И чтобы Вам не пришлось проделывать то же самое (искать, имеется в виду) - вот готовое решение.
Итак,
Если мы просто возьмем, да и пропишем у тега с картинкой атрибут align="left" (выравнивание по левому краю), то нас ждет разочарование (как на верхнем примере на картинке). Текст, дойдя до края картинки, начнет ее обтекать (или "обволакивать", если по другому выразиться).
Но если для картинки прописать стиль style="float: left" (т.е., тег картинки будет выглядеть как <img src="наша-картинка.jpg" width="137" height="200" style="float: left">); а затем для текста, который рядом с картинкой (для параграфа) укажем стиль style="overflow:hidden;" (<p style="overflow:hidden;">) - то текст картинку обтекать не будет.
Вот как все выглядит на практике:
P.S. После того, как Вы отключите обтекание, то увидите, что текст прижимается прямо к картинке. Что, конечно же, не есть хорошо. Поправить это довольно просто - надо для текста (для параграфа) дописать стиль padding-left:10px; - ну, или сколько вы там пикселей (или пунктов, или процентов) хотите. Да и все дела.
Парочка примеров:
Делая html-версию сайта на флеше, столкнулся с затруднением (так сказать, на ровном месте) - ссылки, переопределенные через css, не хотят изменять свой вид при наведении после того, как один раз уже были посещены.
Срочно пустился в поиски - как корректно прописать css для нескольких видов ссылок (ну типа одини для меню, другие для текста и пр. - то есть как корректно прописать несколько классов ссылок).
Наткнулся на очень хороший сайт, где есть много полезного про CSS (ну и другая байда есть, по Фотошопу, SEO и пр.)
Вот адресок: http://vremenno.net/
Там куча всяких статей, особенно интересные про то, как сделать при помощи CSS блоки с закругленными углами.
P.S. Эх-ма, блин...
На данном сайте решения не нашлось, но оно все таки есть.
Просто с CSS я в последний раз работал лет 5 назад. А он, оказывается, сильно продвинулся.
Раньше (по старой памяти) достаточно было прописать*:
a:link {color:#BDD262; text-decoration: underline;} a:hover {color:#ffffff; text-decoration: underline;} a:active {color:#BDD262; text-decoration: underline;} a:visited {color:#BDD262; text-decoration: underline;}
И все, даже если ссылка была посещена, то при наведении курсора она все равно принимала то значение, которое задано через a:hover.
* Небольшое примечание - эти ссылки выводятся на черном фоне.
А теперь у этих свойств появились свои подсвойста, и надо их напрямую указывать. То есть, теперь есть не просто ссылка, а "ранее посещенная ссылка, на которую наведен курсор", "ранее посещенная ссылка, которая в текущий момент является активной и т.д.". Видимо, это и есть CSS 3 (м-да, отстал от стандартов...)
Ладно, лучше покажу код, который заработал:
a:link {color:#ffffff; text-decoration: none;}
a:hover {color:#BDD262; text-decoration: none;} a:link:hover {color:#BDD262; text-decoration: none;} a:visited:hover {color:#BDD262; text-decoration: none;} a:active {color:#ffffff; text-decoration: none;} a:visited:active {color:#ffffff; text-decoration: none;} a:visited {color:#ffffff; text-decoration: none;}
Вот, в принципе, и все.
Делаю сейчас один флеш-сайт на заказ, и столкнулся вот с одной интересной проблемой.
Главная страница сайта содержит только flash-ролик, без всяких текстовых ссылок типа "html-версия" - хотя сама html-версия есть. Просто ссылка на нее ведет из флеш ролика :)
Ну, заказчику не понравилось, что внизу под роликом еще что-то написано...
Flash-ролик вставлен на страницу с помощью тега <embed> - для максимальной совместимости с различными браузерами. (Пробовал и через <object>, и через JavaScript - но все эти методы не дали нужного результата - то с каким-то браузером не совместимо, то выравнивание ролика не такое, как надо). Так что остановился на теге <embed>, плюс добавил альтернативное содержание в <noembed> (код приведу ниже).И собственно проблема - при попытке просмотреть сайт на iPhone (а это в данном случае критически важно - имеется в виду просмотреть html-версию) - мобильный Safari по какой-то непонятной причине не обрабатывает тег <noembed>. Как известно, Safari на iPhone и iPod touch флеш не поддерживает - то есть, по идее, он должен был бы отображать именно альтернативное содержание.
А он, паскуда такая, это содержание не грузит, а показывает только маленькую пиктограмму - типа, здесь внедрено содержание, для которого нет плагина.И хоть плач!
Но выход нашелся. Покопавшись в документации на сайте Apple, родился такой рабочий вариант - при заходе на главную страницу сайта определить платформу пользователя, и если это iPhone или iPod, то подсунуть ему простеньку страницу, где написать
"Ваш браузер не поддерживает Flash. Посмотрите на html-версию сайта."
Ну а если это не iPhone и не iPod touch, то выдать обычную страницу с тегом <embed> и альт-содержанием в <noembed> (это для тех, у кого flash не установлен - с предложением его загрузить или посмотреть на html).Реализовал все это через SSI - оказалось самым простым методом. (SSI - это директивы, исполняемые на стороне сервера - с их помощью можно поменять содержимое страницы "на лету", во время ее загрузки в браузер посетителя).
Итак, вот как выглядит решение.Файл index.html - который грузится при заходе на сайт. Код файла:
<html> <head> <meta equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Ну, тут типа название...</title> </head> <body> <!--#if expr="$HTTP_USER_AGENT=/iPhone/" --> <!--#include virtual="iphone.html"--> <!--#elif expr="$HTTP_USER_AGENT=/iPod/" --> <!--#include virtual="iphone.html"--> <!--#else --> <!--#include virtual="other.html"--> <!--#endif --> </body> </html>Текст, который я выделил коричневым, как раз и является директивами SSI. Там идет две проверки - если сайт просматривают с iPhone или iPod touch, значит вставить в данную html-страницу код из файла iphone.html.
Вот код данного файла (обратите внимание, кроме этого кода там не должно быть ничего - ни тегов <html>, ни тегов <head> и <body>):<p>К сожалению, Ваш браузер не поддерживает Flash. Вы можете посмотреть <a href="http://www.наш-сайт.com/html-version/">html-версию сайта.</a></p>
Ну а директивы SSI<!--#else --> <!--#include virtual="other.html"-->
выполняются для всех остальных браузеров (в принципе, можно было бы и для мобильников прописать, но пока нужды нет никакой). И если у пользователя не iPhone / iPod touch, то в страницу будет вставлен код из файла other.html. То есть, обычная загрузка flash-ролика.Вот код файла other.html:
<div id="main"> <embed type="application/x-shockwave-flash" src="main.swf" quality="high" bgcolor="#000000" width="100%" style="height:100%" name="main" align="middle" allowScriptAccess="sameDomain" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer"/> <noembed> <p> <font face="tahoma, sans-serif" color="#CCCCCC">К сожалению, Ваш браузер не поддерживает Flash (или у Вас просто не установлен Flash-плеер).<br> Чтобы просмотреть сайт Вы можете бесплатно загрузить и установить <a href="http://www.adobe.com/go/getflashplayer"><font color="#FFFFFF">последнюю версию Flash-плеера.</font></a> <br><br> Или посмотреть <a href="http://www.наш-сайт.com/html-version/"><font color="#FFFFFF">html-версию сайта.</font></a></font> </p> </noembed> </div> <script>resizeme= function () { if (document.body.clientWidth<900) { document.getElementById('main').style.width='800'; } else { document.getElementById('main').style.width='100%'; } if (document.body.clientHeight<721) { document.getElementById('main').style.height='721'; } else { document.getElementById('main').style.height='100%'; } } window.onresize =function() { resizeme(); }; window.onload =function() { resizeme(); };Этот код на первый взгляд может показаться сложным - но скрипт тут нужен только для масштабирования ролика. А в остальном все просто.
Вот, в принципе, и все решение. Работает - как молоток, то есть безотказно.
P.S. Опубликовать на этом блоге исходный текст html-файла - это что-то с чем-то :) Как нибудь раскажу, как я это сделал.
Поскольку сейчас работаю контент-менеджером (сразу на 3-х довольно крупных фирмах Москвы), и приходится искать информацию и картинки различных товаров, постоянно сталкиваюсь с одной и той же ерундой.
1. Производитель очень часто не указывает на своем сайте артикулы (партикулярные номера) товаров - а разобираться без них где какая модель порой довольно утомительно.
2. Как только товар уходит с производства, он тут же исчезает с их сайта. И бывает что просто беда - товар на складе есть, в продажу пустить надо - а фото для описания не найти. Ну хоть ищи - свищи.
Вот блин! Ну неужели так трудно делать архив моделей и указывать артикулы?
P.S. Были две сумки для ноутбуков, одного производителя из Австралии. Ну нигде их фото не найти - не говоря уже о сайте производителя, разумеется. Написал в Австралию, с просьбой выслать фотки.
Получил ответ:
"Поскольку этих сумок у нас сейчас нет в продаже, вам их фотографии не нужны. Зайдите на сайт месяца через два - мы, возможно, снова запустим их в продажу."
Весело!
