Сегодняшний пост является гостевым, автор статьи – компания Optimism.ru:

• Продвижение сайтов
• Создание сайтов
• Контекстная реклама
• Анализ юзабилити

Email для связи: info@optimism.ru

———————-

Новейшие исследования интернет-аудитории показывают: более 90% разработчиков популярных интернет-браузеров, а также веб-дизайнеров и рядовых пользователей, часто используют устаревшие версии браузеров и операционных систем, которые не в состоянии предоставить пользователю возможность в полной мере использовать достижения новых технологий.

Например, в Internet Explorer не поддерживается «официальный» XHTML: даже если код написан на этом языке, IE всё равно обрабатывает его тем же синтаксическим анализатором, что и устаревший HTML, лишая самого себя шанса продемонстрировать все преимущества XHTML.

Невероятно, но факт: сегодня Интернет прекрасно обходится и без новых технологий. Сайты исправно обрабатывают информацию, работают поисковые системы и сотни самых разных сервисов.

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

«World Wide Web Consortium» или консорциум «W3C», возглавляемый изобретателем HTML Тимом Бернерсом-Ли, зашёл в тупик: разработанный в его недрах проект XHTML 2.0 несовместим с предыдущими версиями языка и действующими браузерами.

По альтернативному пути направилась рабочая группа «WHATWG», в которую вошли представители корпорации «Apple», а также проектов «Mozilla» и «Opera». В 2007 году фрагменты созданного ими стандарта HTML 5 начали поддерживаться некоторыми версиями популярных интернет-браузеров. Через год к его разработке присоединился и консорциум «W3C».

Что такое HTML 5? Его основное назначение — стать жизнеспособным универсальным языком разметки, максимально совместимым с миллионами действующих сетевых ресурсов. Поскольку предполагается, что HTML 5 станет преемником HTML 4.01 и XHTML 1.0, разработчики стараются обеспечить его максимальную совместимость с предыдущими версиями. HTML 5 ориентирован не на разработчиков сайтов, а направлен на обеспечение корректной работы браузеров — вплоть до реализации способности корректировать ошибки.

С помощью HTML 5 будут оформлены те принципы, по которым интернет-браузеры фактически работают последние полтора десятка лет. HTML 5 помог разработчикам забыть о формальной совместимости с SGML. Новый стандарт не использует язык SGML, а описывает частные правила для интерпретации конкретных тэгов и других синтаксических конструкций. Кроме того, он описывает документы HTML в терминах объектной модели документа (Document Object Model, или DOM). Браузер, перед тем, как отобразить веб-страницу, формирует её элементы в виде разветвлённой структуры, что позволяет включить в HTML 5 широко используемые, но не стандартизированные методы DOM: window.open(), alert(), prompt(), document.links, document.images, innerHTML, contentEditable, и другие.

HTML 5 был «очищен» от неиспользуемых элементов: acronym, applet, basefont, big, center, dir, и других, а также фреймов: frame, frameset и noframes, а функции отдельных тэгов подверглись изменению.

Другой основной принцип HTML 5 — обеспечивать правильное отображение информации даже в устаревших браузерах. Например, элементы audio и video позволят без труда разместить на странице необходимый ресурс и снабдить его стандартными элементами управления. Интернет-браузеры, не поддерживающие такие элементы, могут быть дополнены flash-проигрывателем, в результате чего пользователь в любом случае увидит видеоролик или прослушает аудиозапись.

Процедура заполнения форм в HTML 5 также была полностью изменена. Теперь язык снабжён стандартными элементами, атрибутами и интерфейсом DOM. Фактически на сегодняшний день унифицированы те расширения интерфейса, средства проверки и элементы управления, которые разработчики сайтов до настоящего времени пытались разрабатывать самостоятельно.

В одной статье перечислить все достоинства новых форм HTML 5 невозможно. Мы и не ставим сейчас перед собой такой задачи. Главное — тенденция: по мере развития нового языка отдельные сайты будут постепенно превращаться из обычных информационных страничек в рабочие приложения с множеством полезных функций.

Именно постоянное совершенствование технологий стало причиной «рождения» HTML 5, который прежде всего должен стать языком приложений. Кстати говоря, на это указывало и его рабочее название на начальных стадиях разработки — «Web Applications 1.0».

К сожалению, сейчас нельзя дать точный ответ, когда HTML 5 будет использоваться большинством разработчиков. Корпорация «W3C», как правило, принимает стандарт только после того, как он будет внедрён как минимум в двух популярных браузерах. По прогнозам специалистов группы «WHATWG», такое знаменательное событие настанет не раньше 2022 года.

К списку уже имеющихся 110 сайтов для регистрации RSS добавлено еще 14 новых.

Русские:

1. Яндекс блоги – http://blogs.yandex.ru/add.xml
2. Блоги на inf.by  – http://blog.inf.by/?page=65021
3. BlogRate – http://blograte.ru/
4. JumpLink – http://www.jumplink.ru/addurl.php
5. iBlogger – http://iblogger.ru/
6. MRSS – http://www.moben.ru/mrss/
7. News RSS Tu2 – http://news.rss.tu2.ru/new_rss_can.php
8. Суббота – http://subbota.co.ua/index.php?nma=blog&fla=add
9. Catalog GPMV – http://catalog.gpmv.ru/add/1
10. Web100 Каталог RSS-каналов – http://rss.web100.kz/add-rss-feed.html
11. Directory MBlog – http://directory.mblog.ru/add.php
12. ДоброБот – http://dobrobot.com/

Буржуйские:

1. BlogPulse – http://www.blogpulse.com/submit.html
2. BoingBoing – http://boingboing.net/suggest.html

Очередной стопор с подачей материалов и написанием статей. По сему было решено: принять участие в новом конкурсе, который проводят 7 блоггеров.

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

В течение недели попробую чуть больше внимания уделить jQuery. А сегодня-завтра расскажу о том, как сделать смену текста на сайте, не прибегая к flash.

И опять же просьба к читателям: оставляйте заявки на интересующие вас темы

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

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

Чтобы сразу не кидаться в крайности и отказываться от флэш, идеи с меню или скрипта, предлагаю решению проблемы. Для flash добавляем следующие параметры

<param name="wmode" value="transparent">

А в embed добавляем

wmode="transparent"

Пример.

1 .Код до решения проблемы

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="125" height="125">
<param name="movie" value="images/filename.swf" />
<param name="quality" value="high" />
<embed src="images/filename.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="125" height="125"></embed>
</object>

2. Код после решения проблемы

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="125" height="125">
<param name="movie" value="images/filename.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent">
<embed src="images/filename.swf" wmode="transparent" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="125" height="125"></embed>
</object>

Больше ничего не потребуется.

По сети уже расползается очень интересный ролик на тему СЕО. Тем, кто в теме, думаю будет интересно

Приветствую Вас на обновленной версии блога “ArtShok. Красивое сайтостроение”, посвященному в большей степени примерам и урокам по css,  jQuery и AJAX.

Прошлая версия блога хоть и начала набирать обороты, но была оставлена по .. в принципе не важно по каким причинам личным причинам… Так что это попытка №2, которая, надеюсь, будет более удачной!)

И еще раз напоминаю политику блога: никаких noindex или nofollow!
Что касается ссылок на Ваш ресурс, то (спасибо плагину от MaxSite) они появятся только после определенного количества комментариев (дабы сразу отсеять нерадивых спамеров).

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

Тема поста на сегодня “Все через Alt…”, которой я начинаю серию шпаргалок для повседневнего использования. Конечно, вряд ли вы каждый день ломаете голову как поставить ♪ или ™ и уж тем более ╞. Но по закону подлости, именно когда нам нужно вставить что-то этакое, оно не находится.

Так что добавляйте в закладки или сохраняйте себе на комп

*Открывается в новом окне

Думаю все уже выучили, что семантически правильно представлять меню на сайте в виде списка. Собственно поэтому мы и продолжаем дальше практиковаться в его оформления (первая статья на эту тему была про древовидный список).

Меню на подобие книжного оглавления удобно, если вам требуется разнести по разным сторонам название раздела и, например, количество подразделов (на сайтах недвижимости эту может быть тип недвижимости и число объектов, в блогах – название раздела и количество тем в нем).

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

HTML-код приведенного меню:

<ul id="list">
<li><span>11</span> <a href="#">CSS</a><br /></li>
<li><span>20</span> <a href="#">HTML</a><br /></li>
<li><span>35</span> <a href="#">jQuery</a><br /></li>
<li><span>62</span> <a href="#">JavaScript</a><br /></li>
</ul>

CSS-стили для меню:

ul#list {list-style:none;width:320px;}
#list li {background:url(botline.gif) repeat-x 0 0.85em;}
#list li a {float:left;background:#FFF;padding: 0 4px 0 0;}
#list li span {float:right;background:#FFF; padding 0 0 0 4px;}
#list li br {clear:both;}

Где botline.gif собственно нижнее подчеркивание.

Убираю noindex с комментариев. Что же касается nofollow - его и так не было:)
Единственный момент – в целях борьбы со спамом пришлось прибегнуть к плагину от MaxSite

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

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

Касательно ссылок внутри поста: noindex и nofollow никаких не было и впредь не будет. Поэтому если есть предложения по поводу обмена постовыми или просто хотите чем-то поделиться – отписывайтесь здесь.

Всем удачных выходных!

У rotor’a пару дней назад была опубликована очень интересная статья о том, как с помощью CSS, JavaScript и PHP изменить стандартные шрифты на сайте без использования флэш!

Данная технология называется FLIR (Facelift Image Replacement), своего рода альтернатива sIFR.

Как работает

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

Примеры использования FLIR можно увидеть всё на том же сайте разработчика и протестировать собственные сайты (к сожалению, не работает для кириллических символов:( ).

Установка

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

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

Плюсы

• лёгкая настройка
• не требуется поддержка плагинов в браузере (единственное требование, поддержка PHP GD library (библиотека для работы с графикой) на сервере);
• заменённый текст доступен поисковикам через атрибут alt;
• при отключенном JavaScript, выводится стандартный С?рифт, установленный в стилях;
• автоматическое подгонка изображения под размер подменяемого С?рифта;
• возможность выбора формата генерируемого изображения (GIF, PNG);
• при выделении и копировании текста и изображений, атрибуты alt копируются как нормальный текст.

А специально для блоггеров существует плагин для WordPress.

Минусы

• наблюдается некоторая «косячность» работы в Opera, в частности, при копировании текста вместе с изображениями, текст из атрибута alt не копируется. Эту проблему разработчик обещал исправить в последующих билдах;
• проблема при рендеринге некоторых шрифтов, поэтому предварительно отображение следует протестировать локально.

Где использовать

Для заголовков на сайтах. Отличный выход для имиджевых проектов, где стандартных платформенных шрифтов явно недостаточно.