وبلاگ داتیس

زیر شاخه: عمومی توسط: marSoul

یکی از مهمترین ابزارها برای هر طراح و برنامه نویس سایت نرم افزار FTP است. نزم افزارهای خیلی زیادی برای این منظور وجود دارند و من چند تایی از این نرم افزارهارو تست کردم ولی این اواخر فکر کنم بهترین نرم افزار رو پیدا کردم.

FileZilla FTP Client واقعا نرم افزار خوبیه، کار کردن با اون خیلی راحته و قبل اطمینان هم هست، مهمتر از همه اینه که این نرم افزار رایگان عرضه میشه ! شما میتونید برای اکثر سیستم عاملها دانلود کنید.

چند Screen Shot از این برنامه :

قابلیتهای اصلی:

• راحتی کار کردن
• پشتیبانی از FTP, FTP over SSL/TLS (FTPS) and SSH File Transfer Protocol (SFTP)
• در اکثر سیستم عاملها کار می کنه : Windows, Linux, *BSD, OSX و ...
• در چند زبان وجود داره
• قابلیت ارسال فایلهای بزرگتر از 4 گیگابایت
• مدیریت سایت و لیست دریافت و ارسال قدرتمند
• پشتیبانی از Drag & Drop
• قابلیت تنظیم سرعت
• فیلتر کردن نام فایلها
• قابلیت تنظیم شبکه اتوماتیک
• ویرایش فایل به صورت Remote
• Keep-alive
• پشتبیانی از FTP-Proxy

شما می توانید از این لینک دانلود کنید، همینطور از سایت برنامه هم دیدن کنید.

مهندس

زیر شاخه: کارهای من توسط: marSoul

یکی از مشتریان که توسط یکی از دوستانم بهم معرفی شده بود دو تا وب سایت برای طراحی سفارش داد و مشخصات این دو صفحه رو در دو صفحه فایل Word به من داد !! دیگه هیچ گونه مشخصاتی درباره این سایتها به من نداد و تنها چیزی که گفت این بود که سایت ساده باشه و سریع آماده بشه و زیاد هم هزینه نداشته باشه ! من هم در عرض 3 روز آماده کردم، نتیجه بد نشد ولی نباید از یه فایل word و 3 روز زمان انتظار بیشتری داشت.

سایت Khalil Sharaf

این سایت برای یک شرکت تجاری است که در دبی فعالیت می کنه. آدرس این سایت http://www.khalilsharaf.com هستش. در طراحی این سایت از Adobe Illustrator و Adobe Photoshop استفاده کردم و برای ساخت از HTML 4.01 Strict و CSS.

سایت Makcolour

این سایت هم مربوط به یک شرکت که در زمینه  تولید رنگ و مواد اولیه فعالیت می کنه هستش، آدرس : http://www.makcolour.co.uk هست . در ساخت این سایت هم از Adobe Illustrator و Photoshop و HTML 4.01 Strict و CSS استفاده کردم.

مهندس

زیر شاخه: Illustrator, Photoshop توسط: marSoul

در این آموزش من نحوه ساخت یک آیکان موبایل طی چند مرحله بسیار ساده را در Adobe Illustrator به شما آموزش می دهم. در نهایت از Photoshop برای ایجاد یک سری افکت های زیبا کننده هم استفاده خواهم کرد.شما از این تکنیکهای ساده می توانید برای ساخت هر آیکان دیگری هم استفاده کنید. امیدوارم برایتان مفید باشد.

شروع کار در Adobe Illustrator

ابتدا یک سند جدید در Illustrator ایجاد کنید. از Toolbar ابزار Rounded Rectangle Tool را انتخاب کنید و یک مستطیل به اندازه دلخواه رسم کنید. رنگ دلخواه را برای Fill Color انتخاب کنید و Stroke Color را None بگذارید. از Toolbar ابزار Mesh Tool را انتخاب کنید و یک رنگ که از رنگ مستطیل روشن تر باشد را انتخاب کنید و در گوشه سمت چپ بالای مستطیل یک بار کلیک کنید. شکل ما تا اینجا بدین شکل خواهد بود :

حال دوباره ابزار Rounded Rectangle Tool را انتخاب کنید رنگ آبی روشن را برای Fill Color انتخاب کنید و یک مستطیل کوچکتر درون مستطیل اولی رسم کنید، حال ابزار Mesh Tool را دوباره انتخاب کنید و با رنگ آبی روشن تر در قسمت بالا چپ یکبار کلیک کنید، شکل بدین صورت خواهد بود :

حال برای ساخت دکمه های موبایل باز هم از ابزار Rounded Rectangle Tool استفاده می کنیم و چند مستطیل کوچک در پایین مستطیل آبی رنگ ایجاد می کنیم :

نهایی کردن کار در Adobe Photoshop

حال Photoshop را اجرا کنید و یک فایل جدید ایجاد کنید (250x250 پیکسل). به این نکته دقت کنید :

من برای بهتر انجام دادن کار قسمتهای موبایل را به صورت جداگانه وارد Photoshop می کنم، بدین صورت که هم Illustrator و هم Photoshop باهم Open هستند. اگر از نسخه CS2 به بعد استفاده می کنید وقتی این لایه ها را به درون Photoshop می آورید به صورت Smart Object می شناسد که خیلی قابلیت مناسبی است.

برای این کار هنگامی که در Illustrator هستید هر لایه را به صورت جداگانه انتخاب کنید و آنرا Drag کنید و در Photoshop درون فایل جدیدی که ایجاد کردید Drop کنید. برای مثال لایه مستطیل طوسی رنگ را جدا، مستطیل آبی رنگ را جدا و دکمه ها را جدا درون Photoshop بیاورید، با این کار شما سه لایه Smart Object خواهید داشت.

حال لایه مستطیل طوسی رنگ را انتخاب کنید و با Right Click روی آن گزینه Blending Options را انتخاب کنید، به این لایه Inner Shadow و Gradient Overlay می دهیم، بدین صورت :

به مستطیل آبی رنگ هم Inner Shadow می دهیم :

به لایه دکمه ها Bevel and Emboss و Gradient Overlay می دهیم :

تمام  شد ! این هم تصویر نهایی :

امیدوارم برایتان مفید واقع شده باشد... فایلها را برایتان قرار می دهم :

دریافت فایل 521Kb

مهندس

زیر شاخه: Illustrator توسط: marSoul

یکی از گزینه های بسیار مفید در Adobe Illustrator امکان trace کردن یک تصویر می باشد. بدین معنی که شما می توانید یک تصویر Raster را در Illustrator قرار بدهید و توسط این ابزار آنرا به یک تصویر Vector تبدیل نمایید. اما این کار چگونه انجام می شود ؟

من برای توضیح از نسخه CS3 استفاده کرده ام.

ابتدا ین فایل جدید در Illustrator ایجاد کنید، سپس تصویر Raster مورد نظر خودتان را توسط گزینه Place از منوی File در فایل جدید قرار دهید. به محض Place کردن تصویر شما یک نوار در قسمت Option Bar بدین شکل اضافه می شود :

با کلیک کردن بر روی Live Trace تصویر شما به راحتی به Vector تبدیل می شود :

شما می توانید با کلیک کردن روی Tracing Option Dialog به گزینه های بیشتری برای کنترل کردن نحوه Trace شدن تصویر دسترسی داشته باشید :

گزینه های Tracing :

• Preset مشخص کننده نوع preset استفاده شده می باشد.
• Mode مشخص کننده حالت رنگ می باشد.
• Threshold مشخص کننده آستانه برای تولید تصویر سیاه و سفید می باشد، پیکسلهای روشن تر از این آستانه به سفید و تاریکتر به مشکی تبدیل می شوند، این گزینه فقط در حالت سیاه و سفید فعال است.
• Palette مشخص کننده نوع رنگ در trace می باشد، این گزینه فقط در حالت رنگی فعال است.
• Max Colors مشخص کننده بیشترین تعداد رنگ استفاده شده در حالت trace رنگی یا grayscale می باشد.
• Output to Swatches برای هر رنگ استفاده شده در Trace یک swatch اضافه می کند.
• Blur تصویر Trace را blur می کند.
• Resample تصویر Trace را به اندازه رزولوشن مورد نظر resample می کند.
• Fills قسمتهایی را به صورت Fill در می آورد.
• Strokes قسمتهایی را به صورت Stroke path در می آورد.
• Max Stroke Weight مشخص کننده بیشترین مقدار پهنا برای تبدیل شدن به stroke می باشد.
• Min Stroke Length مشخص کننده کمترین مقدار برای تبدیل شدن به Stroke می باشد.
• Path Fitting کنترل کننده فاصله بین شکل trace شده و شکل اصلی می باشد. مقادیر کمتر خطوط سفت تر و مقادیر بیشتر خطوط شل تری ایجاد می کنند.
• Minimum Area مشخص کننده کوچکترین مقدار در تصویر اصلی می باشد که باید trace شود.
• Corner Angle مشخص کننده مقدار دقت یک زاویه ها در تصویر trace شده می باشد.
• Raster مشخص کننده نحوه نمایش تصویر bitmap در تصویر trace شده است.
• Vector مشخص کننده نحوه نمایش تصویر trace شده است.

مهندس

زیر شاخه: Flash, X)HTML), طراحی وب سایت توسط: marSoul

همانطور که قبلا گفته بودم Validate کردن یک سایت از کارهای بسیار مهمی است که هر طراح وب سایت باید به آن توجه داشته باشد و آنرا انجام دهد. اما مشکلی که معمولا برای Validate کردن ممکن است برای بسیاری بوجود آید هنگامی است که بخواهیم اجزای Flash را در سایت قرار دهیم. این اجزا به تنهایی Validate نخواهند شد و برای رفع این مشکل روشهای زیادی است، روشی که من پیشنهاد می کنم استفاده از UFO می باشد.

ابتدا فایل UFO را از این لینک دریافت کنید.

سپس سند HTML یا XHTML مورد نظر خود را ایجاد کنید. یک Placeholder برای فایل Flash در آن قرار دهید. سپس به آن یک Unique ID بدهید. مثل کد زیر :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UFO Test Document</title>
</head>
<body>
<div id="ufo">
  <p>Place Flash Content Here</p>
</div>
</body>
</html>

در مرحله بعد باید UFO Script را به صفحه خود لینک کنیم. کد زیر را در قسمت head اضافه کنید. توجه کنید که آدرس Script را درست داده باشید : 

<script src="ufo.js" type="text/javascript"></script>

سپس برای هر یک از اجزای Flash در سایت باید یک Object برایشان تعریف کنیم. به کد زیر دقت کنید :

<script type="text/javascript">
    var FO = { movie:"swf/myMovie.swf", width:"300", height:"120",
      majorversion:"6", build:"40" };
</script>

در مرحله بعد برای هر یک از اجزای فلش باید UFO را فرا بخوانیم. کد زیر را به انتهای script که در آن Object را تعریف کردیم اضافه می کنیم :

UFO.create(FO, "ufo");

دقت کنید که نام ID که در فایل به عنوان placeholder در نظر گرفته بودیم در این قسمت استفاده می شود.

کل کد :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UFO Test Document</title>
<script type="text/javascript" src="ufo.js"></script>
<script type="text/javascript">
    var FO = { movie:"swf/myMovie.swf", width:"300", height:"120",
      majorversion:"6", build:"40" };
      UFO.create(FO, "ufo");
</script>
</head>
<body>
<div id="ufo">
  <p>Place Flash Content Here</p>
</div>
</body>
</html>

معمولا هنگام استفاده از این Script شما به همین پارامترهایی که در کد بالا دیدید نیاز خواهید داشت. پارامتر movie آدرس فایل swf را از شما می گیرد، پارامتر width و height اندازه فایل swf را از شما می گیرند، پارامتر majorversion و build نسخه فایل فلش را از شما می گیرد. پارامترهای دیگری هم به صورت optional وجود دارد که شما می توانید اطلاعات بیشتری را در سایت آن ببینید. البته این نکته را یاد آوری می کنم که این script دیگر از طرف سازندگانش ادامه پیدا نخواهد کرد، شما اگر دوست داشته باشید می توانید از script دیگری به نام SWFObject استفاده کنید، اما من استفاده از UFO را به دلیل سادگی و کارایی آن ترجیح می دهم.

مهندس

زیر شاخه: Photoshop توسط: marSoul

ممکن است تا حالا با واژه Destructive Editing و Non-Destructive Editing در Photoshop برخورد کرده باشید. اما معنی این دو نوع ویرایش چیست ؟ کاربران حرفه ای Photoshop همیشه سعی می کنند که از ویرایش غیر تخریبی یا همان Non-Destructive Editing استفاده کنند. این نوع ویرایش بدین معنی است که شما در هر مرحله که بر روی فایل خود تغیراتی ایجاد می کنید، در هر زمانی می توانید این تغییرات را به حالت اول برگردانده یا آنرا تغییر دهند، دقت کنید که این روش با History Palette ارتباطی ندارد در این روش شما حتی بعد از ذخیره کردن و بستن فایل خود می توانید به راحتی آنرا به حالت اول خودش برگردانید، در صورتیکه اگر بخواهید از History استفاده کنید بعد از بستن فایل این امکان برای شما وجود ندارد.

به چه روشهایی می توان از ویرایش غیر تخریبی استفاده کرد ؟

یکی از قسمتهایی که هنگام ویرایش زیاد مرد استفاده قرار می گیرد قسمت Image Adjustment است، شما در صورتیکه از منوی Image و انتخاب Adjustment ها اقدام به ویرایش فایل خود کنید حالت تخریبی را انجام می دهید و انتخاب این روش زیاد مناسب نمی باشد. در صورتیکه شما به راحتی می توانید این ویرایشها را در حالت غیر تخریبی انجام دهید. برای انجام این کار در حالی که لایه مورد نظر را انتخاب کردید در Layer Palette و در قسمت پایینی آن می توانید به این Adjustment ها دسترسی داشته باشید. به شکل زیر دقت کنید :

همانطور که در این شکل میبینید، سه آیکان وجود دارد، برای استفاده کردن از Adjustment ها می توان لایه مورد نظر را انتخاب کرد و بر روی Create a new fill or adjustment layer کلیک کرد. بعد از این انتخاب می توانید در هر زمان با کلیک کردن بر روی لایه ایجاد شده تغییرات خود را ویرایش کنید یا آنرا به حالت اول برگردانید. اما توجه داشته باشید که این روش شامل همه امکانات منوی Adjustment نمی شود !
در این شکل شما دو آیکان دیگر می بینید، Add layer mask یکی دیگر از ابزارهای مهم در ویرایش غیر تخریبی است، بارها خواسته اید یک قسمت از تصویر را ببرید یا جدا کنید یا ... ممکن است توسط ابزار eraser یا selection ها این کار را کرده باشید اما بعد که خواسته باشید دوباره تصویر را ویرایش کنید به مشکل برخورده اید، توسط ساختن layer mask می توانید به راحتی قسمتی از تصویر را حذف کنید و در بعد هم به راحتی آنرا تغییر دهید.
همچنین توسط Add a layer style می توانید به راحتی به لایه مورد نظر افکت بدهید و در آینده آنرا به راحتی ویرایش و یا حذف کنید.

یکی دیگر از ویژگیهایی که از نسخه CS2 به Photoshop اضافه شده است، امکان تبدیل یک لایه به Smart Object است. این ویژگی بسیار قدرتمند این امکان را به شما می دهد که بعد از تبدیل لایه خود به Smart Object حتی بعد از transform , resize کردن تصویر bitmap خود کیفیت آن از بین نرود (البته بستگی به کیفیت فایل اصلی هم دارد). همچنین شما می توانید به راحتی یک فایل را از Illustrator به درون Photoshop بیاورید و بعد از هر ویرایش در Illustrator فایل شما به راحتی در Photoshop به روز می شود.
برای تبدیل یک لایه به Smart Object می توانید از منوی layer و انتخاب Smart Objects و انتخاب Convert to smart object استفاده کنید یا بر روی لایه مورد نظر راست کلیک کنید و Convert to smart object را انتخاب کنید. بعد از تبدیل شدن یک آیکان به thumbnail آن لایه اضافه می شود، به شکل زیر دقت کنید :

اگر بر روی این آیکان دوبار کلیک کنید می توانید این لایه را به راحتی ویرایش کنید، اگر از برنامه دیگری Import کرده باشید آن برنامه اجرا می شود و اگر درون Photoshop آنرا به smart object تبدیل کرده باشید یک فایل با پسوند psb باز می شود و بعد از ویرایش آن و ذخیره کردن آن و برگشت به فایل اصلی آن smart object به روز می شود.

در پایان همیشه به یاد داشته باشید که استفاده کردن از ویرایش غیر تخریبی ممکن است زمان کار شما را بالا ببرد اما همیشه این امکان را خواهید داشت که تغییرات خود را ویرایش و یا حذف کنید بدون اینکه فایل اصلی شما آسیب ببیند ! موفق باشید...

مهندس

زیر شاخه: Flash Actionscript توسط: marSoul

برای اینکه بتوانیم از صدا در Actionscript استفاده کنیم باید ابتدا توسط Linkage Properties و انتخاب گزینه Export for Actionscript آنرا برای استفاده آماده کنیم، به شکل زیر دقت کنید :

برای Identifier نام مناسبی انتخاب کنید چون در Actionscript به آن نیاز پیدا خواهیدکرد.

در مرحله بعدی باید یک Object از صدا بسازیم :

mySound = new Sound();

سپس توسط نام Identifier که قبلا مشخص کرده بودیم را به این Object متصل می کنیم :

mySound.attachSound("test");

توسط متد Start می توانیم فایل صوتی را اجرا کنیم، اگر پارامتر اول مشخص شود به همان اندازه از ابتدای فایل نادیده گرفته می شود (بر حسب ثانیه) و پارامتر دوم مشخص کننده تعداد دفعات تکرار می باشد.

mySound.start(0,99999);

بعضی از متدهای Sound

• متد Stop اجرای صدا را متوقف می کند.
• متد Position محل توقف صدا را بر حسب میلی ثانیه نگه داری می کند.
• متد setVolume شدت صدا را تنظیم می کند (بین 0 تا 100)
• متد getVolume مقدار شدت صدا را بر می گرداند.
• متد setPan جهت انتقال صدا را به کانالهای چپ و راست مشخص می کند. (بین 100و100-)
• متد getPan موقعیت فعلی Pan را بر می گرداند.
• متد setTransform چهار پارامتر می گیرد، که باید به صورت یک obejct به آن داده شود.
• متد duration مدت زمان کل صدا را بر حسب میلی ثانیه بر می گرداند.

مهندس

زیر شاخه: عمومی توسط: marSoul

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

فرشاد

مهندس

زیر شاخه: طراحی وب سایت توسط: marSoul

یکی از قسمتهای بسیار مهم و اصلی یک وب سایت قسمت navigation آن می باشد. این قسمت بهتر است ویژگیهای زیر را داشته باشد :

• به کاربر بگوید در حال حاضر کجا هست
• hyperlink ها به خوبی از سایر متنهای سایت قابل تشخیص دادن باشند
• به کاربر به راحتی بگوید که ار این مسیر به کجاها می تواند برود
• به کاربر بگوید قبلا کجاها بوده است
• مشخص باشد که کلیک کردن بر روی یک لینک چه کاری انجام می دهد

navigation باید در جایی باشد که کاربر معمولا انتظار آنرا دارد، در طراحیهای وب 2 معمولا این قسمت در بالای سایت یا همان قسمت header سایت قرار می گیرد. کاربرها معمولا در بالای سایت به دنبال navigation می گردند بنابراین تا جایی که امکان دارد بهتر است این مکان را تغییر ندهید.

اگر برایتان امکان پذیر است از navigation های تودرتو و پیچیده کمتر استفاده کنید، سعی کنید با کمترین تعداد منو کاربر را به همه قسمتهای سایت راهنمایی کنید. هر چقدر منو پیچ در پیچ باشد کاربر راحت تر و سریعتر مسیر خود را گم می کند و ممکن است از سایت شما خارج شود.

یکی از مواردی که من بشدت تاکید می کنم که از استفاده از آن خودداری کنید منوهایی است که توسط Flash ساخته شده اند، همانطور که گفتم navigation یکی از ارکان اصلی سایت است و اگر یک کاربر Flash Player نداشته باشد عملا حرکت او در سایت فلج می شود و کاری نمی تواند بکند. همینطور منوهای DHTML و Javascript هم ممکن است با این مشکل مواجه باشند چون ممکن است کاربر Javascript را غیر فعال کرده باشد. یکی دیگر از مواردی که هرگز نباید از آن استفاده کنید قرار دادن تصویر به تنهایی به جای متن در navigation می باشد به طوریکه تا وقتی کاربر روی آن تصویر نرود (Rollover) متوجه نخواهد شد که این لینک مربوط به چه قسمتی است. اگر می خواهید از تصویر استفاده کنید حتما متن آنرا در کنار تصویر قرار دهید. چون هیچ استانداردی نیست که مشخص کند مثلا یک تصویر نماد لینک به صفحه "درباره ما" است !

در پایان این نکته را یاد آوری می کنم که هرچقدر منوی شما ساده تر باشد برای کاربر مناسب تر و قابل فهم تر می باشد. همیشه از کلمات با معنی و با مفهوم استفاده کنید و کاربر را مجبور نکنید که درباره معنی لینک منوی شما به فکر فرو رود !

مهندس

زیر شاخه: عمومی توسط: marSoul

از دوستان و همکاران گرامی که تمایل دارند لوگوی سایت یا وبلاگشان در این وبلاگ قرار گیرد تقاضا می کنم که لوگوی خود را به صورت فایل jpg یا gif در سایز 100x100 برای ایمیل من ارسال کنند.

از دوستانی که فایل لوگویشان را برای من می فرستند تقاضا می کنم در صورت امکان لینک وبلاگ من یا لوگوی من را نیز در سایت خود قرار دهند.

با تشکر
فرشاد

مهندس