Найскладніший аспект змісту сайту Nettuts + це підстроювання під різні рівні знань користувачів. Якщо ми будемо публікувати занадто багато уроків для просунутого рівня, користувачам новачкам це не сподобається. Вірно і зворотне. Ми робимо все, що від нас залежить, проте, ніколи не соромтеся нагадати, якщо відчуваєте, що про вас забувають. Цей сайт в першу чергу для вас, висловлюйте свою думку! Беручи до уваги вищесказане, сьогоднішній урок буде присвячений спеціально для тих, хто тільки вливається в веб програмування. Якщо у вас тільки рік досвіду або менше, будемо сподіватися, що деякі поради, наведені тут, допоможуть вам стати краще і швидше!
Нове в рубриці:
Так що давайте без зволікань розглянемо 30 найважливіших правил, яких слід дотримуватися при створенні сторінок.
1: Завжди закривайте теги
Колись нерідко зустрічалися і такі посилання:
Зверніть увагу на те, що тег оболонки UL / OL опущений. До того ж багато хто віддавав перевагу також не закривати тег LI. За сьогоднішніми стандартами це просто недобросовісна практика і її слід уникати на 100%. Завжди-завжди закривайте ваші теги. Інакше проблеми з валідація будуть виникати на кожному кроці.
Як зробити краще
2: Задайте правильний DocType
Коли я був молодший, я іноді сидів на CSS форумах. І завжди, коли у користувача виникало питання, перш ніж питати у нас, він ПОВИНЕН був зробити спочатку дві речі:
Підтвердити валідність CSS файлу. Виправити всі помилки. Додати doctype
"DOCTYPE ставиться перед відкриває тегом html вгорі сторінки і повідомляє браузеру що містить сторінка - HTML, XHTML або і те й інше, так, щоб він міг коректно відображати розмітку."
Більшість використовує чотири різних doctype при створенні нових сайтів.
Зараз йдуть гарячі суперечки щодо правильного вибору в даній ситуації. Спочатку вважалося, що найкращим варіантом буде використання версії XHTML Strict. Однак, після деяких досліджень, стало зрозуміло, що більшість браузерів переходять назад на звичайний HTML при обробці цих сторінок. З цієї причини багато вибрали використання HTML 4.01 Strict замість нього. По суті всі ці варіанти дають вам контроль. Досліджуйте обстановку і виберіть самі свій варіант
3: Ніколи не використовуйте включені стилі
Іноді, коли буває важко розробити верстку, ви можете захотіти піти з легкої доріжці і вставити трохи стилів
Звичайно - це виглядає досить безневинно. Проте, це веде до помилки ваших кодів.
Цей як перетинати промені в Мисливцях за привидами. Це просто погана ідея. -Кріс Койєр (Chris Coyier) (з приводу чого, абсолютно не по темі.)
Замість цього, закінчите шаблон, після чого дайте посилання на цей тег P в зовнішньому CSS файлі.
Як зробити краще
4: Поміщайте все зовнішні CSS файли всередині тега HEAD
Технічно, ви можете помістити таблиці стилів куди завгодно. Однак, специфікації HTML рекомендують поміщати їх усередині тега документа HEAD. Найголовніше цього перевага це те, що ваші сторінки будуть завантажуватися швидше.
Коли ми досліджували проізодітельний в Yahoo. ми виявили, що переміщення таблиць стилів в HEAD документа змушує сторінки грузиться швидше. Це відбувається тому, що приміщення таблиць стилів в HEAD дозволяє сторінці грузиться прогресивно. - Команда ySlow
Якщо єдина мета ваших файлів JS це додати функціоналу сторінці - наприклад, після того, як натиснута кнопка - можете сміливо поміщати ці файли в кінець сторінки, прямо перед закриває тегом body. Це найкращий варіант.
Як зробити краще
Ще одна поширена практика в минулому це поміщати команди JS безпосередньо в теги. Це часто використовувалося в простих галереях зображень. По суті, тегом просто надавався атрибут "onclick". Його значення при цьому дорівнювало будь-якої процедури JS. Немає потреби говорити, що такого ніколи не можна робити. Замість цього перетворите цей код в зовнішній файл JS і використовуйте "addEventListener / attachEvent" щоб "прослухати" бажане подія. Або ж, при використанні такого фреймворка як jQuery, просто використовуйте метод "click".
7: Постійно перевіряйте на валідність
Нещодавно я писав у своєму блозі про те, як питання про валідації був абсолютно неправильно витлумачений тими, хто не до кінця розуміють її мети. Як я згадував у цій статті, "валідація повинна працювати на вас, а не проти".
Однак, особливо на самому початку, я настійно рекомендую, щоб ви завантажили Web Developer Toolbar і постійно використовували пункти "Validate HTML" (перевірити HTML) і "Validate CSS". Хоча CSS і досить простий у вивченні мову, він також може змусити вас рвати на собі волосся. Також ви часто будете переконуватися в тому, що це ваша неякісна розмітка привела до дивних прогалин на сторінці. Тому перевіряйте, перевіряйте і ще раз перевіряйте.
8: Скачайте Firebug
9: Використовуйте Firebug!
З мого досвіду більшість користувачів використовують Firebug лише на 20% його можливостей. Воістину ви надаєте собі погану послугу. Витратьте пару годин і пошукайте в мережі всі гідні матеріали з цього питання.
10: Все теги повинні бути в нижньому регістрі
Технічно, можна обійтися і тегами в верхньому регістрі.
З іншого боку, не робіть так. Це не служить ніякої мети і ріже око - не кажучи вже про те, що це нагадує мені про функції html Microsoft Word!
Як зробити краще
11: Використовуйте теги H1 - H6
Треба сказати, що це те, про що я частенько забуваю. Найкраще використовувати всі шість цих тегів. Чесно кажучи, я зазвичай використовую перші чотири, але я над цим працюю. Для поліпшення семантики і SEO сайту змусьте себе замінити тег P на який-небудь придатний H.
12: При створенні блогу, припасіть H1 для заголовка
Я запитав наших послідовників вважають вони доцільним використовувати H1 для логотипу або ж використовувати його для заголовка. Близько 80% повернутих твітів було на користь останнього варіанту.
Як і з усім іншим, визначте, що краще підходить вашому сайту. Проте, при створенні блогу, я б рекомендував, щоб ви припасли ваш тег H1 для заголовка статті. З міркувань SEO це, на мою думку, кращий варіант.
13: Скачайте ySlow
Особливо в останні роки команда Yahoo виконала дійсно відмінну роботу в нашій області. Не так давно вони випустили додаток до Firefox під назвою ySlow. Увімкніть його, і він проаналізує цей вебсайт і видасть "картку звіту", яка детально опише вам області сайту, які необхідно поліпшити. Може це злегка і жорстко, але все ж на благо. Я вкрай рекомендую це додаток
14: Панель навігації укладіть в невпорядкований список
Кожен вебсайт містить хоч якась подоба навігаційного меню. Може і можна оформити його наступним чином:
Я б не рекомендував використовувати такий метод з міркувань семантики. Ваше завдання створити найкращий код, на який ви здатні.
До чого оформляти список навігаційних посилань будь-чим іншим крім невпорядкованого СПИСКУ?
Передбачається, що тег UL містить в собі список елементів.
Як зробити краще
15: Вчіться цілитися на IE
Рано чи пізно ви все-таки будете проклинати IE. Це взагалі стало обов'язковим елементом в нашому суспільстві. Коли я читаю на Твіттері, як один з моїх друзів бореться з силами IE, я просто посміхаюся і думаю про себе: "Я знаю, яке тобі, приятель".
Першим кроком після того як ви створили ваш основний CSS файл буде створення окремого файлу ie.css. Потім ви можете направляти на нього виключно ie, використовуючи наступний код.
Цей код означає, що "браузер користувача є Internet Explorer 6 або нижче, використовуй цю таблицю стилів, в іншому випадку, нічого не роби". Якщо ви хочете заміни і для IE7, просто замініть "lt" на "lte" (менше або дорівнює)
17: Коли вебсайт готовий, стисніть його!
Сервіси стиснення CSS
18: Скорочуйте, скорочуйте, скорочуйте
Озираючись на мій перший вебсайт, мені здається, що я страждав запущеною формою "діватіта". Спершу, вашим природним інстинктом буде загортати кожен параграф в div. а потім загорнути його ще в один div про всяк випадок. Ви швидко зрозумієте, що це вкрай неефективно.
Після завершення роботи над шаблоном пройдіться по ньому очима кілька разів і пошукайте способи зменшити кількість елементів на сторінці. Обов'язково цей UL поміщати в свій власний div. Думаю необов'язково.
Також як і ключ при листі, "скорочувати, скорочувати, скорочувати" - вірно і для шаблонів.
19: Все зображення вимагають власні атрибути Alt
Легко недооцінити важливість атрибуту alt всередині тегів зображень. Тим не менш, вони дуже важливо з причин зручності і перевірки валідності. Тому приділіть трохи уваги і заповніть ці теги.
Як зробити краще
20: Вивчайте до останнього
Маю великі сумніви, що я єдиний, хто, в якийсь момент вивчення чого-небудь, озирався на всі боки і усвідомлював, що я сиджу в темній кімнаті і час десь уже під ранок. Якщо ви опинилися в схожій ситуації, йдіть відпочивати і будьте впевнені, що вибрали правильний шлях
Ці дивовижні моменти відкриття, принаймні для мене, завжди відбуваються пізно вночі. Так само було і тоді, коли вперше зрозумів принцип роботи дужок в Javascrip. Це дуже приємне відчуття, яке ви повинні випробувати, якщо ще не відчували.
Хіба є кращий спосіб вивчити HTML, крім як копіювати ваших героїв? За великим рахунком ми все плагіатчікі! Вже потім потихеньку ми починаємо виробляти власні способи і методи. Тому подивіться на сайти тих, кого ви поважаєте. Як вони виконали ту чи іншу секцію? Вчіться і наслідуйте їм. Ми всі так робили, робіть так і ви. (Не треба красти дизайн, просто вчіться з самого коду)
22: стилізує ВСЕ елементи
Це дуже важливе правило, особливо коли працюєш на клієнта. Тільки тому, що ви не використали елемент blockquote, не означає, що він не знадобиться вашому клієнтові. Чи не використовуєте впорядковані списки? Це не означає, що ваш клієнт теж не буде. Зробіть собі послугу і створіть спеціальну сторінку, щоб покрасуватися вашими стилями для кожного елемента: ul. ol. p. h1-h6. blockquotes. і т.д.
23: Використовуйте Twitter
Спочатку, основною ідеєю твіттера було записувати "що ти робиш". Незважаючи на те, що це і зараз залишається так в деякій мірі, твіттер більше перетворився в мережевий інструмент в нашій індустрії. Якщо шановний мною веб девелопер запостив посилання на статтю, яку він знайшов цікавою, повірте, я її теж прочитаю - і вам слід! Ось причина, по якій такі сайти як Digg стають все більше і більше дратівливими.
24: Вивчіть Photoshop
Насправді, Photoshop цілком ймовірно стане найважливішим вашим інструментом. Після того як ви вивчили HTML і CSS, я б порекомендував вам вивчити максимальну кількість технік Photoshop
25: Вивчіть кожен HTML тег
Є десятки HTML тегів, з якими ви не зіткнетеся у вашій роботі. Проте, це не означає, що ви не повинні їх знати! Ви знайомі з тегом abbr наприклад? А як щодо cite? Це два тега заслуговують свого місця в поштову скриньку інструментів. Вивчіть їх усіх!
До речі, якщо ви все-таки не знайомі з цими двома тегами:
abbr робить саме те, що від нього і чекають. Він означає абревіатуру. "Blvd" можна обернути в тег abbr так як це абревіатура слова "boulevard".
Такі сайти як наш вносять величезний вклад в подальше зростання знань по веб розробці, ви теж повинні! Нарешті здогадалися, як коректно розмістити елементи на сторінці? Створіть запис в блозі і навчіть інших як це зробити. Завжди будуть ті, у кого досвіду поменше, ніж у вас. Ви не тільки будете приймати участь в житті спільноти, а й самі вчитися. Ніколи не помічали, що чого дійсно не можеш зрозуміти, поки тебе не змусили це вивчити?
27: Використовуйте скидання CSS
Ось ще одне питання, по якому ведуться гарячі дебати. Скидання CSS: використовувати або не використовувати, ось в чому питання. Якщо ви запитаєте мого особистого ради, я б 100% рекомендував би створити вам ваш власний файл скидання. Можна почати з скачування якого-небудь популярного файлу, такого як файл Eric Meyer's, і потім повільно, в міру того як ви вчитеся, почати перетворювати його в ваш власний. Якщо ви не зробите цього, ви не зрозумієте по-справжньому, чому елементи ваших списків отримують додаткове заповнення, яке ви не вказували ніде в вашому CSS файлі. Пожалійте собі нерви і просто скиньте все! Ось вам для початку.
28: Вирівняйте всі!
29: Розберіть PSD
Отже, у вас вже є тверді знання HTML, CSS і Photoshop. Наступним кроком буде конвертація вашого першого PSD файлу в робочий вебсайт. Не хвилюйтеся, це не так важко як здається. Кращого способу застосувати ваші знання на практиці просто не придумаєш.
30: Не використовуйте фреймворкі..Пока
Фреймворкі CSS створені для просунутих розробників, які хочуть заощадити трохи часу. Вони не для новачків.
Оцініть, будь ласка, цю статтю: