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

Материал из Wiki - Факультет компьютерных наук
Перейти к: навигация, поиск
(Чему вы научитесь?)
 
(не показано 39 промежуточных версии 5 участников)
Строка 2: Строка 2:
 
|name=Web-сайт на клиентских технологиях
 
|name=Web-сайт на клиентских технологиях
 
|mentor=Копцов Александр
 
|mentor=Копцов Александр
|mentor_login={{URLENCODE:{{REVISIONUSER}}|WIKI}}
+
|mentor_login={{URLENCODE:Akoptsov|WIKI}}
|semester=Весна 2015
+
|semester=Весна 2016
 
|course=1
 
|course=1
 
|summer=
 
|summer=
Строка 10: Строка 10:
  
 
=== Что это за проект? ===
 
=== Что это за проект? ===
Итог проекта - создание web-сайта на одну из представленных тем с использованием клиентских технологий. Реализация серверной части сайта в этот проект не входит.
+
[http://www.slideshare.net/katyacherniak/koptsovwebintroduction (презентация проекта)]
 +
==== Итог проекта ====
 +
Создание web-сайта на одну из представленных тем с использованием клиентских технологий. Реализация серверной части сайта в этот проект не входит.
  
Полезность проекта - помимо чисто утилитарной полезности сайта (одним из заданий будет создание персональной страницы, которая может пригодиться в будущем) проект полезен тем, что даёт некоторое представление об устройстве той части Сети, которую мы ежедневно видим в браузере.
+
==== Полезность проекта ====
 +
Помимо чисто утилитарной полезности сайта (одним из вариантов задания будет создание персональной страницы, которая может пригодиться в будущем) проект полезен тем, что даёт некоторое представление об устройстве той части Сети, которую мы ежедневно видим в браузере.
  
 
=== Чему вы научитесь? ===
 
=== Чему вы научитесь? ===
Строка 21: Строка 24:
 
=== Какие начальные требования? ===
 
=== Какие начальные требования? ===
 
* Умение пользоваться текстовым редактором
 
* Умение пользоваться текстовым редактором
  * Желание узнать про клиентскую разработку для web
+
* Желание узнать про клиентскую разработку для web
  
 
=== Какие будут использоваться технологии? ===
 
=== Какие будут использоваться технологии? ===
 
* git, github
 
* git, github
* HTML, CSS
+
* HTML, CSS
* JavaScript
+
* JavaScript
  
 
=== Темы вводных занятий ===
 
=== Темы вводных занятий ===
 
+
* Использование HTML и CSS в клиентской разработке
 +
* Язык программирования JavaScript, браузер как среда выполнения
 +
* Особенности разработки интерфейсов вообще и web-интерфейсов в частности
  
 
=== Направления развития ===
 
=== Направления развития ===
 
* Представление клиентской части - визуальные эффекты, адаптивность
 
* Представление клиентской части - визуальные эффекты, адаптивность
  * Реализовать сложную клиентскую логику, используя предоставляемые браузером API
+
* Реализовать сложную клиентскую логику, используя предоставляемые браузером API
  * Добавить динамику в сайт, используя AJAX-запросы к данным и шаблонизацию
+
* Добавить динамику в сайт, используя AJAX-запросы к данным и шаблонизацию
  * Применить некоторые из известных технологий организации клиентского кода - сборку и минификацию скриптов, CSS-препроцессоры
+
* Применить некоторые из известных технологий организации клиентского кода - сборку и минификацию скриптов, CSS-препроцессоры
  
 
=== Критерии оценки ===
 
=== Критерии оценки ===
Критерии оценки примерно такие:
 
  
Минимальные требования к сайту (на 4 балла):
+
==== Минимальные требования к сайту (на 4 балла): ====
  * Соответствует макету задания (если студент взял готовый вариант)
+
* Соответствует макету задания (если студент взял готовый вариант)
  * Имеет не менее 3 разных страниц, оформленных в едином стиле, с межстраничной навигацией (если студент придумал свой вариант)
+
* Имеет не менее 3 разных страниц, оформленных в едином стиле, с межстраничной навигацией (если студент придумал свой вариант)
  * Имеет нетривиальную клиентскую логику. Примеры: аккордеон, баннер с переключающимися картинками на JS
+
* Имеет нетривиальную клиентскую логику. Примеры: аккордеон, баннер с переключающимися картинками на JS
  * Открывается без ошибок, и более-менее одинаково выглядит в актуальных десктопных версиях IE, Chrome, Firefox, Яндекс.Browser, Safari и Opera.
+
* Открывается без ошибок и более-менее одинаково выглядит в актуальных десктопных версиях 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
  
Дополнительно:
+
=== Материалы ===
  * Использование эффектов СSS3 в оформлении: +1 балл
+
*[https://goo.gl/Tl89RL Office Hours I - Организационная часть, ресурсы, инструменты]
  * Использование AJAX: +1 балл
+
*[https://goo.gl/mJRe9A Office Hours II - HTML и CSS]
  * Использование шаблонизации: +1 балл
+
*[https://goo.gl/Cv9vth Домашнее задание по HTML и CSS]
  * Сборка CSS: +1 балл
+
*[https://goo.gl/9ivoKh Office Hours III - JavaScript]
  * Минификация и сборка JS: +1 балл
+
*[https://goo.gl/GyWvYh Домашнее задание по JavaScript]
  * Нетривиальное использование браузерных API (localStorage, etc.): +1 балл
+
*[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

Материалы