יום שבת, 2 במרץ 2013

המדריך למצגות מבוססות ווב בטכנולוגיית HTML5


עד לא מזמן, הצעד הראשון בכתיבת מצגת היה הפעלה של תוכנת מצגות (Power Point, Keynote או LibreOffice - הבחירה בידכם). תוכנות אלו עזרו לנו לסדר את הטקסט בצורה של שקפים, להדביק ציורים לעצב ולבסוף גם להקרין את המצגת אל מול קהל. 
לצד היתרונות הגדולים בשימוש בכלים אלו, יש גם מספר חסרונות: המצגת נשמרת כקובץ PowerPoint או Keynote, ולכן אתם חייבים את אותה תוכנת מצגות כדי לערוך אותה בעתיד, מעקב אחר שינויים בין גרסאות של מצגות הוא מורכב וגם יכולות שיתוף הקהל במהלך המצגת מוגבלות, ודורשות שלקהל תהיה מותקנת אותה תוכנת מצגות. 

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

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

1. איך נראית מצגת מבוססת ווב


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

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

2. איך מתחילים


הדרך הכי קלה להתחיל היא למזלג את המאגר של reveal.js בגיטהאב. הספרייה מאפשרת כתיבה של תוכן המצגת בתוך קובץ index.html בפורמט HTML או Markdown. אפשרות נוספת היא הוצאת תוכן המצגת לקובץ נפרד (או אף פיצולו למספר קבצים). אני אבחר באפשרות השנייה, מאחר והיא קלה יותר לתחזוקה.
מבחינת פורמט אתם יכולים לבחור בין HTML ל Markdown. מאחר ומדובר בטקסט למצגת אני מעדיף ללכת על פורמט Markdown שהוא קריא יותר, גם אם מסתכלים על הטקסט לא מתוך דפדפן. 

הנה דוגמא לקובץ Markdown המתאר מצגת פשוטה:
# Introducing reveal.js
A web based presentation framework



## Features
* Really cool
* Easy to write
* Markdown FTW

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

כדי להכניס את התוכן שתואר למעלה למצגת עליכם לבצע:
1. הזינו את התוכן לקובץ, לצורך הדוגמא נקרא לו slides.md
2. עדכנו את הקובץ index.html על ידי שינוי תוכן האלמנט <div class="slides"> שיכלול אך ורק את השורה:
<section data-markdown="slides.md" data-separator="^\n\n\n" data-vertical="^\n\n"></section>

3. עיצוב השקפים


האתגר הראשון שנתקלים בו כשעוברים לכתוב מצגת מבוססת ווב הוא העיצוב. בכל תוכנת מצגות אנו יכולים להזיז את התמונה, לשנות את גודל הטקסט ולשחק עם הקומפוזיציה של השקף עד שיראה טוב. ברגע שעוברים למצגת מבוססת ווב יש לכם סך הכל מספר מצומצם של תבניות לשקפים.
זה לא אומר שאין לנו כלל שליטה. reveal.js מגיעה עם אוסף תבניות (כולן בתיקייה css/theme), שיאפשרו שינוי מהיר של מראה המצגת. המבחר נחמד אך זה לא מספיק. 
כתיבת מצגת רצינית תדרוש בדרך כלל הוספת קובץ CSS משלכם, שיאפשר עימוד של טבלאות, גרפים, איורים ואף טקסטים במידת הצורך — מאחר ומדובר בווב אין בעייה להוסיף קובץ כזה.

בחירת Theme והוספת קובץ ה CSS שלכם מתבצעת על ידי שינוי קישורי ה CSS בקובץ index.html. השורה הרלוונטית עבור שינוי theme היא:
<link rel="stylesheet" href="css/theme/default.css" id="theme">

4. הוספת איורים


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

אם שמרתם את התמונה בתיקיית img וקראתם לקובץ diagram.png, הוספת התמונה ל slides.md נראית כך:
![alt text for image](img/diagram.png)

5. וקטנה לסיום


ניתן למצוא דוגמא שלי שעדיין בעבודה למצגת וובית בעמוד הגיטהאב:

עקב באג ב reveal  (שלחתי כבר בקשת משיכה) לא ניתן להוסיף תגיות HTML רגילות לקובץ Markdown חיצוני. אם אתם צריכים את היכולת הזו אפשר להסתכל על הפתרון במיזלוג שלי או למזלג ממני. שם גם תוכלו למצוא את קובץ ה CSS שאני השתמשתי כתוספות ל Theme, ביטול של אנימציות במעברי השקפים ושינוי Theme ברירת המחדל. 

כתבתם מצגת מבוססת ווב ורוצים לספר עליה ? נו, בשביל מה יש למטה מקום לתגובות...

אין תגובות:

הוסף רשומת תגובה