Download - Cовременный станок верстальщика
![Page 1: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/1.jpg)
Николай ПтущукЕвгений Батовский
Я.Субботник, Киев, 5 мая 2012 года
Современный станок верстальщика
![Page 2: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/2.jpg)
2
![Page 3: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/3.jpg)
3
![Page 4: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/4.jpg)
4
![Page 5: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/5.jpg)
5
![Page 6: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/6.jpg)
Наш современный станок
6
![Page 7: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/7.jpg)
Наш современный станок
— Аналитика пользователей
6
![Page 8: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/8.jpg)
Наш современный станок
— Аналитика пользователей
— Зоопарк браузеров
6
![Page 9: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/9.jpg)
Наш современный станок
— Аналитика пользователей
— Зоопарк браузеров
— Оптимизация
6
![Page 10: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/10.jpg)
Наш современный станок
— Аналитика пользователей
— Зоопарк браузеров
— Оптимизация
— Сопровождение
6
![Page 11: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/11.jpg)
Аналитика пользователей
![Page 12: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/12.jpg)
Firefox
Opera
Chrome
IE
Safari
20%
27%
30%
16%1%
8
![Page 13: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/13.jpg)
9
Firefox Chrome IE Opera Safari12 – 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%
3.6 – 4,3%
3.5 – 0,9% Итого 23 браузера
> 0,5%
![Page 14: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/14.jpg)
10
![Page 15: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/15.jpg)
11
![Page 16: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/16.jpg)
Graceful degradation
12
![Page 17: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/17.jpg)
Graceful degradation
— Доступные контент и функциональность
12
![Page 18: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/18.jpg)
Graceful degradation
— Доступные контент и функциональность
— Браузерозависимые стили
12
![Page 19: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/19.jpg)
13
![Page 20: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/20.jpg)
Зоопарк браузеров
![Page 21: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/21.jpg)
15
БРАУЗЕРЫ
Ну почему вас так много?
![Page 22: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/22.jpg)
Как проверяем верстку
16
![Page 23: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/23.jpg)
Как проверяем верстку
1 верстальщик = 7 компьютеров
16
![Page 24: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/24.jpg)
Как проверяем верстку
1 верстальщик = 7 компьютеров
30 верстальщиков = 210 компьютеров
16
![Page 25: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/25.jpg)
17
Это почти правда
![Page 26: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/26.jpg)
Кто они — наши пользователи?
18
![Page 27: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/27.jpg)
19
![Page 28: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/28.jpg)
19
![Page 29: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/29.jpg)
19
![Page 30: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/30.jpg)
забывают обновлять браузер
20
![Page 31: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/31.jpg)
устанавливают альфа и бета версии
21
![Page 32: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/32.jpg)
свой набор медиа плагинов, «баров»
22
![Page 33: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/33.jpg)
собственные сборки браузера
23
![Page 34: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/34.jpg)
24
![Page 35: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/35.jpg)
25
Разработчику нужно быть ближе к пользователю
![Page 36: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/36.jpg)
26
Разработчик интерфейсов?ORLY?Установи JAWS, какой-нибудь сниффер http/https, Fiddler к примеру, прокси сервер туда же для отладки, privoxy и OpenVPN туннель еще нужен...
![Page 37: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/37.jpg)
27
Разработчик интерфейсов?ORLY?
— Протестировать страницы для печати
— Проверить адаптивность страниц
— Настроить браузеры «под себя»
![Page 38: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/38.jpg)
28
![Page 39: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/39.jpg)
29
![Page 42: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/42.jpg)
MS Windows XP IE6
MS Windows Vista IE7
MS Windows 7 IE8
MS Windows 7 IE9
32
![Page 43: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/43.jpg)
Универсальные комбайны
33
IETesterMultiply IEIECollectionAdobe BrowserLab
![Page 44: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/44.jpg)
34
WineVMWareThinApp
Виртуализация приложений
![Page 45: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/45.jpg)
34
WineVMWareThinApp
Novell ZENWorks Application Virtualisation
Виртуализация приложений
![Page 46: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/46.jpg)
35
Выбор платформы для виртуализации ОС
![Page 47: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/47.jpg)
35
Выбор платформы для виртуализации ОС
![Page 48: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/48.jpg)
35
Выбор платформы для виртуализации ОС
![Page 49: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/49.jpg)
35
Выбор платформы для виртуализации ОС
![Page 50: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/50.jpg)
2048 Mб памяти15 Гб на диске
36
![Page 51: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/51.jpg)
MS Windows Volume Licence 7 Pro 32-bit
ZENworks Application Virtualization User License + 1-Year Standard Maintenance
37
![Page 52: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/52.jpg)
IE9
IE8
IE7
IE6
38
+ Developer ToolBar
![Page 53: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/53.jpg)
releases.mozilla.org/pub/mozilla.org/Brefox/releases/
Brefox.exe -p FF3016
+ FireBug
FireFox/3016/
39
![Page 54: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/54.jpg)
ftp.opera.com/pub/
Opera/11.01/opera.exe
+ DragonFly
40
![Page 55: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/55.jpg)
google.com/chrome
oldapps.com
+ Web Inspector
portableapps.com
41
![Page 57: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/57.jpg)
![Page 58: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/58.jpg)
![Page 59: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/59.jpg)
Оптимизация
![Page 60: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/60.jpg)
46
![Page 61: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/61.jpg)
47
![Page 62: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/62.jpg)
48
![Page 63: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/63.jpg)
49
Каждый день консоль!
ssh, tcpdump, find, sed, awk, svn/git/hg, ack, shell script, make, node, npm...
![Page 64: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/64.jpg)
50
UglifyJS
github.com/mishoo/UglifyJS
![Page 65: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/65.jpg)
51
как работает uglifyjs
> uglifyjs -o blockA.js blockB.js js/script.js
![Page 66: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/66.jpg)
52
reset.css
body { ... }
ol, ul { ... }
table { ... }
![Page 67: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/67.jpg)
53
layout.css
.wrapper { ... }
.column-left { ... }
.column-right { ... }
![Page 68: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/68.jpg)
54
style.css
.header { ... }
.content { ... }
.footer { ... }
![Page 69: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/69.jpg)
55
подключение стилей
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="style.css">
![Page 70: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/70.jpg)
56
style.css
@import "reset.css";
@import "layout.css";
.header { ... }
.content { ... }
.footer { ... }
![Page 71: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/71.jpg)
57
borschik
github.com/veged/borschik
![Page 72: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/72.jpg)
58
как работает borschik
> borschik -t css -i style.css -o main.css
![Page 73: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/73.jpg)
59
main.css
body { ... }
ol, ul { ... }
table { ... }
.wrapper { ... }
.column-left { ... }
.column-right { ... }
.header { ... }
.content { ... }
.footer { ... }
![Page 74: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/74.jpg)
60
style.css
.block{
margin: 20px;color: #f00;margin-bottom: 25px;font-size: 0.6em;
}
![Page 76: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/76.jpg)
62
style.css
.block{
margin: 20px;color: #f00;margin-bottom: 25px;font-size: 0.6em;
}
![Page 77: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/77.jpg)
63
как работает csso
> csso -i style.css -o main.css
![Page 78: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/78.jpg)
64
main.css
.block{color:red;margin:20px 20px 25px;font-size:.6em}
![Page 79: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/79.jpg)
65
как работает csso
margin: 20px;margin-bottom: 25px;
margin: 20px 20px 25px;
![Page 80: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/80.jpg)
66
как работает csso
color: #f00;
color: red;
![Page 81: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/81.jpg)
67
папка с картинками
images/logo.png
css/style.css
![Page 82: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/82.jpg)
68
style.css
.logo{
background:url(/images/logo.png);
}
![Page 83: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/83.jpg)
69
перенос картинок
images/
static/img/
![Page 85: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/85.jpg)
71
.cssrb.js
exports.config = {fromBase: '/Users/user/site/images/',toBase: '/Users/user/site/static/img/',patterns: {
'^/?images': '/static/img/'}
}
![Page 86: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/86.jpg)
72
как работает cssrb
> cssrb -c .cssrb.js style.css main.css -mv
![Page 87: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/87.jpg)
73
style.css
.logo{
background:url(/static/img/logo.png);
}
![Page 88: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/88.jpg)
74
оптимизация картинок
imagemagickpngoutoptipngpngrewriteexiftool
advpngjpegtrangifsiclepngnqdefluff
![Page 90: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/90.jpg)
76
как работает imgo
> imgo images/
![Page 91: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/91.jpg)
77
как работает imgo
Result:
Processed: 13 Mles of 13, total size 1520795 bytes
ProMt: 146579 bytes (9%)
Total time: 00:00:51 (HH:MM:SS)
![Page 92: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/92.jpg)
Дальнейшая поддержка кода
![Page 93: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/93.jpg)
79
BEM
bem.github.com/bem-method/
clubs.ya.ru/bem/
![Page 94: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/94.jpg)
80
BEM-Tools
![Page 95: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/95.jpg)
80
BEM-Tools
github.com/bem/bem-tools
![Page 96: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/96.jpg)
80
BEM-Tools
github.com/bem/bem-tools
> bem server
![Page 97: Cовременный станок верстальщика](https://reader030.vdocuments.pub/reader030/viewer/2022032502/55b93ca3bb61ebc17d8b4609/html5/thumbnails/97.jpg)
mcslayer
Евгений Батовский
batovsky
Вопросы?
Николай Птущук