X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> HTML5 — боты браузеры и люди наконец договорились
k0ttee
k0ttee
Topic Starter сообщение 9.10.2014, 23:31; Ответить: k0ttee
Сообщение #1


HTML5 решает очень много проблем как для людей, так и для ботов. Бегло пройдем по истории, чтоб вы были в курсе о чем речь.

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

Потом появились таблицы, но как боту отличить сайт-таблицу от документа-таблицы или таблицы вставленной в контент? Правильно, при табличной верстке — никак. Еще таблицы ограничивали в последовательности элементов: сверху вниз и слева направо.

Блоки, как появились, так и существуют. Собственно <div> это <контейнер> или <блок>. Это породило в коде зоопарки вида <div id='footer'>. Ближе к правде, но еще не торт...

И вот он, пятый...

Пятый HTML дал нам мета-разметку вида <footer></footer>, убрав зоопарки вида <div id='footer'></div> и <div class='footer'></div>. Теперь и людям и ботам понятнее и подвал уже ни с чем не спутать.

А еще есть микроразметка и атрибуты. Скажем, mailto для отличия почты от текста. Атрибуты разделят телефоны, адреса почт, и прочее. Вон сколько проблем одним махом. И человеку и поисковому боту счастье.

А теперь давайте смотреть. Что-то я опишу, а что-то догугливайте сами или дополняйте...

Сразу скажу, что IE 7 и 8 версий поймут html5 только на спец-костылях. Костыли можно взять прямо с гугля.
<!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Если и пользоваться IE, то либо обновив до 11, либо для скачивания другого браузера...

Преимущество мета-разметки в том, что она: короче, понятнее человеку и поисковому боту.

Доктайп очень лаконичен:
<!doctype html>


Кодировка
Было:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Стало:
<meta charset="utf-8">


Подключение css и js-файлов
Было css:
<link  rel="stylesheet" type="text/css" href="style.css">

Стало css:
<link  href="style.css">


Было js:
<script type="text/javascript" src="file.js"></script>

Стало js:
<script src="file.js"></script>


Теперь банановый можно без указания mime-type. Раньше я не понимал зачем вообще этот тип писать, если браузер и без него понимает где css а где js. Но, когда перешел с хостинга на vds, понял, что без этого файлы не станут сжиматься в gZip. С приходом html5 все сжимается и mime-type писать не надо. Лепота!

Язык
Было:
<html lang="ru" dir="ltr" class="client-nojs" xmlns="http://www.w3.org/1999/xhtml">

Стало:
<html lang="ru">


Мета-разметка блоков (не путать с микро-разметкой)
Вот основные элементы в структуре документа:

<section></section> — сгруппирует тематические блоки (создав секции), а еще можно вкладывать этот элемент.

<header></header> — заголовок разделов или страниц. Чаще всего в верстке им обрамляют шапку.

<footer></footer> — типа нижний колонтитул (студенты знают что такое колонтитул, это «умное слово») в разделе или странице. Кэп намекает, что это подвал.

<nav></nav> — навигационная цепь сайта. Здесь может быть как основное меню, так и блоки «хлебных крошек».

<article></article> — обертка основного содержания на страницах. Вот этим и нужно показывать боту на «самое вкусное место».

<aside></aside> — вторичный блок в страницах. Обычно в него запихивают сайдбар (то есть боковую колонку).

Ахтунг! Модные элементы html5 получили инлайновую суть, то есть для привычного отображения (как div'ами) им надо задать блочную дисплейность. Короче, вот:
header, nav, section, article, aside, footer {display: block}


Кроме основных тегов для разбивки страницы, пятый html дал нам:

Атрибут placeholder — выводящий надпись в <input>, а при наборе текста он исчезает. Это появилось именно в html5, и теперь отпадает нужда в дополнительных скриптах вывода текста в поля, например в поле «поиск» или «логин/пароль». Меньше JS, - меньше нагрузка на браузер.

<mark></mark> — выделение важного словечка. Текст будет с желтым фоном. Сработает как на светлом так и на темном фоне. Вы же будете делать фон желтым?

<adress></adress> — капитанский тег вывода угадайте чего... адрес организации, которой пренадлежит сайт.

<video></video> — покажет видео на сайте используя стандартный плеер в браузере пользователя.

<audio></audio> — даст послушать аудио-запись через стандартный плеер браузера.

<b>HTML5 и СЕО</b>

Ключевая фича HTML5 на мой взгляд — понятность для поисковых ботов, т.е. сегментация страницы. В прошлом, четвертом html'е, провернуть это было нельзя, ибо <div> не дает смысловой нагрузки блоку. Новые же элементы (header, article, aside, footer) все исправили. Теперь бот легко поймет, что <footer>этот текст</footer> является копирайтом и прочей «подвальной» информацией.

Ссылки

В HTML5 ссылкам досталось больше атрибутов. Вот некоторые из них:

alternate — ссылки на альтернативные адреса одной и той же страницы. Это поможет Wordpress'оводам для избавления от #more в конце адреса без облома пользователей в прокрутке уже прочитанного.

author — ссылки к автору веб-страницы. Так стоит сослаться например на профиль автора.

external — ссылки, указывающие на внешние ресурсы. Возможно это поможет вам решить проблему, когда внешняя ссылка идет скрипт переадресации? Не, не пробовали?

help — ссылки, ведущие на страницы помощи. Даже не знаю что это дает...

next — ссылка ведущая на следующую часть страницы. Вот так можно объяснить боту, что мы разбили длинную статью на части.

prev — ссылка ведущая на предыдущую часть страницы. Пригодится для ссылки «назад» при разбитии статьи на части.

Остальные атрибуты гуглятся, или, читаются (на английском) там http://www.w3.org/TR/html5/links.html#linkTypes

Все описывать не буду, а то будет очень длинно и у нас тут не хабр... :)


