Мы всегда в поисках хороших статей о дизайне, чтобы потом использовать их в работе над сайтом «Я люблю ИП». Сегодня мы перевели ещё одну статью, которая рассказывает, чем отличается UI-дизайн от UX-дизайна и на каких основных принципах строится дизайн интерфейсов.

UI vs. UX

Если вы хоть немного интересовались дизайном приложений, то наверняка слышали термины «UI» и «UX». Но чем же они отличаются?

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

Согласно книги Дж. Гарретта «Элементы опыта взаимодействия», UX-дизайн можно определить через пять основных уровней. Давайте начнём с самого абстрактного.

Сегодня — немного практических советов по работе с WebStorm.

Вначале пишем совсем простой HTML, после color: нажимаем <Ctrl-пробел> и получаем список цветов.



КО подсказывает: во всех IDE от JetBrains <Ctrl-пробел> — это контекстная подсказка.

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



А теперь представим себе проект посложнее, небольшое приложение под node.js.

В настоящее время существует много стандартов наименования переменных, но два из них являются наиболее популярными среди программистов: это camel case («Верблюжья» нотация) и underscore (именование переменных с использованием символа нижнего подчеркивания в качестве разделителя). Кто-то может возразить, что существуют и другие популярные стандарты, но в рамках данной статьи мы сравним эти два, и узнаем у программистов — какого стандарта придерживаются они. Конечно, некоторые программисты связаны рамками стандартов кодирования языка или фреймворка, который они используют, но мы постараемся сделать независимое сравнение.

Здравствуйте, уважаемое Хабрасообщество!

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

Долгое время я использовал Twitter Bootstrap, но он не мог удовлетворить все потребности. Приходилось верстать дополнительные кнопочки и писать скрипты. Но вот однажды, я познакомился с замечательным UI-фреймворком KendoUI от Telerik. Что из этого получилось под катом.

Вы уже используете прогрессивную загрузку? А как насчёт технологий Tree Shaking и разбиения кода в React и Angular? Вы настроили сжатие Brotli или Zopfli, OCSP stapling и HPACK-сжатие? А как у вас обстоят дела с оптимизацией ресурсов и клиентской части, со вложенностью CSS? Не говоря уже о IPv6, HTTP/2 и сервис-воркерах.

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

Я провёл эксперимент — взял одну из самых сложных групп юнитов (Prepositions) в знаменитом учебнике «English Grammar in Use». На протяжении двух недель, я не решил НИ ОДНОГО упражнения, но написал небольшую книгу (6000 слов), в которую загнал всю теорию полностью из 16 юнитов и связал её с придуманными сценами. Также, по мере написания новых глав я повторял старые и ту теорию, которая в них встроена.

Результаты эксперимента оказались просто фантастическими! Помимо громадного роста навыка письма и увеличения активного запаса, я наблюдал, как некоторые конструкции входят в привычку и хочется их использовать потом ещё и ещё. После прохождения юнитов я решил всё-таки прогнать тесты для проверки и получил 94%. Т.е. письмо учит вас проходить тесты, но не наоборот!

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

Важные требования к такому забору:

• Никаких изображений!
• Он должен спокойно тянуться по горизонтали
• Обязательно должен поддерживать неравномерный фон у подложки
• Фон не должен требовать никакой экстра-разметки. Лучше всего будет избегать псевдо-элементов (экономия — хорошо).

Поддерживаемые браузеры: Chrome, Firefox (> 3.6), Opera (>= 12), Safari (>= 5), IE10.

Для IE 7, 8 у нас будет фоллбэк в виде обычной заливки. А вот с IE9 проблема — он не поддерживает градиенты, но при этом понимает hsla и rgba цвета. Воистину «великолепный» браузер. Что ж, его пока придётся игнорировать. Если кто–то подскажет хороший фоллбэк для IE буду только благодарен.

Все знакомы с css параметром border, но есть ли вещи, которые мы не знаем о нем?

Привет, Хабр!

Сегодня поговорим об отзывчивых значках и парочке лайфхаков со шрифтовыми иконками.

Предыстория. О трендах

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

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

Меня зовут Павел Гринченко. Я был одним из участников Школы разработки интерфейсов Яндекса в Симферополе. Когда-то давно я посмотрел видеозаписи самой первой Школы 2012 года и почерпнул из них очень много полезной информации. Затем я узнал, что в моём городе пройдёт новая Школа, и решил обязательно поучаствовать.

Чтобы попасть в Школу, требовалось заполнить анкету и сделать два тестовых задания. Одно из них — по вёрстке, довольно простое. Звучало оно так: сверстать список ачивок, но максимально гибко и реюзабельно (например, используя СSS counters). Второе задание оказалось посложнее: написать обфускатор CSS-классов без использования сторонних библиотек. На входе — массив классов, на выходе — их обфусцированная версия. Но вот пара нюансов:

• Длина результирующих классов должна была получиться минимальной.
• Наиболее часто встречающиеся классы должны были занимать наименьший объём.

3 июля, сделав задания, я отправил заявку и забыл про Школу, а 26 июля мне пришло письмо о том, что я принят. Сегодня хочу рассказать вам о том, как проходил процесс обучения, какие инструменты разработки я открыл для себя и какие задачи нам приходилось с интересом решать.

Дорогие читатели, мы с вами хотели бы обсудить вопрос предустановленного ПО для VPS.

Есть несколько категорий людей, которые подключают себе VPS:

— одни умеют настраивать и обращаться с VPS;
— вторым не помешала бы инструкция и небольшая помощь;
— третьи слышали, что VPS круче виртуального хостинга, но не знают, как к нему подступиться.

Решение, которое удовлетворяет почти всех — сделать образы с предустановленным ПО. Кому-то это сэкономит время на установке LAMP, а кому-то поможет начать пользоваться сервисом без специальных знаний. Но как это лучше всего реализовать провайдеру?

Мы продолжаем публиковать лекции легендарного Гарвардского курса CS50, которые мы переводим и озвучиваем специально для JavaRush. Рады вам представить 16-ю серию с продолжением рассмотрения языка PHP (теперь для разработки веб-приложений), а также со знакомством с базами данных и MySQL. Всего в курсе 24 лекции, постепенно мы переведём все. Лекция под катом в списке всех переведённых на сегодняшний день лекций.

Что вы узнаете, прослушав этот курс:

• Основы компьютерных наук и программирования;
• Концепции алгоритмов и алгоритмичности мышления. Какие задачи можно решать с помощью программирования и каким образом;
• Концепции абстракции, структуры данных, инкапсуляции, управления памятью. Основы компьютерной безопасности. Процесс разработки ПО и веб-разработка;
• Основы языка программирования C и Scratch;
• Основы баз данных и SQL;
• Веб-разработка: основы CSS, HTML, JavaScript и PHP;
• Основы подготовки презентации проектов по программированию.

В основном в нашей компании все рабочие места были построены на базе тонких клиентов HP t5530. Исключение составляли несколько рабочих мест с особыми требованиями (экзотическое оборудование или ПО) и несколько ноутбуков ключевых сотрудников. Суммарное количество рабочих мест составляло приблизительно 120 единиц. Все это обслуживалось двумя терминальными серверами (Windows 2003 Ent), одним сервером Active Directory и одним файлохранилищем. Доступ в интернет — сервер с FreeBSD. Рабочие задачи стандартные — IE (доступ к удаленной онлайн базе), TheBat с почтой в огромных количествах, MS Office (Word/Excel), 1С.

Представляю вашему вниманию перевод достаточно большой и объемной статьи по поводу вечного спора, какие же единицы измерения использовать при верстке: em'ы или rem'ы. В каких случаях стоит использовать одни единицы, а в каких другие. Вас ожидает много кода, примеров и их объяснений.

Добро пожаловать в мир типографики и относительных единиц измерения =)

Ни для кого, думаю, не секрет, что touch-устройства обрабатывают «мышиные» события несколько иначе, не так, как это происходит на десктоп-браузерах…

Самый яркий для меня пример, это обработка псевдокласса :hover. Для начала iOS7, например, не будет реагировать на hover если только на элемент, или его родителя, не навешена обработка события click. Это хорошо видно вот на этом примере: jsfiddle.net/H8EmG — сколько не тыкай пальцем в текст — никаких подчеркиваний не увидишь. А в этом примере jsfiddle.net/H8EmG/1 «тычок» пальцем в текст будет приводить к его подчеркиванию. Интересный факт — пока не ткнем в другой элемент, текст так и будет сидеть под ховером…

Другой интересный пример, это обработка появления элементов «по-наведению»: jsfiddle.net/ASRm9/1 Попробуйте нажать на текст. Сперва вы увидите текст «HOVER!», появившийся внутри строки, а вот второе нажатие уже вызовет alert('click'). Это происходит потому, что iOS понимает что за :hover что-то скрыто, и старается не сломать поведение, заложенное автором сайта.

Но однажды мы столкнулись с такой багой, объяснить которую мы не смогли до сих пор, а на ее локализацию потребовался не один день отладки на iPad… Желающие подробностей, а также хитрого, как мне кажется, способа решения, наверное, всех проблем с :hover разом — прошу под кат…

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



Демо Скачать исходники

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

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

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


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

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

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

Итак, некий сайтик iknowwhatyoudownload.com по IP-адресу показывает список торрентов, скаченных и розданных с этого адреса.
Судя по всему, запустились недавно. Домен зарегистрирован 14 сентября 2016. Отображается статистика примерно за месяц. Но как долго она собиралась, неизвестно.