Веб-разработка *

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

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

Работа над HTML 5 была начата в 2004 году. В настоящее время разработки осуществляются в рамках совместных усилий W3C HTML WG и WHATWG. Многие известные компании принимают участие в разработках, в том числе: Apple, Mozilla, Opera, а Microsoft, и ряд других организаций и частных лиц с различными интересами и опытом.

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

Примечание: ниже находится перевод статьи «Speed Up Your Javascript Load Time», в ней автор рассматривает некоторые наиболее эффективные техники и методы действия по уменьшению времени отработки JavaScript'а на клиенте. Большая часть из них общеизвестна, но в статье важно не просто их перечисление, а общий подход для решения задачи оптимизации времени загрузки. Далее мои комментарии курсивом.

JavaScript становится все популярнее и популярнее. Каждый уважающий себя вебсайт старается применить его хоть где-нибудь: будь то подгрузка динамических данных через AJAX, или же некоторые специальные (визуальные) эффекты. К несчастью, за все нужно платить: приходится использовать «тяжелые» JavaScript-библиотеки, которые добавляют к размеру вашей страницы десятки или даже сотни килобайтов кода.

Пользователи так ненавидят ждать: им подавай все и сразу. Давайте тогда рассмотрим несколько методов, которые помогут вам «причесать» ваш сайт. Здесь находятся все рабочие примеры, которые будут приведены далее.

читать дальше на webo.in →

Давно у меня висит идея расшарить данные Google Analytics для посетителей. У них ведь такие удобные графики…

Кто знает, не предоставляет ли Google какой-нить хитрый API для расшаривания их статистики?

Еще глянул на habrahabr.ru/stats, там черным по белому написано, что данные импортированы из Google Analytics. Сразу-же вопрос — как!?

p.s. Интересно, а систему показа графиков хабраразрабы сами писали или это готовый API?

Посмотрите на эту страницу. Синим цветом выделены 4 плавающих блока с шириной равной 25% у каждого, которые находятся в контейнере с шириной 50px. Теперь вопрос: Какова ширина каждого блока?

Ширина эта должна быть равна 12.5px, но т.к. мы можем использовать только целые значения, то приходится округлять значения. И тут же возникает вопрос: В какую сторону округлять? В большую, в меньшую или в обе? Результаты думаю вас удивят, как и меня.


В итоге мы имеем три абсолютно разных лагеря.

— Округление в меньшую сторону — И Opera и Safari округлили значение ширины до 12px. В результате чего образовался 2-x пиксельный пробел (помечен зеленым цветом) справа от блоков. Если вы когда-либо озадачивались, почему ваша красивая навигация не заполняет все пространство контейнера, теперь вы знаете ответ.
— Округление в большую сторону — 6-й и 7-й Internet Explorer увеличивают ширину до 13px, что приводит к «поломке» структуры сайта.
— Округление в обе стороны — Firefox 2 и 3 сочетают оба подхода, округляя ширину одних блоков в меньшую сторону, а других в большую. Побочный эффект заключается в том, что ширина блоков теперь имеет разное значение, несмотря на то, что в CSS задано одно значение. К тому же, если получить значение ширины с помощью Javascript, то оно будет равно 12.5px, не давая понять в какую сторону было произведено округление. Есть и еще один неприятный момент. В Firefox 3 меняется порядок округления.

David Baron, один из разработчиков Mozilla, разъяснил ситуацию:

— Мы стараемся соблюдать все нижеописанные правила, которые, однако же, не могут быть удовлетворены одновременно:

1. 4 смежных объекта шириной/высотой 25% (например), начинающиеся у одного края внешнего контейнера, должны заканчиваться у другого. Не должно появляться никаких свободных или лишних пикселей.
2. Объекты, которые являются логически смежными, всегда должны визуально касаться друг друга. Не должно быть никаких пустых пробелов или наложений, возникающих из-за ошибки округления.
3. Объекты с одинаковой шириной должны занимать такое количество пикселей, которое было задано.
4. Границы объектов не должны быть размыты.

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

Структура правильного HTML-документа базируется на логике, порядке и использовании семантически корректной верстки. Если у вас есть заголовок — используйте для него елементы Heading(h1-h6), если абзац/параграф — paragraph(p). Если у вас есть список — используйте элементы списков (ul/ol), если вы цитируете — используте blockquote или cite. Эти элементы придают смысловое значение разметке, делая ее семантически корректной, в дополнение к правильной структуре.

После составления корректного HTML-макета, используйте CSS для визуального оформления. (Тут уже дело вкуса, некоторые верстают CSS «с лету», а некоторые только после создания HTML-макета)

