Случайны выбор дневника Раскрыть/свернуть полный список возможностей


Найдено 10825 сообщений
Cообщения с меткой

html - Самое интересное в блогах

Следующие 30  »
tes21

Видеохостинги, перешедшие на HTML5, откуда можно брать код для вставки на Лиру

Воскресенье, 21 Августа 2016 г. 14:46 (ссылка)

Это цитата сообщения меня_зовут_Любаша_К Оригинальное сообщение

Видеохостинги, перешедшие на HTML5, откуда можно брать код для вставки на Лиру

Счетчик посещений Counter.CO.KZ - бесплатный счетчик на любой вкус!


Здравствуйте...

Сегодня урок по видео роликам, вернее про видеохостинги, которые уже предлагают коды, которые работают на HTML5, а не на Adobe Flash Player. В прошлом своём уроке я показала вам код видео плеера, куда можно вставлять ролики в формате mp4. Но загружать на Лиру ролики можно не более 8 Мб, поэтому сегодняшний урок будет вам полезен.

Итак, что такое видеохостинг?


урок провела
Любаша К

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

[Перевод] Зачем нам jQuery?

Пятница, 19 Августа 2016 г. 18:00 (ссылка)

Здравствуйте, дамы и господа! Вот уже без малого десять лет минуло с первого релиза библиотеки jQuery, и мы решили отряхнуть пыль веков с классики. Подумываем о выпуске третьего издания гусарской баллады об этой библиотеке:





Чтобы пояснить, чем она нас привлекает в эпоху Node и ES6 (у нас в ассортименте и этого добра навалом) предлагаем познакомиться со статьей Коди Линдли, вышедшей вскоре после вышеупомянутого третьего издания



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



В этой статье хотелось бы всем еще раз рассказать, что же такое jQuery, поскольку сегодня она не менее актуальна, чем на момент появления. Вопрос о ее важности нужно соотнести с исходным назначением всего этого решения (то есть, самого API jQuery), а не с браузерными багами или недостающими возможностями. Если исходить из чего-то другого, то мы рискуем встать на позиции, с которых бракуется любая абстракция, которая может быть не абсолютно необходимой, но, все-таки, мощной и полезной.



Прежде чем я начну пылко отстаивать честь jQuery, давайте вернемся к ее истокам, чтобы всем стало понятно, «что» такое jQuery, и «зачем» она нужна.



Что такое jQuery?



jQuery – это библиотека JavaScript (т.e., она написана на JavaScript), предназначенная для абстрагирования, выравнивания, исправления и упрощения скриптинга при работе с узлами HTML-элементов в браузере или для работы в браузере без графического интерфейса.



Итак:





Все это оборачивается в более простой и менее корявый API, нежели нативный API DOM – вот вам и библиотека jQuery.



Теперь позвольте объяснить, что я понимаю под “скриптингом HTML-элементов”. При помощи jQuery совершенно тривиально решаются задачи вроде «визуально скрыть второй элемент h2 в документе .html. Код jQuery для такой задачи выглядел бы так:



jQuery('h2:eq(1)').hide();


Давайте немного разберем эту строку с кодом jQuery. Сначала вызывается функция jQuery(), ей мы передаем специальный CSS-селектор библиотеки jQuery, выбирающий второй элемент h2 в HTML-документе. Затем вызывается метод jQuery.hide(), скрывающий элемент h2. Вот как прост и семантически выразителен код jQuery.



Теперь сравним его с нативным DOM-кодом, который потребовалось бы написать, если бы мы не работали с jQuery.



document.querySelectorAll('h2')[1].style.setProperty('display','none');


Какой вариант было бы удобнее написать? А читать, а отлаживать? Также учтите, что вышеприведенный нативный DOM-код предполагает, что все браузеры поддерживают использованные здесь методы DOM. Однако оказывается, что некоторые старые браузеры не поддерживают querySelectorAll() или setProperty(). Поэтому вышеприведенный код jQuery вполне нормально работал бы в IE8, а нативный код DOM вызвал бы ошибку JavaScript. Но, все-таки, даже если бы обе строки кода работали повсюду, какую из них было бы проще читать и писать?



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



jQuery = JavaScript?



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



Первым делом давайте оговоримся, что JavaScript – это не jQuery и даже не сам DOM API. jQuery – это сторонняя свободная библиотека, написанная на JavaScript и поддерживаемая целым сообществом разработчиков. Кроме того, jQuery не относится к числу стандартов тех организаций (напр., W3C), которые пишут спецификации HTML, CSS или DOM.



Не забывайте, что jQuery служит прежде всего как «сахар» и используется поверх DOM API. Этот сахар помогает работать с интерфейсом DOM, который печально известен своей сложностью и обилием багов.



jQuery – это просто полезная библиотека, которой можно пользоваться при написании сценариев для HTML-элементов. На практике большинство разработчиков прибегают к ней при DOM-скриптинге, поскольку ее API позволяет решить больше задач меньшим количеством кода.



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



Два краеугольных камня jQuery



Две базовые концепции, на которых основана jQuery, таковы: “найди и сделай” и “пиши меньше, делай больше.”

Две этих концепции можно развернуть и переформулировать в виде следующего утверждения: первоочередная задача jQuery заключается в организации выбора (то есть, нахождении) или в создании HTML-элементов для решения практических задач. Без jQuery для этого потребовалось бы больше кода и больше сноровки в обращении с DOM. Достаточно вспомнить рассмотренный выше пример с сокрытием элемента h2.



Следует отметить, что круг возможностей jQuery этим не ограничивается. Она не просто абстрагирует нативные DOM-взаимодействия, но и абстрагирует асинхронные HTTP-запросы (т.н. AJAX) при помощи объекта XMLHttpRequest. Кроме того, в ней есть еще ряд вспомогательных решений на JavaScript и мелких инструментов. Но основная польза jQuery заключается именно в упрощении HTML-скриптинга и просто в том, что с ней приятно работать.



Еще добавлю, что польза jQuery – не в успешном устранении браузерных багов. «Краеугольные камни» нисколько не связаны с этими аспектами jQuery. В долгосрочном отношении самая сильная сторона jQuery заключается в том, что ее API абстрагирует DOM. И эта ценность никуда не денется.



Как jQuery сочетается с современной веб-разработкой



Библиотеке jQuery уже десять лет. Она создавалась для той эпохи веб-разработки, которую мы уже безусловно миновали. jQuery не является незаменимой технологией для работы с DOM или выполнения асинхронных HTTP-запросов. Практически все, что можно сделать с jQuery, можно сделать и без нее. А если вас интересует всего лишь пара мелких простых взаимодействий с DOM в одном-двух современных браузерах, то возможно, лучше будет воспользоваться нативными DOM-методами, а не jQuery.



Однако, при любых разработках, связанных с BOM (браузерной моделью документа) или DOM, а не только с косметическими взаимодействиями, следует пользоваться jQuery. В противном случае вы станете изобретать велосипед (т.e. элементы абстракций jQuery), а потом испытывать его на всевозможных дорожках (т.e в мобильных браузерах и браузерах для ПК).



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



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



Причем jQuery совершенствуется, и с ее помощью программисты могут работать толковее и быстрее. Такова ситуация сегодня, так было и на момент создания библиотеки. Сказать «мне не нужна jQuery» — все равно, что утверждать «обойдусь без lo-dash или underscore.js». Разумеется, можно без них обойтись. Но об их ценности судят не по этому.

Их ценность — в API. Из-за излишней сложности разработка может замедляться. Поэтому нам и нравятся такие вещи как lo-dash и jQuery – с ними все упрощается. А поскольку jQuery облегчает выполнение сложных задач (например, писать сценарии для HTML), она не устареет.



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



Приложение – важные факты об jQuery



Наконец, перечислю некоторые важные факты, касающиеся jQuery.




  • Библиотеку jQuery написал Джон Резиг (John Resig), ее релиз состоялся 26 августа 2006. Джон признавался, что написал этот код, чтобы “произвести революцию во взаимодействии JavaScript с HTML”.

  • jQuery считается наиболее популярной и востребованной современной библиотекой JavaScript.

  • jQuery – свободное ПО, предоставляемое по лицензии MIT.

  • Существует две версии jQuery. Версия 1.x поддерживает Internet Explorer 6, 7 и 8\, а 2.x поддерживает только IE9+. Если вам требуется поддержка IE8, то придется работать с версией 1.x. Но это нормально, обе версии по-прежнему активно разрабатываются.

  • Минимальная версия jQuery 2.x имеет размер 82kb. В архиве Gzip — около 28k.

  • Минимальная версия jQuery 1.x имеет размер 96kb. В архиве Gzip — около 32k.

  • Исходный код jQuery доступен на Github.

  • На основе исходного кода с Github можно создать собственную версию jQuery.

  • jQuery можно установить при помощи менеджера пакетов bower или npm (т.e. $ bower install jquery or npm install jquery).

  • У jQuery есть официальная сеть CDN, в которой можно взять различные версии jQuery.

  • jQuery имеет простую архитектуру на основе плагинов, поэтому любой желающий может добавлять в нее собственные методы.

  • jQuery обладает обширным набором плагинов. Можно приобрести высококачественные плагины для enterprise-разработки (напр. Kendo UI) или воспользоваться не менее классными бесплатными (напр. Bootstrap).

  • jQuery можно разбить на категории (в соответствии с разбиением документации API ).




  • ajax

  • attributes

  • callbacks object

  • core

  • CSS

  • data

  • deferred object

  • dimensions

  • effects

  • events

  • forms

  • internals

  • manipulation

  • miscellaneous

  • offset

  • properties

  • selectors

  • traversing

  • utilities





