Веб-разработка Это просто! http://maillist.ru/55140 В нашей расылке вы узнаете о различных тонкостях, нюансах и трюках веб-дизайна, веб-программирования и веб-разработки в целом. Охват тем очень широк - от работы в графических редакторах, до программирования под AJAX и ASP.NET. ru Веб-разработка? Это просто! Еще пара трюков http://archives.maillist.ru/55140/1273921.html?rss=1

DOM: вытаскиваем текст вне тегов

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

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

В нашем случае документ представляет собой два дива с заданными строго идентификаторами, между которыми расположен искомый текстовый элемент. При помощи getElementById мы на ходим элемент div1, а затем при помощи nextSibling добираемся до текстового узла, ведь он стоит следующим в DOM-структуре. Получить его значение можно при помощи свойства nodeValue.

Вот и весь рецепт.

<html>
<head>
 <title>Hello!</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <script type="text/javascript">
 function getText()
 {
 var div1 = document.getElementById("div1");
 div1.nextSibling.nodeValue = "Поменял текст";
 }
 </script>
</head>
<body>
<div id="div1">Предшествующий
блок</div>
Это текст я хочу получить
<div id="div2">Замыкающий блок</div>
<input type="button" value="Start!" onclick="getText()">
</body>
</html>

DIV всплывающий поверх flash-баннера

В процессе создания сайтов, столкнулся однажды с проблемой выражаемой в том, что flash-баннер, размещенный на странице, закрывает собой всплывающий DIV содержащий в себе меню навигации.

Сам этот DIV имеет z-index больше нуля, и когда на странице нет никакой Flash-анимации, этот DIV плавает поверх страницы. Однако, как только появляется Flash-баннер, то баннер этот рендерится поверх любых плавающих DIV-ов.

Как и все гениальное, решение оказалось простым. Достаточно тегам OBJECT и EMBED добавить атрибут wmode со значение opaque.

Выглядеть это должно как-то так: 

<OBJECT wmode="opaque" ...>
<EMBED ...>
<PARAM name="wmode" value="opaque">
</EMBED>
</OBJECT>

А связано это с тем, что по умолчанию, параметр этот принимает значение window, а это говорит браузеру, что флешку необходимо отрисовывать поверх страницы и всего, что на ней находится. Другие значения параметра wmode - opaque и transparent. Последний ко всему прочему позволяет задавать прозрачный фон для DIV'а, отображаемого поверх флешки. Учтите, что подобные игры с прозрачностью могут заметно ухудшать производительность работы браузера.
]]> 1273921 чт, 26 авг 2010 11:46:03 MSD Веб-разработка? Это просто! Кросдоменная передача данных между html-страницами http://archives.maillist.ru/55140/1211273.html?rss=1

Кросдоменная передача данных между html-страницами

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

Справочник по JavaScript и объектной документной модели DOM говорит нам, что для открытия нового окна нужно использовать метод window.open(), а для доступа из "дочернего" окна в "родительское" (то есть то, которое и породило новое окно) нужно использовать указатель opener.

Здесь все просто, и я не стал бы писать эту статью, если бы хотел рассказать только про это.

А хочу я теперь рассказать о том, как быть если окна эти расположены в разных доменах. Когда такое может произойти? Предположим, есть Ваш форум, а есть специализированный сервис для загрузки и хранения фотографий и вот теперь владелец форума хочет договориться с владельцем фото-сервиса, что на форму он разместит кнопку "Добавить изображение", которая будет открывать окно созданное в рамках фото-сервиса, в этом окне пользователь загрузит фотографии, а затем по нажатию кнопки "ОК" ссылки на фотографии скопируются в окно редактирования сообщения на форуме. Как видим, здесь есть два окна в разных доменах и нам нужно передать текст из одного окна в другое.

"Что тут сложного?" - спросите вы. А давайте попробуем.

Продолжение статьи "Кросдоменная передача данных между html-страницами", а также другие статьи, посвященные веб-разработке, вы можете прочитать на сайте "Веб-разработка? Это просто!"
]]> 1211273 чт, 29 апр 2010 17:11:09 MSD Веб-разработка? Это просто! В нашем блоге появился форум. http://archives.maillist.ru/55140/1181881.html?rss=1

В нашем блоге появился форум.



Ссылка на форум
]]> 1181881 вт, 16 мар 2010 22:15:40 MSK Веб-разработка? Это просто! В наешм блоге появился форум. http://archives.maillist.ru/55140/1181879.html?rss=1

В нашем блоге появился форум.

Именно так.


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


Если вам есть что сказать – пишите на форуме. Добро пожаловать.

]]> 1181879 вт, 16 мар 2010 22:09:37 MSK Веб-разработка? Это просто! Реализация чата на ASP.NET с использованием Long Polling http://archives.maillist.ru/55140/1179838.html?rss=1

Реализация чата на ASP.NET с использованием Long Polling

Бродя по просторам интернета, на одном из сайтов я увидел простой чат. Просмотрев страницу в FireBug я понял, что никакими апплетами там и не пахнет, а значит чат реализован на простом JavaScript.

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

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

Непродолжительный поиск по интернетам дал мне ответ. И ответ этот "Long Polling", а встречается еще и другое название технологии - Comet.

Итак, как же это работает?

По сути, это все тот же старый добрый AJAX, и использование объекта XmlHttpRequest. С одной большой разницей, заключенной на серверной стороне. Разница состоит вот в чем. Клиент посылает XHR-запрос и длительное время ожидает ответа сервера. А "длительное время" отклика обеспечивает сам сервер, который не сразу отдает данные клиенту, а лишь только тогда, когда у него в очереди появляются свежие данные, то есть когда ему действительно есть что сказать.

Клиент, дождавшись ответа, обрабатывает его (например, отображает сообщение на странице), а затем, без промедления, снова запрашивает сервер. И снова ждет.

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

Это и называется Long Polling, то есть - длительный опрос.

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

Продолжение статьи Реализация чата на ASP.NET с использованием Long Polling вы можете прочитать на сайте Веб-разработка? Это просто!
]]> 1179838 сб, 13 мар 2010 21:31:30 MSK Веб-разработка? Это просто! easyAPI. Удаленная загрузка XML. http://archives.maillist.ru/55140/1154425.html?rss=1

И вот, наконец, долгожданная, вторая статья из раздела easyAPI.

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

Итак, для фоновой загрузки данных мы привыкли использовать так называемый AJAX, то есть объект XMLHttpRequest, про эту технологию я уже не раз писал в статьях блога. Однако, эта технология в данном случае никуда не годится. Почему? А потому что объект XMLHttpRequest не позволяет делать запросы к доменам, иным, чем тот, в котором работает скрипт, создающий этот объект.

И здесь к нам на помощь приходит технология, получившая название JSONP, что значит JavaScript Object Notation with Padding. Про сам JSON можео почитать вот здесь JSON, а JSONP представляет собой объект в нотации JSON обернутый в вызов функции, что-то вроде этого: 

onSuccess('JSON-object')

А теперь объясню, зачем это нужно. Хоть XMLHttpRequest и не позволяет делать запросы к удаленным доменам, однако все браузеры позволяют нам загружать JavaScript'ы с любых доменов, то есть страница, загруженная с домена localdomain.ru, позволяет выполнить в ее рамках следующую инструкцию: <script type='text/javascript' src='http://remotedomain.ru'> </script>

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

Осталось только одно - завладеть таким remotedomain.ru, который вернет нам то, что нам нужно. Скажу, что домен этот - http://easyapi.ru. Да-да, именно на этом, предусмотрительно приобретенном не так давно домене, и будут жить все наши полезные, жизненно необходимые почти каждому веб-разработчику, функции. :) Скромненько и со вкусом...

Статью "easyAPI. Удаленная загрузка XML." и другие статьи, посвященные веб-разработке, Вы можете найти на сайте Веб-разработка? Это просто!
]]> 1154425 пн, 01 фев 2010 10:47:03 MSK Веб-разработка? Это просто! Кроссбраузерное XSLT-преобразование в JavaScript http://archives.maillist.ru/55140/1094415.html?rss=1

Кроссбраузерное 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)-документа собственно в сам документ, готовый для его дальнейшего использования.

Продолжение статьи "Кроссбраузерное XSLT-преобразование в JavaScript" и многие другие статьи посвященные веб-разработке вы можете на сайте Веб-разработка? Это просто!.
]]> 1094415 вс, 25 окт 2009 15:15:05 MSK Веб-разработка? Это просто! Кросдоменный JavaScript (JSONP) http://archives.maillist.ru/55140/1087522.html?rss=1

Кросдоменный 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)"/>
на ваш собственный или на наш тестовый handler, расположенный на другом домене, (вот здесь http://vision4web.ru/api/handler.php) и убедиться в том, что кроссдоменная загрузка прекрасно работает.

Статью Кросдоменный JavaScript (JSONP) Вы можете на нашем сайте Веб-разработка? Это просто!
]]> 1087522 вт, 13 окт 2009 13:40:23 MSD Веб-разработка? Это просто! Начинаем создавать набор сервисов easyAPI http://archives.maillist.ru/55140/1087021.html?rss=1

