Плитки сайтов в панеле быстрого доступа Windows 10 и 8.

Всем привет! Сегодня я хочу затронуть тему плиток сайта для операционных систем Windows 8 и Windows 10, и рассказать вам как это сделать для вашего сайта.

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

Плитки сайта для Windows

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

Но вернёмся к плиткам сайта. Если Вы ещё не поняли о чём идёт речь, подкину два изображения, объясняющие что это такое. В десятой винде если кликнуть по иконке Windows в панеле задачь или просто на клавиатуре нажать на кнопку (win), откроется панель быстрого доступа:

А в Windows 8 это вообще стартовая страница:

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

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

Как сделать плитки сайта

Делается это просто и легко. Для этого необходимо сделать 4 изображения и 1 файл с названием browserconfig.xml, в котором будет небольшой код настроек плиток сайта.

Основная задача подготовить изображения - всё остальное "проще паренной репы".

Изображения для плиток сайта

Плитки сайта отображаются в четырёх размерах 70х70рх, 150х150рх, 310х150px и 310х310рх . Для каждого размера можно задать отдельное изображение.

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

Корпорация майкрософт по поводу размеров изображений для плиток даёт следующие инструкции:

Размер плитки	Стандартные размеры плитки	Минимальный размер изображения	Рекомендуемый размер изображения
Маленькая	70 x 70	56 x 56	128 x 128
Средняя	150 x 150	120 x 120	270 x 270
Широкая	310 x 150	248 x 120	558 x 270
Большая	310 x 310	248 x 248	558 x 558

Так же, разработчики виндовс дают такое примечание:

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

В общем, нужно создать 4 изображения стандартного или рекомендуемого оконщиками рзмера, которые будут выводиться как плитки сайта. Если изображения готовы, то больше чем 90% работы выполнено.

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

Файл browserconfig.xml

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

Файл browserconfig.xml небольшой в содержании. Вот весь его код:

#f5f5f5

Ниже можно скачать данный файл:

Скачать файл browserconfig.xml

Разархивируйте скачанную папку и откройте лежащий в ней файл browserconfig.xml при помощи редактора кода (VSCode, Notepad++ и т.п.), текстового редактора или просто обычным блокнотом виндовс, после чего в нём нужно исправить значения согласно тому, где у вас будут находится изображения и их названия.

Теперь что касается настроек файла browserconfig.xml

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

В первой строке код:

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

Как это работает.

К примеру через некоторое время Вы решили сменить изображения для плиток. Заменив изображения вам так же необходимо поменять версию и изменить "1.0" на "1.1", "1.2", "1.3"...."1.11"..... "2.1", "2.2" и т.д.

Увеличивая цифру - вы обновляете версию. При этом когда пользователь зайдёт на ваш сайт через браузер Edge или Explorer 11, у него автоматически сменится изображение плитки на новое, без какого либо его участия.

Думаю с этим понятно.

Следующее - код в блоке tile . В нём прописаны пути к изображениям плиток. Путь указывается в двойных кавычках после src=

Изображения для плиток можно поместить в любом месте на сайте. Так же и имена изображениям можно давать любые, необязательно брать название из приведённого мною кода. Главное потом в коде указать правильно путь к изображению. И ещё, необязательно хранить изображения в одной папке - можно раскидать их по разным местам и указать это в путях к ним.

И последняя настройка - цвет фона плитки. За это отвечает данная часть кода:

#f5f5f5

Можно заменить указанный мною серебристый цвет #f5f5f5 на зелёный #009900, или красный #f90000. Как вам пожелается...

На этом все настройки заканчиваются.

Подключаем плитки сайта

После того как изображения для плиток размещены на сайте, а в файле browserconfig.xml сделаны все настройки, нужно поместить этот XML-файл с именем browserconfig.xml в корневую папку вашего сайта .

Вот и всё!!! Плитки подключены. Браузеры Edge и Internet Explorer 11 автоматически читают файл, когда пользователь закрепляет сайт.