Стандарт XHTML более строг к синтаксису чем HTML, он не допускает наличия незакрытых тегов, одинарные теги тоже должны быть закрыты (self-closing). Элементы в XHTML прописываются строчными, а не заглавными буквами. Значения атрибутов элементов должны быть указаны в кавычках. Есть и другие отличия, но более подробно я описывать их здесь не буду.

Буратино дали три яблока. Два он съел. Сколько яблок осталось у Буратино? Думаете одно? Ничего подобного. Никто не знает сколько у него уже было яблок до этого. Мораль — всегда обнуляйте переменные!

Можно это было добавить в «Юмор», но когда с это встречается в работе — бывает очень даже не смешно. В этом блоге наверное все хоть раз прочувствовали на себе.

Уже писал о верстке под PocketPC устройства, на неделе доработал все то, что так смущало и подвел небольшие итоги.

1. Резинка.
Верстка под PDA должна быть резиновой. Без дополнительного ПО эмулировать разное разрешение на PDA устройствах нельзя. Да и никому это особо не нужно =) Чаще всего это 320х240 или 640х480, хотя бывают и нестандартные разрешения. В любом случае сайт должен смотреться во всех разрешениях одинаково, т.к. их разброс не такой и большой, а значит верстка должна быть резиновой.

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

3. Авто определение PDA устройства + pda.site.ru домен.
Определить PocketPC не так и сложно. HTTP_USER_AGENT содержит «windows ce» + браузер (mobile ie) добавляет ряд своих заголовков, например HTTP_UA_OS. Соответственно при просмотре site.ru с мобильного устройства должна отображаться оптимизированная верстка. Однако помимо этого необходим и безусловный способ получения PDA верстки, самое простое — поддомен «pda». Это просто удобно + важно для всяких поисковых ботов, да и заранее сообщает, что есть и pda версия сайта…

Когда верстаешь (X)HTML, порой не знаешь или забываешь о многих фичах, которые стоит использовать. Перечислю те, о которых вечно забываю сам, а зря :)

Как это будет выглядеть в готовом виде:
Ссылка, на неё кликают и открывается аяксовое красивое окошко в котором представлены новости с какого-нибудь сайта посредством RSS.
Реализация: лезете на мобильную версию Google Reader, открываете какую-нибудь RSS, копируете адрес из строки адреса браузера и пастите на своей странице с добавлением кода чтобы эта страничка с RSS лентой открывалась аякс библиотекой (например, LightWindow 2.0). Готово, выглядит круто, позволяет даже на древнем движке сделать новости с самых разных сайтов и очень красиво.

Я искал CMS, которая бы легко проглатывала Ajax библиотеки, DeepLinking, SWFadress, SWFobject, HeySilver, :-$ с очень простой системой
публикации. Как и любой ищущий я наткнулся на Drupal, Joomla, Wordpress и ещё несколько поменьше. Минимальный размер был 2.4 метра, но когда я патчил до нужной функциональности и дизайна — минимум 10 метров, при этом в начале у меня были логи ошибок с милю. Я трудился, трудился, трудился, даже думал заказать новую CMS, но потом… ECMS! Тактико-технические характеристики: нужно PHP, но для хранения контента и прочего не нужна mySQL, эта CMS использует почтовый IMAP ящик, т.е. добавлять записи можно просто отправкой на опр. e-mail писем, для меня это круто удобно, т.к. я могу отправить e-mail с телефона, от друзей, из интернет-кафе и так далее, это просто ульрамобильность. При должной смекалке я сумел сделать RSS ридер из неё, тремя строка реализовал самую последнюю систему отображения контента через Ajax (LightWindow2.0), а ведь она позволяет смотреть видео, делать галлерею, читать pdf прямо на сайте без установленного на вашем ПК ридера, встроил mappedUP (географический красивый парсер новостей). Сделал Dock на Mootols и тултипы, вставил виджеты музыки, шаринга и кое-какие ещё. Потом я сравнил с Joomla, намного тяжелее, труднее, менее гибкая и неинтересная. В итоге я получил практически портал, осталось доделать комменты и что-нибудь из серии комьюнити для сайта, хоят мои сборки десктопных приложений меня от этого избавляют.
—
Пишите в ICQ если хотите -вышлю архив с CMS

