rm -r
@rm_programmer
12 subscribers
182 photos
3 videos
212 links
Programmer - Курсы программирования. Канал для тех, кто не хочет остаться на задворках цивилизации.
Download Telegram
About
Blog
Apps
Platform
Join
rm -r
12 subscribers
rm -r
### Заключение
Этот урок познакомил вас с работой с базами данных, тестированием кода и созданием веб-приложений. Эти навыки помогут вам создавать более сложные и надежные приложения. В следующих уроках мы рассмотрим работу с API, машинное обучение и создание графических интерфейсов.

---
6 views
rm -r
Изучаем Python: Урок 4 🐍
В этом уроке мы рассмотрим такие важные темы, как работа с библиотеками, регулярные выражения и асинхронное программирование. Эти концепции помогут вам писать более мощные и эффективные программы.

---

### 📚 Что вы узнаете:
1. Библиотеки: Как устанавливать и использовать популярные библиотеки, такие как requests, Pandas и NumPy.
2. Регулярные выражения: Как искать, заменять и разделять текст с помощью модуля re.
3. Асинхронное программирование: Как использовать async и await для выполнения задач одновременно.

---

### 🛠 Практические примеры:
1. Использование библиотеки `requests`: 

   import requests
   response = requests.get("https://api.github.com")
   print(response.json())


2. Регулярные выражения для поиска email: 

   import re
   text = "Свяжитесь со мной: example@example.com"
   pattern = r"[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+"
   match = re.search(pattern, text)
   print(match.group())  # Вывод: example@example.com


3. Асинхронная загрузка данных: 

   import asyncio

   async def fetch_data():
       await asyncio.sleep(2)
       return "Данные загружены!"

   async def main():
       result = await fetch_data()
       print(result)

   asyncio.run(main())


---

### 🚀 Почему это важно?
- Библиотеки экономят время, предоставляя готовые решения для сложных задач.
- Регулярные выражения помогают эффективно работать с текстом.
- Асинхронное программирование ускоряет выполнение задач, особенно при работе с сетью или файлами.

---

### 📌 Совет:
Попробуйте написать свой код, используя изученные концепции. Например, создайте асинхронный скрипт для загрузки данных с нескольких сайтов или используйте регулярные выражения для обработки текста.

---

Подписывайтесь на наш канал, чтобы не пропустить следующие уроки!
👉 [https://t.me/Safety_Y](https://t.me/Safety_Y)

---

Если у вас есть вопросы или вы хотите узнать больше, пишите в комментариях! 🚀
6 views
rm -r
Урок 7: Анимации и трансформации в CSS

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

---

### Трансформации в CSS
Трансформации позволяют изменять форму, размер и положение элемента. Основные свойства:

1. Перемещение (`translate`)
Сдвигает элемент по осям X и Y: 

   .box {
       transform: translate(50px, 20px); /* Вправо на 50px, вниз на 20px */
   }


2. Масштабирование (`scale`)
Увеличивает или уменьшает размер элемента: 

   .box {
       transform: scale(1.5); /* Увеличивает элемент в 1.5 раза */
   }


3. Вращение (`rotate`)
Поворачивает элемент на заданный угол: 

   .box {
       transform: rotate(45deg); /* Поворот на 45 градусов */
   }


4. Наклон (`skew`)
Наклоняет элемент по осям X и Y: 

   .box {
       transform: skew(20deg, 10deg); /* Наклон по X и Y */
   }


5. Множественные трансформации
Можно комбинировать несколько трансформаций: 

   .box {
       transform: translate(50px, 20px) rotate(45deg) scale(1.2);
   }


---

### Переходы (`transition`)
Переходы позволяют плавно изменять свойства элемента при наведении или других событиях.

1. Свойства перехода:
- transition-property — указывает, какое свойство анимировать (например, background-color, transform).
- transition-duration — длительность перехода (например, 1s).
- transition-timing-function — функция скорости (например, ease, linear).
- transition-delay — задержка перед началом перехода.

Пример: 

   .box {
       background-color: blue;
       transition: background-color 0.5s ease, transform 1s;
   }
   .box:hover {
       background-color: red;
       transform: scale(1.2);
   }


---

### Анимации (`@keyframes`)
Анимации позволяют создавать сложные последовательности изменений.

1. Создание анимации:
Используйте @keyframes, чтобы задать этапы анимации: 

   @keyframes slide {
       0% { transform: translateX(0); }
       50% { transform: translateX(200px); }
       100% { transform: translateX(0); }
   }


2. Применение анимации:
Используйте свойство animation, чтобы применить анимацию к элементу: 

   .box {
       animation: slide 3s infinite; /* Название, длительность, повтор */
   }


3. Свойства анимации:
- animation-name — название анимации.
- animation-duration — длительность.
- animation-timing-function — функция скорости.
- animation-delay — задержка перед началом.
- animation-iteration-count — количество повторений (infinite для бесконечности).
- animation-direction — направление (normal, reverse, alternate).

---

### Практика
1. Создайте кнопку, которая увеличивается при наведении.
2. Добавьте плавный переход для изменения цвета фона.
3. Создайте анимацию, чтобы элемент двигался по кругу.

---

### Домашнее задание
Создайте страницу с использованием анимаций и трансформаций:
- Кнопка с эффектом наведения.
- Блок, который вращается при клике.
- Текст, который плавно появляется при загрузке страницы.

Поделитесь результатами в комментариях! 😉

В следующем уроке мы разберем адаптивный дизайн и медиазапросы. Оставайтесь с нами! 💪

Подписывайтесь на наш канал: [https://t.me/Safety_Y](https://t.me/Safety_Y)

#CSS #ВебРазработка #УрокиCSS #Программирование
9 views
rm -r
https://telegra.ph/HakeryRU-Glava-0h04-Predvaritelnyj-ehtap-01-12
Telegraph
Хакеры.RU. Глава 0х04. Предварительный этап
Это пятая гла­ва прик­лючен­ческо‑фан­тасти­чес­кой исто­рии «Ха­керы.RU», которую мы пуб­лику­ем по одной гла­ве спе­циаль­но для под­писчи­ков «Хакера». Если ты еще не чита­ешь, начинай с пер­вой! «Ну вы, пар­ни, отож­гли, конеч­но :)))))» Су­дя по количес­тву…
7 views
rm -r
👉HTML5 и CSS3 для начинающих
Друзья, у меня иногда спрашивают, а где я учился создавать сайты? Я всегда отвечаю, что у Михаила Русакова. И вот недавно передо мной встала ещё одна задача.

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

