« طراحی سایت و گرافیک »

✅ آموزش ساخت کپچا کد با PHP

🔸در مثال مثال از ایجاد کپچا با استفاده از PHP و GD Library ارائه می‌دهم.

1⃣ ایجاد تصویر کپچا با php

🔸ابتدا یک فایل به نام captcha.php ایجاد کنید:

<?php
session_start();

#https://yangx.top/Web_Designer98
function generateRandomString($length = 6) {
    return substr(str_shuffle(str_repeat("0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ", $length)), 0, $length);
}

#https://yangx.top/Web_Designer98
$captcha_code = generateRandomString();
$_SESSION['captcha'] = $captcha_code;

#https://yangx.top/Web_Designer98
header('Content-Type: image/png');
$width = 200;
$height = 70;
$image = imagecreatetruecolor($width, $height);

#https://yangx.top/Web_Designer98
$background_color = imagecolorallocate($image, 255, 255, 255);
$text_color = imagecolorallocate($image, 0, 0, 0);
$line_color = imagecolorallocate($image, 64, 64, 64);
$arc_color = imagecolorallocate($image, 255, 0, 0);

#https://yangx.top/Web_Designer98
imagefilledrectangle($image, 0, 0, $width, $height, $background_color);

#https://yangx.top/Web_Designer98
for ($i = 0; $i < 5; $i++) {
    imageline($image, rand(0, $width), rand(0, $height), rand(0, $width), rand(0, $height), $line_color);
}
#https://yangx.top/Web_Designer98
for ($i = 0; $i < 3; $i++) {
    imagearc($image, rand(0, $width), rand(0, $height), rand(50, 100), rand(20, 80), rand(0, 360), rand(0, 360), $arc_color);
}

#https://yangx.top/Web_Designer98
imagettftext($image, 30, 0, 40, 50, $text_color, 'Arial.ttf', $captcha_code); 

# https://yangx.top/Web_Designer98
imagepng($image);
imagedestroy($image);
?>

2⃣ یک فرم HTML ایجاد کنید. نام این فایل را form.php بگذارید:

<!DOCTYPE html>
<!-- https://yangx.top/Web_Designer98 -->
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web_Designer98</title>
</head>
<body>
<!-- https://yangx.top/Web_Designer98 -->
    <form action="process.php" method="post">
        <label for="captcha">کپچا: </label>
        <img src="captcha.php" alt="کپچا" /><br />
        <input type="text" name="captcha_input" required />
        <input type="submit" value="ارسال" />
    </form>
<!-- https://yangx.top/Web_Designer98 -->
</body>
</html>

3⃣ یک فایل دیگر به نام process.php ایجاد کنید

<?php
session_start();

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
#https://yangx.top/Web_Designer98
    $captcha_input = $_POST['captcha_input'];
    
    if ($_SESSION['captcha'] === $captcha_input) {
        echo "کپچا صحیح است!🤩";
    } else {
        echo "کپچا اشتباه است!😟";
    }
} else {
    echo "لطفا از طریق فرم ارسال کنید.";
}
# https://yangx.top/Web_Designer98
?>

💢 توضیحات:
1⃣ مطمئن شوید که GD Library روی سرور شما فعال است.

2⃣ برای فونت Arial.ttf، مطمئن شوید که فایل فونت در مسیر صحیح قرار دارد.

#css #html #js #php

🌈 Web_Designer98.t.me

👍2👏1

299 viewsedited 09:36

« طراحی سایت و گرافیک »

✅ آموزش مینفی کردن کدها در ویندوز با استفاده از Git، می‌توانید از ابزارهایی مانند Terser (برای جاوا اسکریپت) یا cssnano (برای CSS) استفاده کنید. فرض می‌کنیم که شما Node.js و npm را نصب کرده‌اید. مراحل زیر را دنبال کنید:

1⃣ ابتدا از ترمینال یا CMD دستور زیر را برای نصب Terser و cssnano اجرا کنید:

npm install terser cssnano --save-dev

2⃣ نوشتن اسکریپت در فایل package.json خود، یک اسکریپت برای مینفی کردن فایل‌ها اضافه کنید. مانند زیر:

{
  "scripts": {
    "minify-js": "terser src/**/*.js -o dist/app.min.js",
    "minify-css": "cssnano src/**/*.css dist/styles.min.css"
  }
}

