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

 
 
 
Джейк Роше
 
Позаштатний письменник & веб-розробник
  Хадсон, Массачусетс, США  [email protected] Моє портфоліо • @jakerocheleau 
 
  
 
 

Перш ніж ми перейдемо до детального CSS, я хочу пояснити більше про використання мікроданих. Якщо ви уважно подивитеся, я розписую атрибути всередині багатьох різних елементів з іменами itemtype, itemscope, і itemprop. Всі вони стосуються проекту Schmea, який сподівається запропонувати структуру даних для Інтернету.

Форматування Корисні мікродані

Всі основні пошукові системи, включаючи Google, Yahoo !, і Bing, прийняли схему як найкращий синтаксис для розмітки даних. Позначаючи деталі про себе, це допомагає цим пошуковим системам відображати відповідні результати для вашого вмісту в Інтернеті. Давайте розберемо, як встановити їх.

Атрибут itemscope застосовується до будь-якого контейнера, який містить інформацію про елемент схеми. За цим слід завжди атрибут itemtype, який у цьому сценарії описує людину. Всередині цієї оболонки div я можу позначити будь-який вміст, використовуючи itemprop разом з будь-якою з деталей, перелічених на сторінці документації.

Рекомендованим методом є обертання вмісту всередині тега span замість додавання безпосередньо до елемента. Коли ви маркуєте щось на зразок фотографії, вам слід додати itemprop до img елемента безпосередньо. Але в іншому випадку ви матимете набагато чистішу розмітку, обертаючи ваші дані в мітку тегів.

Скільки коштує надто багато?

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

Варто зберегти і відкрити розум і подивитися, як ви можете використовувати цю мікродану в аспектах вашого власного веб-сайту. Якщо ви витрачаєте 10-15 хвилин на проходження документації з схемою, це набагато простіше, ніж ви думаєте. Ми можемо подивитися на два твердих прикладу з демо-резюме:

 
 
Сукупність навичок
 
 
Розвиток
 
 
HTML5 / CSS3
 
JavaScript & jQuery
 
PHP Backend
 
Бази даних SQL
 
Wordpress
 
Pligg CMS
 
Деякі об'єктивні-C
 
 
 
 
Програмне забезпечення
 
 
Adobe Photoshop
 
Adobe Dreamweaver
 
MS Office 2007-2010
 
cPanel & phpMyAdmin
 
Xcode 4
 
 
 
 

При перерахуванні моїх різноманітних навичок я встановлюю новий контейнер, що визначає схему ItemList. Не було жодного типу набору навичок або досвіду, який можна було б перерахувати під особою, так що це безпечна альтернатива. Цінність у тому, що Google може зрозуміти кожного itemListElement пов'язані один з одним. У цьому випадку ми маємо список мов і програмного забезпечення, з яким я знаю, як працювати.

 
 
Останні статті
 
  10 корисних резервних методів для CSS і Javascript • Опубліковано в Липень 2012
 
  Переписування URL-адрес у WordPress: Поради та плагіни • Опубліковано в Липень 2012
 
  Оптимізація JPEG для веб - Остаточний посібник • Опубліковано в Липень 2012
 
  9 хитрощів для розробки ідеального бюлетеня HTML • Опубліковано в Травень 2012
 
  Посібник з тестування A / B за допомогою Оптимізатора веб-сайтів Google • Опубліковано в Березень 2012 року
 
 

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

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

Відносні стилі CSS

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

* margin: 0; заповнення: 0;  html висота: 101%;  body background: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); розмір шрифту: 62,5%; нижня частина: 65px;  h1 сімейство шрифтів: "Simonetta", "Trebuchet MS", Arial, sans-serif; колір: # 454545; розмір шрифту: 3.6em; margin-bottom: 6px;  h2 сім'я шрифтів: "Simonetta", "Trebuchet MS", Arial, sans-serif; колір: # 484848; розмір шрифту: 2.5em; margin-bottom: 10px; text-decoration: підкреслення;  h3 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; колір: # 777; font-weight: нормальний; розмір шрифту: 1.8em; margin-bottom: 10px;  h4 сім'я шрифтів: "Trebuchet MS", Verdana, Arial, sans-serif; колір: # 656565; font-weight: bold; розмір шрифту: 1.75em; margin-bottom: 4px;  p сімейство шрифтів: "Balthazar", "Droid Serif", шрифт Times New Roman, serif; колір: # 565656; розмір шрифту: 1.8em; line-height: 1.4em; margin-bottom: 15px; padding-left: 35px;  small font-family: "Balthazar", serif; колір: # 656565; розмір шрифту: 1.6em; дисплей: блок; margin-bottom: 6px;  ul display: block; список-стиль: немає;  ul li padding-left: 45px; list-style-type: немає; вертикальне вирівнювання: зверху; background: url ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px без повтору; margin-bottom: 5px; сімейство шрифтів: "Balthazar", serif; колір: # 666; розмір шрифту: 1.6em; line-height: 2.3em;  img border: 0; max-width: 100%;  a color: # 5582d6; текст-прикраса: немає;  a: hover text-decoration: underline;  