Вот как раз ссылка на курс: https://Hottab.programsite.ru/freehtml5

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

Таким образом, курс "HTML5 и CSS3 для начинающих" превзошёл все мои ожидания, особенно, если учесть, что он абсолютно бесплатный.

Для тех, кто захочет пойти дальше, у Михаила есть и полный курс, где помимо HTML5 и CSS3 делается вёрстка его сайта, но это уже платная версия. Она для тех, кто хочет всё и сразу. А для начала будет вполне достаточно и материала из бесплатной части: https://Hottab.programsite.ru/freehtml5
7 views
rm -r
📘 Полное руководство по PHP – Глава 11: Работа с файлами и загрузка данных на сервер 🐘

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

---

### 1. Загрузка файлов на сервер
PHP позволяет загружать файлы на сервер через HTML-форму.

#### HTML-форма
<form action="upload.php" method="post" enctype="multipart/form-data">
    Выберите файл: <input type="file" name="file">
    <input type="submit" value="Загрузить">
</form>


#### Обработка загрузки (upload.php)
<?php
if ($_FILES['file']['error'] === UPLOAD_ERR_OK) {
    $upload_dir = 'uploads/';
    $upload_file = $upload_dir . basename($_FILES['file']['name']);

    if (move_uploaded_file($_FILES['file']['tmp_name'], $upload_file)) {
        echo "Файл успешно загружен!";
    } else {
        echo "Ошибка при загрузке файла!";
    }
} else {
    echo "Ошибка: " . $_FILES['file']['error'];
}
?>


---

### 2. Чтение и запись файлов
PHP предоставляет функции для работы с файлами.

#### Чтение файла
<?php
$file = fopen("example.txt", "r") or die("Не удалось открыть файл!");
echo fread($file, filesize("example.txt"));
fclose($file);
?>


#### Запись в файл
<?php
$file = fopen("example.txt", "w") or die("Не удалось открыть файл!");
$text = "Привет, мир!";
fwrite($file, $text);
fclose($file);
?>


---

### 3. Работа с директориями
PHP позволяет создавать, удалять и переименовывать директории.

#### Создание директории
<?php
if (!file_exists("new_dir")) {
    mkdir("new_dir");
    echo "Директория создана!";
} else {
    echo "Директория уже существует!";
}
?>


#### Удаление директории
<?php
if (file_exists("new_dir")) {
    rmdir("new_dir");
    echo "Директория удалена!";
} else {
    echo "Директория не существует!";
}
?>


#### Переименование директории
<?php
if (file_exists("old_dir")) {
    rename("old_dir", "new_dir");
    echo "Директория переименована!";
} else {
    echo "Директория не существует!";
}
?>


---

### 4. Работа с CSV
CSV (Comma-Separated Values) — это формат для хранения табличных данных.

#### Чтение CSV
<?php
$file = fopen("data.csv", "r");
while (($data = fgetcsv($file, 1000, ",")) !== FALSE) {
    print_r($data);
}
fclose($file);
?>


#### Запись в CSV
<?php
$file = fopen("data.csv", "w");
$data = [
    ["Иван", 25],
    ["Мария", 30]
];
foreach ($data as $row) {
    fputcsv($file, $row);
}
fclose($file);
?>


---

### 5. Работа с JSON
JSON (JavaScript Object Notation) — это популярный формат для обмена данными.

#### Чтение JSON
<?php
$json = '{"name": "Иван", "age": 25}';
$array = json_decode($json, true);
print_r($array);
?>


#### Запись JSON
<?php
$array = ["name" => "Иван", "age" => 25];
$json = json_encode($array);
echo $json;
?>


---

### 6. Управление файловой системой
PHP предоставляет функции для работы с файловой системой.

#### Проверка существования файла
<?php
if (file_exists("example.txt")) {
    echo "Файл существует!";
} else {
    echo "Файл не существует!";
}
?>


#### Получение размера файла
<?php
echo "Размер файла: " . filesize("example.txt") . " байт";
?>


#### Удаление файла
<?php
if (unlink("example.txt")) {
    echo "Файл удалён!";
} else {
    echo "Ошибка при удалении файла!";
}
?>


---

🎯 Что дальше?
В следующей главе мы изучим работу с сессиями и куками, а также управление состоянием пользователя. Продолжайте изучать PHP, и вы сможете создавать мощные веб-приложения! 🚀

#PHP #Файлы #Загрузка #Программирование #Телеграм
7 views
rm -r
Изучаем Python: Урок 5 🐍
В этом уроке мы рассмотрим такие важные темы, как работа с базами данных, тестирование кода и создание веб-приложений. Эти навыки помогут вам создавать более сложные и надежные приложения.

---

### 📚 Что вы узнаете:
1. Базы данных: Как работать с SQLite для хранения и обработки данных.
2. Тестирование: Как писать тесты для вашего кода с помощью модуля unittest.
3. Веб-приложения: Как создать простое веб-приложение с использованием Flask.

---

### 🛠 Практические примеры:
1. Работа с SQLite: 

   import sqlite3

   conn = sqlite3.connect("example.db")
   cursor = conn.cursor()
   cursor.execute("CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY, name TEXT, age INTEGER)")
   cursor.execute("INSERT INTO users (name, age) VALUES (?, ?)", ("Алексей", 25))
   conn.commit()
   conn.close()


2. Тестирование кода: 

   import unittest

   def add(a, b):
       return a + b

   class TestMathOperations(unittest.TestCase):
       def test_add(self):
           self.assertEqual(add(2, 3), 5)

   if __name__ == "__main__":
       unittest.main()


3. Создание веб-приложения с Flask: 

   from flask import Flask
   app = Flask(__name__)

   @app.route("/")
   def home():
       return "Привет, мир!"

   if __name__ == "__main__":
       app.run(debug=True)


---

### 🚀 Почему это важно?
- Базы данных позволяют хранить и управлять большими объемами информации.
- Тестирование помогает убедиться, что ваш код работает правильно.
- Веб-приложения открывают двери к созданию полноценных онлайн-сервисов.

---

### 📌 Совет:
Попробуйте создать свое веб-приложение с использованием Flask и подключите к нему базу данных SQLite. Напишите тесты для проверки функциональности вашего приложения.

---

