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

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

В этой статье будет идти речь о JavaScript-библиотеке под названием Chart.js, которая использует HTML-элемент canvas для создания диаграмм на странице. После краткого обзора библиотеки в статье будут представлены два примера использования Chart.js.

Что такое Chart.js

Chart.js является JavaScript-библиотекой, с помощью которой можно создавать на странице различные типы диаграмм; при этом используются возможности HTML5-элемента canvas. Если речь зашла об элементе canvas, то это означает, что необходимо использовать polyfill для обеспечения поддержки этого элемента в старых версиях браузеров. В качестве примера одного из таких polyfill можно привести ExplorerCanvas, находящийся по указанной ссылке.

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

К примеру, если на конкретной странице нужно создать только диаграмму линейного типа (bar chart), то можно подключить лишь ядро библиотеки Chart.js и модуль, с помощью которого создаются диаграммы подобного типа; таким образом, будет уменьшен общий размер библиотеки Chart.js и увеличена скорость загрузки сайта в целом.

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

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

В следующем разделе статьи будет рассмотрен процесс получения и подключения библиотеки Chart.js в текущий проект.

Начало работы с Chart.js

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

$ bower install chartjs --save

Будучи скачанной, библиотека подключается на страницу как обычный JavaScript-файл. В приведенном ниже примере производится подключение Chart.js со всеми ее модулями по-умолчанию:

<script src="path/to/Chart.js"></script>

В приведенном примере обратите внимание на заглавную букву в имени подключаемой библиотеки Chart.js. Это не совсем обычный способ, когда имя подключаемой библиотеки начинается с заглавной буквы. Поэтому, если после подключения Chart.js на странице отображается 404-я ошибка, то знайте, в чем заключается данная ошибка.

После подключения библиотека Chart.js предоставляет все встроенные в нее методы через глобальную переменную с именем Chart. Теперь все готово для того, чтобы создать нашу первую диаграмму.

Для этого необходимо инициализировать новый Chart-объект путем передачи ему 2d-контекста элемента canvas, который будет использоваться для создания в нем диаграммы. Чтобы понять основную идею этого шага, представим себе, что на странице имеется следующий элемент:

<canvas id="skills"></canvas>

Если нужно в этом элементе нарисовать круговую диаграмму (pie chart), то пишется следующее выражение:

var context = document.getElementById(skills).getContext(2d);
var skillsChart = new Chart(context).Pie(data);

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

Теперь, когда нам известны основные принципы подключения Chart.js, пора переходить к конкретным примерам. Для краткости изложения материала я буду использовать в нижеследующих примерах полную версию библиотеки Chart.js; но при желании читатель может найти все необходимые модули по отдельности, в директории “src”.

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

<script src="../src/Chart.Core.js"></script>
<script src="../src/Chart.Doughnut.js"></script>

Создание круговой диаграммы

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

Как уже можно было догадаться, первым шагом будет создание нового элемента canvas, в котором и будет прорисовываться круговая диаграмма:

<canvas id="skills" width="300" height="300"></canvas>

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

Однако, для простоты и легкости понимания эти объекты будут обладать минимумом свойств - значение, которое будет отображено в диаграмме; цвет сектора на круговой диаграмме; надпись для сектора:

var pieData = [
  {
    value: 25,
    label: Java,
    color: #811bd6
  },
  {
    value: 10,
    label: Scala,
    color: #9cbaba
  },
  {
    value: 35,
    label: HTML,
    color: #6ae128
  }
]

В завершение, как было показано в предыдущем разделе статьи, необходимо получить 2d-контекст конкретного canvas-элемента и инициализировать новый Chart-объект:

var context = document.getElementById(skills).getContext(2d);
var skillsChart = new Chart(context).Pie(pieData);

Ниже показан примерный результат того, что можно получить с помощью библиотеки Chart.js:

Pie Chart

Результатом приведенного выше кода будет круговая диаграмма (pie chart), код которого можно увидеть на странице примера - Pie Chart JSFiddle.

Создание столбцовой диаграммы

