نوشته های سحر ابراهیمی

چه چیزی در Bootstrap 5 جدید است؟

سحر ابراهیمی — Mon, 22 Feb 2021 23:38:55 +0330

تیم Bootstrap نسخه 5 این فریم ورک محبوب رو در حالت Beta منتشر کرده است و دنبال کنندگان آن می توانند حالا از نسخه های قدیمی تر به نسخه نهایی مهاجرت کنند. سوالی که پیش می آید این است که تفاوت نسخه جدید با نسخه قبلی چیست؟پیش از تمامی مواردی که در این نسخه تغییر یافته است، باید به تغییر لوگوی Bootstrap به شکل ابتدای مقاله اشاره کنیم.1-استفاده از Vanilla JavaScript به جای JQueryدر گذشته Bootstrap از JQuery بعنوان یک dependency برای ارائه امکاناتی مانند منو، carousel و dropdown و .. استفاده می کرد. این امر برای برنامه نویسانی که از تکنولوژی های جدید طراحی رابط کاربری مانند React و ... استفاده می کردند امر ناخوشایندی بود و الان این مساله در نسخه 5 فریم ورک برطرف شده است. این به این معنی نیست که Bootstrap 5 به جاوااسکریپت نیاز ندارد بلکه به این معنی است که به جای JQuery برای قسمت های Dynamic از Vanilla JS استفاده شده است.2- پشتیبانی از IE ورژن های 10 و 11 حذف شده است.با ظهور مرورگر Edge و فراهم کردن نمایش های بهتر و صحیح تر از گرافیک وب سایت ها و همچنین سرعت محو شدن استفاده از آن، حالا دیگر می توان امکانات بسیار خوب و کاملی که در آخرین ورژن های chrome و firefox وجود دارد را در این مرورگر مشاهده نمود. تیم بوت استرپ تصمیم گرفت تا حمایت از نسخه های قدیمی IE را حذف کند که این امکان را فراهم کرده تا بتواند از تکنولوژی های جدید جاوا اسکریپت و CSS در نسخه آخر خود بهره بگیرد.3- امکان Customize کردن CSSبا حذف پشتیبانی از IE حالا امکان Custom کردن کدهای CSS با variable براحتی فراهم شده است.table { --bs-table-bg: #{$table-bg}; --bs-table-accent-bg: transparent; --bs-table-striped-color: #{$table-striped-color}; --bs-table-striped-bg: #{$table-striped-bg}; --bs-table-active-color: #{$table-active-color}; --bs-table-active-bg: #{$table-active-bg}; --bs-table-hover-color: #{$table-hover-color}; --bs-table-hover-bg: #{$table-hover-bg}; // Styles here... } 4- پالت رنگ گستردهشما براحتی می توانید پالت رنگی خودتان را با این پالت رنگی جایگزین کنید. همچنین استفاده از این پالت رنگی بسیار راحت می باشد، برای مثال برای استفاده از طیف های مختلف رنگ آبی به صورت زیر رنگ ها صدا زده می شود. $blue-200 و $blue-300 و ....5- نمایش فرم ها بروز شده است.در نسخه قبلی فرم ها به همان شکلی که مرورگر به صورت پیش فرض ارائه می داد نمایش داده می شود. به همین جهت در مرورگرهای مختلف فرمها نمایش های متفاوتی داشتند. در نسخه جدید نمایش custom برای فرمه ها در نظر گرفته شده است و شما می توانید در تمامی مرورگرها نمایش ثابتی از فرم های خود داشته باشید.6- وجود Utilities APIشما براحتی می توانید با استفاده از SASS کلاس های مورد نظر خودتان رو بسازید یا کلاس های موجود رو overwrite کنید."width": ( property: width, class: w, values: ( 25: 25%, 50: 50%, 75: 75%, 100: 100%, auto: auto ) ),می توانید pseudo class استفاده کنید.$utilities: ( "opacity": ( property: opacity, class: opacity, state: hover, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) );خروجی به شکل زیر خواهد بود..opacity-0-hover:hover { opacity: 0; } .opacity-25-hover:hover { opacity: .25; } .opacity-50-hover:hover { opacity: .5; } .opacity-75-hover:hover { opacity: .75; } .opacity-100-hover:hover { opacity: 1; }7- سیستم grid پیشرفتهبا حفظ سیستم گرید موجود در نسخه 4 ، بوت استرپ گرید خودش را پیشرفته تر کرده است و با کمترین تغییرات می توان به سیستم جدید مهاجرت کرد.برخی امکانات به شرح زیر است:اضافه شدن Break Point جدید xxlاضافه شدن کلاس های Gutterلایه های فرم ها با سیستم جدید جایگزین شده اند.برای فاصله های عمودی کلاس هایی تعریف شده است.ستون ها دیگر به صورت پیش فرض نسبی هستند.8- پشتیبانی از RTLدر این نسخه به صورت Built-in بوت استرپ از زبان های راست به چپ پشتیبانی می کند و براحتی می توان از کلاس های خودش استفاده کرد.9- امکان ویرایش بوت استرپ و قرار دادن تم های مختلفدر این نسخه امکان قرار دادن تم های اختصاصی و اختصاصی سازی راحت تر شده است.10- تغییر data attrبوت استرپ برای کنترل رفتارهای جاوا اسکریپت از HTML استفاده می کند بنابراین با توجه به این امر که در نسخه 5، data attr از data-* به data-bs-* تغییر کرده است. شما نیاز دارید که در مهاجرت این قسمت ها را جایگزین کنید.11- استفاده از Popper.js ورژن 2در بوت استرپ tooltip ها و popover ها از Popper.js استفاده می کنند در ورژن دوم این کتابخانه offset ها حذف شده است و بوت استرپ نیز با استفاده از ورژن 2 این امکان را استفاده کرده و نمایش را بهبود بخشیده است.12- کتابخانه آیکن هابوت استرپ فاقد library برای آیکن های مختص خودش بود و همواره استفاده کنندگان ناچار به استفاده از آیکن های منابع مختلف بودند. در این نسخه کتابخانه ای از آیکن های SVG در نسخه اولیه و کتابخانه ای از فونت آیکن ها در نسخه stable ارائه شده است که شامل بیش از 1000 آیکن می باشد.13- مستندات بهترمستندات نحوه استفاده از بوت استرپ 5 بهبود یافته است و امکان وجود یک منوی expanded در ستون چپ رجوع به کتابخانه و کامپوننت ها را راحت کرده است.منبع https://getbootstrap.com/

متریال دیزاین لایت رقیب جدی بوت استرپ

سحر ابراهیمی — Mon, 30 Dec 2019 09:10:21 +0330

از زمانی که شرکت گوگل سبک طراحی متریال دیزاین را همراه با اندورید 5 عرضه کرد تعداد زیادی کتابخانه و فریم ورک فرانت اند برای ترویج مفهوم متریال دیزاین منتشر شده اند.MUI، MATERIAL UI و POLYMER کتابخانه هایی هستند که حول مفهوم وب کامپوننت طراحی و تولید شده اند. در اوایل جولای 2015 گوگل فریم ورک خود را با نام Material Design Lite معرفی کردکه به نظر می رسد رقیبی جدی برای فریم ورک محبوب بوت استرپ باشد ولی کدام فریم ورک کارایی بهتری دارد؟ و چه تفاوت هایی با هم دارند؟بیاید در ابتدا نگاهی به تفاوت های این دو فریم ورک از لحاظ فلسفه شکل گیری، ساختار، طراحی و جامعه آماری بیاندازیم:فلسفهفریم ورک بوت استرپ توسط توییتر و با هدف ایجاد وب سایت های واکنش گرا تولید شدکه کامپونت ها و کلاس های زیادی را برای ایجاد وب سایت در اختیار برنامه نویس قرار می دهد. متریال دیزاین لایت توسط گوگل منتشر شد که هدف از تولید آن گسترش مفهوم متریال دیزاین است در واقع متریال دیزاین لایت نسخه مستند و علمی طراحی فلت است، فراموش نکنید متریال دیزاین لایت تنها ساختار پایه را برای ایجاد اپلیکیشن های متریال در اختیار برنامه نویس قرار می دهد و مابقی کارها بر عهده ی دولوپر است.شبکه بندیبوت استرپ الگوی ساختاربندی پیشرفته ای دارد وجود افست ها، ستون های تودر تو و نیز قابلیت مخفی کردن ستونها ویژگی هایی است که بوت استرپ را از لحاظ ساختاری از دیگر فریم ورک ها متمایز می کند درحالی که متریال دیزاین لایت شبکه بندی ابتدایی تری نسبت به بوت استرپ دارد اگرچه این ساختار نیز در اکثر موارد درست کار می کند اما از ویژگی های پیشرفته پشتیبانی نمی کند.طراحیبا این که بوت استرپ به صورت پیش فرض تعداد زیادی آپشن برای طراحی در اختیار شما قرار می دهد ولی ممکن است دیدن این نوع طراحی برای شما تکراری و خسته کننده شده باشد هم چنین به یاد داشته باشید همواره می توانید از قالب های بسیار زیبای موجود هم استفاده کنید، متریال دیزاین لایت فریم ورک جدیدی است و از انیمیشن ها و رنگ های زیبایی در طراحی استفاده می کند در واقع اصول طراحی متریال دیزاین بر مبنای حرکت و جلب توجه بیننده می باشد.جامعه آماریبوت استرپ جامعه آماری بزرگی دارد که باعث شده پلاگین، قالب و پست های زیادی در فروم های مختلف در مورد آن ایجاد شود، در مورد محبوبیت متریال دیزاین لایت اما نمی توان نظر قطعی داد زیرا زمان زیادی از انتشار نمی گذرد ولی در همین مدت کوتاه نیز متریال دیزاین لایت درGithub بسیارمعروف شده است. در ادامه ویژگی های طراحی و ساختاری هر دو فریم ورک را بررسی می کنیم.شبکه بندیشبکه بندی یا گرید مهم ترین بخش در طراحی وب سایت های مدرن است که این امکان را به شما می دهد وب سایتتان برای عرض های مخلتف از اسمارت فون ها تا صفحه نمایش های بزرگ دستکتاپ قابل نمایش باشد. گرید در بوت استرپ، صفحه را به 12 ستون مساوی تقسیم می کند که برحسب عرض صفحه نمایش می توان از کلاس های مختلفی برای شبکه بندی استفاده کرد. کلاس xs برای صفحه نمایش هایی با عرض کمتر از 768 پیکسل کلاسsm برای عرض های بین 768 تا 992 پیکسل کلاس md برای صفحه نمایش های با عرض 992 تا 1200 پیکسل در نهایت کلاس lgبرای عرضهای بزرگتر از 1200 پیکسل متریال دیزاین لایت ساختار مشابهی برای گرید دارد با این تفاوت که تنها از سه سایز 0 تا 480 پیکسل برای گوشی های موبایل، 480 تا 840 پیکسل برای تبلت و سایز بزرگتر از 840 پیکسل برای دسکتاپ ها را پشتیبانی می کند. گرید درمتریال دیزاین لایت شامل 12ستون برای دسکتاپ، 8 ستون برای تبلت و 4 ستون برای اسمارت فون هاست.هدر(ناوبری)هدر در بوت استرپ Navbars نامیده می شود که در سایز موبایل این هدر تبدیل به منوی collapsed می شود و برای اسکرین های بزرگتر هدر به شکل افقی نمایش داده می شود هم چنین با استفاده از کلاس های کمکی بوت استرپ می توانید المنت های بیشتری برای هدر خود ایجاد کنید.در متریال دیزاین لایت اما هدر شامل یک منوی collapsed است که بعد از یک منوی همبرگری قرار می گیرد و با زیاد شدن عرض صفحه بزرگ می شود.فوتردر واقع بوت استرپ هیچ کامپوننت جداگانه ای برای فوتر ندارد در حالیکه متریال دیزاین لایت دو آپشن برای این منظور در اختیار ما قرار می دهد، یکی mini footer و دیگریMega footer. منوهر دو فریم ورکsyntax مشابهی برای ایجاد منوها دارند هم چنین هردو فریم ورک برای این منظور به کتابخانه جاوااسکریپت نیاز دارند.دکمه هابه طور پیش فرض دکمه ها در بوت استرپ به شکل مستطیلی و در سایزهای مختلفی طراحی شده اند برای ترکیب بندی رنگ نیز می توانید از کلاس های پیش فرض خود بوت استرپ استفاده کنید یا با استفاده از css رنگ مورد نظر خود را به دکمه اضافه کنید. قابلیت دیگر بوت استرپ دکمه های دوبخشی مجزا هستند که نیمی از آن دکمه و نیمه ی دیگر آن منوی کشویی است. متریال دیزاین لایت دکمه ها را از نظر ظاهری هم به صورت مستطیلی و هم به صورت دایره ای پیشنهاد می دهد. گوگل در این لینک چگونگی استفاده از دکمه ها را در موقعیت های مختلف به شما توضیح می دهد به علاوه تمام دکمه ها از خاصیت Ripple animation پشتیبانی می کنند.6.جداول به طورکلی ریسپانسیو کردن جدول ها کارآسانی نیست ولی بوت استرپ این مشکل را با قرار دادن یک اسکرول بار برای صفحه هایی با سایز کوچک به خوبی حل کرده است این در حالی است که متریال دیزاین لایت هنوز برای این بخش راه حلی ارایه نداده است اما استایل های زیبایی ارایه کرده است که باعث می شود جداول از لحاظ ظاهری بسیار زیبا شود. هم چنین بوت استرپ امکان ایجاد جداول را به صورت استریپ، فشرده وbordered نیز فراهم کرده است.فرم هافرم ها در بوت استرپ تعداد زیادی از المنت های ورودی را ساپورت می کند و نیز کلاس های متفاوتی برای شکل ظاهری فرم ها در اختیار ما قرار می دهد ولی هیچ امکانی برای اعتبار سنجی فرم ها ندارد و برای این منظور ناچار به استفاده از کتابخانه های جاوااسکریپت مانند parsley هستیم در حالیکه متریال دیزاین لایت تعداد کمی از المنت های ورودی را ساپورت می کند درعوض به المنت ها انیمیشن اضافه می کند که کار با فرم ها را بسیار خوشایند می کند همچنین الگویی برای اعتبار سنجی فرم ها دارد که خطاها را نمایش می دهد و هنگام تولید خطا به رنگ قرمز درمیاید.منوهای کشوییطراحی منوهای کشویی در هر دو فریم ورک تقریبا مشابه هستند، یک دکمه یا یک المنت برایtoggle کردن محتوا به همراه یک لیست کشویی، نکته مثبت در فریم ورک بوت استرپ وجود یک خط جداکننده در منو است که می توان از این خط برای هدر یا دکمه های مجزا استفاده کرد این ویژگی در سمت چپ تصویر زیر نشان داده شده است. نکته قوت طراحی منوها در متریال دیزاین لایت استفاده از انیمیشن ها وtransition های بسیار زیباست .Tooltipsبوت استرپ برای tooltip ها دو کامپوننت دراختیار ما می گذارد یکی simplified tooltip و دیگری که در واقع کاستوم شده ی کامپوننت قبلی است، شامل یک popover به همراه فضایی برای نوشتن عنوان است. متریال دیزاین لایت یک مدل متفاوت برای tooltip ها دارد یک دکمه برای toggle شدن به همراه یک فضای کوچک برای نوشتن محتوا. Tooltipها در متریال دیزاین لایت در دوسایز کوچک و بزرگ طراحی شده اند، تنها نکته ی منفی این طراحی این است که همان طورکه در تصویر زیر نشان داده شده است بخش محتوا در قسمت پایینی دکمه نشان داده می شود.10.آیکون ها بوت استرپ از آیکون هایGlyphicon استفاده می کند که بیشتر از 250 آیکون زیبا در اختیار ما قرار می دهد این آیکون ها در فایل css بوت استرپ قرار گرفته اند و برای استفاده از این آیکون ها نیاز به هیچ کار اضافه ی دیگری ندارید. متریال دیزاین لایت از متریال آیکون ها استفاده می کند، material Iconها توسط گوگل منتشر شده است که شامل 800 آیکون زیبا است، این آیکون ها در متریال دیزاین لایت قرار داده نشده اند بنابراین برای استفاده از آنها باید لینک زیر را در قسمت هدر کد خود وارد کنید.جمع بندیحالا که با ویژگی های هر دو فریم ورک آشنا شدید زمان آن رسیده که فریم ورک محبوب خود را انتخاب کنید این نکته را فراموش نکنید که هنوز زمان زیادی از انتشار فریم ورک متریال دیزاین لایت نگذشته است ولی همین که توسط شرکت گوگل منتشر شده است این اطمینان را به شما می دهد که همواره از آخرین تغییرات طراحی متریال پشتیبانی می کند متریال دیزاین لایت افکت های زیبایی دارد، بسیار به انیمشین‌ها اهمیت می‌دهد و سایه‌ها در طراحی المان ها بسیار مهم است. ولی اگر متریال دیزاین برای شما خوشایند نیست از بوت استرپ استفاده کنید که جامعه آماری بزرگی دارد به علاوه آموزش های خوبی نیز برای آن تولید شده که به شما این امکان را می دهدبه آسانی کدهای موردنیاز خود را از مثال های بسیار زیاد موجود کپی و در کد خود از آنها استفاده کنید.

آشنایی با استایلوس

سحر ابراهیمی — Mon, 30 Dec 2019 09:02:21 +0330

امروزه در جوامع توسعه وب دو پیش پردازنده CSS محبوبیت بسیاری را در بین کاربران و طراحان سایت کسب کرده اند همانطور که با نام آنها آشنا هستید این دو پیش پردازنده Sass و Less هستند.همچنین پیش پردازنده سوم دیگری پا به عرصه نهاده که استایلوس نام دارد. بنا به دلایل زیر استایلوس نسبت به دو پیش پردازنده دیگر برتری دارد:از آنجا که اساس استایلوس NodeJS است دیگر نیازی به اضافه کردن تکنولوژی دیگری نیست.استایلوس یک Api از نوع جاوااسکریپت ایجاد میکند که میتواند عمل پردازش را بصورت سفارشی انجام دهد.استایلوس به براکت ، دونقطه و سمیکالن نیاز ندارد.در واقع نحوه کار آن مبتنی بر فاصله است.با این حال اگر شما هر یک از این علائم را استفاده کنید باز هم استایلوس بدرستی و بدون هیچ خطایی کار میکند.یک جز اضافی و کتابخانه Mixin وجود دارد که Nib نامیده میشود.استایلوس توانایی ایجاد یک پیش پردازنده استاندارد CSS را دارد که از جمله توانایی های آن میتوان به گسترش کلاس ها ، ایجاد Mixin ها (توابع) ، تعریف و تغییر متغیر و همچنین ویژگی های پیشرفته بسیاری اشاره کرد. حال به سراغ بررسی اصول اولیه استایلوس و برنامه نویسی CSS میرویم.نصب استایلوس و پردازش CSSاستایلوس یک پروژه اوپن سورس است که روی گیت هاب قرار گرفته در نتیجه شما میتوانید آن را با استفاده از این منبع و یا با استفاده از NPM به راحتی نصب کنید:فایلهای CSS استایلوس با پسوند styl. ذخیره میشوند و میتوانند در هر نقطه از پروژه قرار بگیرند. این فایلها هیچ پیکربندی خاصی نیاز ندارند. کدهای این فایلها به آسانی اجرا میشوند و در نهایت کد CSS بعنوان خروجی تولید میکنند:همانطور که شما در بالا متوجه شدید فرمان کامپایل فایل استایلوس (main.styl) به فایل CSS یک فایل با همین نام با پسوند CSS. را در خروجی تولید میکند. در صورتی که شما ترجیح دهید فایل خود را بصورت غیردستی پردازش کنید میتوانید از گزینه watch-- استفاده کنید:همچنین گزینه های دیگری در استایلوس وجود دارد که از آن جمله میتوان به تبدیل فایل استایلوس به CSS ، مقایسه ورودی و خروجی و... اشاره نمود.اصول پایه ای استایلوساصول استایلوس خیلی خیلی شبیه به دیگر پیش پردازنده های CSS است.اما در اینجا بعضی از آیتم های آن را با هم بررسی و مرور خواهیم کرد:کد بالا تمامی قابلیتهای استایلوس رو یکجا نشان میدهد و شما تنها با خواندن کامنتهای هر قسمت متوجه چگونگی عملکرد آن قسمت می شوید.برای مثال در آخرین بخش extend@ تمامی ویژگیهای کلاس .noticeblock را به کلاس .warning اختصاص میدهد و یا همانطور که می دانید ویژگی import@ کلیه استایلهای موجود در فایل link.styl را درون فایل استایل اصلی پیاده میکند.ویژگیهایی از قبیل عدم براکت ، سمیکالن و دونقطه که در دیگر پیش پردازنده های CSS سازگار هستند در استایلوس نیز سازگار هستند . ایجاد Mixin و استفاده از آن Mixinها بنا به دلایل بسیاری در پیش پردازنده های CSS فوق العاده مفید هستند.در واقع با استفاده از آنها میتوان بصورت کاملا منطقی کدهای CSS را تولید و سازماندهی کرد. در استایلوس استفاده از Mixin ها بسیار آسان است و نحوه استفاده از آنها همانگونه است که در دو پیش پردازنده دیگر بوده است. در واقع روند کار آنها بدین گونه است که باعث سهولت در استفاده از کدهایی میشود که نیاز به پیشوند مرورگرها دارند و این امکان را به شما میدهد که بتوانید مجموعه ای از دستورات CSS را که قرار است در جاهای زیادی استفاده شوند را از قبل آماده کنید و در جای دیگر آنها را با یک خط کد بوسیله include@ پیاده سازی کنید.همانطور که در بالا میبینید نحوه استفاده از Mixin ها به شما نشان داده شده است. همچنین در زیر به شما نشان خواهیم داد که مقادیر پیش فرض هم میتوان به هر یک از ویژگی ها اختصاص داد:همچنین در زیر خواهید دید که Mixinها میتوانند بوسیله کلمه کلیدی return یک مقدار را برگردانند یا استایلهای تعریف شده بین Mixinها به سادگی بر روی المان ها اعمال میشوند.و البته در Mixin ها میتوانید از شرطها و حلقه ها نیز استفاده کنید:مثال بالا یک مثال انعطاف پذیر از Mixin است که نحوه استفاده از شرطها ، حلقه ها و return را به شما نشان میدهد. اگر با دو پیش پردازنده CSS کمی آشنایی داشته باشید مطالب بالا را به آسانی درک خواهید کرد چرا که تفاوت چندانی بین این سه پیش پردازنده وجود ندارد.در واقع هدف از استفاده هر یک از اینها خلاصه کردن استایلها و کاهش پیچیدگی آنهاست.برای مطالعه بیشتر به لینک زیر مراجعه فرمایید:http://stylus-lang.com/

حرکت در اتوبان سرعت با Emmet

سحر ابراهیمی — Sat, 28 Dec 2019 11:14:19 +0330

Emmet یک پلاگین رایگان و کارآمد برای ادیتورهای متن است که به شما کمک می‌کند تا چندین برابر سرعت کد نویسی خود را بالا ببرید.در این مقاله سعی‌ می‌کنیم تا به طور خلاصه و مفید تمام ویژگیهای این پلاگین رو به همراه شیوه ی نصب و روش اختصار نویسی براتون توضیح بدیم. همان طور که گفتیم Emmet یک ابزار بسیار مفید برای توسعه دهنده هاست که با آن به راحتی‌ و بازدن tab یا ctrl+E به مجموعه ایی از کدهای از پیش تعریف شده دسترسی پیدا می کنند.شما می توانید به راحتی این پلاگین را بر روی اکثر ادیتورهای متن مثل ، Eclipse ، SublimeText ، Dreamweaver ، TextMate و... نصب کنید.Emmet چگونه کار می کند:در واقع از ساختاری مانند سلکتورهای css استفاده می کندو شما تنها حالت خلاصه شده ی آن را می نویسید، موس را در انتهای خط قرار میدهید و tab می زنید.برای مثال نوشتن a و زدن تب ، خروجی زیر را نمایش خواهد داد:یک میانبر دیگر که بسیار مورد استفاده است ایجاد متن آزمایشی ست پس کافییست Lorem را در در تگ مورد نظر بنویسد و tab بزنید در اینحا به طور خلاصه به لیستی از عملگرهای پشتیبانی شده در Emmet میپردازیم.تگ های div-P- spanتگ ها به همراه آیدی: div#header, E#idتگ ها به همراه کلاس : div.container, aside.sidebarتگ های فرزند : div.header>div.main>.postلیست آیتم ها : li*5شماره گذاری آیتم ها:li.item$*5و...برخی میانبرهای مفید HTMLدر Emmet میانبرهای بسیار زیادی برای HTML وجود دارد که در زیر به چندتا از پر کاربرد ترین آنها اَشاره میکنیم:! or html:5script:srcstylelink:faviconlink:rssa:linkimg...خلاصه نویسی در CSSاز emmet همچنین می توانید در کوتاه نویسی کد های css هم کمک بگیریدمثلا :Bd به شما خروجی border را خواهد داد و bl:10 برابر border-left: 10px;و اگر هم خواستید چندین value به طور همزمان استفاده کنید بین انها خط تیره قرار دهید. مثلا m10-20 برابر خواهد بود با margin: 10px 20px;برای مقادیر منفی هم بدین صورت عمل کنید : m-10--20که برابر خواهد بود با :margin: -10px -20px;

چگونه بهترین فرمت برای ذخیره سازی تصویر را انتخاب کنیم؟

سحر ابراهیمی — Sat, 28 Dec 2019 11:09:12 +0330

فرمت‌های بسیاری برای تصاویر وجود دارد که هر کدام ویژگی‌ها و کاربرد متفاوتی دارند. اینکه کدام فرمت برای استفاده در چه زمینه‌ای مناسب است، از طریق آزمون و خطا و طی تجربه به دست می‌آید. با این وجود می‌توانیم با توجه به ویژگی‌هایی مثل میزان حجم، کیفیت و الگوریتم‌های فشرده‌سازی فرمت تصویر مناسب برای سایت خود را پیدا کنیم.در این مطلب سعی داریم فرمت‌های مختلف تصویر و ویژگی های هر کدام را بررسی کنیم. همچنین در مورد فرمت های نسل جدیدی مثل webP و JPEG-XR صحبت خواهیم کرد که از الگوریتم‌های بهینه تری برای فشرده سازی تصاویر استفاده می‌کنند.فرمت تصویر JPEGفرمت JPEG یا همان Joint Photographic Experts Group از سال 1992 توسط همین گروه معرفی شده و یکی از محبوب‌ترین فرمت هایی است که تا به ‌حال وجود داشته است. در این فرمت، تصاویر ابتدا به بلوک‌های پیکسلی 8*8 تقسیم می‌شوند. سپس هر بلوک به صورت مقادیری از رنگ‌های R،GوB لیست شده و نقطه های پی در پی و متوالی را در فضا ترسیم می‌کند. همین ویژگی باعث می‌شود تا JPG برای فشرده سازی عکس‌های پیوسته خوب عمل کند. فرمت JPEG برای تصاویری که تعداد رنگ بالایی دارند، مناسب است. اما بهتر است برای تصاویری که لبه‌های تیز دارند از این فرمت استفاده نکنید. در چنین عکس‌هایی در اطراف لبه های تیز و جزئیات دقیق تصویر، حلقه های محوی دیده خواهند شد که چشم بیننده را اذیت می‌کند. ذخیره کردن تصاویر با این فرمت همواره با افت کیفیت همراه است. حتی اگر یک تصویر JPG را چند بار ذخیره و سپس دوباره همان فایل را باز نمایید، باز هم در هر مرحله قدری از کیفیت تصویر کم خواهد شد.فرمت تصویر GIFGIF مخفف عبارت Graphic Interchange Format است. این فرمت حداکثر از 256 رنگ پشتیبانی می‌کند. اگر تعداد رنگ‌های یک تصویر بیشتر از این مقدار باشد، باید تعداد رنگ های آن کاهش یابد که همین موضوع باعث افت کیفیت تصاویر می‌شود. GIF فرمت مناسبی برای تصاویر عکاسی نیست.GIF از الگوریتم LZW برای فشرده سازی تصاویراستفاده می‌کند. عملکرد این الگوریتم ساده تر از فرآیندی است که در فرمت JPEG انجام می‌شود. الگوریتم LZW ابتدا کل عکس را اسکن می‌کند و برای بخش‌هایی که تکرار شده‌اند کدهای خاصی را در نظر می‌گیرد. در واقع فرمت GIF برای تصاویری مناسب است که بخش بزرگی از داده های آن تکراری اند. برای نمایش تصاویری که تعداد رنگ کمتری دارند و یا اینکه انتقال رنگ بین بلوک های ان تیز و محسوس‌اند، بهتر است از این فرمت استفاده کنید. انیمیشن و شفافیت یکی از مزایای استفاده از فرمت تصویری GIF است."دو فرمت تصویری GIF و JPEG عملکرد متقابلی با هم دارند و مکمل یکدیگرند. "فرمت تصویر PNGPNG علاوه بر ویژگی‌های تصاویر GIF مزایای دیگری نیز دارد. این فرمت از تعداد رنگ بالاتری پشتیبانی می‌کند و در فشرده‌سازی تصاویر تیز و لبه دار بهتر عمل می‌کند.الگوریتم PNG تلاش می‌کند مقدار زیادی از داده‌هایی موردنیاز را با پیش بینی پیکسل‌ها کاهش دهد. در این فرمت فرض بر این است که پیکسل‌های نزدیک به هم، شبیه همند و به جای اینکه یک داده را دوبار ذخیره کند، پیکسل های متوالی را یکسان در نظر می‌گیرد. PNG تصاویر را با استفاده از روش فشرده سازی lossless ذخیره سازی می کند. به این معنی که هیچ اطلاعاتی در روند ذخیره سازی فایل ها از دست نمی رود. استفاده از کد هافمن در این فرمت باعث شده تا خطای فشرده سازی مطرح نبوده و افت کیفیتی وجود نداشته باشد. حجم بالای تصاویر PNG به دلیل همین روش فشرده سازی است.اگر می‌خواهید تصویری را بدون افت کیفیت آن ذخیره کنید، از فرمت PNG استفاده نمایید. این تصاویر برای الگوهایی که دقیقا تکرار می‌شوند، مناسب ترند.نسل جدید فرمت‌های ذخیره‌سازی تصاویرسه فرمت JPEG ، GIF و PNG محبوب‌ترین گزینه‌های پیش روی توسعه دهندگان هستند. با این وجود انواع جدیدی نیز مطرح شده است که قابلیت های بیشتری را به فرمت های قبلی می‌افزاید. دو فرمت تصویری WEBP و JPEG-XR را می‌توان برای این دسته بندی مثال زد.فرمت تصویری WEBPWebP فرمت تصویری است که گوگل با قابلیت فشرده‌سازی بیشتری نسبت به فرمت‌های JPEG و PNG ارائه نموده است. فرمت webP می‌تواند تصویر را بدون افت کیفیت تا 45 درصد بیشتر فشرده کند. متاسفانه فقط مرورگر کروم از این فرمت پشتیبانی می‌کند و همین باعث شده تا طرفداران کمی پیدا کند.فرمت تصویری JPEG-XRtvاین نسل از فرمت های تصویری توسط شرکت مایکروسافت معرفی شده است. این فرمت سازگاری بیشتری نسبت به WebP دارد و خطای فشرده سازی در آن به حداقل رسیده است. البته JPEG-XR هم فعلا توسط مایکروسافت اج پشتیبانی می‌شود.چگونه از فرمت های نسل جدید برای طراحی‌های خود استفاده کنیم؟خوشبختانه HTML 5 به توسعه دهندگان اجازه می‌دهد تا یک عکس را با فرمت‌های مختلفی برای مرورگر تعریف کنند تا یکی را به انتخاب خود بارگزاری نماید.سایت cloudinary یک سرویس مناسب برای CDN عکس، ویدئو و انواع فایل سایت است. با استفاده از این سرویس می‌توانید خیلی راحت با اضافه کردن چند کاراکتر به ادرس های اینترنتی خود، تصاویر پویا و داینامیک به دست آورید.برای مثال عبارت f_auto را به آدرس اینترنتی Cloudinary اضافه کنید تا خیلی راحت سازگاری و انعطاف پذیری مورد نظر خود در تصاویر را بیابید. در واقع کاربران با درخواست منابع تصویر به سرورها می‌گویند که کدام فرمت‌ها توسط سیستم‌شان پشتیبانی می‌شود. یک سرور هوشمند می‌تواند کاربران مختلف را براساس اطلاعاتی که از درخواست‌هایشان جمع آوری کرده، به منابع مختلف هدایت کند.با اضافه کردن عبارت q_auto به آدرس اینترنتی، Cloudinary بطور اتوماتیک تشخیص خواهد داد که کدام فرمت برای کدام کاربر خوب است و همچنین تنظیمات فشرده سازی مخصوص برای هر تصویر خاص را پیاده‌سازی خواهد کرد. Cloudinary سرویس خوبی برای آپلود عکس و فایل‌هایی است که قرار است در سایت شما دیده شوند.منبع: webdesignerdepot

رهایی از دردسر Prefix ها در CSS

سحر ابراهیمی — Wed, 25 Dec 2019 09:20:09 +0330

یکی از آزاردهنده ترین مسائل CSS و CSS3 نوشتن کدهای استایل به گونه ای است که در تمامی مرورگرها نمایش یکسانی فراهم شود. این امر به وسیله نوشتن prefix ها برای مرورگرهای مختلف فراهم شده است. اما گاهی پیش می آید که prefix های یک مرورگر از قلم بیفتد و یا prefix نوشتته شده به صورت تکراری مورد استفاده قرار گیرد.راهکار بسیار ساده‌ایی برای رهایی از نوشتن Prefixها در CSS وجود دارد، به این صورت که ما کد استاندارد را مینویسیم، و کد مخصوص مرورگرهای مختلف را بوسیله برنامه Autoprefixer تولید میکنیم.پکیج AutoprefixerAutoprefixer یک پکیج در زبان Nodejs است که میتوان به صورت‌های مختلفی از آن استفاده کرد. این پکیج به همراه پکیج PostCSS کار میکند.با استفاده از این پکیج کد زیر:به صورت زیر کامپایل میشود:خوبی این پکیج این است که از اطلاعات صحیح سایت caniuse استفاده میکند. همچنین میتواند کدهای اضافی که نوشتیم را نیز حذف کند. برای مثال در کد زیر پیشوند webkit لازم نیست.بنابراین، پکیج Autoprefixer آن را حذف خواهد کرد.استفاده در خط فرمانبرای استفاده از این پکیج در خط فرمان ابتدا باید زبان Nodejs نصب شده باشد. سپس با استفاده از کد زیر برنامه Autoprefixer نصب خواهد شد.استفاده با Gulp (بهترین راه‌حل)در پست قبلی با Gulp آشنا شدید.برای استفاده از Gulp بعد از نصب آن باید پکیج‌های gulp-postcss و gulp-sourcemaps و autoprefixer-core را نصب کنید. سپس میتوانید از آن استفاده کنید. کد زیر نمونه‌ایی است که خود پکیج Autoprefixer مثال زده است.

JSON چیست

سحر ابراهیمی — Tue, 24 Dec 2019 09:01:59 +0330

جی‌سان یا JSON (JavaScript Object Notation) یک فرمت تبادل داده سبک (lightweight) می‌باشد که خواندن و نوشتن آن برای انسان و تولید و پارس کردن آن برای ماشین‌ها آسان است. این زبان بر مبنای یک زیر مجموعه از زبان برنامه‌نویسی JavaScript ، استاندارد ECMA-262 ویرایش سوم - دسامبر 1999‌، است. JSON بصورت متنی (text) بوده و کاملاً مستقل از زبان بکار رفته است، اما از قوانینی استفاده می‌کند که برای برنامه‌نویسان زبان‌های خانواده C (شامل C ، C++ ، Java ، JavaScript ، Perl ، Python ، و بسیاری زبان‌های دیگر) آشنا می‌باشد.‌ این خصوصیات JSON را یک زبان تبادل‌داده‌ای ایده‌آل کرده است.JSON بر اساس دو ساختار ساخته شده:یک مجموعه از زوج‌های نام/ارزش (name/value). در زبان‌های گوناگون این ساختار یک شیء (object) ، ساختار (struct) ، دیکشنری (dictionary) ، جدول مخلوط (hash table) ، لیست کلیددار (keyed list) یا آرایه انجمنی (associative array) شناخته می‌شود. • یک لیست منظم از ارزش‌ها. در بسیاری از زبان‌ها این ساختار یک آرایه ( array) ، بردار (vector) ، لیست (list) ، یا دنباله (sequence) شناخته می‌شود.اینها ساختار داده‌های عمومی هستند. همه زبان‌های برنامه‌نویسی مدرن یکی از آنها را پشتیبانی می‌کنند. منطقی است که یک فرمت داده قابل استفاده توسط زبان‌های برنامه‌نویسی مختلف بر مبنای این ساختارها باشد.در JSON از فرم‌های زیر استفاده می‌شود:یک شیء (object) یک مجموعه نامنظم از زوج‌های نام/ارزش است. یک object‌ با { (آکولاد باز) شروع، و با } (آکولاد بسته) تمام می‌شود. در انتهای هر نام یک : (دو نقطه) قرار می‌گیرد و زوج‌های نام/ارزش با , (ویرگول) جدا می‌شوند.یک array یک مجموعه (collection) منظم از ارزش‌ > (value) ها است. یک array با [ (براکت باز) شروع، و با > ] (براکت بسته) تمام می‌شود. ارزش‌ها توسط , (ویرگول) از هم جدا می‌شوند.یک value می‌تواند یک رشته (string) داخل " ، یا یک عدد ، یا true یا false یا null ، یا یک object یا یک array باشد. این ساختارها می‌توانند تو در تو باشند.یک string یک مجموعه از صفر یا بیشتر کاراکترهای یونیکد (Unicode) است، که با استفاده از backslash escapes داخل " قرار گرفته. یک کاراکتر به صورت یک رشته تک کاراکتری نمایش داده می‌شود. رشته بسیار شبیه رشته در C یا Java است.عدد (number) بسیار شبیه عدد در C یا Java است، به استثنا اینکه از فرمت‌های دهدهی و هگزادسیمال استفاده نمی‌شود.فضای خالی (Whitespace) ما بین هر جفت از نشانه‌ها (token) می‌تواند قرار گیرد. به جز تعدادی از جزییات رمزگذاری‌ها (encoding detail) که زبان را شرح می‌دهند.برای یادگیری و مطالعه بیشتر می توانید به لینک زیر مراجعه نمایید.http://www.w3schools.com/json/default.asp

اپلیکیشن Native یا Hybrid

سحر ابراهیمی — Tue, 24 Dec 2019 08:52:08 +0330

امروزه تمایل به استفاده از اپلیکیشن های موبایل در بین کاربران موبایل های هوشمند بسیار زیاد شده و به دنبال رفع این نیاز برنامه نویسان و توسعه دهندگان وب نیز همسو و همگام با جریان به وجود آمده به منظور ارائه نرم افزار مورد نیاز کاربران قدم برداشته اند.اما همواره این سوال مطرح می شود که نوشتن اپلیکیشن های موبایل به صورت native بهتر است یا hybrid ؟!به طور کلی نرم افزارهای وب به سه دسته تقسیم می شوند :1- Native APP2- Hybrid APP3- Web APPنرم‌افزار Native چیست؟ساخت و توسعه نرم‌افزارهای Native به این معناست که برای برنامه نویسی و توسعه نرم‌افزار خود از زبان‌های اصلی سیستم عامل استفاده کنید. مثلا برای توسعه نرم‌افزار اندروید باید از زبان برنامه نویسی Java و برای توسعه نرم‌افزار آیفون باید از زبان برنامه نویسی Objective-C استفاده کنید. بزرگترین مزیت این حالتperformance بالای نرم‌افزار است، زمانی که شما برنامه خود را بصورت Native می‌نویسید کدهای شما به زبان ماشین کامپایل خواهند شد در اندروید که همین موضوع باعث می‌شود شما حداکثر بازدهی ممکن از نرم‌افزار را داشته باشید. بازدهی بالا می‌تواند شامل افکت‌های انیمیشن، روان کار کردن بخش‌های مختلف برنامه، امکان استفاده از multi touch و خیلی موارد دیگر باشد که بدلیل دسترسی مستقیم به موقعیت‌های حافظه و سخت‌افزار گوشی اتفاق میفتد.مزایابدلیل کامپایل شدن برنامه دارای سرعت بالایی هستنددسترسی به تمامی امکاناتی که سیستم عامل به برنامه‌نویس می‌دهدپشتیبانی از APIهای مختلفمعایبدوباره نویسی کدهای برنامه برای پلتفرم‌های مختلفهزینه تمام شده بالا بدلیل زمان توسعه برنامهتحمیل هزینه زمان و انرژی زیاد برای یادگیری زبان هانرم‌افزار Web چیست ؟نرم‌افزارهای web در واقع نرم‌افزار نیستند! آنها وب‌سایتی هستند که بصورت Responsive طراحی شده‌اند و یا اینکه وب‌سایتی هستند که مخصوص موبایل پیاده‌سازی شده‌اند و کاربران می‌توانند توسط مرورگر دستگاه‌های خود آنها را بدرستی مشاهده کنند. شاید بشه گفت این قبیل نرم‌افزارها شبیه نرم‌افزار هستند، تا اینکه نرم‌افزار واقعی باشند.مزایانوشتن کد یکبار و استفاده از آن در بسترهای متفاوتبا توجه به اینکه فقط یکبار کد نوشته میشه رفع باگ و مشکلات بسیار آسان خواهد بودمستقل از سیستم‌عامل، بستر و حتی نسخه سیستم عامل‌هامعایبنداشتن دسترسی به سخت‌افزار گوشی یا تبلتوابسته به مرورگرعدم امکان انتشار نرم‌افزار در مارکت‌ها و app storeنرم‌افزار Hybrid چیست ؟نرم‌افزارهای Hybrid مانند نرم‌افزارهای Web هستند (وب سایت یا وب اپلیکیشن) که باید در مرورگر مشاهده شوند اما تفاوتی که با Web App دارد این است که نیازی نیست کاربر در مرورگر گوشی، برنامه را ببیند بلکه توسط WebView در اندروید و یا UIWebView در iOS (مرورگر native) محتوای نرم‌افزار به کاربر، در قالب یک نرم‌افزار Native نمایش داده خواهد شد. نرم‌افزارهای Hybrid توسط HTML و CSS و JavaScript توسعه داده می‌شوند و سپس توسط نرم‌افزارهای مانند Cordova به نرم‌افزار Native تبدیل می‌شوند.البته همانطوری که پیش‌تر گفته شد، تبدیل آنها به نرم‌افزار Native بدین معنا نیست که کدهای ما Compile شوند بلکه بر اساس پلتفرم مورد نظر، Cordova یک اپلیکیشن Native تولید می‌کند و در آن یک web view قرار می‌دهد و کدهای ما را درون آن اجرا می‌کند.مزایانوشتن کد یکبار و استفاده از آن در بسترهای متفاوتدسترسی به تمامی امکاناتی که سیستم‌عامل به برنامه نویس می‌دهددارای Pluginهای متعددمعایببازدهی پایین نسبت به نرم‌افزار Nativeدر زمان بررسی Native یا Hybrid بودن نرم‌افزار، Web App جایگاهی ندارد. پس ما مقایسه رو بین این دو نوع نرم‌افزارها انجام می دهیم. همانطوری که در بالا گفته شد در تولید نرم‌افزار Native و Hybrid تقریبا امکانات و قابلیت‌ها یکسان هستند فقط دو فرق عمده دارند:سرعت و بازدهی نرم‌افزارنحوه نوشتن کدبالاخره Hybrid یا Native ؟اگر می‌خواهید بازدهی نرم‌افزار شما در حد عالی باشه، اگر می‌خواهید بازی بنویسید، اگر می‌خواهید از APIهای Native استفاده کنید و همچنین اگر شما برنامه‌نویس هستید یعنی قبلا حداقل با زبان برنامه نویسی C در حد قابل قبولی کار کرده‌اید و الان هم هنوز تمایل دارید یک برنامه‌نویس باقی بمانید (بطور کل علاقه شما برنامه نویسی است) بهتره که به سمت نرم‌افزارهای Native بروید و یک زبان را انتخاب کنید و آنرا یاد بگیرید. مسلما نوشتن برای همه پلتفرم‌ها کار آسانی نیست و نیاز به زمان دارد، اما با توجه به اینکه برنامه‌نویسی یک مفهوم و درک است، اگر شما بصورت اصولی یک زبان برنامه‌نویسی را یادبگیرید می‌توانید پس از اینکه به آن مسلط شدید، سایر زبان‌های برنامه نویسی را یاد بگیرید. کار خیلی مشکلی نیست، چون تقریبا همه چیز برابر و مفاهیم یکی هستند و فقط syntax ها و نحوه استفاده از apiها متفاوت هستند.و اما اگر شما یک طراح وب هستید و می‌خواهید همچنان طراح وب بمانید و علاقه‌ای به یادگیری برنامه نویسی‌های پیچیده ندارید پیشنهاد میکنم بصورت Hybrid نرم‌افزارهای خودتون رو طراحی کنید.برای طراحان وب که HTML5 و CSS و JavaScript (منظور FrontEnd Developer است) بلد هستند شاید یادگیری یک زبان برنامه‌نویسی جدید و درک آن بسیار سخت و زمان‌بر باشه، پس بهتره از معلومات قبلی خود استفاده کنید و با کمی وقت گذاشتن و یادگیری تکنولوژی‌ها و ابزارهای جدید نرم‌افزار موبایل طراحی کنید.

تب به اشتراک گذاری مطالب به صورت لینک در شبکه های اجتماعی و استاندارد Open Graph

سحر ابراهیمی — Mon, 23 Dec 2019 08:17:57 +0330

با توجه به ظهور گسترده شبکه های اجتماعی و گسترش استفاده از آن ها بر روی تلفن های همراه هوشمند ، تبلت ها و .... بهره گیری از امکانی که به وسیله آن بتوان اخبار و مطالبی که در سایت ها به اشتراک گذاشته می شود را به صورتی ساختار یافته و شامل عنوان ، تصویر و خلاصه و ... نمایش داد امری مهم می باشد.امروزه بسیاری از کاربران سایت ها تمایل دارند تا بتوانند مطالبی را که در سایت های خود به نمایش می گذارند به صورتی لینکی حاوی اطلاعات محدود نیز در شبکه های اجتماعی به اشتراک بگذارند. مشابه این امر را در کانال تلگرام سایت های خبری مانند فارس نیوز و ... مشاهده می نمایید.اولین بار در سال 2010 فیسبوک برای به اشتراک گذاشتن پست های صفحات و اشخاص در گراف هایی به جز گراف فیسبوک از این امر استفاده کرد و امروز ما تحت عنوان استانداردی به نام Open Graph در بسیاری از سایت های خبری و محتوا محور از آن بهره می بریم.استاندارد Open Graph در واقع هر صفحه وب را تبدیل به یک شی غنی (حاوی اطلاعات خاص) در گراف های اجتماعی می نماید.به عنوان نمونه هر پست از فیسبوک می تواند با وجود اطلاعات کاملی همچون تصویر ، عنوان و توضیح و ... در صفحات دیگری به جز فیسبوک و یا درون گراف فیسبوک با همان کیفیت صفحه اصلی به اشتراک گذاشته شود.با وجود اینکه تکنولوژی های بسیاری برای به اشتراک گذاشتن مطالب وجود دارد اما تکنولوژی یکتایی که بتواند تمامی اطلاعات لازم و کافی را ارائه دهد و نیازهای برنامه نویسان در این زمینه را مرتفع نماید معرفی نشده است. پروتکل Open Graph با توجه به بستر موجود فعلی بنا نهاده شده است و با تنظیماتی ساده امکان ارائه اطلاعات در لینک های شبکه های اجتماعی را فراهم می نماید:برای تبدیل یک صفحه از وب به یک شی از گراف نیاز به افزودن meta data به هر صفحه می باشد. این یعنی شما نیازمند افزودن تگ های متا در head صفحه خود می باشید.چهار property مورد نیاز برای هر صفحه به شرح زیر می باشد :1- og:title عنوان شی شما که در گراف با این عنوان منتشر خواهد شد . برای مثال عنوان خبر2- og:type نوع شی شما را مشخص می کند . برای مثال فایل ویدیویی3- og:image آدرس یک تصویر که در گراف به نمایش در خواهد آمد را مشخص می کند.برای مثل تصویر خبر4- og:url که در واقع لینکی به منبع اصلی می باشد.علاوه بر متا دیتاهای اجباری فوق موارد اختیاری نیز وجود دارد که امکان افزودن توضیحات ، نام سایت و ... به شی را فراهم می کند. همچنینن می توانیم با تنظیم مواردی همچون طول و عرض تصویر نمایش جذاب تری را ارائه کنیم.برای مطالعه بیشتر می توانید به لینک زیر مراجعه نمایید:http://ogp.me/

Git چیست؟

سحر ابراهیمی — Mon, 23 Dec 2019 08:08:22 +0330

گیت یک کنترل سورس کد (Source Code Manger) است. دقیقتر، یک سیستم کنترل نسخه توزیع شده است. اما این دقیقا به چه معناست؟گیت یک زبان یا مفهوم نیست. گیت فقط یک برنامه است، یک تکه برنامه که باید در توسعه خود از آن استفاده کنید، درست مثل ویرایشگر یا FTP client خود. بنابراین برای چه ساخته شده است؟ گیت سورس کدهای شما را کنترل می کند… اما این به چه معناست؟ایده پشت Git (و دیگر برنامه های کنترل سورس کد، که درباره آن هم به زودی صحبت خواهد شد) این است که یک ایده هوشمندانه برای نگهداری کدهای پروژه است. این به این معنی است که در طی فواصلی که کدنویسی می کنید، نقطه ای در تاریخچه پروژه شما ثبت می شود (به عنوان مثال وقتی با مرورگر خود وارد سایتی می شوید، مرورگر آدرس و تاریخ را در حافظه خود نگاه می دارد). به عنوان مثال یک جدول زمانی یا Timeline در نظر بگیرید، که در آنجا تمام تغییرات برجسته یا رویدادهایی که باعث تغییر در مراحل توسعه شده است را نمایش می دهد. این بستگی به شما دارد کی این Markها یــا نقطه ها را ایجاد کنید. ولی عاقلانه نیست که هرگاه چیزی را به اتمام رساندید به عنوان یک نقطه تعیین کنیم. به عنوان مثال شاید بخواهید یک نقطه ای را بعد از اجرای یک ویژگی جدید اضافه کنید. جدول زمانی شما شاید به صورت زیر به نظر برسد:نقطه اول – آغاز یک پروژه، اضافه کردن فایل های CSS و JSنقطه دوم – ساخت ساختار اصلی وب سایتنقطه سوم – اضافه کردن نوار منویک مثال جالب از Preston-Werner (یکی از اعضای برجسته Git) : درست مثل این است که شما هر سال با دوربین، عکسی را از کودک خود تهیه کنید تا روند رشد آن را بررسی کنید. بنابراین اگر شما مفهوم جدول زمانی نقطه ها را درک کنید، به نظر من متوجه می شوید که چه وقت Git کار آمد است. اگر بخواهید این کارها را بطور دستی بدون هیچ برنامه کنترل کد انجام دهید باید، در هر بار تغییر در کد، از تمام فایل ها و دایرکتوری ها کپی تهیه کنید و آنها را هر بار تغییر نام دهید. Git این کارها، و خیلی کارهای دیگر را نیز به سرعت انجام می دهد.?سیستم های کنترل نسخه برای این ساخته شده اند که بیش از یک شخص بتواند بر روی همان پروژه کار کند. هر برنامه نویس کدها را دانلود می کند، بر روی آن کار می کند، ویژگی جدید یا تغییراتی را ایجاد می کنید (که به این کار commit می گویند، که حتما در github دیده اید). آنگاه می توانید با commitهای دیگر برنامه نویسان به اشتراک بگذارید.در اینجا هم، پروژه ما شبیه به مدل هواپیما است، و هر عکسی که از مدل هواپیما می گیرید یک commit است. بعد از اینکه پروژه خود را به اتمام رساندید می توانید به عقب برگردید و تمام commitها را مشاهده کنید و ببینید که فایل ها در نقطه های توقف به چه شکلی دیده می شوند.هنگامی که از یک سیستم کنترل (VCS) استفاده می کنید و به طور منظم commit ایجاد می کنید، لازم نیست نگران این باشید که چیزی خراب یا نابود شود. اگر واقعا چیزی را از دست بدهید، تنها لازم است که به آخرین commit خود بازگردید و کار را ادامه دهید.با استفاده از VCS به آسانی می توانید پروژه خود را با دیگران به اشتراک بگذارید، و به دیگر توسعه دهنده ها این امکان را بدهید که آن را توسعه بدهند. بدون VCS، مجبور هستید به طور دستی، تغییرات را کپی، مقایسه و تغییرات آنها را با دست انجام دهید. که این اصلا سرگرم کننده نیست.

fit کردن تصاویر وب سایت

سحر ابراهیمی — Sun, 22 Dec 2019 09:17:45 +0330

مطمئنا به عنوان یک Front-end Developer از اهمیت این موضوع آگاه هستید که تصاویر به کار رفته در وب سایت یکی از مهمترین تاثیرات رو روی کاربران و بازدیدکنندگان وب سایت داره و یکی از مشکلاتی که باهاش روبرو هستیم سایز تصاویری هست که روی وبسایت آپلود میشن، در اوایل کار که خودمون تصاویر رو آپلود می کنیم میتونیم تصاویر وب سایت رو در سایزهایی مشخص روی وبسایت آپلود کنیم و زیبایی وب سایت رو حفظ کنیم.اما مشکل از اینجا شروع میشه که شما پروژه رو تحویل مشتری میدید و خودش باید تصاویر مطالب وب سایت رو آپلود کنه و اکثرا در ۹۰ درصد اوقات مشتری نمیتونه و دانش این موضوع رو نداره که سایز تصاویر رو ست کنه و تصاویری با رزولوشن بالا و سایز مناسب قرار بده و شما به عنوان یک Front-end Developer حرفه ای باید پیش بینی این حالت رو داشته باشید و اجازه ندهید سایز تصاویر از حدی معمول بزرگتر بشه و باعث به هم ریختن دیزاین وب سایت بشه. برای رفع این مشکل در گذشته با دادن عرض 100% تصویر استفاده شده را در div مورد نظرمان فیت می کردید یا اینکه سایزی مشخص به تصاویر داده می شد و بر اون اساس برای کاربر تعریف می شد که طبق همون سایز تصاویر رو روی وب سایت آپلود کنه و یا با استفاده از کدهای جاوااسکریپت یکسری راهکار ارائه می دادیم.اما خوشبختانه با خاصیتهای جدید CSS3امکانی فراهم شده که بدون همه این دغدغه ها تصاویر رو فیت کنیم.object-fitاین ویژگی تعریف میکنه المانی که داریم چگونه نمایش داده بشه، برای مثال تصویری که در صفحه داریم به چه نحوی به عرض و ارتفاع content box جواب بده و به نحو احسن نمایش داده بشه؟!این ویژگی برای تصاویر، ویدئو و ترکیبی با ویژگی object-positionاستفاده می شود که در ادامه مقاله در این مورد صحبت خواهیم کرد.Object-fit میتونه با یکی از 5 مقدار زیر مقداردهی بشه :fill : مقدار پیش فرضه که تصویر رو صرف نظر از نسبت عرض و ارتفاع آن، به اندازه ی content box کاملا فیت میکنه.contain : سایز تصویر رو با رعایت نسبت تصویر و جلوگیری از دفرمه شدن به اندازه content box افزایش یا کاهش خواهد داد. در این حالت ممکنه تصویر کاملا باcontent box فیت نشه و نسبت تصویر حفظ بشه.cover : در این حالت تصویر کاملا content box رو پر میکنه با رعایت نسبت تصویر و حفظ کیفیت آن ، در این حالت تصویر کراپ و بر اساس سایز content box فیت خواهد شد. در این حالت معمولا لازمه از object-position هم استفاده کنیم.none : در این حالت تصویری که داریم سایز والدش رو نادیده میگیره و در سایز اصلی خودش نمایش داده خواهد شد.scale-down : در این حالت تصویر مقایسه ای بین حالتهای none و contain رو انجام میده و به صورت سفارشی سایز کوچکتر رو انتخاب خواهد کرد.برای مثال اگر ما بخواهیم برای cover تصویر را تنظیم کنیم به صورت زیر خواهد بود :img { height: 120px; };cover { width: 260px.object-fit: cover{

واحدهای اندازه گیری فونت

سحر ابراهیمی — Sat, 21 Dec 2019 11:51:34 +0330

همه ی این فرمت ها چه کاری انجام می دهند؟تمامی این فرمت ها برای بیان سایز یک عنصر در صفحات وب مورد استفاده قرار می گیرند.Px چیست؟شما صفحات وب را در مانیتورهایی مشاهده می کنید که هرکدام از تعداد زیادی پیکسل تشکیل شده است. Px در css همان معنی پیکسل های یک مانیتور را در بر ندارد. در واقع یک واحد اندازه گیری غیر خطی (non-linear angular measurement) هست. اکثر مردم تصور اشتباهی دارند که گمان می کنند پیکسل که صفحات مانیتور را تشکیل می دهد با px اندازه فونت برابری می کند. اما شما به عنوان طراح وب باید بدانید که px در واقع یک واحد مطلق اندازه گیری (absolute unit of measurement) است که مجزا از هر اندازه و واحد اندازه گیری دیگری می باشد. یک پیکسل در تمامی مانیتور ها به یک اندازه می باشد و معنای واحدی دارد. اما فونت سایز یک پیکسل در مانیتور 22 اینچ با مانیتور 10 اینچ نمایش متفاوتی خواهد داشت. در واقع px واحد اندازه گیری ثابتی است که تنها برای نمایش در مانیتورها مناسب می باشد و برای نمایش در موبایل توصیه نمی شود. چرا که با تغییر اندازه نمایشگر تغییر نمی کند.Em چیست؟EM اندازه گیری نسبی طول می باشد. اندازه یک EM نسبت به اندازه فونت عنصر پدر خود است.در واقع یعنی اگر شما یک

دارید که سایز فونت آن را 16px تنظیم نموده اید و یک تگ

درون آن قرار داده اید و فونت سایز آن را 2em تنظیم کرده اید فونت سایز تگ

32 پیکسل خواهد بود و در صورتی که 0.5em تنظیم نمایید فونت سایز تگ p برابر با 8 پیکسل خواهد بود.Rem چیست؟Em یک مشکلی داشت و آن این بود که فونت همه عناصر نسبت به پدر آن در نظر گرفته می شد. در صورتی که در مثال فوق درون تگ

یک تگ وجود داشت و درون آن یک تگ نتیجه فونت سایز متفاوت با آنچه دلخواه کاربر بود به دست می آمد. در واقع سایز دهی emبه صورت تو در تو هست و این امر موجب می شود تا در تگ بندی های تو در تو قادر به رسیدن به اندازه مورد نظر خود نباشیم. Rem یا root em همیشه نسبت به اندازه فونت سایز root سایت (عنصر html ) در نظر گرفته می شود و اهمیتی ندارد که چقدر تگ های ما تو در تو باشند و عمق داشته باشند.Percent چیست؟فونت دهی درصدی درواقع عملکرد مشابه با em دارد و از والد خود تبعیت می کند.برای اطلاعات بیشتر جداول زیر ارائه شده است:?واحدهای اندازه گیری نسبی :?

animation در CSS چیست؟

سحر ابراهیمی — Sat, 21 Dec 2019 11:29:50 +0330

?Animationیکی از قابلیت های CSS3می باشد که امکان طراحی جذاب و محرک عناصر صفحه را برای کاربران وب فراهم کرده است.در تعریف animation از کلمه کلیدی @keyframes استفاده می شود.در واقع با این پیشوند به مرورگر می فهمانیم که در حال تعریف animation هستیم. به مثال زیر توجه نمایید:مثال :@keyframes bounceاینترنت اکسپلورر هنوز از دستور @keyframes یا خاصیت انیمیشن پشتیبانی نمی کند بنابراین برای نمایش صحیح افکت ها نیاز به نوشتن پیشوند -ms- می باشد.فایر فاکس به پیشوند -moz- ، کروم و سافاری به پیشوند -webkit- و اپرا به پیشوند -o- نیاز دارد.مثال :-ms-@keyframes bounceزمانی که انیمیشن با دستور @keyframesایجاد شد ،می بایست از آن در یک تگ استفاده کنیم ، در غیر این صورت انیمیشن مؤثر نخواهد بود. انیمیشن را حداقل با مشخص کردن این دو خاصیت انیمیشن ، اجرا نمایید:مشخص کردن نام انیمیشنمشخص کردن مدت انیمیشنمثال:animation: myfirst 5sنکته : شما باید نام و مدت زمان انیمیشن را تعریف کنید. اگر مدت زمان تعریف نشود انیمیشن اجرا نخواهد شد. چون مقدار پیش فرض 0 است.یک انیمیشن حرکتی است که باعث می شود یک عنصر به تدریج از یک استایل به استایلی دیگر تغییر یابد. شما می توانید عناصر را به هر استایلی به دفعات دلخواه تغییر دهید.در زمان تعریف keyframes ما میتوانیم از from برای تعریف شرایط شروع انیمیشن و از to برای شرایط پایان انیمیشن استفاده کنیم، وقتی از from و to استفاده می کنیم وابسته به مدت زمان تعیین شده، مرورگر به صورت خودکار زمان را طوری تنظیم میکند که از حالت from تا حالت toدر مدت زمان تعریف شده اجرا شود.بجای from و to ما میتوانیم از % نیز استفاده کنیم. مقدار 0% شروع انیمیشن و مقدار 100% پایان انیمشین را تعیین میکند.در هنگام استفاده از % ما می توانیم مراحل انمیشین را به 100 قسمت تقسیم کنیم، و در هر قسمت کدهای مورد نظرمان را قرار دهیم 0% آغاز انیمیشن است و 100% زمانی است که انیمیشن کامل می شود.مثال :@keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }}انیمیشن را مشخص می کند@keyframesبرای مختصر نویسی ویژگی های انیمیشنanimationنام انیمیشن را مشخص می کند.animation-nameمشخص می کند که یک انیمیشن چند ثانیه یا میلی ثانیه طول می کشد تا کامل شود.animation-durationچگونگی نمایش انیمیشن در طول اجرا را مشخص می کند. پیش فرض "ease" است.animation-timing-functionزمان شروع انیمیشن را تعریف می کند.پیش فرض 0 است.(مشخص می کند که چقدر از نمایش اولیه انیمشین تا شروع اجرای آن تاخیر داشته باشد)animation-delayتعداد دفعات نمایش انیمیشن را مشخص می کند . پیش فرض 1 استanimation-iteration-countمشخص می کند که انیمیشن به صورت معکوس نیز اجرا شود یا نه.پیش فرض "normal" است.animation-directionمشخص می کند که آیا انیمیشن اجرا شود یا متوقف شود . پیش فرض "running" است.animation-play-state