varzin

Как самое простое решение вам подойдет вот этот очень популярный плагин. https://wordpress.org/plugins/contact-form-7/scree...

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

Можно так попробовать.

// Для примера за проверяемый день я возьму сегодняшний 
var today = new Date();

// Узнаем какой это день недели
var day = today.getDay();

// Если 6 или 0 (СБ или ВС), то weekend = true
var weekend = (day == 6) || (day == 0);

Ну и дальше, если true, то добавляете просто CSS-класс, который и красит день.

Например вот так codepen.io/varzin/pen/rFfhH

Обратите внимание, что мы теперь выводим не просто значения, а обрамляем их тегами. И вот их и оформляем через CSS.

Для выполнения вашей задачи достаточно знать базовый синтаксис JS и арифметику.
Для упрощения синтаксиса используйте jQuery. Чтобы подключить его, пропишите перед подключением вашего файла скриптов например следующее:

<script src="http://code.jquery.com/jquery-latest.js"></script>

Ниже конкретно ваш пример с комментариями.
Что-то может быть не точно, я быстро написал, но принцип вам будет понятен.
codepen.io/varzin/pen/PqRWNY

Один из примеров отличной быстрой галереи fotorama.io

1) Нет. Сетка это лишь вариант все упорядочить и подчинить единому ритму. Никто не мешает вам придумать какой угодно свои дизайн со своей собственной сеткой.

2) Если вы установили Guide Guide, то чтобы показать его панель, выберите Window > Extensions > Guide Guide.
Кроме того стандартные варианты сетки Photoshop CC уже умеет делать сам через меню View > New Guide Layout (подробнее https://helpx.adobe.com/photoshop/how-to/align-obj...)

3) Просто делайте дизайн прямо в этом PSD сохранив его под другим именем.
Если же вы уже начали делать дизайн в другом файле, то откройте оба (сетку и ваш файл). Затем выберите все необходимые слои сетки. Затем Правый клик > Dublicate... В появившемся меню в списке Document выберите тот, в который хотите перенести слои. Слои скопируются в ваш макет.

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

Такой эффект из коробки и без хаков умеет делать программа Sketch (только Mac). Для этого объекту нужно назначить эфффект Background Blur и убрать заливку (или сделать ее полупрозрачной).
Как все же сделать в Illustrator (пошагово):
Я буду показывать на примере Illustrator CC 2015, но расположение меню не должно сильно отличатся.

1) Создайте два одинаковых слоя с фоновой картинкой. Они должны располагаться точно один над другим. Назовем их Original и Blurred.


2) Выберите верхнюю картинку (Blur) и назначте ей эффект размытия:
Effect > Blur > Gausian Blur

3) Выше нее разместите прямоугольник, который будет маской. Назовем его Mask.


4) Теперь выберите слои Mask и Blur, а затем выполните команду:
Object > Clipping Mask > Make

В итоге должно получиться так:

Все очень индивидуально в зависимости от ваших навыков и целей.

Где показывать

• Если хотите показать разработчику, то показывайте в том формате в каком делаете.
  
• Если хотите показать миру, то выкладывайте либо в формате видео (YouTube, Vimeo) либо в формате гифок (Behance, Dribbble)
  
  
  

Как делать

Рассмотрим разные варианты.

