46. Ключевые моменты оценки качества веб-проектов. Практические методы client-side оптимизации.

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

Общее впечатление

• Каково общее впечатление от посещения сайта (благоприятное / неблагоприятное)?

• Отвечает ли сайт вашим потребностям как пользователя?

• Удалось ли вам успешно завершить задачи? (найти / зарегистрироваться / купить)

• Вы бы захотели вернуться на этот сайт?

Функциональность

• Легко ли было завершать реальные задачи или ваши пути приводили в тупики?

• Регистрация и процедура заказа проблематичны или гладки?

Внешний облик

• Сайт визуально привлекателен?

• Что он заставил почувствовать в отношении компании или ее бренда?

• Показался ли сайт профессиональным, целенаправленным и понятным?

• Или он выглядит устаревшим, перегруженным и безвкусно оформленным?

Другая форма оценки - более всесторонняя, письменная часть, суммирующая отдельные мнения, все «за» и «против» и общее впечатление от сайта из проведенных индивидуальных исследований. Это резюме должно сопровождаться снимками экранов, быть кратким и отражать суть, а также выделять наиболее значимые выводы по отдельному сайту.

7 факторов, по которым пользователи на одни сайты возвращаются, а на другие – нет:

1. High-quality content ⇔ Высокое качество содержания;

2. Often update ⇔ Частые обновления;

3. Minimal download time ⇔ Минимальное время загрузки;

4. Ease of use ⇔ Простота использования;

5. Relevant to user’s needs ⇔ Соответствие потребностям пользователя;

6. Unique to the online medium ⇔ Уникальность в Интернете;

7. Net-centric corporate culture ⇔ Ориентированная на Интернет корпоративная культура.

Таким образом, основополагающий принцип веб дизайна при создании сайта – не мешаться под ногами и сделать так, чтобы пользователи достигали успеха как можно скорее.

Практические методы

Все методы, которые можно применить для ускорения загрузки сайта, стоит разделить на две основные группы:

Уменьшение числа файлов

• Объединение JS- и CSS-файлов в один итоговый.

• Объединение фоновых изображений в одно, либо внедрение их прямо внутрь файла стилей.

• Правильно настроенное кэширование позволяет уменьшить число повторных запросов к статическим файлам до минимума.

• Использование параллельных загрузок уменьшает эффективное время ожидания канала, которое является основным негативным моментом при загрузке множества ресурсов.

Уменьшение размера файлов

• Применение zip-сжатия для всех типов файлов

• CSS Tidy для сжатия CSS-файлов (простые регулярные выражения).

• JSMin для JavaScript-файлов.

• Оптимизация графики при помощи консольных или пакетных утилит: jpegtran,gif2png, pngcrush, optipng.

1.Архитектура Клиент-Сервер. Взаимодействие клиента и сервера в сети интернет. Основные понятия языков разметки: sgml, html, xhtml, dhtml, xml.

2.Програмное обеспечение клиента и сервера. Взаимодействие веб-клиента и серверного программного обеспечения. Протоколы обмена данными.

3. Структура элемента в блочной верстке. Варианты блочных моделей. Форматирование блоков: свойства блоков. Позиционирование. Отображение элементов. Обтекание, box-shadow, opacity. Семантическая верстка (header,footer,aside и др.).

4.Возможности HTML5. Встраивание SVG и MathML в text\html. Новые элементы (теги).

5. Язык JS. Его возможности и ограничения. Лексемы. Идентификаторы. Ключевые слова и зарезервированные слова. Типы данных. Произведение типов. Константы. Переменные.

6. Локальные и глобальные переменные. Массивы. Обработка элементов массива и способы вывода результата. Организация ассоциативных массивов в JS.

7. Массив как объект. Встроенные методы для работы с массивами. Добавление и удаление элементов массива.

8. Каскадные таблицы стилей CSS: основные понятия и определения. Селекторы, свойства, аргументы. Селекторы тэгов. Классы стилей. Способы подключения таблицы стилей. Возможности CSS3.

9. Интерактивное управление динамическим состоянием объектов. Псевдоклассы и псевдоэлементы.

