Информация

ПОДРОБНЕЕ на другом моем сайте:

Акции

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

Учитывая эту специфику, можно с практически стопроцентной уверенность утверждать, что на настоящий период времени, веб-технологии развиваются с довольно приличными темпами скорости, поражающей временами любое воображение. На просторах всемирной сети Интернет все больше и больше современных сайтов используют увеличивающиеся способности языка HTML. До сегодняшнего дня существовал язык HTML 4, более старой версии. После порядка десяти лет популярности издатели данного стандарта решили расширить старые возможности своего творения и создают новый язык гипертекстовой разметки под наименованием HTML 5.0. Данная, принципиально новая работа, наряду с традиционными возможностями графики, дает пользователям множество новых, нужных возможностей, в первую очередь перед разработчиками, в перечень которых входит: управление, семантика, мультимедиа, структура, АРІ.

Итак, в новый HTML 5 входит довольно большое множество новинок, которые в значительной мере упростят его работу по верстке сайтов. Предыдущая же версия являет собой множество отдельных, специфических структур. В стандарте HTML 5 используется более совершенные «nodiv» элементы, что преимущественно ново, так как в текущей принятой версии этого новшества явно не хватает. Каждый из элементов имеет здесь свое название, что полностью решает данную проблему. При подобном употреблении данных элементов совместно с принятыми ранее заголовками h1 - h6 внедряется свой отдельный подраздел, и соответственно также и заголовок в каждом из уровней, чего при этом явно не наблюдается в старой версии HTML 4. Спецификацией нового стандарта является некоторый алгоритм, предназначенный для работы с генерацией границ документа. Подобные возможности нового стандарта послужат хорошим помощником пользователям для генерации оглавления, а также для осуществления навигации по всему документу. Нужно при этом отметить, что для осуществления процедуры совместимости с различными браузерами установленными пользователями, и при этом предлагается также использование различных уровней заголовков, таких например как h2, h3 и других.

Чтобы в дальнейшем можно было облегчить перемещение пользователю по странице, можно будет использовать элементы разделов лишь после определения назначения принятых разделов. У пользователя системы есть возможность довольно легко и просто переходить в требуемый раздел меню, от одной размещенной статьи к другой без посредственной ссылки-перехода. Заменив такие элементы как «nodiv» другими существующими элементами, исходный код страницы стает намного проще и понятнее.

Прогресс на лицо. Веб-программисты и верстальщики  семимильными шагами бегут на встречу новым браузерам с поддержкой современных стандартов — HTML5 и CSS3. Много нового и удобного предлагают они.

Веб-браузер + HTML-страница + CSS + JavaScript + графические файлы + видео = всё что вам нужно, чтобы сделать клиентскую часть веб-сайта красивой, стильной интерактивной и удобной, до краёв полной информацией. Уже не осталось таких задач где-бы ещё потребовалось подключать флеш или другие плагины. Теперь у нас есть и полная поддержка мультимедиа, локальные хранилища данных, поддержка автономных приложений, встроенный API для 2D рисования и т.д. Многие интерактивные вещи реализованы на уровне CSS, такие как: перетаскивание и подравнивание строк и т.д.

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

Проверим, что имеем

Таки надо хоть что-то знать. Если вы ещё не видели голый HTML, CSS и JavaScript, то этот тьюториал пока не для вас. Однако вы можете взяться за него, только при условии, что вас не пугают такие слова как: тег, атрибут, селектор, инструкция или операция. Если после того, что вы успели прочитать у вас волосы встали дыбом, лицо исказила гримаса ужаса, то отвернитесь от “ТВ3” — хватит смотреть триллер, сконцентрируйтесь на статье. 

Вот перечень того, что вам нужно знать.
HTML: тег (элемент HTML), атрибут, HTML-разметка, структура веб-страницы;
CSS: селекторы (идентификаторы, классы), параметры, добавление CSS-кода в веб-страницы;
JavaScript (JS): переменная, функция, условие, цикл, добавление JS-кода в веб-страницы.

Это нам понадобится

Обратите внимание, каким браузером вы пользуетесь. Это должен быть современный браузер. Лучше, если он был рождён в 2010 году, что-нибудь из этого списка:

  • Mozilla Firefox (версии 3.6 +)
  • Apple Safari (версии 5.0 +)
  • Opera (версия 11.0 +)
  • Google Chrome (версия 9.0 +)

Чем младше, тем лучше, так-как количество поддерживаемых пунктов из стандарта растёт с каждой новой версией браузера. Код из этого тьюториала  будет работать во всех перечисленных браузерах. Если будет что-то не так — мы вам скажем.

Кроме браузера вам понадобится удобный редактор, хорошо если он будет с удобной подсказкой по разметке и атрибутам. Есть очень удобный редактор, и не просто редактор а IDE — NetBeans.

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

Что новенького дал HTML5

Семантика, как много в этом слове для сердца web’ова сплелось. Хаос веб-документов когда-то уже надо привести в порядок. Сколько можно плодить бессмысленные страницы блуждающие по просторам интернета? И вот, HTML5 даёт нам инструмент для таких манипуляций, специальные теги которыми можно обозначить части вашей веб-страницы: хедер, футер, панели и т.д.

Кроме этого, вам можно обозначить видео и аудио контент на вашей странице, и это не просто обозначение, это даст вам возможность проигрывания в плеере браузера!
Хотите порисовать на странице? Пожалуйста! Вот вам канва и рисуйте что угодно, правда рисунок будет двухмерный, но это уже большой плюс — не придётся использовать дополнительные плагины. Скажу по секрету, есть разработки браузеров бета версий, где включается возможность рисования трёхмерных картин!

Кроме того, за счёт появления локальных хранилищ данных вы можете использовать веб-приложения и с отключенным интернетом!

Элементы, несущие смысловую нагрузку

Теперь вы можете сказать браузеру пользователя не только “вот тело моего документа”, но ещё — “это моё меню”, “это хедер страницы” и он вас поймёт. Вы конечно можете продолжить использование элементов <div> с идентификаторами для обозначения разделов документа, но это теперь тоже самое как на пальцах объяснять тайскому официанту, что вы хотите блины, а не жаренных кузнечиков. Уж лучше посмотрите как по-тайски блины, а в нашем случае, для хедера, уж извольте использовать тег <header>.