Актуальность книги






































Проголосовало 95 человек. Воздержалось 35 человек.





Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.


Original source: habrahabr.ru.

https://habrahabr.ru/post/308134/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
tes21

Как вставить открытку (картинку) в личное сообщение на ЛиРу | Brave Defender

Четверг, 18 Августа 2016 г. 17:41 (ссылка)
bravedefender.ru/post208075648/

Наверное, об этом все уже знают, но напишу еще раз – для потомков. В форму
Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

Трёхпозиционный checkbox (aka tristate) без скриптов и смс

Четверг, 18 Августа 2016 г. 13:04 (ссылка)

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



Пример элемента на gmail:







Беглое гугление не выдало мне готового решения без JavaScript. Точнее, я нашёл парочку, но они предлагали для изменения состояния кликать в конкретное место на переключателе, что совсем неудобно. Хотя в основном предлагают использовать либо свойство DOM indeterminate у чекбокса, либо написание компонента на скриптах, начиная с jQuery, заканчивая Angular. Но мне как-то не хотелось ради такой простой задачи подключать JS вообще.



Ещё из пожеланий — мне хотелось иметь рабочий кликабельный label, а так как состояния три, то чтобы этот label показывал текущее состояние.



Как я это реализовал? В основе — обычные радио-инпуты спозиционированые абсолютно в верхний левый угол. А вся магия заключается в изменении z-index в зависимости от текущего выбранного элемента. Кусочек из CSS:

.tristate > input[type="radio"]:checked + input[type="radio"] {
z-index: 10;
}


Иконка и текущий лейбл стилизуется подобными правилами:

.tristate > input[type="radio"]:checked + i + label,
.tristate > input[type="radio"]:checked + i + label + label {
display: none;
}

.tristate-checkbox > input[type="radio"]:checked + input[type="radio"] + i {
/* ... */
}


Осталось всё немного застилизовать, и получаем два симпатичных UI-компонента, как на картинке к посту:



Демо на CodePen



Работоспособность проверял в FF, Chrome, IE9+.
Original source: habrahabr.ru.

https://habrahabr.ru/post/308034/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
bo4kov

Бесплатно | Видеокурс - Верстка сайта | Михаил Русаков | Web-программирование, Дизайн сайтов

Суббота, 13 Августа 2016 г. 09:18 (ссылка)
info-kurs.net/product/verstka-sayta/


Бесплатный видеокурс - Верстка сайта - научит вас создавать макет сайта на html и css языках программирования.

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

HTML и CSS для владельцев сайтов. Верстка для не программистов

Четверг, 11 Августа 2016 г. 12:39 (ссылка)

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











Введение в HTML





Основа любого сайта – это HTML код. Чтобы посмотреть, как он выглядит, откройте браузер Chrome (здесь и далее мы будем смотреть все в нем), нажмите правой кнопкой мыши по странице и в контекстном меню выберите пункт «Просмотр кода страницы» (View Page Source).



1



Все это все такое – это и есть HTML код. Если начать в него всматриваться, то будет видно, что все непонятное находится в треугольных скобках <так>, иногда со слешем .



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



Это выглядит примерно так:

<объект1>
<объект2> …
<объект3>
<объект4> …






Знаки табуляции здесь только для примера, вложенность объектов зависит только от «открытия» и «закрытия» тега.



Тег, который был открыт раньше, должен закрываться позже. И наоборот: если тег открыт позже, то должен закрыться раньше. Не должно быть пересечений в открытии и закрытии тегов.



Так правильно:

  




Так ошибка:

  




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



Основные теги



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



– это служебные теги, обозначающие начало страницы. Они, обычно, не отображают никакой информации в браузере. Они используются для того, чтобы внутри с помощью других тегов указать SEO параметры (keywords, description), заголовок страницы (title), Favicon, подключить файлы CSS и т.п. Если нужно отредактировать указанные параметры, то искать их нужно именно в части .



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



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

Так правильно:



Так ошибка:





– тег для ссылки. Текст (или картинку), который вы хотите сделать ссылкой, нужно разместить после открывающего тега и перед закрывающим .

Например:

Digistr.ru


В браузере отобразится текст «Digistr.ru», который будет ссылкой на страницу «http://digistr.ru/».



– тег заголовка H1. Когда сайт находится в продвижении, требуется, чтобы он был на странице, причем в единичном экземпляре. Это самый главный заголовок страницы. Остальные заголовки могут находится в тегах от h2 до h6. Чем больше номер, тем, стандартно, меньше заголовок.



– это текстовый тег для создания абзаца текста. Каждый абзац размещается между тегами

.




– тег переноса строки. В HTML коде переносы строк игнорируются. Чтобы разделить текст на абзацы используется тег

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

Правильно:

Строка 1

Строка 2.


Ошибка:

Строка 1

Строка 2.




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



Практически все теги (кроме body, head и, желательно, h1) можно использовать в любых количествах на странице. Из этих тегов и создается структура страницы.



