Иногда я спрашивал себя и Гугл: «Почему мне бывает стыдно быть верстальщиком». Ну, знаете, когда не мог на глазок определить, какой передо мной шрифт: open sans с font-weight: bold, или open sans bold с font-weight: normal — либо случайно узнавал, что «ой, забыли тебе сказать, масштаб был не 1920×1080, а 2560×1440».
Обычно ж как — скидывают .psd и крутись как хочешь.
Весной 2015-го, придя в uKit, я узнал о Sketch — и увидел, как шаблоны стали появляться с красивыми и одинаковыми метками размеров относительно друг друга и очень подробным описанием.
Тогда мне захотелось большего. И буквально через несколько месяцев вышел Zeplin 1.0. Это приложение изменило мое представление о верстке в целом — потому что оно по-настоящему делает жизнь верстальщика счастливой.
Что такое Zeplin и зачем он нужен
Это приложение под Mac и Windows с очень быстрой и неглючной веб-версией (альтернатива для Linux), которое сэкономит вам кучу сил, времени и нервов. Особенно при работе в команде — ведь у него есть интеграция со Slack.
Zeplin Tutorial in 15 minutes for web designers and web developers
В связке со Sketch вы можете окончить версионную войну файлов и удобно поддерживать макеты в живом состоянии. Когда сложные экраны не перегружены колоссальным количеством слоев и групп слоев, дизайнеру можно легко и на лету вносить мелкие правки — верстальщик увидит их сразу.
Но главное в Zeplin — он позволяет кликать по любому простому векторному объекту на холсте и смотреть всю доступную информацию о нем.
Ровно ту информацию, которую заложил дизайнер — будь то точный размер холста, точные размеры каждого элемента, точные отступы, тени, толщины линии, прозрачности или CSS-коды эффектов.
Еще одна приятность — работа с контентом. Например, можно кликнуть по тексту на макете, и Zeplin позволит скопировать текст. Также вы можете тегировать контент (холсты) внутри папки с проектом и делать в них пометки.
А еще эта штука идеально подходит для работы на трех мониторах:
Три монитора — меньше альт-табить.
Например: средний монитор всегда с кодом. Большой горизонтальный — отображает страницу и, при необходимости, еще одно окно с кодом. На третьем можно держать отладчик DOM-дерева или несколько окон консоли.
Но ведь.
Да, подобное приложение есть и у фотошопа. Но, как и у всего Ps, его юзабилити кажется чрезмерно громоздким. Плюс есть сложности с определением объектов — и если размеры некоторых элементов худо-бедно показываются, то относительные межэлементные расстояния — нет. А это фатальный недостаток.
Интерфейс того же Adobe Brackets содержит много ненужного и мешает фокусироваться на правильном переносе макета.
К великому счастью, в Zeplin есть поддержку фотошоп-макетов — специальный плагин требует минимума знаний о том, как это лучше экспортировать.
Кстати, в последней версии Ps плагин Zeplin встроен из коробки!
Для чистоты эксперимента скажу, что накладки с распознаванием фотошоп-макетов иногда встречаются и у Zeplin — например, он не всегда аккуратно распознает межстрочные интервалы в больших блоках текста.
Но такие моменты должны быть частью договора с дизайнером. Ведь разбивать большие куски на разные объекты правильнее — хотя бы потому, что так удобнее работать.
Как внедрить это в команду
Расскажу, как мы сделали у себя. У нас как: мой отдел верстальщиков — 4 человека — и равный по власти начальник дизайнеров, у которого толпа ребят в штате и на аутсорсе.
Задача облегчалась тем, что все дизайнеры уже сидели на Sketch.
N.B. Совет — предварительно убедите ваших дизайнеров делать макеты не в фотошопе. Например, наглядно показав им разницу отображения содержимого макетов при увеличении в Zeplin во время работы.
Слева — макет, сделанный в фотошопе. Справа — в скетче. В фотошопном видны следы размытия: вроде мелочь, а неприятно.
Дальше вам потребуется сделать три простых шага.
Шаг 1. Заинтересовать, сказав всем: «Пиксель-перфект — не миф и не утопия, а вполне себе реально при правильном инструментарии».
Шаг 2. Договориться с дизайнерами. Обсудить, что нужно прорисовывать и указывать в макетах, а что нет. Да, если ваш дизайнер все еще использует Photoshop, для загрузки в Zeplin достаточно преобразовать макет в смарт-объект и нажать еще 3 кнопки.
Шаг 3. Раздать верстальщикам инвайты, чтобы они вошли в проект и стали радоваться жизни — им больше не нужно помнить о масштабах и экранных линейках при проверке и разработке макета.
Как c ним работается
1. Открываем макет на одном экране. Набрасываем верстку на втором, просто смотря на макет, — продумываем, что делать, как делать, сколько делать.
При этом вы уже точно знаете, сколько потребуется div-элементов, и как это распарсить под React, JQ или просто лендинг. А значит, остается время прикинуть, что применить нового, чтобы немного вырасти на этой конкретной задаче.
Функционал, который автоматически собирает все встречающиеся цвета в переменные, очень сильно экономит время. Например, если выяснится, что «нужен черный почернее», — достаточно будет просто поменять цвет в одной общей переменной, и он сразу применится ко всем.
3. Дальше разбираемся с версткой и стилями элементов — выбираем элемент в WYSIWYG-режиме на странице, жмем и сразу видим все или почти все, что нужно знать о нем.
Остается поэлементно обрамить верстку в стили. Я обычно иду сверху-вниз — от стилизации контейнеров к внутренним элементам.
Тут Zeplin заметно экономит время. Можно писать стили, просто смотря на макет, и редко отрываясь на использование браузера, чтобы проверить более-менее крупные сущности — не ошибся ли где синтаксически.
Также из приятного — экспорт сразу в готовый CSS, LESS, SASS, SCSS или Stylus. Удобно.
Как-то у меня потерялись буквы Ё и Й
Zeplin 1.0 — это молодое приложение и, по сути, еще находится в бете. А беты без багов не бывает.
Основные проблемы при работе связаны с переносом текста: в процессе он может потерять Й и Ё. Или заменить И на Й на кнопке. Иногда — но это скорее по ошибке дизайнера — внести значок вопроса или набор букв вместо пробела в тексте.
Особая любовь у Zeplin к замене пробелов и буквы И — примеры из разных проектов.
Но даже несмотря на это — копировать тексты одним кликом из макета и вставлять их в нужное место в коде куда быстрее, чем ковырять файлик с текстами где-то в облаке.
Случаются забавные моменты при отображении размеров — но это, опять же, человеческий фактор. Как-то один фриланс-дизайнер напутал с размерностью: он считал, что 1 условная единица это — 1px, а Zeplin — что 1pt.
Но вообще, дело в том, что Zeplin обычно в точности показывает макет, который сделал дизайнер. Так что вы легко можете встретить полпикселя в информации об элементе.
Дробные значения размеров (height: 105.5px) — некий ад перфекциониста.
Есть еще одна очень обидная особенность — нельзя просто в два клика скачать любой выбранный объект. Такая же проблема может возникнуть с картинками.
Конечно, если речь про стандартные иконки, их можно взять из иконочных шрифтов или подключить текстурой из открытых библиотек. А вот если это эксклюзивная картинка, иконка или логотип — тут сначала дизайнер должен в настройках исходника в Sketch указать экспорт конкретного ассета. Да, с фотошопом так, опять же, не получится.
Вот уже второй год, как я снова полюбил верстку. Делитесь своими рецептами и инструментами для получения удовольствия от рабочего процесса.
Задавайте вопросы про Zeplin. Это мировая вещь — на мой взгляд, самое светлое, что случилось между дизайном в клиент-сайдом за последнее время.
- Блог компании uKit Group
- Веб-дизайн
- Работа с векторной графикой
- Usability
Источник: habr.com
Чем Apache Zeppelin лучше Jupyter Notebook для интерактивной аналитики Big Data: 4 ключевых преимущества
В этой статье мы рассмотрим, что такое Apache Zeppelin, как он полезен для интерактивной аналитики и визуализации больших данных (Big Data), а также чем этот инструмент отличается от популярного среди Data Scientist’ов и Python-разработчиков Jupyter Notebook.
Что такое Apache Zeppelin и чем он полезен Data Scientist’у
Начнем с определения: Apache Zeppelin – это интерактивный веб-блокнот (или «ноутбук» от notebook) с открытым исходным кодом, который поддерживает практически все этапы работы с данными в Data Science, от извлечения до визуализации, в т.ч. интерактивный анализ и совместное использование документов. Он интегрирован с Apache Spark, Flink, Hadoop, множеством реляционных и NoSQL-СУБД (Cassandra, HBase, Hive, PostgreSQL, Elasticsearch, Google Big Query, Mysql, MariaDB, Redshift), а также поддерживает различные языки программирования, популярные в области Big Data: Python, PySpark, R, Scala, SQL. Такая многофункциональность обеспечивается за счет интерпретаторов — плагинов для поддержки языка программирования, базы данных или фреймворка.
С точки зрения работы с большими данными, отдельного упоминания заслуживает встроенная интеграция с Apache Spark, что дает общие контексты (SparkContext и SQLContext), загрузку jar-зависимостей из локальной файловой системы или репозитория maven во время выполнения задачи, а также возможность отмены задания и отображение хода его выполнения. Также Цеппелин поддерживает работу с REST-API Apache Spark – Livy, о котором мы подробно писали здесь.
Благодаря интерпретатору Python, Apache Zeppelin предоставляет все возможности этого языка, ориентированные на Data Science, например, специализированные библиотеки (Matplotlib, Conda, Pandas и пр.) для аналитики больших данных и визуализации. Это позволяет автоматически построить круговые, столбчатые и прочие наглядные диаграммы, чтобы визуализировать статистику датасета или результатов исследования. Также в Zeppelin можно создавать интерактивные дэшборды с формами ввода данных, которые будут выглядеть как веб-страницы, чтобы поделиться их URL-адресами для совместной работы. Для многопользовательского режима Zeppelin поддерживает LDAP-авторизацию с настройками доступа [1].
Впрочем, при всех этих достоинствах, на практике можно столкнуться со следующими ограничениями Apache Zeppelin, которые могут рассматриваться как недостатки [2]:
- нестабильная работа под высокой нагрузкой;
- интерактивный веб-интерфейс требует много оперативной памяти;
- отсутствие полного набора возможностей современных специализированных IDE;
- меньшая «зрелость» и популярность по сравнению с Jupyter Notebook.
Тем не менее, Apache Zeppelin завоевывает свою нишу, конкурируя с Jupyter Notebook в некоторых кейсах работы с большими данными. В каких случаях аналитику Big Data или Data Scientist’у следует предпочесть Apache Zeppelin вместо Jupyter Notebook, мы рассмотрим далее.
Apache Zeppelin vs Jupyter Notebook: что и когда выбирать для аналитики Big Data
Прежде всего, отметим, что оба инструмента относятся к open-source и являются веб-блокнотами для разработки и визуализации данных. Однако, Jupyter позиционируется как многоязычная интерактивная вычислительная среда, с поддержкой кода, уравнений, текстов, графиков и интерактивных дэшбордов. Apache Zeppelin не претендует на лавры IDE, хотя и включает некоторые функции для разработки ПО, фокусируясь на возможностях для интерактивного анализа больших данных. Разберем, как оба блокнота отличаются по следующим критериям, важных с точки зрения работы с Big Data [3]:
- безопасность и многопользовательские возможности, которые Jupyter не поддерживает по умолчанию, в отличие от Zeppelin. Кроме того, в Jupyter нет возможности обеспечения конфиденциальности конечных пользователей. Zeppelin позволяет гибко настраивать конфигурации безопасности, включая конфиденциальность программного кода, через LDAP/Active Directory и специально определенные группы безопасности. Он использует только один серверный процесс, аутентифицируя пользователей в настроенной системе, прежде чем разрешить дальнейший доступ, чтобы делиться информацией только с ограниченным кругом лиц с определенными правами.
- визуализация – благодаря возможности использовать разные интерпретаторы в одном блокноте, Zeppelin выигрывает по сравнению с Jupyter, в котором нет параметров построения диаграмм. В Jupyter есть библиотека plotly, которая выводит диаграмму в блокнот, тогда как Zeppelin поддерживает только содержимое Matplotlib – Python-библиотеку построения двумерных графиков, которая просто сохраняет вывод в HTML-файл.
- описание отчетов – оба инструмента поддерживают markdown-разметку, но Zeppelin быстрее создает интерактивные формы и визуализацию результатов. Кроме того, Цеппелин-отчеты более доступны для конечных пользователей и могут быть экспортированы в формат CSV или TSV. Zeppelin позволяет скрыть код, предоставляя читаемые интерактивные отчеты конечным пользователям.
- кластерная интеграция –Цеппелин является частью экосистемы Apache Hadoop и хорошо интегрируется со Spark, Pig, Hive и другими ее компонентами.
- удобство разработки –в отличие от Jupyter, Zeppelin позволяет комбинировать несколько параграфов в одну строку, однако, редактор кода и параграфов в Jupyter кажутся более эффективными, поскольку имеют больше быстрых комбинаций (т.н. «горячих клавиш») и функцию автозаполнения.
- производственная эксплуатация (production) –поскольку Zeppelin зависит от емкости кластера, то при недостатке ресурсов или большом количестве пользователей (более 10), возможны сбои и зависания, которые не характерны для Jupyter.
Подводя итоги, отметим, что Apache Zeppelin – отличный инструмент для аналитики больших данных в экосистеме Hadoop. Он упрощает разработку Spark-приложений и ориентирован на корпоративных пользователей, обеспечивая интеграцию с LDAP, управление разрешениями и интерактивную визуализацию при достаточном количестве ресурсов кластера. Поэтому неслучайно, отечественный разработчик Big Data решений для корпоративных целей, компания Аренадата Софтвер, включила Apache Zeppelin в свой новый продукт – Arenadata Analytic Workspace (AAW), который представляет собой самообслуживаемый сервис (Self-Service) DataScience и BI [4]. Подробнее о нем мы поговорим в следующей статье.
В свою очередь, Jupyter Notebook требует меньше накладных расходов на настройку и создание разработанных шаблонов благодаря автономному характеру. А благодаря большому количеству IDE-функций, расширений и поддержке фреймворков машинного обучения (Machine Learning) и других методов искусственного интеллекта, он стал весьма популярным среди индивидуальных Data Science-исследователей [3].
Как на практике эффективно использовать Apache Zeppelin со Spark и другими компонентами экосистемы Hadoop для аналитики больших данных в проектах цифровизации своего бизнеса, а также государственных и муниципальных предприятий, вы узнаете на специализированных курсах в нашем лицензированном учебном центре обучения и повышения квалификации для разработчиков, менеджеров, архитекторов, инженеров, администраторов, Data Scientist’ов и аналитиков Big Data в Москве:
- Построение эффективных конвейеров обработки данных с Apache Airflow и Arenadata Hadoop
- Анализ данных с Apache Spark
- Использование Apache Zeppelin
Источники
Источник: bigdataschool.ru
Zeplin 2.0 — инструмент для совместной работы дизайнеров и верстальщиков
Zeplin — незаменимый инструмент для команды верстальщиков и дизайнеров. Вы можете экспортировать проекты в Zeplin из таких программ, как Sketch, Adobe Photohop, Adobe XD и Figma.
Вышел zeplin 2.0. Пробежимся по тому, что он уже умеет и что нового добавилось.
Давайте откроем Sketch файл и экспортируем другую монтажную область (art board).
Вы можете перетащить область или выбрать несколько монтажных областей и использовать плагин для экспорта выбранных областей в zeplin (или горячими клавишами Command Control + E)
После этих действий вы перейдете к панели zeplin для выбора проекта, в который вы хотите экспортировать выбранные монтажные области
И теперь новый экран добавлен в проект и мои товарищи по команде могут его увидеть.
Верстальщики теперь могут выбирать отдельные слои на макете для просмотра детальной информации.
Сюда входят иконки:
информация о шрифте:
удобный просмотр размеров между различными слоями в макете:
В этом примере, вы можете заметить, что zeplin генерирует в правой колонке различные значения. Например, для Swift, потому что это проект для iOS.
Zeplin также генерирует адаптирует различные значения макета и для Android, Web и даже таких фреймворка React Native.
Zeplin сгенерировал фрагмент кода из выбранного слоя. Это делается с помощью расширений. Расширения с открытым исходным кодом и делаются разработчиками, которые используют Zeplin.
Вы можете добавить себе те, которые нужны конкретно вам или создать свое собственное расширение.
Давайте отключим пока Swift и код для веба
и включим расширение для генерации кода React Native
Вы можете заметить, что некоторые слои, например, как этот, являются частью компонента Album header
Давайте перейдем в него
Это компоненты проекта, то есть общие элементы пользовательского интерфейса
Символы, используемые во всем вашем проекте.
Подобно экранам, вы можете кликнуть по ним и получить подробную информацию
И даже увидеть на каких экранах они используются
Рядом с компонентами, вы также можете сохранять и упорядочивать цвета и стили проекта.
Они также могут быть экспортированы из инструментов проектирования, таких как Sketch, Photoshop, Figma, Adobe XD.
Так. Давайте вернемся к экрану.
Если вы настроили ссылки на прототипы в своем инструменте проектирования, то Zeplin их тоже получит.
Итак, если вы нажмете и будете удерживать клавишу Shift, то увидите эти ссылки
Кликнув по первой, мы перейдем на экран Browse
Когда вы экспортируете одну и ту же монтажную область в течение некоторого времени с новыми изменениями, Zeplin сохранит их в соответствии с версией прямо у себя. Кликните по иконке песочных часов в нижней левой части, чтобы посмотреть историю изменений.
Вы можете добавлять комментарии, поясняя изменения для команды
И наконец, вы можете кликать на слои проекта для добавления заметок. Можно использовать их, чтобы оставить отзыв или запросить, какие то технические детали.
Источник: pcvector.net