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

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

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

Уже писал о верстке под 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го класса! Что? Вы всё ещё кипятите? Ну тогда я расставлю быстренько все галочки :)

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

Предисловие

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

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

Небольшое эссе о том, как менять Favicon без перезагрузки страницы.

Недавно перед нами стояла задача как динамически менять Favicon без перезагрузки страницы. Решение «в лоб», т.е. замена значения href у favicon link ничего не дала, пришлось крепко задуматься и начать пробовать все возможные альтернативные варианты. Сработал способ пересоздания ноды link в документе. Это удалось заставить работать везде, кроме Internet Explorer. Есть подозрение, что ему не нравится имя файла с иконкой или его формат (PNG).

8 февраля в подмосковном Бекасово откроется «Неконференция» профессионалов веб-разработки ВЕБОРУБ Ice 2008. Самое приятное — на полный двухдневный марафон (проживание, питание) цены снижены вдвое, а однодневное участие и вовсе бесплатно! (читай — бесценно!)

Формат «Неконференции» отличается от обычных конференций тем, что здесь отсутствуют доклады в традиционном их понимании и всё мероприятие состоит лишь из общения носителей знаний «в кулуарах» и небольших 10-15 минутных мастерклассов.

Важный момент — полный запрет на спонсоров, поэтому никаких рекламных презентаций — только опыт, опыт и ещё раз опыт.

Участвовать в мероприятии может любой специалист, которому есть не только о чём послушать, но и чем поделиться с другими. Именно поэтому участие организовано только на базе приглашений.

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

14 Января, 2008г. вышел очередной релиз популярной javascript библиотеки, которой я пользуюсь уже почти год. Хабр насчитал 45 хабратопиков по слову jQuery, поэтому, тем кто не знает что это за магия — рекомендую ознакомиться.

Этот релиз не привносит ничего революционного (вспомните релиз версии 1.2), а лишь насчитывает около 100 багфиксов, несколько улучшений и парочку feature requests. Подробнее можно посмотреть на баг-трекере

p.s. Видимо не только я один воспринимал новогодние праздники как способ эффективно заняться своими проектами…

Основное отличие от оригинала в том, что Lightwindow позволяет просматривать не толко картинки, но и практически все что угодно:

• Media: Movies, Flash (с «подгонкой» под размер окна), PDF..
• Веб страниц (включая, по внешней ссылке)
• Формы
• … любой веб-контент