Html закладки: Создаём меню закладок для сайта – Вкладки (страницы) на одной странице на html/css с помощью :target / Habr

Leave a Comment / Html / By /

Как сделать вкладки в HTML

Вы здесь: Главная — JavaScript — JavaScript Основы — Как сделать вкладки в HTML

Как сделать вкладки в HTML

Сегодня мы создадим три вкладки (tabs), переключаясь между которыми, поочередно будет скрываться или снова показываться, содержимое всех вкладок.

В каких случаях целесообразно размещать контент на сайте во вкладках?

Первая причина – в целях экономии места на странице. Вторая причина – когда содержимое сайта разнородное. В большинстве случаев, обе причины, склоняют нас к использованию вкладок (табов) на сайте.

Я знаю, что начинающие веб-разработчики, «шарахаются» от нативного способа (с применением JS) делать подобные вкладки. Предпочитая, не вникать в технические детали, хватаются за готовый плагин на jQuery (смотрите урок по Easytabs

) или берут готовый компонент на Bootstrap.

Как сделать вкладки в HTML.

Однако этот урок посвящается тем смельчакам, которые не прячут голову в песок, а хотят разобраться в механизме переключения между вкладками. Особенно, урок будет полезен изучающим JavaScript. Пользуясь случаем, не могу не посоветовать видео-курс по JavaScript.

Демонстрация вкладок

HTML код вкладки

Внутри контейнера див с классом tab, создадим 3 кнопки-ссылки (названия городов) с классом tablinks, заранее повесим на кнопки события по клику и дадим название функции openCity. При клике по кнопке отработает эта функция, первым аргументом события будет — event.

<div>
  <button>Москва</button>
  <button>Берлин</button>
  <button>Пекин</button>
</div>

Дальше создадим три блока с контентом для каждого таба, каждому блоку присвоим ID для получения нужных элементов и классы для стилизации их.

<div>
  <h4>Москва</h4>
  <p>Москва это столица России.</p>
</div>
<div>
  <h4>Берлин</h4>
  <p>Берлин это столица Германии.</p>
</div>
<div>
  <h4>Пекин</h4>
  <p>Пекин это столица Китая.</p>
</div>

CSS код вкладки

See the Pen Tabs with CSS and JavaScript by porsake (@porsake) on CodePen.


Комментарии для CSS кода

1) Зададим для блока с классом tab

контейнера цвет фона и рамку.
2) Сделаем кнопки-переключатели button с тем же фоном, без рамок, с отступами для названий городов и плавным переходом.
3) Поменяем цвет фона при наведении на кнопки button:hover.
4) Зададим цвет фона и цвет ссылки для активной кнопки вкладки button.active.
5) Сделаем блоки с контентом tabcontent невидимыми с отсутствующей верхней рамкой.


JS код вкладки

See the Pen Tabs with CSS and JavaScript by porsake (@porsake) on CodePen.


Комментарии для JS кода

1) Объявим все переменные.
2) Получим все элементы с классом tabcontent и спрячем их.
3) Получим все элементы с классом tablinks и удалим активный класс.
4) Покажем текущую вкладку и добавим активный класс на кнопку, которая откроет вкладку с