Подписывайтесь на наш канал, чтобы не пропустить следующие уроки!
👉 [https://t.me/Safety_Y](https://t.me/Safety_Y)

---

Если у вас есть вопросы или вы хотите узнать больше, пишите в комментариях! 🚀
6 views
rm -r
---

🚀 Изучаем HTML5 | Урок 8: Мультимедиа и графика

Привет, друзья! В этом уроке мы продолжим изучать возможности HTML5, сосредоточившись на мультимедиа и графике. Мы узнаем, как добавлять аудио и видео на страницы, а также как создавать графику с помощью <canvas> и <svg>. Поехали! 🎉

---

### 🎧 Аудио и видео в HTML5
HTML5 предоставляет встроенную поддержку для добавления аудио и видео на веб-страницы без необходимости использования сторонних плагинов.

#### Пример аудио: 
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Ваш браузер не поддерживает аудио элемент.
</audio>


#### Пример видео: 
<video controls width="600">
  <source src="video.mp4" type="video/mp4">
  Ваш браузер не поддерживает видео элемент.
</video>


- `controls`: Добавляет элементы управления (воспроизведение, пауза, громкость).
- `<source>`: Указывает источник файла и его тип.

---

### 🎨 Графика с помощью `<canvas>`
Элемент <canvas> используется для создания графики на лету с помощью JavaScript. Это мощный инструмент для рисования графиков, анимаций и даже игр.

#### Пример: 
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = '#FF0000';
  ctx.fillRect(10, 10, 50, 50);
</script>


- `getContext('2d')`: Получает контекст для рисования 2D графики.
- `fillRect(x, y, width, height)`: Рисует прямоугольник.

---

### 🖼 Графика с помощью `<svg>`
SVG (Scalable Vector Graphics) — это формат векторной графики, который позволяет создавать масштабируемые изображения. SVG можно использовать для создания сложных графических элементов, таких как иконки, диаграммы и анимации.

#### Пример: 
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>


- `<circle>`: Создает круг с заданными параметрами.
- `cx`, `cy`: Координаты центра круга.
- `r`: Радиус круга.

---

### 🎯 Практическое задание
1. Добавьте на свою страницу аудиоплеер и видеоплеер.
2. Создайте простой рисунок на элементе <canvas> с использованием JavaScript.
3. Используйте SVG для создания графического элемента, например, иконки или диаграммы.

---

💡 Совет: Используйте семантические теги (<header>, <main>, <footer>) для улучшения структуры вашей страницы. Это не только сделает код чище, но и поможет поисковым системам лучше понять ваш контент.

---

В следующем уроке мы начнем изучать CSS, чтобы ваши страницы стали стильными и красивыми! 🎨

Не забывайте задавать вопросы в комментариях, если что-то непонятно. Удачи в изучении HTML5! 🚀

#HTML5 #вебразработка #урокиHTML #программирование

👉 Подписывайтесь на наш канал: [https://t.me/Safety_Y](https://t.me/Safety_Y)
7 views
rm -r
Урок 8: Адаптивный дизайн и медиазапросы

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

---

### Что такое адаптивный дизайн?
Адаптивный дизайн — это подход к верстке, при котором страница автоматически подстраивается под размер экрана устройства. Это важно, ведь пользователи заходят на сайты с разных устройств: смартфонов, планшетов, ноутбуков и десктопов.

---

### Медиазапросы (`@media`)
Медиазапросы позволяют применять стили в зависимости от характеристик устройства, таких как ширина экрана, ориентация и разрешение.

#### Основной синтаксис: 
@media (условие) {
    /* Стили, которые применяются при выполнении условия */
}



#### Примеры условий:
1. Ширина экрана: 

   @media (max-width: 768px) {
       body {
           background-color: lightblue;
       }
   }


Этот стиль применится, если ширина экрана меньше или равна 768px.

2. Ориентация устройства: 

   @media (orientation: portrait) {
       body {
           font-size: 18px;
       }
   }


Этот стиль применится, если устройство находится в портретной ориентации.

3. Минимальная и максимальная ширина: 

   @media (min-width: 480px) and (max-width: 1024px) {
       .container {
           width: 90%;
       }
   }


Этот стиль применится для экранов от 480px до 1024px.

---

### Подходы к адаптивному дизайну

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

Пример: 

   body {
       font-size: 14px;
   }
   @media (min-width: 768px) {
       body {
           font-size: 16px;
       }
   }


2. Использование относительных единиц
Используйте %, em, rem, vw, vh вместо фиксированных значений (px), чтобы элементы масштабировались пропорционально.

Пример: 

   .container {
       width: 100%; /* Занимает всю ширину экрана */
       padding: 2rem; /* Отступы в зависимости от размера шрифта */
   }


3. Гибкие изображения
Чтобы изображения не выходили за пределы контейнера: 

   img {
       max-width: 100%;
       height: auto;
   }


---

### Практика
1. Создайте простую страницу с текстом и изображением.
2. Добавьте медиазапросы, чтобы:
- На экранах меньше 768px текст был больше, а изображение занимало всю ширину.
- На экранах больше 1200px контент был центрирован и занимал 60% ширины.

---

### Домашнее задание
Создайте адаптивную страницу:
- На мобильных устройствах элементы должны отображаться в один столбец.
- На планшетах — в два столбца.
- На десктопах — в три столбца.

Поделитесь результатами в комментариях! 😉

В следующем уроке мы разберем препроцессоры CSS (SASS/SCSS). Оставайтесь с нами! 💪

Подписывайтесь на наш канал: [https://t.me/Safety_Y](https://t.me/Safety_Y)

#CSS #ВебРазработка #УрокиCSS #Программирование
6 views
rm -r
👉Видеокурс "Создание движка на PHP и MySQL 2.0"
Я достаточно давно занимаюсь созданием сайтов. И у меня иногда мои знакомые спрашивают, где я всему этому научился. Я решил, что эта информация может быть кому-нибудь полезна и среди моих читателей.

Где-то 90% своих знаний я почерпнул из курсов Михаила Русакова. И вот не так давно у него вышел очень интересный курс по теме создания собственных движков для сайтов. Эта тема очень актуальна, если Вы хотите создавать по-настоящему профессиональные сайты. У готовых движков есть огромное количество минусов (многие о них даже не догадываются). О них Михаил рассказал здесь: https://Hottab.programsite.ru/php2

На той же странице можно заказать курс "Создание движка на PHP и MySQL 2.0", который я уже приобрёл и посмотрел сам. Мне он очень понравился, но отмечу, что курс рассчитан, в первую очередь, на тех, кто уже знаком с HTML+CSS+PHP+MySQL.

Поэтому если Вы хотите создавать качественные сайты и выделиться на фоне сайтов на Joomla всяких школьников, то могу посоветовать курс Михаила Русакова: https://Hottab.programsite.ru/php2 - по крайней мере в Рунете лучше курса по этой теме я ещё точно не видел.
8 views
rm -r
📘 Полное руководство по PHP – Глава 12: Работа с сессиями и куками 🐘

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

---

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

#### Начало сессии
<?php
session_start();
?>


#### Сохранение данных в сессии
<?php
session_start();
$_SESSION['username'] = "Иван";
echo "Данные сохранены в сессии!";
?>


#### Получение данных из сессии
<?php
session_start();
if (isset($_SESSION['username'])) {
    echo "Привет, " . $_SESSION['username'] . "!";
} else {
    echo "Сессия не найдена!";
}
?>


#### Удаление данных из сессии
<?php
session_start();
unset($_SESSION['username']);
echo "Данные удалены из сессии!";
?>


#### Завершение сессии
<?php
session_start();
session_destroy();
echo "Сессия завершена!";
?>


---

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

#### Установка куки
<?php
setcookie("username", "Иван", time() + 3600, "/");
echo "Кука установлена!";
?>


#### Получение данных из куки
<?php
if (isset($_COOKIE['username'])) {
    echo "Привет, " . $_COOKIE['username'] . "!";
} else {
    echo "Кука не найдена!";
}
?>


#### Удаление куки
<?php
setcookie("username", "", time() - 3600, "/");
echo "Кука удалена!";
?>


---

### 3. Пример: Авторизация с использованием сессий
#### Форма входа
<form action="login.php" method="post">
    Имя пользователя: <input type="text" name="username">
    Пароль: <input type="password" name="password">
    <input type="submit" value="Войти">
</form>


#### Обработка входа (login.php)
<?php
session_start();

$username = $_POST['username'];
$password = $_POST['password'];

// Проверка логина и пароля (пример)
if ($username === "Иван" && $password === "12345") {
    $_SESSION['username'] = $username;
    echo "Вход выполнен!";
} else {
    echo "Неверные данные!";
}
?>


#### Проверка авторизации
<?php
session_start();

if (isset($_SESSION['username'])) {
    echo "Привет, " . $_SESSION['username'] . "!";
} else {
    echo "Пожалуйста, войдите в систему.";
}
?>


#### Выход из системы
<?php
session_start();
session_destroy();
echo "Вы вышли из системы!";
?>


---

### 4. Пример: Запоминание пользователя с использованием кук
#### Установка куки при входе
<?php
$username = $_POST['username'];
$password = $_POST['password'];

if ($username === "Иван" && $password === "12345") {
    setcookie("username", $username, time() + 3600, "/");
    echo "Вход выполнен!";
} else {
    echo "Неверные данные!";
}
?>


#### Проверка куки
<?php
if (isset($_COOKIE['username'])) {
    echo "Привет, " . $_COOKIE['username'] . "!";
} else {
    echo "Пожалуйста, войдите в систему.";
}
?>


---

### 5. Безопасность
- Сессии: Используйте session_regenerate_id() для предотвращения фиксации сессии.
- Куки: Устанавливайте флаг HttpOnly и Secure для защиты от XSS и перехвата.

  setcookie("username", "Иван", time() + 3600, "/", "", true, true);


---

🎯 Что дальше?
В следующей главе мы изучим работу с базами данных, включая PDO и ORM. Продолжайте изучать PHP, и вы сможете создавать мощные веб-приложения! 🚀

#PHP #Сессии #Куки #Программирование #Телеграм
9 views
rm -r
Изучаем Python: Урок 6 🐍
В этом уроке мы рассмотрим такие важные темы, как работа с API, машинное обучение и создание графических интерфейсов (GUI). Эти навыки помогут вам создавать современные и интерактивные приложения.

---

### 📚 Что вы узнаете:
1. Работа с API: Как взаимодействовать с внешними сервисами через API.
2. Машинное обучение: Как использовать библиотеку scikit-learn для создания моделей машинного обучения.
3. Графические интерфейсы: Как создавать простые GUI с использованием библиотеки Tkinter.

---

### 🛠 Практические примеры:
1. Работа с API: 

   import requests

   response = requests.get("https://api.github.com")
   print(response.json())  # Вывод JSON-данных


2. Машинное обучение с `scikit-learn`: 

   from sklearn.datasets import load_iris
   from sklearn.model_selection import train_test_split
   from sklearn.ensemble import RandomForestClassifier
   from sklearn.metrics import accuracy_score

   data = load_iris()
   X_train, X_test, y_train, y_test = train_test_split(data.data, data.target, test_size=0.3)
   model = RandomForestClassifier()
   model.fit(X_train, y_train)
   predictions = model.predict(X_test)
   print("Точность модели:", accuracy_score(y_test, predictions))


3. Создание GUI с `Tkinter`: 

   import tkinter as tk

   def on_button_click():
       label.config(text="Привет, мир!")

   app = tk.Tk()
   app.title("Мое приложение")
   label = tk.Label(app, text="Нажмите кнопку")
   label.pack()
   button = tk.Button(app, text="Нажми меня", command=on_button_click)
   button.pack()
   app.mainloop()


---

### 🚀 Почему это важно?
- API позволяют взаимодействовать с внешними сервисами, такими как социальные сети, погодные сервисы и многое другое.
- Машинное обучение открывает двери к созданию интеллектуальных систем, способных анализировать данные и делать прогнозы.
- Графические интерфейсы делают ваши приложения более удобными и интерактивными.

---

### 📌 Совет:
Попробуйте создать свое приложение с использованием API, например, для получения данных о погоде. Или создайте простую модель машинного обучения для классификации данных.

---

Подписывайтесь на наш канал, чтобы не пропустить следующие уроки!
👉 [https://t.me/Safety_Y](https://t.me/Safety_Y)

---

Если у вас есть вопросы или вы хотите узнать больше, пишите в комментариях! 🚀
8 views
rm -r
🚀 Изучаем HTML5 | Урок 9: Формы и элементы ввода

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

---

### 📝 Основы форм
Формы создаются с помощью тега <form>. Они могут содержать различные элементы ввода, такие как текстовые поля, кнопки, флажки и многое другое.

#### Пример простой формы: 
<form action="/submit" method="post">
  <label for="name">Имя:</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <button type="submit">Отправить</button>
</form>


- `action`: Указывает URL, на который отправляются данные формы.
- `method`: Определяет метод отправки данных (GET или POST).
- `required`: Обязательное поле для заполнения.

---

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

#### Примеры: 
<label for="color">Выберите цвет:</label>
<input type="color" id="color" name="color">

<label for="date">Дата:</label>
<input type="date" id="date" name="date">

<label for="range">Уровень удовлетворения:</label>
<input type="range" id="range" name="range" min="0" max="10">

<label for="file">Загрузите файл:</label>
<input type="file" id="file" name="file">


- `type="color"`: Поле для выбора цвета.
- `type="date"`: Поле для выбора даты.
- `type="range"`: Ползунок для выбора значения в диапазоне.
- `type="file"`: Поле для загрузки файлов.

---

### 🔍 Валидация форм
HTML5 упрощает валидацию данных с помощью встроенных атрибутов.

#### Пример: 
<label for="phone">Телефон:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10}" required>


- `pattern`: Указывает регулярное выражение для проверки ввода.
- `type="tel"`: Поле для ввода номера телефона.

---

### 🎯 Практическое задание
1. Создайте форму регистрации с полями для имени, email, пароля и даты рождения.
2. Добавьте поле для выбора цвета и ползунок для оценки.
3. Используйте атрибуты валидации, чтобы сделать поля обязательными.

---

💡 Совет: Используйте семантические теги, такие как <fieldset> и <legend>, для группировки элементов формы. Это улучшит читаемость и доступность вашего кода.

---

В следующем уроке мы начнем изучать CSS, чтобы ваши формы и страницы стали стильными и привлекательными! 🎨

Не забывайте задавать вопросы в комментариях, если что-то непонятно. Удачи в изучении HTML5! 🚀

#HTML5 #вебразработка #урокиHTML #программирование

👉 Подписывайтесь на наш канал: [https://t.me/Safety_Y](https://t.me/Safety_Y)

-
8 views
rm -r
Урок 9: Препроцессоры CSS — SASS/SCSS

Привет, друзья! 👋 Сегодня мы познакомимся с препроцессорами CSS, такими как SASS/SCSS. Эти инструменты делают написание стилей проще, удобнее и мощнее. Вы узнаете, как использовать переменные, вложенности, миксины и многое другое. Поехали! 🚀

---

### Что такое SASS/SCSS?
SASS (Syntactically Awesome Style Sheets) — это препроцессор, который расширяет возможности CSS. Он добавляет функции, которых нет в обычном CSS, такие как:
- Переменные.
- Вложенности.
- Миксины (функции).
- Импорт файлов.

SCSS — это синтаксис SASS, который полностью совместим с обычным CSS.

---

### Основные возможности SASS/SCSS

#### 1. Переменные
Переменные позволяют хранить значения (цвета, размеры и т.д.) для повторного использования.

Пример: 
$primary-color: #3498db;
$font-size: 16px;

body {
    color: $primary-color;
    font-size: $font-size;
}



#### 2. Вложенности
Вложенности позволяют писать более читаемый и структурированный код.

Пример: 
nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    li {
        display: inline-block;
    }
    a {
        text-decoration: none;
    }
}



#### 3. Миксины (Mixins)
Миксины — это функции, которые позволяют повторно использовать блоки кода.

Пример: 
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.button {
    @include border-radius(10px);
}



#### 4. Импорт файлов
Вы можете разбивать стили на несколько файлов и импортировать их в основной файл.

Пример: 
@import 'variables';
@import 'buttons';
@import 'layout';



#### 5. Наследование (`@extend`)
Наследование позволяет повторно использовать стили одного элемента для другого.

Пример: 
.message {
    padding: 10px;
    border: 1px solid #ccc;
}

.success {
    @extend .message;
    border-color: green;
}



#### 6. Математические операции
SASS поддерживает математические операции прямо в стилях.

Пример: 
.container {
    width: 100% / 3; /* Ширина будет 33.333% */
}



---

### Как использовать SASS/SCSS?
1. Установите SASS через npm (Node.js): 

   npm install -g sass



2. Создайте файл .scss и напишите в нем стили.

3. Скомпилируйте SCSS в CSS: 

   sass input.scss output.css



4. Подключите скомпилированный CSS-файл к вашему HTML.

---

### Практика
1. Создайте файл styles.scss.
2. Используйте переменные для цветов и размеров.
3. Добавьте вложенности для структурирования стилей.
4. Создайте миксин для градиентного фона.

---

### Домашнее задание
Создайте проект с использованием SASS/SCSS:
- Разделите стили на несколько файлов (например, variables.scss, buttons.scss, layout.scss).
- Используйте миксины для создания кнопок с разными стилями.
- Подключите скомпилированный CSS к HTML.

Поделитесь результатами в комментариях! 😉

В следующем уроке мы разберем BEM-методологию для написания чистого и поддерживаемого CSS. Оставайтесь с нами! 💪

Подписывайтесь на наш канал: [https://t.me/Safety_Y](https://t.me/Safety_Y)

#CSS #ВебРазработка #УрокиCSS #Программирование
8 viewsedited  
rm -r
👉HTML5 и CSS3 с Нуля до Гуру
Друзья, у меня иногда спрашивают, а где я учился создавать сайты? Я всегда отвечаю, что у Михаила Русакова. И вот недавно передо мной встала ещё одна задача.

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

Вот как раз ссылка на курс: https://Hottab.programsite.ru/html5

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

Также меня очень порадовал бонусный курс - "Вёрстка под мобильные устройства". Раньше я думал, что это достаточно долгий и сложный процесс. На самом деле, всё оказалось очень и очень просто. И в 11-ти уроках Михаил показывает пример адаптирования реального сайта под самые различные мобильные устройства. Впрочем, и HTML5 с CSS3 применяются при вёрстке всё того же сайта.

Таким образом, курс "HTML5 и CSS3 с Нуля до Гуру" превзошёл все мои ожидания, и я его рекомендую всем тем, кто занимается созданием сайтов и пока не знаком с этими мега-полезными Web-технологиями: https://Hottab.programsite.ru/html5
7 views
rm -r
📘 Полное руководство по PHP – Глава 13: Работа с базами данных (PDO и ORM) 🐘

В этой главе мы углубимся в работу с базами данных в PHP. Вы узнаете, как использовать PDO (PHP Data Objects) для безопасного взаимодействия с базами данных, а также познакомитесь с основами ORM (Object-Relational Mapping).

---

### 1. PDO: Подключение к базе данных
PDO — это универсальный интерфейс для работы с различными СУБД (MySQL, PostgreSQL, SQLite и др.).

#### Подключение к MySQL
<?php
$host = 'localhost';
$dbname = 'my_database';
$username = 'root';
$password = '';

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    echo "Подключение успешно!";
} catch (PDOException $e) {
    echo "Ошибка подключения: " . $e->getMessage();
}
?>


---

### 2. Выполнение запросов
#### SELECT
<?php
$stmt = $pdo->query("SELECT * FROM users");
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
    echo "Имя: " . $row['name'] . ", Возраст: " . $row['age'] . "<br>";
}
?>


#### INSERT
<?php
$name = "Иван";
$age = 25;

$stmt = $pdo->prepare("INSERT INTO users (name, age) VALUES (:name, :age)");
$stmt->execute(['name' => $name, 'age' => $age]);
echo "Запись добавлена!";
?>


#### UPDATE
<?php
$id = 1;
$newAge = 30;

$stmt = $pdo->prepare("UPDATE users SET age = :age WHERE id = :id");
$stmt->execute(['age' => $newAge, 'id' => $id]);
echo "Запись обновлена!";
?>


#### DELETE
<?php
$id = 1;

$stmt = $pdo->prepare("DELETE FROM users WHERE id = :id");
$stmt->execute(['id' => $id]);
echo "Запись удалена!";
?>


---

### 3. Транзакции
Транзакции позволяют выполнять несколько запросов как единое целое. Если один запрос завершится ошибкой, все изменения откатываются.

Пример:
<?php
try {
    $pdo->beginTransaction();

    $stmt1 = $pdo->prepare("INSERT INTO users (name, age) VALUES (:name, :age)");
    $stmt1->execute(['name' => 'Иван', 'age' => 25]);

    $stmt2 = $pdo->prepare("INSERT INTO users (name, age) VALUES (:name, :age)");
    $stmt2->execute(['name' => 'Мария', 'age' => 30]);

    $pdo->commit();
    echo "Транзакция успешно завершена!";
} catch (Exception $e) {
    $pdo->rollBack();
    echo "Ошибка: " . $e->getMessage();
}
?>


---

### 4. ORM: Введение
ORM (Object-Relational Mapping) — это технология, которая позволяет работать с базой данных как с объектами в коде. Популярные ORM для PHP: Eloquent (Laravel), Doctrine.

#### Пример с Eloquent
1. Установите Eloquent через Composer:

   composer require illuminate/database

2. Настройка:

   <?php
   require 'vendor/autoload.php';

   use Illuminate\Database\Capsule\Manager as Capsule;

   $capsule = new Capsule;

   $capsule->addConnection([
       'driver' => 'mysql',
       'host' => 'localhost',
       'database' => 'my_database',
       'username' => 'root',
       'password' => '',
       'charset' => 'utf8',
       'collation' => 'utf8_unicode_ci',
       'prefix' => '',
   ]);

   $capsule->setAsGlobal();
   $capsule->bootEloquent();
   ?>

3. Создание модели:

   <?php
   class User extends Illuminate\Database\Eloquent\Model {
       protected $table = 'users';
   }

   $users = User::all();
   foreach ($users as $user) {
       echo "Имя: " . $user->name . ", Возраст: " . $user->age . "<br>";
   }
   ?>


---

### 5. Миграции
Миграции позволяют управлять структурой базы данных через код.

#### Пример с Eloquent
1. Создайте миграцию:

   <?php
   use Illuminate\Database\Capsule\Manager as Capsule;

   Capsule::schema()->create('users', function ($table) {
       $table->increments('id');
       $table->string('name');
       $table->integer('age');
       $table->timestamps();
   });
   ?>

2. Примените миграцию:

   <?php
   Capsule::schema()->create('users', function ($table) {
       $table->increments('id');
       $table->string('name');
       $table->integer('age');
       $table->timestamps();
   });
   ?>




🎯 Что дальше?
В следующей главе мы изучим работу с API, включая создание и использование RESTful API. Продолжайте изучать PHP, и вы сможете создавать мощные
8 views
rm -r
Урок 7: Работа с функциями в Python 🐍

Привет, друзья! Сегодня мы продолжаем изучать Python и поговорим о функциях — одном из самых важных инструментов в программировании. 🚀

### Что такое функция?
Функция — это блок кода, который выполняет определенную задачу и может быть вызван многократно. Это помогает избежать дублирования кода и делает программу более структурированной.

### Как создать функцию?
В Python функции создаются с помощью ключевого слова def. Вот пример простой функции:

def greet(name):
    print(f"Привет, {name}! Добро пожаловать в наш канал!")


### Как вызвать функцию?
После создания функции её можно вызвать в любом месте программы:

greet("Анна")


Вывод:
Привет, Анна! Добро пожаловать в наш канал!


### Возвращение значений
Функции могут возвращать значения с помощью ключевого слова return. Например:

def add(a, b):
    return a + b

result = add(5, 3)
print(result)  # Вывод: 8


### Параметры по умолчанию
Вы можете задать значения по умолчанию для параметров функции:

def greet(name="Гость"):
    print(f"Привет, {name}!")

greet()  # Вывод: Привет, Гость!
greet("Иван")  # Вывод: Привет, Иван!


### Зачем нужны функции?
- Повторное использование кода: Один раз написал — много раз использовал.
- Упрощение кода: Разбиваем сложные задачи на маленькие части.
- Удобство отладки: Легче находить ошибки в небольших блоках кода.

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

---

Если вам понравился урок, ставьте ❤️ и делитесь с друзьями!
Все вопросы и решения задачек можно обсудить в комментариях. 😉

👉 Подписывайтесь на наш канал: [Safety_Y](https://t.me/Safety_Y)
#Python #Программирование #УрокиPython #Функции
9 views
rm -r
🚀 Изучаем HTML5 | Урок 10: Мультимедиа и графика

Привет, друзья! В этом уроке мы продолжим изучать возможности HTML5, сосредоточившись на мультимедиа и графике. Мы узнаем, как добавлять аудио и видео на страницы, а также как создавать графику с помощью <canvas> и <svg>. Поехали! 🎉

---

### 🎧 Аудио и видео в HTML5
HTML5 предоставляет встроенную поддержку для добавления аудио и видео на веб-страницы без необходимости использования сторонних плагинов.

#### Пример аудио: 
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Ваш браузер не поддерживает аудио элемент.
</audio>


#### Пример видео: 
<video controls width="600">
  <source src="video.mp4" type="video/mp4">
  Ваш браузер не поддерживает видео элемент.
</video>


- `controls`: Добавляет элементы управления (воспроизведение, пауза, громкость).
- `<source>`: Указывает источник файла и его тип.

---

### 🎨 Графика с помощью `<canvas>`
Элемент <canvas> используется для создания графики на лету с помощью JavaScript. Это мощный инструмент для рисования графиков, анимаций и даже игр.

#### Пример: 
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = '#FF0000';
  ctx.fillRect(10, 10, 50, 50);
</script>


- `getContext('2d')`: Получает контекст для рисования 2D графики.
- `fillRect(x, y, width, height)`: Рисует прямоугольник.

---

### 🖼 Графика с помощью `<svg>`
SVG (Scalable Vector Graphics) — это формат векторной графики, который позволяет создавать масштабируемые изображения. SVG можно использовать для создания сложных графических элементов, таких как иконки, диаграммы и анимации.

#### Пример: 
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>


- `<circle>`: Создает круг с заданными параметрами.
- `cx`, `cy`: Координаты центра круга.
- `r`: Радиус круга.

---

### 🎯 Практическое задание
1. Добавьте на свою страницу аудиоплеер и видеоплеер.
2. Создайте простой рисунок на элементе <canvas> с использованием JavaScript.
3. Используйте SVG для создания графического элемента, например, иконки или диаграммы.

---

💡 Совет: Используйте семантические теги (<header>, <main>, <footer>) для улучшения структуры вашей страницы. Это не только сделает код чище, но и поможет поисковым системам лучше понять ваш контент.

---

В следующем уроке мы начнем изучать CSS, чтобы ваши страницы стали стильными и красивыми! 🎨

Не забывайте задавать вопросы в комментариях, если что-то непонятно. Удачи в изучении HTML5! 🚀

#HTML5 #вебразработка #урокиHTML #программирование

👉 Подписывайтесь на наш канал: [https://t.me/Safety_Y](https://t.me/Safety_Y)
9 views
rm -r
Урок 10: Методология BEM — Пишем чистый и поддерживаемый CSS

Привет, друзья! 👋 Сегодня мы изучим BEM (Block, Element, Modifier) — методологию, которая помогает писать чистый, понятный и легко поддерживаемый CSS-код. BEM особенно полезен в больших проектах, где важно избегать конфликтов стилей и упрощать работу в команде. Поехали! 🚀

---

### Что такое BEM?
BEM — это подход к организации CSS-кода, который делит интерфейс на независимые блоки. Это делает код более модульным и предсказуемым.

Основные понятия:
1. Блок (Block)
Независимый компонент, который имеет смысл сам по себе (например, кнопка, меню, карточка).

2. Элемент (Element)
Часть блока, которая не имеет смысла вне его (например, заголовок или иконка внутри карточки).

3. Модификатор (Modifier)
Свойство, которое изменяет внешний вид или поведение блока/элемента (например, кнопка может быть большой или красной).

---

### Синтаксис BEM
BEM использует строгую нотацию для именования классов:

1. Блок
Название блока пишется одним словом (например, .menu, .button).

2. Элемент
Название элемента отделяется от блока двойным подчеркиванием __ (например, .menu__item, .button__icon).

3. Модификатор
Название модификатора отделяется от блока или элемента двойным дефисом -- (например, .button--large, .menu__item--active).

---

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

#### HTML: 
<div class="card">
    <img class="card__image" src="image.jpg" alt="Image">
    <h2 class="card__title">Заголовок</h2>
    <p class="card__description">Описание карточки.</p>
    <button class="card__button card__button--primary">Кнопка</button>
</div>



#### CSS: 
/* Блок */
.card {
    border: 1px solid #ccc;
    padding: 20px;
}

/* Элементы */
.card__image {
    width: 100%;
    height: auto;
}

.card__title {
    font-size: 24px;
    margin-bottom: 10px;
}

.card__description {
    font-size: 16px;
    color: #666;
}

/* Модификатор */
.card__button--primary {
    background-color: blue;
    color: white;
}



---

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

2. Понятность
Имена классов четко описывают структуру и назначение элементов.

3. Отсутствие конфликтов
Уникальные имена классов предотвращают случайные переопределения стилей.

4. Масштабируемость
BEM отлично подходит для больших проектов и командной работы.

---

### Практика
1. Создайте блок header с элементами logo, menu и search.
2. Добавьте модификатор для активного пункта меню.
3. Напишите стили, используя BEM-нотацию.

---

### Домашнее задание
Создайте страницу с использованием BEM:
- Блок header с логотипом и навигацией.
- Блок card с изображением, заголовком и кнопкой.
- Добавьте модификаторы для кнопок (например, primary и secondary).

Поделитесь результатами в комментариях! 😉

На этом наш курс по CSS подходит к концу. Мы изучили основы, Flexbox, Grid, анимации, адаптивный дизайн, препроцессоры и методологию BEM. Теперь вы готовы создавать современные и красивые веб-страницы! 🎉

Подписывайтесь на наш канал: [https://t.me/Safety_Y](https://t.me/Safety_Y)

#CSS #ВебРазработка #УрокиCSS #Программирование
9 views
rm -r
👉Основы JavaScript, jQuery и Ajax
Недавно мне надо было в кратчайшие сроки освоить JavaScript. Я начал искать информацию в Интернете. Вначале мне попадались толстенные, да и ещё, как правило, устаревшие книги, пока я не наткнулся на один интересный курс.

Это курс достаточно известного в своих кругах специалиста в области создания сайтов - Михаил Русакова.

Сразу даю ссылку на курс: https://Hottab.programsite.ru/freejs

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

А самое удивительное, что этот курс абсолютно бесплатный!

В общем, если Вы хотите изучить JavaScript, то могу смело Вам рекомендовать курс, который и Ваш покорный слуга прошёл на одном дыхании: https://Hottab.programsite.ru/freejs
9 views