Основы front-end web-разработки

Данная программа рассчитана на учащихся 7-9 классов. После получения общих сведений о структуре web-сайтов и знакомства со способами их создания учащиеся приступают к изучению языка HTML. Знание языка разметки страниц является необходимым для начинающего web-мастера, потому что дает возможность увидеть web-страницу «изнутри», понять, что она собой представляет. Неотъемлемой частью современных технологий сайтостроения является разработка Web-страниц средствами CMS. Поэтому следующим этапом программы является знакомство учащихся со способами создания web-сайтов при помощи системы Joomla. Научившись создавать web-страницы, учащиеся должны научиться управлять этими страницами. На данном этапе некоторое внимание уделено изучению программирования как такового, а также возможностей JavaScript в написании сценариев. Рассматриваются принципы создания сценариев. Учащиеся осваивают, как с помощью языка программирования JavaScript можно изменять значения атрибутов HTML-контейнеров, обрабатывать события. Логическим завершением курса является объединение полученных знаний – творческая работа. На данном этапе учащиеся реализуют свой проект сайта, где каждый может проявить свои склонности и таланты. Темы проектов может предложить, как педагог, так и воспитанники кружка самостоятельно могут выбрать интересующее их направление и тему. В курсе реализован прежде всего практический метод, который является неотъемлемой частью дополнительного образования. Каждое занятие, предусматривает выполнение заданий или реализацию проекта (творческой работы).

Педагоги

Иванов Кирилл Юрьевич, педагог дополнительного образования, центра развития современных компетенций детей «АмурТехноЦентр» (Дом научной коллаборации им. академика РАН М.Т. Луценко)

Содержание программы

  1. HyperText Markup Language (Теория - 4 часа, практика - 2 часа);
  2. Cascading Style Sheets (Теория - 4 часа, практика - 2 часа);
  3. CSS. Выравнивание и эффекты (Теория - 3 часа, практика - 3 часа);
  4. JavaScript. DOM, переменные и функции (Теория - 3 часа, практика - 3 часа);
  5. JavaScript.Условные конструкции и циклы (Теория - 3 часа, практика - 3 часа);
  6. JavaScript. Структуры данных (Теория - 3 часа, практика - 3 часа);
  7. JQuery (Теория - 3 часа, практика - 3 часа);
  8. Bootstrap (Теория - 2 часа, практика - 4 часа);
  9. CSS позиционирование. Методология БЭМ (Теория - 3 часа, практика - 3 часа);
  10. Canvas рисование (Теория - 3 часа, практика - 3 часа);
  11. Игра «Пятнашки» (Теория - 3 часа, практика - 3 часа);
  12. Игра «Flappy bird» (Теория - 3 часа, практика - 3 часа).

Итого: 72 часа (Теория - 36 часов, практика - 36 часов)

Цели программы

  • Сформировать элементы информационной компетенции в области web-технологий; 
  • Научить учащихся ориентироваться и продуктивно действовать в информационном Интернет-пространстве; 
  • Получать и развивать теоретические знания и практические навыки в области сайтостроения и Web-дизайна; 
  • Формировать и развивать навыки самостоятельной работы и самообучения при выполнении заданий; 
  • Реализовывать коммуникативные, технические, творческие и эвристические способности учащихся в ходе проектирования и конструирования сайтов.  

Результат программы

Учащиеся должны знать: 

  • Структуру web-узла; 
  • Этапы проектирования web-сайта;
  • Основные этапы тестирования web-сайта; 
  • Правила создания хорошего web-сайта; 
  • Набор необходимых инструментов для создания web-страниц; 
  • Различия растрового и векторного способов представления графической информации; 
  • Основные средства для работы с графической информацией; 
  • Проблемы преобразования и оптимизации графических файлов; 
  • Основные конструкции языка HTML; 
  • Основные конструкции языка программирования JavaScript; 
  • Принципы работы с web-редакторами; 
  • Основные средства редактирования web-страниц; 
  • Правила размещения web-сайта в Интернете. 


Учащиеся должны уметь: 

  • Применять графический редактор для создания и редактирования графических изображений; 
  • Оптимизировать графические изображения для web-страниц; 
  • Оформлять HTML-страницы, используя язык разметки HTML; 
  • Понимать сценарии на языке JavaScript; 
  • Создавать сайты при помощи web-редактора; 
  • Готовить, тестировать и размещать web-сайт в сети Интернет.


Результатом обучения по программе «Сайтостроение» является защита проекта Web-сайта, посвященного выбранной тематике. Достаточно, чтобы Web-сайта состоял из 5-7 страниц.

Особые условия проведения

На занятия необходимо иметь тетрадь и пишущие принадлежности.  
Правила поведения: запрещается входить в класс без приглашения или в отсутствие преподавателя, самостоятельно включать и выключать компьютеры, в том числе подключать компьютеры к сети питания. Запрещается приносить в аудиторию еду и напитки. Обязательно иметь сменную обувь. В случае ношения очков необходимо приходить на занятия в очках.

Материально-техническая база

  • Персональные компьютеры, с предустановленным программным обеспечением (пакет программ ADOBE (Illustrator, Photoshop));
  • Интерактивная панель;
  • Маркерная доска;
  • Ученические столы и стулья.