Older posts, page 2 : Веб-разработка «по-русски» | livedev.org

livedev.org [http://livedev.org] Веб-разработка «по-русски» Пользовательский интерфейс в Web 3 Posted by dobrych Thu, 14 Feb 2008 18:53:00 GMT Последний год я стал замечать что слово « юзабилити » стало проскакивать все чаще во всякого рода компьютерных публикациях рунета. Сейчас особо часто это слово замечается рядом с более нашумевшим « Веб 2.0 ». Все чаще слышатся оптимистичные заявления о переходе на приложения с веб-интерфейсом и в большинстве случаев имеются ввиду приложения Гугл . И, как разработчик, я хотел бы представить читателю (который скорее всего является подобным мне разработчиком) свой взгляд на проблемы и решения создания веб-приложений и их интерфейсов. Веб живет своей жизнью и жизнь эту можно отметить достаточно бурной эволюцией и развитием. Особенно последнии годы в период раздувания «Веб 2.0 пузыря». И самое интересное в этом развитии, то, что «атовизмы» отсыхают и отпадают не так быстро, как хотелось бы. А новые способности и возможности адаптируются и применяются наоборот достаточно медленно. Именно с этого я хочу начать свое рассуждение, т.к. считаю вопрос совместимости основным для успешного развития веб-интерфейсов. Я не буду приводить множество примеров о глючном IE или отличным рендерингом css-свойств в разных браузерах. Или взять тот-же флеш от Адоби , который, несмотря на долгую историю развития и мажорную версию 9, все еще преподносит немало сюрпризов. Цель этой заметки — небольшая аналитка, собранная из личного опыта. Как построить удобный пользовтельский интерфейс для веба. Итак, мои советы. Кроссбраузерная верстка . Не всегда дается легко, особенно при использовании сложного размещения блоков в дизайне. Но это первое и главное правило, если вы делаете проект в рамках обычного html интерфейса. Не пугайтесь невалидного кода. Да, если можно делайте код красивым, но помните что код читают роботы, а сайтом пользуются люди . Поэтому чаще полезнее провести время в проектировании, тестировнии интерфейса или еще что вы посчитаете более важным. Меньше используйте мешанины flash-html. Если вы хотите использовать флеш, сделайте на нем отдельную часть сайта, чтобы пользователь варился в ней как в отдельном приложении. Все дело в том, что флеш не учитывает особенностей исполнения интерфейса платформы на которой работает конечный пользователь. Поэтому контролы будут сильно отличаться внешне и по принципу работы, что будет раздражать пользователя. Пользователю легче привыкнуть к одному месту на сайте где все по другому, чем постоянно переключать внимание. При использовании Ajax старайтесь всегда делать версию сайта, работающую в стиле old-school. Формы, поля, ссылки. В случае глюков или тормозов JS опытные пользователи всегда смогут перейти к обыкновенному режиму работы. Используйте готовые JS/Ajax библиотеки. В них учтены уже кросс-браузерность и неровности работы JS. Писать «с нуля» свое слишком дорого и не оправдано. Делайте сайты похожими на другие . Не надо клонировать дизайн или идеи. Я имею ввиду функциональные решения. Если есть тенденции их надо учитывать. Пользователю будет проще разобраться со всеми активными элементами сайта, если он их уже несколько раз встречал. Пробуйте самые последнии и современные технологии веб, в которых уже учтены многие недостатки прошлых лет. На данный момент я имею ввиду декстопно ориентированные фреймвоки MS Silverlight и Adobe Air. Не обязательно вы их будете использовать в своих решениях, но быть «на коне» очень важно. Posted in статьи Tags adobe , air , ajax , flash , flex , interface , ui , usability , web Meta 3 comments , permalink , rss , atom Bug or Feature? Posted by dobrych Mon, 14 Jan 2008 04:13:00 GMT Пост для поднятия настроения в понедельник :-) Коллега вчера вечером прислал ссылку, я посмеялся и отправил товарищам по проекту. А сегодня утром подумалось, что будет весело всем. via ehlo - by Luchian Alexandru Posted in заметки Tags development , humor , life , web Meta no trackbacks , no comments , permalink , rss , atom Загрузка всех моделей в django shell автоматом 2 Posted by dobrych Thu, 10 Jan 2008 12:11:00 GMT Наткнулся на интересную заметку. Как автоматизировать загрузку всех моделей из INSTALLED_APPS при запуске django python shell (manage.py shell). from django.db.models.loading import get_models for m in get_models(): exec "from %s import %s" % (m.__module__, m.__name__) Оказывается очень удобно! :-) Оригинал — Peter Sheats’ Blog » Blog Archive » Autoloading Your Django Models Posted in заметки Tags django , model , python , shell Meta no trackbacks , 2 comments , permalink , rss , atom Линкотека №1 8 Posted by dobrych Tue, 08 Jan 2008 17:38:00 GMT Решил сменить свою del.icio.us ленту в сайдбаре на более-менее регулярный постинг интересных ссылок. А вот место в сайдбаре собираюсь заполнить блогроллом. Так что если хотите попасть в список — напишите мне на имейл или в комментарии свой сайт/блог. Добавляю на условии, что вы ставите на меня обратный линк. Итак интересное, что я «нарыл» на просторах интернета за последние пару недель. StaticGenerator for Django — ссылка дня! очень полезный проект для django-разработчиков, может генерировать статический html вариант сайта из моделей, пользуясь методом get_absolute_url . Самое главное, что через сигналы он может автоматом обновлять html-страницы при изменении/добавлении объектов (т.е. буквально данных в базе). Evaluation of web based WYSIWYG-editors, test result 2007 — обзор онлайновых WYSIWYG редакторов (javascript и один на java), с него набрел на один интересный редактор (следующая ссылка). WYMeditor - web-based XHTML editor — простой интересный онлайн редактор, без возможности upload/insert images, но зато более семантичный и наглядный для тех, кто знает HTML. WYMstyle и css-boilerplate — css frameworks, хороши для веб проектов, когда у вас еще нет дизайна веб-сайта/веб-приложения, но вам нужно более-менее симпатично показать контент и функционал. Облегчают работу тем, кто не любит долгой возни с версткой. swfobject 2 — новая переработанная версия (на данный момент rc1) javascript библиотеки для включения в страницу flash/flex роликов или приложений. Кто еще не пробывал — советую, намного удобнее, чем писать кроссбраузерные теги и делать ручные проверки нужной версии flash. Еще можно почитать блог разработчиков — SWFFix Dev Blog . transdb — неплохая библиотека для локализации конента в django. Добавляет специальные многоязыковые текстовые поля в модель, что облегчает работу с базой и хорошо интегрируется с существующей системой i18n в django. PyAMF — Реализация на Python поддержки протокола обмена данными AMF (от Adobe) для клиент-серверного взаимодействия. Используется во flash и других проектах Adobe. Данные по этому протоколу передаются в бинарном виде, что более-продуктивно с точки зрения потребления траффика, автоматизирована сериализация/десериализация данных как на стороне сервера, так и клиента. Posted in заметки Tags css , django , editor , flash , i18n , javascript , link , python , swfobject , wysiwyg Meta no trackbacks , 8 comments , permalink , rss , atom agile, scrum и житие мое 10 Posted by dobrych Sat, 05 Jan 2008 20:28:00 GMT Хочу поделиться своими впечатлениями о работе в моем текущем проекте глазами разработчика, так сказать изнутри. А если точнее то своим впечатлением от управления проектом по методологии agile . На сегодня слово agile уже набило оскому, не смотря на то, что точного перевода этого английского слова (в отношении к разработке) я еще не встречал. Поэтому все так и пишут — в оригинале. Как же эта красивая теория приживается на практике, в злободневной рутине?.. Лично мне до сих пор не понятно, почему именно разработчики в таком восторге от очередной новой теории управления проектами или методологии разработки. Ведь если разобраться, то любая из них направлена на то, чтобы выжать из команды максимум возможного результата (читай «заставить работать на полную катушку»). Что в принципе вполне оправдано со стороны начальства и заказчика, но в итоге не всегда легко решается самими разработчиками. Я не пишу, что agile — это зло или просто очередной «гемор» для разработчика, но он им может стать… Итак, главная фишка agile методологии разработки — это непосредственное общение внутри команды, с минимумом спецификаций и других технических документов и с максимумом реального общения. Т.е. когда заказчик (или бизнес-представитель) сидит рядом с разработчиками и рассказывает что, как и где должно работать (очень упрощенное объяснение). Наиболее распространенный вариант agile-разработки — scrum еще подразумевает ежедневные встречи команды для кратких отчетов кто над чем работает и что собирается делать в ближайшие рабочие часы. Плюс процесс самой разработки делится на итерации (иногда так называемые «спринты») — временные отрезки с набором задач. В конце каждой итерации, понятное дело, подбивается итог и по общей успеваемости разработчиков можно рисовать картину успеваемости самого проекта. Про преимущества agile, scrum и остального зоопарка по управлению проектами вы найдете кучу статей, а вот про недостатки я расскажу далее. На самом деле в самих теориях управления проектами как правило все гладко, но мы то знаем, что теория не стопроцентно ложится на рабочую действительность. Итак, типичные проблемы, которые появляются в работе agile-команд: команда распределена регионально (в смысле люди сидят в разных зданиях); сильно ухудшает коммуникацию; на самом деле при таком раскладе нормальный agile почти невозможен; бизнес/заказчик все таки пишет подробные спеки; в этом случае пролеты гарантированы, т.к. скорее всего спеки нормально писать в agile темпе никто не сможет; командой управляет не технический менеджер или менеджер который не может прочитать/подправить код; это просто беда, такой менеджер скорее всего будет стопорить работу лишними вопросами и пустыми разговорами; Могу сказать еще, что работать по правилам agile действительно интересно и приятно в небольшой команде матерых профи. Но в проектах с большим количеством разработчиков, agile надо как-то адаптировать. Как вариант — делить команду на более мелкие группы по более узким направлениям. Еще могу привести пример, что agile вполне успешно приживается даже в распределенных командах, но с учетом того, что команда маленькая. Тот-же джаббер чат и скайп достаточно эффективно решает вопрос командной коммуникации. Итак простой вывод для читателей-разработчиков: если на собеседовании на новую работу/проект вы услышали волшебное слово agile, не спешите радоваться :-) позадавайте побольше общих вопросов о команде, менеджерах и заказчиках. Posted in обзоры Tags agile , development , management , methodology , project , scrum Meta no trackbacks , 10 comments , permalink , rss , atom Социальные сети и виртуальные френды 7 Posted by dobrych Mon, 17 Dec 2007 00:49:00 GMT Немного непрограммерской тематики не помешает :-) Хочу наладить контакт, так сказать, со своей читательской аудиторией (как громко сказано :-) Итак, ниже список моих профайлов в социальных сетях. Прошу меня зафрендить. Хочу знать своих читателей и быть «в контакте», как говориться. Кто меня знает лично и может написать рекомендацию в LinkedIn – сделайте это плз. Со своей стороны обещаю отписать тоже. Кто увлекается фото, тоже отметтесь в комментариях. www.flickr.com/photos/dobrych www. flick r .com Профиль на toodoo.ru – зарегайтесь как читатели сайта пожалуйста (ну и френды само-собой). Профиль в «Мой круг» – тут можете меня добавить в свой первый круг, будем знакомиться ближе :-) Страница на «Хабре» – а тут мне не помешает хорошая карма, как начинающему. Я сделал страницу со всеми моими основными контактами , так что пишите – буду рад пообщаться. Posted in офтопик Tags life , social , web Meta no trackbacks , 7 comments , permalink , rss , atom Не изобретая велосипед 6 Posted by dobrych Tue, 04 Dec 2007 20:16:00 GMT Хотел поделиться списком django-проектов , которые могут быть очень полезны при старте любого нового проекта. Чтобы, как говориться, «не изобретать велосипед». Из того, что пробывал лично я, советую: sorl-thumbnail – для генерации thumbnail картинок для ImageField , очень удобно, может делать crop, изменение качества для jpg, подробнее смотрите на сайте проекта (все параметры задаются прямо через темплейттаг, так что верстальщики не будут задалбывать каждый раз когда нужно поменять размер картинки на фронтенде); django-registration – для автоматизации регистрации юзеров (проверка имейла итд), скорее всего будете затачивать под себя, так что годиться но с напильником; django-tagging – неплохая реализация тегирования для джанги, но требует доработки в плане оптимизации запросов к базе; django-template-utils – можно выцепить полезный код или использовать «как есть» при работе с темплейтами, полезные темплейттаги; Из того, что не пробывал, но советую пробывать читателям: django-voting – система рейтинга для контента (работает для юбой модели); django-evolution – новый проект для тракинга изменений схемы базы (моделей); сам не тестил, но отзывы хорошие; django-atompub – для генерации atom-фидов (feeds), намного гибче стандартного джанговского, очень хорошие отзывы; django-rest-interface – для создания ReST API , возможно для работы с ajax ; typogrify – для обработки вводимого/выводимого текста (правильные кавычки, тире итд); актуально только для англоязычных проектов, наша типографика отличается (читайте Лебедева); django-localdates – для корректной локализации дат; интересно как работает с русскими датами, кто может протестировать? Отдельно. Готовые к бою приложения: ByteFlow – блогодвижок , разработка моего товарища, оч советую (есть скрипт миграции с wordpress). feedjack – приложение, feed агрегатор на джанге. Полезно для коммунити-сайтов. webthumb-api – генерация превьюшек реальных сайтов (передаешь ссылку получаешь картинку). django-diario – блогодвижок , не смотрел код, кто пробывал или попробует – напишите комментарий о своем впечатлении. django-photologue – фотогалерея , тоже сам не пробывал, но судя по описанию довольно «продвинутое» приложение (кто попробывал – отпишитесь). snapboard – готовый движок форума , опять же не пробывал, если есть впечатления – напишите. Posted in обзоры Tags code , django , opensource , sample Meta no trackbacks , 6 comments , permalink , rss , atom XML vs JSON: или как общаются современные веб-приложения между собой 6 Posted by dobrych Tue, 13 Nov 2007 22:53:00 GMT Хочется высказать свою активную позицию насчет форматов передачи сообщений между приложениями в веб-среде. Или можете считать это просто настойчивым советом, особенно относящемуся к начинающим веб-разработчикам. Итак, что использовать? XML или JSON ? Общение (обмен сообщениями, если хотите) современных веб-приложений очень актуальная тема. В связи с появлением веб-сервисов в прошлом и огромным ростом популярности сложных (rich) интерфейсов в настоящем, появляется потребность в удобном и легком способе передачи данных между приложениями. Чаще всего подразумевается общение клиента и сервера. Частные случаи: всем полюбившийся Ajax , Flash/Flex приложения с динамическим контентом, API для публичных сервисов. Так вот исторически сложилось что для этих задач использовался изначально XML, как универсальный способ описания любых данных. Но позже появился новый (популярный сегодня) формат – JSON . Про сам формат вы можете почитать в инете, благо информации достаточно. А вот свои субъективные плюсы и минусы я напишу ниже. Плюсы JSON по сравнению с XML: быстрее парситься; легче визуально воспринимается; нативно интегрирован в JavaScript (читай Ajax); К этому списку могу добавить отрывки личного опыта. С парсингом и валидацией XML есть достаточно много проблем, зависящих от библиотеки с которой вы работаете. Сериализация данных в JSON обычно в коде занимает меньше места, чем кодирование сериализации в XML. Интересным практичным моментом есть именно разработка Ajax интерфейсов, где JSON сокращает JS код. Большим плюсом к этому является возможность использования того-же протокола не только Ajax-ом, но и например Flash/Flex приложением или сторонним сервисом как API. Вывод . Я считаю, что XML на самом деле не так уж плох и для общения между приложениями, но он лучше подходит для хранения сложно структурированных данных. А вот большим плюсом JSONа как раз является сокращение времени на разработку базового веб-приложения и его дальнейшей быстрой интеграции с другими разнородными приложениями. Еще проще говоря, если вы собираетесь заняться изучением или сразу использованием Ajax в своих проектах, обратите внимание на JSON и сэкономьте свое время. PS о недостатках. Посмотрите статью Tim Bray и Don Box по теме. Posted in заметки Tags ajax , javascript , json , web , xml Meta no trackbacks , 6 comments , permalink , rss , atom Мажорный дауншифтинг Posted by dobrych Mon, 05 Nov 2007 12:52:00 GMT После создания группы downshifting-ru и обсуждения в ней ряда вопросов, пришел к выводу, что многим IT-компаниям выгодно открывать офисы за пределами мегаполисов. После прочтения еще и о российских тенденциях , убедился в этом окончательно. Кому тема интересна, прошу ознакомиться с ситуацией в Украине по материалам рассылки – топик Полтава и топик IT-деревня Posted in заметки Tags downshifting , life Meta no trackbacks , no comments , permalink , rss , atom Ускорение загрузки веб-сайта на Ruby on Rails Posted by dobrych Wed, 31 Oct 2007 00:00:00 GMT Поигрался я на днях с интересным плагином к Firefox – YSlow от Yahoo и понял на сколько плохи дела у меня с оптимизацией загрузки веб-сайта. Очень полезная утилита, советую всем веб-мастерам, разработчикам и гикам. Для рельсов как всегда есть готовые дрезины, ой плагины :-) Поэтому сделать все получилось довольно быстро, не считая некоторого шаманства с typo. Есть две статьи по которым можно в элементаре поставить плагин и настроить на свой Rails-проект. Поэтому просто привожу на них ссылки – Сам плагин, с документацией и YSlow and Rails performance . Пошагово: ./script/plugin install http://sbecker.net/shared/plugins/asset_packager rake asset:packager:create_yml vim config/asset_packages.yml . См. мой вариант ниже. rake asset:packager:build_all Правим темплейт <%= javascript_include_merged :base %> , тоже для css – <%= stylesheet_link_merged :base %> Рестартуем (если надо) ruby- процесс. Особенности движка typo . В app/helpers/articles_helper.rb есть специальный хелпер ( page_header ) для построения заголовка страницы, так вот вставку javascript надо делать именно там, а не в темплейте. Так в чем же суть убыстрения? В том, что asset_packager пакует все css/js файлы в один (соответственно один js и один css файл). Плюс оптимизирует сам код – удаляет комментарии, лишние пробелы. Получаются в итоге два очень хорошо утрамбованные статические файла, которые еще при отдаче со сжатием (gzip) вообще будут грузиться моментально. Для примера по статистике YSlow livedev.org стал грузиться в два раза быстрее. Мой config/asset_packages.yml --- javascripts: - base: - cookies - prototype - effects - typo stylesheets: - base: - theme/layout - theme/content - theme/body Posted in заметки Tags asset , on , optimization , packager , rails , ruby , typo , yslow Meta no trackbacks , no comments , permalink , rss , atom Older posts: 1 2 3 4 ... 6 Searching... О блоге Мысли, идеи, задачи и решения по веб-разработке. Взгляд с персональной позиции автора. Об авторе Зовут меня Илья. В рабочее время занимаюсь веб-разработкой. Интересуюсь новыми и модными веб-технологиями. Нерабочее время посвещаю семье, по возможности фотографии и музыке . Подробнее. Tags 2008 ajax conference css development django downshifting exception javascript kiev life python rails ruby syntax typo uaweb update web xml Блогролл Amazon byteflow Маниакальный Веблог Подробно Appleworms Андрей Ясинецкий Собираю блогролл Свежие комментарии by krovati-gostinichnye on Мультисайтовость в django trunk by mybryco on Линкотека №2 by krovati-gostinichnye on Мультисайтовость в django trunk by farinaska on Не изобретая велосипед by semicon on Линкотека №2 Archives May 2008 (2) April 2008 (2) March 2008 (5) February 2008 (2) January 2008 (4) December 2007 (2) November 2007 (2) October 2007 (3) September 2007 (2) August 2007 (4) June 2007 (1) May 2007 (1) April 2007 (3) February 2007 (1) January 2007 (3) December 2006 (4) November 2006 (4) October 2006 (4) September 2006 (3) del.icio.us/dobrych/webdev Design Stencils - Yahoo! Design Pattern Library Набор wireframe для созданию web ui прототипов от Yahoo Natural Docs Софт для генерации документации из кода. Юзабельная дока получается js-ria-tools - Google Code Набор утилит для оптимизации и тестирования JavaScript, возможность минимизации файлов JS mapfish Готовое приложение (клиент и сервер) для работы с гео-данным. Построено на базе Pylons и ExtJS/Openlayers Resizable Polygons Пример создания полигонов с возможностью ресайзинга на Google maps (javascript) Python Package Index : virtualenv 1.0 Скрипт для создания варитуального окружения (модули итп) для Python-приложений Google Maps JavaScript API Example - Snap to Polyline Пример кода для привязки курсора к полигонам и полилиниям Take Control of Your Maps (A List Apart Article) Отличный обзор картографического (GIS) софта для построения веб-приложений Mapstraction - a javascript library to hide differences between mapping APIs. Библиотека JS для работы с многими картографическими сервисами через единый API Modest Maps Библиотека для ActionScript (2/3) и Python для работы с картографическими сервисами Плюшки © livedev.org / powered by typo / styled with clerkly