Тегов немного больше, весь список можно найти здесь. Наиболее часто используемые такие теги:



a, b, br, button, div, em, embed, form, h1-h6, i, img, input, label, ul или ol c li, p, select, small, span, strong, table, tr, td, textarea, u. Всего около 30 штук.




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



Чаще всего, в готовой странице теги выглядят совсем иначе, чем в примерах. Это из-за того, что для HTML тегов добавлено нестандартное оформление с помощью CSS. HTML расставляет элементы, а CSS их оформляет.



Перейдем теперь к оформлению.





Введение в CSS



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




В параметре href указывайтся путь к файлу со стилями.



CSS конструкции имеют следующий вид:

Название_объекта_для_оформления {
Параметр_оформления1 : значение параметра ;
Параметр_оформления2 : значение параметра ;
}




Нам нужно указать, какой элемент мы хотим оформить, а в фигурных скобках задать это оформление с помощью параметров и их значений через двоеточие. Параметры разделяем между собой точкой запятой. Пробелы и табуляция здесь тоже не важны. Например, нам нужно сделать все абзацы текста красными. Тег абзаца «p» (Пэ латинское).



Тогда CSS код для такого оформления будет следующим:

p { color: red;}




Если мы хотим сделать заголовок

красным, тогда код такой:

h1 {color: red;}




Так мы указываем тег и его оформление. Здесь мы использовали параметр оформления — color, который позволяет редактировать цвет элемента. Как указывать цвет, смотрите здесь. Чаще всего используется шестнадцатеричный код через решетку. Для красного цвета это будет так:

h1 {color: #FF0000;}




Классы и идентификаторы



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



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



Классы указываются так:








Так у нас есть возможность указать отдельное оформление для тегов

, у которых указан класс green-text.



Для этого в CSS нужно указать, какой объект мы оформляем через точку.

.green-text {
color: green;
}




Для идентификаторов используется решетка в CSS и параметр id для тега.

HTML:




CSS:

#logo {
width: 100px;
}




А вот так будет неправильно:








Потому что id должен быть один на странице, а здесь два «green-text». Вот так правильно, так как разных ID может быть много на странице:






но логически некорректно, так как для однотипных объектов, которых несколько, лучше использовать class.



ID чаще всего используется для определения уникальных частей страницы, например в таком виде:


Содержание страницы






Наследование и переопределение CSS стилей



Порядок записи стилей в .css файле может быть произвольным. Для каждого объекта стили применяются в порядке их указания.

Пример:

h1 {color: red;}
h2 {color: green;}
h1 {font-size: 32px;}




В этом случае объекту H1 применится два параметра – color и font-size. Несмотря на то, что они указаны в разных блоках. То есть второй блок дополняет стили первого, или наследует стили первого блока. Так H1 унаследовал свойство red из предыдущего блока.



Но во втором блоке можно и переопределить стили первого блока. Например:

h1 {color: red;}
h2 {color: green;}
h1 {font-size: 32px; color: yellow;}




В этом случае цвет H1 будет yellow, так как он указан повторно и следует после цвета red. Для тега используется последний указанный стиль.



Именно этот принцип позволяет нам «перекрашивать и двигать» дизайн сайта. В конце файла стилей мы можем дописать свои стили, которые переопределят предыдущие стили тега.



Вложенность тегов и объектов в CSS, селекторы



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

, нужно указать больший размер шрифта.



Именно для этого страница, обычно, делится на разные логические части в HTML.

Например, у нас есть такой код:



Абзац 1


Абзац 2








Если мы, как и ранее, укажем такой стиль:

p {font-size: 32px;}




То у нас все элементы будут шрифтом в 32px. Но нам нужно, чтобы только телефон был такого размера.



Для этого в CSS мы можем использовать указание тегов с учетом вложенности. Например:

#header .phone p {font-size: 32px;}




Таким образом, размер шрифта изменится только у тега

, который находится в классе .phone, который, в свою очередь находится в элементе с id равным header. И наоборот, CSS будет искать сначала элемент #header, в нем должен быть элемент .phone, а далее элемент p. Параметры объектов указываются через пробел.

Развернутый пример:

#header .phone p {font-size: 32px;}
#content p {color: silver;}
#footer .copyright {font-size: 10px;}




Здесь телефон будет размером 32px, абзацы в содержании страницы будут серого цвета, а копирайт будет шрифтом в 10px.



Такие последовательности тегов, классов и идентификаторов называются селекторами. От слова select – выбрать. Они выбирают элементы на странице и указывают им стили. Подробнее о них здесь.



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

Например:

#content p, #footer .copyright {color: silver;}
#footer .copyright {font-size: 10px;}


В этом случае копирайт будет серого цвета (наследуется из правила выше) и размером шрифта в 10px.



Популярные CSS параметры



