Решил осваивать вёрстку / кодинг с нуля. Конечно с HTML и CSS я достаточно знаком, всегда мог подправить какие-то мелочи, внести небольшие изменения ну естественно как дизайнер имел полное представление о процессе вёрстки. Но на этом и всё заканчивалось. Сесть и начать писать код, именно писать, а не редактировать для меня было не под силу, да и сейчас я только учусь.
В данной статье рассматривается ситуация, когда элемент, создающий новый блочный контекст форматирования, имеет потомков, имеющих значение свойства float отличное от none. В большинстве статей на данную тему поведение элементов в подобных случаях предлагается принять на веру, поэтому в данной статье акцент делается на обосновании интерпретации браузерами положений спецификации W3C.
Читать полностью »
Это заметка о подходе к реализации автоматизации механизма psd to html.Читать полностью »
Коридор (river) — совпадение пробелов по вертикали или наклонной линии в трёх и более смежных строках, считается одним из дефектов вёрстки. Дефект устраняется довольно легко, но сложность заключается в его автоматическом обнаружении.
Коридор появляется не только от специфичного расположения пробелов, но и от формы глифов. Например, в двух текстах пробелы расположены в одинаковых местах. В первом хорошо заметны два коридора, а во втором дефекта нет.
Четверг, время задавать вопросы и делиться опытом. Хотя этим можно заниматься и в другие дни, но т.к. сегодня четверг — будем делиться в четверг!
Под катом — 3 опроса насчет процесса верстки в вашей компании.
Читать полностью »
Добрый день!
Рискну опубликовать недавно сформировавшуюся идею относительно верстки современных сайтов, в т.ч. в так называемом «плиточном» стиле. Но прежде чем излагать мысли хочу привести два «предупреждения»:
Наблюдая за тенденциями в дизайне сайтов, которые в плане интерфейса все ближе к приложениям, а также сталкиваясь с проблемами в верстке подобных проектов, захотелось придумать подход упрощающий верстку необычных сайтов (которые постепенно становятся вполне обычными).
При обычной верстке html – задает структуру контента, а css – управляет и позиционированием и визуальным представлением документа. Эта двойственность css приводит к раздутым файлам стилей, внутри которых бывает сложно ориентироваться. Одни и те же свойства управляют и положением и внешним видом элементов – это вносит путаницу и затрудняет отладку.
На мой взгляд, и думаю, эта мысль не нова, позиционированием блоков мог бы заняться JavaScript, это позволит создавать динамические структуры легко адаптирующиеся к разным разрешениям на разных устройствах, но описывать структуру документа на чистом JavaScript – мягко говоря, неудобно. В идеале хотелось бы создать некий «мини-язык» упрощающий возможности разметки документа для человека не являющегося специалистом в JavaScript. В таком «мини-языке» можно было бы максимально просто сформулировать правила адаптации макета к любому разрешению экрана. А JavaScript обеспечил бы выполнение этих правил. Дальнейший код и картинки как раз и показывают, как это могло бы выглядеть.
Читать полностью »
Представляем вашему вниманию одну из самых ярких (во всех смыслах, поскольку книга эта полноцветная) новинок нашего издательства, вышедших в январе 2013 года — книгу американских дизайнеров Кима Голомбински и Ребекки Хаген, посвященную концепции т.н. визкома (визуальной коммуникации).
Название: Добавь воздуха! Основы визуального дизайна для графики, веба и мультимедиа (англ.: White Space is Not Your Enemy: A Beginner's Guide to Communicating Visually through Graphic, Web and Multimedia Design)
Авторы: Ким Голомбински, Ребекка Хаген
Дата выхода: январь 2013 года
Читать полностью »
Гуру верстки вряд ли найдут в этом посте что-то новое для себя. Этот пост скорее для начинающих верстальщиков у которых, как и у меня, были проблемы с созданием и стилизацией универсальных всплывающих подсказок.
Недавно, когда я делал небольшой блог, передо мной встала задача сделать стильные, но одновременно простые всплывающие подсказки. Попробовав разные способы создания отдельных div-контейнеров для подсказок, или создание всплывающих подсказок на чистом CSS, я нашел универсальное решение которое не будет загромождать код, будет кросбраузерним, и в то же время будет очень простым для реализации.
Всех кого заинтересовал мой способ решения этой простой задачи прошу под кат.
Рассмотрим задачу парсинга HTML на клиенте (Javascript) с последующим оформлением полученных данных стилями и вёрсткой и выводом их в нужные места страницы просмотра. Применение такой подгрузчик страниц и блоков нашёл в юзерскриптах — когда разработчики подгрузчика никак не связаны с разработчиками сайта. Но есть основания использовать подход и для обычных сайтов для полного отделения View от Model.
Статья получилась теоретической, потому что из-за её объёма я не стал перегружать её практическими результатами. Да и трудно пока представить некие шаги, по которым каждый мог бы подхватить идеи и начать строить подобное. Вначале надо посеять идеи, но пока попытки посева (здесь, на Хабре) не давали всходов, хотя я и не особо старался в этом направлении. Подход развивался последние полгода и был даже анонсирован на Хабре примерно в апреле-мае. В статье рассказано, «как это сделать», и перечислены преимущества подхода. Он требует глубокого и специфического программирования на JS. По результатам работы, скорее всего, имеет смысл выделить библиотеку для аналогичных задач.
Читать полностью »
Я бы хотел, чтобы статья была интересна, а главное, понятна всем, кто занимается версткой. Однако, моя проблема заключается в том, что она лежит на рубеже знаний серверных и клиентских разработчиков. И если первые хоть изредка, но верстают, то вторые, как правило, «на сервер» не заглядывают вообще — в кавычках, потому-что речь не о железе или ОС — нам понадобится кое-какой серверный софт. В общем, я постараюсь подойти к сути вопроса постепенно, чтобы не повторить комикс с рисованием совы. Особо нетерпеливым я просто скажу здесь: я верстаю с помощью Flask. Тех же, кого интересуют детали — прошу под кат.
Читать полностью »
