‫Htm - אחלה טיפים לבניית אתרים » מתנה‬ http://www.htm.co.il ‫מדריכים ומאמרים בנושא בניית אתרים. כל יום משהו חדש ללמוד, וליישם.‬ Wed, 18 Jan 2012 09:32:13 +0000 http://wordpress.org/?v=2.9.2 il hourly 1 ‫שיתוף תכנים בגרירה‬ http://www.htm.co.il/2009/10/14/%d7%a9%d7%99%d7%aa%d7%95%d7%a3-%d7%aa%d7%9b%d7%a0%d7%99%d7%9d-%d7%91%d7%92%d7%a8%d7%99%d7%a8%d7%94/ http://www.htm.co.il/2009/10/14/%d7%a9%d7%99%d7%aa%d7%95%d7%a3-%d7%aa%d7%9b%d7%a0%d7%99%d7%9d-%d7%91%d7%92%d7%a8%d7%99%d7%a8%d7%94/#comments Wed, 14 Oct 2009 09:22:46 +0000 ‫אורן רוט‬ http://www.htm.co.il/?p=680

שיתוף תכנים היא אחת המאפיינים של רשת האינטרנט, הכל משותף. ראית משהו יפה או מעניין, כנראה זה כבר בדרך לרשימת התפוצה שלך במייל, מפורסם בפייסבוק או שלחת טוויט בנושא. בתור בעלי אתרים, יש לנו אינטרס גדול מאוד להגדיל את שיתוף התכנים מתוך האתר שלנו. המתמטיקה פשוטה, יותר שיתוף = יותר כניסות לאתר. באמצעות התמאת הקוד שאני אתן לכם כאן, תוכלו להוסיף class וכותרת לקטעי וידאו או תמונות ובאמצעות קוד jQuery יתווסף לשונית קטנה בשם: "שתף בגרירה!", לכל וידאו או תמונה.

שיתוף תכנים באמצעות גרירה

שיתוף תכנים באמצעות גרירה

את הרעיון לסקריפט הזה שאבתי מאתר meebo. הם יצרו סקריפט דומה (קצת יותר משוכלל) שמאפשר לשתף בגרירה, שלחתי להם מייל בבקשה לקבל את הקוד לשימוש באתר שלי, אך הם סירבו לעת עתה. לא יכלתי לבזבז זמן אז פשוט החלטתי לבנות את הסקריפט בעצמי ובעברית.
אם תסתכלו בדוגמא, תוכלו לראות שמעל לסרטון ישנה תווית קטנה שאומרת, "שתפו בגרירה!". כאשר ננסה לגרור את התווית, המסך יוחשך ויופיע תפריט עם ארבע אפשרויות: טוויטר, פייסבוק, גוגל ואימייל. עם נשחרר את התווית שגררנו על כל אחת מן האפשרויות, תפתח לנו לשונית חדשה בדפדפן שמציגה את מסך השיתוף של האתר הנבחר, כל השדות של השיתוף כבר מוזנים כל שנותר על המשתמש לעשות הוא ללחוץ שלח.

איך מטמיעים את הקוד

דבר ראשון שצריך לעשות הוא להוריד את כל קבצי הקוד מהקישור כאן הוא למעלה (קוד). לאחר שנפתח את קובץ ה-rar נראה שמה שהקבצים שהורדנו הם:

  • dragShare.js
  • dragShare.css
  • קובץ html
  • תיקיית js
  • תיקיית תמונות

על מנת שהקוד יפעל, אנו צריכים לטעון לתוך האתר שלנו את תיקיית ה-JS וכמו כן את שתי הקבצים הראשונים (קובץ JS וקובץ CSS).

1
2
3
4
5
6
7
8
9
//ספריות jQuery  
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.draggable.js"></script>
<script type="text/javascript" src="js/ui.droppable.js"></script>

//שני הקבצים הראשונים
<script type="text/javascript" src="dragShare.js"></script>
<link rel="stylesheet" type="text/css" href="dragShare.css" />

ארבעת קבצי ה-JS הראשונים בגררנו הם (לפי הסדר): ספריית jQuery, ספריית UI של jQuery, ספריית גרירה וספריית השמטה. לאחר מכן טענו את קוד ה-JS שאני הכנתי (חשוב מאוד לשמור על סדר הטעינה הזה).

