چند ماه پیش بهنگام شنیدن خبر Swich کردن مامبو بروی فریمورک قدرتمند و در عین حال ساده Cakephp بسیار خوشحال شدم. زیرا مامبو چه از لحاظ امنیتی و چه از لحاظ کاربری در سطح بالایی قرار دارد و شاید تنها مشکل آن تعداد کم توسعه دهندگان و بدنبال آن نبود افزونه‌های متعدد برای این سیستم باشد. در حقیقت این سیاست مامبو وCakephp بهترین کاری بود که توسعه دهندگانش ممکن بود انجام دهند، چرا که Cakephp بواسطه عظمت و شهرت مامبو از فریمورکی نوپا به فریمورکی قابل اطمینان و بزرگ تبدیل می‌شود و مامبو نیز به توسعه‌دهندگانی متعدد، جدید و تازه نفس دست پیدا می کند، تا جایی که من اطمینان دارم پس از انتشار نسخه ۵ مامبو هیچ سیستم مدیریت محتوایی از لحاظ تنوع و تعداد افزونه به گرد پای مامبو هم نخواهد رسید!

اهداف من از طرح این موضوع یکی انتقاد به نظر دوستانی بود که مخالف این سیاست مامبوبودند و این کار را با توجه به این مسئله که مامبو خود فریمورکی بزرگ است و غیره، در شان و شخصیت آن نمی‌دانستند بود و البته مهم‌تر از آن شایستگی Cakephp بعنوان یک فریمورک تا جایی که بتوان در تمام کار‌ها بطور پایدار از آن بهره برد و در واقع دلیل این تصمیم من کمی غریزی بود. چرا که همیشه به مامبو و تیم توسعه آن اطمینان داشته‌ام و کماکان اعتماد دارم.

اما هم اکنون بواسطه اجباری که شرایط کاری در آینده بوجود خواهند آورد مطالعاتی را در رابطه با فریمورک Symfony آغاز کردم و در نهایت با توجه به نکاتی که در ادامه لیست شده است، این فریمورک را برای ادامه راه انتخاب کردم.

• کلاس های بهم پیوسته متعدد که در کار‌های پیچیده و گروهی بسیار می‌توانند کمک کننده باشند.
• سرعت بالاتر نسبت به Cakephp
• بهره‌گیری از ORM
• امکانات زیاد جهت طراحی backed برنامه (بخش اصلی برنامه‌های آینده من را تشکیل می‌دهد)
• عدم پیچیدگی حتی با بهره‌گیری از امکانات بالا که مزیت بزرگی نسبت به Zend است.

با توجه به تمام موارد بالا، کماکان به مامبو پایبندم، Cake را بدلیل خوشمزه بودن دنبال می‌کنم و به یادگیری و درک صحیح از Symfony هم امیدوارم.

تخصصی در همین زمینه:  [+] – [+] – [+]

پ‌ن : مطلب بالا به هیچ وجه فنی نیست و بیشتر حالت درد دل دارد (تا باشه همیشه درد دل همه این سبکی باشه!!!). از دوستانی که تجربه کار با این فریم‌ورک‌ها را دارند خواهشمندم نظر خودشون رو اعلام کنند.

بهتره وقت رو هدر ندیم و بریم سر اصل مطلب!!!

با انتشار نسخه ۲.۵ وردپرس، ویژگی جالب و قدرتمندی بنام shortcodes (که از این به بعد اون رو ” کدهای کوتاه ” می‌نامیم) معرفی شد که البته هنوز به عنوان یک ابزار و یا تابع کاملاْ شناخته شده نیست.

شما به این وسیله می‌توانید با آوردن تکه کد Adsence تبلیغاتی را در محتوا بگنجانید و یا امثال این کار! کدهای کوتاه ورد پرس وبلاگیدن شما را بسیار راحت‌تر و سریع‌تر می‌کند. در این مقاله و مقالات بعد به مثال‌هایی از این ویژگی می‌پردازیم.

چگونگی ساخت یک ” کدکوتاه “

