По вашему запросу ничего не найдено :(
Убедитесь, что запрос написан правильно, или посмотрите другие наши статьи:
img
Основой любого сайта является HTML. Это первое, что видят люди. Без него сайта бы не существовало. Поэтому так важно придерживаться правильных методов написания кода. Если этого не делать, то посетители вашего сайта получат плохой пользовательский опыт. В HTML всегда есть, чему поучиться. Причем не важно, новичок вы в программировании или опытный специалист. В данной статье мы поговорим о лучших практиках HTML. Давайте начнем. Лучшие практики HTML – это набор правил, помогающих создавать сайты, одинаково удобные для чтения и сопровождения. При создании сайта на HTML необходимо придерживаться следующих принципов: Используйте только один элемент <h1> для страницы В HTML доступно 6 различных тегов заголовков – от <h1> до <h6>. Тегом <h1> отмечается основной заголовок (название веб-страницы), а тег <h6> используется для наименее важного заголовка. Тег <h1> крупнее <h2>, <h2> крупнее <h3> и так до тега <h6>. Размер каждого заголовка уменьшается по степени его важности. Очень важно не добавлять более одного элемента <h1> на странице. Не делайте так: <main> <div> <h1>Писать код – это весело?</h1> <p>Чем больше вы пишете, тем опытнее становитесь</p> </div> <div> <h1>Писать код – это весело</h1> <p>Лучше писать код с удовольствием</p> </div> </main> В примере выше мы используем тег <h1> в первом и втором блоке <div>. Такой код, конечно же, заработает, но это не самый правильный вариант оформления. Лучше вот так: <main> <div> <h1>Писать код – это весело?</h1> <p>Чем больше вы пишете, тем опытнее становитесь</p> </div> <div> <h2>Писать код – это весело</h2> <p>Лучше писать код с удовольствием</p> </div> </main> Кроме того, наличие одного элемента <h1> на странице – крайне важно для поисковой оптимизации (SEO). Через этот тег поисковики понимают, что находится на странице (главная мысль страницы). Не забывайте про иерархию заголовков в HTML Когда вы пользуетесь тегами заголовков, важно следовать установленной иерархии: после <h1> идет <h2>, за <h3> следует <h4> и т.д... Не перескакивайте от <h1> к <h3>. Некоторые посетители сайта используют средства чтения с экрана. И таким пользователям бывает трудно понять содержимое вашей страницы при нарушенной иерархии элементов. Средства чтения с экрана – это одна из специальных возможностей, помогающая людям получать доступ к цифровому содержимому (сайтам или приложениям) и взаимодействовать с ним через звуки и касания. Основные пользователи данной технологии – слабовидящие или незрячие люди. Не делайте так: <h1>Писать код – это весело</h1> <h3>Лучше писать код с удовольствием</h3> <h5>Постоянство – это ключ</h5> Лучше вот так: <h1>Писать код – это весело?</h1> <h2>Чем больше вы пишете, тем опытнее становитесь</h2> <h3>Писать код – это весело</h3> Добавляйте подписи к изображениям через элемент figure Добавлять подписи к изображениям рекомендуется через элемент <figure>. А чтобы все заработало, нужно прописать не только <figure>, но и <figcaption>. Не делайте так: <div> <img src=“a-man-coding.jpg” alt=“Мужчина за компьютером”> <p>Это изображение мужчины, который работает за компьютером</p> </div> С точки зрения кода, пример выше написан хорошо. Но лучше сделать все иначе. Если изображение не загрузилось, отображается содержимое alt, и на экране показывается текст из элемента <p>. Но посетитель, использующий средства чтения с экрана, не сможет отличить тексты в <p> и alt. Помните: даже если ваш код работает, это еще не значит, что вы делаете все правильно. Лучше сделать вот так: <figure> <img src=“a-man-coding.jpg” alt=“ Мужчина за компьютером”> <figcaption>Это изображение мужчины, который работает за компьютером</figcaption> </figure> Пример выше – отличный способ, как можно добавить подписи к изображениям. Почему важно добавлять подписи к изображениям именно так: Поисковая оптимизация. Ваши изображения легче найти в поисковых системах. Посетителям, использующим средства чтения с экрана, проще понять содержимое вашей страницы. Не используйте div для шапки и подвала; для этого подходят семантические элементы Семантические элементы HTML используются для логической разметки структуры документа на странице. Кроме того, они нужны для правильной сборки страницы. Откажитесь от <div> в пользу семантики. Не используйте <div> для обозначения шапки и подвала страницы. Для этих целей есть семантические элементы <header> и <footer>. Элемент <header> показывает навигацию или вводную часть страницы. В элементе <footer> размещается информация об авторских правах или ссылки для перехода на страницы. Не делайте так: <div class="header"> <a href="index.html">Главная</a> <a href="#">О нас</a> <a href="#">Контакты</a> </div> <div class="footer"> <a href="index.html">Главная</a> <a href="#">О нас</a> <a href="#">Контакты</a> </div> В примере выше тег <div> используется в качестве контейнера для <header> и <footer>. Такой код будет работать, но это не самый правильный способ реализации. Лучше вот так: <header> <h1></h1> </header> <footer> <a href="index.html">Главная</a> <a href="#">О нас</a> <a href="#">Контакты</a> </footer> Лучше всего добавлять <footer> и <header> на страницу именно так. Почему важно добавлять <footer> и <header> с помощью семантических элементов HTML: Использование семантических элементов для шапки и подвалаупрощает чтение кода. Такой способ предлагает более качественный пользовательский опыт. Посетителям, использующим средства чтения с экрана, будет проще понять содержимое страницы. Не используйте <b> и <i> для выделения текста на странице Теги <b> и <i> выделяют текст жирным шрифтом (b) или курсивом (i). Но не стоит ими пользоваться на сайте, поскольку оба тега не несут семантической нагрузки. Для выделения текста лучше подходит свойство CSS font-weight, либо теги <strong> и <em>. Тегом <strong> отмечают важный текст на странице. Он выделяет текст или делает его жирным. Тег <em> подчеркивает текст или добавляет курсив (точно также, как <i>). Не делайте так: <p><i>Пишите код в своем собственном темпе</i><p> <p><b>пишите код в своем собственном темпе </b><p> В этом примере текст выделяется жирным и курсивом. Но пользователи со средствами для чтения с экрана не заметят разницы. Данные теги не несут семантического значения. Спецификация HTML 5 рекомендует нам использовать теги <b> и <i> только в самых крайних случаях и при отсутствие альтернативных вариантов. Лучше делайте так: <p><strong>Пишите код в своем собственном темпе</strong><p> <p><em>пишите код в своем собственном темпе</em><p> Не используйте блочные элементы внутри строчных Блочные элементы начинают новую строку на странице. По умолчанию действие этих элементов распространяется на всю строку – от ее начала до конца. Вы не сможете добавить строчные элементы внутри блочных без CSS. К блочным элементам относятся <p>, <h1> – <h6> и <div>. Строчные элементы действуют на небольшую часть страницы. Они не начинаются с новой строки. К строчным элементам относятся <span>, <em> и <a>. Вы не можете добавить блочные элементы внутри строчных. Не делайте так: <a href="#" > <p>Посетите merion</p> </a> У вас не получится добавить <p> внутрь элемента <a>, поскольку <p> относится к блочным элементам, а <a> – к строчным. Лучше сделать так: <p> Посетите <a href="wiki.merionet.ru" target="_blank">Merion</a> для изучения IT </p> Это отличный пример того, как можно вложить строчные элементы внутри блочных. Важно помнить, что: Блочный элемент нельзя вложить внутри строчного. Строчный элемент можно вложить внутри блочного. Строчный и блочный элемент можно вложить внутри блочного. Небольшое уточнение: «вложить» что-то в данном случае означает «добавить внутрь». Так что, говоря «это нельзя вложить», я имею ввиду, что вы не сможете добавить один такой элемент внутрь другого. Надеюсь, вы запомнили 3 простых правила для вложения элементов. Кроме того, CSS позволяет преобразовать блочные элементы в строчные. Для этого используется display: inline-block и display: inline. А еще важно помнить простую истину: даже если ваш код работает, это еще не значит, что вы делаете все правильно. Именно поэтому я всегда рекомендую пользоваться валидатором разметки W3C и дополнительно проверять свой код. Этот валидатор отслеживает правильность разметки веб-документов в HTML, XHTML, SMIL, MathML и т.д. Для проверки кода можно скопить его URL и добавить на сайт, либо загрузить сам файл HTML. Заключение Надеемся, что данная статья помогла вам узнать что-то новое о лучших практиках в HTML. Мы постарались включить в нее самые полезные советы, которыми можно начинать пользоваться уже сегодня.
img
Друг, на днях к нам в офис подъехал E1 - шлюз от китайского вендора Dinstar модели MTG200-1-E1. Взяв в руки коробку мы устремились в лабораторию – скрещивать шлюз с E1 потоком со стороны ТфОП и с IP – АТС Asterisk другой. Коротко про шлюз Произведем небольшой «анбоксинг» шлюза. Изделие поставляется в коробке и защищено специальной пленкой: В комплект поставки входит: Ethernet – кабель; Провод для подключения E1 потока; Консольный кабель; Сам шлюз; На фронтальной панели MTG200 расположились: Индикатор питания; Индикатор «алярмов»; Физический разъем, предназначенный для сброса настроек устройства к заводским; Консольный порт; Индикация E1/T1 и Fast Ethernet интерфейсов; Разворачиваем шлюз на 180 градусов и видим: Разъем для подключения питания; Физические интерфейсы для E1/T1; Физический интерфейсы для Fast Ethernet; Вот такой шлюз ожидает своего владельца :) Мы переходим к настройке связки с IP – АТС Asterisk с помощью FreePBX. Связка со стороны Asterisk Настройки мы будем выполнять с помощью графического интерфейса FreePBX 14 версии. Подключившись, переходим в раздел Connectivity → Trunks и добавляем новый транк для MTG200 (chan_sip). Дайте удобное для вас имя транка в поле Trunk Name. В разделе Outgoing (исходящие параметры) заполняем: host=IP_адрес_Dinstar type=friend fromuser=логин username=логин secret=пароль qualify=yes port=5060 context=from-pstn Переключаемся на вкладку Incoming (входящие параметры) и указываем следующие реквизиты: disallow=all allow=alaw&ulaw canreinvite=no context=from-pstn dtmfmode=rfc2833 username=логин secret=пароль qualify=yes insecure=invite host=dynamic type=friend Отлично. Теперь давайте проверим статус этих пиров: Мы немного забежали вперед, и, как видите, статус нашего входящего пира так же отмечен как OK. Это возможно, только после создания «плеча» в сторону Asterisk на шлюзе. Мы наглядно покажем этот процесс далее. После, создайте входящий/исходящий маршрут для направления вызовов в нужном направлении или формате. Как это сделать, можно прочитать в этой статье. Связка со стороны провайдера Приступаем к настройке шлюза. Провайдер прислал нам следующие параметры: Каждая настройка сильно зависит от параметров вашего провайдера. Свяжитесь с ним, перед настройкой CRC выключен D-канал User А-номер от Вашей АТС должен приходить 10 знаков с типом National (49Xxxxxxxx) План нумерации А-номера должен быть ISDN/Telephony С ними мы и будем работать. По умолчанию, шлюз почти готов к работе – поменяем некоторые параметры. Переходим в раздел PRI Config → PRI Trunk и добавляем новый транк со следующими настройками: Скорректируем SIP параметры: переходим в SIP Config → SIP Parameter: Скорректируем SIP параметры: переходим в SIP Config → SIP Trunk. Указываем IP – адрес и порт со стороны Asterisk: Настроим общие E1/T1 параметры: PSTN Group Config → E1/T1 Parameter : Готово. Делаем телефонный звонок и проверяем, как занимаются тайм – слоты на нашем шлюзе: Status & Statistics → E1/T1 Status : Мы сделали входящий звонок – как видите, зеленым цветом, отображается занятый тайм – слот, а сам звонок, улетает по SIP в сторону Asterisk.
img
В сегодняшней статье рассмотрим модуль, который позволяет просматривать детальную информацию о сервере IP-АТС Asterisk и о процессах, которые на нем запущены прямо из web-интерфейса FreePBX - Asterisk Info. Все примеры в данной статье будут приводиться с использованием FreePBX 13. Ту же самую информацию можно получить, используя командную строку Asterisk – CLI (Command Line Interface). Сразу отметим, что данная информация будет понятна и полезна только продвинутым пользователям Asterisk и системным администраторам, например, при траблшутинге проблем. Модуль Asterisk Info Перейдём в модуль и рассмотрим его функционал. Модуль доступен по следующему пути с главной страницы Reports -> Asterisk Info Как только мы переходим в модуль, перед нами открывается страница Summary. Здесь находится следующая информация: Uptime – Показывает как долго сервер работает без отключения и рестарта Reload - Показывает, когда последний раз была выполнена перезагрузка сервера. Перезагрузка происходит после нажатия на кнопку Apply Config, которая появляется после внесения изменений в конфигурацию через вэб-интерфейс Active SIP Channels -Показывает, как много на сервере активных SIP каналов. Не надо путать с активными звонками. Active IAX2 Channels – Показывает количество активных IAX2 каналов SIP Registry - Показывает количество SIP транков, которые зарегистрированы на сервере IAX2 Registry - Показывает количество IAX2 транков, которые зарегистрированы на сервере SIP Peers - Показывает количество зарегистрированных SIP пиров. Пир – это внутренний номер (Extension) или транк (Trunk) IAX2 Peers - Показывает количество зарегистрированных IAX2 пиров. Справа можно выбрать другой тип отчета. Registries Данный отчет показывает каждое соединение, на которое зарегистрирован сервер Asterisk. Обычно здесь находится информация о транках. Этот отчёт показывает, на что зарегистрирован сервер, но не что зарегистрировано на нем, эту информацию следует искать во вкладке Peers. Channels Здесь выводится информация о каждом активном канале на сервере. Канал – это одно двустороннее соединение между двумя устройствами. Peers Здесь выводится информация о каждом устройстве, транке, внутреннем номере, которое зарегистрировано на сервере Asterisk. SIP Info Данный отчёт суммирует предыдущие два Registry и Peers, но выводит информацию только по SIP. IAX Info Данный отчёт суммирует Registry и Peers, но выводит информацию только по IAX2. Conferences Report Данный отчёт показывает информацию о любых активных конференциях на сервере. Subscription Report Показывает список всех подсказок (hints), которые созданы на сервере. Подсказка это то, на что подписана BLF кнопка на телефоне. Voicemail Users Report Показывает информацию о голосовой почте пользователей. Например, как много новых сообщений поступило. Queues Показывает информацию по очередям. Например, сколько сейчас звонков находится в очереди. Full Report Показывает информацию из всех предыдущих вкладок в одном окне.
ВЕСЕННИЕ СКИДКИ
40%
50%
60%
До конца акции: 30 дней 24 : 59 : 59