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

Предположим у Вас есть сайт. Предположим вы его оптимизировали по самое «немогу», но всеравно хочеться больше.
Лично мне хотелось, но долгое время не получалось.
Когда я победил тормознутость базы кэшированием запросов, тормознутость блоков — кэшированием блоков, а целые страницы кэшировать я не мог…
Cайт конечно стал работать много быстрее, но начал тормозить уже… мемкэшед?

Пока все обсуждают HTML5 я тут пошевелил извилинами и придумал, в общем-то, тривиальную, но полезную концепцию и решение всех ваших проблем с языками разметки. Оно работает уже сейчас в Mozilla, WebKit и Opera.

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

Зато на это способен XML. Теоретически xhtml2 как раз и является воплощением идей модульности и расширяемости. Но есть одна проблема: все равно вам требуется ждать, пока браузеры начнут его поддерживать. Я сейчас возьму на себя смелость сказать следующее: браузер вообще не должен учиться новому языку разметки и разработчики не должны ждать, пока он ему научится. Все что должен уметь браузер — это обрабатывать xml, css и Javascript.

Концепция проста: полностью разделить структуру документа, представление и поведение. Это именно то, что уже сегодня можно сделать используя соответственно xml, css и Javascript. Сценарий выглядит следующим образом:

1. Браузер парсит xml-документ
2. Браузер парсит css-стили, которые говорят как должны выглядеть элементы, и применяет стили к документу
3. js-движок браузера выполняет Javascript, в котором описано, как должен вести себя каждый элемент страницы.

Обратите внимание, что без стилей браузер не знает, что делать с элементом <strong> например. А без описания поведения js-скриптом браузер не знает как себя вести, когда пользователь щелкает по ссылке. Этот подход можно, наверное, назвать DSRB — Document Structure-Representation-Behavior.

А теперь я покажу вам, собственно, страницу, сделанную описанным выше образом, работает в Mozilla, WebKit и Opera (в Опере есть небольшой непонятный глюк с заголовком) — посмотрите в исходный код обязательно. Недостаток данного подхода состоит в том, что браузеры не хотят выполнять Javascript, если они думают, что перед ними XML-документ. По этой причине мне пришлось указать пространство имен xhtml и избегать стандартных элементов HTML, чтобы браузеры не определяли для них дефолтные стили и поведение. Если браузеры начнут поддерживать Javascript для XML-документов, проблема будет решена.

В чем преимущество?

Сообразительные читатели уже догадались, что таким вот способом реализовать HTML5 можно уже хоть сегодня. При этом вы можете добавить в документ нужный вам доктайп или написать свой собственный DTD. Без доктайпа документ будет представлять из себя well-formed XML, что тоже неплохо.

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

HTML 5 — это грядущее обновление гипертекстового языка разметки, основного способа создания контента для размещения его во всемирной паутине. Разработка HTML остановилась в 1999 году, на версии HTML 4.01 и с тех пор web-содержимое изменилось так, что текущие спецификации HTML перестали соответствовать сегодняшним требованиям.

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

Это статья нашего гостя Jacob Gube, web-разработчика и дизайнера, автора Six Revisions — блога о web-разработке и дизайне.

Введение

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

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

«Совершенный Ajax» — новый подход к построению web-приложений, при котором web-сервер не генерирует ни строчки HTML-кода и взаимодействует с внешним миром только посредством web-служб; а клиентский интерфейс реализуется только на основе клиентских HTML, CSS, JavaScript.

Статья состоит из двух частей. В первой части — более живой и провокационной я постараюсь заинтересовать проблемой, рассказать о технологии «Совершенный Ajax» и показать ее применение на примере нашего проекта «Система Интерактивного Тестирования Знаний “Синтез”» (который имеет ряд интересных особенностей, таких, как использование серверного JavaScript на платформе Mozilla Rhino, прототипно-ориентированная ORM и поддержка SPARQL — языка запросов к Semantic Web).

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

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


Попробуйте угадать: к какой архитектуре относятся web-приложения?

К клиент-серверной говорите? Я ожидал, что Вы так ответите :-)

Что ж, давайте разберемся. В клиент-серверной архитектуре выделяют:

• Сервер — отвечает за хранение данных и реализацию бизнес-логики приложения.
  
  
• Клиент — отвечает за взаимодействие с пользователем ^[1].
  
  

Реализация бизнес-логики на сервере и взаимодействие с пользователем на клиенте четко разделены.

Преимущества клиент-серверной архитектуры очевидны; мы их все знаем:

1. Бизнес-логика не смешивается с пользовательским интерфейсом.
2. Можно реализовать несколько клиентов с разными пользовательскими интерфейсами: интерфейс командной строки, оконный Windows-интерфейс, Flash, web-интерфейс, мобильный интерфейс и т.д.
3. Клиентский компьютер не требователен к ресурсам;
4. И т.д.

Но, относятся ли web-приложения к клиент-серверной архитектуре?

Действительно, в web-приложениях есть сервер, отвечающий за бизнес логику приложения.

Но! За реализацию интерфейса отвечает не клиент, а тоже сервер. На сервере происходит обработка клиентской формы. Сервер генерирует HTML-код пользовательского интерфейса.

Клиент, т.е. браузер лишь визуализирует уже готовый HTML-код интерфейса. Это, фактически, то же самое, что прицепить к серверу монитор и объявить этот монитор клиентом…

 

Приветствую Хабр.
По мотивам cайта, сделанного сами знаете кем :)
В свое время увидел, такой эффект – слева сайта находятся ссылки, при клике на которые контентная область сайта плавно перемещается к указанному идентификатору. Эффект запомнился — решил повторить.
Для реализации плавного перемещения взял JQuery.

Введение

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

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