مواد لازم:
• آشنایی مختصری با زبان PHP
• وردپرس نسخه ۲.۵ به بالا
• ترجبحاْ یک ویرایشگر کد مناسب مانند Gedit، Kedit، و یا EMeditor
• سیستم عامل لینوکس!!! (کاملاْ بی ربط با این موضوع، اما به نفع خودتون و جامعه)
• اندکی وقت و دقت، که همه دارن

۱ – فایل function.php قالب خود را باز کرده و کد زیر را در آن بنویسید. اگر قالب شما فاقد این فایل است، براحتی آن را ایجاد کنید.

function hello() {
return 'Hello, World!';
}

۲- تا اینجا تابع مورد نظر ایجاد شده و تنها باید آن را بعنوان یک کد کوتاه وردپرس معرفی کنیم. اینکار نیز براحتی همین ۱خط کدی است که می‌بینید! که با استفاده از تابع add-shortcode ایجاد شده است.

دقت کنید که این کد را پس از تابع مورد نظرتان بنویسید.

add_shortcode('hw', 'hello');

توضیح اینکه پارامتر اول نام کد کوتاه و پارامتر دوم نام تابعی است که فراخوانی خواهد شد.

۳- کار ساخا کدکوتاه به پایان رسید. حال مطلبی ایجاد کنید و در حالت html ویرایشگر تکه کد زیر را وارد کنید تا تابع مربوطه را اجرا کند.

[hw]

مثال بالا راحت‌ترین مثالی بود که می‌شد زد! اما شما می‌تونید با استفاده از معلومات خودتون از PHP و یکم خلاقیت کار‌های بسیاری رو با این تکنیک پیاده کنید. در بخش بعدی این مقاله به مثال‌های کاربردی و اصولی می‌پردازیم.

گوشه‌های گرد (Border Radius)

گوشه‌های گرد می‌توانند جلوه‌ی خاصیی به طرح دهند. برای اینکار تکنیک‌های بسیاری موجود است که هر یک معایب و مزایای خود را دارند. اما راحت‌ترین و بهترین روش را CSS3 با استفاده از خصیصه border-radius به طراحان پیشنهاد می‌کند.

به قطعه کد زیر دقت کنید

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

البته این خصوصیت را می‌توان تنها برای گوشه‌ای خاص نیز در نظر گرفت

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

پشتبیانی در مرورگرها: Firefox – Safari – Chrome
نمونه : همین وبلاگ و twitter

تصویر حاشیه (Border Image)

همانطور که از نام آن پیداست، به شما امکان استفاده از تصاویر را برای حاشیه‌ها ممکن ساخته. اینکار را می‌توان با کد زیر انجام داد

border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;
-moz-border-image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat;

شاخص border:5px عرض حاشیه و هر یک از شاخص‌های border-image فایل تصویری حاشیه را مشخص می‌کنند. تعداد دفعات تکرار تصویر، برای پر کردن کل منطقه حاشیه را مرورگر تشخیص می‌دهد.
البته این خاصیت را می‌توان تنها برای جهتی خاص نیز بکار گرفت و یا برای هر سمت، تصویری مجزا انتخاب کرد!

border-bottom-right-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border-top-right-image
border-right-image

پشتبیانی در مرورگرها: Firefox 3.1 – Safari – Chrome
نمونه: Blog.SpoonGraphics

سایه‌ برای متون و باکس‌ها

خیلی جالبه که بدون استفاده از ابزار گرافیکی نظیر فتوشاپ و گیمپ و تصاویر تولیدی آنها بتوان افکتی همچون سایه را به اجسام موجود در صفحه اضافه کرد. (اجسام = Box و Text)
تنها با استفاده از کد‌های زیر

-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;

دو خصوصیت اول انحراف سایه را نسبت به المنت مربوطه تعیین می‌کنند. در این مثال، 10px در محور X و Y. خصیصه سوم نیز برای تنظیم تیرگی سایه بکار می‌رود و در نهایت رنگ سایه مشخص می‌شود.
همچنین از خصیصه text-shadow برای سایه دادن به محتوای متنی استفاده می‌کنیم.

text-shadow: 2px 2px 5px #ccc;

پشتیبانی در مرورگرها: Firefox 3.1 – Safari – Chrome (box-shadow) – Opera (text-shadow)
نمونه: 24 Ways

شفافیت و تیرگی عناصر بوسیله مقادیر RGBA

استفاده ار تصاویر PNG یکی از راه‌های نمایش شفافیت و تیرگی در صفحات وب است. اما هم اکنون اینکار بوسیله CSS امکان‌پذیر است.

rgba(200, 54, 54, 0.5);
/* example: */
background: rgba(200, 54, 54, 0.5);
/* or */
color: rgba(200, 54, 54, 0.5);

سه عدد اول برای تعیین رنگ و به همان روش RGB است و عدد چهارم مربوط به کانال آلفا می‌باشد که شفافیت را بوجود می‌آورد.
البته اینکار را می‌توان بصورت زیر نیز انجام داد

color: #000;
opacity: 0.5;

پشتیبانی در مرورگرها: Firefox – Safari – Chrome – Opera (Opticaly) – IE7+fix (Opticaly)
نمونه: 24 Ways

قلم‌های وب بوسیله @Font-Face

معمولاْ برای مشخص کردن قلم در طراحی وب انتخاب‌های زیادی نیست و محدود به فونت‌های مطمئنی نظیر Arial, Tahoma, Helvetica, Verdana, Georgia, Comic Sans و … می‌باشد. اما امروزه CSS این امکان را دارد که از قلم‌های قابل دانلود از اینترنت بهره ببرد و از آنها برای نمایش متون استفاده کند.
ابتدا خانواده قلم را معرفی و آدرس دانلود آن را تعریف می‌کنیم

@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}

سپس می‌توان از قلم دانلود شده بطور معمول استفاده کرد.

h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif;

پشتیبانی در مرورگرها: Firefox 3.1 – Safari – Opera 10 – IE7 (with fix)
نمونه: TapTapTap

[+] اطلاعات بیشتر راجع به قلم‌های قابل دانلود در الوان وب
اگرچه CSS3 کماکان در حال توسعه است، اما با اینحال توسط برخی مرورگرها پشتیبانی می‌شود.
مرورگر Safari در خصوص پشتیبانی از این ویژگی‌های جدید بسیار خوب عمل کرده، اما متاسفانه با وجود اینکه مرورگر با کیفیتی می‌باشد ،کاربران کمی از آن استفاده می‌کنند. اما کاربران آن روز بروز در حال افزایش هستند.
در سمت دیگر Firefox کاربران زیادی را به خود مشغول کرده. این مرورگر در نسخه ۳.۱ خود اکثر این ویژگی‌ها را پشتیبانی می‌کند و اقلب کاربران آن نیز مرورگر خود را بروز می‌کنند و به زودی بسیاری از کاربران وب می‌توانند از این شیوه استایل دهی پشتیبانی کنند.
Google Chrome هم که همین اواخر منتشر شده است و پشتیبانی نسبتاْ خوبی را آغاز کرده.

طبق آمار W3’s Browser statistics این امر نمایان می‌شود که در دسامبر ۲۰۰۸ ، از کل کاربران وب۴۴.۴٪ از Firefox و ۳.۶٪ از Chrome و تنها ۲.۷٪ از Safari استفاده می‌کنند. به این ترتیب تقریباْ ۵۱٪ کاربران وب از این ویژگی‌ها پشتیبانی می‌کنند. البته طبق آمار انجمن طراحان وب در این خصوص انتخاب مرورگرهایی که از ویژگی‌های CSS3 پشتیبانی می‌کنند بیشتر از ۷۳.۶٪ است.
[+] اطلاعات بیشتر در خصوص این آمار در Blog.SpoonGraphics

[+] منبع (طبق معمول، با دخل و تصرف)

پ ن – با توجه به مطالب بالا نظر شخصی من این است که با توجه به اینکه کاربران فارسی زبان بسیار از IE استفاده می‌کنند و حتی برخی IE را Internet می‌نامند، اما با این حال طراحان وب می‌توانند با توجه به کاربرد سایت و ظرفیت‌های کاربران آن این خصوصیات را در طرح‌های خود بکار بگیرند و کاربران را متقاعد کنند که شما را به خدا فایرفکس!!! و البته این موضوع را خاطر نشان شوید که چرا با اینکه می‌توانند با خودرویی نظیر BMW مدل Li به مسافرت روند، آن را کنار می‌گذارند و پیکان را سوار می‌شوند!!! (فکر می‌کنم بهترین مثال توجیهی برای هموطنانمان همین باشد)

پ ن – شما هم اگر هم اکنون این مطلب را بدون Firefox مشاهده می‌کنید بهتر است هم اکنون به جمع Firefoxی‌ها بپیوندید تا این وبلاگ ناچیز و البته اکثر صفحات وب را زیباتر ببینید.

پ ن – این مطلب را با عجله ترجمه و ویرایش کردم. لطفاْ اگر نکته جا افتاده و یا ایرادی در آن دیدید در قسمت نطرات بیان کنید تا تصحیح شود.

این سوالیه که تا حالا واسه خیلی‌ها (از جمله خود من و همین هفته قبل) پیش اومده باشه، که مردم (علی ستاری) چی می‌گن؟ html معنایی چه سیغه‌ایه!!!
اما بیشتر نمی‌دونن که Semantic HTML چیه! شاید بنظر بیاد که یک تکنولوژی عجیب و غریبه که فقط طراحان حرفه‌ای وب ازش خبر دارن.
اما خیلی ساده‌تر از این حرف هاست. شما وقتی کد HTML رو می‌نویسید، دارید از Semantic HTML استفاده می‌کنید. (اگرچه ممکنه از تمام ظرفیت‌های آن بهره نبرید)
در این مقاله (و شاید مقالات بعدی) توضیحی در مورد Semantic HTML داده می‌شه و شما می‌تونید با تمرین‌های بسیارساده HTML، این رو کاملاْ درک کنید. و با استفاده از اون به رتبه سایت خود در موتور‌های جستجو کمک بسزایی کنید. ( همونطور که بیشتر شما می‌دونید، Semantic HTML یکی از اصول SEO هست و تاثیر زیادی بر رتبه سایت در موتورهای جستجو داره )

Semantic HTML همون HTML هست!!!

اولین مسيله برای درک این موضوع اینه که Semantic HTML همون HTML قانون‌مند و استاندارده!
مطمئن باشید که قبل از این هم از ویژگی‌های HTML استفاده کرده‌اید، یعنی توانایی استفاده از این رو داشتید و فقط نمی دونستید که دارید یک Semantic HTML می‌نویسید.

معنایی بودن یعنی چی؟

خوب می‌شه گفت معنایی بودن، برداشتی از مقصود و معنای کلمات است. وقتی دوست دخترتون از شما بپرسه که: عزیزم امروز حالت چطوره؟. ۱۰۰٪ منظورش جویای احوال شما شدن نیست! و می‌خواد مراسم خاصی واسه خودش راه بندازه!!! حالا بحث درباره نوع مراسم به شما و اون مربوط می‌شه!!!

به این مثال‌های بسیار ساده و آشنای Semantic HTML دقت کنید

می‌شه با استفاده از المنت <p> متنی رو بعنوان پاراگراف تعیین کرد.

In neveshteha chizi joz paragraf nemitoone bashe

شاید بخواهید در نوشتهاتون، حرفی رو از شخص دیگری نقل کنید. برای فهموندن این موضوع به HTML می‌تونید از المنت‌های <q> و یا <blockquote> استفاده کنید.

Mehdi Goft
<blockquote>Inam az kare nesfe shabe maa!!!</blockquote>

اگر بخواهید که به بار معنایی نقل قولتان اضافه کنید، می‌شه جایی رو که مهدی صحبت کرده رو مشخص کنید. (آدرس وبلاگ، مقاله و یا …) به کد پایین نگاه کنید.

Mehdi Goft,
<blockquote cite="http://www.moshtaghi.ir/archive/semantic-html">Inam az kare nesfe shabe maa!!!</blockquote>

کلاس‌های HTML

HTML خصیصه Class را هم پیش بینی کرده. زمانی که ما المنت خاصی برای فهماندن محتوا نداریم، می‌شه از این ویژگی استفاده کرد. برای مثال به المنتی برای تعیین کردن مقاله (article) نیازمندیم و این در حالی است که المنتی بنام <article> نداریم. بنابراین باید اینگونه عمل کنیم:

<div class="article">
yek maghaleye besiar jaleb va mohem dar morede masaele besiar khas!</div>

<div> و همینطور <span> نوعی المنت فضای خالی هستند. زمانی که شما مجبور به ایجاد نوعی المنت خاص می‌شوید ایندو می‌تونند بسیار مفید باشند.
نکته – بسیاری از طراحان تصور می‌کنند که خاصیت CLASS فقط برای استایل دادن به صفحات است. این درسته، اما می‌شه پا رو از این هم فراتر گذاشت و از اونها برای معنا بخشیدن به کدهامون استفاده کرد. این یکی از مشخصه‌های HTML هست و خیلی‌ها از اون بهره می‌برند. برای مثال نمونه کدی که توی ۹۰٪ سایت‌ها استفاده می‌شه

<div class="footer">
matni monaseb jahate footere site</div>

بسیاری از طراحان از این کد برای نمایش و فهماندن فوتر سایت خود استفاده می‌کنند.چون المنتی بنام <footer> نداریم!!!
به این مثال هم دقت کنید.

<code class="php">echo "in yek tekke code PHP ast!";</code>

با استفاده از المنت <code> به کد بودن محتوا اشاره شده، و با دادن کلاس php این مسئله روشن می‌شود که کد مزبور به زبان php است.

این مقاله تنها مقدمه‌ای از Semantic HTML بود، مطلبی در مورد چگونگی معنا دادن به HTML.
به احتمال زیاد ادامه دارد.

[+] میکرو فرمت

۱- Strict Doctype

توضیح خاصی نیست. به تصویر دقت کنید!

۲- کدگزاری کاراکتر‌ها ( characters encoding )

در قسمت head، باید نوع کدگزاری کاراکتر‌ها ( characters encoding ) را اعلان کنیم.ما از UTF-8 استفاده می‌‌کنیم که این خیلی خوبه. اما این کد رو بعد از Title لیست میکردیم. شما باید جای اینا رو عوض کنید و اعلان کدگذاری رو قبل از title ببرید. بنابراین قبل از خوندن همه محتوا به مرورگر می‌فهمونید که چگونه باید برای کدگزاری رفتار کنه.

در این صورت می‌تونیم از هر کاراکتر بامزه‌ای با اطمینان استفاده کنیم. برای مثال ما یک امپرسند در Title داریم. برای جلوگیری از بروز هر مشکلی در ترجمه این کاراکتر‌، به جای & از کد &amp; استفاده می‌کنیم.

۳- ایجاد فرو رفتگی‌های درست

با یک نگاه به تصویر کاملاْ مشخص می‌شه که کدوم کد خوانا و زیباتره

۴- از CSS و Java Script خارجی استفاده کنید.

استفاده داخلی از CSS و JS اشتباه بزرگیه. زیرا شما با اینکار تنها در همین سند HTML می‌تونید از آنها استفاده کنید. این در حالیه که اگر بطور مجزا کد‌ها رو ذخیره کنید می‌شه بار‌ها و بار‌ها از اونها در ایجاد صفحات دیگر بهره برد و بنابراین تغییر در ظاهر کل صفحات نیز امکان‌پذیر و بسیار راحت می‌شه!

۵- جای گرفتن درست اشیا ( TAG )

برای مثال نام سایت ما My cat site است. برای نمایش این نام بصورت سرآمد ( header ) از تگ h1 استفاده میکنیم. تا اینجای کار ما کاملاْ درسته. حالا برای ایجاد پیوند به آن باید چه کرد؟ بله، از تگ <a> استفاده می‌کنیم. به اینصورت که هیدر را میان تگ لینک قرار می‌دهیم و کار تمومه. اما از نظر تکنیکی اینکار کاملاْ غیر اصولی و اشتباهه! تگ لینک یک عنصر inline است و هیدر Block .بلاک‌ها نباید داخل عناصر inline استفاده شن. راه حل این مسئله رو می‌تونید در تصویر ببینید.

۶- پاک کردن Div های بلااستفاده

استفاده مکرر از تگ div برای احاطه سایر عناصر صفحه رو بهتون پیشنهاد می‌کنم. معمولاْ به هنگام یادگیری مراحل طراحی وب، مردم آموزش می‌بینن که چطور عناصر صفحه رو با استفاده از div جمع و جور کنن و اونها رو با اعمال css جهت بدهند. این طرز تفکر باعث می‌شه که در بعضی مواقع که هیچ نیازی هم به استفاده div نیست، اینکار رو انجام بدن. به مثال زیر توجه کنید.

در این مثال می‌شه از همون تگ ul نهایت استفاده رو کرد و تمامی مقادیری رو که به topNav دادیم رو به bigBarNavigation بدیم و هیچ نیازی به تگ div پیدا نکنیم!

۷- استفاده بهتر از قرارداد‌های نام‌گذاری

توضیحی خاصی نیست، جز اینکه همیشه سعی کنید نامی رو انتخاب کنید که در موقعیت‌های مختلف بیانگر محتوای خود باشد. همونطور که در تصویر می‌بینید نام Red Italic شاید در حال حاضر نام خوبی باشه، اما ممکنه در آینده قرمز و بلد باشه. در اون صورت نام Red Italic اصلاْ مناسب نیست!

نام‌های خوب برای کلاس‌ها و شناسه‌ها (ID, Class ):
“mainNav,” “subNav,” “sidebar,” “footer,” “metaData,”
اینها کاملاْ شرح می‌دن که چه چیزی رو شامل شدن و در همه حال معنادار هستند.
و اما نام‌های نا مناسب برای کلاس و شناسه:
“bigBoldHeader,” “leftSidebar,” and “roundedBox.”

۸- واگذاری فنون چاپ به css

فکر می‌کنم این نکته زیاد بکار فارسی نیاد!
برای مثال شما می‌تونید در منوهای راهبری، بجای تایپ مستقیم حروف بزرگ در html از خصوصیت‌های css در بزرگ نشان دادن تمامی کاراکتر‌های کوچک بهره ببرید.

9. Class/id the <body>

می‌شه به عناصر هر دو نوع شناسه و کلاس ( ID/Class ) رو نسبت داد. این شیوه می‌تونه کمک بزرگی در ایجاد صفحات طولانی باشه.

۱۰- معتبر ساختن

هنگامی که شما می‌خواهید با استفاده از یک ماشین معتبر سازی کدتان را معتبر کنید، ممکن است ایراد‌های کوچکی را از کدتان بگیرد. ایرادهایی که در رندر صفحه شاید به چشم نیان، اما اشتباه هستند. مسلماْ کد‌های معتبر عمر بیشتری نسبت به کد‌های غیر اصولی دارند. به تصویر دقت کنید!

۱۱- رعایت ترتیب منطقی

دقیقاْ همونطور که در اسلام به این نکته که هر کاری رو باید بجاش انجام بدی توصیه شده، در w3c هم همینه! شما نباید footer رو قبل از Content و یا Navigation بیارید. حتی در صورتی که با استفاده از css و اعمال خصیصه‌هایی footer در پایین‌ترین بخش صفحه بنمایش در بیاد.
می‌شه گفت باید طوری قرار داد که زمانی که css هم استفاده نمی‌شه ترتیب بهم نخوره.

۱۲- فقط اصول گفته شد!

الان نکته‌هایی رو میدونید که با استفاده از اونها میتونید نوشتن یک کد درست و تمیز رو شروع کنید. و البته نکته اصلی همینه که این تنها اصول داشتن کد درست و تمیز بود. می‌تونید صفحات html خوبی با این اصول بنویسید. اما اگر از یک CMS استفاده می‌کنید، که شاید کد واقعاْ تمیزی نداشته باشه چی؟؟؟ باید تمرین کنید و بفهمید که چطور این تکنیک‌ها رو در صفحاتتون بکار بگیرید!!!

متن اصلی
پ ن / نوشته‌های بالا ترجمه دقیقی از متن اصلی نیست. یکم تغییر کرده!!!