Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки [заметки]
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
Новый роман известного писателя посвящен судьбам английской молодежи.Герой книги — юноша из рабочей, шахтерской семьи. Ему удается получить образование и стать учителем, однако «равные возможности», столь широко рекламируемые в современном капиталистическом обществе, не приносят герою ничего, кроме разочарования.
Реальность, с которой все мы сталкиваемся, – это созданные словно по шаблону сайты компаний, интернет-магазины, информационные порталы… Однообразие не лучший инструмент для привлечения клиентов. Эмоции продают!Чтобы сайт притягивал клиентов, оказывается, достаточно сделать так, чтобы его вид вызывал положительные эмоции. Удовольствие, удивление в сочетании с неповторимым стилем – вот основы эмоционального дизайна.Освоить его азы и предлагает эта книга. На ее страницах вы найдете подробное описание новых механизмов взаимодействия с вашей аудиторией, а также практические рекомендации, как завоевать сердца клиентов.
Дэвид Стори — один из известных писателей современной Англии. Он вырос в шахтерской семье и в 19 лет стал профессиональным игроком в регби, чтобы заработать деньги для поступления в Высшую художественную школу. Несмотря на то, что ему удается достигнуть определенных успехов — его картины выставлялись на нескольких выставках в Лондоне, — он оставляет живопись и целиком посвящает себя литературному творчеству.«Такова спортивная жизнь» — первый роман Стори. Он сразу же принес ему мировую известность. В 1962 году роман был экранизирован.
В книге рассказывается история главного героя, который сталкивается с различными проблемами и препятствиями на протяжении всего своего путешествия. По пути он встречает множество второстепенных персонажей, которые играют важные роли в истории. Благодаря опыту главного героя книга исследует такие темы, как любовь, потеря, надежда и стойкость. По мере того, как главный герой преодолевает свои трудности, он усваивает ценные уроки жизни и растет как личность.
Работа сайта похожа на работу обычного магазина: если секции с разными товарами расположены логично, консультанты доступны в любой момент, а описания товаров информативны и понятны, есть шанс, что человек, зашедший в магазин, не уйдет с пустыми руками. Проанализируйте характеристики ваших потенциальных клиентов, поймите, что для них является ценностью, какие аргументы привлекут их внимание, соответственно этому продумайте структуру сайта, спроектируйте «маршрут» передвижения и составьте описания товаров – и ваши посетители будут гораздо чаще, чем сейчас, кликать на значок «корзины», а вы в разы повысите один из главных показателей работы сайта – конверсию.
Эта книга – захватывающая история самой успешной Интернет-компании в мире. В последнее время финансовый результат деятельности Google Inc. превосходит даже самые смелые ожидания инвестиционных аналитиков.Целеустремленность, научный талант, творческий поиск, смелость и любовь к эксперименту основателей компании – бывшего москвича Сергея Брина и выходца из штата Мичиган Ларри Пейджа – проложили путь к долгосрочному успеху компании. Под их руководством поисковый механизм Google стал популярнейшим ресурсом, который пользователи любят за удобство и уже испытывают к нему сильную эмоциональную привязанность.
«Даркнет» – это рассказ о цифровой революции в мире медиа. В битве между технологическим прогрессом и медиа-магнатами решается будущее кино, музыки, телевидения, компьютерных игр и Интернета. В этой книге вы найдете истории людей, оказавшихся в эпицентре битвы. «Даркнет» увлечет вас в тайный мир киноподполья, где бутлегеры и пираты скрываются от закона и Голливуда. Но не только в подполье делается цифровая революция: множеству приверженцев цифрового образа жизни, творцам фан-фикшн, диджеев, кинематографистам-любителям, пионерам телевидения нового поколения и разработчикам игр приходится противостоять могущественным силам, стремящимся сохранить статус-кво.
Черный PR сегодня активно перемещается в Интернет. В свое время кольт сделал людей равными. Сегодня Интернет уравнял финансово сильных и слабых в медиапространстве. Глобальная сеть позволяет рядовому человеку разорить могущественную корпорацию. Маленькая компания может эффективно противостоять транснациональному монстру, не располагая никакими финансами. Умение отражать информационные атаки стало на редкость насущной проблемой для любого бизнеса.В этой книге показаны все необходимые для отражения информационного нападения в Интернет инструменты и раскрыты секреты их применения.
В книге рассказывается история главного героя, который сталкивается с различными проблемами и препятствиями на протяжении всего своего путешествия. По пути он встречает множество второстепенных персонажей, которые играют важные роли в истории. Благодаря опыту главного героя книга исследует такие темы, как любовь, потеря, надежда и стойкость. По мере того, как главный герой преодолевает свои трудности, он усваивает ценные уроки жизни и растет как личность.