WEB start

Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17

hit 
counter

Наши преимущества

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


Регистрация на сайте

Дополнительные статьи

WordPress - дочерние темы

https://make.wordpress.org/training/handbook/lesson-plans/theme-school/child-themes/child-themes-twentyseventeen/

Дочерняя тема позволяет модифицировать родительскую тему несколькими способами:

  • добавить листы стилей в дополнение к стилям родительской темы
  • замещение (переопределение) файлов шаблонов родительской темы
  • добавление новых файлов через дочернюю тему


Папка для дочерней темы

В папке \wp-content\themes создаём новую папку с именем дочерней темы и помещаем в неё 2 файла:

style.css

(в дочерней теме)

/* Theme Name: twenty Ninteene Child test1 Description: The custom theme Child test1 using the parent theme Twenty Nineteen. Author: Admin Author URI: http://web-start.top Template: twentynineteen Version: 1 */


Enqueue parent and child theme style sheets

functions.php

(в дочерней теме)

Сначала выполняется файл functions.php из дочерней темы, затем - из родительской.

<?php function mychildtheme_enqueue_styles() { $parent_style = 'parent-style'; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) ); var_dump($parent_style); } add_action( 'wp_enqueue_scripts', 'mychildtheme_enqueue_styles' ); ?>


Файл style.css дочерней темы переопределяет любые стили в файле style.css родительской темы, которые имеют одинаковые селекторы.


Переопределение шаблонов родительской темы

Файлы  «Дочерней темы» влияют на файлы «Родителя»: они либо переопределяют элементы и добавляют функциональность к его файлу «Родителя» с тем же именем, либо полностью заменяют его.

Пример нового файла footer.php для темы (он заменяет файл из папки с родительской темой)

<?php /* New footer */ ?> </div><!-- #content --> <footer id="colophon" class="site-footer"> <?php printf( 'New footer &copy; 2019' ); ?> </footer><!-- #colophon --> </div><!-- #page --> <?php wp_footer(); ?> </body> </html>



Добавление новых шаблонов

Пример добавляет альтернативный шаблон с именем Template - test2

Шаблон с этим именем появляется как вариант выбора шаблона в свойствах страницы (page attributes).


