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