Новый видеокурс по созданию адаптивного одностраничного сайта и посадке на CMS WordPress. В процессе обучение рассмотрены такие моменты, как проектирование интерфейса, создание скетча, адаптивная верстка и подключение Front-End плагинов, посадка на WordPress и создание опций шаблона. При разработке темплейта учитывалась возможность дистрибуции и распространения темы.
Читать полностью »
Я хотел написать комментарий к статье о том куда отправляются хорошие верстальщики, но мне стало лень. А потом опять стало не лень, но мыслей накопилось уже на целый пост.
Возьмем самый первый попавшийся пример из приведенной статьи. Там в макете, в самом верху, есть полоска на всю ширину окна:
И автор принимает решение сверстать эту полоску с помощью тега <hr>, вот так:
<body class="whitesquare">
<hr/>
<!-- вся остальная страница -->
</body>
.whitesquare hr {
/* стили для полоски */
}
Это просто супер пример несоблюдения моего правила.
Я веб-разработчик с опытом работы 2 года, работаю в firefox с firebug. Верстаю по технике Pixel-perfect. Почему?
Раньше я размещал изображение Html кодом. Но как неудобно выделять элемент в firebug-е если поверх всего лежит изображение. Приходилось каждый раз лезть в стили и прятать картинку. Pixel-perfect plugin для firefox почему-то не работал.
Тогда появилась идея создать скрипт, который будет прятать по short-cut(hotkey)-ю изображение. И пока создавал скрипт появлялись новые идеи для модернизации удобства использования. В итоге получился: Pixp
После создания я смог его протестировать только на одном живом проекте, так что возможны баги, ну и так как это мой первый публичный проект для всех, прошу строго не судить. Однако прошло уже не мало времени как я ушел в back end, а мои друзья верстальщики продолжают работать используя данный скрипт.
Лично для меня процесс верстки стал гораздо удобнее. И доказывать клиенту что этот элемент расположен правильно, теперь не составляет труда. Так как ваш клиент также может использовать скрипт, не устанавливая доп. ПО.
Читать полностью »
Каким должен быть инструмент, чтобы в нем было удобно создавать и редактировать CSS спрайты? У каждого будет свой ответ на этот вопрос, а я всего лишь поделюсь своими соображениями и продемонстрирую свой генератор спрайтов.
По большей части моя работа со спрайтами сводилась к следующему:
Читать полностью »
Эта ошибка крошечная и незаметная, но все же, это ошибка. Она присутствует на чудовищном количестве сайтов, в т.ч. на Хабрахабре.
Проблема возникает с фоновыми изображениями у элементов, которые тянутся на всю ширину окна браузера. Например, подвал Хабрахабра. Если уменьшить окно браузера до появления горизонтальной прокрутки и крутить вправо, то фон может просто обрубиться.
20-летнему юбилею тега IMG посвящается
25 февраля 1993 года Марк Андрессен (Marc Andreessen) написал:
Предлагаю новый опциональный HTML-тег: IMG
При нем должен обязательно указываться аргумент SRC=«url».
Тег отсылает к файлу растрового изображения (bitmap или pixmap). Браузер будет запрашивать этот файл в Сети, распознавать как изображение и вставлять в текст сообразно месту тега в коде страницы .
Допустим, вы нарисовали в Corel Draw! логотип компании и собираетесь разместить его на сайте не как-нибудь, а формате HTML5. И, соответственно, размещать картинку не в растровом формате, а в .SVG
Что это дает, понятно – при любом масштабировании на планшете или любом другом гаджете мы имеем идеально точно отрисованную картинку, насколько детализированной она бы ни была.
Читать полностью »
Четверг, время задавать вопросы и делиться опытом. Хотя этим можно заниматься и в другие дни, но т.к. сегодня четверг — будем делиться в четверг!
Под катом — 3 опроса насчет процесса верстки в вашей компании.
Читать полностью »
Пожалуй, многие веб-дизайнеры (особенно, занимающиеся исключительно дизайн-макетами сайтов, вне вёрстки и программирования) сталкивались с тем, что их сданная и одобренная работа, проходя известные стадии, претерпевала различные изменения и искажения. Хорошо, если разработка происходит в слаженном коллективе, где веб-дизайнеры тесно сотрудничают с верстальщиками и программистами. При таком положении звёзд, велика вероятность, что все углы будут подточены и достигнуты наилучшие результаты. Однако, при тенденциях отдельного найма фрилансеров, по большинству, сотрудничества не возникает.
.png "Веб дизайнер vs верстальщик. Разделение труда, или когда нужен менеджер проекта (из истории одного стартапа)")
Статья может представлять определённый интерес для заказчиков веб-услуг (владельцев сайтов / бизнесменов, желающих открыть собственный стартап). Материал также может послужить полем для обсуждения всеми сторонами вопроса — веб-дизайнерами, проектными менеджерами, верстальщиками, владельцами сайтов. В статье рассказывается о процессе проектирования и разработки веб-дизайна (с логическими схемами) стартапа, о наблюдении за реализацией и последующей «жизнью» проекта и об итоговом его закрытии. Не наделённая достаточной информацией по объективным причинам закрытия данного стартапа, я постараюсь избежать домыслов, пересудов и необоснованных выводов. Цель моего рассказа — отразить взгляд со стороны веб-дизайнера на реализацию его дизайна на сайте. Статья содержит практические советы по контролю качества вёрстки.
Читать полностью »
Не многие разработчики наполняют сайт реальными, или похожими на них, данными. В большинстве случаев все заканчивается созданием категорий Тест1, Тест2… и товаров Товар1, Товар2… Естественно, это не может отразить/показать настоящее поведение сайта/шаблона. Если с товаром еще не всегда все плохо, то с категориями почти всегда что-то не в порядке. Читать полностью »