ترفندها

روش ساخت منوی پایین افتادنی با کمک CSS3

دشواری : مبتدی
زمان تکمیل آموزش : 20 دقیقه
منبع اصلی آموزش به زبان انگلیسی : http://designmodo.com/css3-dropdown-menu
مترجم و تهیه کننده مطلب : حمید رضا کاظمی – www.hamidoffice.com

مرحله ی اول – کدنویسی HTML

ما در ابتدا یک unordered list همراه آیتم های آن و تگ لینک خواهیم ساخت . برای ساخت زیر منو یا همان Sub Menu در درون لیست خود یک unordered list خواهیم نوشت.

[sourcecode language=”html”]
<ul class="menu">
<li><a href="#">My dashboard</a></li>
<li><a href="#">Likes</a></li>
<li><a href="#">Views</a>
<ul>
<li><a href="#" class="documents">Documents</a></li>
<li><a href="#" class="messages">Messages</a></li>
<li><a href="#" class="signout">Sign Out</a></li>
</ul>

</li>
<li><a href="#">Uploads</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Documents</a></li>
</ul>
[/sourcecode]

نتیجه ی کار تا اینجا به صورت زیر می باشد :

تصویر شماره یک

وردپرسی دلپذیرتر با Admin Toolbar Bookmarklet

محبوبیت  سیستم مدیریت محتوی وردپرس به دلایل ویژگی های منحصر به فردی هست که این سیستم در بطنش داره. از لذت توسعه اون گرفته تا برآورده کردن نیاز کاربران مبتدی ا و حرفه ای، این سیستم سراسر جذاب و پویا و به اعتقاد من استاندارد هست. این بار من قصد دارم تا یکی از کشفیاتم خودم رو در حین وبگردی به شما همراهان معرفی کنم. اون چیزی نیست جز Admin Toolbar Bookmarklet.

کار این Bookmarklet، همون طور که از نامش پیداست ایجاد یک نوار ابزار زیبا و کارا برای دسترسی سریع به بخش های مختلف پنل مدیریت وردپرس هست. در بطن این Bookmarklet چند خط کد جاوا اسکریپت هست که بر اساس فریم ورک jQuery نوشته شده و نهایتا همانند تصویر می تونه با جا خوش کردن بر روی نوار بوکمارک مرور گر شما و به هنگام کلیک شدن یک نوار ابزار سریع رو به نمایش در بیاره که بسیار کارا و مفید هست. لا اقل برای من که این طور هست. توصیه می کنم حتما یه بار تستش کنید.

تصویر از سایت weblogtoolscollection.com
تصویر از سایت weblogtoolscollection.com

برای استفاده از این Bookmarklet تنها کافی هست که (مشابه تصویربالا) پیوند زیر رو با موس به بخش بوکمارک مرورگر خودتون بکشید و رهاش کنید. بدین ترتیب با کلیک بر روی اون نوار ابزار مورد بحث نمایان خواهد شد و باز با یک کلیک بر روی این Bookmarklet، محو خواهد شد. قابل ذکر هست که فایل جاوا اسکریپت این Bookmarklet بر روی سرور سازنده اون میزبانی میشه و شما می تونین از لینکی که در ادامه میاد اون رو دانلود و سفارشی سازی کنید. یکی از نکات مهم دیگه در استفاده از این نوار ابزار سفارسی سازی اون برای سایت شخصی شماست. این کار به سادگی قابل انجام هست؛ کافیه که از سرس جاوا اسکریپت به محل فایل شیوه نامه اون دسترسی پیدا کنید و شمایلش رو بر اساس سلیقه خودتون  ویرایش کنید. از سوی دیگه برای اینکه به این ابزار بگید که سایت شما چی هست، می بایست سرس جاوا اسکریپت رو باز کنید و عبارت /wp-admin/ رو هر کجا که دیدید با این جایگزین کنید:

/http://www.yoursite.com/wp-admin

در عبارت بالا بدیهی هست که باید آدرس سایت خودتون رو درج کنید. ضمنا این کار و می تونید با ابزار Replace ویراستار ها به سادگی صورت بدید. در نهایت برای استفاده کافیه که این فایل رو جایی آپلود کنید و آدرسش رو در لینک دومی (آزمایشی) که در زیر ارائه شده اعمال کنید و به نوار بوکمارک خودتون بکشید.

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

دانلود سرس جاوا اسکریپت این Admin Toolbar Bookmarklet

محل نمونه در سایت سازنده
محل نمونه در سایت سازنده

لینک آزمایشی جهت کشیدن توسط موس و انداختن در نوار بوکمارک مرورگردر سایت سازنده

سایت سازنده

ساختن فونت به صورت آنلاین بدون نیاز به هیچ برنامه ای!

این روزها مدام شاهد ظهور ابزارهای آنلاین و سرویس های جور وا جور هستیم که رنگ و بویی دیگه به وب تزریق میکنند و تجربه ای جدید رو برای کاربران رقم می زنن. یکی دیگر از این ابزارهای نو ظهور ابزار FontStruct هست که واقعا کار آمد طراحی شده و شایسته تحسین هست. معماری این سرویس بر پایه تکنولوژی Flash بنا شده و از این حیث باعث شده که توسعه دهندگانش انعطاف زیادی در ارائه ویژگی های مورد نیاز داشته باشن. مثل اغلب ابزارهای تحت وب این ابزار هم به رایگان در دسترس هست و افراد فعلا بدون هیچ دغدغه ای میتونن ازش استفاده کنن.

این ابزار یک ویرایشگر مطلوب و در عین حال کارا در اختیار کاربران قرار می ده تا اون ها به راحتی به تولید فونت های خودشون از نوع TrueType بپردازن و در صورتی هم که مایل بودن اون رو با سایرین به اشتراک با مجوز Creative Common بگذارن و اون رو در گالری ویژه ای که برای این کار تدارک دیده شده قرار بدن. برای نشر هرچه بیشتر این سرویس و محبوب تر شدنش ، توسعه دهندگان اون ابزارکی ( Widget ) رو تدارک دیدن تا افراد به آسانی بتونن ساخته هاشون رو در وبلاگ ها و سایت هاشون در معرض دید عموم قرار بدن.

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

برای رفتن به سایت FontStruct کلیک کنید.

تبدیل فایل ها به فرمت های مختلف به صورت آنلاین

سایتی را که این بار قصد معرفی آن را داریم سایتی بسیار مفید برای تمامی افراد خواهد بود. بسیار پیش آمده

که نیازمندیم تا فایلی را از فرمتی به فرمت دیگر ( مثلا از PDF به DOC ) تبدیل کنیم و نبازمند مبدلی قابل اطمنیان بوده ایم. بدتر آنکه در شرایطی قرار گرفتیم که کامپیوتر شخصی خود را هم در اختیار نداشته ایم و می بایست در زمانی کوتاه از پس این کار بر بیاییم. خب چاره چیست؟

چاره این مشکل را می توان در سایت Zamzar یافت، سایتی رایگان که با ارائه خدمات تبدیل فرمت ها به یکدیگر به شما امکان می دهد که از این پس در سراسر دنیا به راحتی بتوانید اقدام به تبدیل فایل های خود به دیکدیگر نمایید. روال کار بدین صورت هست که ابتدا باید فایل منبع را در سایت آپلود کرد و سپس نوع فرمت نهایی را برگزید و در نهایت با وارد کردن آدرس ایمیل خود به انتظار دریافت فایل تبدیل شده نشست. با استفاده از این سرویس می توان اسناد صوتی ، تصویری، نوشتاری و ویدئویی را به یکدیگر تبدیل نمود.

البته باید یادآوری کرد که در هنگام تبدیل اسناد مهم باید مراقب بود و هر سندی را که حاوی اطلاعات حیاتی می باشد از این طریق تبدیل نکرد. به هر حال این روز ها با فراگیر شدن تب Web ۲ شاهد رشد قارچ گونه چنین سایت هایی هستیم که سرویس هایی مفید را به کاربران ارائه می دهند.

آدرس سایت:

http://www.zamzar.com

اگه فلش داری غم نداری!

این بار قصد دارم تا یه ابزار رایگان مفید و کار راه انداز تحت عنوان PortableApps.com Suite رو به شما دوستان معرفی کنم. اما قبل از اون اجازه بدین تا نرم افزارهای Portable ( قابل حمل) رو به اختصار توصیف کنم. کلا به زبان عامیانه به نرم افزارهایی که نیاز به نصب ندارن و مستقلا اجرا میشن Portable گفته میشه که مزایای متعددی دارن که مهمترینش همون قابل حمل بودن اونهاس. به ترتیبی که در هر مکانی که دسترسی به کامپیوتر برای ما مهیا شد میتونیم USB Flash خودمون رو به سیستم وصل کنیم و از برنامه قابل حمل مد نظرمون استفاده کنیم.

این روزا با توجه به رشد استفاده از USB Flash ها و نیاز به استفاده از ابزارهای کاربردی، برنامه های کلاسیک در نسخه های قابل حمل هم عرضه میشن تا جاییکه Photoshop قابل حمل هم ارائه شده. بنابراین خیلی راحت میشه یه مجموعه ابزار مورد نیاز رو همیشه توی USB Flash همراه خودمون داشته باشیم. اما با این حال به مرور زمان احساس می کنیم که ای کاش یه چیزی بود که باهاش می تونستیم ابزارهای رو فلش دیسک و داده های مربوطه رو سریعتر و بهتر مدیریت کنیم تا مثلا موقعی تعدد برنامه ها زیاد میشه بتونیم سریع و راحت به هدف برسیم و یا نخوایم همه ی کارها رو دستی انجام بدیم. اما این نیاز ما از قبل توسط برنامه PortableApps.com Suite پاسخ داده شده! با استفاده از این ابزار تمامی کارهایی که ازش یاد کردم به راحتی امکان پذیره. بهتر از اون این هست که این ابزار به همراه یک مجموعه از نرم افزارهای مفید قابل حمل مثل مرورگر فایرفاکس و یا OpenOffice در سه نسخه متفاوت عرضه شده که تفاوت عمدشون در تعداد برنامه هایی هست که به صورت پیشفرض ارائه می کنن. البته به راحتی می تونیم ابزارهای دیگه خودمون رو بهش اضاف کنیم.

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

این مجموعه در سه ویرایش Lite، Basic و Standard عرضه شده که همون طور که گفتم تفاوتشون در تعداد برنامه های ارائه شده هست. این برنامه که خیلی به درد من میخوره ، امیدوارم که شما هم ازش استفاده کنید و لذت ببرید.

جهت دریافت برنامه PortableApps.com Suite کلیک کنید.