3⃣ حالا با استفاده از دستور زیر می‌توانید کدهای خود را مینفی کنید:

npm run minify-js
npm run minify-css

3⃣ اگر می‌خواهید این پروسه را قبل از کامیت کردن (commit) خودکار انجام دهید، می‌توانید از git hooks استفاده کنید. شما می‌توانید pre-commit hook را ایجاد کنید که مینفی کردن را انجام دهد.

4⃣ برای این کار می‌توانید از husky استفاده کنید:

npx husky-init && npm install

5⃣ سپس فرمان زیر را برای فعال‌سازی pre-commit hook اضافه کنید:

npx husky add .husky/pre-commit "npm run minify-js && npm run minify-css"

🔘 حالا هر بار که شما یک commit انجام می‌دهید، کدهای شما به طور خودکار مینفی خواهد شد.

#وب #گیت #css #js
🌈 Web_Designer98.t.me

👍2

390 views17:41

« طراحی سایت و گرافیک »

🔸کد آماده سازنده متن دست نویس

🔹ما کد ایجاد یک تولید کننده متن را می گذاریم که در آن می توانید یک فونت را انتخاب کنید و سپس این متن را به صورت تصویر دانلود کنید.

💻 کد را دریافت کنید

#html #css #js #web #php
🌈 Web_Designer98.t.me

❤‍🔥1

359 views14:20

« طراحی سایت و گرافیک »

0:37

This media is not supported in your browser

VIEW IN TELEGRAM

🔸️ابزار خوبی که به شما امکان می دهد ترتیب اجرای کدهای JS را به وضوح مشاهده کنید

🔹️می توانید نمونه های آماده را انتخاب کنید یا کد خود را وارد کنید؛ نتیجه را مشاهده کنید؛ برای درک کلی جاوا اسکریپت بسیار مفید است

🌐 https://www.jsv9000.app/
🌐 https://github.com/Hopding/js-visualizer-9000-client

#is #web #html #css

🌈 Web_Designer98.t.me

👍2

386 views13:28

« طراحی سایت و گرافیک »

This media is not supported in your browser

VIEW IN TELEGRAM

🚀 آموزش سریع برنامه‌نویسی با OverAPI! 🌐

آیا به دنبال یک مرجع سریع برای سینتکس‌ها و مثال‌ها در زبان‌ها و فناوری‌های مختلف هستید؟ OverAPI برای توسعه‌دهندگان front-end، مخصوصاً کسانی که با HTML، CSS، جاوا اسکریپت و موارد دیگر کار می‌کنند، بسیار مفید است! 🖥️💡

📌 لینک مستقیم: overapi.com

#OverAPI #FrontendDev #WebDevelopment #HTML #CSS #JavaScript #CodingTips #DeveloperTools

🌈 Web_Designer98.t.me

👍1

416 views13:50

« طراحی سایت و گرافیک »

0:11

This media is not supported in your browser

VIEW IN TELEGRAM

✨ افکت جدید اپل: "شیشه مایع"! ✨

برای کسانی که این افکت رو از دست دادن، اپل با طراحی جدیدش درخشش خاصی به دنیای وب اضافه کرده. 💻💫

علاقه‌مندان با استفاده از فیلترهای HTML، CSS و SVG موفق به بازسازی این جلوه زیرلایه شدن. البته این افکت در مرورگر کروم به زیبایی کار می‌کنه، اما متاسفانه در سافاری مشکلاتی داره! 😅

👉 برای دیدن این اثر خلاقانه، لینک زیر رو بررسی کنید:
🔗 مشاهده افکت در CodePen

#اپل #شیشه_مایع #HTML #CSS #SVG #طراحی #وب #کروم #سافاری #نوآوری

🆔 @Web_Designer98

💯1

646 views15:03

« طراحی سایت و گرافیک »

0:11

This media is not supported in your browser

VIEW IN TELEGRAM

📢 خبر داغ برای توسعه‌دهندگان و علاقه‌مندان وب! 💻✨

افکت جدید اپل با استفاده از فیلترهای HTML، CSS و SVG به زیبایی در وب بازسازی شد! 🔥

اگر طراحی جدید "شیشه مایع" اپل را از دست داده‌اید، حالا می‌توانید با کلیک روی لینک زیر این جلوه منحصربه‌فرد را ببینید: 🌈👇

🔗 مشاهده افکت شیشه مایع

نکته جالب: این افکت در مرورگر کروم به خوبی کار می‌کند، اما متاسفانه در سافاری قابل مشاهده نیست! 😕💔

#اپل #شیشه_مایع #HTML #CSS #SVG #توسعه_وب #طراحی_جذاب #کروم #سافاری #برنامه‌نویسی

🆔 @Web_Designer98

661 views04:26

« طراحی سایت و گرافیک »

0:08

This media is not supported in your browser

VIEW IN TELEGRAM

🚀✨ افکت تایپ جالب برای وب‌سایت شما!

🔥 آیا به دنبال یک افکت جذاب برای متن‌های وب‌سایتتان هستید؟ با افکت تایپ می‌توانید به راحتی عرض متن را به صورت افزایشی و جذاب تغییر دهید! فقط کافیه چند خط CSS بنویسید. 🔤💻

🔹 کد CSS:

.typing-effect {
  width: 10ch; /* حداکثر عرض */
  overflow: hidden; /* پنهان کردن Overflow */
  animation: typing 1s steps(10) infinite alternate-reverse; /* انیمیشن افکت تایپ */
}

@keyframes typing {
  from { width: 0ch; } /* شروع از عرض صفر */
}

✨ نکته: این افکت فقط با فونت‌های تک فاصله‌ای کار می‌کند. استفاده از این تکنیک به متن‌های شما روح و زندگی می‌بخشد! 😍🎉

برای دیدن این افکت در عمل، کد را در پروژه‌تون امتحان کنید و نظرات‌تون رو به ما بگید! 💬👇

#CSS #WebDesign #Animation #TypingEffect

🆔 @Web_Designer98

509 views07:46

« طراحی سایت و گرافیک »

0:37

This media is not supported in your browser

VIEW IN TELEGRAM

🌟 آیا به دنبال راهی سریع برای بررسی ویژگی‌های HTML/CSS در خبرنامه‌های ایمیلی هستید؟ 📧

جواب‌ها رو در caniemail.com پیدا کنید! این وبسایت شبیه به «آیا می‌توانم استفاده کنم» است، اما برای کلاینت‌های ایمیل. 🙌

به راحتی می‌توانید پشتیبانی از ویژگی‌های مورد نیاز خود را در Gmail، Outlook، iOS و دیگر برنامه‌های ایمیل بررسی کنید. ✅

#HTML #CSS #EmailMarketing #caniemail #WebDevelopment #Newsletter

🆔 @Web_Designer98

510 views07:31

« طراحی سایت و گرافیک »

0:37

This media is not supported in your browser

VIEW IN TELEGRAM

🌟 آیا می‌خواهید بدانید کدام ویژگی‌های HTML/CSS در ایمیل‌ها کار می‌کنند؟ 📧

به کمک caniemail.com می‌توانید به سرعت بررسی کنید! 🔍 این سایت مشابه «Can I use» است، اما مختص کلاینت‌های ایمیل.

✅ پشتیبانی ویژگی‌ها در Gmail، Outlook، iOS و سایر کلاینت‌های ایمیل را به راحتی کشف کنید! 🌐

🔗 caniemail.com

#HTML #CSS #EmailDesign #WebDevelopment #TechTools #EmailClient

🆔 @Web_Designer98

262 views12:26

« طراحی سایت و گرافیک »

🚀 50 پروژه فرانت‌اند برای یادگیری و تمرین!

💻 در این مخزن، 50 پروژه فرانت‌اند از صفر برای کمک به توسعه‌دهندگان عزیز قرار داده شده است.

📚هر پروژه شامل پوشه مخصوص خود و فایل‌های لازم: HTML، CSS، JavaScript، React، Bootstrap و Tailwind CSS است. این فرصتی عالی برای یادگیری و بهبود مهارت‌های وب‌دولوپمنت شماست!

🌐 لینک پروژه‌ها رو اینجا ببینید: کلیک کنید!

#فرانت_اند #برنامه_نویسی #وب_دولوپمنت #پروژه_فرانت_اند #یادگیری #توسعه_دهنده #HTML #CSS #JavaScript #React #Bootstrap #TailwindCSS

🆔 @Web_Designer98

228 views14:29

About

Blog

Apps

Platform