Как сделать список сайтов для проекта

Добавил пользователь Владимир З.
Обновлено: 05.10.2024

Проект по созданию сайта был разработан совместно с учащимися гимназии. Проект основан на краеведческом материале, который находится в открытом доступе в сети Интернет. Данный проект был представлен на Образовательном Форуме и в составе других экспонатов получил Золотую медаль форума.

Оценить 6279 0

Содержание

2. Постановка проблемы

4. Ожидаемый результат

5. Задачи проекта

6. Этапы работы над проектом

7. Результаты работы

8. Выводы и перспективы

Введение

Формирование единого информационно-образовательного пространства – это требования времени и общества. Сайт – упорядоченная информация, доступная по сети Интернет. Он отражает деятельность сообщества, дает учащимся потенциальную сферу деятельности, являясь связующим звеном между учеником и учителем при необходимости дистанционного обучения.

Постановка проблемы

Создание сайта требует специальных знаний и владения технологиями Интернет и элементарными навыками RSS кодирования. Очень часто сайты разрабатываются специалистами, не обладающими педагогическим образованием и опытом. Сайты могут быть самой разной направленности. Когда сайт создается педагогом, то чаще всего он призван служить педагогическим целям.

У меня, как учителя иностранного языка, есть свой сайт ( www . english . ucoz . de ), который помогает мне в работе и способствует овладением учениками навыками чтения, аудирования, монологической речи, лексико-грамматическими навыками.

В школьном кружке Гимназия.ру совместно с учениками, ознакомившись с целями и структурой сайтов www . gimn 1. ru и www . english . ucoz . de , мы озадачились созданием нового сайта, который будет актуальным и который можно будет использовать в дистанционном обучении.

Новизна проекта

Новизна ресурса заключается в синдикации данных посредством RSS. Web-синдикация, или просто синдикация, создана на основе технологии RSS и представляет собой одновременную публикацию одного и того же материала на различных страницах или web-сайтах. Технология RSS открывает следующие возможности для пользователей: возможность пользователям самостоятельно наполнять сайты содержимым (добавление статей, фотографий, аудио и видео-роликов, редактирование и комментирование материалов); возможность наблюдать историю правки тех или иных материалов и активности отдельных пользователей. Таким образом, под данной технологией понимают второе поколение сетевых услуг, действующих в глобальной сети Internet.

Цель проекта

Поиск актуальной цели для образовательного сайта, изучение технологии его создания. Создание и размещение в сети Интернет.

Задачи проекта

Для достижения поставленной цели были поставлены задачи:

Определить технологии создания сайта.

Определить структуру сайта. Создать шаблон сайта с определенным дизайном заголовка и страниц.

Собрать, структурировать и обработать материал для размещения на сайте.

Произвести наполнение сайта.

Опубликовать сайт в сети Интернет.

Ожидаемый результат

Актуальный, структурированный, наполненный материалом и размещенный в сети Интернет сайт.

7. Этапы работы над проектом

Определение технологии создания сайта.

К моменту начала работы над проектом имелись следующие входные данные:

Существуют сайт школы gimn 1. ru и сайт учителя анлийского языка english . ucoz . ru . Была изучена их структура и технологии создания.

Выбор технологии, хостинга и доменнного имени сайта были вписаны в существующие возможности.

Технология системы UCOS оказалась доступной для освоения. Программа имеет интуитивно понятный интерфейс, возможности просмотра вида реального сайта.

Определение структуры сайта. Создание шаблона сайта с определенным дизайном заголовка и страниц

Сайт разбит на две колонки.

В правой колонке располагается основное меню сайта, в средней колонке – основная информация.

Для удобства навигации над основным материалом вынесено основное горизонтальное меню сайта

В шапке сайта размещена фотография Гимназии

Выбран дизайн страниц.

Сбор, структурирование и обработка материалов для сайта

Проведение совещаний учащихся для определения актуальности и тематики сайта. Выбор был сделан в пользу краеведческого сайта на английском языке, посвященному 300-летию Кузбасса.

Сбор фотографий для фотогалереи.

Подбор материалов для статей сайта от методистов и психологов.

Редактирование материалов, обработка фотографий.

Структурирование информации и размещение в отдельных папках диска.

Наполнение сайта

Размещение фотографии Гимназии и обратного счетчика до 300-летия Кузбасса.

Работа с конструктором сайтов, освоение интерфейса и возможностей.

Создание меню и страниц сайта.

В состав страниц вошли: Кузбасс, Кемерово, Растения Кузбасса, Животные Кузбасса, фотогалерея, Природные ископаемые, Новые слова, Упражнения.

Размещение текстов, рисунков.

Размещение документов и презентаций.

Создание гиперссылок на них.

8. Публикация сайта

Публикация сайта. Просмотр и редактирование.

Внесение изменений в структуру сайта.

Составление списка недостающих материалов.

Результаты работы

В результате работы над проектом в сети Интернет опубликован сайт краеведения Кузбасса. Адрес сайта www .300. usite . pro . Представляемый ресурс создан на базе RSS и предлагает дистанционное обучение как один из вариантов использования педагогами и учениками.

Актуальность работы определяется актуальностью темы 300-летия Кузбасса.

Ресурс основан на общедоступной информации, касающейся Кузбасса, Кемерова, истории, растениях и животных нашего края. Целевая аудитория – педагоги и ученики, интересующиеся своей малой Родиной и английским языком, так как основной язык контента – английский.

На главной странице ресурса предложено контекстное меню, которое осуществляет выбор между страницами Kuzbass , Kemerovo , Nature, History, 300, Animals, Plants, Mineral Resourses . Данные разделы представляют интерес с точки зрения страноведения.

Тексты на английском языке стимулируют познавательный интерес учащихся к предмету Английский язык в связи с узуальным наполнением. Кроме того, дети имеют возможность ознакомиться с новым вокабуляром в контекстном режиме, что повышает практико-ориентированную ценность ресурса. Также учащиеся имеют возможность развивать монологическую и диалогическую речь с визуальной опорой на основе представленных текстов.

На странице Excercises предложены упражнения на основе лексического материала и текстового сопровождения представляемого ресурса.

Пункт Nature в горизонтальном контекстном меню и страница Photo Albums в вертикальном меню ссылаются на страницу с визуальным сопровождением в виде фотографий природы Кузбасса, представляющих эстетическую ценность. Кроме того, в данном разделе предполагается работа по созданию монологом на основе фотографии в соответствии с заданиями ОГЭ И ЕГЭ.

Со временем планируется расширение материала, добавление контента как текстового, так и графического. Имеется обширная коллекция старинных фотографий родного города, которые будут обработаны и так же размещены для ознакомления и изучения.

Ценность ресурса в том, что приводятся не только тексты, но так же и список новых слов на английском, а также упражнения для дополнительных занятий в условиях дистанционного обучения либо для использования в классе. Работа со страницами сайта нацелена на развитие всех речевых навыков английского языка в соответствии с заданиями ЕГЭ.

10. Выводы

Результатом проекта является Интернет-продукт, созданный по технологии RSS второго поколения, хорошо структурированный и имеющий большое наполнение практическим материалом.

Сайт предоставляет дополнительные возможности для осуществления дистанционного обучения.

Сайт по краеведению Кузбасса, основной язык – английский.

Целевая аудитория ресурса – педагоги и учащиеся, интересующиеся краеведением Кузбасса и английским языком.

Разделы сайта разносторонне развивают речевые навыки и помогают в изучении английского языка в школе.

Изученная технология создания сайтов может быть предложена учащимся для реализации в проектной деятельности, ведения личных страниц, сайтов по интересам.

Навыки по обработке текстов и графики могут быть использованы как в работе самого учителя, так и во внеурочной деятельности учащихся при работе над проектами, создании презентаций.

11. Источники

5. Стефенс М., Триз Р., Компьютер для детей.-М.: АСТ-ПРЕСС, 2000.

8.Краеведение Кузбасса (на английском языке)[Текст]: учебное пособие / сост.: Е. И. Александрова, Н. А. Галдина, К. Е. Годунова и др. – Кемерово:

Как составить план проекта по разработке сайта

Представьте, что вы первый раз столкнулись с необходимость разработки сайта. Как ничего не забыть по дороге и уже на начальном этапе прикинуть финансовые и трудозатраты? Ниже я делюсь своим опытом по составлению плана проекта разработки продающего сайта компании сферы услуг.

