Мастер-класс в Киеве по вёрстке

Среди посетителей сайта и форума htmlbook.ru есть много с Украины. Для них будет интересен мастер-класс Юрия Артюха «Современный подход в вёрстке 2», который пройдёт 8 октября 2011 г. За 4-5 часов будут изучены следующие темы.

  • Айкидо работы с кодом (редакторы и ускорение работы)
  • Построение лэйаутов сайтов (виды лейаутов, сетка)
  • Верстка больших проектов (организация кода, подходы Yandex, Yahoo, Groupon, польза от этих идей для вёрстки обычных проектов, коллаборейшн, SASS, LESS, SHMESS)
  • Разработка сайтов для мобильных
  • Разработка почтовых рассылок
  • Оптимизация кода и ускорение сайтов (тайные, и не очень, техники)
  • Хаки и прочая магия для браузеров (способы фильтровать браузеры, Expression для IE)
  • Микроформаты: то немногое полезное, что о них нужно знать
  • Применение CSS3 и HTML5
  • Responsive design
  • Любимые ошибки
  • Всякая современная всячина и вопросы

Адрес проведения: г. Киев, проспект Победы 40Б, выставочный центр «Acco International». Организатор: компания SmartMe.

Зарегистрироваться и посмотреть все подробности вы можете на странице мастер-класса.

WebHiTech 2011

На сайте технологического конкурса WebHiTech открыт приём заявок, который продлится до 3 ноября 2011 г. В отличие от других подобных конкурсов здесь во главу ставится соответствие веб-стандартам и применение различных технологий. Так что если у вас сайт сделан на HTML5 и CSS3, активно используется JavaScript, то смело выдвигайте сайт на конкурс. Тем более, сделать это может любой человек, а не только непосредственный разработчик.

Задание для мини-конкурса «Дизайн формы»

На форуме начался мини-конкурс Дизайн формы, задание для него следующее.

Сделать дизайн приведённой формы (файл form.html). В процессе работы можно использовать любые изображения, менять положение элементов, редактировать поясняющий текст, а также производить манипуляции, направленные на повышение удобства формы. К примеру, такими манипуляциями можно считать замену флажков на переключатели.

Текст внутри списков, рядом с флажками и переключателями формируется программно и изменению не подлежит, остальной текст можно менять по своему усмотрению. Работа должна быть представлена в виде изображения в формате PNG-24 или PSD. Если предполагается применение вкладок или других средств, которые скрывают часть формы, тогда следует сделать несколько изображений.

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

Работы принимаются до 10:00 UTC 12 сентября (13 часов Киева, Минска, 14 Москвы, 16 Екатеринбурга, 17 Омска, 18 Красноярска, 19 Иркутска, 20 Якутска) в отдельной теме форума.

Мини-конкурс Дизайн формы

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

Работа победителя участвует в следующем конкурсе на вёрстку формы, который пройдёт с 15 по 19 сентября.

Итоги мини-конкурса Canvas

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

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

Влад Мержевич

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

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

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

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

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

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

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

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

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