...

суббота, 1 мая 2021 г.

[Перевод] Запуск тестов Selenium в Jenkins

В наши дни понятие «DevOps» у всех на слуху. Это — организационный подход, широко используемый для ускорения разработки и развёртывания приложений. Организации внедряют у себя практики DevOps, так как они обещают дать тем, кто их использует, всё лучшее, что существует в мире разработки ПО, причём — на всех этапах работы — от планирования и тестирования, до развёртывания и мониторинга проектов. В реализации практик DevOps важную роль играют CI/CD-инструменты вроде Jenkins. А интеграция Jenkins с Selenium значительно облегчает процесс автоматизации Selenium-тестов.

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

Что такое Jenkins?


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

Подробнее о Jenkins можно почитать здесь.

Что такое Selenium?


Selenium — это опенсорсный инструмент, который широко используется для автоматизации тестирования веб-приложений. Пользоваться им просто, существуют форумы по Selenium, куда может обратиться тот, кто столкнулся с какими-то проблемами. Благодаря этому Selenium обрёл определённую популярность в кругах тестировщиков ПО. В состав Selenium входят четыре основных компонента: Selenium IDE, Selenium RC, Selenium WebDriver и Selenium Grid. Они созданы в расчёте на решение различных задач. Selenium даёт тому, кто им пользуется, возможности по кросс-браузерному и параллельному тестированию веб-приложений. Это позволяет тестировщикам выполнять испытания приложений в разных операционных системах и браузерах, что, в частности, даёт им возможность проверить совместимость веб-проекта с различными браузерами.

Если вас интересуют подробности о Selenium — посмотрите этот материал.

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

Установка, настройка и запуск Jenkins


Шаг 1 — Для того чтобы загрузить Jenkins — можно воспользоваться соответствующей ссылкой на официальном сайте проекта. Нас, в частности, интересует .war-файл Jenkins.

Шаг 2 — Загрузим файл jenkins.war и сохраним его в выбранную директорию.

Шаг 3 — Откроем окно командной строки и перейдём в папку, в которой хранится загруженный .war-файл.

Шаг 4 — Выполним команду java -jar Jenkins.war. Будет запущен сервер Jenkins.

Шаг 5 — Обычно Jenkins по умолчанию запускается на порте 8080. Если этим портом уже пользуется какой-то другой сервис, можно указать при запуске Jenkins другой порт, воспользовавшись командой такого вида:

java -jar jenkins.war --httpPort=8081

В подобной команде можно указать любой свободный порт, а не только 8081. Этот порт и будет использоваться сервером Jenkins.
Настройка порта для Jenkins

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

Пароль

 В консоли, после успешного завершения установки, можно будет увидеть сообщение Jenkins is fully up and running.

Шаг 6 — Запустим браузер и перейдём к localhost. Как уже говорилось, по умолчанию Jenkins запускается на порте 8080. В моём случае порт был изменён на 8081, именно к этому порту localhost мне и нужно подключиться.

После этого откроется страница настроек Jenkins. Она используется для создания административной учётной записи.

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

Окно ввода пароля

Шаг 8 — После ввода пароля система предложит нам установить плагины.

Предложение об установке плагинов

Если вы не знаете точно о том, какие именно плагины вам понадобятся — можете выбрать вариант Install suggested plugins. Это приведёт к установке набора наиболее часто используемых плагинов. Но если вы знаете о том, что именно вам нужно, основываясь, например, на требованиях к проекту, вы можете выбрать вариант Select plugins to install и самостоятельно выбрать плагины для установки.

После этого плагины будут загружены и установлены.

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

Создание учётной записи администратора

Существует множество способов интеграции Jenkins с Selenium WebDriver. Некоторые из них мы рассмотрим ниже. Разные способы интеграции этих систем применимы в различных условиях.

Первый метод интеграции Jenkins с Selenium


Шаг 1 — В панели управления Jenkins щёлкнем по значку New Item для создания нового проекта. Укажем имя проекта и выберем вариант Freestyle Project. После этого нажмём OK.
Начало создания нового проекта
Настройка свойств проекта

Шаг 2 — На вкладке свойств проекта General введём, в поле Description, описание проекта.

Ввод описания проекта

Шаг 3 — На вкладке Source Code Management выберем None в группе параметров Source Code Management.

Выбор системы управления исходным кодом

Шаг 4 — Jenkins позволяет планировать задания по сборке проектов. Время запуска заданий указывают в таком формате:

MINUTE HOUR DOM MONTH DOW

Смысл этих сокращений раскрыт в следующей таблице
Шаг 5 — Создадим проект, который будем применять для запуска тестов с использованием Selenium WebDriver и TestNG.

Вот код на Java:

package Pages;
import static org.testng.Assert.assertEquals;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.AfterTest;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Test;
public class LoginPage {

  WebDriver driver;

  @BeforeTest
  public void setUp() {
    System.setProperty("webdriver.chrome.driver", "C:\\Users\\Shalini\\Downloads\\chrom86_driver\\chromedriver.exe");
    driver = new ChromeDriver();
  }

  public void login() {
    String login_url = "https://opensource-demo.orangehrmlive.com/";
    driver.get(login_url);

    driver.manage().window().maximize();
    driver.manage().timeouts().pageLoadTimeout(10, TimeUnit.SECONDS);
    driver.findElement(By.id("txtUsername")).sendKeys("Admin");
    driver.findElement(By.id("txtPassword")).sendKeys("admin123");
    System.out.println(driver.getTitle());
  }

  @Test
  public void dashboard() {

    driver.findElement(By.id("menu_dashboard_index")).click();
    String textPresent = driver.findElement(By.xpath("//*[@id=\"content\"]/div/div[1]/h1")).getText();

    String textToBePresent = "DashBoard";
    assertEquals(textPresent, textToBePresent);
  }

  @AfterTest
  public void tearDown() {
    driver.quit();
  }
}

Шаг 6 — Создадим файл TestNG.xml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd">
<suite name="TestSuite">
<test name="LoginTest">
<groups>
      <run>
        <include name="DemoTest"/>
      </run>
    </groups>
<classes>
<class name="Pages.LoginPage">
</class>
</classes>
</test>
</suite>

