UaPycon: как это было

Published 10/28/2010 by e0ne in Python
Tags:

В январе в Киеве была конференция Pycamp, о которой я уже писал. В эти выходные, опять-таки, в Киеве прошла уже двухдневная конференция под названием UaPycon. Если не ошибаюсь, организовывали ее те же самые люди, но в этот раз, были учтены многие ошибки предыдущей конференции. Доклады были более интересные и более высокого уровня, особенно это касается западных докладчиков. О докладах немного позже, сейчас - коротко об организационных моментах:

  • регистрация: квест под названием “найди свой бейджик” - не понравилось, хотя и прошел его быстро.
  • следующий квест - найди WC был более интересный, чем предыдущий (похоже, что все ВУЗы в нашей стране имеют слишком запутанную архитектуру, для того, чтобы быстро находить нужные аудитории).
  • место проведения конференции - слишком далеко от центра, зато не было не так далеко добираться от гостиницы :).
  • очень большой недостаток - несоблюдение графика и отсутствие перерывов (5-10 мин) между докладами.

О докладах писали уже много, поэтому не буду очень подробно описывать каждый из них. Были и хорошие, и не очень. Серьезные и смешные (кто следил за твиттер-трансляцией - понял о чем я). Доклады были разных уровней: от пересказа документации (Python Innards, который мне понравился, т.к. эти разделу документации я читал по диагонале), так и основанные на собственном опыте.
Отдельно стоит выделить доклад от Michael Mahemoff из самого Google про HTML5. Доклад, тема которого, напрямую не связанная с языком программирования Python, но состоял из 3-х составляющих в правильных пропорциях: Google + HTML5 + подача и владение материала.
Хотя сайт Uapycon’а был полностью на английском, доклады были и на русском, и на английском и на, скажем так, не очень хорошем английском, которые лучше бы было делать на русском.
В целом конференция прошла успешно, мне понравилась. Бало много интересной и полезной информации, много интересных людей, after party, на котором мне о-о-о-очень долго несли мое пиво, но эта проблема, кажется, была только у меня.

Чуть не забыл. В конце второго дня были еще Lightning Talks. К сожалению, всех их не запомнил, поэтому жду видео, чтоб освежить память. Но было весело и интересно!


Надеюсь, что UaPycon 2011 будет, как минимум, не хуже. И еще его можно провести в Харькове :).


Часть 1. Теория


Сейчас использование модальных и не только диалогов на веб-сайтах является вполне нормальным явлением, в следствии чего нам доступна масса уже готовых контролов как для asp.net/.... (подставьте сюда ту технологию, которую вы используете в своих проектах), так и множество плагинов для популярных javascript-фреймворком, таких как jquery, moo tools, prototype и других. Для упрощения договоримся, что здесь под контролом я буду иметь в виду все что, что в итоге превращается в html-код и выглядит как привычное нам модальное диалоговое окно.

Реализация диалогового окна на html выглядит следующим образом:

  • в какой-то элемент (например, <div id=”container”>) помещается весь контент диалогового окна и ставится ему свойства display:none; z-index:100; position:absolute;
  • создается “фоновый” элемент для создания эффекта модальности с такими свойствами: background-color:gray; position: absolute; width: 100%; height: 100%;     z-index: 90; display:block; opacity:.32; top:0; left:0;display:none; (например, <div id=”background”>).  - этот пункт нужен только для создания модального диалога;
  • при отображении диалогового окна мы меняем у нашего контейнера и фона свойства display на значение block и видим эффект (модального) диалогового окна.

Пример простого pop-up’а находится в файле simple-popup.html

Все модальные окна, реализованные на HTML, которые встречал работали по описанному алгоритму. Изменения были лишь в удобстве работы с ними и набором дополнительных фич, таких как: drag-n-drop, поддержка тем, обработчики событий и др.

Я всегда использовал этот алгоритм до того момента, как мне не пришлось делать возможность навигации по кнопкам внутри модального диалога с помощью клавиатуры. Для примера, рассмотрим работу диалого, реализованного в файле simple-popup-with-input.html.

При нажатии на кнопку show показывается наш модальный диалог. При этом, мы не можем мышкой перейти на поле ввода вне диалога или кликнуть по кнопке show еще раз до закрытия текущего. С первого взгляда все кажется вполне работоспособным. Но кажется это только до нажатия “магической” (magic!) кнопки tab. И тут мы попадаем на наши поля ввода в таком порядке:

  • кнопка show;
  • поле ввода за кнопкой show;
  • поле ввода на диалоге
  • кнопка hide;
  • элементы управления браузера;
  • и так по кругу...

Здесь мы видим, что модальный диалог никакой не модальный, а только кажется таковым.

Как это работает?

Диалоги на HTML реализуются с помощью слоев отображения элементов. По умолчанию, у нас есть только один слой, т.е. свойство z-index у всех элементов одинаково и равно 0. Для создания нового слоя необходимо выставить свойство z-index в 1, 2, и т.д. В нашем примере, у элементов, не входящих в диалог, z-index равен 0, у фона диалога z-index равен 90, а его высота и ширина равняется 100%, что соответствует ширине и высоте окна браузера, из-за чего он визуально перекрывает элементы, у которых z-index < 90 и складывается впечатление модальности. Последним у нас идет элемент с содержимым диалога, у которого z-index равен 100 (максимальное, в нашем случае, значение), что позволяет нам отобразить его на “переднем” слоем.

Из-за слоев, мы не можешь попасть мышкой на кнопку show, но прекрасно можем добраться до нее с помощью клавиатуры (кнопка tab), а также вводить данные в текстовое поле вне диалога. Получается такой себе полу-модальный диалог с неправильной навигацией с клавиатуры.

В следующей части я расскажу как можно обойти данную проблему и покажу прототип модального диалога, в котором корректно работает tab order.

popup.zip (25,42 kb)


Те, кто фолловит меня в твиттере, уже знают о существовании сайта notacash.com. Сейчас я хочу немного рассказать о нем.

Более чем 3.5 года моя работа связана с технологиями Microsoft, в частности - .NET framework и платформа ASP.NET. Но  так, как кроме языка программирования C# существует ещё большое количество других - я решил попробовать что-то другой. Выбор пал на скриптовые языки,а именно - python. По мере приобретения теоретических знаний о python, появлялась необходимость в их практическом применении. Приложения уровня "Hello World!" быстро надоели и хотелось чего-то большего. Сначала хотел написать движок для блога, но лень взяла своё. Ближе к середине лета у меня появилась идея о создании сайта, которая в последствии переросла в сайт notacash.com. Что это за сайт и для чего он нужен - писать тут не буду, всё это уже написано на странице About.

За обновлениями можно слежить в твиттере @notacash и по RSS.

Используемые технологии:

  • язык программирования (на сервере / на клиенте) - python/javascript;
  • веб-фреймворк (на сервере / на клиенте) - django/jquery;
  • СУБД - PostgreSQL