Как улучшить интерфейс — всё по этой теме для программистов


Оглавление (нажмите, чтобы открыть):

Как улучшить интерфейс — всё по этой теме для программистов

Данная тема предназначена для помощи программистам графикой:
баннерами, иконками, элементами интерфейса, мокапами и т.д.

Уважаемые разработчики, в этой теме по мере своих сил Вам помогут с графическим содержанием Ваших приложений и дадут советы по косметическим улучшениям. Чаще всего к нам обращаются за помощью в изготовлении иконок, feature- и promo-графики для Google Play, тех или иных элементов интерфейса приложения. Пожалуйста, не ждите, что Вам помогут бесплатно, если вы размещаете заказ наподобие «мне нужен редизайн всех экранов приложения с нарезкой по всем dpi» или «сделайте интерфейс социальной сети». Это объемная работа, требующая много времени и сил и соответствующего вознаграждения. С такими заказами лучше идти на биржу фриланса, если такой возможности нет, то в случае размещения подобных заказов просьба указывать, что работа будет поощрена материально, иначе Вы вряд ли получите отклик профессионалов. Спасибо за понимание.

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

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

Все замечания и предложения по теме направлять в QMS куратору

Сообщение отредактировал mr_johnnysniper — 26.03.19, 15:11

Как улучшить любой интерфейс: выпадающие списки

29 Ноя 2013, 13:00, написал Максим Шайхалов в разделе «Интерфейс»

Прогресс не стоит на месте и все движется с космической скоростью. Интерфейсы не отстают и постепенно эволюционируют становясь сложней и одновременно удобней (но это уже разговор для отдельной статьи). В этой серии статей я бы хотел рассказать как можно улучшить большинство типовых интерфейсных элементов используя нехитрые техники.

Выпадающие списки

Выпадающие списки или дропдауны (dropdown) — один из самых неудобных и неэффективных элементов интерфейса. Но несмотря на это, их продолжают применять во всех местах интерфейса. «Почему?» — спросите вы. Ответ прост: дропдауны экономят пространство и помогают спрятать большие списки (вне зависимости насколько это нужно было делать).

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

На самом деле, в большинстве случаев, выпадающий список можно заменить на достойную альтернативу. Но если все-таки беретесь использовать выпадающий список, то запомните несколько правил.

1. Не используйте выпадающие списки для маленьких списков.

Раскройте выпадающий список и используйте радиобаттоны. Это упростит выбор. Пользователь просто пробежит глазами пункты и кликнет в нужный. В случае с выпадающим списком он не увидит сразу всю полноту выбора. Для этого список нужно сначала открыть, потом только сделать выбор. Раскрыв маленький выпадающий список — мы сократим количество кликов и упростим интерфейс.

Выбор руля в расширенном поиске на Авто E1.ru.

Попробуем поменять на радиобаттоны. Стало лучше, не правда ли?

2. Не используйте выпадающие списки для больших списков.

Выбор даты рождения на Хабре

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

Часто дропдауны используют для выбора даты рождения, что я считаю категорически неправильным. Я допускаю использование выпадающего списка для месяца. Но для числа и года можно использовать простое текстовое поле. Для выбора дат придуман специальный элемент datepicker. При всем их многообразии можно подобрать самый удобный, совместив его с полем ввода.

Выбор даты в Бутстрапе совмещает текстовое поле и datepicker.

3. Используйте выпадающий список с вводом и автозаполнением.

Настоящим полезным и применимым выпадающим списком я считаю такой

Выпадающий список для выбора страны Вконтакте

Такой список позволяет выбрать самые популярные варианты парой кликов, отфильтровать нужную страну из списка и не вводить полное название вручную (как в случае с традиционным полем ввода).

4. Подставляйте по умолчанию самое частое значение.

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

Вывод

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

В следующих сериях

  • Чекбоксы. Или как научить пользователя ставить в маленькую галочку.
  • Радиобатонны. Простой выбор без выбора.
  • Поля ввода. Как должны работать поля ввода с разными типами данных.

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

10 правил хорошего пользовательского интерфейса

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

Десять универсальных правил хорошего пользовательского интерфейса

1. Сделайте все, что нужно пользователю, легко доступным

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

Например, мы решили использовать вкладки для организации WordPress-темы Divi. В ней все инструменты находятся прямо в конструкторе и разделены по категориям.

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

Другой пример – разделы Справка / Поддержка / Контакты. Пользователям всегда должна быть доступна кнопка «Справка» или «Обратиться в службу поддержки». Вот почему необходимо располагать кнопки помощи вверху.

2. Будьте последовательны

Нужно быть последовательным в размещении функций в пользовательском интерфейсе. При этом пользовательский интерфейс должен работать и выглядеть одинаково во всех разделах сайта.

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

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

Принцип наименьшего удивления гласит, что если пользователь удивляется тому, как что-то работает… переделайте это, чтобы оно стало интуитивно понятным.

Также нужно убедиться, что пользовательский интерфейс соответствует основной платформе. Например, приложения для iOS работают не так, как для Android. Десктопные сайты предъявляют требования, отличающиеся от требований мобильных ресурсов.

3. Будьте предельно ясными

Пользователи должны ясно понимать, как получить доступ к тому или ному функционалу. Следование этому принципу подразумевает доработку UX. Это увеличивает время просмотра и снижает показатель отказов.

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

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

4. Предоставляйте обратную связь

Пользователи должны понимать, что происходит. Если они нажимают кнопку, укажите, что кнопка была нажата. Вы можете сделать это несколькими способами. Например, анимировать кнопку. Иконки загрузки (например, MacOS Rainbow Wheel) обеспечивают обратную связь: пользователи понимают, что вы работаете над их запросом.

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

5. Используйте распознавание, а не запоминание

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

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

Также можно реализовать это с помощью сообщений. Мы делаем это с помощью простых всплывающих подсказок. Даже если кто-то не помнит, что делает та или иная иконка, мы описываем пользователю ее функцию.

6. Выберите модель взаимодействия

Хуже всего пытаться открывать на себя дверь, которая открывается в обратном направлении. Особенно, когда предыдущая дверь открывалась на себя. Дизайнер этого здания сделал пользовательский интерфейс несогласованным, поэтому вы понятия не имеете, как правильно открыть дверь.

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

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

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

Когда разрабатываете пользовательский интерфейс, выберите основные инструменты для взаимодействия: меню, касания, иконки, жесты или что-то еще. Alexa и Siri используют голосовой ввод в качестве основного интерфейса. Способ, которым они предоставляют информацию и выполняют задачи, основан на этом подходе. Поэтому пользователь интуитивно понимает что делать.

7. Следуйте стандартам дизайна

Старая поговорка гласит: не исправляйте то, что работает . Действительно нет необходимости изменять что-то, если стандарт работает. Вы ведь не хотите идти вразрез с тем, чего ожидают пользователи?

Например, пользователи знают, что вопросительные знаки (?) указывают на раздел справки. Поэтому не используйте для его обозначения восклицательный знак (!) . Если хотите, чтобы пользователи находили мобильное меню, используйте значок «гамбургера» (три горизонтальные линии), а не сетку.

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

8. Иерархия элементов

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

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

9. Будьте проще

Посмотрите на эту контактную форму:

А теперь на эту:

Обе формы предназначены для отправки пользовательского запроса. Одна из них не является трудной для заполнения, а другая вызывает головную боль. Помимо того, что нижняя форма является правительственной, она еще и разработана не для пользователя , а для администратора. Лучший подход — сделать все максимально удобным для пользователя . И один из эффективных способов достичь этого – вырезать все, что не является необходимым.

10. Подарите пользователям удобство управления и ощущение свободы

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

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

Лучший вариант — контекстные меню для действий, которые пользователь может выполнить над конкретным элементом (или страницей). Если вы последовательны в своем пользовательском интерфейсе, то пользователи поймут, что контекстные меню или панели инструментов всегда содержат полный список действий для любого элемента.

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

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

Завершен ли ваш интерфейс?

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

Данная публикация представляет собой перевод статьи « 10 Rules of Good UI Design to Follow On Every Web Design Project » , подготовленной дружной командой проекта Интернет-технологии.ру

Улучшить интерфейс за счёт мелочей: 7 хитростей

Перевод материала разработчика Адама Ватана и дизайнера Стива Щёгера, который сделал наш читатель, Виталий Асташкин.

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

1. Используйте цвет и толщину шрифта для передачи иерархической структуры текста

Распространённая ошибка — слишком сильно полагаться на размер шрифта, работая с иерархией при стилевом оформлении текста. «Текст важный? Давайте сделаем его покрупнее». «Это второстепенный текст? Давайте уменьшим шрифт». Вместо того чтобы всю самую тяжёлую работу перекладывать только на шрифт, попробуйте выполнить ту же работу за счёт цветов или толщины шрифта. «Текст важный? Давайте сделаем шрифт потолще». «Это второстепенный текст? Давайте возьмём более светлый цвет». Попробуйте придерживаться двух или трёх цветов:

• Тёмный (но не чёрный) цвет для основного текстового контента (например, заголовок статьи).

• Серый для второстепенного текстового контента (дата публикации статьи).

• Светло-серый для вспомогательного контента (пример — предупреждение об авторском праве в сноске). В работе веб-интерфейсом полезно играть с толщиной шрифта:

• Шрифт нормальной толщины (400 или 500, зависит от начертания) — для основной части текста.

• Более толстый шрифт (600 или 700) — для текста, который вы хотите выделить. Не берите шрифты толщиной меньше 400 для работы с пользовательским интерфейсом. Они могут неплохо работать с крупными буквами заголовка, но если буквы маленькие, их сложно читать. Если надо показать незначительность текста, не уменьшайте его толщину — лучше используйте светлый оттенок или шрифт меньшего размера.

2. Не делайте серый текст на цветном фоне

Светло-серый текст на белом фоне хорошо подходит, если вы хотите, чтобы текст не привлекал внимание читателя. Но на цветном фоне светло-серый текст уже смотрится плохо. Так происходит из-за уменьшения контраста. Выстроить иерархию в тексте позволяет приближение цвета текста к цвету фона, а не светло-серый цвет. Уменьшить контраст при работе с цветным фоном можно двумя способами.

Уменьшить прозрачность белого текста

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

Вручную подобрать цвет, который будет основан на цвете фона

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

3. Смещайте тени

Чтобы тени были заметнее, вместо blur и spread добавьте вертикальное смещение. Такой эффект смотрится более естественно, потому что симулирует источник света, расположенный сверху. Мы привыкли к такому освещению в реальном мире. Это работает и со встроенной тенью, которую можно использовать в ячейках или формах ввода: Если хотите узнать больше о дизайне с тенью, Material Design Guidelines — прекрасный учебник для начинающих.

4. Меньше используйте границы

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

Использовать тень в ячейке

Тень в ячейке отлично оттеняет элемент, как это сделала бы и граница, но смотрится неброско, достигает той же цели, но не так сильно отвлекает внимание.

Использовать два различных цвета фона

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

Добавить дополнительное пространство

Размещение элементов на большем расстоянии друг от друга — прекрасный способ разделить их и при этом обойтись совсем без новых деталей в интерфейсе.

5. Не увеличивайте иконки, которые должны быть маленькими

Если вы работаете над чем-то, где можно использовать большие иконки (пример — раздел «Функциональные возможности» на лендинге»), возможно, вы инстинктивно берёте бесплатный набор иконок (например, Font Awesome или Zondicons) и увеличиваете размер, пока он не покажется вам подходящим. Это векторные изображения, так что качество при масштабировании не страдает, так? Но если размер иконок был 16—24 px, после трёхкратного или четырёхкратного увеличения они не будут смотреться профессионально. У них не будет нужной детализации, так что они всегда будут казаться непропорциональными и грубыми. Если у вас есть только маленькие иконки, попробуйте вставить их в фигуру другого цвета: С одной стороны, сама иконка будет ближе к своему размеру, с другой, она займёт больше пространства на странице. А если позволяет бюджет, вы можете воспользоваться премиум-набором иконок, изначально созданных большими. Попробуйте Heroicons или Iconic.

6. Используйте цветную границу, чтобы добавить цвета в спокойный дизайн

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

Или чтобы подчеркнуть активный пункт навигации:

Или даже по всей ширине вверху макета: Чтобы добавить в UI цветной прямоугольник, не нужен талант графического дизайнера. Но такой прямоугольник может придать вашему сайту более профессиональный вид. Сложно выбрать цвета? Попробуйте начать с ограниченной палитры Color Search от Dribbble, чтобы не попасть под влияние бесконечных возможностей обычной палитры цветов.

7. Не каждой кнопке нужен цветной фон

Когда пользователь может произвести много разных действий на странице, очень легко попасться в ловушку и сделать дизайн этих действий, опираясь исключительно на семантику. Шаблоны сервисов вроде Bootstrap даже поощряют это — предоставляют меню семантических стилей при выборе кнопки: «Это положительное действие? Сделайте кнопку зелёной». «Это удаление данных? Сделайте кнопку красной». Но существует более важный момент, о котором обычно забывают, — иерархия. Каждое действие на странице имеет своё место в пирамиде важности. На большинстве страниц есть одно главное действие, пара менее важных второстепенных действий и несколько редко используемых действий третьестепенной важности. Дизайн должен отражать место действий в этой иерархии:

• Основные действия должны быть очевидными. Здесь хорошо использовать высококонтрастные и ровные цвета фона.

• Второстепенные действия должны быть ровными, но не яркими. Здесь лучше всего применить стиль внешней границы элемента (Outline styles) или цвета фона с меньшей контрастностью.

• Третьестепенные действия должны быть заметны, но не навязчивы. Лучше всего здесь применить стиль ссылок. «А что с деструктивными действиями? Разве не нужно их всегда выделять красным?». Необязательно. Если деструктивное действие не является главным на этой странице, лучше сделать его в стиле второстепенного или третьестепенного действия. Приберегите такое стилевое оформление — жирный шрифт, красный цвет — для тех случаев, когда негативное действие является основным действием в интерфейсе. Например, в диалоговом окне подтверждения:

Перевод материала разработчика Адама Ватана и дизайнера Стива Щёгера, который сделал наш читатель, Виталий Асташкин.

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

1. Используйте цвет и толщину шрифта для передачи иерархической структуры текста

Распространённая ошибка — слишком сильно полагаться на размер шрифта, работая с иерархией при стилевом оформлении текста. «Текст важный? Давайте сделаем его покрупнее». «Это второстепенный текст? Давайте уменьшим шрифт». Вместо того чтобы всю самую тяжёлую работу перекладывать только на шрифт, попробуйте выполнить ту же работу за счёт цветов или толщины шрифта. «Текст важный? Давайте сделаем шрифт потолще». «Это второстепенный текст? Давайте возьмём более светлый цвет». Попробуйте придерживаться двух или трёх цветов:

• Тёмный (но не чёрный) цвет для основного текстового контента (например, заголовок статьи).

• Серый для второстепенного текстового контента (дата публикации статьи).

• Светло-серый для вспомогательного контента (пример — предупреждение об авторском праве в сноске). В работе веб-интерфейсом полезно играть с толщиной шрифта:

• Шрифт нормальной толщины (400 или 500, зависит от начертания) — для основной части текста.

• Более толстый шрифт (600 или 700) — для текста, который вы хотите выделить. Не берите шрифты толщиной меньше 400 для работы с пользовательским интерфейсом. Они могут неплохо работать с крупными буквами заголовка, но если буквы маленькие, их сложно читать. Если надо показать незначительность текста, не уменьшайте его толщину — лучше используйте светлый оттенок или шрифт меньшего размера.

2. Не делайте серый текст на цветном фоне

Светло-серый текст на белом фоне хорошо подходит, если вы хотите, чтобы текст не привлекал внимание читателя. Но на цветном фоне светло-серый текст уже смотрится плохо. Так происходит из-за уменьшения контраста. Выстроить иерархию в тексте позволяет приближение цвета текста к цвету фона, а не светло-серый цвет. Уменьшить контраст при работе с цветным фоном можно двумя способами.

Уменьшить прозрачность белого текста

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

Вручную подобрать цвет, который будет основан на цвете фона

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

3. Смещайте тени

Чтобы тени были заметнее, вместо blur и spread добавьте вертикальное смещение. Такой эффект смотрится более естественно, потому что симулирует источник света, расположенный сверху. Мы привыкли к такому освещению в реальном мире. Это работает и со встроенной тенью, которую можно использовать в ячейках или формах ввода: Если хотите узнать больше о дизайне с тенью, Material Design Guidelines — прекрасный учебник для начинающих.

4. Меньше используйте границы

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

Использовать тень в ячейке

Тень в ячейке отлично оттеняет элемент, как это сделала бы и граница, но смотрится неброско, достигает той же цели, но не так сильно отвлекает внимание.

Использовать два различных цвета фона

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

Добавить дополнительное пространство

Размещение элементов на большем расстоянии друг от друга — прекрасный способ разделить их и при этом обойтись совсем без новых деталей в интерфейсе.

5. Не увеличивайте иконки, которые должны быть маленькими

Если вы работаете над чем-то, где можно использовать большие иконки (пример — раздел «Функциональные возможности» на лендинге»), возможно, вы инстинктивно берёте бесплатный набор иконок (например, Font Awesome или Zondicons) и увеличиваете размер, пока он не покажется вам подходящим. Это векторные изображения, так что качество при масштабировании не страдает, так? Но если размер иконок был 16—24 px, после трёхкратного или четырёхкратного увеличения они не будут смотреться профессионально. У них не будет нужной детализации, так что они всегда будут казаться непропорциональными и грубыми. Если у вас есть только маленькие иконки, попробуйте вставить их в фигуру другого цвета: С одной стороны, сама иконка будет ближе к своему размеру, с другой, она займёт больше пространства на странице. А если позволяет бюджет, вы можете воспользоваться премиум-набором иконок, изначально созданных большими. Попробуйте Heroicons или Iconic.

6. Используйте цветную границу, чтобы добавить цвета в спокойный дизайн

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

Или чтобы подчеркнуть активный пункт навигации:

Или даже по всей ширине вверху макета: Чтобы добавить в UI цветной прямоугольник, не нужен талант графического дизайнера. Но такой прямоугольник может придать вашему сайту более профессиональный вид. Сложно выбрать цвета? Попробуйте начать с ограниченной палитры Color Search от Dribbble, чтобы не попасть под влияние бесконечных возможностей обычной палитры цветов.

7. Не каждой кнопке нужен цветной фон

Когда пользователь может произвести много разных действий на странице, очень легко попасться в ловушку и сделать дизайн этих действий, опираясь исключительно на семантику. Шаблоны сервисов вроде Bootstrap даже поощряют это — предоставляют меню семантических стилей при выборе кнопки: «Это положительное действие? Сделайте кнопку зелёной». «Это удаление данных? Сделайте кнопку красной». Но существует более важный момент, о котором обычно забывают, — иерархия. Каждое действие на странице имеет своё место в пирамиде важности. На большинстве страниц есть одно главное действие, пара менее важных второстепенных действий и несколько редко используемых действий третьестепенной важности. Дизайн должен отражать место действий в этой иерархии:

• Основные действия должны быть очевидными. Здесь хорошо использовать высококонтрастные и ровные цвета фона.

• Второстепенные действия должны быть ровными, но не яркими. Здесь лучше всего применить стиль внешней границы элемента (Outline styles) или цвета фона с меньшей контрастностью.

• Третьестепенные действия должны быть заметны, но не навязчивы. Лучше всего здесь применить стиль ссылок. «А что с деструктивными действиями? Разве не нужно их всегда выделять красным?». Необязательно. Если деструктивное действие не является главным на этой странице, лучше сделать его в стиле второстепенного или третьестепенного действия. Приберегите такое стилевое оформление — жирный шрифт, красный цвет — для тех случаев, когда негативное действие является основным действием в интерфейсе. Например, в диалоговом окне подтверждения:

Арсенал программиста. 7 инструментов для эффективной работы

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

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

1. Интегрированная среда программирования (IDE)

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

  • Редактор с подсветкой кода
  • Компилятор
  • Отладчик
  • Управление проектами

Существуют универсальные IDE, которые поддерживают много языков программирования:

Существуют специализированные IDE, которые нацелены на один язык программирования:

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

Есть много сравнительных таблиц IDE. Например, здесь. Ниже фрагмент сравнительной таблицы IDE для C/C++.

В качестве основного IDE лучше выбрать ту среду разработки, которая вам наиболее комфортна и удобна. И ее уже изучить досконально. Это существенно повысит вашу производительность.

2. Профилировщик кода (профайлер, профилер)

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

Чтобы найти узкое место программы запускают профилер, который фиксирует время выполнения различных фрагментов программы.

Существует много профилеров, как универсальных, так и специализированных. Большой список можно найти здесь (en).

Но самым популярным профилером является GNU Gprof. Он есть в сборке Си-экспресс. Чтобы его использовать, нужно сделать следующие действия:

1. Включить профилирование в параметрах сборки проекта. Щелкнуть правой кнопкой на проекте и выбрать соответствующий пункт меню.

2. Перекомпилировать и запустить программу.

3. Запустить профилер. Меню — Модули — Code profiler

3. Система контроля версий

Часто бывает, что программист внес правки в исходный код и программа перестала работать. Для быстрого возврата к работающей версии используются системы контроля версий (SVN). Они ведут учет изменений в файлах и позволяют откатить изменения до нужной точки.

Наиболее популярными являются:

Раньше SVN работали на компьютере разработчика, но в последнее время используются веб-серверы для SVN. Это дает много преимуществ, можно работать на разных компьютерах и иметь копию программы в облаке.

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

Самыми популярными серверами SVN являются:

  • GitHub (сервис платный, но бесплатен для проектов с открытым исходным кодом).
  • Bitbucket (бесплатный сервис)

4. Визуальный редактор интерфейса

Хотя интерфейс программы можно полностью написать в коде, но это подходит только для совсем простых программ. Программирование интерфейса вручную — это чрезвычайно долгий и трудоемкий процесс.

Есть еще одна причина, чтобы это процесс сильно ускорить — общение с заказчиком. Самый первый разговор с заказчиком станет намного продуктивнее, если вы сможете быстро набросать макет программы. Заказчики ничего не понимают в программировании, но интерфейс понимают все. Чем более быстро вы покажет макет будущей программы, тем быстрее получите заказ.

Существуют множество редакторов интерфейса, которые помогают набросать внешний вид программы простым перетаскиванием виджетов. Другое их название GUI-конструкторы. Они могут как отдельными программами, например, Glade. А могут быть плагинами к IDE, как, например wxSmith для CodeBlocks.

Как правило, задача визуального редактора — задать расположение элементов интерфейса, а код обработки сообщений программист пишет уже в программе.

5. Редактор баз данных

Для прикладных программ работа с базами данных (БД) является обязательным условием. Если вы пишете программу для автоматизации бизнеса, то вам потребуются работа с базами:

  • Сотрудников
  • Товаров
  • Покупателей
  • Счетов и т.д.

Базы данных — это основа автоматизации любой компании. Поэтому программисту в той или иной форме нужно будет взаимодействовать с базами данных. В этом ему помогают редакторы БД, которые позволяют управлять информацией в базах данных.

Самым мощной и удобной системой управления базами данных (СУБД) является Microsoft Access, который входит в состав Microsoft Office. Возможности Access очень велики. Эта СУБД позволяет разработать автоматизацию небольшую компании. Но полученный продукт не очень удобно тиражировать из-за особенностей лицензирования Microsoft Office.

Самыми распространенными редакторами БД являются:

  • PhpMyAdmin
  • He >6. Инструмент тестирования ПО

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

Суть тестирования состоит в том, что тестировщик выполняет пакет тестов и проверяет соответствие реального поведения программы с заданным.

Проблема тестирования заклюается в том, что предвидеть заранее все возможные варианты использования программы невозможно. Поэтому тестирование ПО — это больше искусство, чем наука.

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

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

7. Фреймворк

Многие программы имеют общие модули. Отсюда приходит желание не писать каждый раз программу с нуля, а использовать какой-нибудь каркас. Так появилось понятие фреймворка, что в переводе означает «каркас».

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

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

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

Если функционал программы сильно отличается от тех принципов, которые использует фреймворк, то программисту приходится постоянно изобретать разные приемы, чтобы согласовать требования заказчика и ограничения фреймворка. Иногда бывает, что использование фреймворка не только ускоряет, а, наоборот, замедляет программирование.

Форум разработчиков: игровой интерфейс

Когда очередной академик с экрана телевизора начинает стонать по поводу засорения русского языка англоязычными словами, очень хочется спросить, как бы он перевел слово «интерфейс»? «Стык»? «Смычка»? Или, может быть, «междумордие»? Мало кто понял бы академика, попробуй он описать проблемы игрового интерфейса «по-русски». Во-первых, интерфейсов в игре много. Каждый игрок видит их как минимум два: интерфейс оболочки (различные меню: настройки, загрузка, сохранение, выход, выбор уровня сложности и т.п.) и внутриигровой интерфейс (элементы управления, которые выводятся на экран во время игры). Еще одним люди обязательно пользуются, но чаще всего не знают об этом: системой управления (персонажем, юнитами, производством ресурсов).

Как утверждают авторы умных книг, например Брент Фокс в очень популярном среди западных разработчиков труде «Дизайн игрового интерфейса» (Game Interface Design), плохой интерфейс способен испортить любую игру. Важность его не вызывает у девелоперов сомнений. Однако замечено, что геймеры, ругая или нахваливая игру, практически никогда не упоминают удобство или неудобство интерфейса. Кто-то его не замечает, некоторые же вообще не догадываются, что именно включает в себя это понятие. Давайте поговорим, что это за зверь, заодно попробуем выяснить, что такое хороший, а что такое плохой интерфейс. В этом нам помогут:

toolАлексей Пациорковский, менеджер внешних проектов фирмы «1С»;

amicusПетр Прохоренко, руководитель проектов и ведущий геймдизайнер Lesta Studio;

AG — Макс Тумин, менеджер и геймдизайнер GFI Russia;

Brent Fox — Брент Фокс, проектировщик интерфейсов в компании Wahoo Studios, автор широко известного учебника «Дизайн игрового интерфейса»;

ErnoЭрлинг Эллингсен, пиар-менеджер датской компании Funcom (разработчики Anarchy Online и Age of Conan);

ChSМихаил Пискунов, ведущий сценарист KDV Games;

Rai — Михаил Матвиенко, разработчик интерфейсов в Targem Games;

АйвенИван Магазинников, геймдизайнер Katauri Interactive.

Blizzard — основа основ

[Игромания]: Игровые журналисты, разбирая игры по косточкам, обычно довольно много внимания уделяют интерфейсу, а вот геймеры очень редко обращают на него внимание. Как вы считаете, не преувеличивают ли журналисты важность интерфейса?

[AG]: Скорее наоборот, важность интерфейса обычно недооценивают. Причем чаще всего не журналисты и геймеры, а сами разработчики. Делают наспех, потом многократно переделывают, дополняют, и получается, простите за грубость, черт-те что, привинченное к игре непонятно как.

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

Графический интерфейс в Gears of War сведен к минимуму. О том, что персонажу нехорошо, напоминает лишь подрагивание экрана да красная пелена перед глазами.

[Brent Fox]: Зайду издалека. В самом широком смысле игровой интерфейс — это способ передачи информации геймерам для взаимодействия с игрой. Когда говорят об интерфейсе, чаще вспоминают полоски здоровья и мини-карты, ведь именно они помогают понять, что же происходит в игре. Все элементы внутриигрового интерфейса выводятся на экран в виде HUD, поскольку это самый очевидный и привычный способ передачи информации о состоянии и положении дел в игре.

То же самое можно было бы сделать по-другому. Например, игрок может догадаться о состоянии своего здоровья без помощи лайфбара. Вспомните, например, Gears of War, там никакого точного индикатора уровня здоровья нет. Зато, когда персонажу становится плохо, перед глазами появляется кровавая дымка, начинает раскачивать из стороны в сторону. А ведь для разработчика подобное представление здоровья с помощью анимации — все тот же пользовательский интерфейс, и работают над ним те же люди, которые в других играх рисовали красные полоски здоровья.

Теперь почувствовали важность интерфейса? Он есть, даже если геймеры его вообще не видят.

[ChS]: Чуть-чуть истории. Если верить старым техническим словарям, интерфейс — это устройство сопряжения человека и машины. Или же зона контакта человека и игры, где геймер получает данные о ходе игрового процесса и отдает управляющие этим процессом команды.

Хороший контакт — незаметный контакт, он не должен искрить и греться. Управляющие и информационные импульсы должны пролетать с минимальными задержками и потерями (нервов игрока и его внимания). В противном случае что-то может перегореть. Все это относится к области юзабилити (от англ. usability — удобство применения), искусству зачищать подобные контакты.

[Erno]: Хороший интерфейс не бросается в глаза, но четко выполняет свое предназначение — передает рычаги управления игрой. Я считаю, что дефекты интерфейса не могут убить хорошую игру, но они проводят четкую грань между просто замечательной и великой игрой.

Да, есть отдельные жанры, которые сильно зависят от интерфейса, — в первую очередь стратегии. Там игроку приходится регулировать множество параметров, постоянно что-то выбирать. За невзрачными кнопками скрыты океаны игровой статистики: чем проще доступ к данным, тем лучше. Однако управление при этом не должно пострадать. Это сложно, но у некоторых получается.

[Айвен]: Как ни грустно это признавать, но во многих играх роль интерфейса настолько преуменьшена, что плакать хочется. Порой возникает ощущение, что сляпал его один человек, да еще и по принципу «чтобы было». Или взял и скопировал элементы интерфейса у похожих игр, но при этом умудрился позаимствовать самые неудачные моменты.

Так и хочется спросить: играл ли проектировщик в собственную игру? Видел ли он когда-нибудь игры с хорошим интерфейсом? Иначе как объяснить отсутствие стиля и атмосферы (хайтек-интерфейс в фэнтези-игре, например), слабое графическое исполнение и кнопку выхода из игры в труднодоступном контекстном меню с названием «Закрыть текущую сессию»?

[tool]: Создание адекватных механизмов взаимодействия между геймером и игрой — одна из самых важных задач разработки. И дело не только в графическом интерфейсе, это лишь часть общей системы. Лучшая похвала для интерфейсов — это простота и незаметность. Потому в хороших играх его и не замечают, зато если уж интерфейс не задался, то обязательно скажут что-нибудь про «кошмарное управление».

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

[Игромания]: Насколько субъективны впечатления от интерфейса?

[amicus]: Ощущения от вида интерфейса обычно субъективны. Одному нравится зеленый и в крапинку, а другому — стилизованный под рококо и с праздничными ленточками. Впрочем, стиль чувствуют все.

Что же касается юзабилити, тут строго обратная ситуация — если плохо, то плохо для всех. Кривая организация интерфейса заставляет мозг пользователя скрежетать, а это мало кому по душе. Приведу пару конкретных примеров — Age of Wonders 2. Кнопку «Включить автоповтор последнего заказа» в меню города я нашел через несколько месяцев игры — это такой крохотный чекбоксик (окошко, где нужно поставить галочку) в уголке. При этом функция одна из важнейших, она очень сильно упрощает и ускоряет игру.

Недосмотрели один момент в «Агрессии», там в окне строительства зданий продублирована функция прокрутки по городам (переход к следующему или предыдущему городу). Вышло так, что сначала эту функцию (а она важная) сделали почему-то только для меню строительства. А позже ей нашли место под «портретом» города и она превратилась в стандартное решение для всех типов объектов в игре. Вроде бы мелочь, но жить мешает.

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

