WebSite X5Help Center

 
Андрей Г.
Андрей Г.
User

Как в тексте правильно сделать ".... читать дальше"?  ru

Auteur : Андрей Г.
Visité 1987, Followers 1, Partagé 0  

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

Posté le
11 RéPONSES - 5 UTILE - 1 CORRECT
Aleksej H.
Aleksej H.
Moderator

Здравствуйте. Если нужно что-то типа такого (вступительный текст + кнопка "Подробнее"), то создайте несколько страниц. На одной будет вступительный текст с объектом Кнопка, ведущей на страницу с полным текстом. Тогда поисковый робот будет видеть ссылку на страницу с полным текстом, перейдёт на неё и проиндексирует. Плюс, страницы с полным текстом будут в карте сайта.

Lire plus
Posté le de Aleksej H.
Aleksej H.
Aleksej H.
Moderator

Если нужно скрыть часть текста и показать её по нажатию на ссылку, то вот пример. Попробуйте вставить вот это в текстовый объект:

<details>Покажи, что у тебя есть!</details>

Но включите опцию активации HTML кода.

Lire plus
Posté le de Aleksej H.
Андрей Г.
Андрей Г.
User
Auteur

Алексей, подскажите пожалуйста как правильно реализовать чтобы "Подробнее", было голубым, а раскрывающиеся буквы черными, т.е как начало текста. А также хотелось бы спросить тег<details> чувствителен к новым абзацам текста? 

Lire plus
Posté le de Андрей Г.
Vitaliy M.
Vitaliy M.
User

Вот простой пример:

Код HTML:

<div id="content">
<span class="more">Читать полностью</span>
<br><br>
<h3>1. Будущее глазами IBM</h3>
Первые электронные программируемые компьютеры, появившиеся в 40-х годах прошлого столетия, являлись, по сути, всего лишь очень быстрыми калькуляторами. И как же быстро всё изменилось с тех пор в IT-отрасли! Всего за 60 с небольшим хвостиком лет громоздким и неэффективным вычислительным машинам пришли на смену лёгкие и тоненькие мобильные компьютеры, умещающиеся на ладони. Более того, погоня за вычислительной производительностью постепенно сменяется технологиями, которые открывают перед компьютерами новые виды деятельности, раньше доступные только человеку. Мы входим в так называемую эру когнитивных компьютеров, когда электронные системы смогут заниматься не только подсчётами и чётким выполнением программ, но и реализовывать некоторые функции живых организмов.
<br>
Начиная с 2006 года компания IBM ежегодно составляет список IT-технологий будущего под названием IBM 5 in 5, которые в ближайшие пять лет могут ощутимо повлиять на жизнь людей. В преддверии Нового года была опубликована седьмая по счёту редакция этого списка. Именно на когнитивные технологии делает ставку «голубой гигант». По мнению компании, за пятилетку в этом направлении человечество может сделать существенный рывок. Человек обладает следующими основными органами чувств - зрения, слуха, обоняния, осязания, вкуса. Добавление функций любого из вышеперечисленных органов чувств в компьютер открывает новые интересные возможности.
<br>
<h3>1.1. Коснуться виртуального</h3>
Помощник директора подразделения IBM Research Retail Analytics Робин Шварц (Robyn Schwartz), архитектор решений Дандапани Шанмугам (Dhandapani Shanmugam) и архитектор программного обеспечения IBM Software Group Industry Solutions Сиддик Мухаммед (Siddique A. Mohammed) считают, что сенсорные технологии ещё глубже проникнут в нашу жизнь. Cовременные сенсорные дисплеи уже обеспечивают высокий уровень удобства при управлении смартфонами и планшетами. Но в будущем с помощью касания дисплея пользователи смогут, например, виртуально пощупать товары в интернет-магазинах. Сенсорные технологии позволят различать ткани, оценивать их текстуру. Реализацию этой технологии IBM видит в создании вибрационного поля, ощутимого тактильно на расстоянии нескольких миллиметров от дисплея.
<br>
Впрочем, сфера применения подобных технологий не ограничивается покупками - лишь фантазией инженеров. IBM предлагает, например, проводить удалённый предварительный медицинский осмотр по фотографиям, которые врач может прощупать. Также интересно использование данной технологии в коммуникациях. Представьте себе, как вы, разговаривая по «Скайпу», можете погладить по лицу любимого человека, находящегося в тысячах километрах от вас. Но это уже скорее работа на более далёкую перспективу. Если стандартные образцы тканей и материалов можно без проблем добавить в базу данных, то для передачи текстуры кожи человека, её температуры, гладкости и так далее надо будет каким-то образом считывать все эти параметры в режиме реального времени.
<br>
<h3>1.2. Компьютеры со зрением</h3>
Большинство технологий поиска по изображениям используют так называемые теги или описания к картинкам, благодаря чему компьютер может определить, что там нарисовано. Человек же воспринимает изображения совсем на другом уровне. Он способен проанализировать картинку, определить, что делает субъект или какая ситуация изображена.
<br>
Несмотря на впечатляющий рост вычислительной мощности, компьютеры до сих пор не научились «видеть» как человек. Это и не удивительно, ведь зрение является довольно сложным механизмом, и традиционным программированием его не воссоздашь. Но, по мнению старшего руководителя IBM Intelligent Information Management Джона Смита (John Smith), использование когнитивного подхода позволит компьютерам в будущем анализировать изображения на основе тысяч образцов изображений в базе данных. Например, мы хотим научить компьютер тому, как выглядит песчаный пляж. Для этого необходимо показать ему достаточно большое количество фотографий с разными пляжами в разных ракурсах. По этим образцам компьютер выделит такие специфические особенности, как распределение цветов, текстура, контуры. Далее процесс обучения можно усложнять. Когда компьютер уже будет узнавать пляж, можно будет научить его распознавать, что люди делают на пляже - загорают, строят песочные замки или играют в волейбол.<br>
Эту технологию можно использовать в медицине, особенно в дерматологии для своевременного определения рака кожи на ранних стадиях, когда симптомы внешне практически не видимы для человеческого глаза. Также с помощью «компьютерного зрения» в городах можно будет развернуть системы быстрого реагирования на различные ситуации, включая стихийные бедствия.
</div>

