Кроссбраузерное XSLT-преобразование в JavaScript

Столкнулся я однажды с необходимостью отобразить XML-данные погодного информера gismeteo посредством XSLT-шаблона. Причем возникла острая необходимость сделать это через JavaScript, так как на предлагаемом бесплатном хостинге не было поддержки PHP, а значит отпарсить XML на сервере не представлялось возможным.

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

function transformXslt(source,style) {
    if(window.ActiveXObject)
    {
        return source.transformNode(style);
    }
    else if(window.XSLTProcessor)
    {
        var xsltProcessor=new XSLTProcessor();
        xsltProcessor.importStylesheet(style);
        var resultDocument = xsltProcessor.transformToDocument(source);
        var xmls = new XMLSerializer();
        return xmls.serializeToString(resultDocument);
    }
    else
    {
        alert("Преобразование XML не поддерживается браузером");
        return null;
    }
}

Что мы здесь видим?

А видим мы здесь кроссбраузерное решение данной задачи. XSLT-преобразование в IE производится посредством метода transformNode XML-документа. Во всех остальных браузерах(FF, Chrome, Safari, Opera) XSLT-преобразование делается совсем по-другому. И делается оно посредством объекта XSLTProcessor, в который методом importStylesheet загружается файл стилей XSLT, а результирующий документ генерируется методом transformToDocument(xml). И напоследок мы поручим объекту XMLSerializer сгенерить строковое представление результирующего XML-документа.

И напоследок еще одна полезная, и такая же кроссбраузерная, функция, которая преобразует строковое представление XML (и XSLT)-документа собственно в сам документ, готовый для его дальнейшего использования.

Кросдоменный JavaScript (JSONP)

Итак, мы уже научились использовать объект XMLHttpRequest для фоновой загрузки данных с сервера, этот подход подробно описан в статье AJAX. 1 – Что это такое?. Однако, приведенный метод обладает одним недостатком - он не позволяет делать кроссдоменные запросы, то есть скрипт расположенный на домене easy4web.ru не может обратиться к домену vision4web.ru, а иногда этого так хочется. И здесь нам на помощь придет метод динамически подгружаемых скриптов <SCRIPT>.

Как известно, HTML-элемент <SCRIPT> может загружаться и с чужого домена, то есть аттрибут src у него может указывать вообще на любой домен. При этом, сразу после загрузки в нашу страницу, скрипт начнет выполняться. Таким образом, вставив в этот скрипт вызов некой заранее известной функции, мы можем организовать оповещение страницы о том, что скрипт загружен и готов к выполнению работы. А данные для для скрипта можно упаковать в пакет JSON. Такой комбинированный подход носит имя JSONP (JSON with padding).

На клиентской стороне мы выполняем такой код:

  var script = document.createElement("script");
  script.src = 'http://mydomain.ru/script.php?callback=func1';
  script.type = 'text/javascript';
  document.body.appendChild(script);

А по адресу http://mydomain.ru/script.php поселим вот такой код:

<?php
echo($_REQUEST['callback'].'({"result":"Успешно!"})');
?>

На клиентской стороне также существует такой callback (то есть функция, которая сработает после загрузки скрипта):

function func1(response)
{
  alert(response.result);
}

Протестировать рабочий пример можно здесь: http://easy4web.ru/samples/jsonp/index.html, а скачать код вышеприведенного примера можно здесь: http://easy4web.ru/images/jsonp.zip

В тестовом примере, как можно увидеть, не происходит кроссдоменной загрузки - мы загружаем с того же домена, где расположен скрипт. Но вы можете заменить URL в этом месте кода:

<input type="button" value="Получить JSONP"
 onclick="getJSONP('http://easy4web.ru/samples/jsonp/handler.php',onSuccess)"/>

Начинаем создавать набор сервисов easyAPI

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

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

Что это будет?

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

Короче говоря, от слов к делу!

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

Он живет здесь http://easy4web.ru/api/geoip/get.php

Поддерживаемые параметры: p - формат отдаваемых данных:

• p=j - результат - JSON
• p=a - результат - массив вида cc2=RU;cc3=RUS;cty=Moskow
• p=x - результат - XML
• p=ax - результат - массив обернутый в XML, вида <easy>cc2=RU;cc3=RUS;cty=Moskow</easy>
• p=jx - результат - JSON обернутый в XML, вида <easy>cc2=RU;cc3=RUS;cty=Moskow</easy>

• f=f - длинные имена, вида country_code
• f=s - короткие имена, вида cc2

Если я желаю получить информацию по собственному местоположению в формате JSON с длинными именами полей, я вызову URL http://easy4web.ru/api/geoip/get.php?p=j&f=f

В следующей статье на эту тему я расскажу о том, как можно применить данный сервис при вызове его из PHP-программы, и из JavaScript на удаленном сервере. Пока сервис easy.GeoIP находится в стадии тестирования, возможны некоторые изменения в его работе, о которых я буду предупреждать на сайте.

AJAX с помощью jQuery и ASP.NET web-сервисов

Если вы создаете сайты под ASP.NET, то возможно вам уже довелось использовать AJAX-framework, предоставляемый Microsoft. Тот самый, что использует ScriptManager

Этот метод достаточно прост и удобен, если бы не одно "но" - он весит 132 Кб. И обладает еще одним интересным свойством: если в нашем проекте есть несколько страниц, использующих AJAX, то каждая из них будет заново загружать этот скрипт, потому что при загрузке скрипта на странице используется примерно следующий URL http://domainname/ScriptResource.axd?d=TvjJs2RlM8MX3pIUhEsdnZKUzGh-9Wr9nvNBZJbxf-xzq-Wvzbpj6FfMJqZqOPR8Pku52J2zBqleUlYtVE8XCyfyo3kcbSnhbwzYc2LkdfQ1&t=ffffffffee41303f и для каждой страницы в пределах вашего проекта будет свой ScriptManager, а значит и свой уникальный ID в query-string. А значит скрипт этот для каждой страницы будет браться не из кэша, а запрашиваться заново с сервера.

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

Собственно, модификации пришлось подвергнуть как сами клиентские JavaScript-ы, так и методы, вызываемые на стороне сервера. Связано это с тем, что мне хотелось передавать в качестве параметров для web-сервиса сложные объекты, а не просто строки и целые значения. И получать в ответ хотелось тоже сложные объекты, а не просто строки.

Все это можно легко и просто сделать, передавая как в ту так и в другую сторону все же строки, но строки в формате JSON, который является родным для JavaScript. Да к тому же ASP.NET обладает встроенными возможностями сериализации/десериализации JSON.

Правда, для сериализации объекта в JSON на клиентской стороне пришлось использовать еще одну дополнительную библиотеку json2.js. Таким образом, обе библиотеки весят около 67 Кб. Да плюс ко всему в случае нескольких ajax-страниц в проекте, скрипт загрузится всего один раз, и для остальных страниц будет браться из кэша браузера.

Но от слов - к делу!

Полный текст статьи "AJAX с помощью jQuery и ASP.NET web-сервисов" с образцами кода и со ссылкой на архив с готовым проектом Вы можете прочитать на сайте "Веб-разработка? Это просто!"

XML+XSLT на примере XML-погоды от gismeteo.ru

Итак, выполняя свое обещание, публикую статью, посвященную отображению информера погоды gismeteo.ru.

Как вы помните, в прошлый раз в статье Парсинг XML в JavaScript на примере XML-погоды от gismeteo.ru мы написали длинный (в нескольких местах запутанный и непонятный) скрипт на JavaScript, который радостно преобразовывал XML-Данные от ГИС-метео в HTML-формат, который мы и отображали в нашем браузере.

Этот вариант имел ряд недостатков: 1) При отключенном JavaScript в браузере пользователя мы вообще ничего не увидим. 2) Шаблоны, используемые в этом скрипте были настолько запутанные, что иногда и я сам терялся в том, что значит каждый из тегов этого шаблона. 3) И вообще это не модно и несовременно!

Ведь есть технология лучше: XML+XSLT !

Вот выдержка из wikipedia:

XSLT (Extensible Stylesheet Language Transformations) — часть спецификации XSL, задающая язык преобразований XML-документов. Спецификация XSLT является рекомендацией W3C.

При применении таблицы стилей XSLT, состоящей из набора шаблонов, к XML-документу (исходное дерево) образуется конечное дерево, которое может быть другой XML-структурой, HTML-документом или обычным текстом. Правила выбора (и, отчасти, преобразования) данных из исходного дерева пишутся на языке запросов XPath.

XSLT имеет множество различных применений, в основном в области web-программирования и генерации отчётов. Одной из задач, решаемых языком XSLT, является отделение данных от их представления, как часть общей парадигмы MVC (англ. Model-view-controller). Другой стандартной задачей является преобразование XML-документов из одной XML-схемы в другую.

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

Собственно, эта статья подразумевается именно как практическое введение в XSLT, а поэтому я сразу приведу результирующий XSLT-шаблон, а затем буду его построчно объяснять. Вот он.

<?xml version="1.0" encoding="UTF-8" ?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
<xsl:output method="xml" indent="yes" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"/>

 <!--Шаблон, преобразующий номер дня недели в его текстовое 
представление-->
 <xsl:template name="get-day-of-the-week-abbreviation">
 <xsl:param name="day-of-the-week"/>
 <xsl:choose>
 <xsl:when test="$day-of-the-week = 1">Вс</xsl:when>
 <xsl:when test="$day-of-the-week = 2">Пн</xsl:when>
 <xsl:when test="$day-of-the-week = 3">Вт</xsl:when>
 <xsl:when test="$day-of-the-week = 4">Ср</xsl:when>
 <xsl:when test="$day-of-the-week = 5">Чт</xsl:when>
 <xsl:when test="$day-of-the-week = 6">Пт</xsl:when>
 <xsl:when test="$day-of-the-week = 7">Сб</xsl:when>
 <xsl:otherwise>?</xsl:otherwise>
 </xsl:choose>
 </xsl:template>

<?xml version="1.0" encoding="UTF-8"?>
<config>
<control speed="10" indent="24.9"/>
<sites>
<site name="веб-разработка" link="easy4web.ru"
url="http://easy4web.ru/" descr="веб-дизайнер и
веб-программист срывают оковы, освещают темные
места" height="38"/>
<site name="Яндекс" link="yandex.ru" url="http://yandex.ru/" descr="
Поиск от Яндекс. Найдется все!" height="38"/>
<site name="почта от google" link="gmail.com" url="http://gmail.com/"
 descr="Бесплатная почта от google. Попробуй, не пожалеешь."
height="38"/>
</sites>
</config>

package inc{
public class SiteItem extends Object {
public var pName:String;
public var pLink:String;
public var pURL:String;
public var pDescr:String;
public var pHeight:Number;
public function SiteItem(p_Name:String, p_Link:String, p_URL:String,
p_Descr:String, p_Height:Number){
pName=p_Name;
pLink=p_Link;
pURL=p_URL;
pDescr=p_Descr;
pHeight=p_Height;
}
}
}

Хаки для браузеров

Сегодня мне хотелось бы поговорить о так называемых «css-хаках». CSS-хаки используют тогда, когда один конкретный браузер надо заставить отображать некий блок разметки не так, как хотелось бы самому браузеру. Сразу оговорюсь, что использовать хаки нужно только тогда, когда это действительно необходимо. Скажем, всеми нами горячо любимый Internet Explorer (седьмой версии) имеет свои, сугубо специфичные представления о работе со списками. И иногда надо только ему объяснить, что он неправ:-)

Вообще задача раздельных CSS для разных браузеров имеет несколько путей решения. Один из них — встроить в <head></head> php-, или java-скрипт, определяющий тип браузера, и отсылающий конкретный браузер к предназначенной для него стилевой таблице. Второй — если проблемы возникают только с IE — так называемые «условные комментарии». В <head></head> задается конструкция вида:

<!–[if IE]><link rel=”stylesheet” href=”css/ie.css” type=”text/css” media=”screen” /><![endif]–>

или для конкретных версий Explorer'а:
<!–[if IE7]><link rel=”stylesheet” href=”css/ie7.css” type=”text/css” media=”screen” /><![endif]–>
<!–[if IE6]><link rel=”stylesheet” href=”css/ie6.css” type=”text/css” media=”screen” /><![endif]–>

И, наконец, третий путь — CSS-хаки.

Самый удобный в плане хаков браузер - Firefox (и относящиеся к его семейству), так как имеет свою группу css-классов, начинающуюся с перфикса @-moz- Например:

 -moz-document url-prefix() {
  .style {background: #F00;}
}

css-rule, x:-moz-any-link{

}

Для Opera:

 media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) {
 .style {background: #F00;} /* только для Opera */
}

html:first-child {} /* только для Opera */
html:first-child .style {
background: #F00; /* только для Opera < 9.5 */
}

Также, можно создать специальный файл стилей для Opera и подключить его следующим образом:
<head>
<link rel=”stylesheet” href=”css/opera.css” type=”opera/css” media=”screen” />
</head>

Google Chrome и Safari по способу работы с блочной моделью напоминают Opera и с высокой долей вероятности можно предполагать, что если ваша верстка нормально выглядит в Опере, то и в Хроме с Сафари с нею тоже все будет нормально. Однако, на всякий случай, хаки:

body:last-child:not(:root:root) .style {
  background: #F00;
}

Ну, и наконец, хак для IE. Почему только один? По опыту решения конкретных задач могу сказать, что все проблемы верстки, с которыми мне приходилось сталкиваться, были одинаковыми у наиболее распространенных версий IE (6,7). Поэтому я пользовался (если пользовался) универсальным хаком, так называемым «holy hack»:

html {
  background: #f00; (это понимают все браузеры)
  * background: #0f0; (а это только ослики)
}

Напоследок напомню, что практически все хаки влияют на валидность полученного кода, поэтому, если есть возможность - надо обходиться без них. А такая возможность есть почти всегда, и исключение составляет только горячо любимый всеми нами Internet Explorer:-)

Статью Хаки для браузеров а также другие статьи, посвященные веб-разработке вы сможете на сайте Веб-разработка? Это просто!

Парсинг XML в JavaScript на примере XML-погоды от gismeteo.ru

Итак, заинтересовала меня тема, как распарсить XML-файл посредством JavaScript. Немного порыскав в поисковиках наткнулся на весьма познавательную статью по этой теме XML в Microsoft Internet Explorer 5.0. Есть у этой статьи маленький недостаток - она посвящена только IE, а мы в нашем блоге твердо решили писать только кроссбраузерный код. Однако, для начала хватило и этой статьи, сначала весь код был написан для IE, и затем была осуществлена безуспешная попытка запустить его также в Opera, Mozilla, Chrome. Но как я уже говорил "не боги горшки обжигают", все некроссбраузерные баги были успешно найдены и исправлены. Это р-раз.

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

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

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

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

Итак, что же такое XML? Wikipedia утверждает, что:

XML (eXtensible Markup Language — расширяемый язык разметки) — рекомендованный консорциумом W3C язык разметки, представляющий собой свод общих синтаксических правил. XML — текстовый формат, предназначенный для хранения структурированных данных, для обмена информацией между программами, а также для создания на его основе более специализированных языков разметки. Целью создания XML было обеспечение совместимости при передаче структурированных данных между разными системами обработки информации, особенно при передаче таких данных через Интернет.

Визуально структура XML может быть представлена как дерево. Важнейшее обязательное требование состоит в том, что документ должен иметь только один корневой элемент (в нашем случае это элемент MMWEATHER). Это значит, что данные всего документа должны быть расположены между единственным начальным корневым тегом и соответствующим ему конечным тегом.

