Цитаты и немного философии HTML

Природа цитат Тяги

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

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

Теперь, когда мы знаем, что это такое, как мы можем перевести эти элементы в HTML?

Дилемма

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

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

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

Цитата идет в источник HTML

<article> 
   <header> 
      <section class="pullquotes"> 
          <div class="pq" data-quoteref="(pqid)"><a href="(pqid)...</a></div> 
		... 
		</section> 
	</header> 
	<div class="main"> 
		... 
		<div id="(pqid)></div> 
		... 
	</div> 
</article>

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

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

Вытащить цитату генерируется

<article> 
	<div class="main"> 
		... 
		<div clas="pq" id="(pqid)></div> 
		... 
		<span data-quoteref="(pqid)">...</span> 
		... 
	</div> 
</article>

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

Вывод

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

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

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