Получение частных данных не всегда означает взлом - иногда они опубликованы в общем доступе. Знание настроек Google и немного смекалки позволят найти массу интересного - от номеров кредиток до документов ФБР.

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

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

Ищем файлы

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

Ограничить поиск по файлам определенного вида в Google можно с помощью двух операторов: filetype и ext . Первый задает формат, который поисковик определил по заголовку файла, второй - расширение файла, независимо от его внутреннего содержимого. При поиске в обоих случаях нужно указывать лишь расширение. Изначально оператор ext было удобно использовать в тех случаях, когда специфические признаки формата у файла отсутствовали (например, для поиска конфигурационных файлов ini и cfg, внутри которых может быть все что угодно). Сейчас алгоритмы Google изменились, и видимой разницы между операторами нет - результаты в большинстве случаев выходят одинаковые.

Фильтруем выдачу

По умолчанию слова и вообще любые введенные символы Google ищет по всем файлам на проиндексированных страницах. Ограничить область поиска можно по домену верхнего уровня, конкретному сайту или по месту расположения искомой последовательности в самих файлах. Для первых двух вариантов используется оператор site, после которого вводится имя домена или выбранного сайта. В третьем случае целый набор операторов позволяет искать информацию в служебных полях и метаданных. Например, allinurl отыщет заданное в теле самих ссылок, allinanchor - в тексте, снабженном тегом , allintitle - в заголовках страниц, allintext - в теле страниц.

Для каждого оператора есть облегченная версия с более коротким названием (без приставки all). Разница в том, что allinurl отыщет ссылки со всеми словами, а inurl - только с первым из них. Второе и последующие слова из запроса могут встречаться на веб-страницах где угодно. Оператор inurl тоже имеет отличия от другого схожего по смыслу - site . Первый также позволяет находить любую последовательность символов в ссылке на искомый документ (например, /cgi-bin/), что широко используется для поиска компонентов с известными уязвимостями.

Попробуем на практике. Берем фильтр allintext и делаем так, чтобы запрос выдал список номеров и проверочных кодов кредиток, срок действия которых истечет только через два года (или когда их владельцам надоест кормить всех подряд).

Allintext: card number expiration date /2017 cvv

Когда читаешь в новостях, что юный хакер «взломал серверы» Пентагона или NASA, украв секретные сведения, то в большинстве случаев речь идет именно о такой элементарной технике использования Google. Предположим, нас интересует список сотрудников NASA и их контактные данные. Наверняка такой перечень есть в электронном виде. Для удобства или по недосмотру он может лежать и на самом сайте организации. Логично, что в этом случае на него не будет ссылок, поскольку предназначен он для внутреннего использования. Какие слова могут быть в таком файле? Как минимум - поле «адрес». Проверить все эти предположения проще простого.

Inurl:nasa.gov filetype:xlsx "address"

Пользуемся бюрократией

Подобные находки - приятная мелочь. По-настоящему же солидный улов обеспечивает более детальное знание операторов Google для веб-мастеров, самой Сети и особенностей структуры искомого. Зная детали, можно легко отфильтровать выдачу и уточнить свойства нужных файлов, чтобы в остатке получить действительно ценные данные. Забавно, что здесь на помощь приходит бюрократия. Она плодит типовые формулировки, по которым удобно искать случайно просочившиеся в Сеть секретные сведения.

Например, обязательный в канцелярии министерства обороны США штамп Distribution statement означает стандартизированные ограничения на распространение документа. Литерой A отмечаются публичные релизы, в которых нет ничего секретного; B - предназначенные только для внутреннего использования, C - строго конфиденциальные и так далее до F. Отдельно стоит литера X, которой отмечены особо ценные сведения, представляющие государственную тайну высшего уровня. Пускай такие документы ищут те, кому это положено делать по долгу службы, а мы ограничимся файлами с литерой С. Согласно директиве DoDI 5230.24, такая маркировка присваивается документам, содержащим описание критически важных технологий, попадающих под экспортный контроль. Обнаружить столь тщательно охраняемые сведения можно на сайтах в домене верхнего уровня.mil, выделенного для армии США.

"DISTRIBUTION STATEMENT C" inurl:navy.mil