Начинаем создавать набор сервисов 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=f - длинные имена, вида country_code
  • f=s - короткие имена, вида cc2
ip - IP-адрес, если он не задан, то в качестве адреса берутся координаты сервера, с которого пришел запрос REMOTE_ADDR.

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

В следующей статье на эту тему я расскажу о том, как можно применить данный сервис при вызове его из PHP-программы, и из JavaScript на удаленном сервере. Пока сервис easy.GeoIP находится в стадии тестирования, возможны некоторые изменения в его работе, о которых я буду предупреждать на сайте.
]]> 1087021 пн, 12 окт 2009 15:31:03 MSD Веб-разработка? Это просто! AJAX с помощью jQuery и ASP.NET web-сервисов http://archives.maillist.ru/55140/1074849.html?rss=1

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-сервисов" с образцами кода и со ссылкой на архив с готовым проектом Вы можете прочитать на сайте "Веб-разработка? Это просто!"

]]> 1074849 вт, 22 сен 2009 11:11:05 MSD Веб-разработка? Это просто! XML+XSLT на примере XML-погоды от gismeteo.ru http://archives.maillist.ru/55140/1048061.html?rss=1

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+XSLT на примере XML-погоды от gismeteo.ru читайте на сайте Веб-разработка? Это просто!
]]> 1048061 чт, 06 авг 2009 18:27:23 MSD Веб-разработка? Это просто! Парсинг XML в ActionScript 3.0 http://archives.maillist.ru/55140/1019773.html?rss=1
Возникла у меня однажды задача - создать Flash-контрол, в котором постоянно сверху вниз прокручивается список неких сайтов, причем при наведении мыши на этот контрол прокручивание останавливается, а содержимое пункта списка, на который наведена мышь, разворачивается, и мы теперь можем наблюдать саму ссылку на сайт и краткое описание сайта внизу. Как-то так:
scroller
Собственно, хотелось создать универсальный контрол, такой, чтобы и список сайтов и все цвета, и скорость прокрутки, и вообще все изменяемые параметры хранились бы где-то отдельно от самого Flash-контрола, чтобы, когда дизайнеру захочется поменять оформление этого котнрола или его содержимое, он бы меня не дергал лишний раз. Разумное желание. И решил я остановиться на хранении всех этих данных в XML-файле.
Файл этот имеет вот такой формат:
<?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>

Здесь мы видим один корневой элемент <config> в который вложены: элемент <control> одержащий в себе атрибуты, касающиеся всего контрола в целом, и элемент <sites> содержащий в себе дочерние узлы <site>, каждый из которых описывает отдельный элемент прокручиваемого в контроле списка.
Осталось теперь разобраться как разобрать этот файл при помощи ActionScript.
Но для начала структурируем немного в виде классов информацию, хранящуюся в XML-файле.
Элемент <site> мы опишем следующим классом (файл SiteItem.as):
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;
}
}
}

Как видно, это просто класс с открытыми полями и одним конструктором. Ничего сложного.
А вот еще один класс, описывающий весь XML-файл (ScrollerParameters.as):
Полный текст статьи Парсинг XML в ActionScript 3.0 Вы можете прочитать на сайтеВеб-разработка? Это просто!
]]> 1019773 вс, 21 июн 2009 15:05:14 MSD Веб-разработка? Это просто! Хаки для браузеров http://archives.maillist.ru/55140/983731.html?rss=1

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

Сегодня мне хотелось бы поговорить о так называемых «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:-)

Статью Хаки для браузеров а также другие статьи, посвященные веб-разработке вы сможете на сайте Веб-разработка? Это просто!
]]> 983731 вт, 21 апр 2009 09:52:44 MSD Веб-разработка? Это просто! Парсинг XML в JavaScript на примере XML-погоды от gismeteo http://archives.maillist.ru/55140/965348.html?rss=1

Парсинг 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.

Продолжение статьи читайте на сайте Веб-разарботка? Это просто!
]]> 965348 пт, 20 мар 2009 15:12:14 MSK Веб-разработка? Это просто! Облегчая себе верстку. http://archives.maillist.ru/55140/963314.html?rss=1

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

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

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

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

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

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

]]> 963314 вт, 17 мар 2009 12:16:05 MSK