Блог Сергея Байдачного

Мой блог о технологиях

Archive for Сентябрь 2010

Pinned sites и Jump Lists

4 комментария

Данная функциональность позволяет еще сильнее интегрировать Internet Explorer 9 с пользовательским интерфейсом Windows 7. Идея состоит в том, что пользователь легко может закрепить ссылку на сайт на панели задач или в Program Menu. Для этого достаточно потянуть за закладку, в которой сейчас открыт интересующий пользователя сайт и переместить ее на желаемый интерфейсный элемент в Windows 7. Также можно выполнять перетягивание, перемещая иконку сайта из адресной строки:

image

Чтобы данная функциональность работала, сайт не обязан предоставлять какую-то дополнительную информацию. Но, если Вы все же решили показать пользователю немного больше, чем ссылку на Ваш сайт, то можете выполнить небольшие изменения в коде. Рассмотрим эти изменения на примере сайта dengi.ua, который наряду с kp.ua, football.ua и др., реализует описываемую функциональность в полной мере.

Итак, если перетянуть иконку сайта dengi.ua на Task Bar или в Program Menu, то можно будет увидеть следующую картину:

image

image

Как видите, со ссылкой на сайт было добавлено специальное меню, содержащее ссылки на другие подпроекты dengi.ua.

Давайте рассмотрим код сайта.

Первое, на что нужно обратить внимание, это несколько meta элементов, описывающих основную ссылку:

<meta name="application-name" content="Dengi.ua" />
<meta name="msapplication-tooltip" content="Сайт о личных финансах" />
<meta name="msapplication-starturl" content="
http://dengi.ua/" />

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

А вот следующие несколько элементов, описывают дополнительные пункты меню в разделе Задачи:

<meta name="msapplication-task" content="name=Полезные цифры;action-uri=http://dengi.ua/usefullDigits.html;   icon-uri=http://dengi.ua/favicon.ico" />
<meta name="msapplication-task" content="name=Зарплатный калькулятор;action-uri=
http://dengi.ua/sal_calc.html;  icon-uri= http://dengi.ua/favicon.ico" />

Вот и все. Такое небольшое расширение позволяет всем Вашим проектам уместиться на Панели задач пользователя.

Если Вы заинтересовались этой возможностью, то хочу добавить, что сайты можно размещать на панели задач и программным путем:

if (window.external.msIsSiteMode) {
  if (window.external.msIsSiteMode()) {
    // we are already in site mode
  }
  else {
    // add site to the Programs menu
    window.external.msAddSiteMode()
  }
}

Наконец, Вы можете выполнять наложение нескольких иконок программным путем:

window.external.msSiteModeSetIconOverlay(
http://host/overlay1.ico’,’Overlay 1′);
window.external.msSiteModeClearIconOverlay();

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

Реклама

Written by Sergiy Baydachnyy

15.09.2010 at 18:33

Опубликовано в Internet Explorer 9

Tagged with

Режим совместимости и Internet Explorer 9

4 комментария

Только что наступили на грабли, которые больно ударили по лбу, немного ошарашив. Если помните, то с выходом Internet Explorer 8 мы предлагали размещать следующий мета-тег в коде:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Эта штука позволяла открывать Ваш портал в режиме седьмого, не заботясь о тестировании на совместимость с Internet Explorer 8. Проблема в том, что часто этот элемент был размещен в конфигурационных файлах и на глаза не бросался.

Так вот, реализуя код на порталах, который должен был хорошо работать с новыми возможностями Internet Explorer 9 мы столкнулись с проблемой – не работает…. И только через час разберательств… “Семен Семеныч….”, а мета-тег убрать то забыли. В результате IE 9 переходит в режим IE 7, ну а там никакого видео и т. д…. Иными словами, если не работает, а должно, то посмотрите, может нужно просто переписать мета-тег.

Written by Sergiy Baydachnyy

15.09.2010 at 16:18

Опубликовано в Internet Explorer 9

Tagged with

HTML 5 и Internet Explorer 9: семантические элементы

2 комментария

При реализации HTML 5 возможностей Internet Explorer 9 было проведено специальное исследование того, что разработчики используют прямо сейчас и в каком объеме. Для этой цели сделали анализ более 700 Top сайтов, и разработчики Internet Explorer 9 приступили к работе.

Естественно, что реализовать «все и сразу» возможности нет. Дело не в скорости работы над браузером, а в отсутствии стандартов HTML 5. Реализовывать же элемент одним образом, а в следующей версии выпускать иную реализацию в Internet Explorer нельзя. Ведь этот браузер позиционируется как стабильный и безопасный инструмент. Никто не будет выпускать семь версий Internet Explorer в течении года и предлагать пользователям перейти на последнюю, так как предыдущие шесть реализуют что-то не так. Поэтому, если что-то появляется в Internet Explorer, то это смело можно использовать везде (а если у кого-то функциональность работает коряво, то они быстро подтянутся).

Но отвлечемся от демагогии и перейдем к вопросу работы с такими семантическими элементами как section, header, article, footer и т. д., то есть к элементам разметки, позволяющим сделать последнюю более читабельной и открыть новые возможности для поисковых систем (ведь теперь четко видно, где заголовок статьи, где завершение страницы и т. д.). Лично я, когда начал читать спецификацию HTML 5, тут же усомнился в необходимости данных элементов. Ведь для статической страницы они работают замечательно. Но ведь сегодняшний код будет подвергаться анализу с большим трудом, даже с этими элементами. В любом случае, Internet Explorer 9 их НЕ реализует.

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

А вот и пример:

<!DOCTYPE html>
<html>

<head>
<title>Internet Explorer 9</title>
<style type="text/css">
myel
    {
        background:red;
        border:3pt blue solid;   
    }
}
</style>
</head>

<body>
<myel>Hello</myel>
</body>
</html>

Если предыдущие версии Internet Explorer не учитывали этот элемент, как элемент разметки и не применяли стили к нему, то в девятой версии мы можем увидеть следующие результаты:

image

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

Written by Sergiy Baydachnyy

15.09.2010 at 08:42

Опубликовано в Internet Explorer 9

Tagged with

HTML 5 и Internet Explorer 9: новые псевдоклассы и псевдоэлементы

3 комментария

Не знаю, почему это назвали селекторами. Я бы назвал это триггерами, но независимо от названия, эта штука работает в Internet Explorer 9. Итак, согласно спецификации w3c.org (http://www.w3.org/TR/css3-selectors/) разработчики теперь могут пользоваться селекторами. Сразу перехожу к примеру:

<!DOCTYPE html>
<html>
<head>
<title>Internet Explorer 9 beta</title>
<style type="text/css">
p:first-letter
    {
    font-size:xx-large;
    }
}
</style>
</head>

<body>
    <p>Hello</p>
</body>
</html>

В результате работы этого примера, на экране отобразиться:

image

Таким образом, добавив к описанию стиля элемента p псевдоэлемент :first-letter, мы определили стиль, который будет применяться при возникновении некоего события – первая буква в элементе p.

А вот и еще один пример:

<!DOCTYPE html>
<html>
<head>
<title>Internet Explorer 9 beta</title>
<style type="text/css">
a
    {
    border-radius: 10em 10em 0em 0em/ 15em 15em 0em 0em;
    border:3px red solid;
    }
   
a:hover
    {
    background:yellow;
    }
}
</style>
</head>

<body>
    <a href="
http://ietestdrive.com">&nbsp;&nbsp;Internet Explorer 9 beta&nbsp;&nbsp;</a>
    <a href="
http://www.microsoft.com">&nbsp;&nbsp;Microsoft&nbsp;&nbsp;</a>
</body>
</html>

При наведении мышкой на отдельные табы, их фон будет меняться на желтый (сорри, я не дизайнер).

image

Раньше, чтобы достигнуть такого эффекта, нужно было писать JavaScript, а теперь все просто.

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

Чтобы посмотреть все псевдоэлементы и псевдоклассы, обратитесь к спецификации. Тема достойна отдельной книги.

Written by Sergiy Baydachnyy

14.09.2010 at 19:07

Опубликовано в Internet Explorer 9

Tagged with

HTML 5 и Internet Explorer 9: Border Radius

11 комментариев

Начну обзор возможностей для разработчиков в Internet Explorer 9 с border radius. Речь идет о новых стилях, позволяющих предать «закругленную» форму бордюру у любого элемента. Открыв свеженькую книгу по HTML 5, я обнаружил, что border radius в альтернативных браузерах описывается атрибутами, которые полностью отличаются от тех, что описаны на w3c.org (http://www.w3.org/TR/css3-background/#the-border-radius). Поэтому, не долго думая, я открыл Internet Explorer 9 и попробовал использовать текущие рекомендации. Вот первый пример, который мне удалось написать:

<!DOCTYPE html>
<html>
<head>
<title>Internet Explorer 9 beta</title>
<style type="text/css">
a
{
border-radius: 10em;
border:3px red solid;
}
}
</style>
</head>
<body>
<a href="
http://ietestdrive.com">Internet Explorer 9 beta</a>
</body>
</html>

Работает! На экране отобразилось то, что я и ожидал:

image

Если немного модифицировать код:

a
{
border-radius: 10em / 20em;
border:3px red solid;
}

То наш бордюр немного «сплющивается»:

image

Это происходит от того, что border-radius позволяет задать закругления с помощью эллипсов, которые в свою очередь описываются двумя радиусами. Поэтому, если мы задаем одно значение, то закругления описываются с помощью окружностей. А вот если мы задаем два значения, разделяя их косой чертой, то тут уже появляется настоящий эллипс.

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

<!DOCTYPE html>
<html>
<head>
<title>Internet Explorer 9 beta</title>
<style type="text/css">
a
    {
    border-radius: 10em 10em 0em 0em/ 15em 15em 0em 0em;
    border:3px red solid;
    }
}
</style>
</head>

<body>
    <a href="
http://ietestdrive.com">&nbsp;&nbsp;Internet Explorer 9 beta&nbsp;&nbsp;</a>
    <a href="
http://www.microsoft.com">&nbsp;&nbsp;Microsoft&nbsp;&nbsp;</a>
</body>
</html>

image

Тут нули указывать обязательно, либо вместо них будут подставлены 10 и 15 соответственно.

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

border-top-left-radius:     10em 15em;
border-top-right-radius:    10em 15em;
border-bottom-right-radius: 10em 15em;
border-bottom-left-radius:  10em 15em;

Вот такой border-radius.

Written by Sergiy Baydachnyy

14.09.2010 at 18:17

Опубликовано в Internet Explorer 9

Tagged with