ישנן דרכים רבות ושונות ליצור מצגות עבור מצגת ב- Linux. אתה יכול להשתמש OpenOffice, LibreOffice או אפילו Microsoft Office (דרך יין). המצגת שהושלמה תהיה בפורמט .odp (פורמט OpenDocument) או .ppt (PowerPoint), שבו אתה משתמש באמצעות הסוויטות שצוינו לעיל (או אפליקציית הצופה) כדי להציג את המצגת. מבלי להתקין את התוכנה המתאימה, לא ניתן להציג את המצגת. זה לא יהיה נהדר אם אתה יכול ליצור מצגת שפועלת בדפדפן אינטרנט, מצגת שנבנו באמצעות HTML, Javascript ו- CSS? תודה להרשים, אתה יכול!

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

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

כדי להתחיל, להוריד impress.js מ github. הדרך הפשוטה ביותר היא להפעיל את הפקודה הבאה משורת הפקודה:

 wget https://github.com/bartaz/impress.js/archive/master.zip

ולפתוח את זה:

 unzip master.zip

בתוך התיקייה "מרשים". יש שתי תיקיות משנה - CSS ו- JS, המכילות את קבצי ההופעות של CSS ו- JavaScript. אתה באמת לא צריך להתעמק בתיקייה Javascript, אולם התיקייה CSS מכיל את קובץ הדגמה CSS אשר ייתכן שתרצה לשנות עבור המצגות שלך. כמו כן, תוכל למצוא דוגמא להרשם. Js בקובץ index.html. באמצעות נאוטילוס, לפתוח את התיקייה "מרשים.המאסטר" ולחץ פעמיים על index.html. פעולה זו תפתח את דפדפן האינטרנט המשמש כברירת מחדל (בתקווה, ב- Firefox או ב- Chrome) ולהתחיל את המצגת.

הנה כיצד לבנות מצגת פשוטה המבוססת על קובץ CSS לדוגמה ("css / impress-demo.css") שסופק עם impress.js. יצירת קובץ HTML באמצעות עורך טקסט. ייתכן שתרצה להשתמש בעורך טקסט כמו gEdit, או שאתה יכול ליצור את זה באמצעות ננו בשורת הפקודה ככה:

 ננו demo1.html

הכנס את הקוד הבא לקובץ ולאחר מכן שמור ויוצא (CTRL-X).

 הכל על impress.js הכל על impress.js impress.js הוא חזק CSS ו- JavaScript מסגרת המצגת. הכל על impress.js זה מספק את כל הספריות וקבצי CSS הדרושים כדי ליצור מצגות מורכבות ויזואלית מעוררות השראה באמצעות HTML הכל על impress.js למידע נוסף על http://bartaz.github.io/impress.js הופעות (). ();

כל קבצי HTML מחולקים לקטעים המתחילים בתג פתיחה (לדוגמה) וסוגרים עם אותו תג אך עם קו נטוי נוסף (למשל). בתוך הקטע "" התג "" מגדיר איזה קובץ CSS יש להשתמש בו (כלומר css / impress-demo.css). ככל שתתקדם עם impress.js, יהיה עליך ליצור קובץ CSS משלך.

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

כל שקופית יש נתונים x ו- data y תכונה אשר מגדיר את המיקום שקופיות. ערך y נשאר זהה עבור שלוש השקופיות, אך ערכי x משתנים. זה מתחיל עם -1000 ולאחר מכן עובר ל 0 ולבסוף 1000. התוצאה היא כי השקופיות יעברו משמאל לימין כמו המצגת מתקדמת. על ידי שינוי ערכי x ו- y אתה יכול לקבל את השקופיות המעבר בכל כיוון שאתה אוהב.

בסוף קובץ HTML שני קווים אשר לטעון את script.js להרשים ולאחר מכן לאתחל את הספרייה. (לדוגמה, ).

כדי לבדוק את הקובץ, לחץ לחיצה כפולה על demo1.html מתוך Nautilus.

הופעות.העברים יכולים לכלול גם סיבוב. הוסף שקף זה למצגת שלך:

 הכל על הופעות. סיבוב!

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

תכונה מעניינת נוספת היא נתונים בקנה מידה (כלומר זום). זה יכול לתת המצגת שלך בסגנון 3D על ידי התקרבות פנימה והחוצה של הבד כמו התקדמות המצגת.

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

 זום, וגם זה לא נראה כמו שקופית

יש כמה דברים שראוי לשים לב לשקופית האחרונה. ראשית הוא משמיט את "שקופית" בכיתה. משמעות הדבר היא כי השקופית תוצג ללא רקע לבן כפי שהוגדר בקובץ CSS לדוגמה. שנית, שים לב לערכים של סיבוב נתונים ונתונים. התכונה סיבוב נתונים מביאה את הבד חזרה ל -0 מעלות (החל מסובב 90 מעלות בשקופית הקודמת). התכונה 'קנה מידה של נתונים' הופכת את ה'תרשים 'לביצוע זום במהלך המעבר. כדי לראות כיצד הוא נראה, בדוק את המצגת בדפדפן שלך.

עכשיו שיש לך שליטה כמה שקופיות פשוטות, נסה לקרוא דרך index.html ו "css / impress-demo.css" כדי לראות איך ההדגמה בנויה. לקובץ index.html יש הערות רבות שינחו אותך באמצעות האלמנטים והשיעורים השונים.

אם יש לך שאלות לגבי הדוגמאות שניתנו, השתמש בקטע ההערות למטה ואנו נראה אם ​​נוכל לעזור.