ID по названию города.

  • Как сделать вкладки в HTML. Создано 03.12.2018 10:02:31
  • Как сделать вкладки в HTML. Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Якоря | htmlbook.ru

Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу.

Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи атрибута name тега <a> (пример 9.1). В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки (#) впереди.

Пример 9.1. Создание якоря

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Быстрый переход внутри документа</title>
 </head>
 <body>
  <p><a name="top"></a></p>
  <p>...</p>
  <p><a href="#top">Наверх</a></p>
 </body>
</html>

Между тегами <a name=»top»> и </a> текст не обязателен, так как требуется лишь указать местоположение перехода по ссылке, находящейся внизу страницы. Имя ссылки на якорь начинается с символа #, после чего идет имя якоря, оно выбирается любое, соответствующее тематике. Главное, чтобы значения атрибутов name и href совпадали (символ решетки не в счет).

С якорями связана одна особенность работы браузера. После перехода к указанному якорю нажатие на кнопку «Назад» возвращает не на предыдущую просмотренную страницу, а к ссылке, с которой был сделан переход к якорю. Получается, что для перехода к предыдущему документу надо нажать кнопку «Назад» два раза.

Cсылку можно также сделать на закладку, находящуюся в другой веб-странице и даже другом сайте. Для этого в атрибуте href тега <a> надо указать адрес документа и в конце добавить символ решетки # и имя закладки (пример 9.2).

Пример 9.2. Ссылка на закладку из другой веб-страницы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Якорь в другом документе</title>
 </head>
 <body>
  <p><a href="text.html#bottom">Перейти к нижней части текста</a></p>
  </body>
</html>

В данном примере показано создание ссылки на файл text.html, при открытии этого файла происходит переход на закладку с именем bottom.

Если на веб-странице содержится ссылка на якорь, а самого якоря нет, то никакой ошибки не возникнет.

Более 50 красивых чистых CSS скриптов навигации с помощью закладок

В статье приводится список скриптов навигации с помощью закладок. Каждый вариант имеет наглядный пример с доступным для загрузки исходным кодом.

bootstrap-tabs-x – расширенный плагин закладок, построенный на основе Bootstrap Tabs. Он позволяет выравнивать закладки, переворачивать заголовки, загружать контент через AJAX, а также включает в себя некоторые другие функции.

Демо

Pure CSS Tabs with Indicator – современная, но достаточно простая библиотека закладок, построенная без использования JavaScript. Это значит, что она быстрая и красивая.

Демо

Tabby – позволяет создавать простые закладки и выводить на них любой контент, включая видео. Данный скрипт предоставляет продвинутые настройки, поддерживает NPM и Bower.

Демо

Responsive Tabbed Navigation – современная удобная навигация, созданная с использованием JS и CSS, построенная с упором на мобильные устройства и поддерживающая горизонтальное и вертикальное расположение.

Демо

Toggler – плагин, написанный на чистом JavaScript, предназначен для создания элементов-переключателей, включая аккордеоны и закладки. Также он позволяет показывать/прятать любой элемент на странице.

Демо

Pure CSS Tabs – простой пример, созданный на основе CSS и JS. Несмотря на то, что он показывает «голые» закладки, вы сможете приукрасить их, изменив CSS стили.

Демо

Tabsy CSS – библиотека, написанная на CSS, предназначенная для создания простых элементов-переключателей, таких как закладки. Она не нуждается в дополнительных ресурсах и не требует использования JavaScript.

Демо

Tabbis.js – это простой, но продвинутый плагин. Используя его расширенные настройки, можно создавать вложенные закладки, а также определять функции обратного вызова.

Демо

Демо

Демо

Tabs using Pitaya – скрипт позволяют с легкостью создавать анимированное переключение между закладками. Но нужно подключить Pitaya, которая является библиотекой и увеличивает время загрузки.

Демо

jTabs – библиотека закладок, написанная на чистом JavaScript. Это означает, что она построена без jQuery и поддерживает несколько опций настройки.

Демо

Демо

Демо

tabs.js – это библиотека, написанная на JavaScript. Она адаптивная, поэтому закладки меняются на аккордеон на маленьких экранах.

Демо

WellTabber – ещё один простой JavaScript-плагин, похожий на Tabby. Он поддерживает различные варианты настройки закладок. Также он позволяет показывать стрелки навигации.

Демо

Демо

Демо

Демо

Material Design Tabs – скрипт закладок, построенный с использованием Vanilla JavaScript. Он простой в использовании, но и не поддерживает расширенные опции.

Демо

Анимированные CSS-Закладки – позволяет создавать простые легковесные закладки. В отличие от Tabby или WellTabber, скрипт не предлагает расширенных настроек.

Демо

Демо

Демо

Pure CSS Bootstrap Adaptive Tabs – система закладок построена исключительно с использованием CSS и без JavaScript. Уникальная функция, которую она предоставляет: закладки, не помещающиеся на экран, переносятся в выпадающий список.

Демо

Foldable Tab Bar – виджет закладок, написанный на чистом CSS3 (без использования JavaScript), как и другие плагины в этом списке. Его делают интересным закладки, имеющие красивый эффект сворачивания.

Демо

Демо

JavaScript Tabifier – продвинутый плагин закладок на JavaScript. Он позволяет устанавливать закладку по умолчанию, изменять закладку динамически и добавлять функции обратного вызова в события onLoad и onClick.

Демо

Tabtastic – это простой плагин для создания закладок с помощью CSS и JS. Он использует семантическую разметку, доступен для программ чтения экрана и поддерживает вложенные закладки на странице.

CSS3 & jQuery Folder Tabs – это руководство с доступным для скачивания исходным кодом рассказывает о создании закладок папок с помощью CSS3 и jQuery. Оно напоминает мне о закладках в Google Chrome.

Демо

Equal-width Navigation Tabs – пример кода, демонстрирующий использование чистого CSS для создания закладок навигации одинаковой ширины. Вы можете настроить отображение, но не дополнительные настройки.

Демо

Демо

Twitter Bootstrap Wizard – это плагин для создания установщика с закладками. Я заметил, что он позволяет создать только закладки, скрыв или удалив кнопки «Назад» и «Далее«.

Демо

Демо

Just Another CSS Tabs – прекрасно созданная структура закладок, построенная на чистом CSS, которая работает в современных браузерах. Но, в отличие от некоторых мощных плагинов, здесь нет расширенных настроек.

Демо

Responsive Accordion to Tabs – скрипт работает как аккордеон или как закладки в зависимости от ширины экрана. Он показывает закладки или аккордеон, если размер экрана слишком мал.

Демо

CardTabs – лёгкий плагин закладок, созданный на jQuery, который имеет несколько тем. Вы также можете создавать новые темы и устанавливать активную закладку динамически.

Демо

Демо

Minimal & Sexy Tabs – закладки, которые доступны в двух цветовых темах: светлой и тёмной. Скрипт построен на jQuery, поэтому не так легок, как некоторые упомянутые выше плагины.

Демо

Adaptive Tabs – не считая современного дизайна, пример не имеет особой функциональности, как некоторые продвинутые плагины.

Демо

Демо

Демо

jQuery Tabs – это простой плагин для создания закладок. Он построен на jQuery.

Демо

Данная публикация представляет собой перевод статьи «50+ Nice Clean CSS Tab-Based Navigation Scripts» , подготовленной дружной командой проекта Интернет-технологии.ру

Создание вкладок (табов). Урок 1

Создание вкладок (табов)

От автора: в данном уроке мы с Вами поговорим о создании табов на сайте. Табы — это ни что иное, как вкладки, позволяющие вместить большой объем информации, используя минимальный объем места. Вкладки очень естественно смотрятся, к примеру, в интернет-магазинах. Там в них часто помещают информацию о товаре: характеристики, описание товара и т.д.

Библиотека jQuery UI предлагает нам виджет Табы (http://jqueryui.com/tabs/), позволяющий с легкостью реализовать необходимый функционал. Однако, если вы не хотите подключать дополнительную библиотеку, если хотите реализовать вкладки, что называется с нуля, то данный урок как раз то, что вам нужно.

скачать исходникискачать урок

В данном уроке мы с вами создадим необходимую для табов разметку, а также напишем стили, позволяющие оформить табы соответствующим образом. При этом это не обязательно может быть «табовое» оформление… мы вполне можем использовать функционал урока для создания сайта-визитки, где контент страницы — это контент вкладки, ну а каждая конкретная вкладка — это ни что иное, как пункт меню. В общем, мы ограничены лишь нашей фантазией.

скачать урок

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Итак, давайте начнем с разметки, которая может быть примерно такой:

<!doctype html> <html lang=»en»> <head> <meta charset=»UTF-8″> <title>Табы</title> <link rel=»stylesheet» href=»style.css»> </head> <body> <div> <div> <ul> <li><a href=»#tabs-1″>Таб 1</a></li> <li><a href=»#tabs-2″>Таб 2</a></li> <li><a href=»#tabs-3″>Таб 3</a></li> </ul> </div> <div> <div> <p>Вкладка 1</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, officiis ut hic voluptate inventore natus molestiae! Ut, voluptate maxime facere officia animi id quod perspiciatis nam officiis et. Nisi, nesciunt!</p> </div> <div> <p>Вкладка 2</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, officiis ut hic voluptate inventore natus molestiae! Ut, voluptate maxime facere officia animi id quod perspiciatis nam officiis et. Nisi, nesciunt!</p> </div> <div> <p>Вкладка 3</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, officiis ut hic voluptate inventore natus molestiae! Ut, voluptate maxime facere officia animi id quod perspiciatis nam officiis et. Nisi, nesciunt!</p> </div> </div> </div> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<!doctype html>

<html lang=»en»>

<head>

<meta charset=»UTF-8″>

<title>Табы</title>

<link rel=»stylesheet» href=»style.css»>

</head>

<body>

<div>

<div>

<ul>

<li><a href=»#tabs-1″>Таб 1</a></li>

<li><a href=»#tabs-2″>Таб 2</a></li>

<li><a href=»#tabs-3″>Таб 3</a></li>

</ul>

</div>

<div>

<div>

<p>Вкладка 1</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, officiis ut hic voluptate inventore natus molestiae! Ut, voluptate maxime facere officia animi id quod perspiciatis nam officiis et. Nisi, nesciunt!</p>

</div>

<div>

<p>Вкладка 2</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, officiis ut hic voluptate inventore natus molestiae! Ut, voluptate maxime facere officia animi id quod perspiciatis nam officiis et. Nisi, nesciunt!</p>

</div>

<div>

<p>Вкладка 3</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, officiis ut hic voluptate inventore natus molestiae! Ut, voluptate maxime facere officia animi id quod perspiciatis nam officiis et. Nisi, nesciunt!</p>

</div>

</div>

</div>

 

</body>

</html>

Давайте немного разберем созданную структуру вкладок. Каждая вкладка представляет из себя элемент списка. Название вкладки помещено в ссылку, якорь которой является здесь ключевым. Дело в том, что по якорю ссылки мы можем связать вкладку с ее текстом. Тексты вкладок помещены в блок с идентификаторами, которые попросту дублируют якоря ссылок.

Например, мы имеем ссылку с якорем #tabs-1. Также у нас есть текст в блоке с идентификатором #tabs-1. Это и есть та самая связь вкладки с ее текстом.

Теперь остается оформить наши табы, добавив несколько стилевых правил в файл стилей:

*{margin: 0; padding: 0;} .wrapper{ width: 500px; margin: 50px auto; } #tabs{ width: 100%; } #tabs ul{ list-style: none; display: table-row; } #tabs ul li{ display: table-cell; background: #ccc; height: 40px; text-align: center; border-left: 5px solid #fff; } #tabs ul li:first-child{ border-left: none; background: #f3f3f3; } #tabs ul li a{ display: table-cell; width: 500px; height: 40px; line-height: 40px; color: #000; text-decoration: none; font-size: 20px; } #tabs ul li a:hover{ color: #e8117f; } .tab-content{ border: 10px solid #f3f3f3; } .tabs-text{ padding: 10px; /*display: none;*/ }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

*{margin: 0; padding: 0;}

.wrapper{

width: 500px;

margin: 50px auto;

}

#tabs{

width: 100%;

}

#tabs ul{

list-style: none;

display: table-row;

}

