انجمن‌های فارس وب

عنوان مقاله: 100 ابزار مفيد براي طراحان وب و وبمسترها
سطح مقاله: تخصصي - مقدماتي
منبع: [ جهت مشاهده لينك عضو شويد ! ]

---

هميشه در طراحي و توسعه ي وب نيازمند ابزار ها و امكاناتي هستيم كه از سايت هاي ديگر به صورت رايگان قابل دسترسي هستند ، ابزارها و لوازمي كه در صورت تهيه به صورت شخصي باعث خرج وقت و سرمايه مي باشد . در اين بخش مي خواهم شما را با 100 ابزار و 100 سايت ارائه دهنده ي آن لوازم سودمند و كاربردي آشنا كنم .

اين ابزار ها عموما" شامل كدهاي JavaScript ، CSS ، HTML و AJAX مي باشند :

1- نمايش توضيحات بالوني : اين ابزار با اضافه نمودن كدهاي مختصري از JavaScript و CSS در سايت يا وبلاگ شما ميسر مي شود . اين ابزار اين امكان را فراهم مي آورد كه توضيحات بيشتري از متن هاي انتخابي تان را در يك فضاي بالون شكل نشان دهيد ، اين ابزار از آدرس [ جهت مشاهده لينك عضو شويد ! ] قابل دسترسي مي باشد .

2- نمايش توضيحات جعبه اي : اين ابزار نيز همانند قبلي بوده و از javascript ، DHTML بهره مي گيرد و بر مبناي خاصيت title عمل مي كند . نمونه ي آن در [ جهت مشاهده لينك عضو شويد ! ] قابل مشاهده بوده و اين ابزار از آدرس [ جهت مشاهده لينك عضو شويد ! ] قابل دسترسي مي باشد .

3- ايجاد فرم هاي تماس : شما مي توانيد فرم هاي وب شخصي و استاندارد خود را به راحتي طراحي كنيد ، اين مقاله را از آدرس [ جهت مشاهده لينك عضو شويد ! ] بخوانيد .

4- ساخت جعبه هايي با گوشه گرد : اين سايت شرايطي را فراهم مي كند كه شما با استفاده از CSS و HTML جعبه هايي با گوشه هاي گرد خلق كنيد ، اين ابزار را مي توانيد از [ جهت مشاهده لينك عضو شويد ! ] ببينيد.

5- ايجاد نقشه سايت : شما مي توانيد به سادگي يك نقشه ي سايت (Site Map) براي سايت خود فراهم كنيد ، خروجي اين ابزار بر مبناي CSS و HTML مي باشد و از آدرس [ جهت مشاهده لينك عضو شويد ! ] قابل استفاده مي باشد.

6- منوهاي CSS آماده : نمونه هاي بسياري از منوهاي CSS آماده را مي توانيد از آدرس [ جهت مشاهده لينك عضو شويد ! ] دانلود و استفاده كنيد .

7- قالب هاي وب 2 : شما قادر خواهيد بود از سايت [ جهت مشاهده لينك عضو شويد ! ] قالب هائي حرفه اي ، زيبا ، رايگان و استاندارد و بر پايه ي XHTML و CSS را دانلود كنيد .

8- ساخت ليست دلخواه : حتما" در بعضي از سايت ها ديده ايد كه لينك هاي ليست وار به صورت فانتزي و آيكون خاص قرار گرفته اند ؛ توسط اين ابزار مي توانيد ليست هاي دلخواه خود را بسازيد ، اين ابزار از آدرس [ جهت مشاهده لينك عضو شويد ! ] قابل دسترسي است .

9- پنجره ي پيغام : گاها" ممكن است بخواهيم پيام خاصي را در قالب هشدار يا اطلاعيه به بازديد كنندگانمان عرضه كنيم ، توسط ابزار ساخت اين پنجره ها مي توانيد پنجره هاي فانتزي و شخصي و قابل بسته شدن توسط كاربر بسازيد ، اين ابزار از آدرس [ جهت مشاهده لينك عضو شويد ! ] قابل ساخت مي باشد .

10- ساخت لودينگ بار : برخي از اجزاء صفحه ي وب نياز به انيميشني جهت رساندن پيغام "در حال بارگزاري" (Loading) دارند . توسط ابزارهاي سايت [ جهت مشاهده لينك عضو شويد ! ] مي توانيد نمونه ي عكس در حال بارگزاري دلخواه خود را بسازيد .

11- منوي راست كليك ماوس : در سايت [ جهت مشاهده لينك عضو شويد ! ] مي توانيد براي لينك ها يا كل صفحه منوي دلخواه بازشونده با راست كليك بسازيد . اين منو ها قابليت پويا (Dynamic) و ايستا (Static) را نيز دارا مي باشند .