Добавляются плитки сайта в панель быстрого доступа осуществляется через родные для windows браузеры EDGE или Internet Explorer 11 и выше. Для этого необходимо открыть сайт в данном браузере Дополнительно (три точки справа вверху) и выбрать Закрепить эту страницу на начальном экране:

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

На этом всё Удачного вам сайтостроения!!!

В этой статье речь пойдет о том, как добавить плитки в ОС Windows 8.1 или как удалить лишние плитки в интерфейсе Modern или Metro. Не каждый пользователь пользуется интерфейсом Modern. Я к примеру уже месяц не могу к нему привыкнуть, а может просто не хочу, так как привык к родной семерке. Но возможно кто то и использует плитки Windows 8. Вот собственно на такого пользователя и рассчитана эта статья.

В новом интерфейсе расположено очень много ненужных плиток, которые запросто можно убрать и на это место добавить ярлыки нужных программ. Пользоваться встроенными программами Виндовс 8 как то не очень удобно. Почему то возникает ощущение, что они какие то недоразвитые или специально так сделаны, что то вроде ребуса, который нужно сначала разгадать а уже потом использовать. Хочу привести пример из собственного опыта использования плитки проигрывателя музыки. Значит запустил я mp3 файл и вроде как заиграла музыка, но вот как отключить её я так и не понял. Не найдя кнопки отключения музыки (ёпт, что это за проигрыватель в котором нет кнопок play или stop, можт он от силы мысли работает, блин об этом я не думал, надо будет попробовать), решил воспользоваться самым надежным способом и тупо перезагрузить компьютер. И что бы Вы думали? Да да да! Я чуть со стула не R30;.лся, музыка как ни в чем не бывало продолжала играть, она даже и не подумала отключиться. Не помню как я её остановил (видимо был в трансовом состоянии), но после этого решил больше не пользоваться встроенными плитко-приложениями а установить обычные программы вроде AIMP и ACDSee и чтоб было удобнее их запускать нужно было настроить плитки.

Итак, рассмотрим как убрать ненужные плитки. Открываем «рабочий стол» (блин, меня бесит название «Metro» или «Modern», буду называть по старинке R12; рабочий стол (ведь он же рабочий?)), и выбираем первую «квадратную жертву» которую будем убирать. Ага, вот! Убираем камеру. У меня для просмотра фотографий стоит ACDSee (или можно установить FastStone, есть много разных просмотрщиков). Для этого нажимаем по нужной нам плитке правой кнопкой мышки

В низу должна появиться вот такая незамысловатая панелька. Находим значок с названием «Открепить от начального экрана» и жмем на него левой кнопкой мыши.

Вот собственно и всё! Плитка удалена. Видим пустое место на месте камеры. Кстати туда можно будет добавить любую нужную Вам плитку.

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

И в открывшейся панели нажимаем левой кнопкой мышки на значок с заколкой (забыл как правильно называется эта фигня)

Видим что блокнот убрался с «Начального экрана» (вот оказывается как правильно по русски называется интерфейс «Modern»)

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

Для этого на начальном экране нажимаем на стрелочку вниз, где находятся все программы (конечно их можно запускать и с нижнего экрана, но это не очень удобно, поэтому будем переносить их на верхний экран)

Тут мы видим все программы установленные на нашем компьютере. Выбираем нужную. Я выбрал попавшуюся наугад «Eset Nod32» (хотя он мне там нафиг не нужен, но что ни сделаешь ради примера). Жмем на нем правой мышкой и в открывшейся внизу панели нажимаем левой мышкой на значке с надписью «Закрепить на начальном экране»

Смотрим на начальный экран и видим квадрат-ярлык Eset Smart Security.

Таким же макаром добавляем другие программы. Я выбрал ярлык Яндекс браузера. Также жмем на нем правой мышкой

И в нижней панели выбираем R12; «Закрепить на начальном экране» (надпись говорить сама за себя)

Смотрим на начальный экран и видим добавленную нами плитку

Вот в таком темпе и настраиваем начальный экран.

