Включение на веб-страницу файлов изображений или других ресурсов с чужого сервера

Обновлено: 28.06.2024

Команда dotnet new mvc создает файл проекта, содержащий следующий корневой уровень

Когда MSBuild или Visual Studio загружают проект, выполняются следующие высокоуровневые действия:

• Создать проект
• Вычислить файлы для публикации
• Публикация файлов в месте назначения

Вычислить элементы проекта

При загрузке проекта вычисляются элементы (файлы) проекта MSBuild. Тип элемента определяет способ обработки файла. По умолчанию файлы .cs включаются в список элементов компиляции. Файлы в списке элементов Compile компилируются.

Список элементов содержимого содержит файлы, которые публикуются в дополнение к выходным данным сборки. По умолчанию файлы, соответствующие шаблонам wwwroot\** , **\*.config и **\*.json, включаются в список элементов содержимого. Например, шаблон подстановки wwwroot\** соответствует всем файлам в папке wwwroot и ее подпапках.

Веб-SDK импортирует Razor SDK. В результате файлы, соответствующие шаблонам **\*.cshtml и **\*.razor, также включаются в список элементов содержимого.

Веб-SDK импортирует Razor SDK. В результате файлы, соответствующие шаблону **\*.cshtml, также включаются в список элементов содержимого.

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

При выборе кнопки "Опубликовать" в Visual Studio или при публикации из командной строки:

• Вычисляются свойства/элементы (файлы, необходимые для сборки).
• Только для Visual Studio: пакеты NuGet восстанавливаются. (Восстановление должно быть явно задано пользователем в интерфейсе командной строки.)
• Проект создается.
• Вычисляются элементы публикации (файлы, необходимые для публикации).
• Проект публикуется (вычисленные файлы копируются в место назначения для публикации).

Базовая публикация из командной строки

Выполните следующие команды, чтобы создать и опубликовать веб-приложение:

Команда dotnet publish выдает вариант следующего вывода:

Папка публикации по умолчанию имеет формат bin\Debug\\publish\. Например, bin\Debug\netcoreapp2.2\publish\.

Следующая команда указывает сборку выпуска и каталог публикации:

Команда публикации dotnet вызывает MSBuild, которая вызывает цель публикации. Любые параметры, переданные в публикацию dotnet, передаются в MSBuild. Параметры -c и -o сопоставляются со свойствами MSBuild Configuration и OutputPath соответственно.

Свойства MSBuild можно передавать в одном из следующих форматов:

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

Опубликовать профили

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

Создайте профиль публикации в Visual Studio, выбрав один из следующих путей:

• Щелкните правой кнопкой мыши проект в обозревателе решений и выберите "Опубликовать".
• Выберите «Опубликовать» в меню «Сборка».

Отображается вкладка "Публикация" на странице возможностей приложения. Если в проекте отсутствует профиль публикации, отображается страница «Выбор цели публикации». Вам будет предложено выбрать одну из следующих целей публикации:

• Служба приложений Azure
• Служба приложений Azure в Linux
• Виртуальные машины Azure
• Папка
• IIS, FTP, веб-развертывание (для любого веб-сервера)
• Импортировать профиль

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

Когда выбрана цель публикации "Папка", укажите путь к папке для хранения опубликованных ресурсов. Путь к папке по умолчанию: bin\\\publish\. Например, bin\Release\netcoreapp2.2\publish\. Нажмите кнопку «Создать профиль», чтобы закончить.

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

Инструмент публикации Visual Studio создает файл MSBuild Properties/PublishProfiles/.pubxml, описывающий профиль публикации. Файл .pubxml:

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

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

Следующие команды могут использовать профили публикации папок, MSDeploy и Kudu. Поскольку в MSDeploy отсутствует межплатформенная поддержка, следующие параметры MSDeploy поддерживаются только в Windows.

Папка (работает на разных платформах):

MSDeploy:

Пакет MSDeploy:

В предыдущих примерах:

• Публикация и сборка dotnet поддерживают API Kudu для публикации в Azure с любой платформы. Публикация Visual Studio поддерживает API Kudu, но WebSDK поддерживает кроссплатформенную публикацию в Azure.
• Не передавайте DeployOnBuild команде публикации dotnet.

Добавьте профиль публикации в папку Properties/PublishProfiles проекта со следующим содержимым:

Пример публикации папки

При публикации с помощью профиля с именем FolderProfile используйте любую из следующих команд:

• Вызывает msbuild , который использует MSDeploy.
• Приводит к сбою (даже при работе в Windows). Чтобы опубликовать профиль без папки, вызовите msbuild напрямую.

В предыдущем примере:

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

Чтобы развернуть приложение с помощью профиля публикации, выполните команду msbuild из командной строки разработчика Visual Studio. Командная строка доступна в папке Visual Studio меню «Пуск» на панели задач Windows. Для упрощения доступа вы можете добавить командную строку в меню «Инструменты» в Visual Studio. Дополнительные сведения см. в разделе Командная строка разработчика для Visual Studio.

MSBuild использует следующий синтаксис команды:

• : путь к файлу проекта приложения.
• : имя профиля публикации.
• : имя пользователя MSDeploy. Его можно найти в профиле публикации.
• : пароль MSDeploy. Получите из файла .PublishSettings. Загрузите файл .PublishSettings из одного из следующих источников:
  • Обозреватель решений. Выберите «Просмотр» > «Обозреватель облачных сервисов». Подключитесь к своей подписке Azure. Откройте Службы приложений. Щелкните приложение правой кнопкой мыши. Выберите «Загрузить профиль публикации».
  • Портал Azure: выберите Получить профиль публикации на панели обзора веб-приложения.

  В следующем примере используется профиль публикации с именем AzureWebApp — Web Deploy:

  Установите среду

  Включите свойство в профиль публикации (.pubxml) или файл проекта, чтобы задать среду приложения:

  Если вам требуются преобразования web.config (например, установка переменных среды на основе конфигурации, профиля или среды), см. раздел Преобразование web.config.

  Исключить файлы

  • Создать артефакты
  • Папки и файлы, соответствующие следующим шаблонам подстановки:
    • **\*.config (например, web.config)
    • **\*.json (например, appsettings.json)
    • wwwroot\**

    MSBuild поддерживает шаблоны подстановки. Например, следующий элемент подавляет копирование текстовых (.txt) файлов в папке wwwroot\content и ее подпапках:

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

    Следующий элемент исключает все файлы из папки wwwroot\content:

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

    • Представления/Главная/About1.cshtml
    • Представления/Главная/About2.cshtml
    • Представления/Главная/About3.cshtml

    Если будут добавлены следующие элементы, эти файлы не будут удалены на сайте развертывания.

    Предыдущие элементы предотвращают развертывание пропущенных файлов. Он не удалит эти файлы после их развертывания.

    Следующий элемент удаляет целевые файлы на сайте развертывания:

    Использование развертывания из командной строки с предыдущим элементом дает вариант следующего вывода:

    Включить файлы

    Общее включение файлов

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

    Предыдущая разметка:

    • Можно добавить в файл .csproj или профиль публикации. Если он добавлен в файл .csproj, он включается в каждый профиль публикации в проекте.
    • Объявляет элемент _CustomFiles для хранения файлов, соответствующих шаблону подстановки атрибута Include. Папка images, указанная в шаблоне, находится за пределами каталога проекта.Зарезервированное свойство с именем $(MSBuildProjectDirectory) разрешается в абсолютный путь к файлу проекта.
    • Предоставляет список файлов для элемента DotNetPublishFiles. По умолчанию элемент элемента пуст. Значение по умолчанию переопределяется в разметке и использует общеизвестные метаданные элемента, такие как %(RecursiveDir) . Внутренний текст представляет папку wwwroot/images опубликованного сайта.

    Выборочное включение файлов

    Выделенная разметка в следующем примере демонстрирует:

    • Копирование файла, расположенного вне проекта, в папку wwwroot опубликованного сайта. Имя файла ReadMe2.md сохраняется.
    • Исключая папку wwwroot\Content.
    • За исключением Views\Home\About2.cshtml.

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

    Дополнительные примеры развертывания см. в файле README Web SDK.

    Запустить цель до или после публикации

    Встроенные цели BeforePublish и AfterPublish выполняют цель до или после цели публикации. Добавьте следующие элементы в профиль публикации для регистрации сообщений консоли до и после публикации:

    Публикация на сервере с использованием недоверенного сертификата

    Сервис Куду

    Чтобы просмотреть файлы в развертывании веб-приложения службы приложений Azure, используйте службу Kudu. Добавьте токен scm к имени веб-приложения. Например:

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

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

    Во-первых, мы рассмотрим взаимосвязь между веб-сайтами, серверами и IP-адресами. Затем мы рассмотрим шаги, которые выполняет ваш браузер:

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

    Веб-сайты, серверы, IP-адреса, о боже!

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

    Каждое устройство в Интернете — серверы, сотовые телефоны, умный холодильник — имеют уникальный адрес, называемый IP-адресом. IP-адрес состоит из четырех пронумерованных частей:

    Но такие числа трудно запомнить! Вот тут-то и появляются доменные имена. jennapederson.dev гораздо легче запомнить, чем 203.0.113.0, верно? Представьте себе, что вам нужно запомнить все телефонные номера ваших контактов, не имея приложения «Контакты» на вашем телефоне. Ваше приложение "Контакты" позволяет искать телефонные номера по имени.

    То же самое мы делаем в Интернете. Система доменных имен, или DNS, похожа на приложение «Контакты» на нашем телефоне. DNS помогает нашему браузеру (и нам) находить серверы в Интернете. Мы можем выполнить поиск DNS, чтобы найти IP-адрес сервера на основе доменного имени jennapederson.dev. Подробнее о DNS можно прочитать здесь.

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

    Процесс

    Чтобы показать, как все эти шаги сочетаются друг с другом, я буду использовать экземпляр Amazon Lightsail и зону DNS Lightsail. Я использую Lightsail, потому что это один из самых простых сервисов для управления виртуальными частными серверами (VPS) и DNS в одном месте, но эти концепции работают для любого сервиса VPS и DNS.

    Давайте разберем части этого URL, которые вы ввели, чтобы попасть сюда.

    Схема

    Домен

    jennapederson.dev — это доменное имя сайта. Это запоминающийся адрес, который указывает на IP-адрес определенного сервера. Если вы посмотрите на DNS-зону Lightsail ниже, вы увидите DNS-запись A, указывающую на экземпляр Lightsail, jennapedersondev-static-ip, которая представляет собой статический IP-адрес экземпляра Lightsail.

    
    

    Ресурс

    Когда вы вводите этот URL-адрес в браузере, hello-world – это название ресурса на веб-сайте, который вы хотите просмотреть. Иногда вы увидите это с расширением файла, например .html, которое указывает, что это статический файл на сервере с содержимым HTML. Без расширения, такого как этот URL-адрес, он обычно указывает, что сервер сгенерировал этот контент. Например, новостной сайт покажет вам персонализированный, актуальный и местный новостной контент, что он может сделать только тогда, когда знает, кто вы и откуда пришел запрос.

    2. Браузер ищет IP-адрес для домена

    После того как вы ввели URL-адрес в браузер и нажали клавишу ввода, браузеру необходимо определить, к какому серверу в Интернете следует подключиться. Для этого ему необходимо найти IP-адрес сервера, на котором размещен веб-сайт, используя введенный вами домен. Он делает это с помощью поиска DNS. Мы рассмотрим процесс поиска DNS на высоком уровне, но это сложная тема, выходящая за рамки этого поста. Подробнее о том, как работает DNS, можно прочитать здесь.

    Поскольку DNS является сложным и должен быть невероятно быстрым, данные DNS кэшируются на разных уровнях между вашим браузером и в разных местах в Интернете. Ваш браузер проверяет собственный кеш, кеш операционной системы, кеш локальной сети на вашем маршрутизаторе и кеш DNS-сервера в вашей корпоративной сети или у вашего интернет-провайдера (ISP). Если браузер не может найти IP-адрес ни на одном из этих уровней кэша, DNS-сервер в вашей корпоративной сети или у вашего интернет-провайдера выполняет рекурсивный поиск DNS. Рекурсивный поиск DNS запрашивает несколько DNS-серверов в Интернете, которые, в свою очередь, запрашивают DNS-запись у других DNS-серверов, пока она не будет найдена.

    После того как браузер получит DNS-запись с IP-адресом, ему нужно найти сервер в Интернете и установить соединение.

    3. Браузер инициирует TCP-соединение с сервером

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

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

    
    

    CDN – это распределенная по всему миру сеть серверов кэширования, которые повышают производительность вашего сайта или приложения (источника), приближая контент к вашим пользователям. CDN Lightsail использует CloudFront, который является частью глобальной сети AWS. Запросы от клиентского браузера могут использовать преимущества этой частной сети со сверхнизкой задержкой и высокой доступностью. Чтобы отслеживать переходы, которые выполняет запрос с моего компьютера на jennapederson.dev, мы можем использовать traceroute. На изображении ниже первый переход (первая строка) относится к моему маршрутизатору. Переходы в первом блоке находятся в сети моего интернет-провайдера, а переходы во втором блоке — в глобальной сети AWS.

    
    

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

    На изображении ниже это подключение (начальное подключение) заняло 130,30 мс.

    
    

    Строка запроса содержит следующее:

    Строка запроса URL-адреса выглядит следующим образом:

    Последняя часть запроса — тело. Тело (обычно) пустое для GET-запроса, подобного нашему. Для запроса, который манипулирует ресурсами, такими как POST, PUT или PATCH, тело будет содержать данные от клиента для создания или обновления.
    Тело запроса может быть в разных форматах, и сервер понимает формат на основе заголовка запроса, Content-Type .
    Вот пример полного запроса URL со строкой запроса и заголовками (без тела, так как это GET):

    После того как сервер получил запрос от клиента, он обрабатывает его и отправляет ответ.

    5. Сервер обрабатывает запрос и отправляет ответ

    • строка состояния, сообщающая клиенту о статусе запроса
    • заголовки ответа, сообщающие браузеру, как обрабатывать ответ
    • запрошенный ресурс по этому пути, будь то контент, такой как HTML, CSS, Javascript или файлы изображений, или данные

    Браузер считает код состояния из 200 успешным. Ответ был 200, поэтому браузер знает, что нужно отобразить ответ.
    Ресурсы могут быть статическими файлами, текстовыми (например, index.html ) или нетекстовыми данными (например, logo.img ). Однако браузеры не всегда запрашивают статические файлы. Часто это динамические ресурсы, генерируемые во время запроса, и файл, связанный с ресурсом, отсутствует. Собственно, в этом запросе именно это и происходит. Файла hello-world нет, но сервер все равно знает, как обработать запрос. Сервер создает динамический ресурс, создавая HTML-код из фрагментов или шаблонов и комбинируя его с динамическими данными для отправки в ответ в виде текста, чтобы браузер мог отобразить страницу.
    Теперь, когда вы знаете, как сервер формирует ответ для отправки обратно в браузер, давайте посмотрим, как браузер обрабатывает ответ.

    6. Браузер отображает содержимое

    После того как браузер получил ответ от сервера, он проверяет заголовки ответа на предмет информации о том, как отображать ресурс. Заголовок Content-Type выше сообщает браузеру, что он получил HTML-ресурс в теле ответа. К счастью для нас, браузер знает, что делать с HTML!
    Первый запрос GET возвращает HTML, структуру страницы. Но если вы проверите HTML-код страницы (или любой веб-страницы) с помощью инструментов разработчика вашего браузера, вы увидите, что он ссылается на другие ресурсы Javascript, CSS, изображения и запрашивает дополнительные данные для отображения веб-страницы в соответствии с дизайном.
    Поскольку браузер анализирует и отображает HTML, он делает дополнительные запросы на получение Javascript, CSS, изображений и данных. Он может делать многое из этого параллельно, но не всегда, и это история для другого поста.

    
    

    На изображении выше вы можете видеть, что HTML ссылается на ресурс CSS. Браузер делает последующий запрос на сервер, чтобы получить этот ресурс CSS для оформления страницы. Заголовок Content-Type запроса ресурса CSS указывает браузеру отображать CSS. Если браузер запрашивает ресурс изображения, заголовок Content-Type сообщает браузеру, что это нетекстовые данные, и отображает их соответствующим образом.

    Подведение итогов

    Вы сделали это! Вы отследили запрос URL-адреса от браузера до сервера, на котором он размещен, и ответ обратно в браузер для обработки. Мы рассмотрели взаимосвязь между веб-сайтами, серверами, IP-адресами и рассмотрели каждый из шагов, которые проходит ваш браузер, когда вы вводите URL-адрес в свой браузер и нажимаете клавишу ввода. Для ознакомления вот эти шесть шагов:

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

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

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

    Где должен находиться ваш веб-сайт на вашем компьютере?

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

    1. Выберите место для хранения проектов веб-сайта. В выбранном вами месте создайте новую папку с именем веб-проекты (или аналогичную). Здесь будут жить все проекты вашего веб-сайта.
    2. Внутри этой первой папки создайте еще одну папку, в которой будет храниться ваш первый веб-сайт. Назовите ее test-site (или как-нибудь по-новому).

    Отступление от регистра и пробелов

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

    1. Многие компьютеры, особенно веб-серверы, чувствительны к регистру. Так, например, если вы поместите изображение на свой веб-сайт по адресу test-site/MyImage.jpg, а затем в другом файле попытаетесь вызвать изображение как test-site/myimage.jpg , это может не сработать.
    2. Браузеры, веб-серверы и языки программирования не всегда обрабатывают пробелы. Например, если вы используете пробелы в имени файла, некоторые системы могут рассматривать это имя как два имени файла. Некоторые серверы заменят области в ваших именах файлов на «%20» (код символа для пробелов в URL-адресах), в результате чего все ваши ссылки будут неработающими. Лучше разделять слова дефисами, а не символами подчеркивания: my-file.html vs. my_file.html .

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

    Какую структуру должен иметь ваш сайт?

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

    1. index.html : этот файл, как правило, содержит содержимое вашей главной страницы, то есть текст и изображения, которые люди видят при первом посещении вашего сайта. С помощью текстового редактора создайте новый файл с именем index.html и сохраните его прямо в папке вашего тестового сайта.
    2. папка изображений: в этой папке будут содержаться все изображения, которые вы используете на своем сайте. Создайте папку с именем images в папке вашего тестового сайта.
    3. папка стилей: эта папка будет содержать код CSS, используемый для оформления содержимого (например, для настройки цвета текста и фона). Создайте папку с именем styles в папке вашего тестового сайта.
    4. папка scripts: эта папка будет содержать весь код JavaScript, используемый для добавления интерактивных функций на ваш сайт (например, кнопки, которые загружают данные при нажатии). Создайте папку scripts в папке вашего тестового сайта.

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

    Пути к файлам

    Чтобы заставить файлы общаться друг с другом, вы должны указать путь к файлу между ними — по сути, маршрут, чтобы один файл знал, где находится другой. Чтобы продемонстрировать это, мы вставим немного HTML в наш файл index.html и заставим его отображать изображение, которое вы выбрали в статье «Как будет выглядеть ваш веб-сайт?» Кроме того, вы можете выбрать имеющееся в вашем распоряжении изображение на компьютере или в Интернете и использовать его в следующих шагах:

    1. Скопируйте изображение, которое вы выбрали ранее, в папку с изображениями.
    2. Откройте файл index.html и вставьте в него следующий код точно так, как показано. Пока не беспокойтесь о том, что все это значит — мы рассмотрим структуры более подробно позже в этой серии.

    
    

    Некоторые общие правила для путей к файлам:

    • Чтобы создать ссылку на целевой файл в том же каталоге, что и вызывающий HTML-файл, просто используйте имя файла, например мое-изображение.jpg .
    • Чтобы сослаться на файл в подкаталоге, напишите имя каталога перед путем и косую черту, например подкаталог/my-image.jpg .
    • Чтобы создать ссылку на целевой файл в каталоге над вызывающим HTML-файлом, поставьте две точки. Так, например, если index.html находится внутри подпапки test-site, а my-image.jpg — внутри test-site, вы можете сослаться на my-image.jpg из index.html, используя ../my-image.jpg.
    • Вы можете комбинировать их по своему усмотрению, например, ../subdirectory/another-subdirectory/my-image.jpg .

    Пока это все, что вам нужно знать.

    Примечание. В файловой системе Windows чаще всего используется обратная косая черта, а не прямая, т.е. С:\Виндовс. В HTML это не имеет значения — даже если вы разрабатываете свой веб-сайт для Windows, вы все равно должны использовать косую черту в своем коде.

    Что еще нужно сделать?

    На этом пока все. Ваша структура папок должна выглядеть примерно так:

    
    

    ИЛИ ПОИСК ЦИТАТЫ

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

    ВИДЫ КОНТЕНТА

    ТЕМЫ

    
    

    
    

    
    

    
    

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

    Как выбирать изображения

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

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

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

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

    Humaaans: инструмент для создания разнообразных изображений с разными оттенками кожи, волосами, одеждой и способностями (бесплатно)

    CreateHER: стоковые изображения чернокожих женщин

    Diversify.photo: цветные фотографы

    Коллекция Джопвелла: стоковые фотографии чернокожих, латиноамериканцев и коренных американцев (бесплатно)

    Nappy.co: фотографии чернокожих и коричневых людей в высоком разрешении (бесплатно)

    TONL: стоковые фотографии с культурным разнообразием

    Gender Spectrum Collection: библиотека стоковых фотографий с трансгендерными и небинарными моделями (бесплатно)

    PUSHLiving: стоковые изображения людей с ограниченными возможностями

    Коллекция Getty Images Disrupt Aging: фотографии, направленные на борьбу со стереотипами о возрасте

    
    

    РИСУНОК 6.1.1

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

    Перформативное разнообразие изображений

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

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

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

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

    Использование: постоянный показ чернокожих на изображениях на всех платформах в течение года

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

    Стереотипы в изображениях

    Предыстория. Тот факт, что изображение показывает разнообразие или человека из недостаточно представленной группы, не означает, что оно уважительное или инклюзивное. Некоторые изображения увековечивают стереотипы через действия субъектов, одежду, окружающую среду или положение. Например, в учебнике по естествознанию чернокожие изображаются только как спортсмены, а не как ученые, что увековечивает стереотипы (3). Другие примеры стереотипов в изображениях включают показ фотографий трансгендеров до и после перехода, а также показ стереотипно гендерных изображений трансгендеров. Публикация таких изображений усиливает предубеждения и неуважение к людям. Изучение своей аудитории — это один из способов распознать и избежать вредных стереотипов в изображениях.

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

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

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

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

    Точность изображений

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

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

    Использование: сочетание изображения человека с цитатой этого человека

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

    Редактирование фотографий

    Предыстория. То, как редактируются фотографии, может сильно повлиять на то, как их воспримет публика. Кроме того, редакторы, которым приходится кадрировать фотографии, могут решать, кого увидит широкая аудитория. Фотоиллюстрации — изображения, которые включают измененные фотографии или фотографии в сочетании с иллюстрациями — также склонны к предвзятости и могут увековечить стереотипы, особенно если манипуляции с фотографиями не сразу заметны или раскрыты аудитории. Редактирование фотографий, чтобы искусственно сделать их более разнообразными (например, с помощью Photoshop, чтобы включить в фотографию больше цветных людей), также может быть недостоверным и относиться к разнообразию как к маркетинговой тактике, а не как к истинной ценности, и не одобряется Американским химическим обществом. .

    Дополнительно следует учитывать коррекцию цвета и яркости для людей с разным тоном кожи. Сара Льюис объясняет в статье New York Times 2019 года: «Светлая кожа стала химической основой для кинотехнологии». Правильная настройка изображений для различных оттенков кожи выражает уважение к людям и обеспечивает честное и точное отображение изображений.

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

    Оттенки кожи в иллюстрациях

    Предыстория: All In, набор инструментов от Google, говорит: «Повсеместно люди находят иллюстрации с оранжевыми или желтыми оттенками кожи, чтобы представить белых пользователей». Например, Lego получила ответную реакцию за то, что желтый цвет кожи может представлять кого угодно. «Фигурки LEGO отражают нормы господствующей культуры под маской нейтралитета», — пишет Саманта Аллен в Daily Beast.

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

    Подписи к изображениям

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

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

    Рекомендация: внимательно продумайте, кого вы называете в подписи и как вы это делаете. Как правило, ко всем следует относиться одинаково — например, для всех должны быть указаны полные имена. Если вы не знаете имен всех или их имена не важны для понимания аудитории, все же признайте, что на изображении есть другие люди (например, «члены команды», «коллеги по лаборатории»). Если вы указываете должность или другую информацию для одного человека, но не для другого, на то должна быть веская причина.

    
    

    РИСУНОК 6.1.2

    Подпись: несколько будущих лидеров CAS 2019 позируют с сэром Мартином Полякоффом (на переднем плане) из Ноттингемского университета, который известен своими видеороликами о периодической таблице. Альтернативный текст: сидит сэр Мартин Полякофф, за ним восемь молодых людей.

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

      
    • Как закрепить панель в Excel
      
    • Какое должно быть напряжение на аккумуляторе планшета
      
    • Тачпад на ноутбуке что это такое
      
    • Как изменить дисплей на Redmi 7a
      
    • Как играть в gta 5 онлайн на xbox 360