FaraWebDev | فرا وب: آموزش طراحی و توسعه وب

‏✳️ ‌فایل XML چیست و چگونه و با چه ابزاری می‌توان آن را اجرا کرد؟ (+ دانلود فیلم آموزش گام به گام) ‏در دنیای رایانه‌ها فایل‌هایی با پسوند XML. وجود دارند که در این مطلب می‌خواهیم با آن‌ها آشنا شویم. عبارت XML مخفف «Extensible Markup Language» و به معنای «زبان نشانه‌گذاری گسترش‌پذیر» است. XMLها در واقع فایل‌هایی هستند که از متن خالص تشکیل می‌شوند و شامل برچسب‌های سفارشی (Tag) هستند که ساختار و ویژگی‌های اسناد دیگر را مشخص می‌کنند. ══ فهرست مطالب ══ ‏ ○ XML چیست؟ ‏ ○ چگونه یک فایل XML را باز کنیم؟ ‏🔸 XML چیست؟ ‏XML یک زبان نشانه‌گذاری است که توسط کنسرسیوم شبکه‌ی جهانی وب (W۳C) ساخته شده است تا راهی برای ساخت اسنادی به وجود بیاورد که هم برای انسان و هم برای ماشین قابل فهم باشد. این کار از طریق برچسب‌هایی انجام می‌شود که ساختار سند و نحوه‌ی ذخیره‌سازی و انتقال آن را مشخص می‌کنند. ‏شاید بهتر باشد آن را با زبان نشانه‌گذاری دیگری مقایسه کنیم که احتمالا به آن آشنا هستید؛ زبان نشانه‌گذاری فرامتن یا HTML که از ان برای کد گذاری صفحات وب استفاده می‌شود. HTML از یک سری علامت‌های نشانه‌گذاری از قبل تعریف شده برای مشخص کردن قالب محتوای صفحات وب استفاده می‌کند. برای مثال، کد زیر از تعدادی تگ برای بولد کردن یا کج کردن برخی حروف استفاده کرده است: ‏چیزی که XML را از سایر زبان‌های نشانه‌گذاری متمایز می‌کند، گسترش‌پذیری آن است. بر خلاف HTML، در XML دستورات از قبل مشخص شده‌ای وجود ندارند. به جای آن، XML به کاربران خود اجازه‌ی ساخت هرگونه علامت نشانه‌گذاری برای معرفی محتوای خود را می‌دهد که باعث به وجود آمدن مجموعه‌ای بینهایت از علائم خودساخته می‌شود. ‏🔸 چگونه یک فایل XML را باز کنیم؟ ‏برای باز کردن فایل‌های XML راه‌های متفاوتی وجود دارد. این فایل‌ها را می‌توانید با هر ویرایشگر متنی باز کنید، در هر مرورگری مشاهده نمایید یا حتی در وبسایت‌های مخصوصی آن‌ها را مشاهده، ویرایش یا حتی به سایر فرمت‌ها تبدیل کنید. ‏از آنجایی که فایل‌های XML تنها متن هستند، می‌توانید به سادگی از هر ویرایشگر متنی برای مدیریت آن‌ها استفاده کنید. مساله‌ای که وجود دارد تعداد زیاد ویرایشگرهای متن است که برای کار با ساختار XML طراحی نشده‌اند. شاید نرم‌افزاری نظیر «Notepad» برای باز کردن و بررسی کلی یک فایل XML مناسب باشد، ولی قطعا نرم‌افزارهای بهتری هم برای این کار وجود دارند. ‏بر روی فایل XML راست کلیک کرده و از قسمت «Open With» نرم‌فزار «Notepad» را انتخاب نمایید. مطالعه ادامه مطلب 👇👇 ‏🔗 فایل XML چیست و چگونه و با چه ابزاری می‌توان آن را اجرا کرد؟ (+ دانلود فیلم آموزش گام به گام) — کلیک کنید (+) 📌 کانال اختصاصی آموزشی طراحی و توسعه وب آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇 @FaraWebDev — مطالب و آموزش‌های طراحی و توسعه وب فرادرس ‌‌ ‌‌‌‌

‌ 🔴 بهترین فرصت برای شروع یادگیری «طراحی وب» — ۱۵۰ هزار تومان هدیه آموزشی فرادرس 🎉 زمان محدودی برای استفاده از جشنواره تخفیف بسوی مهر فرادرس باقی مانده است. در طی این جشنواره، چند هزار آموزش تخصصی فرادرس، برای شروع مطالعه و یادگیری در دسترس هستند. 🌟 پیشنهاد می‌کنیم از آخرین فرصت‌های جشنواره به سوی مهر، برای دریافت هدیه آموزشی تا ۱۵۰ هزار تومان استفاده نمایید و مهر امسال را به ماه آموختن و یادگیری تبدیل کنید. 🔹 برای اطلاع از جزئیات تخفیف و دسترسی به صفحه جشنواره، روی لینک زیر کلیک کنید: 🔗 جشنواره بسوی مهر فرادرس - [کلیک کنید] 🎁 کد تخفیف: MHR26 ❇️ فهرست کامل آموزش‌های طراحی وب [+] @FaraDars - فرادرس

‏✳️ ‌۱۹ قالب برتر راست‌چین وردپرس ‏ ══ فهرست مطالب ══ ‏ ○ ساخت یک سایت وردپرسی برای زبان‌های راست‌چین ‏ ○ ۱. قالب The Core ‏ ○ ۲. قالب Aegaeus ‏ ○ ۳. قالب The Shutter ‏ ○ ۴. قالب Architecto ‏ ○ ۵. قالب Philanthropy ‏ ○ ۶. قالب Parallax ‏ ○ ۷. قالب The Flavour ‏ ○ ۸. قالب Avant ‏ ○ ۹. قالب The Practice ‏ ○ ۱۰. قالب Auril ‏ ○ ۱۱. قالب Hestia ‏ ○ ۱۲. قالب Agency ‏ ○ ۱۳. قالب Writee ‏ ○ ۱۴. قالب Fullscreen ‏ ○ ۱۵. قالب OceanWP ‏ ○ ۱۶. قالب Alder ‏ ○ ۱۷. قالب Boron ‏ ○ ۱۸. قالب Nectar ‏ ○ ۱۹. قالب Responsive Pro ‏ ○ بررسی سازگاری قالب وردپرس با زبان‌های راست‌چین ‏🔸 ساخت یک سایت وردپرسی برای زبان‌های راست‌چین ‏وردپرس یک پلتفرم فوق‌العاده و ایدئال برای ساخت سایت در انواع زبان‌ها (چه راست‌چین و چه چپ‌چین) است. برای استفاده از همه امکانات وردپرس باید یک نسخه مستقل از وب‌سایت WordPress.org را تهیه و روی سرور میزبانتان نصب کنید. (برای مشاهده مقایسه WordPress.org (نسخه مستقل وردپرس) و WordPress.com (سرویس وبلاگ نویسی وردپرس) روی لینک‌های هریک از آن‌ها کلیک کنید) ‏برای راه‌اندازی یک وب‌سایت «خود میزبان» یا مستقل با WordPress.org به یک نام دامنه و همینطور اشتراک حساب میزبانی WordPress نیاز دارید. بعد از ثبت‌نام برای میزبانی وب می‌توانید برای اطلاع از چگونگی نصب وردپرس به این لینک مراجعه کنید. سپس وقت انتخاب و نصب قالب وردپرسی‌تان می‌رسد. برای آشنایی با بهترین قالب‌های وردپرس راست‌چین، در ادامه این مقاله همراه ما باشید. ‏نتوصیه می‌کنیم برای ساخت وب‌سایت، دامنه و فضای هاست را از یک شرکت معتبر و قدرتمند خریداری کنید که در آینده دچار مشکل نشوید. ‏🔸 ۱. قالب The Core ‏هسته (Core) یک قالب وردپرس چندمنظوره RTL است که شامل دو قالب آماده با قابلیت نصب آسان (تنها با یک کلیک) است. هردوی این قالب‌ها را می‌توان با استفاده از صفحه ساز داخلی و کشیدن و رها کردن (drag and drop) ویرایش کرد. این قالب دارای رنگ‌های نامحدود، انتخاب‌گر فونت، قالب صفحات، ویجت‌های سفارشی و … است. همچنین این قالب با پشتیبانی از فروشگاه ساز ووکامرس (WooCommerce) این امکان را به شما می‌دهد که بتوانید به وب‌سایتتان یک فروشگاه آنلاین هم اضافه کنید. مطالعه ادامه مطلب 👇👇 ‏🔗 ۱۹ قالب برتر راست‌چین وردپرس — کلیک کنید (+) 📌 کانال اختصاصی آموزشی طراحی و توسعه وب آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇 @FaraWebDev — مطالب و آموزش‌های طراحی و توسعه وب فرادرس ‌‌ ‌‌‌‌

