Введення в Курс навчання веб-стандартів / Зміст

Введення

Якийсь час у мене була мрія. Моя робота в останні 8 чи 9 років міцно пов’язана з освітою. Я брав участь у створенні та редагуванні технічних книг, які допомагають людям створювати цікаві речі за допомогою технологій; навчав нових співробітників у різноманітних компаніях, на які працював; редагував або писав посібники, щоб допомогти людям використовувати програмні продукти Opera. Я пристрасно люблю Веб і є великим прихильником відкритих веб-стандартів. Мені хотілося зробити свій внесок, щоб Веб став краще. Чи йде мова про те, як навчити людей спільній роботі і заслужити повагу, або навчити створювати сайти, які працюють на різних платформах і пристроях й доступні людям з обмеженими можливостями, – усе це нас повертає до освіти, на мій погляд. Оскільки веб-стандарти відіграють ключову роль, я вирішив спробувати присвятити свій час і енергію чому-небудь, що допоможе встановленню веб-стандартів в інтернеті зараз і в майбутньому. Ці думки кружляли у мене в голові до останнього часу і, на щастя, здійснилися в Opera – спасибі моїм чудовим роботодавцям, які платять мені за це. Одна моя мрія реалізувалася.
Продовження

Історія Інтернету та Мережі, а також еволюція веб-стандартів

Введення

- З чого починати, Ваша Величність? – запитав він.
- Почни з початку, – поважно відповів Король, – продовжуй,
поки не дійдеш до кінця. Як дійдеш – кінчай!

 
У всього є початок, так що наша подорож розпочнеться з уроку історії. Нижче я коротко розповім про створення Інтернету, World Wide Web (Всесвітньої павутини) і «веб-стандарти», яким присвячений цей цикл статей. Я думаю, корисно і цікаво зрозуміти, як ми опинилися там, де є зараз. Розповідь буде досить короткою, щоб ви не були приголомшені і могли в той же час зрозуміти деталі добре і швидко. Якщо якісь терміни вам незнайомі, не страшно. Якщо ці терміни важливі для вивчення веб-розробки, вони будуть визначені пізніше в статтях, які розкривають кожну тему більш грунтовно. До того ж ви можете завжди знайти визначення незрозумілого слова в Google! Якщо ви вже знайомі з історією Інтернету або Всесвітньої павутини, можете сміливо перейти до секції веб-стандартів. Продовження

Як працює інтернет?

Введення

Час від часу вам пропонується поглянути за куліси і побачити як обертаються гвинтики і ремені в дії. Сьогодні ваш вдалий день. Я проведу вас за лаштунки однією з найбільш «гарячих» технологій, з якою ви, можливо, вже знайомі – Всесвітньої павутини. Барабанний дріб!

У цій статті розкриваються основні технології, завдяки яким працює Всесвітня павутина:

  • Мова розмітки гіпертексту (HTML)
  • Протокол передачі гіпертексту (HTTP)
  • Система доменних імен (DNS)
  • Веб-сервери і веб-браузери
  • Статичний і динамічний контент

Це все досить фундаментальні речі. І хоча більша частина з того, про що тут йдеться, не допоможе вам зробити сайт краще, ви опануєте належну мову, яку будете використовувати в спілкуванні з клієнтами та іншими особами щодо Веба. Як сказала няня, персонаж фільму «Звуки музики», «Коли ми вчимося читати, ми починаємо з АБВ. Коли співаємо, ми починаємо з До Ре Мі ». У цій статті ми коротко поглянемо на те, як комп’ютери взаємодіють один з одним, використовуючи протоколи HTTP і TCP/IP, потім розглянемо різні мови, які використовуються спільно для створення веб-сторінок. Продовження

Модель веб-стандартів: HTML, CSS і JavaScript

Введення

В останній статті ми коротко торкнулися базових будівельних блоків Мережі – HTML (або XHTML), CSS і JavaScript. Настав час копнути глибше і розглянути кожен з них детальніше: що вони роблять, як ця трійка взаємодіє один з одним при створенні веб-сайту. Продовження

Веб-стандарти – красива мрія, але якою є реальність?

Введення

До цього моменту ми говорили про красивий ідеал веб-стандартів. Веб-стандарти допускають функціональну сумісність між всіма браузерами, на кожній операційний системі і навіть на кожному доступному електронному пристрої. Але як справа йде в реальності? Чи всі браузери слідують стандартам на 100%? Чи всі веб-розробники використовують веб-стандарти належним чином? Чи створюють веб-розробники сторінки, а потім відходять, впевнені, що їх дизайн буде підтримуватися скрізь?

Дійсно проста відповідь на останнє питання – ні. Це ідеальна ситуація, яка далека від реальності. Продовження

Інформаційна архітектура – планування сайту

Введення

