Евгений Батовский, Николай Птущук "Современный...

Николай ПтущукЕвгений Батовский

Я.Субботник, Киев, 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 VPC

clck.ru/10L4i

30

MS VPC + VirtualBox = ievms

clck.ru/10L6k

31

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

www.andlinux.org

42

Оптимизация

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;

}

61

csso

github.com/css/csso

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/

70

cssrb

github.com/afelix/cssrb

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

75

imgo

github.com/imgo/imgo

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@yandex-team.ru

mcslayer

Евгений Батовский

uncleb@yandex-team.ru

batovsky

Вопросы?

Николай Птущук