Що таке валідність та валідація і навіщо вони потрібні? Перевірка структури посилань і ваги внутрішніх сторінок
У цій збірці зібрана чудова колекція онлайн сервісівроботи з CSS кодами. Всі ці послуги значно полегшують життя веб-розробнику. За допомогою їх можна згенерувати CSS сітку для сайту, перевірити код на предмет помилок, адаптувати код під різні браузери, згенерувати CSS стиліна основі стилів шару фотошопу, отримати коди патернів для бекграунду та градієнтів, стиснути CSS для збільшення швидкості завантаження сайту. Багато сервісів, що спеціалізуються на роботі зі шрифтами та їх візуальним поданням.
The 1Kb CSS Grid
Задаючи всього три параметри, також генерується сітка CSS. А також вказується ширина пікселів. 
Grid Designer
Більш складний сервіс. Налаштовується CSS грати за кількома параметрами. У другому блоці генерується текст, який відображатиметься у колонках. На виході маємо готовий CSSта HTML шаблон. 
CSS Lint
Сервіс для перевірки коду вашого сайту щодо помилок. 
Primer CSS
Вставивши в діалогове віконце HTML код, можна отримати список всіх згаданих класів та ID, згаданих у CSS. 
PrefixMyCSS
Якщо ввести вихідний CSS код, то на виході можна отримати код адаптований під різні браузери. 
Modernizr
на даному сервісіпропонують скачати та встановити JavaScript бібліотеку з відкритим кодомяка якимось чином допоможе вам при створенні сайту. Точніше сказати не можу, бо сама не пробувала, що це таке. 
Layer Styles
Дуже корисний сервіс. На основі налаштувань діалогового віконця стилів шару програми фотошоп генерує код CSS. 
Ultimate CSS Gradient Generator by ColorZilla
Представлено на вибір велику кількість градієнтів та їх CSS кодиадаптовані під різні браузери. 
Spritebox
Дозволяє швидко та легко створювати класи та ідентифікатори з однієї картинки 
Automatic CSS inliner
Автоматично перетворює всі локальні стилі на вбудований CSS для використання у поштових розсилках. 
Typetester
Дозволяє порівнювати написання різних шрифтівта отримати CSS код вибраного стилю написання. 
The Web Font Combinator
Сервіс дозволяє наочно подивитися як виглядатимуть різні поєднання шрифтів у заголовках, підзаголовках та в основному тексті.
Я вже згадував про те, що існує з погляду валідності html кода. Це треба робити хоча б час від часу, оскільки валідністьяк html, так і cssсильно впливає на сайту, тобто тотожне відображення вашого ресурсу в різних браузерах( про популярних і найкращих веб-браузерах узагальнююча стаття, яка, сподіваюся, допоможе вам зробити вибір на користь одного з них).
Крім того, я вже згадував, незважаючи на те, що пошукові системина даному етапі не враховують помилки CSS і HTML коду при ранжируванні сайтів, у майбутньому все може змінитися і можна отримати ситуацію, коли чудово оформлений, зроблений для людей проект може втратити частину потенційної аудиторії через те, що не пройшов валідацію. Ну гаразд, це все лірика, тут кожен собі вирішує сам, наскільки все важливо.
Я думаю, з моєю думкою ви тепер знайомі, оскільки я пишу цю статтю, а значить вважаю це вартим уваги поряд, наприклад, з такою найважливішою частиною seo оптимізаціїяк закриття посилань та фрагментів тексту від індексації Google та Яндекс або грамотним використанням.
Гаразд, як кажуть ближче до справи. Спочатку трохи про CSS. CSS ( Cascading Style Sheets- Каскадні таблиці стилів) є мовою стилів, яка визначає відображення HTML документів. Тобто якщо HTML описує вміст сторінки, CSS форматує цей вміст, іншими словами надає йому завершений вигляд. До речі, для підвищення швидкості сайту корисно провести файли вашої теми.
W3C валідатор: перевірка валідності коду CSS
Тепер перейдемо до того, як здійснити перевірку на валідність того чи іншого документа (сторінки нашого сайту або блогу WordPress). Також, як у разі перевірки HTML коду, скористаємося одним із інструментів . Перейдемо на сервіс валідації CSS:
Як бачите, є три можливості перевірки CSS валідності за допомогою W3C валідатора. До речі, зверніть увагу, що внизу сторінки валідатора є примітка, яка вказує на необхідність перевірки HTML-коду на валідність. Тільки обидва правильні коди дають гарантію коректності всього документа. Для перевірки вводимо URL-адресу. Наприклад, перевіримо головну сторінку мого блогу:
Підсумок перевірки W3C валідатором щодо помилок CSS коду не можна назвати невтішним, оскільки виявлено лише 2 помилки. Звичайно, ці помилки бувають різними, у кожному конкретному випадку вони спричиняють різні наслідки. Подивимося, як можна вчинити для їхньої ліквідації. Тут все зручно, оскільки W3C валідатор видає не лише посилання на документ, що містить некоректний код, а й номер рядка, на якому він розташований. До речі, нижче після списку попереджень і помилок буде відображено варіант коректного коду CSS, яким можна скористатися:
На сторінці результату перевірки валідності CSS є посилання на документ css.ie, який розташований у папці теми. Він був створений для досягнення кроссбраузерності блогу (однакового відображення в популярних браузерах). Причому саме для різних модифікацій Internet Explorer, який грішить різними ”косяками” у плані спотворення виду сайту, особливо його старі версії (IE9 значно краще щодо цього). Кросбраузерність має дуже важливе значеннядля просування проекту, проте при перевірці виявилося, що в цьому документі є властивості, які не відповідають стандартам W3C.
Отже, отримуємо рядки 3 та 12, на яких присутні помилки. Для їх виправлення слід видалити помилку аналізу html (filter: expression(document.execCommand("BackgroundImageCache", false, true));)і властивість .zoom. Зараз не вдаватимуся в тонкощі програмування та верстки сайтів, зауважу тільки, що властивість expressionдопомагає позбутися неприємного ефекту мерехтіння фонових зображень, що відбувається у IE6.
Тобто у браузері, використання якого нанівець виходить, а в наступних версіях цього ”глюку” вже не спостерігається. Відразу скажу, що я деякий час ще використовуватиму цю ”ліки”, доки кількість потенційних відвідувачів, що використовують IE6, не досягне мінімального рівня. Однак для наочності, щоб показати вам, як на це реагуватиме W3C валідатор, я видалю його.
Властивість.zoom, яка встановлює коефіцієнт масштабування елемента, що не є частиною Міжнародного Стандарту W3C, підтримується старовинними версіями браузерів Opera, Safari, у тому числі IE8(9 версія майже повністю ”законослухняна”, тож незабаром, сподіваюся, вебмайстри будуть звільнені від необхідності використовувати хакі, тобто додаткові коди, що дозволяють досягти максимальної кросбраузерності). Тепер подивимося на документ, що містить невалідні елементи та відкоригуємо його:
Цей документ знаходиться в папці моєї теми Cloudy, я видаляю вищезгадані елементи, які не пройшли перевірку валідності. Далі, у результатах перевірки на валідність, окрім помилок, виявилася ще маса так званих попереджень:
Наприклад я постараюся показати наочно, як позбутися найпоширеніших їх, та й попутно, пояснити їх значення. Як бачимо, W3C валідатор попереджає про наявність однакових кольорів для тексту та фону. Треба сказати, що це взагалі-то небажано в будь-якому випадку, оскільки пошукові системи такий стан речей можуть розглядати як приховування інформації, що загрожує серйозними санкціями.
Звичайно, це не завжди так відбувається, проте недооцінювати цю небезпеку не можна. Отже, переходимо безпосередньо до виправлення ситуації. Найкраще скопіювати файл style.cssвашої теми в HTML і PHP редактор notepad++, про який я розповідав і який спрощує пошук за номером рядка:
Тепер ми знаємо, де розташовані ці рядки у файлі вашої теми, коригуємо колір, трохи змінивши відтінок. У шістнадцятковій системікольорів #ffffff відповідає білому кольору. Змінюємо його так: замість останньої f вписуємо d, таким чином отримуємо трохи інший відтінок білого кольору; тепер зміни для користувачів помітні не будуть, проте пошукові системи побачать різницю:
Ось приблизно так можна проводити коригування невалідних частин коду CSS сторінок вашого ресурсу. Так само знаходимо решту ділянок, зазначених попередженнями і які необхідно виправити. При перевірці я виявив, що їх причиною є WP Page Numbers плагін, який забезпечує посторінкову навігацію.
Це посунуло мене на деактивацію цього плагіна і стало причиною того, що я нарешті замінив його впровадженням коду, що стало кроком у напрямку зниження навантаження на сервер. Як тільки це зробив, попередження, що стосувалися порушення валідності коду саме цим плагіном, при повторній перевірці відразу зникли. Після вищеописаних рухів тіла проводимо повторну перевірку валідності CSS за допомогою W3C валідатора:
Тепер ви знаєте, як перевіряти валідність CSS документа (вебсторінки сайту або блогу), вдавшись до допомоги W3С валідатора. Насамкінець хотілося б відзначити, що ступінь і частоту перевірки валідності коду CSS кожен для себе вирішує сам, все залежить від обставин, проте час від часу це треба робити обов'язково, на моє глибоке переконання. Підписуйтесь на оновлення блогу для отримання свіжих матеріалів на e-mail. Потім дозвольте відкланятися, сподіваюся, розлучаємося ненадовго.
Перевіряє html код, заданий за допомогою посилання на сторінку, так і просто у вигляді завантаженого файлу або скопійованого тексту. Дає список зауважень з рекомендаціями щодо їх виправлення.
http://validator.w3.org/
Перевірка css (css валідатор)
Перевіряє стилі документа або таблицю стилів у окремому файлі.
http://jigsaw.w3.org/css-validator/
Перевірка стрічок (feed) RSS та Atom
Перевіряє правильність роботи фідів RSSта Atom.
http://validator.w3.org/feed/
Перевірка орфографії на веб-сторінці
Підсвічує помилки на заданій URL сторіноке.
http://webmaster.yandex.ru/spellcheck.xml
Показує помилки в тексті, скопійованому у вікно перевірки.
http://api.yandex.ru/speller/
Перевірка структури веб-сторінки
Показує структуру веб-сторінки. Актуальний для перевірки html5 документів. Неправильно відображає кирилицю (:.
http://gsnedders.html5.org/outliner/
Перевірка контенту на унікальність
У безкоштовної версіїпоказує до 10 сторінок в інеті із частковим збігом тексту з вашою сторінкою.
http://www.copyscape.com
Перевіряє унікальність тексту, введеного у форму. У безкоштовній версії можливе очікування на результати.
http://www.miratools.ru/Promo.aspx
Перевіряє унікальність як введеного тексту, так і тексту за заданою URL-адресою, показує рівень унікальності у відсотках. Має власний алгоритм перевірки.
http://content-watch.ru
Десктопні програми для перевірки унікальності контенту від біржів копірайтерів. Працюють довго, але якісно. Etxt має версії для трьох операційних систем: Mac, Linux та Windows.
http://advego.ru/plagiatus/
http://www.etxt.ru/antiplagiat/
Показує сайти зі схожим змістом та схожою внутрішньою структурою.
http://similarsites.com
Перевірка cms сайту
Перевіряє наявність ознак найвідоміших cms.
http://2ip.ru/cms/
Перевірка юзабіліті сайту для різних груп користувачів
Перевірка доступності з мобільних пристроїв
Оцінює можливість перегляду сторінки з мобільних пристроївта видає список зауважень та помилок.
http://validator.w3.org/mobile/
Перевірка зручності сайту для телефонів від Google.
https://www.google.com/webmasters/tools/mobile-friendly/
Вказує швидкість завантаження сайту на мобільних пристроях.
https://testmysite.withgoogle.com/intl/ru-ru
Сайт емулятор виходу з мобільного телефону. Показує сайт очима вибраної моделі.
http://www.mobilephoneemulator.com/
Перевірка доступності для людей з обмеженими можливостями
Сервіс перевірки сторінки для людей з вадами зору. Доступний on-line та у вигляді плагіна для Firefox.
http://wave.webaim.org/
Перегляд змісту сайту очима пошукового робота
Показує текст сайту, який наближений до того, що бачить пошуковий індексатор.
http://www.seo-browser.com/
Дистрибутив lynx текстовий браузер для win32 систем. Перед використанням потрібно відредагувати lynx.bat, вказавши шлях до директорії з lynx.
http://www.fdisk.com/doslynx/lynxport.htm
Прибирає всі розмітку та показує текст сторінки, мета теги та теги заголовків, кількість зовнішніх та внутрішніх посилань. Показує прев'ю сторінки в Google.
http://www.browseo.net
Перевірка структури посилання на сайт
Перевірка битих посилань
Відображає список вихідних посилань для URL та перевіряє їх відгук. Може перевіряти рекурсивно, тобто переходити від одного документа до іншого самостійно.
http://validator.w3.org/checklink
Freeware інструмент для перевірки битих посилань. Для роботи необхідно встановити його на власний комп'ютер. Рекурсивно сканує сайт, робить звіти, може бути корисним для складання карти сайту.
http://home.snafu.de/tilman/xenulink.html
Перевірка перелінкування та заголовків сторінок
Сканує до 500 сторінок сайту у безкоштовній версії. Перевіряє кількість зовнішніх та внутрішніх посилань. Виводить інформацію про проскановані сторінки: вкладеність, коди відповіді, назви, мета інформації та заголовки.
http://www.screamingfrog.co.uk/seo-spider/
Перевірка структури посилань і ваги внутрішніх сторінок
Програма сканує сайт, будує матрицю внутрішніх посилань, додає зовнішні (вхідні) посилання із заданих URL-адрес і, на підставі цих даних, розраховує внутрішні ваги сторінок сайту. Програма може бути використана для знаходження зовнішніх посилань для списку URL сторінок сайту.
Перевірка кодів відповіді сервера, видимості сайту пошуковими роботами, технічних характеристик сайту
Перевірка HTTP заголовків та відповіді сервера, видимості сторінок для роботів
Перевіряє коди відповіді сервера, прогнозує швидкість завантаження сторінки залежно від обсягу в байтах її даних, показує вміст html тега head, внутрішні та зовнішні посилання для сторінки, вміст сторінки очима пошукового робота.
http://urivalet.com/
Перевірка кодів відповіді сервера. Дає можливість перевірити редиректи (коди відповіді 301, 302), заголовок Last-Modified та ін.
http://www.rexswain.com/httpview.html
Показує обсяги та вміст даних, що передаються під час завантаження сторінки.
http://www.websiteoptimization.com/services/analyze/
Перевіряє редиректи, використання атрибуту canonical, мета теги, деякі аспекти безпеки сайту. Дає рекомендації щодо покращення завантаження сторінок.
http://www.seositecheckup.com
Перевірка інформації про домен та IP адресу
WHOIS-сервіс центру реєстрації доменів RU Center. Дає інформацію по IP адресам та доменам по всьому світу. Іноді зависає.
https://www.nic.ru/whois/?wi=1
Служба Whois від РосНДІРОС (RIPN). Дає інформацію для доменів у зоні RU та IP адрес з бази RIPE (Європа).
http://www.ripn.net:8080/nic/whois/
Визначає, де у домену хостинг та також показує IP адресу сайту.
http://www.whoishostingthis.com
Перевірка чи не ввімкнено IP адресу в чорний список для розсилки email.
http://whatismyipaddress.com/blacklist-check
http://ua.smart-ip.net/spam-check/
Перевірка записів MX для домену. Перевірка SMTP серверадля домену. Перевірка IP у чорних списках для розсилки.
https://mxtoolbox.com/
Пошук на базі зареєстрованих торгових марок у США.
http://tmsearch.uspto.gov/
Перевірка файлів robots.txt
Перевіряє доступність для індексації сторінок сайту роботом Yandex.
http://webmaster.yandex.ru/robots.xml
Перевіряє правильність файлу robots.txt.
https://www.websiteplanet.com/webtools/robots-txt
Техогляд сайту
Моніторинг доступності сайту Дає можливість підключити один сайт безкоштовно із мінімальними опціями перевірки.
http://www.siteuptime.com
Перевірка швидкості завантаження сайту. Надсилає звіт на email. Має платні послуги моніторингу доступності сайту.
http://webo.in
Перевіряє швидкість завантаження сторінок сайту.
http://www.iwebtool.com/speed_test
Перевірка індексації та відображення сайту пошуковими системами
Видимість сайту у пошукових системах
Сервіс, що показує ключові словадля сайту, за якими він знаходиться у ТОП 20 (першій двадцятці) видачі Google у часі. Дані про пошуковий та рекламний трафік.
http://www.semrush.com/
Положення в ТОП50 yandex та Google. Тиц сайту та PR головної сторінки, наявність у важливих каталогах, видимість у топі за запитами ВЧ.
http://pr-cy.ru/
Перевірка банів та рівня довіри до сайту
Перевірка трастовості сайту. Сервіс, який стверджує, що він вимірює траст для Яндекса (перевірити все одно ніхто не може).
http://xtool.ru/
Перевірка накладання фільтрів Панда та Пінгвін від Гугл. Сервіс дозволяє візуально визначити, чи падав сайт у дати апдейтів Панда і Пінгвін.
http://feinternational.com/website-penalty-indicator/
Перевірка Page Rank сторінок сайту (при копіюванні URL в інструмент потрібно стерти останню літеру, а потім написати заново).
http://www.prchecker.net/
Перевірка історії розвитку сайту
Показує історію розвитку сайту та дає можливість подивитися скріншоти старих сторінок.
http://www.archive.org/web/web.php
Історія позицій сайту в ТОП Google (ключові фрази, сторінки, заголовки), показників PR, ТІЦ, Alexa Rank, числа зворотних посилань для популярних сайтів.
http://SavedHistory.com
SEO плагіни для перевірки сайтів
SEO Doctor – додаток до Firefox. Показує посилання на сторінці та дає зручний інтерфейс до різних SEO сервісів.
http://www.prelovac.com/vladimir/browser-addons/seo-doctor/
SeoQuake – додаток до Firefox. Показує найважливіші характеристики сайту: ТІЦ, PR, зворотні посилання, Alexa Rank. Працює як із видачею Google, так і з видачею Yandex. Надає можливість швидкого аналізу конкурентів.
http://www.seoquake.com/
IEContextHTML - додаток до Internet Explorer. Перевіряє індексацію посилань у Yandex та Google, показує список зовнішніх та внутрішніх посилань, дозволяє імпортувати дані з веб-сторінок.
Видимість сайту в посковиках залежно від місця розташування
Перелік безкоштовних проксі серверів, у тому числі і Російських.
http://www.checker.freeproxy.ru/checker/last_checked_proxies.php
http://spys.ru/proxys/ru/
Анонімний безкоштовний проксі з можливістю представитися із трьох країн. Працює з пошуком Google.
https://hide.me/en/proxy
Емулятори пошуку Googleв різних країнах, за допомогою параметрів пошуку.
http://searchlatte.com/
http://isearchfrom.com/
Перевірка позицій у Yandex та Google
Сервіс дає можливість глибокої перевірки (до 500) позиції сайту по регіонах Yandex.
Мережевий аналіз сайту, перевірка зворотних посилань
Аналіз зворотних посилань
Здійснює аналіз маси сайту, формує зрізи за різними критеріями: тип посилання, анкори, сторінки. Показує вагу зворотних посилань. Сервіс доступний лише для зареєстрованих користувачів.
http://ahrefs.com
Перевірка наявності зворотних посилань на сайт
Перевіряє наявність беклінків на сайт у запропонованому списку URL (до 100 сторінок).
http://webmasters.ru/tools/tracker
Перевірка популярності сайту у соціальних медіа
PlusOneChecker
Показує кількість лайків (plusone) у Google+. Можна вводити відразу список URl, що перевіряються.
http://www.plusonechecker.net/
Facebook Graph API Explorer
SharedCount
Показує популярність у Твіттері, Google+, Facebook, LinkedIn, Pinterest, Delicious, StumbleUpon, Diggs.
http://sharedcount.com
Cool Social
Показує популярність першої сторінки сайту у Твіттері, Google+, Facebook, Delicious, StumbleUpon. Для російських сайтів дані іноді неправильні.
http://www.coolsocial.net
Social-Popularity
Social Crawlytics
Сканує сайт та формує звіти "Shares" основних зарубіжних соціальних мережцих сторінок. Реєструє користувачів через акаунт у Twitter. Звіти можна побачити вже наступного дня.
https://socialcrawlytics.com
Перевірка сайту на віруси
Dr.Web
Перевіряє заданий URL на підозрілий код, показує скрипти, що підвантажуються, і результати їх перевірки.
http://vms.drweb.com/online/
Virus Total
Перевіряє URL-адресу на віруси 30 сканерами.
https://www.virustotal.com/#url
Alarmer
Система захисту сайту від вірусів Щодня сканує файли сайту та надсилає звіт про їх зміни через email.
Валідацією називається перевірка CSS-коду на відповідність специфікації CSS2.1 чи CSS3. Відповідно, коректний код, який містить помилок, називається валідний, а чи не задовольняє специфікації - невалідний. Найбільш зручно робити перевірку коду через сайт http://jigsaw.w3.org/css-validator/, за допомогою цього сервісу можна вказати адресу документа, завантажити файл або перевірити набраний текст. Великим плюсом сервісу є підтримка української та української мови.
Перевірити URI
Ця вкладка дозволяє вказувати адресу сторінки, розміщеної в Інтернеті. Протокол http:// можна писати, він буде додано автоматично (рис. 1.42).
Рис. 1.42. Перевірка документа на адресу
Після введення адреси натисніть кнопку «Перевірити» і з'явиться один із двох написів: «Вітаємо! Помилок не виявлено у разі успіху або «На жаль, ми виявили наступні помилки» при невалідному коді. Повідомлення про помилки або попередження містять номер рядка, селектор та опис помилки.
Перевірити завантажений файл
Ця вкладка дозволяє завантажити HTML або CSS-файл та перевірити його на наявність помилок (рис. 1.43).
Рис. 1.43. Перевірка файлу під час його завантаження
Сервіс автоматично розпізнає тип файлу і якщо вказано HTML-документ, вичленовує з нього стиль для валідації.
Перевірити набраний текст
Остання вкладка призначена для безпосереднього введення HTML або CSS-коду, при цьому перевірці буде лише стиль (рис. 1.44).
Рис. 1.44. Перевірка введеного коду
Цей варіант є найбільш зручним для проведення різних експериментів над кодом або швидкої перевіркиневеликі фрагменти.
Вибір версії CSS
У CSS3 додано багато нових стильових властивостей порівняно з попередньою версієюТому проводити перевірку коду слід з урахуванням версії. За промовчанням у сервісі вказано CSS2.1, тому якщо ви хочете перевірити код на відповідність CSS3, це слід вказати явно. Для цього натисніть на текст « Додаткові можливості» і у блоці зі списку «Профіль» виберіть CSS3
Рис. 1.45. Вказівка версії CSS для перевірки
Ідентифікатори та класи
Періодично піднімається суперечка про доцільність використання ідентифікаторів у верстці. Основний аргумент полягає в тому, що ідентифікатори призначені для доступу та керування елементами веб-сторінки за допомогою скриптів, а для зміни стилів елементів повинні застосовуватись виключно класи. Насправді немає різниці, через що задавати стилі, але слід пам'ятати про деякі особливості ідентифікаторів і класів, а також підводні камені, які можуть чекати розробників.
Спочатку перерахуємо характерні ознаки цих селекторів.
Ідентифікатори
У коді документа кожен ідентифікатор є унікальним і повинен бути включений лише один раз.
Ім'я ідентифікатора чутливе до регістру.
Через метод getElementByIdможна отримати доступ до елемента за його ідентифікатором та змінити властивості елемента.
Стиль для ідентифікатора має пріоритет вищий, ніж у класів.
Класи можуть використовуватись у коді неодноразово.
Імена класів чутливі до регістру.
Класи можна поєднувати між собою, додаючи кілька класів до одного тегу.
Ідентифікатори
Якщо під час роботи веб-сторінки потрібно змінити стиль деяких елементів «на льоту» або виводити в них якийсь текст, з ідентифікаторами це робиться набагато простіше. Звернення до елемента відбувається через метод getElementById , параметром якого є ім'я ідентифікатора. У прикладі 1.70 до текстовому полюформи додається ідентифікатор з ім'ям userName , потім за допомогою функції JavaScript робиться перевірка на те, що користувач ввів у поле будь-який текст. Якщо тексту немає, але кнопка Submit натиснута, виводиться повідомлення всередині тега з ідентифікатором msg . Якщо все правильно, ці форми надсилаються на адресу, вказану атрибутом action .
Приклад 1.70. Перевірка даних форми XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6