Опубликован: 26.12.2012 | Уровень: для всех | Доступ: платный
Лекция 1:

Компоненты HTML5 и CSS3

Лекция 1: 123 || Лекция 2 >
Аннотация: Modern UI-приложения для Магазина Windows, работающие на HTML5, CSS3 и JavaScript, используют множество возможностей, предоставляемых этими языками. В модуле речь пойдет об этих функциях; вы сможете понять основы разработки приложений, узнать основные шаблоны при работе в Visual Studio и других программах. Также вы узнаете, как настроить внешний вид приложения.

Материалы к модулю Вы можете скачать здесь.

Windows, Bing, PowerPoint, Internet Explorer, Visual Studio, WebMatrix, DreamSpark и Silverlight являются зарегистрированными товарными знаками или товарными знаками Microsoft Corporation в США и / или других странах. Другие названия продуктов и компаний, упомянутые здесь, также могут быть торговыми марками их соответствующих владельцев.

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

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

Создан для Microsoft компанией Avlade: http://www.avlade.com

Copyright 2012 Microsoft Corporation.

Цель модуля

В этом модуле вы узнаете, как используются основные принципы HTML5 и CSS3 в WinRT-приложениях, в частности, в моделях компоновки (layout models), медиа-запросах (media queries), стилях и анимации. Вы увидите, как управлять компоновкой элементов на странице, используя области, раскладку с использованием сетки, гибкую блочную верстку, верстку в несколько колонок, обтекание текстом и медиа-запросы. Кроме того, мы поговорим о 2D и 3D-трансформациях, переходах, анимациях, градиентах, тенях, об использовании элементов со скругленными углами, встраиваемых SVG-изображениях и рабочей области приложения (полотне).

Введение

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

  • свежая версия Windows 8
    • самая последняя версия Internet Explorer 10. (Помните, что он устанавливается по умолчанию с операционной системой. В этом курсе используется версия 10.0.84 от 31 мая 2012 года);
    • http://windows.microsoft.com/en-US/windows-8/download
  • Visual Studio 2012 RC
    • http://www.microsoft.com/visualstudio/11/en-us/downloads
    • Visual Studio 2012 RC включает в себя Windows 8 SDK или средства разработки программного обеспечения для Windows 8; Blend для Visual Studio и шаблоны проектов. Его нужно устанавливать, предварительно установив Windows 8;
  • выход в интернет
    • если у вас уже установлены Windows 8 и инструменты разработчика, чтобы успешно пройти курс, выход в интернет Вам все равно понадобится.

Приложения для Магазина Windows позаимствовали понятие страницы из спецификаций HTML5 и CSS3

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

Перед тем, как углубляться в разработку WinRT-приложений, вы потратите немного времени "в мире интернета". При разработке этих приложений используются те же самые принципы (а иногда и код), что и при разработке самых современных веб-страниц; вам не нужно непременно знать HTML и CSS для того, чтобы заниматься разработкой приложений для Магазина Windows , но эти умения облегчат вам задачу.

То, что обычно называют HTML5, на самом деле является комбинацией HTML5, CSS3 и JavaScript

HTML5 – это комбинация новых тегов HTML, параметров CSS3, JavaScript и нескольких связанных с HTML5 технологий, фактически не привязанных к спецификации HTML5. Именно поэтому мы разделяем понятие "семейство" HTML5 и "ядро" HTML5.

"Ядро" HTML5 можно определить как спецификацию, определяющую новые элементы разметки или синтаксис, и теги, используемые дизайнерами при создании веб-страниц – в совокупности с уже используемыми тегами. Многие из этих новых элементов знакомы дизайнерам, работавшим со стандартными тегами HTML, например, <p>, <ul> и <div>. Эти новые теги предоставляют дизайнерам и разработчикам улучшенные инструменты разработки и создают улучшенные возможности для пользователей. Это упрощает ситуацию и относится к "ядру" HTML, о чем вы скоро узнаете.

"Семейство" HTML5 включает в себя новые теги и такие технологии или спецификации, как CSS3, Geolocation, Web Storage, Web Workers, и Web Sockets, многие из которых очень зависят от JavaScript. Эти технологии позволяют создать более мощный набор технических средств и, как результат, — более функциональные и современные веб-страницы. Поддержка этих функций зависит только от браузера. Одной из причин, почему стоит использовать эти технологии, состоит в том, что Internet Explorer 10 и фреймворк приложений для Windows 8 – это, во многом, одно и то же. Но это не значит, что приложения для Магазина Windows можно запустить в браузере. Просто в основе этих приложений и приложений и Internet Explorer 10 лежат практически одинаковые технологии.

Спецификации HTML5 доступны по ссылке:

http://developers.whatwg.org/

HTML5 и WinRT-приложения

WinRT-приложения построены с использованием синтаксиса (разметки) HTML и JavaScript, определенных в спецификациях HTML5. Разметка HTML5 вводит несколько новых элементов, разработанных для того, чтобы сделать структуру документа более логичной и функциональной. В предыдущей версии HTML (HTML 4.0.1) страница зависела от тега <div>, который часто был связан с CSS-классом или ID.

Пример 1

В HTML 4.0.1 обычно определяют заголовок страницы следующим образом:

<div id="header" > Это мой заголовок </div>

В этом примере код, выделенный красным цветом, относится к CSS ID, который определяет высоту и ширину заголовка, а также цвет фона. В коде CSS это выглядит следующим образом:

#header {
  width:960px;
  height:100px;
  background-color:gray;
}

Имя ID задается произвольно. Некоторые дизайнеры используют имена "masthead", "topsection" или "box". В HTML5 есть уникальный тег с именем <header>, который замещает собой <div>, - таким образом синтаксис становится более логичным и последовательным.

<header> Это мой заголовок </header>

Пример 2

В этом примере вы можете сразу добавить параметры (ширина, высота, фон и др) в правила CSS для заголовка:

header {
  width:960px;
  height:100px;
  background-color:gray;
}

Разница между первым и вторым примерами может быть непонятной, если вы не знакомы с CSS. В первом примере используется селектор (#header), который относится к идентификатору CSS или CSS ID. В примере втором используется новый селектор (header), позволяющий редактировать стиль элемента напрямую. В HTML5 есть несколько новых элементов, например, <footer>, <nav>, <section>, <aside>, и <article>. Их имена основаны на самых распространенных, используемых при верстке современных веб-страниц тегах (div id="footer", div id="nav" и так далее). Задача новых элементов HTML5 заключается в уменьшении сегодняшней зависимости от тегов <div>, в замене их более последовательной и читабельной структурой страницы.

Полный список элементов JavaScript, поддерживаемых WinRT-приложениями, можно найти по ссылке:

http://msdn.microsoft.com/en-us/library/windows/apps/hh767345.aspx

Поддержка HTML5 в WinRT-приложениях включает в себя не только элементы

Поддержка HTML5 в приложениях для Магазина Windows включает в себя не только элементы, но и другие компоненты:

  • события DOM (Document Object Model – объектная модель документа);
  • объекты, методы и параметры, которые могут быть использованы, чтобы управлять Объектной моделью документа;
  • наборы библиотек (API) HTML5 для работы с аудио и видео;
  • холст (canvas – поверхность для рисования) HTML5.

CSS3 и WinRT

CSS или каскадные таблицы стилей – это отдельный от HTML язык программирования. И спецификация W3C, определяющая функции и правила CSS, также развивалась независимо. В 1996 г. спецификация CSS1 получила статус рекомендации W3C. В 1998 г. то же самое произошло с CSS2. CSS2.1 сейчас уже почти дошла до стадии рекомендации.

Само развитие CSS не так важно, как поддержка его браузерами. Дизайнеры и разработчики должны знать, какие функции они могут использовать в конкретном стилевом оформлении и будут ли они поддерживаться браузером. Спецификация CSS может определить, поддерживается ли функция, но не может установить, поддерживает ли конкретный браузер конкретную функцию. Например, часть спецификаций CSS2.1 (представленных в 2004 г.) не полностью поддерживаются современными браузерами.

Зависящие от поставщика префиксы в CSS

Вы должны знать зависящие от поставщика префиксы в CSS. В веб-разработке такие префиксы появились после 2007 г. Они позволяют производителям браузеров испытывать и тестировать новые параметры CSS, отбрасывая префиксы и сохраняя параметры CSS3.

Например, представьте себе параметр, который позволяет создавать скругленные углы у прямоугольных CSS-элементов. В CSS3 синтаксис следующий:

border-radius: 24px;

Проблема в том, что когда такой параметр появился, производители браузеров не знали, как он будет работать, и хотели предоставить возможность проверить это в реальных условиях веб-дизайнерам и разработчикам. Вместо того, чтобы делать этот параметр "экспериментальным", производители браузеров придумали префиксы: код, добавляемый к параметру CSS, работающий только в поддерживаемых версиях браузеров. Например: префикс для параметра border-radius в Apple Safari и Google Chrome — "-webkit". Браузеры, работающие на платформе Gecko, используют префикс -moz.

-webkit-border-radius: 24px; (этот параметр работает только с браузерами, использующими платформу Webkit);

-moz-border-radius: 24px; (это работает только с браузерами, построенными на платформе Gecko).

У Microsoft есть свой собственный префикс "-ms", и если нужно будет описать скругление углов с использованием этого префикса, это может выглядеть следующим образом:

-ms-border-radius: 24px;

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

border-radius: 24px;

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

Internet Explorer 10 и WinRT-приложения

Почему вам необходимо обращать внимание на веб-стандарты и браузеры при разработке или создании дизайна приложений для Windows 8? Процесс, запускающий и поддерживающий приложения с использованием JavaScript, называется WWAHost.exe. Этот процесс включает в себя всю функциональность, предоставляемую браузером Internet Explorer 10. Соответственно, чтобы узнать, как работают те или иные механизмы WinRT-приложений, можно обратиться к документации по IE 10.

Поддержка CSS в WinRT-приложениях, использующих JavaScript

Поддерживаемый синтаксис CSS в WinRT-приложениях, использующих JavaScript – это комбинация из широко используемых свойств (таких, как свойство border) и синтаксиса поставщика (такого, как свойство –ms-content-zooming). Синтаксис, специфичный для –ms, группируют в следующие категории.

Значение Windows Library для JavaScript (WinJS) в WinRT-приложениях

JavaScript – это объектно-ориентированный язык программирования, разработанный для того, чтобы добавить интерактивность в веб-страницы. JavaScript позволяет расширить функциональность и внешний вид веб-страниц с помощью набора методов, от простых – таких, как проверка формы, до сложных – таких, как анимированный показ слайдов. JavaScript – это скриптовый язык, и изучить его сложнее, чем HTML и CSS. Современные дизайнеры и разработчики используют этот язык, применяя библиотеки или фреймворки JavaScript. Библиотеки JavaScript имеют расширение .js, они включают в себя набор функций, которые без труда можно добавить к HTML-страницам.

В веб-разработке доступно несколько библиотек JavaScript. Одна из самых распространенных – jQuery. Библиотека Windows для JavaScript – это библиотека файлов CSS и файлов JavaScript. Она включает в себя объекты JavaScript, организованные в пространства имен для того, чтобы разработка приложений была легче. Библиотека Windows для JavaScript (WinJS) включает объекты, которые помогают работать с активацией и доступом к хранилищам, определять свои собственные классы и библиотеки имен. Также она включает набор элементов управления.

Заметьте, что применение библиотеки WinJs не является обязательным. Если вы можете создать приложение, которое будет отображено корректно и будет работать в Internet Explorer 10, то оно, возможно, будет использовать обычный JavaScript или такие библиотеки, как jQuery, в качестве замены (или дополнения) к WinJS. Тем не менее, обращение к библиотеке WinJS будет только плюсом – с ее использованием гораздо легче выполнять такие задачи, как добавление элемента управления в пользовательский интерфейс или доступ к хранилищу данных.

Перенос веб-приложений на платформу Windows

Если у вас уже есть опыт разработки веб-приложений, у вас могут возникнуть вопросы о том, как сделать уже существующее веб-приложение WinRT-приложением с помощью JavaScript. Веб-приложение обычно рассчитано на работу в браузере, оно определяет веб-интерфейс, большая часть функциональности которого написана на HTML.

Разработаны рекомендации, которым нужно следовать. Но это выходит за рамки курса, дополнительную информацию можно узнать, пройдя по ссылке:

http://msdn.microsoft.com/en-us/library/windows/apps/hh465143.aspx

Функции CSS3, доступные в WinRT-приложениях

Базовый процесс, поддерживающий WinRT-приложения с использованием JavaScript, называется WWAHost.exe. Этот процесс включает в себя всю функциональность, предоставляемую браузером Internet Explorer 10. Вы можете ознакомиться с функциями, поддерживаемыми в IE 10, чтобы понять, какие функции доступны в WinRT-приложениях Metro. В примере мы будем использовать решение Test Drive на сайте Microsoft, чтобы продемонстрировать функции CSS.

Раздел "Практика CSS3" на портале Microsoft Test Drive

Раздел "Практика CSS3" на портале Microsoft Test Drive

Раздел "Hands On: Windows 8 HTML5 Platform" (Практика: платформа HTML5 в Windows 8) на сайте Microsoft поможет вам лучше понять графические параметры CSS3. Чтобы получить наиболее полную информацию, вам необходимо использовать Internet Explorer 10. Все эффекты, что есть в браузере, применяются в приложениях.

Вот главная страница описываемой демонстрации:

http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/

Границы, цвета RGBa, градиент и тени

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

Почему все это подходит для WinRT-приложений?

Использование CSS-стилей, таких, как границы, цвета, градиенты, тени, интегрировано в различные аспекты дизайна WinRT-приложений. Обычно такие эффекты создают в программе обработки изображений и сохраняют в графическом формате. Возможность сделать то же самое в коде означает, что производительность приложений оптимизирована, а эффекты легче модифицировать. Тем более, некоторые из этих параметров (такие, как прозрачность) могут быть полезнее, если они анимированы.

Свойство text-shadow – это одно из многих CSS-свойств, меняющих отображение объектов, оно позволяет вам добавить тень от текста

Свойство text-shadow – это одно из многих CSS-свойств, меняющих отображение объектов, оно позволяет вам добавить тень от текста

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

http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_text-shadow.htm

Лекция 1: 123 || Лекция 2 >
Роман Храпай
Роман Храпай
Россия
ashutos Jain
ashutos Jain
Индия, New Delhi