Сохраняй посты, комментируй и ставь оценки
Лет 20 назад работал в университете лаборантом. Девушка спросила почему ссылка работает странно.
Её код:
<a href='httрs://google.com'>
Google
<a href='httрs://mail.ru'>
Mail
<a href='httрs://nahui.com'>
Прочее
</a>
Решил немного попробовать себя в авторском контенте, а за одно и рассказать о своём видении расширений для браузера.
Многие из нас знакомы с расширениями(плагинами) для браузеров которыми они пользуются, в основном это блокировщики рекламы, вроде Адблока или Юблока. В наше время, как по мне блокировщик рекламы в браузере, это прям вещь необходимая, так как я лично на многие сайты просто зайти не могу без морального потрясения когда нет блокировщика. Серьёзно! Я понимаю что владелец сайта хочет заработать, но некоторый типа фандома, откровенно жадничают, количество рекламных блоков просто зашкаливает! Но суть не в этом.
Что такое вообще расширение для браузера? В примитиве это небольшой скрипт который производит некие манипуляции на странице сайта. В случае адблока, скрипт пробегает по странице сайта и скрывает все блоки которые в его "списке" помечены как рекламные.
Есть более сложные расширения такие как ВПН, которые взаимодействуют не просто со страницей, а уже с настройками браузера и т.д., но речь сегодня не о них.
Мне больше нравится сама идея того что есть возможность расширить или модифицировать свой браузер эдаким изящным апплетом.
Например когда на ютюбе скрыли дизлайки, некто написал расширение которое при загрузке страницы улавливает параметр количества дизлайков ил "потрохов" сайта и не смотря на то что администрация ютюба это дело скрыла, плагин сам генерирует кусочек html кода и через JavaScript вставляет его в нужное место!
В этом мне нравится сама идея избавления от каких то идей которые нам хочет так или иначе навязать администрация сайта! (Цифровая диктатура как сейчас модно говорить)
Самое простое что можно сделать через расширения это скорректировать дизайн того или иного сайта под себя (или сразу всех), создать какую то свою интересную тему. Например заменить общий фон тела страницы на какой то узор, и сделать цвет текста мягче.
Работа расширений как и их создание (и размещение) очень просты, всем управляет JavaScript, а какие то вещи вроде меню настроек которые открываются при нажатии на его иконку, это просто небольшая html страничка.
По сути расширение это такая папочка с файлами, которая в случае firefox запаковывается в zip, после чего расширение у файла с zip меняется xpi и расширение готово к установке в браузер. В случае с браузерами на движке Chromium (chrome,opera,eadge,yandex e.t.c.) ничего запаковывать и вовсе не нужно, в настройках можно выбрать установку расширения из папки.
А что в папке?
Во первых файл manifest.json - это грубо говоря "паспорт" расширения, документ в котором написано, что это за расширение, кем создано, какая версия, какая у него иконка стоит, какие оно запрашивает разрешения у браузера (например возможность работать как раз с контентом страницы), указания того что за страничка будет открываться при нажатии на иконку, а так же указание какой скрипт нужно выполнять на сайтах при работе.
Далее естественно сама страничка index.html - которая показывается при нажатии на иконку, там обычно размещают какие то настройки, переключатели состояния. Это все легко верстается на html тэгах, а стили задаются в отдельному css файлике, ну или если лень то прям среди html тэгов.
Ну и раз есть настройки то нажатие на них нужно как то регистрировать? Здесь нам поможет файлик main.js - в котором мы пропишем логику того что будет происходить когда пользователь нажимает например на наши кнопочки в меню. Грубо говоря там будут инструкции в стиле "нажал на кнопку > происходит следующее"
И если мы пишем расширение которое работает с чем то на открытых нами сайтах то и скрипт background.js - в котором будут уже инструкции о том что будет расширение делать на открытых нами сайтах.
Так же тут находятся сопутствующие папочки вроде img или icons где у нас лежат какие то изображения и графика которую мы используем и иконка самого расширения.
по итогу у нас получается примерно такая вот структура:
Как это работает: человек кликает на иконку приложения в шапке окна браузера, ему показывается index.html в котором какие то настройки, при клике по настройкам файл main.js их обрабатывает, например сохраняет их значение в память браузера. А далее файл background.js который запускается на каждом открытом нами сайте, в начале получает из памяти браузера настройки которые натыкал пользователь, а затем на их основе проводит какие то манипуляции, например заменяет все изображения на странице на фото Николаса Кейджа, с той прической которая похожа на птицу.
Самое интересное для меня что в теории любой может на досуге попробовать в плане "поиграть", написать что то подобное для себя. В сети полно бесплатных мануалов и уроков, да и сейчас тот же chatGpt если задавать правильные вопросы может наглядно показывать подробные примеры кода и объяснять их работу.
Я постарался максимально простым языком описать работу расширений, без лишней терминологии что бы любой заинтересованный (надеюсь) смог примерно понять как это работает)
Надеюсь было интересно, за ошибки прошу прощения, я больше по части языков на котором говорят машины😁
Развлекательно - познавательная информация для тех, кто хочет начать погружение в веб дизайн и программирование.
© 2024 Константин Оборотов
===
Как вы думаете, сколько букв в алфавите русского языка? Если вы считаете, что 33, то я с удовольствием с вами поспорю.
Я считаю, что всего лишь 32, т.к. буква "ё" формально существует, но лучше ее никогда не использовать на практике. По современным правилам букву "ё" всегда можно заменить буквой "е", но нельзя поступать наоборот. Это означает, что использование буквы "ё" ничем не оправдано и несет в себе дополнительные риски ошибок. А раз мы букву "ё" никогда не используем, то зачем ее считать буквой алфавита?
Впрочем, все эти диспуты о русском языке покажутся детскими по своей простоте и наивности, если мы начнем рассуждать о китайском языке.
Как китайцы набирают свои тексты? Используют огромные клавиатуры с площадью несколько квадратных метров? Или кропотливо комбинируют сбор иероглифов хитрыми комбинациями клавиш на клавиатурах, которые похожи на наши? А может голосом диктуют свои рассказы, а умный софт компьютера переводит китайскую речь в китайский текст на иероглифах?
Все перечисленные выше варианты реальны и все они трудоемки, требуют ясности ума, чистоты мышления и большого трудолюбия.
Впрочем, это еще полбеды. А как хранится это огромное количество иероглифов и сколько их вообще?
Если мы можем согласиться, что в русском языке 32 буквы, ну, пускай, максимум 33, то в китайском языке все сложнее. Не всякий сможет подсчитать их точное количество. Кто-то говорит, что всего лишь 800, кто-то 3000. Другие специалисты утверждают, что около ста тысяч. Но это неточно.
Так сколько же иероглифов в китайском языке? У меня есть простой, четкий и однозначный ответ на этот, казалось бы, сложный вопрос. Ровно 20992 знака. Как мне удалось так точно подсчитать? Я открою вам этот секрет. Следите за полетом моей мысли.
Как всем известно, мы с вами работаем в кодировке "UTF-8", самым популярном представлении Юникода. При этом используем 1112064 кодовых позиций, т.е. символов. По сути, у нас тут получается мировой алфавит из более чем миллиона букв. В этот алфавит входят все английские и русские буквы, китайские иероглифы, буквы известных древних языков и разного рода "веселые картинки".
Русские буквы находятся в этом алфавите, начиная с позиции 1040 (большая русская буква А) до позиции 1103 (маленькая русская буква я).
Самые популярные китайские иероглифы занимают места от 19968 до 40959. Нехитрая арифметика дает тут результат по общему количеству: 20992.
Вообще, в нашем мировом алфавите есть много чего интересного и удивительного. Есть хитрые математические значки. Если буквы, знаки и иероглифы практически всех известных живых и мертвых языков мира. Если множество разных "картинок" для развлекательных и познавательных потребностей.
Предлагаю вам поверхностно познакомиться с этим алфавитом. Давайте, бросим взгляд на 80 произвольно выбранных знаков из этого алфавита.
В самой верхней строчке этой выборке я предлагаю вашему вниманию первые десять иероглифов китайского алфавита.
Понемножку мы можем начинать изучать китайский язык прямо сейчас. Первый иероглиф означает вовсе не "минус", как вы могли подумать, а "один". Второй иероглиф означает "человек". Что означает третий иероглиф, я не помню, найдите сами в Интернете. Зато я помню, что означает десятый иероглиф - "три".
Остальные 70 картинок, это почти случайная выборка, сделанная с целью дать вам быстрое, хоть и поверхностное знакомство с буквами мирового алфавита. Я хочу особо подчеркнуть, что это именно "буквы", "символы", точно такие же по смыслу знаки, как буквы английского или русского языков или иероглифы китайского.
Я нисколько не удивлюсь, если в ближайшее время появится новое направление - создание текстов исключительно из таких вот "картинок". Интересный вид творчества.
Если вы дочитали до этого места, и вас заинтересовал прекрасный таинственный мир HTML сущностей, пробудился интерес к веб дизайну и строительству, то самое время погрузиться в эту тему более глубоко:
Небольшая видео инструкция поможет вам ориентироваться в этом сложном большом мировом алфавите.
🐣🐤🐥🐓🐔🦆🦢
...
Первоисточник:
===
Привет капибаряне! Не выпустил я пост в ту пятницу, но наверстываю пропущеные дни. В прошлом посте мы начали создавать свою википедию, поняли, что это не сложно и узнали новые теги. Но некоторые вещи все еще остались незаконченными. Давайте их разберем!
Наш план на сегодня:
Начнем!
Откроем наш код. Начнем с того, что добавим изображения и видео на наш сайт в разделе медиа. Для этого нам нужно загрузить нужные фото и видео в одну папку с вашими скриптами, как указано на фото:
За шакалов извините(.
Я бы советовал переименовывать изображения для удобства.
Итак, запоминаем новый тег, который послужит для добавления фото на сайт.
Разберем этот тег:
src="" - атрибут, который дает ссылку на фото, которое нужно добавить на сайт, внутри кавычек нужно добавить название файла с расширением, например, kapibara.jpg.
alt="" - атрибут, который работает в случае, если браузер не может найти или обработать фото. Вместо него он говорил нам, что это за фото. Так он работает///
Weight и height обозначают высоту и ширину, все просто.
Перед созданием навигации расфасуем все пункты по id и дадим им свои классы. Запоминаем новый атрибут - id.
Подобным образом создаем id. (вместо class - id)
Теперь, давайте добавим навигацию по сайту. Для создания навигации используем ранее изученный нами тег -
Внутри пунктов добавляем следующую конструкцию:
href - говорит, куда отсылать нас
а между тегами мы пишем, что должно быть написано вместо ссылки.
Вроде все, ах да..!
Помните те линии в Википедии после заголовков? Чем наша Капипедия хуже? Тег создает линию. Прописываем ее после заголовков.
Спасибо за внимание к посту! Надеюсь вам понравилось, ну а я пойду капибарить новый пост, всем пока.
Привет капибаряне! Возможно, уже увидев название поста вы были удивлены, но я покажу вам, как создать свою псевдовикипедию, хотя, быть честным, только страницу из нее. Итак, начнем.
Для написания кода вы можете использовать разные среды разработки, например, я использую VSCode, однако, для постов я использую онлайн компилятор repl.it , т.к. это банально быстрее и легче.
В прошлом посте мы с вами узнали, как добавлять на свой сайт текст и заголовки. Но начнем немного раньше.
Первый наш код должен иметь следующее содержание, но не пугайтесь - я все вам объясню.
Сейчас вы все испугались, но успокойтесь. Давайте по порядку.
рассказывает браузеру, на какой версии html построен сайт, дабы избежать ошибок.
Говорит браузеру, что наш сайт русскоязычный. Это нужно, например, для встроенного переводчика. Так он может понять, с какого языка переводить сайт для иностранного посетителя.
В контейнере (Да, запомните это слово, чуть позже оно нам пригодится) head хранятся данные сайта как сайта. Логично.
говорит браузеру, в какой кодировке написан сайт.
А вот в хранится название вкладки. Да-да, вкладки. По-этому эта часть особенно важна.
Итак, перейдем к основе, все, что внутри сайта, пишется в контейнере . Нашу страницу на википедии мы будем писать о... КАПИБАРАХ!!!!! кхм-кхм, извините
Начнем с тех моментов, которые мы изучили ранее. Создадим заголовки. Из предыдущего поста вы узнали, как их создавать.
Создайте заголовки следующего типа: Капибары (h1), Внешний вид (h3), Отличительные признаки (h3), Обитание (h2), Места с наибольшей популяцией (h3) и Места с наименьшей популяцией (h3), Медиа (h2).
Ваш код и сайт будут выглядеть так:
Уже напоминает?
Но чего-то не хватает. А, точно, описания капибары! В интернете находим описание капибары и вставляем. Какой тег мы будем использовать для обычного текста? Правильно - тег параграфа
.
Добавляем информацию из интернета для пунктов
А чтобы текст не выглядел скучно, выделите основные моменты (ВРЕМЯ ЗАПОМИНАНИЯ НОВЫХ ТЕГОВ!) жирным шрифтом - или или курсивом - . Для этого прямо в тексте выделите нужные слова этими тегами.
Ну, почти все. Но, почему мы пропустили пункт "Места с наибольшей популяцией"? Тут нам нужно сделать так называемый "топ стран", иначе говоря - список. Есть два типа списков:
Чтож, в этом посте мы с вами научились выделять текст курсивом и жирным шрифтом и добавлять различные списки. Мы с вами узнали, что такое контейнеры и как строится структура кода. В следующем посте мы с вами узнаем, как добавлять изображения и видео на сайт, создавать ссылки и навигацию, а так же вторую страницу сайта.
Спасибо за внимание к посту, а я пойду кабипарить следующий, который выйдет уже в эту пятницу. Всем пока!
