Вредоносное ПО (malware) - это назойливые или опасные программы,...
Страницы всех сайтов в интернете оформляются специальным кодом, прописанным по стандартизированным правилам HTML.
Что такое валидность?Валидация - это проверка на соблюдение установленных норм, а в контексте, применяемом вебмастерами - корректности кода страниц: синтаксических ошибок, вложенности тэгов и т. п. Если все делать «правильно», код страницы не должен содержать неверные атрибуты, конструкции и ошибки. Валидация сайта позволяет выявить недостатки, которые следует исправить.
Валидность сайта - это соответствие кода существующим стандартам HTML.
Выяснить, есть ли замечания или ошибки в коде веб-страницы, можно как онлайн, так и не имея доступа к Сети и пользуясь оффлайн-программами.
Что такое валидаторы кодаВалидатор кода - это программа, используя которую можно проверить HTML-код страниц и CSS-код на соответствие современным нормам. Она находит и фиксирует некорректные элементы, указывая на их местонахождение и формулируя, что именно оформлено неверно.
Основные «приметы» валидной версткиВалидная вёрстка содержит код, полностью соответствующий требованиям W3C (World Wide Web Consortium), занимающейся разработкой технологических стандартов для всего Интернета.
Если код на страницах сайта верный, то во всех браузерах сайт отображается корректно (а не криво).
Отсутствуют подозрения о несправедливом «понижении» в выдаче и нет страниц, выкинутых из индекса.
Пример. Если, предположим, неправильно стоят теги .., (в частности, отсутствует закрывающий элемент), то поисковик не будет ничего исправлять - он будет интерпретировать так, как написано черным по белому в коде. В итоге могут возникнуть последствия, связанные уже с продвижением сайта.
Важна ли валидная верстка в продвижении сайтаВ теории да, но на практике оказывается, что в топе висит множество сайтов с ошибками валидации, да и сайты с ошибками двигаются в общем неплохо. Проблемы с продвижением могут быть только если ваш сайт некорректно отображается на каком-то типе устройств или в каком-то браузере. Если же он выглядит отлично, но ошибки в валидации есть — на продвижение это не окажет никакого влияния.
Некоторые вебмастера целенаправленно исследовали этот вопрос, пытаясь выяснить, зависят ли результаты ранжирования от результатов валидации. Вебмастер Марк Даост отметил, что валидность кода не принципиальна. А Шаун Андерсон, напротив, пришел к выводу, что валидность как бальзам на душу сайту в плане позиций выдачи.
Еще один специалист, Майк Дэвидсон, также провел подобный эксперимент и пришел к выводу, что Google классифицирует страницы по качеству их написания. Например, незакрытый тег может привести к восприятию части контента как значение этого тега.
Этот вебмастер сделал очень важный вывод:
Нельзя с точностью сказать, насколько сильно ранжирование зависит от валидности кода, но абсолютно точно то, что имеющиеся недочёты могут привести к вылету страниц или всего сайта из индекса поисковиков.
Зачем нужен валидный кодВалидный код позволяет правильно отображать страницы в браузерах (и стили для сайта CSS могут быть отображены неверно).
Причем вполне возможна ситуация, когда в одном браузере ваш сайт отображается так, как вы его настроили, а в другом - совершенно иначе. Изображение может быть перекошено, а контент может стать совершенно нечитабельным.
В итоге вы теряете трафик из этого браузера. К тому же, поведенческий фактор, являющийся одним из трёх самых важных факторов в SEO, значительно влияет на результаты выдачи.
Представьте, что на ваш сайт заходят посетители и тут же его закрывают из-за невозможности воспринять информацию - спасибо ошибкам в коде. Или они вообще возвращаются обратно в поисковик, потому что решение не найдено. Это всё сослужит плохую службу, ибо в итоге поведенческий фактор изменит позиции сайта в худшую сторону.
Как проверить сайт на валидностьДля проверки безукоризненности кода чаще всего используют очень полезный сайт валидатор «Markup Validation Service», расположенный по адресу: http://validator.w3.org , созданный компанией W3C.
Здесь перед Вами три варианта валидации:
- ввести URL-адрес страницы;
- загрузить файл с кодом со своего компьютера;
- вставить готовый код в форму.
Сервис указывает не только на ошибки html кода и их расположение, но и даёт советы по исправлению. Если код уже имеется в Сети, то можно произвести валидацию путём введения её URL-адреса в форму «Validate by URL» и нажатия кнопки Check. Валидатор HTML включит считывание кода и сообщит об итогах.
Необходимо вводить именно адрес проверяемой URL-страницы. Весь сайт проверяться не будет. Введёте адрес сайта - программой считается только его главная страница. В случае нахождения замечаний выходит уведомление о невалидности программного кода и далее указываются строки с допущенными погрешностями.
В этом видео наглядно объяснён процесс проверки с помощью валидатора:
По этому же адресу http://validator.w3.org можно проверить код, выбрав вкладку «Validate by File Upload» и загрузив документ с прописанным код.
Выбираем путь к необходимому файлу и жмём Check. Далее всё происходит аналогично.
Использование формы для ввода кодаИногда удобней вставить сразу код страницы и проверить его онлайн: выбираем вкладку «Validate by Direct Input» и отправляем весь код на сервер.
CSSПроверка валидности кода CSS может быть пройдена также онлайн валидатором: https://jigsaw.w3.org/css-validator/
Здесь все на русском языке, для многих это действительно приятный сюрприз.
Снова можно выбрать - указать URL, загрузить свой файл или вставить код.
Осуществляется проверка сайта на ошибки, как и в случае с HTML, и - получаем ответ от сервера. Настроек проверки не имеется, однако можно изучить предлагаемый сгенерированный валидный код, расположенный после списка недостатков кода.
Изучаем полученный код и приводим исходный к нужному виду.
Расширения для браузеровДля браузеров существуют всевозможные расширения для проверки валидации. Для Google Chrome есть проверяющий валидность кода плагин HTML Tidy Browser Extension, для Opera - расширение Validator, для Safari - Zappatic, для Firefor - HTML Validator.
Остановимся на последнем более детально. Он осуществляет ту же проверку, что и validator, только оффлайн. Взять его можно здесь http://users.skynet.be/mgueury/mozilla/
Устанавливаем расширение, перезагружаем браузер - и можно сразу работать. В случае возникновения заморочек с установкой, можно написать в саппорт Mozilla Firefox или полистать форум http://forum.mozilla-russia.org/doku.php?id=general:extensions_installing
Подробное видео об установке HTML Validator и его использовании:
При загрузке любого URL расширение автоматически включается и считывает код. Результат виден в правом верхнем углу.
Выглядит результат как небольшая картинка с итогом валидации:
Щёлкнув по результату, можно открыть:
— исходный код;
— ошибки - в левом нижнем блоке (или сообщение о валидности);
— подсказки по исправлению ошибок - в правом нижнем.
Каким бы способом ни была проведена проверка кода, ошибки выходят списком. Также обязательно указана строка с недочётом.
Прежде чем править код, стоит на всякий случай сделать резервную копию шаблона сайта.
В расширении для Firefox при нажатии на название ошибки в открытом окошке расширения вас автоматически перебрасывает на строку с невалидным кодом.
К этим же ошибкам указаны подсказки по их исправлению.
Приведу пару примеров.
1. No space between attributes.
…rel=»shortcut icon» href=»http://arbero.ru/favicon.ico» type=»image/x-icon»
Здесь исправления убираем «точку с запятой».
2. End tag for element «div» which is not open
Закрывающий тег div лишний. Убираем его.
Плохо знаете английский язык (а всегда всё описано именно на нём)? Копируете код ошибки и вставляете его в поисковик. Аналогичную тему наверняка уже описывал какой-то вебмастер или верстальщик, следовательно, вы всегда найдете способ решения задачи на специализированных ресурсах.
Хотя, если честно, я бы не тратил много усилий на ошибки в коде. Лучше просто позаботьтесь о том, чтобы сайт корректно выглядел на всех устройствах и браузерах.
Последние несколько лет мы наблюдаем за стремительным развитием языков разработки внешних интерфейсов, а особенно – HTML с новыми спецификациями в HTML5, а также CSS версии 3 с множеством новых свойств.
Теперь у нас есть возможность делать многие интересные вещи, которые раньше нельзя было сделать без помощи javascript и изображений, включая закругленные углы, градации, адаптивные шаблоны, сетки, прозрачность цветов и многое-многое другое.
Многим очень не доставало возможности управлять событиями при нажатиях (Click Events) в CSS. На самом деле, многие люди думают, что эта опция нам не нужна, так как взаимодействие больше относится к функционалу javascript. В принципе, здесь все ясно, наверное не очень удобно использовать javascript для самых простых событий нажатия.
В любом случае, на сегодняшний день, CSS не предоставляет нам какие-то официальные методы управления событиями нажатий в CSS. Но существует несколько очень интересных трюков, которые мы можем использовать для «определения» нажатий (кликов) при помощи только лишь кода CSS, без использования javascript, и именно об этом мы сегодня поговорим.
Дисклеймер
Данная статья нацелена на то, чтобы рассказать вам о возможности управлять событиями кликов посредством CSS. Это не совсем подходит для применения в серьезных проектах. Пожалуйста, учтите, что вся статья представляет собой ничего больше, чем эксперимент, но никак не руководство по управлению событиями кликов в вашем веб-сайте или приложении.
К тому же, некоторые из представленных методов не особо хорошо поддерживаются в браузерах, а это тем больше значит, что в данной статье мы лишь хотим продемонстрировать то, как можно расширить рамки CSS.
Хак с чекбоксом
Замечательная вещь! Мы уверены, что все вы уже слышали о хаке с чекбоксом раньше. Это наверное самый распространенный способ управления событиями кликов в CSS. Он основан на… чекбоксе.
Преимущественная сторона чекбокса заключается в том, что он бинарный. Он либо выделен, либо нет. И нет возможности выделить что-то «наполовину» или как-то вроде этого. Именно поэтому хак с чекбоксом – это довольно надежный способ запуска событий кликов в CSS. Давайте приведем пример.
Как это работает
HTML-код
CSS-код
To-be-changed {
color: black;
}
color: red;
}
Как видно, он основан на псевдо-классе:checked и основном родственном селекторе ~. Пожалуйста учтите, что он также будет работать со смежным родственным селектором +. В целом, это происходит так: «если чекбокс выделен, то следующие элементы с классом.to-be-changed будут красными».
Итак, чекбокс на самом деле не очень привлекателен, но вы без проблем можете украсить его, скрыв сам чекбокс, и привязав к нему ярлык. Нечто вроде следующего:
Click me!
I"m going to be red! It"s gonna be legen... Wait for it...
Итак, мы скрываем чекбокс, и используем ярлык для запуска события кликов.
Input {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
display: block;
background: #08C;
padding: 5px;
border: 1px solid rgba(0,0,0,.1);
border-radius: 2px;
color: white;
font-weight: bold;
}
input:checked ~ .to-be-changed {
color: red;
}
Таким образом, у вас должно получиться нечто вроде кнопки, которая запускает процесс изменения цвета у элемента параграфа. Не круто ли? Повторный клик по кнопке переключит цвет обратно на черный.
(учтите, что здесь есть разные возможности сокрытия чекбокса, и самый популярный из них - display:none.)
Преимущества и недостатки
Преимущества:
* Бинарный (выделен или без выделения)
* Повторный клик позволяет вам вернуть исходное положение
* Позволяет применить связку событий кликов (если первый чекбокс выделен, и второй чекбокс выделен, то можно произвести следующее).
Недостатки:
* Элементам нужно разделять один и тот же родительский элемент (родственные элементы)
* Необходим дополнительный HTML-код (элемент ввода, ярлык и так далее)
* Необходимо два дополнительных трюка, чтобы заставить метод работать на мобильных браузерах (для этого нужно будет прочесть статью далее)
Метод:target
Существует другой метод, известный как «имитация» события кликов в CSS при помощи псевдо-класса:target. Этот псевдо-класс сильно схож с:hover.
Особое событие псевдо-класса:target зависит от того, что мы называем «идентификатором фрагмента». Проще говоря, этот псевдо-класс ссылается на хэштег, который вы порой можете встречать на конце URL-адреса. Совпадение образуется тогда, когда хэштег и ID элемента одинаковы.
Как это работает
HTML-код
I"m going to be red! It"s gonna be legen... Wait for it...
CSS-код
To-be-changed {
color: black;
}
To-be-changed:target {
color: red;
}
При нажатии по ссылке (href="#id"), URL изменяется, и вы переходите к анкору #id на странице. В этот момент, элемент, обозначенный данным id, может быть указан при помощи псевдо-класса:target.
Преимущества и недостатки
Преимущества:
* Очень простой CSS
* Отлично подходит для выделения разделов
Недостатки:
* Путаница в истории браузера
* Происходит прыжок по странице (при переключении к анкору)
* Для запуска хэштега требуется тег анкора или URL-хак
* Работает только с одним элементом (так как ID всегда уникальны)
* Нет возможности вернуться к исходному положению без использования еще одно хэштега, ссылки, либо URL-хака.
Браузерная поддержка не на высоте, но все не так плохо. Все современные браузеры поддерживают такой подход, за исключением (IE 6-8). Начиная от IE9, поддержка работает стабильно.
Метод:focus
Давайте рассмотрим еще один способ с использованием псевдо-класса, на этот раз это будет:focus. Здесь суть примерно такая же, за исключением того, что здесь не требуется изменения URL. Метод нацелен на сосредоточивание внимания пользователя на конкретном элементе.
Когда вы находитесь на веб-странице, вы можете нажимать на вкладки для того, чтобы переходить по различным элементам. Это очень удобно при заполнении форм – можно переходить с одного поля на другое без помощи мыши. Это также помогает людям с ослабленным зрением перемещаться по сайту.
Важно отметить, что фокусировать внимание можно только на некоторых элементах, включая ссылки, поля ввода, а на других нельзя (абзацы, разделения и на многих других). На самом деле, и на них можно фокусироваться, но вам нужно будет добавить атрибут tabindex с цифровым значением.
Как это работает
HTML-код
Click me!
I"m going to be red! It"s gonna be legen... Wait for it...
CSS-код
Span:focus ~ .to-be-changed {
color: red;
}
Итак, когда вы кликаете по span-элементу, либо производите переход при помощи кнопки табуляции, браузер фокусируется на элементе, который совпадает с псевдо-классом:focus. Смежный родственный селектор выполнит все остальное. Довольно просто, не правда ли? Если вам не хочется разбираться с tabindex, то вы можете просто использовать ссылку с # href. Все будет работать.
Преимущества и недостатки
Преимущества:
* Очень простой CSS и HTML-код
* Отлично подходит для навигации или нечто подобного
Недостатки:
* Необходим либо элемент, позволяющий фокусировку, либо атрибут tabindex
* Псевдо-элемент совпадает только тогда, когда на элементе произведено фокусирование (это означает, что все перепутается, если кликать куда-либо еще).
Хак с transition
Это, наверное, один из самых невероятных способов управления событиями кликов в CSS. Серьезно, это безумие. Этот метод был придуман Joel Besada, и всегда был одним из наших любимых CSS-трюков.
Суть заключается в размещении CSS-стиля в CSS-переходе. Да, вы прочли все правильно, в CSS-переходе (transition). На самом деле, идея довольна проста. Она основана на применении псевдо-бесконечной задержки в изменении, что позволяет предотвратить возврат к исходному значению. Все наверное звучит запутанно, но на самом деле все просто. Пожалуйста, ознакомьтесь с кодом.
Как это работает
HTML-код
Click me!
I"m going to be red! It"s gonna be legen... Wait for it...
CSS-код
To-be-changed {
transition: all 0s 9999999s;
}
span:active ~ .to-be-changed {
transition: all 0s;
color: red;
}
Суть первого объявления заключается в задержке любых изменений на примерно 116 дней, что позволяет нам убедиться в том, что изменения останутся сразу, как только будут применены. Они не бесконечны, но похоже на то, не правда ли?
Но нам не нужно, чтобы изменения были применены через 116 дней после клика, нам нужно, чтобы все происходило незамедлительно! Итак, здесь нам нужно переписать задержку в момент клика (псевдо-класс:active) для того, чтобы применить изменения. Затем, когда клик будет произведен, старый параметр transition будет возвращен, возвращая параметр задержки на 9999999s, что предотвратит возврат к исходному положению.
Преимущества и недостатки
Преимущества:
* Невероятно хитрая задумка
* Сохраняет нужное значение при спуске кнопки, даже если переход еще не завершен (смотрите ниже)
Как заявил Joel Besada:
«здесь самое интересное заключается в том, что вы можете закончить переход на полпути, а параметр сохранит то же значение, которое у него было в конкретный момент перехода. К примеру, давайте предположим, что у нас есть линейный переход непрозрачности от 1 до 0 за 2 секунды, но мы продолжаем его всего 1 секунду. То есть, параметр непрозрачности должен остановиться на 0.5, так как задержка не позволяет параметру вернуться обратно. Если мы сейчас снова запустим переход в непрозрачности, он продолжится с 0.5, вместо того, чтобы воспроизводиться с начала».
Недостатки:
* Не очень хорошая браузерная поддержка (не поддерживается в IE9 и Opera Mini)
* Работает только с теми значениями, которые позволяют осуществлять переход
* Нет возможности вернуться назад к первичному значению
* На самом деле переход не бесконечен, если дождаться, пока пройдет 116 дней.
В завершение
Итак, на сегодняшний день, кое-как мы уже можем определять клики при помощи CSS. То есть, у нас есть возможность даже несмотря на то, что это больше нечто вроде хака. Некоторые методы лучше других подходят к конкретным ситуациям, но, в общем и целом, вряд ли стоит использовать это в реальном проекте.
Tab Atkins Jr. пару месяцев назад. Было написано целое предложение о положениях переключателей в CSS. Вы можете взглянуть на его работу:
Toggle-states: none | sticky? | infinity (initial: none)
toggle-group: none | (initial: none)
toggle-share: none | # (initial: none)
toggle-initial: (initial: 1)
…где:
* toggle-states представляет собой базовую функцию, которая позволяет включать/выключать функционал переключения. None означает отключенное положение, 2 и более отвечают за различные положения.
* toggle-group реализует функционал радио-кнопки. Если вы кликните по toggle-group элементу с установленным параметром отличным от none, все элементы, которые разделяют один и тот же toggle-group, будут автоматически выставлены на первое положение (выключены).
* toggle-share реализует функционал ярлыка. Когда вы кликаете по элементу с toggle-share, он действует так, будто вы кликнули по всем элементам, на которые он указывает.
* toggle-initial выставляет исходное положение переключателя.
Тем не менее, он признал, что его задумка не идеальна, и может повлечь за собой проблемы и парадоксы. Мы не хотим вдаваться в подробности в сегодняшней статье, так как это не входит в ее содержание, но рекомендуем вам ознакомиться с этой темой.
Итак, мы снова вернулись к javascript. Это, вероятно, лучший способ, если вам хочется надежности и сплоченности. Тем не менее, если вы хотите позабавиться, разрабатывая что-то на «чистом CSS-код», то наша статья точно окажется вам полезной.
Также хочется отметить, что Chris Coyier из CSS-Tricks еще два года назад об управлении двойными кликами при помощи CSS. Возможно, информация уже не актуальна, но все равно будет очень интересно познакомиться.
В любом случае, спасибо вам за чтение статьи! Пожалуйста, не забывайте и не стесняйтесь делиться результатами собственных экспериментов.
Внимание! У вас нет прав для просмотра скрытого текста.
Приветствую всех, кто желает разобраться в функционировании onclick (). Сегодняшняя статья поможет вам раз и навсегда понять принцип работы данного обработчика событий и разобрать конкретный пример onclick JavaScript, а точнее примеры.
Я покажу вам несколько способов работы с данным инструментом, объясню в чем их преимущества и недостатки, а также опишу работу jQuery с событиями. А теперь перейдем к разбору материала!
Назначение обработчиков событийДля начала разберем теоретическую часть вопроса. Практически все на своих страницах обрабатывают скрипты. А обычно это различные события. Чтобы все эти запрограммированные события сработали, для них необходимо установить обработчик.
По правилам написания все обработчики включают в свое название «on+наименование события», что и соблюдено в onclick () . В зависимости от выбранного события обработка будет происходить вследствие разных действий. В нашем случае при использовании onclick () будут выполняться только те event-ы, которые были вызваны левым кликом мышки.
Различные способы назначения событийного обработчикаНа сегодняшний день существует несколько вариантов внедрения в код обработчика некого или неких событий.
Использование простых событийНачнем с простого варианта, который заключается во внедрении onclick () в саму разметку html-документа. Выглядит это следующим образом:
Как вы видите, при нажатии на кнопку левой кнопкой мыши появляется сообщение «Клик-клик!». Хочу обратить ваше внимание на одну маленькую, но существенную деталь. Внутри alert можно использовать только одинарные кавычки (‘’).
Также в данном случае можно использовать ключевое слово this . Оно ссылается на текущий элемент и предоставляет все ему доступные методы.
Нажми на меня
Эта строка кода создает кнопку с текстом «Нажми на меня». После нажатия вы увидите на экране сообщение: «"Нажмиии!». Оно и заменит первое название кнопки.
Данный способ, бесспорно, очень прост. Однако он подходит только для аналогичных задач, т.е. вывода сообщений или выполнения простых команд.
Если же необходимо использовать циклические конструкции, задействовать теги и т.д., то данный способ не подходит. Он уменьшит степень читабельности кода, а также сделает его громоздким и неаккуратным.
В таком случае стоит прибегать к функциям.
Работа с функциямиФункции позволяют отделить нужный код в отдельный блок, который впоследствии можно вызывать через событийный обработчик в .
В качестве примера я прикрепил приложение для вывода пользователю результирующего числа в различных степенях, начиная с 1-ой и заканчивая 5-ой. Для этого я создал функцию countPow () , в которую можно передавать параметры. В моем приложении юзер должен вписать цифру в качестве переменной функции.
Таким образом, через обработчик, связанный с выше названной функцией, были выполнены вычисления и выведены на экран.
var result =1;
function countPow(n) {
for(var i=1; i
