Codiqa инструменты для макета сайта

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

Планирование проекта

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

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

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

Что Codiqa?

Codiqa простой интерфейс инструментов для JQuery Mobile. Он невероятно удобный в использовании, и он состоит из 100% компонентов HTML5. После создания прототипов ваших идей, вы будете получать идеальное использования кода. На самом деле, нет никакой необходимости, позже кодировать еще раз. Сила этого приложения заключается в быстром создании мобильного прототипа. Вы можете получить доступ к вашему проекту из любой сети, и, кроме того, есть функция которая позволит вам поделиться ими с членами команды или другими разработчиками для реального тестирования и обратной связи. Единственным недостатком Codiqa является, то что он не полностью бесплатный инструмент. После 30 дней использования, если вы хотите продолжить работать с этим инструментом, вы должны выбрать лицензию. Есть четыре вида лицензии, которую вы можете выбрать: Personal, Starter, Pro, и Team, каждый из которых подробно описаны на сайте Codiqa.

Как работает Codiqa

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

Первым делом необходимо определить размер устройства, для которого вы хотите создать макет. Вы можете выбрать между iPhone (3,4,4 S, 5), IPad (1/2/3), планшетом 600 х 1024px, и телефоны, которые варьируются от 240 х 320 пикселей до 800 х 1280. В качестве следующего шага, давайте работать на стилем главной страницы, под называнием «Home» по умолчанию (вы можете изменить название, как вам удобно). Вы можете выбрать тему из пяти доступных, загрузить фоновое изображение (также выбрав повторения на X и Y оси), и содержание обивки программы в пикселях или процентах.

Создать приложение в codiqa
Загрузить фоновое изображение в codiqa

Давайте посмотрим, что еще мы можем добавить в нашу новую страницу. Если вы щелкните на элементе под названием «Components» рядом с «Pages» в левой части страницы, вы обнаружите, что вы можете добавлять много элементов, многие из которых являются общими и весьма полезными. На данный момент, давайте подумаем о том элементе, который мы могли бы добавить: заголовок, колонтитул, список меню, текстовое поле для некоторого содержания, немного изображение, и некоторые ссылки. С помощью простой Codiqa интуитивно понятной drag-and-drop системы, вы можете легко добавить все, что вы хотите с помощью нескольких кликов. После добавления элементов, которые мы хотели, наш макет выглядит примерно так:

Добавление элементов в codiqa
Добавление элементов в codiqa

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

В окне «Select Menu», которое появляется при нажатии на соответствующие места, вы можете задать имя, название, для показа, тема, размер (выбирая между вариантами “normal” и “mini”) , и элементы, которые будут предложены в вашем меню. Чтобы добавить новый пункт меню, вы должны просто нажать на кнопку «New Option» зеленой кнопки в нижней части окна. Вы найдете типичный текстовый редактор, где вы сможете указать характеристики и содержание пункта.

Относительно изображения, мы добавили пример изображения ниже содержимого бокса. Его размер может задаваться в пикселях или процентах. Наконец, в ссылке меню, вы можете построить гиперссылки и задать все обычные атрибуты для связывания. Для функциональности, вы можете выбрать между fade, pop, flip, turn, flow, slide fade, slide, slide up, и slide down. Помните, что вы можете вращать устройство чтобы убедиться, что ваш выбор дизайна хорошо работает в ландшафтном режиме.

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

Заголовок, поиск вход, формы и кнопку отправки в codiqa
Заголовок, поиск вход, формы и кнопку отправки в codiqa

Для этой контактной формы, укажите URL, выбрать между методами «GET» или «POST» , и решить, будет сделано с AJAX или нет. В кнопке могут быть изменены по размеру, названия, встроенный характер, и в этом случае вы также можете выбрать иконку. Есть и другие несколько элементов Codiqa, которые не вписываются в этот макет, но о них нужно упомянуть:

  • Map: ширина и высота изображения могут быть указаны в пикселях. Вы можете также определить уровень масштабирования;
  • List View: вы можете создать список, определяющий как на тему делителя и элементов, ссылка перехода, путь ссылки и названия кнопок;
  • Radio Button: переключатель является элементом, который позволяет пользователю выбрать только один из предопределенный набор взаимоисключающих вариантов;
  • Toggle Switch: он отображает checked/unchecked, как кнопка с «light» индикатора и по умолчанию сопровождается текстом “On” or “Off”. Вы можете выбрать тему, название, размер, и в конечном итоге текст, который вы хотите видеть вместо «On» и «Off».

В заключение

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>