Студопедия

Главная страница Случайная страница

Разделы сайта

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






  • Как продвинуть сайт на первые места?
    Вы создали или только планируете создать свой сайт, но не знаете, как продвигать? Продвижение сайта – это не просто процесс, а целый комплекс мероприятий, направленных на увеличение его посещаемости и повышение его позиций в поисковых системах.
    Ускорение продвижения
    Если вам трудно попасть на первые места в поиске самостоятельно, попробуйте технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Если ни один запрос у вас не продвинется в Топ10 за месяц, то в SeoHammer за бустер вернут деньги.
    Начать продвижение сайта
  • Место действия: Тула, Дата: 5 января 2014







    +20 минут Ушло на установку node.js и Cordova CLI

    +10 минут Скачал шаблон приложения от Cordova. Добавил шаблон из PhoneJS. Создал Git-репозиторий, зарегистрировал его в WebStorm. Добавил запись в httpd.conf, чтобы была возможность отлаживать и проверять работу приложения в браузере.

    +38 минут Поменял неймспейс приложения на io.nikitin.ThriftBox. Настроил навигацию. PhoneJS является MVC-фреймворком. Каждый экран приложения представлен набором из html разметки (вью) и функцией-фабрикой вью-модели. В простейшем случае, это

     

    < div data-options=" dxView: { name: 'home', title: 'Home' } " >

    < div data-options=" dxContent: { targetPlaceholder: 'content' } " >

    // Содержимое вью

    < /div>

    < /div>


    плюс

     

    ThriftBox.home = function (params) { // Параметры запроса из uri

    return {}; // Объект вью-модели

    };


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

    +4 часа 20 минут Случился первый «затык». Не получилось быстро сделать разметку цифровых кнопок для ввода трат.
    В исходном приложении на главном экране огромная клавиатура, похожая на калькулятор или приложение-звонилку.


    Оказалось, что даже «в лоб», с помощью тега table сделать такую клавиатуру не получается. На retina-iphone бордюры в 1 пиксел между кнопками меняли свой цвет после нажатия кнопок. Разница в цвете линий на хорошем экране телефона была очень заметна. Пришлось думать, как победить.


    Изучал вопрос и опробовал вариант верстки на div'ах. С ними не получилось добиться, чтобы рамка была ровно 1 пиксел шириной и все кнопки были одинакового размера на экранах разного разрешения. Спустя 3 часа баг был оставлен как есть и я двинулся дальше.

    +28 минут Убран индикатор нажатия ссылки на iOS. iOS отрисовывает серый индикатор нажатия вокруг ссылок и объектов с обработчиком onclick. Поскольку у меня был свой индикатор нажатия (кнопка становилась темнее), этот серый индикатор мне был не нужен. Проблема решилась с помощью события dxAction:

     

    было:

    < td data-bind=" click: function() { buttonPress('1') }" > 1< /td>

     

    стало:

    < td data-bind=" dxAction: function() { buttonPress('1') }" > 1< /td>


    Это событие — расширенная вариация события click: в качестве обработчика оно поддерживает uri навигации между вью и корректно отрабатывает в скроллируемой область.

    +14 минут Обработчик buttonPress из предыдущего примера, валидация введенного числа.

     

    var number = ko.observable(null);

    var isValidNumber = ko.computed(function() {

    return number() & & parseFloat(number()) > 0;

    });

     

    ......

     

    function buttonPress(button) {

    if (button) {

    if (number())

    number(number() + button);

    else

    number(button);

    } else if (number())

    number(number().substr(0, number().length - 1));

    }

     

    var viewModel = {

    number: number,

    isValidNumber: isValidNumber,

     

    viewShowing: viewShowing,

    buttonPress: buttonPress

    };

     

    .....

     

    +8 минут Добавил FastClick.js, который убирает задержку перед срабатыванием события click на телефонах. По умолчанию, мобильный браузер откладывает вызов обработчика click, чтобы убедиться, что не будет double-tap. Внешне это проявляется как подтормаживающее приложение. Вы быстро нажимаете кнопками, а они реагируют с ощутимой задержкой на нажатия. Авторы FastClick.js вешаются на touchstart и выстраивают свою логику обработки нажатий.

    Забегая вперед скажу, что добавление этой библиотеки было ошибкой. Почему — читайте далее.

    +4 минуты Ввел ограничение на длину числа, которое может ввести пользователь. Подкорректировал размер шрифтов, чтобы все отлично выглядело и не вылезало за границы области ввода.

    +58 минут Выбор категории траты. Под областью ввода добавил прокручивающуюся область с кнопками доступных категорий. Видео.
    Заняло меньше, чем могло бы. Внутри PhoneJS нашел подходящий компонентdxTileView. Из коробки получил нужный мне внешний вид и кинетик-прокрутку. С последней пришлось бы помучится, если делать её самому. Особенно здорово, что ребята из DevExpress включили её только для iOS, где она — системная, но выключили для Android, где такой прокрутки нет.

     

    < div class=" category" data-bind=" dxTileView: {

    dataSource: categories,

    itemMargin: 0,

    baseItemHeight: 72,

    baseItemWidth: 72,

    listHeight: 72

    }" >

    < div class=" tile"

    data-options=" dxTemplate: { name: 'item' }"

    data-bind=" css: { selected: $parent.category() == $data },

    click: function() { $parent.category($data) }" >

    < div> < img data-bind=" attr: { src: image }" /> < /div>

    < div data-bind=" text: name" > < /div>

    < /div>

    < /div>


    Было уже 19: 40 и я решил закончить.







    © 2023 :: MyLektsii.ru :: Мои Лекции
    Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав.
    Копирование текстов разрешено только с указанием индексируемой ссылки на источник.