margin, border, padding – внешние отступы от объекта, граница объекта и отступы внутри объекта, соответственно.

Выглядит это примерно так.

2

Здесь черной рамкой и оформлением border выделен сам объект, margin – это отступ вокруг него, а padding – внутри него.

HTML:




CSS:

#header {
background: #F8CB9C;
padding: 1px;
}
#logo {
margin: 10px;
padding: 20px 30px;
background: #C1CD89;
border: 3px solid black;
}
#logo img {
border: 1px dashed black;
}






Здесь зеленый отступ создан за счет padding в элементе #logo. Весь элемент залит зеленым цветом, но его содержание начинается не от края за счет padding, получилась рамка для наглядности. У этого же элемента #logo указан margin по 10px со всех сторон, что и растянуло внешний блок, получился второй отступ из-за margin. У самого же элемента #logo черная рамка в 3px создается параметром border.



display – способ отображения элемента. Наиболее популярные значения:


  • none – не отображать элемент. Используется, когда нужно что-то «спрятать/отключить» на странице.

  • block – элемент будет растянут на всю ширину элемента, в который он вложен. Если элемент находится в теге , то он растянется на всю страницу. Таким образом, все остальные элементы после него будут отображаться с новой строки.

  • inline-block – элемент будет такого размера, который требуется для содержимого этого элемента, в строку можно будет расположить несколько таких элементов (зависит от размера строки и элементов). Кроме этого, к такому объекту можно применить свойства margin и padding, аналогично типу block.

  • inline – отображать элемент как строчный. Строчные элементы не имеют отступов. Например, слова в предложении можно считать строчными элементами. Они имеют размер равный своему содержимому, переносятся по строкам и следуют друг за другом. Верхние margin и padding к таким элементам применить нельзя.







position – позиционирование элемента. Имеет следующие популярные варианты:


  • absolute – абсолютное. Отсчет позиции начинается с начала страницы, либо относительно объекта, в который он вложен, если у него свойство position равно relative. Чаще всего используется в связке именно с relative внешним объектом. Например

    HTML:


    Распродажа!




    CSS:

    .product-photo {
    position: relative;
    }
    .label-sale {
    position: absolute;
    top: 0px;
    right: 0px;
    }


    Элемент .label-sale будет позиционироваться относительно .product-photo, так как у него позиционирование relative. Top – указывает, чтобы отсчет велся сверху. 0 – значит, что элемент будет в самом верху. Аналонично «right: 0px» – справа. Так делаются подписи новинок, распродаж и прочего в списках товаров. Каждый label-sale находится справа вверху именно у своего товара.

    Для отчета снизу используется параметр bottom, слева – left. Чаще всего, используется bottom или top, right или left. То есть указывается только один способ отсчета по горизонтали и вертикали (слева или справа и сверху или снизу, соответственно).

  • relative – относительное. Позиционирование элемента относительно того, где он расположен в данный момент. Используется, когда элемент нужно немного «подвинуть».

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







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

background, border, clear, color, display, float, font-family, font-size, font-style, font-weight, height, left, margin, overflow, padding, position, right, text-align, text-decoration, top, width.




Как быстро редактировать стили



В браузере Chrome кликните на любой элемент страницы правой кнопкой мыши, в появившемся меню выберите «Просмотрет код» или «Инспектировать элемент».

Внизу откроется панель, где будет виден HTML код страницы. В нем будет подсвечена строка с элементом, по которому кликали (1).



4



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



Справа будут видны селекторы (2) которые работают для этого элемента и его стили. При прокрутке блока стилей будет видно, какие стили наследует элемент от каких классов.



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



5



Здесь мы переписали свойство color, добавили background и margin-top (который заменил верхнее описание). Это изменило вид кнопки и подняло ее вверх за счет уменьшения внешнего верхнего отступа.



Теперь скопируйте этот блок CSS кода и вставьте его в конец своего .css файла, либо замените на него существующий блок с данным селектором. В нашем случае это блок «.tp-static .btn.btn-border.btn-warning». Его нужно найти в .css файле и заменить на код из браузера. Так наши изменения сохранятся в странице.





Популярные задачи



Поиграться со шрифтами



Чтобы заменить шрифт для всех элементов, нужно найти в .css файлах все свойства font и font-family. В стилях, обычно, через запятую перечисляется несколько шрифтов. Если первый не установлен на компьютере, в котором открывается сайт, то используется второй. Нужно заменить указанные названия шрифтов на свои. Если название шрифта с пробелом, то его нужно указывать в кавычках.

Например, было, CSS:

body, input, textarea, select {font-family: Arial, Verdana, Tahoma;}
.title { font-family: Verdana, Tahoma;}


Стало, CSS:

body, input, textarea, select {font-family: 'Open Sans', sans-serif;}
.title { font-family: 'Open Sans', sans-serif;}




