|
Помогите мне. Я ничего не понимаю в курсе (((((( (от слова "совсем") и мне от этого очень грустно. Есть ли какие-нибудь курсы для "чайников", самые простые в объяснении. ПАМАГИТЕ!!! |
Опубликован: 28.11.2008 | Доступ: свободный | Студентов: 8251 / 871 | Оценка: 4.49 / 4.28 | Длительность: 37:04:00
Темы: Интернет-технологии, Программирование, Школа
Специальности: Разработчик интернет-проектов
Теги:
Лекция 18:
Ссылки HTML - давайте создадим сеть Web!
Соединение с ресурсами, отличными от HTML - не заставляйте людей гадать
Может быть очень досадно, когда после щелчка на ссылке браузер не знает, что делать с тем, на что указывает эта ссылка. Однако достаточно часто можно видеть Web-сайты со ссылками на изображения, документы PDF, и видео, которые не предупреждают об этом посетителей. Видео особенно часто становится причиной для отказа браузеров. Более того, ресурс может быть большим по объему (PDF файл размером 20 Мбайтов, например), который посетитель мог бы предпочесть загрузить, а не открывать в браузере, или вообще не обращаться к этому документу.
Одним из важнейших факторов успеха Web-продукта является исключение для людей необходимости догадываться, что произойдет, когда они выполнят какое-то действие, и четко сообщить им вместо этого, какой результат будет иметь их действие. В случае ссылок для исключения разочарования достаточно сообщить посетителям, с каким ресурсом соединяется ссылка. Вот несколько примеров (linkingnonhtml.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Linking non-HTML resources</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
<h1>Linking non-HTML resources</h1>
<ul>
<li>Find more information on the <a href="http://developer.yahoo.com">Yahoo Developer Network site (external)</a></li>
<li>Download the <a href="http://www.wait-till-i.com/stuff/JavaScript-DOM-Cheatsheet.pdf">Dom Cheatsheet (PDF, 85KB)</a></li>
<li>Pick and <a href="ftp://get.opera.com/pub/opera/win/">download different Opera versions from their FTP (external)</a></li>
<li>Check out a <a href="http://farm1.static.flickr.com/56/188791635_0b8bdd808d.jpg?v=0">Photo of my book (JPG, 200KB)</a></li>
</ul>
</body>
</html>Предоставляя такую информацию о файле ссылки и его размере, вы оставляете принятие решения о том, что с ним делать, посетителям, а не предполагаете, что они имеют определенные настройки браузера или установленное программное обеспечение. Если соединить это с хорошим стилевым оформлением, то можно даже заставить это выглядеть симпатичным и интуитивно понятным. Если вы хотите быть совершенно безопасным, предложите также раздел справки, который поясняет, что означают различные форматы файлов, и где можно взять программное обеспечение, необходимо для их вывода.
Внешние и внутренние ссылки
Один из самых больших страхов руководителей компаний, когда речь идет о Web-сайте компании, состоит в том, что люди покидают сайт преждевременно. Это часто является причиной отсутствия ссылок на сторонние сайты (если только владельцы этих сайтов не платят деньги за право получения направленного им Web-трафика). Я вернусь к этому ошибочному решению позже; пока давайте поговорим о том, что делают люди, чтобы избежать ухода посетителей со своего сайта, и как эти меры влияют на успех сайта.
Фреймы и всплывающие окна - скажите просто нет
Страх ухода посетителей на другие сайты вместе с желанием иметь на них ссылку, породили несколько изобретений в разработке приложений Web, которые годами были помехой для создания удобных для использования сайтов: фреймы и всплывающие окна.
Использование фреймов HTML означает, что вы делите выводимую в браузере страницу на несколько различных документов. Преимущество состоит в том, что документ по внешнему виду остается таким же, даже когда части его загружаются либо с вашего собственного сервера, либо с серверов сторонних компаний. Однако именно здесь заканчивается полезность — фреймы являются ужасным опытом пользователей и фактически вредными.
- Поисковые системы никогда не смогут проиндексировать всю страницу, но вместо этого могут показывать части страницы в результатах поиска, что не имеет смысла в отрыве от контекста.
- Посетители не могут сделать на странице закладку - когда в следующий раз они открывают свою закладку, они получают начальное состояние множества фреймов, а не страницу, как они ее покинули.
- Посетители, зависящие от вспомогательных технологий, испытывают большие трудности при навигации по фреймам.
- Владельцы сторонних сайтов могут быть недовольны тем, что выводятся внутри множества фреймов, и могут использовать сценарии "разрушения фреймов", которые заменяют множество фреймов реальным URL, когда вы пытаетесь их использовать. Это делается для защиты от мошенников, соблазняющих пользователей Интернет ввести, например, информацию о кредитной карте на Web-сайте, который кажется похожим на банк (так называемый "фишинг").
Ссылки внутри множества фреймов используют атрибут target анкера для указания правильного фрейма. Каждый фрейм в множестве фреймов получает определенное имя, и активация ссылки будет открывать документ, определенный в атрибуте href в этом фрейме. Если множество фреймов недоступно (например, когда посетитель находит документ со ссылками через поисковую систему), каждая ссылка открывается в новом экземпляре браузера.
Открытие нового экземпляра браузера является другим распространенным способом соединения со сторонними сайтами — либо с помощью сценарного всплывающего окна, либо с помощью атрибута target со значением _blank. Тот факт, что каждый современный браузер поставляется со средством блокирования всплывающих окон должен подсказать, что использование такого подхода является совершенно неоправданным.
Короче говоря: не используйте атрибут target при создании ссылок, если только вы действительно знаете, что делаете. Однако это устаревшая идея — сегодня большинство браузеров имеют интерфейсы с вкладками, поэтому пользователи могут открывать сторонние сайты в фоновом режиме для дальнейшего чтения, оставаясь на вашем сайте. При некоторых обстоятельствах может понадобиться указать различие между внешними и внутренними ссылками, но всегда оставляйте на усмотрение посетителя, что они захотят с ними сделать.
Преимущества исходящих и входящих ссылок
Существует несколько серьезных причин для создания ссылок на сторонние сайты, даже когда они являются конкурентами.
- Это создает доверие в глазах посетителей - вы настолько уверены в качестве своего контента, что не боитесь конкуренции.
- Это возможность предоставить полноценную службу - можно связаться с контентом и статьями или даже продуктами на других сайтах, которые вы не охватываете, но которые могут быть интересны для тех посетителей, кто хочет глубже погрузиться в рассматриваемую тему.
- Вы можете доказывать свою точку зрения, опираясь на старую статью стороннего сайта, и предлагая лучшее или другое решение, и ссылаясь на старую статью в качестве доказательства через ссылку.
Полезность входящих ссылок (ссылок, указывающих с внешнего сайта на ваш) менее дискуссионна. Чем более убедительные и высококачественные сайты ссылаются на ваш с помощью подходящих ключевых слов, тем выше вы будете ранжированы в поисковых системах, таких как Google. Однако, прежде чем это произойдет, необходимо доказать, что вы также не боитесь ссылаться на других.
Подходящие ключевые слова ведут нас к другой очень важной части создания хороших ссылок: как их формулировать.
Формулировка ссылок
Частично этот вопрос уже рассматривался в разделе о ссылках на ресурсы, отличные от HTML, но можно лишний раз напомнить себе, что ссылки являются не только частью основного текста, но являются также интерактивными элементами в документе.
Некоторые вспомогательные технологии предлагают список ссылок вместо целого документа, чтобы позволить посетителям быстро по ним перемещаться, что означает, что необходимо сделать так, чтобы текст ссылок имел смысл вне контекста, в котором они находятся. Можно легко проверить это в браузере Opera, открывая Web-сайт и выбирая в меню Tools > Links или нажимая Ctrl + Alt + L. Будет создана новая вкладка, которая показывает все ссылки в документе, и куда они указывают.
Это означает, что необходимо гарантировать не только что тексты ссылок имеют смысл, но также что нет ссылок, которые имеют одинаковое выражение, но указывают на различные ресурсы. Классической ошибкой здесь являются ссылки "щелкните здесь", представленные например как "Для загрузки последней версии нашего инструмента щелкните здесь". Значительно лучше использовать текстовую ссылку, которая поясняет, на что она указывает — в данном случае "Вы можете загрузить последнюю версию нашего инструмента и проверить его самостоятельно".
То же самое применимо к ссылкам "продолжение". Они часто встречаются на новостных сайтах, где вы получаете заголовок и текст анонса и ссылку для перехода "продолжение" или "полная история". Решение этой проблемы состоит либо в использовании ссылочного изображения "продолжение" и задание для него уникального альтернативного текста, либо в добавлении интервала внутрь ссылки после "продолжение" и сокрытие его с помощью CSS. Вы узнаете больше об этих приемах в руководстве о меню и навигации позже в ходе курса.
Стилевое оформление ссылки
Bы пока еще не добрались в этом курсе до CSS, но будет полезно рассмотреть в этом месте, что способ представления ссылок очень важен, и что имеется несколько различных состояний ссылки, которые надо учитывать. Состояниями (которые позже свяжутся с псевдо селекторами CSS — это звучит угрожающе, но это не сложно) являются:
- link - состояние по умолчанию - оно определяет, как должны выглядеть ссылки в определенной части документа. По умолчанию непосещенные ссылки имеют синий цвет.
- visited - стиль ссылки, которая уже была посещена раньше (онa может уже находиться в кеше браузера). По умолчанию посещенные ссылки имеют пурпурный цвет.
- hover - стиль ссылки, когда курсор мыши находится над ней.
- active - стиль ссылки, когда она активируется, т.е. когда выполняется соединение с другим сайтом; это также стиль последней активированной ссылки, когда вы снова возвращаетесь к документу в своем браузере.
Заключение
Мы рассмотрели в этот раз достаточно много, но очень важно помнить, как работают ссылки, и что они должны делать. Вы узнаете много приемов и методов за свою карьеру разработчика Web, позволяющих переопределить это поведение по умолчанию, и я надеюсь, что вы остановитесь и задумаетесь, действительно ли нужно то, что вы собираетесь сделать.
Мы рассмотрели следующие вопросы:
- Анатомия элемента a и его (неисключенные) атрибуты.
- Различие между элементами a в качестве ссылок (с атрибутом href ) и анкеров (с name ).
- Необходимость уникального имени анкера, так как ID также может быть анкером.
- Необходимость сообщить посетителям, что их ждет, когда они следуют по ссылке (какой формат файла и его размер).
- Как добавить информацию через атрибут title , которая выводится как всплывающая подсказка - и почему это не является безопасным способом предоставления критически важной информации.
- Различие между внешними (указывающими на сторонние сайты) и внутренними (указывающими на документы на том же сервере) ссылки.
- Устаревшие практики, такие как всплывающие окна и фреймы, и почему нужно избегать их.
- Преимущества использования ссылок и быть объектом ссылки других сайтов.
- Как правильно формулировать ссылки, чтобы они имели смысл из контекста, и почему это необходимо.
- Основы базового стилевого оформления ссылок.
С этими знаниями вы сможете создать документы HTML, которые правильно используют ссылки, и вы будете готовы двигаться дальше к рассмотрению меню и навигации по сайту.
Контрольные вопросы
- Что неправильно в следующей ссылке: <a href="report.pdf" title="report as PDF, 2.3MB">get our latest report</a>?
- Для чего в ссылках используется атрибут target, и имеются ли для него хорошие применения?
- Я говорил об отношениях между ссылками и связях между ссылками и анкерами. Существует ли также атрибут для ссылок, который описывает отношения между документами?
- Как можно написать ссылку, которая после щелчка на ней направляет посетителей в элемент дальше вниз на странице? Что необходимо сделать заранее?
Об авторе
Крис Хайлман проработал Web-разработчиком в течение десяти лет, после того как бросил радио-журналистику. Он работает для Yahoo! в Великобритании в качестве инструктора и ведущего разработчика, и осуществляет надзор за качеством кода внешнего представления для Европы и Азии.
Крис поддерживает блог на сайте Wait till I come (http://wait-till-i.com/) и доступен во многих социальных сетях под ником "codepo8".
Bluesmoon (http://www.flickr.com/photos/bluesmoon/1545636474/)
Материалы этого курса имеют лицензию
Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.
Марина Походаева
Федор Антонов
|
Здравствуйте! Записался на ваш курс, но не понимаю как произвести оплату. Надо ли писать заявление и, если да, то куда отправлять? как я получу диплом о профессиональной переподготовке? |