;-( Я давно хочу создать комьюнити с самыми разнообразными функциями и классной концепцией. Однако поиск движка, хорошего движка оторвал меня от моей идеи на долгие недели. Я перебрал всякие экзотические концепции, nanoCMS, натыкался на fcms, тестил Pligg и прочее, в итоге я пришёл к разработке своей CMS, а это тоже проблема, т.к. я не программист PHP. Я, как в книге Гензель и Гретель шёл по крошкам, натыкаясь на интересный комментарий в каком-нибудь богом забытом форуме тянул за ниточку и доходил до сути. Но теперь! Я нашёл то, с чего начинал — Wordpress, я его тестил для этой задачи так давно, что уже заыбл когда это было… Wordpress MU! (http://mu.wordpress.org/). Мульти-юзерный WP = user-generated-content комьюнити с кучей модулей для работы на самые разные задачи. Это круто.

Навеяно этим.

Для тех, кто, возможно, не знает как сделать так, чтоб всё было хорошо.
Сайт должен тянуться только до определённой величины, и сужаться тоже только до некоторого значения. Я обычно беру 1500 и 980 пикселей соответственно.

Как сделать? min-width и min-height.

#site {
  margin: 0 auto; /*это чтоб центрировать контент при превышении max-width*/
  min-width: 980px;
  max-width: 1500px;
}

Но ведь IE их не поодерживает. А expression слишком нагружает браузер… Спокойно, други! Я выведу вас к свету из тьмы!
Пишем далее.



А в ie.js помещаем

window.attachEvent('onload', mkwidth);
window.attachEvent('onresize', mkwidth);

var minwidth = document.getElementById("site").currentStyle['min-width'].replace('px', '');
var maxwidth = document.getElementById("site").currentStyle['max-width'].replace('px', '');
function mkwidth(){
    document.getElementById("site").style.width = document.documentElement.clientWidth < minwidth ? minwidth+"px" : (document.documentElement.clientWidth > maxwidth ? maxwidth+"px" : "100%");
};

В чём особенная вкусность приведённого метода? А в том, что минимальное и максимальное значение нужно задавать только в одном месте, ну и вообще.

Пользуйтесь, короче, на здоровье!

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

Пока разработчики Нетскейпа готовили новый релиз Мозиллы, браузера, от которого мы «отбранчили» Навигатор, мы в группе Technology Evangelism/Developer Support (TEDS) проверяли его на популярных и партнерских сайтах. На некоторых из них верстка расползалась. В одном случае — очень серьезно.

Возможно, я глубоко ошибаюсь в заголовке; очень хочется услышать мнение Хабралюдей по поводу того, как в IE8 предполагается «решить» проблему рендеринга старого HTML-кода, напичканного хаками для IE6 / IE7 (вот оригинальная статья с A List Apart, плюс Джон Резиг по этому же поводу).

Вкратце — Microsoft предлагает ввести специальный мета-тэг X-UA-Compatible для обозначения версии целевого браузера, чтобы IE8 мог корректно отображать страницы, созданные ранее для его предшественников.

Update: интересно, как на это отреагируют онлайн-сервисы создания веб-страниц, например, движки MovableType, WordPress и прочая. От их решения будет зависеть развитие ситуации, верно?

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

Консорциум W3C опубликовал первый черновик спецификаций HTML 5. Помимо уже обсуждаемых ранее тэгов <video>, <audio> и <canvas>, планируются такие возможности, как соединение с базами данных на стороне клиента, открытие новых сетевых соединений через TCP и Bluetooth, и многое другое. Общее впечатление — HTML 5 направлен на ещё большее стирание граней между компьютером и интернетом.

Спецификации HTML 5

Источник новости

Может я, конечно, «Америку открываю», но авось кому пригодиться… При «полировке» сайта обнаружил, что Спайлоговский счетчик не проходит валидацию на validator.w3.org. В принципе, все и так работало, но, как говориться, мелочь, а неприятно… :)

Не так давно я запустил небольшой проект, призванный помочь «мобильным» людям объеденяться, общаться на форуме, меняться мыслями на хабраподобных блогах итп. Однако, как правильно было замечено в комментариях, проект якобы «мобильный», а с мобильных устройств он смотрится хреновенько, не смотря на валидную xhtml верстку итп. «Черт подери», — подумал я, включил свой FS loox n560 и начал потихоньку переверстывать темплейты для pda версии.
Сначала я думал обойтись подключением «handheld.css» и написанием КПК-ориентированных стилей, как я это делаю обычно для «печатных» версий. Но достаточно быстро понял, что не все проблемы можно решить с помощью CSS. Тем более принцип построения тех же «печатных» страниц сводится обычно к: «Это скрываем, это скрываем, это переносим сюда, это туда, а это тоже скрываем». Все же мы имеем дело с мобильными устройствами и грузить лишний траффик, чтобы в итоге не отображать его это глупо… В итоге пришел к тому, что следует не только CSS стили переписать, но и шаблоны переверстать. Начал с более маленького и простого проекта, чтобы попрактиковаться…

Ну и что, скажите, сложного в том, чтобы вешать в своей системе на все единицы контента N тегов, и после делать по этим тегам выборку с системой релевантности и важности связей? Да ничего в этом сложного нет, ибо это типовая задачка по проектированию БД из 10го класса! Что? Вы всё ещё кипятите? Ну тогда я расставлю быстренько все галочки :)

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