Мы приведём здесь список новых тегов, которые появились в HTML5, позволяющих дать смысловую нагрузку всем частям веб-страницы.

<section>
Данный элемент нужен для обозначения законченной тематической части документа или приложения, так, например, это может быть глава или раздел статьи или учебника. Этот элемент обычно имеет заголовок, хотя и не обязательно. Так, часть тьюториала, которую вы сейчас читаете “Элементы, несущие смысловую нагрузку” можно заключить в теги <section>. Этот элемент не используется для стилизации.

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

<aside>
Таким тегом нужно обозначать контент, которому по барабану остальной контент вокруг. Ему всё вокруг перпендикулярно. Его, например, можно использовать, чтобы обозначить боковые панели с навигацией, или заключать рекламные блоки.

<nav>
Судя по названию — навигация. Прально, используйте этот тег для обозначения всевозможных меню: главных или внутристраничных. Однако, не нужно увлекаться, не вздумайте обозначать этими тегами обычные якоря в контенте. Кроме того, если у вас уже есть на странице тег <footer> с небольшим количеством ссылок, то их не нужно оборачивать в <nav>. И тут у вас возникает вопрос: “Как же мне отличить те меню, которые нужно оборачивать и те, которые не нужно?”. И вот тут вы должны себе дать отчёт — что главнее? То что главнее в данном контексте, то и оборачивайте в <nav>.

<hgroup>
Если у вас на странице встретятся подряд несколько заголовков разного уровня, то вы их можете обернуть в этот тег. Но это не главное, в результате такого оборачивания вы приписываете всему тексту внутри группы уровень значимости, который равен самому главному заголовку. Например, если у вас на сайте есть страница с заголовком <h1> “Лампы” и подзаголовком <h2> “Настольные лампы”, то оба эти заголовка нужно поместить в тег <hgroup>, а текст, который окажется внутри этой группы станет по значимости равен заголовку первого уровня.

<header>
Это как раз то, что вы подумали — заголовок. Однако, не только для всей страницы, он может также использоваться для секции <section> и статьи <article>. Размещайте там вводные данные или меню, заголовки h1-h6 или их группы hgroup.

<footer>
Противоположен элементу <header>. Он завершает некоторую секцию документа. Обычно содержит информацию о том, кто написал эту часть документа, ссылки на связанные документы, может содержать элемент <address> с контактной информацией, и т.д.

<address>
Используется для указания контактной информации для статьи или тела документа, которые являются непосредственными родителями данного элемента.
В примере веб-сайта, который будет в конце нашего тьюториала, мы воспользуемся этими элементами, чтобы сделать наши страницы более осмысленными, для автоматического разбора всевозможными поисковыми системами.

Берём в руки кисть и вперёд к холсту — элемент <canvas>

Исторический экскурс нам говорит от том, что элемент <canvas> был разработан ещё компанией Apple® для использования в Mac OS X Dashboard и в Safari, но впоследствии была взята на вооружение Mozilla® и Opera® для своих веб-браузеров. Потом элемент был стандартизирован и включен в спецификацию HTML5 вместе с набором функций, которые могут быть использованы для рисования фигур, текста, градиентов и создания анимации внутри элемента. Кстати, в IE он попал только в 9-ой версии, но это так к слову.

Отнеситесь серьёзно к этому элементу, не нужно сломя голову бросаться рисовать заголовки и другие элементы страницы, канва не для этого. Для заголовков есть h1-h6 и css — пользуйтесь.

Наиболее полезной канва считается из-за того, что позволяет избавиться теперь от дополнительных плагинов, например Adobe Flash. Однако, здесь стоит упомянуть, что графика на канве всё-таки растровая, а не векторная, как во флеше. Но, хоть она и растровая, она всё же позволяет создавать игры, графические редакторы, и просто служит для построения всевозможных графиков.

Для создания элемента <canvas>, вам достаточно указать ему ширину, высоту, а также идентификатор. Отрисовка на канве идёт уже после того, как веб-страница загрузилась полностью.

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

Теперь можно не искать бесплатные плееры.
Проигрываем <audio> и <video>

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

В сети существуют сайты, на которых можно размещать своё видео и использовать API этих сайтов для его трансляции со страниц уже своих сайтов. Думаем, что все слышали о youtube.com, vimeo.com, tinypic.com

Исторически сложилось (маркетинговая политика некоторых очень известных компаний), что существует сильный перевес в сторону одного из форматов видео. Большое распространение получили файлы в формате Flash Video (.FLV), затем по популярности идёт MP4, затем MOV и WMV. Всё бы ничего, но только это всё проприетарные форматы, а значит их нельзя просто так использовать. Поэтому в свободных браузерах, поддерживающих HTML5, быстрого внедрения проигрывания таких форматов видео не получилось.

Для свободного использования больше бы подошло видео в формате Theora (файлы OGG), однако, оно по своему качеству воспроизведения контента высокой чёткости (HD), не удовлетворило таких гигантов, как Apple и Google. Они предпочитают видео закодированное кодеком H.264, такое видео содержится в файлах MP4, MOV или MKV.

Такая же неразбериха и с аудио. Имеется прекрасный свободный кодек Vorbis (файлы OGG), но нет же, его видите ли не понимают большинство портативных плееров.

Однако, HTML5 всё-таки включает в себя поддержку двух новых элементов, <audio> и <video>, которые позволяют веб-разработчикам включать мультимедийный контент, не рассчитывая на то, что пользователи пойдут бродить по интернету для установки плагинов для браузеров.

Некоторые браузеры, включая Mozilla Firefox, Apple Safari и Google Chrome, поддерживают эти новые элементы и предоставляют браузеру стандартные элементы управления для воспроизведения видео и аудио файлов. Кроме того, они дают JavaScript API, чтобы разработчики создавали собственные элементы управления воспроизведением. Одним из главных плюсов во встроенном мультимедийном управлении является то, что требуется меньше ресурсов компьютера.

Хранение данных у пользователя

Куки (cookies) — печенюшки, для веб-приложения это не кондитерские изделия, это способ сохранения информации на компьютере пользователя. С помощью них сохраняется информация о доступе пользователя к сайту, настройки страницы, и многое другое. Каждая из печенюшек — это файл, в котором хранится некий идентификатор и полезное значение. Это удобно, пока вы не захотели сохранить более чем 20 печенек на веб-сервер, это предел. Так же есть предел для объёма одного такого файла — 4 килобайта. Кроме этих ограничений, у данного механизма есть одна особенность, при каждом HTTP-запросе все куки, полученные от сайта посылаются ему в запросе, если посчитать по максимальным ограничениям 20×4=80 килобайт, а это уже целая веб-страница. Так что хранение данных на компьютере пользователя в печенюшках — it’s not good.

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

Надоело пользоваться сторонними компонентами веб-формы?

В полку прибыло! Теперь у вас появилась возможность разрабатывать формы веб-приложений с крутыми элементами управления. Раньше вы могли использовать только самые простые компоненты — строки или области ввода, флажки, кнопки и т.д. Если вам хотелось чего-то большего, например — календарик, то вам приходилось подключать сторонние библиотеки JavaScript, либо использовать возможности, предоставляемые плагинами.

HTML5 даёт нам богатый выбор для ввода данных:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Для того чтобы узнать, какие браузеры уже поддерживают этот список элементов управления, загляните на страничку, на ней приводятся таблицы в которых сравниваются разные браузеры в плане поддержки стандарта HTML5. Обратите внимание что браузер Opera (движок Presto) оказывается самым продвинутым из всех, поддерживая, например, элементы для ввода даты.

Кроме новых элементов, HTML5 поддерживает две новые функции для полей форм. Первая — авто заполнитель. Он позволяет, не записывая дополнительный код JavaScript, указывать для поля ввода текст, который будет показан пользователю, пока он ничего не ввёл. Например, в поле, где вводится строка для поиска, можно вывести текст “введите текст для поиска”.

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

Ещё немного новшеств

Сама по себе спецификация HTML5 содержит много разных нововведений, мы здесь приведём ещё несколько, особенно нам понравившиеся.

Drag and Drop
Многие привыкли, что могут на рабочем столе перетаскивать файлы или папки, и бросать их в корзину или другую папку. Теперь такая возможность, на уровне движка, появилась и в браузерах. Называется она Drag and Drop. До сих пор, её нельзя было сделать без плагинов, или JavaScript-библиотеки.

Geolocation
Появилось API, позволяющее веб-приложению определять Ваше текущее географическое положение. Этот механизм задействует различные пути для выяснения где находится клиент. Начиная от серверов, которые хранят информацию о расположении и устройств GPS, которые могут быть встроены в ваш гаджет, заканчивая точками доступа для беспроводного подключения.

Web workers
Веб-работнички, полезная вещь. Это специальная технология JavaScript, которая реализует многопоточность, которую так долго ждали. Она снимает тормоза с пользовательского интерфейса, так как некоторые задачи теперь могут выполняться в фоновом режиме в дополнительных потоках.

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

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


Чем нас радует CSS3

Одной разметкой сайт жив не будет, нужна одёжка!  Каскадные таблицы стилей третьего стандарта дают нам новые возможности для того, чтобы одеть сайт.

Множество неожиданных и загадочных вещей появилось в css. Например, новые селекторы, связанные с пространством имён, другие связаны со структурой документа, псевдо-класс отрицание, псевдо-классы состояния, и т.д. Появились эффекты, которые облегчат жизнь верстальщикам. Теперь не нужно рисовать тени и выделять для них лишние дивы или скруглять углы, с помощью четырёх картинок. Сейчас у вас есть возможность скомандовать и тексту и блокам разметки:  “Отбрасывайте тени или станьте немного прозрачными!”, а блокам: “Скруглите углы!”.

Думаю, для верстальщиков будет большим подспорьем появившаяся в CSS3 возможность, ну прям как в глянцевых журналах, создавать макеты страниц из нескольких столбцов. При этом, перед ними возникают два варианта: или разбивать текст на конкретное количество столбцов, или указать подгон текста под определённую ширину столбца.

Ещё одна типографская фишка — возможность включения нестандартных шрифтов, используя правило @font-face.

Ну и для того, чтобы глаза совсем разбежались в стороны — поддержка цветовых моделей HSL (Hue, Saturation and Lightness — Тон, Насыщенность и Яркость) и RGBA (Red, Green, Blue, and Alpha — Красный, Зеленый, Синий и Прозрачность).

Новые селекторы

Все мы давно используем селекторы, привязанные к реальным сущностям. С элементом документа у нас ассоциируется селектор типа. Элемент документа абзац, тег <p>, это селектор p, которому можно указать любое оформление, например p {color: black} (цвет всех параграфов будет чёрным). Чтобы выборочно указать некоторым параграфам серый цвет текста, задействуйте атрибут class
<p class=”silvered”>, соответствующий селектор с правилом будет выглядеть так:
.silvered {color: #aaa}. Кроме того, можно воспользоваться атрибутом id
<p id=”antivampir”>, тогда селектор и правило будут такими #antivampir {color: #aaa}.
Перечисленные селекторы можно комбинировать, чтобы более точно указывать нужные элементы документа.

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

Селекторы атрибутов

В этих селекторах используется обращение к атрибутам тегов.

E[foo^=»bar»]
Выбирается элемент Е, foo атрибут которого начинается именно со строки bar

Например: img[title^=”fire”] — этот селектор будет соответствовать всем картинкам, у которых значение в title начинается с fire.

E[foo$ =»bar»]
Выбирается элемент Е, foo атрибут которого заканчивается именно строкой bar

E[foo*=»bar»]

Выбирается элемент Е, foo атрибут которого содержит подстроку bar

Структурные псевдо-классы

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

E:root
С помощью такого селектора, вы всегда сможете обратиться к корню документа, для HTML-документа это будет тег <html>, при этом E любой элемент документа

E:nth-child()
В скобках может быть указано либо выражение an+b, либо значения odd(нечётные) или even(чётные). a и b это целые числа, а n показывает изменение номеров элементов начиная с нуля.

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

Например: li:nth-child(2n) или li:nth-child(even) — будут выбраны все чётные элементы списков на странице. li:nth-child(3n) — каждый третий элемент.

E:nth-last-child()
Похож на предыдущий селектор, но отсчёт идёт с конца списка.

Например: p:nth-last-child(1) — таким образом обращаемся к последним абзацам.

E:nth-of-type()
По действию похож на селектор nth-child, отличительной чертой является учёт типа элемента. То есть при выборе дочерних элементов параграфы и заголовки будут реагировать на селектор независимо. Используя этот селектор вы сможете перечислить, например, только картинки.

Например: img:nth-of-type(odd){align:left} img:nth-of-type(even){align:right} все нечётные картинки, внутри некоторого контейнера, будут выровнены по левому краю, все чётные по правому.

E:nth-last-of-type()
По действию похож на селектор nth-last-child, учитывается тип элемента.

E:last-child
Выбирается элемент Е, который является последним дочерним элементом (Обратите внимание, что E:first-child был ранее определён в CSS2)

E:first-of-type
Выбирается элемент Е, который является первым потомком своего типа.

E:last-of-type
Выбирается элемент Е, который является последним потомком своего типа

E:only-child
Выбирается элемент Е, который является единственным дочерним элементом своего родителя, если у родителя будет больше дочерних элементов, то на их всех селектор уже не подействует

E:only-of-type
Выбирается элемент Е, который является единственным потомком своего типа

E:empty
Выбирается элемент Е, который не имеет дочерних элементов (Обратите внимание, включая текстовые узлы)

Псевдо-класс target

E:target
Выбирается элемент Е, который является целью указывающего URI. В качестве такого элемента может быть <a> с атрибутом name или элемент с атрибутом id. Значения этих атрибутов должны соответствовать URI.

Например: div:target{background-color: #efe;} это правило сработает в том случае, если на странице будет присутствовать элемент <div id=”about-me”>…</div>, на который происходит переход, при этом URI должен выглядеть так /index.html#about-me

Псевдо-классы состояний

E:enabled
Выбирается активный (через который можно управлять) элемент управления веб-страницы Е, например текстовое поле или флажок

Например: input[type=”text”]:enabled{border: #0f0 1px solid} у всех активных одно-строчных текстовых полей границы станут зелёными

E:disabled
Выбирается неактивный элемент Е

E:checked
Выбирается элемент Е (переключатель или флажок), отмеченный пользователем или включенный по умолчанию

Псевдо-класс отрицание

E:not(s)
Выбирается элемент Е, который не соответствует простому селектору s. В качестве простого селектора может быть: класс, идентификатор, атрибут, псевдо-класс, тег, звёздочка.

Например: span:not(.progs) {color: green} в тегах <span>, которым не назначен класс progs, текст станет зелёным.

Обобщённый родственный комбинатор

E ~ F
Выбирается элемент F, который находится после элемента E, при этом оба должны принадлежать одному предку, в дереве документа.

Например: p:not(.trg) ~ div {background-color:#f00} фон у блока div, который расположен после абзаца без класса trg, будет красным.

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

Новые эффекты

Мы просто перечислим здесь некоторые замечательные инструменты, которые появились в CSS3. Именно они позволят сбросить напряжение с верстальщиков, уменьшая количество блоков для создания нужных дизайнерских эффектов:

  • background (теперь вы можете использовать множество фонов)
  • background-clip (определяйте вид фона под границей блока)
  • background-origin (позиционирование фона, не работает когда background-fixed: fixed)
  • background-size (задаёт алгоритм установки размера фоновой картинки)
  • border-radius (закругленные углы)
  • border-image (можно использовать картинку для создания границ блока)
  • border-color (есть возможность сделать градиент параллельный границе)
  • box-shadow (задаёт тень у блоков)
  • box-sizing (изменяет алгоритм расчёта размеров блока)
  • opacity (тут всё ясно — прозрачность)
  • outline-offset (линия вокруг блока, не входит в его размер)
  • resize (определяет возможность менять размеры текстовой области)
  • text-shadow (текст отбрасывает тень)
  • word-wrap (перенос в блоке по словам)

Мы с вами обязательно поупражняемся с этими эффектами попозже.

Многоколоночные макеты

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

  1. С помощью свойства column-width (ширина столбца). Вы только определяете, какая будет ширина каждого столбца, при этом число столбцов вычисляется на основе ширины контейнера и ширины столбца.
  2. Используя column-count (количество столбцов). Вы определяете число столбцов, для вашего текста, при этом их ширина будет вычисляться в зависимости от ширины контейнера.

Кроме этого, у вас есть возможность определить column-gap (разрыв между колонками), однако он будет действовать когда используется метод column-width. Ещё одним полезным дополнением является свойство column-rule, которое позволяет размещать границу между колонками. Наконец, есть свойство column-space-distribution, которое определяет, как оставшееся пространство должно быть выделено между колонками.

Многоколоночные макеты в настоящее время поддерживаются браузерами Firefox, Chrome и Safary. Однако, названия параметров нужно немного дополнить, чтобы нужный эффект заработал. Для Firefox нужен префикс -moz, а для Chrome -webkit.

Веб-шрифты

Некоторые из вас скажут — что удивительного и нового, веб-шрифты стали доступны уже в CSS2 и хорошо работали в Microsoft Internet Explorer, начиная с версии 5. Да, это так, однако есть парочка “НО”. Первое (влияющее на второе), необходимо использовать проприетарный формат шрифтов .eot (Embedded Open Type). Второе, в следствии этого ни один из других браузеров не поддерживает этого. В результате веб-шрифты никогда не использовались на сайтах, основанных на CSS2.

Однако, теперь в последних версиях Firefox, Safari, Chrome и Opera, вы можете использовать правило @font-face, используя шрифт любой лицензии .ttf (TrueType) или .otf (OpenType) на вашей веб-странице.

Например: @font-face {font-family: Alexa; src: url(‘Alexa.otf’);}. После этого  используйте этот шрифт в ваших правилах CSS, таких как: article p {font-family: Alexa, Arial, Helvetica, sans-serif;}.

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

Другие новые функции

CSS3 также включает много других новых функций. К ним относятся: поддержка новых цветовых моделей, в частности, HSL (Hue, Saturation, Lightness — Тон, Насыщенность, Яркость) и две с альфа-каналом — RGBA (Red, Green, Blue, Alpha — Красный, Зеленый, Синий, Альфа) и HSLA (Hue, Saturation, Lightness, Alpha).

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

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


Safari - вопрос совместимости iOS

Создание совместимого веб-контента

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

Использование стандартов

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

Движок WebKit, используемый Safari на десктоп и Safari на iOS, поддерживает все самые современные веб-стандарты, в том числе:

  • HTML 4.01, HTML5
  • XHTML 1.0
  • CSS 2.1 и CSS3
  • ECMAScript 3 (JavaScript)
  • DOM Level 2
  • AJAX технологию, включая XMLHttpRequest

Избегайте фреймов

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

Используйте столбцы и блоки

Для совместимости с iOS, используйте столбцы и блоки выладывая веб-страницу, как многие интернет-газеты. Это делает ваш сайт более удобным для чтения, а также работает лучше с двойным нажатием на iOS.

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

Когда пользователь дважды кликает веб-страницу, Safari на iOS смотрит на элемент, который был дважды нажат, и находит ближайший блок (определенный элементом, таким как <div>, <ol>, <ul> и <table>) или элементом изображения. Если найденный элемент представляет собой блок, Safari разверачивает iOS контент по ширине экрана, а затем центрирует его. Если это изображение, Safari iOS разворачивает его, чтобы поместить изображение, а затем центрирует. Если блок или изображение уже увеличено, Safari iOS сворачивает его обратно.

Помните о пределах iOS ресурсов

Хорошо работащая веб-страница на десктопе не дает никакой гарантии, что она будет хорошо работать на iOS. Имейте в виду, что iOS использует EDGE (c более низкой пропускной способностью, и высокой латентностью), 3G (более высокой пропускной способностью, и высокой латентностью) и Wi-Fi (более высокой пропускной способностью, и низким уровенем задержки) для подключения к интернету. Таким образом, необходимо, минимизировать размер веб-страницы. Включение неиспользуемых или ненужных изображений, CSS, и JavaScript в веб-страницы негативно отражается на производительности вашего сайта на iOS.

Из-за лимита памяти, доступной на iOS, существуют ограничения на количество ресурсов, которые она может обрабатывать:

  • Максимальный размер декодированного GIF, PNG и TIFF изображения составляет 3 мегапикселя для устройств с менее чем 256 Мб оперативной памяти и 5 мегапикселей для устройств с большим или равным 256 Мб оперативной памяти.

    То есть, убедитесь, что ширина * высота ≤ 3 * 1024 * 1024 для устройств с менее чем 256 Мб оперативной памяти. Помните, что декодированный размер гораздо больше, чем размер кодированного изображения.

  • Максимальный декодированный размер для JPEG составляет 32 мегапикселя с использованием подвыборки.

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

  • Максимальный размер элемента canvas составляет 3 мегапикселя для устройств с менее чем 256 Мб оперативной памяти и 5 мегапикселей для устройств с большим или равным 256 Мб оперативной памяти.

    Высота и ширина объекта canvas составляет 150 х 300 пикселей, если не указано.

  • JavaScript ограничен до 10 секунд во времени исполнения для каждого верхнего уровня точки входа.

    Если ваш сценарий выполняется в течение более 10 секунд, Safari на iOS прекращает выполнение сценария в случайном месте в вашем коде, поэтому это может привести непредвиденным последствиям.

    Это ограничение введено потому, что JavaScript может привести к блокировке основного потока, во время работы скрипта, пользователь не сможет взаимодействовать с веб-страницей.

  • Максимальное количество документов, которые могут быть открыты одновременно,- восемь на iPhone и девять на iPad.

Кроме того, необходимо, чтобы размер изображения соответствовал образу. Не полагайтесь на браузерное масштабирование. Например, не ставьте 100 х 100 изображение в 10 х 10 <img> элемент. Используйте плитку из небольших изображений фона, не используйте большие фоновые изображения.

Используйте поддерживаемые JavaScript окна и диалоги

Используйте окна и диалоги поддерживаемые Safari на iOS и избегайте других.

Вы можете открыть новое окно в JavaScript, вызывая window.open(). Следует помнить, что максимальное число документов, следовательно, максимальное количество открытых окон, восемь в iOS.

Поддерживаемые методы JavaScript диалоги включают alert, confirm, print и prompt. Если вы вы используете эти методы, Safari на iOS отображает привлекательные диалоговые окна, не закрывая веб-страницы.

iOS Примечание: Обратите внимание, что метод showModalDialog не поддерживается в Safari на iOS.

Используйте поддерживаемые типы контента и особенностей iOS

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

На iPhone и iPod Touch, видео и аудио воспроизводятся в полноэкранном режиме. Видео автоматически расширяется до размера экрана и вращается, когда пользователь изменяет ориентацию. Элементы контроля автоматически скрываются, когда они не используются. На iPad, видео и аудио проигрывается либо встроенным в веб-страницу либо в полноэкранном режиме.

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

Сафари на iOS обеспечивает предпросмотр других типов контента, таких как MS Office (Word, Excel и PowerPoint), iWork (Pages, Numbers и Keynote) и RTF документов. Если другое приложение регистрируется для типа контента, то Safari iOS организовывает предпросмотр, а это приложение используется для открытия документа. Например, на iPad, страницы могут быть использованы для открытия Word и Pages документов, которые просматриваются в Safari на iOS. Если другое приложение регистрируется для типа контента, который Safari на iOS не поддерживает изначально, то Safari на iOS позволяет документу, загружаться и открываться с помощью этого приложения.

iOS Примечание: Превью документов RTF доступно в iOS 3.2 и выше. Возможность открыть загруженный файл доступно в iOS 3.2 и выше.

Когда пользователь нажимает определенные типы ссылок, Safari на iOS может запустить собственное приложение для обработки ссылки, например, Mail составит сообщение электронной почты, Maps для получения расположения, и YouTube, для просмотра видео. Если пользователь нажимает ссылку с телефоном, указанную на телефоннном устройстве, отображается диалоговое окно, желает ли пользователь, набрать этот номер. На десктопе, большинство из этих ссылок перенаправляются на соответствующий веб-сайт.

iOS Примечание: Обратите внимание, что типы Java и Flash не поддерживаются.

Используйте canvas для векторной графики и анимации

Вы можете использовать тот же объект canvas, который используется Dashboard виджетами для реализации сложных пользовательских интерфейсов для веб-приложений. Объект canvas был введен в Safari 2.0, и принимается другими движками браузеров, а также является частью спецификации WHATWG.

Используйте HTML5 audio and video элементы

Вы можете использовать HTML5 audio и video элементы для добавления аудио и видео на веб-страницы. На небольших устройствах, таких как iPhone и IPod touch, фильм играет только в полноэкранном режиме, а режим автоматического воспроизведения отключен, требуются действия пользователя, чтобы начать воспроизведение. На iPad, воспроизведение видео, встроенно в веб-страницу. При воспроизведении видео inline, вы можете создавать пользовательские элементы управления и получать события уведомлений, например, пауза и воспроизведение, для повышения взаимодействия с пользователем. Используйте класс HTMLMediaElement и его подклассы.

Используйте поддерживаемые iOS Rich Media типы MIME

Список мультимедийных MIME типов, поддерживаемых Safari на iOS. Файлы с этими MIME типами и расширениями файлов могут быть воспроизведены на iOS.

MIME тип Описание Расширение
audio/3gpp 3GPP media 3gp, 3gpp
audio/3gpp2 3GPP2 media 3g2, 3gp2
audio/aiff
audio/x-aiff
AIFF audio aiff, aif, aifc, cdda
audio/amr AMR audio amr
audio/mp3
audio/mpeg3
audio/x-mp3
audio/x-mpeg3
MP3 audio mp3, swa
audio/mp4 MPEG-4 media mp4
audio/mpeg
audio/x-mpeg
MPEG audio mpeg, mpg, mp3, swa
audio/wav
audio/x-wav
WAVE audio wav, bwf
audio/x-m4a AAC audio m4a
audio/x-m4b AAC audio book m4b
audio/x-m4p AAC audio (protected) m4p
video/3gpp 3GPP media 3gp, 3gpp
video/3gpp2 3GPP2 media 3g2, 3gp2
video/mp4 MPEG-4 media mp4
video/quicktime QuickTime Movie mov, qt, mqv
video/x-m4v Video m4v

Не используйте неподдерживаемые iOS технологии

В целом на iOS Safari не поддерживаются сторонние плагины или функции, требующие доступа к файловой системе. Следующие веб-технологии не поддерживаются на iOS:

  • Модальные диалоги

    Не используйте window.showModalDialog() в JavaScript.

  • События наведения мыши

    Пользователь не может возбудить событие перемещения курсора на nonclickable элемент в iOS. Элемент должен быть интерактивным, чтобы событие mouseover произошло.

  • Стили наведения (hover)

    Поскольку событие mouseover посылается перед mousedown событием, hover стили отображаются, только когда пользователь касается интерактивные элементы со стилем hover.

  • Всплывающие подсказки

    Также, как hover интерактивные элементы отображают tooltip только при их касании.

  • Java апплеты
  • Flash

    Не вызвайте JavaScript оповещения, которые просят пользователей скачать Flash.

  • QuickTime VR (QTVR) фильмы
  • Установку плагинов.
  • Пользовательские x.509 сертификаты
  • WML

    Safari на iOS не миниатюрный веб браузер, это полнофункциональный веб-браузер, отображающий страницы, в соответствии с дизайногм,- таким образом у Safari на iOS, нет никакой потребности в поддержке Wireless Markup Language (WML). Кроме того, он поддерживает XHTML мобильный профиль типов документов и сайтов на .mobi доменах.

    XHTML mobile тип документа:

    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">
  • Загрузку и отправку файлов

    Сафари на iOS поддерживает возможность загрузки файлов, то есть элементы <input type="file"> - на IOS 6 и выше.

    Не предлагайте пользователю скачать такие плагины, как Flash на iOS.

По умолчанию Safari на iOS блокирует всплывающие окна. Однако пользователь может изменять это в настройках. Чтобы изменить настройки Safari, нажмите Настройки, далее Safari. Блокировка всплывающих окон будет включена в разделе Безопасность.


Выводы:

HTML5 предлагает способ создания мультимедийного контента и требуемой функциональности приложений без использования нестандартных настроек над браузерами. Он позволяет решать в Web и множество других задач, например отображать масштабируемую векторную графику (SVG) и математические символы и конструкции (MathML).

В настоящее время HTML5 предлагает многоплатформенную альтернативу написанию приложений для каждой конкретной мобильной платформы: Android, iOS и т. д. По оценкам аналитиков Vision Mobile, около 42% разработчиков мобильных приложений используют при создании своих программ, наряду с JavaScript и каскадными таблицами стилей (Cascading Style Sheets, CSS), и язык HTML.


7 причин перейти на HTML5:

HTML5 – новый этап стандартизации веба

Распространено заблуждение, что HTML5 – это новый язык разметки, который не будет понятен старым версиям браузеров, которые сейчас в основном установлены у пользователей. Многие думают, что все те возможности, которые активно афишируют сторонники HTML5, будут доступны только тем, кто имеет самые последние версии браузеров.

На самом деле, HTML5 это все тот же язык разметки, понятный браузерам, в который просто добавили дополнительные инструменты для работы с объектами и мультимедиа. По сути это просто новая версия уже давно используемого в Интернете стандарта HTML4, стандартизированного Консорциумом W3C в 1997 году. Таким образом, с точки зрения разработчиков, HTML5 – это не есть что-то принципиально новое, на чем нужно будет учиться работать. Новый стандарт просто расширил возможности разработчиков. Теперь среда HTML5 позволяет реализовать те визуальные «фишки» и опции, которые раньше были доступны только благодаря технологии Flash.

Сам разговор о том, приживется или нет технология HTML5 в веб-разработке, лишен всякого смысла: распространение HTML5 – это новый этап стандартизации веб-технологий W3C. Известен даже предположительный срок, когда должна осуществиться полная доработка всех компонентов HTML5 – 2014 год. После этого Консорциум W3C объявит рекомендацию всем разработчикам о применении нового стандарта верстки. Так же, как это когда-то произошло с HTML4 в 1997 году и его предшественниками еще раньше. Вопрос выбора альтернативы даже не стоит – все браузеры будут поддерживать HTML5 по умолчанию.

Физические законы в «цифре»

Какими возможностями обладает HTML5? По сути это пустая оболочка, в которую можно внедрить что угодно. Благодаря таким инструментам, как Box2D, Canvas, на сайте можно реализовать 3D-модели объектов, которые будут перемещаться и взаимодействовать друг с другом по физическим законам.

«Многослойность» сайта

Благодаря HTML5, можно внедрить сложную анимацию на корпоративный сайт, как это в последнее время стало распространенным. При этом анимированные компоненты не будут смешиваться с содержимым страницы, они будут как бы на разных «слоях» и будут ограничиваться контурами объекта, а не областью его движения/трансформации. Чтобы лучше понять разницу, приведем простой пример. Если в качестве анимированного объекта, перемещающегося поверх сайта, сделать автомобиль, то при реализации с использованием технологии Flash кликабельным будет весь прямоугольник, в который вписан контур машины, даже если визуально там будет находиться текст основного содержания страницы. HTML5 работает более корректно и позволяет избежать данного `побочного эффекта`. Даже при отклонении в 10 пикселей от объекта анимации сайт будет воспринимать нажатие как работу с другим «слоем».

Анимация без границ

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

Третье измерение

HTML5 позволяет придать сайту эффект трехмерного пространства. Те же самые «слои» могут перемещаться при скроллинге с разной скоростью и, таким образом, формировать эффект параллакса.

Работа с видео без сбоев

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

Работа без перезагрузки внутренних страниц

Большим сдерживающим фактором в распространении HTML5 было то, что многие браузеры далеко не полностью использовали возможности языка javascript. Особенно это касалось браузера Internet Exporer, чья доля была очень высока, но который практически не поддерживал javascript. Новая технология Ajax позволяет делать сайты на HTML5 без перезагрузки внутренних страниц. Не надо ждать, пока сменится контент, интерфейс остается неизменным и подгружается практически мгновенно. Фактически сайт становится похожим на программу.

Конфиденциальность в эпоху HTML5

Новые API в предстоящем HTML5 позволяют веб-приложениям намного проще получать доступ к программному и аппаратному обеспечению, особенно на мобильных устройствах. Консорциум Всемирной паутины W3C относится к вопросу конфиденциальности серьезно, добавляя финальные штрихи в HTML5, но следует учесть еще несколько важных вещей.

HTML5 - последняя версия языка Интернета, была разработана с прицелом на веб-приложения. Она содержит множество новых интерфейсов прикладного программирования (API), которые нужны веб-разработчику для аппаратного и программного доступа к устройствам с помощью JavaScript.

Вот наиболее интересные спецификации HTML5:

  • API Геолокации позволяет браузеру знать, где вы находитесь
  • Media Capture API разрешает браузеру доступ к камере и микрофону
  • File API разрешает браузеру доступ к файловой системе
  • Web Storage API позволяет веб-приложениям хранить большие объемы данных на вашем компьютере
  • Спецификация DeviceOrientation Event позволяет веб-приложениям знать, когда ваше устройство изменяет ориентацию с книжной на альбомную.
  • Messaging API дает браузеру доступ к системе сообщений мобильного устройства
  • Contacts Manager API позволяет получить доступ к контактам, сохраненным в базе данных контактов пользователя

Прочитав этот список, вы может заключить, что HTML5 разработан специально для хакеров и кражи личных данных. Однако, в реальности авторы HTML5 относятся к конфиденциальности очень серьезно.

HTML5 улучшает сетевую безопасность, позволяет обойтись без плагинов

Нынешнее состояние сети, даже не беря во внимание HTML5, включает в себя отслеживающие cookie, флеш-cookie и взломанные веб-сайты, распространяющие вредоносное ПО. Кроме того, 6,3% веб-серферов по всему миру (многие из них из Китая) по-прежнему используют исключительно небезопасный Microsoft Internet Explorer 6.

HTML5 стремится сделать Web более безопасным, в частности, за счет устранения необходимости плагинов для браузера. Это отличное начало. Два наиболее часто устанавливаемых модуля браузера - Java и Flash, также являются двумя крупнейшими дырами в безопасности в любом браузере.

Просто будучи установленными, плагины делают браузер менее безопасным. Но дело не только в этом. Плагины, как правило, написаны для нескольких операционных систем. Уязвимости в плагинах, таких как Java или Flash - это уязвимости в Windows, MacOS и Linux. Другой проблемой является то, что большой процент установленных плагинов не имеют последних обновлений безопасности. В целом, плагины представляют собой большую проблему.

Многие из новых функций HTML5 - встроенное видео и аудио воспроизведение, векторная и растровая анимация, доступ к устройствам и сетевое хранение, предназначены для устранения необходимости плагинов. Цель - собрать то, что считалось «лишними» функциями под крышей браузера и, что более важно, под крышей утвержденных стандартов безопасности и конфиденциальности, а затем интегрировать в гораздо более последовательной, осторожной манере.

Доступ к устройству через API в HTML5 и настройки конфиденциальности

Доступ к такой широкой категории устройств через API представляет ещё одну потенциальную проблему конфиденциальности HTML5. Для многих из нас кажется естественным, что продолжающееся расширение сети и интернетизации всевозможных устройств создаёт много инновационных продуктов и услуг. Так же как и в настольных приложениях, где Web-приложения охватывают многие задачи, которые ранее были прерогативой пакетов программного обеспечения, так и в мобильных устройствах всё смещается в сторону Интернета.

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

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

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

Чтобы понять, как браузеры справятся с этой потенциальной проблемой, мы должны сначала определить некоторые термины:

  • Уведомление - обязательное требование для API, сообщающее пользователю о сборе данных. В настоящее время браузеры имеют немного другие механизмы уведомлений, но панель уведомлений в верхней части окна браузера становится наиболее распространенным методом. Вы можете увидеть пример вызова уведомления API, посетив сайт, который использует геолокацию HTML5 с браузером, который поддерживает геолокацию - последние версии всех основных браузеров умеют это.
  • Согласие - процесс выдачи разрешения пользователем доступа API к устройству. Согласие может быть явным или неявным. Например, если вы нажмете кнопку "сфотографировать", вы неявно дали приложению разрешение на использование камеры. С другой стороны, если вы нажмёте кнопку "Отправить другу", вы не даёте разрешение API на спам кому-либо через базу данных ваших контактов. Каждый API в HTML5 предполагает, что явное разрешение требуется по умолчанию, но определяет обстоятельства, при которых неявные разрешения является приемлемыми.
  • Минимизация - требование, чтобы API позволялось собирать только необходимый для текущей задачи минимум информации.
  • Управление - возможность пользователя управлять выбором разрешений. Пользователи должны иметь возможность отозвать доступ браузера к устройству, после того как они его дали. Опционально, они должны иметь возможность вести белый и черный список приложений.
  • Наконец, доступ - возможность пользователя просматривать и удалять историю совместно используемого устройства.
  • Геолокация, пожалуй, потенциально самый большой нарушитель конфиденциальности в HTML5. Интересно, что она также является одним из наиболее широко реализованных API. Чтобы получить представление о мерах защиты конфиденциальности в API устройства, полезно посмотреть, как это реализуется в геолокации.

Раздел 4 предлагаемой спецификации API геолокации посвящен конфиденциальности. Он делит конфиденциальность на два направления: соображения для исполнителей API геолокации (создателей браузера) и для получателей информации о местоположении (разработчиков программного обеспечения).

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

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

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

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

Решения для защиты конфиденциальности

Консорциум World Wide Web разработал платформу Privacy Preferences Project (P3P) для решения такого рода проблем путем создания стандартного языка, с помощью которого веб-сайты могли бы обмениваться политиками конфиденциальности. С P3P браузеры могли информировать пользователей о политике сайта и даже позволять им отказаться от посещения сайтов с политикой, с которой они не согласны. Однако P3P не завоевал популярности у создателей браузеров, поэтому работа над ним была приостановлена.

Группа Защиты Конфиденциальности (Privacy Interest Group) консорциума W3C и Рабочая Группа Защиты от Слежения (Tracking Protection Working Group) представляют из себя две единственные силы по укреплению и стандартизации безопасности и конфиденциальности в Интернете и в HTML5.

Пожалуй, самым заметным достижением в конфиденциальности браузеров в последние месяцы является реализация спецификации, запрещающей отслеживание – Do Not Track (DNT), – всеми основными производителями браузеров. Некоторые браузеры, включая Internet Explorer 10, зашли так далеко, что включают DNT по умолчанию.

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

Хотя рекламная индустрия в целом сказала, что будет уважать предпочтения DNT, мало что было сделано в этом направлении. Предлагаемый в Калифорнии закон (California Right to Know Act) 2013г., например, позволил бы людям требовать у бизнеса отчета о том, что бизнес знает о них. После того, как ему противостояли лобби промышленных групп Интернета, закон был снят с рассмотрения, по крайней мере, до конца 2013 года.

При отсутствии добровольного жизнеспособного механизма для сайтов раскрывать свои политики, похоже, законодательство - единственное решение проблемы, которая только усугубляется, поскольку маркетологи собирают всё больше данных о пользователях. Руководитель Федеральной Торговой Комиссии, Эдит Рамирес, недавно призвала рекламную индустрию выполнить свои DNT-обещания. В то же время, законопроект о DNT был предложен в Конгрессе, и сейчас ему уделяется всё больше внимания, пока стандарт активно обсуждается.

HTML5 vs Flash

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

Разработчиками языков программирования постоянно внедряются все новые и новые проекты и технологии, чтобы дать возможность сайтам раскрывать весь свой потенциал и заменять многомиллионные рекламные кампании. Да, именно так: удобный для пользователей ресурс с ярким и необычным дизайном, находящийся в ТОП поисковой выдачи, эффективнее любой рекламы. Ей пользователи уже давно не верят, а вот своим глазам и ощущениям – да. Сейчас в руках веб-дизайнеров появился новый мощный инструмент, позволяющий им реализовывать все свои задумки и открывающий двери в мир светлого будущего сайтостроения. Речь идет о html5.

Html5 vs Flash: битва титанов

Flash остается в прошлом. И что бы ни говорили его сторонники, это так. Несмотря на все присущие новому стандарту html недостатки – от явной «необкатанности» до высокой ресурсоемкости, именно он вытеснит технологию Flash. Упрощенный сервис, отсутствие необходимости устанавливать всевозможные плагины, кросс-платформенность с кросс-браузерностью 5-го html являются его главными «плюсами» и залогом успеха. Да, нужно признать, что у Flash пока что есть некоторое преимущество в плане качества анимации, видео, векторных изображений. Но с каждым днем все больше сайтов, написанных с помощью html5, превосходят своих «флешевых» конкурентов. Нельзя говорить, что Flash в течение ближайшего времени канет в небытие (вернее, в область интерактивных презентаций, где, бесспорно, равных ему нет). Но и верить, что через 2-3 года html5 не покорит просторы Интернета – нелогично.

Html5: расширяя грани возможного

В чем секрет успеха html5? Возможно, в хорошей базе, ведь, по сути, это не новый язык программирования, а все тот же html, но уже со скриптовыми возможностями обработки картинок. Именно поэтому к нему активно интегрируется Mozilla, создавая Canvas 3D. Именно функция Canvas, реализованная в пятой версии html, дает возможность создавать сайты более высокого качества, расширяет возможности для их оформления, а также позволяет конструировать принципиально новые пользовательские интерфейсы. Говоря маркетинговым языком, html5 делает ресурсы «цепляющими», что важно для любой компании, заказывающей их создание, и желающей получить максимально быструю отдачу от вложений.

Если вкратце перечислять преимущества html5 для пользователей и веб-дизайнеров, то получится весьма интересный список:

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

 

Добавить комментарий

Защитный код
Обновить

Просьба! Если заметили опечатку или ошибку на этой странице, выделите ошибочный фрагмент текста и нажмите Ctrl+Enter