Рубрика «svg»

Дизайн–система Acronis. Часть вторая. Иконки, SVG шрифты, Gulp - 1

Меня зовут Сергей, и я все еще работаю старшим дизайнером в компании Acronis. Мы продолжаем оптимизировать работу отдела дизайна продуктов для бизнеса и все больше интегрируемся в процессы на стороне front-end разработки.

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

moscowcss №5 в офисе Туту.ру

В конце октября в офисе Туту.ру прошла очередная встреча по фронтенду в Москве moscowcss. На митапе выступили три докладчика: Игорь Лесневский из дизайн-бюро «Зебра» рассказал о WebP, фронтендер Туту.ру Артем Нечунаев поделился знаниями об адаптивном SVG, а Сергей Попов из HTML Academy и по совместительству организатор moscowcss выступил с докладом о том, как оставить спецификации, которыми бы могли пользоваться другие разработчики со всего мира.
Мы записали видео лекций и делимся ими с вами.
Читать полностью »

Просто о D3.js - 1

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

Читать полностью »

Эта статья содержит всё, что вам нужно знать об alt-text! Когда их использовать и как идеально их подготовить. Подготовил я, Дэниель, веб-разработчик с частичной потерей зрения, который ежедневно использует скринридер.

Здесь изображение котика с атрибутом alt=«Милый котик».

Мой опыт с картинками в вебе

Во время сёрфинга в вебе я использую сочетание увелителя экрана и скринридера. Как показывает практика, увеличение экрана удобнее на дисплеях большого размера, а скринридер — на меньших устройствах.
Читать полностью »

Как правильно вставлять SVG - 1

Как правильно вставлять SVG?

Читать полностью »

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

Классическое представление дерева сущностей (например, меню разделов сайта, главное меню в программах) довольно удобно и наглядно в случае «высокого» дерева с не слишком глубокой вложенностью элементов. Будь то выпадающее меню (как главное строковое меню программ) или раскрывающееся (как в левой панели популярных файловых менеджеров), всё довольно удобно и наглядно. А что если дерево низкое и развесистое? У каждого родителя детей мало, зато вложенность достигает, скажем, 10. Или 50…

Низкие ветвистые деревья

Читать полностью »

Введение

Некоторое время назад я дома решил посмотреть, что нового появилось на тему космоса за последнее время. За этим делом меня застал мой 7 летний сын, проявив большой интерес к этой тематике. Пока я ломал голову, как просто и доходчиво, а также в каком именно объеме дать ребенку информацию по космосу, я наткнулся на статью, где написано, что принято решение вернуть в российские школы предмет «Астрономия» в 2017-2018 учебном году, но только с 11 класса. Это и стало тем событием, которое подвигло меня написать эту статью, чтобы помочь ознакомить с азами астрономии детей до 11 класса.

По сути 7 летний ребенок является представителем определенной выборки пользователей, которая либо интересуется астрономией уже сейчас, либо заинтересуется ей в будущем. Именно для них, а также для тех, кто будет давать знания о звездах я предлагаю попробовать приведенных ниже способ. Основной идей является генерация Галактики с использованием реальных данных (эту часть я беру на себя), и последующее использование результата генерации либо в играх, либо в качестве учебного пособия теми, кто хотел бы сделать изучение астрономии более интересным…

Генерация Галактики и обучение начальным знаниям астрономии - 1
Читать полностью »

image

Вводная часть

Аркадная js игра. Прототипом послужили так называемые «Гоночки в клетку»(в каком-то детском журнале видел). Смысл в том, что на тетрадном листе рисуется трасса и игроки ходят по клеткам. За один ход можно увеличить скорость на один или уменьшить. Если «врезаешься» в стену, то продолжаешь от этого места с единичной скоростью.
Читать полностью »

GraphicsJS – графическая JavaScript библиотека - 1

Перевод статьи. Англоязычный оригинал опубликован на SitePoint – "Introducing GraphicsJS, a Powerful Lightweight Graphics Library".

HTML5 – основа основ современного веба. И сегодня, когда встает задача создать интерактивную графику, выбор чаще всего падает на такие технологии, как SVG и Canvas. Flash позабыт, Silverlight – редкая птица, обитающая на задворках веба, и почти никто не помнит сторонние ActiveX и Java-плагины.

Плюсы и минусы SVG и Canvas хорошо известны – в целом все сводится к тому, что для создания интерактивных элементов и работы с ними больше подходит SVG. Это векторный формат, основанный на XML, и, когда изображение загружается на страницу с использованием тега <svg>, каждый его внутренний элемент становится доступен в SVG DOM.

В данной статье я хочу рассказать о GraphicsJS. Это мощная графическая JavaScript-библиотека с открытым исходным кодом, основанная на технологии SVG (VML для старых версий IE). Начну с краткого введения в основы GraphicsJS, а затем проиллюстрирую возможности библиотеки двумя небольшими, но наглядными примерами. Первый из них посвящен изобразительному искусству. Второй покажет, как менее чем за 50 строк кода сделать простую арт-игру в жанре таймкиллера.Читать полностью »

Поддержка SVG и режим CompactOverlay в приложениях UWP - 1


Хочу продемонстрировать несколько простых, но интересных нововведений, которые принесло с собой для разработчиков обновление Creators Update.
На данный момент, для того, чтобы скачать и установить Creators Update SDK необходимо быть Windows инсайдером. Сейчас доступно SDK сборки под номером 15063. Найти его можно на страничке разработчиков сайта Windows Insider.
Кроме обновленной 10-ки и Creators Update SDK вам понадобится еще и Visual Studio 2017.
Читать полностью »