Домашня » Кодування » Кодування відповіді на резюме в HTML5 / CSS3

    Кодування відповіді на резюме в 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]

    Перш ніж ми перейдемо до детального 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 пов'язані один з одним. У цьому випадку ми маємо список мов і програмного забезпечення, з яким я знаю, як працювати.

     

    Останні статті

    • Опубліковано в

    • Опубліковано в

    • Опубліковано в

    • Опубліковано в

    • Опубліковано в

    Іншим хорошим прикладом є перелік статей, знайдених у самому низу. Налаштування схеми для статей і публікацій у блогах, пов’язані з вмістом, знайденим в Інтернеті. Я вказав 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. У цьому випадку я хочу оновити елементи списку трохи ширше, щоб вони заповнили весь екран. Це вплине лише на перелік навичок у ландшафтному вигляді, оскільки портрет занадто вузький, щоб помітити будь-які відмінності.

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

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

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

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