Web-сайт на клиентских технологиях (проект) — различия между версиями

Материал из Wiki - Факультет компьютерных наук
Перейти к: навигация, поиск
(Материалы)
(Добавлена презентация и ДЗ по второму Office Hours)
Строка 64: Строка 64:
 
==== Материалы ====
 
==== Материалы ====
 
* [https://docviewer.yandex.ru/?url=ya-disk-public%3A%2F%2F2EPJ%2F4jjgZNu24R81dt9xKLO3fPXuSberu8nIPINaP0%3D&name=VH01.resources-tools.pdf&c=54da745291a3 Office Hours I - Ресурсы и инструменты]
 
* [https://docviewer.yandex.ru/?url=ya-disk-public%3A%2F%2F2EPJ%2F4jjgZNu24R81dt9xKLO3fPXuSberu8nIPINaP0%3D&name=VH01.resources-tools.pdf&c=54da745291a3 Office Hours I - Ресурсы и инструменты]
* [https://docviewer.yandex.ru/?url=ya-disk-public%3A%2F%2FV58ij%2Fe0hp2VFUMhvy9Q9Hzi3sbg6eWPXrWNE6crVhs%3D&name=VH.01.html-css.pdf&c=54e34bf199fe Office Hours II - HTML и CSS]
+
* [https://docviewer.yandex.ru/?url=ya-disk-public%3A%2F%2FV58ij%2Fe0hp2VFUMhvy9Q9Hzi3sbg6eWPXrWNE6crVhs%3D&name=VH.01.html-css.pdf&c=54e34bf199fe Office Hours II - HTML и CSS] ([https://docviewer.yandex.ru/?url=ya-disk-public%3A%2F%2F%2Bu5Q3U%2BjgbqJyK4QsbAiFznSnW1by%2BNY%2BctYX9cGN9E%3D&name=HW01.HTML-CSS.zip&c=54e34ce26243 Домашнее задание по HTML и CSS])

Версия 17:13, 17 февраля 2015

Ментор Копцов Александр
Учебный семестр Весна 2015
Учебный курс 1-й курс



Что это за проект?

Итог проекта

Создание web-сайта на одну из представленных тем с использованием клиентских технологий. Реализация серверной части сайта в этот проект не входит.

Полезность проекта

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

Чему вы научитесь?

  • Основам работы с клиентскими технологиями - HTML, CSS
  • Основам работы с языком JavaScript
  • Принципам построения клиентской части web-сайтов и web-приложений

Какие начальные требования?

  • Умение пользоваться текстовым редактором
  • Желание узнать про клиентскую разработку для web

Какие будут использоваться технологии?

  • git, github
  • HTML, CSS
  • JavaScript

Темы вводных занятий

  • Использование HTML и CSS в клиентской разработке
  • Язык программирования JavaScript, браузер как среда выполнения
  • Особенности разработки интерфейсов вообще и web-интерфейсов в частности

Направления развития

  • Представление клиентской части - визуальные эффекты, адаптивность
  • Реализовать сложную клиентскую логику, используя предоставляемые браузером API
  • Добавить динамику в сайт, используя AJAX-запросы к данным и шаблонизацию
  • Применить некоторые из известных технологий организации клиентского кода - сборку и минификацию скриптов, CSS-препроцессоры

Критерии оценки

Минимальные требования к сайту (на 4 балла):

  • Соответствует макету задания (если студент взял готовый вариант)
  • Имеет не менее 3 разных страниц, оформленных в едином стиле, с межстраничной навигацией (если студент придумал свой вариант)
  • Имеет нетривиальную клиентскую логику. Примеры: аккордеон, баннер с переключающимися картинками на JS
  • Открывается без ошибок и более-менее одинаково выглядит в актуальных десктопных версиях IE, Chrome, Firefox, Яндекс.Browser, Safari и Opera.

Дополнительно:

  • Использование эффектов СSS3 в оформлении: +1 балл
  • Использование AJAX: +1 балл
  • Использование шаблонизации: +1 балл
  • Сборка CSS: +1 балл
  • Минификация и сборка JS: +1 балл
  • Нетривиальное использование браузерных API (localStorage, etc.): +1 балл

Соответствие баллов и оценок

  • 4-5: зачёт
  • 6-7: хорошо
  • 8-10: отлично

Материалы