12- گرما سنج : اين ابزار نقاط گرم سايتتان را به شما نشان مي دهد ! منظور از نقاط گرم ؛ نقاطي است كه بازديد كنندگان بيشترين تعداد كليك را در آن نقاط داشته اند . جهت تمايل به داشتن همچين گرما نگاري مي توانيد به سايت [ جهت مشاهده لينك عضو شويد ! ] مراجعه كنيد .

13- جدول CSS : در سايت [ جهت مشاهده لينك عضو شويد ! ] شما تمام دستورات CSS به همراه خصوصيات و نحوه ي استفاده و عملكرد آنها را يك جا در اختيار داريد !

14- سبك نمايش گالري عكس : اگر مي خواهيد يك سبك نمايش خلاقانه از عكس هايتان را در اختيار داشته باشيد ، سايت [ جهت مشاهده لينك عضو شويد ! ] را فراموش نكنيد !

15- دكمه هاي فانتزي با CSS : در سايت [ جهت مشاهده لينك عضو شويد ! ] مي توانيد دكمه هاي دلخواه فقط با CSS را توليد و استفاده كنيد .

16- نوار مقياس : شما تنها با CSS قادر خواهيد بود نوارهاي نمايش گرافيكي مقدار را براي خود فراهم كنيد ؛ براي اين امر به آدرس [ جهت مشاهده لينك عضو شويد ! ] مراجعه كنيد .

17- قرار دادن آيكون براي هر چيزي : شما مي توانيد با استفاده از كدهاي مختصر CSS به هر چيزي كه بخواهيد آيكون اضافه كنيد ؛ مانند لينك ها كه يك نمونه در عكس زير قابل مشاهده مي باشد . اين ابزار از آدرس [ جهت مشاهده لينك عضو شويد ! ] قابل دسترسي مي باشد .

18- تكميل خودكار فرم ها : حتما" در سايت ها ديده ايد كه در بعضي از ورودي ها برخي كلمات پيشنهاد مي شود ، مانند ورودي موتورهاي جستجو و يا ثبت نام ها . اين سورس كد كه بر مبناي Ajax (ايژكس يا ايجكس) مي باشد از آدرس [ جهت مشاهده لينك عضو شويد ! ] قابل دريافت است .

19- يافتن لينك دهندگان : توسط ابزار سايت [ جهت مشاهده لينك عضو شويد ! ] قادر خواهيد بود سايت هائي را كه به سايت شما لينك داده اند را بيابيد .

20- تبديل سايت به كتاب : شايد لازم باشد كه گاها" سايت ها يا وبلاگ هايمان را در قالب كتاب الكترونيك منتشر كنيم . اين عمل توسط ابزار سايت [ جهت مشاهده لينك عضو شويد ! ] ميسر است .

21- اجزاء فرم به صورت گرافيكي : اگر ظاهر اجزاء فرم ها مثل دكمه هاي راديوئي و چك باكس ها براي شما دلپسند نيست ، در سايت [ جهت مشاهده لينك عضو شويد ! ] مي توانيد اين اجزاء را به صورت گرافيكي و زيبا در آوريد .

22- نقل و قول بالوني : چنانچه قصد درج توضيح و يا نقل و قول توسط CSS در صفحاتتان را داريد ،‌ مي توانيد در سايت [ جهت مشاهده لينك عضو شويد ! ] از هزاران نمونه ي آماده و زيبا بهره مند شويد .

23- گراف عمودي با CSS : ايجاد گراف براي بخش هاي آماري سايت هميشه مقوله اي اجتناب نا پذير مي باشد ، در سايت [ جهت مشاهده لينك عضو شويد ! ] مي توانيد به كمك CSS و PHP از گراف هاي دايناميك بهره بگيريد .

24- نمايش عكس ها با Loading : حتما" در سايت هاي حاوي عكس ديده ايد كه عكس كوچك نمايش داده شده و با كليك روي آن با افكت هاي مختلف و Loading عكس واقعي قابل مشاهده مي باشد . شما هم مي توانيد در سايت [ جهت مشاهده لينك عضو شويد ! ] اين ابزار را براي سايت خود فراهم كنيد .

25- ساخت Map با CSS : در سايت [ جهت مشاهده لينك عضو شويد ! ] به راحتي مي توانيد براي نقاط مختلف عكس خود لينك ؛ توضيح و ... درج كنيد . اين ويژگي همانند خاصيت Map در HTML مي باشد ، اما اين بار با CSS .

26- پيمايش پالتي : همانطور كه در عكس مشاهده مي كنيد ، اين سايت انواع و اقسام پيمايش هاي گرافيكي را به صورت پالت يا Tab در اختيار شما قرار مي دهد و از آدرس [ جهت مشاهده لينك عضو شويد ! ] قابل مشاهده مي باشد .

27- جداول درختي : در سايت [ جهت مشاهده لينك عضو شويد ! ] مي توانيد جداول درختي گرافيكي و دلخواه خود را توليد و استفاده كنيد .