Нічого занадто цікавого, за винятком деяких власних стеків шрифтів. Я також схопив унікальну піктограму кулі, замість того, щоб використовувати стандартний “диск”. Ви можете спробувати шукати через каталог, як Icon Finder, намагаючись знайти схожий дизайн.

/ ** Розташування ядра @group ** / #w margin: 0px 50px; заповнення: 20px 40px; верхній шар: 35px; фон: #fff; min-width: 260px; max-width: 900px; кордон-нижній правий радіус: 8px; кордон-нижній-лівий-радіус: 8px; -webkit-border-bottom-left-радіус: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px;  header ширина: 100%;  / ** @group особисті налаштування ** / #info float: left; margin-bottom: 12px;  #photo float: right;  #photo img -webkit-border-radius: 3px; -moz-border-radius: 3px; радіус кордону: 3px; -webkit-box-shadow: 0 2px 4px rgba (0, 0, 0, 0.2); -moz-box-shadow: 0 2px 4px rgba (0, 0, 0, 0.2); box-shadow: 0 2px 4px rgba (0, 0, 0, 0.2); background-color: #fff; кордон: 1px твердий #ccc; заповнення: 5px;  

Є лише кілька важливих блокових областей на сторінці, які потребують уваги. Звичайно, оболонка div налаштовується з додатковими полями та відступом. Також максимальна ширина обмежена на 900px, тому що будь-який більший розмір відчуває, що сторінка має занадто багато пробілів. Я також використовував закруглені кути в нижній частині сторінки для більш гладкого ефекту на очі.

Чуйний дизайн

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

@media тільки екран і (макс-ширина: 740px) h1 font-size: 4.5em;  h3 font-size: 2.2em;  h2 display: block; text-align: center;  #info float: none; дисплей: блок; text-align: center;  #photo float: none; дисплей: блок; text-align: center;  #w padding: 20px 15px;  p padding: 0;  

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

Як вікно стає менше, я видалив деякі додаткові оббивка з оболонки Div і абзаців. Наступною проблемою, з якою ми стикаємося після заголовка, є вміння лістингу UL. Я розбиваю підхід, що складається з двох стовпчиків, і замість того, щоб елементи списку плавали поруч один з одним.

@media only screen та (max-width: 570px) ul li display: inline-block; padding-left: 15px; ширина: 140px; фонове положення: -5px 0px; margin-right: 6px; line-height: 1.7em;  # навички ліворуч, навички праворуч margin-bottom: 15px;  

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

Кодування для смартфонів

Останні три засоби масової інформації дуже малі, але дуже важливі. При перемиканні між ландшафтним і портретним режимом iPhone змінює розмір будь-якого мобільного браузера. Це також стосується більшості пристроїв Android і телефонів Windows Mobile.

@media тільки екран і (max-width: 480px) ul li ширина: 120px;  #w margin: 0 20px;  тільки для екрана та (max-width: 320px) #w margin: 0 10px;  / ** Екран тільки для iPhone ** / @media та (max-device-width: 480px) ul li width: 150px;  

При першому натисканні на 480px або менше ми вилучаємо з обгортки деяку додаткову оббивку, а також повторно розміщуємо елементи списку. Потім на 320px я видалив деякий пробіл за межами документа. Ви все ще можете побачити текстурований фон, але це не дуже важливо на такому тонкому вертикалі.

Нарешті я використовую max-device-width орієнтувати себе на пристрій iPhone, а саме будь-який інший мобільний екран з максимальною шириною 480px. У цьому випадку я хочу оновити елементи списку трохи ширше, щоб вони заповнили весь екран. Це вплине лише на перелік навичок у ландшафтному вигляді, оскільки портрет занадто вузький, щоб помітити будь-які відмінності.

• Демо
• Завантажити вихідний код

Заключні думки

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

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