<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
    <channel>
        <title>نوشته های نیما حسنی</title>
        <link>https://virgool.io/feed/@pigy3p</link>
        <description>if (You think I&#039;m a Programmer)                                                                                                                             { I&#039;m DotNet Developer }</description>
        <language>fa</language>
        <pubDate>2026-06-17 18:16:23</pubDate>
        <image>
            <url>https://files.virgool.io/upload/users/72655/avatar/vtsYNp.png?height=120&amp;width=120</url>
            <title>نیما حسنی</title>
            <link>https://virgool.io/@pigy3p</link>
        </image>

                    <item>
                <title>آموزش دانلود برنامه تحریم شده از گوگل پلی</title>
                <link>https://virgool.io/WebDeveloper/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%AF%D8%A7%D9%86%D9%84%D9%88%D8%AF-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D8%AA%D8%AD%D8%B1%DB%8C%D9%85-%D8%B4%D8%AF%D9%87-%D8%A7%D8%B2-%DA%AF%D9%88%DA%AF%D9%84-%D9%BE%D9%84%DB%8C-exdrkv3cuzke</link>
                <description>سلامحتما برای شما پیش اومده که تا حالا بخواین برنامه ای از گوگل پلی استور دانلود کنید، اما با این پیغام مواجه بشین: &quot;این برنامه در کشور شما موجود نمی باشد&quot;&amp;quotThis application is not available in your country.&amp;quotیا مثلا برنامه معروف مثل بازی plants vs zombies رو در پلی استور جستجو کنید اما اون رو نبینید.این مشکل به دلیل تحریم بودن اون برنامه هست.برای رفع این مشکل، تحریم گذر VPN به تنهایی نمی تواند رفع اشکال کند و باید راه هایی را برای حل این مسئله طی نمود. 1. روشن کردن حالت هواپیما (airplane mood) 2. پاک کردن همه داده های گوگل پلیوارد تنظیمات گوشی می شوید و از آنجا به بخش مدیریت برنامه ها(که در برخی گوشی ها نام های دیگری دارد) وارد می شوید.سپس بر روی سرویس های گوگل پلی(google play services ) کلیک می کنید. در آنجا روی مدیریت فضا (manage space ) کلیک کنید.حال اینجا بر روی پاک کردن همه داده ها (clear all data ) کلیک کنید.حال به صفحه قبل برگردید و روی پلی استور کلیک کنید و سپس روی clear data بزنید.دقت داشته باشید که همه این کارها رو در حالت هواپیما انجام دهید. حال به اینترنت متصل شوید و حالت هواپیما را خاموش کنید.3. به یک VPN متصل شوید مثل سایـــــــــفون یا  speedify (من نمیتونم لینک دانلود قرار بدهم پس لطفا درخواست نفرمایید.)4. به گوگل پلی وارد شده و از برنامه ها لذت ببرید.ویدیوی همین مطلب : به زودی اگه به کد نیاز و دارید یا سوال شخصی دارید می تونید من رو تو solo-learn دنبال کنید، از همینجا بپرسید یا به من یک ایمیل بزنید == pigy3p@gmail.com</description>
                <category>نیما حسنی</category>
                <author>نیما حسنی</author>
                <pubDate>Sat, 28 Mar 2020 19:55:53 +0430</pubDate>
            </item>
                    <item>
                <title>جی کوئری چیست؟</title>
                <link>https://virgool.io/WebDeveloper/%D8%AC%DB%8C-%DA%A9%D9%88%D8%A6%D8%B1%DB%8C-%DA%86%DB%8C%D8%B3%D8%AA-ldehgrm15tju</link>
                <description>با سلام. قراره در این قسمت به توضیح و بررسی کتابخانه جی کوئری بپردازیم.جی کوئری چیست؟جی کوئری _jQuery_ یک کتابخانه جاوا اسکتریپتی است. این کتابخانه از محبوبترین کتابخانه های جاوا اسکریپتی به شمار می رود. این کتابخانه اولین بار برای رفع باگ های js و ناسازگاری های آن توسط تیم جی کوئری ارائه شد. با آنکه جی کوئری بسیار منعطف بود، همواره از استاندارد های W3C پیروی می کرد تا بهترین سازگاری را با همه مرورگرها داشته باشد. آثار جی کوئریمنظور از تیتر بالا، افزونه ها و فریم ورک هایی هستند که با جی کوئری ساخته شده اند و بسیار پر طرفدارند. چند مورد نام می برم:بوت استرپ : همه یا اکثر سایت استاندارد بر پایه بوت استرپ ساخته شده اند. بوت استرپ یک فریم ورک مشهور css بود. ولی در ورژن ۳ به بعد در آن از جی کوئری استفاده شد و این فریم ورک را قدرتمند ساخت. bootstrap.js از نمونه افتخارات جی کوئری است.جی کوئری cookies : اغلب طراحان برای ذخیره داده ای در مرورگر از کوکی ها استفاده می کنند. ما می توانیم کاری کنیم تا تغییراتی که کاربر در سایت ایجاد می کند در مرورگر ذخیره می شود.  این افزونه کار با کوکی را بسیار راحت می کند.وضع کنونی جی کوئری جی کوئری با هدف رفع باگ های جاوا اسکریپ ساخته شده بود. ولی امروزه با توجه به پیشرفت جاوااسکریپت ، استفاده از جی کوئری کم شده. ولی همچنان فعال است. دلایل مختلفی وجود دارد.بوت استرپافزونه هافریم ورک هامحبوبیتعادتشهرتپس جی کوئری همچنان فعال است. ولی به عنوان یک افزونه کمکی و دم دستی. هرچند که خود من هنوز در پروژه های بسیاری از این فریم ورک استفاده می کنم.اگه به کد نیاز و دارید یا سوال شخصی دارید می تونی من رو تو sololearn دنبال کنید، از همینجا بپرسید یا به من یک ایمیل بزنید == pigy3p@gmail.com </description>
                <category>نیما حسنی</category>
                <author>نیما حسنی</author>
                <pubDate>Thu, 26 Sep 2019 22:06:35 +0330</pubDate>
            </item>
                    <item>
                <title>چگونه برنامه نویس وب شویم؟-قسمت دوم</title>
                <link>https://virgool.io/WebDeveloper/%DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D9%86%D9%88%DB%8C%D8%B3-%D9%88%D8%A8-%D8%B4%D9%88%DB%8C%D9%85-%D9%82%D8%B3%D9%85%D8%AA-%D8%AF%D9%88%D9%85-jnzgxmkvmglg</link>
                <description>سلام. دوباره برگشتم تا مقاله چگونه برنامه نویس وب شویم؟-قسمت اول رو باهم جمع کنیم و به یه جمع بندی کلی برسیم. مرور در قسمت قبل ما درباره تکنولوژی های سمت کاربر و سمت سرور بحث کردیم. به مفهوم UI و UX پی بردیم.با زبان های کدنویسی سمت کاربر نظیر HTML, CSS, JavaScript آشنا شدیم.نکته : فکر کنم در قسمت قبل نگفتم که تمام زبان هایی که گفتم، از زبان های سمت کاربره. ولی هر برنامه نویسی باید اونارو بلد باشه. ولی ...، بزارین آخر سر دلیلشو بهتون بگم.حالا در این قسمت می خواهیم به توضیح زبان های برنامه نویسی سمت سرور بپردازیم و با زبان های برنامه نویسی واقعی آشنا شویم.زبان های سمت سرور چی هستند؟در قسمت قبل گفتم که برنامه نویسی سمت سرور به پردازش و تغییر داده ها در سرور گفته میشه.(سرور که میدوین چیه ? ) با این کار ما می تونیم وبسایت های پویا و داینامیک ایجاد کنیم. وبسایت های داینامیک ویژگی های زیادی دارند نظیر فروشگاه اینترنتی که درگاه خرید دارد، وبسایت های خبری که مدام باید مطلب بروز قرار دهند، یا همین ویرگول خودمون هم داینامیکه چون همه می تونن توش مطلب و نظر بزارن و این تغییر فورا ثبت میشه!پس برنامه نویسی سمت سرور خیلی ضروری و مهمه. با یادگیری این زبان و پایگاه داده(که تو قسمت سوم راجع بهش توضیح می دم.) خب حالا بریم زبان های برنامه نویسی سمت سرور رو تحلیل کنیم.همواره در مسیر وب با دو زبان به نام های ASP و PHP مواجه ایم.زبان اول: ASP.netقطعا همه شما نام این زبان را شنیده اید. ASP.net از چارچوب زبان های .net است مخفف Active Server Pages که توسط مایکروسافت عرضه شده است. چارچوب دات نت چارچوبی است که با استفاده از آن می توان برنامه های زیادی تحت سیستم های گوناگون ساخت. در اصل به تمامی زبان ها برنامه نویسی که مایکروسافت ارائه می دهد چارچوب دات نت می گویند.چارچوب دات نت شامل:VBC#ASP.netADO.netXamarin &amp; ...می شود. حالا ما این وسط با ASP.net کار داریم. از میون تکنولوژی های بالا، C# تحت ویندوز، Xamarin تحت اندروید ASP.net تحت وب هستش. جالبه که بدونید 70 تا 80 درصد این زبان ها با هم یکی هستند چون از یک چارچوب پیروی می کنند.به این نکته اشاره کنم که در واقع ASP.NET یک زبان برنامه نویسی نیست بلکه یک تکنولوژی برنامه نویسی وب با استفاده از دات نت است.دات نت از زبان های بسیار پر قدرت به شمار میره. به طوری که امروزه شرکت های بزرگ همه گی به سمت دات نت کشیده می شوند. و البته خود من :دی.ولی خوب دات نت هزینه های بالایی در هاستینگ داره چون هاستتون باید حتما ویندوز باشه که این هاست به مراتب گرون تره(به زودی یه مقاله در باره هاست و سرور تایپ خواهم کرد)زبان دوم: PHPاین زبان مخفف Hypertext Preprocessor است. یک زبان برنامه نویسی جمع و جور و متن باز. ولی پر قدرت. در حدی که با اون میشه هم تحت ویندوز و هم تحت وب و .. کد زد. شرکت های متوسط و کوچک بیشتر از این زبان برنامه نویسی در دنیا استفاده می  کنند زیرا هزینه توسعه و همچنین هزینه هاستینگی که در اینترنت دارد بسیار ارزان است. اغلب توسعه دهندگان یا فریلنسر های تازه کار هم به این زبان روی می آورند. به دلیل سادگی و ارزانی این زبان در جهان حدود 65 درصد محبوبیت دارد.حالا با کدوم شروع کنم؟ کدوم بهتره؟به هیچ عنوان بصورت کلی نمی توانیم بگوییم فلان چیز خوب است یا فلان چیز بد  است ، برای تعیین خوبی یا بدی چیزی بایستی شما دارای ملاک یا فاکتور باشید.  در غیر اینصورت مقایسه یا انتخاب شما غیرفنی و از روی تعصب یا نادانی  خواهد بود. هرکدوم یک سری خوبی و بدی دارند.پس انتخاب با خودتون. من خودم از .NET استفاده می کنم. ولی شما هرکدومو که دوست دارید.مهم انتخاب زبان نیست، مهم فرو رفتن و غرق شدن در زبان مورد نظر و کدنویسی حرفه ای هستش.نکته: عزیزان من دوتا از رایج ترین هارو گفتم. ولی ما کلی زبان برنامه نویسی تحت وب داریم. همین الان تو گوگل بزنین براتون چند میلیون سایت میاره بالا. شما می تونید زبانی که به سلیقه تون نزدیکتره رو برادرید.امید وارم برنامه نویس های زبان های دیگه ناراحت نشوند.گام آخر: ورود به بازار کارخب حالا دیگه شدین برنامه نویس. شروعش ساده است. یه سایت شخصی بزنید و پروژه بگیرید. اگه زرنگ باشید پول درآوردن راحته. می تونید کارمند بشین و یا یک فریلنسر. بعدش هم مدیر یک شرکت و پروژه های بزرگ و ...موفق و پیروز باشید.خواهشم اینه که غلط املایی ها رو هم ازم بگیرید. چون نمی خوام مطلبم عیب کنه.اگر کد یا مثال لازم دارید یا دنبال آموزش هستید، Nima Hassani رو تو sololearn دنبال کنید، از همینجا بپرسید، یا به این ایمیل: pigy3p@gmail.com ... پیام بدید. موفق باشید.</description>
                <category>نیما حسنی</category>
                <author>نیما حسنی</author>
                <pubDate>Mon, 23 Sep 2019 19:44:07 +0330</pubDate>
            </item>
                    <item>
                <title>چگونه برنامه نویس وب شویم؟-قسمت اول</title>
                <link>https://virgool.io/WebDeveloper/%DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D9%86%D9%88%DB%8C%D8%B3-%D9%88%D8%A8-%D8%B4%D9%88%DB%8C%D9%85-%D9%82%D8%B3%D9%85%D8%AA-%D8%A7%D9%88%D9%84-xotibe1fyymx</link>
                <description>گام اول : آشنایی با اینترنتابتدا باید با وب آشنا شوید و درباره این شبکه وسیع اطلاعات کسب کنید. می تونید این مقاله رو بخونید: معرفی اینترنت و شبکه جهانی وبگام دوم : آشنایی با مفهوم front-end و back-end حتما تا کنون کلمه front-end و back-end را شنیده اید. front-end : به تکنولوژی سمت کاربر گفته میشه. در واقع ظاهر گرافیگی و رابطه ای که بین سایت و کاربر برقرار می شه گفته میشه. در واقع همان چیزی که کاربر و بینده سایت مشاهده می کنه. به اصطلاح به آن تکنولوژی سمت کاربر می گوید و به متخصص آن نیز طراح سایت یا رابط کاربری می گویند. back-end: در واقع برنامه نویسی واقعی از اینجا انجام می شود. در اصل، خدماتی که سایت شما ارائه می کند که نیاز های کاربر را رفع میکند، از اینجا انجام می شود. به عنوان مثال فروش کالا از یک سایت فروشگاهی. این کار با پردازش و تغییر داده ها در سرور انجام می شود. برای همین این تکنولوژی به سمت سرور معروف است. به متخصص آن برنامه نویس وب گفته می شود.در ادامه زبان های مربوط به تکنولوژی را توضیح خواهم داد.گام سوم : آشایی با مفهوم UI و  UX :این دو مفهوم کاملا به کاربر سایت مربوط می شود. UI یعنی آن محیط گرافیکی که کاربر مشاهده می کند که شامل متون، تصاویر، فیلم ها، صوت ها، دکمه ها و... UX یعنی ارتباط احساسی که از طریق UI به کاربر منتقل می شود و باعث می شود کاربر باز هم به آن سایت سر بزند. اغلب طراحان سایت تازه کار با این مقوله مشکل دارند؛ ولی با کسب تجربه، این مشکل خود به خود رفع می شود.گام چهارم: یادگیری HTML تمام محتویات سایت توسط متن ساخته می شد. ولی امروزه با توجه به پیشرفت تکولوژی، می توان با زبان های نشانه گذاری فرامتنی، محتویاتی فراتر از متن در سایت خود قرار داد. از مشهورترین و بهترین و استاندارد ترین زبان های فرامتنی که بهترین پشتیبانی را دارد، زبان HTML است. HTML مخفف Hyper Text Markup Languge به معنای زبان نشانه گذاری فرا متن. چه بخواهید برنامه نویس وب شوید و چه طراح سایت، باید این زبان را بلد باشید. زبان ساده ای است ولی از مهارت های پایه ای و مهم است.گام پنجم : آشنایی با CSS و کتابخانه های کمکی آن :قطعا وقتی وارد سایت شوید، بعد از محتوا، اولین چیزی که شما را به خود جلب می کند، جذابیت های سایت است. محیط گرافیکی سایت و رنگ ها باعث می شود. شما به سایت جلب شوید. باز برمی گردیم به مقوله UX. پس از شروط مهم رضایت کاربر از سایت پس از محتوا، زیبایی گرافیکی سایت است. این ویژگی با استایل دادن به کد های HTML انجام می شود. این کار بر عهده زبان CSS می باشد. پس شما باید حتما با CSS نیز آشنا باشد. CSS مخفف Cascading Style Sheet به معنی کتابخانه استایل دهی آبشاری. در اصل برای ورود به دنیای وب یادگیری HTML, CSS از اصول پایه و مهم است.سی اس اس فریم ورک های فراوانی دارد که برای خلاصه تر شدن کد های css از آنه استفاده می شود. یادگیری برخی از آنها مانند Bootstrap ضروری می باشد. یادگیری برخی دیگر نیز مانند Sass می تواند مفید باشد. گام  ششم: آشنایی و یادگیری هیچکدام از زبان های بالا قدرت برنامه نویسی را ندارند.(چون همه نشانه گذاری اند) گاها پیش می آید که بخواهیم شروطی برای رخ دادن استایل ها در صفحه تعیین کنیم، انیمیشن تعریف کنیم و یا... . css این ویژگی ها را دارد ولی نه به انعطاف JavaScript. جاوا اسکریپت ملقب به JS ، تنها زبان برنامه نویسی سمت کاربر می باشد. این زبان از قوی ترین زبان های برنامه نویسی دنیا نیز به شمار می رود و کتابخانه های فراوانی نیز دارد. جاوا اسکریپت کلی فریم ورک مشهور و پرقدرت دارد. مانند jQuery, ReactJS, Vue و... . همچنین یک سیستم تحت کنسول برای اجرای کدهای جاوا اسکریپت در سطح اینترنت به نام NodeJS نیز ساخته شده است. همچنین فریم ورک های مشهور بسیاری از جاوا اسکریپت استفاده می کنند مانند Bootstrap.js.این قسمت تموم شد. در قسمت بعد به تکنولوژی های سمت سرور و بررسی زبان های PHP و .NET می پردازیم و به یک جمع بندی کلی می رسیم.قسمت دوماگر کد یا مثال لازم دارید یا دنبال آموزش هستید، Nima Hassani رو تو sololearn دنبال کنید، از همینجا بپرسید، یا به این ایمیل: pigy3p@gmail.com ... پیام بدید. موفق باشید. </description>
                <category>نیما حسنی</category>
                <author>نیما حسنی</author>
                <pubDate>Sun, 22 Sep 2019 11:38:34 +0330</pubDate>
            </item>
                    <item>
                <title>معرفی اینترنت و شبکه جهانی وب</title>
                <link>https://virgool.io/WebDeveloper/%D9%85%D8%B9%D8%B1%D9%81%DB%8C-%D8%A7%DB%8C%D9%86%D8%AA%D8%B1%D9%86%D8%AA-%D9%88-%D8%B4%D8%A8%DA%A9%D9%87-%D8%AC%D9%87%D8%A7%D9%86%DB%8C-%D9%88%D8%A8-um6tw27jb7cf</link>
                <description>اینترنت یک کلمه مرکب است و به شبکه وسیع و جهان گستر کامپیوتر ها اشاره می کند که به یکدیگر متصل هستند و قادرند داده و اطلاعات ماهواره ای را در سراسر دنیا با سرعتی نزدیک و به سرعت نور منتقل و دریافت کنند. اینترنت در شکل های گوناگون آن، تقریبا به مدت نیم قرن وجود داشته است؛ یعنی از آن زمان که فقط تعداد کمی از مردم می دانستند چگونه باید ارتباط بین دو کامپیوتر را برقرار کنند. بعد از آن، اینترنت بسیار فراگیر شده است و بسیاری از جنبه های زندگی جدید را تحت تاثیر قرار داده است، به حدی که تصور جهان بدون آن سخت است.شبکه ارتباط جهانی تنها قسمت کوچکی از اینترنت است، درست مانند کشمکشی بی دو همسایه در شهری بسیار بزرگ! شبکه ارتباط جهانی از میلیون ها فایل و سند مستقر بر روی کامپیوتر های مختلف در سراسر اینترنت تشکیل شده است که نشان می دهد به چه دلیل به این نام خوانده می شود.وب در عمر نسبتا کوتاهش، به فراتر از سند های متنی ساده که با آنها شروع به کار کرد، رشد و گسترش یافت و در حال حاضر انواع دیگر اطلاعات را از طریق همان کانال ها حمل می کند: تصویر، ویدیو، صدا و تجربات کاملا تعاملی. اما وب در سطح هسته مرکزی خود، اصولا رسانه ای بر پایۀ متن می باشد. و همین متن است که (معمولا) به صورت HTML (زبان نشانه گذاری فرامتن) کد گذاری می شود.(البته این کار بسیار سریع انجام می شود).تلاش کردم تا بسیار مختصر چکیده ای از دنیای وب را برای افرادی که می خواهد به این عرصه پا بگذارند توضیح دهم. موفق باشید.اگر کد یا مثال لازم دارید یا دنبال آموزش هستید، Nima Hassani رو تو sololearn دنبال کنید، از همینجا بپرسید، یا به این ایمیل: pigy3p@gmail.com ... پیام بدید. موفق باشید.</description>
                <category>نیما حسنی</category>
                <author>نیما حسنی</author>
                <pubDate>Sun, 22 Sep 2019 09:48:26 +0330</pubDate>
            </item>
                    <item>
                <title>آموزش ساخت navbar جلوه دار</title>
                <link>https://virgool.io/@pigy3p/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B3%D8%A7%D8%AE%D8%AA-navbar-%D8%AC%D9%84%D9%88%D9%87-%D8%AF%D8%A7%D8%B1-ybckf3yllx0z</link>
                <description>سلاااااااااااااااااااااااااام پر انرژی به همه شما عزیزان. امیدوارم که حالتون خوب باشه.خب می خوام تو این قسمت با هم nav bar های جلوه دار درست کنیم. یعنی وقتی روی یک دکمه کلیک کردیم، ناوبار به ما نمایش داده شود. البته با جلوه های گوناگونی که با javascript میدهیم.شاید الان متوجه نشید. بزارین کدهارو بهتون بدم، بعد می فهمید مظورمو.اول بیایید کدهای HTML رو بدیم و اسکلت بندی کنیم.&lt;body&gt;
&lt;!-- ایجاد اسکلت منوی ناوبار --&gt;
&lt;div id=&amp;quotmySidenav&amp;quot class=&amp;quotsidenav&amp;quot&gt;
 &lt;a href=&amp;quotvoid(0)&amp;quot  class=&amp;quotclosebtn&amp;quot =&amp;quotcloseNav()&amp;quot&gt;×&lt;/a&gt;
 &lt;a href=&amp;quot#&amp;quot&gt;About&lt;/a&gt;
 &lt;a href=&amp;quot#&amp;quot&gt;Services&lt;/a&gt;
 &lt;a href=&amp;quot#&amp;quot&gt;Clients&lt;/a&gt;
 &lt;a href=&amp;quot#&amp;quot&gt;Contact&lt;/a&gt;
 &lt;/div&gt;

&lt;!-- ایجاد دکمه ای که ناوبار را باز کند --&gt;
&lt;span =&amp;quotopenNav()&amp;quot&gt;open&lt;/span&gt;
 
&lt;!-- محتوییات اصلی سایت که در کنار ناوبار قرار میگیرند را اینجا قرار دهید  --&gt;
&lt;div id=&amp;quotmain&amp;quot&gt;
  ...
&lt;/div&gt;
&lt;/body&gt;
خب این هم از این.بریم سروقت کد های CSS:/* l ایجاد استایل اصلی خود ناوبار */
.sidenav {
  height: 100%; /*  100% Full-height */
  width: 0; /* 0 width - change this  with JavaScript */
  position: fixed; /* Stay in place  */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
     padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
 }

/* لینک های ناوبار ما */
.sidenav a {
  padding: 8px 8px 8px 32px;
     text-decoration: none;
  font-size: 25px;
   color: #818181;
  display: block;
   transition: 0.3s;
}

/* تغییر رنگ لینک ها بر اثر آمدن روی آنها */
.sidenav a:hover {
  color: #f1f1f1;
}

/*  استایل دکمه ضربدر برای بستن ناوبار */
.sidenav .closebtn {
  position:  absolute;
  top: 0;
  right: 25px;
   font-size: 36px;
  margin-left: 50px;
}
 
/* این استایل برای تنظیم سرعت ظهور ناوبار است*/
#main {
  transition: margin-left .5s;
     padding: 20px;
}

/*می خواهیم فاصله و سایز فونت ها در دستگاه های کوچک تر میزان شود */
@media screen and (max-height: 450px) {
  .sidenav  {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
 }خوب اینم تموم شد.نکته: فراموش نکنید که اکثر این کد های CSS الان کار نمی کنند و تغییرات اصلی بعد از دادن کد های js معلوم میشود. فعلا ما هیچ چیز مشاهده نمیکنیم.پس باید کدهای js رو بدیم.اولی: ناوبار بدون جلوه ظاهر شود.//l باز کردن ناوبار
function openNav() {
        document.getElementById(&amp;quotmySidenav&amp;quot).style.display = &amp;quotblock&amp;quot
  }
  //l بستن ناوبار
function closeNav() {
            document.getElementById(&amp;quotmySidenav&amp;quot).style.display = &amp;quotnone&amp;quot
}خب همچین ظاهری در میاد:در این تصویر دکمه زیر ناوبار مخفی شدهدومی: ظاهر کردن ناو با جلوه 1 : اسلایدر:function openNav() {
        document.getElementById(&amp;quotmySidenav&amp;quot).style.width = &amp;quot250px&amp;quot
}
function closeNav() {
        document.getElementById(&amp;quotmySidenav&amp;quot).style.width = &amp;quot0&amp;quot
 }سومی: ظاهر کردن ناو با جلوه 2 : هل دادن محتوا:function openNav() {
document.getElementById(&amp;quotmySidenav&amp;quot).style.width = &amp;quot250px&amp;quot
document.getElementById(&amp;quotmain&amp;quot).style.marginLeft = &amp;quot250px&amp;quot
}
function closeNav() {
document.getElementById(&amp;quotmySidenav&amp;quot).style.width = &amp;quot0&amp;quot
document.getElementById(&amp;quotmain&amp;quot).style.marginLeft= &amp;quot0&amp;quot
}و حاصل اینه: لازم به ذکره که در تصویر اول دکمه زیر ناوبار پنهان شده بود ولی در این تصویر دکمه در کنار ناوبار قرار داره.چهارمی : ظاهر کردن ناو با جلوه 3: تغییر شفافیت و تیره شدن صفحه و ظهور ناوبار:
function  openNav() {
  document.getElementById(&amp;quotmySidenav&amp;quot).style.width  = &amp;quot250px&amp;quot
  document.getElementById(&amp;quotmain&amp;quot).style.marginLeft  = &amp;quot250px&amp;quot
  document.body.style.backgroundColor = &amp;quotrgba(0,0,0,0.4)&amp;quot
}
function closeNav() {
   document.getElementById(&amp;quotmySidenav&amp;quot).style.width = &amp;quot0&amp;quot
   document.getElementById(&amp;quotmain&amp;quot).style.marginLeft = &amp;quot0&amp;quot
  document.body.style.backgroundColor = &amp;quotwhite&amp;quot
}
 البته یادتون نره پس زمینه من به این خاطر زرده که من یه جور دیگه استایل دادم. شما میتونید این استایلو شخصی سازی کنید.پنجمی: ظاهر کردن ناو با جلوه 3: ظهور ناوبار تمام عرض:
function  openNav() {
  document.getElementById(&amp;quotmySidenav&amp;quot).style.width  = &amp;quot100%&amp;quot
}
function closeNav() {
      document.getElementById(&amp;quotmySidenav&amp;quot).style.width = &amp;quot0&amp;quot
}و نتیجه اینه :خوب بالاخره تموم شد. من همه روش ها رو گفتم ولی خودم معولا از چهارمی استفاده می کنم. ولی باز سلیقه خودتونه.اگه مشکلی تو اجرای کد ها داشتین، به من ایمیل بزنین تا فایل فشرده کد هارو براتون بگذارم.موفق باشیییییییییییید .اگر کد یا مثال لازم دارید یا دنبال آموزش هستید، Nima Hassani رو تو sololearn دنبال کنید، از همینجا بپرسید، یا به این ایمیل: pigy3p@gmail.com ... پیام بدید. موفق باشید.</description>
                <category>نیما حسنی</category>
                <author>نیما حسنی</author>
                <pubDate>Fri, 20 Sep 2019 12:53:46 +0430</pubDate>
            </item>
                    <item>
                <title>ایجاد اسلایدر با js</title>
                <link>https://virgool.io/@pigy3p/%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D8%A7%D8%B3%D9%84%D8%A7%DB%8C%D8%AF%D8%B1-%D8%A8%D8%A7-js-zu7skfuksyk7</link>
                <description>سلاااااااااااااااااااااااااااااااااااااااااام پر انرژی. دوباره برگشتم تا با کد هام حالتونو بگیرم :دیمنظورم اینه که یه حالی بهتون بدم.در این مقاله قصد دارم کد جاوا اسکرپتی را که مربوط به ایجاد اسلایدر تصاویر در صفحات وب میشه رو قرار بدم. امیدوارم که بدردتون بخوره.لازم به ذکره که ما از جاوا اسکریپت 8 استفاده میکنیم.خب ، بریم سر وقت کد زنیاول کد های HTML رو مینویسم:&lt;!-- lباکس اصلی اسلایدر ما  --&gt;
&lt;div class=&amp;quotslideshow-container&amp;quot&gt;

  &lt;!-- اسم و آدرس و شماره مربوط به تصاویر --&gt;
  &lt;div class=&amp;quotmySlides fade&amp;quot&gt;
  &lt;div class=&amp;quotnumbertext&amp;quot&gt;1 / 3&lt;/div&gt;
  &lt;img src=&amp;quotآدرس تصویر دلخواه&amp;quot style=&amp;quotwidth:100%&amp;quot&gt;
  &lt;div class=&amp;quottext&amp;quot&gt;تیتر اولt&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class=&amp;quotmySlides fade&amp;quot&gt;
  &lt;div class=&amp;quotnumbertext&amp;quot&gt;2 / 3&lt;/div&gt;
  &lt;img src=&amp;quotآدرس تصویر دلخواه&amp;quot style=&amp;quotwidth:100%&amp;quot&gt;
  &lt;div class=&amp;quottext&amp;quot&gt;تیتر دوم&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class=&amp;quotmySlides fade&amp;quot&gt;
  &lt;div class=&amp;quotnumbertext&amp;quot&gt;3 / 3&lt;/div&gt;
  &lt;img src=&amp;quotآدرس تصویر دلخواه&amp;quot style=&amp;quotwidth:100%&amp;quot&gt;
  &lt;div class=&amp;quottext&amp;quot&gt;تیتر سوم&lt;/div&gt;
  &lt;/div&gt;

  &lt;!-- ایجاد دکمه های قبل و بعد --&gt;
  &lt;a class=&amp;quotprev&amp;quot =&amp;quotplusSlides(-1)&amp;quot&gt;&#10094;&lt;/a&gt;
  &lt;a class=&amp;quotnext&amp;quot =&amp;quotplusSlides(1)&amp;quot&gt;&#10095;&lt;/a&gt;
&lt;/div&gt;
&lt;br&gt;

&lt;!-- دکمه های دایره ای اسلایدر --&gt;
&lt;div style=&amp;quottext-align:center&amp;quot&gt;
  &lt;span class=&amp;quotdot&amp;quot =&amp;quotcurrentSlide(1)&amp;quot&gt;&lt;/span&gt;
  &lt;span class=&amp;quotdot&amp;quot =&amp;quotcurrentSlide(2)&amp;quot&gt;&lt;/span&gt;
  &lt;span class=&amp;quotdot&amp;quot =&amp;quotcurrentSlide(3)&amp;quot&gt;&lt;/span&gt;
&lt;/div&gt;خب کد های بالا فقط اسکلت کار رو درست میکنه. هنوز استایل دهی مو مونده.بریم سر وقت کد های CSS:* {box-sizing:border-box}

/* باکس اصلی اسلایدر */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* پنهان کردن پیش فرض تصاویر */
.mySlides {
  display: none;
}

/* استایل دکمه های قبل و بعد */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* مکان دکمه .next  */
/* دهید .prev  اگر سیستم تان راست چین است، باید این ویژگی را به  */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* تغییرات بر اثر آمدن روی دکمه ها */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* تیتر های تصاویر */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* شماره های تصاویر */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/*دکمه های دایره ای اسلایدر */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* سیستم محو شدن */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
/* یک سری کار مربوط به انیمیشن */
@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}خب اینم از این.نکته: کار بعضی از استایل هارو می تونیم ببینیم. ولی بعضی هاشون بعد از دادن کدهای جاوا اسکریپت مشخص می شوند.و اما کدهای JS :var slideIndex = 1;
showSlides(slideIndex);

// دکمه های قبل و بعد
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// مشخص کردن لینک در تصاویر
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName(&amp;quotmySlides&amp;quot);
  var dots = document.getElementsByClassName(&amp;quotdot&amp;quot);
  if (n &gt; slides.length) {slideIndex = 1}
  if (n &lt; 1) {slideIndex = slides.length}
  for (i = 0; i &lt; slides.length; i++) {
      slides[i].style.display = &amp;quotnone&quot;
  }
  for (i = 0; i &lt; dots.length; i++) {
      dots[i].className = dots[i].className.replace(&amp;quot active&amp;quot, &amp;quot&amp;quot);
  }
  slides[slideIndex-1].style.display = &amp;quotblock&quot;
  dots[slideIndex-1].className += &amp;quot active&quot;
}خدا رو شکر بالاخره تموم شد :دیاگه کد ها مشکلی داشت بگید لطفا. ما رو از نظراتتون دریغ نکنید. ممنون از همتون .............................اگر کد یا مثال لازم دارید یا دنبال آموزش هستید، Nima Hassani رو تو sololearn دنبال کنید، از همینجا بپرسید، یا به این ایمیل: pigy3p@gmail.com ... پیام بدید. موفق باشید.</description>
                <category>نیما حسنی</category>
                <author>نیما حسنی</author>
                <pubDate>Thu, 19 Sep 2019 14:52:35 +0430</pubDate>
            </item>
                    <item>
                <title>آموزش طراحی سایت شرکتی</title>
                <link>https://virgool.io/WebDeveloper/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%B4%D8%B1%DA%A9%D8%AA%DB%8C-leve9iootl4j</link>
                <description>سلاااااااااااااااااااااااااااام پرانرژی به همه شما دوستان عزیز.قصد دارم تا در وبسایت ویرگول یه آموزش برای طراحی واسط کاربری سایت شرکتی رو یاد بدم.(با زبان های زیر:bootstrap 3البته فقط دو زبان اول &quot;HTML, CSS&quot; رو کامل بلد باشین کافیه، با بقیه فقط آشنا باشین و بدونین چی چی هستن.معمولا افرادی که با زبان های فرانت-اند آشنا هستند و یا به تازگی آن ها را یاد گرفتند؛ تو طراحی یه پروژه محور مشکل دارند.ولی من اینجا کمکشون کردمو یه آموزش حرفه ای و Hyper دادم. (لازم به ذکره که دارم از خودم تعریف می کنم :دی)ولی خب من نمیتونم جسارت کنم و بدون اجازه شما عزیزان آموزشی رو تو ویرگول قرار بدم.اگه موافقید نظراتتون رو از زیر همین پست اعلام کنید. امیدوارم دوره ای که میزارم به دردتون بخوره.و امیدوارم که حالتون خوب بمونه.نکته: به امید خدا قراره که قسمت اول شروع بشه. پس این انتشارات رو دنبال کید تا قسمت ها از دستتون در نره. https://virgool.io/WebDeveloper  یا آیدی منو https://virgool.io/@pigy3pموفق و پرانرژی، خدانگه دار (:</description>
                <category>نیما حسنی</category>
                <author>نیما حسنی</author>
                <pubDate>Thu, 19 Sep 2019 11:45:01 +0430</pubDate>
            </item>
                    <item>
                <title>جدید های CSS 3</title>
                <link>https://virgool.io/@pigy3p/%D8%AC%D8%AF%DB%8C%D8%AF-%D9%87%D8%A7%DB%8C-css-3-rtownxheuagq</link>
                <description>به نام خداقطعا هر طراح یا برنامه نویسی css رو میشناسه. به خصوص طراحان واسط کاربری. css یک زبان stylesheet هست که برا استایل دهی به صفحات وب در کنار HTML به کار میره. امروزه فریم ورک های زیاد و محبوبی از css ساخته شدند، نظیر Bootstrap, Less, Sass و... . هدف این مقاله، معرفی CSS نیست. بلکه معرفی تفاوت های جدید اونه. css از اولین ورژن خود در سال 1994 تا به css3 (انتشار در سال 1999) تغییرات زیادی کرد. سپس در سال های بعد، ورژن های تکمیلی به نام css4 منتشر شد.چیزی که مهم است، یادگیری css3 است. در این ورژن ویژگی های عجیب و منعطفی به css اضافه شد.ولی خب در ابتدای انتشار css3 ، پشتیبانی مرورگر ها از آن بسیار پایین بود.  ولی خوشبختانه مرورگرها موفق به پشتیبانی آن شده اند. در ادامه برایتان از ویژگی های css3 خواهم گفت. ولی بگزارید ابتدا به بررسی مقوله پشتیانی مرورگرها بپردازیم. می تونید به سایت www.css3test.com مراجعه کنید.آخرین پشتیبانی مرورگر کروم از css3میتوانید با مرورگر دلخواه به این سایت بروید و مقدار پشتیبانی رو مشاهده کنید.می رسیم به ویژگی های جدید css3 ...این هم یک لیست از property های جدید css:شاید مهمترین این ها باشه:transitiontransformmedia query level 4 , 5اولی: از مهمترین ویژگی هاش تولید زمان برای رویدادهای یک عنصره.دومی: این یکی شامل چند مقدار مهمه :scalerotatetranslateanimateand ...که هرکدوم کارایی خودشونو دارن.مثلا با این کد میشه یک متن بزرگنما شده و مورب ایجاد کرد:HTML Code:&lt;p&gt;This is a simple paragraph&lt;p&gt;CSS Code:p{transform: scale(0.6) rotate(45deg);}
سومی: برای واکنشگرا کردن صفحه استفاده میشه که خیلی مهمه. بوت استرپ به خاطر این ویژگی محبوب شده.متاسفانه css خیلی گسترده تر از این حرفاست که بشه تو یه صفحه مطلب جاش کرد. هدف من فقط معرفی css3 بود و نه چیز دیگه. اگه هر سوالی دارید، بپرسید تا کمکتون کنم. ممنون.اگر کد یا مثال لازم دارید یا دنبال آموزش هستید، Nima Hassani رو تو sololearn دنبال کنید، از همینجا بپرسید، یا به این ایمیل: pigy3p@gmail.com ... پیام بدید. موفق باشید. </description>
                <category>نیما حسنی</category>
                <author>نیما حسنی</author>
                <pubDate>Wed, 18 Sep 2019 17:10:48 +0430</pubDate>
            </item>
            </channel>
</rss>