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

Текущая версия на 16:24, 28 июля 2017

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

(презентация проекта)

Итог проекта

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

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

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

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

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

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

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

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

• git, github
• HTML, CSS
• JavaScript

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

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

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

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

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

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

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

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

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

Плюс к этому, качественный дизайн и техническое выполнение проекта может принести ещё 1-2 бонусных балла

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

4-5: зачёт

6-7: хорошо

8-10: отлично

Расписание занятий

ПН, 18:10, ауд. 322

Материалы

• Office Hours I - Организационная часть, ресурсы, инструменты
• Office Hours II - HTML и CSS
• Домашнее задание по HTML и CSS
• Office Hours III - JavaScript
• Домашнее задание по JavaScript
• Office Hours IV - Библиотеки, сборка и первая контрольная точка
• Шаблон плана проектной работы для первой контрольной точки