Отправляет email-рассылки с помощью сервиса Sendsay
  Все выпуски  

Веб-дизайн - это просто! Теория и практика. 11


ВЕБ-ДИЗАЙН - ЭТО ПРОСТО!
теория и практика
  Дата выпуска: 23.04.07 Ведущий рассылки: Демьянчук Виталий
 

::Приветствие::

Всем доброго времени суток и хорошего настроения!

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

Я рад приветствовать вас на страницах этой рассылки.

Как всегда, работает наш форум, на котором обсуждаются любые вопросы из области веб-технологий. Кстати, но форуме продолжается конкурс на самого активного участника. Условия конкурса были изменены: теперь самый активный посетитель получит от нас приз в размере 100 рублей и рекламу на главной странице нашего сайта, а также особый статус на нашем форуме. Присоединяйтесь к нашему дружному коллективу. Регистрация на форуме у вас займёт всего пару минут, а пользы, которую вы получите, будет гораздо выше, т. к. помимо просвещения по различным темам веб-технологий и общения на свободные темы у вас есть возможность ещё и подзаработать материально. Адрес нашего форума остался прежним: http://vitaweb.pp.ru/forum/ Добро пожаловать!

RSS-лента новостей нашего сайта - это всегда свежая информация об обновлениях на нашем сайте. Если вы хотите быть всегда в курсе всего происходящего на нашем сайте, то приглашаем вас подписаться на неё. Адрес: http://vitaweb.pp.ru/file.xml. Читать RSS-ленту можно через браузер Internet Explorer 7, Opera, Firefox или при помощи специализированных программ и онлайн средств просмотра.

 

::Содержание выпуска номер 11::

  1. Новости Интернета
  2. Ваши письма. Ответы на вопросы
  3. Пишем правильно или пару слов о спецификации HTML 4.01
  4. Словарь веб-мастера
  5. Оценка сайтов
  6. Ресурсы веб-мастера
  7. Новые статьи на сайте

 

::Новости Интернета, сайтостроения, хостинга::

  1. Домену .SU приказали жить!

    Корпорация ICANN не может вывести из обращения домены верхнего уровня – это вообще не входит в полномочия структуры, - поясняют представители компании "Регтайм", аккредитованного регистратора в зонах .RU и .SU. И "снести" ряд устаревших доменов не получится, несмотря на недавние посягательства. Поэтому домен первого уровня СССР .SU, равно как и домены других несуществующих стран, останется там, где был.
    Так или иначе, предложение ICANN списать "ненужные" домены оказалось крайне непопулярным. Тематический опрос на сайте корпорации породил массу конфликтов, и в итоге ее представителям пришлось заверять общественность в том, что опрос "будет отозван".
    Элизабет Портенёв из ICANN сообщила, что угрозы безопасности и стабильности интернета в связи с эксплуатацией доменного имени SU выявлены не были. Надо полагать, что организация проинформирует об этом своего работодателя – правительство США.

  2. Google приглашает закачивать подкасты

    Среди текстовой рекламы в системе Google Adwords недавно появились фирменные объявления от компании Google, которые приглашают закачивать подкасты в систему Google Base, где открылся новый раздел подкастов.
    Для хостинга подкастов сначала нужно зарегистрировать свой RSS-поток, после чего можно закачивать на сервер первый файл с указанием его жанра, сопутствующих тэгов, титров, графических изображений и краткого описания файла. Как только подкастер закачивает аудиофайл, система автоматически генерирует новое сообщение в RSS-потоке и экспортирует его во все крупнейшие подкаст-каталоги, в том числе iTunes, Yahoo, iPodder и т. д.

  3. Мобильная версия Mail.Ru Agent

    Компания "Майл.ру" выпустила программу для общения в "Агенте", используя мобильный телефон. Java-апплет можно скачать с сайта разработчика. Мобильный Агент для Java 1.0 поддерживается большинством современных мобильных телефонов, способных выполнять J2ME-приложения (Java 2 Micro Edition).
    Скачать Мобильный Mail.Ru Агент 1.0 можно http://mobile.agent.mail.ru и на wap-сайте wap.mail.ru.

  4. Зеленый свет - проверенным сайтам!

    Internet Explorer 7 поддерживает сертификаты безопасности нового типа - Extended Validation Secure Sockets Layer (EV SSL), проверяющие аутентичность web-сайтов.
    Если сайт, на который зашел пользователь, окажется защищен сертификатом EV SSL, адресная строка браузера подсветится зеленым. Кроме того, доступна информация о выдавшей сертификат организации, а также географическое местоположение сайта.
    Выдачей сертификатов EV SSL занимаются организации VeriSign и Entrust. Для его успешного получения компания, владеющая сайтом, должна предоставить документы, подтверждающие ее регистрацию согласно местным законам, точный юридический адрес и свидетельство того, что домен, на который выдается сертификат, действительно принадлежит ей.
    Браузер Firefox, начиная с версии 3.0, которую планируется выпустить в этом году, также будет поддерживать данный сертификат.

  5. Оплатить свой аккаунт в ЖЖ теперь можно "Яндекс.Деньгами"

    Российские блоггеры больше не зависят от американцев. С 16 января оплачивать свой аккаунт в ЖЖ можно "Яндекс.Деньгами".
    Впервые возможность мгновенной оплаты своих аккаунтов в LiveJournal получили пользователи из России. Дневники в ЖЖ теперь можно оплачивать "Яндекс.Деньгами", согласно официальному договору, заключённому компанией "Суп" и платёжной системой "Яндекс.Деньги".
    Этот договор взаимовыгоден для обеих сторон, считает шеф-редактор проекта "Суп" Николай Данилов. "Количество платных пользователей после заключения этого договора, несомненно, увеличится", - рассказал он.

  6. Первый в России поисковик для веб-мастеров

    В декабре 2006 года по адресу http://codavr.ru начала свою работу первая в Рунете специализированная поисковая система для веб-мастеров Codavr. Она предназначена для поиска информации на русском языке, относящейся к созданию веб-сайтов и веб-программированию. Новый поисковик позволяет искать по более чем тремстам русскоязычным сайтам, форумам и блогам, посвященным этой тематике. Codavr работает на основе сервиса настраиваемого поиска Google Custom Search Engine.
    Поисковая система Codavr создавалась для решения именно этой задачи – быстрый поиск веб-разработчиком практической информации. Поэтому в ее поисковый индекс включены только те сайты, которые могут быть полезны веб-мастеру в его работе. Это специализированные порталы, персональные сайты, форумы и блоги, на которых специалист может найти информацию по HTML, CSS, PHP, Perl, JavaScript, MySQL, Ruby и другим темам.

 

::Ваши письма. Ответы на вопросы::

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


  Вопрос задаёт Kekambas: 
Будь добр помоги мне со скриптом! У нас открывается студенческий сайт им не нужно вставить туда комментарии к новостям, опрос, поиск. Расскажи, как это сделать? что нужно сделать на сервере, просто последовательность! Заранее спасибо.

Ну, тут можно пойти разными путями, причём, настолько разными, что порой реализация намеченной цели может быть как слишком быстрой, так и очень долгой. В веб-дизайнерской среде выработаны 2 подхода решения поставленной проблемы. Первая - создание, скорее, даже не создание, а установка некой программы, которая включает в себя сразу несколько других дочерних программ, которые реализуются в рамках одной общей. Деление на подпрограммы здесь весьма условное, поскольку этот блок является, по сути, монолитной программой. Эта организация напоминает своего рода "операционную систему сайта", в которой каждый элемент общей системы отвечает за что-то одно: один - за голосование, другой - за организацию меню и т. д. На практике такие системы называются CMS или системы управления контентом. Как правило, работа с этими системами не подразумевает особых знаний в области веб-технологий, поскольку всё реализовано через удобный и понятный любому пользователю веб-интерфейс. Единственное, в чём может быть сложность, - установка этой самой системы, но разработчики постоянно улучшают системы подобного рода. Каждая новая версия системы CMS становится более удобной, чем предыдущая.
Вопреки всеобщему мнению, что CMS, как и всё хорошое, должна быть платной. С чем-то здесь можно согласиться, однако существуют и вполне неплохие варианты бесплатных CMS. Например, такие системы, как Mambo, Joomla, PHP-NUKE.

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

По какому пути идти вам - решать вам. Если вы считаете себя отличным программистом, тогда вам нужно идти по второму пути, если же либо нет времени или желания изучать языки программирования, а проект создать всё же нужно, то по первому. Если появятся дополнительные вопросы, задавайте. В зависимости от того пути, по которому пойдёте вы, будем решать вопросы дальше.


Вопрос задаёт Николай:
Здравствуйте, Виталий! У меня вопрос: при нажатии на ссылку - она меняет цвет с голубой на какой-то непонятный цвет и больше назад в голубой цвет не изменяется. Пользуюсь FrontPage. Что делать?

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

