Кодування відповіді на резюме в HTML5 / CSS3
Майже всі в діловому розділі створили резюме в певний момент. Працюючи фрілансером, ви завжди виступаєте за нові проекти. Завдяки цьому тимчасовому робочому циклу вона допомагає запропонувати потенційним клієнтам короткий погляд на ваш минулий досвід. А що краще, ніж пропонувати своє професійне резюме в Інтернеті?
- Демо
- Завантажити вихідний код
У цьому уроці я хочу продемонструвати, як ми можемо створити a реагує односторінкове макет резюме. Я буду кодувати все в HTML5 / CSS3, щоб працювати належним чином при різних дозволах екрану. Резюме буде також підтримувати мікроданні, що працюють на schema.org, для більш технічних переваг SEO.
Створення документа
Я запускаю веб-сторінку за допомогою документа HTML5 і стандартних мета-елементів. Але для того, щоб отримати відповідну розкладку, нам потрібно налаштувати деякі додаткові компоненти. Більшість із них є типовими мета-тегами і підтримуватимуться у всіх сучасних браузерах.
Онлайн-відповідь Resume Demo
Мета вікна перегляду
тег має вирішальне значення для отримання чудової техніки для роботи з смартфонами. Ми скидаємо масштаб як 1: 1, тому макет відображається в пікселях. Ви також помітите, що я включив зовнішню таблицю стилів з веб-шрифтів Google. Я використовую два користувальницькі шрифти “Simonetta” і “Бальтазар”. Унікальні шрифти, безумовно, захоплюють увагу відвідувачів і гармонійно вписуються в дизайн однієї сторінки.
Я також встановив невеликий IE умовний, який включає в себе деякі сценарії з відкритим вихідним кодом для застарілих браузерів. У браузері Internet Explorer 8 і старше виникають проблеми з відображенням елементів HTML5 і медіа-запитів CSS3. Але, на щастя, деякі розумні розробники зрозуміли, як їх запустити через JavaScript.
Блоки основного вмісту
Весь документ загорнутий у div з багатьма різними секціями блоку всередині. Вершина
тег містить мою фотографію, ім'я, адресу електронної пошти та інші важливі метадані. Після цього я розбив кожний блок на a елемент для решти вмісту.
Коли ви змінюєте розмір сторінки, ці елементи блоку витончено падають один до одного. Я встановив кілька різних екземплярів медіа-запитів у зовнішній таблиці стилів. Це полегшує відстеження стилів під час повернення для редагування пізніше.
Джейк Роше
Позаштатний письменник & веб-розробник
Хадсон, Массачусетс, США [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. У цьому випадку я хочу оновити елементи списку трохи ширше, щоб вони заповнили весь екран. Це вплине лише на перелік навичок у ландшафтному вигляді, оскільки портрет занадто вузький, щоб помітити будь-які відмінності.
- Демо
- Завантажити вихідний код
Заключні думки
Робота над Інтернетом часто вимагає принаймні деякого типу портфеля в Інтернеті. Коли ви можете посилатися на резюме однієї сторінки з усіма деталями, організованими разом, це показує, що ви маєте на увазі бізнес. Серйозні роботодавці та потенційні клієнти потраплять в голову за такий харизматичний прояв професіоналізму у веб-дизайні.
Я сподіваюся, що ви можете взяти деякі ключові моменти від цього підручника. Фрілансери в будь-якому місці світу можуть рекламувати себе лише за допомогою технічних зусиль. Не соромтеся завантажувати мій вихідний код вище, а також поділитися своїми думками щодо цієї статті в нашій області коментарів.