Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки (Стори, Уолтер)
3
Active Server Pages – технология создания веб-приложений корпорации «Майкрософт». – Примеч. ред.
4
NET Framework – программная платформа. Основой платформы является исполняющая среда CLR, способная выполнять как обычные программы, так и серверные веб-приложения. – Примеч. ред.
5
Cascading Style Sheets – каскадные таблицы стилей – формальный язык описания внешнего вида документа, написанного с использованием языка разметки (например, HTML). – Примеч. ред.
7
Некогда популярная социальная сеть. – Примеч. ред.
8
Вы можете узнать больше о мобильной платформе в редизайне в разделе Арэла Балкана в этой книге.
9
Content management system – система, позволяющая изменять контент на сайте, создавать новые страницы с помощью так называемой «админки» сайта.
11
Конверсия – один из важнейших параметров эффективности сайта. Обычно конверсией называется совершение целевого действия. Показатель конверсии считается как отношение числа пользователей, совершивших целевое действие к общему числу посетителей сайта или целевой страницы. – Примеч. науч. ред.
13
В России PayPal не распространена, и лучше использовать другие платежные системы. – Примеч. ред.
14
В России лучше воспользоваться услугами процессинговых компаний, действующих по законодательству РФ. – Примеч. ред.
15
Payment Card Industry Data Security Standard – стандарт безопасности данных индустрии платежных карт. – Примеч. ред.
16
Набор функций, предоставляемых сервисом для использования во внешних программных продуктах. Используется программистами для написания приложений для взаимодействия с исходным сервисом. Примером такого API могут служить, к примеру, Яндекс. Карты, которые можно встроить на свой сайт. – Примеч. ред.
17
Electronic point of sale – оборудование для калькуляции и учета транзакций. – Примеч. ред.
19
Beanstalk, «An Introduction to Version Control» / smashed.by/version-control.
21
Тег > служит для указания типа текущего документа – DTD (document type definition, описание типа документа). Необходим, чтобы браузер понимал, как следует интерпретировать страницу, поскольку HTML существует в нескольких версиях. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу, и нужно в первой строке кода задавать >. – Примеч. науч. ред.
22
Общие части страниц (группы элементов), которые кочуют из страницы в страницу называются project assets.
25
Polyfill – загружаемый скрипт, который дополняет функционал браузера. Например, старые версии браузеров не поддерживают весь функционал HTML5, и такой скрипт позволяет полноценно работать в старых браузерах недоступным по умолчанию функциям. – Примеч. науч. ред.
36
² В начале 2013 года анонсирован переход Оперы также на движок Webkit. – Примеч. науч. ред.
37
С полным перечнем префиксов можно ознакомиться по ссылке smashed.by/vndrprfx.
38
Если у вас нет времени разбираться, какой префикс нужно использовать для каждого свойства, вы можете воспользоваться постпроцессором, например prefix-free (smashed.by/prfxfree), который позволяет вам писать CSS без префиксов и сам добавляет их через JavaScript.
42
Примеры смотрите в smashed.by/fntexmpl.
45
Свойство column-span еще не поддерживается широко, поэтому ваша верстка может «слететь», если будете сильно полагаться на него.
46
Вы можете попробовать сами, посетив smashed.by/mltclmn.
51
Попробуйте это по ссылке smashed.by/wikitarget.
59
Испробуйте этот пример в действии: smashed.by/transition.
61
Проверьте этот пример в действии: smashed.by/todolist.
62
Попробуйте этот пример на практике: smashed.by/cafevintage.
63
Проверьте этот пример в действии: smashed.by/cafevintage
64
ZURB. Why Burying Sign Up Buttons Helps Get More Sign Ups / smashed.by/signupbuttons.
65
VWOblog. Регистрация возросла до 60 % после фактического перемещения ее формы /smashed.by/abtesting.
66
Вроблевский, Люк. Плавное вхождение в контакт повышает количество регистраций в Twitter на 29 % / smashed.by/twsignups.
67
Вроблевский, Люк. Тестирование форм-аккордеонов / smashed.by/testing-forms.
68
The Baymard Institute. Contextual Words Like ‘Continue’ are Usability Poison/ smashed.by/poison.
69
Apple Insider. Inside Mac OS X 10.7: Lion / smashed.by/appinside.
70
Холст, Кристиан. Redesigning The Country Selector/ smashed.by/selector.
71
Porter, Joshua. Reward The Passionates / smashed.by/dropboxads.
72
Вращающийся каталог с карточками, используемыми для хранения контактной бизнес-информации (ROLling + inDEX). – Примеч. науч. ред.
73
Сейчас уже выпущены ноутбуки с высокой плотностью пикселей, например ноутбуки Apple с экраном Retina. – Примеч. науч. ред.
74
На момент перевода книги уже выпущен ноутбук Apple Macbook Pro 15” с экраном Retina и разрешением 2880 на 1800, который позволяет уместить целиком разрешениеэкрана iPad, правда, лишь в альбомном режиме. – Примеч. науч. ред.
75
Action– скрипт с записанной последовательностью действий для автоматизации рутинных операций. – Примеч. науч. ред.
76
Вы можете воспользоваться моим экшеном для Copy Merged в smashed.by/copyaction.
77
Wikipedia: Borg (Star Trek) / smashed.by/borg // http://ru.wikipedia.org/wiki/Борг_(Звёздный_путь).
78
Unger, Russ and Chandler, Carolyn. A Project Guide to UX Design: For user experience designers in the field or in the making. New Riders Press, 1st edition, 2009. Выпущена издательством «Символ-Плюс» в 2010 под названием «UX-дизайн. Практическое руководство по проектированию опыта взаимодействия».
79
Cooper, Alan. The Inmates Are Running the Asylum. Sams – Pearson Education, 1st edition, 2004. Издана в России под названием «Психбольница в руках пациентов». – Примеч. ред.
80
Компании, работающие в сфере интернет-консалтинга, маркетинга и диджитал-стратегий.
83
84
Pinker, Steven. How the Mind Works. W. W. Norton & Company, Reissue edition, 2009.
86
Medina, John. Brain Rules: 12 Principles for Surviving and Thriving at Work, Home, and School. Pear Press, Reprint edition, 2009.
88
Как отмечает в своем разделе Дмитрий Фадеев, сайт Wufoo выходит за рамки обычного, делая свой образ поистине выдающимся, когда сотрудники рассылают клиентам написанные от руки благодарственные открытки.
90
Wilson, Fred. Minimum Viable Personality / smashed.by/mvp.
91
Wroblewski, Luke. Warm Gun: Designing for Emotion / smashed.by/warmgun.
92
Why Does Emotional Design Work on the Web. Forbes / smashed.by/forbes.
93
Загрузите образцы для досье user personas из smashed.by/persona.
94
Чтобы узнать больше о схеме образа и ее исследовании, см.: Van Gorp, Trevor. Emotional Design With A.C.T.: Part 1 // Boxes and Arrows / smashed.by/emodesign.
95
Anderson, Stephen P. Mental Notes / smashed.by/notes.
97
Детская кукла Элмо, персонаж программы «Улица Сезам». – Примеч. ред.
98
Загрузите эти примеры из smashed.by/mailchimp.
99
«Пасхальное яйцо» (англ. Easter Egg) – разновидность секрета, оставляемого в игре, фильме или программном обеспечении создателями. «Пасхальные яйца» играют роль своеобразных шуток для внимательных игроков и зрителей.
101
Дополнительная информацию на smashed.by/bonus.
102
В оригинале используется термин native – термин, вошедший в русскоязычную практику, обозначающий «родные» приложения для мобильных устройств, в противовес веб-версиям этих же сервисов. Например, сервисом Twitter можно пользоваться через обычный сайт, через мобильную версию и через приложение. Приложения зачастую обеспечивают более высокие производительность и возможности. – Примеч. науч. ред.
103
Progressive enhancement – методика проектирования, когда сначала сайт проектируется для устройств с малыми возможностями (например, телефонов с небольшими экранами), а затем функционал прогрессивно улучшается для других устройств (планшетных и настольных компьютеров). – Примеч. науч. ред.
104
Узнать больше о методах такой работы вы сможете, изучив материалы по живым методологиям и развитию продукта, нацеленного на пользователя. Постоянное тестирование и добавление по его результатам элементов дизайна – это то, что я называю динамичное развитие продукта, нацеленного на пользователя («user-centered agile product development»): smashed.by/cfe.
105
Эти нормы обычно выражаются в рекомендациях по интерфейсу к платформам, а именно рекомендации по интерфейсу с пользователем для платформ Mac, iPhone, iPad и Android. Android можно выделить, так как это не единичная платформа, имеющая много разновидностей, каждая настроена под устройство производителя и мобильные носители. Вот почему для Google очень сложно проконтролировать опыт пользователя на платформе Android. Хороший пользовательский опыт – это контролирующая функция. А Google очень слабо контролирует опыт пользователей телефонами с платформой Android.
106
107
108
Смотрите, как Тантек Челик требует «Руководство интерфейса человека для сети» (smashed.by/wehuin), и читайте сообщение Джо Хьюитас призывом обращать больше внимания на веб-технологии (smashed.by/owned).
109
Как утверждает Эндрю Люис, «если вы не платите за это, вы – не клиент. Вы – продукт на продажу» /smashed.by/discount.
110
Если вы действительно соображаете и используете Git для управления версиями разработки (github.com), вы можете автоматически выгружать последнюю актуальную версию на сервер.
111
Во всяком случае здесь URL не заблокируется автократичным режимом.
112
Изучите «манифест одной версии» и характер меньшей версии сети в моем отзыве в. Netmagazineс названием «Мой веб-сайт будет поддерживать только новейшие версии браузера» («My Websites Will Only Support the Latest Browser Versions») /smashed.by/netsu
113
Topolsky, Joshua. A modest proposal: the Continuous Client / smashed.by/client.
114
Graceful dergradation – изящная деградация – прием, обратный прогрессивному улучшению. В этом случае продукт разрабатывается, например, для браузеров с полной поддержкой современных функций, а для устаревших версий, таких как, например, Internet Explorer 6, функционал уменьшается – убирается поддержка «украшательств» и менее важных опций, оставляя базовый функционал. – Примеч. науч. ред.
115
PhoneGap не навязывает использование какой-то определенной структуры веб-интерфейса пользователя (например, jQuery Mobile). Все это позволяет вам представить веб-приложение «родным». Однако, независимо от того, какую структуру интерфейса пользователя вы используете (или даже если вы решили вообще не использовать структуру веб-интерфейса пользователя), воспроизводимые компоненты будут компонентами веб-интерфейса пользователя, а не компонентами «родного» интерфейса пользователя той платформы, на которой запускается ваше приложение.
116
То же самое можно сказать о веб-приложениях, которые добавляются на экраны телефонов. К тому же веб-приложение, о котором идет речь, выглядит и запускается как «родное» приложение, но ведет себя иначе. У веб-приложения, работающего в браузере, нет таких недостатков, так как у него нет цели имитировать «родное» приложение операционной системы. Это «родное» веб-приложение, а они – так же как и «родные» приложения на других платформах – имеют свою культуру, условные обозначения, язык, нормы и ожидания (даже если они могут быть не так ярко выражены, как на некоторых других «родных» платформах).
117
¹ Не использует бинарные файлы.
² Если запускается в браузере.
³ Если запускается по ссылке с домашнего экрана.
118
Не путайте Titanium Mobile с Titanium Desktop. Последний функционирует просто как PhoneGap. Appcelerator недавно открыл доступ к исходникам Titanium Desktop и сфокусировался на улучшении Titanium Mobile: smashed.by/tita.
119
Более точно известен как URI, хотя между двумя обозначениями существует техническая разница. Разработчики W3C-стандартов вскипели бы, если бы увидели, как здесь пренебрегают ею.
120
В настоящее время The CSS Flexible Box Layout Module (smashed.by/w3flexbox) является одной из нескольких мощных разметок в разработках. До сих пор ее внедрение в браузеры ограничено. Я написал учебное пособие, которое демонстрирует спецификацию Flexbox с использованием трех маленьких прямоугольников на одной странице: smashed.by/learnflexbox.
121
Потрясающая статья Итан Маркотта «Отзывчивый веб-дизайн» (smashed.by/rwdala) больше чем о медиазапросах, но медиазапросы рассматриваются в полезном контексте, и я очень рекомендую прочитать статью всем, кто не знаком с ними.
122
Люк много говорил и писал о методе «Сначала мобильные»: smashed.by/mfirst.
123
Специальная версия браузера Chrome, в которой тестируются самые новые функции. – Примеч. науч. ред.
124
Труд Стефана Фью «BulletGraphDesignSpecification» воодушевил меня на создание графика точек прерывания: smashed.by/bullgraph (PDF). Для более подробной информации смотрите статью в Википедии: smashed.by/bullgraphwiki. Графики точек прерывания и буллит-графики отличаются, тем не менее я еще пока не написал спецификацию для графика точек прерывания.
125
Я не могу не подчеркнуть то, что тестирование важно для актуальных браузеров на актуальных устройствах. По возможности, сделайте скриншот на устройствах, потому что простое изменение размеров окна браузера настольного компьютера редко хорошо эмулирует, что действительно происходит на других устройствах. Эмуляторы тоже не всегда рассказывают всю правду, но они все же лучше, чем измененный в размерах браузер настольного компьютера.
126
Препроцессоры CSS позволяют писать ясный CSS с использованием программных конструкций (например, использовать переменные) вместо статических правил. Предназначены для увеличения уровня абстракции кода CSS и упрощения файлов каскадных таблиц стилей. – Примеч. науч. ред.
129
137
См. седьмой раздел для обзора общепринятых разрешений экрана смартфона и пиксельных разрешений.
142
Более подробный обзор процесса дизайна Саманты представлен на www.styletil.es.
143
Набор инструментов (фреймворк) для создания сайтов и веб-приложений. Включает в себя HTML и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейсов, включая JavaScript расширения. Разработан в Twitter. – Примеч. науч. ред.
145
146
147
148
Стивен Хей описывал удобный технологический процесс будущего в предыдущем разделе этой книги.
150
151