SlideShare une entreprise Scribd logo
1  sur  28
Десктоп-подобные веб преложения Владимир Колесников
Веб приложения Страницы Приложения
Веб приложения Страницы Приложения
Веб приложения Страницы Приложения
Веб приложения Страницы Приложения
Веб приложения Страницы Приложения
Паттерны Ctrl+A     ↑    ↓
Паттерны Drag & Drop, copy & paste,  direct manipulation
Паттерны
Патерны
Паттерны
Анатомия (идеал) CSS Представление HTML Данные JavaScript Управление
Анатомия+AJAX CSS Представление HTML Данные JavaScript Управление Представление Данные
Анатомия+AJAX (реальный мир) CSS Представление Управление HTML Данные Представление Управление JavaScript Управление Представление Данные
Убираем HTML JavaScript Представление JavaScript Данные JavaScript Управление
Views + CSS, CSS, CSS
Views SplitView, Toolbar, Slider, Table, Radio, Label….
Layout Начальное положение и якоря (anchors) Left = 100px, top = 200px, width = 300px, height = 24 px Anchors = left, right, bottom
Layout
Темы Набор ресурсов Бэкграунды Цвета Картинки Стили
Темы 23 px 6 px 12 px 12 px
Средства Управление зависимостями + cборка Тестирование Разработческий сервер Генераторы, расширения редакторов Дизайнер интерфейсов*
Мысли напоследок Unobtrusive is evil Less code Web development is overpriced
Владимир Колесников http://ukijs.org voloko@gmail.com twitter.com/voloko github.com/voloko

Contenu connexe

Plus de rit2010

анатомия интернет банка Publish
анатомия интернет банка Publishанатомия интернет банка Publish
анатомия интернет банка Publishrit2010
 
анатомия интернет банка Publish
анатомия интернет банка Publishанатомия интернет банка Publish
анатомия интернет банка Publishrit2010
 
Anatol filin pragmatic documentation 1_r
Anatol filin  pragmatic documentation 1_rAnatol filin  pragmatic documentation 1_r
Anatol filin pragmatic documentation 1_rrit2010
 
Ilia kantor паттерны серверных comet решений
Ilia kantor паттерны серверных comet решенийIlia kantor паттерны серверных comet решений
Ilia kantor паттерны серверных comet решенийrit2010
 
Alexei shilov 2010 rit-rakudo
Alexei shilov 2010 rit-rakudoAlexei shilov 2010 rit-rakudo
Alexei shilov 2010 rit-rakudorit2010
 
Alexandre.iline rit 2010 java_fxui_extra
Alexandre.iline rit 2010 java_fxui_extraAlexandre.iline rit 2010 java_fxui_extra
Alexandre.iline rit 2010 java_fxui_extrarit2010
 
Konstantin kolomeetz послание внутреннему заказчику
Konstantin kolomeetz послание внутреннему заказчикуKonstantin kolomeetz послание внутреннему заказчику
Konstantin kolomeetz послание внутреннему заказчикуrit2010
 
Bykov monitoring mailru
Bykov monitoring mailruBykov monitoring mailru
Bykov monitoring mailrurit2010
 
Alexander shigin slides
Alexander shigin slidesAlexander shigin slides
Alexander shigin slidesrit2010
 
иван василевич Eye tracking и нейрокомпьютерный интерфейс
иван василевич Eye tracking и нейрокомпьютерный интерфейсиван василевич Eye tracking и нейрокомпьютерный интерфейс
иван василевич Eye tracking и нейрокомпьютерный интерфейсrit2010
 
Andrey Petrov P D P
Andrey Petrov P D PAndrey Petrov P D P
Andrey Petrov P D Prit2010
 
Andrey Petrov методология P D P, часть 1, цели вместо кейсов
Andrey Petrov методология P D P, часть 1, цели вместо кейсовAndrey Petrov методология P D P, часть 1, цели вместо кейсов
Andrey Petrov методология P D P, часть 1, цели вместо кейсовrit2010
 
Dmitry lohansky rit2010
Dmitry lohansky rit2010Dmitry lohansky rit2010
Dmitry lohansky rit2010rit2010
 
Dmitry Lohansky Rit2010
Dmitry Lohansky Rit2010Dmitry Lohansky Rit2010
Dmitry Lohansky Rit2010rit2010
 
Related Queries Braslavski Yandex
Related Queries Braslavski YandexRelated Queries Braslavski Yandex
Related Queries Braslavski Yandexrit2010
 
молчанов сергей датацентры 10 04 2010 Light
молчанов сергей датацентры 10 04 2010  Lightмолчанов сергей датацентры 10 04 2010  Light
молчанов сергей датацентры 10 04 2010 Lightrit2010
 
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample SdkSergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdkrit2010
 
Serge P Nekoval Grails
Serge P  Nekoval GrailsSerge P  Nekoval Grails
Serge P Nekoval Grailsrit2010
 