Я рекомендую настроить это свойство под себя. Давайте воспользуемся стандартными средствами CSS для решения поставленной проблемы. Описанный мной код нужно вставить непосредственно в текст страницы в режиме ввода html-кода. Запустите программу Frontpage, откройте в ней ваш документ. Внизу окна есть вкладки режима работы программы. Посмотрите, там есть такие вкладки: "Конструктор", "С разделением", "Код". Нам нужен режим "Код", поэтому щёлкаем по этой вкладке, где мы видим html-код страницы. Давайте поставим свой курсор между тегами <head> и </head>. Между этими тегами будет находиться наше CSS-описание. Приведу пример того кода, который необходимо вставить в страницу, чтобы изменить стандартные значения работы ссылки. Чуть позже я поясню его принцип работы.

<style>
<!--
a:link {color:#3333CC;} /* цвет обычной непосещённой ссылки */
a:visited {color:#330099;} /* цвет посещённой ссылки */
-->
</style>

Итак, давайте, я поясню написанное мной выше. Конечно, мы с вами ещё не касались темы работы с таблицами стилей. Мы это будем изучать в следующих выпусках рассылки. Поэтому попытаюсь объяснить как можно проще. CSS - это мощный и полнофункциональный дизайнерский язык, служащий дополнением к языку разметки документа. В нём представлено всё то, чего нет в стандартном HTML, а также всё то, что уже используется в HTML, но в расширенном виде. При помощи этого языка легко добиться потрясающих дизайнерских трюков, но об этом позже. Сейчас мы посмотрим, как при помощи CSS можно добиться изменения цвета ссылок.
Всё описание CSS-задаётся парным тегом <style>, который прописывается между тегами <body> и </body>. Собственно, этот тег и позволяет определять каскадные таблицы стилей.
Как вы видите, мы изменяем свойства ссылки, а именно тега <a>. В нашем примере мы задаём всем нашим ссылкам на странице цвет при различных событиях: цвет при загрузке страницы, цвет после щелчка мыши.
Всё это делается при помощи свойства color и псевдостилей, которые описываются через двоеточие после определяемого тега. Цвет мы задаём стандартным путём. Либо при помощи специально заготовленных слов (red, blue, green и прочие), либо используя шестнадцатеричные числа.

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

<style>
<!--
a:link {color:blue;} /* цвет обычной непосещённой ссылки с использованием псевдостиля link */
a:visited {color:blue;} /* цвет посещённой ссылки с использованием псевдостиля visited */
-->
</style>

В этом примере мы обоим состояниям ссылок присвоили одинаковые цвета.

 

Вопрос задаёт PS:
Может у тебя, Виталий, есть инфа по дешевым хостингам?

Поиск дешевого хостинга - довольно избитое занятие каждого веб-мастера, оно и понятно. Нам ведь нужно подобрать тёплое местечко для нашего сайтика, и чем теплее оно будет, тем теплее в душе будет у нас. Ну ладно вернёмся к вопросу. Сразу хочу вас предупредить, что излишняя дёшевость может быть отнюдь не то, что не полезной, а даже вредной. Вы же знаете, что "бесплатный сыр бывает только в мышеловке".
При выборе хостинга руководствуйтесь следующими важными параметрами:
1) необходимо знать, в какой точке нашего синего шарика расположен компьютер, где живёт-поживает ваш сайтик. Часто бывает так, что ваш сайт расположен отнюдь не в России, как нам кажется изначально, а где-нибудь в Америке. Датацентр в Америке - это конечно хорошо, для американцев, но мы ведь живём в России и тот факт, что к нашему сайту придётся обращаться на другой континент, слегка смущает. Информация преодолевает множество барьеров и чем их больше, тем дольше эта информация будет к нам идти. Поэтому всё же рекомендую вам ориентироваться на отечественный хостинг, который содержит серверы в России.
2) Желательно искать хостинг вида "всё включено, но есть ограничение по месту на диске и трафику". Эти хостинги действительно существуют и таких довольно много. Однако, ограничение по трафику может сыграть злую шутку, обязательно обращайте внимание на тот факт, что при малой ёмкости трафика, который предоставляет вам ваш провайдер ваш сайт может быть просто отключён посреди месяца только из-за того, что весь трафик на этот месяц был израсходован.

Извините за мои разглагольствования, которые могут и не быть конкретным ответом на вопрос, мне просто хотелось вас предупредить, чтобы избежать ваших ошибок в будущем. По вопросу конкретно могу ответить следующее: совсем недавно я нашёл довольно интересный проект, который предоставляет услуги хостинга по довольно низким ценам. Я говорю про проект http://www.aplhost.ru/. Это и хостинг, работающий по принципу "всё включено", и хостинг, серверы которого расположены в России, что также немаловажно, также есть телефон, по которому можно всегда оперативно связаться для решения важных вопросов. К тому же отзывы клиентов довольно лестные. Вот такая получилась реклама.


Вопрос:  
Добрый день мне недавно сделали сайт,
у меня есть доступ к управлению сайтом, как в управлении есть окошко ключевые слова
как его заполнять?..

Вашими ключевыми словами, естественно. Составьте семантическое ядро на основе всей той информации, которая есть на вашем сайте, т. е. определите, какие слова и выражения встречаются наиболее часто на вашем сайте. Проделайте такую процедуру для каждой страницы вашего сайта и составьте для каждой страницы сайта своё ядро ключевых слов. После чего посмотрите, пользуются ли большой популярностью ваши ключевые слова, определите конкурентов и количество запросов по каждому ключевому слову в поисковой машине, например, можно это сделать здесь: http://direct.yandex.ru/stat/wordsstat.pl. Там же можно узнать и о других запросах, похожих на ваш запрос. По возможности можно оптимизировать вашу страницу и под них.
После того, как вы проделаете всю эту работу, можно со спокойной душой заполнять искомое поле вашими ключевыми словами. Тема оптимизации сайта под поисковые системы - это отдельная наука в рамках веб-технологий. Мы по возможности с вами рассмотрим базовые основы раскрутки сайта в этой рассылке.


Вопрос задаёт Павел:
Что такое <h1> --<h6>? Вот все понятно кроме этого. или может ссылочку подкиньте в инете посмотреть с уважением, Павел.

Ну что же. Попробую объяснить. Парные теги <h1></h1>... <h6></h6> - это html-заголовки различного кегля и стиля. Практически в любом формате, который более-менее можно использовать для оформления текста, присутствует такой элемент, как заголовок. В html же заголовки имеют 6 предустановленных стандартом значений. Например, тег <h1> отображает самый крупный заголовок, а тег <h6>, наоборот, самый маленький. С появлением такого дизайнерского инструмента, как CSS, оформление заголовков можно менять, поэтому их фиксированность постепенно утрачивается (к примеру, тег <h6> можно сделать очень большим, а тег <h1> маленьким). Использование этих тегов положительно сказывается при раскрутке сайта в Интернете. Так что не пренебрегайте тегами заголовков.

 

Больше писем нет. Жду!
Присылайте Ваши вопросы, количество Ваших писем прямо пропорционально полезности этой рассылки! Появились вопросы? Хотите высказать Ваше мнение? Пишите vitaweb@bk.ru. С радостью отвечу на все Ваши вопросы.

 

::Пишем правильно или пару слов о спецификации HTML 4.01::

Все, наверное, когда-то учились в школе. Кто-то раньше закончил данное учебное заведение, кто-то позже. Наверняка, все из вас помнят ваши уроки русского языка. Как тяжело он порой нам давался, а мудрые учителя, как будто зная, что очень важно в жизни - уметь правильно писать, всегда пытались помочь нам освоить данную науку. Какие навыки наши учителя заложили в нас в первую очередь? Правильно! Уроки чистописания. Благодаря их помощи мы все имеем навыки чистописания. Мы можем писать правильно и выражаться так, как нам хочется. Как же это может быть связано с нашей темой? - спросите вы. Как правило, любой язык, который мы изучаем, содержит определённый набор правил, при помощи которых он фиксируется и закрепляется в письменности.

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

Вы, наверное, спросите, зачем эти правила вообще нужно знать, если, например, можно использовать вариации тегов, которые не зарегламентированы? Для понятия этого можно обратиться к русскому языку. Для чего мы пишем правильно? Мы хотим добиться правильности и единообразности понимания той мысли, которую мы хотим выразить, и свести на нет попытки её неправильной трактовки. То же самое, примерно, понимается и в HTML, но в отличие от русского языка непонимания могут быть выражены уже между браузерами. Браузер просто не поймёт, что вы хотите ему сказать. Ему придётся догадываться об этом. Вероятность искажения вашей информации вырастает в разы.

Язык HTML, в общем-то, как и все языки, имеет свою историю. История этого языка уже насчитывает несколько поколений или версий, в каждой из которых регламентировались новые правила или усовершенствовались старые. Мы с вами не будем вдаваться в подробности исторического развития языка HTML. Мы попытаемся рассмотреть типичные ошибки уже последней спецификации языка разметки HTML, которая имеет номер 4.01.

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

Можно выделить три типа возможных ошибок:
1) неверно прописаны основные теги
2) используются нестандартизированные теги
3) не указана рекомендация и тип языка.

Ошибка 1: нет описания для браузера, которое указывает на версию языка разметки

Неверный код:

<html>
.........
</html>

А верно будет вот так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
.........
</html>

Идентификатором DOCTYPE мы показываем браузеру, на основе какой версии языка мы разрабатывали эту страничку. Также мы прописываем адрес, по которому браузер может считать макет этой версии языка. Эти правила были разработаны компанией W3C, которая специализируется в стандартизации языков разработки для Интернета. Эти данные записываются своеобразно, но именно такой синтаксис положен в основу описания версии любого языка разметки, который проходит стандартизацию в W3C.

Ошибка 2: не прописаны или же прописаны неправильно обязательные атрибуты для тегов разметки

Типичные ошибки:

<script>var a=5;</script> <!-- Не указаны обязательные атрибуты для тега <script>: отсутствуют параметры type и language -->
<img src="1.jpg"> <!-- Не указан обязательный атрибут alt -->
<p>...В случае вот такого "столкновения"...</p> <!-- Мы не можем использовать служебные знаки синтаксиса HTML "кавычки" в качестве кавычек, которые используются в текстах, а также любые другие обозначения, которые используются в синтаксисе этого языка. Для этого компанией W3C были придуманы HTML-сущности, которые вставляют точно такие же текстовые элементы, как кавычки, угловые скобки и прочие элементы и не противоречат принципам языка HTML. Например, для кавычек нужно использовать &quot;-->
<img src=1.jpg alt=рисунок> <!-- Типичная ошибка: не прописаны кавычки значений атрибутов -->
<p><a></p></a> <!-- Частая ошибка. Иногда такой метод кодирования срабатывает, но он категорически не рекомендуется, т. к. вызывает неоднозначную трактовку у браузеров. Сейчас принят метод вложенности тегов друг в друга-->
<!-- Тут стоит комментарий //--> <!-- Тоже одна из довольно частых ошибок, два двойных слеша в языке HTML не рекомендуется использовать, был принят комментарий без применения слешей-->
<script language="javascript" type="text/javascript" scr="adr.js?a=mp&b=df;></script>
<!-- Очень часто, практически всегда, программисты используют именно такую конструкцию вызова скрипта с определёнными параметрами, используя для связки переменных знак &, однако использование этого знака не регламентировано в языке. Вместо него нужно использовать знак HTML-сущности &amp;-->
<script language="javascript" type="text/javascript">document.write('<a href="http://www.sait.templ">Адрес сайта</a>');</script> - <!-- В тексте данного кода тоже присутствует ошибка. Она довольно-таки частотная, вероятно, потому что любой браузер умеет интерпретировать её, но всё-таки данное написание не регламентировано W3C. Необходимо использовать знак \ для закрытия парных элементов кода-->

Давайте перепишем наши примеры на язык стандарта.

<script language="javascript" type="text/javascript">var a=5;</script> <!-- Мы прописали все необходимые параметры: тип и название языка-->
<img src="1.jpg" alt="Изображение" > <!-- Мы прописали обязательный атрибут alt, каждое изображение должно быть описано этим атрибутом, сделано это для браузеров, не отображающих графику или в которых графика отключена, к тому же все значения атрибутов должны быть заключены в кавычки -->
<p>...В случае вот такого &quot;столкновения&quot;...</p> <!-- Здесь мы поставили соответствующие знаки HTML-сущностей-->
<p><a href="ssylka" >Ссылка</a></p><!-- все теги должны быть вложены в друг друга -->
<!-- Тут стоит правильный комментарий //-->
<script language="javascript" type="text/javascript" src="adr.js?a=mp&amp;b=df;"></script><!-- вместо знака & мы устанавливаем HTML-сущность &amp;, которая выполняет все функции амперсанда в языках программирования-->
<script language="javascript" type="text/javascript">document.write('<a href="http://www.sait.templ">Адрес сайта<\/a>');</script> - <!-- Вот здесь указано решение проблемы: в таких выражениях необходимо использовать знак косой черты, только таким образом можно показать браузеру правильность интерпретации вашего кода-->

Ошибка 3: Используются теги, нерегламентированные в языке разметки HTML 4.01

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

<noindex></noindex> <!--Нововведение "Яндекса": запрет индексации всего того, что находится между этими участками кода. Это один из тех случаев, когда регламентация не соответствует удобству использования-->
<table><tr><td height="25" width="25">Таблица</td></tr></table> <!-- Атрибут height для таблицы не описан в спецификации. Скорее всего, это очередная разработка сторонней компании. Но на помощь нам приходит CSS (язык каскадных таблиц стилей), который мы можем использовать для создания параметра, совместимого со спецификацией.
<body marginheight="0" marginwidth="0"> <!-- подобные атрибуты были разработаны сторонней фирмой и не относятся к спецификации языка HTML 4.01. Вместо использования этих атрибутов лучше обратиться к CSS, где эта проблема быстро решается. -->
<table><tr><td background="im.gif" ></td> </tr></table> <!-- в спецификации языка HTML 4.01 отсутствует определение для атрибута background, в данном случае, опять же, выручает CSS-->

