Еще в 2010 году компания Microsoft изменила свой курс от специфических веб-технологий до открытых и общедоступных. Первые плоды этого переориентирования материализовались несколько лет спустя — в Internet Explorer, операционной системе Windows, инструментальных средствах разработчика и другом программном обеспечении.

Многие вещи до сих пор продолжают меняться к лучшему:

• С выходом10 версии, Internet Explorer, наконец, превратился в быстрый, современный браузер.
• Вы можете создавать родные приложения Windows с помощью JavaScript, HTML5 и CSS — приложения выглядят очень качественно, привлекательно и имеют современный пользовательский интерфейс.
• Благодаря новым серверным возможностям, ASP.NET позволяет использовать вашу собственную разметку и HTTP службы (наконец) с удобными для веб-разработчика инструментальными средствами, такими как Razor и Web API.
• На “облачном” уровне Microsoft представляет Windows Azure, с помощью которого можно выполнять разработку приложений и хранить данные на серверах, расположенных в распределенных центрах данных.

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

Приложения Windows 8 показывают, что компания Microsoft может создать “современный интерфейс (UI)” с использованием различных технологий, среди которых находятся HTML5, JavaScript и CSS. Доступ к родному API (интерфейс программирования приложений) позволяет сделать гораздо больше, чем вы могли бы получить из браузера. (Увеличенная версия).

Захватывающее путешествие Из двух частей.

В данной статье, которая является первой частью в серии из двух публикаций, мы рассмотрим HTML5 приложения, работающих на платформе Windows 8. Во второй части мы рассмотрим связь с сервером и “облачным” уровнем. Это будет захватывающее путешествие по веб-разработкам Microsoft 2013 года, с практическими советам и фрагментами программного кода.

Если вы будете создавать программный код вместе с нами, то в конечном итоге получите приложение онлайн журнала, разработанное с помощью веб-технологий. Приложение Windows 8 будет представлять статьи, выбранные в формате JSON из основного контента, находящегося  на Windows Azure. Вам придется лично продумать оформление приложения с сенсорными возможностями, которое затем можно будет представить в Windows Store, в котором интегрированы функции поиска и возможность поделиться с другими пользователями, отображать статьи и управлять ими на основе системы управления контентом (CMS).

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

Наше приложение будет работать на любой машине с операционной системой Windows 8, в том числе на Windows RT устройствах, таких как Microsoft Surface RT. (Увеличенная версия).

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

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

С чего вы должны будете начать.

Для разработки и отладки приложения Windows Store вам обязательно нужно использовать Windows 8, в качестве родной или виртуальный машины. Для редактирования HTML, CSS и так далее, вы можете использовать ваш любимый текстовый редактор и скомпилировать приложение с помощью соответствующих команд. В моём случае будет использоваться Visual Studio 2012. Вы можете скачать для свободного пользования Visual Studio Express 2012 для Windows 8.

 Barebone приложения

Barebone (англ. «bare» — голый и «bone» — кость) — компьютер, собранный на основе «каркасной» системы, предназначенной для самостоятельной сборки пользователем и называемой баребон-основой. Прежде чем нырнуть в приложение, мы должны немного узнать о площадке. Итак, вот как выглядит программный код для barebone приложения Windows Store:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <img src="https://upload.wikimedia.org/wikipedia/commons/2/28/HelloWorld.svg" />
    </body>
</html>

Чтобы прокомпилировать этот код в приложении, Visual Studio также понадобится файл проекта и manifest файл (который содержит метаданные о вашем приложении). Тем не менее, всё, что вам действительно нужно, это документ HTML под названием “Hello World”.

Вы можете добавлять любые объекты на ваше усмотрение, главное, чтобы они работали в Internet Explorer (IE) 10 (Вы можете спокойно использовать CSS3, холсты, видео, SVG, ваши любимые библиотеки JavaScript и т.д.). Кроме того, у вас также будет возможность использовать Windows Store API из JavaScript, чтобы воспользоваться специальными возможностями Windows 8.

В нашем приложении мы также будем использовать Windows Store API. В принципе это является не обязательным шагом, но Windows Store API понадобится нам, если мы хотим использовать все возможности Windows 8.

Загрузка и запуск Magazine приложения.

Исходный код для Magazine приложения находится на GitHub. Если у вас на машине нет Git, просто скачайте ZIP файл и извлеките исходный код.

После его загрузки, запустите файл проекта под названием Composite.AppFeed.Client.Template.jsproj. Когда Visual Studio запустится нажмите клавишу F5, чтобы запустить приложение.

Основной вид приложения отображает статьи в пределах плитки, что напоминает структуру рабочего стола в Windows 8 . (Увеличенная версия).

Наше приложение имеет следующие основные особенности:

• Это приложение с простой навигацией, которое представляет собой набор групп с возможностью просмотра каждой группы.
• Нажатие на название группы позволит осуществить просмотр пунктов, входящих в её состав. Нажатие на плитку пункта покажет его содержимое.
• Существует возможность поиска, возможность делиться понравившимися материалами, есть устройство вращения, закрепления и панель приложения.
• Поддерживается автономный режим работы (отображается кэшированый ранее контент).
• Поддерживается богатый HTML контент, в том числе такие вещи, как видеоролики.
• Оно имеет современный интерфейс, который характерен для всех приложений Windows 8.

Функция поиска и возможность поделиться интересным материалом с друзьями являются частью канонического charm меню в Windows 8, которое можно вызвать проведя по правому краю экрана (или перемещением курсора мыши к одному из правых углов). Функция поиска в charm меню, как следует из названия, позволяет пользователю найти любую статью в рамках приложения. Возможность делиться понравившимися материалами с друзьями интегрируется с пользовательской почтой и учетными записями в социальных сетях, что позволяет пользователю делиться URL данной статьи.

В следующих разделах мы будем описывать настройки проекта.

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

Дерево проекта показывает файлы, которые составляют основу HTML5 приложения.

Создайте собственные настройки приложения.

Структура проекта очень проста. Папки css, images и js  содержат глобальные ресурсы для приложения, в то время как отдельные страницы (в том числе HTML, CSS и JavaScript) определены ниже, в папке pages. В корневом каталоге у нас есть файл default.html, который является отправной точкой приложения, и package.appxmanifest, который содержит мета-данные, используемые операционной системой (ОС) для представления приложения.

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

/ Package.appxmanifest

Вы можете выполнить редактирование файла package.appxmanifest. Во вкладке “Application UI” (пользовательский интерфейс) укажите название вашего приложения, язык и описание. Во вкладке “Packaging” (оформление) задайте уникальное имя пакета и имя отображения публикаций.

Также можно редактировать и другие элементы, например, внешний вид плитки вашего приложения. Изображения для плитки могут быть заменены в папке /images (смотри раздел ниже).

Manifest файл приложения позволяет вам контролировать представление приложения в ОС. (Увеличенная версия).

/images Folder

Щелкните правой кнопкой мыши на папке /image, выберите Open Folder in File Explorer, и замените логотипы с различными размерами на ваши собственные. Эти логотипы будут использоваться для создания плитки стартового экрана и заставки вашего Windows 8 приложения. Вы можете изменить фон на главной странице заменив изображение background_mini.jpg. Замена inapplogo.png позволяет настроить нижний колонтитул.

Вы можете использовать понравившиеся вам PNG и JPEG изображения в приложении и управлять представлением стартового экрана. (Увеличенная версия).

/ Css/default.css

Отвечает за набор цветов для бара приложения и фона в верхней части default.css.

/ Js/options.js

В папке options.js вы можете установить название приложения и детали, такие как URL адрес страницы “О нас”, конфиденциальность URL страницы и текст предупреждения для автономного способа просмотра.

Как минимум выполните настройку заголовка и websiteUrl. Позже, когда вы запустите свой собственный контент хост, измените dataHostUrl, но прежде сохраните его первоначальную копию.

Контроль глобальных параметров приложения осуществляется через JavaScript. (Увеличенная версия).

Если вы будете представлять ваше приложение на Windows Store, то обратите внимание на значение privacyUrl. Это URL, который загружается, когда пользователь активирует политику конфиденциальности приложения через настройки charm. Поскольку ваше приложение для выбора статей будет связываться с сервером в интернете, вы должны объяснить свою политику конфиденциальности пользователям для того, чтобы ваше приложение было одобрено Microsoft. Подробнее об этом вы сможете прочитать во второй части.

Окунёмся глубже в приложение.

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

IE 10 и Windows Store App API.

При создании вашего приложения, вы можете спокойно использовать HTML5 и CSS3 возможности IE 10, в том числе холсты и SVG (масштабируемая векторная графика). Вы также можете использовать любую библиотеку JavaScript, например, такие как AngularJS, jQuery или LESS. От вас не требуется проверка страниц в других браузерах или в старых версиях IE.

API (программный инт …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров