Indieweb: различия между версиями

(не показаны 2 промежуточные версии этого же участника)

Строка 1:

Indieweb - способ самовыражения через создание личных сайтов. В отличии от художников, поэтов и прочих талантливых людей, web энтузиасты создают свои уникальные сайты, на которые добавляют уникальный контент. Традиция отсылает к временам Web 1.0, когда многие первые пользователи интернета покупали домен и создавали личный сайт.

[[Файл:Zaraz.png|без|мини|368x368пкс|Пример сайта indiewebщика]]

[[Файл:~~zaraz~~.png|без|мини|Пример сайта indiewebщика~~|368x368пкс~~]]

== Суть творчества ==

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

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

код для сайта.

=== Домен ===

Это, пожалуй самая дорогая часть разработки Indie-web сайта. Тут существует 2 пути - покупка своего домена за 9000 золота, или покупка бесплатного домена. Глобально домены делятся на 3 группы: gTLD (общие домены, такие как .com, .net, .org и прочие), ccTLD (домены стран мира), sTLD (домены частных организаций). Обычно самыми дорогими оказываются домены из первой группы (цены начинаются от 20$), домены из второй и третьей группы стоят примерно одинаково (цены начинаются от 2-3$). Кроме этого, есть цена продления домена, которая может быть больше цены регистрации в несколько раз.

Если вы не имеете золота в кармане для покупки домена мечты, есть варианты регистрации бесплатного домена, про такие сайты уже есть [[~~Бесплатное_Создание_Сайтов~~#~~Бесплатные_саб~~-домены|статья]].

Если вы не имеете золота в кармане для покупки домена мечты, есть варианты регистрации бесплатного домена, про такие сайты уже есть [[Бесплатное Создание Сайтов#Бесплатные саб-домены|статья]].

=== Хостинг ===

Хостинг - это компьютер на котором расположен web-сервер, отдающий ваши html и css документы получателю. Тут есть 3 пути как найти хостинг.

Хостинг - это ~~компьютер на котором расположен~~ web-~~сервер~~, ~~отдающий ваши html~~ и ~~css документы получателю. Тут есть 3 пути как найти хостинг~~.

1) Хостинг на своем ПК. Процесс настройка заключается в установке какого-нибудь дистрибутива Linux, настройки Nginx/Apache и в подключении домена. Плюсы это отсутствие платы за услуги хостинга, относительная дешевизна web-сервера при условии работы сайта на протяжении нескольких лет. Минусы это нестабильность работы домашнего интернета, нестабильность работы сети (мама вынула чтото из розетки и сайт пал).

1) ~~Хостинг на своем ПК~~. ~~Процесс настройка~~ заключается в ~~установке какого~~-~~нибудь дистрибутива Linux~~, ~~настройки Nginx/Apache и в подключении домена~~. ~~Плюсы это отсутствие платы за~~ услуги ~~хостинга, относительная дешевизна web~~-сервера при условии работы сайта на протяжении нескольких лет. Минусы это нестабильность работы домашнего интернета, нестабильность работы сети (мама вынула чтото из розетки и сайт пал).

2) Платный хостинг. Самый адекватный вариант при наличии денег. Суть настройки заключается в аренде VPS/VDS-сервера, все остальные действия повторяются с первым пунктом. Если у вас маленький проект, то лучше купить VPS, если большой то VDS. Цены на услуги аренды начинаются от 2-3$.

2) ~~Платный~~ хостинг. ~~Самый адекватный вариант при наличии денег. Суть настройки заключается в аренде VPS/VDS-сервера~~, ~~все остальные действия повторяются~~ с ~~первым пунктом~~. ~~Если у вас маленький проект~~, ~~то лучше купить VPS, если большой то VDS~~. ~~Цены на услуги аренды начинаются от 2-3$~~.

