نوشته های لیلا حسین زاده

تعیین اندازه ویژگی ها در CSS

لیلا حسین زاده — Thu, 23 Sep 2021 00:15:06 +0330

واحد های اندازه گیری CSSویژگی های CSS با واحدهای مختلفی تعریف میشوند مانند اینچ(in) ، سانتی متر(cm) ، پیکسل و هر ویژگی مورد استفاده در CSS دارای یک نوع مقدار است که مجموعه ای از مقادیر مجاز برای آن ویژگی رامشخص میکند. واحدهای اندازه گیری برای بیان یک عنصر یا محتوای آن تعریف میشود.به عنوان مثال برای margin می توان از پیکسل(px) استفاده کرد.{ margin : 10px; }ارتباط بین واحدها و مقادیر اندازه ها در خروجی صفحه نمایش در دستگاهها است و هیچ محدودیتی در استفاده از واحد های اندازه گیری وجود ندارد ، می تواند هرجایی استفاده شود. اگر یک ویژگی با پیکسل تعریف مقدار داده میشود همان ویژگی را می توان با درصد مقدار دهی کنیم.میشود از مقادیر منفی برای بعضی ویژگی ها استفاده کرد، اما توجه داشته باشید که نمی توان بین مقدار و واحد اندازه فضای خالی داشته باشیم مگر برای مقدار صفر(0).{ margin : 0; }{ padding : -5px;} واحد اندازه گیریدو نوع واحد اندازه گیری مطلق و نسبی در CSS داریم: اندازه گیری مطلق (Absolute Lengths): اندازه ثابتی است که برای توصیف مقدار دقیق سایز در صفحه نمایش استفاده میشود. توصیه میشود از Absolute برای سایتهای ریسپانسیو استفاده نشود به دلیل اینکه اندازه دقیق در صفحه نمایش در دستگاههای مختلف متفاوت است .از این واحد می توان در خروجی های مشخص استفاده کرد مانند چاپ. جدول زیر شامل واحدهای اندازه مطلق است:اندازه گیری نسبی (Relative Lengths): این نوع واحد ها برای طراحی های واکنش گرا مناسب هستند به دلیل اینکه می توان مقادیر را نسبت به اندازه صفحه نمایش تعیین کرد و اندازه ها به نسبت مشخص میشوند. بسته به نوع دستگاههای مورد استفاده اگر اندازه صفحه نمایش تفاوت زیادی داشته باشد بهترین حالت استاندارد را بین مدیاهای مختلف تعریف میکند. جدول زیر شامل واحدهای اندازه نسبی است: می توانیم به صورت پیش فرض از Relative Lengths استفاده کنیم برای طراحی سایت های واکنش گرا به دلیل اینکه از بهم ریختگی طرح ها برای اندازه های مختلف صفحه نمایش جلوگیری میکند.اعداد(Number)بعضی از ویژگی ها بدون اینکه واحدی داشته باشند مقداردهی میشوند، مانند opacity که مقدار شفافیت را تعیین میکند، می تواند 0(مات) یا 1(شفاف) باشد.رنگ (Color)راههای مختلفی برای تعیین رنگ ها در CSS وجود دارد.در کامپیوترها سیستم تشخیص استاندارد رنگها 24 بیت است که حدود 16 میلیون رنگ در صفحه نمایش را متمایز میکند. رنگ ها به روش های زیر تعیین می شوند:Hexadecimal Value:نوعی از مقدار دهی رنگها شبیه کدهای هگزادسیمال و هرمقدار را با نماد(#) تعریف میشود. این مقادیر کمی پیچیده هستند و یادگیری آنها آسان نیست. برای مثال رنگ سفید با ffffff# تعریف میشود.RGB and RGBA Value:مقدار RGB شامل سه پارامتر است که مقادیری از رنگهای اصلی (قرمز، سبز، آبی) را میگیرد. تعریف این رنگ (2,121,139)rgb است.همچنین میتوان از RGBA استفاده کرد، مانند rgb است با این تفاوت که با تعریف چهارمین مقدار میزان opacity رنگ را مشخص کنیم.HSL and HSLA Value:HSL شامل یه پارامتر است (hue , saturation , lightness) است که برای تمایز 16 میلیون رنگ استفاده میشود و تعریف آن به این صورت است (%28, %97, 188)hsl.Hue (رنگ): پایه ای ترین حالت رنگ که عددی است بین 0 تا 360 که مقدار رنگ را ارائه می دهد.Saturation (اشباع): مقداریست بین 0 تا 100٪ که 0 یعنی بدون رنگ (یک سایه خاکستری است) و 100٪ اشباع رنگ کامل است.Lightness (وضوح): مقداریست بین 0 تا 100٪ که 0 یعنی کدر (یک زمینه مشکی) و 100٪ شفافیت بالاست (یک زمینه سفید).HSLA هم با گرفتن چهارمین پارامتر مقدار شفافیت رنگ را تعیین میکند.

طراحی با استفاده از گرید(Grid)

لیلا حسین زاده — Tue, 21 Sep 2021 23:00:16 +0330

گرید چیست؟رابط کاربری چیزی است که هر کاربری هنگام دسترسی به سایت با آن تعامل دارد، و عملکرد بالا ، پاسخگو بودن و ظاهر جذاب رابط کاربری برای موفقیت یک وب سایت ضروری است.ابزارهای متعددی وجود دارد که به تعیین چیدمان وب سایت و قرار دادن عناصر UI کمک می کند و بسیار مهم است که ابزار مناسب استفاده شود. در این مطلب قصد داریم تعریفی از ابزار طرح بندی گرید در CSS داشته باشیم.گرید چیست؟گرید یک ابزار قدرتمند است که امکان طرح بندی دوبعدی را فراهم میکند و برای کار بر روی چیدمان عناصر UI و بخش های یک صفحه وب استفاده می شود. استفاده از CSS Grid برای قرار دادن عناصر UI به موقعیت دقیق آنها کمک می کند که برای پیاده سازی طراحی واکنش گرای سایت مفید است. گرید از پیکسل برای ثابت کردن اندازه طرح ها استفاده میکند و به این دلیل به صفحه وب کمک می کند برای اندازه طرح بندی ها در صفحه ی نمایش دستگاه های مختلف مانند تلفن ، تبلت و دسکتاپ . بنابرای گرید نقش مهمی در ایجاد طرح بندی صفحات وب دارد و یک ابزار کلیدی برای ایجاد نرم افزارهای سازگار در دستگاههای متفاوت است. مرورگرهاگرید در همه مرورگرها مانند کروم، فایرفاکس به جز اینترنت اکسپلورر پشتیبانی میشود.ویژگی های گریدثابت بودن و انعطاف پذیری اندازه طرح هاکنترل و ترازبندی طرح هاکنترل محتوای هم پوشانی طرح هایک مثال ساده با استفاده از گریدHTML Code

One

Two

Three

Four

Five

Make a grid container.wrapper {display: grid;}

تعریف ساده هاست و دامنه

لیلا حسین زاده — Thu, 16 Sep 2021 22:45:26 +0430

هاست و دامنه چیست؟هاست(میزبانی وب) و دامنه دو سرویس کاملا متفاوت هستند در حالی که آنها با هم همکاری میکنند تا وب سایت ها را ممکن سازند. هاست محتوای یک سایت را در یک سرور ذخیره میکند و دامنه نام آن را یعنی آدرس هایی که کاربران را برای دسترسی به سایت هدایت میکند را تسهیل میکند.دامنه:دامنه ها میتوانند برای پیدا کردن سایت به کاربران کمک کنند ولی این محتوای سایتی نیست که برای کاربران قابل مشاهده باشد.از نظر فنی دامنه ها IP آدرس ها هستند و درحقیقت اولین دسترسی ها در اینترنت به وسیله IP آدرس ها بود ، IP آدرس ها رشته های طولانی اعداد هستند که برای کاربران نامفهوم است. پس دامنه نام ثبت شده سایت است که برای آسان تر کردن جستجوی کاربران به جای IP آدرس ها استفاده میشود. دامنه ها میتوانند شامل کلمه هایی باشند که به خاطر سپردن آن برای کاربر راحت باشد.هاست و دامنههاست :هاست مکان یا یک حساب کاربری سرور است که محتوای سایت مانند تصاویر ، متن و فیلم ها را نمایش میدهد و مانند خانه وب سایت شماست واصولا آدرسی که کاربران برای دسترسی به سایت استفاده میکنند ارائه نمیکند.وقتی که ما یک هاست را خریداری میکنیم به این معنی است که محلی را بری نمایش محتوای خود در اینترنت خریداری کردیم.ارتباط هاست و دامنه:بدون نام دامنه ، افراد نمی توانند وب سایت را پیدا کنند و بدون هاست شما نمی توانید یک وب سایت بسازید و محتوا را نمایش دهید. (Domain Name System)DNS سیستمی است که کار ترجمه نام آدرس به IP آدرس انجام میدهد و همچنین شامل فایل هایی است برای ارسال درخواست های دیگر .‌ DNS نام دامنه را از هاست جدا میکند و معولا توسط شرکت های ثبت کننده هاست و دامنه ارائه می شود.

فرانت اند در چند دقیقه

لیلا حسین زاده — Mon, 13 Sep 2021 13:31:06 +0430

فرانت اند چیست؟تا به حال فکر کرده اید به اینکه پشت سایت هایی که استفاده میکنیم چیست و مسئولیت آن بر عهده کیست؟! هر وب سایت توسعه دهنده ای دارد که قسمت ظاهری سایت را که فرانت اند می نامند می سازد. فرانت اند شامل دوبخش طراحی و کد نویسی است، بخش طراحی یا UI (user interface) که با نرم افزار های گرافیکی مثل فتوشاپ، فیگما طراحی و بخش کد نویسی که با استفاده از زبان های برنامه نویسی تحت وب نوشته میشود.تعریف فرانت اندفرانت اند یک رابط گرافیکی سمت کاربر هست که استفاده از کامپیوتر را راحت تر میکند و در طراحی سایت به قسمت های قابل مشاهده مثل صفحات، فرم های اطلاعات، تصاویرو..بخش فرانت اند طراحی سایت گفته میشود.زبان های مورد استفاده در طراحی سایتیک توسعه دهنده فرانت اند فایل طراحی را می خواند و آن را تبدیل به کد معتبر HTML ، CSS و JavaScript می کند. هنگامی که به یک سایت می روید ، مرورگر وب کدهای معتبر را ارائه می دهد. HTML ، CSS و جاوا اسکریپت سه زبان اصلی برنامه نویسی هستند که برای ساخت ظاهر یک وب سایت استفاده می شود.اچ تی ام ال(HTML)اولین مورد شروع بخش فرانت اند، یادگیری HTML (hypertext markup language) هست که یک زبان نشانه گذاری استاندارد ، شامل تگ های باز و بسته که برای طراحی ابتدایی وب استفاده میشود.سی اس اس(CSS)برای ظاهرجذاب و بهترسایت استفاده ازCSS (stand for cascading style) ضروریست که زبانی توصیفی برای استایل المان های HTML و چگونگی نمایش آنهاست.جاوا اسکریپت(JavaScript)برای تعامل سایت با کاربر ازJavaScript استفاده می کنیم. جاوا اسکریپت زبان برنامه ‌نویسی پویا است که هم سمت کاربر و هم سمت سرور، برای ایجاد تعامل با صفحات وب استفاده میشود. بعد از HTML و CSS که ساختار اولیه و ظاهر صفحات وب را تعیین می‌کنند، نحوه عملکرد صفحات وب را کنترل می‌کند وصفحه وب رو از یک صفحه استاتیک به یک صفحه داینامیک تبدیل میکند یعنی، جاوا اسکریپت به صفحات وب رفتارمیدهد ، مثل نمایش انیمیشن ، نمایش و پنهان کردن مطالب با یه کلیک .فریمورک و کتابخانه های فرانت اندکتابخانه یک قطعه کد است که در ابتدای برنامه قرار میگیرد وقابلیت استفاده مجدد دارد و می تواند شامل توابع و اشیا زبان تشکیل آن باشد . فریمورک اصطلاحا به یک چارچوب نرم افزاری که مجموعه ای از برنامه های از پیش تعریف شده است و شامل چندین کتابخانه است گفته میشود.بوت استرپ(Bootstrap)بوت استرپ یکی از فریمورک هایی است که برای تولید المان های مورد نیاز طراحی وب، ریسپانسیو سایت و mobile-first استفاده می شود و شامل دستورات HTML، CSS و JavaScript است.ریکت(React)ریکت یکی از کتابخانه های جاوا اسکریپت است که برای ساخت وب اپلیکیشن ها استفاده می شود و با استفاده از آن تغییر داده ها بدون نیاز به بارگذاری مجدد صفحه صورت می گیرد و تعاملی کردن رابط کاربری را تسریع میدهد.آنگولار(Angular)آنگولار از فریمورک هایopen-sours جاوا اسکریپت است که در وب اپلیکیشن ها بسیار کاربرد داردو برای ایجاد صفحات تک صفحه ای کاربرد دارد.ویو(Vue.js)ویو یکی دیگر از فریمورک های جاوا اسکریپت است که برای ساخت وب اپلیکیشن کاربرد دارد و با استفاده از آن اپلیکیشن های تک صفحه ای می توان ساخت.در آخرمسئولیت اصلی توسعه دهنده فرانت اند ایجاد یک تجربه کاربری کاربردی است که کاربران باید بتوانند به راحتی در یک سایت حرکت کرده و پاسخ هایی را که به دنبال آن بودند دریافت کنند و نباید در روند کار دچار خطا یا ناسازگاری شوند.