Остальная часть XML-документа состоит из вложенных элементов, которые могут иметь атрибуты и содержимое. Элемент обычно состоит из пары тегов (открывающего и закрывающего), обрамляющих другие элементы. Открывающий тег состоит из имени элемента в угловых скобках, например, <FORECAST> ; закрывающий тег состоит из того же имени в угловых скобках, но перед именем ещё добавляется косая черта, например, </FORECAST>. Содержимым элемента называется всё, что расположено между открывающим и закрывающим тегами, включая текст и другие вложенные элементы.

Кроме содержания у элемента могут быть атрибуты — пары имя-значение, добавляемые в открывающий тег после названия элемента. Например в случае <PHENOMENA cloudiness="2" precipitation="10" rpower="0" spower="0"/> элемент PHENOMENA имеет 4 атрибута cloudiness, precipitation, rpower и spower имеющие соответственно значения 2, 10, 0, 0.

Итак, со структурой XML-файла более-менее разобрались. Осталось только понять, каким образом все это богатство обрабатывать в JavaScript. Собственно, в статье XML в Microsoft Internet Explorer 5.0 можно обо всем этом прочесть, но я намерен вкратце обрисовать ниже основные приемы анализа XML-файлов в контексте поставленной в начале статьи задачи - разбора XML-документа, содержащего прогноз погоды на сутки от gismeteo.

Продолжение статьи читайте на сайте Веб-разарботка? Это просто!

Облегчая себе верстку.

Всем нам давно известно, что каждый браузер имеет свои дефолтные значения CSS для многих объектов, таких как, скажем, список, параграф, границы и тому подобное (подробнее, например, тут). Для того, чтобы верстать действительно кроссбраузерно нам необходимо сбросить стандартные значения на некий общий знаменатель, а потом прописать все заново.

Некий сознательный гражданин Эрик Майер предложил следующую версию стилей для обнуления всех значений:

Смотреть на сайте easy4web.ru

В принципе, само по себе это правило достаточно хорошо за парой исключений. А именно - спорным является убирание рамки для псевдокласса :focus (это который рисует рамку вокруг нажатых ссылок), так как такими ссылками нельзя будет управлять с клавиатуры, нельзя будет понять, что они в данный момент в фокусе. Также спорным выглядит использование парных кавычек "", так как в русской типографике используются обычно кавычки елочки «», вызываемые кодами &#171; и &#187;

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

Спутниковые карты на Вашем сайте

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

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

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

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

Итак, вашим первым шагом будет посещение вот этого адреса http://code.google.com/intl/ru/apis/maps/ . В принципе там все написано, но если читать не хочется, то я расскажу, что делать дальше.

Итак, для начала вам нужно иметь аккаунт на google.com. Чтобы создать аккаунт, нужно зайти на https://www.google.com/accounts/NewAccount/, заполнить необходимые поля (причем, адрес почты может быть на любом почтовом сервере) и нажать «Создайте мой аккаунт». Затем на указанный адрес будет выслано письмо с подтверждением, в котором нужно пройти по предложенной ссылке. Поздравляю! Теперь у вас есть аккаунт google и вы можете переходить к следующему шагу.

Теперь на странице http://code.google.com/intl/ru/apis/maps/signup.html вам необходимо получить ключ API для работы с картами google. Здесь вы ставите галочку «Я ознакомлен и согласен с условиями и положениями», а в поле «URL-адрес моего веб-сайта» прописываете именно тот URL, на котором вы собираетесь использовать карты от google. Вводить весь путь к странице необязательно, достаточно указать доменное имя сайта. Если вы собираетесь для начала отлаживать тестовую версию на локальном веб-сервере, то можете со спокойной душой ввести в этом поле «http://localhost», вообще, вы можете на один google-аккаунт получить несколько API-ключей для работы с различными урлами. Не стесняйтесь, денег за это никто с вас не возьмет.

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

На той же странице, где вы получили свой API, ниже можно увидеть текст JavaScript’а, который вы можете использовать на ваших страницах, на которых планируете отображать карты google. Он выглядит приблизительно так:

Этот скрипт загружает сам движок maps.google. Его нужно вставить в секции <head> тех страниц, на которых вы планируете отображать карты.

Ну а вот собственно разметка страницы со встроенной в нее картой:

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Пример API Карт Google на языке JavaScript </title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>

На этой странице присутствуют следующие элементы:

1. DIV map_canvas, который собственно и будет содержать карту. Карта будет иметь ровно те размеры, что были заданы этому DIV'у до инициализации карты. Кстати, размер карты можно изменить и после инициализации, но при этом после изменения размера контейнера нужно вызвать для объекта map метод checkResize().
2. Как видим в событии onload объекта BODY стоит вызов функции initialize(), которая объявлена выше.
3. Функция initialize() сначала проверяет, совместима ли версия браузера пользователя с картами google и если все в порядке, то создается объект map типа GMap2, в конструктор которого в качестве параметра передается объект-контейнер, то есть тот самый DIV, о котором шла речь в пункте 1. Затем центр карты устанавливается в некоторые координаты, чтобы пользователь увидел перед собой не бескрайнее синее море, а некий осмысленный объект. В функцию setCenter передаются два параметра: координаты центра в виде объекта GlatLng(широта, долгота) и начальный масштаб карты, чем ближе это число у нулю, тем большая часть мира поместится на экране пользователя, чем больше это число тем подробнее пользователь увидит требуемый район карты. Максимальное значение масштаба 19.
4. В методе onunload объекта BODY вызывается функция GUnload(), которая корректно освобождает все ресурсы браузера, занятые под отображение карт.
5. И не забудьте вместо значения key=abcdefg вставить свой собственный API key, иначе работать ваша карта не будет.

Ну что ж. В результате выполнения этого урока вы создали веб-страницу с внедренной в нее картой google, которую вы можете просмотреть при помощи мыши, используя обычный Drag’n’Drop, изменение масштаба карты осуществляется с помощью двойного щелчка на карте: левой кнопкой – приближение, правой кнопкой – отдаление.

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

Прочитать статью Спутниковые карты на Вашем сайте, а также другие статьи посвященные веб-разработке вы можете на сайте Веб-разработка? Это просто!

Красивое выпадающее меню. Полупрозрачное и с тенью.

Вот такое, как здесь. Нравится?:-) Научить, как делать нечто подобное? Устраивайтесь поудобнее, мы начинаем.

Начать следует с того, что сейчас большинство выпадающих меню (как горизонтальных, так и вертикальных) делают из несортированных списков (тег <ul> (сокращение от unordered list)). В совокупности с свойствами display:none и display:block (последнее для псевдокласса :hover, хотя, можно сделать и так, чтобы пункты меню прятались при наведении на них курсора мыши, да) получаются красивые и динамичные менюшки.

В данном меню html код выглядит так:

<div id="shad">
<ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a>
    <div id="shad2">
    <ul>
        <li><a href="#">История</a></li>
        <li><a href="#">Команда</a></li>
        <li><a href="#">Офис</a></li>
      </ul>
      </div>
    </li>
    <li><a href="#">Услуги</a>
    <div id="shad1">
    <ul>
        <li><a href="#">Веб-дизайн</a></li>
        <li><a href="#">Интернет</a></li>
        <li><a href="#">Хостинг</a></li>
        <li><a href="#">Доменные имена</a></li>
      </ul>
      </div>
    </li>
    <li><a href="#">Контакты</a>
    <div id="shad3">
    <ul>
        <li><a href="#">Телефон</a></li>
        <li><a href="#">E-mail</a></li>
        <li><a href="#">Почта</a></li>
    </ul>
    </div>
    </li>
  </ul>
</div>

Если посмотреть внимательно, то мы увидим, что основой меню является ненумерованный список (как я и говорил). В отдельные пунты меню вложены другие списки (это субменюшки, которые будут распахиваться при наведении курсора мыши). Оборачивающие <div id="shade#"> нам нужны для размещения теней от меню. Тут я использовал совсем простое визуальное оформление, просто чтобы донести идею. Естественно, ваша фантазия может быть безграничной:-)

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

Теперь откроем Photoshop и создадим новый файл высотой в 1 пиксель, а шириной равной ширине блоков нашего меню. Зальем его цветом и настроим прозрачность. А затем сохраним как png24 (с альфа-каналом). Это будет бэкграунд всех наших пунктов меню. Теперь создадим файлы по количеству блоков, а по ширине и высоте равные соответствующим блокам (вы ведь замерили высоту блоков?:-) ). Зальем их желаемым цветом, настроим прозрачность и мягкой стеркой дадим растушевку на краях, чтобы получились мягкие переходы. У меня вышло вот так. Тени тоже готовы. Теперь нам осталось задать css-стили:

 #shad {
    background: url(./bg_s.png) bottom right no-repeat;
    padding: 0;
    width: 157px;
    height: 107px;
}

  #shad1 {
    background: url(./bg_s.png) bottom right no-repeat;
    padding: 0;
    width: 157px;
    height: 107px;
}

  #shad2 {
    background: url(./bg_s1.png) bottom right no-repeat;
    padding: 0;
    width: 157px;
    height: 83px;
}

  #shad3 {
    background: url(./bg_s1.png) bottom right no-repeat;
    padding: 0;
    width: 157px;
    height: 83px;
}

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    border-bottom: 1px solid #00ff3c;
}

ul li {
    position: relative;
}

li ul {
    position: absolute;
    left: 0px;
    top: 0;
    display: none;
}

li div {
    position: absolute;
    left: 149px;
    top: 0;
    display: none;
}

ul li a {
    display: block;
    text-decoration: none;
    color: #229922;
    font-weight: bold;
    background: url(./bg.png);
    padding: 5px;
    border: 1px solid #00ff3c;
    border-bottom: 0;
}

li:hover div {
    display: block; 
}

li:hover ul {
    display: block; 
}

Итак, по пунктам. В моей стилевой таблице для начала заданы контейнеры, которые будут вмещать тени. Потом, мы сбрасываем на всех ненумерованных списках внешние и внутренние отступы, буллеты, задаем нижнюю границу нужного цвета. Далее, мы даем всем элементам списка position:relative, чтобы список вложенный в пункт вышестоящего списка наследовал его позицию в пространстве. Затем, спискам, вложенным в вышестоящий элемент списка даюм абсолютную позицию, чтобы они не раздвигали список-родитель, и задаем им позицию относительно вмещающего элемента списка. А также скрываем их пока от любопытных глаз:-) Следующим шагом мы задаем позиционирование контейнерам div, вложенным в вышестоящий пункт списка, и тоже скрываем их (мы ведь не хотим, чтобы тени ото всех подменю постоянно мозолили нам глаза?:-) ). Настраиваем стиль ссылок. Даем отступы, границы и прописываем наш полупрозрачный фон. И, наконец, говорим браузеру, что при наведении курсора мыши на элемент списка нам хотелось бы увидеть все вложенные контейнеры. И, вуаля. Наше меню работает.

Готовый пример можно скачать, и поковырять самостоятельно. Успехов!

Немного новостей

Здравствуйте, уважаемые друзья. Мы просим у вас прощения за отсутствие. В свое оправдание можем сказать, что все это время мы не маялись дурью, а создавали и запускали свою студию. Вот она: vision4web.ru. Теперь мы не только пишем о создании сайтов, но и создаем их:-)

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

Палки и плашки. О мусоре на странице.

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

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

Под палками я понимаю либо горизонтальные разделители (<HR>), которые были введены в спецификацию HTML в эпоху web1.0 (немногим позже вымирания динозавров, да-да) и предназначались для смысловой отбивки блоков текста (аналогично типографской линии, или звездочкам) друг от друга; либо css-свойство border (граница элемента), достаточно часто используемое не по назначению.

Примеры плохого использования палок: пример плохого использования палок и еще один пример плохого использования палок

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

Почти такая же беда и с плашками: пример плохого использования плашек и еще один пример плохого использования плашек

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

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

Прочитать полный текст статьи Палки и плашки. О мусоре на странице., а также другие статьи посвященные веб-разработке Вы можете на нашем сайте Веб-разработка? Это просто!. Мы ждем Ваших комментариев.

Итак, ваш свеженький сайт уже опубликован в сети, а посетителей - кот наплакал. И в душе поднимается обида на все человечество: "Как же так! На мой отличный сайт никто не ходит?". А как иначе, ведь о нем еще пока мало кто знает. И теперь нам нужно добиться, чтобы люди узнали о нем. Понятное дело, на рекламу у нас денег нет.Чтобы люди имели возможность узнать о нас, есть несколько замечательных возможностей, одна из них – сервисы социальных закладок.

Закладка – ссылка на интересный, значимый по Вашему мнению сайт.

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

Итак, многочисленные эксперименты веб-мастеров с социальными закладками выявили несколько основных фактов:

1) Влияние прогона по социальным закладкам никак или почти никак не влияет на тИЦ. Мнения разных веб-мастеров относительно этого разнятся, кто-то утверждает, что достиг незначительного роста тИЦ, кто-то разочарованно сообщил, что после очередного апа яндекса тИЦ остался на прежнем нулевом уровне.

2) Прогон по социальным закладкам дает кратковременный рост посещаемости вашего сайта (3-5 дней), после чего посещаемость снова падает. Хотя здесь нужно учитывать то, насколько вообще интересен Ваш сайт. Ведь если пользователь, пришедший к Вам с закладок, обнаружит для себя что-то интересное, то он и впредь будет заходить к Вам. Если же ничего интересного для себя он там не обнаружил, попрощайтесь с ним навсегда.

3) Также не обнаружено существенное влияние прогона по закладкам на PR ресурса.

4) Прогон по закладочным сервисам помогает поднять позицию сайта в поисковиках. Причем, лучше всего показатели по Google, далее идет Yandex, затем Rambler.

Таким образом есть реальные шансы лишь увеличить посещаемость сайта. Чтобы всплеск посещаемости не носил кратковременного характера, необходимо периодически добавлять на сервисах новые закладки, причем не постить туда одну и ту же ссылку с одним и тем же описанием, а поступать творчески. То есть 2-3 раза в неделю публиковать новые закладки на разные страницы Вашего сайта. Если у Вас, например, блог, и Вы хотя бы два-три раза в неделю публикуете на блоге новый пост, то можете сразу же дублировать его ссылкой на пост в социальных закладках. Обычно новые закладки публикуются наверху в списке закладок, пока их не вытеснят вниз более свежие, а значит, есть шанс, что Вас кто-нибудь успеет заметить и, заинтересовавшись предложенной темой, перейдет на Ваш сайт.

С точки зрения тИЦ, постоянная публикация новых закладок – бессмысленна, ведь при его подсчете учитывается лишь факт наличия цитирования с домена, то есть всы ссылки с домена «клеятся», на PR возможно слабое влияние, но больше +1 ждать не приходится.

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

А вот Вам список наиболее популярных в рунете закладочных сервисов:

http://memori.ru/
http://moemesto.ru/
http://toodoo.ru/
http://myscoop.ru/
http://www.ruspace.ru/
http://text20.ru/
http://newblogs.ru/
http://news2.ru/
http://zakladki.yandex.ru/
http://smi2.ru/
http://www.gazeta.lv/published
http://www.mister-wong.ru/
http://webmarks.ru/
http://www.ru-marks.net/
http://bobrdobr.ru/main.html
http://google.ru/Bookmarks
http://www.100zakladok.ru/
http://vaau.ru/
http://newsland.ru/
http://www.lopas.ru/
http://myelect.ru/

А Вот здесь Пости быстро можно прочитать, как сделать добавление закладок во все эти сервисы быстрым и безболезненным.

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