دوره برنامه نویسی وب آیولرن

❕اگر برای سایتتون دنبال پس زمینه های زنده و متحرک هستید، میتونید از کد زیر استفاده کنید:
کد html:

<div class="wave-container">
    <div class="wave"></div>
    <div class="wave"></div>
</div>

کد css:

.wave-container {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #00d4ff;
}

.wave {
  position: absolute;
  width: 200%;
  height: 200px;
  background: rgba(255, 255, 255, 0.3);
  top: 100px;
  left: -100px;
  border-radius: 50%;
  animation: wave-animation 4s infinite linear;
}

.wave:nth-child(2) {
  top: 120px;
  background: rgba(255, 255, 255, 0.5);
  animation-duration: 6s;
}

@keyframes wave-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

==..==..==..==..==..==..==..==..==..==..==..
✅کانال پشتیبانی برنامه نویسی وب آیولرن
✨ @aiolearn

⭕️⭕️ساخت لودر در سایت با html css js:

<style>
            .loader {
              width: 50px;
              height: 50px;
              border: 5px solid #f3f3f3;
              border-top: 5px solid #3498db; 
              border-radius: 50%;
              animation: spin 1s linear infinite;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          
            @keyframes spin {
              from {
                transform: rotate(0deg);
              }
              to {
                transform: rotate(360deg);
              }
            }

            .hidden {
                display: none !important;
              }
          
          </style>

کد های html و javascript:

 
<div class="loader"></div>

        <script>
            setTimeout(() => {
                const loader = document.getElementById("loader");
                if (loader) {
                  loader.classList.add("hidden"); \
                }
              }, 2000);
          </script>

==..==..==..==..==..==..==..==..==..==..==..
✅کانال پشتیبانی برنامه نویسی وب آیولرن
✨ @aiolearn

❕ترفندهای بهینه‌سازی سرعت سایت

فشرده‌سازی تصاویر: استفاده از ابزارهایی مثل TinyPNG یا JPEG Optimizer برای کاهش حجم تصاویر بدون افت کیفیت.

استفاده از Lazy Loading: با این روش، تصاویر و ویدیوها تنها زمانی بارگذاری می‌شوند که کاربر به آن بخش از صفحه برسد.

روش Minify کردن فایل‌های CSS و JavaScript: ابزارهایی مانند UglifyJS و CSSNano کمک می‌کنند تا کدهای شما فشرده شده و حجم فایل‌ها کاهش یابد.

بهبود سرعت سایت با بارگذاری بهینه و فشرده‌سازی فایل‌ها: با فشرده‌سازی تصاویر و استفاده از بارگذاری تنبل، می‌توانید سرعت سایت را به‌طور چشمگیری افزایش دهید.

بهینه‌سازی کش مرورگر: با تنظیم درست کش مرورگر، کاربرانی که قبلاً از سایت بازدید کرده‌اند با سرعت بیشتری به محتوای سایت دسترسی خواهند داشت

این موارد می‌توانند به بهبود سرعت سایت شما کمک کنند و در نتیجه، تاثیر مثبتی بر رتبه‌بندی سایت در موتورهای جستجو و تجربه کاربری بگذارند.

==..==..==..==..==..==..==..==..==..==..==..
✅کانال پشتیبانی برنامه نویسی وب آیولرن
✨ @aiolearn

❕برای حذف موارد تکراری در آرایه‌ها، می‌توانید از Set استفاده کنید. Set در جاوااسکریپت، یک ساختار داده است که تنها مقادیر یکتا را نگه می‌دارد، به همین دلیل می‌تواند برای حذف عناصر تکراری کاربردی باشد.

فرض کنید آرایه‌ای دارید که شامل مقادیر تکراری است:

const numbers = [1, 2, 2, 3, 4, 4, 5];

با استفاده از Set، می‌توانید به‌راحتی موارد تکراری را حذف کنید:

const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // خروجی: [1, 2, 3, 4, 5]

==..==..==..==..==..==..==..==..==..==..==..
✅کانال پشتیبانی برنامه نویسی وب آیولرن
✨ @aiolearn

https://aiolearnpro.com/tailwind-css-framework/
فریم‌ورک تلویند (Tailwind CSS) در چند سال اخیر به یکی از محبوب‌ترین ابزارهای طراحی سایت و رابط کاربری تبدیل شده است. این فریم‌ورک که برای اولین بار در سال ۲۰۱۷ توسط “آدام واثان” و تیمش منتشر شد، با ایده‌ای نوآورانه به دنیای توسعه وب آمد...

تیم آیوپروجکت برای معرفی کامل این فریم‌‌ورک یک مقاله کامل آماده کرده است تا شما بتوانید بهترین استفاده را از فریم‌ورک های فرانت‌اند را داشته باشید.

==..==..==..==..==..==..==..==..==..==..==.
✅کانال پشتیبانی برنامه نویسی وب آیولرن
✨ @aiolearn

✅توضیحات خط به خط پروژه طراحی صفحه اول گوگل:

<body>

این خط شروع بخش بدنه‌ی اصلی صفحه است که محتوای آن برای کاربر نمایش داده می‌شود.

<div style="width:100%; text-align: center;">

یک div با عرض 100 درصد و متن مرکز شده ایجاد می‌کند که محتوای درون آن در وسط صفحه نمایش داده شود.

<br><br><br>

سه خط خالی اضافه می‌کند تا فضای عمودی بیشتری قبل از تصویر ایجاد شود.

<img src="http://aiolearn.com/google.png" alt="Google Logo">

یک تصویر از آدرس مشخص شده نمایش می‌دهد و در صورت عدم نمایش، از متن جایگزین "Google Logo" استفاده می‌کند.

<br>
<input style="width:500px; border:1px solid rgb(190,190,190); height:40px; border-radius:50px;">

یک فیلد ورودی ایجاد می‌کند با عرض 500 پیکسل، حاشیه‌ی خاکستری، ارتفاع 40 پیکسل، و گوشه‌های گرد.

<button style="background-color:rgb(228,228,228); border:none; padding:5px; text-align: center; font-family: Arial;">Google Search</button>

یک دکمه با نام "Google Search" ایجاد می‌کند که پس‌زمینه‌ی خاکستری روشن، بدون حاشیه، و دارای فونت Arial است.

<button style="background-color:rgb(228,228,228); border:none; padding:5px; text-align: center; font-family: Arial;">I'm Feeling Lucky</button>

یک دکمه دیگر با نام "I'm Feeling Lucky" با همان استایل دکمه قبلی ایجاد می‌کند.

</div>

بستن تگ div که محتوا را در بر می‌گیرد.

</body>
</html>

بستن تگ‌های body و html برای پایان سند HTML.

==..==..==..==..==..==..==..==..==..==..==.
✅کانال پشتیبانی برنامه نویسی وب آیولرن
✨ @aiolearn

https://aiolearnpro.com/sand-box-aiolearn/

سندباکس آیولرن یکی از راه‌حل‌های نوآورانه آکادمی آیولرن در راستای آماده‌سازی دانشجویان برای ورود به بازار کار است. این محیط تحت هدایت استاد تجن جاری طراحی و پیاده‌سازی شده و هدف اصلی آن ایجاد فضایی رقابتی و سازنده بین دانشجویان است.

==..==..==..==..==..==..==..==..==..==..==.
✅کانال پشتیبانی برنامه نویسی وب آیولرن
✨ @aiolearn

⭕️ دستور @property در CSS یکی از ابزارهای قدرتمند و جدیدی است که به شما اجازه می‌دهد تا متغیرهای سفارشی خود را با نوع داده مشخص تعریف کنید. این ویژگی به شما کمک می‌کند تا کدهای CSS خود را سازماندهی‌تر، قابل نگهداری‌تر و انعطاف‌پذیرتر کنید.

✅ نوع‌دهی قوی: با تعریف نوع داده برای متغیرها، از خطاهای احتمالی جلوگیری می‌کنید و کدهای شما قابل اطمینان‌تر می‌شوند.

✅ سازماندهی بهتر: با استفاده از @property، می‌توانید سبک‌های CSS خود را به بخش‌های کوچکتر تقسیم کرده و مدیریت آن‌ها را آسان‌تر کنید.

✅ انعطاف‌پذیری بیشتر: با تعریف متغیرهای سفارشی، می‌توانید تغییرات را به سرعت و در یک نقطه اعمال کنید.

❓چگونه از @property استفاده کنیم؟

@property --my-color {
  syntax: '<color>';
  inherits: false;
  initial-value: blue;
}

body {
  color: var(--my-color);
}

❗️در این مثال، ما یک متغیر سفارشی با نام --my-color تعریف کرده‌ایم که نوع داده آن رنگ است. مقدار اولیه این متغیر آبی (blue) است.

==..==..==..==..==..==..==..==..==..==..==..
✅کانال پشتیبانی برنامه نویسی وب آیولرن
✨ @aiolearn

🔒چگونه امنیت وب‌سایت خود را افزایش دهیم؟

* رمزهای قوی: از رمزهای عبور پیچیده و منحصر به فرد استفاده کنید.
* به‌روزرسانی‌های مداوم: نرم‌افزارها و سیستم عامل را همیشه به روز نگه دارید.
* امنیت هاردنینگ: پورت‌های غیر ضروری را ببندید و از فایروال استفاده کنید.
* امنیت برنامه‌نویسی: ورودی‌های کاربران را پاکسازی کنید و از فریمورک‌های امن استفاده کنید.
* پشتیبان‌گیری منظم: به صورت منظم از وب‌سایت خود بک‌آپ بگیرید.

❕چرا این موارد مهم هستند؟
* جلوگیری از هک شدن: با رعایت این نکات، احتمال هک شدن وب‌سایت شما به شدت کاهش می‌یابد.
* محافظت از داده‌های کاربران: اطلاعات حساس کاربران شما مانند رمزهای عبور و اطلاعات شخصی در امان می‌ماند.
* حفظ اعتبار وب‌سایت: یک وب‌سایت امن، اعتبار بیشتری نزد کاربران و موتورهای جستجو دارد.

==..==..==..==..==..==..==..==..==..==..==..
✅کانال پشتیبانی برنامه نویسی وب آیولرن
✨ @aiolearn

شماره دوم مجله‌ی نوآوری آیوکاپ منتشر شد! 🎉📖

از امروز می‌توانید دومین شماره از نشریه نوآوری آیوکاپ را به‌صورت کاملاً رایگان از سایت ما دانلود کنید! 📥🔥

🔗 https://www.journal.aiocup.com/

مجله نوآوری آیوکاپ توسط تیم آیوکاپ برای افزایش شانس موفقیت شما در مسابقات کشوری و بین‌المللی و آشنایی بیشتر با دنیای تکنولوژی و فناوری پیشرفته طراحی شده است.🌍🏆

🔗 https://www.aiocup.com/

==..==..==..==..==..==..==..==..==..==..==.
✅کانال پشتیبانی برنامه نویسی وب آیولرن
✨ @aiolearn

💎 شروع جلسات مشاوره و منتورینگ مسابقات بین‌المللی فرانسه از ششم آبان ماه❗️

💠 آکادمی آیولرن جهت افزایش شانس موفقیت شما در مسابقات، جلسات مشاوره و منتورینگ برگزار خواهد کرد.

💠 این جلسات از ۶ام آبان آغاز می‌شود تا شرکت‌کنندگان مسابقه با برنامه‌ای منظم بتوانند طرح‌های خودشون ارسال کنند.

🔺 برای ثبت‌نام و دریافت اطلاعات بیشتر وارد لینک زیر شوید.👇

http://Aiocup.com/brightexpo

❗️ مهلت ثبت‌نام در مسابقات بین‌المللی فرانسه Bright Expo؛ فقط تا ۵ آبان❗️

🌀 ثبت‌نام مسابقات Bright Expo فرانسه تا پنجم آبان ماه تمدید شد.

💠 این آخرین مهلت ثبت‌نام هست.

🌀 حتما زودتر ثبت‌نامتون رو نهایی کنید تا وارد مرحله‌ی انجام پروژه‌ها بشید؛ چون زمان محدوده!

🔺 برای ثبت‌نام و دریافت اطلاعات بیشتر وارد لینک زیر شوید.👇

http://Aiocup.com/brightexpo

🌀 شرکت در مسابقات بین‌المللی فرانسه، به صورت انفرادی و تیمی🔥

💠 می‌تونید به صورت انفرادی و یا تیم‌های ۴ نفره در مسابقه Bright Expo شرکت کنید.

💠 برای کسب موفقیت در این مسابقه، لازمه در بخش برنامه‌نویسی به مباحث Html&css، Javascript و در بخش هوش‌مصنوعی به مباحث ماشین‌لرنینگ و دیپ‌لرنینگ تسلط داشته باشید‌.

❇️ تیم آیوکاپ تمام تلاش خود را می‌‌کند تا شما به بهترین نتایج دست‌یابید.

⭕️ابزار ضروری برای هر برنامه‌نویس وب
اگر توسعه‌دهنده وب هستید، GitHub یکی از مهم‌ترین ابزارهایی است که باید با آن آشنا باشید. این پلتفرم به شما امکان می‌دهد کدهای خود را به شکلی منظم مدیریت کرده و به سادگی با دیگر برنامه‌نویسان همکاری کنید.

🌐 کنترل نسخه‌ها: هر تغییری که در کد می‌دهید ذخیره می‌شود و می‌توانید در هر زمان به نسخه‌های قبلی بازگردید.
🤝 همکاری تیمی: به طور همزمان با تیم خود روی یک پروژه کار کنید و تغییرات هر فرد را پیگیری کنید.
🚀 پروژه‌های متن‌باز: به سادگی در پروژه‌های بزرگ متن‌باز مشارکت کنید و دانش و تجربه‌تان را افزایش دهید.
📂 ساخت نمونه‌کار: با مخازن عمومی، نمونه‌کارهای آنلاین خود را بسازید و به کارفرمایان نمایش دهید.

==..==..==..==..==..==..==..==..==..==..==..
✅کانال پشتیبانی برنامه نویسی وب آیولرن
✨ @aiolearn

⭕️ ثبت‌نام مسابقات بین‌المللی فرانسه ( Bright Expo ) آغاز شد🔥

✅ نحوه برگزاری: آنلاین
✅ حوزه‌ی مسابقات: ایده و نوآوری، پروژه‌های برنامه‌نویسی و هوش‌مصنوعی
✅ نحوه‌ی شرکت: فردی و تیم ۴ نفره
✅ امکانات ویژه‌ی آیولرن: منتورینگ تخصصی برای شرکت‌کنندگان
✅ پیش‌نیاز: حداقل تسلط بر مبحث ماشین‌لرنینگ در قسمت هوش‌مصنوعی و یا جاوااسکریپت در بخش برنامه‌نویسی وب

🟢 علاقه‌مندان به شرکت در مسابقات بین‌المللی فرانسه، می‌توانند از طریق آکادمی آیولرن و تیم قدرتمند آیوکاپ در این رویداد ثبت‌نام کنند.

💢 برای کسب اطلاعات بیشتر و ثبت‌نام در مسابقات فرانسه وارد لینک زیر شوید.👇

http://Aiocup.com/brightexpo

🔥🔥🔥

⭕️ اگر تابستون شروع کردی الان وقتشه که رزومه سازی کنی!

🏆 اکثر دانشجوهایی که در تابستون آموزش برنامه‌نویسی و هوش‌مصنوعی رو شروع کردند؛ الان به سطحی رسیدن که بتونن به صورت تیمی و یا فردی، در مسابقات بین‌المللی فرانسه شرکت کنند.

🔹 لازمه که حداقل به مباحث ماشین‌لرنینگ و یا جاوااسکریپت تسلط داسته باشید.

📌 برای دریافت اطلاعات بیشتر وارد لینک زیر بشید.👇
http://Aiocup.com/brightexpo

❗️نحوه برگزاری: آنلاین
❗️فرصت ثبت‌نام: محدود

⭕️ مسابقات بین‌المللی فرانسه ( Bright Expo )🔥

🌀 مسابقات بین‌المللی فرانسه با نام Bright Expo، یکی از رویدادهای برجسته و مهم در سطح جهانی است که در تاریخ ۸ دسامبر برگزار خواهد شد.

✅ نحوه برگزاری: آنلاین
✅ حوزه‌ی مسابقات: ایده و چالش برنامه‌نویسی و هوش‌مصنوعی
✅ نحوه‌ی شرکت: فردی و تیم ۴ نفره

🟢 علاقه‌مندان به شرکت در مسابقات بین‌المللی فرانسه، می‌توانند از طریق آکادمی آیولرن و تیم آیوکاپ در این رویداد ثبت‌نام کنند.

💢 برای کسب اطلاعات بیشتر و شرکت در مسابقات فرانسه وارد لینک زیر شوید.👇

http://Aiocup.com/brightexpo

🔥🔥🔥

❕تفاوت Box و Drop shadow در css:
⚠️ تصویر سمت چپ:

img{
    box-shadow: 10px 7px 20px orange;
}

⚠️ تصویر سمت راست:

img{
filter: drop-shadow(10px 7px 20px orange);
}

همانطور که ذکر شد، در تصاویر png برای افزودن سایه به تصویر، از دستور filter برای ایجاد سایه استفاده میکنیم!

==..==..==..==..==..==..==..==..==..==..==..
✅کانال پشتیبانی برنامه نویسی وب آیولرن
✨ @aiolearn

این یک سایته که میتونه سرعت واکنش مغز شمارو اندازه بگیره

اما ما میخوام با حاوا اسکریپت خودمون این برنامه رو بنویسیم، چون ما برنامه نویس های آیولرن هستیم!

هر کدوم از دانشجوهای ما بتونه امروز این برنامه رو با جاوا اسکریپت بنویسه اینجا با نام خودش منتشرش میکنیم🔥

✅ ۱) اول برید در سایت زیر تست بدید و ببینید چجوری کار میکنه

https://humanbenchmark.com/

✅۲) سعی کنید برنامه ای شبیه اون رو بنویسید


✅۳) برنامه رو برای آیدی من بفرستید

@majid_tajan

✅۴) هر کسی بتونه سریعتر و بهتر این برنامه رو بنویسه و برنامه رو آنلاین کنه ۱ میلیون تومان جایزه داره 🔥

⭕️ سورس کد CSS لودر

با استفاده از این سایت میتونید سورس کد های CSS لودر های مختلف رو بگیرید و ازشون داخل پروژه هاتون استفاده کنید❕

https://whirl.netlify.app/

==..==..==..==..==..==..==..==..==..==..==..
✅کانال پشتیبانی برنامه نویسی وب آیولرن
✨ @aiolearn

❔اگر میخواید به روش ساده به کد های css یک کلاس دسترسی داشته باشید، میتونید افزونه CSS Peek رو داخل vscode نصب کنید و بعد از نصب، روی کلاسی که مد منظورتون هست کلیک و دکمه های ALT + F12 را کلیک کنید تا برای شما استایل های مربوط به آن کلاس را نمایش دهد.
اگر میخواید دستورات css آن کلاس را تغییر دهید، روی کلاس کلیک کنید و دکمه های Ctrl + Left click را فشار دهید✅

