RSS
 

Когда может пригодиться Flash

21 Авг

Очень часто на сайтах использование Flash не оправдано. Но не всегда. В этой записи, я приведу примеры неплохих сайтов, созаднных на этой технологии. Как и следовало ожидать — это промо-сайты, наполненные видео.

1. Louis Vuitton (http://www.louisvuittonjourneys.com/legends/)

Отличное видео, хорошо снятое, немного интерактива :) Хотя и я не люблю футбол, мне понравилось.

2. The Perrier Mansion (http://perrierbydita.com/)
Так же отлично снятое видео, но вы в роли наблюдателя. К недостатком можно отнести не больно красивую модель (девушку), а так же большой размер сайта, думаю мегабайт 100 или больше.

3. Cheetos – Battle of the Cheetos (http://battleofthecheetos.com)

Отличная стрелялка, с тактическими элементами :) Повышение уровня героев, в зависимости от вашего уровня игры. Целый час игрался. Жаль, только, что игра скорее  всего с искусственным противником, а не реальным.

В заключении

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

Закроем глаза на то что флеш плеер, по сути, так же надо обновлять, уже как 10 версия (или 11?), просто обновления делается принудительным. Не обновишь флеш – сайт не увидишь. Поэтому все добровольно-принудительно качают последнию версию. Эх, с браузерами бы так.

Немного о работе флеша.

Все работает достаточно быстро и без тормозов (думаю это спасибо последнему обновлению, где добавили аппаратную поддержку маков). Но потребление ресурсов, я вам скажу. Процессор нагружен больше чем на 100 процентов (полагаю, что второе ядро так же начинает напрягаться), а его температура против обычных 60 возрастает до 70-75. Но это не самое страшное. Гораздо страшнее — это поедание оперативной памяти. После часа игры на сайте Cheetos проигрыватель flash съел немыслимые 1.5 Гб оперативной памяти! Столько же, сколько и Photoshop.


 

Информация красива, очень красива.

20 Июл


Я всегда был неравнодушен к представлению информации на бумажках и не только (на сайтах, например), и не понимал, как можно к этому относиться спустя рукава (и похоже, все прочее). Многие люди работают с дизайном информации? как-будто это не информация вовсе, а что-то, за что им дядя денюжку заплатит, но! Все это видно на бумажке, на странице и т.п. Люди не делайте так, побойтесь Бога!
Так вот, нашел я прекрасный сайт, где похоже человек тоже неравнодушен, причем человек — англичанин (в генах еще что-то осталось, видимо).

The taxonomy of Apple iPhone

В общем, господа, это просто красиво.

 

Про отношения с заказчиком :)

18 Июл

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

 
2 Коммент.

Категория: Ха-ха

 

Летняя жара в студии

14 Июл

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

Гордый вентилятор пытался всех спасти, но что случилось, то случилось…
Вентилятор тут
И казалось что ситуация потеряна, что все вышло из под контроля, если бы не эта книга! Благодаря ей, всего за пару минут, мы научили наш роутер представлять прохладные альпийские луга, леденящие водопады Норвегии, антарктические снежные домики пингвинов. Казусов с перегревом с ним больше не случалась.

Бывает и такое :)

 

Текст и текстура CSS

13 Июл

Шрифт с прозрачность и маской можно использовать не только для создания эффект тени внутри. Текст, просто-напросто, можно взять, да оттестурировать :) Когда-нибудь мы сможем использовать это в дизайне :P

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

PS: Работает пока только в Safari и Chrome.

 

Как сделать тень внутри шрифта (css)

01 Июл

Тень внутри шрифта могла бы имитировать не просто вдавленный текст, а именно тень внутри шрифта. К сожалению в новой спецификации inner-shadow возможно применить только к блочным элементам (в смысле тень, падающую внутрь, правило-то называется box-shadow:inset, чтобы никого не запутать). Поэтому создать тень внутри шрифта не получится с помощью стандартных средств. Поэтому прийдется воспользоваться другими свойствами. К сожалению данный способ работает только в супер-клевом Safari 5, потому как только там возможно наложение маски по шрифту.
Так что первое свойство, которым мы воспользуемся:
-webkit-background-clip: text;
Затем делаем прозрачным фон текста:
color: transparent;
Ну и в довершении добавляем тень, которая и добавит ощущение вдавленного текста:
text-shadow: rgba(255,255,255,0.5) 0 5px 5px;

Safari 5

Opera 10.53 :)

Firefox 3.6.6

Internet Explorer 6 =)

Пример уже можно посмотреть

 

Бесплатные кириллические веб-оптимизированные шрифты

28 Июн

Google Fonts API, к сожалению, пока содержит только один шрифт с поддержкой русских символов, но не одним только Гуглом земля славится. Добрые люди сделали оптимизированные для веба шрифты и бесплатно решили поделиться ими.
Под примером написания есть строка — в этой строке содержится код подключения стиля. Просто копируем его себе на сайт и все, затем можно пользоваться шрифтом.
Галерея бесплатных шрифтов (один только, правда, стоит 15 у.е.):

 

Типограф на наших сайтах

25 Июн

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

Не забываем нажать на изображение, чтобы рассмотреть ближе.

 

Вышла новая версия Safari

09 Июн

Для начала ложка дегтя в бочку меда Apple. Русско-язычная версия сайта не всегда держится в актуальном состоянии.
Заходим сюда: http://www.apple.com/ru/safari/whats-new.html
И видим:

Стоит из ссылку убрать «ru», перейдя на http://www.apple.com/safari/whats-new.html
То мы сразу поймем разницу в целую версию:

Страница Safari5

Итак, вышла новая версия Safari, под номером 5.
Что же нового и полезного в ней появилось?

Во-первых, строка ввода адрес наконец-то поумнела. Теперь туда можно писать не просто адрес, а можно писать искомый текст. Safari начнет копать историю и закладки. Выглядит это примерно так:
Строка адреса в Safari
Далее. Теперь Safari выискивает в содержимом страниц статьи и позволяет вывести только суть, т.е. саму статью, опустив лишнее! Очень удобно, жаль не на всех сайтах это работает. С новостными не особо помогло, но некоторые блоги стало читать удобнее :)
Найдена статья? Жмем на появившуюся кнопку в строке адреса!
Читать в строке Safari
И нажав продолжаем чтение без мусора! Здорово!

Прочие нововвдения, пожалуй, пользователю не так интересны, но одни из основных — это более продвинутая поддержка HTML5. Apple, кстати, показала отличные примеры. Найти их можно тут: safari technology demos. Потом Apple увеличила производительность обработки страниц и JavaScript кода (и это важно, в этом плане FireFox пока, к сожалению, отстает, про братьев меньших в лице IE, пожалуй, упоминать не стоит вообще, разница в десятки раз). Ну и в довершении теперь браузер умеет искать не только в Googl-е, но в поисковике от Microsoft — в Bing.

 
 

Как убрать перенос текста (css)

02 Июн

При верстке нашего клевого резинового сайта возникла небольшая проблема. Если высота текстового блока выше обтекаемого изображения, то текст заползает куда не надо. Посмотрев как решают эту проблему на других сайтах, я засомневался. Например иногда использовалась таблица в две колонки, или вложенные блоки с добавлеными оступами. Но решить проблему можно проще, буквально в одну строчку. Для начала проиллюстрирую о чем речь.

Так блок выглядит на широком мониторе. Изображение и текст имеют одинаковую высоту, проблем нет.

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

Но нам надо, чтобы все выглядело аккуратно. Поэтому мы добавляем блоку, содержащему текст свойство overflow: hidden;

В частности в этом примере видно, что использование свойства overflow может быть достаточно разнообразным. Позже постараюсь написать, как с помощью него можно бороться с некоторыми багами, а так же расскажу как еще можно его использовать.