Web-сайт на клиентских технологиях (проект) — различия между версиями
Материал из Wiki - Факультет компьютерных наук
Akoptsov (обсуждение | вклад) (→Какие будут использоваться технологии?) |
|||
| (не показано 35 промежуточных версии 5 участников) | |||
| Строка 2: | Строка 2: | ||
|name=Web-сайт на клиентских технологиях | |name=Web-сайт на клиентских технологиях | ||
|mentor=Копцов Александр | |mentor=Копцов Александр | ||
| − | |mentor_login={{URLENCODE: | + | |mentor_login={{URLENCODE:Akoptsov|WIKI}} |
| − | |semester=Весна | + | |semester=Весна 2016 |
|course=1 | |course=1 | ||
|summer= | |summer= | ||
| Строка 10: | Строка 10: | ||
=== Что это за проект? === | === Что это за проект? === | ||
| − | Итог проекта | + | [http://www.slideshare.net/katyacherniak/koptsovwebintroduction (презентация проекта)] |
| + | ==== Итог проекта ==== | ||
| + | Создание web-сайта на одну из представленных тем с использованием клиентских технологий. Реализация серверной части сайта в этот проект не входит. | ||
| − | Полезность проекта | + | ==== Полезность проекта ==== |
| + | Помимо чисто утилитарной полезности сайта (одним из вариантов задания будет создание персональной страницы, которая может пригодиться в будущем) проект полезен тем, что даёт некоторое представление об устройстве той части Сети, которую мы ежедневно видим в браузере. | ||
=== Чему вы научитесь? === | === Чему вы научитесь? === | ||
| Строка 29: | Строка 32: | ||
=== Темы вводных занятий === | === Темы вводных занятий === | ||
| − | + | * Использование HTML и CSS в клиентской разработке | |
| + | * Язык программирования JavaScript, браузер как среда выполнения | ||
| + | * Особенности разработки интерфейсов вообще и web-интерфейсов в частности | ||
=== Направления развития === | === Направления развития === | ||
| Строка 38: | Строка 43: | ||
=== Критерии оценки === | === Критерии оценки === | ||
| − | |||
==== Минимальные требования к сайту (на 4 балла): ==== | ==== Минимальные требования к сайту (на 4 балла): ==== | ||
| Строка 44: | Строка 48: | ||
* Имеет не менее 3 разных страниц, оформленных в едином стиле, с межстраничной навигацией (если студент придумал свой вариант) | * Имеет не менее 3 разных страниц, оформленных в едином стиле, с межстраничной навигацией (если студент придумал свой вариант) | ||
* Имеет нетривиальную клиентскую логику. Примеры: аккордеон, баннер с переключающимися картинками на JS | * Имеет нетривиальную клиентскую логику. Примеры: аккордеон, баннер с переключающимися картинками на JS | ||
| − | * Открывается без ошибок | + | * Открывается без ошибок и более-менее одинаково выглядит в актуальных десктопных версиях IE(Edge), Chrome, Firefox, Яндекс.Browser, Safari и Opera. |
==== Дополнительно: ==== | ==== Дополнительно: ==== | ||
| Строка 53: | Строка 57: | ||
* Минификация и сборка JS: +1 балл | * Минификация и сборка JS: +1 балл | ||
* Нетривиальное использование браузерных API (localStorage, etc.): +1 балл | * Нетривиальное использование браузерных API (localStorage, etc.): +1 балл | ||
| + | |||
| + | Плюс к этому, качественный дизайн и техническое выполнение проекта может принести ещё 1-2 бонусных балла | ||
==== Соответствие баллов и оценок ==== | ==== Соответствие баллов и оценок ==== | ||
| − | + | 4-5: зачёт | |
| − | + | ||
| − | + | 6-7: хорошо | |
| + | |||
| + | 8-10: отлично | ||
| + | |||
| + | ==== Расписание занятий ==== | ||
| + | ПН, 18:10, ауд. 322 | ||
| + | |||
| + | === Материалы === | ||
| + | *[https://goo.gl/Tl89RL Office Hours I - Организационная часть, ресурсы, инструменты] | ||
| + | *[https://goo.gl/mJRe9A Office Hours II - HTML и CSS] | ||
| + | *[https://goo.gl/Cv9vth Домашнее задание по HTML и CSS] | ||
| + | *[https://goo.gl/9ivoKh Office Hours III - JavaScript] | ||
| + | *[https://goo.gl/GyWvYh Домашнее задание по JavaScript] | ||
| + | *[https://goo.gl/zU0ZvP Office Hours IV - Библиотеки, сборка и первая контрольная точка] | ||
| + | *[https://goo.gl/iZrMrc Шаблон плана проектной работы для первой контрольной точки] | ||
Текущая версия на 16:24, 28 июля 2017
| Ментор | Копцов Александр |
| Учебный семестр | Весна 2016 |
| Учебный курс | 1-й курс |
Что это за проект?
Итог проекта
Создание 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 - Библиотеки, сборка и первая контрольная точка
- Шаблон плана проектной работы для первой контрольной точки