==..==..==..==..==..==..==..==..==..==..==..
✅کانال پشتیبانی برنامه نویسی وب آیولرن
✨ @aiolearn

❕اگر شماهم در حین کد نویسی میخواین که عکسی که استفاده رو میکنید رو ببینید، بهتره که افزونه Image preview رو داخل vscode نصب کنید تا کنار خط کدتون، عکس رو نمایش بده👌

==..==..==..==..==..==..==..==..==..==..==..
✅کانال پشتیبانی برنامه نویسی وب آیولرن
✨ @aiolearn

لایو دانشجویان ساعت 8 شروع شد با لینک قبلی دانشجویان وارد شوید

نشان دادن فرمت فایل‌ها در سیستم

۱.ابتدا وارد پوشه مورد نظر شوید.
۲.از بالا روی تب view کلیک کنید.
۳.تیک گزینه‌ی file name extension را فعال نمایید.

ایجاد یک فایل html

بعد از فعال کردن فرمت ‌فایل‌ها در ویندوز مراحل زیر را طی کنید:
۱. یک پوشه جدید ایجاد کنید و وارد آن شوید.
۲.کلیک راست کردا و از گزینه‌ی new یک فایل متن ( Text Document ) ایجاد کنید.
۳.در مرحله آخر باید فایل را rename کنید و فرمت Txt را به HTML تغییر دهید.

