Хабрахабр: Web-разработка / Блог / Захабренные Голосов: 1 Адрес блога: http://habrahabr.ru/blog/webdev/ Добавлен: 2008-06-12 19:52:21 блограйдером ZaiSL

Веб-разработка / Создание одностраничного ajax-приложения с поддержкой History API (и без нее)

2011-07-12 17:09:00 (читать в оригинале)

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

Моя мотивация: в проекте нужно было реализовать mp3-плеер, играющий независимо от навигации на сайте. Далее потребовалось добавить поддержку браузеров без pushState — и я сделал форк библиотеки.

Основные особенности

• навигация по сайту и обработка форм без полной перезагрузки страниц
• чистые url, доступные для прямого доступа
• поддержка #!/hash для устаревших браузеров (добавлено в моей версии)
• работа с кнопками «назад» и вперед» для современных браузеров
• а теперь и для старых — благодаря benalman.com/projects/jquery-hashchange-plugin/
• похоже, есть проблемы с ИЕ7 (спасибо Nc_Soft) (тем более, большое спасибо за участие Nc_Soft) и, возможно, opera 11.5 (пока не могу подтвердить, но нахожу крайне удивительным из-за dev.opera.com/articles/view/introducing-the-html5-history-api/) — сообщение artishok

Ссылки

• jQuery Pjax github.com/defunkt/jquery-pjax
• мой форк с поддержкой хеш-навигации github.com/ckald/jquery-pjax
• работа библиотеки на примере моего проекта amsterdamusic.com.ua/
• пример от создателя pjax.heroku.com/

Принцип работы Pjax

---

Веб-разработка / Регулярные выражения для валидации распространенных видов данных

2011-07-11 11:33:20 (читать в оригинале)

Для проверки текстовых полей на валидность обычно используют регулярные выражения. Существует несколько наиболе распространенных видов таких даных, как например номер кредитки, дата в определенном формате и т. д. На сайте html5pattern.com собирается коллекция регулярных выражений для таких данных (там это позиционируется, как возможное содержимое html5-атрибута pattern у inpit-элементов, но эти регулярные выражения можно использовать и для привычной валидации с помощью javascript). Актуальные для российской аудитории примеры, вместе с соответствующими регулярными выражениями вы можете посмотреть под катом.

---

Веб-разработка / Пошаговая форма + кеширование промежуточных данных

2011-07-11 01:08:36 (читать в оригинале)

О пошаговых html формах написано не мало и в общем то ни чего особенного в реализации нет. Обычное дело для получения от посетителя объемных и связанных данных, многим не раз приходилось решать такую задачу.

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

• На каждом шаге проверяются данные в специальных hidden input-ах и при наличии используются при подстановке значений полей формы
• Каждый следующий шаг принимает POST данные с предыдущего(их) шагов, сериализует и добавляет в специальные hidden input-ы
• Action формы меняется динамически (js) в зависимости от нажатия кнопки «Вперед» или «Назад», т.е. либо url следующего шага, либо предыдущего
• После чего также с помощью js производиться submit формы

Но такой подход имеет проблему с потерей введенных ранее данных при переходе по прямому url (без submit-а) на любой шаг.

---

Веб-разработка / Мешап из флагов: как узнать больше об экзотической стране

2011-07-10 13:32:57 (читать в оригинале)

Публикация спрайта флагов стран для вебстраниц дала идею для эксперимента над интерфейсным решением.

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

---

Веб-разработка / elFinder 2.0 beta. Don't panic!

2011-07-10 01:26:28 (читать в оригинале)

«Для многих цивилизаций Восточного Завитка Галактики, не столь церемонных, elFinder уже с успехом заменил прочие web файловые менеджеры и стал общепринятым, поскольку, хотя в нем и встречаются редкие баги, но зато у него есть два больших преимущества.
Во-первых, он дешевле;
а во-вторых, у него есть большая красная кнопка, на которой большими веселыми
буквами написан дружеский совет: Don't panic!»

Сегодня у меня по настоящему счастливый день!
Несколько месяцев крайне напряженной, но невероятно приятной работы позади.
И я с удовольствием представляю — файловый менеджер для web elFinder 2.0 beta!

Хочу выразить огромную благодарность всему сообществу за помощь, патчи и переводы.
Коллегам по студии — спасибо, что взяли на себя всю текучку, чтобы освободить меня для этого проекта.
И хочу представить нового разработчика elFinder — 667bdrm. Он же автор модуля для drupal.
И еще, нам всем очень приятно, что сейчас нет практически ни одного фреймворка, в который бы не был интегрирован elFinder. Кстати, одними из первых это сделали РБК Софт.