Книга посвящена основным технологиям написания- Web-страниц: языку гипертекстовой разметки HTML, применению каскадных таблиц стилей CSS, а также созданию сценариев на основе JavaScript. Подробно рассмотрены базовые понятия Web-программирования. Описаны наиболее применяемые элементы и методы создания эффективного HTML-кода.
Книга может быть использована как пособие для начинающих разработчиков Web-страниц, а также в качестве справочника по HTML, CSS и JavaScript.
Эта книга уникальна. Она написана специально для вас, если вы чувствуете необходимость реализовать на создаваемых Вами Web-страницах собственные сценарии. Пусть у вас мало свободного времени, а детальное изучение используе мых для этого языков не представляется вам лучшим способом включиться в работу. Хорошо, если вы уже имеете некоторый опыт создания Web-страниц, знакомы с HTML и можете разобраться в HTML-кодах. В этом случае книга, которую вы держите в руках — это именно то, что Вам необходимо.
Если вы веб-дизайнер, то книга значительно расширит ваш кругозор и, вероятнее всего, поможет делать более грамотный дизайн с точки зрения HTML-верстальщика. Ну а если вы HTML-кодер, то эта книга способна перевернуть ваш взгляд на верстку в целом и на отдельные ее компоненты в частности.
Основным понятием CSS является стиль – т. е. набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходилось каждый раз описывать эти свойства, даже если на одной страничке должны располагаться 10 или 110 таких элементов, ничуть не отличающихся один от другого. Вы должны были десять или сто десять раз вставить один и тот же кусок HTML-кода в страничку, увеличивая размер файла и время загрузки на компьютер просматривающего ее пользователя.
CSS действует другим, более удобным и экономичным способом. Для присвоения какому-либо элементу определенных характеристик вы должны один раз описать этот элемент и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами. Удобно, не правда ли?
Более того, вы можете сохранить описание стиля не в тексте вашей странички, а в отдельном файле – это позволит использовать описание стиля на любом количестве Web-страниц. Потрясающе удобно! И еще одно, связанное с этим, преимущество – возможность изменить оформление любого количества страниц, исправив лишь описание стиля в одном (отдельном) файле.
Кроме того, CSS позволяет работать со шрифтовым оформлением страниц на гораздо более высоком уровне, чем стандартный HTML, избегая излишнего утяжеления страниц графикой.
Давайте рассмотрим, как мы можем воплотить столь замечательные возможности в жизнь.
Что же такое CSS и как с ним бороться? На самом деле, бороться с ним не стоит, его необходимо изучать, дабы расширить свои возможности при создании красивого Web-сайта. Под термином CSS мы понимаем фразу "Каскадные Таблицы Стилей". Они внедряются в HTML-код и не требуют никаких специальных редакторов и компиляторов, ведь интерпретируются оные обычным броузером.
PHP, что означает "PHP: Препроцессор Гипертекста", является широко используемым языком сценариев общего назначения с открытым исходным кодом. PHP создавался специально для ведения Web-разработок и может использоваться непосредственно в HTML-коде. Синтаксис языка берет начало из C, Java и Perl и является легким для изучения. Преимущественным назначением PHP является предоставление web-разработчикам возможности быстрого создания динамически генерируемых web-страниц, однако, область применения PHP не ограничивается только этим. Это руководство состоит, главным образом, из справочника функций, а также содержит справочник языка, комментарии к наиболее важным из отличительных особенностей PHP, и другие дополнительные сведения.
Эта книга уникальна. Она написана специально для Вас, если Вы чувствуете необходимость реализовать на создаваемых Вами Web-страницах собственные сценарии. Пусть у Вас мало свободного времени, а детальное изучение используемых для этого языков не представляется Вам лучшим способом включиться в работу. Хорошо, если Вы уже имеете некоторый опыт создания Web-страниц, знакомы с HTML и можете разобраться в HTML-кодах. В этом случае книга, которую Вы держите в руках - это именно то, что Вам необходимо.
Издание состоит из 12 глав. В каждой главе раскрываются наиболее важные особенности написания кодов и возможности обогащения HTML с использованием JavaScript. В тексте приводятся листинги программ. В целях приобретения опыта написания программ мы рекомендуем вводить примеры с клавиатуры, запоминать их в отдельном файле, который затем может быть загружен в броузер и проверен на работоспособность. Книга является практическим руководством, рассчитанным на начинающих пользоваться возможностями JavaScript для обогащения своих страниц.
У всех, кто когда-либо начинал более или менее серьёзно заниматься созданием вебстраниц, обязательно возникала мысль - а как неплохо бы было, если бы повторяющиеся фрагменты HTML-кода можно было бы писать только по одному разу - чтобы затем они вставлялись бы в нужные места страниц автоматически. Самые продвинутые пытались воспользоваться Java-скриптами, чтобы добиться этого - но тогда страницы начинали растекаться жиром на десятки килобайт, а браузеры посетителей захлёбывались в сложном и обьёмном коде скриптов.
Между тем решение проблемы давно уже было - правда клиентам бесплатных хостингов оно не было доступно. На Webservis.ru оно есть и зовут его "SSI" - "Server Side Includes". Перевести это можно, в принципе, как «сборкой страниц занимается вебсервер».
Те, кто хорошо умеет работать с графическим редактором Photoshop, могут сделать анимированный GIF непосредственно в этой программе. Но создания баннера или анимированной кнопки совсем не обязательно каждому изучать Photoshop. Есть множество специализированных программ для создания анимированной графики, которые в свою очередь имеют множество специальных инструментов и шаблонов, благодаря которым создание рекламного объявления или анимированного логотипа для сайта становится делом нескольких минут.
Программы создающие GIF-анимацию.
Те, кто хорошо умеет работать с графическим редактором Photoshop, могут сделать анимированный GIF непосредственно в этой программе. Но создания баннера или анимированной кнопки совсем не обязательно каждому изучать Photoshop. Есть множество специализированных программ для создания анимированной графики, которые в свою очередь имеют множество специальных инструментов и шаблонов, благодаря которым создание рекламного объявления или анимированного логотипа для сайта становится делом нескольких минут.
GIF Construction Set Professional.
На первый взгляд кажется, что эта программа проста но это не так. Возможности ее очень широки, и, в отличие от многих аналогичных программ, она позволяет компилировать анимационные файлы не только в формате GIF. GIF Construction Set Professional может преобразовывать созданную в ней анимацию или уже готовый GIF-файл в формат Macromedia Flash (SWF). Файл Macromedia Flash имеет свои преимущества и недостатки перед GIF. Так, например, степень сжатия изображения в GIF ниже, и файл SWF может включать в себя не только анимацию, но и звук.
При экспорте созданной анимации в файл Macromedia Flash, следует помнить о том, что если в анимированном GIF можно указать время отображения каждого кадра по отдельности, в файле SWF частота смены изображений будет фиксированной. Кроме этого, файлы SWF, в отличие от GIF не поддерживают прозрачности.
Экспортировать в формат Macromedia Flash циклическую анимацию не получится – файл можно проиграть только один раз. Для имитации многократно повторяющейся анимации необходимо вносить дополнительные изменения в HTML-код страницы, на которой будет расположен SWF файл.
Принцип создания анимированного GIF-файла такой же, как и разработка рисованного мультфильма. Создается группа изображений с несколько измененным рисунком, после чего указывается их последовательность, и все они экспортируются в единый файл. Изображения, из которых будет состоять GIF-анимация, в GIF Construction Set Professional отображены в виде столбца кадров. Инструменты для выполнения различных манипуляций с кадрами «спрятаны» в контекстном меню. Они дают возможность вращать, обрезать, выполнять цветокоррекцию, добавлять эффект тени, выполнять объединение и удаление кадров.
Для файлов, которые помещаются на интернет-странице, очень важно, чтобы их размер был как можно меньше. В утилите GIF Construction Set Professional имеется специальная функция «суперсжатия», благодаря которой программа анализирует код GIF файла и делает размер анимации несколько меньше.
Easy GIF Animator Pro
Эта программа сделана, так чтобы любая задача могла быть выполнена в ней буквально за несколько минут. Реализовано это за счет продуманного процесса создания нового анимационного файла. В программе имеется свои мастера настроек - мастер создания нового баннера и мастер создания новой кнопки. Удобство таких предварительных заготовок еще и в том, что в программе уже заложены стандартные основные размеры баннеров, которые не всегда можно запомнить. В программе содержатся небольшой набор шаблонов кнопок с разными текстурами: мраморные, стеклянные, деревянные и пр.
Чтобы несколько разнообразить монотонное «слайд-шоу» сменяющихся кадров на баннере или на другом графическом элементе интернет-страницы, Easy GIF Animator Pro предлагает использовать анимационные эффекты перехода от одного изображения к другому. Вторая картинка может, например, выезжать из угла кадра или медленно проступать поверх предыдущей. Easy GIF Animator Pro имеет скромный набор инструментов для редактирования каждого изображения в анимации. Однако, несмотря на то, что этот «арсенал» напоминает палитру инструментов программы Microsoft Paint, на практике оказывается, что его вполне достаточно даже для того чтобы сделать текстовый баннер «с нуля». Здесь можно создавать геометрические фигуры, выполнять заливку, добавлять текст и делать заливку изображения градиентным цветом или даже выбранной текстурой.
GIF Movie Gear
В этой программе практически полностью отсутствует возможность редактирования изображений. Единственный способ это сделать – изменять рисунок по пикселам, что не далеко не всегда удобно. Из этого можно сделать вывод, что программа GIF Movie Gear позиционируется не как самостоятельный инструмент для работы с форматом GIF, а как вспомогательная утилита, которую будет уместно использовать в паре с каким-нибудь графическим редактором. В программе даже имеется возможность указать путь на диске к утилите, которая будет запускаться всякий раз, когда возникнет необходимость изменить рисунок кадра.
В GIF Movie Gear хорошо реализована оптимизация выходного файла. Во-первых, с ее помощью можно управлять количеством цветов в индексированной палитре GIF-файла, а также вручную подбирать цвета индексированной палитры и сохранять ее в отдельный файл для повторного использования. Во-вторых, в программе есть целая группа настроек для уменьшения размера файла без потери качества изображения. Среди них – максимально возможная обрезка кадров, устранение ненужных кадров (например, повторяющихся), замена дублирующихся точек изображения с прозрачностью. Эффективность выбранных настроек может быть мгновенно просчитана программой и оценена в процентах сжатия от общего размера анимационного файла.
В GIF Movie Gear можно использовать не только для создания GIF анимации. С помощью программы можно также создавать иконки *.ico (вот тут и пригодится возможность точечного рисунка), обычные и анимированные курсоры (*.cur, *.ani). Кроме вышеперечисленных форматов, изображения могут быть сохранены в виде многослойного файла PSD или в виде секвенции изображений в других графических форматах.
Если необходимо особым образом пометить создаваемый файл GIF, в него можно внедрить комментарий. При этом внешне файл останется прежним, лишь слегка увеличится его размер.
Selteco Bannershop GIF Animator
Эта программа нацелена, в основном на создание баннеров. В списке наиболее часто встречаемых разрешений можно найти все популярные сегодня типы баннеров, от стандартного 468x60 до «небоскреба» (skyscraper). Bannershop GIF Animator имеет специальный режим для быстрого создания анимированного изображения. Работая в нем, достаточно составить список графических файлов, задать задержку перед выводом на экран следующего кадра и все, файл можно сохранять в формате GIF. По такому же принципу работает и мастер создания слайд-шоу из отдельных картинок.
В Bannershop GIF Animator можно использовать анимационные эффекты, которые разделены на три группы – Intro Animation, Animation и Outro Animation. В первом случае можно получить эффект появления выделенного кадра, в последнем – его исчезновение. Отчасти, эти эффекты напоминают эффекты перехода, однако их область применения шире. Они также могут использоваться как видеофильтры. Эффекты еще одной группы, Animation, заставляют изображение двигаться особым образом – скользить, дрожать и переливаться светом.
Если составленная цепочка кадров включает в себя изображения разного разрешения, можно воспользоваться функцией Autosizing Frames, которая будет увеличивать рабочее пространство до тех пор, пока его площади не будет достаточно, чтобы отобразить самый большой кадр.
Нередко при создании текстового баннера приходится использовать символьный шрифт. Для того чтобы отыскать нужный значок, приходится тратить довольно много времени или использовать специальные программы-менеджеры установленных в системе шрифтов.
Создавая текст на баннере, отыскать нужный символ в Bannershop GIF Animator очень просто. Команда Inserт Symbol откроет таблицу со всеми элементами выбранного шрифта. Перебирая названия в списке установленных в системе шрифтов и наблюдая за таблицей, можно легко найти то, что нужно.
Готовую анимацию можно сразу сохранять в виде HTML страницы, в коде которой уже указано название графического файла.
Среди прочих особенностей программы стоит отметить возможность экспорта подготовленной анимации в AVI и поддержку векторного формата WMF, изображение которого растрируется при импорте в программу.
Active GIF Creator
Если необходимо сделать большое количество похожих баннеров, анимированных кнопок или логотипов, стоит задуматься о том, как упростить процесс. В Active GIF Creator это можно сделать с помощью специальных скриптов.
Модуль для работы со скриптами Script Editor является главной "изюминкой" программы. Он дает возможность автоматизировать рутинную работу, записав последовательность действий в отдельный скрипт. Анимационные скрипты – это файлы с расширением *.agif, которые сохраняются внутри проекта и могут многократно использоваться во время работы над ним. Таким образом, можно автоматически перемещать объекты, изменять их размер, управлять их отображением.
Active GIF Creator может оптимизировать размер анимационного файла, в зависимости от указанной скорости модема. В программе можно сохранять Gif анимацию сразу с HTML кодом и при этом подбирать в окне предварительного просмотра цвет фона и текста.
Кроме этого, программа умеет создавать GIF-файлы из командной строки в пакетном режиме. Самостоятельно разобраться с этой возможностью достаточно тяжело, но, тем не менее, ответы, на все вопросы, касающиеся работы с командной строкой, можно найти в технической документации Active GIF Creator.
CoffeeCup GIF Animator
CoffeeCup GIF Animator - это отличный выход для тех, у кого нет никакого желания и времени разбираться со сложными настройками Photoshop только ради того, чтобы сделать аватар. Программа несложна в использовании и при этом имеет все необходимые инструменты для решения такой задачи. Так, например, программа поддерживает импорт видео-файлов, может задавать время задержки для всех кадров GIF-анимации сразу или по отдельности, устанавливать для каждого кадра свое время отображения, задавать цвет, который должен быть прозрачным на изображении. Настроек в программе минимум, и все они помещаются в небольшом окне программы, в котором происходит сборка и предварительный просмотр анимации.
Мастер оптимизации также практически не требует от пользователя никакого вмешательства – достаточно следовать его простым инструкциям, и размер файла будет уменьшен настолько, насколько это возможно, без потери качества изображения. Это достигается за счет ограничения индексированной палитры и устранения присутствующих в файле GIF внутренних комментариев. CoffeeCup GIF Animator также сохраняет сделанную анимацию в SWF, и при этом выводит на экран код, который нужно будет вставить, чтобы файл отображался на веб-странице.
Ulead GIF Animator
Компания Ulead известна, прежде всего, своим программным обеспечением для работы с цифровым видео, поэтому неудивительно, что ее утилита GIF Animator унаследовала черты настоящего видеоредактора. Так, например, программа изобилует всевозможными эффектами, большинство которых перекочевали в GIF Animator из стандартного набора эффектов перехода приложений для обработки видео - Video Studio и Media Studio Pro.
Количество встроенных эффектов можно и увеличить. Для этого в настройках Ulead GIF Animator можно указать расположение фильтров Photoshop и дополнительных фильтров, совместимых с графическим редактором от Adobe. Тут, впрочем, следует вспомнить о том, что со времени выхода последней версии GIF Animator, прошло довольно много времени, и новые фильтры программой от Ulead не поддерживаются.
В режиме, предназначенном для оптимизации файла, рабочая область для наглядности разделена на две части – в одной показываются кадры проекта до сжатия в формат GIF, во второй – после. Изменение настроек сжатия мгновенно отображается на конечном результате. Подбирать «золотую середину» в соотношении размер-качество можно используя ограничение цветовой палитры. Кроме этого, досутпно еще два параметра – Dither, определяющий точность передачи градиентного перехода цвета, и Lossy, отвечающий за количество потерь при сжатии изображения. Управлять кадрами анимации можно либо с помощью панели кадров, где они показаны в виде слайдов, либо с панели настроек, где эта же анимация отображена в виде группы слоев, каждый из которых означает отдельный кадр.
Среди различных форматов экспорта присутствует совершенно неожиданная функция – упаковка созданной анимации в исполнительный EXE-файл. В этом случае на выходе вы получаете один файл, при запуске которого происходит примерно следующее – на экран поверх открытых окон программ выплывает созданное в GIF Animator изображение, а затем воспроизводится анимация. Трудно сказать, какое применение можно найти для этой возможности программы, скорее всего, ее можно использовать для необычного оформления презентации, которая будет начинаться таким неожиданным появлением изображения, либо это может быть просто способ пошутить над коллегой по работе.
Программ GIF-анимации обязательно нужно держать под рукой – чтобы в один прекрасный момент проблема создания анимированного баннера не затормозила всю остальную работу. Для тех, кто постоянно создает анимационные баннеры в больших количествах, следует попробовать в работе редактор скриптов Active GIF Creator, для тех, кому нужно быстро сделать свой аватар или оригинальный юзербар лучше подойдет CoffeeCup GIF Animator. Ну, а если нужен просто универсальный и надежный GIF-аниматор, «на все случаи жизни», советуем присмотреться к хорошо зарекомендовавшей себя программе от Ulead.
Поисковая оптимизация - это комплекс работ над сайтом и внешними факторами для достижения наилучших позиций в поисковых системах в соответствии с выбранными ключевыми словами. Этот способ оптимизации позволяет достигать высоких позиций в результатах выдачи поисковых машин по профильным запросам (ключевым словам) и тем самым привлекать огромную часть целевых посетителей.
В настоящий момент единственным путём завоевать Интернет-просторы, является оптимизация и продвижение сайта в поисковых системах. С каждым годом число пользователей Интернета, а, следовательно, поисковых систем растет. А это значит, что поисковая оптимизация приносит все больше и больше выгоды владельцам сайта. Согласно статистике, около 85% пользователей ищут информацию при помощи поисковых машин, которые обеспечивают от 70% до 85% от общей посещаемости ресурса.
Основные этапы оптимизации сайта и поискового продвижения:
* анализ ресурса;
* составление семантического ядра для поисковой оптимизации;
* оптимизация сайта: тексты, навигация, код;
* поисковое продвижение сайта: регистрация сайта в каталогах, на досках объявлений и форумах, работа со ссылочным ранжированием.
Поисковую оптимизацию можно разделить на внутреннюю и внешнюю.
Внутренняя оптимизация сайта направлена на работу с самим сайтом. К ней относится:
1. Составление семантического ядра сайта.
Семантическое ядро представляет собой совокупность запросов (ключевых слов), смыслу которых отвечает интернет-ресурс. Семантическое ядро создается с учетом специфики сайта из наиболее распространенных и соответствующих ключевых слов. По такому списку ключевых слов отслеживается продвижение сайта.
Правильно подобранные ключевые слова станут эффективным оружием в конкурентной борьбе. Есть несколько рекомендаций по использованию ключевых слов на страницах интернет-ресурсов.
Советы по использованию ключевых слов:
* Всегда используйте более одного слова при выборе ключевых фраз. Исследования показали, что большинство людей вводят в строку поиска фразу, состоящую из 2-х слов и более.
* Избегайте самых популярных ключевых слов, потому что Вашему сайту придется конкурировать с миллионом других подобных страниц, среди которых те, что принадлежат более мощным компаниям.
* Оптимальная частотность ключевых слов - 5%. Использование большего количества ключевых фраз может превратить ваш документ в спам.
2. Оптимизация страниц сайта.
В нее входят работы с html-кодом и текстами (контентом) страниц. При оптимизации html-кода проводится правка непосредственно html-кода, коррекция META-тегов, заголовков, описаний страниц сайта, выделение нужных частей страницы специальными тегами. Все тексты страниц анализируются и корректируются в соответствии с ключевыми словами.
Основные факторы ранжирования, на которые надо обратить внимание:
* Теги title - заголовки страниц сайта, наиболее важный фактор, на который следует обратить внимание. В заголовки страниц необходимо прописывать слова, по которым вы планируете провести оптимизацию сайта, но не следует забывать о том, что текст, содержащийся в заголовке страницы, будет выдаваться в результатах поиска. Следовательно, заголовок страницы должен быть информативными и привлекательно выглядеть, ведь с большей вероятностью пользователь выберет именно такое описание страницы. Распространенная ошибка - использование одного заголовка для всех страниц сайта. Для каждой страницы заголовок должен разрабатываться отдельно, в соответствии с содержанием страницы.
*
* Тег meta name="description" content="описание страницы" - практически никак не влияет на ранжирование сайта, однако это описание страницы будет выдаваться, если ваш сайт будет найден по ссылке, поэтому всё же стоит составить грамотное описание страницы и включить его в данный тег.
* Теги заголовков h1-h6 - играют очень большую роль при ранжировании сайта. Рекомендуется включать ключевые слова в данные теги. Также можно оформлять данные теги с помощью стилей CSS, но в пределах разумного, т.е. заголовок h1 должен быть основным заголовком страницы, h2 - подзаголовком и т.д. При попытке включить весь текст на странице в данный тег, ваш сайт может быть вообще исключен из результатов поиска, так что рекомендуем вам пользоваться данными тегами осторожно и не злоупотреблять ими.
* Теги акцентирования b, i и им подобные - рекомендуется выделять ключевые слова на странице данными тегами, это может дать преимущество при ранжировании сайта.
* Плотность ключевых слов на странице - отношение количества ключевых слов и словосочетаний к полному текстовому объему страницы. Рекомендуемой плотностью является, по разным данным, от 5% до 7%.
3. Оптимизация структуры сайта.
Изменение внутренних ссылок на страницы, создание карты сайта, для того чтобы поисковый робот смог проиндексировать все страницы. После таких работ поисковым роботам будет проще и удобнее работать со страницами, что ускорит их индексацию.
Рекомендации по структуре сайта:
* Используйте текстовые ссылки на все страницы сайта с необходимыми ключевыми словами, используйте прямые ссылки вида: , поисковые системы очень хорошо распознают такие ссылки, использование сложных скриптов, таких как Java, PHP и т.п. для формирования ссылок лучше не используйте.
* При наличии большого количества страниц на сайте, сделайте карту сайта, можно даже разбить ее на несколько страниц так, чтобы одна страница не содержала больше 50 исходящих ссылок (это затрудняет работу поискового робота).
* Следуйте "правилу трех кликов", т.е. все страницы сайта должны быть доступны пользователю на расстоянии 3-х кликов от главной страницы.
* Старайтесь не использовать на страницах сайта большое количество flash и графики, страница не должна очень много весить.
К внешней оптимизации относятся действия по повышению "дружественности" к поисковым системам и авторитетности (популярности) интернет-ресурса. Чтобы увеличить популярность сайта нужно учесть такие факторы как:
1. Ссылки с сайтов с большим тИЦ и PageRank.
Такие ссылки являются качественными и обладают большим весом, что влияет на позиции сайта в результатах поиска.
2. Тексты описания ссылок.
Текст ссылки, содержащий ключевые слова, воспринимается поисковой системой как дополнительная рекомендация, подтверждающая соответствие поисковому запросу, что влияет на ранжирование сайта.
3. Ссылки на тематических сайтах.
Кроме текста ссылок поисковые роботы учитывают общее информационное содержимое ссылающейся страницы сайта и при схожести тематик дают таким ссылкам больший вес.
4. Односторонние ссылки.
Поисковые системы стараются отслеживать взаимные ссылки, поэтому отдают предпочтение односторонним ссылкам, считая их более подлинными и ценными.
5. Избегание "плохих" ссылок.
С тех пор как увеличение ссылочности стала одним из важных факторов ранжирования, число сайтов "каталогов ссылок" возросло. Поисковые системы негативно относятся к многочисленным каталогам сайтов и стараются обесценить такие ссылки или не учитывать их совсем.
Выбор ключевых слов является одним из важнейших этапов оптимизации сайта под поисковые системы. Так как поисковики являются основным источником целевых посетителей, то этому вопросу надо уделять особое внимание. Правильно подобранные ключевые слова помогут пользователям легко находить страницы сайта, а также повысят их позицию в результатах выдачи по запросу.
Итак, для начала необходимо проанализировать тематику сайта и постараться взглянуть на него глазами посетителя. Цель такого упражнения-разминки – подбор слов и выражений, по которым, на ваш взгляд, производится поиск подобных сайтов.
Теперь можно приступить к детализации задачи, а именно, подбору ключевых слов для каждой страницы сайта отдельно. Большинство начинающих разработчиков при оптимизации допускают одну критическую ошибку, а именно, оптимизируют все страницы под одни и те же запросы. Они не учитывают тот факт, что машины поиска каждую страницу рассматривают независимо от остальных, поэтому необходимо оптимизировать страницы по отдельности, тщательно подбирая для них ключевые слова.
При анализе страницы необходимо написать около двух десятков ключевых слов, из которых попробовать сформировать фразы с учетом возможностей морфологического поиска и расположить слова и выражения в порядке их соответствия тематике страницы.
Например, ваша компания занимается продажей бытовой техники. Вместо использования в тегах HTML-кода и содержимом страниц ключевой фразы “продажа бытовой техники”, нужно уточнить эту фразу в зависимости от содержимого каждой страницы. Если на данной странице внимание сфокусировано, например, на кухонных комбайнах, то теги и текст необходимо оптимизировать именно под это выражение.
Сейчас идет тенденция к оптимизации страниц больше под ключевые выражения, чем под отдельные слова. Это связано с повышением уровня интернет-пользователей, которые для уточнения поисковых запросов из ключевых слов с помощью служебных символов строят ключевые фразы, значительно повышающие релевантность результатов поиска.
Следующий этап - это анализ частоты запросов по пунктам списка, составленного на этапе обдумывания тематики сайта. Здесь уже придется излагать не свое видение сайта, а вооружиться поисковой системой. Желательно брать тот поисковик, в трафике которого вы больше всего заинтересованы.
Составленный список предполагаемых ключевых слов можно проверить, например, с помощью сервиса «Яндекс.Директ» и выделить в нем фразы, сходные с заданными изначально. Далее необходимо посмотреть количество запросов для каждого выражения, выбранного на первом этапе, и попробовать найти фразы-синонимы. Если для них количество запросов будет больше, есть смысл заменить первоначальный вариант.
Чтобы выявить близкие по значению выражения, можно использовать сервис «Рамблер-Ассоциации», который представляет статистику поисковых запросов и работает по принципу «Те, кто ищут [запрос пользователя], ищут также». Сервис предназначен в помощь пользователю, совершившему поиск по какому-либо запросу и не получившему нужной информации. Статистика “ассоциаций” помогает выяснить интересы пользователей, путем анализа списка запросов, схожих с основным. Для выявления англоязычных запросов можно использовать сервис Wordtracker, который в бесплатной версии выдает ограниченные отчеты по поисковым запросам.
Теперь необходимо проанализировать полученную статистику запросов по списку ключевых слов. Если по некоторым из них результаты зашкаливают за десятки тысяч, их однозначно можно убрать из дальнейшего рассмотрения т.к. эти слова используются многими конкурентами. Здесь надо учесть тот факт, что если для оптимизации будет выбрана слишком распространенная ключевая фраза, то потребуется много времени и сил, чтобы взобраться на вершину ранжированного списка результатов. Кроме того, привлеченный таким образом сетевой трафик будет плохо сфокусирован, т.е. процент целевых покупателей будет невелик. С другой стороны, если для ключевой фразы будет получено малое число результатов, то эффективность такой оптимизации также буде невысока.
Чтобы добиться компромисса в этом сложном вопросе, надо брать ключевую фразу, которая является оптимальной для тематики страницы и высоко конкурентной, и добавлять в нее описательные слова или, например, конкретные модели и торговые марки, т.е. конкретизировать представленную на странице информацию.
Часто многие сайты для привлечения большего числа посетителей используют для ключевых слов практически на всех страницах выражения типа “все модели”, “весь модельный ряд”, “огромный выбор” и т.д. Если на вашем сайте в самом деле представлены все модели некоторой торговой марки или же подавляющее большинство их, то лучшим вариантом будет оптимизация под такой запрос какой-то одной страницы, например с самой популярной моделью. При этом на этой странице обязательно должны быть ссылки на другие модели или на страницу с кратким представлением всех моделей в удобном для сравнения виде. Если в ключевой фразе перечисляются конкретные модели, то необходимо располагать их в порядке убывания популярности.
Очень часто при вводе поискового запроса пользователи не пишут прописные буквы в названиях компаний, торговых марок, городов и т.п. Т.к. некоторые системы поиска чувствительны к регистру символов, т.е. поиск по вариантам фразы с символами, преобразованными в нижний регистр, и с символами в верхнем регистре приводит к разным результатам. Поэтому, чтобы улучшить результаты поиска своего сайта, надо добавлять на страницы все варианты написания ключевой фразы. Если во фразе используются слова, которые по правилам языка пишутся с прописной буквы, то можно использовать ее версию со строчными буквами там, где она не будет видна для посетителей.
В зависимости от того, под какую систему поиска оптимизируется сайт, необходимо узнать поддерживается ли ей морфологический поиск, т.е. поиск по слову во всех его морфологических формах. Это значит, что поиск по фразе «оптовая покупка скидка» может быть интерпретирован, как “при оптовой покупке скидки” и т.д. Чтобы определить, выполняет ли данный поисковик морфологическую функцию, можно проработать поиск по различным версиям ключевой фразы и проанализировать результаты.
Необходимо не только постоянно проводить мониторинг частоты использования вашей ключевой фразы пользователями, но и отслеживать, как много других страниц также оптимизированы под нее. Т.е. надо постоянно следить за конкурирующими ресурсами, которые стоят первыми в рейтинге при запросе по данной тематике.
Таким образом, выбор наиболее эффективных ключевых фраз может буквально поставить на ноги ваш онлайновый бизнес, а неудачный, наоборот, разрушить его. Главное не забывать, что каждая страница оптимизируется под одну-две ключевые фразы, которые четко соответствуют ее тематике.
Множество владельцев малого бизнеса просто не имеют достаточно ресурсов для проведения рекламной компании, которая бы позволила раскрутить их интернет-ресурс. Именно для решения этой проблемы в интернете существует множество online сервисов, которые позволяют владельцу сайта самостоятельно (DIY, do-it-yourself) заняться популяризацией своей веб-странички.
На сайтах подобного рода специалисты по поисковой оптимизации могут дать вам множество полезных советов и рекомендаций. Эта статья предоставляет возможность мне поделиться с вами своим опытом в области поисковой оптимизации. Назовем эти рекомендации как "10 минут для поисковой оптимизации".
Эти советы будут полезны для каждого, у кого есть хотя бы несколько страничек, сверстанных на HTML, но все же главной темой данной статьи будет привлечение посетителей на вашу домашнюю страничку.
Первые шаги
Перед тем, как начать, следует рассмотреть несколько моментов, которые необходимо знать перед началом оптимизации. Только вот для этого может потребоваться и более 10-ти минут. Итак, следует учесть следующее:
Определитесь со своей целью:
99% из вас знают, какой именно товар вы собираетесь рекламировать, поэтому вам нужно только определиться с ключевыми словами, по которым посетитель и попадет на ваш сайт. Вот несколько полезных советов. Во-первых, нужно проанализировать статистику посещаемости сайта, чтобы узнать, по каким ключевым словам посетители попали на ваш сайт. Во-вторых, посетите сайт вашего конкурента, который широко известен в просторах интернета.
Посмотрите на заголовки нескольких его страничек и попытайтесь определить, какие именно ключевые слова используются. Также посмотрите исходный текст странички (в Internet Explorer'е его можно посмотреть с помощью пункта меню View (Вид) - > Source (Просмотр html-кода)) и скопируйте информацию, содержащуюся в META-тегах. На своей страничке же вы должны определиться с частотой (разумной) использования наиболее запрашиваемых ключевых слов.
Здесь очень важно заметить, что профессиональные оптимизаторы имеют у себя под рукой гораздо больше инструментов, да и информации для установки нужных ключевых слов (с высокой их частотой в тексте страницы).
Дизайн сайта - привлекателен ли он для покупателя?
Вот тут-то и находится один из подводных камней. Суть его в том, что непривлекательный дизайн сайта - это прямой путь к низкой посещаемости ресурса. Безусловно, на тему разработки юзабилити сайта (т. е его дизайна), написано очень много и книг, и статей. Но пусть в рамках данной статьи все аспекты юзабилити рассмотреть и не получиться, то несколько замечаний тут не помешает:
1. Избегайте использовать в цветовой гамме сайта необычные и странные цвета. В противном случае посетителю будет тяжело прочитать информацию на вашем ресурсе (красный текст на голубом фоне - вот вам и яркий пример ужасного дизайна). Также не рекомендуется использовать текст мелкого шрифта; старайтесь придерживаться размера шрифта в пределах от 10 до 12 (2 или 3 в Macromedia Dreamweaver).
2. Использование на сайте рекламных блоков (как графических, так и текстовых), будут только отвлекать ваших посетителей. К примеру, если вы продаете автомобили BMW, то рекламировать на сайте средство для повышения потенции "Виагра" будет очень некстати.
Каждый графический элемент на вашей страничке может как повышать, так и понижать доверие посетителей к вашему ресурсу. Старайтесь использовать это место на сайте очень мудро и пользователи это оценят.
10 минут на раскрутку
1. Проверка на спам
Перед началом работ по оптимизации одним из ключевых моментов является тот факт, для раскрутки своего сайта вам не следует использовать приемы, которые могут быть восприняты поисковой машиной как спам. Но самое неприятно в этом то, что вы можете об этом и не подозревать! Некоторые веб-мастера (с устаревшими знаниями о принципах работы поисковых машин) используют на веб-страницах скрытый текст. Они ошибочно полагают, что таким методом помогут сайту подняться в глазах поисковика. Но это в корне неверно и данный прием может только добавить проблем для поисковой оптимизации.
Для обнаружения скрытого текста нужно всего лишь с нажатой левой кнопкой мыши провести от начала до конца страницы. Выделив таким образом всю страничку, можно легко найти скрытый текст (как правило, цвет шрифта у скрытого текста совпадает с цветом фона странички) - он просто будет выглядеть как подсвеченный.
Также вам захочется проверить частоту ключевых слов, которые встречаются на страничке. В данном случае является недопустимым повторение 5-6 ключевых слов, которые расположены друг за другом. Таким образом поисковую машину уже не проведешь, так что лучше таких приемов не использовать.
Для получения более детальной информации о нечестных методах раскрутки, которые приводят только к негативным результатам, можно ознакомиться с документом: "Inspecting your Web Site for Spam."
2. Проверка на релевантность (значимость) сайта для поисковой машины
Очень важно для вашего ресурса всегда быть в фокусе у поисковика. Для примера, если ваш ресурс будет ассоциироваться с ключевой фразой "Продажа автомобилей BMW", то ссылка или информация о продаже недвижимости будет совершенно излишней. Имейте в виду, что большинство поисковых машин будут судить о вашем ресурсе именно в зависимости его тематики. А она в первую очередь зависит от текстовой информации, которая содержится на страницах вашего сайта.
3. Подбор правильного содержания сайта
Текстовая информация на вашем сайте является решающей для удержания на сайте человека, который только что на него зашел. К слову, что это так важно, хочу добавить, что у множества компаний есть свой профессиональный копирайтер, который и занимается контентом (информацией на сайте). Поэтому так важно при написании статей придерживаться ключевых слов, которые вы выбрали в качестве цели для поисковой оптимизации своего ресурса. Но, в свою очередь, размещать ключевые слова в тексте без связи с остальной информацией (т. е ключевые слова не соответствуют тематике статьи) - верный путь потерять посетителя вашего сайта.
Важное замечание: очень часто первые 25-30 слов вашего сайта - это то, что каждый поисковик будет использовать для его описанию. Постарайтесь использовать ваши ключевые слова внутри этой области, не забывая при этом, чтобы это самое описание выглядело разборчиво и наглядно.
4. Работа над заголовком сайта (Title)
В заголовок вашей странички очень желательно поместить те ключевые слова или фразы, которые наиболее полно характеризуют предмет рекламы на ней. Для примера: "Продажа автомобилей BMW - MeBMW.com" Для поисковых машин заголовок является очень важным, а ключевые слова (фразы) в нем только помогут выше подняться в рейтингах. Но здесь главное не переусердствовать и использовать ключевые слова в пределах разумного. Заголовок также играет большую роль и в релевантности сайта. Именно его содержание будет сравниваться с текстовой информацией (контентом) остальной части веб-страницы. Чем больше будет совпадений у заголовка страницы с ее контентом, тем более она будет значимой для поисковой машины.
6. Навигация сайта... Сделайте ее интуитивно понятной
Могу предположить, что вы, как и большинство, используете для навигации на своем сайте графические элементы или текстовые ссылки. Здесь вам один мой небольшой совет - создайте меню для навигации на своем сайте предпочтительнее в виде текстовых ссылок его разделы. А разместить его лучше внизу страницы - так удобнее для посетителя. Теперь, при добавлении разделов, вы их можете называть, используя ключевые слова/фразы для лучшей информативности описания вашего раздела. Для примера сравним два варианта меню:
Аксессуары к автомобилям BMW | Продажа автомобилей BMW | Подробнее о MyBMW.com
и как после этого смотрится вот такое:
Аксессуары | Продажа автомобилей | О нас
7. Проверьте работоспособность ссылок и орфографию/грамматику
Совсем уж не помешает еще разок проверить все ссылки на сайте и правописание. После чего, если вы уверены, что это уже окончательный вариант, можете смело загружать сайт в интернет.
Спешить нужно медленно
А что же дальше? Сейчас много поисковых машин предлагают такую платную услугу, как предоставление вашему новому веб-сайту постоянную или срочную индексацию. В противном случае неизвестно, когда же до него доберется поисковый паук и проиндексирует его в своей базе. Если же вы воспользуетесь услугой срочной индексации, что уже через пару дней можно пожинать плоды в виде посетителей. Правда, у каждой поисковой машины здесь свои сроки.
Но все же эта статья посвящена тем, у кого денег для такой услуги попросту нет (да и стоит она недешево, вот может с первой прибыли ею и воспользуемся). Тем не менее, если ваш сайт уже посетил поисковый робот и внес его в свою базу, то вам остается теперь только ждать, когда он опять посетит его вновь на предмет наличия нового материала. Вот поэтому так важно своевременно обновлять контент на сайте - добавлять новые статьи, заводить новые разделы и т.д. (все зависит от вашей фантазии и сообразительности).
Но что же делать, если же вы желаете уменьшить это время или если до вашего сайта робот еще и не добрался? Вот для этого и придется кропотливо регистрировать все ваши новые странички вручную на сайте поисковика. А перед регистрацией (первой или повторной) не помешает также внимательно ознакомиться с правилами, которые очень подробно расписаны у каждого поисковика. Так, на всякий случай.
Эта статья посвящена всем вебмастерам, которые занимаются не только созданием сайтов, но и их продвижением в сети интернет. Под продвижением подразумевается получение посетителей на сайт (так называемого трафика).
На эту тему уже написано большое количество статей как русскоязычных оптимизаторов, так и зарубежных. Но до сих пор так и не выработано единого способа раскрутки, который бы 100% действовал для всех сайтов. Ведь у каждого сайта не только разная тематика, но и на него ведут разные ссылки опять-таки с разных сайтов, в немалой мере влияет название домена, html-код веб-страницы и даже грамотность текста.
В последнее время комплекс мероприятий по раскрутке сайтов называется seo (search engine optimization - оптимизация под поисковые машины). Почему именно под поисковые машины - потому что они дают целевой трафик и ими пользуется 60-80% (по разным оценкам) пользователей интернета. В мире очень много поисковых машин, толком даже никто не знает точного их количества, но главные известны - для рунета это Яндекс и Рамблер (недавно возник поисковик Вебальта, но пока от него заходит лишь индексирующий бот, а не посетители), для мирового инета - это Гугл (Google), Yahoo! и MSN. Последний, кстати, разработка компании Майкрософт, скорее всего и был бы неизвестным поисковиком, если бы не маркетологи компании, которые интегрировали его в ОС Windows - вот такой хитрый ход
Теперь о самой раскрутке. В первую очередь следует ориентироваться на два поисковика - Яндекс и Гугл (плюс Яху, если сайт англоязычный). Как показывает практика seo, только от этих поисковых машин можно получить какой-нибудь приличный трафик, который уже можно сконвертировать в вечнозеленые денежные знаки. Поэтому на форумах и блогах о поисковых машинах и поисковой оптимизации следует следить за новостями и методикой раскрутки именно для этих машин.
Спросите любого вебмастера, который уже не первый год занимается сайтами и он вам скажет, что создать сайт - это самое простое, а вот раскрутить его и получить стабильный трафик - это труд не одной недели и даже не одного месяца. Это самый настоящий труд, а не виртуальный, как может многим показаться - сидишь себе дома, серфишь по инету и ходишь в банкомат снимать деньги. Так думают только новички интернет-коммерции, те же, кто в этом бизнесе уже много лет скажут, что зарабатывать в инете гараздо труднее, чем в рельной жизни.
Проблема раскрутки может быть не такой острой, если на раскрутку вы можете выделить определенное количество финансов, но еще не все можно купить. Так, можно купить ссылки, но они могут быть не совсем тематическими или по ним не будет переходов на ваш сайт, можно заказать раскрутку через САР (системы автоматической раскрутки - я смотрю ваш сайт, вы - мой), получить первые места в топах, но иметь заказав на сайте. А все потому, что нет целевого, заинтресованного посетителя, которого может дать или поисковик или контекстная реклама (по поводу последней - можно долго спорить, но все же лучше САР и баннеров).
Но главное - не впадать в депрессию, тут действует единый принцип, на котором устроен мир - раз у кого-то получилось, получится и у меня. Главное не пасовать и сидеть сложа руки, расстраиваясь, что на ваш мега-сайт вот уже несколько месяцев нет посетителей. Для примера можно пройтись по нескольким сайтам, на которые вы сами попадали через поисковики при поиске софта или реферата - этим сайтам уже по 3 и более лет, на них уже собрано тысячи статей и обзоров программ.
Думаете, что человек взял да набрал все эти тысячи статей за ночь или какую софтину написал, чтобы она за него их сочиняла? Ну в первом случае все ограничено возможностями человека, а во втором - ну кому был бы интересен не текст, а бессмысленный набор слов? Все дело в постоянном добавлении новых статей, разделов, рубрик - вот со временем и вырастают такие монстры, не страдающие от нехватки трафика.
Естественно, что раскрутка домашней странички, информационного проекта и интернет-магазина - это разные виды раскруток, разные тактики и методы. Так, для домашних страничек важен ее главный герой, для информационного проекта (онлайн-журнал, газета) важно уделять внимание оптимизации текста, соблюдать частоту употребления ключевых слов, а для интернет-магазина нужно больше мультимедийной рекламы (баннеры, флеш, промоакции, покупка рекламных блоков, партнерские программы) чтобы сделать магазин узнаваемым.
Ясное дело, что при раскрутке любого ресурса нельзя ограничиться только одним, или двумя способами, большое значение имеет комплексный подход. Применение любого способа “в отрыве” от остальных даст слишком слабый, либо кратковременный результат. Ни первое ни второе неприемлемо для вашего сайта.
Результаты мероприятий по раскрутке требуется как-то измерять. Обычно это делается с помощью систем статистики, или счётчиков. Речь о них пойдёт в следующей статье.
Время от времени мы хочем добавить на наш сайт интерактивности. Часто это бывают флеш-баннеры или просто gif-анимация. Некоторые же предпочитают добавлять на сайты музыкальные элементы. Но при этом не следует забывать о такой вещи, как дополнительные расходы на трафик, которые, несомненно, тоже необходимо учитывать.
Чаще всего используются звуковые файлы в форматах mp3 или wav. Как правило, они сильно сжаты для экономии времени их загрузки, не все ведь имеют выделенные каналы на несколько мб за секунду.
Даже само консорциум W3C довольно негативно относится к использованию тега <embed> на вебстраницах. Ведь в больщинстве сайтов звук не используется, поэтому его наличие чаще всего вызывает неприятные эмоции при посещении сайта с фоновой музыкой.
Но иногда встроить фоновый звук бывает необходимо. Рассмотрим, как это делается.
В реализации на HTML использование фоновой музыки не является сложной задачей. Вам просто необходимо выбрать звуковой файл. Это может быть музыкальная композиция в формате mp3, wav или ином, но при этом она должна быть как можно меньшей по размеру.
Теперь осталось лишь интегрировать звук в веб-страницу. Для этого был создан специальный тег <embed>.
Рассмотрим пример интеграции музыки в html-код. Вот пример кода, который будет воспроизводить музыку:
.
.
.
.
.
Этот простой фрагмент кода просто проигрывает данный ему mp3 файл. Естественно, всякий звуковой файл имеет свою длительность. Но нам бы хотелось, чтобы при завершении его звучания, он снова стал проигрываться:
Также можно контролировать размеры плагина:
Также было бы здорово, если бы у посетителя была возможность контролировать фоновую музыку, но иногда это трудно интегрировать в дизайн. Поэтому можно установить у тега <embed> вот такой скрытый параметр:
Осталось лишь посоветовать быть очень осторожным при использовании фоновой музыки на вебсайте. Ведь мы ставим цель привлечь пользвателя и сделать его пребываение на ресурсе приятным.