Технологии или программы которые вы используете

Это содержимое является выдержкой из электронной книги Архитектор современных веб-приложений с помощью ASP.NET Core и Azure, доступной в документации .NET или в виде бесплатного pdf-файла, который можно читать в автономном режиме.

«Веб-сайты должны хорошо выглядеть изнутри и изнутри». — Пол Куксон

Приложения ASP.NET Core являются веб-приложениями и обычно используют располагающиеся на стороне клиента веб-технологии, такие как HTML, CSS и JavaScript. Разделяя содержимое страницы (HTML), ее макет и стиль (CSS), а также поведение (JavaScript), сложные веб-приложения реализуют принцип разделения задач. Если эти задачи не связаны друг с другом, это значительно упрощает последующие изменения структуры, проекта или поведения приложения.

ОВД-Инфо: Топ-5 приложений, которые вы используете в работе и в жизни?

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

Blazor предоставляет альтернативу платформам JavaScript для создания многофункциональных интерактивных пользовательских интерфейсов клиента.

HTML

HTML — это стандартный язык разметки, используемый для создания веб-страниц и веб-приложений. Его элементы определяют стандартные блоки страниц, а также представляют форматированный текст, изображения, формы ввода данных и другие структуры. Когда браузер направляет запрос URL-адреса для получения страницы или приложения, в первую очередь возвращается HTML-документ. Этот HTML-документ может содержать ссылку или дополнительные сведения об оформлении или макете в виде CSS, а также о поведении в виде JavaScript.

CSS

Каскадные таблицы стилей (CSS) определяют оформление и макет элементов HTML. Стили CSS могут применяться непосредственно к элементу HTML, отдельно определяться на той же странице или определяться в отдельном файле, ссылка на который будет задаваться на странице. Каскад стилей определяется на основе того, как они используются для выбора конкретного элемента HTML.

Например, стиль может применяться ко всему документу и при необходимости переопределяться стилем отдельного элемента. Таким же образом стиль элемента можно переопределить стилем, применяемым к классу CSS элемента, который, в свою очередь, может переопределяться стилем, применяемым к конкретному экземпляру элемента по его идентификатору. Рис. 6-1

Рис. 6-1. Правила, определяющие порядок применения CSS.

Крутые функции LANGAME Software, которые вы не используете!

Стили рекомендуется хранить в отдельных файлах таблиц стилей и использовать основанные на выборе каскадные функции для согласованного применения стилей в рамках приложения. Не следует помещать стили в HTML. Кроме того, применение стилей к отдельным элементам (вместо классов элементов или элементов, к которым применяется конкретный класс CSS) должно осуществляться лишь в качестве исключения.

Препроцессоры CSS

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

Самыми популярными препроцессорами CSS являются Sass и LESS. Оба этих решения расширяют возможности таблиц стилей CSS и обеспечивают обратную совместимость с ними. Это значит, что обычный CSS-файл может открываться для работы в Sass или LESS. Sass и LESS разработаны соответственно на Ruby и JavaScript и обычно используются в рамках локального процесса разработки. Оба этих решения предлагают средства командной строки и встроенную поддержку выполнения в Visual Studio с помощью задач Gulp или Grunt.

JavaScript

JavaScript — это динамически интерпретируемый язык программирования, который был стандартизирован в спецификации ECMAScript. Это язык программирования для Интернета. Как и CSS, JavaScript может определяться в качестве атрибутов в элементах HTML, в виде блоков скрипта на странице, а также в отдельных файлах. Как и в случае с CSS, код JavaScript рекомендуется хранить в отдельных файлах, что позволяет в максимальной степени отделить его от кода HTML, который содержится на отдельных веб-страницах или в представлениях приложения.

При работе с JavaScript в веб-приложении обычно требуется выполнять ряд задач:

• Выбор элемента HTML и получение или обновление его значения.
• Запрос данных в веб-API.
• Отправка команды в веб-API (и ответ на функцию обратного вызова с его результатами).
• Выполнение проверки.

