Cовременный станок верстальщика
0 likes620 views
Документ описывает современный подход к верстке и оптимизации веб-страниц с акцентом на анализ пользователей различных браузеров. Он содержит информацию о виртуализации, инструментах для тестирования и методах оптимизации кода, таких как UglifyJS и CSSO. Авторы подчеркивают важность разработки, ориентированной на пользователя, и необходимость в тестировании адаптивности и кроссбраузерности страниц.
Cовременный станок верстальщика
- 1. Современный станок верстальщика Николай Птущук Евгений Батовский Я.Субботник, Киев, 5 мая 2012 года
- 2. 2
- 3. 3
- 4. 4
- 5. 5
- 7. Наш современный станок — Аналитика пользователей 6
- 8. Наш современный станок — Аналитика пользователей — Зоопарк браузеров 6
- 9. Наш современный станок — Аналитика пользователей — Зоопарк браузеров — Оптимизация 6
- 10. Наш современный станок — Аналитика пользователей — Зоопарк браузеров — Оптимизация — Сопровождение 6
- 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
- 17. Graceful degradation — Доступные контент и функциональность 12
- 18. Graceful degradation — Доступные контент и функциональность — Браузерозависимые стили 12
- 19. 13
- 21. БРАУЗЕРЫ 15 Ну почему вас так много?
- 23. Как проверяем верстку 1 верстальщик = 7 компьютеров 16
- 24. Как проверяем верстку 1 верстальщик = 7 компьютеров 30 верстальщиков = 210 компьютеров 16
- 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
- 59. Оптимизация
- 60. 46
- 61. 47
- 62. 48
- 63. Каждый день консоль! ssh, tcpdump, find, sed, awk, svn/ git/hg, ack, shell script, make, node, npm... 49
- 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
- 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
- 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
- 94. 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