#شاتل
==..==..==..==..==..==..==..==..==..==..==..
✅کانال پشتیبانی برنامه نویسی وب آیولرن
✨ @aiolearn

نحوه وسط‌چین کردن عکس گوگل

ابتدا باید یک تگ div ایجاد کنید و تگ img را داخل این تگ قرار دهید ؛ در مرحله بعد دستور Text-align : center را به تگ والد یعنی تگ div بدهید.

<div style="text-align : center ;">
 <img src="http://www.aiolearn.com/google.png">
</div>

برای نمایش دادن عکس گوگل میتونید در اتریبیوت src از آدرس بالا استفاده کنید.

#شاتل
==..==..==..==..==..==..==..==..==..==..==..
✅کانال پشتیبانی برنامه نویسی وب آیولرن
✨ @aiolearn

📱اندازه های مختلف برای طراحی رسپانسیو از css به همراه کد❕

==..==..==..==..==..==..==..==..==..==..==..
✅کانال پشتیبانی برنامه نویسی وب آیولرن
✨ @aiolearn

✅ اپدیت اپلیکیشن به نسخه ۲۵.۷

✅ وب اپلیکیشن و اپلیکیشن اندروید به روزرسانی شدند

🔹اضافه شدن آزمون برای دوره استارتر

🔹اضافه شدن بخش ورود و ثبت نام فقط با شماره موبایل به همراه وریفای

اپلیکیشن اندروید آیولرن

نسخه: ۲۵.۷

دانشجویان عزیز لایو دانشجویان فردا پنجشنبه ساعت ۸ شب برگزار میشود

لینک ورود به لایو به صورت پیامک ارسال میشود ✌️

آپدیت جدید اپلیکیشن اندروید

آخرین نسخه به همراه آزمون آنلاین✅