#tabs ul li{

display: table-cell;

background: #ccc;

height: 40px;

text-align: center;

border-left: 5px solid #fff;

}

#tabs ul li:first-child{

border-left: none;

background: #f3f3f3;

}

#tabs ul li a{

display: table-cell;

width: 500px;

height: 40px;

line-height: 40px;

color: #000;

text-decoration: none;

font-size: 20px;

}

#tabs ul li a:hover{

color: #e8117f;

}

.tab-content{

border: 10px solid #f3f3f3;

}

.tabs-text{

padding: 10px;

/*display: none;*/

}

В результате мы получили классические вкладки (табы). Осталось реализовать переключение между вкладками, добавив табам необходимый функционал. В следующем уроке мы с вами напишем несложный скрипт, который реализует необходимый функционал.

На этом текущий урок завершен. До встречи в следующем уроке. Удачи!

скачать урок

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее скачать урок

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Как сделать закладку на странице сайта — якори в HTML

Создано: 17.12.18 Обновлено: 17.12.18 Категория: HTML

Иногда требуется сделать так, чтобы посетитель не просто перешел на страницу, но и попал на определенное ее место. Для этого используются якори HTML.

Якорь (анкор) – это название технологии закладки на странице сайта, то есть метки, на которую осуществляется возврат посетителя с любого другого места. Сделать закладку на странице сайта очень просто. Делать закладки можно не только на текущую страницу, но и на другие. HTML-якори могут быть очень полезны в разных случаях, например, для создания навигации на объемных страницах с подпунктами, для создания простых закладок и т.д.

Небольшой пример:

<h3>Ссылки на якори</h3>
<p><a href="#anchor1">Перейти к якорю 1</a></p>
<p><a href="#anchor2">Перейти к якорю 2</a></p>
<p><a href="#anchor3">Перейти к якорю 3</a></p>

<h3>Якори на странице</h3>
<p>Якорь на странице 1</p>
<p>Якорь на странице 2</p>
<p>Якорь на странице 3</p>

Как видно, достаточно прописать у нужного тега атрибут id и сослаться на него в ссылке после знака #. Ранее вместо id использовался атрибут name, но в HTML5 это изменилось. Если на странице содержится ссылка на якорь, но якоря нет — ошибка не произойдет. Такое свойство якорей часто используется в JavaScript для обработки нажатия на ссылки.

Важно заметить, что после клика на якорь в пределах текущей страницы, навигация в браузере меняется – кнопки назад и вперед учитывают сделанные клики. Поэтому придется нажать кнопку назад несколько раз, пока будет выполнен переход на предыдущую страницу. А для того, чтобы сделать плавный переход на якорь, необходимо использовать JavaScript.

Создание вкладок при помощи HTML и CSS

30

156

В данной теме мы рассмотрим простой скрипт создания вкладок при помощи HTML и CSS.

Вкладки, как правило, используются для экономии места при размещении большого количества информации на одной страничке.

При использовании вкладок посетитель может просмотреть без перезагрузки странички интересующую его информацию, просто кликнув по заголовку нужной вкладки.

Наш скрипт является легким и быстрым т.к. не использует JavaScript код или какие-либо плагины и библиотеки.

Ниже Вы можете наблюдать пример создаваемых данным скриптом вкладок:


Как видно из примера, содержимое каждой вкладки может быть различным по высоте, чего частенько не встретишь в других подобных скриптах (у них все вкладки одинаковые по высоте). Количество вкладок и их оформление так же можно легко изменить.

При создании вкладок HTML разметка вкладок выглядит следующим образом:

HTML код:

<div class="tabs">
    <input type="radio" name="inset" value="" id="tab_1" checked>
    <label for="tab_1">Вкладка №1</label>

    <

input type="radio" name="inset" value="" id="tab_2">
    <label for="tab_2">Вкладка №2</label>

    <

input type="radio" name="inset" value="" id="tab_3">
    <label for="tab_3">Вкладка №3</label>

    <

input type="radio" name="inset" value="" id="tab_4">
    <label for="tab_4">Вкладка №4</label>

    <

div id="txt_1">
        <p>Произвольное содержимое...</p>
        <p>Произвольное содержимое...</p>
        <p>Произвольное содержимое...</p>
    </div>
    <div id="txt_2">
        <p>Вторая вкладка</p>
    </div>
    <div id="txt_3">
        <p>Размеры содержимого вкладок</p>
        <p>могут отличаться по высоте!</p>
    </div>
    <div id="txt_4">
        <img src="image/logo.png" width="533" height="77" alt="Лого">
    </div>
</div>

Для того чтобы вкладки функционировали и были похожи на те, что приведены в примере выше, в шапке сайта между тегами <head> и </head> добавьте следующие стили оформления:

HTML код:

<style type="text/css">
.tabs { width: 100%; padding: 0px; margin: 0 auto; }
.tabs>input { display: none; }
.tabs>div {
    display: none;
    padding: 12px;
    border: 1px solid #C0C0C0;
    background: #FFFFFF;
}
.tabs>label {
    display: inline-block;
    padding: 7px;
    margin: 0 -5px -1px 0;
    text-align: center;
    color: #666666;
    border: 1px solid #C0C0C0;
    background: #E0E0E0;
    cursor: pointer;
}
.tabs>input:checked + label {
    color: #000000;
    border: 1px solid #C0C0C0;
    border-bottom: 1px solid #FFFFFF;
    background: #FFFFFF;
}
#tab_1:checked ~ #txt_1,
#tab_2:checked ~ #txt_2,
#tab_3:checked ~ #txt_3,
#tab_4:checked ~ #txt_4 { display: block; }
</style>

В результате использования вот такого нехитрого кода можно значительно сэкономить место на страничках сайта и систематизировать размещение контента.

Дата создания: 17:14:04 04.12.2016 г.

Дата обновления: 17:14:04 04.12.2016 г.

Посещений темы: 26789 раз(а).


Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то лучше сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.

Управляйте закладками с помощью тегов — на радость себе и коллегам / Habr

Краткое содержание

  • Недостатки стандартных закладок в браузере
  • Как найти любую закладку из тысячи в 2-3 клика
  • Облачные закладки как способ обмена знаниями с коллегами
  • Что не так с текущими системами и зачем я сделал новую
  • Как перейти на новую систему: рецепты для ленивых
  • Разработчики всех стран — делитесь знаниями! 😉

Недостатки стандартных закладок в браузере

Главная на мой взгляд проблема менеджеров закладок в браузере — их древовидная структура. В ветках легко заблудиться, если у вас сотни закладок. Например, куда положить книгу про стресс, которую я хочу почитать в отпуске? В «Книги / Здоровье / Позже», или в «Позже / Книги / Здоровье»? А если зимним вечером я захочу открыть все отложенные книги, как же мне их быстро все найти среди множества категорий и подкатегорий?

Второй большой недостаток — закладками из браузера сложно делиться. Даже если у меня есть категория «Книги / Программирование / Любимое» — чтобы отправить все эти ссылки коллеге, придется копировать ссылки по одной, например в текстовый файл или мессенджер.


Как найти любую закладку из тысячи в 2-3 клика

По большому счету, человеческий мозг заточен на структурирование информации через ассоциации, т.е. множества. И структурировать информацию с помощью тегов — зачастую более интуитивный подход. С помощью тегов мучиться не придется — я добавлю закладку с тегами «здоровье, книги, позже». И легко найду ее потом в самых разных ситуациях: и когда буду просматривать список кник для покупки, и когда буду смотреть все материалы по здоровью, и когда буду разгребать отложенные на потом закладки. Именно такая система позволит найти любую закладку в 2-3 клика, даже если их у вас тысячи. Таким образом облачный менеджер закладок на тегах решает проблему структурирования и поиска нужных закладок.

Из личного опыта — на 600 закладок у меня 25 тегов, и редко у какой закладки больше 3 тегов. Т.е. чтобы найти любую закладку в 2-3 клика, при ее создании достаточно выбрать нужные теги в 2-3 клика. Здесь можно посмотреть вживую, как работает поиск с помощью тегов: мой профиль, 300 публичных закладок.


Облачные закладки как способ обмена знаниями с коллегами

Если вы пользуетесь облачным менеджером закладом, делиться коллекциями ссылок легко — они изначально лежат в сети. Например, я могу легко отправить ссылку на коллекцию книг по программированию, или на любимые материалы по архитектуре приложений на Rails, и так далее.

К тому же, публичная коллекция ссылок многое говорит о человеке, и это еще один способ лучше узнать друг друга, обменяться опытом. Точно так же, как разработчики обмениваются списками любимых технологий на StackShare.

А если чьи-то ссылки вам особенно интересны, можно подписаться на обновление коллекции по RSS. Ведь если мы подписываемся на новости в твиттере и фото в инстаграмме, почему мы не подписаться и на новые ссылки от коллеги? Например, я таким способом узнаю много классного про современный фронтенд от моего коллеги по предыдущему проекту. Проект закончился, а обмен знаниями продолжается.


Что не так с текущими сервисами и зачем я сделал новую

Прежде чем начать пилить свой велосипед, я попробовал найти готовый сервис, который решал бы описанные выше проблемы. Увы, мои поиски увенчались лишь частичным успехом.

Например, заслуженно популярный сервис Raindrop все-таки предлагает структурировании закладки в первую очередь с помощью Категорий и Подкатегорий. Интерфейс не заточен на быстрое добавление закладок с популярными тегами. Поиск по тегам не такой удобный, как мне хотелось бы. Публичного профиля с тегами в системе нет. Глобальных RSS лент для подписки на обновления пользователя — тоже. Это мой тестовый профиль на 300 закладок.

Идея управления закладками с помощью тегов по вкусу явно не только мне. Уже 8 лет живет и здравствует сервис Pinboard. По функциям он близок к моему идеалу — там есть и поиск по комбинациям тегов, и публичный профиль, и RSS ленты. Но управление тегами меня местами меня убивает, потому что система повсеместно сортирует теги по алфавиту, а не по их значимости (т.е. числу закладок). Лично для меня, сортировка тегов по значимости воспринимается намного легче. Также, свой сервис я старался спроектировать для минимального количества кликов и для минимального «пробега» мыши. И наконец — сделать его бесплатных для всех. Т.к. Pinboard платный, и значит многие разработчики не будут ими пользоваться — а идею социальных закладок для обмена знаниями я считаю по-прежнему ценной. Вот мой тестовый профиль на 300 закладок.


Как перейти на новую систему: рецепты для ленивых

Прежде всего, новый сервис бесплатен для всех желающих. И поскольку он ориентирован на разработчиков, зарегистрироваться можно через GitHub в пару кликов.

Если вы хотите использовать сервис для поиска новых клиентов, рекомендую начать с добавления ссылок на работы из вашего портфолио. Причем, благодаря тегам вы можете структурировать его как угодно — и по технологиям, и по годам, и по странам, и по роли в проекте, и так далее. Это особенно хорошо, если у вас много работ. Поскольку профиль привязан к GitHub, через него можно легко найти ваш сайт/email и выслать предложение о работе 🙂 Таким образом, профиль на DevsLike в теории может заменить личный сайт-портфолио. Ну или добавьте в профиль ссылку на уже имеющийся у вас личный сайт. А также, если хотите — контакты в соцсетях, например по тегу contacts. В общем, все очень гибко.

Потом я бы рекомендовал попробовать добавить в свой профиль ссылки, которыми вы бы хотели поделиться с коллегами. Например, на список книг. Лично я нахожу этот способ организации знаний настолько удобным, что перенес в систему ссылки на электронные версии всех книг в моей библиотеке — и уже прочитанных, и отложенных для покупки. Вместо того, чтобы рыться в библиотеках iBooks и Kindle на разных устройствах, у меня теперь единый поиск по всем книгам.

Итого, если добавите в систему несколько десятков закладок, то уже сможете ее «прочувствовать» и решить, стоит ли перетаскивать в нее все остальные закладки. Если закладок мало, то это должно быть достаточно легко сделать с помощью расширений для браузера и букмарклета — просто добавляете закладки по одной и тегируете их мышкой. Когда у вас сформируется ядро основных тегов, добавление новой закладки будет занимать секунды. Общая рекомендация: делать 1-3 тега на закладку, и НЕ делать очень узкоспециализированные теги (например, «svg» если у вас там будет меньше десятка закладок).

С точки зрения качества навигации, лучше ручного структурирования ничего быть не может. Это как с рефакторингом кода — да, приходится тратить дополнительное время на приведение хаоса в порядок. Но оно того стоит, т.к. читать код приходится на порядки чаще, чем его писать. Так и тут — подумать несколько секунд над тегами для закладки и проставить их нужно один раз, а найти нужные ссылки будет легко всегда. В свое время я так перетащил порядка 500 закладок, заодно и старый мусор разгреб. И с тех пор уже 4 месяца работаю только в новой системе, на старую совершенно не тянет.

Если же вы хотите провести эксперимент по автоматическому импорту большого числа закладок — напишите, пожалуйста. Что-нибудь придумаем, это довольно большой вызов, и мне интересно попробовать решить эту задачу совместными силами.


Разработчики всех стран — объединяйтесь! 😉

Этот сервис я делаю сам, в свободное от работы время. В том числе поэтому он очень минималистичный — его задача решать малое число задач настолько хорошо, насколько возможно. И главная задача — помогать разработчикам структурировать собственные знания и эффективно обмениваться ссылками на полезные материалы.

Поскольку сервис делается разработчиком для разработчиков, если кому-то это будет интересно, я охотно поделюсь техническими подробностями и детальной историей его разработки. И конечно же буду благодарен за любую обратную связь и конструктивную критику. Вместе мы сильнее! 😉

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *