Типовые макеты

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

Задание для мини-конкурса Canvas

На форуме стартовал мини-конкурс посвящённый HTML5 Canvas, задание можно посмотреть в этой теме.

HTML4 на практике

На сайте появился новый тест HTML4 на практике, вопросы которого направлены на проверку практических знаний и навыков по HTML4.

Мини-конкурс Canvas

С 4 по 9 августа 2011 года на форуме пройдёт небольшой конкурс по HTML5 Canvas. Конкурс рассчитан на новичков, для выполнения задания необходимо владеть начальными навыками по JavaScript и API Canvas.

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

Авторазмер игр на HTML5

Летом 2010 года мы создали игру Sand Trap, которую выставили на конкурс игр HTML5 для мобильных телефонов. Но большинство мобильных телефонов отображают только часть игры или делают игру слишком маленькой, что в итоге не позволяет в неё играть. Так что мы взяли на себя ответственность сделать игру плавно регулируемой в зависимости от любого разрешения. После небольшого изменения программы и использования идей изложенных в этой статье, мы получили игру, которая масштабируется в любом современном браузере запущенном на настольном или мобильном устройстве.

Полноэкранный режим Игра в окне браузера

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

Для реализации необходимо воспользоваться как CSS, так и JavaScript. Использование CSS для заполнения всего экрана тривиально, но CSS не позволит вам поддерживать аналогичное соотношение ширины к высоте, чтобы предотвратить искажения холста и игрового поля.

Путеводитель по играм HTML5 без слёз

Итак, вы хотите сделать игру с помощью Canvas и HTML5? Следуйте этому руководству и окажетесь на пути в кратчайший срок. Руководство предполагает, что у вас, по меньшей мере, средний уровень знаний по JavaScript.

Блочная модель

Любой блочный элемент состоит из набора свойств, подобно капустным листам накладываемых друг на друга. Основой блока выступает его контент (это может быть текст, изображение и др.), ширина которого задается свойством width, а высота через height; вокруг контента идут поля (padding), они создают пустое пространство от контента до внутреннего края границ; затем идут собственно сами границы (border) и завершают блок отступы (margin), невидимое пустое пространство от внешнего края границ. Порядок влияния этих свойств на блок четко определён и не может быть нарушен. На рис. 3.1 показан блок в виде набора этих свойств.

Свойства, формирующие блочный элемент

Рис. 3.1. Свойства, формирующие блочный элемент

Блочная вёрстка

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

Первоначально слои ввела компания Netscape, включив в свой браузер поддержку тега <layer>. Этот тег позволял прятать/показывать текущее содержимое, устанавливать положение относительно окна браузера, накладывать один слой поверх других и загружать данные в содержимое слоя из файла. Все эти параметры легко менялись с помощью JavaScript и это расширяло возможности по созданию действительно динамического контента на странице. Несмотря на столь впечатляющий набор возможностей, тег <layer> не был включён в спецификацию HTML и остался лишь расширением браузера Netscape.

Медиа-запросы

Наряду с типами носителей в CSS3 включена поддержка различных технических параметров устройств, на основе которых требуется загружать те или иные стили. К примеру, можно определить смартфон с максимальным разрешением 640 пикселов и для него установить одни стилевые свойства, а для остальных устройств другие. Также можно выявить различные характеристики вроде наличия монохромного экрана, ориентации (портретная или альбомная) и др. Все характеристики легко комбинируются, поэтому допустимо задать стиль только для устройств в альбомной ориентации с заданным разрешением экрана.

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

Итоги конкурса

Подведены итоги мини-конкурса «Блоки». Приняло участие 23 человека, из них все три задачи успело выполнить 17. Все решения доступны для просмотра, что позволяет обогатить свой арсенал интересными приёмами вёрстки. Конкурсные задачи можно посмотреть в этой теме.

Поздравляю всех победителей!

Стартовал конкурс по вёрстке

Сегодня на форуме начался конкурс по вёрстке блоков, в котором вы ещё успеете принять участие. В качестве задания требуется сверстать три разных блока за три часа.

Задания для конкурса можно посмотреть в этой теме:

http://forum.htmlbook.ru/index.php?showtopic=27837

Условия проведения конкурса описаны здесь

http://forum.htmlbook.ru/index.php?showtopic=27536

Принять участие может любой желающий зарегистрированный на форуме

Разрезание и склейка изображений

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

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

Особенности восприятия сайтов

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

К особенностям восприятия сайтов можно отнести следующее:

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

Модели проектирования сайта

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

Мини-конкурс

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

Страницы