עורך טקסט

1. כללי

2. החלפת עורך תוכן

למודל שני עורי תוכן עיקריים: ATTO ו-TinyMCE

בין העורכים יש מספר הבדלים:

יש אפשרות לבחור עם איזה עורך תוכן לעבוד:

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

• מחלון העדפות בחירה ב: העדפות עורך תוכן      
• בחלון העדפות עורך תוכן יש לבחור את העורך הרצוי בתפריט ולאשר   

 

3. עורך ATTO

עורך ATTO הוא עורך מלל פשוט. מרבית הכפתורים שלו מזכירים עורכי מלל מוכרים:   

כפתורי עיצוב הטקסט (הסבר מימין לשמאל) 

סגנון כותרת, טקסט עבה, טקסט נטוי , צבע גופן, צבע רקע טקסט     

רשימת נקודות, רשימת מספרים, הזחה (טאב) שמאלה וימינה   

קו תחתי, קו חוצה, טקסט תחתי, טקסט עילי     

 ישור: שמאל, אמצע, ימין     

קישור והתרת קישור    

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

עורך משוואות, הוספת סימן, הוספת טבלה, ניקוי עיצוב    

זרימת כיוון הטקסט שמאל, ימין    

בטל, שחזר   

בדיקת נגישות, "קריאת" התוכן (מציג מידע על העמוד – איזה לינקים יש, אלו תמונות וכו').     

עורך HTML  (לעריכת המלל בתגיות HTML)

3.1. שילוב תמונה ב-ATTO

הוספת תמונה:

ישהם שתי דרכים להוסיף תמונה לעורך הטקסט של ATTO:

1. על ידי גרירת התמונה מהמחשב לעורך הטקסט.

2. על ידי כפתור הוספת תמונה.

הוסםה על ידי גרירה:

• יש למקם את הסמן במקום הרצוי בטקסט
• לאתר את התמונה במיקום במחשב
• לגרור את התמונה על גבי מסך עורך הטקסט

הערה: כשמוספים תמונה על ידי גרירה היא מתווספת ללר שם חלופי

הוספה על ידי כפתור:

• מיקום הסמן במקום הרצוי בטקסט
• לחיצה על כפתור הוספת תמונה  
• בחלון Image Properties יש ללחוץ על Browse repositories

• יפתח חלון  בחירת קובץ (File Picker) ניתן לבחור את הקובץ ממספר מקורות (קבצים שהועלו לאחרונה, לינק משרת, מתיקיית הקבצים שלי במודל או להעלות מהמחשב) 
• לפני העלאת הקובץ חשוב לתת לו שם (שם שיוצג במקרה שהתמונה לא מוצגת). חשוב להדגיש שנתינת שם לתמונה היא אחת מההוראות של הנגשת אתר. 
• לאחר שמאשרים פעמיים (גם בחלון File Picker, וגם בחלון Image Properties) התמונה מוכנסת לעורך הטקסט.

עריכת תמונה

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

בחלון זה ניתן: 

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

לבסוף יש לשמור.

4. עורך TinyMCE

5. הוספת קובץ לעורך טקסט.

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

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

כיצד להוסיף קובץ טקסט

ישנן שתי אפשרויות:

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

• הקשה על מנהל הקבצים  
• איתור והעלאת קובץ. בסיום ההעלאה הקובץ יופיע במנהל הקבצים.

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

• איתור הקובץ הרצוי במאגרים
• לחיצה על כפתור "בחירת קובץ זה".

• בעורך הטקסט יוצר קישור לקובץ

6. הטמעת דף אינטרנט או קובץ

<iframe src="כתובת_האתר" width=" 1024 " height="768" </iframe>

7. הרשאות של קובץ מוטמע מ-Onedrive

במידה וסטודנטים אינם מצליחים לצפות בקובץ יש לשנות את הרשאות הגישה שלו ב-OneDrive

• פתיחת הקובץ
• לחיצה על תפריט Share בחלק הימני העליון של המסמך

• Manage Access
• בחלון השיתוף לחיצה על advance

• בחלון שיפתח לחיצה על Grant Permissions

• במשבצת מול invite People יש לכתוב Everyone except external users
• ללחוץ על Show Options

• לבטל Send an email invitation
• מהרשימה Select a permission level יש לבחור read

• לחיצה על Share
• מגיעים חזרה לחלון הגדרות הרשאות. ריענון החלון יציג ברשימה – Everyone except external users

8. הטמעת תמונה מ-Canva

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

ב-Canva

בחירת התמונה הרצויה

לחיצה על כפתור share, ואחר על הפתור More…

בחלון שיפתח יש לבחור embed

את טקסט ההטמעה (Embed) יש להעתיק. הטקסט הנכון מופיע בשורה הראשנה.

במודל

יש להיכנס לעורך טקסט (לכל המשאבים וגם לחלק מהפעילויות יש עורך טקסט.

בעורך הטקסט יש לעבור למצב HTML ולהדביק את הקוד הרצוי

9. הטמעה באחוזים

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

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

גודל פריים הטמעה נחתך במסכים מסויימים.

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

השיטה היא לפעול באופן הבא: 

ליצור div חיצוני ולתת לו את הפרמטרים הבאים

• position: relative
• width: 100%
• padding-top: 50%
• ניתן לשחק באחוזים: width:100% - ממלא את הרוחב של החלון - אפשר להקטין כדי שהתוכן יהיה יותר קטן. padding-top:50% - קובע את היחס בין הרוחב לגובה - במקרה הנוכחי הרוחב יהיה כפול 2 מהגובה.

בתוך ה-div יוצרים את ה-iframe ונותנים לו את התכונות הבאות:

position: absolute

• top: 0
•  left: 0 
• width: 100%
•  height: 100%

<div style="position: relative; width: 100%; padding-top: 50%;">

    <iframe style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; " src="https://www.youtube.com/embed/mAZhQQN758g" allowfullscreen="allowfullscreen" allow="fullscreen"> </iframe>

</div>

פריים מוטמע מתאים עצמו לגודל המסך

10. מסננים (ממירי טקסט)

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

ביצוע: 

• בעמוד הקורס (או בעמוד הפעילות) פעילויות נוספות\ מסננים

• בעמוד הגדרות המסננים נין לבחור מול כל מסנן האם הוא יהיה מופעל או כבוי

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

שימוש מסננים :

• תצוגת H5P מציגה קישור רלוונטי כתוכן H5P.
  • כיתוב: 

• קישורים אוטומטיים לשמות הפעילות:
  • כיתוב:
    שם פעילות לבדיקה
    
  • תצוגה:
    שם פעילות לבדיקה (לחיצה תעביר לפעילות).
    
• כתיב מתמטי  (MatJax). בעזרת כפתור  ניתן להכניס לטקסט נטסחאות מתמטיות. הנוסחאות הן למעשה רצף תווים שמומרים לצורה הגרפאית של הנוסחה. 
  • כיתוב:  \( \frac{15}{10+5} -x \)
  • תצוגה: 
    
    
• הצגת פרצופונים: הצגת אימוג'י על ידי רצף אותיות
• • כיתוב :-)
  • תצוגה: 
    
• המרת כתובת URL לקישורים ותמונות. במקרה של קישור - הטקסט יופיע בכחול וניתן יהיה ללחוץ עליו ולהגיע לקישור. במקרה של תמונה (בתנאי שהתמונה אינה חסומה) תתבצע הטמעה של התמונה.
  • כיתוב:  
    https://www.smkb.ac.il//media/d0qplo0n/עדכונים-שוטפים-מצב-בטחוני-מעודכן.jpg
    
  • תצוגה: 
    
    
• תוספי מולטימדיה: המרת כתובת URL של סרט להטמעה שלו.
  • כיתוב:  
    https://www.youtube.com/watch?v=QtYN1NXM4Y8
  • תצוגה:
    
• תוכן בעל שפות מרובות: אפשרות להמיר קוד HTML - כך שהכיתוב יהיה בשפות מרובות. כלומר יהיה טקסט בעברית כאשר שפת הממשק בעברית, וטקסט באנגלית כאשר שפת הממשק באנגלית.
• כיתוב: (בעורך HTML)
  

<span lang="en" class="multilang">Content in English</span>

<span lang="he" class="multilang">תוכן בעברית</span>

• תצוגה בעברית: תוכן בעברית
• תצוגה באנגלית: Content in English  

11. העתקת טקסט מ-Word ל-Moodle

ניתן להציג מסמך טקסט במודל בדרכים הבאות:

• הצגת מסמך כקובץ: במקרה זה משתתפי הקורס יצטרכו להוריד את המסמך למחשב האישי כדי לצפות בו.
• מסמך מוטמע: הטמעת מסמך מתוך הענן (Google Drive או OneDrive). לשיטה זו יש מספר יתרונות. ניתן לראות את הקובץ ישירות במודל, כאשר מתקנים את הקובץ בענן – המימוש שלו במודל מתוקן גם כן.
• שימוש בעורך הטקסט של מודל: לשיטה הזו יש חיסרון בכך שעורך הטקסט של מודל  יש פחות אפשרויות עיצוביות מעורך טקסט רגיל. היתרון של השימוש בשיטה זו - ההתממשקות עם מודל. ניתן לחפש תוכן שיוצר בעורך הטקסט של מודל. ניתן להשתמש במסננים כך שמילה מתוך הטקסט תהווה קישור לפעילויות בקורס, תטמיע אתרים, תאפשר סנכרון לפעילויות מידע כמו ויקי ואגרון מונחים.

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

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

העתקה ישירה מ-Word

 מדובר בשיטה הכי פחות יעילה:

העתקה מ-Word-Online 

(מסמך Word ב-OneDrive)

העתקה דרך עורך HTML

מומלץ- https://wordtohtml.net/

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

לסיכום:

• אם יש תמונות עדיף להעביר מ-Word Online
• אם אין תמונות להשתמש המרה ל-HTML https://wordtohtml.net/

12. עורך תבניות אתר

עורך הטקסט של מודל, הוא למעשה עורך HTML (הקוד שאיתו בונים אתרים). 

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

ממשק חלון עריכת אתר

• לחיצה על כפתור "עורך תבנית אתר" 
• כתוצאה מכך חפתח ממש עריכת אתר.
  
• בחלק השמאלי יש תפריט אייקונים עם האפשרויות הבאות:
   - Templatetes (תבניות) - במקום זה ניתן לבחור תבניות אתר לשימוש.
• שאר האפשרויות: Componenets, Base, Bootstrap, HTML Properties ו-Trees קשורים בקוד ה-HTML - ואינם חלק ממדריך זה. 
  
• באמצע ה-Header ישנם ארבע אפשרויות תצוגה
  
  
  • Canvas אזור העריכה בו מעצבים את האתר.
  • Preview: כיצד האתר יראה כאשר אזור העריכה מוסתר.
  • Source Code: הקוד מאחורי האתר, בתצוגה זו ניתן לערות את הקוד.
  • Canvas-Source Code אזור העריכה ולצידו הקוד של האתר.
• בחלק הימני של ה-Header אפשרויות תצוגה על פי סוג מדיה:
  •  תצוגת סמארטפון
  •  תצוגת טאבלט - אנכי
  •  תצוגת טאבלט - אופקי
  •  תצוגת לפטופ
  •  תצוגת מסך מחשב.
• לצד כפתורי בחירת מסך התצוגה יש כפרתורים לביטול או ביצוע מחדש  ובכן כפתור שמירה.

בחירת תבנית לעמוד אינטרנט

• לחיצה על כפתור התבניות
  
• תחת אזור Template לחיצה על כפתור Showcase
  
• בחלון SHowcase מומלץ לחות על כפתור שימוש בשפה האנגלית
  
• כתוצאה מכך יוצגו בחלון מספר רב של תבניות
  
• ניתן לחפש תבנית על ידי מילת חיפוש בחלונית החיפוש, או לצמצם את האפשרויות על ידי לחיצה על כפתור המראה על סוג תבנית רצויה (Cards, Image, Video...)
  
• לאחר איתור התבניות הרצויה יש להקיש עליה. כתוצאה מכך יפתח חלון ובו אפשרות ליבוא את התבנית. יש ללחוץ עךל הכפתור הירוד לצורך יבוא.
  
• התבנית בנבחרה תופיע באזור Templates
  

הוספת תבנית לאתר

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

עריכת התבנית

שינוי טקסט

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

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

שינוי לינק (וידאו תמונה iFrame וכו)

• לחיצה על הרכיב. 
• לעיתים הרכיב מכיל קישור ולא ניתן ללחוץ עליו, ניתן לחילופין לאתר את הרכיב באזור השמאלי Trees.
  
• לאחר איתור הרכיב המבוקש יש ללחוץ על כפתור Base
  
• כתוצאה מכך יופיע הקישור של הרכיב המבוקש
  
• לאחר החלפת הקישור ישתנה התוכן ברכיב
  

שינוי תכונות רכיבי האתר

שינוי צבעים ריווחים ועוד - נעשה על ידי שינוי  תכונות הרכיבים.

• אתר את הרכיב על ידי לחיצה עליו, או על ידי מציאתו באזור Trees.
  
• ניתן לשנות את התכונות באזור Base.
• לשינוי תכונת צבע רקע יש לבחור את הצבע הרצוי
  
• הכפתור הימני הלבן מאפשר לבטל את צבע הרקע.

• בסיום יש לשמור.