‏✳️ ‌چگونه برنامه نویسی وب را شروع کنم؟ ‏برای بسیاری از افراد این پرسش وجود دارد که چگونه می‌توانند برنامه‌نویس وب شوند و باید برنامه نویسی وب را از کجا شروع کنند؟ در این مطلب از مجله فرادرس، تلاش کرده‌ایم تا پاسخ‌هایی مناسب به سئوالاتی از این دست بدهیم. همچنین، در مطلب «آموزش برنامه‌نویسی USSD | راهنمای شروع به کار — رایگان و به زبان ساده» نیز نحوه راه‌اندازی خدمات کد دستوری آموزش داده شده است. ══ فهرست مطالب ══ ‏ ○ می‌خواهم برنامه‌نویس وب شوم، از کجا باید شروع کنم؟ ‏ ○ HTML — اولین زبان برنامه نویسی وب ‏ ○ CSS — زبان مخصوص استایل‌دهی ‏ ○ جاوا اسکریپت — نخستین زبان اسکریپت‌نویسی تحت وب ‏ ○ jQuery — یکی از مهم‌ترین کتابخانه‌های جاوا اسکریپت ‏ ○ لایه‌های برنامه نویسی وب ‏ ○ PHP — پراستفاده‌ترین زبان برنامه نویسی وب در بک‌اند ‏ ○ ASP.Net — زبان برنامه‌نویسی تحت وب مایکروسافت ‏ ○ Django (جنگو) — چارچوب برنامه‌نویسی تحت وب با استفاده از پایتون ‏ ○ JSP — نسخه مخصوص جاوا برای برنامه نویسی وب ‏ ○ جمع‌بندی کلی ‏🔸 می‌خواهم برنامه‌نویس وب شوم، از کجا باید شروع کنم؟ ‏سؤال بالا، سوالی است که اکثر افراد هنگام شروع به یادگیری مباحث برنامه نویسی وب، با آن مواجه می‌شوند. اما به راستی، اگر بخواهیم برنامه نویسی وب را آغاز کنیم، باید از چه زبانی شروع کنیم؟ چه نکاتی باید رعایت شوند؟ ابتدا نیاز است تا چند مفهوم کاربردی را در زمینه برنامه نویسی وب، بررسی کنیم. در کل ۲ نوع وب‌سایت داریم، وب‌سایت‌های استاتیک یا ایستا و وب‌سایت‌های داینامیک یا پویا. ‏وب‌سایت‌های ایستا یا استاتیک، به وب‌سایت‌هایی گفته می‌شود که محتوا ثابت است و به منظور اضافه کردن محتوای جدید، می‌بایست مجدداً کدنویسی کرد. مثلاً شما یک وب‌سایت با ۵ صفحه دارید و به منظور اضافه کردن صفحه جدید، باید مجدداً کدنویسی کنید و سایر صفحات را نیز به منظور دسترسی به این صفحه ویرایش کرده و پیوند به این صفحه جدید را ایجاد کنید. به چنین وب‌سایت‌هایی، وب‌سایت ایستا گفته می‌شود. ‏وب‌سایت‌های پویا، در مقابل وب‌سایت‌های ایستا قرار دارند و کار با این نوع وب‌سایت‌ها، به مراتب آسان‌تر و همین‌طور بهتر است. در وب‌سایت‌های پویا، شما یک بار کدنویسی هسته را انجام می‌دهید و سپس به آسانی می‌توانید مطالب را منتشر کنید. به طور مثال، اگر با سرویس‌های بلاگ‌دهی کار کرده و آشنایی داشته باشید، می‌توانید سایتی طراحی کنید که با استفاده از پنل مدیریت، داده‌ها را دریافت کرده و به صورت پویا در سایت نمایش دهد و در صورت انتشار مطلب و محتوای جدید، احتیاجی به کدنویسی نباشد. ‏🔸 HTML — اولین زبان برنامه نویسی وب ‏HTML که سرواژه عبارت Hypertext Markup Language است، یک زبان نشانه‌گذاری محسوب می‌شود که به منظور ایجاد ساختار و قالب صفحه وب مورد استفاده قرار می‌گیرد. به کمک HTML می‌توانید مشخص کنید که در صفحه وب خود چند بخش دارید و محتوای هر بخش را مشخص کنید. زبان HTML، جزء لاینفک برنامه نویسی وب است و شما هر سایتی که بخواهید طراحی کنید، به هر زبانی که باشد، باید با استفاده از HTML ساختار اولیه سایت خود را آماده کرده و سپس با استفاده از سایر زبان‌ها، کدنویسی دیگر بخش‌ها را انجام دهید. به طور مثال، می‌خواهید مشخص کنید که سایت شما ۴ قسمت با عناوین سربرگ، ستون کناری، کادر محتوا و پاصفحه داشته باشد. باید در ابتدای کار با استفاده از HTML این قسمت را ایجاد و تعریف کنید و سپس با استفاده از سایر زبان‌ها، کد‌نویسی‌های سایر بخش‌ها را انجام دهید. ‏فیلم‌های آموزشی مختلفی برای یادگیری HTML در سایت فرادرس موجود است که در این بخش به معرفی تعدادی از آن‌ها در قالب یک مسیر یادگیری HTML پرداخته می‌شود. مطالعه ادامه مطلب 👇👇 ‏🔗 چگونه برنامه نویسی وب را شروع کنم؟ — کلیک کنید (+) 📌 کانال اختصاصی آموزشی طراحی و توسعه وب آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇 @FaraWebDev — مطالب و آموزش‌های طراحی و توسعه وب فرادرس ‌‌ ‌‌‌‌

‌ 🎊 تا ۱۵۰ هزار تومان تخفیف روی تمام آموزش‌های «طراحی وب» در جشنواره بسوی مهر فرادرس 🌟 شما می‌توانید در این جشنواره، تا ۱۵۰ هزار تومان هدیه تخفیف آموزشی فرادرس را با توجه به مقدار سبد سفارش خود، دریافت کنید👇👇👇 🥉 کمتر از ۵۰ هزار تومان ⬅️ ۱۰ هزار تومان تخفیف 🥈 بیشتر از ۵۰ هزار تومان (تا ۱۰۰ هزار تومان) ⬅️ ۲۰ هزار تومان تخفیف 🥇 بیشتر از ۱۰۰ هزار تومان (تا ۲۰۰ هزار تومان) ⬅️ ۴۰ هزار تومان تخفیف 🥇🥇 بیشتر از ۲۰۰ هزار تومان (تا ۳۰۰ هزار تومان) ⬅️ ۹۰ هزار تومان تخفیف 🥇🥇🥇 بیشتر از ۳۰۰ هزار تومان ⬅️ ۱۵۰ هزار تومان تخفیف 🎁🎁🎁 کد تخفیف: MHR26 🔗 [فهرست آموزش‌های طراحی و توسعه وب] برای اطلاع از جزئیات تخفیف و دسترسی به صفحه جشنواره، روی لینک زیر کلیک کنید: 👈 ورود به صفحه جشنواره - [مشاهده جزئیات] @FaraDars - فرادرس

‌ ❇️ فیلم آموزش «طراحی وبسایت ریسپانسیو» در ۱۳ دقیقه | به زبان ساده 📌 آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@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 — مطالب و آموزش‌های طراحی و توسعه وب فرادرس ‌‌ ‌‌‌‌

⏰ ساعات پایانی را از دست ندهید...   🎉 ۴۰ درصد تخفیف فرادرس برای ده‌ها آموزش «طراحی و توسعه وب»   🔗 فهرست کامل آموزش‌ها - [کلیک کنید]   🎁 کد تخفیف: SMR25   🌟بهترین فرصت برای شروع یادگیری در روزهای پایانی تابستان👇👇👇   🔗 ورود به صفحه تخفیف - [کلیک کنید]     @FaraDars - فرادرس

‏✳️ ‌تعاریف و مفاهیم دسترس پذیری در وب — راهنمای جامع ‏این نخستین مقاله از سری مقالات راهنمای جامع دسترس پذیری است که به بررسی تعاریف و مفاهیم دسترس پذیری می‌پردازد. این مقاله شامل بررسی گروه‌هایی از افراد است که باید در زمینه دسترس‌پذیری در نظر داشته باشیم و دلیل این کار را توضیح می‌دهد. همچنین ابزارهایی که افراد مختلف برای تعامل با وب مورد استفاده قرار می‌دهند و این که چطور می‌توانند دسترس‌پذیری را بخشی از گردش کار توسعه وب خود بکنند صحبت خواهیم کرد. ══ فهرست مطالب ══ ‏ ○ دسترس پذیری چیست؟ ‏ ○ ما به دنبال کدام نوع ناتوانی‌ها هستیم؟ ‏ ○ پیاده‌سازی دسترس‌پذیری در پروژه‌ها ‏ ○ راهنماها و قوانین دسترس‌پذیری ‏ ○ API-های دسترس‌پذیری ‏ ○ سخن پایانی ‏🔸 دسترس پذیری چیست؟ ‏دسترس‌پذیری به رویه قابل استفاده ساختن وب‌سایت‌ها برای بیشترین افراد ممکن گفته می‌شود. ما به طور سنتی وقتی به دسترس‌پذیری فکر می‌کنیم، افراد دارای ناتوانی‌ها را در نظر می‌گیریم، اما رویه دسترس‌پذیر ساختن سایت‌ها موجب بهره‌مندی گروه‌هایی از قبیل افرادی که از دستگاه‌های موبایل استفاده می‌کنند یا افرادی که اتصالات اینترنتی کندی دارند نیز می‌شود. ‏همچنین دسترس‌پذیری را می‌توان به این معنی در نظر گرفت که با همه افراد به صورت یکسان برخورد کنیم و صرف‌نظر از توانایی‌ها یا شرایط افراد، فرصت‌های برابری برای همه خلق کنیم. دقیقاً همان طور که استثنا کردن یک نفر از ورود فیزیکی به ساختمان صرفاً به این خاطر که ویلچیر استفاده می‌کند نادرست است، استثنا کردن افراد از ورود به وب‌سایت‌ها نیز به دلیل نقص بینایی کار درستی محسوب نمی‌شود. همه ما تفاوت‌هایی داریم، اما در نهایت همه ما انسان هستیم و از این رو حقوق انسانی یکسانی داریم. ‏دسترس‌پذیری کار درستی است که باید انجام دهیم. ارائه دسترس‌پذیری برای سایت‌ها در برخی کشورها بخشی از قانون محسوب می‌شود که می‌تواند بازارهای مهمی را به روی کسب‌وکارها بگشاید که در غیر این صورت نمی‌توانستند از خدمات آن‌ها استفاده کنند یا محصولاتشان را بخرند. ‏🔸 ما به دنبال کدام نوع ناتوانی‌ها هستیم؟ ‏افراد دارای ناتوانی نیز به اندازه افراد بدون ناتوانی متنوع هستند. فهرست انواع ناتوانی‌ها بسیار طولانی است. نکته کلیدی در این موضوع آن است که اندیشه خود را از رایانه خودتان و شیوه‌ای که از آن استفاده می‌کنید فراتر ببرید و شروع به یادگیری طرز استفاده دیگران از رایانه بکنید. توجه کنید که شما، همان کاربرانتان نیستید. انواع عمده ناتوانی‌هایی که باید در نظر داشت در ادامه ارائه شده‌اند و ابزارهای خاصی که افراد برای دسترسی به محتوای وب مورد استفاده قرار می‌دهند نیز معرفی شده‌اند. این ابزارها به نام فناوری‌های حمایتی یا AT نامیده می‌شوند. ‏نکته: گزارش «ناتوانی و سلامت» سازمان سلامت جهانی بیان می‌کند که بیش از یک میلیارد انسان یعنی حدود ۱۵% از جمعیت زمین، نوعی از ناتوانی را دارند و بین ۱۱۰ تا ۱۹۰ میلیون بزرگ‌سال، ناتوانی‌های عمده‌ای را در کارکردهای جسمی خود شاهد هستند. ‏افراد دارای نقص بینایی شامل افراد نابینا، بینایی سطح پایین و کوررنگی می‌شود. افراد زیادی که دارای نقص بینایی هستند، از ابزارهای بزرگنمایی صفحه استفاده می‌کنند که یا ذره‌بین فیزیکی است و یا به صورت قابلیت بزرگنمایی نرم‌افزاری عمل می‌کند. امروزه اغلب مرورگرها و سیستم‌های عامل قابلیت بزرگنمایی دارند. برخی کاربران از نرم‌افزارهای قرائت صفحه استفاده می‌کنند که برای خواندن دیجیتالی متون کاربرد دارد. برخی نرم‌افزارهای قرائت صفحه شامل موارد زیر هستند: مطالعه ادامه مطلب 👇👇 ‏🔗 تعاریف و مفاهیم دسترس پذیری در وب — راهنمای جامع — کلیک کنید (+) 📌 کانال اختصاصی آموزشی طراحی و توسعه وب آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇 @FaraWebDev — مطالب و آموزش‌های طراحی و توسعه وب فرادرس ‌‌ ‌‌‌‌

‌ 🔴 آخرین فرصت‌ها: ۴۰ درصد تخفیف در جشنواره پایان تابستان فرادرس 🔗 ورود به صفحه جشنواره - [کلیک کنید] 🎁 کد تخفیف: SMR25 📣 به اطلاع می‌رسانیم، جدیدترین و پرمخاطب‌ترین آموزش‌های «طراحی سایت» از طریق لینک‌های زیر، قابل مشاهده و با ۴۰ درصد تخفیف ویژه در دسترس می‌باشند👇 🌟 جدیدترین آموزش‌های طراحی سایت [+] 💫 پرمخاطب‌ترین آموزش‌های طراحی سایت [+] @FaraDars - فرادرس

