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

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

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

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

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

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

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

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

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

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

Получение Started

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

СмотретьPen bNWaVz ² Бенджамин де Кок ( @ bdc ³) на CodePen ⁴ .

Мы начнем с 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 KB) .

Хотя оба ваши <code> и <script> элементы могуттеоретически можно вставить в любое место на странице, 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 или toggles
Любой класс 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.Это время, чтобы построить более продвинутую демо

Apple, как Исследуйте Menu

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

uilang demo: explore menu — ( Просмотреть в version ⁹)

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>, <head> <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%) сдвиньте nav до opacity: 0; Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров


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