שיחת משתמש:קיפודנחש/מצגת תמונות 2.0

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

מצגת תמונות 2.0

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

{{מצגת גלריה|פרמטר=ערך|...}}

<gallery>
קובץ:קובץ 1|כיתוב תמונה ראשונה
קובץ:קובץ 2|כיתוב תמונה שנייה
קובץ:קובץ 3|כיתוב תמונה שלישית
....
</gallery>

{{סיום מצגת גלריה}}

הסיבה לפיצול לשתי תבניות היא כדי שתג gallery עצמו יהיה מחוץ לתבנית. יש סיבות טכניות טובות למה עדיף שהתג יהיה מחוץ לתבנית.

סטטוס

כרגע יש סקריפט שעובד עם פונקציונליות מלאה של מצגת:

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

מה נשאר לעשות

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

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

איך אפשר להשתתף ולעזור

כדי להשתתף בפרויקט עליכם לעשות שני דברים:

1. להוסיף למיוחד:הדף שלי/common.js את השורה הבאה:

   importScript('משתמש:קיפודנחש/gallery-slideshow.js');
   

2. להעתיק לדף משנה במרחב המשתמש שלכם (נניח, מיוחד:הדף שלי/מצגת תמונות 2.0) את תוכן הדף משתמש:קיפודנחש/מצגת תמונות 2.0. הכי קל זה לפתוח טיוטה חדשה, ולשמור שם שורה אחת: {{ס:משתמש:קיפודנחש/מצגת תמונות 2.0}}.
3. לפתוח את דף המשנה שיצרתם, ולהתחיל לשחק עם הפונקציונליות (לחיצה על הכפתורים השונים, התמונות עצמן בצידן השמאלי, הימני והמרכזי וכן הלאה).
4. להיכנס לדף במצב "עריכה" ולהתחיל לעצב.
5. לבקש ולקבל משוב ממשתתפים אחרים לגבי העיצוב. אפשר כמובן גם לדון בשינויים לפונקציונליות עצמה.
6. לדווח על בגים ותקלות, וכן להציע שיפורים לסקריפט עצמו.

sneak peek

1. בצעו את (1) מהסעיף הקודם
2. פיתחו את דף התוכן הצמוד לדף השיחה הזה.

under the hood

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

האלמנטים השונים במצגת מובדלים בעזרת מחלקות css ולא באמצעות id. זה נעשה כדי לאפשר שימוש במספר מצגות באותו הדף (id חייב להיות יחידני). תוכלו להזיז את האלמנטים השונים, ואפילו לשנות את סוג האלמנט (למשל בין div ו-span), כל זמן שאינכם נוגעים במחלקה.

יש אלמנטים שמשמשים template עבור האלמנט שיהיה בשימוש בפועל: אלו הם האלמנטים המשוכפלים עבור כל תמונה. העיקרי בהם הוא מהמחלקה "gallery-slideshow-slide". אלמנט זה יכיל אלמנט אחד מהמחלקה "gallery-slideshow-slide-image", ואלמנט נוסף מהמחלקה "gallery-slideshow-slide-caption" (בדף הדוגמה הכיתוב הוא מעל התמונה, אבל זה כמובן תלוי במעצבת). הכיתוב עצמו "מודבק" לאלמנט עוטף הכיתוב, והתמונה מודבקת לעוטף התמונה.

אלמנט נוסף המשמש template הוא האלמנט מהמחלקה "gallery-slideshow-radio". באלמנט הזה יש משהו ייחודי: אם תוכן האלמנט מכיל את המחרוזת $NUM, המחרוזת הזו תוחלף במספרי התמונות. בנוסף, לעותקים של האלמנט הזה נוספת (ומוסרת) המחלקה "gallery-slideshow-radio-selected", כך שבכל רגע, בדיוק לאחד העותקים (זה למתאים לתמונה שמוצגת כרגע) יש את המחלקה הזה. בדף הדוגמה המחלקה הזו מביאה אתה רקע צהוב, אבל זה נעשה רק לצורך הדגמת הפונקציונליות, וכמובן עיצוב טוב יסמן זאת אחרת. (גם ההופעה עצמה של הכפתורון, בצורת «מספר» נעשתה רק לצורך הדגמה).

גודל התמונות שהמצגת מציגה הוא לפי מה שהחליטה הרחבת הגלריה עצמו (כלומר נשלט על ידי פרמטרים heights ו-widths, כמו שמוסבר בעזרה:גלריית תמונות). כנראה מצגת טובה תשתמש בתמונות שלכולן אותו aspect ratio (או לפחות קרוב מספיק כדי לא ליצור בעיות), אבל הסקריפט עצמו לא מתערב בזה; הדוגמה (בדף התוכן הצמוד לדף זה) לא שומרת על הכלל הזה. חלק מהעיצוב צריך לקחת בחשבון את גודל התמונות הרצוי (אם על ידי קביעת מספרים "טובים", או על ידי יצירת עיצוב שעובד טוב עם גדלים שונים).

ניתן לשנות את קצב המצגת, על ידי הוספת השורות הבאות למיוחד:הדף שלי/common.js, ומשחק עם המספרים.

window.GSL_delay = 4000;
window.GSL_fadein = 800;
window.GSL_fadeout = 800;

כל המספרים במילישניות. הראשון הוא הזמן בין החלפות, והשני והשלישי מורים את הזמן שלוקח לתמונה הקודמת להיעלם ולחדשה להופיע. מסיבות טכניות כרגע אם תרשמו 0 הסקריפט ישתמש בברירת המחדל, אז אם אתן רוצות החלפה מיידית, השתמשו ב-1. לדוגמה, אם תרצו לנסות החלפה כל 5 שניות ללא אפקט "החלפה רכה", השתמשו ב-5000 ערך הראשון ו-1 לשני הבאים. חשוב שסכום שני המספרים האחרונים יהיה משמעותית פחות מהראשון.

מה הלאה

אם יימצאו מתנדבים שייצרו עיצובים שיהפכו את המנוע הערום הזה (כלומר הסקריפט) למכונית פאר (כלומר תבנית מצגת אטרקטיבית), נארוז את העיצוב(ים) המוביל(ים) בתבניות מתאימות, עם או בלי פרמטרים, נדגים זאת לקהילה ונשאל האם כדאי להשתמש בכלי הזה בערכים בוויקיפדיה העברית, ובאילו עיצובים להשתמש.