Author Archive
Silverlight vs. flash сравнение на территории дизайна
На досуге занесло меня сюда: http://www.silverlight.net/showcase/.
Заинтересовался я сильверлайтом - вдруг и правда он превратиться в мейнстрим? Чем он лучше, что в нем такого особенного?
И стал я смотреть, что же такого интересного делают на Silverlight. И проковыряшись час в этом шоукейсе майкрософтовском - выяснил, что рука настоящего дизайнера еще не касалась сильверлайта.
Да, все вроде моргает, переливается, интерактивность на лицо, но с точки зрения дизайна все это просто детский сад.
И там на каждой странице этой галереи вот такое беспросветное, унылое Говно. Уже с высоты птичьего полета видно, что на самих сайтах нас не ждет ничего хорошего. Я даже не буду тыкать пальцем в какие-то определенные сайты, оно все примерно одинаковое, смотрите сами. Глядя на этот балаган я невольно вспоминаю бесконечно убогий дизайн интерфейса Windows XP, который появился на свет, как ответ великолепному интерфейсу Mac OS X. Тоже все цветное, веселое такое было… И все это, я обращаю ваше внимание, лежит на центральном сайте, на котором по идее должно быть все лучшее, что сделано на этой платформе.
Я, конечно, понимаю, что если вот так без отбора свалить в кучу флешовые сайты, то запредельного говна будет даже больше, поскольку число флешовых сайтов сегодня на порядки выше, просто это говно никто целенаправленно не коллекционирует и отыскать его - надо еще постараться… И при этом можно зайти на thefwa.com и увидеть передний край флешового сайтостроительства, и это действительно произведения искусства, достойные работы. И заметьте их очень и очень много!
Сильверлайту, как платформе сегодня похвастаться пока нечем по части дизайна. Похоже, что сегодня на нем делают сайты в основном программисты, и они видимо так рады красивым переливающимся кнопкам, что дизайнеров пока не зовут помочь.
На мой взгляд Silverlight еще пока ходит в подготовительную группу детского сада. Он со временем созреет, но туда надо привлечь дизайнеров и тогда он может и превратиться в серьезного игрока.
SEO и flash
Зачем я вообще касаюсь этой темы?
Да все просто. Вот написал я клиенту сайт. Вывесил. Все, готово. А клиент спрашивает: а чей-то мы в поисковой выдаче не обнаруживаемся?
Строго говоря, это не ко мне. Я дизайнер, я сайт сделал, запулил на сервер и как говорится “от меня сигнал ушел”. Однако это все-таки не серьезно, на мой взгляд, так относится к делу. И решил я посмотреть что можно сделать с флешовым веб-сайтом, чтобы он как минимум не был черным ящиком для всяких яндексов и гуглов. Если поисковые роботы не поймут, о чем эта страница, то ее вряд ли вообще кто-нибудь, когда-нибудь увидит в поисковых выдачах.
Всем известно, что flash содержимое страницы это очень не правильная штука с точки зрения поисковой оптимизации, фактически, заходя на веб сайт поисковый робот видит одну html-страницу, все содержимое которой - один внедренный swf ролик. Причем зачастую даже тег <title> не заполнен, соответственно для робота такая страница - ни о чем. Конечно, можно возразить, что сегодня google вроде как может индексировать содержимое swf ролика, но если весь контент ролика подгружается через xml, то поисковый робот опять в пролете.
Что же делать?
А делать надо вот что:
1. html страница в которую встроен ролик должна содержать осмысленно заполненные поля <title>, <meta name=”description” content=”"> и <meta name=”keywords” content=”">. Например страница посвящена яблокам.
<title> Страница о яблоках</title>
<meta name=“description” content=“яблоки, все о яблоках, яблоки и жизнь, все из яблок, яблоки и культура”>
<meta name=“keywords” content=“яблоки, плоды, фрукты, apples”>
Я не буду здесь распространяться о том, что именно надо вписывать в эти теги, поскольку не специалист, но заполнить их хоть каким-то осмысленным содержанием относящимся к сайту - дело минутное.
2. Тег <noscript> нужно заполнить содержимым, дублирующим содержание сайта во флеше. Обычно ролик встраивается в страницу с помощью скриптов. Все относящиеся к этому делу функиции на странице находятся в разделе <script></script>. Если скрипты в браузере отключены, то на странице отобразится содержимое тега <noscript>. Но самое главное для нас то, что поисковый робот индексируя страницу прочтет все что там есть, и увидев нормальный, понятный для него контент внутри тега <noscript> он будет очень доволен! В качестве примера зайдите сюда, на сайт adobe.inspire и потом просмотрите код страницы и вы увидите то о чем я вам здесь толкую. Именно так все устроено у тех, кто понимает в этом толк. Причем если отключить скрипты мы получим совершенно лысую страницу без всяких украшательств, содержащую только текст, оно и понятно, вероятность того, что кто-то будет смотреть эту страницу с отключенными скриптами стремится к нулю… Главное что поисковые боты получат, что им нужно.
Опытным путем я выяснил, что браузер Chrome не поддерживает тег <noscript>, об этом и в гугле пишут. Если запихнуть содержимое страницы прямо внутрь div’а в который внедряется флэше, то при отсутствии флеш ролика будет показано это содержимое, так что можно даже без <noscript> обойтись.
Еще раз хочу подчеркнуть, что речь идет именно об оптимизации для роботов поисковых систем. Если ваш сайт попадет к примеру на thefwa.com или к какому-нибудь блогеру-тысячнику в пост, то трафик к нему придет и без этих ухищрений. Но вы туда сначала попадите…
Собственно вот и все, что имею сказать. Может есть и другие рецепты, но я о них пока ничего не слышал.
Красота!
Вот сижу любуюсь, сегодня на thefwa.com увидел…
http://instantanes.visitprovence.com
Легкий, отзывчивый интерфейс, все летает. Все сделано тщательно, почти идеально. Сама по себе концепция интерфейса не новая, но дизайн и воплощение великолепны.
Это именно тот случай, когда flash применен по делу.
Фреймворк или не фреймворк вот в чем вопрос
Писать ли flash сайт на фреймворке или мучаться самостоятельно?
На самом деле нет никакого вопроса. Для меня по крайней мере, как для начинающего в этом деле:
Если вы начинающий - Конечно, НЕ фреймворк.
Конечно, надо первые проекты писать с чистого листа, чтобы на собственной шкуре понять необходимость использования шаблонов проектирования, чтобы понять как эти шаблоны работают, чтобы знать “что у лошадки внутри”. Чтобы понять насколько фреймворки экономят время. Но фреймворки экономят время только для тех, кто ЗНАЕТ.
Честно скажу, приступая к первому коммерческому проекту я понятия не имел как я его завершу, и я пытался сначала подступиться к pureMVC, но потом счел за лучшее отложить это мероприятие и начал читать книжку OReilly ActionScript 3.0 Design Patterns. Это ТО, с чего стоит начинать. По крайней мере оттуда можно вытащить готовые работоспособные конструкции, на которые вполне можно нарастить мясо своего проекта.
Отсюда мораль: сначала все пробуем собственными ручками, потом фреймворки.
Трассировка swf в онлайне. О пользе trace в нелегкой жизни разработчика
Подходит к завершению работа над очередным flash проектом. Проект не сверх сложный но и не элементарный. Построено все на шаблоне MVC. Как водится в таких проектах с некоторого момента цепочка вызовов функций становится, мягко говоря, длинной, а соответственно, труднее становится отловить всяческие глюки, типа многократного вызова одной и той же функции.
Учитывая асинхронную природу всего этого хозяйства, ловить ошибки становится еще на порядок сложнее, т.к. вызовы функций происходят в разное время.
Так вот, чтобы находить всякие явные и неявные ошибки, я взял за правило, всюду ставить операторы trace() выводящие нужную информацию в output во flash IDE.
Что это дает? Во-первых можно отследить порядок исполнения функций, кто за кем создается, как объекты взаимодействуют, Во-вторых можно следить за значениями всяких нужных переменных в динамике.
Казалось бы зачем весь этот сыр-бор с трейсом когда есть дебаггер? Дело в том, что дебаг понятное дело не заменишь, но из-за специфики архитектуры приложения дебаггер не всегда ясно дает понять происходящее, задержки между вызовами функций не те, что в реальности, а главное trace дает возможность увидеть наглядно историю вызовов функций и спокойно ее проанализировать.
В определенный момент мне захотелось сделать трассировку прямо на живом удаленном приложении, а не внутри IDE. Поиски привели меня к блогу senocular.com(там еще масса всяких полезных штук), где я нашел замечательный готовый класс, для трассировки сообщений в текстовое поле внутри флешового ролика.
На картинке показан экран трассировки внутри ролики с трейсом моего проекта. Я слегка модифицировал класс добавив скрытие окна по кнопке “Home” и открытие по “End”.
Класс используется как static. Нужно добавить его в addChild( new Output() ); и вместо trace() надо писать Output.trace(). Скачать класс можно здесь: output.rar.