В следующем примере будет создана столбцовая (bar chart) диаграмма, на которой будет отображена динамика изменения количества клиентов гипотетической компании в зависимости от их национальности, за 2010 год и за 2014 год. Также, как и в предыдущем примере, для этой цели будет использоваться элемент canvas, размещенный на странице в виде такого примера:

<canvas id="clients" width="500" height="400"></canvas>

Затем создаем данные для нашей вымышленной компании:

var barData = {
  labels: [Italy,UK,USA,Germany,France,Japan],
  datasets: [
    {
      label: 2010 customers #,
      fillColor: #382765,
      data: [2500,1902,1041,610,1245,952]
    },
    {
      label: 2014 customers #,
      fillColor: #7bc225,
      data: [3104,1689,1318,589,1199,1436]
    }
  ]
}

Как видно из примера, для создаваемой столбцовой диаграммы необходимо представить объект, содержащий свойство с именем labels, внутри которого размещены предметы сравнения - то, что будет сравниваться между собой. В нашем случае этими предметами являются названия стран: Italy, UK, USA, Germany, France, Japan.

В дополнение к этому, нам необходимо предоставить еще одно свойство, по имени datasets, в котором размещены наборы объектов, каждый из которых содержит данные для сравнения. В нашем случае будет производиться сравнение между 2010 и 2014 годом, поэтому нам потребуется только два объекта.

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

В результате, код для создания столбцовой диаграммы (bar chart) должен быть таким:

var context = document.getElementById(clients).getContext(2d);
var clientsChart = new Chart(context).Bar(barData);

Ниже показан примерный результат того, что можно получить с помощью библиотеки Chart.js:

Bar Chart

Результатом созданного нами выше кода будет столбцовая диаграмма (bar chart), исходный код которого можно посмотреть по этой ссылке - Bar Chart JSFiddle.

Заключение

В этой статье вы познакомились с Chart.js, JavaScript-библиотекой для быстрого и удобного создания красивых диаграмм. Как вы могли заметить, использование библиотеки не представляет каких-либо трудностей; мною были продемонстрированы примеры ее использования.

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

Знакомы ли были вы с этой библиотекой ранее и использовали ли ее в своей практике? Как часто и в каких проектах вы ее использовали? Если нет, то какую другую библиотеку подобного типа вы использовали?

Оригинал статьи размещен здесь - Creating Beautiful Charts with Chart.js.


В июне 2014 года была написана статья, посвященная прекрасному инструменту для извлечения кода из PSD-макета - проекту компании Adobe под названием Project Parfait. Это был бесплатный online-инструмент, цель которого состояла в создании процесса преобразования PSD-макетов в код для команд разработчиков, использующих Photoshop как основной инструмент при создании различных дизайнов.

Компания Adobe произвела реинкарнацию проекта Project Parfait, добавив в него поддержку бесплатного дискового пространства и сервиса обмена Creative Cloud Assets, а также переименовав его в Extract:

Adobe Extract

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

Ниже представлен пример работы в Extract.

Загрузка или синхронизация файлов

Использование Extract начинается с загрузки или синхронизации PSD-файлов в личном дисковом online-пространстве Creative Cloud, размер которого составляет как минимум 2GB и бесплатно предоставляется любому пользователю, зарегистрированному в Creative Cloud.

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

Creative Cloud

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

Первым делом, необходимо скачать приложение и установить его в системе, а затем авторизоваться в нем с помощью личного Adobe ID. Открыв приложение, необходимо в нем перейти на вкладку Assets, а внутри этой вкладки перейти в еще одну вкладку Files. Должно получиться примерно следующее:

Creative Cloud Application

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

Когда операция загрузки на сервер Creative Cloud будет успешно завершена, на миниатюре PSD-файла появиться маленькая зеленая галочка, как в данном случае:

Creative Cloud Upload

Если теперь снова вернуться назад, в web-интерфейс Creative Cloud, то обнаружим там миниатюру только что загруженного PSD-файла, готового для открытия в Extract:

Creative Cloud Thumbnail

Работа в Extract