Существуют более простые варианты, такие как сделать Landing Page с помощью сервиса LP Generator или подобного ему. Можно не ограничиваться одностраничником и сделать полноценный сайт на конструкторе сайтов. Это рабочие варианты, я никого не отговариваю от них. Все зависит от целей, которые вы ставите перед сайтом и, соответственно, от ваших требований. Я предлагаю план проекта многостраничного сайта с ориентацией на SEO продвижение без использования конструктора сайтов.

Определение основных блоков работ

Задача разработки сайта включает в себя различные этапы, в которых задействованы различные специалисты. Я начинаю с определения основных крупных блоков. В этот момент план выглядит так:

Классический маркетинг: знакомство с продуктом, конкурентами, разработка УТП
Подбор семантики
Разработка структуры сайта
Прототипирование
Дизайн
Верстка
Программирование
Тестирование
Запуск

Картинка становится более четкой, но не хватает деталей, поэтому дроблю крупные задачи на более мелкие.

Примерное количество и типы страниц

Для расчета плана по проекту я составляю ориентировочный список страниц сайта и типы задач, которые необходимы для данной страницы. Это помогает мне делать расчет по трудочасам по задачам. Список страниц скорее всего в ходе работы будет меняться, но на данном этапе для расчетов будет достаточно. Табличка будет выглядеть примерно так.

Детализация списка задач

Расчет сроков проекта

Большая часть работы сделана, дальше расписываем полученные часы по дням. Некоторые этапы будут идти параллельно. Я привожу для примера расчет, когда над проектом работает 1 специалист каждого направления, соответственно, максимальное количество рабочих часов в день – 8 часов на специалиста.

Таблица большая, поэтому даю ссылку на Google таблицу, где можно посмотреть готовый результат.

В конце я привожу трудозатраты на каждого специалиста. Таким образом, зная ставку в час, можно прикинуть расходы на проект. Таблица выглядит так.

Специалист	Часов	Дни
Маркетолог	261	33
SEO-спец	100	13
Дизайнер	82	10
Верстальщик	104	13
Программист	91	11
Маркетолог/Программист	16	2
Верстальщик/Программист	16	2
Копирайтер/Маркетолог	90	11

Также добавляю общую таблицу по срокам проекта.

Часов	Дни
Итого время на проект:	760	62
Рабочих дней в мес	20
Срок проекта (мес.)	3.1

Я понимаю, что 62 дня не равняется 760 часам. Разница обусловлена за счет одновременного выполнения части задач разными специалистами.

Данный план по разработке сайта выработан на основе личного опыта и не является единственным правильным вариантом. Но, надеюсь, будет полезен в качестве отправной точки, если вы занимаетесь разработкой сайта впервые или, как представитель бизнеса, планируете заказать сайт в студии и хотите лучше понимать данный процесс.

Улучшить интерфейс приложения, сделать прототип сайта, сэкономить время и ресурсы поможет обновленная подборка бесплатных приложений для веб-дизайнеров и разработчиков.

Собрали качественные, бесплатные и простые в использовании инструменты, чтобы веб-мастеры могли сэкономить время и силы в создании и улучшении пользовательских интерфейсов, комплексных приложений и сайтов.

В статье:

Создать прототип сайта

Бесплатные сервисы для создания прототипа сайта перед отрисовкой дизайна и программированием

Создание прототипов в Figma

Известный бесплатный инструмент для отрисовки наглядных интерактивных прототипов страниц сайта.

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

Настройка всплывающего окна заявки

Клиент может прямо на прототипе оставлять комментарии к элементам.

Создание прототипов в Lucidchart

Lucidchart — инструмент для создания диаграмм, блок-схем, алгоритмов, диаграмм кадров организации, планировок этажей, диаграмм Венна, SWOT-анализов и макетов сайтов, так что он подходит и для прототипирования сайтов и приложений. Полный список инструментов.

Фрагмент демонстрационного прототипа

Система облачная, так что платная версия позволяет нескольким людям работать над одним проектом одновременно. В бесплатной можно работать одному и проекты ограничены 60 элементами.

