суббота, 3 ноября 2012 г.

Мобильный отзывчивый веб-дизайн. Задача на начало ноября

Добрый день, дорогие и уважаемые студенты!
Как и обещал, опишу следующую задачу по курсу "Разработка мобильных приложений".
Но для начала - про материалы лекции "Responsive Web-Design": слайды и тестовый проект (который демонстрировался в начале лекции) можно скачать со SkyDrive (https://skydrive.live.com/?cid=0def92780b2a9425&id=DEF92780B2A9425%21126).

Что требуется:
Создать web-страничку (набор web-страниц), которая бы была приспособлена для удобного просмотра как на экранах мобильных устройств, планшетов, так и для широких экранов мониторов.
Тематика контента и графики может быть разной: вы можете рассказать на странице о себе и своих увлечениях либо посвятить страницу чему-нибудь экзотическому.
Например:

рассказать о культе Карго в Меланезии, либо


описать быт и нравы загадочного народа Калаши, живущего в горных районах на границе Афганистана и Пакистана, либо


сделать краткий экскурс в историю республики Науру (остров в западной части Тихого океана), либо

составить галерею с изображениями искусственных островов мира со справочной информацией, либо еще что-нибудь...
Главное - страница (набор страниц), созданная вами, должна быть концептуально целостной.
Текст (заголовки + основное содержание) должны быть читабельными как на больших экранах, так и на небольших. 
Картинки должны автоматически изменять размер в зависимости от размеров области просмотра.
Организация страницы: либо в виде скроллируемого по вертикали контента, который умещается по ширине в области просмотра браузера, либо разбиение на экраны (по страницам, панорамное разбиение, параллакс-разбиение).
Для галерей можно оставить горизонтальный скроллинг (желательно сделать поддержку touch-moving).
Ccылки на сайте должны быть приспособлены для прикосновений пальцами (т.е. недопустимо слишком близкое расположение ссылок). 

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

Полезные ссылки на языки и технологии (в дополнение к тем, которые были на лекции):

http://www.w3schools.com/ - HTML5, CSS3, Javascript, JQuery



http://habrahabr.ru/post/156625/ , http://msdn.microsoft.com/ru-ru/hh680827- Metro Design Language от Microsoft (удобен для touch-устройств).