Рубрика «верстка» - 10

Где обычно вы верстаете страницы сайта для последующей интеграции с rails приложением? В отдельном репозитории с html файлами или сразу в rails — в каком-нибудь специально отведенном месте? Тестируете ли верстку длинными словами и текстами? Проверяете ли различные варианты отображения элементов верстки с помощью длинного текста? Попробую кратко осветить эти вопросы, рассказав о геме rails_ui_kit — небольшом инструменте для организации верстки в rails приложениях и о том, как его приходилось использовать при разработке реальных production-приложений.
Читать полностью »

Что такое хорошо: как мы разрабатывали критерии для оценки качества вёрстки веб-проектов - 1

На Хабре уже было немало материалов о том, как проводить качество вёрстки веб-проектов (вот отличная статья на эту тему) — как правило, речь в таких топиках идёт о коммерческих сайтах. В ходе развития образовательного проекта HTML Academy мы также столкнулись с необходимостью выработки критериев для оценки работ учеников.

Очевидно, что учить нужно так, чтобы потом люди (не все из которых «технари») могли приходить в компании и работать «правильно» — то есть создавая вёрстку, которая красиво выглядит и не требует больших усилий по поддержке. Процесс создания списка универсальных критериев для оценки занял довольно длительное время и был сопряжён с рядом трудностей. Сегодня мы расскажем о том, что же у нас в итоге получилось.Читать полностью »

image

Мы в HTML Academy постоянно работаем над повышением эффективности наших образовательных программ и курсов (ради этого мы ставим опыты на студентах и внедряем геймификацию).

Подобные изыскания привели нас к пониманию того, что для подготовки профессионала, который мог бы работать в области веб-технологий (хотя бы на позиции начального уровня) недостаточно одних курсов, состоящих из видеолекций и последующих заданий. Освоить весь объём контента, необходимого для выхода на определённый уровень знаний, в подобном режиме просто невозможно.

Именно поэтому мы решили создать курс, прохождение которого позволяло бы людям не просто получить базовые знания вёрстки, но стать настоящим (пусть и начинающим) ИТ-специалистом. В сегодняшнем материале мы расскажем о том, что в итоге из всего этого получилось.Читать полностью »

image

Раньше термин «компьютерная грамотность» по своей сути означал умение работать с офисным пакетом, но жизнь не стоит на месте, и теперь всё больше экспертов (и даже звезда НБА Крис Бош) заявляют о том, что крайне важным навыком для широкого круга людей становится умение программировать.

При этом программирование — огромная область знаний, только небольшая часть которой может действительно пригодиться обычному человеку (то есть «не-технарю»). Мы считаем, что основу «новой компьютерной грамотности» должно составить знание вёрстки. В сегодняшнем топике мы рассмотрим примеры того, как изучение веб-технологий может помочь представителям не-технических профессий.Читать полностью »

голые пятницы

Здравствуй, дорогой читатель хабра!
Сегодня мы поговорим о «липких» блоках, новом свойстве для изображений object-fit, продвинутом использовании CSS-счетчиков, ключевом слове currentColor, и о том, есть ли анимация в z-index.
Читать полностью »

Пришла мне тут как-то мысль освоить PHP, а, как известно, лучший способ изучить язык – это создать на нем велосипед фреймворк. При ковырянии в различных форумах и топиках заинтересовала меня одна методология, которую пропагандируют в уважаемой компании «Яндекс» — БЭМ. Кто ещё не в курсе этой методологии, почитайте на официальной страничке. Так же на Хабре есть публикация «Верстка для самых маленьких. Верстаем страницу по БЭМу» от читателя xnim, в котором все объяснятся на конкретном примере. «Яндекс» написали свои модули и скрипты сборки проектов, однако выполнены они все на Node.js, а вот на PHP обнаружить что-то подобное мне не удалось (хотя, признаюсь честно, я особо и не искал). К тому же, PHP, как объектно-ориентированный язык, дает интересные возможности.

BemPHP: реализация методологии БЭМ средствами PHP - 1
Читать полностью »

Предлагаю читателям «Хабрахабра» перевод статьи Брэда Фроста (Brad Frost) «Atomic Web Design».

Атомарный веб-дизайн - 1

Мы не проектируем страницы, мы проектируем системы компонент. — Stephen Hay

По мере того, как ремесло веб-дизайна продолжает развиваться, мы всe больше ощущаем нужду в продуманной, системной разработке, в отличие от создания простых наборов веб страничек.

Многое было сказано насчeт создания систем дизайна, и наибольший акцент делается, в основном, на установление цветов, типографии, сеток, текстур и т.п. Такой тип мышления, несомненно, важен, но я чуть меньше заинтересован в этих аспектах дизайна, потому что, по большому счeту, они всегда субъективны. В последнее время меня больше озадачил вопрос о том, из чего состоят наши интерфейсы, и как мы можем проектировать их более систематично.
Читать полностью »

Существуют разные подходы для организации sass-архитектуры, какую бы вы не выбрали, главное, чтобы она была.

Я отношусь к организации sass, как к инструменту, в первую очередь, он не должен мешать и тормозить ход мыслей. Поэтому начиная проект, я не знаю какой получится архитектура, она устаканивается по ходу работы и принимает форму подходящую для требований проекта.

Bem, Smacss, Oocss, Organic-css должны давать вам гибкость мысли, чтобы построить свой проект.
Читать полностью »

Одиннадцатиклассница, или тестируем баги вёрстки - 1

В современном вебе несправедливо мало внимания уделяется хоть сколько-нибудь автоматизированному тестированию UI. Особенно это касается статической вёрстки. На проекте 2ГИС Онлайн мы попытались частично восполнить этот пробел. Какие полезные практики мы приобрели, и о каких хороших библиотеках мы узнали, расскажем далее.
Читать полностью »

При верстке макета всегда всплывает множество интересных и потенциально проблемных моментов, которые казались дизайнеру элементарными, но на самом деле таили за собой опасное. Все это можно было бы предотвратить, если бы клиент не строил из себя архитектора всей системы, а дизайнер относился к сайтам не как к журналу, а как к сайтам, продумывая взаимодействие с пользователем, создавая грамотную архитектуру, которая логически непротиворечива и действительно дружелюбна к пользователю. Нужен кто-то, кто обладает определенной IT-культурой, в то же время является и дизайнером, и верстальщиком, и немного программистом, даже архитектором БД. Наверное, это тот, которого все называют UI/UX-дизайнером. Такого человека сложно найти, стоит он дорого и путь к такому званию долгий. Поэтому в типичном случае все происходит проще и вместо инженерного подхода наблюдается некоторая разновидность подхода эволюционного. К сожалению, этого бывает достаточно, это даже можно поддерживать, но только если вы не перфекционист.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js