Download to read offline
Uploaded byOdessaFrontend
Современный станок верстальщика
Документ обсуждает современное оборудование для верстки и важность аналитики пользователей, включая воздействие различных браузеров. Он также предоставляет информацию о процессе проверки верстки, используя различные инструменты и виртуализацию. Дополнительно рассматриваются аспекты оптимизации кода и плагинов для улучшения производительности.
More Related Content
Similar to Современный станок верстальщика
![[JAM 1.2] HTML5 (Alexei Yanochkin)](https://cdn.slidesharecdn.com/ss_thumbnails/html5-110415021150-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Современный станок верстальщика
- 1. Николай Птущук Евгений Батовский Я.Субботник,Киев, 5 мая 2012 года Современный станок верстальщика
- 2.
- 3.
- 4.
- 5.
- 6.
- 7. Наш современный станок —Аналитика пользователей 6
- 8. Наш современный станок —Аналитика пользователей — Зоопарк браузеров 6
- 9. Наш современный станок —Аналитика пользователей — Зоопарк браузеров — Оптимизация 6
- 10. Наш современный станок —Аналитика пользователей — Зоопарк браузеров — Оптимизация — Сопровождение 6
- 11.
- 12.
- 13. 9 Firefox Chrome IEOpera 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% 3.6 – 4,3% 3.5 – 0,9% Итого 23 браузера > 0,5%
- 14.
- 15.
- 16.
- 17. Graceful degradation — Доступныеконтент и функциональность 12
- 18. Graceful degradation — Доступныеконтент и функциональность — Браузерозависимые стили 12
- 19.
- 20.
- 21. 15 БРАУЗЕРЫ Ну почему вастак много?
- 22.
- 23. Как проверяем верстку 1верстальщик = 7 компьютеров 16
- 24. Как проверяем верстку 1верстальщик = 7 компьютеров 30 верстальщиков = 210 компьютеров 16
- 25.
- 26. Кто они —наши пользователи? 18
- 27.
- 28.
- 29.
- 30.
- 31.
- 32. свой набор медиа плагинов,«баров» 22
- 33.
- 34.
- 35. 25 Разработчику нужно быть ближек пользователю
- 36. 26 Разработчик интерфейсов? ORLY? Установи JAWS,какой-нибудь сниффер http/ https, Fiddler к примеру, прокси сервер туда же для отладки, privoxy и OpenVPN туннель еще нужен...
- 37. 27 Разработчик интерфейсов? ORLY? — Протестироватьстраницы для печати — Проверить адаптивность страниц — Настроить браузеры «под себя»
- 38.
- 39.
- 40. Образы виртуальных машинMS VPC clck.ru/10L4i 30
- 41. MS VPC +VirtualBox = ievms clck.ru/10L6k 31
- 42. MS Windows XPIE6 MS Windows Vista IE7 MS Windows 7 IE8 MS Windows 7 IE9 32
- 43.
- 44.
- 45. 34 Wine VMWare ThinApp Novell ZENWorks ApplicationVirtualisation Виртуализация приложений
- 46.
- 47.
- 48.
- 49.
- 50. 2048 Mб памяти 15Гб на диске 36
- 51. MS Windows VolumeLicence 7 Pro 32-bit ZENworks Application Virtualization User License + 1-Year Standard Maintenance 37
- 52.
- 53. releases.mozilla.org/pub/ mozilla.org/firefox/releases/ firefox.exe -p FF3016 +FireBug FireFox/3016/ 39
- 54.
- 55.
- 56.
- 59.
- 60.
- 61.
- 62.
- 63. 49 Каждый день консоль! ssh,tcpdump, find, sed, awk, svn/ git/hg, ack, shell script, make, node, npm...
- 64.
- 65. 51 как работает uglifyjs >uglifyjs -o blockA.js blockB.js js/script.js
- 66. 52 reset.css body { ...} ol, ul { ... } table { ... }
- 67. 53 layout.css .wrapper { ...} .column-left { ... } .column-right { ... }
- 68. 54 style.css .header { ...} .content { ... } .footer { ... }
- 69. 55 подключение стилей <link rel="stylesheet"href="reset.css"> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="style.css">
- 70. 56 style.css @import "reset.css"; @import "layout.css"; .header{ ... } .content { ... } .footer { ... }
- 71.
- 72. 58 как работает borschik >borschik -t css -i style.css -o main.css
- 73. 59 main.css body { ...} ol, ul { ... } table { ... } .wrapper { ... } .column-left { ... } .column-right { ... } .header { ... } .content { ... } .footer { ... }
- 74. 60 style.css .block { margin: 20px; color: #f00; margin-bottom:25px; font-size: 0.6em; }
- 75.
- 76. 62 style.css .block { margin: 20px; color: #f00; margin-bottom:25px; font-size: 0.6em; }
- 77. 63 как работает csso >csso -i style.css -o main.css
- 78.
- 79. 65 как работает csso margin:20px; margin-bottom: 25px; margin: 20px 20px 25px;
- 80. 66 как работает csso color:#f00; color: red;
- 81.
- 82.
- 83.
- 84.
- 85. 71 .cssrb.js exports.config = { fromBase:'/Users/user/site/images/', toBase: '/Users/user/site/static/img/', patterns: { '^/?images': '/static/img/' } }
- 86. 72 как работает cssrb >cssrb -c .cssrb.js style.css main.css -mv
- 87.
- 88.
- 89.
- 90. 76 как работает imgo >imgo images/
- 91. 77 как работает imgo Result: Processed:13 files of 13, total size 1520795 bytes Profit: 146579 bytes (9%) Total time: 00:00:51 (HH:MM:SS)
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.