چگونه لوگوی حمایتی برای نمایش در سایت یا وبلاگ بسازیم؟

طراحی لوگوی ساده در برنامه فتوشاپ و کدنویسی HTML

قبل از پرداختن به طراحی و کدنویسی لوگوهای مثلثی و جاوا اسکریپتی که معمولا در گوشه های صفحات وب به نمایش در می آیند، ابتدا به بحث طراحی و کدنویسی لوگوهای حمایتی ساده و نحوه نمایش و کپی کد آنها در باکس های HTML می پردازیم، این نوع لوگوها را می توانیم در هرکجای صفحه که مایل بودیم نمایش دهیم و از نظر شکل و ابعاد معمولا به شکل مستطیل های کوچک متناسب با اندازه سایدبار قالب هستند، بدین منظور ابتدا یک تصویر به عنوان لوگوی سایت یا وبلاگ خود با اندازه پیکسلی مشخص که بستگی به سلیقه و فضای موجود قالب صفحه وب دارد به طور مثال عرض 120 و ارتفاع 80 پیکسل، در برنامه های گرافیکی نظیر برنامه فتوشاپ طراحی می کنیم.
قاعدتا طراحی لوگوی حرفه ای نیازمند تسلط نسبی بر اینگونه برنامه ها است و باید سعی کنیم در کم ترین فضا و در عین سادگی بیشترین جذابیت را داشته باشیم، بررسی و الگوبرداری از لوگوهای معروف می تواند به تبادر ایده های جذاب و جدید به ذهن کمک کند.
پس از طراحی تصویر مورد نظر با یکی از فرمت های رایج مانند png یا jpg از نتیجه کارمان خروجی می گیریم و فایل نهایی را در سروری آنلاین یا در سرویس های رایگان میزبان فایل آپلود می کنیم، در وب معمولا تنها تصاویر و فایل هایی قابل استفاده هستند که بر روی سرورها میزبانی شوند و با آدرس URL مشخص در دسترس باشند، به همین دلیل مرحله آپلود فایل از اهمیت بالایی برخوردار است و ترجیحا باید یا از دامنه و سرور شخصی استفاده کنید یا سرویس های حرفه ای میزبان فایل را برای آپلود انتخاب کنید.
پس از مرحله آپلود فایل آدرس URL و تنظیمات خاص لوگوی خود را در نمونه کد زیر جایگزین می کنیم:

<a href="http://www.example.com" title="عنوان سایت یا وبلاگ" target="_blank"><img src="http://www.example.com/file/image/logo.jpg" alt="عنوان لوگوی سایت یا وبلاگ" title="عنوان لوگوی سایت یا وبلاگ" height="80" width="120" border="0"></a>

توضیح:
- تگ a و پارامتر href برای ایجاد لینک (Hyperlink) در صفحات وب (HTML) به کار می روند که در اینجا باید آدرس سایت یا وبلاگ خود را جایگزین عبارت

http://www.example.com

کنیم.
- تگ img برای نمایش تصویر در وب به کار می رود، وقتی این تگ را بین تگ a قرار می دهیم در واقع لینک به آن تصویر متصل می شود، در قسمت

http://www.example.com/file/image/logo.jpg

آدرس کامل تصویر لوگوی سایت یا وبلاگ خود را قرار می دهیم، دقت کنیم این آدرس زمانی درست خواهد بود که اگر آن را کپی و در نوار آدرس مرورگر درج کنیم تصویر مورد نظر از سرور بارگذاری و در مرورگر نمایش داده شود.
- قسمت مربوط به border را برابر صفر قرار می دهیم، در برخی از مرورگرها دور تصاویری که لینک می شوند خطی آبی رنگ به عنوان پیش فرض نمایش داده می شود، برای از بین بردن این خط میزان border را صفر در نظر می گیریم.
- موارد مربوط به ارتفاع (height) و عرض (width) را با توجه به اندازه پیکسلی لوگوی خود تغییر می دهیم، این اندازه پیکسلی همان مقداری است که در برنامه فتوشاپ برای ساخت لوگو در نظر گرفته ایم و با کلیک راست بر روی فایل نهایی و انتخاب قسمت Properties و سربرگ Details نیز ابعاد تصویر در دسترس است.

