Рассказ о том, что представляет собой наш «станок» верстальщика сегодня. Рассказывается с примерами, какие браузеры поддерживаем, как производим кроссбраузерное тестирование и какие инструменты используем, готовя проект к выходу в свет.

1. Современный станок верстальщика
Николай Птущук
Евгений Батовский
Я.Субботник, Киев, 5 мая 2012 года

2. 2

3. 3

4. 4

5. 5

6. Наш современный станок
6

7. Наш современный станок
— Аналитика пользователей
6

8. Наш современный станок
— Аналитика пользователей
— Зоопарк браузеров
6

9. Наш современный станок
— Аналитика пользователей
— Зоопарк браузеров
— Оптимизация
6

10. Наш современный станок
— Аналитика пользователей
— Зоопарк браузеров
— Оптимизация
— Сопровождение
6

11. Аналитика пользователей

12. Safari
Opera 1%
16% 27% IE
30% 20%
Firefox Chrome
8

13. Firefox Chrome IE Opera Safari
12 – 1,7% 18 – 12,6% 9 – 9,7% 11.6 – 14,3% 5 – 0,7%
11 – 13,9% 17 – 5,4% 8 – 12,9% 11.5 – 1,4%
10 – 2,8% 16 – 0,9% 7 – 3% 11.1 – 0,6%
9 – 1,8% 15 – 0,6% 6 – 1,7%
8 – 1,3%
7,6,5,4 – 0,7% > 0,5%
3.6 – 4,3%
3.5 – 0,9% Итого 23 браузера
9

14. 10

15. 11

16. Graceful degradation
12

17. Graceful degradation
— Доступные контент и функциональность
12

18. Graceful degradation
— Доступные контент и функциональность
— Браузерозависимые стили
12

19. 13

20. Зоопарк браузеров

21. БРАУЗЕРЫ
15
Ну почему вас так много?

22. Как проверяем верстку
16

23. Как проверяем верстку
1 верстальщик = 7 компьютеров
16

24. Как проверяем верстку
1 верстальщик = 7 компьютеров
30 верстальщиков = 210 компьютеров
16

25. Это почти правда
17

26. Кто они — наши пользователи?
18

27. 19

28. 19

29. 19

30. забывают
обновлять
браузер
20

31. устанавливают
альфа и бета
версии
21

32. свой набор медиа
плагинов, «баров»
22

33. собственные сборки
браузера
23

34. 24

35. Разработчику нужно быть
ближе к пользователю
25

36. Разработчик интерфейсов?
ORLY?
Установи JAWS, какой-нибудь сниффер http/
https, Fiddler к примеру,
прокси сервер туда же для отладки, privoxy и
OpenVPN туннель еще нужен...
26

37. Разработчик интерфейсов?
ORLY?
— Протестировать страницы для печати
— Проверить адаптивность страниц
— Настроить браузеры «под себя»
27

38. 28

39. 29

40. Образы виртуальных машин MS VPC
clck.ru/10L4i
30

41. MS VPC + VirtualBox = ievms
clck.ru/10L6k
31

42. MS Windows XP IE6
MS Windows Vista IE7
MS Windows 7 IE8
MS Windows 7 IE9
32

43. Универсальные комбайны
IETester
Multiply IE
IECollection
Adobe BrowserLab
33

44. Виртуализация приложений
Wine
VMWare
ThinApp
34

45. Виртуализация приложений
Wine
VMWare
ThinApp
Novell ZENWorks Application Virtualisation
34

46. Выбор платформы для
виртуализации ОС
35

47. Выбор платформы для
виртуализации ОС
35

48. Выбор платформы для
виртуализации ОС
35

49. Выбор платформы для
виртуализации ОС
35

50. 2048 Mб памяти
15 Гб на диске
36

51. MS Windows Volume Licence
7 Pro 32-bit
ZENworks Application
Virtualization User License +
1-Year Standard Maintenance
37

52. IE9
IE8
IE7
IE6
+ Developer ToolBar
38

53. releases.mozilla.org/pub/
mozilla.org/firefox/releases/
firefox.exe -p FF3016
FireFox/3016/
+ FireBug
39

54. ftp.opera.com/pub/
Opera/11.01/opera.exe
+ DragonFly
40

55. google.com/chrome
oldapps.com
portableapps.com
+ Web Inspector
41

56. www.andlinux.org
42

59. Оптимизация

60. 46

61. 47

62. 48

63. Каждый день консоль!
ssh, tcpdump, find, sed, awk, svn/
git/hg, ack, shell script, make,
node, npm...
49

64. UglifyJS
github.com/mishoo/UglifyJS
50

65. как работает uglifyjs
> uglifyjs -o blockA.js blockB.js js/script.js
51

66. reset.css
body { ... }
ol, ul { ... }
table { ... }
52

67. layout.css
.wrapper { ... }
.column-left { ... }
.column-right { ... }
53

68. style.css
.header { ... }
.content { ... }
.footer { ... }
54

69. подключение стилей
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="style.css">
55

70. style.css
@import "reset.css";
@import "layout.css";
.header { ... }
.content { ... }
.footer { ... }
56

71. borschik
github.com/veged/borschik
57

72. как работает borschik
> borschik -t css -i style.css -o main.css
58

73. main.css
body { ... } .column-right { ... }
ol, ul { ... } .header { ... }
table { ... } .content { ... }
.wrapper { ... } .footer { ... }
.column-left { ... }
59

74. style.css
.block
{
margin: 20px;
color: #f00;
margin-bottom: 25px;
font-size: 0.6em;
}
60

75. csso
github.com/css/csso
61

76. style.css
.block
{
margin: 20px;
color: #f00;
margin-bottom: 25px;
font-size: 0.6em;
}
62

77. как работает csso
> csso -i style.css -o main.css
63

78. main.css
.block{color:red;margin:20px 20px
25px;font-size:.6em}
64

79. как работает csso
margin: 20px;
margin-bottom: 25px;
margin: 20px 20px 25px;
65

80. как работает csso
color: #f00;
color: red;
66

81. папка с картинками
images/
logo.png
css/
style.css
67

82. style.css
.logo
{
background:
url(/images/logo.png);
}
68

83. перенос картинок
images/
static/img/
69

84. cssrb
github.com/afelix/cssrb
70

85. .cssrb.js
exports.config = {
fromBase: '/Users/user/site/images/',
toBase: '/Users/user/site/static/img/',
patterns: {
'^/?images': '/static/img/'
}
}
71

86. как работает cssrb
> cssrb -c .cssrb.js style.css main.css -mv
72

87. style.css
.logo
{
background:
url(/static/img/logo.png);
}
73

88. оптимизация картинок
imagemagick advpng
pngout jpegtran
optipng gifsicle
pngrewrite pngnq
exiftool defluff
74

89. imgo
github.com/imgo/imgo
75

90. как работает imgo
> imgo images/
76

91. как работает imgo
Result:
Processed: 13 files of 13, total size 1520795 bytes
Profit: 146579 bytes (9%)
Total time: 00:00:51 (HH:MM:SS)
77

92. Дальнейшая поддержка кода

93. BEM
bem.github.com/bem-method/
clubs.ya.ru/bem/
79

94. BEM-Tools
80

95. BEM-Tools
github.com/bem/bem-tools
80

96. BEM-Tools
github.com/bem/bem-tools
> bem server
80

97. Вопросы?
Николай Птущук Евгений Батовский
mcslayer@yandex-team.ru uncleb@yandex-team.ru
mcslayer batovsky