Введение Должно быть, Вы уже знаете, что существует огромное количество текстовых тегов. Вы знакомы с параграфами, заголовками и даже аббревиатурами. Но существует множество других, более непонятных и сложных тегов. Непонятных, потому что вы вряд ли найдете их в интернете, и не потому что они не нужны. Если Вы найдете текст с объяснениями, то используйте новые для себя элементы для создания более качественного, лучшего, более значимой HTML-страницы. Адреса Тег address используется специально для контактных данных или всей веб-страницы (единожды). Это не значит, что address нужно обязательно применять для всех старых адресов. <h3>Author contact detailsh3> <address> <ul> <li>0123-456-7890li> <li>author_dude@noplaceinteresting.comli> <li>http://www.noplaceinteresting.com/contactme/li> ul> address> Определения Тег dfn используется для выделения первого термина. Как и тег abbr, атрибут title может быть использован для описания термина. <p>Bob's <dfn title="Dog">caninedfn> mother and <dfn title="Horse">equinedfn> father sat him down and carefully explained that he was an <dfn title="A mutation that combines two or more sets of chromosomes from different species">allopolyploiddfn> organism.p> Двунаправленный текст Тег bdo может использовать обратное направление текста, следовательно, может отображать языки, что читаются справа налево. Атрибут dir может принимать значения ltr (слева направо) или rtl (справа налево). <bdo dir="rtl">god lmthbdo> Редакции Теги ins и del используются для отображения соответственно вставленных и удаленных частей. Они не имеют ограничений применения в тексте, также могут быть применены для целых разделов контента и, как правило, используются в «Track Changes» - дословно «отслеживание изменений». Теги редакции также имеют атрибуты datetime, чтобы показать, когда была произведена правка, а также cite – причины изменений. <p>I have decided to <del datetime="2013-01-26">decreasedel><ins cite="http://www.icecreamforall.com/changeofpolicy/">increaseins> the amount of free ice cream that the State will provide for its citizens.p> Как и в обычных текстовых редакторах, элемент ins применяют для подчеркивания текста, а для зачеркивания – del. Источник: http://www.htmldog.com/guides/html/intermediate/text2/

1. Используйте сброс CSS стилей в браузерах (Reset CSS) Различные браузеры по-разному устанавливают шрифты, поля и другие свойства. Вместо того, чтобы устранять каждый элемент по одному, большинство разработчиков используют “Reset CSS” стиля для сброса таких параметров, как margin, border, font-size и других. Примеры и библиотеки для сброса CSS: Eric Meyer Yahoo! Crucial 2. Используйте средства разработки браузера и дополнительные плагины. Очень полезно при разработке визуализировать «невидимые» части веб-страницы, например, свойства - margin, padding, parent positions и так далее. Вместо того, чтобы спрашивать себя, почему функция остановилась или неверно задан border style, рекомендуется использовать встроенные средства веб-разработки или использовать плагины для браузера. Firebug – плагин для браузера Firefox. Фантастическая и бесценная вещь при разработке страницы. Yahoo!'s YSlow – Плагин для Firebug для проверки скорости загрузки страницы. 3. Выучите JavaScript JavaScript является языком высокого уровня, где автоматически выполняется установка и компилирование. Он подходит для людей даже без опыта программирования. С появлением AJAX, JS становится очень важной частью современных веб приложений. 4. Выучите Photoshop Photoshop - необходимая вещь для каждого разработчика. Используя различные инструменты программы, Вы можете создать как отдельную часть дизайна, например, кнопку, так и полноценный дизайн, который не только произведет впечатление на клиентов, но и позволит Вам проявить Ваше творчество. 5. Тестируйте Ваш продукт на IE 30% пользователей интернета до сих пор используют данный браузер для просмотра контента. К сожалению, Internet Explorer на данный момент не получил стандартов HTML, и веб разработчики должны учитывать это в своих продуктах. Проверяйте Ваш продукт на всех браузерах. Например, Firefox имеет полную поддержку стандарта HTML, в то время как Internet Explorer только продолжает развиваться. Источник: http://www.hackification.com/2008/11/06/ten-web-development-tips-i-wish-id-known-two-years-ago/

Новые пакеты подписки для Frontend разработчиков Уважаемые пользователи платформы ITVDN! Представляем Вам новые выгодные пакеты подписки для Web-разработчиков: «FrontendStarter» и «FrontendPro». Теперь Вы можете получить доступ на 3 месяца к интересующим Вас видео курсам на 30% дешевле. Пакет «Frontend Starter» охватывает 6 базовых курсов для начинающего Web-разработчика: •        HTML & CSS (renewed) •        How to HTML&CSS •        JavaScript Essential •        How To JavaScript •        Twitter Bootstrap 3 •        Создание адаптивного сайта с Bootstrap 3 «Frontend Starter» позволяет обрести базовые знания за 3 месяца и овладеть основами Web-разработки. Рекомендуем проходить обучение именно в представленной структуре для образцового усвоения информации и использования ее на практике. Стоимость подписки на 3 месяца - $35. Пакет «Frontend Pro» охватывает 6 курсов для опытного Web-разработчика: •        JavaScript Advanced •        JQuery •        HTML5 и CSS3 •        JavaScript Шаблоны •        ReactJS Essential •        AngularJS Essential Если же Вы уже владеете базовыми знаниями Web-разработки, именно пакет «Frontend Pro» будет Вам полезен. «Frontend Pro» сопутствует развитию Ваших навыков Frontend направления, а именно углублению знаний JavaScript и изучению таких популярных фреймворков как AngularJS и ReactJS. Стоимость подписки на 3 месяца - $39. Подробнее http://itvdn.com/ru/subscriptions Желаем Вам результативного усвоения информации и скорейшего присоединения Вашей кандидатуры в ряды лучших Web-разработчиков, с помощью платформы ITVDN. Вашим комментариям и пожеланиям будем только рады!

