×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

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

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

  • Рубрики
  • Слайдер
  • Сайдбар
  • Подписка
  • Вниз
  • Вверх
×
  • Как сделать сайт с нуля своими руками (вводная часть)

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

    Здравствуйте уважаемый посетитель!

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

    Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system - система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

    Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

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

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

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

Самописный сайт своими руками!

Текущее состояние создаваемого сайта

Здесь можно посмотреть текущее состояние тестового самописного сайта, который создается в рамках цикла статей Сделай сайт с нуля своими руками.

Где в дополнительных материалах можно бесплатно скачать исходные файлы сайта с таблицами MySQL.

Вы здесь: Главная → Сборник статей → Как сделать поиск по сайту



Как сделать поиск по сайту

Здравствуйте уважаемый посетитель!

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

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

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

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

Заказ же поиска на стороне будет весьма накладен, так как такая работа посильна только для специалистом хорошего уровня.

В нашем случае мы не будем изобретать велосипед и при создании сайта воспользуемся готовым решением с использованием сервиса Яндекс.Поиск. На мой взгляд, на сегодня это лучший вариант создания на сайте системы поиска. Так как,

  • во-первых, использование Яндекс.Поиск имеет ряд функциональных преимуществ, которые свойственны "большому" поиску Яндекса, а именно: учет морфологии и лексики языка, автоматическое исправление опечаток и неправильных раскладок, возможность использования синонимов и подсказок;
  • а во-вторых, при таком варианте имеется возможность встраивать формы и результаты поиска в HTML-структуру сайта с учетом существующего дизайна.

Однако, использование сервиса Яндекс.Поиск возможно только в случае, если имеются подтвержденные права на управление сайтом. Поэтому, прежде чем непосредственно заниматься установкой поиска, сначала, в первой статье этого раздела, используя сервис Яндекс.Вебмастер мы подтвердим права на размещенный в интернете тестовый сайт avtobezugona.ru.

скриншот 90

А затем, в следующих статьях с помощью конструктора Яндекс.Поиск сформируем HTML и CSS код формы и результатов поиска. А потом посмотрим, как все это можно будет вставить на сайт, максимально адаптируя к его внешнему виду.


Статья 1 сборника
2018-04-04

Добавляем сайт в Яндекс.Вебмастер и подтверждаем его права

  • Что такое Яндекс.Вебмастер и для чего он нужен
  • Добавляем сайт в Яндекс.Вебмастер и подтверждаем права на его управление
  • Проверяем настройки и информацию о сайте

Здравствуйте уважаемый посетитель!

Сегодня, для того, чтобы иметь возможность использовать Яндекс.Поиск мы добавим размещенный в интернете тестовый сайт avtobezugona.ru в Яндекс.Вебмастер и подтвердим права на его управление.

Следует отметить, что сервис Яндекс.Вебмастер является важнейшим средством для ведения и продвижения своего интернет-ресурса. Который позволяет получать необходимую информацию о функциональном состоянии сайта, а также доступ к инструментам, предоставляющим возможность ускорить индексацию страниц, проверить правильность robots.txt, загрузку карты sitemap.xml и т.д.

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

Помимо Яндекс.Вебмастера существует и аналогичный инструмент поисковой системы Google. Поэтому для лучшего продвижения сайта желательно его добавить и в Google для веб-мастеров.

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

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


Статья 2 сборника
2018-04-12

Устанавливаем Яндекс Поиск на сайт

  • Подготовка к созданию поиска
  • Определение области поиска
  • Настройка внешнего вида поисковой формы
  • Настройка результатов
  • Проверка настроенного поиска
  • Получение кода для вставки на сайт

Здравствуйте уважаемый посетитель!

В предыдущей статье мы подтвердили права на управление сайтом и теперь можем перейти к вопросу установки Яндекс.Поиска на сайт. И сегодня сформируем HTML и CSS код поисковой формы и результатов ответов по заданным запросам, которые в дальнейшем будем размещать на сайте.

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

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

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

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


Статья 3 сборника
2018-04-23

Формируем форму поиска для сайта (для исходного кода Яндекс.Поиск)

  • Размещаем HTML-код формы поиска
  • С помощью стилей CSS формируем внешний вид формы поиска
  • Исходные файлы сайта

Здравствуйте уважаемый посетитель!

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

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

Следует отметить, что оформление формы Яндекс.Поиск под дизайн сайта, не совсем простое занятие.

Сложность заключается в том, что в ней присутствует скрипт на языке JavaScript, который обеспечивает взаимодействие формы с сервисом Яндекс.Поиск. И при его выполнении после каждой загрузки страницы происходит динамическое изменение HTML и CSS кода самой формы. Что, соответственно, приводит к искажению ее внешнего вида.

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

В этой статье мы рассмотрим первую часть, оформив поисковую форму для исходного HTML-кода, полученного непосредственно с сервиса Яндекс.Поиск. А в следующей, посмотрим как можно откорректировать стили CSS для того, привести ее внешний вид в исходное состояние после ее динамического изменения, связанного с выполнением скрипта.

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

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