1. Раньше многие использовали After Effects, чтобы быстро "нарисовать" анимацию. Но сейчас такое время, что если вы этого не делали, то учиться скорее поздно. Но в принципе это все еще актутально.
   
   
2. Если вы знакомы скажем с JS, то какие-то анимации можете изображать там. Плюс для разработчика здесь в том, что уже будут вычислены основные параметры анимаций. Быстро показывать можно, например, при помощи codepen.io
   
   
3. Чуть более навороченный уровень это прототипирование анимаций при помощи приложения Form (www.relativewave.com/form) или очень похожей на него надстройки для Quartz Composer — Origami от Facebook (facebook.github.io/origami)
   
   
4. Также есть неплохое решение от Pixate. Относительно гибкое в плане анимаций. Один проект бесплатно. Можно тестировать на устройстве. www.pixate.com
   
   
5. Раз такой вопрос, то вы скорее не очень близко знакомы непосредственно с написанием кода приложения. Оно и не обязательно, если вы дизайнер. Но в будущем, если заинтересуетесь, можно будет использовать для экспериментов готовые фреймворки. Например Spring (https://github.com/MengTo/Spring) или POP (https://github.com/facebook/pop)
   
   
6. Ну и на последок довольно неожиданное, но очень простое решение для быстрого прототипирования и тестирования анимаций — Keynote (программа для презентаций) от Apple. На эту тему была неплохая лекция на минувшем WWDC https://developer.apple.com/videos/wwdc/2015/?id=803

Удачи в работе :)

sub() { # Создаем функцию для открытия файла или папки в Саблайме
	if [ -z "$1" ] # Если параметр пустой
	then # То открываем в Саблайме текущую папку
		open -a Sublime\ Text "$(pwd)"
	else # Если не  пустой, то открываем файл, который написали в параметре
		open -a Sublime\ Text "$1" 
	fi
}

Ну и соответственно использование:
sub — откроет текущую папку
sub index.html — откроет конкретный файл

Как готовый вариант можно использовать pagePiling.js
alvarotrigo.com/pagePiling

Как вариант можно анимировать свойства CSS через transition

jsfiddle.net/varzin/9woqt7pn/1

Сначала обозначаются и утверждаются задачи продукта. Какие кейсы он должен решать. Как вы сами лично видите его (продукт). Чем подробнее, тем лучше. После этого можно начинать работу.

Проектировать интерфейс должен человек имеющий опыт работы в UX. Эта часть даже более важна, чем визуальная, так как отвечает за то, что будет чувствовать человек, когда будет работать с приложением и как будет себя вести. Он должен иметь опыт в юзабилити, понимать особенности платформ, хорошо представлять, как происходит разработка под конкретную платформу, быть знакомым с различными практиками решений конкретных задач, знать, что в системе сделать просто, что сложно. Также очень важно уметь делать интерактивные прототипы, чтобы быстро тестировать какие-то решения (или демонстрировать их клиенту / раработчику).

Дизайнер также должен иметь опыт создания интерфейсов под конкретную платформу.

Хорошо, когда и UX и UI делает один человек (или одна команда) имеющая опыт в обеих областях. Супер хорошо, если они еще и отлично знают кухню непосредственно разработки.

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

Для демонстрации и обсуждения дизайна или прототипов с клиентом или командой есть множество готовых сервисов. Все заточены под конкретные задачи. Как пример для удаленного обсуждения макетов мы часто используем сервис www.invisionapp.com Можно прямо там указывать на конкретные места и обсуждать их или связывать макеты в кликабельный прототип.

Получилось немного сумбурно, надеюсь, что помог.

var isMobile = {
    Android:        function() { return navigator.userAgent.match(/Android/i) ? true : false; },
    BlackBerry:     function() { return navigator.userAgent.match(/BlackBerry/i) ? true : false; },
    iOS:            function() { return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false; },
    Windows:        function() { return navigator.userAgent.match(/IEMobile/i) ? true : false; },
    any:            function() { return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());  }
};
	
if ( !isMobile.any() ) {
    // Код не для телефонов
}

• Вариант 1: воспользоватсья утилитой DMesh (вроде только Мак и iOS) dmesh.thedofl.com
  
• Вариант 2: рисовать все руками в иллюстраторе.
  

Вопрос не очень понятен, но если вам нужно несколько фоновых картинок с разным позиционированием, то можно просто прописать несколько параметров через запятую.

Пример:

.wrapper {
    background-image:
        url(bg-left.jpg),
        url(bg-right.jpg),
        url(bg-cover.jpg);
    background-size:
        100px 50px,
        auto,
        cover;
    background-position:
        left top,
        right top,
        center;
    background-repeat:
        no-repeat;
}