<?php /* Template Name: Template - test2 */ get_header(); ?> <section id="primary" class="content-area"> <main id="main" class="site-main"> <H1>New - corrected index.php </H1> <?php if ( have_posts() ) { // Load posts loop. while ( have_posts() ) { the_post(); get_template_part( 'template-parts/content/content' ); } // Previous/next page navigation. twentynineteen_the_posts_navigation(); } else { // If no content, include the "No posts found" template. get_template_part( 'template-parts/content/content', 'none' ); } ?> </main><!-- .site-main --> </section><!-- .content-area --> <?php get_footer();





Построение многоязычных сайтов на CMS WordPress

Для этого удобно использовать стандартный WordPress плагин   polylang 

Далее предполагаем, что имя нашего тестого сайта - http://wordpress1

1. Установить плагин http://wordpress1/wp-admin/plugins.php и активировато его (Polylang, Polylang Theme Strings, Theme and plugin translation for Polylang (TTfP))

2. В настройках языков добавить нужные языки http://wordpress1/wp-admin/admin.php?page=mlang (например: Русский, Английский, Иврит)

3. Добавить в перечень текстовых строк, подлежащих переводу, темы и плагины http://wordpress1/wp-admin/admin.php?page=mw_polylang_strings_settings 

4. Сделать переводы всех текстовых строк (в том числе и текстов, которые используются в выбранной теме) http://wordpress1/wp-admin/admin.php?page=mlang_strings&paged=26 

5. Сделать перевод каждой страницы http://wordpress1/wp-admin/edit.php?post_type=page (там появится колонка - иконка нужого  языка)

6. Сделать перевод постов http://wordpress1/wp-admin/edit.php 

7. Добавить виджет - переключатель языка

8. Поставить виждет в нужное место - в теме сайта (Appearance -> Customize --> Widgets -> Footer1 -> AddWidget -> Language Switcher -> PUBLISH - добавили в Footer1 переключатель языков)

9. Сконфигурировать меню для каждого языка http://wordpress1/wp-admin/nav-menus.php  (Закладка сверху - EDIT MENU : Menu Structure - набор пунктов меню, Menu Settings->Display location - привязка к языку / Закладка сверху MANAGE LOCATIONS - выбрать, какие меню при каких языках показываются на странице)




Семантические элементы в HTML5

Семантический элемент (семантический тег) - тег, который имеет смысловое значение.

Спецификация HTML5 поддерживает ряд новых тегов для разметки статьи. Эти теги улучшают читаемость статьи для разработчика, возможно улучшают индексацию страницы для поисковиков (CEO).

Теги

  • <article> - отдельная, независимая по смыслу статья
  • <aside> -  блок сбоку от основного контента (как боковой блок страницы, sidebar).
  • <details> - дополнительная информация, которую пользователь может открывать или закрывать
  • <figcaption> - пояснение для элемента <figure>
  • <figure> - используется для иллюстраций, диаграмм, фотографий, листингов кода и т.д.
  • <footer> - нижний колонтитул
  • <header> - верхний колонтитул, заголовок документа
  • <main> - основной контент документа
  • <mark> - выделенный (рлдсвеченный) текст
  • <nav> - блок навигационных ссылок, меню документа
  • <section> - элемент &lt;article&gt; определяет независимый, самодостаточный контент, элемент &lt;section&gt; определяет раздел в документе.
  • <summary> -  видимый заголовок элемента <details>
  • <time> - дата, время



Примеры макетов HTML документа



Microsoft Visual Studio Code

Visual Studio Code - это бесплатный, удобный, современный, универсальный редактор программного кода, разработанный компанией Microsoft для разных операционных систем: Windows, Linux и macOS. 

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

Установка

Скачать Visual Studio Code последней версии можно с сайта разработчика (для любой ОС): https://code.visualstudio.com/download

  




HTML5, CSS3, SASS, JavaScript 

Подсказки при наборе HTML кода (автодополнение кода).

Проверка синтаксиса.

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

Color Picker - подбор, просмотр цветов.

Дополнительный плагин - Live Server.

Дополнительный плагин - open-in-browser - добавляет функцию открывать файлы в любом установленном браузере (Opera, Safari, Firefox, Chrome, IE).

Дополнительный плагин для SASS - Live SASS compiler


Простая HTML страничка

Добавить CSS

Live server

SASS


WEB - уведомления (Notifications)

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

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

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

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

Запрос разрешения

Notification.requestPermission()

Проверить статус разрешения

Notification.permission

Создание уведомления

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

var notification = new Notification('Need support', {
body: 'Call us ...'
});

Методы, свойства и события

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

  • body: Строка, используемая для дальнейшего уточнения цели уведомления.
  • lang: Указывает язык уведомления. Его значение должно соответствовать стандарту BCP 47. Примеры действительных строк - en-US и it-IT.
  • dir: Определяет направление текста сообщения. Его значение может быть автоматически означающим, что направление основано на настройках браузера, ltr, чтобы указать направление слева направо (для европейских языков) или rtl, чтобы указать направление справа налево (для некоторых азиатских языков).
  • tag: Строка, которая используется как идентификатор, который можно использовать для извлечения, замены или удаления уведомления.
  • icon: Указывает URL-адрес изображения, которое будет использоваться в качестве значка уведомления.

Чтобы создать экземпляр объекта Notification, мы должны написать инструкцию следующим образом:

var note = new Notification('Need support', {
body: 'Call us ...'
});

Настройки доступны как свойства для чтения экземпляра объекта notification.

Кроме того, объект Notification предоставляет свойство, называемое разрешением (permission). Разрешение содержит строку, представляющую текущей статус разрешения на отображение уведомлений.

Его значение может быть одним из следующих:

  • denied, что означает, что пользователь отклонил уведомления
  • granted, что означает, что пользователь дал разрешение
  • default, что означает, что выбор пользователя неизвестен

Этот API предоставляет два метода: requestPermission() и close(). Как следует из названия, первый используется для запроса разрешения на показ уведомлений пользователю, в то время как последний программно закрывает уведомление.

requestPermission () - это метод объекта Notification, который принимает необязательный параметр - callback функцию, которая выполняется, когда пользователь принимает или отклоняет разрешение. Выбор пользователя передается в эту функцию в качестве параметра, и значение может быть: granted, denied, default.

close () является методом, который не принимает никаких параметров.

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

  • onclick: вызывается, когда пользователь нажимает на уведомление.
  • onclose: вызывается, как только пользователь или броузер закрывает уведомление.
  • onerror: вызывается, если с уведомлением возникает ошибка.
  • onshow: вызывается, когда отображается уведомление.

Пример использования этих событий.

var note = new Notification('Need support', {
body: 'Call us ...'
});
note.onshow = function () {
console.log ("Отображено уведомление");
};