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

В моем проекте очень много классов взаимодействуют на клиентской части. Каждый класс лежит в отдельном файле для удобства разработки. Хорошей практикой для увеличения скорости загрузки страницы, является уменьшение количества запросов к серверу. Поэтому чем меньше файлов и рисунков включать в страницу тем быстрее она загрузится. В случае с рисунками – СSS спрайты помогут уменьшить количество запросов. А в случае с js и css файлами – это конкатенация файлов и сжатие. Об этом и поговорим.

Очень удобный инструмент с открытым исходным кодом js-builder



Отличный инструмент для того чтоб сформировать в правильном порядке конкатенацию файлов. Работает с любыми расширениями, которые задаешь. Также сжимает js.
В моем проекте я использую библиотеку prototype.js. Билдер при сжатии прототайпа выдает эксепшн. Поэтому я скачал исходники и перебилдил так чтоб билдер занимался только конкатенацией без сжатия. Пересобранную длл, можно скачать тут
Билдер также содержит консольное приложение. А это то что нужно для билда.
Далее необходимо сделать компрессию файлов которые сгенерирует билдер.
Для этой цели я использовал YUI Compressor. Отличная библиотека с высокой степенью сжатия.
Осталось только как то автоматизировать процесс сборки. Для этого я написал batch файл (я в виндовс работаю).
Выглядит он (build.bat) примерно так
set path1=D:\Projects \build\

%path1%JSBuilder\JSBuildConsole.exe /path=%path1%MyHeritageBuild.jsb

java -jar %path1%yuicompressor-2.3.1\build\yuicompressor-2.3.1.jar
%path1%build\output_file_from_js_builder.js -o %path1%target-min.js

java -jar %path1%yuicompressor-2.3.1\build\yuicompressor-2.3.1.jar
%path1%build\style-all.css -o %path1%style-all-min.css


В моем случае джс билдер на выходе дает 2 файла — css и js, а компрессор их сжимает.
Надеюсь это поможет вам создать удобный процесс сборки файлов.

Эту статью я взял из своего техноблога на сайте www.kigorw.com

MappedUp is an application that tracks a large number of RSS news sources and displays their latest items on a world map, geographically and in real-time. -::- МаппедАп — это приложение, которое переносит большое количество новостных RSS ресурсов и показывает их на географической карте мира в рельном времени.

Mosquito CMS
Это ремейк (наследник, сын и потомок) Микроблога (Microblog 1.1.5).

Синопсис: Компактный, минималистичный и шустрый блог-движок на php.

Нетребовательность: Работает без mysql и дополнительных серверных модулей.

Прозрачность: Понятный и лаконичный. Ядро движка — всего несколько страниц (~ 400 строк) кода.

Минимализм: Базовый дистрибутив Mosquito в zip занимает 35 кб.

Вездеходность: Одинаково хорошо идет как на платных так и на бесплатных хостингах (нужно только php 4).

Функциональность: Расширяется дополнительными плагинами. Дизайн настраивается действительно просто («на лету»).

Открытость: Mosquito принадлежит к роду Open Source скриптов. Лицензируется в соответствии с GNU GPL.

Идеология Mosquito: «лучше меньше да лучше» :-j или, если вам это что-то говорит.
------------------------​---------------

Так гласит ревью на сайте разработчика. Лично для меня это легко модифицируемый и чёткий движок для блоггинга, при хорошом оформление и джентельменских плагинах — фора перед Wordpress {ИМХО} будет явная.
Линки:
Скачать
Обсуждения
Пример блога на этой CMS (если не верите — посмотрите внизу написано на чём он работает)

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

Возникла тут недавно потребность рисовать чарты яваскриптом. В итоге была найден элемент canvas от WHATWG и его спецификация. Вещь в высшей степени привлекательная. Позволяет рисовать вот такие штуки:

Делается примерно так:

INTRO

Все мы знаем что PHP предназначен для быстрого создания динамических Web страниц. Во всяком случае именно это написано на официальном сайте разработчиков PHP. Однако почему бы не попробовать найти PHP «немного» иное применение, например, попробовать создать полноценное приложение для Windows? Заинтересовал? Тогда понеслась!

Уф… наконец-то я решился написать свой первый пост.

В этом посте я хочу рассказать вам о некоторых простых, и в тоже время эффективных способах ускорения загрузки вашего сайта.
Все методы основаны на LAMP + nginx + drupal, но я уверен что всё это верно и для остального тоже.
Разговор пойдёт о первой загрузке сайта, то есть когда у клиента нет ещё кеша в браузере.

В отличие от предыдущих версий HTML и XHTML, которые определяются браузерами их синтаксисом, HTML 5 определяется в зависимости от Document Object Model (DOM) — структура («дерево») документа считываемое браузером для отображения страницы. Например, рассмотрим очень простой документ, состоящий из заголовка, подзаголовка и некоторого текста. Структура DOM будет выглядеть так:

К иллюстрации: структура документа DOM состоит из элемента «title» в заголовка «h1» и «p» элементов в теле документа.

Начало статьи

В последние годы размещение аудио и видео ресурсов на страницах веб-сайтов становится все более популярным, и такие проекты как: YouTube, Viddler, Revver, MySpace сделали возможность размещения этих элементов еще более доступным для пользователей. Однако поскольку в настоящее время формат HTML не обладает широкими возможностями внерения аудио и видео, разработчики стараются реализовать это с помощью Flash. Хотя можно воспользоваться и внедрением различных плагинов, таких как QuickTime, Windows Media и т.п. Но реализация на Flash на данный момент является наиболее распространненным способом, а также наиболее совместимым с различными браузерами.

Нужно отметить, что разработчики в процесее создания flash-плейеров, заинтересованы, прежде всего, в создании собственных пользовательских интерфейсов, которые будут обладать основными функциями: «воспроизведение», «пауза», «стоп» и настройка громкости. Задумка состоит в том, чтобы представить эти функциии в браузерах, добавив поддержку внедрения видео и аудио и осуществлять управление воспроизведением с помощью DOM API.

Начало статьи

В последние годы размещение аудио и видео ресурсов на страницах веб-сайтов становится все более популярным, и такие проекты как: YouTube, Viddler, Revver, MySpace сделали возможность размещения этих элементов еще более доступным для пользователей. Однако поскольку в настоящее время формат HTML не обладает широкими возможностями внерения аудио и видео, разработчики стараются реализовать это с помощью Flash. Хотя можно воспользоваться и внедрением различных плагинов, таких как QuickTime, Windows Media и т.п. Но реализация на Flash на данный момент является наиболее распространненным способом, а также наиболее совместимым с различными браузерами.

Нужно отметить, что разработчики в процесее создания flash-плейеров, заинтересованы, прежде всего, в создании собственных пользовательских интерфейсов, которые будут обладать основными функциями: «воспроизведение», «пауза», «стоп» и настройка громкости. Задумка состоит в том, чтобы представить эти функциии в браузерах, добавив поддержку внедрения видео и аудио и осуществлять управление воспроизведением с помощью DOM API.

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