3) Бесплатный хостинг. Все тоже самое что платный хостинг, только с отсутствием оплаты. Предлагает обычно малые мощности сервера, а также отличается от платного меньшей долговечностью (бывает что маленькие хостинги закрываются или изменяют тариф на платный). Перечень таких хостингов есть в соответствующей [[Бесплатное Создание Сайтов#Бесплатные Хостинги|статье]].

3) Бесплатный хостинг. Все тоже самое что платный хостинг, только с отсутствием оплаты. Предлагает обычно малые мощности сервера, а также отличается от платного меньшей долговечностью (бывает что маленькие хостинги закрываются или изменяют тариф на платный). Перечень таких хостингов есть в соответствующей [[Бесплатное_Создание_Сайтов#Бесплатные_Хостинги|статье]].

=== Создание Web-страниц ===

Любой адекватный современный сайт состоит из 2х или 3х главных частей: HTML-разметки, CSS-стилей и JS-кода.

~~Любой адекватный современный сайт состоит из 2х или 3х главных частей:~~ HTML-~~разметки~~, ~~CSS~~-~~стилей и JS-кода~~.

HTML-разметка. Это файл расширения .html, который содержит набор вложенных тегов с разной информацией. Без него не может существовать Web-сайт как таковой.

~~HTML~~-~~разметка~~. Это файл расширения .~~html~~, ~~который содержит набор вложенных тегов с разной информацией~~. ~~Без него не~~ может ~~существовать Web~~-~~сайт как таковой~~.

CSS-стили. Это файл расширения .css, в котором представлена информация о стилях в формате каскадной таблицы.Также css-разметка может быть описана в самом HTML-файле, или даже в его тегах.

~~CSS~~-~~стили~~. Это файл расширения .~~css,~~ в котором ~~представлена информация о стилях в формате каскадной таблицы~~.~~Также css-разметка может быть описана в самом HTML-файле~~, ~~или даже в его тегах~~.

JS-код. Это файл расширения .js в котором описан код страницы, исполняемый на стороне браузера. Наличие этих файлов не является обязательным условием, так как они добавляют на страницу визуальные эффекты, связь с сервером и прочий функционал.

JS-~~код~~. ~~Это файл расширения~~ .js в ~~котором описан код страницы~~, ~~исполняемый~~ на ~~стороне браузера~~. ~~Наличие этих файлов не является обязательным условием~~, ~~так~~ как ~~они добавляют~~ на ~~страницу визуальные эффекты~~, ~~связь~~ с ~~сервером~~ и ~~прочий функционал~~.

=== Конструкторы сайтов ===

Это [[Бесплатное Создание Сайтов#Конструкторы Сайтов|альтернативный вариант]] создания веб-сайта, посредством "визуального" добавления компонентов сайта. Используется в основном детьми и просто глупыми людьми которым лень создать свой уникальный Web-сайт. В итоге такие сайты выглядят в половине случает не оригинально, в другом варианте просто уродливо (привет Ucoz).

=== Технологии "соцсетей" ===

Сайты IndieWeb могут взаимодействовать как единое целое (аналогично страницам в соцсетях) за счёт использования нескольких простых протоколов и микроформатов<ref>[https://4xpro.ru/alternative-internet/indieweb-basics/ XXXX_Pro: Введение в IndieWeb]</ref>:

* [https://indieweb.org/h-entry h-entry] — разметка постов и комментариев с помощью набора предопределённых классов

* [https://indieweb.org/h-card h-card] — аналогичная разметка профилей пользователей

* [https://indieweb.org/WebMention Webmention] — наиболее важный протокол, позволяет передавать информацию об реакциях на ваш материал на чужих сайтах: лайки, репосты и тому подобное

* [https://indieweb.org/IndieAuth IndieAuth] — протокол, позволяющий использовать свой сайт как провайдера авторизации на сторонних ресурсах

* [https://indieweb.org/MicroPub MicroPub] — протокол для публикации материалов с помощью сторонних клиентов (например, мобильного клиента Indiegenous)

* [https://indieweb.org/MicroSub MicroSub] — протокол для работы с подписками на уведомления (аналогично RSS/Atom, но с разделением управления подписками на серверной части и их отображением на клиентской).

==~~= Конструкторы сайтов =~~==

Штуки эти интересные, но почти не распространены в СНГ сегменте.

~~Это [[Бесплатное_Создание_Сайтов#Конструкторы_Сайтов|альтернативный вариант]] создания веб~~-сайта, посредством "визуального" добавления компонентов сайта. Используется в основном детьми и просто глупыми людьми которым лень создать свой уникальный Web-сайт. В итоге такие сайты выглядят в половине случает не оригинально, в другом варианте просто уродливо (привет Ucoz).

<!--

== Течения ==

Можно выделить несколько ответвлений

-->

= Источники =

@@ Строка 1: / Строка 1: @@
 Indieweb - способ самовыражения через создание личных сайтов. В отличии от художников, поэтов и прочих талантливых людей, web энтузиасты создают свои уникальные сайты, на которые добавляют уникальный контент. Традиция отсылает к временам Web 1.0, когда многие первые пользователи интернета покупали домен и создавали личный сайт.
+[[Файл:Zaraz.png|без|мини|368x368пкс|Пример сайта indiewebщика]]
-[[Файл:zaraz.png|без|мини|Пример сайта indiewebщика|368x368пкс]]
 == Суть творчества ==
+Для того, чтобы создать свой первый рабочий indieweb сайт, потребуется найти домен, хостинг и написать (самому) код для сайта.
-Для того, чтобы создать свой первый рабочий indieweb сайт, потребуется найти домен, хостинг и написать (самому)
-код для сайта.
 === Домен ===
 Это, пожалуй самая дорогая часть разработки Indie-web сайта. Тут существует 2 пути - покупка своего домена за 9000 золота, или покупка бесплатного домена. Глобально домены делятся на 3 группы: gTLD (общие домены, такие как .com, .net, .org и прочие), ccTLD (домены стран мира), sTLD (домены частных организаций). Обычно самыми дорогими оказываются домены из первой группы (цены начинаются от 20$), домены из второй и третьей группы стоят примерно одинаково (цены начинаются от 2-3$). Кроме этого, есть цена продления домена, которая может быть больше цены регистрации в несколько раз.
-Если вы не имеете золота в кармане для покупки домена мечты, есть варианты регистрации бесплатного домена, про такие сайты уже есть [[Бесплатное_Создание_Сайтов#Бесплатные_саб-домены|статья]].
+Если вы не имеете золота в кармане для покупки домена мечты, есть варианты регистрации бесплатного домена, про такие сайты уже есть [[Бесплатное Создание Сайтов#Бесплатные саб-домены|статья]].
 === Хостинг ===
+Хостинг - это компьютер на котором расположен web-сервер, отдающий ваши html и css документы получателю. Тут есть 3 пути как найти хостинг.
-Хостинг - это компьютер на котором расположен web-сервер, отдающий ваши html и css документы получателю. Тут есть 3 пути как найти хостинг.
+) Хостинг на своем ПК. Процесс настройка заключается в установке какого-нибудь дистрибутива Linux, настройки Nginx/Apache и в подключении домена. Плюсы это отсутствие платы за услуги хостинга, относительная дешевизна web-сервера при условии работы сайта на протяжении нескольких лет. Минусы это нестабильность работы домашнего интернета, нестабильность работы сети (мама вынула чтото из розетки и сайт пал).
-) Хостинг на своем ПК. Процесс настройка заключается в установке какого-нибудь дистрибутива Linux, настройки Nginx/Apache и в подключении домена. Плюсы это отсутствие платы за услуги хостинга, относительная дешевизна web-сервера при условии работы сайта на протяжении нескольких лет. Минусы это нестабильность работы домашнего интернета, нестабильность работы сети (мама вынула чтото из розетки и сайт пал).
+) Платный хостинг. Самый адекватный вариант при наличии денег. Суть настройки заключается в аренде VPS/VDS-сервера, все остальные действия повторяются с первым пунктом. Если у вас маленький проект, то лучше купить VPS, если большой то VDS. Цены на услуги аренды начинаются от 2-3$.
-) Платный хостинг. Самый адекватный вариант при наличии денег. Суть настройки заключается в аренде VPS/VDS-сервера, все остальные действия повторяются с первым пунктом. Если у вас маленький проект, то лучше купить VPS, если большой то VDS. Цены на услуги аренды начинаются от 2-3$.
+) Бесплатный хостинг. Все тоже самое что платный хостинг, только с отсутствием оплаты. Предлагает обычно малые мощности сервера, а также отличается от платного меньшей долговечностью (бывает что маленькие хостинги закрываются или изменяют тариф на платный). Перечень таких хостингов есть в соответствующей [[Бесплатное Создание Сайтов#Бесплатные Хостинги|статье]].
-) Бесплатный хостинг. Все тоже самое что платный хостинг, только с отсутствием оплаты. Предлагает обычно малые мощности сервера, а также отличается от платного меньшей долговечностью (бывает что маленькие хостинги закрываются или изменяют тариф на платный). Перечень таких хостингов есть в соответствующей [[Бесплатное_Создание_Сайтов#Бесплатные_Хостинги|статье]].
 === Создание Web-страниц ===
+Любой адекватный современный сайт состоит из 2х или 3х главных частей: HTML-разметки, CSS-стилей и JS-кода.
-Любой адекватный современный сайт состоит из 2х или 3х главных частей: HTML-разметки, CSS-стилей и JS-кода.
+HTML-разметка. Это файл расширения .html, который содержит набор вложенных тегов с разной информацией. Без него не может существовать Web-сайт как таковой.
-HTML-разметка. Это файл расширения .html, который содержит набор вложенных тегов с разной информацией. Без него не может существовать Web-сайт как таковой.
+CSS-стили. Это файл расширения .css, в котором представлена информация о стилях в формате каскадной таблицы.Также css-разметка может быть описана в самом HTML-файле, или даже в его тегах.
-CSS-стили. Это файл расширения .css, в котором представлена информация о стилях в формате каскадной таблицы.Также css-разметка может быть описана в самом HTML-файле, или даже в его тегах.
+JS-код. Это файл расширения .js в котором описан код страницы, исполняемый на стороне браузера. Наличие этих файлов не является обязательным условием, так как они добавляют на страницу визуальные эффекты, связь с сервером и прочий функционал.
-JS-код. Это файл расширения .js в котором описан код страницы, исполняемый на стороне браузера. Наличие этих файлов не является обязательным условием, так как они добавляют на страницу визуальные эффекты, связь с сервером и прочий функционал.
+=== Конструкторы сайтов ===
+Это [[Бесплатное Создание Сайтов#Конструкторы Сайтов|альтернативный вариант]] создания веб-сайта, посредством "визуального" добавления компонентов сайта. Используется в основном детьми и просто глупыми людьми которым лень создать свой уникальный Web-сайт. В итоге такие сайты выглядят в половине случает не оригинально, в другом варианте просто уродливо (привет Ucoz).
+=== Технологии "соцсетей" ===
+Сайты IndieWeb могут взаимодействовать как единое целое (аналогично страницам в соцсетях) за счёт использования нескольких простых протоколов и микроформатов<ref>[https://4xpro.ru/alternative-internet/indieweb-basics/ XXXX_Pro: Введение в IndieWeb]</ref>:
+* [https://indieweb.org/h-entry h-entry] — разметка постов и комментариев с помощью набора предопределённых классов
+* [https://indieweb.org/h-card h-card] — аналогичная разметка профилей пользователей
+* [https://indieweb.org/WebMention Webmention] — наиболее важный протокол, позволяет передавать информацию об реакциях на ваш материал на чужих сайтах: лайки, репосты и тому подобное
+* [https://indieweb.org/IndieAuth IndieAuth] — протокол, позволяющий использовать свой сайт как провайдера авторизации на сторонних ресурсах
+* [https://indieweb.org/MicroPub MicroPub] — протокол для публикации материалов с помощью сторонних клиентов (например, мобильного клиента Indiegenous)
+* [https://indieweb.org/MicroSub MicroSub] — протокол для работы с подписками на уведомления (аналогично RSS/Atom, но с разделением управления подписками на серверной части и их отображением на клиентской).
-=== Конструкторы сайтов ===
+Штуки эти интересные, но почти не распространены в СНГ сегменте.
-Это [[Бесплатное_Создание_Сайтов#Конструкторы_Сайтов|альтернативный вариант]] создания веб-сайта, посредством "визуального" добавления компонентов сайта. Используется в основном детьми и просто глупыми людьми которым лень создать свой уникальный Web-сайт. В итоге такие сайты выглядят в половине случает не оригинально, в другом варианте просто уродливо (привет Ucoz).
+<!--
+== Течения ==
+Можно выделить несколько ответвлений
+-->
+= Источники =