Несмотря на то, что создание в предыдущих статьях поиска от Яндекс производилось непосредственно на действующем, размещенном в сети Интернет сайте "avtobezugona.ru" (создание Яндекс.Поиска возможно только на реально действующих ресурсах), для наглядности, рассматриваемые здесь операции по формированию его элементов будут производиться на примере варианта сайта "newsite.local", размещаемого на локальном веб-серевере.

скриншот 90


Статья 4 сборника
2018-04-30

Формируем форму поиска для сайта (для динамического измененного кода Яндекс.Поиск)

  • Определяем динамически измененный HTML-код
  • Определяем измененные CSS-свойства для элементов формы
  • Дополняем CSS-код в соответствии с измененной формой поиска
  • Дополняем медиазапросы для установки размера шрифта
  • Исходные файлы сайта

Здравствуйте уважаемый посетитель!

Ранее мы оформили внешний вид формы для варианта с исходным HTML и CSS кодом, непосредственно полученным с сервиса Яндекс.Поиск (рис.6 в предыдущей статье).

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

Необходимость проведения таких дополнительных преобразований связана с тем, что внешний вид формы с измененным кодом отличается от исходного. В этом состоянии искажается размер и расположение элементов, а также размер шрифта и цвет кнопки (рис.7 в предыдущей статье). И конечно же, это нужно исправить.

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

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

Но для сегодняшней задачи мы их будем использовать только для определения реального динамически измененного HTML и CSS кода веб-страницы после ее окончательной загрузки и выполнения всех имеющихся в ней скриптов.


Статья 5 сборника
2018-06-05

Обновляем кэш браузера для статических файлов

  • Проверяем фактические настройки HTTP-заголовков механизма кэширования
  • Проверяем отображение страницы при изменении файла main.css до преобразований
  • Суть способа автоматического обновления кэша браузера
  • Выполняем преобразование имени файла main.css
  • Проверяем обновление кэша браузера измененного файла main.css после преобразований
  • Исходные файлы сайта

Здравствуйте уважаемый посетитель!

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

Однако, прежде чем к этому перейти, необходимо решить вопрос обновления статических файлов в кэше браузера.

Дело в том, что отображать результаты Яндекс.Поиска можно только на сайте, размещенном в интернете. Использования для этих целей ранее рассматриваемого варианта "newsite.local", установленного на локальном веб-сервере, невозможно.

Это связано с тем, что Яндекс.Поиск после каждого выполнения запроса свои результаты выводит на определенную страницу реального сайта. В нашем случае была определена страница тестового сайта с адресом "https://avtobezugona.ru/poisk.html".

Поэтому для этих целей будем работать на действующем ресурсе "avtobezugona.ru", полностью соответствующим создаваемому сайту "newsite.local", размещенному на локальном веб-сервере, с которым обычно мы проводимые различные мероприятия по его доработке.

А в связи с тем, что формирование внешнего вида страницы результатов поиска будет выполняться с помощью стилей CSS на реальном сайте, расположенных в отдельном файле "main.css", необходимо предусмотреть обновление кэша браузера (буфер памяти браузера с высокой скоростью обмена, используемый для временных файлов).

В противном случае, при отображении страниц возможно, что браузер не будет воспринимать изменения стилей CSS. В таких случаях при загрузке страниц будет использоваться последняя (до изменений) хранящаяся в его кэше версия файла "main.css".

И в этой статье мы рассмотрим один из возможных способов обновления буфера браузера в случае изменения содержимого кэшируемых статических файлов. В данном случае, нас интересует "main.css" с выделенной таблицей стилей CSS. Хотя аналогичные преобразования для упрощения обновлений сайта полезно сделать и для других ресурсов, например, содержащих скрипты "JavaScript".

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

Здесь же будет решаться лишь конкретный вопрос - обновление кэша браузера при изменении статического файла "main.css". Для того, чтобы в следующей статье мы смогли перейти к размещению результатов Яндекс.Поиск, оформив соответствующую страницу под дизайн сайта с помощью стилей CSS.


Статья 6 сборника
2018-06-12

Размещаем результаты Яндекс.Поиск на сайте

  • Добавляем динамически формируемую страницу результатов поиска
  • Вставляем HTML-код результатов поиска
  • Оформляем страницу поиска под дизайн сайта с помощью CSS
  • Исходные файлы сайта

Здравствуйте уважаемый посетитель!

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

И теперь можем перейти к размещению на сайте результатов Яндекс.Поиск. Для чего сначала разместим код, полученный с сервиса Яндекс.Поиск, а затем оформим соответствующую страницу под дизайн сайта.

При этом, как отмечалось в предыдущей статье, рассмотрение данного вопроса будем проводить на тестовом сайте avtobezugona.ru. Это связано стем, что Яндекс.Поиск свои результаты может выводить только на реальные ресурсы. И невозможно для этих целей использовать сайт, размещенный на локальном веб-сервере.

И последнее, что необходимо отметить, это то, что работу с файлами тестового сайта "avtobezugona.ru" будем производить с помощью FTP клиента FileZilla, ранее рассматриваемого на стадии переноса сайта на хостинг. Хотя это не принципиально, можно использовать и другие способы загрузки файлов на хостинг, если для кого они окажутся более предпочтительней.