هذه المحاضرة ألقيت في جامعة الملك سعود لكلية علوم الحاسب للبنات في الرياض في ديسمبر 2009 بالتعاون مع الدكتورة هند الخليفة. شرحت في هذه المحاضرة تجربتي في بناء خدمات الويب و النصائح و الدروس التي استفدتها من التجارب.

1. ‫بناء تطبيقاث ويب 0.2‬
‫دروس ٍستفادة و نصائح ٍىجهت‬
‫م. صالح الزيد‬
‫مطور موقع ‪Untiny‬‬
‫و صاحب موقع ‪TwtBase‬‬

2. ‫نقاط اىَحاضرة‬
‫• تعريف بخدمة ‪ Untiny‬العالمية‬
‫• بناء تطبيقات ويب 0.2‬
‫– عن الويب 0.2‬
‫– التقنيات و المفاهيم‬
‫– تطبيقها على ‪Untiny‬‬
‫– نصائح لبناء تطبيق ويب 0.2‬

3. ‫‪Untiny‬‬
‫• خدمة ويب 0.2 السترجاع الروابط الطويلة األصلية من‬
‫الروابط القصيرة المختصرة‬
‫• مثال لرابط طويل‬
‫‪http://en.wikipedia.org/wiki/King_Abdulaziz_Internatio‬‬
‫‪nal_Airport‬‬
‫• مثال لرابط مختصر للرابط الطويل‬
‫‪http://tinyurl.com/yj547qz‬‬

4. http://TinyURL.com

6. ‫أٍثيت عيً خذٍاث اختصار اىعنىاين‬
http://bit.ly •
http://is.gd •
http://rb6.me •
http://flic.kr (flickr.com) •
http://wp.me (wordpress.com) •
‫هناك آالف من خدمات اختصار العناوين اليوم. لماذا؟‬ •

8. ‫ىَارا ‪ Untiny‬؟‬
‫• يقوم ‪ Twitter‬بتحويل اتوماتيكي للعناوين الطويلة المكتوبة‬
‫إلى عناوين قصيرة يسهل نشرها.‬
‫• كان ‪ Twitter‬يستخدم خدمة ‪ TinyURL.com‬لتحويل‬
‫العناوين، و هذه خدمة ‪ TinyURL‬حجبت في السعودية‬
‫الستخدامها في تجاوز البروكسي.‬

9. http://tinyurl.com/yj547qz

11. ‫هو ‪ Untiny‬ىيَستخذٍين اىسعىديين فقظ؟‬
‫• ال!‬

12. ‫استخذاً عاىَي ىيخذٍت‬
‫• هناك خدمات اختصار عناوين محجوبة في دول أخرى‬
‫(‪ bit.ly‬محجوبة في الصين)‬
‫• تم استخدام ‪ Untiny‬كأداة للكشف العناوين المزورة (الروابط‬
‫الفايروسية)‬

13. ‫انجازاث ‪Untiny‬‬
‫• أكثر من 000,000,5 رابط تم استرجاعه حتى االن‬
‫• أكثر من 000,02 عملية استرجاع يوميا‬
‫• أكثر من عشرة إضافات و برمجيات تعمل على ‪Untiny‬‬
‫اعتمادا على الواجهة البرمجية‬

14. ‫أمثر ٍن 003 ٍقاه بَختيف اىيغاث‬

15. ‫و في أشهر اىَىاقع اىتقنيت‬

16. ‫بناء تطبيقاث ويب 0.2‬
‫• عن الويب 0.2‬
‫– مجموعة من التقنيات و المفاهيم التي تصف جيل جديد من مواقع‬
‫االنترنت و طريقة استخدامها‬
‫– مصطلح فضفاض!‬

17. ‫اىتقنياث‬
‫• ‪( RSS‬الخالصات)‬
‫• ‪( Ajax‬لتحديث جزء من صفحة الموقع دون تحديثها كاملة)‬
‫• ‪( CSS‬لتصميم الصفحات)‬

18. ‫اىَفاهيٌ‬
‫• ‪( API‬الواجهة البرمجية)‬
‫• ‪( Usability‬قابلية االستخدام)‬
‫• المشاركة الجماعية (المستخدمون مساهمون)‬

19. ‫تطبيق اىتقنياث عيً ‪Untiny‬‬
‫• ‪Ajax‬‬
‫– في إظهار النتيجة بسرعة دون الحاجة لتحديث الصفحة‬
‫• ‪CSS‬‬
‫– في ظهور الموقع بشكل توافقي على جميع المتصفحات‬
‫– ظهوره بالتصميم المناسب باللغة العربية أو االنجليزية‬

21. ‫تطبيق اىَفاهيٌ عيً ‪Untiny‬‬
‫• ‪API‬‬
‫– تزويد الموقع بواجهة برمجة تقوم بوظيفتين:‬
‫• ‪ extract‬و هي تقوم باسترجاع العنوان األصلي‬
‫• ‪ services‬و تقوم بسرد مواقع االختصار المدعومة من ‪Untiny‬‬
‫– إعطاء النتائج بثالث صيغ: ‪ ،JSON ،XML‬و ‪Text‬‬

22. http://untiny.com/api/1.0/extract/?url=http://is.gd/123&format=text

23. http://untiny.com/api/1.0/extract/?url=http://is.gd/123&format=xml

24. ‫تطبيق اىَفاهيٌ عيً ‪Untiny‬‬
‫• ‪Usability‬‬
‫– إظهار المعلومات بشكل بسيط‬
‫– إمكانية استخدام الموقع بأكثر من طريقة‬
‫– التحديد المباشر‬
‫• تم استخدام مكتبة الـ ‪ jQuery‬في التصميم‬

25. ‫إظهار اىَعيىٍاث بشنو بسيظ‬

26. ‫إٍنانيت استخذاً اىَىقع بأمثر ٍن طريقت‬
‫• ال داعي لزيارة ‪ Untiny‬للحصول على النتيجة‬
‫• يمكنك مباشرة من المتصفح كتابة العنوان التالي:‬
‫321/‪http://untiny.com/?url=is.gd‬‬

27. ‫اىتحذيذ اىَباشر‬

28. ‫تطبيق اىَفاهيٌ عيً ‪Untiny‬‬
‫• المشاركة الجماعية‬
‫– المستخدمون مساهمون في أرشفة العناوين القصيرة و الطويلة‬
‫• تمت أرشفة أكثر من 000,005,1 عنوان من قبل المستخدمين‬
‫– تطوير تطبيقات و برامج لـ ‪ Untiny‬من قبل الغير‬
‫• أكثر من عشرة برامج لـ ‪ Untiny‬تم تطويرها من قبل آخرين‬
‫• إحدى إيجابيات الـ ‪API‬‬
‫– تضمين ‪ Untiny‬ضمن برامج آخرى‬

29. ‫‪ٍ UntinyFox‬ن تطىير ٍتطىع‬

30. ‫تضَين ‪ Untiny‬ضَن براٍج أخري‬

32. ‫نصائح ىبناء تطبيق ويب 0.2‬
‫ابحث عن مشكلة‬ ‫•‬
‫جد حل تقني بسيط‬ ‫•‬
‫اجعل الحل سهل االستخدام و ذو تصميم بسيط‬ ‫•‬
‫زود التطبيق بـ ‪!API‬‬ ‫•‬
‫ضع واجهة انجليزية للتطبيق‬ ‫•‬
‫سوقيه في الشبكات االجتماعية!‬ ‫•‬
‫ال تتوقف، ضف المزيد من الخدمات و الخصائص و‬ ‫•‬
‫التسهيالت‬

33. ‫يَننل صنع تطبيق مَا فعو غيرك‬

34. ‫شكرا لكم ‪‬‬
‫األسئلة و النقاشات‬