WI-FI Lenovo G580 - печалька Ответы на не заданные вопросы... Простая галерея на Java Script Автоматическая нумерация строк таблицы Форматирование текста на web-странице. Интервью.

Trifler Blog

WI-FI Lenovo G580 - печалька

Всем хорош ноутбук Lenovo G580, но вот проблема, модуль вай-фая работает странно и это еще мягко сказано...

Приобретенный пару недель назад Lenovo G580 с предустановленным Windows 8, принесенный домой и подключенный по вай-фаю к Internet, благополучно прошел лицензирование, обновился до Windows 8.1 и никаких нареканий не вызывал и показалось вдруг на мгновенье, что жизнь так замечательна и прекрасна.

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

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

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

Смартфон и старенький ноут "DELL" сеть видели и с большим удовольствием скитались по просторам паутины, усмехаясь про себя над очередной китайской подделкой :)

Итак:

  • Роутер работает нормально и раздает вай-фай, сосед этажем ниже, подключившись к моей сети не испытывает проблем
  • Модуль WI-FI Lenovo G580 видит все доступные сети
  • Подключение к сети соседа происходит четко и нет никаких претензий к моему Lenovo G580
  • Поиск в Google на предмет устранения возникшей проблемы, ни к чему не привел
  • Откат системы на день приобретения ноутбука, также не принес положительного результата

Дальнейшее решение проблем видится в двух направлениях:

  • Перенастройка роутера
  • Переустановка ОС с полным удалением родной

Какой вариант поможет сказать трудно, тем более, что пока нет времени на столь решительные действия :)

Оставить комментарий

Ответы на не заданные вопросы...

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

Java Script из изменений, смотрим по ссылке выше.

html

Одиночный блок в котором в качестве кнопок навигации находятся два span'a и собственно ротатор картинок.

<div class="gallery">
<span onclick="left()" class="l" title="Следующая картинка">
  «
</span>
<script type="text/javascript">
document.write("<img id='rotatorimg' src='" + array[0] + "'>");
</script>
<span onclick="right()" class="r" title="Предыдущая картинка">
  »
</span>
</div>

css

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

.gallery {
  border:#000 1px solid;margin:10px auto;
  padding:2px;position:relative;width:200px;
}
.gallery img {
  border:none;display:block;
  overflow:hidden;width:auto;height:150px;
}
.gallery span {
  border:#f00 1px solid;display:none;cursor:pointer;
  padding:0 3px;position:absolute;top:65px;z-index:10;
}
.gallery:hover span {
  background-color:#000;color:#fff;
  display:block;font:bold 15px Arial;
}
.gallery .l {left:2px;}
.gallery .r {right:2px;}

Пример

Оставить комментарий

Простая галерея на Java Script

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

В запасниках местного автора, нашелся простейший скрипт без всяких наворотов, в котором смена картинок происходит по клику на стрелки.

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

Java Script

<script type="text/javascript">
  var array = new Array(
    "xxx.jpg",
    "yyy.jpg",
    ....
    "zzz.jpg"
  );//массив с путями к картинкам
  var i = 0;
  function left() {
    var image = document.getElementById("rotatorimg");
    i--;
    if (i < 0) i = array.length - 1;
    image.src = array[i];
  }
  function right() {
    var image = document.getElementById("rotatorimg");
    i++;
    if (i == array.length) i = 0;
    image.src = array[i];
  }
</script>

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

html

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

Вариант № 1 (горизонталь)

<table>
 <tr>
  <td onclick = 'left()'> << </td>
  <td>
   <script type = 'text/javascript'>
   document.write("<img id='rotatorimg' src='" + array[0] + "'>");
   </script>
  </td>
  <td onclick = 'right()'> >> </td>
 </tr>
</table>

Вариант № 2 (вертикаль)

<table>
 <tr><td onclick = 'left()'> << </td></tr>
 <tr><td>
  <script type = 'text/javascript'>
   document.write("<img id='rotatorimg' src='" + array[0] + "'>");
  </script>
 </td></tr>
 <tr><td onclick = 'right()'> >> </td></tr>
</table>

Пример для горизонтального расположения кнопок

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

А если пойти еще дальше, то html-код можно еще более упростить:

Вариант № 3 (без кнопок навигации)

<div onclick = 'left()'>
  <script type = 'text/javascript'>
   document.write("<img id='rotatorimg' src='" + array[0] + "'>");
  </script>
</div>

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

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

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

Комментариев: 2

Автоматическая нумерация строк таблицы

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

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

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

Для решения, воспользуемся средствами представляемыми "Каскадными таблицами стилей".

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

Шаг первый - html

Обычная таблица:

<table>
  <tr>
    <td class="number"></td>
    <td>...</td>
    ...
    <td>...</td>
  </tr>
  ...
  <tr>
    <td class="number"></td>
    <td>...</td>
    ...
    <td>...</td>
  </tr>
</table>

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

Шаг второй - css

table {counter-reset:section;}
.number {counter-increment:section;}
.number:before {content:counter(section) ".";}

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

Другие варианты использования

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

Оставить комментарий

Форматирование текста на web-странице. Интервью.

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

Если со сплошным текстом все более или менее ясно, тут для форматирования, вполне достаточно знания и использования всего одного тега <p>...</p>, а для выделения того или иного фрагмента текста есть дополнительные теги типа: <blockquote>...</blockquote> - предназначенный для длинных цитат внутри документа или тег <cite>...</cite> который помечает текст, как цитату или сноску на другой материал.

Такое выделение удобно для изменения стиля текста через CSS, а также применяется для разделения кода HTML на структурные элементы.

Скриншот, как пример использования <blockquote>...</blockquote>, взято с сайта посвященному варианту Полугаевского в сицилианской защите:

chess-vpb5.ru

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

В первую очередь надо задаться вопросом, а что же такое интервью?

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

Итак, в общем случае, есть вопрос и есть ответ на него.

Многие идут по самому простому пути, загоняя все в тег параграфа, выделяя вопрос подчеркиванием, курсивом или устанавливая жирное начертание шрифта и даже все это вместе взятое :) Далее выполняется принудительный перевод строки при помощи тега <br>

Приблизительно это выглядит так:

<p><b>Вопрос</b><br>Ответ....</p>

Вопрос
Ответ...

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

C точки зрения автора Trifler.ru, идеальной разметкой текста интервью, может служить список определений с соответствующими стилевыми изысками :)

Простейший, очень наглядный и легко запоминающийся html-код:

<dl class="interview">
  <dt>Вопрос</dt>
  <dd>Ответ...</dd>
  <dt>Вопрос...</dt>
  <dd>Ответ...</dd>
</dl>

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

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

Вот с таким css:

.interview {margin:9px 12px;}
.interview dt {font:bold 14px "Times New Roman";margin:3px;}
.interview dd {font:14px "Times New Roman";margin:3px;}
.interview dd p {margin:0;padding:4px 0;}

можно посмотреть пример интервью.

Комментариев: 1

Прыг: 01 02 03 04 05 06 07 08 09 10
Скок: 10 20
апрель 2014
пн вт ср чт пт сб вс
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
free  counters