Для того, чтобы открыть загруженный в Creative Cloud файл Photoshop, нужно щелкнуть мышью по миниатюре этого файла, затем снова щелкнуть мышью на этот раз по вкладке Extract (на изображении ниже она помечена как Preview). PSD-файл тотчас же отобразится в окне приложения Extract, готовый для извлечения из него CSS-кода:

Extract Tab

Процесс извлечения кода из PSD-файла в Extract остался неизменным, каким он был в приложении Project Parfait, о чем было подробно описано в предыдущей статье “Конвертирование файлов Photoshop с помощью Project Parfait”. Однако, с того момента в Extract были добавлены несколько новых возможностей, которые будут рассмотрены ниже.

Новые возможности Extract

Некоторые из новых возможностей приложения Extract были унаследованы им от Project Parfait спустя некоторое время после опубликования ранее упоминавшейся статьи-обзора “Конвертирование файлов Photoshop с помощью Project Parfait”. Другие же новшества появились в Extract благодаря его интеграции с сервисом Creative Cloud.

Прозрачность тени

Ранее тени на CSS генерировались без поддержки прозрачности, значениями в формате HEX. Теперь имеется поддержка прозрачности теней в сгенерированном CSS-коде, значениями в формате RGBA:

Прозрачность тени

Настройки шрифта

Теперь нет необходимости работать только с пикселями (px) в качестве размера шрифтов в сгенерированном CSS-коде. В Extract добавлена поддержка единиц измерения em и rem для шрифтов:

Единицы измерения шрифта

Также добавлена возможность установки базового шрифта для всей страницы в целом. Размеры шрифтов всех остальных элементов страницы будут расчитываться на основе этого базового размера, в тех единицах измерения (em или rem), которые были выбраны ранее:

Базовый размер шрифта

Препроцессоры и миксины

В Extract была добавлена поддержка препроцессоров Sass(SCSS) и LESS совместно с библиотеками миксинов для этих препроцессоров. Таким образом, теперь можно выбрать - генерировать код не в чистом CSS, а в SCSS + Bourbon или LESS + LESSHat. Такая возможность дает большие преимущества для тех веб-разработчиков, которые используют какой-либо из этих препроцессоров:

Поддержка препроцессоров

Я надеюсь, что в дальнейшем в Extract будет добавлена поддержка препроцессора Stylus (поклонником которого являюсь), совместно с библиотеками миксинов под этот препроцессор - Nib и Kuoto Swiss. Этого было бы более чем достаточно в плане поддержки препроцессоров в Extract.

Примечание переводчика: на момент перевода данной статьи в Extract добавлена поддержка препроцессора Stylus и его библиотеки миксинов Nib; поддержка библиотеки Kuoto Swiss отсутствует; помимо этого, добавлена поддержка супер-популярной библиотеки Compass под препроцессор Sass.

Действия

В результате интеграции сервиса Creative Cloud в Extract добавилось новое меню Actions, в котором можно выбрать действия над редактируемым PSD-файлом: скачать файл, переименовать файл, архивировать файл или переместить файл:

Действия с файлом

Общий доступ

Также благодаря интеграции Creative Cloud в Extract появилась возможность предоставления общего доступа к файлам с помощью меню Share, откуда можно выложить выполненную работу прямо в своем портфолио на Behance.

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

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

Общий доступ

Timeline

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

У вас нет никакой необходимости быть платным подписчиком, чтобы иметь возможность использовать приложение Extract; поэтому, даже если вы являетесь платным подписчиком программы Photoshop, вы можете свободно отправлять свои дизайнерские наработки другим веб-разработчикам для кодинга. С другой стороны, веб-разработчик, который получил от вас ссылку на вашу наработку, совсем необязательно должен быть платным подписчиком, чтобы открыть эту ссылку. И даже больше - этот разработчик может вообще не иметь учетной записи в Creative Cloud, чтобы пользоваться приложением Extract.

Я приглашаю всех читателей этой статьи воспользоваться сервисом Adobe Extract и высказать свои пожелания по поводу использования этого ресурса.


Вступление переводчика: приложения Project Parfait на момент перевода данной статьи уже не существует. Продолжателем и правоприемником этого проекта является приложение Adobe Extract. Зачем же была переведена данная статья? Все просто - здесь подробно описан процесс извлечения CSS-кода, текста и изображений точно так, как это обстоит в приложении Extract. Другими словами, читая данную статью о Project Parfait, вы учитесь работать в Extract.

Project Parfait - это новый продукт компании Adobe, на данный момент имеющий версию beta. С помощью него можно открыть в браузере любой файл формата PSD для того, чтобы извлечь из него такие составляющие, как текст, изображения или наборы CSS-правил. На момент написания статьи Project Parfait работает только в браузере Chrome, но компания Adobe планирует расширить его кросс-браузерную совместимость со всеми остальными браузерами по мере продвижения разработки Project Parfait.

Загрузка PSD в Project Parfait

Задача открыть PSD файл в Project Parfait чрезвычайно проста. Для этого достаточно перейти по ссылке “https://projectparfait.adobe.com/” и кликнуть мышью на большой синей кнопке Upload Your Own PSD, которая размещается в правом верхнем углу страницы:

Загрузка PSD в Project Parfait

Затем нужно войти под своей учетной записью Adobe ID и перетащить (drag’n’drop) PSD-файл на пустую панель, после чего загрузка файла начнется автоматически:

Drag and Drop PSD

После того, как загрузка PSD-файла на сервер будет закончена, достаточно кликнуть мышью на миниатюре загруженного файла для того, чтобы он открылся в Project Parfait:

Открытие файла в Project Parfait

Извлечение CSS правил

Для того, чтобы сгенерировать набор CSS-правил, определяющих любой элемент дизайна страницы, достаточно выбрать этот элемент щелчком мыши. Соответствующий CSS-код автоматически отобразится в правой боковой панели, в поле CSS Inspector. Из этой панели можно скопировать часть сгенерированного кода; или же весь код целиком, нажав кнопку Copy All:

CSS Inspector

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

Копирование CSS кода

Извлечение текста

Синее всплывающее окно, о котором говорилось выше, может послужить еще одной задаче - извлечения текста из PSD-макета. Для этого нужно воспользоваться ссылкой Copy Text внутри этого окна:

Копирование текста

Извлечение изображений

Извлечение картинок из PSD-макета с помощью Project Parfait также очень просто. Для начала нужно выбрать на макете изображение, которое будет экспортировано. Если изображение состоит из нескольких слоев, то необходимо нажать и удерживать клавишу Shift для того, чтобы выбрать все нужные слои. Затем щелчком мыши активируем большую подчеркнутую стрелочку в всплывающем окне. Отобразится диалоговое окно Save As, в котором можно задать имя для экспортируемого изображения, формат файла и качество изображения:

Экспортирование изображения

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

Изображение во вкладке Assets

Недоработки Project Parfait

Проект Project Parfait совсем свежий - на момент написания статьи ему исполнился только месяц, поэтому в вопросе генерации CSS правил существуют некоторые недоработки и ряд CSS-свойств, которые этот продукт не может сгенерировать. Однако, число сторонников проекта Project Parfait на его форуме растет; как растет и колличество обновлений для этого продукта. Поэтому я уверен, что команда Adobe активно работает в этом направлении и в скором времени стоит ожидать значительных улучшений Project Parfait.

Ниже представлен список недоработок Project Parfait.

  • значения прозрачности, которые задаются для всего слоя в целом, как правило устанавливаются с помощью соответствующего значения фонового цвета слоя, в RGBA формате; альфа-канал фонового цвета используется для задания прозрачности; при экспортировании всего элемента целиком, вместе с границами, тенями и так далее, это значение прозрачности будет применено к ним вместо того отдельного значения, которое было установлено в макете для каждой из составляющих данного элемента
  • невозможно определить наличие множественных теней у элемента макета; если выбран элемент, у которого есть внешние и внутренние тени одновременно, то в Project Parfait они будут проигнорированы
  • не поддерживается прозрачность теней для элемента дизайна; вместо значений в RGBA формате Project Parfait выдает тень с непрозрачными цветами в HEX-формате
  • нет никакого способа извлечь изображение в качестве pattern’а, которое является фоновым изображением для макета; нет даже возможности определить границы этого pattern’а, чтобы экспортировать его как простое изображение
  • границы, размещенные внутри слоя, не определяются Project Parfait; однако, границы, заданные через Live Shape Properties, могут быть легко экспортированы
  • градиенты, сгенерированные не через CSS-свойство background-color, необходимо дополнять fallback’ом для браузеров, которые не поддерживают CSS-градиенты

Что сейчас доступно в Project Parfait

Работа с текстом

В Project Parfait прекрасно реализована работа с текстом PSD-макета.

Задача определения и генерирования целочисленных значений, таких как 100, 300, 900 для определения насыщенности шрифтов, отлично работает. Это означает, что если в PSD-макете, созданном в Photoshop, для обозначения насыщенности шрифтов были применены такие специальные слова, как “Thin”, “Light”, “Black” и так далее, то при генерации CSS-правил в Project Parfait эти обозначения будут заменены на более правильные целочисленные значения.

В Project Parfait также прекрасно реализована работа с интерлиньяжем (line height), значение которого вычисляется как относительная величина на основе размера шрифта выбранного элемента макета.

В дополнение к вышесказанному, если в строке текста имеются фрагменты, отличающиеся от основного теста, то Project Parfait прекрасно их распознает и для каждого из таких фрагментов сформирует дополнительный набор CSS-правил, со специальным комментарием /* Inline Style */:

Текст с различными фрагментами

Работа со слоями

Иногда случается так, что слои макета организованы таким образом, что расположены один над другим; или же расположены так близко друг у другу, что становится трудно выбрать один из них для дальнейшей работы с ним. В Project Parfait все слои макета вынесены в отдельную вкладку Layers, где можно легко и удобно работать с ними:

Слои в отдельной вкладке

Цветовая палитра макета

Как только PSD-макет загружается на сервер, Project Parfait производит его анализ и определяется все цвета, которые использовались дизайнером в его работе. Цвета группируются в цветовую палитру, которая помещается в разделе Colors правой панели инструментов. Помимо этого, при выборе любого элемента на макете, если хотя бы один цвет из созданной Project Parfait цветовой палитры использовался в этом элементе, то данный цвет автоматически подсвечивается в разделе Colors:

Цветовая палитра макета

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

Работа с градиентами

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

Работа с градиентами

Для разработчиков, использующих препроцессоры, Project Parfait предоставляет удобный способ скопировать сгенерированные CSS-правила и использовать их как подмешивания (mixins) при разработке дизайна.

Общая информация о шрифтах

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

Общая информация о шрифтах

Это означает, что как только PSD-макет был загружен в Project Parfait, уже имеется полная информация о том, какие шрифты и с каким параметрами необходимо использовать в дальнейшем при разработке дизайна. Также имеется возможность экспортировать все размеры шрифтов в виде переменных, котрые могут буть использованы в препроцессорах.

Общая информация о разметке

Когда при разработке дизайна работа выполняется непосредственно в программе Photoshop, то получение информации о ширине, высоте, дистанции, положении каждого из элементов дизайна - задача не и легких. По другому дело обстоит в Project Parfait.

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

Размеры и координаты элемента

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

Расстояние между элементами

Project Parfait бесплатен

На данный момент проект Project Parfait является бесплатным для использования. Достаточно войти в систему под своим личным Adobe ID и все готово!

Если вы являетесь дизайнером, который ищет улучшений для своего рабочего процесса; или вы разработчик, который стремится как можно проще и быстрее преобразовать PSD-макет с код, в обоих случая Project Parfait может послужить образцом нового подхода к веб-разработке.


В библиотеке jQuery имется возможность использования области применения селекторов, с помощью контекста.

Что такое контекст в jQuery? Давайте рассмотрим “стандартную” запись кода на JavaScript(jQuery):