10. Условные операторы if, if…else. Оператор switch. Способы обработки исключительных ситуаций. Оператор instanceof в JS.

11. Операторы цикла for, for..in, while, do..while, break, continue.

12. Понятие функций в JS. Создание функций. Использование параметров. Передача объекта по ссылке в функциях.

13. Встроенные функции в объекты JS (window, document, array и др.). Встроенные функции для взаимодействия с пользователем в JS.

14. Рекурсивные функции и анонимные функции в JS. Функции как объекты. Их назначение и примеры использования. Функции обработанного вызова (callback). Их назначение и параметры использования.

15. Объекты JS. Понятие объекта. Виды объектов. Создание пользовательских объектов JS, и работа с ним.

16. Наследование в JS на основе концепций прототипноориентированного языка. Свойство prototype. Добавление свойств и методов к конструкторам объектов.

17. Создание и наследование классов в JS на основе стандартов Ecma 6.

18. Свойства объектов, методы, события. Добавление, удаление, доступ к свойствам. Создание конструкторов и их роль для новых свойств объектов.

19. Встроенные методы для работы со строковыми объектами. Работа с регулярными выр-ми. Возможности обработки строковых данных в JS.

20. Браузеры и их функциональные возможности. Особенности реализации web-приложений в разных браузерах. Иерархия объектов браузера.

21. Понятие и структура BOM. Объекты верхнего уровня.

22. Работа с окнами. Объект Window. Свойства окна. Создание, открытие и закрытие окон. Основные методы и свойства окон.

23. Понятие иерархической модели DOM. Варианты поиска элементов.

24. Определение событий формы. Создание элементов формы. Методы для работы с формами.

25. Использование набора многократно используемых объектов и функций библиотек JS (JQuery, Prototype, Mootools, Dojo) при разработке веб-приложений.

26. Работа с событиями экрана, клавиатуры, мыши в JS. Добавление метода в HTML DOM addEventListener().

27. Хранение данных на стороне клиента. Виды хранения. Преимущества и недостатки сохранения данных на стороне клиента.

28. Особенности использования Cookie в JS. Сохранение и уничтожение данных с помощью Cookie.

29. Использование HTML5 Application Cache для хранения данных на стороне клиента. Возможности и ограничения HTML5 Application Cache.

30. Использование HTML5 Web Storage для сохранения данных на клиентской стороне. Локальное и сессионное хранилище, их создание, использование и особенности.

31. Технология Ajax для передачи данных в фоновом режиме. Объект XMLHttpRequest. Обработка ответов от сервера.

32. Особенности хранения данных с помощью WebSQL. Метод executeSQL(). Организация табличного хранения данных. Внесение и удаление данных из таблиц.

33. Преимущества и механизм использования шаблонизаторов в JS (Mustache\Handlebars, EJS, Jade). Генерация HTML-структуры с помощью шаблонизатора Mustache.js.

34. Особенности применения паттернов проектирования (MVC,MVVM,MVP) в JS.

35.Использование паттерна MVP на основе библиотек Backbone и AngularJS.

36. Динамическая подгрузка данных на страницу с помощью возможностей библиотеки jQuery. Методы jQuery.ajax($.ajax), jQuery.post, jQuery.get.

37. Технология динамического обращения к серверу без перегрузки всей страницы. Передача данных на страницу данных в формате HTML, .txt, XML и JSON.

38. Особенности функционального программирования в JS. Метод bind(), немедленно вызываемые функции, самоопределяющиеся функции.

39. Функции замыкания и обратного вызова (callback) в JS. Роль функций обратного вызова в организации асинхронного обмена данными (на примере Node.js).

40. Управление зависимостями: принципы модульного программирования в JS. Концепции AMD.

41. Использование модульного подхода к программированию в JS на примере работы с библиотекой Require.js.

42. Менеджер задач (на примере Grunt). Варианты заданий.

43. Назначение и функции пакетных менеджеров Bower и npm.

44. Платформа Node.js и ее возможности. Программирование на стороне сервера.

45. Использование документно-ориентированных баз данных в JS. Организация хранения данных на примере MongoDB.

46. Ключевые моменты оценки качества веб-проектов. Практические методы client-side оптимизации.