Очень удобно, что в домене.mil собраны только сайты из ведомства МО США и его контрактных организаций. Поисковая выдача с ограничением по домену получается исключительно чистой, а заголовки - говорящими сами за себя. Искать подобным образом российские секреты практически бесполезно: в доменах.ru и.рф царит хаос, да и названия многих систем вооружения звучат как ботанические (ПП «Кипарис», САУ «Акация») или вовсе сказочные (ТОС «Буратино»).

Внимательно изучив любой документ с сайта в домене.mil, можно увидеть и другие маркеры для уточнения поиска. Например, отсылку к экспортным ограничениям «Sec 2751», по которой также удобно искать интересную техническую информацию. Время от времени ее изымают с официальных сайтов, где она однажды засветилась, поэтому, если в поисковой выдаче не удается перейти по интересной ссылке, воспользуйся кешем Гугла (оператор cache) или сайтом Internet Archive.

Забираемся в облака

Помимо случайно рассекреченных документов правительственных ведомств, в кеше Гугла временами всплывают ссылки на личные файлы из Dropbox и других сервисов хранения данных, которые создают «приватные» ссылки на публично опубликованные данные. С альтернативными и самодельными сервисами еще хуже. Например, следующий запрос находит данные всех клиентов Verizon, у которых на роутере установлен и активно используется FTP-сервер.

Allinurl:ftp:// verizon.net

Таких умников сейчас нашлось больше сорока тысяч, а весной 2015-го их было на порядок больше. Вместо Verizon.net можно подставить имя любого известного провайдера, и чем он будет известнее, тем крупнее может быть улов. Через встроенный FTP-сервер видно файлы на подключенном к маршрутизатору внешнем накопителе. Обычно это NAS для удаленной работы, персональное облако или какая-нибудь пиринговая качалка файлов. Все содержимое таких носителей оказывается проиндексировано Google и другими поисковиками, поэтому получить доступ к хранящимся на внешних дисках файлам можно по прямой ссылке.

Подсматриваем конфиги

До повальной миграции в облака в качестве удаленных хранилищ рулили простые FTP-серверы, в которых тоже хватало уязвимостей. Многие из них актуальны до сих пор. Например, у популярной программы WS_FTP Professional данные о конфигурации, пользовательских аккаунтах и паролях хранятся в файле ws_ftp.ini . Его просто найти и прочитать, поскольку все записи сохраняются в текстовом формате, а пароли шифруются алгоритмом Triple DES после минимальной обфускации. В большинстве версий достаточно просто отбросить первый байт.

Расшифровать такие пароли легко с помощью утилиты WS_FTP Password Decryptor или бесплатного веб-сервиса .

Говоря о взломе произвольного сайта, обычно подразумевают получение пароля из логов и бэкапов конфигурационных файлов CMS или приложений для электронной коммерции. Если знаешь их типовую структуру, то легко сможешь указать ключевые слова. Строки, подобные встречающимся в ws_ftp.ini , крайне распространены. Например, в Drupal и PrestaShop обязательно есть идентификатор пользователя (UID) и соответствующий ему пароль (pwd), а хранится вся информация в файлах с расширением.inc. Искать их можно следующим образом:

"pwd=" "UID=" ext:inc

Раскрываем пароли от СУБД

В конфигурационных файлах SQL-серверов имена и адреса электронной почты пользователей хранятся в открытом виде, а вместо паролей записаны их хеши MD5. Расшифровать их, строго говоря, невозможно, однако можно найти соответствие среди известных пар хеш - пароль.

До сих пор встречаются СУБД, в которых не используется даже хеширование паролей. Конфигурационные файлы любой из них можно просто посмотреть в браузере.

Intext:DB_PASSWORD filetype:env

С появлением на серверах Windows место конфигурационных файлов отчасти занял реестр. Искать по его веткам можно точно таким же образом, используя reg в качестве типа файла. Например, вот так:

Filetype:reg HKEY_CURRENT_USER "Password"=

Не забываем про очевидное

Иногда добраться до закрытой информации удается с помощью случайно открытых и попавших в поле зрения Google данных. Идеальный вариант - найти список паролей в каком-нибудь распространенном формате. Хранить сведения аккаунтов в текстовом файле, документе Word или электронной таблице Excel могут только отчаянные люди, но как раз их всегда хватает.

Filetype:xls inurl:password

С одной стороны, есть масса средств для предотвращения подобных инцидентов. Необходимо указывать адекватные права доступа в htaccess, патчить CMS, не использовать левые скрипты и закрывать прочие дыры. Существует также файл со списком исключений robots.txt, запрещающий поисковикам индексировать указанные в нем файлы и каталоги. С другой стороны, если структура robots.txt на каком-то сервере отличается от стандартной, то сразу становится видно, что на нем пытаются скрыть.

Список каталогов и файлов на любом сайте предваряется стандартной надписью index of. Поскольку для служебных целей она должна встречаться в заголовке, то имеет смысл ограничить ее поиск оператором intitle . Интересные вещи находятся в каталогах /admin/, /personal/, /etc/ и даже /secret/.

Следим за обновлениями

Актуальность тут крайне важна: старые уязвимости закрывают очень медленно, но Google и его поисковая выдача меняются постоянно. Есть разница даже между фильтром «за последнюю секунду» (&tbs=qdr:s в конце урла запроса) и «в реальном времени» (&tbs=qdr:1).

Временной интервал даты последнего обновления файла у Google тоже указывается неявно. Через графический веб-интерфейс можно выбрать один из типовых периодов (час, день, неделя и так далее) либо задать диапазон дат, но такой способ не годится для автоматизации.

По виду адресной строки можно догадаться только о способе ограничить вывод результатов с помощью конструкции &tbs=qdr: . Буква y после нее задает лимит в один год (&tbs=qdr:y), m показывает результаты за последний месяц, w - за неделю, d - за прошедший день, h - за последний час, n - за минуту, а s - за секунду. Самые свежие результаты, только что ставшие известными Google, находится при помощи фильтра &tbs=qdr:1 .

Если требуется написать хитрый скрипт, то будет полезно знать, что диапазон дат задается в Google в юлианском формате через оператор daterange . Например, вот так можно найти список документов PDF со словом confidential, загруженных c 1 января по 1 июля 2015 года.

Confidential filetype:pdf daterange:2457024-2457205

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

Таргетируемся и снова фильтруем

Помимо указания дополнительных операторов в поисковом запросе их можно отправлять прямо в теле ссылки. Например, уточнению filetype:pdf соответствует конструкция as_filetype=pdf . Таким образом удобно задавать любые уточнения. Допустим, выдача результатов только из Республики Гондурас задается добавлением в поисковый URL конструкции cr=countryHN , а только из города Бобруйск - gcs=Bobruisk . В разделе для разработчиков можно найти полный список .

Средства автоматизации Google призваны облегчить жизнь, но часто добавляют проблем. Например, по IP пользователя через WHOIS определяется его город. На основании этой информации в Google не только балансируется нагрузка между серверами, но и меняются результаты поисковой выдачи. В зависимости от региона при одном и том же запросе на первую страницу попадут разные результаты, а часть из них может вовсе оказаться скрытой. Почувствовать себя космополитом и искать информацию из любой страны поможет ее двухбуквенный код после директивы gl=country . Например, код Нидерландов - NL, а Ватикану и Северной Корее в Google свой код не положен.

Часто поисковая выдача оказывается замусоренной даже после использования нескольких продвинутых фильтров. В таком случае легко уточнить запрос, добавив к нему несколько слов-исключений (перед каждым из них ставится знак минус). Например, со словом Personal часто употребляются banking , names и tutorial . Поэтому более чистые поисковые результаты покажет не хрестоматийный пример запроса, а уточненный:

Intitle:"Index of /Personal/" -names -tutorial -banking

Пример напоследок

Искушенный хакер отличается тем, что обеспечивает себя всем необходимым самостоятельно. Например, VPN - штука удобная, но либо дорогая, либо временная и с ограничениями. Оформлять подписку для себя одного слишком накладно. Хорошо, что есть групповые подписки, а с помощью Google легко стать частью какой-нибудь группы. Для этого достаточно найти файл конфигурации Cisco VPN, у которого довольно нестандартное расширение PCF и узнаваемый путь: Program Files\Cisco Systems\VPN Client\Profiles . Один запрос, и ты вливаешься, к примеру, в дружный коллектив Боннского университета.

Filetype:pcf vpn OR Group

INFO Google находит конфигурационные файлы с паролями, но многие из них записаны в зашифрованном виде или заменены хешами. Если видишь строки фиксированной длины, то сразу ищи сервис расшифровки.

Пароли хранятся в зашифрованном виде, но Морис Массар уже написал программу для их расшифровки и предоставляет ее бесплатно через thecampusgeeks.com .

При помощи Google выполняются сотни разных типов атак и тестов на проникновение. Есть множество вариантов, затрагивающих популярные программы, основные форматы баз данных, многочисленные уязвимости PHP, облаков и так далее. Если точно представлять то, что ищешь, это сильно упростит получение нужной информации (особенно той, которую не планировали делать всеобщим достоянием). Не Shodan единый питает интересными идеями, но всякая база проиндексированных сетевых ресурсов!

Часто на сайтах можно встретить версию для печати той или иной страницы . Многие думают, что это что-то встроенное в сам браузер или что это делается очень просто. На самом деле, это совсем не так. Версия для печати - это обычная страница , которую Вам нужно самостоятельно сделать.

Вы можете посмотреть на версию для печати у этой статьи. Фактически, что нужно отображать там? Название статьи, раздел, категория, автор, сам текст и дата. Всё это и выведено на эту страницу. Нужны ли меню, форма поиска, различные блоки? Не думаю, поэтому их и нет.

Так же убедитесь, что ширина версии для печати не превосходит 650px , иначе браузер может порезать края.

Итак, Вы уже поняли, что версию для печати Вам надо создавать самостоятельно, выводя ровно то, что нужно пользователю. Теперь о том, как это сделать.

Есть 2 варианта : создать отдельную страницу и создать отдельный файл стилей. Первый вариант, думаю, понятен. Создаёте ещё одну страницу с версией для печати и на основной странице даёте ссылку на эту печатную версию. Пользователь по ней переходит и через "Файл"->"Печать" он её распечатает.

Второй вариант подразумевает создание отдельной таблицы стилей, где Вы скроете все лишние блоки (через display: none; ) и поставите соответствующие размеры у выводимого контента. Дальше такой файл стилей подключается следующим образом:

Теперь если пользователь захочет распечатать эту страницу, то распечатается не то, что он видит, а то, что прописано в print.css . Фактически, пользователь видит страницу в одном виде, а принтер в совсем другом.

Вот таким образом создаётся версия для печати любой страницы сайта.

Многие пользователи глобальной сети Интернет даже не подозревают, что Web является многофункциональной средой, предусматривающей различные способы предоставления информации. В данном случае имеется в виду не мультимедиа – аудио и видео данные, широко распространенные на сегодняшний день, а реальные источники, посредством которых люди черпают информацию из Web пространства. Львиная доля пользователей Интернета для этих целей использует экран, который может быть как отдельным устройством (монитор ПК), так и неотъемлемой частью мобильного устройства с доступом к сети. Учитывая успешное развитие компьютерных технологий и доступность как стационарных, так и портативных компьютеров и всевозможных электронных гаджетов, можно с уверенностью сказать, что на сегодняшний день монитор является самым популярным средством просмотра веб-страниц.

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

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

Создание связей.

Существует несколько способов импорта содержимого внешних таблиц стилей CSS в html документ и определения необходимых правил непосредственно в файле исходного кода страницы.

Мета тег .

Наиболее распространенный и привычный вариант – использование мета тега , в котором предусмотрен атрибут media , позволяющий определить устройство, для которого выполняется форматирование документа с помощью указанного CSS файла. Вот пример:

Приведенный пример подключает CSS файл print_stylesheet.css , предназначенный для форматирования документа при выводе на принтер (media="print" ). То есть для всех других случаев представления веб-страницы (отличных от распечатанного варианта) CSS правила, определенные в файле print_stylesheet.css не учитываться. Спецификацией CSS определено десять допустимых значений для атрибута media , предусмотренных для различных устройств и способов представления Web информации: all , aural , braille , embossed , handheld , print , projection , screen ,tty и tv . В данной статье мы не будем рассматривать все значения, а только определяющие печатное устройство. Но следует также обратить внимание на значение all , которое устанавливается по умолчанию для атрибута media в том случае, если явно не указано другое. Кроме того, если определенный CSS файл предназначен для форматирования страницы при выводе на несколько типов устройств одновременно, то соответствующие им ключевые слова можно указывать в одной строке, разделяя их запятой:

Команда импорта CSS.

Для подключения внешнего CSS файла можно также использовать ключевое слово @media . В определяемом в данном случае правиле можно указывать несколько видов носителей, для которых предназначено форматирование. При этом синтаксис допускает два варианта написания команды:

@import url("styles/stylesheet.css") print, projection;
или
@import "styles/stylesheet.css" print, projection;

Как видно из примера особых различий у допустимых вариантов нет. В одном случае применяется директива url , а второй предусматривает написание пути к требуемому файлу CSS без нее. Приведенное в качестве примера правило предусматривает использование файла stylesheet.css , находящегося в папке styles , который предназначен для форматирования документа для устройств с постраничным выводом информации (print — принтеры, projection — слайд-проекторы и подобные им устройства).

Непосредственно в html документе веб-страницы.

Для этого используется CSS правило @media , в рамках которого указываются свойства форматирования документа и необходимые значения для них. Непосредственно за ключевым словом @media определяется один или несколько типов носителей (через запятую), для которых выполняется форматирование:

@media print, projection {
body {font-size: 12pt; line-height: 110%; background: white;}
}

@media screen {
body {font-size: medium; line-height: 2em; background: silver;}
}

Как можно догадаться, в примере, в рамках первого правила @media описаны CSS свойства для рабочей области документа ( ), предназначенные для его отображения на устройствах с постраничным выводом информации (print, projection ). А последнее правило определяет внешний вид страницы отображаемой на экране (screen ).

Рекомендации по форматированию версии документа для печати.

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

• Измените цветовую схему, используемую для отображения страницы на экране.

  Если, при выводе на экран документа используется какое-либо фоновое изображение или просто фоновая заливка, а также если вы применяете цветной шрифт, отличный от стандартного варианта (черного), то при создании CSS файла для печати нужно отменить это форматирование. Распечатываемая страница должна выглядеть как можно проще – белый фон и черный шрифт. Многие пользователи для распечатки веб-документов используют чёрно-белый режим печати. К тому же, при распечатывании страницы с насыщенной цветовой схемой значительно повышается расход чернил или тонера.

• Измените тип используемого шрифта.

  В оформлении текста большинства веб-страниц, предназначенных для чтения онлайн применяют рубленые шрифты — sans serif (без засечек), так как они считаются более удобными при чтении с экрана монитора. Но при перенесении страницы на бумагу, ситуация меняется и здесь более подходящими будут шрифты с засечками — serif , для которых характерны небольшие декоративные элементы (засечки) на окончаниях каждой буквы. Считается, что именно засечки способствуют направлению взгляда пользователя в нужном направлении – по тексту. Поэтому, большие объемы текста должны быть оформлены шрифтом с засечками (Times New Roman , Georgia , Palatino и другие).

• Обратите внимание на размер шрифта.

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

• Выделите, используемые на странице ссылки.

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

• Удалите лишние изображения.

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

• Уберите элементы навигации.

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

• Удалите ненужную рекламу.

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

• Удалите все анимированные изображения.

  Интерактивные графические элементы, управляемые при помощи скриптов, а также анимированные Flash изображения, как правило, распечатываются некорректно, а в отдельных случаях дефекты их печати («сползание») могут повлиять на качество отображения текста, что совсем неприемлемо.

• Авторская информация.

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

• Используйте полный URL адрес вашего сайта.

  Включение полного URL адреса распечатываемой страницы в нижней, заключительной ее части является очень важным моментом. Это позволит пользователям быстро вернуться на нее и воспользоваться какой-либо ссылкой, ведущей на другую страницу, содержащую расширенную информацию по рассматриваемому вопросу или с другой целью. В любом случае, это способствует повторному посещению вашего ресурса пользователем. К тому же, при дальнейшем размножении распечатанной страницы (при помощи фотокопий, например), о вашем сайте узнают больше людей.