Теперь все шрифты будут Open Sans. Это нестандартный шрифт (не у всех установлен на компьютере). Его и другие шрифты можно найти на fonts.google.com. Справа в фильтре нужно выбрать Languages=Cyrillic для текстов без спецсимволов (для заголовков, например) или Cyrillic Extended для шрифтов, которые используются для произвольных текстов (1). В списке найденных шрифтов выберите нужный и нажмите на плюсик, который станет минусиком (2). Внизу появится панель с выбранным шрифтом (3).



6



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



После выбора шрифта, на вкладке Embed скопируйте код (1) и разместите его в своего сайта перед файлом стилей, в котором он используется (2).



7



Теперь, если шрифт не установлен на компьютере, он загрузится из коллекции шрифтов Google. На странице все будет отображаться корректно.



Это немного подвинуть



Ключевое слово здесь «немного». На 1-2 сантиметра, редко больше. Это делается с помощью CSS параметров margin, padding или position.



Например, нужно немного подвинуть логотип и сделать его чуть меньше.



HTML код такой, допустим:






Главное – это определить селектор и указать ему нужные стили. В нашем случае это «#logo img». Иерархия читается справа налево: картинка img, которая находится в элементе #logo. Наоборот (слева направо) – в блоке #logo должна быть картика img, вот ее и нужно двигать.

Способ 1. Через margin двигаем вправо и вниз.

#logo img {
margin-top: 10px; /* Отступ вверху двигает вниз */
margin-left: 20px; /* Отступ слева двигает вправо */
width: 100px; /* Указываем нужное значение параметру «чуть меньше» */
}




Способ 2. Через padding тоже двигаем вправо и вниз.

Только padding – это внутренний отступ, поэтому нам нужно делать этот отступ для элемента, в котором находится картинка. То есть внутри блока #logo должен быть отступ. Значит наш селектор уже «#logo».

#logo {
padding-top: 10px; /* Верхний отступ в элементе сдвинет все вниз */
padding-left: 20px; /* Отступ слева двигает все вправо */
}


В данном случае нам понадобится еще отдельный блок стилей для изменения размера логотипа:

#logo img {
width: 100px;
}


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



Способ 3. Через position.

Нам понадобится position со значнием relative, так как нужно подвинуть логотип немного относительно текущего его положения.

#logo img {
position: relative;
top: 10px;
left: 20px;
width: 100px;
}




Это поменять местами, тут добавить



Здесь понадобится перемещение HTML кода по странице и, возможно, корректировка стилей. Например, у нас есть такой код.




Код CSS такой для нашей задачи.

.header-center .phone {
font-size: 24px;
}




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






Но при открытии страницы мы увидим, что стиль телефона изменился. Он уже не будет 24 размером шрифта. Это связано с тем, что телефон ищется в блоке «.header-center». Поэтому, нам нужно исправить стили в соответствии с новой версткой, чтобы селектор находил телефон в новом блоке. Для стилей телефона .header-center в CSS заменить на .header-right.

.header-right .phone {
font-size: 24px;
}




Если бы изначальные стили имели такой вид:

.phone {
font-size: 24px;
}


То есть без привязки к внешнему блоку (.header-center), который изменился (на .header-left), тогда правки в стилях не потребуются.



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



Это перекрасить



Для перекраски нужно просто определить селектор элемента и задать ему новые стили.

Допустим, у нас есть такой код.




Нам нужно сделать телефон красным, а ссылку заказа звонка – синей. При наведении ссылка должна быть зеленой.

#header .phone {
color: #FF0000;
}

/* Отдельно нужно указать цвет и для ссылки */
#header .phone a.callback {
color: #0000FF;
}
#header .phone a.callback:hover {
color: #00FF00;
}


Здесь через двоеточие указывается так называемый псевдокласс hover. Он добавляется элементу при наведении на него курсора. Подробнее про такие классы здесь.



Это убрать



Аналогично перекраске, нужно определить селектор и скрыть этот элемент через параметр display, например:

#header .cart {
display: none;
}




Исправление ошибок



Все ошибки – в коде. Если верстка явно «поехала», значит где-то некорректный код. Чаще всего бывает два вида «съездов».



1. Когда блоки сильно сместились



Скорее всего, где-то нехватает закрывающих тегов. Либо наоборот, закрывающий тег слишком рано появился. Важно соблюдать такие правила верстки. 1. Каждому открывающему тегу должен быть закрывающий. 2. Теги не должны пересекаться. Каждое из этих правил было подробно описано выше.

Чтобы избежать таких смещений, рекомендуется форматировать код с отступами. Каждый новый блок начинать с новой строки и дополнительным отступом. Например:













Так видно, что теги все указаны корректно и ровно. А ошибки, обычно, возникают, в таких ситуациях.












Здесь не закрыт первый тег div.













Здесь он закрыт позже, чем нужно. Два блока пересеклись.



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



2. Когда оформление не такое, как ожидается



В этом случае некорректно указан селектор. Если блок был перенесен из другого блока, то убедитесь, что в селекторе не указан старый блок. Как было выше в примере с .header-center .phone и .headre-left .phone. Поскольку стили наследуются, то нужно убедиться, что все селекторы, которые ранее применялись к элементу, применяются и при новой структуре блоков. Для этого используйте инструмент «Инспектировать элемент», который показывает в правой части все применяемые стили элемента.



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





Заключение



Надеемся, данная инструкция поможет вам вносить правки в существующий дизайн сайта самостоятельно,

либо говорить с помощниками на одном языке.

Возможно, эта инструкция станет отправной точкой в изучение HTML и CSS с сайта Htmlbook.



Легкости в редактировании своих сайтов!
Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/307590/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

Альтернатива для .clearfix

Вторник, 09 Августа 2016 г. 23:33 (ссылка)

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

Для начала рассмотрим, что же происходит с элементами и родительским элементом когда к ним добавляется свойство float: right и left. Рассмотрим небольшой пример:






  • первый

  • второй

  • третий


Какой-то текст



В примере LI имеют свойство float: left; и, как и следовало ожидать, выстраиваются в ряд один за другим и "Какой-то текст" прицепляется следом. Что же, это классическое поведение float. Но давайте посмотрим на родителя, ведь у нас еще есть UL: куда же делся он? Ему мы float не ставили, и по умолчанию это элемент блочный, почему же после него нет переноса?



А случилось следующее: для отображения float-элементов на странице браузер как бы "вырывает их из общего потока", помещает в нужное место, благодаря чему получается обтекание текстом и другими элементами. Именно для отключения обтекания было введено свойство clear, чтобы отключить его с нужной стороны выбранного блока.



Что же произойдет, если для родительского блока поставить clear: both;? Ровным счетом ничего, ведь, как я уже заметил ранее, float родителю мы не ставили и соответственно его ничто не обтекает, его как бы совсем нет, его содержимое было "вырвано из потока".



Давайте рассмотрим как с этим справится .clearfix:






  • первый

  • второй

  • третий


Какой-то текст



С задачей .clearfix справился. Как же он это делает? Он добавляет после выбранного элемента псевдоэлемент, который огибает все float элементы, расположенные ниже. Ниже именно потому, что родительский элемент в потоке пустой, его почти нет, и поэтому :after помещает элемент физически в самое начало, и браузеру приходится просчитывать, когда же все элементы закончат флоатиться, чтобы остановиться.



А вот вариант без использования .clearfix:






  • первый

  • второй

  • третий


Какой-то текст



Свойство display: inline-block; для родительского элемента. Результат такой же, отличие лишь в том, что .clearfix оставляет родительский элемент блочным, либо таким, каким он был определен ранее. Как этим воспользоваться — решайте сами. И для классических решений эти способы практически равноценны.



Но если сам родительский элемент (и элементы внутри него) флоатится, а относительно него нужно расположить другие блоки, может возникнуть ситуация, когда .clearfix использовать нельзя. Родительский элемент будет занимать 0 размер (содержимое и он сам "вырваны из потока"). И чтобы спозиционировать в его окружении другие элементы, нужно будет либо прописывать фиксированную высоту (а она может быть непостоянной), либо "играться" с position: absolute; (что тоже не всегда можно предусмотреть непостоянством контента). В ряде случаев, добавляя в такие "узлы" на сайте дополнительный контент, может понадобиться пересмотреть всю концепцию верстки и переверстывать весь "узел".



Использование свойства display облегчит диагностику верстки средствами разработки (firebug или другими встроенными в браузеры средствами инспектирования), именно тогда, когда .clearfix применить не получается. Ведь если не сделать эту операцию, то родительский элемент найти инспектором не получится (если у него нет отступов), и под его содержимое не будет отведено место при рендэринге страницы (это хорошо заметно в примере 1 при инспектировании). display: inline-block; как раз и поможет избежать этих проблем.



Итого: в вашем распоряжении — более одного способа решения данной задачи. Хорошо, когда есть выбор, пользуйтесь на здоровье!



Варианты верстки доступны по ссылке тут


Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/307374/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

Как транслировать видео с помощью HTML5

Вторник, 09 Августа 2016 г. 14:52 (ссылка)

Как использовать HTML5, для проигрывания различных стриминговых видео файлов, включая .flv



Введение



В этой статье я объясню и покажу как сделать живую видео трансляцию на вашем сайте. Недавно меня наняли с целью реализовать данный функционал для клиента. Я посоветовал реализовать это с помощью HTML5 для mp4 видео форматов и flash для его .flw файлов.



Основы



Тем кто хочет реализовать видео стриминг для начала нужно ознакомиться с тем какие есть видео форматы и что может, а что не может быть воспроизведено. Существует большое количество видео форматов таких как: .flv, .mp4, .swf и другие. Рассмотрим .flv и .swf, которые являются файлами flash формата. Эти два формата не могут быть воспроизведены с помощью HTML5. Напротив MP4 может проигрываться с помощью HTML5 без flash плеера.