Купите подписку FrontEnd Starter и получите скидку 50% на FrontEnd Pro! C 25 октября до 10 ноября 2016 года на ITVDN действует акция для начинающих веб разработчиков. Покупая пакет подписки FrontEnd Starter, пользователь получает скидку 50% на приобретение пакета FrontEnd Pro.  В пакете «Frontend Starter» 7 видеокурсов, с которых начинается изучение основ веб-разработки: HTML & CSS  How to HTML&CSS JavaScript Essential How To JavaScript Основы использования Git Twitter Bootstrap 3 Создание адаптивного сайта с Bootstrap 3 Стоимость пакета 18 USD. Срок доступа 3 месяца. Знаний, которые Вы получите, изучив эти технологии, будет достаточно, чтобы начать работать верстальщикоми и зарабатывать первые деньги, выполняя простые задачи информационного наполнения и сопровождения сайтов, но для выполнения более сложных задач этого мало. В пакете «Frontend Pro»: JavaScript Advanced JQuery HTML5 и CSS3 JavaScript Шаблоны ReactJS Essential AngularJS Essential HTML5 Web Components Полная стоимость пакета 32 USD. Срок доступа 3 месяца. Приобретая подписку FrontEnd Starter, Вы получате возможность купить FrontEnd Pro всего за 16 USD! Акция продлится до 10 ноября 2016 года. Промо-коды для приобретения пакета FrontEnd Pro cо скидкой 50% будут высланы участникам акции 10 ноября. Срок действия акционного промо-кода - 30 дней. Купить пакет FrontEnd Starter 

Купите подписку FrontEnd Starter и получите скидку 50% на FrontEnd Pro! C 23 июня до 7 июля 2016 года на ITVDN действует акция для начинающих веб-разработчиков. Покупая пакет подписки FrontEnd Starter, пользователь получает скидку 50% на приобретение пакета FrontEnd Pro. Срок действия акционного промо-кода - 30 дней с момента покупки пакета FrontEnd Starter. В пакете «Frontend Starter» 7 видеокурсов, с которых начинается изучение основ веб-разработки: HTML & CSS  How to HTML&CSS JavaScript Essential How To JavaScript Основы использования Git Twitter Bootstrap 3 Создание адаптивного сайта с Bootstrap 3 Стоимость пакета 18 USD. Срок доступа 3 месяца. Знаний, которые Вы получите, изучив эти технологии, будет достаточно, чтобы начать работать верстальщикоми и зарабатывать первые деньги, выполняя простые задачи информационного наполнения и сопровождения сайтов, но для выполнения более сложных задач этого мало. В пакете «Frontend Pro»: JavaScript Advanced JQuery HTML5 и CSS3 JavaScript Шаблоны ReactJS Essential AngularJS Essential HTML5 Web Components Полная стоимость пакета 32 USD. Срок доступа 3 месяца. Приобретая подписку FrontEnd Starter, Вы получате возможность купить FrontEnd Pro всего за 16 USD! Не упустите прекрасную возможность провести лето с пользой. Акция продлится до 7 июля 2016 года. Купить пакет FrontEnd Starter   

<p>На этом вебинаре мы сделаем web-трансляцию для игрушки Lines, которую мы создали на <a href="https://itvdn.com/ru/webinars/description/lines" target="_blank">предыдущем вебинаре</a>.</p> <p>HTML и Bootstrap формируют поле игры. JavaScript динамически отображает и перемещает шарики. PHP-скрипты получают и сохраняют содержимое игрового поля из запущенной на Androidе игры.</p> <p>Ключевым моментом вебинара является вызов PHP-скрипта из JavaScript-кода для web-трансляции игрового процесса. В конце вебинара мы разместим всё на PHP-хостинг и вместе посмотрим стрим игры Lines.</p> <p>Вы сможете самостоятельно сделать такую же web-трансляцию, повторив за ведущим все действия с подробными объяснениями, а потом применить полученный опыт для онлайн-мониторинга любых процессов внутри ваших проектов.</p> <p><strong>План вебинара:</strong></p> <ol> <li>Постановка цели и выбор технологий.</li> <li>Формирование игрового поля на HTML и Bootstrap.</li> <li>Написание JavaScript-функций для отображения элементов игры.</li> <li>Создание API для сохранения/получения игровой позиции.</li> <li>Обращение к PHP-скрипту из JavaScript-кода.</li> <li>Загрузка скриптов на хостинг и тестирование трансляции.</li> <li>Обзор созданного проекта.</li> </ol> <p><strong>Технологии:</strong> PHP, JavaScript, Bootstrap.</p> <p><strong>Необходимое программное обеспечение</strong>: PHPStorm, OpenServer, Bootstrap, PHP-hosting.</p> <p><strong>Целевая аудитория:</strong> программисты, инженеры, IT-студенты</p>

