diff options
| author | Sn4il <sn4il@thedroth.rocks> | 2024-05-03 15:04:13 +0300 |
|---|---|---|
| committer | Sn4il <sn4il@thedroth.rocks> | 2024-05-03 15:04:13 +0300 |
| commit | 575bed34aa0b70091ae0c2d476b3666ce0bef5ff (patch) | |
| tree | 522da62ba92497ac0834b426bc9630fff1d8a150 | |
| parent | e01a5cf20e2a3096d7faba87f141b6c4b797d689 (diff) | |
| download | sn4il-site-575bed34aa0b70091ae0c2d476b3666ce0bef5ff.tar.gz sn4il-site-575bed34aa0b70091ae0c2d476b3666ce0bef5ff.zip | |
Bauhaus design
| -rw-r--r-- | disqus.html | 40 | ||||
| -rw-r--r-- | index.html | 144 | ||||
| -rw-r--r-- | rusprom.html | 226 | ||||
| -rwxr-xr-x | small.html | 451 | ||||
| -rwxr-xr-x | style.css | 759 | ||||
| -rwxr-xr-x | style.css.bak | 339 |
6 files changed, 872 insertions, 1087 deletions
diff --git a/disqus.html b/disqus.html index 98d8b4e..5d46986 100644 --- a/disqus.html +++ b/disqus.html @@ -4,17 +4,24 @@ <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <title>Улиточий домик - Sn4il site</title> - <link rel="stylesheet" href="style.css?v=4552bcf67384bb346e427f6ab62513d8"> + <title>О дискуссиях и делах</title> + <link rel="stylesheet" href="style.css"> </head> <body> - <div class="site-container"> + <div class="bh-row bh-no-border"> + <div class="bh-wide-row bh-vert-2"> + <div class="bh-col-4"> + <h1>О дискуссиях и делах</h1> + </div> + + <div class="bh-col-8"> + <div class="bh-wide-row bh-no-border"> + <div class="bh-col-2"> + + </div> + </div> - <main> - <article class="post"> - <div class="wrapper post__entry"> -<h1>О дискуссиях и делах</h1> <p>«Если ты споришь с идиотом, то, веротяно, он делает то же самое»</p> <p>Как когда-то уже писал в Федивёрсе, именно по этой причине, я перестал спорить с идиотами (но искренне восхищаюсь способностью некоторых людей вести дискуссии с идейными противниками, невзирая на непробиваемость оных) и предпочитаю либо наблюдать и изредка подквакивать из кресла в углу, либо просто высказать свою позицию и свалить , а дальше sapienti sat.</p> <p>Отстранённость от непосредственного участия в спорах (в которых, как когда-то казалось, может родиться не только предрасположенность к инсульту, но и истина) никак не мешает мне наблюдать как за собственно дискуссиями, так и за каналами пропаганды разных сторон. И таки здесь, по крайней мере, в моём личном инфопузыре, безоговорочно доминируют ЛОМы (лидеры общестенного мнения), выступающие от некоторых башен Кремля, а вот представители тусовки, называвшей седя в 90-е демократами (96-й показал, кхм... некое несоответствие термину), а ныне именующиеся либералами (тоже так себе попадание) люто сливаются из-за пониженной способности к адаптации.</p> @@ -28,12 +35,15 @@ <p>Не спорь, юзернейм! Делай!</p> </div> - </article> - </main> - <hr> - <footer> - В согласии с духом <a href="https://tt.sn4il.site/landing.html">Трививальных Технологий</a> |  Хостинг: <a href="https://vdsina.ru/?partner=7kp5qpehru">VDSина</a> (скидка 10% по партнёрской ссылке) - </footer> - </body> -</html> + </div> + </div> + </div> + <div class="bh-col-10"> + <center> + В согласии с духом <a href="https://tt.sn4il.site/landing.html">Трививальных Технологий</a> |  Хостинг: <a href="https://vdsina.ru/?partner=7kp5qpehru">VDSина</a> (скидка 10% по партнёрской ссылке) + </center> + <hr> + </div> + </body> + </html> @@ -5,59 +5,107 @@ <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Улиточий домик - Sn4il site</title> - <link rel="stylesheet" href="style.css?v=4552bcf67384bb346e427f6ab62513d8"> + <link rel="stylesheet" href="style.css"> <link rel='alternate' title='Atom feed' href="https://createfeed.fivefilters.org/index.php?url=https%3A%2F%2Fsn4il.site&max=5&order=document&guid=0" type='application/atom+xml'/> </head> <body> - <div class="site-container"> - - <main> - <article class="post"> - <div class="wrapper post__entry"> <h1>Улиточий домик</h1> - <p>Мир вам, Земляне.</p> - <p>Это персональная страница Снэйла (ака Улитка). </p> - <h3>Об авторе</h3> - <p>Администратор проекта <a href="https://thedroth.rocks" target="_blank" rel="noopener noreferrer">https://thedroth.rocks</a>. В обычной жизни — скромный DevOps-инженер. </p> - <p>Пишу простую электронную музыку, играю на нескольких музыкальных инструментах.</p> - <hr> - <a href="https://txt.sn4il.site">Txtdot</a> - html-to-text proxy. "Опрощающий" веб-прокси, рендерящий хитросложные тяжёлые страницы в чистый удобочитаемый текст. - <hr> - <h3>Статьи (понемногу переносятся из gemini)</h3> - <a href="./rusprom.html">Список российских производителей</a><br> - <a href="./disqus.html">О дискуссиях и делах</a><br> - <a href="./small.html">[перевод] Заново открываем Small Web</a><br> - <hr> - <h3>Контакты и ссылки</h3> - <p> - <a href="https://sn4il.bandcamp.com/" target="_blank" rel="noopener noreferrer">Музыка</a> - <br> - Последний релиз - <a href="https://sn4il.bandcamp.com/track/--20">Отблеск</a> - </p> - <p> - <a href="https://blog.sn4il.site/sn4il" target="_blank" rel="noopener noreferrer">Аккаунт в Fediverse</a> - </p> - <p> - <a href="http://keyserver.ubuntu.com/pks/lookup?op=get&search=0x296cf59abd4a6b09af0c941fb391fc4aeb132cb9" target="_blank" rel="noopener noreferrer">Ключ GPG</a> - </p> - <p> - <a href="https://git.sn4il.site" target="_blank" rel="noopener noreferrer">Git-репозитории</a> - </p> - <p> - <a href="https://pay.cloudtips.ru/p/f13dbdef" target="_blank" rel="noopener noreferrer">Дать чаевые</a> - </p> - <hr> - <p> - Просто чтоб было — зеркало русского перевода Linux From Scratch: <br> - <a href="./lfs-12.1-sysv/index.html">Версия 12.1 без SystemD</a> - </p> + <div class="bh-row bh-no-border"> + <div class="bh-wide-row bh-vert-2"> + <div class="bh-col-4"> + <h3>мир вам, Земляне.</h3> + </div> + + <div class="bh-col-8"> + <div class="bh-wide-row bh-no-border"> + <div class="bh-col-2"> + + </div> + </div> + + <p>Это персональная страница Снэйла (ака Улитка). </p> + <aside class="bh-aside-left"> + Об авторе + </aside> - </div> + <p>Администратор проекта <a href="https://thedroth.rocks" target="_blank" rel="noopener noreferrer">https://thedroth.rocks</a>. В обычной жизни — скромный DevOps-инженер. </p> + <p>Пишу простую электронную музыку, играю на нескольких музыкальных инструментах.</p> + + </div> + </div> + <div class="bh-wide-row bh-vert-2"> + <div class="bh-col-4"> + <h3>статьи</h3> + </div> + <div class="bh-col-8"> + <ul class="bh-timeline"> + <li class="bh-timeline-item"> + <header><a href="./rusprom.html">Список российских производителей</a></header> + <small> + На фоне всего происходящего озаботились тут в интернетах вопросом "а что у нас уже производится своего чисто бытового?". Вот надыбался список, его и предоставляю. Вдруг кому принципиально импортозамещаться по максимуму (мне, например, импонирует, что за то, чем пользуюсь я, налоги уплочены дома и и рабочие места тут же предоставлены): + Предприятия ВПК, атомпрома и нефтепереработки не включаю. Список периодически пополняется. + </small> + </li> + <aside class="bh-aside-left"> + понемногу переносятся из gemini + </aside> + <li class="bh-timeline-item"> + <header><a href="./small.html">[перевод] Заново открываем Small Web</a></header> + <small> + (перевод статьи <a href="https://neustadt.fr/essays/the-small-web/">https://neustadt.fr/essays/the-small-web/)</a><br> + Большинство сайтов в наши дни создаются как коммерческие продукты, профессионалами, маркетологами, оптимизируются для привлечения наибольшей аудитории, привлечения внимания и повышения "конверсии". Но существует также и меньшая, менее заметная сеть, создаваемая обычными людьми, просто с целью поделиться своими интересами и хобби со всем миром. Не оличающаяся вылизанным дизайном, частенько странная и неряшливая, но зачастую забавная, креативная и интересная... + </small> + </li> + + <li class="bh-timeline-item"> + <header><a href="./disqus.html">О дискуссиях и делах</a></header> + <small> + «Если ты споришь с идиотом, то, веротяно, он делает то же самое»<br> + Как когда-то уже писал в Федивёрсе, именно по этой причине, я перестал спорить с идиотами (но искренне восхищаюсь способностью некоторых людей вести дискуссии с идейными противниками, невзирая на непробиваемость оных) и предпочитаю либо наблюдать и изредка подквакивать из кресла в углу, либо просто высказать свою позицию и свалить , а дальше sapienti sat... + </small> + </li> + </ul> + </div> + </div> + + - </article> - </main> - <footer> - В согласии с духом <a href="https://tt.sn4il.site/landing.html">Трививальных Технологий</a> |  Хостинг: <a href="https://vdsina.ru/?partner=7kp5qpehru">VDSина</a> (скидка 10% по партнёрской ссылке) - </footer> + <div class="bh-wide-row bh-vert-2"> + <div class="bh-col-4"> + <h3>контакты и ссылки</h3> + </div> + <div class="bh-col-8"> + <ul> + <li class="bh-item"><a href="https://sn4il.bandcamp.com/" target="_blank" rel="noopener noreferrer">Музыка</a> (последний релиз - <a href="https://sn4il.bandcamp.com/track/--20">Отблеск</a>) + </li> + <li class="bh-item"> + <a href="https://blog.sn4il.site/sn4il" target="_blank" rel="noopener noreferrer">Аккаунт в Fediverse</a> + </li> + <li class="bh-item"> + <a href="http://keyserver.ubuntu.com/pks/lookup?op=get&search=0x296cf59abd4a6b09af0c941fb391fc4aeb132cb9" target="_blank" rel="noopener noreferrer">Ключ GPG</a> + </li> + <li class="bh-item"> + <a href="https://git.sn4il.site" target="_blank" rel="noopener noreferrer">Git-репозитории</a> + </li> + <li class="bh-item"> + <a href="https://pay.cloudtips.ru/p/f13dbdef" target="_blank" rel="noopener noreferrer">Дать чаевые</a> + </li> + <li class="bh-item"> + <a href="https://txt.sn4il.site">Txtdot</a> - html-to-text proxy. "Опрощающий" веб-прокси, рендерящий хитросложные тяжёлые страницы в чистый удобочитаемый текст. + </li> + <li class="bh-item"> + Просто чтоб было — зеркало русского перевода Linux From Scratch: <br> + <a href="./lfs-12.1-sysv/index.html">Версия 12.1 без SystemD</a> + </li> + </ul> + </div> + </div> +</div> +<div class="bh-col-10"> + <center> + В согласии с духом <a href="https://tt.sn4il.site/landing.html">Трививальных Технологий</a> |  Хостинг: <a href="https://vdsina.ru/?partner=7kp5qpehru">VDSина</a> (скидка 10% по партнёрской ссылке) +</center> + <hr> + </div> </body> </html> diff --git a/rusprom.html b/rusprom.html index 3e7261e..da16bd4 100644 --- a/rusprom.html +++ b/rusprom.html @@ -4,123 +4,133 @@ <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <title>Улиточий домик - Sn4il site</title> + <title>Отечественные производители</title> <link rel="stylesheet" href="style.css?v=4552bcf67384bb346e427f6ab62513d8"> </head> <body> - <div class="site-container"> + <div class="bh-row bh-no-border"> + <div class="bh-wide-row bh-vert-2"> + <div class="bh-col-4"> + <h3>Отечественные производители</h3> + </div> + + <div class="bh-col-8"> + <div class="bh-wide-row bh-no-border"> + <div class="bh-col-2"> + + </div> + </div> - <main> - <article class="post"> - <div class="wrapper post__entry"> -<h1>Отечественные производители (UPD 2024-04-19)</h1> -<p>На фоне всего происходящего озаботились тут в интернетах вопросом "а что у нас уже производится своего чисто бытового?". Вот надыбался список, его и предоставляю. Вдруг кому принципиально импортозамещаться по максимуму (мне, например, импонирует, что за то, чем пользуюсь я, налоги уплочены дома и и рабочие места тут же предоставлены): -Предприятия ВПК, атомпрома и нефтепереработки не включаю, потому родной Нижний Новгород тут представлен будет очень бледно.</p> +На фоне всего происходящего озаботились тут в интернетах вопросом "а что у нас уже производится своего чисто бытового?". Вот надыбался список, его и предоставляю. Вдруг кому принципиально импортозамещаться по максимуму (мне, например, импонирует, что за то, чем пользуюсь я, налоги уплочены дома и и рабочие места тут же предоставлены): +Предприятия ВПК, атомпрома и нефтепереработки не включаю, потому родной Нижний Новгород тут представлен будет очень бледно. +<br> <ul> -<li>AlphaPet - корм для кошек, Дмитров</li> -<li>Art&Fact - косметика</li> -<li>Alt - Linux</li> -<li>Astra - Linux, системы автоматизации, виртаулизации, биллинга...</li> -<li>Bask - одежда https://bask.ru</li> -<li>BatNorton - одежда. Санкт-Петербург, Краснодар</li> -<li>Botavikos - косметика</li> -<li>Calculate - Linux</li> -<li>Carat - Мебель, Воронеж</li> -<li>Cosmomedica - косметика</li> -<li>Darina - бытовая техника. Пермь</li> -<li>Dave Marshall- обувь https://www.ursus.ru</li> -<li>Ecolatier - косметика. Москва</li> -<li>Elis - одежда. Ростов-на-Дону</li> -<li>Emka fashion - женская одежда. Москва, Калуга</li> -<li>First in space - женская одежда. Москва</li> -<li>Fischer audio - наушники, Санкт-Петербург</li> -<li>Jamm kids - детская одежда. http://jamm.pro/about</li> -<li>Happy lab - косметика</li> -<li>Gloria Jeans - джинсы, Ростов-на-Дону</li> -<li>Grass - автохимия и чистящие средства. Санкт-Петербург</li> -<li>Gulliver - игрушки и одежда для детей</li> -<li>Kitfort - бытовая техника</li> -<li>Kennerton - наушники. Санкт-Петербург</li> -<li>Kora - косметика https://kora.ru/o-kompanii/</li> -<li>Laplanger - пуховики. Санкт-Петербург</li> -<li>Levrana - косметика, Санкт-Петербург</li> -<li>Luzar - автозапчасти. https://luzar.ru/aboutAlphaPet-корм для кошек, Дмитров</li> -<li>Nordski - одежда https://nordski.ru/o-nas/brand/</li> -<li>PALETO - пуховики. Оренбург</li> -<li>Pozis - бытовая техника. Зеленодольск</li> -<li>Priz - одежда. Новосибирск</li> -<li>Ralf Ringer - обувь. Москва, Владимир</li> -<li>Red Fox - одежда, флиски. Санкт-Петербург</li> -<li>Revyline - ирригаторы. https://revyline.ru/about-as</li> -<li>Sanita-сантехника, Самара</li> -<li>Scenda - обувь</li> -<li>Sela - женская и детская одежда. Москва.</li> -<li>Sigil - тени для век https://sigil.me (жена рекомендует)</li> -<li>Smorodina - косметика</li> -<li>Sokolov - украшения</li> -<li>Splat - зубная паста. Новгород</li> -<li>Synergetic - бытовая химия. Нижний Новгород</li> -<li>Systeme Electric - электротовары. Самара, Козьмодемьянск, Санкт-Петербург</li> -<li>Swift chaser - катера, Самара</li> -<li>Tofa - обувь. Тула</li> -<li>Tyumen Battery - аккумуляторы</li> -<li>VOLTER - стабилизаторы напряжения. Донецк.</p></li> -<li><p>АКОМ - аккумуляторы, Тольятти</li> -<li>Амет - термосы, Челябинск</li> -<li>Анна Шарова - косметика, https://annasharovabeauty.com</li> -<li>Бештау - электроника (отчественные компонентны — далеко не все, свой дизайн, корпуса, поверхностный монтаж)</li> -<li>Биг фильтр - авто фильтры. Санкт-Петербург</li> -<li>Бирюса - бытовая техник, Красноярск</li> -<li>ВАЗ - Куда ж без него. Тольятти</li> -<li>Верфь - сумки. Санкт-Петербург</li> -<li>Восток - часы, Чистополь (Татарстан)</li> -<li>ГАЗ - Газель тащит весь малый бизнес. Нижний Новгород</li> -<li>Гельтек - косметика, https://geltek.ru</li> -<li>Дятьково Мебель - Мебель :-)</li> -<li>Ивановский трикотаж</li> -<li>Интерскол - электроиструмент, производство в РФ, Испании и Китае.</li> -<li>КамАЗ - очевидное, Набережные Челны</li> -<li>Калашников - охотничье оружие</li> -<li>Краснополянская косметика - косметика. Красная Поляна</li> -<li>Кукмара - посуда, Кукмор (Татарстан)</li> -<li>Лысьвенский завод - эмалированная посуда, Лысьва</li> -<li>Натура сиберика - косметика</li> -<li>Невская косметика - косметика, Санкт-Петербург</li> -<li>Нева Металл Посуда - кухонная посуда, Санкт-Петербург</li> -<li>НИЗ - инструменты. Новосибирск</li> -<li>Ноэму - акустика. Новосибирск.</li> -<li>Октава - микрофоны, Тула</li> -<li>Оскольская керамика - сантехника, Старый Оскол</li> -<li>Полимербыт - бытовые изделия из полимеров</li> -<li>Русское время - часы</li> -<li>Сивера - одежда. https://new.sivera.ru/tech/</li> -<li>Снорри - наушники</li> -<li>Сплав - одежда (туристическая и милитари) https://www.splav.ru/about/</li> -<li>Сударь - одежда. г.Ковров</li> -<li>Стройкерамика - керамогранит, Новосибирск</li> -<li>УАЗ - легенда жэ! Ульяновск</li> -<li>Фарадей - обувь.</li> -<li>Чебоксарский трикотаж - одежда</li> -<li>ЭлитСпецОбувь (Prosafe) - рабочая обувь</li> -</ul> +<li class="bh-item">AlphaPet - корм для кошек, Дмитров</li> +<li class="bh-item">Art&Fact - косметика</li> +<li class="bh-item">Alt - Linux</li> +<li class="bh-item">Astra - Linux, системы автоматизации, виртаулизации, биллинга...</li> +<li class="bh-item">Bask - одежда https://bask.ru</li> +<li class="bh-item">BatNorton - одежда. Санкт-Петербург, Краснодар</li> + +<aside class="bh-aside-left"> +(UPD 2024-04-19) +</aside> -<h2>UPD 2024-04-19:</h2> -<ul>Электроника: - <li>OSIO, ECHIPS - Ноутбуки (импортозамещение частичное, но налоги таки платятся здесь, что не может не радовать)</li> +<li class="bh-item">Botavikos - косметика</li> +<li class="bh-item">Calculate - Linux</li> +<li class="bh-item">Carat - Мебель, Воронеж</li> +<li class="bh-item">Cosmomedica - косметика</li> +<li class="bh-item">Darina - бытовая техника. Пермь</li> +<li class="bh-item">Dave Marshall- обувь https://www.ursus.ru</li> +<li class="bh-item">Ecolatier - косметика. Москва</li> +<li class="bh-item">Elis - одежда. Ростов-на-Дону</li> +<li class="bh-item">Emka fashion - женская одежда. Москва, Калуга</li> +<li class="bh-item">First in space - женская одежда. Москва</li> +<li class="bh-item">Fischer audio - наушники, Санкт-Петербург</li> +<li class="bh-item">Jamm kids - детская одежда. http://jamm.pro/about</li> +<li class="bh-item">Happy lab - косметика</li> +<li class="bh-item">Gloria Jeans - джинсы, Ростов-на-Дону</li> +<li class="bh-item">Grass - автохимия и чистящие средства. Санкт-Петербург</li> +<li class="bh-item">Gulliver - игрушки и одежда для детей</li> +<li class="bh-item">Kitfort - бытовая техника</li> +<li class="bh-item">Kennerton - наушники. Санкт-Петербург</li> +<li class="bh-item">Kora - косметика https://kora.ru/o-kompanii/</li> +<li class="bh-item">Laplanger - пуховики. Санкт-Петербург</li> +<li class="bh-item">Levrana - косметика, Санкт-Петербург</li> +<li class="bh-item">Luzar - автозапчасти. https://luzar.ru/aboutAlphaPet-корм для кошек, Дмитров</li> +<li class="bh-item">Nordski - одежда https://nordski.ru/o-nas/brand/</li> +<li class="bh-item">PALETO - пуховики. Оренбург</li> +<li class="bh-item">Pozis - бытовая техника. Зеленодольск</li> +<li class="bh-item">Priz - одежда. Новосибирск</li> +<li class="bh-item">Ralf Ringer - обувь. Москва, Владимир</li> +<li class="bh-item">Red Fox - одежда, флиски. Санкт-Петербург</li> +<li class="bh-item">Revyline - ирригаторы. https://revyline.ru/about-as</li> +<li class="bh-item">Sanita-сантехника, Самара</li> +<li class="bh-item">Scenda - обувь</li> +<li class="bh-item">Sela - женская и детская одежда. Москва.</li> +<li class="bh-item">Sigil - тени для век https://sigil.me (жена рекомендует)</li> +<li class="bh-item">Smorodina - косметика</li> +<li class="bh-item">Sokolov - украшения</li> +<li class="bh-item">Splat - зубная паста. Новгород</li> +<li class="bh-item">Synergetic - бытовая химия. Нижний Новгород</li> +<li class="bh-item">Systeme Electric - электротовары. Самара, Козьмодемьянск, Санкт-Петербург</li> +<li class="bh-item">Swift chaser - катера, Самара</li> +<li class="bh-item">Tofa - обувь. Тула</li> +<li class="bh-item">Tyumen Battery - аккумуляторы</li> +<li class="bh-item">VOLTER - стабилизаторы напряжения. Донецк.</li> +<li class="bh-item">АКОМ - аккумуляторы, Тольятти</li> +<li class="bh-item">Амет - термосы, Челябинск</li> +<li class="bh-item">Анна Шарова - косметика, https://annasharovabeauty.com</li> +<li class="bh-item">Бештау - электроника (отчественные компонентны — далеко не все, свой дизайн, корпуса, поверхностный монтаж)</li> +<li class="bh-item">Биг фильтр - авто фильтры. Санкт-Петербург</li> +<li class="bh-item">Бирюса - бытовая техник, Красноярск</li> +<li class="bh-item">ВАЗ - Куда ж без него. Тольятти</li> +<li class="bh-item">Верфь - сумки. Санкт-Петербург</li> +<li class="bh-item">Восток - часы, Чистополь (Татарстан)</li> +<li class="bh-item">ГАЗ - Газель тащит весь малый бизнес. Нижний Новгород</li> +<li class="bh-item">Гельтек - косметика, https://geltek.ru</li> +<li class="bh-item">Дятьково Мебель - Мебель :-)</li> +<li class="bh-item">Ивановский трикотаж</li> +<li class="bh-item">Интерскол - электроиструмент, производство в РФ, Испании и Китае.</li> +<li class="bh-item">КамАЗ - очевидное, Набережные Челны</li> +<li class="bh-item">Калашников - охотничье оружие</li> +<li class="bh-item">Краснополянская косметика - косметика. Красная Поляна</li> +<li class="bh-item">Кукмара - посуда, Кукмор (Татарстан)</li> +<li class="bh-item">Лысьвенский завод - эмалированная посуда, Лысьва</li> +<li class="bh-item">Натура сиберика - косметика</li> +<li class="bh-item">Невская косметика - косметика, Санкт-Петербург</li> +<li class="bh-item">Нева Металл Посуда - кухонная посуда, Санкт-Петербург</li> +<li class="bh-item">НИЗ - инструменты. Новосибирск</li> +<li class="bh-item">Ноэму - акустика. Новосибирск.</li> +<li class="bh-item">Октава - микрофоны, Тула</li> +<li class="bh-item">Оскольская керамика - сантехника, Старый Оскол</li> +<li class="bh-item">Полимербыт - бытовые изделия из полимеров</li> +<li class="bh-item">Русское время - часы</li> +<li class="bh-item">Сивера - одежда. https://new.sivera.ru/tech/</li> +<li class="bh-item">Снорри - наушники</li> +<li class="bh-item">Сплав - одежда (туристическая и милитари) https://www.splav.ru/about/</li> +<li class="bh-item">Сударь - одежда. г.Ковров</li> +<li class="bh-item">Стройкерамика - керамогранит, Новосибирск</li> +<li class="bh-item">УАЗ - легенда жэ! Ульяновск</li> +<li class="bh-item">Фарадей - обувь.</li> +<li class="bh-item">Чебоксарский трикотаж - одежда</li> +<li class="bh-item">ЭлитСпецОбувь (Prosafe) - рабочая обувь</li> +<li class="bh-item">OSIO, ECHIPS - Ноутбуки (импортозамещение частичное, но налоги таки платятся здесь, что не может не радовать)</li> </ul> <hr /> <p>Сам пользуюсь, например, Китфортом (чайники замечательные), Полимербытом — большинство контейнеров дома от них, ЭлитСпецОбувью, ну и Сплат с Синергетиком мимо не проходят.</p> <hr /> -<p>Список неспешно пополняется.</p> - </div> - </div> - - </article> - </main> - <footer> - В согласии с духом <a href="https://tt.sn4il.site/landing.html">Трививальных Технологий</a> |  Хостинг: <a href="https://vdsina.ru/?partner=7kp5qpehru">VDSина</a> (скидка 10% по партнёрской ссылке) - </footer> - </body> -</html> +</div> +</div> +</div> +</div> +<div class="bh-col-10"> +<center> +В согласии с духом <a href="https://tt.sn4il.site/landing.html">Трививальных Технологий</a> |  Хостинг: <a href="https://vdsina.ru/?partner=7kp5qpehru">VDSина</a> (скидка 10% по партнёрской ссылке) +</center> + <hr> +</div> +</body> +</html>
\ No newline at end of file @@ -5,204 +5,329 @@ <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <title>Улиточий домик - Sn4il site</title> - <link rel="stylesheet" href="style.css?v=4552bcf67384bb346e427f6ab62513d8"> + <title>заново открываем Small Webe</title> + <link rel="stylesheet" href="style.css"> </head> <body> - <div class="site-container"> + <h1>заново открываем Small Web</h1> + <div class="bh-row bh-no-border"> + <div class="bh-wide-row bh-vert-2"> + <div class="bh-col-4"> + <h3>Вступление</h3> + </div> - <main> - <article class="post"> - <div class="wrapper post__entry"> -<h1>Заново открываем Small Web</h1> -<p>(перевод статьи https://neustadt.fr/essays/the-small-web/)</p> + <div class="bh-col-8"> + <div class="bh-wide-row bh-no-border"> + <div class="bh-col-2"> + + </div> + </div> + +(перевод статьи https://neustadt.fr/essays/the-small-web/) <blockquote> -<p>Большинство сайтов в наши дни создаются как коммерческие продукты, профессионалами, маркетологами, оптимизируются для привлечения наибольшей аудитории, привлечения внимания и повышения "конверсии". Но существует также и меньшая, менее заметная сеть, создаваемая обычными людьми, просто с целью поделиться своими интересами и хобби со всем миром. Не оличающаяся вылизанным дизайном, частенько странная и неряшливая, но зачастую забавная, креативная и интересная.</p> +Большинство сайтов в наши дни создаются как коммерческие продукты, профессионалами, маркетологами, оптимизируются для привлечения наибольшей аудитории, привлечения внимания и повышения "конверсии". Но существует также и меньшая, менее заметная сеть, создаваемая обычными людьми, просто с целью поделиться своими интересами и хобби со всем миром. Не оличающаяся вылизанным дизайном, частенько странная и неряшливая, но зачастую забавная, креативная и интересная. </blockquote> -<p><a href="https://neustadt.fr/index.html">Parimal Satyal, 25 мая 2020</a></p> -<p>Каждый редизайн сайта начинается со вдохновения.</p> -<p>Вдохновением для конкретно этого (https://neustadt.fr) послужили две странички: <a href="https://anders.unix.se/">Чистый и читабельный вебсайт</a> Андерса, вдохновивший на домашнюю страничку, и <a href="https://marijnflorence.neocities.org/index.html">сайт Marijn</a>, напомнивший, каким прикольным может быть веб. Цвета, графика, <a href="https://marijnflorence.neocities.org/music/">креативная навигация</a>, <a href="https://en.wikipedia.org/wiki/Holocene_calendar">интересные идеи</a>... сам процесс прокликивания чьей-нибудь персональной странички в 2020м вызывает во мне ностальгию по Сети конца 90х и ранних 2000х, на которой я вырос.</p> -<p>Некоторые из вас, возможно, уже читали мою предыдущую статью <a href="https://neustadt.fr/essays/against-a-user-hostile-web/">Against an Increasingly User Hostile Web</a>. В ней я утверждаю, что мы заменяем открытую Сеть, объединяющую и вдохновляющую, на ту, что ограничивает людей и превращает их в товар. Я говорил о том, что современная Сеть, следящая, разбухшая и огороженная, конфликтует с той открытой Сетью, что я люблю. И я был приятно удивлён тем, как много людей разделяют мои чувства, людей, писавших мне письма, <a href="https://www.eduardomorais.com/stream/id/3519">ответы в собственных блогах</a> и <a href="https://news.ycombinator.com/item?id=15611122">обсуждавших это</a> на <a href="https://lobste.rs/s/5bi46y/against_increasingly_user_hostile_web">форумах</a>. Несмотря на полуторагодовую давность, статья всё так же, к сожалению, отражает текущее состояние Сети.</p> -<p>Но то, что я наткнулся на сайт Marijn, вселило в меня надежду. Она провела меня по кроличьей норе множества других мелких вебсайтов, созданных людьми со всевозможными интересами: фильмы, авиация, музыка, искусство, компьютеры. Это напомнило мне о том, что креативная, персональная, прикольная Сеть, на которой я вырос, не превратилась в тень прошлого — она всё ещё здесь, в 2020. Просто надо знать, где искать.</p> -<p>И нет, я не к тому, что раньше всё было лучше. Не было. Были трояны, вредоносные программы, бесконечные всплывающие окна, отвратительные подходы к безопасности, несовместимость браузеров, тормозные Java-апплеты... Нет, технически современная сеть более безопасна и пригодна для использования.</p> -<p>Данное эссе — моя попытка показать вам, как может выглядеть независимая Сеть, чем она отличается от сайтов, доминирующих сегодня, почему она стоит того, чтоб её исследовать, и как легко стать её частью.</p> -<h2>Дизайн в ретро-стиле</h2> -<p>На <a href="https://neustadt.fr/">моей домашней страничке</a> я упоминаю, что этот сайт "дань уважения креативной сети 90х". И это не только потому, что на нём есть анимированные гифки и гостевая книга. Сам <em>способ</em> его создания — тот же, которым я пользовался при создании своих первых сайтов: всё написано на голом HTML.</p> -<p>Никаких систем управления контентом, никаких генераторов, шаблонов, тем, плагинов. Простая разметка и стиль — базовые кирпичики, из которых строится сеть.</p> -<p>Изначально я не планировал так поступать. Ранее я <a href="https://neustadt.fr/essays/crafting-a-simple-blog-with-metalsmith">использовал</a> генератор статических сайтов, чтоб получить чистый HTML, и просто работал над новым дизайном для него. Но моя трехлетняя установка node.js теперь долбила меня сообщениями об ошибках, говоря, что некоторые зависимости должны быть обновлены, и ч топлагин более не совеместим. Ну а так как я ленив, и не хотел чинить это всё, я подумал — а почему бы не делать всё руками, не создавая проблем на ровном месте.</p> -<p>Так я и сделал. Решил писать всё руками на чистом HTML и CSS, вручную вставляя ссылки на все страницы и даже заполняя RSS-ленту. И буду честным, давно я так не развлекался, создавая сайт, с тех пор как впервые начал играться с Microsoft Frontpage и Adobe Photoshop 4.0 в конце 90х/начале 2000х.</p> -<p>Такой подход не сработал бы с более крупным сайтом. Но в случае с малышом вроде моего, с десятком страниц, очевидны плюсы: никаких зависимостей, простота обслуживания, уверенность в будущем, легко перенести в другое место, и, самое главное, чертовски интересно в работе. Я засиживался до шести утра два дня подряд, работая над дизайном, не потому что не мог уснуть, а потому, что не желал останавливаться. Надо заметить, что около 30% времени было потрачено на прочёсывание <a href="https://gifcities.org/">GifCities.org</a> и <a href="https://archive.org/web/">Internet Archive</a> на предмет анимированных гифок и фоновых изображений.</p> -<p>Переработка дизайна сайта в такой манере сподвигла меня прошерстить архивы старых сайтов в поисках интересных реликвий из старой сети. Что, в свою очередь, привело меня на прикольные, креативные вебсайты, активно поддерживаемые до сих пор.</p> -<p>Для понимания, что эти мелкие сайты из себя представляют, и почему я считаю, что они важны, нам надо обратиться к прошлому.</p> -<h2>Первые веб-страницы</h2> -<p>В девяностые Сеть пребывала во младенчестве. Возможно, вы знаете эту историю.</p> -<p>Её только-только, в 1991, <a href="https://home.cern/science/computing/birth-web/short-history-web">изобрёл сэр Тим Бёрнерс-Ли</a>, выпустив как <a href="https://home.cern/science/computing/birth-web/licensing-web">общественное достояние</a> в 1993м, делая тем самым доступной для использования и строительства всему миру. В самом начале Сеть была доступна преимущественно технически подкованнаму народу, благодаря протоколам тех времён, таких как Gopher [ныне живее всех живых - прим.пер.], FTP, Usenet и других. И до появления первого удобного графического браузера <a href="http://www.ncsa.illinois.edu/enabling/mosaic">Mosaic</a>, вышедшего в 1993, рядовому пользователю компьютера было непросто начать освоение Сети. Кто-то, как я, например, открыл Сеть позже, когда на сцену вышли <a href="http://sillydog.org/netscape/">Netscape Navigator</a> — порождение Mosaic, ныне породившее <a href="https://www.mozilla.org/en-GB/firefox/new/">Firefox</a> и Internet Explorer.</p> -<p>Это было ужасно восхитительно. В отличие от традиционных СМИ, вы теперь могли взаимодействовать и принимать участие в происходящем. Это была первая всепланентная система связи, в которой кто угодно, где угодно в мире, мог создать собственную страничку и делиться своими мыслями и идеями со всем миром. В Netscape позднее даже добавили <a href="https://www.ccsf.edu/Pub/Fac/composer.html">редактор</a>, позволявший пользователям создавать веб-страницы визуально, как будто работая в текстовом процессоре (WYSIWYG, как это тогда называлось: what you see is what you get — что видишь, то и получаешь). Целью было дать возможность каждому, не обладающему техническими навыками, создать страничку.</p> -<p>Но страничку надо разместить где-то в Сети. Где же?</p> -<p>Нужен был сетевой хост, на котором можно было выложить страничку и поделиться её публичным адресом, чтоб люди могли её посетить. В идеале бы ещё и бесплатно, чтоб можно было попробовать это просто для развлечения, не особо заморачиваясь. Тут-то и появились <a href="https://web.archive.org/web/19980704165228/http://www20.geocities.com/join/freehp.html">Geocities</a>, вместе с другими веб-хостингами, такими как <a href="https://web.archive.org/web/20000815052634/http://www.tripod.lycos.com/">Tripod</a>, <a href="https://web.archive.org/web/20000229235048/http://www.fortunecity.com/build/index.html">Fortunecity</a> и <a href="https://web.archive.org/web/20000815053429/http://www.freeservers.com/">Freeservers</a> (в России это были Chat.ru, Narod.ru и подобные - прим.пер.). Они стали, пожалуй, самым мощным катализатором демократизации Сети.</p> -<p><img src="static/Geocities-1998.jpg" alt="Вид на Geocities из февраля 1998"></p> -<p>Это было так просто — любой желающий мог создать бесплатную учётную запись и создать вебсайт, чтоб делиться своими идеями и хобби. И они делились! Люди создавали сайты, практически обо всём: музыке, философии, <a href="https://web.archive.org/web/20011004132631/http://www.geocities.com/%7Eintransit1/home/home_frm.html">арт-проектах</a>, <a href="https://web.archive.org/web/20010424064639/http://www.geocities.com/spunk1111/">псевдографических рисунках</a>, <a href="https://web.archive.org/web/20000815075236/http://www.pezcentral.com/pezmenu.html">конфетах</a> и <a href="https://geocities.restorativland.org/Athens/Olympus/1406/main.html">собственной жизни</a>.</p> -<p>Ключевым моментом было то, что большинство этих людей, создателей сайтов, не были ни профессионалами, ни компаниями — просто люди, которые хотели поделиться своими интересами. Как я поступил в 2001, со своим <a href="https://web.archive.org/web/20020103123131/http://www.geocities.com:80/gammarayfan">неофициальным фан-сайтом немецкой группы Gamma Ray</a>:</p> -<p><img src="static/gammarayfansite-2001.jpg" alt="Фан-сайт группы Gamma Ray на Geocities, 2001"></p> -<p>Но как хоть кто-нибудь должен узнать о существовании этих страничек? Гугла-то тогда не было. Существовали поисковые машины, такие как <a href="https://web.archive.org/web/19980214192548/http://www.lycos.com/">Lycos</a>, <a href="https://web.archive.org/web/19980214192548/http://www.lycos.com/">Excite</a> и <a href="https://web.archive.org/web/19980206192654/http://www.northernlight.com/">Northern Lights</a>, но они не шли ни в какое сравнение с современными поисковыми движками. Чтоб найти что-то нужное, недостаточно было просто ввести несколько слов и в пару кликов получить информацию.</p> -<p>Нет, сеть тогда больше напоминала путешествие. Это было <em>место</em>, в которое вы отправлялись, чтоб открыть новые пространства, это напоминало исследование открытого моря. Новое виртуальное пространство, которое приводило в разные странные, интересные, восхитительные места. Таковой была Сеть. По крайней мере, в нашем коллективном воображении.</p> -<h2>Мастера и навигаторы</h2> -<p>Сеть была иным местом в те годы, и для её описания использовали другие слова. В статье, озаглавленной <a href="https://rhizome.org/editorial/2015/nov/30/oldweb-today/">Киберпространство, в старомодной манере</a>, авторы из проекта Rhizome отмечают очень важную вещь:</p> +<a href="https://neustadt.fr/index.html">Parimal Satyal, 25 мая 2020</a> +Каждый редизайн сайта начинается со вдохновения. +Вдохновением для конкретно этого (https://neustadt.fr) послужили две странички: <a href="https://anders.unix.se/">Чистый и читабельный вебсайт</a> Андерса, вдохновивший на домашнюю страничку, и <a href="https://marijnflorence.neocities.org/index.html">сайт Marijn</a>, напомнивший, каким прикольным может быть веб. Цвета, графика, <a href="https://marijnflorence.neocities.org/music/">креативная навигация</a>, <a href="https://en.wikipedia.org/wiki/Holocene_calendar">интересные идеи</a>... сам процесс прокликивания чьей-нибудь персональной странички в 2020м вызывает во мне ностальгию по Сети конца 90х и ранних 2000х, на которой я вырос. +Некоторые из вас, возможно, уже читали мою предыдущую статью <a href="https://neustadt.fr/essays/against-a-user-hostile-web/">Against an Increasingly User Hostile Web</a>. В ней я утверждаю, что мы заменяем открытую Сеть, объединяющую и вдохновляющую, на ту, что ограничивает людей и превращает их в товар. Я говорил о том, что современная Сеть, следящая, разбухшая и огороженная, конфликтует с той открытой Сетью, что я люблю. И я был приятно удивлён тем, как много людей разделяют мои чувства, людей, писавших мне письма, <a href="https://www.eduardomorais.com/stream/id/3519">ответы в собственных блогах</a> и <a href="https://news.ycombinator.com/item?id=15611122">обсуждавших это</a> на <a href="https://lobste.rs/s/5bi46y/against_increasingly_user_hostile_web">форумах</a>. Несмотря на полуторагодовую давность, статья всё так же, к сожалению, отражает текущее состояние Сети. +Но то, что я наткнулся на сайт Marijn, вселило в меня надежду. Она провела меня по кроличьей норе множества других мелких вебсайтов, созданных людьми со всевозможными интересами: фильмы, авиация, музыка, искусство, компьютеры. Это напомнило мне о том, что креативная, персональная, прикольная Сеть, на которой я вырос, не превратилась в тень прошлого — она всё ещё здесь, в 2020. Просто надо знать, где искать. +И нет, я не к тому, что раньше всё было лучше. Не было. Были трояны, вредоносные программы, бесконечные всплывающие окна, отвратительные подходы к безопасности, несовместимость браузеров, тормозные Java-апплеты... Нет, технически современная сеть более безопасна и пригодна для использования. +Данное эссе — моя попытка показать вам, как может выглядеть независимая Сеть, чем она отличается от сайтов, доминирующих сегодня, почему она стоит того, чтоб её исследовать, и как легко стать её частью. +</div> +</div> + <div class="bh-wide-row bh-vert-2"> + <div class="bh-col-4"> + <h2>Дизайн в ретро-стиле</h2> + </div> + <div class="bh-col-8"> + +На <a href="https://neustadt.fr/">моей домашней страничке</a> я упоминаю, что этот сайт "дань уважения креативной сети 90х". И это не только потому, что на нём есть анимированные гифки и гостевая книга. Сам <em>способ</em> его создания — тот же, которым я пользовался при создании своих первых сайтов: всё написано на голом HTML. +Никаких систем управления контентом, никаких генераторов, шаблонов, тем, плагинов. Простая разметка и стиль — базовые кирпичики, из которых строится сеть. +Изначально я не планировал так поступать. Ранее я <a href="https://neustadt.fr/essays/crafting-a-simple-blog-with-metalsmith">использовал</a> генератор статических сайтов, чтоб получить чистый HTML, и просто работал над новым дизайном для него. Но моя трехлетняя установка node.js теперь долбила меня сообщениями об ошибках, говоря, что некоторые зависимости должны быть обновлены, и ч топлагин более не совеместим. Ну а так как я ленив, и не хотел чинить это всё, я подумал — а почему бы не делать всё руками, не создавая проблем на ровном месте. +Так я и сделал. Решил писать всё руками на чистом HTML и CSS, вручную вставляя ссылки на все страницы и даже заполняя RSS-ленту. И буду честным, давно я так не развлекался, создавая сайт, с тех пор как впервые начал играться с Microsoft Frontpage и Adobe Photoshop 4.0 в конце 90х/начале 2000х. +Такой подход не сработал бы с более крупным сайтом. Но в случае с малышом вроде моего, с десятком страниц, очевидны плюсы: никаких зависимостей, простота обслуживания, уверенность в будущем, легко перенести в другое место, и, самое главное, чертовски интересно в работе. Я засиживался до шести утра два дня подряд, работая над дизайном, не потому что не мог уснуть, а потому, что не желал останавливаться. Надо заметить, что около 30% времени было потрачено на прочёсывание <a href="https://gifcities.org/">GifCities.org</a> и <a href="https://archive.org/web/">Internet Archive</a> на предмет анимированных гифок и фоновых изображений. +Переработка дизайна сайта в такой манере сподвигла меня прошерстить архивы старых сайтов в поисках интересных реликвий из старой сети. Что, в свою очередь, привело меня на прикольные, креативные вебсайты, активно поддерживаемые до сих пор. +Для понимания, что эти мелкие сайты из себя представляют, и почему я считаю, что они важны, нам надо обратиться к прошлому. + +</div> +</div> + <div class="bh-wide-row bh-vert-2"> + <div class="bh-col-4"> + <h2>Первые веб-страницы</h2> + </div> + <div class="bh-col-8"> + +В девяностые Сеть пребывала во младенчестве. Возможно, вы знаете эту историю. +Её только-только, в 1991, <a href="https://home.cern/science/computing/birth-web/short-history-web">изобрёл сэр Тим Бёрнерс-Ли</a>, выпустив как <a href="https://home.cern/science/computing/birth-web/licensing-web">общественное достояние</a> в 1993м, делая тем самым доступной для использования и строительства всему миру. В самом начале Сеть была доступна преимущественно технически подкованнаму народу, благодаря протоколам тех времён, таких как Gopher [ныне живее всех живых - прим.пер.], FTP, Usenet и других. И до появления первого удобного графического браузера <a href="http://www.ncsa.illinois.edu/enabling/mosaic">Mosaic</a>, вышедшего в 1993, рядовому пользователю компьютера было непросто начать освоение Сети. Кто-то, как я, например, открыл Сеть позже, когда на сцену вышли <a href="http://sillydog.org/netscape/">Netscape Navigator</a> — порождение Mosaic, ныне породившее <a href="https://www.mozilla.org/en-GB/firefox/new/">Firefox</a> и Internet Explorer. +Это было ужасно восхитительно. В отличие от традиционных СМИ, вы теперь могли взаимодействовать и принимать участие в происходящем. Это была первая всепланентная система связи, в которой кто угодно, где угодно в мире, мог создать собственную страничку и делиться своими мыслями и идеями со всем миром. В Netscape позднее даже добавили <a href="https://www.ccsf.edu/Pub/Fac/composer.html">редактор</a>, позволявший пользователям создавать веб-страницы визуально, как будто работая в текстовом процессоре (WYSIWYG, как это тогда называлось: what you see is what you get — что видишь, то и получаешь). Целью было дать возможность каждому, не обладающему техническими навыками, создать страничку. +Но страничку надо разместить где-то в Сети. Где же? +Нужен был сетевой хост, на котором можно было выложить страничку и поделиться её публичным адресом, чтоб люди могли её посетить. В идеале бы ещё и бесплатно, чтоб можно было попробовать это просто для развлечения, не особо заморачиваясь. Тут-то и появились <a href="https://web.archive.org/web/19980704165228/http://www20.geocities.com/join/freehp.html">Geocities</a>, вместе с другими веб-хостингами, такими как <a href="https://web.archive.org/web/20000815052634/http://www.tripod.lycos.com/">Tripod</a>, <a href="https://web.archive.org/web/20000229235048/http://www.fortunecity.com/build/index.html">Fortunecity</a> и <a href="https://web.archive.org/web/20000815053429/http://www.freeservers.com/">Freeservers</a> (в России это были Chat.ru, Narod.ru и подобные - прим.пер.). Они стали, пожалуй, самым мощным катализатором демократизации Сети. +<br> +<img src="static/Geocities-1998.jpg" alt="Вид на Geocities из февраля 1998"> +<br> +Это было так просто — любой желающий мог создать бесплатную учётную запись и создать вебсайт, чтоб делиться своими идеями и хобби. И они делились! Люди создавали сайты, практически обо всём: музыке, философии, <a href="https://web.archive.org/web/20011004132631/http://www.geocities.com/%7Eintransit1/home/home_frm.html">арт-проектах</a>, <a href="https://web.archive.org/web/20010424064639/http://www.geocities.com/spunk1111/">псевдографических рисунках</a>, <a href="https://web.archive.org/web/20000815075236/http://www.pezcentral.com/pezmenu.html">конфетах</a> и <a href="https://geocities.restorativland.org/Athens/Olympus/1406/main.html">собственной жизни</a>. +Ключевым моментом было то, что большинство этих людей, создателей сайтов, не были ни профессионалами, ни компаниями — просто люди, которые хотели поделиться своими интересами. Как я поступил в 2001, со своим <a href="https://web.archive.org/web/20020103123131/http://www.geocities.com:80/gammarayfan">неофициальным фан-сайтом немецкой группы Gamma Ray</a>: +<br> +<img src="static/gammarayfansite-2001.jpg" alt="Фан-сайт группы Gamma Ray на Geocities, 2001"> +<br> +Но как хоть кто-нибудь должен узнать о существовании этих страничек? Гугла-то тогда не было. Существовали поисковые машины, такие как <a href="https://web.archive.org/web/19980214192548/http://www.lycos.com/">Lycos</a>, <a href="https://web.archive.org/web/19980214192548/http://www.lycos.com/">Excite</a> и <a href="https://web.archive.org/web/19980206192654/http://www.northernlight.com/">Northern Lights</a>, но они не шли ни в какое сравнение с современными поисковыми движками. Чтоб найти что-то нужное, недостаточно было просто ввести несколько слов и в пару кликов получить информацию. +Нет, сеть тогда больше напоминала путешествие. Это было <em>место</em>, в которое вы отправлялись, чтоб открыть новые пространства, это напоминало исследование открытого моря. Новое виртуальное пространство, которое приводило в разные странные, интересные, восхитительные места. Таковой была Сеть. По крайней мере, в нашем коллективном воображении. +</div> +</div> + <div class="bh-wide-row bh-vert-2"> + <div class="bh-col-4"> + <h2>Мастера и навигаторы</h2> + </div> + <div class="bh-col-8"> + +Сеть была иным местом в те годы, и для её описания использовали другие слова. В статье, озаглавленной <a href="https://rhizome.org/editorial/2015/nov/30/oldweb-today/">Киберпространство, в старомодной манере</a>, авторы из проекта Rhizome отмечают очень важную вещь: <blockquote> -<p>Современные браузеры стараются быть невидимыми, сливаясь с визуальным окружением рабочей станции, пытаясь убедить пользователя, что "облако" — это продолжение его жёсткого диска. В 90е дизайн браузера придерживался противоположного подхода, используя иконографию, ассоциируемую с путешествиями, чтоб передать ощущение отправки в путешествие. Netscape Navigator, использовавший штурвал в своём логотипе, давал очень явную отсылку к морскому происхождению префикса "cyber", Internet Explorer же своим лого обещал взять пользователя в путешествие вокруг земного шара.</p> +Современные браузеры стараются быть невидимыми, сливаясь с визуальным окружением рабочей станции, пытаясь убедить пользователя, что "облако" — это продолжение его жёсткого диска. В 90е дизайн браузера придерживался противоположного подхода, используя иконографию, ассоциируемую с путешествиями, чтоб передать ощущение отправки в путешествие. Netscape Navigator, использовавший штурвал в своём логотипе, давал очень явную отсылку к морскому происхождению префикса "cyber", Internet Explorer же своим лого обещал взять пользователя в путешествие вокруг земного шара. </blockquote> -<p><img src="static/navigator-explorer.jpg" alt="старые логотипы Netscape Navigator и Internet Explorer"></p> -<p>Навигация. Исследование. Просмотр. Сёрфинг. Сеть была сродни виртуальному представлению физического пространства. Был даже англоязычный термин <em>webspace</em> (сетевое пространство). В Geocities это выражалось концепцией <a href="https://web.archive.org/web/19980704165140/http://www20.geocities.com/neighborhoods/">Соседств</a> — так назывались категории сайтов, например <em>Зона51</em> для научной фантастики, <em>Хартленд</em> для семей и домашних животных, <em>ТропическийЛес</em> для проблем окружающей среды, <em>Вена</em> для классической музыки, <em>МысКанаверал</em> для науки и математики.</p> -<p><img src="static/geocities-neighbourhoods-1998.png" alt="Соседства Geocities, 1998"></p> -<p>Ещё одно слово, часто использовавшееся во времена Geocities, ныне вышедшее из обихода, "вебмастер". Идея была в том, что вы создавали <em>место</em> в Сети, в которым вы были <em>хозяином</em> (мастером). Вы приветствовали поетителей (иногда экраном заставки), проводили их по окрестностями, объясняя, о чём это место и какие пространства для них доступны (как правило, на домашней страничке), и напоминали им оставить заметку в гостевой книге, прежде чем отправиться восвояси.</p> -<p>Но семантика Сети былых времён имела смысл только в контексте <em>практического</em> взаимодействия с ней. Вы крайне редко заходили за чем-то одним, с тем, чтоб сразу уйти обратно. Вы, как правило <em>заходили</em> на вебсайт, и осматривались вокруг. Вы обозревали.</p> -<p>Это отсылает нас к изначальному вопросу о том, как же <em>интернавты</em> обнаруживали ваш сайт впервые. Вы были везунчиком, если ваш сайт отображался в догугловских поисковиках, но даже если он там появлялся, это, скорее всего, значило, что кто-то активно ищет именно его. Но ведь не каждый посетитель вашего сайта <em>действительно</em> искал чего-то конкретного. Они могли просто разыскивать вебсайты на интересующую их тематику.</p> -<p>Одним из способов сделать это были каталоги сайтов, такие как Соседства Geocities (или, например, Rambler, Улитка и Апорт в рунете — прим. пер.): списки вебсайтов, часто разделённые на категории и подкатегории. Фактически, большинство поисковиков были также каталогами, или <em>порталами</em>, как их тогда называли.</p> -<p><img src="static/excite-channels.jpg" alt="1997 - Excite, совмещающий в себе каталог сайтов, организованных в каналы, и поисковик"></p> -<p>Одним из крупнейших был <a href="https://web.archive.org/web/20010206123038/http://www.dmoz.org/about.html">DMOZ open-directory project</a>, основанный на каталогах Mozilla, чьей целью было "создать наиболее всеобъемлющий каталог Сети, опираясь на огромную армию редакторов-волонтёров". Вы и сейчас можете просмотреть <a href="https://web.archive.org/web/20010224172816/http://www.dmoz.org/">версию этого каталога 2001 года</a> для осознания того, как это работало.</p> -<p>Другой способ обнаружения новых вебсайтов опирался на ключевую особенность Сети — гиперссылки. Вы заходили на один сайт и обнаруживали путь на множество других, примерно как если вы сейчас зайдёте в мой раздел <a href="https://neustadt.fr/retro-stuff">"Retro stuff"</a> и проследуете по одной из ссылок на что-нибудь интересное, где-то в сети. Идея перекрёстных ссылок между сайтами была обыденностью; большинство сайтов имели страницы "ссылки" со своей собственной персональной коллекцией интересных страниц.</p> -<p>Перекрёстные ссылки были основным способом, которым лично я обнаруживал свои любимые сайты, которые потом добавлял в закладки, чтоб иметь возможность зайти снова. Фактически, практика перекрёстных ссылок включала интересный культурный элемент: <em>сетевые кольца</em> (webrings).</p> -<p><img src="static/example-webring.jpg" alt="Пример сетевого кольца на тему Европейской истории"></p> -<p><a href="http://brisray.com/web/webrings.htm">Сетевые кольца</a> были "круговыми" коллекциями вебсайтов, зачастую созданными вокруг одной темы. Идея была в том, что вы могли переходить с одного сайта на другой, щёлкая на кнопки "следующий" или "предыдущий", которые каждый член Кольца размещал внизу своей домашней странички. Теперь они тоже практически исчезли.</p> -<h2>Современные привратники</h2> -<p>Сегодня большая часть времени, проводимого в сети, проходит либо непосредственно <em>на</em> небольшом количестве доминирующих платформ вроде Facebook/ВК, либо опосредовано <em>через</em> них.</p> -<p>Столь огромное количество "контента" постоянно пропихивается через вас, как пользователя, что нынче редко кто из нас решается на самостоятельное исследование и поиск. Нам просто не нужно. Но эти платформы процветают на "вовлечении пользователя" — лайки, комментарии, репосты — и их алгоритмы предпочитают демонстрировать тот контент, что генерирует нужное поведение. Вместо обозревания, Сеть сейчас для большинства пользователей — бесконечный и зачастую ошеломляющий поток контента и комментариев, отобранных алгоритмами, основанными на том, что, по их мнению, вам уже нравится, и что <em>вовлечёт</em> вас. Эта практика прямо противоположна исследованию.</p> -<p>Когда вы не <em>получаете</em> информацию пассивно, а вместо этого активно ищете что-либо, вас, скорее всего, затянет в единую точку сингулярности, где сейчас находятся <a href="https://www.statista.com/statistics/216573/worldwide-market-share-of-search-engines/">87% всех пользователей сети</a> — Google.</p> -<p>Гугл стал де-факто привратником сети, судьёй, решающим, что полезно, и что достойно быть увиденным. Большинство сайтов, ссылки на которые вы обнаружите на первой странице поисковой выдачи, то есть те, на которые вы скорее всего кликните - <a href="https://backlinko.com/google-ctr-stats">менее 1% пользователей нажимают на ссылки на второй странице</a> — специально разработаны, чтоб попасть туда, отпимизированы под алгоритмы Гугла. Одно из последствий этого — большинство вебсайтов, на которые люди переходят "естественным образом", созданы профессионалами и маркетологами, "позиционирующими" их на нужных ключевых словах. Это означает, что малая, любительская сеть прячется в тени сетевых профессионалов, строящих дизайн вокруг специфических ключевых слов и аудитории.</p> -<p><img src="static/google-bartending-recipes.jpg" alt="Запрос bartending recipes в Гугле не приведёт вас в Малую Сеть"></p> -<p>Google монополизировал не только поиск — остальные поисковики, такие как Bing, DuckDuckGo и Quant всё ещё <a href="https://www.statista.com/statistics/216573/worldwide-market-share-of-search-engines/">далеко позади</a> — это ещё и крупнейшая торговая площадка. В прошлом году 31% мировых затрат на рекламу ($103,73 миллиарда) <a href="https://www.emarketer.com/content/global-digital-ad-spending-2019">пришлись на площадки Google</a>. Власть, которую даёт такое положение, вкупе с присутствием практически на каждом крупном сайте (посредством широко распространённой платформы аналитики (относительно конфиденциальности которой <a href="https://www.emerald.com/insight/content/doi/10.1108/OIR-02-2018-0056/full/pdf?title=protecting-privacy-on-the-web-a-study-of-https-and-google-analytics-implementation-in-academic-library-websites">имеются обоснованные сомнения</a> ) означает, что он может активно продвигать своё собственное видение Сети.</p> -<p>И эта сеть сильно отличается от "малой сети", создаваемой вебмастерами 90х и ранних 2000х. Сеть Google обладает <a href="https://web.archive.org/web/20190214003848/https://marketingplatform.google.com/about/analytics/">другим набором ценностей и терминологией</a>, что приходит с ними: персонализация, взгляды, вовлечение, конверсия, производительность, оптимизация.</p> -<h2>Коммерческая (маркетинговая) Сеть</h2> -<p>В сети всегда было место коммерции и маркетингу.</p> -<p><a href="https://www.webdesignmuseum.org/web-design-history/amazon-com-1995">Amazon</a> уже в 1995 году продавал книги онлайн, <a href="https://www.webdesignmuseum.org/web-design-history/ebay-1997">eBay</a> был запущен в 1997, а <a href="https://web.archive.org/web/19970605120422/http://www.dell.com/">Dell</a> к концу того же года продал оборудования больше, чем на миллион долларов. К 2000м, невзирая на <a href="https://ideas.ted.com/an-eye-opening-look-at-the-dot-com-bubble-of-2000-and-how-it-shapes-our-lives-today/">крах доткомов</a>, сетевая коммерция росла. Это развитие было естественным — сеть позволила продавцам контактировать с более удалёнными клиентами, без необходимости опираться на телефонные заказы, факс или почтовую систему. Коммерческая сеть сосуществовала и росла вместе с частной, любительской. Открытая природа сети означала, что любые сайты могут процветать.</p> -<p>Но сегодняшняя Сеть <em>по большей части</em> коммерческая. Малая сеть любителей не имеет ни ресурсов, ни желания конкурировать за видимость и аудиторию тем способом, которым это делает сеть коммерческая.</p> -<p>Компании и маркетологи осознали, что сеть предоставила новые возможности для продажи большего количества товара, и <em>таргетирования</em> пользователей на основе отслеживания их сетевой активности. Они принялись вкладывать деньги в цифровые рекламные стратегии, анализируя, как люди используют сеть, о чём говорят, что ищут и на что нажимают. Маркетинговые компании убедили брэнды, что те должны присутствовать в сети и производить контент, чтоб быть более релевантными, потому что их клиенты уже там. Они изобрели такие термины как "нативная реклама" и "спонсорский контент" (это контент, созданный так, чтоб выглядеть как обычная статья, но по сути являющийся оплаченной рекламой). Компании начали вбухивать деньги в цифровые стратегии, чтоб понимать и влиять на поведение интернет-пользователей по их желанию.</p> -<p><img src="static/quantcast.jpg" alt="Такие конторы как Quantcast предлагают детальный анализ поведенческих и психографических данных на нас — пользователй, включающие наши действия на различных веб-сайтах, позволяя маркетологам отслеживать и влиять на нас"></p> -<p>С такой стратегией относительно контента, аналитикой (инфраструктура слежки, о которой я говорил <a href="https://neustadt.fr/essays/against-a-user-hostile-web">в предыдущей статье</a> и поисковой оптимизацией, коммерческая сеть привнесла принципиально отличный набор приоритетов: <em>вовлечь</em> "аудиторию", <em>обратить</em> её и <em>удержать</em> как можно дольше.</p> -<p>Для них Сеть — всего лишь один из каналов торговли.</p> -<p>В сравнении с Малой сетью, коммерческая — расчётливая и хищническая. Она способна динамически генерировать сотни страниц вокруг любого распространённого поискового запроса. Она может отслеживать пользователя на множестве сайтов, анализируя его действия, и используя эту информацию для более точного таргетирования. И у неё очень серьёзные ресурсы. За прошлый год компании потратили <a href="https://www.emarketer.com/content/global-digital-ad-spending-2019">более 300 миллиардов евро</a> на онлайн-рекламу, большая часть из которых пошла тем самым привратникам — Google и Facebook — которые продают ис способность лучше <em>таргетировать</em> вас, базируясь на той информации, которую вы им дали.</p> -<p><em>Всё это говорит о том, что пользователи сети пришли к тому, что взаимодействуют они большую часть времени в видимой хищнической коммерческой сети, в то время как множество мелких любительских сайтов остаются скрытыми информационным шумом.</em></p> -<h2>Продукто-ориентированный вебсайт</h2> -<p>Дизайн современной коммерческой сети "стерилен": он прилизан, он следует конвенциям и оптимизирован для эффективности. Это — одна из причин, почему так много вебсайтов, которые вы посещаете сегодня, выглядят одинаково. Кодекс коммерческой сети стал настолько доминантным, что мы просто забыли, что малая сеть всё ещё существует, и имеет абсолютно иные приоритеты.</p> -<p>Современные принципы веб-дизайна крайне редко нацелены на обычного человека, ищущего, как создать свой вебсайт или ищущего что-то, в чём он заинтересован. Вместо этого они фокусируются на эффективных вебсайтах:</p> +<br> +<img src="static/navigator-explorer.jpg" alt="старые логотипы Netscape Navigator и Internet Explorer"> +<br> +Навигация. Исследование. Просмотр. Сёрфинг. Сеть была сродни виртуальному представлению физического пространства. Был даже англоязычный термин <em>webspace</em> (сетевое пространство). В Geocities это выражалось концепцией <a href="https://web.archive.org/web/19980704165140/http://www20.geocities.com/neighborhoods/">Соседств</a> — так назывались категории сайтов, например <em>Зона51</em> для научной фантастики, <em>Хартленд</em> для семей и домашних животных, <em>ТропическийЛес</em> для проблем окружающей среды, <em>Вена</em> для классической музыки, <em>МысКанаверал</em> для науки и математики. +<br> +<img src="static/geocities-neighbourhoods-1998.png" alt="Соседства Geocities, 1998"> +<br> +Ещё одно слово, часто использовавшееся во времена Geocities, ныне вышедшее из обихода, "вебмастер". Идея была в том, что вы создавали <em>место</em> в Сети, в которым вы были <em>хозяином</em> (мастером). Вы приветствовали поетителей (иногда экраном заставки), проводили их по окрестностями, объясняя, о чём это место и какие пространства для них доступны (как правило, на домашней страничке), и напоминали им оставить заметку в гостевой книге, прежде чем отправиться восвояси. +Но семантика Сети былых времён имела смысл только в контексте <em>практического</em> взаимодействия с ней. Вы крайне редко заходили за чем-то одним, с тем, чтоб сразу уйти обратно. Вы, как правило <em>заходили</em> на вебсайт, и осматривались вокруг. Вы обозревали. +Это отсылает нас к изначальному вопросу о том, как же <em>интернавты</em> обнаруживали ваш сайт впервые. Вы были везунчиком, если ваш сайт отображался в догугловских поисковиках, но даже если он там появлялся, это, скорее всего, значило, что кто-то активно ищет именно его. Но ведь не каждый посетитель вашего сайта <em>действительно</em> искал чего-то конкретного. Они могли просто разыскивать вебсайты на интересующую их тематику. +Одним из способов сделать это были каталоги сайтов, такие как Соседства Geocities (или, например, Rambler, Улитка и Апорт в рунете — прим. пер.): списки вебсайтов, часто разделённые на категории и подкатегории. Фактически, большинство поисковиков были также каталогами, или <em>порталами</em>, как их тогда называли. +<br> +<img src="static/excite-channels.jpg" alt="1997 - Excite, совмещающий в себе каталог сайтов, организованных в каналы, и поисковик"> +<br> +Одним из крупнейших был <a href="https://web.archive.org/web/20010206123038/http://www.dmoz.org/about.html">DMOZ open-directory project</a>, основанный на каталогах Mozilla, чьей целью было "создать наиболее всеобъемлющий каталог Сети, опираясь на огромную армию редакторов-волонтёров". Вы и сейчас можете просмотреть <a href="https://web.archive.org/web/20010224172816/http://www.dmoz.org/">версию этого каталога 2001 года</a> для осознания того, как это работало. +Другой способ обнаружения новых вебсайтов опирался на ключевую особенность Сети — гиперссылки. Вы заходили на один сайт и обнаруживали путь на множество других, примерно как если вы сейчас зайдёте в мой раздел <a href="https://neustadt.fr/retro-stuff">"Retro stuff"</a> и проследуете по одной из ссылок на что-нибудь интересное, где-то в сети. Идея перекрёстных ссылок между сайтами была обыденностью; большинство сайтов имели страницы "ссылки" со своей собственной персональной коллекцией интересных страниц. +Перекрёстные ссылки были основным способом, которым лично я обнаруживал свои любимые сайты, которые потом добавлял в закладки, чтоб иметь возможность зайти снова. Фактически, практика перекрёстных ссылок включала интересный культурный элемент: <em>сетевые кольца</em> (webrings). +<br> +<img src="static/example-webring.jpg" alt="Пример сетевого кольца на тему Европейской истории"> +<br> +<a href="http://brisray.com/web/webrings.htm">Сетевые кольца</a> были "круговыми" коллекциями вебсайтов, зачастую созданными вокруг одной темы. Идея была в том, что вы могли переходить с одного сайта на другой, щёлкая на кнопки "следующий" или "предыдущий", которые каждый член Кольца размещал внизу своей домашней странички. Теперь они тоже практически исчезли. +</div> +</div> + <div class="bh-wide-row bh-vert-2"> + <div class="bh-col-4"> + <h2>Современные привратники</h2> + </div> + <div class="bh-col-8"> + + +Сегодня большая часть времени, проводимого в сети, проходит либо непосредственно <em>на</em> небольшом количестве доминирующих платформ вроде Facebook/ВК, либо опосредовано <em>через</em> них. +Столь огромное количество "контента" постоянно пропихивается через вас, как пользователя, что нынче редко кто из нас решается на самостоятельное исследование и поиск. Нам просто не нужно. Но эти платформы процветают на "вовлечении пользователя" — лайки, комментарии, репосты — и их алгоритмы предпочитают демонстрировать тот контент, что генерирует нужное поведение. Вместо обозревания, Сеть сейчас для большинства пользователей — бесконечный и зачастую ошеломляющий поток контента и комментариев, отобранных алгоритмами, основанными на том, что, по их мнению, вам уже нравится, и что <em>вовлечёт</em> вас. Эта практика прямо противоположна исследованию. +Когда вы не <em>получаете</em> информацию пассивно, а вместо этого активно ищете что-либо, вас, скорее всего, затянет в единую точку сингулярности, где сейчас находятся <a href="https://www.statista.com/statistics/216573/worldwide-market-share-of-search-engines/">87% всех пользователей сети</a> — Google. +Гугл стал де-факто привратником сети, судьёй, решающим, что полезно, и что достойно быть увиденным. Большинство сайтов, ссылки на которые вы обнаружите на первой странице поисковой выдачи, то есть те, на которые вы скорее всего кликните - <a href="https://backlinko.com/google-ctr-stats">менее 1% пользователей нажимают на ссылки на второй странице</a> — специально разработаны, чтоб попасть туда, отпимизированы под алгоритмы Гугла. Одно из последствий этого — большинство вебсайтов, на которые люди переходят "естественным образом", созданы профессионалами и маркетологами, "позиционирующими" их на нужных ключевых словах. Это означает, что малая, любительская сеть прячется в тени сетевых профессионалов, строящих дизайн вокруг специфических ключевых слов и аудитории. +<br> +<img src="static/google-bartending-recipes.jpg" alt="Запрос bartending recipes в Гугле не приведёт вас в Малую Сеть"> +<br> +Google монополизировал не только поиск — остальные поисковики, такие как Bing, DuckDuckGo и Quant всё ещё <a href="https://www.statista.com/statistics/216573/worldwide-market-share-of-search-engines/">далеко позади</a> — это ещё и крупнейшая торговая площадка. В прошлом году 31% мировых затрат на рекламу ($103,73 миллиарда) <a href="https://www.emarketer.com/content/global-digital-ad-spending-2019">пришлись на площадки Google</a>. Власть, которую даёт такое положение, вкупе с присутствием практически на каждом крупном сайте (посредством широко распространённой платформы аналитики (относительно конфиденциальности которой <a href="https://www.emerald.com/insight/content/doi/10.1108/OIR-02-2018-0056/full/pdf?title=protecting-privacy-on-the-web-a-study-of-https-and-google-analytics-implementation-in-academic-library-websites">имеются обоснованные сомнения</a> ) означает, что он может активно продвигать своё собственное видение Сети. +И эта сеть сильно отличается от "малой сети", создаваемой вебмастерами 90х и ранних 2000х. Сеть Google обладает <a href="https://web.archive.org/web/20190214003848/https://marketingplatform.google.com/about/analytics/">другим набором ценностей и терминологией</a>, что приходит с ними: персонализация, взгляды, вовлечение, конверсия, производительность, оптимизация. +</div> +</div> + <div class="bh-wide-row bh-vert-2"> + <div class="bh-col-4"> + <h2>Коммерческая (маркетинговая) Сеть</h2> + </div> + <div class="bh-col-8"> + + +В сети всегда было место коммерции и маркетингу. +<a href="https://www.webdesignmuseum.org/web-design-history/amazon-com-1995">Amazon</a> уже в 1995 году продавал книги онлайн, <a href="https://www.webdesignmuseum.org/web-design-history/ebay-1997">eBay</a> был запущен в 1997, а <a href="https://web.archive.org/web/19970605120422/http://www.dell.com/">Dell</a> к концу того же года продал оборудования больше, чем на миллион долларов. К 2000м, невзирая на <a href="https://ideas.ted.com/an-eye-opening-look-at-the-dot-com-bubble-of-2000-and-how-it-shapes-our-lives-today/">крах доткомов</a>, сетевая коммерция росла. Это развитие было естественным — сеть позволила продавцам контактировать с более удалёнными клиентами, без необходимости опираться на телефонные заказы, факс или почтовую систему. Коммерческая сеть сосуществовала и росла вместе с частной, любительской. Открытая природа сети означала, что любые сайты могут процветать. +Но сегодняшняя Сеть <em>по большей части</em> коммерческая. Малая сеть любителей не имеет ни ресурсов, ни желания конкурировать за видимость и аудиторию тем способом, которым это делает сеть коммерческая. +Компании и маркетологи осознали, что сеть предоставила новые возможности для продажи большего количества товара, и <em>таргетирования</em> пользователей на основе отслеживания их сетевой активности. Они принялись вкладывать деньги в цифровые рекламные стратегии, анализируя, как люди используют сеть, о чём говорят, что ищут и на что нажимают. Маркетинговые компании убедили брэнды, что те должны присутствовать в сети и производить контент, чтоб быть более релевантными, потому что их клиенты уже там. Они изобрели такие термины как "нативная реклама" и "спонсорский контент" (это контент, созданный так, чтоб выглядеть как обычная статья, но по сути являющийся оплаченной рекламой). Компании начали вбухивать деньги в цифровые стратегии, чтоб понимать и влиять на поведение интернет-пользователей по их желанию. +<br> +<img src="static/quantcast.jpg" alt="Такие конторы как Quantcast предлагают детальный анализ поведенческих и психографических данных на нас — пользователй, включающие наши действия на различных веб-сайтах, позволяя маркетологам отслеживать и влиять на нас"> +<br> +С такой стратегией относительно контента, аналитикой (инфраструктура слежки, о которой я говорил <a href="https://neustadt.fr/essays/against-a-user-hostile-web">в предыдущей статье</a> и поисковой оптимизацией, коммерческая сеть привнесла принципиально отличный набор приоритетов: <em>вовлечь</em> "аудиторию", <em>обратить</em> её и <em>удержать</em> как можно дольше. +Для них Сеть — всего лишь один из каналов торговли. +В сравнении с Малой сетью, коммерческая — расчётливая и хищническая. Она способна динамически генерировать сотни страниц вокруг любого распространённого поискового запроса. Она может отслеживать пользователя на множестве сайтов, анализируя его действия, и используя эту информацию для более точного таргетирования. И у неё очень серьёзные ресурсы. За прошлый год компании потратили <a href="https://www.emarketer.com/content/global-digital-ad-spending-2019">более 300 миллиардов евро</a> на онлайн-рекламу, большая часть из которых пошла тем самым привратникам — Google и Facebook — которые продают ис способность лучше <em>таргетировать</em> вас, базируясь на той информации, которую вы им дали. +<em>Всё это говорит о том, что пользователи сети пришли к тому, что взаимодействуют они большую часть времени в видимой хищнической коммерческой сети, в то время как множество мелких любительских сайтов остаются скрытыми информационным шумом.</em> +</div> +</div> + <div class="bh-wide-row bh-vert-2"> + <div class="bh-col-4"> + <h2>Продукто-ориентированный вебсайт</h2> + </div> + <div class="bh-col-8"> + +Дизайн современной коммерческой сети "стерилен": он прилизан, он следует конвенциям и оптимизирован для эффективности. Это — одна из причин, почему так много вебсайтов, которые вы посещаете сегодня, выглядят одинаково. Кодекс коммерческой сети стал настолько доминантным, что мы просто забыли, что малая сеть всё ещё существует, и имеет абсолютно иные приоритеты. +Современные принципы веб-дизайна крайне редко нацелены на обычного человека, ищущего, как создать свой вебсайт или ищущего что-то, в чём он заинтересован. Вместо этого они фокусируются на эффективных вебсайтах: <blockquote> -<p>Не используйте слишком много цветов. Пишите короткие цепляющие вводные. Не позволяйте контенту быть слишком длинным. Оптимизируйте для SEO. Выпускайте видео-контент, продолжительность концентрации внимания уменьшается. Используйте очевидный призыв к действию. Пропихивайте свою подписку. Держите важную информацию выше края. Не заставляйте пользователя думать. Следуйте конвенциям.</p> -</blockquote> -<p><img src="static/neil-patel-design.jpg" alt="Универсальные принципы дизайна, улучшающие конверсию"></p> -<p>Современные вебсайты разработаны так, чтоб направлять поведение пользователя к определённым целям: покупка, нажатие, распространение или подписка. Слова, цвета, сообщения — подчинены этим целям, как упаковка продуктов в супермаркете.</p> -<p>Статья 2008 года в Smashing Magazine под названием <a href="https://www.smashingmagazine.com/2008/01/10-principles-of-effective-web-design/">10 принципов хорошего дизайна вебсайта</a> на вершине поисковой выдачи, когда я искал "хороший веб-дизайн" в процессе написания этого эссе. Есть множество других, зачастую более новых, но все они в общей сложности говорят одно и то же. Автор конкретно этой статьи даже вполне ясно начинает её так: «... дизайн, построенный вокруг пользователя, зарекомендовал себя как стандартный подход в успешном и ориентированном на прибыль веб-дизайне».</p> -<p>Но сеть не всегда "ориентирована на прибыль", и ей уж точно не нужно быть "построенной вокруг пользователя" (и я это заявляю, как UX-консультант). В противном случае места для творчества и самовыражения оставалось бы ничтожно мало. Богатое разнообразие сети было бы низведено к онлайновому эквиваленту массивного, организованного, стерильного торгового центра, призванного стимулировать продажи. Нет, сеть не может быть и "построенной вокруг автора", вокруг хобби или <a href="https://blog.geocities.institute/archives/6551">собак</a>!</p> -<p>Стоит помнить, что сайт не обязательно должен быть продуктом — он может быть объектом искусства. <em>Сеть — ещё и творческое и культурное пространство, которое не должно ограничивать себя соглашениями, навязанными коммерческим дизайном продукта или маркетингом.</em></p> -<h2>Сеть как творческое пространство</h2> -<p>С доминированием коммерческой сети и упорядочиванием их кодекса и технологий, большинству людей легко подумать, будто сеть — это сложная машина. Большинство сайтов сегодня создаются сложными системами управления контентом, стратегиями SEO и SMM, множеством плагинов, детализированной аналитикой и отслеживанием аудитории, оптимизированными под разные контрольные точки и обслуживаемыми глобальными CDN.</p> -<p>Но сеть-то намного проще. Вам, на самом деле, нужно две вещи: вебсервер и HTML (ну и базовый CSS для разметки). И вам не нужно делать его "user-centered" — как ранние вебмастеры на Geocities выстругивали свой собственный уголок в сети, вы можете выразить себя в любой манере, которой захотите. В этом разница между продуктом и искусством.</p> -<p><em>Художник не станет добавлять больше красного цвета в рисунок или изменять композицию только потому, что маркетинговые исследования показывают, что людям это больше нравится. Это видение творца — кому-то понравится, кому-то нет. Но это творение, по своим правилам. Вопрос "эффективности" здесь просто бессмысленен. И то же самое касается Малой Сети.</em></p> -<p>Если коммерческая сеть — "промышленная", то можно сказать, что Малая Сеть — "кустарная". Одно не лучше другого. Они служат разным целям и могут сосуществовать в открытой сети. И тем не менее, было бы стыдно проводить время только в коммерческой Сети, не давая себе возможности изучить творчество, страстность и причудливость Малой Сети.</p> -<p>И чтобы продемонстрировать вам, насколько сильно она может отличаться от современных вебсайтов, я собрал для вас несколько примеров, которыми проиллюстрирую богатство Малой Сети.</p> -<h2>Моменты прошлого</h2> -<p>Сперва посмотрим на маленькие вебсайты из прошлого, и после двинемся к тем, что живут и здравствуют ныне.</p> -<p>За возможность откопать эти сайты и предоставить вам доступ к ним, я благодарю поразительную работу по архивированию Сети, выполненную:</p> +Не используйте слишком много цветов. Пишите короткие цепляющие вводные. Не позволяйте контенту быть слишком длинным. Оптимизируйте для SEO. Выпускайте видео-контент, продолжительность концентрации внимания уменьшается. Используйте очевидный призыв к действию. Пропихивайте свою подписку. Держите важную информацию выше края. Не заставляйте пользователя думать. Следуйте конвенциям. +</blockquote><br> +<img src="static/neil-patel-design.jpg" alt="Универсальные принципы дизайна, улучшающие конверсию"><br> +Современные вебсайты разработаны так, чтоб направлять поведение пользователя к определённым целям: покупка, нажатие, распространение или подписка. Слова, цвета, сообщения — подчинены этим целям, как упаковка продуктов в супермаркете. +Статья 2008 года в Smashing Magazine под названием <a href="https://www.smashingmagazine.com/2008/01/10-principles-of-effective-web-design/">10 принципов хорошего дизайна вебсайта</a> на вершине поисковой выдачи, когда я искал "хороший веб-дизайн" в процессе написания этого эссе. Есть множество других, зачастую более новых, но все они в общей сложности говорят одно и то же. Автор конкретно этой статьи даже вполне ясно начинает её так: «... дизайн, построенный вокруг пользователя, зарекомендовал себя как стандартный подход в успешном и ориентированном на прибыль веб-дизайне». +Но сеть не всегда "ориентирована на прибыль", и ей уж точно не нужно быть "построенной вокруг пользователя" (и я это заявляю, как UX-консультант). В противном случае места для творчества и самовыражения оставалось бы ничтожно мало. Богатое разнообразие сети было бы низведено к онлайновому эквиваленту массивного, организованного, стерильного торгового центра, призванного стимулировать продажи. Нет, сеть не может быть и "построенной вокруг автора", вокруг хобби или <a href="https://blog.geocities.institute/archives/6551">собак</a>! +Стоит помнить, что сайт не обязательно должен быть продуктом — он может быть объектом искусства. <em>Сеть — ещё и творческое и культурное пространство, которое не должно ограничивать себя соглашениями, навязанными коммерческим дизайном продукта или маркетингом.</em> +</div> +</div> + <div class="bh-wide-row bh-vert-2"> + <div class="bh-col-4"> + <h2>Сеть как творческое пространство</h2> + </div> + <div class="bh-col-8"> + +С доминированием коммерческой сети и упорядочиванием их кодекса и технологий, большинству людей легко подумать, будто сеть — это сложная машина. Большинство сайтов сегодня создаются сложными системами управления контентом, стратегиями SEO и SMM, множеством плагинов, детализированной аналитикой и отслеживанием аудитории, оптимизированными под разные контрольные точки и обслуживаемыми глобальными CDN. +Но сеть-то намного проще. Вам, на самом деле, нужно две вещи: вебсервер и HTML (ну и базовый CSS для разметки). И вам не нужно делать его "user-centered" — как ранние вебмастеры на Geocities выстругивали свой собственный уголок в сети, вы можете выразить себя в любой манере, которой захотите. В этом разница между продуктом и искусством. +<em>Художник не станет добавлять больше красного цвета в рисунок или изменять композицию только потому, что маркетинговые исследования показывают, что людям это больше нравится. Это видение творца — кому-то понравится, кому-то нет. Но это творение, по своим правилам. Вопрос "эффективности" здесь просто бессмысленен. И то же самое касается Малой Сети.</em> +Если коммерческая сеть — "промышленная", то можно сказать, что Малая Сеть — "кустарная". Одно не лучше другого. Они служат разным целям и могут сосуществовать в открытой сети. И тем не менее, было бы стыдно проводить время только в коммерческой Сети, не давая себе возможности изучить творчество, страстность и причудливость Малой Сети. +И чтобы продемонстрировать вам, насколько сильно она может отличаться от современных вебсайтов, я собрал для вас несколько примеров, которыми проиллюстрирую богатство Малой Сети. +</div> +</div> + <div class="bh-wide-row bh-vert-2"> + <div class="bh-col-4"> + <h2>Моменты прошлого</h2> + </div> + <div class="bh-col-8"> + +Сперва посмотрим на маленькие вебсайты из прошлого, и после двинемся к тем, что живут и здравствуют ныне. +За возможность откопать эти сайты и предоставить вам доступ к ним, я благодарю поразительную работу по архивированию Сети, выполненную: <ul> -<li><p><a href="https://archive.org/web/">Internet Archive</a> - благодаря 439 миллиардам веб-страниц, сохранённым с середины 90х, позволяет путешествовать во времени, и видеть, как сайты выглядели раньше</p> +<li><a href="https://archive.org/web/">Internet Archive</a> - благодаря 439 миллиардам веб-страниц, сохранённым с середины 90х, позволяет путешествовать во времени, и видеть, как сайты выглядели раньше </li> -<li><p><a href="https://restorativland.org/">Restorativland</a> — "восстановленная виртуальная галерея архивных сайтов Geocities, отсортированных по соседству"</p> +<li><a href="https://restorativland.org/">Restorativland</a> — "восстановленная виртуальная галерея архивных сайтов Geocities, отсортированных по соседству" </li> </ul> -<p>Перейдём к примерам.</p> -<h3>A Laurel & Hardy Fansite</h3> -<p>Фан-сайт, созданный в 1998, посвящённый комедийному дуету Стена Лорела и Оливера Харди. Вот что о сайте говорит его автор:</p> + +<h3>Перейдём к примерам.</h3> +<p> +<h4>A Laurel & Hardy Fansite</h4> +Фан-сайт, созданный в 1998, посвящённый комедийному дуету Стена Лорела и Оливера Харди. Вот что о сайте говорит его автор: <blockquote> -<p>На этом вебсайте вы найдёте: более сотни фотографий, небольшую коллекцию звуковых файлов, полный набор фильмов — от эры немого кино до звукового. Когда-нибудь задумывались, о чём они поют? Отправляйтесь на страницу текстов и читайте. Лорел и Харди были звёздами, но они никогда не добились бы этого без помощи других людей. Вы можете посмотреть, кто это был на странице Актёрский Состав.</p> +На этом вебсайте вы найдёте: более сотни фотографий, небольшую коллекцию звуковых файлов, полный набор фильмов — от эры немого кино до звукового. Когда-нибудь задумывались, о чём они поют? Отправляйтесь на страницу текстов и читайте. Лорел и Харди были звёздами, но они никогда не добились бы этого без помощи других людей. Вы можете посмотреть, кто это был на странице Актёрский Состав. </blockquote> -<p>Если вы перейдёте на страницу <a href="https://geocities.restorativland.org/Hollywood/Studio/5352/siteinfo.html">информации</a>, вы обнаружите, что в разделе "зачем" ответ просто "а почему нет!!". И действительно — почему бы нет!</p> -<p><img src="static/laurel-hardy-fansite.jpg" alt=""></p> -<p><a href="https://geocities.restorativland.org/Hollywood/Studio/5352/index.html">Visit A Laurel & Hardy Fansite on Restorativland</a></p> -<h3>Fractal explorer</h3> -<p>Сайт Фабио Цесари (на тот момент — 24-летний студент компьютерной специальности Университета Болоньи, Италия), полностью посвящённый фракталам. Включает очень ясные объяснения, галереи изображений и пошаговые инструкции:</p> +Если вы перейдёте на страницу <a href="https://geocities.restorativland.org/Hollywood/Studio/5352/siteinfo.html">информации</a>, вы обнаружите, что в разделе "зачем" ответ просто "а почему нет!!". И действительно — почему бы нет! +<br> +<img src="static/laurel-hardy-fansite.jpg" alt=""><br> +<a href="https://geocities.restorativland.org/Hollywood/Studio/5352/index.html">Visit A Laurel & Hardy Fansite on Restorativland</a> +</p> +<p> +<h4>Fractal explorer</h4> +Сайт Фабио Цесари (на тот момент — 24-летний студент компьютерной специальности Университета Болоньи, Италия), полностью посвящённый фракталам. Включает очень ясные объяснения, галереи изображений и пошаговые инструкции: <blockquote> -<p>Многие люди, должно быть, были очарованы бесконечной сложностью и красотой фракталов. Я написал это краткое руководство, чтоб объяснить простыми словами, как генерируются множества Мандельброта и Жюлиа. Этот документ предоставляет неформальное введение в эти темы, и рассматривается исключительно как точка отсчёта в изучении информации о фракталах и фрактальной геометрии.</p> +Многие люди, должно быть, были очарованы бесконечной сложностью и красотой фракталов. Я написал это краткое руководство, чтоб объяснить простыми словами, как генерируются множества Мандельброта и Жюлиа. Этот документ предоставляет неформальное введение в эти темы, и рассматривается исключительно как точка отсчёта в изучении информации о фракталах и фрактальной геометрии. </blockquote> -<p><img src="static/fractal-explorer.jpg" alt=""></p> -<p><a href="https://web.archive.org/web/20020223163039fw_/http://www.geocities.com/fabioc/">Visit Fractal Explorer on Internet Archive</a></p> -<h3>The National Coca-Cola Bottle Clearing House</h3> -<p>Этот сайт — почти наверняка исчерпывающий список всех юбилейных бутылок Coca-Cola начиная с 70х. Встречаются неожиданные пункты. Например, знали ли вы, что была специальная бутылка в 240мл для выставки Dominos Pizza International Expo 1991 года, как и вообще о существовании такой выставки? Или 300мл бутылка к Английской Королевской Свадьбе 1982 года?</p> -<p><img src="static/coca-cola-clearinghouse.jpg" alt=""></p> -<p><a href="https://geocities.restorativland.org/Heartland/2983/">Visit The National Coca-Cola Bottle Clearing House on Restorativland</a></p> -<h3>NetHistory</h3> -<p>До интернета существовал BITNET, "мировой лидер сетевых коммуникаций для исследовательских и учебных заведений, помог заложить основу для последующего внедрения интернета, особенно за пределами США". ( <a href="https://www.livinginternet.com/u/ui_bitnet.htm">LivingInternet.com</a> )</p> -<p>Этот вебсайт — "неофициальная история BITNET и интернета":</p> +<br> +<img src="static/fractal-explorer.jpg" alt=""> +<br> +<a href="https://web.archive.org/web/20020223163039fw_/http://www.geocities.com/fabioc/">Visit Fractal Explorer on Internet Archive</a> +</p> +<p> +<h4>The National Coca-Cola Bottle Clearing House</h4> +Этот сайт — почти наверняка исчерпывающий список всех юбилейных бутылок Coca-Cola начиная с 70х. Встречаются неожиданные пункты. Например, знали ли вы, что была специальная бутылка в 240мл для выставки Dominos Pizza International Expo 1991 года, как и вообще о существовании такой выставки? Или 300мл бутылка к Английской Королевской Свадьбе 1982 года? +<br><img src="static/coca-cola-clearinghouse.jpg" alt=""><br> +<a href="https://geocities.restorativland.org/Heartland/2983/">Visit The National Coca-Cola Bottle Clearing House on Restorativland</a> +</p> +<p> +<h4>NetHistory</h4> +До интернета существовал BITNET, "мировой лидер сетевых коммуникаций для исследовательских и учебных заведений, помог заложить основу для последующего внедрения интернета, особенно за пределами США". ( <a href="https://www.livinginternet.com/u/ui_bitnet.htm">LivingInternet.com</a> ) +Этот вебсайт — "неофициальная история BITNET и интернета": <blockquote> -<p>Если вам нужна сухая, формальная история Интернета, вы не по адресу. Назначение NetHistory в том, чтоб дат вам прочувствовать, каково было в дни становления BITNET и интернета. Надеемся, мы дадим вам некоторый обзор и приведём к пониманию опыта раннего Internet (хотя можно утверждать, что рассматриваемый опыт во многом схож с сиденем перед терминалом мэйнфрейма среди ночи под гудение Twinkie-and-Jolt). Ну, в худшем случае, развлечётесь</p> +Если вам нужна сухая, формальная история Интернета, вы не по адресу. Назначение NetHistory в том, чтоб дат вам прочувствовать, каково было в дни становления BITNET и интернета. Надеемся, мы дадим вам некоторый обзор и приведём к пониманию опыта раннего Internet (хотя можно утверждать, что рассматриваемый опыт во многом схож с сиденем перед терминалом мэйнфрейма среди ночи под гудение Twinkie-and-Jolt). Ну, в худшем случае, развлечётесь </blockquote> -<p>У NetHistory есть обширные архивы публикаций ранних сетей (VM/COM, NetMonth, FSFNet, DargonZine, Nutworks, The Gilding Byte например), и "точки зрения людей, которые были там, когда творилась история BITNET и Internet"</p> -<p><img src="static/nethistory.jpg" alt=""></p> -<p><a href="https://web.archive.org/web/20010516205238/http://nethistory.dumbentia.com/">Visit NetHistory on Internet Archive</a></p> -<h3>joan stark's ASCII Art Gallery</h3> -<p>Находите текстовое творчество скучным? Этому художнику есть, что вам сказать:</p> +У NetHistory есть обширные архивы публикаций ранних сетей (VM/COM, NetMonth, FSFNet, DargonZine, Nutworks, The Gilding Byte например), и "точки зрения людей, которые были там, когда творилась история BITNET и Internet" +<br><img src="static/nethistory.jpg" alt=""><br> +<a href="https://web.archive.org/web/20010516205238/http://nethistory.dumbentia.com/">Visit NetHistory on Internet Archive</a> +</p> +<p> +<h4>joan stark's ASCII Art Gallery</h4> +Находите текстовое творчество скучным? Этому художнику есть, что вам сказать: <blockquote> -<p>Вы передумаете после посещения этого вебсайта. Графика с низкой пропускной способностью — намного больше, чем смайлики и эмотиконы. ASCII Art развился за пределы простой техники компьютерной графики и стал популярной формой искусства. Вы будете поражены, что можно создать используюя только символы ASCII (American Standard Code of Information Interchange). Часть текстовой графики на этом сайте раскрашена с помощью html, часть — просто текст. И все эти произведения уникальны, созданы вручную, и определённо не то же самое, что старые скучные текстовки, которые вы, должно быть, ожидали увидеть!</p> +Вы передумаете после посещения этого вебсайта. Графика с низкой пропускной способностью — намного больше, чем смайлики и эмотиконы. ASCII Art развился за пределы простой техники компьютерной графики и стал популярной формой искусства. Вы будете поражены, что можно создать используюя только символы ASCII (American Standard Code of Information Interchange). Часть текстовой графики на этом сайте раскрашена с помощью html, часть — просто текст. И все эти произведения уникальны, созданы вручную, и определённо не то же самое, что старые скучные текстовки, которые вы, должно быть, ожидали увидеть! </blockquote> -<p><img src="static/joanstark-ascii.jpg" alt=""></p> -<p><a href="https://web.archive.org/web/20010420182629/http://www.geocities.com/spunk1111/indexjava.htm">Visit joan stark's ASCII Art Galleryon Internet Archive</a></p> -<h2>Настоящее время</h2> -<p>Сколь бы ни был я восхищён артефактами прошлого, ещё больший восторг я испытал, узнав, что Малая Сеть всё ещё существует, как и в моём детстве. Она просто стала менее заметна. Среди проектов, вносящих вклад в её жизнь, три показались мне особенно захватывающими:</p> +<br> +<img src="static/joanstark-ascii.jpg" alt=""><br> +<a href="https://web.archive.org/web/20010420182629/http://www.geocities.com/spunk1111/indexjava.htm">Visit joan stark's ASCII Art Galleryon Internet Archive</a> +</p> +</div> +</div> + <div class="bh-wide-row bh-vert-2"> + <div class="bh-col-4"> + <h2>Настоящее время</h2> + </div> + <div class="bh-col-8"> + + +Сколь бы ни был я восхищён артефактами прошлого, ещё больший восторг я испытал, узнав, что Малая Сеть всё ещё существует, как и в моём детстве. Она просто стала менее заметна. Среди проектов, вносящих вклад в её жизнь, три показались мне особенно захватывающими: <ul> -<li><p><a href="https://wiby.me/">Wilby.me</a> — поисковый движок по олдскульным, интересныи и информативным веб-страницам. Есть полезная кнопка "Surprise me!", выдающая случайный результат.</p> +<li><a href="https://wiby.me/">Wilby.me</a> — поисковый движок по олдскульным, интересныи и информативным веб-страницам. Есть полезная кнопка "Surprise me!", выдающая случайный результат. </li> -<li><p><a href="https://neocities.org/">Neocities.org</a> — современный вебхостинг, позволяющий каждому создать простенький вебсайт бесплатно, и влиться в сообщество, где можно взаимодействовать с другими вебмастерами.</p> +<li><a href="https://neocities.org/">Neocities.org</a> — современный вебхостинг, позволяющий каждому создать простенький вебсайт бесплатно, и влиться в сообщество, где можно взаимодействовать с другими вебмастерами. </li> -<li><p><a href="https://curlie.org/">Curlie</a> — "Крупнейший сетевой каталог, редактируемый вручную. Создаётся и поддерживается энтузиазмом сообщества редакторов-добровольцев".</p> +<li><a href="https://curlie.org/">Curlie</a> — "Крупнейший сетевой каталог, редактируемый вручную. Создаётся и поддерживается энтузиазмом сообщества редакторов-добровольцев". </li> </ul> -<h3>Ottaviana's Kitchen</h3> -<p>Вебсайт из 1996 года, всё ещё живёт и здравствует, предоставляя итальянские рецепты, передающиеся из поколения в поколение:</p> +<p> +<h4>Ottaviana's Kitchen</h4> +Вебсайт из 1996 года, всё ещё живёт и здравствует, предоставляя итальянские рецепты, передающиеся из поколения в поколение: <blockquote> -<p>Мои дед и бабка имигрировали из Италии. Они прибыли на остров Эллис в поисках американской мечты. Здесь, в Ньюарке, штат Нью Джерси, родилась моя мама. Эти рецепты передала маме её мама, а она передала мне. У меня нет детей, так что лучший способ передать эти рецепты - опубликовать на моей странице, чтоб все могли насладиться ими, и, возможно, создать на их основе свою традицию. Ну, приятного аппетита!</p> +Мои дед и бабка имигрировали из Италии. Они прибыли на остров Эллис в поисках американской мечты. Здесь, в Ньюарке, штат Нью Джерси, родилась моя мама. Эти рецепты передала маме её мама, а она передала мне. У меня нет детей, так что лучший способ передать эти рецепты - опубликовать на моей странице, чтоб все могли насладиться ими, и, возможно, создать на их основе свою традицию. Ну, приятного аппетита! </blockquote> -<p><img src="static/ottavianas-kitchen.jpg" alt=""></p> -<p><a href="http://ottavianaskitchen.com/intro.htm">Visit Ottaviana's Kitchen</a></p> -<h3>Europäische Schmetterlinge</h3> -<p>Немецкий сайт о бабочках Германии, создан в 1998 и поддерживался до 2005 Марио Байером. Но это не просто очередной сайт про бабочек. Это — практически исчерпывающая коллекция сведений обо всех бабочках Европы, организованная по роду/виду, каждая снабжена описанием, индикацией времени полёта, подходящими растениями, и фото (по большей части сделанными автором лично).</p> -<p><img src="static/europaeische-schmetterlinge.jpg" alt=""></p> -<p><a href="http://www.butterflies.de/">Visit Europäische Schmetterlinge</a></p> +<br><img src="static/ottavianas-kitchen.jpg" alt=""><br> +<a href="http://ottavianaskitchen.com/intro.htm">Visit Ottaviana's Kitchen</a> +</p> +<p> +<h4>Europäische Schmetterlinge</h4> +Немецкий сайт о бабочках Германии, создан в 1998 и поддерживался до 2005 Марио Байером. Но это не просто очередной сайт про бабочек. Это — практически исчерпывающая коллекция сведений обо всех бабочках Европы, организованная по роду/виду, каждая снабжена описанием, индикацией времени полёта, подходящими растениями, и фото (по большей части сделанными автором лично). +<br><img src="static/europaeische-schmetterlinge.jpg" alt=""><br> +<a href="http://www.butterflies.de/">Visit Europäische Schmetterlinge</a> <h3>Marseillaise.org</h3> -<p>Всё, что вы хотели знать о Марсельезе — на сайте Йена Паттерсона, существующем "в той или иной форме с 1996 года".</p> +Всё, что вы хотели знать о Марсельезе — на сайте Йена Паттерсона, существующем "в той или иной форме с 1996 года". <blockquote> -<p>Добро пожаловать. Не сомневаюсь, что вы пришли, чтоб разобраться, что за суета была 14-го июля. Думаю, здесь вы найдёте всё, что хотели знать. Марсельеза - национальный гимн Франции, многими считающийся наиболее волнующим из всех гимнов. Здесь вы обнаружите текст, ноты, аудиофайлы и перевод на английский.</p> +Добро пожаловать. Не сомневаюсь, что вы пришли, чтоб разобраться, что за суета была 14-го июля. Думаю, здесь вы найдёте всё, что хотели знать. Марсельеза - национальный гимн Франции, многими считающийся наиболее волнующим из всех гимнов. Здесь вы обнаружите текст, ноты, аудиофайлы и перевод на английский. </blockquote> -<p><img src="static/marseillaise-org.jpg" alt=""></p> -<p><a href="http://www.marseillaise.org/english/">Visit Marseillaise.org</a></p> -<h3>The Webtender</h3> -<p>Хотите смешать собственный коктейль? Webtender, существующий с 1995 года, предоставляет более 6000 рецептов, руокводство с информацией о барной посуде, инструментах, измерениях и ингредиентах, форум, вики и даже позволяет подобрать рецепт под текущее содержимое вашего бара!</p> -<p><img src="static/webtender.jpg" alt=""></p> -<p><a href="https://www.webtender.com/info/">Webtender</a></p> -<h3>Distant Skies - A Crystalis Fansite</h3> -<p>Фанатский сайт по action-RPG игре под названием Crystalis:</p> +<br><img src="static/marseillaise-org.jpg" alt=""><br> +<a href="http://www.marseillaise.org/english/">Visit Marseillaise.org</a> +</p> +<p> +<h4>The Webtender</h4> +Хотите смешать собственный коктейль? Webtender, существующий с 1995 года, предоставляет более 6000 рецептов, руокводство с информацией о барной посуде, инструментах, измерениях и ингредиентах, форум, вики и даже позволяет подобрать рецепт под текущее содержимое вашего бара! +<br><img src="static/webtender.jpg" alt=""><br> +<a href="https://www.webtender.com/info/">Webtender</a> +</p> +<p> +<h4>Distant Skies - A Crystalis Fansite</h4> +Фанатский сайт по action-RPG игре под названием Crystalis: <blockquote> -<p>'Cristalis' — это action-RPG игра для Nintendo Entertainment System. Выпущена в Японии в апреле 1990, и в США в июле того же года. Была высоко оценена критиками своего времени за графику и геймплей и породило армию вдохновенных поклонников. В Японии игра называлась ゴッド・スレイヤー はるか天空のソナタ или Убийца БогаЖ Соната о далёком небе.</p> +'Cristalis' — это action-RPG игра для Nintendo Entertainment System. Выпущена в Японии в апреле 1990, и в США в июле того же года. Была высоко оценена критиками своего времени за графику и геймплей и породило армию вдохновенных поклонников. В Японии игра называлась ゴッド・スレイヤー はるか天空のソナタ или Убийца БогаЖ Соната о далёком небе. </blockquote> -<p>Сайт построем в визуальном стиле самой игры и предоставляет детальную информацию о сюжете, персонажах, игровом мире, заклинаниях и предметах в игре. И даже мне, абсолютно незнакомому с этой игрой, было интересно полистать.</p> -<p><img src="static/distant-skies.jpg" alt=""></p> -<p><a href="https://distantskies.neocities.org/">Visit Distant Skies - A Crystalis Fansite</a></p> -<h3>Ваш собственный уголок в Сети</h3> -<p>Итак, Малая Сеть всё ещё существует, и всё ещё предоставляет нам все виды сайтов для обозрения и исследования.</p> -<p>И как бы ни было весело изучать всё это, лучше всего — влиться и принять участие, создав свой собственный вебсайт. Не на огороженных платформах или в соцсетях, управляемых рекламными корпорациями, а просто в своём собственном маленьком уголке сети. Это лучший способ увидеть, как на самом-то деле проста Сеть.</p> -<p>Вы можете просто выложить свои рисунки, поделиться мыслями и идеями, или обзорами на любимый сорт виски. Создайте вебсайт, чтоб делиться своими заметками или рецептами. Или списком любимых адресов в вашем городе — для путешественников.</p> -<p>Всё, что вам нужно — выучить базовую разметку (HTML) и стили (CSS), создать сайт на бесплатном хостинге вроде <a href="https://neocities.org/">Neocities.org</a> и вступить в игру. Как вы могли догадаться, Neocities — это бесплатный хостинг вроде Geocities (ну разве что рекламы нет), чья миссия заявлена как "сделать Сеть снова прикольной, вернуть вам контроль над самовыражением в Сети". Обнаружение и присоединение к Neocities было одной причин моего восторга от Малой Сети. Вы можете потратить часы <a href="https://neocities.org/browse?sort_by=last_updated">в навигации</a> по огромному количеству сайтов, размещённых там, или же просто завести учётную запись и вступить в игру.</p> -<p><img src="static/neocities-home.jpg" alt=""></p> -<p>Если вы не умеете делать сайты, у HTMLDog есть прекрасные руководства по базовому изучению <a href="https://htmldog.com/guides/html/beginner/">HTML</a> и <a href="https://htmldog.com/guides/css/beginner/">CSS</a>. Если вы предпочитаете видео — у Khan Academy есть прекрасный курс для начинающих <a href="https://www.khanacademy.org/computing/computer-programming/html-css">Making Webpages</a>.</p> -<p>Если у вас совсем нет опыта, может потребоваться некоторое время, чтоб въехать во все эти размеры текста, цвета, добавление изображений и ссылок между страницами, но мне кажется, это тоже часть веселья.</p> -<p>Вы, разумеется, всегда можете использовать готовый шаблон сайта или тему, и использовать их как есть, но это отдельное упражнение. Это как разница между покупкой картины и обучением рисованию или скульптуре. Конечный результат может быть одинаков, но практика различна.</p> -<p>Ещё одна вещь касательно Сети — вы всегда можете посмотреть исходные коды любого публичного вебсайта в поисках вдохновения и с целью изучения. Выбирайте простые, базовые — современная сеть полна разбухших жирных сайтов, делающих HTML нечитаемым. Но, например, этот сайт использует базовую разметку HTML и CSS и предлагает вам поиграть с его исходниками. Всё — в <a href="https://neustadt.fr/license.tt">общественном достоянии</a>m так что можете копировать и изменять (и можно даже без обратных ссылок, всё свободно).</p> +Сайт построем в визуальном стиле самой игры и предоставляет детальную информацию о сюжете, персонажах, игровом мире, заклинаниях и предметах в игре. И даже мне, абсолютно незнакомому с этой игрой, было интересно полистать. +<br><img src="static/distant-skies.jpg" alt=""><br> +<a href="https://distantskies.neocities.org/">Visit Distant Skies - A Crystalis Fansite</a> +</p> +</div> +</div> + <div class="bh-wide-row bh-vert-2"> + <div class="bh-col-4"> + <h3>Ваш собственный уголок в Сети</h3> + </div> + <div class="bh-col-8"> + +Итак, Малая Сеть всё ещё существует, и всё ещё предоставляет нам все виды сайтов для обозрения и исследования. +И как бы ни было весело изучать всё это, лучше всего — влиться и принять участие, создав свой собственный вебсайт. Не на огороженных платформах или в соцсетях, управляемых рекламными корпорациями, а просто в своём собственном маленьком уголке сети. Это лучший способ увидеть, как на самом-то деле проста Сеть. +Вы можете просто выложить свои рисунки, поделиться мыслями и идеями, или обзорами на любимый сорт виски. Создайте вебсайт, чтоб делиться своими заметками или рецептами. Или списком любимых адресов в вашем городе — для путешественников. +Всё, что вам нужно — выучить базовую разметку (HTML) и стили (CSS), создать сайт на бесплатном хостинге вроде <a href="https://neocities.org/">Neocities.org</a> и вступить в игру. Как вы могли догадаться, Neocities — это бесплатный хостинг вроде Geocities (ну разве что рекламы нет), чья миссия заявлена как "сделать Сеть снова прикольной, вернуть вам контроль над самовыражением в Сети". Обнаружение и присоединение к Neocities было одной причин моего восторга от Малой Сети. Вы можете потратить часы <a href="https://neocities.org/browse?sort_by=last_updated">в навигации</a> по огромному количеству сайтов, размещённых там, или же просто завести учётную запись и вступить в игру. +<br> +<img src="static/neocities-home.jpg" alt=""><br> +Если вы не умеете делать сайты, у HTMLDog есть прекрасные руководства по базовому изучению <a href="https://htmldog.com/guides/html/beginner/">HTML</a> и <a href="https://htmldog.com/guides/css/beginner/">CSS</a>. Если вы предпочитаете видео — у Khan Academy есть прекрасный курс для начинающих <a href="https://www.khanacademy.org/computing/computer-programming/html-css">Making Webpages</a>. +Если у вас совсем нет опыта, может потребоваться некоторое время, чтоб въехать во все эти размеры текста, цвета, добавление изображений и ссылок между страницами, но мне кажется, это тоже часть веселья. +Вы, разумеется, всегда можете использовать готовый шаблон сайта или тему, и использовать их как есть, но это отдельное упражнение. Это как разница между покупкой картины и обучением рисованию или скульптуре. Конечный результат может быть одинаков, но практика различна. +Ещё одна вещь касательно Сети — вы всегда можете посмотреть исходные коды любого публичного вебсайта в поисках вдохновения и с целью изучения. Выбирайте простые, базовые — современная сеть полна разбухших жирных сайтов, делающих HTML нечитаемым. Но, например, этот сайт использует базовую разметку HTML и CSS и предлагает вам поиграть с его исходниками. Всё — в <a href="https://neustadt.fr/license.tt">общественном достоянии</a>m так что можете копировать и изменять (и можно даже без обратных ссылок, всё свободно). </div> - </article> - </main> - <hr> - <footer> - В согласии с духом <a href="https://tt.sn4il.site/landing.html">Трививальных Технологий</a> |  Хостинг: <a href="https://vdsina.ru/?partner=7kp5qpehru">VDSина</a> (скидка 10% по партнёрской ссылке) - </footer> + </div> + </div> + </div> + <div class="bh-col-10"> + <center> + В согласии с духом <a href="https://tt.sn4il.site/landing.html">Трививальных Технологий</a> |  Хостинг: <a href="https://vdsina.ru/?partner=7kp5qpehru">VDSина</a> (скидка 10% по партнёрской ссылке) + </center> + <hr> + </div> </body> </html> @@ -1,433 +1,364 @@ -@import url('https://fonts.cdnfonts.com/css/sf-mono?styles=36552,36546'); +@charset "UTF-8"; +html, body, div, h1, h2, h3, h4, h5, span, ul, ol, li { + padding: 0; + margin: 0; } -*, -*:before, -*:after { - box-sizing: border-box; -} +ul, ol, li { + list-style: none; } body { - max-width: 48em; - margin: 0 auto; - line-height: 1.5; - padding: 0.5rem 1rem; - word-wrap: break-word; - height: 100%; - background-color: #e2e0de; - color: #363533; - font-weight: 400; - font-size: 15px; - font-family: 'SF Mono', sans-serif; - line-height: 1.725; - text-rendering: geometricPrecision; - display: flex; - flex-direction: column; - overflow-wrap: break-word; -} - -video { - aspect-ratio: 16 / 9; -} - -sup { - padding: 0 2px; - border-radius: 5px; - line-height: 99%; - left: 4px; - position: relative; - bottom: 4px; -} + font-family: Helvetica, Arial; + color: #333333; + font-size: 1em; } -a { - text-decoration: none; - color: #6495ED; -} +.bh-content { + padding-top: 2em; } -pre { - overflow-x: auto; - border-radius: 4px; - background: #dedcd9; - color: #333; - padding: 10px 15px; - font-size: 90%; -} +.bh-row { + width: 80%; + margin: 0 auto; + position: relative; } -code { - border-radius: 3px; - background: #dedcd9; - color: #333; - padding: 0 4px; - font-size: 90%; - border: 1px dotted #666; -} - -blockquote { - border-left: 2px solid #6495ED; - margin-left: 1rem; - padding-left: 1rem; - background: #dedcd9; - border-radius: 4px; -} - -input[type="file"] { - margin-bottom: 1rem; - width: 100%; -} - -select, -input[type=file]::file-selector-button { - background: rgb(201, 201, 203, 0.4); - border: none; - border-radius: 4px; - padding: 0.3rem; -} - -select:hover, -input[type=file]::file-selector-button:hover { - background: rgb(201, 201, 203); -} - -input[type="text"] { - height: auto; - font-size: inherit; +.bh-wide-row { width: 100%; - color: inherit; - border-radius: 4px; - border: inherit; -} - -input[class^="snac-btn-"] { - background: rgb(201, 201, 203, 0.4); - border: none; - border-radius: 4px; - padding: 0.3rem; - font-size: 85%; -} - -input[class^="snac-btn-"]:hover { - background: rgb(201, 201, 203); -} - -input[name="telegram_bot"] { - margin-bottom: 0.5rem; -} - -.snac-note input[value="Post"], -.snac-top-controls input[value="Post"], -.snac-top-controls input[value="Follow"], -.snac-top-controls input[value="Boost"], -.snac-top-controls input[value="Update user info"] { - background: rgb(100, 149, 237, 0.2); - color: #6495ED; - border: none; - border-radius: 4px; - padding: 0.5rem 1rem; - font-weight: 700; -} - -.snac-note input[value="Post"]:hover, -.snac-top-controls input[value="Post"]:hover, -.snac-top-controls input[value="Follow"]:hover, -.snac-top-controls input[value="Boost"]:hover, -.snac-top-controls input[value="Update user info"]:hover { - background: rgb(100, 149, 237, 0.3); -} - -.snac-top-controls input[value="Follow"], -.snac-top-controls input[value="Boost"] { - margin-top: 0.5rem; -} - - -.snac-top-controls > div > details > summary::marker { - content: "✏️ "; -} - -.snac-top-controls #new_post_form details:first-of-type summary::marker { - content: "📎 "; -} - -.snac-top-controls #new_post_form details:last-of-type summary::marker { - content: "📊 "; -} - -.snac-top-controls > details:first-of-type summary::marker { - content: "🗃️ "; -} - -.snac-top-controls > details:last-of-type summary::marker { - content: "⚙️ "; -} - - -form[id$=_reply_form] details:first-of-type summary::marker { - content: "📎 "; -} - -.snac-controls details:first-of-type summary::marker { - content: "🗨️ "; -} - -h2::before { - position: absolute; - left: -1.2rem; - color: #6495ED; - content: "#"; - font-size: 1.5rem; -} + position: relative; } + +.bh-row, .bh-wide-row { + float: none; + clear: both; + padding-bottom: 2em; + border-bottom: 1px solid #ccc; } + .bh-row:before, .bh-row:after, .bh-wide-row:before, .bh-wide-row:after { + content: ""; + display: table; } + .bh-row:after, .bh-wide-row:after { + clear: both; } + +.bh-no-border { + border: none; } + +.bh-col-1 { + width: 8.33333%; + float: left; + position: relative; } -h2 { - position: relative; - display: block; - margin-left: 1rem; -} - -textarea, -input { - outline: none; - padding: 0.3rem; - background: #dedcd9; - border: none; - border-radius: 4px; -} - -textarea[name="bio"], -textarea[name="metadata"] { - width: 100%; -} +.bh-col-2 { + width: 16.66667%; + float: left; + position: relative; } -textarea:focus, -input:focus { - background: #eae9e7; -} +.bh-col-3 { + width: 25%; + float: left; + position: relative; } -summary { - border-radius: 4px; - padding: 0.1rem 0.2rem; - width: fit-content; -} +.bh-col-4 { + width: 33.33333%; + float: left; + position: relative; } -summary:hover { - cursor: pointer; - background: rgb(201, 201, 203, 0.4); -} - -.snac-embedded-video, -img { - max-width: 100%; - border-radius: 4px; -} - -.snac-origin { - font-size: 85%; - color: limegreen; - margin-top: 0.3rem; -} - -.snac-origin>a { - color: #363533; -} - -.snac-score { - float: right; - font-size: 85%; - margin-left: 0.5rem; -} - -.snac-top-user-banner > img { - width: 100%; -} - -.snac-metadata { - margin-bottom: 1rem; -} - -.snac-top-user-name { - font-size: 150%; - margin-bottom: -1.1rem; - margin-top: 0.5rem; -} - -.snac-top-user-id { - font-size: 110%; - margin-bottom: 1rem; -} - -.snac-top-user-bio { - margin-bottom: 1em; -} - -.snac-top-user-bio br { - display: none; -} - -.snac-top-nav { - color: #e2e0de; - display: flex; - align-items: center; - justify-content: end; -} - -.snac-top-nav > a { - text-transform: capitalize; - border-left: 1px solid; - padding-left: 0.6rem; - line-height: 1em; -} +.bh-col-5 { + width: 41.66667%; + float: left; + position: relative; } -.snac-top-nav > a:first-of-type { - padding-left: 0; - border-left: 0; -} +.bh-col-6 { + width: 50%; + float: left; + position: relative; } + +.bh-col-7 { + width: 58.33333%; + float: left; + position: relative; } -.snac-top-nav>a:hover { - text-decoration: underline; -} +.bh-col-8 { + width: 66.66667%; + float: left; + position: relative; } -.snac-top-nav>.snac-avatar { - margin-right: auto; -} +.bh-col-9 { + width: 75%; + float: left; + position: relative; } -.snac-avatar { +.bh-col-10 { + width: 83.33333%; float: left; - height: 2.5rem; - aspect-ratio: 1 / 1; - margin-right: 0.5rem; - border-radius: 8px; -} - -.snac-author { - font-size: 95%; - text-decoration: none; - font-weight: 700; - color: #363533; -} + position: relative; } -.snac-author-tag { - font-size: 90%; - color: #363533; +.bh-col-11 { + width: 91.66667%; + float: left; + position: relative; } + +.bh-col-12 { + width: 100%; + float: left; + position: relative; } + +.bh-vert-1 { + padding-top: 1em; } + +.bh-vert-2 { + padding-top: 2em; } + +.bh-vert-3 { + padding-top: 3em; } + +h1, h2, h3 { + font-weight: bold; + text-transform: uppercase; } + +h1 { + font-size: 3em; + line-height: 1em; + padding-bottom: 0.2em; + display: table; + letter-spacing: -0.02em; } + +h2 { + font-size: 2.3em; + line-height: 1em; + letter-spacing: -0.02em; } + +h3 { + font-size: 1.6em; + line-height: 1.2em; + letter-spacing: -0.02em; } + +p { + font-size: 1.2em; + line-height: 1.7em; + letter-spacing: -0.01em; } + p:last-of-type:after { + display: block; + width: 5em; + height: 5px; + background: #333; + content: " "; + margin: 1em 0 0; } + +a { + color: #333; text-decoration: none; -} - -.snac-pubdate { - color: #a0a0a0; - font-size: 90%; - float: right; -} - -.snac-top-controls { - padding-bottom: 1.5em; -} - -.e-content summary { - margin-bottom: 1rem; - color: palevioletred; -} - -.snac-post { - border-top: 1px solid #c1c1c1; - margin-bottom: 1rem; -} - -.snac-post-header { - line-height: 1.3; -} - -.snac-children { - padding-left: 1.5em; - border-left: 1px solid #c1c1c1; -} - -.snac-textarea { - font-family: inherit; + border-bottom: 1px solid #999; + padding-bottom: 0.2em; } + a:hover { + border-bottom-color: dodgerblue; } + +small { + font-size: 0.8em; + color: #999; } + +aside { + font-size: 0.8em; + color: #999; + font-style: italic; + position: absolute; + width: 25%; } + aside.bh-aside-left { + left: -29%; } + aside.bh-aside-right { + right: -29%; } + +ol, ul { + width: 100%; + clear: both; + float: none; + padding-bottom: 1em; } + ol li, ul li { + font-size: 1.2em; + line-height: 1.7em; } + ol li.bh-title, ul li.bh-title { + font-weight: bold; + border-bottom: 1px solid #ccc; + text-transform: uppercase; + display: table; + margin-bottom: 0.4em; + padding-bottom: 0.4em; + color: #666; } + +ol { + counter-reset: customlistcounter; } + ol li.bh-item:before { + content: counter(customlistcounter); + counter-increment: customlistcounter; + display: block; + position: absolute; + color: #999; + margin-left: -1.5em; } + +ul li.bh-item:before { + content: "–"; + display: block; + position: absolute; + color: #999; + margin-left: -1.5em; } +ul.bh-timeline header { + text-transform: uppercase; + font-size: 0.8em; + font-weight: bold; + color: #666; } +ul.bh-timeline li.bh-timeline-item { + padding-top: 1em; + padding-left: 2em; + border-left: 1px solid #ccc; } + ul.bh-timeline li.bh-timeline-item:before { + content: ""; + display: block; + width: 0.5em; + height: 0.5em; + background: #ccc; + border-radius: 2em; + position: absolute; + margin: 0.6em 0 0 -2.3em; + z-index: 1000; } + ul.bh-timeline li.bh-timeline-item small { + display: block; + line-height: 1.4em; } + ul.bh-timeline li.bh-timeline-item:last-of-type { + position: relative; } + ul.bh-timeline li.bh-timeline-item:last-of-type:after { + height: calc(100% - 1.6em); + width: 20px; + position: absolute; + background: #fff; + display: block; + content: ""; + margin-left: -2.3em; + bottom: 0; + z-index: 999; } +ul.bh-timeline:before { + height: 1.9em; + width: 20px; + position: absolute; + background: #fff; + display: block; + content: ""; + margin-left: -1px; } + +.bh-gray { + color: #999; } + .bh-gray a { + color: #999; } + +.bh-light-gray { + color: #ccc; } + .bh-light-gray a { + color: #ccc; } + +button { + background: #fff; + border: 1px solid #999; + font-size: 1em; + padding: 1em 2em; + border-radius: 3em; + text-transform: uppercase; + font-weight: bold; + color: #999; + cursor: pointer; + outline: none; } + button:hover { + color: dodgerblue; + border-color: dodgerblue; } + button:active { + background: #eee; } + button.bh-cancel { + border-color: #D1200D; + color: #D1200D; } + button.bh-cancel:hover { + border-color: #A10F04; + color: #A10F04; } + button.bh-cancel:active { + background: #eee; } + button.bh-disabled { + border-color: #ccc; + color: #ccc; + cursor: default; } + button.bh-disabled:hover { + border-color: #ccc; + color: #ccc; } + button.bh-disabled:active { + background: #fff; } + +table.bh-table { + width: 100%; + margin: 1em 0; + border-spacing: 0; + border-collapse: separate; } + table.bh-table thead tr th { + font-size: 0.8em; + text-transform: uppercase; + text-align: left; + border-bottom: 2px solid #ccc; + padding-bottom: 1em; } + table.bh-table tbody tr td { + font-size: 1.2em; + padding: 0.7em 0; + border-bottom: 1px solid #ccc; } + table.bh-table tbody tr:last-of-type td { + border-bottom: none; } + +div.bh-input { + margin-bottom: 1.5em; } + div.bh-input small { + padding-top: 0.3em; + display: block; + font-size: 0.75em; } + div.bh-input label { + font-size: 0.7em; + color: #999; + text-transform: uppercase; + font-weight: bold; + margin-bottom: 0.7em; + display: block; } + div.bh-input input[type=text], div.bh-input input[type=password], div.bh-input textarea { + width: 100%; + display: block; + font-family: Helvetica, Arial; + font-size: 1.2em; + color: #333; + background: none; + border: none; + border-bottom: 1px solid #ddd; + padding-bottom: 0.5em; + outline: none; } + div.bh-input input[type=text]:focus, div.bh-input input[type=password]:focus, div.bh-input textarea:focus { + border-color: #999; } + div.bh-input.bh-invalid label { + color: #D1200D; } + div.bh-input.bh-invalid input[type=text], div.bh-input.bh-invalid input[type=password] { + border-bottom-color: #D1200D; } +div.bh-search { width: 100%; - color: inherit; - border-radius: 4px; - border: inherit; -} - -.snac-history { - display: none; -} - -.snac-btn-mute { - float: right; - margin-left: 0.5em; -} - -.snac-btn-unmute { - float: right; - margin-left: 0.5em; -} - -.snac-btn-follow { - float: right; - margin-left: 0.5em; -} - -.snac-btn-unfollow { - float: right; - margin-left: 0.5em; -} - -.snac-btn-hide { - float: right; - margin-left: 0.5em; -} - -.snac-btn-delete { - float: right; - margin-left: 0.5em -} - -.snac-btn-limit { - float: right; - margin-left: 0.5em; -} - -.snac-btn-unlimit { - float: right; - margin-left: 0.5em; -} - -.snac-footer { - margin-top: 2em; - font-size: 75%; - color: #666; -} - -.snac-poll-result { - margin-left: auto; - margin-right: auto; -} - -@media (max-width: 500px) { - body { - font-size: 14px; - } - - sup { - left: 2px; - } - - .snac-children { - padding-left: 1em; - } - - input[class^="snac-btn-"] { - font-size: 80%; - } - - .snac-pubdate { - font-size: 80%; - } - - h2::before { - top: -0.2rem; - } - - .snac-top-nav > a { - padding-left: 0.2rem; - margin: -0.2rem; - } -} + position: relative; } + div.bh-search input { + display: block; + float: left; + background: #fff; + border: 1px solid #ccc; } + div.bh-search input[type=text] { + padding: 1em 2em; + border-top-left-radius: 3em; + border-bottom-left-radius: 3em; + font-size: 1em; + outline: none; + margin-right: 0; + border-right: none; + width: calc(100% - 6em); } + div.bh-search input[type=submit] { + font-size: 0.8em; + padding: 1.3em 2em 1.4em 1em; + border-top-right-radius: 3em; + border-bottom-right-radius: 3em; + text-transform: uppercase; + font-weight: bold; + color: #999; + cursor: pointer; + outline: none; + margin-left: 0; + right: 0; + position: absolute; } + +/*# sourceMappingURL=bauhaus.css.map */ diff --git a/style.css.bak b/style.css.bak deleted file mode 100755 index de97607..0000000 --- a/style.css.bak +++ /dev/null @@ -1,339 +0,0 @@ - -/*Begin copy-pasted segment from meowcity.club (with minor ajustments)*/ -/*Links styling*/ -a[href]:before { - content: "["; -} -a[href]:after { - content: "]"; -} -a[href], -a>span /*Only required because some instances do some strange stuff with links*/{ - color: cyan; - text-decoration: none; -} - - -/*Header styling*/ -h1, -.p-name, -.snac-top-user-name { - font-size: 1em!important; - color: red; -} -h1:before, -.p-name:before, -.snac-top-user-name { - content: "# "; -} - -h2, -.snac-top-user-id { - font-size: 1em!important; - color: deepskyblue; -} -h2:before, -.snac-top-user-id::before { - content: "## "; -} - -h3 { - font-size: 1em; - color: magenta; -} -h3>a /*h3 colouring overrides the link*/{ - color: magenta; -} -h3:not(.terminal-input)::before { - content: "### "; -} - -h4:before { - content: "#### " -} -h4 { - font-size: 1em; - color: pink; -} - - -/*Markup styling*/ -strong, -strong>span/*Once again due to weird instance styling*/ { - color: coral; -} -strong:before { - content: "<"; -} -strong:after { - content: ">"; -} -ul { - list-style-type: none; -} -li>h3:before /*List prefix overrides h3 prefix*/{ - content: "- " !important; -} -li:not(:has(h3)):before { - content: "- "; -} - - -/*Default SNAC css*/ -body { - width: 85%; - margin: auto; - line-height: 1.5; - padding: 0.8em; - word-wrap: break-word; -} - -pre { - overflow-x: scroll; /*Don't crop on overflow; this doesn't happen very often*/ -} - -.snac-embedded-video, -img { - max-width: 100% -} - -.snac-origin { - font-size: 85% -} -.snac-score { - float: right; - font-size: 85% -} - -.snac-top-user { - text-align: center; - padding-bottom: 2em -} - -.snac-top-user-name { - font-size: 200% -} - -.snac-top-user-id { - font-size: 150% -} - -.snac-avatar { - float: left; - height: 2.5em; - padding: 0.25em -} - -.snac-author { - font-size: 90%; - text-decoration: none -} - -.snac-author-tag { - font-size: 80% -} - -.snac-pubdate { - color: #a0a0a0; - font-size: 90% -} - -.snac-top-controls { - padding-bottom: 1.5em -} - -.snac-post { - border-top: 1px solid #a0a0a0; -} - -.snac-children { - padding-left: 2em; - border-left: 1px solid #a0a0a0; -} - -.snac-textarea { - font-family: inherit; - width: 100% -} - -.snac-history { - border: 1px solid #606060; - border-radius: 3px; - margin: 2.5em 0; - padding: 0 2em -} - -.snac-btn-mute { - float: right; - margin-left: 0.5em -} - -.snac-btn-unmute { - float: right; - margin-left: 0.5em -} - -.snac-btn-follow { - float: right; - margin-left: 0.5em -} - -.snac-btn-unfollow { - float: right; - margin-left: 0.5em -} - -.snac-btn-hide { - float: right; - margin-left: 0.5em -} - -.snac-btn-delete { - float: right; - margin-left: 0.5em -} - -.snac-btn-limit { - float: right; - margin-left: 0.5em -} - -.snac-btn-unlimit { - float: right; - margin-left: 0.5em -} - -.snac-footer { - margin-top: 2em; - font-size: 75% -} -.snac-poll-result { - margin-left: auto; - margin-right: auto; -} - -/*Begin og segment*/ -* { - background-color: black; - color: white; - font-family: monospace; -} - -/*This makes buttons look like any other text - this was intended to have surrounding symbols, -but it doesn't work on inputs, so you may want to re-enable the border for a11y*/ -input[type=submit] { - border-width: 0px; - color: lime; - font-size: .9em; - cursor: pointer; -} -input[type=text] { - border-width: 0px; -} - -/*Summary ajustments*/ -details[open]>summary::marker { - content: "v " -} -details>summary:hover { - cursor: pointer; -} -details>summary::marker { - color: hotpink; - content: "> " -} - -/*Changes user @s in mentions and in posts*/ -.snac-origin>a, -.snac-post-with-desc>p>b>a, -.mention, -.snac-author-tag, -.mention>span { - color: mediumslateblue!important -} -.snac-origin>a::before, -.mention::before, -.snac-author::before, -.snac-author-tag::before, -.snac-post-with-desc>p>b>a:before { - content: "("!important; -} -.snac-origin>a::after, -.mention::after, -.snac-author::after, -.snac-author-tag::after, -.snac-post-with-desc>p>b>a::after { - content: ")"!important -} - -/*Changes date from mm-dd-yyyy to [mm-dd-yyyy]*/ -.snac-pubdate::before { - content: "[" -} -.snac-pubdate::after { - content: "]" -} - -/*Origin ajustments - this includes boosts and replies*/ -.snac-origin { - color: indianred -} -.snac-origin::before { - content: "((" -} -.snac-origin::after { - content: "))" -} - -/*Media fixes*/ -.snac-embedded-video, -img { - max-width: 200px; - max-height: 200px; - height: fit-content; - object-fit: contain; -} -.snac-content-attachments>a::before, -.snac-content-attachments>a::after { - content: "" -} -.snac-content-attachments, -img { - animation-play-state: paused; -} -.snac-content-attachments:hover, -img:hover { - animation-play-state: running; -} - -.snac-top-user { - text-align: left; - padding-top: 1em; -} - -/*The below only styling works on webkit browsers*/ -input[type=submit]::after { - content: "]" -} -input[type=submit]::before { - content: "[" -} -input[type=checkbox] { - visibility: hidden; -} -input[type=checkbox]::after { - visibility: visible; - content: "[-]"; - color: red; -} -input[type=checkbox]::after:checked { - content: "[X]" -} - -/*Hides pinned posts in private view*/ -/*Only works in userstyles; change to instance URL*/ -@-moz-document regexp(".*/admin.*") { - .snac-post:has(.snac-post-header > .snac-score > span) { - display: none; - } -} |