made with notepad
кнопка “made with notepad”, которая давно уже не появляется на сайтах. её ставили владельцы страниц, которые писали html руками в обычном блокноте.
код писали тихо, с душой, не спеша, зная, что делают важное дело.
такие страницы часто были неровными. где-то съезжали таблицы, где-то картинка не грузилась, где-то фон спорил с текстом так, будто они давно и благополучно в разводе. но “made with notepad” честно показывала: это ручная сборка, копипаста из чужого туториала и немного упрямства.
возможно на смену ей придет “made without ai”, когда код практически будет лишен души, без иронии, спеша.
кнопка “made with notepad”, которая давно уже не появляется на сайтах. её ставили владельцы страниц, которые писали html руками в обычном блокноте.
код писали тихо, с душой, не спеша, зная, что делают важное дело.
такие страницы часто были неровными. где-то съезжали таблицы, где-то картинка не грузилась, где-то фон спорил с текстом так, будто они давно и благополучно в разводе. но “made with notepad” честно показывала: это ручная сборка, копипаста из чужого туториала и немного упрямства.
возможно на смену ей придет “made without ai”, когда код практически будет лишен души, без иронии, спеша.
spacer gif
spacer gif — прозрачная картинка размером 1×1 пиксель. она ничего не изображала, но работы у неё было больше, чем у половины современных лендингов.
её растягивали по ширине или высоте, чтобы сделать отступ, раздвинуть элементы, удержать колонку, выровнять меню. хочешь больше воздуха между блоками? поставь невидимую картинку. нужно, чтобы макет не схлопнулся? ещё одну. нужно, чтобы сайт выглядел, как ты видел в голове? прозрачный пиксель и немного веры.
сейчас это звучит как технический абсурд, но тогда было обычным решением. когда нет удобного инструмента, человек изобретает подпорку. даже если подпорка — пустая картинка, которая просто стоит между элементами и делает вид, что так и задумано.
spacer gif — прозрачная картинка размером 1×1 пиксель. она ничего не изображала, но работы у неё было больше, чем у половины современных лендингов.
её растягивали по ширине или высоте, чтобы сделать отступ, раздвинуть элементы, удержать колонку, выровнять меню. хочешь больше воздуха между блоками? поставь невидимую картинку. нужно, чтобы макет не схлопнулся? ещё одну. нужно, чтобы сайт выглядел, как ты видел в голове? прозрачный пиксель и немного веры.
сейчас это звучит как технический абсурд, но тогда было обычным решением. когда нет удобного инструмента, человек изобретает подпорку. даже если подпорка — пустая картинка, которая просто стоит между элементами и делает вид, что так и задумано.
newgrounds
newgrounds — один из ключевых сайтов flash-культуры. там выкладывали анимации, игры, музыкальные ролики, пародии, интерактивные штуки и всё, что вообще можно было создать.
это была не стерильная платформа с аккуратной витриной. скорее шумная мастерская. рядом лежали удачные эксперименты, грубые шутки, подростковая агрессия, талантливые игры, странные мультфильмы. эта платформа породила многих инди-разрабов.
пользователи оценивали работы, писали комментарии, спорили, ругали, голосовали. автор мог загрузить ролик и получить реакцию почти сразу. иногда восторженную. иногда такую, после которой хочется выключить компьютер и не включать его больше вообще. адоб флэш погиб, но платформа все еще живет, на эмуляторе ruffle. как и многое после той потерю.
newgrounds — один из ключевых сайтов flash-культуры. там выкладывали анимации, игры, музыкальные ролики, пародии, интерактивные штуки и всё, что вообще можно было создать.
это была не стерильная платформа с аккуратной витриной. скорее шумная мастерская. рядом лежали удачные эксперименты, грубые шутки, подростковая агрессия, талантливые игры, странные мультфильмы. эта платформа породила многих инди-разрабов.
пользователи оценивали работы, писали комментарии, спорили, ругали, голосовали. автор мог загрузить ролик и получить реакцию почти сразу. иногда восторженную. иногда такую, после которой хочется выключить компьютер и не включать его больше вообще. адоб флэш погиб, но платформа все еще живет, на эмуляторе ruffle. как и многое после той потерю.
👾9
badger badger badger
badger badger badger — анимация 2003 года: барсуки, гриб, змея и зацикленная песенка. пересказывать её почти бессмысленно, потому что весь эффект держится не на сюжете.
сначала странно. потом раздражает. потом ты прокручиваешь ее в голове перед сном. и во сне. интернет обожает такие вещи: простые, повторяющиеся, липкие. они не требуют объяснения, им достаточно ритма.
эта анимация хорошо показывает ранние вирусные ролики. маленький файл, простой визуал, повтор, звук, который невозможно нормально забыть. до коротких видео и алгоритмов распространения такие штуки расходились через ссылки: человек открывал страницу, видел барсуков, закрывал страницу, а потом почему-то отправлял её другому человеку. массовый психоз.
badger badger badger — анимация 2003 года: барсуки, гриб, змея и зацикленная песенка. пересказывать её почти бессмысленно, потому что весь эффект держится не на сюжете.
сначала странно. потом раздражает. потом ты прокручиваешь ее в голове перед сном. и во сне. интернет обожает такие вещи: простые, повторяющиеся, липкие. они не требуют объяснения, им достаточно ритма.
эта анимация хорошо показывает ранние вирусные ролики. маленький файл, простой визуал, повтор, звук, который невозможно нормально забыть. до коротких видео и алгоритмов распространения такие штуки расходились через ссылки: человек открывал страницу, видел барсуков, закрывал страницу, а потом почему-то отправлял её другому человеку. массовый психоз.
эквалайзер winamp
в winamp был эквалайзер и визуализации. можно было двигать полоски частот, включать пресеты, смотреть, как спектр прыгает под музыку. даже если пользователь не очень понимал, что именно меняет, сам процесс выглядел убедительно.
отдельной ступенью эволюции была визуализация. линии, волны, цветные формы, пульсация, движения под звук. компьютер будто начинал показывать музыку глазами. не всегда красиво, иногда похоже на заставку дешёвого клуба, но гипнотично.
в эпоху mp3 это имело значение. музыка не была спрятана в стриминговом интерфейсе. она лежала у тебя. плеер открывался отдельным окном, плейлист можно было таскать, эквалайзер двигать, скин менять.
winamp не пытался быть незаметным. он занимал место, мигал, прыгал, показывал название трека зелёными буквами. вёл себя как субъект, а не просто инструмент.
в winamp был эквалайзер и визуализации. можно было двигать полоски частот, включать пресеты, смотреть, как спектр прыгает под музыку. даже если пользователь не очень понимал, что именно меняет, сам процесс выглядел убедительно.
отдельной ступенью эволюции была визуализация. линии, волны, цветные формы, пульсация, движения под звук. компьютер будто начинал показывать музыку глазами. не всегда красиво, иногда похоже на заставку дешёвого клуба, но гипнотично.
в эпоху mp3 это имело значение. музыка не была спрятана в стриминговом интерфейсе. она лежала у тебя. плеер открывался отдельным окном, плейлист можно было таскать, эквалайзер двигать, скин менять.
winamp не пытался быть незаметным. он занимал место, мигал, прыгал, показывал название трека зелёными буквами. вёл себя как субъект, а не просто инструмент.
👾5
clippy
clippy — тот самый скрепыш-помощник из microsoft office. он появлялся рядом с документом и пытался угадать, что пользователь делает. «похоже, вы пишете письмо…» и дальше предлагал помощь, о которой его никто не просил.
идея была не совсем плохой: сделать программу менее сухой, добавить персонажа, который объясняет функции и помогает новичкам. проблема в том, что clippy часто появлялся не вовремя. человек просто пытался написать текст, а рядом вылезала ожившая канцелярская скрепка с инициативой.
со временем clippy стал мемом не потому, что был ужасен визуально. наоборот, он был запоминающимся. его раздражающая полезность оказалась слишком человеческой: он хотел помочь, но делал это так навязчиво, что пользователь начинал мечтать о пустом листе без всяких маскотов.
clippy — тот самый скрепыш-помощник из microsoft office. он появлялся рядом с документом и пытался угадать, что пользователь делает. «похоже, вы пишете письмо…» и дальше предлагал помощь, о которой его никто не просил.
идея была не совсем плохой: сделать программу менее сухой, добавить персонажа, который объясняет функции и помогает новичкам. проблема в том, что clippy часто появлялся не вовремя. человек просто пытался написать текст, а рядом вылезала ожившая канцелярская скрепка с инициативой.
со временем clippy стал мемом не потому, что был ужасен визуально. наоборот, он был запоминающимся. его раздражающая полезность оказалась слишком человеческой: он хотел помочь, но делал это так навязчиво, что пользователь начинал мечтать о пустом листе без всяких маскотов.
счётчик посещений
счётчик посещений был маленьким табло на странице. обычно он показывал что-то вроде: “you are visitor number 000238”. цифры часто выглядели как электронные часы, кассовый аппарат или приборная панель из дешёвого sci-fi.
сегодня аналитика спрятана в кабинетах, графиках и воронках, а раньше счётчик был публичным. он показывал всем: сюда кто-то заходил. возможно, случайно, возможно, сам автор обновлял страницу двадцать раз, чтобы было солиднее. но цифра есть, а значит, место не совсем пустое.
особенно странно счётчики выглядят на заброшенных страницах. сайт давно не обновлялся, ссылки мертвы, картинки пропали, но табло всё ещё показывает чей-то последний визит. мертвые души веба.
счётчик посещений был маленьким табло на странице. обычно он показывал что-то вроде: “you are visitor number 000238”. цифры часто выглядели как электронные часы, кассовый аппарат или приборная панель из дешёвого sci-fi.
сегодня аналитика спрятана в кабинетах, графиках и воронках, а раньше счётчик был публичным. он показывал всем: сюда кто-то заходил. возможно, случайно, возможно, сам автор обновлял страницу двадцать раз, чтобы было солиднее. но цифра есть, а значит, место не совсем пустое.
особенно странно счётчики выглядят на заброшенных страницах. сайт давно не обновлялся, ссылки мертвы, картинки пропали, но табло всё ещё показывает чей-то последний визит. мертвые души веба.
👾7
winamp skins
winamp вышел в 1997 году и стал одним из главных медиаплееров эпохи mp3. но в памяти он остался не только из-за музыки. его можно было переодевать на свой вкус.
скины превращали плеер в металлическую панель, неоновый прибор, аниме-интерфейс, готическую штуку, пиксельный объект, почти физическую игрушку. менялся не просто цвет. менялось ощущение программы.
это было время локальной музыки. mp3-файлы лежали на диске, плейлист собирался руками, названия треков иногда выглядели как “track_07_final_real.mp3”, и никто уже не спрашивал, откуда всё это взялось. плеер был личной вещью, а не витриной сервиса.
winamp вышел в 1997 году и стал одним из главных медиаплееров эпохи mp3. но в памяти он остался не только из-за музыки. его можно было переодевать на свой вкус.
скины превращали плеер в металлическую панель, неоновый прибор, аниме-интерфейс, готическую штуку, пиксельный объект, почти физическую игрушку. менялся не просто цвет. менялось ощущение программы.
это было время локальной музыки. mp3-файлы лежали на диске, плейлист собирался руками, названия треков иногда выглядели как “track_07_final_real.mp3”, и никто уже не спрашивал, откуда всё это взялось. плеер был личной вещью, а не витриной сервиса.
desktop buddy
desktop buddy — маленький персонаж, который самостоятельно функционировал на рабочем столе. он мог ходить по экрану, реагировать на клики, разговаривать, сидеть поверх окон, иногда мешать, иногда развлекать, иногда вести себя так, будто у него больше прав на компьютер, чем у тебя.
такие персонажи были разными: виртуальные питомцы, аниме-маскоты, помощники, рекламные “друзья”, странные утилиты. часть была милой. часть быстро превращалась в надоедливый мусор. некоторые, вроде bonzibuddy, ещё и тащили за собой сомнительную репутацию из-за рекламы и приватности.
сейчас они плохо вяжутся с эстетичной работой за маком в кофейне, ведь они максимально мешают культу продуктивности. так что сейчас их можно встретить разве что в играх, по типу kinito pet (кстати советуем вам)
desktop buddy — маленький персонаж, который самостоятельно функционировал на рабочем столе. он мог ходить по экрану, реагировать на клики, разговаривать, сидеть поверх окон, иногда мешать, иногда развлекать, иногда вести себя так, будто у него больше прав на компьютер, чем у тебя.
такие персонажи были разными: виртуальные питомцы, аниме-маскоты, помощники, рекламные “друзья”, странные утилиты. часть была милой. часть быстро превращалась в надоедливый мусор. некоторые, вроде bonzibuddy, ещё и тащили за собой сомнительную репутацию из-за рекламы и приватности.
сейчас они плохо вяжутся с эстетичной работой за маком в кофейне, ведь они максимально мешают культу продуктивности. так что сейчас их можно встретить разве что в играх, по типу kinito pet (кстати советуем вам)
👾9
баннеры 88×31
баннеры 88×31 пиксель были крошечными кнопками-наклейками. их ставили внизу сайтов, в боковых колонках, на страницах “links”, рядом с кнопками браузеров, редакторов, фан-клубов и личных предпочтений.
формат был маленький, но говорящий. туда помещались надписи “made with notepad”, “get firefox”, “no frames”, “html 4.01”, “anime fan”, “this site is powered by caffeine”. иногда текст едва читался. иногда анимация мигала так, будто баннер хочет пробить монитор изнутри.
эти кнопки работали как ранняя система принадлежности. сайт показывал, чем он сделан, кого поддерживает, с кем дружит, какие сообщества признаёт.
баннеры 88×31 пиксель были крошечными кнопками-наклейками. их ставили внизу сайтов, в боковых колонках, на страницах “links”, рядом с кнопками браузеров, редакторов, фан-клубов и личных предпочтений.
формат был маленький, но говорящий. туда помещались надписи “made with notepad”, “get firefox”, “no frames”, “html 4.01”, “anime fan”, “this site is powered by caffeine”. иногда текст едва читался. иногда анимация мигала так, будто баннер хочет пробить монитор изнутри.
эти кнопки работали как ранняя система принадлежности. сайт показывал, чем он сделан, кого поддерживает, с кем дружит, какие сообщества признаёт.
webring
webring — это кольцо сайтов одной темы. на странице стояла панель с кнопками previous, next, random, list. нажимаешь “next” попадаешь на другой сайт из того же кольца. например, на фан-страницу по аниме, архив готических картинок, сайт владельцев хорьков или коллекцию midi.
это была навигация через соседство. не поисковая выдача, не алгоритм, не бесконечная лента, где всё уже расставили за тебя. скорее прогулка от одной двери к другой.
переходы могли быть непредсказуемыми. один сайт аккуратный, второй сломан, третий на чёрном фоне с красным текстом, четвёртый включает музыку без предупреждения. но в этом была топология старого веба: сайты не просто висели отдельно, они держались друг за друга ссылками.
webring — это кольцо сайтов одной темы. на странице стояла панель с кнопками previous, next, random, list. нажимаешь “next” попадаешь на другой сайт из того же кольца. например, на фан-страницу по аниме, архив готических картинок, сайт владельцев хорьков или коллекцию midi.
это была навигация через соседство. не поисковая выдача, не алгоритм, не бесконечная лента, где всё уже расставили за тебя. скорее прогулка от одной двери к другой.
переходы могли быть непредсказуемыми. один сайт аккуратный, второй сломан, третий на чёрном фоне с красным текстом, четвёртый включает музыку без предупреждения. но в этом была топология старого веба: сайты не просто висели отдельно, они держались друг за друга ссылками.
табличная верстка
до того как css стал нормальным инструментом для макетов, сайты часто собирали таблицами. таблицы вообще-то нужны для данных, но ранний веб решил: данные подождут, мы построим из клеточек весь интерфейс.
шапка сайта — таблица. меню слева — таблица. основной текст — таблица. отступ — пустая ячейка. рамка — ещё одна таблица внутри таблицы. иногда код страницы выглядел как лабиринт, где каждый <td> держит на себе кусок мироздания.
нужно было как-то контролировать расположение элементов, а нормальные инструменты ещё работали неровно или непредсказуемо. таблица давала иллюзию порядка.
если экран или бразуер отличался от того, который подразумевал разработчик вся аккуратная конструкция начинала ехать. адаптивность стала нормой далеко не сразу. хотя и сейчас иногда хочется написать «извините, сайт доступен только на десктопе», но мир нам этого уже не простит(
до того как css стал нормальным инструментом для макетов, сайты часто собирали таблицами. таблицы вообще-то нужны для данных, но ранний веб решил: данные подождут, мы построим из клеточек весь интерфейс.
шапка сайта — таблица. меню слева — таблица. основной текст — таблица. отступ — пустая ячейка. рамка — ещё одна таблица внутри таблицы. иногда код страницы выглядел как лабиринт, где каждый <td> держит на себе кусок мироздания.
нужно было как-то контролировать расположение элементов, а нормальные инструменты ещё работали неровно или непредсказуемо. таблица давала иллюзию порядка.
если экран или бразуер отличался от того, который подразумевал разработчик вся аккуратная конструкция начинала ехать. адаптивность стала нормой далеко не сразу. хотя и сейчас иногда хочется написать «извините, сайт доступен только на десктопе», но мир нам этого уже не простит(
ytmnd
ytmnd расшифровывается как “you’re the man now, dog”. сайт строился на очень простой формуле: картинка или gif, крупный текст и зацикленный звук.
сила формата была в ограничении. не длинный пост, не видео на три минуты, не объяснение. один экран, один звук, одна фраза. пользователь заходил, видел, слышал, понимал или не понимал, уходил с застрявшим в голове фрагментом.
ytmnd хорошо показывает раннюю мемную механику. мем не обязан быть понятным. он может быть аудиовизуальной петлёй, которую хочется переслать не потому, что она умная, а потому что она странно работает.
ytmnd расшифровывается как “you’re the man now, dog”. сайт строился на очень простой формуле: картинка или gif, крупный текст и зацикленный звук.
сила формата была в ограничении. не длинный пост, не видео на три минуты, не объяснение. один экран, один звук, одна фраза. пользователь заходил, видел, слышал, понимал или не понимал, уходил с застрявшим в голове фрагментом.
ytmnd хорошо показывает раннюю мемную механику. мем не обязан быть понятным. он может быть аудиовизуальной петлёй, которую хочется переслать не потому, что она умная, а потому что она странно работает.
sl3nd3rm4n
. . . один из т3х интернет-м0нстр0в, к0т0рые пугают не тем, чт0 делают, а тем, чт0 пр0ст0 есть где-т0 ряд0м .
Он п0явился в 2009 г0ду на f0руме Something Awful : 0бычные ф0т0графии, дети, ф0н, и где-т0 сзади — слишком выс0кий чел0век без лица в ч3рн0м к0стюм3 . Ничег0 oсобенного не пр0исходит . И именн0 п0эт0му стан0вится не по себе .
П0т0м к@мьюн!т! д0рис0вал л0р . фальшивые “свидетельства” . н0вые картинки . игры . ист0рии пр0 пр0павших людей и стр@нные встречи . Так случ@йный ф0т0ш0п превратился в 0дну из самых известных крипипаст .
Страшен sl3nd3rm4n св0ей пуст0т0й . Он не кричит . не скалится . не объясняет, чт0 ему нужн0 . Он пр0ст0 ст0ит где-т0 на краю кадра, как будт0 был там всегда .
И чем д0льше см0тришь на ф0т0, тем сильнее кажется, чт0 лишний на нем не 0н . а ты .
. . . один из т3х интернет-м0нстр0в, к0т0рые пугают не тем, чт0 делают, а тем, чт0 пр0ст0 есть где-т0 ряд0м .
Он п0явился в 2009 г0ду на f0руме Something Awful : 0бычные ф0т0графии, дети, ф0н, и где-т0 сзади — слишком выс0кий чел0век без лица в ч3рн0м к0стюм3 . Ничег0 oсобенного не пр0исходит . И именн0 п0эт0му стан0вится не по себе .
П0т0м к@мьюн!т! д0рис0вал л0р . фальшивые “свидетельства” . н0вые картинки . игры . ист0рии пр0 пр0павших людей и стр@нные встречи . Так случ@йный ф0т0ш0п превратился в 0дну из самых известных крипипаст .
Страшен sl3nd3rm4n св0ей пуст0т0й . Он не кричит . не скалится . не объясняет, чт0 ему нужн0 . Он пр0ст0 ст0ит где-т0 на краю кадра, как будт0 был там всегда .
И чем д0льше см0тришь на ф0т0, тем сильнее кажется, чт0 лишний на нем не 0н . а ты .