סיכום שיעור

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

קוד פתוח – וורדפרס, ג'ומלה, דרופל

קוד סגור – וויקס ווורדפרס.קום – (תזכירו לי להסביר על  ווורדפרס.קום בשבוע הבא)

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

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

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

דיברנו על המרכיבים של המערכת (סט קבצים וקובץ sql שהוא בסיס הנתונים)

ראינו את הקובץ wp_config.php שמהווה בעצם את החוליה המקשרת בין סט הקבצים לקובץ בסיס הנתונים

ביצענו תהליך התקנה של וורדפרס על השרתים שלכן

1. הורדנו את המערכת מהרשת
2. העלנו לתיקיה public_html
3. פתחנו כיווץ והעלנו מהתיקיה wordpress לתיקיה הראשית
4. יצרנו בסיס נתונים (+ משתמש וסיסמה)
5. שינינו את שמו של הקובץ index.html שישב על האחסון שלנו ל old (כדי שהשרת יציג לנו את index.php של וורדפרס)
6. גלשנו לאתר לתהליך התקנה אוטומטי במהלכו הזנו את פרטי בסיס הנתונים

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

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

נכנסנו לניהול האתר שלנו באמצעות כתובת האתר בתוספת wp-admin

לדוגמא

http://tmposhra.prog-sites.co.il/wp-admin

דיברנו קצת על מבנה הקישורים

מבנה פשוט כמו באתר הזה http://www.greencode.co.il/?page_id=935

לעומת מזהה הפוסט כמו באתר http://hadimyon.co.il/new-in-studio/

הכרנו את שני סוגי התכנים הכי בסיסיים בוורדפרס – עמודים ופוסטים.

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

יצרנו עמוד (נתנו כותרת לעמוד, שינינו את הקישור לעמוד, הכנסנו קצת תוכן)

הכרנו את העורך הויזואלי לעומת עורך הטקסט (שמציג את ה HTML של העמוד)

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

תפריטים

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

שיחקנו עם סדר הפריטים בתפריט (גרירה) ועם היררכיה (הזחה)

ראינו שהתבנית שלנו מציעה לנו 2 מיקומים לתפריטים ושילבנו את התפריט שלנו במיקום העליון

יצרנו תפריט נוסף של קישורים לרשתות החברתיות ושילבנו אותו במיקום השני (התבנית המסויימת הזו מזהה לאן הקישור ומציגה אייקון בהתאם)

ראינו את התפריטים באתר שלנו

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

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

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

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

מחיקה אמיתית (שמשחררת מקום באחסון) היא רק מהמדיה (ולא מפוסט או עמוד)

דיברנו על איזה סוגי קבצים מעלים – jpg png gif pdf….

דיברנו על גדלי תמונות – רזולוציה – לא יותר מרוחב 2000 פיקסלים והרבה פעמים 1200 מספיק (תלוי איפה התמונה אמורה להיות מוצגת)

משקלים – תמיד להקטין תמונות https://www.easy-resize.com/en/ (בהמשך נראה גם תוספים לזה)

ראינו שהתמונות נמצאות בתיקיה uploads לפי שנים וחודשים

למשל כך

http://tmposhra.prog-sites.co.il/wp-content/uploads/2018/06/pic-2000-240_Easy-Resize.com_.jpg

ראינו שלכל תמונה אנחנו יכולים לתת כותרת, תאור, טקסט חלופי וכיתוב – חשוב לנגישות ולקידום

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

התחלנו טיפה עם פוסטים, שילבנו תמונה בפוסט ונתנו לפוסט גם תמונה ראשית

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

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

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

חזרנו לפוסט ושילבנו בו תגית "קרא עוד"

התחלנו לדבר על קטגוריות – נחזור לזה בשבוע הבא

בשבוע הבא

נחזור על הקטגוריות ונכיר גם את התגיות

נדבר על תגובות

נטפל בהגדרות דף הבית ועמוד הפוסטים

נכיר את העריכה המהירה של הפוסטים / עמודים

נשלב בעמודים שלנו קישור למסמך pdf

נכיר את האפשרויות של התבנית המסויימת שלנו

נכיר את אזורי הווידגטים שלנו (את הסרגל הצדדי ואת הפוטר)

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

נלמד להחליף תבנית

קישורים

הורדת וורדפרס – https://he.wordpress.org/

הקטנת תמונות https://www.easy-resize.com/en/

שיעורי בית

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

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

בנוסף אתן מוזמנות לראות סרטון של 10 דקות לגבי התקנה של וורדפרס על המחשב האישי שלכן (לא ברשת) ולתרגל את תהליך ההתקנה שוב

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

הזמן הקרוב הגיע.

שימו לב – אתגר ב JS

פיתחתי את משחק הזכרון.

מצרפת תיקיה שלו שכוללת גם מסמך תעוד קטן

http://gamani.info/prog/js-extra/memory.zip

עברו על זה ונסו להבין מה עשיתי פה ולמה (זה לבד אתגר. בשבוע הבא אשתדל לחשוב על תרגיל אחר אולי קל יותר)

אחרי שהבנתן הכל נסו לשפר את המשחק

הבעיה בו היא שהכל נעשה באמצעות class-ים

כלומר כבר בתחילת המשחק אם הגולש יעשה בדוק מרכיב הוא יוכל לדעת איזה קלף מסתתר איפה

אני רוצה שתשפרו את המשחק הזה ככה שהקלפים לא יהיו תמונות רקע שמסתתרות (באמצעות CSS ל class-ים מסויימים) אלא שבתוך כל li יהיה אלמנט HTML מסוג תמונה

<li><img src=""></li>

כאשר רק בלחיצה על קלף (פתיחה שלו) ה attribute בשם src יקבל את שם מיקום התמונה

כאשר הקלף אמור להסגר ה attribute בשם src יתאפס כך שלא תוצג תמונה (או שתוצג תמונה ריקה או משהו)

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

יש להשתמש ב https://www.w3schools.com/jquery/html_attr.asp

שיהיה בהצלחה.

מזהירה מראש – לא בטוח שיהיה לי זמן לסייע בזה אבל מי שתנסה ותתקע, אשתדל לסייע.