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

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

Суть блочной верстки — в использовании всех возможностей CSS (каскадных таблиц стилей) вместо таблиц и направляющих изображений.

В этой статье приведён пример использования блочной верстки для создания макета сайта с шапкой, навигационной панелью, основным контекстным пространством, блоком меню и подвалом, как на этой схеме.

Читать далее »

Написал плагин для WordPress, который при наведении на ссылку в сообщении показывает всплывающую подсказку, в которой отображаются параметры «title» и «href» данной ссылки. В комментариях и в меню эти подсказки не отображаются. Впрочем, вы и сами видете его работу.

Для установки нужно его скачать, распаковать в каталог вордпресса и активизировать в панели управления плагинами. Стоит проверить, чтобы в теме в файле index.php основной контекст страницы был размещён в теге <div id=»content»>.

Плагин написан на основе JS-скрипта Bubble Tooltips. Надеюсь, кому-нибудь пригодится — если не для блога, то хоть для изучения JavaScript — код совсем маленький и довольно понятный.

Я уже устал рассказывать о том, что сделало с современным интернетом появление библиотек аякс и к чему это приведёт в дальнейшем, поэтому просто расскажу как «прикрутить» к своему сайту уже готовые Ajax-скрипты, как заставить их работать и где скачать примеры AJAX-скриптов.

Существует англоязычный сайт MiniAjax.com, на котором собраны (и продолжают собираться) странички небольших скриптов. С примерами, демонстрациями и инструкциями по установке.

Например, скрипт «Prototype Window».

Этот javascript-класс позволяет открывать на Html-странице различные окна и выполнять в них какие-нибудь действия. Он основан на библиотеках Prototype и script.aculo.us , о которых я уже вкратце рассказывал.

Работает в браузерах Safari, Camino, Firefox, IE6, Opera, то есть практически во всех. Окна могут менять размер, сворачиваться и разворачиваться, открывать модальные диалоги, использовать различные визуальные эффекты, использовать различные скины и стили и многое другое.

И это только первый из предлагаемых AJAX-скриптов. Если у кого-то из читателей есть интерес — отпишитесь, я могу постепенно выкладывать русские варианты описания скриптов со своими впечатлениями и комментариями.

Внимание! Статья устарела. Смотрите новую: «Мониторинг и анализ доступности сайтов»

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

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

Host-tracker
Больше 50 точек мониторинга распределенных по всему миру. После регистрации, и настройки параметров мониторинга, система начнет опрашивать указанный вами ресурс с необходимой периодичностью, при возникновении проблем с доступом, ваш сайт будет проверен всем точками мониторинга, и если это не удастся, то вам немедленно будет выслано email или SMS сообщение.

UpPanel
Опрос каждые 30 минут — HTTP, HTTPS, FTP, SSH, POP3, SMTP, MySQL, Ping, Custom TCP Ports, Pagecontent check. Базовая отчетность, предупреждения высылаются на Email,Telephone, SMS, AIM, MSN, YIM. Профессиональный сервис.

Mon.itor.us
Web 2.0 в действии. Куча возможностей по опросу (HTTP, HTTPS, FTP, SIP,IMAP, SMTP, POP3 на любом порту, любой TCP или UDP порт, DNS, Ping) и отчетности, мониторинг из 3х точек, опрос каждые 30-45 минут, предупреждния высылаются на e-mail, ICQ, YIM, MSN, GTalk, телефон. Можно скачать и установить агента (пока только под Windows), который помимо мониторинга процессов, памяти и жестких дисков самой машины может выступать в роли еще одной точки опроса (пока только HTTP и Ping).

В 2002-м году я учился в в Витебском Государственном Технологическом Университете на факультете повышения квалификации по специальности «Web-программирование». Специальность была новая (бета-версия), поэтому было очень позитивно и интересно, мы вынесли оттуда столько знаний, кто сколько смог.

Так вот, там я нашёл крошечную программку, которой пользуюсь до сих пор — EyeDropper. Её сайта давно не существует, поэтому выкладываю тут. Она умеет показывать код цвета, на который наведён курсор и копировать его в буфер обмена, ну и ещё имеет несколько настраиваемых параметров. Просто незаменимая вещь при срочной разработке со сроками в прошлом.

Скачать EyeDropper 3.0 (30 Кб).

Ну а поскольку при использовании такой программы кючевой момент всё-таки удобство и привычка, приведу ещё одну программу-аналог: Web Designers Tool Set. Это то же самое, но механизм управления программкой совсем другой — кому как нравится. Ещё она содержит линейку для измерения относительных размеров (см. скриншот).

Скачать WDTS 1.2 (239 Кб).

А ещё для выполнения этих же функций есть плагин для браузера Firefox — Colorzilla (140 Кб).

Можно выбрать то ,что удобнее вам, а мой выбор — EyeDropper.

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

База простая, в удобном SQL-формате, структура такая: id1-страна, id2-регион, id3-город, id1-id2, id2-id3.

Скачать (SQL, 0.4 Мб).

Если же вам нужна более глубокая адресная информация по России, то вам дорога либо в КЛАДР, либо в ОКАТО. Несмотря на то, что КЛАДР позиционируется как будущий стандарт адресного пространства, структура у него довольно странная, а вместо спецификации его создатели сделали программку для работы с КЛАДР. Но нам она бесполезна, поэтому вот вам внутренняя спецификация формата КЛАДР, пользуйтесь.

А вот здесь можно бесплатно скачать SQL-базу соответствий стран, городов и IP-адресов.

Комплекс скриптов, позволяющий заполнять формы и изменять содержимое страниц, не обновляя их, стал символом концепции Web 2.0. Кто-то даже назвал AJAX “наконец заработавшим JavaScript”. Для тех, кто хочет начать использовать его на своих сайтах, я сейчас объясню как это сделать на простейшем примере. Это, конечно, не руководство, но направление и дальнейшие источники информации я покажу.
Итак, первое, что нужно сделать, это скачать script.aculo.us (146 Кб), и распаковать его. В дистрибутиве есть каталог с примерами — он потом может пригодиться. А js-файлы из каталогов lib и src можно положить в какой-нибудь отдельный каталог на вашем сайте для более удобного использования.
Попробуем использовать эти скрипты на простом примере — редактирование текста пользователем без перезагрузки страницы. Создадим пустую html-странцу. Пропишем в ней подключение необходимых скриптов из скачанного дистрибутива:

<script src=»/prototype.js» type=»text/javascript»></script>
<script src=»/scriptaculous.js» type=»text/javascript»></script>

Проверить работу AJAX уже можно, например, вставьте следующий код в страницу, откройте её и кликните мышкой по тектсту:

<div onclick=»new Effect.SwitchOff(this)»>
Исчезающий текст.
</div>

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

<p id=»editme»>Этот будет изменяться</p>
<script type=»text/javascript»>
new Ajax.InPlaceEditor ( ‘editme’, ‘/return.php’, { callback: function (form, value) { return ‘myparam=’ + escape(value) }})
</script>

В этом коде мы сначала добавляем изменяемый текст с ID, по которому его определит скрипт, а потом вызываем метод Ajax.InPlaceEditor, передавая ему ID редактируемого текста (editme), адрес программы-обработчика, которая примет и сохранит изменения и определяем способ передачи этой программе данных (в данном случае — через POST-переменную myparam).
В качестве скрипта для сохранения информации можно использовать программу на любом доступном языке программирования — от ASP до PHP или Ruby. Её задача — получить параметры, сохранить, и обязательно вернуть, что бы изменённый текст сохранился на странице. Как сохранить данные можно узнать в руководстве по соответствующему языку программирования. В качестве примера я просто получу данные и верну их с помощью PHP.

<?php
Echo $_POST[‘myparam’];
?>

Скрипт готов, ему уже можно найти применение.
Ответы на частозадаваемые вопросы по script.aculo.us можно найте в его официальном FAQ.

Полное описание работы и использования всех методов можно найти в Scriptaculous wiki.

Если сайт нужен имиджевый или программный, то делать его самостоятельно — тупиковый путь, есть на то соответствующие специалисты — дизайнеры, программисты, СЕО и прочие. Но если таких целей нет, то вполне можно сделать сайт самостоятельно, изучив «матчасть».

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

1. CITForum.ru — море информации, спецификаций, авторских статей. Там можно найти практически любую информацию, связанную с программированием, версткой, разметкой и прочим.
2. Новый проект — «Популярная энциклопедия сайтостроения». Информации пока не очень много, но направление проекта и хороший старт вселяет надежды.
3. Hostinfo.ru — проект, ориентированный больше на профессионалов, чем на новичков. Но на некоторые фундаментальные вопросы ответы найти можно именно там.
4. Сайт htmlbook.ru посвящен языку HTML, CSS, веб-дизайну, графике и процессу создания сайтов. Есть справочники по HTML, CSS, а так же пошаговые руководства.
5. Так же полезно будет просмотреть блог «Проектирование сайтов».

Сейчас все уже привыкли к этим иконкам, обозначающим наличие RSS-потоков на сайте, многие сразу ищут их глазами при просмотре страницы. Так они стали неофициальным стандартом.
Изначально эти иконки создавались для встроенного RSS-ридера Live Bookmarks в бразуере Mozilla Firefox для обозначения в адресной строке браузера наличия RSS-ленты на просматриваемом сайте.

На сайте Mozilla можно найти гайд и FAQ по этим иконкам, а так же загрузить их в двух стандартных форматах — 14×14 и 28×28, а на сайте FeedIcons.com можно скачать эти иконки в высоком разрешении в форматах AI, EPS, SVG, PSD, PDF, PNG, JPG и GIF.