האמת שאנחנו ממש קרובים לסוף, לאחר שטענו את הקבצים החיוניים, כל שעלינו לעשות הוא למצוא אלמנט מסוג object או img ולהוסיף לו שני משתנים: class ו-title.

1
<object class="share" title="שיתוף תכנים באמצעות גרירה" ...>

בדוגמא זו הוספנו תווית גרירה לאלמנט של וידאו, object. המאפיין class צריך להכיל את הערך "share" והמאפיין title צריך להכיל את הכותרת המתאימה לתוכן המשותף (כותרת זו תוצג כאשר ישתפו את התוכן).

זה הכל! כעת לאחר טעינת העמוד, קוד jQuery יעבור אוטומטית על כל האלמנטים שמכילים class="share" ויוסיף להם תווית גרירה.
תטמיעו את הקוד באתרכם ותזמינו את המבקרים באתרכם לשתף בגרירה.

עוד באותו נושא:

]]> http://www.htm.co.il/2009/10/14/%d7%a9%d7%99%d7%aa%d7%95%d7%a3-%d7%aa%d7%9b%d7%a0%d7%99%d7%9d-%d7%91%d7%92%d7%a8%d7%99%d7%a8%d7%94/feed/ 5 ‫שנה נהדרת!‬ http://www.htm.co.il/2009/09/20/%d7%a9%d7%a0%d7%94-%d7%a0%d7%94%d7%93%d7%a8%d7%aa/ http://www.htm.co.il/2009/09/20/%d7%a9%d7%a0%d7%94-%d7%a0%d7%94%d7%93%d7%a8%d7%aa/#comments Sun, 20 Sep 2009 19:05:53 +0000 ‫אורן רוט‬ http://www.htm.co.il/?p=487

כמובן שאני לא אוותר על התענוג לאחל לכולנו שנה טובה, השנה Htm.co.il נפתח ואני מאחל לכולנו שנה של למידה, הצלחה שגשוג ואושר.

חשבתי מה לתת לכם מתנה לכבוד החג ולבסוף החלטתי לתת לכם סט של אייקונים עשויים באילוסטריטור (100% חומר וקטורי).

במיוחד עכשיו בתקופת החג שעושים הרבה מאוד קניות, האייקונים האלה יוכלו לשרת אתכם.

זה הלינק להורדה (לצפייה באייקונים לחצו כאן)

שיהיה לכולנו חג שמח ושנה טובה!

עוד באותו נושא:

]]> http://www.htm.co.il/2009/09/20/%d7%a9%d7%a0%d7%94-%d7%a0%d7%94%d7%93%d7%a8%d7%aa/feed/ 0 ‫גלריית פלאש מתנה‬ http://www.htm.co.il/2009/09/10/%d7%92%d7%9c%d7%a8%d7%99%d7%99%d7%aa-%d7%a4%d7%9c%d7%90%d7%a9-%d7%9e%d7%aa%d7%a0%d7%94/ http://www.htm.co.il/2009/09/10/%d7%92%d7%9c%d7%a8%d7%99%d7%99%d7%aa-%d7%a4%d7%9c%d7%90%d7%a9-%d7%9e%d7%aa%d7%a0%d7%94/#comments Thu, 10 Sep 2009 10:17:46 +0000 ‫אורן רוט‬ http://www.htm.co.il/?p=303

היום החלטתי לצ'פר אתכם במתנה – גלריית פלאש שמובססת על בסיס נתונים של XML.

את הגלרייה השגתי מצוות אומנים מוכשר מאוד parker&kent – לקחתי את הגלריה עיברתתי אותה לגמריי (שתדעו לכם מאוד קשה לתרגם לעברית) ועכשיו היא מוכנה להורדה שלכם ולשימוש בכל פרוייקט שאתם צריכים גלריה.

היופי בגלרייה הזו היא שהיא ממש דינאמית ודרך קובץ settings.xml את יכולים לשנות את רוב הגדרות העיצוב. אתם יכולים לשים לב שבדוגמא שנתתי יש שתי גלריות ושתיהן מבוססות על אותו קובץ פלאש רק עם הגדרות xml שונות.

אז תהנו, אני אשמח לקבל פידבקים כאן בתגובות.

עוד באותו נושא:

]]> http://www.htm.co.il/2009/09/10/%d7%92%d7%9c%d7%a8%d7%99%d7%99%d7%aa-%d7%a4%d7%9c%d7%90%d7%a9-%d7%9e%d7%aa%d7%a0%d7%94/feed/ 14