‏نمایش پست‌ها با برچسب ابزارهای وبلاگی. نمایش همه پست‌ها
‏نمایش پست‌ها با برچسب ابزارهای وبلاگی. نمایش همه پست‌ها

FeedBurner

آنچه که باید از فیدبرنر بدانید:
همه چیز درباره FeedBurner

از بلاگ نوشت

HTML تگهایی که بلاگرها باید بدانند! (1)

اگر مدت زیادی باشد که وبلاگ می‌نویسید، حتماً مواردی پیش آمده است که برای برطرف کردن مشکلتان در قالب و یا پست، به دنبال راه حل HTML آن بگردید و برای رفع مشکل از تگها یا کدهای HTML استفاده کنید. اگر هم مدت کمی باشد که وبلاگ می‌نویسید، با این مشکلات برخورد خواهید کرد. اگر هم به هرآنچه هست، راضی باشید و اهل کنجکاوی نباشید و حساسیتی به نوع نمایش پستتان نداشته باشید هم که نیازی به دانستن این‌ها نخواهید داشت!

معمولاً ادیتورهای سرویس‌دهنده‌های وبلاگ، سه قسمت دارند:
  1. قسمتی که معمولاً به طور پیش‌فرض باز می‌شود، ادیتوری است که امکانات اصلی ویرایش متن از قبیل راست‌چین، چپ‌چین، متن توپر و کج و قراردادن تصویر و ... در آن وجود دارد و نیازی به دانستن HTML نیست. اما اگر بخواهید کارهای خاصی در پستتان انجام دهید...
  2. قسمت دومی در ادیتور وجود دارد که می‌توانید کدهای HTML مربوط به پستتان را در آن ببینید. اگر قصد استفاده از کدهایی که در ادامه می‌آید را دارید، باید آنها را در جای مناسب و در این قسمت از ادیتور وارد کنید.
  3. قسمت سوم، امکان پیش‌نمایش(Preview) پستتان را به شما می‌دهد.
در برخی از ادیتورهای کامنت، مثل وردپرس و بلاگر، اجازه‌ی استفاده از برخی تگهای HTML داده شده است؛ مثلاً بدون دانستن این تگها، در نوشتن کامنت در بلاگر، نمی‌توانید برای یک عبارت، لینک بگذارید و آن را توپر(Bold) یا کج(Italic) کنید.
در این پست تعدادی از تگهای پرکاربرد در وبلاگ‌نویسی را با توضیحات آن، آورده‌ام.

یادآوری: تگهای HTML دو گونه‌اند:
نوع اول. که تگهای دوتایی هستند و ابتدا و انتها دارند. تگ انتهایی با علامت / بسته می‌شود. مانند: <a> در ابتدا، و <a/> که در انتها قرار می‌گیرد و تگ لینک را می‌سازند.
نوع دوم. که تگهای تنها هستند مانند تگ <img> (برای قراردادن تصاویر).



چگونه لینک بگذارم؟!

تعجب نکنید! در حالت عادی، ادیتورها، متنی را که انتخاب کرده‌اید، با آدرسی که به آن می‌دهید، لینک می‌کنند، اما غیر از این، لینکها خصوصیات جالب‌تری هم دارند. تگ HTML ٍ یک لینک به طور معمول، به صورت زیر است:

<a href="http://www.google.com/">Google</a>

نتیجه:
Google

که در کد بالا، روبروی href (مخفف hypertext refrence)، نشانی صفحه یا فایل خاصی قرار می‌گیرد که کلمه Google را به آن صفحه یا فایل مرتبط می‌کند.
اما خصوصیات دیگر تگ <a>:
به نظر من، مفیدترین خصوصیت جالب تگ <a>، خصوصیت title آن است. حتماً عکسهایی را دیده‌اید که وقتی موس را بر روی آن قرار می‌دهید، متنی بر روی آن ظاهر می‌شود... خوب! چنین امکانی برای لینکهای متنی نیز وجود دارد، اگرچه بسیار کم دیده‌ام که کسی از این خصوصیت استفاده کند. نمونه زیر را ببینید:

<a href="http://mail.yahoo.com/" title="Unlimited Storage with 100 Megabyte Attachements!">Yahoo! Mail</a>

نتیجه:
Yahoo! Mail

به قول Jackob Nielsen از w3c، یکی از بزرگترین مشکلاتی که در وب وجود دارد این است که کاربران نمی‌دانند به کجا می‌روند! با استفاده از Title، می‌توانید اطلاعاتی در مورد صفحه‌ای که آن مراجعه می‌شود، بدهید. آقای Nielsen می گوید بهتر است که در موارد زیر از خصوصیت Title استفاده کنید:

نام سایت که به آن لینک می‌دهید (اگر با عبارتی غیر از آن و به سایت اصلی لینک می‌دهید)؛
نام زیرمجموعه سایت (اگر به آدرس قسمتی از یک سایت لینک می دهید)؛
نوع اطلاعاتی که کاربر در صفحه‌ی مورد نظر به آن دسترسی پیدا می‌کند؛
عبارات آگاهی‌دهنده؛ مثلاً در مواقعی که نیاز به ثبت نام برای استفاده از آن سایت یا دسترسی به صفحه‌ی موردنظر است.
در مورد همه‌ی لینکها از title استفاده نکنید!


خصوصیت دیگر این تگ، خصوصیت Target است، یعنی صفحه چگونه باز شود؛ متوجه نشدید؟! الان توضیح می‌دهم. فرض کنید شما تعداد زیادی لینک در پستتان دارید و یا به سایتی لینک می‌دهید، اما نمی‌خواهید در صورت کلیک کاربر، لینک در همین صفحه باز شود، یعنی می‌خواهید لینک در صفحه جداگانه‌ای باز شود! در این صورت از Target استفاده می‌کنیم:

<a href="http://mail.google.com/mail/" title="Unlimited Storage with 100 Megabyte Attachements!" target="_blank" >GMail</a>

نتیجه:
GMail

به جای blank_، گزینه‌های دیگری نیز وجود دارند که کاربردشان، بیشتر در قابها است و به توضیح آنها نمی‌پردازم.

نکته: در صورتی که می خواهید تمامی لینک‌های صفحه، در صفحه جدید باز شود، در بین تگ <head> صفحه‌تان، کد زیر را قرار دهید:
<base target="_blank">




چگونه تصویر بگذارم؟!

تعجب کردید؟!... در مورد استفاده از تصاویر هم، نکاتی وجود دارد که با ادیتور برخی وبلاگها، امکان استفاده از آن وجود ندارد! برای استفاده از تصاویر شما از تگ <img> استفاده می‌کنید. به صورت زیر:

<img src="http://www.divshare.com/img/3146850-85f.gif">

نتیجه:


که در روبروی src (مخفف Source)، آدرس عکس قرار می‌گیرد. تمام این کد، برای نمایش عکس موردنظرتان کافی است، اما...
1. در صورتی که عکستان لود نشود (به دلیل تنظیم مرورگر و ...) چه؟! آنگاه خصوصیت alt (مخفف Alternative Text) تصویر، کمکتان می‌کند تا متنی را به جای عکس نشان دهید.

<img src="http://www.divshare.com/img/3146850-85f.gif" alt="Google">

نتیجه(آدرس را اشتباه دادم تا لود نشود!):
Google

2. تگ <img> هم خصوصیتی به نام Title دارد که برای اضافه کردن توضیح به عکس بهتر است از این خصوصیت استفاده کنید.
نکته: Firefox از alt، تنها زمانی استفاده می‌کند که عکس لود نشود و برای توضیح عکس تنها به خصوصیت title تگ، نگاه می‌کند، اما در اینترنت اکسپلورر، در جایی که title استفاده نشده باشد، از متن مربوط به alt، برای نمایش توضیح تصویر استفاده می‌شود.
کاربرد آن به صورت زیر است:

<img src="http://www.divshare.com/img/3146850-85f.gif" alt="Google" title="Put this logo into your sidebar and support Google!">

نتیجه:
Google


ادامه دارد...

طریقه گذاشتن FavIcon برای صفحات وب

حتماً تا به حال هنگام بازدید از بسیاری از سایتها و وبلاگها، متوجه آیکون کوچکی (معروف به FavIcon) که در کنار آدرس سایت، در addressbar، قرار می گیرد، شدید. بلاگر و ... به طور پیش فرض از آیکون خودشان که - معمولاً لوگوی آنهاست - به عنوان Favourite Icon استفاده می کنند، اما می توان این آیکون را تغییر داد. کافی است کد زیر را در قالبتان، در جایی بین <head> و <head/> قرار دهید و به جای آدرس آن، آدرس آیکون مورد نظر خودتان را وارد کنید.

<link href="http://www.yourhost.com/favicon.png" rel="shortcut icon">

همانطور که می بینید، آیکونی که در آدرس بالا استفاده کردیم، دارای فرمت png است. آیکونهای با فرمت png توسط مرورگر Internet Explorer 6 و قبل از آن، نمایش داده نمی شود، اما در مرورگرهای اپرا و فایرفاکس (تا آنجایی که من می بینم!) مشکلی ندارند. اما اگر حساسیت زیادی به این مساله دارید، می توانید با برنامه هایی مثل IconArt و IconShop و ... آیکون مورد نظر خودتان را بسازید.

برای به دست آوردن آیکونی با فرمت png می توانید عکس موردنظر (سعی کنید کوچک باشد؛ مثل لوگو یا عکس کوچک شده خودتان!) را در برنامه ACDSee، باز کنید و از منوی Modify و Convert File Format، فرمت فایلتان را به png تغییر دهید.

آیا من نمی توانم از فرمت دیگری استفاده کنم؟!
چرا! شما می توانید از فرمتهای دیگری مثل gif هم استفاده کنید!
با کمی جستجو، می توانید آیکونهای زیبایی برای صفحه وب خودتان بیابید.

Iconfinder؛ موتور جستجوی آیکونها

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

نتایج جستجوی من برای عبارت email رو می بینید!

کم کردن حجم فایلهای صوتی با استفاده از نرم افزار JetAudio

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

در این پست میخوام نحوه ی کاهش حجم فایلهای صوتی که احتمالاً بیشترین کاربردش در وب خواهد بود رو با استفاده از نرم افزار محبوبم، JetAudio، توضیح بدم.

توجه کنید: من در نوشتن این یادداشت از JetAudio 7.0.0.3001 Plus VX استفاده کردم که در صورتی که به اینترنت پرسرعت (رویای هنوزی خیلی از ما!) دسترسی داشته باشید میتونید از سایتهای نرم افزار پیدا و دانلود کنید! اما در صورتی که مثل من از اینترنت دوگانه سوز (ذغال و سنگ چخماق!!!) استفاده می کنید، یا از یک کافی نت پرسرعت دانلودش کنید و یا شاید مغازه های عرضه نرم افزارهای فله ای JetAudio 7 رو داشته باشند!
اگر ورژنهای قبلی این نرم افزار رو هم داشته باشید، با توجه به تغییرات خیلی جزیی در جای دکمه ها، میتونید از این یادداشت استفاده کنید.


اولین چیزی که پس از نصب نرم افزار JetAudio 7 جلب توجه میکنه، قیافه ی تیره و سیه فامش هست که مثل بسیاری از نرم افزارهای دیگه احتمالاً برای تطبیق با ویندوز ویستا به این شکل دراومده. این پوسته، به نظرم چهره ی جت رو جذابتر از قبل کرده. تغییر دیگه ای که در این ورژن رخ داده، تبدیل کنترل صدای اون از حالت دایره ای (در ورژنهای قبلی) به حالت خطی هست. اسپکتروم (همون رقص نور خودمون!) این پوسته پس از نصب هم خیلی قشنگ هست.
از تغییرات ظاهری این ورژن که بگذریم، تغییر دیگرش، اضافه شدن خیلی از فرمتهایی هست که ورژنهای قبلی این نرم افزار قادر به اجراشون نبودند (از جمله ifo ،flv ،mpeg-audio ،3gp ،3g2 و vob).
غیر از اینهایی که گفتم، مطمئناً تغییرات دیگه ای هم کرده که خودتون میتونید کشفش کنید!

اما برسیم به موضوع اصلیمون، یعنی کم کردن حجم فایل صوتی.
شروع می کنیم!

1. ابتدا برنامه رو اجرا کنید! سپس دکمه ی Convert رو از سری دکمه هایی که در قسمت بالای جت وجود داره کلیک کنید (توجه: دکمه ی Conversion در ورژنهای قبلی)؛



2. منویی باز میشه که دارای دو گزینه برای تبدیل فایلهای صوتی و ویدئویی است. گزینه ی Convert audio ... را انتخاب کنید؛

3. پس از کلیک آن، پنجره ای باز میشه که به صورت زیر است (برای دیدن پنجره در ابعاد بزرگتر، روی عکس کلیک کنید):




قسمتهای مختلفش به این صورت هست:
1-3. کلیدهای اضافه کردن فایل رو شامل میشه که برای اضافه کردن یک یا چند فایل، Add Files ... رو کلیک کنید (دو دکمه ی دیگه، برای اضافه کردن فایلهای Playlist و اضافه کردن از Media Library هست).

2-3. کلید Export ... ربطی به کم کردن حجم فایل نداره و فقط برای تولید فایل pls و m3u (که برای اجرای دسته ای از فایلهای موسیقی هستند)، به کار میروند؛ مثلاً 10 ترانه از 10 فولدر انتخاب می کنید و به صورت یک فایل m3u که در واقع Shortcut اونهاست، ذخیره میکنید؛ حالا با اجرای همان یک فایل، میتونید تمام 10 آهنگ رو به همون ترتیبی که اضافه کردید، اجرا کنید!

3-3. در این قسمت، میتونید نوع نامگذاری فایلها (مثلاً اسم آهنگ به این ترتیب باشه که اول نام آلبوم، بعد نام خواننده و بعد نام آهنگ باشه) و محل ذخیره شدن فایلها رو مشخص کنید.
اگر تغییری در این قسمت ندهید، اسم فایل، مشابه نام فایل اصلی و محل ذخیره ی آن هم در محل فایل اصلی خواهد بود؛

4-3. در اینجا شما فرمت فایل خروجی رو مشخص می کنید (من معمولاً از فرمت MP3 استفاده می کنم). علاوه بر این فرمت، میتونید از فرمتهای دیگری مثل ogg ،wav ،wma و ... استفاده کنید (شکل زیر). حتماً متوجه شدید که اگر تنها بخواهید فرمت فایل رو عوض کنید (مثلاً wma رو برای استفاده در mp3پلیرتون به mp3 تغییر بدید) با این قسمت سر و کار دارید!




اگر Transfer Tag if target format supports رو تیک بزنید، در صورتی که فایلتون دارای نام خواننده، آلبوم، سال و توضیحات اضافی باشه، تمام این اطلاعات در فایل نهایی شما هم کپی خواهد شد.
اما قسمت 4، تنظیمات بیشتری هم در Configure داره که بعد از قسمت 5 توضیح میدم.

5-3. این قسمت رو فقط ببینید و منتظر بمونید!!! در اینجا وضعیت تبدیل و تغییر فرمت و مقدار زمان رفته و باقیمانده رو میتونید ببینید.

4. پس از انجام تنظیمات بالا، قسمت اصلی مربوط به تغییر حجم باقی میمونه. در قسمت Output Format، (قسمت 4 در تصویر) دکمه ی Config رو کلیک کنید تا پنجره ی مربوط به اون باز بشه که مثل شکل زیر خواهد بود.



قسمت Channel مربوط به حالت مونو (یکسان بودن صدا) یا استریو (دو طرفه بودن صدا بسته به آهنگ) صوت است. پیشنهاد من حالت مونو است.

در قسمت بعدی، Bitrate هست که برای کم شدن حجم و با کیفیت نسبتاً مناسب (با توجه به سرعت اینترنت حال حاضر ما) هرچقدر کمتر باشه، حجم فایل نهایی ما، کمتر خواهد بود.
توجه: در صورتی که میخواهید فایلتون به صورت آنلاین اجرا بشه، پیشنهاد می کنم این قسمت رو روی 16 کیلوبایت بر ثانیه (16Kbps) تنظیم کنید. در غیر این صورت، برای دانلود، میتونید سرعتهای مختلفی مثل 64Kbps و ... رو امتحان کنید.

در آخرین بخش هم کیفیت صداست که طبیعی است هرچقدر کیفیت پایینتر باشه، حجم کمتر خواهد بود. اون رو بر روی Highest Quality -Low Speed تنظیم کنید.

5. پس از تایید (OK)، دکمه ی Start رو بزنید تا تبدیل فایل آغاز بشه؛

6. تمام!

خوب! اگر تمام مراحل رو درست طی کرده باشید و تنظیماتتون مثل تنظیمات من باشه، حجم فایلتون در حدود 10 برابر! کمتر خواهد شد و برای استفاده در وب، بهینه است. البته همیشه در نظر داشته باشید که کیفیت فایل و حجم آن در جهت عکس هم هستند. اگر میخواید فایلی که در وب برای استفاده آنلاین می گذارید، حتماً شنیده بشه -حداقل الان- باید از کیفیت بالای فایل صرف نظر کنید.

در صورتی که مشکل یا سؤالی وجود داشت، در کامنت یا ایمیل بنویسید.

جستجو در وبلاگهای Blogger

برای گذاشتن جستجو در وبلاگ با استفاده از موتور جستجوی خود بلاگر، مراحل زیر را دنبال کنید:

1. به قسمت Template بروید؛
2. در جایی که میخواهید فیلد جستجو نمایش داده شود، کد زیر را وارد نمایید!

<p align=left>
<form name="b-search" action="http://search.blogger.com/">
<input type="text" id="b-query" name="as_q" size="30" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="hidden"
name="bl_url" value="<$BlogURL$>" />
<input type="submit" name="Search" id="b-searchbtn"
value="جستجو"
onclick="document.forms['b-search'].bl_url.value='<$BlogURL$>'" /></form>
</p>


توجه: این روش تنها برای وبلاگهای Blogger است!

پ.ن: بر طبق اصول طراحی وب، هنگامی که تعداد صفحات یک وب سایت از یک حدودی (معمولاً 100 صفحه) گذشت، باید قابلیت استفاده از موتور جستجو برایش وجود داشته باشد.
اما از آنجا که یادداشتهای ما معمولاً از چند خط کوتاه بیشتر نمیشود، فعال شدن جستجوگر در یادداشت 300ام قابل توجیه است! (نیست؟!)

DivShare.com

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

اگر هنوز متوجه نشدید که از چی دارم صحبت میکنم معرفی کامل این سایت رو بخونید!

برای شروع هم که شده از این ترانه زیبای دکتر اصفهانی استفاده میکنم. چقدر این آهنگ رو دوست دارم:

Blogger

Check Google Page Rank