✳️ برنامه نویسی وب با پایتون — راهنمای کاربردی
در این مطلب، با ابزارهای لازم برای برنامه نویسی وب در پایتون آشنا خواهید شد. در مرحله اول، مهم‌ترین ابزارها، «واسط‌های برنامه‌نویسی کاربردی» (Application Programming Interface | API) و «کتابخانه‌ها» (Libraries) جهت برنامه‌نویسی وب معرفی خواهند شد. در مرحله بعد، برای نمایش چگونگی توسعه برنامه‌های کاربردی تحت وب، یک مثال کاربردی از برنامه نویسی وب با پایتون نمایش داده خواهد شد.
══ فهرست مطالب ══
○ پلتفرم توسعه تحت وب چیست؟
○ دلایل استفاده از پلتفرم‌های توسعه تحت وب
○ پلتفرم‌های مناسب برنامه نویسی وب با پایتون
○ نکاتی در مورد برنامه نویسی وب با پایتون
○ توسعه برنامه کاربردی تحت وب با پلتفرم Flask و Google App Engine
🔸 پلتفرم توسعه تحت وب چیست؟
پیش از معرفی ابزارهای و کتابخانه‌های توسعه داده شده جهت برنامه نویسی وب با پایتون، مفهوم پلتفرم توسعه تحت وب شرح داده خواهد شد. به پلتفرم‌های توسعه نرم‌افزاری که از مجموعه‌ای از ماژول‌ها و بسته‌های برنامه‌نویسی تحت وب تشکیل شده‌اند، پلتفرم‌های توسعه تحت وب گفته می‌شود. پلتفرم‌های توسعه تحت وب در پایتون، امکان برنامه نویسی وب با پایتون و توسعه برنامه‌کاربردی تحت وب را در این زبان برنامه‌نویسی محبوب فراهم می‌آورند.
پلتفرم‌های توسعه تحت وب، تمامی ارتباطات سطح پایین میان لایه برنامه کاربردی با لایه‌های سطوح پایین‌تر را از دید کاربر مخفی کنند و از این طریق، شرایط را برای توسعه موفق برنامه‌های کاربردی تحت وب و استفاده کاربران از امکانات آن‌ها فراهم می‌کنند. نکته شایان توجه در مورد پلتفرم‌های توسعه تحت وب این است که سطح مخفی شدن جزئیات سطح پایین از دید کاربران، بسته به پلتفرم‌های توسعه تحت وب مختلف، متفاوت است.
🔸 دلایل استفاده از پلتفرم‌های توسعه تحت وب
همیشه این امکان برای برنامه‌نویسان و توسعه دهندگان وب وجود دارد که برای توسعه برنامه کاربردی تحت وب خود در پایتون، از صفر تا صد در زبان برنامه‌نویسی پایتون کد نویسی انجام دهند. ولی دلایل مختلفی برای عدم اتخاذ چنین رویکردی وجود دارد. در ادامه، پنج دلیل مهم برای استفاده از پلتفرم‌های توسعه تحت وب جهت برنامه نویسی وب با پایتون ارائه شده است.
در حال حاضر، از پلتفرم‌های محبوب برنامه نویسی وب با پایتون نظیر Pyramid و Django، در شرکت‌های بزرگی نظیر Bitbucket ،Pinterest ،Instagram و Dropbox جهت توسعه برنامه‌های کاربردی تحت وب استفاده می‌شود. بنابراین، به‌راحتی می‌توان نتیجه گرفت که این پلتفرم‌ها توانایی مدیریت و اجرای تمامی فرایندهای توسعه برنامه‌های کاربردی تحت وب را دارند.
همانطور که پیش از این نیز اشاره شد، یکی از ویژگی‌های مهم پلتفرم‌های توسعه تحت وب، مخفی کردن جزئیات سطح پایین از دید کاربران است. چنین کاری به برنامه‌نویسان و توسعه‌دهندگان اجازه می‌دهد تا هنگام برنامه نویسی وب با پایتون، بدون درگیر شدن با جزئیات سطح پایین، به توسعه برنامه‌های کاربردی تحت وب مبادرت ورزند.
مطالعه ادامه مطلب 👇👇
🔗 برنامه نویسی وب با پایتون — راهنمای کاربردی — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزش‌های طراحی و توسعه وب فرادرس
در این مطلب، با ابزارهای لازم برای برنامه نویسی وب در پایتون آشنا خواهید شد. در مرحله اول، مهم‌ترین ابزارها، «واسط‌های برنامه‌نویسی کاربردی» (Application Programming Interface | API) و «کتابخانه‌ها» (Libraries) جهت برنامه‌نویسی وب معرفی خواهند شد. در مرحله بعد، برای نمایش چگونگی توسعه برنامه‌های کاربردی تحت وب، یک مثال کاربردی از برنامه نویسی وب با پایتون نمایش داده خواهد شد.
══ فهرست مطالب ══
○ پلتفرم توسعه تحت وب چیست؟
○ دلایل استفاده از پلتفرم‌های توسعه تحت وب
○ پلتفرم‌های مناسب برنامه نویسی وب با پایتون
○ نکاتی در مورد برنامه نویسی وب با پایتون
○ توسعه برنامه کاربردی تحت وب با پلتفرم Flask و Google App Engine
🔸 پلتفرم توسعه تحت وب چیست؟
پیش از معرفی ابزارهای و کتابخانه‌های توسعه داده شده جهت برنامه نویسی وب با پایتون، مفهوم پلتفرم توسعه تحت وب شرح داده خواهد شد. به پلتفرم‌های توسعه نرم‌افزاری که از مجموعه‌ای از ماژول‌ها و بسته‌های برنامه‌نویسی تحت وب تشکیل شده‌اند، پلتفرم‌های توسعه تحت وب گفته می‌شود. پلتفرم‌های توسعه تحت وب در پایتون، امکان برنامه نویسی وب با پایتون و توسعه برنامه‌کاربردی تحت وب را در این زبان برنامه‌نویسی محبوب فراهم می‌آورند.
پلتفرم‌های توسعه تحت وب، تمامی ارتباطات سطح پایین میان لایه برنامه کاربردی با لایه‌های سطوح پایین‌تر را از دید کاربر مخفی کنند و از این طریق، شرایط را برای توسعه موفق برنامه‌های کاربردی تحت وب و استفاده کاربران از امکانات آن‌ها فراهم می‌کنند. نکته شایان توجه در مورد پلتفرم‌های توسعه تحت وب این است که سطح مخفی شدن جزئیات سطح پایین از دید کاربران، بسته به پلتفرم‌های توسعه تحت وب مختلف، متفاوت است.
🔸 دلایل استفاده از پلتفرم‌های توسعه تحت وب
همیشه این امکان برای برنامه‌نویسان و توسعه دهندگان وب وجود دارد که برای توسعه برنامه کاربردی تحت وب خود در پایتون، از صفر تا صد در زبان برنامه‌نویسی پایتون کد نویسی انجام دهند. ولی دلایل مختلفی برای عدم اتخاذ چنین رویکردی وجود دارد. در ادامه، پنج دلیل مهم برای استفاده از پلتفرم‌های توسعه تحت وب جهت برنامه نویسی وب با پایتون ارائه شده است.
در حال حاضر، از پلتفرم‌های محبوب برنامه نویسی وب با پایتون نظیر Pyramid و Django، در شرکت‌های بزرگی نظیر Bitbucket ،Pinterest ،Instagram و Dropbox جهت توسعه برنامه‌های کاربردی تحت وب استفاده می‌شود. بنابراین، به‌راحتی می‌توان نتیجه گرفت که این پلتفرم‌ها توانایی مدیریت و اجرای تمامی فرایندهای توسعه برنامه‌های کاربردی تحت وب را دارند.
همانطور که پیش از این نیز اشاره شد، یکی از ویژگی‌های مهم پلتفرم‌های توسعه تحت وب، مخفی کردن جزئیات سطح پایین از دید کاربران است. چنین کاری به برنامه‌نویسان و توسعه‌دهندگان اجازه می‌دهد تا هنگام برنامه نویسی وب با پایتون، بدون درگیر شدن با جزئیات سطح پایین، به توسعه برنامه‌های کاربردی تحت وب مبادرت ورزند.
مطالعه ادامه مطلب 👇👇
🔗 برنامه نویسی وب با پایتون — راهنمای کاربردی — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزش‌های طراحی و توسعه وب فرادرس
✳️ چگونه قالب وردپرس را ویرایش کنیم ؟ | کاربردی و به زبان ساده
اگر از یک قالب وردپرس استفاده می‌کنید که فکر می‌کنید چندان مناسب نیست، جای نگرانی وجود ندارد، چون گزینه‌های زیادی وجود دارند که با استفاده از آن‌ها می‌توانید قالب وردپرس را ادیت کنید. در این مطلب با روش ویرایش قالب یا پوسته وردپرس آشنا می‌شویم تا بتوانید آن را طوری ادیت کنید که با نیازها و خواسته‌های شما مطابقت پیدا کند. اگر به دنبال پاسخ این سؤال هستید که چگونه قالب وردپرس را ویرایش کنیم تا انتهای این مطلب با ما همراه باشید.
══ فهرست مطالب ══
○ چگونه قالب وردپرس را ویرایش کنیم ؟
○ آیا واقعاً به ویرایش قالب وردپرس نیاز داریم؟
○ سفارشی‌سازی قالب وردپرس با استفاده از قابلیت‌های بخش مدیریت وردپرس
○ ویرایش قالب وردپرس با ابزارهای صفحه‌ساز و فریمورکها
○ ویرایش کد قالب وردپرس
○ بهترین رویه‌های ویرایش قالب وردپرس
○ راهنمای عملی ویرایش قالب وردپرس
○ استفاده از تگ‌های شرطی در قالب‌های پیش‌فرض
○ ساخت فایل‌های برگه خاص در سلسله مراتب وردپرس
○ انتساب تمپلیت‌های صفحه سفارشی
○ راهنمای گام به گام ساخت قالب‌های برگه سفارشی وردپرس
○ پنج روش متفاوت برای استفاده تمپلیت‌های برگه
○ سخن پایانی
🔸 چگونه قالب وردپرس را ویرایش کنیم ؟
پیش از آن که وارد بحث ایجاد تغییر در قالب وردپرس شویم، بهتر است با همه گزینه‌هایی که به این منظور در اختیار داریم، آشنا شویم، چون هر یک از این ابزارها برای منظور متفاوتی مناسب هستند. در فهرست زیر گزینه‌های موجود برای ویرایش یک قالب وردپرس را جمع‌بندی کرده‌ایم.
– اگر می‌خواهید یک کارکرد را به قالب خود اضافه کنید، باید یک افزونه یا پلاگین نصب کنید.
– برای سفارشی‌سازی فونت، رنگ و حتی احتمالاً لی‌آوت صفحات بسته به این که از چه قالبی استفاده می‌کنید، می‌توانید از ابزار سفارشی‌سازی قالب که در داشبورد مدیریت وردپرس وجود دارد بهره بگیرید.
– اگر از یک قالب مجهز به «صفحه‌ساز» (page builder) استفاده می‌کنید، می‌توانید از قابلیت‌های آن برای سفارشی‌سازی طراحی سایت خود بهره بگیرید.
– اگر یک قالب فریمورکی روی وردپرس نصب کرده‌اید، می‌توانید از «قالب‌های فرزند» (child themes) آن برای سفارشی‌سازی سایت استفاده کنید و به همراه آن از هر نوع گزینه‌های سفارشی‌سازی که در داشبورد مدیریت سایت وجود دارد نیز بهره بگیرید.
– اگر قالب شما به طور اختصاصی برای سایت‌تان طراحی شده است و امکان ادیت کد آن را دارید، می‌توانید مستقیماً اقدام به ویرایش کد قالب بکنید.
– اگر می‌خواهید کد یک قالب شخص ثالث را ویرایش کنید، باید یک «قالب فرزند» ایجاد کنید.
اکنون که با همه گزینه‌های ویرایش قالب وردپرس آشنا شدید، اگر می‌خواهید کد قالب را ادیت کنید، چند گزینه مختلف از جمله «ویرایشگر بلوکی» (Block Editor)، «ابزار سفارشی‌سازی» (Customizer) و همچنین ویرایش مستقیم فایل‌های قالب وجود دارد. در ادامه این راهنما با همه این روش‌ها آشنا خواهیم شد، اما کار را با ساده‌ترین گزینه یعنی نصب پلاگین آغاز می‌کنیم.
🔸 آیا واقعاً به ویرایش قالب وردپرس نیاز داریم؟
گاهی اوقات ما واقعاً نیازی به ویرایش قالب سایت وردپرسی خود نداریم و کافی است یک پلاگین را نصب کنیم تا به کارکرد مورد نظرمان دسترسی داشته باشیم. قالب‌ها، طراحی سایت را تعیین می‌کنند و شیوه نمایش خود سایت و محتوای آن به وسیله قالب‌ها کنترل می‌شود. پلاگین‌ها کارکردهای اضافی را به سایت می‌بخشند.
اگر تغییرهایی که می‌خواهید روی سایت ایجاد کنید، بیشتر معطوف به کارکرد هستند تا طراحی، باید اقدام به نصب پلاگین بکنید. این پلاگین را می‌توانید خودتان بنویسید، از یک دایرکتوری پلاگین دانلود کنید و یا خریداری نمایید.
اگر بخواهید فایل functions.php مربوط به قالب را ویرایش کنید، باید ابتدا از خود بپرسید که آیا در صورت تغییر دادن قالب در آینده همچنان به این کارکرد نیاز خواهم داشت؟ اگر پاسخ این سؤال مثبت است، این کد باید به صورت یک پلاگین باشد و نباید درون قالب قرار گیرد.
مطالعه ادامه مطلب 👇👇
🔗 چگونه قالب وردپرس را ویرایش کنیم ؟ | کاربردی و به زبان ساده — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزش‌های طراحی و توسعه وب فرادرس
اگر از یک قالب وردپرس استفاده می‌کنید که فکر می‌کنید چندان مناسب نیست، جای نگرانی وجود ندارد، چون گزینه‌های زیادی وجود دارند که با استفاده از آن‌ها می‌توانید قالب وردپرس را ادیت کنید. در این مطلب با روش ویرایش قالب یا پوسته وردپرس آشنا می‌شویم تا بتوانید آن را طوری ادیت کنید که با نیازها و خواسته‌های شما مطابقت پیدا کند. اگر به دنبال پاسخ این سؤال هستید که چگونه قالب وردپرس را ویرایش کنیم تا انتهای این مطلب با ما همراه باشید.
══ فهرست مطالب ══
○ چگونه قالب وردپرس را ویرایش کنیم ؟
○ آیا واقعاً به ویرایش قالب وردپرس نیاز داریم؟
○ سفارشی‌سازی قالب وردپرس با استفاده از قابلیت‌های بخش مدیریت وردپرس
○ ویرایش قالب وردپرس با ابزارهای صفحه‌ساز و فریمورکها
○ ویرایش کد قالب وردپرس
○ بهترین رویه‌های ویرایش قالب وردپرس
○ راهنمای عملی ویرایش قالب وردپرس
○ استفاده از تگ‌های شرطی در قالب‌های پیش‌فرض
○ ساخت فایل‌های برگه خاص در سلسله مراتب وردپرس
○ انتساب تمپلیت‌های صفحه سفارشی
○ راهنمای گام به گام ساخت قالب‌های برگه سفارشی وردپرس
○ پنج روش متفاوت برای استفاده تمپلیت‌های برگه
○ سخن پایانی
🔸 چگونه قالب وردپرس را ویرایش کنیم ؟
پیش از آن که وارد بحث ایجاد تغییر در قالب وردپرس شویم، بهتر است با همه گزینه‌هایی که به این منظور در اختیار داریم، آشنا شویم، چون هر یک از این ابزارها برای منظور متفاوتی مناسب هستند. در فهرست زیر گزینه‌های موجود برای ویرایش یک قالب وردپرس را جمع‌بندی کرده‌ایم.
– اگر می‌خواهید یک کارکرد را به قالب خود اضافه کنید، باید یک افزونه یا پلاگین نصب کنید.
– برای سفارشی‌سازی فونت، رنگ و حتی احتمالاً لی‌آوت صفحات بسته به این که از چه قالبی استفاده می‌کنید، می‌توانید از ابزار سفارشی‌سازی قالب که در داشبورد مدیریت وردپرس وجود دارد بهره بگیرید.
– اگر از یک قالب مجهز به «صفحه‌ساز» (page builder) استفاده می‌کنید، می‌توانید از قابلیت‌های آن برای سفارشی‌سازی طراحی سایت خود بهره بگیرید.
– اگر یک قالب فریمورکی روی وردپرس نصب کرده‌اید، می‌توانید از «قالب‌های فرزند» (child themes) آن برای سفارشی‌سازی سایت استفاده کنید و به همراه آن از هر نوع گزینه‌های سفارشی‌سازی که در داشبورد مدیریت سایت وجود دارد نیز بهره بگیرید.
– اگر قالب شما به طور اختصاصی برای سایت‌تان طراحی شده است و امکان ادیت کد آن را دارید، می‌توانید مستقیماً اقدام به ویرایش کد قالب بکنید.
– اگر می‌خواهید کد یک قالب شخص ثالث را ویرایش کنید، باید یک «قالب فرزند» ایجاد کنید.
اکنون که با همه گزینه‌های ویرایش قالب وردپرس آشنا شدید، اگر می‌خواهید کد قالب را ادیت کنید، چند گزینه مختلف از جمله «ویرایشگر بلوکی» (Block Editor)، «ابزار سفارشی‌سازی» (Customizer) و همچنین ویرایش مستقیم فایل‌های قالب وجود دارد. در ادامه این راهنما با همه این روش‌ها آشنا خواهیم شد، اما کار را با ساده‌ترین گزینه یعنی نصب پلاگین آغاز می‌کنیم.
🔸 آیا واقعاً به ویرایش قالب وردپرس نیاز داریم؟
گاهی اوقات ما واقعاً نیازی به ویرایش قالب سایت وردپرسی خود نداریم و کافی است یک پلاگین را نصب کنیم تا به کارکرد مورد نظرمان دسترسی داشته باشیم. قالب‌ها، طراحی سایت را تعیین می‌کنند و شیوه نمایش خود سایت و محتوای آن به وسیله قالب‌ها کنترل می‌شود. پلاگین‌ها کارکردهای اضافی را به سایت می‌بخشند.
اگر تغییرهایی که می‌خواهید روی سایت ایجاد کنید، بیشتر معطوف به کارکرد هستند تا طراحی، باید اقدام به نصب پلاگین بکنید. این پلاگین را می‌توانید خودتان بنویسید، از یک دایرکتوری پلاگین دانلود کنید و یا خریداری نمایید.
اگر بخواهید فایل functions.php مربوط به قالب را ویرایش کنید، باید ابتدا از خود بپرسید که آیا در صورت تغییر دادن قالب در آینده همچنان به این کارکرد نیاز خواهم داشت؟ اگر پاسخ این سؤال مثبت است، این کد باید به صورت یک پلاگین باشد و نباید درون قالب قرار گیرد.
مطالعه ادامه مطلب 👇👇
🔗 چگونه قالب وردپرس را ویرایش کنیم ؟ | کاربردی و به زبان ساده — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزش‌های طراحی و توسعه وب فرادرس
✳️ کاربرد فونت آیکون در طراحی وب
══ فهرست مطالب ══
○ فونت آیکون چیست؟
○ Font Awesome، پرکاربردترین فونت آیکون ارائه شده
🔸 فونت آیکون چیست؟
فونت‌ها معمولاً شامل چندین عدد و همین‌طور حروف هستند که به کاربر این امکان را می‌دهند تا مشخص کند که متون موردنظر، با چه شکلی به کاربر نمایش داده شود. در کنار این نوع از فونت‌ها که به فونت‌های متنی نیز معروف هستند، فونت آیکون‌ها نیز وجود دارند. فونت آیکون، فونتی است که بجای اینکه شامل چندین حرف و متن باشد، شامل اشکال مختلفی است که می‌توان از آن‌ها استفاده کرد. شما می‌توانید به استفاده از فونت آیکون، در قسمت‌های موردنظر از آیکون‌هایی که در داخل فونت تعبیه‌شده است استفاده کنید و اشکال موردنظر را با ابعاد موردنظر در سایت خود درج نمایید.
استفاده از فونت آیکون‌ها، مزایا و معایبی دارد که در ادامه به آن‌ها خواهیم پرداخت:
مزایا:
🔸 Font Awesome، پرکاربردترین فونت آیکون ارائه شده
فونت آیکون Font Awesome را می‌توان پرکاربردترین فونت آیکون ارائه‌شده دانست که شامل ۵۸۵ آیکون می‌باشد و در دسته‌بندی‌هایی نظیر طراحی وب، شبکه‌های اجتماعی، نمودار و چارت آیکون‌های پرداخت و … دسته‌بندی شده‌اند. Font Awesome به‌صورت متن‌باز، در گیت هاب در این لینک (+) در دسترس می‌باشد و شما می‌توانید این فونت آیکون را دانلود کرده و در پروژه‌های خود از آن استفاده کنید.
نحوه فراخوانی در وبسایت نیز بسیار ساده است. کافی است تا فونت آیکون را مانند سایر فونت‌ها، در فایل Style.css خود الحاق کنید. بعد از فراخوانی و الحاق فونت‌ها، کافی است تا آیکون موردنظر خود را از این لینک (+) انتخاب کرده و بر روی آیکون موردنظر کلیک کنید تا کد مربوط به فراخوانی آیکون مربوطه نمایش دهد. سپس کد را در هر قسمت که مدنظر دارید، کپی کرده و از آیکون موردنظر استفاده کنید.
این فونت آیکون در بازه‌های زمانی مختلفی به‌روزرسانی شده و آیکون‌های جدیدی به آن اضافه می‌شود که همواره می‌توانید از این آیکون‌ها استفاده کنید. درصورتی‌که می‌خواهید طراحی وب را شروع کنید و یا مایل به یادگیری مباحث بیشتری دارید، آموزش‌های زیر را پیشنهاد می‌کنیم:
مطالعه ادامه مطلب 👇👇
🔗 کاربرد فونت آیکون در طراحی وب — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزش‌های طراحی و توسعه وب فرادرس
══ فهرست مطالب ══
○ فونت آیکون چیست؟
○ Font Awesome، پرکاربردترین فونت آیکون ارائه شده
🔸 فونت آیکون چیست؟
فونت‌ها معمولاً شامل چندین عدد و همین‌طور حروف هستند که به کاربر این امکان را می‌دهند تا مشخص کند که متون موردنظر، با چه شکلی به کاربر نمایش داده شود. در کنار این نوع از فونت‌ها که به فونت‌های متنی نیز معروف هستند، فونت آیکون‌ها نیز وجود دارند. فونت آیکون، فونتی است که بجای اینکه شامل چندین حرف و متن باشد، شامل اشکال مختلفی است که می‌توان از آن‌ها استفاده کرد. شما می‌توانید به استفاده از فونت آیکون، در قسمت‌های موردنظر از آیکون‌هایی که در داخل فونت تعبیه‌شده است استفاده کنید و اشکال موردنظر را با ابعاد موردنظر در سایت خود درج نمایید.
استفاده از فونت آیکون‌ها، مزایا و معایبی دارد که در ادامه به آن‌ها خواهیم پرداخت:
مزایا:
🔸 Font Awesome، پرکاربردترین فونت آیکون ارائه شده
فونت آیکون Font Awesome را می‌توان پرکاربردترین فونت آیکون ارائه‌شده دانست که شامل ۵۸۵ آیکون می‌باشد و در دسته‌بندی‌هایی نظیر طراحی وب، شبکه‌های اجتماعی، نمودار و چارت آیکون‌های پرداخت و … دسته‌بندی شده‌اند. Font Awesome به‌صورت متن‌باز، در گیت هاب در این لینک (+) در دسترس می‌باشد و شما می‌توانید این فونت آیکون را دانلود کرده و در پروژه‌های خود از آن استفاده کنید.
نحوه فراخوانی در وبسایت نیز بسیار ساده است. کافی است تا فونت آیکون را مانند سایر فونت‌ها، در فایل Style.css خود الحاق کنید. بعد از فراخوانی و الحاق فونت‌ها، کافی است تا آیکون موردنظر خود را از این لینک (+) انتخاب کرده و بر روی آیکون موردنظر کلیک کنید تا کد مربوط به فراخوانی آیکون مربوطه نمایش دهد. سپس کد را در هر قسمت که مدنظر دارید، کپی کرده و از آیکون موردنظر استفاده کنید.
این فونت آیکون در بازه‌های زمانی مختلفی به‌روزرسانی شده و آیکون‌های جدیدی به آن اضافه می‌شود که همواره می‌توانید از این آیکون‌ها استفاده کنید. درصورتی‌که می‌خواهید طراحی وب را شروع کنید و یا مایل به یادگیری مباحث بیشتری دارید، آموزش‌های زیر را پیشنهاد می‌کنیم:
مطالعه ادامه مطلب 👇👇
🔗 کاربرد فونت آیکون در طراحی وب — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزش‌های طراحی و توسعه وب فرادرس
✳️ کاربرد رنگ در طراحی وب — ۶ توصیه برای طراحی مطمئن وبسایت
احتمالاً همه ما خاطراتی از نخستین روزهای آموزش خود به یاد داریم که در کلاس نقاشی، رنگ‌های مختلف در اختیار ما قرار می‌گرفت. برای نخستین بار شاهد بودیم که چگونه رنگ‌های اصلی در ترکیب با هم رنگ‌های ثانویه را می‌سازند و شاید با خودمان استدلال کرده‌ایم که اگر ترکیب دو رنگ باعث پدید آمدن چنین رنگ زیبایی شده است، پس ترکیب کردن همه رنگ‌ها با هم حتماً چیز بهتری خواهد ساخت! اما درک این نکته که مخلوط کردن همه رنگ‌ها با هم صرف‌نظر از شیوه اجرا، نتیجه‌ای نازیبا به بار می‌آورد، تجربه‌ای کاملاً مأیوس‌کننده بوده است.
══ فهرست مطالب ══
○ مقدمه‌ای بر تئوری رنگ
○ ۱. طرح رنگ نقاشی نیست؛ بلکه بوم است
○ ۲. با یک مبنای ساده خاکستری شروع کنید
○ ۳. برای هایلایت کردن تنها از یک رنگ استفاده کنید
○ ۴. اگر تردید دارید، از رنگ آبی استفاده کنید
○ ۵. از نسخه‌های مختلف رنگ هایلایت استفاده کنید
○ ۶. از گوشه راست-بالای نقشه رنگ اجتناب کنید
○ نکات مهم دیگر
○ سخن پایانی
🔸 مقدمه‌ای بر تئوری رنگ
در بلاگ فرادرس قبلاً در مورد طرح‌های رنگ بسیار صحبت کردیم و اطلاعاتی جذاب در مورد نظریه رنگ آموختیم. در مورد رنگ مایه، سایه‌روشن رنگ، تن رنگ، و اشباع و درخشش رنگ مطالبی خواندیم. همچنین طرح‌های رنگی متشابه، مونوکروم، سه‌گانه، مکمل و ترکیبی را معرفی کردیم.
اما بدون وجود یک چارچوب عملی برای استفاده از این اطلاعات، نمی‌توانید به ایجاد یک وبسایت با طراحی خوش رنگ نزدیک شوید. در واقع صرفاً با استفاده از تمرین ایجاد طرح‌های رنگی با آزمون و خطا است که می‌توانید به همه آن چه در مورد تئوری رنگ آموخته‌اید، معنایی عملی ببخشید.
در این فرایند برخی توصیه‌های کاربردی برای طرح‌های رنگ وب‌سایت‌ها وجود دارند که شاید افراد مبتدی از آن‌ها مطلع نباشند. زمانی که هنوز در ابتدای کار هستید، نظریه رنگ تنها چیزی نیست که با آن مواجه می‌شوید. در واقع در این زمان شما به چیزی نیاز دارید که جنبه تئوریک کمتری داشته باشد و راهنمای سرراست‌تری باشد.
🔸 ۱. طرح رنگ نقاشی نیست؛ بلکه بوم است
یکی از بنیادی‌ترین مفاهیم در طراحی وب آن است که مهم نیست چقدر زمان صرف طراحی یک طرح رنگ درخشان کرده باشید، در نهایت وظیفه آن این است که نقش دوم این نمایش باشد؛ چون نقش اول نمایش، محتوای وبسایت است. طرح رنگ شما نباید طوری باشد که درخشان‌تر از محتوای وبسایت به چشم بیاید. طراحی خوب آن طراحی است که در پس‌زمینه بماند و به ارائه بهتر محتوا در پیش‌زمینه کمک کند.
یکی از متداول‌ترین فرایندها در طراحی وب این است که خود طراحی در روندی تقریباً جداگانه و غالباً در نرم‌افزارهایی مانند فتوشاپ یا Sketch خلق می‌شود. اگر به محتوای نمونه وبسایت دسترسی نداشته باشید، احتمال این که طراحی ایجاد شده، خود به تنهایی عالی به نظر بیاید بیشتر می‌شود. ممکن است مشتری‌ها از یک فرم موکاپ بیشتر خوششان بیاید؛ اما در عمل برای بازدیدکنندگان مطلوب نباشد. در واقع فرایند طراحی وب چنان پیوند تنگاتنگی با محتوای وبسایت دارد که طراحی‌های برتر وب‌سایت‌ها زمانی که محتوایی در آن‌ها قرار نگرفته باشد، اصلاً خالی به نظر نمی‌رسند.
یکی از ایده‌های خوب برای شروع کار این است که نمونه‌ای از نوع محتوایی که انتظار دارید در سایت مشاهده شود را با در نرم‌افزار طراحی و یا مستقیماً از طریق کد رسم کنید و سپس به طراحی آن بپردازید. این فرایند به خصوص در مواردی که عکس‌ها یا تصاویری با سبک خاص در سایت استفاده می‌شوند بسیار مفید است، زیرا می‌توانید مطمئن باشید که طراحی شما با آن تصاویر هماهنگ خواهد بود. تصور کنید که محتوای یک سایت کاملاً منحصر به فرد است و شما قصد دارید قالبی طراحی کنید که بیشترین تناسب را با آن داشته باشد.
مطالعه ادامه مطلب 👇👇
🔗 کاربرد رنگ در طراحی وب — ۶ توصیه برای طراحی مطمئن وبسایت — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزش‌های طراحی و توسعه وب فرادرس
احتمالاً همه ما خاطراتی از نخستین روزهای آموزش خود به یاد داریم که در کلاس نقاشی، رنگ‌های مختلف در اختیار ما قرار می‌گرفت. برای نخستین بار شاهد بودیم که چگونه رنگ‌های اصلی در ترکیب با هم رنگ‌های ثانویه را می‌سازند و شاید با خودمان استدلال کرده‌ایم که اگر ترکیب دو رنگ باعث پدید آمدن چنین رنگ زیبایی شده است، پس ترکیب کردن همه رنگ‌ها با هم حتماً چیز بهتری خواهد ساخت! اما درک این نکته که مخلوط کردن همه رنگ‌ها با هم صرف‌نظر از شیوه اجرا، نتیجه‌ای نازیبا به بار می‌آورد، تجربه‌ای کاملاً مأیوس‌کننده بوده است.
══ فهرست مطالب ══
○ مقدمه‌ای بر تئوری رنگ
○ ۱. طرح رنگ نقاشی نیست؛ بلکه بوم است
○ ۲. با یک مبنای ساده خاکستری شروع کنید
○ ۳. برای هایلایت کردن تنها از یک رنگ استفاده کنید
○ ۴. اگر تردید دارید، از رنگ آبی استفاده کنید
○ ۵. از نسخه‌های مختلف رنگ هایلایت استفاده کنید
○ ۶. از گوشه راست-بالای نقشه رنگ اجتناب کنید
○ نکات مهم دیگر
○ سخن پایانی
🔸 مقدمه‌ای بر تئوری رنگ
در بلاگ فرادرس قبلاً در مورد طرح‌های رنگ بسیار صحبت کردیم و اطلاعاتی جذاب در مورد نظریه رنگ آموختیم. در مورد رنگ مایه، سایه‌روشن رنگ، تن رنگ، و اشباع و درخشش رنگ مطالبی خواندیم. همچنین طرح‌های رنگی متشابه، مونوکروم، سه‌گانه، مکمل و ترکیبی را معرفی کردیم.
اما بدون وجود یک چارچوب عملی برای استفاده از این اطلاعات، نمی‌توانید به ایجاد یک وبسایت با طراحی خوش رنگ نزدیک شوید. در واقع صرفاً با استفاده از تمرین ایجاد طرح‌های رنگی با آزمون و خطا است که می‌توانید به همه آن چه در مورد تئوری رنگ آموخته‌اید، معنایی عملی ببخشید.
در این فرایند برخی توصیه‌های کاربردی برای طرح‌های رنگ وب‌سایت‌ها وجود دارند که شاید افراد مبتدی از آن‌ها مطلع نباشند. زمانی که هنوز در ابتدای کار هستید، نظریه رنگ تنها چیزی نیست که با آن مواجه می‌شوید. در واقع در این زمان شما به چیزی نیاز دارید که جنبه تئوریک کمتری داشته باشد و راهنمای سرراست‌تری باشد.
🔸 ۱. طرح رنگ نقاشی نیست؛ بلکه بوم است
یکی از بنیادی‌ترین مفاهیم در طراحی وب آن است که مهم نیست چقدر زمان صرف طراحی یک طرح رنگ درخشان کرده باشید، در نهایت وظیفه آن این است که نقش دوم این نمایش باشد؛ چون نقش اول نمایش، محتوای وبسایت است. طرح رنگ شما نباید طوری باشد که درخشان‌تر از محتوای وبسایت به چشم بیاید. طراحی خوب آن طراحی است که در پس‌زمینه بماند و به ارائه بهتر محتوا در پیش‌زمینه کمک کند.
یکی از متداول‌ترین فرایندها در طراحی وب این است که خود طراحی در روندی تقریباً جداگانه و غالباً در نرم‌افزارهایی مانند فتوشاپ یا Sketch خلق می‌شود. اگر به محتوای نمونه وبسایت دسترسی نداشته باشید، احتمال این که طراحی ایجاد شده، خود به تنهایی عالی به نظر بیاید بیشتر می‌شود. ممکن است مشتری‌ها از یک فرم موکاپ بیشتر خوششان بیاید؛ اما در عمل برای بازدیدکنندگان مطلوب نباشد. در واقع فرایند طراحی وب چنان پیوند تنگاتنگی با محتوای وبسایت دارد که طراحی‌های برتر وب‌سایت‌ها زمانی که محتوایی در آن‌ها قرار نگرفته باشد، اصلاً خالی به نظر نمی‌رسند.
یکی از ایده‌های خوب برای شروع کار این است که نمونه‌ای از نوع محتوایی که انتظار دارید در سایت مشاهده شود را با در نرم‌افزار طراحی و یا مستقیماً از طریق کد رسم کنید و سپس به طراحی آن بپردازید. این فرایند به خصوص در مواردی که عکس‌ها یا تصاویری با سبک خاص در سایت استفاده می‌شوند بسیار مفید است، زیرا می‌توانید مطمئن باشید که طراحی شما با آن تصاویر هماهنگ خواهد بود. تصور کنید که محتوای یک سایت کاملاً منحصر به فرد است و شما قصد دارید قالبی طراحی کنید که بیشترین تناسب را با آن داشته باشد.
مطالعه ادامه مطلب 👇👇
🔗 کاربرد رنگ در طراحی وب — ۶ توصیه برای طراحی مطمئن وبسایت — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزش‌های طراحی و توسعه وب فرادرس
✳️ Node.js چیست و چه نقشی در توسعه وب دارد؟ — به زبان ساده
جاوا اسکریپت صرفاً یک زبان سمت کلاینت است که در مرورگر اجرا می‌شود. البته این وضعیت تا قبل از معرفی Node.js بود؛ چون با معرفی این مفهوم جدید اینک جاوا اسکریپت می‌تواند روی سرور نیز اجرا شود؛ اما Node.js چیزی بسیار بزرگ‌تر از جاوا اسکریپت صرف است. اگر به بحث توسعه وب علاقه‌مند هستید، می‌بایست به Node و موجی که در جامعه برنامه نویسان ایجاد کرده است، توجه داشته باشید.
══ فهرست مطالب ══
○ Node.js چیست؟
○ ماژول‌ها
○ چرا باید از Node.js استفاده کنیم؟
○ معایب
🔸 Node.js چیست؟
Node.js رابطی برای «محیط زمان اجرای» جاوا اسکریپت، V۸ محسوب می‌شود. V۸ مفسر بسیار سریع جاوا اسکریپت است که در مرورگر کروم اجرا می‌شود. همان طور که می‌دانید، شما می‌توانید V۸ را دانلود کنید و در هر کجا که دوست دارید، مورد استفاده قرار دهید. Node.js همین کار را در مورد وب‌سرورها انجام داده است. در نهایت باید گفت که جاوا اسکریپت یک زبان برنامه‌نویسی است و هیچ نشانه‌ای در دست نیست که بتوان از آن به عنوان یک سرور و همچنین در مرورگر کاربران استفاده کرد.
در یک استک سرور متداول به صورت LAMP یک وب‌سرور آپاچی یا NginX وجود دارد که PHP را اجرا می‌کند. هر اتصال جدید به سرور باعث می‌شود یک ترد جدید باز شود و این احتمال وجود دارد که خیلی زود عملکرد سرور کند شده یا به کلی از کار بیفتد. تنها راه خدمت‌رسانی به کاربران بیشتر اضافه کردن سرورهای بیشتر است. در واقع مقیاس‌پذیری در این سناریو تعریف چندانی ندارد. اما Node.js چنین وضعیتی ندارد. دیگر هیچ وب‌سرور آپاچی وجود ندارد که به اتصال‌های ورودی گوش دهد و کدهای وضعیت HTTP را بازگرداند. شما باید معماری هسته سرور را خودتان مدیریت کنید. خوشبختانه ماژول‌هایی برای آسان‌تر ساختن این کار عرضه شده‌اند؛ اما این فرایند همچنان در آغاز ممکن است پیچیده به نظر برسد. با این حال نتیجه کار اپلیکیشن‌های وب با عملکرد بالا است.
جاوا اسکریپت یک زبان رویداد-محور است. از این رو هر چیزی که روی سرور رخ می‌دهد، یک رویداد غیر مسدودکننده را آغاز می‌کند. هر اتصال جدید یک رویداد محسوب می‌شود، همچنین دریافت داده‌ها از یک فرم آپلود باعث ایجاد رویداد دریافت داده (data-received) می‌شود؛ درخواست داده‌ها از فایل‌های پایگاه داده نیز یک رویداد است. در عمل این وضعیت بدان معنی است که یک سایت Node.js هرگز قفل نمی‌شود و می‌تواند از ده‌ها هزار کاربر همزمان پشتیبانی کند. در واقع Node.js نقش سروری مانند آپاچی را ایفا می‌کند و کد برنامه‌ای را که روی آن اجرا می‌شود تفسیر می‌کند.
🔸 ماژول‌ها
همانند آپاچی ماژول‌ها یا کتابخانه‌های مختلفی وجود دارد که می‌توانند روی Node.js نصب شوند تا ویژگی‌ها و کارکردهای بیشتری برای آن ایجاد کنند. از جمله این کتابخانه‌ها می‌توان به انبار داده (data store)، پشتیبانی از فایل ZIP، ورود با فیسبوک یا درگاه‌های پرداخت اشاره کرد.
البته این ماژول‌ها به اندازه تعداد موجود برای پی‌اچ‌پی نیستند؛ اما Node.js هنوز در مراحل اولیه توسعه است و جامعه‌ای قدرتمند در پشت آن قرار دارد. یکی از مفاهیم اساسی Node.js توابع ناهمگام هستند. با استفاده از این توابع همه چیز در پس‌زمینه اجرا می‌شود. در اغلب زبان‌های اسکریپت‌نویسی سمت سرور، برنامه باید صبر کند هر تابع به پایان برسد تا بتواند به تابع بعدی برود. اما در Node.js می‌توان توابعی تعریف کرد که وقتی بخش‌های دیگر به کار خود ادامه می‌دهند، به اجرا بپردازد. این موضوعی پیچیده است که در این نوشته قصد نداریم بر روی آن متمرکز شویم؛ اما این‌ها خصوصیاتی هستند که Node.js را تعریف می‌کنند و از این رو آشنایی با آن‌ها حائز اهمیت است.
توضیح ویژگی‌های Node.js تا این جا کافی است. در ادامه یک مثال ساده از سرور HTTP ارائه می‌کنیم که برخی از این مفاهیم را به طور اجمالی برای شما توضیح دهد.
مطالعه ادامه مطلب 👇👇
🔗 Node.js چیست و چه نقشی در توسعه وب دارد؟ — به زبان ساده — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزش‌های طراحی و توسعه وب فرادرس
جاوا اسکریپت صرفاً یک زبان سمت کلاینت است که در مرورگر اجرا می‌شود. البته این وضعیت تا قبل از معرفی Node.js بود؛ چون با معرفی این مفهوم جدید اینک جاوا اسکریپت می‌تواند روی سرور نیز اجرا شود؛ اما Node.js چیزی بسیار بزرگ‌تر از جاوا اسکریپت صرف است. اگر به بحث توسعه وب علاقه‌مند هستید، می‌بایست به Node و موجی که در جامعه برنامه نویسان ایجاد کرده است، توجه داشته باشید.
══ فهرست مطالب ══
○ Node.js چیست؟
○ ماژول‌ها
○ چرا باید از Node.js استفاده کنیم؟
○ معایب
🔸 Node.js چیست؟
Node.js رابطی برای «محیط زمان اجرای» جاوا اسکریپت، V۸ محسوب می‌شود. V۸ مفسر بسیار سریع جاوا اسکریپت است که در مرورگر کروم اجرا می‌شود. همان طور که می‌دانید، شما می‌توانید V۸ را دانلود کنید و در هر کجا که دوست دارید، مورد استفاده قرار دهید. Node.js همین کار را در مورد وب‌سرورها انجام داده است. در نهایت باید گفت که جاوا اسکریپت یک زبان برنامه‌نویسی است و هیچ نشانه‌ای در دست نیست که بتوان از آن به عنوان یک سرور و همچنین در مرورگر کاربران استفاده کرد.
در یک استک سرور متداول به صورت LAMP یک وب‌سرور آپاچی یا NginX وجود دارد که PHP را اجرا می‌کند. هر اتصال جدید به سرور باعث می‌شود یک ترد جدید باز شود و این احتمال وجود دارد که خیلی زود عملکرد سرور کند شده یا به کلی از کار بیفتد. تنها راه خدمت‌رسانی به کاربران بیشتر اضافه کردن سرورهای بیشتر است. در واقع مقیاس‌پذیری در این سناریو تعریف چندانی ندارد. اما Node.js چنین وضعیتی ندارد. دیگر هیچ وب‌سرور آپاچی وجود ندارد که به اتصال‌های ورودی گوش دهد و کدهای وضعیت HTTP را بازگرداند. شما باید معماری هسته سرور را خودتان مدیریت کنید. خوشبختانه ماژول‌هایی برای آسان‌تر ساختن این کار عرضه شده‌اند؛ اما این فرایند همچنان در آغاز ممکن است پیچیده به نظر برسد. با این حال نتیجه کار اپلیکیشن‌های وب با عملکرد بالا است.
جاوا اسکریپت یک زبان رویداد-محور است. از این رو هر چیزی که روی سرور رخ می‌دهد، یک رویداد غیر مسدودکننده را آغاز می‌کند. هر اتصال جدید یک رویداد محسوب می‌شود، همچنین دریافت داده‌ها از یک فرم آپلود باعث ایجاد رویداد دریافت داده (data-received) می‌شود؛ درخواست داده‌ها از فایل‌های پایگاه داده نیز یک رویداد است. در عمل این وضعیت بدان معنی است که یک سایت Node.js هرگز قفل نمی‌شود و می‌تواند از ده‌ها هزار کاربر همزمان پشتیبانی کند. در واقع Node.js نقش سروری مانند آپاچی را ایفا می‌کند و کد برنامه‌ای را که روی آن اجرا می‌شود تفسیر می‌کند.
🔸 ماژول‌ها
همانند آپاچی ماژول‌ها یا کتابخانه‌های مختلفی وجود دارد که می‌توانند روی Node.js نصب شوند تا ویژگی‌ها و کارکردهای بیشتری برای آن ایجاد کنند. از جمله این کتابخانه‌ها می‌توان به انبار داده (data store)، پشتیبانی از فایل ZIP، ورود با فیسبوک یا درگاه‌های پرداخت اشاره کرد.
البته این ماژول‌ها به اندازه تعداد موجود برای پی‌اچ‌پی نیستند؛ اما Node.js هنوز در مراحل اولیه توسعه است و جامعه‌ای قدرتمند در پشت آن قرار دارد. یکی از مفاهیم اساسی Node.js توابع ناهمگام هستند. با استفاده از این توابع همه چیز در پس‌زمینه اجرا می‌شود. در اغلب زبان‌های اسکریپت‌نویسی سمت سرور، برنامه باید صبر کند هر تابع به پایان برسد تا بتواند به تابع بعدی برود. اما در Node.js می‌توان توابعی تعریف کرد که وقتی بخش‌های دیگر به کار خود ادامه می‌دهند، به اجرا بپردازد. این موضوعی پیچیده است که در این نوشته قصد نداریم بر روی آن متمرکز شویم؛ اما این‌ها خصوصیاتی هستند که Node.js را تعریف می‌کنند و از این رو آشنایی با آن‌ها حائز اهمیت است.
توضیح ویژگی‌های Node.js تا این جا کافی است. در ادامه یک مثال ساده از سرور HTTP ارائه می‌کنیم که برخی از این مفاهیم را به طور اجمالی برای شما توضیح دهد.
مطالعه ادامه مطلب 👇👇
🔗 Node.js چیست و چه نقشی در توسعه وب دارد؟ — به زبان ساده — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزش‌های طراحی و توسعه وب فرادرس
✳️ وردپرس یا دروپال، کدامیک بهتر است؟ — مقایسه جامع
وردپرس از نخستین انتخاب‌های کاربران برای راه‌اندازی یک وبسایت به حساب می‌آید. دلیل این مسئله آن است که وردپرس امروزه سهم عمده بازار را در اختیار دارد.
══ فهرست مطالب ══
○ دروپال یا وردپرس: کدام یک را باید استفاده کرد؟
○ دروپال یا وردپرس: سهولت استفاده
○ دروپال یا وردپرس: جامعه و منابع
○ دروپال یا وردپرس: امنیت
○ دروپال یا وردپرس – هزینه و قیمت
○ دروپال یا وردپرس: انعطاف‌پذیری
○ دروپال یا وردپرس: محبوبیت
○ از کدام 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 — مطالب و آموزش‌های طراحی و توسعه وب فرادرس