‌ 🎉 تخفیف ۴۰ درصدی روی تمام آموزش‌های «طراحی و توسعه وب» در جشنواره پایان تابستان فرادرس ❇️ علاقه‌مندان می‌توانند در این جشنواره، آموزش‌های مورد نظر خود را با «۴۰ درصد تخفیف ویژه» تهیه کنند.👇 — وردپرس (WordPress) - مقدماتی — برنامه نویسی PHP — راه اندازی سایت و کار با وردپرس - تکمیلی — طراحی وب با HTML – مقدماتی — جاوا اسکریپت (JavaScript) - مقدماتی تا انجام پروژه عملی — طراحی وب با CSS - مقدماتی 🔗 فهرست آموزش‌های طراحی و توسعه وب - [کلیک کنید] ✔️ جهت مشاهده سایر آموزش‌ها و اطلاع از جزئیات جشنواره به لینک زیر مراجعه کنید👇 🔗 جشنواره ۴۰ درصد تخفیف فرادرس - [کلیک کنید] 🎁 کد تخفیف: SMR25 @FaraDars - فرادرس

‏✳️ ‌گنجاندن صوت و ویدیو در فایل های 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 — مطالب و آموزش‌های طراحی و توسعه وب فرادرس ‌‌ ‌‌‌‌

‏✳️ ‌چگونه برنامه نویس وب شویم؟ – بخش اول: فرانت‌اند (FrontEnd) ‏توسعه وب یکی از شاخه‌های مهم برنامه‌نویسی است که تقاضای بالایی هم از سوی استارتاپ‌ها و هم در بخش سازمانی دارد. در این راهنما، مقدماتی از این مبحث، به خصوص در زمینه فرانت‌اند را ارائه خواهیم کرد و بدین ترتیب این راهنما که بخش‌های دیگری نیز خواهد داشت، احتمالاً برای افراد مبتدی مناسب است؛ اما توسعه‌دهندگان متوسط نیز ممکن است بخش‌هایی از آن را مفید بیابند. ══ فهرست مطالب ══ ‏ ○ زبان‌ها و ابزارهای توسعه فرانت‌اند ‏ ○ HTML ‏ ○ CSS ‏ ○ جاوا اسکریپت ‏ ○ کتابخانه‌های کامپوننت ‏ ○ ابزارهای فرانت‌اند ‏ ○ سخن پایانی ‏🔸 زبان‌ها و ابزارهای توسعه فرانت‌اند ‏در آغاز یک نقشه برای چشم‌انداز فرانت‌اند ارائه می‌کنیم که در این نقشه چیزهایی که باید در این حوزه بشناسید معرفی شده‌اند. ‏خطوط زرد رنگ چیزهای مقدماتی که باید بیاموزید را نشان می‌دهند؛ و خطوط نارنجی نماینده موضوعات پیشرفته‌تری هستند که می‌توانید یادگیری آن‌ها را به بعدتر موکول کنید. ‏توسعه فرانت‌اند که به نام توسعه رابط کاربری (UI) نیز نامیده می‌شود به ایجاد رابط‌های کاربری وب، یعنی بخش‌هایی از اپلیکیشن گفته می‌شود که کاربر آن‌ها را مشاهده کرده و تعامل می‌کند. توسعه فرانت‌اند به طور عمده بر مبنای سه رکن استوار است: HTML برای نشانه‌گذاری، CSS برای سبک دهی و جاوا اسکریپت برای منطق و تعامل‌ها. با این که این سه فناوری در طی زمان ثابت مانده‌اند؛ اما ابزارها و فریمورک‌های تشکیل دهنده به طور مداوم در حال تغییر هستند. در این بخش نقطه شروعی برای آغاز کاوش اکوسیستم فرانت‌اند به شما ارائه می‌کنیم. ‏🔸 HTML ‏این عبارت اختصاری برای «زبان نشانه‌گذاری ابرمتن» (Hyper Text Markup Language) است که امکان ساختاردهی به اطلاعاتی که برای کاربر نمایش می‌یابد را فراهم می‌سازد. یک سند HTML شامل اجزایی مانند عنوان، پاراگراف متنی یا فیلد ورود متن است که هر یک به وسیله یک تگ HTML نمایش می‌یابند. اسناد HTML می‌توانند با استفاده از هایپرلینک به اسناد دیگری مرتبط شوند. هر تگ نوع محتوای خاص خود را دارد، همچنین ظاهر مشخص و رفتار تعریف شده خاصی برای خود را دارد. زمانی که با HTML آشنا شدید، می‌توانید یک صفحه کاملاً ساده استاتیک HTML بسازید. مطالعه ادامه مطلب 👇👇 ‏🔗 چگونه برنامه نویس وب شویم؟ – بخش اول: فرانت‌اند (FrontEnd) — کلیک کنید (+) 📌 کانال اختصاصی آموزشی طراحی و توسعه وب آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇 @FaraWebDev — مطالب و آموزش‌های طراحی و توسعه وب فرادرس ‌‌ ‌‌‌‌

📣 تمدید مجدد طرح «نذری آموزشی» فرادرس با ۱۰ آموزش جدید 🎁 (۴۵+۱۵+۱۰ = ۷۰ آموزش رایگان) 🟥 آخرین فرصت جهت شرکت در طرح نذری آموزشی فرادرس و استفاده از ۷۰ آموزش رایگان شده در این طرح را از دست ندهید: 🔗 جزئیات طرح نذری آموزشی - [کلیک کنید] 📚 آموزش‌های حوزه «برنامه‌نویسی» که در این طرح، رایگان شده‌اند👇 🔸مبانی برنامه نویسی (الگوریتم و فلوچارت) 🔸برنامه نویسی وب با جی کوئری 🔸طراحی واکنش‌گرا (Responsive) 🔸طراحی وب با HTML - مقدماتی 🔸طراحی وب با CSS - مقدماتی 🔸طراحی وب سایت با Google Sites 🔸برنامه‌نویسی تصویری برای کودکان با زبان اسکرچ (Scratch) 🔸الگوهای طراحی (Design Patterns) در پایتون 🔸مجموعه آموزش‌های برنامه‌نویسی Matlab 🔸پیاده سازی سیستم مدیریت کارمندان با C#‎ 🔸ساخت سایت فروشگاه با ASP. NET 🔸ساخت ربات تلگرام با PHP 🔸طراحی و ساخت شبکه اجتماعی با Java 🔸ساخت اپلیکیشن پرداخت قبوض با Android 🔗 فهرست کامل آموزش‌های رایگان شده - [۷۰ عنوان] 📆 مهلت دریافت: یکشنبه ۳۱ مرداد ۱۴۰۰ @FaraDars - فرادرس

‌ 🔴 تمدید شد؛ ۱۵+۴۵=۶۰ آموزش رایگان ✳️ با اضافه شدن ۱۵ آموزش جدید دیگر، تعداد آموزش‌های رایگان طرح نذری آموزشی فرادرس به ۶۰ عنوان رسید... ✔️ آموزش‌های جدید این طرح - [کلیک کنید] 🔳 در این طرح و تا این لحظه، ۶۰ آموزش تخصصی، دانشگاهی و کاربردی فرادرس به صورت «رایگان» و به مدت محدود ارائه شده است. 🔗 [آموزش‌های رایگان برنامه‌نویسی و طراحی وب] 📚 فهرست ۱۵+۴۰ آموزش رایگان شده - [دریافت نذری] 📆 مهلت دریافت: یکشنبه ۳۱ مرداد ۱۴۰۰ @FaraDars - فرادرس

‌ 🔔 نهمین دوره طرح سراسری «نذری آموزشی‌ فرادرس» آغاز شد. ♦️ «نذری آموزشی فرادرس» همزمان با ماه محرم، طی چندین دوره در سال‌های گذشته در فرادرس برگزار شده است. امسال نیز در طی این طرح، ۴۵ آموزش تخصصی، دانشگاهی و کاربردی فرادرس در قالب طرح نذری آموزشی به صورت «رایگان» در اختیار شما مخاطبین عزیز قرار می‌گیرد. 📚 فهرست ۴۵ آموزش رایگان شده - [کلیک کنید] 📆 مهلت دریافت: یکشنبه ۳۱ مرداد ۱۴۰۰ 👈 با به اشتراک گذاشتن این پست با دوستان و آشنایان خود، آن‌ها را نیز از این فرصت ویژه یادگیری رایگان بهره‌مند کنید.‌‌ 🔗 [جزئیات طرح نذری آموزشی فرادرس] @FaraDars - فرادرس

‏✳️ ‌آموزش 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 — راهنمای کاربردی ‏در بخش قبلی این سری مطالب آموزش HTML در مورد قالب‌بندی پیشرفته متن صحبت کردیم. در این بخش قصد داریم به بررسی سند و ساختار وب سایت در HTML بپردازیم. HTML علاوه بر این که به تعریف اجزای منفرد یک صفحه مانند پاراگراف یا تصویر کمک می‌کند، چند عنصر در سطح بلوک، مانند «هدر» (Header) یا «منوی ناوبری» (Navigation menu) نیز دارد که برای تعریف نواحی مختلف صفحه مورد استفاده قرار می‌گیرند. در این نوشته به بررسی روش طراحی ساختار یک وب‌سایت کوچک می‌پردازیم و کد HTML مورد نیاز برای بازنمایی این ساختار را می‌نویسیم. ══ فهرست مطالب ══ ‏ ○ پیش‌نیازها ‏ ○ بخش‌های ابتدایی یک سند ‏ ○ استفاده از HTML در ساختار وب سایت ‏ ○ توضیح بیشتر عناصر طرح‌بندی HTML ‏ ○ برنامه‌ریزی برای یک وب‌سایت ساده ‏ ○ جمع‌بندی ‏🔸 پیش‌نیازها ‏– سواد مقدماتی HTML که در نوشته «آشنایی مقدماتی با HTML» ارائه شده است. ‏– قالب‌بندی متن که در نوشته «مبانی کار با متن در HTML» معرفی شده است. ‏– روش کار با هایپرلینک‌ها که در نوشته «ایجاد هایپرلینک در HTML» ارائه شده است. ‏هدف از این مقاله یادگیری شیوه سازماندهی سند با استفاده از تگ‌های معناشناختی و روش کار با ساختار یک وب‌سایت ساده است. ‏🔸 بخش‌های ابتدایی یک سند ‏صفحه‌های وب می‌توانند کاملاً متفاوت از همدیگر به نظر برسند و در عمل نیز چنین هستند؛ اما همه آن‌ها دارای اجزای استاندارد مشابهی هستند. به جز در مواردی که صفحه، در حال نمایش یک ویدئو یا بازی تمام صفحه باشد، بخشی از یک پروژه هنری باشد و یا این که ساختاردهی نامناسبی صورت گرفته باشد، در باقی موارد ساختار یک صفحه وب به صورت زیر خواهد بود: ‏هدر به طور معمول یک نوار عریض در بخش فوقانی صفحه است که دارای یک عنوان بزرگ/یا لوگو است. در این بخش اطلاعات رایج اصلی در مورد یک وب‌سایت ارائه می‌شود و عموماً در همه صفحه‌های یک وب‌سایت مشترک است. ‏نوار ناوبری شامل لینک‌هایی به بخش‌های اصلی وب‌سایت است که عموماً با استفاده از دکمه‌های منو، لینک‌ها یا برگه‌ها نمایش می‌یابد. همانند هدر، این محتوا نیز معمولاً در همه صفحه‌های وب‌سایت ثابت است چون داشتن ناوبری ناهماهنگ در صفحه‌های مختلف موجب سردرگمی کاربران می‌شود. بسیاری از طراحان وب‌سایت‌ها، نوار ناوبری را به عنوان بخشی از هدر در نظر می‌گیرند و آن را یک مؤلفه مستقل نمی‌دانند؛ اما این وضعیت یک الزام نیست. در واقع برخی دیگر نیز استدلال می‌کنند که جدا نگه داشتن این دو جزء، موجب دسترس‌پذیری بهتر وب‌سایت می‌شود، زیرا نرم‌افزارهای قرائت صفحه می‌توانند در صورتی که دو ویژگی از هم جدا بشوند آن‌ها را بهتر بخوانند. مطالعه ادامه مطلب 👇👇 ‏🔗 سند و ساختار وب سایت در HTML — راهنمای کاربردی — کلیک کنید (+) 📌 کانال اختصاصی آموزشی طراحی و توسعه وب آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇 @FaraWebDev — مطالب و آموزش‌های طراحی و توسعه وب فرادرس ‌‌ ‌‌‌‌

‌ ⏰ ساعات پایانی را از دست ندهید... 🎉 طرح ۴۰ درصد تخفیف فرادرس برای همه آموزش‌ها 🎁 کد تخفیف: GDR24 ❇️ برای مشاهده فهرست کامل آموزش‌های طراحی سایت به لینک زیر مراجعه کنید👇 🔗 [مجموعه آموزش طراحی سایت] 🔗 جزئیات طرح تخفیف - [کلیک کنید] @FaraDars - فرادرس