У инструмента есть расширение для Google Chrome, так что с его помощью можно быстро добавить диаграммы из Lucidchart в документы и таблицы Google.

Рисование прототипа веб-страницы в Pencil

Бесплатная программа с открытым исходным кодом для рисования прототипов страниц сайта.

В программе есть шаблоны страниц для десктопа, Android и iOS, шаблоны для разных интерфейсных элементов, возможность искать клипарты из интернета, функции рисования диаграмм. Между отрисованными в программе страницами можно сразу настраивать внутренние ссылки, чтобы нагляднее представлять навигацию по сайту.

Отрисовка страницы сайта в программе

Выравнивание текста по сетке с помощью Sassline

Перед разработкой дизайна проекта составляют его прототип — схематичный рисунок страницы с указанием пропорций и расположения всех элементов навигации и контента. Можно отрисовывать страницы вручную в редакторах, но быстрее и проще будет использовать специальные инструменты.

Сервис Sassline помогает составить прототип страниц будущего сайта, гармонично разместить элементы, легко выровнять их расположение по базовой сетке.

Фрагмент примера страницы с линейками

PSD-шаблон для посадочной страницы

К примеру, мы нашли бесплатный psd-шаблон для одностраничного сайта, которым поделился дизайнер Arifur Rahman Tushar.

Внешний вид страницы

Вы можете взять его за основу и отредактировать под свой проект — поменять местами блоки, добавить свой текст и иллюстрации.

Мы проверили файл в Adobe Photoshop 2017: открывается, слои на месте, но скорее всего понадобится докачать шрифты.

Улучшить интерфейс сайта или приложения

Сервисы для работы с внешним видом интерфейса проекта: анимация элементов, настройка блоков навигации.

Коллекция решений для интерфейса CodyHouse Framework

Библиотека компонентов HTML, CSS, JavaScript для оформления интерфейса сайта. Все предложенные решения легкие, не требуют переопределения существующих правил CSS и адаптированы под мобильные.

В коллекции есть варианты для интересной настройки фона, оформления кнопок, меню, иллюстраций, веток комментариев, навигации, статей и других элементов, плагины для карусели и слайдшоу.

Интерфейс каталога

Элементы можно отредактировать, к примеру, заменить цветовое оформление и изображения. На страницах сайта есть подробное объяснение для установки и редактирования элементов. Как установить фреймворк

Есть много бесплатных вариантов, платные доступны в Pro-версии, она стоит 89 долларов в год

Улучшенный MV-фреймворк JSBlocks beta

В работе над простым или сложным приложением с анимациями разработчики используют фреймворки. Эти платформы позволяют упростить работу и автоматизировать часть действий, чтобы сэкономить силы и допускать меньше ошибок.

Обычно фреймворки обрабатывают только клиентскую часть, но есть платформа JSBlocks beta — комплексный улучшенный фреймворк, который работает еще и с базами данных и службами.

JSBlocks beta данных подходит для создания проектов любой сложности — простых пользовательских интерфейсов и комплексных приложений, за это отвечает модуль jsblocks MVC (Model-View-Collection). Примеры проектов на GitHub: TodoMVC и E-shopping.

Код запросов пишется на HTML, так что не надо изучать новый синтаксис. JSBlocks beta легко освоить, для использования достаточно скопировать и вставить код элемента, продолжить работу с документацией и стартовым шаблоном. Есть API.

Как работать в JSBlocks beta: обучение.

Product Tour — отзывчивый тур по сайту или приложению для пользователей

Перед покупкой программы или сервиса пользователь ищет информацию: что его ждет после приобретения, какие функции доступны, как выглядит интерфейс, как этим пользоваться. На основе найденного он будет решать, стоит ли вообще делать покупку.

Лучший способ познакомить пользователя с продуктом — наглядно показать, как он работает. При этом может быть недостаточно просто записать гифку с тем, как вы кликаете по разделам приложения — часто нужны подписи, пояснения и возможность поставить демонстрацию на паузу.

Для этой цели существует Product Tour — инструмент для создания пошагового руководства по использованию сайта или приложения. Он реализован с помощью CSS и JQuery, подстраивается под размер устройства пользователя.

Пример механики демонстраций

Отрисовать дизайн сайта или приложения

