Итак, вы решили, что собираетесь спроектировать и разработать себе портфолио. Это здорово! Вы переплюните сразу половину сообщества веб-дизайнеров и разработчиков. Но как насчет остальных 50%? Вы должны проявить свои эксклюзивные навыки в таком крошечном проекте как портфолио.
За последние 3 недели я узнал много нового о разработке уникального портфолио. Теперь я чувствую, что пора поделиться этими знаниями с вами.
То, что я сделал за эти три недели, это крутое портфолио в виде игры (или игра в виде портфолио).
Неделя 1. Ищи за рамками очевидного
По крайней мере раз в полгода в интернете рождаются новые тенденции. Очень трудно следовать всем этим тенденциям, и не важно, сколько блогов разработчиков вы читаете. Одностраничные сайты, параллакс, слайдеры, минималистичный дизайн и так далее… список веб-тенденций бесконечен, мы можем продолжать считать их весь день.
Итак, первое, что вам нужно сделать, это небольшое исследование современных тенденций в веб-разработке и веб-дизайне. Одной из хороших сторон такого рода исследований является то, что вы находите идеи для вашего портфолио. Их главная проблема в том, что они могут «отключить» и вы не придумаете свою инновационную идею.
Главное, что вы должны сделать на этой неделе, это записать весь маркетинговый материал. Я думаю, это одна из самых сложных вещей в создании хорошего портфолио. Непросто написать вещи, которые в основном могут определить свяжется ли с вами клиент или нет. Запишите это на бумаге и задайте себе следующий вопрос: «Если бы я был клиентом, что бы заставило меня связаться со мной?».
Не забывайте что это портфолио будет представлять вас в мире. Вы должны придумать оригинальную, инновационную концепцию портфолио, которая взорвет интернет.
После первой недели я принял и обдумал решение: «Независимо от того, насколько трудно это будет, я создам свою браузерную игру». Я дал себе 3 недели времени.
Неделя 2. Не откладывай на завтра то, что можно закодить сегодня
После того, как вы придумаете основную идею, и ни за секунду до этого, начинаите думать о стадии разработки.
Я решил, что моё портфолио будет являться браузерной игрой, и поэтому я стал искать JavaScript-фреймворки, которые помогли бы мне сократить время разработки. Фреймворки, обычно, хороши для старта, но в долгосрочной перспективе они перестают соответствовать вашим потребностям.
Хороший пример в моем портфолио — это лайтбоксы, в которых выводится информация обо мне, и активируются, когда игрок входит в дом. Такого функционала нет в обычном игровом движке на JS.
Сейчас, почти всегда есть возможность взять существующий фреймворк и улучшить его, добавив свой собственный код, но я считаю, что иногда погружение в чужой код займет больше времени, чем написание своего с нуля. Более того, если переписывать чужой код, может возникнуть проблема выпуска новых версий.
После того, как я перепробовал несколько игровых движков на JavaScript, я понял, что у меня нет другого выбора, кроме как создать свой собственный игровой движок, который удовлетворял бы моим потребностям.
Давайте, проведем быстрый обзор основных функций в игре.
Для обработки нажатий кнопок на клавиатуре я использовал следующий код:
$(window).bind('keydown', function(event) {
switch (event.keyCode) {
case 37: // Left
me.moveX(me.leftPos - 5, 'left');
break;
case 39: // Right
me.moveX(me.leftPos + 5, 'right');
break;
case 38: // Up
me.moveY(me.topPos - 5, 'up');
break;
case 40: // Down
me.moveY(me.topPos + 5, 'down');
break;
}
event.preventDefault();
});
Как вы видите, код очень простой. В случае, если пользователь нажимает стрелки вверх или вниз, вызывается функция moveY, если влево или вправо — функция moveX().
Беглый взгляд на одну из них поможет понять как работает вся эта магия:
moveX: function(x, dir) {
var player = this.player;
var canMove = this.canImove(x, null);
if(canMove){
this.leftPos = x;
player.animate({'left': x + 'px'}, 10);
}
}
Для каждого шага игрока, вызывается специальный метод canImove(), который определяет, может ли игрок двигаться в выбранном направлении. Он проверяет границы экрана, позиции домов, края дорог и т.д. Если движение возможно, он возвращает true и персонаж продолжает двигаться, иначе возвращается false и персонаж остается на своем месте.
Теперь, поскольку мы все еще говорим о сети, я понял что движения по стрелкам на клавиатуре недостаточно. Вы всегда должны думать о конечных пользователях — ваших потенциальных клиентах, у которых, возможно, нет времени, чтобы бродить по миру игры. Именно поэтому я добавил панель навигации и возможность «телепортировать» персонажа непосредственно в нужное место в игре.
Функция teleport() выглядит следующим образом.
teleport: function(x, y) {
var player = this.player;
player.css({
opacity: 0,
top: y,
left: x
}).show().stop(true, true).animate({opacity: 1});
}
Я получаю параметры x и y из события клика мышью — event.pageX и event.pageY, после того как я меняю CSS-свойства персонажа top и left я использую JQuery-метод animate() для анимирования прозрачности игрока — для создания эффекта плавного исчезания.
Я могу дать вам один хороший совет, который я проверил на своей шкуре — делайте программу модульной как только можно. Пишите свой код таким образом, чтобы в будущем легко можно было добавлять дополнительные возможности и дополнительный контент.
Неделя 3. Обратная связь это ваш новый лучший друг
В последнюю неделю, развитие моего портфолио шло очень плохо. Я правил последние штрихи дизайна и последние правки кода и боролся с желанием опубликовать портфолио уже сейчас. Это похоже на хранение секрета, когда вы не уверены, что сохранили его.
Я нашел решение этой раздражающей проблемы. Возьмите десять человек, которых вы знаете и которым доверяете, покажите им свою работу и спросите, что они об этом думают. Предпочтительно, чтобы эти десять человек были совершенно непохожи друг на друга. Вот десять человек, которых я выбрал для этой секретной миссии:
- Моя мама
- Мой босс
- Мой лучший друг
- Моq 6-летний племянник
- Ведущий веб-дизайнер
- Ведущий front-end разработчик
- Потенциальный клиент
- Клиент с которым я уже работал
- Инженер по контролю качества
- Еще один супер-пупер веб-разработчик (на всякий случай)
Попросите их рассказать, что они об этом думают. Начиная от мамы, которая говорит вам «Это не работает на моем компьютере!» (Хм, она использует IE5.5 ...), это напомнит вам, что вы должны написать заглушки или специальные таблицы стилей для IE, 6-летнего племянника, который проведет вам бесплатный тест юзабилити, и, наконец, вашего босса и «супер веб-разработчика», которые дадут вам кропотливый обзор деталей кода, которые могут помочь вам улучшить ваш код и сделать его еще более эффективным.
Вы не представляете, как много хороших советов вы можете получить от «обратной связи». Дружите с ней.
Заключение
Хотя разработка портфолио, безусловно, непростая задача, она стоит потраченного времени. Я многому научился занимаясь этим и приобрёл реальной большой опыт.
Потратьте время на мысли о своих собственных уникальных и «умопомрачительных» идеях для вашего портфолио, не стесняйтесь консультироваться с другими людьми, о дизайне, пользовательском интерфейсе и маркетинговых вопросах, и всегда помните, самое главное… получить от этого удовольствие!
Автор: Daniel Sternlicht
Перевод: Tairesh (Плюсы ставим ему. Сам он не смог опубликовать перевод по всем известным причинам)
Автор: VitaZheltyakov