ایجاد فیلد متنی برای نمایش و کپی کد لوگو

پس از اینکه تصویر لوگو و کد نمایش آن را ساختیم اگر بخواهیم کاربران از آن استفاده کرده و با درج کد در وبلاگ یا سایت خود لوگو را نمایش دهند باید از فیلد input یا textarea با امکان کپی متن درون فیلد استفاده کنیم، برای کپی متن درون فیلد دو روش ساده و خودکار وجود دارد که در ادامه هم روش ساده و هم شیوه ای که در آن با استفاده از جاوا اسکریپت قابلیت انتخاب خودکار برای کپی راحت تر متن وجود دارد را آموزش خواهیم داد، شیوه کپی خودکار باعث افزایش سرعت کار و بهبود کارایی واسط کاربری صفحه وبمان خواهد شد.
برای ایجاد باکس ساده و قرار دادن کد لوگو داخل آن جهت کپی و استفاده کاربران، از دو تگ textarea و input می توانیم استفاده کنیم، تفاوت این دو تگ در تنظیمات متفاوت و ظاهر آنها است، در نمونه های زیر این کار را برای لوگوی فرضی بالا انجام داده ایم.

روش استفاده از تگ input

در کدنویسی HTML از تگ input برای درج و دریافت مقادیر متنی مختصر مانند نام، نشانی ایمیل و... استفاده می شود، اما با مقداردهی پیش فرض به این تگ می توانیم به عنوان محل نمایش کد لوگو نیز از آن استفاده کنیم، به طور مثال:

<input type="text" height="25" width="120" dir="ltr" value='<a href="http://www.example.com" title="عنوان سایت یا وبلاگ" target="_blank"><img src="http://www.example.com/file/image/logo.jpg" alt="عنوان لوگوی سایت یا وبلاگ" title="عنوان لوگوی سایت یا وبلاگ" height="80" width="120" border="0"></a>'>

توضیح:
- در قسمت مربوط به عرض (width) فیلد input مقادیر مورد نظر خود را به پیکسل درج می کنیم کنید، در این مثال عرض 120 پیکسل را در نظر گرفته ایم.
- پارامتر dir و مقدار ltr چینش کد داخل باکس را به صورت چپ به راست تنظیم می کند (مقدار rtl آن را از راست به چپ نمایش می دهد).
- دقت کنیم که برای پارامتر value از علامت ' ' به جای " " استفاده کرده ایم و کد را درون آن قرار داده ایم، اگر از علامت " " استفاده کنیم کدنویسی صفحه وب دچار مشکل خواهد شد و مرورگر به جای نمایش ساده و متنی کد لوگو، به عنوان قسمتی از صفحه آن را پردازش می کند و نتیجه به درستی نمایش داده نخواهد شد.
- ممکن است بخواهیم بین لوگو و کد آن فاصله یا خط ایجاد کنیم، برای این منظور از تگ های br و hr در HTML می توانیم استفاده کنیم.

روش استفاده از تگ textarea

در کدنویسی HTML از تگ textarea برای درج و دریافت مقادیر متنی عمدتا طولانی در فرم های وب استفاده می شود، علاوه بر این کارکردهای ذاتی می توانیم جهت نمایش کد لوگو نیز از تگ textarea استفاده کنیم که در زیر این کار را برای نمایش کد لوگوی خود انجام داده ایم:

<textarea cols="20" rows="2" dir="ltr"><a href="http://www.example.com" title="عنوان سایت یا وبلاگ" target="_blank"><img src="http://www.example.com/file/image/logo.jpg" alt="عنوان لوگوی سایت یا وبلاگ" title="عنوان لوگوی سایت یا وبلاگ" height="80" width="120" border="0"></a></textarea>

توضیح:
- تگ textarea تفاوت هایی با تگ input دارد، در اینجا از پارامترهای cols و rows به جای width و height برای عرض و ارتفاع باکس استفاده می کنیم که مبنای آنها پیکسل نیست، پارامتر rows ارتفاع فیلد را بر اساس تعداد خط های قابل روئیت و پارامتر cols عرض فیلد را بر اساس عرض استاندارد لازم برای نمایش کاراکتر تعیین می کند، این مقادیر ممکن است در مرورگرهای مختلف با اندکی تفاوت پردازش شوند!
- پارامتر value در تگ textarea وجود ندارد و به جای آن باید مقدار کد لوگوی حمایتی را بین تگ های textarea قرار دهیم.
- در آموزش مقدماتی HTML گفتیم که تقریبا تمام تگ ها می توانند از استایل CSS برای جلوه های ظاهری استفاده کنند، در اینجا هم اگر نیاز به تنظیمات بیشتر داشته باشیم می توانیم از پارامتر style استفاده کنیم:

<textarea style="width:500px; height:120px; direction: ltr;">

استفاده از استایل CSS از نظر بهینه سازی برای موتورهای جستجو (SEO) روش توصیه شده است.

استفاده از جاوا اسکریپت برای انتخاب خودکار و کپی کد لوگو

با نحوه نمایش کد لوگوی حمایتی در سایت یا وبلاگ آشنا شدیم، در ادامه آموزش بد نیست قابلیتی حرفه ای تر برای آن در نظر بگیریم و امکان انتخاب خودکار متن را به فیلدها اضافه کنیم، منظور از انتخاب خودکار متن کپی کد لوگو به صورت یکجا و کمک به راحتی بیشتر کاربران در هنگام استفاده از آن است، طبق روال ایجاد امکانات اینچنینی در سمت کاربر بدین منظور باید از جاوا اسکریپت (JavaScript) کمک بگیریم که در نمونه زیر از تابعی ساده استفاده کرده ایم.
تابع جاوا اسکریپتی:

<script>
function autoSelect(){
   var text_input = document.getElementById('logo');
   text_input.focus();
   text_input.select();
}
</script>

توضیح:
- با فراخوانی این تابع متن داخل فیلد به صورت خودکار به صورت انتخاب شده (با رنگ پس زمینه متمایز) تغییر می کند.
- در این تابع از سه متد getElementById، focus و select استفاده شده است.
- این تابع را ترجیحا در قسمت هدر صفحه و بین تگ های head کپی می کنیم.
نحوه فراخوانی و استفاده از تابع:

<input id="logo" type="text" height="25" width="120" dir="ltr" onfocus="autoSelect();" value='<a href="http://www.example.com" title="عنوان سایت یا وبلاگ" target="_blank"><img src="http://www.example.com/file/image/logo.jpg" alt="عنوان لوگوی سایت یا وبلاگ" title="عنوان لوگوی سایت یا وبلاگ" height="80" width="120" border="0"></a>'>

توضیح:
- تقریبا نحوه استفاده از این روش با حالت معمولی یکسان است با این تفاوت که در اینجا باید یک آی دی برای تگ input تعریف کنیم و تابع را با رویداد onfocus فراخوانی نمائیم.
- آی دی تعریف شده در این نمونه کد عبارت دلخواه logo است، اگر دقت کنیم در متد getElementById تابع هم این آی دی به عنوان عنصر مقصد در نظر گرفته شده است.
- پس از کلیک در داخل فیلد و اجرای رویداد focus متن فیلد به صورت خودکار به حالت انتخاب شده (Highlight) تغییر می کند.
نکته: روش هایی برای ایجاد دکمه کپی خودکار متن در جاوا اسکریپت وجود دارد که اغلب به لحاظ فنی دارای پیچیدگی هایی است و به دلیل رعایت سیاست های امنیتی مرورگرها به راحتی در صفحات وب قابل اعمال نیست، لذا جهت جلوگیری از طولانی شدن آموزش از این قابلیت صرف نظر می کنیم!

ساخت لوگوهای مثلثی با جاوا اسکریپت و CSS

همانطور که گفتیم لوگوهای قابل نمایش در صفحات وبلاگ ها و وبسایت ها به تصاویر ثابت برای حمایت از آن سایت یا وبلاگ محدود نمی شوند، با استفاده از جاوا اسکریپت و CSS می توانیم معمولا در گوشه های صفحات وب نمادهایی مثلثی شکل یا به شکل های دیگر جهت مناسبت های مختلف یا اعلام حمایت از موضوعی خاص قرار دهیم، بدین منظور ابتدا در برنامه های گرافیکی و طراحی نظیر فتوشاپ طرحی با ابعاد 170 در 170 پیکسل یا هر اندازه دلخواه دیگری ترسیم می کنیم به نوعی که خطی به صورت مورب و زاویه 45 درجه آن تصویر را دو نیم کرده باشد (در واقع تبدیل به دو مثلث کند)، بسته به اینکه در کدام قسمت از صفحه (چپ، راست، بالا یا پائین) بخواهیم لوگو را نمایش دهیم شکل برش و جهت زاویه هم متفاوت خواهد بود، در ادامه قسمتی را که باید پس زمینه شفاف داشته باشد تا فضای پشت سر آن دیده شود با ابزارهای موجود در برنامه فتوشاپ نظیر کمندهای دسته lasso tool پاک می کنیم تا به صورت پیکسل های چهار خانه مربعی و شفاف در آید، پس از طراحی لوگو باید تصویر را با فرمت gif یا png ذخیره کنیم تا قسمت شفاف تصویر مورد نظر در صفحات وب دیده نشود و لوگو به صورت مثلثی به نظر برسد، در واقع لوگوهای مثلثی یک تصویر به شکل مربع هستند که یک طرف آنها پس زمینه شفاف دارد.

اکنون تنظیمات خود را در یکی از نمونه کدهای زیر اعمال کرده و آن را در قالب سایت یا وبلاگمان درج می کنیم.
کد نمایش لوگو در بالای سمت راست:

<script>
var logo = '<div style="z-index:999; position:absolute; right:0; top:0; border:0;">';
logo += '<img src="http://www.example.com/file/image/logo.png" alt="عنوان لوگوی حمایتی" width="170" height="170" border="0"></div>';
document.write(logo);
</script>

کد نمایش لوگو در بالای سمت چپ:

<script>
var logo = '<div style="z-index:999; position:absolute; left:0; top:0; border:0;">';
logo += '<img src="http://www.example.com/file/image/logo.png" alt="عنوان لوگوی حمایتی" width="170" height="170" border="0"></div>';
document.write(logo);
</script>

کد نمایش لوگو در پائین سمت راست:

<script>
var logo = '<div style="z-index:999; position:absolute; right:0; bottom:0; border:0;">';
logo += '<img src="http://www.example.com/file/image/logo.png" alt="عنوان لوگوی حمایتی" width="170" height="170" border="0"></div>';
document.write(logo);
</script>

کد نمایش لوگو در پائین سمت چپ:

<script>
var logo = '<div style="z-index:999; position:absolute; left:0; bottom:0; border:0;">';
logo += '<img src="http://www.example.com/file/image/logo.png" alt="عنوان لوگوی حمایتی" width="170" height="170" border="0"></div>';
document.write(logo);
</script>

توضیح:
- ساختار کدهای بالا بسیار ساده است، دستورات جاوا اسکریپت یک تصویر را که با استایل CSS تنظیم موقعیت شده به خروجی ارسال می کنند و خاصیت های CSS باعث می شوند که لوگو در گوشه های صفحه و بالاتر از سایر لایه ها به نمایش دربیاید.
- خاصیت z-index در CSS موقعیت تصویر را نسبت به لایه های دیگر تنظیم می کند، هر چقدر مقدار عدد z-index بیشتر باشد آن لایه بالاتر از لایه های دیگر در صفحه نشان داده می شود.
- خاصیت position با مقادیر absolute باعث شناور شدن لوگو در کل صفحه می شود و در این حالت می توانیم موقعیت آن را از گوشه های صفحه نمایش (مرورگر) تنظیم کنیم، در حالت absolute لوگو با اسکرول صفحه جا به جا می شود که در صورت نیاز به ثابت شدن لوگو می توانیم از مقادیر fixed نیز استفاده کنیم.
- ویژگی های left، right، top و bottom میزان فاصله تصویر را از جهت های مختلف تنظیم می کنند، همانطور که در نمونه کدها مشخص است این ویژگی ها در اینکه تصویر کجای صفحه نمایش داده شود موثر هستند.