[Айвен]: Да, в Blizzard умеют делать интерфейсы. Приведу другой пример, когда не самая лучшая реализация интерфейса почти не навредила игре — «Ведьмак». В целом интерфейс там удобный и функциональный, но, чтобы нормально им пользоваться, надо потратить довольно много времени на изучение и привыкание. И визуально он выполнен странно. Мне кажется, что при такой же компоновке и функционале, но в другом визуальном исполнении, он был бы гораздо приятнее и дружелюбнее.

[Brent Fox]: Я снова буду говорить банальности, но интерфейс — сердце игры. Ведь что нужно геймеру? Чтобы игра его не напрягала, а если и напрягала, то делала это приятно. Вся важная информация, необходимая для принятия решений, должна находиться под рукой, чтобы можно было вовремя реагировать на любые изменения игровой ситуации.

Представьте себе, что вы заходите на кухню налить себе чашку чая, и тут оказывается, что у вас нет рук, чтобы это сделать, а рядом с чайником висит табличка «Наливай ногами». Заманчивая перспектива? Вот в играх точно так же: для любого очевидного действия должен быть простой и логичный интерфейс. Если его не будет, геймер будет разражен и уйдет в игру, где чай наливают руками.

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

Игры со схожим геймплеем имеют схожие интерфейсы. Это же естественный отбор! Все, что плохо, отсеивается. Кстати, геймплей и интерфейс — вещи взаимосвязанные, и, изменяя одно, можно влиять на другое. Допустим, создавать эдаких геймплейных мутантов. Оставляем только две клавиши управления, и смысл игры меняется.

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

Реальный подход

[Игромания]: Кто создает игровой интерфейс?

[AG]: Для разработки полноценного интерфейса нужны три человека: дизайнер, художник и программист. При наличии гибкого движка интерфейса, к которому есть инструментарий, от программиста можно отказаться. Или привлекать его по мере необходимости, когда нужно добавить новые функции. При удачном стечении обстоятельств дизайнер и художник могут быть одним человеком.

[amicus]: У нас этим занимаются геймдизайнер, художник, программист, тестер — примерно в такой последовательности. Обычно дизайнер (иногда не один, а 2-3 человека) придумывает интерфейсное решение, рисует прототип, который отдает художнику. Пока делается арт, работа над логикой продолжается. В результате художник время от времени получает лист с исправлениями. Да и графическое решение немного меняет интерфейс, потом оно еще раз меняется в процессе «монтажа» в игру. А потом еще немного в ходе тестирования. Ошибка на любом этапе может быть фатальной.

[Rai]: Интерфейсы делают те, кто может их делать. Многое зависит от технологий: двухмерный или трехмерный интерфейс, анимированный или нет, существует ли инструментарий или требуется помощь программиста. Допустим, нам требуется двухмерный анимированный интерфейс. Кто его будет делать?

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

2. Проектировщик делает сетку интерфейсов, задает правила, по которым интерфейс компонуется, определяет размеры элементов. Все это на основе описания, полученного от геймдизайнера.

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

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

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

6. Программист пишет код, пытаясь понять логику, которой руководствовались все остальные члены команды.

Все это в идеале, на деле один человек может работать по нескольким направлениям, а где-то потребуются 2-3 человека. Зависит от ситуации.

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

Эволюция интерфейса RTS. Каких-то концептуальных изменений со времен Dune 2 не произошло.

[ChS]: Наши программисты давно освобождены от работы над интерфейсами конкретных проектов. Потому что в свое время они сделали универсальный движок. Теперь сборка от и до происходит в редакторе Vista Engine. Этим занимаются контент-менеджеры по схеме, составленной главным геймдизайнером игры (он, кстати, назначает все клавиши управления). Концепт-дизайнер может потребовать, чтобы сделали какой-то дополнительный элемент интерфейса, и это обязательно будет учтено.

[Айвен]: У нас сначала геймдизайнер составляет список требований по функционалу интерфейса. Потом он же проводит анализ существующих игр и выдает целую кучу набросков с макетами. Все это дело обдумывается, согласовывается с главным геймдизайнером и передается дизайнеру интерфейсов (специальный «умный» художник, который на них собаку съел). Он уже видит функционал, знает пожелания геймдизайнеров, но не обязан им жестко следовать.

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

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

[Rai]: Игры без интерфейса не бывает в принципе. Для наших постсоветских коллег характерна болезнь, которую я называю «концептофилией». Многие считают, что идея (концепция) — это все, а уж способ реализации и качество выделки вторичны. Этим мы глобально отличаемся от западных разработчиков, они склонны полировать свою продукцию до максимально достижимого в рамках бюджета состояния.

Эта болезнь проявляется во всем: в музыке — ну давайте, наконец, признаем, что русский рок по качеству просто позорен, его слушают за тексты (концепция), а не за исполнение; в кино — есть какие-то попытки, но без понимания того, что кино делают не только спецэффекты, поэтому ленты похожи на плохо порубленные видеоклипы; в играх. можно я не буду продолжать?

Западные разработчики такой болезнью не страдают, поэтому делают свою работу качественно, не стесняясь искать наиболее удачные решения в любом направлении. А у нас концептофилия породила много забавных заблуждений. Например, что технология способна продавать игры, и если прикрутить к проекту шейдеры последнего поколения, то диск купят миллионы. Или сомнения в особой важности интерфейса. Заметим, речь идет даже не о том, чтобы признать интерфейс приоритетным направлением, а просто поставить его на один уровень с программированием AI или созданием 3D-моделей.

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

Трудный случай

[Игромания]: Наверняка есть какие-то общие принципы создания интерфейса?

[AG]: Разработка интерфейса строится на нескольких принципах: вначале «он нужен», затем «нам нравится», потом «надо переделать», через некоторое время «надо красиво», а на заключительном этапе «нет времени».

[Brent Fox]: Существует много разных концепций проектирования интерфейса. Вот несколько важных идей, которыми руководствуется наша студия:

— информация должна быть простой и понятной;

— геймеры не любят читать текст;

— надо понять целевую аудиторию игры и спроектировать интерфейс под нее.

Вроде бы элементарные вещи, но как же часто про них забывают!

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

[Игромания]: Какие основные ошибки допускают разработчики при проектировании интерфейса?

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

[AG]: Самые распространенные:

— отсутствие четких приоритетов в отображаемой информации, в результате на экран вываливается все и сразу;

— любовь к тексту;

— неграмотное использование свободного места;

— преобладание эстетики над эргономикой (красивостей над удобностями);

— несоблюдение стандартов (в одном месте сделали так, в другом иначе).

[amicus]: Самая главная ошибка — отсутствие четкого видения всей структуры интерфейса до начала работ по созданию арта. Мы эту ошибку прошли на своем опыте. Несколько раз по-живому перекраивали «Стальных монстров» и «Агрессию». Поскольку интерфейс в сложных проектах представляет собой большую древовидную структуру, в ней легко потеряться. В итоге возникают разного рода нестыковки. Последствия печальны.

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

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

[AG]: Отсутствие четкого видения всей структуры интерфейса не является ошибкой. Это неизбежность. Интерфейс нужен сразу, причем с артом, чтобы на выставках показывать. Не говоря уже о том, что нельзя увидеть финальную структуру интерфейса до релиза. Ее просто нет! Интерфейс будет сто раз меняться и перерисовываться. К этому надо быть готовым и не разбазаривать ресурсы на арт в начале разработки.

[amicus]: Точно так же мы делали раньше. В итоге — многократные переделки и куча работы в корзину. Теперь на двух последних проектах мы сначала делаем все проектирование интерфейса «на бумаге» (со схемами/графиками), потом геймдизайнеры делают простенькие арт-наброски (по каждому экрану интерфейса отдельный эскиз). Все это время ищутся решения и макет меняется, но затраты минимальны, потому что художники еще не «в деле».

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

[Rai]: Самая частая ошибка — неумение учитывать изменяющиеся условия. К примеру, текст в макете идеально входил в отведенную область, а сценарист возьми да и напиши в три раза больше положенного. Еще большой ошибкой будет демократия, то есть попытка учесть все мнения об интерфейсе — они часто противоречат друг другу. А самая страшная ошибка — не вывести на экран действительно важную для игрока информацию, которая нужна ему для принятия решений.

[tool]: Самый трудный случай — неудачный выбор типа управления и отсутствие альтернативных схем. Переделка почти невозможна либо отнимет столько времени, что легче сделать новую игру.

Стандартное будущее

[Игромания]: На сегодняшний день в играх, как правило, используется стандартная структура интерфейса для каждого жанра. Неужели все оптимальные решения давно найдены?

[Rai]: Ну, в общем, да. В качестве неплохого примера совершенно нестандартного интерфейса можно привести EVE Online. Это тот случай, когда инновации в интерфейсе оправданы инновациями в геймплее. Шокирующее поначалу количество менюшек и кнопочек быстро перестаешь замечать, а потом и вовсе воспринимаешь как наиболее органичный и единственно правильный вариант.

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

А в остальном большинство разработчиков просто копируют интерфейсы друг у друга. Часто изменения ограничиваются стилистикой и введением одного-двух дополнительных элементов. Постепенно, если эти особенности оказались удачными, их копируют другие разработчики. Так развиваются интерфейсы в рамках определенных жанров. Например, Dune 2 задала для стратегий стандарт «панель сбоку». А StarCraft сменил идею на «панель снизу». Homeworld 2«панели сбоку, снизу и еще немного в уголке».

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

[amicus]: Есть определенные устоявшиеся схемы, основанные на человеческой психологии и физиологии. Учитывается, допустим, что считывание информации с экрана идет с левого верхнего в правый нижний угол. А логически взаимосвязанные функции управления должны располагаться рядом, чтобы игроку не надо было глазами туда-сюда прыгать. Эти законы лучше без надобности не нарушать. А вот всякие «жанровые традиции» — с ними можно и поспорить. Но опять же, если это нужно для дела, а не ради оригинальности.

[Brent Fox]: Чувствую в вашем вопросе сарказм. Поймите, «стандартно» — далеко не всегда плохо. Можно, конечно, для каждой игры создавать новый интерфейс. Скажу больше, если все делать правильно, то каждый такой интерфейс будет удобен.

Вот только не забывайте, что есть еще и такая вещь, как привыкание. Геймеры привыкли к определенному порядку действий. Так что же, заставлять их каждый раз переучиваться только потому, что девелопер решил, простите, выпендриться?

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

[Игромания]: Есть мнение, что чем меньше элементов HUD заполняет игровой экран, тем лучше. Это верно или мнение о пользе минимализма сильно преувеличено?

[AG]: На основном экране должен быть минимум необходимой информации в самом доступном виде. А все дополнительные данные выводятся на дополнительных экранах по требованию игрока. Если интерфейс загромождает полезное пространство экрана, это очень плохо.

[Rai]: У минимализма есть свои преимущества и свои недостатки. Считается (неясно, правда, почему), что отсутствие индикаторов, лайфбаров и прочих счетчиков в HUD способствует большему погружению в игровой процесс. Крайне спорное утверждение. Одна из отличительных особенностей человеческого восприятия — умение отсекать неактуальную информацию (например, все уже на автопилоте игнорируют рекламные баннеры).

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

[Erno]: Количество элементов в HUD очень сильно зависит от человека. Некоторым графический интерфейс на экране только мешает, а другие без него жить не могут. Идеальный вариант — сделать все настраиваемым: кому надо — выведут максимум информации, а другие, наоборот, оставят только полоску здоровья или мини-карту.

[Игромания]: В каком направлении, на ваш взгляд, будут развиваться игровые интерфейсы?

[AG]: Будут стремиться к минимализму и динамичности. То есть мало того что будет выводиться минимум информации, так она еще будет отображаться не постоянно, а в зависимости от игровой ситуации.

[Erno]: Я большой поклонник контекстно-зависимых интерфейсов. Играть в игру с «умным» управлением легко и приятно. В Age of Conan я помогал дизайнерам разработать именно такой интерфейс: в зависимости от ситуации на экран выводится нужная информация.

[amicus]: Насколько можно судить по жанру RTS, интерфейс становится более легким и простым в плане графики. Больше полупрозрачных элементов, сами формы достаточно просты и вместе с тем хорошо читаются. Что же касается всяких фортелей, вроде полного 3D или контекстно-зависимого интерфейса, думаю, до этого еще не скоро дойдет. В нынешних играх все эти выкрутасы просто не нужны.

[Brent Fox]: Очень хочется рассказать сказку, как оно замечательно будет в будущем. Но не думаю, что в ближайшие годы интерфейсы игр серьезно поменяются. Будет медленное поступательное развитие. Не забывайте, что моду задают хитовые проекты. И я что-то не наблюдаю в них никаких инновационных интерфейсов. Меняется графика, появляется пресловутый sandbox-геймплей, но интерфейс неизменен. Несколько необычную систему взаимодействия персонажа с окружением можно наблюдать в Gears of War, но это скорее локальный успех: не думайте, что такие игры посыплются валом.

Концептомания

1. Интерфейс должен предоставить игроку всю необходимую игровую информацию и позволить выполнить все необходимые действия.

2. Элементы интерфейса должны иметь ясное и понятное с первого взгляда предназначение.

3. Интерфейс должен быть выполнен аккуратно. Если в одном месте между кнопочками отступ в 8 пикселей, то и в другом должен быть такой же отступ.

4. Интерфейс лучше строить на уже имеющихся аналогах.

5. Новые, неожиданные решения оправданы лишь инновационным геймплеем.

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

7. Если интерфейс унаследован от предыдущей части игры, он не должен уменьшать функциональные возможности игрока и должен быть узнаваемым.

8. Интерфейс должен по возможности соответствовать стилистике игры, подчеркивать ее атмосферу.

Как утверждают разработчики, никаких потрясений в игровых интерфейсах не ожидается — ни изображений отделов головного мозга главного героя в полном 3D, ни главного меню в виде мини-игры. Все банально, все стандартно. Так, как мы любим.

5 идей интерфейса, которые не дожили до наших дней

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

NLS Дугласа Энгельбарта

Прискорбно, но факт: многие узнали о том, кто такой Дуглас Энгельбарт, только когда он скончался 2 июля 2013 года (ему было 88 лет). Впрочем, и после этого заслуги и изобретения Энгельбарта в большинстве публикаций трактуются не вполне верно. Чаще всего его называют создателем компьютерной мыши, и это правда: первую мышь действительно разработали под его руководством. Иногда приводят более длинный список изобретений: гипертекст, телеконференции, скриншейринг, совместное редактирование документов, многооконный интерфейс и, конечно же, мышь. Снова никаких выдумок: система NLS (от oN-Line System), над которой работал Энгельбарт, действительно включала в себя все перечисленное. Мало того, к списку легко можно прибавить изобретение аутлайнов (ветвящихся документов), тегов, системы контроля версий, вики и первой программы для показа презентаций.

Так что же не так с этими описаниями, раз все факты правдивы? Неверна интерпретация. Сегодня мы смотрим на знаменитое «Демо» Энгельбарта и разгадываем в NLS кусочки того, чем пользуемся. Однако — вот парадокс! — многие части энгельбартовской системы образца 1968 года до сих пор не реализованы в полном объеме, а NLS больше похожа на так и не развившуюся ветвь эволюции, чем на предшественника сегодняшних ОС.

Цели Энгельбарта никогда не были напрямую связаны с конкретным технологиями: чего он хотел по-настоящему, так это расширить возможности человека и упростить совместную интеллектуальную работу. Из этого стремления происходят и все те необычные вещи, что есть в NLS. Видеоконференции — потому что люди, работающие вдвоем, должны видеть друг друга; два курсора мыши — потому что как иначе смотреть, что делает собеседник? Даже странности интерфейса NLS отчасти объясняются тем, что Энгельбарт был готов пожертвовать удобством ради потенциальной возможности научиться работать максимально эффективно.

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

Этот странный девайс — аккордная клавиатура. Овладеть ей было непросто, но в работе она была эффективна

Хакер #181. Вся власть роботам!

В NLS использовались передовые технологии: ЭЛТ-монитор с возможностью вывода растровой графики, мышь и клавиатура. Вернее, две клавиатуры: одна обычная, вторая аккордная, вроде тех, которые применяют стенографы. Мышь служила в качестве указателя на объект, тогда как команда, прилагаемая к объекту, вводилась левой рукой — при помощи аккордной клавиатуры. Это примерный аналог сочетаний клавиш в современных ОС, но с той разницей, что в NLS они были основным способом работы. Запомнить аккорды было непросто, но те, кто справлялся, обретали возможность работать на NLS с впечатляющей скоростью.

Смотря «Демо», невозможно не заметить мучения, которые требовались для создания такой системы. Она работала на мейнфрейме (с диском аж на 96 Мб!), скриншейринг был реализован при помощи кинокамер, закрепленных напротив мониторов, а для демонстрации совместной работы над документом приходилось звонить в другое учреждение по модему — на фоне слышно характерное шуршание. В конце презентации Энгельбарт мечтательно говорит, что скоро его соратники по DARPA завершат работу над созданием сети ARPANET, работающей на поразительной скорости 20 Кбит/с, и тогда-то можно будет устанавливать терминалы NLS где угодно — хоть в Массачусетсе, хоть в Кембридже!

Замысловатая реализация NLS и необходимость учиться командам-аккордам — не единственные причины, по которым новаторские идеи не получили распространения и достойного развития. NLS добили персональные компьютеры: к восьмидесятым годам подключение по быстрой сети все еще было редким удовольствием, а вот машины, исполняющие (пусть и примитивные) программы локально, начали распространяться со страшной скоростью. Аспекты многопользовательской работы в NLS были прочно связаны с концепцией системы с разделением времени (так в те времена называли многозадачность) и клиент-серверной архитектурой, постепенно уходившей в прошлое. Только вот это никак не оправдывает постыдного факта: сегодня мы имеем гигабитные каналы и на порядки более мощные компьютеры, но при этом не имеем систем, которые позволяли бы так легко работать вдвоем, как это можно было делать на NLS.

Alto Алана Кея

«Я пишу это вступление, сидя в самолете на высоте 35 тысяч футов. У меня на коленях лежит компьютер весом пять фунтов (2,2 кг) — это разработанный в 1992 году „промежуточный Dynabook“, который к концу года будет продаваться по 700 долларов. У него четкий плоский графический дисплей с высоким разрешением, система с перекрывающимися окнами и значками, указующее устройство, значительный объем постоянной памяти и объектно-ориентированная рабочая среда. Также у него есть встроенная сетевая подсистема и даже возможность поддерживать беспроводное соединение. Здесь работает Smalltalk, и эту систему я использую в своей работе с детьми. В некоторых (количественных) аспектах это больше чем концепция Dynabook, в некоторых (качественных) кое-что еще осталось довести до ума. Но в целом это как раз то, что я задумывал в поздние шестидесятые», — так начинается эссе Алана Кея под названием «Ранняя история Smalltalk».

Описываемый здесь графический интерфейс с окнами и значками, равно как и объектная среда, — все это изобретения Алана Кея. Как известно, Smalltalk был первым объектно-ориентированным языком программирования, а его интерфейс впервые имел так хорошо знакомый нам сегодня набор из перекрывающихся окон, значков, ниспадающих меню и курсора мыши. Кто бы мог подумать, что один человек способен вот так взять и с чистого листа создать современную концепцию программирования и интерфейсов? Но на самом деле лист был не совсем пустым.

Вдохновлением для Smalltalk стал еще более ранний язык программирования — LISP. Еще студентом Алан Кей восхищался компактностью, выразительностью и уникальным функциональным стилем Лиспа. Он хотел сделать что-то наподобие, но с возможностью делить код на отдельные сущности, которые могли бы обмениваться сообщениями друг с другом. Что до графического интерфейса, то здесь Кею примером служили два проекта. Первый — графическая система проектирования Sketchpad, которую разрабатывал научный руководитель Кея Айвен Сазерленд. Второй — NLS.

Когда Дуглас Энгельбарт показывал Кею NLS, первому было 42, второму — 28. Старина Энгельбарт мечтал о компьютере на каждом рабочем столе, но не мог отказаться от идеи мейнфреймов с терминалами (и на то были причины). Энгельбарт был на шаг впереди прогресса, но Кей — сразу на два: он уже грезил портативными компьютерами, которые можно было бы использовать в школах.

Xerox Star 8010 был создан для офисов, поэтому Star сначала даже не продавали поштучно

Однако компания Xerox, финансировавшая разработку, о ноутбуках не думала. Там были увлечены продажей дорогих лазерных принтеров и хотели сделать мощную рабочую станцию к ним в комплект. Среда Smalltalk была нужна в качестве операционной системы. Организациям планировалось поставлять комплекты из нескольких компьютеров Alto по 16 тысяч долларов каждый, принт-сервера, файл-сервера и, конечно, лазерного принтера. В итоге вся система стоила от 50 до 100 тысяч долларов (140–280 тысяч в современных деньгах). Неудивительно, что организации предпочитали простенькие Commodore VIC-20 по 300 долларов за штуку. Всего к 1979 году было продано всего около тысячи компьютеров Alto.

Справедливости ради стоит сказать, что нельзя целиком винить Xerox в провале Alto и заодно с ним, по-хорошему, и Smalltalk в качестве мейнстримового языка программирования (в академических кругах Smalltalk до сих пор уважаем). Система Кея действительно требовала необычно мощного по тем временам компьютера. Но кто знает, что бы случилось, если бы в Xerox попридержали идею, чтобы потом попробовать «выстрелить» пусть и не самым дешевым, но персональным компьютером? Не исключено, что мы бы все сейчас работали на ксероксах!

Зато оконный графический интерфейс поддавался воссозданию и без объектно-ориентированного языка. В качестве запасной стратегии в Xerox сделали вложение в Apple, и основатель компании Стив Джобс воспользовался случаем и напросился на экскурсию по исследовательскому центру Xerox PARC. Как бывший слушатель лекций по каллиграфии, Джобс моментально влюбился в растровые шрифты компьютеров Xerox и в их интерфейс.

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

McIntosh Джефа Раскина

В 1982 году в Apple произошел настоящий кулуарный переворот. Совет директоров за вздорное поведение отстранил Стива Джобса от проекта Lisa, готовившегося прийти на смену популярным моделям Apple II и III. В Lisa уже применялся подсмотренный в Xerox PARC графический интерфейс, но Джобс, потеряв контроль над Lisa, захватил другую разработку — McIntosh. Уже через два года Макинтош станет знаменитым, но из-за влияния Джобса не будет иметь ничего общего с оригинальной разработкой. А ведь она тоже не была лишена гениальности!

До Джобса над домашним компьютером будущего в Apple трудился Джеф Раскин — бывший профессор Калифорнийского университета, который сперва в качестве подработки написал учебник по эппловской версии BASIC, а затем был приглашен на работу руководителем отдела документации. Доведя буклеты до совершенства, Раскин предложил руководству Apple собственный проект компьютера: дешевого, простого в освоении и использующего новаторские идеи.

Созданный Раскиным компьютер и его ОС были очень необычными. Там не применялось разделение на файлы — вместо этого был один длинный документ с маркерами, делящими его в нужных местах. Интерфейса в его нынешнем понимании тоже не было: команды можно было набрать и исполнить в любом месте. На клавиатуре имелась специальная кнопка Leap, позволяющая скакать между маркерами. Система вместе с единственным документом занимала одну дискету, что было крайне удобно в условиях отсутствия жесткого диска и второго дисковода. ОС целиком помещалась в память, и все содержимое в случае надобности всегда можно было выгрузить на ту же или другую дискету, чтобы потом начать работу с того места, где оставил.

За интерфейсом McIntosh стояли серьезные исследования. —Раскин рассмотрел те действия с компьютером, которые чаще всего приводят к ошибкам, и пришел к выводу, что источник проблем — режимы. Вот простой пример режима: мы хотим выполнить какое-то привычное действие, например напечатать букву, но буква не печатается из-за того, что активно какое-то меню, и команда будет относиться к меню. Активность меню — это и есть режим. Чем больше в интерфейсе режимов, тем больше ошибок мы будем совершать. Раскин разработал систему научных методов, которая позволяет оценивать объективные параметры интерфейсов и улучшать их.

Оригинальный McIntosh в полной мере удовлетворял своду правил Раскина. К тому же он был относительно дешев — в том числе из-за не самого нового процессора Motorola 6809 — более мощный просто не требовался. Кто знает, какая судьба ждала бы «оригинальный Макинтош», если бы не второй этап переворота — захват Джобсом власти над рабочей группой Раскина.

Джобс хотел сделать все по-другому: добавить графический интерфейс и мышь, установить более мощный процессор Motorola 68000 и даже сменить название на Bicycle («Компьютер — это велосипед для ума», — гласила тогдашняя реклама Apple). Новое название не прижилось, а вот все остальное было воплощено. Идеи Раскина оказались не нужны, и тот, рассорившись с Джобсом, вскоре покинул компанию.

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

Plan 9 Роба Пайка

Роб Пайк — один из тех людей, кто приложил руку к оригинальному UNIX, однако к кружку отцов-основателей он не принадлежит. Пайк устроился работать в Bell Labs только в 1980 году, когда основа UNIX была давно заложена. Впрочем, занятие он нашел без труда: разработал систему кеширования памяти, в соавторстве с Брайаном Керниганом написал пару технических книг о UNIX и параллельно работал над первыми графическими терминалами — они назывались Blit.

Сейчас Роб Пайк работает в Google, где создал язык Go

Устройство Blit не отличалось элегантностью: это была первая попытка создать графический оконный интерфейс для UNIX, и пришедший пару лет спустя X Window оказался более прогрессивным. Со временем «Иксы» обрели популярность, но что тогдашние, что сегодняшние графические среды UNIX и Linux — это лишь подражания интерфейсу Mac OS и, позже, Windows, надстроенные сверху над классической системой. У Роба Пайка же в голове было видение более современной и совершенной версии UNIX.

В середине восьмидесятых годов часть разработчиков оригинального UNIX, включавшая Роба Пайка и Кена Томпсона, организовала отдельную группу, которая работала над «Юниксом будущего» — его называли Plan 9 в честь фильма «План 9 из открытого космоса». При общей схожести с UNIX Plan 9 имеет серьезные усовершенствования в области файловой системы, сетевого протокола и взаимодействия процессов. А еще у него совершенно уникальный пользовательский интерфейс.

Оконный менеджер Plan 9 называется Rio, и он имеет серьезные архитектурные отличия от X Window. Каждое окно здесь образует собственное пространство имен и представлено в файловой системе. Раз в UNIX уже есть файлы-процессы, файлы-порты и файлы-устройства, так почему бы не сделать файлами окна? Тогда к ним можно будет обращаться из командной строки, передавать в них информацию и читать из них — то есть делать все то же, что с другими файлами.

Пользователи *nix могут установить портированную версию Acme (bit.ly/KwHgnN), либо ознакомиться с его идейным наследником — оконным менеджером wmii (bit.ly/1avW543)

Кроме Rio, в Plan 9 имеется рабочая среда Acme, и она тоже весьма необычна. Acme представляет собой гибрид между плиточным менеджером окон (современные аналоги — это Wmii, Ratpoison и тому подобное), программистским текстовым редактором и консолью. И все это с совершенно уникальным интерфейсом, аналогов которому сегодня нигде не найти.

Знакомство с Acme обычно начинается с того, что пытаешься нажать какой-нибудь пункт меню и не понимаешь, почему ничего не происходит. Следом обнаруживается, что меню поддельное: пункты — это простой текст, который можно дописать или стереть. Как и в системе Раскина, команды здесь можно вводить хоть прямо в тексте, а меню — это просто условность. Но, в отличие от «оригинального Макинтоша» (и слегка в стиле NLS), без мыши (причем трехкнопочной!) в Acme обойтись нельзя никак. Левая кнопка выделяет текст, средняя исполняет команды, правая ищет по тексту, а также открывает файлы. Чтобы вырезать фрагмент, нужно выделить левой и, не отпуская, нажать на правую кнопку; чтобы вставить — левую и правую вместе, а чтобы скопировать — подряд совершить выделение и вставку, не отпуская левой кнопки.

Больше всего, пожалуй, Acme впечатляет отсутствием разницы между типами окон. Все они содержат текст, и его никто не запрещает редактировать. Возможность исполнять команды откуда угодно тоже бывает полезной: например, работая над скриптом, можно выделить пару строк и запустить их, результат откроется в новом тайле. А если попадется путь к файлу, то можно выделить его правой кнопкой, и тогда соответствующий файл откроется рядом.

Гибкость Acme и продуманная внутренняя логика должны делать его привлекательным для программистов, но для массового применения он в любом случае не годится. Впрочем, и сам Plan 9 не стал массовым. Примерно как Smalltalk проиграл менее элегантному, но более практичному C++, Plan 9 остается лишь «той системой, авторы которой придумали Unicode», игрушкой исследователей и, конечно, легендой.

Microsoft Bob

Каждый, кто хоть раз искал документ в Windows XP, наверняка удивлялся внезапному появлению в углу экрана желтой собаки. Собака ведет с пользователем диалог через пузыри с текстом, то и дело виляет хвостом, принюхивается, шевелит ушами и вообще ведет себя как настоящая собака. При желании ее можно заменить на бородатого волшебника, но и он не избавит от недоумения: что эти персонажи забыли в Windows?

Поисковая собака, равно как и Скрепыш, ненавистный всем пользователям Word 97 и 2003, — остатки проекта Microsoft Bob. Интерфейс Bob был настолько же непохож на традиционные окна, насколько и энгельбартовский NLS, но отличия направлены ровно в противоположную сторону. Исследовательницы Карен Фрайс и Барри Линнетт решили, что своим успехом Windows обязана метафорам рабочего стола, папок и файлов-страничек, а затем придумали сделать интерфейс, полностью состоящий из изображений реальных предметов и анимированных персонажей. Вот это будет непревзойденная интуитивность!

За ведение проекта взялась Мелинда Френч — будущая жена Билла Гейтса. И к 1995 году «женская сборная» Microsoft уже могла с гордостью демонстрировать готовый продукт.

Microsoft Bob напоминал мегапопулярные в те времена рисованные приключенческие игры. Знакомство с программой начиналось с дверного молотка на большой красной двери, за которой скрывалось несколько комнат: кабинет, гостиная, детская, чердак и гараж. Убранство дома можно было выбрать из современного, ретро, футуристичного и других. В варианте «дом с привидениями» был даже экран с кладбищем.

По комнатам дома разбросаны предметы, за каждым из них стояла возможность выполнять какое-то из повседневных действий с компьютером. На столе помещались часы, календарь и адресная книга. Ручка означала переход к текстовому редактору и так далее. Всю дорогу пользователя сопровождал один из двенадцати помощников, каждый из которых отличался зашкаливающей умильностью. От выбора персонажей иногда зависел и стиль диалогов: так, средневекового вида мужчина в берете говорил высокопарным стилем.

Среди приложений числились почтовик, финансовый планировщик, программа для составления завещаний и даже игра «Угадай страну», которой руководил изможденного вида фиолетовый слон Хэнк.

Кроме поразительно назойливых предупреждений и псевдоинформативных подсказок, помощники иногда выдавали и полезные панели — к примеру, для работы с текстом. В некоторой мере это напоминает современный Ribbon в Microsoft Office. Но вот досада — формат текстового редактора «Боба» не был совместим с Word. Не успели внедрить и браузер, а учитывая, что 1995-й для многих стал годом первого знакомства с интернетом, это было большим упущением.

Ни роскошное убранство, ни разговорчивые собачки и кошечки, ни даже слон Хэнк не убедили пользователей в необходимости покупать «Боба». Всего было продано 58 тысяч копий программы, и на следующий год в Microsoft решили перестать позориться и закрыть проект.

В отличие от других перечисленных в этой статье интерфейсов, «Боб» не выглядит как пример для подражания и источник важных идей. Лучшее, на что он сейчас годится, — это служить примером в споре любителей скевоморфизма (интерфейсов, полных метафор из жизни) и сторонников строго функционального оформления программ. Но в мире технологий все меняется очень быстро. То, что сегодня — тупиковая ветвь и посмешище, завтра может начать считаться гениальной идеей, опередившей время. Если компьютеры обретут истинный интеллект, то, кто знает, может быть, мы станем обращаться за советом к виртуальной собаке Бобу, а не копаться в окошках.

Как научиться программировать с нуля и найти первую работу. Большой FAQ от Reddit

Сайт dev.by опубликовал самые часто задаваемые вопросы по теме обучения программированию с нуля и поиска первой работы, собранные /r/learnprogramming.

Список вопросов, на которые отвечает гайд

Начало
С чего мне начать?
Какой язык программирования стоит выучить первым?
Где можно найти качественные образовательные ресурсы?
Как совершенствовать навыки
Как перейти с начального уровня на средний?
Где можно найти тренировочные упражнения и идеи для проектов?
Как улучшить навык реализовывать задачи/задания в программах (алгоритмическое мышление)?
Я не могу придумать классную идею для проекта. Мне просто не хватает креативности? Как другие программисты ищут вдохновение?
Где можно найти примеры хорошего кода и проектов для обучения?
Как выучить темы, которые рассматриваются в стандартных университетских программах по информатике?
Как начать крупный проект и не забросить его?
Распространённые страхи и опасения
Я уже слишком стар для программирования?
Есть что-то другое, чему мне сначала нужно научиться?
Нужно ли мне хорошо знать математику?
Я много гуглю или не знаю, как делать что-то, когда только собираюсь начать. Это плохо?
Программировать сложно?
Вопросы про обучение
Что значит «знать язык» или «уметь программировать»?
Я только что начал учить язык Х. Стоит ли мне начинать учить язык Y?
Стоит ли учить более одного языка программирования одновременно?
Это плохо, что у новичков иногда возникают проблемы с задачами и упражнениями?
Как найти/поддерживать мотивацию, чтобы учиться программировать?
С чего мне начать Х?
С чего начать делать видеоигры?
С чего начать делать веб-сайты/веб-приложения/веб-разработку?
С чего начать делать мобильные приложения/приложения для Android/приложения для iOS/приложения для Windows Phone?
Как автоматизировать что угодно?
Терминология и словарь
В чём разница между информатикой (computer science, CS), компьютерной инженерией (computer engineering, CE), программной инженерией (software engineering, SE), программированием и кодированием?
С чём разница между Cи, C++, Objective-C и C#?
В чём разница между Java и JavaScript?
Инструменты и управление версиями
Что такое управление версиями/контроль версий? Стоит ли мне его использовать?
С чего начать использовать управление версиями?
Что такое IDE? Стоит ли мне её использовать?
Компьютеры и операционные системы
Какую операционную систему мне следует использовать?
Какой компьютер/ноутбук мне следует купить?
Карьера и работа
Можно ли заработать много денег на программировании?
Можно ли получить работу в программировании, не имея диплома по информатике? Или вообще без высшего образования?
Как войти в эту отрасль и получить стартовую должность?
Что делать дальше?
Больше не новичок
Программирование — лишь инструмент
Как улучшить навыки программирования
Разное
Как обучить программированию ребёнка?
Как делать вклад в open source-проекты?
У меня вопрос по Си/Python/другому языку.
Там нет моего вопроса. Что мне делать?
Да, мой вопрос есть в ЧаВо, но я хочу получить ответ от реального человека.
Как редактировать вики /r/learnprogramming (включая эти ЧаВо)?

С чего мне начать?

Если вы хотите научиться кодить, для начала полезно правильно понимать, зачем вам это нужно. В этом видео на YouTube Кевин Чирс отлично объяснил, как нужно подходить к изучению программирования.

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

  1. Найти небольшую задачу или проект, который вам будет интересно решить. Можете попробовать создать инструмент для решения небольшой жизненной задачи или с нуля реализовать программу, которая вам кажется интересной. Такой проект мотивирует вас продолжать учиться кодить и даст возможность применить полученные знания на практике.
  2. Почитайте информацию о разных языках программирования, чтобы выбрать наиболее подходящий для вашего проекта. (См. рекомендации ниже).
  3. Найдите один качественный ресурс для новичков по этому языку и руководствуйтесь им. (Также см. ниже).
  4. Помимо этого ресурса, гуглите и задавайте вопросы.
  5. Выполните несколько оригинальных проектов на этом языке.

Вот эти вещи мы советуем не делать:

  1. Нельзя просто пассивно штудировать выбранный ресурс: делайте упражнения и домашние задания; практика – это незаменимая часть обучения программированию.
  2. Не переключайтесь без необходимости с одного языка на другой. Выберите один и придерживайтесь его, потому что главное в программировании — решать задачи, а не выучить языки. Научиться решать проблемы сложно, и этот навык можно отточить, только если постоянно тренироваться. Каждый раз, когда вы переключаетесь на другой язык, то теряете время, в которое могли бы тренироваться применять полученные знания, чтобы развить навыки решения задач.
  3. Не прекращайте учиться после того, как закончили какой-либо курс. Программирование — одна из тех областей, где всегда есть, чему учиться.

И наконец, помните, что обучение программированию — долгий и трудный процесс. Если вам тяжело, не расстраивайтесь! Это абсолютно нормально, и многие люди годами учатся и тренируются, пока не почувствуют себя достаточно компетентными, чтобы искать работу или сделать вклад в серьёзный проект. К счастью, просто начинать учиться совсем не так сложно.

Какой язык программирования стоит выучить первым?

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

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

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

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

Я хочу научиться…

  • …разрабатывать приложения для iPhone — Swift (ещё)
  • …разрабатывать приложения для Android — Java (ещё)
  • …создавать веб-сайты — JavaScript, CSS, HTML5 (ещё)
  • …писать десктопные приложения для Windows — C#
  • …создавать 2D/3D-игры — JavaScript, C# или C++ (ещё)
  • …программировать Arduino/микроконтроллеры/роботов — Си
  • …заниматься научными/математическими вычислениями или анализом данных — Julia, Python, R или Matlab
  • …заниматься автоматизацией и разработкой скриптов — многие языки (Python, Ruby, Bash, Powershell, AutoHotKey…)

Если в списке нет того, что вам нужно, поищите другие варианты на этих ресурсах:

Если вы всё ещё не можете определиться с выбором, изучайте Python. Это хороший, доступный для начинающих программистов язык с огромным сообществом и множеством библиотек, с помощью которых можно сделать практически всё что угодно, начиная созданием игр, и заканчивая автоматизацией процессов дома или на работе и анализом данных для построения веб-сайта. Постарайтесь найти обучающий ресурс, в котором разобраны ключевые принципы и основы, прежде чем погрузиться в разработку более сложных приложений. Инструкции о том, как начинать изучение любого языка, можно найти на странице reddit getting started.

Где можно найти качественные образовательные ресурсы?

Как совершенствовать навыки

Как перейти с начального уровня на средний?

Типичный вопрос, который мы получаем от многих новичков, — «что дальше?» В частности, когда они пытались проработать какие-то уроки, пособия, курсы, но в итоге всё равно не смогли заполнить пробел между пониманием, как работает оператор if или цикл for, и как именно применять то, что они изучили, чтобы создать сложные и интересные программы.

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

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

Вот несколько советов, как не сдаваться и что делать дальше.

Перейдите с пассивного обучения на активное

Вместо того, чтобы брать курсы и уроки, которые (как вы думаете) научат вас тому, чему вы хотите научиться, начните активно искать способы обучиться самостоятельно. Например, если вы понятия не имеете, как создать игру, загуглите «как написать игру на Х», где «Х» — это язык программирования, который вы собрались использовать. Если у вас всплыло сообщение об ошибке, которая вам незнакома, попробуйте загуглить её. Если вы хотите освоить машинное обучение — погуглите и найдите годную книгу, пособие или онлайн-курс.

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

Постоянно практикуйтесь

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

Главная цель программирования — разработка прикладного решения задач, а лучший способ научиться этому — постоянно решать задачи, большие и маленькие.

(См. также ЧаВо: Где можно найти тренировочные упражнения и идеи для проектов и ЧаВо: Я не могу придумать классную идею для проекта. Мне просто не хватает креативности? Как другие программисты ищут вдохновение?)

Научитесь декомпозировать задачу

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

Допустим, вы хотите создать игру «камень-ножницы-бумага». Её можно разделить её на несколько подзадач: как получить вводные данные от пользователя, как заставить компьютер сделать случайный выбор, как определить победителя и как повторить игру (если вы хотите играть несколько раз подряд).

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

Если вы совсем не знаете, как сделать что-то (например, как заставить компьютер выбрать случайное значение), погуглите. В данном примере поиск «Х выбрать случайное значение» (где Х — используемый язык программирования) покажет несколько различных способов, которые вы сможете использовать. Иногда задачу получается разбить на множество частей без поисковика, а иногда без него не обойтись.

Так, если вы учите Java и хотите научиться писать игры, но понятия не имеете, с чего начать или как разбить задачу на составляющие, загуглите «java игры уроки». Поиск даст несколько хороших источников, которые научат вас писать игры и (обычно автоматически) разбивать процесс написания игры на подзадачи поменьше.

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

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

Больше советов смотрите в ЧаВо: Как улучшить навык реализовывать задачи/задания в программах (алгоритмическое мышление).

Будьте систематичны

Когда вы пишите и отлаживаете код, ни в коем случае не привыкайте просто пробовать сделать что-то, рассчитывая, что это случайно сработает. Будьте максимально чётки и последовательны — метод «проб и ошибок» здесь не подойдёт.

Во время написания кода остановитесь на минуту и составьте на листе бумаги приблизительные план действий. Попробуйте нарисовать какие-то схемы или набросать что-то вроде псевдокода. Если вам придётся изменить свой план (что вы, скорее всего, и сделаете), подумайте, для чего вам нужно это изменение и каким будет ваш новый план действий. (Этот этап планирования — также подходящая возможность, чтобы потренироваться декомпозировать задачи!)

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

Баги возникают тогда, когда ваши предположения не совпадают с реальностью. Если что-то кажется неправильным, не игнорируйте это: продолжайте искать, пока не выясните, в чём дело/какое из ваших предположений было неверным.

Не делайте что попало, пока что-нибудь не сработает — будьте последовательны.

Не расстраивайтесь, если приходится исправлять баги или гуглить

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

Отладка (и трудности!) — неотъемлемая часть программирования. Если получится, постарайтесь не отчаиваться и не злиться. Отнеситесь к этому как к занимательному квесту или головоломке.

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

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

(Это станет ещё вернее по мере того, как вы будете приобретать всё больше опыта. В жизни с ростом вашей компетентности сложность багов, с которыми вы будете сталкиваться, будет только увеличиваться. Иногда даже опытным программистам приходится тратить месяцы на то, чтобы найти один особенно проблемный баг.)

Не бойтесь попросить помощи

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

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

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

Больше информации читайте в руководстве о том, как задавать вопросы на reddit.

Пройдите более интенсивный вводный курс

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

Железное правило: если вводные курсы по программированию, которые вы проходили, не вызвали у вас особых трудностей или не содержали заданий, упражнений и мини-проектов, вам нужно поискать более требовательные курсы. Постоянная практика (и трудности!) — неотъемлемая часть учебного процесса.

Ещё больше подходов, рекомендаций и советов о том, как осуществить этот прорыв, читайте в следующих постах:

Где можно найти тренировочные упражнения и идеи для проектов?

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

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

Здесь список классных идей для заданий по информатике от Стэндфордского университета. Этот ресурс больше ориентирован на преподавателей информатики, которые ищут неизбитые идеи для заданий для своих вводных курсов. Поэтому это идеальный ресурс, если вы ищете короткие, несложные, но интересные идеи для проектов.

Этот ресурс позволяет активно учиться, решая головоломки разной сложности на Python. Здесь также есть обучающие видео. Акцент сделан на программировании на Python.

Если вы хотите попробовать что-то новое, на сайте Idea Machine пользователи размещают свои идеи для приложений и очень хотели бы, чтобы кто-нибудь их осуществил.

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

  • утилиты командной строки (ls, wget, curl и т.д.)
  • текстовый редактор
  • IDE
  • программу для просмотра изображений
  • пакет офисных приложений (например, Microsoft Office или Libreoffice)
  • язык программирования (интерпретатор или компилятор)
  • веб-браузер
  • базу данных (реляционную или нереляционную)
  • веб-сервер
  • систему управления версиями

Если хотите сделать что-то потруднее, но с детальным объяснением, попробуйте реализовать одну из программ 500 Lines or Less — это open source-книга, в которой пошагово описано, как создавать относительно сложные программы, занимающие не более чем 500 строчек кода (3D-моделлеры, статистические анализаторы и т.д.). В нагрузку попробуйте реализовать эти программы на другом языке, адаптируйте их под немного другую задачу или добавьте им новые интересные возможности. Исходный код книги содержит полные реализации каждой включённой в неё программы.

Что касается тренировочных упражнений, вот некоторые хорошие сайты/ресурсы для старта:

  • На reddit:
    • /r/dailyprogrammer — сабреддит с ежедневными трудностями программирования
    • /r/ProgrammingPrompts — небольшие простые проекты
    • /r/tinycode — сабреддит о том, как писать маленький код с большими возможностями
    • /r/programmingchallenges — сабреддит, посвящённый трудностям программирования (который не мешало бы оживить)
    • /r/programbattles — новый сабреддит, аналогичный /r/photoshopbattles, где пользователи соревнуются в решении задачек на написание кода
  • Общие упражнения:
    • Finxter — более 300 головоломок на Python, чтобы проверить и потренировать быстрое понимание кода.
    • Project Euler — предлагает около 500 математических задач (например, по теории чисел, простым числам, системам счисления), которые возможно решить с помощью программ (на любом языке).
    • CodeAbbey — более 200 задач по программированию, начиная с самых простых. Позволяет учиться на решениях других разработчиков.
    • Rosalind — аналогичный Project Euler сайт, который содержит более 200 задач по программированию, связанных (немного) с биоинформатикой.
    • CodeByMath — более 100 небольших задач по математическому программированию.
    • Codingbat.com — упражнения на Java и Python для новичков и программистов более продвинутого уровня.
    • codegolf.stackexchange.com — сайт, где можно постить и обсуждать вопросы по программированию.
    • Ruby Quiz — ряд заданий, в которых нужно создать небольшие программы разной степени сложности. Все решения пишутся на Ruby, но подсказки работают для любых языков, поэтому вы сможете использовать любой другой язык программирования, если справитесь без эталонного решения, в которое можно было бы подсмотреть.
    • OCS Prep Work — подготовительная работа для студентов компьютерных курсов в Омахе. В будущем она превратится в полноценную книгу, но сейчас это просто компиляция тренировочных задач. — Эндрю Эк.
    • UVA Online Judge — собрание сотен задач из конкурсов по программированию с системой онлайн-проверки решений.
    • TopCoder — содержит алгоритмические задачи, накопленные за годы соревнований, доступных на нескольких популярных языках. Также проводит онлайн-соревнования по программированию несколько раз в месяц.
    • CodeForces — аналогичен TopCoder, но даёт больше заданий на соревнованиях и имеет мало отличительных функций, включая «виртуальные конкурсы».
    • Timus — аналогичен UVA, предлагает задачи со многих прошедших соревнований (мирового и регионального масштаба).
    • SPOJ — аналогичный UVA ресурс с широчайшим выбором языков программирования для разработки решений.
    • CodeForces — содержит алгоритмические задачи, накопленные за годы соревнований, доступных на нескольких популярных языках.
    • USACO — содержит алгоритмические задачи вместе с руководствами.
  • По языкам:
    • Для Prolog, Lisp и схожих языков смотрите P-99 и L-99 — в подборках по 99 задач, которые помогут повысить уровень владения языками.
    • Python Challenge — объединяет загадки и вопросы по программированию, которые помогут продвинуться на новые ступени.
    • 4Clojure — подборка упражнений по программированию специально для Clojure — диалекта Lisp.

Как улучшить навык реализовывать задачи/задания в программах (алгоритмическое мышление)?

Это один из самых часто задаваемых вопросов.

Обычно ответ такой: пишите как можно больше программ.

Однако, есть простое упражнение, которое поможет вам улучшить этот навык:

  • Выберите действие, которое вы делаете каждый день, например, готовите завтрак или что-то в этом роде. Оно должно быть не слишком простым, но и не слишком сложным.
  • Запишите, какие шаги вы при этом предпринимаете, но сделайте это по памяти и не в то время, в которое обычно выполняете выбранное действие. (Запишите шаги, чтобы приготовить завтрак в середине дня.)
  • В следующий раз, когда будете выполнять это действие, возьмите этот план и попробуйте неотступно придерживаться его. Постарайтесь не отклоняться от записанных шагов, а если вам пришлось это сделать, то запишите, что вы сделали не по плану.
  • Улучшайте алгоритм, пока не будете довольны им.
  • Попробуйте повторить то же самое на различных действиях. С каждым разом задание будет даваться всё легче.

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

Я не могу придумать классную идею для проекта. Мне просто не хватает креативности? Как другие программисты ищут вдохновение?

Для начала, вот очень меткая цитата Чака Клоуза о том, что вдохновение нельзя просто ждать:

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

У вас будут редко появляться идеи, если вы будете просто сидеть и ждать в ожидании искры вдохновения. Вы проведёте время с гораздо большей пользой, если просто возьмёте и попытаетесь создать что-то (что угодно!), даже если эта идея кажется вам немного глупой или обречённой.

В конце концов, именно так и поступают художники и музыканты: они не обязательно начинают с того, что пытаются придумать выдающуюся картину или сочинить собственную музыку. Вместо этого они рисуют пейзажи и натюрморты или делают каверы на известные песни. Как и они, не думайте, что вам непременно нужно придумывать идеи для проектов. Переписывание уже существующих программ — испытанная временем практика. Попробуйте свои силы!

И всё же, вот несколько идей и приёмов, как придумать свой проект:

Попробуйте заново реализовать существующий проект. Как музыканты начинают с того, что делают каверы на чужие песни, для начала можете переписать программы, созданные другими людьми. Например, часто выбирают аркадные 2D-игры, такие как «Pong» или «Космические захватчики»: они вполне под силу новичкам и многому их научат. В этом ЧаВо есть ссылки на ещё больше идей для проектов.

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

Присмотритесь к вещам, которые вас раздражают. Если в вашей жизни есть что-то монотонное или что вы не любите делать, спросите себя, нельзя ли это действие автоматизировать. Чтобы получить представление о том, что можно автоматизировать с помощью компьютера, зайдите на Automate the Boring Stuff. Это руководство для Python, но все описанные в нём вещи можно сделать на любом языке программирования. Или попробуйте загуглить «как автоматизировать дом», чтобы найти больше прикладных решений.

Где можно найти примеры хорошего кода и проектов для обучения?

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

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

Посмотрите также серию бесплатных электронных книг The Architecture of Open Source Programs, в которых более детально разобрана структура популярных open source-программ. Хорошим отправной точкой может стать последняя книга серии «500 lines or less», так как программы в ней достаточно малы, чтобы вы точно могли выполнить их/с ними справиться самостоятельно и использовать в качестве стартовой площадки для запуска своего проекта.

Как выучить темы, которые рассматриваются в стандартных университетских программах по информатике?

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

What every computer science major should know — Matt Might (Что нужно знать каждому студенту, изучающему информатику — Мэтт Майт)

Даёт высококачественный обзор различных областей и причин, почему они ценны. Также содержит список материалов к прочтению.

Open source computer science degree — Open Source Society (Открытая программа по информатике от Open Source-сообщества)

Предлагает последовательный учебный план со ссылками на курсы — преимущественно Coursera — в каждой теме.

Teach yourself CS (Как самостоятельно изучить информатику)

Аналог предыдущего ресурса с тем исключением, что рекомендует как книги, так и видеолекции. Более продвинутые рекомендуемые источники связаны с системами (например, операционными системами, базами данных…)

A Self-Learning, Modern Computer Science Curriculum (Современная программа по информатике для самостоятельного изучения)

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

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

Как начать крупный проект и не забросить его?

Во-первых, досконально разберитесь в сути задачи.

Часто на этом этапе помогает Rubber Duck Debugging. Объясняя задачу или идею кому-то (или чему-то) другому, кто о ней ничего не знает или ничего в ней не понимает, человек сам более глубоко вникает в неё: ведь ему приходится размышлять над задачей значительно больше, и это приводит к её лучшему пониманию.

Во-вторых, не бросайтесь сразу же к компьютеру!

Проводите много времени, обдумывая задачу/задание. Создавайте черновики, рисунки, какой-либо псевдокод, заготовки на упрощённом языке или что угодно, что может пригодиться, на бумаге. (Я подчёркиваю это здесь, потому что цифровые инструменты отвлекают от стоящей впереди задачи — используйте только карандаш и бумагу или доску). Тщательно проанализируйте задачу.

Это приведёт нас к следующему.

Помните кое-что, когда работаете над крупным проектом в одиночку:

Всё в мире состоит из более мелких частей.

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

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

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

Как только вы дойдёте до этого момента, начинайте программировать. Напишите одну небольшую часть и протестируйте. Напишите следующую, протестируйте и т.д.

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

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

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

Как не забросить проект?

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

  • Подготовьте детальное описание проекта, так называемую «функциональную спецификацию проекта».
  • Обсудите эту функциональную спецификацию проекта с воображаемым клиентом (то есть объясните её любому неодушевлённому предмету или кому-то, кто готов вас выслушать).
  • Подкорректируйте функциональную спецификацию проекта: вернитесь к предыдущему шагу и повторяйте, пока не будете довольны.
  • Составьте план реализации проекта с жёстким (и реалистичным) конечным сроком.
  • Соблюдайте пункт выше (потому что иначе воображаемый клиент мог бы потребовать немалую комиссию за просрочку)

Ещё несколько советов:

  • Для начала полностью забудьте о коде и взгляните на программу полностью с точки зрения пользователя.
  • Составьте список желаемых функций, которые программа должна выполнять.
  • Составьте список функций, которыми программа не будет обладать (Так вы сможете избежать соблазна добавить кучу «классных» и совершенно ненужных «улучшений». В основном, именно потому, что программы становится слишком раздутыми, разработчики бросают их через несколько недель.)
  • Сделайте несколько набросков экрана, который будет видеть пользователь, и как он будет с ним взаимодействовать. Это не должны быть точные прототипы — они, скорее, помогут представить, что будет изменяться на экране пользователя при переходе на другую страницу. Эти зарисовки помогут вам не забыть что-то важное.
  • Научитесь использовать git и заведите аккаунт на GitHub. Здесь можно получить хорошую поддержку и попросить оценку коду. (Игнорируйте комментарии по поводу стиля кода: 99% из них — бесполезные споры.)

Распространённые страхи и опасения

Я уже слишком стар для программирования?

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

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

Есть что-то другое, чему мне сначала нужно научиться?

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

Вот единственные действительно необходимые условия:

  • Вы должны уметь печатать (если только вы не используете язык на основе подхода «drag-and-drop» вроде Scratch).
  • У вас должен быть компьютер.
  • Вы должны уметь самостоятельно гуглить/искать ответы на вопросы.

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

Всё, что указано выше, более или менее применимо к желающим получить официальный диплом в университете. Большая часть вузов рассчитывает на то, что поступающие студенты ничего не знают об информатике и программировании, и начинают обучать их с нуля (хотя в отдельных случаях можно пропустить один или два вводных курса, если пройти тестирование или продемонстрировать уже достаточные навыки). Если вы в старших классах или младше и хотите изучать информатику в вузе, то только выиграете, если начнёте учиться наперёд — это даст вам фору, но делать это вы не обязаны.

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

Нужно ли мне хорошо знать математику?

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

Например, в некоторых направлениях программирования действительно необходимы уверенные математические навыки. В 2D и 3D-играх часто используются векторы, матрицы и линейная алгебра; в интеллектуальном анализе данных и машинном обучении — многие понятия статистики; а справляться с алгоритмическими сложностями легче, если хорошо владеть алгеброй и элементарными вычислительными навыками.

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

Однако так же много направлений информатики и программирования не требуют глубокого знания математики. Единственное, что вам действительно необходимо знать, — это сложение, вычитание, умножение, деление и иногда какие-то основы алгебры. Многие программисты за всю свою карьеру почти не имеют дела с математикой.

Если вы не очень сильны в математике, то в любом случае можете учиться и расти. Ведь в программировании вы, вероятно, тоже ещё не очень хороши, но всё равно собираетесь учиться кодить. Зайдите на Khan Academy и поищите бесплатные уроки, начинающиеся с базовых уровней и до более сложных.

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

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

Подводя итог, вам не обязательно нужно хорошо знать математику, чтобы построить успешную карьеру в разработке. Если вы хотите стать информатиком, будьте готовы учить очень много математики. Если вы хотите работать над более сложными задачами/в рамках отдельных направлений, в зависимости от ситуации математика может стать очень полезным инструментом.

Я много гуглю или не знаю, как делать что-то, когда только собираюсь начать. Это плохо?

Нет. Вот ветка, в которой эта тема рассмотрена с разных сторон. Есть много других, аналогичных этой.

Программировать сложно?

Программирование подобно любому другому навыку: относительно легко учить и применять основы. Чтобы научиться играть в боулинг, вы выясняете, как вставлять пальцы в отверстия шара и бросать его просто в направлении кеглей. Вам, может, даже удастся сбить несколько штук, и это не особо сложно.

Программирование схоже с большинством навыков в том, что гораздо затруднительнее перейти с начального уровня на более продвинутый. В продолжение примера с боулингом: если вы захотите участвовать в соревнованиях, вам придётся потратить годы, чтобы отточить навык. То же самое верно и для программирования: вам придётся потратить какое-то время (то есть много времени), пытаясь понять, почему эта дурацкая программа не работает, хотя вы всё уже три раза перепроверили. Вам придётся читать книги, сидеть на занятиях и обсуждать их с другими людьми. Вы выучите сленг программистов. Вы выберете специализацию, чтобы более основательно изучить ряд узких областей. Всё это задействует основы программирования, но новыми способами и в новых сочетаниях. Искать решения задач будет тяжело. Часами разбираться с одной задачей будет тяжело. Это нормально, потому что если вы получаете от этого удовольствие и если у вас есть мотивация, трудности не будут казаться такими трудными, и вы справитесь с ними.

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

Вопросы про обучение

Что значит «знать язык» или «уметь программировать»?

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

Я только что начал учить язык Х. Стоит ли мне начинать учить язык Y?

Особенно когда вы начинаете учиться программировать, лучше учить один язык и на какое-то время остановиться на нём. Даже если отдельная проблемная область использует конкретный язык, которым вы пока не владеете, сначала научитесь программировать. А разобравшись с основами (управление потоком, обработка ошибок, ввод/вывод, имплементация алгоритмов, структуры данных и т.д.), можете начинать думать о том, чтобы взять следующий язык.

Стоит ли учить более одного языка программирования одновременно?

Если вы только начинаете, мы рекомендуем выбрать один язык (как сказано в предыдущем ответе, неважно, какой именно) и сосредоточиться на нём минимум на месяц. Опытные программисты могут понемногу учить несколько языков сразу, но новички скорее просто запутаются.

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

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

Конечно, нет!

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

Неудача — важная часть обучения. Очень важно знать, как не надо делать. Неудача — это просто приобретённый опыт.

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

Как найти/поддерживать мотивацию, чтобы учиться программировать?

Мы часто думаем: «если бы у меня было достаточно мотивации… тогда я мог бы…», хотя именно действие поддерживает мотивацию. Сначала идёт действие, потом — мотивация. Найдите небольшие конкретные программы, которые хотели бы создать. Избавьтесь от всего, что вас отвлекает. Установите расширения для браузера, блокирующие сайты вроде Reddit, Facebook и Twitter. На минуту представьте, насколько здорово будет ощущать, что вы стали более компетентным программистом.

Вот несколько свежих веток по теме:

С чего мне начать Х?