$(li).addClass(someClass);

Видим в этом коде, что функции $() передается один аргумент - в данном случае это селектор li. В качестве селектора может быть фрагмент разметки, имя класса или имя идентификатора. Но - в 90% случаев функции $() передается один аргумент.

Однако это не является правилом. И функции $() можно передавать не один, а два аргумента.

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

То есть, запись вида:

$(li).addClass(someClass);

… говорит - найти все элементы li во всем дереве DOM. Другими словами, отсутствие второго аргумента подразумевает область применения селекторов - все дерево DOM.

А вот запись вида:

$(li,#primo).addClass(block__item--first);

… говорит, что нужно найти все селекторы li внутри элемента с идентификатором #primo. Другими словами, идентификатор #primo ограничивает область применения (или область видимости - как больше нравиться) селектора li.

Можно слегка усложнить область видимости селекторов - указать не одну область, а две области:

$(li,#primo,#tetro).addClass(block__item--first);

… в этом случае будут возвращены только те элементы li, которые находятся внутри блока с идентификатором #primo и внутри блока с идентификатором #tetro. Другими словами, были заданы две области видимости для селектора li.

В качестве второго аргумента (контекста) функции $() может быть передан не только селектор, имя класса или имя идентификатора (как в рассмотренном выше случае).

Контекстом может быть результат работы другой функции! То есть, можно одной функции выборки передавать результат выборки другой функции!

Например, таким гипотетическим образом:

$(a,$(#primo > li)).addClass(block__link--decor);

На этом все.


Достаточно интересный (для меня) метод выборки элементов из коллекции - метод .slice(). Хотя чего-то эдакого в этом методе нет совсем.

Просто этот метод позволяет установить диапазон (область), по которому (внутри которой) будут выбираться элементы.

Синтаксис метода .slice() таков:

.slice(start,[end])

Возвращает элементы с индексами от start до end, если последний задан или до конца, если параметр end опущен.

Элементы с индексом start включаются в результат, а end - нет (т.е. .slice(3,5) вернет элементы, идущие под индексом 3 и 4, элемент с индексом 5 включен не будет).

Кроме этого, параметры могут быть заданы в форме отрицательных чисел, в таком случае, отсчет элементов идет с конца набора: -1 – последний элемент, -2 – предпоследний элемент и т. д.

Примеры использования:

$("div").slice(3) - вернет все div-элементы, начиная с четвертого (с индексами 3, 4, …) $("div").slice(3, 5) - вернет div-элементы с индексами 3 и 4 $("div").slice(-4, -2) - вернет div-элементы, идущие четвертым и третьим с конца $("div").slice(-2) - вернет предпоследний и последний div-элементы на странице

Приведу пример HTML-разметки:

<ul class="test">
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
</ul>

Такой javascript-код:

$(function(){
  var list = $(.test);
  list.find(li).slice(2,10).addClass(test__link--sliced);
});

… выполнит следующее:

  • создаст переменную list и поместит в нее результат выборки - $('.test')
  • найдет в переменной list все элементы li - .find('li')
  • в найденной коллекции определит диапазон элементов li с индексами с 2-го по 10-й - .slice(2,10)
  • добавит к элементам li этого диапазона класс - .addClass('test__link--sliced')
  • но не добавит класс .test__link--sliced к элементу li с индексом 10!

Результатом выполнения показанного выше js-кода будет такая HTML-разметка:

<ul class="test">
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
</ul>

Обратите внимание, что нумерация элементов начинается с 0 - это индекс элемента! Элемент с последним индексом не включен в выборку!

Еще один пример, более краткий и наглядный.

Начальный HTML-код:

<ul class="bad">
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
</ul>

JavaScript-код:

$(function(){
  var bad = $(.bad);
  bad.find(li).slice(2,4).addClass(bad__item--sliced);
});

Результат:

<ul class="bad">
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item bad__item--sliced"></li>
  <li class="bad__item bad__item--sliced"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
</ul>

На этом все. Материал частично основан на ресурсе jquery.page2page и не претендует на оригинальность.