Шаг 7 — В папке проекта добавим зависимости. Создадим .bat-файл со следующим содержимым:
ava –cp bin;lib/* org.testng.TestNG TestNG.xml

Тут надо указать точное имя файла TestNG.xml, созданного ранее.

Шаг 8 — Выберем в панели управления Jenkins проект, который мы создали в самом начале работы. Щёлкнем по Configure. На вкладке General щёлкнем по Advanced и установим флажок Use custom workplace. Введём в поле Directory путь к папке проекта.

Ввод пути к папке проекта

Шаг 9 — На вкладке Build откроем выпадающий список Add Build Step и выберем Execute Windows batch Command. Введём в него имя .bat-файла, созданного на шаге №7.

Ввод сведений о .bat-файле

Шаг 10 — Щёлкнем по кнопке Apply, потом — по кнопке Save для того чтобы сохранить изменения, внесённые в настройки Jenkins-проекта. Теперь щёлкнем по кнопке Build Now, после чего можно будет понаблюдать за процессом выполнения тестов.

Запуск сборки проекта

Второй метод интеграции Jenkins с Selenium


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

Что такое Maven?


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

Совместное использование Maven, Jenkins и Selenium WebDriver даёт возможность построения DevOps-модели, реализующей механизм непрерывной интеграции программных проектов.

Установка Maven


Шаг 1 — Загрузим дистрибутив Maven с официального сайта проекта.

Шаг 2 — Добавим в состав системных переменных MAVEN_HOME — переменную, в которой содержится путь к домашней директории Maven.

Системная переменная MAVEN_HOME

Шаг 3 — Внесём в переменную Path путь к директории bin, содержащейся в домашней директории Maven.


Настройка переменной Path

Шаг 4 — Для того чтобы проверить правильность установки Maven — откроем окно командной строки и попробуем выполнить команду mvn –version.

Проверка правильности установки Maven

Шаг 5 — Создадим Maven-проект и добавим в файл pom.xml соответствующие зависимости:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
   <modelVersion>4.0.0</modelVersion>
   <groupId>demoProject</groupId>
   <artifactId>demoProject</artifactId>
   <version>0.0.1-SNAPSHOT</version>
   <build>
      <sourceDirectory>src</sourceDirectory>
      <plugins>
         <plugin>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>3.8.0</version>
            <configuration>
               <sоurce>1.8</sоurce>
               <target>1.8</target>
            </configuration>
         </plugin>
      </plugins>
   </build>
   <dependencies>
      <dependency>
         <groupId>org.seleniumhq.selenium</groupId>
         <artifactId>selenium-java</artifactId>
         <version>3.141.59</version>
      </dependency>
      <dependency>
         <groupId>org.testng</groupId>
         <artifactId>testng</artifactId>
         <version>7.3.0</version>
         <scope>test</scope>
      </dependency>
   </dependencies>
</project>

Вот Java-код:
package WebDriverProject;
import org.junit.Assert;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
public class LoginClass {

  WebDriver driver;

  @BeforeTest
  public void setup() {
    System.setProperty("WebDriver.gecko.driver", "C:\\Users\\shalini\\Downloads\\geckodriver-v0.26.0-win64\\geckodriver.exe");

    driver = new FirefoxDriver(); //Инициализация WebDriver
  }
  @Test
  public void loginTest() {
    driver.get("https://opensource-demo.orangehrmlive.com/"); //Определение URL
    String pageTitle = driver.getTitle(); //get the title of the webpage
    System.out.println("The title of this page is ===> " + pageTitle);
    Assert.assertEquals("OrangeHRM", pageTitle); //Проверка заголовка страницы

    driver.findElement(By.id("txtUsername")).clear(); //Очистить поле перед вводом значений
    driver.findElement(By.id("txtUsername")).sendKeys("Admin"); //Ввести имя пользователя
    driver.findElement(By.id("txtPassword")).clear();
    driver.findElement(By.id("txtPassword")).sendKeys("admin123"); //Ввести пароль
    driver.findElement(By.id("btnLogin")).click(); //Щёлкнуть по кнопке Login
    System.out.println(“Successfully logged in ”);
  }
  @AfterTest
  public void teardown() {
    driver.quit();
  }

}

Вот XML-файл с настройками тестов:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd">
<suite name="TestSuite">
<test name="LoginTest">
<groups>
      <run>
        <include name="DemoTest"/>
      </run>
    </groups>
<classes>
<class name=" WebDriverProject.LoginClass">
</class>
</classes>
</test>
</suite>

Интеграция Selenium и Jenkins с помощью Maven


Только что мы говорили об интеграции Jenkins с Selenium WebDriver. То, что получилось, лучше всего использовать для автоматизации Selenium-тестов. Интеграция Jenkins с Selenium WebDriver даёт разработчику надёжную систему кросс-браузерного тестирования проектов. Здесь мы поговорим об интеграции Jenkins и Selenium с помощью Maven.

Шаг 1 — Запустим сервер Jenkins.

Шаг 2 — Откроем браузер и перейдём на localhost, использовав порт, на котором работает Jenkins.

Открытие панели управления Jenkins в браузере

Шаг 3 — Щёлкнем по кнопке New Item в панели управления

Кнопка New Item

Шаг 4 — Введём имя проекта и, в качестве типа проекта, выберем Maven project.

Ввод имени проекта и выбор его типа

Шаг 5 — Нажмём на кнопку OK. После этого можно будет увидеть, как в панели инструментов появилось новое задание.

Новый проект в панели управления

Шаг 6 — Выберем проект и нажмём на кнопку Configure.

Переход к настройке проекта

Шаг 7 — На вкладке Build, в поле Root POM, введём полный путь к файлу pom.xml. В поле Goals and options введём clean test.

Настройка параметров сборки проекта

Шаг 8 — Щёлкнем Apply, а затем — Save.

Шаг 9 — Нажмём на кнопку Build Now.

Запуск сборки проекта

Шаг 10 — Будет начата сборка проекта, а после её завершения появится соответствующее сообщение. Для того чтобы посмотреть полный журнал — нужно щёлкнуть по кнопке Console Output.

Просмотр журнала сборки

Итоги


Мы поговорили о том, почему проект Jenkins пользуется серьёзной популярностью, и о том, как интегрировать его с Selenium WebDriver ради эффективного выполнения тестов и достижения целей непрерывной интеграции программных проектов. Использование Jenkins для автоматизации запуска тестов позволяет разработчикам экономить время, а результаты выполнения тестов можно проанализировать, просмотрев соответствующие лог-файлы. Такой подход позволяет организовать полный цикл разработки ПО — разработку, развёртывание, тестирование, мониторинг, выпуск в продакшн. Jenkins поддерживает множество различных плагинов, предназначенных для решения самых разных задач, встающих перед разработчиками. Система, кроме того, умеет сообщать заинтересованным лицам о том, успешно ли прошла сборка проекта.

Надеюсь, теперь вы без труда сможете интегрировать Jenkins с Selenium WebDriver.

Пользуетесь ли вы Jenkins и Selenium WebDriver?

Let's block ads! (Why?)

HTML-теги и атрибуты, о которых вы, возможно, не знали

image

Эта статья — шпаргалка по HTML-тегам. Поэтому не будем разглагольствовать, сразу к делу.


abbr

Тег abbr определяет аббревиатуру или акроним. Аббревиатура или акроним расшифровываются с помощью атрибута title.

<abbr title="HyperText Markup Language">HTML</abbr> был разработан британским ученым Тимом Бернерсом-Ли приблизительно в 1986—1991 годах.

abbr часто используется совместно с тегом dfn, идентифицирующим понятие или термин:

<p><dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> - формальный язык описания внешнего вида документа (веб-страницы).</p>

address

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

<address>
Автор статьи: <a href="mailto:ivan@mail.com">Иван Иванов</a><br />
Официальный сайт: <a href="http://example.com" target="_blank" rel="noopener noreferrer">Example.com</a><br />
Адрес: некоторое царство, некоторое государство
<address>

audio

Тег audio используется для встраивания аудио-контента (музыка и др.) в веб-страницу.

Для определения аудио-источника используется либо атрибут src, либо тег source. Последний используется для определения нескольких источников, из которых браузер выбирает наиболее подходящий (для определения типа аудио-контента используется атрибут type).

Текст между <audio> и </audio> отображается только в случае, когда браузер не поддерживает элемент audio.

В настоящее время поддерживается три формата аудио: MP3, WAV и OGG.

Атрибуты:


  • autoplay — автовоспроизведение (блокируется большинством браузеров)
  • controls — панель управления (без этого атрибута элемент audio, скорее всего, не будет отображаться на странице)
  • loop — определяет, что воспроизведение, после завершения, начнется сначала
  • muted — воспроизведение без звука (позволяет преодолеть блокировку autoplay)
  • preload — определяет, должен ли аудио-контент загружаться после загрузки страницы. Возможные значения: auto, metadata, none. Значение none не позволит работать с аудио с помощью JavaScript
  • src — путь к аудиофайлу
<audio controls>
  Ваш браузер не поддерживает элемент "audio".
</audio>

<!-- или -->
<audio src="music.mp3" preload="metadata" controls muted loop>Ваш браузер не поддерживает элемент "audio".</audio>

video

Тег video используется для встраивания видео-контента (видеоклип и др.) в веб-страницу.

Для определения видео-источника используется либо атрибут src, либо тег source. Последний используется для определения нескольких источников, из которых браузер выбирает наиболее подходящий (для определения типа видео-контента используется атрибут type).

Текст между <video> и </video> отображается только в случае, когда браузер не поддерживает элемент video.

В настоящее время поддерживается три формата видео: MP4, WebM и OGG.

Атрибуты:


  • autoplay — автовоспроизведение (блокируется большинством браузеров)
  • controls — панель управления
  • loop — определяет, что воспроизведение, после завершения, начнется сначала
  • muted — воспроизведение без звука (позволяет преодолеть блокировку autoplay)
  • preload — определяет, должен ли видео-контент загружаться после загрузки страницы. Возможные значения: auto, metadata, none. Значение none не позволит работать с видео с помощью JavaScript
  • src — путь к видеофайлу
  • poster — изображение, отображаемое при загрузке видео или до нажатия пользователем кнопки воспроизведения
  • width — ширина элемента в пикселях
  • height — высота элемента в пикселях
<video width="320" height="240" controls>
  Ваш браузер не поддерживает элемент "видео".
</video>

<!-- или -->
<!-- Такой вариант может использоваться для воспроизведения видео в качестве фона страницы -->
<video src="movie.mp4" autoplay muted loop>Ваш браузер не поддерживает элемент "видео".</video>

DOM API предоставляет множество свойств, методов и событий для работы с элементами audio и video.


base

Тег base определяет основной путь (URL) и/или цель (target) для всех относительных путей в документе. Он должен размещаться в теге head и иметь хотя бы один из следующих атрибутов:


  • href — основной путь
  • target — определяет значение по умолчанию атрибута target всех гиперссылок и форм на странице. Возможные значения: _blank, _parent, _self и _top
<head>
  <base href="http://example.com/" target="_blank">
</head>

<body>
  <header>
    <nav>
      <!-- http://example.com/product.html -->
      <a href="product.html">Продукт</a>
    </nav>
  </header>
  <main>
    <!-- http://example.com/images/happy_face.png -->
    <img src="images/happy_face.png" alt="" />
  </main>
  <footer>
    <nav>
      <!-- http://example.com/contacts.html -->
      <a href="contacts.html">Контакты</a>
    </nav>
  </footer>
</body>

blockquote и cite

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

<blockquote cite="https://ru.wikipedia.org/wiki/JavaScript">
JavaScript - мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией спецификации ECMAScript (стандарт ECMA-262).
</blockquote>

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

<p>Для более глубокого изучения JavaScript советую взглянуть на <cite>"Вы не знаете JS"</cite> Кайла Симпсона.</p>

code

Тег code используется для определения части компьютерного кода:

<p>HTML-тег `button` определяет кликабельную кнопку.</p>

<p>CSS-свойство `background-color` определяет цвет фона элемента.</p>

Для форматирования блока кода code часто используется совместно с тегом pre:

<pre>
  `
    const name = prompt('Как Вас зовут?')
    if (name?.trim()) alert(`Привет, ${name}!`)
    else console.info('Пользователь пожелал остаться неизвестным')
  `
</pre>

datalist

Тег datalist определяет список возможных вариантов для заполнения поля для ввода текста. Он позволяет реализовать "автозавершение" для элемента input: при установке фокуса на такое поле пользователь видит выпадающий список.

Атрибут id тега datalist должен совпадать с атрибутом list тега input.

<!-- Атрибут `for` тега `label` должен совпадать с атрибутом `id` тега `input` -->
<label for="browser">Выберите Ваш браузер из списка:</label>
<input list="browsers" id="browser">

<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Свойство options объекта Datalist возвращает коллекцию всех элементов списка.


dl, dt и dd

Тег dl определяет список описаний (определений, извиняюсь за тавтологию). Он используется совместно с тегами dt, определяющим понятие или термин, и dd, определяющим описание термина.

Внутри dd могут размещаться параграфы, изображения, ссылки, списки и т.д.

<dl>
  <dt>Кофе</dt>
  <dd>Черный горячий напиток</dd>
  <dt>Молоко</dt>
  <dd>Белый холодный напиток</dd>
</dl>

details

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

По умолчанию details находится в закрытом состоянии.

Внутри details могут размещаться любые теги.

Для отображения заголовка details используется тег summary.

Индикатором открытого состояния details является атрибут open (этот атрибут может использоваться в качестве CSS-селектора — details[open] или JavaScript-селектора — document.querySelector('[open]')).

<details>
  <summary>Заголовок - видимая часть элемента "details"</summary>
  <p>Скрытый контент - дополнительная информация</p>
</details>

dialog

Тег dialog определяет диалоговое окно. Он используется для создания "попапов" и модальных окон.

По умолчанию dialog находится в неактивном состоянии.

Индикатором активного состояния dialog является атрибут open.

<dialog open>Открытое диалоговое окно</dialog>

Для управления объектом Dialog с помощью JavaScript используются такие методы как show(), close() и showModal(), а также свойство open.


figure

Тег figure определяет обособленный (автономный) контент, такой как иллюстрации, диаграммы, фотографии, примеры кода и т.д.

Несмотря на то, что контент элемента figure формально относится к основному потоку (main flow), его позиция (местонахождение) не зависит от этого потока. Поэтому удаление элемента figure не должно влиять на поток документа.

Для добавление подписи к figure используется тег figcaption.

<figure>
  <img src="v8-compiler-pipeline.png" alt="V8 compiler pipeline" style="width:100%">
  <figcaption>Рис. 1 - Процесс компиляции кода "движком" JavaScript V8.</figcaption>
</figure>

meter

Тег meter определяет скалярное значение в пределах известного диапазона или дробного значения. Другими словами, meter определяет меру чего-либо (gauge).

Этот тег не должен использоваться в качестве индикатора прогресса.

Для обеспечения доступности совместно с meter рекомендуется использовать тег label.

Атрибуты:


  • value — текущее числовое значение между min и max
  • min — нижняя числовая граница диапазона
  • max — верхняя числовая граница диапазона
  • low — верхняя числовая граница нижнего предела диапазона. Должна быть больше min, но меньше high и max
  • high — нижняя числовая граница верхнего предела диапазона
  • optimum — оптимальное числовое значение между min и max. Расположение этого атрибута определяет предпочтительную часть диапазона. Например, если optimum находится между min и low, значит, предпочтительным является нижний диапазон
  • form — определяет элемент form, с которым связан meter
<label for="disk_d">Использование диска "D":</label>
<meter id="disk_d" min="0" max="100" value="60">60%</meter>

Так можно записать уровень заряда батареи вашего устройства в значение meter:

// <meter id="meter" max="100"></meter>
if ('getBattery' in navigator) {
  navigator.getBattery()
    .then(({ level }) => {
      meter.value = level * 100
    })
}

progress

Тег progress определяет процесс выполнения задачи.

Этот тег не должен использоваться для определения меры чего-либо.

Для обеспечения доступности совместно с progress рекомендуется использовать тег label.

Атрибуты:


  • max — максимальное значение. По умолчанию равняется 1
  • value — текущее значение
<label for="file">Процесс загрузки:</label>
<progress id="file" max="100" value="32">32%</progress>

Так можно реализовать десятисекундный таймер:

// <progress id="progress" value="0" max="10"></progress>
const timerId = setInterval(() => {
  progress.value += 1
  if (progress.value === progress.max) {
    progress.remove()
    clearInterval(timerId)
  }
}, 1000)

output

Тег output используется для представления результата вычислений.

Атрибуты:


  • for — определяет связь между результатом и элементами, используемыми для его выичсления
  • form — определяет элемент form, которому принадлежит output
  • name — название элемента output
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="25" />
  +
  <input type="number" id="b" value="50" />
  =
  <output name="x" for="a b">75</output>
</form>

picture

Тег picture предоставляет возможность использования нескольких источников для изображения (нескольких изображений).

Этот тег позволяет использовать разные изображения в зависимости от ширины области просмотра (viewport width) вместо масштабирования одного изображения.

Элемент picture содержит два тега: один или более source и один img.

Браузер выбирает элемент source с медиа-запросом, совпадающим с текущей шириной области просмотра. Элемент img указывается в качестве последнего дочернего элемента на случай отсутствия совпадений с source.

Путь к изображению указывается в атрибуте srcset, а медиа-запрос — в атрибуте media.

<picture>
  <img src="default.jpg" alt="" style="width:auto;">
</picture>

template

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

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

Контент внутри template может быть отрендерен с помощью JavaScript.

<template>
  <h1>Заголовок</h1>
  <p>И какой-то текст</p>
</template>

<button id="button">Это не кнопка</button>
((body, { content }) => {
  button.onclick = () => {
    body.append(content.cloneNode(true))
  }
})(document.body, document.querySelector('template'))

time

Тег time определяет конкретное время (или дату и время).

Атрибут datetime используется для представления времени в машиночитаемом формате.

<p>Некоторые люди искренне верили в то, что в <time datetime="2000-01-01 00:01">полночь 2000 года</time> наступит конец света, но, как видите, свет продолжается. Возможно, он закончится в <time datetime="3000-01-01 00:01">полночь 3000 года</time>, но это не точно</p>

noscript

Тег noscript определяет резервный контент, который отображается в случае, если в браузере отключен JavaScript. Он может использоваться как в теге head, так и в теге body. В первом случае noscript может содержать только такие теги как link, style и meta.

<script>
document.write('Одни дивы да спаны... Где семантика?')
</script>
<noscript>Пожалуйста, включите JavaScript</noscript>

Другие теги в форме шпагралок


Семантическое "секционирование" страницы

<body>
  <header>
    <h1>Page Title</h1>
    <nav>
      <ul>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
      </ul>
    </nav>
    <img src="images/logo.png" alt="" />
  </header>

  <aside>
    <h2>Aside Title</h2>
    <p>Aside Content</p>
  </aside>

  <main>
    <article>
      <h2>Atricle Title</h2>
      <section>
        <h3>Section Title</h3>
        <p>Section Content</p>
      </section>
    </article>

    <div>
      <section>
        <h2>Section2 Title</h2>
        <p>Section2 Content</p>
      </section>
      <section>
        <p>Section3 Content</p>
      </section>
    </div>
  </main>

  <footer>
    <nav>
      <ol>
        <li><a href="#">Link3</a></li>
        <li><a href="#">Link4</a></li>
      </ol>
    </nav>
    <div>
      <p>Block text &amp; <span>inline text</span></p>
    </div>
  </footer>
</body>

Стилизация текста

<p>
  Текст может быть
    <b>полужирным</b>,
    <strong>полужирным и "важным"</strong>,
    <i>"наклонным"</i>,
    <em>наклонным и важным</em>,
    <small>маленьким</small>,
    <del>удаленным из документа</del>,
    <ins>вставленным в документ</ins>,
    <u>подчеркнутым</u>
    <s>неправильным</s>.

  Он может представлять собой
    <q>короткую цитату</q>,
    <kbd>ввод с клавиатуры</kbd>,
    <samp>вывод программы</samp>.

  Текст может находиться
    <sup>над строкой</sup> и
    <sub>под ней</sub>.

  Наконец, он может быть <mark>помеченным</mark>.

  Длинныйтекстможноразделять<wbr />внужномместе.

  Его можно переносить<br />на новую строку и разделять<hr />горизонтальной чертой.
</p>

Форма

Символ / означает или.

<form
  action="URL"
  autocomplete="on / off"
  enctype=""
  id="form"
  method="GET / POST"
  name="form"
  novalidate
>
  <fieldset>
    <legend>Title</legend>

    <label for="first_name">Имя:</label>
    <input type="text" id="first_name">

    <label>Фамилия:
      <input type="text">
    </label>
  </fieldset>

  <select
    autofocus
    disabled
    form="form"
    multiple
    name="select"
    required
    size="10"
  >
    <optgroup label="Group1">
      <option
        value="option1"
        disabled
        label="option1"
      ></option>
      <option value="option2" selected></option>
    </optgroup>

    <optgroup label="Group2" disabled>
      <option value="option3"></option>
    </optgroup>

    <option value="option4"></option>
  </select>

  <textarea
    autofocus
    cols="30"
    disabled
    form="form"
    maxlength="50"
    name="textarea"
    placeholder="Введите текст..."
    readonly
    required
    rows="10"
    wrap="hard / soft"
  ></textarea>

  <button
    type="submit"
    autofocus
    disabled
    form="form"
    formaction="URL"
    formenctype=""
    formmethod="GET / POST"
    formnovalidate
    name="submit"
  >
    Кнопка для отправки формы
  </button>
  <button type="reset">Кнопка для сброса формы (очистки полей для ввода данных)</button>
  <button type="button">Просто кнопка</button>
</form>

Поля для ввода данных

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text"> (значение по умолчанию)
<input type="time">
<input type="url">
<input type="week">

Атрибуты:


  • accept — MIME-тип принимаемых файлов (только для type="file"). Значения: расширение, например, .png, audio/*, video/*, image/*, медиа тип, например, json
  • alt — подпись
  • autocompleteon / off
  • autofocus
  • checked — только для type="checked" или type="radio"
  • disabled
  • form
  • formaction — только для type="submit" или type="image"
  • formenctype — только для type="submit" или type="image". Значения: application/x-www-form-urlencoded, multipart/form-data, text/plain
  • formmethod — только для type="submit" или type="image" (get / post)
  • formnovalidate — отключает проверку элементов формы
  • formtarget — определяет, где отображается ответ, полученный после отправки формы (только для type="submit" или type="image"). Значения: _blank, _self, _parent, _top, название фрейма
  • height — высота в пикселях (только для type="image")
  • list
  • max — максимальное значение (число или дата)
  • maxlength — максимальная длина строки (количество символов)
  • min — минимальное значение (число или дата)
  • minlength — минимальная длина строки (количество символов)
  • multiple — позволяет пользователю выбирать несколько значений или отправлять несколько файлов
  • name
  • pattern — регулярное выражение для проверки значения поля
  • placeholder
  • readonly
  • required
  • size — количество символов, определяющее ширину поля
  • src — путь к изображению, используемому в качестве кнопки для отправки формы (только для type="image")
  • step — интервал (шаг) между min и max
  • type
  • value
  • width — ширина поля в пикселях (только для type="image")

Пример валидации адреса электронной почты и пароля:

<form>
  <input
    type="email"
    id="email"
    name="email"
    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
    required
  />

  <input
    type="password"
    id="password"
    name="password"
    pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
    title="Пароль не может быть меньше 8 символов и должен содержать одну цифру, одну прописную (заглавную) букву и одну строчкую букву"
    required
  />
  <input type="submit" />
</form>

Таблица

<table>
  <caption>
    Table Title
  </caption>
  <colgroup>
    <col span="2" />
    <col />
  </colgroup>
  <thead>
    <tr>
      <th
        abbr="H1"
        colspan="2"
        rowspan="2"
        scope="col / colgroup / row / rowgroup"
      >
        Heading1
      </th>
      <th>Heading2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2" rowspan="2">1-1</td>
      <td>1-2</td>
    </tr>
    <tr>
      <td>2-1</td>
      <td>2-2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>3-1</td>
      <td>3-2</td>
    </tr>
  </tfoot>
</table>

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


Послесловие

Мы рассмотрели почти все существующие HTML-теги. С полным списком можно ознакомиться здесь или здесь. Во многих публикациях упоминаются теги map и area, но с их использованием сопряжено несколько проблем (сложность реализации карты, зависимость областей от координат и т.д.), поэтому я оставил их без внимания. Также существуют такие теги, как svg и canvas, предназначенные для работы с графикой, но для рассказа о каждом из них требуется отдельная статья (и даже не одна).



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

Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!

Let's block ads! (Why?)

New IP — следующий этап развития Интернета или ужесточение контроля над пользователями

image

В Китае жизнь превратилась в компьютерную игру. Или даже в эпизод «Черного зеркала». Там с 01.01.2021 принят новый гражданский кодекс, официально узаконивший «Систему социального кредита». Теперь каждому гражданину присваивается стартовый рейтинг в 1000 баллов. Благодаря вездесущим камерам видеонаблюдения, Единый информационный центр анализирует каждого по 160 тысячам различных параметров из 142 учреждений. Если рейтинг больше 1050 баллов, то это образцовый гражданин и маркируется индексом ААА. С 1000 баллов можно рассчитывать на А+, а с 900 – на B. Если рейтинг упал ниже 849 – это уже «мутная личность» из категории C, кого запросто могут уволить из государственных и муниципальных структур. Те, у кого меньше 600 баллов попадают в группу D, это сравнимо с «чёрной меткой». Люди с рейтингом D не могут устроиться на нормальную работу, им не дают кредиты, не продают билеты на транспорт и даже могут отказать в аренде велосипеда. Для сравнения, человеку с рейтингом А+ велосипед в аренду дадут бесплатно и еще разрешат полчаса кататься на нем без единого юаня. Человек со средним рейтингом С велосипед дадут только под залог в 200 юаней.

В Китае аналогичный принцип ранжирования людей применяют и в Интернете. А компания Huawei решила пойти дальше и разработала новый стек протоколов, с которым провайдеры могут блокировать доступ в Сеть любого пользователя с низким рейтингом.


Вставить свои пять фэней


В марте 2021 года Китай опубликовал свой 14-й пятилетний план экономического развития, включая намеченные следующие шаги в области технологий. В проекте чётко говорится, что Китай и его сетевой гигант Huawei готовятся к тому, чтобы их видение Интернета стало глобальным.

Планы Huawei в отношении 6G и выше делают озабоченность США по поводу 5G ничтожной: Huawei предлагает фундаментальный редизайн Интернета, которое называется «New IP», призванный обеспечить «внутреннюю безопасность» в сети. Внутренняя безопасность означает, что отдельные лица должны зарегистрироваться для использования Интернета, а органы власти могут в любой момент отключить доступ к Интернету отдельного пользователя. Короче говоря, Huawei стремится интегрировать китайские режимы «социального кредита», слежки и цензуры в архитектуру Интернета. А по замыслу разработчиков новый протокол выведет интернет на новый уровень и позволит быстрее развивать существующие телекоммуникационные сервисы и внедрять новые, в том числе технологию голографического присутствия.

В New IP реализован специальный алгоритм «отключения» (killswitch), позволяющий блокировать все данные, поступающие из сети на определенный адрес или с него в сеть. Делать это можно будет в любой момент времени, и это означает, что регуляторы интернета смогут не только моментально отключать неугодные ресурсы, но и блокировать доступ к интернету конкретных людей, в буквальном смысле вычисляя их по IP-адресу. Переход на New IP также может потребовать авторизации и аутентификации как новых интернет-адресов, так и людей, связанных с ними. Другими словами, New IP подразумевает полное отсутствие анонимности и приватности в интернете и напоминает глобальную версию «Великого китайского файервола», блокирующего жителям КНР доступ ко многим международным ресурсам.

В США считают, что само предложение о новом IP опирается на несовершенную техническую основу, которая угрожает разбить Интернет на несовместимые, менее стабильные и даже менее безопасные локальные сети: «Чтобы избежать тщательного изучения недостатков нового IP, Huawei обошла международные органы по стандартизации, где эксперты могут оспорить технические нюансы предложения. Вместо этого Huawei работала через Международный союз электросвязи (МСЭ), где Пекин имеет большее политическое влияние».

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

Западные СМИ отмечают, что обращение Huawei к Коммунистической партии Китая (КПК) и МСЭ неудивительно, даже несмотря на то, что юрисдикция МСЭ не включает изменения архитектуры Интернета. Когда дело доходит до управления Интернетом, КПК и другие авторитарные режимы долгое время отдавали предпочтение международным организациям, таким как МСЭ, а не таким как IETF или Международная корпорация по присвоению имён и номеров (ICANN). Учреждениями с участием многих заинтересованных сторон руководят самые разные представители промышленности, гражданского общества и правительства; многосторонние институты предоставляют право голоса только национальным правительствам. На форумах эти представители склонны отдавать предпочтение свободному и открытому Интернету, который ослабляет влияние национальных правительств, многие из которых, скорее всего, будут поддерживать жёстко регулируемый и доступный цензуре Интернет.

А чем плох Старый IP?


Новые технологии — движущая сила эволюции Интернета. Голографическая коммуникация и огромное количество постоянно растущих физических и виртуальных объектов в Интернете могут оказать большое влияние на существующий протокол IP. Прежде всего, сеть Интернета вещей (IoT), сотовая сеть, промышленная сеть, спутниковая сеть, и т.д., делают Интернет «фрагментированным». Взаимосвязь среди этих сетей для предоставления информации и услуг из одной доступной сети (если разрешено) в другую становится достаточно сложной задачей. Хотя он был разработан для взаимосвязи нескольких региональных академических и военных сетей в 1970-х, текущие протоколы TCP/IP содержат ограничения для взаимодействия. Например, фиксированная длина IP-адреса, либо 32 бита для IPv4, либо 128 бит для IPv6, может не подходить для всех сетей. Сеть IoT обычно запрашивает более короткие адреса для уменьшения потребления энергии, вычислений и памяти. Некоторые промышленные сети даже «удаляют» заголовок IP, чтобы повысить эффективность коммуникации. Космическая связь вряд ли может использовать существующую стратегию фиксированной IP-адресации, привязку подсети и порта маршрутизатора из-за высокодинамичного перемещения узлов-спутников.

TCP/IP ориентирован на идентификацию физических объектов в привязке к их местоположению, и не рассчитан на идентификацию виртуальных объектов, таких как контент и сервисы. Для абстрагирования сервисов от IP-адресов предлагаются различные механизмы маппинга, которые лишь усложняют систему и создают дополнительные угрозы приватности. Как решение для улучшения доставки контента развиваются архитектуры ICN (Information-Centric Networking), такие как NDN (Named Data Networking) и MobilityFirst, предлагающие использовать иерархическую адресацию, которые не решают проблему с доступом к мобильному (перемещаемому) контенту, создают дополнительную нагрузку на маршрутизаторы или не позволяют установить end-to-end соединения между мобильными пользователями.

New IP имеет три ключевые особенности:

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

New IP имеет следующие преимущества по сравнению с протоколами IPv4 и IPv6:
  • Более быстрое предоставление услуг. Новый IP-адрес позволяет клиенту общаться со своим сервером напрямую без запроса DNS. Запрос DNS занимает до 13% времени загрузки. Следовательно, маршрутизация с учётом служб может обеспечить гораздо более быстрое предоставление услуг за счёт исключения запроса DNS;
  • Поддержка динамического развертывания сервиса/контента. «Новый IP» работает сервис-ориентированным способом, который заботится о «что», а не «где». Это отличается от существующей IP-маршрутизации, которая должна знать местоположение идентифицированное IP-адресом.


Абстрактная структура пакета New IP

Заголовок New IP начинается с индикатора полей (FI), который указывает, какие поля инкапсулированы в заголовке. Все остальные поля в заголовке New IP являются необязательными, кроме FI. За FI следует (необязательно) ряд основных полей. В отличие от заголовков IPv4 или IPv6, адрес отправителя и адреса назначения в заголовке пакета New IP имеют переменную длину. Более того, адреса могут быть определены с множественной семантикой. Возможный способ для достижения такой гибкости следует заимствовать методологию CBOR (Concise Binary Object Representation).

Заголовок допускает прикрепление идентификаторов функций (FID, Function ID), применяемых для обработки содержимого пакета, а также привязываемых к функциям метаданных (MDI — Metadata Index и MD — Metadata). Например, в метаданных могут быть определены требования к качеству сервиса, в соответствии с которыми при адресации по типу сервиса будет выбран обработчик, обеспечивающий максимальную пропускную способность.
В качестве примеров привязываемых функций приводятся ограничение крайнего срока (deadline) для пересылки пакета и определение максимального размера очереди во время пересылки. Маршрутизатор во время обработки пакета будет использовать для каждой функции свои метаданные — для вышеприведённых примеров в метаданных будет передана дополнительная информация о крайнем сроке доставки пакета или максимально допустимой длине сетевой очереди.


Пример работы New IP с устройствами «умного дома»

Поскольку все устройства в доме подключены к одной домашней сети, датчик движения (с адресом 15) может отправлять уведомления на камеру видеонаблюдения (с адресом 16) напрямую со своим внутридоменным адресом. Потому что количество устройств в домашней сети небольшое, можно использовать 8-битные короткие адреса для снижения потребления энергии. Датчик движения отправляет сигналы камере видеонаблюдения только в одном направлении. Следовательно адрес источника может быть опущен для дальнейшего уменьшения пакета и повышения эффективности передачи информации. До того, как камера видеонаблюдения отправить изображение на смартфон хозяина дома, пакеты сначала будут переданы на маршрутизатор. Маршрутизатор New IP добавит сегмент адреса 4.3.2.1 к исходному адресу для обратной маршрутизации. Потом, измененные пакеты данных отправляются на смартфон пользователя через интернет.

По сравнению с 6LoWPAN, предлагаемая структура New IP позволяет маршрутизаторам пересылать пакеты данных напрямую на основе короткого адреса, без сжатия и декомпрессии, принятые в 6LoWPAN. Таким образом, New IP может упростить реализацию сетевых узлов, которые особенно ценны для сетей IoT с ограниченными ресурсами.

Без политики никуда



По мнению американских экспертов, авторитарные правительства могут маргинализировать частный сектор работая через многосторонние форумы, такие как МСЭ. Это означает, что МСЭ, естественно, будут более восприимчивы к таким предложениям, как «Новый IP», которые предоставляют национальным правительствам больший контроль над Интернетом: «Обход традиционных институтов управления Интернетом в пользу МСЭ создаёт прецедент для будущих изменений, связанных с управлением Интернетом, которые будут проходить через МСЭ вместо более сбалансированных институтов с участием многих заинтересованных сторон.
Последние семь лет Китай занимает лидирующие позиции в МСЭ. Во время своего пребывания на посту генерального секретаря МСЭ Хоулинь Чжао (Houlin Zhao) поощрял расширение мандата МСЭ с телекоммуникационного агентства до «технологического агентства»

В своем отчете за март 2020 года Комиссия по киберпространству США (Cyberspace Solarium Commission, CSC) подчеркнула то, как правительство США не участвует в международных форумах, таких как МСЭ, и то, как Китай участвует. Фактически, «Новый IP» стал отчасти результатом предыдущего отказа США от лидерства, поскольку первоначальное расследование необходимости этой новой технологии было инициировано фокус-группой МСЭ, в которой доминировала компания Huawei, но без участия США. Такая асимметрия выходит за рамки этой конкретной фокус-группы. В преддверии ВАСЭ-20 Китай назначил представителей на руководящие должности практически в каждой исследовательской комиссии МСЭ. Даже когда китайские фирмы не получают руководящих должностей, Китай посылает толпы тщательно подготовленных, синхронизированных делегаций, чтобы продвигать стандарты, выгодные для Пекина и его «национальных чемпионов».

Представитель США Дорин Богдан-Мартин баллотируется на должность генерального секретаря МСЭ в 2022 году. Даже если Богдан-Мартин не победит на выборах, Соединенные Штаты будут работать над тем, чтобы окончательный победитель прекратил политику Чжао, заключающуюся в том, что МСЭ лоббирует «Новый IP».

Кандидат от России Рашид Исмаилов тоже может получить пост генерального секретаря. Исмаилов возглавляет делегацию, которая регулярно пытается усилить власть МСЭ над управлением Интернетом за счет институтов с участием многих заинтересованных сторон. Исмаилов лично выступает за «предоставление правительствам и некоммерческим организациям возможности контролировать деятельность» ICANN, одного из самых важных органов в управлении Интернетом.

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

«Вопреки текущим политическим дебатам, New IP предлагает открытую и свободную дискуссию, приглашая исследователей из всех стран и отраслей по всему миру принять участие в исследовании, которое позволит увидеть, как Интернет будет развиваться в соответствии с требованиями. «Новый IP» не определяет модели управления для использования этих технологий, и не ведёт к «более централизованному нисходящему контролю над Интернетом». При этом мы следуем установленным путям для развития интернет-технологий в стандартных органах, не связанных с конкретным управлением, которое принимают операторы и правительства во всем мире. Это иллюстрируется нашей работой по предотвращению DDoS-атак, которая действительно предлагает так называемый «протокол отключения» (Shut-off protocol). Эта концепция аналогична предложениям, сделанными, например, учёными Университета Карнеги-Меллона в США, а также найденным в аналогичных технологиях, которые обсуждались, среди прочего, в IETF DDoS Open Threat Signaling (DOTS). Такое «отключение» используется атакуемой сетью, чтобы сигнализировать исходной сети злоумышленника запрос на предотвращение дальнейшего атакующего трафика. Таким образом, эта технология хорошо зарекомендовала себя в существующих решениях», – отметили представители Huawei.

Из-за ограничений, связанных с пандемией COVID-19, Всемирная ассамблея по стандартизации электросвязи (ВАСЭ-20) МСЭ, на которой будет официально обсуждаться New IP, была отложена до февраля 2022 года.



На правах рекламы


VDSina предлагает мощные и недорогие VPS с посуточной оплатой. Интернет-канал для каждого сервера — 500 Мегабит, защита от DDoS-атак включена в тариф, возможность установить Windows, Linux или вообще ОС со своего образа, а ещё очень удобная панель управления серверами собственной разработки.

Let's block ads! (Why?)

Монстрация-онлайнстрация

Дело было вечером, делать было нечего.

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

По известным всем обстоятельствам в этом году Монстрацию не разрешили, о чём я немного взгрустнул и подумал: "А что я могу сделать, как разработчик?".

Короче, развернул сервер, сделал небольшое API для обработки запросов на NodeJS+Express+MongoDB, а затем в Unity 3D сварганил небольшое приложение, в котором создал простенькое окружение, логику взаимодействия с API и пару игровых персонажей: участников митинга и полицию, которая их "охраняет". С контентом мне помогли несколько ребят, сделав модели полицейского УАЗика, Новосибирского оперного театра, основу персонажей.

Логика работы простая: пользователь заходит, оставляет в форме свой никнейм и текст плаката, а затем на сцене появляются он сам и все, кто зарегистрировался до него.

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

Что получилось в итоге можете поглядеть прямо сейчас по этой ссылке. Работает только для ПК и ноутов, мобильные устройства не поддерживаются.

Сейчас у нас уже 40 участников, думаю какие ещё игровые сценарии туда запихнуть. Мне кажется неплохо получилось для одного вечера, а?

Let's block ads! (Why?)

Оператор «Индженьюити» подробно рассказал о фазах полета над поверхностью Марса

Пилот записывает данные в полетный журнал «Индженьюити».

30 апреля 2021 года главный оператор марсианского вертолёта «Индженьюити» Ховард Грип (Håvard Grip) подробно рассказал о фазах полета над поверхностью Марса во время его четырех миссий — взлете, парении и посадке.
Сотрудник лаборатории реактивного движения NASA (Jet Propulsion Laboratory, JPL) уточнил, что НАСА перед каждым полетом загружает в «Индженьюити» инструкции для новой программы полета. Но по факту вертолет работает автономно, полагаясь на набор алгоритмов управления полетом, которые НАСА разработали на Земле, еще до того, как «Индженьюити» был отправлен на Марс. Чтобы разработать эти алгоритмы, НАСА выполнило детальное компьютерное моделирование и имитационные полеты на базе лаборатории JPL в барокамере высотой 25 метров и диаметром 7,5 метров, чтобы понять, как вертолет будет вести себя в марсианской среде. Но многие аспекты полета на Марсе выяснились только в реальных условиях на планете.

Взлет


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

Во время взлета, после того, как лопасти начали вращаться с заданной скоростью 2537 об/мин, резко включается режим «коллективного управления», чтобы вертолет оторвался от поверхности. Во время этой начальной фазы взлета НАСА ограничивает систему управления полетом, разрешая ей реагировать только на данные об угловых скоростях аппарата (скорости вращения или наклоне вертолета). Это сделано для того, чтобы система управления не пыталась противостоять взлету.

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

Как только вертолет взлетит на 1 метр, он начинает использовать свои бортовые датчики — лазерный дальномер и навигационную камеру. До этого момента датчики отключены, так как на них может влиять пыль с поверхности во время взлета. До достижения высоты в 1 метр вертолет полагается только на данные с инерциального измерительного блока (IMU), который измеряет ускорение и угловую скорость. Фактически этот этап навигации сравним с измерением пройденного человеком расстояния путем подсчета шагов. Это совсем не точный способ при больших измерениях, но поскольку вертолету требуется всего пара секунд, чтобы достичь 1 метра высоты, то погрешность получается небольшая.

Данные первых полетов показали, что «Индженьюити» поднимается на 5 см над поверхностью за 0,25 секунды. Во время этого начального разгона происходит скачок мощности, необходимой для работы роторной системы. Полеты показали, что он может достигать 310 Вт, что ниже максимальной рабочей возможности отдачи энергии для его батарей, которые могут выдерживать скачки до 510 Вт.

Телеметрия энергозатрат ротора во время второго полета.

После взлета «Индженьюити» потребовалось около 2 секунд, чтобы достичь высоты 1 метр, на которой он начал использовать полный набор своих датчиков. Данные с навигационной камеры показали, что особо пыли или песка, которые могут повлиять на датчики, при взлете нет, так что в НАСА даже перестраховались по этому поводу.

Поверхность под вертолетом при взлете.

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

Парение


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


Телеметрия горизонтального положения вертолета во время выполнения парения в первом полете.

Данные с вертолета показали, что он удерживает высоту в режиме зависания примерно с точностью до 1 см и удерживает курс в режиме парения с точностью менее 1,5 градусов. В случае порывов ветра происходили его горизонтальные отклонения примерно до 25 см.

Во время большей части полетов вертолета на Марсе был ветер 4-6 метров в секунду с востока и юго-востока с порывами до 8 метров в секунду.


Телеметрия лопастей в режиме «Коллективного контроля» во время первого полета. Во время этого полета нижняя лопасть была под углом около 9,2 градуса, а верхняя 8,2 градуса.

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


Телеметрия циклического контроля (создания моментов крена и тангажа) углов ротора во время первого полета.

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

Посадка


Процесс посадки «Индженьюити» занимает несколько секунд. После зависания над местом приземления вертолет устанавливает устойчивую скорость спуска 1 метр в секунду. Затем, когда аппарат фиксирует, что его опоры находятся в пределах 1 метра от поверхности, полетные алгоритмы перестают использовать навигационную камеру и высотомер для оценки ситуации, переключаясь на IMU. Это также позволяет вертолету выполнить плавное снижение вертикальной скорости, чтобы предотвратить аварийную посадку.

Примерно через полсекунды после переключения в режим IMU, когда опоры вертолета находятся в пределах 0,5 метра от поверхности, активируется система подтверждения и обнаружения приземления. Вертолет будет считать, что приземление началось и совершилось, как только его вертикальная скорость будет около 25 сантиметров в секунду и менее. В этот момент система управления полетом прекращает попытки управлять движением вертолета и передает команду для режима «коллективного управления» на минимально возможный шаг лопастей, чтобы создать тягу, близкую к нулю. Затем система ждет 3 секунды, чтобы убедиться, что вертолет находится на поверхности, прежде чем полностью остановить вращение лопастей.

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

Первые полеты показали, что во время снижения в процессе посадки «Индженьюити» сохранял вертикальную скорость с точностью до 4 см в секунду и зафиксировал факт посадки в течение примерно 30 миллисекунд после приземления.


Телеметрия вертикальной скорости во время второго полета.


Кадры третьего полета со стороны марсохода.

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

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

30 апреля 2021 года марсианский вертолет «Индженьюити» успешно совершил четвертый полет, пролетев 266 метров. Пятый полет, финальная точка которого — новое место взлета вертолета, будет через несколько дней. Это будет первый полет, когда «Индженьюити» не вернется на площадку «Поле братьев Райт», а начнет разведку местности.

Let's block ads! (Why?)