С чего начать делать видеоигры?

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

  • Unity (C#): подходит для мобильных, десктопных, браузерных/онлайн и консольных 2D и 3D-игр
  • Construct2 (JavaScript): для мобильных, десктопных и браузерных/онлайн 2D-игр
  • Pygame (Python): движок для десктопных 2D-игр
  • LÖVE (LUA): подходит для десктопных 2D-игр

Всегда помните, что ваша цель — разрабатывать игры, а не движки! Так что не нужно заново изобретать велосипед.

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

Самое главное: начинайте с простого. Вам захочется взяться за всё и сразу же создать игру своей мечты, но помните, что единственный способ взобраться на вершину горы — делать по одному небольшому шагу за раз. Вот список простых игр для тренировки в порядке возрастания сложности — попробуйте выполнить какие-то из них, перед тем как броситься к своей конечной цели:

  • Угадай число
  • Блэкжек или крестики-нолики
  • Охота на Вампуса (правила)
  • игра в жанре choose-your-own-adventure на ваше усмотрение или клон Zork
  • Pong, Тетрис или клон Сапёра
  • Space Shooter с вертикальной или горизонтальной прокруткой
  • простой клон DOOM, Марио или Legend of Zelda

Обязательно загляните в ЧаВо /r/gamedev, почитайте вводное руководство на /r/gamedev и поищите более старые ветки на /r/gamedev и /r/learnprogramming.

С чего начать делать веб-сайты/веб-приложения/веб-разработку?

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

Обычно большинство людей советует начинать с изучения HTML, CSS и Javascript (в таком порядке) — это три главных языка, которые поддерживают все веб-браузеры и на которых написаны все сайты.

Больше информации можно найти в ЧаВо /r/webdev. Вот ещё один список онлайн-курсов, пособий и ресурсов для начинающих.

С чего начать делать мобильные приложения/приложения для Android/приложения для iOS/приложения для Windows Phone?

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

  • Приложения для Android пишутся преимущественно на Java — больше информации читайте в ЧаВо /r/androiddev.
  • Приложения для iOS пишутся на Objective-C или Swift — больше информации ищите на боковой панели /r/iosprogramming и в их вики (на GitHub).
  • Приложения для Windows Phone пишут на C#, Visual Basic или Javascript — больше информации ищите на боковой панели /r/WPDev.

Вы также можете создать приложения, которые будут запускаться на всех трёх крупнейших платформах, с помощью технологий Phonegap и Titanium — приложения пишутся один раз с использованием HTML, CSS и Javascript, а запускаются на любой платформе.

Однако не забывайте, что многие, если не все из указанных инструментов рассчитаны на тех, кто уже имеет предыдущий опыт в программировании. Если вы прежде никогда не занимались разработкой, может быть, вам лучше начать с изучения языка, по которому есть больше ресурсов специально для новичков. Когда вы приобретёте некоторый опыт и усвоите лежащие в основе программирования принципы, то вам станет намного проще учить новые языки и начинать изучение мобильной разработки. Раздел «С чего мне начать?» в нашем ЧаВо содержит больше информации о том, с чего нужно начинать.

Как автоматизировать что угодно?

Для Windows есть пара специальных языков программирования, такие как Autohotkey and AutoIt.

Другая подходящая кросс-платформенная альтернатива — это Python. Automate the Boring Stuff with Python (Как автоматизировать рутину с помощью Python) — потрясающий образовательный ресурс.

Если вы хотите автоматизировать MS-Office, используйте встроенный язык программирования Visual Basic for Applications (VBA). Сабреддит /r/vba посвящён программированию на VBA.

Какие лучшие…

/u/thekodols сделал подборку из более чем 150 вопросов и ответов в стиле «какие лучшие» в этом посте, который охватывает различные языки, инструменты и темы.

Терминология и словарь

В чём разница между информатикой (computer science, CS), компьютерной инженерией (computer engineering, CE), программной инженерией (software engineering, SE), программированием и кодированием?

Информатика/компьютерная инженерия/программная инженерия vs. программирование/кодирование

Понятия информатика, компьютерная инженерия, программная инженерия, программирование и кодирование взаимосвязаны, но между ними есть тонкое различие, из-за чего новичкам сложно разграничить их.

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

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

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

Информатика vs. компьютерная инженерия vs. программная инженерия

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

Программирование vs. кодирование

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

Напротив, если вы говорите «я кодер», то подчёркиваете, что занимаетесь исключительно разработкой кода, и в меньшей степени — остальными вещами.

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

С чём разница между Cи, C++, Objective-C и C#?

Cи, C++, Objective-C и C# — это не вариации одного и того же языка.

Си — самый маленький и старый из этих языков. Изначально он создавался как системный язык программирования для операционной системы Unix и до сих пор широко используется в прикладном программировании.

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

Objective-C — это строгое надмножество языка Си, поэтому любой рабочий код на Си также является рабочим кодом Objective-C. Этот язык далеко не так распространён, как Си или С++, и сегодня в основном используется в разработке для платформ OS X и iOS от Apple.

C# не основан на Си ни в каком техническом плане. С# — это язык программирования общего назначения, созданный Microsoft и подобный Java. Он компилируется в промежуточную форму, которая запускается на виртуальной машине (CLR), в отличие от предыдущих трёх языков, которые компилируются в нативный машинный код. И хотя С# заимствует элементы синтаксиса из Си и С++ (как и Java), технически он с этими языками не связан.

В чём разница между Java и JavaScript?

Java и JavaScript связаны в той же степени, в которой связаны крем и крем-брюле.

Аналогично предыдущему вопросу, с технической точки зрения Java и JavaScript никак не связаны. У них есть некоторые общие черты в синтаксисе, так как предком обоих был Си, но не более. В Википедии есть хорошее объяснение, откуда взялось это сходство в названиях: https://ru.wikipedia.org/wiki/JavaScript#JavaScript_%D0%B8_Java.

Инструменты и управление версиями

Что такое управление версиями/контроль версий? Стоит ли мне его использовать?

Система управления версиями (Version Control System, VCS) — это инструмент, который отслеживает изменения в коде и даёт такие полезные возможности, как исправлять ошибки и просматривать, что в нём изменялось с течением времени. Современные распределённые системы также позволяют легко работать над одним и тем же кодом с другими программистами. И да, вам определённо стоит использовать систему управления версиями!

Две самых популярных распределённых системы — это Git и Mercurial; которую именно использовать, в основном зависит от ваших личных предпочтений, но мы настоятельно советуем одну из них.

С чего начать использовать управление версиями?

Для начала вы можете почитать статью для начинающих по Git, написанную одним из пользователей reddit, и бесплатную книгу от Git.

Хорошее и краткое руководство по Mercurial — здесь.

На странице reddit с инструментами есть ссылки на сайты, где можно скачать обе системы.

Что такое IDE? Стоит ли мне её использовать?

IDE (или интегрированная среда разработки) — это приложение графического интерфейса пользователя, обычно включающее текстовый редактор с автодополнением кода и подсветкой синтаксиса, некоторые функции управления проектами, компилятор или интерпретатор (настраиваемый или встроенный) и другие замечательные функции, которые упрощают написание, запуск и тестирование кода. Как вариант, можно вручную делать то, что IDE сделает за вас автоматически. Но для этого программисту придётся использовать отдельные инструменты и иметь более глубокое знание процесса разработки.

Для новичков есть аргументы в пользу обоих методов разработки:

  • Если вы используете IDE, вам не нужно много знать о процессе разработки, использовать интерфейс командной строки и настраивать эти инструменты, чтобы они корректно работали вместе; IDE предлагает быстрый способ начать создавать код и даже может написать часть кода за вас!
  • С другой стороны, при работе из командной строки вам не нужно подстраиваться под образ мысли автора IDE, а так как вам открыта большая часть процесса разработки, вам удастся лучше познакомиться с процессом создания ПО.

Выбор IDE или отдельных инструментов — обычно вопрос личного предпочтения (если, конечно, ваш начальник/вуз не требует использовать определённую среду разработки). Если вы никогда раньше не использовали IDE, скачайте какую-нибудь из самых популярных и повозитесь с ней. Если вы никогда не пользовались Vim или не компилировали код из командной строки, то попробуйте — может, вам понравится. Список часто используемых IDE и небольших по весу тестовых редакторов можно найти в разделе инструментов программирования.

Компьютеры и операционные системы

Какую операционную систему мне следует использовать?

Частый вопрос, который возникает у многих новичков, — какую из операционных систем им лучше использовать: Windows, Mac или Linux.

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

И всё же рано или поздно вам следует в более или менее познакомиться со всеми тремя операционными системами, чтобы вы совсем не растерялись, когда столкнётесь с новой ОС (например, когда будете переходить на другую машину или получите новую работу).

Из этого правила есть два основных исключения:

  • Если вы хотите заниматься разработкой для Windows, покупайте компьютер на Windows.
  • Если вы хотите заниматься разработкой для Mac или iOS, покупайте Mac.

Есть несколько хороших возможностей запуска кода на C# на других платформах, но некоторые инструменты Microsoft и .NET преимущественно ориентированы на Windows.

Хотя вы сможете разрабатывать приложения для Mac и iOS на любом компьютере, вам придётся использовать Xcode на машине Mac, чтобы скомпилировать и загрузить ваше приложение в App Store.

И наконец, следует отметить, что выбор той или иной операционной системы не ограничивает вас в действиях: всегда можно запустить виртуальную машину с установленной на ней другой операционной системой. Например, если у меня на компьютере установлена Windows, я могу легко настроить виртуальную машину Linux и использовать её не опасаясь, что она помешает работе существующей Windows.

Какой компьютер/ноутбук мне следует купить?

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

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

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

  • центральный процессор Intel i5 (3.0+ ГГц)
  • оперативная память 4+ Гбайт
  • жёсткий диск 200+ Гбайт
  • (опционально) твердотельный накопитель

Если есть возможность, лучше отдайте приоритет устройству с более производительным процессором и большим объёмом оперативной памяти, чем жёсткого диска: лишняя мощность процессора никогда не помешает. И наоборот, в основном для программирования не требуется большое дисковое пространство — только если вы не собираетесь работать с изображениями и видео или обрабатывать огромные наборы данных для машинного обучения и тому подобных вещей. Впрочем, такие вещи можно хранить в облаке.

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

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

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

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

Дополнительную информацию и более подробную помощь можно найти в следующих сабреддитах — в них предложены более индивидуализированные советы:

Также тщательно взвесьте покупку хромбуков: вам придётся или настраивать их, или использовать онлайн-редакторы и IDE, а также понадобится постоянный доступ с интернет. Больше информации читайте по ссылкам:

Ещё лучше нужно подумать, стоит ли в качестве своего главного инструмента для программирования использовать планшеты или смартфоны. Хотя с некоторыми усилиями программировать на планшетах или смартфонах вполне реально, разработка ПО почти всегда ведётся на компьютерах или ноутбуках при помощи клавиатуры.

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

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

Если вас больше интересует машинное обучение или обработка естественного языка, имейте в виду, что можно арендовать машины с графическими процессорами в облаке с помощью сервисов вроде Web Services (AWS) или Google Compute Engine (GCE) по относительно низким ценам.

Карьера и работа

Можно ли заработать много денег на программировании?

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

Можно ли получить работу в программировании, не имея диплома по информатике? Или вообще без высшего образования?

Без диплома по информатике получить работу программистом реально, как и вообще не имея никакого диплома, хотя перспективы будут похуже. Бросать вуз точно не советуем. Если программирование — не для вас, поменяйте специализацию. Если для вас, то завершение учёбы повысит ваши шансы на успех в поиске работы.

Более развёрнутые ответы на различные вопросы по поводу карьеры можно получить, задав их в /r/cscareerquestions.

Как войти в эту отрасль и получить стартовую должность?

В этом сабреддите этот вопрос немного не по адресу: вопросы на тему карьеры лучше задавать в /r/cscareerquestions и искать на их исчерпывающей вики-странице.

Но в общем, ответы большинства людей сводятся к следующему:

  • Создайте убедительное портфолио оригинальных проектов, которое можно показать потенциальным рекрутерам и приложить к резюме. Это могут быть ваши школьные проекты, самостоятельные сторонние проекты, проекты из кружков в школе и университете, исследовательские или волонтёрские проекты, или проекты, сделанные во время практики или на предыдущих работах и т.д. Мощное портфолио показывает работодателям, что вы умеете успешно применять языки программирования, библиотеки и технологии для решения проблем, и даёт им возможность более точно оценить уровень ваших навыков.
  • Сначала лучше искать стажировку, а не полноценную работу. На стажировку проще попасть, а оплачиваются они обычно достойно.
  • Вам обязательно нужно хорошее понимание структур данных и алгоритмов. Большинство собеседований, особенно на стартовые должности, включают задания по кодированию — на веб-сайте или вживую, на белой доске.

Намного более подробную информацию и советы читайте в вики /r/cscareerquestions.

Что делать дальше?

Больше не новичок

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

Программирование — лишь инструмент

Начиная программировать, вы, возможно, размышляли о будущем, когда узнаете, как создать второй reddit или невероятную графику, или же как выполнять различные алгоритмы. Что ж, если вы больше не считаете себя новичком, значит, программирование пополнило ваш арсенал инструментов. Теперь вам нужно научиться применять его и закрепить свои умения. Очень скоро вы сможете делать подобные вещи и будете узнавать всё о них.

Как улучшить навыки программирования

Многие люди, занимающиеся программированием, начинают бояться, что им недостаточно знаний. Поэтому многие стремятся усовершенствовать свои навыки. Но на данном этапе есть только один способ сделать это — практиковаться. Существует много сайтов и источников для тренировки, например, /r/dailyprogrammer, CodeWars, HackerRank, Project Euler и многие другие.

Разное

Как обучить программированию ребёнка?

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

Scratch — просто потрясающий инструмент для детей 8-16 лет, разработанный Массачусетским технологическим институтом. Он запускается через браузер без установки дополнительного ПО.

Также можете заглянуть на /r/ProgrammingForKids — сабреддит посвящён именно этому вопросу. Ресурсов множество.

Как делать вклад в open source-проекты?

Участвуйте в проектах группы /r/learnprogramming на GitHub! Её создал jfredett специально для размещения проектов, с помощью которых начинающие программисты смогут освоить отрытую разработку, взаимодействуя с опытными программистами и менторами.

Группа сформирована недавно, несколько людей занимаются её продвижением.

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

Вот несколько старых веток на тему работы с open source-проектами.

У меня вопрос по Си/Python/другому языку.

Поищите ваш вопрос в наших вики по конкретному языку:

Там нет моего вопроса. Что мне делать?

Посмотрите краткое руководство reddit по устранению неисправностей для начинающих и страницу ЧаВо используемого вами языка — возможно, ответ на ваш вопрос находится на одной из страниц. Если нет — можете постить!

Поищите ваш вопрос в наших вики по конкретному языку:

Вопросы, связанные с карьерой, также смотрите в /r/cscareerquestions.

Да, мой вопрос есть в ЧаВо, но я хочу получить ответ от реального человека.

Эти ЧаВо, как и другие страницы вики /r/learnprogramming, редактируется сообществом. Эти ответы — продукт сообщества, и их писали реальные люди. Если ваш вопрос уже есть в ЧаВо, значит, его уже неоднократно задавали до вас. В этих ЧаВо собраны ответы, которые обычно дают и принимают на эти вопросы. Пожалуйста, подумайте, действительно ли ваш вопрос существенно отличается от тех, которые присутствуют в этих ЧаВо, прежде чем просить людей тратить время, чтобы ответить персонально вам на вопрос, который задавали уже много раз.

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

Как редактировать вики /r/learnprogramming (включая эти ЧаВо)?

Мы приветствуем ваш вклад, но чтобы получить право редактирования, вам нужен аккаунт, зарегистрированный не менее 30 дней назад и коммент-карма не менее 200 в данном сабреддите (не в целом на reddit). Как только эти условия будут выполнены, в заголовке вики появится кнопка «редактировать». Если вам не хватает времени или кармы, просто создайте обычный пост на тему с текстом, который хотите добавить: если он будет хорошего качества, кто-то из тех, кто может редактировать, почти наверняка опубликует его за вас.

Как создать интерфейс для программы?

Правила хорошего интерфейса
19.04.2011, 20:51

Как создать интерфейс шахматной программы без движка через С++
Всем привет! Хотел бы попытаться освоить язык С++, не будучи программистом, для того, чтобы.

Как проще всего сделать интерфейс для программы на С++?
Подскажите в какой как и с помощью какой программы проще всего сделать интерфейс для программы.

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

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

Интерфейс для программы
Как сделать интерфейс для программы?

Английский для IT. Как учиться программисту + 79 ресурсов

По статистике, более 75% заказов на разработку программного обеспечения поступает к отечественным специалистам от иностранцев и почти все заказчики предпочитают общаться на английском языке. Именно поэтому каждый IT-специалист должен владеть им на хорошем уровне. В этой статье мы расскажем, как английский поможет вам в работе и какие ресурсы нужно использовать при изучении английского для программистов.

Зачем программисту английский язык

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

    Понимание терминологии

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

В некоторых из них отсутствует русифицированный интерфейс.
Чтение технической документации

Практически все справочные материалы и технические задания пишутся на английском (если вас интересуют заказы из заграницы).
Общение с клиентами

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

Новейшие книги и статьи в IT-сфере публикуются на английском языке. Программистам нужно постоянно быть в курсе всех новостей и обновлений, поэтому стоит учить английский.
Посещение онлайн-курсов и вебинаров

В Интернете можно найти сотни обучающих бесплатных курсов от гуру программирования. А на платных курсах вы сможете получить диплом международного образца — большой плюс к резюме.
Поиск решений во всемирной паутине

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

Не секрет, что почти все IT-гиганты находятся в США. В такие фирмы постоянно требуются грамотные специалисты, но, чтобы общаться с коллегами и дирекцией, необходимо знать английский язык. Хотите работать в Силиконовой долине? Учите английский.

Ваши сильные и слабые стороны: как учить английский программисту

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

    Ваши сильные стороны:

      Логическое мышление

Как использовать: грамматика — логичная структура, поэтому при условии постоянных занятий вам будет несложно ее изучить.
Широкий словарный запас

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

Ваши слабые стороны:

    Неуверенное знание грамматики

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

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

    Причина: программистам нечасто приходится воспринимать информацию на английском на слух, поэтому у вас могут быть проблемы с пониманием речи собеседника. Работа с аудиоматериалами избавит вас от этого.

Мы выяснили ваши слабые и сильные стороны, а теперь надо решить, каким же образом учить английский для программистов. Исходя из нашего опыта, начинать изучать специализированный английский для IT следует после того, как вы закончили курс Pre-Intermediate. До этого лучше изучать общий разговорный английский, чтобы заложить прочный базис для профессиональных знаний.

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

Базовый английский словарь для программиста

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

Полезные глаголы

Слово Перевод
выполнять резервное копирование
загружать, загружаться (например, об устройстве или операционной системе)
записывать на оптический диск
создавать
компилировать
сжимать (например, архиватором)
соединять, подключаться
копировать
вырезать в буфер обмена
отлаживать
расшифровывать
удалять
развертывать (например, приложение на сервере)
разрабатывать
отключать, деактивировать
разъединять, отключаться
отображать
загружать, скачивать
извлекать (устройство)
включать, активировать
шифровать, зашифровывать
исполнять
форматировать
внедрять, реализовывать
приводить в исходное состояние, инициализировать
инсталлировать, устанавливать
интегрировать, объединять в одну систему
ссылаться на что-либо
загружать
вставлять из буфера обмена
подключать
нажимать (кнопку)
считывать
перезагружать, перезагружаться
восстанавливать
сохранять
прокручивать вверх/вниз (например, веб-страницу)
сортировать
включать/выключать
деинсталлировать, удалять
обновлять
улучшать, модернизировать
загружать, закачивать
проверять

Hardware — аппаратное обеспечение

Слово/Словосочетание Перевод
шина
кабель
центральный процессор
корпус системного блока
устройство
вентилятор охлаждения, кулер
видеокарта (графический адаптер)
графический процессор
жесткий диск
ноутбук, портативный компьютер
светодиод
материнская плата
сетевой адаптер (сетевая карта, сетевая плата)
разъем, порт
блок питания
твердотельный накопитель
звуковая карта
запоминающее устройство, накопитель
сенсорный экран
воздушное охлаждение
карта (плата) расширения
оптический привод
источник бесперебойного питания
оперативная память (ОЗУ)
постоянное запоминающее устройство (ПЗУ)
съемные носители информации
водяное охлаждение
устройства вывода:

  • монитор
  • принтер
  • колонка (акустическая)
  • наушники
устройства ввода:

  • клавиатура
  • мышь
  • сканер
  • цифровая камера
  • джойстик

Software — программное обеспечение

Слово/Словосочетание Перевод
компилятор
база данных
отладчик
приложение для настольного компьютера
драйвер устройства
графический пользовательский интерфейс
ядро (например, операционной системы)
мобильное приложение
плагин, расширение, дополнительный программный модуль
язык программирования
запрос
полоса прокрутки
снимок состояния системы
электронная таблица
строка состояния
шаблон
система контроля версий
веб-приложение
текстовый процессор
текстовый редактор
утилита (служебная программа)
приемочное тестирование
гибкая методология разработки
алгоритм
массив
кодировка
корпоративное приложение
исполняемый файл
интерпретатор
операционная система
прикладное программное обеспечение
аспектно-ориентированное программирование
двоичные данные
платное программное обеспечение
данные, информация
обработка данных
экстремальное программирование
прошивка, микропрограмма
бесплатное программное обеспечение
инкрементная модель разработки
интегрированная среда разработки
итеративная модель разработки
вредоносное программное обеспечение
объектно-ориентированное программирование
программное обеспечение с открытым исходным кодом
создание прототипа, прототипирование
быстрая разработка приложений (методология)
регрессионное тестирование
среда выполнения кода
серверное программное обеспечение
спиральная модель разработки
программа-шпион, шпионское программное обеспечение
системное программное обеспечение
модульное (блочное, компонентное) тестирование
каскадная модель разработки

Internet — Интернет

Слово/Словосочетание Перевод
закладка (в браузере)
мост
браузер, обозреватель
домен
брандмауэр, межсетевой экран
шлюз
гиперссылка
узел сети
пакет
коммутационный кабель, патч-корд
маршрутизатор, роутер
поисковая система
поддомен, субдомен
коммутатор, свитч
веб-сайт, веб-узел
беспроводная сеть
пропускная способность (канала передачи данных)
широкополосный доступ в Интернет
клиент-серверная архитектура
облачные вычисления
облачное хранилище данных
протокол динамической настройки узла
система доменных имен
обмен мгновенными сообщениями
интернет-провайдер
локальная сеть
задержка, период ожидания
аппаратный адрес, MAC-адрес
одноранговая сеть, пиринговая сеть
витая пара
голосовая связь через Интернет, IP-телефония
глобальная сеть, широкомасштабная сеть

Немаленькая подборка, не правда ли? Но для того, чтобы научиться хорошо говорить по-английски, недостаточно знать слова, необходимо учить грамматику, развивать навык восприятия речи на слух и т. д. Поэтому в следующей главе нашей статьи мы приведем 79 ресурсов для совершенствования английского. Выберите несколько из них и штурмуйте вершины знаний.

Как учить английский для программистов самостоятельно

Учебники по английскому языку для программистов

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

Для начального уровня:

English for Information Technology Career path Information Technology Career path Computing Career path Software Engineering

Для среднего уровня:

Oxford English for Information Technology Professional English in Use ICT English for Information Technology Check Your English for Computers and IT English for Telecoms and Information Technology

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

Англо-русский и русско-английский словарь также пригодится вам для перевода. Чтобы получить правильный перевод термина, смотрите перевод слова рядом с примечанием «комп.» (компьютерные термины).
english4it.com

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

Словарь компьютерных терминов на английском языке. Введите незнакомое слово в строку поиска и узнайте его значение.
techterms.com

Англоязычный словарь технических терминов. Все слова сортируются по категориям, а также можно искать значение слова через систему поиска на сайте. Здесь есть подробное разъяснения для каждого понятия. Кроме того, можно проходить тесты из раздела Quizzes, чтобы проверять свои знания.
computerhope.com

В разделе Dictionary этого сайта вы найдете англоязычный словарь технических терминов, в котором дано подробное пояснение каждого понятия. Кроме того, вам предложат почитать полезную статью, связанную с тем термином, определение которого вы искали.
blogs.gartner.com

IT-словарь на английском языке. К каждому понятию дано краткое понятное пояснение.

Ресурсы для изучения новых слов

  1. Сайты с тестами и упражнениями на лексику:
    • businessenglishsite.com — упражнения, помогающие запомнить правила употребления IT-лексики в предложениях.
    • blairenglish.com — технические тексты, в которых жирным шрифтом выделены новые слова, а ниже приведен тест на знание этой лексики.
  2. Приложения для изучения слов:
    • Lingualeo и Memrise — с помощью этих программ вы сможете изучать новые слова, составлять собственные словари терминов для изучения, смотреть видео профессиональной тематики и т. д.
  3. Плагины для браузеров:
    • ЛеоПереводчик — подойдет для Chrome и Firefox, будет логичным дополнением одноименного приложения. С помощью «ЛеоПереводчика» можно переводить слова и целые фразы на страницах любого сайта, добавлять их в свой словарь и затем изучать.
    • Google Переводчик или English dictionary translate pronunciation — расширения для перевода слов и фраз на страницах любых сайтов. Это бесплатные удобные плагины, однако следует учесть, что в машинном переводе могут быть ошибки и неточности, поэтому всегда обращайте внимание на контекст.

Ресурсы для изучения грамматики

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

  1. Изучаем теорию:
    • engblog.ru — простой и удобный справочник по грамматике, составленный опытными преподавателями. К каждой статье есть тест, по которому можно проверить, насколько хорошо вы поняли материал.
    • engvid.com — грамматика в видеоуроках от носителей английского языка. Материал изложен очень доступно, и почти к каждому видео есть тест по теме.
  2. Выполняем практические упражнения:
    • learnenglish.de — сайт с большой подборкой грамматических тестов, а также пояснениями теории на английском языке.
    • tolearnenglish.com — не лучший по дизайну, но хороший по наполнению сайт. Чтобы найти тесты на нужную вам тему, укажите, например, Article в поисковой строке, и вам выдадут ссылки на упражнения для отработки артиклей.
    • perfect-english-grammar.com — удобный сайт, где простыми словами излагается грамматика английского языка и есть практические упражнения для проработки изученных тем.
  3. Работаем со специальными приложениями:
    • Learn English Grammar для Android и iOS — позволяет изучать грамматические правила и предоставляет грамматические упражнения для отработки использования этих правил на практике.
    • Johnny Grammar’s English Quiz для Android и iOS — удобное приложение с тестами на разные грамматические темы английского языка.

Как научиться говорить по-английски ИТ-специалисту

В развитии этого навыка все логично: чтобы заговорить, надо говорить. Некоторые люди полагают, что развивать устную речь можно с помощью пособий и онлайн-упражнений, однако это не так. Представьте, что вы полностью прочли самоучитель по Python, но не пробовали программировать на нем. Получится ли у вас сразу написать качественную программу? Скорее всего, она будет работать с ошибками, и только после продолжительной практики вы научитесь писать что-то толковое на этом языке.

С английским ситуация аналогичная: никакой учебник или самоучитель не заменят вам разговорной практики с собеседником. Поэтому ищите себе партнера для разговоров на английском. Причем можно развивать устную речь не выходя из дома. Воспользуйтесь сайтом italki.com или polyglotclub.com и общайтесь с носителем языка онлайн. Еще больше ресурсов для поиска собеседника вы найдете в статье «Где можно поговорить на английском языке».

Подкасты для разработчиков

Подкасты незаменимы для развития навыка восприятия английской речи на слух, а также из них вы узнаете много полезной профессиональной информации. Мы рекомендуем два вида материалов:

  1. На общие темы для совершенствования знаний общеразговорного английского:
    • eslpod.com — аудиоматериалы на разные темы. Дикторы говорят медленно и четко, поэтому можно слушать их даже на уровнях Elementary и Pre-Intermediate. Ранее материалы сайта были бесплатными, сейчас же для пользования подкастами необходимо приобрести платный аккаунт.
    • esl-lab.com — подкасты на общие темы, распределенные по 3 уровням сложности. К каждой записи есть тесты, вы можете проверить, насколько хорошо поняли услышанное.
  2. Профессиональные подкасты. Таких материалов очень много, и вы можете выбрать те, которые подходят именно вам. Мы рекомендуем:
    • herdingcode.com и se-radio.net — подкасты для программистов на разные темы.
    • ruby5.codeschool.com и Ruby Rogues — подкасты для программистов Ruby.
    • talkpythontome.com — для программистов Python.
    • fivejs.codeschool.com и Javascript Jabber — для программистов Javascript.
    • cppcast.com — для программистов C++.
    • dotnetrocks.com — для разработчиков Microsoft.NET.
    • iosbytes.codeschool.com и iPhreaks — для программистов iOS.
    • androidbackstage.blogspot.com — для программистов Android.
    • arresteddevops.com — для сторонников методологии DevOps.

Сериалы и фильмы для программистов

Сериалы и фильмы, близкие к вашей тематике, будут развивать восприятие английского языка на слух. Любой из эпизодов можно смотреть с субтитрами, установив расширение для браузера hamatata, а также воспользовавшись сайтами ororo.tv или show-english.com. Программистам можно порекомендовать смотреть следующее:

  1. Сериалы:
    • The IT Crowd.
    • Silicon Valley.
    • The Big Bang Theory.
    • Halt and catch fire.
  2. Фильмы:
    • Free to Play.
    • The Imitation Game.
    • jOBS.
    • The Internship.
    • The Fifth Estate.
    • Away From Keyboard.
    • Web Junkie.
    • Hackers.
    • The Social Network.
    • Mr. Robot.

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

Форумы на английском языке для «айтишников»

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

  1. stackoverflow.com — самый крупный и известный в мире форум IT-специалистов. Здесь можно задавать профессиональные вопросы и просто общаться со своими единомышленниками на свободные темы.
  2. forums.devshed.com — популярное сообщество, где общаются англоговорящие программисты со всего мира. Попробуйте и вы!
  3. forum.xda-developers.com — форум, где общаются в основном разработчики мобильных приложений. Присоединяйтесь!
  4. programmers.stackexchange.com — еще один крупный форум, на котором можно задавать вопросы и получать ответы от опытных коллег.

Кстати, если вам срочно нужно сформулировать предложение или текст на английском языке, но вы не можете этого сделать, предлагаем воспользоваться программой imtranslator.net . Введите в окно предложение или текст по-русски, и программа переведет вам его на выбранный язык, например, английский. Причем переведенный текст можно будет прослушать с помощью встроенного модуля TTS (text to speech). Однако старайтесь нечасто пользоваться этим сайтом: машинный перевод не всегда бывает правильным.

Видеоролики общей тематики

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

Знаменитый проект TED — источник вдохновения и уникальных идей. Выбирайте интересные вам темы лекций, при необходимости пользуйтесь субтитрами и учите английский!
englishcentral.com

Видеоролики от Englishcentral — хороший обучающий материал для тех, кому сложно воспринимать английскую речь на слух, ведь все видео снабжены субтитрами. Кроме того, работа с этим сайтом не отнимет много времени: большинство роликов занимает не более 2-3 минут.
elllo.org

На сайте представлены видеоролики и подкасты с транскриптами (текстами записей). Большой охват тем позволит без труда выбрать интересный для вас материал.

Обучающие видеоканалы на YouTube для программистов

Видео, обучающие новичков основам программирования в различных средах.
Sentdex

Обучающие видео для тех, кто работает на Python.
Cave of Programming

Канал для обучения программированию на Java и C++ для начинающих и совершенствующихся.
Paul Programming

Видеопрезентации для программистов C++.
The Go Programming Language

Различные профессиональные видео для программистов.
Learning Programming

Обучающие видео для работы в разных средах программирования.
Programming

Разнообразные обучающие видео для профессионалов.
Programming Tutorials

Канал для тех, кто делает первые шаги в программировании.
Computer Programming University

Видео для разработчиков на UNIX.

Обучающие курсы на английском языке для программистов

Всевозможные обучающие программы и вебинары — источник профессиональных знаний и отличный ресурс для совершенствования английского языка. Попробуйте поучиться бесплатно у зарубежных экспертов.

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

Образовательный портал с курсами на английском, предназначенными для работников IT-сферы. Программы обучения можно посмотреть тут .
coursera.org

Coursera — подборка курсов от более чем 120 университетов и образовательных организаций. Большинство материалов представлено на английском языке, но есть и на русском. Многие обучающие программы можно пройти бесплатно. Посмотрите, какой выбор курсов предлагает Coursera в разделе « Компьютерные науки ».
edx.org

Аналогичный Coursera сайт, предлагающий большой выбор курсов на разных языках, однако на русском пока не представлено ни одного курса. Каталог уроков для IT-области можно увидеть тут . В основном обучение бесплатное. Необходимо будет внести оплату, если вы захотите получить сертификат о прохождении конкретного курса.
udemy.com

Большой каталог платных и бесплатных курсов на разных языках, в том числе есть материалы и на русском. Программы обучения для IT можно увидеть на этой странице .
futurelearn.com

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

Сайты с новостями для программистов на английском языке

Ресурс, на котором пользователи оставляют ссылки на интересные новости по темам, связанным с IT. Тут вы найдете новую информацию со всего Интернета.
news.ycombinator.com

Агрегатор новостей, аналогичный предыдущему ресурсу: все самое свежее об IT на англоязычных сайтах.
smashingmagazine.com

Профессиональный онлайн-журнал для разработчиков программного обеспечения и веб-дизайнеров. Авторы излагают информацию о новых техниках, лайфхаках и полезных ресурсах в области IT.
arstechnica.com

Ресурс со статьями и новостями из области информационных технологий. Материалы изложены довольно простым языком, без обилия специальных терминов.
thenextweb.com

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

Русскоязычные ресурсы, где вам могут дать советы по изучению английского для IT

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

Популярное сообщество русскоговорящих программистов и системных администраторов. Воспользуйтесь поиском, чтобы найти темы, связанные с изучением английского языка. Например, пользователи составили словарь-базу английских слов , которая будет полезна «айтишникам».
programmersforum.ru

Еще один популярный форум, на котором вы можете задавать свои вопросы по изучению языка. Коллеги точно дадут вам профессиональный ответ.
englex.ru и engblog.ru

Наши ресурсы хоть и не ориентируются исключительно на IT-область, но будут полезны любому изучающему английский язык, будь то ИТ-специалист или менеджер. У вас есть вопросы по изучению языка? Задавайте их нам в комментариях, чтобы получить ответ от наших преподавателей — «разработчиков» сферы изучения английского.

Мы постарались составить для вас наиболее полное руководство о том, как учить английский язык программисту, исходя из опыта наших преподавателей и учеников. Выберите удобные для работы сайты и старайтесь посвящать им хотя бы 30 минут в день, чтобы ваш уровень английского постепенно повышался. Если у вас есть вопросы по этой теме, пишите их в комментариях, мы обязательно ответим на них. А если вы чувствуете, что вам нужна помощь в учебе, обращайтесь к нашим преподавателям английского языка, которые научат вас всем премудростям английского для IT.

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

Мастер Йода рекомендует:  Бесплатная лицензия на PhpStorm
Добавить комментарий