Иван Березовский

Готово! Сделал очередной сайт - Иван Березовский.

Как встроить звук на веб-страничку?

Вставить на 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

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

К примеру, пришлось по работе скопи-пастить визуальный вид одной промо-странички. И понадобилось отключить обтекание текста для некоторых картинок. С таблицами возиться неохота - там было много картинок, пришлось искать решение через CSS.

И чтобы Вам не пришлось проделывать то же самое (искать, имеется в виду) - вот готовое решение.

Итак,

как с помощью 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; - ну, или сколько вы там пикселей (или пунктов, или процентов) хотите. Да и все дела.

Классная подборка фото - просто ТЕМА!

Отличные фото с комментариями о жизни в нашей стране - http://vasi.net/2009/02/14/za_chto_ja_ljublju_svoju_rodinu_25_foto.html

Парочка примеров:

Хороший сайт про CSS (ну и про другие вещи, связанные с вебом)

Делая 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-сайта на iPhone

Делаю сейчас один флеш-сайт на заказ, и столкнулся вот с одной интересной проблемой.

Главная страница сайта содержит только 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. Были две сумки для ноутбуков, одного производителя из Австралии. Ну нигде их фото не найти - не говоря уже о сайте производителя, разумеется. Написал в Австралию, с просьбой выслать фотки.

Получил ответ:

"Поскольку этих сумок у нас сейчас нет в продаже, вам их фотографии не нужны. Зайдите на сайт месяца через два - мы, возможно, снова запустим их в продажу."

Весело!