<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Что такое адаптивная верстка?

Что такое адаптивная верстка?

Всем привет! Думаю, что многие из вас слышали о такой вещи как "Адаптивная верстка" или "Responsive makeup"(отзывчивая верстка). Сегодня я немного введу вас в курс дела, а в следующих статьях мы будем углубляться в эту тему.

Итак, что подразумевает под собой слово "отзывчивая"? Отзывчивая верстка - это верстка, которая автоматически подстраивается(адаптируется) под то разрешение устройства, на котором в данный момент просматривает страницу пользователь. К примеру, если вы смотрите страницу на большом экране или даже телевизоре, то у вас будет одно отображение сайта, а если вы просматриваете ту же страницу на, к примеру, мобильном устройстве, то у вас будет уже совсем другой вид данной страницы.

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

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

Узнать все это лучше в видео формате и для этого есть курc HTML5 и CSS3 с Нуля до Гуру, но, если вы предпочитаете читать, а не смотреть, то подписывайтесь на обновления, чтобы не пропустить новый выпуск по данной, очень интересной теме.

Итак, начнем.

Для начала нам нужно узнать, что же входит в понятие "адаптивная верстка"? А в данное понятие входит следующее:

  • Гибкие шрифты
  • Гибкий макет на основе сетки
  • Гибкие изображения
  • Медиазапросы

Теперь поговорим поподробнее обо все этом.

Гибкие шрифты - это шрифты, которые заданы не жестко в px(пикселях), а в em, величине, которая может меняться.

Посмотрим на простой пример

body {
  font-size: 16px;
}

h1 {
  font-size: 1.5em;
}

Что мы здесь указали? Я не просто так написал для тега body размер 16px, ведь это именно тот размер шрифта, который принят по умолчанию в браузерах. Теперь нам нужно, опираясь на данное значение, указать размер шрифта в 24px для заголовка h1. Как это сделать? А очень просто! Для этого есть формула

цель / контекст = результат

Запомните эту формулу, она нам еще пригодится.

Нам нужно получить размер шрифта 24px, верно? - это будет наша цель.

У нас шрифт установлен по умолчанию - 16px - это контекст.

Считаем: 24 / 16 = 1.5

Т.е. размер для h1 будет 1.5em.

Итак, с этим разобрались.

Едем дальше и поговорим о гибкой сетке.

Как понятно из названия, гибкая сетка - сетка, которая может изменяться. Для чего это нужно? К примеру, на большом мониторе мы можем показать пользователю 3 колонки, но ведь на мобильном устройстве ему будет неудобно смотреть 3 колонки! Если человек зашел с телефона, то надо оставить одну колонку и всего этого добиться нам помогут гибкие сетки. О них мы будем подробно говорить в отдельной статье. Сейчас я могу сказать лишь то, что там вместо px мы будем использовать %.

Гибкие изображения - очень важная и на самом деле нетрудная тема.

Гибкие изображения - это изображения, которые не статично стоят в каком-то блоке, а меняют свой размер в зависимости от разрешения экрана пользователя и ширины колонки. Это очень просто реализовать, однако там есть много подводных камней, связанных с браузером Internet Explorer, но мы поговорим и о них тоже.

И последнее - медиазапросы.

Медиазапросы - это условия, которые либо выполняются, либо не выполняются.

К примеру, мы можем задать ширину колонки 500px, но, если ширина области просмотра пользователя меньше 300px, то ширину колонки нужно установить в 100px.

Такие и более сложные условия делаются с помощью медиазапросов и это тоже очень интересная тема, которая будет очень подробно раскрыта в соотвествующей статье.

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

Спасибо за внимание и не пропустите следующую статью!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

Lola000 Lola000 09.11.2017 11:33:56

Хорошая статья позволяет разобраться что- к чему. Давно интересна тема-"адаптивный дизайн сайта", так как это позволяет большей раскрутки ресурса. Соответственно, и способствует увеличению прибыли, к чему стремимся мы все. Особо раньше не вникала в эту тему, пока друг не посоветовал адаптировать сайт для мобильных устройств( ну что греха таить, он в этой сфере как рыба в воде, шарит во много раз лучше меня). Проанализировав ситуацию, решила попробовать, проделать такую работу сама не смогла, не люблю браться за дело в котором ничего не понимаю. Проконсультировалась у знакомых, где можно заказать эту услугу, посоветовали http://www.mobile-version.ru/. Я так и сделала. Полностью следовала инструкции для осуществления выполнения заказа. ну, что сказать результат меня очень порадовал. Мне не пришлось создавать отдельную мобильную версию сайта, что гораздо затратнее. А результат Эффективный, адаптивный дизайн максимально помогает сайту в продвижении, к чему я собственно говоря и стремилась. причем сайт полностью соответствуют всем стандартам и рекомендациям в поисковых системах. Не пойму, почему я раньше этого не сделала, ведь давно ломаю голову, как увеличить прибыль! Сейчас же, количество продаж возросло в разы!

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.