--------------------
Задонь кибер-коту на крипто-вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
SergeS_rs
SergeS_rs
сообщение 10.10.2014, 6:38; Ответить: SergeS_rs
Сообщение #2


Прочитал с удовольствием, спс за подробное пояснение :) малость я уже знал, так как читал об этом.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
reds
reds
сообщение 11.10.2014, 2:02; Ответить: reds
Сообщение #3


Крутяк, я не знал, что все это из HTML5, хотя и встречаю часто. Например, выпавшие rel и type. Теперь комментировать не нужно некоторые блоки в шаблонах, а то ID не ко всем дивам прописываешь, а когда дивов много приходится комментировать <!--header--> и т.д.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
airman
airman
сообщение 13.10.2014, 15:05; Ответить: airman
Сообщение #4


Супер! Особенно понравилось, что вывод видео такой просто, не надо ни чего городить :smile-thumb-up:


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
prolisk
prolisk
сообщение 13.10.2014, 19:21; Ответить: prolisk
Сообщение #5


Однозначно удобно - теги указывают ПС что есть чем (статья, футер, сайдбар), а также при правильном использовании тегов можно создать красивый снипет, что однозначно приведет больше народу. А ну и да - ранжироваться выше будет


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Martin_rs
Martin_rs
сообщение 17.10.2014, 12:18; Ответить: Martin_rs
Сообщение #6


Сейчас HTML 5 и CSS 3 творят чудеса в коде. На HTML 5 уже пишут даже ОС, вопрос в другом стал ли HTML 5 ЯП или его как и его младших братьях можно считать язык разметки.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
k0ttee
k0ttee
Topic Starter сообщение 26.10.2015, 2:34; Ответить: k0ttee
Сообщение #7


пишут даже ОС

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

Однако даже PHP (personal home page) это препроцессор между базой данных и выхлопом в браузер. Да, это внезапно, но так и есть... если абстрагироваться и не использовать раздутые до монструозных размеров движки.
когда дивов много приходится комментировать <!--header--> и т.д.

Я это называю "смотришь </div> видишь фигу"... Фиг поймешь что он закрывает. :angry:
Можно сворачивать-разворачивать блок в редакторе чтоб быстро глянуть на открывающую часть. В отладчике браузера неплохо с быстрым определением... Но все не то. <_<

А теперь - даже по закрывашке видно какой блок. :goodpost:


--------------------
Задонь кибер-коту на крипто-вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
prolisk
prolisk
сообщение 26.10.2015, 17:01; Ответить: prolisk
Сообщение #8


(k0ttee)
Фиг поймешь что он закрывает.

сам начал комментить - много кода , но удобно :)


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
k0ttee
k0ttee
Topic Starter сообщение 26.10.2015, 17:45; Ответить: k0ttee
Сообщение #9


много кода , но удобно

Прям щас прям тут удалось довести навигацию в сайдбаре до идеала...
В основном документе только &lt;навигация&gt;ссылки&lt;/навигация&gt;
&lt;nav&gt;
&lt;a href=&quot;/&quot;&gt;
&lt;a href=&quot;/&quot;&gt;
&lt;a href=&quot;/&quot;&gt;
&lt;/nav&gt;

А обертка подгружается через JS :D
&lt;ul type=&quot;&quot;&gt;
&lt;nav&gt;
&lt;li&gt;&lt;a href=&quot;/&quot;&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/&quot;&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/&quot;&gt;&lt;/li&gt;
&lt;/nav&gt;
&lt;/ul&gt;

Раньше тоже говнокодил. :rjunimagu: Теперь приходится долго продумывать (пока стираю носок и жарю яишенку) зато как придумаю - пишу настолько чистый код, что сам в шоке.


--------------------
Задонь кибер-коту на крипто-вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
prolisk
prolisk
сообщение 26.10.2015, 18:15; Ответить: prolisk
Сообщение #10


(k0ttee)
Теперь приходится долго продумывать

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


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыМои боты в Telegram
116 radarus 32436 9.3.2024, 10:31
автор: radarus
Открытая тема (нет новых ответов) СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое
5 CULA 3294 19.12.2023, 18:55
автор: CULA
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВеб-разработка (HTML5, CSS3, JavaScript, jQuery, Ajax, PHP)
56 qpPeW 44767 19.7.2023, 10:03
автор: qpPeW
Открытая тема (нет новых ответов) Софт/сайты/сервисы/боты от Undestiny
Предоставляю услуги создания программ под заказ.
11 Undestiny 4315 22.4.2023, 16:22
автор: Undestiny
Открытая тема (нет новых ответов) Требуются люди для наполнения форума
Тема - арбитраж трафика в гемблинг индустрии
2 FxPro 3736 9.3.2021, 15:29
автор: artek


 



RSS Текстовая версия Сейчас: 29.3.2024, 15:30
Дизайн