Согласно спецификации, писать эти примеры следует так:

<table><tr><td style="height:25px;" width="25">Таблица</td></tr></table> <!--В данном примере при помощи CSS мы смогли добиться идентичного результата работы параметра height. Мы использовали параметр style, который как раз и символизирует о работе кода CSS-->
<body style="margin:0px;"> <!--В этом примере мы тоже использовали CSS, присвоив параметру style значение кода CSS-->
<table><tr><td style="background-image:url(im.gif)"></td> </tr></table> <!-- В этом случае обойти ограничение нам позволяет значение тега style background-image -->

Мы с вами на небольших примерах разобрали основные ошибки, которые допускают веб-мастеры при проектировании сайта на HTML спецификации 4.01. Давайте, как мы когда-то учили русский язык, всё же выучим правильный HTML, ибо верно написанный код - это не только правильные показы страниц сайта, но и показатель грамотности их создателя. Удачи вам! Если появились вопросы, пишите, с радостью на них отвечу.

 

::Субъективная оценка Ваших сайтов::

Как часто вы задумывались над вопросом, насколько хорошо выглядят ваши веб-страницы? Как ваши страницы оптимизированы со стороны ранжирования Вашего сайта в поисковых системах? А может быть, вы упустили что-нибудь важное?..
У вас есть уникальная возможность получить в этом разделе оценку вашего собственного ресурса. Мы поможем вам найти то, что, по-нашему мнению, считается препятствием для достижения определённых результатов, которые делают ваш сайт успешным в неизмеримом пространстве Интернета.

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

Первым рассмотрим сайт http://www.kurort1.ru. По этому адресу располагается для кого-то известный, а для кого-то нет сайт "Курорта Михайловское".

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

Весьма неинтересно выглядит главная страница сайта. Неужели кроме газетного объявления больше нечего там написать? Типичное описание для какой-то обычной газетёнки, но никак не для сайта.

Мой вам совет: если нечего писать на главной странице: информации слишком мало или вы просто не хотите что-либо писать, тогда просто сделайте карту сайта. Ссылка - подробное описание. Это весьма удобно, хотя иногда кажется абсурдом. Трафик стоит дорого, дайте вашим посетителям знать, что у вас есть на сайте и для чего он как можно больше. Ваши страницы должны выглядеть чётко и информативно, а не так расплывчато, как ваша главная страница, где есть только подобие газетного объявления и неудачной фотографии здания, сделанной где-то подпольно в кустах: фасада здания не видно - одни кусты и деревья.

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

Не нравится мне и цвет посещённых ссылок: уж как-то слишком выбивается из общей цветовой палитры страниц. Ваши основные цвета на сайте - голубой, синий, зелёный. Вы же используете нетональный красный цвет, который привлекает к себе лишнее внимание, а делать он этого не должен - страница-то уже посещена.

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

http://validator.w3.org/check?verbose=1&uri=http%3A//www.kurort1.ru/index.html. Документ не соответствует заявленной спецификации HTML 4.01. Присутствует большое количество ошибок, которые необходимо исправить для совместимости с этим стандартном языка.

На странице весьма "грязный код", что приводит к увеличению размера исходного сайта и увеличивает лишний трафик. Везде происходит указание тега <font size="2" face="Verdana, Arial, Helvetica, sans-serif"> с заявлением шрифта, хотя всем уже давно известно, что шрифт можно задать один раз и в одном месте страницы, а в случае с CSS - в одном файле всего сайта. Используются нерегламентированные теги, многие значения тегов не заключены в кавычки.

Ваш сайт практически не оптимизирован для поисковых систем: на всех страницах однотипные описания метатегов description (иногда используется в "Яндекс" для описания страницы) и keywords. Заголовки не оптимизированы под заявленные ключевые слова. Нет разделения ключевых слов по страницам.

Ваш сайт хорошо оптимизирован по запросу "Курорт Михайловское", т. к. на каждой странице прописано название курорта. Однако не рассчитывайте на большую отдачу с поисковых систем, т. к. этот запрос вводят не больше 90 раз в месяц. Тег <title> у вас содержит около 107 символов, хотя достаточным количеством должно быть не больше 50, + 2 раза повторяется одно и то же слово "реабилитация" в одном заголовке.

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

 

Следующим сайтом, который бы мне хотелось рассмотреть сегодня, будет сайт http://kirpota.ru - авторский сайт Кирпоты Алексея, как я понял, созданный для продажи собственных музыкальных композиций через Интернет.

Хорошее начинание! Открытие собственного бизнеса в сети Интернет - отличное дело, на которое не у всех хватает духа. Весьма похвально, я считаю. Попробую вам помочь в поиске и исправлении технических и логических недочётов на вашем сайте.

Сразу хочется отметить: на вашем сайте не оптимизировано фоновое изображение. Его размер составляет около 100 килобайт, что не может быть признаком отличного стиля. Есть пользователи, которые выходят в Интернет при помощи медленного модемного соединения и дожидаться загрузки тяжеловесного фона просто не будут. Есть пользователи, которые платят за трафик, и опять же, трафик - деньги, и чем больше изображение, тем больше денег потратит посетитель, гуляя по страницам вашего сайта. И ещё - это дополнительная нагрузка на сервер вашего провайдера. Провайдер вашего сайта тоже платит за трафик, ему это может быть тоже не выгодно, особенно когда сайт посещает большое количество посетителей.

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

Мне совершенно непонятно, зачем "захламлять" страницу никому не нужным мусором в виде нетематических рекламных ссылок внизу главной страницы, которые только портят внешний вид вашей страницы. Совсем не смотрится и громадный рекламный блок на БЕЛОМ фоне, предлагающий пополнить счёт на мобильном телефоне и прикупить бытовую технику. Я, простой посетитель, пришёл на ваш сайт не для этого. Уж поверьте, я знаю, где я смогу пополнить свой счёт. Не надо предлагать посетителям на сайте всякий бред. Только тематическая информация! Больше ничего не надо.

Не очень удачно оформлены ссылки. Красный цвет выбивается из общего фона вашей страницы.

Не на всех страницах соблюдается целостность меню: в разделе об авторе, например, нет ссылки на добавление сайта в "Избранное". Гостевая книга вообще находится на другом сервере. Не знаю, в принципе, ничего страшного, но я бы предпочёл всё своё держать при себе. Зачем нужны чужие серверы, когда всё можно сделать у себя на сайте?

Страницы вашего сайта не являются правильными с точки зрения стандарта XHTML 1.0 Transitional//EM, это может привести к неправильной трактовке вашего сайта браузерами. Вот страница с ошибками: http://validator.w3.org/check?uri=http%3A%2F%2Fkirpota.ru%2Findex.html. Это результат некачественного написания кода: отсутствуют кавычки, не прописаны типы для некоторых и тегов и т. д. Было найдено около 80 синтаксических ошибок кода.

Мне понравилось, что вы уделяете внимание метатегу description, который используется в некоторых поисковых системах для вывода описания сайта в результатах поиска. Сайт проиндексирован поисковыми система "Яндекс", Google и Yahoo!. Однако над сайтом практически не проводилась работа по оптимизации. Сайт имеет тИЦ=10 и PR=0, что служит тому подтверждением. Сайт не прописан в "Яндекс.Каталоге". Очень мало внешних ссылок на сайт.

По заявленным поисковым запросам "музыка", "поэзия", "душа" сайт не присутствует среди первых 50 пунктов, поскольку он просто не оптимизирован под эти слова. Если вы хотите, чтобы ваш сайт был доступен по этим словам, необходимо начать работы по оптимизации страниц сайта и раскрутке. А вот под запрос"Музыка для души" ваш сайт прекрасно оптимизирован: "Яндекс" - 1 позиция, Rambler - 1 позиция, Google - 6 позиция. Однако этот запрос не пользуется особой популярностью: всего около 300 запросов в месяц по статистике рекламных контекстных объявлений "Яндекс.Директ".

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

 

Уважаемые подписчики! Вы тоже можете предложить ваш сайт для оценки нами. Ознакомьтесь, пожалуйста, со всеми правилами, ответами на частозадаваемые вопросы, и заполните форму на этой странице: http://vitaweb.pp.ru/critics.php

 

::Словарь веб-мастера::

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

1) Релевантность - это такой параметр, по которому можно определить, подходит ли конкретный веб-сайт какой-либо теме. Если страница сайта подходит конкретному поисковому запросу, то говорят, что страница релевантная по такому-то запросу. Если страница нерелевантная какому-то запросу - значит, страница не соответствует запрашиваемой тематике.

2) СЕРП - или (SERP) - это страница результатов поиска. Всё то, что вы видите после ввода запроса и нажатия кнопки "Поиск" на сайте поисковой системы.

3) Ключевое слово - это важный параметр при раскрутке сайта. Ключевым называют слово или словосочетание, которое чётко определяет тематическую принадлежность текущей страницы сайта или сайта целиком к какой-то темые или предмету, которые пользуется спросом у людей, ищущих через поисковую систему. Другими словами, ключевое слово - это такое слово, по которому вас можно найти в поисковой машине.