28- متمايز نمودن لينك ها : همانطور كه مي دانيد لينك هاي سايت شما يا مربوط به سايت خودتان است و يا به سايتي غير از سايت شما اشاره مي كند . سايت [ جهت مشاهده لينك عضو شويد ! ] به شما مي گويد كه چگونه به صورت دلخواه ظاهر اين اينكها را از هم متمايز كنيد .

29- نسخه قابل چاپ : حتما" در برخي از سايت ها به عبارت "نمایش نسخه قابل چاپ" برخورد كرده ايد . اين نسخه همان اطلاعات را با ظاهري مناسب چاپ به شما نشان مي دهد . در آدرس [ جهت مشاهده لينك عضو شويد ! ] بيشتر با اين مقوله آشنا مي شويد .

30- بازگشت به بالاي هوشمند : در سايت هايي كه نياز با پيمايش زيادي دارند لينكي به نام "بازگشت به بالا" وجود دارد كه كاربر را بلادرنگ به بالاي صفحه هدايت مي كند ، اما اگر حجم صفحات آنقدر نباشد كه نياز به پيمايش كاربر باشد ، اين امر نياز نيست . سايت [ جهت مشاهده لينك عضو شويد ! ] ابزاري را فراهم مي آورد كه با توجه به حجم صفحه لينك "بازگشت به بالا" را براي كاربر نشان مي دهد .

31- بزرگ نمايي عكس ها : توسط ابزار سايت [ جهت مشاهده لينك عضو شويد ! ] مي توانيد سايز اصلي عكس هاتان را با كليك يا آوردن ماوس روي آن را به همراه جلوه هاي ويژه به نمايش بگذاريد .

32- ليست هاي فانتزي : در سايت [ جهت مشاهده لينك عضو شويد ! ] مي توانيد ليست هاي دلخواه و فانتزي خود را توليد و در سايت خود نمايش دهيد . لازم به ذكر است كه اين قابليت از CSS بهره مي گيرد .

33- ايجاد سايه با CSS3 : قابليت سايه در CSS3 باعث بروز زيبائي هايي مي شود كه با به كار بردن آن در عكس يا متن ها مي توان به آن پي برد ، با مراجعه به آدرس [ جهت مشاهده لينك عضو شويد ! ] بيشتر با اين مقوله آشنا خواهيد شد .

34- جداول با قابليت باز و بسته شدن : همانطور كه در انجمن هاي فارس وب مي بينيد ، هر پست قابليت باز و بسته شدن دارد و با استفاده از كوكي هاي جاوا اسكريپت در مراجعات بعدي هم به همان حالت انتخابي شما نشان داده مي شود . در سايت [ جهت مشاهده لينك عضو شويد ! ] مي توانيد اين گونه جداول را به صورت دلخواه را بسازيد .

35- جعبه ي 3 بعدي CSS : در آدرس [ جهت مشاهده لينك عضو شويد ! ] به صورت 3 بعدي روابط بين خواص padding ، border و margin و نحوه ي استفاده بهينه آنها را در CSS كاملا" تشريح شده است . مشاهده ي اين ابزار يادگيري را به تازه كار ها توصيه مي كنم .

36- پنجره هاي شناور : توسط اين ابزار واقع در آدرس [ جهت مشاهده لينك عضو شويد ! ] قادر خواهيد بود پنجره هاي شناور شخصي شده با قابليت هاي جابه جا كردن ، بستن ، چسبيدن به ستون و ... ايجاد نمائيد .

37- دكمه هاي فانتزي : در سايت [ جهت مشاهده لينك عضو شويد ! ] مي توانيد دكمه هاي ثبت (Submit ) فانتزي با پشت زمينه و حاشيه دلخواه ايجاد و در صفحات سايت خود استفاده نمائيد .

38- ميني فلش آلبوم : سايت [ جهت مشاهده لينك عضو شويد ! ] پس از ثبت نام قابليتي را براي شما فراهم مي كند كه عكس هاي خود را در يك آلبوم كوچك با فرمت swf و افكت هاي زيبا در سايت يا بلاگ خود به نمايش در آوريد .

39- درصد بارگزاري : چنانچه به يك نشانگر موقعيت لود نيازمنديد ، سايت [ جهت مشاهده لينك عضو شويد ! ] آيتم هاي خوبي را با استفاده از CSS براي شما فراهم مي كند .

40- خطوط افقي : تاكنون خطوط افقي را با تگ <hr> ايجاد مي كرديم ، اما گويا سايت [ جهت مشاهده لينك عضو شويد ! ] پيشنهادات بهتري جهت ايجاد خطوط افقي فانتزي با CSS دارد .

41- پخش كليپ : شما با ثبت نام در سايت [ جهت مشاهده لينك عضو شويد ! ] مي توانيد فيلم ها و كليپ هاي خود را توسط پخش كننده اي مجهز و شكيل در سايت خود به نمايش بگذاريد . لازم به ذكر است كه اين ابزار از اكثر فرمت ها از جمله فايل هاي موبايل پشتيباني مي كند .

42- سيستم امتياز دهي : در خيلي از مطالب مي بينيم كه بخشي تحت عنوان امتياز دهي قرار دارد كه توسط كاربران امتياز دهي مي شود . اين ابزار را مي توانيد براي تك تك پست ها و حتي وبلاگها استفاده كنيد . اين سيستم در وسايت [ جهت مشاهده لينك عضو شويد ! ] به صورت رايگان موجود مي باشد .

43- چارت مدرج با CSS : چنانچه شما جهت سيستم هاي آمارگيريتان به همچنين چارتي نيازمنديد ، ابزار موجود در سايت [ جهت مشاهده لينك عضو شويد ! ] نياز شما را رفع مي كند . اين چارت بي نياز از سيستم سمت سرور بوده و به صورت پويا عمل مي كند .

44- پيش نمايش صفحات لينك ها : شما هم در سايت خود لينكهاي دوستان و همكاران خود را جهت نمايش قرار داده ايد . ابزار سايت [ جهت مشاهده لينك عضو شويد ! ] به بينندگان سايتتان اين اجازه را مي دهد كه قبل از مراجعه به سايت هاي ديگر ، پيش نمايش آن را به صورت عكش مشاهده كنند .

45- نمايش توضيحات با ماوس : با مراجعه به آدرس [ جهت مشاهده لينك عضو شويد ! ] مي توانيد توضيحات خود را با افكت هاي مختلف و با آوردن ماوس روي هر چيزي درج كنيد . اين قابليت فقط با استفاده از CSS و HTML فراهم مي شود .

46- ادغام گر فيدها : در سايت [ جهت مشاهده لينك عضو شويد ! ] مي توانيد چند فيد دلخواه خود را ادغام و يك خروجي واحد بگيريد . جداي مزيت در دست داشتن آخرين مطالب محبوبتان ، مي توانيد آنها را در سايت خود نمايش دهيد . خروجي اين فيد نيز به ترتيب آخرين مطلب نمايش داده مي شود . لازم به ذكر است كه اين ابزار از خروجي فيدهاي Atom ، RSS ، RDF پشتيباني مي كند .

47- مجموعه كد هاي CSS : در آدرس [ جهت مشاهده لينك عضو شويد ! ] مي توانيد مرجع كاملي از كدهاي CSS را بيابيد كه در آن تمام دستورات و ويژگي آنها را در مجموعه اي گرد هم آمده اند . اين مجموعه با استفاده از مثال ها و مدل هاي مجازي به تشريح انواع CSS پرداخته است .

48- مبدل متن به صوت : با استفاده از سايت [ جهت مشاهده لينك عضو شويد ! ] مي توان متن هاي انگليسي سايت يا وبلاگ را به يك فايل صوتي تبديل كرد . اين ابزار با خروجي فيد RSS كار مي كند . شايد خواندن محتويات مطالب براي بازديد كنندگان جالب باشد !

49- نقشه جهان : با مراجعه به آدرس [ جهت مشاهده لينك عضو شويد ! ] شما هم مي توانيد نقشه ي جهان را با قابليت گشت و گذار و كليك در هر نقطه به همراه توضيحات آن سرزمين را در سايت خود داشته باشيد ؛ ناگفته نماند كه اعم كدهاي اين سسيتم بر پايه ي CSS طرح ريزي شده است .

50- Tab هايي با CSS : در سايت [ جهت مشاهده لينك عضو شويد ! ] ابزاري وجود دارد كه نياز شما را از بابت انواع و اقسام منوهاي تب مانند برطرف مي كند . كار با اين ابزار بسيار ساده بوده و توسط آن قادر خواهيد بود Tab هاي افقي و عمودي را با استفاده از ليست و سي اس اس بدون دانش وب به سرعت خلق كنيد .

توضيح : به دليل تسريع در بارگزاري صفحه و دسترسي ساده تر اعضاي فارس وب ، اين مقاله را به 2 بخش تقسيم مي كنم . شما مي توانيد ادامه ي اين مبحث را از آدرس [ جهت مشاهده لينك عضو شويد ! ] پيگيري نماييد.

---

این مقاله آموزشی برای اولین بار در فارس وب و به زبان شيرين فارسي نوشته شده است . لطفا" با کپی های بدون منبع مطالب ، زحمات نویسنده ی آن مطلب را خدشه دار نکنید .

حیفم اومد فقط به دکمه ی تشکر اکتفا کنم! واقعا" مرسی!
مدت ها بود دنبال خیلی هاش میگشتم...