Вы хотите создать видеоролик бесплатно? Возможно, вам понадобится скринкаст для вашего канала YouTube или в учебных целях. В этой статье мы покажем вам, как создать видеоролик с открытым исходным кодом. Читать
Архив автора: admin
Создание загрузчика анимации сканирования с использованием HTML и CSS
В этой статье мы узнаем, как создать анимацию сканирования. Это можно использовать для добавления интерактивности странице загрузчика. Для этого используются
простые HTML и CSS.
Подход:
- Сначала мы создадим HTML-файл, в который мы собираемся добавить div для добавления в него диапазона.
- Затем мы создадим стиль CSS, чтобы придать анимационные эффекты анимации сканирования.
Мы начнем с определения разделов HTML и CSS на странице, как показано ниже.
Раздел HTML: в этом разделе определяется структура страницы.
- Сначала мы создадим HTML-файл.
- Затем мы напишем шаблонный код, необходимый для HTML-страницы.
- Затем мы свяжем файл CSS или напрямую добавим необходимый CSS, который обеспечивает все эффекты анимации.
- В разделе body мы добавим диапазон, чтобы добавить наш текст.
- index.html
<!DOCTYPE html> <html lang="ru"> <head> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="scan"> <img src= "https://readmag.ru/wp-content/uploads/2021/04/Sozdanie-zagruzchika-animatsii-skanirovaniya-s-ispolzovaniem-HTML-i-CSS.png" alt="barcode" /> </div> </body> </html>
Раздел CSS: В этом разделе мы определим CSS страницы. Используя CSS, мы добавим различные типы анимации и эффектов к нашей HTML-странице, чтобы она выглядела интерактивной для всех пользователей.
- Сначала мы сбросим все эффекты браузера, чтобы все было согласовано во всех браузерах.
- Затем мы определим стиль, который будет присвоен элементам, включая размер и положение.
- Мы будем использовать @keyframe и псевдокласс, чтобы добавить эффекты анимации к определенным классам.
.scan {
width: 10em;
text-align: center;
padding: 6px 2px;
position: absolute;
left: 0;
right: 0;
top: 50%;
margin: auto;
border: dashed .25em rgb(90, 85, 85);
transform: translate(-50%);
}
.scan::after {
content: '';
background: rgb(23, 162, 74);
width: 0.25em;
height: 3.5em;
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
opacity: 7;
z-index: 2;
animation: 2s infinite ease-in-out roll;
}
.scan img {
height: 30px;
width: 98%;
}
@keyframes roll {
0% {
transform: translateX(-50px);
}
50% {
transform: translateX(50px);
}
100% {
transform: translateX(-50px);
}
}
Вывод:
2021-04-29T12:19:36
Программирование
7 лучших языков программирования для серверной веб-разработки
Даже если вы новичок, самое меньшее, что вы могли бы знать, это то, что веб-разработка в основном подразделяется на два аспекта: фронтенд-разработка и бэкэнд-разработка. И очевидно, что у них обоих есть соответствующий набор инструментов и технологий. Например, когда мы говорим о Frontend-разработке, в первую очередь всегда используются 3 имени — HTML, CSS и JavaScript.
Точно так же, когда дело доходит до серверной веб-разработки — нам в первую очередь требуется язык программирования серверной части (или, вы можете сказать, серверный), чтобы веб-сайт работал вместе с различными другими инструментами и технологиями, такими как базы данных, фреймворки, веб-серверы и т. д. и т.п.
Но поскольку существуют сотни языков программирования, какой язык следует выбрать для серверной веб-разработки… ??
Хорошо, позвольте нам сказать вам — вам необходимо выбрать язык программирования, учитывая различные параметры, такие как требования проекта, его кривая обучения, производительность, надежность и т. д. Кроме того, вы также должны учитывать спрос и популярность. конкретного языка программирования в мире технологий, особенно если вы хотите изучить язык программирования с точки зрения карьеры, поскольку нет смысла изучать язык программирования, который устарел или не востребован на рынке.
В этой статье мы предоставляем вам список лучших языков программирования, которые вы можете изучить, чтобы начать веб-разработку:
1. JavaScript
Всякий раз, когда речь идет о веб-разработке — скорее всего, в 9 из 10 случаев речь идет о названии JavaScript. Согласно ежегодным отчетам различных популярных платформ, таких как Stack Overflow и Octoverse, JavaScript является одним из наиболее предпочтительных и ведущих языков программирования в мире технологий. Одна из основных причин этого заключается в том, что конкретный язык может использоваться как для интерфейсной веб-разработки, так и для внутренней веб-разработки. Глядя на несколько прошлых тенденций и статистику, можно сказать, что популярность Node.js каким-то образом увеличила использование JavaScript в качестве внутреннего языка для веб-разработки. Между тем, язык предоставляет вам несколько замечательных функций для внутренней разработки, таких как облегченный язык сценариев, динамический набор текста, интерпретируемый, поддержка объектно-ориентированного программирования, проверка на стороне клиента,
- Фреймворки JavaScript для серверной веб-разработки: Next.js, Express, MeteorJS и т. д.
- Популярные сайты, использующие JavaScript: Facebook, Google, eBay и т. д.
2. Python
Хотя Python довольно известен среди людей своей совместимостью с передовыми технологиями, такими как машинное обучение, Интернет вещей (IoT), Data Science и т. д., Позвольте нам сказать вам, что этот обогащающий язык программирования широко используется и очень подходит для серверной веб-разработки. также. Даже один из ведущих ИТ-гигантов в настоящее время Google в значительной степени полагается на Python, и это один из трех основных языков, используемых Google (два других — Java и C ++). Одним из основных преимуществ использования Python для веб-разработки является огромная коллекция стандартных библиотек, которые делают работу разработчиков сравнительно простой и эффективной. Дополнительные выдающиеся и уникальные особенности Python, такие как улучшенная читаемость кода. более простая интеграция с другими языками, поддержка программирования GUI, переносимость,
- Фреймворки Python для серверной веб-разработки: Django, Flask, Pyramid и т. д.
- Популярные веб-сайты, использующие Python: Spotify, Pinterest, Instacart и т. д.
3. PHP
PHP (или, можно сказать, препроцессор гипертекста) — ветеран в мире веб-разработки. Этот серверный язык сценариев с открытым исходным кодом создан в 1994 году и специально используется для веб-разработки. Поскольку это интерпретируемый язык — он также не требует компилятора, а также может работать практически во всех основных операционных системах, таких как Windows, Linux, macOS, Unix и т. д. Говоря о расширяющих функциях PHP, таких очень много. простота в освоении, кроссплатформенная совместимость, функции ООП, поддержка различных стандартных баз данных, таких как MySQL, SQLite и т. д., огромная поддержка сообщества и многие другие. В остальном PHP очень безопасен как язык сценариев на стороне сервера, поскольку в PHP имеется множество хеш-функций для шифрования данных пользователя. В частности,
- PHP-фреймворки для серверной веб-разработки: Laravel, CodeIgniter, Symfony и т. д.
- Популярные веб-сайты, использующие PHP: WordPress, MailChimp, Flickr и т. д.
4. Java
Java — еще один пример языка программирования для серверной веб-разработки. Объектно-ориентированный язык программирования широко используется для разработки веб-приложений корпоративного уровня наряду с разработкой приложений для Android, настольных приложений, научных приложений и т. д. Основное преимущество использования Java заключается в том, что он работает по принципу Write Once Run Anywhere, т. е. , скомпилированный код Java может быть выполнен на любой платформе, поддерживающей Java, без необходимости повторной компиляции. Говоря более конкретно, код Java сначала компилируется в байтовый код, который не зависит от машины, а затем этот байтовый код выполняется на JVM независимо от базовой архитектуры. Кроме того, Java поддерживает многопоточность, которая позволяет одновременное выполнение двух или более потоков для максимального использования ЦП.
- Фреймворки Java для серверной веб-разработки: Spring, Struts, Grails
- Популярные веб-сайты, использующие Java: LinkedIn, IRCTC, Yahoo и т. д.
5. Ruby
Ruby — это интерпретируемый язык программирования общего назначения, который поддерживает различные парадигмы программирования, такие как процедурное, функциональное и объектно-ориентированное программирование. Этот язык широко используется для веб-разработки по всему миру и очень рекомендуется новичкам для начала работы с серверной веб-разработкой, так как он сравнительно проще в освоении. Как и Python, Ruby также фокусируется на повышении производительности разработчиков, что в конечном итоге ускоряет процесс веб-разработки. Конкретный язык поддерживает почти все основные платформы, такие как Windows, Mac и Linux, и позвольте нам также сказать вам, что Ruby сильно основан на многих других языках программирования, таких как Perl, Lisp, Eiffel, Ada и т. д. Динамическая типизация и Duck набор текста, автоматический сбор мусора, большая стандартная библиотека, настраиваемое поведение отправки, гибкость и
- Ruby Frameworks для серверной веб-разработки: Ruby on Rails, Sinatra, Grape и т. д.
- Популярные сайты, использующие Ruby: Airbnb, Shopify, Slideshare и т. д.
6. Golang
Если вы думаете, что Go не так популярен среди разработчиков, позвольте нам сказать вам, согласно прошлогоднему отчету Stack Overflow — это был один из 5 самых любимых языков программирования разработчиками во всем мире. Go — это статически типизированный язык программирования, разработанный в Google и имеющий синтаксис, очень похожий на язык C. Язык позволяет разработчикам более эффективно создавать масштабируемые и безопасные веб-приложения. Одним из основных преимуществ использования Go является то, что он обеспечивает отличную поддержку многопоточности, а также имеет функцию сборки мусора для автоматического управления памятью. Некоторые из других значительных особенностей языка Go — это простой в изучении, читаемый код, поддерживаемый Google, скомпилированный язык, управление пакетами, мощная стандартная библиотека, поддержка параллелизма, высокая производительность и многое другое.
- Go Framework для серверной веб-разработки: beego, echo, revel и т. д.
- Популярные веб-сайты, использующие Go: Dropbox, SoundCloud, Dailymotion и т. д.
7. C#
C# — один из тех немногих языков, который в течение последних нескольких лет постоянно входит в пятерку лучших языков программирования по различным стандартным индексам. Однако вам необходимо знать, что этот универсальный язык изначально был разработан Microsoft в первую очередь для среды.Net. Наряду с серверной веб-разработкой, теперь C # широко используется во многих областях, таких как разработка приложений Windows, разработка игр и т. д. Язык предоставляет вам различные дополнительные функции, такие как более быстрая компиляция, совместимость, масштабируемость и возможность обновления, компонентно-ориентированная. & структурированный язык и многие другие. Кроме того, C # предлагает богатый набор библиотек, которые помогают разработчикам ускорить и повысить эффективность процесса разработки. Следовательно,
- C # Framework для серверной веб-разработки: .NET
- Популярные веб-сайты, использующие C #: GoDaddy, Marketwatch, Stack Overflow и т. д.
Итак, мы упомянули наиболее рекомендуемые и стоящие языки программирования для серверной веб-разработки, которые вы можете изучить. Однако позвольте нам еще раз напомнить вам, что прежде чем выбирать какой-либо конкретный язык из вышеупомянутых, вам необходимо рассмотреть различные индивидуальные аспекты, в том числе ваши цели, требования к проекту, кривую обучения и т. д.
2021-04-29T10:44:32
Программирование
Лучшие приложения для создания мокапов в Linux
В этой статье будут перечислены некоторые полезные инструменты дизайна макетов/каркасов/UX, которые позволяют создавать демонстрации и прототипы продуктов. Для создания мокапов доступно множество проприетарных веб-инструментов.
Однако в этой статье основное внимание будет уделено бесплатным инструментам создания макетов с открытым исходным кодом, которые можно установить и использовать в Linux. Обратите внимание, что макеты, каркасы, диаграммы и графика пользовательского интерфейса не обязательно являются одними и теми же терминами, и между ними есть некоторые различия. Однако все они служат одной цели — созданию визуальных образов и прототипов программного обеспечения и других продуктов, прежде чем вы добавите к ним какие-либо функции. В этой статье будут рассмотрены такие инструменты, доступные для Linux. Читать
Как исправить System Program Problem Detected (обнаружена ошибка в системной программе) в Ubuntu
Последнюю пару недель практически каждый раз при запуске Ubuntu встречал меня словами “system program problem detected”. Я игнорировал их, но спустя какое-то время мне это надоело. Вам также вряд ли понравится такое оповещение при каждом запуске системы: Читать
Как добавить окно поиска Google AdSense на веб-сайт
Google AdSense – один из популярных способов заработка в Интернете, размещая рекламу на сайте. Чтобы получить одобрение AdSense, вам необходимо отправить свой веб-сайт на проверку. После того, как команда Google AdSense одобрит ваш веб-сайт, они предоставят код JavaScript, который вам необходимо разместить на веб-сайте. На панели управления AdSense можно получить объявления разных размеров, например 728 90, 336 280, 320 100, 300 600, для размещения на веб-сайте.
Помимо размещения рекламы, Google AdSense предоставляет поисковую систему Google для веб-сайта, которая помогает получать больше доходов от Google AdSense. Если вы издатель AdSense, вам следует попробовать этот метод, чтобы зарабатывать деньги с помощью AdSense. Когда пользователь вводит ключевое слово в поле поиска вашего веб-сайта, он перенаправляется на страницу поиска, где результаты поиска будут отображаться вместе с некоторыми релевантными объявлениями. Если пользователь нажимает одну из рекламных ссылок на странице результатов поиска, вы получаете за это комиссию.
AdSense предоставляет код для формы поиска и результатов поиска, который нам нужно разместить в соответствующих местах. Когда вы добавляете код JavaScript в форму поиска Google, макет формы поиска по умолчанию, предоставляемый Google, будет отображаться на веб-сайте.
Возможно, вы захотите заменить форму поиска Google по умолчанию другим макетом. Сейчас мы покажем вам, как это сделать.
Давайте сначала рассмотрим пошаговое руководство по интеграции поисковой системы Google на веб-сайт.
Добавить окно поиска Google AdSense и код результата поиска
Войдите в свою учетную запись AdSense. На панели управления AdSense нажмите Мои объявления-> Поиск-> Системы пользовательского поиска.
Нажмите кнопку «Новые системы пользовательского поиска». На следующей странице заполните форму. В поле «Что искать» выберите второй вариант «Только выбранные мной сайты» и введите в поле URL своего веб-сайта.
Прокрутите страницу вниз, нажмите на результаты поиска, выберите последний вариант «на моем веб-сайте» и введите URL-адрес страницы поиска вашего веб-сайта, на которой вы будете отображать результаты поиска.
Затем нажмите кнопку «Сохранить и получить код». Откроется всплывающее окно. Скопируйте код окна поиска и код результата поиска.
Код окна поиска появится на месте вашего окна поиска. И код результата поиска нужно будет разместить на странице результатов поиска.
Заменить окно поиска AdSense
Когда мы вводим ключевое слово в поле поиска AdSense и нажимаем кнопку отправки, оно перенаправляет на страницу поиска с параметром ‘? Q = YOUR_KEYWORD’.
Например, если URL вашей страницы результатов поиска – http://yourdomain.com/search. Тогда ваш динамический URL станет http://yourdomain.com/search?q=wordpress. Здесь wordpress – это ключевое слово, которое мы хотим найти.
Если вы хотите заменить окно поиска Google AdSense по умолчанию, вам просто нужно установить URL-адрес действия формы на страницу поиска и имя поля поиска как «q».
<?php
$q = isset($_GET['q'])? $_GET['q']: '';
?>
<form class="search-form" method="get" action="http://yourdomain.com/search">
<input type="search" name="q" value="<?php echo $q; ?>" />
<input type="submit" name="search" value="Search" />
</form>
Это оно! Мы надеемся, что вы узнали о добавлении поиска AdSense на веб-сайт. Если у вас есть вопросы или предложения, оставьте комментарий ниже.
Статьи по Теме
- Как настроить поиск продуктов WooCommerce на вашем сайте WordPress
- Как создать форму пользовательского поиска в WordPress
Источник записи: artisansweb.net
2021-04-26T14:22:00
PHP