https://virgool.io/feed/@m_62466067 عاشق چالش و کدنویسی fa 2026-06-17 03:13:36 https://files.virgool.io/upload/users/749164/avatar/jzLnhg.png?height=120&width=120 https://virgool.io/@m_62466067 https://virgool.io/@m_62466067/%D8%AA%D8%AC%D8%B1%D8%A8%D9%87-%D9%85%D9%86-%D8%A7%D8%B2-%D8%AF%D9%88%D8%B1%D9%87-%D9%85%D9%86%D8%AA%D9%88%D8%B1%DB%8C%D9%86%DA%AF-ew3pmxuek6dm  وقتی به صورت خودآموز شروع به یادگیری طراحی سایت کردم گاهی وقت ها ناامید میشدم و  فکر می کردم که اصلاً دارم مسیر رو درست میرم یا نه..و اینکه همش فکر میکردم خیلی خوب میشد اگه استادی باشه که گام به گام با آدم پیش بیاد و کارهاش رو زیر نظر بگیره.  دنبال یه فرصت بودم که بتونم مهارت خودم رو بسنجم و اینکه بفهمم چه قدر به مفاهیم تسلط دارم ؛ شرکت تو دوره  منتورینگ باعث شد که بفهمم تو چه مواردی ایراد دارم و اینکه توی طراحی به جزییات طرح خیلی باید دقت کنم و اینکه صرفا نباید فقط  صورت کلی ظاهر سایت شبیه چیزی باشه که کارفرما از ما انتظار داره  و باید به کوچکترین پیکسل فاصله بین المان ها از هم دیگه  دقت بشه و همشون باید دقیقا همون چیزی باشه که تو فایل طراحی هست.وقتی آدم به گام به گام با استاد پیش می‌ره خیالش راحت هست که مسیر یادگیریش درسته و این اعتماد به نفس رو‌ پیدا می‌کنه که خودش رو به چالش بکشه ، پیش از این فکر میکردم که یه بازه ای رو فقط به یادگیری اختصاص بدم و  وقتی به سطح متوسطی از دانش رسیدم؛ پروژه انجام بدم، در صورتی که متوجه شدم آدم باید تو همون مسیر یادگیری انقدر پروژه های مختلف رو بازسازی کنه و تمرین کنه و  انقدر حرفه ای بشه که با دیدن سایت های مختلف سریع تو ذهنش آنالیز کنه و متوجه باشه برای اون سایت از چه المان هایی و چه استایل ها و فریم ورک هایی استفاده شده، من یه  مدت کوتاهی در کلاس منتورینگ استاد عرفان عطارزاده شرکت کردم  ایشون مدام تمرین ها و پروژه هایی که میدادن رو رصد میکردن و با انتقاد ها و سختگیری هاشون باعث شدن میزان دقت ما در انجام پروژه ها بیشتر بشه؛ و از ایشون بسیار سپاسگزارم.https://devedoping.ir   مونا به کردار مونا به کردار Thu, 04 Nov 2021 21:29:03 +0330 https://virgool.io/@m_62466067/dom-html-%D9%88-%D9%86%D8%AD%D9%88%D9%87-%D8%AF%D8%B3%D8%AA%DA%A9%D8%A7%D8%B1%DB%8C-html-bfmmqzqwznfi با HTML DOM ، جاوااسکریپت میتونه به عناصر اچ تی ام ال دسترسی پیدا کنه و آنها رو تغییر بده.وقتی که یک صفحه وب بارگذاری میشه، مرورگر یک DOM(Document Object Model) ایجاد میکنه.HTML DOM به عنوان درختی از اشیاء ساخته شده The HTML DOM Tree of Objects با Object model، جاوااسکریپت همه قدرتی که برای ایجاد HTML پویا نیاز داره رو میگیره ازجمله: - جاوااسکریپت میتونه همه المان های HTML رو تو صفحه تغییر بده. - میتونه همه ویژگی‌های HTML رو تو صفحه تغییر بده- میتونه همه استایل های CSS رو تصفحه تغییر بده - میتونه همه المان ها و ویژگی‌های موجود در صفحه رو حذف کنه.- میتونه همه رویدادهای موجود در صفحه رو میتونه فعال کنه .- میتونه رویدادهای جدید توی صفحه ایجاد کنه.چیزهایی که در ادامه این مقاله یاد میگیریم:- چطوری محتوای المان ها رو تغییر بدیم.- چطوری استایل های css رو تغییر بدیم و چطور رویدادهای المان ها رو فعال کنیم و چطوری المان ها رو اضافه یا حذف کنیمDOMچیست ؟DOM درواقع یک w3C(World Wide Web Consortium)یک استانداردی رو برای دسترسی به اسناد مشخص میکنه.دام یک پلتفرم و زبان رابط خنثی هست که به برنامه‌ها اجازه میده به صورت پویا، به محتوا،ساختارها و استایل های سند دسترسی پیدا کنند و آن‌ها رو به‌روزرسانی کنن.W3C DOMبه سه قسمت تقسیم شده:- Core DOM : این استاندارد برای همه نو‌ع سندهای هست-XML DOM: این استاندارد برای همه سندهای XML هست -HTML DOM: برای اسناد HTML هست.HTML DOM چیست ؟ و یک رابط برنامه نویسی (programming Interface)HTML DOM درواقع برای HTML یک مدل استاندارد شی (Standard object model) هست. آن تعیین میکنه:- المان‌های HTML رو به عنوان اشیاء- خواص همه المان‌های HTML رو - روش‌هایی رو برای دسترسی به همه المان‌های HTML- رویدادهای برای همه المان‌های HTMLبه عبارت دیگه HTML DOM یک استانداری هست برای که اینکه چطوری یک المان های HTML رو بگیریم و تغییرات ایجاد کنیم؛ اضافه یا حذف کنیم.HTML DOM methods اقداماتی هستن که ما میتونیم اجرا کنیم روی المان های HTML HTML DOM properties یکسری مقدارهایی از المان های HTML هستن که ما میتونیم تنظیم کنیم و یا تغییرشون بدیم.رابط برنامه نویسی دام (The DOM programming Interface)اچ تی ام ال دام میتونه با جاوا اسکریپت دسترسی داشته باشه ( و با دیگر زبان‌های برنامه نویسی ). در دام، همه المان‌هایHTML به عنوان اشیا تعریف میشن و رابط برنامه‌نویسی خواص (properties) و روشهایی(methods) از هر شی هستن.- یک ویژگی (property) مقداری هست که ما میتونیم بگیریم یا تنظیم کنیم (مثل تغییر محتوای یک عنصر)-یک روش(method)، اقدامی هست که ما میتونیم انجام بدیم(مثل اضافه یا حذف کردن یک عنصر HTML).برای مثال:<html> <body> <p id=&quotdemo&quot></p> document.getElementById(&quotdemo&quot) = &quotHello World!&quot </body> </html>توی مثال بالا با استفاده "id="demo به المان p دسترسی پیدا کردیم و با innerHTML محتوای اون رو تغییر دادیم. و نکته قابل ذکر این هست که تو این مثال getElementById یک روش(method) درحالی که innerHTML یک ویژگی (property) هست.متدgetElementById(The getElementById Method) رایج‌ترین روش برای دسترسی به عنصر HTML استفاده از id عنصر هست؛ توی مثال بالا متد getElementById با استفاده از "Id="demo المان رو پیدا کرده. ویژگی innerHTML(The innerHTML Property)راحت‌ترین روش برای گرفتن محتوای یک عنصر استفاده از ویژگی (property)innerHTML هست. , ویژگی(property) innerHTML یک روش مفید هست برای گرفتن و تغییر دادن محتوای یک عنصر HTML.از ویژگی (property) innerHTML میتونیم برای گرفتن یا تغییر دادن هر عنصر HTML شامل <html> و <body> استفاده کنیم.The HTML DOM Document Objectاگر ما بخواهیم به هر عنصری توی صفحه HTML دسترسی پیدا کنیم، همیشه با دسترسی به document object ها شروع میکنیم. در ادامه یکسری نمونه ها رو میگیم که به ما نشون میده چطور میتونیم استفاده کنیم از document object ها و HTML رو دستکاری کنیم.پیدا کردن عنصرهای HTMLdocument.getElementById(&quotid&quot) عنصر رو با استفاده از id پیدا میکنه. document.getElementsByTabName(&quotTagName&quot) با استفاده از اسم تگ عنصر رو پیدا میکنه.| document.getElementsByClassName(&quotClassName&quot) عنصر رو با استفاده از اسم کلاس پیدا میکنهتغییر دادن عنصرهای HTMLelement= new html content محتوای عنصر رو تغییر میده element.attribute=new value مقدار ویژگی یک عنصر رو تغییر میده element.style.property=new style استایل های یک عنصر html رو تغییر میده تو این یکی نمونه از متد استفاده شده:element.setAttribute(attribute,value) مقدار ویژگی‌های یک عنصر html رو تغییر میده.اضافه کردن و حذف کردن عنصرهاdocument.createElement(element) یک عنصر جدید ایجاد میکنه document.removeChild(element) یک عنصر رو حذف میکنه document(element) یک عنصر اضافه میکنه document.replaceChild(new,old)یک عنصر رو جایگزین میکنه (text) متنی که را که میخواهیم داخل سند مینویسد( البته از این روش خیلی نباید استفاده کرد به ویژه زمانی که تمامی عنصرهای اچ تی ام ال بارگذاری شده، به خاطر اینکه این دستور overwrite میکنه و (تمام عناصر رو پاک میکنه و محتوای خودش رو جای گذاری میکنه اما نحوه اضافه کردن رویدادdocument.getElementById(id).click=function(){console.log("Hello world")}با دستور بالا کد داخل تابع با رویداد کلیک اجرا میشه.امیدوارم این مقاله براتون مفید بوده باشهمنبعw3schools.com مونا به کردار مونا به کردار Wed, 06 Oct 2021 15:32:16 +0330 https://virgool.io/@m_62466067/%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%DA%86%DB%8C%D8%B3%D8%AA-xi8opujhsfrq جاوااسکریپت یک زبان برنامه نویسی هست که به المان ها و عناصر موجود در صفحه وب ما زندگی می‌بخشه.تو این مقاله قصد داریم یادبگیریم که جاوا اسکریپت چی هست و چه کاری میتونیم باهاش انجام بدیم.جاوا اسکریپت چیست؟جاوا اسکریپت که به اختصار js هم نامیده میشه، یک زبان برنامه نویسی سطح بالا، پویا، مبتنی بر شی هست؛ که در کنار HTMLو CSS یکی از سه هسته صفحات وب هست؛ که اجازه میده خصوصیت‌های زیادی در صفحه وب پیاده سازی کنیم. به بیان ساده ‌تر اگر بخواهیم تصاویر به صورت اسلایدی نمایش داده بشن، یا خصوصیات المان ها با رویداد مشخصی تغییر کنه به خصوصیات دلخواهی که مشخص کردیم و استایل هایی که دادیم؛ یا مثلا وقتی صفحه اسکرول شد چه اتفاقی بیافته از جاوا اسکریپت کمک میگیرم.اگر بخواهیم به زبان خیلی ساده تر جاوا اسکریپت رو تعریف کنیم؛ بدن انسان مثال خوبی میتونه براش باشه. تصویر زیر رو نگاه کنینHTML: مثل اسکلت بدن ما میمونه که با استفاده از تگ های معنادار اسکلت صفحات وب ما ساخته میشنCSS مثل گوشت و پوست میمونن که رنگ و ظاهر ما رو زیبا میکنن؛ دقیقا رنگ و لعاب دادن به المان ها هم به همین صورت هست.و اما JavaScript مثل ایجاد عضلات برای حرکت هست که دقیقا مثل ایجاد کردن رویدادهایی برای المان ها و حرکت اسلایدی تصاویر و حتی امکان فیلتر کردن المان ها هست.به مثال زیر توجه کنین.<p>Player 1: Chris</p> خروجی=> Player 1:Chrisتو قدم بعدی یکسری استایل با Css بهش میدیم تا جدابتر بشهp { font-family: 'helvetica neue', helvetica, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-align: center; border: 2px solid rgba(0,0,200,0.6); background: rgba(0,0,200,0.3); color: rgba(0,0,200,0.6); box-shadow: 1px 1px 2px rgba(0,0,200,0.4); border-radius: 10px; padding: 3px 10px; display: inline-block; cursor: pointer;}خروجی مثال بالاو در نهایت با استفاده از کد های جاوااسکریپت یکسری رفتارهای پویا به المان اضافه میکنیم:const para = document.querySelector('p'); با استفاده از این دستور به المان دسترسی پیدا کردیم para.addEventListener('click', updateName);و با این دستور یک رویداد به المان اضافه کردیم در واقع با کلیک روی المان تابعی که در زیر نوشته شده اجرا میشود.function updateName() { let name = ('BUTTON'); para.textContent = 'Player 1: ' + name; }خروجی تابعدر واقع با کلیک روی المان اسم المان به نام دلخواه ما تغییر میکند.بنابراین جاوااسکریپت واقعا چه کاری میتونه انجام بده؟جاوا اسکرپیت زبان برنامه نویسی سمت سرور و سمت کاربر هست که شامل ویژگی های برنامه نویسی رایجی هست که به ما اجازه میده کارهایی از قبیل زیر رو انجام بدیم:این امکان رو به ما میده تا مقادیر مفیدی رو داخل متغیرها ذخیره کنیم. همانند مثال بالا که ما مقدار رشته‌ای BUTTON رو داخل متغییری به نام name ذخیره کردیم.ایجاد عملیات روی تکه ای از متن، توی مثال بالا ما یه بخشی از متن رو "player 1" رو گرفتیم و ترکیبش کردیم با مقدار متغیر name , و برای المان یک برچسب کامل ایجاد کردیم.اجرای کد در پاسخ به بعضی از رویدادهایی که اتفاق میافته، تو مثال بالا از رویداد "click" استفاده شده و زمانی که روی المان کلیک اتفاق بیفته متن المان به روزرسانی میشه.و ...با این حال چیزی که حتی هیجان‌انگیز تر هست، عملکردی است که روی زبان جاوا اسکریپت سمت کاربر ساخته شده و به اصطلاح رابط برنامه نویسی برنامه (Application programming Interfaces) قدرتهای فوق‌العاده ای در اختیار ما قرار میده که میتونیم توی کدهامون ازش استفاده کنیم. Api مجموعه ای آماده ای از کدهای بلوک های سازندهای هستند مه به توسعه دهند اجازه میدن اجرا کنن برنامه هایی که پیاده سازی آنها سخت با غیرممکن هست.اینکه شما برای ساخت یک کتابخانه پنلهای بریده شده رو کنار هم قرار بدید و پیچ بزنید خیلی راحتتر از آن هست که طرح رو خودتون طراحی کنید پنل ها رو در اندازه های مشخص برش بدید، کنار هم قرار بدید و پیچ کنید.آنها به طور کلی به دو دسته تقسیم‌بندی میشنBrowser APIs3rd party APIsBrowser APIs روی مرورگر ما نصب میشن و قادر هستن داده ها رو از محیط کامپیوتر اطراف به نمایش بگذارن یا کارهای پیچیده مفیدی انجام بدن. برای مثال :DOM(document objects model) APIاین امکان رو به ما میده که HTML و CSS رو دستکاری کنیم مثلا المان یا استایلی رو ایجاد کنیم؛ حذف کنیم و یا HTML رو تغییر بدیم؛ استایل های جدید پویا به صفحه مون اضافه کنیک.هر زمان که ما میبینیم پنجره ای توی صفحه ما ظاهر میشه و یا محتوای جدید نمایش داده میشه از DOM استفاده شده.<p id=&quot&quotcontent&quot>Expamle</p>/js/let content=document.getElementById(&quotcontent&quot)در این مثال با استفاده از DOM به المان دسترسی پیدا کردیم حالا میتونیم المان رو حذف کنیم، بهش استایل بدیم ، یا بهش رویدادی رو اضافه کنیم.Geolocation APIاطلاعات جغرافیایی رو بازیابی میکنه ، و قادر هست اون محل، و نقطه رو روی نقشه پیدا کنه. canvas & WebGl APIsاین امکان رو فراهم میکنن که ما یکسری گرافیک های متحرک دو بعدی و سه بعدی ایجاد کنیم. مردم با استفاده از این فناوری های وب کارهای خارق‌العاده انجام میدن.Third party APIsآن‌ها عموما به طور پیش فرض توی مرورگر تعبیه نشده اند و ما باید آن کدها و اطلاعات رو از جایی در وب دریافت کنیم. برای مثال:Twitter APIs به ما اجازه میدن که کارهایی شبیه به نمایش دادن آخرین توییت انجام بدیم.Google Map API & OpenStreetMap APIاین امکان رو برای ما فراهم میکنن که نقشه های سفارشیمون رو داخل وبسایتمون یا عملکردهای مشابه جاسازی کنیم.جاوااسکریپت روی صفحه وب ما چگونه کار میکنه؟بریم به طور خلاصه بگیم که چه اتفاقی می‌افته وقتی صفحه وب ما در یه مرورگر لود میشه، ,وقتی که ما لود میکنیم یک صفحه وب رو در یک مرورگر؛ کدهای ما اجرا میشن داخل یک محیط اجرا؛ اون مثل یک کارخونه هست که توی یک سطر مواد اولیه(کدها ) رو میگیره و محصول رو خارج میکنه(صفحه وب) .رایج‌ترین استفاده از جاوااسکریپت؛ تغییرات HTML و CSS به صورت پویا هست؛ برای به روز کردن رابط کاربری از طریق DOM( Document Object Model API) هست. باید توجه داشته باشیم که کدها در داکیومنت صفحه وب ما به طور کلی لود شده باشن و به ترتیب نمایش داده شده اجرا بشن؛ اگر جاوااسکرپیت قبل از HTML و CSS ی که قصد تغییرش رو داریم اجرا و بارگذاری بشه ممکنه خطا رخ بده.چطوری جاوااسکریپت رو به صفحه‌مون اضافه کنیم: به سه روش می تونیم این کار رو انجام بدیم.1- Internal2- External3- Inline(که خیلی توصیه نمیشه)روش Internal اول از همه یک نمونه فایل html درست میکنیم و در پوشه ای در جایی معقول ذخیر میکنیم. بعد فایل رو در صفحه مرورگر و text Editor باز میکنیم. توی تگ<head></head> تگ رو قرار میدیم و کد مون رو داخلش مینویسیم. به طور مثال:<head>document.addEventListener(&quotDOMContentLoaded&quot, function() { function createParagraph() { let para = document.createElement('p'); para.textContent = 'You clicked the button!'; document.body(para); } const buttons = document.querySelectorAll('button'); for(let i = 0; i < buttons.length ; i++) { buttons[i].addEventListener('click', createParagraph); }});</head>و حالا کدمون رو ذخیره میکنیم و صفحه وب رو Refresh میکنیم. خواهیم دید که اگر روی دکمه کلیک کنیم بک پاراگراف جدید ایجاد میشه و زیر هم قرار میگیره.Externalاین روش خیلی خوب جواب میده. اگر بخواهیم جاوااسکرپیتمون رو در یک فایل خارجی قرار بدیم چی؟ با هم بررسی میکنیم؟ اول از همه باید یک فایل ایجاد کنیم توی یک پوشه و به مثال اسمش رو بذاریم main.js باید دقت کنیم که حتما پسوند فایل باید js. باشه ، بعدش باید به جای کد بالا کد زیر رو بنویسیم<script src="script/main.js">و حالا کد حالا جاوااسکریپت رو داخل فایلی که با نام main.js ایجاد کردیم اضافه میکنیم و با کد بالا درواقع فایل جاواسکریپتی به صفحه HTML ما لینک شده.داخل فایل main.jsfunction createParagraph() { let para = document.createElement('p'); para.textContent = 'You clicked the button!'; document.body(para);}const buttons = document.querySelectorAll('button');for(let i = 0; i < buttons.length ; i++) { buttons[i].addEventListener('click', createParagraph);}اگر ما فایلمون رو ذخیره کنیم و صفحه وب رو رفرش کنیم دقیقا همون چیزها رو خواهیم دید با همان کارکرد. با این تفاوت که الان کدهای ما داخل یک فایل خارجی قرار گرفتن این روش خیلی خوبی برای سازماندهی کردن کدهامون هست و به علاوه صفحه ی HTML ما در حجم عظیمی از تکه کدها ی بزرگ گیر نمی‌افته و به راحت خونده میشه.internal گاهی اوقات ما برخی کدهای جاواسکریپت رو به صورت inline تو HTML استفاده میکنیم.function createParagraph() { let para = document.createElement('p'); para.textContent = 'You clicked the button!'; document.body(para);}<button ="createParagraph()">Click me!</button>این روش هم دقیقا همون عملکرد مثال های قبل رو داره جز اینکه </button><buttom> شامل یک () به صورت inline هست برای کنترل کردن تابع وقتی روی دکمه کلیک میشه. اما با این حال لطفا از این روش استفاده نکنید! این تمرین بدی هست برای آلوده کردن HTML با جاوااسکریپت و ناکارآمد هست اگر بخواهیم این کد رو به هر دکمه توی صفحه HTML اضافه کنیم.نکته مهم:ما به همه این تفاسیر بهتر هست که تگ script رو داخل تگ body و در انتهای اون قرار بدیم تا المان های سند HTML به طور کامل بارگذاری بشه و بعد جاوااسکریپت اجرا بشهامیدوارم مطالب مفید بوده باشه بخش زیادی از این مقاله، ترجمه مقاله‌ای از سایت developer.mozilla.org هست. مونا به کردار مونا به کردار Tue, 05 Oct 2021 18:36:33 +0330 https://virgool.io/@m_62466067/%D9%85%D8%B9%D8%B1%D9%81%DB%8C-%D8%B1%D9%88%D8%B4-bem-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%86%D8%A7%D9%85%DA%AF%D8%B0%D8%A7%D8%B1%DB%8C-%DA%A9%D9%84%D8%A7%D8%B3%D9%87%D8%A7-bxvruf4wt0v1 نگهداری و گسترش پروژه های بزرگ یکی از مهمترین مراحل توسعه است که در تمام زبان ها و تکنولوژی ها اهمیت خود را نشان می دهد. در مورد طراحی صفحات وب و سی اس اس هم این موضوع وجود دارد و از اهمیت بالایی برخوردار است. یکی از مباحثی که در این رابطه همیشه مطرح می شود نام‌گذاری کلاس ها می باشد که روش های زیادی به مرور معرفی شدند که در بین این روش ها روش BEM محبوبیت خاصی بین توسعه دهندگان دارد. متدهای مختلفی در زمینه css وجود داره از جمله ،BEM ،OOCSS، SMACSS، SUITCSS،Atomicکه در اینجا به بررسی روش BEM می پردازیم مقدمه متد BEM که مخفف سرواژگان Element ،Block و Modifier می‌باشد، روشی کامپوننت محور است در زمینه‌ی توسعه‌ی وب. ایده‌ی اصلی این متد، تقسیم رابط کاربری (User Interface) به بلاک‌های مستقل است. این شیوه، عملیات توسعه را آسان و سریع کرده و همچنین امکان استفاده‌ی مجدد کدها را فراهم می‌کند.بلاک (Block) بلاک: جزء (component) مستقلی از صفحه که قابلیت استفاده مجدد را داراست. در سند HTML، بلاک‌ها در ویژگی class نمایش داده می‌شوند. نام بلاک (Block) باید هدف آن را توصیف کند. در واقع چیستی آن را، مثلا menu. نه این که وضعیت ظاهری و شکل آن را بیان کند، مثلا نباید چیزی شبیه red یا big باشد.مثال: <div class=&quoterror&quot></div>  <div class=&quotred-text&quot></div> در مثال بالا حالت اول صحیح است چرا که از لحاظ معنایی، error وضعیت و حالت را بیان می‌کند در حالی که red-text بیان‌کننده ظاهر و استایل است.    یک Block نباید محیط اطرافش را تحت تأثیر قرار دهد. یعنی نباید margin یا position به خصوصی داشته باشد. همچنین وقتی که از روش BEM استفاده می‌کنید، نباید از تگ‌ها و ID عناصر در CSS استفاده کنید، بلکه فقط استفاده از کلاس مجاز است. این موارد، استقلال مورد نیاز Block را برای استفاده‌ی مجدد یا جابجایی آن به هر قسمتی از پروژه، تضمین می‌کند.ویژگی‌ها:۱) تورفتگی (Nesting) بلاک‌ها را می‌توان داخل یکدیگر استفاده کرد. همچنین عمق این تورفتگی‌ها به هر تعدادی می‌تواند باشد. برای مثال بلاک head می‌تواند شامل فهرست (menu)، لوگو (logo)، فرم جستجو (search) و بخش ورود (auth) باشد.<!-- `header` block --> <header class=&quotheader&quot> <!-- Nested `logo` block --> <div class=&quotlogo&quot></div> <!-- Nested `search-form` block --> <form class=&quotsearch-form&quot></form> </header>در مثال بالا دو بلاک search-form و logo، داخل بلاک header قرار گرفته‌اند.۲) جاگیری دلخواه (Arbitrary placement)بلاک‌ها به علت ماهیت مستقلشان می‌توانند بدون نیاز به تغییر در کدهای CSS یا جاوااسکریپتی که دارند، به هر نقطه‌ای از صفحه جابجا شوند.برای مثال بلاک logo به راحتی می‌تواند با بلاک auth جابجا شود، بدون نیاز به تغییر در کدهای CSS یا جاوااسکرپیت.۳) استفاده‌ی مجدد (Re-use)بلاک‌ها می‌توانند به هر تعداد مورد استفاده‌ی مجدد قرار بگیرند. در واقع ممکن است در یک طرح چند نمونه از یک بلاک استفاده شود.عنصر (Element)عنصر: قسمتی از یک بلاک (block) که به صورت مجزا قابل استفاده نیست.برای مثال آیتم‌های یک منو خارج از فضای اصلی آن استفاده نمی‌شوند بنابراین هر آیتم یک عنصر است.نام عنصر (Element) باید هدف آن را توصیف کند. در واقع چیستی آن را، مثلا item یا text. نه این که بیانگر شکل ظاهری آن باشد، مثلا نباید چیزی شبیه red یا big باشد.ساختار نام کامل یک عنصر به صورت block-name__element-name است.نام عنصر توسط دو تا underscore ( __ ) از نام بلاک جدا می‌شود.مثال:<!-- `search-form` block --> <form class=&quotsearch-form&quot> <!-- `input` element in the `search-form` block --> <input class=&quotsearch-form__input&quot> <!-- `button` element in the `search-form` block --> <button class=&quotsearch-form__button&quot>Search</button> </form>در مثال بالا search-form بلاک است و search-form__input و search-form__button دو عنصر متعلق به آن هستند.ویژگی‌ها:۱) تورفتگیعنصرها را نیز همانند بلاک‌ها می‌توان داخل یکدیگر استفاده کرد. همچنین عمق این تورفتگی‌ها به هر تعدادی می‌تواند باشد.یک عنصر همیشه بخشی از یک بلاک است نه یک عنصر دیگر.به این معنا که نام عناصر نمی‌تواند به صورت سلسله مراتبی مثل block__elem1__elem2 تعریف شود.مثال:<!-- Correct. The structure of the full element name follows the pattern: `block-name__element-name` --> <form class=&quotsearch-form&quot> <div class=&quotsearch-form__content&quot> <input class=&quotsearch-form__input&quot> <button class=&quotsearch-form__button&quot>Search</button> </div> </form> <!-- Incorrect. The structure of the full element name doesn't follow the pattern: `block-name__element-name` --> <form class=&quotsearch-form&quot> <div class=&quotsearch-form__content&quot> <!-- Recommended: `search-form__input` or `search-form__content-input` --> <input class=&quotsearch-form__content__input&quot> <!-- Recommended: `search-form__button` or `search-form__content-button` --> <button class=&quotsearch-form__content__button&quot>Search</button> </div> </form>در حالت دوم مثال بالا، نام‌گذاری عناصر طبق الگو صورت نگرفته و صحیح نیست.در واقع نام بلاک، namespace را تعریف می‌کند، که نشان می‌دهد عناصر به کدام بلاک وابسته هستند: block__elem.یک بلاک می‌تواند ساختار تودرتویی از عناصر را در DOM داشته باشد.مثال:<div class=&quotblock&quot> <div class=&quotblock__elem1&quot> <div class=&quotblock__elem2&quot> <div class=&quotblock__elem3&quot></div> </div> </div> </div>با این حال در متدولوژی BEM، این ساختار بلاک همیشه نماینده‌ی لیستی مسطح از عناصر است.مثال:.block {} .block__elem1 {} .block__elem2 {} .block__elem3 {}که این امکان به وجود می‌آید تا بتوان بدون نیاز به تغییر دادن کدهای هر عنصر، ساختار DOM بلاک را تغییر داد.مثال:<div class=&quotblock&quot> <div class=&quotblock__elem1&quot> <div class=&quotblock__elem2&quot></div> </div> <div class=&quotblock__elem3&quot></div> </div>در مثال بالا گر چه ساختار بلاک تغییر کرده اما قواعد عناصر و نام‌گذاری آن‌ها همچنان باقی و حکم‌فرماست.۲) عضویتیک عنصر همیشه عضو یک بلاک است و نباید به صورت مجزا از بلاک، مورد استفاده قرار بگیرد.مثال:<!-- Correct. Elements are located inside the `search-form` block --> <!-- `search-form` block --> <form class=&quotsearch-form&quot> <!-- `input` element in the `search-form` block --> <input class=&quotsearch-form__input&quot> <!-- `button` element in the `search-form` block --> <button class=&quotsearch-form__button&quot>Search</button> </form> <!-- Incorrect. Elements are located outside of the context of the `search-form` block --> <!-- `search-form` block --> <form class=&quotsearch-form&quot> </form> <!-- `input` element in the `search-form` block --> <input class=&quotsearch-form__input&quot> <!-- `button` element in the `search-form` block--> <button class=&quotsearch-form__button&quot>Search</button>در حالت دوم مثال بالا، دو عنصر search-form__input و search-form__button که متعلق به بلاک search-form هستند، خارج از فضای بلاک خود استفاده شده‌اند که غلط است !۳) اختیاری بودنیک عنصر جزء اختیاری بلا ک است. همه‌ی بلاک‌ها، لزوما شامل عنصر نیستند.مثال:<!-- `search-form` block --> <div class=&quotsearch-form&quot> <!-- `input` block --> <input class=&quotinput&quot> <!-- `button` block --> <button class=&quotbutton&quot>Search</button> </div>فرضا در مثال بالا input و button عنصرهای بلاک search-form نیستند و هر کدام برای خودشان بلاکی شدند ماشالا !الان باید بلاک بسازم یا عنصر ؟!اگر قرار است ـ یا باید این امکان باشد ـ که این بخش مجددا در صفحه مورد استفاده قرار بگیرد و همچنین اگر این بخش به اجزا و بخش‌های دیگر صفحه وابستگی ندارد، باید بلاک بسازیم.اما اگر امکان استفاده‌ی مجدد آن به صورت مجزا (بدون وابستگی به به بخشی دیگر) وجود نخواهد داشت، یعنی اگر بخواهیم این بخش را مجدد استفاده کنیم نیاز داریم بخش‌های دیگری را هم بیاوریم آن وقت باید. عنصر بسازیم.پیراینده (Modifier)پیراینده: ماهیتی است که ظاهر، حالت و رفتار یک بلاک یا عنصر را مشخص می‌کند.برای مثال ظاهر یک بلاک فهرست (menu) می‌تواند توسط یک پیراینده تغییر کند.نام پیراینده می‌تواند بیانگر هر یک از موارد زیر باشد:شکل ظاهری آن، مثلا این که چه اندازه‌ای دارد (size_s)حالت آن، مثلا این که چه تفاوتی دارد (disabled یا focused)رفتار آن، مثلا این که چه واکنشی نشان می‌دهد (directions_left-top)نام پیراینده توسط یک underscore ( _ ) از بلاک یا عنصر جدا می‌شود.انواع پیراینده (Modifier)۱) نوع Booleanاین نوع پیراینده زمانی استفاده می‌شود که صرفا بودن یا نبودن پیراینده مورد اهمیت است نه مقدار آن. برای مثال disabled.وقتی یک Modifier از نوع Boolean استفاده می‌شود در واقع بیانگر True بودن مقدار آن است.ساختار نام کامل این نوع پیراینده به صورت زیر است:block-name_modifier-name (پیراینده‌ی یک بلاک)block-name__element-name_modifier-name (پیراینده‌ی یک عنصر)مثال:<!-- The `search-form` block has the `focused` Boolean modifier --> <form class=&quotsearch-form search-form_focused&quot> <input class=&quotsearch-form__input&quot> <!-- The `button` element has the `disabled` Boolean modifier --> <button class=&quotsearch-form__button search-form__button_disabled&quot>Search</button> </form>در مثال بالا search-form_focused پیراینده‌ی بلاک search-form و search-form__button_disabled پیراینده‌ی عنصر search-form__button است و هر دو پیراینده از نوع Boolean می‌باشند.۲) نوع Key-valueاین نوع پیراینده زمانی استفاده می‌شود که مقدار پیراینده اهمیت دارد. برای مثال برای منویی با تم islands داریم: menu_theme_islands.ساختار نام کامل این نوع پیراینده به صورت زیر است:block-name_modifier-name_modifier-value (پیراینده‌ی یک بلاک)block-name__element-name_modifier-name_modifier-value (پیراینده‌ی یک عنصر)مثال:<!-- The `search-form` block has the `theme` modifier with the value `islands` --> <form class=&quotsearch-form search-form_theme_islands&quot> <input class=&quotsearch-form__input&quot> <!-- The `button` element has the `size` modifier with the value `m` --> <button class=&quotsearch-form__button search-form__button_size_m&quot>Search</button> </form> <!-- You can't use two identical modifiers with different values simultaneously --> <form class=&quotsearch-form search-form_theme_islands search-form_theme_lite&quot> <input class=&quotsearch-form__input&quot> <button class=&quotsearch-form__button search-form__button_size_s search-form__button_size_m&quot> Search </button> </form>در قسمت اول مثال بالا search-form_theme_islands پیراینده‌ی بلاک search-form و search-form__button_size_m پیراینده‌ی عنصر search-form__button است و هر دو پیراینده از نوع Key-value می‌باشند.در قسمت دوم مثال، دو پیراینده که Key یکسان و Value متفاوت دارند، به صورت همزمان برای یک بلاک یا عنصر مورد استفاده قرار گرفتند که از لحاظ منطقی صحیح نیست.استفاده از پیراینده (Modifier)یک پیراینده هیچ وقت به تنهایی استفاده نمی‌شود.از دیدگاه BEM، یک پیراینده را نمی‌تواند فارغ از یک بلاک یا عنصر استفاده کرد. بلکه یک پیراینده باید ظاهر، حالت یا رفتار یک ماهیتی را (بلاک یا عنصر) تغییر دهد.مثال:<!-- Correct. The `search-form` block has the `theme` modifier with the value `islands` --> <form class=&quotsearch-form search-form_theme_islands&quot> <input class=&quotsearch-form__input&quot> <button class=&quotsearch-form__button&quot>Search</button> </form> <!-- Incorrect. The modified class `search-form` is missing --> <form class=&quotsearch-form_theme_islands&quot> <input class=&quotsearch-form__input&quot> <button class=&quotsearch-form__button&quot>Search</button> </form>در قسمت دوم مثال بالا، پیراینده‌ی search-form_theme_islands که مربوط به بلاک search-form است به صورت تنها استفاده شده که صحیح نیست.روش‌های جایگزین در نام‌گذاریقواعدی که تا اینجا برای نام‌گذاری ذکر شد باید در چارچوب اعداد و حروف کوچک انگلیسی استفاده شوند، همچنین برای جدا کردن کلمات از یکدیگر باید از خط تیره ( - ) استفاده کرد.اما چندین روش جایگزین نیز در نام‌گذاری وجود دارد که می‌توان مورد استفاده قرار داد.۱) Two Dashes styleblock-name__elem-name--mod-nameنام‌ها با حروف کوچک انگلیسی (lower case) نوشته می‌شوند.کلمات با خط تیره ( - ) از هم جدا می‌شوند.نام عنصر توسط یک underscore ( _ ) از نام بلاک جدا می‌شود.نام پیراینده‌های از نوع Boolean توسط دو تا خط تیره ( -- ) از نام عنصر یا بلاک مربوط جدا می‌شوند.تذکر: گاهی ممکن است دو خط تیره‌ی استفاده شده، در اعتبار سنجی سند HTML به عنوان comment تفسیر شوند.۲) CamelCase styleMyBlock__SomeElem_modName_modValاین روش بر پایه‌ی شیوه‌ی معروف camelCase است با این تفاوت که نام ماهیت‌های BEM (بلاک، عنصر یا پیراینده)‌ توسط underscore از یکدیگر جدا می‌شوند.۳) “Sans underscore” styleblockName-elemName--modName--modValنام‌ها به صورت camelCase نوشته می‌شوند.نام عنصر توسط یک خط تیره ( - ) از نام بلاک جدا می‌شود.نام پیراینده توسط دو تا خط تیره ( -- ) از نام عنصر یا بلاک مربوط جدا می‌شود.مقدار یک پیراینده توسط دو تا خط تیره ( -- ) از نام آن جدا می‌شود.تذکر: گاهی ممکن است دو خط تیره‌ی استفاده شده، در اعتبار سنجی سند HTML به عنوان comment تفسیر شوند.کدام روش نام‌گذاری بهتر است ؟در متدولوژی BEM، قواعد کلی نام‌گذاری مطرح می‌شود و انتخاب روش نام‌گذاری کاملا به نیازمندی‌های شما و پروژه بستگی دارد. در واقع روشی بهتر است که بهتر پاسخگوی نیازهای شما باشد.مزایای BEMکارایی (Performance)وقتی از BEM استفاده کنید تمام انتخابگرهای CSS به اصطلاح flat خواهند بود. به این معنی که انتخابگرهای نسلی مثل انتخابگر زیر که بار محاساباتی سنگین‌تری دارند، وجود نخواهند داشت. در نتیجه سرعت بارگذاری صفحه به مراتب بالاتر خواهد رفت..header .nav .nav-item {}برای بررسی بیشتر این موضوع به مطلب مربوط به بهبود کارایی انتخابگرها مراجعه کنید.خوانایی (Readability)تمام اطلاعات مورد نیاز با بررسی کد HTML به دست خواهد آمد. به سرعت پیراینده‌ها و عناصر متعلق به یک بلاک معلوم می‌شوند. می‌توان فورا به کدهای CSS مربوطه دست پیدا کرد، بدون نیاز به چک کردن وابستگی‌های پشت سر هم.انعطاف‌پذیری (Flexibility)از آنجایی که هر بلاک کاملا مستقل است، می‌توان بدون هیچ گونه نگرانی آن را به هر نقطه‌ای از صفحه انتقال داد یا کپی کرد. همچنین چون در BEM فقط از کلاس استفاده می‌شود هر زمان که نیاز شد می‌توان تگ‌ها را تغییر داد.علاوه‌ی بر این‌ها، BEM به راحتی قابل فهم و یادگیری آن بسیار آسان است.ایراد ‌BEMمهم‌ترین ایرادی که در BEM به وجود می‌آید طولانی و زشت شدن نام کلاس‌هاست که خب برای آنها که زیبایی کد را به قابلیت نگه‌داری آن ترجیح می‌دهند مهم است !روش‌های جایگزینعلاوه بر BEM، متد‌های دیگری نیز در زمینه CSS وجود دارند مثل OOCSS، SMACSS، SUITCSS و Atomic که اگر علاقه‌مند هستید می‌توانید درباره‌ی آنها بیشتر بخوانید. مونا به کردار مونا به کردار Thu, 30 Sep 2021 21:02:38 +0330 https://virgool.io/@m_62466067/%D9%81%D9%88%D9%86%D8%AA-%D8%A2%DB%8C%DA%A9%D9%86-eqy2zwhctkol امروزه توسعه دهنده‌های زیادی توی طراحی سایتشون از فونت آیکن ها بهره میگیرن. و دلایلی وجود داره که به ما ثابت میکنه که استفاده از فونت آیکن ها بهتره. اول از همه باید بدونیم اصلا فونت آیکن‌ها چی هستن و مزایا و معایبشون چی هست؟ و در ادامه یکی از از محبوترین فونت ها آیکن ها رو بررسی میکنیم و لینکش رو براتون میذارم که بدونیم چطور ازشون استفاده کنیم.فونت آیکن‌ها چی هستن؟فونت آیکن‌ها مفهوم جدیدی از فونت رو معرفی کردن. قبلا برای استفاده از آیکن‌ها توی طراحی سایت، باید از نرم‌افزارهایی چون فوتوشاپ استفاده میکردیم که البته مشکلاتی رو به همراه داشت از جمله اینکه مثلا اگر تغییر رنگ داشت می بایست مجدد با استفاده از همین نرم‌افزارها رنگ آیکن ها رو تغییر میدادیم تا بتونیم ازشون استفاده بکنیم.مزایا معایب فونت آیکن‌ها استفاده از فونت آیکن‌ها مزایای قابل توجهی داره که در زیر بهش اشاره میکنیم: اول از همه باید گفت که هر سبک css رو میتونید به آن‌ها اعمال کنید دوم اینکه چون گرافیک آنها وکتور هست ؛ اگر اندازه‌های این آیکن ها رو تغییر بدیم ؛ به اندازه‌های دلخواه ما تغییر میکنن بدون اینکه کیفیتشون رو از دست بدن.استفاده از فونت آیکن‌ها میزان خواندن/نوشتن روی سرور را کاهش می دهد که منجر به کاهش مصرف پهنای باند در سایت های پربازدید خواهد شد.سرعت بارگذاری صفحات وب از اهمیت بالایی برخودار هست ؛ یکی از راه های کاهش حجم صفحات وب کش کردن آن‌هاست؛ بنابراین کش کردن آیکن ها به مراتب راحت‌تر است تصاویر هست. و همینطور چون سایز کوچیکی دارن به سرعت لود میشن.یکی دیگر از فواید استفاده از فونت ها امکان استفاده از آنها در بخش هایی مانند سلکتورها (Selector) در صفحات وب است. برای مثال سلکتورهای :after و :before آیکن‌ها به وب اپلیکیشن‌ها و صفحات وب جلوه ویژه‌ای میدن و مفهوم نوشته ها رو برای ما راحت‌تر میکنن. برای مثال برای نشون دادن لینک ‌های شبکه های اجتماعی به جای نوشته آدرس لینک یا فقط نوشته عنوان شبکه اجتماعی از آیکن‌ها استفاده میکنیم که رابط کاربری صفحه ما رو جذاب تر میکنه. نکته آخر اینکه در همه مرورگرها (حتی قبل از IE6) آن ها رو پشتیبانی میشن.با این مزایایی که عنوان شد آیا استفاده از فونت آیکن‌ها برای همه موارد مناسب هست؟مشخص‌که نه ....استفاده از فونت آیکن‌ها روش‌ خیلی خوبی برای راحت‌تر کردن طراحی یک پروژه هست، اما محدودیت‌هایی دارن. برای مثال : اگر ما بخواهیم توی پروژه خودمون یه عکس پیچیده نشون بدیم به جای یه آیکن ساده؛ اون موقع استفاده از فونت آیکن راه حل خوبی نیست. معمولا آنها محدود به یک رنگ هستن مگر اینکه یکسری ترفندهای css بهشون اعمال کنیم. علاوه بر این فونت آیکن‌ها با توجه به اندازه‌های خاص طراحی شدن برای مثال: 32×32 ، 16×16و غیره و اگر شما به هر دلیلی اندازه 25×25 بخواهید. احتمالا از فونت آیکن‌ها نتیجه خاصی دریافت نمیکنید.(البته مشخصه های خاص css میتونن کمک‌کننده باشن)شایان ذکر هست که فراتر از آیکن فونت‌ها؛ راه‌حل‌های محبوب دیگه‌ای وجود داره برای آیکن‌های وکتور مثلا آیکن‌های SVG، این‌ها قابلیت این رو دارن که یکسری مشکلاتی رو که فونت آیکن‌ها دارن پوشش بدن برای مثال میتونیم بیشتر از یک رنگ بهشون اعمال کنیم.معرفی کتابخونه فونت آیکنیکی از کتابخونه‌های معروف فونت آیکن Font Awesome هست. Font Awesome: مجموعه ای از 439 آیکن هست این کتابخانه برای استفاده شخصی یا تجاری کاملا رایگان هست، و به طور طبیعی برای فریم ورک بوت استرپ طراحی شده؛ با این حال شما توی هر کتابخونه ای که بخواید می تونید استفاده کنید نحوه استفاده از آیکن‌های Font Awesome . https://virgool.io/p/eqy2zwhctkol/%D8%A2%D9%85%D9%88%D8%B2%D8%B4%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87%D8%A7%D8%B2%D9%81%D9%88%D9%86%D8%AA%D8%A2%DB%8C%DA%A9%D9%88%D9%86FontAwesome5%D8%AF%D8%B1%D8%B5%D9%81%D8%AD%D8%A7%D8%AA%D9%88%D8%A8-%D8%A7%D8%AF%D9%85%DB%8C%D9%86%D8%B3%D8%A7%DB%8C%D8%AA(adminesite.com) بخشی از متن های این وبلاگ؛ ترجمه مقاله سایت sitepoint.com هست. مونا به کردار مونا به کردار Mon, 27 Sep 2021 15:44:07 +0330 https://virgool.io/@m_62466067/%D9%88%D8%A7%D8%AD%D8%AF%D9%87%D8%A7%DB%8C-%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%D9%87-%DA%AF%DB%8C%D8%B1%DB%8C-%D8%AF%D8%B1-css-dny2w7vfju9r واحد های اندازه گیری رو در به دو دسته واحد های مستقل و واحد های وابسته تقسیم‌بندی میکنیم.واحد های مستقل، واحد هایی هستن که اندازه اون ها در هر حالتی ثابت باقی می‌مونه.این واحد ها، به اندازه دیگه ای وابسته نیستن و در تمامی حالت های مختلف صفحه وب سایت، مقدار خودشون رو حفظ می‌کنن.واحد های مستقل عبارتند از:px: پیکسلpt: نقطه یا pointpc: پیکاcm: سانتی مترmm: میلی مترin: اینچواحد px یا پیکسلواحد پیکسل، معمولا جزء رایج‌ترین واحدی هست که در css به کار میره؛ با این حال چون در طراحی واکنش گرا ما رو با چالش مواجه میکنه؛ خیلی استفاده از این واحد توصیه نمیشه.به صورت پیشفرض، اندازه پیکسل ها توی دستگاه های مختلف، می‌تونه متفاوت باشه.ساده بگم، در CSS، اندازه پیکسل با تعریف کوتاه زیر مشخص شده:1px = 1/96 inبدین ترتیب، با توجه به نامتغیر بودن واحد اینچ، ابعاد یک پیکسل در تمامی دستگاه ها یکسان خواهد بود.واحد pt یا نقطهواحد نقطه، شباهت بسیاری به واحد پیکسل داره.این واحد، ثابت و نامتغیر هست و در تمامی دستگاه ها به یک اندازه ظاهر می‌شه.تفاوت واحد نقطه و پیکسل، تنها در اندازه اون هاست. ابعاد واحد نقطه به شکل زیر مشحص می‌شه:1pt = 1/72 inواحد pc یا پیکاواحد پیکا معمولا خیلی مورد استفاده قرار نمیگیره.اندازه اش هم یه اندزه ثابت و نامتغیر هست.1pc = 1/6 inواحد های اینچ، میلی متر و سانتی متراین واحد ها هم در css مورد استفاده قرار نمیگرن، چون کاربردشون در مسائل دیگه‌ای هست.1 in = 2.54 cm = 25.4 mmواحد های وابسته در CSSواحد های وابسته، واحد هایی هستن که اندازه‌هاشون ثابت نیست و بر اساس اندازه های دیگه در صفحه وب سایت ما تعریف می‌شن. مثلا المان والد و فرزند از این المان استفاده بکنند؛ اندازه استفاده شده برای عنصر فرزند بر اساس اندازه والد تغییر پیدا میکنه.مهم ترین این واحد ها، عبارتند از:%vw و vhemchremواحد % یا درصداین واحد، رایج ترین واحد استفاده شده در cssهست . که برای سهولت در طراحی واکنشگرا بهتر هست که از این واحد اندازه گیری استفاده بشهیک عنصر div با کد زیر رو فرض کنین:div{ width: 90%; }تو مثال بالا div ما عرض 90% گرفته، این عنصر تحت هر شرایطی(چه صفحه تبلت باشه ؛ چه صفحه موبایل) هموازه 90% صفحه والد خودش رو اشغال میکنه.واحد های vh و vwاین واحد ها، مخفف عبارات viewport height و viewport width هستن.به قسمتی از صفحه وب که ما مشاهده میکنیم viewportگفته میشه.این واحد ها مثل درصد عمل میکنن؛‌اما وجه تمایزشون در این هست که اندازه هاشون دیگه به والد بستگی نداره بلکه به اندازه صفحه نمایش بستگی داره.به کد زیر توجه کنین:div{    width: 40vw; }توی مثال بالا اندزه عنصر ما همواره 40درصد عرض viewport ماهست. vh هم مشابه vw هست با این تفاوت که ارتفاع عنصر رو برحسب ارتفاع viewport تعریف میکنه.واحد emاین واحد، تغییرات خودش رو بر حسب سایز فونت عنصر پدر انجام می‌ده.فونت ها می‌تونن سایز های متفاوتی داشته باشن، برای آشنایی با سایز فونت در CSS می‌تونین به مقاله font-size در CSS مراجعه کنین.برای درک بهتر این واحد، به کد زیر توجه کنین:کد HTML:<div class=&quotparent&quot> <div class=&quotchild&quot></div> </div>کد CSS:div.parent{ font-size: 16px; } div.child{ width: 3em; }واحد em، همواره به عنوان شاخصی از سایز فونت عنصر پدر عمل می‌کنه.بر اساس کد بالا، عرض عنصر child سه برابر سایز فونت عنصر پدر یا ۴۸ پیکسل خواهد بود.واحد remواحد rem شبیه به em عمل میکنه و تفاوتشون در این هست ک rem تاثیرش رو از روت المنت یا همون تگ html میگیره و دیگه به عنصر والدش وابسته نیست با مثال زیر راحت تر متوجه موضوع میشیمکد HTML:<div class=&quotparent&quot> <div class=&quotchild&quot></div> </div>استایل دهی:*{ font-size: 20px; } div.parent{ font-size: 16px; } div.child{ width: 3rem; }الان دیگه اندازه عنصر div ما بر اساس تگ html محاسبه میشه و مقدار 60پیکسل رو میگیره مونا به کردار مونا به کردار Wed, 22 Sep 2021 21:34:28 +0330 https://virgool.io/@m_62466067/%DB%8C%D9%87-%DA%A9%D9%85-%D8%B1%D8%A7%D8%AC%D8%B9-%D8%A8%D9%87-%D9%81%D9%84%DA%A9%D8%B3-%D8%A8%D8%AF%D9%88%D9%86%DB%8C%D9%85-o23ggmssnnrv فلکس باکس چیست؟فلکس باکس توانایی های پیچیده تر و بیشتری از inline‌ و block داره و می‌تونه عناصر موجود در صفحه وب رو به راحتی پشت سر هم به صورت سطر یا ستون بچینه.برای استفاده از flexbox، باید به عنصر پدری که عناصر رو در بر می‌گیره، دستور display:flex اختصاص بدیم. طراحی ریسپانسیو با flexbox خیلی ساده تر خواهد شد.بعد از اختصاص دادن این دستور، CSS دست ما رو برای استفاده از یکسری دستورات دیگه باز می‌کنه که اون ها رو در ادامه بررسی می‌کنیم، و یاد می‌گیریم که چطور می‌تونن عناصر رو طبقه بندی و مرتب کنن. پس بریم که آشنایی با Flexbox در CSS را شروع کنیم.مقدار flexبرای شروع آشنایی با فلکس باکس در CSS ، به مثال زیر توجه کنین:<div id=&quotcontainer&quot><div id=&quotdiv1&quot></div><div id=&quotdiv2&quot></div><div id=&quotdiv3&quot></div><div id=&quotdiv4&quot></div></div>استایل دهی:#container{display:flex;}#container div{width:100px;height:100px;margin:10px;}#div1{background-color:red;}#div2{background-color:green;}#div3{background-color:blue;}#divbackground-color:orange;} نتیجه:همونطور که میبینیم، ۴ عنصر div داریم که داخل یه عنصر div پدر جا داده شدن.برای اینکه بین عناصر داخلی، طبقه بندی flexbox رو برقرار کنیم، display:flex رو به عنصر پدرشون اختصاص دادیم.میبینیم که عناصر داخلی، برخلاف block بودنشون، inline رفتار کردن و در راستای یک خط یا row قرار گرفتن.پس اولین تاثیر display:flex، اینه که عناصر داخلی رو، هر چی هم که باشن، در راستای یک خط مرتب می‌کنه، و اینکه خاصیت فلکس به صورت پیش فرض عناصر رو در حالت row یا به صورت خطی چیدمان و مرتب میکنه که اگه بخوایم به صورت ستونی مرتب بشن باید flex-direction رو تغییر بدیم که در ادامه بیشتر توضیح داده میشه.حالا تنظیماتی که ما میتونیم با استفاده از دستور فلکس انجام بدیم به شرح زیر هست flex-direction justify-content align-content align-itemsflex-wrapflex-growflex-shrinkflex-basisflex-flowخاصیت flex-directionگفتیم که دستور display:flex یا ویژگی Flex، عناصر فرزند رو در راستای یه خط مرتب می‌کنه. حال می‌خواهیم در رابطه با Flex direction در css صحبت کنیم. همونطور که در بالا اشاره کردیم اگر بخواهیم عناصر رو به صورت ستونی یا سطری مرتب کنیم از این دستور استفاده میکنیم.این خاصیت 4مقدار میتونه بگیره:row: عناصر رو در راستای سطر قرار میده.column: عناصر رو در راستای ستون قرار میده.row-reverse: عناصر رو در راستای سطر، اما از انتها قرار میده.column-reverse: عناصر رو در راستای ستون، اما از انتها قرار میده.ا#container{flex-direction:column}تو تکه کد بالا مثال قبل رو فقط flex-direction رو در حالت column قرار دادیم که نتیجه تصویر زیر میشه حالا این دفعه flex-direction رو برابر رو column-reversقرار میدیم؛ نحوه تغییر چیدمان رو تو نتیجه ببینیم:#container{flex-direction: column-reverse;}ترتیب چیدمان مقادیر کاملا برعکس شدن. مقدار row و row-revers هم به همین شکل اما به صورت سطری عمل میکنن.خاصیت flex-growبه این عکس توجه کنیناین عکس مربوط به تیکه کد مثال اول هست؛ به فضای خالی که وجود داره توجه کنین، ما برای این فضای خالی رو از بین ببریم و بتونیم div هامون رو بزرگتر کنیم از خاصیت flex-grow استفاده میکنیم. به این خاصیت مقدار عددی داده میشه تو تصویر زیر flex-grow:1 مقدار 1 که داده میشه چون فقط یکی از عناصر ما این خاصیت رو گرفته پس div دوم میاد تمامی فضای خالی که وجود داره پر میکنه؛ حالا اگه به چند تا عنصر داده بشه هر کدوم میان به اندازه مقدار grow فضای خالی رو پر میکنه.خاصیت flex-wrapوقتی ما عناصرمون توی یک صفحه تعدادش بیشتر میشه، نیاز هست که تعدادی این عناصر به سطر بعد منتقل بشن برای اینکه عناصر ما در اندازه های مشخص خودشون بتونن نمایش داده بشن، برای اینکه به عنصر پدر flex-wrap:wrap میدم در این صورت اندازه مرورگر ما تغییر که پیدا میکنه عناصر اضافی به سطر بعد منتقل میشن این خاصیت در ریسپانسیوسازی به درد ما میخوره ، این خاصیت سه مقدار زیر رو میتونه بگیره:no-wrap: مقدار پیش فرضی که عناصر رو در یک خط یا ستون میچینه.wrap: مقداری که عناصر رو، به ترتیب بین خطوط و ستون ها تقسیم می‌کنه.wrap-reverse: مقداری که عناصر رو، بر خلاف ترتیب بین خطوط و ستون ها تقسیم می‌کنهاین تصویر خاصیت flex-wrap ندارداین تصویر خاصیت flex-wrap:wrap گرفته استخاصیت flex-shrinkاین خاصیت دقیقا برعکس grow میباشد و از عرض عنصر با توجه به مقدار داده شده کم میکند.خاصیت flex-flowاین خاصیت در واقع shorthand مقدار flex-direcrtion و flex-wrap هست که با نوشتن دستور زیر کد ما کوتاهتر میشه#container{display:flex;flex-flow:row wrap;با این خاصیت عناصر ما به صورت سطری قرار میگیرند و هم چنین با عناصر اضافی به سطر بعد منتقل میشن.خاصیت flex-basisخاصیت flex basis در CSS ، اندازه و ابعاد یک آیتم flex رو مشخص می‌کنه.از این خاصیت می‌تونیم به جای width، زمانی که جهت flex ما خطیه، و به جای height، زمانی که جهت flex ما ستونیه استفاده کنیم.مقادیر مورد قبول این خاصیت عبارتند از:auto: مقدار پیش فرض (ابعاد عنصر متناسب با محتوای آن خواهد بود)مقدار عددی بر حسب واحد های نامتغیرمقدار درصدیخاصیت justify-contentاین خاصیت عناصر را در محور افقی ترازبندی میکند.مقادیری که این خاصیت داره به شرح زیر هست center : عناصر رو دار وسط صفحه در محور افقی قرار میدهد| flex-start عناصر را از ابتدای صفحه چیدمان میکند | flex-end عناصر را از انتهای صفحه چیدمان میکند| space-between بین عناصر فضای خای ایجاد میکند | space-around بین عناصر فضای خالی ایجاد میکند با این تفاوت که به اولین و آخرین عنصر هم از راست و چپ صفحه فاصله میدهند.خاصیت align-itemsاین خاصیت عناصر را در محور عمودی ترازبندی میکند.مقادیری که این خاصبت دارد به شرح زیر است:center عناصر رو در محور عمودی در وسط قرار میدهد flex-start: مقادیر را در محور عمودی در ابتدای صفحه قرار میدهدflex-end مقادیر را در محور صفحه در انتهای صفحه قرار میدهدstrech:عناصر را به اندازه ارتفاع عنصر پدر گسترش میده مشروط بر اینکه به عناصر داخل تگ پدر ارتفاع نداده باشیم.baseline:baseline: عناصر فرزند، در راستای خط مبدا خودشون تراز میشن.برای استفاده از این مقدار، اول باید بدونیم که baseline یا خط مبدا به چه معنیه؟این مفهوم تعریف دقیقی نداره، اما در یک تعریف ساده، به خطی اطلاق میشه که “زیر محتوای عنصر کشیده میشه”بر اساس همین تعریف، کافیه که محتوای هر عنصر رو یکم تغییر بدیم و ببینیم که این مقدار چطور رفتار میکنه:مثال strechalign-items:strechمثال baselinealign-items:baselineو در پایان امیدوارم این مقاله برتون مفید بوده باشه مونا به کردار مونا به کردار Tue, 21 Sep 2021 21:24:58 +0430 https://virgool.io/@m_62466067/%D9%87%D8%B1%DA%86%DB%8C-%DA%A9%D9%87-%D9%84%D8%A7%D8%B2%D9%85%D9%87-%D8%AF%D8%B1-%D9%85%D9%88%D8%B1%D8%AF-%D9%87%D8%A7%D8%B3%D8%AA-%D9%88-%D8%AF%D8%A7%D9%85%DB%8C%D9%86-%D9%85%D8%AA%D9%81%D8%A7%D9%88%D8%AA-%D9%87%D8%A7%D8%B4-%D8%A8%D8%AF%D9%88%D9%86%DB%8C%D9%85-mu1xkrasc8xx نهاولین قدم برای ورود به دنیای اینترنت و کسب و کار آنلاین، آشنایی با مفاهیم هاست و دامین هست. اما هاست چیست؟ دامین یا دامنه چیست؟ همچنین با دونستن تفاوت‌های دامین و میزبانی (یا همان دامنه و هاست) برنامه‌ریزی درستی برای راه‌اندازی وب سایت خودتون خواهید داشت.دامنه یا دامین چیست؟ در تعریف دامنه چیست باید گفت دامنه آدرس وب سایت شما در دنیای اینترنت هست. به زبان خیلی ساده در تعریف دامنه چیست باید گفت همان آدرسی که در مرورگر خودتون برای ورود به هر سایتی وارد می‌کنید دامنه هست. دامنه از دو بخش اصلی تشکیل شده‌: نام دامنه و پسوند آن. برای ثبت دامنه، مجاز به استفاده از اعداد، حروف یا ترکیبی از آن دو هستید. کاربران وب سایت شما به آدرس دامین مراجعه خواهند کرد و می تونن سایت شما را مشاهده کنند. نام دامنه بستگی زیادی به سلیقه شما و محتوای وب سایت دارد. همان‌طور که گفته شد، این نام می‌تواند متشکل از اعداد، حروف و یا هردوی آن‌ها باشد. نام دامنه با “.” از پسوند آن جدا می‌شود. پسوندها در دو دسته‌ی اصلی بین‌المللی و ملی طبقه‌بندی می‌شن که انتخاب پسوند مناسب تاثیر گرفته از حوزه فعالیت وب سایت و نظر شخصی شما خواهد بود. این عکس مثال خوبیه برای اینکه بهتر متوجه بشیم. مثلا com. نمونه‌ای از پسوند بین‌المللی و ir. نمونه‌ای از پسوند ملی ایران هستفراموش نکنید که هر وب سایت نیاز به یک دامنه منحصر به فرد دارد. لذا امکان ثبت دامنه اینترنتی که قبلا ثبت شده و تحت مالکیت دیگری باشد را نخواهید داشت. اما اگر به دنبال خرید دامنه ای که قبلا ثبت شده هستید می توانید مقاله نحوه خرید دامنه‌های ثبت شده را مطالعه کنید. دامنه‌ها از طریق آدرس IP برگرفته از “Internet Protocol Address” به میزبانی وب شما متصل می‌شوند. هر هاست با یک آدرس IP در دنیای اینترنت شناخته می‌شود. آدرس IP ها از طریق سرویسی به نام DNS یا Domain Name System که مقدار آن از طرف شرکت هاستینگ به شما اعلام خواهد شد، روی دامنه شما تعریف می‌شوند..حالا که فهمیدیم دامنه چیه، بریم راجع به هاست اطلاعات کسب کنیم.منظور از هاست چیه و چطوری کار می‌کنه؟ هاست یا همان میزبانی وب محلی هست که اطلاعات وب سایت شما بر روی آن قرار می‌گیره تا کاربران از طریق ارتباط با آن، امکان مشاهده وب سایت شما را داشته باشند. در واقع اطلاعات شما می‌بایست بر روی دستگاهی قرار بگیرد که ۲۴ ساعته و به‌طور مداوم به اینترنت متصل باشد و کاربران در هر لحظه از شبانه‌روز بتوانند در فضای اینترنت، وب سایت شما را مشاهده کنند. بسته به سایتی که طراحی خواهید کرد و امکاناتی که این سایت نیازمند خواهد بود، نوع میزبانی خود تون را انتخاب می‌کنید. حالا سرور مورد نظر شما ممکنه داخل کشور یا خارج از آن باشد؛ که با توجه به طیف مخاطبان خودتون که در داخل یا خارج از کشور هستند، محل سرور تون رو انتخاب خواهید کرد.با تهیه یک میزبانی، بسته به نوع آن، ابزار دسترسی به فضای این میزبانی از طریق شرکت هاستینگ به شما ارائه میشه. همچنین رکوردهای DNS از طرف شرکت هاستینگ به شما اعلام می‌شه تا بعد از بارگذاری اطلاعات وب سایت بر روی میزبانی و تعریف آدرس دامنه وب سایت در آن، DNS ها را بر روی دامنه تنظیم کنید. تفاوت هاست و دامین چیه ؟از مثال معروف آدرس و فروشگاه می‌تونیم استفاده کنیم. اگر شما یک فروشگاه در یک مرکز خرید داشته باشین، فروشگاه شما از چه چیزهایی تشکیل شده است؟نام و آدرس ساختمان فروشگاهوسایلی که در این ساختمان به فروش میرسونین یا برای چیدمان فروشگاه مورد استفاده قرار می‌دین.یک ساختمان که فروشگاه شما اونجا قرار داره.خب ، تو این مثال نام و آدرس ساختمان فروشگاه در دنیای اینترنت معادل با دامنه یا Domain خواهد بود. در واقع اگر بخواهیم بگیم دامین چیست ، اینطور هست که ؛ اسمی که شما را با آن می شناسند در واقع دامنه شما در فضای اینترنت خواهد بود.محصولات و خدماتی که در وب سایت ارائه میدید، به مثابه وسایلی هستند که تو فروشگاه به فروش می‌رسند و طراحی سایت، دکور فروشگاه شما در دنیای اینترنت هست.و اما مصالح به کار رفته در ایجاد ساختمان فروشگاه شما نیز بستر سخت افزاری به نام هاست (Host) یا میزبانی نام دارد که آن را از شرکت‌های ارائه دهنده خدمات هاستینگ تهیه خواهید کرد.شرکت‌های هاستینگ، عموما خدمات مربوط به دامنه را نیز به کاربران ارائه می‌دهند.حالا که می دانید هاست و دامین چیه و در اولین قدم می‌توانید دامنه مناسب وب سایت خود را انتخاب و ثبت کنید. بهتر هست به‌خوبی درمورد شرکت‌های هاستینگ تحقیق کنید. از همان ابتدا، دامنه خود را نزد شرکتی ثبت کنید که پیشینه شایسته‌ای داشته باشه و از عمل‌کرد آن در زمینه خدمات دامین و هاست اطمینان کسب کنبد. پس از طراحی سایت، هاست متناسب با آن را خریداری نمایید و با راه‌اندازی وب سایت، به دنیای خدمات آنلاین قدم بگذارین.چرا انتخاب هاست اهمیت داره؟شاید برای افرادی که تازه وارد دنیای وب شده‌اند انتخاب هاست موضوعی ساده و پیش‌پاافتاده و حتی بی‌اهمیت به نظر برسد. اما واقعیت اینه که تهیه یک هاست مناسب شما را از چند جهت تضمین می‌کنه:۱- حفظ امنیتهاست نگهدارنده‌ی اطلاعات محرمانه‌ی سایت شما است. کوچکترین نشر اطلاعات باعث می‌شه اعتبار خودتون رو از دست بدید.فرض کنید بخاطر امنیت پایین هاست محصولات دانلودی وب‌سایت شما که به کاربران فروخته می‌شدند در فضای اینترنت نشر پیدا کنند! در این زمان حق ناشر از بین رفته و بخشی از درآمد خودتون را از دست خواهید داد.یک هاست باکیفیت امنیت بالایی داره. شرکت هاستینگ معتبر همواره برای حفظ امنیت سرورهای خودش در تلاش هست. این اصل به کمک نرم‌افزارهای مختلف، اسکن‌های مداوم و نیروهای انسانی مجرب انجام پذیر است.۲- مدت دسترسی به سایتهاست مدت زمان در دسترس بودن سایت شما را تعیین می‌کنه! اگر می‌خواید مدت زمان بالا بودن سایت شما (uptime) مناسب باشه به فکر هاست مناسب باشید! اگر سایت شما مدام خارج از دسترس باشد کاربران خود تون را از دست خواهید داد.گاهی به دلیل اختلال در سرور، شبکه یا اینترنت، سرور پایدار نیست و سایت‌هایی که توسط آن میزبانی می‌شن از دسترس خارج می‌شن. این موضوع امری عادی و اجتناب ناپذیر هست اما این میزان اختلالات باید به حداقل برسه. یک هاست با کیفیت باید مدت زمان در دسترس بودن آن بالای ۹۹٪ باشد.۳- تعیین کننده سرعتسرعت سایت در دستان یک هاست و سرور قدرتمند هست ! سرعت لود وب‌سایت بسیار اهمیت داره. این موضوع هم برای کاربرانی که به وب‌سایت شما مراجعه می‌کنند حائز اهمیت هست و هم برای گوگل! گوگل از وب‌سایت‌های کند بیزاره ! بخاطر سرعت پایین سایت جایگاه شما در نتایج جستجو افت خواهد کرد. بنابراین انتخاب یک هاست معتبر به شما کمک می‌کنه تا سرعت لود خوبی را برای کاربران خودتون فراهم کنید.با توجه به مطالب بالا متوجه شدیم که هاست در امنیت، دسترسی پذیری، بهبود تجربه کاربری، سئو و رتبه سایت تاثیر زیادی دارد. پس لطفاً چند دقیقه زمان صرف کنید و بهترین هاست را تهیه کنید! هاستی که با توجه به نیاز سایت شما برای شما بهترین استمعرفی چند تا هاست معتبرشرکت هاستینگ برتر ایران ایران سرورمیزبانفا سون هاست ایران هاست مونا به کردار مونا به کردار Sat, 18 Sep 2021 18:02:45 +0430 https://virgool.io/@m_62466067/%D9%81%D8%B1%D8%A7%D9%86%D8%AA-%D8%A7%D9%86%D8%AF-%DA%86%DB%8C%D8%B3%D8%AA-la8bgbooeyw6 فرانت اند یا Front End، به بخش قابل مشاهده‌ی یک وب سایت یا نرم افزار توسط کاربران می‌گویند. فرانت اند، کدهای غیر قابل فهم برای کاربران را در قالب ظاهری گرافیکی و بصری به آن‌ها نمایش می‌دهد تا بتوانند به راحتی از بخش‌های مختلف سایت استفاده کنند.فرانت اند به دو بخش اصلی طراحی و توسعه رابط کاربری تقسیم می‌شود. در بخش طراحی، طراحان با نرم افزارهای گرافیکی مانند فتوشاپ، ادوبی ایکس دی، فیگما و... ظاهر سایت را طراحی می‌کنند. اما بخش توسعه‌ی رابط کاربری مربوط به پیاده سازی ظاهر سایت در قالب کدهای HTML ،CSS و جاوا اسکریپت است.امروزه می‌توانید با زبان‌های برنامه نویسی زیادی در حوزه‌ی فرانت اند کدنویسی کنید، اما سه زبان مهم و اصلی که برای هر برنامه نویس فرانت اند واجب هستند، HTML و CSS و جاوا اسکریپت می‌باشد. با گذر زمان هر یک از این سه مورد در قالب زبان‌های جدیدی شامل نسخه‌های مختلف شدندمثالی از فرانت در دنیای واقعیبرای اینکه مفهوم Front end را بهتر درک کنید، یک فیلم سینمایی را در نظر بگیرید. ظاهر سایت همانند یک فیلم سینمایی است که در حال تماشای آن هستید. بازیگران و صحنه‌های فیلمبرداری شده اجزایی هستند که Front end را تشکیل می‌دهند و بر اساس دستورات کارگردان در مکان موردنظر خود قرار می‌گیرند و به بازیگری می‌پردازند. دستورات کارگردان، همان کدهای HTML، CSS و جاوا اسکریپت می‌باشند که رابط کاربری را ایجاد می‌کنند. مونا به کردار مونا به کردار Sun, 12 Sep 2021 11:05:55 +0430