4) PR и тИЦ - важные параметры, помогающие окончательно установить релевантность сайта или страницы. Несмотря на то, что это своего рода фильтры одного назначения, работают они по-разному. тИЦ - тематический индекс цитирования.
Параметр, используемый "Яндексом" для определения позиций того или иного сайта в "Яндекс-Каталоге". В последнее время активно используется людьми, которые занимаются раскруткой сайтов в качестве так называемых галочек проделанной работы. Считается, если у сайта повысился тИЦ, значит, над сайтом хорошо работает оптимизатор. тИЦ не влияет на результаты выдачи поисковой системы. PR - параметр/фильтр, введённый компанией Google, для определения важности текущей страницы на основе ссылок с других страниц.
Считается, чем выше PR, тем больше сайтов ссылается на конкретную страницу, - страница популярна. PR высчитывается для каждой страницы, а не к сайту в целом, как это происходит при определении тИЦ.

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

6) Семантическое ядро - набор ключевых фраз, которые наиболее точно соответствуют тематике искомого сайта.

Пишите мне vitaweb@bk.ru, какие термины в области веб-технологий Вам непонятны, я попытаюсь объяснить Вам значение.

 

::Ресурсы веб-мастера::

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

DMOZ.org

Самый большой редактируемый людьми каталог ресурсов, позволяющий найти самые лучшие сайты какой-либо человеческой сферы знаний. Оно и понятно: над каталогом не покладая рук работают самые различные люди, напоминающие мне муравьёв, которые строят большой муравейник. Поражает ответственность и заинтересованность тех людей, которые добавляют туда сайты. А вот это уже наш профессиональный раздел: http://dmoz.org/World/Russian/Компьютеры/Интернет/Дизайн_и_разработка_сайтов/. Здесь расположены именно те ресурсы, на которые следует обратить внимание.

Знаете какой-то уникальный и полезный ресурс, посвящённый любой области веб-технологий? Дайте знать о нём всем. Пишите vitaweb@bk.ru. Самые интересные и уникальные ресурсы будут опубликованы в этом разделе.

 

::Новые статьи в библиотеке::

Раскрутка сайта:

Модель сайта нового поколения

Новое поколение моделей веб-сайтов будет иметь в корне отличающийся подход к предоставлению информации. Веб-сайты будут использовать адекватные информационные платформы, которые будут иметь преимущество в области мультимедийных возможностей Интернета.
Новые информационные модели - это своего рода собственный узконаправленный поток информации, сопряжённый с многочисленными аудио и видеоэлементами, цель которых - заинтересовать аудиторию вашей информацией.
Но в отличие от телевидения, этот персонифицированный способ позволит посетителям самим делать выбор того, что они хотят увидеть. Хотят ли они видеть просто текст с картинками, или же аудио и видеоконтент. Ваша задача - позволить им этот выбор осуществить.
Читать дальше >>>

Три подхода в использовании системы Google Sitemaps

Недавно компанией Google был представлен новый механизм упрощающий индексацию сайта, при помощи которого любой веб-мастер может создавать так называемую карту сайта и предлагать её для индексирования в Google. Это самый быстрый и простой вариант, который позволит индексировать ваш сайт чаще, предоставляя людям, которые ищут через эту поисковую систему, самую свежую информацию о вашем сайте.
Читать дальше >>>

Вёрстка веб-документа:

Вычищаем HTML-код

В статье я расскажу, как можно контролировать правильность HTML-кода веб-
страниц. Вашему вниманию будет представлено несколько инструментов для
проверки и контроля HTML-кода с точки зрения стандарта.
Читать дальше >>>

Публикация информации:

Полный контакт

Язык – это и инструмент, с помощью которого мы влияем на окружающий мир, и признак, по которому мы определяем в людях, в книгах, в фильмах, в сайтах очень многое. Это наше первичное и наиболее мощное оружие, которое отличает нас от других существ. Язык помогает нам налаживать контакты, выстраивать сложные речемыслительные комбинации и воздействовать друг на друга.
Наша речь отражает наши индивидуальные особенности, а ещё она помогает нам противоборствовать между собой и действовать друг другу на нервы. Читать дальше >>>

Хотите стать популярным? Пришлите мне свою статью для публикации на сайте. Сохранение Вашего авторства гарантируется! Подробнее >>>

 

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

На этом всё. Спасибо за внимание! Успехов и хорошего настроения!

© Демьянчук Виталий, 2007 год. vitaweb@bk.ru Все авторские права защищены.
 
  Вопросы и пожелания
Использование моих материалов разрешено, если Вы не забудете указать ссылку на сайт http://vitaweb.pp.ru и моё имя.

В избранное