• Включите информацию об авторских правах.

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

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

Post Views: 330

Сегодня вас ждёт заметка из серии советов по дизайну. И дизайну не графическому, а дизайну интерфейса. Думаю, многие из вас хоть раз распечатывали страницу сайта прямо из браузера. Последовательность обычно такая: нажать Ctrl+P, ждать минуту, потом догадаться вставить бумагу в принтер, снова нажать Ctrl+P, удивиться, зачем было печатать столько баннеров, счётчики и главное меню. Нужна-то была всего лишь карта проезда и контакты.

Некоторые дизайнеры решают этот вопрос так: для каждой страницы соаздаётся отдельная версия для печати. Чаще всего это документ, в который не вставляются баннеры, меню и остальные лишние для печати элементы страницы.

Зачем делать отдельную версию

Если страница большая, то возможен вариант, когда она не вмещается на А4 и распечатается только до половины, а остальная часть будет на втором листе. Убирая лишние блоки перед печатью, мы сэкономим место на бумаге, краску в принтере и нервные клетки.

Кроме того, разное разрешение экранов пользователей не позволит нам знать, как именно распечатается тот или иной элемент. Поэтому я бы советовал убирать всё лишнее и быть уверенными, что все распечатки будут одинаковыми.

Как указать, что печатать?

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

Таким образом в печать уйдёт то, что находится в области контента. Всем элементам, которые вы хотите спрятать при печати, присваивайте свой класс, например «no-print».

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

img { display: none !important; }

Этим кодом мы скроем все баннеры, которые будут встречаться в любом месте на странице. Таким же образом нужно сделать невидимыми остальные элементы.

No-print { display: none !important; }

Применение на практике

Для того, чтобы файл print.css обрабатывался только во время отправки на печать, нужно указать его в таким образом:

Распечатать эту страницу

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

В котором он указал, что их страницы детального заказа непригодны к использованию в напечатанном виде.

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

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

Оптимизация веб-страниц для печати важна потому, что печатая страницы мы делаем сайт максимально доступным, независимо от среды. Мы не должны делать предположений о наших пользователях и их поведении. Люди продолжают печатать веб-страницы. Подумайте о статьях, записях в блогах, рецептах, контактной информации, сайтах с картами или объектами недвижимости. Кто-нибудь когда-нибудь обязательно попытается распечатать одну из ваших страниц.

Я забросил домашние принтеры очень давно, так как мне всегда казалось, что они ломаются после 10 минут работы. Но не все такие, как я. - Хейдон Пикеринг (Inclusive Design Patterns)

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

1. Подключение стилей для печати

Лучшим способом подключения стилей для печати является объявление директивы @media в вашем CSS.

Body { font-size: 18px; } @media print { /* print styles go here */ body { font-size: 28px; } }

Альтернативно вы можете подключить стили в HTML, но это потребует дополнительного запроса HTTP.

2. Тестирование

Вам не надо печатать страницу каждый раз, когда вы внесли небольшое изменение в стили. В зависимости от браузера, вы можете экспортировать страницу в PDF, использовать предварительный просмотр печати или проводить отладку непосредственно в браузере.

Для отладки стилей для печати в Firefox откройте панель разработки (Shift + F2 или меню Tools > Web Developer > Developer Toolbar), введите в поле ввода media emulate print и нажмите enter . Активная вкладка до перезагрузки будет работать так, как будто типом медиа является print .

Эмуляция стилей для печати в Firefox

В Chrome откройте инструменты разработчика (CMD + Opt + I (macOS) или Ctrl + Shift + I (Windows) или меню View > Developer > Developer Tools) и вывести консоль, открыть панель рендеринга и в меню Emulate CSS Media выбрать Print.

Эмуляция стилей для печати в Chrome

3. Абсолютные единицы измерения

Абсолютные единицы измерения это плохо на экране, но отлично для печати. В стилях для печати их использование совершенно безопасно и даже рекомендовано использовать такие единицы как cm , mm , in , pt или pc .

Section { margin-bottom: 2cm; }

4. Специфические правила для страниц

