Блог для начинающих веб разработчиков. HTML, СSS, Jquery, Drupal и другое.

Что такое CSS Flexbox. Основные понятия.

Привет всем на HeavenWeb! Cегодня поговорим о том, что такое CSS технология Flexbox. Если сказать коротко, применение модели Flexbox позволяет верстальщику более гибко управлять положением блоков на веб-странице с помощью CSS. В статье мы разберём основы, что нового вносит модель расположения элементов Flexbox, и как ими пользоваться.

До выхода браузеров с поддержкой Flexbox, макеты веб-страниц строились сначала при помощи таблиц (не совсем предназначенных для этого), а затем (как и чаще всего в настоящее время) при помощи, так называемой блочной вёрстки, когда блоки прижимались к разным сторонам окна браузера при помощи свойств float:left или float:right. Однако этот способ тоже имеет недостатки и не обладает большой гибкостью. Требуется создавать специальные очистители потока (clearfix), чтобы одни блоки не наезжали на другие, и.т.д.

Новая спецификация CSS позволяет решить большинство проблем вёрстки адаптивных, и десктопных макетов при помощи управляемого поведения блоков в контейнере-родителе.

Адаптивная вёрстка. Пример вёрстки макета.

Приветствую всех читателей блога HeavenWeb. Сегодня в блоге я приведу пример так называемой адаптивной вёрстки, а также, в качестве примера я покажу как сверстать простой макет с учётом адаптивности под разные разрешения экрана.

Если говорить простыми словами, под адаптивной или «отзывчивой» вёрсткой понимают такое расположение блоков и элементов, которое подстраивается под размер и разрешение экрана устройства, при помощи которого страница открыта.

С ростом популярности планшетных пк и смартфонов, от веб мастеров требуется поддержка новых форматов отображения сайтов, и соответственно новых разрешений экранов, в которых эти сайты открываются.

ДемоСкачать

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

Четыре совета для приятной работы с кодом.

В этой статье я описываю несколько инструментов которые сильно помогают мне в работе с html-кодом и не только. Этими вещами я пользуюсь сам, и поэтому советую их вам.

Каким шрифтом удобнее пользоваться при программировании?, как упростить монотонную работу верстальщика по созданию html разметки и как быстро найти ошибки в уже свёрстанной странице?: обо всём этом читайте далее!

Ко всем программам и плагинам даю ссылки. Советов получилось всего четыре, а какие бы инструменты вы добавили? Поделитесь в комментариях!

«Хлебные крошки» - Breadcrumbs в Drupal 7.

В этой небольшой статье мы рассмотрим, как настроить навигационную цепочку типа breadcrumbs или «хлебные крошки» в Drupal 7.

Такая навигация может быть очень полезна для посетителей, на разветвлённом сайте, с многоуровневой структурой. Выглядят «хлебные крошки» обычно как набор ссылок расположенных в одну строку. Первая ссылка ведёт на главную страницу, а остальные выстроены в виде пути до текущей страницы. Я покажу как использовать два модуля - Taxonomy breadcrumb и Custom breadcrumbs, для создания навигационной цепочки на основе таксономии, и на основе любых других свойств материала.

SEO Оптимизация сайта на Drupal 7. Всё что нужно.

Приветствую всех читателей и подписчиков heavenweb.ru. В этой статье я хочу рассказать немного об оптимизации сайта, управляемого системой Drupal. Мы поговорим о необходимых, на мой взгляд, модулях для этой CMS, разберём важные настройки, касающиеся SEO, и оптимизируем сайт для наибольшего удобства, как пользователей, так и поисковых систем.

Хотел бы отметить, что меня нельзя назвать SEO профи со стажем, однако все доводы в этой статье общеизвестны, кроме того оба моих сайта на Drupal (не включая этот блог), созданные и настроенные согласно советам ниже, успешно проиндексированы как Яндексом, так и Googl’ом, без каких-либо ошибок и дублей страниц в выдаче.

С точки зрения SEO, в Друпале всё выстроено довольно грамотно. В базовом пакете установки уже есть поддержка ЧПУ, тегов, и настроен файл robots.txt. Однако, всё равно для успешного продвижения такого сайта в ПС, необходима ещё большая гибкость настроек, а значит не обойтись без сторонних модулей. 

Страницы