Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки
Реклама. ООО «ЛитРес», ИНН: 7719571260.
Оглавление
Аарон Уолтер. Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки
Предисловие от партнера российского издания
Вступительное слово научного редактора
Введение. Автор: Элиот Джей Стокс
Бизнес-подход в переделывании сайтов. Автор: Пол Боуг. Рецензент: Коллис Тайед
Пришло ли время переделывать сайт?
Когда полная переработка сайта является расточительством
Хорошие дизайнеры создают новое, великие дизайнеры переделывают старое
Когда сделать заново предпочтительней, чем улучшать постепенно
Сигналы к масштабным изменениям
Причины для изменений
Как избежать ловушек в проекте
Борьба с расширением рамок проекта
Принесение в жертву стиля и тренда
Разработка сайта без учета возврата инвестиций
Что делать с негативными отзывами
К исследованиям будь готов!
Зачем вам делать домашнее задание?
Какое исследование я должен провести?
Ценность опроса заинтересованных лиц
Исследуем то, что имеем в настоящий момент
Принцип совместной работы при переделывании сайта
Как правильно работать над проектом
Презентация проекта
Обратная связь через тестирование
Продажа тестирования заказчику
Какой вид тестирования проводить
Как получить отзывы о дизайне
Юзабилити-тестирование
Когда и кого тестировать
Как быть с отзывами заказчика
Вечная переделка
Как создать программу непрерывной работы
Использование технологий для обеспечения будущего сайту
Планирование мобильного будущего сайта
Что дальше?
Об авторе
О рецензенте
Выбор платформы: технические решения для переделки вашего сайта. Автор: Рэйчел Эндрю. Рецензенты: Райан Карсон, Харли Финкельштейн
Для кого этот раздел?
Узнать все о действующей платформе
Сбор технических требований
Управление контентом
Всем ли редакторам (контент-менеджерам) нужны одинаковые права доступа?
Будут ли управлять контентом специальные сотрудники, или это станет частью работы других людей?
Нужно ли поддерживать многоязычность?
Какой тип контента будет редактироваться?
A/B-тестирование
Электронная коммерция
Платежный шлюз
PCI DSS
О доставке
Цифровые продукты
Отчет и другие функции
Интеграция с другими системами
Ограничения
Бюджет
Выбор языка программирования
Технические ограничения
Политические ограничения
Писать новый код или улучшать старый?
Собственная разработка или коробочное ПО?
Зачем разрабатывать свое?
Выбираем коробочную платформу?
Облачные решения
Бойтесь «евангелистов»!
Хостинг
Дешевый хостинг – дорогой хостинг, или Скупой платит дважды
Как выбрать хост
Принимаем решение
Типы хостинга
Среда разработки
Вспомогательный сервер
Контроль версий
Перенос вашего сайта
Установка нового оборудования хостинга
Перемещение файлов на новый сервер
Перенос базы данных на новый сервер
Настройка почтовых ящиков
Изменение сервера доменных имен, или переназначение записи домена
Перенос сайта, работающего на базе данных
Куда дальше?
Об авторе
О рецензентах
Погружение в HTML5. Автор: Бен Шварц. Рецензент: Рас Уикли
Мы откуда и куда?
WHATWG, W3C и «Компания»
Знайте, какими функциями пользоваться
DOCTYPE описание типа документа (DOCTYPE)
Мета-теги
Теги со ссылкой на таблицу стилей и скрипты
Асинхронная загрузка шрифтов
Передаем файлы быстрее
Новые семантические теги и их использование
Сброс HTML-стилей по умолчанию
Строим сайт заново
Тег SECTION
Тег ARTICLE
Тег HEADER
Тег FOOTER
Тег ASIDE
Тег TIME
NAVIGATION
Теги FIGURE и FIGURE CAPTION
Тег DIV
Несколько слов о семантической структуре
Работа со стандартом WAI-ARIA с самых азов
Хранилище на стороне клиента
В заключение
Об авторе
О рецензенте
Меняем стиль, переписываем код и преображаем сайт с помощью CSS3. Автор: Дэвид Стори, Ли Веру. Рецензент: Тэб Аткинс, мл
Сайты не должны выглядеть одинаково во всех браузерах
Система нейтрализации ошибок
Как читать этот раздел
Веб-типографика и техники работы с текстом
Представляем REM
Задание ритма в rem
Заставляем заголовки соответствовать ритму
GEORGIA у меня на уме
Добавить свой собственный @font-face
Используем шрифтовые онлайн-сервисы
Встречайте нового члена семейства, используя FONT-STRETCH
Перенос слов
Журнальная верстка
Определение колонок
Размещаемся в нескольких колонках
Техники верстки/компоновки
Разметка с помощью тянущихся блоков
Пример: Горизонтальная и вертикальная центровка, или Священный Грааль веб-дизайна
Включаем FLEXBOX
Центровка по горизонтали
Центровка по вертикали
Гибкость в размерах
Независимый источник порядка
Работа с изображениями
Множественные фоны и градиенты
Свойства BACKGROUND-ORIGIN, BACKGROUND-SIZE, OUTLINE
Изменяем размер фонового рисунка по ширине
Правим логотип
Добавление розовой строчки
Обрезание фона
Граница рисунка
Преобразования (трансформации)
Применение дополнительных трансформаций
Настройка базы трансформаций
Селекторы
Подсвечивание текущего элемента
Указание на элементы, основанные на их позиции в DOM (объектной модели документа)
Что насчет старых браузеров?
Сочетаем элементы без проблем
Перемещения
Использование перемещений
Настройка скорости передвижения лошадей
Придержите своих лошадей
Заключение
Об авторах
О рецензенте
Повторное открытие JavaScript: фишки и приемы для замены сложного jQuery. Автор: Кристиан Хейлманн. Рецензент: Пол Айриш
Сила смешивания и сочетания
Функции, доступные нам сейчас
QUERYSELECTOR и QUERYSELECTORALL
Работаем с классами: CLASSLIST
Меняем плавно: CSS TRANSITIONS
Контент, сгенерированный посредством CSS
Делегирование событий: от многих до одного
Техники в примерах
Пример 1: Простой список дел
Продвинутые CSS селекторы и сгенерированный контент для задания стиля
Делаем удаление элемента списка в два этапа
Формы с проверкой корректного заполнения полей
Сохранение состояния списка
Пример 2: Анимированные элементы страницы с использованием CSS3
Пример 3: Создание миниатюры изображения в браузере
Заключение
Правильная технология работы
Большая игра
Принимаем и применяем технологии будущего
Об авторе
О рецензенте
Техники для создания лучшего пользовательского опыта. Автор: Дмитрий Фадеев. Рецензент: Джошуа Потер
Улучшаем формы и процесс регистрации
Скрытый опрос
Сделайте регистрацию скрытой
Плавное вхождение в контакт
Последовательная регистрация
Формы – аккордеоны
Гендерный вопрос
Хорошие значения по умолчанию
Дизайн интерфейсов – это копирайтинг
Особое внимание деталям
Новые и экспериментальные техники
Интерактивный сторителлинг
Измеритель завершенности
Режим реального времени
Селектор страны
Прогрессивный вход в систему
Отзывчивый мобильный интерфейс
Меню пиктограмм
Работа с клиентами – это опыт взаимодействия
Поддержка смайликом
Документация тоже впечатляет
Предоставление кредита
«Ответьте, пожалуйста!»
Поощрение преданных пользователей
Спасибо!
Анти-UX: темные модели
Значимость хорошего дизайна
Об авторе
О рецензенте
Дизайн будущего: использование Photoshop. Автор: Марк Эдвардс. Рецензент: Джон Хикс
Размеры экрана
Плотность пикселей
Местоположение
Реализм
Закладываем масштабируемость
iOS
Android
Windows Metro
Mac OS X
Сайты и веб-приложения
Масштабируемые документы Photoshop
PDF, SVG, CSS и изображения с помощью кода
Подготовка вашего рабочего поля
Пиксельная сетка
Размер предпросмотра
PPI документа
Цветовой профиль
Отключение системы управления цветом RGB в Photoshop
Отключение системы управления RGB в Illustrator
Фигуры
Привязка к пиксельной сетке
Устранение проблем с вращением
Сдвиг точек на один пиксель
Заливка и форма
Выпуклая заливка
Вогнутая заливка
Сферические фигуры
Отраженные градиенты
Угловые градиенты
Градиенты на градиентах
Размытие градиентов
Текстуры
Создание паттерна
Слои заливки паттерном
Стили заливки паттерном
Смарт-объекты (Smart Objects)
Передача дизайна
Информация о шрифте
Растягиваемые изображения
Изображения и плотность пикселей
Сжатие PNG и приложения iOS
Проверка устройств
Техники для экспорта изображений из Photoshop
Скопировать объединенные данные
Экспортирование слоев в файлы
Ломтики (Slices)
Спрайты с ломтиками
Ломтики на основе слоя
Как я экспортирую
Сравнение и настройка
Новые проблемы
Об авторе
О рецензенте
Переделка сайта с использованием индивидуальности. Автор: Аарон Уолтер. Рецензент: Дениз Джекобс
Кто они?
Индивидуальность
Давным-давно, в далекой-далекой галактике
Продукция и люди – одно и то же
Один из этих сайтов не похож на другие
Я помню
Люблю и ненавижу
Наши пользователи умеют обращаться со слухами
Образ: уже не только для дизайнеров
Определяем ваш образ с помощью дизайн-персонажа
Разработка дизайн-персонажа
Задание голоса и адаптация тона
Заключение
Об авторе
О рецензенте
Размышления о мобильном опыте использования в дизайне: сетевой или «родной»[102]? Автор: Арэл Балкан. Рецензенты: Джош Кларк, Андерс М. Андерсен
Веб-разработчик – это разработчик опыта пользовательского взаимодействия
Дизайн документов против дизайна приложений
Разработка в первую очередь для пользователей
Цель главы
Что значит «родной»?
Все дело в нулях и единицах
Родной как культура
Гибридные приложения
Преодоление идеологических предрассудков
«Родные» приложения и платформы – исчезающие виды?
Размывание границ
Легкость в использовании и легкий доступ
Автоматические обновления
Непрерывный доступ к данным
Просто еще один клиент
Будущее за родным
Документ или приложение
Соображения по мобильному дизайну для сконцентрированных на документах продуктах – сайтах
Кроссплатформенность или единственная платформа?
Миф: Один раз написанный код работает везде
Смерть от тысячи ранений
Напиши один раз, оптимизируй везде
Сетевые и другие кроссплатформенные технологии
Чужие приложения в обертке от «родных» бинарных файлов, или Волки в овечьих шкурах
Приложения с эффектом присутствия против приложений без эффекта присутствия
«Родные» приложения, переведенные с «неродных» языков
Веб-приложения
«Родные» приложения одиночной платформы
Дизайн для людей
Об авторе
О рецензентах
Перестраиваем рабочий процесс: дружелюбный подход к будущему проекту. Автор: Стивен Хей. Рецензент: Брайан Ригер
Сначала структурированный контент: мышление, независимое от устройства или платформы
Перечень контента
Пример: «Три маленьких прямоугольника»
Прототипирование со ссылкой на контент
Проектирование структурированного контента
Улучшаем опыт взаимодействия: специфика платформ и устройств, с учетом возможностей браузеров и устройств
Чуть ближе: классы устройств
Улучшение опыта взаимодействия против ключевых сценариев
График точек прерывания
Проектирование в браузере: Адаптивное и отзывчивое прототипирование
Новое мышление, новый подход к дизайну
Об авторе
О рецензенте
Стать невероятно гибким: создание атомов и элементов. Автор: Энди Кларк
Ядро ваших действий
Как, когда и зачем?
Просто. На самом деле просто
Превратности быстрой смены положения дел
Разработка в сжатых рамках
Интернет не знает границ
Нож в перестрелке
Этот неудобный факт
«Эй, а я вот что сделал!»
Для дизайнеров
Для разработчиков
Для заказчиков
Дизайн – это не всегда разметка
Сначала дизайн компонентов
Мудборды
Мозайка стилей
BOOTSTRAP
Вы на Дрибле?
Руководства по стилю
Сохранение статических макетов, когда это уместно
Атмосфера дизайна
Извлечение атмосферы
Food Sense
Джейми Оливер (Jamie Oliver)
BBC Food
Стать невероятно гибким
Об авторе
Отрывок из книги
Множество авторов сейчас пытаются научить вас создавать сайты, приносящие прибыль своим владельцам. Однако книги, написанные настоящими мастерами своего дела, встречаются редко. Перед вами одна из них.
Эта книга достойна самого внимательного изучения. Здесь есть все инструменты для того, чтобы вы смогли создавать по-настоящему современные, удобные и эффективно работающие сайты.
.....
• Они дают более полный ракурс
Многие веб-проекты крупных организаций влияют на многочисленные стороны бизнеса. Чтобы полностью осмыслить потенциальное влияние проекта, вы должны обсудить его со всеми участниками. Многие проекты заказываются одним отделом, у которого будет свое определенное видение целей. Беседуя с другими заинтересованными лицами, вы убедитесь, что проект, скорее, помогает, чем мешает другим людям внутри компании.
.....