Интересные решения для оформления: дизайнерские иконки, подбор цветов и стилей.

След от курсора

Креативный разработчик и 3D-дженералист Натан Гордон поделился своей разработкой — фреймворком OGL. Это библиотека кодов WebGL, которая избавляет от необходимости писать сложные коды вручную. Библиотека легкая, например, классы OGL, которые нужны для этого эксперимента, в сжатом виде весят 13kb.

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

Не перестарайтесь с анимациями и украшениями на странице — если скорость загрузки сайта значительно увеличится, пользователи не будут долго ждать и уйдут.

Деформация надписи или фона

По такому же принципу, как работает интерактивный след от курсора, можно настроить деформирование фона или надписи курсором мыши. Цель такая же — заинтересовать пользователя, чтобы он какое-то время играл с надписью или фоном, задержать его на сайте и запомниться интересной фишкой.

В этом примере настроили неподвижный фон и деформирование надписи от движений курсора:

Демонстрационный пример

Полезная подборка CSS хаков

В подборку попали интересные фишки для дизайна интерфейсов, которые можно настроить с помощью стилей CSS. К примеру, в списке есть коды для настройки скругленных кнопок, меню, прокрутки, выравнивания, сбора e-mail, анимации для кнопок и других возможностей сделать дизайн интереснее и нагляднее.

Варианты на сайте оформлены в удобных окошках: можно сразу посмотреть результат и скопировать варианты в HTML, SCSS, JS.

Демонстрация интерактивных кнопок

Определение цветов по картинке

Демонстрация работы

Инструмент использует Vibrant.js от Jari Zwarts для извлечения цветов из изображений.

Бесплатный набор иконок для фитнес-проекта

Дизайнер Jacek Janiczak выложил набор иконок, который он разработал под фитнес-проект, с разрешением использовать их в коммерческих целях. Иконки хоть и сделаны для фитнес-тематики, но выглядят вполне универсально.

Демонстрация иконок из набора

Бесплатный набор иконок в разных цветах

В наборе 48 иконок в разных цветовых вариациях, в сумме получается 144 значка. Иконки можно редактировать и использовать для личных и коммерческих проектов.

Демонстрация набора

Бесплатный сет иконок Smart House на Dribbble

Примеры доступных иконок

Стикеры из набора

Расскажите, какую подборку инструментов, идей или шаблонов вам было бы интересно увидеть в блоге?

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

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

В настоящее время у каждой школы сформированы собственные методические требования к написанию и оформлению проектной работы.

Проектная работа должна быть построена по определенной структуре.

Структура проектной работы включает в себя

Титульный лист.
Содержание (наименование всех глав и параграфов с указанием номеров страниц, на которых размещается материал).
Введение.

Структурными элементами введения являются

актуальность темы исследования;
проблема исследования;
цель исследования;
задачи;
объект и предмет исследования;
гипотеза;
теоретическая основа исследования;
практическая значимость исследования;
методы исследования;
структура работы.

Проектная работа может быть

исследовательской (доказательство или опровержение гипотезы с использованием современных научных методов);
информационной (сбор информации о каком-либо объекте или явлении, обобщение и анализ данной информации);
практико-ориентированной, социальной (направленной на решение социальной проблемы прикладного характера или практических задач);
творческой (творческий продукт – результат самореализации учащегося, привлечение интереса публики к проблеме проекта);
игровой или ролевой (представление опыта участия в решении проблемы проекта, проектант берет на себя роль исторических, литературных персонажей, выдуманных героев и т.п.).

Результатом работы над проектом является продукт, который разработан для разрешения поставленной проблемы. Продуктом проекта могут являться: буклет, памятка, карта, видеоролик, веб-сайт, игра, сценарий, справочник и т.д.

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

К проектной работе подготавливается презентация, содержащая основные положения для защиты работы, графическую информацию. Презентация визуализируется текст проектной работы. В презентации необходимо использовать сжатый, информационный способ изложения материала, она не должна полностью дублировать текст проекта, а дополнять и иллюстрировать то, о чем в нем идет речь. В текстовых блоках следует использовать короткие слова и предложения, заголовки составлять кратко для привлечения внимания аудитории.

Читайте также: