Connect with us

Разработка

Перестаньте портить код еще до начала работы

Можно ли испортить проект еще до его начала? Оказывается, можно. И пусть статья Меган Хебел касается веб-проектов, почти все ее советы подходят и для мобильной разработки.

Анна Гуляева

Опубликовано

/

     
     

Можно ли испортить проект еще до его начала? Оказывается, можно. И пусть статья Меган Хебел касается веб-проектов, почти все ее советы подходят и для мобильной разработки. Вот 5 рекомендаций, которые помогут организовать вашу работу.

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

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

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

1. Нарисуйте структуру на бумаге

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

Это поможет вам:

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

Не пропускайте этот шаг, каким бы ни был ваш опыт. Эти 20% первоначальной работы дадут 80% качества конечного проекта.

2. Организуйте свои активы

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

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

3. Сначала напишите HTML

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

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

4. Разделите CSS на секции

Выясните, как вы хотите, чтобы ваш CSS организовал и реализовал ваши основные требования (например, clearfix и размер окна). Со временем вы найдете то, что работает для вас, но вот для начала два примера (один простой и один более сложный).

5. Создайте список багов и задач

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

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

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

 

Комментарии
Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Advertisement
Click to comment

You must be logged in to post a comment Login

Leave a Reply

Медиа

Podlodka #43: Профессия – архитектор

Продолжаем разбираться, что ждет разработчика после достижения сеньорности.

AppTractor

Опубликовано

/

Автор:

Podlodka

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

Комментарии
Продолжить чтение

Дизайн и прототипирование

Создание шрифта с нуля за 24 часа

Графический дизайнер Джеймс Барнард бросил себе вызов – он захотел за 24 часа создать шрифт и отправить его в Google Fonts. Как он это сделал и что узнал в процессе — в нашем переводе статьи Джеймса.

Анна Гуляева

Опубликовано

/

Я большой фанат One Day Builds Адама Сэвиджа. В начале дня у него есть только материалы, а в конце он становится обладателем чего-то, что он хотел.

Поэтому я бросил себе вызов: создать с нуля абсолютно новый шрифт и отправить его в Google Fonts за 24 часа.

В старом блокноте у меня были эскизы нескольких букв. Я хотел создать узкий шрифт без засечек, который можно будет использовать на постерах или на других больших изображениях. Во время работы в Men’s Health я использовал шрифты вроде Tungsten или Heron, которые выглядят ужасно в тексте, но отлично смотрятся в заголовках или промоматериалах (которые и были моей основной работой). Это был стиль, который я и хотел создать.

Очень грубые наброски

13:00, среда

Я отправился в Adobe Illistrator с двумя-тремя буквами, которые были у меня в эскизах. Я создал сетку из пяти строк – для линии нижних выносных, базовой линии, линии строчных, линии прописных и линии верхних выносных букв. Затем я определил ширину прописных букв и толщину основного штриха.

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

  • Линия строчных = 2 × высота линии верхних выносных / высота линии нижних выносных
  • Ширина основного штриха = ¼ ширины прописной буквы
  • Ширина строчной буквы = ¾ ширины прописной буквы

Вот как это выглядит на иллюстрации

Сначала я создал буквы O и B. Я решил, что эти буквы будут иметь не форму овала, а форму скругленного угла. Многие буквы будут выглядеть, как высокий прямоугольник, но O, B и D будут иметь скругленные углы вместо овалов.

Внешний угол имеет радиус 12 мм, а внутренний — 6 мм. С этими правилами я начал создавать прописные буквы.

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

Затем я приступил к строчным буквам. Это было сложнее, но с установленными правилами работать было проще. Я использовал больше «украшений», особенно в верхних выносных и нижних выносных элементах. Самыми сложными стали буквы f, g, a и e, так как они были абсолютно новыми.

21:00, среда

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

Утро четверга

Утром я довольно быстро закончил цифры от 0 до 9 и начал создавать файл с шрифтом. Это было совершенно новым опытом. Мой знакомый каллиграф Иэн Барнард посоветовал для этого программу Glyphs. Я скачал программу, посмотрел несколько обучающих видео и понял, что неверно создал файл в Illustrator. Поэтому мне пришлось вставлять каждый символ вручную и подгонять его под правила программы.

10:00, четверг

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

11:00, четверг

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

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

Затем я конвертировал текст в прописные буквы и сделал то же самое для них.

12:59, четверг

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

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

Название шрифта? Odibee Sans (произносится как oh-dee-bee), то есть, One Day Build — ODB.

Заключение

Я отправил Odibee Sans в Google в мае 2017, и он все ещё находится в очереди на добавление. Команда предложила мне пока уделить время дизайну шрифта, хотя они признали, что это противоречит духу проекта.

