وب سایت آژانس الموت
۴ پاسخ
تیر ۳م, ۱۳۸۸
سلام
این وب سایت رو من با کمک وردپرس ساختم. این وب سایت مربوط به یک آژانس مسافرتی و هواپیمایی در نهران است که خدمات بسیار زیادی را به مسافران ایرانی و خارجی ارائه می کند. قرار هست در دو زبان فارسی و انگلیسی ساخته شود که در حال حاضر زبان انگلیسی آن آماده است و به زودی زبان فارسی آن هم آماده خواهد شد.
در پستهای قبلی روش اول و دوم این کار را توضیح دادم. اما روشهای قبل به دلیل اینکه باید در برنامه های ویرایش تصویری هر بار برای خود یک تصویر درست میکردید و آنرا ذخیره میکردید و سپس در CSS آنرا استفاده می کردید برای سایتهایی که تایتلهای زیادی دارند خیلی کار وقت گیر و خسته کننده ای خواهد بود. مخصوصا سایتهایی که دارای CMS هستند این کار غیر ممکن است. اما اگر شما برنامه ای داشته باشید که به صورت اتوماتیک این تایتل ها را برای شما بسازد بسیار عالی خواهد بود، نام این روش sIFR هست.
sIFR مخفف Scalable Inman Flash Replacement میباشد. شما میتوانید سورس این برنامه را از سایت sIFR دانلود کنید.
این برنامه به این صورت کار میکند که ابتدا شما یک فایل جاوا اسکریپت را در صفحات خود قرار میدهید، این فایل Heading های سایت شما را اسکن میکند و متن درون آنها را به یک Flash Object تبدیل میکند و آنرا جایگزین متن عادی میکند. Flash Object دارای فونتی است که شما انتخاب کرده اید. متن شما جایگزین نمیشود بلکه توسط sIFR مخفی میشود. اگر مرورگر فلش پلاگین نداشته باشد جاوااسکریپت آنرا تشخیص میدهد و متن عادی نمایش داده میشود.
نوشتن CSS و HTML
کد CSS تقریبا شبیه همان کدی است که در روشهای قبلی استفاده میکردیم.
h1 {
color: #0066cc;
font-size: 1.6em;
font-family: Georgia, serif;
}درست کردن Flash Object
برای اینکه فونت مورد نظر خودمان را به جای فونت در نظرگرفته شده در CSS قرار بدهیم باید یک قالب جدید swf را درست کنیم که فونت مورد نظر ما را در خود جای داده است. این کار بسیار راحت است، فایل sifr.fla را که دانلود کرده اید را باز کنید و متن Do not remove this text. را انتخاب کنید و فونت آنرا تغییر دهید، حال این فایل را به صورت swf ذخیره کنید. بهتر است فایل swf را به نام فونت مورد نظر خود ذخیره کنید، مثلا : stencil.swf
حال باید این فایل را در صفحات خود include کنیم.
Javascript
یک فایل جاوا اسکریپت وجود دارد که باید در صفحات خود قرار دهیم، این فایل sifr.js نام دارد. این فایل درون پکیجی است که شما دانلود کرده اید. این فایل باید در header سایت شما قرار گیرد :
<script type="text/javascript" src="sifr.js">
</script>بعد از آن شما نیاز دارید که مقداری کد جاوا اسکریپت را در صفحه خود قرار دهید :
<script type="text/javascript">
if (typeof sIFR == "function") {
sIFR.replaceElement(named({
sSelector: "h1",
sFlashSrc: "2.swf",
sColor: "#000000",
sBgColor: "#FFFFFF",
}));
};
</script>sIFR.replaceElement مشخص میکند که چه ویژگیهایی باید به Heading اعمال شود. این function چند متغیر دارد که به بعضی از آنها اشاره میکنم :
sSelector
مشخص میکند که چه المنتهایی را باید جایگزین کند، از کدهای CSS میتوان استفاده کرد. اگر میخواهید چند المنت را انتخاب کنید با کاما , آنها را از هم جدا کنید.
sFlashSrc
مشخص کننده مسیر فایل فلشی است که قرار است جایگزین متن شما شود.
sBgColor
مشخص کننده رنگ پس زمینه میباشد.
sColor
مشخص کننده رنگ متن میباشد.
sWmode
مشخص کننده شفافیت فایل فلش میباشد. دو حالت دارد یا کاملا شفاف هست یا نیست.
شما میتوانید سایر متغیر ها را از سایت sIFR مطالعه کنید. وقتی تغییرات فوق را ذخیره کردید، بعد از اجرا میبینید که فلش جایگزین متن شما شده است.
همانطور که در عکس بالا میبینید، متن بالایی فلش هست و پایینی متن عادی، تنها کاری که باقی مانده این است که متن زیری را در صورتی که فلش فعال باشد مخفی کنیم.
درون پکیجی که دانلود کردید یک فایل CSS به نام sIFR-screen.css وجود دارد که شامل قوانینی است که متن هایی را که توسط فلش جایگزین شده است را مخفی میکند. با include کردن این فایل مشکل ما برطرف خواهد شد.
کل کد HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="sifr.css" media="all" />
<link rel="stylesheet" type="text/css" href="sIFR-screen.css" media="screen" />
<script type="text/javascript" src="sifr.js">
</script>
<title>sIFR Text Replacement</title>
</head>
<body>
<h1>sIFR text replacement title</h1>
<script type="text/javascript">
if (typeof sIFR == "function") {
sIFR.replaceElement(named({
sSelector: "h1",
sFlashSrc: "2.swf",
sColor: "#000000",
sBgColor: "#FFFFFF",
}));
};
</script>
</body>
</html>من کل فایلها رو هم براتون میگذارم تا دانلود کنید :
دریافت فایلها – حجم (15 کیلوبایت)
سلام، امروز مطبلی رو در وبلاگ Web Designer Wall در مورد فتوشاپ و ایلاستریتور CS4 دیدم و تصمیم گرفتم که این بررسی رو براتون ترجمه کنم. امیدوارم براتون مفید باشه.
Photoshop CS4
امکانات جدید :
اگر شما میخواهید ببینید چه امکانات جدیدی به این نسخه اضافه شده به این آدرس بروید :Window > Workspace > What’s New
اینترفیس :
تغییرات زیادی در اینترفیس فتوشاپ بوجود آمده است. فتوشاپ در این نسخه همه چیز را در پنجره ای به نام Application Windows در بر میگیرد. سندهای مختلف را به صورت Tab در این پنجره باز میکند.
توسط پنجره Arrange Documents میتوان همه این Tab ها را مدیریت کرد.
Layer Adjustments و پنل Masks
تغییر دیگر در قسمت Layer Adjustments و Mask هست. هر کدام از این موارد پنل جدایی برای خودشان دارند و شما به راحتی و سرعت میتوانید به آنها دسترسی داشته باشید و آنها را ویرایش کنید و دیگر پنجره ای به صورت Popup باز نمیشود.
نکته مهمی که در Masks جالب است وجود Feather و Density است.
ابزار Rotate View
اگر از MacBook Pro جدید استفاده میکنید، فتوشاپ CS4 میتوانید بهترین دوست شما باشد. توسط multi-touch trackpad شما می توانید صفحه کار خود را زوم کنید و یا بچرخانید. نکته : وقتی صفخه شما چرخیده است با دبل کلیک کردن روی این ابزار آنرا به حالت عادی یعنی زاویه 0 درجه بر میگرداند.
Rotate View وقتی مناسب است که شما کار Brushing زیادی داشته باشید (مثل ویرایش تصاویر و یا نقاشی دیجیتال). مانند این میماند که شما کاغذ کار خود را روی میز میچرخانید.
اوایل، من تصادفا صفحه را میچرخاندم در حالیکه سعی میکردم آنرا توسط Trackpad زوم کنم. مقداری زمان برد تا به آن عادت کنم. حالا من از این کار لذت میبرم وقتی روی تصاویر بزرگ کار میکنم. اگر شما این قابلیت را دوست ندارید میتوانید آنرا غیر فعال کنید. از طریق این آدرس :
Preferences > Performance و گزینه Enable OpenGL Drawing را غیر فعال کنید.
زوم نرم و متحرک
من روش جدید زوم را خیلی دوست دارم. حالا شما میتوانید در هر درجه زومی تصویر خود را در حالتی نرم (Smooth) شده ببینید. بدین معنی که تصاویر زوم شده شما دیگر لبه های تیز ندارد.
نکته دیگر در زوم متحرک بودن آن است. توسط ابزار زوم روی تصویر کلیک و دکمه موس را نگه دارید، میبینید که تصویر مداوم زوم میشود.
شورتکاتهای Navigation
اگر از Navigation Panel زیاد استفاده میکنید، من برای شما یک شورتکات دارم. یک تصویر را باز کنید و تا بیشترین حد ممکن زوم کنید. ابزار زوم را انتخای کنید، دکمه H را نگه دارید و روی تصویر کلیک کنید، این کار باعث میشود که تصویر به سرعت به حالت Zoom to fit in the window در آید، شما یک مستطیل در تصویر میبینید که میتوانید توسط آن به هر جای تصویر بروید.
Pixel Grid
وقتی شما بیشتر از 500 درصد زوم کرده باشید، شما روی تصویر Pixel Grid را میبینید. این مسئله مناسب است وقتی بخواهیم پیکسلهای مجاور در حالت زوم را تشخیص دهیم. به شخصه، من خودم از این استفاده نمیکنم، و آنرا از طریق View > Show > Pixel Grid خاموش میکنم.
Flick Panning
Flick Panning ویژگی دیگری است که توسط آن میتوانید تصویر خود را در جهت حرکت موس خود حرکت دهید. وقتی با تصاویر High Resolution کار میکنید این قابلیت مناسب است.
Content Aware Scaling
تا بحال شده شما تصویری از مشتری خود بگیرید و مجبور باشید ساعتها روی آن کار کنید و آنرا برش دهید ؟ برای مثال، شما در کار خود محلی برای قرار دادن یک تصویر landscape دارید اما تصویری که مشتری به شما داده است portrait است. توسط CS4 و ابزار جدید آن که Content Aware Scaling نام دارد میتوانید این مشکا را برطرف کنید.
Clone Tool Preview
ابزار بهینه شده Clone پیش نمایش زنده ای در براشی که شما با آن در حال کار هستید از جایی که Clone میشود را به شما نشان میدهد.
شورتکات برای تغییر سایز براش
ابزار براش را انتخاب کنید، دکمه Alt را با دکمه راست موس نگه دارید، روی تصویر کلیک کنید و به شما پیش نمایش از اندازه براش نشان میدهد. حال اگر به سمت چپ یا راست موس را درگ کنید سایز براش تغییر خواهد کرد. این روش روی همه براشها کار میکند مثل Clone, Smudge, Dodge, Burn, Pencil و …
Illustrator CS4
اسناد tabbed شذه
مانند فتوشاپ، ایلاستریتور هم از امکان tab کردن اسناد بهره مند شده است.
Artboard چندگانه
برای کسانی که از ایلاستریتور برای طراحیهای چند صفحه ای بروشور یا کارهای چاپی استفاده میکنند، این امکان خبر خوبی است. حالا شما میتوانید اسناد چند صفحه ای با سایزهای مختلف را توسط ابزار Artboard ایجاد کنید. آنها میتوانند روی قسمتی از هم قرار گیرند، در کنار هم باشند یا به طور کامل روی هم. شما میتوانید همه آنها یا تک تک آنها را export یا چاپ کنید. برای مثال شما میتوانید به صورت یک فایل PDF چند صفحه ای ذخیره کنید.
این ابزار به من بدینگونه کمک میکند که همه آیکانها را طراحی میکنم و سپس توسط این ابزار آنها را تک تک به صورت فایل PNG ذخیره میکنم.
Gradiant Transparency
من برای این قابلیت سالها صبر کردم ! در نهایت در نسخه CS4 اضافه شد. قبلا، من باید Opacity Mask را برای این کار استفاده میکردم. این کار خیلی مناسب نبود چون برای تغییر آن باید آنرا از ابتدا ایجاد میکردم.
ابزار گرادیانت جدید
دو سال پیش، من این ایده را به مدیر ایلاستریتور، فیلیپ گوییندی پیشنهاد دادم . الان خیلی خوشحال هستم که در نسخه CS4 اجرا شده است.
توسط ابزار جدید گرادیانت ، شما می توانید گرادیانت را مستقیم روی تصویر ویرایش کنید. یک اسلایدر در تصویر به نمایش در می آید که شما میتوانید به آن رنگ اضافه کنید یا کم کنید، شفافیت بدهید و یا جهت آنرا تغییر دهید.
نکته : با دبل کلیک کردن روی محل رنگ در اسلایدر میتوانید رنگ آنرا تغییر دهید. این روش هم در اسلایدر جواب میدهد هم در پنل گرادیانت.
تصویر زیر نشان میدهد که من به چه آسانی یک کره شیشه ای را توسط ابزار جدید گرادیانت ایجاد میکنم.
Key Object Alignment
ایلاستریتور CS4 روش جدیدی برای Align کردن ارائه کرده است به نام Align to Key Object. یک Key Object شی است که شما می خواهید سایر اشیا نسبت به آن Align شوند. برای این کار همه اشیایی را که لازم دارید انتخاب کنید، روی شی که میخواهید Key باشد دوباره کلیک کنید، stroke آن کلفت تر میشود. حال میتوانید آنها را Align کنید.
View Outline in Isolation Mode
قابلیت جدید دیگر، امکان دیدن به صورت Outline در حالت Isolation هست. این کار باعث آسان تر شدن ویرایش در حالت Isolation میشود.
نتیجه گیری
Photoshop CS4
من پیشنهاد میکنم کسانی که با تصاویر High-Res کار میکنند مانند عکاسان و هنرمندان به این نسخه روی بیاورند. توسط امکانات جدید مثل Rotate View, Animate Zoom & Panning و Adjustments و Masks کار آنها بسیار راحت تر خواهد شد. Content Aware Scaling هم بسیار جالب و فوق العاده است. معمولا برای طراحان Banner در وب بسیار مفید خواهد بود.
Illustrator CS4
آیا باید به این نسخه روی بیاوریم ؟ کاملا ! حتما باید آپگرید کنید، بهترین نسخه تا الان است. تنها ابزار جدید گرادیانت و Multiple Artboards دلیل کافی برای این کار است.
هیات داوران دومین جشنواره آنلاین وب سایت های ایران رای نهایی خود را در خصوص سایت های برتر اعلام کرد.
هیات داوان، در گروه سایت دانلود، به توجه به محتوای مشابه بیشتر وب سایت ها و ارائه نرم افزار های قفل شکسته و عدم رعایت کپی رایت در این گروه هیچ سایتی را شایسته ی دریافت عنوان برترین سایت وب فارسی ندانست.
هیات داوران، در گروه موبایل، سایت www.gsm.ir را به همراه www.gsmaria.com به دلیل پوشش خبری و ارائه اطلاعات کامل و به روز به طور مشترک، شایسته ی دریافت رتبه نخست دانست.
هیات داوران دومین جشنواره آنلاین وب سایت های ایران، مجلیه اینترنتی پریانا www.pariyana.com را به دلیل نوآوری در موضوع و راه اندازی اولین مجله اینترنتی در حوزه اینترنت، و همچنین طراحی کاربرپسند و ارائه نسخه PDF در گروه نشریات آنلاین شایسته ی دریافت رتبه نخست دانست.
سایت www.idevcenter.com در گروه آموزش به انتخاب هیات داوران با توجه به ارائه ای نوین در محتوای آموزشی و استفاده از ویکی برای مشارکت کاربران در تولید محتوا را شایسته ی دریافت رتبه نخست دانست.
در گروه وبلاگ هیات داوران سایت بلاگفا www.blogfa.com را به دلیل پایداری در ارائه سرویس به کاربران و سادگی در استفاده و ایجاد وبلاگ تسط کاربران شایسته ی دریافت رتبه نخست با عنوان برترین سرویس وبلاگ در سال 1387 دانست.
در گروه اطلاع رسانی سایت www.aftab.ir به دلیل به روز بودن ، ارائه اطلاعات جامع ، سادگی و قدرت بارگذاری سریع از طرف هیات داوران شایسته ی دریافت رتبه نخست در گروه اطلاع رسانی دانسته شد.
سایت تراوین www.travian.ir به دلیل ارائه ای نوین از بازی آنلاین و ایجاد محیطی سرگرم کننده برای کاربران به همراه سایت www.iransong.com که امکان مشارکت کاربران را در تولید محتوا فراهم می کند، به طور مشترک، عنوان سایت برتر در گروه سرگرمی را دریافت کردند.
در میان سایت های خبری، سایت www.medianews.ir به دلیل استفاده از امکانات وب 2 جهت اطلاع رسانی و پوشش خبری با رای هیات داوران، رتبه نخست را در گروه سایت های خبری کسب کرد.
در بخش ابزار وب، سایت وبگذر www.webgozar.com به دلیل گستردگی ارائه خدمات و ارائه خدمات مناسب و با کیفیت هم تراز با خدمات بین المللی، از سوی هیات داوران عنوان سایت برتر در گروه ابزار وب را دریافت کرد.
در بخش سایت های ورزشی سایت برد و باخت www.bordobakht.com به دلیل طراحی بسیار زیبا و پوشش خبری جامع و به روز لیک برتر فوتبال ایران و همچنین ارائه جداول و آمار حرفه ای از سوی هیات داوران حائز کسب رتبه اول شد.
در بخش سایت های آگهی ، سایت ایستگاه www.istgah.com به دلیل پوشش جامع و دسته بندی متنوع و هم چنین اطلاعات جامع آگهی ها در وب و قابلیت جستجوی گسترده در این گروه از سوی هیات داوران حائز رتبه اول شد.
سایت www.digikala.com به دلیل طراحی کاربند پسند و ارائه اطلاعات کامل از محصولات و همچنین دارا بودن مطالب آموزشی، تالار گفتگو جهت نقد و بررسی کالا ها از سوی هیات داوران عنوان برترین سایت فروشگاهی سال 1387 را از آن خود کرد.
هیات داوران، سایت بالاترین www.Balatarin.com را به دلیل نوآوری در وب 2 و استفاده از تکنولوژی های نوین در طراحی سایت شایسته ی دریافت رتبه نخست در گروه سایت های سوشیال نیوز دانست.
در بخش شبکه های اجتماعی سایت وبز و کلوب بصورت مشترک حائز رتبه اول شدند، سایت کلوب www.cloob.com به دلیل طراحی سایت و استفاده از متد های برنامه نویسی جدید، و سایت www.webzzz.com به دلیل سادگی در طراحی این عنوان را از سوی هیات داوران دریافت کردند.
در گروه سایت های هنری سایت www.akkasee.com به دلیل طراحی خلاقانه و وجود صفحه اصلی جامع و همچنین داربودن بخش های گوناگون و نمایشگاه بصورت فعال از سوی هیات داوران حائز رتبه اول شد.
در بخش سایت های فرهنگی، سایت www.pendar.net به دلیل پوشش جامع رویداد های فرهنگی و هنری و طراحی رابط کاربری مناسب از سوی هیات داوران دومین جشنوارن آنلاین وب سایت های ایران به عنوان سایت برتر در این گروه معرفی شد.
در بخش میکروبلاگ ها، سایت وی ویو www.viwio.com با عنوان اولین سایت ایرانی میکروبلاگ ، به دلیل فراهم سازی قابلیت به روز رسانی و مینی بلاگ با تمام امکانات کوجود و همچنین دسترسی از طریق موبایل از سوی هیات داوران شایسته ی دریافت رتبه نخست دانسته شد.
در پست قبلی روش اول جایگزین کردن Heading ها یا به عبارت بهتر Image Replacement را گفتم. اما روش قبل دارای معایبی هم می باشد. این معایب عبارتند از :
- اگر تصویر به دلایلی بارگذاری نشود، کاربر Heading را مشاهده نمی کند.
- اگر نشان دادن تصویر در مرورگر خاموش باشد بازهم کاربر آنرا نمی بیند.
اما راه حل چیست ؟
برای حل این مشکل میتوانیم کمی کدنویسی اضافه کنیم. البته این کار کمی از Semantic بودن کد می کاهد اما در عوض کارایی سایت را بالا میبرد. به کد زیر دقت کنید : (برای مشاهده تصویر کامل شده و کد ابتدایی لطفا به روش اول مراجعه کنید)
<h3 id="services_title" title="خدمات داتیس دیزاین">
<span></span>
خدمات داتیس دیزاین
</h3>با گذاشتن span در تگ h3 می توانیم به آن تصویر بدهیم. بدین ترتیب حتی اگر تصویر بارگذاری نشود و یا خاموش باشد متن درون h3 به خوبی نمایش داده میشود. برای استفاده کردن از span به کد CSS زیر نیاز داریم. دقت کنید که در این کد span به حالت absolute درآمده است تا تگ h3 زیر آن قرار گیرد.
h3#services_title {
position: relative;
width: 270px;
height: 90px;
overflow: hidden;
direction: ltr;
}
h3#services_title span {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url(../images/services.png);
background-repeat: no-repeat;
}دقت کنید که در این روش باید سایز تعریف شده در h3 هم اندازه تصویر پس زمینه آن باشد، همچنین با دادن overflow:hidden از بیرون زدن متن از زیر تصویر جلوگیری می کنیم. سایز span هم باید هم اندازه تصویر باشد اما از آنجایی که به h3 سایز داده ایم میتوانیم به span سایز 100 درصد برای طول و عرض آن بدهیم تا کل آنرا فرا گیرد.
این روش تقریبا شبیه روش اول بود با این تفاوت که مقداری کد نویسی بیشتر بود در عوض کارایی آن بهتر است. من خودم این روش رو ترجیح میدم و به شما هم توصیه میکنم. تنها نکته منفی آن از بین بردن کد semantic سایت شما می باشد. اما در نهایت تصمیم گیری با شما است. روش سوم را در پست بعدی برایتان آموزش میدهم. موفق باشید. 