نوشته های مریم محمدپور

فونت‌آیکون چیست؟

مریم محمدپور — Mon, 11 Oct 2021 14:49:59 +0330

آیکون‌ها، تصاویری خلاصه شده یا نمادهایی قابل فهم برای دسترسی آسان کاربرها به فایل‌ها و برنامه‌های کامپیوتر و دستگاه‌های الکترونیک و همچنین وب‌سایت‌ها و اپلیکیشن‌ها هستند. شما این تصاویر یا نمادها را بسیار دیده‌اید و هر کدامشان تداعی مشخصی در ذهن اکثریت مخاطبان دارند. آنها در جستجو بین فایل‌ها و فرمان‌ها نیز کمک بسیار بزرگی هستند.‌فونت‌آیکون‌ها، مفهوم جدیدی از فونت را معرفی کردند. در گذشته برای استفاده از آیکون‌های مختلف در صفحات وب و اپلیکیشن‌های موبایل، لازم بود تا با نرم‌افزارهایی مانند فتوشاپ، آیکون‌های مدنظر را تک به تک ایجاد کرد. همچنین می‌شد که از فایل‌های SVG (گرافیک برداری) استفاده کرد. هر دو روش دارای مشکلاتی اساسی برای یک طراح و توسعه‌دهنده بودند. اگر تغییری روی رنگ‌بندی یا طرح آیکون نیاز بود، لازم بود آیکون‌های به زحمت طراحی شده مجدد ویرایش شوند. در هنگام استفاده از SVG‌ها نیز مشکلاتی نظیر محدودیت در رنگ‌بندی و گنجاندن آنها در بخش‌های مختلف وجود داشت.برای حل این مشکل ‌فونت‌آیکون‌ها به وجود آمدند؛ ‌فونت‌آیکون‌ها این امکان را به طراحان دادند تا فقط با تایپ کردن نام آیکون مورد نظر خود، آن را تقریبا در هر جایی و بدون محدودیت خاصی استفاده کنند. امکان انتخاب از بین چند آیکون همسان، تغییر اندازه و رنگ و استفاده در بخش‌هایی که قبلا امکان پذیر نبود، با استفاده از ‌فونت‌آیکون‌ها فراهم شد.برای تعریف کلی می‌توان گفت: ‌فونت‌آیکون، مجموعه‌ای از آیکون‌های متناسب با هم است که به صورت بُرداری طراحی شده‌ و همه آنها در یک فایل فونت گنجانده شده‌اند.نکته خوب ماجرا آنجاست که تصاویری که به‌صورت بُرداری طراحی می‌شوند با تغییر سایز از کیفیت آنها کاسته نمی‌شوند.فراخوانی کل آیکون‌ها تنها با یک درخواستبرای استفاده از ‌فونت‌آیکون تنها یک CDN یا یک فایل در Host فراخوانده می‌شود و در ادامه بدون نیاز به فراخوانی دوباره، دسترسی به تمام آیکون‌های موجود در آن مجموعه وجود دارد. این کار سرعت اجرا را بیشتر می‌کند.امکان فراخوانی به‌وسیله CDNفراخوانی ‌فونت‌آیکون به‌ وسیله CDN یکی از مهمترین مزایای استفاده از آن است. شرکت‌هایی مثل گوگل و مایکروسافت و... سرور‌هایی را در نقاط مختلف جهان در اختیار دارند. همانطور که می‌دانید وقتی یک صفحه وب را برای اولین بار مشاهده می‌کنید، برخی فایل‌های مربوط به آن صفحه مانند فایلCSS، JavaScript، فونت‌ها، عکس‌ها و… توسط مرورگر شما کَش(cache) می‌شوند تا در آینده بتواند آن وب‌سایت را خیلی سریع‌تر بارگیری کند.فرض کنید ‌فونت‌آیکون ما در سرور گوگل قرار دارد و ما آن را از طریق CDN گوگل فراخوانی می‌کنیم. حال اگر یک کاربر قبل از ورود به وب سایت ما، وارد وب سایت دیگری شده که از CDN گوگل برای فراخوانی font icon استفاده می‌کند، آن ‌فونت‌آیکون در مرورگرش کَش شده است و دوباره فراخوانی نمی شود. همین اتفاق به ظاهر ساده، سرعت اجرای سایت را بالا می‌برد.نحوه استفاده از ‌فونت‌آیکونبرای استفاده از یک Icon Font دو راه پیش روی ماست؛ راه اول دانلود فایل‌های فونت است. معمولا وقتی یک ‌فونت‌آیکون را دانلود می‌کنید در آن فایل‌های مربوط به فونت و یک فایل CSS وجود دارد. شما باید فایل‌ CSS آن را به پروژه خود اضافه کنید و فایل‌های فونت را در مکان مناسبی قرار دهید.راه دوم استفاده از CDN است، در این روش تنها کافی است یک تگ Link را در عنصر Head کدهای قالب خود اضافه کنید. این تگ را معمولا در یک فایل راهنما یا در وبسایت آن ‌فونت‌آیکون می‌توان پیدا کرد.نحوه فراخوانی و نمایش آیکون‌ها در Icon Font های مختلف، متفاوت است. برای دیدن لیست‌ آیکون‌های موجود در Icon Font و نحوه استفاده از آنها بهتر است به وبسایت رسمی آنها مراجعه کنید.محبوب ترین ‌فونت‌آیکون برای فارسی زبانها؛ Font Awesome Iconsمی‌شود گفت که Font awesome Icons محبوب‌ترین ‌فونت‌آیکون در وب‌سایت‌های فارسی است. این Icon Font در دو نسخه Free و Pro ارائه می‌شود. فرق این دو نسخه در تعداد اعداد آیکون است.

واحدهای اندازه گیری در CSS

مریم محمدپور — Sun, 10 Oct 2021 18:17:28 +0330

واحدهای اندازه گیری متنوعی در CSS وجود دارد که به طور کلی می توان آنها را به دو دسته مطلق و نسبی تقسیم کرد.بسیاری از ویژگیهای CSS اندازه (طول) یا length می گیرند از جمله می توان به height ، width، font-size، margin و padding اشاره کرد. مقدار length یک عدد است که پشت بندش (بدون فاصله) واحد اندازه گیری نوشته می شود.واحدهای اندازه گیری مطلق یا Absolute Lengthsواحدهای اندازه گیری مطلق یک مقدار ثابت دارند. یعنی عددی که همراه واحد مربوطه می آید، دقیقا همان اندازه ای است که در صفحه وب ظاهر می شود. این واحدها برای استفاده در صفحات وب چندان توصیه نمی شوند چراکه اندازه صفحه نمایش های مختلف، بسیار متفاوت است و می تواند با responsive شدن صفحه در تعارض باشد. در بین واحدهای اندازه گیری مطلق واحد اندازه گیری px بیشترین کاربرد را دارد.اندازه پیکسل می تواند در دستگاه های مختلف، متفاوت باشد، اما CSS این مشکل را با در نظر گرفتن اندازه یک پیکسل در دستگاهی با تراکم پیکسل 96DPI (نقطه در اینچ) در نظر گرفته است و به این ترتیب px تبدیل به یک مقدار ثابت شده استواحد نقطه نیز مانند واحد پیکسل، مقداری ثابت است و در تمامی دستگاه ها به یک اندازه ظاهر می‌شود. تفاوت واحد نقطه و پیکسل، تنها در اندازه آن هاست.واحد پیکا نیز شرایط مشابهی دارد. مقداری ثابت دارد که با دو مقدار پیشین متفاوت است.واحدهای اندازه گیری نسبی یا Relative Lengthsواحدهای طول نسبی، طول را نسبت به ویژگی طول دیگر مشخص می کنند. واحدهای طول نسبی نسبت به صفحه نمایش های مختلف، مقیاس بهتری دارند. واحدهای اندازه گیری نسبی را برای هر تگ HTML نسبت به یک تگ HTML دیگر یا نسبت به واحد اندازه گیری دیگر تعیین می کنند.بهترین واحدهای اندازه گیری نسبی جهت طراحی وبسایت های ریسپانسیو، em و rem هستند.واحدهای اندازه گیریvw ، vh ، vmin و vmax به عنوان واحدهای نسبی وابسته به viewport هستند.واحدهای vw ، vh ، vmin و vmax در طراحی سایت های مقیاس پذیر یا واکنشگرا موثر خواهد بود.نکات کاربردیبین شماره و واحد، یک فاصله سفید گذاشته نمی شود.اگر مقدار 0 باشد، می توان واحد را حذف کرد.برای برخی از ویژگی های CSS، طول منفی مجاز است.

کدنویسی با Css grid

مریم محمدپور — Sat, 09 Oct 2021 13:57:11 +0330

برای چیدمان المان ها در یک صفحه وب، راه هایی مثل استفاده از float یا flex در css وجود دارد و راهکار دیگر استفاده از grid است. grid در لغت به معنای توری است و در کدنویسی وب سایت ها برای چیدمان دو بعدی به کار می آید.ماژول CSS grid به توسعه ‌دهندگان وب کمک می‌کند طرح‌های پیچیده واکنش‌گرا یا Responsive را راحت‌تر پیاده‌سازی کنند. grid این امکان را می‌دهد که هنگام طراحی صفحات وب بتوان صفحه را به بخش‌های مختلف تقسیم کرد به‌گونه‌ای که این بخش‌ها با یکدیگر تداخل نداشته باشند.کدنویسی با کمک gridبرای استفاده از grid ابتدا یک grid container می سازیم. یعنی المنت هایی که می خواهیم آنها را بچینیم، داخل یک ظرف می ریزیم. به معنای دقیق تر همه آنها را داخل یک المنت والد قرار می دهیم و در CSS مربوط به آن، دستور display:grid; را قرار می دهیم.برای یادگیری استفاده از grid باید کاربرد دستورات زیر را بیاموزیم:grid-template-columnsgrid-template-rowsgrid-columngrid-rowjustify-selfalign-selfدو خاصیت اول به والد و خاصیت های بعدی به فرزندان تعلق می گیرد. برای یادگیری راحت تر به مثال زیر توجه کنید:نتیجه این کد به این شکل است:می بینید که دستور display: grid; در این مرحله عمل نمی کند و نتیجه شبیه دستور display:block; می باشد. برای حل این مشکل باید دستورات سطر یا ستون یا هر دو را به css عنصر والداضافه کنیم:.parent{display: grid;grid-template-columns: 200px 400px 300px;}خاصیت grid-template-columnsبا استفاده از خاصیت grid-template-columns می توانیم ستون هایی را در صفحه به وجود آوریم. در اینجا سه مقدار به این خاصیت دادیم، پس سه ستون ایجاد شد که عرض ستون اول 200px، عرض ستون دوم 400px و عرض ستون سوم 300px است.می توانیم به جای مقدار از درصد استفاده کنیم، مثلا به شکل زیر:grid-template-columns: 40% 10% 30%;نتیجه به این شکل می شود:راه سوم مقداردهی استفاده از fr است. این عبارت مخفف کلمه fraction به معنای سهم یا کسر است:grid-template-columns: 2fr 1fr 3fr;در این شرایط عرض صفحه به 6 قسمت (6=3+1+2) تقسیم می شود، آنهایی که در ستون اول قرار می گیرند، 2/6 عرض صفحه را به خود اختصاص می دهند، ستونی دومی ها 1/6 و ستون سومی ها 3/6 عرض صفحه را در اختیار می گیرند. نتیجه به این شکل است:خاصیت grid-template-rowsحال می خواهیم اندازه ها را بر اساس سطر بچنیم. شرایط مشابه ستون است و تنها تفاوت در زمانی است که بخواهیم از fraction یا درصد استفاده کنیم. در این شرایط باید ابتدا به والد خاصیت ارتفاع بدهیم. در این زمینه یک مثال می زنیم:.parent{display: grid;height:600px;grid-template-rows: 2fr 1fr 3fr 1fr 2fr 3fr 1fr 2fr 4fr;}در این شرایط 600 پیکسل به 19 قسمت تقسیم می شود و هر سطر، ارتفاعی به اندازه ضریبی از 19 می گیرد()repeatهمانطور که می بینید تعداد باکس ها زیاد است و می تواند بیش از این هم باشد، در این شرایط اگر بخواهیم کاری را تکرار کنیم از دستور repeat استفاده می کنیم:grid-template-columns: repeat(3 , 1fr) ;در اینجا سه ستون ایجاد می کند:سلول های gridبرای کار با سلول های grid باید با مفاهیم line ، span ، span و auto آشنایی داشته باشیم تا بتوانیم یک item را تعریف کنیم. تصویر زیر یک جدول 3 سطری و 5 ستونی است. به هر کدام از خط هایی که برای ساخت این جدول ساخته شده یک Line می گویند. از span ها نیز برای تعیین گسترش فضا استفاده می کنیم. auto نیز نشان دهنده قرارگیری خودکار، بازه خودکار یا بازه پیش فرض است.حال یک item را بر اساس دستور زیر تعریف می کنیم:.item {grid-column-start: | | span | span | auto;grid-column-end: | | span | span | auto;grid-row-start: | | span | span | auto;grid-row-end: | | span | span | auto;{خاصیت های grid-column و grid-row به فرزندان اختصاص پیدا می کنند. می توان به صورت های دیگری نیز آنها را نوشت:مثلا می خواهیم عرض رنگ قرمز دو برابر شود. اینگونه می نویسیم:grid-column: 1/3;این نوشته به این معناست که این ستون از line 1 تا line 3 ادامه پیدا کند. به شکل زیر:خاصیتهای justify-self و align-selfاین دو که به فرزندان داده می شوند، برای تراز افقی یا عمودی محتوای داخل آیتم ها کاربرد دارند و مقادیر start ، center و end می گیرند..gridbox3{background-color: green;justify-self: center;align-self: start;}نتیجه به این شکل است:در اینجا محتوای سلول سبز را در راستای افقی وسط چین، و در راستای عمودی بالا چین کردیم.استفاده از inline-grid به جای gridخاصیت Grid به طور کلی خاصیت block بودن را دارد یعنی تا انتهای سطر را می گیرد، اگر بخواهیم از grid بدون این خاصیت استفاده کنیم، سراغ inline-grid می رویم:display: inline-grid;پشتیبانی مرورگرها از gridهر چند CSS grid به عنوان یکی از استانداردهای وب شناخته نشده است، اما از اکتبر سال 2017 به بعد مرورگرهای گوگل کروم، فایرفاکس، سافاری، اپرا و Microsoft edge همگی از CSS grid پشتیبانی می‌کنند.

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

مریم محمدپور — Fri, 24 Sep 2021 21:25:36 +0330

شما آدرس خانه خود را می خرید؟ خیر. اما داستان در محیط وب متفاوت است. اگر یک وب سایت را به خانه تشبیه کنیم، نه تنها که خود خانه، که آدرسش را نیز باید خرید یا اجاره کرد. اما چگونه و این دو چه تفاوت هایی با هم دارند؟ موضوع دربارهhost و domain است. host خانه شماست. یعنی "فضا"یی که در آن حضور دارید و وسایل خود را در آن می گذارید. برای داشتن یک سایت نیز نیاز به فضایی دارید تا فایل ها و کدهای وب‌سایت بر روی آن قرار دهید. هاست امکاناتی از قبیل دسترسی به دیتابیس، ارسال و دریافت ایمیل، اجرای کدها و … را فراهم می کند.کجا هاست می فروشند؟شرکت هایی هستند که خدمات هاستینگ را ارائه می کنند. هاست قسمتی از یک سرور است که همیشه به اینترنت متصل است و مردم از سراسر دنیا امکان دسترسی به آن را از طریق دامین دارند. شرکت های ارائه دهنده خدمات هاستینگ، این فضا یا هاست را سالانه یا ماهانه اجاره می دهند تا بتوانید وب سایت خود را در دسترس تمام افراد جهان قرار دهید.خانه در دنیای وب هم بستگی به اندازه آن داردحال فرض کنید می خواهید یک خانه اینترنتی بخرید. باید نکاتی را بدانید، اولین نکته اندازه فضایی است که نیاز دارید. هاست در حجم های مختلف ارائه می شود و ویژگی های متفاوتی می تواند داشته باشد، به عنوان مثال میزان فضای آن می تواند ۱۰۰ مگابایت، یک گیگابایت یا هر اندازه دیگری باشد، این بسته به برآورد شما از حجم اطلاعات ارسالی و دریافتی‌تان است. شما بر اساس فضایی که نیاز دارید آن را سفارش می دهید. معیار اصلی شما نیز تعداد مهمان های این خانه است که معنایش در دنیای وب سایت ها، میزان بازدید است، به ویژه اگر این بازدیدها همزمان باشند، نیاز به هاست بزرگتری دارید.نکته مهم این است که در این خانه باید 24 ساعته باز باشد. در واقع اطلاعات یک سایت باید بر روی دستگاهی (سرور) قرار بگیرد که به‌طور مداوم به اینترنت متصل باشد تا کابران بتوانند آن را مشاهده کنند.دامنه کجاستشما این مطلب را در سایت ویرگول می خوانید. یعنی در url شما نوشته شده است https://virgool.io/؛ این آدرس همان دامنه ای است که مدیران سایت ویرگول روز اول کار آن را خریده اند.دامنه یا Domain به آدرسی گفته می‌شود که وب‌سایت از طریق آن قابل دسترس است. یعنی همان آدرس خانه ای که برای داشتنش هزینه کرده اید. شرکت هایی هستند که خدمات ثبت domain ارائه می کنند یا به عبارت راحت تر دامنه می فروشند. این دامنه ها برای بازه های زمانی از پیش توافق شده ای به شما تعلق می گیرد و در این بازه تنها و تنها متعلق به شماست. با پایان این دوره باید دوباره هزینه ای برای نگه داشتنش پرداخت کنید. در غیر این صورت ممکن است فرد دیگری دامنه شما را به نام خود ثبت کند. از قضا برای برخی این کار تبدیل به راهی برای کسب درآمد شده؛ به این صورت که دامنه هایی که حدس می زنند به زودی مورد نیاز بقیه قرار می گیرد را با هزینه اندکی به نام خود ثبت می کنند و منتظر می مانند که مشتری به سراغشان بیاید تا آن را به قیمت گزاف بفروشند.دو بخش مختلف دامنهدامنه ها از دو بخش تشکیل شده‌اند؛ نام و پسوند یا Name و tld . این دو بخش با استفاده از نقطه از هم تفکیک می شوند. در مثال دامنه سایت ویرگول، virgool نام دامنه و io پسوند آن است. برخی پسوندهای دیگر عبارتند از: com , net , org , af, ir , io , ac این پسوندها گاهی مربوط به کشورهای مختلف و گاهی مربوط به تخصص های متفاوت است.

برنامه نویسی فرانت اند چیست؟

مریم محمدپور — Tue, 14 Sep 2021 16:31:54 +0430

شما اکنون یک صفحه وب را باز کرده اید، آنچه می بینید فارغ از محتوای آن، محصول کار Front end است. برای رسیدن به یک وب سایت پویا، دو نوع تخصص اصلی لازم است که یکی از آنها Front end و دیگری Back end است.کدنویسیِ هر آن چیزی که مربوط به رویه وب سایت می شود، یعنی همان چیزی که کاربر آن را می بیند، کاری است که شما به عنوان یک Front End Developer انجام می دهید. در واقع شما با نوشتن کدهایی که برای کاربران یک وب سایت مفهوم نیست -اما قابل دسترسی است- سایتی را می سازید که کاربر به راحتی از بخش های مختلف آن استفاده می کند. شما یک قالب گرافیکی و احتمالا به لحاظ بصری چشم نواز و کاربرپسند را با کدهایتان ساخته اید.ابزار موردنیاز یک فرانت اند کارطراحی وب شامل دو بخشclient و server است. ما وقتی نیاز به صفحه وب داریم، در مرورگر خود یعنی در بخش client آدرسی را تایپ می‌کنیم. آدرس به سمت server می رود. Server چک می کند و می بیند فایل های موردنیاز برای پاسخ به این درخواست کدامها هستند، آن فایل ها را برای نمایش به سمت client می فرستد. تصویری که به شما نشان داده می شود در واقع تصویری است که از تفسیر زبان html به وجود آمده است و با css رنگ و لعاب گرفته و javascript آن را پویا و تعاملی کرده است.بنابراین برای Frontend دست‌کم به این سه ابزار نیاز دارد.زبان html مخفف HyperText Markup Language یا زبان نشانه‌گذاری فرامتنی (ابرمتنی) است و با آن می توان ساختار یک صفحه وب را نوشت. همان‌طورکه از اسمش پیداست،html یک زبان نشانه‌گذاری است نه زبان برنامه نویسی. یک سند html شامل عناصری مثل تیتر، پاراگراف متنی، جدول و عکس است.زبان Css مخفف Cascading Style Sheets و زبانی برای مشخص کردن ویژگیهای ظاهری یک وب سایت است. نزدیک‌ترین معنایی که می‌شود برایش درنظرگرفت «برگه‌های سبک‌دهی آبشاری» یا «شیوه‌نامه‌های آبشاری» است. CCS هم زبان برنامه نویسی به حساب نمی‌آید بلکه همان‌طور که از اسمش پیداست یک زبان سبک‌دهی است.زبان Javascript که به صورت Js هم نوشته می شود ابزار مهم دیگر این حرفه است. جاوا اسکریپت یک زبان برنامه نویسی سطح بالاست که یادگیری آن از سایر زبان ها معمولا آسان تر است چراکه بسیار انعطاف پذیر است.با کمک زبان‌های نشانه‌گذاری CCS و HTML می‌توانید یک سایت ساده‌ استاتیک طراحی کنید. سایتی که کاربر نمی‌تواند تعاملی با آن برقرار کند. به همین دلیل فرانت اند کارها دست به دامن زبان جاوا اسکریپت می‌شوند.در کنار اینها بهتر است به خوبی با کتابخانه های Css مثل فریمورک Bootstrap آشنایی داشت. آشنایی با Jquery نیز استفاده از Js را راحت تر می کند. همچنین یادگیری فریم‌ورک‌هایی مثل React، Angular، Vue.js بسیار مهم و کاربردی است.کار فرانت اند کجا شروع می شود؟در بخش طراحی وب، طراحان (UI Designer ها) با نرم افزار‌های گرافیکی مانند فتوشاپ (Photoshop) یا (Sketch) ظاهر سایت را طراحی می‌کنند. آنها دست به کد نمی شوند و پس از آن نوبت به فرانت اند دولوپرها می رسد که این طراحی را با زبان های برنامه نویسی یادشده، پیاده سازی کند.تفاوت فرانت و بکیک Front End Developer برای تکمیل کارش در طراحی سایت به Back End Developer نیاز دارد. برنامه نویسی بک اند Back End) ) مربوط به کدنویسی و برنامه نویسی هر آن چیزی است که کاربر آن را نمی بیند یعنی کارهای پشت صحنه وب سایت است. وظیفه‌ یک برنامه نویس بک اند، برنامه نویسی چیزهایی است که هسته اصلی یک وب سایت هستند به عنوان مثال وقتی که یک وب سایت، مقالات را از دیتابیس دریافت می کند، یک امر مربوط به بک اند است. بسیاری برای توضیح بیشتر درباره کار بک اند از سینما یا تئاتر کمک می گیرند و بک اند در طراحی سایت را معادل «پشت صحنه» سینما یا تئاتر می دانند و «بازیگران» معادل فرانت اند.فعاليت بک اند نحوه کارکرد، به روز رساني و تغييرات سايت است یعنی همان چيزهايي است که براي کاربران سايت قابل مشاهده نيست چون مستقيما با سرور در ارتباط است مثل پايگاه داده هاي سایت و سرور و راه هاي ارتباطي آنها.