وب سایت آژانس الموت

سلام

این  وب سایت رو من با کمک وردپرس ساختم. این وب سایت مربوط به یک آژانس مسافرتی و هواپیمایی در نهران است که خدمات بسیار زیادی را به مسافران ایرانی و خارجی ارائه می کند. قرار هست در دو زبان فارسی و انگلیسی ساخته شود که در حال حاضر زبان انگلیسی آن آماده است و به زودی زبان فارسی آن هم آماده خواهد شد.

مشاهده وب سایت

سایت الموت

روشهای جایگزین کردن Heading در HTML (روش سوم)

در پستهای قبلی روش اول و دوم این کار را توضیح دادم. اما روشهای قبل به دلیل اینکه باید در برنامه های ویرایش تصویری هر بار برای خود یک تصویر درست میکردید و آنرا ذخیره میکردید و سپس در 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 مطالعه کنید. وقتی تغییرات فوق را ذخیره کردید، بعد از اجرا میبینید که فلش جایگزین متن شما شده است. 

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 کیلوبایت)

مرور Photoshop و Illustrator نسخه CS4

سلام، امروز مطبلی رو در وبلاگ Web Designer Wall در مورد فتوشاپ و ایلاستریتور CS4 دیدم و تصمیم گرفتم که این بررسی رو براتون ترجمه کنم. امیدوارم براتون مفید باشه.

Photoshop CS4

امکانات جدید :

اگر شما میخواهید ببینید چه امکانات جدیدی به این نسخه اضافه شده به این آدرس بروید :Window > Workspace > What’s New

امکانات جدید

اینترفیس :

تغییرات زیادی در اینترفیس فتوشاپ بوجود آمده است. فتوشاپ در این نسخه همه چیز را در پنجره ای به نام Application Windows در بر میگیرد. سندهای مختلف را به صورت Tab در این پنجره باز میکند.

اینترفیس

توسط پنجره Arrange Documents میتوان همه این Tab ها را مدیریت کرد.

Arrange Documents

Layer Adjustments و پنل Masks

تغییر دیگر در قسمت Layer Adjustments و Mask هست. هر کدام از این موارد پنل جدایی برای خودشان دارند و شما به راحتی و سرعت میتوانید به آنها دسترسی داشته باشید و آنها را ویرایش کنید و دیگر پنجره ای به صورت Popup باز نمیشود.

Adjustments Layer

نکته مهمی که در Masks جالب است وجود Feather و Density است.

Masks

ابزار Rotate View

اگر از MacBook Pro جدید استفاده میکنید، فتوشاپ CS4 میتوانید بهترین دوست شما باشد. توسط multi-touch trackpad شما می توانید صفحه کار خود را زوم کنید و یا بچرخانید. نکته : وقتی صفخه شما چرخیده است با دبل کلیک کردن روی این ابزار آنرا به حالت عادی یعنی زاویه 0 درجه بر میگرداند.

Rotate View

Rotate View وقتی مناسب است که شما کار Brushing زیادی داشته باشید (مثل ویرایش تصاویر و یا نقاشی دیجیتال). مانند این میماند که شما کاغذ کار خود را روی میز میچرخانید.

اوایل، من تصادفا صفحه را میچرخاندم در حالیکه سعی میکردم آنرا توسط Trackpad زوم کنم. مقداری زمان برد تا به آن عادت کنم. حالا من از این کار لذت میبرم وقتی روی تصاویر بزرگ کار میکنم. اگر شما این قابلیت را دوست ندارید میتوانید آنرا غیر فعال کنید. از طریق این آدرس :
Preferences > Performance و گزینه Enable OpenGL Drawing را غیر فعال کنید.

OpenGL Drawing

زوم نرم و متحرک

من روش جدید زوم را خیلی دوست دارم. حالا شما میتوانید در هر درجه زومی تصویر خود را در حالتی نرم (Smooth) شده ببینید. بدین معنی که تصاویر زوم شده شما دیگر لبه های تیز ندارد.

زوم نرم و متحرک

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

شورتکاتهای Navigation

اگر از Navigation Panel زیاد استفاده میکنید، من برای شما یک شورتکات دارم. یک تصویر را باز کنید و تا بیشترین حد ممکن زوم کنید. ابزار زوم را انتخای کنید، دکمه H را نگه دارید و روی تصویر کلیک کنید، این کار باعث میشود که تصویر به سرعت به حالت Zoom to fit in the window در آید، شما یک مستطیل در تصویر میبینید که میتوانید توسط آن به هر جای تصویر بروید.

Navigation

Pixel Grid

وقتی شما بیشتر از 500 درصد زوم کرده باشید، شما روی تصویر Pixel Grid را میبینید. این مسئله مناسب است وقتی بخواهیم پیکسلهای مجاور در حالت زوم را تشخیص دهیم. به شخصه، من خودم از این استفاده نمیکنم، و آنرا از طریق View > Show > Pixel Grid خاموش میکنم.

Pixel Grid

Flick Panning

Flick Panning ویژگی دیگری است که توسط آن میتوانید تصویر خود را در جهت حرکت موس خود حرکت دهید. وقتی با تصاویر High Resolution کار میکنید این قابلیت مناسب است.

Content Aware Scaling

تا بحال شده شما تصویری از مشتری خود بگیرید و مجبور باشید ساعتها روی آن کار کنید و آنرا برش دهید ؟ برای مثال، شما در کار خود محلی برای قرار دادن یک تصویر landscape دارید اما تصویری که مشتری به شما داده است portrait است. توسط CS4 و ابزار جدید آن که Content Aware Scaling نام دارد میتوانید این مشکا را برطرف کنید.

Content Aware Scaling

Clone Tool Preview

ابزار بهینه شده Clone پیش نمایش زنده ای در براشی که شما با آن در حال کار هستید از جایی که Clone میشود را به شما نشان میدهد.

Clone Tool Preview

شورتکات برای تغییر سایز براش

ابزار براش را انتخاب کنید، دکمه Alt را با دکمه راست موس نگه دارید، روی تصویر کلیک کنید و به شما پیش نمایش از اندازه براش نشان میدهد. حال اگر به سمت چپ یا راست موس را درگ کنید سایز براش تغییر خواهد کرد. این روش روی همه براشها کار میکند مثل Clone, Smudge, Dodge, Burn, Pencil و …

Brush size shortcut

Illustrator CS4

اسناد tabbed شذه

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

Illustrator Tabs

Artboard چندگانه

برای کسانی که از ایلاستریتور برای طراحیهای چند صفحه ای بروشور یا کارهای چاپی استفاده میکنند، این امکان خبر خوبی است. حالا شما میتوانید اسناد چند صفحه ای با سایزهای مختلف را توسط ابزار Artboard ایجاد کنید. آنها میتوانند روی قسمتی از هم قرار گیرند، در کنار هم باشند یا به طور کامل روی هم. شما میتوانید همه آنها یا تک تک آنها را export یا چاپ کنید. برای مثال شما میتوانید به صورت یک فایل PDF چند صفحه ای ذخیره کنید.

Multi Artboards

این ابزار به من بدینگونه کمک میکند که همه آیکانها را طراحی میکنم و سپس توسط این ابزار آنها را تک تک به صورت فایل PNG ذخیره میکنم.

Multi Artboards

Gradiant Transparency

من برای این قابلیت سالها صبر کردم ! در نهایت در نسخه CS4 اضافه شد. قبلا، من باید Opacity Mask را برای این کار استفاده میکردم. این کار خیلی مناسب نبود چون برای تغییر آن باید آنرا از ابتدا ایجاد میکردم.

Gradiant Transparency

ابزار گرادیانت جدید

دو سال پیش، من این ایده را به مدیر ایلاستریتور، فیلیپ گوییندی پیشنهاد دادم . الان خیلی خوشحال هستم که در نسخه CS4 اجرا شده است.

Gradiant

توسط ابزار جدید گرادیانت ، شما می توانید گرادیانت را مستقیم روی تصویر ویرایش کنید. یک اسلایدر در تصویر به نمایش در می آید که شما میتوانید به آن رنگ اضافه کنید یا کم کنید، شفافیت بدهید و یا جهت آنرا تغییر دهید.

Gradiant Slider

نکته : با دبل کلیک کردن روی محل رنگ در اسلایدر میتوانید رنگ آنرا تغییر دهید. این روش هم در اسلایدر جواب میدهد هم در پنل گرادیانت.

Gradiant Slider

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

Glassy Orb

Key Object Alignment

ایلاستریتور CS4 روش جدیدی برای Align کردن ارائه کرده است به نام Align to Key Object. یک Key Object شی است که شما می خواهید سایر اشیا نسبت به آن Align شوند. برای این کار همه اشیایی را که لازم دارید انتخاب کنید، روی شی که میخواهید Key باشد دوباره کلیک کنید، stroke آن کلفت تر میشود. حال میتوانید آنها را Align کنید.

Key Object

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 در HTML (روش دوم)

CSSدر پست قبلی روش اول جایگزین کردن 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 سایت شما می باشد. اما در نهایت تصمیم گیری با شما است. روش سوم را در پست بعدی برایتان آموزش میدهم. موفق باشید. :)