Я поработал над шрифтом ещё один день. Я добавил все нужные знаки, а также внёс изменения примерно в 30 символов.

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

Комментарии
Продолжить чтение

Разработка

Как сделать собственный VR-шлем за $100

Максим Кутте, 16-летний разработчик, создал свой open source шлем виртуальной реальности.

Леонид Боголюбов

Опубликовано

/

Меня зовут Максим Кутте. Мне 16 лет и я со своими друзьями, Йонасом Сессоном и Габриелем Комбе, сделал свой собственный шлем виртуальной реальности. Он стоил нам всего 100 долларов.

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

Я потратил один год на создание простой 8-битной операционной системы и участие в конкурсе роботов.

Затем я заинтересовался виртуальной реальностью. И мы с друзьями решили, что неплохо было бы создать собственный мир в VR, в котором мы могли бы проводить время после школы. Но Oculus  тогда стоил 700 долларов, и мы решили создать собственный шлем.

VR для всех

Напечатанная на 3D принтере запчасть

Причиной всего стало аниме под названием Sword Art Online. Его главный герой находится в ролевой виртуальной реальности – и так я влюбился в VR. Я хотел понять все ее аспекты.

Я купил самые дешевые компоненты, которые мог, и начал, изучая основы физики и математики виртуальной реальности (правильное ускорение, первообразные, кватернионы…) А потом мы заново изобрели VR. Я написал WRMHL, а затем с Габриелем FastVR. Объединив все это вместе, мы получили гарнитуру стоимостью $100.

Полностью открытая гарнитура для VR и комплект для разработки

Чтобы ускорить время разработки, мы сделали FastVR – SDK с открытым исходным кодом для разработчиков, который легко понять и кастомизировать. Он работает следующим образом:

  • Главный компьютер шлема вычисляет его позицию в пространстве
  • Позиция из шлема отправляется в WRMHL и часть вычислительной мощности процессора тратится на обработку этого сообщения
  • Затем FastVR извлекает данные и использует их для рендеринга VR-игры

Все, что вам надо – сделать на основе открытых исходников шлем.

Почему open source

Я хочу сделать VR мейнстримом. Поэтому я обратился к Уссаме Аммару, одному из соучредителей The Family. Я обсудил с ним создание компании и запуск на Kickstarter.

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

Мы отправились в Кремниевую долину, и Уссама познакомил меня с главным архитектором в Oculus, Атманом Бринштоком. И они дали мне ценный совет: сделай все это open source.

Следующий шаг

Есть еще много технических моментов, которые мы хотим улучшить.

Сейчас мы работаем над автономной VR-гарнитурой –  у нас уже есть как упрощенная версия с более дешевым 3D-трекингом.

Все это мы скоро выпустим.

Как начать

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

 

Комментарии
Продолжить чтение

Дизайн и прототипирование

Ультрафиолет стал цветом 2018 года: что он значит?

В конце каждого года институт цвета Pantone выбирает цвет, который будет определять наступающий год. В 2018 году таким цветом стал Ultra Violet — ультрафиолетовый. Какую символику несет в себе этот цвет и универсальны ли цветовые коды для людей по всему миру?

Анна Гуляева

Опубликовано

/

В конце каждого года институт цвета Pantone выбирает цвет, который будет определять наступающий год. Этот цвет не является отражением модных тенденций, а символизирует изменения в обществе. В 2018 году таким цветом стал Ultra Violet — ультрафиолетовый. Какую символику несет в себе этот цвет и универсальны ли цветовые коды для людей по всему миру?

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

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

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

Но это не единственное значение ультрафиолетового. Он имеет большое значение в качестве цвета, который использовался в символике движения суфражисток, для которых он символизировал преданность и упорную верность своей цели. Помимо этого, ультрафиолетовый является важным символом борьбы за права ЛГБТК-людей. Фиолетовый — это смесь голубого и розового цветов, несущих гендерную окраску, и он отражает размытие границ гендеров. Ультрафиолет позволяет нам увидеть вещи, невидимые в обычном освещении, и этот смысл действительно важен для 2018 года, как в стремлении к многообразию и равноправию разных групп общества, так и в напоминании о творческом потенциале людей и возможностях человеческого мышления.

Комментарии
Продолжить чтение

Наша рассылка

Каждому подписавшемуся - "1 час на UI аудит": бесплатный ускоренный курс для разработчиков!

Нажимая на кнопку "Подписаться" вы даете согласие на обработку персональных данных.

Вакансии

Популярное

X

Спасибо!

Теперь редакторы в курсе.