Вы можете найти много статьей и туториалов в сети на тему стриминга .swf и .flv файлов. Обратите внимание на то что .swf плеер не будет воспроизводить .flv файлы. Они оба flash но с разными требованиями. В сети много противоречивой информации на данный счет. Вы лишь потратите свое время пытаясь заставить .swf запустит .flv но в итоге удостоверитесь что это невозможно.



Как реализовать .mp4 в HTML5:








Пару вещей которые стоит запомнить:




  • Видео нужно присвоить id

  • Нужно добавить расширение файла в source.

  • Если вы хотите открыть для пользователя доступ к панели управления тогда разместите тэг controls.

  • Нужно разместить полный URL файла в source. Пример: www.mysite.com/video/myvideo.mp4





HTML5 воспроизводит аудио и видео. Вам просто нужно указать тип файла.



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






Причиной того что видео не работает на сайте может быть отсутствие доступа к серверу, некорректное имя файла, не полный исходный URL или просто Apache (если вы используете его), не распознает тип расширения или тип mime.



Настройка Apache Web Server



Вам нужно добавить mime типы в расширение, либо в файл apache.conf или в mime.conf. После внесения измененный перезапустите сервер.



Вот и все. После этого у вас появится возможность транслироваться видео из сайта. Но помните, существуют ограничения на форматы в HTML5, это могут быть .swf или shockwave flash или .flv.



Как реализовать стриминг с flash



В сети много различной информации, где большая часть будет о реализации воспроизведения .swf или Shockwave flash формат, используя что-то вроде SWFObject. Вкратце, SWFObject это JavaScript библиотека, которая позволит вам проигрывать только .swf форматы и больше она ничего не делает.



Чтобы реализовать трансляцию для .swf файлов нужно:



1. Загрузить SWFObject из Git или с других источников.

2. Разместить его на странице:

	





3. Этот код должен быть размещен в шапке файла.



4. Вы можете реализовать его с помощью тэга Object tag или:

	 




4. Теперь вам нужно прописать следующее:

	

Alternative content








5. Это запустит .swf файл на вашей странице. Вы можете управлять многими параметрами, с помощью следующего кода:

	var params = {
allowScriptAccess: "sameDomain",
allowFullScreen: "true",
wmode: "opaque",
quality: "high",
menu: "false"
};




FlowPlayer



Если у вас есть много видео, которые сделаны с использованием flash и они в формате .flv, то вам необходимо создать flash плеер. Есть много видео-плееров и услуги, которые доступны по разным ценам. Я выбрал FlowPlayer. Он на рынке достаточно давно и уже обзавелся большим сообществом.



Есть несколько вариантов для реализации FlowPlayer. FlowPlayer.org имеет две версии: флэш-плеер под названием Flowplayer flash и HTML5 implementation. Вторая имеет бесплатный вариант для разработчиков, в то время как для flash нужно купить лицензию.



Flash Flowplayer имеет необходимые файлы для воспроизведения файлов .flv, в то время как, HTML5 плеер стандартные форматы HTML5 файлов (MP4). Итак, почему стоит выбрать версию HTML5? Она предлагает довольно много вещей, с которыми можно заставить ваш плеер делать вещи без самостоятельного программирования. Все зависит от ваших потребностей.



Некоторые встраивают плеер на сайт в то время как хостинг видео находится в другом месте. Мы же встроим видео плеер в наш сайт и разместим файлы локально. Для этого нужно:



1. Убедиться, что следующие файлы загружены:


  • flowerplayer-3.2.x.min.js -> есть более поздние версии, так что вам нужно будет загрузить последнюю, если это не сработает вернуться к .12/.13

  • flowplayer-controls-3.2.15.swf

  • flowplayer-3.2.16.swf





2. В шапку HTML нужно добавить следующее:







3. В теле вашей веб-страницы, вам нужно установить плеер с src файлом:







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



Убедитесь что вы используете полный URL файла:

yourwebsite.com/yourfilelocation/nameofyourfile.flv



Не то, что вы создали файл и идентификатор нам нужно установить вверх код, который на самом деле запускает файл.



Вы добавили файл и id, теперь нужно прописать код который запустит файл:






Итог



После прочтения этой статьи вы должны иметь хорошее понимание ключевых элементов, необходимых для работы mp4 и .flv файлов на вашем сайте. Конечно, вы можете управлять параметрами и делать другие вещи, но целью этой статьи было дать вам, понимание деталей, при настройке стримминга.
Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/307446/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество

Следующие 30  »

<html - Самое интересное в блогах

Страницы: [1] 2 3 ..
.. 10

LiveInternet.Ru Ссылки: на главную|почта|знакомства|одноклассники|фото|открытки|тесты|чат
О проекте: помощь|контакты|разместить рекламу|версия для pda