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

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

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

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

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

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

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

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

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

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

    1. Проверка при малых разрешениях экрана
    2. Проверка при больших разрешениях экрана
    3. Проверка на выделенном домене

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

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

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

    Следует отметить, что первый вариант, предусматривающий использование зеркала сайта, позволяет наглядно оценить его работу при различных разрешениях экрана в диапазоне от 320px до 1920px. Что очень удобно для проверки адаптации во всем допустимом диапазоне.

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

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

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

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

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

Вы здесь: Главная → Сборник статей → Поиск → Обновляем кэш браузера для статических файлов


Автор: / Дата:

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

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

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

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

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

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

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

скриншот 90

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

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

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

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

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

Содержание


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

Проверяем фактические настройки HTTP-заголовков механизма кэширования


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

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

Следует отметить, что если даже соответствующие HTTP-заголовки, предназначенные для кэширования, в файле ".htaccess" не установлены, то все равно следует учесть этот механизм при работе сайта. Так как, по крайней мере один из модулей с настройками кэширования обычно стоит на сервере у провайдера по умолчанию.

Так например, на данный момент в файле ".htaccess" сайта "avtobezugona.ru", размещенном на хостинге Хостия, отсутствуют какой-либо код, относящийся к браузерному кэшированию. Однако, если сейчас посмотреть на ответ сервера при обращении к "main.css", то можно увидеть в нем наличие соответствующих кэшированию HTTP-заголовков.

скриншот 88

Ниже показан скриншот ответа сервера, полученный с помощью сервиса Яндекс.Вебмастер по запросу к "main.css" сайта "avtobezugona.ru".

Для увеличения / уменьшения размера изображения кликните по картинке
Ответ сервера на обращение к файлу main.css

Рис.1 Ответ сервера на обращение к файлу main.css

Как видно, в нашем случае при отсутствии каких-либо настроек кэширования в ".htaccess", в ответе сервера мы имеем заголовки "Last-Modified", "Cache-Control" и "Expires". А значит браузерное кэширование включено, причем с временем жизни кэша в 604800 секунд, соответствующее одной недели.

Проверяем отображение страницы при изменении файла main.css до преобразований


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

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

  1. main h1, main h2 {

  2. font-size: 1.1875em;

  3. font-style: italic;

  4. color: #bd072e green ;

  5. font-weight: bold;

  6. }

Рис.2 Замена цвета подзаголовков статей в файле "main.css"

А затем откроем одну из страниц сайта и посмотрим, воспринял ли браузер такое изменение, или он при загрузке будет использовать ранее сохраненный ресурс "main.css".

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

Для увеличения / уменьшения размера изображения кликните по картинке
Результат отображения страницы при изменении файла main.css до преобразования

Рис.2 Результат отображения страницы при изменении файла "main.css" до преобразования

Как видно, цвет подзаголовков не изменился, что означает - браузер в данном случае при загрузке использует ранее сохраненную версию файла "main.css".

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

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

Суть способа автоматического обновления кэша браузера


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

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

Суть данных преобразований состоит в том, что в теге <link>, в котором подключается таблица стилей CSS к веб-странице, в конце имени файла добавляется псевдопараметр, меняющийся при каждом изменении содержимого файла.

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

Если посмотреть в интернете, то можно увидеть, что при таком способе нередко предлагается изменять псевдопараметр, используя для этого отдельный файл, либо просто вручную меняя его в теге <link>.

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

Выполняем преобразование имени файла main.css


Существуют различные алгоритмы расчета хэш-сумм, например CRC16, CRC32, SHA-1, SHA-2 и т.п. В нашем случае для определения контрольной суммы будем использовать алгоритм MD5, что вполне оправдано для данной задачи.

Для этого воспользуемся специальной PHP-функцией "md5_file()", возвращаемой хэш в виде 32-символьного шестнадцатеричного числа.

Исходя из этого составим PHP-скрипт для подсчета хеш-суммы "main.css". При этом разместим его в шаблоне главной страницы "index.php", где также находится тег <link>, предназначенный для подключения таблицы стилей CSS.

  1. <?php

  2. $url_css = 'http://'.$_SERVER['SERVER_NAME'].'/styles/main.css';

  3. $xesh = md5_file($url_css);

  4. ?>

Рис.3 Скрипт для получения MD5-хэша файла "main.css"

Здесь в строке 2 переменной $url_css присваивается значение имени файла, к которому будет применена функция "md5_file()". Причем используемое в значении переменной имя хоста определяется с помощью массива $_SERVER с индексом "SERVER_NAME".

А в 3-ей строке вычисляется сама хэш-сумма содержимого "main.css", которая обозначается переменной $xesh.

Далее через переменную $xesh добавим полученный результат MD5-хэша в тег <link> следующим образом:

  1. <link rel="stylesheet" type="text/css" href="/styles/main.css?<?php echo $xesh;?>">

Рис.4 Добавление псевдопараметра в тег <link>

Вот и все, на этом преобразования закончены. И теперь в случае изменения содержимого файла "main.css" в соответствующем теге <link> будет заменяться псевдопараметр.

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

Проверяем обновление кэша браузера измененного файла main.css после преобразований


Теперь можно проверить, как после выполненных преобразований будет отображаться страница после изменения "main.css".

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

Для увеличения / уменьшения размера изображения кликните по картинке
Результат отображения страницы при изменении файла main.css после преобразования

Рис.5 Результат отображения страницы при изменении файла "main.css" после преобразования

Как видно, результат налицо. Теперь браузер отобразил страницу в соответствии с последней версией "main.css", а именно изменил цвет подзаголовков с темно-красного на зеленый. При этом кэш браузера тоже обновился новым файлом.

Можем также посмотреть, как теперь будет выглядеть имя файла в теге <link>, в котором подключается таблица стилей CSS.

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

Для увеличения / уменьшения размера изображения кликните по картинке
HTML-код веб-страницы после преобразований

Рис.6 HTML-код веб-страницы после преобразований

Видно, что теперь в соответствующем теге <link> добавился псевдопараметр с хэш-суммой, соответствующей содержимому последней версии файла "main.css".

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

Для увеличения / уменьшения размера изображения кликните по картинке
Возвращение цвета подзаголовков в прежнее состояние

Рис.7 Возвращение цвета подзаголовков в прежнее состояние

А кроме этого, посмотрим какое теперь значение принял псевдопараметр в теге <link> после возвращения цвета в прежнее состояние.

Для увеличения / уменьшения размера изображения кликните по картинке
HTML-код веб-страницы после замены цвета подзаголовков

Рис.8 HTML-код веб-страницы после замены цвета подзаголовков

Как видно, псевдопараметр изменил значение, соответствующее теперь хэш-сумме новой версии файла "main.css".

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

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

Таким образом мы подготовили сайт для размещения результатов Яндекс.Поиск и оформления соответствующей страницы по дизайн сайта. Что мы и сделаем в следующей статье.

Исходные файлы сайта


Знак папкиИсходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов:

  • Файлы каталога www
  • Таблицы базы данных MySQL

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

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

С уважением, Николай Гришин


Комментарии


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

Буду Вам за это очень признателен!

comments powered by HyperComments