Тем не менее, задача «хранить деревья в базе данных» рано или поздно возникает перед любым разработчиком.

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

Известен следующий баг «народного» браузера — картинки в формате .png, содержащие участки с альфа-прозрачностью отображаются неправильно. А именно — область этих участков заливается серым цветом (спасибо dreamhelg за лаконичное описание сути происходящего в данном случае).

Сегодня в в своей RSS-ленте обнаружил ссылку на очередную статью о конфронтации .png и IE. Воспринял ее, пожалуй, как и бóльшая половина удививших заголовок выше — с предубеждением (мол, опять двадцать пять). Тем не менее, выяснилось много интересного. Например, теперь фоновые .png отлично подчиняются свойствам background-position и background-repeat.

Все методы создания капчи, что я видел, были основаны на использовании готовых шрифтов и их искажении. В итоге, админам спамботов нужно было только вовремя пополнять базы шрифтов и вертеть каждую букву примеряя её к букве на капче.
Но я придумал задачку значительно сложнее. Хотя это могло существовать и ранее, благо идея не такая уж сложно-приходящая.

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



Как оцениваете такой подход? Есть перспективы?

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

Здесь я покажу очень простой и незамысловатый способ быстрой перекраски, на примере iPod Shuffle.

Сложность элементов интерфейса увеличивается с каждым новым макетом, что доставляет немало хлопот верстальщикам. Развивающиеся технологии позволяют создавать в WEBе сложные приложения (Google не даст мне соврать), поэтому дизайнеры себя не сдерживают и рисуют всё более навороченные вещи. Как правило, это приводит к большому количеству графики на страницах.

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

Бытует мнение, что связка LAMP (Linux+Apache+Mysql+PHP) не требует особой настройки и работает «из коробки». Это далеко не так. После того, как я долго убеждал товарища установить кеширующий акселератор PHP xcache, я решил провести небольшой эксперимент и попробовать выключить xcache на своём виртуальном сервере, находящемся под небольшой нагрузкой (около хита в секунду). В реальной жизни нагрузка на процессор мала, а вот память загружена сильно, т.к. её немного (256МБайт).

Результаты эксперимента превзошли все ожидания.

Когда уже горе-верстальщики научаться использовать этот тег? Повсюду в проекте такие ляпы:

<form ...>
 <input type="checkbox" ..> Поставьте галочку, чтобы стало зае...сь <br>
 ...
</form>


Видя такое, пользователь сначала кликает на надпись, обламывается, кликает на сам чекбокс.
Разве нелья было сразу сделать так?

<form ...>
 <label><input type="checkbox" ..> Поставьте галочку, чтобы стало зае...сь</label><br>
 ...
</form>


Некоторые даже вешают обработчик события OnClick на кусок текста, лишь бы не использовать label… :(

При создании html-макета страницы иногда приходится иметь дело с множеством однотипных картинок. Например, выпало верстать фотоальбом. Нужно нарезать порядка двадцати «превьюшек», потом их всех поименовать и сохранить. Рутина.

Для того, что бы быстрее разделать со всем этим — используем несколько хитростей.

7 марта прошлого года W3C, после 10-летнего перерыва, возобновила работу над HTML.

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

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

Я решил выложить их в виде статьи, переработав и снабдив иллюстрациями и примечаниями.

Содержание:

1. Вступление
2. Сценарии гибели
   • Гибель ментальная, или HTML — новый ассемблер
   • Гибель физическая, или HTML — новый Turbo Pascal
3. Все ли так серьезно?
   • Ментальной гибели не будет, если web-технологии будут правильно поняты
   • Физической гибели не будет, если web-технологии будут развиваться
4. Заключение
5. Примечания

В настоящий момент мир вступает в эпоху расцвета богатых web-приложений.

Программы, работающие через Веб, все больше вытесняют традиционные десктопные приложения. Gmail, Google Map, online-офис, даже web-операционные системы… Список можете продолжить сами.

Однако, по мере продвижения web-приложений, все больше возрастают требования к основным клиентским web-технологиям: xHTML, CSS, JavaScript.

И, если эти технологии не будут поспевать за все более возрастающими требованиями, это приведет к их медленному закату…
 

Однажды мне пришлось наблюдать, как спамеры очень интересным образом обходят спам-фильтр. Вместо традиционного URL типа «example.com», ссылка выглядела так:
http://example．com
Ссылка с подобной изощрённой точкой работает в IE7, FF3, Opera 9.5, Safari 3, Google Chrome и не работает в IE6.

Наткнулся на забавный онлайн-сервис — в одном поле пишется текст, в другом автоматом появляется этот же текст но повёрнутый на 180 градусов, именно текст который при желании можно скопировать в буфер. Стала интересна реализация данной задумки и решил заглянуть в исходник.

Даже и не думал, что это можно сделать, да с такой красивой реализацией на JS. Всё предельно просто: составляется хэш соответствия символов, например «n» перевёрнутая «u» и т.п., для символов у которых нет отражённых копий в алфавите, ищутся соответствия в таблице Unicode. После чего хэш добивается своей реверсированной версией и остаётся только к нему обращаться через функции на эвентах.

Решили мы как то с приятелем, запустить стартап не стартап, а так, сайт для души. Решили — значит будет запущен. Бюджет… А давай не купим ещё по 2 кружки пива, на это и запустим. В общем денег на домен да на виртуальный хостинг на валуехосте. Так люди мы «взрослые», и делать всё привыкли основательно, нам нужна система управления версиями и выкладыванием. Было решено поднять subversion репозиторий с возможностью раздачи доступа к нему нескольким разработчикам с разными логинами на valuehost. Но у нас виртуальный хостинг со всеми его ограничениями, что делать?

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