Товаров: 0 (0р.)

Резюме html: Создаем адаптивное резюме при помощи HTML5/CSS3

Содержание

Создаем адаптивное резюме при помощи HTML5/CSS3

Почти каждый в определенный момент нуждается в создании резюме. Когда работаешь фрилансером и соперничаешь за новые проекты с другими, возникает вопрос о том, как лучше всего кратко и быстро предоставить сведения о своих навыках и опыте потенциальному клиенту. Что может быть лучше, чем онлайн резюме? В данном уроке показано как построить адаптивное одностраничное резюме. Код будем писать в HTML5/CSS3, чтобы страница должным образом отображалась на экранах с различным расширением.

 

 

Демо                   Загрузить исходные материалы

Построение документа

Начинаем создание веб-страницы с документа HTML5 и стандартных мета элементов. Однако для того, чтобы сделать этот макет адаптивным, нам понадобится установить некоторые дополнительные элементы. Большинство из них это типичные мета-теги, которые будут поддерживаться во всех современных браузерах.  

<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Online Responsive Resume Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="HandheldFriendly" content="true">
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Simonetta:400,900|Balthazar">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <link rel="stylesheet" type="text/css" href="responsive.css">
  <!--[if lt IE 9]> 
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  <![endif]-->
</head>

 

Мета-тег  viewport — это тег, который крайне важен для того, чтобы отзывчивая страница могла работать на смартфонах. Мы сбрасываем масштаб макета к 1:1. Отметим также, что был включен внешний стилевой файл для Google Web Fonts. Используем два пользовательских шрифта “Simonetta” и “Balthazar”. Уникальные шрифты, конечно, захватывают внимание посетителя и гармонично сочетаются в одностраничном дизайне. Также было установлено одно маленькое условие IE, которое включает открытый скрипт для прежних браузеров. Internet Explorer 8 и старее испытывают затруднения в отображении HTML5 элементов и CSS3 свойств, но благодаря некоторым умным разработчикам эти затруднения можно обойти, используя JavaScript.

Главные блоки с контентом

Весь документ состоит из множества различных блоков внутри. Шапка <header> включает фотографию, имя, адрес e-mail и другие важные данные. После этого каждый блок был разбит на <section> для остального контента.

Когда вы будете менять размер страницы, эти блочные элементы будут изящно падать друг под друга.  

<header>
	<div>
		<h2><span itemprop="name">Jake Rocheleau</span></h2>
		<h4><span itemprop="jobTitle">Freelance Writer &amp; Web Developer</span></h4>
		<small itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
			<span itemprop="addressLocality">Hudson</span>,
			<span itemprop="addressRegion">Massachusetts</span>,
			<span itemprop="addressCountry">USA</span>
		</small>
		<small><span itemprop="email">[email protected]</span></small>
		<small><a href="http://byjakewithlove.com/" itemprop="url">My Portfolio</a> &bull; <a href="http://twitter.com/jakerocheleau" itemprop="url">@jakerocheleau</a></small>
	</div>
	<div>
		<img src="images/jake-rocheleau-250.jpg" alt="Jake Rocheleau resume photo avatar" itemprop="image" />
	</div>
</header>

 

Перед тем, как мы перейдем к деталям CSS,  хочется больше рассказать про использование микроданных. Если приглядеться, то есть атрибуты внутри многих элементов с именами itemtype, itemscope, и itemprop. Они все касаются проекта Schmea project,  который предлагает структуру данных для сети. 

Форматирование полезных микроданных

Все главные поисковые системы, включая Google, Yahoo!, и Bing приняли Schema в качестве лучшего синтаксиса для повышения данных. Маркировка деталей помогает поисковым системам выводить связанные результаты онлайн для вас. Давайте разберемся, как установить их.  

<div itemscope itemtype="http://schema.org/Person">

Атрибут itemscope применен для любого блока, который держит информацию на пункте схемы. Это всегда сопровождается атрибутом itemtype, который является сценарием описания персоны. В этом блоке обертки можно маркировать любое содержание при помощи itemprop наряду с любой из деталей, которые перечислены на странице документации. 

Рекомендованный метод должен обернуть ваш контент внутри тега span вместо того, чтобы добавлять его прямо к элементу. Когда вы маркируете что-либо, например, фотографию, вы должны прикреплять itemprop прямо к элементу img. Но в противном случае, вы будете иметь гораздо более чистую разметку, обернув свои данные в span теги.

Сколько это слишком много?

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

Стоит непредвзято взглянуть на то, как вы можете использовать микроданные в аспектах вашего собственного сайта. Если вы проведете 10-15 минут, просматривая Schema, вы поймете, что она намного проще, чем вы думаете. Мы можем увидеть это на двух примерах из резюме демо версии:

<section itemscope itemtype="http://schema.org/ItemList">

	<h3 itemprop="name">Skillset</h3>
	<section>
	<h5 itemprop="about">Development</h5>
		<ul>
			<li itemprop="itemListElement">HTML5/CSS3</li>
			<li itemprop="itemListElement">JavaScript &amp; jQuery</li>
			<li itemprop="itemListElement">PHP Backend</li>
			<li itemprop="itemListElement">SQL Databases</li>
			<li itemprop="itemListElement">WordPress</li>
			<li itemprop="itemListElement">Pligg CMS</li>
			<li itemprop="itemListElement">Some Objective-C</li>
		</ul>
	</section>
	<section>
	<h5 itemprop="about">Software</h5>
		<ul>
			<li itemprop="itemListElement">Adobe Photoshop</li>
			<li itemprop="itemListElement">Adobe Dreamweaver</li>
			<li itemprop="itemListElement">MS Office 2007-2010</li>
			<li itemprop="itemListElement">cPanel &amp; phpMyAdmin</li>
			<li itemprop="itemListElement">Xcode 4</li>
		</ul>
	</section>
</section>

Когда мы перечисляем навыки и умения, установим новый блок, определяющий ItemList schema. Значение здесь имеет то, что Google может понять, что каждый itemListElement связан друг с другом. В этом случае у нас есть список языков и программ, с которыми известно как работать.  

<section>
	<h3>Recent Articles</h3>
	<p itemscope itemtype="http://schema.org/Article">
	<span itemprop="name">
	<a href="http://www.hongkiat.com/blog/css-javascript-fallback-methods/" itemprop="url" title="10 Useful Fallback Methods For CSS And Javascript">10 Useful Fallback Methods For CSS And Javascript</a></span> &bull; Published in <span itemprop="datePublished">July 2012</span></p>
	<p itemscope itemtype="http://schema.org/Article">
	<span itemprop="name">
	<a href="http://www.hongkiat.com/blog/wordpress-url-rewrite/" itemprop="url" 
 title="Rewriting URLs In WordPress: Tips And Plugins">Rewriting URLs In WordPress: Tips And Plugins</a></span> &bull; Published in <span itemprop="datePublished">July 2012</span></p>

	<p itemscope itemtype="http://schema.org/Article">
	<span itemprop="name">
	<a href="http://www.hongkiat.com/blog/jpeg-optimization-guide/" itemprop="url" title="JPEG Optimization For The Web – Ultimate Guide">JPEG Optimization For The Web – Ultimate Guide</a></span> &bull; Published in <span itemprop="datePublished">July 2012</span></p>

	<p itemscope itemtype="http://schema.org/Article">
	<span itemprop="name">
	<a href="http://www.hongkiat.com/blog/design-perfect-newsletter/" itemprop="url" title="9 Tricks To Design The Perfect HTML Newsletter">9 Tricks To Design The Perfect HTML Newsletter</a></span> &bull; Published in <span itemprop="datePublished">May 2012</span></p>
	<p itemscope itemtype="http://schema.org/Article">
	<span itemprop="name">
	<a href="http://www.hongkiat.com/blog/google-website-optimizer-ab-testing-guide/" itemprop="url" title="Guide To A/B Testing With Google Website Optimizer">Guide To A/B Testing With Google Website Optimizer</a></span> &bull; Published in <span itemprop="datePublished">March 2012</span></p>
</section>

Просто имейте в виду, что микроданные — это форматированный контент, который будет организован с помощью компьютеров. Одностраничное резюме является прекрасным примером для определения черт о конкретном человеке. Они не могут быть полезными для каждого сайта, но это захватывающая методология для понимания.

Относительные CSS стили

В последней секции давайте взглянем на стили всей страницы. К вершине нашего CSS-файла отнесем начальный сброс и основные свойства элемента. Они включают в себя заголовки, элементы списков и эффект наведения на ссылку.  

* { margin: 0; padding: 0; }
html { height: 101%; }
body { background: #f2f2f2 url('http://media02.hongkiat.com/responsive-resume/bg-tile.png'); font-size: 62.5%; padding-bottom: 65px; }
h2 { font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; color: #454545; font-size: 3.6em; margin-bottom: 6px; }
h3 { font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; color: #484848; font-size: 2.5em; margin-bottom: 10px; text-decoration: underline; }
h4 { font-family: "Trebuchet MS", Verdana, Arial, sans-serif; color: #777; font-weight: normal; font-size: 1.8em; margin-bottom: 10px; }
h5 { font-family: "Trebuchet MS", Verdana, Arial, sans-serif; color: #656565; font-weight: bold; font-size: 1.75em; margin-bottom: 4px; }
 
p { font-family: "Balthazar", "Droid Serif", Times New Roman, serif; color: #565656; font-size: 1.8em; line-height: 1.4em; margin-bottom: 15px; padding-left: 35px; }
small { font-family: "Balthazar", serif; color: #656565; font-size: 1.6em; display: block; margin-bottom: 6px; }
ul { display: block; list-style: none; }
ul li { padding-left: 45px; list-style-type: none; vertical-align: top; background: url('http://media02.hongkiat.com/responsive-resume/bullet.png') 25px 5px no-repeat; margin-bottom: 5px; font-family: "Balthazar", serif; color: #666; font-size: 1.6em; line-height: 2.3em; }
img { border: 0; max-width: 100%; }
a { color: #5582d6; text-decoration: none; }
a:hover { text-decoration: underline; }

Ничего интересного, за исключением некоторых пользовательских шрифтов.  

/** @group core layout **/
#w { margin: 0px 50px; padding: 20px 40px; padding-top: 35px; background: #fff; min-width: 260px; max-width: 900px; border-bottom-rightright-radius: 8px; border-bottom-left-radius: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-rightright-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; }
header { width: 100%; }
/** @group personal settings **/
#info { float: left; margin-bottom: 12px; }
#photo { float: rightright; }
#photo img {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 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;
border: 1px solid #ccc;
padding: 5px;
}

Есть только несколько важных областей блока, которые заслуживают внимание. Конечно, блок обертки настроен с дополнительными отступами — внутри блока и вокруг блока. Также максимальная ширина ограничена 900px, потому что при большем размере создается впечатление, что у страницы очень много пустого места. Также используем закругленные углы внизу страницы для более гладкого эффекта.

Адаптивный дизайн

Возможно, самым важным аспектом этого онлайн-резюме является его отзывчивая функциональность. Здесь есть пять разных точек, по достижению которых при изменении размера окна браузера начинается эффект перераспределения контента. 

@media only screen and (max-width: 740px) { 
    h2 { font-size: 4.5em; }
    h4 { font-size: 2.2em; }
    h3 { display: block; text-align: center; }
    #info { float: none; display: block; text-align: center; }
    #photo {
        float: none;
        display: block;
        text-align: center;
    }
    #w { padding: 20px 15px; }
    p { padding: 0; }
}

Первоначальный размер в 740px. Фотография будет конфликтовать с нашим заголовком. Помещаем оба элемента в центр всего макета. Увеличим также размер текста заголовка.

Когда окно становится меньше, удаляем некоторые внутренние отступы блока обертки и параграфы. Следующее, что нам нужно, это сместить элементы списка UL — навыки. Убираем две колонки и получаются плавающие друг за другом пункты. 

@media only screen and (max-width: 570px) { 
    ul li {
        display: inline-block;
        padding-left: 15px;
        width: 140px;
        background-position: -5px 0px;
        margin-right: 6px;
        line-height: 1.7em;
    }
    #skills-left, skills-rightright { margin-bottom: 15px; }
}

Также необходимо изменить многие текстовые свойства по умолчанию. Установим фиксированную ширину и сетка смотрится достаточно органично до следующей точки. 

Кодирование для смартфонов

Последние три точки маленькие, но очень важные. При переключении между режимами пейзажа и портрета iPhone будет изменять размеры любого мобильного браузера. Это же относится и к большинству устройств Android и Windows Mobile Phones.  

@media only screen and (max-width: 480px) { 
    ul li { width: 120px; }
    #w { margin: 0 20px; }
}

@media only screen and (max-width: 320px) { 
    #w { margin: 0 10px; }
}  
/** iPhone only **/
@media screen and (max-device-width: 480px) { 
    ul li { width: 150px; }
}

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

 

Последнее — используем max-device-width  — 480px. В данном случае делаем шире список, чтобы элементы списка заполняли весь экран. 

Заключительное слово

Работая в сети Internet было бы полезно иметь портфолио онлайн, откуда потенциальный клиент может перейти на одностаничное резюме и ознакомиться со всеми навыками и способностями автора. Это показывает вас с серьезной стороны и раскрывает ваш профессионализм в веб-дизайне.

Надеемся, что данный урок вам понравился и пригодится в дальнейшем. Если вас заинтересовал материал, скачивайте код и делитесь своими мыслями о статье.

Перевод — Дежурка.

Автор — Jake Rocheleau.

Читайте также: Создание простой галереи изображений Lightbox на jQuery.

Отличный одностраничный HTML шаблон сайта резюме с портфолио

Добрый день, господа читатели и подписчики. Спешу порадовать Вас очередным одностраничным шаблоном сайта. На сей раз это превосходный сайт-резюме с портфолио и более-менее необычной структурой. Конечно, ничего сверхнового, но отличие этого шаблона в том, что сайт разделен на два блока: один статичный с фоновым параллаксом, а другой прокручивающийся по вертикали.

Стоит сразу заметить: здесь нет настоящих фотографий. Все изображения заменены на фоновую текстуру, что придает шаблону стандартность и легкость, так как большие изображение тормозят сайт. Кстати и Вам не помешало бы знать как оптимизировать картинки на сайте. Если у Вас есть воображение (а я верю в то, что оно у Вас есть), то вы легко представите на месте фоновых заглушек изображения вашей тематики сайта.

Дизайн шаблона

Дизайн шаблон минималистичный и простой. Он очень подойдет для какого-либо детализированного сервиса, но вот разработчки решили сделать сайт-резюме. Кстати по подробнее об этом:

Как я уже сказал структура сайта представляет из себя фиксированную часть, в которой имеется фото владельца сайта, его имя, род занятия и иконки социальных сетей. А в правом блоке вся остальная информация, которая прокручивается вертикально, как обычный сайт.

Шаблон, по сути, разбит на три блока:

  • Приветственный. Просто обычное текстовое приветствие
  • Портфолио. На нем остановимся по подробнее. Здесь имеются 6 изображений, которые открываются в полном размере при клике на превью. Здесь стоит очень хороший слайдер с прокруткой всех изображений. Каждое отдельное изображение имеет свое название. Также есть кнопка закрытия слайдера. Все изображения, как я уже сказал заменены на фоновые заглушки, поэтому Вам нужно просто подставить свои изображения на место этих текстур. И вы уже сможете делать с изображениями все, что Вам заблагорассудится: увеличить размер изображения, добавить водяной знак на изображение, добавить столько изображений, сколько Вам нужно и так далее.
  • Контакты. В этом блоке форма обратной связи, адрес, телефон и email.
  • Вспомогательный блок — Элементы. Здесь показаны стили элемнтов сайта для создания новых блоков и страниц.

Что больше всего радует в этом шаблоне так это стили. Стили тут просто восхитительные. В изначальной версии сайта, блок с Элементами был скрыт. Я его открыл специально, чтобы вы видели, что можно сделать на сайте, помимо приветственного блока, портфолио и формы обратной связи. Так вот в этих элементах вы найдете потрясающую стилизацию не только заголовков, цитат, форматированного текста, но и стили для чекбоксов, радио, что найдешь только в каки-нибудь фреймворках.

Вообще же здесь есть стили для любых элементов сайта: кнопки (большие и маленькие), списки, инпуты, жирный текст, «sup», «sub» и так далее. Также имеются подключенные иконки font-awesome. У меня все, смотрите «демо», качайте шаблон, развивайтесь. Пока.

Помогла статья? Угости чашечкой кофе =)

Пример резюме html-верстальщика | Резюме | образцы, советы, как составить резюме

Фамилия Имя Отчество

Киев, ул. Соискателей 12, кв. 45 тел. 777-7777 e-mail: [email protected] Цель:получение должности html-верстальщик Опыт работы: 2008- наст.вр. – «…», html-верстальщик, контент-мастер Выполняемые обязанности:
  • HTML верстка
  • не сложный дизайн
  • нарезка дизайна
  • поддержка и обновление сайта
  • сканирование и обработка изображений и текстов
  • оптимизация и продвижение сайтов
2007 – 2008 – «…», html-верстальщик Выполняемые обязанности:
  • верстка HTML/CSS/JavaScript на основе макетов, созданных дизайнером
  • приведение существующих интерфейсов web-приложений в соответствие с требованиями W3C Accessibility (совместно с разработчиками системы)
  • настройка, поддержка и обновление сайтов на CMS (совместно с разработчиками системы)
2006 — 2007 – «…», html-верстальщик Выполняемые обязанности:
  • HTML-верстка PSD-макетов
  • разработка не сложных программных решений (PHP + MySQL + JavaScript + AJAX)
  • обновление существующих решений‚ исправление ошибок и т.п.
  • наполнение контентом
Образование: 2001-2006 — Харьковский национальный университет радиоэлектроники Факультет: Компьютерные науки Специальность: компьютеризированные технологии и системы издательско-полиграфических предприятий Знания и навыки:
  • отличнное знание ПК и Windows на уровне опытного пользователя
  • свободно работаю с пакетом MS Office
  • дизайнерские программы: Пакет Adobe (Photoshop, ImageReader, Illustrator), Corel Draw
  • базовые знания по Corel Bryce, 3DMax
  • HTML, CSS, SSI
  • обработка изображений и составление коллажей в Adobe Photoshop
  • верстка шаблонов HTML:Template
  • полное понимание работы интерактивных сайтов и методов их построения
  • нарезка дизайн-макетов сайтов
  • начальный дизайн сайтов
  • опыт кроссброузерной верстки сложных дизайнов
  • иностранные языки: английский (начальный уровень)
Дополнительная информация: коммуникабельность, усидчивость, обязательность, обучаемость, пунктуальность‚ ответственность‚ внимательность‚ исполнительность

HTML шаблоны для сайта-резюме | Red-book-CMS.ru

Небольшая подборка, состоящая из 5 HTML шаблонов для небольших одностраничных сайтов, которые обычно создаются под онлайн-резюме.

HTML шаблон Resume

Дизайн выполнен в стиле бумажного листа формата A4, который закреплен поверх темно-синей обложки на металлической заклепке. В шаблон встроена кнопка Наверх и небольшое портфолио из картинок, всплывающих средствами JavaScript.

Скачать Просмотреть

HTML шаблон One Page Resume

Светло-серый шаблон со специально слегка подкошенной фотографией соискателя. Здесь присутствует весьма минималистское оформление и практически ничего лишнего. Строго, стильно, аккуратно.

Скачать Просмотреть

PSD макет-резюме для любителей минимализма

Исходник имеет несколько цветовых вариаций (к примеру синяя и зеленая с белым) из которых пользователю предлагается сверстать одностраничное резюме в вебе.

Скачать Просмотреть

HTML шаблон SRT Resume

Все основные пункты разнесены по блокам. Стиль строгий, цветовые тона светло-серые. Дизайн ориентирован исключительно под немногочисленную текстовую информацию.

Скачать Просмотреть

PSD-макет CV Template

Красочный PSD-макет под изготовление HTML шаблона. Второй план затянут деревянной текстурой. Судя по картинке исходник предполагает наличие вкладок у сверстанной веб-страницы.

Скачать Просмотреть

Опубликовано 2-04-2013 в 15:24

Резюме для веб-разработчика: образец и советы

Спрос на веб-разработчиков неумолимо растет и кажется, что рекрутеры готовы биться даже за кандидатов с опытом работы 2 недели. Но правда в том, что даже начинающим разработчикам нужно составлять резюме и делать это грамотно — чтобы попасть в хорошую компанию.

Мы решили помочь начинающим работникам кода и мышки и рассказали, как правильно составить резюме разработчика. И наглядный пример резюме в конце статьи оставили, конечно.

Образование

Споры о том, нужно ли разработчику специальное образование, не утихают который год. Но большинство экспертов солидарны — высшее образование нужно не всем разработчикам. Базовые профессиональные навыки можно получить самостоятельно с помощью онлайн-ресурсов и курсов. Самые популярные русскоязычные платформы — это GeekBrains, Skillbox, «Нетология», Яндекс.Практикум. Есть и бесплатные ресурсы, их хватит, чтобы начать программировать и набираться опыта. А дальнейшее образование зависит от целей.

Во многих крупных компаниях при трудоустройстве не обойтись без профильного высшего образования. Еще без классической университетской базы бывает трудно, когда разработчик углубляется в наукоемкие отрасли программирования и пробуется на высокие инженерные или исследовательские должности.

Работодатели отмечают, что рады видеть в своих компаниях выпускников МГТУ имени Баумана, Университета связи, МИСиС, МАИ, МЭИ, МИФИ, НГУ, ИТМО. Если только планируете получить высшее образование, присмотритесь к этим университетам.

Опыт работы

Как и в любой сфере, опыт работы в резюме разработчика — это то, что интересует рекрутеров больше всего. Найти работу разработчику без опыта возможно: это могут быть стартапы, заказы на фрилансе, позиции стажеров в крупных компаниях.

Работодатели готовы простить разработчику отсутствие официального опыта работы, если увидят портфолио с достижениями и базовые технические знания в интересующей их области. Например, знание одного языка программирования или опыт создания сайтов. Без знаний и без опыта найти работу начинающему разработчику будет практически нереально. Как мы уже писали, опыт фриланса тоже засчитывается работодателями. Зарегистрируйтесь на нескольких биржах, выберите задания, а затем опишите их в портфолио. Проверенные биржи фриланса с адекватными заказчиками есть в нашей большой подборке.

Описывая обязанности в резюме, помните, что работодатели любят конкретные результаты: как увеличились продажи после создания сайта, сколько новых пользователей привело новое приложение и т.п. Чем выгоднее вы опишите обязанности в резюме, тем быстрее рекрутер пригласит вас на собеседование.

Профессиональные навыки

Чтобы понять, какие навыки включить в резюме разработчика, нужно определиться с направлением разработки. Frontend/backend, язык программирования, уровень и сфера деятельности компании. Помните, что не нужно писать в резюме о всех возможных навыках — подстраивайтесь под требования в вакансии и указывайте только ключевые навыки. Мы подробно рассказывали о том, как грамотно описать навыки в резюме, в этой статье.

Примеры профессиональных навыков:

  • Навыки frontend разработчиков: HTML+CSS, JavaScript, jQuery, CSS и JavaScript фреймворки.
  • Навыки backend разработчиков: MySQL, PostgreSQL, Docker, Git.
  • Навыки iOS разработчиков: Swift, MVC, MVP, UIKit (Autolayout, XIB).
  • Навыки Android разработчиков: Java, Kotlin, Git.

Работодателю очень важно видеть, что разработчик постоянно повышает свои знания. Не стесняйтесь написать в резюме, какие блоги/книги/ресурсы читаете, обязательно напишите о пройденных курсах. Если разработчик регулярно прокачивает профессиональные навыки — это большой плюс.

Интерес к технологиям

В резюме разработчика работодатель хочет видеть, какими технологиями вы интересуетесь. Резюме обязательно просматривает технический директор/team lead/CTO компании, поэтому важно отразить в резюме профессиональные интересы и ссылки на собственные работы.

Добавьте в резюме ссылку на аккаунт GitHub или на ваш личный сайт, еще будет кстати упомянуть о блоге, статье на Хабре или даже список профессиональных медиа, которые читаете.

Оформление

В резюме разработчика главное место занимают его профессиональные навыки, поэтому здорово, если этот раздел выделен в отдельный блок и заметен сразу при открытии резюме. В нашем конструкторе раздел профессиональных навыков отмечен графической иконкой и отделен от основного поля — это удобно, попробуйте.

Еще при составлении резюме не забудьте аккуратно оформить ссылки на соцсети и ваш блог или сайт. Рекрутер обязательно будет искать ваши страницы в соцсетях — облегчите ему поиск.

Не усердствуйте с креативными шаблонами и вычурным дизайном — резюме должно легко читать и просматривать. Обилие пестрых элементов будет отвлекать рекрутера, а это не сыграет вам на руку. HR должен легко находить глазами все важные разделы резюме и сразу выцеплять ключевые слова — имейте это ввиду.

Сопроводительное письмо

Мы считаем, что разработчикам важно писать сопроводительные письма при каждом отклике на вакансию, чтобы работодатель мог увидеть личность, скрывающуюся за страшными аббревиатурами и терминами в резюме.

Напишите короткое cover letter о том, почему хотите работать именно в этой компании и чем будете ей полезны. Делайте упор на пользе для компании, не пересказывайте информацию из резюме и никогда и ни за что не используйте шаблоны писем. Рекрутеры сразу понимают, когда кандидат написал персональное письмо только для их компании, а когда увлекся массовой рассылкой спама.

Чтобы ваше сопроводительное письмо не улетело в корзину рекрутера, изучите примеры цепляющих cover letter и на их основе составляйте свое.

Образец резюме разработчика

По доброй традиции мы не только рассказали о том, как составить резюме разработчика, но и сделали пример. Не копируйте образец подчистую — добавьте индивидуальности. Возможно, вы чувствуете, что в вашем резюме нужно больше внимания уделить курсам или блоку «О себе». Мы лишь создали пример, на который можно опираться.

Составить резюме разработчика можно в нашем конструкторе. А еще у нас есть готовые примеры резюме для других профессий:

17 ошибок, которые испортят любое резюме — Блог HTML Academy

Привет! Меня зовут Серёжа Попов, я руковожу аутсорсом по фронтенд-разработке «Лига А.». Мы делаем настоящие сайты силами начинающих разработчиков — получается дешевле, чем в больших студиях.

Такой процесс работает только если в команде есть достаточный уровень компетенций — например, взрослые и опытные руководители команд и наставники, которые могут упорядочивать джуниорский хаос. Поэтому команде периодически требуется свежая кровь — новые разработчики, которые уже где-то работают или ищут работу.

Чаще всего мы ищем опытных фронтендеров, но недавно перед нами встала задача найти человека, который проработал не больше (но и не меньше) года в сфере веб-разработки. Мы написали вакансии, начали поиски, и через месяц получили такой результат:

В воображаемой Вселенной-Хороших-Кандидатов этого достаточно, чтобы взять на работу несколько человек. Но в реальном мире пришлось потрудиться, даже чтобы просто выбрать из всей массы заявок 10 человек и позвать их на собеседования.

Но мы знали, на что шли, и были готовы исправлять ситуацию. Во-первых, я верю, что мы теряем много талантов, которые из-за простых ошибок просто не доходят до работы. Во-вторых, собирая статистику по откликам из нашего «Центра карьеры», мы поняли, что большинство людей не может найти работу не потому, что их плохо научили, а потому что не могут пройти собеседование.

Поэтому я решил собрать этот материал и рассказать начинающим специалистам, какие ошибки нельзя делать, если они хотят устроиться на работу. Статья пригодится не только начинающим специалистам, так как с вакансией тимлида у нас случаются аналогичные проблемы.

Всего мы нашли 33 ошибки, которые можно допустить на разных этапах поиска работы. О них мы расскажем в двух статьях (вторая уже вышла). Этот пост — первая попытка структуризации опыта «Лиги А.» в подборе кандидатов.

Вакансия с точки зрения соискателя

Среднестатистический соискатель ищет работу так:

  1. Пишет какое-то резюме.
  2. Откликается на вакансию и неохотно сочиняет сопроводительное письмо.
  3. Делает тестовое задание.
  4. Приезжает на собеседование.
  5. Выходит на работу или получает отказ.

С каждым пройденным (и даже проваленным) собеседованием становится всё проще переходить на дальнейшие этапы. Но чем раньше этап, тем проще с него отвалиться. Обратите внимание, я говорю не про трудоустройство, а именно отвалиться по причине того, что ты в этот этап не попал по каким-то причинам.

Дальше я буду поэтапно рассказывать про ошибки, которые совершают специалисты на каждом этапе. В первой части — о составлении резюме и сопроводительных письмах.

Составление резюме

Чтобы эйчары в принципе обратили на вас внимание, нужно правильное резюме. На этом этапе может отвалиться даже опытный разработчик с хорошими навыками и несколькими годами опыта, но недостаточно качественным резюме. На этом этапе соискатели совершают больше всего ошибок, поэтому начнём с них.

1. Указывать несколько должностей в одном резюме

Примеров может быть много, например:

Frontend-разработчик, WEB-разработчик, Инженер, IT специалист

или

Дизайнер-верстальщик, Веб-дизайнер, UX/UI дизайнер, Моушн дизайнер, Аниматор

Обычно компании ищут конкретных специалистов, и несколько должностей в заголовке резюме могут оттолкнуть эйчаров. Чаще всего такой набор значит, что человек сам не понимает, чего хочет, или знает много всего, но по чуть-чуть.

Как надо?

Одно резюме — одна должность. Даже если вы в одной компании верстали фронт и анимировали котяток, расскажите об опыте веб-разработки в резюме фронтендера, а для котяток создайте отдельное резюме «Аниматор» и раскройте тему там. Так работодателю будет проще сфокусироваться на том, что вы умеете, и принять правильное решение.

2. Не загружать фотографию

Нужно признать факт — работодатели смотрят на фотографии соискателей. Более того, на всех крупных HR-сайтах есть галочка «показывать резюме только с фотографией», и эйчары активно ей пользуются. При этом фотография нужна не для отбора по внешности, а чтобы понимать, что человек ничего не скрывает — вот он, на ладони, и понятно, с кем компания имеет дело.

Конечно, отсутствие фотографии не ставит крест на резюме, но сильно уменьшает его шансы быть найденным.

Как надо?

Загрузить в резюме свою фотографию.

3. Загрузить фотографию, где есть не только вы

Работодатель хочет увидеть в резюме информацию о потенциальном сотруднике, а не героев сериалов или пёсиков из интернета. По этой же причине не подходит групповая фотография, на которой соискатель среди других людей, потому что поди ещё разбери, кто есть кто.

Как надо?

На фотографии должны быть вы и ± ничего больше. Не обязательно проводить отдельную фотосессию, достаточно попросить друга сфотографировать вас на любой современный телефон. При этом лучше не делать на фото ничего странного и воздержаться от фотографий, которые могут содержать сомнительные материалы или испортить репутацию еще до собеседования.

4. Скрывать информацию в резюме

Если человек в открытом резюме скрывает отдельную информацию (пол, возраст, имя, профессиональные навыки и опыт работы), у эйчаров могут возникнуть логичные вопросы о том, почему так. Но учитывая, что выбор кандидатов обычно большой, уточнять причины сокрытия информации никто не будет, и такое резюме просто закроют.

Как надо?

Если вы не хотите, чтобы ваше резюме видели, скройте его из поиска и не откликайтесь на вакансии. Если вы ищете работу, не скрывайте информацию о себе — открытость лучше плохо мотивированных тайн.

5. Писать «хочу переехать», но откликаться на вакансии в своём городе

Обычно есть два варианта, как написать о переезде. «Я готов к переезду» и «Я хочу переехать». В первом варианте соискатель ищет работу в своём городе, но готов рассмотреть и хорошие предложения из других городов. Второй вариант явно указывает на то, что человек ищет работу для переезда.

Между этими подходами есть принципиальная разница. Если соискатель хочет переехать, значит ему нет смысла предлагать работу в родном городе, так как он будет и дальше искать возможности переехать. Это выглядит особо странно, когда человека откликается на вакансию в своём городе, а в резюме написано «хочу переехать». Работодатели определённо не захотят вкладываться в человека, который в любой момент может собрать вещи и уехать.

Как надо?

Если вы действительно хотите переехать, указывайте это в резюме, но не откликайтесь на вакансии в своём городе.

6. Скрывать свой регион до собеседования

На любом сервисе для поиска работы можно указать то, где вы живёте, и куда готовы переехать. При этом внутри поиска есть возможность не показывать тех, кто в текущем регионе не живёт, и только готовы туда переехать. Это важно, потому что компания может быть просто не готова перевозить сотрудника.

Когда соискатель говорит, что ищет работу в Новосибирске, но до собеседования скрывает то, что живёт в Томске, это вероятно станет проблемой. Работодатель может оказаться к этому не готов, а время он уже потратил. Возникнет негатив, который никому не нужен, и с которым может быть нелегко справиться.

Как надо?

Укажите город, где вы живете, и куда вы готовы или хотите переехать, чтобы работодатель сразу понимал всю картину.

7. Отсутствие ключевых навыков

Ключевые навыки обычно используются как теги, по которым происходит поиск, и если их не указать, то резюме может не найтись. К тому же, заполняя это поле, соискатель показывает осознание своих сильных сторон. Это очень важно для людей, которые занимаются наймом.

Как надо?

Укажите 6-7 ключевых навыков или технологий, которыми вы владеете. Не указывайте то, чему вы учитесь или знаете вскользь, лучше напишите об этом в разделе «О себе».

8. Нерелевантный опыт

Один из самых сложных пунктов. Нужно написать именно тот опыт работы, который относится к названию должности в заголовке резюме.

Это значит, что если кандидат проработал год верстальщиком, но до этого десять лет настраивал водяные насосы, то в его резюме верстальщика нужен только опыт работы за этот год — и чем подробнее будет написано, тем лучше.

Как надо?

Указывайте только тот опыт работы, который относится к конкретной вакансии. Если вы хотите сказать, кем работали до, напишите об этом в разделе «О себе».

Исключение — смежный опыт. Если вы росли в рамках одной отрасли с начинающего специалиста до руководителя, то это можно и нужно указывать. Если вы работали вы разных местах на похожих/смежных должностях, это также стоит указать. Например, PR + маркетинг.

9. Не написать, какие задачи решали на прошлых местах работы

Работодатели хотят понимать, чем именно соискатель занимался на прошлых местах работы. Организаций много, должностей много, и одна и та же позиция в разных компаниях может требовать разного опыта и предлагать разные наборы задач. Так, например старший разработчик в маленькой веб-студии может не потянуть требования для джуниора в Яндексе.

Во время подбора эйчары ищут в кандидатах релевантный опыт, задачи и технологии.

Как надо?

Указывайте, чем вы занимались на прошлой работе, и какие технологии использовали.

Например, «Я верстал лендинги на потоке в Тильде и использовал для этого HTML/CSS». Или «Я занимался вёрсткой крупного продукта, разбивал дизайн на блоки, продумывал дизайн-систему и поддерживал её».

10. Не писать (почти) ничего в разделе «О себе»

За каждым резюме скрывается не только набор функциональных навыков, но и человек, с которым надо работать и понимать, что он из себя представляет. Пустое поле «О себе» отталкивает, так как вызывает ощущение, что человек ничем не занимается или сам не понимает, кто он.

Как надо?

Расскажите, как вы пришли в отрасль, что используете для развития, чем занимаетесь в свободное время, что любите и как отдыхаете. Всё это — важная информация для потенциального работодателя.

11. Не указывать желаемую зарплату

Пустое поле «Зарплата» не позволяет сделать две вещи.

Во-первых, оценить уровень адекватности соискателя. Младшие разработчики обычно не получают шестизначные суммы, а если специалист с пятью годами опыта пишет о желаемой зарплате в 1000 долларов, возможно, с ним что-то не так.

Во-вторых, оценить то, насколько человек понимает свои желания, как он сам себя оценивает и к чему стремится.

Как надо?

Если боитесь продешевить, укажите среднюю зарплату по рынку. Это не значит, что вам её обязательно предложат, но вы будете понимать, к чему стоит стремиться.

12. Зарплата, не соответствующая уровню рынка или позиции

Причина уже частично описана выше, это показывает степень вашей адекватности и понимания того, как устроена отрасль, а это важно. Работодатель не будет рассматривать ваше резюме, если у вас указана ЗП в два раза выше рынка, особенно если в остальном резюме не полное.

Как надо?

Проведите анализ вакансий и резюме, поймите сколько в среднем платят на этих позициях, в этих регионах и в этих условиях. Поставьте средний ценник и ориентируйтесь на него.

Отклик и сопроводительное письмо

Мы разобрали этап составления и презентации резюме работодателю. Но резюме всегда отправляется с сопроводительным письмом, и здесь тоже случается очень много ошибок.

13. Не написать сопроводительное письмо

Самое очевидная, но самая частая ошибка.

Если соискатель не написал сопроводительное письмо к вакансии, его резюме никто не посмотрит. Потому что это очень важная часть, которая дополнительно «продаёт» резюме и показывает, стоит ли его читать.

Как надо?

Напишите в сопроводительном письме несколько пунктов:

  • Почему я хочу работать в этой компании на этой должности.
  • Почему я подхожу на эту вакансию и на эту должность.

Дайте понять, почему вам интересна позиция, и чем вы можете быть полезным компании. Да, это занимает время на изучение вакансии и компании, но обычно окупается и приводит к приглашению на собеседование. И подход к каждой компании должен быть разный.

14. Сопроводительное письмо в стиле «Прошу рассмотреть меня на вакансию»

Многие сервисы позволяют работодателям не принимать резюме без отклика, и тогда сервис попросит вас его написать. Очень часто там есть стандартный шаблон в котором написано — «Добрый день, прошу рассмотреть меня на вакансию». Для эйчаров это равносильно пустому сопроводительному письму, и такие отклики воспринимается соответственно.

Как надо?

Написать нормальное сопроводительное письмо. См. пункт 13.

15. Сопроводительное письмо из одного слова

Если соискатель всё-таки стёр стандартный шаблон и написал фразу в одно слово или просто набор букв в попытке обмануть систему, то ничего хорошего не получится. Это равносильно стандартному шаблону или пустому письму — и только ухудшает резюме в глазах эйчаров.

Как надо?

Написать нормальное сопроводительное письмо. См. пункт 13.

16. Написать «Я не готов к тестовому заданию»

Это фразой соискатель сразу навязывает работодателю условия, которые невозможно принять. На технические вакансии всегда есть тестовое задание, и чаще всего без него нет смысла смотреть кандидата. Если вы принципиально отказываетесь тратить время на тестовое задание, почему работодатель должен тратить время на вас?

Как надо?

Не писать ничего похожего и быть готовым к выполнению тестового задания. Или обосновать отказ от выполнения ТЗ уже после его получения.

17. Написать одно сопроводительное письмо для десяти компаний

Очень часто люди пишут один отклик, который рассылают всем подряд. Проблема в том, что такой шаблон не отвечает на вопросы, почему вам интересна эта вакансия, и чем вы можете быть полезными — в частности потому что универсальный отклик не может учесть особенности каждой компании. Обычно такие письма кратко пересказывают содержание резюме, что тоже избыточно — ведь эту информацию можно получить и из резюме.

Как надо?

Потратить время на то, чтобы изучить компанию-работодателя. Понять, насколько вы подходите под вакансию, и почему вам нравится и хочется работать в этой компании. Потратьте время, потому что скорее всего это окупится.

Во второй части статьи я расскажу о стандартных ошибках соискателей во время собеседования и, в случае успеха, при приёме предложения работы.

Работа, перейди на Федота

Чтобы не испортить резюме чем-нибудь бесполезным, пройдите интерактивные курсы HTML Academy. 11 глав бесплатно, -30% на подписку в первую неделю.

Регистрация

Нажатие на кнопку — согласие на обработку персональных данных

Резюме HTML

Резюме HTML

Этот учебник учит, как использовать HTML для создания сайта.

HTML является универсальным языком разметки используется в Интернете. HTML позволяет форматировать текст, добавлять изображения, создавать ссылки, формы ввода, фреймы и таблицы, и т.д., и он будет сохранен в виде текстового файла, браузер может считывать и отображать.

Ключ заключается в том, что HTML-теги, роль которых заключается в указании появится содержимое.

Для получения дополнительной информации о HTML, можно найти в нашем руководстве по HTML и HTML справочного руководства .

Теперь, вы закончили обучение HTML, что дальше учиться?

Обучение CSS

CSS используется для управления как стиль и расположение нескольких веб-страниц.

С помощью CSS, все форматирование могут быть удалены из HTML вне и храниться в отдельном файле.

Чтобы узнать , как создавать таблицы стилей, посетите наш CSS учебник .

Изучение JavaScript

JavaScript может сделать ваш веб-страницы более яркими.

Если вы хотите, чтобы отобразить содержимое статического веб-сайта является хорошим отображения изображения, если вы хотите пользователь обменять или сделать его более яркие страницы необходимо использовать Javascript.

JavaScript является наиболее популярным языком сценариев Интернета, все текущие основные браузеры поддерживают Javascript.

Если вы хотите узнать больше о знании Javascript, вы можете получить доступ к сайту в JavaScript учебник .

Сервер сайта

На сервере, где ваш сайт всегда вариант. Есть несколько моментов, которые необходимо учитывать:

расходы Аппаратные средства

Если вы хотите запустить «реальный» сайт, вы должны купить мощный серверного оборудования. Не ждите недорогих ПК может справиться с этими задачами. Вы будете также нуждаться в стабильной (24 часа в сутки) высокоскоростное соединение.

расходы программного обеспечения

Помните, что разрешение сервера как правило, дороже, чем авторизации клиента. Кроме того, обратите внимание, что сервер, возможно, придется ограничить количество пользователей, которые могут.

расходы на оплату труда

Не ждите, низкие затраты на рабочую силу. Вы должны установить свой собственный аппаратного и программного обеспечения. Вы также хотите иметь дело с уязвимостями и вирусами, чтобы убедиться, что ваш сервер работает нормаль

| HTML | WebReference

Указывает заголовок для <детали>, по которому можно щёлкать для разворачивания / сворачивания информации. Элемент <резюме> должен идти первым внутри <подробности>.

Синтаксис 

  <подробности>
  Текст

Закрывающий тег

Пример

резюме <подробности> Информация об авторе

Бендер Родригез

Результат данного примера на рис.1.

Рис. 1. Вид

в браузере

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Рекомендация (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Кандидат в рекомендацию (отвечающая за стандарт, удовлетворена) группа разработчиков, соответствующая своим целям, но требуется помощь сообщества разработчиков по реализации стандартов.
  • Предлагаемая рекомендация (Предлагаемая рекомендация) — на этом этапе представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Рабочий проект (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Черновик редакции (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Черновик (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

В таблице браузеров используются следующие обозначения.

  • — элемент полностью поддерживаемый браузером;
  • — элемент браузером не воспринимается и игнорируется; 900
  • — при возможном появлении различных ошибок, либо элемент связанных с условиями работы.

Число указывает браузреа, начиная с которой устанавливается элемент.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 03.01.2017

Редакторы: Влад Мержевич

.

Тег | HTML-справочник

HTML теги

Значение и применение

Тег

указывает видимый заголовок для тега
. Если элемент не используется, то устанавливается значение по умолчанию (как правило, заголовок «Подробнее»).

Тег

определяет дополнительные детали, которые пользователь может отображать или скрыть. Данный тег может быть использован для создания интерактивных виджетов в будущем, которые пользователь может открывать и закрывать, т.к. внутри тега можно link любой контент. Содержание в
отображается для пользователя только если атрибут open установлен.

Поддержка браузерами

Пример использования 




 Пример использования тега <summary> 


<подробности>
 Показать? 
Пожалуйста ничоси
<подробности>
<резюме> Ещё?
ничоси

В этом примере мы использовали два элемента <детали>, один из которых мы поместили внутрь первого, каждый их них скрывает изображение (тег ). Кроме того, они имеют различные заголовки, которые заданы с использованием тега

.

Результат нашего примера:

Использование тега
и .

Значение CSS по умолчанию 

  сводка  {
дисплей: блок;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML теги .

Элементы и резюме — Веб-стандарты

часто Вам приходилось использовать JavaScript для создания виджета, показывающего и скрывающего какое-то содержимое? Возможно, для этого вы даже скачивали целую JavaScript-библиотеку? Что ж, можете радоваться: HTML5 позволяет создать подобное всего лишь парой строчек кода, без применения JavaScript. Зависит от, конечно, но мы вернёмся к этому позже. Представляем вам элемент <подробности> .

Вот что о нём написано в спецификации:

Элемент <детали> представляет собой раскрывающийся виджет, показывающий пользователю дополнительную информацию или элементы управления.

Спецификация WHATWG HTML5.

Мы можем использовать

для создания «виджетов-аккордеонов», которые пользователь может разворачивать и сворачивать. Внутри этого элемента можно указать любое содержимое.

Поддержка браузерами #

Прежде чем мы продолжим, вам нужно учесть, что сейчас только Chrome поддерживает элемент <детали> . Скоро к нему присоединится и Opera, но немного костылей нам все-таки понадобится.Что ж, запускайте Chrome, и давайте смотреть.

Использование
#

Имеются два элемента:

и необязательный . Элемент <детали> — это обёртка для содержимого, которое мы хотим показать и скрыть, а содержит описание и заголовок этой группы. Формально <резюме> нам не нужен. В его отсутствие браузер подставит текст по умолчанию, например «детали» в Chrome.Давайте взглянем на код:

  <подробности>
     Покажи-скрой меня 
    
 Бурное развитие внутреннего туризма привело Томаса Кука.

Вы можете посмотреть это в действии на jsbin. Даже этот простой пример прекрасно демонстрирует эффект переключения. Без JavaScript!

Атрибут открытый #

В вышеприведенном примере содержимого скрыто при загрузке страницы. Мы можем сделать его видимым по умолчанию, добавив одиночный атрибут open для <детали> , пример на jsbin:

  <подробности открыты>
     Покажи-скрой меня 
    
 Бурное развитие внутреннего туризма привело Томаса Кука.

Атрибута закрыто не существует. Поэтому опуская open , вы по умолчанию подразумеваете closed .

Элемент #

Мы бегло взглянули на

в действии, теперь остановимся на нём подробнее. Внутри одни строчные элементы, такие как или . Для чего это может быть нужно? Например, для дополнительного оформления или, как предлагает спецификация, использование для формы.По крайней мере, было бы удобно, если бы подобная конструкция работала корректно:

  <подробности>

Теоретически, разъемие на

должно раскрывать содержимое элемента
. В этом примере, что вы, фактически, взаимодействуете с , который переводит фокус на соответствующий — даже если он скрыт с помощью
.

Честно говоря, этот момент еще требует прояснения. А что по вашему мнению должно происходить? Возможно, у разработчиков браузеров, читающих эту статью, есть какие-то идеи? 🙂

Вложенность <детали> #

Вы можете поместить <детали> друг в друга, если хотите, как это сделано в следующем, вполне валидном примере:

  <подробности>
     Вопрос 1 
    
 Население широкий широкий кристаллический фундамент.

    <подробности>
         Приложенные документы 
        
    
            
  •   Болгары очень дружелюбны;  
    • 
            
  •  Скумбрия неумеренно перевозит вулканизм; 
    • 
            
  •  Дождливая погода, куда входят Пик-Дистрикт; 
    • 
            
  •  Белый саксаул дегустирует живописный утконос; 
    •

Примеры использования #

Так в каких же случаях вы можете использовать

? Первое, что приходит в голову — FAQ.Разработчики используют для них «аккордеоны», поэтому <подробно> замечательно подходит.

Также не забывайте о навигации по странице. Это может быть закрепленный блок, передвигающаяся одновременно с прокруткой. Возможно, что-то вроде этого?

Вы можете использовать

для сворачивания и разворачивания блока комментариев в блоге для профиля пользователя, для описания загружаемого файла, для сложных форм или в веб-приложениях, как показано в этой форме из спецификации:

Пример использования < подробнее> из спецификации.

На самом деле, даже глядя на админку WordPress, я вижу множество возможностей использования <детали> . Если у вас есть ещё какие-то идеи и предложения — расскажите о них в комментариях.

Оформление #

Как же нам оформить эту штуку? Для элемента, раскрывающего содержимое, в WebKit вы можете использовать псевдоэлемент :: - webkit-details-marker . Небольшой пример:

  details summary :: - webkit-details-marker {
    фон: красный;
    цвет: #fff;
    размер шрифта: 500%;
}

Мы также можем позиционировать этот элемент по отношению к родителю.Здесь, например, он прижат к правому краю. В общем-то, и все.

А как же заменить раскрывающий элемент своей иконкой? Используя выборку по атрибуту, вы определить, когда <детали> раскрыт, а когда закрыт, и применимо соответствующее фоновое изображение. Мы делаем примерно то же самое в этом примере, вместо фонового мы используем псевдоэлемент :: after :

  summary :: - webkit-details-marker {
    дисплей: нет
}

summary :: after {
    фон: красный;
    радиус границы: 5 пикселей;
    содержание: «+»;
    цвет: #fff;
    плыть налево;
    размер шрифта: 1.5em;
    font-weight: жирный;
    маржа: -5px 10px 0 0;
    отступ: 0;
    выравнивание текста: центр;
    ширина: 20 пикселей;
}

подробности [открыть] резюме :: после {
    содержание: «-»;
}

В этом примере символы + и - используются в качестве раскрывающей ссылки. В зависимости от дизайна вы можете использовать :: before вместо :: after , но в любом случае, оба псевдоэлемента позволяют использование изображения.

Выборка по атрибуту подробнее [открыть] скрывает в себе некоторые интересные возможности.Как хорошие HTML5-доктора, мы создали показанный на этом скриншоте:

Оформленный <детали> в Chrome.

Было бы интересно (хотя это и не всегда уместно), если бы мы могли использовать CSS-трансформации для анимации разворачивания и сворачивания <детали> , но пока это невозможно.

Доступность #

К сожалению, на момент написания статьи отсутствует возможность управления

с помощью клавиатуры.Стив Фолкнер пишет:

Проблема в том, что на данный момент отсутствует поддержка клавиатуры и нет никакой информации для обеспечения доступности.

Попробуйте сами. Если вы раскроете элемент <детали> с помощью мыши, тогда вы также сможете использовать клавиатуру для навигации по вложенным элементам, но вы также должны иметь возможность открывать и закрывать <детали> с помощью клавиатуры. Что ж, неидеально, но я уверен, что разработчики Chrome скоро с этим разберутся.Правда, ребята?

Обратная совместимость #

Прежде чем кто-то будет вводить восклицать, что это не работает в IE6, хочу сказать: мы знаем. Тем не менее, некоторым умным людям, мы можем изящную обратную совместимость. Многие из вас захотят использовать Modernizr для определения возможностей, но на данный момент в Modernizr отсутствует проверка поддержки <детали> .Матиас, автор приведенного решения для этого обратного совместимости, предлагает использовать Modernizr-сниппет.

Зачем вообще это использовать? #

Конечно, дарёному коню в зубы не смотрят, но все-таки — почему этот виджет существует в HTML5? Что ж, как и в случае использования других возможностей HTML5, он просто делает нашу жизнь легче. Реализация таких элементов, как календарь, слайдер, прогресс-бар, а теперь ещё и «аккордеон», становится намного проще и не требует использования JavaScript.Кто знает, что будет следующим? Нативные табы? Было бы здорово 🙂

В заключении №

В статье мы применили эти элементы <детали> и

. Элемент <подробности> при помощи <резюме> создаёт естественный для интерактивный раскрывающийся виджет.

На текущий момент <подробности> работает только в Chrome, но, надеюсь, эта ситуация в скором времени изменится.Пока что мы можем использовать в CSS только :: - webkit-details-marker , но есть и множество других CSS-техник. Если у вас есть какой-либо опыт или идеи для использования элемента <детали> , расскажите об этом в комментариях.

.

Пояснение элементов «Details» и «Summary»

Многие библиотеки JavaScript были разработаны для того, чтобы размещать на сайтах дополнительные интерактивные виджеты. Аналогичными средствами обладает и HTML5. В этой статье мы рассмотрим один из элементов под названием

(а значит автоматически и элемент ), который дает возможность создать такие видыжеты, похожие на аккордеон.

может найти в любом месте в пределах тега.Вот простой пример его использования:

 <детали>
    
 Lorem ipsum dolor sit amet, conctetur adipisicing elit. Voluptas, импедит.

В приведенном выше примере использованного элемента

, подчеркивает его сходство с другими элементами секционирования HTML. Он определяет семантический раздел, который может содержать дочерние элементы, такие как изображения с элементами
, элементы форм, такие как и