Введение В этой статье Вы научитесь создавать секундомер, используя HTML5 и CSS3. Мы рассмотрим CSS3 анимацию с тремя кнопками: старт, остановка и сброс. Запуск начинает работу секундомера, стоп – останавливает секундомер, и кнопка сброса сбрасывает секундомер. Основная логика создания секундомера очень простая, Вы будете использовать простой контейнер div, содержащий цифры, они будут увеличиваться с помощью ключевого кадра анимации. Сначала создайте div (содержащий числа) с помощью кода HTML: <!doctype html> <html> <head>     <title>Stopwatchtitle>     <link rel="stylesheet" href="Style.css" /> head> <body>     <div class="number">0 1 2 3 4 5 6 7 8 9div> body> html> Вот результат предыдущего кода: Теперь Вам нужно выровнять числа по вертикали за счет уменьшения ширины контейнера. Итак, создайте файл CSS (styles.css) и введите следующий код в этот CSS-файл. * {     margin: 0;     padding: 0; } .numbers {     width: 10px; } Согласно предыдущему коду, Ваши цифры будут выровнены вертикально:  Теперь используем цифровые шрифты, Вы можете скачать их с сайта ds-digi.font. Используйте следующий код CSS, чтобы изменить шрифт: .number {     width: 10px;     font-family: digital, arial, verdana;     font-size: 50px; } @font-face {     font-family: 'digital';     src: url('DS-DIGI.TTF'); } Результат такого кода:   Давайте поместим числа в поле для отображения только одной цифры. Таким образом, в HTML-файле поместите div с цифрами в другой div. Код будет таким:     <div class="box">         <div class="number">0 1 2 3 4 5 6 7 8 9div>     div> Теперь примените такие настройки CSS, чтобы отображать только одну цифру.  .box {     width: 40px;     height: 40px;     border: 1px solid #000;     font-size: 50px;     overflow: hidden; } .number {     width: 40px;     line-height: 40px;     font-family: digital, arial, verdana;     text-align: center; } Таким будет результат: Давайте создадим анимацию цифр, так как это главная задача статьи. Логика анимации – изменить значение top position absolute от 0 до -400 px, потому что высота поля 40 px, а у нас есть цифры от 0 до 9, то есть в общей сложности 10 цифр, так что 40 * 10 = 400, Вы будете менять верхнюю от 0 до -400 px. Вот так выглядит код файла style.css: .box {     width: 40px;     height: 40px;     border: 1px solid #000;     font-size: 50px;     overflow: hidden;     position: relative; } .number {     width: 40px;     line-height: 40px;     font-family: digital, arial, verdana;     text-align: center;     position: absolute;     top: 0;     left: 0;     -webkit-animation: moveup 1s steps(10, end) infinite; /* Chrome, Safari, Opera */     animation: moveup 1s steps(10, end) infinite; } @-webkit-keyframes moveup {     0% {         top: 0px;     }     100% {         top: -400px;     } } @keyframes moveup {     0% {         top: 0px;     }     100% {         top: -400px;     } } Вот каким будет результат: Вы можете увидеть, что цифры заменяются, а не перемещаются вверх пиксель за пикселем. Теперь создайте еще несколько div: два для часов, два для минут, два для секунд и три для мили-секунд. <!doctype html> <html> <head>     <title>Stopwatchtitle>     <link rel="stylesheet" href="Style.css" /> head> <body>     <div class="stopwatch">         <div class="box">                         <div class="number tensPlaceHours">0 1 2 3 4 5 6 7 8 9div>         div>         <div class="box">             <div class="number onesPlaceHours">0 1 2 3 4 5 6 7 8 9div>         div>                 <div class="box divider">             <div class="number">:div>         div>                  <div class="box">             <div class="number tensPlaceMinutes">0 1 2 3 4 5 6div>         div>         <div class="box">             <div class="number onesPlaceMinutes">0 1 2 3 4 5 6 7 8 9div>         div>                 <div class="box divider">             <div class="number">:div>         div>                 <div class="box">             <div class="number tensPlaceSeconds">0 1 2 3 4 5 6div>         div>         <div class="box">             <div class="number onesPlaceSeconds">0 1 2 3 4 5 6 7 8 9div>         div>                 <div class="box divider">             <div class="number">:div>         div>                 <div class="box">             <div class="number onesPlaceMiliSeconds">0 1 2 3 4 5 6 7 8 9div>         div>         <div class="box">             <div class="number tensPlaceMiliSeconds">0 1 2 3 4 5 6 7 8 9div>         div>         <div class="box">             <div class="number hundredsPlaceMiliSeconds">0 1 2 3 4 5 6 7 8 9div>         div>     div> body> html> Результат предыдущего кода: Теперь установите float left для всех div, как указано ниже. .box {     width: 40px;     height: 40px;     border: 1px solid #000;     font-size: 50px;     overflow: hidden;     position: relative; } После применения float left мы получим такой результат: Таким образом, максимальное значение минут и секунд будет 60. Вы должны создать две анимации, одна из которых будет 10-шаговой и 10-цифровой, и одна 6-шаговой, и только 6-цифровой. Используйте следующий код CSS для этого: * {     margin: 0;     padding: 0; } .box {     width: 40px;     height: 40px;     border: 1px solid #000;     font-size: 50px;     overflow: hidden;     position: relative;     float: left; } .number {     width: 40px;     line-height: 40px;     font-family: digital, arial, verdana;     text-align: center;     position: absolute;     top: 0;     left: 0;     -webkit-animation: moveup 1s steps(10, end) infinite; /* Chrome, Safari, Opera */     animation: moveup 1s steps(10, end) infinite; } .moveuptens {     -webkit-animation: moveuptens 1s steps(10, end) infinite; /* Chrome, Safari, Opera */     animation: moveuptens 1s steps(10, end) infinite; } .moveupsix {     -webkit-animation: moveupsix 1s steps(6, end) infinite; /* Chrome, Safari, Opera */     animation: moveupsix 1s steps(6, end) infinite; } @-webkit-keyframes moveup {     0% {         top: 0px;     }     100% {         top: -400px;     } } @keyframes moveup {     0% {         top: 0px;     }     100% {         top: -400px;     } } @-webkit-keyframes moveuptens {     0% {         top: 0px;     }     100% {         top: -400px;     } } @keyframes moveuptens {     0% {         top: 0px;     }     100% {         top: -400px;     } } @-webkit-keyframes moveupsix {     0% {         top: 0px;     }     100% {         top: -240px;     } } @keyframes moveupsix {     0% {         top: 0px;     }     100% {         top: -240px;     } } @font-face {     font-family: 'digital';     src: url('DS-DIGI.TTF'); } Теперь, после создания предыдущих анимаций, примените класс CSS к HTML следующим образом: <div class="stopwatch">         <div class="box">             <div class="number tensPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>         div>         <div class="box">             <div class="number onesPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>         div>         <div class="box divider">             <div class="number">:div>         div>         <div class="box">             <div class="number tensPlaceMinutes moveupsix">0 1 2 3 4 5 6div>         div>         <div class="box">             <div class="number onesPlaceMinutes moveuptens">0 1 2 3 4 5 6 7 8 9div>         div>         <div class="box divider">             <div class="number">:div>         div>         <div class="box">             <div class="number tensPlaceSeconds moveupsix">0 1 2 3 4 5 6div>         div>         <div class="box">             <div class="number onesPlaceSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>         div>         <div class="box divider">             <div class="number">:div>         div>         <div class="box">             <div class="number onesPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>         div>         <div class="box">             <div class="number tensPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>         div>         <div class="box">             <div class="number hundredsPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>         div>     div> Таким будет результат:  Теперь Вам нужно синхронизировать скорость анимации со скоростью времени. Примените следующие свойства: .onesPlaceSeconds {     animation-duration: 10s;     -webkit-animation-duration: 10s; } .tensPlaceSeconds {     animation-duration: 60s;     -webkit-animation-duration: 60s; } .hundredsPlaceMiliSeconds {     animation-duration: 1s;     -webkit-animation-duration: 1s; } /*1/10th of .second*/ .tensPlaceMiliSeconds {     animation-duration: 0.1s;     -webkit-animation-duration: 0.1s; } .hundredsPlaceMiliSeconds {     animation-duration: 0.01s;     -webkit-animation-duration: 0.01s; } .onesPlaceMinutes {     animation-duration: 600s;     -webkit-animation-duration: 600s; } /*60 times .second*/ .tensPlaceMinutes {     animation-duration: 3600s;     -webkit-animation-duration: 3600s; } /*60 times .minute*/ .onesPlaceHours {     animation-duration: 36000s;     -webkit-animation-duration: 36000s; } /*60 times .minute*/ .tensPlaceHours {     animation-duration: 360000s;     -webkit-animation-duration: 360000s; } /*10 times .hour*/ Вот таким будет результат: Вы можете увидеть, что сейчас с секундомером все в порядке. Теперь добавьте стили к секундомеру. Модифицируйте HTML и CSS. HTML-файл: <!doctype html> <html> <head>     <title>Stopwatchtitle>     <link rel="stylesheet" href="Style.css" /> head> <body>     <!doctype html>     <html>     <head>         <title>Stopwatchtitle>         <link rel="stylesheet" href="Style.css" />     head>     <body>         <div class="MainContainer">             <div class="stopwatch">                 <div class="box">                     <div class="number tensPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>                 div>                 <div class="box">                     <div class="number onesPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>                 div>                 <div class="box divider">                     <div class="number">:div>                 div>                 <div class="box">                     <div class="number tensPlaceMinutes moveupsix">0 1 2 3 4 5 6div>                 div>                 <div class="box">                     <div class="number onesPlaceMinutes moveuptens">0 1 2 3 4 5 6 7 8 9div>                 div>                 <div class="box divider">                     <div class="number">:div>                 div>                 <div class="box">                     <div class="number tensPlaceSeconds moveupsix">0 1 2 3 4 5 6div>                 div>                 <div class="box">                     <div class="number onesPlaceSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>                 div>                 <div class="box divider">                     <div class="number">:div>                 div>                 <div class="box">                     <div class="number onesPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>                 div>                 <div class="box">                     <div class="number tensPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>                 div>                 <div class="box">                     <div class="number hundredsPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>                 div>             div>         div>     body> html> CSS-файл: * {     margin: 0;     padding: 0; } body {     background: url(images.jpg); } .MainContainer {     padding: 200px;     text-align: center; } .stopwatch {     padding: 10px;     background: linear-gradient(top, #222, #444);     overflow: hidden;     display: inline-block;     border: 7px solid #eeeeee;     border-radius: 20px;     box; } .box {     width: 40px;     height: 40px;     font-size: 50px;     overflow: hidden;     position: relative;     float: left; } .number {     width: 40px;     line-height: 40px;     font-family: digital, arial, verdana;     text-align: center;     color: #fff;     position: absolute;     top: 0;     left: 0;     -webkit-animation: moveup 1s steps(10, end) infinite; /* Chrome, Safari, Opera */     animation: moveup 1s steps(10, end) infinite; } .moveuptens {     -webkit-animation: moveuptens 1s steps(10, end) infinite; /* Chrome, Safari, Opera */     animation: moveuptens 1s steps(10, end) infinite; } .moveupsix {     -webkit-animation: moveupsix 1s steps(6, end) infinite; /* Chrome, Safari, Opera */     animation: moveupsix 1s steps(6, end) infinite; } .onesPlaceSeconds {     animation-duration: 10s;     -webkit-animation-duration: 10s; } .tensPlaceSeconds {     animation-duration: 60s;     -webkit-animation-duration: 60s; } .onesPlaceMiliSeconds {     animation-duration: 1s;     -webkit-animation-duration: 1s; } /*1/10th of .second*/ .tensPlaceMiliSeconds {     animation-duration: 0.1s;     -webkit-animation-duration: 0.1s; } .hundredsPlaceMiliSeconds {     animation-duration: 0.01s;     -webkit-animation-duration: 0.01s; } .onesPlaceMinutes {     animation-duration: 600s;     -webkit-animation-duration: 600s; } /*60 times .second*/ .tensPlaceMinutes {     animation-duration: 3600s;     -webkit-animation-duration: 3600s; } /*60 times .minute*/ .onesPlaceHours {     animation-duration: 36000s;     -webkit-animation-duration: 36000s; } /*60 times .minute*/ .tensPlaceHours {     animation-duration: 360000s;     -webkit-animation-duration: 360000s; } /*10 times .hour*/ @-webkit-keyframes moveup {     0% {         top: 0px;     }     100% {         top: -400px;     } } @keyframes moveup {     0% {         top: 0px;     }     100% {         top: -400px;     } } @-webkit-keyframes moveuptens {     0% {         top: 0px;     }     100% {         top: -400px;     } } @keyframes moveuptens {     0% {         top: 0px;     }     100% {         top: -400px;     } } @-webkit-keyframes moveupsix {     0% {         top: 0px;     }     100% {         top: -240px;     } } @keyframes moveupsix {     0% {         top: 0px;     }     100% {         top: -240px;     } } @font-face {     font-family: 'digital';     src: url('DS-DIGI.TTF'); } После применения некоторых стилей результат будет следующим: Теперь добавьте 3 кнопки типа radio для запуска, остановки и сброса секундомера. Эти кнопки будут управлять секундомером. HTML-код: <!doctype html> <html> <head>     <title>Stopwatchtitle>     <link rel="stylesheet" href="Style.css" /> head> <body>     <div class="MainContainer">         <input id="start" name="controls" type="radio" />         <input id="stop" name="controls" type="radio" />         <input id="reset" name="controls" type="radio" />         <div class="stopwatch">             <div class="box">                 <div class="number tensPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>             div>             <div class="box">                 <div class="number onesPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>             div>             <div class="box divider">                 <div class="number">:div>             div>             <div class="box">                 <div class="number tensPlaceMinutes moveupsix">0 1 2 3 4 5 6div>             div>             <div class="box">                 <div class="number onesPlaceMinutes moveuptens">0 1 2 3 4 5 6 7 8 9div>             div>             <div class="box divider">                 <div class="number">:div>             div>             <div class="box">                 <div class="number tensPlaceSeconds moveupsix">0 1 2 3 4 5 6div>             div>             <div class="box">                 <div class="number onesPlaceSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>             div>             <div class="box divider">                 <div class="number">:div>             div>             <div class="box">                 <div class="number onesPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>             div>             <div class="box">                 <div class="number tensPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>             div>             <div class="box">                 <div class="number hundredsPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>             div>         div>                 <div id="stopwatch_controls">             <label for="start">Startlabel>             <label for="stop">Stoplabel>             <label for="reset">Resetlabel>         div>     div> body> html> Теперь измените код CSS для стилизации элементов управления секундомером: * {     margin: 0;     padding: 0; } body {     background: url(images.jpg); } .MainContainer {     padding: 200px;     text-align: center; } .stopwatch {     padding: 10px;     background: linear-gradient(top, #222, #444);     overflow: hidden;     display: inline-block;     border: 7px solid #eeeeee;     border-radius: 20px;     box; } .box {     width: 40px;     height: 40px;     font-size: 50px;     overflow: hidden;     position: relative;     float: left; } .number {     width: 40px;     line-height: 40px;     font-family: digital, arial, verdana;     text-align: center;     color: #fff;     position: absolute;     top: 0;     left: 0;     -webkit-animation: moveup 1s steps(10, end) infinite; /* Chrome, Safari, Opera */     animation: moveup 1s steps(10, end) infinite; } #stopwatch_controls label {     cursor: pointer;     padding: 5px 10px;     background: #eeeeee;     font-family: arial, verdana, tahoma;     font-size: 20px;     border-radius: 0 0 3px 3px; } input[name="controls"] {     display: none; } #stop:checked ~ .stopwatch .number {     animation-play-state: paused;     -webkit-animation-play-state: paused; } #start:checked ~ .stopwatch .number {     animation-play-state: running;     -webkit-animation-play-state: running; } #reset:checked ~ .stopwatch .number {     animation: none;     -webkit-animation: none; } .moveuptens {     -webkit-animation: moveuptens 1s steps(10, end) infinite; /* Chrome, Safari, Opera */     animation: moveuptens 1s steps(10, end) infinite;     /*By default animation will be paused*/     animation-play-state: paused;     -webkit-animation-play-state: paused; } .moveupsix {     -webkit-animation: moveupsix 1s steps(6, end) infinite; /* Chrome, Safari, Opera */     animation: moveupsix 1s steps(6, end) infinite;     /*By default animation will be paused*/     animation-play-state: paused;     -webkit-animation-play-state: paused; } .onesPlaceSeconds {     animation-duration: 10s;     -webkit-animation-duration: 10s; } .tensPlaceSeconds {     animation-duration: 60s;     -webkit-animation-duration: 60s; } .onesPlaceMiliSeconds {     animation-duration: 1s;     -webkit-animation-duration: 1s; } /*1/10th of .second*/ .tensPlaceMiliSeconds {     animation-duration: 0.1s;     -webkit-animation-duration: 0.1s; } .hundredsPlaceMiliSeconds {     animation-duration: 0.01s;     -webkit-animation-duration: 0.01s; } .onesPlaceMinutes {     animation-duration: 600s;     -webkit-animation-duration: 600s; } /*60 times .second*/ .tensPlaceMinutes {     animation-duration: 3600s;     -webkit-animation-duration: 3600s; } /*60 times .minute*/ .onesPlaceHours {     animation-duration: 36000s;     -webkit-animation-duration: 36000s; } /*60 times .minute*/ .tensPlaceHours {     animation-duration: 360000s;     -webkit-animation-duration: 360000s; } /*10 times .hour*/ @-webkit-keyframes moveup {     0% {         top: 0px;     }     100% {         top: -400px;     } } @keyframes moveup {     0% {         top: 0px;     }     100% {         top: -400px;     } } @-webkit-keyframes moveuptens {     0% {         top: 0px;     }     100% {         top: -400px;     } } @keyframes moveuptens {     0% {         top: 0px;     }     100% {         top: -400px;     } } @-webkit-keyframes moveupsix {     0% {         top: 0px;     }     100% {         top: -240px;     } } @keyframes moveupsix {     0% {         top: 0px;     }     100% {         top: -240px;     } } @font-face {     font-family: 'digital';     src: url('DS-DIGI.TTF'); } Финальный результат Источник: http://www.c-sharpcorner.com/UploadFile/75a48f/stopwatch-using-css3/

Верстка сайтов и веб-программирование привлекают большое количество новичков в мир IT. Это связано с достаточно низким порогом вхождения. Количество желающих стать фронтендщиком с каждым годом увеличивается, вследствии чего растут и требования к кандидатам.  Какие технологии необходимо изучить, чтобы стать FrontEnd разработчиком в 2019 году? Давайте разберемся.    HTML5 & CSS3 HTML5 и CSS3 - это фундаментальные технологии, без знания которых не обойтись любому веб-разработчику. С помощью языка гипертекстовой разметки HTML создается разметка (каркас) каждой интернет-страницы. Затем язык стилей CSS преображает сайт и придает ему привлекательный и эффектный внешний вид.  Также необходимо владеть: кроссбраузерной адаптивной версткой, чтобы уметь создавать сайты под мобильные устройства, планшеты и широкоформатные экраны и для различных браузеров; семантической версткой для повышения качества разметки и улучшения поисковой индексации сайта. Хорошее владение HTML и CSS уже позволяет заниматься версткой сайтов и начать зарабатывать деньги. Именно с этих двух базовых технологий начинается путь к профессии FrontEnd разработчика.   Bootstrap 4 Популярная HTML/CSS платформа для разработки адаптивных веб-приложений, которую применяют при создании сайтов и интерфейсов администраторских панелей. Основные преимущества Bootstrap: высокая скорость верстки; кроссбраузерность и кроссплатформенность; наличие хорошей документации, большого сообщества и огромного количества разнообразных обучающих материалов; низкий порог вхождения (необходимо знать лишь основы HTML, CSS, JavaScript и jQuery).      JavaScript Язык программирования, который используется как при разработке клиентской стороны веб-приложения, так и серверной. При помощи JavaScript (сокращенно - JS) можно писать даже десктопные (настольные) и мобильные приложения, используя определенные программные платформы и библиотеки. Этот язык позволяет:  динамически изменять разметку; осуществлять интерактивное взаимодействие с пользователем; анимировать изображения; совершать валидацию форм; управлять мультимедиа и т. д.  Другими словами, JavaScript “оживляет” страницу и добавляет ей функциональности. Хорошее владение данным языком программирования является обязательным для каждого FrontEnd разработчика. Сергей Росоха, Software Architect с 11-летним опыта во FrontEnd/JS, отмечает важность изучения алгоритмов и структур данных на JavaScript:  “JavaScript давно уже используется не только для разработки динамических интерфейсов пользователя, но и для написания достаточно сложной бизнес-логики. Поэтому знание алгоритмов и структур данных становится критичным для JS-разработчиков. ” (источник) JavaScript использует официальный стандарт ECMAScript (сокращенно - ES), который подразумевает определенное формальное описание синтаксиса, базовых объектов и алгоритмов. На данный момент существует множество различных версий ES. Работодатели чаще всего требуют знание ES6.  Однако, вначале необходимо изучить чистый JavaScript и лишь потом вникать в новые стандарты. Как ни крути, а классику надо знать. Благодаря хорошему владению JS можно быстро разобраться в любой версии ES и затем освоить любой фреймворк или библиотеку.    Фреймворки JavaScript Это инструменты, с помощью которых создаются динамические веб/мобильные/десктопные приложения на языке JavaScript. Они ускоряют разработку веб-приложений и предусматривают четко структурированную организацию кода, повышая его качество и чистоту.  Самыми популярными фреймворками для фронтенд-разработки можно назвать Vue.js, React и Angular. Каждый из них предназначен для решения своего спектра задач и имеет различную степень сложности: Vue.js - самый легкий (но и с наименьшим сообществом), React - средней сложности, Angular - высокой сложности. Стоит сконцентрироваться на глубоком изучении одного фреймворка, но в то же время очень рекомендуется знать особенности и сферу применения всех вышеперечисленных технологий. Какой фреймворк все же выбрать? Мнения на этот счет расходятся. Инструментарий выбирается индивидуально под проект и трудно предугадать, какие задачи вам нужно будет решать. Мы рекомендуем Angular.       CSS препроцессоры  CSS препроцессор - это программа, которая имеет свой собственный синтаксис, но может сгенерировать из него CSS код. Самыми популярными считаются SASS, Stylus, LESS и PostCSS, однако, наибольшее комьюнити имеет именно SASS. Препроцессоры предназначены для: ускорения процесса написания кода; упрощения чтения кода и дальнейшей его поддержки; минимизации рутинной работы при написании кода. Для повышения эффективности написания CSS кода вполне достаточным будет изучение лишь одного препроцессора.   Git Самая популярная распределенная система управления версиями, которая позволяет вести историю разработки проекта с возможностью доступа к каждой сохраненной версии. Таким образом, если в процессе создания программный продукт стал неправильно функционировать, есть возможность вернуться к предыдущей рабочей версии вместо длительных поисков ошибок.  Также системы управления версиями являются неотъемлемым инструментом командной разработки, который дает возможность девелоперам работать над одним проектом одновременно, сохраняя внесенные изменения. Заодно удобно отслеживать выполнение задач каждым членом команды. Очень важный инструмент для любого IT-разработчика.     jQuery Небольшая, быстрая и многофункциональная JavaScript-библиотека, для работы с которой необходимо владеть HTML, CSS и JavaScript на базовом уровне. Она призвана упростить программирование на JS. Данная библиотека представляет объемные решения распространенных задач в виде методов, которые вызываются одной строчкой кода.  Несмотря на то, что jQuery теряет популярность, уступая место фреймворкам JS, большое количество сайтов все еще используют эту библиотеку. FrontEnd разработчик, работающий в офисе, не всегда создает новые веб-сайты - необходимо поддерживать и обновлять уже существующие. Тут без знания jQuery никак не обойтись.   JavaScript Core (DOM, AJAX, JSON) DOM (Document Object Model) - объектное представление исходного HTML-документа. Ключевым является понятие DOM-дерева, которое описывает структуру страницы. С помощью объектной модели JavaScript получает полную власть над HTML-документом: возможность редактировать, удалять и добавлять элементы и атрибуты HTML, менять CSS код и т. д.  AJAX (Asynchronous JavaScript And XML) - это синтез технологий JavaScript и XML, который фактически представляет собой комбинацию: встроенного в браузер XMLHttpRequest-объекта (чтоб запрашивать данные с веб-сервера); JavaScript и HTML DOM (чтобы отображать или использовать данные). AJAX позволяет веб-страницам совершать асинхронное обновление, обмениваясь данными с веб-сервером. Благодаря этой технологии страница не нуждается в перезагрузке - обновляется лишь конкретная ее часть (вспомните ленту новостей в социальных сетях). JSON (JavaScript Object Notation) - это общий формат обмена данными. Позволяет совершать обмен информацией между программными продуктами, написанными на разных языках. Таким образом, клиент, использующий JavaScript, может легко передавать данные на сервер, который реализован с помощью Ruby/Java/PHP. Все три технологии являют особую ценность для каждого веб-разработчика и раскрывают организацию работы интернет-приложения.      БЭМ “Блок, Элемент, Модификатор” - методология, предусматривающая компонентный подход к разработке веб-страниц, в основе которого лежит принцип разделения интерфейса на независимые блоки. Подход БЭМ позволяет повторно использовать существующий код в создании других страниц с сохранением всех его свойств (размеры, шрифт, цвет и т. д.).       Webpack Мощный сборщик модулей, который позволяет скомпилировать в один файл несколько разных модулей. Используется во время работы над объемными проектами. Успешно применяется как во фронтенд-разработке, так и при создании бэкенд-приложений.   Flex и Grid CSS Технологии верстки надежных адаптивных веб-страниц, которые позволяют легче создавать динамические сайты и удобнее структурировать их содержимое. Лучше всего Flex-верстку в действии показывает интерактивный сайт flexboxfroggy.com, а Grid-верстку - cssgridgarden.com.   Gulp / Grunt Системы сборки, которые автоматизируют рутинные задачи разработчиков: минификацию кода, оптимизацию изображений, тестирование, анализ качества кода и прочее. Подходят при разработке небольших проектов.    TypeScript Кроссплатформенный строго типизированный язык, который является расширением JavaScript. Строгая типизация позволяет уменьшить количество потенциальных ошибок в исходном коде, написанном на TypeScript. Также, этот язык реализует концепции, которые близки объектно-ориентированным языкам, таким как C#, Java и подобным. TypeScript повышает скорость и удобство написания сложных комплексных программ, вследствии чего их становится легче поддерживать, масштабировать и тестировать.     SVG Язык разметки масштабируемой векторной графики. Изображения на странице, сделанные с помощью SVG, корректно отображаются на экранах с различным разрешением, не теряя при этом своего качества, в отличии от традиционных растровых .jpeg, .png и других.    Английский язык Знание английского языка является одним из основных требований к фронтенд-разработчику, поскольку большое количество полезной информации находится именно на англоязычных сайтах. Уровень чтения технической документации будет достаточным для комфортного пользования иностранными ресурсами.      Итоги FrontEnd разработчик - достаточно универсальный боец в мире веб-разработки. Он должен уметь и верстать, и создавать логику работы клиентской части, и понимать работу серверной части веб-приложения. Для освоения такого обширного инструментария стоит запастись временем, терпением и упорством. Перечисленные в статье средства разработки сайтов также имеют аналоги, поскольку для решения разных задач подходят разные веб-инструменты. Однако мы выбрали самые популярные и эффективные из них.    Если у вас остались вопросы о последовательности и необходимости изучения тех или иных технологий, ответы вы можете найти в видео Как стать FrontEnd разработчиком, в котором подробно рассматриваются основные технологии создания клиентских веб-приложений.  Для тех, кто хочет стать FrontEnd разработчиком, на ITVDN создана комплексная программа обучения, которая включает в себя 35 видео курсов. Желаем вам успехов в достижении ваших целей!   Оставайтесь с ITVDN!    

Введение В этой статье мы рассмотрим некоторые инструменты, книги и ресурсы о том, как начать обучение веб-разработке. Эта статья направлена на тех, кто уже работал с HTML, CSS и JavaScript. Зачем учиться веб-разработке? Одно из главных преимуществ обучения веб-разработке – Вы получите навыки работы с большим количеством клиентов, проектов, а также научитесь контролировать собственный рабочий процесс. С чего начать? Ниже мы рассмотрим четыре языка программирования, которые стоит рассматривать прежде всего. HTML5 HTML5 – последняя спецификация HTML. Он идет рука об руку с CSS3, новейшим образцом CSS. Новая спецификация HTML позволяет создавать приложения для браузера и мобильного устройства. CSS3 С помощью CSS3 Вы сможете сделать разметку более стильной и профессиональной. Если Вы чувствуете себя достаточно опытным в CSS3, Вам стоит прочитать SVG книги. LESS LESS – это надстройка CSS, она расширяет язык CSS, добавляет в него динамику. Он вводит переменные, операции, function-like элементы. Возможность писать таблицы стилей упростит и улучшит написание кода. Less работает в браузере, в Node и Rhino. SASS Таблицы стилей становятся больше и сложнее. В работе с ними может помочь препроцессор. Sass позволяет использовать функции, не существующие в CSS, например, переменные, возможность наследования и многое другое. Составители для LESS и SASS LESS и SASS - надстройки, поэтому Вам понадобится компилятор для преобразования результата. CodeKit CodeKit – одно из лучших приложений для разработчиков и дизайнеров, работающих на Mac. CodeKit следит за всем, что Вы создаете. Приложение может исправлять ошибки и составлять код самостоятельно. Prepros Prepros – GUI-компилятор, предназначенный для предварительной обработки таких языков: Compass, LESS, Sass, Jade, Stylus, Slim, Markdown, CoffeeScript и Haml. Prepros также может обновить браузер, когда Вы меняете свой код в редакторе. С Prepros можно работать и тем, у кого система Windows. Текстовые редакторы для веб-разработчиков Sublime Text Sublime Text – текстовый редактор для кода разметки. В нем легкий пользовательский интерфейс, он удобен в эксплуатации. Atom Этот современный текстовый редактор начал пользоваться успехом совсем недавно, и этот проект пока не идеален. Он был создан веб-сервисом GitHub. Atom состоит из 50 модулей вокруг небольшого ядра с открытым кодом. Его цель - глубоко расширяемая система, стирающая различие между пользователем и разработчиком. Обучение веб-разработке с помощью книг Book Apart управляют люди, знающие веб лучше, чем 99% пользователей. Содержание этих книг всегда наивысшего качества, их легко читать, и они обеспечивают понимание процесса создания веб-сайтов. HTML5 для веб-дизайнеров Спецификация HTML5 состоит из 900 страниц, достаточно трудных для понимания. HTML5 для веб-дизайнеров - 85 интересных страниц. Когда Вы закончите ее читать, Вы не будете задавать себе вопрос, что такое HTML5, как он работает, или что нужно делать, чтобы стать лучшим веб-разработчиком. Эта небольшая книга рассказывает про все в легкой и сжатой форме. CSS3 для веб-разработчиков Если Вы не знаете, с чего начинать обучение CSS3, купите книгу Дэна Седерхольма (Dan Cederholm) (соучредитель Dribbble). Она содержит информацию о расширенных функциях, селекторах, а также о CSS3-анимации. Sass для веб-дизайнеров Sass может помочь создать интерактивные элементы. Дэн Седерхольм (Dan Cederholm) выпустил книгу, рассказывающую о Sass — процессоре предварительной обработки CSS. Это поможет нам взглянуть на CSS с другой стороны. Адаптивный веб-дизайн Чем больше предприятий создают страницы в интернете, тем больше спрос на разработчиков, способных написать код на современных языках программирования. Автор книги по адаптивному веб-дизайну - Итан Маркотт (Ethan Marcotte). Источник: http://codecondo.com/web-designers-want-become-web-developers/

Введение Все мы уже знаем (ну или что-то слышали об) основных правила применения элементов разметки HTML5. Появилось много "плюшек" и “вкусностей” в новой спецификации HTML. Вместе с тем, появились новые элементы разметки. Но не все помнят/знают, как их использовать правильно. Коротко остановлюсь на главных нововведениях HTML5: Новые элементы: header, footer, section, article, video, audio, progress, nav, meter, time, aside, canvas; Новые значения для атрибута type тега ; Новые атрибуты HTML5 для элементов, такие как: dragable, contenteditable, hidden, contextmenu, data-*, dropzone, role, spellcheck[8] и т.д.; Атрибуты class, dir, id, lang, style, tabindex, title, существовавшие в HTML4, теперь можно применять ко всем елементам HTML разметки; Устаревшие элементы HTML страницы, которые частично поддерживаются и не рекомендуются к ипользованию: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt, u. Итак,  более детально рассмотрим, как же правильно использовать основные новые теги. Элемент Элемент <main>содержит главную информацию вашего сайта. Такие повторяющиеся элементы как логотип, окно поиска, меню навигации не рекомендуется вкладывать в <main>. Также не стоит помещать сам элемент <main> внутрь элементов <article>, <aside>, <header>, <footer> или <nav>. Элемент В элемент <article> следует помещать тот контент, который может быть удален без ущерба для всего сайта. К примеру, краткое описание новостей, рекламный баннер, статья, комментарии. Можно вкладывать <article> в <article>, что будет связывать вложенные элементы <article> с родительским. Элемент Элемент <header>, как  понятно из названия, используется для оглавления отдельного контента или всей страницы. Должен содержать  заглавие, дату статьи и т.д. Элемент Элемент <footer> служит для предоставления информации об авторе статьи/страницы, ссылки на авторские права и т.д. Обычно является прямым потоком тега <body> (помещается сразу за элемент <body>). Элемент Этот элемент содержит информацию об окружающем контенте, дополнительную информацию пользователю. Может содержать такой элемент, как <nav>, сноски, ссылки и т.д. Элемент   Предназначен для предоставления контактной информации о статье или всей странице. Стоит отметить, что этот элемент часто помещают в , для размещения ссылок для связи с авторами страницы. Элемент Элемент <nsfw> (англ. - Not Safe For Work – небезопасно для отработки) используется для размещения на странице контента сомнительного характера. Часто этот тег используют для размещения порнографии. Чтобы браузер не отображал такой контент, используют CSS код  nsfw {display: none ;} Элемент Элемент предназначен для размещения видео контента на странице. Для корректного отображения контента стоит прописать дополнительно атрибуты width, height, src, controls. Ваш код будет выглядеть примерно так:   <video width="840" height="480" src="../video/myVideo.mp4" controls> video>   Если же Вы хотите разместить у себя на странице видео, которое расположено на сайте youtube.com. Вам стоит зайти на страницу c видео, правой кнопкой мыши нажать на видео, и из выпадающего меню выбрать “Получить код для встраивания”. Копировать код из “попап” окошка. В разметке вашего сайта, в нужном вам месте, кликнуть правой кнопкой мыши и выбрать “Вставить”. У вас получится примерно такой код:   <iframe width="854" height="510" src="https://www.youtube.com/embed/_giinWWrNlQ" frameborder="0" allowfullscreen>iframe>   В свою очередь, элемент > создает область, которая позволяет загружать любой документ в себя. Элемент Элемент <audio> позволяет добавить на страницу аудио дорожки. Также в HTML5: Реализована возможность добавления на станицу геолокационных карт, а также определения местоположения пользователя в данный момент. Теперь мы можем рисовать с помощью технологии canvas. А также использовать 3D графику. Стало возможным просто перетягивать документы и прикреплять к письму. И еще много новых "плюшек", которые вы можете узнать и научиться их использовать, пройдя наши курсы в учебном центре CyberBionic Systematics. Всем удачи и хорошего кода)