Дизайнеры: Начало кодирования с UILang

| Editor__33 сек Note: Дизайнеры могут узнать, как код, а разработчики могут узнать, как дизайн.Иногда это может быть не вариант.В этой статье, автор делает предположение, дизайнерам без навыков кодирования, как начать разработке кода.Вы можете взять предложенную инструмент с зерном соли (или нет), но идея может быть стоит посмотреть в .

Дизайнеры широко принят HTML и CSS на некоторое время теперь.Они, как правило, чувствуют себя достаточно комфортно, чтобы реализовать свои собственные проекты, по крайней мере, в статическом виде.Тем не менее, они часто запуганы JavaScript — и справедливо так!HTML и CSS являются декларативными и, я бы спорить, ближе к дизайн, чем программирование .

Наличие, с другой стороны, является “реальным” программирование.Это означает, что вы не только должны научиться совершенно новый и сложный синтаксис, но также должны “научиться думать.” Барьеры для входа высоки и предотвратить многие дизайнеры от принятия шаг. Uilang ¹ пытается исправить эту .

Эта статья познакомит вас с философией UILang и синтаксиса.Мы начнем с простого примера, чтобы вы знакомы с основами, прежде чем перейти к чему-то более захватывающее.В конце этого урока, вы будете (! Надеюсь) смогут кодировать множество типичных виджеты интерфейса, такие как Popovers, вкладок, накладок и многое, многое другое .

Мост между дизайнерами и Developers

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

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

clicking on "button" toggles class "visible" on "div"

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

Получение Started

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

Смотрите Pen bNWaVz ² Бенджамин Де Кок ( @ bdc ^{3 | __6) на CodePen __15 | 4}.

Мы начнем с HTML разметки, которая довольно проста:

<div id="notification">
  <p>You have 3 unread messages.</p>
  <button class="hide">Hide</button>
</div>

Мы в настоящее время используют UILang определить простой поведение: Когда пользователь нажимает на элемент, который имеет hide класс, мы добавим hidden класс к элементу, который имеет notification ID.Перевод в реальной кода UILang выглядит почти так же, как объяснения выше:

clicking on ".hide" adds class "hidden" on "#notification"

Эта строка кода должна быть написана в простой <code> элемент, прямо вHTML.UILang автоматически найти <code> элемент, содержащий вашиКод и игнорировать другие <code> элементы, которые вы, возможно, на этой странице.Кроме того, вы будете иметь, чтобы загрузить и вставить uilang.js library ⁵ (1 Кб) .

В то время как оба ваши <code> 30 ~ и | элементы могуттеоретически можно вставить в любом месте на странице, it’ ы рекомендуется размещать их в самом конце документа, как раз перед закрытием </body> тег:

<body>
  <!-- Your content -->

  <script src="uilang.js"></script>

  <code>
    <!-- Your uilang code -->
  </code>
</body>

Уважая что порядок, you’ Re убедившись, чтобы достичь максимальной производительности рендеринга.Таким образом, ваш окончательный HTML-разметки для уведомления баннер будет выглядеть следующим образом:

<body>
  <div id="notification">
    <p>You have 3 unread messages.</p>
    <button class="hide">Hide</button>
  </div>

  <script src="uilang.js"></script>

  <code>
    clicking on ".hide" adds class "hidden" on "#notification"
  </code>
</body>

Мы почти закончили!Теперь, поведение было определено, мы будем полагаться на CSS исчезать, что уведомление баннер сразу hidden Класс был применен к нему:

#notification {
  transition: .8s
}
#notification.hidden {
  opacity: 0
}

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

Syntax

Синтаксис может быть разделена на четыре части:

clicking on ".hide"(1) adds(2) class "hidden"(3) on "#notification"(4)

Любой CSS selector
adds, removes 39 ~ или |
Любой класс name
Любой селектор CSS или target Ключевое слово (которое выбирает нажал элемент)