Стили:

<style>
#content {
height: 250px;
overflow: hidden;
margin: 1%;
padding: 20px;
text-align: justify;
font-family: Century Gothic,Arial,Verdana,sans-serif;
text-shadow: 1px 1px 1px #C9C9C9;
color: #4A4949;
border: 5px double #e6ce9f;
-webkit-box-shadow:0 0 10px rgba(0,0,0,0.6);
-moz-box-shadow:0 0 10px rgba(0,0,0,0.6);
box-shadow:0 0 10px rgba(0,0,0,0.6);
-moz-border-radius:3px;
border-radius:3px;
}
h3 {
text-align:center;
}
.more {
text-decoration: underline;
float: right;
color: #880000;
font-size: 14px;
}
.more:hover {
font-weight: bold;
cursor: pointer;
}
</style>

Скрипт:

<script>
$(document).ready(function(){
$('#imFooPad').css('height', '0px');
$('.more').click(function() {
if ($(this).text() == 'Читать полностью') {
$(this).text('Свернуть');
$(this).parent().css('height', '100%');
} else {
$(this).text('Читать полностью');
$(this).parent().css('height', '250px');
}
});
});
</script>

Lire plus
Posté le de Vitaliy M.
Vitaliy M.
Vitaliy M.
User

Коды вставляем так:

Lire plus
Posté le de Vitaliy M.
Vitaliy M.
Vitaliy M.
User

Сам проект WebSite X5 Pro Demo

Lire plus
Posté le de Vitaliy M.
Aleksej H.
Aleksej H.
Moderator

Андрей, думаю, что Вы уже получили ответы на свои вопросы от Vitaliy.

Lire plus
Posté le de Aleksej H.
Андрей Г.
Андрей Г.
User
Auteur

Виталию спасибо за хороший пример. Но хотелось бы ещё по вопросу о теге <details> получить ответ.

Lire plus
Posté le de Андрей Г.
Vitaliy M.
Vitaliy M.
User
Андрей Г.
.... Но хотелось бы ещё по вопросу о теге <details> получить ответ.

Пример:

Код HTML:

<div class="spoiler">
<details>
<summary>1. Будущее глазами IBM</summary>
<div>— Первые электронные программируемые WebSite X5 Demo Version в 40-х годах прошлого столетия, являлись, по сути, всего лишь очень быстрыми калькуляторами. И как же WebSite X5 Demo Version тех пор в IT-отрасли! Всего за 60 с небольшим хвостиком лет громоздким и неэффективным вычислительным WebSite X5 Demo Version ёгкие и тоненькие мобильные компьютеры, умещающиеся на ладони.</div>
</details>
<details>
<summary>1.1. Коснуться виртуального</summary>
<div>— Помощник WebSite X5 Demo Version IBM Research Retail Analytics Робин Шварц (Robyn Schwartz), архитектор решений Дандапани Шанмугам (Dhandapani WebSite X5 Demo Version рограммного обеспечения IBM Software Group Industry Solutions Сиддик Мухаммед (Siddique A. Mohammed) считают, WebSite X5 Demo Version ещё глубже проникнут в нашу жизнь.</div>
</details>
</div>

Стили:

.spoiler {
border: 1px solid #e0e0e0;
padding: 0 1em;
}
.spoiler details {
padding: 1em 0;
text-align: left;
}
.spoiler details + details {
border-top: 1px solid #e0e0e0;
}
.spoiler summary {
color: #4d5895;
}
.spoiler details div {
overflow: hidden;
padding: 1em 1em 0;
}
.spoiler details[open] div {
animation: spoiler 1s;
text-align: justify;
}
@keyframes spoiler {
0% {max-height: 0;}
100% {max-height: 10em;}
}

----------------------------------------

Коды вставляем так:

Lire plus
Posté le de Vitaliy M.
Vitaliy M.
Vitaliy M.
User

Сам проект WebSite X5 Pro Demo

Lire plus
Posté le de Vitaliy M.
Андрей Г.
Андрей Г.
User
Auteur

Очень доходчиво и познавательно. Спасибо за ответы Виталию и Алексею.

Lire plus
Posté le de Андрей Г.