Так же плитки свободно можно передвигать с одного места на другое просто зацепив его мышкой и переставить в любое другое место.

Если у Вас уже не хватает места, можно настраивать их размер. К примеру если Вы часто пользуетесь одними программами и реже другими, то можно сделать их больше или меньше. Для этого опять жмем правой кнопкой мыши на нужной нам плитке и в нижней панели нажимаем на значок «Изменить размер»

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

Видим, что она стала в два раза меньше. Таким макаром можно разместить на начальном экране хрен знает сколько плиток.

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

Тем, кто пропустил Windows 8, придется привыкать ко многому, особенно к плиткам. В этой статье мы расскажем о том, как их добавлять, удалять и изменять.

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

Пользователям Windows 8.1 плитки уже знакомы, а вот новичкам, которые пропустили Windows 8 и обновляются до с Windows 7, Vista или даже XP, придется привыкать.

Вот как выглядит новое меню «Пуск». Слева – папки, настройки и ссылки. Справа – плитки, в основном для приложений из Магазина Windows.

Нажмите правой кнопкой мыши на любой плитке – и увидите список опций. Самая первая из них – «Открепить от начального экрана» (Unpin from Start). Она, со всей очевидностью, удаляет плитку из меню «Пуск».

Если хочется закрепить приложение в меню «Пуск», нажмите кнопку «Все приложения» (All apps), нажмите на нужном приложении правой кнопкой мыши (или прикоснитесь к нему и удерживайте) и выберите опцию «Закрепить на начальном экране» (Pin to Start).

Помимо меню «Пуск», приложение можно также закрепить на панели задач (и открепить оттуда) или вовсе удалить.

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

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

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

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

Нажмите кнопку в нижнем правом углу – и получите доступ к другим опциям, включая изменение размера, включение или отключение динамической плитки, закрепление/открепление от панели задач и удаление (под заголовком «Еще» (more options)).

Возможность закреплять приложения на панели задач означает, что доступ к любимым приложениям из Магазина можно получить даже не открывая всякий раз меню «Пуск».

Чтобы удалить приложение из панели задач, нажмите на нем правой кнопкой мыши и открепите или используйте опцию «Открепить от панели задач» (Unpin from taskbar) в меню «Пуск».

Последняя опция, доступная для плиток, – «Удалить» (Uninstall). Она вызывает диалоговое окно с просьбой подтвердить, что вы действительно готовы удалить приложение и связанные с ним данные.

С этим разобрались. Теперь надо понять, как располагать плитки в меню «Пуск». Можно нажать на плитке левой кнопкой мыши или коснуться ее и удерживать, а затем перетащить в нужное место.

Можно дать каждой группе плиток определенное название – для этого нажмите на значке из двух горизонтальных черточек в верхнем правом углу группы. Например, если у вас установлено много игр, можно собрать их все в одну группу и назвать ее «Игры». Или можно сгруппировать Office и другие похожие приложения под заголовком «Продуктивность».

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

Переименование групп плиток

1. Если хотите, вы можете переименовать группу, выполнивши следующие шаги:

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

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

Перестановка плиток

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

• Нажмите кнопку «Пуск ».
• Нажмите на плитку, удерживайте и перетащите ее на новое место.
• Отпустите плитку.

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

Изменение размеров плиток

1. По умолчанию плитки установлены разных размеров. Вы можете изменить их размер, чтобы они были меньше, и вы могли больше поместиться в меню «Пуск » или больше, чтобы легче и быстрее находить наиболее часто используемое приложение.

• Нажмите кнопку «Пуск».
• Щелкните правой кнопкой мыши на плитке. В появившемся всплывающем меню выберите «Изменить размер ».
• В появившемся боковом меню выберите нужный вам размер: «Малый », «Средний » или «Широкий ».

2. Также плитки можно удалять: щелкните правой кнопкой мыши на плитке и выберите «Открепить от начального экрана» и плитка удалится.

Видео: Настройка меню Пуск в Windows 10