Это все, что нужно учиться.Имейте в виду, что UILang в основном только HTML, так что вы можете прокомментировать код аналогично:

<code>
  <!-- I'm a comment -->
  clicking on ".hide" adds class "hidden" on "#notification"

  <!-- I'm another comment -->
  clicking on "li a:first-child" toggles class "active" on "target"
</code>

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

Теперь мы рассмотрели основы UILang.Это время, чтобы построить более продвинутую демо __ 19! |

Мы создадим складной, анимированные меню, схожее с видом вы можете найти на website__2 от Apple | 6 .Проверьте demo ¹¹ ⁷ чтобы увидеть результат .

uilang demo: explore menu — ( Смотреть большое version __25 | 9 )

HTML-Markup

Ничего особенного, на самом деле, просто простая ссылка для переключения навигации и nav элемент, содержащий наш список ссылок:

<a class="explore" href="#">Explore</a>

<nav>
  <ul>
    <li>
      <a href="#"><img alt src="images/1.jpg">West Coast</a>
    <li>
      <a href="#"><img alt src="images/2.jpg">Venice</a>
    <li>
      <a href="#"><img alt src="images/3.jpg">Peyto Lake</a>
    <li>
      <a href="#"><img alt src="images/4.jpg">Iceland</a>
    <li>
      <a href="#"><img alt src="images/5.jpg">Golden Gate</a>
  </ul>
</nav>

Теперь, добавив поведение переключения с UILang будет чрезвычайно прост:

<code>
  clicking on ".explore" toggles class "open" on "nav"
</code>

Затем мы используем эту open класс в нашей таблице стилей, чтобы показать и скрыть nav.Просто, прежде чем мы это сделать, давайте добавим несколько вещей, чтобы завершить нашу HTML-разметку: мета-тег для мобильных пользователей, ссылка на наш стилей и, очевидно, uilang.js библиотека!Весь HTML может выглядеть следующим образом:

<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<title>Explore menu</title>
<link rel="stylesheet" href="style.css">

<a class="explore" href="#">Explore</a>

<nav>
  <ul>
    <li>
      <a href="#"><img alt src="images/1.jpg">West Coast</a>
    <li>
      <a href="#"><img alt src="images/2.jpg">Venice</a>
    <li>
      <a href="#"><img alt src="images/3.jpg">Peyto Lake</a>
    <li>
      <a href="#"><img alt src="images/4.jpg">Iceland</a>
    <li>
      <a href="#"><img alt src="images/5.jpg">Golden Gate</a>
  </ul>
</nav>

<script src="uilang.js"></script>

<code>
  clicking on ".explore" toggles class "open" on "nav"
</code>

Note Для тех, кому интересно о brevety кода, имейте в виду, HTML5 считает необязательным <html>, ~ 49 <body> | и теги.Не стесняйтесь принять другой стиль, если у вас есть другой предпочтение

CSS: Где Магия Happens

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

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

body {
  background: #f3f3f3;
}

.explore {
  /* Make sure the Explore link stays above the nav */
  position: absolute;
  z-index: 1;
}

nav {
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

nav ul {
  /* Allow mobile-friendly horizontal scrolling when the browser isn't wide enough */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* Force the thumbs to display in a row */
  white-space: nowrap;
  padding: 80px 40px 40px;
}

nav li {
  display: inline-block;
}

Затем на интересной части: кодирования поведение переключения!Нам нужно две вещи:

По умолчанию, nav и пальцы должны быть скрыты.Это означает, что мы должны сначала скользить вверх nav и сделать nav и изображения прозрачно .
При open Класс определяется в коде UILang применяется к nav, мы должны обратное состояние по умолчанию: слайд вниз nav и исчезают во всем .

Шаг 1 довольно просто: мы будем использовать translateY(-100%) ... Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров


 		
		
				
		
				
			  Главная   →  Программирование  → 11.02.2015  by  coding.smashingmagazine.com

bot.kz — Новости IT