Pavel Braslavski Related Queries Braslavski Yandex
Pavel Braslavski Related Queries Braslavski YandexPavel Braslavski Related Queries Braslavski Yandex
Pavel Braslavski Related Queries Braslavski Yandexrit2010
 
Max Lapshin Erlyvideo V2
Max Lapshin Erlyvideo V2Max Lapshin Erlyvideo V2
Max Lapshin Erlyvideo V2rit2010
 

Plus de rit2010 (20)

анатомия интернет банка Publish
анатомия интернет банка Publishанатомия интернет банка Publish
анатомия интернет банка Publish
 
анатомия интернет банка Publish
анатомия интернет банка Publishанатомия интернет банка Publish
анатомия интернет банка Publish
 
Anatol filin pragmatic documentation 1_r
Anatol filin  pragmatic documentation 1_rAnatol filin  pragmatic documentation 1_r
Anatol filin pragmatic documentation 1_r
 
Ilia kantor паттерны серверных comet решений
Ilia kantor паттерны серверных comet решенийIlia kantor паттерны серверных comet решений
Ilia kantor паттерны серверных comet решений
 
Alexei shilov 2010 rit-rakudo
Alexei shilov 2010 rit-rakudoAlexei shilov 2010 rit-rakudo
Alexei shilov 2010 rit-rakudo
 
Alexandre.iline rit 2010 java_fxui_extra
Alexandre.iline rit 2010 java_fxui_extraAlexandre.iline rit 2010 java_fxui_extra
Alexandre.iline rit 2010 java_fxui_extra
 
Konstantin kolomeetz послание внутреннему заказчику
Konstantin kolomeetz послание внутреннему заказчикуKonstantin kolomeetz послание внутреннему заказчику
Konstantin kolomeetz послание внутреннему заказчику
 
Bykov monitoring mailru
Bykov monitoring mailruBykov monitoring mailru
Bykov monitoring mailru
 
Alexander shigin slides
Alexander shigin slidesAlexander shigin slides
Alexander shigin slides
 
иван василевич Eye tracking и нейрокомпьютерный интерфейс
иван василевич Eye tracking и нейрокомпьютерный интерфейсиван василевич Eye tracking и нейрокомпьютерный интерфейс
иван василевич Eye tracking и нейрокомпьютерный интерфейс
 
Andrey Petrov P D P
Andrey Petrov P D PAndrey Petrov P D P
Andrey Petrov P D P
 
Andrey Petrov методология P D P, часть 1, цели вместо кейсов
Andrey Petrov методология P D P, часть 1, цели вместо кейсовAndrey Petrov методология P D P, часть 1, цели вместо кейсов
Andrey Petrov методология P D P, часть 1, цели вместо кейсов
 
Dmitry lohansky rit2010
Dmitry lohansky rit2010Dmitry lohansky rit2010
Dmitry lohansky rit2010
 
Dmitry Lohansky Rit2010
Dmitry Lohansky Rit2010Dmitry Lohansky Rit2010
Dmitry Lohansky Rit2010
 
Related Queries Braslavski Yandex
Related Queries Braslavski YandexRelated Queries Braslavski Yandex
Related Queries Braslavski Yandex
 
молчанов сергей датацентры 10 04 2010 Light
молчанов сергей датацентры 10 04 2010  Lightмолчанов сергей датацентры 10 04 2010  Light
молчанов сергей датацентры 10 04 2010 Light
 
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample SdkSergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
 
Serge P Nekoval Grails
Serge P  Nekoval GrailsSerge P  Nekoval Grails
Serge P Nekoval Grails
 
Pavel Braslavski Related Queries Braslavski Yandex
Pavel Braslavski Related Queries Braslavski YandexPavel Braslavski Related Queries Braslavski Yandex
Pavel Braslavski Related Queries Braslavski Yandex
 
Max Lapshin Erlyvideo V2
Max Lapshin Erlyvideo V2Max Lapshin Erlyvideo V2
Max Lapshin Erlyvideo V2
 

Volodya Kolesnikov Rit

Notes de l'éditeur

  1. Выбор нескольких элементов (управление выделением и фокусом)
  2. Управление скроломо
  3. Прогрессивный (ленивый) рендеринг/загрузка.
  4. Управление текстовым выделением
  5. 3 места для исправления багов, сложность поддержки, 3 вида ресурсов при деплое, проблемы при управлении зависимостями
  6. MVC на клиенте, Очень простой сервер. JSON, plain javascript/ models в Model,Генерации html через JS
  7. Кроссбраузероно, наследование
  8. Верстка в пикселях, простые правила. Верстаем под начальное положение + правила ресайза (якоря). Расстояние между краем и заякоренной стороной константное. Лэйаут расчитывается JS.
  9. Максимально используем нативный лэйаутПри этом положение считаем JSПозволяет делать панельки, сплит пэйну, прогрессивный рендеринг
  10. 6 часов, 100/300 строк
  11. Полноценное приложение, 15 часовразработки, 65 кб