Эти задачи можно выполнять с помощью только JavaScript, однако вы также можете использовать множество готовых библиотек, позволяющих значительно упростить это. Одной из первых и самых популярных библиотек является jQuery, которая по-прежнему широко применяется для упрощения выполнения этих задач при работе с веб-страницами. Библиотека jQuery содержит немного возможностей для работы с одностраничными приложениями, поэтому в таких сценариях лучше использовать Angular и React.

Устаревшие веб-приложения с jQuery

Несмотря на почтенный по меркам платформ JavaScript возраст, библиотека jQuery по-прежнему широко применяется для работы с HTML/CSS и создания приложений, выполняющих вызовы AJAX к веб-API. Тем не менее jQuery работает на уровне модели DOM браузера и по умолчанию использует только императивную, а не декларативную модель.

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

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

Сравнение jQuery и SPA Framework

Фактор jQuery Angular

Абстракция модели DOM	Да	Да
Поддержка AJAX	Да	Да
Декларативная привязка данных	No	Да
Маршрутизация в стиле MVC	No	Да
Использование шаблонов	No	Да
Маршрутизация по прямым ссылкам	No	Да

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

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

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

Одностраничные приложения Angular

Angular остается одной из самых популярных в мире платформ JavaScript. С Angular 2 команда перестроила платформу с нуля (с помощью TypeScript) и переименовала исходное имя AngularJS на Angular. Сейчас, несколько лет спустя, Angular все равно остается одной из самых надежных платформ для построения одностраничных приложений.

Приложения Angular состоят из компонентов. Компоненты содержат шаблоны HTML в сочетании со специальными объектами и служат для управления отдельными частями страницы. Ниже показан простой компонент из документации Angular:

Работая с компонентами и шаблонами вместо элементов DOM, приложения Angular могут действовать на более высоком уровне абстракции с меньшим объемом кода по сравнению с приложениями, которые используют только JavaScript (базовый JS) или библиотеку jQuery. Angular также задает определенные способы организации файлов скриптов на стороне клиента. По соглашению приложения Angular используют общую структуру папок, в которой файлы модуля и скрипта компонента располагаются в папке приложения. Скрипты Angular, используемые при построении, развертывании и тестировании приложения, обычно располагаются в папке более высокого уровня.

Приложения Angular можно разрабатывать с помощью CLI. Чтобы начать локальную разработку с помощью Angular (для этого требуется предварительная установка Git и npm), достаточно клонировать репозиторий из GitHub и выполнить команды npm install и npm start . Кроме того, в состав Angular входит собственный CLI, который позволяет создавать проекты, добавлять файлы и помогает выполнять задачи тестирования, объединения в пакеты и развертывания. Высокий уровень поддержки CLI обеспечивает хорошую совместимость Angular с ASP.NET Core, где реализована поддержка CLI аналогичного уровня.

Корпорация Майкрософт предлагает справочное приложение eShopOnContainers, которое содержит реализацию одностраничного приложения Angular. Это приложение содержит модули Angular для управления корзиной покупок в интернет-магазине, загрузки и отображения элементов из каталога магазина, а также для обработки процесса создания заказа. Пример приложения можно просмотреть и скачать на сайте GitHub.

React

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

Важной особенностью React является использование виртуальной модели DOM. Виртуальная модель DOM в React дает целый ряд преимуществ, в том числе производительность (виртуальная модель DOM может оптимизировать процесс обновления отдельных частей реальной модели DOM) и тестируемость (возможность тестировать библиотеку React и ее взаимодействие с такой виртуальной моделью DOM без использования браузера).

Кроме того, React реализует непривычный способ работы с HTML. Вместо строгого разделения между кодом и разметкой (например, со ссылками JavaScript в атрибутах HTML) React добавляет HTML непосредственно в код JavaScript в виде JSX. JSX — это синтаксис в стиле HTML, который может компилироваться в чистый код JavaScript. Пример:

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

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

Vue

Из руководства по началу работы, мы знаем, что, «Vue — это прогрессивная платформа для создания пользовательских интерфейсов. В отличие от других монолитных платформ, Vue разрабатывается с нуля для постепенного внедрения. Основная библиотека сосредоточена только на слое представления, и ее легко подобрать и интегрировать с другими библиотеками или существующими проектами. С другой стороны, Vue идеально подходит для сложных одностраничных приложений в сочетании с современными инструментами и вспомогательными библиотеками».

Для начала работы с Vue его сценарий следует просто включить в HTML-файл.

После добавления платформы вы сможете декларативно визуализировать данные в модель DOM, используя простой синтаксис шаблона Vue:

затем добавьте следующий скрипт.

var app = new Vue( < el: ‘#app’, data: < message: ‘Hello Vue!’ >>)

Этого достаточно для отрисовки «Hello Vue!» на странице. Однако обратите внимание, что Vue не просто преобразовывает сообщение на разделитель один раз. Он поддерживает привязку баз данных и динамическое обновление, так что при изменении значения message , значение в сразу же обновляется, отражая его.

Разумеется, это всего лишь малая часть того, на что способен Vue. В течение последних нескольких лет он получает огромную популярность и имеет большое сообщество. Существует огромный и растущий список вспомогательных компонентов и библиотек, которые работают с Vue для его расширения. Если вы хотите добавить поведение на стороне клиента к вашему веб-приложению или рассматриваете возможность создания полноценного SPA, стоит изучить Vue.

Blazor WebAssembly

В отличие от других платформ JavaScript, Blazor WebAssembly — это платформа одностраничных приложений (SPA) для создания интерактивных клиентских веб-приложений с использованием .NET. Blazor WebAssembly использует открытые веб-стандарты без подключаемых модулей или перекомпиляции кода на другие языки. Blazor WebAssembly работает во всех современных веб-браузерах, включая браузеры мобильных устройств.

Выполнение кода .NET в веб-браузерах становится возможным благодаря технологии WebAssembly (сокращенно wasm ). WebAssembly — это компактный формат байт-кода, оптимизированный для быстрой загрузки и максимального быстродействия. WebAssembly — это открытый веб-стандарт, который поддерживается в веб-браузерах без подключаемых модулей.

Код WebAssembly может обращаться к любым функциям браузера через JavaScript благодаря поддержке взаимодействия с JavaScript (сокращенно JavaScript interop или JS interop). Код .NET, который обрабатывается через WebAssembly в браузере, выполняется в песочнице для JavaScript этого браузера, которая включает средства защиты от вредоносных действий на клиентском компьютере.

Выбор платформы одностраничных приложений

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

• Знакома ли ваша команда с платформой и ее зависимостями (включая TypeScript в некоторых случаях)?
• Насколько обособлена эта платформа и устраивает ли вас принятый для нее по умолчанию способ реализации различных задач?
• Включает ли платформа (или вспомогательная библиотека для нее) все возможности, которые использует ваше приложение?
• Хорошо ли это задокументировано?
• Насколько активно сообщество платформы? Используется ли платформа для создания новых проектов?
• Насколько активна основная команда разработчиков платформы? Решаются ли возникающие проблемы и насколько регулярно выпускаются новые версии?

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

Ссылки — клиентские веб-технологии

• HTML и CSS
  https://www.w3.org/standards/webdesign/htmlcss
• Сравнение Sass и LESS
  https://www.keycdn.com/blog/sass-vs-less/
• Задание стиля приложений ASP.NET Core с помощью LESS, Sass и Font Awesome
  https://learn.microsoft.com/aspnet/core/client-side/less-sass-fa
• Клиентская разработка в ASP.NET Core
  https://learn.microsoft.com/aspnet/core/client-side/
• jQuery
  https://jquery.com/
• Angular
  https://angular.io/
• React
  https://reactjs.org/
• Vue
  https://vuejs.org/
• Angular vs React vs Vue: Which Framework to Choose in 2020https://www.codeinwp.com/blog/angular-vs-vue-vs-react/ (Сравнение Angular, React и Vue. Какую платформу выбрать в 2020 г.)
• The Top JavaScript Frameworks for Front-End Development in 2020 (Лучшие платформы JavaScript для разработки внешнего интерфейса в 2020 г.)
  https://www.freecodecamp.org/news/complete-guide-for-front-end-developers-javascript-frameworks-2019/

Источник: learn.microsoft.com

10 современных веб-технологий, о которых вы должны знать

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

Web Components

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

На официальном сайте Web Components доступно множество практических примеров, но очень мало пояснений того, где они могут пригодиться.

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

Polymer

Когда вы познакомитесь с Web Components , вам может понадобиться библиотека Polymer . Этот проект с открытым исходным кодом запустил Google . Он предназначен для создания стандартизированных веб-компонентов.

Эта библиотека упрощает разработку, если вы работаете с Web Components API . С ее помощью вы получите встроенные элементы для добавления таких функций, как видео, слайдеры и даже виджеты Google Maps .

Целью Polymer является создание модульной структуры. Вот почему она позволяет создавать собственные виджеты на основе Web Components API . Таким образом появляется возможность добавить несколько виджетов на одну страницу без повторной записи кода.

Библиотека Polymer неразрывно связана с Web Components , и две эти технологии значительно изменяют методы модульной разработки сайтов.

AMP

Google всегда пытается улучшить интернет. Проект Accelerated Mobile Pages ( сокращенно AMP ) позволяет адаптировать любую веб-страницу для мобильных устройств по стандартному шаблону.

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

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

Gulp

Gulp позволяет автоматизировать рутинные задачи. Он умеет компилировать Sass в CSS , добавлять в код шаблоны или заплатки для браузеров, автоматически обновлять страницы после внесения в код каких-либо изменений.

TypeScript

Google недавно утвердил TypeScript в качестве предпочтительного языка для своего front-end фреймворка AngularJS . Это делает TS еще более привлекательным, потому что он помогает сэкономить время, как при написании общих скриптов, так и при разработке специализированных Angular-проектов .

TypeScript является не новым языком, а скорее надмножеством JavaScript . Поэтому, если вы знаете JS , вам будет легко использовать эту популярную веб технологию.

Three.js

Если вы следите за тенденциями WebGL и 2D / 3D веб-графики , то должны знать о Three.js . Это самый мощный движок рендеринга на основе JS , который можно использовать для веб-графики.

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

Лучшее в Three.js это то, что данная библиотека является бесплатным инструментом с открытым исходным кодом, поэтому она постоянно совершенствуется вместе с WebGL API .

Docker

С помощью контейнерной платформы Docker можно поддерживать полную виртуальную среду и легко переносить сайты на разные серверы. Виртуальные контейнеры содержат интерфейсы для простой передачи файлов с одного сервера на другой.

Если вы являетесь приверженцем IT / DevOps , тогда Docker — это обязательная для вас технология. В последнее время данная веб технология начала набирать популярность.

Ionic Framework

Это бесплатная платформа с открытым исходным кодом для разработки мобильных приложений под iOS и Android . Каждое приложение пишется на оптимизированном коде. Поэтому можно создавать программное обеспечение на JavaScript , но конечный результат будет выглядеть как оригинальное мобильное приложение Swift / Java .

На данный момент уже выпущена версия 1.3 , и Ionic получил большую поддержку со стороны веб-сообщества.

Библиотеки Zurb

Фреймворк Foundation — невероятно мощный инструмент. В последнем релизе разработчики выделили веб-фреймворк из Foundation for Emails , который теперь поддерживает автоматизацию и шаблоны для email-разработки.

Но еще больше мне нравится их новый Motion UI , предназначенный для создания анимации « на лету ». Можно создавать анимацию с помощью онлайн-инструмента Zurb и включать библиотеку Motion UI в любой проект на Foundation .

Google Web Starter Kit

Google предлагает множество полезных технологий веб разработки, и одной из них является Web Starter Kit . Это библиотека полезных ресурсов для создания сайтов, модульного кода Sass / CSS , локальных HTTP-серверов и многого другого.

Предполагается, что Web Starter Kit предоставляет все основные компоненты, которые потребуются веб-разработчику. Это стартовый набор, который является отличным бесплатным решением для начинающих разработчиков.

Источник: www.internet-technologies.ru

Цифровые технологии на уроках русского языка и литературы

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

Не обязательно жертвовать качеством работы ради отчёта. Напротив, качество можно повысить.

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

Цели использования электронных упражнений на уроках русского и литературы

Создание мотивации (ученики получат интересные разнообразные задания в том виде, к которому они привыкли).

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

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

Экономия времени (использование упражнений, которые можно организовать без компьютера, но с большими временными затратами).

Эффективность (использование эффективных упражнений, которые невозможно организовать без компьютера).

Формирование универсальных навыков.

Возможности, которые дают цифровые технологии

Автоматическая проверка (экономия времени преподавателя, возможность задавать на дом тренировочные диктанты) ЯКЛАСС, Лернинг апс, Решу ЕГЭ, ОГЭ, ВПР, образовательная платформа Лекта, Единая коллекция ЦОР(рекомендовано «Учитель года»)

Мультимедийность (возможность вставить в учебник звук, видео, что помогает лучше запомнить материал).

Интерактивность (включение в активную работу одновременно всех учеников группы, что даёт экономию времени). Мы работаем в классе и дома

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

Статистика ошибок (экономия времени ученика при работе со словарём, экономия времени учителя при анализе ошибок).Пликерс

Разнообразие (возможность быстро генерировать большое и даже бесконечное количество однотипных упражнений – экономия времени учителя, повышение качества образования для ученика).РЕШУЕГЭ

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

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

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

предлагать упражнения на сортировку слов, терминов, портретов писателей и т.д. с автоматической проверкой,

предлагать упражнения типа «вставь букву» с автоматической проверкой,

задавать на дом диктанты с записью диктора и автоматической проверкой,

предлагать зрительные диктанты с автоматическим таймером и проверкой,

предлагать интерактивные игры на зрительное запоминание слов, например, «Парочки»,

предлагать задания на поиск соответствий (определений и терминов, предложений и схем, слов с одним признаком, названий произведений и писателей),

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

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

создавать общие презентации,

создавать ментальные карты,

создавать профили литературных героев в соцсетях,

создавать хронологические ленты (история литературы),

создавать лендинги — презентации литератрурных произведений,

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

создавать облака тегов (слова на одно правило, слова произведения, логические задачи),

создавать копилки примеров и списки литературы в гуглдоках,

создавать читательские дневники в блогах,

создавать видеоролики по стихам и коротким рассказам,

создавать учебные мультфильмы,

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

работать с электронными обратными словарями для подбора рифм и слов на одно правило,

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

Этот перечень можно продолжать и продолжать. Технологии дают возможности, дело за вашей фантазией. Остановимся на некоторых из них
Сколько времени вам потребовалось бы на организацию зрительного диктанта для всего класса без компьютера? Если давать один вариант на всех, надо заранее написать предложение на доске, закрыть его и последить, чтоб на перемене никто не подсмотрел. На уроке открыть доску, засечь время, снова закрыть, собрать листочки для проверки или надеяться на качественную самопроверку.

Максимум можно дать 2 таких предложения, потому что укромных мест на доске ровно два (если доска вообще закрывается). Чтобы раздать каждому свой вариант, надо потратить минут пять, а потом следить, чтоб все перевернули листочки и не списывали. В общем, одна возня, поэтому мало кто использует зрительные диктанты, хотя все понимают, что такая работа очень полезна. Автоматизированный зрительный диктант вместе с проверкой занимает не более 2 минут на одну фразу, причём фраз предлагается огромный набор(презентация)

А вот пример использования гуглкарт (преподаватель Л. Дмитриева, г. Пермь). Путеводитель по городу N (по комедии Н. В. Гоголя «Ревизор» (8 кл.).

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

Какие сайты можно использовать для создания интерактивных заданий?

Казалось бы, как далеки русский язык и информатика! Однако появляется всё больше сервисов, которые позволяют сделать урок русского языка и литературы не только нескучным, современным и технологичным, но и более эффективным.

Самое простое, что нам подарили информационные технологии, — создание презентаций к уроку. Если вы знаете, где брать хорошие иллюстрации, если вы без труда обрабатываете эти иллюстрации (например в Фотошопе), если можете с нуля создать шаблон оформления, и главное (!) — если у вас есть время на эту работу, то вам не нужны какие-то особые программы для создания презентаций к уроку. Хватит и стандартных средств типа PowerPoint. Существуют интернет-сервисы, которые значительно упрощают процесс создания презентаций и экономят время учителя. Популярен сайт Canva

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

Canva предлагает своим пользователям более 300 000 бесплатных изображений для фона презентаций, более 50 тысяч уже готовых шаблонов и более 35 разных видов шрифтов от рукописных до стандартных.

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

Вишенка на торте. Дополнительный функционал: создание плана урока, грамоты, оформление рефератов и выпускных альбомов. Кроме того, если вы ведёте учительский блог, в этом сервисе можно быстро сделать стильные иллюстрации к вашим статьям. Все необходимые размеры уже заданы, выбираете соцсеть и фон, вводите текст — и всё готово!

Национальный корпус русского языка.

Инструмент для анализа текста — Национальный корпус русского языка.

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

Интересна статистика употребления слов. Можно быстро получить график, который покажет, как изменялась «мода» на то или иное слово в течение столетий. Например, этот график показывает, как устаревал глагол «извольте». График составился за доли секунды.

Игры со словами

Для активизации словарного запаса можно использовать различные браузерные игры со словами. «Балда» всем известна и доступна в соцсетях, но есть более сложные и интересные игры. Некоторые из них предлагают создатели сайта http://www.iqfun.ru/ Там так много всего, что даже не возьмёмся описывать. Просто сами зайдите и поиграйте, и вам захочется предложить такие задания ученикам.

Создание ментальных карт

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

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

Легко устроить мозговой штурм на уроке литературы и, используя совместно одну доску, быстро добавить много примеров из текста на заданную тему. Просто шикарно для анализа мотивной структуры произведения. Тут вам и совместная групповая работа, которую требует ФГОС.

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

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

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

Чем карта отличается от обычного способа работы с информацией?

Во-первых, информация визиализируется, во-вторых, систематизируется, в-третьих, проще выделить основную идею, которая размещается в центре, проблемный вопрос, в-четвертых, это мыслительный процесс, демонстрирующий индивидуальный способ восприятия. Достоинства сервиса я вижу в том, что он позволяет работать как индивидуально, так и группой, применим в урочной и внеурочной деятельности для учащихся 5 — 11 классов на разных этапах урока, при подготовке к ОГЭ и ЕГЭ. Ментальные карты можно создавать по определенным темам и параграфам учебника, по биографиям поэтов и писателей, по правилам русского языка. Создавая ментальную карту, ученик работает с информацией, перерабатывает ее, самостоятельно изучает учебный и справочный материал. Для создания карты нужно вдумчиво прочитать произведение.

Личные орфографические словарики.

Создайте вместе с детьми личные орфографические словарики. Для начала добавьте те слова, которые запоминаете в этой четверти, потом можно приучить учеников пополнять словарики, работая над ошибками. Вы сразу получите несколько бесплатных автоматизированных упражнений со словами, попавшими в словарики, в разделе Тренинг. Если слово есть в нашей базе, оно попадёт в озвученные задания, если нет — только в зрительные диктанты. Программа анализирует частоту ошибок и предлагает проблемные слова чаще.

Справа от вас на этой странице кругляш «Выучить 15 слов».

Например, на этой странице подборка из трёх упражнений. Сначала слабый ученик выполняет очень простую задачу: растаскивает карточки по двум полям в соответствии с выделенными буквами. Если карточка попадёт не на место, прозвучит звуковой сигнал. Ребёнок точно справится с таким заданием, получит позитивный опыт и запомнит по ходу дела несколько слов.

Затем эти же слова предлагаются в другом порядке и уже с пропущенными буквами. Можно предложить классу проговаривать слова хором. В момент нажатия на карточку появляются пропущенные буквы и ученики могут проверить себя.

Страничка литературного героя в соцсетях

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

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

Источник: xn--j1ahfl.xn--p1ai