Можно задать свойства, специфичные для печатной страницы, такие как ее размеры, ориентация и отступы с помощью директивы @page . Это очень удобно, если вы хотите, чтобы у всех страниц были определенные отступы.

@media print { @page { margin: 1cm; } }

Директива @page это часть спецификации Paged Media Module , в которой есть такие замечательные вещи, как возможность выбрать первую печатаемую страницу или пустые страницы, позиционировать элементы в углу страницы и многое другое . Это можно использовать даже для печати книг .

5. Управление разрывами страниц

Так как печатные страницы, в отличие от веб-страниц, не являются бесконечными, контент будет разбиваться между страницами. У нас есть 5 свойств для управления тем, как это происходит.

Разрыв страницы перед элементом.

Если мы хотим, чтобы элемент всегда был в начале страницы, мы можем задать принудительный разрыв страницы с помощью правила page-break-before .

Section { page-break-before: always; }

Разрыв страницы после элемента.

Правило page-break-after позволяет нам форсировать или запрещать разрывы страниц после элемента.

H2 { page-break-after: always; }

Разрыв страницы внутри элемента

Это свойство удобно, если вам надо избежать разрыва страницы внутри элемента.

Ul { page-break-inside: avoid; }

Вдовы и сироты (висячие строки)

Иногда вам не нужен контроль над разрывом страницы, но важен контроль над тем, сколько строчек будет выведено на текущей, а сколько на следующей странице. Например, если последняя строка параграфа не помещается на текущей странице, на следующую страницу она будет перенесена вместе с предпоследней. Это потому, что соответствующее свойство widows по умолчанию равно 2. Мы можем изменить его.

P { widows: 4; }

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

P { orphans: 3; }

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

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

6. Сброс стилей

Имеет смысл сбросить для печати некоторые стили типа background-color , box-shadow и color .

*, *:before, *:after, *:first-letter, p:first-line, div:first-line, blockquote:first-line, li:first-line { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }

Стили для печати это одно из тех немногих исключений, когда использование ключевого слова!important вполне нормально.

7. Удаление необязательного контента

Чтобы избежать излишней траты чернил, вы должны удалить ненужное - оформительские элементы, рекламу, навигацию и т.п. с помощью свойства display: none .

Вы, в принципе, можете показать только основной контент и спрятать все остальное:

Body > *:not(main) { display: none; }

8. Печать адресов ссылок

A:after { content: " (" attr(href) ")"; }

Конечно, так будут показано все: относительные ссылки, абсолютные ссылки, якоря и прочее. Следующий вариант будет работать лучше:

A:not():after { content: " (" attr(href) ")"; }

Смотрится безумно, я знаю. Эти строчки работают так: выводится значение атрибута href рядом с любой ссылкой, у которой он есть, если он начинается с http , но не ведет на наш mywebsite.com .

9. Печать расшифровок аббревиатур

Аббревиатуры должны оборачиваться элементом с указанием расшифровки в атрибуте title . Имеет смысл вывести это на печать.

Abbr:after { content: " (" attr(title) ")"; }

10. Печать фона

Обычно браузеры не печатают фоновый цвет и фоновые изображения, если вы прямо не укажете им. Есть нестандартизированное свойство print-color-adjust , позволяющее переписать настройки по умолчанию в некоторых браузерах.

Header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

11. Медиазапросы

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

@media screen and (min-width: 48em) { /* screen only */ }

Вы спросите, почему? Потому что правила CSS применяются только при выполнении обоих условий: min-width равен 48em , media-type - screen . Если избавиться от ключевого слова screen , то медиазапрос будет учитывать только значение min-width .

@media (min-width: 48em) { /* all media types */ }

12. Печать карт

Текущие версии Firefox и Chrome способны печатать карты, а вот Safari нет. Некоторые сервисы предоставляют статические карты , которые можно печатать вместо оригинала.

Map { width: 400px; height: 300px; background-image: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh=true"); -webkit-print-color-adjust: exact; print-color-adjust: exact; }

13. QR-коды Дополнение 2: Gutenberg

Если вы ищете фреймворк, то вам может понравиться Gutenberg , делающий оптимизацию страниц немного проще.

Дополнение 3: Hartija

Это еще один фреймворк для создания стилей для печати от