https://virgool.ir/feed/@hamed.kh61fa2026-11-11 23:05:21https://files.virgool.ir/upload/users/1494395/avatar/moGlfx.jpeghttps://virgool.ir/@hamed.kh61https://virgool.ir/@hamed.kh61/آشنایی-با-واحدهای-اندازه-گیری-در-سی-اس-اس-css-units-vxhdeccoox9qبرای ویژگی های سی اس اسی همچون width ، height ، padding ، margin ، font-size و… بایستی از CSS Units یا واحدهای اندازه گیری تعریف شده در زبان CSS استفاده نماییم.در زبان CSS بطور کلی ۲ نوع واحد اندازه گیری وجود دارد که عبارتند از :واحدهای اندازه گیری مطلق یا Absoluteواحدهای اندازه گیری نسبی یا Relative واحدهای اندازه گیری مطلق یا Absolute :واحدهای مطلق واحد هایی می باشند که اندازه آنها در هر حالتی ثابت باقی خواهد ماند. و در تمامی حالت های مختلف صفحات وبسایت، همواره مقدار خود را حفظ می کنند.سانتی متر(Cm)، میلی متر(mm) و اینچ (in)اینها اندازه های رایج می باشند ( 1in = 2.54 cm = 25.4 mm )پیکسل (PX)اندازه پیکسل ها در دستگاه و سیستم های مختلف، می تواند تفاوت داشته باشد، اما CSS این مشکل را با در نظر گرفتن اندازه یک پیکسل در دستگاهی با تراکم پیکسل 96DPI (نقطه در اینچ) برطرف نمود.( 1px = 1/96th of 1in یا 96 پیکسل در 1 اینچ )نقطه (PT)واحد نقطه، ثابت و نامتغیر می باشد و در تمامی دستگاه ها به یک اندازه ظاهر می‌گردد. تنها تفاوت واحد نقطه و پیکسل، در اندازه آنها می باشد.(1pt = 1/72 of 1in یا 72 نقطه در 1 اینچ)پیکا (Pc)واحد پیکا نسبت به pt و px کمتر استفاده می شود. ( 1pc = 12 pt یا 1 پیکا برابر است با 12 نقطه)پس به طور خلاصه خواهیم داشت : 1in = 2.54 cm = 25.4 mm = 96 px = 72 pt = 6 pc واحدهای اندازه گیری نسبی یا Relative :واحد های وابسته، واحد هایی می باشند که اندازه ی ثابتی ندارند و بر اساس اندازه های دیگر در صفحه وبسایت مورد تعریف قرار می گیرند.به عبارت دیگر مقادیر نسبی به چیز دیگری در عناصر والد وابسته هستند، مثل فونت یا اندازه محدوده دید (viewport).درصد (%)درصد عمومی ترین واحد وابسته ای است که در CSS مورد استفاده قرار می‌گیرد. و واحد درصد به اندازه عنصر پدر خود وابسته است. به این ترتیب که اگر عرض عنصر را برابر با %10 قرار دهیم، این مقدار %10 از اندازه عرض عنصر پدر خواهد بود.واحد emاین واحد، تغییرات خودش را بر حسب سایز فونت عنصر پدر انجام می‌دهد. فونت ها می‌توانند سایز های متفاوتی داشته باشند. عملکرد واحد em، همواره به صورت شاخصی از سایز فونت عنصر پدر می باشد.واحد remعملکرد این واحد، همانند واحد em می باشد. فقط با این تفاوت که از سایز فونت عنصر پدر متاثر نمی شود، بلکه از سایز فونت خود عنصر Html تاثیر می گیرد. بر اساس همین دلیل، به این واحد rem یا  root em(مرتبط به عنصر ریشه وبسایت یا html) گفته می‌شود.واحد های ch و exواحدهای ex و ch همانند دو واحد em و rem به فونت و اندازهٔ فونت سایت وابسته‌اند اما بر خلاف em و rem، این دو همچنین به font-family نیز وابسته‌اند چرا که اندازه‌های آن‌ها برای هر فونت خاصی متفاوت خواهد بود. واحد ex بر اساس اندازه ارتفاع کاراکتر x (کوچک) در فونتی که برای عنصر مورد استفاده قرار میگیرد مشخص می شود.واحد ch بر اساس اندازه عرض کاراکتر 0 (صفر) در فونتی که برای عنصر مورد استفاده قرار میگیرد مشخص می شود.واحدهای محدوده دید (viewport)واحدهای نسبی دارد که وابسته به محدوده‌ی دیدی (اندازه) که مرورگرها در اختیار کاربر قرار می‌دهد هستند. در دستگاه‌های مختلف مانند تلفن همراه، تبلت، و مانیتور ما اندازه‌های متفاوتی از محدوده دید داریم که در هریک بر حسب اندازه محدوده دید، مقیاس عناصر مشخص می‌شود.واحد‌های viewport برابر هستند با: vw, vh, vmin, vmaxیک vw برابر است با یک صدم عرض پنجرهیک vh برابر است با یک صدم طول پنجرهواحد vmin یک صدم viewport طول و عرض است که از میان آنها کوچکتر را انتخاب می کند. برای مثال اگر viewport برابر (850x650) باشد، 1vmin برابر با 6.5px خواهد بود.واحد vmax یک صدم viewport طول و عرض است که از میان آنها بزرگتر انتخاب می‌کند. برای مثال اگر viewport برابر (850x650) باشد، 1vmax برابر با 8.5px خواهد بود.حامد خیراللهیحامد خیراللهیThu, 17 Feb 2022 16:20:35 +0330https://virgool.ir/@hamed.kh61/آشنایی-با-فلکس-باکس-flexbox-asoxl1gr5xbc ماژول flexbox یا همان CSS Flexbox Layout Module یکی از موار بسیار کاربردی است که برای حل مشکلات فراوانی که در چینش المان ها در ورژن های قبلی CSS وجود داشت به ورژن CSS3 اضافه شد. قبل از روی کار آمادن flexbox از ویژگی float برای چینش المان ها در کنار هم استفاده می شد که با افزایش تعداد المان ها مخصوصا تگ های تو در تو کار با ویژگی float نیز سخت می شد.قبل از ماژول Flexbox ، چهار حالت برای چیدمان المان ها وجود داشت :Block, برای بخش های یک صفحه وب Inline, برای متن ها Table, برای داده های جدول دو بعدیPositioned, برای موقعیت صریح یک عنصر در واقع فلکس باکس درطراحی‌ صفحات واکنش‌گرا یا همان Responsive کارایی زیادی دارد، چرا که با چیدن آیتم‌ ها (Flex Item) درون یک سطر یا ستون در قالب نگه‌ دارنده (Flex Container)، به طور خودکار عناصر طراحی را با اندازه‌ی صفحه منطبق کرده و مشکلاتی مانند Float یا Whitespace را برطرف می‌کند. از کاربری های FlexBox می‌توان به طراحی راحت چند سطری و یا چند ستونی صفحات وب اشاره کرد.از مزایای استفاده از flexbox در css می توان به موارد زیر اشاره کرد:به کمک ویژگی flex در css قراردادن المان‌ ها کنار یکدیگر در یک ردیف بدون نیاز به تعیین اندازه‌ دقیق پهنا و هم‌ تراز سازی نسبت به المان نگهدارنده امکان پذیر است.با استفاده از display flex در css تغییر ترتیب المان‌ها به آسانی امکان‌ پذیر است.اگر برای عنصر هایی که در یک خط قرار گرفتن جای کافی نباشد به راحتی به کمک مقدار flex-wrap در css عنصر آخر به صورت خودکار در ردیف بعد قرار می‌ گیرد.تعیین اندازه‌ی یک المان نسبت به اندازه‌ی المان نگهدارنده به‌صورت واکنش‌ گرا ممکن است.به کمک مقادیر مرتبط با ویژگی Flex پشتیبانی از چیدمان معکوس نیز امکان پذیر است. برای آشنایی بیشتر با قابلیت ها و ویژگی های فلکس باکس می توانید به سایت www.flexbox.help مراجعه نمائید.حامد خیراللهیحامد خیراللهیMon, 14 Feb 2022 21:34:05 +0330https://virgool.ir/@hamed.kh61/هاست-و-دامین-چیست-imd2fw7lejewهمه وب سایت ها از google ، Instagram گرفته تا سایت های فروشگاهی ، شخصی و ... در دو چیز مشترک هستند. آدرس سایت که ما بهش دامنه یا دامین (Domain) می گوئیم و دیگری فضایی که اطلاعات سایت بر روی آن قرار می گیرد که سرور و در (Server) مقیاس کوچکتر هاست (Host) نامیده می شود.دامنه (Domain) چیست؟دامنه، نامی است که وب‌سایت از طریق آن قابل دستیابی خواهد بود. به عبارت دیگر، آدرس وب‌ سایت که کاربر برای مشاهده سایت، آن را در نوار مرورگر خود وارد می‌کنند.  به‌طور کلی دامنه از دو بخش نام و پسوند تشکیل می‌شود.پسوند :پسوندها توسط كمیته مخصوص تایید و تصویب پسوندها یعنی ICANN تایید می شوند. این پسوندها از نظر فنی Top Level Domain یا به اختصار TLD هستند كه می توان آنها را در3 دسته كلی به ترتیب زیر تقسیم بندی نمود :پسوندهای عمومی (Generic Top-Level Domains)پسوند ها عمومی برای ثبت و استفاده عموم و هر نوع كاربری مجاز (قانونی) قابل استفاده می باشند.پسوندهای اختصاصی (Sponsored Top-Level Domains)افراد و سازمان‌هایی با مشخصات و فعالیت‌های خاص می‌توانند بر روی این پسوندها اقدام به ثبت دامنه کنند. هنگام ثبت و در مدت استفاده از پسوندهای اختصاصی، رعایت قوانین خاص اجباری است.پسوندهای ملی (Country Code Top-Level Domains)علاوه بر پسوندهای عمومی و خاص ، كشورهای مختلف نیز می توانند اقدام به درخواست پسوند با كد اختصاری كشور خود، که کدی است دو حرفی (مانند ir برای ایران) نمایند. اداره این پسوندها، قوانین و نحوه تخصیص آنها در اختیار دولت ها یا مراكز معرفی شده توسط مراجع رسمی هر كشور خواهد بود. به طور مثال برای دامین های ir. مرجع رسمی سازمان فیزیک نظری ایران است. که این پژوهشگاه اولین سازمان دولتی در ایران است که به شبکه اینترنت متصل شد. همچنین سال‌ها بعد پروژهٔ ثبت دامنه‌های ‎.ir را با همت سیاوش شهشهانی راه‌اندازی کرد. ایرنیک (IRNIC) مرکز ثبت دامنه‌های مرتبه‌اول کشوری نقطه-آی‌آر (‎.ir) و نقطه-ایران (.ایران) می باشد.انواع پسوندهای دامنه در کشورهای مختلفهر کشوری دارای انواع پسوند دامنه می‌باشد که ساکنان آن کشور جهت ساخت و ایجاد سایت‌های محلی و بین‌المللی از آن‌ها استفاده می‌کنند. این پسوندها معمولا دو حرفی بوده و مخفف نام همان کشور هستند.هاست (Host) چیست؟میزان فضای مشخصی است که می‌توان در آن انواع داده‌ها و اطلاعات را ذخیره کرد. به بیان دیگر فضایی است که اطلاعات هر سایت بر روی آن قرار می‌گیرد. شامل صفحات وب‌سایت، تصاویر، فایل‌های CSS، جاوا اسکریپت و ... می باشد.هاست‌ها بر روی سرورهای خاصی نگهداری می‌شوند که بر اساس دو نوع سیستم عامل ویندوز و لینوکس کار می‌کنند. به عبارتی هاست ویندوز بر روی سرورهایی با سیستم عامل ویندوز، کاربرد دارد. و هاست لینوکس بر روی سرورهایی با سیستم عامل لینوکس، به کار گرفته می‌شوند.از ویژگی‌های یک هاست خوب می توان به سرعت بارگذاری بالا ، منابع مناسب (RAM و CPU) ، هارد سرور سریع ، امنیت بالا ، بکاپ‌گیری‌ منظم از هاست ، پهنای باند مناسب و فضای ذخیره سازی لازم و ... اشاره کرد.حامد خیراللهیحامد خیراللهیWed, 09 Feb 2022 23:20:27 +0330https://virgool.ir/@hamed.kh61/فرانت-اند-front-end-چیست-egojcynbonvcابتدا باید به معنای واژه Front در لغت‌نامه مراجعه کنیم. Front: پیش، جلو، جلودار، به طرف جلو، روبروفرانت اند یا Front-End، به بخش قابل مشاهده‌ی یک وب سایت یا نرم افزار توسط کاربران می‌گویند. در این بخش، فرم‌های ورودی اطلاعات، صداها، تصاویر، ویدئوها و به صورت کلی هر چیز دیگری که برای کاربر قابل درک باشد، قرار می‌گیرد.فرانت اند به دو بخش طراحی و توسعه رابط کاربری تقسیم می‌شود.بخش طراحی، طراحان با نرم افزارهای گرافیکی مانند فتوشاپ، ادوبی ایکس دی، فیگما و… ظاهر سایت را طراحی می‌کنند.بخش توسعه‌ی رابط کاربری، مربوط به پیاده سازی ظاهر سایت در قالب کدهای HTML ،CSS و JavaScript است.زبان‌های برنامه نویسی Front end کدامند؟سه زبان مهم و اصلی که برای هر برنامه نویس فرانت اند واجب هستند، HTML و CSS و جاوا اسکریپت می‌باشد.زبان HTML (مخفف عبارت Hyper Text Markup Language) یک زبان برنامه نویسی نیست بلکه یک زبان نشانه گذاری است که به عنوان هسته و بدنه اصلی صفحات وب به حساب می‌آید.زبان CSS (مخفف عبارت Cascading Style Sheets)زبان CSS به منظور استایل دهی به اجزای مختلف صفحات وب سایت مانند متن، تصویر، کادرها و… ساخته شده است.زبان برنامه نویسی Javascriptاین زبان برنامه نویسی در سمت کاربر پردازش می‌شود. برنامه نویس فرانت اند به کمک Javascript می‌تواند به پویانمایی صفحاتی که با HTML و CSS طراحی کرده است بپردازد. در حقیقت، شما با کمک جاوا اسکریپت می‌توانید به صفحات طراحی شده جان ببخشید.یک برنامه نویسی فرانت اند به چه مهارت هایی نیاز دارد؟در این بخش مهارت‌هایی را بررسی کنیم که برای توسعه‌ی بخش فرانت‌ اند نیاز است.یادگیری زبان‌های برنامه نویسی HTML ،CSS و جاوا اسکریپتمرحله اول تبدیل شدن یک توسعه دهنده Front-End باید بتوانید به صورت حرفه‌ای با HTML ، CSS و JavaScript کدنویسی کنید.آشنایی با کتابخانه‌ها و فریمورک‌های فرانت اند Javascript فریمورک‌های جاوا اسکریپت امکانات بسیار زیاد و پیشرفته‌ای را در اختیار طراحان فرانت اند قرار می‌دهند. از جمله این فریمورک‌ها می‌توان به Vu.js، Angular و… اشاره کرد.آشنایی با اصول طراحی واکنش‌گراتوسعه دهنده‌ی فرانت اند باید به خوبی نیازهای کاربران را بشناسد. او باید بتواند رابط کاربری یک اپلیکیشن را به گونه‌ای طراحی کند که کاربران بهترین تجربه را حین استفاده از آن به دست آورند.یادگیری نرم افزارهای گرافیکی آشنایی حداقلی با نرم افزارهای گرافیکی مانند Adobe xd، Figma و… جهت پیاده سازی طرح با زبان های برنامه نویسی، البته قابل ذکر است که طراحی رابط کاربری وظیفه طراح فرانت اند می باشد.حامد خیراللهیحامد خیراللهیMon, 07 Feb 2022 16:12:00 +0330