✳️ وردپرس یا دروپال، کدامیک بهتر است؟ — مقایسه جامع
وردپرس از نخستین انتخابهای کاربران برای راهاندازی یک وبسایت به حساب میآید. دلیل این مسئله آن است که وردپرس امروزه سهم عمده بازار را در اختیار دارد.
══ فهرست مطالب ══
○ دروپال یا وردپرس: کدام یک را باید استفاده کرد؟
○ دروپال یا وردپرس: سهولت استفاده
○ دروپال یا وردپرس: جامعه و منابع
○ دروپال یا وردپرس: امنیت
○ دروپال یا وردپرس – هزینه و قیمت
○ دروپال یا وردپرس: انعطافپذیری
○ دروپال یا وردپرس: محبوبیت
○ از کدام CMS متن-باز باید استفاده کرد؟
🔸 دروپال یا وردپرس: کدام یک را باید استفاده کرد؟
وردپرس و دروپال مشابهتهای زیادی دارند. هر دو آنها سیستمهای مدیریت محتوای متن-بازی هستند که مجموعه ویژگیهای منسجمی دارند. با این حال، کاربرانی که از هر کدام از آنها استفاده میکنند، تفاوتهای عمدهای دارند. همه افراد از کسانی که به دنبال یک بلاگ ساده هستند تا وبمسترهایی که سایتهای با ترافیک بالا دارند، میتوانند از وبسایتهای با سفارشیسازی بالایی که وردپرس ارائه میدهد بهرهمند شوند.
از سوی دیگر دروپال برای کاربرانی مناسبتر است که تا حدودی با تجربه توسعه وب آشنایی دارند. به علاوه دروپال ماهیتی با عملکرد بالا و مقیاسپذیری گسترده دارد. این بدان معنی است که دروپال برای وبسایتهای سازمانی که تا حدودی از کاربران متوسط فاصله میگیرند، مناسبتر است.
– وردپرس – هر کاربری از مبتدی تا تجاری
– دروپال – وبسایتهای در محیط تجاری و سازمانی
🔸 دروپال یا وردپرس: سهولت استفاده
اغلب بلاگرها به عنوان نخستین تجربه خود از سیستم وردپرس استفاده کردهاند. اکثر آنها یک حساب رایگان در وبسایت wordpress.com ایجاد کردهاند که در ادامه به یک وبسایت خود-میزبان تبدیل میشود. بیشتر شرکتهای ارائه دهنده خدمات میزبانی وبسایت، امکان ایجاد سایتهای وردپرسی را با صرفاً یک کلیک ارائه میکنند. بدین ترتیب میتوان در طی چند دقیقه یک وبسایت با CMS وردپرس تحویل گرفت. البته حتی در صورتی که بخواهید وردپرس را روی سرور خود نصب کنید هم پیچیدگی چندانی ندارد.
با این حال دروپال قطعاً پیچیدهتر است. با این که کاربرد هر روزه آن قابلیت مدیریت بیشتری دارد؛ اما نصب دروپال به اندازه نصب وردپرس آسان نیست. کسانی که هر دو CMS را نصب کردهاند میدانند که نصب وردپرس تقریباً به هیچ دانشی نیاز ندارد، اما دروپال چنین نیست و نیازمند نوعی مراحل عیبیابی است.
حتی در استفادههای معمولی روزمره نیز وردپرس سادهتر از دروپال است. ویرایشگر WYSIWYG آن کارکردهای زیادی را ارائه میدهد. به طور کلی وردپرس برای افراد غیر برنامهنویس، بسیار محبوبتر است. دروپال دشواری چندانی ندارد؛ اما در هر حال منحنی یادگیری آن شیب بیشتری دارد.
مطالعه ادامه مطلب 👇👇
🔗 وردپرس یا دروپال، کدامیک بهتر است؟ — مقایسه جامع — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
وردپرس از نخستین انتخابهای کاربران برای راهاندازی یک وبسایت به حساب میآید. دلیل این مسئله آن است که وردپرس امروزه سهم عمده بازار را در اختیار دارد.
══ فهرست مطالب ══
○ دروپال یا وردپرس: کدام یک را باید استفاده کرد؟
○ دروپال یا وردپرس: سهولت استفاده
○ دروپال یا وردپرس: جامعه و منابع
○ دروپال یا وردپرس: امنیت
○ دروپال یا وردپرس – هزینه و قیمت
○ دروپال یا وردپرس: انعطافپذیری
○ دروپال یا وردپرس: محبوبیت
○ از کدام CMS متن-باز باید استفاده کرد؟
🔸 دروپال یا وردپرس: کدام یک را باید استفاده کرد؟
وردپرس و دروپال مشابهتهای زیادی دارند. هر دو آنها سیستمهای مدیریت محتوای متن-بازی هستند که مجموعه ویژگیهای منسجمی دارند. با این حال، کاربرانی که از هر کدام از آنها استفاده میکنند، تفاوتهای عمدهای دارند. همه افراد از کسانی که به دنبال یک بلاگ ساده هستند تا وبمسترهایی که سایتهای با ترافیک بالا دارند، میتوانند از وبسایتهای با سفارشیسازی بالایی که وردپرس ارائه میدهد بهرهمند شوند.
از سوی دیگر دروپال برای کاربرانی مناسبتر است که تا حدودی با تجربه توسعه وب آشنایی دارند. به علاوه دروپال ماهیتی با عملکرد بالا و مقیاسپذیری گسترده دارد. این بدان معنی است که دروپال برای وبسایتهای سازمانی که تا حدودی از کاربران متوسط فاصله میگیرند، مناسبتر است.
– وردپرس – هر کاربری از مبتدی تا تجاری
– دروپال – وبسایتهای در محیط تجاری و سازمانی
🔸 دروپال یا وردپرس: سهولت استفاده
اغلب بلاگرها به عنوان نخستین تجربه خود از سیستم وردپرس استفاده کردهاند. اکثر آنها یک حساب رایگان در وبسایت wordpress.com ایجاد کردهاند که در ادامه به یک وبسایت خود-میزبان تبدیل میشود. بیشتر شرکتهای ارائه دهنده خدمات میزبانی وبسایت، امکان ایجاد سایتهای وردپرسی را با صرفاً یک کلیک ارائه میکنند. بدین ترتیب میتوان در طی چند دقیقه یک وبسایت با CMS وردپرس تحویل گرفت. البته حتی در صورتی که بخواهید وردپرس را روی سرور خود نصب کنید هم پیچیدگی چندانی ندارد.
با این حال دروپال قطعاً پیچیدهتر است. با این که کاربرد هر روزه آن قابلیت مدیریت بیشتری دارد؛ اما نصب دروپال به اندازه نصب وردپرس آسان نیست. کسانی که هر دو CMS را نصب کردهاند میدانند که نصب وردپرس تقریباً به هیچ دانشی نیاز ندارد، اما دروپال چنین نیست و نیازمند نوعی مراحل عیبیابی است.
حتی در استفادههای معمولی روزمره نیز وردپرس سادهتر از دروپال است. ویرایشگر WYSIWYG آن کارکردهای زیادی را ارائه میدهد. به طور کلی وردپرس برای افراد غیر برنامهنویس، بسیار محبوبتر است. دروپال دشواری چندانی ندارد؛ اما در هر حال منحنی یادگیری آن شیب بیشتری دارد.
مطالعه ادامه مطلب 👇👇
🔗 وردپرس یا دروپال، کدامیک بهتر است؟ — مقایسه جامع — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
✳️ زبان برنامه نویسی کاتلین (Kotlin) — راهنمای کاربردی
در این مطلب، به بررسی زبان برنامهنویسی کاتلین (Kotlin Programming Language) پرداخته شده است. جامعه توسعهدهندگان نرمافزارهای کاربردی موبایل که از زبان کاتلین استفاده میکنند، به سرعت در حال افزایش است. در سال ۲۰۱۷، گوگل، کاتلین را به عنوان دومین زبان رسمی خود برای توسعه اندروید معرفی کرد. از آن زمان تاکنون، رشد بسیار بزرگ و مهمی در تقاضا برای این زبان برنامهنویسی در میان توسعهدهندگان و جوامع کسب و کار به وقوع پیوسته است. گوگل در حال حاضر زبان برنامه نویسی کاتلین را به عنوان یکی از بهترین زبانهای برنامهنویسی برای توسعه اپلیکیشنهای اندرویدی اعلام کرده است. این نشان میدهد که آینده خوبی در انتظار این زبان برنامهنویسی است.
══ فهرست مطالب ══
○ زبان برنامه نویسی کاتلین
○ ویژگیهای کلیدی کاتلین
○ مزایای زبان کاتلین
○ کاربردهای زبان کاتلین
🔸 زبان برنامه نویسی کاتلین
«کاتلین» (Kotlin) یک زبان برنامهنویسی «تایپ استاتیک» (Statically Typed) و «همهمنظوره» (General-Purpose) است که توسط «جتبرینز» (JetBrains) توسعه داده شده و دارای «محیطهای توسعه یکپارچه» (Integrated Development Environment) کلاس جهانی مانند «اینتلیج آیدیا» (IntelliJ IDEA)، «پیاچپیاستورم» (PhpStorm)، «اپکد» (Appcode) و دیگر موارد است.
«کاتلین» (Kotlin) ابتدا و در سال ۲۰۱۱ میلادی توسط جتبرینز به عنوان زبان جدیدی برای JVM معرفی شد. این زبان، یک زبان برنامهنویسی «شیگرا» (Object Oriented) است و به زعم بسیاری از افراد، بهتر از «جاوا» (Java) محسوب میشود.
گوگل اسپانسر کاتلین است. این زبان در سال ۲۰۱۷، توسط گوگل، به عنوان دومین زبان رسمی برای توسعه اندروید معرفی شد. مثالی از کد نوشته شده به این زبان، در ادامه ارائه شده است.
🔸 ویژگیهای کلیدی کاتلین
در ادامه، برخی از ویژگیهای کلیدی زبان برنامه نویسی کاتلین مورد بررسی قرار میگیرد.
تایپ استاتیک: تایپ استاتیک یک مشخصه برنامهنویسی کامپیوتری است؛ بدین معنا که نوع هر متغیر و عبارت در زمان کامپایل شناخته میشود. با وجود اینکه کاتلین یک زبان تایپ استاتیک است، نیاز به این ندارد که نوع هر متغیر صراحتا «اعلان» (Declare) شود.
کلاسهای داده: در این زبان، «کلاسهای دادهای» (Data Classes) وجود دارد که منجر به تولید خودکار تساویهای قابل استفاده مجدد (Boilerplate Like Equals)، «هش کد» (HashCode) و toString و بسیاری از گزینههای دیگر میشود.
مطالعه ادامه مطلب 👇👇
🔗 زبان برنامه نویسی کاتلین (Kotlin) — راهنمای کاربردی — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
در این مطلب، به بررسی زبان برنامهنویسی کاتلین (Kotlin Programming Language) پرداخته شده است. جامعه توسعهدهندگان نرمافزارهای کاربردی موبایل که از زبان کاتلین استفاده میکنند، به سرعت در حال افزایش است. در سال ۲۰۱۷، گوگل، کاتلین را به عنوان دومین زبان رسمی خود برای توسعه اندروید معرفی کرد. از آن زمان تاکنون، رشد بسیار بزرگ و مهمی در تقاضا برای این زبان برنامهنویسی در میان توسعهدهندگان و جوامع کسب و کار به وقوع پیوسته است. گوگل در حال حاضر زبان برنامه نویسی کاتلین را به عنوان یکی از بهترین زبانهای برنامهنویسی برای توسعه اپلیکیشنهای اندرویدی اعلام کرده است. این نشان میدهد که آینده خوبی در انتظار این زبان برنامهنویسی است.
══ فهرست مطالب ══
○ زبان برنامه نویسی کاتلین
○ ویژگیهای کلیدی کاتلین
○ مزایای زبان کاتلین
○ کاربردهای زبان کاتلین
🔸 زبان برنامه نویسی کاتلین
«کاتلین» (Kotlin) یک زبان برنامهنویسی «تایپ استاتیک» (Statically Typed) و «همهمنظوره» (General-Purpose) است که توسط «جتبرینز» (JetBrains) توسعه داده شده و دارای «محیطهای توسعه یکپارچه» (Integrated Development Environment) کلاس جهانی مانند «اینتلیج آیدیا» (IntelliJ IDEA)، «پیاچپیاستورم» (PhpStorm)، «اپکد» (Appcode) و دیگر موارد است.
«کاتلین» (Kotlin) ابتدا و در سال ۲۰۱۱ میلادی توسط جتبرینز به عنوان زبان جدیدی برای JVM معرفی شد. این زبان، یک زبان برنامهنویسی «شیگرا» (Object Oriented) است و به زعم بسیاری از افراد، بهتر از «جاوا» (Java) محسوب میشود.
گوگل اسپانسر کاتلین است. این زبان در سال ۲۰۱۷، توسط گوگل، به عنوان دومین زبان رسمی برای توسعه اندروید معرفی شد. مثالی از کد نوشته شده به این زبان، در ادامه ارائه شده است.
🔸 ویژگیهای کلیدی کاتلین
در ادامه، برخی از ویژگیهای کلیدی زبان برنامه نویسی کاتلین مورد بررسی قرار میگیرد.
تایپ استاتیک: تایپ استاتیک یک مشخصه برنامهنویسی کامپیوتری است؛ بدین معنا که نوع هر متغیر و عبارت در زمان کامپایل شناخته میشود. با وجود اینکه کاتلین یک زبان تایپ استاتیک است، نیاز به این ندارد که نوع هر متغیر صراحتا «اعلان» (Declare) شود.
کلاسهای داده: در این زبان، «کلاسهای دادهای» (Data Classes) وجود دارد که منجر به تولید خودکار تساویهای قابل استفاده مجدد (Boilerplate Like Equals)، «هش کد» (HashCode) و toString و بسیاری از گزینههای دیگر میشود.
مطالعه ادامه مطلب 👇👇
🔗 زبان برنامه نویسی کاتلین (Kotlin) — راهنمای کاربردی — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
✳️ طراحی یک وب سایت ساده با PHP — از صفر تا صد
دوست دارید نحوه ساختن یک وبسایت را بیاموزید؟ زمانی برای اینکار تنها شروع به یادگیری HTML کافی بود، اما این روزها بهترین راهحل برای این مسئله PHP و البته یادگیری آن است. هر چند هنوز هم لازم است برای شروع به کار قدری دانش کدنویسی HTML داشته باشید، اما میتوانیم بدون اغراق بگوئیم که PHP اکنون محبوبترین گزینه برای ساخت انواع سایتهای استاتیک و دینامیک است. بسیار خب، حالا میدانیم که باید PHP یاد بگیریم و یکی از بهترین راهها برای یادگیری آن، ساخت یک وب سایت ساده با PHP است؛ کاری که بنا داریم در ادامه انجام دهیم.
══ فهرست مطالب ══
○ چرا باید از PHP برای توسعه وبسایت استفاده کنیم؟
○ برای ساخت یک وبسایت PHP به چه چیزی نیاز داریم؟
○ آغاز کار با PHP: آشنایی با دستور زبان
○ ساخت یک وبسایت: آشنایی با ساختار
○ آغاز طراحی وبسایت: هدر PHP
○ درج محتوا در بدنه صفحه وب PHP
○ استفاده از فوتر PHP در صفحه وب
○ جمعبندی
○ سخن پایانی
🔸 چرا باید از PHP برای توسعه وبسایت استفاده کنیم؟
گزینههای مختلفی برای توسعه وب در این سالها مطرح شدهاند. در آغاز HTML ساده استفاده میشد، سپس توسعهدهندگان از HTML به همراه CSS جاسازی شده یا یک ارجاع به فایل CSS استفاده کردند. زمانی که وبسایتهای دینامیک مطرح شدند، ASP (که در ادامه به ASP.NET تبدیل شد) و PHP نیز وارد میدان شدند.
بر اساس آمار و ارقام اکنون PHP با سهم ۸۲ درصدی از وبسایتها به عنوان محبوبترین زبان برنامهنویسی سمت سرور مطرح است. این عدد را با ۱۶ درصد که از ASP استفاده میکنند مقایسه کنید.
ASP تا سال ۲۰۲۲ پشتیبانی خواهد شد، اما انتظار نمیرود پس از این تاریخ به صورت رسمی دست کم به عنوان یک فناوری وب تداوم داشته باشد. PHP که اختصاری برای عبارت «پیش پردازشگر ابرمتن PHP» (به معنی PHP Hypertext Preprocessor) است موفقیت زیادی داشته است که به طور عمده ناشی از یکپارچگی آن با لینوکس است.
🔸 برای ساخت یک وبسایت PHP به چه چیزی نیاز داریم؟
پیش از آن که کار ساخت وبسایت خود را آغاز کنیم، باید مطمئن شویم که یک ادیتور متن ساده یا محیط توسعه مناسب PHP را نصب کردهایم. برای کدنویسی PHP میتوانید در ابتدا از چیزی به سادگی Notepad ویندوز استفاده کنید. مثالهایی که در این مقاله مطرح میشوند، همگی با استفاده از ادیتور متن Notepad++ نوشته شدهاند.
همچنین باید یک وبسرور PHP داشته باشید که فایلهای خود را روی آن آپلود کنید. این سرور میتواند یک سرور ریموت یا یک رایانه محلی باشد که مجموعه LAMP روی آن نصب شده است. LAMP اختصاری برای عبارتهای Linux ،Apache ،MySQL ،PHP است. به طور جایگزین میتوانید از مجموعه WAMP که اختصاری برای عبارتهای Windows ،Apache، MySQL ،PHP است استفاده کنید. اگر از ویندوز استفاده میکنید، میتوانید از این راهنما بهره بگیرید:
– چگونه یک سرور WAMP راهاندازی کنیم؟ — از صفر تا صد
در نهایت به یک برنامه FTP نیاز دارید تا فایلهایتان را روی وبسرور آپلود کنید. به این منظور برنامههای مختلفی مانند WinSCP، Cyberduck و FileZilla وجود دارند.
مطالعه ادامه مطلب 👇👇
🔗 طراحی یک وب سایت ساده با PHP — از صفر تا صد — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
دوست دارید نحوه ساختن یک وبسایت را بیاموزید؟ زمانی برای اینکار تنها شروع به یادگیری HTML کافی بود، اما این روزها بهترین راهحل برای این مسئله PHP و البته یادگیری آن است. هر چند هنوز هم لازم است برای شروع به کار قدری دانش کدنویسی HTML داشته باشید، اما میتوانیم بدون اغراق بگوئیم که PHP اکنون محبوبترین گزینه برای ساخت انواع سایتهای استاتیک و دینامیک است. بسیار خب، حالا میدانیم که باید PHP یاد بگیریم و یکی از بهترین راهها برای یادگیری آن، ساخت یک وب سایت ساده با PHP است؛ کاری که بنا داریم در ادامه انجام دهیم.
══ فهرست مطالب ══
○ چرا باید از PHP برای توسعه وبسایت استفاده کنیم؟
○ برای ساخت یک وبسایت PHP به چه چیزی نیاز داریم؟
○ آغاز کار با PHP: آشنایی با دستور زبان
○ ساخت یک وبسایت: آشنایی با ساختار
○ آغاز طراحی وبسایت: هدر PHP
○ درج محتوا در بدنه صفحه وب PHP
○ استفاده از فوتر PHP در صفحه وب
○ جمعبندی
○ سخن پایانی
🔸 چرا باید از PHP برای توسعه وبسایت استفاده کنیم؟
گزینههای مختلفی برای توسعه وب در این سالها مطرح شدهاند. در آغاز HTML ساده استفاده میشد، سپس توسعهدهندگان از HTML به همراه CSS جاسازی شده یا یک ارجاع به فایل CSS استفاده کردند. زمانی که وبسایتهای دینامیک مطرح شدند، ASP (که در ادامه به ASP.NET تبدیل شد) و PHP نیز وارد میدان شدند.
بر اساس آمار و ارقام اکنون PHP با سهم ۸۲ درصدی از وبسایتها به عنوان محبوبترین زبان برنامهنویسی سمت سرور مطرح است. این عدد را با ۱۶ درصد که از ASP استفاده میکنند مقایسه کنید.
ASP تا سال ۲۰۲۲ پشتیبانی خواهد شد، اما انتظار نمیرود پس از این تاریخ به صورت رسمی دست کم به عنوان یک فناوری وب تداوم داشته باشد. PHP که اختصاری برای عبارت «پیش پردازشگر ابرمتن PHP» (به معنی PHP Hypertext Preprocessor) است موفقیت زیادی داشته است که به طور عمده ناشی از یکپارچگی آن با لینوکس است.
🔸 برای ساخت یک وبسایت PHP به چه چیزی نیاز داریم؟
پیش از آن که کار ساخت وبسایت خود را آغاز کنیم، باید مطمئن شویم که یک ادیتور متن ساده یا محیط توسعه مناسب PHP را نصب کردهایم. برای کدنویسی PHP میتوانید در ابتدا از چیزی به سادگی Notepad ویندوز استفاده کنید. مثالهایی که در این مقاله مطرح میشوند، همگی با استفاده از ادیتور متن Notepad++ نوشته شدهاند.
همچنین باید یک وبسرور PHP داشته باشید که فایلهای خود را روی آن آپلود کنید. این سرور میتواند یک سرور ریموت یا یک رایانه محلی باشد که مجموعه LAMP روی آن نصب شده است. LAMP اختصاری برای عبارتهای Linux ،Apache ،MySQL ،PHP است. به طور جایگزین میتوانید از مجموعه WAMP که اختصاری برای عبارتهای Windows ،Apache، MySQL ،PHP است استفاده کنید. اگر از ویندوز استفاده میکنید، میتوانید از این راهنما بهره بگیرید:
– چگونه یک سرور WAMP راهاندازی کنیم؟ — از صفر تا صد
در نهایت به یک برنامه FTP نیاز دارید تا فایلهایتان را روی وبسرور آپلود کنید. به این منظور برنامههای مختلفی مانند WinSCP، Cyberduck و FileZilla وجود دارند.
مطالعه ادامه مطلب 👇👇
🔗 طراحی یک وب سایت ساده با PHP — از صفر تا صد — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
✳️ ۳۰ ابزار مفید برای صرفهجویی در زمان در هنگام طراحی وب
وقتی صحبت از طراحی وب میشود، سرعت و مدت زمان طراحی یک رکن بسیار مهم است. در این مقاله به معرفی چند ابزار مناسب برای سرعت بخشیدن به طراحی وبسایت میپردازیم.
══ فهرست مطالب ══
○ کتابخانههای CSS
🔸 کتابخانههای CSS
Topcoat: یک فریمورک است که در CSS استفاده میشود. لینک دسترسی (+)
Create ken burns effect: برای ساخت انیمیشنهایی به سبک «ken burns effect» در css۳ از این افزونه استفاده میشود. لینک دسترسی (+)
DynCSS: برای اضافه کردن توابع به css و پویا سازی آن استفاده میشود. لینک دسترسی (+)
مطالعه ادامه مطلب 👇👇
🔗 ۳۰ ابزار مفید برای صرفهجویی در زمان در هنگام طراحی وب — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
وقتی صحبت از طراحی وب میشود، سرعت و مدت زمان طراحی یک رکن بسیار مهم است. در این مقاله به معرفی چند ابزار مناسب برای سرعت بخشیدن به طراحی وبسایت میپردازیم.
══ فهرست مطالب ══
○ کتابخانههای CSS
🔸 کتابخانههای CSS
Topcoat: یک فریمورک است که در CSS استفاده میشود. لینک دسترسی (+)
Create ken burns effect: برای ساخت انیمیشنهایی به سبک «ken burns effect» در css۳ از این افزونه استفاده میشود. لینک دسترسی (+)
DynCSS: برای اضافه کردن توابع به css و پویا سازی آن استفاده میشود. لینک دسترسی (+)
مطالعه ادامه مطلب 👇👇
🔗 ۳۰ ابزار مفید برای صرفهجویی در زمان در هنگام طراحی وب — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
✳️ ۱۰ نکته مهم برای توسعه فرانت اند — راهنمای کاربردی
بدیهی است که توسعه فرانت اند در سال ۲۰۲۰ یکی از رشتههای پرطرفدار برنامهنویسی محسوب میشود. تا همین اواخر کافی بود که توسعهدهندگان فرانتاند مقداری با HTML ،CSS و شاید jQuery آشنا باشند تا بتوانند یک وبسایت تعاملی ایجاد کنند. اما امروزه توسعهدهندگان فرانتاند با اکوسیستم وسیع و مداوماً در حال تغییر از مهارتهای توسعه، ابزارها، کتابخانهها و فریمورکهایی که باید بیاموزند مواجه شدهاند و باید زمان زیادی را صرف آموزش شخصی خودشان بکنند. تا انتهای این راهنما با ما همراه باشید.
══ فهرست مطالب ══
○ فریمورکهای توسعه فرانت اند
○ تولیدکنندگان سایت استاتیک
○ JAMstack
○ PWA
○ GraphQL
○ ادیتورهای کد یا IDE-ها
○ تست کردن کدهای فرانت اند
○ کد تمیز
○ Git برای توسعه دهندگان فرانت اند
○ مهارتهای نرم لازم برای توسعه دهندگان فرانت اند
○ سخن پایانی
🔸 فریمورکهای توسعه فرانت اند
در سال ۲۰۲۰ احتمالاً شاهد یک دوئل بین ReactJS فیسبوک و VueJS قدرتگرفته از جامعه توسعهدهندگان خواهیم بود. ریاکت هماینک دارای ۱۴۰هزار ستاره در گیتهاب است در حالی که تعداد ستارههای Vue در گیتهاب از آن بیشتر و برابر با ۱۵۳ هزار ستاره است. برای مقایسه باید اشاره کنیم که انگولار دارای ۵۳۰۰۰ ستاره است.
مقایسه حجم جستجوی کلمه React (خط آبی در تصویر زیر) در سال ۲۰۱۹، در برابر Vue (رنگ قرمز)، انگولار (رنگ زرد)، Svelte (رنگ سبز) از این فرضیه پشتیبانی میکند. چنان که میبینید Vue کمی بالاتر از ریاکت قرار دارد. انگولار این حجم از جستجو را ندارد و Svelte قطعاً هیچ نقشی در این مقایسه ندارد.
بنابراین در سال ۲۰۲۰ توسعهدهندگان فرانتاند که با فریمورکهای جاوا اسکریپت کار میکنند یا قصد این کار را دارند، باید روی React یا Vue به عنوان گزینههای اصلی تمرکز کنند. انگولار نیز در صورتی که روی پروژههای سازمانی بزرگ کار میکنید گزینه معتبری محسوب میشود. اگر میخواهید در مورد این فریمورکها بیشتر بدانید میتوانید به وبسایت ریاکت (+) و Vue.js (+) مراجعه کنید.
🔸 تولیدکنندگان سایت استاتیک
تولیدکنندگان سایت استاتیک قدرت رندرینگ سمت سرور (که برای سئو بسیار مهم است اما زمان بارگذاری اولیه را افزایش میدهند) را با اپلیکیشنهای تکصفحهای ترکیب میکنند. بسیاری از پروژهها این روزها یک SSG را انتخاب میکنند هر چند به رندرینگ سمت سرور نیاز نداشته باشند، زیرا راهحلهایی مانند Next یا Nuxt قابلیتهای مفیدی مانند پشتیبانی از Markdown، باندلکننده ماژول، اجراکننده تست یکپارچه و غیره دارند.
اگر در مورد توسعه فرانتاند جدی هستید، باید نگاهی دقیقتر به پروژههای زیر بیندازید و در مورد آنها قدری تجربیات داشته باشید:
– Next (React-based)
– Nuxt (Vue-based)
– Gatsby (React-based)
– Gridsome (Vue-based)
این پروژهها احتمالاً در سال ۲۰۲۰ جزو ترندها خواهند بود، گرچه ممکن است تعداد آنها بیشتر باشد.
مطالعه ادامه مطلب 👇👇
🔗 ۱۰ نکته مهم برای توسعه فرانت اند — راهنمای کاربردی — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
بدیهی است که توسعه فرانت اند در سال ۲۰۲۰ یکی از رشتههای پرطرفدار برنامهنویسی محسوب میشود. تا همین اواخر کافی بود که توسعهدهندگان فرانتاند مقداری با HTML ،CSS و شاید jQuery آشنا باشند تا بتوانند یک وبسایت تعاملی ایجاد کنند. اما امروزه توسعهدهندگان فرانتاند با اکوسیستم وسیع و مداوماً در حال تغییر از مهارتهای توسعه، ابزارها، کتابخانهها و فریمورکهایی که باید بیاموزند مواجه شدهاند و باید زمان زیادی را صرف آموزش شخصی خودشان بکنند. تا انتهای این راهنما با ما همراه باشید.
══ فهرست مطالب ══
○ فریمورکهای توسعه فرانت اند
○ تولیدکنندگان سایت استاتیک
○ JAMstack
○ PWA
○ GraphQL
○ ادیتورهای کد یا IDE-ها
○ تست کردن کدهای فرانت اند
○ کد تمیز
○ Git برای توسعه دهندگان فرانت اند
○ مهارتهای نرم لازم برای توسعه دهندگان فرانت اند
○ سخن پایانی
🔸 فریمورکهای توسعه فرانت اند
در سال ۲۰۲۰ احتمالاً شاهد یک دوئل بین ReactJS فیسبوک و VueJS قدرتگرفته از جامعه توسعهدهندگان خواهیم بود. ریاکت هماینک دارای ۱۴۰هزار ستاره در گیتهاب است در حالی که تعداد ستارههای Vue در گیتهاب از آن بیشتر و برابر با ۱۵۳ هزار ستاره است. برای مقایسه باید اشاره کنیم که انگولار دارای ۵۳۰۰۰ ستاره است.
مقایسه حجم جستجوی کلمه React (خط آبی در تصویر زیر) در سال ۲۰۱۹، در برابر Vue (رنگ قرمز)، انگولار (رنگ زرد)، Svelte (رنگ سبز) از این فرضیه پشتیبانی میکند. چنان که میبینید Vue کمی بالاتر از ریاکت قرار دارد. انگولار این حجم از جستجو را ندارد و Svelte قطعاً هیچ نقشی در این مقایسه ندارد.
بنابراین در سال ۲۰۲۰ توسعهدهندگان فرانتاند که با فریمورکهای جاوا اسکریپت کار میکنند یا قصد این کار را دارند، باید روی React یا Vue به عنوان گزینههای اصلی تمرکز کنند. انگولار نیز در صورتی که روی پروژههای سازمانی بزرگ کار میکنید گزینه معتبری محسوب میشود. اگر میخواهید در مورد این فریمورکها بیشتر بدانید میتوانید به وبسایت ریاکت (+) و Vue.js (+) مراجعه کنید.
🔸 تولیدکنندگان سایت استاتیک
تولیدکنندگان سایت استاتیک قدرت رندرینگ سمت سرور (که برای سئو بسیار مهم است اما زمان بارگذاری اولیه را افزایش میدهند) را با اپلیکیشنهای تکصفحهای ترکیب میکنند. بسیاری از پروژهها این روزها یک SSG را انتخاب میکنند هر چند به رندرینگ سمت سرور نیاز نداشته باشند، زیرا راهحلهایی مانند Next یا Nuxt قابلیتهای مفیدی مانند پشتیبانی از Markdown، باندلکننده ماژول، اجراکننده تست یکپارچه و غیره دارند.
اگر در مورد توسعه فرانتاند جدی هستید، باید نگاهی دقیقتر به پروژههای زیر بیندازید و در مورد آنها قدری تجربیات داشته باشید:
– Next (React-based)
– Nuxt (Vue-based)
– Gatsby (React-based)
– Gridsome (Vue-based)
این پروژهها احتمالاً در سال ۲۰۲۰ جزو ترندها خواهند بود، گرچه ممکن است تعداد آنها بیشتر باشد.
مطالعه ادامه مطلب 👇👇
🔗 ۱۰ نکته مهم برای توسعه فرانت اند — راهنمای کاربردی — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
✳️ هفت ابزار مهم برای دیباگ فرانت اند — راهنمای کاربردی
اگر تاکنون در سمت فرانت کار کرده باشید، میدانید که دیباگ کردن اپلیکیشنها تا چه حد دشوار است. به طور خاص در مورد جاوا اسکریپت، در صورتی که یک اشتباه کوچک انجام دهید، گاهی اوقات ممکن است به ساعتها زمان برای دیباگ نیاز داشته باشید. با وجود انواع مختلف مرورگرها سیستمهای عامل و دستگاهها، بروز باگ امری اجتنابناپذیر است. در این مقاله با ۷ ابزار مهم دیباگ فرانت اند آشنا خواهیم شد. این ابزارها به شما کمک میکنند که این مشکلات را یافته، عیبیابی و اصلاح کنید. بسته به موقعیت برخی از این ابزارها میتوانند مفیدتر از بقیه باشند.
══ فهرست مطالب ══
○ Developer Tools در مرورگرهای وب
○ Postman
○ CSS Lint
○ JSON Formatter & Validator
○ Sentry
○ JSHint
○ سخن پایانی
🔸 Developer Tools در مرورگرهای وب
هر مرورگر وب مدرن مجهز به ابزارهای قدرتمندی برای کمک به دیباگ اپلیکیشنها است. این ابزار میتواند به سادگی گزارههای کنسول با console.log() ،popup-ها با alert() یا حتی مکث در اجرای کد با استفاده از گزارههای debugger باشد. این ابزارها به خصوص گزاره debugger برای کارهای دیباگ کردن بسیار مفید هستند. همچنین میتوانید از زبانه network inspector یا CSS styles inspector این ابزارها برای ساده و سریعتر ساختن کارهای دیباگ استفاده کنید.
🔸 Postman
تقریباً همه اپلیکیشنهای فرانتاند، درخواستها و پاسخهای JSON را ارسال و دریافت میکنند. اپلیکیشن شما با یک API به چیزهای زیادی مانند احراز هویت انتقال دادههای کاربر، و یا حتی چیزی مانند واکشی وضعیت کنونی آب و هوا وصل میشود. Postman (+) یکی از بهترین ابزارهای جاوا اسکریپت برای دیباگ درخواستها و پاسخها محسوب میشود. این ابزار برای سیستمهای ویندوز، مک و لینوکس عرضه شده است. Postman امکان ارسال سریع و آسان درخواستهای REST ،SOAP و GraphQL را به صورت مستقیم فراهم ساخته است.
با استفاده از Postman میتوان درخواستها را دستکاری کرد، پاسخها را آنالیز و مشکلات را دیباگ نمود. این کار به خصوص در مواردی که نمیدانید مشکل در فرانتاند یا بکاند است، بسیار کمک مفیدی محسوب میشود.
مطالعه ادامه مطلب 👇👇
🔗 هفت ابزار مهم برای دیباگ فرانت اند — راهنمای کاربردی — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
اگر تاکنون در سمت فرانت کار کرده باشید، میدانید که دیباگ کردن اپلیکیشنها تا چه حد دشوار است. به طور خاص در مورد جاوا اسکریپت، در صورتی که یک اشتباه کوچک انجام دهید، گاهی اوقات ممکن است به ساعتها زمان برای دیباگ نیاز داشته باشید. با وجود انواع مختلف مرورگرها سیستمهای عامل و دستگاهها، بروز باگ امری اجتنابناپذیر است. در این مقاله با ۷ ابزار مهم دیباگ فرانت اند آشنا خواهیم شد. این ابزارها به شما کمک میکنند که این مشکلات را یافته، عیبیابی و اصلاح کنید. بسته به موقعیت برخی از این ابزارها میتوانند مفیدتر از بقیه باشند.
══ فهرست مطالب ══
○ Developer Tools در مرورگرهای وب
○ Postman
○ CSS Lint
○ JSON Formatter & Validator
○ Sentry
○ JSHint
○ سخن پایانی
🔸 Developer Tools در مرورگرهای وب
هر مرورگر وب مدرن مجهز به ابزارهای قدرتمندی برای کمک به دیباگ اپلیکیشنها است. این ابزار میتواند به سادگی گزارههای کنسول با console.log() ،popup-ها با alert() یا حتی مکث در اجرای کد با استفاده از گزارههای debugger باشد. این ابزارها به خصوص گزاره debugger برای کارهای دیباگ کردن بسیار مفید هستند. همچنین میتوانید از زبانه network inspector یا CSS styles inspector این ابزارها برای ساده و سریعتر ساختن کارهای دیباگ استفاده کنید.
🔸 Postman
تقریباً همه اپلیکیشنهای فرانتاند، درخواستها و پاسخهای JSON را ارسال و دریافت میکنند. اپلیکیشن شما با یک API به چیزهای زیادی مانند احراز هویت انتقال دادههای کاربر، و یا حتی چیزی مانند واکشی وضعیت کنونی آب و هوا وصل میشود. Postman (+) یکی از بهترین ابزارهای جاوا اسکریپت برای دیباگ درخواستها و پاسخها محسوب میشود. این ابزار برای سیستمهای ویندوز، مک و لینوکس عرضه شده است. Postman امکان ارسال سریع و آسان درخواستهای REST ،SOAP و GraphQL را به صورت مستقیم فراهم ساخته است.
با استفاده از Postman میتوان درخواستها را دستکاری کرد، پاسخها را آنالیز و مشکلات را دیباگ نمود. این کار به خصوص در مواردی که نمیدانید مشکل در فرانتاند یا بکاند است، بسیار کمک مفیدی محسوب میشود.
مطالعه ادامه مطلب 👇👇
🔗 هفت ابزار مهم برای دیباگ فرانت اند — راهنمای کاربردی — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
✳️ ۸ ابزار شگفت انگیز برای توسعه دهندگان | فهرست کاربردی
در این مقاله برخی از ابزارهایی را معرفی میکنیم که جامعه توسعهدهندگان به آنها عشق میورزند. این ابزارها اختصاص به هیچ دسته خاصی از توسعهدهندگان ندارند و از این رو مطمئن باشید که دست کم برخی از آنها را مفید خواهید یافت. با ما تا انتهای فهرست کاربردی ۸ ابزار شگفت انگیز برای توسعه دهندگان همراه باشید.
══ فهرست مطالب ══
○ Cloudcraft
○ BundlePhobia
○ Figma
○ Insomnia
○ FontFlipper
○ اکستنشن کروم به نام VisBug
○ RIVE
○ MIRO
○ سخن پایانی
🔸 Cloudcraft
Cloudcraft (+) ابزاری برای توسعهدهندگان بکاند است.
همه توسعهدهندگان بکاند وظایف خود را در حوزه کاریشان برنامهریزی میکنند. به طور خاص زمانی که از AWS استفاده میکنیم، سرویسهای مختلفی وجود دارند که نقش ایفا میکنند. اما به جای این که این کار را روی یک ابزار رسم مسطح خستهکننده انجام دهیم، میتوانیم از Cloud Craft بهره بگیریم.
Cloud Craft یک اینترفیس کشیدن و رها کردن (drag and drop) کاملاً ساده و سرراست برای ادغام سرویسهای مختلف AWS ارائه میکند. این ابزار نه تنها برای برنامهریزی بلکه برای بودجهبندی نیز عملکرد مناسبی دارد.
🔸 BundlePhobia
BundlePhobia (+) ابزاری برای توسعهدهندگان فرانتاند است.
BundlePhobia به «یافتن هزینه افزودن یک پکیج npm به یک باندل» کمک میکند. یعنی با استفاده از BundlePhobia میتوانید بفهمید که افزودن یک پکیج npm چه قدر حجم باندل شما را افزایش میدهد. زمانی که روی فریمورک فرانتاند کار میکنیم، همواره تلاش میکنیم که حجم باندل در کمترین حد باشد تا صفحه بارگذاری اولیه برای کاربران در بهینهترین حالت ممکن باشد.
شما حتی میتوانید فایل package.json را روی این وبسایت بارگذاری کنید تا بفهمید در آن از کدام پکیجها استفاده شده است. این یک ابزار کاملاً ضروری برای همه توسعهدهندگان حرفهای محسوب میشود.
مطالعه ادامه مطلب 👇👇
🔗 ۸ ابزار شگفت انگیز برای توسعه دهندگان | فهرست کاربردی — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
در این مقاله برخی از ابزارهایی را معرفی میکنیم که جامعه توسعهدهندگان به آنها عشق میورزند. این ابزارها اختصاص به هیچ دسته خاصی از توسعهدهندگان ندارند و از این رو مطمئن باشید که دست کم برخی از آنها را مفید خواهید یافت. با ما تا انتهای فهرست کاربردی ۸ ابزار شگفت انگیز برای توسعه دهندگان همراه باشید.
══ فهرست مطالب ══
○ Cloudcraft
○ BundlePhobia
○ Figma
○ Insomnia
○ FontFlipper
○ اکستنشن کروم به نام VisBug
○ RIVE
○ MIRO
○ سخن پایانی
🔸 Cloudcraft
Cloudcraft (+) ابزاری برای توسعهدهندگان بکاند است.
همه توسعهدهندگان بکاند وظایف خود را در حوزه کاریشان برنامهریزی میکنند. به طور خاص زمانی که از AWS استفاده میکنیم، سرویسهای مختلفی وجود دارند که نقش ایفا میکنند. اما به جای این که این کار را روی یک ابزار رسم مسطح خستهکننده انجام دهیم، میتوانیم از Cloud Craft بهره بگیریم.
Cloud Craft یک اینترفیس کشیدن و رها کردن (drag and drop) کاملاً ساده و سرراست برای ادغام سرویسهای مختلف AWS ارائه میکند. این ابزار نه تنها برای برنامهریزی بلکه برای بودجهبندی نیز عملکرد مناسبی دارد.
🔸 BundlePhobia
BundlePhobia (+) ابزاری برای توسعهدهندگان فرانتاند است.
BundlePhobia به «یافتن هزینه افزودن یک پکیج npm به یک باندل» کمک میکند. یعنی با استفاده از BundlePhobia میتوانید بفهمید که افزودن یک پکیج npm چه قدر حجم باندل شما را افزایش میدهد. زمانی که روی فریمورک فرانتاند کار میکنیم، همواره تلاش میکنیم که حجم باندل در کمترین حد باشد تا صفحه بارگذاری اولیه برای کاربران در بهینهترین حالت ممکن باشد.
شما حتی میتوانید فایل package.json را روی این وبسایت بارگذاری کنید تا بفهمید در آن از کدام پکیجها استفاده شده است. این یک ابزار کاملاً ضروری برای همه توسعهدهندگان حرفهای محسوب میشود.
مطالعه ادامه مطلب 👇👇
🔗 ۸ ابزار شگفت انگیز برای توسعه دهندگان | فهرست کاربردی — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
✳️ تشخیص زبان برنامه نویسی سایت | فهرست ابزارهای کاربردی
اگر تاکنون کنجکاو شدهاید که یک وبسایت خاص از کدام فناوری استفاده میکند، احتمالاً تنها و یا نخستین کسی نیستید که این سؤال برایش پیش آمده است. افراد به دلایل مختلفی به تشخیص زبان برنامه نویسی سایت علاقهمند میشوند. دلیل نخست نوعی کنجکاوی برای یافتن و دانستن فناوریهای مورد استفاده در یک وبسایت است. دلیل دوم این است که فرد یک متخصص امنیت رایانه است و نیاز به کارهای نظارتی دارد. دلیل سوم ممکن است این باشد که فرد مشغول تحقیقات بازاریابی است. در این نوشته با روشهای مختلف تشخیص زبان برنامه نویسی سایت آشنا خواهیم شد.
══ فهرست مطالب ══
○ ابزارهای تشخیص زبان برنامه نویسی سایت
○ سخن پایانی
🔸 ابزارهای تشخیص زبان برنامه نویسی سایت
ابزارهای آنلاین زیادی وجود دارند که امکان پیدا کردن ایمیل صاحب سایت، دانستن سیستم عامل سرور میزبانی کننده سایت، فناوریهای وب مورد استفاده در آن سایت و دیگر اطلاعات مرتبط را فراهم میسازند. در ادامه این راهنما با فهرستی از این ابزارها آشنا میشویم.
ابزار گزارش سایت Netcraft (+) احتمالاً یکی از قدیمیترین ابزارهای موجود است که به شما در یافتن اطلاعات مختلف مرتبط با یک سایت به شرح زیر کمک میکند:
– پسزمینه: وبسایت نخستین بار کی دیده شده است، عنوان آن چیست، رتبهبندیاش کدام است و زبان و توضیحات آن چیست.
– شبکه: نشانی IPv۴/IPv۶، رجیسترار دامنه، مالک شبکه، کشور میزبان.
– SSL/TLS: حالت آسیبپذیری مانند POODLE، heart bleed، جزییات SSL cert، پروتکل مذاکره، کلید عمومی، نوع گواهینامه و جزییات زنجیره.
– هاستینگ: هاستینگی که وبسایت را میزبانی میکند.
– جزییات SPF.
– امنیت: رتبهبندی ریسک، لیست بلاک.
– فناوریهای سایت: CDN، CMS، نرمافزار، RSS، فشردهسازی، انکودینگ کاراکتر.
– و موارد بسیار زیاد دیگر.
BuiltWith (+) یک ابزار آنلاین پژوهش اینترنتی است که امکان فهمیدن فناوریهای مورد استفاده از سوی یک وبسایت را به شیوهی عالی فراهم میسازد و همچنین آمار روند فناوریهای مرتبط را در یک نمودار زیبا به نمایش میگذارد. BuiltWith علاوه بر معرفی فناوریهای مورد استفاده وبسایت، امکان دانستن وجود تبلیغات را در وبسایت را فراهم میسازد. مشاهده شیوه ردگیری وبسایت در سطح کلان امکان افشای هر جزء را ارائه کرده است.
🔸 سخن پایانی
چنان که در ابتدای این مطلب تشخیص زبان برنامه نویسی سایت بیان کردیم، شما به دلایل مختلفی ممکن است به دانستن اطلاعاتی در مورد فناوریهای مورد استفاده در یک وبسایت نیاز داشته باشید. امیدواریم ابزارهایی که در این نوشته معرفی شدند به شما کمک کنند که بتوانید در زمینه تحقیقات خود موفق باشید.
اگر این مطلب برای شما مفید بوده است، آموزشها و مطالب زیر نیز به شما پیشنهاد میشوند:
– مجموعه آموزشهای طراحی سایت
– آموزش طراحی قالب استاتیک برای سایت
– مجموعه آموزش طراحی سایت با HTML و CSS
– سایت ساز یا وردپرس، کدام یک بهتر است؟
– مناسبترین زبان برنامهنویسی وب برای اهداف مختلف چیست؟
مطالعه ادامه مطلب 👇👇
🔗 تشخیص زبان برنامه نویسی سایت | فهرست ابزارهای کاربردی — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
اگر تاکنون کنجکاو شدهاید که یک وبسایت خاص از کدام فناوری استفاده میکند، احتمالاً تنها و یا نخستین کسی نیستید که این سؤال برایش پیش آمده است. افراد به دلایل مختلفی به تشخیص زبان برنامه نویسی سایت علاقهمند میشوند. دلیل نخست نوعی کنجکاوی برای یافتن و دانستن فناوریهای مورد استفاده در یک وبسایت است. دلیل دوم این است که فرد یک متخصص امنیت رایانه است و نیاز به کارهای نظارتی دارد. دلیل سوم ممکن است این باشد که فرد مشغول تحقیقات بازاریابی است. در این نوشته با روشهای مختلف تشخیص زبان برنامه نویسی سایت آشنا خواهیم شد.
══ فهرست مطالب ══
○ ابزارهای تشخیص زبان برنامه نویسی سایت
○ سخن پایانی
🔸 ابزارهای تشخیص زبان برنامه نویسی سایت
ابزارهای آنلاین زیادی وجود دارند که امکان پیدا کردن ایمیل صاحب سایت، دانستن سیستم عامل سرور میزبانی کننده سایت، فناوریهای وب مورد استفاده در آن سایت و دیگر اطلاعات مرتبط را فراهم میسازند. در ادامه این راهنما با فهرستی از این ابزارها آشنا میشویم.
ابزار گزارش سایت Netcraft (+) احتمالاً یکی از قدیمیترین ابزارهای موجود است که به شما در یافتن اطلاعات مختلف مرتبط با یک سایت به شرح زیر کمک میکند:
– پسزمینه: وبسایت نخستین بار کی دیده شده است، عنوان آن چیست، رتبهبندیاش کدام است و زبان و توضیحات آن چیست.
– شبکه: نشانی IPv۴/IPv۶، رجیسترار دامنه، مالک شبکه، کشور میزبان.
– SSL/TLS: حالت آسیبپذیری مانند POODLE، heart bleed، جزییات SSL cert، پروتکل مذاکره، کلید عمومی، نوع گواهینامه و جزییات زنجیره.
– هاستینگ: هاستینگی که وبسایت را میزبانی میکند.
– جزییات SPF.
– امنیت: رتبهبندی ریسک، لیست بلاک.
– فناوریهای سایت: CDN، CMS، نرمافزار، RSS، فشردهسازی، انکودینگ کاراکتر.
– و موارد بسیار زیاد دیگر.
BuiltWith (+) یک ابزار آنلاین پژوهش اینترنتی است که امکان فهمیدن فناوریهای مورد استفاده از سوی یک وبسایت را به شیوهی عالی فراهم میسازد و همچنین آمار روند فناوریهای مرتبط را در یک نمودار زیبا به نمایش میگذارد. BuiltWith علاوه بر معرفی فناوریهای مورد استفاده وبسایت، امکان دانستن وجود تبلیغات را در وبسایت را فراهم میسازد. مشاهده شیوه ردگیری وبسایت در سطح کلان امکان افشای هر جزء را ارائه کرده است.
🔸 سخن پایانی
چنان که در ابتدای این مطلب تشخیص زبان برنامه نویسی سایت بیان کردیم، شما به دلایل مختلفی ممکن است به دانستن اطلاعاتی در مورد فناوریهای مورد استفاده در یک وبسایت نیاز داشته باشید. امیدواریم ابزارهایی که در این نوشته معرفی شدند به شما کمک کنند که بتوانید در زمینه تحقیقات خود موفق باشید.
اگر این مطلب برای شما مفید بوده است، آموزشها و مطالب زیر نیز به شما پیشنهاد میشوند:
– مجموعه آموزشهای طراحی سایت
– آموزش طراحی قالب استاتیک برای سایت
– مجموعه آموزش طراحی سایت با HTML و CSS
– سایت ساز یا وردپرس، کدام یک بهتر است؟
– مناسبترین زبان برنامهنویسی وب برای اهداف مختلف چیست؟
مطالعه ادامه مطلب 👇👇
🔗 تشخیص زبان برنامه نویسی سایت | فهرست ابزارهای کاربردی — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
✳️ مناسبترین زبان برنامهنویسی وب برای اهداف مختلف چیست؟
پیش از انتخاب زبان برنامهنویسی مناسب، هر فرد باید به یک سری سؤالات بخصوص پاسخ دهد. به عنوان مثال، اگر شخصی بخواهد کدنویسی یک برنامه کاربردی تحت وب یا مرورگر را آغاز کند، چه گزینههایی پیش روی خود خواهد داشت؟ یا چرا باید در شرایط بخصوص، زبان برنامهنویسی خاصی را به زبانهای دیگر ترجیح داد؟ این مقاله، چکلیستی از یک سری سؤال مهم را در اختیار شما قرار میدهد که میتوانید با در نظر داشتن و پاسخ به آنها، مناسبترین زبان برنامهنویسی وب برای خودتان را انتخاب کنید.
══ فهرست مطالب ══
○ «مناسب بودن» را برای خود تعریف کنید
○ استفاده از کدام زبان برنامهنویسی، آسانتر است؟
○ محبوبترین زبان برنامهنویسی وب کدام است؟
○ کدامیک از زبانهای برنامهنویسی وب چندمنظوره هستند؟
○ منابع آموزشی برای زبانهای برنامهنویسی وب کدامند؟
○ از چه پلتفرمی استفاده میکنید؟
○ انتخاب توسعه فرانتاند (Front-End) یا بکاند (Back-End)؟
○ هدف شما از برنامهنویسی چیست؟
○ سخن آخر
🔸 «مناسب بودن» را برای خود تعریف کنید
انتخاب زبان «مناسب» میتواند کمی گمراهکننده باشد. این بدان معناست که گزینههای نامناسب نیز وجود دارند. برخی از زبانها به شما در دستیابی به اهداف برنامهنویسیتان هیچ کمکی نمیکنند، با این حال در بسیاری از موارد، روشهای متعددی برای رسیدن به خروجی مطلوب وجود دارند. این موضوع، مخصوصاً در برنامهنویسی وب مصداق دارد.
تمرکز اصلی برخی از زبانها مانند جاوااسکریپت بر روی توسعه وب است، در حالیکه برخی دیگر مانند جاوا، به عنوان زبانهای عمومی شناخته میشوند. حال باید بر روی سؤالاتی تمرکز کنید که پاسخ آنها شما را در تعیین زبان برنامهنویسی مناسب یاری کند. در ادامه، هر یک از این سؤالات را مورد بررسی قرار خواهیم داد.
🔸 استفاده از کدام زبان برنامهنویسی، آسانتر است؟
تعیین آسانترین زبان برنامهنویسی وب، به سابقه شما بستگی دارد. اگر تجربهای در استفاده از زبانهایی مانند HTML داشته باشید، با مفاهیم «سینتکس» (Syntax) و «قالببندی» (Layout) آشنا خواهید بود. علاوه بر این، سرعت یادگیری افراد با هم متفاوت است و همین موضوع، تعریف «آسان بودن» را برای هر فرد تعیین میکند. با این حال، برخی از زبانهای برنامهنویسی به طور کلی نسبت به زبانهای دیگر سادهتر هستند.
برای استفاده آسان از یک زبان، باید گزینهای را انتخاب کنید که علاوه بر بهرهمندی از «فریمورک» (Framework) و کتابخانههای متعدد، ساختاریافته، مختصر و مفید باشد. علاوه بر اینها، داشتن سینتکس سادهتر نیز به عنوان یک مزیت محسوب میشود. در قسمت زیر، برخی از زبانهای مناسب برای افراد مبتدی به همراه ویژگیهای اصلی این زبانها آورده شده است:
جاوا اسکریپت
مطالعه ادامه مطلب 👇👇
🔗 مناسبترین زبان برنامهنویسی وب برای اهداف مختلف چیست؟ — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
پیش از انتخاب زبان برنامهنویسی مناسب، هر فرد باید به یک سری سؤالات بخصوص پاسخ دهد. به عنوان مثال، اگر شخصی بخواهد کدنویسی یک برنامه کاربردی تحت وب یا مرورگر را آغاز کند، چه گزینههایی پیش روی خود خواهد داشت؟ یا چرا باید در شرایط بخصوص، زبان برنامهنویسی خاصی را به زبانهای دیگر ترجیح داد؟ این مقاله، چکلیستی از یک سری سؤال مهم را در اختیار شما قرار میدهد که میتوانید با در نظر داشتن و پاسخ به آنها، مناسبترین زبان برنامهنویسی وب برای خودتان را انتخاب کنید.
══ فهرست مطالب ══
○ «مناسب بودن» را برای خود تعریف کنید
○ استفاده از کدام زبان برنامهنویسی، آسانتر است؟
○ محبوبترین زبان برنامهنویسی وب کدام است؟
○ کدامیک از زبانهای برنامهنویسی وب چندمنظوره هستند؟
○ منابع آموزشی برای زبانهای برنامهنویسی وب کدامند؟
○ از چه پلتفرمی استفاده میکنید؟
○ انتخاب توسعه فرانتاند (Front-End) یا بکاند (Back-End)؟
○ هدف شما از برنامهنویسی چیست؟
○ سخن آخر
🔸 «مناسب بودن» را برای خود تعریف کنید
انتخاب زبان «مناسب» میتواند کمی گمراهکننده باشد. این بدان معناست که گزینههای نامناسب نیز وجود دارند. برخی از زبانها به شما در دستیابی به اهداف برنامهنویسیتان هیچ کمکی نمیکنند، با این حال در بسیاری از موارد، روشهای متعددی برای رسیدن به خروجی مطلوب وجود دارند. این موضوع، مخصوصاً در برنامهنویسی وب مصداق دارد.
تمرکز اصلی برخی از زبانها مانند جاوااسکریپت بر روی توسعه وب است، در حالیکه برخی دیگر مانند جاوا، به عنوان زبانهای عمومی شناخته میشوند. حال باید بر روی سؤالاتی تمرکز کنید که پاسخ آنها شما را در تعیین زبان برنامهنویسی مناسب یاری کند. در ادامه، هر یک از این سؤالات را مورد بررسی قرار خواهیم داد.
🔸 استفاده از کدام زبان برنامهنویسی، آسانتر است؟
تعیین آسانترین زبان برنامهنویسی وب، به سابقه شما بستگی دارد. اگر تجربهای در استفاده از زبانهایی مانند HTML داشته باشید، با مفاهیم «سینتکس» (Syntax) و «قالببندی» (Layout) آشنا خواهید بود. علاوه بر این، سرعت یادگیری افراد با هم متفاوت است و همین موضوع، تعریف «آسان بودن» را برای هر فرد تعیین میکند. با این حال، برخی از زبانهای برنامهنویسی به طور کلی نسبت به زبانهای دیگر سادهتر هستند.
برای استفاده آسان از یک زبان، باید گزینهای را انتخاب کنید که علاوه بر بهرهمندی از «فریمورک» (Framework) و کتابخانههای متعدد، ساختاریافته، مختصر و مفید باشد. علاوه بر اینها، داشتن سینتکس سادهتر نیز به عنوان یک مزیت محسوب میشود. در قسمت زیر، برخی از زبانهای مناسب برای افراد مبتدی به همراه ویژگیهای اصلی این زبانها آورده شده است:
جاوا اسکریپت
مطالعه ادامه مطلب 👇👇
🔗 مناسبترین زبان برنامهنویسی وب برای اهداف مختلف چیست؟ — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
✳️ سند و ساختار وب سایت در HTML — راهنمای کاربردی
در بخش قبلی این سری مطالب آموزش HTML در مورد قالببندی پیشرفته متن صحبت کردیم. در این بخش قصد داریم به بررسی سند و ساختار وب سایت در HTML بپردازیم. HTML علاوه بر این که به تعریف اجزای منفرد یک صفحه مانند پاراگراف یا تصویر کمک میکند، چند عنصر در سطح بلوک، مانند «هدر» (Header) یا «منوی ناوبری» (Navigation menu) نیز دارد که برای تعریف نواحی مختلف صفحه مورد استفاده قرار میگیرند. در این نوشته به بررسی روش طراحی ساختار یک وبسایت کوچک میپردازیم و کد HTML مورد نیاز برای بازنمایی این ساختار را مینویسیم.
══ فهرست مطالب ══
○ پیشنیازها
○ بخشهای ابتدایی یک سند
○ استفاده از HTML در ساختار وب سایت
○ توضیح بیشتر عناصر طرحبندی HTML
○ برنامهریزی برای یک وبسایت ساده
○ جمعبندی
🔸 پیشنیازها
– سواد مقدماتی HTML که در نوشته «آشنایی مقدماتی با HTML» ارائه شده است.
– قالببندی متن که در نوشته «مبانی کار با متن در HTML» معرفی شده است.
– روش کار با هایپرلینکها که در نوشته «ایجاد هایپرلینک در HTML» ارائه شده است.
هدف از این مقاله یادگیری شیوه سازماندهی سند با استفاده از تگهای معناشناختی و روش کار با ساختار یک وبسایت ساده است.
🔸 بخشهای ابتدایی یک سند
صفحههای وب میتوانند کاملاً متفاوت از همدیگر به نظر برسند و در عمل نیز چنین هستند؛ اما همه آنها دارای اجزای استاندارد مشابهی هستند. به جز در مواردی که صفحه، در حال نمایش یک ویدئو یا بازی تمام صفحه باشد، بخشی از یک پروژه هنری باشد و یا این که ساختاردهی نامناسبی صورت گرفته باشد، در باقی موارد ساختار یک صفحه وب به صورت زیر خواهد بود:
هدر به طور معمول یک نوار عریض در بخش فوقانی صفحه است که دارای یک عنوان بزرگ/یا لوگو است. در این بخش اطلاعات رایج اصلی در مورد یک وبسایت ارائه میشود و عموماً در همه صفحههای یک وبسایت مشترک است.
نوار ناوبری شامل لینکهایی به بخشهای اصلی وبسایت است که عموماً با استفاده از دکمههای منو، لینکها یا برگهها نمایش مییابد. همانند هدر، این محتوا نیز معمولاً در همه صفحههای وبسایت ثابت است چون داشتن ناوبری ناهماهنگ در صفحههای مختلف موجب سردرگمی کاربران میشود. بسیاری از طراحان وبسایتها، نوار ناوبری را به عنوان بخشی از هدر در نظر میگیرند و آن را یک مؤلفه مستقل نمیدانند؛ اما این وضعیت یک الزام نیست. در واقع برخی دیگر نیز استدلال میکنند که جدا نگه داشتن این دو جزء، موجب دسترسپذیری بهتر وبسایت میشود، زیرا نرمافزارهای قرائت صفحه میتوانند در صورتی که دو ویژگی از هم جدا بشوند آنها را بهتر بخوانند.
مطالعه ادامه مطلب 👇👇
🔗 سند و ساختار وب سایت در HTML — راهنمای کاربردی — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
در بخش قبلی این سری مطالب آموزش HTML در مورد قالببندی پیشرفته متن صحبت کردیم. در این بخش قصد داریم به بررسی سند و ساختار وب سایت در HTML بپردازیم. HTML علاوه بر این که به تعریف اجزای منفرد یک صفحه مانند پاراگراف یا تصویر کمک میکند، چند عنصر در سطح بلوک، مانند «هدر» (Header) یا «منوی ناوبری» (Navigation menu) نیز دارد که برای تعریف نواحی مختلف صفحه مورد استفاده قرار میگیرند. در این نوشته به بررسی روش طراحی ساختار یک وبسایت کوچک میپردازیم و کد HTML مورد نیاز برای بازنمایی این ساختار را مینویسیم.
══ فهرست مطالب ══
○ پیشنیازها
○ بخشهای ابتدایی یک سند
○ استفاده از HTML در ساختار وب سایت
○ توضیح بیشتر عناصر طرحبندی HTML
○ برنامهریزی برای یک وبسایت ساده
○ جمعبندی
🔸 پیشنیازها
– سواد مقدماتی HTML که در نوشته «آشنایی مقدماتی با HTML» ارائه شده است.
– قالببندی متن که در نوشته «مبانی کار با متن در HTML» معرفی شده است.
– روش کار با هایپرلینکها که در نوشته «ایجاد هایپرلینک در HTML» ارائه شده است.
هدف از این مقاله یادگیری شیوه سازماندهی سند با استفاده از تگهای معناشناختی و روش کار با ساختار یک وبسایت ساده است.
🔸 بخشهای ابتدایی یک سند
صفحههای وب میتوانند کاملاً متفاوت از همدیگر به نظر برسند و در عمل نیز چنین هستند؛ اما همه آنها دارای اجزای استاندارد مشابهی هستند. به جز در مواردی که صفحه، در حال نمایش یک ویدئو یا بازی تمام صفحه باشد، بخشی از یک پروژه هنری باشد و یا این که ساختاردهی نامناسبی صورت گرفته باشد، در باقی موارد ساختار یک صفحه وب به صورت زیر خواهد بود:
هدر به طور معمول یک نوار عریض در بخش فوقانی صفحه است که دارای یک عنوان بزرگ/یا لوگو است. در این بخش اطلاعات رایج اصلی در مورد یک وبسایت ارائه میشود و عموماً در همه صفحههای یک وبسایت مشترک است.
نوار ناوبری شامل لینکهایی به بخشهای اصلی وبسایت است که عموماً با استفاده از دکمههای منو، لینکها یا برگهها نمایش مییابد. همانند هدر، این محتوا نیز معمولاً در همه صفحههای وبسایت ثابت است چون داشتن ناوبری ناهماهنگ در صفحههای مختلف موجب سردرگمی کاربران میشود. بسیاری از طراحان وبسایتها، نوار ناوبری را به عنوان بخشی از هدر در نظر میگیرند و آن را یک مؤلفه مستقل نمیدانند؛ اما این وضعیت یک الزام نیست. در واقع برخی دیگر نیز استدلال میکنند که جدا نگه داشتن این دو جزء، موجب دسترسپذیری بهتر وبسایت میشود، زیرا نرمافزارهای قرائت صفحه میتوانند در صورتی که دو ویژگی از هم جدا بشوند آنها را بهتر بخوانند.
مطالعه ادامه مطلب 👇👇
🔗 سند و ساختار وب سایت در HTML — راهنمای کاربردی — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
✳️ آموزش CSS Grid — گام به گام، کاربردی و پروژه محور
طراحی و توسعه وب یکی از محبوبترین حوزهها در دنیای فناوری اطلاعات به حساب میآید. ابزارهای مرتبط با این حوزه به سرعت در حال تحول و پیشرفت هستند. HTML و CSS از جمله مهمترین ابزارها و فناوریهای برنامهنویسی وب به شمار میروند. CSS Grid Layouts یک سیستم قالببندی یا طرحبندی (Layout System) دو بُعدی است که به طور خاص برای طراحی رابط کاربری در توسعه وب مورد استفاده قرار میگیرد. در این مقاله، آموزش CSS Grid به طور جامع و رایگان ارائه و به سوالات رایج CSS Grid پاسخ داده شده است. از این مقاله آموزشی میتوان به عنوان راهنمایی برای شروع به کار با CSS Grid استفاده کرد. همچنین دورههای آموزش ویدیویی مرتبط با CSS Grid نیز در این نوشته برای علاقهمندان معرفی شدهاند.
══ فهرست مطالب ══
○ CSS Grid چیست ؟
○ آموزش CSS Grid : مفاهیم و اصطلاحات اولیه
○ Grid Container چیست ؟
○ ویژگیهای Grid Container
○ معرفی فیلم های آموزش CSS و HTML فرادرس
○ آموزش CSS Grid : قرار دادن آیتمها در Grid
○ آموزش CSS Grid : مرتبسازی اقلام Grid
○ آموزش CSS Grid : آیتمهای گرید همپوشان
○ آموزش CSS Grid : آیتمهای گرید با جانمایی ثابت
○ Propertyهای مرتبط با آیتمهای Grid
○ آموزش CSS Grid : چینش Grid و آیتمهای گرید
○ ابزار Grid Inspector در آموزش CSS Grid
○ مثالهایی برای آموزش CSS Grid
○ پشتیبانی مرورگرها از CSS Grid
○ معرفی فیلم های آموزش طراحی وب فرادرس
○ جمعبندی
🔸 CSS Grid چیست ؟
طرحبندی CSS Grid یک سیستم شبکهای دو بُعدی را برای CSS فراهم میکند. از این فضای مُشبک یا همان Grid میتوان برای طرحبندی نواحی اصلی صفحه یا عناصر کوچک رابط کاربری استفاده کرد. یک Grid مجموعهای از خطهای افقی و عمودی متقاطع است که تعریف کننده سطرها و ستونها هستند. میتوان در داخل این سطرها و ستونها عنصرهایی را قرار داد و جانمایی کرد.
مطالعه ادامه مطلب 👇👇
🔗 آموزش CSS Grid — گام به گام، کاربردی و پروژه محور — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
طراحی و توسعه وب یکی از محبوبترین حوزهها در دنیای فناوری اطلاعات به حساب میآید. ابزارهای مرتبط با این حوزه به سرعت در حال تحول و پیشرفت هستند. HTML و CSS از جمله مهمترین ابزارها و فناوریهای برنامهنویسی وب به شمار میروند. CSS Grid Layouts یک سیستم قالببندی یا طرحبندی (Layout System) دو بُعدی است که به طور خاص برای طراحی رابط کاربری در توسعه وب مورد استفاده قرار میگیرد. در این مقاله، آموزش CSS Grid به طور جامع و رایگان ارائه و به سوالات رایج CSS Grid پاسخ داده شده است. از این مقاله آموزشی میتوان به عنوان راهنمایی برای شروع به کار با CSS Grid استفاده کرد. همچنین دورههای آموزش ویدیویی مرتبط با CSS Grid نیز در این نوشته برای علاقهمندان معرفی شدهاند.
══ فهرست مطالب ══
○ CSS Grid چیست ؟
○ آموزش CSS Grid : مفاهیم و اصطلاحات اولیه
○ Grid Container چیست ؟
○ ویژگیهای Grid Container
○ معرفی فیلم های آموزش CSS و HTML فرادرس
○ آموزش CSS Grid : قرار دادن آیتمها در Grid
○ آموزش CSS Grid : مرتبسازی اقلام Grid
○ آموزش CSS Grid : آیتمهای گرید همپوشان
○ آموزش CSS Grid : آیتمهای گرید با جانمایی ثابت
○ Propertyهای مرتبط با آیتمهای Grid
○ آموزش CSS Grid : چینش Grid و آیتمهای گرید
○ ابزار Grid Inspector در آموزش CSS Grid
○ مثالهایی برای آموزش CSS Grid
○ پشتیبانی مرورگرها از CSS Grid
○ معرفی فیلم های آموزش طراحی وب فرادرس
○ جمعبندی
🔸 CSS Grid چیست ؟
طرحبندی CSS Grid یک سیستم شبکهای دو بُعدی را برای CSS فراهم میکند. از این فضای مُشبک یا همان Grid میتوان برای طرحبندی نواحی اصلی صفحه یا عناصر کوچک رابط کاربری استفاده کرد. یک Grid مجموعهای از خطهای افقی و عمودی متقاطع است که تعریف کننده سطرها و ستونها هستند. میتوان در داخل این سطرها و ستونها عنصرهایی را قرار داد و جانمایی کرد.
مطالعه ادامه مطلب 👇👇
🔗 آموزش CSS Grid — گام به گام، کاربردی و پروژه محور — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
✳️ چگونه برنامه نویس وب شویم؟ – بخش اول: فرانتاند (FrontEnd)
توسعه وب یکی از شاخههای مهم برنامهنویسی است که تقاضای بالایی هم از سوی استارتاپها و هم در بخش سازمانی دارد. در این راهنما، مقدماتی از این مبحث، به خصوص در زمینه فرانتاند را ارائه خواهیم کرد و بدین ترتیب این راهنما که بخشهای دیگری نیز خواهد داشت، احتمالاً برای افراد مبتدی مناسب است؛ اما توسعهدهندگان متوسط نیز ممکن است بخشهایی از آن را مفید بیابند.
══ فهرست مطالب ══
○ زبانها و ابزارهای توسعه فرانتاند
○ HTML
○ CSS
○ جاوا اسکریپت
○ کتابخانههای کامپوننت
○ ابزارهای فرانتاند
○ سخن پایانی
🔸 زبانها و ابزارهای توسعه فرانتاند
در آغاز یک نقشه برای چشمانداز فرانتاند ارائه میکنیم که در این نقشه چیزهایی که باید در این حوزه بشناسید معرفی شدهاند.
خطوط زرد رنگ چیزهای مقدماتی که باید بیاموزید را نشان میدهند؛ و خطوط نارنجی نماینده موضوعات پیشرفتهتری هستند که میتوانید یادگیری آنها را به بعدتر موکول کنید.
توسعه فرانتاند که به نام توسعه رابط کاربری (UI) نیز نامیده میشود به ایجاد رابطهای کاربری وب، یعنی بخشهایی از اپلیکیشن گفته میشود که کاربر آنها را مشاهده کرده و تعامل میکند. توسعه فرانتاند به طور عمده بر مبنای سه رکن استوار است: HTML برای نشانهگذاری، CSS برای سبک دهی و جاوا اسکریپت برای منطق و تعاملها. با این که این سه فناوری در طی زمان ثابت ماندهاند؛ اما ابزارها و فریمورکهای تشکیل دهنده به طور مداوم در حال تغییر هستند. در این بخش نقطه شروعی برای آغاز کاوش اکوسیستم فرانتاند به شما ارائه میکنیم.
🔸 HTML
این عبارت اختصاری برای «زبان نشانهگذاری ابرمتن» (Hyper Text Markup Language) است که امکان ساختاردهی به اطلاعاتی که برای کاربر نمایش مییابد را فراهم میسازد. یک سند HTML شامل اجزایی مانند عنوان، پاراگراف متنی یا فیلد ورود متن است که هر یک به وسیله یک تگ HTML نمایش مییابند. اسناد HTML میتوانند با استفاده از هایپرلینک به اسناد دیگری مرتبط شوند. هر تگ نوع محتوای خاص خود را دارد، همچنین ظاهر مشخص و رفتار تعریف شده خاصی برای خود را دارد. زمانی که با HTML آشنا شدید، میتوانید یک صفحه کاملاً ساده استاتیک HTML بسازید.
مطالعه ادامه مطلب 👇👇
🔗 چگونه برنامه نویس وب شویم؟ – بخش اول: فرانتاند (FrontEnd) — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
توسعه وب یکی از شاخههای مهم برنامهنویسی است که تقاضای بالایی هم از سوی استارتاپها و هم در بخش سازمانی دارد. در این راهنما، مقدماتی از این مبحث، به خصوص در زمینه فرانتاند را ارائه خواهیم کرد و بدین ترتیب این راهنما که بخشهای دیگری نیز خواهد داشت، احتمالاً برای افراد مبتدی مناسب است؛ اما توسعهدهندگان متوسط نیز ممکن است بخشهایی از آن را مفید بیابند.
══ فهرست مطالب ══
○ زبانها و ابزارهای توسعه فرانتاند
○ HTML
○ CSS
○ جاوا اسکریپت
○ کتابخانههای کامپوننت
○ ابزارهای فرانتاند
○ سخن پایانی
🔸 زبانها و ابزارهای توسعه فرانتاند
در آغاز یک نقشه برای چشمانداز فرانتاند ارائه میکنیم که در این نقشه چیزهایی که باید در این حوزه بشناسید معرفی شدهاند.
خطوط زرد رنگ چیزهای مقدماتی که باید بیاموزید را نشان میدهند؛ و خطوط نارنجی نماینده موضوعات پیشرفتهتری هستند که میتوانید یادگیری آنها را به بعدتر موکول کنید.
توسعه فرانتاند که به نام توسعه رابط کاربری (UI) نیز نامیده میشود به ایجاد رابطهای کاربری وب، یعنی بخشهایی از اپلیکیشن گفته میشود که کاربر آنها را مشاهده کرده و تعامل میکند. توسعه فرانتاند به طور عمده بر مبنای سه رکن استوار است: HTML برای نشانهگذاری، CSS برای سبک دهی و جاوا اسکریپت برای منطق و تعاملها. با این که این سه فناوری در طی زمان ثابت ماندهاند؛ اما ابزارها و فریمورکهای تشکیل دهنده به طور مداوم در حال تغییر هستند. در این بخش نقطه شروعی برای آغاز کاوش اکوسیستم فرانتاند به شما ارائه میکنیم.
🔸 HTML
این عبارت اختصاری برای «زبان نشانهگذاری ابرمتن» (Hyper Text Markup Language) است که امکان ساختاردهی به اطلاعاتی که برای کاربر نمایش مییابد را فراهم میسازد. یک سند HTML شامل اجزایی مانند عنوان، پاراگراف متنی یا فیلد ورود متن است که هر یک به وسیله یک تگ HTML نمایش مییابند. اسناد HTML میتوانند با استفاده از هایپرلینک به اسناد دیگری مرتبط شوند. هر تگ نوع محتوای خاص خود را دارد، همچنین ظاهر مشخص و رفتار تعریف شده خاصی برای خود را دارد. زمانی که با HTML آشنا شدید، میتوانید یک صفحه کاملاً ساده استاتیک HTML بسازید.
مطالعه ادامه مطلب 👇👇
🔗 چگونه برنامه نویس وب شویم؟ – بخش اول: فرانتاند (FrontEnd) — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
✳️ گنجاندن صوت و ویدیو در فایل های HTML — از صفر تا صد
HTML امکان ایجاد پلیرهای صوتی و ویدئویی مبتنی بر استانداردها را فراهم ساخته است که نیاز به استفاده از هر گونه افزونه را رفع میکنند. افزودن صوت یا ویدئو به یک صفحه وب تقریباً به همان سهولت اضافه کردن یک تصویر یا قالببندی متن است.
══ فهرست مطالب ══
○ عنصر Video
○ عنصر Source
○ عنصر Audio
🔸 عنصر Video
عنصر <video> امکان گنجاندن فایلهای ویدئویی در یک فایل HTML را به روشی کاملاً مشابه درج تصویر در صفحه فراهم ساخته است.
خصوصیات آن شامل موارد زیر هستند:
– Src – این خصوصیت نشانگر منبع فایل است که کاملاً مشابه عنصر image عمل میکند. در واقع در این خصوصیت لینکی برای ویدیو اضافه میکنیم.
– Type – این همان جایی است که نوع video/mp۴ را تعیین میکنیم چون mp۴. قالب ویدئویی است که میخواهیم استفاده کنیم. میتوان از فرمتهای ویدئویی دیگری مانند ogg. یا webm. نیز استفاده کرد که در این صورت مقدار این متغیر به ترتیب به صورتهای ideo/ogg یا video/WebM تغییر مییابد.
دقت کنید که قالبهای ویدئویی رایج شامل موارد WebM ،Ogg و MP۴ هستند.
🔸 عنصر Source
در بخش قبل از عنصر video با تگ self-closing استفاده کردیم؛ اما در این بخش عنصر ویدئو را خودمان میبندیم. بنابراین اکنون یک تگ باز کردن و یک تگ بستن داریم.
همچنین خصوصیتهای type و source را از عنصر ویدئو حذف میکنیم و آن را به عنصر دیگری میچسبانیم.
خصوصیتها را به عنصر source انتقال دادهایم. شاید از خود بپرسید چرا باید چنین کاری بکنیم؟
مطالعه ادامه مطلب 👇👇
🔗 گنجاندن صوت و ویدیو در فایل های HTML — از صفر تا صد — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
HTML امکان ایجاد پلیرهای صوتی و ویدئویی مبتنی بر استانداردها را فراهم ساخته است که نیاز به استفاده از هر گونه افزونه را رفع میکنند. افزودن صوت یا ویدئو به یک صفحه وب تقریباً به همان سهولت اضافه کردن یک تصویر یا قالببندی متن است.
══ فهرست مطالب ══
○ عنصر Video
○ عنصر Source
○ عنصر Audio
🔸 عنصر Video
عنصر <video> امکان گنجاندن فایلهای ویدئویی در یک فایل HTML را به روشی کاملاً مشابه درج تصویر در صفحه فراهم ساخته است.
خصوصیات آن شامل موارد زیر هستند:
– Src – این خصوصیت نشانگر منبع فایل است که کاملاً مشابه عنصر image عمل میکند. در واقع در این خصوصیت لینکی برای ویدیو اضافه میکنیم.
– Type – این همان جایی است که نوع video/mp۴ را تعیین میکنیم چون mp۴. قالب ویدئویی است که میخواهیم استفاده کنیم. میتوان از فرمتهای ویدئویی دیگری مانند ogg. یا webm. نیز استفاده کرد که در این صورت مقدار این متغیر به ترتیب به صورتهای ideo/ogg یا video/WebM تغییر مییابد.
دقت کنید که قالبهای ویدئویی رایج شامل موارد WebM ،Ogg و MP۴ هستند.
🔸 عنصر Source
در بخش قبل از عنصر video با تگ self-closing استفاده کردیم؛ اما در این بخش عنصر ویدئو را خودمان میبندیم. بنابراین اکنون یک تگ باز کردن و یک تگ بستن داریم.
همچنین خصوصیتهای type و source را از عنصر ویدئو حذف میکنیم و آن را به عنصر دیگری میچسبانیم.
خصوصیتها را به عنصر source انتقال دادهایم. شاید از خود بپرسید چرا باید چنین کاری بکنیم؟
مطالعه ادامه مطلب 👇👇
🔗 گنجاندن صوت و ویدیو در فایل های HTML — از صفر تا صد — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
✳️ تعاریف و مفاهیم دسترس پذیری در وب — راهنمای جامع
این نخستین مقاله از سری مقالات راهنمای جامع دسترس پذیری است که به بررسی تعاریف و مفاهیم دسترس پذیری میپردازد. این مقاله شامل بررسی گروههایی از افراد است که باید در زمینه دسترسپذیری در نظر داشته باشیم و دلیل این کار را توضیح میدهد. همچنین ابزارهایی که افراد مختلف برای تعامل با وب مورد استفاده قرار میدهند و این که چطور میتوانند دسترسپذیری را بخشی از گردش کار توسعه وب خود بکنند صحبت خواهیم کرد.
══ فهرست مطالب ══
○ دسترس پذیری چیست؟
○ ما به دنبال کدام نوع ناتوانیها هستیم؟
○ پیادهسازی دسترسپذیری در پروژهها
○ راهنماها و قوانین دسترسپذیری
○ API-های دسترسپذیری
○ سخن پایانی
🔸 دسترس پذیری چیست؟
دسترسپذیری به رویه قابل استفاده ساختن وبسایتها برای بیشترین افراد ممکن گفته میشود. ما به طور سنتی وقتی به دسترسپذیری فکر میکنیم، افراد دارای ناتوانیها را در نظر میگیریم، اما رویه دسترسپذیر ساختن سایتها موجب بهرهمندی گروههایی از قبیل افرادی که از دستگاههای موبایل استفاده میکنند یا افرادی که اتصالات اینترنتی کندی دارند نیز میشود.
همچنین دسترسپذیری را میتوان به این معنی در نظر گرفت که با همه افراد به صورت یکسان برخورد کنیم و صرفنظر از تواناییها یا شرایط افراد، فرصتهای برابری برای همه خلق کنیم. دقیقاً همان طور که استثنا کردن یک نفر از ورود فیزیکی به ساختمان صرفاً به این خاطر که ویلچیر استفاده میکند نادرست است، استثنا کردن افراد از ورود به وبسایتها نیز به دلیل نقص بینایی کار درستی محسوب نمیشود. همه ما تفاوتهایی داریم، اما در نهایت همه ما انسان هستیم و از این رو حقوق انسانی یکسانی داریم.
دسترسپذیری کار درستی است که باید انجام دهیم. ارائه دسترسپذیری برای سایتها در برخی کشورها بخشی از قانون محسوب میشود که میتواند بازارهای مهمی را به روی کسبوکارها بگشاید که در غیر این صورت نمیتوانستند از خدمات آنها استفاده کنند یا محصولاتشان را بخرند.
🔸 ما به دنبال کدام نوع ناتوانیها هستیم؟
افراد دارای ناتوانی نیز به اندازه افراد بدون ناتوانی متنوع هستند. فهرست انواع ناتوانیها بسیار طولانی است. نکته کلیدی در این موضوع آن است که اندیشه خود را از رایانه خودتان و شیوهای که از آن استفاده میکنید فراتر ببرید و شروع به یادگیری طرز استفاده دیگران از رایانه بکنید. توجه کنید که شما، همان کاربرانتان نیستید. انواع عمده ناتوانیهایی که باید در نظر داشت در ادامه ارائه شدهاند و ابزارهای خاصی که افراد برای دسترسی به محتوای وب مورد استفاده قرار میدهند نیز معرفی شدهاند. این ابزارها به نام فناوریهای حمایتی یا AT نامیده میشوند.
نکته: گزارش «ناتوانی و سلامت» سازمان سلامت جهانی بیان میکند که بیش از یک میلیارد انسان یعنی حدود ۱۵% از جمعیت زمین، نوعی از ناتوانی را دارند و بین ۱۱۰ تا ۱۹۰ میلیون بزرگسال، ناتوانیهای عمدهای را در کارکردهای جسمی خود شاهد هستند.
افراد دارای نقص بینایی شامل افراد نابینا، بینایی سطح پایین و کوررنگی میشود. افراد زیادی که دارای نقص بینایی هستند، از ابزارهای بزرگنمایی صفحه استفاده میکنند که یا ذرهبین فیزیکی است و یا به صورت قابلیت بزرگنمایی نرمافزاری عمل میکند. امروزه اغلب مرورگرها و سیستمهای عامل قابلیت بزرگنمایی دارند. برخی کاربران از نرمافزارهای قرائت صفحه استفاده میکنند که برای خواندن دیجیتالی متون کاربرد دارد. برخی نرمافزارهای قرائت صفحه شامل موارد زیر هستند:
مطالعه ادامه مطلب 👇👇
🔗 تعاریف و مفاهیم دسترس پذیری در وب — راهنمای جامع — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
این نخستین مقاله از سری مقالات راهنمای جامع دسترس پذیری است که به بررسی تعاریف و مفاهیم دسترس پذیری میپردازد. این مقاله شامل بررسی گروههایی از افراد است که باید در زمینه دسترسپذیری در نظر داشته باشیم و دلیل این کار را توضیح میدهد. همچنین ابزارهایی که افراد مختلف برای تعامل با وب مورد استفاده قرار میدهند و این که چطور میتوانند دسترسپذیری را بخشی از گردش کار توسعه وب خود بکنند صحبت خواهیم کرد.
══ فهرست مطالب ══
○ دسترس پذیری چیست؟
○ ما به دنبال کدام نوع ناتوانیها هستیم؟
○ پیادهسازی دسترسپذیری در پروژهها
○ راهنماها و قوانین دسترسپذیری
○ API-های دسترسپذیری
○ سخن پایانی
🔸 دسترس پذیری چیست؟
دسترسپذیری به رویه قابل استفاده ساختن وبسایتها برای بیشترین افراد ممکن گفته میشود. ما به طور سنتی وقتی به دسترسپذیری فکر میکنیم، افراد دارای ناتوانیها را در نظر میگیریم، اما رویه دسترسپذیر ساختن سایتها موجب بهرهمندی گروههایی از قبیل افرادی که از دستگاههای موبایل استفاده میکنند یا افرادی که اتصالات اینترنتی کندی دارند نیز میشود.
همچنین دسترسپذیری را میتوان به این معنی در نظر گرفت که با همه افراد به صورت یکسان برخورد کنیم و صرفنظر از تواناییها یا شرایط افراد، فرصتهای برابری برای همه خلق کنیم. دقیقاً همان طور که استثنا کردن یک نفر از ورود فیزیکی به ساختمان صرفاً به این خاطر که ویلچیر استفاده میکند نادرست است، استثنا کردن افراد از ورود به وبسایتها نیز به دلیل نقص بینایی کار درستی محسوب نمیشود. همه ما تفاوتهایی داریم، اما در نهایت همه ما انسان هستیم و از این رو حقوق انسانی یکسانی داریم.
دسترسپذیری کار درستی است که باید انجام دهیم. ارائه دسترسپذیری برای سایتها در برخی کشورها بخشی از قانون محسوب میشود که میتواند بازارهای مهمی را به روی کسبوکارها بگشاید که در غیر این صورت نمیتوانستند از خدمات آنها استفاده کنند یا محصولاتشان را بخرند.
🔸 ما به دنبال کدام نوع ناتوانیها هستیم؟
افراد دارای ناتوانی نیز به اندازه افراد بدون ناتوانی متنوع هستند. فهرست انواع ناتوانیها بسیار طولانی است. نکته کلیدی در این موضوع آن است که اندیشه خود را از رایانه خودتان و شیوهای که از آن استفاده میکنید فراتر ببرید و شروع به یادگیری طرز استفاده دیگران از رایانه بکنید. توجه کنید که شما، همان کاربرانتان نیستید. انواع عمده ناتوانیهایی که باید در نظر داشت در ادامه ارائه شدهاند و ابزارهای خاصی که افراد برای دسترسی به محتوای وب مورد استفاده قرار میدهند نیز معرفی شدهاند. این ابزارها به نام فناوریهای حمایتی یا AT نامیده میشوند.
نکته: گزارش «ناتوانی و سلامت» سازمان سلامت جهانی بیان میکند که بیش از یک میلیارد انسان یعنی حدود ۱۵% از جمعیت زمین، نوعی از ناتوانی را دارند و بین ۱۱۰ تا ۱۹۰ میلیون بزرگسال، ناتوانیهای عمدهای را در کارکردهای جسمی خود شاهد هستند.
افراد دارای نقص بینایی شامل افراد نابینا، بینایی سطح پایین و کوررنگی میشود. افراد زیادی که دارای نقص بینایی هستند، از ابزارهای بزرگنمایی صفحه استفاده میکنند که یا ذرهبین فیزیکی است و یا به صورت قابلیت بزرگنمایی نرمافزاری عمل میکند. امروزه اغلب مرورگرها و سیستمهای عامل قابلیت بزرگنمایی دارند. برخی کاربران از نرمافزارهای قرائت صفحه استفاده میکنند که برای خواندن دیجیتالی متون کاربرد دارد. برخی نرمافزارهای قرائت صفحه شامل موارد زیر هستند:
مطالعه ادامه مطلب 👇👇
🔗 تعاریف و مفاهیم دسترس پذیری در وب — راهنمای جامع — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
✳️ تنظیم و راه اندازی SSL روی یک وبسایت — به زبان ساده
از تاریخ جولای ۲۰۱۸ (مرداد ۱۳۹۷) گوگل همه وبسایتهای فاقد SSL را روی مرورگر گوگل کروم «ناامن» اعلام کرده است. اگر وبسایت شما نیز چنین شرایطی دارد و نمیخواهید ترافیک خود را از دست بدهید، بهتر است از SSL استفاده کنید تا کاربران بتوانند با پروتکل HTTPS به آن اتصال یابند.
══ فهرست مطالب ══
○ گام ۱ – دریافت گواهی SSL
○ گام ۲ – نصب گواهی SSL
○ چگونه پروتکل HTTPS را اجباری کنیم؟
○ حفاظت از بازدیدکنندهها به وسیله پروتکل HTTPS کار هوشمندانهای است
🔸 گام ۱ – دریافت گواهی SSL
بر اساس نظر بلاگ توسعهدهندگان گوگل فعالسازی HTTPS روی وبسایت، نه تنها مسئله انسجام دادهها را تضمین میکند، بلکه HTTPS برای بسیاری از ویژگیهای جدید مرورگرها نیز یک الزام به حساب میآید. بدین ترتیب کاربران نیز هنگام بازدید از وبسایت شما امنیت بیشتری را حس میکنند. اینها دلایل مهمی برای نصب گواهی SSL روی وبسایت محسوب میشوند.
اخیراً اگر وبسایت خود را با استفاده از مرورگر کروم باز کرده باشید، احتمالاً پیام بزرگ و زشت «Not Secure» را در ابتدای URL وبسایت مشاهده کردهاید.
مسلماً این پیام برای کسانی که زمان و انرژی زیادی برای توسعه یک وبسایت عالی برای بازدیدکنندگانشان صرف کردهاند، چندان وضعیت مناسبی محسوب نمیشود. پیش از آن که به دنبال خرید SSL بروید، اطمینان حاصل کنید که از وضعیت کنونی وبسایت خود روی شرکت میزبان اطلاعات کامل دارید.
🔸 گام ۲ – نصب گواهی SSL
در اغلب راهنماهای نصب گواهی SSL گفته میشود که به این منظور باید یک IP اختصاصی داشته باشید. این مسئله به معنی خرید یک پلن هاستینگ اختصاصی گرانقیمتتر است. اگر در حال حاضر از چنین پلنی استفاده میکنید، با مراجعه به پنل خود میبینید که یک چنین IP در اختیار دارید.
اگر از یک پلن هاستینگ اشتراکی استفاده میکنید که در آن چندین وبسایت روی یک سرور قرار دارند، در این صورت شما IP اختصاصی برای URL وبسایت خود ندارید. اما این بدان معنی نیست که نمیتوانید گواهی SSL را روی وبسایت خود نصب کنید. به لطف فناوری (Server Name Indicator (SNI شما همچنان میتوانید گواهی SSL را روی وبسایت خود نصب کنید.
اگر از پلن هاستینگ اشتراکی استفاده میکنید از میزبان وب خود بپرسید که آیا از امکان SNI برای رمزنگاری SSL پشتیبانی میکنند یا نه. برای نصب گواهی باید به cPanel بروید و روی SSL/TLS Manager کلیک کنید.
مطالعه ادامه مطلب 👇👇
🔗 تنظیم و راه اندازی SSL روی یک وبسایت — به زبان ساده — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
از تاریخ جولای ۲۰۱۸ (مرداد ۱۳۹۷) گوگل همه وبسایتهای فاقد SSL را روی مرورگر گوگل کروم «ناامن» اعلام کرده است. اگر وبسایت شما نیز چنین شرایطی دارد و نمیخواهید ترافیک خود را از دست بدهید، بهتر است از SSL استفاده کنید تا کاربران بتوانند با پروتکل HTTPS به آن اتصال یابند.
══ فهرست مطالب ══
○ گام ۱ – دریافت گواهی SSL
○ گام ۲ – نصب گواهی SSL
○ چگونه پروتکل HTTPS را اجباری کنیم؟
○ حفاظت از بازدیدکنندهها به وسیله پروتکل HTTPS کار هوشمندانهای است
🔸 گام ۱ – دریافت گواهی SSL
بر اساس نظر بلاگ توسعهدهندگان گوگل فعالسازی HTTPS روی وبسایت، نه تنها مسئله انسجام دادهها را تضمین میکند، بلکه HTTPS برای بسیاری از ویژگیهای جدید مرورگرها نیز یک الزام به حساب میآید. بدین ترتیب کاربران نیز هنگام بازدید از وبسایت شما امنیت بیشتری را حس میکنند. اینها دلایل مهمی برای نصب گواهی SSL روی وبسایت محسوب میشوند.
اخیراً اگر وبسایت خود را با استفاده از مرورگر کروم باز کرده باشید، احتمالاً پیام بزرگ و زشت «Not Secure» را در ابتدای URL وبسایت مشاهده کردهاید.
مسلماً این پیام برای کسانی که زمان و انرژی زیادی برای توسعه یک وبسایت عالی برای بازدیدکنندگانشان صرف کردهاند، چندان وضعیت مناسبی محسوب نمیشود. پیش از آن که به دنبال خرید SSL بروید، اطمینان حاصل کنید که از وضعیت کنونی وبسایت خود روی شرکت میزبان اطلاعات کامل دارید.
🔸 گام ۲ – نصب گواهی SSL
در اغلب راهنماهای نصب گواهی SSL گفته میشود که به این منظور باید یک IP اختصاصی داشته باشید. این مسئله به معنی خرید یک پلن هاستینگ اختصاصی گرانقیمتتر است. اگر در حال حاضر از چنین پلنی استفاده میکنید، با مراجعه به پنل خود میبینید که یک چنین IP در اختیار دارید.
اگر از یک پلن هاستینگ اشتراکی استفاده میکنید که در آن چندین وبسایت روی یک سرور قرار دارند، در این صورت شما IP اختصاصی برای URL وبسایت خود ندارید. اما این بدان معنی نیست که نمیتوانید گواهی SSL را روی وبسایت خود نصب کنید. به لطف فناوری (Server Name Indicator (SNI شما همچنان میتوانید گواهی SSL را روی وبسایت خود نصب کنید.
اگر از پلن هاستینگ اشتراکی استفاده میکنید از میزبان وب خود بپرسید که آیا از امکان SNI برای رمزنگاری SSL پشتیبانی میکنند یا نه. برای نصب گواهی باید به cPanel بروید و روی SSL/TLS Manager کلیک کنید.
مطالعه ادامه مطلب 👇👇
🔗 تنظیم و راه اندازی SSL روی یک وبسایت — به زبان ساده — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
❇️ فیلم آموزش «طراحی وبسایت ریسپانسیو» در ۱۳ دقیقه | به زبان ساده
📌 آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید.
❇️ فیلم آموزش «طراحی وبسایت ریسپانسیو» در ۱۳ دقیقه | به زبان ساده
📌 آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید.
🤩1
✳️ چگونه برنامه نویسی وب را شروع کنم؟
برای بسیاری از افراد این پرسش وجود دارد که چگونه میتوانند برنامهنویس وب شوند و باید برنامه نویسی وب را از کجا شروع کنند؟ در این مطلب از مجله فرادرس، تلاش کردهایم تا پاسخهایی مناسب به سئوالاتی از این دست بدهیم. همچنین، در مطلب «آموزش برنامهنویسی USSD | راهنمای شروع به کار — رایگان و به زبان ساده» نیز نحوه راهاندازی خدمات کد دستوری آموزش داده شده است.
══ فهرست مطالب ══
○ میخواهم برنامهنویس وب شوم، از کجا باید شروع کنم؟
○ HTML — اولین زبان برنامه نویسی وب
○ CSS — زبان مخصوص استایلدهی
○ جاوا اسکریپت — نخستین زبان اسکریپتنویسی تحت وب
○ jQuery — یکی از مهمترین کتابخانههای جاوا اسکریپت
○ لایههای برنامه نویسی وب
○ PHP — پراستفادهترین زبان برنامه نویسی وب در بکاند
○ ASP.Net — زبان برنامهنویسی تحت وب مایکروسافت
○ Django (جنگو) — چارچوب برنامهنویسی تحت وب با استفاده از پایتون
○ JSP — نسخه مخصوص جاوا برای برنامه نویسی وب
○ جمعبندی کلی
🔸 میخواهم برنامهنویس وب شوم، از کجا باید شروع کنم؟
سؤال بالا، سوالی است که اکثر افراد هنگام شروع به یادگیری مباحث برنامه نویسی وب، با آن مواجه میشوند. اما به راستی، اگر بخواهیم برنامه نویسی وب را آغاز کنیم، باید از چه زبانی شروع کنیم؟ چه نکاتی باید رعایت شوند؟ ابتدا نیاز است تا چند مفهوم کاربردی را در زمینه برنامه نویسی وب، بررسی کنیم. در کل ۲ نوع وبسایت داریم، وبسایتهای استاتیک یا ایستا و وبسایتهای داینامیک یا پویا.
وبسایتهای ایستا یا استاتیک، به وبسایتهایی گفته میشود که محتوا ثابت است و به منظور اضافه کردن محتوای جدید، میبایست مجدداً کدنویسی کرد. مثلاً شما یک وبسایت با ۵ صفحه دارید و به منظور اضافه کردن صفحه جدید، باید مجدداً کدنویسی کنید و سایر صفحات را نیز به منظور دسترسی به این صفحه ویرایش کرده و پیوند به این صفحه جدید را ایجاد کنید. به چنین وبسایتهایی، وبسایت ایستا گفته میشود.
وبسایتهای پویا، در مقابل وبسایتهای ایستا قرار دارند و کار با این نوع وبسایتها، به مراتب آسانتر و همینطور بهتر است. در وبسایتهای پویا، شما یک بار کدنویسی هسته را انجام میدهید و سپس به آسانی میتوانید مطالب را منتشر کنید. به طور مثال، اگر با سرویسهای بلاگدهی کار کرده و آشنایی داشته باشید، میتوانید سایتی طراحی کنید که با استفاده از پنل مدیریت، دادهها را دریافت کرده و به صورت پویا در سایت نمایش دهد و در صورت انتشار مطلب و محتوای جدید، احتیاجی به کدنویسی نباشد.
🔸 HTML — اولین زبان برنامه نویسی وب
HTML که سرواژه عبارت Hypertext Markup Language است، یک زبان نشانهگذاری محسوب میشود که به منظور ایجاد ساختار و قالب صفحه وب مورد استفاده قرار میگیرد. به کمک HTML میتوانید مشخص کنید که در صفحه وب خود چند بخش دارید و محتوای هر بخش را مشخص کنید. زبان HTML، جزء لاینفک برنامه نویسی وب است و شما هر سایتی که بخواهید طراحی کنید، به هر زبانی که باشد، باید با استفاده از HTML ساختار اولیه سایت خود را آماده کرده و سپس با استفاده از سایر زبانها، کدنویسی دیگر بخشها را انجام دهید. به طور مثال، میخواهید مشخص کنید که سایت شما ۴ قسمت با عناوین سربرگ، ستون کناری، کادر محتوا و پاصفحه داشته باشد. باید در ابتدای کار با استفاده از HTML این قسمت را ایجاد و تعریف کنید و سپس با استفاده از سایر زبانها، کدنویسیهای سایر بخشها را انجام دهید.
فیلمهای آموزشی مختلفی برای یادگیری HTML در سایت فرادرس موجود است که در این بخش به معرفی تعدادی از آنها در قالب یک مسیر یادگیری HTML پرداخته میشود.
مطالعه ادامه مطلب 👇👇
🔗 چگونه برنامه نویسی وب را شروع کنم؟ — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
برای بسیاری از افراد این پرسش وجود دارد که چگونه میتوانند برنامهنویس وب شوند و باید برنامه نویسی وب را از کجا شروع کنند؟ در این مطلب از مجله فرادرس، تلاش کردهایم تا پاسخهایی مناسب به سئوالاتی از این دست بدهیم. همچنین، در مطلب «آموزش برنامهنویسی USSD | راهنمای شروع به کار — رایگان و به زبان ساده» نیز نحوه راهاندازی خدمات کد دستوری آموزش داده شده است.
══ فهرست مطالب ══
○ میخواهم برنامهنویس وب شوم، از کجا باید شروع کنم؟
○ HTML — اولین زبان برنامه نویسی وب
○ CSS — زبان مخصوص استایلدهی
○ جاوا اسکریپت — نخستین زبان اسکریپتنویسی تحت وب
○ jQuery — یکی از مهمترین کتابخانههای جاوا اسکریپت
○ لایههای برنامه نویسی وب
○ PHP — پراستفادهترین زبان برنامه نویسی وب در بکاند
○ ASP.Net — زبان برنامهنویسی تحت وب مایکروسافت
○ Django (جنگو) — چارچوب برنامهنویسی تحت وب با استفاده از پایتون
○ JSP — نسخه مخصوص جاوا برای برنامه نویسی وب
○ جمعبندی کلی
🔸 میخواهم برنامهنویس وب شوم، از کجا باید شروع کنم؟
سؤال بالا، سوالی است که اکثر افراد هنگام شروع به یادگیری مباحث برنامه نویسی وب، با آن مواجه میشوند. اما به راستی، اگر بخواهیم برنامه نویسی وب را آغاز کنیم، باید از چه زبانی شروع کنیم؟ چه نکاتی باید رعایت شوند؟ ابتدا نیاز است تا چند مفهوم کاربردی را در زمینه برنامه نویسی وب، بررسی کنیم. در کل ۲ نوع وبسایت داریم، وبسایتهای استاتیک یا ایستا و وبسایتهای داینامیک یا پویا.
وبسایتهای ایستا یا استاتیک، به وبسایتهایی گفته میشود که محتوا ثابت است و به منظور اضافه کردن محتوای جدید، میبایست مجدداً کدنویسی کرد. مثلاً شما یک وبسایت با ۵ صفحه دارید و به منظور اضافه کردن صفحه جدید، باید مجدداً کدنویسی کنید و سایر صفحات را نیز به منظور دسترسی به این صفحه ویرایش کرده و پیوند به این صفحه جدید را ایجاد کنید. به چنین وبسایتهایی، وبسایت ایستا گفته میشود.
وبسایتهای پویا، در مقابل وبسایتهای ایستا قرار دارند و کار با این نوع وبسایتها، به مراتب آسانتر و همینطور بهتر است. در وبسایتهای پویا، شما یک بار کدنویسی هسته را انجام میدهید و سپس به آسانی میتوانید مطالب را منتشر کنید. به طور مثال، اگر با سرویسهای بلاگدهی کار کرده و آشنایی داشته باشید، میتوانید سایتی طراحی کنید که با استفاده از پنل مدیریت، دادهها را دریافت کرده و به صورت پویا در سایت نمایش دهد و در صورت انتشار مطلب و محتوای جدید، احتیاجی به کدنویسی نباشد.
🔸 HTML — اولین زبان برنامه نویسی وب
HTML که سرواژه عبارت Hypertext Markup Language است، یک زبان نشانهگذاری محسوب میشود که به منظور ایجاد ساختار و قالب صفحه وب مورد استفاده قرار میگیرد. به کمک HTML میتوانید مشخص کنید که در صفحه وب خود چند بخش دارید و محتوای هر بخش را مشخص کنید. زبان HTML، جزء لاینفک برنامه نویسی وب است و شما هر سایتی که بخواهید طراحی کنید، به هر زبانی که باشد، باید با استفاده از HTML ساختار اولیه سایت خود را آماده کرده و سپس با استفاده از سایر زبانها، کدنویسی دیگر بخشها را انجام دهید. به طور مثال، میخواهید مشخص کنید که سایت شما ۴ قسمت با عناوین سربرگ، ستون کناری، کادر محتوا و پاصفحه داشته باشد. باید در ابتدای کار با استفاده از HTML این قسمت را ایجاد و تعریف کنید و سپس با استفاده از سایر زبانها، کدنویسیهای سایر بخشها را انجام دهید.
فیلمهای آموزشی مختلفی برای یادگیری HTML در سایت فرادرس موجود است که در این بخش به معرفی تعدادی از آنها در قالب یک مسیر یادگیری HTML پرداخته میشود.
مطالعه ادامه مطلب 👇👇
🔗 چگونه برنامه نویسی وب را شروع کنم؟ — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
✳️ ۱۹ قالب برتر راستچین وردپرس
══ فهرست مطالب ══
○ ساخت یک سایت وردپرسی برای زبانهای راستچین
○ ۱. قالب The Core
○ ۲. قالب Aegaeus
○ ۳. قالب The Shutter
○ ۴. قالب Architecto
○ ۵. قالب Philanthropy
○ ۶. قالب Parallax
○ ۷. قالب The Flavour
○ ۸. قالب Avant
○ ۹. قالب The Practice
○ ۱۰. قالب Auril
○ ۱۱. قالب Hestia
○ ۱۲. قالب Agency
○ ۱۳. قالب Writee
○ ۱۴. قالب Fullscreen
○ ۱۵. قالب OceanWP
○ ۱۶. قالب Alder
○ ۱۷. قالب Boron
○ ۱۸. قالب Nectar
○ ۱۹. قالب Responsive Pro
○ بررسی سازگاری قالب وردپرس با زبانهای راستچین
🔸 ساخت یک سایت وردپرسی برای زبانهای راستچین
وردپرس یک پلتفرم فوقالعاده و ایدئال برای ساخت سایت در انواع زبانها (چه راستچین و چه چپچین) است. برای استفاده از همه امکانات وردپرس باید یک نسخه مستقل از وبسایت WordPress.org را تهیه و روی سرور میزبانتان نصب کنید. (برای مشاهده مقایسه WordPress.org (نسخه مستقل وردپرس) و WordPress.com (سرویس وبلاگ نویسی وردپرس) روی لینکهای هریک از آنها کلیک کنید)
برای راهاندازی یک وبسایت «خود میزبان» یا مستقل با WordPress.org به یک نام دامنه و همینطور اشتراک حساب میزبانی WordPress نیاز دارید. بعد از ثبتنام برای میزبانی وب میتوانید برای اطلاع از چگونگی نصب وردپرس به این لینک مراجعه کنید. سپس وقت انتخاب و نصب قالب وردپرسیتان میرسد. برای آشنایی با بهترین قالبهای وردپرس راستچین، در ادامه این مقاله همراه ما باشید.
نتوصیه میکنیم برای ساخت وبسایت، دامنه و فضای هاست را از یک شرکت معتبر و قدرتمند خریداری کنید که در آینده دچار مشکل نشوید.
🔸 ۱. قالب The Core
هسته (Core) یک قالب وردپرس چندمنظوره RTL است که شامل دو قالب آماده با قابلیت نصب آسان (تنها با یک کلیک) است. هردوی این قالبها را میتوان با استفاده از صفحه ساز داخلی و کشیدن و رها کردن (drag and drop) ویرایش کرد. این قالب دارای رنگهای نامحدود، انتخابگر فونت، قالب صفحات، ویجتهای سفارشی و … است. همچنین این قالب با پشتیبانی از فروشگاه ساز ووکامرس (WooCommerce) این امکان را به شما میدهد که بتوانید به وبسایتتان یک فروشگاه آنلاین هم اضافه کنید.
مطالعه ادامه مطلب 👇👇
🔗 ۱۹ قالب برتر راستچین وردپرس — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
══ فهرست مطالب ══
○ ساخت یک سایت وردپرسی برای زبانهای راستچین
○ ۱. قالب The Core
○ ۲. قالب Aegaeus
○ ۳. قالب The Shutter
○ ۴. قالب Architecto
○ ۵. قالب Philanthropy
○ ۶. قالب Parallax
○ ۷. قالب The Flavour
○ ۸. قالب Avant
○ ۹. قالب The Practice
○ ۱۰. قالب Auril
○ ۱۱. قالب Hestia
○ ۱۲. قالب Agency
○ ۱۳. قالب Writee
○ ۱۴. قالب Fullscreen
○ ۱۵. قالب OceanWP
○ ۱۶. قالب Alder
○ ۱۷. قالب Boron
○ ۱۸. قالب Nectar
○ ۱۹. قالب Responsive Pro
○ بررسی سازگاری قالب وردپرس با زبانهای راستچین
🔸 ساخت یک سایت وردپرسی برای زبانهای راستچین
وردپرس یک پلتفرم فوقالعاده و ایدئال برای ساخت سایت در انواع زبانها (چه راستچین و چه چپچین) است. برای استفاده از همه امکانات وردپرس باید یک نسخه مستقل از وبسایت WordPress.org را تهیه و روی سرور میزبانتان نصب کنید. (برای مشاهده مقایسه WordPress.org (نسخه مستقل وردپرس) و WordPress.com (سرویس وبلاگ نویسی وردپرس) روی لینکهای هریک از آنها کلیک کنید)
برای راهاندازی یک وبسایت «خود میزبان» یا مستقل با WordPress.org به یک نام دامنه و همینطور اشتراک حساب میزبانی WordPress نیاز دارید. بعد از ثبتنام برای میزبانی وب میتوانید برای اطلاع از چگونگی نصب وردپرس به این لینک مراجعه کنید. سپس وقت انتخاب و نصب قالب وردپرسیتان میرسد. برای آشنایی با بهترین قالبهای وردپرس راستچین، در ادامه این مقاله همراه ما باشید.
نتوصیه میکنیم برای ساخت وبسایت، دامنه و فضای هاست را از یک شرکت معتبر و قدرتمند خریداری کنید که در آینده دچار مشکل نشوید.
🔸 ۱. قالب The Core
هسته (Core) یک قالب وردپرس چندمنظوره RTL است که شامل دو قالب آماده با قابلیت نصب آسان (تنها با یک کلیک) است. هردوی این قالبها را میتوان با استفاده از صفحه ساز داخلی و کشیدن و رها کردن (drag and drop) ویرایش کرد. این قالب دارای رنگهای نامحدود، انتخابگر فونت، قالب صفحات، ویجتهای سفارشی و … است. همچنین این قالب با پشتیبانی از فروشگاه ساز ووکامرس (WooCommerce) این امکان را به شما میدهد که بتوانید به وبسایتتان یک فروشگاه آنلاین هم اضافه کنید.
مطالعه ادامه مطلب 👇👇
🔗 ۱۹ قالب برتر راستچین وردپرس — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
✳️ فایل XML چیست و چگونه و با چه ابزاری میتوان آن را اجرا کرد؟ (+ دانلود فیلم آموزش گام به گام)
در دنیای رایانهها فایلهایی با پسوند XML. وجود دارند که در این مطلب میخواهیم با آنها آشنا شویم. عبارت XML مخفف «Extensible Markup Language» و به معنای «زبان نشانهگذاری گسترشپذیر» است. XMLها در واقع فایلهایی هستند که از متن خالص تشکیل میشوند و شامل برچسبهای سفارشی (Tag) هستند که ساختار و ویژگیهای اسناد دیگر را مشخص میکنند.
══ فهرست مطالب ══
○ XML چیست؟
○ چگونه یک فایل XML را باز کنیم؟
🔸 XML چیست؟
XML یک زبان نشانهگذاری است که توسط کنسرسیوم شبکهی جهانی وب (W۳C) ساخته شده است تا راهی برای ساخت اسنادی به وجود بیاورد که هم برای انسان و هم برای ماشین قابل فهم باشد. این کار از طریق برچسبهایی انجام میشود که ساختار سند و نحوهی ذخیرهسازی و انتقال آن را مشخص میکنند.
شاید بهتر باشد آن را با زبان نشانهگذاری دیگری مقایسه کنیم که احتمالا به آن آشنا هستید؛ زبان نشانهگذاری فرامتن یا HTML که از ان برای کد گذاری صفحات وب استفاده میشود. HTML از یک سری علامتهای نشانهگذاری از قبل تعریف شده برای مشخص کردن قالب محتوای صفحات وب استفاده میکند. برای مثال، کد زیر از تعدادی تگ برای بولد کردن یا کج کردن برخی حروف استفاده کرده است:
چیزی که XML را از سایر زبانهای نشانهگذاری متمایز میکند، گسترشپذیری آن است. بر خلاف HTML، در XML دستورات از قبل مشخص شدهای وجود ندارند. به جای آن، XML به کاربران خود اجازهی ساخت هرگونه علامت نشانهگذاری برای معرفی محتوای خود را میدهد که باعث به وجود آمدن مجموعهای بینهایت از علائم خودساخته میشود.
🔸 چگونه یک فایل XML را باز کنیم؟
برای باز کردن فایلهای XML راههای متفاوتی وجود دارد. این فایلها را میتوانید با هر ویرایشگر متنی باز کنید، در هر مرورگری مشاهده نمایید یا حتی در وبسایتهای مخصوصی آنها را مشاهده، ویرایش یا حتی به سایر فرمتها تبدیل کنید.
از آنجایی که فایلهای XML تنها متن هستند، میتوانید به سادگی از هر ویرایشگر متنی برای مدیریت آنها استفاده کنید. مسالهای که وجود دارد تعداد زیاد ویرایشگرهای متن است که برای کار با ساختار XML طراحی نشدهاند. شاید نرمافزاری نظیر «Notepad» برای باز کردن و بررسی کلی یک فایل XML مناسب باشد، ولی قطعا نرمافزارهای بهتری هم برای این کار وجود دارند.
بر روی فایل XML راست کلیک کرده و از قسمت «Open With» نرمفزار «Notepad» را انتخاب نمایید.
مطالعه ادامه مطلب 👇👇
🔗 فایل XML چیست و چگونه و با چه ابزاری میتوان آن را اجرا کرد؟ (+ دانلود فیلم آموزش گام به گام) — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
در دنیای رایانهها فایلهایی با پسوند XML. وجود دارند که در این مطلب میخواهیم با آنها آشنا شویم. عبارت XML مخفف «Extensible Markup Language» و به معنای «زبان نشانهگذاری گسترشپذیر» است. XMLها در واقع فایلهایی هستند که از متن خالص تشکیل میشوند و شامل برچسبهای سفارشی (Tag) هستند که ساختار و ویژگیهای اسناد دیگر را مشخص میکنند.
══ فهرست مطالب ══
○ XML چیست؟
○ چگونه یک فایل XML را باز کنیم؟
🔸 XML چیست؟
XML یک زبان نشانهگذاری است که توسط کنسرسیوم شبکهی جهانی وب (W۳C) ساخته شده است تا راهی برای ساخت اسنادی به وجود بیاورد که هم برای انسان و هم برای ماشین قابل فهم باشد. این کار از طریق برچسبهایی انجام میشود که ساختار سند و نحوهی ذخیرهسازی و انتقال آن را مشخص میکنند.
شاید بهتر باشد آن را با زبان نشانهگذاری دیگری مقایسه کنیم که احتمالا به آن آشنا هستید؛ زبان نشانهگذاری فرامتن یا HTML که از ان برای کد گذاری صفحات وب استفاده میشود. HTML از یک سری علامتهای نشانهگذاری از قبل تعریف شده برای مشخص کردن قالب محتوای صفحات وب استفاده میکند. برای مثال، کد زیر از تعدادی تگ برای بولد کردن یا کج کردن برخی حروف استفاده کرده است:
چیزی که XML را از سایر زبانهای نشانهگذاری متمایز میکند، گسترشپذیری آن است. بر خلاف HTML، در XML دستورات از قبل مشخص شدهای وجود ندارند. به جای آن، XML به کاربران خود اجازهی ساخت هرگونه علامت نشانهگذاری برای معرفی محتوای خود را میدهد که باعث به وجود آمدن مجموعهای بینهایت از علائم خودساخته میشود.
🔸 چگونه یک فایل XML را باز کنیم؟
برای باز کردن فایلهای XML راههای متفاوتی وجود دارد. این فایلها را میتوانید با هر ویرایشگر متنی باز کنید، در هر مرورگری مشاهده نمایید یا حتی در وبسایتهای مخصوصی آنها را مشاهده، ویرایش یا حتی به سایر فرمتها تبدیل کنید.
از آنجایی که فایلهای XML تنها متن هستند، میتوانید به سادگی از هر ویرایشگر متنی برای مدیریت آنها استفاده کنید. مسالهای که وجود دارد تعداد زیاد ویرایشگرهای متن است که برای کار با ساختار XML طراحی نشدهاند. شاید نرمافزاری نظیر «Notepad» برای باز کردن و بررسی کلی یک فایل XML مناسب باشد، ولی قطعا نرمافزارهای بهتری هم برای این کار وجود دارند.
بر روی فایل XML راست کلیک کرده و از قسمت «Open With» نرمفزار «Notepad» را انتخاب نمایید.
مطالعه ادامه مطلب 👇👇
🔗 فایل XML چیست و چگونه و با چه ابزاری میتوان آن را اجرا کرد؟ (+ دانلود فیلم آموزش گام به گام) — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
✳️ ساخت سایت با وردپرس رایگان | کاملترین راهنمایی که باید بخوانید
وردپرس قویترین پلتفرم بلاگنویسی جهان است. تقریباً یک مورد از هر سه وبسایت در سراسر دنیا از وردپرس استفاده میکند. وردپرس محتوای یک سایت را از کد بکاند آن جدا میکند. این بدان معنی است که هر فردی میتواند یک وبسایت یا امکانات کامل را بدون داشتن تجربه برنامهنویسی وب اجرا کند. امکان استفاده از هاستهای مدیریتشده وردپرس وجود دارد، اما اگر تمایل دارید با موارد فنی راهاندازی سایت وردپرسی آشنا شوید، در این راهنما جامع با ما همراه باشید تا با مراحل ساخت سایت با وردپرس رایگان آشنا شوید.
══ فهرست مطالب ══
○ ساخت سایت با وردپرس رایگان
○ چرا باید از وردپرس استفاده کرد؟
○ تفاوت بین WordPress.org و WordPress.com
○ ملاحظاتی در خصوص دامنه سایت
○ گزینههای میزبانی وردپرس مستقل
○ توصیههایی در خصوص هاستینگ وردپرس
○ چطور وردپرس را نصب کنیم؟
○ مفاهیم کلیدی وردپرس
○ اساسیترین گامهای ابتدایی برای ساخت سایت وردپرس رایگان
○ آپلود کردن تصویر روی وردپرس
○ قرار دادن ویدئوهای یوتیوب در سایت
○ ویجتهای وردپرس
○ بهینهسازی موتور جستجو در وردپرس
○ گالری و مدیریت عکس
○ پشتیبانگیری و بازیابی وردپرس
○ بهینهسازی و مقیاسبندی سایت برای ترافیک بالا
○ سخن پایانی
🔸 ساخت سایت با وردپرس رایگان
وردپرس با استفاده از جداسازی محتوای صفحههای وب از لیآوت و چیدمان آنها موفق شده فایلهای HTML را هر بار که کسی از سایت بازدید میکند به طور دینامیک بازتولید کند. همچنین وردپرس وظیفه لینک کردن خودکار پستها به همدیگر را بر عهده دارد و به این ترتیب سایدبارهایی ایجاد میکند که شامل پیوندهایی به جدیدترین نوشتههای شما و قابلیت مدیریت آرشیو مطالب هستند. در واقع با توجه به این که وردپرس امکان استفاده از پوستههای HTML مختلف را دارد، شما نیاز به نوشتن حتی یک خط کد HTML نخواهید داشت و تنها دغدغهتان معطوف به نوشتن محتوای متنی سایت و آپلود کردن تصاویر وبسایت خواهد بود. این جداسازی قالب و محتوا فرصتهای بیشماری پیش روی شما قرار میدهد..
🔸 چرا باید از وردپرس استفاده کرد؟
با این که وردپرس به طور عمده برای ایجاد سایتهای شبیه بلاگ استفاده میشود که از نظر فنی صرفاً یک سری نوشتهها با تاریخ و زمان خاص است، اما امکان تطبیق آسان آن با وبسایتهای استاتیک از قبیل کسبوکارهای لوکال، پورتفولیوهای هنرمندان یا حتی سایتهای کامل فروشگاه آنلاین نیز وجود دارد. زمانی که تصمیم میگیرید از وردپرس استفاده کنید، متوجه خواهید شد که یک پلاگین وردپرس برای ایجاد تقریباً هر نوع وبسایت که بتوان تصور کرد ساخته شده است. وردپرس تنها «سیستم مدیریت محتوا» (CMS) موجود نیست، از این رو شاید از خود بپرسید که چرا باید وردپرس را انتخاب کنیم؟
– وردپرس امکانات بسیار زیادی دارد و از این رو شما با نصب آن میتوانید هر کاری که دوست دارید انجام دهید. اگر به یک قابلیت خاص نیاز دارید که وجود ندارد، به احتمال بالا قبلاً افزونهای برای آن توسعه یافته است که این مسئله را مدیریت میکند. بزرگترین مزیت وردپرس این است که برای هیچ چیزی نیاز به کدنویسی وجود ندارد.
– وردپرس یک کامیونیتی بالغ است. وردپرس در سال ۲۰۰۳ ساخته شده است و در طی همه این سالها به طور فعالانهای توسعه یافته است. از این رو زمانی که از وردپرس استفاده میکنید انتظار مشاهده هیچ نوع باگ ریز یا درشتی را ندارید.
– وردپرس امن است. وردپرس نیز همانند هر نوع نرمافزار یا سیستم عامل چند مورد هک بزرگ را در طی این سالها تجربه کرده است، اما توسعهدهندگان این حفرههای امنیتی را به سرعت پر کردهاند. جدیدترین نسخههای وردپرس همواره شما را در مورد انتشار نسخه جدید این CMS آگاه میسازند و تا زمانی که مرتب به سایت خود سر بزنید و در موارد نیاز آن را آپدیت کنید، احتمال کمی وجود خواهد داشت که سایتتان هک شود.
– نصب وردپرس کاملاً آسان است.
– هزاران افزونه وجود دارند که کارکردهای مختلفی را تأمین میکنند.
– مدیریت تصویر و مدیا به طور آماده و سرراستی برای ساخت پورتفولیو و سایتهای مبتنی بر عکس ارائه شده است.
مطالعه ادامه مطلب 👇👇
🔗 ساخت سایت با وردپرس رایگان | کاملترین راهنمایی که باید بخوانید — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
وردپرس قویترین پلتفرم بلاگنویسی جهان است. تقریباً یک مورد از هر سه وبسایت در سراسر دنیا از وردپرس استفاده میکند. وردپرس محتوای یک سایت را از کد بکاند آن جدا میکند. این بدان معنی است که هر فردی میتواند یک وبسایت یا امکانات کامل را بدون داشتن تجربه برنامهنویسی وب اجرا کند. امکان استفاده از هاستهای مدیریتشده وردپرس وجود دارد، اما اگر تمایل دارید با موارد فنی راهاندازی سایت وردپرسی آشنا شوید، در این راهنما جامع با ما همراه باشید تا با مراحل ساخت سایت با وردپرس رایگان آشنا شوید.
══ فهرست مطالب ══
○ ساخت سایت با وردپرس رایگان
○ چرا باید از وردپرس استفاده کرد؟
○ تفاوت بین WordPress.org و WordPress.com
○ ملاحظاتی در خصوص دامنه سایت
○ گزینههای میزبانی وردپرس مستقل
○ توصیههایی در خصوص هاستینگ وردپرس
○ چطور وردپرس را نصب کنیم؟
○ مفاهیم کلیدی وردپرس
○ اساسیترین گامهای ابتدایی برای ساخت سایت وردپرس رایگان
○ آپلود کردن تصویر روی وردپرس
○ قرار دادن ویدئوهای یوتیوب در سایت
○ ویجتهای وردپرس
○ بهینهسازی موتور جستجو در وردپرس
○ گالری و مدیریت عکس
○ پشتیبانگیری و بازیابی وردپرس
○ بهینهسازی و مقیاسبندی سایت برای ترافیک بالا
○ سخن پایانی
🔸 ساخت سایت با وردپرس رایگان
وردپرس با استفاده از جداسازی محتوای صفحههای وب از لیآوت و چیدمان آنها موفق شده فایلهای HTML را هر بار که کسی از سایت بازدید میکند به طور دینامیک بازتولید کند. همچنین وردپرس وظیفه لینک کردن خودکار پستها به همدیگر را بر عهده دارد و به این ترتیب سایدبارهایی ایجاد میکند که شامل پیوندهایی به جدیدترین نوشتههای شما و قابلیت مدیریت آرشیو مطالب هستند. در واقع با توجه به این که وردپرس امکان استفاده از پوستههای HTML مختلف را دارد، شما نیاز به نوشتن حتی یک خط کد HTML نخواهید داشت و تنها دغدغهتان معطوف به نوشتن محتوای متنی سایت و آپلود کردن تصاویر وبسایت خواهد بود. این جداسازی قالب و محتوا فرصتهای بیشماری پیش روی شما قرار میدهد..
🔸 چرا باید از وردپرس استفاده کرد؟
با این که وردپرس به طور عمده برای ایجاد سایتهای شبیه بلاگ استفاده میشود که از نظر فنی صرفاً یک سری نوشتهها با تاریخ و زمان خاص است، اما امکان تطبیق آسان آن با وبسایتهای استاتیک از قبیل کسبوکارهای لوکال، پورتفولیوهای هنرمندان یا حتی سایتهای کامل فروشگاه آنلاین نیز وجود دارد. زمانی که تصمیم میگیرید از وردپرس استفاده کنید، متوجه خواهید شد که یک پلاگین وردپرس برای ایجاد تقریباً هر نوع وبسایت که بتوان تصور کرد ساخته شده است. وردپرس تنها «سیستم مدیریت محتوا» (CMS) موجود نیست، از این رو شاید از خود بپرسید که چرا باید وردپرس را انتخاب کنیم؟
– وردپرس امکانات بسیار زیادی دارد و از این رو شما با نصب آن میتوانید هر کاری که دوست دارید انجام دهید. اگر به یک قابلیت خاص نیاز دارید که وجود ندارد، به احتمال بالا قبلاً افزونهای برای آن توسعه یافته است که این مسئله را مدیریت میکند. بزرگترین مزیت وردپرس این است که برای هیچ چیزی نیاز به کدنویسی وجود ندارد.
– وردپرس یک کامیونیتی بالغ است. وردپرس در سال ۲۰۰۳ ساخته شده است و در طی همه این سالها به طور فعالانهای توسعه یافته است. از این رو زمانی که از وردپرس استفاده میکنید انتظار مشاهده هیچ نوع باگ ریز یا درشتی را ندارید.
– وردپرس امن است. وردپرس نیز همانند هر نوع نرمافزار یا سیستم عامل چند مورد هک بزرگ را در طی این سالها تجربه کرده است، اما توسعهدهندگان این حفرههای امنیتی را به سرعت پر کردهاند. جدیدترین نسخههای وردپرس همواره شما را در مورد انتشار نسخه جدید این CMS آگاه میسازند و تا زمانی که مرتب به سایت خود سر بزنید و در موارد نیاز آن را آپدیت کنید، احتمال کمی وجود خواهد داشت که سایتتان هک شود.
– نصب وردپرس کاملاً آسان است.
– هزاران افزونه وجود دارند که کارکردهای مختلفی را تأمین میکنند.
– مدیریت تصویر و مدیا به طور آماده و سرراستی برای ساخت پورتفولیو و سایتهای مبتنی بر عکس ارائه شده است.
مطالعه ادامه مطلب 👇👇
🔗 ساخت سایت با وردپرس رایگان | کاملترین راهنمایی که باید بخوانید — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس