http://www.macromediax.com ماکرومديا ايکس : آموزش تکنولوژي هاي طراحي وب info@macromediax.com info@macromediax.com http://www.macromediax.com/learn/archive.asp?id=218 http://www.macromediax.com/learn/archive.asp?id=218 <p dir="rtl"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 9pt;"><strong>بادا</strong> نام <a href="http://www.macromediax.com/learn/category.asp?cat=mobile" target="_blank">سیستم عامل موبایل</a> سامسونگ است که نسخه اول آن در فوریه 2010 به دنیا معرفی شد و نسخه دوم این سیستم عامل در آگوست 2011 معرفی شد. (<a href="http://www.bada.com/" target="_blank">بادا </a>یک لغت کره ای و به معنای<strong>دریا</strong>ست) سامسونگ در 18 ماه گذشته بیش ار 10 مدل گوشی مختلف با این سیستم عامل ارائه کرده است که همگی از مشخصات فنی خوبی برخودارند و قیمت پایین تری نسبت به گوشی های اندرویدی دارند.</span></p> <p dir="rtl"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 9pt;"><strong>چشم انداز بادا</strong></span></p> <p dir="rtl"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 9pt;">شعار بادا "<strong>تلفن هوشمند برای همه</strong>" است. بادا اصلا دنبال رقابت با <a href="http://www.macromediax.com/learn/archive.asp?id=213" target="_blank">اندروید</a> و <a href="http://www.macromediax.com/learn/archive.asp?id=199" target="_blank">آیفون</a> نیست! بلکه بادا به دنبال بازاری کشف نشده است. بادا میخواهد کسانی را که از موبایل های معمولی (feature phone) استفاده میکنند ، به سوی خود جذب کند. به همین دلیل است که قیمت گوشی هایی با سیستم عامل بادا، بسیار کمتر از معادل های اندرویدی اش است.</span></p> <p dir="rtl"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 9pt;"><strong>سرمایه گذاری روی بادا</strong></span></p> <p dir="rtl"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 9pt;">برای گسترش یک اکوسیستم باید پول خرج کرد ! سامسونگ بعنوان <a href="http://www.mobile88.com/news/read.asp?file=/2011/8/15/20110815153329&amp;phone=nokia-remains-the-top-mobile-phone-seller" target="_blank">دومین فروشنده ی موبایل</a> در جهان پس از نوکیا، باید کاری کند تا شما بجای یک گوشی اندرویدی، یک گوشی با سیستم عامل بادا بخرید. سامسونگ برای رسیدن به این هدف باید سه دسته از افراد را راضی نگه دارد:</span></p> <ul dir="rtl"> <li><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: small;">خریدار</span></li> <li><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: small;">فروشنده</span></li> <li><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: small;">توسعه دهنده</span></li> </ul> <p dir="rtl"><img style="display: block; margin-left: auto; margin-right: auto;" src="http://persianweblog.ir/images/articles/634508903779218750_bada.jpg" alt="موبایل های سامسونگ" width="555" height="380" /></p> <p dir="rtl"><span style="font-size: 9pt; font-family: tahoma, arial, helvetica, sans-serif;"><strong>خریدار</strong>: واقعا چرا شما باید اندروید را با آن هم نرم افزاری که برایش نوشته شده رها کنید و یک گوشی با سیستم عامل بادا بخرید؟ دلیل شما یک چیز می تواند باشد: مشخصات فنی خوب با قیمت پایین. برای اینکار سامسونگ از سود خودش میزند تا قیمت گوشی های بادایی را پایین بیاورد. سیستم عامل بادا روی گوشی هایی با قیمت 170 هزار تومان هم عرضه شده اند، در حالیکه گوشی هایی با سیستم عامل اندروید حداقل 350 هزار تومان قیمت دارند. گوشیهای مدل Wave یا wave 2 هر کدام (با قابلیت هایی نظیر wifi, GPS, 3G, 5MP camera,1GHz CPU, 800x480 Super AMOLED screen) کمتر از 300 هزار تومان قیمت دارند. در حالیکه معادل اندرویدی آنها از خود سامسونگ حدود 500 هزار تومان قیمت دارند.</span></p> <p dir="rtl"><span style="font-size: 9pt; font-family: tahoma, arial, helvetica, sans-serif;"><strong>فروشنده</strong> : یکی از نقاط قوت سامسونگ نمایندگی های گسترده ی این کمپانی در کشورهای هدفش است و مسلما در کنار تبلیغات گسترده اش، راهکارهایی را برای راضی نگه داشتن نماینده ها و فروشندگان محصولات خود در پیش گرفته است.</span></p> <p dir="rtl"><span style="font-size: 9pt; font-family: tahoma, arial, helvetica, sans-serif;"><strong>توسعه دهنده</strong> : سامسونگ همچنین حدود 2.7 میلیون دلار برای<a href="http://www.badaos.ir/" target="_blank"> مسابقات برنامه نویسی روی Bada</a> جایزه گذاشته است تا برنامه نویسان به ساخت برنامه های گوناگون روی این سیستم عامل موبایل ترغیب شوند.</span></p> <p dir="rtl"><span style="font-size: 9pt; font-family: tahoma, arial, helvetica, sans-serif;"><strong>بازار فروش بادا</strong></span></p> <p dir="rtl"><span style="font-size: 9pt; font-family: tahoma, arial, helvetica, sans-serif;">سامسونگ در بخش معرفی بادا میگوید که این سیستم عامل پیشینه ای 10 ساله دارد و هسته آن قبلا در گوشی های معمولی سامسونگ استفاده می&zwnj;شده و از این جهت امتحان خود را پس داده و به همین جهت سامسونگ با اضافه کردن رابط کاربری جدید، امکان مولتی تاچ، گرافیک 3 بعدی و امکان نصب نرم افزار، آنرا به دنیای گوشی های هوشمند آورده است. اپل در سال 2010 حدود 36 میلیون دستگاه آیفون فروخت، در همین سال سامسونگ تعداد 280 میلیون تلفن همراه به مشتریان خود فروخته است، هدف سامسونگ این است که تعداد زیادی از این خریداران را به سوی کاربران یک سیستم عامل واحد سوق دهد.</span></p> <p dir="rtl"><span style="font-size: 9pt; font-family: tahoma, arial, helvetica, sans-serif;"><strong>از کجا برنامه دانلود کنم ؟</strong></span></p> <p dir="rtl"><span style="font-size: 9pt; font-family: tahoma, arial, helvetica, sans-serif;">بر اساس یک تحقیق که در سال 2008 توسط سایت compete.com از دارندگان گوشی های هوشمند به عمل آمد، 34 درصد دارندگان گوشی&zwnj;های هوشمند هرگز روی گوشی خود برنامه ای نصب نکرده بودند! و خیلی از کاربران می گفتند که مایلند روی گوشی خود برنامه نصب کنند، اما <strong>نمی دانند برنامه های قابل نصب را کجا گیر بیاورند</strong>!</span></p> <p dir="rtl"><a href="http://www.samsungapps.com/" target="_blank"><img style="display: block; margin-left: auto; margin-right: auto;" src="http://persianweblog.ir/images/articles/634508908222031250_samsungapps.png" alt="" /></a></p> <p dir="rtl"><span style="font-size: 9pt; font-family: tahoma, arial, helvetica, sans-serif;">ایجاد apple store یکی از اقداماتی بود که باعث شد کاربران آیفون به سمت خرید نرم افزارهای قابل نصب روی تلفن هوشمند خود روی آورند. سامسونگ نیز همانند اپل و گوگل فروشگاهی را برای دارندگان گوشی های سامسونگ راه اندازی کرده است تا مشتریان سامسونگ به راحتی بتوانند به هزاران برنامه و نرم افزار دسترسی داشته باشند. </span><br /><span style="font-size: 9pt; font-family: tahoma, arial, helvetica, sans-serif;">کافیست سری به <a href="http://www.samsungapps.com/" target="_blank">www.samsungapps.com</a> بزنید. کلیه گوشی های هوشمند سامسونگ برنامه ای بنام Samsung apps دارند که برای دانلود نرم افزار از این فروشگاه طراحی شده است. دارندگان گوشی های بادا حتی لازم نیست مدل گوشی خود را بدانند. به محض اینکه شما با گوشیتان برنامه Samsung apps را باز کنید، وارد سایت نرم افزارهای بادا میشود و نرم افزارهایی را به شما نمایش می دهد که روی دستگاه تان قابل نصب است. تا آگوست 2011 تعداد 13000 نرم افزار برای سیستم عامل بادا نوشته شده و از این سایت قابل دانلود است.</span><br /><br /><span style="font-size: 9pt; font-family: tahoma, arial, helvetica, sans-serif;"><strong>شناخت هسته سیستم عامل بادا</strong></span></p> <p dir="rtl"><span style="font-size: 9pt; font-family: tahoma, arial, helvetica, sans-serif;"><strong></strong>بادا از روی هسته لینوکسی FreeBSD و OpenBSD ایجاد شده است و یک نسخه یک بادا سیستم عاملی Single Task است، بدین معنا که سیستم عامل در هر لحظه فقط به یک برنامه اجازه ی اجرا می دهد که البته این کاستی با توجه به هدفی که بادا دنبال میکند قابل توجیه است، گرچه در نسخه دوم امکان MultiTasking به این سیستم عامل اضافه شده است. رابط کاربری بادا کنترل هایی را که برنامه نویسان بیشتر لازم دارند( مانند listbox , colorPicker و ...) را بصورت embed شده دارد.</span><br /><span style="font-size: 9pt; font-family: tahoma, arial, helvetica, sans-serif;">این سیستم عامل از مرورگر قدرتمندی بر پایه ی <a href="http://en.wikipedia.org/wiki/WebKit" target="_blank">webkit </a>برای نمایش صفحات وب استفاده میکند (گوشی های آیفون، اندروید، پالم ، گوشیهای series60 نوکیا و همچنین تبلت آی پد ، تبلت آمازون کیندل و مرورگر گوگل کروم و سافاری اپل از <a href="http://www.macromediax.com/learn/archive.asp?id=212" target="_blank">موتور رندر</a> وب&zwnj;کیت برای ایجاد و نمایش صفحات وب استفاده میکنند)</span><br /><br /><span style="font-size: 9pt; font-family: tahoma, arial, helvetica, sans-serif;">سیستم عامل بادا از Flash به طرز گسترده ای پشتیبانی میکند و فلش 9 را در داخل خود دارد. شما می توانید فایل های فلش را در برنامه ی خود Embed کنید و از اجرای آنها در گوشی هایی با سیستم عامل بادا اطمینان کامل داشته باشید .</span><br /><br /><span style="font-size: 9pt; font-family: tahoma, arial, helvetica, sans-serif;">سیستم عامل بادا فرایند مولتی تاچ را پشتیبانی میکند ، همچنین شتاب سنج، مغناطیس سنج و سنسوری برای حرکت گوشی دارد.</span><br /><br /><span style="font-size: 9pt; font-family: tahoma, arial, helvetica, sans-serif;"><strong>زبان های برنامه نویسی در بادا</strong></span></p> <p dir="rtl"><span style="font-size: 9pt; font-family: tahoma, arial, helvetica, sans-serif;">نرم افزارهای native در بادا به زبان C++ نوشته میشوند ، این زبان محبوب برنامه نویسان است و برنامه نویسانی که میخواهند کار روی برنامه نویسی بادا را شروع کنند نیازمند یادگیری زبان دیگری نیستند. برای برنامه نویسی و تست برنامه های نوشته شده روی یک شبیه ساز، از <a href="http://en.wikipedia.org/wiki/Eclipse_(software)" target="_blank">Eclipse </a>کمک گرفته شده است.</span><br /><br /><span style="font-size: 9pt; font-family: tahoma, arial, helvetica, sans-serif;">با توجه به اینکه این سیستم عامل فلش و HTML5 را به خوبی پشتیبانی میکند ، طراحان وب نیز می توانند برنامه هایی را در این پلتفرم ها ایجاد کنند و با استفاده از ابزارهای کامپایلر و مفسر، آنها را به برنامه های قابل اجرا بر روی بادا تبدیل کنند. این موضوع باعث می شود روند گسترش برنامه های بادا سرعت گیرد. هم اکنون 13000 برنامه برای سیستم عامل بادا نوشته شده است.</span></p> mobile info@macromediax.com حسین شرفی http://www.macromediax.com/learn/archive.asp?id=217 http://www.macromediax.com/learn/archive.asp?id=217 <p dir="rtl"><span><img style="float: left;" src="http://persianweblog.ir/images/articles/634458014106353750_mobile-sms.jpg" alt="طراحی نسخه موبایل" width="181" height="286" /><span style="font-size: small; font-family: tahoma, arial, helvetica, sans-serif;">در طراحی رابط کاربر نسخه موبایل برای وب سایت ها، باید ارتباط موثری بین سایت خود و گوشی موبایل برقرار کنید.</span><br /><br /><span style="font-size: small; font-family: tahoma, arial, helvetica, sans-serif;">یکی از امکاناتی که در نسخه موبایل وب سایت ها لازم است ، امکان ارسال لینک یا متن کوتاهی از داخل مرورگر توسط <strong>SMS </strong>به یک شماره دیگر است. با توجه به اینکه copy-paste کردن در گوشی های موبایل کاری دشوار است، بهتر است شما بعنوان طراح رابط کاربری ، امکاناتی را برای این امر در اختیار کاربر قرار دهید.</span></span></p> <p dir="rtl"><span style="font-size: small; font-family: tahoma, arial, helvetica, sans-serif;">کاربرد این موضوع در سایت های خبری بسیار جذاب است. بطور مثال هنگامی که در سایت های خبری در حال خواندن خبری هست ، وجود یک دکمه با عنوان SMS The Title میتواند باعث شود تا خواننده ی خبر با یک کلیک عنوان خبر را برای دوست خود sms کند.<br /><br />با استفاده از لینک زیر میتوانید لینکی برای گوشی موبایل درست کنید که اگر کاربر روی آن کلیک کند، متن موردنظر وارد صفحه ی "نوشتن پیامک جدید" در گوشی شود و بعد کاربر کافیست شماره دوست خود را از منو انتخاب کند و گزینه ی ارسال را بزند.</span></p> <p><span style="font-size: small;"><strong>&lt;a href="sms:?body=ّFootball e IRAN va Turkiye Mosavi shod"&gt;ارسال خبر با پیامک&lt;/a&gt;</strong></span></p> <p dir="rtl"><span style="font-size: small; font-family: tahoma, arial, helvetica, sans-serif;">همانگونه که در کد فوق می بینید ، خبری که میخواهید ارسال شود به پارامتر body داده شده است . حال اگر صفحه ی شامل این کد را در موبایل مشاهده کنید عبارت "ارسال خبر با پیامک<strong>"</strong> در گوشی شما قابل کلیک است و با یک کلیک، متن "<strong>Footbal e iran va turkiye mosavi shod</strong>" به صفحه ارسال پیامک گوشی منتقل میشود و میتوانید آنرا برای دوستان خود ارسال کنید. <br /><br />نمونه ای از استفاده از این تگ را میتوانید <a href="http://farsi.khamenei.ir/m" target="_blank">اینجا </a>مشاهده کنید.</span></p> mobile info@macromediax.com حسین شرفی http://www.macromediax.com/learn/archive.asp?id=216 http://www.macromediax.com/learn/archive.asp?id=216 <p dir="rtl"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 9pt; color: #800080;">شما از کدام مرورگر استفاده ميکنيد؟</span><br /><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 9pt;">آيا از کاربران وفادار اينترنت اکسپلورر مايکروسافت هستيد؟ </span><br /><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 9pt;">آيا از طرفداران <a href="http://www.firefox.com/" target="_blank">فايرفاکس</a> هستيد؟ و معتقديد هيچ مرورگري فايرفاکس نميشه ؟</span><br /><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 9pt;">شايد هم دنباله روي گوگل هستيد، از اندرويد تا <a href="http://www.google.com/chrome/" target="_blank">کروم</a> ؟ </span><br /><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 9pt;">آيا هرگز اوپرا را تست کرده ايد؟ شايد الان با <a href="http://www.filehippo.com/download_opera/" target="_blank">اوپرا</a> در حال خوندن اين مقاله باشيد ؟!</span><br /><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 9pt;">آيا ميدانيد که <a href="http://www.macromediax.com/learn/category.asp?cat=browser" target="_blank">مرورگر</a> <a href="http://www.apple.com/safari/download/" target="_blank">سافاري</a> نسخه ي تحت ويندوز هم دارد؟</span></p> <p dir="rtl"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 9pt; color: #ff00ff;">تجربه نو</span><br /><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 9pt;">سال گذشته همين موقع ها بود که نسخه اي از کروم رو نصب کردم . چندان جذاب نبود. بخصوص براي مني که يک مرورگر همه فن حريف مانند فايرفاکس داشتم. اين شد که کروم به کناري رفت و فقط آيکون اش روي صفحه ي ويندوزم باقي ماند. همچنان مرورگر اول من فايرفاکس بود. فقط گاهي براي ديدن يک سايت در مرورگر کروم اونو باز مي کردم. اما هيچي فايرفاکس نميشد . تا اينکه مشکل سنگيني فايرفاکس و هنگ کردن هاي متوالي اش يه روز منو وادار کرد تا از کروم استفاده کنم. اون روز با کروم گذشت.</span></p> <p dir="rtl"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 9pt;">فرداي آن روز تصميم گرفتم به مدت يک ماه از فايرفاکس استفاده نکنم و مرورگر پيش فرضم Chrome باشه. تا درست بتونم قابليت هاشو بشناسم، با بازکردن چند تا TAB نميشه يه مرورگر رو شناخت. ميگن اگه ميخواي کسي رو بشناسي يا باهاش همخونه شو ، يا همسفر. اين بود که ما هم تصميم گرفتيم با کروم يکماه همسفر بشيم تا شايد بتونيم دست از اين فايرفاکس معتادکننده برداريم.</span></p> <p dir="rtl"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 9pt;">بعد از گذشت يک ماه ، من يادگرفتم چگونه از کروم استفاده کنم، عادت کردم بهش. <a href="http://www.macromediax.com/learn/archive.asp?id=163" target="_blank">افزونه هايي که در فايرفاکس</a> استفاده مي کردم در کروم پيدا کردم، حتي به نوار آدرس کروم و طرز تايپ کردن اول آدرس ها براي باز کردن سايت ها عادت کردم . اين قضيه براي فايرفاکسي ها اولش يکمي سخته. چون طرز نمايش url ها در نوار آدرس کروم کمي با فايرفاکس متفاوته و اولش ممکنه خوشتون نياد. الان 6 ماه از اون تصميم مي گذره و به هيچ وجه حاظر نيستم دوباره به مرورگر سنگين فايرفاکس برگردم <a href="http://www.macromediax.com/learn" target="_blank">.</a></span></p> <p dir="rtl"><span><img style="display: block; margin-left: auto; margin-right: auto;" src="http://persianweblog.ir/images/articles/634444775887675000_browsers.jpg" alt="مرورگر های جدید" width="350" height="123" /></span></p> <p dir="rtl"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 9pt;">کروم بسيار سبک ، ساده و در عين حال راضي کننده است. اگه فايرفاکس شما هفته اي يکبار هنگ مي کنه، اين مورد در کروم ماهي يکبار هم به ندرت رخ ميده و تازه اگر هم رخ بده فقط همون Tab بسته ميشه. نه کل مرورگرتون . ميزان Ram مورد استفاده ي کروم خيلي کمه و مسلم بدانيد که از استفاده از اين مرورگر پشيمون نخواهيد شد. اما بايد يکماه اول خودتون رو به تخت ببنديد تا فايرفاکس از خونتون خارج شه !</span></p> <p dir="rtl"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 9pt;">اين تجربه مي تونه در مورد مرورگرهاي ديگه، نرم افزارها و ابزارهاي ديگه ، وسايل غير کامپيوتري ديگه و هر چيزي باشه. گاهي ما اينقدر به يک چيز وابسته ميشيم که حق مطرح شدن رو هم به ديگران نمي ديم. </span></p> browser info@macromediax.com حسین شرفی http://www.macromediax.com/learn/archive.asp?id=215 http://www.macromediax.com/learn/archive.asp?id=215 <div dir="rtl" align="right"><span style="font-size: 12px;"><span style="font-family: tahoma, arial, helvetica, sans-serif;">اين روزها استفاده از گوشي هاي موبايل براي مشاهده صفحات وب با سرعت افزايش يافته و با توجه به پايين بودن سرعت اينترنت موبايلي و همچنين کوچک بودن صفحه نمايش موبايل ها، طراحي نسخه ويژه اي از وب سايت براي مرور در موبايل ها امري اجتناب ناپذير شده است. مشکلي که در اين زمينه پيش ميايد اين است که هم اکنون گوشي هاي مختلفي در بازار هستند که هر کدام رزولوشن صفحه متفاوتي را ارائه ميکنند، اما شما که نمي توانيد براي هر گوشي ، نسخه ويژه اي را طراحي کنيد. پس چه بايد کرد ؟ <br /><br />ما در کل 2 دسته گوشي داريم که قابليت وصل شدن به اينترنت و مرور صفحات وب را دارا هستند:<br /></span></span> <ul> <li style="color: #cc0000;"><span style="font-size: 12px;">Feature Phones</span></li> <li style="color: #cc3300;"><span style="font-size: 12px;">Smart Phones</span></li> </ul> </div> <div dir="rtl" align="right"><span style="font-family: tahoma, arial, helvetica, sans-serif;"><span style="font-size: 12px;"><img src="http://mobiforge.com/files/240x320.gif" alt="" width="86" height="200" align="left" hspace="5" vspace="5" />گوشي هاي <a href="http://en.wikipedia.org/wiki/Feature_phone" target="_blank">feature phone</a> دسته گوشي هايي هستند که امکانات محدودي براي استفاده از اينترنت دارند و اکثرا از ساير صفحه 320x240 (و گاهي کوچکتر از اين) استفاده ميکنند. اکثر گوشيهايي که در سالهاي قبل فروخته شده اند، زيرمجموعه اين رده هستند. بطور مثال :</span></span></div> <div dir="rtl" align="right"> <ul> <li><span style="font-family: tahoma, arial; font-size: 12px;">سري K و C و W سوني اريکسون (320x240 معروف به QVGA)</span></li> <li><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12px;">سري N نوکيا اکثرا </span><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12px;">(320x240) البته سري هاي قديمي تر نوکيا مانند 6600 اکثرا (176x208)بودند.</span></li> <li><span style="font-family: tahoma, arial, helvetica; font-size: 12px;">وضعيت سايرين هم اکثرا </span><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12px;">(320x240) است و اين سايز به نوعي تبديل به <a href="http://mobiforge.com/designing/blog/240x320-new-standard-screen-resolution" target="_blank">کوچک ترين صفحه استاندارد</a> موبايل شده است. </span></li> </ul> </div> <div dir="rtl" align="right"> </div> <div dir="rtl" align="right"><span style="font-family: tahoma, arial, helvetica, sans-serif;"><span style="font-size: 12px;">گوشي هاي اين رده اکثرا داراي مرورگر اينترنت <a href="http://en.wikipedia.org/wiki/WAP_2.0" target="_blank">WAP 2.0</a> هستند . اين مرورگر براي نمايش صفحات وب در صفحه نمايش کوچک طراحي شده است و تا حدي css 2.1 و برخي کدهاي جاوا اسکريپت را هم پشتيباني ميکرد. </span></span></div> <div dir="rtl" align="right"> </div> <div dir="rtl" align="right"> </div> <div dir="rtl" align="right"> <span style="font-family: tahoma, arial, helvetica, sans-serif;"><span style="font-size: 12px;">گوشي هاي <a href="http://en.wikipedia.org/wiki/Smart_phone" target="_blank">SmartPhone </a> گوشي هايي هستند که اکثرا سايز هاي بزرگتري دارند و امکانات بيشتري از فيچر فون ها ارائه ميدهند. همچنين اين گوشي ها معمولا از سيستم عامل هاي پيشرفته تري استفاده ميکنند. گوشي هاي مبتني بر سيستم عامل Android، RIM ، winPhone و آيفون از اين نوعند. اين گوشي ها اکثرا سايزهاي صفحه زير را با خود دارند:</span></span></div> <div dir="rtl" align="right"> <ul> <li><span style="font-family: tahoma, arial, helvetica, sans-serif;"><span style="font-size: 12px;">320x480 معروف به HVGA</span></span><span style="font-size: 12px;"><span style="font-family: terminal,monaco;"><span style="font-family: tahoma,arial,helvetica,sans-serif;"> که اکثرا توسط htc و سامسونگ و اپل (آيفون) بکار گرفته شده.<br /></span></span></span></li> <li><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12px;">360x640 معروف به nHD که اکثرا متعلق به گوشي هاي جديد نوکيا است.<br /></span></li> <li><span style="font-family: tahoma, arial, helvetica, sans-serif;"><span style="font-size: 12px;">480x800 معروف به WVGA که اکثر گوشي هاي ويندوز 7 و برخي اندرويدي ها اين سايزي هستند.</span></span></li> <li><span style="font-family: tahoma, arial, helvetica, sans-serif;"><span style="font-size: 12px;"> سايزهاي بزرگتر معمولا صفحات وب را مانند يک لپتاپ مرور ميکنند و نيازي به نسخه ويژه موبايل ندارند. </span></span></li> </ul> </div> <div style="text-align: center;" dir="rtl"><img src="http://persianweblog.ir/images/articles/634361179018437500_5343006_493c4cc8bc_m.png" alt="" /> </div> <div dir="rtl" align="right"><span style="font-family: tahoma,arial,helvetica,sans-serif;"><span style="font-size: 12px;">شما ميتوانيد يک نسخه موبايل ساده براي کل موارد بالا تهيه کنيد. اما اگر ميخواهيد کمي بيشتر سليقه به خرج دهيد ميتوانيد دو نسخه يکي براي سايز 320x240 و يکي براي 320x480 تهيه کنيد و وظيفه نمايش صفحه براي سايزهاي کوچکتر از 320x240 را به دوش نسخه 320x240 بيندازيد و سايزهاي بزرگتر را کلا بر عهده نسخه موبايل سايز 320x480 بگذاريد. <br /><br />توجه داشته باشيد که بايد در هر دو حالت ، صفحه را با قابليت Fit شدن با سايز صفحه ( استفاده از درصد در اندازه ها بجاي پيکسل) پياده سازي نماييد تا سايزهاي احتمالي غير از سايزهاي معرفي شده نيز پوشش داده شوند. </span></span></div> <div dir="rtl" align="right"><span style="font-family: tahoma, arial, helvetica, sans-serif; color: #ff0000;"><span style="font-size: 12px;">نسخه CSS جداگانه براي سايز هاي کوچکتر از 480 پيکسل:</span></span></div> <div dir="rtl" align="right"><span style="font-family: tahoma,arial,helvetica,sans-serif;"><span style="font-size: 12px;">کمپاني اپل پيشنهاد ميکند که در صورتي که ميخواهيد CSS خاصي را براي صفحات موبايل تعريف و استفاده کنيد از اين کد کمک بگيريد:</span></span></div> <div style="text-align: left;" dir="ltr" align="right"><span style="font-family: 'courier new', courier; background-color: #ffff99; display: block;"><span style="font-family: 'courier new', courier; background-color: #ffff99; display: block;"><span style="font-size: 12px;"> </span></span></span> <div dir="ltr">&lt;link media=&rdquo;only screen and (max-device-width: 480px)&rdquo; href=&rdquo;iPhone.css&rdquo; type=&rdquo;text/css&rdquo; rel=&rdquo;stylesheet&rdquo; /&gt;</div> <span style="font-family: 'courier new', courier; background-color: #ffff99; display: block;"><span style="font-size: 12px;"><br /></span></span></div> <div style="text-align: right;" dir="rtl" align="right"><span style="font-family: tahoma,arial,helvetica,sans-serif;"><span style="font-size: 12px;"><br />در کد بالا شما تعريف ميکنيد که اگر سايز صفحه حداکثر 480 پيکسل بود ، از فايل iphone.css براي شکل دادن به صفحه استفاده شود. براي سايزهاي بزرگتر اين کد کار نمي کند و CSS ديگري که تعريف کرده ايد کار خواهد کرد.</span></span></div> <div style="text-align: right;" dir="rtl" align="right"><span style="font-family: tahoma,arial,helvetica,sans-serif;"><span style="font-size: 12px;"><br /></span></span></div> <div style="text-align: right;" dir="rtl" align="right"><span style="font-family: tahoma,arial,helvetica,sans-serif;"><span style="font-size: 12px;"><a href="http://en.wikipedia.org/wiki/List_of_common_resolutions" target="_blank">ليست رزولوشن هاي متداول در جهان</a> <br /></span></span></div> mobile info@macromediax.com حسین شرفی http://www.macromediax.com/learn/archive.asp?id=214 http://www.macromediax.com/learn/archive.asp?id=214 <div dir="rtl" align="right"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: small;">موسسه معتبر W3C لوگوی رسمی ای را برای نسخه جدید زبان نشانه گذاری HTML نسخه 5 معرفی کرد.</span></div> <div dir="rtl" align="right"> </div> <div style="text-align: center;" dir="rtl"> <img title="html 5 logo" src="http://persianweblog.ir/images/articles/634361179630000000_html5.jpg" alt="html 5 logo" width="400" height="238" /></div> <div style="text-align: center;" dir="rtl"> </div> <div style="text-align: right;" dir="rtl"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: small;">این لوگو در ظاهر ترکیبی از علامت سپر - که معمولا نشان امنیت است - و عدد 5 است که بیشتر شبیه S روی لباس سوپرمن شده است. اما به هرحال داشتن لوگویی برای زبان HTML بسیار واجب می نمود. زیرا در دنیایی که برند ها حرف میزنند، مهم ترین زبان صفحات وب بدون لوگو بود و هرجا سخن از آن میشد، لوگوها و تصاویر نامرتبط در کنار متون منتشر شده نمایش داده میشد.<br /><br />در سایت رسمی html5 همچنین تعدادی لوگو با کیفیت مناسب برای طراحان وب و گرافیست ها قرار داده شده است که میتوانید <a href="http://www.w3.org/html/logo/#downloads" target="_blank">دانلود کنید </a> و در طراحی های خود از آنها استفاده کنید.</span></div> html info@macromediax.com حسین شرفی http://www.macromediax.com/learn/archive.asp?id=213 http://www.macromediax.com/learn/archive.asp?id=213 <div dir="rtl" align="right"><span style="font-size: small;"><span style="font-family: tahoma, arial, helvetica, sans-serif;"><span><img style="float: left; margin: 8px;" title="اندروید" src="http://persianweblog.ir/images/articles/634361180579687500_android-logo-white.png" alt="اندروید" width="130" height="130" align="left" hspace="8" vspace="8" />اندروید (Android) نام یک سیستم عامل موبایل است که توسط شرکت گوگل توسعه داده میشود. این سیستم عامل اوپن سورس است و برپایه هسته لینوکس بنا شده است. اندروید بر خلاف <a href="http://macromediax.com/learn/archive.asp?id=199">سیستم عامل iOS آیفون</a> که فقط پردازنده های <a href="http://en.wikipedia.org/wiki/ARM_architecture" target="_blank">ARM </a> را پشتیبانی میکند، بر روی انواع مختلفی از پردازنده ها (</span></span><a title="ARM architecture" href="http://en.wikipedia.org/wiki/ARM_architecture">ARM</a>, <a title="MIPS architecture" href="http://en.wikipedia.org/wiki/MIPS_architecture">MIPS</a>, <a title="Power Architecture" href="http://en.wikipedia.org/wiki/Power_Architecture">Power Architecture</a>, <a title="X86" href="http://en.wikipedia.org/wiki/X86">x86</a><span style="font-family: tahoma, arial, helvetica, sans-serif;"><span>) قابل نصب است. از سال 2008 تاکنون تلفن های همراه متعددی با استفاده از این سیستم عامل به بازار ارائه شده اند. همچنین چندین Tablet PC نیز با استفاده از این سیستم عامل به بازار ارائه شده اند.<br /><br /><span style="font-weight: bold;">آمارهایی از نرم افزارهای موجود برای اندروید</span><br />تا ماه اکتبر 2010 تعداد یکصدهزار برنامه جانبی برای این سیستم عامل نوشته شده است که سهم بزرگی در محبوبیت این سیستم عامل دارند. تا همین تاریخ تعداد برنامه های نوشته شده برای سیستم عامل آیفون 300 هزار بوده است. اما سرعت رشد سیستم عامل اندروید بسیار بالاتر از بقیه سیستم عامل ها و حتی آیفون است و البته این موضوع را نباید از یاد برد که در لحظه نگارش این مقاله ، اندروید نصف عمر آیفون را دارد.<br /><br />اندروید دارای کتابخانه های برنامه نویسی قدرتمندی است که کار برنامه نویسان را بسیار ساده میکند. از جمله دیتابیس رابطه ای کوچک شده&zwnj;ی SQLite ، توابع گرافیکی 3 بعدی openGL ، <a href="http://macromediax.com/learn/archive.asp?id=212" target="_blank">موتور مرورگر</a> webkit (همانند مرورگر کروم) و موتور گرافیکی SGL .<br /><br /><span style="font-weight: bold;">رابطه اندروید و جاوا :<br /></span></span></span><span style="font-family: tahoma, arial, helvetica, sans-serif;"><span> نرم افزارهای جانبی اندرویدی با استفاده از زبان جاوا نوشته میشوند و برای ارتباط با لایه های زیرین سیستم عامل میتوانند از کتابخانه های جاوایی اندروید استفاده کنند. </span></span><span style="font-family: tahoma, arial, helvetica, sans-serif;"><span>بخش رابط کاربری سیستم عامل اندروید با زبان جاوا نوشته شده است و بسیاری از برنامه های اندروید هم با جاوا نوشته شده اند. اما این سیستم عامل ، Java Virtual machine ندارد . برای اجرای برنامه های جاوایی روی این سیستم عامل، کدهای جاوا به کدهای <a href="http://en.wikipedia.org/wiki/Dalvik_virtual_machine" target="_blank">Dalvik</a> تبدیل میشوند و سپس روی Dalvik virtual machine اجرا میشوند. (دالویک یک ماشین جازی جاوایی است که برای سیستم عامل اندروید بهینه شده است تا هم RAM و هم CPU و هم باطری کمتری مصرف کند). برنامه های جاوایی معمولی هم که روی گوشی های دیگر اجرا میشوند با استفاده از نرم افزارهای شبیه ساز ماشین مجازی جاوا مانند j2ME MIDP Runner روی این سیستم عامل قابل اجرا هستند.<br /><br /><span style="font-weight: bold;">فرمت فایل های پشتیبانی شده:</span><br />اندروید در حالت پیشفرض فایل های mp3, aac , ogg , amr , midi , mpeg4 , wav , bmp , gif , png , jpg را پشتیبانی میکند. اندروید Adobe Flash را نیز پخش میکند و میتواند فایل های GIF متحرک را با حرکت پخش کند. </span></span><span style="font-family: tahoma, arial, helvetica, sans-serif;"><span> برای پخش فایل های جریان دار مانند صوت و ویدئو نیز میتوانید از تگ ویدئو html5 و همچنین تکنولوژی Adobe Flash Streaming استفاده کنید.در نسخه های جدید اندروید، موتور جاوااسکریپت مرورگر کروم که سرعت بسیار بالایی در اجرای کدهای جاوا اسکریپت دارد به مرورگر اندروید متصل شده است. (در ضمن مرورگر اندروید کدهای HTML5 را پشتیبانی میکند)<br /><br /><span style="font-weight: bold;">محیط برنامه نویسی اندروید: </span><br /><a href="http://developer.android.com/sdk/" target="_blank">Android SDK</a> شامل یک دیباگر، کتابخانه های اندروید، شبیه ساز سیستم عامل ، مستندات اندروید و فایل های نمونه و آموزشی است که به شما در ایجاد اولین برنامه هایتان کمک میکند. هم اکنون این SDK بر روی یک سیستم 32 بیتی که لینوکس ، ویندوز و یا mac OSX داشته باشد اجرا میشود. پیش نیازهای نصب این SDK عبارتند از <a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">JDK</a> و <a href="http://en.wikipedia.org/wiki/Apache_Ant" target="_blank">Apache Ant</a> و python 2.2 . برنامه های نوشته شده برای اندروید با پسوند .apk ذخیره میشوند.<br /><br /><br /><span style="font-weight: bold;">App Inventor for Android : شاهکار گوگل در ایجاد برنامه های اندرویدی:<br /><br /></span></span></span></span> <div style="text-align: center;"><span style="font-size: small;"><img title="برنامه ساز اندروید" src="http://persianweblog.ir/images/articles/634361180890468750_android-app-inventor.jpg" alt="برنامه ساز اندروید" width="600" height="443" /></span></div> </div> <div dir="rtl" align="right"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: small;"><span><span style="font-weight: bold;"><br /></span><a href="http://appinventor.googlelabs.com/about/" target="_blank">برنامه ساز اندروید</a> یک محیط برنامه نویسی ویژوال تحت وب برای برنامه نویسان تازه کار است که بر پایه ی کتابخانه جاوایی open Blocks و توسط یکی از استادان برجسته ی دانشگاه MIT بنا شده است و فانکشن هایی برای برقراری ارتباط با سخت افزارهای مورد پشتیبانی اندروید دارد: مانند شتاب سنج، جهت سنج، GSP ، مدیریت پیامک اندروید، مبدل صدا به متن و حتی امکان اتصال به وب سرویس ها (وب سرویس آمازون و توییتر بصورت پیشفرض در این محیط برنامه نویسی گنجانده شده). این محیط برنامه نویسی آنقدر پیشرفت کرده است که دانشگاه های MIT ، هاروارد، ولزلی و سانفرانسیسکو آنرا بعنوان یک کورس برای دانشجویان برگزار میکنند. <br /><br />گوگل هدف از ایجاد سیستمی مانند android app inventor را اینگونه بیان میکند که هر کسی باید قادر باشد تا برای اندروید برنامه بسازد ، حتی بچه های دبستانی که چیزی از برنامه نویسی نمی دانند ، زیرا آنها نیازهای موردنظر خود را با اینکار رفع میکنند و اگر سیستم اندرویدی نداشته باشند ، برای خرید یک گوشی اندرویدی ترغیب میشوند. در این محیط برنامه نویسی شما می توانید با drag-n-drop براحتی کامپوننت ها را روی صفحه بکشید و نوشتن اولین برنامه ی اندرویدی خود را آغاز کنید. (آدرس برنامه ساز گوگل http://appinventer.googlelabs.com است و البته این بخش هم مانند بقیه سیستم های گوگل در ایران قابل دسترس نیست)<br /><br /><a href="http://www.anddev.org/" target="_blank">anddev.org</a> : جامعه برنامه نویسان اندروید </span></span></div> <div dir="rtl" align="right"><span style="font-size: small;"><a href="http://developer.android.com/resources/tutorials/hello-world.html" target="_blank"><span style="font-family: tahoma, arial, helvetica, sans-serif;">hello world</span></a><span style="font-family: tahoma, arial, helvetica, sans-serif;"> : نوشتن اولین برنامه برای اندروید<br /><a href="http://developer.android.com/videos/">Android videos</a> : فیلمهای آموزشی درباره اندروید<br />فیلم آموزشی برنامه نویسی اندروید - <a href="http://alivetorrents.com/torrent/7938812/android-video-tutorial-training-for-developers">دانلود از تورنت . 60 مگ</a> </span></span></div> mobile info@macromediax.com حسین شرفی http://www.macromediax.com/learn/archive.asp?id=212 http://www.macromediax.com/learn/archive.asp?id=212 <div dir="rtl" align="right"><span style="font-family: tahoma, arial, helvetica, sans-serif;"><span style="font-size: x-small;"><span style="font-size: small;"><a href="http://en.wikipedia.org/wiki/Web_browser_engine" target="_blank"><span style="font-weight: bold;"> موتور رندر</span></a> مرورگر چیست ؟</span><br /><span style="font-size: small;">موتور رندر مرورگر که به آن layout engine یا Rendering engine نیز میگویند یک کامپوننت نرم افزاری است که در قلب هر مرورگری قرار دارد و کار ساخت نمای خروجی صفحات را با استفاده از html و CSS بعنوان ورودی بر عهده دارد. بسیاری از مرورگرهایی که میشناسید، از یک موتور رندر یکسان استفاده میکنند ، اما قیافه ظاهری متفاوتی دارند. </span><br /><br /></span></span> <div style="text-align: center;"><img src="http://persianweblog.ir/images/articles/634361182417031250_520px-layout_engine_usage_share-2009-01-07-svg.png" alt="http://uploadpress.files.wordpress.com/2010/10/520px-layout_engine_usage_share-2009-01-07-svg.png" /><br /><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: x-small;">نمودار رشد استفاده از موتور رندرهای موجود </span><br /><br /><br /><br /></div> <span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: small;"><span>وقتی دو مرورگر از یک rendering engine استفاده کنند، خروجی یکسانی از یک کد html و css میدهند. بنابراین اگر شما در زمینه طراحی وب سایت مشغول هستید ، باید صفحات وب را طوری طراحی کنید که کلیه این layout engine ها آنها را به درستی نمایش دهند. <br /></span></span></div> <div dir="rtl" align="right"> </div> <div dir="rtl" align="right"> </div> <div dir="rtl" align="right"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: small;"><span><span style="color: #cc0066;">مهم ترین Rendering Engine های موجود: </span><br /></span></span></div> <div dir="rtl" align="right"> <ul> <li><span style="font-size: small;"><span style="font-family: tahoma,arial,helvetica,sans-serif;"><span><a href="http://en.wikipedia.org/wiki/Trident_%28layout_engine%29" target="_blank">Trident </a> : این موتور رندری است که اینترنت اکسپلورر </span></span><span style="font-family: tahoma,arial,helvetica,sans-serif;"><span>(نسخه تحت ویندوز و تحت موبایل) </span></span><span style="font-family: tahoma,arial,helvetica,sans-serif;"><span>از آن استفاده میکند. نرم افزارهای معروفی مانند ویژوال استودیو، جی تاک،اوت لوک، لایو رایتر نیز از این موتور رندر برای نمایش صفحات HTML استفاده میکنند.</span></span></span></li> <li><span style="font-size: small;"><span style="font-family: tahoma,arial,helvetica,sans-serif;"><span><a href="http://en.wikipedia.org/wiki/Gecko_(layout_engine)">Gecko</a> : این موتور رندر اوپن سورس موزیلا است و فایرفاکس </span></span><span style="font-family: tahoma,arial,helvetica,sans-serif;"><span>(نسخه تحت PC و تحت موبایل) </span></span><span style="font-family: tahoma,arial,helvetica,sans-serif;"><span>از این موتور برای نمایش صفحات وب استفاده میکند. مرورگر flock هم تا نسخه 2.5 از این موتور رندر استفاده می کرد. اما ازنسخه 3 به بعد تصمیم گرفته از موتور رندر وب کیت استفاده کند. </span></span></span></li> <li><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: small;"><span><a href="http://en.wikipedia.org/wiki/WebKit">WebKit</a> : موتور رندر وب&zwnj;کیت را مرورگر کروم گوگل ،مرورگر فلوک نسخه 3 ،مرورگر safari و مرورگر موجود در گوشی های s60 نوکیا استفاده میکنند. </span></span></li> <li><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: small;"><span><a href="http://en.wikipedia.org/wiki/Presto_(layout_engine)">Presto</a> : این موتور رندر توسط کلیه نسخه های مرورگر opera (نسخه تحت PC و تحت موبایل) استفاده میشود.</span></span></li> <li><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: small;"><span><a href="http://en.wikipedia.org/wiki/KHTML">KHTML </a> : این موتور رندر توسط مرورگر کانکوئرر (مرورگر پیشفرض اکثر نسخه های لینوکس) استفاده میشود.<br /></span></span></li> </ul> <span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: small;"><span><br /><a href="http://en.wikipedia.org/wiki/Comparison_of_web_browser_engines" target="_blank">مقایسه</a> : موتورهای Khtml و Presto و Webkit تحت سیستم عامل سیمبیان هم اجرا میشوند، اما بقیه خیر (البته ممکن است با شبیه سازی نرم افزاری قابل اجرا باشند). همچنین کلیه موتورهای رندر فوق بغیر از Trident که مخصوص IE است نسخه تحت لینوکس و مکینتاش دارند. </span></span><br /><br /><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: small;"><span style="font-weight: bold;">گوگل</span> <span style="font-weight: bold; color: #330066;">کروم</span>: گوگل در طراحی مرورگر خود از ترفند جالبی استفاده کرده است. مرورگر کروم تنظیمات زیرساختی اش مانند مدیریت proxy و کوکی ها را بر عهده ویندوز گذاشته است ، اما خروجی صفحات را با موتور رندر خودش ایجاد میکند و به کاربر نمایش میدهد. برای امتحان این موضوع کافیست سعی کنید در بخش options مرورگر کروم ، یک پروکــسی فعال کنید. میبینید که با زدن دکمه ی change proxy setting ، برگه ی internet options ویندوز برای شما نمایش داده میشود. <br /><br /><span style="font-weight: bold;">اوپرا </span>: این مرورگر که واقعا در حقش داره ظلم میشه استانداردترین مرورگر موجوده که از حداکثر استانداردهای wc3 پشتیبانی میکنه و تست <a href="http://en.wikipedia.org/wiki/Acid3">ACID3 </a> رو موفق تر از بقیه مرورگرها پشت سر گذاشته. حتی نسخه موبایل اوپرا هم امتیاز 98 رو از 100 در تست اسید3 کسب کرده ، اما دلیل رشد کم این مرورگر رو میشه نداشتن یک حامی بزرگ دانست. مرورگرهایی مانند IE , chrome , firefox دارای پشتیبان های بزرگی برای تبلیغ و رواج اون ها هستند، اما اوپرا حامی بزرگی نداره و نرخ رشد چندانی نداره.<br /><br /></span> <ul> <li><span style="font-size: small;"><a href="http://en.wikipedia.org/wiki/Comparison_of_web_browsers"><span style="font-family: tahoma, arial, helvetica, sans-serif;">مقایسه مرورگرها</span></a></span></li> <li><span style="font-size: small;"><a href="http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29"><span style="font-family: tahoma, arial, helvetica, sans-serif;">مقایسه میزان پشتیبانی موتورهای رندر از CSS</span></a></span></li> <li><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: x-small;"><span style="font-size: small;"><a href="http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29">مقایسه میزان پشتیبانی موتورهای رندر از HTML 5</a> </span><br /></span></li> </ul> </div> browser info@macromediax.com حسین شرفی http://www.macromediax.com/learn/archive.asp?id=211 http://www.macromediax.com/learn/archive.asp?id=211 <div dir="rtl" align="right"><div align="center"><img src="http://mspfcis.files.wordpress.com/2010/04/visual-studio-2010-logo.png" alt="ویژوال استودیو" title="ویژوال استودیو" hspace="3" vspace="3" align="left" /></div> <font face="tahoma,arial,helvetica,sans-serif"><font size="2">ویژوال استودیو امکانی دارد که میتوانید افزونه های مختلفی را به آن اضافه کنید. این افزونه ها امکانات جذابی را به ویژوال استودیو اضافه میکنند. برای دانلود این افزونه ها کافیست به <a href="http://visualstudiogallery.msdn.microsoft.com/en-us/" target="_blank">اینجا </a> مراجعه کنید. توجه داشته باشید که اکثر این افزونه ها FREE و برخی از آنها بصورت پولی هستند که امکان دانلود نسخه TRIAL آنها فراهم است<a href="http://macromediax.com/learn/">.</a> </font></font></div><div dir="rtl" align="right"><div align="center"><br /></div><font face="tahoma,arial,helvetica,sans-serif"><font size="2">در ادامه برخی از <a href="http://visualstudiogallery.msdn.microsoft.com/en-us/site/search?f[0].Type=RootCategory&amp;f[0].Value=tools&amp;f[0].Text=Tools&amp;sortBy=Popularity&amp;pageIndex=1">جذاب ترین افزونه ها</a> خدمت شما معرفی میشود: <br /></font></font></div><div dir="rtl" align="right"><ul><li><font face="tahoma,arial,helvetica,sans-serif"><font size="2">افزونه ی <a href="http://visualstudiogallery.msdn.microsoft.com/en-us/98fef791-eb65-4cdf-bf84-077b98c234cf">copy as HTML</a> : اگر وبلاگ نویس هستید و میخواهیدبخشی از کد ویژوال استودیو خود را در وبلاگتان قرار دهید این افزونه مخصوص شماست . کدهای کپی شده حتی رنگ تگ هایشان را حفظ میکنند.</font></font></li><li><font face="tahoma,arial,helvetica,sans-serif"><font size="2">افزونه ی <a href="http://visualstudiogallery.msdn.microsoft.com/en-us/656f8df1-13ae-47b3-8f9a-89bf107c3b2a">Code4Blog </a> : این هم کارش کپی کدها برای قرار دادن در وبلاگه. </font></font></li><li><font face="tahoma,arial,helvetica,sans-serif"><font size="2">افزونه ی <a href="http://visualstudiogallery.msdn.microsoft.com/en-us/55c24bf1-2636-4f94-831d-28db8505ce00?SRC=Home">Regex Editor</a> : برای ویرایش regular Expreession هایی که خودتان ایجاد کرده اید.</font></font></li><li><font face="tahoma,arial,helvetica,sans-serif"><font size="2">افزونه ی <a href="http://visualstudiogallery.msdn.microsoft.com/en-us/7c8341f1-ebac-40c8-92c2-476db8d523ce?SRC=Home">spell Checker</a> : برای چک کردن متن هایی مانند کامنت ها و متن رشته ها</font></font></li><li><font face="tahoma,arial,helvetica,sans-serif"><font size="2">افزونه ی <a href="http://visualstudiogallery.msdn.microsoft.com/en-us/4b92b6ad-f563-4705-8f7b-7f85ba3cc6bb">Highlight </a> : کافیست یک کلمه را در محیط ویژوال استودیو با موس هایلایت کنید. کل کلمات شبیه آن هایلایت میشوند .</font></font></li><li><font face="tahoma,arial,helvetica,sans-serif"><font size="2">افزونه ی <a href="http://visualstudiogallery.msdn.microsoft.com/en-us/B08B0375-139E-41D7-AF9B-FAEE50F68392">Snippet Designer</a> : این افزونه امکان ساخته <a href="http://msdn.microsoft.com/en-us/library/ms165392%28VS.80%29.aspx">snippet</a> را برای شما فراهم میکند.</font></font></li><li><font face="tahoma,arial,helvetica,sans-serif"><font size="2">افزونه ی <a href="http://visualstudiogallery.msdn.microsoft.com/en-us/3439b095-03f5-4db7-ae3f-ba2cbe09c876">Snipper </a> : افزونه ی دیگری برای ایجاد snippet های شخصی.<br /></font></font></li><li><font face="tahoma,arial,helvetica,sans-serif"><font size="2">افزونه ی <a href="http://visualstudiogallery.msdn.microsoft.com/en-us/d771cbc8-d60a-40b0-a1d8-f19fc393127d">HTML5 intellisense</a> : کدهای html5 را براحتی میشناسه و در کدنویسی وقت شما رو کم میکنه.</font></font></li><li><font face="tahoma,arial,helvetica,sans-serif"><font size="2">افزونه ی <a href="http://visualstudiogallery.msdn.microsoft.com/en-us/4762f91c-c69f-43dc-8a69-2ec4ab27c610">Telerik WebUI Controls</a> : کنترل های کمپانی تلریک برای محیط وب</font></font></li><li><font face="tahoma,arial,helvetica,sans-serif"><font size="2">افزونه ی <a href="http://visualstudiogallery.msdn.microsoft.com/en-us/f63786bf-a137-4433-9d2c-6eea56d39927">Regex Explorer</a> : این افزونه امکان تست regex های شما را در محیط ویژوال استودیو فراهم مکینه.</font></font></li><li><font face="tahoma,arial,helvetica,sans-serif"><font size="2">افزونه ی <a href="http://visualstudiogallery.msdn.microsoft.com/en-us/0db4814c-255e-4cc6-a2c2-a428de7f8949">HTML Checker</a> : کدهای اچتمل و asp.net شما را از لحاظ گرامر چک میکنه.</font></font></li><li><font face="tahoma,arial,helvetica,sans-serif"><font size="2">افزونه ی <a href="http://visualstudiogallery.msdn.microsoft.com/en-us/F5CFBE65-D843-4C96-8F24-2C169676504C">VS.php</a> : ویژوال استودیوی شما را به محیطی برای نوشتن و دیباگ برنامه های php تبدیل میکنه. </font></font></li><li><font face="tahoma,arial,helvetica,sans-serif"><font size="2">افزونه ی <a href="http://visualstudiogallery.msdn.microsoft.com/en-us/0e33cb22-d4ac-4f5a-902f-aff5177cc94d">Brace Completer</a> : این افزونه به محض اینکه یک آکولاد باز ایجاد کنید و اینتر بزنید، آکولاد بسته اش رو میسازه.</font></font></li><li><font face="tahoma,arial,helvetica,sans-serif"><font size="2">افزونه ی <a href="http://visualstudiogallery.msdn.microsoft.com/en-us/7dbae8b3-5812-490e-913e-7bfe17f47f1d">DevColor </a> : این افزونه رنگ های بکار رفته در CSS ها رو underline میکنه و یک باکس انتخاب رنگ هم برای انتخاب رنگ جدید کنارش باز میکنه.</font></font></li><li><font face="tahoma,arial,helvetica,sans-serif"><font size="2">افزونه ی <a href="http://visualstudiogallery.msdn.microsoft.com/en-us/9E31CB32-D731-4357-8038-EFD12C9C76DE">UML Modeling Tools</a> : امکان رسم uml های مانند useCase و غیره رو در محیط ویژوال استودیو فراهم میکنه.</font></font></li><li><font face="tahoma,arial,helvetica,sans-serif"><font size="2">افزونه ی <a href="http://visualstudiogallery.msdn.microsoft.com/en-us/f4e73257-fda0-49be-a718-5188164f633d">VS Explorer</a> : فایل های داخل solution explorer رو براحتی browse کنید.</font></font></li><li><font face="tahoma,arial,helvetica,sans-serif"><font size="2">افزونه ی <a href="http://visualstudiogallery.msdn.microsoft.com/en-us/bb424812-f742-41ef-974a-cdac607df921">world of VS Default broeser switcher</a> : امکان browse کردن سایت را در مرورگرهای مختلف با یک کلیک فراهم میکنه.</font></font></li><li><font face="tahoma,arial,helvetica,sans-serif"><font size="2">افزونه ی <a href="http://visualstudiogallery.msdn.microsoft.com/en-us/0e313dfd-be80-4afb-b5e9-6e74d369f7a1">sql server compact toolbox</a> : این افزونه قابلیت هایی مانند import کردن از فایل CVS و ویزاردهایی برای ساخت جدول و غیره را به sql compact اضافه میکند.</font></font></li><li><font face="tahoma,arial,helvetica,sans-serif"><font size="2">افزونه ی <a href="http://visualstudiogallery.msdn.microsoft.com/en-us/50b12550-622c-4790-a101-4715b7d9ce88">Numbered Bookmarks</a> : امکان اضافه کردن بوکمارک های شماره دار و صدازدن آنها را در کنار هر خط از کد شما فراهم میکنه.</font></font></li><li><font face="tahoma,arial,helvetica,sans-serif"><font size="2">افزونه ی <a href="http://autobuildversion.codeplex.com/">Build Version Increment</a> : افزونه ای برای کنترل نسخه در ویژوال استودیو</font></font></li><li><font face="tahoma,arial,helvetica,sans-serif"><font size="2"> افزونه ی <a href="http://visualstudiogallery.msdn.microsoft.com/en-us/d0d33361-18e2-46c0-8ff2-4adea1e34fef">Productivity power tools</a> : افزونه ای برای فعال/غیرفعال کردن سایر افزونه ها، همچنین شامل چندین امکان جالب و ضروری دیگر نیز هست که بهتر است در صفحه ی خودش امکاناتش رو بخونید. <br /></font></font></li></ul><font face="tahoma,arial,helvetica,sans-serif" size="2">افزونه های بیشمار دیگری هست که میتوانید شما میتوانید از آنها استفاده کنید. فقط توجه داشته باشید که هر یک از این افزونه ها برای نسخه ی خاصی از ویژوال استودیو است. زیر دکمه ی دانلود در صفحه ی هر افزونه ، ورژن های ساپورت شده ی ویژوال استودیو ذکر شده است.</font><br /><font face="tahoma,arial,helvetica,sans-serif"><font size="2"> </font></font></div> dot-net info@macromediax.com حسین شرفی http://www.macromediax.com/learn/archive.asp?id=210 http://www.macromediax.com/learn/archive.asp?id=210 <div dir="rtl" align="right"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: small;"><span>گاهی نکات طراحی رابط کاربری در وب سایت ها آنقدر ظریف است که حتی بزرگترین طراحان نیز از آن غافل میشوند . <br /></span></span></div> <div dir="rtl" align="right"><span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: small;"><span><br /><span style="color: #ff0000;"><strong>دکمه مفهوم دارد:</strong></span><br />یکی از نکاتی که در طراحی <strong>جیمیل </strong>رعایت شده ، اما در سایت <strong>هات میل </strong>رعایت نشده است، استفاده از مفهوم <strong>دکمه </strong>است. دکمه در کلیه سایت ها مفهوم ثبت شدن را برای کاربر دارد. در حالی که <span style="color: #336699;"><strong>لینک </strong></span>مفهوم منتقل شدن به صفحه دیگر را می رساند. اما گاهی طراحان این دو شیئ را جابجا استفاده میکنند. به شکل زیر توجه کنید. شما در هنگامیکه یک ایمیل باز است ، دکمه های زیر را در یاهو و جیمیل مشاهده میکنید. اما در صورتی که در هاتمیل باشید فقط چند لینک بالای صفحه می بینید. حتی من هم که با محیط هاتمیل مدت هاست کار میکنم، هنوز هنگامیکه روی لینک delete کلیک میکنم حس میکنم احتمال داره الان صفحه بره به یه آدرس دیگه. </span></span></div> <div dir="rtl" align="right"> </div> <div dir="rtl" align="center"><img src="http://persianweblog.ir/images/articles/634361183287031250_hotmail-yahoo-gmail.png" alt="" width="335" height="153" /></div> <div dir="rtl" align="right"><span style="font-family: tahoma, arial, helvetica, sans-serif;"><span style="font-size: x-small;"><span style="font-size: small;">نکته دوم : <span style="color: #ff0000;">متمایز نبودن منوهای پایین افتادنی از لینک ها</span></span><br /><span style="font-size: small;">در بالای صفحه ی ایمیل هاتمیل ، چند لینک وجود دارد بنام photos , messenger , ... که هر کدام از آنها شامل گزینه های زیر مجموعه ای هستند. اما تا وقتی شما موس خود را روی آنها نگه ندارید، متوجه نمی شوید که اینها لینک نیستند به سرویس های دیگر مایکروسافت. بلکه منوهایی هستند که باز میشوند. </span><br /><span style="font-size: small;">و حالا در جیمیل: هرجا منوی پایین افتادنی ای وجود دارد، با نشان دادن یک مثلث کوچک در کنارش، از لینک ها متمایز شده است و به همین جهت شما همیشه با یک نگاه تشخیص میدهید که آیا این متن لینک است یا منوی بازشو.</span><br /><br /></span></span> <div align="center"><img src="http://persianweblog.ir/images/articles/634361183700468750_hotmail-yahoo-gmail-2.png" alt="http://uploadpress.files.wordpress.com/2010/08/hotmail-yahoo-gmail-2.png" /></div> <br /> <div dir="rtl" align="right"><span style="font-family: tahoma, arial, helvetica, sans-serif;"><span style="font-size: x-small;">استفاده ی درست از عناصر در صفحه ، باعث میشود کاربر احساس راحتی کند و ناخودآگاه به استفاده از سرویسی که شما میدهید ترغیب شود. از مفاهیم User Interface درست استفاده کنید.</span></span></div> </div> <div dir="rtl" align="center"> </div> web-design info@macromediax.com حسین شرفی http://www.macromediax.com/learn/archive.asp?id=209 http://www.macromediax.com/learn/archive.asp?id=209 <div dir="rtl" align="right"><font face="tahoma,arial,helvetica,sans-serif"><font size="2">برای ایجاد سایت های چند ستونه توسط <a href="http://macromediax.com/learn/category.asp?cat=html" target="_blank">CSS </a> یکی از بهترین خاصیت هایی که میتوانید به تگ ها بدهید ، خاصیت Float است. <br /><br /></font></font><div align="center"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/06/float-css.jpg" alt="آموزش html " title="آموزش html " width="325" height="285" /><br /></div><font face="tahoma,arial,helvetica,sans-serif"><font size="2"><br /></font></font></div><div dir="rtl" align="right"><font face="tahoma,arial,helvetica,sans-serif"><font size="2">وقتی به یک المان </font></font><font face="tahoma,arial,helvetica,sans-serif"><font size="2">در کد خود float به سمت چپ یا راست میدهید ، </font></font><font face="tahoma,arial,helvetica,sans-serif"><font size="2">المان </font></font><font face="tahoma,arial,helvetica,sans-serif"><font size="2">مورد نظر به آن سمت خاص میرود و بقیه </font></font><font face="tahoma,arial,helvetica,sans-serif"><font size="2">المان </font></font><font face="tahoma,arial,helvetica,sans-serif"><font size="2">هایی که بعد از تگ مذکور آمده اند و float ندارند به سمت مخالف رانده میشوند و اطراف </font></font><font face="tahoma,arial,helvetica,sans-serif"><font size="2">المان </font></font><font face="tahoma,arial,helvetica,sans-serif"><font size="2">مورد نظر را فرا می گیرند. </font></font> <br /></div><div dir="rtl" align="right"> <br /></div><div dir="rtl" align="right"><font face="tahoma,arial,helvetica,sans-serif"><font size="2">در استفاده از خاصیت float و clear در <a href="http://macromediax.com/learn/category.asp?cat=html">تگ های html</a> چند نکته است که باید مدنظر داشته باشید : </font></font></div><div dir="rtl" align="right"><ul><li><font size="2"><font face="tahoma,arial,helvetica,sans-serif">اگر میخواهید </font></font><font face="tahoma,arial,helvetica,sans-serif"><font size="2">المان های </font></font><font size="2"><font face="tahoma,arial,helvetica,sans-serif">دیگر اطراف </font></font><font face="tahoma,arial,helvetica,sans-serif"><font size="2">المان </font></font><font size="2"><font face="tahoma,arial,helvetica,sans-serif">float شده را بگیرند باید بصورت inline باشند یا اگر float دارند باید جهت float آنها با جهت float </font></font><font face="tahoma,arial,helvetica,sans-serif"><font size="2">المان </font></font><font size="2"><font face="tahoma,arial,helvetica,sans-serif">اولیه یکی باشد. <br /></font></font></li><li> <font size="2"><font face="tahoma,arial,helvetica,sans-serif">المان هایی که خاصیت float می گیرند، اندازه شان به اندازه محتوای داخلشون بستگی دارد و اگر محتوا کم باشد، </font></font><font face="tahoma,arial,helvetica,sans-serif"><font size="2">المان مورد نظر کوچک میشه . برای رفع این مشکل باید width رو به المانی که float دارد بدهید. <br /></font></font></li><li><font face="tahoma,arial,helvetica,sans-serif"><font size="2">اگر در یک المان block چند تا المان float داشته باشید ، المان بلاک جمع میشه و گاهی المان های float از پایین ، از المان parent خود بیرون می زنند. برای رفع این مشکل <a href="http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/" target="_blank">اینجا </a> را بخوانید .</font></font></li><li><font face="tahoma,arial,helvetica,sans-serif"><font size="2">اگر المانی که بعد ازالمان float شده میاد، خاصیت clear داشته باشد، دیگه اطراف المان فلوت شده را فرا نمی گیرد.</font></font></li><li><font face="tahoma,arial,helvetica,sans-serif"><font size="2">المانی که خاصیت clear=both دارد و float نیز شده است، فقط المان هایی را که قبل از خودش آمده است، clear میکند . نه المان های بعدی را . (<a href="http://www.w3schools.com/Css/pr_class_clear.asp">آشنایی با تگ clear</a> ) </font></font></li></ul></div> css info@macromediax.com حسین شرفی