Традиційно етап планування сайту (як і будь-якого проекту) може бути трохи стресовим. У кожного є власна думка щодо того, як сайт повинен бути зроблений. І часто ці думки будуть конфліктувати один з одним. Вашою головною метою має бути створення сайту, корисного для людей, які будуть ним користуватися. Насправді не важливо навіть, що говорить ваш начальник, хлопець з докторським ступенем з розробки програмного забезпечення, що сидить вниз по коридору; не важливі навіть ваші особисті уподобання. В кінці дня, якщо ви створюєте сайт для певної групи людей, має значення тільки їх думка.

У даній статті розглядаються ранні етапи планування веб-сайту, а також дисципліна, яка в більшості випадків обозначеться як Інформаційна архітектура (Information architecture, скорочено IA). Ця дисципліна включає в себе роздуми над тим, хто стане цільовою аудиторією, яка інформація і які послуги їм потрібні від вашого сайту, а також як ви повинні структурувати інформацію, щоб надати відвідувачам. Ви будете дивитися на всю інформацію, яка повинна бути представлена на сайті, думати, як розбити її на шматочки і як ці фрагменти повинні співвідноситися один з одним. Продовження

Що потрібно для хорошої Web-сторінки?

Введення

Продовжуючи попередню статтю, в цій я розгляну контент сайту The Dung Beatles, щоб показати вам, що повинні містити гарні сайти і сторінки.

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

Теорія кольору

Введення

Без особливого використання графіки і кольору будь-який сайт міг би стати сайтом мрії Якоба Нільсена. І хоча філософія спрощеної веб-архітектури має свої переваги у вигляді доступності та простоти використання, більшість веб-дизайнерів хочуть залишити свій відбиток на їх сайтах за допомогою різноманітних елементів дизайну. На щастя, дизайнер може додавати колір на сайт без втрати доступності та простоти використання, якщо сайт був створений з такими можливостями. Хоча багато дизайнерів комфортно себе почувають, створюючи сайт для широкого кола користувачів, вони ж можуть відчувати невідповідність вимогам, коли мова заходить про вибір кольору і графіки.

У цій статті я розповім про основи кольору і трьох простих колірних схемах. Це дозволить вам з упевненістю вибирати кольори для вашого сайту. Я продовжу статтю розповіддю про те, як спростити кольорове оформлення. Зрештою, куди приємніше насолоджуватися компліментами про дизайн сайту, ніж пітніти над кольоровим оформленням. Продовження

Створення каркасу сайту

Введення

Кожен Web-дизайнер повинен знати і розуміти параметри Web-сайту, перш ніж починати проектування сайту. У цій лекції ви познайомитеся з основами, які потрібно знати, перш ніж починати проектувати Web-сайти для бізнесу. Ця інформація буде корисна також, якщо ви захочете створювати сайти для інших, і її можна використовувати в якості статті-інструкції для сайтів, які ви захочете створювати для себе. Зазвичай цей етап настає після створення інформаційної архітектури – необхідно зібрати інформацію про те, що клієнт хоче мати на своєму сайті, і як він повинен бути структурований, який тип брендингу використовує компанія, і використовувати потім цю інформацію для створення візуального макета дизайну, яке необхідно узгодити з клієнтом, перш ніж додавати до нього графіку і колірні схеми. Продовження

Колірні схеми та макети дизайну

Введення

Після того як Web-дизайнер представив архітектуру сайту або каркас клієнту для затвердження, наступний крок полягає у визначенні зовнішнього вигляду сайту за допомогою кольору і графіки. У цій статті буде показано, як зберегти цей процес якомога простішим, як для розробника, так і для клієнта. Я дотримуюся філософії KISS (Keep Its Simple Stupid) – Будь простішим. Є дві причини для використання такої тактики: перша – життя і так достатньо складне, навіщо ускладнювати ще; друга – простий план допомагає також зберегти сайт більш доступним і легшим у користуванні для всіх зацікавлених сторін. Продовження

Поліграфія в Web

Введення

Що таке поліграфія? Говорячи просто, це мистецтво, і дизайн, і організація тексту (звана друком) – концепція запозичена з традиційного дизайну друку. Це в рівній мірі відноситься як до того, що ви не робите зі своїм шрифтом, так і до того, що робите. У мережі Web поліграфії часто приділяється дуже мало уваги, й існують певні технологічні обмеження, які призводять до деякого спрощення поліграфії в Web при порівнянні з друкованою поліграфією. Однак за допомогою доступних інструментів шрифт може бути представлений в Web безліччю різних стилів і цікавих форм.

У цій статті будуть розглянуті обмеження поліграфії в Web (в порівнянні з друкованим дизайном) і представлені деякі рекомендації зі створення гарної поліграфії в Web, разом з прикладом Web-сторінки, яка демонструє деякі з цих прийомів. Не турбуйтеся, якщо ви не розумієте на даному етапі код CSS і HTML – головне тут змусити вас думати про дизайн. Під час читання статті буде корисно мати під рукою папір і олівець, щоб можна було накидати ідеї про компонування тексту. Продовження

Основи HTML

Введення

У цій статті ми познайомимося з основами мови HTML – що це таке, що вона робить, коротко з її історією , і як виглядає структура документа HTML. Наступні статті будуть розглядати кожну окрему частину HTML зі значно більшою глибиною. Продовження

Елемент HTML <head>

Введення

Ця стаття розглядає частину документа HTML, яка не отримує тієї уваги, на яку заслуговує: розмітку всередині елемента head. До кінця цієї статті ви дізнаєтесь про різні частини цього розділу, для чого вони призначені, включаючи doctype, елемент title, ключові слова й опис (який управляється за допомогою мета елементів). Ви дізнаєтеся також про JavaScript і стилі CSS (як внутрішні, так і зовнішні) і про те, що не слідує залишати в head. Можна завантажити кілька демо-файлів, які будуть використовуватися в статті.

Постарайтеся познайомитися з усім матеріалом від початку і до кінця, тому що він представляє ряд перевірених методів, яких варто дотримуватися при роботі з елементом HTML head. Хоча кожна частина справедлива сама по собі, але в кінці є висновок про кращі методи, що може змусити вас переглянути деякі з попередніх рекомендацій. Продовження

Вибір вірного doctype для документів HTML

Введення

У статті 13 була досліджена анатомія розділу head документа HTML з коротким розглядом різних об’єктів, які можуть міститися в head, та їх функцій. У даній статті буде більш детально розглянуто об’єкт doctype, показуючи його функції при перевірці коду HTML і порядок вибору doctype для документа, і оголошення XML, яке рідко може знадобитися, але іноді буде зустрічатися. Продовження

Розмітка текстового контенту в HTML

Введення

У цій статті розглядаються основи використання HTML для опису значення контенту в тілі (body) документа.

Будуть розглянуті загальні структурні елементи, такі як заголовки і параграфи, а також вставка цитат і коду. Після цього ми розглянемо строковий контент, такий як короткі цитати і візуальне виділення, і закінчимо коротким розглядом застарілого контенту подання. Продовження

Списки HTML

Введення

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

Списки добре підходять з структурної точки зору, так як вони допомагають створити добре структурований, більш доступний, і простий в обслуговуванні документ. Вони корисні також з чисто практичних міркувань – вони надають додаткові елементи для з’єднання зі стилями CSS для чималої кількості стилів оформлення.

У цій статті будуть розглянуті різні типи списків, які доступні в HTML, коли і як їх потрібно використовувати, і як застосовувати деякі базові стилі. Продовження

Зображення в HTML

Введення

У цьому курсі ми поговоримо про речі, які роблять дизайн Web привабливим – про зображення. До кінця цього курсу ви дізнаєтеся, як додавати в Web-документи візуальну інформацію доступним чином (щоб люди з вадами зору могли, тим не менш, використовувати інформацію сайту), та як і коли використовувати рядкові зображення для застосування інформаційних або фонових зображень при компонуванні сторінки . Можна завантажити файли прикладів, що використовуються в цій лекції – я використовую ці файли в ході викладу навчального матеріалу. Продовження

Посилання HTML – давайте створимо мережу Web!

Введення

У цьому курсі ми дізнаємося про один з найбільш значних винаходів в історії Web – посилання. Посилання дозволяють читачеві документа переходити по них до іншого документу і переміщатися з сервера на сервер, не створюючи нове з’єднання. Багато змін відбулося з тих пір, як вони вперше були винайдені, але одне залишається незмінним: посилання є дуже важливою частиною використання Web, і можна полегшити або утруднити життя відвідувачам Web-сайту, в залежності від того, як вони використовуються.

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

Таблиці HTML

Введення

Як використовувати стандарти Web для організації безлічі даних? Сама ідея множини вкладених елементів, необхідних для перетворення всіх даних в симпатичні рядки та клітинки, повинна привести мозок у стан тривоги, але на щастя рішення є – на допомогу приходять таблиці!

У Web-дизайні таблиці є хорошим способом організації даних в табличній формі. Іншими словами, завдяки таблицям, діаграмам та іншій графічній інформації, яка допомагає побачити і перетворити великий обсяг інформації в зведення, яке дозволяє порівнювати і зіставляти різні фрагменти даних. Ви зустрічаєте їх постійно на Web-сайтах, де вони представляють підсумки порівняння результатів політичних виборів, спортивної статистики, порівняння цін, таблиці розмірів, або інші дані. Продовження

Форми HTML – основи

Введення

Всі бачили форми. Всі заповнювали форми. Але чи кодували ви форму?

Форма в мережі є будь-якою областю на сторінці Web, де можна ввести інформацію, наприклад, введення тексту або чисел у текстовому полі, постановка прапорця, встановлення радіо-кнопки або вибір варіанта зі списку. Потім форма, після натискання на кнопку відправки, надсилається на Web-сайт.

Використання форм в Web зустрічається повсюдно: для введення імен користувачів і паролів на екрані реєстрації, коментарі в блозі, заповнення профілю на сайті соціальної мережі або повідомлення інформації для рахунку на сайті магазина.

Створити форму легко, але як щодо відповідності форми стандартам Web? Продовження