как узнать какая сетка используется на сайте
Сетки для адаптивного дизайна
Мы собрали наиболее частые темы, связанные с сеткой в адаптивном дизайне, чтобы «повысить резкость» термина как такового и систематизировать практические знания: как настраивать сетку в дизайн-макете, по каким параметрам делать расчет, какие особенности адаптивной среды учитывать и на какие детали обращать внимание.
Задача сетки не только в том, чтобы поддержать эстетику, но и в том, чтобы сохранять контроль над процессом разработки, делать сам процесс гибким как для дизайнера и для разработчика. Сетка — это как хорошо упакованный рюкзак, который вы передаете разработчику, чтобы он смог им пользоваться с удобством и пониманием вашего видения проекта.
Прежде чем создавать сетку, нужно «исследовать рабоче поле» — сделать черновой макет страницы, найти ограничения и критические области, которые обязательно проявят себя на этапе детального проектирования. Это помогает свести абстрактное понимание задачи к конкретным целям. После этого можно приступать к настройке рабочей сетки в макете. Для этого нужно создать структуру из трех типов сеток — базовой, колоночной и дизайнерской.
Базовая сетка
Базовая сетка близка по свойствам и назначению к миллиметровой бумаге. Она нужна для создания удобной среды, которая позволит вам двигать мелкие детали макета не задумываясь и не беспокоясь о том, чтобы все расстояния между элементами были равны, единообразны.
Шаг сетки зависит от таких атомарных неделимых частиц, как радио-кнопка, чекбокс, базовый шрифт и высота строки, минимальное расстояние между видимыми блоками контента, например, между фотографиями в галерее или карточками товаров.
Базовая сетка должна сочетаться с колоночной. Дефолтные настройки Photoshop предлагают дизайнеру сетку с шагом в 10 px, что соответствует смещению объекта по горячей клавише shift, но не соответствует ни кеглю шрифта, ни логике построения колонок и отступов. 10 px — целое число, но не более того. В настройках сеток для мобильных платформ хорошим шагом можно считать 4 или 8 px. Здесь же шаг сетки должен ровно укладываться в высоту строки основного текста и не быть слишком мелким.
Колоночная сетка
Для лендингов, сайтов с карточной структурой, портфолио и галерей резиновая адаптация работает хорошо. Для крупных агрегаторов и классифайдов с большим количеством форм, полей ввода и мелких контролов резиновое масштабирование создает трудности. Оно тяжело поддается контролю и часто деформирует элементы, разрушает структуру: теряются ключевые данные из первой прокрутки (например реклама), элементы сползают на следующую строку, целостность текстовых блоков разрушается, формы становятся чрезмерно широкими, пользователь вынужден слишком долго прокручивать страницу.
В адаптивном дизайне нужно сохранять структуру макета и аккуратность подачи информации для всех разрешений, поэтому макеты следует делать для всех контрольных точек. При этом колонки сетки остаются статичными и добавляются по мере увеличения ширины экрана, а элементы меняют свое положение, подчиняясь колоночному ритму и точкам перехода, breakpoints. За таковые можно принять 640, 768, 960, 1024, 1280 и 1440. И для каждого разрешения экрана соответственно будет разное количество колонок.
Сколько колонок выбрать для сетки?
Колоночная сетка отвечает за горизонтальный ритм, и чтобы таковой возник, нужно выбрать соотношение ширины колонки и отступа, которое позволит легко менять положении более крупных блоков. Это возможно, когда в крупный блок помещается несколько колонок, например 3-4. Отступ в данном случае, это воздушное поле, в котором не следует размещать элементы. Это важно в том смысле, что отступ — это не еще одна направляющая, по которой можно выравнивать элементы.
Соответственно, при выборе количества колонок нужно держать в уме, сколько прямоугольных модулей будет использоваться на странице. Например, будет галерея из шести фотографий с текстовыми описаниями, два крупных графика и три абзаца текста. Тогда число колонок должно быть кратно 2, 3 и 6. Подойдет число 12. Деление рабочей области в 960 px на 12 колонок с шириной отступов в 10, 12, 16, 15 и 20 px даст ширину колонок в 60, 64, 65, 68, 70 px. Таким образом получится несколько вариантов сетки, например сетка в 12 колонок с шириной колонки в 64 px и отступом в 16 px.
Почему число в 12 колонок привычно? Все современные мониторы работают в разрешениях начиная, как минимум, с 1024×768. Разбиение рабочей области 960 px на 12 колонок подходит более всего, так как хорошо делится на колонки и отступы, кратные 2. Исходя из этого можно выбирать число колонок и для других разрешений — 10 колонок для 768 px, 16 колонок для 1280 px и 20 колонок для 1440 px и более. По сути колонки прибавляются либо убавляются для каждого разрешения.
Если же отталкиваться от задачи построить сетку под баннерную рекламу, то нужно найти оптимальную ширину отступа и колонки, исходя из деления ширины баннера в 300 и 240 px. Из всех вариантов деления подходящими (совпадающими) размерами будут 10, 12, 15, 20. Баннерная реклама, как таковая, проходит через большинство сайтов, почти как полоса общественного транспорта, и мы мало можем влиять на нее. Но можно рассчитать колонки иначе и допустить незначительный выход баннера за пределы одной колонки по правому краю, но тогда сама сетка будет строиться на других модулях (например, на карточках товаров или видео-роликов). В этом случае следует на этапе дизайна лейаута продумать где на странице будет фиксированное положение баннеров, и какие элементы должны сопровождать эти баннеры, чтобы вместе создавать модуль, подчиняющийся сетке.
Дизайнерская сетка
Дизайнеру нужно создать лейаут, который будет учитывать не только баннерную рекламу, но и другие не менее значимые элементы и типы контента: вертикальные постеры фильмов, квадратные музыкальные обложки, крупные фотографии, видео, статьи по десять штук в одном ряду и так далее. Лейаут может складываться из двух узких колонок по бокам и одной широкой по центру. Может из одинаковых колонок с широкими отступами, а может даже состоять из «плавающих» колонок (когда две, когда пять), но так, чтобы это становилось видимым за счет повторения компоновки материалов и вложение «меньшего в большее».
Небольшая цитата из совет о якорных объектах Артема Горбунова
Прямоугольник — базовая фигура модульной вёрстки
Хорошая крепкая сетка строится на прямоугольных модулях. Композиция удалась, если всё, что вы нарисовали, можно обвести пропорциональными прямоугольниками, и они помещаются на странице, не налезая друг на друга и подчиняясь горизонтальному и вертикальному ритму.
Отдельно о Сетке базовых линий (baselinegrid)
Исторически с понятием вертикального ритма хорошо знакомы пользователи InDesign. В настройках они могли задать высоту строки для горизонтальной сетки и работать по ней. Но для дизайнера вертикальный ритм — это «оптическое понятие», для расчета которого нет точных параметров, поскольку создается он кропотливой проработкой каждого текстового блока, строк и отступов. В веб-дизайне все эти тонкости реализовать тяжело. Не достаточно просто подтягивать интерлиньяж всех шрифтов под одну высоту строки — это приведет к тому, что в крупных абзацах строки слипнутся, а в мелких — разъедутся.
Для создания вертикального ритма с помощью CSS разработчики используют оптически комфортную высоту строки базового шрифта и интерлиньяж всех текстов, кратный этой высоте. Текст, подчиненный такому вертикальному ритму, хорошо выглядит на странице с одной статьей, где много воздуха и не так сильно заметны слипшиеся текстовые строки большего размера шрифта.
Пример вертикального ритма на WebTuts+: 
Наоборот, не лучшим образом получится применить вертикальный ритм ко всем текстам на странице, когда текстов разного размера много. Характерный пример — инструмент Калькулятора вертикального ритма.
В совете о работе с межстрочным расстоянием в блоках с разным размером текста Артем Горбунов говорит о том, что сетка базовых линий скорее вредна, и что высоту строки текста и отступов лучше настраивать вручную. Интерлиньяж текста следует подбирать в зависимости от формата (модуля, плашки, текстового блока). Если строки в текстовом блоке короткие, то интерлиньяж можно сделать меньше. Если текстовый блок достаточно широкий и строки в нем длинные, то интерлиньяж следует сделать больше, иначе текст потеряет удобство чтения.
Подбирать высоту строки следует по соотношениям внутри каждого абзаца текста: от длинны строки зависит интрельяж, от интрильяжа зависит отступ заголовка и все вместе зависят от внешних левого и правого полей, которые должны быть больше внутренних отступов по Правилу внутреннего и внешнего и Теории близости.
Существует множество фреймворков, CSS-сеток, и многие из них предлагают создавать высоты строки примерно в полтора раза большую, чем размер шрифта и вписывать в получившуюся линию все остальные строки текста. Например UnitGridSystem. Некоторые предлагают определять интервальное число и выставлять интрильяж для всех текстов кратный этому числу. Но в этом случае от части шрифтов придется отказаться. В качестве компромисса подойдет инструмент Grilover. Он отличается от других тем, что не просто регулирует высоту базовой строки шрифта, но и компенсирует слипание/расползание строк параметром Scale factor.
Использование сетки при передаче макетов в верстку
Сетку полезно передавать верстальщикам в виде отдельной спецификации. Вы можете не только приложить к основному джипегу дополнительный джипег с сеткой, но прописать на нем основные размеры — например шаг, отступ, ширину колонки, размеры шрифтов. Тогда соответствие вашего макета и верстки станет более точным, и контроль над разработкой и синхронизацией повысится с обеих сторон. Точно также как в мобильных интерфейсах существуют независимые пиксели (dp), так и в вебе это единицы rem. Вы можете создать разметку в пикселях или прописать ключевые элементы и расстояния в rem. Удобно когда шаг вашей сетки и rem кратен одному и тому же числу. Например, если шаг сетки 8 px, базовый шрифт — 16 px и rem равен 16 px, то размеры элементов и расстояния при кратности 4 будут становиться на сетку и иметь целое значение в rem. Это позволяет сразу видеть расстояния между элементами по шагам на сетке. Такие цельные значения без долгих расчетов можно получить наглядно, если воспользоваться Rem Калькулятором.
Сетки без заморочек
Подавляющее большинство сайтов создано с использованием сеточных макетов. Они могут не использовать их в явном виде, но если на сайте присутствует блок с основным контентом, расположенный справа, и боковой блок (сайдбар), расположенный слева, то это и есть простейшая сетка.
Если требуется реализовать более сложные сетки, то люди прибегают к помощи фреймворков. Они считают, что сетки это сверх сложная вещь, которую лучше доверить настоящим знатокам CSS. Уверенность в этом укрепляется тем фактом, что большинство сеточных фреймворков, с которыми они имеют дело, являются очень сложными.
В этой статье я расскажу вам, как я верстаю сеточный макет. Это не так уж и сложно. И даже сделать резиновые сетки не составит большого труда.
Обертка
Ширина обертки колонок равна ширине её родителя. Можем принять её ширину за 100%. Так как обертка не имеет никакого семантического значения, то для нее мы будем использовать простой div.
Колонки
Давайте начнем с часто применяемого в практике макета, состоящего из: области с основным контентом шириной в 2/3 и бокового блока шириной в 1/3 (от ширины родителя). Для этого мы создадим два div’а с соответствующими классами:
Чтобы расположить их рядом друг с другом мы устанавливаем им свойство float и задаем ширину. Float можно установить сразу нескольким колонкам вот так:
а ширина устанавливается индивидуально:
Вот и вся предпосылка к сеткам без заморочек.
Очистка потока
Так как наша обертка содержит только плавающие элементы (колонки с установленным свойством float), то его высота схлопывается до нуля (т.к. плавающие элементы не влияют на размеры родителя — прим. пер.). Чтобы исправить это, нужно очистить поток. В настоящее время достаточно добавить это:
Отступы между колонками
Отступы между колонками — это самое сложное в сеточном макете. Мы уже сделали нашу сетку «резиновой», задав ширину колонок в процентах. Теперь мы могли бы усложнить всё математическими расчетами и задать ширину в процентах и для отступов между колонками. Лично я не являюсь сторонником таких методов, мне больше нравится задавать фиксированные отступы между колонками. И, к тому же, в этой статье мы стараемся особо не заморачиваться.
В качестве первого шага мы воспользуемся свойством box-sizing со значением border-box. Я люблю применять его ко всем элементам сразу.
Теперь ни отступы, ни границы не будут влиять на размеры элементов.
В качестве второго шага мы устанавливаем фиксированный отступ с правой стороны всем колонкам, кроме самой последней.
Это все, что касается отступов между колонками в самом простом случае.
Внешние отступы
Нужны внешние отступы между колонками? Я использую для этого дополнительный класс:
Первым делом мы добавляем левый отступ обертке колонок (а также верхний и нижний отступ на ваше усмотрение):
Затем вернем правый отступ последней колонке:
Больше различных колонок
Можете делать с ними всё, что угодно. Только не забывайте, что сумма дробей не должна превышать единицы. Для этого придется пораскинуть мозгами, но тут нету ничего сложного.
Я не часто им пользуюсь, но весь наш код становиться более компактным благодаря SCSS/Compass:
Модули
При работе с такими сетками я люблю использовать «модули».
Это очень удобно разбивать контент на такие кусочки. Дополнительная польза от них заключается в том, что каждому модулю можно задать отступы, которые будут отделять текст от краев колонок.
Результат
Демонстрацию результата можно посмотреть здесь.
Разборки с браузерами
Код работает отлично в IE 9 версии и выше, а также во всех остальных браузерах. Если вам нужен IE7, то займитесь чем-нибудь другим.
(Следует отметить, что в Опере поддержка дробных значений процентов появиласть только в 12 версии. — прим. пер.)
К слову, модель «гибких блоков» (flexbox, flexible box) в будущем упростит реализацию сеточных макетов и даже улучшит её (самым разным образом, включая возможность перестройки колонок по первому требованию). Но я думаю, что нам потребуется ещё около года, чтобы могли начать хотя бы думать об использовании «гибких блоков».
Информация по теме
Решение для IE8 (добавление от переводчика)
В оригинальной статье автор указал на то, что этот метод отлично работает в Internet Explorer 8 версии. Но он ошибся, т. к. IE8 не поддерживает псевдокласс :last-of-type. Зато он поддерживает псевдокласс :first-child который и поможет нам решить эту проблему.
В CSS меняем :last-of-type на :first-child и вместо правых отступов у колонок устанавливаем левые:
И подобным же образом правим код для вешних отступов:
Палим сетки сайтов по ads.txt
Иногда, есть необходимость узнать сетку сайтов. На мой взгляд, самый простой способ с помощью key.so — по pub-id Adsense/AdManager.
где вместо 1234567890 вставляется pub-id сайта.
Но keys.so платный, а в бесплатной версии доступно 2-3 сайта. А еще и количество рекламных сетей ограничено Google, Leadia (юридическая партнёрка) и Relap.io (рекомендательная система). И получается, если на сайте нет кодов указанных систем, keys.so сетку не спалит.
Но есть еще один способ — ads.txt. Для тех кто не знает, ads.txt — это файл, где указываются все авторизованные партнёры, которые могу продавать ваш трафик. Каждый партнёр указывается в виде записи, которая, в свою очередь состоит из 4 частей.
Именно по Publisher ID и можно находить общие сетки сайтов, только надо обращать внимание на тип аккаунта, чтобы не “спалить” крупного реселлера на 2-3к доменов. И поможет в этом сайт — adstxt.com.
С его помощью можно выполнять поиск по доменам, рекламным сеткам и Publisher ID. Попробуем на его примере найти, к какой сетке принадлежит сайт Elle.ru
На сайте 228 записей — из них 56 разных вендоров и 45 Direct записей, обращать нужно в первую очередь на них. Начинать поиск лучше с гугла — сайт показывает 7 (!) Direct записей гугла, правда не все из этих аккаунтов могут напрямую принадлежать паблишеру — часть рекламных сетей тоже может монетизировать трафик своим аккаунтом Google. Из этих 7 ID одинаковы по набору сайтов лишь 5.
Это может означать, что у паблишера 5 аккаунтов Adsense/Admanager/AdExchange для разных нужд.
У этого подхода есть свои плюсы и минусы:
Бесплатно
Поиск не только по Google, но и другим вендорам
Большая база — около 870 тыс. доменов
Обновляется каждый день
В базе редко встретишь сайты с небольшим трафиком — только крупняк
Данный вариант не поможет, если сайты и рекламные сети разнести по разным аккаунтам
Также с этого сайта можно получить немного полезной информации. Например:
Модульные сетки в работе UX-дизайнера. Инструкция по применению
Сетка? Зачем она нужна?
Люди всегда интуитивно пользовались чувством пропорции. Это легко подтвердить, потому что уже с самых ранних цивилизаций можно увидеть связь пропорций с измерением и конструированием, размещением предметов относительно друг друга в пространстве. Сетками, как разметкой, системой опорных линий, пользовались для составления планов строительства и разбивки территории, с помощью нее художники Возрождения увеличивали свои эскизы, а в картографии сетки были координатной основой, по которой составлялись военные планы.
В работе дизайнера, когда макеты состоят из различных элементов, сетка помогает их упорядочить. Сетка позволяет, не вычисляя каждое расстояние и размер в отдельности, заложив ключевые закономерности при её построении всего один раз, затем просто их переиспользовать. Например, сетка позволяет соблюсти правило теории близости (также вы можете найти это правило среди гештальт-принципов восприятия) и, в частности, правило внешнего и внутреннего, согласно которому внутренние расстояния должны быть меньше внешних.
Как только вы начинаете пользоваться сеткой, сложно не заметить её преимущества:
Какими бывают сетки
В зависимости от того, что берется за основу построения сетки, можно выделить следующие ее типы: блочная (в основе блок), колоночная (колонки), модульная (модуль), иерархическая (визуальный вес и расположение элементов относительно друг друга).
Блочная или манускриптная сетка — самый простой вид сетки, которая, как правило, используется в печатных изданиях. Обычно такая сетка представляет собой стандартизированный прямоугольник, который содержит контент на странице или на экране.
Колоночная сетка — сетка, имеющая колонки в своей структуре. Ширина межколонника (gutter) определяется его назначением, если он просто отделяет элементы друг от друга, то разумно сделать его ширину минимально необходимой, но он должен быть в любом случае ощутимо больше межстрочного интервала, чтобы строки в соседних колонках не выглядели продолжением друг друга.
Модульная сетка характеризуется наличием как вертикального членения, так и горизонтального. То, что образуется на пересечениях, есть модуль — прямоугольник с заданной высотой и шириной, который лежит в основе композиции. Сетка определяет как в целом будет выглядеть макет и где будут расположены отдельные элементы: текстовые блоки, заголовки, изображения.
Иерархическая — сетка с интуитивным размещением блоков, которая фокусируется на пропорциях и визуальном весе элементов в дизайне. Этот тип сетки часто используется, когда контент не стандартизированный и не однообразный. Часто встречается для бизнес доменов, связанных с модой, фотографией, искусством.
Наиболее сложной для построения является модульная сетка, она включает в себя в том числе и построение колоночной. Поэтому давайте рассмотрим принципы её создания.
Принципы построения модульной сетки
Модульная сетка — это инструмент, но не метод, поэтому прежде чем создавать сетку, необходимо сделать черновой макет страницы, продумать элементы, которые могут использоваться, и только потом переходить к её созданию. Чтобы построить модульную сетку, необходимо последовательно построить сначала базовую, потом применить к ней колоночную и, задав размер модуля, мы получим дизайнерскую, т.е. вашу разработанную под конкретный проект сетку.
И так, начнем с базовой сетки. Она напоминает миллиметровую бумагу. Она позволит перемещать самые мелкие элементы макета, сохраняя все расстояния между ними равными и единообразными. Шаг сетки зависит от неделимых элементов (атомов) макета. Ими могут быть базовый шрифт и высота строки, радио-кнопка, чекбокс, минимальное расстояние между видимыми блоками контента, например, между фотографиями в галерее или карточками товаров.
Основы компьютерных сетей. Тема №5. Понятие IP адресации, масок подсетей и их расчет
Приветствую вас на очередном выпуске. И сегодня речь пойдет о том, какие бывают IP-адреса, и как ими пользоваться. Что такое маска подсети, как она считается, и для чего она нужна. Как делить сети на подсети и суммировать их. Заинтересовавшихся приглашаю к прочтению.
P.S. Возможно, со временем список дополнится.
Начнем, или уже продолжим, с самого популярного, заезженного и больного. Это IP-адреса. На протяжении 4-х статей это понятие встречалось по несколько раз, и скорее всего вы уже либо сами поняли для чего они, либо нагуглили и почитали о них. Но я обязан вам это рассказать, так как без ясного понимания двигаться дальше будет тяжело.
Итак IP-адрес — это адрес, используемый узлом на сетевом уровне. Он имеет иерархическую структуру. Что это значит? Это значит, что каждая цифра в его написании несет определенный смысл. Объясню на очень хорошем примере. Примером будет номер обычного телефона — +74951234567. Первой цифрой идет +7. Это говорит о том, что номер принадлежит зоне РФ. Далее следует 495. Это код Москвы. И последние 7 цифр я взял случайными. Эти цифры закреплены за районной зоной. Как видите здесь наблюдается четкая иерархия. То есть по номеру можно понять какой стране, зоне он принадлежит. IP адреса придерживаются аналогично строгой иерархии. Контролирует их организация IANA(англ. Internet Assigned Numbers Authority). Если на русском, то это «Администрация адресного пространства Интернет». Заметьте, что слово «Интернет» с большой буквы. Мало кто придает этому значение, поэтому объясню разницу. В англоязычной литературе термин «internet» используется для описания нескольких подключённых друг к другу сетей. А термин «Internet» для описания глобальной сети. Так что примите это к сведению.
Несмотря на то, что тема статьи больше теоретическая, нежели практическая, я настоятельно рекомендую отнестись к ней со всей серьезностью, так как от нее зависит понимание дальнейших тем, а особенно маршрутизации. Не для кого, я думаю, не секрет, что мы привыкли воспринимать числовую информацию в десятичном формате (в числах от 0-9). Однако все современные компьютеры воспринимают информацию в двоичном (0 и 1). Не важно при помощи тока или света передается информация. Вся она будет воспринята устройством как есть сигнал (1) или нет (0). Всего 2 значения. Поэтому был придуман алгоритм перевода из двоичной системы в десятичную, и обратно. Начну с простого и расскажу, как выглядят IP адреса в десятичном формате. Вся эта статья посвящена IP адресам версии 4. О версии 6 будет отдельная статья. В предыдущих статьях, лабах, да и вообще в жизни, вы видели что-то вроде этого «193.233.44.12». Это и есть IP адрес в десятичной записи. Состоит он из 4-х чисел, называемых октетами и разделенных между собой точками. Каждое такое число (октет) может принимать значение от 0 до 255. То есть одно из 256 значений. Длина каждого октета равна 8 битам, а суммарная длина IPv4 = 32 битам. Теперь интересный вопрос. Каким образом этот адрес воспримет компьютер, и как будет с ним работать?
Можно конечно набить это в калькулятор, коих навалом в Интернете, и он переведет его в двоичный формат, но я считаю, что переводить вручную должен уметь каждый. Особенно это касается тех, кто планирует сдавать экзамен. У вас не будет под рукой ничего, кроме бумаги и маркера, и полагаться придется только на свои навыки. Поэтому показываю, как это делать вручную. Строится таблица.
Вместо «x» записывается либо 1, либо 0. Таблица разделена на 8 колонок, каждая из которых несет в себе 1 бит (8 колонок = 8 бит = 1 октет). Расположены они по старшинству слева направо. То есть первый (левый) бит — самый старший и имеет номер 128, а последний (правый) — самый младший и имеет номер 1. Теперь объясню, откуда эти числа взялись. Так как система двоичная, и длина октета равна 8-ми битам, то каждое число получается возведением числа 2 в степень от 0 до 7. И каждая из полученных цифр записывается в таблицу от большего к меньшему. То есть слева направо. От 2 в 7-ой степени до 2 в 0-ой степени. Приведу таблицу степеней 2-ки.
Думаю теперь понятно, каким образом строится таблица. Давайте теперь разберем адрес «193.233.44.12» и посмотрим, как он выглядит в двоичном формате. Разберем каждый октет отдельно. Возьмем число 193 и посмотрим, из каких табличных комбинаций оно получается. 128 + 64 + 1 = 193.
Те числа, которые участвовали в формировании комбинации получают 1, а все остальные получают 0.
Берем первый октет 233. 128 + 64 + 32 + 8 + 1.
Получаю 128 + 64 + 16 + 4 + 1 = 213.
Вычисляю второй блок.
Считаю 128 + 32 + 16 + 4 = 180.
И напоследок четвертый.
Собираем результаты вычислений и получаем адрес 213.180.193.3. Ничего тяжелого, чистая арифметика. Если тяжело и прям невыносимо трудно, то попрактикуйтесь. Сначала может показаться страшным, так как многие закончили учебу лет 10 назад и многое позабыли. Но уверяю, что как только набьете руку, считать будет гораздо легче. Ну а для закрепления дам вам несколько примеров для самостоятельного расчета (под спойлером будут ответы, но открывайте их только когда прорешаете сами).
1) 10.124.56.220
2) 113.72.101.11
3) 173.143.32.194
4) 200.69.139.217
5) 88.212.236.76
6) 01011101.10111011.01001000.00110000
7) 01001000.10100011.00000100.10100001
8) 00001111.11011001.11101000.11110101
9) 01000101.00010100.00111011.01010000
10) 00101011.11110011.10000010.00111101
Теперь IP-адреса не должны быть чем-то страшным, и можно углубиться в их изучение.
Выше мы говорили о структуре телефонных номеров и их иерархии. И вот на заре рождения Интернета в том представлении, в каком мы его привыкли видеть, возник вопрос. Вопрос заключался в том, что IP-адреса нужно как-то сгруппировать и контролировать выдачу. Решением было разделить все пространство IP-адресов на классы. Это решение получило название классовая адресация (от англ. Classful). Она уже давно устарела, но практически в любой книге на нее отводятся целые главы и разделы. Cisco тоже не забывает про это и в своих учебных материалах рассказывает про нее. Поэтому я пробегусь по этой теме и покажу, чем она блистала с 1981 по 1995 год.
Пространство было поделено на 5 классов. Каждому классу был назначен блок адресов.
Начнем с класса A. Если внимательно посмотреть на таблицу, то можно заметить, что этому блоку дан самый большой блок адресов, а если быть точным, то половина всего адресного пространства. Предназначался данный класс для крупных сетей. Структура этого класса выглядит следующим образом.
В чем суть. Первый октет, то есть 8 бит, остаются за адресом сети, а 3 последних октета (то есть оставшиеся 24 бита) назначаются хостам. Вот для того, чтобы показать, какой кусок относится к сети, а какой к хостам, используется маска. По структуре записи она аналогична записи IP-адреса. Отличие маски от IP-адресов в том, что 0 и 1 не могут чередоваться. Сначала идут 1, а потом 0. Таким образом, там где есть единица, значит это участок сети. Чуть ниже, после разбора классов, я покажу, как с ней работать. Сейчас главное знать, что маска класса A — 255.0.0.0. В таблице еще упомянут какой-то первый бит и для класса A он равен 0. Этот бит как раз нужен для того, чтобы сетевое устройство понимало, к какому классу оно принадлежит. Он же еще задает начальный и конечный диапазон адресов. Если в двоичном виде записать на всех октетах единицы, кроме первого бита в первом октете (там всегда 0), то получится 127.255.255.255, что является границей класса A. Например, возьмем адрес 44.58.63.132. Мы знаем, что у класса A первый октет отдается под адрес сети. То есть «44» — это адрес сети, а «58.63.132» — это адрес хоста.
Поговорим про класс B
Этому классу был дан блок поменьше. И адреса из этого блока предназначались для сетей средних масштабов. 2 октета отданы под адрес сети, и 2 — под адрес хостов. Маска у B класса — 255.255.0.0. Первые биты строго 10. А остальные меняются. Перейдем к примеру: 172.16.105.32. Два первых октета под адрес сети — «172.16». А 3-ий и 4-ый под адрес хоста — «105.32».
Этот класс обделили адресами и дали ему самый маленький блок. Он был предназначен для мелких сетей. Зато этот класс отдавал целых 3 октета под адрес сети и только 1 октет — под хосты. Маска у него — 255.255.255.0. Первые биты 110. На примере это выглядит так — 192.168.1.5. Адрес сети «192.168.1», а адрес хоста «5».
Классы D и E. Я неcпроста объединил их в один. Адреса из этих блоков зарезервированы и не могут назначаться сетям и хостам. Класс D предназначен для многоадресной рассылки. Аналогию можно привести с телевидением. Телеканал вещает группе лиц свой эфир. И те, кто подключены, могут смотреть телепередачи. То есть в распоряжение администраторов могут попасть только 3 первых класса.
Напомню, что первые биты у класса D — это 1110. Пример адреса — 224.0.0.5.
А первые биты у класса E — это 1111. Поэтому, если вдруг увидите адрес вида 240.0.0.1, смело говорите, что это адрес E класса.
Про классы обмолвились. Теперь озвучу вопрос, который мне недавно задали. Так зачем тогда маски? У нас итак хосты понимают в каком они классе. Но суть вот в чем. Например, у вас есть маленький офис, и вам нужен блок IP-адресов. Никто не будет вам выдавать все адреса класса C. А дадут только его кусок. Например 192.168.1.0 с маской 255.255.255.0. Так вот эта маска и будет определять вашу границу. Мы уже говорили, что октет варьируется в значении от 0 до 255. Вот этот 4 октет полностью в вашем распоряжении. За исключением первого адреса и последнего, то есть 0 и 255 в данном случае. Первый адрес — это адрес сети (в данном случае 192.168.1.0), а последний адрес — широковещательный адрес (192.168.1.255). Напомню, что широковещательный адрес используется в том случае, когда надо передать информацию всем узлам в сети. Поэтому есть правило. Если вам надо узнать номер сети, то все биты относящиеся к хосту обращаете в 0, а если широковещательный, то все биты — в 1. Поэтому, если из 256 адресов забирается 2 адреса, то на назначение хостам остается 254 адреса (256 — 2). На собеседованиях и экзаменах часто любят спрашивать: «Количество IP-адресов в сети?» и «Сколько доступных IP-адресов в сети для назначения хостам?». Два разных вопроса, которые могут поставить в тупик. Ответом на первый будет — все адреса, включая адрес сети и широковещательный адрес, а на второй вопрос — все адреса, кроме адреса сети и широковещательного адреса.
Теперь углубимся в изучении маски.
Я записал адрес класса C 192.168.1.1 с маской 255.255.255.0 в десятичном и двоичном формате. Обратите внимание на то, как выглядит IP-адрес и маска в двоичном формате. Если в IP-адресе 0 и 1 чередуются, то в маске сначала идут 1, а потом 0. Эти биты фиксируют адрес сети и задают размер. По таблице выше можно сделать вывод, что в двоичном виде маска представлена последовательностью 24 единиц подряд. Это говорит о том, что целых 3 октета выделено под сеть, а 4 октет свободен под адресацию для хостов. Здесь ничего необычного. Это стандартная маска класса C.
Но вот в чем загвоздка. Например, в вашем офисе 100 компьютеров, и расширяться вы не планируете. Зачем плодить сеть из 250+ адресов, которые вам не нужны?! На помощь приходит разделение на подсети. Это очень удобная вещь. Объясню принцип на примере того же класса C. Как бы вы не хотели, но трогать 3 октета нельзя. Они фиксированы. Но вот 4 октет свободен под хосты, поэтому его можно трогать. Заимствуя биты из хостового куска, вы дробите сеть на n-ое количество подсетей и, соответственно, уменьшаете в ней количество адресов для хостов.
Попробуем это воплотить в реальность. Меняю маску. Заимствую первый бит из хостовой части(то есть 1-ый бит 4-ого октета выставляю в единицу). Получается следующая маска.
Данная маска делит сеть на 2 части. Если до дробления у сети было 256 адресов(от 0 до 255), то после дробления у каждого куска будет по 128 адресов(от 0 до 127 и от 128 до 255).
Теперь посмотрю, что изменится в целом с адресами.
Красным цветом я показал те биты, которые зафиксированы и не могут изменяться. То есть маска ей задает границу. Соответственно биты помеченные черным цветом определены для адресации хостов. Теперь вычислю эту границу. Чтобы определить начало, надо все свободные биты(помеченные черным цветом) обратить в ноль, а для определения конца обратить в единицы. Приступаю.
То есть в четвертом октете меняются все биты, кроме первого. Он жестко фиксирован в рамках этой сети.
Теперь посмотрим на вторую половину сети и вычислим ее адреса. Деление у нас производилось заимствованием первого бита в 4-ом октете, значит он является делителем. Первая половина сети получалась, когда этот бит принимал значение 0, а значит вторая сеть образуется, когда этот бит примет значение 1. Обращаю этот бит в 1 и посмотрю на границы.
Приведу в десятичный вид.
Если вы рассчитали количество бит, отдаваемые под хосты, то количество доступных IP-адресов можно вычислить по формуле
В книге У. Одома по подготовке к CCNA R&S приведена хорошая формула для расчета битов, отдаваемых на подсеть и хосты:
N + S + H = 32, где N — кол-во битов сети (класс A — 8 бит, B — 16 бит, C — 24 бита), S — кол-во заимствованных битов на подсеть (это то, что мы делали выше, когда заимствовали 1 бит из хостовой части), H — кол-во бит отводимых хостам.
Внесу ясность и объясню, как и где применять эти формулы.
Нам выдали сеть 172.16.0.0 и попросили создать 120 подсетей со 180 хостами и записать маску. Приступим.
В качестве шпаргалки, и для быстроты вычисления, я ниже подготовил таблицу степеней двойки.
Двигаемся дальше. Первое главное условие, при использовании классовой адресации — это то, что должна использоваться одна маска для всех подсетей. То есть, если у вас для одной подсети маска 255.255.255.0, то для другой подсети она не может быть 255.255.255.128.
Теперь смотрим на выданную сеть. Путем логических размышлений понимаем, что это адрес класса B. А значит его N (кол-во битов сети) = 16. Ок. Значит на хосты выделено тоже 16 бит. Вспоминаем условия задачи. Нужно создать 120 подсетей. «Откусывать» биты от сетевой части запрещено, значит кусаем от хостовой части.
Теперь нужно взять такое кол-во бит, чтобы хватило для 120 подсетей, однако оставляло достаточное кол-во под биты для хоста. Смотрим на таблицу выше. Если взять 7 бит, то получим 128. 128>120, следовательно попадаем под условие. Если возьмем 6 бит, то получим 64. 64 H = 32 — (N + S) => H = 32 — (16 + 7) = 9. Смотрим на таблицу выше (или возводим 2 в 9 степень в уме) и получаем число 512. Отнимаем 2 (адрес сети и широковещательный адрес) и получаем 510 адресов. Нам нужно 180, а значит под условие мы попадаем причем с большим запасом. В таких случаях вам предоставляется право выбора. Сделать больше подсетей или хостов на подсеть. Объясняю, что это значит. У нас есть 9 бит на хосты. Если мы возьмем 8 бит, то получим число 256. 256 — 2 = 254 адреса. Этот вариант нам тоже подходит. Возьмем 7 бит. Получаем 128. Даже не отнимая 2 адреса, становится понятно, что это меньше 180 => данный вариант отбрасывается сразу. Итого получаем, что минимальное количество для подсети — 7 бит, а для хостов — 8 бит. Поэтому свободный бит можно отдать либо на подсеть, либо на хосты. Маска получается сложением N и S. В нашем случае получаем, если под подсеть отдаем 7 бит, то получаем 23. В десятичном виде маска будет выглядеть 255.255.254.0. А если отдадим под подсеть 8 бит, то получим 24 (или в десятичном виде 255.255.255.0). Иногда бывает, что под задачу существует всего одна маска. Ну и, конечно, могут быть случаи, когда маска не попадает не под какие условия. В этих случаях нужно брать сеть другого класса или доказывать заказчику, что это невозможно.
Думаю теперь понятно, как работала классовая адресация, и как ее рассчитывали. Возможно с первого раза голова не переварит этого, поэтому перечитывайте еще раз и повнимательнее. Как только начнет что-то проясняться, потренируйтесь на задачках, которые я оставлю.
1) Записать маску для проекта: сеть 172.16.0.0. 250 подсетей и 220 хостов.
2) Записать маску для проекта: сеть 10.0.0.0. 2000 подсетей и 1500 хостов.
3) Записать маску для проекта: сеть 192.168.0.0. 4 подсети и 60 хостов.
На этом разговор про классовые сети начну закруглять и подведу итоги. Классовая адресация — это зарождение сегодняшнего интернета, и именно с нее все началось. Поэтому плюсов у нее много, и за это создателям спасибо. Но, как вы могли заметить, у нее было жесткая привязка к одной маске. За счет этого IP-адреса использовались не экономно и расточительно. А в связи с бурным ростом Интернета адресов стало не хватать, и срочно нужно было вносить изменения.
Поняли ведущие умы, что использовать классовые сети не удобно и нужно от них отказываться. Это привело к созданию бесклассовой адресации и маскам переменной длины, о чем мы ниже поговорим. Но перед этим пару слов о видах IP-адресов. Несмотря на то, что переход от классовой адресации к бесклассовой предполагал экономию IP-адресов, на деле эта проблема все равно решалась не полностью. Все упиралось в саму технологию IPv4. Объясню почему. Выше я говорил, что длина IP адреса равна 32 бита. Каждый бит может принимать значение 0 или 1, то есть два значения. Соответственно, чтобы вычислить все комбинации, надо возвести 2 в 32-ую степень. Получаем 4294967296 адресов. Если вычесть отсюда зарезервированные для специальных нужд и прочего, то останется примерно 4.2 млрд. адресов, когда на Земле проживает около 7.3 млрд. человек. Поэтому ведущие умы быстро просекли эту фишку и начали искать решение. Они решили выделить некое адресное пространство, которое будет использоваться только в пределах локальной сети и не будет использоваться в Интернете. Это разделило адреса на 2 лагеря: белые или публичные (англ. public) и серые или частные (англ. private).
Привожу диапазон адресов, которые выделены под локальные сети:
1) 10.0.0.0 — 10.255.255.255 с маской 255.0.0.0 (или кратко 10/8).
2) 172.16.0.0 — 172.31.255.255 с маской 255.240.0.0 (или кратко 172.16/12).
3) 192.168.0.0 — 192.168.255.255 (или кратко 192.168/16).
Если честно, я мало где видел применение адресации 172.16.X.X. Обычно в корпоративной среде всегда используется 10.X.X.X, а в домах/квартирах и мелких офисах 192.168.X.X.
Теперь прошу обратить внимание на очень важную вещь, которую многие путают. Не путайте классовую адресацию и диапазон частных адресов. Очень много людей наступают на эти грабли и свято верят, что диапазон частных адресов 10.0.0.0 — 10.255.255.255 — это диапазон A класса.
Разобрались, что такое частные адреса или private адреса. Но это еще не все. Есть еще список зарезервированных адресов, которые не могут светиться в Интернете. По ним написана целая документация на IETF. Привожу ссылку, где можете прочитать оригинал. Я кратко опишу часто встречающиеся.
1) 0.0.0.0/8 — диапазон адресов, используемый хостами для самоидентификации. Обычно это можно увидеть, когда хост пытается получить IP-адрес от DHCP сервера. Так как изначально у него нету IP-адреса, то в поле источника он вставляет адрес из данного диапазона.
2) 127.0.0.0/8 — loopback или localhost адреса. Это IP-адреса, используемые компьютером, чтобы обратиться к самому себе. Очень полезно для проверки работы TCP/IP. Дело в том, что независимо от наличия соединения с Интернетом или локальной сетью, адреса из этого пула должны всегда пинговаться. Если этого не происходит, значит система накрылась или накрывается медным тазом.
3) 169.254.0.0/16 — link-local address или локальные адреса. Автоматически используются хостами при отсутствии DHCP-сервера или его недоступности. Это позволяет быстро организовать локальную сеть и проверить работу узлов. Однако данный пул адресов не маршрутизируется. Следовательно, выйти в Интернет с них не получится.
4) 224.0.0.0/4 — блок адресов, зарезервированный под многоадресную рассылку или multicast. Для тех, кто хочет побольше узнать про multicast, оставляю ссылку.
Бесклассовая адресация (англ. Classless Inter-Domain Routing или CIDR). Описана была в стандарте RFC1519 в 1993 году. Она отказалась от классовых рамок и фиксированной маски. Адреса делятся только на публичные и зарезервированные, о которых написано выше. Если в классовой адресации маска нарезалась единой для всех подсетей, то в бесклассовой — у каждой подсети может быть своя маска. На теории все хорошо и красиво, но нет ничего лучше, чем практика. Поэтому перехожу к ней и объясню, как можно делить на подсети с разным количеством хостов.
В качестве шпаргалки приведу список всех возможных масок.
Представим ситуацию. Вам выдали сеть 192.168.1.0/24 и поставили следующие условия:
1) Подсеть на 10 адресов для гостей.
2) Подсеть на 42 адреса для сотрудников.
3) Подсеть на 2 адреса для соединения 2 маршрутизаторов.
4) Подсеть на 26 адресов для филиала.
Ок. Данная маска показывает, что в нашем распоряжении находятся 256 адресов. По условию эту сеть надо каким-то образом разделить на 4 подсети. Давайте попробуем. 256 очень хорошо делится на 4, давая в ответе 64. Значит один большой блок в 256 адресов можно поделить на 4 равных блока по 64 адреса в каждом. И все было бы прекрасно, но это порождает большое число пустых адресов. Для сотрудников, которым нужно 42 адреса, ладно, может в дальнейшем компания еще наймет. Но вот подсеть для маршрутизаторов, которая требует всего 2 адреса, оставит 60 пустых адресов. Да, вы можете сказать, что это private адреса, и кому дело до них. А теперь представьте, что это публичные адреса, которые маршрутизируются в Интернете. Их и так мало, а тут мы еще будем их отбрасывать. Это не дело, тем более, когда мы можем гибко управлять адресным пространством. Поэтому возвращаемся к примеру и нарежем подсети так, как нам нужно.
Итак, какие подсети должны быть нарезаны, чтобы вместились все адреса, заданные по условию?!
1) Для 10 хостов, наименьшей подсетью будет блок из 16 адресов.
2) Для 42 хостов, наименьшей подсетью будет блок из 64 адресов.
3) Для 2 хостов, наименьшей подсетью будет блок из 4 адресов.
4) Для 26 хостов, наименьшей подсетью будет блок из 32 адресов.
Я понимаю, что не все могут с первого раза в это вникнуть, и в этом нет ничего страшного. Все люди разные и по-разному воспринимают информацию. Для полноты эффекта покажу деление на картинке.
Вот у нас блок, состоящий из 256 адресов.
После деления на 4 части получается следующая картинка.
Выше мы выяснили, что при таком раскладе адреса используются не рационально. Теперь обратите внимание, как стало выглядеть адресное пространство после нарезки подсетей разной длины.
Как видите, в свободном доступе осталось куча адресов, которые мы в дальнейшем сможем использовать. Можно посчитать точную цифру. 256 — (64 + 32 + 16 + 4) = 140 адресов.
Вот столько адресов мы сэкономили. Двигаемся дальше и ответим на следующие вопросы:
— Какими будут сетевые и широковещательные адреса?
— Какие адреса можно будет назначить хостам?
— Как буду выглядеть маски?
Механизм деления на подсети с разной маской получил название VLSM (от англ. Variable Length Subnet Mask) или маска подсети переменной длины. Дам важный совет! Начинайте адресацию с самой большой подсети. Иначе вы можете попасть на то, что адреса начнут перекрываться. Поэтому сначала планируйте сеть на бумаге. Нарисуйте ее, изобразите в виде фигур, просчитайте вручную или на калькуляторе и только потом переходите настройке в боевых условиях.
Итак, самая большая подсеть состоит из 64 адресов. С нее и начнем. Первый пул адресов будет следующий:
Адрес подсети — 192.168.1.0.
Широковещательный адрес — 192.168.1.63.
Пул адресов для назначения хостам от 192.168.1.1 до 192.168.1.62.
Теперь выбор маски. Тут все просто. Отнимаем от целой сети нужный кусок и полученное число записываем в октет маски. То есть 256 — 64 = 192 => маска 255.255.255.192 или /26.
Адрес подсети — 192.168.1.64.
Широковещательный адрес — 192.168.1.95.
Пул адресов для назначения хостам будет от 192.168.1.65 до 192.168.1.94.
Маска: 256 — 32 = 224 => 255.255.255.224 или /27.
Адрес подсети — 192.168.1.96.
Широковещательный адрес — 192.168.1.111.
Пул адресов для назначения хостам будет от 192.168.1.97 до 192.168.1.110.
Маска: 256 — 16 = 240 => 255.255.255.240 или /28.
Адрес подсети — 192.168.1.112.
Широковещательный адрес — 192.168.1.115.
Разрешенными адресами будут 192.168.1.113 и 192.168.1.114.
Маска: 256 — 4 = 252 => 255.255.255.252 или /30.
Вот таким образом, при помощи VLSM или масок переменной длины, мы экономно создали 4 подсети с нужным количеством адресов в каждой. Думаю это стоит закрепить задачкой для самостоятельного решения.
Разделите сеть 192.168.1.0/24 на 3 разные подсети. Найдите и запишите в каждой подсети ее адреса, широковещательный адрес, пул разрешенных к выдаче адресов и маску. Указываю требуемые размеры подсетей:
1) Подсеть на 120 адресов.
2) Подсеть на 12 адресов.
3) Подсеть на 5 адресов.
1) Адрес подсети — 192.168.1.0.
Широковещательный адрес — 192.168.1.127.
Пул адресов для назначения хостам будет от 192.168.1.1 до 192.168.1.126.
Маска: 256 — 128 = 128 => 255.255.255.128 или /25.
2) Адрес подсети — 192.168.1.128.
Широковещательный адрес — 192.168.1.143.
Пул адресов для назначения хостам будет от 192.168.1.129 до 192.168.1.142.
Маска: 256 — 16 = 240 => 255.255.255.240 или /28.
3) Адрес подсети — 192.168.1.144.
Широковещательный адрес — 192.168.1.151.
Пул адресов для назначения хостам будет от 192.168.1.145 до 192.168.1.150.
Маска: 256 — 8 = 248 => 255.255.255.248 или /29.
Теперь, когда вы знаете, как делить сети на подсети, самое время научиться собирать подсети в одну общую подсеть. Иначе это называется суммированием или summarization. Суммирование чаще всего используется в маршрутизации. Когда у вас в таблице маршрутизатора несколько соседних подсетей, маршрутизация которых проходит через один и тот же интерфейс или адрес. Скорее всего этот процесс лучше объяснять при разборе маршрутизации, но учитывая то, что тема маршрутизации и так большая, то я объясню процесс суммирования в этой статье. Тем более, что суммирование это сплошная математика, а в этой статье мы ею и занимаемся. Ну что же, приступлю.
Представим, что у меня компания состоящая из главного здания и корпусов. Я работаю в главном здании, а в корпусах коллеги. Хоть у меня и главное здание, но в нем всего 4 подсети:
— 192.168.0.0/24
— 192.168.1.0/24
— 192.168.2.0/24
— 192.168.3.0/24
Тут коллеги с соседнего здания очухались и поняли, что у них слетела конфигурация на маршрутизаторе, а бекапов нет. Наизусть они не помнят, какие в главном здании подсети, но помнят, что они находятся рядом друг с другом, и просят прислать одну суммированную. Теперь у меня возникает задача, как их суммировать. Для начала я переведу все подсети в двоичный вид.
Посмотрите внимательно на таблицу. Как видите, у 4 подсетей первые 22 бита одинаковые. Соответственно, если я возьму 192.168.0.0 с маской /22 или 255.255.252.0, то покрою свои 4 подсети. Но обратите внимание на 5 подсеть, которую я специально ввел. Это подсеть 192.168.4.0. 22-ой бит у нее отличается от предыдущих 4-х, а значит выше выбранное не покроет эту подсеть.
Ок. Теперь я отправлю коллегам суммированную подсеть, и, если они все правильно пропишут, то маршрутизация до моих подсетей будет работать без проблем.
Возьмем тот же пример и немного изменим условия. Нас попросили прислать суммарный маршрут для подсетей 192.168.0.0 и 192.168.1.0. Я не поленюсь и создам еще одну таблицу.
Обратите внимание, что у 2 первых подсетей одинаковые не 22 бита, а 23 бита. Это значит, что их можно просуммировать еще компактнее. В принципе работать будет и так, и так. Но как говорилось в одной рекламе: «Если нет разницы — зачем платить больше?». Поэтому старайтесь суммировать, не задевая при этом соседние подсети.
Таким образом, переводя подсети в двоичный формат и находя одинаковые биты, можно их суммировать.
Вообще суммирование полезно применять, когда надо объединить несколько подсетей, расположенных вблизи друг с другом. Это позволит сэкономить ресурсы маршрутизаторов. Однако это не всегда возможно. Просуммировать, например, подсеть 192.168.1.0 и 192.168.15.0, не захватив при этом соседние подсети, невозможно. Поэтому перед суммированием стоит подумать над ее целесообразностью. Поэтому повторюсь еще раз, что начинать какую-либо революцию надо на бумажке. Ну и для закрепления материала оставлю небольшую задачу.
1) 10.3.128.0
2) 10.3.129.0
3) 10.3.130.0
4) 10.3.131.0
Просуммируйте подсети и найдите маску, которая сможет покрыть их, не задевая при этом соседние подсети.